/* ════════════════════════════════════════════════════════════════════════════
   Quizlabor Assistent – Theme: monochrom (Zinc) + Akzent #FFAA33, Dark-Mode
   Farben als RGB-Tripel (von gPopup & App via rgb(var(--x)) genutzt).
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    --bg-base:      38  38  38;   /* Seiteninhalt  (zinc-800) */
    --bg-surface:   23  23  23;   /* Karten/Sidebar(zinc-900) */
    --bg-input:     45  45  45;   /* Eingabefelder (etwas heller) */
    --borderColor:  64  64  64;   /* zinc-700 */
    --textColor:   237 237 237;
    --textMuted:   161 161 161;   /* zinc-400 */
    --primaryColor:255 170  51;   /* Akzent #FFAA33 */
    --accentFg:     23  23  23;   /* dunkle Schrift auf dem Akzent */
    --colorDanger: 248 113 113;   /* red-400 (dark-tauglich) */
    --colorOk:      74 222 128;   /* green-400 */

    /* ── Abstände & Radien ──────────────────────────────────────────────────
       Zentrale Stellschrauben für die Layout-Dichte. Für Mobile später einfach
       diese Tokens verkleinern (ein Block), statt jede Regel einzeln anzufassen. */
    --pad-page:  2rem;          /* Seiten-Innenabstand (.container) */
    --pad-card:  1.25rem 1.5rem;/* Karten-Innenabstand (.card) */
    --gap-block: 1.25rem;       /* vertikaler Abstand zwischen Karten */
    --radius:    .75rem;        /* Karten-Eckenradius */
}

/* Heller Modus – überschreibt die Variablen, wenn html.theme-light aktiv ist.
   Akzent (--primaryColor) und Akzent-Schrift (--accentFg) bleiben identisch (Marke). */
html.theme-light {
    --bg-base:     245 245 246;   /* zinc-100 – Seiteninhalt */
    --bg-surface:  255 255 255;   /* weiß – Karten/Sidebar */
    --bg-input:    255 255 255;   /* weiß – Eingabefelder */
    --borderColor: 212 212 216;   /* zinc-300 */
    --textColor:    24  24  27;   /* zinc-900 */
    --textMuted:   113 113 122;   /* zinc-500 */
    --colorDanger: 220  38  38;   /* red-600 (kontrastreich auf hell) */
    --colorOk:      22 163  74;   /* green-600 */
}

/* Darstellungs-Umschalter (Sidebar-Fuß) */
.theme-switch { display: flex; gap: .25rem; margin-top: .6rem; }
.theme-switch button {
    flex: 1; background: rgb(var(--bg-input)); color: rgb(var(--textMuted));
    border: 1px solid rgb(var(--borderColor)); border-radius: .4rem;
    padding: .3rem 0; font-size: .95rem; line-height: 1; cursor: pointer;
}
.theme-switch button:hover { color: rgb(var(--textColor)); }
.theme-switch button.active {
    background: rgb(var(--primaryColor)); color: rgb(var(--accentFg));
    border-color: rgb(var(--primaryColor));
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: rgb(var(--bg-base));
    color: rgb(var(--textColor));
    line-height: 1.5;
}

h1 { margin-top: 0; }
.muted { color: rgb(var(--textMuted)); }
a { color: rgb(var(--primaryColor)); }
code {
    background: rgb(var(--bg-input));
    border: 1px solid rgb(var(--borderColor));
    border-radius: .25rem;
    padding: .05rem .35rem;
    font-size: .85em;
}

/* ── App-Shell: Sidebar + Inhalt ────────────────────────────────────────────
   Strikt nach Breite getrennt, damit sich nichts überschneidet und KEIN
   !important nötig ist:
     • gemeinsame Atome              → hier (unkonditioniert)
     • MOBILE-Shell (Follow-Menü)    → @media (max-width: 800px), weiter unten
     • DESKTOP-Shell (Spalte links)  → app-desktop.css (nur ab min-width: 801px) */

/* Navigation als scrollender Bereich – in beiden Ansichten gleich.
   min-height:0 hebt die Flex-Mindesthöhe auf, damit .nav im Desktop-Wrapper
   IN SICH scrollen kann statt die Spalte zu sprengen. */
.nav { flex: 1; min-height: 0; overflow-y: auto; }

/* Logo-Variante je Theme */
.brand-logo { display: block; width: 100%; max-width: 168px; height: auto; }
.brand-logo--light { display: none; }
html.theme-light .brand-logo--dark  { display: none; }
html.theme-light .brand-logo--light { display: block; }

/* Umschalt-Checkbox der Nav-Gruppen: reiner Zustandsspeicher fürs Akkordeon,
   nie sichtbares Bedienelement – in beiden Ansichten ausgeblendet (per Label
   bleibt sie trotzdem umschaltbar). */
.nav-head input[type="checkbox"] { display: none; }

/* Schnellzugriff-Gruppe komplett ausblenden, solange keine Favoriten vorhanden.
   Greift per :has() auch live beim Anheften des ersten / Entfernen des letzten. */
.nav-quickslot:not(:has(.nav-item)) { display: none; }

/* ── Akkordeon: Nav-Gruppen einklappbar (Desktop + Mobile) ───────────────────
   Immer offen: der Schnellzugriff. Automatisch offen: die Gruppe der aktuellen
   Seite (:has(.active)). Per Klick auf den Kopf (Checkbox) auf-/zugeklappt.
   Alles andere ist eingeklappt – spart Platz in der Spalte. */
.nav-group:not(.nav-quickslot):not(:has(.active)):not(:has(.nav-head input:checked)) .nav-item {
    display: none;
}
.nav-group:not(.nav-quickslot) > .nav-head {
    display: flex; align-items: center; justify-content: space-between; cursor: pointer;
}
.nav-group:not(.nav-quickslot) > .nav-head::after {
    content: "▸"; font-size: .85em; opacity: .6;
}
.nav-group:not(.nav-quickslot):is(:has(.active), :has(.nav-head input:checked)) > .nav-head::after {
    content: "▾";
}

/* ── Favoriten-Stern am Menüpunkt (Schnellzugriff an-/abheften) ───────────────
   Dezent: nur bei Hover sichtbar; gefüllt (Akzentfarbe) = Favorit. */
.nav-fav {
    margin-left: auto; flex-shrink: 0; cursor: pointer;
    font-size: .9rem; line-height: 1; color: rgb(var(--textMuted));
    opacity: 0; transition: opacity .12s ease, color .12s ease, transform .12s ease;
}
.nav-item:hover .nav-fav { opacity: .5; }
.nav-item .nav-fav:hover { opacity: 1; color: rgb(var(--primaryColor)); transform: scale(1.15); }
.nav-fav.is-fav { opacity: 1; color: rgb(var(--primaryColor)); }
/* Touch-Geräte kennen kein Hover → Stern immer leicht sichtbar, damit anheftbar */
@media (hover: none) { .nav-fav { opacity: .45; } }

/* Schnellzugriff sortieren: Einträge sind ziehbar (Desktop). */
.nav-quickslot .nav-item[draggable="true"] { cursor: grab; }
/* Gezogene Quelle bleibt liegen – dezent, aber gut sichtbar */
.nav-quickslot .nav-item.dragging { opacity: .55; cursor: grabbing; }
/* Rausziehen = löschen → rot (überschreibt .dragging) */
.nav-quickslot .nav-item.drag-out {
    opacity: 1;
    color: rgb(var(--colorDanger));
    background: rgb(var(--colorDanger) / .15);
    border-radius: .4rem;
    text-decoration: line-through;
}
/* Grüner Einfüge-Indikator: zeigt die neue Position beim Sortieren.
   Farbe/Deckkraft/Höhe hier frei feintunen. */
.drop-indicator {
    height: 1.9rem;
    margin: .1rem 0;
    border-radius: .4rem;
    background: rgb(134 239 172 / .35);        /* helles Grün, halbtransparent */
    border: 1px dashed rgb(134 239 172 / .85);
    pointer-events: none;
}
.nav-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .6rem; border-radius: .5rem;
    color: rgb(var(--textColor)); text-decoration: none; font-size: .92rem; font-weight: 500;
}
.nav-ico { width: 1.15rem; height: 1.15rem; flex-shrink: 0; opacity: .85; }
.nav-item:hover { background: rgb(var(--bg-input)); }
.nav-item.active {
    background: rgba(255, 170, 51, .14);
    color: rgb(var(--primaryColor));
}
.nav-item.active .nav-ico { opacity: 1; }
/* „In Arbeit" – gedämpft, damit sichtbar aber klar als geplant erkennbar */
.nav-item.is-soon { color: rgb(var(--textMuted)); }
.nav-item.is-soon .nav-ico { opacity: .5; }
.nav-item.is-soon:hover { color: rgb(var(--textColor)); }

/* Platzhalterseite „In Arbeit" */
.wip { max-width: 30rem; margin: 3rem auto; text-align: center; }
.wip .nav-ico { width: 2.75rem; height: 2.75rem; opacity: .35; margin-bottom: .5rem; }
.wip h1 { margin-bottom: .25rem; }


.user { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; padding: 0 .25rem; }
.user-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: .5rem; flex-shrink: 0;
    background: rgb(var(--primaryColor)); color: rgb(var(--accentFg)); font-weight: 700; font-size: .85rem;
}
.user-name { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── MOBILE-Shell: Sidebar als schwebendes Follow-Menü (Akkordeon) ───────────
   Gilt nur ≤800px. Ab 801px übernimmt app-desktop.css die klassische Spalte,
   dadurch keine Kollision und kein !important nötig. */
@media (max-width: 800px) {
    .app { position: relative; }
    .sidebar {
        position: absolute; z-index: 999;
        top: 0; right: 0; bottom: 0;
        pointer-events: none;
    }
    .sidebar > div {
        pointer-events: all;
        position: sticky; top: 10px; left: 0;
        background-color: rgba(var(--bg-surface) / 0.95);
    }
    /* Offenes Menü: bei Überlänge intern scrollen statt unten abzuschneiden.
       Nur im offenen Zustand – sonst würde overflow den absolut positionierten
       Hamburger im eingeklappten 0-Höhe-Wrapper abschneiden. */
    .sidebar > div:has(.sidebar_switch input[type="checkbox"]:checked) {
        max-height: calc(100vh - 1.25rem);
        overflow-y: auto;
    }
    /* Marke/Untertitel raus (Platz sparen), Hamburger-Umschalter rein */
    .sidebar .brand,
    .brand-sub { display: none; }
    .sidebar_switch { position: absolute; right: 0; }
    .sidebar_switch input { display: none; }
    /* Nav-Kopf als klickbarer Akkordeon-Titel */
    .nav-head {
        cursor: pointer; display: block; width: 100%; padding: .5rem;
        font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
        color: rgb(var(--textMuted));
    }
    /* Eingeklappt (Umschalter aus): alles außer dem Umschalter verbergen.
       Das Pro-Gruppe-Akkordeon liegt gemeinsam weiter oben (gilt auch Desktop). */
    .sidebar > div:not(:has(.sidebar_switch input[type="checkbox"]:checked)) *:is(.nav-head, .nav-item, .sidebar-foot) { display: none; }
}

.content { flex: 1; min-width: 0; }
.container { overflow-x: auto; max-width: 900px; margin: 0 auto; padding: var(--pad-page) var(--pad-page) calc(var(--pad-page) * 2); }
/* Breite Seiten (z. B. Kalender): mehr Platz, füllt fluid bis zum Rahmen */
.container--wide { max-width: 1280px; }

/* Gast-Ansicht (Login) – ohne Sidebar */
.guest { min-height: 100vh; }

/* ── Karten ─────────────────────────────────────────────────────────────────── */
.card {
    background: rgb(var(--bg-surface));
    border: 1px solid rgb(var(--borderColor));
    border-radius: var(--radius);
    padding: var(--pad-card);
    margin: var(--gap-block) 0;
}
.card h2 { margin-top: 0; font-size: 1.1rem; }

/* ── Detail-Liste (read-only Stammdaten, Label/Wert) ────────────────────────── */
.detail-list { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: 0; }
.detail-list dt { color: rgb(var(--textMuted)); font-size: .85rem; }
.detail-list dd { margin: 0; }
@media (max-width: 560px) {
    .detail-list { grid-template-columns: 1fr; gap: .1rem 0; }
    .detail-list dd { margin-bottom: .5rem; }
}

/* ── Entfernbare Zuordnungsliste (z. B. Stammteam-Zuordnungen) ───────────────── */
.assign-list { list-style: none; margin: .5rem 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.assign-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .4rem .6rem; border: 1px solid rgb(var(--borderColor)); border-radius: .5rem; }
.assign-list .inline-form { margin: 0; }
.btn-link-danger { background: none; border: none; cursor: pointer; color: rgb(var(--colorDanger));
    font-size: .9rem; line-height: 1; padding: .1rem .3rem; }
.btn-link-danger:hover { opacity: .7; }

/* ── Übersichts-Karten (z. B. Stammteam-Übersicht) ──────────────────────────── */
.section-head { margin: 1.75rem 0 .75rem; font-size: 1.1rem; }
.overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 720px) { .overview-grid { grid-template-columns: 1fr; } }
.overview-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .92rem; }
.overview-list li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.strong { font-weight: 600; }
.small { font-size: .78rem; }
.team-no { font-size: .75rem; color: rgb(var(--textMuted)); }

/* ── Ergebnis-Erfassung (scores) ────────────────────────────────────────────── */
.scores-toolbar { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; margin-bottom: 1rem; }
.scores-rounds { display: inline-flex; align-items: center; gap: .5rem; }
.scores-table th, .scores-table td { text-align: center; vertical-align: middle; }
.scores-table td:nth-child(2) { text-align: left; }
.scores-table input[type="text"], .scores-table input[type="number"] {
    padding: .25rem .4rem; font-size: .9rem;
}
.w-narrow { width: 6rem; }
.w-team { min-width: 11rem; width: 100%; }
.w-mini { width: 3.5rem; text-align: center; }

/* ── Kennzahlen-Kacheln + scrollbare Historie-Tabellen ──────────────────────── */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .75rem; margin: .25rem 0 1.25rem; }
.stat-tile { border: 1px solid rgb(var(--borderColor)); border-radius: .6rem; padding: .6rem .8rem; }
.stat-label { font-size: .72rem; color: rgb(var(--textMuted)); text-transform: uppercase; letter-spacing: .03em; }
.stat-value { font-size: 1.4rem; font-weight: 600; margin-top: .15rem; }
.table-scroll { overflow-x: auto; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    background: rgb(var(--primaryColor));
    color: rgb(var(--accentFg));
    border: none; border-radius: .5rem;
    padding: .5rem 1rem; font-size: .95rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn-ghost {
    display: inline-block;
    background: none; border: 1px solid rgb(var(--borderColor)); border-radius: .5rem;
    padding: .5rem 1rem; cursor: pointer; color: rgb(var(--textColor)); font: inherit;
    text-decoration: none;
}
.btn-ghost:hover { background: rgb(var(--bg-input)); }
.btn:disabled, .btn-ghost:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn-ghost:disabled:hover { background: none; }
.linkbtn {
    background: none; border: none; padding: 0; cursor: pointer;
    color: rgb(var(--textMuted)); font: inherit; text-decoration: underline;
}
.linkbtn:hover { color: rgb(var(--primaryColor)); }
.linkbtn-danger:hover { color: rgb(var(--colorDanger)); }

/* ── Aufgaben-Aktionen / Zustände ───────────────────────────────────────────── */
.row-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
form.inline { display: inline; margin: 0; }
.task-done { text-decoration: line-through; color: rgb(var(--textMuted)); }
.task-overdue { color: rgb(var(--colorDanger)); font-weight: 600; white-space: nowrap;}

/* ── Dashboard ──────────────────────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem;
    background: rgb(var(--bg-surface)); border: 1px solid rgb(var(--borderColor));
    border-radius: .6rem; text-decoration: none; color: inherit; }
a.kpi:hover { border-color: rgb(var(--primaryColor)); }
.kpi-num { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.kpi-lbl { font-size: .8rem; color: rgb(var(--textMuted)); }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 800px) { .dash-cols { grid-template-columns: 1fr; } }
.card-head { display: flex; justify-content: space-between; align-items: baseline; }
.card-head h2 { margin: 0 0 .5rem; }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { display: flex; justify-content: space-between; align-items: center;
    gap: .75rem; padding: .55rem 0; border-top: 1px solid rgb(var(--borderColor)); cursor: pointer; }
.dash-list li:first-child { border-top: none; }
.dash-list li:hover .strong { color: rgb(var(--primaryColor)); }
.dash-side { flex-shrink: 0; font-size: .85rem; }

/* ── Mailvorlagen-Editor ────────────────────────────────────────────────────── */
.mail-editor { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .mail-editor { grid-template-columns: 1fr; } }
.mail-aside .card { margin-bottom: 1rem; }
.mail-aside .card h2 { margin-top: 0; font-size: 1rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { font-family: ui-monospace, monospace; font-size: .72rem; cursor: pointer;
    background: rgb(var(--bg-input)); color: rgb(var(--textColor));
    border: 1px solid rgb(var(--borderColor)); border-radius: .3rem; padding: .2rem .4rem; }
.chip:hover { border-color: rgb(var(--primaryColor)); color: rgb(var(--primaryColor)); }
.mail-preview { font-size: .9rem; line-height: 1.5; }
.mail-preview-subj { margin-bottom: .5rem; }
.mail-preview hr { border: none; border-top: 1px solid rgb(var(--borderColor)); margin: .5rem 0; }
.form-danger { margin-top: 1.5rem; }

/* ── Seitenkopf ─────────────────────────────────────────────────────────────── */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.page-head h1 { margin: 0; }
/* Bild + Überschrift als eine Gruppe, damit space-between sie zusammenhält. */
.page-head-title { display: inline-flex; align-items: center; gap: .75rem; min-width: 0; }
.page-head-thumb {
    flex-shrink: 0; width: 2.75rem; height: 2.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgb(var(--borderColor)); border-radius: .4rem;
    background: rgb(var(--bg-input)); overflow: hidden;
}
.page-head-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-head-thumb a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.page-head-thumb-q { width: 1.4rem; height: 1.4rem; color: rgb(var(--textMuted)); opacity: .4; }

/* ── DB-Check-Tabelle (Startseite) ──────────────────────────────────────────── */
.db-check { width: 100%; border-collapse: collapse; }
.db-check th, .db-check td {
    text-align: left; padding: .4rem .6rem;
    border-bottom: 1px solid rgb(var(--borderColor)); font-size: .9rem;
}
.db-check th { color: rgb(var(--textMuted)); font-weight: 600; }
.db-check .ok   { color: rgb(var(--colorOk)); }
.db-check .fail { color: rgb(var(--colorDanger)); font-family: monospace; font-size: .8rem; }

/* ── Datentabelle ───────────────────────────────────────────────────────────── */
.table-card { padding: 0; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem;}
.data-table th, .data-table td { padding: .6rem .6rem; text-align: left; border-bottom: 1px solid rgb(var(--borderColor)); }
.data-table th { color: rgb(var(--textMuted)); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.data-table th.num, .data-table td.num { text-align: right; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .strong { font-weight: 600; }
.data-table .empty { text-align: center; color: rgb(var(--textMuted)); padding: 2rem; }
.data-table .sub { font-size: .78rem; color: rgb(var(--textMuted)); margin-top: .15rem; }
/* Beleg-Link als reines Icon (Fahrtenbuch): der Hinweis steckt im title/aria-label. */
.doc-link { display: inline-flex; color: rgb(var(--textMuted)); }
.doc-link:hover { color: rgb(var(--primaryColor)); }
.doc-link .nav-ico { opacity: 1; }
.row-link { cursor: pointer; }
.row-link:hover { background: rgb(var(--bg-input)); }
/* „Hauptlink" einer klickbaren Zeile: sieht wie normaler Text aus, ist aber ein echter <a>
   (Neu-Tab per Strg/Mittelklick). Der Zeilen-Hover liefert weiterhin die Klick-Andeutung. */
a[data-row-main] { color: inherit; text-decoration: none; }
a[data-row-main]:hover { text-decoration: underline; }

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 3px; font-size: .75rem; font-weight: 600; }
.badge-active   { background: rgba(74,222,128,.15);  color: rgb(var(--colorOk)); }
.badge-internal { background: rgba(255,170,51,.16);  color: rgb(var(--primaryColor)); }
/* Wer moderiert (VA-Karte). Zurückhaltend: steht auf jeder Karte, soll die
   Dringlichkeits-Marker daneben nicht überstrahlen. */
.badge-mods     { background: rgba(148,163,184,.16); color: rgb(var(--textColor)); font-weight: 500; }
.badge-archived,
.badge-inactive,
.badge-hidden,
.badge-private   { background: rgba(161,161,161,.16); color: rgb(var(--textMuted)); }
.badge-public    { background: rgba(74,222,128,.15);  color: rgb(var(--colorOk)); }
.badge-unconfirmed { background: rgba(255,170,51,.16); color: rgb(var(--primaryColor)); }
.badge-cancelled { background: rgba(248,113,113,.16); color: rgb(var(--colorDanger)); }
/* Reservierungs-Status */
.badge-requested    { background: rgba(255,170,51,.16);  color: rgb(var(--primaryColor)); }
.badge-invited      { background: rgba(96,165,250,.16);  color: rgb(96,165,250); }
.badge-committed    { background: rgba(74,222,128,.15);  color: rgb(var(--colorOk)); }
.badge-not-accepted { background: rgba(251,146,60,.18);  color: rgb(251,146,60); }
.badge-waitlist     { background: rgba(148,163,184,.18); color: rgb(148,163,184); }

/* Inline-Status-Dropdown in der Reservierungsliste: farbige Pille (Farbe via badge-*),
   Form nur hier (Tabelle liegt außerhalb von .form). Eigener Name, da .status-select
   bereits für die Rechnungs-/Angebots-Auswahl (neutral) vergeben ist. */
.res-status-select {
    -webkit-appearance: none; appearance: none;
    border: 1px solid transparent; border-radius: 999px;
    padding: .1rem 1.4rem .1rem .55rem; font: inherit;
    font-size: .75rem; font-weight: 600; line-height: 1.4;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path d="M2 3l3 3 3-3" stroke="%23888" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat; background-position: right .45rem center;
}
.res-status-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 170, 51, .22); }
.res-status-select option { color: rgb(var(--textColor)); background: rgb(var(--bg-input)); font-weight: 500; }

/* Auswahl-Durchschalter im Tabellenkopf der Reservierungsliste. */
.sel-cycle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.2rem; height: 1.2rem; padding: 0;
    border: 1px solid rgb(var(--borderColor)); border-radius: .3rem;
    background: transparent; cursor: pointer;
    color: rgb(var(--primaryColor)); font-size: .8rem; line-height: 1;
}
.sel-cycle:hover { border-color: rgb(var(--primaryColor)); }
.sel-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 999px; }

/* ── Formulare ──────────────────────────────────────────────────────────────── */
.form label { display: block; margin: .75rem 0; font-size: .9rem; color: rgb(var(--textMuted)); }
.form label.checkbox { display: flex; align-items: center; gap: .4rem; }
.form input[type="text"],
.form input[type="password"],
.form input[type="number"],
.form input[type="email"],
.form select,
.form textarea {
    display: block; width: 100%; margin-top: .25rem;
    padding: .5rem .6rem; font-size: 1rem; font-family: inherit;
    border: 1px solid rgb(var(--borderColor)); border-radius: .5rem;
    background: rgb(var(--bg-input)); color: rgb(var(--textColor));
}
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none; border-color: rgb(var(--primaryColor));
    box-shadow: 0 0 0 3px rgba(255, 170, 51, .22);
}
.form textarea { resize: vertical; }
.form input:disabled { background: rgb(var(--bg-surface)); color: rgb(var(--textMuted)); }
/* Scores-Tabelle: feste Feldbreiten, damit die Spalten nicht so schmal gequetscht werden,
   dass die Zahl im Feld unsichtbar wird (überschreibt .form input width:100% + .data-table
   width:100%). Eine breite Tabelle scrollt via .table-scroll. */
.scores-table { width: auto; min-width: 100%; }
.scores-table input.w-mini { width: 3.5rem; box-sizing: border-box; }
.scores-table input.w-team { width: 12rem; box-sizing: border-box; }
.form small.muted { display: block; margin-top: .2rem; font-size: .78rem; }
/* Nur-Lese-Wert an Feldposition (z. B. Bargeld in der Abrechnung: fuehrt der Kassenwart).
   Bewusst KEIN disabled input – ein graues Feld sieht nach „kaputt/spaeter freigeschaltet"
   aus, hier ist die Zahl aber endgueltig und kommt nur woanders her. */
.form-static {
    display: block; margin: .25rem 0 0; padding: .5rem 0;
    font-size: 1rem; font-weight: 600; color: rgb(var(--textColor));
}
.field-error { display: block; margin-top: .25rem; color: rgb(var(--colorDanger)); font-size: .8rem; }
.field-hint { display: block; margin-top: .2rem; color: rgb(var(--textMuted)); font-size: .78rem; }
.form-actions { display: flex; gap: .75rem; margin-top: 1.25rem; }

/* Seiten-Formulare: mehrspaltige Zeilen + Fieldset.
   Keine max-width mehr: im Popup soll das Formular die volle Panel-Breite nutzen. */
.form-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.form-row > label { flex: 1; }
.checkbox-line { display: inline-flex; align-items: center; gap: .4rem; }
.checkbox-line input { width: auto; }
.form-accept { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgb(var(--borderColor)); display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.form-accept p { margin: 0; font-size: .85rem; }

/* Filter-Reiter (z. B. Buchungsanfragen) */
.filter-tabs { display: flex; flex-wrap: wrap; gap: .3rem .4rem; margin: 0 0 1rem; font-size: .9rem; }
.filter-tabs a {
    padding: .25rem .7rem; border-radius: 999px; text-decoration: none;
    color: rgb(var(--textMuted)); border: 1px solid rgb(var(--borderColor));
}
.filter-tabs a:hover { background: rgb(var(--bg-input)); color: rgb(var(--textColor)); }
.filter-tabs a.active {
    background: rgba(255, 170, 51, .14); color: rgb(var(--primaryColor));
    border-color: transparent;
}

/* Filterleiste Veranstaltungsübersicht (Chips mit Wappen) */
.va-filters { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.filter-row { flex-direction: column; display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.filter-label { flex-shrink: 0; width: 8rem; padding-top: .35rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--textMuted)); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1; min-width: 0; }
.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .6rem; border-radius: 2px; font-size: .85rem;
    border: 1px solid rgb(var(--borderColor)); background: rgb(var(--bg-surface));
    color: rgb(var(--textColor)); text-decoration: none;
}
.chip:hover { background: rgb(var(--bg-input)); }
.chip.active { background: rgba(255, 170, 51, .14); color: rgb(var(--primaryColor)); border-color: transparent; }
.chip img { width: 1.15rem; height: 1.15rem; object-fit: contain; }
.chip-reset { color: rgb(var(--textMuted)); }
/* Stillgelegtes Format: Events sind normal ausgeblendet, der Chip holt sie zurück. */
.chip-retired:not(.active) { color: rgb(var(--textMuted)); border-style: dashed; }
/* Fehlerart-Chips: Punkt zeigt die Dringlichkeit – gleiche Farben wie die Marker. */
.chip-sev-alarm::before, .chip-sev-open::before {
    content: ''; width: .45rem; height: .45rem; border-radius: 50%; flex-shrink: 0;
}
.chip-sev-alarm::before { background: #ef4444; }
.chip-sev-open::before  { background: #f59e0b; }

/* Veranstaltungs-Karten (Button je VA) + To-do-Marker */
.va-list { display: flex; flex-direction: column; gap: .5rem; }
.va-empty { padding: 2rem; text-align: center; color: rgb(var(--textMuted)); }
.va-card {
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1rem; border-radius: .6rem; cursor: pointer;
    background: rgb(var(--bg-surface)); border: 1px solid rgb(var(--borderColor));
    /* Damit die randbündige Vorschau die runden Ecken nicht überragt. */
    overflow: hidden;
    /* Die Karte ist ein <a> – Linkfarbe/-unterstreichung neutralisieren. */
    color: inherit; text-decoration: none;
}
.va-card:hover { border-color: rgb(var(--primaryColor)); background: rgb(var(--bg-input)); }
.va-card-date { flex-shrink: 0; width: 6rem; display: flex; flex-direction: column; line-height: 1.25; }
.va-card-date .sub { color: rgb(var(--textMuted)); font-size: .8rem; }
.va-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.va-card-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-card-meta { color: rgb(var(--textMuted)); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-card .badge { flex-shrink: 0; }
/* Belegungsspalte (Text + Fortschrittsbalken) und Status-Zähler-Cluster in va-Karten. */
.va-card-occ { flex-shrink: 0; font-size: .85rem; line-height: 1.35; }
.va-card-res { flex-shrink: 0; display: inline-flex; flex-wrap: wrap; gap: .25rem; max-width: 9rem; justify-content: flex-end; }
/* Sekundär-Label (z. B. Gruppe) und rechtsbündige Kennzahl-Zeile in va-Karten. */
.va-card-tag { flex-shrink: 0; color: rgb(var(--textMuted)); font-size: .85rem; }
.va-card-nums { flex-shrink: 0; font-size: .85rem; color: rgb(var(--textMuted)); text-align: right; white-space: nowrap; }
/* Karte mit Aktions-Buttons: der Hauptlink liegt als unsichtbare Fläche über der ganzen
   Karte (stretched link), die Buttons/Formulare werden per z-index darübergehoben und
   bleiben eigenständig klickbar. So ist die ganze Zeile ein echter <a> UND die Aktionen gehen. */
.va-card { position: relative; }
.va-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.va-card-actions { position: relative; z-index: 2; }
.va-todos { flex-shrink: 0; display: flex; gap: .3rem; align-items: center; }
.va-todo { display: inline-flex; }
.va-todo .nav-ico { width: 1.15rem; height: 1.15rem; }
/* Zwei Dringlichkeiten (EventStatus): alarm = blockierend, open = To-do.
   Erledigtes wird bewusst gar nicht angezeigt – die Liste zeigt, was fehlt. */
.va-todo.open .nav-ico { color: #f59e0b; }
.va-todo.alarm .nav-ico { color: #ef4444; }

/* Vorschaubild ganz rechts, über die volle Kartenhöhe: `align-self: stretch`
   füllt den Inhaltsbereich, die negativen Ränder heben den Innenabstand der
   Karte auf, damit das Bild bündig am Rand sitzt. */
.va-card-thumb {
    flex-shrink: 0; align-self: stretch;
    margin: -.7rem -1rem -.7rem 0;
    width: 5rem;
    display: flex; align-items: center; justify-content: center;
    background: rgb(var(--bg-input));
    border-left: 1px solid rgb(var(--borderColor));
}
.va-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Platzhalter-Q: zurückhaltend, es ist die Abwesenheit eines Bildes. */
.va-card-thumb-q { width: 1.5rem; height: 1.5rem; color: rgb(var(--textMuted)); opacity: .4; }

/* ── VA-Abrechnung: Klaerungsliste ────────────────────────────────────────────
   Monats-Zwischenzeile gliedert das Jahr, ohne eine eigene Tabelle je Monat
   optisch zu zerreissen. Thumb bewusst klein: die Liste ist kurz, da kostet
   Wiedererkennung keine Uebersicht. */
.settle-month {
    margin: 1.5rem 0 .5rem; font-size: 1rem; font-weight: 600;
    color: rgb(var(--textColor));
}
.settle-month .muted { font-weight: 400; font-size: .85rem; }
.settle-thumb { width: 56px; padding-right: 0; }
.settle-thumb img {
    width: 48px; height: 48px; object-fit: cover; display: block;
    border-radius: .35rem; background: rgb(var(--bg-surface));
}
.settle-date { white-space: nowrap; }
.settle-task { text-align: right; white-space: nowrap; }
.data-table td small.muted { display: block; margin-top: .15rem; font-size: .78rem; }

/* Schmale Fenster: Die Karte behält ihr Ein-Zeilen-Layout wie ab 640px – die
   Liste scrollt stattdessen horizontal. Umbrechen zerlegte die Karte sonst in
   schlecht lesbare Blöcke. */
@media (max-width: 640px) {
    .va-list { overflow-x: auto; }
    /* Karten füllen die Scrollbreite, statt bei der Sichtbreite abzuschneiden. */
    .va-list > * { min-width: 34rem; }
}

/* Seiten-Blätterleiste unter der VA-Liste */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 1rem 0; }
.pager-gap { padding: .25rem .3rem; color: rgb(var(--textMuted)); }
.pager-info { margin-left: auto; font-size: .8rem; color: rgb(var(--textMuted)); }

/* ── Reisekosten ────────────────────────────────────────────────────────────── */
.alert-warn { background: rgba(255,170,51,.12); border: 1px solid rgba(255,170,51,.4); color: rgb(var(--primaryColor)); }

/* Status-Badges Reise (draft nutzt bestehendes .badge-draft) */
.badge-submitted { background: rgba(96,165,250,.16);  color: rgb(96,165,250); }
.badge-approved  { background: rgba(74,222,128,.15);  color: rgb(var(--colorOk)); }
.badge-rejected  { background: rgba(248,113,113,.16); color: rgb(var(--colorDanger)); }
.badge-exported  { background: rgba(129,140,248,.18); color: rgb(129,140,248); }

/* Reise-Liste: Betrag + Aktions-Icons in der Karte */
.va-card-amount { flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.va-card-actions { flex-shrink: 0; display: flex; gap: .25rem; align-items: center; }
.va-card-actions form { margin: 0; }
.iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; border-radius: .4rem; cursor: pointer;
    background: none; border: 1px solid rgb(var(--borderColor));
    color: rgb(var(--textColor)); text-decoration: none; font-size: .95rem; line-height: 1;
}
.iconbtn:hover { background: rgb(var(--bg-input)); border-color: rgb(var(--primaryColor)); }

/* Reise-Formular: dynamische Zeilen (Mitfahrer/Kosten) + Vorschau */
.trip-form .form-fieldset { margin-bottom: 1rem; }
.trip-row { align-items: flex-start; gap: .6rem; }
.trip-row-del { align-self: center; margin-top: .4rem; flex: 0 0 auto; }
.trip-preview {
    margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: .6rem;
    background: rgb(var(--bg-surface)); border: 1px solid rgb(var(--borderColor));
}
.trip-preview-head { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: rgb(var(--textMuted)); margin-bottom: .5rem; }
.trip-preview-rows { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; }
.trip-preview-rows .strong { font-weight: 700; }
.trip-preview-rows span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; }

/* Reise-Belege (privater Upload) */
.trip-receipts { margin-top: 1.5rem; }
.trip-receipts-head { font-size: 1rem; margin: 0 0 .6rem; }
.receipt-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.receipt-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .7rem; border-radius: .5rem;
    background: rgb(var(--bg-surface)); border: 1px solid rgb(var(--borderColor));
}
.receipt-link { text-decoration: none; color: rgb(var(--textColor)); flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.receipt-link:hover { color: rgb(var(--primaryColor)); }
.receipt-item form { margin: 0; }
.receipt-upload { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.receipt-upload input[type="file"] { flex: 1 1 16rem; font-size: .85rem; }

/* Reisekostenprüfung: Detailansicht */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.review-grid .card { margin: 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; }
.kv dt { color: rgb(var(--textMuted)); font-size: .85rem; }
.kv dd { margin: 0; text-align: right; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }

/* ── Qiki (internes Wiki) ───────────────────────────────────────────────────── */
.qiki-search { display: flex; gap: .5rem; margin: 0 0 1.25rem; flex-wrap: wrap; }
.qiki-search input[type="search"] {
    flex: 1 1 20rem; padding: .5rem .7rem; font-size: 1rem;
    border: 1px solid rgb(var(--borderColor)); border-radius: .5rem;
    background: rgb(var(--bg-input)); color: rgb(var(--textColor));
}
.qiki-cat { margin-bottom: 1.5rem; }
.qiki-cat-head { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--textMuted)); margin: 0 0 .6rem; }
.qiki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.qiki-card {
    display: flex; flex-direction: column; gap: .3rem; padding: .7rem .9rem;
    border-radius: .6rem; text-decoration: none; color: inherit;
    background: rgb(var(--bg-surface)); border: 1px solid rgb(var(--borderColor));
}
.qiki-card:hover { border-color: rgb(var(--primaryColor)); background: rgb(var(--bg-input)); }
.qiki-card-title { font-weight: 600; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.qiki-card-preview { font-size: .82rem; color: rgb(var(--textMuted)); line-height: 1.35; }
.qiki-crumb { font-size: .8rem; color: rgb(var(--textMuted)); }
.qiki-actions { display: flex; gap: .4rem; align-items: flex-start; }
.qiki-actions form { margin: 0; }
.qiki-preview-bar { margin: .5rem 0; }
.qiki-preview:empty { display: none; }
.qiki-preview { border: 1px dashed rgb(var(--borderColor)); border-radius: .5rem; padding: .3rem 1rem; margin-bottom: 1rem; }
/* ── Listen-Live-Suche (wiederverwendbar) ───────────────────────────────────── */
.list-search { margin: 0 0 1rem; }
.list-search input[type="search"] {
    width: 100%; max-width: 30rem; padding: .5rem .7rem; font-size: 1rem;
    border: 1px solid rgb(var(--borderColor)); border-radius: .5rem;
    background: rgb(var(--bg-input)); color: rgb(var(--textColor));
}

/* ── Ausklappbare Historie (native <details>) ───────────────────────────────── */
details.history { margin-top: .5rem; }
details.history > summary {
    cursor: pointer; list-style: none; user-select: none;
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .7rem; border-radius: .5rem; font-weight: 600;
    background: rgb(var(--bg-surface)); border: 1px solid rgb(var(--borderColor));
}
details.history > summary::-webkit-details-marker { display: none; }
details.history > summary::before { content: "▸"; color: rgb(var(--textMuted)); }
details.history[open] > summary::before { content: "▾"; }
details.history > summary:hover { border-color: rgb(var(--primaryColor)); }
details.history > .table-scroll { margin-top: .5rem; }

.qiki-backlinks { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgb(var(--borderColor)); }
.qiki-backlinks h2 { font-size: .95rem; margin: 0 0 .4rem; }
.qiki-backlinks ul { margin: 0; padding-left: 1.2rem; }
.qiki-updated { font-size: .8rem; margin-top: 1.5rem; }

/* Gerendertes Wiki-Markdown (Leseansicht + Vorschau) */
.wiki-body { line-height: 1.6; }
.wiki-body h1, .wiki-body h2, .wiki-body h3, .wiki-body h4 { font-weight: 600; line-height: 1.25; margin: 1.1em 0 .5em; }
.wiki-body h1 { font-size: 1.6rem; }
.wiki-body h2 { font-size: 1.3rem; padding-bottom: .3em; border-bottom: 1px solid rgb(var(--borderColor)); }
.wiki-body h3 { font-size: 1.1rem; }
.wiki-body p { margin: .6em 0; }
.wiki-body ul, .wiki-body ol { margin: .6em 0; padding-left: 1.5em; }
.wiki-body li { margin: .25em 0; }
.wiki-body a { color: rgb(96,165,250); text-decoration: underline; }
.wiki-body a:hover { color: rgb(59,130,246); }
.wiki-body a.wiki-link--missing { color: rgb(var(--colorDanger)); }
.wiki-body img { max-width: 100%; height: auto; border-radius: .5rem; margin: .6em 0; }
.wiki-body code { font-family: ui-monospace, monospace; font-size: .9em; background: rgba(127,127,127,.16); padding: .1em .35em; border-radius: .3em; }
.wiki-body pre { background: rgba(127,127,127,.12); padding: .8em 1em; border-radius: .5em; overflow-x: auto; }
.wiki-body pre code { background: none; padding: 0; }
.wiki-body blockquote { border-left: 3px solid rgb(var(--borderColor)); padding-left: 1em; margin: .6em 0; color: rgb(var(--textMuted)); }
.wiki-body table { border-collapse: collapse; margin: .6em 0; }
.wiki-body th, .wiki-body td { border: 1px solid rgb(var(--borderColor)); padding: .4em .7em; }
.wiki-body th { background: rgba(127,127,127,.12); font-weight: 600; }

/* ── Achievements ───────────────────────────────────────────────────────────── */
.ach-badge { width: 2.5rem; height: 2.5rem; object-fit: contain; border-radius: .4rem; display: inline-flex; }
.ach-badge--empty { align-items: center; justify-content: center; background: rgb(var(--bg-input)); color: rgb(var(--textMuted)); }
.ach-badge--empty .nav-ico { width: 1.3rem; height: 1.3rem; }
.ach-badge--lg { width: 5rem; height: 5rem; border: 1px solid rgb(var(--borderColor)); padding: .25rem; }
.ach-rule { margin-top: .15rem; font-size: .8rem; color: rgb(var(--primaryColor)); }
.ach-current { display: flex; align-items: center; gap: 1rem; margin: -.4rem 0 .4rem; }
.ach-badge--empty { font-size: 1.3rem; }
.ach-team-list { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ach-team-list li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ach-team-name { font-weight: 600; }
.form-fieldset { border: 1px solid rgb(var(--borderColor)); border-radius: .6rem; padding: .25rem 1rem 1rem; margin: 0; }
.form-fieldset legend { padding: 0 .4rem; font-size: .78rem; color: rgb(var(--textMuted)); text-transform: uppercase; letter-spacing: .03em; }
.back-link { color: rgb(var(--textMuted)); text-decoration: none; font-size: .9rem; }
.back-link:hover { color: rgb(var(--primaryColor)); }

/* ── Login ──────────────────────────────────────────────────────────────────── */
.auth-wrap { max-width: 380px; margin: 0 auto; padding-top: 12vh; }
.auth-card h1 { margin-top: 0; font-size: 1.3rem; }
.form .btn { margin-top: 1rem; width: 100%; }

/* ── Hinweis-Boxen ──────────────────────────────────────────────────────────── */
.alert { padding: .6rem .8rem; border-radius: .5rem; font-size: .9rem; }
.alert-error { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.4); color: rgb(var(--colorDanger)); }
.alert-ok    { background: rgba(74,222,128,.12);  border: 1px solid rgba(74,222,128,.4);  color: rgb(var(--colorOk)); }
.alert-info  { background: rgba(96,165,250,.10);  border: 1px solid rgba(96,165,250,.35); }

/* ── Kalender (Monatsansicht) ──────────────────────────────────────────────── */
/* Farbpalette je Format: --cbg = Grundfarbe, --cfg = Textfarbe (dunkel/hell) */
.cal-c0 { --cbg: 139 92 246; --cfg: 221 214 254; } /* violet */
.cal-c1 { --cbg:  56 189 248; --cfg: 186 230 253; } /* sky    */
.cal-c2 { --cbg: 245 158  11; --cfg: 253 230 138; } /* amber  */
.cal-c3 { --cbg:  16 185 129; --cfg: 167 243 208; } /* emerald*/
.cal-c4 { --cbg: 244  63  94; --cfg: 254 205 211; } /* rose   */
.cal-c5 { --cbg:  34 211 238; --cfg: 165 243 252; } /* cyan   */
html.theme-light .cal-c0 { --cfg: 109  40 217; }
html.theme-light .cal-c1 { --cfg:   3 105 161; }
html.theme-light .cal-c2 { --cfg: 180  83   9; }
html.theme-light .cal-c3 { --cfg:   4 120  87; }
html.theme-light .cal-c4 { --cfg: 190  18  60; }
html.theme-light .cal-c5 { --cfg:  14 116 144; }

.cal-nav { display: flex; align-items: center; gap: .4rem; }
.cal-title { min-width: 9.5rem; text-align: center; font-weight: 600; }
.cal-navbtn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2rem; height: 2rem; padding: 0 .6rem;
    border: 1px solid rgb(var(--borderColor)); border-radius: .5rem;
    background: rgb(var(--bg-surface)); color: rgb(var(--textColor));
    text-decoration: none; font-size: 1rem; line-height: 1;
}
.cal-navbtn:hover { background: rgb(var(--bg-input)); }
.cal-today { font-size: .85rem; font-weight: 500; }

.cal-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .2rem 0 1rem; font-size: .78rem; color: rgb(var(--textMuted)); }
.cal-legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.cal-dot { width: .7rem; height: .7rem; border-radius: 50%; background: rgb(var(--cbg)); flex-shrink: 0; }

.container:has(.cal-scroll) {
    padding: 0;
}
.container:has(.cal-scroll) .page-head h1 {
    display: none;
}
.container:has(.cal-scroll) > :not([class="cal-scroll"]):first-child {
    padding-top: var(--pad-page);
}
.container:has(.cal-scroll) > :not([class="cal-scroll"]) {
    padding-left: var(--pad-page);
    padding-right: var(--pad-page);
}
.cal-weekdays {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
    text-align: center; font-size: .7rem; text-transform: uppercase;
    letter-spacing: .05em; color: rgb(var(--textMuted)); margin-bottom: .35rem;
    min-width: 20rem; /* mit .cal-grid ausgerichtet beim horizontalen Scrollen */
}
.cal-grid {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
    background: rgb(var(--borderColor));
    border: 1px solid rgb(var(--borderColor)); border-radius: .6rem; overflow: hidden;
    min-width: 20rem; /* darunter horizontal scrollen (cal-scroll), statt Zellen zu zerquetschen */
}
.cal-day { min-height: 6.2rem; background: rgb(var(--bg-surface)); padding: .2rem; }
.cal-day.out { opacity: .45; }
.cal-daynum { text-align: right; font-size: .72rem; color: rgb(var(--textMuted)); margin-bottom: .2rem; }
.cal-day.today .cal-daynum { color: rgb(var(--primaryColor)); font-weight: 700; }
.cal-chips { display: flex; flex-direction: column; gap: .2rem; }
.cal-chip {
    display: block; border-radius: .15rem; padding: .12rem .35rem;
    font-size: .72rem; line-height: 1.25; text-decoration: none; overflow: hidden;
    background: rgb(var(--cbg) / .18); color: rgb(var(--cfg));
}
html.theme-light .cal-chip { background: rgb(var(--cbg) / .14); }
.cal-chip:hover { background: rgb(var(--cbg) / .30); }
.cal-chip .t { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip .sub { display: block; font-size: .66rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip .cal-mods { font-weight: 600; }
.cal-chip .cal-hint { color: #f59e0b; font-size: .7em; margin-left: .2rem; vertical-align: middle; }
/* Eigene Moderationen: grüner Rahmen. `inset`-Schatten statt border, damit die
   Chip-Größe im engen Raster unverändert bleibt. */
.cal-chip.mine { box-shadow: inset 0 0 0 2px rgb(var(--colorOk)); }
.cal-chip.cancelled { opacity: .55; }
.cal-chip.cancelled .t { text-decoration: line-through; }
.cal-chip[draggable="true"] { cursor: grab; }
.cal-chip.dragging { opacity: .4; }
.cal-day.drop-target { box-shadow: inset 0 0 0 2px rgb(var(--primaryColor)); }

/* Quickinfo im Popup (Kalender-Chip → gPopup) */
.qi { display: flex; flex-direction: column; gap: 1rem; max-width: 24rem; margin: 0 auto; }
.qi-badge {
    display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
    padding: .18rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
    background: rgb(var(--cbg) / .18); color: rgb(var(--cfg));
}
html.theme-light .qi-badge { background: rgb(var(--cbg) / .14); }
.qi-title { margin: .1rem 0 0; font-size: 1.25rem; }
.qi-meta { display: flex; flex-direction: column; gap: .55rem; font-size: .92rem; }
.qi-row { display: flex; align-items: center; gap: .55rem; }
.qi-row .nav-ico { color: rgb(var(--textMuted)); opacity: 1; }
.qi-hints { display: flex; flex-wrap: wrap; gap: .4rem; }
.qi-hint {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 500;
    background: rgba(245, 158, 11, .16); color: #b45309;
}
html:not(.theme-light) .qi-hint { color: #fbbf24; }
.qi-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .3rem; }
.qi-actions .btn, .qi-actions .btn-ghost { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.qi-actions .nav-ico { width: 1rem; height: 1rem; }


/* ── gPopup: Spinner-Animation ──────────────────────────────────────────────── */
@keyframes gPopupSpin { to { transform: rotate(360deg); } }

/* ── Belege (Angebote/Rechnungen) ───────────────────────────────────────────── */
[x-cloak] { display: none !important; }

.badge-draft          { background: rgba(161,161,161,.16); color: rgb(var(--textMuted)); }
.badge-offer-sent     { background: rgba(96,165,250,.16);  color: rgb(96,165,250); }
.badge-offer-accepted { background: rgba(129,140,248,.18); color: rgb(129,140,248); }
.badge-in-progress    { background: rgba(255,170,51,.16);  color: rgb(var(--primaryColor)); }
.badge-invoice-sent   { background: rgba(251,191,36,.18);  color: rgb(251,191,36); }
.badge-paid           { background: rgba(74,222,128,.15);  color: rgb(var(--colorOk)); }

.radio-row { display: flex; gap: 1.25rem; margin-bottom: .75rem; }

.status-select { font-size: .8rem; padding: .3rem .5rem; border-radius: .4rem;
    background: rgb(var(--bg-input)); color: rgb(var(--textColor)); border: 1px solid rgb(var(--borderColor)); }

.items-table input { width: 100%; font-size: .85rem; padding: .35rem .5rem; }
.items-table .item-desc { margin-top: .3rem; font-size: .78rem; color: rgb(var(--textMuted)); }
.items-table td { vertical-align: top; }
.items-table .w-qty   { width: 7rem; }
.items-table .w-unit  { width: 9rem; }
.items-table .w-price { width: 9rem; }
.items-table .w-sum   { width: 8rem; white-space: nowrap; }
.items-table .w-del   { width: 2.5rem; }
.items-actions { margin: .75rem 0 1rem; }

.totals-box { max-width: 24rem; margin-left: auto; padding: 1rem 1.25rem; }
.totals-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .3rem 0; }
.totals-tax input { width: 4.5rem; text-align: right; display: inline-block; padding: .25rem .4rem; font-size: .85rem; }
.totals-gross { border-top: 1px solid rgb(var(--borderColor)); margin-top: .35rem; padding-top: .6rem; font-size: 1.05rem; }

/* ── Firmendaten: Logo-Vorschau ─────────────────────────────────────────────── */
.logo-preview { margin: .4rem 0; padding: .6rem; display: inline-block;
    background: rgb(var(--bg-input)); border: 1px solid rgb(var(--borderColor)); border-radius: .4rem; }
.logo-preview img { max-height: 70px; max-width: 240px; display: block; cursor: zoom-in; }
.crest-col { width: 2.5rem; }
.crest-thumb { width: 1.75rem; height: 1.75rem; object-fit: contain; display: block; }

/* ── Filter-Tabs (z. B. Abrechnungs-Übersicht) ──────────────────────────────── */
.tabs { display: flex; gap: .35rem; margin: .25rem 0 1rem; flex-wrap: wrap; }
.tab { padding: .35rem .8rem; border-radius: .45rem; font-size: .85rem;
    border: 1px solid rgb(var(--borderColor)); color: rgb(var(--textMuted)); text-decoration: none; }
.tab:hover { color: rgb(var(--textColor)); border-color: rgb(var(--textMuted)); }
.tab.active { background: rgb(var(--primaryColor)); color: rgb(var(--accentFg));
    border-color: rgb(var(--primaryColor)); font-weight: 600; }

/* ── Benutzerverwaltung ─────────────────────────────────────────────────────── */
.roles-box { border: 1px solid rgb(var(--borderColor)); border-radius: .5rem; padding: .75rem 1rem; margin: .25rem 0 1rem; }
.roles-box legend { padding: 0 .4rem; font-size: .85rem; color: rgb(var(--textMuted)); }
.roles-grid { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.link-copy { width: 100%; margin-top: .5rem; font-family: ui-monospace, monospace; font-size: .8rem;
    padding: .45rem .6rem; border-radius: .4rem; background: rgb(var(--bg-input));
    color: rgb(var(--textColor)); border: 1px solid rgb(var(--borderColor)); }

/* Reservierungsübersicht: aufmerksamkeits-Zeile (offene Anfragen) + Belegungsbalken */
.row-attention { background: rgb(var(--primaryColor) / .10); }
.progress { margin-top: .3rem; height: 6px; width: 120px; overflow: hidden; border-radius: 999px;
    background: rgb(148 163 184 / .25); }
.progress-fill { height: 100%; background: rgb(var(--primaryColor)); }
.progress-fill.over { background: rgb(var(--colorDanger)); }