/* Kundenpanel · Prototyp
   Leitbild: von kalt zu heiß. Die Oberfläche bleibt kühl und einfarbig,
   Farbe trägt nur eine Bedeutung: wie warm ein Lead ist (Frost bis Glut).
   Handlungen sind Tinte (Schwarz im Hellmodus, Weiß im Dunkelmodus). */

/* ---------- Tokens ---------- */
:root {
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Temperatur, in beiden Modi gleich */
  --frost: #7FA6D1;
  --kuehl: #A9B9C9;
  --lau: #E9B44C;
  --glut: #FF5A1F;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --sidebar: 240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

:root,
[data-theme="hell"] {
  color-scheme: light;
  --bg: #F2F4F7;
  --flaeche: #FFFFFF;
  --flaeche-2: #F7F8FA;
  --flaeche-3: #ECEFF3;
  --rand: #DEE3EA;
  --rand-stark: #C9D0DA;
  --text: #0F131A;
  --text-2: #4E5868;
  --text-3: #6E7888;
  --tinte: #0F131A;
  --tinte-text: #FFFFFF;
  --glut-text: #B93A0C;
  --glut-flaeche: #FFF0E8;
  --frost-text: #2F5E91;
  --frost-flaeche: #EAF1F9;
  --lau-text: #8A5A00;
  --lau-flaeche: #FDF4E1;
  --fehler: #C21F4B;
  --fehler-flaeche: #FDECF1;
  --gut: #1F7A55;
  --gut-flaeche: #E6F4EE;
  --fokus: #2F5E91;
  --schatten: 0 1px 2px rgba(15, 19, 26, .06), 0 8px 24px -12px rgba(15, 19, 26, .12);
}

[data-theme="dunkel"] {
  color-scheme: dark;
  --bg: #0B0E13;
  --flaeche: #12161D;
  --flaeche-2: #171C24;
  --flaeche-3: #1E242E;
  --rand: #242B36;
  --rand-stark: #323B48;
  --text: #E9EDF2;
  --text-2: #A3ADBB;
  --text-3: #8A94A3;
  --tinte: #E9EDF2;
  --tinte-text: #0B0E13;
  --glut-text: #FF7A45;
  --glut-flaeche: #2A160E;
  --frost-text: #9EC1E8;
  --frost-flaeche: #142131;
  --lau-text: #F0C46A;
  --lau-flaeche: #2A2111;
  --fehler: #FF6B8B;
  --fehler-flaeche: #2B121A;
  --gut: #5BD19C;
  --gut-flaeche: #0F2219;
  --fokus: #9EC1E8;
  --schatten: none;
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--glut); color: #fff; }
.zahl, .mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.visuell-versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Rahmen ---------- */
.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.app.ohne-leiste { grid-template-columns: 1fr; }

.leiste {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 12px;
  border-right: 1px solid var(--rand);
  background: var(--flaeche);
}
.marke { display: flex; align-items: center; gap: 10px; padding: 6px 6px 18px; text-decoration: none; color: var(--text); }
.marke-zeichen { flex: none; display: block; }
.marke-name { display: block; line-height: 1.1; }
.marke-wort {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.035em;
  font-variation-settings: "wdth" 88; white-space: nowrap;
}
.marke-wort sup {
  font-family: var(--font-data); font-weight: 500; font-size: .56em; letter-spacing: 0;
  color: var(--glut-text); vertical-align: 0; position: relative; top: -.62em; margin-left: 1px;
}
.marke-name small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 11.5px; color: var(--text-3); letter-spacing: 0; margin-top: 2px; }

.firmenwahl {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 10px; margin-bottom: 10px;
  border: 1px solid var(--rand); border-radius: var(--radius-m);
  background: var(--flaeche-2); cursor: pointer; text-align: left;
}
.firmenwahl strong { display: block; font-weight: 600; font-size: 13px; }
.firmenwahl span { font-size: 12px; color: var(--text-3); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px;
  text-decoration: none; color: var(--text-2); font-weight: 500;
}
.nav a:hover { background: var(--flaeche-3); color: var(--text); }
.nav a[aria-current="page"] { background: var(--flaeche-3); color: var(--text); }
.nav a[aria-current="page"] svg { color: var(--text); }
.nav svg { width: 17px; height: 17px; color: var(--text-3); flex: none; }
.nav .zaehler {
  margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px;
  font-family: var(--font-data); font-size: 11px; line-height: 20px; text-align: center;
  background: var(--glut); color: #fff;
}
.nav-trenner { height: 1px; background: var(--rand); margin: 10px 4px; }

.leiste-fuss { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.betreuer {
  display: flex; gap: 10px; align-items: center; padding: 10px;
  border: 1px solid var(--rand); border-radius: var(--radius-m);
}
.betreuer .avatar { width: 32px; height: 32px; }
.betreuer strong { display: block; font-size: 13px; font-weight: 600; }
.betreuer a { font-size: 12px; color: var(--text-2); }

/* ---------- Farbmodus-Pille (modus.js) ----------
   Zeiger gleitet mit leichtem Überschwingen; das gewählte Icon springt nach einem Klick. */
.modus-pille {
  --k: 34px; position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; width: max-content;
  border: 1px solid var(--rand); background: color-mix(in srgb, var(--flaeche-2) 80%, transparent); backdrop-filter: blur(8px);
}
.modus-pille button {
  position: relative; z-index: 1; display: grid; place-items: center; width: var(--k); height: var(--k); padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--text-3); cursor: pointer; transition: color .25s var(--ease);
}
.modus-pille button:hover { color: var(--text-2); }
.modus-pille button[aria-checked="true"] { color: var(--text); }
.modus-pille button:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.modus-pille svg { width: 18px; height: 18px; }
.modus-pille-zeiger {
  position: absolute; left: 4px; top: 4px; width: var(--k); height: var(--k); border-radius: 50%;
  background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--rand-stark), 0 2px 8px -2px rgba(0, 0, 0, .45);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
[data-theme="hell"] .modus-pille-zeiger { background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--rand), 0 2px 6px -2px rgba(15, 19, 26, .25); }
.modus-pille[data-aktiv="hell"] .modus-pille-zeiger { transform: translateX(calc(var(--k) + 2px)); }
.modus-pille[data-aktiv="dunkel"] .modus-pille-zeiger { transform: translateX(calc(2 * var(--k) + 4px)); }
.modus-pille [data-modus-wahl="hell"][aria-checked="true"] { color: var(--lau-text); }
[data-theme="dunkel"] .modus-pille [data-modus-wahl="hell"][aria-checked="true"] { color: var(--lau); }
.modus-pille [data-modus-wahl="system"].springt svg { animation: modus-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
.modus-pille [data-modus-wahl="hell"].springt svg { animation: modus-sonne .7s cubic-bezier(.34, 1.56, .64, 1); }
.modus-pille [data-modus-wahl="dunkel"].springt svg { animation: modus-mond .7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes modus-pop { 0% { transform: scale(.6); } 100% { transform: none; } }
@keyframes modus-sonne { 0% { transform: rotate(-120deg) scale(.5); } 100% { transform: none; } }
@keyframes modus-mond { 0% { transform: rotate(50deg) scale(.6); } 60% { transform: rotate(-12deg) scale(1.08); } 100% { transform: none; } }
/* Kreis-Übergang beim Schemawechsel: kein Überblenden, nur die Maske aus modus.js */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) { .modus-pille-zeiger { transition: none; } .modus-pille .springt svg { animation: none !important; } }
.leiste-modus { margin-top: 2px; }
.ob-modus { margin-top: auto; }
.anmelde-modus.modus-pille { position: fixed; top: 16px; right: 16px; width: max-content; z-index: 2; }
.modus {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 3px; border-radius: 9px; background: var(--flaeche-3);
}
.modus button {
  border: 0; background: none; padding: 5px 0; border-radius: 7px;
  font-size: 12px; color: var(--text-2); cursor: pointer;
}
.modus button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); }
[data-theme="dunkel"] .modus button[aria-pressed="true"] { background: var(--rand-stark); }

.haupt { min-width: 0; }
.seite { max-width: 1240px; margin: 0 auto; padding: 4px 36px 64px; }
.seite.breit { max-width: none; padding: 0; height: calc(100vh - 62px); }
/* Werkzeugleiste oben rechts: eigene Zeile, damit sie nie Knöpfe im Seitenkopf verdeckt */
.werkzeuge { display: flex; justify-content: flex-end; align-items: center; gap: 8px; height: 62px; padding: 0 28px; }
.werkzeug-gruppe {
  display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;
  border: 1px solid var(--rand); background: color-mix(in srgb, var(--flaeche-2) 80%, transparent);
}
.werkzeug-knopf {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--text-3); cursor: pointer; transition: color .2s var(--ease), background-color .2s var(--ease);
}
.werkzeug-knopf:hover, .werkzeug-knopf[aria-current="page"] { color: var(--text); background: var(--flaeche-3); }
.werkzeug-knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.werkzeug-knopf svg { width: 18px; height: 18px; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.werkzeug-knopf.zahnrad:hover svg { transform: rotate(75deg); }
.werkzeug-knopf span { display: none; }
/* Seitenleiste: zwei gleich breite Knöpfe mit Beschriftung unter dem Betreuer */
.leiste-konto { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-radius: 12px; width: 100%; box-sizing: border-box; }
.leiste-konto .werkzeug-knopf { display: flex; gap: 6px; justify-content: center; min-width: 0; width: auto; height: 34px; padding: 0 6px; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; }
.leiste-konto .werkzeug-knopf span { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leiste-konto .werkzeug-knopf svg { width: 15px; height: 15px; flex: none; }
.werkzeuge .nur-mobil { display: none; }
.demo-hinweis { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.demo-hinweis .chip { flex: none; }
.demo-zurueck { font-size: 13px; color: var(--text-2); text-underline-offset: 3px; white-space: nowrap; }
.demo-zurueck:hover { color: var(--text); }
.werkzeug-knopf.abmelden .pfeil { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.werkzeug-knopf.abmelden:hover { color: var(--glut-text); }
[data-theme="dunkel"] .werkzeug-knopf.abmelden:hover { color: var(--glut); }
.werkzeug-knopf.abmelden:hover .pfeil { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .werkzeug-knopf svg, .werkzeug-knopf .pfeil { transition: none; } }

.kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.kopf h1 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 1.1; letter-spacing: -.03em;
  font-variation-settings: "wdth" 88;
}
.kopf p { margin: 6px 0 0; color: var(--text-2); }
.kopf-aktionen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Bausteine ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--rand-stark); background: var(--flaeche);
  font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; text-decoration: none; color: var(--text);
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s;
}
.knopf:hover { background: var(--flaeche-3); }
.knopf:active { transform: translateY(1px); }
.knopf svg { width: 15px; height: 15px; }
.knopf.primaer { background: var(--tinte); border-color: var(--tinte); color: var(--tinte-text); }
.knopf.primaer:hover { opacity: .88; }
.knopf.still { border-color: transparent; background: none; color: var(--text-2); }
.knopf.still:hover { background: var(--flaeche-3); color: var(--text); }
.knopf.gefahr { color: var(--fehler); }
.knopf.klein { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
kbd {
  font-family: var(--font-data); font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
  border: 1px solid currentColor; opacity: .55;
}

.karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-l);
  box-shadow: var(--schatten);
}
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0; }
.karte-kopf h2, .abschnitt-titel {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--text-2);
}
.karte-inhalt { padding: 14px 18px 18px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--flaeche-3); color: var(--text-2);
}
.chip svg { width: 12px; height: 12px; }
.chip.hot { background: var(--glut-flaeche); color: var(--glut-text); }
.chip.frost { background: var(--frost-flaeche); color: var(--frost-text); }
.chip.lau { background: var(--lau-flaeche); color: var(--lau-text); }
.chip.gut { background: var(--gut-flaeche); color: var(--gut); }
.chip.fehler { background: var(--fehler-flaeche); color: var(--fehler); }
.chip.umriss { background: none; border: 1px solid var(--rand-stark); }

.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; }
.status svg { width: 13px; height: 13px; }
.status.laeuft { color: var(--gut); }
.status.pausiert { color: var(--lau-text); }
.status.pruefung { color: var(--frost-text); }
.status.fehler { color: var(--fehler); }
.status small { display: block; font-weight: 400; color: var(--text-3); }

.segment {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px;
  background: var(--flaeche-3);
}
.segment button {
  border: 0; background: none; height: 28px; padding: 0 11px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer;
}
.segment button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); }
[data-theme="dunkel"] .segment button[aria-pressed="true"] { background: var(--rand-stark); }

.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label, .feld .etikett { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.feld .hilfe { font-size: 12px; color: var(--text-3); }
.eingabe, textarea.eingabe, select.eingabe {
  width: 100%; min-height: 38px; padding: 8px 11px; border-radius: 9px;
  border: 1px solid var(--rand-stark); background: var(--flaeche);
}
textarea.eingabe { resize: vertical; line-height: 1.55; }
.eingabe:focus { outline: none; border-color: var(--fokus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 22%, transparent); }
.raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  background: var(--flaeche-3); color: var(--text-2);
}

.banner {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 18px;
  border-radius: var(--radius-m); border: 1px solid; font-size: 13.5px;
}
.banner svg { width: 18px; height: 18px; flex: none; }
.banner .knopf { margin-left: auto; }
.banner.warnung { background: var(--lau-flaeche); border-color: color-mix(in srgb, var(--lau) 45%, transparent); color: var(--lau-text); }
.banner.warnung strong { color: var(--text); }
.banner.fehler { background: var(--fehler-flaeche); border-color: color-mix(in srgb, var(--fehler) 35%, transparent); color: var(--fehler); }
.banner p { margin: 0; color: var(--text-2); }

.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th {
  text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-3);
  padding: 10px 14px; border-bottom: 1px solid var(--rand); white-space: nowrap;
}
.tabelle td { padding: 13px 14px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr { transition: background .12s; }
.tabelle tbody tr:hover { background: var(--flaeche-2); }
.tabelle .rechts { text-align: right; }
.tabelle td.zahl { font-size: 13px; }

.trenner { height: 1px; background: var(--rand); border: 0; margin: 18px 0; }
.leise { color: var(--text-3); }
.klein { font-size: 12px; }

/* Auswahl: eigenes Dropdown, das native select bleibt unsichtbar dahinter */
.auswahl-huelle { position: relative; display: block; min-width: 0; }
.auswahl {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; cursor: pointer; white-space: nowrap;
}
.auswahl .wert { overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; }
.auswahl > svg { width: 15px; height: 15px; flex: none; color: var(--text-3); transition: transform .15s var(--ease); }
.auswahl:hover { border-color: var(--text-3); }
.auswahl[aria-expanded="true"] { border-color: var(--fokus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 22%, transparent); }
.auswahl[aria-expanded="true"] > svg { transform: rotate(180deg); }
.auswahl-menue {
  position: fixed; z-index: 100; max-height: 300px; overflow-y: auto; padding: 4px;
  background: var(--flaeche); border: 1px solid var(--rand-stark); border-radius: 11px;
  box-shadow: 0 2px 6px rgba(15, 19, 26, .06), 0 18px 40px -14px rgba(15, 19, 26, .28);
  animation: aufklappen .14s var(--ease);
}
.auswahl-menue.nach-oben { animation-name: aufklappen-oben; }
.auswahl-menue:focus-visible { outline: none; } /* der Fokus zeigt sich an der markierten Option */
[data-theme="dunkel"] .auswahl-menue { background: var(--flaeche-2); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-4px); } }
@keyframes aufklappen-oben { from { opacity: 0; transform: translateY(4px); } }
.auswahl-option {
  display: grid; grid-template-columns: 1fr 16px; gap: 10px; align-items: center;
  padding: 7px 9px 7px 10px; border-radius: 7px; font-size: 13px; cursor: pointer; color: var(--text-2);
}
.auswahl-option .text { display: flex; align-items: center; gap: 8px; min-width: 0; }
.auswahl-option .text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auswahl-option svg { width: 15px; height: 15px; visibility: hidden; color: var(--text); }
.auswahl-option[aria-selected="true"] { color: var(--text); font-weight: 600; }
.auswahl-option[aria-selected="true"] svg { visibility: visible; }
.auswahl-option.aktiv { background: var(--flaeche-3); color: var(--text); }
[data-theme="dunkel"] .auswahl-option.aktiv { background: var(--rand); }
.auswahl-trenner { height: 1px; margin: 4px 6px; background: var(--rand); }
.punkt-farbe { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* Schalter */
.schalter { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; }
.schalter input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.schalter span {
  position: absolute; inset: 0; border-radius: 20px; background: var(--rand-stark);
  transition: background .2s var(--ease); pointer-events: none;
}
.schalter span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .2s var(--ease);
}
.schalter input:checked + span { background: var(--tinte); }
[data-theme="dunkel"] .schalter input:checked + span::after { background: var(--tinte-text); }
.schalter input:checked + span::after { transform: translateX(16px); }
.schalter input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* ---------- Temperatur: das Erkennungszeichen ---------- */
.waerme {
  /* --w: 0 (kalt) bis 1 (glühend) */
  --farbe: color-mix(in oklab, var(--frost) calc((1 - var(--w)) * 100%), var(--glut));
}
.waermeleiste {
  position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--farbe);
}
.waermeleiste.gluehend { box-shadow: 0 0 12px 1px color-mix(in srgb, var(--glut) 55%, transparent); }

.thermometer { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.thermometer i { width: 3px; border-radius: 1px; background: var(--rand-stark); }
.thermometer i:nth-child(1) { height: 5px; }
.thermometer i:nth-child(2) { height: 8px; }
.thermometer i:nth-child(3) { height: 11px; }
.thermometer i:nth-child(4) { height: 14px; }
.thermometer i.an { background: var(--farbe); }

.glutlinie {
  position: relative; height: 92px; margin-top: 8px;
  border-radius: var(--radius-m);
  background:
    linear-gradient(to top, color-mix(in srgb, var(--glut) 7%, transparent), transparent 70%),
    repeating-linear-gradient(to right, var(--rand) 0 1px, transparent 1px calc(100% / var(--spalten, 30)));
}
.glutlinie .funke {
  position: absolute; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 2px 2px 0 0;
  background: var(--farbe); transform-origin: bottom; animation: steigen .7s var(--ease) both;
}
.glutlinie .funke.gluehend::after {
  content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: var(--glut);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--glut) 25%, transparent), 0 0 16px 2px color-mix(in srgb, var(--glut) 60%, transparent);
}
@keyframes steigen { from { transform: scaleY(0); } }
.glutlinie-achse { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--text-3); }
.skala { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-3); }
.skala-balken { width: 90px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--frost), var(--kuehl), var(--lau), var(--glut)); }

/* ---------- Übersicht ---------- */
.uebersicht { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.uebersicht > .s-12 { grid-column: span 12; }
.uebersicht > .s-8 { grid-column: span 8; }
.uebersicht > .s-4 { grid-column: span 4; }
.uebersicht > .s-7 { grid-column: span 7; }
.uebersicht > .s-5 { grid-column: span 5; }

.glut-karte { padding: 20px 22px 18px; }
.glut-karte .glut-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.glut-wert { display: flex; align-items: baseline; gap: 10px; }
.glut-wert .zahl { font-size: 46px; line-height: 1; font-weight: 500; color: var(--glut-text); letter-spacing: -.04em; }
.glut-wert span { font-size: 15px; font-weight: 600; }
.glut-unter { margin-top: 6px; color: var(--text-2); font-size: 13px; }

.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rand); margin-top: 18px; }
.kennzahl { padding: 14px 16px 2px 0; }
.kennzahl + .kennzahl { padding-left: 16px; border-left: 1px solid var(--rand); }
.kennzahl dt { font-size: 12px; color: var(--text-3); font-weight: 500; }
.kennzahl dd { margin: 4px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kennzahl .zahl { font-size: 22px; font-weight: 500; }
.trend { font-family: var(--font-data); font-size: 11.5px; color: var(--text-3); }
.trend.auf { color: var(--gut); }
.trend.ab { color: var(--fehler); }
.kennzahl .neben { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.budget-wert { display: flex; align-items: baseline; justify-content: space-between; }
.budget-wert .zahl { font-size: 30px; font-weight: 500; letter-spacing: -.03em; }
/* Regler: eigene Spur und eigener Griff. --wert (0–100 %) füllt die Spur bis zum Griff. */
.regler {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 22px; margin: 0; padding: 0; background: none; cursor: pointer;
  --wert: 50%;
}
.regler::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--tinte) 0 var(--wert), var(--flaeche-3) var(--wert) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rand-stark) 60%, transparent);
}
.regler::-moz-range-track { height: 6px; border-radius: 3px; background: var(--flaeche-3); }
.regler::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--tinte); }
.regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: var(--flaeche); border: 2px solid var(--tinte);
  box-shadow: 0 1px 3px rgba(15, 19, 26, .18), 0 0 0 0 color-mix(in srgb, var(--tinte) 15%, transparent);
  transition: box-shadow .15s var(--ease), transform .1s var(--ease);
}
.regler::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--flaeche); border: 2px solid var(--tinte);
  box-shadow: 0 1px 3px rgba(15, 19, 26, .18);
}
.regler:hover::-webkit-slider-thumb { box-shadow: 0 1px 3px rgba(15, 19, 26, .18), 0 0 0 6px color-mix(in srgb, var(--tinte) 10%, transparent); }
.regler:active::-webkit-slider-thumb { transform: scale(1.08); }
.regler:focus { outline: none; }
.regler:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--flaeche), 0 0 0 5px var(--fokus); }
.regler:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--flaeche), 0 0 0 5px var(--fokus); }
[data-theme="dunkel"] .regler::-webkit-slider-thumb { background: var(--tinte); border-color: var(--tinte); }
[data-theme="dunkel"] .regler::-moz-range-thumb { background: var(--tinte); border-color: var(--tinte); }

/* Betragsregler: Spur aus flimmernden Kästchen (Leinwand), Stufen als Punkte,
   hoher Griff. Nachbau von components/ui/amount-slider.tsx ohne React. */
.betrag-regler {
  position: relative; display: flex; align-items: center; height: 40px;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; outline: none;
}
.betrag-spur {
  position: relative; display: block; width: 100%; height: 36px; overflow: hidden;
  border-radius: 9px; background: var(--flaeche-3); color: var(--tinte);
}
[data-theme="dunkel"] .betrag-spur { background: var(--flaeche-3); }
.betrag-spur canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.betrag-stopp {
  position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 30%, transparent); transition: background .2s; pointer-events: none;
}
.betrag-stopp.an { background: var(--text); }
.betrag-griff {
  position: absolute; top: 0; width: 24px; height: 40px; border-radius: 9px;
  background: var(--tinte); cursor: grab;
  box-shadow: 0 2px 6px rgba(15, 19, 26, .2), 0 0 0 0 transparent;
  transition: box-shadow .3s var(--ease), left .12s var(--ease);
}
.betrag-griff::after {
  /* Griffrillen, damit der Griff als ziehbar erkennbar ist */
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 12px; margin: -6px 0 0 -3px;
  background: linear-gradient(90deg, var(--tinte-text) 0 1.5px, transparent 1.5px 4.5px, var(--tinte-text) 4.5px 6px);
  opacity: .5; border-radius: 1px;
}
.betrag-regler.zieht .betrag-griff { cursor: grabbing; transition: box-shadow .3s var(--ease); }
.betrag-regler:hover .betrag-griff { box-shadow: 0 2px 6px rgba(15, 19, 26, .2), 0 0 0 3px color-mix(in srgb, var(--fokus) 30%, transparent); }
.betrag-regler:focus-visible .betrag-griff { box-shadow: 0 2px 6px rgba(15, 19, 26, .2), 0 0 0 3px var(--fokus); }
[data-theme="dunkel"] .betrag-griff { box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }

/* Rollende Ziffern: eine Spalte je Stelle, die neue Ziffer rollt ein */
.betrag-kopf { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.betrag-anzeige {
  display: inline-flex; align-items: baseline; font-family: var(--font-data); font-weight: 500;
  font-size: 40px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.rolle { display: inline-flex; }
.ziffer { position: relative; display: inline-block; width: .62em; height: 1em; overflow: hidden; line-height: 1; }
.ziffer-band { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.ziffer-band span { display: flex; align-items: center; justify-content: center; height: 1em; }
.rolle-einheit { margin-left: .14em; }
.betrag-kopf .neben { margin-top: 3px; font-size: 13px; color: var(--text-3); line-height: 1.35; }
.betrag-kopf .neben strong { display: block; color: var(--text-2); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ziffer-band, .betrag-griff { transition: none; } }

.regler-feld { margin: 16px 0 4px; }
.regler-skala {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: var(--font-data); font-size: 11px; color: var(--text-3);
}
/* Stufenregler: Punkte auf der Spur und Beschriftung je Stufe */
.stufen { position: relative; }
.stufen-punkte { position: absolute; left: 7px; right: 7px; top: 8px; height: 6px; display: flex; justify-content: space-between; pointer-events: none; }
.stufen-punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); opacity: .55; }
.stufen-punkte i.an { background: var(--tinte-text); opacity: 1; }
/* Namen sitzen genau unter der Mitte des Griffs: Spur läuft von 10 px bis Breite − 10 px */
.stufen-namen { position: relative; height: 18px; margin-top: 6px; font-size: 12px; color: var(--text-3); }
.stufen-namen span { position: absolute; top: 0; left: calc(10px + (100% - 20px) * var(--p)); transform: translateX(-50%); white-space: nowrap; }
.stufen-namen span:first-child { transform: none; left: 0; }
.stufen-namen span:last-child { transform: none; left: auto; right: 0; }
.stufen-namen span.an { color: var(--text); font-weight: 600; }
.budget-zeilen { display: grid; gap: 8px; margin: 12px 0 16px; font-size: 13px; }
.budget-zeilen div { display: flex; justify-content: space-between; }
.budget-zeilen dt { color: var(--text-2); }
.budget-zeilen dd { margin: 0; }
.verbrauch { height: 3px; border-radius: 2px; background: var(--flaeche-3); overflow: hidden; margin-top: -2px; }
.verbrauch i { display: block; height: 100%; background: var(--text-3); border-radius: 2px; transition: width .2s var(--ease); }

.liste-kompakt { list-style: none; margin: 0; padding: 0; }
.liste-kompakt li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 18px 12px 20px; border-top: 1px solid var(--rand); }
.liste-kompakt li:first-child { border-top: 0; }
.liste-kompakt a.zeile { position: absolute; inset: 0; }
.liste-kompakt .titel { font-weight: 600; }
.liste-kompakt .text { color: var(--text-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.liste-kompakt .zeit { margin-left: auto; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

.protokoll { list-style: none; margin: 0; padding: 0; }
.protokoll li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; padding: 11px 0; border-top: 1px solid var(--rand); }
.protokoll li:first-child { border-top: 0; padding-top: 0; }
.protokoll svg { width: 16px; height: 16px; color: var(--text-3); margin-top: 2px; }
.protokoll strong { font-weight: 600; }
.protokoll p { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.protokoll time { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

.tracker { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.tracker li { position: relative; padding: 16px 16px 4px 0; }
.tracker li::before { content: ""; position: absolute; top: 5px; left: 12px; right: 0; height: 2px; background: var(--rand); }
.tracker li.fertig::before { background: var(--tinte); }
.tracker li:last-child::before { display: none; }
.tracker .punkt { position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--rand-stark); background: var(--flaeche); }
.tracker li.fertig .punkt { background: var(--tinte); border-color: var(--tinte); }
.tracker li.aktiv .punkt { border-color: var(--glut); box-shadow: 0 0 0 4px color-mix(in srgb, var(--glut) 20%, transparent); }
.tracker strong { display: block; font-size: 13px; margin-top: 8px; }
.tracker span { font-size: 12px; color: var(--text-3); }

/* ---------- Übersicht (Aufbau: Hinweis, Guthaben + Budget, Leistung, Kampagnen, Antworten) ---------- */
.ue-hinweis { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 18px; margin-bottom: 16px; }
.ue-hinweis h2 { margin: 0; font-size: 15px; font-weight: 700; }
.ue-hinweis p { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.ue-hinweis .kopf-aktionen { margin-left: auto; flex: none; }
.ue-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--lau); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--lau) 22%, transparent); }

.ue-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 30px; }
.guthaben-karte { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 20px 20px 132px; overflow: hidden; }
.guthaben-karte h2 { margin: 0; font-size: 16px; font-weight: 700; }
.guthaben-karte p { margin: 3px 0 0; color: var(--text-2); font-size: 13px; }
.guthaben-karte .knopf { margin-left: auto; flex: none; }
/* Kästchenraster wie beim Betragsregler, in Glut, nach rechts auslaufend */
.guthaben-muster {
  position: absolute; left: 0; top: 0; bottom: 0; width: 120px;
  background-image: radial-gradient(circle at 2px 2px, var(--glut) 1.4px, transparent 1.6px);
  background-size: 6px 6px; opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, #000 15%, transparent); mask-image: linear-gradient(90deg, #000 15%, transparent);
}
.guthaben-symbol {
  position: absolute; left: 44px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px; background: var(--flaeche); border: 1.5px solid var(--glut); color: var(--glut-text);
}
.guthaben-symbol svg { width: 19px; height: 19px; }
.budget-karte .karte-inhalt { padding-top: 10px; }
.budget-karte .betrag-kopf { margin-bottom: 10px; }
.budget-karte .betrag-anzeige { font-size: 32px; }
.budget-fuss { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.budget-fuss .verbrauch { flex: 1; margin: 0; }

.bereich-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.bereich-kopf h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variation-settings: "wdth" 90; }
.bereich-zahl { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--flaeche-3); color: var(--text-2); font-family: var(--font-data); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.bereich-kopf .segment button { display: inline-flex; align-items: center; gap: 6px; height: 30px; }
.bereich-kopf .segment button[aria-pressed="true"] .bereich-zahl { background: var(--flaeche-3); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; }
.kpi { padding: 16px 16px 12px; display: flex; flex-direction: column; min-width: 0; }
.kpi h3 { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.kpi-wert { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.kpi-wert .zahl { font-size: 28px; font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.kpi-wert .trend { font-size: 11px; }
.kpi-chips { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0 10px; min-height: 22px; }
.kpi-chips .chip { font-weight: 500; font-family: var(--font-data); font-size: 10.5px; }
.spark { display: block; width: 100%; height: 56px; color: var(--text); margin-top: auto; }
.spark.leise { color: var(--text-2); }
.kpi .glutlinie { margin-top: auto; background: linear-gradient(to top, color-mix(in srgb, var(--glut) 7%, transparent), transparent 70%); }
.kpi-achse { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--text-3); }

.autopilot { padding: 16px 18px 14px; margin-bottom: 12px; border: 1.5px solid var(--tinte); }
.autopilot-kopf { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--rand); }
.autopilot-kopf h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.autopilot-kopf p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.autopilot-kopf .schalter { margin-left: auto; }
.autopilot-symbol { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--flaeche-3); color: var(--glut-text); flex: none; }
.autopilot-symbol svg { width: 17px; height: 17px; }
.autopilot .protokoll li { padding: 8px 0; }
.autopilot-mehr { display: inline-block; margin: 6px 0 0 30px; font-size: 13px; font-weight: 600; color: var(--text); text-underline-offset: 3px; }
.tabelle tfoot td { padding: 12px 14px; border-top: 1px solid var(--rand-stark); font-weight: 600; background: var(--flaeche-2); }
.tabelle tfoot td:first-child { font-size: 12px; color: var(--text-2); }
.kampagnen-folgt { margin-bottom: 30px; }
.karte + .bereich-kopf { margin-top: 30px; }

.ar-liste { list-style: none; margin: 0; padding: 0; }
.ar-zeile {
  position: relative; display: grid; grid-template-columns: 34px minmax(140px, 1.1fr) minmax(0, 2fr) auto auto auto auto auto;
  align-items: center; gap: 14px; padding: 12px 16px 12px 20px; border-top: 1px solid var(--rand);
}
.ar-zeile:first-child { border-top: 0; }
.ar-zeile:hover { background: var(--flaeche-2); }
.ar-zeile .waermeleiste { top: 12px; bottom: 12px; }
.ar-wer { min-width: 0; }
.ar-wer strong { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-wer span { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-text { margin: 0; font-size: 13px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ar-mehr { display: block; padding: 11px; border-top: 1px solid var(--rand); text-align: center; font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.ar-mehr:hover { color: var(--text); background: var(--flaeche-2); }

@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-zeile { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .ar-zeile .ar-text { grid-column: 2 / -1; }
  .ar-zeile > .chip.umriss, .ar-zeile > .thermometer { display: none; }
}
@media (max-width: 860px) {
  .ue-zeile { grid-template-columns: 1fr; }
  .ue-hinweis { flex-wrap: wrap; }
  .ue-hinweis .kopf-aktionen { margin-left: 22px; }
  .guthaben-karte { flex-wrap: wrap; padding-left: 96px; }
  .guthaben-symbol { left: 24px; }
  .guthaben-muster { width: 90px; }
  .ar-zeile { grid-template-columns: 34px minmax(0, 1fr); gap: 6px 12px; }
  .ar-zeile > *:not(.avatar):not(.ar-wer):not(.waermeleiste) { grid-column: 2; justify-self: start; }
}

/* ---------- Posteingang ---------- */
.postfach { display: grid; grid-template-columns: 320px 1fr 280px; height: 100%; }
.postfach.ohne-info { grid-template-columns: 320px 1fr; }
.pf-liste-kopf .segment button { flex: auto; white-space: nowrap; padding: 0 8px; }
.pf-liste { display: flex; flex-direction: column; border-right: 1px solid var(--rand); background: var(--flaeche); min-height: 0; }
.pf-liste-kopf { padding: 18px 16px 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--rand); }
.pf-liste-kopf h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.03em; font-variation-settings: "wdth" 88; }
.pf-filter { display: flex; gap: 6px; }
.pf-filter > .auswahl-huelle { flex: 1; }
.pf-filter .auswahl { min-height: 32px; font-size: 12.5px; padding: 4px 8px 4px 10px; }
.kopf-aktionen .auswahl { min-height: 34px; }
.pf-suche { position: relative; }
.pf-suche svg { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--text-3); }
.pf-suche input { padding-left: 32px; min-height: 34px; }
.pf-eintraege { overflow-y: auto; flex: 1; }
.pf-eintrag {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px;
  width: 100%; padding: 13px 16px 13px 18px; border: 0; border-bottom: 1px solid var(--rand);
  background: none; text-align: left; cursor: pointer;
}
.pf-eintrag:hover { background: var(--flaeche-2); }
.pf-eintrag[aria-current="true"] { background: var(--flaeche-3); }
.pf-eintrag .avatar { grid-row: span 2; }
.pf-eintrag .name { font-weight: 600; display: flex; gap: 6px; align-items: center; min-width: 0; }
.pf-eintrag .name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-eintrag .anzahl { font-family: var(--font-data); font-size: 11px; color: var(--text-3); font-weight: 400; }
.pf-eintrag time { font-size: 11.5px; color: var(--text-3); }
.pf-eintrag .vorschau { grid-column: 2 / 4; font-size: 12.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-eintrag .meta { grid-column: 2 / 4; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.pf-eintrag .meta .kampagne { font-size: 11.5px; color: var(--text-3); margin-right: auto; }
.pf-eintrag.ungelesen .name b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text); margin-left: 6px; vertical-align: middle; }

.pf-verlauf { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.pf-verlauf-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--rand); background: var(--flaeche); }
.pf-verlauf-kopf h2 { margin: 0; font-size: 16px; font-weight: 700; }
.pf-verlauf-kopf p { margin: 0; font-size: 12.5px; color: var(--text-2); }
.pf-verlauf-kopf .kopf-aktionen { margin-left: auto; flex-wrap: nowrap; flex: none; }
.pf-verlauf-kopf > div:not(.kopf-aktionen) { min-width: 0; }
.pf-verlauf-kopf p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zurueck { display: none; }
.pf-nachrichten { flex: 1; overflow-y: auto; padding: 22px 26px 8px; display: flex; flex-direction: column; gap: 14px; }

.nachricht { max-width: 720px; }
.nachricht-kopf { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; margin-bottom: 5px; flex-wrap: wrap; }
.nachricht-kopf strong { font-weight: 600; }
.nachricht-kopf span { color: var(--text-3); }
.nachricht-koerper { white-space: pre-line; padding: 12px 15px; border-radius: 12px; font-size: 14px; line-height: 1.6; }
.nachricht.wir .nachricht-koerper { color: var(--text-2); border: 1px dashed var(--rand-stark); }
.nachricht.wir.zu .nachricht-koerper { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.nachricht.lead .nachricht-koerper { background: var(--flaeche); border: 1px solid var(--rand); box-shadow: var(--schatten); color: var(--text); }
.nachricht.lead { position: relative; padding-left: 14px; }
.nachricht.lead .waermeleiste { top: 26px; bottom: 4px; }

.hinweis-leiste {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 720px;
  padding: 10px 14px; border-radius: var(--radius-m);
  background: var(--glut-flaeche); color: var(--glut-text); font-size: 13px; font-weight: 500;
}
.hinweis-leiste svg { width: 16px; height: 16px; }
.hinweis-leiste .knopf { margin-left: auto; }
.hinweis-leiste .knopf + .knopf { margin-left: 0; }

.entwurf {
  margin: 8px 22px 18px; border-radius: var(--radius-l); background: var(--flaeche);
  border: 1px solid var(--rand-stark); box-shadow: var(--schatten); overflow: hidden;
}
.entwurf-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--rand); font-size: 12.5px; }
.entwurf-kopf .ki { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.entwurf-kopf .ki svg { width: 15px; height: 15px; color: var(--glut-text); }
.entwurf-kopf .rechts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.entwurf-felder { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--rand); font-size: 12.5px; color: var(--text-3); flex-wrap: wrap; }
.entwurf-felder .chip { font-weight: 500; }
.entwurf-text {
  display: block; width: 100%; min-height: 120px; max-height: 34vh; padding: 14px 16px;
  border: 0; resize: vertical; background: none; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-y: auto;
}
.entwurf-text:focus { outline: none; }
.entwurf-text.schreibt::after { content: "▍"; animation: blinken 1s steps(2) infinite; color: var(--glut-text); }
@keyframes blinken { 50% { opacity: 0; } }
.quellen { border-top: 1px solid var(--rand); }
.quellen summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.quellen summary::-webkit-details-marker { display: none; }
.quellen summary svg { width: 14px; height: 14px; transition: transform .15s; }
.quellen[open] summary svg { transform: rotate(90deg); }
.quellen-inhalt { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.quellen-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.luecke { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 9px; background: var(--lau-flaeche); color: var(--lau-text); font-size: 12.5px; }
.luecke svg { width: 15px; height: 15px; flex: none; }
.luecke a { margin-left: auto; font-weight: 600; white-space: nowrap; }
.entwurf-fuss { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--rand); background: var(--flaeche-2); }
.entwurf-fuss .rechts { margin-left: auto; display: flex; gap: 6px; align-items: center; flex: none; }
.richtungen { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.richtungen::-webkit-scrollbar { display: none; }
.richtungen .knopf { font-weight: 500; }
.auto-senden { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--frost-flaeche); color: var(--frost-text); font-size: 12.5px; font-weight: 500; }
.auto-senden .knopf { margin-left: auto; }

.pf-info { border-left: 1px solid var(--rand); background: var(--flaeche); overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 18px; }
.pf-info h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.info-person { display: flex; gap: 12px; align-items: center; }
.info-person .avatar { width: 44px; height: 44px; font-size: 14px; }
.info-person strong { display: block; font-size: 15px; }
.info-person span { color: var(--text-2); font-size: 12.5px; }
.info-liste { margin: 0; display: grid; gap: 8px; font-size: 13px; }
.info-liste div { display: grid; grid-template-columns: 82px 1fr; gap: 8px; }
.info-liste dt { color: var(--text-3); }
.info-liste dd { margin: 0; overflow-wrap: anywhere; }
.warum-hot { padding: 12px 14px; border-radius: var(--radius-m); background: var(--glut-flaeche); color: var(--text); font-size: 13px; }
.warum-hot strong { display: flex; align-items: center; gap: 6px; color: var(--glut-text); font-size: 12px; margin-bottom: 4px; }
.warum-hot svg { width: 14px; height: 14px; }
.notiz textarea { min-height: 90px; font-size: 13px; }
.notiz small { display: block; margin-top: 6px; color: var(--text-3); font-size: 11.5px; }
.info-aktionen { display: grid; gap: 6px; }
.info-aktionen .knopf { justify-content: flex-start; }

/* ---------- Hot Leads ---------- */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.spalte { background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: var(--radius-l); padding: 12px; min-height: 300px; }
.spalte h2 { display: flex; justify-content: space-between; margin: 2px 4px 12px; font-size: 13px; font-weight: 600; }
.spalte h2 span { font-family: var(--font-data); color: var(--text-3); font-weight: 400; }
.lead-karte { position: relative; padding: 12px 12px 12px 15px; margin-bottom: 8px; border-radius: var(--radius-m); background: var(--flaeche); border: 1px solid var(--rand); box-shadow: var(--schatten); }
.lead-karte strong { display: block; font-size: 13.5px; }
.lead-karte span { display: block; font-size: 12px; color: var(--text-2); }
.lead-karte p { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); }
.lead-karte .waermeleiste { top: 12px; bottom: 12px; }
.lead-karte footer { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: var(--text-3); }
.crm-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.crm-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--rand-stark); }
.crm-status.ok i { background: var(--gut); }
.crm-status.wartet i { background: var(--lau); }
.crm-status.fehler i { background: var(--fehler); }
.auswahl-leiste { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rand); background: var(--flaeche-2); font-size: 13px; }

/* ---------- Wissensbasis ---------- */
.wissen { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.wissen-gruppe { margin-bottom: 26px; }
.wissen-gruppe-kopf { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.wissen-gruppe-kopf h2 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.wissen-gruppe-kopf p { margin: 2px 0 0; color: var(--text-3); font-size: 12.5px; }
.fakten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.fakt { padding: 13px 14px; border-radius: var(--radius-m); background: var(--flaeche); border: 1px solid var(--rand); display: flex; flex-direction: column; gap: 6px; }
.fakt strong { font-size: 13.5px; }
.fakt p { margin: 0; font-size: 13px; color: var(--text-2); white-space: pre-line; }
.fakt footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.fakt.vorschlag { border-style: dashed; border-color: var(--rand-stark); background: var(--flaeche-2); }
.fakt.leer { align-items: flex-start; justify-content: center; border-style: dashed; background: none; color: var(--text-3); min-height: 110px; cursor: pointer; }
.fakt.leer:hover { border-color: var(--text-3); color: var(--text); }
.herkunft { font-size: 11.5px; color: var(--text-3); display: inline-flex; gap: 5px; align-items: center; }
.herkunft svg { width: 12px; height: 12px; }
.vollstaendig { padding: 18px; }
.vollstaendig-zahl { display: flex; align-items: baseline; gap: 6px; }
.vollstaendig-zahl .zahl { font-size: 34px; letter-spacing: -.03em; }
.balken { height: 8px; border-radius: 4px; background: var(--flaeche-3); overflow: hidden; margin: 10px 0 14px; }
.balken i { display: block; height: 100%; background: linear-gradient(90deg, var(--frost), var(--lau), var(--glut)); }
.offen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.offen-liste li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.offen-liste svg { width: 16px; height: 16px; margin-top: 2px; color: var(--lau-text); }
.offen-liste li.ok svg { color: var(--gut); }
.offen-liste span { color: var(--text-2); display: block; font-size: 12.5px; }
.probelauf textarea { min-height: 80px; }
.probelauf-ergebnis { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-m); background: var(--flaeche-2); border: 1px solid var(--rand); font-size: 13px; white-space: pre-line; }

/* ---------- Onboarding ---------- */
.ob { display: grid; grid-template-columns: 320px 1fr; min-height: 100vh; }
.ob-leiste { padding: 28px 28px; border-right: 1px solid var(--rand); background: var(--flaeche); display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh; }
.ob-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: schritt; }
.ob-schritte li { counter-increment: schritt; }
.ob-schritte button {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 9px; background: none; text-align: left; cursor: pointer; color: var(--text-2);
}
.ob-schritte button::before {
  content: counter(schritt); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--rand-stark); font-family: var(--font-data); font-size: 11.5px;
}
.ob-schritte button:hover { background: var(--flaeche-3); }
.ob-schritte button[aria-current="step"] { color: var(--text); background: var(--flaeche-3); font-weight: 600; }
.ob-schritte button[aria-current="step"]::before { border-color: var(--text); }
.ob-schritte li.fertig button::before { content: "✓"; background: var(--tinte); border-color: var(--tinte); color: var(--tinte-text); }
.ob-schritte small { display: block; font-size: 11.5px; color: var(--text-3); font-weight: 400; }
.ob-fortschritt { font-size: 12px; color: var(--text-3); }
.ob-fortschritt .balken { margin: 6px 0 0; height: 4px; }
.ob-fortschritt .balken i { background: var(--tinte); transition: width .3s var(--ease); }
.ob-haupt { padding: 48px 56px 120px; max-width: 820px; }
.ob-haupt .eyebrow { font-family: var(--font-data); font-size: 11.5px; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; }
.ob-haupt h1 { margin: 8px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1.05; letter-spacing: -.035em; font-variation-settings: "wdth" 85; }
.ob-haupt > p.einleitung { margin: 0 0 30px; color: var(--text-2); font-size: 15.5px; max-width: 580px; }
.ob-form { display: grid; gap: 18px; }
.ob-fuss {
  position: fixed; left: 320px; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 56px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
  border-top: 1px solid var(--rand);
}
.ob-fuss .rechts { display: flex; gap: 8px; align-items: center; }
.vorbelegt { display: inline-flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--frost-text); font-weight: 600; }
.vorbelegt svg { width: 13px; height: 13px; }
.paket { display: grid; grid-template-columns: 1.2fr .7fr 2fr auto; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--rand); border-radius: var(--radius-m); background: var(--flaeche); }
.einwand { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: start; }
.chips-eingabe { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; min-height: 40px; border: 1px solid var(--rand-stark); border-radius: 9px; background: var(--flaeche); }
.chips-eingabe .chip { height: 26px; font-weight: 500; }
.chips-eingabe input { flex: 1; min-width: 140px; border: 0; background: none; padding: 0 6px; }
.chips-eingabe input:focus { outline: none; }
.ablage { display: grid; place-items: center; gap: 6px; padding: 30px; border: 1.5px dashed var(--rand-stark); border-radius: var(--radius-l); text-align: center; color: var(--text-2); background: var(--flaeche-2); }
.ablage svg { width: 26px; height: 26px; color: var(--text-3); }
.datei { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: var(--radius-m); background: var(--flaeche); font-size: 13px; }
.datei svg { width: 18px; height: 18px; color: var(--text-3); }
.datei .chip { margin-left: auto; }
.wahl { display: grid; gap: 10px; }
.wahl label {
  display: grid; grid-template-columns: 20px auto 1fr; gap: 12px; padding: 16px; cursor: pointer;
  border: 1px solid var(--rand-stark); border-radius: var(--radius-l); background: var(--flaeche);
}
.wahl label:has(input:checked) { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.wahl input { margin: 3px 0 0; accent-color: var(--tinte); }
.wahl strong { display: flex; gap: 8px; align-items: center; }
.wahl span { color: var(--text-2); font-size: 13px; }
.ton-beispiel { padding: 12px 14px; border-radius: var(--radius-m); background: var(--flaeche-2); border: 1px solid var(--rand); font-size: 13px; color: var(--text-2); font-style: italic; }
.betreuer-gross { display: flex; gap: 16px; align-items: center; padding: 18px; }
.betreuer-gross .avatar { width: 56px; height: 56px; font-size: 18px; }
.betreuer-gross strong { display: block; font-size: 16px; }
.betreuer-gross span { color: var(--text-2); font-size: 13px; }
.betreuer-gross .knopf { margin-left: auto; }

/* ---------- Freigabe: Onboarding nach der Einrichtung ----------
   Gleiches Gerüst wie .ob; Farbe nur für Wärme: kalt = Mails, lau = Antworten, Glut = Termine. */
.betreuer-klein { display: flex; gap: 10px; align-items: center; padding: 12px; }
.betreuer-klein strong { display: block; font-size: 13px; }
.betreuer-klein span:not(.avatar) { font-size: 12px; color: var(--text-3); }
.fg-budget { padding: 22px 24px 18px; }
.fg-budget-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fg-budget .betrag-anzeige { font-size: 56px; }
.fg-budget .betrag-kopf { margin-bottom: 20px; }
.fg-budget .betrag-kopf .neben { margin-top: 12px; }
.fg-stufe { transition: background-color .25s var(--ease), color .25s var(--ease); }
.chip.kuehl { background: color-mix(in srgb, var(--kuehl) 22%, transparent); color: var(--text-2); }
.fg-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.fg-kachel { position: relative; overflow: hidden; display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--rand); border-radius: var(--radius-m); background: var(--flaeche); }
.fg-kachel::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--farbe); opacity: .8; }
.fg-kachel.kalt { --farbe: var(--frost); }
.fg-kachel.warm { --farbe: var(--lau); }
.fg-kachel.heiss { --farbe: var(--glut); }
.fg-kachel > span { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-3); }
.fg-kachel > span svg { width: 15px; height: 15px; color: var(--farbe); }
.fg-kachel strong { font-size: 24px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.fg-fussnote { margin: -6px 0 0; }

.fg-gruppe h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.fg-gruppe h3 { gap: 12px; margin-bottom: 16px; font-size: 15px; }
.fg-gruppe.leer .fg-zus-ic { color: var(--lau-text); background: var(--lau-flaeche); border-color: color-mix(in srgb, var(--lau) 35%, transparent); }
.fg-gruppe.leer .fg-zahl { color: var(--lau-text); }
/* Reichweite: kalte Kontakte, deshalb Frost */
.fg-reichweite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 24px; padding: 20px 24px; background: linear-gradient(120deg, color-mix(in srgb, var(--frost) 12%, var(--flaeche)), var(--flaeche) 70%); border-color: color-mix(in srgb, var(--frost) 30%, var(--rand)); }
.fg-reichweite > div { display: grid; gap: 6px; min-width: 0; }
.fg-reichweite span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.fg-reichweite span svg { width: 16px; height: 16px; color: var(--frost); flex: none; }
.fg-reichweite strong { font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.fg-reichweite-tage { padding-left: 24px; border-left: 1px solid var(--rand); }
.fg-reichweite p { grid-column: 1 / -1; margin: 10px 0 0; font-size: 12px; color: var(--text-3); }
.fg-reichweite.leer { background: var(--lau-flaeche); border-color: color-mix(in srgb, var(--lau) 35%, transparent); }
.fg-reichweite.leer p { color: var(--lau-text); }
.fg-zahl { margin-left: auto; white-space: nowrap; font-family: var(--font-data); font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.fg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 10px; border-radius: 999px;
  border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.fg-chip svg { width: 14px; height: 14px; }
.fg-chip:hover { border-color: var(--text-3); color: var(--text); }
.fg-chip[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--tinte-text); }


.fg-postfaecher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.fg-postfach { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius-m); background: var(--flaeche-2); border: 1px solid var(--rand); min-width: 0; }
.fg-postfach svg { width: 16px; height: 16px; flex: none; color: var(--frost); }
.fg-postfach > span { min-width: 0; }
.fg-postfach strong { display: block; font-size: 13px; font-weight: 600; }
.fg-postfach small { display: block; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fg-wissen { display: flex; flex-direction: column; gap: 14px; padding: 22px; min-width: 0; }
.fg-wissen.leer { border-color: color-mix(in srgb, var(--lau) 28%, var(--rand)); }
.fg-wissen.leer .fg-zus-ic { color: var(--lau-text); background: var(--lau-flaeche); border-color: color-mix(in srgb, var(--lau) 35%, transparent); }
.fg-wissen.offen { border-color: var(--rand-stark); box-shadow: 0 0 0 1px var(--rand-stark); }
.fg-wissen-kopf { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.fg-wissen-kopf .chip { flex: none; }
.fg-wissen-titel strong { display: block; font-size: 16px; letter-spacing: -.01em; }
.fg-wissen-titel span { display: block; margin-top: 4px; font-size: 13px; color: var(--text-3); line-height: 1.45; }
.fg-wissen-inhalt { flex: 1; min-height: 120px; padding: 14px 16px; border-radius: var(--radius-m); background: var(--flaeche-2); border: 1px solid var(--rand); font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.fg-wissen-inhalt p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.fg-wissen-inhalt.ganz p { display: block; -webkit-line-clamp: unset; }
.fg-wissen-mehr { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fg-wissen-leer { flex: 1; min-height: 120px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 16px; border: 1px dashed var(--rand-stark); border-radius: var(--radius-m); }
.fg-wissen-leer span { font-family: var(--font-data); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.fg-wissen-leer p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-3); font-style: italic; }
.fg-wissen textarea { flex: 1; min-height: 160px; resize: vertical; line-height: 1.55; }
.fg-wissen-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.fg-wissen-fuss small { font-size: 12px; color: var(--text-3); }
.fg-wissen-knoepfe { display: flex; justify-content: flex-end; gap: 8px; }

.fg-zusammen { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.fg-zusammen li { display: grid; grid-template-columns: 34px 140px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--rand); }
.fg-zus-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--flaeche-2); border: 1px solid var(--rand); color: var(--text-2); }
.fg-zus-ic svg { width: 18px; height: 18px; }
.fg-zusammen li.warn .fg-zus-ic { color: var(--lau-text); background: var(--lau-flaeche); border-color: color-mix(in srgb, var(--lau) 35%, transparent); }
.fg-zusammen li:last-child { border-bottom: 0; }
.fg-zusammen li > span { font-size: 13px; color: var(--text-3); }
.fg-zusammen li > strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-zusammen li.warn > strong { color: var(--lau-text); }

.fg-zeit { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.fg-zeit::before { content: ""; position: absolute; top: 6px; left: 6px; right: 33%; height: 2px; background: linear-gradient(90deg, var(--frost), var(--lau) 50%, var(--glut)); opacity: .55; }
.fg-zeit li { position: relative; padding-top: 22px; }
.fg-zeit li::before { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--farbe); background: var(--bg); }
.fg-zeit li.kalt { --farbe: var(--frost); }
.fg-zeit li.warm { --farbe: var(--lau); }
.fg-zeit li.heiss { --farbe: var(--glut); }
.fg-zeit li.heiss::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--glut) 18%, transparent), 0 0 14px color-mix(in srgb, var(--glut) 55%, transparent); }
.fg-zeit li.fertig::before { background: var(--farbe); }
.fg-zeit strong { display: block; font-size: 13.5px; }
.fg-zeit span { font-size: 12.5px; color: var(--text-3); }

.fg-start { gap: 8px; }
.fg-start:not(:disabled) { background: var(--glut); border-color: var(--glut); color: #fff; box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--glut) 70%, transparent); }
.fg-start:disabled { opacity: .45; cursor: not-allowed; }
.fg-fertig { position: relative; }
.fg-funke { display: flex; width: max-content; margin-bottom: 18px; filter: drop-shadow(0 0 24px color-mix(in srgb, var(--glut) 45%, transparent)); }
.fg-fertig .fg-zeit { max-width: 620px; }

/* Freigabe füllt die ganze Fläche rechts der Leiste: Inhalt wächst in Breite und Höhe */
.fg-haupt { max-width: none; min-height: 100vh; display: flex; flex-direction: column; padding: 48px clamp(28px, 4vw, 72px) 110px; }
.fg-haupt > p.einleitung { max-width: 680px; }
.fg-haupt .ob-form { flex: 1; align-content: start; }
/* 1 Budget: Karte nimmt die Resthöhe, Betrag groß, Kacheln kräftig */
.fg-s-budget .ob-form { grid-template-rows: minmax(300px, 1fr) auto auto; align-content: stretch; }
.fg-s-budget .fg-budget { display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 6vh, 72px); padding: clamp(24px, 3vw, 40px); }
.fg-s-budget .fg-budget .betrag-anzeige { font-size: clamp(64px, 7vw, 112px); }
.fg-s-budget .fg-budget .betrag-kopf .neben { margin-top: clamp(12px, 1.6vw, 26px); font-size: 15px; }
.fg-s-budget .fg-budget .chip { font-size: 13px; padding: 5px 12px; }
.fg-s-budget .fg-budget .betrag-kopf { margin-bottom: 0; }
.fg-s-budget .fg-budget .regler-skala { margin-top: calc(6px - clamp(20px, 6vh, 72px)); }
.fg-s-budget .fg-kachel { padding: 22px 24px; gap: 14px; }
.fg-s-budget .fg-kachel > span { font-size: 13.5px; }
.fg-s-budget .fg-kachel strong { font-size: clamp(28px, 2.6vw, 40px); }
/* 2 Zielgruppe: Gruppen als Karten im Zweierraster */
.fg-s-zielgruppe .ob-form { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr 1fr auto; align-content: stretch; gap: 16px; }
.fg-s-zielgruppe .fg-reichweite { grid-column: 1 / -1; }
.fg-s-zielgruppe .fg-gruppe { padding: 20px 22px; border: 1px solid var(--rand); border-radius: var(--radius-l); background: var(--flaeche); }
.fg-s-zielgruppe .ob-form > .hilfe { grid-column: 1 / -1; }
/* 4 Absender links, Termin-Link rechts */
.fg-s-absender .ob-form { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-content: stretch; gap: 16px; }
.fg-karte { display: flex; flex-direction: column; gap: 14px; padding: 22px; min-width: 0; }
.fg-karte-kopf { display: flex; align-items: center; gap: 12px; }
.fg-karte-kopf label { display: block; font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.fg-karte-kopf span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-3); }
.fg-karte-kopf strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

/* Altes Onboarding (vor der Einrichtung) im Stil der Freigabe: Karten mit Icon-Kopf, volle Fläche */
.ob-s1 .ob-form, .ob-s2 .ob-form, .ob-s3 .ob-form, .ob-s4 .ob-form, .ob-s5 .ob-form { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); align-content: stretch; gap: 16px; }
.ob-s2 .ob-form { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.ob-s3 .ob-form { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.ob-s3 .paket { grid-template-columns: minmax(0, 1fr) 96px auto; }
.ob-s3 .paket > input:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
.ob-s3 .paket > .knopf { grid-column: 3; grid-row: 1; }
.ob-s3 .einwand { grid-template-columns: minmax(0, 1fr) auto; padding: 12px; border: 1px solid var(--rand); border-radius: var(--radius-m); background: var(--flaeche); }
.ob-s3 .einwand > input:nth-child(2) { grid-column: 1; grid-row: 2; }
.ob-s3 .einwand > .knopf { grid-column: 2; grid-row: 1; }
.ob-spalte { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ob-spalte > .ob-wachsen { flex: 1; }
.fg-karte > .ob-wachsen, .fg-vorschau > .ob-wachsen { flex: 1; }
.fg-karte > .ablage.ob-wachsen { min-height: 220px; align-content: center; }
.fg-karte .wer { font-size: 10.5px; }
.ob-betreuer { gap: 20px; }
.ob-betreuer-kopf { display: flex; gap: 16px; align-items: center; }
.ob-betreuer-kopf .avatar { width: 56px; height: 56px; font-size: 18px; }
.ob-betreuer-kopf strong { display: block; font-size: 17px; }
.ob-betreuer-kopf span:not(.avatar) { font-size: 13px; color: var(--text-2); }
.ob-brauchst { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ob-brauchst .fg-zusagen { border-top: 0; padding-top: 0; gap: 12px; }
.ob-betreuer > .knopf { align-self: flex-start; }
.ob-fakten { list-style: none; margin: 0; padding: 14px 16px; display: grid; align-content: start; gap: 10px; border: 1px solid var(--rand); border-radius: var(--radius-m); background: var(--flaeche-2); }
.ob-fakten li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--text-2); }
.ob-fakten svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.ob-s5 .ton-beispiel.ob-wachsen { display: flex; align-items: center; padding: 20px 22px; font-size: 15px; line-height: 1.55; }
.ob-s6 .ob-form { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; gap: 16px; }
.ob-s6 .wahl { display: contents; }
.ob-s6 .wahl label { align-content: start; padding: 24px; }
.ob-s6 .wahl strong { font-size: 16px; flex-wrap: wrap; }
.ob-s6 .wahl label div > span { display: block; margin-top: 6px; font-size: 14px; }
.ob-s6 .ob-breit { grid-column: 1 / -1; }
.fg-karte .hilfe { margin: 0; font-size: 12px; color: var(--text-3); }
.fg-vorschau { flex: 1; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.fg-vorschau-titel { font-family: var(--font-data); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.fg-inbox { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rand); border-radius: var(--radius-m); background: var(--flaeche-2); overflow: hidden; }
.fg-inbox li { display: grid; grid-template-columns: 8px 120px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--rand); font-size: 13px; }
.fg-inbox li:last-child { border-bottom: 0; }
.fg-inbox li strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-inbox li > span { display: flex; gap: 6px; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
.fg-inbox li > span b { color: var(--text); font-weight: 600; }
.fg-inbox li time { font-family: var(--font-data); font-size: 11px; color: var(--text-3); }
.fg-inbox li.neu { background: color-mix(in srgb, var(--frost) 8%, transparent); }
.fg-inbox-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--frost); }
.fg-balken { display: inline-block; flex: none; width: var(--b); height: 8px; border-radius: 4px; background: var(--rand-stark); }
.fg-inbox li > span .fg-balken { width: calc(var(--b) * 1.6); max-width: 45%; }
.fg-balken.leise { background: var(--rand); }
.fg-mail { flex: 1; padding: 16px 18px; border: 1px solid var(--rand); border-radius: var(--radius-m); background: var(--flaeche-2); font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.fg-mail p { margin: 0 0 10px; }
.fg-mail p:last-child { margin: 0; }
.fg-mail-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 8px; background: var(--glut-flaeche); color: var(--glut-text); font-weight: 600; overflow-wrap: anywhere; }
.fg-mail-link svg { width: 14px; height: 14px; flex: none; }
/* 5 Wissen: drei Bereiche nebeneinander */
.fg-s-wissen .ob-form { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(380px, 1fr); align-content: stretch; align-items: stretch; gap: 16px; }
/* 6 Zusammenfassung links, Zeitplan rechts */
.fg-s-start .ob-form { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); grid-template-rows: minmax(0, 1fr); align-content: stretch; gap: 16px; }
.fg-s-start .fg-zusammen { display: flex; flex-direction: column; }
.fg-s-start .fg-zusammen li { flex: 1; }
.fg-start-karte { display: flex; flex-direction: column; gap: 20px; padding: 24px; }
.fg-start-karte h3 { margin: 0; font-size: 16px; }
.fg-zeit.senkrecht { flex: 1; grid-template-columns: 1fr; align-content: space-evenly; gap: 22px; margin: 0; }
.fg-zusagen { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--rand); display: grid; gap: 10px; }
.fg-zusagen li { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text-2); }
.fg-zusagen svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.fg-zeit.senkrecht::before { display: block; top: 8px; bottom: 30px; left: 4px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--frost), var(--lau) 50%, var(--glut)); }
.fg-zeit.senkrecht li { padding: 0 0 0 26px; }
.fg-zeit.senkrecht li::before { top: 3px; }
.fg-fertig { justify-content: center; align-items: center; text-align: center; overflow: hidden; }
.fg-fertig > * { position: relative; }
.fg-fertig > .fg-fertig-glut { position: absolute; left: 50%; top: 18%; width: 720px; height: 520px; margin-left: -360px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--glut) 16%, transparent), color-mix(in srgb, var(--lau) 6%, transparent) 55%, transparent); pointer-events: none; }
.fg-fertig .fg-funke { margin: 0 auto 18px; }
.fg-fertig h1 { font-size: clamp(38px, 4vw, 56px); }
.fg-fertig > p.einleitung { margin-left: auto; margin-right: auto; }
.fg-fertig .fg-zeit { width: 100%; max-width: 760px; text-align: left; }
.fg-fertig-kacheln { width: 100%; max-width: 760px; margin-top: 30px; text-align: left; }
.fg-fertig-knoepfe { display: flex; gap: 8px; justify-content: center; margin-top: 28px; }

@media (max-width: 1180px) {
  .fg-s-absender .ob-form, .fg-s-start .ob-form { grid-template-columns: 1fr; grid-template-rows: none; }
  .ob-s1 .ob-form, .ob-s2 .ob-form, .ob-s3 .ob-form, .ob-s4 .ob-form, .ob-s5 .ob-form, .ob-s6 .ob-form { grid-template-columns: 1fr; grid-template-rows: none; }
  .fg-reichweite { grid-template-columns: 1fr 1fr; }
  .fg-reichweite-tage { grid-column: 1 / -1; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--rand); }
  .fg-s-wissen .ob-form { grid-template-columns: 1fr; grid-template-rows: none; }
}
@media (max-width: 860px) {
  .fg-haupt { min-height: 0; padding: 24px 16px 120px; }
  .fg-s-budget .ob-form { grid-template-rows: none; }
  .fg-s-zielgruppe .ob-form { grid-template-columns: 1fr; grid-template-rows: none; }
  .fg-kacheln, .fg-postfaecher { grid-template-columns: 1fr; }
  .fg-budget .betrag-anzeige { font-size: 44px; }
  .fg-zusammen li { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 2px 12px; }
  .fg-zus-ic { grid-row: span 2; }
  .fg-zusammen li > span { grid-column: 2 / -1; }
  .fg-zeit { grid-template-columns: 1fr; gap: 14px; }
  .fg-zeit::before { display: none; }
  .betreuer-klein { display: none; }
}
.zeitplan { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.zeitplan li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rand); }
.zeitplan li:first-child { border-top: 0; }
.zeitplan time { font-family: var(--font-data); font-size: 12px; color: var(--text-3); padding-top: 2px; }
.zeitplan strong { display: block; }
.zeitplan span { color: var(--text-2); font-size: 13px; }
.wer { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--flaeche-3); color: var(--text-2); margin-left: 6px; vertical-align: 1px; }

/* ---------- Anmeldung ---------- */
.anmelden {
  position: relative; min-height: 100vh; display: grid; place-items: center; padding: 72px 20px 40px; overflow: hidden;
  background: var(--bg);
}
/* Von kalt zu heiß: ein leises Glühen am unteren Rand, links Frost, rechts Glut */
.anmelden::before {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -35%; height: 75%; pointer-events: none;
  background:
    radial-gradient(45% 60% at 28% 100%, color-mix(in srgb, var(--frost) 30%, transparent), transparent 70%),
    radial-gradient(40% 60% at 74% 100%, color-mix(in srgb, var(--glut) 22%, transparent), transparent 70%);
  filter: blur(24px);
}
.anmelde-modus { position: fixed; top: 16px; right: 16px; width: 210px; z-index: 2; }
/* Geteilt: links die Anmeldung, rechts das Fließband als Bühne */
.anmelden.geteilt { display: grid; grid-template-columns: minmax(440px, 5fr) 7fr; place-items: stretch; padding: 0; }
.anmelden.geteilt::before { right: 50%; }
.anmelde-links { position: relative; display: grid; place-items: center; padding: 72px 24px 40px; }
.anmelde-buehne {
  position: relative; isolation: isolate; overflow: hidden; margin: 12px 12px 12px 0; border-radius: 24px; border: 1px solid var(--rand);
  background: radial-gradient(110% 70% at 70% 100%, color-mix(in srgb, var(--glut) 12%, transparent), transparent 60%), linear-gradient(180deg, var(--flaeche-2), var(--bg));
}
.anmelde-fliess {
  position: absolute; inset: 0; perspective: 1500px; overflow: hidden; pointer-events: none; opacity: .8;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 64%, #000 45%, transparent 85%), linear-gradient(to bottom, transparent 24%, #000 52%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 64%, #000 45%, transparent 85%), linear-gradient(to bottom, transparent 24%, #000 52%);
  mask-composite: intersect;
}
.anmelde-fliess .l-fliess-ebene { top: 68%; transform: scale(.82) rotateX(62deg) rotateZ(-22deg); }
.anmelde-buehne-text { position: relative; z-index: 1; display: grid; justify-items: start; gap: 16px; padding: clamp(36px, 5vw, 72px); }
.anmelde-pille { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--rand-stark); background: color-mix(in srgb, var(--flaeche) 80%, transparent); font-size: 12.5px; color: var(--text-2); }
.anmelde-pille i { width: 7px; height: 7px; border-radius: 50%; background: var(--glut); box-shadow: 0 0 10px var(--glut); }
.anmelde-titel { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 4.4vw, 68px); line-height: .96; letter-spacing: -.045em; font-variation-settings: "wdth" 80; color: var(--text); }
.anmelde-titel span { display: block; }
.anmelde-titel .akzent { background: linear-gradient(90deg, var(--frost), var(--kuehl) 35%, var(--lau) 65%, var(--glut)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.anmelde-unter { margin: 0; max-width: 420px; font-size: 15px; color: var(--text-2); }
@media (max-width: 980px) {
  .anmelden.geteilt { grid-template-columns: 1fr; }
  .anmelden.geteilt::before { right: -10%; }
  .anmelde-buehne { display: none; }
}
.anmelde-karte {
  position: relative; width: min(392px, 100%); padding: 32px 28px 24px; border-radius: 18px;
  background: var(--flaeche); border: 1px solid var(--rand);
  box-shadow: 0 1px 2px rgba(15, 19, 26, .05), 0 30px 70px -30px rgba(15, 19, 26, .3);
}
[data-theme="dunkel"] .anmelde-karte {
  background: linear-gradient(180deg, var(--flaeche-2), var(--flaeche));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 80px -30px rgba(0, 0, 0, .8);
}
.anmelde-kopf { display: grid; justify-items: center; gap: 10px; text-align: center; margin-bottom: 24px; }
.anmelde-kopf .marke-wort { font-size: 27px; }
.anmelde-kopf p { margin: 0; max-width: 300px; color: var(--text-2); font-size: 13.5px; }
.anmelde-form { display: grid; gap: 14px; }
.anmelde-form .eingabe { min-height: 42px; }
.feld-zeile { display: flex; justify-content: space-between; align-items: baseline; }
.feld-zeile a, .anmelde-fuss a { color: var(--text-2); font-size: 12.5px; text-underline-offset: 3px; }
.feld-zeile a:hover, .anmelde-fuss a:hover { color: var(--text); }
.passwort { position: relative; }
.passwort .eingabe { padding-right: 44px; }
.passwort button {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 32px; height: 32px; border: 0; border-radius: 7px; background: none; color: var(--text-3); cursor: pointer;
}
.passwort button:hover { background: var(--flaeche-3); color: var(--text); }
.passwort button svg { width: 17px; height: 17px; }
.fehler-text { font-size: 12px; color: var(--fehler); }
.eingabe[aria-invalid="true"] { border-color: var(--fehler); }
.eingabe[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fehler) 22%, transparent); }
.anmelde-knopf { width: 100%; height: 42px; font-size: 14px; margin-top: 4px; }
.knopf.laedt { cursor: progress; opacity: 1; }
.knopf.laedt::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: drehen .7s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }
.anmelde-fehler { margin: 0 0 16px; padding: 10px 12px; font-size: 13px; gap: 10px; }
.oder { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--text-3); font-size: 12px; }
.oder::before, .oder::after { content: ""; flex: 1; height: 1px; background: var(--rand); }
.anbieter { display: grid; gap: 8px; }
.anbieter .knopf { width: 100%; height: 42px; gap: 10px; font-size: 13.5px; }
.anbieter img { width: 18px; height: 18px; object-fit: contain; }
.anmelde-fuss { margin: 20px 0 0; text-align: center; font-size: 12.5px; color: var(--text-3); }
.anmelde-gesendet { display: grid; justify-items: center; gap: 8px; text-align: center; margin-bottom: 20px; }
.anmelde-gesendet svg { width: 30px; height: 30px; color: var(--text-2); }
.anmelde-gesendet h1 { margin: 4px 0 0; font-family: var(--font-display); font-size: 21px; letter-spacing: -.02em; }
.anmelde-gesendet p { margin: 0; color: var(--text-2); font-size: 13.5px; }
@media (max-width: 860px) {
  .anmelde-modus { width: 180px; }
  .anmelde-karte { padding: 26px 20px 20px; }
}

/* ---------- Terminseite ----------
   Design-Nachbau von components/ui/open-slot-booking.tsx. Klassennamen bleiben
   osb-*, damit die spätere React-Fassung dieselbe Struktur trifft. Farben aus
   unseren Tokens: Überschrift Frost → Glut, Schräg-Fläche und Akzent in Glut,
   das Fenster bleibt in beiden Modi dunkel. */
.termin-vorschau { overflow: hidden; }
.vorschau-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rand); }
.osb {
  --osb-display: var(--font-display);
  --osb-slab: var(--glut); --osb-slab-ink: #0B0D14;
  --osb-action: var(--glut); --osb-action-ink: #0B0D14;
  --osb-window: #12161D;
  --osb-from: var(--frost); --osb-to: var(--glut);
  --osb-ink: var(--text); --osb-muted: var(--text-2);
  --osb-win-ink: #eef1f8; --osb-win-muted: rgba(238,241,248,.74); --osb-win-faint: rgba(238,241,248,.62); --osb-win-line: rgba(238,241,248,.09);
  --osb-paper: #ffffff; --osb-paper-ink: #10131c; --osb-paper-muted: #5a5f6e; --osb-paper-line: #e4e6ec;
  position: relative; padding: 48px 40px 64px; color: var(--osb-ink); overflow: hidden; font-variant-numeric: tabular-nums;
}
[data-theme="dunkel"] .osb { --osb-window: #0E1117; }
.osb :focus-visible { outline: 2px solid var(--osb-action); outline-offset: 2px; }
.osb-head { max-width: 900px; margin: 0 auto; text-align: center; }
.osb-h { font-family: var(--osb-display); font-weight: 800; font-size: clamp(2.2rem, 1rem + 3.4vw, 4rem); line-height: 1.02; letter-spacing: -.04em; margin: 0; text-wrap: balance; font-variation-settings: "wdth" 88; }
.osb-h span { display: block; }
.osb-h .osb-accent { background: linear-gradient(92deg, var(--osb-from), var(--osb-to)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.osb-sub { margin: 16px auto 0; max-width: 34rem; font-size: 1.05rem; line-height: 1.55; color: var(--osb-muted); text-wrap: pretty; }
.osb-alt { display: inline-block; margin-top: 12px; font-size: .9rem; color: var(--osb-ink); text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--osb-ink) 35%, transparent); }
.osb-stage { position: relative; max-width: 1080px; margin: 44px auto 0; }
.osb-slab { position: absolute; inset: -20px -24px -28px -16px; border-radius: 26px; background: var(--osb-slab); transform: rotate(-2deg); transform-origin: 50% 60%; animation: osb-settle .9s var(--ease) both .15s; }
.osb-win { position: relative; border-radius: 18px; background: var(--osb-window); color: var(--osb-win-ink); overflow: hidden; container-type: inline-size; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 70px -40px rgba(8,10,24,.55), 0 10px 24px -14px rgba(8,10,24,.35); }
.osb-bar { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--osb-win-line); }
.osb-url { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 28px; margin: 0 auto; max-width: 460px; border-radius: 999px; background: rgba(238,241,248,.06); font-size: 12.5px; color: var(--osb-win-muted); }
.osb-url b { font-weight: 600; color: var(--osb-win-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osb-url svg { width: 13px; height: 13px; flex: none; }
.osb-copy { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--osb-win-muted); font-size: 12.5px; cursor: pointer; }
.osb-copy:hover { background: rgba(238,241,248,.08); color: var(--osb-win-ink); }
.osb-body { display: grid; grid-template-columns: 290px minmax(0, 1fr); }
.osb-host { padding: 26px 24px 28px; border-right: 1px solid var(--osb-win-line); display: flex; flex-direction: column; gap: 22px; }
.osb-who { display: flex; align-items: center; gap: 14px; }
.osb-stamp { position: relative; flex: none; width: 76px; height: 76px; }
.osb-stamp svg { display: block; width: 100%; height: 100%; }
.osb-stamp .osb-ring { transform-origin: 60px 60px; animation: osb-spin 40s linear infinite; }
.osb-name { font-weight: 700; font-size: 15.5px; line-height: 1.25; }
.osb-role { font-size: 13px; color: var(--osb-win-muted); margin-top: 2px; line-height: 1.35; }
.osb-live { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12px; color: var(--osb-win-muted); }
.osb-live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; flex: none; }
.osb-live i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid #3ddc84; opacity: 0; animation: osb-ping 2.4s ease-out infinite; }
.osb-meet { font-family: var(--osb-display); font-weight: 800; font-size: 25px; letter-spacing: -.025em; line-height: 1.1; margin: 0; }
.osb-agenda { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--osb-win-muted); }
.osb-label { display: block; font-size: 12px; color: var(--osb-win-faint); margin-bottom: 8px; }
.osb-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 12px; background: rgba(238,241,248,.06); }
.osb-seg-pill { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 9px; background: var(--osb-win-ink); transition: transform .28s var(--ease); }
.osb-seg button { position: relative; z-index: 1; height: 34px; border: 0; background: transparent; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--osb-win-muted); cursor: pointer; transition: color .2s; }
.osb-seg button[aria-pressed="true"] { color: var(--osb-window); }
.osb-opts { display: flex; flex-direction: column; gap: 22px; }
.osb-meta { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--osb-win-muted); }
.osb-meta div { display: flex; align-items: center; gap: 10px; }
.osb-meta svg { flex: none; width: 16px; height: 16px; opacity: .8; }
.osb-tz { position: relative; display: flex; align-items: center; }
.osb-tz select { appearance: none; -webkit-appearance: none; width: 100%; height: 36px; padding: 0 30px 0 34px; border-radius: 10px; border: 1px solid var(--osb-win-line); background: rgba(238,241,248,.04); font-size: 13px; color: var(--osb-win-ink); cursor: pointer; }
.osb-tz select option { color: #10131c; background: #fff; }
.osb-tz .osb-globe { position: absolute; left: 11px; width: 15px; height: 15px; pointer-events: none; opacity: .7; }
.osb-tz .osb-chev { position: absolute; right: 11px; width: 12px; height: 12px; pointer-events: none; opacity: .6; }
.osb-cal { position: relative; padding: 22px 24px 24px; min-width: 0; }
.osb-calhead { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 16px; }
.osb-pick { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; margin-right: auto; }
.osb-pick-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--osb-slab); color: var(--osb-slab-ink); }
.osb-pick-ico svg { width: 15px; height: 15px; }
.osb-switch { display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 4px 2px; font-size: 13.5px; color: var(--osb-win-muted); cursor: pointer; }
.osb-switch:hover { color: var(--osb-win-ink); }
.osb-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(238,241,248,.16); transition: background-color .25s; }
.osb-track i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .32s cubic-bezier(.34,1.36,.64,1); }
.osb-switch[aria-checked="true"] .osb-track { background: var(--osb-action); }
.osb-switch[aria-checked="true"] .osb-track i { transform: translateX(16px); }
.osb-weeknav { display: flex; align-items: center; gap: 8px; width: 100%; }
.osb-month { font-family: var(--osb-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; margin-right: auto; }
.osb-btn { display: inline-grid; place-items: center; height: 32px; min-width: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--osb-win-line); background: rgba(238,241,248,.04); font-size: 13px; font-weight: 600; color: var(--osb-win-ink); cursor: pointer; }
.osb-btn.osb-icon { padding: 0; }
.osb-btn svg { width: 16px; height: 16px; }
.osb-btn:hover:not(:disabled) { background: rgba(238,241,248,.1); border-color: rgba(238,241,248,.22); }
.osb-btn:disabled { opacity: .35; cursor: default; }
.osb-grid { position: relative; border: 1px solid var(--osb-win-line); border-radius: 14px; overflow: hidden; }
.osb-days { display: grid; border-bottom: 1px solid var(--osb-win-line); background: rgba(238,241,248,.025); }
.osb-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 0 9px; font-size: 12px; color: var(--osb-win-muted); }
.osb-day b { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; font-family: var(--osb-display); font-size: 16px; font-weight: 800; color: var(--osb-win-ink); }
.osb-day[data-today="true"] b { color: var(--osb-slab); border: 1.5px dashed var(--osb-slab); box-shadow: 0 0 0 3px var(--osb-window), 0 0 0 4.5px color-mix(in srgb, var(--osb-slab) 55%, transparent); }
.osb-scroll { position: relative; overflow-y: auto; max-height: 444px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to bottom, transparent 0, #000 9px, #000 calc(100% - 34px), transparent); scrollbar-width: thin; scrollbar-color: rgba(238,241,248,.2) transparent; }
.osb-rows { position: relative; display: grid; }
.osb-gutter { position: relative; }
.osb-hour { position: absolute; right: 10px; transform: translateY(-50%); font-family: var(--font-data); font-size: 10.5px; color: var(--osb-win-faint); white-space: nowrap; }
.osb-lines { position: absolute; inset: 0 0 0 52px; pointer-events: none; }
.osb-lines i { position: absolute; left: 0; right: 0; height: 1px; background: var(--osb-win-line); }
.osb-col { position: relative; border-left: 1px solid var(--osb-win-line); animation: osb-col-in .3s var(--ease) both; animation-delay: calc(var(--c) * 30ms); }
.osb-col[data-leer="true"] { background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(238,241,248,.025) 9px 10px); }
.osb-col-hinweis { position: absolute; left: 6px; right: 6px; top: 14px; font-size: 11px; color: var(--osb-win-faint); text-align: center; }
.osb-slot { position: absolute; left: 5px; right: 5px; max-width: 176px; margin: 0 auto; z-index: 2; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid rgba(238,241,248,.16); background: rgba(238,241,248,.06); font-family: var(--font-data); font-size: 12px; font-weight: 500; color: var(--osb-win-ink); white-space: nowrap; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s, transform .16s; }
.osb-slot .osb-end { display: none; }
.osb-slot[data-state="open"], .osb-slot[data-state="picked"], .osb-legend i.osb-lg-open {
  -webkit-mask: radial-gradient(circle 4px at 0 50%, transparent 94%, #000 100%) left/51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 94%, #000 100%) right/51% 100% no-repeat;
  mask: radial-gradient(circle 4px at 0 50%, transparent 94%, #000 100%) left/51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 94%, #000 100%) right/51% 100% no-repeat;
}
.osb-slot[data-state="open"]::before, .osb-slot[data-state="picked"]::before { content: ""; position: absolute; left: 13px; top: 5px; bottom: 5px; border-left: 1px dashed currentColor; opacity: .3; }
@media (hover: hover) and (pointer: fine) {
  .osb-slot[data-state="open"]:hover { z-index: 3; background: var(--osb-action); border-color: var(--osb-action); color: var(--osb-action-ink); }
  .osb-slot[data-state="open"]:hover .osb-end { display: inline; }
}
.osb-slot[data-state="open"]:focus-visible { z-index: 3; outline: none; background: var(--osb-action); border-color: var(--osb-action); color: var(--osb-action-ink); box-shadow: inset 0 0 0 2px var(--osb-action-ink); }
.osb-slot[data-state="open"]:active { transform: scale(.97); }
.osb-slot[data-state="clash"] { z-index: 1; cursor: not-allowed; background: transparent; border-style: dashed; border-color: rgba(238,241,248,.2); color: var(--osb-win-faint); text-decoration: line-through; text-decoration-color: rgba(238,241,248,.45); }
.osb-slot[data-state="picked"] { z-index: 3; background: var(--osb-action); border-color: var(--osb-action); color: var(--osb-action-ink); }
.osb-busy { position: absolute; left: 5px; right: 5px; max-width: 176px; margin: 0 auto; z-index: 1; border-radius: 8px; padding: 5px 9px; background: rgba(238,241,248,.045); }
.osb-busy span { display: block; font-size: 10.5px; font-weight: 650; line-height: 1.3; color: var(--osb-win-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osb-block { position: absolute; left: 3px; right: 3px; max-width: 190px; margin: 0 auto; z-index: 2; pointer-events: none; border-radius: 9px; border: 1px dashed rgba(238,241,248,.28); background: repeating-linear-gradient(135deg, rgba(238,241,248,.13) 0 1.5px, transparent 1.5px 7px), color-mix(in srgb, var(--osb-window) 70%, #ffffff 4%); padding: 0 7px; animation: osb-wipe .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.osb-block span { position: relative; top: -7px; display: block; width: max-content; max-width: calc(100% - 4px); font-size: 10px; font-weight: 700; line-height: 14px; color: var(--osb-win-ink); background: var(--osb-window); border: 1px dashed rgba(238,241,248,.34); border-radius: 5px; padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osb-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 12px; color: var(--osb-win-faint); }
.osb-legend span { display: inline-flex; align-items: center; gap: 7px; }
.osb-legend i { width: 16px; height: 10px; border-radius: 3px; border: 1px solid rgba(238,241,248,.22); background: rgba(238,241,248,.06); }
.osb-legend i.osb-lg-open { width: 20px; }
.osb-legend i.osb-lg-taken { border: 0; background: rgba(238,241,248,.12); }
.osb-legend i.osb-lg-busy { border-style: dashed; background: repeating-linear-gradient(135deg, rgba(238,241,248,.2) 0 1.5px, transparent 1.5px 5px); }

.osb-booked { position: absolute; left: 5px; right: 5px; max-width: 176px; margin: 0 auto; z-index: 2; border-radius: 8px; padding: 5px 9px; background: var(--osb-slab); color: var(--osb-slab-ink); }
.osb-booked span { display: block; font-size: 10.5px; font-weight: 650; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osb-tail { position: absolute; left: 5px; right: 5px; max-width: 176px; margin: 0 auto; z-index: 4; border-radius: 0 0 8px 8px; background: color-mix(in srgb, var(--osb-action) 24%, var(--osb-window)); border: 1px dashed color-mix(in srgb, var(--osb-action) 60%, transparent); border-top: 0; opacity: 0; transform: scaleY(.6); transform-origin: top; transition: opacity .16s, transform .2s var(--ease); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .osb-slot[data-state="open"]:hover + .osb-tail { opacity: 1; transform: none; } }
.osb-slot[data-state="open"]:focus-visible + .osb-tail { opacity: 1; transform: none; }
.osb-now { position: absolute; left: -1px; right: 0; height: 2px; z-index: 4; background: var(--osb-slab); pointer-events: none; }
.osb-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--osb-slab); }
.osb-none { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; font-size: 14px; color: var(--osb-win-muted); background: color-mix(in srgb, var(--osb-window) 60%, transparent); }
.osb-empty { margin: 0; padding: 36px 20px; text-align: center; font-size: 14px; color: var(--osb-win-muted); }
.osb-alt:hover { text-decoration-color: var(--osb-ink); }

/* Bestätigen und Gebucht */
.osb-scrim { position: absolute; inset: 0; z-index: 20; background: color-mix(in srgb, var(--osb-window) 72%, transparent); animation: osb-fade .24s ease both; }
/* Zentriert über den Rand, nicht über transform: die Wachs-Animation braucht transform für sich */
.osb-card { position: absolute; z-index: 21; left: 50%; top: 24px; width: min(400px, calc(100% - 32px)); margin-left: calc(min(400px, calc(100% - 32px)) / -2); border-radius: 18px; background: var(--osb-paper); color: var(--osb-paper-ink); box-shadow: 0 30px 60px -24px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.04); animation: osb-auf .28s var(--ease) both; }
.osb-card[data-phase="done"] { width: min(470px, calc(100% - 24px)); margin-left: calc(min(470px, calc(100% - 24px)) / -2); background: transparent; box-shadow: none; animation: osb-klappen .46s cubic-bezier(.2,.8,.3,1) both; }
.osb-form { padding: 22px 22px 20px; }
.osb-cardtop { display: flex; align-items: flex-start; gap: 12px; }
.osb-when { flex: 1; min-width: 0; }
.osb-when small { display: block; font-size: 12.5px; color: var(--osb-paper-muted); }
.osb-when strong { display: block; margin-top: 4px; font-family: var(--osb-display); font-weight: 800; font-size: 23px; letter-spacing: -.025em; line-height: 1.15; }
.osb-when em { display: block; font-style: normal; margin-top: 3px; font-size: 14px; color: var(--osb-paper-muted); }
.osb-when i { display: flex; align-items: center; gap: 7px; font-style: normal; margin-top: 8px; font-size: 13px; color: var(--osb-paper-muted); }
.osb-when i svg { width: 16px; height: 16px; }
.osb-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f2f6; color: var(--osb-paper-ink); cursor: pointer; }
.osb-x:hover { background: #e5e7ee; }
.osb-x svg { width: 14px; height: 14px; }
.osb-fields { display: grid; gap: 12px; margin-top: 18px; }
.osb-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--osb-paper-ink); }
.osb-field label span { font-weight: 400; color: var(--osb-paper-muted); }
.osb-field input, .osb-field textarea { display: block; width: 100%; border: 1px solid var(--osb-paper-line); border-radius: 10px; background: #fbfbfd; padding: 10px 12px; font-size: 14.5px; color: var(--osb-paper-ink); outline: none; resize: none; }
.osb-field input:focus, .osb-field textarea:focus { border-color: var(--osb-action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--osb-action) 22%, transparent); }
.osb-field[data-error="true"] input { border-color: #d93a3a; }
.osb-field[data-error="true"] input:focus { box-shadow: 0 0 0 3px rgba(217,58,58,.2); }
.osb-err { margin-top: 6px; font-size: 12.5px; color: #c62f2f; }
.osb-shake { animation: osb-ruetteln .32s cubic-bezier(.36,.07,.19,.97); }
@keyframes osb-ruetteln { 0%, 100% { translate: 0; } 20% { translate: -6px; } 40% { translate: 6px; } 60% { translate: -4px; } 80% { translate: 3px; } }
.osb-actions { display: flex; gap: 10px; margin-top: 18px; }
.osb-primary { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--osb-action); color: var(--osb-action-ink); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: transform .16s, filter .2s; }
.osb-primary:hover { filter: brightness(1.06); }
.osb-primary svg { width: 16px; height: 16px; transition: transform .24s var(--ease); }
.osb-primary:hover svg { transform: translateX(3px); }
.osb-ghost { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--osb-paper-line); background: transparent; color: var(--osb-paper-ink); font-weight: 600; font-size: 14.5px; cursor: pointer; }
.osb-ghost:hover { background: #f3f4f7; }
.osb-ticket { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); border-radius: 18px; background: var(--osb-paper); box-shadow: 0 30px 60px -24px rgba(0,0,0,.55);
  -webkit-mask: radial-gradient(circle 10px at 104px 0, transparent 97%, #000 100%) top/100% 51% no-repeat, radial-gradient(circle 10px at 104px 100%, transparent 97%, #000 100%) bottom/100% 51% no-repeat;
  mask: radial-gradient(circle 10px at 104px 0, transparent 97%, #000 100%) top/100% 51% no-repeat, radial-gradient(circle 10px at 104px 100%, transparent 97%, #000 100%) bottom/100% 51% no-repeat; }
.osb-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 22px 8px; background: var(--osb-slab); color: var(--osb-slab-ink); border-radius: 18px 0 0 18px; border-right: 2px dashed color-mix(in srgb, var(--osb-slab-ink) 30%, transparent); }
.osb-stub small { font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.osb-stub strong { font-family: var(--osb-display); font-weight: 800; font-size: 52px; line-height: 1; letter-spacing: -.04em; }
.osb-tbody { position: relative; padding: 22px 20px 20px; color: var(--osb-paper-ink); }
.osb-tbody > p:first-of-type { padding-right: 64px; }
.osb-press { position: absolute; right: 8px; top: 6px; width: 92px; height: 92px; color: var(--osb-action); opacity: .92; transform: rotate(-12deg); mix-blend-mode: multiply; pointer-events: none; animation: osb-stempel .36s cubic-bezier(.3,0,.25,1) both .42s; }
.osb-tbody h3 { margin: 0; font-family: var(--osb-display); font-weight: 800; font-size: 24px; letter-spacing: -.025em; }
.osb-tbody p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--osb-paper-muted); }
.osb-tbody p b { color: var(--osb-paper-ink); font-weight: 650; }
.osb-tbody .osb-actions { margin-top: 16px; flex-wrap: wrap; }
.osb-tbody .osb-primary, .osb-tbody .osb-ghost { flex: none; height: 40px; font-size: 13.5px; padding: 0 15px; white-space: nowrap; }

/* Schmales Fenster: ein Tag zur Zeit, Tagesleiste und Liste statt Raster */
.osb-kompakt { display: none; }
.osb-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.osb-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--osb-win-muted); font-size: 11.5px; cursor: pointer; }
.osb-chip b { font-family: var(--osb-display); font-weight: 800; font-size: 17px; color: var(--osb-win-ink); }
.osb-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--osb-slab); }
.osb-chip:disabled { opacity: .35; cursor: default; }
.osb-chip[aria-pressed="true"] { background: var(--osb-action); color: var(--osb-action-ink); border-color: var(--osb-action); }
.osb-chip[aria-pressed="true"] b { color: var(--osb-action-ink); }
.osb-chip[aria-pressed="true"] i { background: var(--osb-action-ink); }
.osb-list { margin-top: 12px; }
.osb-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.osb-list .osb-slot { position: relative; left: auto; right: auto; height: 44px; max-width: none; margin: 0; width: 100%; font-size: 13.5px; -webkit-mask: none; mask: none; }
@container (max-width: 640px) {
  .osb-body { grid-template-columns: 1fr; }
  .osb-host { border-right: 0; border-bottom: 1px solid var(--osb-win-line); padding: 18px 16px; gap: 14px; }
  .osb-stamp { width: 60px; height: 60px; }
  .osb-meet { font-size: 21px; }
  .osb-agenda { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .osb-meta div + div { display: none; }
  .osb-opts { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: end; }
  .osb-opts .osb-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .osb-tz select { height: 40px; text-overflow: ellipsis; padding-right: 24px; }
  .osb-seg button { white-space: nowrap; font-size: 12.5px; height: 36px; }
  .osb-pick, .osb-calhead .osb-switch, .osb-legend, .osb-grid { display: none; }
  .osb-cal { padding: 16px 14px 18px; }
  .osb-month { font-size: 18px; }
  .osb-url { justify-content: flex-start; padding: 0 12px; }
  .osb-kompakt { display: block; }
  .osb-ticket { grid-template-columns: 84px minmax(0, 1fr); }
  .osb-stub strong { font-size: 42px; }
  .osb-card { top: 12px; }
}
@keyframes osb-settle { from { transform: rotate(0deg) translateY(10px); } to { transform: rotate(-2deg); } }
@keyframes osb-col-in { from { opacity: 0; transform: translateX(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes osb-wipe { from { clip-path: inset(-12px -6px 100% -6px); } to { clip-path: inset(-12px -6px 0 -6px); } }
@keyframes osb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes osb-spin { to { transform: rotate(360deg); } }
@keyframes osb-ping { 0% { opacity: .7; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes osb-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes osb-klappen { 0% { transform: perspective(1000px) rotateX(-90deg); } 68% { transform: perspective(1000px) rotateX(9deg); } 100% { transform: perspective(1000px) rotateX(0deg); } }
@keyframes osb-stempel { 0% { transform: rotate(-26deg) scale(1.8); opacity: 0; } 62% { transform: rotate(-12deg) scale(.9); opacity: .95; } 100% { transform: rotate(-12deg) scale(1); opacity: .92; } }
@media (prefers-reduced-motion: reduce) { .osb *, .osb *::before, .osb *::after { animation: none !important; transition-duration: .01ms !important; } .osb-slab { transform: rotate(-2deg); } }
@media (max-width: 860px) { .osb { padding: 28px 18px 48px; } .osb-stage { margin-top: 30px; } .osb-slab { inset: -12px -10px -16px -8px; } }

/* ---------- Kampagnen, Berichte, Einstellungen ---------- */
.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--rand); margin-bottom: 22px; overflow-x: auto; }
.reiter button { border: 0; background: none; padding: 10px 12px; font-weight: 600; font-size: 13px; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.reiter button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.einstellung { display: grid; grid-template-columns: 260px 1fr; gap: 28px; padding: 22px 0; border-top: 1px solid var(--rand); }
.einstellung:first-of-type { border-top: 0; padding-top: 0; }
.einstellung h2 { margin: 0; font-size: 14px; font-weight: 600; }
.einstellung p { margin: 4px 0 0; color: var(--text-3); font-size: 12.5px; }
.einstellung-inhalt { display: grid; gap: 14px; max-width: 560px; }
.zeile-schalter { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--rand); border-radius: var(--radius-m); background: var(--flaeche); }
.zeile-schalter strong { display: block; font-size: 13.5px; }
.zeile-schalter span { font-size: 12.5px; color: var(--text-2); }
.team-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rand); }
.team-zeile:first-child { border-top: 0; }
.team-zeile strong { display: block; font-size: 13.5px; }
.team-zeile span { font-size: 12.5px; color: var(--text-3); }
.team-zeile .auswahl-huelle { margin-left: auto; width: 140px; }
.team-zeile .auswahl { min-height: 32px; font-size: 12.5px; }

.bericht { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.bericht-zahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.bericht-zahlen div { padding: 16px 18px; border-top: 1px solid var(--rand); }
.bericht-zahlen div:nth-child(odd) { border-right: 1px solid var(--rand); }
.bericht-zahlen dt { font-size: 12px; color: var(--text-3); }
.bericht-zahlen dd { margin: 4px 0 0; font-family: var(--font-data); font-size: 24px; letter-spacing: -.02em; }
.bericht-zahlen dd.hot { color: var(--glut-text); }
.zahlungsmittel { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--rand); border-radius: var(--radius-m); }
.zahlungsmittel .karte-symbol { width: 40px; height: 28px; border-radius: 5px; background: linear-gradient(135deg, var(--flaeche-3), var(--rand-stark)); }

/* ---------- Dialog, Toast, Zustände ---------- */
dialog { border: 1px solid var(--rand); border-radius: var(--radius-l); padding: 0; background: var(--flaeche); color: var(--text); width: min(520px, calc(100vw - 32px)); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .4); }
dialog::backdrop { background: rgba(8, 10, 14, .45); backdrop-filter: blur(2px); }
.dialog-kopf { padding: 18px 20px 0; }
.dialog-kopf h2 { margin: 0; font-size: 17px; }
.dialog-kopf p { margin: 6px 0 0; color: var(--text-2); font-size: 13px; }
.dialog-inhalt { padding: 16px 20px; display: grid; gap: 14px; }
.dialog-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--rand); background: var(--flaeche-2); border-radius: 0 0 var(--radius-l) var(--radius-l); }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%, 20px); opacity: 0;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px;
  background: var(--tinte); color: var(--tinte-text); font-weight: 600; font-size: 13px;
  transition: opacity .2s var(--ease), transform .2s var(--ease); pointer-events: none;
}
.toast.zeigen { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; font-weight: 600; }

.zustand { display: grid; place-items: center; text-align: center; gap: 10px; padding: 56px 24px; }
.zustand svg { width: 34px; height: 34px; color: var(--text-3); }
.zustand h2 { margin: 0; font-family: var(--font-display); font-size: 20px; letter-spacing: -.02em; }
.zustand p { margin: 0; color: var(--text-2); max-width: 440px; }
.zustand.fehler svg { color: var(--fehler); }
.skelett { border-radius: 8px; background: linear-gradient(90deg, var(--flaeche-3) 0%, var(--flaeche-2) 50%, var(--flaeche-3) 100%); background-size: 200% 100%; animation: schimmer 1.3s linear infinite; }
@keyframes schimmer { to { background-position: -200% 0; } }

/* Gehört nicht zum Entwurf: Steuerung des Prototyps, sitzt in der freien Fläche der Seitenleiste */
.prototyp-schalter {
  position: fixed; left: 12px; bottom: 132px; z-index: 40; width: calc(var(--sidebar) - 24px);
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border-radius: 10px; border: 1px dashed var(--rand-stark);
  font-size: 11px; color: var(--text-3);
}
.prototyp-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.prototyp-zu {
  display: grid; place-items: center; width: 20px; height: 20px; margin: -3px -3px -3px 0;
  border: 0; border-radius: 5px; background: none; color: var(--text-3); cursor: pointer;
}
.prototyp-zu:hover { background: var(--flaeche-3); color: var(--text); }
.prototyp-zu svg { width: 13px; height: 13px; }
.prototyp-schalter .segment { display: grid; grid-template-columns: repeat(4, 1fr); }
.prototyp-schalter .segment button { height: 24px; font-size: 11px; padding: 0 4px; }
.prototyp-schalter .links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.prototyp-schalter .links .knopf { height: 24px; padding: 0 2px; font-size: 10.5px; }

/* ---------- Mobil ---------- */
.tabbar { display: none; }
@media (max-width: 1180px) {
  .postfach { grid-template-columns: 300px 1fr; }
  .pf-info { display: none; }
  .uebersicht > .s-8, .uebersicht > .s-4, .uebersicht > .s-7, .uebersicht > .s-5 { grid-column: span 12; }
  .wissen { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .leiste { display: none; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--flaeche); border-top: 1px solid var(--rand);
  }
  .tabbar a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 0; font-size: 10.5px; font-weight: 600; color: var(--text-3); text-decoration: none; border-radius: 8px; }
  .tabbar a[aria-current="page"] { color: var(--text); }
  .tabbar svg { width: 20px; height: 20px; }
  .tabbar .zaehler { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--glut); color: #fff; font-family: var(--font-data); font-size: 10px; line-height: 16px; }
  .seite { padding: 4px 16px 96px; }
  .seite.breit { height: calc(100vh - 64px - 56px); }
  .werkzeuge { height: 56px; padding: 0 16px; }
  .werkzeuge .nur-mobil { display: inline-flex; }
  .demo-hinweis .chip, .demo-zurueck { display: none; }
  .kopf h1 { font-size: 26px; }
  .postfach { grid-template-columns: 1fr; height: 100%; }
  .postfach .pf-verlauf { display: none; }
  .postfach.offen .pf-liste { display: none; }
  .postfach.offen .pf-verlauf { display: flex; }
  .zurueck { display: inline-flex; }
  .pf-verlauf-kopf { padding: 10px 12px; }
  .pf-verlauf-kopf .kopf-aktionen .knopf:not(.immer) { display: none; }
  .pf-nachrichten { padding: 16px 14px 8px; }
  .entwurf { margin: 6px 10px 12px; }
  .richtungen { display: none; }
  .kennzahlen { grid-template-columns: 1fr 1fr; }
  .kennzahl:nth-child(3) { border-left: 0; padding-left: 0; }
  .kennzahl:nth-child(n+3) { border-top: 1px solid var(--rand); }
  .glut-wert .zahl { font-size: 38px; }
  .tracker { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .kanban { grid-template-columns: repeat(5, 78vw); scroll-snap-type: x mandatory; }
  .spalte { scroll-snap-align: start; }
  .tabelle-huelle { overflow-x: auto; }
  .ob { grid-template-columns: minmax(0, 1fr); }
  .ob > * { min-width: 0; }
  .ob-leiste { position: static; height: auto; padding: 18px 16px; }
  .ob-schritte { display: flex; overflow-x: auto; }
  .ob-schritte small { display: none; }
  .ob-schritte button span { white-space: nowrap; }
  .ob-haupt { padding: 24px 16px 120px; }
  .ob-haupt h1 { font-size: 30px; }
  .ob-fuss { left: 0; padding: 12px 16px; }
  .raster-2, .paket, .einwand, .einstellung, .bericht { grid-template-columns: 1fr; }
  .prototyp-schalter { display: none; }
}