/* ==========================================================================
   start.css — app-eigener Block des Startportals.
   ==========================================================================
   Die gemeinsame Basis steht in @bur/core/public/css/base.css und wird VOR
   dieser Datei geladen. Hier steht nur, was nur das Portal hat.

   NUR NAMEN AUS SCHICHT B (--bg, --surface-*, --text*, --tone-*) verwenden,
   nie aus Schicht A: sonst gibt es zwei Vokabulare und der Dunkelmodus fasst
   nur eines davon.
   ========================================================================== */

body { background: var(--bg); color: var(--text); }

/* --- Knöpfe, die keine Knöpfe sein wollen ------------------------------- */
/* Jeder Weg in eine App ist ein POST (Anmelde-Ticket), also ein <button>.
   Safari und Chrome geben einem Knopf von sich aus eine graue Fläche, einen
   Rahmen und eine eigene Schrift — "die Links sind weiß/grau unterlegt".
   appearance:none nimmt ihm das Betriebssystem-Aussehen; background/border
   allein genügen dafür NICHT. Eine Stelle für alle diese Knöpfe. */
.nav-eintrag, .zeile, .aktion, .einstieg, .sp-werkzeug, .sp-ikon-btn {
    -webkit-appearance: none; appearance: none;
    font-family: var(--font-body);
}
button.nav-eintrag, button.zeile {
    background: none; border: 0; box-shadow: none; color: inherit;
}

/* --- Seitenleiste + Fläche (Aufbau aus dem Mockup) ---------------------- */
/* html/body brauchen Höhe: ohne sie endet die Fläche dort, wo der Inhalt
   endet — im Dunkelmodus blitzt darunter der helle Grund durch. */
html, body { height: 100%; }
.app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.sidebar {
    background: var(--surface-low); border-right: 1px solid var(--outline-variant);
    padding: var(--sp-8) 0 var(--sp-4); display: flex; flex-direction: column;
}
.brand {
    padding: 0 var(--sp-6); margin-bottom: var(--sp-8);
    font-family: var(--font-display); font-size: 22px; line-height: 28px;
    font-weight: 700; letter-spacing: -0.01em; color: var(--text); text-decoration: none;
}
.brand:hover { text-decoration: none; opacity: 1; }
.brand .dot { color: var(--primary); }

/* Die Überschrift der Anmelde- und Fehlerseiten: dort gibt es keine
   Seitenleiste, die Marke steht mitten auf der Fläche. */
.sp-marke-gross {
    font-family: var(--font-display); font-size: 22px; line-height: 28px;
    font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.sp-marke-gross .dot { color: var(--primary); }
.brand-sub {
    display: block; font-family: var(--font-body); font-size: 12px;
    font-weight: 400; letter-spacing: 0; color: var(--text-faint); margin-top: 2px;
}
.nav { list-style: none; padding: 0 13px; margin: 0; flex: 1; }
.nav li { margin: 1px 0; }
.nav-section { font-size: 12px; color: var(--text-faint); padding: 20px 16px 6px; font-weight: 600; }
.nav-form { margin: 0; }
/* Ein Eintrag ist entweder ein Link (Übersicht) oder ein Knopf (Flow) — beide
   müssen gleich aussehen, sonst sieht die Leiste zusammengestückelt aus. */
.nav-eintrag {
    display: flex; align-items: center; gap: var(--sp-3); width: 100%;
    padding: 8px 12px; border-radius: var(--radius);
    color: var(--secondary); font-size: 14px; font-weight: 500;
    background: none; border: 0; font-family: inherit; text-align: left;
    cursor: pointer; text-decoration: none;
}
.nav-eintrag:hover { background: var(--surface-high); color: var(--text); text-decoration: none; opacity: 1; }
.nav-eintrag.active {
    color: var(--text); background: var(--surface-med); font-weight: 600;
    border-left: 2px solid var(--primary); padding-left: 14px;
}
.nav-eintrag svg { width: 18px; height: 18px; flex: none; }
.nav-txt { flex: 1; min-width: 0; }
.nav-raus { display: flex; color: var(--text-faint); }
.nav-raus svg { width: 14px; height: 14px; }

.user-box {
    border-top: 1px solid var(--outline-variant); padding: var(--sp-4) var(--sp-6);
    margin-top: auto; display: flex; align-items: center; gap: var(--sp-2);
}
.user-txt { flex: 1; min-width: 0; }
.user-meta { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.abmelden-form { margin: 0; display: flex; }

.main { padding: var(--sp-6); min-width: 0; background: var(--bg); }

/* Schmal: die Leiste wird zur Kopfzeile mit Umschaltknopf.
   Das Zuklappen selbst steht in base.css (.sidebar:has(.nav-toggle), 768px) —
   dieselbe Mechanik wie in den drei Apps, damit sich das Portal auf dem
   Telefon nicht anders bedient als alles andere. Hier stehen nur die Werte,
   die das Portal eigen hat: seine Marke, sein <nav>-Element und die
   Suchleiste. */
@media (max-width: 768px) {
    .app { grid-template-columns: 1fr; }
    .brand { margin-bottom: 0; padding: 0; font-size: 18px; line-height: 22px; }
    .brand-sub { display: none; }
    /* Das <nav> steht zwischen .sidebar und .nav — ohne diese Zeile klappt
       base.css nur die Liste zu und der Rahmen bleibt als leerer Streifen. */
    .sidebar:has(.nav-toggle) #hauptnav { display: none; grid-column: 1 / -1; }
    .sidebar:has(.nav-toggle).offen #hauptnav { display: block; }
    .nav { padding: 0; }
    .nav-eintrag.active { border-left: 0; padding-left: 12px; }
    /* Auf dem Telefon zaehlt Lesbarkeit mehr als eine ausgerichtete Spalte. */
    .zeile { grid-template-columns: 52px 1fr auto; }
    .zeile > .badge { display: none; }
    /* Der Fuss wird zur Zeile: Name, Hell/Dunkel, Abmelden nebeneinander. */
    .user-box { display: flex; align-items: center; gap: var(--sp-2); }
    .main { padding: var(--sp-4); }
    .topbar {
        margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4);
        padding: var(--sp-3) var(--sp-4) var(--sp-2);
    }
}

.avatar {
    width: 34px; height: 34px; border-radius: 999px; flex: none;
    display: grid; place-items: center;
    background: var(--primary-container); color: var(--on-primary-container);
    font-family: var(--font-display); font-weight: 700; font-size: 12px;
}
.sp-ikon-btn {
    width: 32px; height: 32px; border-radius: var(--radius); flex: none;
    display: grid; place-items: center; cursor: pointer;
    background: transparent; border: 1px solid var(--outline-variant);
    color: var(--secondary);
}
.sp-ikon-btn:hover { color: var(--text); background: var(--surface-high); }
.sp-ikon-btn svg { width: 14px; height: 14px; }
/* Der Umschalter zeigt immer das ZIEL, nicht den Zustand. */
.sp-ikon-btn .sonne { display: none; }
[data-theme="dark"] .sp-ikon-btn .mond  { display: none; }
[data-theme="dark"] .sp-ikon-btn .sonne { display: block; }

/* --- Flächen ------------------------------------------------------------ */
/* Die Anmeldung steht mittig auf leerer Fläche — es gibt dort nichts anderes. */
.sp-mitte { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6); }
.anmeldekarte {
    background: var(--surface-lowest); border-radius: var(--radius-xl);
    padding: 2.4rem 2.2rem; width: 100%; max-width: 380px;
    box-shadow: var(--shadow-lg);
}
.flash-wrap { margin-bottom: var(--sp-5); }

/* --- „Was möchtest du erledigen?" --------------------------------------- */
.frage {
    font-family: var(--font-display); font-size: 18px; line-height: 24px;
    font-weight: 600; letter-spacing: -0.01em; margin: var(--sp-6) 0 var(--sp-3);
}
.aktionen {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-3); margin-bottom: var(--sp-6);
}
.aktion-form { margin: 0; }
.aktion {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 16px 18px; text-align: left; cursor: pointer;
    background: var(--surface-lowest); border: 0; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); color: var(--text); font-family: var(--font-body);
}
.aktion:hover { box-shadow: var(--shadow-md); }
.aktion-ikon {
    width: 42px; height: 42px; border-radius: var(--radius-lg); flex: none;
    display: grid; place-items: center;
}
/* Ein <a> mit .aktion braucht das, was der <button> von sich aus hat. */
a.aktion { text-decoration: none; }
a.aktion:hover { text-decoration: none; }

.ai-refurb { background: var(--tone-teal-bg);   color: var(--tone-teal); }
.ai-preise { background: var(--tone-amber-bg);  color: var(--tone-amber); }
.ai-rma    { background: var(--tone-violet-bg); color: var(--tone-violet); }
.ai-order  { background: var(--tone-amber-bg);  color: var(--tone-amber); }
.aktion-txt { flex: 1; min-width: 0; }
.aktion-was { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; display: block; }
.aktion-wo  { font-size: 12px; color: var(--text-faint); margin-top: 2px; display: block; }
.aktion-pfeil { color: var(--text-faint); flex: none; font-size: 16px; }
.aktion:hover .aktion-pfeil { color: var(--primary); }

/* --- Werkzeuge ---------------------------------------------------------- */

/* --- Backup-Codes ------------------------------------------------------- */
.backup-codes {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px;
    padding: var(--sp-4); border-radius: var(--radius-lg);
    background: var(--surface-low); font-size: 14px; letter-spacing: 0.04em;
}

@media (max-width: 640px) {
    .backup-codes { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Arbeitsliste nach Dringlichkeit  (Aufbau und Klassennamen aus dem
   abgenommenen Mockup, mockups/Main.dc.html)
   ========================================================================== */

/* --- Gruppenkopf --- */
.stufe {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 6px 7px; border-top: 1px solid var(--surface-low);
}
.stufe:first-of-type { border-top: none; padding-top: 2px; }
.stufe-punkt { width: 7px; height: 7px; border-radius: 99px; flex: none; background: var(--tone-neutral); }
.stufe-name { font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.stufe-was  { font-size: 12px; color: var(--text-faint); }
.stufe-mehr { font-size: 11.5px; color: var(--text-faint); padding: 6px 6px 0; }

/* Die Farbe je Stufe steht NUR hier. Sie muss zu STUFEN in
   @bur/core/aufgaben passen — dort steht derselbe Ton als Wort. */
.st-ueberfaellig .stufe-punkt { background: var(--tone-red); }
.st-frist        .stufe-punkt { background: var(--tone-amber); }
.st-wartet       .stufe-punkt { background: var(--tone-violet); }
.st-liegt        .stufe-punkt { background: var(--tone-blue); }
.st-offen        .stufe-punkt { background: var(--tone-neutral); }

/* --- eine Zeile --- */
.zeile-form { margin: 0; }
.zeile {
    /* Feste Spalten statt 'auto': mit auto richtet sich die Breite nach dem
       laengsten Etikett DIESER Zeile, und dann steht die Zeitangabe in jeder
       Zeile woanders. 132px fasst "Datenlöschung" und "Teillieferung". */
    display: grid; grid-template-columns: 64px 1fr 132px 96px;
    align-items: center; gap: var(--sp-4); padding: 10px 6px;
    color: inherit; text-decoration: none;
    /* Als Knopf: eigene Schrift, eigener Rahmen, eigene Farbe wieder abnehmen. */
    background: none; border: 0; width: 100%; font: inherit; text-align: left;
    cursor: pointer;
}
.zeile:hover { background: var(--surface-bright); border-radius: var(--radius); opacity: 1; }
.zeile + .zeile { border-top: 1px solid var(--surface-low); }
.ztitel { font-size: 14px; font-weight: 500; min-width: 0; }
/* Nummer unter den Titel, nicht dahinter — sonst kleben sie aneinander. */
.znr { display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); font-weight: 400; margin-top: 1px; }
.zeile > .badge { justify-self: start; max-width: 100%; }
.zzeit {
    font-size: 12px; text-align: right;
    font-variant-numeric: tabular-nums; color: var(--text-faint);
}
.zzeit.rot { color: var(--tone-red); font-weight: 600; }

/* --- Kürzel der App --- */
.flowmarke {
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    padding: 2px 7px; border-radius: 6px; justify-self: start;
}
.fm-refurb { background: var(--tone-teal-bg);   color: var(--tone-teal); }
.fm-rma    { background: var(--tone-violet-bg); color: var(--tone-violet); }
.fm-order  { background: var(--tone-amber-bg);  color: var(--tone-amber); }

.hin-rot { color: var(--tone-red); font-weight: 600; }

/* ==========================================================================
   Benutzerverwaltung
   ========================================================================== */
.seiten-kopf {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-4); flex-wrap: wrap;
}
.seiten-kopf h1 { margin: 0; }
.seiten-kopf .subtitle { max-width: 62ch; }

/* --- Tabelle --- */
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th {
    text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-faint);
    padding: 0 var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--surface-low);
}
.tabelle td { padding: var(--sp-3); border-bottom: 1px solid var(--surface-low); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
/* Ein abgeschaltetes Konto bleibt lesbar, tritt aber zurück. */
.zeile-still { opacity: 0.55; }
.tabelle-aktion { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tabelle-aktion form { margin: 0; }

.person-name { font-weight: 600; font-size: 14px; display: block; }
.person-mail { font-size: 11.5px; color: var(--text-faint); display: block; margin-top: 1px; }

.marke {
    display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
    padding: 2px 7px; border-radius: var(--radius-full); margin: 3px 3px 0 0;
    background: var(--surface-low); color: var(--text-muted);
}
.marke-admin { background: var(--tone-violet-bg); color: var(--tone-violet); }
.marke-app   { background: var(--tone-teal-bg);   color: var(--tone-teal); font-family: var(--font-mono); font-weight: 500; }
.ja    { font-size: 12px; color: var(--tone-green); font-weight: 600; display: block; }
.offen { font-size: 12px; color: var(--tone-amber); font-weight: 600; }

.btn-klein { padding: 5px 10px; font-size: 11.5px; }

/* --- Einmal-Passwort: fällt auf, weil es nur einmal kommt --- */
.pw-karte {
    margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
    background: var(--tone-green-bg); border-left: 3px solid var(--tone-green);
    border-radius: var(--radius-lg);
}
.pw-kopf { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.pw-wert {
    font-family: var(--font-mono); font-size: 20px; font-weight: 600;
    margin: 6px 0 4px; user-select: all; word-break: break-all;
}
.pw-hinweis { font-size: 11.5px; color: var(--text-muted); max-width: 68ch; }

/* --- Formular --- */
.formular { margin-top: var(--sp-5); display: grid; gap: var(--sp-5); max-width: 620px; }
.feld { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.feld-name { font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 0; }
.feld-hinweis { font-size: 11.5px; color: var(--text-faint); max-width: 62ch; }
.feld input[type="text"], .feld input[type="email"] {
    width: 100%; padding: 9px 12px; font-family: var(--font-body); font-size: 14px;
    color: var(--text); background: var(--surface-lowest);
    border: 1px solid var(--outline-variant); border-radius: var(--radius); outline: none;
}
.feld input:focus { border-color: var(--primary); }
.feld input:disabled { color: var(--text-faint); background: var(--surface-low); }
.app-wahl { display: grid; gap: 6px; }
.haken { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.haken input { width: 16px; height: 16px; accent-color: var(--primary); }
.formular-fuss { display: flex; gap: var(--sp-3); }

/* --- Suchleiste (Aufbau aus dem Mockup) --------------------------------- */
.topbar {
    display: flex; align-items: center; gap: var(--sp-3);
    margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-5);
    padding: var(--sp-4) var(--sp-6) var(--sp-3); background: var(--bg);
}
.tsearch { position: relative; flex: 1; min-width: 0; margin: 0; display: block; }
.tsearch input {
    width: 100%; padding: 9px 52px 9px 38px;
    font-family: var(--font-body); font-size: 14px; color: var(--text);
    background: var(--surface-lowest); border: 1px solid var(--outline-variant);
    border-radius: var(--radius); outline: none;
    -webkit-appearance: none; appearance: none;
}
.tsearch input:focus { border-color: var(--primary); }
.tsearch .ic {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    display: flex; color: var(--text-faint); pointer-events: none;
}
.kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint);
    background: var(--surface-low); border-radius: 5px; padding: 2px 5px;
    pointer-events: none;
}

/* --- Suchergebnisse ----------------------------------------------------- */
.suchformular { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); max-width: 620px; }
.suchformular input {
    flex: 1; padding: 9px 12px; font-family: var(--font-body); font-size: 14px;
    color: var(--text); background: var(--surface-lowest);
    border: 1px solid var(--outline-variant); border-radius: var(--radius); outline: none;
    -webkit-appearance: none; appearance: none;
}
.suchformular input:focus { border-color: var(--primary); }
.such-gruppe {
    margin-top: var(--sp-5); background: var(--surface-lowest);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: var(--sp-4);
}
.such-kopf {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: 12px; font-weight: 700; margin-bottom: var(--sp-2);
}

/* --- Mein Konto --------------------------------------------------------- */
.konto-spalten {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sp-5); align-items: start; margin-top: var(--sp-5);
}
.konto-spalten .formular { max-width: none; gap: var(--sp-4); }
.feld input[type="password"] {
    width: 100%; padding: 9px 12px; font-family: var(--font-body); font-size: 14px;
    color: var(--text); background: var(--surface-lowest);
    border: 1px solid var(--outline-variant); border-radius: var(--radius); outline: none;
    -webkit-appearance: none; appearance: none;
}
.feld input[type="password"]:focus { border-color: var(--primary); }
.mini-formular { display: grid; gap: var(--sp-2); justify-items: start; }
.mini-formular .feld { width: 100%; max-width: 260px; }
.trenner { border: 0; border-top: 1px solid var(--surface-low); margin: var(--sp-4) 0; }
/* Backup-Codes: einmal sichtbar, also gut abschreibbar — Ziffernbreite gleich,
   damit man beim Übertragen nicht die Zeile verliert. */
.code-gitter {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px; margin: var(--sp-3) 0;
}
.code {
    font-family: var(--font-mono); font-size: 14px; font-weight: 600;
    font-variant-numeric: tabular-nums; user-select: all;
    background: var(--surface-lowest); border-radius: var(--radius);
    padding: 6px 10px; text-align: center;
}
/* Der eigene Name führt zum eigenen Konto — dort sucht man Passwort und 2FA. */
.user-name-link { font-weight: 600; font-size: 14px; color: var(--text); text-decoration: none; }
.user-name-link:hover { color: var(--primary); text-decoration: none; opacity: 1; }

/* --- Kennzahlen als Filter ---------------------------------------------- */
a.stat { text-decoration: none; color: inherit; }
a.stat:hover { box-shadow: var(--shadow-md); text-decoration: none; opacity: 1; }
.stat-aktiv { outline: 2px solid var(--primary); outline-offset: 1px; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; padding: 3px 9px;
    border-radius: var(--radius-full); background: var(--primary-container);
    color: var(--on-primary-container); text-decoration: none;
}
.filter-chip:hover { text-decoration: none; opacity: 0.85; }
.filter-weg { font-size: 13px; line-height: 1; }

/* --- Altbestand als eine Zeile ------------------------------------------ */
.sammelzeile {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: 12px 6px; color: inherit; text-decoration: none;
}
.sammelzeile:hover { background: var(--surface-bright); border-radius: var(--radius); text-decoration: none; opacity: 1; }
.sammel-zahl {
    font-family: var(--font-display); font-size: 22px; font-weight: 600;
    font-variant-numeric: tabular-nums; min-width: 40px;
}
.sammel-txt { flex: 1; min-width: 0; }
.sammel-was { display: block; font-size: 13.5px; }
.sammel-wo { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }

/* --- Sofortsuche unter dem Feld ----------------------------------------- */
.tsearch { position: relative; }
.such-sofort {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    background: var(--surface-lowest); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: var(--sp-2) var(--sp-3);
    max-height: 60vh; overflow-y: auto;
}
.such-sofort:empty { display: none; }
.such-sofort .such-gruppe { margin-top: var(--sp-2); box-shadow: none; padding: 0; background: none; }
.such-sofort .such-gruppe:first-child { margin-top: 0; }
.such-leer { font-size: 12.5px; color: var(--text-muted); padding: var(--sp-2) 0; }

/* --- Team --------------------------------------------------------------- */
.zahl-spalte { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zahl-offen { font-size: 14px; font-weight: 600; }
.zahl-spaet { display: block; font-size: 10.5px; color: var(--tone-red); font-weight: 600; }
/* "einklappen" rechts im Gruppenkopf — nur beim ausgeklappten Altbestand. */
.stufe-zu {
    margin-left: auto; font-size: 11.5px; font-weight: 500;
    color: var(--text-faint); text-decoration: none;
}
.stufe-zu:hover { color: var(--text); text-decoration: none; opacity: 1; }

/* ---------------------------------------------------------------
   Arbeitszeit-Uhr
   ---------------------------------------------------------------
   Steht rechtsbuendig unter der Suchzeile, auf Hoehe der Ueberschrift.
   Umgesetzt mit float statt mit einer Zeile im Seitenkopf: der Seitenkopf
   sieht in jeder Ansicht anders aus (mal nur eine Ueberschrift wie auf der
   Uebersicht, mal mit Knopf daneben), und die Uhr steht im Layout — sie
   soll ueberall gleich sitzen, ohne dass jede Ansicht angefasst wird.
   .seiten-kopf ist ein Flex-Kasten und macht dem Float damit Platz,
   statt sich darunterzuschieben.

   Zurueckhaltend im Ton: ein Hinweis fuer den Mitarbeiter, keine Kennzahl.
   Der Punkt leuchtet nur, solange jemand eingestempelt ist. */
.arbeitsuhr {
    float: right;
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 var(--sp-3) var(--sp-4);
    padding: 9px 14px; border-radius: var(--radius);
    background: var(--surface-lowest); border: 1px solid var(--outline-variant);
    color: var(--text-muted); white-space: nowrap;
}
.au-wert { font-family: var(--font-mono); font-size: 18px; font-weight: 500; color: var(--text); }
.au-punkt {
    width: 8px; height: 8px; border-radius: 999px; flex: none;
    background: var(--outline-variant);
}
.arbeitsuhr.laeuft .au-punkt { background: var(--tone-green); }
/* Kein Blinken: eine Anzeige, die den ganzen Tag pulsiert, zieht den ganzen
   Tag Aufmerksamkeit auf sich. Der Farbwechsel reicht. */
@media (max-width: 768px) {
    /* Auf dem Telefon steht sie ueber der Ueberschrift statt daneben — neben
       einer umgebrochenen Ueberschrift bliebe fuer beide zu wenig Platz. */
    .arbeitsuhr { float: none; margin-left: auto; width: max-content; }
}

/* ---------------------------------------------------------------
   Preis-Werkzeug (/preise)
   --------------------------------------------------------------- */
/* Gegenstück zu .hin-rot. Beide sagen "sieh hier hin", nicht "gut" und
   "schlecht": ein höherer Preis ist nicht per se erfreulich. */
.hin-gruen { color: var(--tone-green); font-weight: 600; }

/* Filterleiste: eine Reihe, die bei schmalem Fenster umbricht. */
.preis-filter {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: flex-end;
}
.preis-filter .feld { margin: 0; min-width: 10rem; flex: 0 1 auto; }
.preis-filter .feld-weit { flex: 1 1 14rem; }
.preis-filter .feld-knopf { display: flex; gap: var(--sp-2); align-items: center; }

/* Die Tabelle ist breit. Sie scrollt in IHREM Kasten, NICHT die Seite —
   sonst wandert beim Tippen im Preisfeld die ganze Ansicht weg. */
.tabelle-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--sp-2)); padding: 0 var(--sp-2); }
.tabelle-preise { min-width: 58rem; }

/* Feste Breiten für die schmalen Spalten, damit die Titelspalte den Rest
   bekommt und nicht auf vier Zeilen umbricht.
   NUR für die Liste (10 Spalten). Die Bestätigungsseite hat fünf — dort
   träfen dieselben nth-child-Regeln die falschen Spalten und quetschten
   ausgerechnet die Δ-Spalte auf 3 rem. */
/* Zehn Spalten: Angebot | Konto | Kategorie | eingestellt (Datum + Laufzeit) |
   Beobachter | Preis | zuletzt geändert | ändern | neuer Preis | Δ.
   Die erste bekommt den Rest.
   Zwischenzeitlich waren es elf — Datum und Laufzeit getrennt. Die festen
   Breiten summierten sich damit auf mehr, als die Tabelle hat; der Browser
   staucht dann alle Spalten (die Breiten sind bei automatischem Tabellensatz
   Vorschlaege, keine Vorgaben). Zusammengelegt, weil die beiden ohnehin
   dasselbe beschreiben: das Datum ist die Tatsache, die Laufzeit die Rechnung
   daraus. */
.tabelle-preise-liste th:nth-child(2),  .tabelle-preise-liste td:nth-child(2)  { width: 8rem; }
.tabelle-preise-liste th:nth-child(3),  .tabelle-preise-liste td:nth-child(3)  { width: 8.5rem; }
.tabelle-preise-liste th:nth-child(4),  .tabelle-preise-liste td:nth-child(4)  { width: 6rem; }
.tabelle-preise-liste th:nth-child(5),  .tabelle-preise-liste td:nth-child(5)  { width: 3.5rem; }
.tabelle-preise-liste th:nth-child(6),  .tabelle-preise-liste td:nth-child(6)  { width: 7rem; }
.tabelle-preise-liste th:nth-child(7),  .tabelle-preise-liste td:nth-child(7)  { width: 7.5rem; }
.tabelle-preise-liste th:nth-child(8),  .tabelle-preise-liste td:nth-child(8)  { width: 3.5rem; }
.tabelle-preise-liste th:nth-child(9),  .tabelle-preise-liste td:nth-child(9)  { width: 7.5rem; }
.tabelle-preise-liste th:nth-child(10), .tabelle-preise-liste td:nth-child(10) { width: 9.5rem; }

/* Eine Preisdifferenz gehört auf EINE Zeile. Über drei Zeilen verteilt liest
   sie sich wie drei Zahlen. */
.tabelle-preise td:last-child, .tabelle-preise th:last-child { white-space: nowrap; }
.tabelle-preise:not(.tabelle-preise-liste) { min-width: 44rem; }

.tabelle th.r, .tabelle td.r { text-align: right; }
.tabelle th.c, .tabelle td.c { text-align: center; }

.preis-feld {
  width: 6.5rem; text-align: right; padding: .3rem .45rem;
  font-size: var(--fs-sm);
}
/* Ein gesperrtes Feld muss AUSSEHEN wie gesperrt. Sonst tippt jemand hinein,
   wundert sich, dass nichts passiert, und hakt beim nächsten Mal blind an. */
.preis-feld:disabled {
  background: var(--surface-variant); color: var(--text-faint);
  border-color: transparent; cursor: not-allowed;
}
.preis-haken { width: 1.05rem; height: 1.05rem; cursor: pointer; }

/* Im Kartenmodus (base.css, .karten) muessen die Tabellenmasse weg: die
   58 rem Mindestbreite und die festen Spaltenbreiten waren dafuer da, dass
   die Titelspalte nicht auf vier Zeilen umbricht - in einer Karte gibt es
   keine Spalten. Ohne das hier ist die Karte 928 px breit und der
   Preis steht neben dem Schirm. Am 2026-09-15 genau so gesehen.
   Auf dem Telefon soll das Ankreuzfeld ausserdem ein Ziel sein, kein Punkt. */
@media (max-width: 768px) {
  body:has(.mob-leiste) .tabelle-preise.karten { min-width: 0; }
  body:has(.mob-leiste) .tabelle-preise-liste.karten td { width: auto; }
  body:has(.mob-leiste) .karten .preis-feld { width: 100%; text-align: right;
    padding: var(--sp-2) var(--sp-3); font-size: 16px; }
  body:has(.mob-leiste) .karten .preis-haken { width: 22px; height: 22px; }
}
.preis-delta { white-space: nowrap; }

/* Die Aktionsleiste bleibt am unteren Rand stehen: bei 300 Zeilen wäre ein
   Knopf ganz unten unerreichbar, ohne durch alles zu scrollen. */
.preis-leiste {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-4);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}

/* --- Preisverlauf am Artikel ------------------------------------------ */
/* Die Marke steht neben dem Preis und nennt gleich, wie viele Aenderungen es
   gibt. Sie erscheint nur, wenn es welche gibt. */
.verlauf-marke {
  border: 0; background: var(--surface-variant); color: var(--text-muted);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: .05rem .3rem; margin-left: .3rem; border-radius: var(--r-sm, 4px);
  cursor: pointer; vertical-align: middle;
}
.verlauf-marke:hover, .verlauf-marke:focus-visible {
  background: var(--tone-blue-bg); color: var(--tone-blue);
}
/* Der Pfeil an "zuletzt geaendert" sagt: das waren nicht wir. */
.verlauf-fremd { color: var(--tone-amber); font-weight: 600; }

/* Das Popover haengt am <body> und ist position:fixed — sonst schneidet der
   scrollende Tabellenkasten (.tabelle-scroll) es ab. */
.verlauf-popover {
  position: fixed; z-index: 50; max-width: min(30rem, calc(100vw - 1rem));
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  padding: var(--sp-3); font-size: var(--fs-sm);
}
.vp-kopf { font-weight: 600; margin-bottom: .45rem; }
.vp-tab { border-collapse: collapse; width: 100%; }
.vp-tab td { padding: .18rem .5rem .18rem 0; white-space: nowrap; vertical-align: baseline; }
.vp-zeit  { color: var(--text-faint); font-size: var(--fs-xs); }
.vp-preis { font-family: var(--font-mono); }
.vp-delta { font-family: var(--font-mono); text-align: right; }
.vp-wer   { color: var(--text-muted); font-size: var(--fs-xs); }
.vp-fuss  { color: var(--text-faint); font-size: var(--fs-xs); margin-top: .45rem; }

/* Auf dem Telefon liegt die Leiste unten auf z-index 80. Ein Popover zu
   einer der letzten Zeilen waere darunter verschwunden - es ist eine
   fluechtige Blase auf Klick und gehoert darueber. */
@media (max-width: 768px) {
  body:has(.mob-leiste) .verlauf-popover { z-index: 84; }
}

/* Blaetterleiste unter langen Listen. */
.blaetter {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}


/* ==========================================================================
   GELANGENSNACHWEIS-ARCHIV
   --------------------------------------------------------------------------
   Uebernommen aus dem abgenommenen Mockup (mockups/gelangen/).
   Nur Schicht-B-Marken (--surface-*, --text*, --tone-*) — Schicht A und der
   Dunkelmodus kommen aus base.css.
   ========================================================================== */
/* --- Kennzahlen: klickbar, weil jede Zahl ein Filter ist --------------- */
.gn-zahlen { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); margin-bottom:var(--sp-5); }
@media (max-width:900px) { .gn-zahlen { grid-template-columns:repeat(2,1fr); } }
.gn-zahl {
  display:flex; flex-direction:column; gap:2px; text-align:left;
  background:var(--surface-lowest); border:1px solid var(--outline-variant);
  border-left:3px solid var(--tone-neutral);
  border-radius:var(--radius-lg); padding:var(--sp-3) var(--sp-4);
  font:inherit; color:var(--text); cursor:pointer;
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gn-zahl:hover { background:var(--surface-bright); box-shadow:var(--shadow-sm); }
.gn-zahl[aria-pressed="true"] { background:var(--accent-soft); box-shadow:var(--shadow-sm); }
.gn-zahl .gz-wert { font-family:var(--font-display); font-size:26px; line-height:30px; font-variant-numeric:tabular-nums; }
.gn-zahl .gz-txt { font-size:var(--fs-sm); color:var(--text-muted); }
.gz-rot    { border-left-color:var(--tone-red); }
.gz-rot    .gz-wert { color:var(--tone-red); }
.gz-amber  { border-left-color:var(--tone-amber); }
.gz-gruen  { border-left-color:var(--tone-green); }
.gz-blau   { border-left-color:var(--tone-blue); }

/* --- Filterzeile ------------------------------------------------------- */
.gn-filter { display:flex; gap:var(--sp-3); align-items:flex-end; flex-wrap:wrap; margin-bottom:var(--sp-4); }
.gn-suche { position:relative; flex:1 1 22rem; min-width:16rem; }
.gn-suche input {
  width:100%; padding:9px 34px 9px 34px; font:inherit; color:var(--text);
  background:var(--surface-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius); outline:none;
}
.gn-suche input:focus { border-color:var(--primary); }
.gn-suche .lupe { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-faint); display:flex; pointer-events:none; }
.gn-suche .leeren {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:none; color:var(--text-faint); cursor:pointer; padding:5px; border-radius:var(--radius); line-height:1;
}
.gn-suche .leeren:hover { background:var(--surface-low); color:var(--text); }
.gn-chips { display:flex; gap:6px; flex-wrap:wrap; }
.gn-chip {
  border:1px solid var(--outline-variant); background:var(--surface-lowest);
  color:var(--text-muted); border-radius:var(--radius-full); padding:6px 13px;
  font:inherit; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.gn-chip:hover { background:var(--surface-low); }
.gn-chip[aria-pressed="true"] { background:var(--text); color:var(--surface-lowest); border-color:var(--text); font-weight:600; }
.gn-chip .anz { font-variant-numeric:tabular-nums; opacity:.65; font-size:var(--fs-sm); }

/* --- Tabelle ----------------------------------------------------------- */
/* 54rem, nicht mehr: die Status-Spalte steht ganz rechts und ist die
   wichtigste. Je breiter die Tabelle, desto eher verschwindet gerade sie
   im seitlichen Scrollkasten. */
.gn-tab { min-width:54rem; }
/* Nummern und Beträge brechen NICHT um — eine zweizeilige Rechnungsnummer
   liest sich wie zwei verschiedene Nummern. */
.gn-tab .gn-nr, .gn-tab td.r, .gn-tab .gn-land { white-space:nowrap; }
.gn-tab tbody tr { cursor:pointer; }
.gn-tab tbody tr:hover { background:var(--surface-bright); }
.gn-tab tbody tr:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.gn-nr { font-family:var(--font-mono); font-size:13px; font-weight:500; }
.gn-kunde { font-weight:500; }
.gn-kunde .gk-ust { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-faint); font-weight:400; display:block; }
.gn-land {
  display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-sm);
  color:var(--text-muted); font-family:var(--font-mono); font-weight:500;
}
.gn-nachweise { display:flex; gap:4px; flex-wrap:wrap; }
.gn-typ {
  font-size:var(--fs-xs); font-weight:600; padding:2px 7px; border-radius:4px;
  background:var(--surface-med); color:var(--text-muted); white-space:nowrap;
}
.gn-typ-ok { background:var(--tone-teal-bg); color:var(--tone-teal); }
.gn-offen-tage { font-variant-numeric:tabular-nums; font-size:13px; }
.gn-offen-tage.spaet { color:var(--tone-red); font-weight:600; }
.gn-leer { padding:var(--sp-8) var(--sp-4); text-align:center; color:var(--text-muted); }
.gn-leer .gl-gross { font-family:var(--font-display); font-size:var(--fs-lg); color:var(--text); display:block; margin-bottom:4px; }
mark { background:var(--brand-300); color:var(--n-950); border-radius:3px; padding:0 1px; }

/* --- Modal (Nachweis zuordnen) ----------------------------------------- */
dialog.gn-modal {
  width:min(760px, 94vw); max-height:90vh; padding:0; border:0;
  border-radius:var(--radius-lg); background:var(--surface-lowest); color:var(--text);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
dialog.gn-modal::backdrop { background:rgba(23,23,21,.45); backdrop-filter:blur(2px); }
.gm-kopf {
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-4);
  padding:var(--sp-5); border-bottom:1px solid var(--outline-variant); background:var(--surface-bright);
}
.gm-kopf .gm-titel { font-family:var(--font-display); font-size:var(--fs-lg); }
.gm-kopf .gm-sub { font-size:var(--fs-sm); color:var(--text-muted); margin-top:2px; }
.gm-koerper { padding:var(--sp-5); overflow-y:auto; max-height:calc(90vh - 168px); }
.gm-fuss {
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--outline-variant);
  background:var(--surface-bright); flex-wrap:wrap;
}
.gm-fuss .gm-pflicht { font-size:var(--fs-sm); color:var(--text-muted); }

.gm-label { font-size:var(--fs-sm); font-weight:600; color:var(--text-muted); display:block; margin-bottom:var(--sp-2); }
/* Die Typ-Auswahl ist der Kern der Maske: sie entscheidet, welche Felder
   Pflicht sind. Deshalb Karten und kein <select> — man sieht alle Wege. */
.gm-typen { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-2); margin-bottom:var(--sp-5); }
@media (max-width:620px) { .gm-typen { grid-template-columns:1fr; } }
.gm-typ {
  display:flex; gap:10px; align-items:flex-start; text-align:left;
  border:1px solid var(--outline-variant); background:var(--surface-lowest);
  border-radius:var(--radius); padding:11px 13px; font:inherit; color:var(--text); cursor:pointer;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.gm-typ:hover { background:var(--surface-bright); }
.gm-typ[aria-pressed="true"] { border-color:var(--primary); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--primary); }
.gm-typ .gt-ikon { color:var(--text-faint); display:flex; margin-top:1px; }
.gm-typ[aria-pressed="true"] .gt-ikon { color:var(--primary); }
.gm-typ .gt-name { font-weight:600; font-size:13.5px; display:block; }
.gm-typ .gt-was { font-size:var(--fs-sm); color:var(--text-faint); display:block; margin-top:1px; line-height:16px; }

.gm-felder { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
@media (max-width:620px) { .gm-felder { grid-template-columns:1fr; } }
/* ACHTUNG: `.feld` ist eine PORTALWEITE Klasse — sie steht im Benutzer-
   formular, in den Repricer-Filtern und im Konto. Diese Regeln kamen aus dem
   Mockup, wo `.feld` mir allein gehoerte, und waren zuerst UNGESCHUETZT
   angehaengt. Folge: `.feld input { width:100% }` streckte JEDE Checkbox im
   Portal auf volle Breite — in "Freigeschaltete Apps" am sichtbarsten.
   Deshalb ausschliesslich auf die Behaelter dieses Werkzeugs beschraenkt.
   Wer hier eine Regel ergaenzt, haengt sie an .gm-felder bzw. .gn-filter. */
.gm-felder .feld, .gn-filter .feld { display:grid; gap:5px; }
.gm-felder .feld.weit { grid-column:1 / -1; }
.gm-felder .feld > label, .gn-filter .feld > label {
  font-size:var(--fs-sm); font-weight:600; color:var(--text-muted);
}
/* Ankreuzfelder, Auswahlknoepfe und Dateifelder ausdruecklich AUSGENOMMEN:
   eine Checkbox mit width:100% ist genau der Fehler von oben. */
.gm-felder .feld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.gm-felder .feld select,
.gm-felder .feld textarea,
.gn-filter .feld select {
  padding:8px 11px; font:inherit; font-size:13.5px; color:var(--text);
  background:var(--surface-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius); outline:none; width:100%;
}
.gm-felder .feld input:focus, .gm-felder .feld select:focus,
.gm-felder .feld textarea:focus, .gn-filter .feld select:focus { border-color:var(--primary); }
.gm-felder .feld .hinweis, .gn-filter .feld .hinweis {
  font-size:var(--fs-xs); color:var(--text-faint); line-height:15px;
}
.gm-felder .feld input.mono, .gm-felder .feld input[name="mrn"] { font-family:var(--font-mono); }
/* Vorsorge: `.feld` ist ein Grid, und ein Grid streckt seine Kinder. Ein
   Ankreuzfeld darin waere dadurch breit, OHNE dass width:100% im Spiel ist —
   derselbe Anblick, andere Ursache. Kommt in den heutigen Ansichten nicht
   vor; die Regel kostet nichts und verhindert die Wiederholung. */
.gm-felder .feld input[type="checkbox"], .gm-felder .feld input[type="radio"] {
  justify-self: start; width: auto;
}

/* Ablagefläche für die PDF. Klickbar UND als Ziel zum Fallenlassen. */
.gm-datei {
  grid-column:1 / -1; border:1.5px dashed var(--outline-variant); border-radius:var(--radius);
  padding:var(--sp-4); text-align:center; color:var(--text-muted); font-size:13px;
  background:var(--surface-bright); cursor:pointer;
}
.gm-datei:hover, .gm-datei.dran { border-color:var(--primary); background:var(--accent-soft); color:var(--text); }
.gm-datei strong { display:block; font-size:13.5px; color:var(--text); }
.gm-datei .gd-klein { font-size:var(--fs-xs); color:var(--text-faint); }

/* --- Prüfer-Modus ------------------------------------------------------ */
.pruef-kopf {
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
  flex-wrap:wrap; margin-bottom:var(--sp-4);
}
.pruef-kopf .pk-links { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.pruef-meta {
  display:flex; gap:var(--sp-5); flex-wrap:wrap; padding:var(--sp-3) var(--sp-4);
  background:var(--surface-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg); margin-bottom:var(--sp-4);
}
.pruef-meta div { display:flex; flex-direction:column; gap:1px; }
.pruef-meta dt { font-size:var(--fs-xs); color:var(--text-faint); font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.pruef-meta dd { margin:0; font-size:13.5px; font-weight:500; }
/* align-items: stretch (die Vorgabe) und NICHT start: sonst ist die Spalte
   mit den Zusatzangaben hoeher als die andere, und die beiden Kaesten stehen
   ungleich da. Von Philipp am 04.09.2026 gemeldet. */
.split { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
@media (max-width:1000px) { .split { grid-template-columns:1fr; } }
.doku {
  background:var(--surface-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
}
.doku-kopf {
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
  padding:10px var(--sp-4); background:var(--surface-low);
  border-bottom:1px solid var(--outline-variant); flex-wrap:wrap;
}
.doku-kopf .dk-name { font-size:13px; font-weight:600; display:flex; align-items:center; gap:7px; }
.doku-reiter { display:flex; gap:4px; padding:8px var(--sp-3) 0; background:var(--surface-low); flex-wrap:wrap; }
.doku-reiter button {
  border:1px solid transparent; border-bottom:0; background:none; color:var(--text-muted);
  font:inherit; font-size:var(--fs-sm); font-weight:600; padding:6px 11px; cursor:pointer;
  border-radius:var(--radius) var(--radius) 0 0;
}
.doku-reiter button:hover { background:var(--surface-med); }
.doku-reiter button[aria-selected="true"] {
  background:var(--surface-lowest); color:var(--text);
  border-color:var(--outline-variant); margin-bottom:-1px;
}
/* Die Blattfläche. Im Portal steht hier ein <iframe> auf
   /gelangen/dokument/:id — NICHT <object>/<embed>: object-src 'none'. */
.blatt { background:var(--surface-med); padding:var(--sp-4); min-height:420px; display:grid; place-items:start center; }
.blatt-seite {
  background:#ffffff; color:#171715; width:100%; max-width:460px; min-height:390px;
  padding:26px 30px; box-shadow:var(--shadow-md); font-size:11px; line-height:16px;
  font-family:var(--font-body); border-radius:2px;
}
.blatt-seite h4 { font-family:var(--font-display); font-size:14px; margin:0 0 2px; }
.bs-kopf { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1.5px solid #171715; padding-bottom:8px; margin-bottom:12px; gap:12px; }
.bs-firma { font-weight:700; font-size:12px; }
.bs-zeile { display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
.bs-tab { width:100%; border-collapse:collapse; margin:10px 0; font-size:10.5px; }
.bs-tab th { text-align:left; border-bottom:1px solid #cfcfc9; padding:4px 0; font-weight:600; }
.bs-tab td { padding:4px 0; border-bottom:1px solid #f1f1ed; }
.bs-tab .r, .bs-zeile .r { text-align:right; font-variant-numeric:tabular-nums; }
.bs-hin { margin-top:14px; padding:8px 10px; background:#f1f1ed; border-left:3px solid #4f6600; font-size:10px; line-height:15px; }
.bs-unter { margin-top:26px; border-top:1px solid #171715; width:180px; padding-top:4px; font-size:10px; color:#52524d; }
.bs-mono { font-family:var(--font-mono); }
.pruef-fuss {
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-4); padding:var(--sp-4);
  background:var(--surface-lowest); border:1px solid var(--outline-variant); border-radius:var(--radius-lg);
  flex-wrap:wrap;
}
.pruef-fuss .pf-txt { font-size:13px; color:var(--text-muted); max-width:62ch; }
.gn-verweis { font-size:var(--fs-xs); color:var(--text-faint); font-family:var(--font-mono); }
.nur-lesen { display:none; }

/* --- Rechnung auslesen (Schritt 1 → 2, Muster „ABD beantragen") --------- */
.schritte { display:flex; gap:var(--sp-2); align-items:center; margin-bottom:var(--sp-5); flex-wrap:wrap; }
.schritt {
  display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-faint);
  padding:5px 12px; border-radius:var(--radius-full); border:1px solid var(--outline-variant);
  background:var(--surface-lowest);
}
.schritt .snr {
  width:19px; height:19px; border-radius:99px; background:var(--surface-med); color:var(--text-muted);
  display:grid; place-items:center; font-size:var(--fs-xs); font-weight:700; flex:none;
}
.schritt.fertig { color:var(--tone-green); border-color:var(--tone-green-bd); background:var(--tone-green-bg); }
.schritt.fertig .snr { background:var(--tone-green); color:var(--surface-lowest); }
.schritt.jetzt { color:var(--text); border-color:var(--primary); background:var(--accent-soft); font-weight:600; }
.schritt.jetzt .snr { background:var(--primary); color:var(--on-primary); }
.schritt-pfeil { color:var(--text-faint); }

/* Ein gelesenes Feld sagt IMMER, woher sein Wert kommt. Ein vorbelegtes
   Formularfeld ohne diese Marke ist eine Behauptung, die aussieht wie
   eine Eingabe des Menschen. */
.gelesen-marke {
  display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs);
  font-weight:600; padding:1px 7px; border-radius:var(--radius-full); border:1px solid transparent;
}
.gm-ok    { background:var(--tone-teal-bg);   color:var(--tone-teal);   border-color:var(--tone-teal-bd); }
.gm-pruef { background:var(--tone-amber-bg);  color:var(--tone-amber);  border-color:var(--tone-amber-bd); }
.gm-fehlt { background:var(--tone-red-bg);    color:var(--tone-red);    border-color:var(--tone-red-bd); }
.feld-kopf { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.gm-felder .feld input.geprueft { border-color:var(--tone-amber-bd); background:var(--tone-amber-bg); }
.gm-felder .feld input.fehlend  { border-color:var(--tone-red-bd); }

/* Die Betragszeile. Zwei Zahlen nebeneinander, weil das Zoll-Modul zwei
   liefert und nur EINE hier richtig ist. */
.betrag-wahl { display:grid; gap:var(--sp-2); grid-column:1 / -1; }
.betrag-zeile {
  display:flex; align-items:center; gap:var(--sp-3); padding:10px 13px;
  border:1px solid var(--outline-variant); border-radius:var(--radius); cursor:pointer;
  background:var(--surface-lowest);
}
.betrag-zeile:hover { background:var(--surface-bright); }
.betrag-zeile.gewaehlt { border-color:var(--primary); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--primary); }
.betrag-zeile .bz-wert { font-family:var(--font-mono); font-weight:600; font-size:15px; margin-left:auto; }
.betrag-zeile .bz-was { font-size:13px; }
.betrag-zeile .bz-warum { font-size:var(--fs-xs); color:var(--text-faint); display:block; }
.upload-gross {
  border:1.5px dashed var(--outline-variant); border-radius:var(--radius-lg);
  padding:var(--sp-8) var(--sp-5); text-align:center; background:var(--surface-bright); cursor:pointer;
}
.upload-gross:hover, .upload-gross.dran { border-color:var(--primary); background:var(--accent-soft); }
.upload-gross .ug-gross { font-family:var(--font-display); font-size:var(--fs-lg); display:block; margin-bottom:4px; }

/* Kennzahlen sind hier <a>, nicht <button> — sie fuehren auf eine gefilterte
   Adresse, die sich teilen und mit der Ruecktaste verlassen laesst. */
.gn-zahl { text-decoration: none; }
.gn-zahl:hover { text-decoration: none; }
.gn-zahl.aktiv { background: var(--accent-soft); box-shadow: var(--shadow-sm); }

/* Fehlt das Rechnungs-PDF, ist die Ablage unvollstaendig — auch mit Nachweis. */
.gn-typ-warn { background: var(--tone-amber-bg); color: var(--tone-amber); }
.gelesen-marke.gm-neutral { background: var(--tone-neutral-bg); color: var(--tone-neutral); border-color: var(--tone-neutral-bd); }

/* Die Blattflaeche im Pruefer-Modus. IMMER <iframe> — <object> waere durch
   object-src 'none' lautlos leer (am 03.09.2026 im Chrome nachgemessen). */
/* FESTE Hoehe, nicht flex:1.
   ------------------------------------------------------------------
   Damit stehen BEIDE Blaetter exakt gleich hoch und gleich gross: die
   Kopfzeilen darueber sind gleich hoch, also beginnen die Blaetter auf
   derselben Linie und enden auf derselben. Waechst das Blatt stattdessen
   in den freien Platz, ist das linke so viel groesser, wie rechts die
   Feld-Leiste einnimmt — genau der schiefe Anblick, um den es ging.
   Der Rest der Spalte bleibt unten leer; das faellt nicht auf, weil die
   Kaesten selbst gleich hoch sind (.split, align-items: stretch). */
.blatt-rahmen {
  width: 100%; height: 560px; flex: none; border: 0; display: block;
  background: var(--surface-med);
}

/* Der Nachweis-Block ist selbst eine Spalte — nur so wirkt `order` unten. */
.nw-block { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.nw-block .doku-kopf   { order: 1; }
.nw-block .nw-felder   { order: 2; }
.nw-block .blatt-rahmen{ order: 3; }
.nw-block .doku-leer   { order: 4; }
.nw-block .doku-ersetzen { order: 5; }
.nw-block .nw-entfernen  { order: 6; }

/* LIEGT EIN BELEG VOR, wandert die Feld-Leiste UNTER das Blatt.
   Sonst begaenne das rechte Blatt um ihre Hoehe tiefer als das linke, und
   keine Angleichung der Kaesten koennte das noch geradebiegen.
   Ohne Beleg bleibt sie oben: dann ist sie der ganze Inhalt (ein
   Tracking-Nachweis ohne PDF besteht nur aus seinen Angaben). */
/* Nimmt nur Platz ein, zeigt nichts. visibility statt display: eine
   ausgeblendete Leiste haette die Hoehe 0 und damit keinen Zweck. */
.doku-reiter-blind { visibility: hidden; pointer-events: none; }

.nw-block.mit-datei .nw-felder {
  order: 4; border-bottom: 0; border-top: 1px solid var(--outline-variant);
}

.doku-leer { padding: var(--sp-6) var(--sp-4); color: var(--text-muted); font-size: 13px; }
.doku-leer form { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-3); }

/* Die erfassten Angaben stehen UEBER dem Blatt: bei einem Tracking-Nachweis
   ohne PDF sind sie der ganze Inhalt. */
.nw-felder {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-3); margin: 0; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--outline-variant); background: var(--surface-bright);
}
.nw-felder div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nw-felder dt { font-size: var(--fs-xs); color: var(--text-faint); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.nw-felder dd { margin: 0; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.nw-entfernen { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; align-items: center; margin: 0; }
.nw-entfernen input[type="text"] {
  flex: 1 1 12rem; padding: 6px 10px; font: inherit; font-size: 13px;
  background: var(--surface-lowest); border: 1px solid var(--outline-variant);
  border-radius: var(--radius); color: var(--text);
}

/* Die Typ-Auswahl im Modal traegt jetzt echte Radios (Tastatur, ohne JS). */
.gm-typ input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.gm-typ.gewaehlt { border-color: var(--primary); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.gm-typ:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.gm-felder .feld .pf, .gn-filter .feld .pf { color: var(--tone-red); }

.form-aktionen { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; }
.gn-keine td { padding: 0; }


/* HIDDEN MUSS GEWINNEN.
   `[hidden]` setzt display:none mit der Spezifitaet 0,1,0 — jede eigene
   display-Regel auf demselben Element schlaegt es. .gm-felder und .feld sind
   Grid-Kaesten, also blieben im Nachweis-Modal ALLE Felder sichtbar, obwohl
   das Markup sie versteckt: man sah Trackingnummer, MRN und CMR gleichzeitig.
   Am 04.09.2026 im Browser aufgefallen, mit curl waere es nie aufgefallen. */
[hidden] { display: none !important; }
.upload-gross { display: block; }

/* Beleg ersetzen: zugeklappt, weil es der seltene Fall ist. Offen stehend
   waere es ein Dateifeld direkt unter dem angezeigten Dokument — eine
   Einladung, versehentlich zu ueberschreiben. */
.doku-ersetzen { border-top: 1px solid var(--outline-variant); padding: var(--sp-2) var(--sp-4) var(--sp-3); }
.doku-ersetzen summary { font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; }
.doku-ersetzen summary:hover { color: var(--text); }
.doku-ersetzen form { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: var(--sp-2) 0 4px; }
.doku-ersetzen .hinweis { font-size: var(--fs-xs); color: var(--text-faint); }
.doku-leer form { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-3); }

/* --- Sortierbare Spaltenkoepfe ---------------------------------------- */
/* Der ganze Kopf ist die Klickflaeche, nicht nur das Wort — sonst trifft man
   bei einer schmalen Spalte wie "Preis" daneben. */
.sort-kopf { padding: 0; }
.sort-kopf > a {
  display: block; padding: inherit; color: inherit; text-decoration: none;
  padding: .5rem .6rem; white-space: nowrap;
}
.sort-kopf > a:hover { color: var(--text); background: var(--surface-variant); }
.sort-kopf.r > a { text-align: right; }
.sort-kopf.sort-aktiv > a { color: var(--text); font-weight: 600; }
/* Der Pfeil steht IMMER da, auch unsichtbar: sonst springt die Spaltenbreite,
   sobald man sortiert. */
.sort-pfeil { display: inline-block; width: .8em; margin-left: .15em; font-size: .8em; }