@import url("./variables.css");
@import url("./spec-icons.css");

.wishlist-view__type {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 5px 10px;
    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 999px;
    color: var(--accent);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wishlist-view__type--mplus { border-color: rgba(32, 201, 151, 0.42); color: #49d5b4; }
.wishlist-view__dataset-heading { display: flex; align-items: center; gap: 12px; }
.wishlist-view__dataset-heading h4 { margin: 0; }
.wishlist-view__spec-name { margin: 3px 0 0; color: var(--text-secondary); }
.wishlist-view__stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wishlist-view__stats > span { display: grid; gap: 2px; min-width: 110px; padding: 8px 10px; border-radius: 7px; background: rgba(255, 255, 255, 0.035); }
.wishlist-view__stats small { color: var(--text-secondary); font-size: var(--font-size-xs); text-transform: uppercase; }
.wishlist-view__item-icon { display: grid; width: 40px; height: 40px; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: #0d121a; }
.wishlist-view__item-icon img { width: 100%; height: 100%; object-fit: cover; }
.wishlist-view__item-icon--placeholder { color: var(--accent); font-size: var(--font-size-xs); font-weight: 900; letter-spacing: 0.03em; }
.wishlist-view__item-copy { display: grid; align-content: center; gap: 2px; min-width: 0; }
.wishlist-view__item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wishlist-view__item-copy small { color: var(--text-secondary); }
.wishlist-view__item-indicators { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.wishlist-view__item-indicator { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: .68rem; font-weight: 900; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.wishlist-view__item-indicator.is-boe { background: rgba(255, 153, 72, .11); color: #ffad66; }
.wishlist-view__item-indicator.is-tier-set { background: rgba(187, 120, 255, .12); color: #c999ff; }
.wishlist-view__item-gain { align-self: center; text-align: right; color: #49d5b4; font-weight: 800; }
.wishlist-view__item { position: relative; transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease; }
.wishlist-view__item:hover,
.wishlist-view__item:focus-visible { border-color: rgba(77, 207, 255, 0.45); background: rgba(77, 207, 255, 0.045); outline: none; transform: translateY(-1px); }
.wishlist-view__item::after {
    position: absolute;
    z-index: 8;
    left: 52px;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(360px, calc(100vw - 64px));
    padding: 8px 10px;
    border: 1px solid rgba(77, 207, 255, 0.35);
    border-radius: 7px;
    background: #080e17;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    color: var(--text);
    content: attr(data-tooltip);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.wishlist-view__item:hover::after,
.wishlist-view__item:focus-visible::after { opacity: 1; transform: translateY(0); }

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}

html,
body {

    width: 100%;
    height: 100%;

    font-family: var(--font-family);
    font-size: 16px;
    line-height: var(--line-height-base);

    background: var(--background);

    color: var(--text);

}

/* Einheitlicher Aktivpunkt fuer die Navigation innerhalb einer Seite. */
.portal-page nav button[aria-selected="true"],
.portal-page button[role="tab"][aria-selected="true"] {
    position: relative;
}

.portal-page nav button[aria-selected="true"]::after,
.portal-page button[role="tab"][aria-selected="true"]::after {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 9px currentColor;
    content: "";
    pointer-events: none;
}

::selection {
    background: rgba(224, 183, 47, 0.28);
    color: var(--text);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

body {

    display: flex;

    flex-direction: column;

    background:
        radial-gradient(circle at 86% 7%, rgba(85, 217, 255, 0.075), transparent 30%),
        radial-gradient(circle at 16% 84%, rgba(109, 168, 255, 0.05), transparent 32%),
        radial-gradient(circle at 48% 24%, rgba(224, 183, 47, 0.025), transparent 38%),
        var(--background);

}

button,
input,
select,
textarea {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: var(--line-height-tight);
}

/* ---------- Header ---------- */

#header {

    height: var(--header-height);

    display: flex;

    justify-content: space-between;
    align-items: center;
    gap: 10px;

    padding: 0 clamp(18px, 2vw, 30px);

    background: rgba(10, 15, 23, 0.92);

    border-bottom: 1px solid var(--border);

    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(18px);

    z-index: 100;

}

#header h1 {

    font-size: 23px;

    letter-spacing: -0.02em;

    color: var(--accent);

}

.header-left {

    display: flex;

    align-items: center;

    gap: 14px;

}

.header-left small {

    display: block;

    margin-top: 2px;

    color: var(--text-secondary);

    font-size: var(--font-size-sm);

    letter-spacing: 0.04em;

}

/* ---------- Logo ---------- */

.logo {

    width: 46px;
    height: 46px;

    display: flex;

    justify-content: center;
    align-items: center;

}

.logo img {

    width: 46px;
    height: 46px;

    object-fit: contain;

}

/* ---------- Benutzer ---------- */

.header-right {

    display: flex;

    align-items: center;

    gap: 14px;

}

.header-top {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.user-info,
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-info {
    padding: 5px 11px 5px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.user-identity {
    display: grid;
    gap: 1px;
    min-width: 0;
    max-width: 230px;
}

.username {

    font-weight: 600;

}

.user-role {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.user-role--officer { color: var(--accent); }
.user-role--raider { color: #7fd3ff; }
.user-role--member { color: var(--text-secondary); }

.user-meta {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
    line-height: 1;
}

.user-battletag {
    min-width: 0;
    overflow: hidden;
    color: #8ea2b4;
    font-size: 9px;
    line-height: 1;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-battletag--missing { color: #ff666b; }
.user-battletag--missing:hover,
.user-battletag--missing:focus-visible { color: #ff9296; text-decoration: underline; }

.header-home,
.header-logout {
    min-height: 38px;
    padding: 9px 13px;
    border-radius: 8px;
    font-size: var(--font-size-base);
    font-weight: 700;
}

.header-home {
    border: 1px solid var(--border);
    background: #171e29;
    color: var(--text);
    text-decoration: none;
}

.header-home:hover { border-color: rgba(212, 175, 55, 0.6); }

.avatar {

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border: 2px solid var(--accent);

    box-shadow: 0 0 10px rgba(0,0,0,.35);

}

/* ---------- Layout ---------- */

#layout {

    display: flex;

    height: calc(100vh - var(--header-height));

}

/* ---------- Sidebar ---------- */

#sidebar {

    width: var(--sidebar-width);

    background:
        linear-gradient(180deg, rgba(224, 183, 47, 0.035), transparent 24%),
        #0e141e;

    border-right: 1px solid var(--border);

    box-shadow: 12px 0 34px rgba(0, 0, 0, 0.12);

}

#sidebar nav {

    padding: 18px 10px;

}

#sidebar ul {

    list-style: none;

}

#sidebar li {

    display: flex;

    align-items: center;

    gap: var(--spacing-sm);

    position: relative;

    margin: 5px 0;

    padding: 10px 12px;

    border-radius: var(--border-radius);

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition-fast),
        border-color var(--transition-fast);

    border: 1px solid transparent;

}

#sidebar li:hover {

    background: var(--surface-hover);

    border-color: rgba(255, 255, 255, 0.045);

    transform: translateX(2px);

}

#sidebar li.active {

    background:
        linear-gradient(90deg, rgba(224, 183, 47, 0.18), rgba(224, 183, 47, 0.06));

    color: var(--accent);

    border-color: rgba(224, 183, 47, 0.32);

    font-weight: 700;

    box-shadow:
        inset 3px 0 0 var(--accent),
        0 12px 26px rgba(0, 0, 0, 0.16);

}

#sidebar li img {

    width: 44px;

    height: 44px;

    object-fit: contain;

    flex-shrink: 0;

}

#sidebar li > span {

    flex: 1;

    font-size: var(--font-size-base);

    letter-spacing: 0.01em;

}

/* ---------- Content ---------- */

#content {

    flex: 1;

    overflow-y: auto;

    padding: clamp(22px, 3vw, 42px);

    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.012), transparent 38%),
        transparent;

}

.portal-page-loading {
    margin: 32px;
    color: var(--text-muted);
    font-weight: 700;
}

/* ---------- Seiten ---------- */

h2 {

    margin-bottom: var(--spacing-lg);

    color: var(--accent);

}

section {

    margin-bottom: var(--spacing-lg);

}

/* ===================================================
   hidden-Attribut wiederherstellen

   Der Browser blendet Elemente mit dem Attribut hidden
   ueber die Standardregel [hidden] { display: none }
   aus. Jede eigene display-Angabe hat aber eine hoehere
   Spezifitaet und setzt diese Regel ausser Kraft.

   Genau das passierte hier: button { display: inline-flex }
   weiter unten galt auch fuer Buttons mit hidden-Attribut.
   element.hidden = true blieb dadurch im gesamten Portal
   wirkungslos - sichtbar zum Beispiel im Vorschau-Dialog,
   wo bei Videos "Herunterladen" und "In neuem Fenster
   oeffnen" stehen blieben, obwohl der Code sie ausblendet.

   Diese Regel stellt das erwartete Verhalten wieder her.
   !important ist hier bewusst gesetzt, weil sie sich
   gegen alle spaeteren display-Angaben durchsetzen muss.
=================================================== */

[hidden] {
    display: none !important;
}

/* ---------- Buttons ---------- */

button {

    display: inline-flex;

    justify-content: center;
    align-items: center;

    gap: var(--spacing-sm);

    padding: 10px 18px;

    border: none;

    border-radius: var(--border-radius);

    background: var(--accent);

    color: #000;

    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;

    cursor: pointer;

    transition:
        background var(--transition),
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);

}

button:hover {

    background: var(--accent-hover);

    transform: translateY(-1px);

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);

}

button:disabled {

    opacity: .6;

    cursor: not-allowed;

}

.btn-danger {

    background: var(--danger);

    color: #fff;

}

.btn-danger:hover {

    background: #d7372f;

}

/* ---------- Formulare ---------- */

.form-group {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-xs);

    margin-bottom: var(--spacing-lg);

}

.form-group label {

    font-weight: 600;

    color: var(--text);

}

.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 12px 14px;

    border: 1px solid rgba(126, 145, 168, 0.28);

    border-radius: var(--border-radius);

    background: #0d141e;

    color: var(--text);

    font-family: inherit;

    font-size: var(--font-size-base);

    transition:
        border-color var(--transition),
        background var(--transition);

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    outline: none;

    border-color: var(--accent);

    background: #101923;

    box-shadow: 0 0 0 3px rgba(224, 183, 47, 0.09);

}

.form-group textarea {

    min-height: 90px;

    resize: vertical;

}

/* ---------- Dateiauswahl ---------- */

input[type="file"] {

    cursor: pointer;

}

input[type="file"]::file-selector-button {

    margin-right: var(--spacing-md);

    padding: 10px 16px;

    border: none;

    border-radius: var(--border-radius);

    background: var(--surface-hover);

    color: var(--text);

    cursor: pointer;

    transition:
        background var(--transition);

}

input[type="file"]::file-selector-button:hover {

    background: var(--accent);

    color: #000;

}

.form-actions {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: var(--spacing-lg);

    margin-top: var(--spacing-lg);

}

#upload-status {

    color: var(--text-secondary);

    font-size: var(--font-size-base);

}

/* ---------- Tabellen ---------- */

.data-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: var(--spacing-md);

    border-spacing: 0;

}

.data-table thead {

    background: rgba(85, 217, 255, 0.025);

}

.data-table th {

    padding: 16px;

    text-align: left;

    color: var(--accent);

    border-bottom: 1px solid var(--border-strong);

    font-weight: 600;

    white-space: nowrap;

}

.data-table td {

    padding: 16px;

    border-bottom: 1px solid var(--border-soft);

    vertical-align: middle;

}

.data-table tbody tr:hover {

    background: rgba(85, 217, 255, 0.035);

}

.data-table td:first-child {

    font-weight: 600;

}

.data-table td:last-child,
.data-table th:last-child {

    width: 1%;

    white-space: nowrap;

    text-align: right;

}

/* ---------- Dashboard Ladeuebergang ---------- */

.dashboard-loading-screen {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: none;
}

.dashboard-loading-screen__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 34%, rgba(67, 204, 255, .16), transparent 30%),
        radial-gradient(circle at 72% 72%, rgba(168, 140, 255, .12), transparent 34%),
        rgba(7, 11, 18, .96);
}

.dashboard-loading-screen__content {
    position: relative;
    z-index: 1;
    display: grid;
    width: 260px;
    justify-items: center;
    transform-origin: center;
    will-change: transform, opacity;
}

.dashboard-loading-screen__content--departing {
    position: fixed;
}

.dashboard-loading-screen__content img {
    width: 210px;
    height: 210px;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5));
}

.dashboard-loading-screen__content p {
    margin: 8px 0 0;
    color: #eaf9ff;
    font-size: var(--font-size-base);
    font-weight: 800;
    letter-spacing: .18em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .72);
}

.dashboard-loading-screen__content span {
    margin-top: 4px;
    color: var(--accent-cyan);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .72);
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-loading-screen { display: none; }
}

/* ---------- Member Portal Login ---------- */

.portal-login-page {
    width: 100%;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 20%, rgba(36, 79, 108, .18), transparent 34%),
        radial-gradient(circle at 80% 80%, rgba(77, 61, 122, .12), transparent 30%);
}

.portal-login-card {
    width: min(100%, 460px);
    padding: 42px 40px 36px;
    text-align: center;
    border: 1px solid rgba(140, 175, 255, .18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(19, 29, 42, .97), rgba(12, 18, 27, .98));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .03);
}

.portal-login-logo {
    width: 82px;
    height: 82px;
    object-fit: cover;
    border: 1px solid rgba(212, 175, 55, .45);
    border-radius: 20px;
    box-shadow: 0 0 24px rgba(0, 0, 0, .35);
}

.portal-login-kicker {
    display: block;
    margin-top: 18px;
    color: var(--accent-cyan);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.portal-login-card h1 {
    margin: 8px 0 10px;
    color: var(--text);
    font-size: 32px;
    font-weight: 800;
}

.portal-login-card p {
    max-width: 340px;
    margin: 0 auto 28px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.discord-login-button {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 10px;
    background: #5865f2;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.discord-login-button:hover { background: #6875ff; transform: translateY(-1px); }

.portal-login-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.portal-login-separator::before,
.portal-login-separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(140, 175, 255, .12);
}

.portal-login-back {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(140, 175, 255, .16);
    border-radius: 9px;
    background: #0f1722;
    color: #c8d1dc;
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: 700;
    transition: .2s ease;
}

.portal-login-back:hover { border-color: rgba(64, 214, 248, .35); color: #fff; }

@media (max-width: 520px) {
    .portal-login-card { padding: 34px 24px 28px; }
}


/* ---------- Einheitliches Seitenlayout ---------- */

.portal-page {
    --portal-section-accent: var(--accent);
    --portal-section-rgb: 217, 182, 77;
    width: min(1560px, 100%);
    margin: 0 auto;
    padding: 4px 0 36px;
    color: var(--text);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.downloads-page {
    --portal-section-accent: var(--accent-violet);
    --portal-section-rgb: 168, 140, 255;
}

.raidplans-page {
    --portal-section-accent: var(--accent-orange);
    --portal-section-rgb: 255, 180, 91;
}

.wishlist-page {
    --portal-section-accent: var(--accent-violet);
    --portal-section-rgb: 168, 140, 255;
}

/* Gemeinsames Grundprinzip für die Bereichsköpfe. */
.portal-page-intro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 154px;
    margin-bottom: 26px;
    padding: clamp(24px, 3vw, 34px) clamp(24px, 3.4vw, 42px);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(var(--portal-section-rgb), 0.2);
    border-radius: 22px;
    background:
        radial-gradient(circle at 84% 8%, rgba(var(--portal-section-rgb), 0.13), transparent 34%),
        linear-gradient(125deg, rgba(var(--portal-section-rgb), 0.075), transparent 38%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.025), transparent 48%),
        rgba(12, 19, 29, 0.88);
    box-shadow:
        0 22px 56px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.portal-page-intro::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
}

.portal-page-intro::after {
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, var(--portal-section-accent), rgba(var(--portal-section-rgb), 0.08) 34%, transparent 72%);
    opacity: 0.72;
}

.portal-page-intro > * {
    position: relative;
    z-index: 1;
}

.portal-page-kicker {
    margin: 0 0 7px;
    color: color-mix(in srgb, var(--portal-section-accent) 72%, #ffffff);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: var(--letter-spacing-label);
}

.portal-page-intro h2 {
    margin: 0 0 7px;
    color: var(--portal-section-accent);
    font-size: clamp(32px, 3vw, 44px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.portal-page-intro p:last-child {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Einheitliche Standard-Panels für alle Portalbereiche. */
.portal-page > .card {
    padding: clamp(20px, 3vw, 34px);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(var(--portal-section-rgb), 0.045), transparent 34%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.018), transparent 46%),
        var(--surface-soft);
    box-shadow:
        var(--shadow-soft),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(12px);
    overflow: visible;
}

.portal-page-state {
    --portal-state-color: #25d2a0;
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 9px 13px;
    border: 1px solid color-mix(in srgb, var(--portal-state-color) 32%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--portal-state-color) 8%, rgba(9, 14, 21, 0.72));
    color: color-mix(in srgb, var(--portal-state-color) 60%, var(--text));
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.portal-page-state__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--portal-state-color);
    box-shadow: 0 0 12px color-mix(in srgb, var(--portal-state-color) 58%, transparent);
}

.portal-page-state--violet {
    --portal-state-color: var(--accent-violet);
}

.portal-page-state--orange {
    --portal-state-color: var(--accent-orange);
}

.portal-page-state--mint {
    --portal-state-color: var(--accent-mint);
}

.portal-page-state--gold {
    --portal-state-color: var(--accent);
}

.portal-page-state--cyan {
    --portal-state-color: var(--accent-cyan);
}

.portal-page-state--warning .portal-page-state__dot {
    background: var(--warning);
    box-shadow: 0 0 12px rgba(224, 183, 47, .45);
}

.portal-page-state--warning {
    --portal-state-color: var(--warning);
}

.portal-page-state--muted .portal-page-state__dot {
    background: #718096;
    box-shadow: none;
}

.portal-page-state--muted {
    --portal-state-color: #718096;
}

.portal-page-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.portal-page-tools::before {
    width: 1px;
    height: 42px;
    margin-right: 4px;
    background: linear-gradient(transparent, rgba(var(--portal-section-rgb), 0.42), transparent);
    content: "";
}

.portal-page-action {
    min-height: 38px;
    padding: 9px 15px;
    border: 1px solid rgba(224, 183, 47, .42);
    border-radius: 9px;
    background: rgba(224, 183, 47, .10);
    color: #f3ce50;
    font-weight: 700;
    cursor: pointer;
}

.portal-page-action:hover,
.portal-page-action:focus-visible {
    border-color: var(--accent);
    background: rgba(224, 183, 47, .16);
}

/* Gemeinsamer Grundstil für alle Portal-Seiten (Dashboard bleibt ausgenommen). */
.portal-page button:not(.btn-danger):not(.wishlist-danger),
.portal-page input,
.portal-page select,
.portal-page textarea {
    font-family: var(--font-family);
}

.portal-page button:not(.btn-danger):not(.wishlist-danger) {
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #1c2634;
    color: var(--text);
    font-size: var(--font-size-base);
    font-weight: 700;
}

.portal-page button:not(.btn-danger):not(.wishlist-danger):hover:not(:disabled),
.portal-page button:not(.btn-danger):not(.wishlist-danger):focus-visible {
    border-color: rgba(224, 183, 47, .55);
    background: #222e3e;
    color: var(--text);
    transform: none;
}

.portal-page button.portal-page-action,
.portal-page button.portal-page-action:hover:not(:disabled),
.portal-page button.portal-page-action:focus-visible {
    min-height: 38px;
    padding: 9px 15px;
    border-color: rgba(224, 183, 47, .42);
    background: rgba(224, 183, 47, .10);
    color: #f3ce50;
}

/* Inhaltsarme Download-Ansichten bleiben kompakt; der Download ist die Hauptaktion. */
.downloads-page > .card {
    padding: 24px 28px;
}

.downloads-page .downloads-status {
    margin: 10px 0 14px;
}

.downloads-page .data-table {
    margin-top: 0;
    table-layout: fixed;
}

.downloads-page .downloads-column--file { width: 19%; }
.downloads-page .downloads-column--version { width: 10%; }
.downloads-page .downloads-column--description { width: 24%; }
.downloads-page .downloads-column--size { width: 10%; }
.downloads-page .downloads-column--uploaded { width: 17%; }
.downloads-page .downloads-column--actions { width: 20%; }

.downloads-page .data-table td {
    min-width: 0;
    overflow-wrap: anywhere;
}

.downloads-page .downloads-actions__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.downloads-page .downloads-actions__inner button {
    flex: 0 0 auto;
}

.downloads-page button.download-file,
.downloads-page button.download-file:hover:not(:disabled),
.downloads-page button.download-file:focus-visible {
    border-color: rgba(85, 217, 255, 0.42);
    background: linear-gradient(135deg, rgba(44, 176, 224, 0.96), rgba(28, 122, 189, 0.96));
    color: #f7fbff;
}

@media (max-width: 980px) {
    .downloads-page > .card {
        overflow-x: auto;
    }

    .downloads-page .data-table {
        min-width: 940px;
    }
}

/* Officer-Tabs verwenden denselben aktiven Zustand wie die übrigen Portal-Tabs. */
.portal-page .officer-tabs button[aria-selected="true"],
.portal-page .officer-subtabs button[aria-selected="true"] {
    border-color: rgba(212, 175, 55, .72);
    background: rgba(224, 183, 47, .13);
    color: #f3ce50;
}

.portal-page .officer-tabs button[aria-selected="true"]:hover,
.portal-page .officer-tabs button[aria-selected="true"]:focus-visible,
.portal-page .officer-subtabs button[aria-selected="true"]:hover,
.portal-page .officer-subtabs button[aria-selected="true"]:focus-visible {
    border-color: var(--accent);
    background: rgba(224, 183, 47, .16);
    color: #f3ce50;
}

.portal-page h3,
.portal-page h4 {
    color: var(--accent);
}

.portal-page input,
.portal-page select,
.portal-page textarea {
    border-color: rgba(126, 145, 168, 0.26);
    border-radius: 10px;
    background: #0d141e;
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.portal-page input:hover,
.portal-page select:hover,
.portal-page textarea:hover {
    border-color: rgba(170, 181, 198, 0.4);
}

.portal-page input:focus,
.portal-page select:focus,
.portal-page textarea:focus {
    border-color: var(--accent);
    background: #101923;
    box-shadow: 0 0 0 3px rgba(224, 183, 47, 0.08);
}

.portal-page p {
    color: var(--text-secondary);
}

@media (max-width: 760px) {
    .portal-page-intro {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
        padding: 24px 20px;
    }

    .portal-page-state,
    .portal-page-action {
        align-self: flex-start;
    }

    .portal-page-tools {
        justify-content: flex-start;
    }

    .portal-page-tools::before {
        display: none;
    }
}

.downloads-status {
    min-height: 1.3em;
    margin: 10px 0 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.downloads-status.success {
    color: #6ee7bd;
}

.downloads-status.error {
    color: #ff8d85;
}

/* =====================================================
   Midnight Command Center
===================================================== */

#header {
    height: 68px;
    padding: 0 clamp(16px, 2vw, 26px);
    border-bottom-color: rgba(67, 204, 255, 0.16);
    background: rgba(7, 12, 19, 0.95);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34);
}

#header h1 {
    color: var(--text);
    font-size: 19px;
    font-weight: 760;
    letter-spacing: 0.01em;
}

.header-left small {
    color: var(--accent-cyan);
    font-size: var(--font-size-xs);
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.logo,
.logo img {
    width: 40px;
    height: 40px;
}

.user-info {
    border-radius: 7px;
    border-color: rgba(112, 159, 194, 0.2);
    background: rgba(13, 22, 33, 0.86);
}

.avatar {
    width: 36px;
    height: 36px;
    border-width: 1px;
    border-color: var(--accent-cyan);
}

.header-home,
.header-logout {
    min-height: 36px;
    border-radius: 6px;
}

#sidebar {
    width: 232px;
    border-right-color: rgba(67, 204, 255, 0.13);
    background:
        linear-gradient(180deg, rgba(67, 204, 255, 0.045), transparent 30%),
        #090f18;
    box-shadow: 14px 0 38px rgba(0, 0, 0, 0.18);
}

#sidebar nav {
    padding: 20px 11px;
}

#sidebar li {
    gap: 11px;
    min-height: 48px;
    margin: 3px 0;
    padding: 7px 12px 7px 10px;
    border-radius: 7px;
}

#sidebar li:hover {
    border-color: rgba(67, 204, 255, 0.12);
    background: rgba(67, 204, 255, 0.055);
    transform: none;
}

#sidebar li.active {
    border-color: rgba(67, 204, 255, 0.22);
    background: linear-gradient(90deg, rgba(67, 204, 255, 0.14), rgba(67, 204, 255, 0.025));
    color: #90e4ff;
    box-shadow: inset 2px 0 0 var(--accent-cyan);
}

#sidebar li img {
    width: 34px;
    height: 34px;
    filter: saturate(0.9) contrast(1.05);
}

#sidebar li.active img {
    filter: saturate(1.08) contrast(1.08) drop-shadow(0 0 8px rgba(67, 204, 255, 0.22));
}

#content {
    padding: clamp(22px, 2.7vw, 38px);
    background: linear-gradient(135deg, rgba(67, 204, 255, 0.012), transparent 32%);
}

.portal-page {
    width: min(1480px, 100%);
    padding-top: 0;
}

.portal-page-intro {
    min-height: 112px;
    margin-bottom: 18px;
    padding: 22px 28px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--portal-section-accent);
    border-radius: 10px;
    background:
        linear-gradient(100deg, rgba(var(--portal-section-rgb), 0.07), transparent 30%),
        linear-gradient(145deg, #101925, #0c131e 72%);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18);
}

.portal-page-intro::after {
    height: 1px;
    background: linear-gradient(90deg, var(--portal-section-accent), transparent 62%);
    opacity: 0.78;
}

.portal-page-kicker {
    margin-bottom: 5px;
    color: color-mix(in srgb, var(--portal-section-accent) 75%, #fff);
}

.portal-page-intro h2 {
    margin-bottom: 5px;
    color: var(--text);
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.portal-page-intro p:last-child {
    font-size: var(--font-size-base);
}

.portal-page-state {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
}

.portal-page-state__dot {
    width: 6px;
    height: 6px;
    flex-basis: 6px;
}

.portal-page-tools::before {
    display: none;
}

.portal-page button:not(.btn-danger):not(.wishlist-danger),
.portal-page-action {
    border-radius: 6px;
}

.portal-page > .card,
.wishlist-tab-panel,
.season-panel {
    border-radius: 11px;
    border-color: var(--border-soft);
    background:
        linear-gradient(145deg, rgba(67, 204, 255, 0.018), transparent 34%),
        #0d151f;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}

.portal-page > .card {
    padding: clamp(20px, 2.5vw, 30px);
}

.data-table thead {
    background: rgba(67, 204, 255, 0.035);
}

.data-table th {
    padding: 13px 15px;
    color: #8edfff;
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.data-table td {
    padding: 14px 15px;
}

@media (max-width: 760px) {
    .portal-page-intro {
        min-height: 0;
        padding: 20px;
    }
}

/* ---------- Dashboard ---------- */

.dashboard-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: var(--spacing-lg);

    margin-top: var(--spacing-xl);

}

.welcome-card {

    grid-column: span 2;

}

/* ---------- Cards ---------- */

.card {

    background:
        linear-gradient(135deg, rgba(85, 217, 255, 0.022), transparent 34%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.016), transparent 44%),
        var(--surface-soft);

    border: 1px solid var(--border-soft);

    border-radius: 20px;

    padding: var(--spacing-lg);

    box-shadow: var(--shadow-soft);

    overflow-x: auto;

    box-shadow:
        var(--shadow-soft),
        inset 0 1px 0 rgba(255, 255, 255, 0.022);

}

.card h3 {

    margin-bottom: var(--spacing-lg);

    color: var(--accent);

}

/* ---------- Platzhalter ---------- */

.card-placeholder {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-sm);

    color: var(--text-secondary);

}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar {

    width: 10px;

    height: 10px;

}

::-webkit-scrollbar-track {

    background: var(--background);

}

::-webkit-scrollbar-thumb {

    background: var(--border);

    border-radius: 999px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--surface-hover);

}


/* =====================================================
   Smartphone
===================================================== */

@media (max-width: 768px) {

/* ---------- Header ---------- */

#header {

    padding: 16px;

    height: auto;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 16px;

}

.header-left {

    display: flex;

    align-items: center;

    gap: 12px;

}

#header h1 {

    font-size: 22px;

}

.header-left small {

    display: none;

}

.header-right {

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.user-info {

    display: flex;

    align-items: center;

    gap: 12px;

}

.username {
    font-size: var(--font-size-md);

    font-weight: 600;

}

.avatar {

    width: 40px;

    height: 40px;

}

#logoutButton {

    width: 100%;

}

.header-actions { width: 100%; }
.header-home,
.header-logout { flex: 1 1 0; text-align: center; }

    /* ---------- Layout ---------- */

    #layout {

        flex-direction: column;

        height: auto;

    }

    /* ---------- Sidebar ---------- */

    #sidebar {

        width: 100%;

        border-right: none;

        border-bottom: 1px solid var(--border);

    }

    #sidebar nav {

        padding: 10px;

    }

    #sidebar ul {

        display: flex;

        flex-wrap: wrap;

        gap: 8px;

    }

    #sidebar li {

        flex: 1 1 calc(50% - 8px);

        margin: 0;

        justify-content: center;

        text-align: center;

    }

    #sidebar li img {

        width: 42px;

        height: 42px;

    }

    /* ---------- Content ---------- */

    #content {

        padding: 16px;

    }

    /* ---------- Buttons ---------- */

    button {

        width: 100%;

    }

    #logoutButton {

        width: auto;

    }

    /* ---------- Form Actions ---------- */

    .form-actions {

        flex-direction: column;

        align-items: stretch;

    }

    
/* ---------- Dashboard ---------- */

    .dashboard-grid {

        grid-template-columns: 1fr;

    }

    .welcome-card {

        grid-column: span 1;

    }

}

/* Markenstil nach den responsiven Grundregeln. */
body {
    background:
        radial-gradient(circle at 86% 7%, rgba(168, 140, 255, 0.075), transparent 25%),
        radial-gradient(circle at 16% 84%, rgba(85, 217, 255, 0.05), transparent 28%),
        linear-gradient(145deg, #090d14 0%, #0a1019 50%, #080c13 100%);
}

#header {
    position: relative;
    background: rgba(8, 13, 21, 0.86);
}

#header::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 3%, rgba(85, 217, 255, 0.34), rgba(224, 183, 47, 0.28), rgba(168, 140, 255, 0.3), transparent 97%);
    content: "";
    pointer-events: none;
}

#header h1 { color: var(--text); }

.logo {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(224, 183, 47, 0.24);
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(224, 183, 47, 0.11), rgba(168, 140, 255, 0.05)),
        rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.logo img {
    width: 42px;
    height: 42px;
}

#sidebar {
    background:
        linear-gradient(180deg, rgba(85, 217, 255, 0.035), transparent 23%),
        #0c121b;
}

#sidebar li { --nav-color: var(--accent-cyan); }

#sidebar li:hover {
    border-color: color-mix(in srgb, var(--nav-color) 24%, transparent);
}

#sidebar li.active {
    border-color: color-mix(in srgb, var(--nav-color) 36%, transparent);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--nav-color) 18%, transparent), color-mix(in srgb, var(--nav-color) 5%, transparent));
    color: var(--nav-color);
    box-shadow:
        inset 3px 0 0 var(--nav-color),
        0 12px 28px rgba(0, 0, 0, 0.18),
        0 0 24px color-mix(in srgb, var(--nav-color) 7%, transparent);
}

#sidebar li img {
    width: 40px;
    height: 40px;
}

#sidebar li[data-page="seasoncompass"] img {
    object-fit: cover;
}

#sidebar li.active img {
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--nav-color) 32%, transparent));
}

/* Midnight-Endfassung: bewusst nach allen früheren Markenregeln. */
body {
    background:
        linear-gradient(115deg, rgba(67, 204, 255, 0.025), transparent 26%),
        linear-gradient(180deg, #080d15 0%, #070b12 55%, #060910 100%);
}

#header {
    height: 68px;
    padding: 0 clamp(16px, 2vw, 26px);
    background: rgba(7, 12, 19, 0.95);
}

#header h1 {
    color: var(--text);
    font-size: 19px;
}

.header-left small {
    display: block;
    color: var(--accent-cyan);
    font-size: var(--font-size-xs);
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.logo {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
}

.logo img {
    width: 40px;
    height: 40px;
}

#layout {
    height: calc(100vh - 68px);
}

#sidebar {
    width: 232px;
    background:
        linear-gradient(180deg, rgba(67, 204, 255, 0.045), transparent 30%),
        #090f18;
}

#sidebar li {
    min-height: 48px;
    margin: 3px 0;
    padding: 7px 12px 7px 10px;
    border-radius: 7px;
}

#sidebar li:hover {
    background: rgba(67, 204, 255, 0.045);
    transform: none;
}

#sidebar li.active {
    border-color: color-mix(in srgb, var(--nav-color) 25%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--nav-color) 13%, transparent), transparent);
    box-shadow: inset 2px 0 0 var(--nav-color);
}

#sidebar li img {
    width: 34px;
    height: 34px;
}

#sidebar li > span {
    font-size: var(--font-size-sm);
    font-weight: 650;
}

@media (max-width: 720px) {
    #header {
        height: auto;
        min-height: 68px;
    }

    #layout {
        height: auto;
    }

    #sidebar {
        width: 100%;
    }

    #sidebar li img {
        width: 32px;
        height: 32px;
    }
}

.portal-page h3,
.portal-page h4 {
    color: var(--text);
}

/* ---------- Sichtbare Command-Struktur ---------- */

.portal-page-intro {
    border-radius: 4px;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

.portal-page-heading,
.compass-command-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.portal-page-emblem,
.compass-command-emblem {
    --emblem-color: var(--accent-cyan);
    position: relative;
    display: grid;
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    place-items: center;
    clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--emblem-color) 19%, #14202d), #09111a 68%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--emblem-color) 44%, transparent),
        inset 4px 0 0 color-mix(in srgb, var(--emblem-color) 72%, transparent);
}

.portal-page-emblem::after,
.compass-command-emblem::after {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 13px;
    height: 2px;
    background: var(--emblem-color);
    content: "";
    box-shadow: 0 0 12px color-mix(in srgb, var(--emblem-color) 55%, transparent);
}

.portal-page-emblem img,
.compass-command-emblem img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .32));
}

.portal-page-emblem--violet { --emblem-color: var(--accent-violet); }
.portal-page-emblem--orange { --emblem-color: var(--accent-orange); }
.portal-page-emblem--mint { --emblem-color: var(--accent-mint); }
.portal-page-emblem--gold { --emblem-color: var(--accent); }
.compass-command-emblem--gold { --emblem-color: var(--accent); }
.compass-command-emblem--cyan { --emblem-color: var(--accent-cyan); }

.portal-page > .card {
    border-radius: 7px;
    border-top-color: color-mix(in srgb, var(--portal-section-accent) 24%, var(--border-soft));
}

@media (max-width: 620px) {
    .portal-page-heading,
    .compass-command-heading {
        align-items: flex-start;
        gap: 13px;
    }

    .portal-page-emblem,
    .compass-command-emblem {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    .portal-page-emblem img,
    .compass-command-emblem img {
        width: 42px;
        height: 42px;
    }
}

/* =====================================================
   Finaler Midnight-Polish: klare Ebenen statt Box-in-Box
===================================================== */

body::before {
    position: fixed;
    z-index: 0;
    inset: 68px 0 0 232px;
    background:
        linear-gradient(30deg, transparent 48.5%, rgba(88, 163, 209, .22) 49.5%, transparent 50.5%) 0 0 / 92px 54px,
        linear-gradient(150deg, transparent 48.5%, rgba(217, 182, 77, .16) 49.5%, transparent 50.5%) 46px 0 / 92px 54px;
    content: "";
    opacity: .055;
    pointer-events: none;
    mask-image: linear-gradient(115deg, transparent 4%, #000 38%, transparent 92%);
}

#layout {
    position: relative;
    z-index: 1;
}

.portal-page-intro,
.season-compass-hero {
    box-shadow:
        0 14px 34px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

.portal-page-action {
    border-color: color-mix(in srgb, var(--portal-section-accent) 42%, var(--border-soft));
    background: color-mix(in srgb, var(--portal-section-accent) 10%, #111a27);
    color: color-mix(in srgb, var(--portal-section-accent) 70%, #fff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.portal-page-action:hover,
.portal-page-action:focus-visible {
    border-color: var(--portal-section-accent);
    background: color-mix(in srgb, var(--portal-section-accent) 17%, #111a27);
    color: #fff;
}

.portal-page > .card {
    padding: clamp(19px, 2.2vw, 27px);
    border-color: rgba(112, 145, 176, .18);
    border-top-color: color-mix(in srgb, var(--portal-section-accent) 42%, var(--border-soft));
    border-radius: 4px;
    background:
        linear-gradient(128deg, color-mix(in srgb, var(--portal-section-accent) 4%, transparent), transparent 34%),
        rgba(11, 19, 29, .86);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .13);
}

.portal-page button:not(.btn-danger):not(.wishlist-danger) {
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.portal-page button:not(.btn-danger):not(.wishlist-danger):hover,
.portal-page button:not(.btn-danger):not(.wishlist-danger):focus-visible {
    border-color: color-mix(in srgb, var(--portal-section-accent) 42%, transparent);
}

@media (max-width: 760px) {
    body::before {
        inset: 68px 0 0;
        opacity: .035;
    }

    .portal-page > .card {
        padding: 18px;
    }
}

/* Kompakte Portalnavigation und sichere Inhaltsbreite auf Smartphones. */
@media (max-width: 720px) {
    #header {
        gap: 11px;
        padding: 12px;
    }

    .header-left,
    .header-right,
    .header-actions {
        min-width: 0;
    }

    .header-right {
        gap: 8px;
    }

    #sidebar {
        position: sticky;
        z-index: 20;
        top: 0;
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--border-soft);
    }

    #sidebar nav {
        padding: 7px 10px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    #sidebar ul {
        display: flex;
        width: max-content;
        min-width: 100%;
        flex-wrap: nowrap;
        gap: 5px;
    }

    #sidebar li {
        min-width: 90px;
        min-height: 50px;
        flex: 0 0 auto;
        margin: 0;
        padding: 6px 9px;
        justify-content: flex-start;
        text-align: left;
    }

    #sidebar li img {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
    }

    #sidebar li > span {
        overflow: hidden;
        font-size: var(--font-size-xs);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #content {
        width: 100%;
        min-width: 0;
        padding: 12px;
        overflow-x: clip;
    }

    .portal-page,
    .portal-page-intro,
    .portal-page > .card {
        min-width: 0;
        max-width: 100%;
    }

    .portal-page > .card {
        padding: 15px;
    }
}

/* Smartphone-Endfassung: kompakter Kopf, bedienbare Navigation und Download-Karten. */
@media (max-width: 620px) {
    html,
    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    body {
        height: auto;
        min-height: 100%;
    }

    #header {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        gap: 9px;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 9px 11px 10px;
    }

    .header-left {
        gap: 9px;
        min-width: 0;
    }

    .header-top {
        display: flex;
        width: 100%;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .header-left > div {
        min-width: 0;
    }

    .logo,
    .logo img {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    #header h1 {
        overflow: hidden;
        font-size: 17px;
        line-height: 1.05;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-left small {
        margin-top: 3px;
        overflow: hidden;
        font-size: var(--font-size-xs);
        letter-spacing: 0.07em;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-info {
        gap: 7px;
        flex: 0 1 136px;
        min-width: 0;
        max-width: 136px;
        padding: 4px 8px 4px 4px;
    }

    .avatar {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    .user-identity {
        min-width: 0;
    }

    .username,
    .user-role {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .username {
        font-size: var(--font-size-base);
    }

    .user-role {
        font-size: var(--font-size-xs);
    }

    .header-actions {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .header-home,
    .header-logout,
    #logoutButton {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        padding: 8px 10px;
        text-align: center;
    }

    #sidebar {
        position: relative;
        top: auto;
    }

    #layout {
        height: auto;
        min-height: 0;
    }

    #sidebar nav {
        padding: 6px 8px;
        scroll-padding-inline: 8px;
        scrollbar-width: none;
    }

    #sidebar nav::-webkit-scrollbar {
        display: none;
    }

    #sidebar ul {
        min-width: 0;
        gap: 6px;
    }

    #sidebar li {
        min-width: 112px;
        min-height: 44px;
        padding: 5px 8px;
        scroll-snap-align: start;
    }

    #sidebar li img {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }

    .portal-page-intro {
        display: grid;
        min-height: 0;
        gap: 18px;
        margin-bottom: 18px;
        padding: 18px;
        border-radius: 12px;
    }

    .portal-page-heading {
        min-width: 0;
    }

    .portal-page-intro h2 {
        font-size: clamp(27px, 9vw, 34px);
    }

    .portal-page-tools {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: stretch;
        width: 100%;
        gap: 10px;
    }

    .portal-page-tools::before {
        display: none;
    }

    .portal-page-state {
        width: fit-content;
        max-width: 100%;
    }

    .portal-page-action {
        width: 100%;
    }

    .downloads-page > .card {
        padding: 14px;
        overflow: visible;
    }

    .downloads-page .data-table {
        display: block;
        min-width: 0;
        width: 100%;
        table-layout: auto;
        border: 0;
        background: transparent;
    }

    .downloads-page .data-table colgroup,
    .downloads-page .data-table thead {
        display: none;
    }

    .downloads-page .data-table tbody {
        display: grid;
        gap: 12px;
    }

    .downloads-page .data-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px 14px;
        padding: 14px;
        border: 1px solid color-mix(in srgb, var(--portal-section-accent) 26%, var(--border-soft));
        border-radius: 10px;
        background: rgba(8, 15, 24, .72);
    }

    .downloads-page .data-table td {
        display: grid;
        align-content: start;
        gap: 5px;
        min-width: 0;
        padding: 0;
        border: 0;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .downloads-page .data-table td::before {
        color: color-mix(in srgb, var(--portal-section-accent) 76%, #fff);
        content: attr(data-label);
        font-size: var(--font-size-xs);
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .downloads-page .data-table td:first-child,
    .downloads-page .data-table td:nth-child(3),
    .downloads-page .data-table .downloads-actions {
        grid-column: 1 / -1;
    }

    .downloads-page .data-table td:first-child {
        color: var(--text);
        font-size: 16px;
        font-weight: 800;
    }

    .downloads-page .downloads-actions__inner {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
        width: 100%;
    }

    .downloads-page .downloads-actions__inner button {
        width: 100%;
        min-width: 0;
    }

    .downloads-page .data-table .downloads-empty-row {
        display: block;
    }

    .downloads-page .data-table .downloads-empty-cell {
        display: block;
        text-align: center;
    }

    .downloads-page .data-table .downloads-empty-cell::before {
        content: none;
    }
}

/* ===================================================
   Gemeinsame Homepage-/Member-Portal-Oberfläche
=================================================== */

@media (min-width: 721px) {
    #sidebar {
        width: 224px;
        background:
            linear-gradient(180deg, rgba(217, 182, 77, .035), transparent 24%),
            #0e141e;
        border-right: 1px solid var(--border);
        box-shadow: 12px 0 34px rgba(0, 0, 0, .12);
    }

    #sidebar nav { padding: 12px 10px 24px; }

    #sidebar li {
        gap: 10px;
        min-height: 54px;
        margin: 10px 0;
        padding: 6px 10px;
        border-radius: 8px;
        color: #aab5c4;
        font-weight: 500;
    }

    #sidebar li > span {
        color: inherit;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
    }

    #sidebar li img { width: 42px; height: 42px; }

    #sidebar li:hover {
        color: #dce3ec;
        background: rgba(64, 214, 248, .08);
        border-color: rgba(64, 214, 248, .22);
        transform: translateX(2px);
    }

    #sidebar li.active {
        color: var(--accent-cyan);
        font-weight: 600;
        border-color: rgba(67, 204, 255, .28);
        background: linear-gradient(90deg, rgba(67, 204, 255, .16), rgba(67, 204, 255, .06));
        box-shadow: inset 3px 0 0 var(--accent-cyan), 0 12px 26px rgba(0, 0, 0, .16);
    }

    #sidebar li.active > span { font-weight: 600; }
}

/* Intro: dieselbe weiche Auswahlwelle wie auf der Homepage. */
#sidebar li.member-sidebar__intro-wave {
    color: #eaf8ff;
    border-color: rgba(67, 204, 255, .42);
    background: linear-gradient(90deg, rgba(67, 204, 255, .18), rgba(67, 204, 255, .045));
    box-shadow: inset 3px 0 0 rgba(67, 204, 255, .9), 0 0 22px rgba(67, 204, 255, .16);
    animation: member-sidebar-intro-wave .62s ease-out both;
}

#sidebar li.member-sidebar__intro-wave img {
    filter: drop-shadow(0 0 9px rgba(67, 204, 255, .85));
}

@keyframes member-sidebar-intro-wave {
    0% { transform: translateX(-5px); filter: brightness(.9); }
    48% { transform: translateX(2px); filter: brightness(1.22); }
    100% { transform: translateX(0); filter: brightness(1); }
}

/* Kopfbereich: eckigere Rahmen wie auf der Homepage, mit leuchtenden Seitenkanten. */
.header-home,
.header-logout {
    border: 1px solid rgba(186, 198, 211, .38);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(186, 198, 211, .12), rgba(255, 255, 255, .035));
    box-shadow: inset 3px 0 0 rgba(202, 214, 226, .82);
    color: #dce3ec;
}

.header-logout {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(226, 139, 139, .44);
    background: linear-gradient(90deg, rgba(190, 87, 87, .13), rgba(255, 255, 255, .035));
    box-shadow: inset 3px 0 0 rgba(239, 154, 154, .9);
}

.header-home:hover {
    border-color: rgba(202, 214, 226, .62);
    box-shadow: inset 3px 0 0 rgba(225, 233, 241, 1), 0 0 18px rgba(186, 198, 211, .14);
}

.header-logout:hover {
    border-color: rgba(213, 128, 65, .72);
    background: linear-gradient(90deg, rgba(112, 56, 24, .62), rgba(66, 31, 20, .75));
    box-shadow: inset 3px 0 0 rgba(221, 132, 67, .9), 0 0 18px rgba(183, 91, 37, .14);
    color: #ffd3a0;
}

/* Der transparente Dunkelgrau-Verlauf wächst von rechts nach links bis zum Ablauf. */
.header-logout::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    background: rgba(51, 59, 70, .74);
    transform: scaleX(0);
    transform-origin: right center;
}

.header-logout-label {
    position: relative;
    z-index: 2;
}

.header-logout.session-idle-timer::after {
    animation: member-session-idle-progress var(--session-idle-remaining, 3600000ms) linear forwards;
}

/* Die pulsierende Linie markiert die fortschreitende Grenze der Inaktivitätszeit. */
.header-logout::before {
    position: absolute;
    z-index: 1;
    top: 5px;
    bottom: 5px;
    left: calc(100% - .5px);
    width: 1px;
    content: "";
    pointer-events: none;
    opacity: 0;
    background: rgba(239, 154, 154, .96);
    box-shadow: 0 0 5px rgba(239, 154, 154, .72);
}

.header-logout.session-idle-timer::before {
    animation:
        member-session-idle-boundary var(--session-idle-remaining, 3600000ms) linear forwards,
        member-session-idle-boundary-pulse 1.8s ease-in-out infinite;
}

@keyframes member-session-idle-progress {
    to { transform: scaleX(1); }
}

@keyframes member-session-idle-boundary {
    0% { left: calc(100% - .5px); }
    100% { left: 0; }
}

@keyframes member-session-idle-boundary-pulse {
    0%, 100% { opacity: .28; box-shadow: 0 0 3px rgba(239, 154, 154, .42); }
    50% { opacity: .72; box-shadow: 0 0 7px rgba(239, 154, 154, .72); }
}

.user-info {
    min-width: 236px;
    border: 1px solid rgba(67, 204, 255, .30);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(67, 204, 255, .10), rgba(255, 255, 255, .025));
    box-shadow:
        inset 3px 0 0 rgba(67, 204, 255, .82),
        inset -3px 0 0 rgba(67, 204, 255, .60),
        0 0 16px rgba(67, 204, 255, .08);
    animation: member-user-info-pulse 3.2s ease-in-out infinite;
}

/* Trennung wie im Kopfbereich der Homepage; die Member-Karte steht bewusst rechts davon. */
.header-top {
    justify-content: flex-start;
}

.header-separator {
    width: 1px;
    height: 44px;
    margin-left: auto;
    background: rgba(67, 204, 255, .22);
    box-shadow: 0 0 10px rgba(67, 204, 255, .10);
}

@media (max-width: 720px) {
    .header-separator { display: none; }
    .user-info { min-width: 0; }
}

/* Logo-Bereich und Trennung schließen bündig mit der Sidebar ab. */
@media (min-width: 721px) {
    #header {
        padding-left: clamp(16px, 1.25vw, 20px);
        padding-right: clamp(16px, 1.25vw, 20px);
    }

    .header-left {
        flex: 0 0 calc(var(--sidebar-width) - clamp(16px, 1.25vw, 20px));
        gap: 10px;
    }

    .header-top {
        gap: 0;
    }

    .header-separator {
        flex: 0 0 1px;
        margin-left: 0;
    }

    .user-info {
        margin-left: 12px;
    }
}

/* Kompaktes Tablet-Layout: Zwischen 721 und 768px darf nicht gleichzeitig
   das einspaltige Smartphone- und das Desktop-Sidebar-Layout greifen. */
@media (min-width: 721px) and (max-width: 768px) {
    #header {
        height: 68px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 0 16px;
    }

    .header-top {
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: row;
        align-items: center;
    }

    .header-left {
        flex-basis: 188px;
        min-width: 0;
    }

    .header-left small {
        display: block;
    }

    .user-info {
        min-width: 0;
        margin-left: 8px;
        padding: 4px 8px 4px 5px;
    }

    .user-identity {
        min-width: 0;
        max-width: 84px;
    }

    .username {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-actions {
        width: auto;
        flex: 0 0 auto;
        gap: 6px;
    }

    .header-home,
    .header-logout {
        min-height: 36px;
        padding: 8px 9px;
        font-size: var(--font-size-xs);
        white-space: nowrap;
    }

    #layout {
        flex-direction: row;
        height: calc(100vh - 68px);
    }

    #sidebar {
        width: 224px;
        flex: 0 0 224px;
        border-right: 1px solid var(--border);
        border-bottom: 0;
    }

    #content {
        min-width: 0;
        padding: 20px;
    }
}

/* Aktive Sitzungen: kompaktes Status-Element neben der eigenen Discord-Karte. */
.header-presence {
    position: relative;
    margin-left: 8px;
}

.header-presence-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 48px;
    min-height: 42px;
    padding: 7px 10px;
    border: 1px solid rgba(73, 210, 160, .38);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(45, 175, 128, .15), rgba(255, 255, 255, .025));
    box-shadow: inset 3px 0 0 rgba(73, 210, 160, .74), 0 0 14px rgba(73, 210, 160, .08);
    color: #dff8ee;
    cursor: pointer;
}

.header-presence-trigger:hover,
.header-presence.is-open .header-presence-trigger {
    border-color: rgba(106, 237, 187, .72);
    box-shadow: inset 3px 0 0 rgba(106, 237, 187, .94), 0 0 16px rgba(73, 210, 160, .16);
}

.header-presence-icon { font-size: 16px; line-height: 1; }
.header-presence-count { min-width: .8em; font-weight: 800; }

.header-presence-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #58e6ad;
    box-shadow: 0 0 8px rgba(88, 230, 173, .84);
    animation: member-presence-pulse 2.2s ease-in-out infinite;
}

.header-presence-panel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 10px);
    right: 0;
    display: none;
    width: min(320px, calc(100vw - 24px));
    max-height: min(360px, calc(100vh - 100px));
    overflow: auto;
    padding: 14px;
    border: 1px solid rgba(73, 210, 160, .36);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(13, 25, 35, .98), rgba(7, 14, 23, .98));
    box-shadow: inset 3px 0 0 rgba(73, 210, 160, .76), 0 12px 28px rgba(0, 0, 0, .34);
}

.header-presence:hover .header-presence-panel,
.header-presence:focus-within .header-presence-panel,
.header-presence.is-open .header-presence-panel { display: block; }

.header-presence-title { display: block; color: #dff8ee; font-size: var(--font-size-sm); }
.header-presence-title--secondary {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(152, 181, 205, .16);
}
.header-presence-status { margin: 8px 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); }
.header-presence-list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }

.header-presence-member {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(152, 181, 205, .14);
    border-radius: 7px;
    background: rgba(255, 255, 255, .025);
}

.header-presence-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid rgba(73, 210, 160, .58);
    border-radius: 50%;
}

.header-presence-identity { display: grid; min-width: 0; gap: 1px; }
.header-presence-name { overflow: hidden; color: var(--text); font-size: var(--font-size-sm); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.header-presence-role { color: #7ce8bf; font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; }

@keyframes member-presence-pulse {
    0%, 100% { opacity: .58; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.12); }
}

@media (max-width: 720px) {
    .header-presence { margin-left: 6px; }
    .header-presence-trigger { min-width: 38px; min-height: 36px; padding: 7px 8px; }
    .header-presence-count { display: none; }
}

@keyframes member-user-info-pulse {
    0%, 100% { box-shadow: inset 3px 0 0 rgba(67, 204, 255, .72), inset -3px 0 0 rgba(67, 204, 255, .52), 0 0 10px rgba(67, 204, 255, .05); }
    50% { box-shadow: inset 3px 0 0 rgba(116, 222, 255, 1), inset -3px 0 0 rgba(116, 222, 255, .82), 0 0 20px rgba(67, 204, 255, .16); }
}

/* Private Nachrichten: bewusst kompakt, ohne zusätzliche Kopfbereich-Karte. */
.header-presence-message {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(73, 210, 160, .32);
    border-radius: 6px;
    background: rgba(73, 210, 160, .08);
    color: #c7f7df;
    cursor: pointer;
    font-size: 14px;
}

.header-presence-message:hover {
    border-color: rgba(106, 237, 187, .78);
    background: rgba(73, 210, 160, .18);
}

.member-chat-bell {
    position: relative;
    display: inline-grid;
    width: 42px;
    height: 42px;
    margin-left: 7px;
    place-items: center;
    border: 1px solid rgba(191, 202, 214, .42);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
    color: #e0e5ea;
    cursor: pointer;
}

.member-chat-bell:hover {
    border-color: rgba(237, 242, 246, .8);
    background: rgba(255, 255, 255, .07);
}

.member-chat-bell-tooltip {
    position: absolute;
    z-index: 2;
    top: calc(100% + 9px);
    left: 50%;
    padding: 6px 8px;
    border: 1px solid rgba(100, 185, 220, .5);
    border-radius: 6px;
    background: #0b1520;
    box-shadow: 0 7px 16px rgba(0, 0, 0, .3);
    color: #dce8ef;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -4px);
    transition: opacity .16s ease, transform .16s ease;
    white-space: nowrap;
}

.member-chat-bell:hover .member-chat-bell-tooltip,
.member-chat-bell:focus-visible .member-chat-bell-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.member-chat-bell-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.member-chat-bell-count {
    position: absolute;
    top: -7px;
    right: -8px;
    min-width: 18px;
    padding: 2px 5px;
    border: 1px solid rgba(255, 198, 69, .9);
    border-radius: 10px;
    background: #d79425;
    color: #111923;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.15;
}

.member-chat-bell.has-unread {
    border-color: rgba(255, 190, 57, .8);
    background: linear-gradient(90deg, rgba(207, 133, 32, .2), rgba(255, 255, 255, .03));
    box-shadow: inset 3px 0 0 rgba(255, 181, 55, .86), 0 0 15px rgba(220, 152, 42, .16);
    color: #ffc34f;
}

.member-chat-bell.has-notification {
    width: auto;
    min-width: 42px;
    grid-auto-flow: column;
    gap: 8px;
    padding: 0 13px;
    border-color: rgba(255, 79, 91, .88);
    background: linear-gradient(90deg, rgba(184, 31, 46, .28), rgba(255, 255, 255, .035));
    box-shadow: inset 3px 0 0 #ff4052, 0 0 18px rgba(255, 47, 67, .28);
    color: #ff7681;
}

.member-notification-label {
    color: #ffb4ba;
    font-size: var(--font-size-xs);
    font-weight: 900;
    white-space: nowrap;
}

.member-notification-label[hidden] { display: none; }

.member-chat-modal {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: grid;
    padding: 28px;
    place-items: center;
    background: rgba(2, 7, 12, .68);
    backdrop-filter: blur(4px);
}

.member-chat-modal[hidden] { display: none; }

.member-chat-shell {
    display: grid;
    width: min(1240px, 100%);
    height: min(760px, calc(100vh - 56px));
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(72, 203, 255, .48);
    border-radius: 12px;
    background: linear-gradient(145deg, #101b28, #070e16);
    box-shadow: inset 3px 0 0 rgba(65, 205, 255, .86), 0 22px 60px rgba(0, 0, 0, .55);
}

.member-chat-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 55px;
    padding: 0 17px;
    border-bottom: 1px solid rgba(133, 169, 196, .22);
}

.member-chat-titlebar h2 { margin: 0; color: var(--text); font-size: var(--font-size-lg); }
.member-chat-close { border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 29px; line-height: 1; }
.member-chat-close:hover { color: #fff; }

.member-chat-columns { display: grid; min-height: 0; grid-template-columns: minmax(230px, 32%) 1fr; }
.member-chat-list { min-height: 0; overflow: auto; padding: 15px; border-right: 1px solid rgba(133, 169, 196, .2); }
.member-chat-list h3 { margin: 0 0 9px; color: #9baebe; font-size: var(--font-size-xs); letter-spacing: .08em; text-transform: uppercase; }
.member-chat-active-title { margin-top: 20px !important; }
.member-chat-contact-list { display: grid; gap: 6px; }
.member-chat-conversation { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.member-chat-conversation .member-chat-contact { min-width: 0; flex: 1 1 auto; }
.member-chat-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    padding: 0;
    border: 1px solid rgba(239, 126, 126, .72);
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(163, 49, 49, .72), rgba(83, 26, 31, .9));
    box-shadow: inset 2px 0 0 rgba(255, 163, 163, .82), 0 0 12px rgba(186, 63, 63, .14);
    color: #ffe4e4;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}
.member-chat-delete-icon { font-size: 17px; line-height: 1; }
.member-chat-delete:hover:not(:disabled) { border-color: #ffc0c0; background: linear-gradient(135deg, rgba(201, 63, 63, .9), rgba(111, 30, 38, .98)); box-shadow: inset 2px 0 0 #ffe1e1, 0 0 17px rgba(211, 69, 69, .3); }
.member-chat-delete:disabled { cursor: wait; opacity: .55; }

.member-chat-confirm {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    padding: 20px;
    place-items: center;
    background: rgba(1, 5, 10, .72);
    backdrop-filter: blur(3px);
}
.member-chat-confirm[hidden] { display: none; }
.member-chat-confirm-card {
    width: min(390px, 100%);
    padding: 22px;
    border: 1px solid rgba(238, 128, 128, .68);
    border-radius: 10px;
    background: linear-gradient(145deg, #23141a, #100b10);
    box-shadow: inset 3px 0 0 rgba(238, 111, 111, .86), 0 18px 46px rgba(0, 0, 0, .52);
}
.member-chat-confirm-card h3 { margin: 0; color: #ffe5e5; font-size: var(--font-size-lg); }
.member-chat-confirm-text { margin: 12px 0 0; color: var(--text); }
.member-chat-confirm-warning { margin: 9px 0 0; color: #f2abab; font-size: var(--font-size-sm); }
.member-chat-confirm-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.member-chat-confirm-actions button { min-height: 38px; padding: 0 13px; border-radius: 7px; cursor: pointer; font-weight: 800; }
.member-chat-confirm-cancel { border: 1px solid rgba(161, 181, 197, .42); background: rgba(255, 255, 255, .04); color: var(--text); }
.member-chat-confirm-delete { border: 1px solid rgba(248, 146, 146, .82); background: linear-gradient(135deg, #c54d4d, #812f39); box-shadow: inset 2px 0 0 rgba(255, 198, 198, .76); color: #fff4f4; }
.member-chat-confirm-cancel:hover:not(:disabled) { border-color: rgba(207, 226, 239, .7); background: rgba(255, 255, 255, .09); }
.member-chat-confirm-delete:hover:not(:disabled) { border-color: #ffd0d0; background: linear-gradient(135deg, #df5b5b, #9c3441); }
.member-chat-confirm-actions button:disabled { cursor: wait; opacity: .6; }

.member-chat-contact {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.member-chat-contact:hover,
.member-chat-contact.is-selected { border-color: rgba(68, 204, 255, .42); background: rgba(48, 169, 218, .11); }
.member-notification-list { display: grid; gap: 6px; }
.member-notification-item {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid rgba(255, 79, 91, .26);
    border-radius: 7px;
    background: rgba(143, 25, 39, .09);
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.member-notification-item:hover,
.member-notification-item.is-selected { border-color: rgba(255, 91, 104, .68); background: rgba(180, 31, 47, .2); }
.member-notification-item strong { color: #ff9ca5; font-size: var(--font-size-sm); }
.member-notification-item small { color: var(--text-secondary); font-size: var(--font-size-xs); }
.member-notification-detail { margin: auto 0; padding: 22px; border: 1px solid rgba(255, 79, 91, .38); border-radius: 10px; background: rgba(139, 26, 39, .1); }
.member-notification-detail__header { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 105, 117, .2); }
.member-notification-detail__header > div { display: grid; gap: 3px; }
.member-notification-detail__header strong { color: #ff9ca5; font-size: var(--font-size-lg); }
.member-notification-detail__header small { color: var(--text-secondary); font-size: var(--font-size-xs); }
.member-notification-detail__icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #ff6673; border-radius: 50%; color: #ff7d88; font-size: 20px; font-weight: 900; }
.member-notification-detail > p { margin: 16px 0 0; color: #eef3f7; line-height: 1.6; white-space: pre-wrap; }
.member-notification-detail__actions { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 105, 117, .2); }
.member-notification-confirm,
.member-notification-remove-confirm button { min-height: 36px; padding: 8px 14px; border: 1px solid rgba(255, 105, 117, .45); border-radius: 7px; background: rgba(139, 26, 39, .18); color: #ffb0b7; font-weight: 800; }
.member-notification-remove-confirm { display: flex; align-items: center; gap: 8px; color: #e9f0f6; }
.member-notification-remove-confirm[hidden] { display: none; }
.member-notification-remove-yes { border-color: rgba(255, 79, 91, .75) !important; color: #ff929b !important; }
.member-notification-remove-no { border-color: var(--border) !important; background: var(--surface-raised) !important; color: var(--text) !important; }
.member-notification-remove-error { color: #ff929b; }
.member-chat-avatar { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid rgba(77, 210, 255, .5); border-radius: 50%; }
.member-chat-contact-identity { display: grid; min-width: 0; gap: 2px; }
.member-chat-contact-identity strong,
.member-chat-contact-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-chat-contact-identity strong { font-size: var(--font-size-sm); }
.member-chat-contact-identity small { color: var(--text-secondary); font-size: var(--font-size-xs); }
.member-chat-contact-unread { margin-left: auto; min-width: 19px; padding: 2px 5px; border-radius: 10px; background: #d79425; color: #111923; font-size: 10px; font-weight: 900; text-align: center; }
.member-chat-empty,
.member-chat-placeholder { color: var(--text-secondary); font-size: var(--font-size-sm); }

.member-chat-thread { display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: 17px; }
.member-chat-thread-header { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid rgba(133, 169, 196, .18); }
.member-chat-thread-identity { display: grid; gap: 2px; }
.member-chat-thread-identity strong { color: #ecf4f8; }
.member-chat-thread-identity small { color: #9aaebe; font-size: var(--font-size-xs); }
.member-chat-messages { display: grid; align-content: start; gap: 8px; min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 14px 14px 14px 2px; scrollbar-gutter: stable; }
.member-chat-date { justify-self: center; margin: 8px 0 4px; color: #9aaebe; font-size: 11px; font-weight: 800; }
.member-chat-message { position: relative; box-sizing: border-box; width: 78%; max-width: 560px; padding: 10px 12px; border: 1px solid rgba(137, 163, 184, .22); border-radius: 13px 13px 13px 4px; background: #1a2633; color: #f5f8fb; }
.member-chat-message.is-own { justify-self: end; border-color: rgba(64, 183, 222, .68); border-radius: 13px 13px 4px 13px; background: #2798c3; color: #07131b; }
.member-chat-message p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.member-chat-message time { display: block; margin-top: 5px; color: #aebdca; font-size: 10px; }
.member-chat-message.is-own time { color: #123343; }
.member-chat-compose {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 13px 0 0;
    border-top: 1px solid rgba(133, 169, 196, .18);
}

.member-chat-emoji-button {
    align-self: stretch;
    width: 44px;
    min-width: 44px;
    border: 1px solid rgba(73, 210, 255, .54);
    border-radius: 8px;
    background: rgba(35, 151, 194, .12);
    color: #68d7ff;
    cursor: pointer;
    font-size: 21px;
}

.member-chat-emoji-button:hover,
.member-chat-emoji-button[aria-expanded="true"] { background: rgba(52, 187, 235, .22); border-color: #78dcff; }
.member-chat-emoji-picker { position: absolute; z-index: 2; bottom: calc(100% + 8px); left: 0; display: grid; grid-template-columns: repeat(6, 30px); grid-auto-rows: 30px; gap: 3px; box-sizing: border-box; width: max-content; padding: 7px; overflow: hidden; border: 1px solid rgba(74, 203, 255, .52); border-radius: 8px; background: #101d2a; box-shadow: 0 12px 28px rgba(0, 0, 0, .42); }
.member-chat-emoji-picker[hidden] { display: none; }
.member-chat-emoji-option { width: 30px; min-width: 0; min-height: 0; height: 30px; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; font-size: 17px; line-height: 1; }
.member-chat-emoji-option:hover { background: rgba(76, 200, 245, .18); }

.member-chat-compose textarea {
    min-width: 0;
    min-height: 48px;
    max-height: 128px;
    flex: 1;
    padding: 11px 13px;
    border: 1px solid rgba(70, 192, 235, .36);
    border-radius: 7px;
    outline: none;
    resize: none;
    overflow-y: hidden;
    background: linear-gradient(90deg, rgba(38, 138, 178, .15), rgba(7, 15, 24, .94));
    box-shadow: inset 3px 0 0 rgba(65, 205, 255, .72);
    color: var(--text);
}

.member-chat-compose textarea::placeholder { color: #8291a2; }

.member-chat-compose textarea:hover { border-color: rgba(82, 209, 255, .58); }

.member-chat-compose textarea:focus {
    border-color: rgba(92, 219, 255, .9);
    box-shadow: inset 3px 0 0 rgba(86, 218, 255, .98), 0 0 0 3px rgba(65, 205, 255, .09);
}

.member-chat-compose > button:not(.member-chat-emoji-button) {
    align-self: stretch;
    min-width: 104px;
    border: 1px solid rgba(242, 190, 59, .68);
    border-radius: 7px;
    background: linear-gradient(135deg, #e7bd48, #b98420);
    box-shadow: inset 2px 0 0 rgba(255, 225, 141, .65), 0 0 14px rgba(215, 164, 45, .12);
    color: #17120a;
    font-weight: 800;
}

.member-chat-compose > button:not(.member-chat-emoji-button):hover:not(:disabled) {
    border-color: #ffe08c;
    background: linear-gradient(135deg, #f4cc59, #c69229);
    box-shadow: inset 2px 0 0 rgba(255, 239, 176, .82), 0 0 18px rgba(230, 181, 57, .22);
}

.member-chat-compose > button:not(.member-chat-emoji-button):disabled { cursor: wait; opacity: .62; }

@media (max-width: 720px) {
    .member-chat-bell { width: 36px; height: 36px; margin-left: 5px; }
    .member-chat-bell.has-notification { width: 36px; min-width: 36px; padding: 0; }
    .member-chat-bell.has-notification .member-notification-label { display: none; }
    .member-chat-modal { padding: 10px; }
    .member-chat-shell { max-height: calc(100vh - 20px); }
    .member-chat-columns { grid-template-columns: 132px 1fr; }
    .member-chat-list { padding: 10px 7px; }
    .member-chat-contact { padding: 7px 4px; }
    .member-chat-delete { width: 32px; min-width: 32px; padding: 0; }
    .member-chat-confirm { padding: 13px; }
    .member-chat-confirm-card { padding: 18px; }
    .member-chat-contact-identity small { display: none; }
    .member-chat-avatar { width: 29px; height: 29px; }
    .member-chat-thread { padding: 11px; }
    .member-chat-message { width: 94%; max-width: none; }
    .member-chat-compose { flex-direction: column; }
    .member-chat-compose > button:not(.member-chat-emoji-button) { width: 100%; }
    .member-chat-emoji-button { align-self: flex-start; }
}

/* ===================================================
   Schwierigkeitsgrade

   Portalweit einheitliche Kennzeichnung von Normal,
   Heroisch und Mythisch. Die Farbwerte selbst stehen in
   css/variables.css und werden ausschliesslich dort
   gepflegt.

   Verwendung:
     <span class="difficulty-tag difficulty-tag--heroic">Heroisch</span>

   difficulty-text faerbt nur den Text ein, ohne Rahmen
   und Hintergrund - fuer Stellen, an denen eine Plakette
   zu schwer wirken wuerde.
=================================================== */

.difficulty-tag {
    padding: 3px 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
}

.difficulty-tag--normal,
.difficulty-text--normal {
    color: var(--difficulty-normal);
}

.difficulty-tag--heroic,
.difficulty-text--heroic {
    color: var(--difficulty-heroic);
}

.difficulty-tag--mythic,
.difficulty-text--mythic {
    color: var(--difficulty-mythic);
}

.difficulty-tag--normal {
    background: var(--difficulty-normal-soft);
}

.difficulty-tag--heroic {
    background: var(--difficulty-heroic-soft);
}

.difficulty-tag--mythic {
    background: var(--difficulty-mythic-soft);
}

/* Auswahlfeld im Officer-Bereich: der gewaehlte
   Schwierigkeitsgrad wird direkt im Feld eingefaerbt. */

.difficulty-select {
    font-weight: 700;
    color: var(--text-primary);
}

.difficulty-select--normal {
    color: var(--difficulty-normal);
}

.difficulty-select--heroic {
    color: var(--difficulty-heroic);
}

.difficulty-select--mythic {
    color: var(--difficulty-mythic);
}

.difficulty-select option,
.raidplan-boss-select option {
    color: var(--text-primary);
    background: var(--surface-strong);
}

.difficulty-select option[value=""] {
    color: #ffffff !important;
}

.difficulty-select option[value="normal"] {
    color: var(--difficulty-normal);
}

.difficulty-select option[value="heroic"] {
    color: var(--difficulty-heroic);
}

.difficulty-select option[value="mythic"] {
    color: var(--difficulty-mythic);
}

.raidplan-boss-select {
    color: var(--text-primary);
}

/* ===================================================
   Raidplan-Zusatzangaben im Officer-Bereich
=================================================== */

.raidplan-meta-row > td {
    padding-top: 0;
}

.raidplan-meta-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 0 4px;
}

.raidplan-meta-editor__message {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.raidplan-meta-editor__message.error {
    color: var(--danger);
}

.officer-log-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.officer-log-sort:hover,
.officer-log-sort:focus-visible,
.officer-log-sort.is-active {
    color: var(--accent);
}

.officer-log-sort.is-active::after {
    content: "▼";
    font-size: .72em;
}

.officer-log-sort.is-active[data-sort-direction="ascending"]::after {
    content: "▲";
}

.officer-log-resolved {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.officer-log-resolved__heading {
    margin-bottom: 12px;
}

.officer-log-resolved__heading h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}