/* ══════════════════════════════════════════════════════════════════════════
SC BUSINESS HUB — DESIGN-TOKENS
══════════════════════════════════════════════════════════════════════════
DIES IST DIE EINE DATEI. Farben, Abstände, Radien und Schriftgrößen werden
AUSSCHLIESSLICH hier definiert. Wer im Hub eine Farbe braucht, nimmt eine
Variable von hier — niemals einen neuen Hex-Wert.
Warum: Der Hub hatte 568 verschiedene Hex-Farben (u. a. 22 Schreibweisen
derselben Linienfarbe und 25 Warntöne). Jedes Feature hat sich seine eigenen
Werte ausgedacht, deshalb sah nichts nach demselben Produkt aus.
Herkunft der Werte: SC-Stylebook.md (neue Website) — der Hub ist die helle
Schwester derselben Marke.
══════════════════════════════════════════════════════════════════════════ */
:root{
/* ── Marke ────────────────────────────────────────────────────────────── */
--sc-ink:#14171A; /* Haupttext, dunkle Flächen */
--sc-ink-2:#1C2024; /* dunkle Fläche 2 */
--sc-lime:#CAD759; /* CI-Akzent: Flächen, aktive Zustände */
--sc-lime-2:#D9E85C; /* Hover */
--sc-lime-deep:#9FB024; /* Akzent AUF Weiß (Text/Icons) — nie --sc-lime für Text! */
--sc-olive:#808338;
/* ── Flächen ──────────────────────────────────────────────────────────────
ZWEI WELTEN (Dennis 15.08.2026):
Hub = dunkel → Arbeitswerkzeug, man erkennt sofort „ich bin im Hub"
Portal = hell → wie die Website, das sieht der Kunde
Beide teilen Marke, Raster und Bausteine — nur die Flächen kippen.
Der Hub setzt (siehe unten). */
--sc-paper:#FFFFFF; /* Karten, Modals */
--sc-bg:#F4F6F3; /* App-Hintergrund */
--sc-sunk:#FAFBF8; /* eingelassene Flächen, Eingabefelder */
--sc-mist:#E9ECE6; /* neutrale Füllung (Pills, Platzhalter) */
/* ── Text: 3 Stufen, mehr braucht niemand ─────────────────────────────── */
--sc-text:#14171A; /* Haupttext */
--sc-muted:#5B636A; /* Sekundärtext, Labels */
/* --sc-faint war #8A9199 und erreichte nur 2,9:1 auf Weiss — zu blass fuer
Zaehler, Tabellenkoepfe und Reiter, die alle darauf zeigten. Jetzt 4,6:1. */
--sc-faint:#6B737B; /* Hinweise, Leerzustände, deaktiviert */
--sc-on-dark:#FFFFFF;
--sc-on-dark-muted:rgba(255,255,255,.64);
/* ── Linien: EINE Farbe in zwei Stärken ───────────────────────────────── */
--sc-line:rgba(20,23,26,.10);
--sc-line-strong:rgba(20,23,26,.16);
--sc-line-dark:rgba(255,255,255,.13);
/* ── Status: je Rolle genau ein Textton + eine Fläche ─────────────────── */
--sc-ok:#2E7D32; --sc-ok-bg:#EDF5E9; --sc-ok-line:#CFE3C6;
--sc-warn:#B06F00; --sc-warn-bg:#FDF3E2; --sc-warn-line:#EFDDBC;
--sc-bad:#B3261D; --sc-bad-bg:#FBECEA; --sc-bad-line:#EFCFCB;
--sc-info:#3F6C8C; --sc-info-bg:#EAF1F6; --sc-info-line:#CFDDE7;
/* ── Semantische Rollen (Migration der Altfarben) ─────────────────────────
Diese Werte sind BEWUSST noch die bisherigen Hub-Farben. Dadurch aendert die
Migration nichts am Aussehen. Die Umstellung auf die Marke passiert danach
hier — an genau einer Stelle. */
--sc-primary:#6E7A1E; /* Aktion/Link — CI-Oliv, kontraststark auf Weiss */
--sc-primary-hover:#5F6229;
--sc-primary-bg:#F4F7E4; /* helle Aktionsflaeche (btn-icon, Hinweise) */
--sc-primary-line:#DDE4B8;
--sc-success:#2E7D32; --sc-success-bg:#EDF5E9;
--sc-attention:#B06F00; --sc-attention-bg:#FDF3E2;
--sc-danger:#B3261D; --sc-danger-bg:#FBECEA;
--sc-danger-2:#B3261D; /* zweiter Rotton faellt mit dem ersten zusammen */
--sc-head:#14171A; /* Kopfleiste + Ueberschriften — CI-Anthrazit */
--sc-app-bg:#F4F6F3; /* App-Hintergrund mit leichtem Gruenstich */
/* ── Abstände: 4px-Raster. Keine krummen Werte mehr. ──────────────────── */
--sc-1:4px; --sc-2:8px; --sc-3:12px; --sc-4:16px;
--sc-5:20px; --sc-6:24px; --sc-8:32px; --sc-10:40px;
/* ── Radien: 4 Stufen ─────────────────────────────────────────────────── */
--sc-r-sm:8px; --sc-r-md:12px; --sc-r-lg:16px; --sc-r-xl:20px; --sc-r-pill:100px;
/* ── Schatten: 3 Stufen ───────────────────────────────────────────────── */
--sc-sh-1:0 1px 2px rgba(20,23,26,.05);
--sc-sh-2:0 8px 24px -12px rgba(20,23,26,.18);
--sc-sh-3:0 24px 60px -24px rgba(20,23,26,.30);
--sc-backdrop:rgba(20,23,26,.55);
/* ── Typografie ───────────────────────────────────────────────────────── */
--sc-font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--sc-font-mono:ui-monospace,Menlo,Consolas,monospace;
/* 8 Stufen statt 30 */
--sc-t-xs:.72rem; --sc-t-sm:.78rem; --sc-t-base:.85rem; --sc-t-md:.92rem;
--sc-t-lg:1.05rem; --sc-t-xl:1.25rem; --sc-t-2xl:1.5rem; --sc-t-3xl:1.9rem;
--sc-ease:cubic-bezier(.19,1,.22,1);
--sc-t-fast:.14s; --sc-t-norm:.22s;
/* ══ ÜBERGANG: Alt-Werte zeigen auf die neuen Tokens ═══════════════════
Damit greifen die Tokens sofort überall, wo bereits Variablen benutzt
werden — ohne dass 7.137 Inline-Styles angefasst werden müssen. Der
Portal-Bereich nutzt dieses Muster schon erfolgreich. */
--accent:var(--sc-lime-deep);
--accent-soft:var(--sc-lime);
--border:var(--sc-line);
--text-1:var(--sc-text);
--text-2:var(--sc-muted);
--text-3:var(--sc-faint);
}
/* ══════════════════════════════════════════════════════════════════════════
KOMPONENTEN — jede genau einmal. Neue UI baut NUR hierauf auf.
Präfix sc- wie im bestehenden sc-form/sc-field (der Standard, der schon gilt).
══════════════════════════════════════════════════════════════════════════ */
/* ── Karte: ersetzt .table-card, .chart-card und ~461 Inline-Panels ─────── */
.sc-card{background:var(--sc-paper);border:1px solid var(--sc-line);border-radius:var(--sc-r-lg);
padding:var(--sc-5);box-shadow:var(--sc-sh-1)}
.sc-card--flat{box-shadow:none}
.sc-card--sunk{background:var(--sc-sunk)}
.sc-card__head{display:flex;align-items:center;gap:var(--sc-3);margin-bottom:var(--sc-4)}
.sc-card__head .sc-more{margin-left:auto;font-size:var(--sc-t-sm);color:var(--sc-muted);text-decoration:none}
.sc-card__head .sc-more:hover{color:var(--sc-lime-deep)}
/* ── Abschnittsmarke (Mono-Kicker aus dem Stylebook) ────────────────────── */
/* Der Kicker traegt --sc-primary, NICHT --sc-lime-deep: Lindgruen auf Weiss
erreicht nur 2,4:1 und ist als Text kaum lesbar (gemessen 15.08.2026).
Der Strich davor darf hell bleiben — er traegt keine Information. */
.sc-kick{font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:.07em;
color:var(--sc-primary);text-transform:uppercase;font-weight:600;
display:inline-flex;align-items:center;gap:var(--sc-2)}
.sc-kick::before{content:"";width:16px;height:1px;background:var(--sc-lime-deep)}
/* ── Statusmarke: ersetzt .status-badge, .prio-badge und ~201 Inline-Pills ─ */
.sc-pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--sc-font-mono);
font-size:var(--sc-t-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;
padding:3px 9px;border-radius:var(--sc-r-pill);background:var(--sc-mist);color:var(--sc-muted);
white-space:nowrap}
.sc-pill--ok{background:var(--sc-ok-bg);color:var(--sc-ok)}
.sc-pill--warn{background:var(--sc-warn-bg);color:var(--sc-warn)}
.sc-pill--bad{background:var(--sc-bad-bg);color:var(--sc-bad)}
.sc-pill--info{background:var(--sc-info-bg);color:var(--sc-info)}
.sc-pill--lime{background:var(--sc-lime);color:var(--sc-ink)}
/* ── Hinweisleiste: ersetzt die uneinheitlichen Warn-/Fehlerkästen ─────── */
/* flex-wrap: Die Aktionen sassen starr neben dem Text und liefen auf schmaler
Breite aus dem Bild — beim Angebots-Sperrbanner war „Als neue Version
duplizieren" halb abgeschnitten und damit nicht mehr tippbar. Jetzt rutschen
sie unter den Text, sobald es eng wird. min-width:0 am Text, weil ein
Flex-Kind sonst nicht unter seine Wortbreite schrumpft. */
.sc-note{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sc-3);padding:11px var(--sc-4);
border-radius:var(--sc-r-md);font-size:var(--sc-t-base);margin-bottom:var(--sc-4);
background:var(--sc-info-bg);color:var(--sc-info);border:1px solid var(--sc-info-line)}
.sc-note--ok{background:var(--sc-ok-bg);color:var(--sc-ok);border-color:var(--sc-ok-line)}
.sc-note--warn{background:var(--sc-warn-bg);color:var(--sc-warn);border-color:var(--sc-warn-line)}
.sc-note--bad{background:var(--sc-bad-bg);color:var(--sc-bad);border-color:var(--sc-bad-line)}
.sc-note__txt{flex:1 1 220px;min-width:0}
.sc-note__act{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--sc-2)}
/* ── Leerzustand: ersetzt 103 Inline-Varianten in 5 Textmustern ─────────── */
.sc-empty{text-align:center;color:var(--sc-faint);font-size:var(--sc-t-base);
padding:var(--sc-6) var(--sc-4);line-height:1.5}
.sc-empty__title{color:var(--sc-muted);font-weight:500;margin-bottom:2px}
.sc-empty--box{border:1px dashed var(--sc-line-strong);border-radius:var(--sc-r-md);background:var(--sc-sunk)}
/* ── Tab-Leiste: ersetzt 11 Klassennamen + 29 Inline-Umsetzungen ────────── */
.sc-tabs{display:flex;gap:2px;border-bottom:1px solid var(--sc-line);
overflow-x:auto;margin-bottom:var(--sc-5)}
.sc-tab{padding:10px var(--sc-4);font-size:var(--sc-t-base);color:var(--sc-muted);
white-space:nowrap;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
background:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
transition:color var(--sc-t-fast)}
.sc-tab:hover{color:var(--sc-text)}
.sc-tab.is-active{color:var(--sc-text);font-weight:600;border-bottom-color:var(--sc-lime)}
.sc-tab__n{font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);color:var(--sc-faint);
background:var(--sc-mist);padding:1px 6px;border-radius:var(--sc-r-pill)}
.sc-tab.is-active .sc-tab__n{background:var(--sc-lime);color:var(--sc-ink)}
/* ── Kennzahl ──────────────────────────────────────────────────────────────
Flach gesetzt (17.08.2026). Dennis: „Die schwarzen Infofelder auf fast jeder
Seite finde ich auf Mobil auch zu gross zu wuchtig, die nehmen zu viel Platz
ein bevor man ueberhaupt den wirklichen Inhalt sieht. Auch am Desktop kann
das gerne schmaler." Das Band ist ein Kennzahlen-STREIFEN, kein Block:
Innenabstand 12 statt 16, Zahl eine Stufe kleiner (t-xl statt t-2xl),
Erklaerzeile t-xs. Gemessen 1500 px: 138 px → 104 px Bandhoehe. */
.sc-kpi{background:var(--sc-paper);border:1px solid var(--sc-line);border-radius:var(--sc-r-md);
padding:var(--sc-3) var(--sc-3) var(--sc-3) var(--sc-4);position:relative;overflow:hidden;
box-shadow:var(--sc-sh-1)}
.sc-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sc-lime)}
.sc-kpi--warn::before{background:var(--sc-warn)}
.sc-kpi--bad::before{background:var(--sc-bad)}
.sc-kpi__lab{font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);text-transform:uppercase;
letter-spacing:.07em;color:var(--sc-faint)}
.sc-kpi__val{font-size:var(--sc-t-xl);font-weight:700;letter-spacing:-.02em;margin-top:2px}
.sc-kpi__sub{font-size:var(--sc-t-xs);color:var(--sc-muted);margin-top:1px;line-height:1.35}
/* ── Zeilenliste: ersetzt unzählige Inline-Listen ──────────────────────── */
.sc-list{display:flex;flex-direction:column}
.sc-li{display:flex;align-items:center;gap:var(--sc-3);padding:10px 0;
border-bottom:1px solid var(--sc-line)}
.sc-li:last-child{border-bottom:0}
.sc-li__main{min-width:0;flex:1}
.sc-li__title{font-weight:500}
.sc-li__sub{font-size:var(--sc-t-sm);color:var(--sc-muted)}
/* ── Dropzone: ersetzt 4 verschiedene Designs allein im Belege-Bereich ──── */
.sc-drop{border:2px dashed var(--sc-line-strong);border-radius:var(--sc-r-md);
background:var(--sc-sunk);color:var(--sc-muted);padding:var(--sc-5);text-align:center;
font-size:var(--sc-t-base);cursor:pointer;transition:border-color var(--sc-t-fast),background var(--sc-t-fast)}
.sc-drop:hover{border-color:var(--sc-lime-deep);background:#F7F9EC}
.sc-drop.is-over{border-color:var(--sc-lime-deep);background:#EEF4D8;color:var(--sc-ink)}
/* ── Tabellen: verhindert, dass lange Werte das Layout sprengen ─────────── */
.sc-table{width:100%;border-collapse:collapse;font-size:var(--sc-t-base)}
.sc-table th{text-align:left;font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);
text-transform:uppercase;letter-spacing:.06em;color:var(--sc-faint);font-weight:600;
padding:var(--sc-2) var(--sc-3);border-bottom:1px solid var(--sc-line)}
.sc-table td{padding:10px var(--sc-3);border-bottom:1px solid var(--sc-line);vertical-align:top}
.sc-table td.num,.sc-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.sc-table tr:last-child td{border-bottom:0}
.sc-table .clip{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Zahlen immer mit gleicher Ziffernbreite — verhindert Springen in Listen */
.sc-num{font-variant-numeric:tabular-nums}
/* ── Kundendetail: Kennzahlen + Karten-Raster ───────────────────────────── */
.kd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sc-2);margin-bottom:var(--sc-4)}
.kd-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sc-4);align-items:start}
.kd-c4{grid-column:span 4} .kd-c6{grid-column:span 6} .kd-c12{grid-column:span 12}
@media(max-width:1200px){ .kd-kpis{grid-template-columns:repeat(2,1fr)}
.kd-c4,.kd-c6{grid-column:span 12} }
/* Zeilen in den Karten */
.kd-row{display:flex;align-items:center;gap:var(--sc-3);padding:9px 0;border-bottom:1px solid var(--sc-line)}
.kd-row:last-child{border-bottom:0}
.kd-row__main{min-width:0;flex:1}
.kd-row__t{font-weight:500;font-size:var(--sc-t-base)}
.kd-row__s{font-size:var(--sc-t-sm);color:var(--sc-muted);margin-top:1px}
/* ══════════════════════════════════════════════════════════════════════════
DUNKLE BEREICHE · .sc-dark auf einem Container (NICHT auf )
══════════════════════════════════════════════════════════════════════════
Dennis 15.08.: Der Hub soll NICHT komplett dunkel sein — er bekommt mehr
dunkle Bereiche als das Portal, bleibt aber grundsaetzlich hell. Genau wie
die Website: heller Grund, darauf dunkle Karten und Abschnitte.
Einsatz im Hub: Kopfleiste, Seitenmenue, Kennzahlen-Baender, Hervorhebungen,
Investitions-/Ergebnisblöcke. Das Portal bleibt durchgaengig hell.
Anwendung: …
— alles darin kippt automatisch,
weil nur die Token neu belegt werden. */
.sc-dark{
--sc-paper:#1C2024;
--sc-bg:#14171A;
--sc-sunk:#22272C;
--sc-mist:#2A3036;
--sc-text:#F2F4F1;
--sc-muted:#A6AEB4;
--sc-faint:#79828A;
--sc-line:rgba(255,255,255,.10);
--sc-line-strong:rgba(255,255,255,.17);
/* Auf Dunkel traegt das helle Lindgruen — nicht das dunkle Oliv */
--sc-primary:#CAD759; --sc-primary-hover:#D9E85C;
--sc-primary-bg:rgba(202,215,89,.12);
--sc-primary-line:rgba(202,215,89,.30);
--sc-lime-deep:#CAD759;
--sc-ok:#8BC98F; --sc-ok-bg:rgba(139,201,143,.13);
--sc-warn:#E6B45C; --sc-warn-bg:rgba(230,180,92,.13);
--sc-bad:#EF8A80; --sc-bad-bg:rgba(239,138,128,.13);
--sc-info:#8FB6CE; --sc-info-bg:rgba(143,182,206,.13);
--sc-success:#8BC98F; --sc-success-bg:rgba(139,201,143,.13);
--sc-attention:#E6B45C; --sc-attention-bg:rgba(230,180,92,.13);
--sc-danger:#EF8A80; --sc-danger-bg:rgba(239,138,128,.13);
--sc-danger-2:#EF8A80;
--sc-sh-1:0 1px 2px rgba(0,0,0,.35);
--sc-sh-2:0 8px 24px -12px rgba(0,0,0,.6);
/* Der Container selbst bekommt die dunkle Flaeche */
background:var(--sc-bg);
color:var(--sc-text);
}
.sc-dark input,.sc-dark select,.sc-dark textarea{
background:var(--sc-sunk);color:var(--sc-text);border-color:var(--sc-line-strong)}
.sc-dark input::placeholder,.sc-dark textarea::placeholder{color:var(--sc-faint)}
.sc-dark table th{color:var(--sc-faint)}
.sc-dark tr:hover{background:rgba(255,255,255,.03)}
/* Einzelne dunkle Karte auf hellem Grund (Website-Muster) */
/* ACHTUNG: .sc-card--dark faerbt nur Flaeche + Text, es belegt die Token NICHT neu.
Alles darin (.sc-txt/.sc-kpi/.sc-pill/.sc-note) bliebe auf hellen Werten und
waere unlesbar. Fuer dunkle Karten deshalb class="sc-card sc-dark" verwenden. */
.sc-card--dark{background:var(--sc-ink);color:var(--sc-on-dark);border-color:transparent}
.sc-card--dark .sc-kick{color:var(--sc-lime)}
.sc-card--dark .sc-kick::before{background:var(--sc-lime)}
/* Knoepfe in dunklen Bereichen: dort kippt --sc-primary auf das helle Lindgruen,
weisser Text darauf ist unlesbar. */
.sc-dark .btn-primary{color:var(--sc-ink)}
.sc-dark .btn-success{color:var(--sc-ink)}
.sc-dark .btn-outline{background:transparent;border-color:var(--sc-line-strong);color:var(--sc-text)}
/* ══════════════════════════════════════════════════════════════════════════
ERGAENZUNGEN AUS DEM DASHBOARD-UMBAU (15.08.2026)
Bausteine, die beim Umbau von Dashboard + Insights gefehlt haben. Alles
ausschliesslich ueber Token — kein einziger Hex-Wert.
══════════════════════════════════════════════════════════════════════════ */
/* ── Band: voll breiter Bereichskopf (Kennzahlen). Dunkel wird NICHT hier
gesetzt, sondern ueber .sc-dark am selben Element. ─────────────────── */
/* Polsterung 16/20 statt 20/24 und Abstand nach unten 20 statt 24 — siehe
Begruendung bei .sc-kpi. Das Band traegt auch Nicht-Kennzahlen (Kopfzeilen,
Ergebnisbloecke); dort wirkt dieselbe Verschlankung. */
.sc-band{border-radius:var(--sc-r-lg);padding:var(--sc-4) var(--sc-5);margin-bottom:var(--sc-5)}
.sc-band .kd-kpis{margin-bottom:0}
/* ── Platzhalter fuer JS-gefuellte Bereiche INNERHALB eines Rasters.
Ohne das braucht jede Render-Funktion ihr eigenes Teilraster. ──────── */
.sc-slot{display:contents}
/* ── Element ueber alle Spalten eines Rasters ───────────────────────────── */
.sc-full{grid-column:1/-1}
/* ── Vierte Spaltenbreite (12/4) neben c4/c6/c12 ────────────────────────── */
.kd-c3{grid-column:span 3}
@media(max-width:1200px){ .kd-c3{grid-column:span 6} }
@media(max-width:760px){ .kd-c3{grid-column:span 12} }
/* Auf dem Handy stehen die Kennzahlen ZU ZWEIT nebeneinander. Untereinander
ergaben vier Kennzahlen 468 px Band — vier Bildschirmhoehen Vorlauf, bevor
der erste Eintrag kam (gemessen 390 px, 17.08.2026). Die Feinheiten dazu
(kleinere Zahl, Erklaerzeile weg) stehen gebuendelt im Abschnitt
„HANDY-VERDICHTUNG" am Dateiende. */
@media(max-width:560px){ .kd-kpis{grid-template-columns:repeat(2,1fr)} }
/* ── Fliesstext in Karten: ersetzt Inline-Styles und .chart-subtitle ────── */
.sc-txt{font-size:var(--sc-t-base);color:var(--sc-muted);line-height:1.55;margin:0 0 var(--sc-3)}
.sc-txt:last-child{margin-bottom:0}
.sc-txt--pre{white-space:pre-line}
/* ── Verweis im Fliesstext (der Hub hat keine a{}-Regel) ────────────────── */
.sc-link{color:var(--sc-primary);text-decoration:none;font-weight:500}
.sc-link:hover{text-decoration:underline}
/* ── Segment-Umschalter INNERHALB einer Kopfzeile ───────────────────────── */
.sc-tabs--bare{border-bottom:0;margin:0;overflow:visible;flex:0 0 auto}
.sc-tabs:empty{display:none}
/* ── Kopfzeilen duerfen umbrechen statt zu quetschen ──────────────────────
Ohne das laufen Statusmarken in schmalen Karten (kd-c3) ueber den Rand
und der Umschalter in der Kopfzeile wird auf dem Handy abgeschnitten.
Greift nur, wenn es sonst zu eng waere. */
.sc-card__head{flex-wrap:wrap}
/* ── Abschnittstrenner: derselbe Kopf, aber mit Linie darueber ──────────── */
.sc-card__head--sep{margin-top:var(--sc-8);padding-top:var(--sc-5);border-top:1px solid var(--sc-line)}
/* ── Senkrechter Rhythmus fuer gestapelte Bloecke (Dialog-Inhalt) ───────── */
.sc-stack>*+*{margin-top:var(--sc-4)}
/* ── Waagerechter Rollbereich fuer breite Tabellen ──────────────────────── */
.sc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ── Reihe von Statusmarken, die umbrechen darf ─────────────────────────── */
.sc-pills{display:flex;flex-wrap:wrap;gap:var(--sc-2);margin-top:var(--sc-1)}
/* ── Schmales Formularfeld in einer Zeile (Jahr, Menge, Prozent) ────────── */
.sc-field--kompakt{flex:0 0 104px}
.sc-field--kompakt input{width:100%}
/* ── Dropzone-Symbol: die globale Regel svg.lucide{width:1em} macht es 13px ─ */
.sc-drop svg.lucide{width:28px;height:28px;margin-bottom:var(--sc-2);opacity:.75}
/* ── Tabellen erben sonst ein Inline-color des Elternteils (z. B. das
blasse #belege-ist-body) und werden komplett unlesbar. ─────────────── */
.sc-table{color:var(--sc-text)}
/* ── Werkzeugleiste ──────────────────────────────────────────────────────
Titel/Suche links, Aktionen rechts. Ersetzt ~40 gleiche Inline-Flex-Koepfe
ueber die Bereiche hinweg.
Sie steht HIER, weil drei Bereichsentwuerfe sie unabhaengig voneinander
erfunden haben — mit drei verschiedenen Definitionen und zwei Namen fuer
dasselbe (__act vs. __actions). Wer zuletzt eingebaut haette, haette die
anderen still verschoben. Ein Baustein, eine Definition, ein Name.
Abgrenzung zu .sc-card__head: der Kartenkopf beschriftet EINE Karte
(Kicker + Verweis). Die Werkzeugleiste bedient eine ganze Liste
(Suche, Filter, Aktionen) und steht ausserhalb der Karte. ───────────── */
.sc-toolbar{display:flex;align-items:flex-end;justify-content:space-between;
gap:var(--sc-3);flex-wrap:wrap;margin-bottom:var(--sc-4)}
.sc-toolbar__head{min-width:0}
.sc-toolbar__actions{display:flex;gap:var(--sc-2);flex-wrap:wrap;
align-items:center;margin-left:auto}
.sc-toolbar__filters{display:flex;gap:var(--sc-2);flex-wrap:wrap;
align-items:center;flex:1;min-width:0}
.sc-toolbar--filters{align-items:center;padding:var(--sc-3) 0;
border-top:1px solid var(--sc-line);border-bottom:1px solid var(--sc-line)}
/* Loeschen/Zuruecksetzen sichtbar abgesetzt — nicht neben "Speichern" */
.sc-toolbar__actions--gefahr{gap:var(--sc-2);padding-left:var(--sc-4);
border-left:1px solid var(--sc-line)}
.sc-actions{display:flex;gap:var(--sc-2);flex-wrap:wrap;align-items:center}
@media (max-width:640px){
.sc-toolbar{align-items:stretch}
.sc-toolbar__actions{margin-left:0}
.sc-toolbar__actions--gefahr{border-left:0;padding-left:0;width:100%;
border-top:1px solid var(--sc-line);padding-top:var(--sc-2)}
}
/* ══════════════════════════════════════════════════════════════════════════
EINSTELLUNGEN — Ergänzung zum Bereichsumbau
══════════════════════════════════════════════════════════════════════════ */
/* Der Hub setzt global th{background:…;text-align:right} und td{text-align:right}
(index.html Z. 219–227). .sc-table erklärt für td kein text-align und für th
keinen Hintergrund — ohne diese zwei Zeilen wäre JEDE sc-Tabelle rechtsbündig
mit grau hinterlegtem Kopf. Betrifft alle fünf neuen Tabellen. */
.sc-table th{background:transparent}
.sc-table td{text-align:left}
/* Kartenfußzeile: Speichern rechts, Statusmeldung links. Bisher hat jeder
Einstellungsblock dafür ein eigenes Inline-Flex gebaut (12 Fundstellen). */
.sc-card__foot{display:flex;align-items:center;gap:var(--sc-3);flex-wrap:wrap;
justify-content:flex-end;margin-top:var(--sc-5);padding-top:var(--sc-4);
border-top:1px solid var(--sc-line)}
.sc-card__foot>.sc-msg{margin-right:auto}
/* Statusmeldung neben einem Knopf ("Gespeichert.", "Fehler …"). Die Farbe setzt
das Skript aus den Statusrollen; hier nur Größe und Grundton. */
.sc-msg{font-size:var(--sc-t-sm);color:var(--sc-muted)}
/* Auslastungsbalken (KBM-Request-Budget). Es gibt im Hub keinen Fortschritts-
balken; bisher inline mit drei Hex-Ampelfarben gelöst. Wert kommt als
--sc-bar:NN%. */
.sc-bar{height:8px;border-radius:var(--sc-r-pill);background:var(--sc-mist);
overflow:hidden;margin:var(--sc-3) 0}
.sc-bar__fill{height:100%;width:var(--sc-bar,0%);background:var(--sc-ok)}
.sc-bar--warn .sc-bar__fill{background:var(--sc-warn)}
.sc-bar--bad .sc-bar__fill{background:var(--sc-bad)}
/* .sc-check deckte nur Checkboxen ab — die PayPal-Modus-Wahl sind Radios. */
.sc-check input[type=radio]{width:16px;height:16px;margin:0;flex:0 0 auto}
/* Ein Knopf, der in einem .sc-field steht (Domain-Prüfung), soll nicht auf
Feldbreite gedehnt werden. */
.sc-field>.btn{align-self:flex-start}
/* ── Rahmen des Bereichs ────────────────────────────────────────────────── */
.set-layout{display:grid;grid-template-columns:232px minmax(0,1fr);
gap:var(--sc-6);align-items:start}
.set-main{min-width:0}
.set-nav{padding:var(--sc-3) 0;position:sticky;top:var(--sc-4)}
.set-nav__group{padding:var(--sc-4) var(--sc-4) var(--sc-2)}
.set-nav__group:first-child{padding-top:var(--sc-1)}
/* Navigationseintrag — ersetzt die Inline-Fassung aus index.html Z. 279–295,
damit es die Navigation nicht an zwei Stellen gibt. */
.einstell-nav-btn{display:flex;align-items:center;gap:var(--sc-2);width:100%;
text-align:left;padding:9px var(--sc-4);border:0;border-left:3px solid transparent;
background:none;font-family:var(--sc-font);font-size:var(--sc-t-base);
color:var(--sc-muted);cursor:pointer;
transition:background var(--sc-t-fast),color var(--sc-t-fast)}
.einstell-nav-btn:hover{background:var(--sc-sunk);color:var(--sc-text)}
.einstell-nav-btn.active{background:var(--sc-primary-bg);color:var(--sc-primary);
font-weight:600;border-left-color:var(--sc-lime)}
.einstell-nav-btn .esb-icon{display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;border-radius:var(--sc-r-sm);flex-shrink:0;font-style:normal;
background:var(--sc-mist);color:var(--sc-muted)}
.einstell-nav-btn.active .esb-icon{background:var(--sc-lime);color:var(--sc-ink)}
/* Suchfeld und Auswahl in Kopfzeilen — im dunklen Band und in hellen Karten
dasselbe Feld, weil .sc-dark nur die Token umbelegt. */
.set-suche{width:260px;max-width:100%;padding:7px var(--sc-3);
border:1px solid var(--sc-line-strong);border-radius:var(--sc-r-sm);
background:var(--sc-sunk);color:var(--sc-text);
font-family:var(--sc-font);font-size:var(--sc-t-base)}
.set-suche::placeholder{color:var(--sc-faint)}
.set-select{padding:7px var(--sc-3);border:1px solid var(--sc-line-strong);
border-radius:var(--sc-r-sm);background:var(--sc-paper);color:var(--sc-text);
font-family:var(--sc-font);font-size:var(--sc-t-base)}
/* Technische Werte (Keys, Tokens, IDs, JSON) — eine Schrift statt sechs
Inline-Deklarationen von font-family:monospace. */
.set-mono{font-family:var(--sc-font-mono)}
/* Ausgabefeld für Test- und Explorer-Antworten (KBM, IMAP, PayPal-Webhook). */
.set-out{background:var(--sc-sunk);border:1px solid var(--sc-line);
border-radius:var(--sc-r-sm);padding:var(--sc-3) var(--sc-4);margin-top:var(--sc-3);
font-family:var(--sc-font-mono);font-size:var(--sc-t-sm);
white-space:pre-wrap;word-break:break-word;overflow-x:auto}
.set-out--code{max-height:420px;overflow:auto}
/* Doku-Spalte (Hilfe): volle Rasterbreite, aber begrenzte Zeilenlänge. */
.set-doc{grid-column:1/-1;min-width:0;max-width:900px}
/* Textlisten (Roadmap, Entwicklungsverlauf) — die Einträge bringen ihre
Zeilentrenner selbst mit, hier nur die Aufzählungszeichen weg. */
.set-liste{list-style:none;padding:0;margin:0}
/* Ein Kennzahlenwert kann Text sein (E-Mail-Adresse); 1,5 rem fett sprengt
dort die Kachel. */
.set-kpi-text{font-size:var(--sc-t-lg);word-break:break-word}
.set-kpi-von{font-size:var(--sc-t-md);font-weight:400;color:var(--sc-faint)}
/* Gruppen-Rechte: Zwischenüberschrift und eingerückte Schreibrecht-Zeile. */
.gp-gruppe td{background:var(--sc-sunk);padding-top:var(--sc-4)}
.gp-unter td{background:var(--sc-sunk);font-size:var(--sc-t-sm);color:var(--sc-muted)}
.gp-unter td:first-child{padding-left:var(--sc-8)}
#gp-table input[type=checkbox]{width:18px;height:18px;cursor:pointer;
accent-color:var(--sc-lime-deep)}
#gp-table input[type=checkbox]:disabled{opacity:.35}
/* Zeilen mit Eingabefeldern (Abo-Kategorien, Übergabe-Fragen, Aufwandssätze,
Staffelung). Sie stehen nicht in einem .sc-field und erbten deshalb bisher
kein Feld-Aussehen — genau deshalb trug jede ihren eigenen Inline-Style. */
#tab-einstellungen .sc-li input[type=text],
#tab-einstellungen .sc-li input[type=email],
#tab-einstellungen .sc-li input[type=number],
#tab-einstellungen .ak-fn-row input,
#tab-einstellungen .ak-fn-row select,
#tab-einstellungen .staffel-input{
padding:7px 10px;border:1px solid var(--sc-line-strong);border-radius:var(--sc-r-sm);
background:var(--sc-paper);color:var(--sc-text);font-family:var(--sc-font);
font-size:var(--sc-t-base);box-sizing:border-box}
.abokat-row__ord{display:flex;flex-direction:column;gap:2px}
.abokat-row__ord .btn-icon{width:20px;height:18px}
.abokat-row__col{width:32px;height:32px;border:0;border-radius:var(--sc-r-sm);
padding:0;cursor:pointer;flex:0 0 auto}
.abokat-row__key{width:120px;flex:0 0 auto}
.abokat-row__lab{flex:1;min-width:0}
.fv-row>input[type=text]{flex:1;min-width:0}
.fv-row.is-inaktiv>input[type=text]{color:var(--sc-faint);text-decoration:line-through}
.ak-fn-row{display:flex;gap:var(--sc-2);align-items:center;flex-wrap:wrap;padding:var(--sc-1) 0}
.ak-fn-row .ak-code{width:120px}
.ak-fn-row .ak-label{flex:1;min-width:140px}
.ak-fn-row .ak-scope{width:112px}
.ak-fn-row .ak-h{width:64px;text-align:right}
.ak-fn-row .ak-hjs{width:76px;text-align:right}
.staffel-input{width:100%}
.stb-k-row{margin-bottom:var(--sc-2)}
.stb-k-row .sc-card__foot{margin-top:var(--sc-3);padding-top:var(--sc-3)}
/* Eine Wahl (Radio/Haken) direkt ueber einem Formular braucht Abstand — sonst
klebt "Live — echter Zahlungsverkehr" auf dem ersten Feldnamen darunter. */
#tab-einstellungen .sc-check+.sc-form{margin-top:var(--sc-4)}
/* Eine Fusszeile ohne Karte drumherum (gemeinsames Speichern fuer zwei Karten):
die Linie darf nicht am Rasterrand kleben. */
.sc-full>.sc-card__foot{margin-top:0}
/* Roadmap-/Verlaufszeilen (.entw-item) sind display:flex. Ohne min-width:0 kann
die Textspalte nicht unter ihre min-content-Breite schrumpfen — eine lange URL
im Text schiebt dann die GANZE Seite waagerecht auf. Betrifft ~110 Eintraege,
deren Markup bewusst unangetastet bleibt. */
.entw-item{min-width:0}
.entw-item>div{min-width:0;overflow-wrap:anywhere}
/* Schmale Breite: eine Spalte. Die Pillen-Leiste selbst steht in index.html,
weil sie dort mit !important gegen die alten Regeln antreten muss (E21). */
@media(max-width:768px){
.set-layout{grid-template-columns:1fr}
.set-nav{position:static}
.set-doc{max-width:none}
}
/* ══════════════════════════════════════════════════════════════════════════
KUNDEN — Ergaenzung zum Bereichsumbau (16.08.2026)
══════════════════════════════════════════════════════════════════════════
Bewusst NICHT hier: .sc-toolbar (samt __head/__actions/__filters/--filters),
.sc-band, .sc-stack und .sc-scroll. Die gibt es zentral bereits weiter oben —
der Kunden-Bereich benutzt die vorhandenen Fassungen, statt sie zu doppeln.
Kein einziger Hex-Wert, alles ueber Token. */
/* Beilaeufiger Hinweistext (Trefferzahl, Nebenangabe in Listen) */
.sc-hint{font-size:var(--sc-t-sm);color:var(--sc-faint)}
/* Senkrecht begrenzter Rollbereich fuer Auswahllisten in Modals.
Ergaenzung zu .sc-scroll, das waagerecht rollt — die beiden loesen
zwei verschiedene Probleme und duerfen nicht denselben Namen tragen. */
.sc-scrolly{max-height:220px;overflow-y:auto;padding:0 var(--sc-3);
border:1px solid var(--sc-line);border-radius:var(--sc-r-sm)}
/* ── Suchfeld mit eingelegter Lupe ──────────────────────────────────────── */
.sc-search{position:relative;display:inline-flex;align-items:center;flex:0 1 320px;min-width:200px}
.sc-search--wide{flex:1 1 100%;margin:var(--sc-2) 0}
.sc-search > svg.lucide,.sc-search > i[data-lucide]{position:absolute;left:12px;
width:15px;height:15px;color:var(--sc-faint);pointer-events:none}
.sc-search input{width:100%;box-sizing:border-box;padding:8px 14px 8px 34px;
border:1px solid var(--sc-line-strong);border-radius:var(--sc-r-pill);
font-family:inherit;font-size:var(--sc-t-base);background:var(--sc-paper);color:var(--sc-text)}
.sc-search input:focus{outline:none;border-color:var(--sc-lime-deep)}
/* ── Filterreiter als Chips ─────────────────────────────────────────────── */
.sc-chips{display:flex;align-items:center;gap:var(--sc-1);flex-wrap:wrap}
.sc-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;cursor:pointer;
border:1px solid var(--sc-line-strong);border-radius:var(--sc-r-pill);background:var(--sc-paper);
color:var(--sc-muted);font-family:inherit;font-size:var(--sc-t-sm);
transition:color var(--sc-t-fast),border-color var(--sc-t-fast),background var(--sc-t-fast)}
.sc-chip:hover{color:var(--sc-text);border-color:var(--sc-lime-deep)}
.sc-chip.is-active{background:var(--sc-ink);border-color:var(--sc-ink);color:var(--sc-on-dark);font-weight:600}
.sc-chip__n{font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);color:var(--sc-faint)}
.sc-chip.is-active .sc-chip__n{color:var(--sc-on-dark-muted)}
/* ── Kartenraster fuer Entitaetslisten (Kunden, spaeter Vertraege/Websites) ─ */
.sc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
gap:var(--sc-3);align-items:stretch}
.sc-cards__full{grid-column:1/-1}
/* Rasterkinder haben min-width:auto — eine einzige lange, unumbrechbare Zeile
(E-Mail, URL) in EINER Karte zieht sonst die Spalte und damit die GANZE Seite
waagerecht auf (gemessen: 825 px Spalte bei 390 px Bildschirm). Gleiche
Ursache wie bei .entw-item weiter oben. */
.sc-cards > *{min-width:0}
/* ── Ergaenzungen zu bestehenden Bausteinen ─────────────────────────────────
.sc-check und .btn-icon-text stehen im