/* Erscheinungsbild „D3 edel“ (seit 2026-10-30, Entwurf im Design-Canvas „Elster-Projekt · Neues Design“).
   Tannengrün für Aktionen und die Leiste, Elfenbein als Grund, Messing nur als Münze und feine Linie. Lädt nach webapp.css
   und vor hilfen.css. Die Farben kommen aus den Tokens in app.css (--accent, --marine, --messing …); hier stehen nur die
   Bausteine: Kopf, Leiste mit Logo, Knopfsatz M1 „Münze vorne dran“, Marken, Karten, Reiter.
   Regeln des Knopfsatzes: Nur die Hauptaktion (.btn.primaer) trägt die Münze, kleine Hauptaktionen (.klein) und der Kopf nicht.
   Alles andere bleibt schlicht mit 4 px Rundung. Zustände zeigen sich über die Fläche, nie über Rahmen oder Striche. */

/* ---------- Grund und Schrift ---------- */
body{background:var(--grund)}
h1{font-weight:700;letter-spacing:-.025em;color:var(--accent)}
h2,h3{color:var(--accent)}
.label,.sl-label,.nav-gruppe{letter-spacing:.14em;font-weight:600}
a,.link{color:var(--accent);text-decoration-color:var(--messing-linie);text-underline-offset:4px}
a:hover,.link:hover{text-decoration-thickness:2px}
:focus-visible{outline-color:var(--messing-linie)}
::selection{background:var(--accent-soft)}

/* ---------- Rahmen: Leiste über die volle Höhe, Kopf rechts daneben ---------- */
@media (min-width:761px){
  .app:not(.ohne-nav) .top{grid-column:2/-1}
  .app:not(.ohne-nav) .nav{grid-row:1/3;grid-column:1;top:0;height:100vh}
  .app:not(.ohne-nav) .top .marke{display:none}
}

/* ---------- Kopf: hell, ohne Rahmen um Bedienelemente ---------- */
.top{background:var(--grund);border-bottom:1px solid var(--line);color:var(--ink)}
.top :focus-visible{outline-color:var(--messing-linie)}
.marke i{width:46px;height:28px;border-radius:0;background:url("/static/elster-gruen.png") center/contain no-repeat}
.marke i::after{display:none}
.top .befehl-knopf{height:40px;border:0;border-radius:var(--r-m);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.top .befehl-knopf:hover{box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2)}
.top .befehl-knopf kbd{background:transparent;color:var(--muted)}
.top>.status{color:var(--ok)}
.top>.status.fehler{color:var(--bad)}
.top>.btn,.top>.job-halter .icon-btn{background:var(--sand);color:var(--ink)}
.top>.btn:hover,.top>.job-halter .icon-btn:hover{background:var(--sand-2)}
.top>.icon-btn{background:transparent;color:var(--ink-2)}
.top>.icon-btn:hover{background:var(--sand);color:var(--ink)}
.top>.icon-btn.on,.top>.job-halter .icon-btn.on{background:var(--accent);color:var(--elfenbein)}
.top .btn.primaer{background:var(--accent);color:var(--elfenbein)}
.top .btn.primaer [aria-hidden]{color:var(--messing)}

/* ---------- Leiste: Tannengrün mit Logo, aktive Ansicht hell mit dem Zeichen in der Münze ---------- */
.nav{background:var(--marine);border-right:0;color:#dbe7e2;padding:var(--s-6) var(--s-4) var(--s-4)}
.nav :focus-visible{outline-color:#d2ad5c}
/* Kopf der Leiste: Pfeil zurück und Name der Bewertung (öffnet „Bewertung bearbeiten“), Logo mittig ohne Schriftzug */
.nav-logo{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:0 0 var(--s-4)}
.nav-bild{width:110px;height:auto;display:block;margin:var(--s-4) auto 0}
.nav .nav-bewertung{display:block;min-height:0;padding:var(--s-2) var(--s-2);text-align:left;background:none}
.nav .nav-bewertung:hover{background:var(--marine-2)}
.nav-bewertung-name{font-size:var(--fs-l);font-weight:600;line-height:1.3;color:var(--elfenbein);overflow-wrap:anywhere}
/* Unten in der Leiste: Lupe für Suche und Befehle; der Hinweis zum Regelwerk steht unter Nachschlagen */
.nav .nav-suche{position:sticky;bottom:0;flex-shrink:0;margin-top:auto;align-self:flex-start;width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%;background:var(--marine-2);color:#c3d6ce;box-shadow:inset 0 0 0 1px #2c4d44,0 0 0 10px var(--marine)}
.nav .nav-suche:hover{background:var(--marine-2);color:var(--weiss);box-shadow:inset 0 0 0 1px var(--messing-linie),0 0 0 10px var(--marine)}
.nav .nav-suche .lupe{width:18px;height:18px}
.nav .nav-unter .fuss{margin:var(--s-2) 0 0;padding:var(--s-2) var(--s-2) 0;line-height:1.5}
.nav-unter.nachschlagen{padding-bottom:var(--s-6)}
/* Pfeil zurück zu allen Bewertungen neben dem Namen */
.nav-kopf{display:flex;align-items:center;gap:2px}
.nav .nav-kopf .nav-zurueck{flex-shrink:0;width:32px;min-height:32px;margin:0;padding:0 0 3px;justify-content:center;font-size:var(--fs-xl);line-height:1;color:#a9c2b8;background:none}
.nav .nav-kopf .nav-zurueck:hover{color:var(--weiss);background:var(--marine-2)}
.nav-kopf .nav-bewertung{flex:1;min-width:0}
/* Ohne Kopfzeile: Statuszeile ganz oben, rechts darin Speicherstand und Jobs */
.app.ohne-kopf{--top:0px;grid-template-rows:minmax(100vh,auto)}
.sl-rechts{display:inline-flex;align-items:center;gap:var(--s-2)}
.sl-rechts:not(:has(> :not(:empty))){display:none}   /* leer: kein Versatz in der Mitte */
.sl-rechts .status{font-size:var(--fs-xs);color:var(--ok)}
.sl-rechts .status.fehler{color:var(--bad)}
.sl-rechts .status.ok::before{color:var(--ok)}
.sl-rechts .icon-btn{background:rgba(125,95,31,.08);border-color:transparent;color:var(--messing-text)}
/* Seitenleiste rechts gleitet herein (app.js: panelHerein) */
@keyframes panel-herein{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.panel.herein{animation:panel-herein 320ms var(--ease) both}
@media (prefers-reduced-motion:reduce){.panel.herein{animation:none}}
/* „KI fragen“ schwebt unten rechts */
.ki-schwebend{position:fixed;right:28px;bottom:28px;z-index:35;display:inline-flex;align-items:center;gap:var(--s-2);height:52px;padding:0 var(--s-6) 0 var(--s-4);border-radius:var(--r-rund);background:var(--accent);color:var(--elfenbein);font-weight:600;box-shadow:0 10px 30px rgba(13,38,33,.28),inset 0 0 0 1px var(--messing-ring)}
.ki-schwebend [aria-hidden]{color:var(--messing);font-size:var(--fs-l)}
.ki-schwebend:hover{background:var(--accent-hover);transform:translateY(-1px)}
@media print{.ki-schwebend{display:none}}
.nav button{color:#dbe7e2;border-radius:var(--r-m);min-height:44px;gap:var(--s-2)}
.nav button:hover{background:var(--marine-2);color:var(--weiss)}
.nav .ic{width:24px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:#a9c2b8;line-height:1}
.nav button:hover .ic{color:var(--weiss)}
.nav button.on{background:var(--elfenbein);color:var(--accent);font-weight:600;box-shadow:none}
.nav button.on .ic{width:30px;height:30px;margin:-3px;border-radius:50%;background:var(--messing);color:var(--marine);box-shadow:inset 0 0 0 2px var(--messing),inset 0 0 0 3px var(--messing-ring)}
.nav .zahl{color:#a9c2b8}
.nav .zahl.offen{min-width:24px;height:24px;line-height:24px;padding:0 var(--s-2);border-radius:var(--r-rund);background:var(--messing);color:var(--marine);text-align:center;font-weight:700}
.nav .zahl.ok{color:#8fc6a6}
.nav .zahl.hinw{background:var(--marine-2);color:#dbe7e2}
.nav .zahl.laeuft{color:#d2ad5c}
.nav button.on .zahl{color:var(--muted)}
.nav button.on .zahl.ok{color:var(--ok)}
.nav button.on .zahl.offen{color:var(--marine)}
.nav button.on .zahl.hinw{background:var(--fill-2);color:var(--ink-2)}
.nav-gruppe{color:#a9c2b8}
.nav-hinweis{color:#c3d6ce}
.nav .fuss{color:#a9c2b8}
.nav hr{border-top-color:#23453c}
.nav button.gesperrt,.nav button.gesperrt:hover{color:#8aa39a;background:none}
/* Freigabe als richtiger Knopf in Messing, Bereiche durch einen feinen goldenen Strich getrennt, Zähler klein (2026-10-30) */
.nav button.nav-freigabe{margin:var(--s-1) 0;justify-content:center;border-radius:var(--r-rund);background:var(--messing);color:var(--marine);font-weight:700;box-shadow:inset 0 0 0 1px var(--messing-ring)}
.nav button.nav-freigabe:hover{background:var(--messing-linie);color:var(--marine)}
.nav button.nav-freigabe .ic,.nav button.nav-freigabe.on .ic{width:auto;height:auto;margin:0;background:none;box-shadow:none;color:var(--marine)}
.nav button.nav-freigabe .nt{flex:0 1 auto}
.nav button.nav-freigabe .zahl{margin-left:var(--s-1)}
.nav button.nav-freigabe .zahl.ok,.nav button.nav-freigabe.on .zahl.ok{color:var(--marine)}
.nav button.nav-freigabe.on{background:var(--messing);color:var(--marine);box-shadow:0 0 0 2px var(--marine),0 0 0 3px var(--messing)}
.nav button.nav-freigabe.gesperrt,.nav button.nav-freigabe.gesperrt:hover{background:none;color:#8aa39a;box-shadow:inset 0 0 0 1px #3a5a50}
.nav button.nav-freigabe.gesperrt .ic{color:#8aa39a}
.nav-trenner{border:0;border-top:1px solid color-mix(in srgb,var(--messing) 40%,transparent);margin:var(--s-2) var(--s-2)}
.nav .nav-trenner + button.nav-auf-zu{margin-top:0}
.nav .zahl{font-size:.78em}
.nav .zahl.offen,.nav-unter button.unter .zahl.offen{min-width:20px;height:20px;line-height:20px;padding:0 var(--s-2)}
.nav button.nav-auf-zu{color:#a9c2b8}
.nav button.nav-auf-zu:hover{color:var(--weiss)}

/* ---------- Kopfblock (seit 2026-10-30): in einer Bewertung keine Kopfzeile mehr, nur die Statuszeile ----------
   Helles Gold mit feinem Messingstrich, alles mittig: Steuerwert groß, offene Fragen, Freigabe und Hinweise als Marken, dahinter Speicherstand
   und Jobs. Suche hinter der Lupe unten in der Leiste, „KI fragen“ schwebt unten rechts. Die Kopfzeile (.top) gibt es nur noch
   auf der Liste der Bewertungen und in den Einstellungen. */
:root{--top:64px}
.top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,720px) minmax(0,1fr);gap:var(--s-4);padding:0 var(--s-6)}
.top>.marke{grid-column:1}

/* Seit 2026-10-30 dezent: helles Gold mit feiner Messinglinie, dunkle Schrift, alle Teile mittig (Auftrag Basti) */
.standleiste{background:#f4ecd9;border-bottom:1px solid color-mix(in srgb,var(--messing) 45%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink-2)}
.sl-zeile{min-height:56px;gap:var(--s-2) var(--s-2);justify-content:center}
.sl-wert{margin-right:0}
.sl-teil{color:var(--ink-2);min-height:36px}
.sl-teil:hover,.sl-teil.on{background:rgba(176,138,62,.14);color:var(--ink)}
.sl-teil b{color:var(--ink)}
.sl-label{color:var(--messing-text)}
.sl-wert{gap:var(--s-4)}
.sl-wert b{font-size:var(--fs-l);font-weight:600;letter-spacing:-.01em}
.sl-teil.warn,.sl-teil.warn b{color:var(--warn)}
.sl-teil.ok{color:var(--ok)}
.sl-teil.lila{color:var(--lila)}
.sl-punkt{background:var(--line-2)}
.sl-punkt.warn{background:var(--warn)}.sl-punkt.ok{background:var(--ok)}
.standleiste :focus-visible{outline-color:var(--messing-linie)}
.sl-blatt{padding:var(--s-1) 0 var(--s-4)}
.app:has(.standleiste){--stand:57px}

/* ---------- Knopfsatz M1 ---------- */
.btn{height:40px;padding:0 var(--s-4);border:0;border-radius:var(--r-m);background:var(--sand);color:var(--ink)}
.btn:hover{background:var(--sand-2)}
.btn:active{background:#d7cdb6}
.btn.klein{height:32px;padding:0 var(--s-4)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.ghost:hover{background:var(--sand)}
.btn:disabled{opacity:1;background:#f0ece3;color:#6b6f6a}
/* Hauptaktion: Münze ragt links heraus und trägt den Pfeil */
/* Maße der Münze, keine Abstände der Skala: sie ragt 22 px links heraus (margin-left), der Text beginnt 34 px nach der Kante, margin-top zentriert die 42 px große Münze */
.btn.primaer{position:relative;height:46px;margin-left:22px;padding:0 24px 0 34px;background:var(--accent);color:var(--elfenbein);font-weight:600}
.btn.primaer::before{content:"";position:absolute;left:-22px;top:50%;width:42px;height:42px;margin-top:-21px;border-radius:50%;background:var(--messing);box-shadow:inset 0 0 0 3px var(--messing),inset 0 0 0 4px var(--messing-ring)}
.btn.primaer::after{content:"";position:absolute;left:-9px;top:50%;width:16px;height:16px;margin-top:-8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310302a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s var(--ease)}
.btn.primaer:hover{background:var(--accent-hover)}
.btn.primaer:hover::after{transform:translateX(3px)}
.btn.primaer:active{background:#0a221d}
.btn.primaer:disabled{background:#dcd5c4;color:#5f625c}
.btn.primaer:disabled::before{background:#cfc6b2;box-shadow:inset 0 0 0 3px #cfc6b2,inset 0 0 0 4px #b9ae96}
.btn.primaer:disabled::after{opacity:.45}
.btn.primaer.klein,.top .btn.primaer{height:32px;margin-left:0;padding:0 var(--s-4)}
.top .btn.primaer{height:40px;padding:0 var(--s-4)}
.btn.primaer.klein::before,.btn.primaer.klein::after,.top .btn.primaer::before,.top .btn.primaer::after{display:none}
@media (prefers-reduced-motion:reduce){.btn.primaer::after{transition:none}}
.icon-btn{border:0;border-radius:var(--r-m);background:transparent;color:var(--ink-2)}
.icon-btn:hover{background:var(--sand);color:var(--ink)}
.icon-btn.on{background:var(--accent);color:var(--elfenbein);border:0}

/* ---------- Marken, Felder, Umschalter ---------- */
.chip{border-radius:var(--r-s);border-color:transparent;background:var(--fill)}
.chip.accent{background:var(--accent-soft);color:var(--accent)}
.input,select.input,textarea.input{border-radius:var(--r-m);border-color:var(--line-2);background:var(--bg)}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.seg{border:0;border-radius:var(--r-m);background:var(--sand);padding:3px;gap:2px}
.seg button{border-radius:3px;height:32px}
.seg button+button{border-left:0}
.seg button:hover{background:var(--sand-2);color:var(--ink)}
.seg button.on{background:var(--accent);color:var(--elfenbein)}
.schalter input{accent-color:var(--accent)}

/* ---------- Karten und Kennzahlen ---------- */
.karte{background:var(--bg);border-color:var(--line);box-shadow:none}
.dialog{background:var(--bg);border-radius:var(--r)}
.kachel .gross,.op-gross .num,.vg-betrag{font-weight:500;color:var(--accent)}
.grid3>.kachel:first-child{border-top:2px solid var(--messing-linie)}
.hinweis{border-radius:var(--r)}
.leer{border-color:var(--line-2);background:var(--bg)}
.toast{background:var(--marine);color:var(--elfenbein);border-radius:var(--r-m)}
.toast button{color:#e3c47e}

/* „Nächster Schritt“ auf der Übersicht: Tannengrün mit heller Hauptaktion */
.karte.fortschritt{background:var(--accent);border-color:var(--accent);color:var(--elfenbein)}
.fortschritt .naechster{padding:var(--s-6) var(--s-6)}
.fortschritt .label{color:#d9b96c}
.fortschritt h2{color:var(--elfenbein);font-size:var(--fs-xl);font-weight:700}
.fortschritt .muted{color:#cfdfd8}
.fortschritt .btn.primaer{background:var(--elfenbein);color:var(--accent)}
.fortschritt .btn.primaer:hover{background:#fffaf0}
.fortschritt .btn.ghost{color:var(--elfenbein);text-decoration:underline;text-decoration-color:#d2ad5c;text-underline-offset:6px}
.fortschritt .btn.ghost:hover{background:var(--accent-hover)}
.fortschritt .schritte{border-bottom-color:#2c5248}

/* ---------- Reiter und Statusleiste ---------- */
.erg-reiter{background:color-mix(in srgb,var(--grund) 94%,transparent)}
.erg-reiter button,.reiter-zeile button{border-radius:var(--r-m) var(--r-m) 0 0}
.erg-reiter button.on,.reiter-zeile button.on{color:var(--accent);border-bottom-color:var(--messing-linie)}
.sl-teil{border-radius:var(--r-m)}
.sl-wert:hover b{color:var(--accent)}

/* ---------- Laden: Platzhalter in den neuen Farben ---------- */
.sk-nav{background:var(--marine);border-right:0}
.sk-nav .sk{opacity:.25}
.sk-kopf{background:var(--grund)}

/* Unterpunkte der Leiste (Junge Finanzmittel, Verwaltungsvermögen): nur eingerückt, ohne Strich */
.nav button.unter{border-left:0}

/* Druck (Bericht als PDF): weißes Papier wie bisher */
@media print{body,.karte,.erg-reiter{background:var(--weiss)}}

/* ---------- Seitenleiste rechts: Beleg (Seitenleiste D) und „KI fragen“ (seit 2026-10-30) ----------
   Kopf in Tannengrün wie die Leiste; oben die Brotkrumen durch die geöffneten Belege (krumenHTML in app.js). Der Kopf des Belegs
   (.bl-kopf) schließt grün an. Darunter die Rechnung wie in einer Bilanz, jede Zeile öffnet ihren Beleg (rechnungHTML), bei Zahlen
   ohne Rechnung die Herleitung als Schritte auf einer Linie (herleitungHTML). */
.panel{background:var(--bg);border-left:0;box-shadow:-12px 0 32px rgba(16,48,42,.08)}
.panel-kopf{align-items:flex-start;gap:var(--s-2);padding:var(--s-4) var(--s-4) var(--s-1) var(--s-6);background:var(--accent);color:var(--elfenbein);border-bottom:0}
.panel-kopf .x{flex-shrink:0;color:#cfdfd8}
.panel-kopf .x:hover{background:var(--accent-hover);color:var(--weiss)}
.panel-kopf :focus-visible{outline-color:#d2ad5c}
.krumen{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s-1);padding-top:var(--s-2);font-size:var(--fs-xs);line-height:1.4}
.krume-art{width:100%;margin-bottom:2px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#d9b96c}
.krume{padding:2px var(--s-1);border-radius:3px;color:#cfdfd8;text-align:left;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:#4f7c6f;text-underline-offset:3px}
.krume:hover{background:var(--accent-hover);color:var(--weiss);text-decoration-color:#d2ad5c}
.krume.hier{color:#e3c47e;font-weight:600;text-decoration:none}
.krume-tr{color:#7fa597}
.panel-inhalt>.bl-kopf:first-child{margin:-32px -32px 0;padding:var(--s-2) var(--s-6) var(--s-6);background:var(--accent);color:var(--elfenbein)}
.bl-kopf .label{color:#cfdfd8}
.bl-kopf .beleg-wert{color:var(--elfenbein);font-weight:500;font-size:var(--fs-gross);line-height:1.1;overflow-wrap:anywhere}
.bl-kopf .beleg-wert.ann{color:#d9c9f7}
.bl-kopf h2{color:var(--elfenbein);font-weight:700}
.bl-kopf .muted{color:#cfdfd8}
.bl-kopf .chip{background:var(--accent-hover);color:#e4ece8}
.bl-kopf .chip.ok{color:#9fd6b4}
.bl-kopf .chip.warn{color:#f3c38f}
.bl-kopf .chip.bad{color:#f4a5a5}
.bl-kopf .chip.lila{color:#d9c9f7}
.bl-kopf .chip.accent,.bl-kopf .chip.bl-grund{color:#e3c47e}
.bl-kopf .bl-zahlen{background:transparent;padding:var(--s-4) 0 0;border-top:1px solid #2c5248;border-radius:0}
.bl-kopf .bl-zahlen .label{color:#a9c2b8}
.bl-kopf b.num,.bl-kopf .w{color:var(--elfenbein)}
.bl-kopf .w{border-bottom-color:#d2ad5c}
.bl-kopf .link,.bl-kopf a{color:#e3c47e}
.bl-kopf .person-kopf h2{color:var(--elfenbein)}
.bl-reiter{background:var(--bg)}
.bl-reiter button.on{border-bottom-color:var(--messing-linie);color:var(--accent)}
/* Rechnung: Zeilen mit Rechenzeichen, Betrag rechts, Pfeil; Summe mit doppeltem Messingstrich */
.rz-liste{display:flex;flex-direction:column;margin:0 -8px}
.rz,.rz-summe{display:grid;grid-template-columns:16px minmax(0,1fr) auto 12px;gap:var(--s-2);align-items:baseline;font-size:var(--fs-s)}
.rz{width:100%;padding:var(--s-2);border-radius:var(--r-m);text-align:left}
.rz:hover{background:var(--sand)}
.rz-op{color:var(--messing-text);font-weight:600}
.rz-text{min-width:0;overflow-wrap:anywhere}
.rz-wert{font-weight:600;white-space:nowrap}
.rz-wert.ann{color:var(--lila)}
.rz-pf{color:var(--messing-linie);font-weight:600}
.rz-summe{margin-top:var(--s-2);padding-top:var(--s-2);border-top:3px double var(--messing-linie);color:var(--accent);font-weight:600}
/* Herleitung: Schritte auf einer Linie, zuletzt „Fließt ein in“ als Münze */
.herleitung{position:relative;display:flex;flex-direction:column;gap:var(--s-4);margin:0;padding:0;list-style:none}
.herleitung::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:1px;background:var(--line-2)}
.herleitung li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s-4);align-items:start;font-size:var(--fs-s)}
.herleitung b{display:block;margin-top:3px}
.herleitung .small{color:var(--ink-2);overflow-wrap:anywhere}
.hl-nr{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted);font-size:var(--fs-xs);font-weight:700}
.hl-ziel .hl-nr{background:var(--messing);color:var(--marine);box-shadow:inset 0 0 0 2px var(--messing),inset 0 0 0 3px var(--messing-ring)}
.hl-zitat{padding:1px var(--s-1);border-radius:2px;background:#f3d98a;color:var(--ink);font-weight:600}
.panel-fuss{background:var(--bg);border-top-color:var(--line)}

/* „KI fragen“: Kopf mit Stern in der Münze und dem Modell; Vorschläge als Zeilen; Arbeitsweg als Schritte, der laufende pulsiert */
.panel-ki .panel-kopf{display:block;padding:var(--s-4) var(--s-4) var(--s-4) var(--s-6)}
.ki-kopf{display:flex;align-items:center;gap:var(--s-2)}
.ki-stern{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--messing);color:var(--marine);box-shadow:inset 0 0 0 2px var(--messing),inset 0 0 0 3px var(--messing-ring)}
.panel-ki .panel-titel{font-size:var(--fs-l);font-weight:600;color:var(--elfenbein)}
.ki-modell{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2);font-size:var(--fs-xs);color:#cfdfd8;overflow-wrap:anywhere}
.ki-punkt{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:#8fc6a6}
.ki-punkt.cloud{background:#e3c47e}
.ki-gruss{font-size:var(--fs-xl);font-weight:500;color:var(--accent)}
.vorschlaege{flex-direction:column;flex-wrap:nowrap;gap:var(--s-2)}
.vorschlaege button{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);width:100%;min-height:44px;padding:var(--s-2) var(--s-4);border:0;border-radius:var(--r-m);background:var(--fill);color:var(--ink);font-size:var(--fs-s)}
.vorschlaege button::after{content:"›";color:var(--messing-linie);font-weight:600}
.vorschlaege button:hover{background:var(--sand);color:var(--ink)}
.msg.du{background:var(--accent);color:var(--elfenbein);border-radius:var(--r-l) var(--r-l) 3px var(--r-l)}
.ref{border-radius:3px;background:var(--fill);color:var(--accent)}
.ref:hover{background:var(--sand)}
.ref.wertref{background:none;border-bottom:1px dotted var(--messing-linie);color:var(--accent);font-weight:600}
.ref.ann{color:var(--lila);border-bottom-color:var(--lila)}
.msg .gelesen summary::before{color:var(--messing-linie)}
.msg .gelesen summary:hover{color:var(--accent)}
.arbeitsweg{position:relative;gap:var(--s-2)}
.arbeitsweg::before{content:"";position:absolute;left:10px;top:10px;bottom:10px;width:1px;background:var(--line-2)}
.arbeitsweg li{position:relative;gap:var(--s-2);align-items:flex-start}
.arbeitsweg .sym{width:21px;height:21px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2);line-height:1}
.arbeitsweg .geprueft .sym,.arbeitsweg .pruefung .sym{background:var(--ok-soft);box-shadow:none}
.arbeitsweg.live li:last-child .sym{background:var(--messing);color:var(--marine);box-shadow:inset 0 0 0 2px var(--messing),inset 0 0 0 3px var(--messing-ring);animation:ki-puls 1.4s ease-in-out infinite}
@keyframes ki-puls{0%,100%{outline:0 solid rgba(201,162,74,.45)}50%{outline:6px solid rgba(201,162,74,0)}}
@media (prefers-reduced-motion:reduce){.arbeitsweg.live li:last-child .sym{animation:none}}
.denkt i{background:var(--messing-linie)}
.chat-eingabe{gap:var(--s-2);padding:var(--s-4) var(--s-6) var(--s-4);background:var(--bg)}
.chat-eingabe textarea{border:0;background:var(--weiss);box-shadow:inset 0 0 0 1px var(--line-2)}
.chat-eingabe textarea:focus{box-shadow:inset 0 0 0 2px var(--accent)}

/* ---------- Leiste je Bereich (leiste.js, seit 2026-11-01): zurück, Seiten des Bereichs, alle Gesellschaften ---------- */
.nav-inhalt{display:flex;flex-direction:column;gap:2px;min-width:0}
.nav button.nav-bereich-zurueck{min-height:36px;color:#a9c2b8;font-size:var(--fs-s)}
.nav button.nav-bereich-zurueck:hover{color:var(--weiss)}
.nav-bereich-titel{margin:var(--s-2) var(--s-2) var(--s-1);font-size:var(--fs-l);font-weight:600;color:var(--elfenbein)}
.nav .gs-titel{margin:var(--s-1) var(--s-2) var(--s-2);font-size:var(--fs-xs);text-transform:uppercase}
.gs-liste{position:relative;display:flex;flex-direction:column;gap:2px;margin-bottom:var(--s-4)}
.gs-marke{position:absolute;left:0;right:0;top:0;border-radius:var(--r-m);background:var(--elfenbein);opacity:0;pointer-events:none;transition:height .2s,opacity .2s}
.nav .gs-liste button.gs{position:relative;z-index:1;min-height:38px;padding:var(--s-2) var(--s-2) var(--s-2) var(--s-2);align-items:stretch;gap:var(--s-2);font-size:var(--fs-s);background:none;transition:color .2s}
.nav .gs-liste button.gs:hover{background:var(--marine-2)}
.nav .gs-liste button.gs.on{background:none;color:var(--accent);font-weight:600}
.nav .gs-liste button.gs.on:hover{background:none}
.nav .gs-liste button.gs .nt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;hyphens:none}
.nav .gs-liste button.gs.grau{color:#8aa39a}
.nav .zahl.gs-aus{font-size:var(--fs-xs);letter-spacing:.02em;color:#8aa39a;white-space:nowrap}
.nav button.gs.on .zahl.gs-aus{color:var(--muted)}
/* Leiste gleitet beim Wechsel des Bereichs herein: in einen Bereich von rechts, zurück von links. Das Logo bleibt stehen. */
@keyframes nav-rein{from{transform:translateX(32px);opacity:0}to{transform:none;opacity:1}}
@keyframes nav-raus{from{transform:translateX(-32px);opacity:0}to{transform:none;opacity:1}}
.nav-inhalt.nav-rein{animation:nav-rein .3s cubic-bezier(.2,.8,.2,1) both}
.nav-inhalt.nav-raus{animation:nav-raus .3s cubic-bezier(.2,.8,.2,1) both}
/* Seite: weich einblenden; neue Gesellschaft weiter unten in der Liste kommt von unten, weiter oben von oben; Seiten im Bereich seitlich */
@keyframes sw-blende{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sw-hoch{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes sw-runter{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
@keyframes sw-links{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes sw-rechts{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.seite-huelle.sw-blende{animation:sw-blende .26s ease-out both}
.seite-huelle.sw-hoch{animation:sw-hoch .32s cubic-bezier(.2,.8,.2,1) both}
.seite-huelle.sw-runter{animation:sw-runter .32s cubic-bezier(.2,.8,.2,1) both}
.seite-huelle.sw-links{animation:sw-links .3s cubic-bezier(.2,.8,.2,1) both}
.seite-huelle.sw-rechts{animation:sw-rechts .3s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.nav-inhalt[class*="nav-"],.seite-huelle[class*="sw-"]{animation:none}}
/* Unten auf der Seite: weiter zur nächsten Seite oder Gesellschaft */
.bereich-weiter{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-2);padding-top:var(--s-4);border-top:1px solid var(--line)}
.ab-firma-kopf{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.ab-firma-kopf b{font-size:var(--fs-l)}
/* Baum der Gesellschaften: Linien wie in einem Organigramm, je Ebene eine Spalte; Zeilenabstand (2px) wird überbrückt */
.nav .gs-liste button.gs .nt,.nav .gs-liste button.gs .zahl{align-self:center}
.nav .gs-liste button.gs.wurzel{font-weight:600}
.gs-wurzel{position:relative;display:flex;align-items:center;justify-content:center;margin:-8px 0 -8px -1px;width:14px;flex-shrink:0;font-size:var(--fs-xs);color:#a9c2b8}
.gs-wurzel.mit::after{content:'';position:absolute;left:6px;top:calc(50% + 8px);bottom:0;border-left:1.5px solid #6f978b}
.nav .gs.on .gs-wurzel.mit::after{border-color:var(--sand-2)}
.gs-wurzel.spitze{color:var(--messing)}
.gs-baum{display:flex;flex-shrink:0;margin:-8px 0 -8px -1px}
.gs-baum i{position:relative;width:14px;flex-shrink:0}
.gs-baum i.l::before,.gs-baum i.e::before{content:'';position:absolute;left:6px;top:-2px;bottom:0;border-left:1.5px solid #6f978b}
.gs-baum i.e.letzte::before{bottom:50%}
.gs-baum i.e::after{content:'';position:absolute;left:6px;top:50%;width:8px;border-top:1.5px solid #6f978b}
.nav .gs.on .gs-baum i::before,.nav .gs.on .gs-baum i::after{border-color:var(--sand-2)}
.nav button.bereich-seite{font-size:var(--fs-s)}   /* Seiten des Bereichs: einzeilig auch mit zweistelliger Zahl */
.sl-trenner{width:1px;height:22px;margin:0 var(--s-2);background:color-mix(in srgb,var(--messing) 45%,transparent)}   /* trennt Grunddaten vom Stand */
/* Topbar: Gesellschaft, Stichtag, Steuerwert je als Block, Wert groß, Bezeichnung klein darunter (seit 2026-11-01, Basti) */
.sl-zeile .sl-block{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-height:46px;padding:2px var(--s-4);border-radius:var(--r-m);line-height:1.2;text-align:left}
.sl-block > b{font-size:var(--fs-m);font-weight:600;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.sl-zeile .sl-block.sl-wert > b{font-size:var(--fs-l)}
.sl-unter{font-size:var(--fs-xs);color:var(--messing-text);letter-spacing:.02em}
.sl-unter .lila-text{color:var(--lila)}

/* ---------- Original-Ansicht (seit 2026-11-01): Elfenbein als Grund, Blätter weiß mit weichem Schatten, Seitenleiste wie Reiter ---------- */
.original{background:var(--grund)}
.original-kopf{background:var(--marine);border-bottom:0;color:var(--elfenbein)}   /* Name abgehoben (seit 2026-11-06, Basti) */
.original-kopf .og-zu{color:#dbe7e2}
.original-kopf .og-zu:hover{background:var(--marine-2);color:var(--weiss)}
.original-kopf .og-seite-text{color:#a9c2b8}
.original-kopf .btn.ghost{color:var(--elfenbein);box-shadow:inset 0 0 0 1px #2c4d44;background:transparent}
.original-kopf .btn.ghost:hover{background:var(--marine-2)}
.original .seitenleiste{background:var(--grund)}
.original .seitenleiste button{color:var(--ink-2)}
.original .seitenleiste button:hover{background:var(--sand)}
.original .seitenleiste button.on{background:var(--accent);color:var(--elfenbein)}
.original-daten{background:var(--bg)}
.original-daten .od-gruppe .label{color:var(--messing-text)}
.og-snr{letter-spacing:.08em;text-transform:uppercase;font-size:var(--fs-xs)}
.og-seite .blatt{box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(16,48,42,.07)}
.og-zoom-fl{box-shadow:0 0 0 1px var(--line-2),0 8px 22px rgba(16,48,42,.14)}
.og-zoom-fl:hover .og-zoom-ic{color:var(--messing-text)}