/* ═══════════════════════════════════════════════════════════════════════════
   Loheide Hub – Oberfläche

   Haltung: ein Werkzeug, kein Produktprospekt. Scharfe Kanten, Haarlinien
   statt Schatten, viel Neutralton und genau eine Akzentfarbe. Dichte
   Tabellen, weil hier gearbeitet und nicht gescrollt wird.

   Kein Build-Schritt, keine Web-Fonts, keine externen Abrufe – das hält die
   Content-Security-Policy streng und die Seite auch auf langsamen
   Verbindungen sofort da.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Farben ──────────────────────────────────────────────────────────────── */
:root {
    color-scheme: light dark;

    /* Neutralton: kühles Graphit, leicht blaustichig – wirkt technischer als
       ein reines Grau, ohne farbig zu werden. */
    --canvas:        #f5f6f8;
    --surface:       #ffffff;
    --surface-2:     #f0f2f5;
    --surface-3:     #e6e9ee;
    --surface-sunk:  #fafbfc;

    --ink:           #12161c;
    --ink-2:         #414b58;
    --ink-3:         #6b7684;

    --line:          #dfe3e9;
    --line-strong:   #c6ccd6;

    /* Genau ein Akzent. Alles andere ist Neutralton oder Statusfarbe. */
    --accent:        #1a5fb4;
    --accent-hover:  #144a8e;
    --accent-soft:   #eaf1fa;
    --accent-line:   #bcd3ee;
    --on-accent:     #ffffff;

    --ok:            #14683b;
    --ok-soft:       #e6f4ec;
    --ok-line:       #b7dcc7;

    --warn:          #8a5a00;
    --warn-soft:     #fdf3e2;
    --warn-line:     #ecd3a4;

    --err:           #a71d2a;
    --err-soft:      #fceceb;
    --err-line:      #f0c2be;

    --info:          #1a5fb4;
    --info-soft:     #eaf1fa;
    --info-line:     #bcd3ee;

    /* Eckig, aber nicht brutal: 3 px als Grundmaß. */
    --r-xs: 2px;
    --r-sm: 3px;
    --r-md: 4px;
    --r-lg: 6px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo,
            Consolas, "Liberation Mono", monospace;

    --nav-w: 244px;
    --topbar-h: 52px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --canvas:        #0e1116;
        --surface:       #151a21;
        --surface-2:     #1b212a;
        --surface-3:     #232b35;
        --surface-sunk:  #11151b;

        --ink:           #e4e8ee;
        --ink-2:         #a9b3c1;
        --ink-3:         #798494;

        --line:          #262e38;
        --line-strong:   #38424f;

        --accent:        #6aa5ee;
        --accent-hover:  #8bbcf5;
        --accent-soft:   #14263c;
        --accent-line:   #244a75;
        --on-accent:     #0b1521;

        --ok:            #6fce9a;
        --ok-soft:       #10261a;
        --ok-line:       #234a34;

        --warn:          #e0b25e;
        --warn-soft:     #241d0e;
        --warn-line:     #4a3c1c;

        --err:           #f08a86;
        --err-soft:      #2a1416;
        --err-line:      #59272a;

        --info:          #6aa5ee;
        --info-soft:     #14263c;
        --info-line:     #244a75;
    }
}

/* ── Grundlagen ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1;
}

h1, h2, h3, h4 {
    margin: 0 0 .5rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.012em;
    color: var(--ink);
}
h1 { font-size: 1.4rem; }
h2 { font-size: 1.075rem; }
h3 { font-size: .95rem; }
h4 { font-size: .875rem; }

p { margin: 0 0 .9rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

code, kbd, pre, .sha, .mono { font-family: var(--mono); }
code {
    font-size: .855em;
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: .06em .34em;
    border-radius: var(--r-xs);
    overflow-wrap: anywhere;
}
pre {
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    padding: .85rem 1rem;
    border-radius: var(--r-sm);
    overflow-x: auto;
    margin: 0 0 .9rem;
    font-size: .8rem;
    line-height: 1.6;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

hr { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-radius: var(--r-xs);
}

/* ── Aufbau ──────────────────────────────────────────────────────────────── */
.hub-shell { display: flex; min-height: 100vh; }

.hub-nav {
    width: var(--nav-w);
    flex: 0 0 var(--nav-w);
    background: var(--surface);
    border-right: 1px solid var(--line);
    padding: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.hub-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    height: var(--topbar-h);
    padding: 0 1rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink);
    letter-spacing: -.01em;
}
.hub-brand:hover { text-decoration: none; }
.hub-brand-mark {
    width: 26px; height: 26px;
    flex: 0 0 26px;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: var(--on-accent);
    display: grid; place-items: center;
    font-weight: 700; font-size: .69rem;
    letter-spacing: .01em;
}
.hub-brand small {
    display: block;
    font-weight: 400;
    font-size: .66rem;
    color: var(--ink-3);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: -1px;
}

.hub-nav-section {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ink-3);
    padding: 1.15rem .95rem .3rem;
    font-weight: 600;
}

.hub-nav a.hub-nav-item,
.hub-nav button.hub-nav-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    /* Der linke Rand ist die Markierung des aktiven Eintrags – deshalb
       trägt ihn jeder Eintrag, nur meist unsichtbar. */
    padding: .44rem .95rem .44rem calc(.95rem - 2px);
    border-left: 2px solid transparent;
    border-radius: 0;
    color: var(--ink-2);
    font-weight: 500;
    font-size: .82rem;
    transition: background .1s ease, color .1s ease;
}
.hub-nav a.hub-nav-item:hover,
.hub-nav button.hub-nav-item:hover {
    background: var(--surface-2);
    color: var(--ink);
    text-decoration: none;
}
.hub-nav a.hub-nav-item[aria-current="page"] {
    background: var(--accent-soft);
    border-left-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}
/* Der Abmelde-Eintrag ist ein <button> in einem Formular – anders geht ein
   POST nicht, und abmelden per GET waere ein Fehler: Jeder Link-Vorablader
   wuerde die Sitzung beenden. Damit er nicht als Knopf AUSSIEHT, muss der
   Browserrahmen weg. Das stand vorher als style-Attribut in der Vorlage und
   hatte ausgerechnet die Umrandung vergessen. */
.hub-nav button.hub-nav-item {
    width: 100%;
    border: 0;
    border-left: 2px solid transparent;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/* Fusszeile der Navigation: abgesetzt, damit „Angemeldet als" nicht wie ein
   weiterer Menuepunkt wirkt. */
.hub-nav-foot {
    margin-top: auto;
    padding-top: .5rem;
    border-top: 1px solid var(--line);
}
.hub-nav-foot .hub-nav-account {
    padding: 0 .95rem .45rem;
    font-size: .78rem;
    color: var(--ink-3);
    overflow-wrap: anywhere;
}

.hub-nav-item .hub-icon { flex: 0 0 16px; width: 16px; height: 16px; opacity: .8; }
.hub-nav a.hub-nav-item[aria-current="page"] .hub-icon { opacity: 1; }
.hub-nav-item .hub-badge { margin-left: auto; }

.hub-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.hub-topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--topbar-h);
    padding: 0 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 20;
}
.hub-topbar h1 { font-size: .95rem; font-weight: 600; margin: 0; letter-spacing: -.005em; }
.hub-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.hub-content { padding: 1.5rem; max-width: 1360px; width: 100%; }
.hub-content > * + * { margin-top: 1rem; }

/*
 * Zwei Bloecke, die im Fluss aufeinanderfolgen, halten immer Abstand - auch
 * wenn sie nicht direkt unter .hub-content haengen, sondern etwa gemeinsam in
 * einem <form> stecken. Vorher klebten solche Karten mit ihren Rahmen
 * aneinander.
 */
:is(.card, .card-grid, .stat-row, .notice, .filter-bar, .table-wrap, .empty)
+ :is(.card, .card-grid, .stat-row, .notice, .filter-bar, .table-wrap, .empty) {
    margin-top: 1rem;
}

/* Container, die ihre Abstaende selbst regeln, bleiben davon unberuehrt. */
:is(.card-grid, .row, .btn-row, .stat-row, .filter-bar)
> :is(.card, .card-grid, .stat-row, .notice, .filter-bar, .table-wrap, .empty) {
    margin-top: 0;
}

.hub-nav-toggle { display: none; }

@media (max-width: 900px) {
    .hub-shell { flex-direction: column; }
    .hub-nav {
        position: static; height: auto; width: 100%; flex: none;
        border-right: 0; border-bottom: 1px solid var(--line);
        display: none;
    }
    .hub-shell.nav-open .hub-nav { display: flex; }
    .hub-nav-toggle { display: inline-flex; }
    .hub-content { padding: 1rem; }
    .hub-topbar { padding: 0 1rem; }
}

/* ── Karten ──────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.1rem 1.25rem;
}
.card--flat, .card--raised { box-shadow: none; border-color: var(--line); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

.card-header {
    display: flex; align-items: center; gap: .6rem;
    padding-bottom: .8rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--line);
}
.card-header h2, .card-header h3 { margin: 0; }
.card-header .hub-icon { color: var(--ink-3); flex: 0 0 16px; width: 16px; height: 16px; }
.card-header .spacer { margin-left: auto; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
}

/* ── Kennzahlen ──────────────────────────────────────────────────────────── */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
/* Eine durchgehende Leiste mit Trennlinien statt einzelner Kästchen –
   ruhiger und deutlich weniger Kanten auf dem Schirm. */
.stat {
    padding: .85rem 1.15rem;
    border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; }
.stat-label {
    font-size: .67rem;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
}
.stat-value {
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.15;
    margin-top: .2rem;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.stat-hint { font-size: .74rem; color: var(--ink-3); margin-top: .1rem; }
.stat--alert .stat-value { color: var(--err); }

@media (max-width: 700px) {
    .stat { border-left: 0; border-top: 1px solid var(--line); }
    .stat:first-child { border-top: 0; }
}

/* ── Schaltflächen ───────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: 32px;
    padding: 0 .85rem;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font: inherit;
    font-size: .8rem;
    font-weight: 550;
    line-height: 1;
    cursor: pointer;
    background: var(--accent);
    color: var(--on-accent);
    transition: background .1s ease, border-color .1s ease, color .1s ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn .hub-icon { width: 15px; height: 15px; }

.btn--tonal {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink);
}
.btn--tonal:hover { background: var(--surface-2); border-color: var(--ink-3); }

.btn--outlined {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--ink-2);
}
.btn--outlined:hover { background: var(--surface-2); color: var(--ink); }

.btn--text {
    background: transparent;
    color: var(--accent);
    padding: 0 .5rem;
    border-color: transparent;
}
.btn--text:hover { background: var(--accent-soft); }

.btn--danger { background: var(--err); color: #fff; }
.btn--danger:hover { background: #8c1622; }

.btn--small { height: 27px; padding: 0 .6rem; font-size: .755rem; }
.btn--block { width: 100%; height: 36px; }

.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.btn-row--end { justify-content: flex-end; }

/* ── Formulare ───────────────────────────────────────────────────────────── */
.field { margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }

.field > label,
.field-label {
    display: block;
    font-size: .765rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: .3rem;
    letter-spacing: -.002em;
}

.input, .select, .textarea {
    width: 100%;
    padding: .42rem .6rem;
    font: inherit;
    font-size: .82rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    transition: border-color .1s ease, box-shadow .1s ease;
}
.input { height: 32px; }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.input[readonly] { background: var(--surface-2); color: var(--ink-2); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: .55; }
.textarea { min-height: 96px; resize: vertical; line-height: 1.55; padding: .5rem .6rem; }

.select {
    height: 32px;
    appearance: none;
    padding-right: 1.9rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .55rem center;
}
@media (prefers-color-scheme: dark) {
    .select {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23798494' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    }
}

.field-hint { font-size: .745rem; color: var(--ink-3); margin-top: .3rem; line-height: 1.5; }
.field-error { font-size: .745rem; color: var(--err); margin-top: .3rem; font-weight: 500; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--err); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0 1.1rem;
}
.form-grid .field--wide { grid-column: 1 / -1; }

.check {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .28rem 0;
    cursor: pointer;
}
.check input[type="checkbox"], .check input[type="radio"] {
    width: 15px; height: 15px; margin: .18rem 0 0;
    accent-color: var(--accent);
    flex: 0 0 15px;
    cursor: pointer;
}
.check-text { font-size: .825rem; }
.check-text small,
.check-text > span { display: block; color: var(--ink-3); font-size: .745rem; line-height: 1.5; margin-top: .1rem; }

fieldset {
    border: 0;
    border-top: 1px solid var(--line);
    padding: 1rem 0 0;
    margin: 0 0 1.3rem;
}
legend {
    padding: 0;
    font-weight: 600;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-3);
    /* display:block statt float:left.
       Ein <legend> wird sonst in die Lücke der Fieldset-Umrandung gesetzt; das
       war hier unerwünscht, weil die Umrandung nur eine Linie oben ist. Der
       frühere Ausweg war float:left – der hat aber alles zerlegt, was danach
       ein eigener Formatierungskontext ist: Ein Grid-Container darf einen
       Float nicht überlappen, wird also daneben gequetscht und klebte am
       rechten Rand. display:block nimmt die Sonderplatzierung genauso weg,
       ohne einen Float in die Welt zu setzen. */
    display: block;
    float: none;
    width: 100%;
    margin-bottom: .9rem;
}

/* ── Tabellen ────────────────────────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.card .table-wrap { border-radius: var(--r-sm); }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: .815rem;
    font-variant-numeric: tabular-nums;
}
table.data th, table.data td {
    padding: .5rem .8rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
table.data th {
    font-size: .665rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-3);
    background: var(--surface-sunk);
    white-space: nowrap;
    padding-top: .45rem;
    padding-bottom: .45rem;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-sunk); }
table.data td.num { text-align: right; }
table.data td.actions { text-align: right; white-space: nowrap; }
table.data .muted { color: var(--ink-3); }
table.data a { font-weight: 500; }

.empty {
    padding: 2.25rem 1.5rem;
    text-align: center;
    color: var(--ink-3);
    font-size: .82rem;
}
.empty strong { display: block; color: var(--ink); margin-bottom: .25rem; font-weight: 600; font-size: .875rem; }

/* ── Kennzeichnungen ─────────────────────────────────────────────────────── */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .05rem .4rem;
    border-radius: var(--r-xs);
    border: 1px solid var(--line);
    font-size: .705rem;
    font-weight: 550;
    line-height: 1.55;
    background: var(--surface-2);
    color: var(--ink-2);
    white-space: nowrap;
    letter-spacing: -.002em;
}
.chip--success { background: var(--ok-soft);   color: var(--ok);   border-color: var(--ok-line); }
.chip--warning { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.chip--error   { background: var(--err-soft);  color: var(--err);  border-color: var(--err-line); }
.chip--info    { background: var(--info-soft); color: var(--info); border-color: var(--info-line); }
.chip--primary { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

.dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; display: inline-block; }

.hub-badge {
    min-width: 17px;
    padding: 0 .3rem;
    border-radius: var(--r-xs);
    background: var(--err);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    text-align: center;
    line-height: 17px;
    font-variant-numeric: tabular-nums;
}

/* ── Hinweise ────────────────────────────────────────────────────────────── */
/* Ein 2 px breiter Balken links statt eines vollflächig getönten Kastens –
   die Farbe markiert, ohne die Seite bunt zu machen. */
.notice {
    display: flex;
    gap: .7rem;
    padding: .7rem .9rem;
    border: 1px solid var(--info-line);
    border-left: 2px solid var(--info);
    border-radius: var(--r-sm);
    background: var(--info-soft);
    color: var(--ink);
    font-size: .815rem;
    line-height: 1.55;
}
.notice--success { background: var(--ok-soft);   border-color: var(--ok-line);   border-left-color: var(--ok); }
.notice--warning { background: var(--warn-soft); border-color: var(--warn-line); border-left-color: var(--warn); }
.notice--error   { background: var(--err-soft);  border-color: var(--err-line);  border-left-color: var(--err); }
.notice strong { display: block; margin-bottom: .1rem; font-weight: 600; }
.notice .hub-icon { flex: 0 0 16px; width: 16px; height: 16px; margin-top: .14rem; }
.notice--success .hub-icon { color: var(--ok); }
.notice--warning .hub-icon { color: var(--warn); }
.notice--error   .hub-icon { color: var(--err); }
.notice .hub-icon { color: var(--info); }

.flash-stack {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(400px, calc(100vw - 2.5rem));
}
.flash {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .85rem;
    border-radius: var(--r-md);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 6px 20px rgba(10, 15, 25, .12), 0 1px 2px rgba(10, 15, 25, .08);
    font-size: .815rem;
}
.flash--success { border-left: 2px solid var(--ok); }
.flash--error   { border-left: 2px solid var(--err); }
.flash button {
    margin-left: auto; background: none; border: 0; color: var(--ink-3);
    cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 .15rem;
}
.flash button:hover { color: var(--ink); }

/* ── Schlüssel und Kennungen ─────────────────────────────────────────────── */
.keybox {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: .42rem .6rem;
    font-family: var(--mono);
    font-size: .82rem;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
    min-height: 32px;
}
.keybox .btn { margin-left: auto; flex: 0 0 auto; }

.sha { font-family: var(--mono); font-size: .775rem; color: var(--ink-2); }

/* ── Anmeldeseiten ───────────────────────────────────────────────────────── */
.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background: var(--canvas);
}
.auth-card {
    width: min(380px, 100%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.9rem 1.75rem;
}
.auth-card h1 { font-size: 1.15rem; margin-bottom: .25rem; }
.auth-card .auth-sub { color: var(--ink-3); font-size: .815rem; margin-bottom: 1.5rem; }
.auth-foot {
    margin-top: 1.3rem; padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    text-align: center; font-size: .785rem; color: var(--ink-3);
}

/* ── Dateibrowser ────────────────────────────────────────────────────────── */
.breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
    font-size: .815rem; margin-bottom: .9rem;
}
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--line-strong); }
.breadcrumb .current { font-weight: 600; }

.file-name { display: flex; align-items: center; gap: .5rem; }
.file-name .hub-icon { flex: 0 0 15px; width: 15px; height: 15px; color: var(--ink-3); }
.file-name--folder .hub-icon { color: var(--accent); }

.dropzone {
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
    padding: 1.35rem;
    text-align: center;
    color: var(--ink-3);
    font-size: .815rem;
    background: var(--surface-sunk);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.dropzone:hover { border-color: var(--ink-3); color: var(--ink-2); }
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dropzone .hub-icon { display: block; margin: 0 auto .4rem; width: 20px; height: 20px; }

/* ── Sonstiges ───────────────────────────────────────────────────────────── */
.muted { color: var(--ink-3); }
.small { font-size: .775rem; }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.stack > * + * { margin-top: .9rem; }
.stack-sm > * + * { margin-top: .45rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer { margin-left: auto; }
.hidden { display: none !important; }

.filter-bar {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: .85rem 1rem;
}
.filter-bar .field { margin-bottom: 0; }
.filter-bar .input, .filter-bar .select { min-width: 165px; }

.pagination { display: flex; gap: .25rem; align-items: center; justify-content: center; margin-top: 1rem; }
.pagination a, .pagination span {
    min-width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .55rem; border-radius: var(--r-md);
    font-size: .78rem; color: var(--ink-2);
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
}
.pagination a:hover { background: var(--surface-2); border-color: var(--line); text-decoration: none; }
.pagination .is-current {
    background: var(--accent); border-color: var(--accent);
    color: var(--on-accent); font-weight: 600;
}

.progress {
    height: 4px; border-radius: var(--r-xs);
    background: var(--surface-3); overflow: hidden;
}
.progress > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.progress--warning > i { background: var(--warn); }
.progress--error > i { background: var(--err); }

details.disclosure {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: .6rem .85rem;
    background: var(--surface);
}
details.disclosure[open] { background: var(--surface-sunk); }
details.disclosure > summary {
    cursor: pointer; font-weight: 500; font-size: .825rem;
    list-style: none; display: flex; align-items: center; gap: .5rem;
    color: var(--ink);
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before {
    content: "";
    width: 0; height: 0;
    border-left: 4px solid var(--ink-3);
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    transition: transform .12s ease;
    flex: 0 0 4px;
}
details.disclosure[open] > summary::before { transform: rotate(90deg); }
details.disclosure > summary .spacer { margin-left: auto; }
details.disclosure > *:not(summary) { margin-top: .8rem; }
details.disclosure > summary:hover { color: var(--accent); }

.hub-icon { width: 16px; height: 16px; display: inline-block; vertical-align: -.18em; }

dl { font-size: .825rem; }
dt { color: var(--ink-3); }

@media print {
    .hub-nav, .hub-topbar, .btn, .flash-stack { display: none !important; }
    .hub-content { padding: 0; }
    .card { border: 0; }
}

/* ── Meldungsverlauf ─────────────────────────────────────────────────────── */
/*
 * Zwei Sprechrichtungen, unterschieden durch die Kante links und die Fläche –
 * bewusst keine Sprechblasen mit Ecken. Das hier ist ein Vorgang, kein Chat.
 */
.thread { display: flex; flex-direction: column; gap: .75rem; }

.thread-item {
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: .7rem .9rem;
    background: var(--surface);
}
.thread-item--customer {
    border-left-color: var(--accent);
    background: var(--surface-sunk);
}
.thread-item--internal {
    border-left-color: var(--warn);
    background: var(--warn-soft);
    border-color: var(--warn-line);
}

.thread-head {
    display: flex; align-items: center; gap: .5rem;
    font-size: .85rem;
    margin-bottom: .45rem;
}
.thread-head .spacer { margin-left: auto; }

.thread-body {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink-2);
    overflow-wrap: anywhere;
}