/* AffiliateBoost One: Boost-Design-Standard (dunkel, fest), Akzent Cyan.
   Aufbau: Seitenleiste links, Inhalt in voller Breite daneben, deckende Panels (Radius 16), Linien-Icons, Meldungen oben rechts,
   Fenster und Seitenpanel mit Kopf, Inhalt und Fuss. Gemeinsam fuer Partnerportal und Verwaltung.
   Abstaende in 8er-Schritten (4 als Halbschritt). Schriftgroessen fuer Inhalte: 13, 15, 24 (plus 44 nur fuer den Hauptbetrag).
   Logische Eigenschaften (inline-start/-end) statt links/rechts, damit spaeter dir="rtl" reicht.
   Keine Inline-Styles im HTML und im Skript: die Content-Security-Policy erlaubt nur diese Datei. Breiten und Hoehen in Diagrammen
   setzen die Skripte als SVG-Attribute.

   Volle Breite: der Inhalt nutzt die ganze Flaeche neben der Seitenleiste (kein zentrierter Container). Das Raster richtet sich nach
   der Breite des INHALTSBEREICHS (Container-Abfrage "inh"), nicht nach dem Fenster, damit die Seitenleiste mitgerechnet ist:
     unter 800 px   einspaltig (Handy, Tablet hochkant)
     ab 800 px      zwei Spalten (8:4 und 6:6), 3 Kennzahlen je Zeile       (Fenster ab ca. 1100 px)
     ab 1400 px     6 Kennzahlen in einer Zeile, Zusatzspalten              (Fenster ab ca. 1660 px, Full HD)
     ab 1900 px     drei Spalten nebeneinander (6:3:3)                      (Fenster ab ca. 2160 px, WQHD und breiter)
   Tabellen und Karten reagieren zusaetzlich auf ihre eigene Breite (Container "p"). */

:root {
  color-scheme: dark;
  --bg: #0f1115;
  --surface: #161a21;
  --surface-2: #1c2029;
  --border: #262b34;
  --border-strong: #353c48;
  --text: #e9edf2;
  --text-muted: #95a2af;
  --text-faded: #6c7a88;

  --accent: #22d3ee;
  --accent-hover: #67e8f9;
  --accent-dunkel: #0891b2;
  --auf-akzent: #04202a;
  --verlauf: linear-gradient(135deg, #0891b2, #22d3ee);
  /* Logo-Kachel wie das Favicon (Brand-Guide v1.3 §4.4); eine eigene Marke setzt beides in marke.css */
  --kachel-verlauf: linear-gradient(135deg, #0e7490, #06b6d4);
  --auf-kachel: #ffffff;
  --ring: rgba(34, 211, 238, .28);
  --one-blau: #33a8ff;

  --rot: #f87171;
  --gruen: #34d399;
  --amber: #f0b429;
  --violett: #a78bfa;
  /* Die vier Geldzustaende: in beiden Portalen gleich benannt und gefaerbt */
  --geld-offen: #95a2af;
  --geld-wartezeit: var(--amber);
  --geld-auszahlungsbereit: var(--gruen);
  --geld-ausgezahlt: var(--violett);

  --glass: rgba(15, 17, 21, .72);
  --panel: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)), #12151b;
  --panel-border: rgba(255, 255, 255, .075);
  --panel-shadow: 0 14px 40px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
  --flare: radial-gradient(900px circle at 8% -10%, rgba(34, 211, 238, .12), transparent 55%),
           radial-gradient(1000px circle at 92% 110%, rgba(34, 211, 238, .07), transparent 55%);
  --kachel: rgba(255, 255, 255, .03);

  /* Schriftskala: wenige feste Groessen. Text 15, Hilfetext eine Stufe kleiner (13, ruhige Farbe), Abschnittstitel 17, Seitentitel und
     Kennzahlen 24, Hauptbetrag 44. 12 nur fuer Zaehler in Pillen und die untere Leiste am Handy. */
  --fs-mini: 12px;
  --fs-klein: 13px;
  --fs-text: 15px;
  --fs-titel: 17px;
  --fs-gross: 24px;
  --fs-held: 44px;
  /* Zwei Zeilenhoehen: eine fuer Text, eine fuer Ueberschriften und Zahlen */
  --zh-text: 1.55;
  --zh-titel: 1.3;
  /* Abstandsraster (4er-Schritte): 4, 8, 12, 16, 24, 32, 48 */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px; --a7: 48px;
  --sl-breite: 256px;
  --rand: clamp(24px, 2.5vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  font-size: var(--fs-text);
  line-height: var(--zh-text);
  min-height: 100vh;
  isolation: isolate;
  /* Umbruch: "pretty" verhindert, dass das letzte Wort allein in die naechste Zeile rutscht (wird vererbt, gilt also fuer jeden Text).
     Nie "balance" fuer Absaetze: das bricht absichtlich frueher um und laesst rechts Platz frei. */
  text-wrap: pretty;
}
/* Schimmer als fest stehende Ebene (statt background-attachment: fixed, das bei jedem Scrollen neu zeichnet) */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--flare); }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { line-height: var(--zh-titel); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1:focus, main:focus { outline: none; }
[hidden] { display: none !important; }
.versteckt { display: none !important; }
/* Rolle "Nur lesen" (Klasse an body, gesetzt von verwaltung.js): Knoepfe, die etwas aendern, verschwinden. Die Sperre selbst sitzt in der API. */
.rolle-lesen [data-schreibt] { display: none !important; }
.nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { flex-shrink: 0; vertical-align: middle; }
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.nowrap { white-space: nowrap; }
.gedaempft { color: var(--text-muted); }
.klein { font-size: var(--fs-klein); }
.sprung { position: absolute; inset-inline-start: 16px; inset-block-start: -64px; z-index: 200; background: var(--accent); color: var(--auf-akzent); padding: 8px 16px; border-radius: 8px; font-weight: 700; }
.sprung:focus { inset-block-start: 8px; }

@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes wackeln { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes panel-ein { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.einblenden { animation: einblenden .25s ease; }
.spinner { width: 24px; height: 24px; border: 2.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: drehen .6s linear infinite; margin: 40px auto; }

/* ═════ Marke ═════ */
.marke { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.logo-kachel {
  width: 36px; height: 36px; border-radius: 10px; background: var(--kachel-verlauf);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb, 8, 145, 178), .35);
  display: inline-flex; align-items: center; justify-content: center; color: var(--auf-kachel); flex-shrink: 0;
}
.marke-name { font-size: var(--fs-titel); font-weight: 700; white-space: nowrap; }
.marke-zusatz { font-size: var(--fs-klein); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }

/* ═════ Knoepfe ═════ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: var(--fs-text);
  font-weight: 600; cursor: pointer; padding: 8px 16px; border-radius: 8px; white-space: nowrap;
  transition: filter .14s, background .14s, border-color .14s;
}
.knopf:hover:not(:disabled) { border-color: var(--text-faded); color: var(--text); text-decoration: none; }
.knopf:disabled { opacity: .55; cursor: not-allowed; }
.knopf-primaer { background: var(--verlauf); border-color: transparent; color: var(--auf-akzent); font-weight: 700; box-shadow: 0 6px 18px rgba(var(--accent-rgb, 8, 145, 178), .3); }
.knopf-primaer:hover:not(:disabled) { filter: brightness(1.08); border-color: transparent; color: var(--auf-akzent); }
.knopf-gefahr { color: var(--rot); border-color: rgba(248, 113, 113, .45); }
.knopf-gefahr:hover:not(:disabled) { background: rgba(248, 113, 113, .1); border-color: var(--rot); color: var(--rot); }
.knopf-klein { font-size: var(--fs-klein); padding: 4px 12px; min-height: 32px; }
.knopf-voll { width: 100%; padding: 12px 16px; }
.knopf-icon { border: 0; background: none; color: var(--text-muted); cursor: pointer; padding: 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
.knopf-icon:hover { color: var(--text); background: var(--surface-2); }
.link-knopf { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: var(--fs-klein); }
.link-knopf:hover:not(:disabled) { text-decoration: underline; }
.link-knopf:disabled { color: var(--text-faded); cursor: default; }
.laedt::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: drehen .6s linear infinite; }

.umschalter { display: inline-flex; gap: 4px; padding: 4px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
.umschalter button {
  min-height: 32px; padding: 4px 12px; border: 0; border-radius: 8px; background: none; color: var(--text-muted);
  font-size: var(--fs-klein); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.umschalter button:hover { color: var(--text); }
.umschalter button[aria-pressed="true"] { background: rgba(var(--accent-rgb, 34, 211, 238), .12); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 34, 211, 238), .35); }
/* Umschalter im Formular: volle Breite, bricht auf schmalen Bildschirmen um statt zu scrollen */
.umschalter-voll { display: flex; flex-wrap: wrap; overflow-x: visible; }
.umschalter-voll button { flex: 1 1 auto; justify-content: center; white-space: normal; text-align: center; }
.umschalter .zahl { background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 0 8px; font-size: var(--fs-mini); font-weight: 700; }

/* Reiter der Anmeldung (Passwort oder E-Mail-Code, Anmelden oder Bewerben) */
.segment { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; max-width: 100%; overflow-x: auto; }
.segment-knopf {
  flex: 1; border: 0; background: none; color: var(--text-muted); font-weight: 600; cursor: pointer; min-height: 36px;
  padding: 8px 16px; border-radius: 8px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, color .15s;
}
.segment-knopf:hover { color: var(--text); }
.segment-knopf.aktiv { background: var(--verlauf); color: var(--auf-akzent); }

/* ═════ Abzeichen ═════ */
.abzeichen { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-klein); font-weight: 600; white-space: nowrap; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); }
.abzeichen.angefragt, .abzeichen.wartezeit, .abzeichen.test, .abzeichen.warnung, .abzeichen.uebersprungen { background: rgba(240, 180, 41, .14); border-color: rgba(240, 180, 41, .4); color: var(--amber); }
.abzeichen.aktiv, .abzeichen.auszahlungsbereit, .abzeichen.live, .abzeichen.angelegt { background: rgba(52, 211, 153, .14); border-color: rgba(52, 211, 153, .4); color: var(--gruen); }
.abzeichen.abgelehnt, .abzeichen.gesperrt, .abzeichen.fehler { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .4); color: var(--rot); }
.abzeichen.ausgezahlt { background: rgba(167, 139, 250, .14); border-color: rgba(167, 139, 250, .4); color: var(--geld-ausgezahlt); }
.abzeichen.standard, .abzeichen.uebernahme, .abzeichen.verknuepft { background: rgba(var(--accent-rgb, 34, 211, 238), .12); border-color: rgba(var(--accent-rgb, 34, 211, 238), .4); color: var(--accent); }
.abzeichen.storniert, .abzeichen.beendet { background: var(--surface-2); border-color: var(--border); color: var(--text-faded); }
.abzeichen.storniert { text-decoration: line-through; }
.abzeichen.offen, .abzeichen.angemeldet { background: rgba(149, 162, 175, .12); border-color: rgba(149, 162, 175, .35); color: var(--geld-offen); }

/* ═════ Formulare ═════ */
.formular { display: flex; flex-direction: column; gap: 16px; }
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld-label { font-size: var(--fs-klein); font-weight: 600; color: var(--text-muted); }
.feld-hilfe { font-size: var(--fs-klein); color: var(--text-muted); }
.eingabe {
  width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, .04); color: var(--text); outline: none; transition: border-color .14s, box-shadow .14s;
}
.eingabe::placeholder { color: var(--text-faded); }
.eingabe:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.eingabe:disabled, .eingabe[readonly] { opacity: .65; }
.eingabe[aria-invalid="true"] { border-color: var(--rot); }
select.eingabe { appearance: none; padding-inline-end: 40px; background-image: none; }
select.eingabe option { background: var(--surface); color: var(--text); }
.auswahl { position: relative; }
.auswahl::after {
  content: ""; position: absolute; inset-inline-end: 16px; inset-block-start: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-inline-end: 2px solid var(--text-muted); border-block-end: 2px solid var(--text-muted); transform: rotate(45deg); pointer-events: none;
}
textarea.eingabe { resize: vertical; min-height: 56px; }
.eingabe-zeile { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.haken { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-klein); color: var(--text-muted); line-height: var(--zh-text); }
.haken input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent-dunkel); flex-shrink: 0; }
.link-fehlt { text-decoration: underline dotted; text-underline-offset: 3px; color: var(--text); }
.fehler-text { color: var(--rot); font-size: var(--fs-klein); min-height: 0; }
.fehler-text:empty { display: none; }
.hinweis { display: flex; gap: 16px; align-items: center; background: rgba(var(--accent-rgb, 34, 211, 238), .08); border: 1px solid rgba(var(--accent-rgb, 34, 211, 238), .25); border-radius: 12px; padding: 16px 24px; color: var(--text); font-size: var(--fs-text); }
.hinweis .icon { color: var(--accent); }
.hinweis.warnung { background: rgba(240, 180, 41, .09); border-color: rgba(240, 180, 41, .35); }
.hinweis.warnung .icon { color: var(--amber); }
.hinweis .klein, .hinweis.klein { font-size: var(--fs-klein); }
.hinweis-text { flex: 1 1 260px; min-width: 0; }
.hinweis-text strong { display: block; }
.hinweis-text span { color: var(--text-muted); font-size: var(--fs-klein); }
.hinweis-text span + span { display: block; margin-top: 4px; }
.angaben-hinweis > div { flex: 1 1 260px; }
.angaben-hinweis { flex-wrap: wrap; }
/* Titel, Erklaerung und "Es fehlt noch" je in einer eigenen Zeile (vorher lief die Liste im selben Absatz weiter) */
.angaben-hinweis .klein { display: block; margin-top: var(--a1); }
.fenster-inhalt .hinweis { margin-top: 4px; padding: 12px 16px; }
.hinweis + .formular, .hinweis + form { margin-top: 0; }

/* Eingabe mit Knopf (Code per E-Mail, Link kopieren) */
.zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ═════ Rahmen: Seitenleiste links, Inhalt rechts ═════ */
.rahmen { display: grid; grid-template-columns: var(--sl-breite) minmax(0, 1fr); min-height: 100vh; }
.seitenleiste {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: 24px; padding: 24px 16px 16px;
  background: rgba(18, 21, 27, .88); border-inline-end: 1px solid var(--border); overflow-y: auto;
}
.sl-marke { display: flex; align-items: center; gap: 8px; padding-inline: 8px; }
.sl-name { display: flex; flex-direction: column; line-height: 1.25; }
.sl-zusatz { font-size: var(--fs-klein); color: var(--text-muted); font-weight: 500; }
.sl-nav { display: flex; flex-direction: column; gap: 16px; }
.sl-gruppe { margin: 0 0 8px; padding-inline: 12px; font-size: var(--fs-klein); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sl-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sl-nav a {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: 8px;
  color: var(--text-muted); font-weight: 600; transition: background .15s, color .15s;
}
.sl-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.sl-nav a[aria-current="page"] { background: rgba(var(--accent-rgb, 34, 211, 238), .1); color: var(--accent); }
.nav-zahl {
  margin-inline-start: auto; min-width: 24px; padding: 0 8px; border-radius: 999px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); font-size: var(--fs-klein); font-weight: 700;
}
.sl-fuss { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
.benutzer {
  display: flex; align-items: center; gap: 12px; padding: 8px; min-width: 0; border-radius: 12px; color: inherit; width: 100%;
  border: 0; background: none; text-align: start; cursor: pointer;
}
.benutzer:hover { background: var(--surface-2); text-decoration: none; color: inherit; }
.benutzer[aria-current="page"] { background: rgba(var(--accent-rgb, 34, 211, 238), .1); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--accent); font-size: var(--fs-klein); font-weight: 700;
}
.benutzer-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.benutzer-text strong { font-size: var(--fs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.benutzer-text span { font-size: var(--fs-klein); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inhalt: volle Breite neben der Seitenleiste, Innenabstand waechst mit dem Fenster (24 bis 40 px) */
.haupt { min-width: 0; }
.inhalt { container: inh / inline-size; width: 100%; padding: 24px var(--rand) 56px; }
.ansicht { display: flex; flex-direction: column; gap: 24px; }
/* Kinder einer Spalte duerfen schmaler werden als ihr Inhalt (sonst weitet eine breite Tabelle die ganze Seite, Ueberlauf bei 768 px); die Tabelle scrollt in ihrer Huelle */
.ansicht > *, .panel, .panel-tabelle { min-width: 0; }
.kopf-aktionen { min-width: 0; }

/* Mobile Kopfzeile, untere Leiste, Menue */
.kopfzeile, .untenleiste, .hintergrund { display: none; }

/* ═════ Seitenkopf: Titel, ein Satz Erklaerung, Aktionen rechts ═════
   Der Text nutzt die ganze Breite neben den Aktionen (keine kuenstlich schmale Spalte: ein max-width in ch bei kleiner Schrift
   liess frueher den Satz umbrechen, obwohl rechts noch Platz war). Die Aktionen stehen rechts oben auf Hoehe des Titels; der letzte
   Platz in .kopf-aktionen ist fuer den Hilfe-Knopf ("?") reserviert. */
.kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--a4) var(--a5); flex-wrap: wrap; }
.kopf h1 { font-size: var(--fs-gross); font-weight: 800; line-height: var(--zh-titel); letter-spacing: -.01em; }
.kopf > div:first-child, .panel-kopf > div:first-child { flex: 1 1 320px; min-width: 0; }
.kopf-text { color: var(--text-muted); margin-top: var(--a1); max-width: 100ch; }
.kopf-aktionen { display: flex; align-items: center; justify-content: flex-end; gap: var(--a2) var(--a3); flex-wrap: wrap; margin-inline-start: auto; }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a2) var(--a4); flex-wrap: wrap; }
.abschnitt-kopf h2 { font-size: var(--fs-titel); font-weight: 700; }
.abschnitt-kopf p { font-size: var(--fs-klein); color: var(--text-muted); }

/* ═════ Panels (jedes Panel ist ein Container "p": Innenleben richtet sich nach der Panelbreite) ═════ */
.panel, .karte {
  container: p / inline-size; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 16px;
  box-shadow: var(--panel-shadow); padding: 24px; min-width: 0;
}
/* Ueberschriften in Panels eine Stufe ueber dem Text (17), Unterueberschriften in Textgroesse (15): so sieht man auf einen Blick, was
   ein Abschnitt und was eine Zeile darin ist. Die Erklaerung unter dem Titel ist Hilfetext: 13, ruhige Farbe, ganze Panelbreite. */
.panel h2, .karte h2 { font-size: var(--fs-titel); font-weight: 700; }
.panel-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--a2) var(--a4); flex-wrap: wrap; margin-bottom: var(--a4); }
.panel-kopf p { margin-top: var(--a1); font-size: var(--fs-klein); color: var(--text-muted); }
.panel-tabelle { padding: 0; overflow: hidden; }
.panel-tabelle > .panel-kopf { padding: var(--a5) var(--a5) 0; margin-bottom: var(--a2); }
.panel-tabelle > .panel-fuss { padding: var(--a3) var(--a5) var(--a4); }
.karte-text { color: var(--text-muted); font-size: var(--fs-klein); margin-top: var(--a1); }
.karte h3, .panel h3 { font-size: var(--fs-text); font-weight: 700; }
/* Ruhige Kennzeichen statt Pillen: Status als Text mit farbigem Punkt (nur der Punkt traegt die Farbe), Hinweise als gedaempfter Text.
   Je Zeile oder Karte hoechstens EINE Pille (.abzeichen); Herkunft, Verknuepfung, Rolle und Nebenzustaende stehen als Text daneben. */
.status { display: inline-flex; align-items: center; gap: var(--a2); font-size: var(--fs-klein); font-weight: 600; color: var(--text); white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faded); flex-shrink: 0; }
.status.aktiv::before, .status.live::before, .status.auszahlungsbereit::before { background: var(--gruen); }
.status.angefragt::before, .status.wartezeit::before, .status.test::before, .status.warnung::before { background: var(--amber); }
.status.gesperrt::before, .status.abgelehnt::before, .status.fehler::before { background: var(--rot); }
.status.ausgezahlt::before { background: var(--violett); }
.status.beendet, .status.storniert, .status.inaktiv { color: var(--text-muted); }
/* Zahlen nebeneinander als Text (Abgleich, Eingaenge der letzten 30 Tage) */
.zahlen-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a1) var(--a4); margin: 0; font-size: var(--fs-klein); }
.ghl-daten dd.zahlen-zeile { margin: 0; }
/* Zusatzangabe rechts im Panelkopf (Termin): Text mit Symbol, keine Pille */
.kopf-info { display: inline-flex; align-items: center; gap: var(--a2); font-size: var(--fs-klein); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.kopf-info .icon { color: var(--accent); }
.ghl-fehler { margin: 0 0 var(--a4); }
.text-warnung { color: var(--amber); }
.text-fehler { color: var(--rot); }
.text-leise { color: var(--text-muted); font-weight: 400; }
.mehr-text { font-size: var(--fs-klein); color: var(--text-muted); font-weight: 400; }

/* Zwoelfer-Raster fuer die ganze Breite: Spannweiten je Stufe ueber .m (ab 800), .l (ab 1400), .x (ab 1900) */
.r12 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
.r12 > * { grid-column: 1 / -1; min-width: 0; }
.m3 { --m: 3; } .m4 { --m: 4; } .m5 { --m: 5; } .m6 { --m: 6; } .m7 { --m: 7; } .m8 { --m: 8; } .m9 { --m: 9; } .m12 { --m: 12; }
.l3 { --l: 3; } .l4 { --l: 4; } .l5 { --l: 5; } .l6 { --l: 6; } .l7 { --l: 7; } .l8 { --l: 8; } .l9 { --l: 9; } .l12 { --l: 12; }
.x3 { --xl: 3; } .x4 { --xl: 4; } .x5 { --xl: 5; } .x6 { --xl: 6; } .x8 { --xl: 8; } .x9 { --xl: 9; } .x12 { --xl: 12; }
@container inh (min-width: 800px) {
  .r12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .r12 > * { grid-column: span var(--m, 12); }
}
@container inh (min-width: 1400px) {
  .r12 > * { grid-column: span var(--l, var(--m, 12)); }
}
@container inh (min-width: 1900px) {
  .r12 > * { grid-column: span var(--xl, var(--l, var(--m, 12))); }
}
/* Gleich hohe Spalten ohne Abstand nach unten */
.r12 > .panel + .panel, .karte + .karte { margin-top: 0; }

/* Konto-Bauteil (Einstellungen, Mein Konto): die Karten fliessen in so vielen Spalten, wie der Platz hergibt */
.konto-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px; align-items: start; }
.konto-raster > .karte, .konto-raster > .hinweis { margin: 0; }
.konto-raster > .hinweis, .konto-raster > .spinner, .konto-raster > .leer { grid-column: 1 / -1; }
.karte-form { margin-top: 16px; max-width: 480px; }
/* Angaben fuer die Auszahlung: Karte ueber die volle Breite, Felder in zwei Spalten (am Handy eine) */
.konto-raster > .karte.breit { grid-column: 1 / -1; }
.karte-form.breit { max-width: none; }
.angaben-raster { display: grid; gap: 16px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.angaben-raster > .spanne { grid-column: 1 / -1; }
.angaben-nachweis { display: grid; gap: 16px; max-width: 480px; }
.karte-zeile { margin-top: 12px; justify-content: space-between; }
.karte .zeile + .zeile, .karte .zeile + p, .karte p + .zeile { margin-top: 12px; }
.leer { text-align: center; padding: 48px 24px; color: var(--text-muted); }
.leer-klein { color: var(--text-muted); font-size: var(--fs-klein); padding: 16px; text-align: center; }

/* ═════ Geldblock ═════ */
.geld-raster { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: stretch; }
.geld-haupt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.geld-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-text); font-weight: 700; color: var(--geld-auszahlungsbereit); }
.punkt { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.geld-betrag { font-size: var(--fs-held); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.panel > .geld-betrag { margin-top: 8px; }
.geld-satz { color: var(--text-muted); }
.geld-haupt .knopf { margin-top: 8px; }
.naechste {
  display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 24px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(52, 211, 153, .14), rgba(52, 211, 153, .04)); border: 1px solid rgba(52, 211, 153, .32);
}
.naechste-kopf { display: flex; align-items: center; gap: 8px; font-size: var(--fs-klein); font-weight: 600; color: var(--geld-auszahlungsbereit); }
.naechste-wert { font-size: var(--fs-gross); font-weight: 800; line-height: var(--zh-titel); margin-top: 8px; }
.naechste-unter { font-size: var(--fs-klein); color: var(--text-muted); }
.geld-zustand { container: geld / inline-size; }
.geld-leiste { display: block; width: 100%; height: 8px; margin: 24px 0 16px; border-radius: 999px; overflow: hidden; }
.geld-leiste .spur { fill: var(--surface-2); }
.geld-leiste .bereit { fill: var(--geld-auszahlungsbereit); }
.geld-leiste .wartezeit { fill: var(--geld-wartezeit); }
.geld-leiste .ausgezahlt { fill: var(--geld-ausgezahlt); }
.zustaende { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
.zustand { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 12px; background: var(--kachel); border: 1px solid var(--border); margin: 0; min-width: 0; }
.zustand dt { display: flex; align-items: center; gap: 8px; font-size: var(--fs-klein); font-weight: 600; color: var(--zf, var(--text-muted)); }
.zustand dd { margin: 0; }
.zustand .wert { font-size: var(--fs-gross); font-weight: 800; line-height: var(--zh-titel); font-variant-numeric: tabular-nums; }
.zustand .unter { font-size: var(--fs-klein); color: var(--text-muted); }
.z-offen { --zf: var(--geld-offen); }
.z-wartezeit { --zf: var(--geld-wartezeit); }
.z-bereit { --zf: var(--geld-auszahlungsbereit); }
.z-ausgezahlt { --zf: var(--geld-ausgezahlt); }
.z-cyan { --zf: var(--accent); }
/* Schmale Geldkarte (Handy, schmale Spalte): je Zustand eine Zeile mit dem Betrag rechts */
@container geld (max-width: 479px) {
  .zustand { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 8px 16px; }
  .zustand dt, .zustand .unter { grid-column: 1; }
  .zustand .wert { grid-column: 2; grid-row: 1 / span 2; font-size: var(--fs-text); }
}
@container geld (min-width: 480px) { .zustaende.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@container geld (min-width: 640px) { .zustaende { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .zustaende.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container geld (min-width: 840px) { .zustaende.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container inh (min-width: 1400px) {
  .geld-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .geld-panel .geld-leiste { margin-top: 0; }
}

/* ═════ Kennzahlen ═════ */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@container inh (min-width: 560px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container inh (min-width: 1400px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
dl.kpis { margin: 0; }
.kpis.fuenf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container inh (min-width: 560px) { .kpis.fuenf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container inh (min-width: 1400px) { .kpis.fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kpi { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 16px; box-shadow: var(--panel-shadow); padding: 16px 24px 24px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kpi-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kpi-icon { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb, 34, 211, 238), .1); color: var(--accent); flex-shrink: 0; }
.kpi-label { font-size: var(--fs-klein); font-weight: 600; color: var(--text-muted); }
.kpi-wert { font-size: var(--fs-gross); font-weight: 800; line-height: var(--zh-titel); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-unter { font-size: var(--fs-klein); color: var(--text-muted); }
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-klein); font-weight: 700; }
.delta.plus { color: var(--gruen); }
.delta.minus { color: var(--rot); }
.delta.neutral { color: var(--text-muted); font-weight: 600; }

/* ═════ Verlauf (selbst gezeichnetes SVG) ═════ */
.verlauf { position: relative; width: 100%; min-height: 208px; }
.verlauf svg { display: block; width: 100%; height: auto; overflow: visible; }
.verlauf svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.verlauf .achse { fill: var(--text-muted); font-size: var(--fs-klein); font-family: inherit; }
.verlauf .gitter { stroke: var(--border); stroke-width: 1; }
.verlauf .gitter-null { stroke: var(--border-strong); }
.verlauf .linie { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.verlauf .stop-oben { stop-color: var(--accent); stop-opacity: .28; }
.verlauf .stop-unten { stop-color: var(--accent); stop-opacity: 0; }
.verlauf .fadenkreuz { stroke: var(--border-strong); stroke-dasharray: 4 4; }
.verlauf .hover-punkt { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.verlauf .tip-box { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; }
.verlauf .tip-titel { fill: var(--text); font-size: var(--fs-klein); font-weight: 700; font-family: inherit; }
.verlauf .tip-zeile { fill: var(--text-muted); font-size: var(--fs-klein); font-family: inherit; }
.verlauf .tip-zeile.fett { fill: var(--text); font-weight: 700; }
.verlauf .tip-wert { text-anchor: end; }
.verlauf .leer-text { fill: var(--text-muted); font-size: var(--fs-text); font-family: inherit; text-anchor: middle; }

/* ═════ Zeitliste ═════ */
.zeitliste { list-style: none; margin: 0; padding: 0; }
.zeitliste li { display: flex; align-items: center; gap: 8px; padding: 16px 0; border-top: 1px solid var(--border); }
.zeitliste li:first-child { border-top: 0; padding-top: 0; }
.zeitliste li:last-child { padding-bottom: 0; }
.zl-name { flex: 1; color: var(--text-muted); }
.zl-wert { font-weight: 700; font-variant-numeric: tabular-nums; }
.zl-trend { width: 16px; display: inline-flex; justify-content: center; }
.zl-trend.plus { color: var(--gruen); }
.zl-trend.minus { color: var(--rot); }

/* ═════ Trichter: schmaler werdende Stufen mit Raten dazwischen ═════ */
.trichter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
.tr-stufe { width: 100%; display: flex; justify-content: center; }
.tr-balken {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px; border-radius: 12px; min-height: 56px;
  background: rgba(var(--accent-rgb, 34, 211, 238), var(--tr-a, .08)); border: 1px solid rgba(var(--accent-rgb, 34, 211, 238), .28);
}
.tr-stufe:nth-child(1) .tr-balken { width: 100%; --tr-a: .07; }
.tr-stufe:nth-child(3) .tr-balken { width: 82%; --tr-a: .12; }
.tr-stufe:nth-child(5) .tr-balken { width: 64%; --tr-a: .2; }
.tr-name { font-weight: 600; }
.tr-wert { font-weight: 800; font-variant-numeric: tabular-nums; }
.tr-rate { display: flex; align-items: center; gap: 4px; padding: 8px 0; font-size: var(--fs-klein); color: var(--text-muted); }
.tr-gesamt { margin-top: 16px; font-size: var(--fs-klein); color: var(--text-muted); text-align: center; }

/* ═════ Programme im Ueberblick (Partnerportal) ═════ */
.prog-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.prog { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--kachel); min-width: 0; }
.prog-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.prog-name { font-weight: 700; min-width: 0; }
.prog-satz { font-size: var(--fs-gross); font-weight: 800; line-height: var(--zh-titel); color: var(--accent); white-space: nowrap; }
.prog-regel { font-size: var(--fs-klein); color: var(--text-muted); }
.balken { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }
.balken .spur { fill: var(--surface-2); }
.balken .fuell { fill: var(--accent); }
.prog-zahlen { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-klein); color: var(--text-muted); }
.prog-zahlen strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* ═════ Tabellen ═════ */
/* position: relative, damit unsichtbare Texte (.nur-lesen, position: absolute) in der scrollenden Huelle bleiben und die Seite nicht verbreitern (Ueberlauf bei 768 px) */
.tabelle-huelle { overflow-x: auto; position: relative; }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-text); }
.tabelle caption { text-align: start; }
/* Spaltentitel duerfen umbrechen ("Provision / ausgezahlt"): mit nowrap wurden breite Tabellen (Beste Partner) breiter als das Panel und scrollten seitlich */
.tabelle th { text-align: start; vertical-align: bottom; color: var(--text-muted); font-size: var(--fs-klein); font-weight: 600; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.tabelle td { padding: 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabelle th:first-child, .tabelle td:first-child { padding-inline-start: 24px; }
.tabelle th:last-child, .tabelle td:last-child { padding-inline-end: 24px; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: rgba(255, 255, 255, .025); }
.tabelle .betrag { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Der Betrag bleibt ganz, die Erlaeuterung darunter darf umbrechen (sonst macht sie die Spalte so breit, dass die Tabelle seitlich scrollt) */
.tabelle .betrag .neben { white-space: normal; min-width: 12ch; }
.tabelle th.betrag { white-space: normal; }
.tabelle .rechts { text-align: end; }
.tabelle .neben, .zelle-neben { display: block; margin-top: 4px; font-size: var(--fs-klein); color: var(--text-muted); }
.tabelle .fett { font-weight: 700; }
.tabelle td.erste.fett { white-space: nowrap; }
.tabelle .minus { color: var(--rot); }
.name-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aktionen-gruppe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tabelle td.aktionen { text-align: end; }
.tabelle td.aktionen .aktionen-gruppe { justify-content: flex-end; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-klein); }
.link-zelle { display: block; max-width: clamp(160px, 18vw, 440px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); font-size: var(--fs-klein); }
.tabelle-fuss { padding: 16px 24px; border-top: 1px solid var(--border); font-size: var(--fs-klein); color: var(--text-muted); }
.nur-text { color: var(--text-muted); font-size: var(--fs-klein); }

/* ═════ Gruppen und Reihenfolge (Programme, Stripe-Produkte; Verwaltung und Partnerportal) ═════
   Gruppenkopf als ein Knopf (auf- und zuklappbar), darunter die Zeilen. Umsortieren: Knoepfe nach oben und unten (Tastatur) und ein Griff zum Ziehen (Maus).
   Eine zugeklappte Gruppe versteckt nur ihren Block (hidden), die Tabelle bleibt eine Tabelle. */
.tabelle tbody[hidden], .gruppe-zeilen[hidden] { display: none !important; }
.tabelle .gruppe-kopf th { padding: 0; background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--border); color: var(--text); font-size: var(--fs-text); vertical-align: middle; }
.tabelle-gruppen .gruppe-zeilen tr:last-child td { border-bottom: 1px solid var(--border); }
.tabelle-gruppen .gruppe-zeilen:last-of-type tr:last-child td { border-bottom: 0; }
.gruppe-knopf { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 24px; background: none; border: 0; color: var(--text); font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
.gruppe-knopf:hover { background: rgba(255, 255, 255, .03); }
.gruppe-knopf .icon { flex: none; color: var(--text-muted); transition: transform .15s; }
.gruppe-knopf[aria-expanded="false"] .icon { transform: rotate(-90deg); }
.gruppe-name { min-width: 0; overflow-wrap: anywhere; }
.gruppe-zahl { flex: none; font-weight: 500; font-size: var(--fs-klein); color: var(--text-muted); }
.tabelle td.sortzelle { width: 1%; padding-inline-end: 0; white-space: nowrap; }
.tabelle th.sortzelle { width: 1%; padding-inline-end: 0; }
.sortier { display: inline-flex; align-items: center; gap: 4px; }
.sortier-pfeile { display: inline-flex; flex-direction: column; gap: 2px; }
.knopf-quadrat { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; padding: 2px; }
.griff { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 40px; border-radius: 8px; color: var(--text-muted); cursor: grab; }
.griff:hover { color: var(--text); background: var(--surface-2); }
.griff:active { cursor: grabbing; }
.wird-gezogen { opacity: .45; }
.tabelle tr.ziel-vor td { box-shadow: inset 0 3px 0 var(--accent); }
.tabelle tr.ziel-nach td { box-shadow: inset 0 -3px 0 var(--accent); }
/* Auf Touch-Geraeten gibt es kein HTML5-Ziehen: dort bleiben die Knoepfe */
@media (hover: none), (pointer: coarse) { .griff { display: none; } }
/* Gruppen im Partnerportal (Karten statt Tabelle) */
.karten-gruppe + .karten-gruppe { margin-top: 16px; }
.karten-gruppe > .gruppe-knopf { padding: 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.karten-gruppe > .gruppe-knopf:hover { background: none; }
.karten-gruppe .gruppe-karten[hidden] { display: none !important; }
.tag { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-mini); font-weight: 600; color: var(--text-muted); }
.tag.kunde { background: rgba(51, 168, 255, .12); border-color: rgba(51, 168, 255, .35); color: var(--one-blau); }
.seiten-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-klein); }
/* Zusatzspalten: erscheinen, sobald die Tabelle genug Platz hat */
@container p (max-width: 899px) { .mehr { display: none; } }
@container p (max-width: 999px) { .mehr2 { display: none; } }
/* Angaben fuer die Gutschrift: in der eigenen Spalte, wo sie Platz hat, sonst unter dem Namen */
.nur-schmal { display: block; margin-top: 6px; }
@container p (min-width: 1000px) { .nur-schmal { display: none; } }
/* Partnerliste: eine ruhige Zeile je Partner, Klick klappt die Details auf */
.pl-liste { list-style: none; margin: 0; padding: 0; container: pl / inline-size; }
.pl-kopf, .pl-zeile { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.5fr) 72px 112px 24px; gap: 8px 16px; align-items: center; }
.pl-kopf { padding: 8px 24px; border-bottom: 1px solid var(--border); font-size: var(--fs-klein); font-weight: 600; color: var(--text-muted); }
.pl-kopf .betrag, .pl-kunden { text-align: end; font-variant-numeric: tabular-nums; }
.pl-eintrag { border-bottom: 1px solid var(--border); }
.pl-eintrag:last-child { border-bottom: 0; }
.pl-zeile { width: 100%; padding: 16px 24px; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.pl-zeile:hover { background: var(--surface-2); }
.pl-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pl-partner, .pl-zelle { display: block; min-width: 0; }
.pl-partner .fett { display: block; font-weight: 700; overflow-wrap: anywhere; }
.pl-partner .neben { display: block; margin-top: 2px; font-size: var(--fs-klein); color: var(--text-muted); overflow-wrap: anywhere; }
.pl-pfeil { display: inline-flex; justify-self: end; color: var(--text-muted); transition: transform .15s ease; }
.pl-zeile[aria-expanded="true"] .pl-pfeil { transform: rotate(180deg); }
/* Mittlere Spalte (Herkunft und Zustimmung, Begriff und Wert nebeneinander) bekommt mehr Platz, sonst bricht jedes Datum dreizeilig um */
.pl-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .9fr); gap: 16px 32px; padding: 16px 24px 24px; background: var(--surface-2); border-top: 1px solid var(--border); }
.pl-details[hidden] { display: none; }
.pl-block { min-width: 0; font-size: var(--fs-text); }
.pl-block h4 { margin: 0 0 8px; font-size: var(--fs-klein); font-weight: 600; color: var(--text-muted); text-transform: none; }
.pl-block p { margin: 0 0 2px; overflow-wrap: anywhere; }
.pl-block p.pl-abstand { margin-top: 8px; }
.pl-details .abzeichen { white-space: normal; text-align: start; }
.pl-block .neben { display: block; margin-top: 4px; font-size: var(--fs-klein); color: var(--text-muted); }
.pl-fehlt { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: var(--fs-klein); color: var(--amber); }
.pl-dl { margin: 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 6px 16px; }
.pl-dl dt { color: var(--text-muted); font-size: var(--fs-klein); padding-top: 2px; }
.pl-dl dd { margin: 0; overflow-wrap: anywhere; }
.pl-aktionen { flex-direction: column; align-items: stretch; }
.pl-aktionen .knopf { width: 100%; justify-content: flex-start; }
.pl-aktionen .knopf-gefahr { order: 99; }
@container pl (max-width: 859px) { .pl-details { grid-template-columns: minmax(0, 1fr); } }
@container pl (max-width: 639px) {
  .pl-zeile { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
  .pl-partner { grid-column: 1 / -1; padding-inline-end: 32px; }
  .pl-pfeil { position: absolute; top: 16px; inset-inline-end: 16px; }
  .pl-zelle .abzeichen { white-space: normal; }
  .pl-zelle[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-klein); font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
  .pl-kunden { text-align: start; }
  .pl-details { padding: 16px; }
}
@media (max-width: 767px) {
  .pl-kopf { display: none; }
  .pl-zeile { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
  .pl-partner { grid-column: 1 / -1; padding-inline-end: 32px; }
  .pl-pfeil { position: absolute; top: 16px; inset-inline-end: 16px; }
  .pl-zelle .abzeichen { white-space: normal; }
  .pl-zelle[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-klein); font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
  .pl-kunden { text-align: start; }
  .pl-details { grid-template-columns: minmax(0, 1fr); padding: 16px; }
}

/* Werkzeugleiste ueber Tabellen: Suche, Filter */
.werkzeug { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 16px 24px 8px; }
.suche { position: relative; flex: 1 1 200px; max-width: 320px; }
.suche > .icon { position: absolute; inset-inline-start: 12px; inset-block-start: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.suche input { padding-inline-start: 40px; }
.werkzeug .umschalter { flex-shrink: 1; }
.filterleiste { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: flex-end; padding: 16px 24px; border-bottom: 1px solid var(--border); }
.filterleiste .feld { min-width: 150px; flex: 1 1 150px; max-width: 240px; }

/* ═════ Teilen ═════ */
.link-gross { display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 24px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border-strong); border-radius: 12px; }
.link-gross .link-text { flex: 1; min-width: 0; font-size: var(--fs-gross); font-weight: 700; color: var(--accent); overflow-wrap: anywhere; line-height: var(--zh-titel); }
.link-gross .knopf { flex-shrink: 0; }
.link-gross + .feld-paar { margin-top: 24px; }
.feld-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.feld-block .feld-label { color: var(--text); font-size: var(--fs-klein); font-weight: 600; }
.code-zeile { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.code-wert { font-size: var(--fs-gross); font-weight: 800; letter-spacing: .12em; color: var(--accent); word-break: break-all; }
/* So viele Spalten, wie Felder da sind (auto-fit): ein einzelnes Feld bekam vorher nur die halbe Breite, sein Hilfetext brach mitten im Platz um */
.feld-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.tipps { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.tipps h3 { margin-bottom: 12px; }
.tipps ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tipps li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-klein); color: var(--text-muted); }
.tipps li .icon { color: var(--gruen); margin-top: 2px; }
.tipps li .mono { color: var(--text); }
.qr-panel { display: flex; flex-direction: column; }
.qr-mitte { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; justify-content: center; text-align: center; }
.qr-box { background: #ffffff; border-radius: 12px; padding: 12px; line-height: 0; flex-shrink: 0; }
.qr-box svg { width: 176px; height: 176px; max-width: 100%; display: block; }
.qr-unter { font-size: var(--fs-klein); color: var(--text-muted); overflow-wrap: anywhere; }
.qr-unter .mono { color: var(--text); }
.vorlagen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.vorlage { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--kachel); min-width: 0; }
.vorlage h3 { display: flex; align-items: center; gap: 8px; }
.vorlage p { flex: 1; font-size: var(--fs-klein); color: var(--text-muted); white-space: pre-line; overflow-wrap: anywhere; }
.vorlage .knopf { align-self: flex-start; }

/* ═════ Startcheckliste und Einrichtung ═════ */
.fortschritt { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }
.fortschritt .spur { fill: var(--surface-2); }
.fortschritt .fuell { fill: var(--accent); }
.fortschritt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.schritte { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.schritt { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--kachel); }
.schritt.aktuell { border-color: rgba(var(--accent-rgb, 34, 211, 238), .45); background: rgba(var(--accent-rgb, 34, 211, 238), .06); }
.nummer { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); font-weight: 700; color: var(--text-muted); }
.schritt.erledigt .nummer { background: rgba(52, 211, 153, .14); border-color: rgba(52, 211, 153, .4); color: var(--gruen); }
.schritt.aktuell .nummer { background: var(--verlauf); color: var(--auf-akzent); border-color: transparent; }
.schritt-text h3 { display: block; }
.schritt-text h3 > span:not(.nur-lesen), .zeilen h3 > span:not(.nur-lesen):not(.warn-symbol) { margin-inline-start: var(--a2); }
.schritt-text p { margin-top: 4px; font-size: var(--fs-klein); color: var(--text-muted); }
.erklaerung { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.erklaerung li { padding: 16px; border-radius: 12px; background: var(--kachel); border: 1px solid var(--border); }
.erklaerung h3 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-klein); font-weight: 700; color: var(--zf, var(--text)); }
.erklaerung p { margin-top: 8px; font-size: var(--fs-klein); color: var(--text-muted); }
@container p (min-width: 520px) { .erklaerung { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container p (min-width: 960px) { .erklaerung { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mini-schritte { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mini-schritte li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-klein); color: var(--text-muted); }
.mini-schritte li.ok { color: var(--text); }
.mini-schritte .haken-ok { color: var(--gruen); display: inline-flex; }
.mini-schritte .offen-punkt { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex-shrink: 0; }

/* ═════ Aufgaben, Anfragen, Hinweise, Aktivitaet (Verwaltung) ═════ */
.aufgaben { list-style: none; margin: 0; padding: 0; }
.aufgabe { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--border); }
.aufgabe:first-child { border-top: 0; padding-top: 0; }
.aufgabe:last-child { padding-bottom: 0; }
.aufgabe-zahl { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-gross); font-weight: 800; background: rgba(240, 180, 41, .12); color: var(--amber); border: 1px solid rgba(240, 180, 41, .35); }
.aufgabe.fertig .aufgabe-zahl { background: rgba(52, 211, 153, .12); color: var(--gruen); border-color: rgba(52, 211, 153, .35); }
.aufgabe h3 { font-size: var(--fs-text); font-weight: 700; }
.aufgabe.fertig h3 { font-weight: 600; color: var(--text-muted); }
.aufgabe p { margin-top: 4px; font-size: var(--fs-klein); color: var(--text-muted); }
.zeilen { list-style: none; margin: 0; padding: 0; }
.zeilen > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 16px 24px; border-top: 1px solid var(--border); }
.zeilen > li:first-child { border-top: 0; }
.zeilen h3 { display: block; }
.zeilen p { margin-top: 4px; font-size: var(--fs-klein); color: var(--text-muted); }
.zeilen .leer-zeile { display: block; color: var(--text-muted); }
.warn-symbol { color: var(--amber); display: inline-flex; vertical-align: -3px; margin-inline-end: var(--a2); }
@container p (max-width: 559px) { .zeilen > li { grid-template-columns: minmax(0, 1fr); } }
.ereignisse { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 8px 16px; }
.ereignis { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--kachel); }
.ereignis-icon { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb, 34, 211, 238), .1); color: var(--accent); }
.ereignis-icon.gelb { background: rgba(240, 180, 41, .12); color: var(--amber); }
.ereignis-icon.gruen { background: rgba(52, 211, 153, .12); color: var(--gruen); }
.ereignis-icon.violett { background: rgba(167, 139, 250, .14); color: var(--violett); }
.ereignis strong { display: block; font-size: var(--fs-text); font-weight: 700; line-height: var(--zh-titel); }
.ereignis .text { display: block; margin-top: 2px; font-size: var(--fs-klein); color: var(--text-muted); }
.ereignis time { font-size: var(--fs-klein); color: var(--text-muted); white-space: nowrap; }
.alles-gut { display: flex; align-items: center; gap: 8px; color: var(--gruen); font-weight: 600; }

/* BusinessBoost-One-Streifen auf Heute */
.bbo-innen { display: flex; flex-direction: column; gap: 16px; }
.bbo-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bbo-kopf .kreis { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(51, 168, 255, .12); border: 1px solid rgba(51, 168, 255, .35); color: var(--one-blau); flex-shrink: 0; }
.bbo-streifen p { font-size: var(--fs-klein); color: var(--text-muted); }
@container p (min-width: 720px) {
  .bbo-innen { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 16px 24px; }
  .bbo-innen > p { flex: 1 1 320px; order: 3; }
  .bbo-innen .aktionen-gruppe { order: 2; }
}
.ghl-status { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.ghl-daten { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.ghl-daten dt { color: var(--text-muted); font-size: var(--fs-klein); font-weight: 600; }
.ghl-daten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ghl-daten + .hinweis { margin-top: 16px; }
/* Gutschriftsvereinbarung der Firma bei BillingBoost (Partnerportal und Mitgliederbereich): lesbarer Kasten, laenger als er hoch wird scrollt er */
@media (max-width: 480px) { .bbl-daten { grid-template-columns: 1fr; gap: 2px 0; } .bbl-daten dd { margin-bottom: 8px; } }
.vereinbarung-text { max-height: 20rem; overflow: auto; padding: 12px 16px; margin: 12px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--kachel); overflow-wrap: anywhere; }
.vereinbarung-text p { margin: 0 0 8px; }
.vereinbarung-text p:last-child { margin-bottom: 0; }
.hinweis-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.hinweis-zeile { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--kachel); }
.hinweis-zeile > .icon { color: var(--amber); margin-top: 2px; }
.hinweis-zeile .hinweis-text strong { font-size: var(--fs-text); }
.kontakt-tags { display: flex; gap: 4px; flex-wrap: wrap; }

/* ═════ Leerzustand ═════ */
.leerzustand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; }
.leerzustand .kreis { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb, 34, 211, 238), .1); color: var(--accent); margin-bottom: 8px; }
.leerzustand h3 { font-size: var(--fs-text); font-weight: 700; }
.leerzustand p { max-width: 60ch; font-size: var(--fs-klein); color: var(--text-muted); }
.leerzustand .knopf { margin-top: 8px; }

/* ═════ Formulare in Panels ═════ */
.formular-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 24px; }
.formular-raster .voll { grid-column: 1 / -1; }
@container p (min-width: 520px) { .formular-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.status-zeile { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px; font-size: var(--fs-klein); color: var(--text-muted); }
.regel-satz { margin-top: 16px; padding: 16px; border-radius: 12px; background: var(--kachel); border: 1px solid var(--border); font-size: var(--fs-klein); color: var(--text-muted); }
.regel-satz strong { color: var(--text); }

/* ═════ Meldungen oben rechts ═════ */
.meldungen { position: fixed; top: 16px; inset-inline-end: 16px; z-index: 120; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.meldung {
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 16px; font-size: var(--fs-klein);
  box-shadow: var(--panel-shadow); display: flex; gap: 12px; align-items: flex-start; animation: einblenden .2s ease;
}
.meldung.ok .icon { color: var(--gruen); }
.meldung.fehler { border-color: rgba(248, 113, 113, .5); }
.meldung.fehler .icon { color: var(--rot); }

/* ═════ Fenster und Seitenpanel ═════ */
.fenster-hg { position: fixed; inset: 0; z-index: 90; background: rgba(5, 7, 10, .62); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.fenster { width: 480px; max-width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); animation: einblenden .2s ease; }
.fenster.breit { width: 760px; }
.fenster-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border); }
.fenster-kopf h2 { font-size: var(--fs-titel); font-weight: 800; }
.fenster-kopf p { margin-top: 4px; font-size: var(--fs-klein); color: var(--text-muted); font-weight: 400; }
.fenster-inhalt { padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.fenster-fuss { display: flex; justify-content: flex-end; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--border); }
/* Seitenpanel: Fenster, das von rechts hereinkommt (Aus BusinessBoost One uebernehmen) */
.fenster-hg.seite { justify-content: flex-end; align-items: stretch; padding: 0; }
.fenster.seitenpanel { width: min(600px, 100vw); max-height: 100vh; height: 100%; border-radius: 0; border-block: 0; border-inline-end: 0; animation: panel-ein .22s ease; }
.fenster.seitenpanel .fenster-kopf { align-items: flex-start; padding: 24px 24px 16px; }
.fenster.seitenpanel .fenster-inhalt { flex: 1; }
.fenster.seitenpanel .fenster-kopf h2 { font-size: 20px; line-height: var(--zh-titel); }

.kontakt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kontakt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--kachel); cursor: pointer; transition: border-color .15s, background .15s; }
.kontakt:hover { border-color: var(--border-strong); }
.kontakt.gewaehlt { border-color: rgba(var(--accent-rgb, 34, 211, 238), .5); background: rgba(var(--accent-rgb, 34, 211, 238), .07); }
.kontakt.gesperrt { cursor: not-allowed; }
.kontakt.gesperrt:hover { border-color: var(--border); }
.kontakt.ohne-wahl { grid-template-columns: minmax(0, 1fr); cursor: default; }
.kontakt input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent-dunkel); cursor: inherit; }
.kontakt:focus-within { box-shadow: 0 0 0 3px var(--ring); }
.k-oben { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.k-name { font-weight: 700; }
.k-datum { font-size: var(--fs-klein); color: var(--text-muted); white-space: nowrap; }
.k-mail { font-size: var(--fs-klein); color: var(--text-muted); overflow-wrap: anywhere; }
.k-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; }
.kontakt.gesperrt .k-name, .kontakt.gesperrt .k-mail { color: var(--text-muted); }
.ergebnis-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.sp-werkzeug { display: flex; align-items: flex-end; gap: 8px 16px; flex-wrap: wrap; }
.sp-werkzeug .feld { flex: 1 1 220px; }
.sp-zaehler { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font-size: var(--fs-klein); color: var(--text-muted); }
.einladung { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--kachel); width: 100%; }
.einladung .haken { font-size: var(--fs-text); color: var(--text); font-weight: 600; cursor: pointer; }
.einladung .feld-hilfe { display: block; margin-top: 4px; font-weight: 400; }
.tag-auswahl { display: flex; flex-direction: column; gap: 2px; max-height: 190px; overflow-y: auto; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.tag-zeile { display: flex; gap: 12px; align-items: center; padding: 4px 8px; border-radius: 8px; cursor: pointer; font-size: var(--fs-klein); }
.tag-zeile:hover { background: rgba(255, 255, 255, .05); }
.tag-zeile[hidden] { display: none; }
.tag-zeile input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-dunkel); flex-shrink: 0; }

/* ═════ Anmeldung, Zustimmung und Platzhalterseiten der Rechtstexte ═════ */
.login-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-karte { width: 100%; max-width: 440px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 16px; box-shadow: var(--panel-shadow); padding: 32px 24px; display: flex; flex-direction: column; gap: 24px; animation: einblenden .25s ease; }
.login-marke { display: flex; justify-content: center; }
.login-marke .marke-name { font-size: 20px; }
.login-unter { text-align: center; color: var(--text-muted); margin-top: -12px; }
.login-info { color: var(--text-muted); text-align: center; font-size: var(--fs-klein); }
.login-links { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.login-karte .formular h2, .login-karte h2 { text-align: center; font-size: 20px; font-weight: 800; }
.erfolg-symbol { width: 52px; height: 52px; border-radius: 50%; background: rgba(52, 211, 153, .14); color: var(--gruen); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.zustimmung-version { color: var(--text-faded); font-size: var(--fs-klein); text-align: center; }
.login-karte.zustimmung-karte { max-width: 520px; padding: 32px; }
.zustimmung-karte .haken { font-size: var(--fs-text); color: var(--text); padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--kachel); cursor: pointer; align-items: center; gap: 16px; }
.zustimmung-karte .haken input { width: 22px; height: 22px; margin: 0; }
.zustimmung-karte .haken:has(input:checked) { border-color: rgba(var(--accent-rgb, 34, 211, 238), .5); background: rgba(var(--accent-rgb, 34, 211, 238), .07); }
.zustimmung-karte .haken a { text-decoration: underline; text-underline-offset: 3px; }
.zustimmung-karte .zustimmung-folgen { margin: 0; padding-left: 20px; color: var(--text-muted); font-size: var(--fs-klein); display: grid; gap: 6px; text-align: left; line-height: var(--zh-text); }
.zustimmung-karte .hinweis { margin: 4px 0; }
.vorab-hinweis { flex-wrap: wrap; }
.vorab-hinweis > div { flex: 1 1 260px; }
.zustimmung-karte .login-info { font-size: var(--fs-text); }
.login-karte.rechtstext { max-width: 560px; }
.rechtstext h1 { font-size: var(--fs-gross); font-weight: 800; text-align: center; }
.rechtstext p { color: var(--text-muted); line-height: var(--zh-text); }
.rechtstext .abzeichen { align-self: center; }
.rechtstext .hinweis { align-items: center; padding: 16px; }
/* erzeugte Rechtstexte der Anbieter (rechtliches/text.html) */
#afb-text-karte h2, #afb-text-karte h3 { font-weight: 700; text-align: start; margin: 16px 0 0; }
#afb-text-karte p { text-align: start; }
#afb-text-karte ul, #afb-text-karte ol { margin: 0; padding-inline-start: 24px; display: grid; gap: 6px; color: var(--text-muted); line-height: var(--zh-text); text-align: start; }
#afb-text-karte strong { color: var(--text); }

/* Vorschau der Rechtstexte und AV-Vertrag in der Verwaltung (Marktplatz M4): Bloecke wie auf text.html, im Fenster */
.vorschau-text { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid var(--border); min-width: 0; }
.vorschau-text:first-child { border-top: 0; padding-top: 0; }
.vorschau-text h3, .vorschau-text h4, .vorschau-text h5 { font-weight: 700; margin: 8px 0 0; overflow-wrap: anywhere; }
.vorschau-text p, .vorschau-text li { color: var(--text-muted); line-height: var(--zh-text); overflow-wrap: anywhere; }
.vorschau-text ul, .vorschau-text ol { margin: 0; padding-inline-start: 24px; display: grid; gap: 6px; }
.vorschau-text strong { color: var(--text); }
.vorschau-text .vorschau-titel { font-size: var(--fs-text); text-transform: none; color: var(--text); }
.vorschau-text .hinweis { margin-top: 4px; }

/* ═════ Code-Kaestchen (6 Ziffern) ═════ */
.code-kaesten { display: flex; justify-content: center; gap: 12px; margin: 4px 0; }
.code-kasten {
  width: 48px; height: 58px; padding: 0; text-align: center; font-size: 24px; font-weight: 700;
  font-variant-numeric: tabular-nums; border-radius: 12px; border: 1.5px solid var(--border-strong);
  background: rgba(255, 255, 255, .04); color: var(--text); caret-color: var(--accent); outline: none;
  transition: border-color .15s, box-shadow .15s; -moz-appearance: textfield;
}
.code-kasten:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.code-kasten.gefuellt { border-color: rgba(var(--accent-rgb, 34, 211, 238), .55); }
.code-kaesten.fehler .code-kasten { border-color: var(--rot); animation: wackeln .3s; }

/* ═════ Zwei-Faktor-Einrichtung und Wiederherstellungscodes ═════ */
.zf-einrichtung { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.zf-einrichtung form { margin-top: 0; }
.zf-geraet { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.zf-geraet .qr-box { padding: 6px; }
.zf-geraet .qr-box svg { width: 200px; height: 200px; }
.zf-schluessel { display: flex; flex-direction: column; gap: 8px; min-width: 220px; flex: 1; }
.schluessel-box { font-size: 16px; font-weight: 700; letter-spacing: .06em; color: var(--accent); background: rgba(255, 255, 255, .04); border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 16px; word-break: break-all; user-select: all; }
.zf-codes { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.codes-liste { list-style: none; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border-strong); border-radius: 12px; font-size: var(--fs-text); font-weight: 700; letter-spacing: .05em; max-width: 360px; }
.login-karte.pflicht-karte { max-width: 640px; }
.pflicht-titel { font-size: var(--fs-gross); font-weight: 800; text-align: center; }
.ub-fuss { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.ub-fuss .aktionen-gruppe { justify-content: flex-end; }
.ub-inhalt { display: flex; flex-direction: column; gap: 16px; }
.sp-leer { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: var(--fs-klein); border: 1px dashed var(--border-strong); border-radius: 12px; }
.leer-zeile { color: var(--text-muted); font-size: var(--fs-klein); }

/* ═════ Schmale Fenster: Seitenleiste wird zum Menue, untere Leiste fuer das Wichtigste ═════ */
@media (max-width: 959px) {
  :root { --rand: clamp(16px, 3vw, 28px); }
  .rahmen { display: block; }
  .seitenleiste {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 80; width: min(304px, 88vw); height: 100dvh;
    transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s;
    background: #12151b; box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  }
  html[dir="rtl"] .seitenleiste { transform: translateX(100%); }
  .seitenleiste.offen { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
  .hintergrund { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(5, 7, 10, .62); backdrop-filter: blur(4px); }
  .kopfzeile {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; z-index: 40;
    min-height: 56px; padding: 8px 16px; background: var(--glass); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--border);
  }
  .untenleiste {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60;
    padding-bottom: env(safe-area-inset-bottom); background: var(--glass); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--border);
  }
  .untenleiste a, .untenleiste button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 8px 4px;
    border: 0; background: none; color: var(--text-muted); font-size: var(--fs-mini); font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit;
  }
  .untenleiste a[aria-current="page"] { color: var(--accent); }
  .untenleiste a:hover, .untenleiste button:hover { color: var(--text); text-decoration: none; }
  .inhalt { padding-top: 16px; padding-bottom: 96px; }
  .meldungen { inset-block-start: 72px; }
}
@media (max-width: 719px) {
  :root { --rand: 16px; }
  .geld-raster { grid-template-columns: minmax(0, 1fr); }
  .geld-betrag { font-size: 36px; }
  .panel, .karte { padding: 16px; }
  .panel-tabelle { padding: 0; }
  .panel-tabelle > .panel-kopf { padding: 16px 16px 0; }
  .panel-tabelle > .panel-fuss { padding: 12px 16px 16px; }
  .kpi { padding: 16px; }
  .kpi-wert { font-size: 20px; }
  .link-gross { flex-direction: column; align-items: stretch; padding: 16px; }
  .link-gross .link-text { font-size: var(--fs-text); }
  .link-gross .knopf { width: 100%; }
  .schritt { grid-template-columns: 40px minmax(0, 1fr); }
  .schritt > .knopf, .schritt > .aktionen-gruppe, .schritt > a.knopf { grid-column: 1 / -1; }
  .aufgabe { grid-template-columns: 48px minmax(0, 1fr); }
  .aufgabe > .knopf, .aufgabe > .abzeichen { grid-column: 1 / -1; justify-self: start; }
  .zeilen > li { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .werkzeug { padding: 16px 16px 8px; }
  .filterleiste { padding: 16px; }
  .suche { max-width: none; flex-basis: 100%; }
  .umschalter button { min-height: 40px; }
  .tabelle-fuss, .seiten-nav { padding: 16px; }
  .kopf-aktionen { width: 100%; }
  .kopf-aktionen .knopf-primaer { flex: 1; }
  /* Am Handy steht das Symbol oben neben dem Titel statt mittig neben einem hohen Textblock */
  .hinweis { padding: 16px; gap: 12px; align-items: flex-start; }
  .hinweis > .icon { margin-top: 2px; }
  .mehr, .mehr2 { display: none !important; }
  .ereignis { grid-template-columns: 32px minmax(0, 1fr); }
  .ereignis time { grid-column: 2; }
  .fenster-kopf, .fenster-inhalt, .fenster-fuss { padding-inline: 16px; }
  .fenster.breit { width: 100%; }
  .ergebnis-kacheln { grid-template-columns: minmax(0, 1fr); }
  .login-karte.zustimmung-karte { padding: 24px 16px; }
  .qr-box svg { width: 160px; height: 160px; }
  .zf-geraet .qr-box svg { width: 180px; height: 180px; }
  .ghl-daten { grid-template-columns: 1fr; gap: 2px 0; }
  .ghl-daten dd { margin-bottom: 8px; }
  .eingabe-zeile { grid-template-columns: 1fr; }
  .angaben-raster { grid-template-columns: minmax(0, 1fr); }
  .konto-raster { grid-template-columns: minmax(0, 1fr); }
  .code-kaesten { gap: 6px; }
  .code-kasten { width: 40px; height: 50px; font-size: 20px; border-radius: 10px; }

  /* Tabellen als Karten: je Zeile ein Block, Spaltenname vor dem Wert */
  .tabelle-huelle { overflow-x: visible; }
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle, .tabelle tbody { display: block; }
  .tabelle tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 16px; padding: 16px; border-bottom: 1px solid var(--border); }
  .tabelle tbody tr:last-child { border-bottom: 0; }
  .tabelle td, .tabelle td:first-child, .tabelle td:last-child { white-space: normal; display: block; padding: 0; border: 0; grid-column: span 3; text-align: start; min-width: 0; }
  .tabelle td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-klein); font-weight: 600; color: var(--text-muted); }
  .tabelle td.breit, .tabelle td.erste, .tabelle td.erste:first-child { grid-column: 1 / -1; }
  .tabelle td.erste { font-weight: 700; }
  .tabelle td.erste::before { display: none; }
  .tabelle .betrag, .tabelle .rechts, .tabelle td.aktionen { text-align: start; }
  .tabelle td.aktionen .aktionen-gruppe { justify-content: flex-start; }
  .tabelle td.mono { white-space: nowrap; }
  /* Gruppenkopf: keine Karte, nur die Zeile mit dem Knopf */
  .tabelle .gruppe-kopf { display: block; padding: 0; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, .03); }
  .tabelle .gruppe-kopf th { display: block; padding: 0; border: 0; background: none; }
  .gruppe-knopf { padding: 12px 16px; }
  /* Sortier-Zelle: unten rechts in der Karte, Pfeile nebeneinander mit grossen Zielen */
  .tabelle td.sortzelle, .tabelle td.sortzelle:first-child { grid-column: 1 / -1; order: 20; width: auto; text-align: end; }
  .sortier-pfeile { flex-direction: row; gap: 8px; }
  .knopf-quadrat { min-width: 44px; min-height: 44px; }
  .tabelle td.sortzelle:empty { display: none; }
  .tabelle-gruppen .gruppe-zeilen tr:last-child { border-bottom: 1px solid var(--border); }
  .tabelle-gruppen .gruppe-zeilen:last-of-type tr:last-child { border-bottom: 0; }
  .tabelle-gruppen .gruppe-zeilen tr:last-child td, .tabelle-gruppen .gruppe-zeilen:last-of-type tr:last-child td { border-bottom: 0; }
  .tabelle tr.ziel-vor { box-shadow: inset 0 3px 0 var(--accent); }
  .tabelle tr.ziel-nach { box-shadow: inset 0 -3px 0 var(--accent); }
  .tabelle tr.ziel-vor td, .tabelle tr.ziel-nach td { box-shadow: none; }
  /* Provisionen: Programm und Betrag oben, Datum, Kunde und Status darunter */
  .t-prov td.c-programm { grid-column: 1 / 5; grid-row: 1; font-weight: 700; }
  .t-prov td.c-betrag { grid-column: 5 / 7; grid-row: 1; text-align: end; font-weight: 700; }
  .t-prov td.c-datum { grid-row: 2; grid-column: 1 / 4; }
  .t-prov td.c-kunde { grid-row: 2; grid-column: 4 / 7; }
  .t-prov td.c-art { grid-row: 3; grid-column: 1 / -1; }
  .t-prov td.c-status { grid-row: 4; grid-column: 1 / -1; }
  .t-prov td.c-betrag::before, .t-prov td.c-programm::before { display: none; }
  .t-prov td.c-datum::before, .t-prov td.c-kunde::before, .t-prov td.c-status::before, .t-prov td.c-art::before { content: none; }
  /* Top-Partner */
  .t-partner td.c-partner { grid-column: 1 / 5; grid-row: 1; font-weight: 700; }
  .t-partner td.c-umsatz { grid-column: 5 / 7; grid-row: 1; text-align: end; }
  .t-partner td.c-klicks, .t-partner td.c-kunden, .t-partner td.c-konv { grid-row: 2; grid-column: span 2; }
  .t-partner td.c-offen, .t-partner td.c-aus { grid-row: 3; grid-column: span 3; }
  .t-partner td.c-partner::before { display: none; }
  .t-partner td.c-umsatz::before { content: none; }
  .link-zelle { max-width: none; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  .kpis { gap: 8px; }
  .kpi { padding: 16px 8px; }
}
@media print { .seitenleiste, .untenleiste, .kopfzeile, .fenster-hg, .meldungen { display: none; } }
#konto-bereich > .hinweis { margin-bottom: 16px; }

/* Provisionen, die auf Bestaetigung warten (Verwaltung, Heute und Umsaetze) */
.pruefung-panel { border-color: rgba(240, 180, 41, .35); background: rgba(240, 180, 41, .06); margin-bottom: 16px; }
.pruefung-panel h2 { display: flex; align-items: center; gap: 8px; }
.pruefung-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pruefung-zeile { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.pruefung-text { flex: 1 1 280px; min-width: 0; display: grid; gap: 2px; }
.pruefung-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .pruefung-knoepfe { width: 100%; } .pruefung-knoepfe .knopf { flex: 1 1 auto; } }
/* Freigabe von Hand (Verwaltung, Umsaetze): Liste "Provisionen freigeben" mit Auswahl, Summe und Knopf fuer mehrere */
.frg-panel { margin-bottom: 16px; }
.frg-leiste { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid var(--border); }
.frg-summe { margin: 0; }
.tabelle th.frg-wahl, .tabelle td.frg-wahl { width: 40px; }
.frg-wahl input { width: 18px; height: 18px; accent-color: var(--accent-dunkel); }
.frg-streit { display: inline-block; margin-top: 4px; }
.frg-kachel .panel-kopf { align-items: center; }
@media (max-width: 640px) { .frg-leiste { padding: 12px 16px; } .frg-leiste .knopf { width: 100%; } }
/* Links je Programm, Partner-Empfehlung, Bestellungen aus BusinessBoost One */
.links-inhalt { display: flex; flex-direction: column; gap: 16px; }
.fenster-inhalt .zeilen { border: 1px solid var(--border); border-radius: 12px; background: var(--kachel); overflow: hidden; }
.fenster-inhalt .zeilen > li { padding: 12px 16px; }
.link-adresse { overflow-wrap: anywhere; color: var(--accent); }
/* Ziele eines Programms (Fenster): Knoepfe unter der Adresse statt daneben, sonst bricht die lange Adresse in einer schmalen Spalte Zeichen fuer Zeichen um */
.links-liste > li { grid-template-columns: minmax(0, 1fr); }
.kopier-zeile { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 8px 8px 8px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: rgba(255, 255, 255, .04); }
.kopier-text { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-klein); color: var(--accent); }
.ghl-daten .kopier-zeile { padding: 4px 4px 4px 12px; }
#funnel-karte .tipps { margin-top: 24px; }
.anleitung { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-klein); color: var(--text-muted); }
.anleitung li { padding-left: 4px; }
.anleitung li > span { display: block; margin-bottom: 8px; }
.anleitung li > span:last-child { margin-bottom: 0; }
.programm-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.programm-karte .link-liste { margin-top: 4px; }
.link-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.link-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 8px 8px 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, .03); }
.link-info { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.link-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.link-info .link-zelle { max-width: none; white-space: normal; overflow-wrap: anywhere; }
.neben-klein { font-size: var(--fs-klein); color: var(--text-muted); }
.stufe2-satz { display: flex; align-items: flex-start; gap: 8px; color: var(--accent); }
.stufe2-satz .icon { margin-top: 3px; flex-shrink: 0; }
.empfehlung-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; margin-top: 24px; }
.panel > .link-liste { margin-bottom: 0; }
.tipps-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-klein); color: var(--text-muted); }
.tipps-liste li { display: flex; align-items: flex-start; gap: 12px; }
.tipps-liste li .icon { color: var(--gruen); margin-top: 2px; flex-shrink: 0; }
.empfehlung-zeile { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--fs-klein); color: var(--accent); }
.panel > .hinweis.klein { margin-top: 16px; }
.eingabe[aria-invalid="true"] { border-color: var(--rot); }

/* ═════ Auszahlungen (Verwaltung): Zeile mit Konto, Ausfuehrungsdatum und Knopf, Hinweisleiste mit Umbruch ═════ */
.lauf-form { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: flex-end; margin-top: 16px; }
.lauf-form .feld { flex: 1 1 200px; max-width: 280px; }
.lauf-hilfe { margin-top: 8px; }
.lauf-aktionen { margin-top: 16px; }
.hinweis.umbruch { flex-wrap: wrap; }
.belege { display: flex; gap: 4px 12px; white-space: nowrap; }
.belege .link-knopf { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.belege .link-knopf:hover { text-decoration: underline; }
@media (min-width: 720px) {
  .t-lauf th, .t-lauf td { padding-inline: 12px; }
  .t-lauf th:first-child, .t-lauf td:first-child { padding-inline-start: 24px; }
  .t-lauf th:last-child, .t-lauf td:last-child { padding-inline-end: 24px; }
}
/* Name und Belegnummer: nicht mitten im Wort umbrechen ("Hoffman/n"), die Spalte bekommt eine Mindestbreite, die Nummer bleibt ganz */
.t-lauf td.erste { overflow-wrap: break-word; min-width: 160px; }
.t-lauf td.erste .mono { white-space: nowrap; }
@media (max-width: 719px) {
  .lauf-form .feld { max-width: none; flex-basis: 100%; }
  .lauf-form .knopf { width: 100%; }
}

/* ═════ Marke eines Kontos (Logo, Farbwahl, Vorschau) ═════ */
.logo-kachel.hat-bild { width: auto; background: none; box-shadow: none; border-radius: 0; }
.logo-kachel .logo-bild { display: block; height: 36px; width: auto; max-width: 140px; object-fit: contain; }
.farbe-zeile { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.farbwaehler { width: 56px; height: 40px; padding: 2px; border: 1px solid var(--border-strong); border-radius: 8px; background: rgba(255, 255, 255, .04); cursor: pointer; }
.farbe-zeile .eingabe { flex: 1 1 140px; max-width: 200px; }
.marke-vorschau { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.marke-logo-zeile { position: relative; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.marke-logo-bild { display: block; max-height: 56px; max-width: 200px; width: auto; padding: 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: rgba(255, 255, 255, .04); }
.marke-logo-zeile .datei-wahl { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.marke-logo-zeile .datei-wahl:focus-visible + .knopf { outline: 2px solid var(--accent); outline-offset: 2px; }
.adresse-liste { display: flex; flex-direction: column; gap: 16px; }
.adresse-block { display: flex; flex-direction: column; gap: 8px; }
.adresse-kopf { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.dns-raster { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; align-items: center; }
.dns-raster .feld-label { margin: 0; }
.adresse-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.zaehler-zeile { margin: 0 0 16px; font-size: var(--fs-klein); color: var(--text-muted); }
@media (max-width: 719px) {
  .dns-raster { grid-template-columns: minmax(0, 1fr); }
}

/* ═════ Impressum-Link im Fuss (Anmeldung und Seitenleiste) ═════ */
.fuss-links { margin: 0; text-align: center; font-size: var(--fs-klein); }
.fuss-links a { color: var(--text-faded); text-decoration: underline; text-underline-offset: 3px; }
.fuss-links a:hover { color: var(--text); }
.login-karte > .fuss-links { margin-top: -8px; }

/* ═════ Erklaerung zur Steuer im Formular der Angaben ═════ */
#angaben-steuerhinweis .hinweis { align-items: flex-start; }
#angaben-steuerhinweis .hinweis-text span { display: block; margin-top: 4px; line-height: var(--zh-text); }
#angaben-gebuehren { margin: 0 0 8px; line-height: var(--zh-text); }

/* ═════ Bedingungen und Zustimmung (Verwaltung) ═════ */
.bedingungen-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0; }
.bedingungen-zahlen > div { display: flex; flex-direction: column-reverse; gap: 4px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--kachel); }
.bedingungen-zahlen dt { color: var(--text-muted); font-size: var(--fs-klein); }
.bedingungen-zahlen dd { margin: 0; font-size: var(--fs-gross); font-weight: 700; font-variant-numeric: tabular-nums; }
.bedingungen-naechste { display: grid; gap: 16px; }
.bedingungen-naechste .aenderungen { white-space: pre-wrap; margin: 4px 0 0; color: var(--text-muted); line-height: var(--zh-text); }

/* ═════ Druck: Rechtstexte, Gutschriften und Auszahlungen schwarz auf weiss, ohne Bedienung ═════
   Der dunkle Hintergrund und die helle Schrift fallen weg (sonst druckt der Text hellgrau auf Weiss), Knoepfe, Navigation und Filter ebenso. */
@media print {
  :root {
    color-scheme: light; --bg: #fff; --surface: #fff; --surface-2: #fff; --border: #999; --border-strong: #666;
    --text: #000; --text-muted: #222; --text-faded: #333; --accent: #000; --panel: #fff; --panel-border: #999; --panel-shadow: none;
    --flare: none; --kachel: #fff; --glass: #fff; --rot: #000; --gruen: #000; --amber: #000; --violett: #000;
  }
  html, body { background: #fff; color: #000; }
  body::before { display: none; }
  .login-bg { display: block; min-height: 0; padding: 0; background: none; }
  .login-karte { max-width: none; border: 0; box-shadow: none; background: none; padding: 0; animation: none; }
  .rechtstext, .rechtstext h1, .rechtstext h2, .rechtstext p, .rechtstext li { color: #000; }
  .rechtstext a { color: #000; text-decoration: underline; }
  .login-links, .fuss-links, .segment, .knopf, .knopf-icon, .link-knopf, .umschalter, .seiten-nav, .belege, .sprung { display: none; }
  .rahmen { display: block; }
  .inhalt { padding: 0; }
  .panel, .karte { background: #fff; border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .tabelle-huelle { overflow: visible; }
  .tabelle th, .tabelle td { color: #000; border-bottom: 1px solid #999; }
  .tabelle tr { break-inside: avoid; }
  .abzeichen, .hinweis { background: none; color: #000; border-color: #666; }
  .hinweis .icon { color: #000; }
}

/* ═════ Hilfe je Seite (Plan 2026-10-21, Aufgabe 3) ═════
   Seitenpanel rechts, kein Fenster: die Seite dahinter bleibt bedienbar. Unter 768 px ein Blatt unten ueber die ganze Breite. */
.knopf-hilfe {
  width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-text); font-weight: 800; line-height: 1; cursor: pointer;
}
.knopf-hilfe:hover, .knopf-hilfe[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.hilfe-panel {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 85; width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); border-inline-start: 1px solid var(--border-strong); box-shadow: -18px 0 50px rgba(0, 0, 0, .4); animation: panel-ein .22s ease;
}
.hilfe-panel:focus { outline: none; }
.hilfe-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hilfe-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--a4); padding: var(--a5) var(--a5) var(--a4); border-bottom: 1px solid var(--border); }
.hilfe-ueber { font-size: var(--fs-klein); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.hilfe-kopf h2 { margin-top: var(--a1); font-size: 20px; font-weight: 800; line-height: var(--zh-titel); }
.hilfe-inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--a5); display: flex; flex-direction: column; gap: var(--a5); }
.hilfe-inhalt h3 { font-size: var(--fs-titel); font-weight: 700; margin-bottom: var(--a3); }
.hilfe-wozu { font-size: var(--fs-text); }
.hilfe-zurueck {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--a1); padding: 0; border: 0; background: none; color: var(--accent);
  font-size: var(--fs-klein); font-weight: 600; cursor: pointer;
}
.hilfe-zurueck .icon { transform: rotate(90deg); }
.hilfe-zurueck:hover { color: var(--accent-hover); text-decoration: underline; }
.hilfe-schritte { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: var(--a3); }
.hilfe-schritte li::marker { color: var(--accent); font-weight: 700; }
.hilfe-begriffe { margin: 0; display: flex; flex-direction: column; gap: var(--a3); }
.hilfe-begriffe > div { padding: var(--a3) var(--a4); border: 1px solid var(--border); border-radius: 12px; background: var(--kachel); }
.hilfe-begriffe dt { font-weight: 700; }
.hilfe-begriffe dd { margin: var(--a1) 0 0; font-size: var(--fs-klein); color: var(--text-muted); }
.hilfe-hinweis { display: flex; align-items: flex-start; gap: var(--a3); padding: var(--a3) var(--a4); border-radius: 12px; border: 1px solid var(--ring); background: rgba(var(--accent-rgb, 34, 211, 238), .07); font-size: var(--fs-klein); }
.hilfe-hinweis .icon { margin-top: 2px; color: var(--accent); }
.hilfe-mehr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--a2); }
.hilfe-mehr .knopf { width: 100%; justify-content: space-between; text-align: start; }
.hilfe-mehr .knopf .icon { transform: rotate(-90deg); }
@media (max-width: 767px) {
  .hilfe-panel {
    inset-block: auto 0; inset-inline: 0; width: auto; max-height: 85dvh; border-inline-start: 0; border-top: 1px solid var(--border-strong);
    border-radius: 16px 16px 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, .45); animation: blatt-ein .22s ease;
  }
  .hilfe-kopf { padding: var(--a4) var(--a4) var(--a3); }
  .hilfe-inhalt { padding: var(--a4); }
}
@keyframes blatt-ein { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@media print { .hilfe-panel, .knopf-hilfe { display: none; } }

/* ═════ Erste Schritte (Heute) ═════ */
.erste-liste { list-style: none; margin: var(--a4) 0; padding: 0; display: flex; flex-direction: column; gap: var(--a3); }
.erste-liste li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--a3); align-items: start; }
.erste-liste .haken-ok { color: var(--gruen); display: inline-flex; margin-top: 2px; }
.erste-liste .offen-punkt { width: 18px; height: 18px; margin: 2px 1px 0; border-radius: 50%; border: 1.5px solid var(--border-strong); }
.erste-liste .hinweis-punkt { color: var(--text-muted); display: inline-flex; margin-top: 2px; }
.erste-liste .erste-titel { font-weight: 600; }
.erste-liste li.ok .erste-titel { color: var(--text-muted); font-weight: 500; }
.erste-liste a.erste-titel, .erste-liste button.erste-titel { display: inline; padding: 0; border: 0; background: none; font-size: inherit; text-align: start; cursor: pointer; color: var(--accent); }
.erste-liste li.ok a.erste-titel { color: var(--text-muted); }
.erste-liste .erste-text { display: block; margin-top: var(--a1); font-size: var(--fs-klein); color: var(--text-muted); }
.erste-liste .erste-frei { margin-inline-start: var(--a2); font-size: var(--fs-mini); font-weight: 600; color: var(--text-faded); }
.erste-fuss { display: flex; flex-direction: column; gap: var(--a3); }

/* ═════ Vorschau "Als Partner ansehen": nicht entfernbarer Balken oben, die Seite rutscht darunter ═════ */
:root { --vb: 44px; }
.vorschau-balken {
  position: fixed; inset: 0 0 auto 0; z-index: 95; min-height: var(--vb); display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--a1) var(--a4); padding: var(--a2) var(--a4); background: var(--amber); color: #1b1300; font-size: var(--fs-klein); font-weight: 700; text-align: center;
}
.vorschau-balken a { color: inherit; text-decoration: underline; }
.vorschau-balken a:hover { color: inherit; }
body.vorschau { padding-top: var(--vb); }
body.vorschau .seitenleiste { inset-block-start: var(--vb); height: calc(100vh - var(--vb)); }
body.vorschau .meldungen { inset-block-start: calc(var(--vb) + 8px); }
body.vorschau .fenster-hg { inset-block-start: var(--vb); }
@media (min-width: 768px) { body.vorschau .hilfe-panel { inset-block-start: var(--vb); } }
@media (max-width: 959px) {
  body.vorschau .seitenleiste { inset-block-start: var(--vb); height: calc(100dvh - var(--vb)); }
  body.vorschau .kopfzeile { inset-block-start: var(--vb); }
  body.vorschau .hintergrund { inset-block-start: var(--vb); }
}
@media (max-width: 560px) { :root { --vb: 64px; } }

/* Marktplatz (Meilenstein M1): Angebotskarte. Liegt hier, weil auch die Verwaltung (Reiter Marktplatz) sie in der Vorschau zeigt und die Seite
   /marktplatz/ nur unter den Domains des Stammkontos ausgeliefert wird. Alles andere des Marktplatzes steht in /marktplatz/marktplatz.css. */
.mp-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.mp-karte { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.mp-bild { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-faded); border-bottom: 1px solid var(--panel-border); }
.mp-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-karte-inhalt { display: flex; flex-direction: column; gap: 8px; padding: 16px 24px 24px; flex: 1; }
.mp-anbieter { font-size: var(--fs-klein); color: var(--text-muted); }
.mp-kurz { font-size: var(--fs-klein); color: var(--text-muted); }
.mp-fakten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-klein); color: var(--text-muted); }
.mp-fakten .fett { color: var(--text); }
.mp-karte-fuss { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* Marktplatz, Verwaltung: Voraussetzungen und Freischaltung */
.mp-voraus { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mp-voraus li { display: flex; align-items: flex-start; gap: 12px; }
.mp-voraus .icon { margin-top: 2px; flex-shrink: 0; }
.mp-voraus .ok .icon { color: var(--gruen); }
.mp-voraus .fehlt .icon { color: var(--amber); }
.mp-voraus .feld-hilfe { display: block; }
.mp-freigabe { max-width: 480px; margin-top: 16px; }
.mp-vorschau { display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.mp-vorschau h3 { font-size: var(--fs-text); font-weight: 700; }

/* Einrichtung: Pruefliste fuer den Livegang (Marktplatz M2) */
#einr-rechtstexte { margin-top: 24px; }
.live-schalter { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* ═════ Anmeldung nach dem Anmelde-Standard der Boost-Tools (Dietmar 2026-11-07, docs/anmeldung-rollen.md) ═════
   Gleich in jedem Tool: BBO-Hintergrund, Logo oben links, Sprachwahl oben rechts, Glas-Karte mittig (max. 420 px), Fuss nur Impressum, Datenschutz,
   Hilfe. Das Tool behaelt nur Farbe (Verlauf) und Zeichen (Kachel). */
body.anm-body::before { display: none; }
.anm-seite {
  position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: #05070d url("/gemeinsam/bilder/hintergrund.webp") center / cover no-repeat;
}
.anm-seite::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(5, 7, 13, .72) 0%, rgba(5, 7, 13, .45) 60%, rgba(5, 7, 13, .3) 100%);
}
.anm-kopf { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.anm-logo { display: block; height: 26px; width: auto; }
.anm-sprachen { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(18, 21, 27, .7); border: 1px solid rgba(255, 255, 255, .1); }
.anm-sprachen button {
  border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  min-width: 36px; min-height: 28px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
}
.anm-sprachen button:hover { color: var(--text); }
.anm-sprachen button[aria-pressed="true"] { background: var(--verlauf); color: var(--auf-akzent); }
.anm-mitte { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.anm-karte {
  width: 100%; max-width: 420px; padding: 28px 26px; border-radius: 18px; display: flex; flex-direction: column; gap: 20px; min-width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)), rgba(18, 21, 27, .86);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: einblenden .25s ease;
}
.anm-tool { display: flex; align-items: center; gap: 10px; min-width: 0; }
.anm-tool .logo-kachel .icon { width: 20px; height: 20px; }
.anm-tool-name { font-size: 18px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anm-inhalt { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.anm-kopftext { display: flex; flex-direction: column; gap: 4px; }
.anm-titel { margin: 0; font-size: 22px; font-weight: 800; text-wrap: balance; }
.anm-unter { margin: 0; font-size: 14px; color: var(--text-muted); text-wrap: pretty; }
.anm-unter strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.anm-reiter { margin-bottom: 20px; background: rgba(255, 255, 255, .04); }
.anm-reiter .segment-knopf { padding: 8px 12px; min-width: 0; }
.anm-formular { gap: 20px; }
.anm-karte .formular { gap: 20px; }
.anm-karte .feld { gap: 6px; }
.anm-karte .feld-label { color: var(--text); font-size: 13px; font-weight: 600; }
.anm-karte .eingabe { height: 44px; min-height: 44px; border-radius: 10px; font-size: 15px; background: rgba(255, 255, 255, .04); }
.anm-karte .eingabe.anm-wc { text-align: center; font-size: 18px; letter-spacing: .1em; }
.anm-karte .knopf-voll { min-height: 44px; border-radius: 10px; font-size: 15px; }
.anm-karte .link-knopf { font-size: 14px; }
.anm-feld-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.anm-feld-kopf .link-knopf { font-size: 13px; }
.anm-pw { position: relative; }
.anm-pw .eingabe { padding-inline-end: 44px; }
.anm-auge {
  position: absolute; inset-inline-end: 6px; inset-block-start: 6px; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: none; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.anm-auge:hover, .anm-auge[aria-pressed="true"] { color: var(--text); }
.anm-haken { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); cursor: pointer; }
.anm-haken input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.anm-links { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; color: var(--text-muted); text-align: center; }
.anm-hinweis { margin: 0; text-align: center; font-size: 13px; color: var(--text-muted); text-wrap: balance; }
.anm-karte .code-kaesten { gap: 10px; }
.anm-karte .code-kasten { width: 46px; height: 56px; border-radius: 12px; }
.anm-karte .hinweis { padding: 12px 16px; gap: 12px; }
.anm-wahl-liste { display: grid; gap: 8px; }
.anm-wahl {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; text-align: start; width: 100%; min-width: 0;
  border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .03); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.anm-wahl:hover, .anm-wahl:focus-visible { border-color: var(--accent); background: rgba(255, 255, 255, .05); }
.anm-wahl-still { cursor: default; }
.anm-wahl-still:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, .03); }
.anm-wahl-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: var(--surface-2); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.anm-wahl-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.anm-wahl-text strong { font-size: 15px; overflow-wrap: anywhere; }
.anm-wahl-text span { font-size: 13px; color: var(--text-muted); }
.anm-wahl-text .anm-etikett { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.anm-wahl-liste .anm-haken { margin-top: 8px; }
.anm-fuss { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 16px 20px; font-size: 12px; }
.anm-fuss a, .anm-fuss-knopf { color: var(--text-muted); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.anm-fuss a:hover, .anm-fuss-knopf:hover { color: var(--text); text-decoration: none; }
@media (max-width: 420px) {
  .anm-kopf { padding: 12px 16px; }
  .anm-karte { padding: 24px 18px; }
  .anm-karte .code-kaesten { gap: 6px; }
  .anm-karte .code-kasten { width: 40px; height: 52px; font-size: 22px; }
}

/* Ansicht wechseln (Seitenleiste, nur bei mehr als einer Rolle): Klick auf die Person oeffnet das Menue ueber ihr */
.benutzer-knopf { position: relative; }
.benutzer-knopf .benutzer-pfeil { margin-inline-start: auto; color: var(--text-muted); transition: transform .15s; flex-shrink: 0; }
.benutzer-knopf[aria-expanded="true"] .benutzer-pfeil { transform: rotate(180deg); }
.ansicht-menue { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.ansicht-menue[hidden] { display: none; }
.ansicht-menue .am-titel { margin: 4px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faded); }
.ansicht-menue button, .ansicht-menue a {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; font-size: 14px; text-align: start; cursor: pointer;
}
.ansicht-menue button:hover, .ansicht-menue a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.ansicht-menue .am-rolle { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ansicht-menue .am-rolle small { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ansicht-menue .am-haken { margin-inline-start: auto; color: var(--accent); flex-shrink: 0; }
.ansicht-menue .am-trenner { height: 1px; margin: 6px 4px; background: var(--border); }

/* Programme je Partner (Zuordnung) im aufgeklappten Partner */
.pl-details > .pl-block-voll { grid-column: 1 / -1; }
.zuord-liste, .zuord-verlauf { list-style: none; margin: 8px 0 0; padding: 0; }
.zuord-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.zuord-zeile:first-child { border-top: 0; }
.zuord-haupt { flex: 1 1 260px; min-width: 0; }
.zuord-verlauf-huelle { flex: 1 0 100%; }
.zuord-verlauf li { padding: 6px 0; font-size: var(--fs-klein); color: var(--text-muted); }

/* Partner zuweisen: lange Liste scrollt im Fenster, nicht die Seite */
.zuweisen-liste { max-height: 320px; }
.zuweisen-zeile .zuweisen-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.zuweisen-schalter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }