/* ══════════════════════════════════════════════════════════════════
     BELEGPRÜFUNG — Stil, angeglichen an den Website-Auftritt
     Stand 2026-07-31. Basis: Design-Tokens des Website-Entwurfs.

     Grundsatz: Gelb + Warmgrau tragen die Marke. Die CD-Blautöne
     (#1F497D / #4F81BD / #4BACC6) werden bewusst NICHT verwendet —
     dieselbe Festlegung wie im Website-Auftritt.

     Übernommene Website-Motive: gelber 3px-Strich als Sektionsmarker,
     dunkler Tabellenkopf, 4px gelbe Kante an Merkkästen, 2px-Kopflinie,
     Radius 0, keine Schatten außer am Overlay.

     Grün/Orange/Rot bleiben farbig — sie tragen den PRÜFSTATUS und sind
     keine Dekoration. Kontrastwerte sind auf ≥ 4,5:1 nachjustiert.
     ══════════════════════════════════════════════════════════════════ */

  /* Jost, selbst gehostet (SIL OFL 1.1, siehe assets/fonts/OFL.txt).
     Bewusst KEIN Google-Fonts-Link: die CSP erlaubt nur 'self', und eine
     Einbettung von fonts.gstatic.com wäre ein DSGVO-Verstoß
     (LG München I, 3 O 17493/20). Variable Achse 400–600. */
  @font-face{
    font-family:'Jost';
    font-style:normal;
    font-weight:400 600;
    font-display:swap;
    src:url('/assets/fonts/jost-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
      U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face{
    font-family:'Jost';
    font-style:normal;
    font-weight:400 600;
    font-display:swap;
    src:url('/assets/fonts/jost-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
      U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
      U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  :root{
    /* Ink — identisch zur Website */
    --ink:#2B2B2A;            /* Fließtext */
    --ink-head:#5B5856;       /* Überschriften, dunkle Flächen, Links */
    --ink-muted:#72706F;      /* Sekundärtext, Labels (CD-Grau) */
    --ink-deep:#454341;       /* Hover auf dunkler Fläche */
    --on-dark:#E4E1DA;

    /* Alt-Namen bleiben als Alias, damit bestehendes Markup weiterläuft */
    --grau:var(--ink-muted); --grau-dunkel:var(--ink-head); --grau-tief:var(--ink);

    --gelb:#FACF00; --gelb-tief:#E5BD00;
    --gelb-schrift:#7C6900;   /* Gelb als Textfarbe auf Hell: 5,2:1 auf #FFFBE8 */
    --gelb-dunkel:var(--gelb-tief);

    --weiss:#FFFFFF; --creme:#EEECE1; --papier:#FBFAF6; --papier-2:#F7F6F0;
    --linie:#DDDBD2; --linie-stark:#C9C6BA; --linie-hell:#E9E7DD;
    --ink-muted-creme:#5F5D58; /* Sekundärtext auf Creme: 5,6:1 */

    /* Prüfstatus — funktional, bleibt farbig */
    --ok:#3D7A4B;      --ok-bg:#E9F1EA;      --ok-linie:#CBE0D0;
    --ok-text:#356B41;      /* Badge-Schrift: 5,5:1 auf --ok-bg */
    --achtung:#A86A00; --achtung-bg:#FBF3E2; --achtung-linie:#EBD9AE;
    --achtung-text:#8F5A00; /* Badge-Schrift: 5,2:1 auf --achtung-bg */
    --rot:#B0241B;
    /* Rückwärts-Aliase */
    --gruen:var(--ok); --gruen-bg:var(--ok-bg);
    --orange:var(--achtung); --orange-bg:var(--achtung-bg);

    /* KOMPATIBILITÄT — die Blau-Variablen bleiben als Namen bestehen und
       zeigen auf warme Ersatzrollen. Grund: app.css und Inline-Styles im
       Markup referenzieren --blau-d/--blau-m/--tuerkis. Ohne diese Aliase
       werden z. B. die Prüfer-Kürzel zu unsichtbaren weißen Kreisen.
       Beim Aufräumen des Markups können sie später entfallen. */
    --blau-d:var(--ink-head);      /* war Linkfarbe → Warmgrau + gelbe Kante */
    --blau-bg:var(--papier-2);     /* war getönte Fläche → Papier */
    /* Mehrere Prüfer bedeuten alle dasselbe: „hat geprüft". Sie werden
       deshalb nicht mehr über Fremdfarben unterschieden, sondern über die
       Initialen — Farbe bleibt einheitlich der Prüf-Grünton. */
    --blau-m:var(--ok);
    --tuerkis:var(--ok);

    --schatten:none;          /* CD: keine Dekoration. Schatten nur am Overlay. */
    --radius:0px;             /* kantig — wie die Website */

    --sans:Jost,"Century Gothic",system-ui,sans-serif;   /* Display/UI-Labels */
    --body:Arial,"Liberation Sans",system-ui,sans-serif; /* Fließtext */
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{font-family:var(--body);font-size:14px;color:var(--ink);background:var(--creme);
    line-height:1.5;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:9 5 4;overflow-wrap:break-word}
  h1,h2,h3,.font-display{font-family:var(--sans);font-weight:500;color:var(--ink-head)}
  button{font-family:inherit;cursor:pointer}
  .num{font-variant-numeric:tabular-nums;white-space:nowrap}
  a{color:var(--ink-head)}
  :focus-visible{outline:2.5px solid var(--ink-muted);outline-offset:2px}
  ::selection{background:var(--gelb);color:var(--ink-head)}

  /* Textlink-Idiom der Website: gelbe Kante beim Hover statt Blau */
  .txtlink{background:none;border:0;padding:0;font-family:var(--sans);font-weight:500;font-size:13px;
    color:var(--ink-head);border-bottom:2px solid transparent;min-height:24px}
  .txtlink:hover{border-bottom-color:var(--gelb)}

  /* ── Demo-Banner ─────────────────────────── */
  .demo-strip{background:var(--ink-head);color:var(--on-dark);font-family:var(--sans);font-size:11px;
    letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:6px 12px}
  .demo-strip b{color:var(--gelb);font-weight:500}

  /* ── Kopfzeile ───────────────────────────── */
  header.app{background:var(--weiss);border-bottom:2px solid var(--ink-head);position:sticky;top:0;z-index:50}
  .app-bar{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 20px}
  /* Fassung W (logo.svg, 6,61:1) seit 11.09.2026 im Einsatz — 22px passt
     optisch zum alten Logo.png (4,35:1 bei 34px), s. Website-Kopf. */
  .app-bar img.logo{height:22px;width:auto;display:block}
  .crumb{font-family:var(--sans);font-size:13px;color:var(--ink-muted);display:flex;gap:8px;
    align-items:center;flex:1;min-width:0;overflow:hidden}
  .crumb .sep{color:var(--linie-stark)}
  .crumb b{color:var(--ink-head);font-weight:500;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;min-width:0}
  .userchip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-muted)}
  /* Avatare bleiben rund: Personen sollen sich als Personen lesen. */
  .avatar{width:28px;height:28px;border-radius:50%;background:var(--ink-head);color:#fff;display:flex;
    align-items:center;justify-content:center;font-size:11px;font-weight:600;font-family:var(--sans)}
  .avatar.gelb{background:var(--gelb);color:var(--ink-head)}

  /* Rollen-Umschalter — kantig, Segmentmuster */
  .rolle-switch{display:flex;border:1px solid var(--linie-stark);border-radius:var(--radius);
    overflow:hidden;font-family:var(--sans);font-size:12px}
  .rolle-switch button{border:0;background:var(--weiss);padding:7px 14px;color:var(--ink-muted);min-height:32px}
  .rolle-switch button:hover{background:var(--papier)}
  .rolle-switch button.aktiv{background:var(--ink-head);color:#fff}

  /* ── Layout ──────────────────────────────── */
  main{max-width:1100px;margin:0 auto;padding:26px 20px 90px}
  .screen{display:none}
  .screen.aktiv{display:block;animation:auf .28s ease}
  @keyframes auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.screen.aktiv{animation:none}}

  /* Sektionsmarker — der gelbe Strich der Website ersetzt das Signet.
     (Das Signet aus zwei Quadraten bleibt dem Marketing-Auftritt und
     der Login-Seite; in der Anwendung ist der Strich ruhiger.) */
  .sek-titel{display:flex;align-items:center;gap:14px;margin:40px 0 14px}
  .sek-titel:first-child{margin-top:0}
  .signet{width:28px;height:3px;background:var(--gelb);flex:none;position:static}
  .signet::before,.signet::after{content:none}
  .sek-titel h2{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-muted)}
  .sek-titel .hint{font-size:12.5px;color:var(--ink-muted);margin-left:auto}

  .card{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:none}

  /* ── Objektkopf ──────────────────────────── */
  .objekt-kopf{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:24px}
  .objekt-kopf .titel{flex:1 1 auto;min-width:0}
  .objekt-kopf h1{font-size:26px;line-height:1.15;letter-spacing:-.015em;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .objekt-kopf .sub{color:var(--ink-muted);font-size:13.5px;margin-top:4px}
  .jahr-pill{font-family:var(--sans);font-weight:500;background:var(--gelb);color:var(--ink-head);
    padding:6px 16px;border-radius:var(--radius);font-size:15px;letter-spacing:.04em}
  .kopf-rechts{margin-left:auto;display:flex;gap:12px;align-items:center}
  .fortschritt{font-family:var(--sans);font-size:12.5px;color:var(--ink-muted);text-align:right}
  /* Prüffortschritt bleibt GRÜN (Albert 31.07.2026) — er gehört zur
     Prüfstatus-Familie (grüne Punkte, grüne Prüfer-Kürzel, „geprüft"-Badge)
     und liest sich als „so weit ist die Prüfung", nicht als Dekoration. */
  .balken{width:150px;height:6px;background:var(--linie-hell);border-radius:0;overflow:hidden;margin-top:5px}
  .balken i{display:block;height:100%;width:38%;background:var(--ok);border-radius:0}

  .btn{border:2px solid transparent;border-radius:var(--radius);padding:11px 20px;font-size:13.5px;
    font-weight:500;font-family:var(--sans);letter-spacing:.01em;min-height:44px;
    display:inline-flex;align-items:center;gap:9px}
  .btn-primaer{background:var(--ink-head);border-color:var(--ink-head);color:#fff}
  .btn-primaer:hover{background:var(--ink-deep);border-color:var(--ink-deep)}
  .btn-gelb{background:var(--gelb);border-color:var(--gelb);color:var(--ink-head)}
  .btn-gelb:hover{background:var(--gelb-tief);border-color:var(--gelb-tief)}
  .btn-ghost{background:transparent;border-color:var(--linie-stark);color:var(--ink-head)}
  .btn-ghost:hover{border-color:var(--ink-head);background:var(--papier)}

  /* ── Bank-Karte ──────────────────────────── */
  .bank-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .bank-zelle{padding:20px 22px}
  .bank-zelle + .bank-zelle{border-left:1px solid var(--linie)}
  .bank-label{font-family:var(--sans);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;
    color:var(--ink-muted);display:flex;gap:7px;align-items:center}
  .bank-wert{font-family:var(--sans);font-size:27px;font-weight:500;margin-top:6px;color:var(--ink-head)}
  .bank-datum{font-size:12px;color:var(--ink-muted);margin-top:3px}
  .info-i{display:inline-flex;width:16px;height:16px;border-radius:50%;border:1px solid var(--ink-muted);
    color:var(--ink-muted);font-size:10px;align-items:center;justify-content:center;font-style:normal;cursor:help}
  .bank-fuss{border-top:1px solid var(--linie);padding:13px 22px;display:flex;flex-wrap:wrap;gap:12px;
    align-items:center;font-size:13px}
  .bank-iban{color:var(--ink-muted);letter-spacing:.04em;font-variant-numeric:tabular-nums}
  /* war blau + underline → jetzt Website-Textlink */
  /* wie .zurueck: dauerhaft erkennbar, war vorher blau unterstrichen */
  .schwebe-knopf{margin-left:auto;background:none;border:0;font-family:var(--sans);font-weight:500;
    font-size:13px;color:var(--ink-head);border-bottom:2px solid var(--gelb);min-height:24px}
  .schwebe-knopf:hover{color:var(--ink);border-bottom-color:var(--ink-head)}
  .schwebe{display:none;border-top:1px solid var(--linie);border-left:4px solid var(--gelb);
    padding:14px 22px;background:var(--papier-2);font-size:13px}
  .schwebe.offen{display:block}
  .schwebe table{width:100%;border-collapse:collapse}
  .schwebe td{padding:5px 6px;border-bottom:1px solid var(--linie-hell)}
  .schwebe tr:last-child td{border-bottom:0;font-family:var(--sans);font-weight:500}

  /* Auszug-Chips */
  .auszug-reihe{display:flex;gap:7px;padding:15px 22px;border-top:1px solid var(--linie);
    align-items:center;flex-wrap:nowrap;overflow-x:auto}
  .auszug-reihe .rl{font-family:var(--sans);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;
    color:var(--ink-muted);margin-right:8px;white-space:nowrap}
  .chip-auszug{font-family:var(--sans);font-size:12.5px;border:1px solid var(--linie);border-radius:var(--radius);
    padding:6px 11px;background:var(--weiss);color:var(--ink-head);display:inline-flex;gap:6px;
    align-items:center;text-decoration:none;min-height:32px}
  .chip-auszug:hover{border-color:var(--ink-head);background:var(--papier)}
  .chip-auszug .pdf{width:7px;height:9px;background:var(--rot);border-radius:0;display:inline-block}
  .chip-auszug.fehlt{border-style:dashed;color:#A9A69E;background:transparent}
  .chip-auszug.manuell{border-color:var(--gelb-tief);background:#FFFBE8}
  .voll-hinweis{font-size:12px;color:var(--achtung);margin-left:auto;white-space:nowrap}

  /* Monats-Chips — quadratisch, alle 12 in einer Zeile */
  .chip-monat{min-width:32px;height:30px;border:1px solid var(--linie);border-radius:var(--radius);
    background:var(--weiss);color:var(--ink-head);font-size:12.5px;font-weight:500;font-family:var(--sans);
    display:inline-flex;align-items:center;justify-content:center;text-decoration:none;flex:none;position:relative}
  .chip-monat:hover{border-color:var(--ink-head);background:var(--papier)}
  .chip-monat::after{content:"";position:absolute;top:3px;right:3px;width:4px;height:5px;background:var(--rot)}
  .chip-monat.fehlt{border-style:dashed;color:#A9A69E;background:transparent;cursor:default}
  .chip-monat.fehlt::after{display:none}
  .chip-monat.manuell{border-color:var(--gelb-tief);background:#FFFBE8}

  /* Bereichsauswahl */
  .range-reihe{display:flex;gap:8px;padding:13px 16px;border-bottom:1px solid var(--linie);
    flex-wrap:wrap;align-items:center}
  .range-reihe .rl{font-family:var(--sans);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;
    color:var(--ink-muted);margin-right:6px}
  .range-chip{border:1px solid var(--linie);border-radius:var(--radius);padding:7px 15px;font-family:var(--sans);
    font-size:12.5px;background:var(--weiss);color:var(--ink-head);min-height:32px}
  .range-chip:hover{border-color:var(--ink-head);background:var(--papier)}
  .range-chip.aktiv{background:var(--ink-head);color:#fff;border-color:var(--ink-head)}

  /* Gruppierung wie Hausgeldabrechnung */
  tr.gruppe td{background:var(--papier-2);font-family:var(--sans);font-weight:500;font-size:11.5px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);padding:11px 14px}
  tr.zsumme td{background:var(--papier-2);font-family:var(--sans);font-weight:500;border-top:1px solid var(--linie)}
  tr.zsumme .zusatz-grau{font-family:var(--body);font-weight:400;color:var(--ink-muted)}
  tr.gesamt td{background:var(--creme);font-family:var(--sans);font-weight:500;font-size:14.5px;
    border-top:2px solid var(--ink-head)}
  tr.gba-detail{display:none}
  tr.gba-detail.offen{display:table-row}
  tr.gba-detail>td{background:var(--papier-2);padding:0 14px 14px 46px}
  .mini-tab{width:100%;border-collapse:collapse;font-size:13px;background:var(--weiss);
    border:1px solid var(--linie);border-radius:var(--radius)}
  .mini-tab td{padding:8px 12px;border-bottom:1px solid var(--linie-hell)}
  .mini-tab tr:last-child td{border-bottom:0}
  .mini-tab .um{color:var(--ink-muted)}   /* war blau */

  /* Kurzanleitung — gelbe Kante, das Website-Motiv */
  details.anleitung{margin-bottom:24px;border-left:4px solid var(--gelb)}
  details.anleitung summary{display:flex;align-items:center;gap:12px;padding:15px 20px;cursor:pointer;
    list-style:none;font-family:var(--sans);font-weight:500;font-size:14.5px;color:var(--ink-head);min-height:48px}
  details.anleitung summary::-webkit-details-marker{display:none}
  details.anleitung summary:hover{background:var(--papier)}
  details.anleitung .auf-zu{margin-left:auto;color:var(--ink-muted);font-size:13px;transition:.15s}
  details.anleitung[open] .auf-zu{transform:rotate(180deg)}
  details.anleitung ol{padding:2px 24px 20px 44px;font-size:14px;color:var(--ink)}
  details.anleitung li{margin-bottom:9px;line-height:1.6}
  details.anleitung li::marker{font-family:var(--sans);font-weight:500;color:var(--gelb-schrift)}

  /* ── Tabellen: dunkler Kopf wie auf der Website ─────────── */
  .tabelle{width:100%;border-collapse:collapse;font-size:13.5px}
  .tabelle thead th{background:var(--ink-head);color:#fff;font-family:var(--sans);font-size:11px;
    text-transform:uppercase;letter-spacing:.12em;font-weight:500;text-align:left;
    padding:13px 14px;white-space:nowrap;border-bottom:0}
  .tabelle thead th.r{text-align:right}
  .tabelle tbody td{padding:12px 14px;border-bottom:1px solid var(--linie-hell);vertical-align:middle}
  .tabelle tbody tr:last-child td{border-bottom:0}
  .tabelle tbody tr.klick{cursor:pointer}
  .tabelle tbody tr.klick:hover{background:var(--papier)}
  .tabelle td.r{text-align:right;font-variant-numeric:tabular-nums}
  .konto-nr{font-family:var(--sans);font-weight:500;color:var(--ink-head)}
  .konto-sub{font-size:12px;color:var(--ink-muted);margin-top:2px}
  .tab-scroll{overflow-x:auto}

  /* Status & Chips */
  .punkt{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}
  .punkt.p-leer{visibility:hidden}
  .p-gruen{background:var(--ok)} .p-orange{background:var(--achtung)} .p-grau{background:var(--linie-stark)}
  .chips{display:flex;gap:4px;align-items:center}
  /* Prüfer-Kürzel: rund, weil es Personen sind */
  .chip-pruef{width:25px;height:25px;border-radius:50%;font-size:9.5px;font-weight:600;font-family:var(--sans);
    display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--weiss);
    background:var(--ok);color:#fff;box-shadow:0 0 0 1px var(--linie)}
  .chip-leer{width:25px;height:25px;border-radius:50%;border:1.5px dashed var(--linie-stark);background:none;
    color:#A9A69E;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
  .chip-leer:hover{border-color:var(--ok);color:var(--ok)}
  /* Badges: kantig, Prüfstatus behält Farbe, Sachinfo wird neutral */
  .badge{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.05em;
    border-radius:var(--radius);padding:4px 9px;border:1px solid transparent}
  .b-extern{background:var(--papier-2);color:var(--ink-muted);border-color:var(--linie)} /* war blau */
  .b-frage{background:var(--achtung-bg);color:var(--achtung-text);border-color:var(--achtung-linie)}
  .b-ok{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-linie)}
  .b-neutral{background:var(--papier-2);color:var(--ink-muted);border-color:var(--linie)}
  /* Warnbadge (Rücklagen-Abgleich): wie b-frage, aber mit voller Kante —
     es meldet einen Befund, nicht nur einen Status. */
  .b-warn{background:var(--achtung-bg);color:var(--achtung-text);border-color:var(--achtung)}
  .b-manuell{background:#FFFBE8;color:var(--gelb-schrift);border-color:var(--gelb-tief)}
  .beleg-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12.5px;
    border:1px solid var(--linie);border-radius:var(--radius);padding:5px 11px;color:var(--ink-head);
    background:var(--weiss);text-decoration:none;min-height:30px}
  .beleg-pill:hover{border-color:var(--ink-head);background:var(--papier)}
  .beleg-pill .pdf{width:7px;height:9px;background:var(--rot)}
  .kein-beleg{font-size:12.5px;color:#A9A69E}

  /* Abgleich-Hinweis: Treffer bleibt grün, Hinweis wird neutral + gelbe Kante */
  .abgleich{display:flex;gap:10px;align-items:flex-start;background:var(--ok-bg);
    border:1px solid var(--ok-linie);border-left:4px solid var(--ok);border-radius:var(--radius);
    padding:13px 18px;font-size:13.5px;color:#2C6339;margin:12px 0 0}
  .abgleich.warn{background:var(--papier-2);border-color:var(--linie);border-left-color:var(--gelb);
    color:var(--ink)}   /* war blau */
  .haken{font-family:var(--sans);font-weight:600}

  .fussnote{font-size:12.5px;color:#5F5D58;padding:13px 16px;border-top:1px solid var(--linie)}

  details.nichtumgelegt{margin-top:10px}
  details.nichtumgelegt summary{cursor:pointer;font-family:var(--sans);font-size:13px;color:var(--ink-muted);
    padding:10px 4px;list-style:none;min-height:36px}
  details.nichtumgelegt summary::before{content:"▸ ";color:var(--ink-muted)}
  details.nichtumgelegt[open] summary::before{content:"▾ "}

  /* ── Rücklagen ───────────────────────────── */
  .rl-grid{display:grid;grid-template-columns:repeat(4,1fr)}
  .rl-zelle{padding:18px 20px;border-left:1px solid var(--linie)}
  .rl-zelle:first-child{border-left:0}
  .rl-label{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-muted)}
  .rl-wert{font-family:var(--sans);font-size:20px;font-weight:500;margin-top:5px;color:var(--ink-head)}
  .rl-wert.minus{color:var(--rot)} .rl-wert.plus{color:var(--ok)}
  /* Unterzeile am Kontostand (Kevin 05.08.2026): der Kontostand laut
     Auszug ist die Hauptzahl, der Wertstellungswert steht kleiner
     darunter — nicht als gleichrangige Spalte daneben. */
  .rl-unterwert{font-family:var(--sans);font-size:12px;margin-top:4px;color:var(--ink-muted)}
  .rl-unterwert .u-zahl{font-weight:500}
  .rl-detail{border-top:1px solid var(--linie)}
  .rl-detail summary{padding:13px 20px;font-family:var(--sans);font-weight:500;font-size:13px;
    color:var(--ink-head);cursor:pointer;list-style:none;min-height:44px}  /* war blau */
  .rl-detail summary:hover{background:var(--papier)}
  .rl-detail summary::before{content:"▸ ";color:var(--ink-muted)}
  .rl-detail[open] summary::before{content:"▾ "}

  /* ── Abschluss-Karte ─────────────────────────────────────────────────
     Zwei Zeilen statt einer (Kevin 07.08.2026): Der Knopf stand neben dem
     Text in derselben Flex-Zeile und presste die Erklärung mitsamt
     max-width:70ch in eine schmale Spalte — links zehn kurze Zeilen,
     rechts unter dem Knopf eine leere Fläche. Jetzt nimmt der Text die
     Kartenbreite, der Knopf sitzt rechts darunter. Blocksatz mit
     Silbentrennung, weil es eine Erklärung ist und wie eine aussehen
     soll; die Trenngrenzen sind hier weicher als global (6 3 3), sonst
     reißt der Blocksatz Löcher zwischen die Wörter. */
  .abschluss{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;
    padding:20px 22px;margin-top:38px;border-left:4px solid var(--gelb)}
  .abschluss input{width:20px;height:20px;margin-top:2px;accent-color:var(--ink-head)}
  .abschluss .t b{font-family:var(--sans);font-weight:500;font-size:14.5px;color:var(--ink-head)}
  /* Kein max-width: die Erklärung soll mit der Karte abschließen, also mit
     der rechten Kante des Knopfes. Die Zeilenlänge ist trotzdem begrenzt —
     main deckelt bei 1100px. */
  .abschluss .t p{font-size:13px;color:var(--ink-muted);margin-top:7px;
    text-align:justify;text-justify:inter-word;hyphenate-limit-chars:6 3 3}
  .abschluss .btn{grid-column:2;justify-self:end;flex:none}
  /* Schmale Geräte: der Knopf über die ganze Breite, Blocksatz raus — auf
     ~40 Zeichen Zeilenlänge erzeugt er mehr Lücken als Ordnung. */
  @media (max-width:640px){
    .abschluss .t p{text-align:left}
    .abschluss .btn{grid-column:1/-1;justify-self:stretch}
  }
  .abschluss-ok{display:none;margin-top:38px;padding:18px 22px;background:var(--ok-bg);
    border:1px solid var(--ok-linie);border-left:4px solid var(--ok);border-radius:var(--radius);
    color:#2C6339;font-size:13.5px}

  /* ── Beleg-Screen ────────────────────────── */
  /* Zwei Zeilen: die Zoomleiste steht allein in Zeile 1 über dem Viewer,
     Viewerfenster und Infospalte teilen Zeile 2. So schließt die Infobox
     oben bündig mit dem Fenster ab und nicht mit den Zoom-Knöpfen
     (Albert 31.07.2026). */
  .beleg-layout{display:grid;grid-template-columns:1fr 340px;
    grid-template-rows:auto 1fr;column-gap:20px;row-gap:0;align-items:start}
  .beleg-layout .zelle-werkzeuge{grid-column:1;grid-row:1}
  .beleg-layout .zelle-viewer{grid-column:1;grid-row:2}
  .beleg-layout .zelle-info{grid-column:2;grid-row:2}
  .pdf-rahmen{background:var(--ink-head);border-radius:var(--radius);padding:28px;display:flex;justify-content:center}
  .pdf-seite{background:#fff;width:100%;max-width:480px;aspect-ratio:210/280;border-radius:0;
    box-shadow:0 8px 30px rgba(0,0,0,.28);padding:34px 38px;font-size:10px;color:#555;overflow:hidden}
  .pdf-seite .kopf{display:flex;justify-content:space-between;border-bottom:2px solid #333;
    padding-bottom:8px;margin-bottom:14px}
  .pdf-seite .kopf b{font-size:13px;color:#222}
  .zeile-skelett{height:7px;background:#E8E6E0;border-radius:0;margin:7px 0}
  .zeile-skelett.k{width:55%} .zeile-skelett.m{width:80%}
  .pdf-summe{margin-top:18px;border-top:1px solid #ccc;padding-top:8px;display:flex;
    justify-content:space-between;font-weight:700;color:#222;font-size:11px}
  .meta-liste{font-size:13.5px}
  .meta-liste dt{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
    color:var(--ink-muted);margin-top:14px}
  .meta-liste dd{margin:3px 0 0;color:var(--ink)}
  .meta-block{padding:18px 20px}
  .meta-trenn{border-top:1px solid var(--linie)}
  .vorgang-kontext{font-size:13.5px;margin-top:7px;line-height:1.55}

  /* Kommentare — Verwalter wird über die gelbe Kante unterschieden,
     nicht mehr über eine blaue Fläche */
  .thread{padding:18px 20px}
  .kommentar{display:flex;gap:12px;margin-bottom:16px}
  .kommentar .blase{background:var(--papier-2);border:1px solid var(--linie);border-radius:var(--radius);
    padding:11px 14px;font-size:13.5px;flex:1}
  .kommentar .wer{font-family:var(--sans);font-size:11.5px;color:var(--ink-muted);margin-bottom:4px;
    display:flex;gap:9px;align-items:center}
  .kommentar.verwalter .blase{background:var(--weiss);border-left:4px solid var(--gelb)}
  .status-zeile{font-size:11.5px;color:var(--ink-muted);text-align:center;margin:12px 0}
  .composer{display:flex;gap:9px;margin-top:8px}
  .composer input{flex:1;border:1px solid var(--linie-stark);border-radius:var(--radius);padding:11px 13px;
    font-size:13.5px;font-family:inherit;background:var(--weiss);min-height:44px}
  .composer input:focus-visible{outline:2.5px solid var(--ink-muted);outline-offset:2px;border-color:var(--ink-head)}

  /* ── Verwalter-Screen ────────────────────── */
  .inbox-zeile{display:flex;gap:16px;padding:16px 18px;border-bottom:1px solid var(--linie);align-items:flex-start}
  .inbox-zeile:last-child{border-bottom:0}
  .inbox-zeile .t{flex:1}
  .inbox-zeile .t b{font-family:var(--sans);font-weight:500;font-size:14px;color:var(--ink-head)}
  .inbox-zeile .t p{font-size:13px;color:var(--ink-muted);margin-top:3px}
  .dropzone{border:2px dashed var(--linie-stark);border-radius:var(--radius);padding:34px;text-align:center;
    color:var(--ink-muted);font-size:13.5px;background:var(--papier-2);transition:.15s}
  .dropzone:hover{border-color:var(--gelb-tief);background:#FFFDF2}
  .dropzone .gross{font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink-head);margin-bottom:6px}
  .dropzone .icon{font-size:26px;margin-bottom:10px;color:var(--ink-muted)}

  /* ── Modal — der einzige Ort mit Schatten (funktional) ── */
  .modal-hg{display:none;position:fixed;inset:0;background:rgba(43,43,42,.5);z-index:100;
    align-items:center;justify-content:center;padding:20px}
  .modal-hg.offen{display:flex}
  .modal{background:var(--weiss);border-radius:var(--radius);border-top:4px solid var(--gelb);
    max-width:460px;width:100%;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
  .modal h3{font-family:var(--sans);font-size:18px;font-weight:500;margin-bottom:10px}
  .modal p{font-size:13.5px;color:var(--ink);margin-bottom:9px}
  .modal .warnung{font-size:13px;background:var(--achtung-bg);color:var(--achtung);
    border:1px solid var(--achtung-linie);border-left:4px solid var(--achtung);
    border-radius:var(--radius);padding:10px 13px;margin:12px 0}
  .modal .aktionen{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

  /* Navigations-Control, kein Fließtextlink: die gelbe Kante ist hier
     DAUERHAFT sichtbar. Nur-Hover wäre eine Verschlechterung gegenüber
     der bisherigen blauen Unterstreichung. */
  .zurueck{background:none;border:0;font-family:var(--sans);font-weight:500;font-size:13px;
    color:var(--ink-head);padding:0 0 2px;margin-bottom:16px;
    border-bottom:2px solid var(--gelb);min-height:24px}
  .zurueck:hover{color:var(--ink);border-bottom-color:var(--ink-head)}

  footer.hilfe{position:fixed;right:18px;bottom:18px}
  footer.hilfe button{width:44px;height:44px;border-radius:var(--radius);background:var(--ink-head);
    color:var(--gelb);font-family:var(--sans);font-size:18px;font-weight:500;border:0;
    box-shadow:0 4px 14px rgba(43,43,42,.18)}
  footer.hilfe button:hover{background:var(--ink-deep)}

  /* ── Aufklappbare Einzelumlage-Konten ────── */
  tr.eu-kopf{cursor:pointer}
  tr.eu-kopf:hover td{background:var(--creme)}
  tr.eu-kopf.offen td{border-bottom:2px solid var(--gelb)}
  /* Der Kopf trägt jetzt einen Kontonamen und Kennzahlen — als
     Versalien (Konvention der übrigen Gruppenköpfe) wäre das schwer
     lesbar. Deshalb hier normale Schreibweise. */
  tr.eu-kopf td{text-transform:none;letter-spacing:.01em;font-size:13.5px}
  .eu-pfeil{display:inline-block;width:12px;color:var(--ink-muted)}
  .eu-anzahl{font-family:var(--body);font-weight:400;letter-spacing:0;
    text-transform:none;color:var(--ink-muted)}

  /* ── Gemeinsame Belegprüfung (Verwalter-Sicht) ── */
  .gemeinsam-karte{border-left:4px solid var(--gelb);margin-bottom:24px}
  .gemeinsam-kopf{display:flex;gap:18px;align-items:flex-start;padding:20px 22px}
  .gemeinsam-schalter{display:flex;gap:14px;align-items:flex-start;cursor:pointer;flex:1}
  .gemeinsam-schalter input{width:20px;height:20px;margin-top:2px;accent-color:var(--ink-head);flex:none}
  .gemeinsam-schalter b{display:block;font-size:14.5px}
  .gemeinsam-schalter p{font-size:13px;color:var(--ink-muted);margin-top:5px;max-width:74ch}
  .gemeinsam-status{font-family:var(--sans);font-size:12px;text-transform:uppercase;
    letter-spacing:.1em;color:var(--ink-muted);white-space:nowrap;flex:none;padding-top:3px}
  .gemeinsam-status.an{color:var(--ok-text)}
  .gemeinsam-status.fehler{color:var(--rot);text-transform:none;letter-spacing:0;white-space:normal}
  .teilnehmer-feld{border-top:1px solid var(--linie);background:var(--papier-2);padding:18px 22px}
  .teilnehmer-liste{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
  .teilnehmer{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--linie-stark);
    background:var(--weiss);padding:10px 14px;min-height:44px;cursor:pointer;
    font-family:var(--sans);font-size:13.5px;color:var(--ink-head)}
  .teilnehmer:hover{border-color:var(--ink-head)}
  .teilnehmer input{width:18px;height:18px;accent-color:var(--ok)}
  .teilnehmer:has(input:checked){border-color:var(--ok);background:var(--ok-bg)}
  .teilnehmer-feld .hinweis-klein{padding:0;margin-top:14px}
  /* ── Gemeinsamer Abschluss (Kevin 11.09.2026) ── */
  .gemeinsam-abschluss-zone{border-top:1px solid var(--linie);background:var(--papier-2);padding:18px 22px}
  .gemeinsam-abschluss-zone .hinweis-klein{padding:0;margin-top:8px;max-width:74ch}
  .gem-abschluss-zeile{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}
  .gem-abschluss-auswahl{min-height:44px;padding:0 12px;border:1px solid var(--linie-stark);
    background:var(--weiss);font-family:var(--sans);font-size:13.5px;color:var(--ink-head)}
  /* Der Verwalter-Haken sieht anders aus als der eines Prüfers — er setzt
     fremde Markierungen und soll sich nicht wie eine eigene anfühlen. */
  .chip-leer.gemeinsam{border-style:solid;border-color:var(--gelb-tief);color:var(--gelb-schrift)}
  .chip-leer.gemeinsam:hover{background:#FFFBE8;border-color:var(--gelb-tief);color:var(--gelb-schrift)}

  @media (max-width:820px){
    .bank-grid{grid-template-columns:1fr}
    /* Mobil stapelt der Beleg-Screen: Zoomleiste, Fenster, Infospalte */
    .beleg-layout{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:18px}
    .beleg-layout .zelle-werkzeuge{grid-column:1;grid-row:1}
    .beleg-layout .zelle-viewer{grid-column:1;grid-row:2}
    .beleg-layout .zelle-info{grid-column:1;grid-row:3}
    .gemeinsam-kopf{flex-wrap:wrap}
    .bank-zelle + .bank-zelle{border-left:0;border-top:1px solid var(--linie)}
    .rl-grid{grid-template-columns:1fr 1fr}
    .rl-zelle{border-top:1px solid var(--linie)}
    .rl-zelle:nth-child(-n+2){border-top:0}
    .beleg-layout{grid-template-columns:1fr}
    .kopf-rechts{width:100%;justify-content:space-between}
    .objekt-kopf h1{white-space:normal;font-size:22px}
  }

/* Gruppierte Kontenliste (Kevin 06.08.2026) — 048 hat 58 sichtbare
   Konten, davon 25-mal „Allg.Strom <Hauseingang>". Die Gruppenzeile
   fasst zusammen, die Einzelkonten bleiben eine Ebene darunter voll
   erhalten: geprueft wird weiterhin je Konto. */
.gruppe-kopf > td{background:#F7F8FA}
.gruppe-pfeil{display:inline-block;width:1.1em;color:var(--grau-schrift, #666)}
.konto-in-gruppe > td:first-child{padding-left:2.1em}