/* QDS: ruhig, schlicht, eine Lesespalte. Farben, Masse und Bewegung nur über Tokens. */
:root {
  /* Graureihe hell in gleichmässigen Stufen (Toni, 30.09.2026: «die grauen Farbtöne stimmen nicht»):
     Seite > Leiste > Hover/Aktiv > Knopf auf Hover > starke Linie. Alle Elemente der Leiste nutzen dieselben Stufen. */
  --grund: #faf9f6;
  --leiste: #f3f2ee;
  --flaeche: #ffffff;
  --auf-akzent: #ffffff;   /* Schrift und Knopf auf Akzent- und Fehlerflächen, in beiden Themen (Codeanalyse 001, C11) */
  --flaeche-2: #e9e7e1;
  --flaeche-3: #dfddd5;
  --linie: #e4e2db;
  --linie-stark: #cfccc2;
  --text: #1d1c1a;
  --text-2: #5f5d57;
  --text-3: #8f8d86;
  --akzent: #d52b1e;
  --knopf: #1d1c1a;
  --knopf-text: #ffffff;
  --ok: #2f7d4f;
  --ok-weich: #e6f2ea;
  --warn: #9a5b00;
  --warn-weich: #fbf0dc;
  --fehler: #b3261e;
  --fehler-weich: #fbe7e5;
  --markiert: #fdf1c7;
  --fokus: #8f8d86;
  --schatten: 0 1px 2px rgba(29, 28, 26, .04), 0 6px 20px rgba(29, 28, 26, .07);
  --schatten-gross: 0 2px 6px rgba(29, 28, 26, .06), 0 24px 64px rgba(29, 28, 26, .16);
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --menu: #ffffff;
  --menu-hover: var(--flaeche-2);   /* im dunklen Design heller als das Menü, sonst unsichtbar (Toni, 30.09.2026) */
  /* Schwebende Bausteine (Schublade, Bestätigung): Schleier und der breite helle Rahmen wie in ilearn (3px, Linienfarbe),
     damit sich die Fläche weich vom Schleier abhebt. Im dunklen Design kräftiger, sonst kaum sichtbar (Toni, 30.09.2026). */
  --schleier: rgba(29, 28, 26, .32);
  --schleier-karte: rgba(29, 28, 26, .4);
  --rahmen-schwebend: #e4e2db;
  --fehler-voll: var(--fehler);   /* Fläche mit weisser Schrift; im dunklen Design kräftig statt blassrosa (30.09.2026) */
  --zeile-hover: var(--flaeche-2);   /* hell wie der Hover der Projekte (Toni, 30.09.2026) */
  --zeile-aktiv: var(--zeile-hover);   /* aktiv gleich wie Hover (Toni, 30.09.2026) */
  --schrift-lesen: ui-serif, "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  --schrift-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --spalte: 46rem;
  --leiste-breite: 272px;
  --leiste-schmal: 56px;
  --radius: 12px;

  /* Abstandsraster (margin, padding, gap): nur diese Werte verwenden. a-4 = 1rem. */
  --a-05: .125rem;
  --a-1: .25rem;
  --a-15: .375rem;
  --a-2: .5rem;
  --a-25: .625rem;
  --a-3: .75rem;
  --a-35: .875rem;
  --a-4: 1rem;
  --a-5: 1.25rem;
  --a-6: 1.5rem;
  --a-7: 1.75rem;
  --a-8: 2rem;
  --a-9: 2.25rem;
  --a-10: 2.5rem;
  --a-12: 3rem;
  --weich: cubic-bezier(.2, .8, .2, 1);
  --dauer: .22s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --grund: #1c1b19;
    --leiste: #171715;
    --flaeche: #262522;
    --flaeche-2: #2e2d2a;
    --flaeche-3: #383733;
    --linie: #33322e;
    --linie-stark: #45433e;
    --text: #ecebe6;
    --text-2: #b1afa7;
    --text-3: #85837b;
    --akzent: #e5483b;
    --knopf: #ecebe6;
    --knopf-text: #1c1b19;
    --ok: #6cc08c;
    --ok-weich: #1f3327;
    --warn: #e0a64a;
    --warn-weich: #3a2e19;
    --fehler: #f08a80;
    --fehler-weich: #3d2220;
    --markiert: #4a3f18;
    --fokus: #85837b;
    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .28);
    --schatten-gross: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 64px rgba(0, 0, 0, .5);
    --menu: #302f2c;
    --menu-hover: #413f3b;
    --schleier: rgba(0, 0, 0, .6);
    --schleier-karte: rgba(0, 0, 0, .66);
    --rahmen-schwebend: #4a4843;
    --fehler-voll: #c42b20;
    --zeile-hover: #2e2d2a;
    --zeile-aktiv: var(--zeile-hover);
  }
}
/* Im Menü gewählt: Dunkel gilt unabhängig vom Gerät. */
:root[data-theme="dunkel"] {
  --grund: #1c1b19;
  --leiste: #171715;
  --flaeche: #262522;
  --flaeche-2: #2e2d2a;
  --flaeche-3: #383733;
  --linie: #33322e;
  --linie-stark: #45433e;
  --text: #ecebe6;
  --text-2: #b1afa7;
  --text-3: #85837b;
  --akzent: #e5483b;
  --knopf: #ecebe6;
  --knopf-text: #1c1b19;
  --ok: #6cc08c;
  --ok-weich: #1f3327;
  --warn: #e0a64a;
  --warn-weich: #3a2e19;
  --fehler: #f08a80;
  --fehler-weich: #3d2220;
  --markiert: #4a3f18;
  --fokus: #85837b;
  --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .28);
  --schatten-gross: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 64px rgba(0, 0, 0, .5);
  --menu: #302f2c;
  --menu-hover: #413f3b;
  --schleier: rgba(0, 0, 0, .6);
  --schleier-karte: rgba(0, 0, 0, .66);
  --rahmen-schwebend: #4a4843;
  --fehler-voll: #c42b20;
  --zeile-hover: #2e2d2a;
  --zeile-aktiv: var(--zeile-hover);
}
:root[data-theme="hell"] { color-scheme: light; }
:root[data-theme="dunkel"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font: 15px/1.5 var(--schrift); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--markiert); }

/* ── Marke ── */
.marke { display: inline-flex; align-items: center; gap: var(--a-2); font-weight: 650; font-size: 1.05rem; letter-spacing: .02em; text-decoration: none; }
/* Logo: schwarz im hellen, weiss im dunklen Design (auch «automatisch» über prefers-color-scheme). */
.logo { display: block; height: 1.75rem; width: auto; }
.marke.gross .logo { height: 2.75rem; }
.logo-dunkel { display: none; }
:root[data-theme="dunkel"] .logo-hell { display: none; }
:root[data-theme="dunkel"] .logo-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .logo-hell { display: none; }
  :root:not([data-theme="hell"]) .logo-dunkel { display: block; }
}
.marke.gross { font-size: 1.4rem; }

/* ── Knöpfe, Formulare ── */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--a-15); min-height: 2.5rem; padding: 0 var(--a-4); border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--flaeche); cursor: pointer; font-weight: 550; text-decoration: none; transition: background .15s, border-color .15s, opacity .15s, transform .1s; }
.knopf:hover { background: var(--flaeche-2); }
.knopf:active { transform: scale(.98); }
/* Text optisch mittig: die Schrift hat oben mehr Raum als unten, der Text sass in jedem Knopf zu tief (Toni, 05.10.2026:
   «die scheiss button sind oft so»). Zugeschnitten auf Grossbuchstaben und Grundlinie, dann mittig. */
.knopf, .icon-knopf { text-box: trim-both cap alphabetic; }
.knopf.primaer { background: var(--knopf); color: var(--knopf-text); border-color: var(--knopf); }
.knopf.primaer:hover { opacity: .88; }
.knopf.klein { min-height: 2rem; padding: 0 var(--a-3); font-size: .875rem; }
.knopf.gefahr { color: var(--fehler); }
.knopf.gefahr:hover { background: var(--fehler-weich); border-color: var(--fehler-weich); }
.ps-bezug { margin-top: var(--a-1); font-size: .8125rem; color: var(--text-3); }
.vorbild-gegenstand { display: block; margin-top: var(--a-1); font-size: .75rem; color: var(--text-3); }
.knopf:disabled { opacity: .5; cursor: default; }
.icon-knopf { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; text-decoration: none; transition: background .15s, color .15s, opacity .15s; }
.icon-knopf:hover { background: var(--flaeche-2); color: var(--text); }

.formular { display: grid; gap: var(--a-4); }
.formular label { display: grid; gap: var(--a-15); font-size: .875rem; font-weight: 550; color: var(--text-2); }
/* Felder und Knöpfe im Formular gleich hoch (44 px); vorher Felder über den Innenabstand ~45 px, Knopf 40 px (Toni, 30.09.2026). */
.formular input:not([type="checkbox"]):not([type="radio"]), .formular .knopf { min-height: 2.75rem; }
.formular input, .formular textarea { width: 100%; padding-inline: var(--a-35); padding-block: var(--a-25); border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--flaeche); color: var(--text); font-weight: 400; font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
.formular textarea { font-family: var(--schrift-mono); font-size: .875rem; line-height: 1.55; resize: vertical; }
.formular input:not([type="checkbox"]):not([type="radio"]) { padding-block: 0; }
/* Automatisch ausgefüllte Felder: Feldfarbe statt Gelb des Browsers */
.formular input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--flaeche) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); }
.formular input:focus, .formular textarea:focus { outline: 0; border-color: var(--text-3); box-shadow: 0 0 0 3px var(--flaeche-2); }
.formular h2 { margin: var(--a-3) 0 0; font-size: 1rem; }
.feld-hinweis { font-weight: 400; color: var(--text-3); font-size: .8125rem; }
.meldung { margin: 0 0 var(--a-4); padding: var(--a-3) var(--a-35); border-radius: 10px; font-size: .9375rem; }
.meldung.fehler { background: var(--fehler-weich); color: var(--fehler); }
.meldung.ok { background: var(--ok-weich); color: var(--ok); }
.gedaempft { color: var(--text-2); }

/* Sprachwahl: vier Kürzel als ruhige Segmentleiste */
.sprachwahl { display: inline-flex; gap: 2px; margin: 0; padding: 2px; border-radius: 8px; background: var(--flaeche-2); }
.sprachwahl button { min-width: 2rem; height: 1.6rem; padding: 0 var(--a-15); border: 0; border-radius: 6px; background: none; color: var(--text-2); font-size: .7rem; font-weight: 650; letter-spacing: .04em; cursor: pointer; transition: background .15s, color .15s; }
.sprachwahl button:hover { color: var(--text); }
.sprachwahl button[aria-current] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* ── Anmelden, Registrieren, Konto ── */
body.zugang { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--a-6) var(--a-4); }
.zugang-karte { width: 100%; max-width: 24rem; animation: auftauchen .35s var(--weich) both; }
.zugang-karte h1 { margin: var(--a-6) 0 var(--a-5); font: 650 1.65rem/1.2 var(--schrift); letter-spacing: -.02em; }
.zugang-karte .formular .knopf { margin-top: var(--a-1); }
.zugang-fuss { margin-top: var(--a-6); color: var(--text-2); font-size: .9375rem; }
.zugang-fuss a { font-weight: 550; }
.zugang-sprache { margin-top: var(--a-8); }
.zurueck { color: var(--text-2); text-decoration: none; font-size: .9375rem; transition: color .15s; }
.zurueck:hover { color: var(--text); }

/* ── App-Rahmen ── */
body.app { height: 100vh; height: 100dvh; overflow: hidden; }
.rahmen { display: flex; height: 100%; }
.haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Seitenleiste ── */
.leiste { position: relative; z-index: 10; width: var(--leiste-breite); flex: none; display: flex; flex-direction: column; background: var(--leiste); border-right: 1px solid var(--linie); overflow-x: clip; transition: width var(--dauer) var(--weich); }
.leiste-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a-2); height: 3.5rem; padding: 0 var(--a-25) 0 var(--a-4); flex: none; }
.leiste-kopf .marke { min-width: 0; transition: opacity var(--dauer) var(--weich); }
.beschriftung { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .16s var(--weich); }

.leiste-nav { display: grid; gap: var(--a-05); padding: var(--a-1) var(--a-25) var(--a-2); flex: none; }
.nav-knopf { display: flex; align-items: center; gap: var(--a-25); width: 100%; height: 2.25rem; padding: 0 var(--a-15); border: 0; border-radius: 8px; background: none; text-decoration: none; text-align: left; font-size: .9rem; color: var(--text); cursor: pointer; transition: background .15s; }
.nav-knopf:hover { background: var(--zeile-hover); }
.nav-icon { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none; color: var(--text-2); }
.nav-icon svg { width: 18px; height: 18px; }
.nav-icon.plus { border-radius: 50%; background: var(--akzent); color: var(--auf-akzent); }
.nav-icon.plus svg { width: 15px; height: 15px; stroke-width: 2.2; }
.nav-knopf.neu { font-weight: 550; }

.gespraeche { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--a-25) var(--a-4); transition: opacity .16s var(--weich), visibility .16s; scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; }
.gruppe-titel { position: sticky; top: 0; z-index: 1; margin: 0; padding: var(--a-4) var(--a-25) var(--a-15); background: var(--leiste); font-size: .75rem; font-weight: 600; color: var(--text-3); white-space: nowrap; }
/* Chatliste wie bei Claude: der Titel nutzt die ganze Breite und blendet am Ende weich aus (keine «…»).
   Beim Überfahren wird die Ausblendung breiter und macht Platz für den Aktionsknopf. */
@property --blende { syntax: "<length>"; inherits: false; initial-value: 1.25rem; }
/* 2 px Lücke zwischen markierbaren Zeilen, die Zeilen dafür 2 px niedriger: gleicher Zeilenabstand wie vorher,
   aber zwei markierte Zeilen (aktiv und Hover) kleben nicht aneinander (Toni, 30.09.2026). */
.gespraech + .gespraech, .projekt-zeile + .projekt-zeile { margin-top: var(--a-05); }
.gespraech { position: relative; display: flex; align-items: center; min-height: calc(2.15rem - var(--a-05)); border-radius: 8px; transition: background .12s; }
.gespraech a { flex: 1; min-width: 0; padding: var(--a-15) var(--a-25); overflow: hidden; white-space: nowrap; text-decoration: none; font-size: .9rem; color: var(--text-2);
  --blende: 1.25rem;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--blende)), transparent calc(100% - .35rem));
  mask-image: linear-gradient(to right, #000 calc(100% - var(--blende)), transparent calc(100% - .35rem));
  transition: color .12s, --blende .22s var(--weich); }
.gespraech:hover, .gespraech:has(> [aria-expanded="true"]) { background: var(--zeile-hover); }
.gespraech:hover a, .gespraech:has(> [aria-expanded="true"]) a, .gespraech:focus-within a { color: var(--text); --blende: 4.2rem; }
.gespraech.aktiv { background: var(--zeile-aktiv); }
.gespraech.aktiv a { color: var(--text); }
.gespraech .icon-knopf, .projekt-zeile .icon-knopf { position: absolute; right: .2rem; top: 50%; width: 1.8rem; height: 1.8rem; margin: 0; transform: translateY(-50%); opacity: 0; transition: opacity .15s, background .12s; background: var(--flaeche-3); color: var(--text); }
.gespraech .icon-knopf svg, .projekt-zeile .icon-knopf svg { width: 18px; height: 18px; stroke-width: 3.4; }
.gespraech .icon-knopf:hover, .gespraech .icon-knopf[aria-expanded="true"], .projekt-zeile .icon-knopf:hover, .projekt-zeile .icon-knopf[aria-expanded="true"] { background: var(--linie-stark); }
.gespraech:hover .icon-knopf, .gespraech .icon-knopf[aria-expanded="true"], .gespraech .icon-knopf:focus-visible,
.projekt-zeile:hover .icon-knopf, .projekt-zeile .icon-knopf[aria-expanded="true"], .projekt-zeile .icon-knopf:focus-visible { opacity: 1; }

/* Menüs: kurzes, ruhiges Aufgehen */
.schwebe-menue, .konto-menu .menu { padding: var(--a-15); border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); box-shadow: var(--schatten); }
.schwebe-menue { position: fixed; z-index: 60; width: 14rem; background: var(--menu); border-color: var(--linie-stark); color: var(--text); max-height: min(24rem, calc(100vh - 16px)); overflow-y: auto; padding: var(--a-15); box-shadow: var(--schatten-gross); opacity: 0; transform: translateY(-3px) scale(.98); transform-origin: top right; transition: opacity .14s var(--weich), transform .14s var(--weich); }
.schwebe-menue.nach-oben { transform-origin: bottom right; }
.schwebe-menue.links { transform-origin: top left; }
.schwebe-menue.links.nach-oben { transform-origin: bottom left; }
.schwebe-menue.offen { opacity: 1; transform: none; }
.schwebe-menue button, .konto-menu .menu a, .konto-menu .menu button { display: block; width: 100%; padding: var(--a-2) var(--a-25); border: 0; border-radius: 7px; background: none; text-align: left; text-decoration: none; cursor: pointer; font-size: .9rem; transition: background .12s; }
.schwebe-menue button:hover, .schwebe-menue button:focus-visible, .konto-menu .menu a:hover, .konto-menu .menu button:hover { background: var(--menu-hover); outline: 0; }
.schwebe-menue button { min-height: 2.35rem; padding: var(--a-2) var(--a-3); font-size: .9rem; color: var(--text); line-height: 1.3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.schwebe-menue .gefahr, .schwebe-menue .gefahr:hover { color: var(--fehler); }
.schwebe-menue .gefahr:hover { background: var(--fehler-weich); }
.schwebe-menue button.mit-symbol { display: flex; align-items: center; gap: var(--a-25); }
.schwebe-menue button.mit-symbol svg { width: 1rem; height: 1rem; flex: none; color: var(--text-2); }
.schwebe-menue .menu-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-trenner { height: 1px; margin: var(--a-15) var(--a-2); background: var(--linie-stark); }
.menu-gruppe { padding: var(--a-2) var(--a-3) var(--a-1); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }

.leiste-fuss { flex: none; padding: var(--a-2) var(--a-25) var(--a-25); border-top: 1px solid var(--linie); }
.konto-menu { position: relative; }
/* Offenes Kontomenü darf über die (eingeklappte) Leiste hinausragen. */
.leiste:has(.konto-menu[open]) { overflow-x: visible; }
.konto-menu summary { display: flex; align-items: center; gap: var(--a-25); height: 2.75rem; padding: 0 var(--a-15); border-radius: 10px; cursor: pointer; list-style: none; transition: background .15s; }
.konto-menu summary::-webkit-details-marker { display: none; }
.konto-menu summary:hover, .konto-menu[open] summary { background: var(--flaeche-2); }
.avatar { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--text); color: var(--grund); font-size: .8rem; font-weight: 650; flex: none; }
.konto-name { font-size: .9rem; }
.konto-menu .menu { position: absolute; left: 0; bottom: calc(100% + .4rem); width: max(100%, 15rem); z-index: 20; transform-origin: bottom left; }
.konto-menu[open] .menu { animation: menu-auf .16s var(--weich); }
.menu-kopf { padding: var(--a-2) var(--a-25) var(--a-2); font-size: .8rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--linie); margin-bottom: var(--a-15); }
.menu-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); padding: var(--a-15) var(--a-15) var(--a-15) var(--a-25); font-size: .9rem; }
.konto-menu .menu form { margin: 0; }
.konto-menu .menu .sprachwahl button { width: auto; padding: 0 var(--a-15); }
.konto-menu .menu .design-wahl button { display: grid; place-items: center; width: 2.1rem; height: 1.6rem; min-height: 0; padding: 0; border-radius: 6px; color: var(--text-2); }
.konto-menu .menu .design-wahl svg { width: 16px; height: 16px; stroke-width: 1.7; }
.konto-menu .menu .design-wahl button[aria-pressed="true"] { color: var(--text); background: var(--flaeche); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.konto-menu .menu .design-wahl button:hover { background: var(--flaeche); }

/* Ziehgriff am rechten Rand */
.leiste-griff { position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; z-index: 11; cursor: col-resize; touch-action: none; }
.leiste-griff::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .15s .08s; }
.leiste-griff:hover::after, .leiste-griff:focus-visible::after, .leiste-zieht .leiste-griff::after { background: var(--linie-stark); }
.leiste-griff:focus-visible { outline: 0; }
.leiste-zieht, .leiste-zieht * { cursor: col-resize !important; user-select: none; }
.leiste-zieht .leiste { transition: none; }

/* Eingeklappt: schmale Symbolleiste */
.leiste-zu .leiste { width: var(--leiste-schmal); }
.leiste-zu .leiste-kopf { justify-content: center; padding: 0; }
.leiste-zu .leiste-kopf .marke { display: none; }
.leiste-zu .beschriftung { opacity: 0; pointer-events: none; }
.leiste-zu .gespraeche { opacity: 0; visibility: hidden; }
.leiste-zu .nav-knopf { justify-content: center; gap: 0; padding: 0; }
.leiste-zu .nav-knopf .beschriftung, .leiste-zu .konto-name { width: 0; }
.leiste-zu .konto-menu summary { justify-content: center; gap: 0; padding: 0; }
.leiste-zu .leiste { cursor: e-resize; }
.leiste-zu .leiste > * { cursor: auto; }

/* Hinweisschild für Symbole (per leiste.js an den Body gehängt) */
.tipp { position: fixed; z-index: 100; padding: var(--a-15) var(--a-2); border-radius: 6px; background: var(--knopf); color: var(--knopf-text); font-size: .75rem; font-weight: 550; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s var(--weich); }
.tipp.sichtbar { opacity: 1; transform: none; }

.schleier { position: fixed; inset: 0; z-index: 15; background: rgba(0, 0, 0, .32); animation: einblenden .2s ease both; }

/* ── Suche ── */
.suche-dialog { position: fixed; inset: 0; z-index: 50; display: grid; justify-items: center; align-items: start; padding: 12vh var(--a-4) var(--a-4); background: rgba(20, 19, 17, .22); opacity: 0; transition: opacity .16s ease; }
.suche-dialog.offen { opacity: 1; }
.suche-panel { width: 100%; max-width: 38rem; overflow: hidden; border: 1px solid var(--linie); border-radius: 16px; background: var(--flaeche); box-shadow: var(--schatten-gross); transform: translateY(-6px) scale(.985); transition: transform .18s var(--weich); }
.suche-dialog.offen .suche-panel { transform: none; }
.suche-feld { display: flex; align-items: center; gap: var(--a-25); padding: var(--a-35) var(--a-4); border-bottom: 1px solid var(--linie); color: var(--text-3); }
.suche-feld input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 1rem; color: var(--text); }
.suche-feld input::-webkit-search-cancel-button { display: none; }
kbd { padding: var(--a-05) var(--a-15); border: 1px solid var(--linie); border-radius: 5px; font: 600 .7rem var(--schrift); color: var(--text-3); }
.suche-treffer { max-height: min(60vh, 28rem); overflow-y: auto; padding: var(--a-15); }
.suche-eintrag { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--a-4); padding: var(--a-25) var(--a-3); border-radius: 10px; text-decoration: none; transition: background .12s; }
.suche-eintrag:hover, .suche-eintrag.gewaehlt { background: var(--flaeche-2); }
.suche-titel { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .9375rem; }
.suche-datum { grid-row: 1; grid-column: 2; font-size: .8rem; color: var(--text-3); }
.suche-ausschnitt { grid-column: 1 / -1; margin-top: var(--a-05); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .8125rem; color: var(--text-2); }
.suche-ausschnitt mark { padding: 0 .1em; border-radius: 3px; background: var(--markiert); color: inherit; }
.suche-leer { margin: 0; padding: var(--a-6); text-align: center; color: var(--text-3); font-size: .9rem; }

/* ── Chat ── */
.spalte { width: 100%; max-width: var(--spalte); margin: 0 auto; padding: 0 var(--a-6); }
.verlauf { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent;
  /* Text verschwindet weich hinter dem Eingabefeld statt hart abgeschnitten (wie ChatGPT). */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.75rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.75rem), transparent); }
/* Im Leerzustand gibt es keine Nachrichten: der leere Verlauf (88 px Abstände) lag sonst zwischen Kopfzeile und
   scrollender Eingabezone, der Inhalt verschwand weit unter der Kopfzeile (Toni, 30.09.2026). Die 5.5rem kommen als
   Abstand oben in die Eingabezone, damit Gruss und Eingabe in Ruhe am selben Ort stehen wie vorher. */
.haupt.ist-leer .verlauf { display: none; }
#nachrichten { padding-top: var(--a-9); padding-bottom: 3.25rem; }

/* Leerer Zustand: Gruss und Eingabe in der Mitte, wie ein leeres Blatt. */
.haupt.ist-leer .eingabe-zone { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; overflow-y: auto; padding-top: calc(18vh + 5.5rem); padding-bottom: var(--a-12); scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; }
.leer { animation: auftauchen .4s var(--weich) both; }
.gruss { display: flex; align-items: center; justify-content: center; gap: var(--a-3); margin: 0 0 var(--a-7); font: 400 2rem/1.2 var(--schrift-lesen); text-align: center; letter-spacing: -.01em; }
.gruss-kreuz { width: 1.6rem; height: 1.6rem; flex: none; }

.nachricht { margin-bottom: var(--a-7); animation: auftauchen .28s var(--weich) both; }
.ohne-einblenden .nachricht { animation: none; }
.nachricht.benutzer { display: flex; flex-direction: column; align-items: flex-end; }
/* Datum und Kopieren unter der eigenen Frage erst beim Darüberfahren (auf Touchgeräten immer, leise) */
.frage-aktionen { display: flex; align-items: center; gap: var(--a-1); margin-top: var(--a-1); opacity: 0; transition: opacity .15s; }
.nachricht.benutzer:hover .frage-aktionen, .frage-aktionen:focus-within { opacity: 1; }
@media (hover: none) { .frage-aktionen { opacity: .7; } }
.frage-zeit { font-size: .8125rem; color: var(--text-3); }
.frage-aktionen .icon-knopf { width: 2rem; height: 2rem; }
.frage-aktionen svg { width: 17px; height: 17px; }
.frage-aktionen .kopiert { color: var(--ok); }
.blase { max-width: 85%; padding: var(--a-25) var(--a-4); border-radius: 18px; background: var(--flaeche-2); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Eingabe, Sprechblase und Antwort gleich gross: 15 px wie der Seitentext (Toni, 30.09.2026). */
.antwort { font: 15px/1.7 var(--schrift); overflow-wrap: anywhere; }
.antwort > :first-child { margin-top: 0; }
.antwort > :last-child { margin-bottom: 0; }
.antwort p, .antwort ul, .antwort ol { margin: 0 0 var(--a-35); }
.antwort ul, .antwort ol { padding-left: var(--a-5); }
.antwort li { margin: var(--a-1) 0; }
.antwort h1, .antwort h2, .antwort h3 { margin: var(--a-5) 0 var(--a-25); font-family: var(--schrift); font-size: 1.05rem; font-weight: 650; line-height: 1.35; }
.antwort code { padding: .1em .35em; border-radius: 5px; background: var(--flaeche-2); font: .875em var(--schrift-mono); }
.antwort pre { margin: 0 0 var(--a-35); padding: var(--a-35) var(--a-4); overflow-x: auto; border-radius: 10px; background: var(--flaeche-2); }
.antwort pre code { padding: 0; background: none; }
.antwort blockquote { margin: 0 0 var(--a-35); padding: var(--a-25) var(--a-4); border-radius: 10px; background: var(--flaeche-2); color: var(--text-2); }
.antwort table { width: 100%; margin: 0 0 var(--a-35); border-collapse: collapse; font: .9375rem/1.5 var(--schrift); }
/* Breite Tabellen seitlich wischen statt rechts abschneiden (Gesamtprüfung Bausteine, 07.10.2026: Paris-Tabelle auf
   390 px ohne Spalte «Verbindung»); die App macht es gleich */
.antwort .tabelle-rahmen { margin: 0 0 var(--a-35); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.antwort .tabelle-rahmen > table { width: max-content; min-width: 100%; margin: 0; }
/* Spalte so breit wie ihr Inhalt, höchstens 16 rem, dann Umbruch (wie in der App: 56 bis 220 dp) */
.antwort .tabelle-rahmen th, .antwort .tabelle-rahmen td { max-width: 16rem; }
.antwort th, .antwort td { padding: var(--a-2) var(--a-25); border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.antwort a { color: var(--text); text-decoration-color: var(--text-3); text-underline-offset: 2px; }
.antwort .ref { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; margin: 0 var(--a-05); padding: 0 var(--a-15); border-radius: 6px; background: var(--flaeche-2); color: var(--text-2); font: 600 .7rem/1 var(--schrift); vertical-align: .15em; text-decoration: none; cursor: pointer; transition: background .12s, color .12s; }
.antwort .ref:hover { background: var(--linie-stark); color: var(--text); }
.antwort.schreibt > :last-child::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .25em; border-radius: 50%; background: var(--text); vertical-align: .05em; animation: puls 1s ease-in-out infinite; }
.denkt { display: inline-flex; gap: var(--a-15); padding: var(--a-25) 0; }
.denkt span { width: .42rem; height: .42rem; border-radius: 50%; background: var(--text-3); animation: puls 1.2s ease-in-out infinite; }
.denkt span:nth-child(2) { animation-delay: .15s; }
.denkt span:nth-child(3) { animation-delay: .3s; }
/* Arbeitsweg: was QDS gerade tut (Toni, 04.10.2026: «etwas cooles machen das man sieht was genau qds macht»).
   Wächter-Zeichen (Ring mit umlaufendem Bogen), aktueller Schritt mit Schimmer, Uhr; danach eine ruhige Zeile zum Aufklappen. */
.arbeit { margin: 0 0 var(--a-3); color: var(--text-3); font-size: .8125rem; }
.arbeit-zeile { display: flex; align-items: center; gap: var(--a-2); width: 100%; min-height: 1.75rem; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
.arbeit.fertig .arbeit-zeile { cursor: pointer; }
.arbeit-zeichen { display: inline-flex; flex: none; width: 1.05rem; height: 1.05rem; }
.arbeit-zeichen svg { width: 100%; height: 100%; overflow: visible; }
.arbeit-zeichen .ring { fill: none; stroke: var(--linie-stark); stroke-width: 2; }
.arbeit-zeichen .bogen { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-linecap: round; transform-origin: 10px 10px;
  animation: arbeit-dreh 1s linear infinite; }
.arbeit-zeichen .kern { fill: var(--akzent); transform-origin: 10px 10px; animation: arbeit-puls 1.6s ease-in-out infinite; }
.arbeit-jetzt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: linear-gradient(90deg, var(--text-3) 0%, var(--text-3) 35%, var(--text) 50%, var(--text-3) 65%, var(--text-3) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: arbeit-schimmer 1.8s linear infinite; }
.arbeit-jetzt.neu { animation: arbeit-schimmer 1.8s linear infinite, arbeit-auf .25s var(--weich) both; }
.arbeit-uhr { flex: none; margin-left: auto; font-size: .75rem; font-variant-numeric: tabular-nums; }
.arbeit-pfeil { display: none; flex: none; font-size: 1rem; line-height: 1; transition: transform .15s; }
.arbeit-seiten { display: flex; flex-wrap: wrap; gap: var(--a-1); margin-top: var(--a-1); padding-left: calc(1.05rem + var(--a-2)); }
.arbeit-seiten:empty { display: none; }
.arbeit-seite { padding: var(--a-05) var(--a-2); border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche);
  color: var(--text-2); font-size: .75rem; line-height: 1.4; animation: arbeit-auf .3s var(--weich) both; }
/* Fertig: ruhig, ohne Schimmer, Pfeil zum Aufklappen */
.arbeit.fertig .arbeit-jetzt { background: none; color: var(--text-3); animation: none; }
.arbeit.fertig .arbeit-zeichen .bogen, .arbeit.fertig .arbeit-zeichen .kern { animation: none; }
.arbeit.fertig .arbeit-zeichen .bogen { opacity: 0; }
.arbeit.fertig .arbeit-zeichen .kern { fill: var(--text-3); }
.arbeit.fertig .arbeit-pfeil { display: inline; }
.arbeit.fertig:not(.offen) .arbeit-seiten { display: none; }
.arbeit.offen .arbeit-pfeil { transform: rotate(90deg); }
.arbeit.fertig .arbeit-zeile:hover .arbeit-jetzt, .arbeit.fertig .arbeit-zeile:hover .arbeit-pfeil { color: var(--text-2); }
.arbeit-liste { display: grid; gap: var(--a-1); margin: var(--a-2) 0 0; padding: 0 0 0 calc(1.05rem + var(--a-2)); list-style: none; }
.arbeit-schritt { display: flex; align-items: baseline; gap: var(--a-2); }
.arbeit-punkt { flex: none; width: .375rem; height: .375rem; border-radius: 50%; background: var(--linie-stark); transform: translateY(-.1rem); }
.arbeit-schritt.persoenlich .arbeit-punkt { background: var(--akzent); }
.arbeit-text { min-width: 0; color: var(--text-2); }
.arbeit-zeit { flex: none; margin-left: auto; font-size: .75rem; font-variant-numeric: tabular-nums; }
@keyframes arbeit-dreh { to { transform: rotate(360deg); } }
@keyframes arbeit-puls { 0%, 100% { transform: scale(.75); opacity: .6; } 50% { transform: scale(1); opacity: 1; } }
@keyframes arbeit-schimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes arbeit-auf { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .arbeit-zeichen .bogen, .arbeit-zeichen .kern, .arbeit-jetzt, .arbeit-seite { animation: none; }
  .arbeit-jetzt { background: none; color: var(--text-2); }
}

.quellen { display: flex; flex-wrap: wrap; gap: var(--a-15); margin-top: var(--a-4); animation: einblenden .3s ease both; }
.quelle { display: inline-flex; align-items: center; gap: var(--a-15); max-width: min(18rem, 100%); padding: var(--a-15) var(--a-25) var(--a-15) var(--a-15); border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); font-size: .8125rem; text-decoration: none; color: var(--text-2); transition: background .15s, border-color .15s, color .15s; }
.quelle:hover, .quelle.hervor { border-color: var(--linie-stark); color: var(--text); background: var(--flaeche-2); }
.quelle-nr { display: grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 var(--a-1); border-radius: 5px; background: var(--flaeche-2); font-weight: 650; font-size: .7rem; }
.quelle-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.quelle-nr svg { width: .75rem; height: .75rem; stroke-width: 1.8; }
/* Quellen in der Schublade (Chat, 05.10.2026): Einträge untereinander, feine Trennlinien, keine farbigen Ränder */
.quellen-liste { display: grid; }
.quellen-eintrag { display: grid; gap: var(--a-1); padding: var(--a-3) var(--a-2); border-radius: 8px; color: var(--text); text-decoration: none; transition: background .15s; }
.quellen-eintrag + .quellen-eintrag { border-top: 1px solid var(--linie); }
.quellen-eintrag:hover, .quellen-eintrag.hervor { background: var(--flaeche-2); }
.quellen-eintrag-kopf { display: flex; align-items: center; gap: var(--a-2); min-width: 0; }
.quellen-eintrag-titel { font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.quellen-eintrag-art { margin: 0; color: var(--text-3); font-size: .75rem; }
.quellen-eintrag-auszug { margin: 0; color: var(--text-2); font-size: .8125rem; line-height: 1.5; }
/* Lizenz unter einem Eintrag (Wikipedia, CC BY-SA 4.0; 09.10.2026), gehört sichtbar zum Eintrag darüber */
.quellen-lizenz { justify-self: start; margin: calc(-1 * var(--a-2)) 0 0; padding: 0 var(--a-2) var(--a-3); color: var(--text-3); font-size: .75rem; text-decoration: none; }
.quellen-lizenz:hover { color: var(--text); text-decoration: underline; }
.quellen-lizenz + .quellen-eintrag { border-top: 1px solid var(--linie); }
/* Karte zu einer Quelle (statt Browser-Tooltip): Art, Titel, Auszug, Adresse; jede Angabe einmal (30.09.2026). */
.quelle-karte { position: fixed; z-index: 100; display: grid; gap: var(--a-1); width: max-content; max-width: min(24rem, calc(100vw - 1rem)); padding: var(--a-3); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); color: var(--text-2); font-size: .8125rem; line-height: 1.45; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s var(--weich); }
.quelle-karte.sichtbar { opacity: 1; transform: none; }
.qk-art, .qk-adresse { overflow: hidden; color: var(--text-3); font-size: .75rem; white-space: nowrap; text-overflow: ellipsis; }
.qk-titel { display: -webkit-box; overflow: hidden; color: var(--text); font-weight: 600; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qk-auszug { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.pruefung { display: flex; flex-wrap: wrap; gap: var(--a-15) var(--a-35); margin-top: var(--a-3); font-size: .8125rem; color: var(--text-3); animation: einblenden .3s ease both; }
.pruefung .gut::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.pruefung .vorbild::before { content: "↺ "; }
.pruefung .werkzeug-fehler { color: var(--warn); }
.pruefung .werkzeug-fehler::before { content: "! "; font-weight: 700; }
.warnung { margin-top: var(--a-3); padding: var(--a-2) var(--a-3); border-radius: 8px; background: var(--warn-weich); color: var(--warn); font-size: .875rem; }
/* Karte unter der Antwort (Orte aus OpenStreetMap und Schweiz Tourismus, Landeskarte swisstopo, 03.10.2026) */
.karte { height: 22rem; margin-top: var(--a-4); border-radius: 10px; border: 1px solid var(--linie); overflow: hidden; z-index: 0; }
.karte.ph { height: 22rem; border-radius: 10px; }
/* Legende unter der Karte: welche Linie zu Fuss, welche Bus oder Tram (Toni, 07.10.2026) */
.karte-legende { list-style: none; margin: var(--a-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a-1) var(--a-4);
  font-size: .8125rem; color: var(--text-2); }
.karte-legende li { display: flex; align-items: center; gap: var(--a-2); }
.karte-legende-zeichen { flex: none; width: 1.5rem; height: 6px; border-radius: 3px; }
.karte-legende-oev .karte-legende-zeichen { background: var(--akzent); }
.karte-legende-fuss .karte-legende-zeichen { background: radial-gradient(circle, #1a73e8 2.5px, transparent 3px) 0 50% / 8px 6px repeat-x; }
.karte-legende-direkt .karte-legende-zeichen { background: radial-gradient(circle, #2e7d32 2.5px, transparent 3px) 0 50% / 8px 6px repeat-x; }
.karte-legende-halt .karte-legende-zeichen { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--text);
  color: var(--flaeche); font-size: .625rem; font-weight: 700; display: grid; place-items: center; }
.karte-ort { display: flex; flex-direction: column; gap: var(--a-1); font-size: .8125rem; line-height: 1.35; }
.karte-ort strong { font-size: .875rem; }
.karte-links { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-top: var(--a-25); }
/* Knöpfe statt unterstrichener Links (Toni, 03.10.2026: «die links bitte schönere button machen») */
.karte-kasten .karte-knopf { display: inline-flex; align-items: center; padding: var(--a-1) var(--a-25); border-radius: 999px;
  border: 1px solid var(--linie-stark); background: var(--flaeche-2, var(--flaeche)); color: var(--text); font-size: .75rem;
  font-weight: 600; text-decoration: none; }
.karte-kasten .karte-knopf:hover { border-color: var(--text-3); }
/* Nadeln deutlich grösser als die Symbole der Basiskarte (Toni, 03.10.2026: «nadel mega klein») */
.karte-nadel { min-width: 1.85rem; height: 1.85rem; padding: 0 var(--a-15); border-radius: 999px; border: 2px solid #fff;
  background: var(--akzent); color: #fff; font: 700 .875rem/1 var(--schrift); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.karte-nadel:hover, .karte-nadel:focus-visible { transform: scale(1.12); outline: none; }
/* Start und Ziel als kleines Schild (Toni, 03.10.2026: «die punkte start und ziel sind viel zu gross») */
.karte-nadel.start, .karte-nadel.ziel { min-width: 0; height: 1.5rem; padding: 0 var(--a-2); border-radius: 6px; font-size: .75rem; }
.karte-nadel.start { background: var(--ok); }
.karte-nadel.halt { background: #1d1c1a; min-width: 1.5rem; height: 1.5rem; padding: 0 var(--a-2); border-radius: 6px; font-size: .75rem; }
/* Start, Ziel und Halte als Punkte ohne Schild (08.10.2026): Start grün, Ziel rot, Halt weiss mit dunklem Rand */
.karte-nadel.punkt { min-width: 0; width: 1.05rem; height: 1.05rem; padding: 0; border-radius: 50%; border-width: 3px; }
.karte-nadel.punkt.halt { width: .8rem; height: .8rem; background: #fff; border: 3px solid #1d1c1a; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.karte-nadel.punkt.start { background: var(--ok); }
.karte-nadel.punkt.ziel { background: var(--akzent); }
/* Ein einzelner Ort («zeig mir Zermatt»): Punkt ohne Nummer */
.karte-nadel.einzeln { min-width: 1.25rem; width: 1.25rem; height: 1.25rem; padding: 0; border-width: 3px; }
/* Kasten zur Nadel: eigene Farben je Design (im dunklen Design hatte er helle Schrift auf weissem Grund) */
.karte-kasten .maplibregl-popup-content { background: var(--flaeche); color: var(--text); padding: var(--a-3) var(--a-8) var(--a-3) var(--a-35);
  border-radius: 12px; box-shadow: var(--schatten-gross); }
/* × mit Abstand zum Text (Toni: «das x klebt zu sehr auf den text») */
.karte-kasten .maplibregl-popup-close-button { top: var(--a-2); right: var(--a-2); width: 1.6rem; height: 1.6rem; border-radius: 999px;
  color: var(--text-3); font-size: 1.15rem; line-height: 1; padding: 0; }
.karte-kasten .maplibregl-popup-close-button:hover { background: var(--flaeche-2, transparent); color: var(--text); }
.karte-kasten.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--flaeche); }
.karte-kasten.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--flaeche); }
.karte-kasten.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--flaeche); }
.karte-kasten.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--flaeche); }
/* Etwas kleiner (Toni, 03.10.2026: «die fonts in der infobx wenig kleiner machen»), Art und Zeiten grau darunter */
.karte-kasten .karte-ort { gap: var(--a-05); font-size: .8125rem; }
.karte-kasten .karte-ort strong { font-size: .875rem; }
.karte-kasten .karte-art { margin-top: var(--a-05); color: var(--text-3); font-size: .75rem; }
.karte-kasten .karte-sterne { margin-top: var(--a-05); color: var(--text-2); font-size: .75rem; font-weight: 600; }
/* Fünf Sterne, aktive in der Akzentfarbe, halbe möglich, übrige grau (Toni, 04.10.2026) */
.sterne { position: relative; display: inline-block; margin-right: var(--a-05); font-size: 1.05em; line-height: 1;
  letter-spacing: 0; white-space: nowrap; vertical-align: -.05em; }
.sterne-leer { color: var(--linie-stark); }
.sterne-voll { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--akzent); }
.sterne-voll.s0 { width: 0; } .sterne-voll.s1 { width: 10%; } .sterne-voll.s2 { width: 20%; } .sterne-voll.s3 { width: 30%; }
.sterne-voll.s4 { width: 40%; } .sterne-voll.s5 { width: 50%; } .sterne-voll.s6 { width: 60%; } .sterne-voll.s7 { width: 70%; }
.sterne-voll.s8 { width: 80%; } .sterne-voll.s9 { width: 90%; } .sterne-voll.s10 { width: 100%; }

@media (max-width: 600px) { .karte { height: 17rem; } }
.aktionen { display: flex; gap: var(--a-05); margin-top: var(--a-2); margin-left: -.45rem; animation: einblenden .3s ease both; }
.aktionen .icon-knopf { width: 2rem; height: 2rem; }
.aktionen svg { width: 17px; height: 17px; }
.aktionen .an { color: var(--text); background: var(--flaeche-2); }
.aktionen .kopiert { color: var(--ok); }
.korrektur-form { display: grid; gap: var(--a-25); margin-top: var(--a-3); padding: var(--a-35); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); animation: auftauchen .22s var(--weich) both; }
.korrektur-form p { margin: 0; font-size: .875rem; color: var(--text-2); }
.korrektur-form textarea { width: 100%; min-height: 6rem; padding: var(--a-25) var(--a-3); border: 1px solid var(--linie-stark); border-radius: 8px; background: var(--grund); resize: vertical; font-size: .9375rem; }
.korrektur-form .reihe { display: flex; gap: var(--a-2); justify-content: flex-end; }
.korrektur-danke { margin-top: var(--a-25); font-size: .875rem; color: var(--ok); animation: einblenden .25s ease both; }
.fehler-zeile { margin-top: var(--a-25); color: var(--fehler); font-size: .9rem; }
.fehler-zeile:empty { display: none; }

/* ── Eingabe ── */
.eingabe-zone { flex: none; padding-bottom: max(var(--a-25), env(safe-area-inset-bottom)); }
/* Eingabe wie bei Claude: oben der Text, unten die Leiste mit «+», Schweiz/Extern und Senden (Toni, 30.09.2026). */
.eingabe-box { display: flex; flex-direction: column; gap: var(--a-4); padding: var(--a-35) var(--a-3) var(--a-25) var(--a-4); border: 1px solid var(--linie-stark); border-radius: 22px; background: var(--flaeche); box-shadow: var(--schatten); transition: border-color .15s, box-shadow .2s; }
.eingabe-box:focus-within { border-color: var(--text-3); box-shadow: var(--schatten), 0 0 0 4px var(--flaeche-2); }
.eingabe-box textarea { width: 100%; min-height: 2.25rem; max-height: 14rem; padding: var(--a-15) var(--a-1) 0 0; border: 0; outline: 0; background: none; resize: none; font-size: 15px; line-height: 1.5; }
.eingabe-box textarea:focus-visible { outline: 0; }
.eingabe-leiste { display: flex; align-items: center; gap: var(--a-2); margin-left: calc(-1 * var(--a-15)); }
.leiste-luecke { flex: 1; }
/* eigene Klasse: «.plus» gehört dem Symbol bei «Neuer Chat» und verschob es (30.09.2026) */
.eingabe-plus { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; transition: background .15s, color .15s; }
.eingabe-plus:hover { background: var(--flaeche-2); color: var(--text); }
.eingabe-plus svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* Dateien im Chat: Kärtchen über dem Eingabefeld und über der gesendeten Frage (30.09.2026); wie .dokument */
.anhang-liste { display: flex; flex-wrap: wrap; gap: var(--a-2); min-width: 0; }
.anhang-liste[hidden] { display: none; }
.anhang-karte { display: inline-flex; align-items: center; gap: var(--a-2); max-width: 100%; min-width: 0; height: 2.5rem; padding: 0 var(--a-3); border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); font-size: .875rem; }
.anhang-karte > svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: var(--text-2); stroke-width: 1.6; stroke-linejoin: round; }
.anhang-name { min-width: 0; max-width: 16rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.anhang-groesse { flex: none; font-size: .75rem; color: var(--text-3); }
.anhang-karte.laedt .anhang-groesse { animation: puls 1.2s ease-in-out infinite; }
.anhang-karte .icon-knopf { width: 1.75rem; height: 1.75rem; margin-right: calc(-1 * var(--a-2)); }
.anhang-karte .icon-knopf svg { width: 14px; height: 14px; }
.nachricht.benutzer .anhang-liste { justify-content: flex-end; max-width: 85%; margin-bottom: var(--a-2); }
.bahn-schalter { display: inline-flex; padding: var(--a-05); border-radius: 8px; background: var(--flaeche-2); }
.bahn-schalter button { height: 1.5rem; padding: 0 var(--a-25); border: 0; border-radius: 6px; background: none; font-size: .78rem; color: var(--text-3); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.bahn-schalter button:hover { color: var(--text); }
.bahn-schalter button[aria-checked="true"] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--linie); }
.senden { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border: 0; border-radius: 50%; background: var(--knopf); color: var(--knopf-text); cursor: pointer; transition: opacity .15s, transform .1s; }
.senden:active { transform: scale(.94); }
.senden:disabled { opacity: .25; cursor: default; }
.senden svg { stroke-width: 2.2; }
.senden .stopp { display: none; fill: currentColor; stroke: none; }
.senden.laeuft .pfeil { display: none; }
.senden.laeuft .stopp { display: block; }
.hinweis { margin: var(--a-2) 0 0; text-align: center; font-size: .75rem; color: var(--text-3); }
/* Punkt neutral: rot las sich als Fehler (Toni, 05.10.2026: «der rote punkt zeigt eher das etwas nicht gut ist») */
.pruefung .bahn::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: var(--a-15); border-radius: 50%; background: var(--text-2); vertical-align: .05rem; }
.pruefung .bahn.extern::before { background: var(--text-3); }


/* ── Kopfzeile im Chat ── */
.nur-mobil { display: none; }
.kopfzeile { display: flex; align-items: center; gap: var(--a-2); height: 3.25rem; padding: 0 var(--a-4); flex: none; }
.kopf-pfad { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--a-15); font-size: .9375rem; }
.pfad-projekt { color: var(--text-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; transition: color .15s; }
.pfad-projekt:hover { color: var(--text); }
.kopf-aktionen { display: flex; align-items: center; gap: var(--a-15); }
.knopf.leise { min-height: 2rem; padding: 0 var(--a-3); border-color: transparent; background: none; color: var(--text-2); font-weight: 500; }
.knopf.leise:hover { background: var(--flaeche-2); color: var(--text); }
.knopf.leise svg { width: 16px; height: 16px; }
.text-knopf { margin-top: var(--a-6); padding: 0; border: 0; background: none; cursor: pointer; font-size: .875rem; color: var(--text-2); }
.icon-knopf.klein svg { width: 16px; height: 16px; }

/* ── Startbereich: Agentenkarte, Projekt-Chats ── */
.startbereich { margin-top: var(--a-5); animation: auftauchen .4s .05s var(--weich) both; }
/* Startseite: alles unter der Eingabe (Agentenkarte, Projekt-Chats) muss scrollen können,
   sonst schneidet der Fensterrand lange Karten ab (Toni, 27.09.2026). */
/* Workflows (Menü «+» → Workflows, 30.09.2026): Fenster wie die Suche, Kategorien als Knöpfe wie früher die Vorschläge */
.wf-kategorien { display: flex; gap: var(--a-15); padding: var(--a-25) var(--a-4); border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; }
.wf-kat { flex: none; padding: var(--a-15) var(--a-3); border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--text-2); font-size: .8125rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.wf-kat:hover { background: var(--flaeche-2); color: var(--text); }
.wf-kat[aria-pressed="true"] { background: var(--flaeche-2); color: var(--text); border-color: var(--linie-stark); font-weight: 500; }
.wf-eintrag { width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--a-3); border: 0; background: none; text-align: left; cursor: pointer; color: var(--text); }
.wf-eintrag > svg { grid-row: 1 / 3; align-self: start; width: 1.125rem; height: 1.125rem; margin-top: var(--a-05); color: var(--text-2); }
.wf-eintrag .suche-ausschnitt { grid-column: 2 / -1; }
.wf-kategorie { font-size: .75rem; color: var(--text-3); white-space: nowrap; }
.wf-hinweis { margin: 0; padding: var(--a-25) var(--a-4); border-top: 1px solid var(--linie); font-size: .75rem; color: var(--text-3); }
/* Im Chat über der Eingabe, so breit wie das Eingabefeld (Spalte ohne ihren Innenabstand) */
.agent-karte.ueber-eingabe { width: calc(100% - 2 * var(--a-6)); max-width: calc(var(--spalte) - 2 * var(--a-6)); margin: 0 auto var(--a-3); }
.start-block { margin-top: var(--a-8); }
.block-titel { margin: 0 0 var(--a-2); font-size: .75rem; font-weight: 600; color: var(--text-3); letter-spacing: .01em; }
/* Bündig mit Titel «Chats» und Eingabefeld: die Liste rückt um den Innenabstand der Einträge nach aussen, nur der
   Hover-Hintergrund ragt darüber hinaus (Toni, 30.09.2026: Text und Datum waren ein paar Pixel eingerückt). */
.chatliste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-05); margin: 0 calc(-1 * var(--a-3)); }
.chat-eintrag { display: flex; align-items: center; gap: var(--a-4); padding: var(--a-25) var(--a-3); border-radius: 10px; text-decoration: none; transition: background .12s; }
.chat-eintrag:hover { background: var(--flaeche-2); }
.chat-titel { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-datum { flex: none; font-size: .8125rem; color: var(--text-3); white-space: nowrap; }

.leer-text { margin: var(--a-2); color: var(--text-3); font-size: .9rem; }

/* ── Speicherstand und Dokumente (Projekt) ── */
.speicher-status { display: block; min-height: 1.2rem; margin-top: var(--a-15); font-size: .75rem; color: var(--ok); }
.dokumente { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-1); margin-bottom: var(--a-25); }
.dokument { display: flex; align-items: center; gap: var(--a-25); padding: var(--a-15) var(--a-1) var(--a-15) var(--a-3); border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); }
.dokument-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .875rem; }
.dokument-groesse { font-size: .75rem; color: var(--text-3); }
.dokument .icon-knopf { width: 1.75rem; height: 1.75rem; }
.dokument .icon-knopf svg { width: 14px; height: 14px; }
.ablagefeld { position: relative; display: grid; gap: var(--a-05); place-items: center; padding: var(--a-5) var(--a-4); border: 1.5px dashed var(--linie-stark); border-radius: 12px; text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.ablagefeld:hover { background: var(--flaeche-2); border-color: var(--text-3); }
.ablagefeld input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ablage-text { font-size: .875rem; }
.ablage-typen { font-size: .75rem; color: var(--text-3); }
/* Dokument aus einer Verbindung wählen (Toni, 07.10.2026): Suche und Liste in der Schublade, Knopf im Projekt */
.verbunden-wahl { display: grid; gap: var(--a-3); }
.verbunden-liste { display: grid; gap: var(--a-1); }
.verbunden-zeile { display: flex; align-items: center; gap: var(--a-3); min-height: 3.25rem; padding: var(--a-2) var(--a-3); border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.verbunden-zeile:hover { background: var(--zeile-hover); }
.verbunden-zeile:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.verbunden-zeile svg { flex: none; width: 18px; height: 18px; color: var(--text-3); }
.verbunden-text { display: grid; gap: var(--a-05); min-width: 0; }
.verbunden-text b { font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.verbunden-text small { color: var(--text-3); font-size: .8125rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.verbunden-knopf { justify-self: start; margin-top: var(--a-3); }
/* Google-Auswahl offen: Text der Seite dahinter ausblenden, er schaute je nach Bildschirm hervor (Toni, 07.10.2026) */
#google-auswahl.picker-offen > * { visibility: hidden; }
/* Eigene Drive-Ansicht (Toni, 07.10.2026: «mach es einfach richtig gut und fertig»): breitere Schublade, Spalten Name,
   Geändert, Grösse; Häkchen je Zeile; nicht lesbare Dateien blass; Platzhalter mit Schimmer statt «…»; Ablagefläche */
.schublade.schublade-breit { width: min(760px, 100vw); }
.drive { --drive-raster: 1.25rem 1.5rem minmax(0, 1fr) 7.5rem 4.5rem; position: relative; display: grid; gap: var(--a-3); }
.drive-kopf { display: flex; gap: var(--a-2); align-items: stretch; }
.drive-kopf .feld { flex: 1; min-width: 0; }
.drive-kopf .knopf { flex: none; }
.drive-kopf .knopf svg { width: 16px; height: 16px; }
.drive-pfad { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-1); min-height: 1.75rem; font-size: .8125rem; color: var(--text-3); }
.drive-pfad-teil { padding: var(--a-05) var(--a-15); border: 0; border-radius: 6px; background: none; color: var(--text-2); font: inherit; cursor: pointer; }
.drive-pfad-teil:hover:not(:disabled) { background: var(--zeile-hover); }
.drive-pfad-teil:disabled, .drive-pfad-teil.aktiv { color: var(--text); font-weight: 600; cursor: default; }
.drive-pfad-trenner { color: var(--text-3); }
.drive-spalten { display: grid; grid-template-columns: var(--drive-raster); gap: var(--a-3); align-items: center; padding: 0 var(--a-3) var(--a-15); border-bottom: 1px solid var(--linie); }
.drive-spalten > span:first-child { grid-column: span 2; }
.drive-spalte { padding: 0; border: 0; background: none; color: var(--text-3); font: inherit; font-size: .75rem; font-weight: 600; text-align: left; cursor: pointer; }
.drive-spalte:hover { color: var(--text); }
.drive-spalte.spalte-groesse { text-align: right; }
.drive-liste { display: grid; gap: 2px; }
.drive-gruppe { margin: var(--a-3) 0 var(--a-1) var(--a-3); font-size: .75rem; font-weight: 600; color: var(--text-3); }
.drive-gruppe:first-child { margin-top: 0; }
.drive-zeile { display: grid; grid-template-columns: var(--drive-raster); gap: var(--a-3); align-items: center; min-height: 3.25rem; padding: var(--a-15) var(--a-3); border-radius: 10px; transition: background .15s; }
.drive-zeile:hover:not(.platzhalter) { background: var(--zeile-hover); }
.drive-zeile.gesperrt { opacity: .5; }
.drive-haken { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--akzent); cursor: pointer; }
.drive-haken:disabled { cursor: not-allowed; }
.drive-zeichen { display: grid; place-items: center; color: var(--text-3); }
.drive-zeichen svg { width: 20px; height: 20px; }
.drive-zeichen.art-ordner { color: var(--text-2); }
.drive-name { display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.drive-name:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }
.drive-name-text { font-weight: 500; overflow-wrap: anywhere; }
.drive-name-unter { font-size: .75rem; color: var(--text-3); }
.drive-datum, .drive-groesse { font-size: .8125rem; color: var(--text-3); white-space: nowrap; }
.drive-groesse { text-align: right; }
.drive-leer { padding: var(--a-6) var(--a-3); text-align: center; }
.drive-ablage { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: var(--a-6); border: 2px dashed var(--text-3); border-radius: 14px; background: color-mix(in srgb, var(--flaeche) 92%, transparent); font-weight: 550; text-align: center; pointer-events: none; }
.ph { display: block; height: .75rem; border-radius: 6px; background: linear-gradient(90deg, var(--flaeche-2) 0%, var(--linie) 50%, var(--flaeche-2) 100%); background-size: 200% 100%; animation: ph-schimmer 1.3s ease-in-out infinite; }
.ph-kasten { width: 1rem; height: 1rem; border-radius: 4px; }
.ph-zeichen { width: 1.25rem; height: 1.25rem; }
.ph-name { width: 65%; }
.drive-zeile:nth-child(2n) .ph-name { width: 45%; }
.ph-datum { width: 5rem; }
.ph-groesse { width: 3rem; justify-self: end; }
@keyframes ph-schimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* Erstelltes Dokument unter der Antwort (Toni, 07.10.2026: «schön und perfekt»): Karte mit Zeichen je Art (Farben der
   Anbieter, nur im kleinen Zeichen), Name, Art und Grösse, Knöpfe rechts; auf dem Handy Knöpfe unter dem Text */
.dok-karte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "zeichen text knoepfe" ". status status"; column-gap: var(--a-3); row-gap: var(--a-1); align-items: center; margin-top: var(--a-4); padding: var(--a-3) var(--a-4); border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); }
.dok-zeichen { grid-area: zeichen; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9px; color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: -.02em; }
.dok-word { background: #2b579a; } .dok-excel { background: #217346; } .dok-ppt { background: #b7472a; }
.dok-gdoc { background: #4285f4; } .dok-gsheet { background: #0f9d58; } .dok-gslides { background: #f4b400; color: #3c2a00; }
.dok-pdf { background: #c62828; } .dok-csv { background: #217346; } .dok-txt { background: #5f6368; }
.dok-ics { background: #e8710a; } .dok-vcf { background: #6a3fb5; }
.dok-zeichen.lang { font-size: .6875rem; letter-spacing: .02em; }
.dok-web { background: #111111; }
/* Sport (Baustein «sport», 08.10.2026, Toni: «schau das es schön aussieht … mach was richtig richtig geiles»): Karte mit
   Kopf (Logo der Liga oder des Vereins), Spiele mit Logos und Resultat, Tabelle mit Formpunkten, Verein, Spieler, Rennen.
   Nur bestehende Tokens; Sieg, Niederlage und Form als kleine farbige Fläche, keine Randlinie links. */
.sport { margin-top: var(--a-4); border: 1px solid var(--linie); border-radius: 14px; background: var(--flaeche); overflow: hidden; }
.sport-kopf { display: flex; align-items: center; gap: var(--a-3); padding: var(--a-3) var(--a-4); border-bottom: 1px solid var(--linie); }
.sport-kopf b { font-weight: 650; font-size: .98rem; }
.sport-live-marke { margin-left: auto; display: inline-flex; align-items: center; gap: var(--a-15); font-size: .75rem; font-weight: 650; color: var(--fehler); }
.sport-live-marke::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--fehler); animation: sport-puls 1.4s ease-in-out infinite; }
@keyframes sport-puls { 50% { opacity: .3; } }
.sport-logo { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; }
.sport-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sport-logo.klein { width: 1rem; height: 1rem; }
/* Logos, die im Design verschwinden (antwortansicht.js logoArt, 08.10.2026): einfarbig hell oder dunkel umkehren,
   überwiegend hell oder dunkel mit Farbe eine feine Kontur. Hell ist die Grundeinstellung, dunkel kehrt es um. */
.sport-logo.einfarbig-weiss img { filter: invert(1); }
.sport-logo.einfarbig-hellrand img { filter: drop-shadow(0 0 .5px rgb(0 0 0 / .7)) drop-shadow(0 0 1px rgb(0 0 0 / .35)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .sport-logo.einfarbig-weiss img,
  :root:not([data-theme="hell"]) .sport-logo.einfarbig-hellrand img { filter: none; }
  :root:not([data-theme="hell"]) .sport-logo.einfarbig-schwarz img { filter: invert(1); }
  :root:not([data-theme="hell"]) .sport-logo.einfarbig-dunkelrand img { filter: drop-shadow(0 0 .6px rgb(255 255 255 / .95)) drop-shadow(0 0 1.2px rgb(255 255 255 / .6)); }
}
:root[data-theme="dunkel"] .sport-logo.einfarbig-weiss img,
:root[data-theme="dunkel"] .sport-logo.einfarbig-hellrand img { filter: none; }
:root[data-theme="dunkel"] .sport-logo.einfarbig-schwarz img { filter: invert(1); }
:root[data-theme="dunkel"] .sport-logo.einfarbig-dunkelrand img { filter: drop-shadow(0 0 .6px rgb(255 255 255 / .95)) drop-shadow(0 0 1.2px rgb(255 255 255 / .6)); }
.sport-logo.gross { width: 2rem; height: 2rem; }
.sport-logo.riesig { width: 4.5rem; height: 4.5rem; }
.sport-logo.foto { width: 5.5rem; height: 5.5rem; border-radius: 14px; background: var(--flaeche-2); overflow: hidden; align-items: end; }
.sport-logo.foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sport-logo-ersatz { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--flaeche-2); color: var(--text-3); font-size: .62rem; font-weight: 700; }
.sport-spiele { display: grid; }
.sport-spiel { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 4.25rem minmax(0, 1fr); grid-template-areas: "wann heim tore gast" "wann unten unten unten"; align-items: center; column-gap: var(--a-3); row-gap: var(--a-1); padding: var(--a-3) var(--a-4); }
.sport-spiel + .sport-spiel { border-top: 1px solid var(--linie); }
.sport-wann { grid-area: wann; display: grid; gap: 2px; align-self: start; padding-top: .2rem; }
.sport-wann b { font-size: .86rem; font-weight: 600; }
.sport-wann small { color: var(--text-3); font-size: .8rem; font-variant-numeric: tabular-nums; }
.sport-spiel.live .sport-wann b { color: var(--fehler); }
.sport-team { display: flex; align-items: center; gap: var(--a-2); min-width: 0; }
.sport-team.rechts { grid-area: heim; justify-content: flex-end; text-align: right; }
.sport-team:not(.rechts) { grid-area: gast; }
.sport-name { min-width: 0; overflow-wrap: anywhere; font-weight: 500; line-height: 1.25; }
.sport-team.hervor .sport-name { font-weight: 700; }
.sport-ergebnis { grid-area: tore; justify-self: center; display: inline-flex; align-items: baseline; justify-content: center; gap: 2px; min-width: 3.4rem; padding: .3rem .55rem; border-radius: 8px; background: var(--flaeche-2); font-weight: 700; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.sport-ergebnis sup { font-size: .6rem; font-weight: 600; color: var(--text-3); }
.sport-ergebnis.offen { color: var(--text-3); font-weight: 500; }
.sport-ergebnis.sieg { background: var(--ok-weich); color: var(--ok); }
.sport-ergebnis.niederlage { background: var(--fehler-weich); color: var(--fehler); }
/* Als Textzeile: das Liga-Logo bricht mit dem Text um und steht auf dem Handy nicht allein über ihm (08.10.2026) */
.sport-unten { grid-area: unten; display: block; color: var(--text-3); font-size: .78rem; line-height: 1.45; text-align: center; }
.sport-unten > .sport-logo { display: inline-grid; vertical-align: -.2em; margin-right: var(--a-15); }
.sport-unten > .sport-video { margin-left: var(--a-2); }
.sport-spiel .sport-team .sport-logo { width: 1.4rem; height: 1.4rem; }   /* wie in der Tabelle (Toni, 08.10.2026: «die logo einwenig zu gross») */
.sport-video { margin-left: auto; color: var(--text-2); text-decoration: none; font-weight: 600; }
.sport-video:hover { color: var(--text); }
.sport-tabelle-rahmen { margin: 0; }
.sport-tabelle { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sport-tabelle th { padding: var(--a-2) var(--a-15); color: var(--text-3); font-size: .74rem; font-weight: 600; text-align: left; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.sport-tabelle td { padding: var(--a-15); border-bottom: 1px solid var(--linie); white-space: nowrap; }
.sport-tabelle tr:last-child td { border-bottom: 0; }
.sport-tabelle .rang { width: 2.4rem; padding-left: var(--a-4); color: var(--text-3); font-variant-numeric: tabular-nums; }
.sport-tabelle td.team { min-width: 10rem; }
.sport-team-zelle { display: flex; align-items: center; gap: var(--a-2); }
.sport-tabelle td.team .sport-logo { width: 1.4rem; height: 1.4rem; }
.sport-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.sport-tabelle .spalte-pkt { font-weight: 700; }
.sport-tabelle .form { padding-right: var(--a-4); }
.sport-tabelle tr.hervor td { background: var(--flaeche-2); font-weight: 600; }
.form i { display: inline-block; width: .55rem; height: .55rem; margin-right: 3px; border-radius: 50%; background: var(--linie-stark); }
.form i.form-w { background: var(--ok); } .form i.form-l { background: var(--fehler); } .form i.form-d { background: var(--text-3); }
.rueckfrage-vorschlaege { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-top: var(--a-3); }   /* Rückfrage, 08.10.2026 */
.sport-hinweis, .sport-quelle, .sport-leer { margin: 0; padding: var(--a-2) var(--a-4); color: var(--text-3); font-size: .76rem; }
.sport-quelle { border-top: 1px solid var(--linie); }
.sport-leer { padding: var(--a-4); font-size: .9rem; }
.sport-verein { display: flex; gap: var(--a-4); align-items: flex-start; padding: var(--a-4); }
.sport-verein-text { display: grid; gap: var(--a-1); min-width: 0; }
.sport-verein-text h4 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.sport-verein-text p { margin: 0; }
.sport-fakten { display: flex; flex-wrap: wrap; gap: var(--a-15); margin-top: var(--a-1); }
.sport-pille { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; background: var(--text); color: var(--grund); font-size: .76rem; font-weight: 600; }
.sport-pille.leise { background: var(--flaeche-2); color: var(--text-2); font-weight: 500; }
.sport-web { font-size: .84rem; color: var(--text-2); text-decoration: none; margin-top: var(--a-1); }
.sport-beschreibung { color: var(--text-2); font-size: .88rem; line-height: 1.55; margin-top: var(--a-2) !important; }
.sport-unter { margin: 0; padding: var(--a-3) var(--a-4) var(--a-1); font-size: .76rem; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid var(--linie); }
.sport-rennen-zeile { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: var(--a-3); padding: var(--a-3) var(--a-4); }
.sport-rennliste .sport-rennen-zeile + .sport-rennen-zeile { border-top: 1px solid var(--linie); }
.sport-rennen-zeile .sport-wann { grid-area: auto; }     /* sonst griff die Fläche «wann» der Spielzeile (08.10.2026) */
.sport-rennen-text { display: grid; gap: 2px; min-width: 0; }
.sport-rennen-text small { color: var(--text-3); font-size: .8rem; }
.sport-resultat { margin: var(--a-1) 0 0; color: var(--text-2); font-size: .82rem; }
@media (max-width: 600px) {
  .sport-spiel { grid-template-columns: 3.6rem minmax(0, 1fr) 3.6rem minmax(0, 1fr); column-gap: var(--a-2); padding: var(--a-3); }
  .sport-team { flex-direction: column; gap: var(--a-1); text-align: center; }
  .sport-team.rechts { flex-direction: column-reverse; text-align: center; justify-content: center; }
  .sport-name { font-size: .84rem; }
  .sport-ergebnis { min-width: 3rem; padding: .25rem .4rem; font-size: .95rem; }
  /* Handy: Spiele, Differenz, Punkte (die Punkte waren im Eishockey rechts abgeschnitten, 08.10.2026) */
  .sport-tabelle .spalte-tore, .sport-tabelle .spalte-s, .sport-tabelle .spalte-u, .sport-tabelle .spalte-n,
  .sport-tabelle .spalte-sv, .sport-tabelle .spalte-nv, .sport-tabelle .form { display: none; }
  .sport-tabelle td.team { min-width: 7.5rem; }
  .sport-verein { flex-direction: column; }
}
.dok-text { grid-area: text; display: grid; gap: var(--a-05); min-width: 0; }
.dok-name { font-weight: 600; overflow-wrap: anywhere; }
.dok-info { color: var(--text-3); font-size: .8125rem; }
.dok-knoepfe { grid-area: knoepfe; display: flex; flex-wrap: wrap; gap: var(--a-2); justify-content: flex-end; }
.dok-knoepfe .knopf svg { width: 16px; height: 16px; }
.dok-status { grid-area: status; color: var(--text-3); font-size: .8125rem; }
.dok-status:empty { display: none; }
.dok-status a { color: var(--text-2); }
.dok-status.fehler { color: var(--fehler); }
.dok-karte + .dok-karte { margin-top: var(--a-2); }
/* Nur das ⋮-Menü rechts, auch auf dem Handy in derselben Zeile (Toni, 07.10.2026: «aufgeräumter») */
@media (prefers-reduced-motion: reduce) { .ph { animation: none; } }
@media (max-width: 600px) {
  .drive { --drive-raster: 1.25rem 1.5rem minmax(0, 1fr); }
  .drive-kopf { flex-wrap: wrap; }
  .drive-kopf .feld { flex-basis: 100%; }
  .drive-kopf .knopf { flex: 1; }
  .drive-datum, .drive-groesse, .drive-spalte.spalte-geaendert, .drive-spalte.spalte-groesse, .ph-datum, .ph-groesse { display: none; }
}
@media (max-width: 600px) { .drive-kopf { flex-wrap: wrap; } .drive-kopf .feld { flex-basis: 100%; } }
.ablage-hinweis { position: fixed; inset: .75rem; z-index: 60; display: grid; place-items: center; border: 2px dashed var(--text-3); border-radius: 18px; background: color-mix(in srgb, var(--grund) 86%, transparent); font-size: 1.1rem; font-weight: 550; pointer-events: none; animation: einblenden .15s ease both; }

/* ── Projekte in der Seitenleiste ── */
.leiste-projekte { flex: none; max-height: 34%; overflow-y: auto; padding: 0 var(--a-25) var(--a-1); transition: opacity .16s var(--weich), visibility .16s; scrollbar-width: thin; }
.gruppe-kopf { display: flex; align-items: center; justify-content: space-between; padding-right: var(--a-05); }
.gruppe-kopf .gruppe-titel { position: static; padding-bottom: var(--a-15); }
.gruppe-kopf .icon-knopf { margin-top: var(--a-25); color: var(--text-3); }
.gruppe-kopf .icon-knopf:hover { color: var(--text); }
.projekt { display: flex; align-items: center; gap: var(--a-2); height: calc(2.15rem - var(--a-05)); padding: 0 var(--a-25); border-radius: 8px; text-decoration: none; font-size: .9rem; color: var(--text-2); transition: background .12s, color .12s, box-shadow .12s; }
.projekt:hover { background: var(--zeile-hover); color: var(--text); }
.projekt.aktiv { background: var(--zeile-aktiv); color: var(--text); }
.projekt.ziel { background: var(--flaeche-3); box-shadow: inset 0 0 0 1.5px var(--text-3); }
/* Zeile mit 3-Punkte-Menü wie bei den Chats (Toni, 30.09.2026); der Name macht beim Zeigen Platz für den Knopf. */
.projekt-zeile { position: relative; }
.projekt-zeile:hover .projekt, .projekt-zeile:has(> [aria-expanded="true"]) .projekt { background: var(--zeile-hover); color: var(--text); padding-right: 2.3rem; }
.projekt-icon { display: grid; place-items: center; color: var(--text-3); }
.projekt-icon svg { width: 16px; height: 16px; }
.projekt-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gespraech[draggable="true"] { cursor: grab; }
.gespraech.zieht { opacity: .45; }
.schwebe-menue .projekt-ziel { color: var(--text); }
.leiste-zu .leiste-projekte { opacity: 0; visibility: hidden; max-height: 0; }

/* ── Hinweise unten ── */
.toasts { position: fixed; left: 50%; bottom: 1.5rem; z-index: 80; display: grid; gap: var(--a-2); justify-items: center; transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: center; gap: var(--a-4); max-width: min(34rem, calc(100vw - 2rem)); padding: var(--a-25) var(--a-3) var(--a-25) var(--a-4); border-radius: 12px; background: var(--knopf); color: var(--knopf-text); font-size: .875rem; box-shadow: var(--schatten-gross); pointer-events: auto; opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .2s var(--weich); }
.toast.sichtbar { opacity: 1; transform: none; }
.toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-aktion { flex: none; padding: var(--a-1) var(--a-25); border: 0; border-radius: 7px; background: rgba(255, 255, 255, .14); color: inherit; font-weight: 600; font-size: .8125rem; cursor: pointer; }
.toast-aktion:hover { background: rgba(255, 255, 255, .24); }

/* ── Formeln und eigene Quellen ── */
.antwort .formel { margin: var(--a-15) 0 var(--a-4); overflow-x: auto; overflow-y: hidden; }
.antwort .katex { font-size: 1.08em; }
.quelle.eigen .quelle-nr { background: var(--markiert); }

/* ── Geteilte Seite ── */
body.geteilt-seite { min-height: 100vh; }
.geteilt-kopf { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 3.5rem; padding: 0 var(--a-5) 0 var(--a-4); background: color-mix(in srgb, var(--grund) 92%, transparent); border-bottom: 1px solid var(--linie); }
/* Logo 16 px wie im Chat; Abstand oben auch schmal (die Regel für .spalte auf dem Handy setzte ihn auf 0, der Titel klebte
   an der Kopfzeile; 02.10.2026) */
.spalte.geteilt { padding-top: var(--a-10); padding-bottom: 4rem; }
.geteilt-titel { margin: 0 0 var(--a-15); font: 500 1.75rem/1.25 var(--schrift-lesen); }
.geteilt-von { margin: 0 0 var(--a-9); font-size: .875rem; }
.geteilt-fehlt { margin-top: 20vh; text-align: center; color: var(--text-2); }
/* Teilen mit Ablauf, Passwort, PDF und Weiterfragen (Toni, 02.10.2026) */
.geteilt-von { margin-bottom: var(--a-4); }
.geteilt-aktionen { display: flex; flex-wrap: wrap; gap: var(--a-2); margin: 0 0 var(--a-9); }
.geteilt-weiter { margin: 0; }
.geteilt-passwort { margin-top: var(--a-6); }
.teilen-optionen { display: grid; gap: var(--a-4); }
.teilen-link { display: flex; gap: var(--a-2); }
.teilen-link .feld { flex: 1; min-width: 0; }
.teilen-stand { display: grid; gap: var(--a-1); padding: var(--a-3) var(--a-4); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); font-size: .875rem; }
.freigabe-liste { display: grid; gap: var(--a-2); }
.freigabe-zeile { display: flex; align-items: center; gap: var(--a-3); padding: var(--a-3) var(--a-4); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.freigabe-zeile .freigabe-text { flex: 1; min-width: 0; display: grid; gap: var(--a-05); }
.freigabe-zeile .freigabe-text b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 550; }
.freigabe-zeile.inaktiv { opacity: .6; }
.teilen-team { margin-top: var(--a-4); padding-top: var(--a-4); border-top: 1px solid var(--linie); }
.einsicht-chat { display: grid; gap: var(--a-4); }
.ps-lernen { margin-top: var(--a-4); }
.ps-lernen .freigabe-liste { margin-top: var(--a-3); }
/* Hinweis der Belegprüfung unter der Antwort (02.10.2026): ein Etikett und Text, keine farbige Randlinie */
.beleg-hinweis { display: grid; gap: var(--a-1); margin: var(--a-3) 0; padding: var(--a-3) var(--a-4); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--warn-weich); font-size: .875rem; }
.beleg-hinweis b { color: var(--warn); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.beleg-hinweis p { margin: 0; }
/* Datenschutzseite (02.10.2026) */
.datenschutz .ds-teil { margin-bottom: var(--a-8); }
.datenschutz .geteilt-von { margin-bottom: var(--a-8); }
.datenschutz .ds-teil h2 { margin: 0 0 var(--a-2); font-size: 1.05rem; }
.datenschutz .ds-teil p { margin: 0; line-height: 1.6; }
.geteilt-kopf .sprachwahl { margin: 0; }
@media print {
  .geteilt-kopf, .geteilt-aktionen { display: none; }
  .geteilt { padding-top: 0; }
}


/* ── Agentenkarte ── */
.agent-karte { margin-top: var(--a-5); padding: var(--a-4) var(--a-4) var(--a-4); border: 1px solid var(--linie); border-radius: 16px; background: var(--flaeche); box-shadow: var(--schatten); opacity: 0; transform: translateY(6px); transition: opacity .2s var(--weich), transform .22s var(--weich); }
.agent-karte.offen { opacity: 1; transform: none; }
.agent-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--a-3); }
.agent-kopf h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.agent-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-3) var(--a-4); }
.agent-feld { display: grid; gap: var(--a-15); }
.agent-feld.typ-textarea, .agent-feld:has(input[name="wuensche"]), .agent-feld:has(input[name="ziel"]) { grid-column: 1 / -1; }
.feld-name { font-size: .8rem; font-weight: 550; color: var(--text-2); }
.agent-feld input, .agent-feld textarea, .agent-feld select { width: 100%; padding: var(--a-2) var(--a-3); border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--grund); font-size: .9375rem; transition: border-color .15s, box-shadow .15s; }
.agent-feld textarea { resize: vertical; line-height: 1.5; }
.agent-feld input:focus, .agent-feld textarea:focus, .agent-feld select:focus { outline: 0; border-color: var(--text-3); box-shadow: 0 0 0 3px var(--flaeche-2); }
.agent-fuss { display: flex; justify-content: flex-end; margin-top: var(--a-35); }
.agent-fuss .knopf { min-width: 6rem; }
@media (max-width: 800px) { .agent-felder { grid-template-columns: minmax(0, 1fr); } }


/* ── Gemerkt (unter der Antwort) ── */
.gemerkt { display: flex; align-items: center; gap: var(--a-3); margin-top: var(--a-2); font-size: .8125rem; color: var(--text-2); animation: einblenden .3s ease both; }
.gemerkt-text::before { content: "◎ "; color: var(--text-3); }
.gemerkt .text-knopf { margin: 0; font-size: .8125rem; color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }
.gemerkt.vergessen .gemerkt-text { text-decoration: line-through; color: var(--text-3); }

/* ── Einstellungen ── */
.einstellungen { max-width: 40rem; margin: 0 auto; padding: var(--a-8) var(--a-5) 5rem; animation: auftauchen .35s var(--weich) both; }
.einstellungen h1 { margin: var(--a-4) 0 var(--a-6); font: 650 1.75rem/1.2 var(--schrift); letter-spacing: -.02em; }
.einstellungen .block { padding: var(--a-6) 0; border-top: 1px solid var(--linie); }
.einstellungen h2 { margin: 0 0 var(--a-15); font-size: 1.05rem; }
.einstellungen .block > .gedaempft { margin: 0 0 var(--a-4); font-size: .875rem; }
.block-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a-4); }
.block-kopf:has(.schalter) + p { padding-right: var(--a-12); }   /* Text läuft nicht unter den Schalter */
.zeilen { display: grid; }
.zeile { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: var(--a-4); min-height: 3rem; padding: var(--a-15) 0; }
.zeile > span:first-child { font-size: .9rem; font-weight: 550; }
.zeile small { display: block; font-weight: 400; font-size: .75rem; color: var(--text-3); }
.zeile.hoch { align-items: start; }
.zeile input, .zeile textarea { width: 100%; padding: var(--a-2) var(--a-3); border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--flaeche); font-size: .9375rem; transition: border-color .15s, box-shadow .15s; }
.zeile textarea { resize: vertical; line-height: 1.5; }
.zeile input:focus, .zeile textarea:focus { outline: 0; border-color: var(--text-3); box-shadow: 0 0 0 3px var(--flaeche-2); }
.zeile .wert { font-size: .9375rem; }
.zeile .sprachwahl { justify-self: start; }
.segment { display: inline-flex; justify-self: start; gap: 2px; padding: 2px; border-radius: 9px; background: var(--flaeche-2); }
.segment button { padding: var(--a-15) var(--a-35); border: 0; border-radius: 7px; background: none; color: var(--text-2); font-size: .875rem; cursor: pointer; transition: background .15s, color .15s; }
.segment button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); font-weight: 550; }
.einstellungen .speicher-status { display: inline; margin-left: var(--a-15); }
/* Schalter im ganzen System: klein (34 × 20 px), eingeschaltet in der Akzentfarbe, nie am Text klebend (Toni, 30.09.2026). */
.schalter { position: relative; display: inline-block; flex: none; width: 2.125rem; height: 1.25rem; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; }
.schalter span[aria-hidden] { position: absolute; inset: 0; border-radius: 999px; background: var(--linie-stark); transition: background .18s; }
.schalter span[aria-hidden]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 50%; background: var(--auf-akzent); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .2s var(--weich); }
.schalter input:checked + span { background: var(--akzent); }
.schalter input:checked + span::after { transform: translateX(.875rem); }
.schalter input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.erinnerungen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-15); }
.erinnerung { display: flex; align-items: center; gap: var(--a-15); padding: var(--a-05) var(--a-1) var(--a-05) var(--a-3); border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); }
.erinnerung input { flex: 1; min-width: 0; padding: var(--a-2) 0; border: 0; outline: 0; background: none; font-size: .9375rem; }
/* gestrichelte Felder einheitlich wie das Ablagefeld: sonst kaum sichtbar (Toni, 30.09.2026) */
.erinnerung.neu { margin-top: var(--a-15); border: 1.5px dashed var(--linie-stark); background: none; }
.erinnerung-quelle { color: var(--text-3); text-decoration: none; padding: 0 var(--a-15); }
.erinnerung .icon-knopf { width: 1.9rem; height: 1.9rem; font-size: 1.1rem; }
.gedaechtnis-aus .erinnerungen, .gedaechtnis-aus .erinnerung.neu { opacity: .45; }
.formular.schmal { max-width: 22rem; }
/* Verbindungen (Einstellungen, 30.09.2026): Zeilen wie .dokument, Zustand als Etikett (.status gut/schlecht) */
.verbindungen-liste { display: grid; gap: var(--a-2); margin-top: var(--a-4); }
.verbindung { display: flex; align-items: center; gap: var(--a-3); min-height: 3.5rem; padding: var(--a-2) var(--a-15) var(--a-2) var(--a-4); border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); }
.verbindung-text { display: grid; gap: var(--a-05); flex: 1; min-width: 0; }
.verbindung-text b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.verbindung-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-3); font-size: .8125rem; }
.verbindung .status { flex: none; }
.knopf-gruppe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--a-2); }
a.knopf { text-decoration: none; }
/* Handy: zwei Knöpfe unter den Titel, je ganze Breite (Google und App-Passwort, 30.09.2026) */
@media (max-width: 600px) {
  .block-kopf:has(.knopf-gruppe) { flex-direction: column; align-items: stretch; gap: var(--a-3); }
  .knopf-gruppe { flex-direction: column; }
  .knopf-gruppe .knopf { justify-content: center; text-align: center; }
  .einstellungen .block-kopf:has(.knopf-gruppe) + .gedaempft { margin-top: var(--a-4); }
}
.verbindung-server { margin: 0 0 var(--a-5); }
.verbindung-server summary { padding: var(--a-15) 0; font-size: .875rem; color: var(--text-2); cursor: pointer; }
.verbindung-server[open] summary { margin-bottom: var(--a-3); }
.vorschau-liste { display: grid; gap: var(--a-1); margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.vorschau-liste li { padding: var(--a-2) 0; border-bottom: 1px solid var(--linie); overflow-wrap: anywhere; }
.daten-knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-25); }
.knopf.gefahr { color: var(--fehler); }
.knopf.gefahr-voll { background: var(--fehler-voll); border-color: var(--fehler-voll); color: var(--auf-akzent); }
.loeschen-form { display: grid; gap: var(--a-25); max-width: 26rem; margin-top: var(--a-4); padding: var(--a-4); border: 1px solid var(--fehler-weich); border-radius: 12px; background: var(--fehler-weich); animation: auftauchen .2s var(--weich) both; }
.loeschen-form p { margin: 0; font-size: .875rem; }
.loeschen-form input { padding: var(--a-2) var(--a-3); border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--flaeche); }
@media (max-width: 800px) { .zeile { grid-template-columns: minmax(0, 1fr); gap: var(--a-15); } }

/* ── Bewegung ── */
@keyframes auftauchen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-auf { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes puls { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Kontrollzentrale ── */
/* Logo links 16 px wie in der Chat-Leiste (.leiste-kopf), sonst springt es beim Wechsel vom Chat (Toni, 02.10.2026) */
.kz-kopf { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--a-4); height: 3.5rem; padding: 0 var(--a-6) 0 var(--a-4); border-bottom: 1px solid var(--linie); background: color-mix(in srgb, var(--grund) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.kz-kopf-titel { flex: 1; padding-left: var(--a-4); border-left: 1px solid var(--linie-stark); color: var(--text-2); font-size: .9375rem; }
.kz { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); max-width: 84rem; margin: 0 auto; }
.kz-nav { position: sticky; top: 3.5rem; display: flex; flex-direction: column; gap: 1px; height: calc(100vh - 3.5rem); padding: var(--a-5) var(--a-3) var(--a-8); overflow-y: auto; border-right: 1px solid var(--linie); }
.kz-nav a { display: flex; align-items: center; gap: var(--a-25); min-height: 2.25rem; padding: 0 var(--a-3); border-radius: 9px; color: var(--text-2); font-size: .9rem; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.kz-nav a:hover { background: var(--flaeche-2); color: var(--text); }
.kz-nav a[aria-current="page"] { background: var(--flaeche); color: var(--text); font-weight: 550; box-shadow: 0 0 0 1px var(--linie), 0 1px 2px rgba(29, 28, 26, .05); }
.kz-nav a:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.kz-nav svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kz-nav-gruppe { margin: var(--a-5) var(--a-3) var(--a-15); font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.kz-zahl { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; margin-left: auto; padding: 0 var(--a-15); border-radius: 999px; background: var(--akzent); color: var(--auf-akzent); font-size: .7rem; font-weight: 650; }
.kz-inhalt { min-width: 0; padding: var(--a-9) 2.75rem 5rem; }
/* Einstellungen im Aufbau der Kontrollzentrale (Toni, 02.10.2026): der frühere Rahmen .einstellungen (zentriert, eigene
   Abstände) gilt dort nicht; je Bereich ein Abschnitt ohne Trennlinie oben. */
.kz-inhalt.einstellungen { max-width: 48rem; margin: 0; padding: var(--a-9) 2.75rem 5rem; animation: none; }
.einstellungen-block > h2, .einstellungen-block > .block-kopf h2 { margin: 0 0 var(--a-15); font: 500 1.85rem/1.2 var(--schrift-lesen); }
.einstellungen-block > .gedaempft { margin: 0 0 var(--a-6); font-size: .9375rem; }
.kz-bereich { animation: auftauchen .25s var(--weich) both; }
.kz-titel { margin-bottom: var(--a-7); }
.kz-titel h1 { margin: 0; font: 650 1.75rem/1.2 var(--schrift); letter-spacing: -.02em; }   /* Toni, 18.10.2026: Serifenschrift passte nicht ins Bild */
.kz-titel p { max-width: 48rem; margin: var(--a-2) 0 0; font-size: .9375rem; line-height: 1.55; color: var(--text-2); }
.kz-titel-aktion { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--a-4); }   /* Verwaltung: Titel mit Knopf rechts (30.09.2026) */
.kz-titel-aktion .knopf { flex-shrink: 0; margin-top: var(--a-1); }
/* Suche und Filter über der Benutzertabelle: Desktop eine Zeile 3/4 und 1/4, Handy zwei Zeilen (Toni, 30.09.2026). */
.kz-werkzeug.verwaltung-werkzeug { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--a-2); margin-top: var(--a-6); }
.verwaltung-werkzeug .feld { width: 100%; }
.kz-text.verwaltung-fuss { margin-top: var(--a-5); }   /* Hinweis unter der Tabelle klebt nicht an ihr (30.09.2026) */
.grenze-teil { white-space: nowrap; }
/* Übersetzungen: vier gleich breite Sprachspalten, lange Texte brechen um statt die Tabelle zu verbreitern (30.09.2026). */
.texte-tabelle { table-layout: fixed; }
.texte-tabelle th.rechts { width: 3rem; }
.texte-tabelle td { vertical-align: top; overflow-wrap: anywhere; }
.zelle-notiz.wert-warn { color: var(--warn); }
.version-hinweis { margin: var(--a-8) 0 0; text-align: center; font-size: .8125rem; color: var(--text-3); }   /* Einstellungen: «QDS 0.7.0» (30.09.2026) */
/* Verlauf: Unterschied Feld für Feld (Feldname klein, grau), «angelegt» und «gelöscht» als Etikett (30.09.2026). */
.verlauf-diff { display: grid; gap: var(--a-1); overflow-wrap: anywhere; }
.verlauf-zeile { display: flex; flex-wrap: wrap; gap: var(--a-2); line-height: 1.45; }
.verlauf-feld { font-family: var(--schrift-mono); font-size: .75rem; color: var(--text-3); padding-top: .1rem; }
.verlauf-zeile.neu > span, .verlauf-zeile.weg > span { padding: 0 var(--a-2); border-radius: 6px; font-size: .75rem; font-weight: 600; }
.verlauf-zeile.neu > span { background: var(--ok-weich); color: var(--ok); }
.verlauf-zeile.weg > span { background: var(--fehler-weich); color: var(--fehler); }
/* Vergleich zweier Versionen in der Schublade: Unterschiede in Warnfarbe, Änderungen dazwischen mit feiner Trennlinie. */
.vergleich .wert-warn { color: var(--warn); font-weight: 600; }
.fassung-marke { margin-left: var(--a-2); vertical-align: middle; }   /* Kurzname bei der aktuellen Fassung (30.09.2026) */
#fassung-wahl { margin-left: var(--a-15); }   /* Wahl der Fassung in der Eingabeleiste, nur Admins */
/* Entwurf gewählt: der aktive Knopf in Warnfarbe, damit niemand aus Versehen im Entwurf weitertestet (30.09.2026). */
/* Nicht fett: der Schalter wurde sonst beim Wechsel breiter und wackelte (Toni, 05.10.2026) */
#fassung-wahl.entwurf button[aria-checked="true"] { background: var(--warn-weich); color: var(--warn); box-shadow: none; }
/* Freigabe-Prüfung in der Schublade: Punkt je Prüfung, Zeichen statt farbiger Randlinie (30.09.2026). */
.freigabe-liste { display: grid; gap: var(--a-3); margin-bottom: var(--a-5); }
.freigabe-punkt { display: flex; align-items: flex-start; gap: var(--a-3); }
.freigabe-punkt b { display: block; font-size: .875rem; font-weight: 600; }
.freigabe-punkt small { display: block; margin-top: var(--a-05); font-size: .8125rem; line-height: 1.45; color: var(--text-2); }
.freigabe-zeichen { display: grid; flex-shrink: 0; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; font-size: .75rem; font-weight: 700; }
.freigabe-punkt.gut .freigabe-zeichen { background: var(--ok-weich); color: var(--ok); }
.freigabe-punkt.warn .freigabe-zeichen { background: var(--warn-weich); color: var(--warn); }
/* Vergleichen: Frage oben, Auswahl in einer Zeile, zwei gleich breite Spalten; auf dem Handy untereinander. */
.vergleich-form { display: grid; gap: var(--a-3); }
/* Vergleichen in der Kontrollzentrale: beliebig viele Teilnehmer zum Ankreuzen, Spalten brechen um (02.10.2026) */
.vergleich-frage { margin: 0; }
.vergleich-liste { display: grid; gap: var(--a-2); }
.vergleich-teilnehmer { display: flex; align-items: center; gap: var(--a-2); font-size: .9375rem; cursor: pointer; }
.vergleich-teilnehmer small { margin-left: auto; }
.vergleich-teilnehmer input { accent-color: var(--knopf); }
.vergleich-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--a-4); margin-top: var(--a-6); }
.vergleich-spalte { min-width: 0; padding: var(--a-5); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.vergleich-kopf { display: grid; gap: var(--a-05); margin-bottom: var(--a-4); padding-bottom: var(--a-3); border-bottom: 1px solid var(--linie); }
.vergleich-kopf b { font-size: .9375rem; }
.vergleich-spalte .antwort { font-size: .9375rem; line-height: 1.6; overflow-wrap: anywhere; }
.vergleich-spalte .quellen { margin-top: var(--a-4); }
.vergleich-denkt { color: var(--text-3); font-size: .875rem; }
@media (max-width: 800px) {
  .vergleich-spalten { grid-template-columns: minmax(0, 1fr); }
}
/* Zeitraum und Balkendiagramm (kz.js, 30.09.2026). Ruhig (Toni: «alles tanzt komisch herum»): alle Elemente des
   Zeitraums gleich hoch (2.25rem), Diagramm mit fester Höhe, begrenzter Balkenbreite und Höchstmarke. */
.zeitraum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2); }   /* Abstand nach unten: Abstandsregel (10.10.2026) */
.zeitraum-wahl.feld { width: 14rem; }
.zeitraum-eigen { display: flex; align-items: center; gap: var(--a-2); }
.zeitraum-eigen[hidden] { display: none; }
.zeitraum-eigen .feld { width: 10rem; }
.zeitraum-eigen .knopf { min-height: 2.5rem; }
#verbrauch-diagramm { margin-top: var(--a-5); }   /* Kacheln kleben nicht am Diagramm (Seite API für Benutzer) */
#verbrauch-diagramm .balken-box { margin-bottom: var(--a-6); }   /* dort ohne Abstandsregel der Kontrollzentrale */
.balken-box { position: relative; margin: 0; padding: var(--a-5) var(--a-4) var(--a-4); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.balken-max { position: absolute; top: var(--a-2); left: var(--a-4); font-size: .72rem; color: var(--text-3); }
.balken-svg { display: block; width: 100% !important; height: 12rem !important; }
.balken-svg rect { stroke: none; }
.balken { fill: var(--text-2); }
.balken.zwei { fill: var(--akzent); }
.balken.drei { fill: var(--warn); }
.balken.vier { fill: var(--linie-stark); }   /* Admin und Tests (05.10.2026) */
.balken-raster { stroke: var(--linie); stroke-width: 1; vector-effect: non-scaling-stroke; }
.balken-ziel { fill: transparent; }
.balken-ziel:hover { fill: var(--flaeche-2); fill-opacity: .6; }
.balken-achse { display: flex; height: 1rem; margin-top: var(--a-1); font-size: .72rem; line-height: 1rem; color: var(--text-3); white-space: nowrap; }
.balken-achse span { overflow: visible; }
.balken-legende { display: flex; flex-wrap: wrap; gap: var(--a-4); margin-top: var(--a-3); font-size: .8125rem; color: var(--text-2); }
.balken-legende:empty { display: none; }
.balken-eintrag { display: inline-flex; align-items: center; gap: var(--a-15); }
.balken-eintrag i { width: .625rem; height: .625rem; border-radius: 2px; background: var(--text-2); }
.balken-eintrag.zwei i { background: var(--akzent); }
.balken-eintrag.drei i { background: var(--warn); }
.balken-eintrag.vier i { background: var(--linie-stark); }
.preis-zeile { max-width: 48rem; margin: calc(-1 * var(--a-2)) 0 var(--a-5); font-size: .875rem; color: var(--text-2); }
/* Preisrechner je Bahn (30.09.2026): Preise als Felder in der Tabelle; ein Preis über dem günstigsten Vergleichsmodell
   bekommt einen Rahmen in Warnfarbe (ganzer Rahmen, keine Randlinie links). Steuerung darunter mit Abstand. */
.preis-tabelle .preis-feld { width: 7rem; min-height: 2.25rem; height: 2.25rem; }
.preis-feld.ueber-markt { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.preis-steuerung { display: flex; flex-wrap: wrap; align-items: end; gap: var(--a-3); margin: var(--a-5) 0; }
.preis-steuerung .schublade-feld { width: 10rem; margin: 0; }
.preis-steuerung .knopf { min-height: 2.5rem; }
.rechner-ergebnis { max-width: 64rem; margin-bottom: var(--a-4); font-size: .875rem; color: var(--text-2); }
.rechner-ergebnis p { margin: 0; }
.rechner-liste { margin: 0; }
@media (max-width: 800px) {
  .preis-tabelle .preis-feld { width: 100%; }
  .preis-steuerung .schublade-feld { width: 100%; }
  .preis-steuerung .knopf { flex: 1; }
}
/* Handy: Auswahl ganz breit, darunter Von und Bis nebeneinander, Anwenden ganz breit. */
@media (max-width: 600px) {
  .zeitraum { display: grid; grid-template-columns: minmax(0, 1fr); }
  .zeitraum-wahl.feld { width: 100%; }
  .zeitraum-eigen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .zeitraum-eigen .feld { width: 100%; }
  .zeitraum-eigen .knopf { grid-column: 1 / -1; }
  .balken-svg { height: 9rem !important; }
}
/* API-Seite (30.09.2026): Schlüssel einmal im Klartext, Dokumentation mit Code-Blöcken und Begriffslisten. */
.schluessel-status { margin-left: var(--a-2); }
.schluessel-neu { display: grid; gap: var(--a-4); }
.schluessel-neu .meldung { margin: 0; }
.schluessel-klartext { display: block; padding: var(--a-3) var(--a-35); border-radius: 10px; background: var(--flaeche-2); font-family: var(--schrift-mono); font-size: .8125rem; overflow-wrap: anywhere; user-select: all; }
.doku .kz-unter { margin-top: var(--a-8); }
.doku-schritte { max-width: 48rem; margin: 0; padding-left: var(--a-5); font-size: .9375rem; line-height: 1.6; color: var(--text-2); }
.doku-titel { margin: var(--a-6) 0 var(--a-2); font-size: .875rem; font-weight: 600; }
.doku-code { max-width: 100%; margin: 0; padding: var(--a-4); overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); font-family: var(--schrift-mono); font-size: .8125rem; line-height: 1.55; }
.doku code { font-family: var(--schrift-mono); font-size: .85em; }
.doku p code, .doku li code, .doku dd code, .doku td code { padding: 0 var(--a-1); border-radius: 4px; background: var(--flaeche-2); overflow-wrap: anywhere; }
/* Ab 800 px bleiben kurze Angaben wie qds-0.1 zusammen; schmaler dürfen sie umbrechen (sonst lief die Seite über). */
@media (min-width: 801px) { .doku p code, .doku li code, .doku dd code { white-space: nowrap; } }
@media (min-width: 901px) and (max-width: 1100px) { #schluessel-liste th:nth-child(3), #schluessel-liste td:nth-child(3) { display: none; } }   /* Zuletzt benutzt */
.doku-liste { display: grid; grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr); gap: var(--a-3) var(--a-6); max-width: 60rem; margin: 0; font-size: .9375rem; line-height: 1.55; }
.doku-liste dt { font-weight: 600; }
.doku-liste dd { margin: 0; color: var(--text-2); }
@media (max-width: 800px) { .doku-liste { grid-template-columns: minmax(0, 1fr); gap: var(--a-1); } .doku-liste dd { margin-bottom: var(--a-3); } }
.bahn-schalter button { white-space: nowrap; }
/* Handy: zwei Umschalter und der Senden-Knopf passen nicht in eine Zeile (360 px schnitt den Knopf ab, 30.09.2026);
   die Wahl der Fassung (nur Admins) rutscht in eine eigene Zeile unter der Leiste. */
@media (max-width: 480px) {
  .eingabe-leiste:has(#fassung-wahl) { flex-wrap: wrap; row-gap: var(--a-2); }
  #fassung-wahl { order: 5; margin-left: 0; }
}
.tabelle .modell-id { word-break: break-all; }   /* lange IDs (mistralai/Mistral-…) brechen, statt die Tabelle zu verbreitern (30.09.2026) */
/* Mittlere Breite mit Seitennavigation (901 bis 1'100 px): bei den Modellen Modell-ID und Aufrufe (stehen in der Schublade), bei den Benutzern «Angelegt»
   (Toni, 30.09.2026: «die Modelle-Tabelle verschiebt alles»). */
@media (min-width: 901px) and (max-width: 1100px) {
  #verwaltung #modelle th:nth-child(3), #verwaltung #modelle td:nth-child(3),
  #verwaltung #modelle th:nth-child(6), #verwaltung #modelle td:nth-child(6),
  #verwaltung #benutzer th:nth-child(6), #verwaltung #benutzer td:nth-child(6),   /* Angelegt */
  #verwaltung #api-liste th:nth-child(3), #verwaltung #api-liste td:nth-child(3),   /* API: Bahn */
  #verwaltung #api-liste th:nth-child(4), #verwaltung #api-liste td:nth-child(4),   /* API: Zuletzt */
  #verwaltung #kosten-modelle th:nth-child(5), #verwaltung #kosten-modelle td:nth-child(5),   /* Kosten: Anteil */
  #verwaltung #abrechnung-liste th:nth-child(4), #verwaltung #abrechnung-liste td:nth-child(4),   /* Abrechnung: Tokens (in der CSV) */
  #verwaltung #markt-tabelle th:nth-child(4), #verwaltung #markt-tabelle td:nth-child(4) { display: none; }   /* Markt: Hinweis */
  #verwaltung .preis-tabelle .preis-feld { width: 5.5rem; }
}
.kz-unter { margin: var(--a-10) 0 var(--a-3); font-size: 1.05rem; font-weight: 600; }
/* Einleitungstext unter Zwischentiteln: unten fester Abstand, sonst klebt er an Karten und Tabellen (Toni, 30.09.2026) */
.kz-text { max-width: 48rem; margin: -.35rem 0 var(--a-4); font-size: .875rem; color: var(--text-2); }

/* Felder */
.feld { width: 100%; min-height: 2.5rem; padding: 0 var(--a-35); border: 1px solid var(--linie-stark); border-radius: 10px; background-color: var(--flaeche); color: var(--text); font: inherit; font-size: .9375rem; transition: border-color .15s, box-shadow .15s; }
.feld:hover { border-color: var(--text-3); }
.feld:focus { outline: 0; border-color: var(--text-3); box-shadow: 0 0 0 3px var(--flaeche-2); }
.feld::placeholder { color: var(--text-3); }
select.feld { appearance: none; -webkit-appearance: none; padding-right: var(--a-10); cursor: pointer; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238f8d86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1rem; }
textarea.feld { padding: var(--a-3) var(--a-35); line-height: 1.55; resize: vertical; }
.feld.mono { font-family: var(--schrift-mono); font-size: .8125rem; }

/* Kennzahlen und Übersicht */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--a-3); }
.kennzahl { padding: var(--a-4) var(--a-4); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.kennzahl b { display: block; font-size: 1.6rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kennzahl span { display: block; margin-top: var(--a-1); font-size: .8125rem; line-height: 1.35; color: var(--text-2); }
.kennzahl.achtung b { color: var(--fehler); }
.kennzahl.warn b { color: var(--warn); }
.kennzahl.gut b { color: var(--ok); }
.kz-konfig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-3); margin-bottom: var(--a-3); }
.kz-konfig-karte { display: grid; gap: var(--a-1); padding: var(--a-4) var(--a-4); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: var(--text); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.kz-konfig-karte:hover { box-shadow: var(--schatten); transform: translateY(-1px); }
/* Keine farbigen Randlinien links (Toni, 30.09.2026): der Zustand steht als Punkt vor dem Titel. */
.kz-konfig-titel { display: inline-flex; align-items: center; gap: var(--a-15); }
.kz-konfig-titel::before { content: ""; width: .45rem; height: .45rem; flex: none; border-radius: 50%; background: var(--text-3); }
.kz-konfig-karte.ch .kz-konfig-titel::before { background: var(--akzent); }
.kz-konfig-karte.ok .kz-konfig-titel::before { background: var(--ok); }
.kz-konfig-karte.warn .kz-konfig-titel::before, .kz-konfig-karte.aus .kz-konfig-titel::before { background: var(--warn); }
.kz-konfig-titel { font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.kz-konfig-karte b { font-size: 1.05rem; font-weight: 600; }
.kz-konfig-karte small { font-size: .8125rem; color: var(--text-3); }

/* Übersicht: Zustand und Wissen je Quelle (uebersicht.js) */
.ue-zustand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-3); }
/* Gleich aufgebaute Karten: Inhalt oben, nicht über die Höhe verteilt; drei Karten Wissen (Toni, 05.10.2026: «alles
   gleich hoch nicht so tanzend wie beim wissen») */
.ue-zustand .kz-konfig-karte { align-content: start; }
.ue-zustand.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ue-volumen { display: grid; gap: var(--a-3); margin-bottom: var(--a-4); }
.ue-volumen-kopf { display: grid; gap: var(--a-05); }
.ue-volumen-kopf b { font-size: 1.75rem; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ue-volumen-kopf span { font-size: .875rem; color: var(--text-2); }
.ue-zusammensetzung { margin-bottom: var(--a-6); }
.ue-zusammensetzung .matrix tbody th { min-width: 14rem; white-space: normal; }
.ue-zusammensetzung > summary { margin-bottom: var(--a-3); font-size: .875rem; font-weight: 550; color: var(--text-2); cursor: pointer; }
.ue-quellen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: var(--a-3); }
.ue-quelle { display: grid; align-content: start; gap: var(--a-15); min-width: 0; padding: var(--a-4); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: var(--text); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.ue-quelle:hover { box-shadow: var(--schatten); transform: translateY(-1px); }
.ue-quelle.aus { opacity: .6; }
.ue-quelle-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a-2); }
.ue-quelle-kopf b { font-size: .95rem; font-weight: 600; }
.ue-quelle-kopf .pflege-status { flex-shrink: 0; white-space: nowrap; }
.ue-herkunft { font-size: .75rem; color: var(--text-3); }
.ue-umfang { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.ue-pflege { position: relative; padding-left: var(--a-3); font-size: .75rem; line-height: 1.4; color: var(--text-3); }
.ue-pflege::before { content: ""; position: absolute; left: 0; top: .42em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--text-3); }
.ue-pflege.ok::before { background: var(--ok); }
.ue-pflege.fehler::before { background: var(--warn); }
.ue-pflege.läuft::before { background: var(--akzent); }

.ablauf { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--a-2); }
.ablauf-schritt { display: grid; align-content: start; gap: var(--a-15); flex: 1 1 10rem; min-width: 0; padding: var(--a-35) var(--a-35); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); transition: opacity .2s; }
.ablauf-schritt.aus, .ablauf-bahn.aus { opacity: .5; }
.ablauf-kopf { display: flex; align-items: center; gap: var(--a-2); min-height: 1.5rem; }
.ablauf-kopf b { flex: 1; font-size: .9375rem; }
.ablauf-nr { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--flaeche-2); color: var(--text-2); font-size: .75rem; font-weight: 600; }
.ablauf-schritt p { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--text-2); }
.ablauf-pfeil { align-self: center; color: var(--text-3); }
.ablauf-schwelle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--a-2); font-size: .75rem; color: var(--text-3); }
.ablauf-schwelle input { width: 100%; accent-color: var(--text-2); }
.ablauf-schwelle output { font-variant-numeric: tabular-nums; color: var(--text-2); }
.ablauf-bahnen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-2); flex-basis: 100%; min-width: 0; }
.ablauf-entscheid { flex-basis: 100%; padding: var(--a-05) 0; text-align: center; font-size: .8125rem; color: var(--text-3); }
.ablauf-bahn { display: grid; gap: var(--a-05); padding: var(--a-3) var(--a-35); border-radius: var(--radius); border: 1px solid var(--linie); background: var(--flaeche); }
.ablauf-bahn > b, .ablauf-bahn .ablauf-kopf b { font-size: .9375rem; }
.ablauf-bahn > span { font-size: .875rem; }
.ablauf-bahn small { font-size: .75rem; color: var(--text-3); }
.ablauf-hinweis { flex-basis: 100%; margin: var(--a-1) 0 0; font-size: .875rem; color: var(--warn); }

/* Rollen */
.rollen { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.rolle { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; align-items: center; gap: var(--a-2) var(--a-6); padding: var(--a-4) var(--a-5); border-top: 1px solid var(--linie); }
.rolle:first-child { border-top: 0; }
.rolle-info b { display: block; font-size: .9375rem; font-weight: 600; }
.rolle-info small { display: block; margin-top: var(--a-05); font-size: .8125rem; color: var(--text-3); }
.rolle-ersatz { grid-column: 1 / -1; justify-self: start; padding: var(--a-15) var(--a-25); border-radius: 7px; background: var(--warn-weich); color: var(--warn); font-size: .8125rem; }

/* Tabellen */
.tabelle { width: 100%; margin-top: var(--a-4); border-collapse: collapse; font-size: .875rem; }
.tabelle th { padding: var(--a-2) var(--a-3); border-bottom: 1px solid var(--linie-stark); text-align: left; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.tabelle td { padding: var(--a-35) var(--a-3); border-bottom: 1px solid var(--linie); vertical-align: middle; overflow-wrap: break-word; }
.tabelle tbody tr { transition: background .12s; }
.tabelle tbody tr:hover td { background: color-mix(in srgb, var(--flaeche-2) 55%, transparent); }
.tabelle .rechts { text-align: right; }
.tabelle td.rechts .knopf, .tabelle td.rechts .icon-knopf { vertical-align: middle; }   /* «×» neben «Bearbeiten» mittig */
.tabelle .nowrap { white-space: nowrap; }
/* Lange Zeichenketten ohne Leerzeichen (Adressen, JSON) dürfen umbrechen, sonst läuft die Seite seitlich über. */
.tabelle .umbruch, .tabelle .zelle-details { overflow-wrap: anywhere; min-width: 14rem; }
.tabelle .mono { font-family: var(--schrift-mono); font-size: .8125rem; }
.tabelle .kurz { max-width: 28rem; }
.zelle-notiz { display: block; margin-top: var(--a-05); font-size: .78rem; color: var(--text-3); }
.zelle-details { font-size: .8125rem; color: var(--text-2); }
.leer-zeile { color: var(--text-3); }
.wert-schlecht { color: var(--fehler); font-weight: 600; }
.wert-gut { color: var(--ok); font-weight: 600; }
.text-link { color: var(--text); font-weight: 550; text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; }
.text-link:hover { text-decoration-color: var(--text); }
.marke-aktiv, .status, .urteil, .bahn-marke { display: inline-block; padding: var(--a-05) var(--a-2); border-radius: 6px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.marke-aktiv, .status.gut, .urteil.sachlich { background: var(--ok-weich); color: var(--ok); }
.status.schlecht, .urteil.persoenlich { background: var(--fehler-weich); color: var(--fehler); }
.bahn-marke.ch { background: var(--fehler-weich); color: var(--akzent); }
.bahn-marke.extern { background: var(--flaeche-2); color: var(--text-2); }
.test-ergebnis { display: block; margin-top: var(--a-15); font-size: .78rem; }
.befunde { display: flex; flex-wrap: wrap; gap: var(--a-15); }
.befund { padding: var(--a-05) var(--a-2); border-radius: 6px; font-size: .75rem; line-height: 1.5; background: var(--flaeche-2); color: var(--text-2); }
.befund.persoenlich { background: var(--fehler-weich); color: var(--fehler); }
.befund.fehler { background: var(--warn-weich); color: var(--warn); }
.befund.sachlich { background: var(--ok-weich); color: var(--ok); }
.icon-knopf.klein { width: 1.9rem; height: 1.9rem; font-size: 1.1rem; }
.gruppe-kopf .icon-knopf { border-radius: 50%; }   /* «+» bei Projekte rund (Toni, 30.09.2026) */

/* Testsatz, Regelwerk, Korrekturen */
.kz-werkzeug { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-3); }
.kz-neu { display: grid; grid-template-columns: minmax(0, 1fr) 13rem auto; gap: var(--a-2); margin-top: var(--a-5); }
.kz-formular { display: grid; gap: var(--a-3); }
.kz-formular-fuss { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a-2); }
.korrektur { display: grid; gap: var(--a-3); margin-bottom: var(--a-4); padding: var(--a-4) var(--a-5); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.k-feld { font-size: .9375rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.k-feld b { display: block; margin-bottom: var(--a-1); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.korrektur .falsch { max-height: 10rem; overflow-y: auto; color: var(--text-2); }
.korrektur textarea { min-height: 7rem; }
.k-art { display: grid; gap: var(--a-2); margin: 0; padding: var(--a-3) var(--a-35); border: 1px solid var(--linie); border-radius: 10px; }
.k-art legend { padding: 0 var(--a-15); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.k-wahl { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--a-2); align-items: baseline; font-size: .875rem; cursor: pointer; }
.k-wahl small { grid-column: 2; color: var(--text-3); font-size: .78rem; }
.k-bis { display: flex; align-items: center; gap: var(--a-2); padding-left: var(--a-6); font-size: .8125rem; color: var(--text-2); }
.k-bis[hidden] { display: none; }
.k-bis .feld { width: auto; padding: var(--a-1) var(--a-2); }
.k-tipp { padding: var(--a-2) var(--a-25); border-radius: 8px; background: var(--warn-weich); color: var(--warn); font-size: .8125rem; line-height: 1.45; }
#beispiele tr.abgelaufen td { color: var(--text-3); }
.ps-lauf-antwort { margin-top: var(--a-15); font-size: .8125rem; }
.ps-lauf-antwort > summary { cursor: pointer; color: var(--text-2); }
.ps-antwort-text { margin-top: var(--a-15); padding: var(--a-2) var(--a-25); border-radius: 8px; background: var(--flaeche-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16rem; overflow: auto; color: var(--text-2); }
.ps-korrektur { margin-top: var(--a-2); }
.ps-korrektur .korrektur-form { margin-top: 0; }
.korrektur .reihe { display: flex; gap: var(--a-2); justify-content: flex-end; }
#korrekturen > .leer-zeile { padding: var(--a-8); border: 1px dashed var(--linie-stark); border-radius: var(--radius); text-align: center; }

/* Dienste und Domains */
.dienste { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.dienst { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--a-3) var(--a-6); padding: var(--a-4) var(--a-5); border-top: 1px solid var(--linie); transition: opacity .2s; }
.dienst:first-child { border-top: 0; }
.dienste-gruppe { margin: var(--a-7) 0 var(--a-25); }
.dienste-gruppe:first-child { margin-top: 0; }
.dienste-gruppe h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.dienste-gruppe p { margin: var(--a-1) 0 0; font-size: .8125rem; color: var(--text-3); }
.dienste-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3) var(--a-5); margin-top: var(--a-25); }
.dienste-auto { display: inline-flex; align-items: center; gap: var(--a-2); font-size: .875rem; color: var(--text-2); }
.pflege { margin-top: var(--a-2); }
.pflege-status { padding: var(--a-05) var(--a-2); border-radius: 6px; font-size: .72rem; font-weight: 600; background: var(--flaeche-2); color: var(--text-2); }
.pflege-status.ok { background: var(--ok-weich); color: var(--ok); }
.pflege-status.fehler, .pflege-status.abgebrochen { background: var(--warn-weich); color: var(--warn); }
.pflege-plan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-15); margin-top: var(--a-2); }
.pflege-plan input, .pflege-plan select { font: inherit; font-size: .8125rem; padding: var(--a-1) var(--a-15); border: 1px solid var(--linie); border-radius: 7px; background: var(--flaeche); color: var(--text); }
.pflege-verlauf { margin-top: var(--a-2); font-size: .8125rem; }
.pflege-verlauf > summary, .pflege-lauf > summary { cursor: pointer; color: var(--text-2); }
.pflege-laeufe { display: grid; gap: var(--a-15); margin-top: var(--a-2); }
.pflege-lauf { padding: var(--a-15) var(--a-25); border: 1px solid var(--linie); border-radius: 8px; }
.pflege-lauf > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2); }
.pflege-aenderungen { margin: var(--a-15) 0 0; padding-left: var(--a-4); max-height: 16rem; overflow: auto; color: var(--text-2); }
.pflege-aenderungen li { margin: var(--a-05) 0; }
.aenderung.neu::marker { content: "+ "; color: var(--ok); }
.aenderung.weg::marker { content: "− "; color: var(--warn); }
.aenderung.fehler { color: var(--fehler); }
.aenderung.hinweis { color: var(--warn); }
.dienst.aus .dienst-info { opacity: .5; }
.dienst-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-15) var(--a-2); }
.dienst-kopf b { font-size: .9375rem; font-weight: 600; margin-right: var(--a-05); }
.dienst-art, .dienst-ort { padding: var(--a-05) var(--a-2); border-radius: 6px; font-size: .72rem; font-weight: 600; background: var(--flaeche-2); color: var(--text-2); }
.dienst-ort.lokal { background: var(--ok-weich); color: var(--ok); }
.dienst-anbieter { margin-top: var(--a-1); font-size: .8125rem; color: var(--text-2); }
.dienst-anbieter .text-link { font-weight: 500; color: var(--text-2); }
.dienst-zusatz { color: var(--text-3); }
.dienst-text { margin: var(--a-15) 0 0; font-size: .8125rem; line-height: 1.45; color: var(--text-3); }
.dienst-zahlen { display: flex; flex-wrap: wrap; gap: var(--a-15) var(--a-4); margin-top: var(--a-2); font-size: .78rem; color: var(--text-3); }
.dienst-zahl b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.dienst-zahl.schlecht b { color: var(--fehler); }
.dienst-fehler { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); margin-top: var(--a-15); padding: var(--a-15) var(--a-15) var(--a-15) var(--a-2); border-radius: 7px; background: var(--warn-weich); color: var(--warn); font-size: .78rem; overflow-wrap: anywhere; }
.dienst-fehler .knopf { flex-shrink: 0; }
.dienst-fehler.behoben { background: var(--flaeche-2); color: var(--text-2); }
.dienst-aktion { display: grid; align-content: start; justify-items: end; gap: var(--a-15); }
.dienst-knoepfe { display: flex; align-items: center; gap: var(--a-35); }
.dienst-aktion .test-ergebnis { margin: 0; text-align: right; overflow-wrap: anywhere; }
.kz-domain-neu { grid-template-columns: minmax(0, 1.2fr) 9.5rem minmax(0, 1fr) auto; margin-top: 0; }
.kz-hinweis { max-width: 48rem; margin: var(--a-3) 0 0; font-size: .8125rem; line-height: 1.5; color: var(--text-3); }

/* Prüfsatz */
/* Sprungleiste im Prüfsatz: Übersicht, Fälle, Läufe (Toni, 30.09.2026: sonst durch alle Fälle scrollen) */
.ps-sprung { display: flex; flex-wrap: wrap; gap: var(--a-2); margin: var(--a-4) 0 0; }   /* umbrechen: mit acht Abschnitten lief die Leiste auf dem Handy 246 px über (10.10.2026) */
.ps-sprung a { padding: var(--a-15) var(--a-3); border: 1px solid var(--linie-stark); border-radius: 999px; font-size: .8125rem; color: var(--text-2); text-decoration: none; transition: background .15s, color .15s; }
.ps-sprung a:hover { background: var(--flaeche-2); color: var(--text); }
/* Sprungziel knapp unter dem festen Kopf (Desktop 3,5 rem, Handy mit Navigation 7,5 rem) */
#ps-sprung, [id^="ps-teil-"] { scroll-margin-top: 4.5rem; }
.kz-unter .nach-oben-link, .dienste-gruppe h2 .nach-oben-link { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-left: var(--a-2); border-radius: 50%; vertical-align: middle; color: var(--text-3); text-decoration: none; font-size: .9rem; transition: background .15s, color .15s; }
.kz-unter .nach-oben-link:hover, .dienste-gruppe h2 .nach-oben-link:hover { background: var(--flaeche-2); color: var(--text); }
#di-sprung, .dienste-gruppe { scroll-margin-top: 4.5rem; }
/* Steuerung des Prüfsatzes: zwei gleich hohe Karten 50/50, auf schmalen Bildschirmen untereinander (Toni, 30.09.2026). */
.ps-steuerung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-3); margin-top: var(--a-3); }
.ps-karte { display: flex; flex-direction: column; padding: var(--a-4) var(--a-5) var(--a-5); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.ps-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); min-height: 1.75rem; }
.ps-karte-kopf h2 { margin: 0; font-size: 1rem; font-weight: 650; }
.ps-karte-text { margin: var(--a-1) 0 var(--a-4); font-size: .8125rem; color: var(--text-3); }
.ps-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-3); }
.ps-feld .feld { width: 100%; font-weight: 400; }
.ps-karte-fuss { display: flex; justify-content: flex-end; margin-top: auto; padding-top: var(--a-4); }
/* Kennzahlen mit fester Spaltenzahl: 3 nebeneinander (6 Kacheln = 3 oben, 3 unten), schmal 2 (Toni, 30.09.2026). */
.kennzahlen.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kennzahl b small { margin-left: var(--a-1); font-size: .8125rem; font-weight: 500; color: var(--text-3); }
.ps-luecke { flex: 1; }
.ps-bereichwahl { width: 12rem; }
/* Prüfsatz-Statistik: Gesamtverlauf als Linie, Bereiche × Tage und Modelle × Bereiche als Tabellen (Toni, 30.09.2026) */
.ps-linie { margin-bottom: var(--a-4); }
/* ausdrücklich: eine allgemeine Symbolregel setzte jedes SVG auf 20 px (30.09.2026) */
#ps-verlauf .ps-linie-svg { display: block; width: 100%; height: 240px; overflow: visible; }
#ps-verlauf .ps-linie-svg text { stroke: none; }   /* die Symbolregel gab auch der Schrift eine Umrisslinie */
.ps-linie-svg .gitter { stroke: var(--linie); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ps-linie-svg .achse { fill: var(--text-3); font-size: 11px; }
.ps-linie-svg .linie { fill: none; stroke: var(--text-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ps-linie-svg .linie-gesamt { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.ps-linie-svg .punkt circle { fill: var(--flaeche); stroke: var(--text); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; }
.ps-linie-svg .punkt:hover circle, .ps-linie-svg .punkt:focus circle { fill: var(--text); }
.ps-linie-svg .wechsel { stroke: var(--akzent); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ps-linie-svg .wechsel-text { fill: var(--akzent); font-size: 11px; }
.matrix-rahmen { overflow-x: auto; margin-bottom: var(--a-4); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.matrix { width: 100%; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.matrix th, .matrix td { padding: var(--a-2) var(--a-3); border-bottom: 1px solid var(--linie); white-space: nowrap; text-align: left; }
.matrix thead th { font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: var(--text-3); }
/* Fixe erste Spalte beim seitlichen Scrollen: auch ihre Kopfzelle bleibt stehen, die Spalte hat den Ton der Seitenleiste
   und eine feine Trennlinie zum scrollenden Teil (Toni, 30.09.2026: der Titel verschwand, die Spalte war nicht erkennbar). */
.matrix tbody th, .matrix thead th:first-child { position: sticky; left: 0; background: var(--leiste); box-shadow: inset -1px 0 0 var(--linie); }
.matrix tbody th { z-index: 1; font-weight: 550; }
.matrix thead th:first-child { z-index: 2; }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
.matrix .zahl { text-align: right; }
.matrix td.gut { color: var(--ok); }
.matrix td.mittel { color: var(--warn); background: var(--warn-weich); }
.matrix td.schwach { color: var(--fehler); background: var(--fehler-weich); font-weight: 600; }
.matrix td.leer { color: var(--text-3); }
.matrix td small { margin-left: var(--a-05); font-size: .7rem; color: var(--text-3); }
.matrix td.bestes { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--ok); }
.matrix .delta.besser { color: var(--ok); font-weight: 600; }
.matrix .delta.schlechter { color: var(--fehler); font-weight: 600; }
/* Qualität je Bereich und Wirkung der Korrekturen (30.09.2026) */
.matrix td.offen { color: var(--text-3); }
.matrix th, .matrix td { vertical-align: middle; }
.matrix caption { padding: var(--a-4); text-align: left; }
.ps-kurve { display: block; width: 96px; height: 24px; overflow: visible; }
.ps-kurve polyline { stroke: var(--text-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ps-kurve circle { fill: var(--text); stroke: none; }
.matrix .ps-ursachen .wert { display: flex; flex-wrap: nowrap; gap: var(--a-1); }
.matrix .ps-frage-zelle { min-width: 16rem; max-width: 28rem; white-space: normal; font-weight: 500; }
[class*="ursache-"]::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: var(--a-1); border-radius: 50%; background: var(--warn); vertical-align: .05em; }
.ursache-modell::before { background: var(--akzent); }
.ps-mal { width: auto; }
.ps-korrektur .reihe { flex-wrap: wrap; align-items: center; }
.ps-korrektur .reihe select.feld { width: auto; }
.ps-korrektur .reihe input[type="date"].feld { width: 10rem; }
.matrix tbody th .ps-notiz { display: block; margin-top: var(--a-05); padding: 0; background: none; font-size: .75rem; font-weight: 400; color: var(--text-3); white-space: normal; max-width: 22rem; }
.ps-bsp-titel { margin: var(--a-3) 0 var(--a-15); font-size: .875rem; font-weight: 600; }
.ps-bsp { display: grid; gap: var(--a-15); margin: 0; padding-left: var(--a-4); font-size: .8125rem; color: var(--text-2); }
.ps-massnahme { margin: var(--a-2) 0 0; font-size: .8125rem; color: var(--text-2); }
@media (max-width: 600px) {
  /* Handy: Art, Datum und «Vorschlag» über die volle Breite, darunter «Abbrechen» und «Freigeben» gleich breit.
     Drei Knöpfe nebeneinander ragten bei 360 px aus dem Rahmen (30.09.2026). */
  .ps-korrektur .korrektur-form { grid-template-columns: minmax(0, 1fr); }
  .ps-korrektur .reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-korrektur .reihe select.feld, .ps-korrektur .reihe input[type="date"].feld { grid-column: 1 / -1; width: 100%; }
  .ps-korrektur .reihe .ps-luecke { display: none; }
  .ps-korrektur .reihe .knopf { justify-content: center; }
  .ps-korrektur .reihe .knopf:nth-last-child(2) { grid-column: 1 / -1; order: 1; }
  .ps-korrektur .reihe .knopf:nth-last-child(3) { order: 2; }
  .ps-korrektur .reihe .knopf:last-child { order: 3; }
}
.ps-status { margin: var(--a-25) 0 0; font-size: .875rem; color: var(--warn); }
.ps-werkzeug-rechts { display: flex; flex-wrap: wrap; gap: var(--a-2); align-items: center; }
.ps-suche { width: 15rem; }
.kennzahl.klickbar { text-align: left; font: inherit; color: inherit; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.kennzahl.klickbar:hover { box-shadow: var(--schatten); transform: translateY(-1px); }
.ps-marke { display: inline-block; padding: var(--a-05) var(--a-2); border-radius: 6px; font-size: .75rem; font-weight: 600; white-space: nowrap; background: var(--flaeche-2); color: var(--text-2); }
.ps-marke.gut { background: var(--ok-weich); color: var(--ok); }
.ps-marke.schlecht { background: var(--fehler-weich); color: var(--fehler); }
.ps-marke.entwurf { background: var(--warn-weich); color: var(--warn); }
.ps-fall { cursor: pointer; }
.ps-fall td { vertical-align: top; }
.ps-fall.offen td { border-bottom-color: transparent; }
.ps-fall-zelle { max-width: 34rem; }
.ps-fall-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-15) var(--a-2); margin-bottom: var(--a-1); }
.ps-chip { padding: var(--a-05) var(--a-2); border-radius: 6px; background: var(--flaeche-2); font-size: .72rem; font-weight: 600; color: var(--text-2); }
.ps-herkunft { font-size: .72rem; color: var(--text-3); }
.ps-frage { font-size: .9rem; }
.ps-erwartung { margin-top: var(--a-1); font-size: .78rem; color: var(--text-3); overflow-wrap: anywhere; }
.ps-notiz { margin-top: var(--a-15); padding: var(--a-15) var(--a-2); border-radius: 6px; background: var(--flaeche-2); font-size: .78rem; color: var(--text-2); white-space: pre-wrap; }
.ps-ergebnis { max-width: 22rem; font-size: .8rem; }
.ps-hinweis { color: var(--fehler); overflow-wrap: anywhere; }
.ps-hinweis + .ps-hinweis { margin-top: var(--a-1); }
.ps-ok { color: var(--ok); }
.ps-aktion { width: 1%; white-space: nowrap; }
.ps-fall.offen td, .ps-detail td { background: var(--flaeche); }
.ps-detail td { padding-top: 0; }
.ps-fall.offen td { border-bottom-color: transparent; }
.ps-meta { font-size: .75rem; color: var(--text-3); margin-bottom: var(--a-15); }
.ps-pruefliste { margin: 0 0 var(--a-2); padding: 0; list-style: none; display: grid; gap: var(--a-05); font-size: .8rem; }
.ps-pruefliste .ok span { color: var(--ok); font-weight: 700; }
.ps-pruefliste .nicht { color: var(--fehler); }
.ps-antwort { max-height: 12rem; overflow: auto; padding: var(--a-25) var(--a-3); border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); font-size: .82rem; white-space: pre-wrap; color: var(--text-2); }
.ps-editor { display: grid; gap: var(--a-3); margin-top: var(--a-4); padding: var(--a-4) var(--a-5); border: 1px solid var(--linie-stark); border-radius: var(--radius); background: var(--flaeche); }
.ps-editor h3 { margin: 0; font-size: 1rem; }
.ps-editor-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: var(--a-25); align-items: start; }
.ps-feld { display: grid; gap: var(--a-15); font-size: .8rem; font-weight: 550; color: var(--text-2); }
.ps-feld-titel { font-size: .8rem; font-weight: 550; color: var(--text-2); }
.ps-erwartungen { display: grid; gap: var(--a-15); }
.ps-erw-zeile { display: grid; grid-template-columns: 14rem minmax(0, 1fr) auto; gap: var(--a-2); align-items: center; }
.ps-editor > .knopf { justify-self: start; }
.ps-editor-fuss { display: flex; justify-content: flex-end; gap: var(--a-2); }
.ps-laufzeile { cursor: pointer; }
.ps-laufdetail { margin-top: var(--a-4); padding: var(--a-4) var(--a-5); border: 1px solid var(--linie-stark); border-radius: var(--radius); background: var(--flaeche); }
.ps-laufdetail-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--a-2); }
.ps-laufdetail-kopf h3 { margin: 0; font-size: 1rem; }
.ps-lauf-fehler { padding: var(--a-25) 0; border-top: 1px solid var(--linie); font-size: .85rem; }

@media screen and (max-width: 900px) {   /* nur am Bildschirm: beim Drucken (A4, schmaler als 900 px) wurden die Tabellen Karten, 02.10.2026 */
  .kz { grid-template-columns: minmax(0, 1fr); }
  .kz-nav { top: 3.5rem; z-index: 9; flex-direction: row; gap: var(--a-1); height: auto; padding: var(--a-2) var(--a-4); overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--linie); background: var(--grund); scrollbar-width: none; }
  .kz-nav::-webkit-scrollbar { display: none; }
  .kz-nav-gruppe { display: none; }
  .kz-nav { scroll-padding-inline: var(--a-4); }
  /* Tabellen auf dem Handy: jede Zeile eine Karte, Spaltenname klein über dem Wert, Knöpfe als Reihe unten.
     Eine Regel für alle Tabellen statt Sonderfällen je Tabelle (Toni, 30.09.2026). */
  .tabelle thead { display: none; }
  /* Qualität und Wirkung im Prüfsatz: jede Zeile eine Karte, Etikett links, Wert rechts (30.09.2026) */
  .matrix-rahmen:has(> .matrix.karten) { overflow: visible; border: 0; background: none; }
  .matrix.karten thead { display: none; }
  .matrix.karten, .matrix.karten tbody { display: block; }
  .matrix.karten tbody tr { display: grid; gap: var(--a-15); margin-bottom: var(--a-3); padding: var(--a-35) var(--a-4); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
  .matrix.karten tbody th { position: static; padding: 0 0 var(--a-05); border: 0; background: none; white-space: normal; font-size: .9375rem; font-weight: 600; }
  .matrix.karten td { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); padding: 0; border: 0; white-space: normal; text-align: right; }
  .matrix.karten td::before { content: attr(data-label); flex-shrink: 0; color: var(--text-3); font-size: .8125rem; font-weight: 400; text-align: left; }
  .matrix.karten td.mittel, .matrix.karten td.schwach { background: none; }
  .matrix.karten caption { display: block; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
  .matrix.karten .ps-ursachen .wert { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--a-1); }
  .tabelle, .tabelle tbody { display: block; }
  .tabelle tbody tr { display: grid; gap: var(--a-25); margin-bottom: var(--a-3); padding: var(--a-35) var(--a-4); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
  .tabelle td { display: block; min-width: 0; max-width: none; padding: 0; border: 0; text-align: left; }
  .tabelle td:empty { display: none; }
  .tabelle tbody tr:hover td { background: none; }
  .tabelle .umbruch, .tabelle .zelle-details { min-width: 0; }
  /* Kompakt: erste Zelle als Titel der Karte, übrige Zellen als Zeile «Etikett | Wert», Knöpfe als Reihe unten. */
  .tabelle tbody tr { gap: var(--a-15); }
  .tabelle td:first-child { font-weight: 600; }
  .tabelle td:first-child::before { display: none !important; }
  .tabelle td[data-label]:not([data-label=""]):not(:first-child) { position: relative; padding-left: 8.75rem; }
  .tabelle td[data-label]:not([data-label=""])::before { content: attr(data-label); position: absolute; left: 0; top: 0; width: 8rem; font: 400 .8125rem/1.4 var(--schrift); white-space: normal; letter-spacing: 0; text-transform: none; color: var(--text-3); }
  .tabelle td:first-child > :not(:first-child) { font-weight: 400; }
  .tabelle td.leer-zeile { font-weight: 400; }
  /* Enthält eine Karte mehrzeiligen Inhalt (Fall, Details), stehen alle Etiketten dieser Karte über dem Wert,
     sonst mischen sich zwei Anordnungen («9/10 irgendwo», Toni 30.09.2026). */
  .tabelle tr:has(td > div, td > p, td > ul, td > details) td[data-label]:not([data-label=""]):not(:first-child) { padding-left: 0; }
  .tabelle tr:has(td > div, td > p, td > ul, td > details) td[data-label]:not([data-label=""])::before { position: static; display: block; width: auto; margin-bottom: var(--a-05); }
  .tabelle td.rechts { display: flex !important; flex-wrap: wrap; align-items: center; gap: var(--a-2); margin-top: var(--a-1); padding-left: 0 !important; text-align: left; }
  /* Besteht die Aktion nur aus dem 3-Punkte-Menü, sitzt es oben rechts in der Karte statt verloren darunter (30.09.2026). */
  .tabelle tbody tr:has(> td.rechts > .punkte-knopf:only-child) { position: relative; }
  .tabelle td.rechts:has(> .punkte-knopf:only-child) { position: absolute; top: var(--a-3); right: var(--a-3); width: auto; margin: 0; }
  .tabelle td.rechts::before { display: none !important; }
  .kz-nav a { flex: none; }
  #ps-sprung, [id^="ps-teil-"] { scroll-margin-top: 8.5rem; }
  #di-sprung, .dienste-gruppe { scroll-margin-top: 8.5rem; }
  .kz-zahl { margin-left: var(--a-05); }
  .kz-inhalt { padding: var(--a-6) var(--a-4) 4rem; }
  .kz-inhalt.einstellungen { padding: var(--a-6) var(--a-4) 4rem; }
  .kz-konfig { grid-template-columns: minmax(0, 1fr); }
  .ue-zustand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz-neu, .kz-formular-fuss, .rolle, .kz-domain-neu, .dienst { grid-template-columns: minmax(0, 1fr); }
  .kz-titel-aktion { flex-direction: column; }
  .kz-inhalt .kennzahlen, .kz-inhalt .kennzahlen.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-steuerung { grid-template-columns: minmax(0, 1fr); }
  .kennzahl b { font-size: 1.3rem; }
  .ps-luecke { display: none; }
  .ps-suche, .ps-werkzeug-rechts .ps-bereichwahl { width: 100%; }
  .kz-werkzeug.verwaltung-werkzeug { grid-template-columns: minmax(0, 1fr); }
  .ps-werkzeug-rechts { width: 100%; }
  .dienst-aktion { justify-items: start; }
  .dienst-aktion .test-ergebnis { text-align: left; }
  .kz-kopf { padding: 0 var(--a-4); }
  .kz-kopf { gap: var(--a-3); }
  .kz-kopf .zurueck { white-space: nowrap; }   /* drei Links im Kopf (Verwaltung): «Zum Chat» nicht umbrechen (30.09.2026) */
  .ablauf { flex-direction: column; }
  .ablauf-pfeil { transform: rotate(90deg); }
  .ablauf-schritt, .ablauf-bahnen { flex: none; }
  .ablauf-bahnen { grid-template-columns: minmax(0, 1fr); }
}

/* ── Mobil ── */
@media (max-width: 800px) {
  .leiste, .leiste-zu .leiste { position: fixed; inset: 0 auto 0 0; z-index: 20; width: min(85vw, 20rem); transform: translateX(-100%); transition: transform .26s var(--weich); box-shadow: none; }
  .rahmen.leiste-offen .leiste { transform: none; box-shadow: var(--schatten-gross); }
  .leiste-griff { display: none; }
  /* Auf dem Handy gibt es kein Einklappen, nur die Schublade: Beschriftungen immer sichtbar. */
  .leiste-zu .leiste-kopf { justify-content: space-between; padding: 0 var(--a-25) 0 var(--a-4); }
  .leiste-zu .leiste-kopf .marke { display: inline-flex; }
  .leiste-zu .beschriftung { opacity: 1; pointer-events: auto; width: auto; }
  .leiste-zu .gespraeche { opacity: 1; visibility: visible; }
  .leiste-zu .nav-knopf { justify-content: flex-start; gap: var(--a-25); padding: 0 var(--a-15); }
  .leiste-zu .konto-menu summary { justify-content: flex-start; gap: var(--a-25); padding: 0 var(--a-15); }
  .nur-mobil { display: inline-grid; }
  .kopfzeile { padding: 0 var(--a-2); border-bottom: 1px solid var(--linie); }
  .kopf-pfad { justify-content: center; }
  .knopf.leise { padding: 0 var(--a-2); }
  .knopf.leise .knopf-text { display: none; }
  .spalte { padding: 0 var(--a-4); }
  .agent-karte.ueber-eingabe { width: calc(100% - 2 * var(--a-4)); }
  .gespraech .icon-knopf { opacity: 1; }
  .gespraech a { --blende: 4.2rem; }
  .gruss { font-size: 1.6rem; }
  .blase { max-width: 92%; }
  /* Breite Tabellen in Antworten seitlich scrollen statt über den Rand laufen. */
  .antwort table { display: block; max-width: 100%; overflow-x: auto; }
  /* In Tabellen nur zwischen Wörtern umbrechen («Mona|te» war unlesbar); zu breite Tabellen scrollen. */
  .antwort th, .antwort td { overflow-wrap: normal; word-break: normal; min-width: 4.5rem; }
  .suche-dialog { padding-top: var(--a-4); }
}

/* ── Sehr schmale Handys (bis 480 px) ── */
@media (max-width: 480px) {
  .kz-kopf .zurueck[href="/"] { display: none; }   /* das Logo führt zum Chat; drei Links passten nicht auf 360 px (30.09.2026) */
  .ue-zustand, .ue-zustand.drei { grid-template-columns: minmax(0, 1fr); }
  .ps-felder { grid-template-columns: minmax(0, 1fr); }
  .ps-karte { padding: var(--a-4); }
  .ps-karte-fuss .knopf { width: 100%; }
}

/* ── Bausteine für alle Seiten (qds/web/static/bausteine.js), übernommen aus dem ilearn-Styleguide (Nr. 701 Drawer,
   Nr. 401 Confirm-Card, Nr. 202 3-Punkte-Menü), Farben, Abstände und Radien aus den QDS-Tokens (Toni, 30.09.2026).
   Der 3px-Rahmen (links an der Schublade, rundum an der Bestätigung) ist neutral grau wie in ilearn und von Toni
   ausdrücklich gewünscht (30.09.2026); die Regel gegen farbige Randlinien links betrifft ihn nicht. */

/* Schublade (Drawer): fährt von rechts über den Inhalt, für Details und Formulare, die im Kontext bleiben sollen. */
/* Sanft: Schleier blendet langsamer ein als die Schublade fährt, beide mit weicher Kurve (Toni, 30.09.2026: «zäg»). */
.schublade-schleier { position: fixed; inset: 0; z-index: 900; background: var(--schleier); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.schublade-schleier.offen { opacity: 1; pointer-events: auto; }
.schublade { position: fixed; top: 0; right: 0; bottom: 0; z-index: 901; display: flex; flex-direction: column; width: min(500px, 100vw); background: var(--flaeche); border-left: 3px solid var(--rahmen-schwebend); box-shadow: var(--schatten-gross); transform: translateX(100%); visibility: hidden; transition: transform .45s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .45s; }
.schublade.offen { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
/* Menü und Hinweis aus einer Schublade über der Schublade, nicht dahinter (Toni, 07.10.2026: «im drawer geht action menu nicht,
   wenn man drauf klickt passiert nichts»; das Menü lag mit z-index 60 hinter der Schublade mit 901) */
body.schublade-offen .schwebe-menue, body.schublade-offen .tipp { z-index: 1000; }
.schublade-kopf { display: flex; flex-shrink: 0; align-items: center; gap: var(--a-3); padding: var(--a-5) var(--a-6) var(--a-4); border-bottom: 1px solid var(--linie); }
.schublade-symbol { display: grid; flex-shrink: 0; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--flaeche-2); color: var(--text-2); }
.schublade-symbol svg { width: 18px; height: 18px; }
.schublade-kopf-text { flex: 1; min-width: 0; }
.schublade-titel { margin: 0; font-size: 1rem; font-weight: 650; color: var(--text); }
.schublade-untertitel { margin: var(--a-05) 0 0; font-size: .8125rem; color: var(--text-3); }
.schublade-zu { display: grid; flex-shrink: 0; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: var(--flaeche-2); color: var(--text); cursor: pointer; transition: background .15s, color .15s; }
.schublade-zu:hover { background: var(--knopf); color: var(--knopf-text); }
.schublade-zu svg { width: 14px; height: 14px; }
.schublade-inhalt { flex: 1; overflow-y: auto; padding: var(--a-5) var(--a-6); }
.schublade-fuss { display: flex; flex-shrink: 0; justify-content: flex-end; gap: var(--a-2); padding: var(--a-4) var(--a-6); border-top: 1px solid var(--linie); }
.schublade-fuss:empty { display: none; }
/* Inhalt einer Schublade: Angaben als Liste Bezeichnung → Wert, statt breiter Tabellen. */
.schublade-angaben { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: var(--a-2) var(--a-4); margin: 0 0 var(--a-5); font-size: .875rem; }
.schublade-angaben dt { color: var(--text-3); }
.schublade-angaben dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.schublade-abschnitt { margin: var(--a-5) 0 var(--a-2); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
body.schublade-offen { overflow: hidden; }
/* Formulare in der Schublade (Verwaltung, 30.09.2026): Abschnitte, Schalter mit Erklärung, zwei Felder nebeneinander. */
.verwaltung-formular .schublade-abschnitt:first-of-type { margin-top: 0; }
.verwaltung-formular .schublade-feld { margin-bottom: var(--a-4); }
.verwaltung-formular .feld-hinweis { line-height: 1.45; }
.verwaltung-schalter { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--a-4); padding: var(--a-3) 0; border-top: 1px solid var(--linie); }
.verwaltung-schalter:last-of-type { margin-bottom: var(--a-4); border-bottom: 1px solid var(--linie); }
.verwaltung-schalter b { display: block; font-size: .875rem; font-weight: 550; }
.verwaltung-schalter small { display: block; margin-top: var(--a-05); font-size: .8125rem; line-height: 1.45; color: var(--text-3); }
.verwaltung-schalter .schalter { margin-top: var(--a-05); }
.verwaltung-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-3); }

/* Bestätigung (Confirm-Card): ersetzt das Fenster des Browsers (confirm()) vor Löschen und anderen folgenreichen Aktionen. */
.bestaetigung-schleier { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; padding: var(--a-4); background: var(--schleier-karte); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.bestaetigung-schleier.offen { opacity: 1; pointer-events: auto; }
.bestaetigung { width: min(380px, 100%); padding: var(--a-8); border: 3px solid var(--rahmen-schwebend); border-radius: 20px; background: var(--flaeche); box-shadow: var(--schatten-gross); text-align: center; opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .3s ease, transform .38s cubic-bezier(.32, .72, 0, 1); }
.bestaetigung-schleier.offen .bestaetigung { opacity: 1; transform: none; }
.bestaetigung-symbol { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto var(--a-5); border-radius: 50%; background: var(--flaeche-2); color: var(--text-2); }
.bestaetigung-symbol svg { width: 26px; height: 26px; }
.bestaetigung.gefahr .bestaetigung-symbol { background: var(--fehler-weich); color: var(--fehler); }
.bestaetigung-titel { margin: 0 0 var(--a-2); font-size: 1.05rem; font-weight: 650; color: var(--text); }
.bestaetigung-text { margin: 0 0 var(--a-4); font-size: .875rem; line-height: 1.5; color: var(--text-2); white-space: pre-line; }
.bestaetigung-name { display: inline-block; max-width: 100%; margin: 0 0 var(--a-5); padding: var(--a-1) var(--a-3); border-radius: 8px; background: var(--flaeche-2); color: var(--text); font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.bestaetigung.gefahr .bestaetigung-name { background: var(--fehler-weich); color: var(--fehler); }
.bestaetigung-titel + .bestaetigung-feld { margin-top: var(--a-4); }
.bestaetigung-feld, .schublade-feld { display: grid; gap: var(--a-15); margin: 0 0 var(--a-5); text-align: left; }
.bestaetigung-feld-name, .schublade-feld-name { font-size: .8125rem; font-weight: 550; color: var(--text-2); }
.schublade-feld .speicher-status { min-height: 1rem; margin: 0; }
.bestaetigung-knoepfe { display: flex; gap: var(--a-3); }
.bestaetigung-knoepfe .knopf { flex: 1; }

/* 3-Punkte-Knopf: öffnet ein schwebendes Menü (.schwebe-menue). */
.punkte-knopf { display: inline-grid; flex-shrink: 0; place-items: center; width: 1.875rem; height: 1.875rem; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; transition: background .12s, color .12s; }
.punkte-knopf:hover, .punkte-knopf[aria-expanded="true"] { background: var(--flaeche-2); color: var(--text); }
.punkte-knopf svg { width: 18px; height: 18px; }

@media (max-width: 480px) {
  .schublade { width: 100vw; border-left: 0; }   /* volle Breite: kein Rand, es gibt keinen Übergang */
  .schublade-kopf, .schublade-inhalt, .schublade-fuss { padding-left: var(--a-4); padding-right: var(--a-4); }
  .schublade-angaben { grid-template-columns: minmax(0, 1fr); gap: var(--a-05) 0; }
  .schublade-angaben dd { margin-bottom: var(--a-2); }
  .bestaetigung { padding: var(--a-6) var(--a-5); }
}
@media (prefers-reduced-motion: reduce) {
  .schublade, .schublade-schleier, .bestaetigung, .bestaetigung-schleier { transition: none; }
}

/* Modellvergleich (Kontrollzentrale, Punkt 15, 02.10.2026) */
.mv-lauf { display: grid; gap: var(--a-2); margin-bottom: var(--a-6); }
#b-modellvergleich .vergleich-liste { margin-top: var(--a-3); }

/* Vergleichen: Karten wie im Modellvergleich, Richter und Urteil (Toni, 02.10.2026) */
.vergleich-karten { margin-top: 0; }
.vergleich-karten .vergleich-bahn { margin-top: var(--a-4); }
.vergleich-richter-karte { grid-column: 1 / -1; }
.vergleich-richter-karte .ps-feld { max-width: 24rem; }
.vergleich-urteil { display: grid; gap: var(--a-3); margin-top: var(--a-5); }
.vergleich-urteil[hidden] { display: none; }
.vergleich-urteil p { margin: 0; }
.vergleich-rang { display: grid; gap: var(--a-2); margin: 0; padding-left: var(--a-5); }
.vergleich-rang li { display: grid; gap: var(--a-05); }
.vergleich-rang b { font-size: .875rem; font-weight: 600; }
.vergleich-lernen { font-size: .875rem; color: var(--text-2); }
/* Vergleichen: was QDS für die Antwort getan hat, Punkt statt Randlinie (Toni, 02.10.2026) */
.vergleich-vorteile { display: grid; gap: var(--a-15); margin: 0 0 var(--a-4); padding: 0 0 var(--a-3); list-style: none; border-bottom: 1px solid var(--linie); font-size: .8125rem; line-height: 1.45; color: var(--text-2); }
.vergleich-vorteile li { display: flex; gap: var(--a-2); align-items: baseline; }
.vergleich-vorteile li::before { content: ""; flex: none; width: .4rem; height: .4rem; border-radius: 50%; background: var(--linie-stark); transform: translateY(-.1rem); }
.vergleich-vorteile li.gut::before { background: var(--ok); }
.vergleich-vorteile li.schlecht { color: var(--fehler); }
.vergleich-vorteile li.schlecht::before { background: var(--fehler); }
.vergleich-datenschutz { font-size: .875rem; font-weight: 550; }
.vergleich-rang { list-style: none; padding-left: 0; }
.vergleich-rang-kopf { display: flex; align-items: center; gap: var(--a-2); }
.vergleich-karten .vergleich-bahn { margin-top: var(--a-4); }
/* Tabellen in Vergleichsspalten: Wörter nicht mitten trennen («obligatorische|s Referendum», 02.10.2026) */
.vergleich-spalte .antwort td, .vergleich-spalte .antwort th { overflow-wrap: normal; word-break: normal; hyphens: auto; }

/* Vergleichen: Bericht oben, Antworten als gleich hohe Karten darunter (Toni, 02.10.2026: «lesbarer als alles in
   die länge gezogen … schlussbericht schöner … die frage muss auch da sein … alle kosten mit total … pdf») */
.vergleich-bericht { display: grid; gap: var(--a-4); margin-top: var(--a-6); }
/* Gesamtbericht je Fassung (05.10.2026): Kennzahlen oben, Wahl der Fassung; Tabellen wie im Bericht zum Vergleich */
.gb-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-2); }
.gb-fassungen { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.gb-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--a-3); margin: var(--a-2) 0; }
.gb-zahl { display: grid; gap: var(--a-05); padding: var(--a-3) var(--a-4); border-radius: var(--radius); background: var(--flaeche-2); }
.gb-zahl b { font-size: 1.375rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.gb-zahl span { color: var(--text-3); font-size: .8125rem; }
.gesamtbericht .vergleich-bericht-unter { margin-top: var(--a-6); }
@media print { .gb-aktionen { display: none !important; } .gb-zahl { background: #f2f2f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Laufender Vergleich (05.10.2026): roter pulsierender Punkt, grün wenn fertig, immer mit Text */
.vergleich-laeuft { display: flex; align-items: center; gap: var(--a-2); margin: 0; padding: var(--a-3) var(--a-4); border-radius: var(--radius); background: var(--flaeche-2); font-size: .875rem; font-weight: 600; }
.vergleich-laeuft::before, .vergleich-stand-laeuft::before { content: ""; flex: none; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--akzent); animation: vergleich-puls 1.2s ease-in-out infinite; }
.vergleich-laeuft.fertig::before { background: var(--ok); animation: none; }
.vergleich-stand-laeuft { font-weight: 600; white-space: nowrap; }
.vergleich-stand-laeuft::before { margin-right: var(--a-15); vertical-align: .05rem; }
@keyframes vergleich-puls { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .vergleich-laeuft::before, .vergleich-stand-laeuft::before { animation: none; } }
.vergleich-bericht[hidden] { display: none; }
.vergleich-bericht-kopf h2 { margin: 0; font-size: 1.125rem; font-weight: 650; }
.vergleich-bericht-kopf p { margin: var(--a-1) 0 0; }
.vergleich-bericht-frage { display: grid; gap: var(--a-1); padding: var(--a-3) var(--a-4); border-radius: var(--radius); background: var(--flaeche-2); }
.vergleich-bericht-frage p { margin: 0; font-size: 1rem; font-weight: 550; line-height: 1.5; }
.vergleich-bericht-einstellungen { margin: 0; font-size: .8125rem; color: var(--text-2); }
.vergleich-bericht-ergebnis { display: grid; gap: var(--a-2); }
.vergleich-bericht-ergebnis h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.vergleich-bericht-ergebnis p { margin: 0; line-height: 1.55; }
.vergleich-hinweis { font-size: .875rem; color: var(--text-2); }
.vergleich-bericht-unter { margin: var(--a-2) 0 0; font-size: .875rem; font-weight: 650; }
.vergleich-bericht-tabelle td { vertical-align: top; }
.vergleich-bericht-tabelle .vergleich-name { font-weight: 550; }
.vergleich-grund { min-width: 14rem; font-size: .8125rem; line-height: 1.45; color: var(--text-2); }
.vergleich-bericht-tabelle .zahl, .vergleich-frueher-tabelle .zahl { text-align: right; white-space: nowrap; }
.vergleich-bericht-tabelle .vergleich-total td { font-weight: 650; border-top: 1px solid var(--linie-stark); }
.vergleich-spalte { display: flex; flex-direction: column; }
.vergleich-kopf-titel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2); }
.vergleich-frueher-frage { min-width: 14rem; }
.vergleich-bericht-seite { max-width: 72rem; margin: 0 auto; padding: var(--a-6) var(--a-4) var(--a-12); }
.vergleich-bericht-seite .vergleich-bericht { margin-top: var(--a-4); }
.vergleich-bericht-aktionen { display: flex; justify-content: flex-end; }
.vergleich-antworten-titel { margin-top: var(--a-6); }
@media print {
  .vergleich-bericht-body .kz-kopf, .vergleich-bericht-aktionen { display: none !important; }
  .vergleich-bericht-seite { max-width: none; padding: 0; }
  .vergleich-spalten { grid-template-columns: minmax(0, 1fr); }
  .vergleich-bericht, .vergleich-spalte { padding: 0; border: 0; box-shadow: none; background: none; }
  .vergleich-spalte { margin-top: var(--a-6); padding-top: var(--a-4); border-top: 1px solid var(--linie); border-radius: 0; }
  .vergleich-spalte .karte { break-inside: avoid; }   /* Karte nicht über zwei Seiten (PDF Vergleich 78, 04.10.2026) */
  .vergleich-bericht-tabelle tr, .vergleich-vorteile { break-inside: avoid; }
  body.vergleich-bericht-body { background: #fff; }
  .vergleich-bericht-unter, .vergleich-kopf { break-after: avoid; }
}
/* Antworten als Reiter statt Spalten (Toni, 02.10.2026: «ich sagte die antworten nicht in 3 spalten») */
.vergleich-spalten.mit-reitern { display: block; }
.mit-reitern .vergleich-spalte[hidden] { display: none; }
.mit-reitern .vergleich-text { max-width: 46rem; }
.vergleich-reiter { display: flex; gap: var(--a-2); overflow-x: auto; margin-bottom: var(--a-3); padding-bottom: var(--a-1); }
.vergleich-reiter-knopf { display: flex; flex: none; align-items: center; gap: var(--a-2); padding: var(--a-2) var(--a-3); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.vergleich-reiter-knopf:hover { background: var(--flaeche-2); }
.vergleich-reiter-knopf[aria-selected="true"] { border-color: var(--linie-stark); background: var(--flaeche-2); }
.vergleich-reiter-knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.vergleich-reiter-name { font-size: .875rem; font-weight: 550; }
.vergleich-reiter-knopf[aria-selected="true"] .vergleich-reiter-name { font-weight: 650; }
.vergleich-reiter-stand { font-size: .75rem; color: var(--text-3); }
.vergleich-bericht-seite .vergleich-spalten { grid-template-columns: minmax(0, 1fr); }
.vergleich-bericht-seite .vergleich-text { max-width: 46rem; }
@media screen and (max-width: 900px) {   /* wie die gestapelten Tabellen, nur am Bildschirm */
  .vergleich-bericht-tabelle .zahl, .vergleich-frueher-tabelle .zahl { text-align: left; }
  .vergleich-bericht-tabelle .vergleich-total td { border-top: 0; }
}
/* Datum in der Liste früherer Vergleiche: klein und grau, aber eine echte Tabellenzelle («zelle-notiz» ist display: block
   und verschob Zelle und Linie, Bild Toni 02.10.2026) */
.vergleich-datum { font-size: .8125rem; color: var(--text-3); white-space: nowrap; }
/* PDF des Berichts als eigenes Dokument (Toni, 02.10.2026: «wieso sehen die pdfs so hässlich aus?»): weisse Seite,
   Kopf mit Logo, kompakte Tabellen, Antworten ab neuer Seite, keine Kartenrahmen. Am Bildschirm unverändert. */
.bericht-kopf-druck { display: none; }
@media print {
  @page { size: A4; }
  html, body, body.vergleich-bericht-body { background: #fff !important; }
  body.vergleich-bericht-body { font-size: 10pt; color: #1b1b1b; }
  .bericht-kopf-druck { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16pt; padding-bottom: 8pt; border-bottom: 1px solid #dcdcdc; font-size: 8.5pt; color: #777; }
  .bericht-kopf-druck .logo { width: auto; height: 20pt; }
  .vergleich-bericht-seite .vergleich-bericht { gap: 10pt; margin: 0; }
  /* Als Block statt Raster: Chrome teilte das Raster nicht und schob den ganzen Bericht auf Seite 2, Seite 1 blieb
     leer (PDF Vergleich 82, 05.10.2026) */
  .vergleich-bericht-seite .vergleich-bericht { display: block; }
  .vergleich-bericht-seite .vergleich-bericht > * + * { margin-top: 10pt; }
  .vergleich-laeuft.fertig { display: none !important; }
  /* Ohne Einblenden: Quellen und Prüfzeile waren im PDF halb durchsichtig, weil Chrome mitten in der Animation
     druckte (PDF Vergleich 82, 05.10.2026) */
  .vergleich-bericht-seite *, .vergleich-bericht-seite *::before, .vergleich-bericht-seite *::after { animation: none !important; transition: none !important; }
  .vergleich-bericht-kopf h2 { font-size: 17pt; font-weight: 650; letter-spacing: -.01em; }
  .vergleich-bericht-kopf .ps-karte-text { margin-top: 2pt; font-size: 8.5pt; color: #777; }
  .vergleich-bericht-frage { padding: 8pt 11pt; border-radius: 6pt; background: #f2f2f0 !important; }
  .vergleich-bericht-frage p { font-size: 11.5pt; }
  .vergleich-bericht-einstellungen { font-size: 8.5pt; color: #666; }
  .vergleich-bericht-ergebnis { margin-top: 4pt; }
  .vergleich-bericht-ergebnis h3 { font-size: 12pt; }
  .vergleich-bericht-ergebnis p { font-size: 9.5pt; line-height: 1.45; }
  .vergleich-bericht-unter { margin-top: 10pt; font-size: 10.5pt; break-after: avoid; }
  .vergleich-rahmen { overflow: visible; }
  .vergleich-bericht-tabelle { width: 100%; font-size: 8.5pt; }
  .vergleich-bericht-tabelle th { padding: 4pt 6pt; font-size: 7pt; }
  .vergleich-bericht-tabelle td { padding: 5pt 6pt; }
  .vergleich-grund { min-width: 0; font-size: 8pt; }
  .vergleich-bericht-tabelle .vergleich-name { white-space: nowrap; }
  .vergleich-antworten-titel { break-before: page; margin: 0 0 4pt; font-size: 13pt; }
  .vergleich-bericht-seite .vergleich-spalten { display: block; margin: 0; }
  .vergleich-bericht-seite .vergleich-spalte { margin: 0 0 14pt; padding: 10pt 0 0; border: 0; border-top: 1px solid #dcdcdc; border-radius: 0; }
  .vergleich-bericht-seite .vergleich-kopf { margin-bottom: 4pt; padding-bottom: 0; border-bottom: 0; break-after: avoid; }
  .vergleich-bericht-seite .vergleich-kopf b { font-size: 11pt; }
  .vergleich-bericht-seite .vergleich-vorteile { margin-bottom: 6pt; padding-bottom: 0; border-bottom: 0; font-size: 8pt; break-inside: avoid; break-after: avoid; }
  .vergleich-bericht-seite .vergleich-text { max-width: none; font-size: 9.5pt; line-height: 1.5; }
  .vergleich-bericht-seite .vergleich-text table { font-size: 8.5pt; }
  .vergleich-bericht-seite .quellen { margin-top: 6pt; }
  /* Tabellen zusammenhalten: «Total» stand sonst allein auf einer leeren Seite */
  /* Abstand zum Text darüber und bündig mit Überschrift und Text, ohne Einzug (Toni, 05.10.2026: «im pdf bericht kleben
     die tabellen am text … vorne bündig … ohne einrücken») */
  .vergleich-bericht-seite .vergleich-rahmen { margin: 6pt 0 0; break-inside: avoid; }
  .vergleich-bericht-seite .vergleich-bericht-tabelle th:first-child, .vergleich-bericht-seite .vergleich-bericht-tabelle td:first-child { padding-left: 0; }
  .vergleich-bericht-seite .vergleich-bericht-tabelle th:last-child, .vergleich-bericht-seite .vergleich-bericht-tabelle td:last-child { padding-right: 0; }
  .vergleich-bericht-tabelle { margin: 0; }
  .vergleich-bericht-unter { margin: 8pt 0 2pt; }
  .vergleich-bericht-tabelle th { padding-top: 2pt; }
}
.vergleich-beleg { display: block; margin-top: var(--a-1); font-size: .75rem; color: var(--text-3); white-space: nowrap; }
/* Messung der Suche von Hand (Prüfsatz → Suche, 03.10.2026) */
.ps-suche-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3); margin: var(--a-3) 0; }
.ps-suche-aktion .ps-karte-text { margin: 0; }

/* Statistik der Vergleiche: Balken «Platz 1 in %» je Teilnehmer, QDS in der Akzentfarbe (05.10.2026) */
.vgl-statistik { margin: 0 0 var(--a-6); }
.vgl-balken { display: grid; gap: var(--a-25); }
.vgl-balken-zeile { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) 3.5rem; align-items: center; column-gap: var(--a-3); row-gap: var(--a-05); }
.vgl-balken-name { font-size: .875rem; font-weight: 550; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vgl-balken-spur { height: .75rem; border-radius: 999px; background: var(--flaeche-2); overflow: hidden; }
.vgl-balken-fuell { height: 100%; border-radius: 999px; background: var(--text-3); }
.vgl-balken-zeile.qds .vgl-balken-fuell { background: var(--akzent); }
.vgl-balken-wert { font-size: .875rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.vgl-balken-neben { grid-column: 2 / 4; font-size: .75rem; color: var(--text-3); }
@media (max-width: 560px) {
  .vgl-balken-zeile { grid-template-columns: minmax(0, 1fr) 3rem; }
  .vgl-balken-name { grid-column: 1 / 3; }
  .vgl-balken-neben { grid-column: 1 / 3; }
}

/* Gesamtbericht, Datenplan: Stand als Etikett, offene Entscheide als Liste (05.10.2026) */
.gb-stand { display: inline-block; margin-right: var(--a-1); padding: var(--a-05) var(--a-2); border-radius: 6px; font-size: .72rem; font-weight: 600; background: var(--flaeche-2); color: var(--text-2); }
.gb-stand.erledigt { background: var(--ok-weich); color: var(--ok); }
.gb-stand.teils { background: var(--warn-weich); color: var(--warn); }
.gb-liste { margin: 0 0 var(--a-4); padding-left: var(--a-5); font-size: .875rem; line-height: 1.55; }
.gb-liste li + li { margin-top: var(--a-15); }

/* Gesamtbericht im PDF: lange Tabellen dürfen umbrechen (sonst sprang «Je Bereich» ganz auf die nächste Seite und liess
   eine halbe Seite leer), Titel und Erklärsatz bleiben bei ihrer Tabelle (05.10.2026) */
@media print {
  .gesamtbericht .vergleich-rahmen { break-inside: auto; }
  /* Kacheln nie über zwei Seiten: die vier Kacheln der Suche wurden am Seitenende zerschnitten (06.10.2026) */
  .gesamtbericht .gb-zahlen { break-inside: avoid; }
  .gesamtbericht .vergleich-bericht-einstellungen:has(+ .gb-zahlen) { break-after: avoid; }
  .gesamtbericht .vergleich-bericht-einstellungen:has(+ .vergleich-rahmen), .gesamtbericht .vergleich-bericht-unter,
  .gesamtbericht .gb-zahlen:has(+ .vergleich-bericht-einstellungen) { break-after: avoid; }
  .gesamtbericht .vergleich-bericht-tabelle thead { display: table-header-group; }
}

/* Wissen und Daten: Etikett schmal, Name umbrechend, Beschreibung breit (Toni, 05.10.2026: Etiketten in eigener Spalte) */
/* Drei Tabellen mit gleichen Spalten: Quelle, Stand, Beschreibung, feste Breiten (Toni, 05.10.2026: «alle 3 spalten bei
   allen 3 tabellen schön gleich untereinander») */
.gb-datenplan { table-layout: fixed; width: 100%; }
.gb-datenplan th:nth-child(1), .gb-datenplan td:nth-child(1) { width: 32%; }
.gb-datenplan th:nth-child(2), .gb-datenplan td:nth-child(2) { width: 15%; }
.gb-datenplan th:nth-child(3), .gb-datenplan td:nth-child(3) { width: 53%; }
.gesamtbericht .gb-datenplan .vergleich-name { white-space: normal; }
.gb-datenplan .vergleich-name .zelle-notiz { font-weight: 400; }

/* Untertitel in «Wissen und Daten»: klar als Titel, mit Abstand zur Tabelle darüber (Toni, 05.10.2026: «die erkennt man
   kaum als untertitel … kleben eher an der oberen tabelle») */
.gb-unter { margin: var(--a-7) 0 var(--a-2); font-size: .95rem; font-weight: 650; color: var(--text); }
/* Erklärung unter dem Untertitel, nicht daneben (Toni, 05.10.2026) */
.gb-unter span { display: block; margin-top: var(--a-05); font-size: .8125rem; font-weight: 400; color: var(--text-3); }
@media print { .gesamtbericht .gb-unter { margin: 14pt 0 4pt; font-size: 9.5pt; break-after: avoid; } .gesamtbericht .gb-unter span { font-size: 8pt; } }

/* Kapitel im PDF des Gesamtberichts klar getrennt (Toni, 05.10.2026: «die kleben alle so aufeinander») */
@media print { .gesamtbericht .vergleich-bericht-unter { margin-top: 24pt; } }

/* Kopf des Gesamtberichts: Modell gross, Zweck in einem Satz (05.10.2026) */
.gb-modell { margin: var(--a-1) 0 0; font-size: 1.05rem; color: var(--text); }
.gb-modell span { font-size: .875rem; color: var(--text-3); }
.gb-zweck { max-width: 46rem; margin: var(--a-2) 0 var(--a-2); font-size: .875rem; line-height: 1.5; color: var(--text-2); }
@media print { .gesamtbericht .gb-modell { font-size: 12pt; } .gesamtbericht .gb-zweck { font-size: 9pt; } }

/* Mehrfachauswahl der Vergleiche für ein PDF (05.10.2026) */
.vergleich-auswahl-leiste { display: flex; align-items: center; gap: var(--a-3); margin: 0 0 var(--a-3); }
.vergleich-auswahl-zahl { font-size: .8125rem; color: var(--text-3); }
.vergleich-wahl-zelle { width: 2.25rem; }
.vergleich-wahl-zelle input { width: 1rem; height: 1rem; accent-color: var(--knopf); cursor: pointer; }

/* Entwicklung im Gesamtbericht: Prozent mit einer Stelle passt in die Wertspalte (06.10.2026) */
.gesamtbericht .vgl-balken-zeile { grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) 4.5rem; }
.gesamtbericht .vgl-balken-wert { white-space: nowrap; }

/* Wahl von Modell und Vergleich im Gesamtbericht (06.10.2026) */
.gb-wahl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a-3); }
.gb-wahl .ps-feld { min-width: 12rem; }
/* Knopf unten bündig mit den Auswahlfeldern, gleiche Höhe wie .feld (Toni, 06.10.2026: «das soll schön aussehen?») */
.gb-aktionen { align-items: flex-end; }

/* Gesamtbericht im PDF: ein Abstandsraster für alles (Toni, 06.10.2026: «tabellen kleben an den texten … wie an der
   kilbi»). Kapitel 26pt davor, Untertitel 16pt, Text 6pt bis zur Tabelle, nach Tabelle, Kennzahlen und Balken 14pt. */
@media print {
  .gesamtbericht .vergleich-bericht-unter { margin: 26pt 0 6pt; }
  .gesamtbericht .gb-unter { margin: 16pt 0 6pt; }
  .gesamtbericht .vergleich-bericht-einstellungen { margin: 0 0 6pt; line-height: 1.45; }
  .gesamtbericht .vergleich-rahmen, .gesamtbericht .gb-zahlen, .gesamtbericht .vgl-balken, .gesamtbericht .gb-liste { margin: 6pt 0 14pt; }
  .gesamtbericht .vergleich-rahmen + .vergleich-bericht-einstellungen, .gesamtbericht .gb-zahlen + .vergleich-bericht-einstellungen,
  .gesamtbericht .vgl-balken + .vergleich-rahmen { margin-top: 10pt; }
  .gesamtbericht .vgl-balken { gap: 8pt; }
}

/* Modell-Zeile mit Abstand zum Stand darüber, nicht fett (Toni, 06.10.2026) */
.gb-modell { margin-top: var(--a-3); }
@media print { .gesamtbericht .gb-modell { margin-top: 10pt; } }

/* Lernstand: Kurven und Balken (Toni, 09.10.2026: «ich sehe kein diagramm oder steigende kurve») */
.ls-kurven { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--a-3); }
/* Kacheln im Lernstand: vier auf die ganze Breite, gleicher Abstand wie die Kurven (Toni, 09.10.2026: «ungleiche gaps») */

.ls-erklaerung { margin: 0 0 var(--a-4); font-size: .8125rem; line-height: 1.5; color: var(--text-2); }
.ls-kurve { display: flex; flex-direction: column; margin: 0; padding: var(--a-4); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); min-width: 0; }
.ls-kurve figcaption { font-size: .875rem; font-weight: 600; margin-bottom: var(--a-2); }
.ls-kurve svg { margin-top: auto; display: block; width: 100%; height: auto; overflow: visible; }
.ls-gitter { stroke: var(--linie); stroke-width: 1; }
.ls-fassung { stroke: var(--linie-stark); stroke-width: 1; stroke-dasharray: 3 3; }
.ls-achse { font-size: 13px; fill: var(--text-2); }
.ls-wert { font-size: 14px; font-weight: 600; fill: var(--text); }
.ls-kurve text { font-family: var(--schrift); stroke: none; }   /* die Symbolregel gab der Schrift eine Umrisslinie */
/* Ergebnis je Schritt mit kleinem Punkt statt Farbfläche (keine farbigen Randlinien, Toni 30.09.2026) */
.ls-marke { display: inline-flex; align-items: center; gap: var(--a-2); }
.ls-marke::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.ls-marke.schlecht::before { background: var(--fehler); }
.ls-schritte { margin-top: var(--a-4); }
#ls-kettentest .kennzahl small, #ls-wachstum .kennzahl small { display: block; margin-top: var(--a-1); font-size: .75rem; color: var(--text-2); }
.ls-linie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ls-linie.ls-r0 { stroke: var(--text); } .ls-linie.ls-r1 { stroke: var(--akzent); }
.ls-punkt circle:not(.ls-treffer) { stroke: var(--flaeche); stroke-width: 2; }
.ls-punkt.ls-r0 circle:not(.ls-treffer) { fill: var(--text); } .ls-punkt.ls-r1 circle:not(.ls-treffer) { fill: var(--akzent); }
.ls-kurve .ls-treffer { fill: transparent; stroke: none; }
.ls-legende { display: flex; gap: var(--a-4); margin-top: var(--a-3); font-size: .8125rem; color: var(--text-2); }
.ls-legende span { display: inline-flex; align-items: center; gap: var(--a-2); }
.ls-legende i { width: 8px; height: 8px; border-radius: 50%; background: var(--text); } .ls-legende i.ls-r1 { background: var(--akzent); }
.ls-balken { display: grid; gap: var(--a-2); }
.ls-balken-zeile { display: grid; grid-template-columns: minmax(0, 11rem) 1fr 4.5rem; gap: var(--a-3); align-items: center; font-size: .8125rem; }
.ls-balken-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.ls-balken-zeile.qds .ls-balken-name { color: var(--text); font-weight: 600; }
.ls-balken-spur { height: 10px; background: var(--flaeche-2); border-radius: 4px; overflow: hidden; }
.ls-balken-spur span { display: block; height: 100%; background: var(--text-2); border-radius: 4px; }
.ls-balken-zeile.qds .ls-balken-spur span { background: var(--akzent); }
.ls-balken-wert { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Abstände und Kachelbreiten für alle Seiten der Kontrollzentrale und Verwaltung (Toni, 10.10.2026: «Gap: die gaps im
   ganzen projekt prüfen … alles durchgehen und säubern» und «4 cards nicht 100% volle breite … möchte das auch nicht
   wieder erwähnen»). Gemessen headless auf 25 Seiten: Überschrift → Inhalt 12, 15 oder 16 px, Inhalt → Inhalt 10 bis
   24 px, Karten 12 oder 16 px; Kacheln auf 7 Seiten mit 191 px Lücke rechts. Eine Regel statt Einzelwerte:
   Titel → Inhalt a-7, vor jeder Überschrift a-10, Überschrift → Erklärtext a-15, Überschrift → Inhalt a-3,
   Inhalt → Inhalt a-4, Kartengruppe → Kartengruppe a-3 (wie der Abstand zwischen Karten). ── */
:is(.kz-bereich, .kz-abschnitt).kz-bereich > *, .kz-abschnitt.kz-abschnitt > * { margin-top: 0; margin-bottom: 0; }
:is(.kz-bereich, .kz-abschnitt).kz-bereich > * + *, .kz-abschnitt.kz-abschnitt > * + * { margin-top: var(--a-4); }
.kz-bereich.kz-bereich > .kz-titel + * { margin-top: var(--a-7); }
:is(.kz-bereich, .kz-abschnitt).kz-bereich > * + .kz-unter, .kz-abschnitt.kz-abschnitt > * + .kz-unter,
.kz-bereich.kz-bereich > .kz-abschnitt > .kz-unter:first-child { margin-top: var(--a-10); }
:is(.kz-bereich, .kz-abschnitt).kz-bereich > .kz-unter + *, .kz-abschnitt.kz-abschnitt > .kz-unter + * { margin-top: var(--a-3); }
:is(.kz-bereich, .kz-abschnitt).kz-bereich > .kz-unter + .kz-text, .kz-abschnitt.kz-abschnitt > .kz-unter + .kz-text { margin-top: var(--a-15); }
:is(.kz-bereich, .kz-abschnitt).kz-bereich > :is(.kennzahlen, .ps-steuerung, .ls-kurven, .ps-karte) + :is(.kennzahlen, .ps-steuerung, .ls-kurven, .ps-karte),
.kz-abschnitt.kz-abschnitt > :is(.kennzahlen, .ps-steuerung, .ls-kurven, .ps-karte) + :is(.kennzahlen, .ps-steuerung, .ls-kurven, .ps-karte) { margin-top: var(--a-3); }
/* Kacheln immer über die ganze Breite: Spalten nach Anzahl (3 → 3, 4 → 4, 6 → 3, 8 → 4), sonst so viele wie Platz */
.kennzahlen { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--a-3); }
.kennzahlen:has(> :nth-child(4):last-child), .kennzahlen:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kennzahlen:has(> :nth-child(3):last-child), .kennzahlen:has(> :nth-child(6):last-child), .kennzahlen.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .kennzahlen, .kennzahlen.drei, .kennzahlen:has(> :nth-child(4):last-child), .kennzahlen:has(> :nth-child(8):last-child),
  .kennzahlen:has(> :nth-child(3):last-child), .kennzahlen:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
:is(.kz-bereich, .kz-abschnitt).kz-bereich > h3 + *, .kz-abschnitt.kz-abschnitt > h3 + * { margin-top: var(--a-2); }
/* Leere Behälter (Daten kommen erst per Skript) zählen nicht als Abstand: ein leeres Raster hält seinen Rand, und eine
   Überschrift danach stand 56 statt 40 px tiefer (Messung 10.10.2026, Übersicht) */
:is(.kz-bereich, .kz-abschnitt).kz-bereich > :empty, .kz-abschnitt.kz-abschnitt > :empty { margin-top: 0; }
/* Leer-Karte (KZ.leer, 10.10.2026): statt nacktem Text bei leeren Listen und Tabellen; Tokens wie die Kacheln */
.leer-karte { display: flex; align-items: flex-start; gap: var(--a-3); padding: var(--a-4); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: var(--text-2); font-size: .875rem; text-align: left; white-space: normal; }
.leer-karte-symbol { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--flaeche-2); color: var(--text-3); }
.leer-karte-symbol svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.leer-karte-text { min-width: 0; padding-top: var(--a-1); }
.leer-karte-text b { display: block; color: var(--text); font-weight: 600; }
.leer-karte-text p { max-width: 48rem; margin: var(--a-05) 0 0; line-height: 1.5; }
.tabelle td.leer-zelle, .matrix td.leer-zelle { padding: var(--a-3) 0 0; border: 0; background: none; }
.tabelle tr:hover td.leer-zelle { background: none; }
caption.leer-zelle { padding: 0 0 var(--a-3); caption-side: top; text-align: left; }
/* ── Prüfsatz, umgebaut am 10.10.2026 (Toni: 13 Punkte zur Prüfsatz-Seite) ── */
/* Handlungsbedarf: eine Zeile je Signal, Zustand als Punkt (keine farbigen Randlinien, 30.09.2026) */
.ps-signale { display: grid; gap: var(--a-2); }
.ps-signal { display: flex; align-items: center; gap: var(--a-3); width: 100%; padding: var(--a-3) var(--a-4); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.ps-signal:hover { background: var(--flaeche-2); }
.ps-signal-punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.ps-signal.achtung .ps-signal-punkt { background: var(--fehler); }
.ps-signal.warn .ps-signal-punkt { background: var(--warn); }
.ps-signal-text { flex: 1; min-width: 0; display: grid; gap: var(--a-05); }
.ps-signal-text b { font-weight: 600; font-size: .9rem; }
.ps-signal-text span { color: var(--text-2); font-size: .8125rem; overflow-wrap: anywhere; }
.ps-signal-pfeil { flex: none; color: var(--text-3); font-size: 1.2rem; }
/* Vorschläge aus den Läufen: Text über die ganze Breite, Knöpfe darunter rechts */
.freigabe-zeile.ps-vorschlag { flex-wrap: wrap; align-items: flex-start; }
.freigabe-zeile.ps-vorschlag .freigabe-text { flex-basis: 100%; }
.freigabe-zeile.ps-vorschlag .freigabe-text b { white-space: normal; }
.freigabe-zeile.ps-vorschlag .reihe { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-left: auto; }
/* Fälle: eine Zeile je Fall, Einzelheiten in der Schublade */
.ps-fallzeile { cursor: pointer; }
.ps-fallzeile:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.ps-fallzeile td { vertical-align: middle; }
.ps-frage-kurz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .875rem; }
.ps-fall-unter { margin-top: var(--a-05); font-size: .75rem; color: var(--text-3); }
.ps-mehr { display: flex; align-items: center; gap: var(--a-3); }
.ps-fall-detail { display: grid; gap: var(--a-4); }
.ps-fall-detail .ps-fall-kopf { margin: 0; }
.ps-fd-frage { margin: 0; font-size: 1rem; line-height: 1.5; }
.ps-fall-detail .ps-bezug { margin: 0; }
.ps-fd-teil { display: grid; gap: var(--a-2); padding-top: var(--a-4); border-top: 1px solid var(--linie); }
.ps-fd-teil h3 { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.ps-fd-teil > :is(p, ul, div), .ps-fd-teil .ps-pruefliste, .ps-fd-teil .ps-meta, .ps-fd-teil .ps-notiz { margin: 0; }
.ps-pruefliste .gedaempft { color: var(--text-3); }
.schublade .ps-editor { margin: 0; padding: 0; border: 0; background: none; }
.schublade .ps-editor-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.schublade .ps-editor-raster > .ps-feld:first-child { grid-column: 1 / -1; }
/* Verlauf je Tag: Zahl der geprüften Fälle unter jedem Punkt; Tag ohne Prüfung hohl und grau */
#ps-verlauf .ps-linie-svg { height: 240px; }
.ps-linie-svg .achse.klein { font-size: 10px; }
.ps-linie-svg .punkt.ohne-pruefung circle { stroke: var(--text-3); }
.matrix td.nachgetragen { color: var(--text-3); background: none; }