/* NTSL Hub – Design der Nightshade Legion: dunkel, Messing, kantig. Ein Stylesheet für alles. */
:root {
    --ntsl-blue: var(--accent);
    --ntsl-steel: #646e78;
    --ntsl-copper: var(--accent);
    --bg: #04060a;
    --bg-glow: rgba(var(--accent-rgb), 0.08);
    --panel: #0b0f16;
    --panel-raised: #0f141d;
    --border: rgba(var(--accent-rgb), 0.16);
    --border-strong: rgba(var(--accent-rgb), 0.34);
    --text: #e9e3d5;
    --text-muted: #8d8778;
    --blue-soft: rgba(var(--accent-rgb), 0.12);
    --copper-soft: rgba(var(--accent-rgb), 0.12);
    --success: #93b58b;
    --success-soft: rgba(147, 181, 139, 0.12);
    --warning: #d0a656;
    --danger: #c66b5d;
    --danger-soft: rgba(198, 107, 93, 0.12);
    --radius: 0px;
    --radius-sm: 0px;
    --shadow: none;
    color-scheme: dark;
    /* Farbbausteine je Org (der Hub setzt sie aus dem Erscheinungsbild; Standard = Messing/Blau) */
    --accent-rgb: 196, 164, 102;
    --accent-hi-rgb: 226, 199, 142;
    --accent: rgb(var(--accent-rgb));
    --accent-hi: rgb(var(--accent-hi-rgb));
    --accent-lo: #7d6638;
    --on-accent: #120e07;
    --accent-top: #d6b97f;
    --accent-bottom: #a58650;
    --accent-bottom-hover: #b3925a;
    --accent-border: #e0c48c;
    --hub-rgb: 111, 143, 216;
    --hub: rgb(var(--hub-rgb));
    --hub-hi: #d4def7;
    --hub-mid: #a9b8de;
    --brass: var(--accent);
    --brass-hi: var(--accent-hi);
    --brass-lo: var(--accent-lo);
    --display: "Oxanium", "Rajdhani", system-ui, sans-serif;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --k-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }

/* hidden-Attribut muss auch gegen Klassen mit eigener display-Angabe gewinnen */
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }

/* Hintergrund als feste Ebene statt background-attachment: fixed –
   das kann iOS nicht und lässt dort fest positionierte Leisten beim
   Scrollen mitwandern. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
body {
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 {
    margin: 0;
    font-weight: 650;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }
:focus-visible { outline: 2px solid var(--ntsl-blue); outline-offset: 2px; }

/* ---------- Start / Login ---------- */
.boot, .login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px 16px;
    text-align: center;
}
.boot { color: var(--text-muted); }
.boot-logo { width: 96px; height: 96px; opacity: 0.85; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
    .boot-logo { animation: none; }
}
.login-logo {
    width: min(260px, 60vw);
    height: auto;
    filter: drop-shadow(0 0 40px rgba(var(--accent-rgb), 0.35));
}
.eyebrow {
    color: var(--ntsl-copper);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 0.78rem;
    font-weight: 600;
}
.login h1 { font-size: 2rem; }
.login p { color: var(--text-muted); max-width: 420px; margin: 0; }
.login .alert { max-width: 420px; }
.noscript { text-align: center; padding: 40px; }

/* ---------- Layout ---------- */
.shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.body { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 0; }
.sidebar {
    border-right: 1px solid var(--border);
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sidebar .section-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 14px 12px 6px;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    border-left: 3px solid transparent;
}
.nav-link:hover { background: var(--panel-raised); text-decoration: none; }
.nav-link.active { border-left-color: var(--ntsl-copper); }
.nav-link .icon { width: 20px; text-align: center; }
.main { padding: 28px 32px 48px; min-width: 0; }
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.page-head p { margin: 4px 0 0; color: var(--text-muted); }
.page-head h1::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 8px;
    border-radius: 2px;
    background: var(--ntsl-copper);
}

/* ---------- Karten & Raster ---------- */
.grid { display: grid; gap: 16px; }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.card > h2 { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card.flush { overflow: hidden; }
.card.flush > h2 {
    padding: 18px 20px 0;
    padding-bottom: 12px;
}
.stat .label { color: var(--text-muted); font-size: 0.82rem; }
.stat .value { font-size: 1.9rem; font-weight: 700; line-height: 1.2; margin-top: 4px; }
.stat .sub { color: var(--text-muted); font-size: 0.82rem; }
.empty { color: var(--text-muted); padding: 6px 0; }

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
tbody tr:hover { background: rgba(var(--accent-rgb), 0.05); }
tbody tr:last-child td { border-bottom: none; }
td.nowrap { white-space: nowrap; }
td.num, th.num { text-align: right; }
td.num { font-variant-numeric: tabular-nums; }

/* Leere Tabelle („Niemand ist gesperrt.“): normale Zellenabstände statt der allgemeinen .empty-Regel. */
td.empty { padding: 16px 14px; color: var(--text-muted); }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person img { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.person span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list { list-style: none; margin: 0; padding: 0; }
.list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.list li:last-child { border-bottom: none; }
.list .meta { color: var(--text-muted); font-size: 0.84rem; }
.list li > :last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    flex: none;
}
.list li > :first-child { min-width: 0; }
.list li > .booking-amount {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
    white-space: nowrap;
}
.booking-list li > :first-child { overflow-wrap: anywhere; }
.list.booking-list li { flex-wrap: nowrap; }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    border: 1px solid var(--border);
}
.amount-pos { color: var(--success); font-weight: 600; }
.amount-neg { color: var(--danger); font-weight: 600; }

/* ---------- Events ---------- */
.event-meta { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Formulare ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border-strong);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.copper:hover { background: var(--copper-soft); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .field .label {
    color: var(--text-muted);
    font-weight: 600;
}
.field .hint { font-size: 0.8rem; color: var(--text-muted); }
input:not([type]), input[type="text"], input[type="url"], input[type="time"], input[type="password"], input[type="number"], input[type="search"], input[type="datetime-local"], select, textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    color: var(--text);
    font: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--ntsl-blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
textarea { min-height: 90px; resize: vertical; }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--ntsl-blue); }
.picker {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #0a101d;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
}

/* Auswahl als kompakte Chips: spart auf dem Handy viel Scrollweg. */
.picker label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    cursor: pointer;
    font-weight: 400;
    font-size: 0.88rem;
    color: var(--text);
    max-width: 100%;
    transition: border-color 0.15s, background 0.15s;
}
.picker label:hover { background: var(--panel-raised); border-color: var(--border-strong); }
.picker label:has(input:checked) {
    border-color: var(--brass);
    background: rgba(var(--accent-rgb), 0.18);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45);
}

/* Nicht ausgewählt: zurückhaltend, damit die Auswahl hervorsticht. */
.picker label:not(:has(input:checked)) { color: var(--text-muted); }
.picker label:not(:has(input:checked)) .role-dot { opacity: 0.55; }
.picker label:focus-within { outline: 2px solid var(--ntsl-blue); outline-offset: 1px; }
.picker .meta { font-size: 0.78rem; }
.picker > .empty { padding: 2px 4px; }
.picker input { accent-color: var(--ntsl-blue); }
.role-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ntsl-steel); flex: none; }
.search-results {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    border: 1px solid var(--border);
    overflow: hidden;
}
.search-results:empty { display: none; }
.search-results button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--panel);
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.search-results li:last-child button { border-bottom: 0; }
.search-results button:hover { background: var(--panel-raised); }
.search-results img { width: 24px; height: 24px; border-radius: 50%; }
.selected-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--ntsl-blue);
    background: var(--blue-soft);
}
.selected-member img { width: 26px; height: 26px; border-radius: 50%; }
.selected-member .spacer { flex: 1; }

/* ---------- Dialog ---------- */
dialog {
    width: min(560px, calc(100vw - 32px));
    color: var(--text);
    padding: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
dialog::backdrop { background: rgba(3, 6, 12, 0.7); backdrop-filter: blur(3px); }
dialog h2 { margin-bottom: 16px; }

/* ---------- Hinweise ---------- */
.alert {
    padding: 11px 14px;
    border: 1px solid var(--border);
    margin-bottom: 16px;
}
.toast-area {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}
.toast {
    padding: 11px 16px;
    background: var(--panel-raised);
    border: 1px solid var(--border-strong);
    border-left: 4px solid var(--ntsl-blue);
    box-shadow: var(--shadow);
    max-width: 360px;
}
.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--success); }
.loading {
    color: var(--text-muted);
    padding: 40px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.loading::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    border-top-color: var(--ntsl-copper);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .loading::before { animation: none; }
}

/* Speichern-Leiste bleibt bei langen Formularen sichtbar. */
.form-actions.sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 16px -4px 0;
    padding: 12px 4px;
    background: linear-gradient(180deg, transparent, var(--bg) 30%);
}
.stat .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.older-releases > summary {
    cursor: pointer;
    color: var(--ntsl-blue);
    font-weight: 600;
    padding: 10px 0;
    list-style-position: inside;
}
.older-releases[open] > summary { margin-bottom: 12px; }

/* ---------- Mobil ---------- */

/* Untere Navigationsleiste und „Mehr“-Menü – nur auf dem Handy sichtbar */
.sheet {
    margin: auto auto 0;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
}
.sheet:not([open]) { display: none; }
.sheet-handle {
    width: 42px;
    height: 5px;
    border-radius: 3px;
    background: var(--border-strong);
    margin: 4px auto 10px;
}
.sheet-label {
    color: var(--text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 12px 12px 4px;
}
.sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
}
.sheet-item:hover, .sheet-item:active { background: var(--panel-raised); text-decoration: none; }
.sheet-item.active { background: var(--blue-soft); }
.sheet-item.danger { color: var(--danger); }
.sheet-item .check { margin-left: auto; color: var(--ntsl-copper); }
@media (max-width: 860px) {
    .shell { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    .form-actions.sticky { bottom: calc(64px + env(safe-area-inset-bottom)); }
    .form-actions.sticky .btn { flex: 1; }
    .grid.stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .body { grid-template-columns: minmax(0, 1fr); }
    .sidebar { display: none; }
    /* Kopfzeile: kompakt, mit Rand für Notch/Statusleiste */
    .tab {
        flex: 1 1 0;
        min-width: 0;
        min-height: 52px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-muted);
        font: inherit;
        font-size: 0.7rem;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .tab:hover { text-decoration: none; }
    .tab-icon { font-size: 1.2rem; line-height: 1; }
    .tab.active { color: var(--ntsl-copper); background: var(--copper-soft); }
    .main { padding: 18px 14px 28px; }
    .page-head { margin-bottom: 16px; }
    .page-head h1 { font-size: 1.3rem; }
    .page-head > div:last-child:not(:first-child) { width: 100%; }
    .card.flush > h2 {
        padding: 16px 16px 0;
        padding-bottom: 12px;
    }
    .grid { gap: 12px; }
    .grid.two { grid-template-columns: 1fr; }
    .grid.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat .value { font-size: 1.5rem; }
    .list li { flex-wrap: wrap; }
    /* Größere Tippflächen; 16px verhindert das automatische Zoomen auf iOS */
    .btn { min-height: 44px; }
    .btn.small { min-height: 38px; }
    input:not([type]), input[type="text"], input[type="url"], input[type="time"], input[type="password"], input[type="number"], input[type="search"], input[type="datetime-local"], select, textarea {
        font-size: 16px;
        min-height: 46px;
    }
    .form-actions .btn { flex: 1 1 auto; }
    .picker label { min-height: 40px; }
    /* Tabellen als Kartenliste */
    .table-wrap { overflow: visible; }
    table.responsive thead { display: none; }
    table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
    table.responsive tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
    }
    table.responsive tbody tr:last-child { border-bottom: none; }
    table.responsive td {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        padding: 4px 0;
        border: 0;
        text-align: right;
    }
    table.responsive td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
        flex: none;
        margin-right: auto;
    }
    table.responsive td[data-label=""]::before,
    table.responsive td[colspan]::before { content: none; }
    table.responsive td[data-label=""] { justify-content: flex-end; padding-top: 8px; }
    table.responsive td[colspan] { justify-content: flex-start; text-align: left; }
    /* Erste Spalte wird zum Kartentitel */
    table.responsive td:first-child {
        display: block;
        text-align: left;
        font-size: 1.02rem;
        font-weight: 650;
        color: var(--text);
        padding-bottom: 8px;
    }
    table.responsive td:first-child::before { content: none; }
    table.responsive td.empty { font-weight: 400; font-size: inherit; color: var(--text-muted); }
    table.responsive td:first-child .meta { font-weight: 400; }
    table.responsive td:first-child > div { text-align: left; }
    table.responsive td .person { justify-content: flex-end; }
    table.responsive td > div { text-align: right; }
    /* Dialoge gleiten von unten herein */
    dialog:not(.sheet) {
        margin: auto auto 0;
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        overflow-y: auto;
        padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    }
    .toast-area { left: 14px; right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); }
    .toast { max-width: none; }
}

.meta { color: var(--text-muted); font-size: 0.84rem; }
.card-body { padding: 0 20px 18px; }
.hint { font-size: 0.8rem; color: var(--text-muted); margin: 10px 0 0; }

/* ---------- Ergänzungen: Kartenkopf, Filter, Audit-Log ---------- */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filters select { max-width: 240px; }
.filters input { flex: 1 1 220px; }
.audit-list { display: flex; flex-direction: column; gap: 10px; }
.audit-entry { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.audit-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.audit-entry .badge { align-self: flex-start; }
.audit-details {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font: inherit;
    font-size: 0.88rem;
    color: var(--text-muted);
}
@media (max-width: 860px) {
    .filters select { max-width: none; flex: 1 1 100%; }
}
form > .field + .field { margin-top: 14px; }
@media (max-width: 860px) {
    table.responsive td:first-child .person { justify-content: flex-start; }
}

/* ---------- Version und Ansprechpartner ---------- */
.support-note { color: var(--text-muted); font-size: 0.8rem; line-height: 1.45; }
.support-note strong { color: var(--ntsl-copper); font-weight: 600; }
.support-note .version { color: var(--text); font-weight: 600; letter-spacing: 0.02em; }
.support-brand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.version-tag {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ntsl-copper);
    border: 1px solid color-mix(in srgb, var(--ntsl-copper) 45%, transparent);
    border-radius: 999px;
    padding: 1px 8px;
}
.support-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 6px 0 10px; }
.support-links a, .support-links .link-button { color: var(--text-muted); font-size: 0.8rem; text-decoration: none; margin: 0; }
.support-links a:hover, .support-links .link-button:hover { color: var(--ntsl-blue); text-decoration: underline; }
.sidebar-footer .feedback-button { width: 100%; justify-content: center; }
.sidebar-footer {
    margin-top: auto;
    padding: 14px 12px 0;
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: -20px;
    padding-bottom: 20px;
    background: var(--bg, #070b14);
    z-index: 1;
}
.sidebar { min-height: calc(100vh - 61px); position: sticky; top: 61px; align-self: start; }
.login-footer { margin-top: 18px; text-align: center; }
.sheet-footer { padding: 14px 14px 0; margin-top: 6px; border-top: 1px solid var(--border); }
.support-note.inline { margin-top: 4px; }

/* ---------- Hinweis auf neue Version ---------- */
.update-banner {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 120;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: min(400px, calc(100vw - 28px));
    padding: 16px 16px 16px 18px;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

/* Lichtkante oben, läuft einmal durch */
.update-banner::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
}
.update-crest { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.35)); }
.update-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.update-eyebrow { text-transform: uppercase; }
.update-sub { color: var(--text-muted); font-size: 0.86rem; }
.update-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.update-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
}
.update-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.update-banner.leaving { opacity: 0; translate: 0 12px; transition: opacity 0.25s, translate 0.25s; }
@media (max-width: 860px) {
    .update-banner { left: 14px; right: 14px; width: auto; bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
    .update-banner::before { animation: update-sweep 2.4s ease-in-out infinite; }
}
@keyframes update-sweep { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------- Event planen ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--border-strong);
    background: #0a101d;
    font-size: 0.9rem;
}
.chip-toggle input { accent-color: var(--ntsl-blue); }
.chip-toggle:has(input:checked) { border-color: var(--ntsl-blue); background: var(--blue-soft); }
.slot-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.slot-list:empty::before { content: "Noch keine Subzuweisungen."; color: var(--text-muted); font-size: 0.9rem; }
.slot-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 2fr) 90px minmax(0, 2fr) auto;
    gap: 8px;
    align-items: center;
}
.slot-actions { justify-content: space-between; align-items: center; }
.toggle + .toggle { margin-top: 6px; }
@media (max-width: 860px) {
    .slot-row {
        grid-template-columns: 64px minmax(0, 1fr) 80px;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }
    .slot-row .slot-role { grid-column: 1 / 3; }
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; }
.form-grid + .field, .form-grid + .form-grid, .field + .form-grid, .hint + .slot-list { margin-top: 14px; }

/* ---------- Neuigkeiten ---------- */
.support-note a.version { color: var(--text); text-decoration: none; }
.support-note a.version:hover { color: var(--ntsl-copper); }
.nav-link .badge { margin-left: auto; }
.tab-icon { position: relative; }
.tab-dot {
    position: absolute;
    top: -2px;
    right: -8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ntsl-copper);
    box-shadow: 0 0 0 2px var(--bg);
}
.version-card { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.version-card .label { color: var(--text-muted); font-size: 0.82rem; }
.version-number {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
}
.version-card .support-note { margin-left: auto; text-align: right; }
.release-list { display: flex; flex-direction: column; gap: 12px; }
.release-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.release-head .meta { margin-left: auto; }
.release-section + .release-section { margin-top: 10px; }
.release-section-title {
    font-size: 0.74rem;
    text-transform: uppercase;
    margin: 6px 0 4px;
    color: var(--ntsl-blue);
}
.release-section-title.fixed { color: var(--success); }
.release-items { margin: 0; padding-left: 20px; }
.release-items li { margin: 4px 0; }
.release-items code {
    font-size: 0.9em;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--panel);
    border: 1px solid var(--border);
}
@media (max-width: 860px) {
    .version-card .support-note { margin-left: 0; text-align: left; }
    .release-head .meta { margin-left: 0; width: 100%; }
}

/* ---------- Eventvorlagen ---------- */
.template-card { display: flex; flex-direction: column; gap: 10px; }
.template-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.template-head h2 { margin: 0; }
.template-description { margin: 0; color: var(--text-muted); white-space: pre-line; overflow-wrap: anywhere; }
.template-card .form-actions { margin-top: auto; }

/* ---------- Konfiguration: Reiter, KI, UEX, Global Chat ---------- */
.subtabs {
    display: flex;
    margin-bottom: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-bottom: 0;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtab {
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
}
.subtab:hover { color: var(--text); background: var(--panel-raised); }
.subtab.active { border-bottom-color: var(--ntsl-copper); }
.config-section + .config-section, .grid.stats + .config-section,
.grid.stats + div + .config-section { margin-top: 16px; }
.grid.stats + div:not(:empty) { margin-top: 12px; }
.config-section h2 .meta { margin-left: auto; font-weight: 400; }
.section-intro { margin: -4px 0 12px; }
.config-split { margin-top: 14px; }
.config-split .field + .field { margin-top: 10px; }
.form-status:not(:empty) { margin-bottom: 12px; }
.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .grow { flex: 1 1 240px; }
.add-entry { margin-top: 14px; }
.add-entry > summary {
    cursor: pointer;
    color: var(--ntsl-blue);
    font-weight: 600;
    padding: 4px 0;
    list-style-position: inside;
}
.add-entry[open] > summary { margin-bottom: 12px; }
.knowledge-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.knowledge-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--panel);
}
.knowledge-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.knowledge-head .btn { margin-left: auto; }
.knowledge-head a { text-decoration: none; }
.knowledge-head a:hover strong { color: var(--ntsl-copper); }
.knowledge-text { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--text-muted); }
.knowledge-text.internal { color: var(--ntsl-copper); }
.channel-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.channel-line .btn { margin-left: auto; }
.server-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.server-list li { display: flex; align-items: center; gap: 12px; }
.server-list li .badge, .server-list li > .btn { margin-left: auto; flex: none; }
.server-list li > div { min-width: 0; }
.server-list img, .server-icon { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.server-icon {
    display: grid;
    place-items: center;
    background: var(--blue-soft);
    color: var(--ntsl-blue);
    font-weight: 700;
}
.card code {
    font-size: 0.9em;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--panel);
    border: 1px solid var(--border);
}
@media (max-width: 860px) {
    .channel-line .btn, .knowledge-head .btn { margin-left: 0; }
    .inline-form .btn { width: 100%; }
}
.stat .value { overflow-wrap: anywhere; }
.hint.spaced { margin-bottom: 14px; }
.channel-line + .alert { margin-bottom: 14px; }
.toggle + .form-grid { margin-top: 12px; }

/* Chips: Häkchen statt sichtbarer Checkbox – die Checkbox bleibt für Tastatur und Screenreader erhalten. */
.picker label { position: relative; }
.picker label > input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.picker label:has(input:checked)::after {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    border-radius: 50%;
    background: #fff;
    color: #3d5bb0;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}
.card .form-actions.sticky {
    background: linear-gradient(180deg, transparent, var(--panel) 35%);
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}

/* ======================================================================
   Animationen
   Alle Bewegungen nur, wenn im System nicht „Bewegung reduzieren“ aktiv ist.
   Für Verschiebungen wird die Eigenschaft `translate` genutzt, damit
   vorhandene `transform`-Angaben (z. B. Zentrierung) erhalten bleiben.
   ====================================================================== */
:root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fade-up { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; scale: 0.96; translate: 0 8px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes slide-in-right { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes slide-out-right { to { opacity: 0; translate: 24px 0; } }
@keyframes slide-up { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
    50% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18); }
}
@keyframes float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}
@keyframes halo {
    0%, 100% { filter: drop-shadow(0 0 30px rgba(var(--accent-rgb), 0.30)); }
    50% { filter: drop-shadow(0 0 55px rgba(var(--accent-rgb), 0.55)); }
}
@keyframes progress {
    0% { left: -40%; width: 40%; }
    60% { left: 40%; width: 50%; }
    100% { left: 100%; width: 30%; }
}
@keyframes shine {
    from { background-position: -200% 0; }
    to { background-position: 200% 0; }
}

/* Ladebalken oben beim Seitenwechsel (Inhalt ohne Bewegung: einfach sichtbar) */
.route-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 200;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.route-progress.active { opacity: 1; }
.route-progress::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--ntsl-copper), var(--ntsl-blue), transparent);
}
@media (prefers-reduced-motion: no-preference) {
    /* Karten in Rastern erscheinen nacheinander */
    .grid > .card, .release-list > .card, .knowledge-list > li, .server-list > li { animation: pop-in 0.5s var(--ease-out) backwards; }
    .grid > :nth-child(2), .release-list > :nth-child(2), .knowledge-list > :nth-child(2), .server-list > :nth-child(2) { animation-delay: 0.05s; }
    .grid > :nth-child(3), .release-list > :nth-child(3), .knowledge-list > :nth-child(3), .server-list > :nth-child(3) { animation-delay: 0.10s; }
    .grid > :nth-child(4), .release-list > :nth-child(4), .knowledge-list > :nth-child(4), .server-list > :nth-child(4) { animation-delay: 0.15s; }
    .grid > :nth-child(5), .knowledge-list > :nth-child(5), .server-list > :nth-child(5) { animation-delay: 0.20s; }
    .grid > :nth-child(6), .knowledge-list > :nth-child(6), .server-list > :nth-child(6) { animation-delay: 0.25s; }
    .grid > :nth-child(n+7), .knowledge-list > :nth-child(n+7), .server-list > :nth-child(n+7) { animation-delay: 0.30s; }
    /* Tabellenzeilen blenden weich ein – nur beim Seitenwechsel (Klasse
       „entering“ an main), nicht bei jedem Neuzeichnen nach Suche/Filter. */
    .main.entering tbody tr { animation: fade-in 0.4s var(--ease-out) backwards; }
    .main.entering tbody tr:nth-child(2) { animation-delay: 0.03s; }
    .main.entering tbody tr:nth-child(3) { animation-delay: 0.06s; }
    .main.entering tbody tr:nth-child(4) { animation-delay: 0.09s; }
    .main.entering tbody tr:nth-child(5) { animation-delay: 0.12s; }
    .main.entering tbody tr:nth-child(n+6) { animation-delay: 0.15s; }
    /* --- Karten: leichtes Anheben mit Lichtkante --- */
    .card { transition: border-color 0.25s, box-shadow 0.25s var(--ease-out), translate 0.25s var(--ease-out); }
    @media (hover: hover) {
        .grid > .card:hover, .release-list > .card:hover, .template-card:hover {
            translate: 0 -3px;
            border-color: rgba(var(--accent-rgb), 0.45);
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.12);
        }
    }
    .grid.stats > .stat { position: relative; overflow: hidden; }
    .grid.stats > .stat::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
        background-size: 200% 100%;
        background-position: -200% 0;
    }
    @media (hover: hover) {
        .grid.stats > .stat:hover::after { animation: shine 0.9s var(--ease-out); }
    }
    /* --- Knöpfe: weiche Übergänge und spürbarer Druck --- */
    .btn { transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.2s, scale 0.12s var(--ease-out); }
    .btn:active:not(:disabled) { scale: 0.96; }
    .btn.primary:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.35); }
    .btn.discord:hover { box-shadow: 0 6px 22px rgba(88, 101, 242, 0.45); }
    /* --- Navigation --- */
    .nav-link { transition: background 0.2s, color 0.2s, border-color 0.2s, padding-left 0.2s var(--ease-out); }
    @media (hover: hover) {
        .nav-link:hover:not(.active) { padding-left: 16px; }
    }
    .nav-link .icon { transition: scale 0.2s var(--ease-spring), color 0.2s; }
    .nav-link:hover .icon, .nav-link.active .icon { scale: 1.18; color: var(--ntsl-copper); }
    .nav-link .badge.copper, .tab-dot { animation: glow-pulse 2.4s ease-in-out infinite; }
    .tab { transition: color 0.2s, background 0.2s; }
    .tab .tab-icon { transition: scale 0.25s var(--ease-spring); }
    .tab.active .tab-icon { scale: 1.15; }
    .subtab { transition: color 0.2s, background 0.2s, border-color 0.25s var(--ease-out); }
    /* --- Dialoge, Menü-Sheet, Hinweise --- */
    dialog[open] { animation: pop-in 0.28s var(--ease-out); }
    dialog[open]::backdrop { animation: fade-in 0.25s ease-out; }
    .toast { animation: slide-in-right 0.35s var(--ease-spring) backwards; }
    .toast.leaving { animation: slide-out-right 0.25s ease-in forwards; }
    .update-banner { animation: rise 0.45s var(--ease-spring) backwards; }
    .alert { animation: fade-up 0.3s var(--ease-out) backwards; }
    /* Aufklappbereiche („+ Eintrag hinzufügen“, ältere Versionen) */
    details[open] > :not(summary) { animation: fade-up 0.3s var(--ease-out) backwards; }
    details > summary { transition: color 0.2s; }
    details > summary:hover { color: var(--brass-hi); }
    /* Auswahl-Chips und Eingaben */
    .picker label { transition: border-color 0.15s, background 0.15s, scale 0.12s var(--ease-out); }
    .picker label:active { scale: 0.96; }
    input, select, textarea { transition: border-color 0.2s, box-shadow 0.2s; }
    tbody tr { transition: background 0.15s; }
    /* --- Anmeldeseite: schwebendes Wappen mit pulsierendem Leuchten --- */
    .login-logo { animation: float 6s ease-in-out infinite, halo 6s ease-in-out infinite; }
    .login > * { animation: fade-up 0.6s var(--ease-out) backwards; }
    .login > *:nth-child(2) { animation-delay: 0.08s; }
    .login > *:nth-child(3) { animation-delay: 0.16s; }
    .login > *:nth-child(4) { animation-delay: 0.24s; }
    .login > *:nth-child(5) { animation-delay: 0.32s; }
    .login > *:nth-child(n+6) { animation-delay: 0.40s; }
    .login > .login-logo {
        animation: fade-up 0.6s var(--ease-out) backwards, float 6s 0.6s ease-in-out infinite, halo 6s ease-in-out infinite;
    }
    /* Ladebalken bewegt sich nur mit Animationen */
    .route-progress.active::before { animation: progress 1.1s ease-in-out infinite; width: 40%; }
}

/* ---------- Bewerbungen ---------- */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--panel);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    color: var(--text-muted);
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    text-align: center;
    background: var(--panel-raised);
    font-size: 0.78rem;
    color: var(--text-muted);
}
.chip.active .chip-count { background: rgba(var(--accent-rgb), 0.3); color: #fff; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--panel-raised); }
.applicant-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.stepper { list-style: none; margin: 4px 0 18px; padding: 0; display: flex; gap: 0; }
.step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    text-align: center;
}
.step::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--border-strong);
    z-index: 0;
}
.step:first-child::before { display: none; }
.step.done::before, .step.current::before { background: var(--ntsl-blue); }
.step-dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    background: var(--panel);
    border: 2px solid var(--border-strong);
    color: var(--text-muted);
}
.step.done .step-dot { background: var(--ntsl-blue); border-color: var(--ntsl-blue); color: #0b1020; }
.step.current .step-dot { border-color: var(--ntsl-copper); color: var(--ntsl-copper); box-shadow: 0 0 0 4px var(--copper-soft); }
.step-label { font-size: 0.82rem; color: var(--text-muted); }
.step.current .step-label { color: var(--text); font-weight: 700; }
.status-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.status-buttons .btn.current { border-color: var(--ntsl-copper); color: var(--ntsl-copper); opacity: 1; cursor: default; }
.btn.danger-outline:hover { background: var(--danger-soft); border-color: var(--danger); }
.card .toggle { margin-top: 10px; }
.card > .field { margin-top: 4px; }
.note-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.note {
    border: 1px solid var(--border);
    padding: 10px 12px;
    background: var(--panel);
}
.note-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.note-head .btn { margin-left: auto; }
.note-text { margin: 8px 0 0; white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- Kalender-Abo ---------- */
.calendar-dialog > * + * { margin-top: 12px; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; }
input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.84rem; }
.form-actions.start { justify-content: flex-start; }
@media (max-width: 860px) {
    .stepper .step-label { font-size: 0.72rem; }
    .copy-row { flex-direction: column; }
}

/* ---------- Assistent „Neuer Shopartikel“ ---------- */
dialog:has(.wizard) { width: min(680px, calc(100vw - 32px)); }
.wizard > * + * { margin-top: 12px; }
.wizard form > * + * { margin-top: 12px; }
.wizard-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 6px; counter-reset: step; }
.wizard-steps li {
    flex: 1;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 4px;
    border-bottom: 2px solid var(--border-strong);
    counter-increment: step;
}
.wizard-steps li::before { content: counter(step) ". "; }
.wizard-steps li.active { color: var(--ntsl-copper); border-color: var(--ntsl-copper); }
.wizard-steps li.done { color: var(--text); border-color: var(--ntsl-blue); }
.toggle-list { display: flex; flex-direction: column; gap: 8px; }
.toggle-list .toggle + .toggle { margin-top: 0; }
.match-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; padding-right: 2px; }
.match {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    transition: border-color 0.15s, background 0.15s;
}
.match:hover { border-color: var(--border-strong); }
.match.selected { border-color: rgba(var(--accent-rgb), 0.7); background: var(--blue-soft); }
.match input { margin-top: 4px; accent-color: var(--ntsl-blue); }
.match-body { min-width: 0; }
.match-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.match-text { margin: 4px 0; color: var(--text-muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.choice-list { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.choice-list .btn { justify-content: flex-start; white-space: normal; text-align: left; }

/* ---------- Banner-Upload ---------- */
.uploader {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 6px 0 10px 28px;
    padding: 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
}
.file-input { font: inherit; color: var(--text-muted); max-width: 100%; }
.file-input::file-selector-button {
    font: inherit;
    font-weight: 600;
    margin-right: 12px;
    padding: 7px 14px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--panel-raised);
    color: var(--text);
}
.file-input::file-selector-button:hover { border-color: var(--ntsl-blue); }
.banner-preview {
    max-width: 100%;
    max-height: 220px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    object-fit: cover;
}
.hint.error-text { color: var(--danger); }
.hint.success-text { color: var(--success); }
.card > .uploader { margin-left: 0; }
/* Formulare der Verwaltungsseiten: Pflichtfeld-Stern, Meldung direkt am Feld */
.req-mark { color: var(--danger); font-weight: 700; }
.req-legend { font-size: 0.8rem; color: var(--text-muted); margin-right: auto; align-self: center; }
.dirty-note + .req-legend, .req-legend + .dirty-note { margin-right: 0; }
.field-error { font-size: 0.82rem; color: var(--danger); font-weight: 600; }
.field [aria-invalid="true"] { border-color: var(--danger); }
.attendance-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.slot-row .field-error { grid-column: 1 / -1; }
/* Event bearbeiten am Handy: In der schmalen Speichern-Leiste ist nur Platz für Hinweis und „Speichern“ */
@media (max-width: 860px) { .form-actions.sticky.edit-actions:has(.dirty-note:not([hidden])) .btn.ghost { display: none; } }
.status-field { margin-top: 14px; }
.status-field .status-buttons { margin-bottom: 0; }
.attendance-tools .meta { margin-right: auto; }
.steps-hint { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--text-muted); }
.steps-hint li.current { color: var(--text); font-weight: 600; }
.steps-hint li.done { text-decoration: line-through; }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row input { flex: 1; min-width: 0; }

/* ---------- Ticket-Verläufe ---------- */
.search-bar { margin-bottom: 14px; }
.search-bar input { width: 100%; }
.search-card { margin-bottom: 16px; }
.hit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hit {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
}
.hit:hover { border-color: rgba(var(--accent-rgb), 0.6); text-decoration: none; }
.hit-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hit-snippet { margin: 6px 0 0; color: var(--text-muted); font-size: 0.9rem; overflow-wrap: anywhere; }
mark { background: rgba(var(--accent-rgb), 0.35); color: var(--text); border-radius: 3px; padding: 0 2px; }
.chat-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.chat-toolbar input { flex: 1 1 240px; }
.chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.chat-day {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 14px 0 6px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.chat-msg { display: flex; gap: 12px; padding: 6px 8px; border-radius: 8px; }
.chat-msg:not(.grouped) { margin-top: 6px; }
.chat-msg:hover { background: var(--panel); }
.chat-avatar {
    width: 36px;
    height: 36px;
    flex: none;
}
.chat-avatar.spacer { height: 0; }
.chat-body { min-width: 0; flex: 1; }
.chat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-msg.opener .chat-head strong { color: var(--ntsl-copper); }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.chat-files { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- Flotte ---------- */
.ship {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    flex-wrap: wrap;
}

/* Flotte: Schiffskarten mit Bild aus FleetYards */
.ship-art {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.ship-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s, scale 0.6s var(--ease-out, ease);
}
.ship-art.loaded img { opacity: 1; }
.ship-art::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.ship-art-name {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 1;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}
.ship-art.empty .ship-art-name { display: block; }
.ship-art.empty::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 42%;
    width: 64px;
    height: 64px;
    translate: -50% -50%;
    opacity: 0.18;
    background: url(/logo-192.png) center / contain no-repeat;
    filter: grayscale(1);
}
.fleet-card .card-head { flex-wrap: wrap; }
.fleet-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.fleet-tools .fleet-search { width: 240px; }
.fleet-tools .fleet-sort { width: auto; }
.fleet-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.fleet-grid > li { min-width: 0; }
.fleet-model {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: left;
    font: inherit;
    color: var(--text);
    cursor: pointer;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.25s, translate 0.25s var(--ease-out, ease), box-shadow 0.25s;
}
@media (hover: hover) {
    .fleet-model:hover { border-color: var(--border-strong); translate: 0 -3px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); }
    .fleet-model:hover .ship-art img { scale: 1.05; }
}
.fleet-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.fleet-maker { text-transform: uppercase; }
.fleet-name { overflow-wrap: anywhere; }
.fleet-count {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 3px 9px;
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(4px);
}
.owner-stack { display: flex; align-items: center; margin-top: auto; padding-top: 6px; min-width: 0; }
.owner-stack img, .owner-initial {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--panel);
    margin-right: -6px;
    flex: none;
    object-fit: cover;
}
.owner-initial {
    display: grid;
    place-items: center;
    background: var(--panel-raised);
    font-size: 0.7rem;
    color: var(--text-muted);
}
.owner-stack .meta { margin-left: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hangar {
    list-style: none;
    margin: 4px 0 10px;
    padding: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}
.hangar-ship {
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.hangar-text { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.ship-dialog .ship-art { margin-bottom: 12px; }
.ship-dialog h3 { margin: 14px 0 8px; }
.ship-owners {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 40vh;
    overflow-y: auto;
}
.ship-owners li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@media (max-width: 860px) {
    .fleet-tools, .fleet-tools .fleet-search { width: 100%; }
    .fleet-tools .fleet-search { flex: 1; }
}
.owners { display: flex; flex-wrap: wrap; gap: 6px; }
.owner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    padding: 2px 8px 2px 2px;
    border-radius: 999px;
    background: var(--panel-raised);
    border: 1px solid var(--border);
}
.owner img { width: 20px; height: 20px; border-radius: 50%; }
.finder-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
}
.finder-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
}

/* ---------- Statistik ---------- */
.segmented {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 3px;
    background: var(--panel);
}
.seg {
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-muted);
}
.seg:hover { color: var(--text); text-decoration: none; }
.seg.active { background: var(--blue-soft); color: var(--text); }
.grid.two + .grid.two, .grid.stats + .grid.two { margin-top: 16px; }
.chart { display: flex; flex-direction: column; gap: 8px; }
.chart-scroll { overflow-x: auto; }
.chart-canvas { position: relative; min-width: 460px; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-grid { stroke: rgba(100, 110, 120, 0.22); stroke-width: 1; }
.chart-axis { stroke: rgba(100, 110, 120, 0.5); stroke-width: 1; }
.chart-tick { fill: var(--text-muted); font-size: 11px; font-family: inherit; }
.chart-hit { fill: transparent; }
.chart-band.active .chart-hit { fill: rgba(255, 255, 255, 0.04); }
.chart-bar { transition: opacity 0.15s; }
.chart-svg:hover .chart-band:not(.active) .chart-bar { opacity: 0.55; }
.chart-tooltip {
    position: absolute;
    z-index: 5;
    min-width: 160px;
    pointer-events: none;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--panel-raised);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow);
    font-size: 0.84rem;
}
.tt-row { display: flex; align-items: center; gap: 6px; color: var(--text-muted); margin-top: 3px; }
.tt-row strong { color: var(--text); margin-left: auto; }
.tt-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.chart-legend { display: flex; gap: 16px; font-size: 0.84rem; color: var(--text-muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-table > summary { cursor: pointer; color: var(--text-muted); font-size: 0.84rem; }
.chart-table table { margin-top: 8px; }
.reliability { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.rel-bar { width: 56px; height: 6px; border-radius: 3px; background: var(--panel-raised); overflow: hidden; }
.rel-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.inactive-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
}
.inactive-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border);
}

/* ---------- RSI ---------- */
.rsi-card + .rsi-card { margin-top: 16px; }
.code-box { display: flex; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.code-box code {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--copper-soft);
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    color: var(--ntsl-copper);
}
.rsi-status { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rsi-handle { font-size: 1.3rem; font-weight: 800; }
.reminder-details { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.reminder-details .field { min-width: 180px; }
.howto {
    margin: 0 0 14px;
    padding-left: 20px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.owner.unmatched { border-style: dashed; color: var(--text-muted); padding-left: 8px; }
.fleet-assign { margin-top: 16px; }
.fy-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.fy-app { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.fy-app > summary { cursor: pointer; color: var(--ntsl-blue); font-weight: 600; padding: 4px 0; }
.fy-app[open] > summary { margin-bottom: 12px; }
.fy-app code.grow {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 8px 10px;
    background: var(--panel-raised);
    border-radius: 8px;
}

/* Shop: Spielwerte und Crafting-Qualität */
.craft-box:empty { display: none; }
.craft-box { margin-top: 14px; }
.craft-panel {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.craft-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.craft-head a { margin-left: auto; }
.craft-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px 14px;
}
.craft-stats li { display: flex; flex-direction: column; gap: 1px; font-size: 0.9rem; }
.craft-quality { display: flex; flex-direction: column; gap: 10px; }
.craft-quality[hidden] { display: none; }
.craft-sliders { display: flex; flex-direction: column; gap: 8px; }
.craft-slider { display: flex; align-items: center; gap: 10px; }
.craft-slider input[type="range"] { flex: 1; min-width: 0; accent-color: var(--ntsl-blue); }
.craft-slider .craft-number { width: 108px; flex: none; }
.craft-effects { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.craft-group { background: rgba(var(--accent-rgb), 0.06); border-radius: 10px; padding: 10px 12px; }
.craft-group-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.craft-mods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 0.88rem; }
.craft-mods li { display: flex; justify-content: space-between; gap: 10px; }
.craft-delta { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-muted); }
.craft-delta.good { color: var(--success); }
.craft-delta.bad { color: var(--danger); }
.item-details { max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Onboarding ---------- */
dialog.onboarding { width: min(600px, calc(100vw - 32px)); }
dialog.onboarding > h2 { display: none; }
.onboarding-body { display: flex; flex-direction: column; gap: 12px; }
.onboarding-body h3 { margin: 0; font-size: 1.25rem; }
.onboarding-body p { margin: 0; line-height: 1.55; }
.onboarding-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--ntsl-blue);
    background: var(--blue-soft);
    border: 1px solid rgba(var(--accent-rgb), 0.45);
}
.link-button {
    background: none;
    border: 0;
    padding: 0;
    margin-top: 4px;
    font: inherit;
    color: var(--ntsl-blue);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.link-button:hover { color: var(--brass-hi); }
.craft-panel.missing { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.craft-panel .required { color: var(--danger); }
.craft-slider input[type="range"].unset { opacity: 0.45; }

/* ---------- Geplante Nachrichten ---------- */
.schedule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.schedule-item {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.schedule-item.off { opacity: 0.6; }
.schedule-time { display: flex; flex-direction: column; gap: 2px; }
.schedule-time strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; color: var(--ntsl-blue); }
.schedule-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.schedule-text { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-muted); font-size: 0.92rem; }
.schedule-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.day-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.day-chip {
    min-width: 42px;
    padding: 7px 0;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.day-chip.active { background: var(--blue-soft); border-color: rgba(var(--accent-rgb), 0.7); color: var(--text); }
.day-presets { display: flex; gap: 14px; margin-top: 6px; font-size: 0.85rem; }

/* ---------- Ankündigungen ---------- */
.announce-grid { align-items: start; }
.when-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.when-row input[type="datetime-local"] { width: auto; }
.embed-preview { display: flex; flex-direction: column; gap: 6px; }
.embed-mention { color: #c9cdfb; font-weight: 600; }
.embed-mention:empty { display: none; }
.embed {
    border-left: 4px solid #5865f2;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.embed-title { font-weight: 700; }
.embed-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.93rem;
    line-height: 1.5;
    max-height: 360px;
    overflow-y: auto;
}
.embed-footer { font-size: 0.78rem; }
.announcement-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.announcement {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.announcement-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.announcement-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-muted); font-size: 0.92rem; }
.announcement-actions { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) {
    .schedule-item { grid-template-columns: 1fr; }
    .schedule-actions { justify-content: flex-start; }
}
.dirty-note { color: var(--ntsl-copper); font-weight: 600; font-size: 0.88rem; margin-right: auto; align-self: center; }
.dirty-note[hidden] { display: none; }

/* ---------- Wartung und Meldungen ---------- */
.maintenance-banner {
    color: var(--ntsl-copper);
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}
.maintenance-page .alert { text-align: left; }
.feedback-button { margin-top: 8px; }

/* Breite Auswahl-Chips (z. B. „Problem melden“, Partner): Höhe wie normale Tages-Chips. */
.day-chip.wide { min-width: 0; width: auto; padding: 7px 14px; }
.feedback-updates { display: flex; flex-direction: column; gap: 1px; }
.feedback-update {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 20px;
}
.feedback-update-text { flex: 1; min-width: 220px; }
.feedback-update-text p { margin: 4px 0 0; color: var(--text-muted); font-size: 0.92rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Zusagen im Dashboard ---------- */
.rsvp {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.rsvp-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.slot-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.slot-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
}
.slot-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.slot-count { color: var(--text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

/* ---------- Shop für Mitglieder ---------- */
.store-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 12px;
}
.store-bar input[type="search"] { max-width: 320px; flex: 1; }
.store-balance { display: flex; flex-direction: column; }
.store-balance strong { font-size: 1.3rem; color: var(--ntsl-copper); font-variant-numeric: tabular-nums; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 12px; }
.store-item { display: flex; flex-direction: column; gap: 10px; }
.store-item.sold-out { opacity: 0.6; }
.store-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.store-head h3 { margin: 0 0 2px; font-size: 1.05rem; }
.store-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ntsl-copper);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.store-text { margin: 0; color: var(--text-muted); font-size: 0.92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.store-details summary { cursor: pointer; color: var(--ntsl-blue); font-size: 0.9rem; }
.store-details pre { white-space: pre-wrap; font: inherit; font-size: 0.85rem; color: var(--text-muted); margin: 8px 0 0; }
.store-item .actions { margin-top: auto; justify-content: flex-end; }
.meta.negative { color: var(--danger); }
.store-item .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Profil ---------- */
button.subtab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.profile-panel[hidden] { display: none; }
.voice-active { margin-top: 14px; }
.voice-active > summary { cursor: pointer; padding: 14px 20px; font-weight: 600; }
.voice-active[open] > summary { border-bottom: 1px solid var(--border); }
.profile-events, .profile-tx, .profile-inventory { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.profile-events li, .profile-tx li, .profile-inventory li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.profile-events li:last-child, .profile-tx li:last-child, .profile-inventory li:last-child { border-bottom: 0; }
.profile-balance {
    font-size: 1.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}
.profile-tx .tx { font-variant-numeric: tabular-nums; font-weight: 600; }
.profile-tx .tx.positive { color: var(--success); }
.profile-tx .tx.negative { color: var(--danger); }
.card h3 { margin: 16px 0 6px; font-size: 0.95rem; }
.person-link { color: inherit; text-decoration: none; }
.person-link:hover .person span { text-decoration: underline; }
.profile-row { margin-bottom: 14px; }

/* Org-Ränge: Konfiguration */
.rank-list { display: grid; gap: 12px; }
.rank-row { display: flex; gap: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.rank-image { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; flex: none; }
.rank-emblem { width: 72px; height: 72px; border-radius: 12px; object-fit: contain; background: rgba(255, 255, 255, 0.04); }
.rank-emblem.empty { display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; color: var(--muted, #8b93a1); }
.rank-fields { flex: 1; min-width: 0; display: grid; gap: 8px; }
.rank-line { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.rank-step { font-weight: 600; color: var(--copper, var(--accent)); white-space: nowrap; }
.rank-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
    .rank-row { flex-direction: column; }
    .rank-image { flex-direction: row; width: auto; }
    .rank-line { grid-template-columns: 1fr; }
}

/* Org-Ränge: Laufbahn im Profil */
.rank-subhead { margin: 20px 0 4px; font-size: 1rem; }
.rank-buttons { display: flex; gap: 8px; }
.rank-settings .form-actions.start { margin-top: 10px; }
.voice-section > .card + .card { margin-top: 14px; }
#voice, #rsi { scroll-margin-top: 84px; }
.voice-howto { margin-top: 12px; }
.voice-howto summary { cursor: pointer; color: var(--muted, inherit); }
.voice-howto p { margin-top: 8px; }

/* ---------- Erfolge ---------- */
.achievements {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.achievement {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    filter: grayscale(0.9);
    opacity: 0.75;
}
.achievement.earned { filter: none; opacity: 1; border-color: rgba(var(--accent-rgb), 0.55); background: var(--copper-soft); }
.achievement.is-new { box-shadow: 0 0 0 2px var(--ntsl-copper); }
.achievement-icon { font-size: 1.6rem; line-height: 1; }
.achievement-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; align-self: stretch; }
.achievement-text strong { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.achievement-progress { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.achievement-bar {
    position: relative;
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.achievement-bar span { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--ntsl-blue); }
.achievement.earned .achievement-bar span { background: var(--ntsl-copper); }
.achievement-count { flex: none; font-size: 0.74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.achievements-open { margin-top: 12px; }
.achievements-open summary { cursor: pointer; color: var(--ntsl-blue); margin-bottom: 10px; }

/* ---------- Crew-Planung ---------- */
.crew { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.crew > summary { cursor: pointer; font-weight: 600; }
.crew-ships { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crew-ship {
    border: 1px solid var(--border);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.crew-ship.mine { border-left-color: var(--brass); background: rgba(var(--accent-rgb), 0.06); }
.crew-ship-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.crew-note { font-style: italic; }
.crew-people { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; font-size: 0.9rem; }
.crew-pilot { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.crew-free {
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px dashed var(--border-strong);
    color: var(--text-muted);
    font-size: 0.8rem;
}
.crew-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.push-box { display: flex; flex-direction: column; gap: 8px; }
.push-state { display: flex; gap: 8px; }

/* ---------- Voice-Kanäle ---------- */
.voice-toggles { margin: 4px 0 16px; }
.voice-members li { flex-wrap: wrap; }
.voice-members li > :last-child { flex: 0 1 auto; }

/* ======================================================================
   Bedienbarkeit (Rundgang November 2026)
   ====================================================================== */
.shell { min-height: 100dvh; }

/* Seitenleiste scrollt für sich, damit unten liegende Bereiche auch auf
   langen Seiten erreichbar bleiben. */
.sidebar {
    max-height: calc(100dvh - 61px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

/* Kartenköpfe brechen auf schmalen Bildschirmen um statt den Titel zu quetschen. */
.card-head { flex-wrap: wrap; }
.card-head h2 { flex: 1 1 200px; min-width: 0; }

/* Fehler beim Laden einer Seite: mit „Erneut versuchen“. */
.error-state { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.error-state .alert { width: 100%; margin: 0; }

/* Voice: Besitzer-Hinweis neben dem Namen */
.voice-members li > :first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) {
    /* Untere Leiste auf eigener Ebene – bleibt beim Scrollen (auch iOS) fest stehen. */
    /* Reiter wischbar, mit Hinweis, dass es rechts weitergeht */
    .subtabs {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
        padding-right: 24px;
        scroll-snap-type: x proximity;
    }
    .subtab { scroll-snap-align: start; }
    /* Rückmeldungen zu Meldungen kompakt: Text auf zwei Zeilen, Antippen klappt auf */
    .feedback-update { padding: 10px 16px; gap: 10px; flex-wrap: nowrap; align-items: flex-start; }
    .feedback-update-text { min-width: 0; font-size: 0.92rem; cursor: pointer; }
    .feedback-update-text p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .feedback-update-text.open p { display: block; }
    .feedback-update .btn { flex: none; }
    /* Menü-Sheet lässt sich nach unten wegwischen */
    .sheet { touch-action: pan-y; }
    .sheet.dragging { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .tab:active, .sheet-item:active, .nav-link:active, .subtab:active { scale: 0.96; }
    .tab, .sheet-item, .subtab { transition: color 0.2s, background 0.2s, scale 0.12s var(--ease-out); }
    .sheet:not(.dragging) { transition: translate 0.25s var(--ease-out); }
    .error-state { animation: fade-up 0.35s var(--ease-out) backwards; }
}

/* ---------- Mitglieder ---------- */
.adjust-dialog { display: flex; flex-direction: column; gap: 4px; }
.adjust-dialog h3 { margin: 6px 0 2px; }
.adjust-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 14px 0 6px; width: 100%; }

/* ======================================================================
   Seitenübergänge (View Transitions) – Animationen weiter unten (Bewegung)
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .main { view-transition-name: page; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    ::view-transition-group(page) { animation-duration: 0s; }
    ::view-transition-image-pair(page) { isolation: auto; }
}

/* ---------- Status ---------- */
.status-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin: 16px 0; }
.status-item { padding: 14px 16px; }
.status-item.off { opacity: 0.75; }
.status-head { display: flex; align-items: center; gap: 12px; }
.status-head .badge { margin-left: auto; flex: none; }
.status-title { display: flex; flex-direction: column; min-width: 0; }
.status-dot { font-size: 0.9rem; width: 1rem; text-align: center; }
.status-item.ok .status-dot { color: var(--success, #5fb98a); }
.status-item.warn .status-dot { color: var(--ntsl-copper); }
.status-item.error .status-dot { color: var(--danger, #e06c6c); }
.status-item.off .status-dot { color: var(--text-muted); }
.status-details { margin: 10px 0 0; padding-left: 28px; color: var(--text-muted); font-size: 0.9rem; }
.status-details li + li { margin-top: 2px; }
.status-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.status-log li { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.status-log li:last-child { border-bottom: none; }
.status-log code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.85rem; }
.status-log .meta, .status-log-action { overflow-wrap: anywhere; min-width: 0; }
.status-log-head { display: flex; gap: 8px; align-items: center; }
.status-log-title { font-size: 0.98rem; }
.status-log-raw summary { cursor: pointer; font-size: 0.8rem; color: var(--muted, inherit); }
.status-log-raw[open] summary { margin-bottom: 4px; }
.grid.stats > .stat.stat-link { cursor: pointer; }
.grid.stats > .stat.stat-link:hover, .grid.stats > .stat.stat-link:focus-visible { border-color: rgba(var(--accent-rgb), 0.6); }
.status-item.status-flash { animation: status-flash 1.6s ease-out; }
@keyframes status-flash { 0%, 30% { box-shadow: 0 0 0 2px rgb(var(--accent-rgb)); } 100% { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .status-item.status-flash { animation: none; outline: 2px solid rgb(var(--accent-rgb)); } }

/* Status: „Prüfen“ führt zur passenden Stelle */
a.status-link { text-decoration: none; cursor: pointer; transition: filter 0.15s, translate 0.15s; }
a.status-link:hover { filter: brightness(1.25); translate: 2px 0; text-decoration: none; }
a.status-detail-link {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
a.status-detail-link:hover { color: var(--ntsl-blue); }

/* Hervorhebung eines angesprungenen Felds */
.focus-flash { border-radius: var(--radius-sm); animation: focus-flash 2.4s ease-out; }
@keyframes focus-flash {
    0%, 30% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.75), 0 0 28px rgba(var(--accent-rgb), 0.35); }
    100% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0), 0 0 28px rgba(var(--accent-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
    .focus-flash { animation: none; outline: 2px solid var(--ntsl-copper); }
}

/* Erfolge: Stufen, Seltenheit, geheime */
.achievement .badge.tier { font-size: 0.68rem; padding: 1px 7px; }
.achievement.tier-bronze .badge.tier { background: rgba(176, 120, 72, 0.22); border-color: rgba(176, 120, 72, 0.6); color: #e2b48a; }
.achievement.tier-silber .badge.tier { background: rgba(190, 200, 215, 0.16); border-color: rgba(190, 200, 215, 0.5); color: #d9e0ea; }
.achievement.tier-gold .badge.tier { background: rgba(214, 178, 74, 0.2); border-color: rgba(214, 178, 74, 0.6); color: #f1d27a; }
.achievement.tier-platin .badge.tier { background: rgba(140, 200, 220, 0.18); border-color: rgba(140, 200, 220, 0.55); color: #bfe6f2; }
.rarity { font-size: 0.74rem; color: var(--text-muted); }
.rarity.rare { color: var(--ntsl-blue); }
.rarity.very-rare { color: var(--ntsl-copper); font-weight: 600; }
.achievement.secret { border-style: dashed; filter: none; opacity: 0.8; }
.reward-editor table input[type="number"] { width: 110px; }
.reward-editor table select { min-width: 160px; }
.reward-name { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.achievement .next-tier { font-size: 0.76rem; }

/* ======================================================================
   Menü mit einklappbaren Gruppen, Suche und Aufgaben-Zahlen
   ====================================================================== */
.nav-search {
    width: 100%;
    margin: 0 0 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
}
.nav-zone {
    margin: 14px 12px 2px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ntsl-copper);
}
.sheet .nav-zone { margin: 12px 8px 0; }
.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.nav-group-toggle .nav-chevron { margin-left: auto; transition: rotate 0.2s var(--ease-out); }
.nav-group-toggle[aria-expanded="false"] .nav-chevron { rotate: -90deg; }
.nav-group-toggle:hover { color: var(--text); }
.nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--ntsl-copper);
    color: #14110b;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
}
.nav-link .nav-count, .sheet-item .nav-count { margin-left: auto; }
.nav-group-toggle .nav-count { margin-left: 0; }

/* Hilfe */
.page-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--border-strong);
    font-weight: 700;
    text-decoration: none;
    color: var(--text-muted);
}
.page-help:hover { color: var(--ntsl-blue); border-color: var(--ntsl-blue); text-decoration: none; }
.help-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.help-toc .chip { text-decoration: none; }
.help-section { margin-bottom: 14px; scroll-margin-top: 80px; }
.help-items { display: flex; flex-direction: column; }
.help-item { border-bottom: 1px solid var(--border); }
.help-item:last-child { border-bottom: 0; }
.help-item summary { cursor: pointer; padding: 10px 0; font-weight: 600; list-style-position: inside; }
.help-item summary::marker { color: var(--ntsl-blue); }
.help-item p { margin: 0 0 12px; color: var(--text-muted); line-height: 1.6; }

/* Zu erledigen */
.task {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text);
    text-decoration: none;
}
.task:hover { border-color: var(--ntsl-copper); text-decoration: none; }

/* Status: Hinweise akzeptieren */
.status-actions { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.status-accept { font-size: 0.84rem; color: var(--text-muted); }
.status-accept:hover { color: var(--text); }
.status-detail-row .status-accept { margin-left: 10px; }
.status-accepted-note {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--text-muted);
}
.status-item.accepted { opacity: 0.85; }

/* Konfiguration: Emoji-Reaktionen */
.reaction-rules { display: grid; gap: 10px; }
.reaction-rule {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.reaction-rule .field { margin: 0; }
.reaction-emoji { display: flex; align-items: center; gap: 8px; }
.reaction-emoji input { flex: 1; min-width: 0; }
.reaction-preview {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    border-radius: 8px;
    background: var(--panel-raised);
}
.reaction-emoji-img { width: 24px; height: 24px; object-fit: contain; }
.reaction-missing { color: var(--danger); font-weight: 700; font-size: 1rem; }
.reaction-palette { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.84rem;
}
.reaction-chip:hover { border-color: var(--ntsl-blue); }
.reaction-chip img { width: 20px; height: 20px; object-fit: contain; }
@media (max-width: 720px) {
    .reaction-rule { grid-template-columns: 1fr; }
}

/* Zahl offener Aufgaben an einem Reiter */
.subtab .nav-count { margin-left: 6px; }
.page-head > div + div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Banner: Nachbereitung eigener Events */
.followup-banner {
    display: flex;
    gap: 12px 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 20px;
}
.followup-text { flex: 1; min-width: 220px; }
.followup-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Emoji-Picker unter Textfeldern */
.emoji-picker { margin-top: 6px; }
.emoji-picker summary { cursor: pointer; color: var(--text-muted); font-size: 0.9rem; width: fit-content; }
.emoji-picker summary:hover { color: var(--text); }
.emoji-picker .reaction-palette { margin: 8px 0 0; }
.emoji-picker .reaction-chip { font-size: 1.05rem; }
.emoji-picker .reaction-palette + .reaction-palette { padding-top: 8px; border-top: 1px solid var(--border); }
.emoji-picker-hint { flex-basis: 100%; margin-top: 2px; }

/* RSI-Verknüpfung im Profil: Schrittanzeige */
.rsi-steps { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; padding: 0; }
.rsi-steps li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.88rem;
}
.rsi-step-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--panel-raised);
}
.rsi-steps li.active { border-color: rgba(var(--accent-rgb), 0.7); background: var(--blue-soft); color: var(--text); }
.rsi-steps li.active .rsi-step-number { background: var(--ntsl-blue); color: #0b1020; }
.rsi-steps li.done { color: var(--success); }
.rsi-steps li.done .rsi-step-number { background: var(--success-soft); color: var(--success); }

/* ---------- Guides ---------- */
.guide-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.guide-search { flex: 1; min-width: 200px; max-width: 480px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.guide-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
    color: var(--text);
}
.guide-card:hover { border-color: rgba(var(--accent-rgb), 0.6); transform: translateY(-2px); }
.guide-cover { aspect-ratio: 16 / 7; background: var(--panel-raised); overflow: hidden; }
.guide-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.guide-body h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.guide-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-detail-tags { margin-bottom: 14px; }
.guide-snippet {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.guide-meta { margin-top: auto; font-size: 0.8rem; }
.guide-settings { margin-top: 20px; }
.guide-article { overflow-wrap: anywhere; }
.guide-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.guide-gallery img { width: 100%; border-radius: 8px; display: block; border: 1px solid var(--border); }
.guide-links { display: grid; gap: 10px; }
.guide-link {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
}
.guide-link:hover { border-color: rgba(var(--accent-rgb), 0.6); }
.guide-link img { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; flex: none; }
.guide-link p { margin: 4px 0 0; }
.guide-link > div { min-width: 0; overflow-wrap: anywhere; }

/* Discord-Markdown */
.markdown { line-height: 1.6; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown p { margin: 0 0 12px; }
.markdown .md-heading { margin: 18px 0 8px; line-height: 1.3; }
.markdown h3.md-heading { font-size: 1.3rem; }
.markdown h4.md-heading { font-size: 1.12rem; }
.markdown h5.md-heading { font-size: 1rem; }
.markdown .md-subtext { display: block; color: var(--text-muted); font-size: 0.8rem; margin: 0 0 8px; }
.markdown ul, .markdown ol { margin: 0 0 12px; padding-left: 22px; }
.markdown li { margin: 3px 0; }
.markdown li.md-nested { margin-left: 18px; }
.markdown blockquote {
    margin: 0 0 8px;
    padding: 2px 0 2px 12px;
    border-left: 3px solid var(--border-strong);
    color: var(--text-muted);
}
.markdown pre {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    margin: 0 0 12px;
}
.markdown code { font-size: 0.9em; }
.markdown :not(pre) > code { background: rgba(255, 255, 255, 0.07); padding: 1px 5px; border-radius: 4px; }
.markdown a { overflow-wrap: anywhere; }
.md-spoiler {
    background: var(--border-strong);
    color: transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: color 0.15s;
}
.md-spoiler:hover, .md-spoiler:focus, .md-spoiler.revealed { color: inherit; background: rgba(255, 255, 255, 0.08); }
.md-spoiler.revealed { cursor: auto; }
.markdown pre code { display: block; background: none; border: 0; padding: 0; white-space: pre; }
.guide-detail { display: grid; gap: 16px; }
.guide-detail > .card { margin: 0; }

/* ---------- Partnerbereich ---------- */
.btn.partner-btn:hover { filter: brightness(1.08); }
.partner-members { display: flex; flex-wrap: wrap; gap: 6px; }
.partner-member {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 3px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.88rem;
}
.partner-member img { width: 22px; height: 22px; border-radius: 50%; }
.chip-remove { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 0 2px; }
.chip-remove:hover { color: var(--danger); }
.partner-settings { margin-top: 20px; }
.partner-intro ol { margin: 0 0 12px; padding-left: 20px; line-height: 1.6; }
.partner-diff td { vertical-align: top; overflow-wrap: anywhere; }
.partner-old { color: var(--text-muted); text-decoration: line-through; }
.partner-diff-logo { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
.partner-category-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.partner-review-fields { display: grid; gap: 16px; }
.partner-danger { margin-top: 28px; border-color: rgba(216, 106, 106, 0.45); }
.guide-tag-filter { margin-top: 14px; }

/* „Problem melden“: angehängte Bilder */
.fb-images { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-images:empty { display: none; }
.fb-thumb {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
}

/* ---------- Interaktiver Rundgang (tour.js) ---------- */
.tour-layer { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.tour-layer.centered { background: rgba(3, 6, 12, 0.62); }
.tour-spot {
    position: fixed;
    border-radius: 12px;
    border: 2px solid var(--ntsl-copper);
    box-shadow: 0 0 0 9999px rgba(3, 6, 12, 0.62), 0 0 18px rgba(var(--accent-rgb), 0.45);
    transition: left 0.25s var(--ease-out, ease), top 0.25s var(--ease-out, ease), width 0.25s var(--ease-out, ease), height 0.25s var(--ease-out, ease);
}
.tour-spot[hidden] { display: none; }
.tour-pop {
    position: fixed;
    width: min(340px, calc(100vw - 24px));
    pointer-events: auto;
    background: linear-gradient(180deg, var(--panel-raised), var(--panel));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
    transition: left 0.25s var(--ease-out, ease), top 0.25s var(--ease-out, ease);
}
.tour-layer.centered .tour-pop {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 24px));
}
.tour-pop h3 { margin: 6px 0 6px; font-size: 1.05rem; }
.tour-pop p { margin: 0 0 10px; }
.tour-try { color: var(--ntsl-copper); font-size: 0.9rem; }
.tour-progress { display: flex; align-items: center; gap: 10px; }
.tour-bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.tour-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent)); transition: width 0.25s; }
.tour-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
    .tour-spot, .tour-pop { transition: none; }
}

/* ---------- Bildeditor für Event-Banner ---------- */
dialog.banner-editor-dialog { width: min(1100px, calc(100vw - 24px)); max-width: none; }
.banner-editor-stage { border-radius: 10px; overflow: hidden; border: 1px solid var(--border-strong); background: #000; }
.banner-editor-canvas { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; cursor: grab; touch-action: none; }
.banner-editor-canvas:active { cursor: grabbing; }
.banner-editor-canvas:focus-visible { outline: 2px solid var(--ntsl-blue); outline-offset: 2px; }
.banner-editor-tools { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.banner-editor-tools input[type="range"] { flex: 1; accent-color: var(--ntsl-blue); }
.banner-editor .hint { margin-top: 0; }
.uploader .form-actions.start:has(> button[hidden]:only-child) { display: none; }

/* Vorschau nach dem Zuschneiden: komplettes Banner mit Rahmen zeigen. */
.uploader .banner-preview { width: 100%; height: auto; max-height: none; aspect-ratio: 5 / 2; object-fit: cover; }

/* ---------- Übersicht: nächstes Event, Info-Leiste, Karten ---------- */
.info-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 16px 0; }
.info-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s;
}
.info-tile:hover, .info-tile:focus-visible { text-decoration: none; }
.info-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ntsl-copper) 12%, transparent);
    font-size: 1.2rem;
}
.info-icon img { width: 34px; height: 34px; object-fit: contain; }
.info-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.info-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.info-value { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-sub { font-size: 0.78rem; color: var(--text-muted); }
.info-sub.pos { color: #5fcf98; }

/* Karten wie Mauerwerk: jede Spalte rückt lückenlos nach (statt Rasterzeilen mit Löchern). */
.grid.overview-cards { display: block; columns: 3 380px; column-gap: 16px; }
.grid.overview-cards > .card { break-inside: avoid; margin: 0 0 16px; width: 100%; display: inline-block; }

/* „Zu erledigen“ ohne Aufgaben: nur eine schmale Zeile. */
.card-more { display: inline-block; margin-top: 12px; font-size: 0.85rem; color: var(--ntsl-blue); text-decoration: none; }
.card-more:hover { text-decoration: underline; }

/* ======================================================================
   Seitenübergreifender Feinschliff (Beta 1.2): kompakte Kacheln, keine
   gestreckten Karten, einheitliche Knöpfe, kürzere Tabellenkarten am Handy.
   ====================================================================== */

/* Zahlenkacheln (statCard) im Stil der Info-Leiste: klein statt groß und leer. */
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.stat .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.stat .value {
    font-size: 1.2rem;
    margin-top: 2px;
    line-height: 1.3;
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat .sub { font-size: 0.78rem; margin-top: 1px; }

/* Karten in zwei Spalten nicht auf die Nachbarhöhe strecken (Ausnahme: .equal). */
.grid.two { align-items: start; }
.grid.two.equal { align-items: stretch; }
.guide-grid { align-items: start; }

/* Statusseite wie die Übersicht: Spalten rücken lückenlos nach. */
.status-list { display: block; columns: 3 320px; column-gap: 12px; }
.status-list > * { break-inside: avoid; margin: 0 0 12px; width: 100%; display: inline-block; }

/* Abstand zwischen aufeinanderfolgenden Blöcken einer Seite – überall gleich. */
.main > :is(.card, .grid, form, section, .info-strip, .status-list, .table-wrap, .search-bar)
    + :is(.card, .grid, form, section, .info-strip, .status-list) { margin-top: 16px; }

/* Knöpfe im Seitenkopf: eine Größe. */
.page-head .btn.danger-btn, .page-head .btn.danger-outline { order: 99; }

/* Kleinigkeiten */
td .toggle { margin-top: 0; }
.store-item .store-head h3 { margin: 0 0 2px; }
.guide-article > :first-child { margin-top: 0; }
.card > h2 { flex-wrap: wrap; }
.card > h2 .meta { white-space: nowrap; font-weight: 400; }
.alert { font-size: 0.9rem; }
@media (max-width: 860px) {
    /* Kopf-Knöpfe füllen die Zeile gleichmäßig */
    .page-head > div + div > .btn, .page-head > div + div > a.btn { flex: 1 1 auto; }
    /* Filter-Chips: eine scrollbare Zeile statt 3–5 Zeilen */
    .filter-chips, .help-toc {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -14px;
        padding-inline: 14px;
        padding-bottom: 2px;
    }
    .filter-chips::-webkit-scrollbar, .help-toc::-webkit-scrollbar { display: none; }
    .chip, .help-toc > * { flex: none; }
    /* Formular-Knöpfe: zwei pro Zeile statt jeder einzeln */
    .form-actions .btn { flex: 1 1 calc(50% - 5px); }
    .store-bar input[type="search"] { max-width: none; flex-basis: 100%; }
    /* Tabellen am Handy: Werte zweispaltig, Beschriftung klein darüber – etwa halb so hoch. */
    table.responsive tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
    table.responsive td {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        gap: 2px;
        padding: 0;
        min-width: 0;
    }
    table.responsive td::before { margin-right: 0; font-size: 0.7rem; }
    table.responsive td:first-child, table.responsive td[data-label=""], table.responsive td[colspan],
    table.responsive td.empty { grid-column: 1 / -1; }
    table.responsive td[data-label=""] { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; padding-top: 4px; }
    table.responsive td .person { justify-content: flex-start; }
    table.responsive td:first-child { padding-bottom: 2px; }
}
button.info-tile { font: inherit; text-align: left; cursor: pointer; width: 100%; }
div.info-tile:hover { border-color: var(--border); }
.card-more.link-button { text-decoration: none; margin-top: 12px; }
.card-more-row { padding: 4px 16px 14px; }
.grid.two.wide-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 1100px) {
    .grid.two.wide-left { grid-template-columns: 1fr; }
}
.audit-head { align-items: center; justify-content: flex-start; }
.audit-head .meta { margin-left: auto; }
.audit-fields { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.86rem; color: var(--text-muted); }
.audit-fields b { color: var(--text); font-weight: 600; }

/* Hilfe: Themen in Spalten statt eine lange Liste */
.help-columns { columns: 2 420px; column-gap: 16px; }
.help-columns > .help-section { break-inside: avoid; margin: 0 0 16px; display: inline-block; width: 100%; }
@media (min-width: 861px) {
    .announce-preview { position: sticky; top: 80px; }
}
.status-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) {
    .status-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
tr.inactive > td { opacity: 0.6; }
td.row-actions { white-space: nowrap; }
@media (max-width: 860px) {
    td.row-actions { white-space: normal; }
    td.row-actions .btn { flex: 1 1 auto; }
}
.guide-side { display: grid; gap: 16px; align-content: start; }
.guide-side:empty { display: none; }
@media (min-width: 1000px) {
    .guide-detail.has-side { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
}

/* Event-Karte: Banner wie im Discord-Post, voller Beschreibungstext */

/* Diplomatie: Vorschläge anhand des Org-Kürzels */
.tag-suggestions {
    margin: 10px 0 12px;
    padding: 12px 14px;
    border: 1px dashed color-mix(in srgb, var(--ntsl-blue) 45%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--ntsl-blue) 7%, transparent);
}
.tag-suggestions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.tag-suggestions-head strong { font-size: 0.9rem; }
.partner-member.suggestion { cursor: pointer; font: inherit; color: inherit; border-style: dashed; background: transparent; }
.partner-member.suggestion:hover { border-color: var(--ntsl-blue); }
.partner-member.suggestion .add { color: var(--ntsl-blue); font-weight: 700; margin-left: 2px; }

/* Diplomatie: Einladungslink zum Kopieren */
.invite-row { display: flex; gap: 8px; align-items: center; }
.invite-row .invite-field { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }

/* ---------- Sternenhimmel hinter allen Seiten ---------- */

/* Viele winzige Punkte aus Verläufen (keine Bilddatei nötig), langsam treibend. */
body::after {
    content: "";
    position: fixed;
    inset: -300px;
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent),
        radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 200px 160px, rgba(190,210,255,0.9), transparent),
        radial-gradient(1px 1px at 280px 40px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 340px 220px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 60px 260px, rgba(255,230,190,0.8), transparent);
    background-size: 380px 300px;
}
@media (prefers-reduced-motion: no-preference) {
    body::after { animation: star-drift 160s linear infinite; }
    @keyframes star-drift { to { transform: translate(380px, 300px); } }
}

/* ---------- Anmeldeseite: Lichtring, Planet, Sternschnuppen, Motto ---------- */
.landing { position: relative; overflow: hidden; }

/* Langsam drehender Lichtring in Blau und Kupfer */

/* Planet am unteren Rand: dunkle Kugel mit blauem Atmosphärenrand */

/* Sternschnuppen: nur ab und zu, kurz sichtbar */

@media (prefers-reduced-motion: no-preference) {
    
    
}

/* Anmeldeseite: Version mittig */
.login-footer .support-brand, .login-footer .support-links { justify-content: center; }

/* Event-Karten kompakt: Beschreibung auf 4 Zeilen gekürzt */

/* Event-Detailseite */
.event-fact dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.event-fact dd { margin: 0; font-weight: 600; min-width: 0; }
.event-slots, .event-people { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.event-slots li, .event-people li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.event-slots li:last-child, .event-people li:last-child { border-bottom: 0; }
.event-slots .slot-count { margin-left: auto; }
.event-person-slots { margin-left: auto; }
.event-people-grid { align-items: start; margin-top: 16px; }

/* Shop-Assistent: Preis mit Vorschlag */
.price-box {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.price-box h3 { margin: 0; font-size: 1rem; }
.price-box .field { max-width: 260px; }
.price-suggestion-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Profil-Kopf: oben Bild, Name und Guthaben, darunter die Rollen – am Handy kompakt */
.sheet-handle:focus { outline: none; }
a.version-tag { text-decoration: none; }
a.version-tag:hover { border-color: var(--ntsl-copper); }

/* Partnerbereich: Zusammenarbeit */

/* Nachbereitung: Feedback */
.feedback-summary { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.feedback-average { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.feedback-average strong { font-size: 2rem; line-height: 1; }
.feedback-stars { color: var(--ntsl-copper); letter-spacing: 1px; }
.feedback-bars { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
.feedback-bar { display: grid; grid-template-columns: 36px 1fr 24px; gap: 8px; align-items: center; font-size: 0.85rem; }
.feedback-bar .bar { height: 8px; border-radius: 999px; background: var(--panel-raised); overflow: hidden; }
.feedback-bar .bar > span { display: block; height: 100%; background: var(--ntsl-copper); }
.feedback-comments { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.feedback-comments li {
    padding: 8px 12px;
    border-left: 3px solid var(--ntsl-copper);
    background: var(--panel-raised);
    border-radius: 6px;
}
.feedback-comments p { margin: 2px 0 0; white-space: pre-line; }

/* Übersicht: Gerade im Voice */

/* Profil: Geburtstag */
.birthday-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.birthday-row select { width: auto; }

/* Ausbildung */
.training-grid { columns: 2 360px; column-gap: 16px; }
.training-grid > .card { break-inside: avoid; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.training-head { display: flex; align-items: center; gap: 12px; }
.training-head h2 { margin: 0; }
.training-head .badge { margin-left: auto; }
.training-emoji {
    font-size: 1.6rem;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--panel-raised);
    flex: none;
}
.training-holders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.training-holders li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.training-holders li:last-child { border-bottom: 0; }
.training-holders img, .training-holders .avatar-fallback { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.training-holders .avatar-fallback { display: grid; place-items: center; background: var(--panel-raised); font-size: 0.75rem; }
.training-holders li > div { flex: 1; min-width: 0; }
.profile-certs .event-meta { margin: 4px 0; }

/* Org-Logistik */
.logistics-search input[type=search] { margin-bottom: 10px; }
.logistics-list li, .logistics-requests li { align-items: flex-start; }
.logistics-details { margin: 4px 0; white-space: pre-line; }
.logistics-grid { align-items: start; margin-top: 16px; }
div.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }

/* Jahresbilanz */
.yr-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 26px 24px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(var(--accent-rgb), 0.16), transparent 60%),
        repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.04) 0 1px, transparent 1px 36px),
        var(--panel);
}
.yr-year {
    position: absolute;
    right: 14px;
    bottom: -0.22em;
    font: 700 clamp(84px, 14vw, 168px)/1 var(--display);
    letter-spacing: 0.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(var(--accent-rgb), 0.22);
    pointer-events: none;
    user-select: none;
}
.yr-avatar {
    position: relative;
    flex: none;
    width: 92px;
    height: 92px;
    object-fit: cover;
    background: var(--panel-raised);
    border: 1px solid var(--brass);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
}
.yr-id { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.yr-id .k-label { color: var(--brass); }
.yr-id h2 {
    margin: 0;
    font: 700 clamp(1.5rem, 4vw, 2.2rem)/1.1 var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.yr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.yr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    font: 600 11px var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.yr-chip.rank { color: var(--brass-hi); border-color: rgba(var(--accent-rgb), 0.45); }
.yr-chip img { width: 18px; height: 18px; object-fit: contain; }
.yr-place { margin: 0; color: var(--text-muted); font-size: 14px; }
.yr-place b { color: var(--brass-hi); font-weight: 600; }
.yr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.yr-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 16px 18px 14px;
    background: var(--panel);
    border: 1px solid var(--border);
}
.yr-stat::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 12px;
    height: 12px;
    border: 1px solid var(--brass);
    border-right: 0;
    border-bottom: 0;
}
.yr-idx { font: 600 11px var(--mono); color: var(--brass); letter-spacing: 0.1em; }
.yr-stat b { font: 700 clamp(1.7rem, 4vw, 2.3rem)/1.1 var(--display); color: var(--brass-hi); margin-top: 4px; }
.yr-label { font: 600 10.5px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); overflow-wrap: anywhere; }
.yr-stat .meta { font-size: 12px; }
.yr-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.yr-lines { list-style: none; margin: 0; padding: 0; }
.yr-lines li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.yr-lines li:last-child { border-bottom: 0; }
.yr-lines span { font: 600 10.5px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); flex: none; padding-top: 3px; }
.yr-lines strong { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.yr-medals { display: flex; flex-wrap: wrap; gap: 8px; }
.yr-medal { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--border); background: var(--panel-raised); font-size: 13px; }
.yr-medal i { font-style: normal; font-size: 1.1rem; }
@media (max-width: 640px) {
    .yr-hero { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 16px; }
    .yr-avatar { width: 72px; height: 72px; }
    .yr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .yr-lines li { flex-direction: column; gap: 2px; }
    .yr-lines strong { text-align: left; }
}
.year-teaser {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}
.year-teaser:hover { border-color: rgba(var(--accent-rgb), 0.55); }
.year-teaser > div { flex: 1; }
.year-teaser-icon {
    font-size: 1.4rem;
    color: var(--ntsl-copper);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--panel-raised);
}

/* Partnerbereich: Unterstützungsanfragen */
.partner-support-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.partner-support-list li {
    padding: 10px 12px;
    border-radius: 0;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.partner-support-list li.active { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.06); }
.partner-support-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.partner-support-details { margin: 2px 0; white-space: pre-line; }
.partner-support-actions { display: flex; gap: 6px; margin-top: 4px; }


/* ---------- Formatierungs-Pass ---------- */

/* Zahlen- und Info-Kacheln am Handy zweispaltig (die breite Regel weiter oben hatte das überschrieben) */
@media (max-width: 860px) {
    .grid.stats, .info-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Schalter: Haken nicht stauchen, bei mehrzeiligem Text oben ausrichten */
.toggle { align-items: flex-start; }
.toggle input { flex: none; margin-top: 2px; }

/* Schalter innerhalb von Feldern sehen aus wie alle anderen */
.field label.toggle {
    font-weight: 400;
    color: var(--text);
}

/* Abstände zwischen verschachtelten Feldern */
.field + .field, .form-grid + .field, .form-grid + div, .field + .form-grid { margin-top: 14px; }

/* Menü „Mehr“: Gruppenköpfe wie Einträge, Symbole gleich breit */
.sheet .nav-group-toggle.sheet-label {
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    padding: 12px 14px;
    min-height: 48px;
}
.sheet-item .tab-icon { flex: none; width: 24px; text-align: center; }
.nav-link .icon { flex: none; width: 20px; text-align: center; }

/* Global Chat: „In Discord öffnen“ neben „Trennen“ */
.channel-line .btn + .btn { margin-left: 0; }

/* Notizen und KI-Wissen: Löschen bleibt rechts, Zusatzinfos in die zweite Zeile */
.note-head .btn, .knowledge-head .btn { margin-left: auto; flex: none; }
@media (max-width: 860px) {
    .knowledge-head .btn { margin-left: auto; }
    .note-head .meta, .knowledge-head .badge { order: 3; flex-basis: 100%; }
    .audit-head .meta { flex-basis: 100%; margin-left: 0; order: 3; }
    .price-box .field { max-width: none; }
    .chart-canvas { min-width: 320px; }
}

/* Tabellenköpfe nicht umbrechen */
th { white-space: nowrap; }

/* Shop-Dialog: Spielwerte zweispaltig, Knöpfe immer nebeneinander */
.craft-stats { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.dialog .form-actions .btn, dialog .form-actions .btn { flex: 1 1 0; min-width: 0; }

/* Nicht gesetzter Qualitätsregler: kein gefüllter Teil */
input[type=range].unset { accent-color: var(--text-muted); }
input[type=range].unset::-webkit-slider-thumb { opacity: 0; }
input[type=range].unset::-moz-range-thumb { opacity: 0; }

/* Seitenleiste: Fuß kompakter, damit „Info“ sichtbar bleibt */
.sidebar-footer { padding-top: 10px; padding-bottom: 14px; }
.sidebar-footer .support-note { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; }
.sidebar-footer .support-brand { grid-column: 1; }
.sidebar-footer .support-links { grid-column: 1; margin: 0; }
.sidebar-footer .feedback-button { grid-column: 2; grid-row: 1 / span 2; width: auto; }

/* Seitliche Reiter und Filter am Handy: sichtbar machen, dass es weitergeht */
@media (max-width: 860px) {
    .subtabs, .filter-chips {
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
        mask-image: linear-gradient(90deg, #000 85%, transparent);
    }
}

/* Dialoge: Schließen-Knopf in der Kopfzeile */
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dialog-head h2 { margin-bottom: 12px; }
.dialog-close {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    margin: -4px -6px 0 0;
}
.dialog-close:hover { color: var(--text); background: var(--panel-raised); }

/* ---------- Formatierungs-Pass, Teil 2 ---------- */

/* Handy-Tabellen: Badges umbrechen statt überlappen, Unterzeilen linksbündig */
@media (max-width: 860px) {
    table.responsive td > .badge { max-width: 100%; white-space: normal; text-align: left; }
    table.responsive td > div { text-align: left; }
}

/* Felder in Karten: einheitlicher Abstand */
.card > .form-grid + .field, .card > .field + .field, .card > .field + .form-grid, .card > .form-grid + .form-grid { margin-top: 14px; }

/* Profil-Reiter: Karten mit gleichmäßigem Abstand */
.profile-panel:not([hidden]) { display: flex; flex-direction: column; gap: 14px; }
.profile-panel > .profile-row { margin-bottom: 0; }
.alert.profile-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Übersicht „Zu erledigen“: gleich hohe Kacheln */

/* Knöpfe neben Eingabefeldern gleich hoch */
.inline-form > .btn { min-height: 42px; }

/* Auswahlfelder im Seitenkopf nicht auf volle Breite */
.page-head > div + div > select { width: auto; flex: none; }

/* Dialog-Formulare: Abstand zwischen den Bausteinen */
dialog form > * + * { margin-top: 14px; }
dialog form > .form-actions { margin-top: 18px; }

/* Markdown: erste Überschrift ohne Zusatzabstand */
.markdown > .md-heading:first-child { margin-top: 0; }

/* Event-Seite: keine doppelte Trennlinie */

/* Zähler in Kartenüberschriften einheitlich */
.card h2 .meta { font-weight: 400; margin-left: 6px; }

/* Versionskarte */
.version-card { align-items: flex-end; }
@media (max-width: 720px) {
    .version-card { gap: 8px 24px; }
    .version-card .support-note { margin-left: 0; text-align: left; }
}

/* Kachel-Beschriftungen einzeilig */
.info-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Externe Links nicht mitten im Pfeil umbrechen */
.ext-link { white-space: nowrap; }

/* RSI-Abgleich: Abstand unter dem Stand-Hinweis */
.rsi-stand { margin: 4px 0 12px; }
.actions-spacer { flex: 1; }
@media (max-width: 860px) {
    .actions-spacer { display: none; }
}

/* Felder nebeneinander im Raster: kein Zusatzabstand */
.form-grid > .field + .field, .form-grid > .field { margin-top: 0; }

/* Ranglisten am Handy: kompakte Zeile (Platz · Person · Wert, Zusatzwerte klein darunter) statt großer Karten */
@media (max-width: 860px) {
    table.responsive.compact-mobile tr {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        align-items: center;
        gap: 2px 10px;
        padding: 10px 14px;
    }
    table.responsive.compact-mobile td { display: block; width: auto; padding: 0; border: 0; min-height: 0; text-align: left; }
    table.responsive.compact-mobile td::before { content: none; }
    table.responsive.compact-mobile td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; font-weight: 700; color: var(--ntsl-copper); text-align: center; }
    table.responsive.compact-mobile td:nth-child(2) { grid-column: 2; grid-row: 1; }
    table.responsive.compact-mobile td:nth-child(3) { grid-column: 3; grid-row: 1; text-align: right; font-weight: 600; }
    table.responsive.compact-mobile td:nth-child(n+4) { grid-column: 2 / -1; font-size: 0.8rem; color: var(--text-muted); }
    table.responsive.compact-mobile td:nth-child(n+4):not([data-label=""])::before {
        content: attr(data-label) ": ";
        display: inline;
        font-size: inherit;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 400;
    }
    table.responsive.compact-mobile td:nth-child(4) { grid-row: 2; grid-column: 2; display: flex; align-items: center; gap: 6px; }
    table.responsive.compact-mobile td:nth-child(5) { grid-row: 2; grid-column: 3; text-align: right; }
    table.responsive.compact-mobile td[data-label=""] { grid-row: 2; grid-column: 3; justify-self: end; }
    table.responsive.compact-mobile td[colspan] { grid-column: 1 / -1; grid-row: auto; }
    table.responsive.compact-mobile td .person { justify-content: flex-start; }
}
@media (max-width: 860px) {
    table.responsive.compact-mobile td:nth-child(4) { flex-wrap: nowrap; white-space: nowrap; }
    table.responsive.compact-mobile td:nth-child(4)::before { content: none !important; }
    table.responsive.compact-mobile .reliability { justify-content: flex-start; gap: 6px; }
    table.responsive.compact-mobile .rel-bar { width: 44px; }
}

/* Info-Kacheln am Handy: ohne Symbol mehr Platz für die Werte, ungerade letzte Kachel über die volle Breite */
@media (max-width: 860px) {
    .info-strip .info-icon { display: none; }
    .info-strip > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .info-strip .info-value { white-space: normal; overflow-wrap: anywhere; }
}

/* Konfiguration: Erscheinungsbild */

/* ======================================================================
   Gerüst (Seitenleiste, Kommandoleiste), Seiten im Kommando-Stil und Bewegung
   ====================================================================== */

/*
 * Schriften: Oxanium (Überschriften, Zahlen) und Inter (Text), beide SIL OFL,
 * liegen unter /fonts – es wird nichts von fremden Servern geladen.
 */
@font-face { font-family: "Oxanium"; font-weight: 400; font-display: swap; src: url(/fonts/oxanium-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Oxanium"; font-weight: 500; font-display: swap; src: url(/fonts/oxanium-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Oxanium"; font-weight: 600; font-display: swap; src: url(/fonts/oxanium-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Oxanium"; font-weight: 700; font-display: swap; src: url(/fonts/oxanium-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600 700; font-display: swap; src: url(/fonts/inter-latin-600-normal.woff2) format("woff2"); }
body { font: 14.5px/1.55 var(--sans); }
body::before {
    background: radial-gradient(1200px 500px at 60% -200px, rgba(var(--accent-rgb), 0.09), transparent 70%), var(--bg);
}
.k-gridbg {
    position: fixed;
    left: 0;
    right: 0;
    top: -48px;
    height: calc(100vh + 96px);
    z-index: -1;
    pointer-events: none;
    will-change: transform;
    background: linear-gradient(rgba(var(--accent-rgb), 0.024) 1px, transparent 1px) 0 0 / 100% 48px,
        linear-gradient(90deg, rgba(var(--accent-rgb), 0.018) 1px, transparent 1px) 0 0 / 48px 100%;
}
a { color: var(--brass); }

/* Links in Chip-, Reiter- und Kachelform behalten die Messing-Linkfarbe */
a.chip, a.subtab, a.page-help, a.guide-card, a.guide-link, a.year-teaser, a.seg { color: var(--brass); }
:focus-visible { outline-color: var(--brass); }
h1, h2, h3 { font-family: var(--display); letter-spacing: 0.06em; }
.card > h2, .card-head h2, .card > h3 { font: 600 12.5px var(--display); letter-spacing: 0.22em; text-transform: uppercase; }
.card > h2 { padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }

/* ---------- Grundgerüst ---------- */
.k-app { display: grid; grid-template-columns: 76px minmax(0, 1fr); min-height: 100vh; }

/* Feste Seitenleiste mit allen Bereichen */
.k-side {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0;
    z-index: 20;
    background: linear-gradient(180deg, #06080c, #030407);
    border-right: 1px solid var(--border);
}
.k-side-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 58px;
    padding: 0 18px;
    flex: none;
    border-bottom: 1px solid var(--border);
    color: var(--text) !important;
}
.k-side-brand:hover { text-decoration: none; }
.k-side-brand img { width: 36px; height: 36px; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.25)); }
.k-side-brand small {
    display: block;
    font: 600 9.5px var(--sans);
    letter-spacing: 0.3em;
    color: var(--brass);
    text-transform: uppercase;
}
.k-side-brand b {
    display: block;
    font: 600 15px var(--display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 2px;
}
.k-side .sidebar {
    position: static;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    border-right: 0;
    padding: 14px 10px 0;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.3) transparent;
}
.k-nav::-webkit-scrollbar { width: 6px; }
.k-nav::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.3); }
.k-nav .nav-search { height: 36px; font-size: 13px; margin: 0 2px 8px; width: calc(100% - 4px); }
.k-nav .section-label, .k-nav .nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 10px 6px;
    background: none;
    border: 0;
    width: 100%;
    font: 600 10px var(--sans);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.k-nav .nav-group-toggle { color: #b9b2a3; cursor: pointer; }
.k-nav .nav-group-toggle:hover { color: var(--brass-hi); }
.k-nav .nav-chevron { font-size: 9px; color: var(--brass); }
.k-nav .nav-zone {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 10px 0;
    padding: 0;
    border: 0;
    font: 600 10px var(--mono);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--brass);
}
.k-nav .nav-zone::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.k-nav .nav-link {
    position: relative;
    min-height: 38px;
    padding: 7px 10px 7px 12px;
    gap: 12px;
    border-radius: 0;
    border-left: 2px solid transparent;
    color: #cfc8b9 !important;
    font: 500 13.5px var(--sans);
}
.k-nav .nav-link:hover {
    background: rgba(var(--accent-rgb), 0.06);
    color: var(--text) !important;
    text-decoration: none;
    padding-left: 12px;
}
.k-nav .nav-link.active {
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.16), transparent 85%);
    color: var(--brass-hi) !important;
    border-left-color: var(--brass);
}
.k-nav .nav-link .icon { width: 20px; display: grid; place-items: center; color: var(--text-muted); filter: none; scale: 1; }
.k-nav .nav-link .k-icon { width: 18px; height: 18px; }
.k-nav .nav-link:hover .icon, .k-nav .nav-link.active .icon { color: var(--brass-hi); }
.k-nav .sidebar-footer {
    background: #040509;
    border-top-color: var(--border);
    margin: 12px -10px 0;
    padding: 14px 18px 18px;
    bottom: 0;
}
.k-logout {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex: none;
}
.k-logout:hover { border-color: var(--border); color: var(--text); }
.k-logout .k-icon { width: 18px; height: 18px; }
@media (min-width: 861px) {
    .k-org { display: none; }
    .k-crumb { margin-left: 0; }
}

/* Name als Fähnchen beim Überfahren */
.k-icon {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}
.k-count {
    position: absolute;
    top: 5px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    background: var(--brass);
    color: var(--on-accent);
    font: 700 10px var(--sans);
}
.k-main { min-width: 0; display: flex; flex-direction: column; }
.k-command {
    position: sticky;
    top: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 20px;
    height: 58px;
    padding: 0 32px;
    background: rgba(4, 6, 10, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.k-command { transition: height 0.25s, background 0.25s, box-shadow 0.25s; overflow-x: clip; }
html.k-scrolled .k-command { background: rgba(4, 6, 10, 0.95); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
@media (min-width: 861px) {
    html.k-scrolled .k-command { height: 50px; }
}
.k-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    transform-origin: left;
    transform: scaleX(var(--k-progress, 0));
    background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi));
    box-shadow: 0 0 8px rgba(var(--accent-hi-rgb), 0.6);
    pointer-events: none;
}
.k-command-crest { display: none; }
.k-org {
    font: 600 11px/1 var(--sans);
    letter-spacing: 0.34em;
    color: var(--brass);
    text-transform: uppercase;
    white-space: nowrap;
}
.k-crumb {
    color: var(--text-muted);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.k-crumb b { color: var(--text); font-weight: 600; }
.k-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 260px;
    height: 34px;
    padding: 0 12px;
    flex: none;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font: 12px var(--sans);
    cursor: pointer;
}
.k-search:hover { border-color: var(--border-strong); color: var(--text); }
.k-search .k-icon { width: 16px; height: 16px; }
.k-search kbd { margin-left: auto; font: 10px var(--mono); border: 1px solid var(--border); padding: 1px 5px; }
.k-clock { font: 12px var(--mono); color: var(--text-muted); letter-spacing: 0.06em; white-space: nowrap; }
.k-command select { width: auto; max-width: 200px; padding: 6px 10px; }
.k-me {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 18px;
    border-left: 1px solid var(--border);
    color: var(--text) !important;
    min-width: 0;
}
.k-me:hover { text-decoration: none; }
.k-me img { width: 32px; height: 32px; border: 1px solid var(--border-strong); }
.k-me-text { line-height: 1.15; min-width: 0; }
.k-me-text b {
    display: block;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.k-me-text span { font-size: 10px; letter-spacing: 0.2em; color: var(--brass); text-transform: uppercase; }
.k-content { padding: 0 32px 64px; min-width: 0; }
.k-content > .main { padding: 0; }
.k-content > * { max-width: 1680px; margin-left: auto; margin-right: auto; }
.k-content > .maintenance-banner, .k-content > .followup-slot, .k-content > div:not(.main):first-child { margin-top: 18px; }
.k-mobile { display: none; }

/* Hinweisbanner: dunkel mit Messingkante statt farbiger Flächen */
.feedback-update, .followup-banner, .maintenance-banner {
    border-radius: 0;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.09), rgba(var(--accent-rgb), 0.02));
    border: 1px solid var(--border);
    border-left: 2px solid var(--brass);
}
.feedback-update:not(.copper) { border-left-color: var(--success); }

/* Menü (alle Bereiche): am Rechner als Leiste von links, am Handy von unten */
.sheet {
    background: linear-gradient(180deg, #080b11, #05070b);
    border: 1px solid var(--border-strong);
    border-radius: 0;
    color: var(--text);
    padding: 14px 12px calc(18px + env(safe-area-inset-bottom));
    gap: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.35) transparent;
}
.sheet::-webkit-scrollbar { width: 6px; }
.sheet::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.3); }
.sheet::-webkit-scrollbar-track { background: transparent; }
.sheet::backdrop { background: rgba(2, 3, 6, 0.72); backdrop-filter: blur(2px); }
.sheet .nav-search { margin: 2px 4px 10px; width: calc(100% - 8px); height: 38px; font-size: 13px; }

/* Überschriften der Gruppen */
.sheet .sheet-label, .sheet .nav-group-toggle.sheet-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 16px 10px 6px;
    background: none;
    border: 0;
    width: 100%;
    font: 600 10px var(--sans);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: default;
}
.sheet .nav-group-toggle.sheet-label { cursor: pointer; color: #b9b2a3; }
.sheet .nav-group-toggle.sheet-label:hover { color: var(--brass-hi); }
.sheet .nav-group-toggle .nav-chevron { font-size: 9px; color: var(--brass); }
.sheet .nav-zone {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 10px 0;
    padding: 0;
    border: 0;
    font: 600 10px var(--mono);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--brass);
}
.sheet .nav-zone::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.sheet .nav-group + .nav-group { border-top: 0; }

/* Einträge: ruhiger Text, Messing nur für den aktiven Bereich */
.sheet .sheet-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 8px 10px 8px 12px;
    border-radius: 0;
    color: #cfc8b9 !important;
    font: 500 13.5px var(--sans);
    letter-spacing: 0.01em;
    border-left: 2px solid transparent;
}
.sheet .sheet-item:hover { background: rgba(var(--accent-rgb), 0.06); color: var(--text) !important; text-decoration: none; }
.sheet .sheet-item.active {
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.16), transparent 85%);
    color: var(--brass-hi) !important;
    border-left-color: var(--brass);
}
.sheet .sheet-item .tab-icon { width: 20px; display: grid; place-items: center; color: var(--text-muted); filter: none; }
.sheet .sheet-item .k-icon { width: 18px; height: 18px; }
.sheet .sheet-item:hover .tab-icon, .sheet .sheet-item.active .tab-icon { color: var(--brass-hi); }
.sheet .sheet-item.danger { color: var(--danger) !important; }
.sheet .sheet-footer { border-top: 1px solid var(--border); margin: 14px 4px 0; padding: 14px 6px 0; }
.nav-link.active { background: var(--copper-soft); color: var(--brass-hi); }
@media (min-width: 861px) {
    .sheet {
        margin: 0 auto 0 256px;
        height: 100vh;
        max-height: 100vh;
        width: 320px;
        max-width: 320px;
        border-top: 0;
        border-bottom: 0;
        overflow-y: auto;
        padding-top: 18px;
    }
    .sheet-handle { display: none; }
}
@media (max-width: 860px) {
    .sheet { max-height: 86vh; overflow-y: auto; border-bottom: 0; border-top: 1px solid var(--brass); }
    .sheet-handle { background: var(--brass-lo); border-radius: 0; height: 3px; }
}

/* ---------- Seitenkopf ---------- */
.k-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px;
    padding: 32px 0 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
.k-section {
    font: 500 11px var(--mono);
    letter-spacing: 0.3em;
    color: var(--brass);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.k-section::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 1px;
    background: var(--brass);
    vertical-align: middle;
    margin-right: 12px;
}
.k-head h1 {
    margin: 0;
    font: 600 38px/1.05 var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.k-head h1::after { display: none; }
.k-head p { margin: 10px 0 0; color: var(--text-muted); max-width: 680px; }
.k-head-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.page-help { border-radius: 0; font-family: var(--sans); font-size: 12px; vertical-align: middle; margin-left: 12px; }

/* ---------- Bausteine aller Seiten ---------- */
.card, .k-panel {
    position: relative;
    background: linear-gradient(180deg, var(--panel-raised), var(--panel));
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    padding: 20px 22px;
    min-width: 0;
}

/* Messing-Ecken oben links und unten rechts */
.card::before, .k-panel::before, .card::after, .k-panel::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid var(--brass);
    pointer-events: none;
}
.card::before, .k-panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.card::after, .k-panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.k-panel > header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: -2px 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.k-panel > header h2 { margin: 0; font: 600 12.5px var(--display); letter-spacing: 0.22em; text-transform: uppercase; }
.k-panel > header .k-more { margin-left: auto; }
.k-num { font: 600 11px var(--mono); color: var(--brass); }
.k-more {
    font: 600 10px var(--sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brass) !important;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-block;
    margin-top: 12px;
}
.k-panel > header .k-more { margin-top: 0; }
.k-label { font: 600 10px var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-muted); }
.k-muted, .k-quiet { color: var(--text-muted); }
.k-quiet { font-size: 13px; margin: 4px 0; }
.k-stack { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.btn {
    border-radius: 0;
    border-color: var(--border-strong);
    background: transparent;
    color: var(--text);
    font: 600 11px var(--sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 10px 18px;
}
.btn:hover { border-color: var(--brass); background: rgba(var(--accent-rgb), 0.06); }
.btn.small { padding: 7px 12px; font-size: 10px; }
.btn.primary { background: linear-gradient(180deg, var(--accent-top), var(--accent-bottom)); border-color: var(--accent-border); color: var(--on-accent); }
.btn.primary:hover { background: linear-gradient(180deg, var(--accent-hi), var(--accent-bottom-hover)); }
.btn.ghost { border-color: transparent; color: var(--text-muted); }
.btn.ghost:hover { border-color: var(--border); color: var(--text); }
.btn.success-btn { background: transparent; border-color: rgba(147, 181, 139, 0.5); color: var(--success); }
.btn.danger-btn { background: var(--danger); border-color: var(--danger); color: #140806; }
.btn.discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.badge {
    border-radius: 0;
    background: transparent;
    border-color: var(--border-strong);
    color: var(--brass);
    font: 600 9.5px var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
}
.badge.success { color: var(--success); border-color: rgba(147, 181, 139, 0.45); background: transparent; }
.badge.danger { color: var(--danger); border-color: rgba(198, 107, 93, 0.45); background: transparent; }
.badge.blue, .badge.partner { color: #aab3c2; border-color: rgba(123, 134, 151, 0.5); background: transparent; }
.badge.copper { color: var(--brass-hi); border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.06); }
input:not([type]), input[type="text"], input[type="url"], input[type="time"], input[type="password"], input[type="number"], input[type="search"], input[type="datetime-local"], input[type="date"], select, textarea { border-radius: 0; background: #070a10; border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); }
.field label, .field > .label { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; }
input[type="checkbox"] { accent-color: var(--brass); }
.subtabs { border-bottom: 1px solid var(--border); gap: 0; }
.subtab {
    border-radius: 0;
    font: 600 10.5px var(--sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 11px 16px;
}
.subtab.active {
    color: var(--brass-hi);
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--brass);
    border-color: transparent;
}
.alert, .toast, dialog, .info-tile, .chip, .slot-chip, .achievement, .note, .hit, .followup-banner, .maintenance-banner, .update-banner, .nav-count, .search-results, .selected-member, .person img, .crew-ship, .chat-avatar { border-radius: 0; }
dialog { background: #0a0d13; border: 1px solid var(--border-strong); }
.dialog-head h2, dialog h2 { font: 600 15px var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.info-tile { background: var(--panel); border-color: var(--border); }
.info-icon, .achievement-icon { filter: grayscale(1) sepia(0.5) brightness(1.05); }
.stat .value, .info-tile strong, .version-number, .profile-balance { font-family: var(--display); color: var(--brass-hi); }
table th { font: 600 10px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.list > li, table td { border-color: var(--border); }
.slot-chip.active, .chip.active, .chip-toggle.active { background: var(--copper-soft); border-color: var(--brass); color: var(--brass-hi); }
.achievement-bar span { background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi)); }
.toggle input[type="checkbox"] { border-radius: 0; }
.route-progress { background: var(--brass); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* ---------- Kommandozentrale ---------- */
.k-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    min-height: 290px;
    border: 1px solid var(--border-strong);
    margin-bottom: 26px;
    overflow: hidden;
    background: #070a10;
}
.k-hero.empty { grid-template-columns: 1fr; min-height: 0; }
.k-hero-visual { position: relative; display: block; min-height: 240px; color: var(--text) !important; overflow: hidden; }
.k-hero-visual:hover { text-decoration: none; }
.k-hero-art {
    position: absolute;
    inset: 0;
    background: center / cover no-repeat;
    background-color: #080b11;
    transition: transform 0.6s;
}

/* Ohne Banner: Wappen groß und gedämpft */
.k-hero-art:not(.has-art) {
    background: url(/logo.png) 28% 38% / 280px no-repeat, radial-gradient(600px 300px at 30% 40%, #141b27, #06080c);
    opacity: 0.55;
}
.k-hero-visual:hover .k-hero-art { transform: scale(1.02); }
.k-hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 45%, #070a10 100%), linear-gradient(0deg, rgba(4, 6, 10, 0.9), transparent 60%);
}
.k-hero-caption { position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 1; }
.k-hero-caption .k-label { color: var(--brass); }
.k-hero-caption h2 { margin: 8px 0 4px; font: 600 30px/1.1 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.k-hero-caption p { margin: 0; color: #cfc8b8; max-width: 640px; }
.k-hero-brief { padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.k-hero.empty .k-hero-brief h2 { font: 600 24px var(--display); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
.k-countdown { display: flex; gap: 10px; }
.k-countdown > div {
    flex: 1;
    text-align: center;
    border: 1px solid var(--border);
    padding: 10px 0 8px;
    background: rgba(var(--accent-rgb), 0.04);
}
.k-countdown b { display: block; font: 600 34px/1 var(--display); color: var(--brass-hi); }
.k-countdown span { font: 9px var(--sans); letter-spacing: 0.28em; color: var(--text-muted); text-transform: uppercase; }
.k-countdown .k-live b { color: var(--success); }
.k-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 0; }
.k-facts dt { font: 600 10px var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); }
.k-facts dd { margin: 3px 0 0; font-weight: 600; }
.k-facts .k-wide { grid-column: 1 / -1; }
.k-meter { height: 3px; background: rgba(var(--accent-rgb), 0.14); margin-top: 8px; }
.k-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi)); }
.k-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.k-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 22px; align-items: start; }
.k-overview .k-divider { margin: 12px 0 0; }
.k-overview .grid.overview-cards { columns: 2 320px; }
.k-insignia {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.k-insignia img { width: 56px; height: 56px; object-fit: contain; }
.k-insignia b { display: block; font: 600 18px var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.k-insignia span { font-size: 11px; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.k-pips { display: flex; gap: 4px; margin-top: 6px; }
.k-pips i { width: 14px; height: 4px; background: rgba(var(--accent-rgb), 0.18); }
.k-pips i.on { background: var(--brass); }
.k-stats { list-style: none; margin: 0; padding: 0; }
.k-stats li { display: flex; align-items: baseline; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.k-stats li:last-child { border-bottom: 0; }
.k-stats li > span:first-child { flex: 1; }
.k-stats b { font: 600 24px/1 var(--display); color: var(--brass-hi); }
.k-stats small { color: var(--text-muted); font-size: 11px; }
.k-timeline { list-style: none; margin: 0; padding: 0; }
.k-timeline li {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}
.k-timeline li:last-child { border-bottom: 0; }
.k-timeline h3 { margin: 0 0 4px; font: 600 14px var(--display); text-transform: uppercase; color: var(--text); }
.k-tl-meta { color: var(--text-muted); font-size: 12px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.k-tl-side { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; text-align: right; }
.k-date {
    text-align: center;
    border: 1px solid var(--border-strong);
    padding: 6px 0;
    background: rgba(var(--accent-rgb), 0.04);
}
.k-date b { display: block; font: 600 26px/1 var(--display); color: var(--brass-hi); }
.k-date span { font: 9px var(--sans); letter-spacing: 0.2em; color: var(--text-muted); text-transform: uppercase; }
.k-date em { display: block; font: 11px var(--mono); color: var(--text); margin-top: 6px; font-style: normal; }
.k-slots { font: 12px var(--mono); color: var(--text-muted); white-space: nowrap; }
.k-slots b { color: var(--text); font-size: 16px; }
.k-comms { list-style: none; margin: 0; padding: 0; }
.k-comms li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.k-comms li:last-child { border-bottom: 0; }
.k-channel {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--brass) !important;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.k-channel::before { content: ""; width: 6px; height: 6px; background: var(--success); box-shadow: 0 0 8px var(--success); }
.k-person { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 2px 0; min-width: 0; }
.k-person img, .k-avatar { width: 20px; height: 20px; border: 1px solid var(--border); flex: none; }
.k-avatar { display: grid; place-items: center; font-size: 10px; color: var(--text-muted); background: #1a2130; }
.k-person span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-person em {
    color: var(--text-muted);
    font-style: normal;
    font-size: 12px;
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
}
.k-orders { list-style: none; margin: 0; padding: 0; }
.k-orders li { border-bottom: 1px solid var(--border); }
.k-orders li:last-child { border-bottom: 0; }
.k-orders a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--text) !important; }
.k-orders a:hover { text-decoration: none; color: var(--brass-hi) !important; }
.k-order-num { font: 600 18px var(--display); color: var(--brass-hi); width: 34px; flex: none; }
.k-order-text { flex: 1; min-width: 0; font-size: 13.5px; }
.k-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 34px 0 0;
    font: 600 10px var(--sans);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.k-divider::before, .k-divider::after { content: ""; height: 1px; background: var(--border); flex: 1; }
.k-divider::before { max-width: 26px; background: var(--brass); }

/* ---------- Einsatzplan ---------- */
.k-ops-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.k-filters {
    display: flex;
    border: 1px solid var(--border);
    margin-bottom: 20px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}
.k-filters button {
    padding: 9px 16px;
    font: 600 10px var(--sans);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: none;
    border: 0;
    border-right: 1px solid var(--border);
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    gap: 8px;
    align-items: center;
}
.k-filters button:last-child { border-right: 0; }
.k-filters button.on { color: var(--on-accent); background: var(--brass); }
.k-filter-count { font: 10px var(--mono); opacity: 0.75; }
.k-ops-grid > .k-stack { position: sticky; top: 74px; }
.k-week { margin-bottom: 24px; }
.k-week-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font: 600 10px var(--sans);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.k-week-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.k-op {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 84px 190px minmax(0, 1fr) auto;
    border: 1px solid var(--border);
    background: var(--panel);
    margin-bottom: 10px;
    min-height: 112px;
    transition: border-color 0.25s, background 0.25s;
}
.k-op.no-art { grid-template-columns: 84px minmax(0, 1fr) auto; }
.k-op-thumb:not(.has-art) { background: url(/logo.png) center / 70px no-repeat, #080b11; opacity: 0.5; }
.k-op.no-art .k-op-thumb { display: none; }
.k-op:hover { border-color: var(--border-strong); }
.k-op.focus-flash { border-color: var(--brass); }
.k-op > .k-date {
    border: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.k-op > .k-date b { font-size: 32px; }
.k-op-thumb { background: center / cover; position: relative; filter: saturate(0.75) contrast(1.05); }
.k-op-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, var(--panel)); }
.k-op-body { padding: 15px 20px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.k-op-body h3 { margin: 0; font: 600 18px var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.k-op-body h3 a { color: var(--text) !important; }
.k-op-body p { margin: 0; color: var(--text-muted); font-size: 13px; }
.k-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.k-op-side {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    min-width: 180px;
    border-left: 1px solid var(--border);
}
.k-op-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.k-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.k-cal-head b { font: 600 12px var(--display); letter-spacing: 0.2em; text-transform: uppercase; }
.k-cal-nav {
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.k-cal-nav:hover { border-color: var(--brass); }
.k-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font: 12px var(--mono); }
.k-cal-wd { font: 600 9px var(--sans); letter-spacing: 0.14em; color: var(--text-muted); padding-bottom: 4px; }
.k-cal-day { padding: 5px 0; border: 1px solid transparent; color: var(--text-muted); font: inherit; background: none; }
.k-cal-day.has { background: rgba(var(--accent-rgb), 0.2); color: var(--text); cursor: pointer; }
.k-cal-day.has:hover { border-color: var(--brass); }
.k-cal-day.mine { background: var(--brass); color: var(--on-accent); font-weight: 700; }
.k-cal-day.today { border-color: var(--brass); }
.k-cal-legend { display: flex; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--text-muted); }
.k-cal-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.k-cal-legend .has::before { background: rgba(var(--accent-rgb), 0.3); }
.k-cal-legend .mine::before { background: var(--brass); }

/* ---------- Einsatzbefehl ---------- */
.k-brief-hero { min-height: 260px; }
.k-brief-section .card::before, .k-brief-section .card::after { display: none; }
.k-brief {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
    margin-bottom: 22px;
}
.k-brief-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.k-brief-side { position: sticky; top: 74px; }
.k-brief-section {
    position: relative;
    border: 1px solid var(--border);
    background: var(--panel);
    padding: 20px 22px;
    min-width: 0;
}
.k-brief-section::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--brass); }
.k-brief-section > h2 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 14px;
    font: 600 13px var(--display);
    text-transform: uppercase;
}
.k-brief-text { white-space: pre-line; margin: 0; overflow-wrap: anywhere; color: #d8d1c2; }
.k-kv { display: grid; gap: 10px; margin: 0; }
.k-kv > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
}
.k-kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.k-kv dt {
    font: 600 10px var(--sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 2px;
    white-space: nowrap;
}
.k-kv dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.k-brief-section .event-slots { margin: 0; }

/* ---------- Personalakte ---------- */
.k-dossier { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.k-dossier-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.k-dossier-main > .profile-panel { display: flex; flex-direction: column; gap: 18px; }
.k-dossier-main > .profile-panel > * { margin: 0; }
.k-portrait { text-align: center; position: sticky; top: 80px; }
.k-frame {
    position: relative;
    width: 148px;
    height: 148px;
    margin: 6px auto 16px;
    padding: 6px;
    border: 1px solid var(--border-strong);
}
.k-frame::after { content: ""; position: absolute; inset: -7px; border: 1px solid var(--border); }
.k-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-portrait h2 { margin: 0; font: 600 20px var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.k-callsign { color: var(--text-muted); font: 12px var(--mono); margin-top: 4px; overflow-wrap: anywhere; }
.k-rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 16px 0 6px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.k-rank img { width: 60px; height: 60px; object-fit: contain; }
.k-rank b { font: 600 16px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-hi); }
.k-rank span { font: 600 10px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.k-portrait .k-kv { text-align: left; margin-top: 12px; }
.k-record {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border);
    background: var(--panel);
}
.k-record > * {
    padding: 16px 18px;
    border: 0;
    border-right: 1px solid var(--border);
    background: none;
    color: var(--text);
    text-align: left;
    font: inherit;
    min-width: 0;
}
.k-record > button { cursor: pointer; }
.k-record > button:hover { background: rgba(var(--accent-rgb), 0.05); }
.k-record > *:last-child { border-right: 0; }
.k-record b { display: block; font: 600 28px/1.1 var(--display); color: var(--brass-hi); margin: 6px 0 2px; }
.k-record span:not(.k-label) { font-size: 12px; color: var(--text-muted); }
.k-dossier-main > .subtabs { margin: 0; }
.k-career {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(110px, 1fr);
    overflow-x: auto;
    scrollbar-width: none;
}
.k-career li { border-top: 2px solid rgba(var(--accent-rgb), 0.18); min-width: 0; }
.k-career li.done { border-top-color: var(--brass-lo); }
.k-career li.now {
    border-top-color: var(--brass-hi);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.13), transparent);
}
.k-career li > button {
    display: block;
    width: 100%;
    padding: 14px 6px 10px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
}
.k-career li.sel > button { box-shadow: inset 0 -2px 0 var(--brass); }
.k-career li > button:hover b { color: var(--brass-hi); }
.k-career img { width: 34px; height: 34px; object-fit: contain; display: block; margin: 0 auto 6px; opacity: 0.55; }
.k-career li.done img, .k-career li.now img, .k-career li.sel img { opacity: 1; }
.k-career b {
    display: block;
    font: 600 12.5px var(--display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    transition: color 0.2s;
}
.k-career li:not(.done):not(.now) b { color: var(--text-muted); }
.k-career span { font: 10px var(--mono); color: var(--text-muted); }
.k-career-detail {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 4px 4px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
}
.k-career-detail b {
    display: block;
    font: 600 18px var(--display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brass-hi);
    margin: 4px 0 6px;
}
.k-career-detail p { margin: 0; color: #d0c9b9; white-space: pre-line; }
.k-career-emblem { width: 52px; height: 52px; object-fit: contain; flex: none; }
.k-career-emblem.empty {
    display: grid;
    place-items: center;
    border: 1px solid var(--border-strong);
    font: 600 20px var(--display);
    color: var(--brass);
}
.k-career-emblem.small { width: 34px; height: 34px; font-size: 14px; }
.k-career-extras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.k-career-extra ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.k-career-extra li { display: flex; gap: 12px; align-items: flex-start; }
.k-career-extra b { font: 600 13px var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.k-career-extra p { margin: 2px 0 0; color: var(--text-muted); font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
    .k-career-detail > * { animation: k-fade 0.3s ease-out; }
}
.k-service { list-style: none; margin: 0; padding: 0; }
.k-service li {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    align-items: center;
}
.k-service li:last-child { border-bottom: 0; }
.k-service time { font: 12px var(--mono); color: var(--text-muted); }
.k-service li > span { overflow-wrap: anywhere; }
.k-medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.k-medal {
    border: 1px solid var(--border);
    padding: 14px 8px;
    text-align: center;
    background: rgba(var(--accent-rgb), 0.03);
    min-width: 0;
}
.k-medal-icon {
    display: block;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 8px;
    filter: grayscale(1) sepia(0.6) brightness(1.1);
}
.k-medal b {
    display: block;
    font: 600 10.5px var(--sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.k-medal span { font: 10px var(--mono); color: var(--text-muted); }

/* ---------- Mittlere Breiten ---------- */
@media (max-width: 1280px) {
    .k-clock { display: none; }
}
@media (max-width: 1100px) {
    .k-ops-grid, .k-brief, .k-overview { grid-template-columns: minmax(0, 1fr); }
    .k-overview-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; }
    .k-ops-grid > .k-stack, .k-brief-side { position: static; }
    .k-op { grid-template-columns: 84px minmax(0, 1fr) auto; }
    .k-op-thumb { display: none; }
    .k-dossier { grid-template-columns: minmax(0, 1fr); }
    .k-portrait { position: static; }
    .k-search { width: auto; }
    .k-search span, .k-search kbd { display: none; }
}

/* ---------- Handy ---------- */
@media (max-width: 860px) {
    .k-app { grid-template-columns: minmax(0, 1fr); }
    .k-side { display: none; }
    .k-logout { display: none; }
    .k-command {
        padding: 0 16px;
        gap: 12px;
        height: 54px;
        padding-top: env(safe-area-inset-top);
        height: calc(54px + env(safe-area-inset-top));
    }
    .k-command-crest { display: block; }
    .k-command-crest img { width: 32px; height: 32px; display: block; }
    .k-crumb, .k-clock { display: none; }
    .k-org { font-size: 10px; letter-spacing: 0.26em; }
    .k-search { border: 0; padding: 0 6px; margin-left: auto; }
    .k-me { padding-left: 0; border-left: 0; }
    .k-me-text { display: none; }
    .k-content { padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
    .k-head { grid-template-columns: minmax(0, 1fr); padding: 22px 0 16px; margin-bottom: 18px; }
    .k-head h1 { font-size: 27px; }
    .k-head-actions { justify-content: flex-start; }
    .k-hero { grid-template-columns: minmax(0, 1fr); }
    .k-hero-visual { min-height: 190px; }
    .k-hero-caption { left: 18px; right: 18px; bottom: 16px; }
    .k-hero-caption h2 { font-size: 22px; }
    .k-hero-brief { padding: 18px; }
    .k-countdown b { font-size: 26px; }
    .k-overview .grid.overview-cards { columns: 1; }
    .k-head .k-head-actions .btn { flex: 0 1 auto; }
    .k-timeline li { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; }
    .k-tl-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
    .k-filters { width: 100%; }
    .k-op, .k-op.no-art { grid-template-columns: 68px minmax(0, 1fr); }
    .k-op > .k-date b { font-size: 26px; }
    .k-op-body { padding: 12px 14px; }
    .k-op-body h3 { font-size: 15px; }
    .k-op-side {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px solid var(--border);
        flex-direction: row;
        align-items: center;
        min-width: 0;
        padding: 10px 14px;
    }
    .k-record { grid-template-columns: 1fr 1fr; }
    .k-record > :nth-child(2) { border-right: 0; }
    .k-record > :nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .k-record b { font-size: 22px; }
    .k-service li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
    .k-service time { grid-column: 1 / -1; }
    .k-career { grid-auto-columns: 112px; }
    .card, .k-panel { padding: 16px; }
    .k-mobile {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        height: calc(66px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(4, 6, 10, 0.97);
        border-top: 1px solid var(--border-strong);
        align-items: center;
        /* eigene Ebene: bleibt auf iOS/Android auch beim Schwung-Scrollen unten */
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    /* Kein Gummiband-Effekt der ganzen Seite (zieht sonst die Leiste mit nach oben)
       und kein seitliches Verschieben. */
    html { overscroll-behavior-y: none; overflow-x: clip; }
    /* Sternenhimmel nur in Fenstergröße: übergroße feste Ebenen bringen
       mobile Browser beim Scrollen aus dem Tritt. */
    body::after { inset: 0; animation: none !important; }
    .k-mobile a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--text-muted) !important;
        font: 600 9px var(--sans);
        letter-spacing: 0.03em;
        text-transform: uppercase;
        min-width: 0;
    }
    .k-mobile a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .k-mobile a:hover { text-decoration: none; }
    .k-mobile a { position: relative; height: 100%; justify-content: center; }
    .k-mobile a.on { color: var(--brass-hi) !important; }
    .k-mobile-mark {
        position: absolute;
        top: -1px;
        left: 24%;
        right: 24%;
        height: 2px;
        background: var(--brass-hi);
        box-shadow: 0 0 10px rgba(var(--accent-hi-rgb), 0.6);
    }
    .k-mobile-crest { position: relative; background: none; border: 0; padding: 0; cursor: pointer; height: 100%; }
    .k-mobile-crest > span:first-child {
        position: relative;
        top: -12px;
        width: 56px;
        height: 56px;
        margin: 0 auto;
        display: grid;
        place-items: center;
        background: #070a10;
        border: 1px solid var(--brass);
        transform: rotate(45deg);
    }
    .k-mobile-crest img { width: 38px; height: 38px; transform: rotate(-45deg); }
    .k-mobile-crest .k-count { top: 0; right: calc(50% - 34px); }
}
@media (prefers-reduced-motion: reduce) {
    .k-hero-art { transition: none; }
}

/* Symbole im Menü einfarbig */
.alert { border-color: var(--border-strong); background: rgba(var(--accent-rgb), 0.05); }
.alert.error { border-color: rgba(198, 107, 93, 0.5); background: var(--danger-soft); }
.alert.success { border-color: rgba(147, 181, 139, 0.45); background: var(--success-soft); }

/* ======================================================================
   Bewegung – nur ohne „Bewegung reduzieren“.
   Seitenwechsel: Rahmen bleibt stehen, die Markierung in der Leiste gleitet
   zum neuen Bereich, der Inhalt wird von oben nach unten aufgedeckt.
   Einstieg: Titel wird aufgezogen, Tafeln steigen gestaffelt auf, Ecken
   zeichnen sich, Zahlen zählen hoch. Beim Scrollen gleiten weitere Tafeln
   herein (siehe commandEnter in kommando.js).
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* ---------- Seitenwechsel (View Transitions) ---------- */
    .k-side { view-transition-name: k-side; }
    .k-command { view-transition-name: k-command; }
    .k-mobile { view-transition-name: k-mobile; }
    .k-mobile-mark { view-transition-name: k-mobile-mark; }
    .k-gridbg { view-transition-name: k-gridbg; }
    ::view-transition-group(k-side), ::view-transition-group(k-command), ::view-transition-group(k-mobile), ::view-transition-group(k-gridbg), ::view-transition-new(k-side), ::view-transition-new(k-command), ::view-transition-new(k-mobile), ::view-transition-new(k-gridbg) { animation: none; }
    ::view-transition-old(k-side), ::view-transition-old(k-command), ::view-transition-old(k-mobile), ::view-transition-old(k-gridbg) { display: none; }
    /* Markierung gleitet von alter zu neuer Position */
    ::view-transition-group(k-mobile-mark) { animation-duration: 0.5s; animation-timing-function: var(--k-ease); }
    ::view-transition-old(k-mobile-mark) { animation: none; opacity: 0; }
    ::view-transition-new(k-mobile-mark) { animation: none; }
    :root::view-transition-old(page) { animation: k-page-out 0.22s ease-in both; }
    :root::view-transition-new(page) { animation: k-page-in 0.55s var(--k-ease) both; }
    :root[data-nav-dir="forward"]::view-transition-new(page) { animation-name: k-page-in-forward; }
    :root[data-nav-dir="back"]::view-transition-new(page) { animation-name: k-page-in-back; }
    /* Lichtkante läuft bei jedem Seitenwechsel einmal unter der Leiste entlang */
    .k-command::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 35%;
        height: 1px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, var(--brass-hi), transparent);
        opacity: 0;
        animation: k-sweep 1s var(--k-ease) 0.05s;
    }
    /* ---------- Einstieg ---------- */
    .main > * { animation: k-rise 0.65s var(--k-ease) backwards; animation-delay: calc(var(--k-i, 0) * 70ms); }
    .main > :nth-child(2) { --k-i: 1; }
    .main > :nth-child(3) { --k-i: 2; }
    .main > :nth-child(4) { --k-i: 3; }
    .main > :nth-child(5) { --k-i: 4; }
    .main > :nth-child(n+6) { --k-i: 5; }
    .main > .k-head { animation: none; }
    .main > .loading { animation: fade-in 0.3s 0.15s backwards; }
    /* Seitenkopf: Linie wächst, Titel wird aufgezogen */
    .k-head .k-section { animation: k-fade 0.5s ease-out backwards; }
    .k-head .k-section::before { animation: k-line 0.7s var(--k-ease) 0.1s backwards; }
    .k-head h1 { animation: k-wipe 0.9s var(--k-ease) 0.08s backwards; }
    .k-head p, .k-head-actions { animation: k-rise 0.6s var(--k-ease) 0.25s backwards; }
    /* Tafeln in Spalten gestaffelt */
    .k-stack > *, .k-dossier > *, .k-brief-main > *, .k-overview > * { animation: k-rise 0.65s var(--k-ease) backwards; animation-delay: calc(var(--k-i, 0) * 80ms + 120ms); }
    .k-stack > :nth-child(2), .k-brief-main > :nth-child(2), .k-overview > :nth-child(2), .k-dossier > :nth-child(2) { --k-i: 1; }
    .k-stack > :nth-child(3), .k-brief-main > :nth-child(3) { --k-i: 2; }
    .k-stack > :nth-child(4), .k-brief-main > :nth-child(4) { --k-i: 3; }
    .k-stack > :nth-child(n+5), .k-brief-main > :nth-child(n+5) { --k-i: 4; }
    /* Messing-Ecken zeichnen sich nach dem Aufsteigen */
    .main.entering .k-panel::before, .main.entering .k-panel::after, .main.entering .card::before, .main.entering .card::after, .k-reveal.k-in.k-panel::before, .k-reveal.k-in.k-panel::after, .k-reveal.k-in.card::before, .k-reveal.k-in.card::after { animation: k-corner 0.55s var(--k-ease) 0.45s backwards; }
    /* Zeilen und Listen */
    .main.entering .k-timeline > li, .main.entering .k-orders > li, .main.entering .k-service > li, .main.entering .k-comms > li { animation: k-slide 0.5s var(--k-ease) backwards; animation-delay: calc(var(--k-j, 0) * 55ms + 300ms); }
    .k-timeline > :nth-child(2), .k-orders > :nth-child(2), .k-service > :nth-child(2), .k-comms > :nth-child(2) { --k-j: 1; }
    .k-timeline > :nth-child(3), .k-orders > :nth-child(3), .k-service > :nth-child(3), .k-comms > :nth-child(3) { --k-j: 2; }
    .k-timeline > :nth-child(4), .k-orders > :nth-child(4), .k-service > :nth-child(4), .k-comms > :nth-child(4) { --k-j: 3; }
    .k-timeline > :nth-child(5), .k-orders > :nth-child(5), .k-service > :nth-child(5) { --k-j: 4; }
    .k-timeline > :nth-child(n+6), .k-orders > :nth-child(n+6), .k-service > :nth-child(n+6) { --k-j: 5; }
    .main.entering .k-op { animation: k-slide 0.55s var(--k-ease) backwards; }
    .k-oplist > .k-week { animation: k-fade 0.35s ease-out; }
    .main.entering .k-oplist > .k-week { animation: none; }
    .main.entering .k-week:nth-child(2) .k-op { animation-delay: 0.12s; }
    .main.entering .k-week:nth-child(n+3) .k-op { animation-delay: 0.2s; }
    .k-medal { animation: k-pop 0.45s var(--k-ease) backwards; animation-delay: calc(var(--k-j, 0) * 50ms + 350ms); }
    .k-medal:nth-child(2) { --k-j: 1; }
    .k-medal:nth-child(3) { --k-j: 2; }
    .k-medal:nth-child(4) { --k-j: 3; }
    .k-medal:nth-child(5) { --k-j: 4; }
    .k-medal:nth-child(n+6) { --k-j: 5; }
    .k-career li { animation: k-rise 0.5s var(--k-ease) backwards; animation-delay: calc(var(--k-j, 0) * 60ms + 250ms); }
    .k-career li:nth-child(2) { --k-j: 1; }
    .k-career li:nth-child(3) { --k-j: 2; }
    .k-career li:nth-child(4) { --k-j: 3; }
    .k-career li:nth-child(5) { --k-j: 4; }
    .k-career li:nth-child(n+6) { --k-j: 5; }
    .k-career li.now {
        animation: k-rise 0.5s var(--k-ease) backwards, k-glow 3.2s ease-in-out 1.2s infinite;
        animation-delay: calc(var(--k-j, 0) * 60ms + 250ms), 1.2s;
    }
    /* Kommandozentrale: Banner zoomt heran, Countdown rollt, Leiste füllt sich */
    .main.entering .k-hero-art { animation: k-zoom 1.6s var(--k-ease) backwards; }
    .main.entering .k-hero-caption { animation: k-rise 0.8s var(--k-ease) 0.3s backwards; }
    .main.entering .k-countdown b { animation: k-roll 0.7s var(--k-ease) backwards; animation-delay: calc(var(--k-j, 0) * 90ms + 350ms); }
    .k-countdown > :nth-child(2) b { --k-j: 1; }
    .k-countdown > :nth-child(3) b { --k-j: 2; }
    .k-countdown b.k-tick { animation: k-roll 0.6s var(--k-ease); }
    .k-countdown b { display: block; overflow: hidden; }
    .k-meter i { transform-origin: left; animation: k-fill 1.3s var(--k-ease) 0.5s backwards; }
    .k-pips i.on { animation: k-pip 0.4s ease-out backwards; animation-delay: calc(var(--k-j, 0) * 90ms + 500ms); }
    .k-pips i:nth-child(2) { --k-j: 1; }
    .k-pips i:nth-child(3) { --k-j: 2; }
    .k-pips i:nth-child(4) { --k-j: 3; }
    .k-pips i:nth-child(5) { --k-j: 4; }
    .k-pips i:nth-child(n+6) { --k-j: 5; }
    .k-channel::before { animation: k-blink 2.4s ease-in-out infinite; }
    .k-countdown .k-live b { animation: k-blink 2s ease-in-out infinite; }
    .k-dossier-main > .profile-panel:not([hidden]) { animation: k-fade 0.35s ease-out; }
    .k-cal-grid { animation: k-fade 0.3s ease-out; }
    /* ---------- Einblenden beim Scrollen ---------- */
    .k-reveal { opacity: 0; translate: 0 32px; }
    .k-reveal.k-in { opacity: 1; translate: 0 0; animation: k-rise 0.75s var(--k-ease) var(--k-delay, 0ms) both; }
    .k-reveal.k-in .k-timeline > li, .k-reveal.k-in .k-service > li { animation: k-slide 0.5s var(--k-ease) backwards; animation-delay: calc(var(--k-j, 0) * 55ms + 150ms); }
    /* ---------- Hover ---------- */
    .k-panel::before, .k-panel::after, .card::before, .card::after { transition: width 0.35s var(--k-ease), height 0.35s var(--k-ease), border-color 0.35s; }
    @media (hover: hover) {
        .k-panel:hover::before, .k-panel:hover::after, .card:hover::before, .card:hover::after { width: 26px; height: 26px; border-color: var(--brass-hi); }
        .grid > .card:hover, .template-card:hover {
            border-color: var(--border-strong);
            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
        }
        .k-op::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            height: 1px;
            width: 100%;
            z-index: 1;
            transform: scaleX(0);
            transform-origin: left;
            background: linear-gradient(90deg, var(--brass-hi), transparent);
            transition: transform 0.6s var(--k-ease);
        }
        .k-op:hover { border-color: var(--border-strong); background: #0d121a; }
        .k-op:hover::before { transform: scaleX(1); }
        .k-op-thumb { transition: scale 0.8s var(--k-ease), filter 0.4s; }
        .k-op:hover .k-op-thumb { scale: 1.06; filter: saturate(1) contrast(1.05); }
        .k-timeline li { transition: background 0.25s, translate 0.3s var(--k-ease); }
        .k-timeline li:hover { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), transparent); translate: 4px 0; }
        .k-orders a .k-order-num { transition: translate 0.3s var(--k-ease), color 0.2s; }
        .k-orders a:hover .k-order-num { translate: 4px 0; color: var(--brass); }
        .k-record > button { transition: background 0.25s; }
        .k-medal { transition: border-color 0.25s, translate 0.3s var(--k-ease); }
        .k-medal:hover { border-color: var(--border-strong); translate: 0 -3px; }
        /* Hauptknopf: Lichtkante gleitet beim Überfahren darüber */
        .btn.primary { position: relative; overflow: hidden; }
        .btn.primary::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            translate: -120% 0;
            background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
        }
        .btn.primary:hover::after { translate: 120% 0; transition: translate 0.7s var(--k-ease); }
        .btn.primary:hover:not(:disabled) { box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.3); }
    }
    .sheet[open] { animation: k-drawer 0.4s var(--k-ease); }
    @media (max-width: 860px) {
        .sheet[open] { animation: slide-up 0.32s var(--ease-out); }
    }
    .k-mobile-crest > span:first-child { transition: box-shadow 0.3s; }
    .k-mobile-crest:active > span:first-child { box-shadow: 0 0 18px rgba(var(--accent-hi-rgb), 0.45); }
}
@keyframes k-page-out { to { opacity: 0; translate: 0 -8px; } }
@keyframes k-page-in { from { opacity: 0; clip-path: inset(0 0 100% 0); translate: 0 14px; } 60% { opacity: 1; } to { clip-path: inset(0 0 -10% 0); } }
@keyframes k-page-in-forward { from { opacity: 0; clip-path: inset(0 0 100% 0); translate: 22px 0; } 60% { opacity: 1; } to { clip-path: inset(0 0 -10% 0); } }
@keyframes k-page-in-back { from { opacity: 0; clip-path: inset(0 0 100% 0); translate: -22px 0; } 60% { opacity: 1; } to { clip-path: inset(0 0 -10% 0); } }
@keyframes k-sweep { 0% { opacity: 0; translate: -100% 0; } 20% { opacity: 1; } 100% { opacity: 0; translate: 300% 0; } }
@keyframes k-rise { from { opacity: 0; translate: 0 18px; } }
@keyframes k-fade { from { opacity: 0; } }
@keyframes k-slide { from { opacity: 0; translate: -12px 0; } }
@keyframes k-pop { from { opacity: 0; scale: 0.9; } }
@keyframes k-line { from { width: 0; } }
@keyframes k-wipe { from { clip-path: inset(0 100% 0 0); letter-spacing: 0.2em; opacity: 0.4; } }
@keyframes k-corner { from { width: 0; height: 0; opacity: 0; } }
@keyframes k-zoom { from { scale: 1.12; opacity: 0; } }
@keyframes k-roll { from { translate: 0 70%; opacity: 0; filter: blur(2px); } }
@keyframes k-fill { from { scale: 0 1; } }
@keyframes k-pip { from { opacity: 0; scale: 0.4 1; } }
@keyframes k-blink { 50% { opacity: 0.35; } }
@keyframes k-glow { 50% { box-shadow: inset 0 2px 0 var(--brass-hi), 0 -6px 18px -8px rgba(var(--accent-hi-rgb), 0.6); } }
@keyframes k-drawer { from { translate: -30px 0; opacity: 0; } }

/* ---------- Flotte ---------- */
.ship-art {
    border-radius: 0;
    background: radial-gradient(120% 90% at 50% 100%, rgba(var(--accent-rgb), 0.12), transparent 70%), linear-gradient(180deg, #10141b, #070a10);
}
.ship-art::after { background: linear-gradient(180deg, transparent 55%, rgba(4, 6, 10, 0.8)); }
.ship-art-name { font-family: var(--display); color: rgba(var(--accent-rgb), 0.1); }
.fleet-model, .hangar-ship { border-radius: 0; background: linear-gradient(180deg, var(--panel-raised), var(--panel)); }
.fleet-model::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    z-index: 2;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--brass-hi), transparent);
    transition: transform 0.6s var(--k-ease);
}
.fleet-model:hover::before { transform: scaleX(1); }
.fleet-maker { font: 600 10px var(--sans); letter-spacing: 0.24em; color: var(--brass); }
.fleet-name { font: 600 16px var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.fleet-count { border-radius: 0; font: 600 13px var(--display); color: var(--brass-hi); background: rgba(4, 6, 10, 0.85); }
.owner-stack img, .owner-initial { border-radius: 0; border-color: #0b0f16; }
.hangar-text strong { font: 600 14px var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.ship-dialog .ship-art { border-radius: 0; }
@media (prefers-reduced-motion: no-preference) {
    .main.entering .fleet-grid > li, .main.entering .hangar > li {
        animation: k-rise 0.55s var(--k-ease, ease-out) backwards;
        animation-delay: calc(var(--k-j, 0) * 45ms + 200ms);
    }
    .fleet-grid > li:nth-child(2), .hangar > li:nth-child(2) { --k-j: 1; }
    .fleet-grid > li:nth-child(3), .hangar > li:nth-child(3) { --k-j: 2; }
    .fleet-grid > li:nth-child(4), .hangar > li:nth-child(4) { --k-j: 3; }
    .fleet-grid > li:nth-child(5) { --k-j: 4; }
    .fleet-grid > li:nth-child(6) { --k-j: 5; }
    .fleet-grid > li:nth-child(n+7) { --k-j: 6; }
}

/* ---------- Hinweis auf neue Version ---------- */
.update-banner { border-radius: 0; border-color: var(--border-strong); background: linear-gradient(160deg, #10141b, #070a10); }
.update-banner::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--brass);
    border-left: 0;
    border-top: 0;
}
.update-banner::before { background: linear-gradient(90deg, transparent, var(--brass-hi), transparent); background-size: 200% 100%; }
.update-eyebrow { font: 600 10px var(--mono); letter-spacing: 0.28em; color: var(--brass); }
.update-text { font: 600 16px var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.update-close { border-radius: 0; }
@media (min-width: 861px) {
    .update-banner { bottom: 26px; right: 26px; }
}

/* Voice-Kanal eines Events im Einsatzplan */
.k-voice-link { align-self: flex-start; font-size: 12px; color: var(--brass) !important; letter-spacing: 0.04em; }

/* ======================================================================
   Anmeldeseite
   ====================================================================== */
.k-login {
    position: relative; min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto auto; gap: 28px;
    padding: 28px clamp(20px, 5vw, 72px) 28px; overflow: hidden;
}
.kl-frame { position: fixed; inset: 16px; pointer-events: none; z-index: 0; border: 1px solid rgba(var(--accent-rgb), 0.1); }
.kl-frame::before, .kl-frame::after { content: ""; position: absolute; width: 70px; height: 70px; border: 2px solid var(--brass); }
.kl-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.kl-frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.k-login > :not(.k-gridbg):not(.kl-frame) { position: relative; z-index: 1; }
.kl-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kl-brand { display: flex; align-items: center; gap: 12px; }
.kl-brand img { width: 40px; height: 40px; }
.kl-brand small { display: block; font: 600 10px var(--sans); letter-spacing: 0.32em; color: var(--brass); text-transform: uppercase; }
.kl-brand b { display: block; font: 600 15px var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.kl-rsi { font: 600 10.5px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted) !important; }
.kl-rsi:hover { color: var(--brass-hi) !important; text-decoration: none; }
.kl-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; max-width: 1400px; width: 100%; margin: 0 auto; }
.kl-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.kl-copy h1 { margin: 0; font: 700 clamp(56px, 9vw, 128px)/0.92 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.kl-copy h1 span { display: block; color: var(--brass-hi); }
.kl-motto { margin: 0; font: 500 18px var(--display); letter-spacing: 0.08em; color: var(--brass); text-transform: uppercase; }
.kl-lead { margin: 0; max-width: 520px; color: #cfc8b9; font-size: 16px; }
.kl-copy .alert { max-width: 520px; }
.kl-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.kl-login-btn { padding: 16px 30px !important; font-size: 12px !important; }
.kl-note { color: var(--text-muted); font-size: 12px; max-width: 260px; }
.kl-visual { display: flex; flex-direction: column; align-items: center; gap: 26px; min-width: 0; }
.kl-crest { position: relative; width: min(340px, 70vw); aspect-ratio: 1; display: grid; place-items: center; }
.kl-crest img { width: 78%; filter: drop-shadow(0 0 40px rgba(var(--accent-rgb), 0.25)); }
/* Lichtring und Zielkreuz um das Wappen */
.kl-crest::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 14%, rgba(var(--accent-hi-rgb), 0.8) 22%, transparent 32%, transparent 64%, rgba(var(--accent-rgb), 0.5) 74%, transparent 84%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}
/* Kreisende Elemente: Skalenring (gegenläufig), Bahn mit Leuchtpunkt, Bogensegmente */
.kl-orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.kl-o1 {
    inset: -20px;
    background: repeating-conic-gradient(from 0deg, rgba(var(--accent-rgb), 0.55) 0 0.4deg, transparent 0.4deg 6deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
}
.kl-o1::before, .kl-o1::after {
    content: ""; position: absolute; left: 50%; width: 2px; height: 16px; margin-left: -1px; background: var(--brass-hi);
}
.kl-o1::before { top: -4px; }
.kl-o1::after { bottom: -4px; }
.kl-o2 { inset: 9%; border: 1px dashed rgba(var(--accent-rgb), 0.28); }
.kl-o2::before {
    content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
    background: var(--brass-hi); box-shadow: 0 0 12px 2px rgba(var(--accent-hi-rgb), 0.7); rotate: 45deg;
}
.kl-o3 {
    inset: 4%;
    background: conic-gradient(from 30deg, rgba(var(--accent-rgb), 0.7) 0 10%, transparent 10% 50%, rgba(var(--accent-rgb), 0.7) 50% 54%, transparent 54%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.kl-intel { width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px; }
.kl-next {
    position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 16px;
    border: 1px solid var(--border); background: linear-gradient(180deg, var(--panel-raised), var(--panel));
}
.kl-next::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--brass); }
.kl-next .k-date { width: 64px; flex: none; }
.kl-next b { display: block; font: 600 15px var(--display); letter-spacing: 0.06em; text-transform: uppercase; margin: 3px 0 2px; }
.kl-time { color: var(--text-muted); font-size: 12px; }
.kl-next.live { border-color: rgba(147, 181, 139, 0.45); }
.kl-next.live::before { background: var(--success); }
.kl-next.live .k-label { color: var(--success); }
.kl-live-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--success); }
.kl-live-badge i { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(147, 181, 139, 0.6); }
.kl-live-badge span { font: 600 10px var(--sans); letter-spacing: 0.24em; text-transform: uppercase; }
.kl-features { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 1400px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); background: rgba(11, 15, 22, 0.75); }
.kl-features li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-right: 1px solid var(--border); min-width: 0; }
.kl-features li:last-child { border-right: 0; }
.kl-features .k-icon { width: 22px; height: 22px; color: var(--brass); margin-top: 2px; }
.kl-features b { display: block; font: 600 13px var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.kl-features span { color: var(--text-muted); font-size: 13px; }
.k-login .login-footer { text-align: center; margin: 0; }
.k-login-simple { grid-template-rows: 1fr; place-items: center; }
.k-login-simple .kl-copy { align-items: center; text-align: center; }
.k-login-simple .kl-copy h1 { font-size: clamp(34px, 6vw, 56px); }
.kl-small-crest { width: 72px; height: 72px; }
@media (max-width: 960px) {
    .kl-main { grid-template-columns: minmax(0, 1fr); }
    .kl-visual { order: -1; }
    .kl-crest { width: min(220px, 56vw); }
    .kl-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kl-features li:nth-child(2) { border-right: 0; }
    .kl-features li:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
/* Handy: alles auf einen Bildschirm, ohne Scrollen – Zusatzinfos entfallen. */
@media (max-width: 640px) {
    .k-login { height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 20px 22px 16px; }
    .kl-frame { inset: 8px; }
    .kl-frame::before, .kl-frame::after { width: 44px; height: 44px; }
    .kl-rsi, .kl-features, .kl-lead, .kl-note, .kl-copy > .k-section { display: none !important; }
    /* Infos nur, wenn gerade eine öffentliche Operation läuft – dann kompakt */
    .kl-intel:not(:has(.kl-next.live)) { display: none !important; }
    .kl-intel { order: 3; width: 100%; }
    .kl-next { padding: 10px 12px; gap: 12px; text-align: left; }
    .kl-next .k-date { width: 52px; }
    .kl-next b { font-size: 13px; }
    .kl-guests { display: none; }
    .kl-main { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 4dvh, 40px); min-height: 0; }
    .kl-visual { order: -1; }
    .kl-crest { width: min(58vw, 30dvh); }
    .kl-o1 { inset: -12px; }
    .kl-copy { align-items: center; text-align: center; gap: 12px; }
    .kl-copy h1 { font-size: clamp(44px, 15vw, 64px); }
    .kl-copy h1 span { display: inline; margin-left: 0.25em; }
    .kl-motto { font-size: 14px; }
    .kl-actions { width: 100%; flex-direction: column; align-items: stretch; margin-top: 4px; }
    .kl-login-btn { justify-content: center; }
    .k-login .login-footer { font-size: 12px; }
    .k-login .login-footer .support-brand { display: none; }
    .k-login-simple { height: auto; min-height: 100dvh; grid-template-rows: 1fr; }
}
@media (max-width: 640px) and (max-height: 600px) {
    .kl-crest { width: min(50vw, 26dvh); }
    .kl-copy h1 { font-size: 40px; }
    .kl-motto { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .kl-crest::before { animation: kl-spin 18s linear infinite; }
    .kl-o1 { animation: kl-spin 60s linear infinite reverse; }
    .kl-o2 { animation: kl-spin 11s linear infinite; }
    .kl-o3 { animation: kl-spin 26s linear infinite reverse; }
    .kl-crest img { animation: kl-float 7s ease-in-out infinite; }
    .kl-live-badge i { animation: kl-pulse 1.8s ease-out infinite; }
    .k-login .kl-copy > *, .k-login .kl-visual, .k-login .kl-features li, .k-login .kl-top { animation: k-rise 0.8s var(--k-ease) backwards; }
    .k-login .kl-copy > :nth-child(2) { animation-delay: 0.08s; }
    .k-login .kl-copy > :nth-child(3) { animation-delay: 0.16s; }
    .k-login .kl-copy > :nth-child(4) { animation-delay: 0.24s; }
    .k-login .kl-copy > :nth-child(n+5) { animation-delay: 0.32s; }
    .k-login .kl-visual { animation-duration: 1.2s; animation-delay: 0.1s; }
    .k-login .kl-features li:nth-child(2) { animation-delay: 0.45s; }
    .k-login .kl-features li:nth-child(3) { animation-delay: 0.52s; }
    .k-login .kl-features li:nth-child(4) { animation-delay: 0.59s; }
    .k-login .kl-features li:first-child { animation-delay: 0.38s; }
    .kl-copy h1 { animation: k-wipe 1s var(--k-ease) 0.1s backwards !important; }
}
@keyframes kl-spin { to { rotate: 360deg; } }
@keyframes kl-float { 50% { translate: 0 -8px; } }
@keyframes kl-pulse { to { box-shadow: 0 0 0 10px rgba(147, 181, 139, 0); } }

/* ======================================================================
   Diplomatie: Partnerseiten in den Farben der Orgs
   ====================================================================== */
/* Wappen/Logo einer Org (ohne hochgeladenes Logo: Schild in ihren Farben) */
.org-logo { display: grid; place-items: center; flex: none; }
.org-logo svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); }
.org-logo.has-img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); }

/* ---------- Übersicht ---------- */
.d-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); background: var(--panel); margin-bottom: 26px; }
.d-band > div { padding: 16px 20px; border-right: 1px solid var(--border); min-width: 0; }
.d-band > div:last-child { border-right: 0; }
.d-band b { display: block; font: 600 30px/1.1 var(--display); color: var(--brass-hi); margin-top: 4px; }
.d-band > div > span:last-child { color: var(--text-muted); font-size: 12px; }
.d-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.d-main { min-width: 0; }
.d-group-title { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; font: 600 11px var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-muted); }
.d-group-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.d-group-title b { font: 600 11px var(--mono); color: var(--brass); }
.d-allies { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); grid-auto-rows: 1fr; gap: 18px; margin-bottom: 30px; }
.d-ally {
    position: relative; display: flex; flex-direction: column; min-height: 372px; overflow: hidden; color: #fff !important;
    border: 1px solid color-mix(in srgb, var(--c3-ink) 45%, transparent);
    background: linear-gradient(160deg, var(--c1-deep) 0%, var(--c2-deep) 70%);
    transition: border-color 0.25s, translate 0.25s var(--k-ease);
}
a.d-ally:hover { text-decoration: none; border-color: var(--c3-ink); translate: 0 -3px; }
.d-ally.has-art::before { content: ""; position: absolute; inset: 0; background: var(--img) center var(--img-y, 50%) / cover; opacity: 0.38; mix-blend-mode: luminosity; }
.d-ally::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 14px), linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent 60%);
}
.d-ally > * { position: relative; z-index: 1; }
.d-ally-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 18px 18px 0; }
.d-ally-cat { font: 600 9.5px var(--sans); letter-spacing: 0.26em; text-transform: uppercase; padding: 4px 8px; background: rgba(0, 0, 0, 0.55); border: 1px solid var(--c3-ink); color: var(--c3-ink); }
.d-ally-since { font: 600 9.5px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: #f1ead8; padding: 4px 8px; background: rgba(0, 0, 0, 0.45); white-space: nowrap; }
.d-cta { text-align: center; }
.d-cta p { color: var(--text-muted); font-size: 13px; margin: 0 0 14px; }
.d-ally .org-logo { width: 96px; height: 108px; margin: 6px auto 0; }
.d-ally-sid { position: absolute !important; right: -10px; top: 40px; z-index: 0 !important; font: 700 110px/1 var(--display); color: rgba(255, 255, 255, 0.06); letter-spacing: 0.02em; white-space: nowrap; }
.d-ally-body { margin-top: auto; padding: 16px 18px 0; }
.d-ally-body h3 { margin: 0; font: 700 22px var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.d-ally-body h3 span { color: var(--c3-ink); font-size: 15px; margin-left: 6px; }
.d-ally-body p { margin: 4px 0 10px; color: rgba(255, 255, 255, 0.78); font-size: 13px; }
.d-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.d-tags span { font: 600 9.5px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 8px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.18); color: #f1ead8; }
.d-ally-foot { display: flex; margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.35); }
.d-ally-foot div { flex: 1; padding: 10px 14px; border-right: 1px solid rgba(255, 255, 255, 0.1); min-width: 0; }
.d-ally-foot div:last-child { border-right: 0; }
.d-ally-foot b { display: block; font: 600 15px var(--display); color: var(--c3-ink); white-space: nowrap; }
.d-ally-foot span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.d-ally-stripe { position: absolute !important; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--c3-ink), var(--c1)); z-index: 2 !important; }
.d-ops { list-style: none; margin: 0; padding: 0; }
.d-ops li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.d-ops li:last-child { border-bottom: 0; }
.d-ops a b { display: block; font: 600 13px var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.d-ops-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; color: var(--text-muted); font-size: 12px; }
.d-logos { display: inline-flex; gap: 4px; }
.d-support .org-logo { width: 30px; height: 34px; }
.d-support .k-order-text { display: flex; flex-direction: column; min-width: 0; }
.d-support .k-order-text b { font-weight: 600; }
.d-support .k-order-text span { color: var(--text-muted); font-size: 12px; }
.d-logos .org-logo { width: 20px; height: 22px; }

/* ---------- Seite einer Org ---------- */
.o-hero { position: relative; min-height: 340px; display: flex; align-items: flex-end; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c3-ink) 40%, transparent);
    background: linear-gradient(135deg, var(--c1-deep), var(--c2-deep)); }
.o-hero-img { position: absolute; inset: 0; background: var(--img) center var(--img-y, 50%) / cover; }
.o-hero::before { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c2-deep) 96%, transparent) 0%, color-mix(in srgb, var(--c1-deep) 60%, transparent) 55%, transparent 100%),
        linear-gradient(0deg, rgba(4, 6, 10, 0.92), transparent 55%); }
.o-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 16px); }
/* Fahne: senkrechte Farbbahnen wie eine Flagge, Bild nur dezent */
.o-style-flag { background: linear-gradient(90deg, var(--c2-deep) 0 34%, var(--c1-deep) 34% 78%, var(--c3) 78% 82%, var(--c2-deep) 82%); }
.o-style-flag .o-hero-img { opacity: 0.22; mix-blend-mode: luminosity; }
.o-style-flag::before { background: linear-gradient(0deg, rgba(4, 6, 10, 0.88), transparent 70%); }
/* Schlicht: ruhige Fläche mit Kante in der Akzentfarbe */
.o-style-plain { min-height: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 16%, var(--panel-raised)), var(--panel)); border-left: 4px solid var(--c3-ink); }
.o-style-plain::before { display: none; }
.o-hero-inner { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 28px; padding: 30px 32px; width: 100%; }
.o-hero .org-logo { width: 150px; height: 168px; }
.o-style-plain .org-logo { width: 110px; height: 124px; }
.o-hero-text { flex: 1; min-width: 0; }
.o-hero-text { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 2px 16px rgba(0, 0, 0, 0.55); }
.o-hero-text .k-label { color: var(--c3-ink); }
.o-hero-text h1 { margin: 8px 0 4px; font: 700 48px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.o-hero-text h1 span { color: var(--c3-ink); font-size: 0.54em; margin-left: 10px; vertical-align: middle; }
.o-tagline { margin: 0 0 14px; font: 500 16px var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.o-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.o-chips span { font: 600 10px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 10px; background: rgba(0, 0, 0, 0.45); border: 1px solid color-mix(in srgb, var(--c3-ink) 55%, transparent); color: #f1ead8; }
.o-actions { display: flex; flex-direction: column; gap: 8px; align-self: center; }
.o-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; font: 600 11px var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
    border: 1px solid var(--c3-ink); color: #fff !important; background: rgba(0, 0, 0, 0.35); white-space: nowrap; cursor: pointer; transition: background 0.2s, filter 0.2s; }
.o-btn:hover { text-decoration: none; background: color-mix(in srgb, var(--c3-ink) 22%, rgba(0, 0, 0, 0.35)); }
.o-btn.main { background: var(--c3-ink); color: var(--c3-text, #10131a) !important; }
.o-btn.main:hover { filter: brightness(1.08); background: var(--c3-ink); }
.o-palette { display: flex; height: 6px; margin-bottom: 26px; }
.o-palette i { flex: 1; }
.o-palette i:nth-child(1) { background: var(--c1); }
.o-palette i:nth-child(2) { background: var(--c2); }
.o-palette i:nth-child(3) { background: var(--c3); flex: 0.4; }
.o-nav { display: flex; border-bottom: 1px solid var(--border); margin: -14px 0 24px; overflow-x: auto; scrollbar-width: none; }
.o-nav button { background: none; border: 0; padding: 12px 18px; font: 600 10.5px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.o-nav button:hover { color: var(--text); }
.o-nav button.on { color: #fff; box-shadow: inset 0 -2px 0 var(--c3-ink); }
.o-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
/* Tafeln in den Farben der Org: Ecken und Nummern in ihrer Akzentfarbe */
.o-page .k-panel { background: linear-gradient(180deg, color-mix(in srgb, var(--c1-deep) 30%, var(--panel-raised)), var(--panel)); scroll-margin-top: 80px; }
.o-page .k-panel::before, .o-page .k-panel::after { border-color: var(--c3-ink); }
.o-page .k-num { color: var(--c3-ink); }
.o-page .k-panel a { color: var(--c3-ink); }
.o-about { color: #d6cfbf; }
.o-about > :first-child { margin-top: 0; }
.o-focus { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.o-focus > div { padding: 14px; border: 1px solid color-mix(in srgb, var(--c1) 45%, var(--border)); background: color-mix(in srgb, var(--c1-deep) 35%, transparent); }
.o-focus .k-icon { width: 22px; height: 22px; color: var(--c3-ink); }
.o-focus b { display: block; font: 600 13px var(--display); letter-spacing: 0.1em; text-transform: uppercase; margin: 8px 0 2px; }
.o-focus span { color: var(--text-muted); font-size: 12px; }
.o-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.o-gallery.n1 { grid-template-columns: 1fr; }
.o-gallery.n2 { grid-template-columns: 1fr 1fr; }
.o-gallery.n3 { grid-template-columns: 2fr 1fr; }
.o-shot { aspect-ratio: 4 / 3; padding: 0; border: 1px solid var(--border); background: var(--img) center / cover; cursor: zoom-in; filter: saturate(0.85); transition: filter 0.25s, border-color 0.25s; }
.o-shot:hover { filter: saturate(1.05); border-color: var(--c3-ink); }
.o-gallery:not(.n1):not(.n2) .o-shot:first-child { grid-row: span 2; aspect-ratio: auto; }
.o-lightbox { display: grid; gap: 12px; }
.o-lightbox-img { width: 100%; max-height: 70vh; object-fit: contain; background: #000; }
.o-coop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); margin-bottom: 14px; }
.o-coop > div { padding: 14px 16px; border-right: 1px solid var(--border); min-width: 0; }
.o-coop > div:last-child { border-right: 0; }
.o-coop b { display: block; font: 600 26px var(--display); color: var(--c3-ink); }
.o-coop span:last-child { font-size: 12px; color: var(--text-muted); }
.o-coop-actions { display: flex; gap: 8px; }
.o-support { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.o-contact { display: flex; align-items: center; gap: 12px; }
.o-contact .av { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--c1-deep); font: 600 16px var(--display); object-fit: cover; }
.o-contact b { display: block; }
.o-contact-note { color: var(--text-muted); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.o-links { list-style: none; margin: 0; padding: 0; }
.o-links li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.o-links li:last-child { border-bottom: 0; }
.o-links a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-members { display: flex; flex-wrap: wrap; gap: 6px; }
.o-members > * { width: 34px; height: 34px; display: grid; place-items: center; background: var(--c1-deep); border: 1px solid color-mix(in srgb, var(--c3-ink) 35%, transparent); font: 600 12px var(--display); object-fit: cover; }
.o-recruit { margin: 0; border-left: 3px solid var(--c3-ink); padding-left: 14px; color: #d6cfbf; font-size: 13px; white-space: pre-wrap; }

/* ---------- Partnerseite gestalten ---------- */
.e-grid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 22px; align-items: start; }
.e-form { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.e-form .field + .field { margin-top: 14px; }
.e-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.e-row input[type="text"] { flex: 1; min-width: 140px; }
.e-upload { border: 1px dashed var(--border-strong); padding: 14px; display: flex; gap: 14px; align-items: center; }
.e-upload > i { width: 120px; height: 48px; flex: none; display: block; background: var(--img) center var(--img-y, 50%) / cover; border: 1px solid var(--border); }
.e-upload > i.empty { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 10px); }
.e-upload b { font-size: 13px; }
.e-field-y input { width: 100%; accent-color: var(--brass); }
.e-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.e-swatches label { border: 1px solid var(--border); padding: 8px; display: flex; align-items: center; gap: 10px; font: 12px var(--mono); cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-swatches input { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.2); background: none; cursor: pointer; flex: none; }
.e-contrast.ok { color: var(--success); }
.e-contrast.warn { color: var(--copper, #d9a35b); }
.e-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.e-style { border: 1px solid var(--border); background: none; padding: 10px; text-align: center; font: 600 10px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; }
.e-style.on { border-color: var(--brass); color: var(--brass-hi); background: rgba(var(--accent-rgb), 0.08); }
.e-style i { display: block; height: 46px; margin-bottom: 8px; }
.e-style-banner i { background: linear-gradient(160deg, var(--c1), var(--c2)); }
.e-style-flag i { background: linear-gradient(90deg, var(--c2) 0 34%, var(--c1) 34% 78%, var(--c3) 78% 82%, var(--c2) 82%); }
.e-style-plain i { background: #0b0f16; border-left: 4px solid var(--c3); }
.e-sections { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); }
.e-sections li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.e-sections li:last-child { border-bottom: 0; }
.e-sections li.off .e-sec-name { color: var(--text-muted); }
.e-sec-name small { margin-left: 8px; color: var(--text-muted); font-size: 11px; }
.e-move { display: flex; gap: 2px; }
.icon-btn { width: 28px; height: 28px; display: inline-grid; place-items: center; background: none; border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 14px; line-height: 1; flex: none; }
.icon-btn:hover:not(:disabled) { border-color: var(--brass); color: var(--brass-hi); }
.icon-btn:disabled { opacity: 0.3; cursor: default; }
.switch { position: relative; margin-left: auto; width: 38px; height: 20px; flex: none; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; background: #2a2f38; transition: background 0.2s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; background: #6b6f78; transition: translate 0.2s, background 0.2s; }
.switch input:checked + span { background: var(--brass); }
.switch input:checked + span::after { translate: 18px 0; background: var(--on-accent); }
.switch input:focus-visible + span { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
.e-focus { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.e-focus-row { display: grid; grid-template-columns: 28px 120px minmax(0, 1fr) 28px; gap: 6px; align-items: center; width: 100%; }
.e-focus-row input[type="text"]:last-of-type { grid-column: 2 / 4; }
.e-focus-row .icon-btn { grid-column: 4; grid-row: 1; }
.e-focus-icon .k-icon { width: 22px; height: 22px; color: var(--brass); }
.e-tag { display: inline-flex; align-items: center; gap: 6px; }
.e-tag button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; font-size: 13px; line-height: 1; }
.e-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.e-shot { position: relative; aspect-ratio: 4 / 3; background: var(--img) center / cover; border: 1px solid var(--border); }
.e-shot .icon-btn { position: absolute; top: 4px; right: 4px; background: rgba(0, 0, 0, 0.7); }
.e-shot.add { border-style: dashed; color: var(--text-muted); font: 600 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; background: none; }
.e-shot.add:hover { border-color: var(--brass); color: var(--brass-hi); }
.e-preview { position: sticky; top: 74px; min-width: 0; }
.e-preview .frame { border: 1px solid var(--border-strong); padding: 14px; background: #05070b; }
.e-preview .frame > .k-label { display: block; margin-bottom: 10px; }
.e-mini { pointer-events: none; }
.e-mini .o-hero { min-height: 220px; }
.e-mini .o-style-plain { min-height: 0; }
.e-mini .o-hero-inner { padding: 20px; gap: 18px; }
.e-mini .o-hero-text h1 { font-size: 28px; }
.e-mini .o-hero .org-logo { width: 90px; height: 100px; }
.e-mini .o-grid { grid-template-columns: minmax(0, 1fr); }
.e-mini .o-grid > .k-stack:last-child { display: none; }
.e-mini .o-palette { margin-bottom: 14px; }
.e-card-label { display: block; margin: 18px 0 10px; }
.e-card { max-width: 320px; pointer-events: none; }
.e-card .d-ally { min-height: 0; }
.e-card .d-ally .org-logo { width: 70px; height: 78px; }
.e-actions { position: sticky; bottom: 0; z-index: 5; margin-top: 22px; padding: 12px 0; background: linear-gradient(0deg, var(--bg) 70%, transparent); }

@media (max-width: 1100px) {
    .d-layout, .o-grid, .e-grid { grid-template-columns: minmax(0, 1fr); }
    .d-band { grid-template-columns: 1fr 1fr; }
    .d-band > div:nth-child(2) { border-right: 0; }
    .d-band > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .e-preview { position: static; }
}
@media (max-width: 860px) {
    .o-hero { min-height: 0; }
    .o-hero-inner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
    .o-hero .org-logo { width: 84px; height: 94px; }
    .o-hero-text h1 { font-size: 30px; }
    .o-actions { flex-direction: row; flex-wrap: wrap; align-self: stretch; }
    .o-btn { flex: 1 1 auto; }
    .o-coop { grid-template-columns: 1fr; }
    .o-coop > div { border-right: 0; border-bottom: 1px solid var(--border); }
    .o-coop > div:last-child { border-bottom: 0; }
    .o-gallery { grid-template-columns: 1fr 1fr; }
    .o-gallery:not(.n1):not(.n2) .o-shot:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
    .d-band b { font-size: 24px; }
    .d-allies { grid-template-columns: minmax(0, 1fr); }
    .e-focus-row { grid-template-columns: 28px minmax(0, 1fr) 28px; }
    .e-focus-row select { grid-column: 2; }
    .e-focus-row input[type="text"] { grid-column: 2 / 4; }
    .e-focus-row input[type="text"]:last-of-type { grid-column: 2 / 4; }
    .e-focus-row .icon-btn { grid-column: 3; }
    .e-actions { bottom: calc(66px + env(safe-area-inset-bottom)); }
    .e-swatches { grid-template-columns: minmax(0, 1fr); }
    .o-gallery.n3 { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
    .d-ally { animation: k-rise 0.6s var(--k-ease) backwards; }
    .d-allies > :nth-child(2) { animation-delay: 0.06s; }
    .d-allies > :nth-child(3) { animation-delay: 0.12s; }
    .d-allies > :nth-child(n+4) { animation-delay: 0.18s; }
    .o-hero-img { animation: o-pan 1.6s var(--k-ease) backwards; }
    .o-hero .org-logo { animation: k-rise 0.9s var(--k-ease) 0.15s backwards; }
}
@keyframes o-pan { from { scale: 1.08; opacity: 0; } }

/* ---------- Status: Funktionen und ihr Einrichtungsstand ---------- */
.feature-panel { margin: 16px 0 22px; }
.feature-panel > header { flex-wrap: wrap; }
.feature-filter { margin-left: 12px; }
.feature-filter .seg { background: none; border: 0; cursor: pointer; }
.feature-groups { columns: 2 420px; column-gap: 28px; }
.feature-group { break-inside: avoid; margin-bottom: 18px; }
.feature-group .d-group-title { margin: 0 0 6px; }
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.feature:last-child { border-bottom: 0; }
.feature .badge, .feature .status-link { margin-left: auto; flex: none; }
.feature-text { display: flex; flex-direction: column; min-width: 0; }
.feature-text strong { font-weight: 600; }
.feature-details { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.feature.ok .status-dot { color: var(--success); }
.feature.partial .status-dot { color: var(--brass-hi); }
.feature.off .status-dot { color: var(--text-muted); }
.feature.off .feature-text strong { color: var(--text-muted); }
.status-section-title { margin: 8px 0 0; font: 600 12.5px var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }
.status-section-title .meta { font: 400 13px var(--sans); letter-spacing: 0; text-transform: none; }
.main > .status-section-title { margin-top: 26px; scroll-margin-top: 80px; }
.main > .status-section-title + * { margin-top: 12px; }
.main > .hint.data-scope { margin-bottom: 12px; }
.main > .hint.data-restore { margin: 12px 0 22px; }
.main > .hint.config-own-note { margin: 22px 0 12px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 860px) {
    .feature-filter { margin: 8px 0 0; }
    .feature { flex-wrap: wrap; }
    .feature .badge, .feature .status-link { margin-left: 28px; }
}

/* Anfrage/Bearbeiten: Vorschau im Stil der Partnerseiten */
.pf-preview { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; margin-bottom: 12px; }
.pf-preview .e-card { max-width: none; }
@media (max-width: 1100px) { .pf-preview { grid-template-columns: minmax(0, 1fr); } .pf-preview .e-card { max-width: 320px; } }
.pf-form { display: flex; flex-direction: column; gap: 22px; }
.pf-form > .form-status:empty { display: none; }
.partner-member { border-radius: 0; }
/* Ein Editor für Partnerseiten: Reiter „Org & Mitglieder“ und „Gestaltung“ */
.e-tabs { margin: 0 0 18px; }
.e-tabs .subtab { background: none; border: 0; cursor: pointer; font: inherit; }
.e-forms { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.e-forms > .e-form[hidden] { display: none; }
.pf-logo img { width: 72px; height: 72px; object-fit: contain; flex: none; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border); }
.pf-logo > i { width: 72px !important; height: 72px !important; }

/* Anfragen um Unterstützung: nur die neueste sichtbar, ältere auf Klick */
.partner-support-older { margin-top: 10px; }
.partner-support-older > summary { cursor: pointer; list-style: none; display: inline-flex; font: 600 10.5px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); padding: 6px 0; }
.partner-support-older > summary::-webkit-details-marker { display: none; }
.partner-support-older > summary:hover { color: var(--text); }
.partner-support-older > summary::after { content: " ▸"; white-space: pre; }
.partner-support-older[open] > summary::after { content: " ▾"; }
.partner-support-older .when-open, .partner-support-older[open] .when-closed { display: none; }
.partner-support-older[open] .when-open { display: inline; }
.partner-support-older > ul { margin-top: 10px; }

/* Eigenes Banner/GIF: Bild ohne Farbverlauf und Streifen, nur ein dunkler Verlauf für die Schrift */
.o-hero.has-art { background: #05070b; }
.o-hero.has-art::before { background: linear-gradient(0deg, rgba(4, 6, 10, 0.85), rgba(4, 6, 10, 0.15) 60%, transparent); }
.o-hero.has-art::after { display: none; }
.o-hero.has-art .o-hero-img { opacity: 1; mix-blend-mode: normal; }
.d-ally.has-art { background: #05070b; }
.d-ally.has-art::before { opacity: 1; mix-blend-mode: normal; }
.d-ally.has-art::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.35)); }
.d-ally.has-art .d-ally-sid { display: none; }
/* Live-Vorschau im Editor wird bei jeder Eingabe neu aufgebaut – ohne Einblend-Animationen, sonst flackert sie. */
.e-preview *, .e-preview *::before, .e-preview *::after { animation: none !important; transition: none !important; }

/* Die NTSL als Gastgeberin im Partnerbereich */
.d-host { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 18px 22px; margin-bottom: 26px;
    border: 1px solid color-mix(in srgb, var(--c3) 45%, transparent); color: var(--text) !important;
    background: linear-gradient(110deg, var(--c1-deep) 0%, var(--c2-deep) 70%); transition: border-color 0.2s; }
.d-host:hover { text-decoration: none; border-color: var(--c3); }
.d-host::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--c3), transparent); }
.d-host .org-logo { width: 72px; height: 72px; }
.d-host-text h3 { margin: 4px 0 2px; font: 700 22px var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.d-host-text h3 span { color: var(--c3-ink); font-size: 15px; margin-left: 8px; }
.d-host-text p { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 13px; }
.d-host-stats { display: flex; gap: 0; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.d-host-stats div { padding: 0 18px; border-right: 1px solid rgba(255, 255, 255, 0.12); text-align: center; }
.d-host-stats b { display: block; font: 600 20px var(--display); color: var(--c3-ink); }
.d-host-stats span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.d-host-go { font-size: 20px; color: var(--c3-ink); }
.d-host-mini { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; color: var(--text) !important; }
.d-host-mini:hover { text-decoration: none; }
.d-host-mini .org-logo { width: 48px; height: 48px; }
.d-host-mini b { display: block; font: 600 14px var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.d-host-mini span { color: var(--text-muted); font-size: 12px; }
.d-host-contacts { list-style: none; margin: 6px 0 0; padding: 0; }
.d-host-contacts li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.d-host-contacts li:last-child { border-bottom: 0; }
.d-host-contacts img, .d-host-contacts .av { width: 26px; height: 26px; flex: none; display: grid; place-items: center; background: var(--panel-raised); font-size: 12px; }
.d-host-contacts a { margin-left: auto; font-size: 12px; white-space: nowrap; }
.d-host-panel .k-label { display: block; margin-top: 4px; }
@media (max-width: 860px) {
    .d-host { grid-template-columns: auto minmax(0, 1fr); }
    .d-host-stats { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 12px; justify-content: space-between; }
    .d-host-stats div { flex: 1; padding: 0 8px; }
    .d-host-stats div:last-child { border-right: 0; }
    .d-host-go { display: none; }
}
.d-host { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 12px; }
.d-host .org-logo { grid-row: 1 / 3; }
.d-host-stats { grid-column: 2; grid-row: 2; border-left: 0; justify-content: flex-start; }
.d-host-stats div:first-child { padding-left: 0; text-align: left; }
.d-host-stats div { text-align: left; }
.d-host-go { grid-column: 3; grid-row: 1 / 3; }
@media (max-width: 860px) {
    .d-host { grid-template-columns: auto minmax(0, 1fr); }
    .d-host .org-logo { grid-row: auto; width: 56px; height: 56px; }
    .d-host-stats { grid-column: 1 / -1; grid-row: auto; }
}
.d-host.has-art { background: linear-gradient(90deg, rgba(5, 7, 11, 0.94) 0%, rgba(5, 7, 11, 0.6) 60%, rgba(5, 7, 11, 0.35)), var(--img) center var(--img-y, 50%) / cover; }

/* Sprung über die Abschnitts-Leiste: Ziel kurz hervorheben */
.o-page .k-panel.o-flash { animation: o-flash 1.4s ease-out; }
@keyframes o-flash {
    0%, 25% { box-shadow: 0 0 0 2px var(--c3-ink), 0 0 28px color-mix(in srgb, var(--c3-ink) 45%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
/* Kalender: Tag anklicken, um ein Event zu planen */
.k-cal-day.free { cursor: pointer; }
.k-cal-day.free:hover, .k-cal-day.free:focus-visible { border-color: var(--brass); color: var(--brass-hi); background: rgba(var(--accent-rgb), 0.08); }
.k-cal-cell { position: relative; display: grid; }
.k-cal-plus { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; display: grid; place-items: center; padding: 0; border: 1px solid var(--brass);
    background: #0b0f16; color: var(--brass-hi); font: 700 12px/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity 0.15s; z-index: 1; }
.k-cal-cell:hover .k-cal-plus, .k-cal-plus:focus-visible { opacity: 1; }
@media (hover: none) { .k-cal-plus { opacity: 1; } }
.k-cal-legend .plan::before { content: "+"; display: inline-grid; place-items: center; width: 10px; height: 10px; margin-right: 6px; border: 1px solid var(--brass); color: var(--brass-hi); font-size: 9px; line-height: 1; }
.k-cal-legend { flex-wrap: wrap; }

/* Konfiguration: Logo des Hubs */
.hub-logo-preview { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; margin: 16px 0 8px; }
.hub-logo-preview figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hub-logo-preview figcaption { font: 600 10px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.hub-logo-preview img { display: block; background: repeating-conic-gradient(#10151e 0 25%, #0b0f16 0 50%) 0 0 / 16px 16px; border: 1px solid var(--border); object-fit: contain; }
.hub-logo-preview img.big { width: 120px; height: 120px; }
.hub-logo-preview img.app { width: 60px; height: 60px; border-radius: 14px; }
.hub-logo-preview img.fav { width: 32px; height: 32px; }

/* Profilbild-Generator (Personalakte) */
.am-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.am-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.am-form .hint { margin: 0; }
.am-form .segmented { flex-wrap: wrap; }
.am-previews { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.am-previews figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.am-previews figcaption { font: 600 10px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.am-canvas { width: min(260px, 100%); height: auto; aspect-ratio: 1; border: 1px solid var(--border); }
.am-round { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #1e1f22; box-shadow: 0 0 0 2px var(--border); }
@media (max-width: 760px) {
    .am-body { grid-template-columns: 1fr; }
}
.am .segmented { display: inline-flex; gap: 2px; align-self: flex-start; }
.am .segmented .seg { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.88rem; }
.am .segmented .seg.active { background: var(--brass); color: #14100a; }
.hub-logo-preview img.emblem { width: min(320px, 100%); height: auto; aspect-ratio: auto; padding: 10px; }
.field.muted { opacity: 0.5; }
.am-minis { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #313338; border-radius: 8px; }
.am-mini { border-radius: 50%; display: block; }
.am-mini[width="40"] { width: 40px; height: 40px; }
.am-mini[width="32"] { width: 32px; height: 32px; }
.emblem-text { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

/* Downloads (Personalakte) und Konfiguration der Downloads */
.dl-hub { display: flex; flex-direction: column; gap: 0; }
.dl-lead { margin: 0 0 14px; }
.dl-hint { margin: 0 0 14px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.dl-tile { border: 1px solid var(--border); background: var(--panel-raised); display: flex; flex-direction: column; min-width: 0; }
.dl-preview { aspect-ratio: 5 / 2; background: repeating-conic-gradient(#10151e 0 25%, #0b0f16 0 50%) 0 0 / 16px 16px; overflow: hidden; }
.dl-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-info { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.dl-info .btn { align-self: flex-start; margin-top: 6px; }
.dl-slots { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.dl-slot { display: flex; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--border); flex-wrap: wrap; }
.dl-slot-preview { width: 200px; aspect-ratio: 5 / 2; flex: none; display: grid; place-items: center; background: repeating-conic-gradient(#10151e 0 25%, #0b0f16 0 50%) 0 0 / 16px 16px; overflow: hidden; }
.dl-slot-preview img { width: 100%; height: 100%; object-fit: cover; }
.dl-slot-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; }
.dl-slot-actions { display: flex; gap: 8px; margin-top: 6px; }
@media (max-width: 640px) { .dl-slot-preview { width: 100%; } }


/* ======================================================================
   Navigation: Symbolleiste, Kopfzeile mit Unterbereichen, Profilmenü, Suche
   ====================================================================== */
.k-rail {
    position: sticky; top: 0; height: 100vh; z-index: 20; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 0 12px; overflow-y: auto; scrollbar-width: none;
    background: linear-gradient(180deg, #06080c, #030407); border-right: 1px solid var(--border);
}
.k-rail::-webkit-scrollbar { display: none; }
.k-rail-crest { display: grid; place-items: center; width: 52px; height: 48px; margin-bottom: 8px; flex: none; }
.k-rail-crest img { width: 40px; height: 40px; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.3)); }
.k-rail-main, .k-rail-admin, .k-rail-foot { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.k-rail-foot { margin-top: auto; padding-top: 10px; }
.k-rail-sep { width: 34px; height: 1px; background: var(--border); margin: 8px 0; flex: none; }
.k-rail-item {
    position: relative; width: 64px; flex: none; padding: 8px 2px 7px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: none; border: 0; cursor: pointer;
    color: var(--text-muted) !important; text-decoration: none !important;
    font: 600 9.5px/1.15 var(--sans); letter-spacing: 0.02em; text-align: center;
    transition: color 0.15s, background 0.15s;
}
.k-rail-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-rail-item .k-icon { width: 20px; height: 20px; }
.k-rail-item:hover, .k-rail-item[aria-expanded="true"] { color: var(--text) !important; background: rgba(255, 255, 255, 0.03); }
.k-rail-item.on { color: var(--brass-hi) !important; background: rgba(var(--accent-rgb), 0.09); }
.k-rail-item.on::before { content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 2px; background: var(--brass); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6); }
.k-rail-count {
    position: absolute; top: 3px; right: 9px; min-width: 16px; height: 16px; padding: 0 4px;
    display: grid; place-items: center; background: var(--brass); color: var(--on-accent); font: 700 9.5px var(--sans); font-style: normal;
}
.k-rail-count.static { position: static; margin-left: auto; }
.k-rail-dot { position: absolute; top: 6px; right: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }

/* Kopfzeile: Abschnitt, Unterbereiche, Suche, Profil */
.k-command { gap: 16px; padding: 0 24px 0 28px; }
.k-title { display: flex; align-items: center; gap: 10px; flex: none; height: 30px; padding-right: 16px; border-right: 1px solid var(--border);
    font: 600 14px var(--display); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.k-title small { font: 600 10px var(--mono); letter-spacing: 0.1em; color: var(--brass); }
.k-ctx { display: flex; align-items: stretch; align-self: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.k-ctx::-webkit-scrollbar { display: none; }
.k-ctx:empty { display: none; }
.k-ctx .subtabs { display: flex; align-items: stretch; gap: 2px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; overflow: visible; }
.k-ctx .subtab {
    position: relative; display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px !important; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: none !important; white-space: nowrap;
    color: var(--text-muted) !important; font: 500 13px var(--sans) !important; letter-spacing: 0.01em !important; text-transform: none !important;
}
.k-ctx .subtab:hover { color: var(--text) !important; text-decoration: none; }
.k-ctx .subtab.active { color: var(--text) !important; }
.k-ctx .subtab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--brass); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5); }
.k-ctx .nav-count { margin-left: 2px; }
.k-search { margin-left: auto; flex: none; }
button.k-me { position: relative; display: flex; align-items: center; gap: 10px; background: none; border: 0; border-left: 1px solid var(--border);
    padding: 0 4px 0 14px; height: 38px; cursor: pointer; color: var(--text); font: inherit; text-align: left; }
button.k-me:hover .k-me-text b, button.k-me[aria-expanded="true"] .k-me-text b { color: var(--brass-hi); }
.k-me-caret { font-size: 10px; color: var(--text-muted); }
button.k-me .k-count { top: -2px; right: auto; left: 38px; }

/* Aufklappmenüs (Verwaltungsgruppe, Profil) */
.k-pop {
    position: fixed; z-index: 60; min-width: 230px; max-width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow-y: auto;
    padding: 8px; background: #0b0f16; border: 1px solid rgba(var(--accent-rgb), 0.35); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    animation: k-pop-in 0.14s ease-out;
}
.k-pop::before { content: ""; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px; border: 1px solid var(--brass); border-right: 0; border-bottom: 0; }
@keyframes k-pop-in { from { opacity: 0; translate: 0 -4px; } }
.k-pop-title { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; font: 600 10px var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass); }
.k-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: none; border: 0; cursor: pointer;
    color: var(--text) !important; font: 500 13.5px var(--sans); text-align: left; text-decoration: none !important; }
.k-pop-item .k-icon { width: 17px; height: 17px; color: var(--text-muted); }
.k-pop-item:hover, .k-pop-item:focus-visible { background: rgba(var(--accent-rgb), 0.08); outline: none; }
.k-pop-item.on { color: var(--brass-hi) !important; }
.k-pop-item.danger { color: #e8a39a !important; }
.k-pop-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.k-pop-me { display: flex; align-items: center; gap: 12px; padding: 8px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.k-pop-me img { width: 40px; height: 40px; border: 1px solid var(--border-strong); }
.k-pop-me b { display: block; font-size: 14px; }
.k-pop-me span { font-size: 11px; letter-spacing: 0.08em; color: var(--text-muted); }
.k-pop-tasks { display: flex; flex-direction: column; gap: 4px; padding: 2px 4px 4px; }
.k-pop-task { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-left: 2px solid var(--brass);
    color: var(--text) !important; text-decoration: none !important; font-size: 13px; }
.k-pop-task.info { border-left-color: var(--accent); }
.k-pop-task:hover { background: rgba(var(--accent-rgb), 0.08); }
.k-pop-task b { min-width: 22px; font: 700 15px var(--display); color: var(--brass-hi); }
.k-pop-empty { margin: 0; padding: 4px 10px 8px; color: var(--success, #93b58b); font-size: 13px; }
.k-pop-version { display: block; padding: 8px 10px 2px; font: 10.5px var(--mono); color: var(--text-muted) !important; }

/* Suche mit Aktionen (Strg K) */
.palette { padding: 0; margin: 12vh auto auto; width: min(620px, calc(100vw - 24px)); max-height: 72vh; border: 0; background: none; overflow: visible; }
.palette::backdrop { background: rgba(2, 3, 6, 0.6); backdrop-filter: blur(3px); }
.palette-box { display: flex; flex-direction: column; max-height: 72vh; background: #0b0f16; border: 1px solid rgba(var(--accent-rgb), 0.4); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); position: relative; }
.palette-box::before { content: ""; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px; border: 1px solid var(--brass); border-right: 0; border-bottom: 0; }
.palette-head { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.palette-head .k-icon { width: 18px; height: 18px; color: var(--brass); }
.palette-input { flex: 1; height: 56px; border: 0 !important; background: none !important; box-shadow: none !important; font-size: 16px; padding: 0 !important; color: var(--text); }
.palette-input:focus { outline: none; }
.palette kbd { font: 600 10px var(--mono); border: 1px solid var(--border); padding: 1px 6px; color: var(--text-muted); }
.palette-list { overflow-y: auto; padding: 6px 8px 10px; }
.palette-label { padding: 12px 10px 6px; font: 600 10px var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass); }
.palette-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.palette-item.active { background: rgba(var(--accent-rgb), 0.1); box-shadow: inset 2px 0 0 var(--brass); }
.palette-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border); flex: none; color: var(--text-muted); }
.palette-item.active .palette-icon { color: var(--brass-hi); border-color: rgba(var(--accent-rgb), 0.4); }
.palette-icon .k-icon { width: 16px; height: 16px; }
.palette-text { flex: 1; min-width: 0; }
.palette-text b { display: block; font-weight: 600; font-size: 14px; }
.palette-text small { display: block; color: var(--text-muted); font-size: 12px; }
.palette-kind { font: 600 9.5px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.palette-empty { margin: 0; padding: 24px 12px; text-align: center; color: var(--text-muted); }
.palette-foot { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted); }

@media (max-width: 1280px) {
    .k-search span, .k-search kbd { display: none; }
    .k-search { width: auto; }
}
@media (max-width: 860px) {
    .k-rail, .k-title, .k-ctx { display: none !important; }
    .k-me-caret { display: none; }
    button.k-me { border-left: 0; padding: 0; }
    button.k-me .k-count { left: 22px; }
    .palette { margin-top: 8vh; }
}
/* Viele Reiter in der Kopfzeile: Suche, Uhr und Profilname weichen */
.k-command.tight .k-search span, .k-command.tight .k-search kbd, .k-command.tight .k-clock,
.k-command.tight .k-me-text, .k-command.tight .k-me-caret { display: none; }
.k-command.tight .k-search { width: auto; }

/* ======================================================================
   Bedienung: Tastatur, Meldungen, Lade- und Fehlerzustände, Kopfzeile am Handy
   ====================================================================== */
/* Sprungmarke für die Tastatur: erst mit Fokus sichtbar, führt an Leiste und Kopfzeile vorbei */
.skip-link {
    position: fixed; left: 12px; top: 10px; z-index: 300; padding: 11px 16px; cursor: pointer; translate: 0 -220%;
    background: #0b0f16; color: var(--brass-hi); border: 1px solid var(--brass);
    font: 600 11px var(--display); letter-spacing: 0.14em; text-transform: uppercase;
}
.skip-link:focus { translate: 0 0; }
/* Nach einem Seitenwechsel liegt der Fokus auf dem Inhalt – ohne Rahmen um die ganze Seite */
.main:focus { outline: none; }
/* Aufklappmenüs: Tastaturfokus so deutlich wie die Auswahl in der Suche */
.k-pop-item:focus-visible, .k-pop-task:focus-visible { background: rgba(var(--accent-rgb), 0.12); box-shadow: inset 2px 0 0 var(--brass); outline: none; }

/* Meldungen (Toasts): liegen in der obersten Ebene über Dialogen, rücken über den Update-Hinweis,
   ein Klick schließt sie. Der Bereich selbst fängt keine Klicks ab. */
.toast-area, .toast-area[popover] {
    position: fixed; inset: auto 20px calc(20px + var(--update-banner-space, 0px)) auto; z-index: 130;
    width: auto; height: auto; max-width: calc(100vw - 28px); max-height: none; margin: 0; padding: 0; border: 0;
    background: none; color: var(--text); overflow: visible; pointer-events: none;
}
.toast { pointer-events: auto; cursor: pointer; overflow-wrap: anywhere; }
.toast.shown:not(.leaving) { animation: none; }
@media (min-width: 861px) {
    .toast-area, .toast-area[popover] { right: 26px; bottom: calc(26px + var(--update-banner-space, 0px)); }
}
@media (max-width: 860px) {
    .toast-area, .toast-area[popover] { inset: auto 14px calc(80px + env(safe-area-inset-bottom) + var(--update-banner-space, 0px)) 14px; }
    /* Schwebende Speichern-Leiste (ungespeicherte Änderungen) bleibt bedienbar */
    body:has(.form-actions.sticky .dirty-note:not([hidden])) .toast-area { bottom: calc(150px + env(safe-area-inset-bottom) + var(--update-banner-space, 0px)); }
    /* Dialoge kommen am Handy von unten: Meldungen dann oben, damit sie weder Text noch Knöpfe verdecken */
    body:has(dialog[open]) .toast-area { top: calc(10px + env(safe-area-inset-top)); bottom: auto; }
}

/* Seite konnte nicht geladen werden: Seitenkopf bleibt, darunter Ursache und was jetzt hilft */
.error-state { gap: 14px; max-width: 760px; }
.error-state .alert { display: flex; flex-direction: column; gap: 4px; }
.error-state .alert strong { font: 600 13px var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.error-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Menü: Suche ohne Treffer */
.nav-empty { margin: 10px 14px 14px; color: var(--text-muted); font-size: 13px; }

/* Suche: „Esc“ ist ein Knopf; ohne Maus (Handy) ein ✕ statt der Tastenhinweise */
.palette-close { flex: none; display: grid; place-items: center; padding: 6px; background: none; border: 0; color: var(--text-muted); cursor: pointer; }
.palette-close:hover kbd { color: var(--text); border-color: var(--border-strong); }
.palette-close span { display: none; font-size: 15px; line-height: 1; padding: 4px 6px; }
@media (hover: none) {
    .palette-close kbd, .palette-foot { display: none; }
    .palette-close span { display: block; }
}

/* Kopfzeile: lange Namen kürzen statt die Knöpfe aus dem Bild zu schieben */
.k-org { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.org-switch > summary span { max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) {
    /* Mit Org-Wechsel steht der Name schon im Knopf – so bleibt Platz für Suche und Profilmenü */
    .k-command:has(.org-switch) .k-org { display: none; }
    .k-command .k-command-crest, .k-command .k-search, .k-command .org-switch, button.k-me { flex: none; }
}

.k-ctx.more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
/* Handy: Seite aus dem Menü hinter dem Wappen (nicht in der Leiste) – das Wappen leuchtet */
.k-mobile-crest.on > span:first-child { border-color: var(--brass-hi); box-shadow: 0 0 16px rgba(var(--accent-hi-rgb), 0.55); }

/* Org-Auswahl und „Kein Zugang“: Erklärung auch am Handy zeigen (die Anmeldeseite blendet sie dort aus) */
.org-list-label { font: 600 10px var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-muted); margin-bottom: -8px; }
@media (max-width: 640px) {
    .k-login.k-login-simple .kl-lead { display: block !important; font-size: 14.5px; }
    .k-login.k-login-simple .kl-copy > .k-section { display: block !important; margin-bottom: 0; }
    .k-login.k-login-simple .kl-copy h1 { font-size: clamp(28px, 9vw, 40px); }
    .k-login.k-login-simple { padding-top: 32px; padding-bottom: 32px; }
}

/* Einsatzplan: geplante Discord-Posts */
.sched-panel { margin-bottom: 22px; }
.sched-panel .hint { margin: 0 0 12px; }
.sched-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sched-item { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-left: 2px solid var(--brass); }
.sched-when b { display: block; font: 600 14px var(--display); letter-spacing: 0.04em; color: var(--brass-hi); margin-top: 2px; }
.sched-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sched-main strong { overflow-wrap: anywhere; }
.sched-error { color: #e8a39a; }
.sched-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
    .sched-item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .sched-actions { justify-content: flex-start; }
}
/* Event planen: zwischengespeicherte Entwürfe */
.drafts-list li.current { border-left: 2px solid var(--brass); padding-left: 10px; }

/* Event planen: Kategorie (Operation / Hub-Event) */
.cat-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.cat-option { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); background: var(--panel);
    color: var(--text) !important; text-decoration: none !important; position: relative; }
.cat-option b { font: 600 13px var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.cat-option span { color: var(--text-muted); font-size: 13px; }
.cat-option:hover { border-color: rgba(var(--accent-rgb), 0.45); }
.cat-option.active { border-color: var(--brass); background: rgba(var(--accent-rgb), 0.07); }
.cat-option.active::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--brass); }
@media (max-width: 640px) { .cat-picker { grid-template-columns: 1fr; } }

/* Kalender: mehrtägige Hub-Events als Balken, Tagesansicht */
.k-cal-day.hub { position: relative; }
.k-cal-day.hub::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: 3px; height: 3px; background: var(--hub); }
.k-cal-day.hub.hub-start::after { left: 5px; }
.k-cal-day.hub.hub-end::after { right: 5px; }
.k-cal-legend .hub::before { background: var(--hub) !important; }
.day-view { display: flex; flex-direction: column; gap: 10px; min-width: min(420px, 80vw); }
.day-hub { padding: 10px 12px; border: 1px solid var(--border); border-left: 2px solid var(--hub); display: flex; flex-direction: column; gap: 6px; }
.day-hub p { margin: 0; white-space: pre-line; font-size: 13.5px; }
.day-op { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-left: 2px solid var(--brass);
    color: var(--text) !important; text-decoration: none !important; }
.day-op:hover { background: rgba(var(--accent-rgb), 0.07); }

img.emoji { width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin-right: 0.3em; object-fit: contain; }

/* ---------- Kommandozentrale „Lagezentrum“: Einsatzplan + Befehle, 14-Tage-Leiste, Statusleiste ---------- */
.k-lage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 22px; align-items: stretch; margin-bottom: 22px; }
.k-lage + .k-panel { margin-bottom: 22px; }
.k-seg { margin-left: auto; display: flex; align-items: center; gap: 0; }
.k-seg button { font: 600 10px var(--display); letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 11px; color: var(--text-muted);
    background: none; border: 1px solid var(--border); cursor: pointer; }
.k-seg button + button { border-left: 0; }
.k-seg button.on { background: rgba(var(--accent-rgb), 0.16); color: var(--brass-hi); }
.k-seg-add { margin-left: 14px; font: 600 10px var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); text-decoration: none; }
.k-ws { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); border-left: 1px solid var(--border); row-gap: 4px; padding-bottom: 6px; }
.k-ws-bg { border-right: 1px solid var(--border); margin-bottom: -4px; }
.k-ws-bg.today { background: rgba(var(--accent-rgb), 0.07); }
.k-ws-col { padding: 4px 5px 8px; min-height: 110px; display: flex; flex-direction: column; gap: 5px; min-width: 0; position: relative; z-index: 1; }
.k-ws-day { display: block; text-align: left; background: none; border: 0; padding: 2px 2px 4px; cursor: pointer; color: inherit; font: inherit; }
.k-ws-day span { font: 600 10px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.k-ws-col.we .k-ws-day span { color: #6c6658; }
.k-ws-day b { display: block; font: 600 18px/1.2 var(--display); }
.k-ws-day em { font: 600 9px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); font-style: normal; }
.k-ws-col.today .k-ws-day b, .k-ws-col.today .k-ws-day span { color: var(--brass-hi); }
.k-ws-day:hover b { color: var(--brass-hi); }
.k-ws-op { display: block; font-size: 11px; line-height: 1.3; padding: 4px 6px; background: rgba(var(--accent-rgb), 0.14); border-left: 2px solid var(--brass);
    color: var(--text); text-decoration: none; }
.k-ws-op b { display: block; font-family: var(--mono); font-weight: 600; }
.k-ws-op span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.k-ws-op.mine { background: var(--brass); color: var(--on-accent); }
.k-ws-op:hover { outline: 1px solid var(--brass-hi); }
.k-ws-more { font-size: 11px; color: var(--brass); background: none; border: 0; text-align: left; padding: 0 2px; cursor: pointer; }
.k-ws-hub { align-self: center; height: 22px; margin: 0 4px; position: relative; z-index: 1; text-align: left; font: 500 11.5px var(--sans); color: var(--hub-hi);
    background: linear-gradient(90deg, rgba(var(--hub-rgb), 0.24) var(--fill, 100%), transparent var(--fill, 100%));
    border: 0; border-left: 3px solid var(--hub); padding: 0 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-ws-hub.cont { border-left-style: dashed; }
.k-ws-hub span { color: var(--hub-mid); }
.k-ws-hub:hover { color: #fff; }
.k-ws-list { display: none; }
.k-ws-wrap .k-cal-legend { flex-wrap: wrap; }
.k-cal-legend .plain::before { display: none; }
.k-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.k-kpi { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); transition: border-color 0.15s; }
.k-kpi:hover { border-color: rgba(var(--accent-rgb), 0.45); }
.k-kpi > b { font: 600 26px/1.15 var(--display); color: var(--brass-hi); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-kpi-sub { font-size: 12px; color: var(--text-muted); }
.k-kpi-go { margin-top: auto; padding-top: 8px; font: 600 10px var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }
.k-faces { display: flex; align-items: center; flex-wrap: wrap; }
.k-faces img, .k-faces i { width: 24px; height: 24px; border: 1px solid var(--border); margin-right: -6px; object-fit: cover; background: #18202c;
    display: inline-grid; place-items: center; font: normal 10px var(--sans); }
.k-faces em { font-style: normal; margin-left: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.k-balance { display: flex; align-items: baseline; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.k-balance b { font: 600 34px/1 var(--display); color: var(--brass-hi); }
.k-balance span { color: var(--text-muted); font-size: 12px; }
@media (max-width: 1100px) {
    .k-lage { grid-template-columns: minmax(0, 1fr); }
}
.k-panel > header:has(.k-seg) { flex-wrap: wrap; row-gap: 10px; }
@media (max-width: 900px) {
    .k-ws, .k-ws-wrap .k-cal-legend { display: none; }
    .k-seg { margin-left: 0; width: 100%; }
    .k-ws-list { display: grid; gap: 4px; }
    .k-ws-lday { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .k-ws-lday:last-child { border-bottom: 0; }
    .k-ws-ldate span { display: block; font: 600 10px var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
    .k-ws-ldate b { font: 600 17px var(--display); }
    .k-ws-lday.today .k-ws-ldate b { color: var(--brass-hi); }
    .k-ws-litem { display: grid; gap: 2px; width: 100%; text-align: left; padding: 7px 10px; margin-bottom: 5px; font: inherit; font-size: 13px; color: var(--text);
        text-decoration: none; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-left: 3px solid var(--brass); cursor: pointer; }
    .k-ws-litem.mine { background: rgba(var(--accent-rgb), 0.14); }
    .k-ws-litem.hub { border-left-color: var(--hub); background: rgba(var(--hub-rgb), 0.1); }
    .k-ws-litem > span { font-size: 11.5px; color: var(--text-muted); }
    .k-kpis { grid-template-columns: 1fr 1fr; gap: 14px; }
    .k-kpi > b { font-size: 21px; }
}

/* ---------- Hub-Events in Einsatzplan und Operationsliste ---------- */
.k-linklike { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
    text-transform: inherit; letter-spacing: inherit; }
.k-linklike:hover, .k-linklike:hover h3 { color: var(--brass-hi); }
/* Hub-Event im Einsatzplan: schmale Linie, die oben und unten ausläuft, und ein Datumsblock im Hub-Blau */
.k-tl-hub { position: relative; }
.k-tl-hub::before { content: ""; position: absolute; left: -12px; top: 22%; bottom: 22%; width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, transparent, var(--hub) 30%, var(--hub) 70%, transparent); opacity: 0.85; }
.k-tl-hub .k-date { border-color: rgba(var(--hub-rgb), 0.4); background: linear-gradient(180deg, rgba(var(--hub-rgb), 0.08), transparent); }
.k-op-hub { border-left: 3px solid var(--hub); }
.k-hub-when { font-size: 12.5px; color: var(--hub-mid); margin-top: 4px; }

/* ---------- Vorschau oben: Wechsel zwischen den nächsten Operationen ---------- */
.k-hero-rotor { position: relative; }
.k-hero-dots { position: absolute; top: 16px; right: calc(38% + 16px); z-index: 2; display: flex; gap: 6px; }
.k-hero-dots button { width: 22px; height: 4px; padding: 0; border: 0; background: rgba(233, 227, 213, 0.3); cursor: pointer; }
.k-hero-dots button.on { background: var(--brass); }
.k-hero-dots button:hover { background: var(--brass-hi); }
.k-hero-in .k-hero-visual, .k-hero-in .k-hero-brief { animation: k-hero-fade 0.6s ease both; }
@keyframes k-hero-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1100px) { .k-hero-dots { right: 16px; } }
/* Dienstgrad-Kachel mit Rangabzeichen bzw. Org-Logo rechts */
.k-kpi.with-emblem { position: relative; padding-right: 104px; }
.k-kpi-emblem { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 72px; height: 72px; object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.18)); }
@media (max-width: 900px) { .k-kpi.with-emblem { padding-right: 70px; } .k-kpi-emblem { width: 46px; height: 46px; right: 14px; } }
.k-kpi.with-emblem > b { font-size: 22px; white-space: normal; overflow-wrap: anywhere; }
.k-hero-hub .k-hero-visual { width: 100%; height: 100%; }
.k-hero-hub { box-shadow: inset 3px 0 0 var(--hub); }
.hub-banner-current { display: grid; gap: 8px; margin-bottom: 10px; }
.hub-banner-current .banner-preview { max-width: 420px; }
.k-hub-meter { margin: 10px 0 4px; }
.k-hub-meter i { background: linear-gradient(90deg, #4f6fb8, var(--hub-mid)); }

/* =====================================================================
   Angleichung an den Kommando-Stil (seitenübergreifend): eckige Formen,
   Oxanium-Beschriftungen, eine Chip-Zeile, kompakte Hinweise auf dem Handy
   ===================================================================== */
/* Filter-Chips: eckig, Versal-Beschriftung, Messing für aktiv */
.chip { font: 600 10.5px var(--display); letter-spacing: 0.16em; text-transform: uppercase; padding: 7px 12px; border-radius: 0; }
.chip.active { border-color: var(--brass); background: rgba(var(--accent-rgb), 0.16); color: var(--brass-hi); }
.chip-count { border-radius: 0; font: 600 10px var(--mono); letter-spacing: 0; padding: 1px 6px; min-width: 20px; }
.chip.active .chip-count { background: rgba(var(--accent-rgb), 0.28); color: var(--brass-hi); }
/* Segment-Schalter und Schritte eckig */
.segmented { border-radius: 0; padding: 0; border-color: var(--border); }
.seg { border-radius: 0; font: 600 10.5px var(--display); letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 14px; }
.seg.active { background: rgba(var(--accent-rgb), 0.16); color: var(--brass-hi); }
.rsi-steps li { border-radius: 0; font: 600 10.5px var(--display); letter-spacing: 0.14em; text-transform: uppercase; flex: 1; }
.rsi-step-number { border-radius: 0 !important; }
.guide-link, .guide-article pre, .guide-article img, .guide-article code { border-radius: 0; }
/* Alte Info-Kacheln wie die Kennzahlen der Kommandozentrale */
.info-tile { background: linear-gradient(180deg, var(--panel-raised), var(--panel)); padding: 14px 18px; }
.info-icon { display: none; }
.info-label { font: 600 10px var(--display); letter-spacing: 0.2em; }
.info-value { font: 600 22px/1.2 var(--display); color: var(--brass-hi); }
/* Handy: Chips in einer wischbaren Zeile statt Umbrüchen; Hinweise kompakt */
@media (max-width: 700px) {
    .filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }
    .filter-chips::-webkit-scrollbar { display: none; }
    .filter-chips > * { flex: 0 0 auto; }
    .followup-banner { padding: 10px 12px; gap: 8px; font-size: 13px; }
    .followup-text { min-width: 0; flex-basis: 100%; }
    .followup-actions { display: flex; flex-wrap: wrap; gap: 4px 10px; }
    .followup-actions .btn { padding: 6px 10px; }
    .feedback-update { padding: 10px 12px; font-size: 13px; }
    .info-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
    .info-strip > :last-child:nth-child(odd) { grid-column: span 2; }
}
/* Hinweis-Stapel über dem Inhalt: auf dem Handy nur der erste, Rest hinter „+N weitere Hinweise“ */
.k-notices-more { display: none; }
@media (max-width: 700px) {
    .k-notices .k-notice-extra { display: none !important; }
    .k-notices-more:not([hidden]) { display: block; width: 100%; margin: -6px 0 14px; padding: 8px 12px; text-align: left; cursor: pointer;
        background: rgba(var(--accent-rgb), 0.06); border: 1px dashed var(--border); color: var(--brass);
        font: 600 10.5px var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
}
/* Knöpfe: Gefahr und Kupfer auch ohne Hover erkennbar */
.btn.danger-outline { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: transparent; }
.btn.copper { color: var(--brass-hi); border-color: var(--brass); background: rgba(var(--accent-rgb), 0.1); }
/* Speichern-Leiste über der Handy-Navigation (inkl. hochstehendem Wappen) */
@media (max-width: 860px) { .form-actions.sticky { bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 30; } }
/* Optionstexte (Radio/Checkbox) in normaler Schrift – Versalien nur für Feldbeschriftungen */
.field label.toggle, .toggle { font: 400 14px/1.4 var(--sans); letter-spacing: 0; text-transform: none; align-items: flex-start; }
.toggle input { margin-top: 1px; flex: 0 0 auto; }
.chip-toggle { border-radius: 0; background: var(--panel); }
.chip-toggle:has(input:checked) { border-color: var(--brass); background: rgba(var(--accent-rgb), 0.14); }
.chip-toggle input { accent-color: var(--brass); }
/* Dienstgrad-Kachel auf dem Handy: Abzeichen über dem Wert statt daneben */
@media (max-width: 900px) {
    .k-kpi.with-emblem { padding-right: 18px; }
    .k-kpi.with-emblem > b { overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 19px; }
    .k-kpi-emblem { position: static; transform: none; width: 34px; height: 34px; order: -1; }
}
/* Info-Kacheln auf dem Handy: Spalten dürfen schrumpfen (lange Werte kürzen statt überlaufen) */
@media (max-width: 700px) { .info-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .info-tile { min-width: 0; } }
/* Tabellen-Panels (flush): Ecken sichtbar, Überschrift wie bei allen Panels */
.card.flush { overflow: visible; }
.card.flush > h2, .card.flush > h2:first-child { padding: 0 0 12px; }
@media (max-width: 860px) { .card.flush > h2 { padding: 0 0 12px; } }
/* Auswahl-Chips (Rollen, Kanäle): eckig, Messing statt Blau, Namen in Originalschreibung */
.picker { border-radius: 0; background: rgba(4, 6, 10, 0.5); border-color: var(--border); }
.field .picker label, .picker label { border-radius: 0; text-transform: none; letter-spacing: 0; font: 400 13.5px/1.3 var(--sans); }
.picker label:has(input:checked) { border-color: var(--brass); background: rgba(var(--accent-rgb), 0.16); color: var(--brass-hi); box-shadow: none; }
.picker label:focus-within { outline-color: var(--brass); }
.picker input { accent-color: var(--brass); }
/* Status-Liste auf dem Handy: nur das Etikett bricht um */
.feature-text { flex: 1 1 0; min-width: 0; }
/* Kennzahl-Beschriftungen auf dem Handy zweizeilig statt abgeschnitten */
@media (max-width: 700px) { .stat .label { white-space: normal; } }
/* Verschachtelte Listeneinträge in Panels eckig */
.rank-row, .card .list-card, .announce-item, .scheduled-item, .knowledge-item, .reaction-row { border-radius: 0; }
/* ---------- Diplomatie: Feinschliff ---------- */
.partner-diff td:first-child { white-space: nowrap; overflow-wrap: normal; }
.invite-row { flex-wrap: wrap; }
.invite-row .invite-field { flex-basis: 100%; }
.o-hero:not(.has-art) { min-height: 220px; }
.e-tabs .subtab { font: 600 10.5px var(--display); letter-spacing: 0.2em; text-transform: uppercase; padding: 12px 18px; }
.d-ally-foot span { letter-spacing: 0.08em; white-space: nowrap; }
@media (min-width: 1101px) { .d-layout > .k-stack { position: sticky; top: 74px; } }
@media (max-width: 860px) {
    .d-ally { min-height: 0; }
    .d-ally-sid { display: none; }
    .d-ally-body { padding-top: 46px; }
    .d-ally-body h3 { font-size: 18px; }
    .partner-diff, .partner-diff tbody, .partner-diff tr, .partner-diff td { display: block; width: 100%; }
    .partner-diff thead { display: none; }
    .partner-diff tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
    .partner-diff td { padding: 2px 0; }
    .partner-diff td:first-child { font: 600 10.5px var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
}
/* ---------- Personalakte: Unterseiten auf dem Handy kompakt ---------- */
@media (max-width: 860px) {
    .k-dossier--sub .k-record, .k-dossier--sub .k-kv, .k-dossier--sub .k-callsign { display: none; }
    .k-dossier--sub .k-portrait { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 14px; text-align: left; padding: 12px 16px; }
    .k-dossier--sub .k-frame { width: 52px; height: 52px; margin: 0; grid-row: span 2; padding: 0; }
    .k-dossier--sub .k-frame::after { display: none; }
    .k-dossier--sub .k-portrait h2 { font-size: 15px; margin: 0; }
    .k-dossier--sub .k-rank { margin: 2px 0 0; padding: 0; border: 0; text-align: left; display: flex; gap: 6px; align-items: center; }
    .k-dossier--sub .k-rank img { width: 18px; height: 18px; }
    .k-dossier--sub .k-rank b { font-size: 11px; }
    .k-dossier--sub .k-rank span { display: none; }
    /* Laufbahn: Rangnamen nicht mitten im Wort trennen, Wischen andeuten */
    .k-career { grid-auto-columns: minmax(118px, 1fr); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
    .k-career li > button b { white-space: nowrap; word-break: keep-all; }
}
/* Einstellungen: Push-Abschnitt mit Abstand */
.k-panel h3 { margin: 18px 0 8px; font: 600 11px var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
/* ---------- Shop, Flotte, Guides, Hilfe, Neuigkeiten ---------- */
.filter-chips .chip-link { margin-left: auto; border-style: dashed; }
.store-head { flex-wrap: wrap; }
.store-head > div:first-child { flex: 1 1 100%; min-width: 0; }
.store-price { font: 600 20px var(--display); color: var(--brass-hi); }
@media (max-width: 700px) {
    .fleet-grid { grid-template-columns: 1fr; gap: 10px; }
    .fleet-tools { flex-wrap: wrap; }
    .fleet-tools input[type=search], .fleet-tools input[type=text] { flex: 1 1 100%; }
}
.guide-article > h1:first-child { display: none; }
@media (max-width: 700px) {
    .fleet-model, .hangar-ship { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; min-height: 0; }
    .fleet-model .ship-art, .hangar-ship .ship-art { height: 74px; min-height: 0; aspect-ratio: auto; }
    .fleet-model .fleet-body, .hangar-ship .hangar-text { padding: 10px 12px; }
}
.help-columns { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 22px; align-items: start; }
.help-columns > .help-section { margin: 0; display: block; }
/* ---------- Einsatzplan & Jahresbilanz ---------- */
@media (min-width: 1101px) {
    .k-op { grid-template-columns: 84px 190px minmax(0, 1fr) 230px; }
    .k-op.no-art { grid-template-columns: 84px minmax(0, 1fr) 230px; }
}
.yr-initial { display: grid; place-items: center; font: 700 40px var(--display); color: var(--brass-hi); }
/* ---------- Einsatzbefehl, Lager, Einordnung ---------- */
@media (max-width: 1100px) { .k-brief-side { order: -1; } }
/* Bedienung der Mitgliederseiten: Meldung, Shop, Lager, leere Listen */
.slot-note { color: var(--text-muted); font-size: 0.72rem; margin-left: 2px; }
.slot-chip:disabled .slot-note { color: var(--text); }
.rsvp-hint { margin: 0; }
.k-slots-wait { color: var(--text-muted); }
.k-tl-side .k-slots-wait { display: none; }
.store-missing { margin: 0; }
.store-empty, .guide-empty { grid-column: 1 / -1; }
.store-empty, .guide-empty, .fleet-empty, .logistics-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fav-star:disabled { opacity: 0.5; cursor: progress; }
@media (max-width: 720px) {
    /* Einsatzbefehl am Handy: erst Lage, Auftrag und Meldung (Zusagen), die Eckdaten danach – Datum und Uhrzeit stehen im Kopf. */
    .k-brief-side { order: 0; }
    .slot-chip { min-height: 40px; }
    .rsvp-buttons .btn { min-height: 40px; }
    .logistics-grid .card-head .k-more.link-button { min-height: 40px; padding: 0 4px; display: inline-flex; align-items: center; }
    .event-feedback-star { min-height: 40px; }
    .hangar-ship .fav-star { width: 40px; height: 40px; top: 4px; right: 4px; }
}
.card-head .k-more.link-button { background: none; border: 0; cursor: pointer; padding: 0; text-decoration: none; margin-left: auto; }
.day-chip { border-radius: 0; }
.day-chip.active { background: rgba(var(--accent-rgb), 0.16); border-color: var(--brass); color: var(--brass-hi); }
/* ---------- Verwaltung: Laufbahn-Einstellungen, Statistik ---------- */
.rank-line { grid-template-columns: 6.5em minmax(0, 1fr) minmax(0, 1fr); }
.rank-emblem { border-radius: 0; }
.chart-bar-fill, .rank-bar i, .stats-bar i { background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi)); }
@media (max-width: 640px) { .rank-line { grid-template-columns: minmax(0, 1fr); } }
/* Akzent einheitlich Messing (Blau bleibt Hub-Events vorbehalten) */
.step.done::before, .step.current::before { background: var(--brass); }
.step.done .step-dot { background: var(--brass); border-color: var(--brass); color: var(--on-accent); }
.step.current .step-dot { border-color: var(--brass); color: var(--brass-hi); }
.achievement-bar span { border-radius: 0; background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi)); }
.achievement-bar { border-radius: 0; }
.rsi-steps li.active { border-color: var(--brass); color: var(--brass-hi); }
.rsi-steps li.active .rsi-step-number { background: var(--brass); color: var(--on-accent); }
.k-record.k-record-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
@media (max-width: 860px) { .k-record.k-record-3 { grid-template-columns: 1fr 1fr; } .k-record.k-record-3 > :last-child { grid-column: span 2; border-right: 0; } }

/* Wartung & Daten */
.data-actions { display: grid; gap: 14px; }
.data-action { border: 1px solid var(--border); padding: 14px; }
.data-action h3 { margin: 0 0 6px; }
.data-action .form-actions { margin-top: 10px; }
.data-member input[type="text"] { width: 100%; max-width: 360px; }
.event-feedback { margin-top: 16px; }
.event-feedback h3 { margin: 0 0 6px; }
.event-feedback-stars { display: flex; gap: 4px; margin: 8px 0 12px; }
.event-feedback-star { background: none; border: 1px solid var(--border); color: var(--text-muted); font-size: 1.35rem; line-height: 1; padding: 6px 9px; cursor: pointer; }
.event-feedback-star.on { color: var(--ntsl-copper); border-color: currentColor; }
.event-feedback-star:disabled { cursor: default; }
/* Shop-Verwaltung */
.shop-admin-panels { margin-bottom: 16px; }
.override-section { margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--border); }
.override-section > summary { cursor: pointer; font-weight: 600; }
.override-list { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.override-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.override-list li .btn { margin-left: auto; }
/* ---------- Vorlagen ---------- */
.badge.muted { border-color: var(--border); color: var(--text-muted); background: transparent; }
.template-head h2 { text-transform: uppercase; }
.template-actions { justify-content: flex-start; }
.template-actions .template-delete { margin-left: auto; color: var(--text-muted); }
.template-actions .template-delete:hover { color: var(--danger); }
@media (max-width: 700px) { .template-actions .btn { flex: 0 0 auto; } }
/* Ticket-Aktionen */
.ticket-actions { margin-top: 0; }
.issue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.issue-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 12px; border: 1px solid var(--border); color: inherit; text-decoration: none; min-width: 0; }
.issue-row:hover { border-color: var(--border-strong); }
.issue-row strong { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
/* Event-Steuerung */
.control-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.control-label { flex: 0 0 96px; font: 600 11px var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.control-custom { display: inline-flex; gap: 6px; align-items: center; }
.control-minutes { width: 110px; padding-top: 6px; padding-bottom: 6px; }
.participant-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 720px) { .participant-actions .btn { flex: 1 1 auto; min-width: 0; padding-left: 8px; padding-right: 8px; letter-spacing: 0.08em; } }
@media (max-width: 520px) { .control-label { flex-basis: 100%; } }
/* ---------- Vorschau: Blättern (Pfeile, Zähler, Zeitbalken) ---------- */
.k-hero-dots { position: static; display: flex; gap: 4px; }
.k-hero-pager { position: absolute; top: 12px; right: calc(38% + 14px); z-index: 3; display: flex; align-items: center; gap: 10px;
    padding: 6px 10px; background: rgba(4, 6, 10, 0.55); border: 1px solid var(--border); }
.k-hero-dots button { position: relative; width: 26px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.k-hero-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; background: rgba(233, 227, 213, 0.3); }
.k-hero-dots button.on::before { background: rgba(var(--accent-rgb), 0.35); }
.k-hero-dots button:hover::before { background: var(--brass-hi); }
.k-hero-dots button i { position: absolute; left: 0; top: 7px; height: 4px; width: 0; background: var(--brass-hi); animation: k-hero-progress linear forwards; }
.k-hero-rotor.paused .k-hero-dots button i { animation-play-state: paused; }
@keyframes k-hero-progress { from { width: 0; } to { width: 100%; } }
.k-hero-count { font: 600 11px var(--mono); color: var(--text-muted); letter-spacing: 0.08em; }
.k-hero-nav { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 40px; height: 56px; display: grid; place-items: center;
    font: 400 30px/1 var(--display); color: var(--text); background: rgba(4, 6, 10, 0.5); border: 1px solid var(--border); cursor: pointer;
    opacity: 0.55; transition: opacity 0.15s, border-color 0.15s; }
.k-hero-nav.prev { left: 10px; }
.k-hero-nav.next { left: calc(62% - 50px); }
.k-hero-rotor:hover .k-hero-nav, .k-hero-nav:focus-visible { opacity: 1; }
.k-hero-nav:hover { border-color: var(--brass); color: var(--brass-hi); }
@media (prefers-reduced-motion: reduce) { .k-hero-dots button i { animation: none; width: 100%; } }
@media (max-width: 1100px) {
    .k-hero-pager { right: 12px; }
    .k-hero-nav { top: 95px; width: 34px; height: 46px; font-size: 24px; opacity: 0.8; }
    .k-hero-nav.next { left: auto; right: 10px; }
}
.k-hero-dots button.on, .k-hero-dots button:hover { background: none; }
.k-hero-mini { display: none; background: none; border: 0; color: var(--text); font: 400 22px/1 var(--display); padding: 0 6px; cursor: pointer; }
.k-hero-mini:hover { color: var(--brass-hi); }
@media (max-width: 1100px) {
    .k-hero-nav { display: none; }
    .k-hero-mini { display: block; }
    .k-hero-pager { padding: 4px 6px; gap: 6px; }
}
/* ---------- Monatskalender: Zahl oben, Markierungen darunter, Hub-Events als Band ---------- */
.k-cal-grid { column-gap: 0; row-gap: 4px; }
.k-cal-wd { padding-bottom: 6px; }
.k-cal-grid > span:not(.k-cal-wd), .k-cal-grid > button, .k-cal-cell { min-height: 42px; }
.k-cal-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; height: 100%;
    min-height: 42px; padding: 6px 0 14px; border: 1px solid transparent; background: none; color: var(--text-muted); font: 12.5px var(--mono); }
/* Operation: Punkt unter der Zahl; zugesagt: Messing */
.k-cal-day.has { background: none; color: var(--text); }
.k-cal-day.has::before { content: ""; position: absolute; left: 50%; bottom: 13px; width: 5px; height: 5px; margin-left: -2.5px; background: var(--brass-lo); }
.k-cal-day.mine { background: rgba(var(--accent-rgb), 0.14); color: var(--brass-hi); font-weight: 700; }
.k-cal-day.mine::before { background: var(--brass-hi); }
.k-cal-day.has:hover, .k-cal-day.free:hover { border-color: var(--brass); }
/* Heute: Zahl in Messing mit Unterstrich */
.k-cal-day.today { border-color: transparent; color: var(--brass-hi); font-weight: 700; }
.k-cal-day.today::after { content: ""; position: absolute; top: 22px; left: 50%; width: 16px; margin-left: -8px; height: 2px; background: var(--brass-hi); }
/* Hub-Event: durchgehendes Band am unteren Rand, über Zellgrenzen hinweg */
.k-cal-day.hub::after, .k-cal-day.hub.today::after { content: ""; position: absolute; top: auto; left: 0; right: 0; bottom: 4px; width: auto; margin: 0; height: 5px; background: rgba(var(--hub-rgb), 0.75); }
.k-cal-day.hub.hub-start::after { left: 4px; }
.k-cal-day.hub.hub-end::after { right: 4px; }
.k-cal-day.hub.today { box-shadow: inset 0 -2px 0 transparent; }
.k-cal-day.hub.today::before { content: ""; position: absolute; top: 22px; left: 50%; width: 16px; margin-left: -8px; height: 2px; background: var(--brass-hi); }
.k-cal-day.hub.has.today::before { top: auto; bottom: 13px; width: 5px; height: 5px; margin-left: -2.5px; }
.k-cal-plus { top: 2px; right: 2px; width: 14px; height: 14px; font-size: 10px; }
.k-cal-legend .has::before { width: 7px; height: 7px; background: var(--brass-lo); vertical-align: 1px; }
.k-cal-legend .mine::before { width: 7px; height: 7px; vertical-align: 1px; }
.k-cal-legend .hub::before { width: 14px; height: 5px; vertical-align: 2px; }
/* Liste unter dem Monat */
.k-cal-list { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.k-cal-list ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.k-cal-list li > a, .k-cal-list li > button { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; width: 100%;
    padding: 6px 8px; border-left: 3px solid var(--brass-lo); background: rgba(255, 255, 255, 0.02); color: var(--text); text-decoration: none; font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.k-cal-list li.mine > a { border-left-color: var(--brass-hi); }
.k-cal-list li.hub > button { border-left-color: var(--hub); background: rgba(var(--hub-rgb), 0.08); }
.k-cal-list li span { font: 11px var(--mono); color: var(--text-muted); white-space: nowrap; }
.k-cal-list li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-cal-list li > a:hover, .k-cal-list li > button:hover { background: rgba(var(--accent-rgb), 0.08); }
.k-cal-list .k-more { display: inline-block; margin-top: 8px; }
.k-cal-day.hub::after, .k-cal-day.hub.today::after { left: -1px; right: -1px; }
.k-cal-day.hub.hub-start::after { left: 4px; }
.k-cal-day.hub.hub-end::after { right: 4px; }
.k-cal-grid > *, .k-cal-cell > .k-cal-day { margin: 0; }
/* ---------- Wartungsseite: Countdown und Vorschau ---------- */
.mt-wrap { display: grid; gap: 10px; justify-items: center; margin: 6px 0 4px; }
.mt-countdown { display: flex; gap: 10px; justify-content: center; }
.mt-countdown > div { min-width: 72px; padding: 12px 8px 8px; border: 1px solid var(--border); background: linear-gradient(180deg, var(--panel-raised), var(--panel)); text-align: center; }
.mt-countdown b { display: block; font: 600 34px/1 var(--display); color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.mt-countdown span { display: block; margin-top: 6px; font: 600 9.5px var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.mt-caption { font-size: 13px; color: var(--text-muted); }
.mt-done { font: 600 16px var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-hi); padding: 14px 0; }
.maintenance-preview-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; gap: 14px; align-items: center; justify-content: center;
    padding: 8px 16px; background: rgba(var(--accent-rgb), 0.95); color: var(--on-accent); font: 600 11px var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.maintenance-preview-bar .btn { background: var(--on-accent); color: var(--brass-hi); border-color: var(--on-accent); }
.mt-quick { margin-top: 8px; }
@media (max-width: 480px) { .mt-countdown { gap: 6px; } .mt-countdown > div { min-width: 60px; } .mt-countdown b { font-size: 26px; } }
/* ---------- Speichern-Leiste: nur bei ungespeicherten Änderungen schwebend ---------- */
/* Ohne Änderungen steht der Knopf normal am Formularende und verdeckt nichts */
.form-actions.sticky:has(.dirty-note[hidden]) { position: static; background: none; }
.form-actions.sticky .dirty-note { color: var(--brass-hi); font: 600 10.5px var(--display); letter-spacing: 0.16em; text-transform: uppercase; margin-right: auto; }
@media (max-width: 860px) {
    .form-actions.sticky:has(.dirty-note[hidden]) .btn { flex: 0 0 auto; }
    /* Mit Änderungen: schmale Leiste über der Handy-Navigation */
    .form-actions.sticky:has(.dirty-note:not([hidden])) {
        position: fixed; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 40;
        margin: 0; padding: 8px 8px 8px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
        background: var(--panel-raised); border: 1px solid var(--brass); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    }
    .form-actions.sticky:has(.dirty-note:not([hidden])) .btn { flex: 0 0 auto; padding: 9px 14px; font-size: 10.5px; }
    .form-actions.sticky:has(.dirty-note:not([hidden])) .dirty-note { font-size: 9.5px; letter-spacing: 0.12em; }
    /* Platz am Seitenende, damit die Leiste nichts dauerhaft verdeckt */
    body:has(.form-actions.sticky .dirty-note:not([hidden])) .k-content { padding-bottom: 80px; }
}
/* ---------- Wartungsbanner kompakt (nur für das Leadership sichtbar) ---------- */
.maintenance-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; text-align: left; padding: 10px 16px; font-size: 13px; line-height: 1.4; }
.maintenance-banner b { font: 600 11px var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-hi); }
.maintenance-banner .mb-until { font: 600 12px var(--mono); color: var(--text); }
.maintenance-banner .mb-left { font: 600 12px var(--mono); color: rgb(var(--accent-rgb)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.maintenance-banner .mb-msg { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 140px; }
.maintenance-banner .mb-link { margin-left: auto; font: 600 10px var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); text-decoration: none; white-space: nowrap; }
@media (max-width: 700px) { .maintenance-banner { padding: 8px 12px; } }
/* ---------- Crew-Planung im Kommando-Stil ---------- */
.crew { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.crew > summary { list-style: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; cursor: pointer; color: var(--text); }
.crew > summary::-webkit-details-marker { display: none; }
.crew > summary::before { content: "▸"; color: var(--brass); font-size: 12px; width: 10px; transition: transform 0.15s; }
.crew[open] > summary::before { transform: rotate(90deg); }
.crew-title { font: 600 11.5px var(--display); letter-spacing: 0.2em; text-transform: uppercase; }
.crew-sum { font-size: 12.5px; color: var(--text-muted); }
.crew-ships { gap: 10px; margin-top: 12px; }
.crew-ship { border: 1px solid var(--border); border-left: 3px solid var(--border); background: rgba(255, 255, 255, 0.02); padding: 12px 14px; gap: 10px; }
.crew-ship.mine { border-color: var(--border); border-left-color: var(--brass); background: rgba(var(--accent-rgb), 0.06); }
.crew-ship-head { gap: 6px 12px; }
.crew-ship-head strong { font: 600 13.5px var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.crew-seats { font: 600 11px var(--mono); padding: 1px 7px; border: 1px solid var(--border); color: var(--text-muted); }
.crew-seats.full { border-color: var(--brass-lo); color: var(--brass-hi); }
.crew-people { font-size: 13px; }
.crew-pilot { font-weight: 600; gap: 8px; }
.crew-role { font: 600 9px var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); padding: 1px 5px; border: 1px solid var(--brass-lo); }
.crew-free { border-radius: 0; font: 600 9.5px var(--display); letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 8px; }
.crew-actions { justify-content: flex-end; }
.crew-actions .crew-remove { color: var(--text-muted); border-color: transparent; padding-left: 6px; padding-right: 6px; }
.crew-actions .crew-remove:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }

/* 14-Tage-Leiste: mehrere Tage wählen → Hub-Event für den Zeitraum */
.k-ws-wrap.selectable .k-ws-day { touch-action: none; user-select: none; -webkit-user-select: none; }
.k-ws-bg.sel { background: rgba(var(--hub-rgb), 0.12); box-shadow: inset 0 2px 0 var(--hub); }
.k-ws-bg.sel-a { box-shadow: inset 2px 2px 0 var(--hub); }
.k-ws-bg.sel-b { box-shadow: inset -2px 2px 0 var(--hub); }
.k-ws-bg.sel-a.sel-b { box-shadow: inset 2px 2px 0 var(--hub), inset -2px 0 0 var(--hub); }
.k-ws-selbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--border); border-left: 3px solid var(--hub); background: rgba(var(--hub-rgb), 0.06); font-size: 13px; }
.k-ws-selbar[hidden] { display: none; }
.k-ws-selbar > span { margin-right: auto; color: var(--text-muted); }
.k-ws-selbar b { color: var(--text); font-weight: 600; }
@media (max-width: 900px) { .k-ws-selbar { display: none; } }

/* Betreiber: Orgs der Installation */
.op-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.op-tenant { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.op-tenant:last-child { border-bottom: 0; }
.op-tenant.pending { border-left: 3px solid var(--brass); padding-left: 12px; }
.op-icon { width: 40px; height: 40px; object-fit: cover; border: 1px solid var(--border); }
.op-icon.none { display: grid; place-items: center; font: 600 16px var(--display); color: var(--text-muted); background: var(--panel-raised); }
.op-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.op-main .meta { margin-top: 3px; font-family: var(--mono); font-size: 12px; }
@media (max-width: 700px) {
    .op-tenant { grid-template-columns: 40px minmax(0, 1fr); }
    .op-tenant .row-actions { grid-column: 1 / -1; }
}
.op-section:not(:empty) { margin-bottom: 18px; }

/* Farben der Org (Konfiguration) */
.color-row { display: flex; align-items: center; gap: 8px; }
.color-row .color-swatch { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--border-strong); background: var(--panel-raised); cursor: pointer; }
.color-row .color-code { width: 110px; font-family: var(--mono); text-transform: lowercase; }
.color-warn { color: var(--danger); }

/* Status des Bots in Discord */
.bot-status-card .bs-now { margin: 0 0 6px; }
.bot-status-card .bs-minutes input { width: 110px; }
.bot-status-card textarea { font-family: var(--sans); }

/* 14-Tage-Leiste: viele Hub-Events – schlankere Balken, Überlauf je Tag */
.k-ws-hub { height: 20px; font-size: 11px; margin: 0 3px; }
.k-ws-hubmore { align-self: center; justify-self: start; margin: 0 5px; padding: 0 6px; height: 18px; border: 1px dashed rgba(var(--hub-rgb), 0.55);
    background: none; color: var(--hub-mid); font: 600 10px var(--sans); letter-spacing: 0.04em; cursor: pointer; white-space: nowrap; }
.k-ws-hubmore:hover { color: #fff; border-style: solid; }

/* Org-Wechsel (Kopfzeile, Handy-Menü) und Org-Auswahl */
.org-switch { position: relative; }
.org-switch > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 5px 10px; border: 1px solid var(--border);
    font: 600 12px var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.org-switch > summary::-webkit-details-marker { display: none; }
.org-switch > summary img { width: 22px; height: 22px; object-fit: contain; }
.org-switch > summary i { font-style: normal; color: var(--text-muted); font-size: 10px; }
.org-switch[open] > summary, .org-switch > summary:hover { border-color: var(--border-strong); }
.org-switch-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 260px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
    background: var(--panel); border: 1px solid var(--border-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
.org-switch-menu button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: none; border: 0; border-left: 2px solid transparent; color: var(--text);
    cursor: pointer; text-align: left; font: inherit; }
.org-switch-menu button:hover { background: rgba(var(--accent-rgb), 0.08); }
.org-switch-menu button.active { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.org-switch-menu img { width: 28px; height: 28px; object-fit: contain; }
.org-switch-menu b { display: block; font: 600 12px var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.org-switch-menu small { display: block; color: var(--text-muted); font-size: 12px; }
.sheet-item.org-item { display: flex; align-items: center; gap: 10px; }
.sheet-item.org-item img { width: 22px; height: 22px; object-fit: contain; }
.org-chooser { max-width: 560px; }
.org-list { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.org-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); color: var(--text); text-decoration: none; }
.org-card:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); text-decoration: none; }
.org-card img { width: 44px; height: 44px; object-fit: contain; }
.org-card b { display: block; font: 600 15px var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.org-card small { display: block; color: var(--text-muted); font-family: var(--mono); font-size: 12px; margin-top: 2px; }

/* ---------------------------------------------------------------- Erscheinungsbild: Live-Vorschau */
.brand-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.brand-forms { display: grid; gap: 18px; min-width: 0; }
.main > .brand-layout + .card { margin-top: 18px; }
.brand-forms > .card { margin: 0; }
.brand-preview { position: sticky; top: 16px; margin: 0; display: grid; gap: 14px; }
.bp-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); }
.bp-head > div { display: grid; gap: 2px; min-width: 0; }
.bp-head strong { font: 700 15px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-logo { width: 36px; height: 36px; object-fit: contain; }
.bp-nav { display: grid; gap: 2px; }
.bp-link { padding: 7px 10px; border-left: 2px solid transparent; color: var(--text-muted); font-size: 13px; }
.bp-link.active { border-left-color: rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.12); color: var(--text); }
.bp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bp-row .btn { pointer-events: none; }
.bp-chip { padding: 2px 8px; border: 1px solid rgba(var(--accent-rgb), 0.55); color: rgb(var(--accent-hi-rgb)); font: 600 10.5px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.bp-cal, .bp-embed { display: grid; gap: 6px; }
.bp-hub { padding: 4px 10px; border-left: 3px solid var(--hub); background: rgba(var(--hub-rgb), 0.16); color: var(--hub-hi); font-size: 12.5px; }
.bp-event { padding: 4px 10px; border-left: 3px solid rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.1); font-size: 12.5px; }
.bp-embed { padding: 10px 12px; border-left: 4px solid rgb(var(--accent-rgb)); background: #2b2d31; border-radius: 4px; }
.bp-embed .label { color: #949ba4; }
.bp-embed strong { color: #f2f3f5; font-size: 13.5px; }
@media (max-width: 1100px) {
    .brand-layout { grid-template-columns: minmax(0, 1fr); }
    .brand-preview { position: static; }
}

/* ---------------------------------------------------------------- Einrichtungs-Assistent */
.setup-hint { margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-left: 3px solid rgb(var(--accent-rgb)); }
.setup-hint .form-actions { margin: 0; }
.setup-hint-text { display: grid; gap: 6px; min-width: min(100%, 280px); flex: 1; }
.setup-bar { height: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.setup-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-lo), rgb(var(--accent-hi-rgb))); transition: width 0.3s ease; }
.setup-summary { display: grid; gap: 8px; margin-bottom: 14px; }
.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.setup-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--border); }
.setup-step:first-child { border-top: 0; }
.setup-check { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--border-strong); color: var(--on-accent); font-weight: 700; font-size: 13px; }
.setup-step.done .setup-check { background: rgb(var(--accent-rgb)); border-color: rgb(var(--accent-rgb)); }
.setup-step.done .setup-title strong { color: var(--text-muted); }
.setup-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setup-body .hint { margin: 4px 0 0; }
.setup-address { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.setup-step.next { border-left: 3px solid rgb(var(--accent-rgb)); padding-left: 12px; margin-left: -15px; }
.setup-links { display: flex; gap: 8px; flex-wrap: wrap; }
.setup-summary .meta a { color: rgb(var(--accent-hi-rgb)); }
.setup-return { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 14px;
    border: 1px solid var(--border); border-left: 3px solid rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.05); color: var(--text-muted); font-size: 0.92rem; }
.setup-return b { color: var(--text); }
.setup-address code { padding: 6px 10px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); word-break: break-all; }
@media (max-width: 640px) {
    .setup-step { grid-template-columns: 28px minmax(0, 1fr); }
    .setup-step > .btn, .setup-step > .setup-links { grid-column: 2; justify-self: start; }
}
.provided-by { margin: 4px 0 8px; font: 500 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.k-pop-version.provided-by { margin: 0; padding-top: 2px; font: 500 10px var(--sans); }
.btn.danger-text { color: var(--danger); }
.btn.danger-text:hover { border-color: var(--danger); background: var(--danger-soft); }

/* ---------------------------------------------------------------- Hinweis: eigenen Tenant einrichten */
.tenant-hint { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; border-left: 3px solid rgb(var(--accent-rgb)); }
.tenant-hint .form-actions { margin: 0; }
.tenant-hint-text { display: grid; gap: 6px; flex: 1; min-width: min(100%, 300px); }
.tenant-hint-text .hint { margin: 0; }
.tenant-steps { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; color: var(--text-muted); font-size: 0.92rem; }
.tenant-steps a { color: rgb(var(--accent-hi-rgb)); }
.tenant-login { margin-top: 18px; text-align: left; }

/* Eingabe-Dialog (statt window.prompt) */
.prompt-dialog { display: grid; gap: 14px; min-width: min(460px, 100%); }
.prompt-text p { margin: 0 0 8px; }
.prompt-list { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; color: var(--text-muted); }
.prompt-warn { color: var(--danger); font-size: 0.92rem; }
.prompt-dialog .form-actions { margin: 0; }

/* ---------------------------------------------------------------- Tenant einrichten */
.tenant-rights-box { margin-top: 6px; }
.tenant-rights-box > summary { cursor: pointer; color: rgb(var(--accent-hi-rgb)); font-size: 0.9rem; }
.tenant-rights { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 3px; font-size: 0.88rem; color: var(--text-muted); }
.tenant-rights b { color: var(--text); font-weight: 600; }
.tenant-setup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.tenant-notice:not(:empty) { margin-bottom: 14px; scroll-margin-top: 60px; }
.tenant-request, .tenant-bot-option { min-width: 0; }
.tenant-request-head .badge { white-space: normal; }
.tenant-own-form .alert[hidden] { display: none; }
.tenant-bot-option .meta .link-button { font-size: inherit; }
dialog.tenant-setup-dialog { width: min(1080px, calc(100vw - 32px)); max-width: none; }
.tenant-setup-dialog .tenant-bot-choice { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.tenant-setup-dialog .tenant-bot-option { padding: 16px 18px; }
.tenant-setup-dialog .hint, .tenant-setup-dialog .tenant-rights, .tenant-setup-dialog .tenant-steps { font-size: 0.95rem; line-height: 1.5; }
.tenant-setup h3 { margin: 0 0 10px; font: 600 12px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.tenant-servers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.tenant-servers li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); }
.tenant-servers img, .tenant-server-icon { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); font-weight: 600; }
.tenant-server-name { flex: 1; min-width: 0; display: grid; overflow-wrap: anywhere; }
.tenant-server-name small { color: var(--text-muted); font-size: 0.78rem; }
.tenant-request { border: 1px solid var(--border); padding: 14px; display: grid; gap: 10px; }
.tenant-request + .tenant-request { margin-top: 10px; }
.tenant-request-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tenant-request .form-actions, .tenant-own-form .form-actions { margin: 0; }
.tenant-bot-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tenant-bot-option { border: 1px solid var(--border); padding: 12px; display: grid; gap: 8px; align-content: start; }
.tenant-bot-option.active { border-color: rgba(var(--accent-rgb), 0.7); background: rgba(var(--accent-rgb), 0.05); }
.tenant-bot-option h4 { margin: 0; font-size: 1rem; }
.tenant-bot-option .btn { justify-self: start; }
.tenant-own-form { display: grid; gap: 6px; }
.tenant-own-avatar { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; margin-right: 8px; }


/* ---------------------------------------------------------------- Zahlenkacheln (statCard): ruhiges Layout
   Kante links statt Messing-Ecken (die beim Überfahren in die Beschriftung wuchsen), gleiche Höhe, klare Abstufung. */
.grid.stats { align-items: stretch; }
.grid.stats > .stat {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 92px;
    padding: 14px 18px 14px 20px;
    border-left: 3px solid rgba(var(--accent-rgb), 0.45);
}
.grid.stats > .stat::before { display: none; }
.grid.stats > .stat::after, .grid.stats > .stat:hover::after {
    top: 0; right: 0; bottom: 0; left: 0;
    width: auto; height: auto;
    border: 0;
}
.grid.stats > .stat .label { font-size: 0.7rem; letter-spacing: 0.14em; color: var(--text-muted); }
.grid.stats > .stat .value { font-size: 1.35rem; margin: 0; line-height: 1.25; }
.grid.stats > .stat .sub { font-size: 0.78rem; margin: 0; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid.stats > .stat.tone-ok { border-left-color: var(--success); }
.grid.stats > .stat.tone-warn { border-left-color: rgb(var(--accent-rgb)); }
.grid.stats > .stat.tone-error { border-left-color: var(--danger); }
.grid.stats > .stat.tone-error .value { color: var(--danger); }
@media (hover: hover) {
    .grid.stats > .stat:hover { border-left-color: rgb(var(--accent-hi-rgb)); }
    .grid.stats > .stat.tone-ok:hover { border-left-color: var(--success); }
    .grid.stats > .stat.tone-error:hover { border-left-color: var(--danger); }
}
@media (max-width: 700px) {
    .grid.stats > .stat { min-height: 0; padding: 12px 14px 12px 16px; }
    .grid.stats > .stat .value { font-size: 1.15rem; }
    .grid.stats > .stat .sub { white-space: normal; }
}

/* Popup „Tenant freigeschaltet“ */
dialog.tenant-approved-dialog { width: min(560px, calc(100vw - 32px)); }
.tenant-approved { display: grid; gap: 12px; justify-items: start; }
.tenant-approved-mark { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--success); color: var(--success);
    font-size: 1.5rem; background: rgba(147, 181, 139, 0.08); }
.tenant-approved-lead { margin: 0; font-size: 1.05rem; }
.tenant-approved .hint { margin: 0; line-height: 1.5; }
.tenant-approved .form-actions { margin: 4px 0 0; justify-self: stretch; }

/* Banner „Euer Tenant“: Stand je Antrag */
.tenant-states { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.tenant-state { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--text-muted); }
.tenant-state b { color: var(--text); }
.tenant-state .badge { flex: none; }
.tenant-state a { color: rgb(var(--accent-hi-rgb)); }
.tenant-hint.needs-action { border-left-color: var(--danger); }

/* Kachel „Gerade im Voice“: Zahl mit Kanalanzahl, runde Gesichter, Kanäle untereinander */
.k-kpi > b small { margin-left: 8px; font: 500 12px var(--sans); color: var(--text-muted); letter-spacing: 0; }
.k-voice-now { display: grid; gap: 8px; min-width: 0; }
.k-voice-now .k-faces img, .k-voice-now .k-faces i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #0d121a; margin-right: -7px; }
.k-voice-now .k-faces i { display: grid; place-items: center; font: 600 11px var(--sans); font-style: normal; color: var(--text-muted); }
.k-voice-now .k-faces i.more { background: rgba(var(--accent-rgb), 0.18); color: rgb(var(--accent-hi-rgb)); font-size: 10px; }
.k-voice-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; min-width: 0; }
.k-voice-channels li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--text-muted); }
.k-voice-channels li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-voice-channels li > span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success); margin-right: 7px; vertical-align: 1px; }
.k-voice-channels li > em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--text); }
.k-voice-channels li.more { font-style: italic; }

/* Lieblingsschiff (Flotte) */
.hangar-ship { position: relative; }
.fav-star { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid transparent;
    background: rgba(8, 11, 17, 0.7); color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.fav-star:hover { color: rgb(var(--accent-hi-rgb)); border-color: rgba(var(--accent-rgb), 0.5); }
.fav-star.on { color: rgb(var(--accent-hi-rgb)); }
.hangar-ship.favorite { border-color: rgba(var(--accent-rgb), 0.55); }

/* ---------- Konfiguration: Gruppen (oben) und die Reiter der gewählten Gruppe (darunter) ---------- */
.config-nav { margin-bottom: 16px; }
.config-groups { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.config-groups .chip { text-decoration: none; }
.config-nav > .subtabs { margin-bottom: 0; }
@media (max-width: 860px) {
    .config-groups { gap: 6px; }
    /* Vier Gruppen in einer Zeile (bis 360 px); wird es enger, brechen sie um. */
    .config-groups .chip { flex: 1 1 auto; justify-content: center; min-height: 40px; padding: 7px 6px; font-size: 10px; letter-spacing: 0.04em; }
    /* Reiter der Gruppe brechen um statt seitlich zu scrollen – keiner liegt außer Sicht. */
    .config-nav > .subtabs { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; padding-right: 0; }
    .config-nav .subtab { padding: 11px 10px; letter-spacing: 0.12em; }
}

/* ---------- Personalakte: Reiter auf dem Handy – die wichtigsten direkt, der Rest hinter „Mehr“ ---------- */
.profile-more { display: none; }
@media (max-width: 860px) {
    /* Reiter ganz oben (vor dem Ausweis), damit sie ohne Scrollen erreichbar sind. */
    .k-dossier { display: flex; flex-direction: column; gap: 18px; }
    .k-dossier-main { display: contents; }
    .k-dossier > *, .k-dossier-main > * { min-width: 0; max-width: 100%; }
    .k-dossier .profile-tabs { order: -1; -webkit-mask-image: none; mask-image: none; padding-right: 0; }
    .profile-tabs .profile-tab-extra { display: none; }
    .profile-tabs .subtab { padding: 12px 8px; letter-spacing: 0.08em; }
    .profile-tabs .profile-more { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; cursor: pointer; }
    .profile-more-caret { font-size: 9px; }
    .k-pop-tabs .k-pop-item { padding: 11px 10px; }
}

/* Daten: Org aus dem Hub entfernen */
.card.danger-zone { border-color: var(--danger); }
.card.danger-zone h2 { color: var(--danger, #e06666); }
.danger-list { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.danger-list li { color: var(--text-muted); }
/* ---------- Eigene Domain (Konfiguration → Erscheinungsbild) ---------- */
.custom-domain .inline-form { margin-top: 12px; }
.custom-domain .alert { margin: 12px 0 8px; }
.custom-domain-record { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 6px 14px; margin: 8px 0 10px; }
@media (max-width: 600px) {
    .custom-domain-record { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .custom-domain-record dd { margin-bottom: 8px; }
}
.custom-domain-record dt { color: var(--text-muted); font-size: 0.85rem; }
.custom-domain-record dd { margin: 0; overflow-wrap: anywhere; }
.custom-domain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.custom-domain-list li { border: 1px solid var(--border); border-radius: 8px; padding: 12px; }

/* Tenant einrichten: Bot-Wahl */
.tenant-step { margin: 0; }
.tenant-live { margin: 0; color: var(--success, #5fb98a); font-weight: 600; }
.tenant-reco { margin-left: 8px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--accent-rgb)); }
.tenant-switch summary { cursor: pointer; color: var(--text-muted); }
.tenant-switch[open] summary { margin-bottom: 10px; }
.tenant-own-setup { display: grid; gap: 10px; }
.tenant-request > .form-actions.start { display: flex; justify-content: flex-start; }
.tenant-request > .form-actions.start .btn { width: auto; flex: 0 0 auto; }