/* Plattform: ein Raster und ein Design für alle Bereiche (Kundenbereich, Login, Eingang, Admin, Betreiber-Admin).
   Teil 1 Tokens (kern-tokens.css), Teil 2 Grundbausteine, Teil 3 Kundenbereich. Regeln und Beispiele: DESIGN.md im Wurzelordner.
   Farben und Schriften kommen ausschließlich aus der Markendatei (src/ui/seite.js setzt --bg, --text, --serif …,
   hell als Standard, dunkel über prefers-color-scheme oder data-theme). Hier nur Maße, keine Farbwerte. */

/* Teil 1 Tokens steht in kern-tokens.css (wird vorher geladen). */

/* ===================== Grundlagen ===================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ton-2); font-family: var(--sans); font-size: var(--text-normal); line-height: var(--zeile-text); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:hover { opacity: .72; }
button { font: inherit; }
img { max-width: 100%; }
p { margin: 0; }
.serif { font-family: var(--serif); }
/* Stufe 1: Überschriften, Preise, Namen, Marke */
h1, h2, h3, .preis, .kasse-name, .kasse-preis, .marke { color: var(--ton-1); }
/* Text-Hierarchie (Tokens --ton-1 … --ton-4 in kern-tokens.css): Stufe 1 Titel, Zahlen, Namen; Stufe 2 Inhalt (body);
   Stufe 3 Hinweise und Metadaten (leise); Stufe 4 sehr leise, etwa leere Zustände (still). */
.leise, .a-leise { color: var(--ton-3); }
.still, .a-still { font-size: var(--text-still); color: var(--ton-4); }
strong, b, .a-hell { color: var(--ton-1); }
.versteckt { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
form.inline { display: inline; margin: 0; }

/* ===================== 2. Grundbausteine ===================== */
/* Jeder Baustein hat einen Namen im Admin (a-…) und, wo es ihn schon gab, einen im Kundenbereich. Beide Namen
   stehen in derselben Regel: eine Änderung hier gilt überall. */

/* --- Überschriften und Text --- */
.a-h1, .titel-block h1, .begruessung h1, .modul-kopf h1, .lektion-kopf h1, .login-karte h1, .eingang-satz {
  margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--text-seitentitel); line-height: var(--zeile-titel); letter-spacing: -0.01em; overflow-wrap: anywhere; color: var(--ton-1); }
.a-h2, .bereich-kopf h2, .abschnitt > h2:not(.etikett), .a-detail-kopf h2 {
  margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--text-abschnitt); line-height: var(--zeile-titel); overflow-wrap: anywhere; color: var(--ton-1); }
/* In einer Karte ist die Überschrift ein Kartentitel */
.a-karte-titel, .a-karte .a-h2, .a-karte .a-detail-kopf h2, .a-detail .a-detail-kopf h2, .karte-titel {
  font-size: var(--text-kartentitel); line-height: var(--zeile-kartentitel); }
.a-label, .etikett, .abschnitt > h2.etikett {
  margin: 0; font-size: var(--text-etikett); font-weight: 500; line-height: var(--zeile-text); letter-spacing: var(--sperrung-etikett); text-transform: uppercase; color: var(--ton-3); }
/* Hilfetext: ein Satz, klein und leise */
.a-hinweis, .hinweis { margin: 0; font-size: var(--text-klein); line-height: var(--zeile-text); color: var(--ton-3); }
.a-fehler, .fehler-text { color: var(--fehler) !important; }
.fehler-text { margin: 0; font-size: var(--text-klein); }
.ok-text { margin: 0; font-size: var(--text-klein); color: var(--text); }
/* Statuszeile nach einer Aktion („Gespeichert.“) */
.a-status { margin: 0; min-height: 1em; font-size: var(--text-klein); color: var(--ton-3); }

/* --- Seitenkopf: Titel, ein Satz, Haupt-Button rechts --- */
.a-seitenkopf, .a-intro, .e-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--abstand-4) var(--abstand-6); flex-wrap: wrap; }
.a-seitenkopf > div, .a-intro > div { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: var(--abstand-2); }
.a-seitenkopf p, .a-intro p, .e-intro p, .titel-block p, .begruessung p, .modul-kopf p { margin: 0; max-width: 640px; font-size: var(--text-normal); line-height: var(--zeile-text); color: var(--ton-3); }
.a-seitenkopf p.klein, .a-intro p.klein { font-size: var(--text-klein); }
.e-intro { flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; }
.titel-block, .begruessung, .modul-kopf, .lektion-kopf { display: flex; flex-direction: column; gap: var(--abstand-2); }

/* --- Zeilenkopf und Kartenkopf: Titel links, eine Aktion rechts --- */
.a-zeilenkopf, .a-kopfzeile, .bereich-kopf, .a-karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--abstand-3) var(--abstand-4); flex-wrap: wrap; }
.a-kopfzeile .rechts, .a-karte-kopf .rechts { display: flex; gap: var(--abstand-3); align-items: center; flex-wrap: wrap; }
.bereich-kopf p { margin: 0; font-size: var(--text-klein); color: var(--ton-3); }

/* --- Abschnitt: Titel und Inhalt mit festem Abstand --- */
.a-abschnitt, .bereich, .abschnitt, .a-spalte { display: flex; flex-direction: column; gap: var(--abstand-4); min-width: 0; }
.a-abschnitt.dicht { gap: var(--abstand-2); }

/* --- Karte: eine Fläche, ein Rand, ein Radius, ein Innenabstand --- */
.a-karte, .a-detail, .kasse-karte, .termin-gebucht, .login-karte, .a-lektion-karte {
  min-width: 0; display: flex; flex-direction: column; gap: var(--karte-luecke);
  padding: var(--karte-innen); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-gross); }
/* Kasten: Karte ohne Fläche (Nebeninfos, Sperren, Ergebnis) */
.a-kasten, .termin-buchen, .sperre, .a-claude, .e-ergebnis {
  min-width: 0; display: flex; flex-direction: column; gap: var(--abstand-3);
  padding: var(--karte-innen); border: 1px solid var(--line); border-radius: var(--radius-gross); }
/* Hervorgehobene Karte (gewählt, aktuell) */
.a-karte.aktiv, .a-lektion-karte, .e-ergebnis, .modul-karte.ist-naechster { border-color: var(--text); }
.a-kasten > span:first-child { font-size: var(--text-normal); font-weight: 500; }
.a-kasten > span.text { font-size: var(--text-klein); line-height: var(--zeile-text); color: var(--ton-3); }

/* --- Felder: Label oben, Feld, Hilfetext darunter, Fehler darunter --- */
.a-formular, .formular { display: flex; flex-direction: column; gap: var(--feld-luecke); }
.a-feld, .feld, .a-suche { display: flex; flex-direction: column; gap: var(--abstand-2); min-width: 0; font-size: var(--text-klein); color: var(--ton-3); }
.a-feld input, .a-feld select, .a-feld textarea, .feld input, .feld select, .feld textarea, .a-suche input {
  width: 100%; height: var(--hoehe); padding: 0 var(--abstand-4); border-radius: var(--radius); border: 1px solid var(--line2);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-feld); }
.a-feld textarea, .feld textarea { height: auto; padding: var(--abstand-3) var(--abstand-4); line-height: var(--zeile-text); resize: vertical; }
.a-feld input[type="file"], .feld input[type="file"] { height: auto; padding: var(--abstand-3) var(--abstand-4); }
/* In einer Karte heben sich Felder mit dem Seitengrund ab */
/* Felder sehen überall aus wie im Login: Fläche, eine Linie. Nur die Kasse setzt sie auf den Seitengrund. */
.kasse-karte .feld input, .kasse-karte .feld select { background: var(--bg); }
.a-feld input:focus, .a-feld select:focus, .a-feld textarea:focus, .feld input:focus, .feld select:focus, .feld textarea:focus, .a-suche input:focus { outline: none; border-color: var(--text); }
.a-feld input[readonly], .feld input[readonly] { border-color: var(--line); background: transparent; color: var(--ton-3); }
.a-feld [aria-invalid="true"], .feld [aria-invalid="true"] { border-color: var(--fehler); }
.a-feld small, .feld .klein, .feld small { font-size: var(--text-klein); line-height: var(--zeile-text); color: var(--ton-3); }
.a-suche { width: 280px; max-width: 100%; }
.a-zwei, .feld-raster, .a-raster2, .a-raster4, .e-raster { display: grid; gap: var(--feld-luecke); }
.a-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feld-raster, .a-raster2, .e-raster { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.a-raster4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.haken, .a-haken { display: inline-flex; align-items: flex-start; gap: var(--abstand-3); font-size: var(--text-normal); line-height: var(--zeile-text); color: var(--text); cursor: pointer; }
.a-haken { align-items: center; min-height: var(--hoehe); }
.haken input, .a-haken input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--text); flex: 0 0 auto; }
.a-haken input { margin: 0; }

/* Code aus der Mail: sechs Kästchen, Einfügen verteilt sich (public/kern.js) */
.code-kaesten { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--abstand-2); }
.code-kaesten legend { padding: 0 0 var(--abstand-2); font-size: var(--text-klein); color: var(--ton-3); }
.code-kaesten input { width: 100%; min-width: 0; height: calc(var(--hoehe) + var(--abstand-3)); padding: 0; text-align: center; border-radius: var(--radius); border: 1px solid var(--line2);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-abschnitt); font-variant-numeric: tabular-nums; }
.login-karte .code-kaesten input, .a-karte .code-kaesten input { background: var(--bg); }
.code-kaesten input:focus { outline: none; border-color: var(--text); }
.code-feld { letter-spacing: 0.4em; text-align: center; font-size: var(--text-kartentitel) !important; }

/* --- Buttons: Haupt, Rand, leise. Eine Höhe (Desktop 44, Handy 48) --- */
.a-knopf, .knopf, .a-knopf-rand, .knopf-rand, .knopf-klein, .a-knopf-leise {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2);
  height: var(--hoehe); padding: 0 var(--abstand-6); border-radius: var(--radius-rund); border: 1px solid transparent;
  font: inherit; font-size: var(--text-normal); font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; }
/* Haupt: genau einer pro Schritt */
.a-knopf, .knopf { background: var(--btn-bg); color: var(--btn-text); }
.admin a.a-knopf, .admin a.a-knopf:hover, a.knopf:hover { color: var(--btn-text); }
/* Rand: Nebenaktionen */
.a-knopf-rand, .knopf-rand, .knopf-klein, .a-knopf-leise { background: transparent; color: var(--ton-1); border-color: var(--line2); }
.a-knopf-rand:hover, .knopf-rand:hover, .knopf-klein:hover, .a-knopf-leise:hover { border-color: var(--text); opacity: 1; }
/* klein: weniger Seitenluft, gleiche Höhe */
.a-knopf-rand.klein, .a-knopf.klein, .knopf-klein, .a-knopf-leise { padding: 0 var(--abstand-4); font-size: var(--text-klein); }
.a-knopf-leise { align-self: flex-start; }
/* Leise: nur Text, für Abbrechen, Entfernen, Zurücksetzen */
.a-textknopf, .knopf-text, .e-link {
  display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: var(--hoehe); padding: 0; border: 0; background: transparent;
  color: var(--ton-2); font: inherit; font-size: var(--text-klein); font-weight: var(--gewicht-stark); text-decoration: none; cursor: pointer; }
.a-textknopf:hover, .knopf-text:hover, .e-link:hover { color: var(--ton-1); opacity: 1; }
.e-link { min-height: 0; text-decoration: underline; text-underline-offset: 3px; }
.a-knopf[disabled], .knopf[disabled], .a-knopf-rand[disabled], .knopf-klein[disabled], .a-textknopf[disabled] { opacity: .45; cursor: default; }
/* Leiste unter einem Formular: Status links, Buttons rechts */
.a-fussleiste { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-3) var(--abstand-4); flex-wrap: wrap; }
.a-fussleiste.linie, .a-trenner { padding-top: var(--karte-luecke); border-top: 1px solid var(--line); }
.a-fussleiste .rechts { display: flex; gap: var(--abstand-3); flex-wrap: wrap; align-items: center; }
.a-aktionen { display: flex; gap: var(--abstand-3) var(--abstand-4); flex-wrap: wrap; align-items: center; }

/* --- Auswahl-Chips (Filter, Pills, Wahl) --- */
.a-filter, .e-pills, .w-wahl, .a-variablen { display: flex; gap: var(--abstand-2); flex-wrap: wrap; align-items: center; }
.a-filter a, .e-pills button, .w-wahl button, .a-variablen button, .wahl button, .i-schritte li {
  display: inline-flex; align-items: center; height: var(--hoehe-chip); padding: 0 var(--abstand-4); border-radius: var(--radius-rund);
  border: 1px solid var(--line2); background: transparent; color: var(--text); font: inherit; font-size: var(--text-klein); text-decoration: none; cursor: pointer; }
.a-filter a[aria-current="true"], .e-pills button[aria-checked="true"], .w-wahl button[aria-checked="true"], .wahl button[aria-checked="true"], .i-schritte li[aria-current="step"] {
  border-color: var(--text); background: var(--text); color: var(--bg); }
.admin .a-filter a[aria-current="true"]:hover { color: var(--bg); }
.a-variablen button { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --- Hinweis (Kasten mit einem Satz) --- */
.a-meldung, .meldung, .test-banner { margin: 0; padding: var(--abstand-3) var(--abstand-4); border-radius: var(--radius); border: 1px solid var(--line2); font-size: var(--text-klein); line-height: var(--zeile-text); color: var(--text); }
.a-meldung.fehler, .meldung.fehler { color: var(--fehler); border-color: var(--fehler); }
.test-banner { color: var(--ton-3); }

/* --- Status-Pill --- */
.a-pill, .pill, .pill-rand { display: inline-flex; align-items: center; gap: var(--abstand-1); height: 24px; padding: 0 var(--abstand-3); border-radius: var(--radius-rund);
  font-size: var(--text-etikett); line-height: 1; white-space: nowrap; background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.a-pill.rand, .pill-rand { background: transparent; color: var(--ton-3); border-color: var(--line2); }
.a-pill.akzent { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.a-pill.fehler { background: transparent; color: var(--fehler); border-color: var(--fehler); }

/* --- Leerer Zustand: ein Satz, ein Button --- */
.a-leer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--abstand-4); padding: var(--karte-innen); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-gross); }
.a-leer p { margin: 0; font-size: var(--text-normal); color: var(--ton-3); }
.a-leer.still { padding: var(--abstand-5) var(--karte-innen); }

/* Rückfrage und Meldungsleiste (window.Meldung in kern.js): ersetzen alert, confirm und prompt des Browsers.
   Rückfrage = Dialog mit einem Satz und zwei Buttons, Meldungsleiste = Hinweis oben über der Seite. */
.a-dialog, .w-dialog { width: min(var(--breite-schmal), calc(100vw - 2 * var(--rand))); padding: var(--karte-innen); border: 1px solid var(--line); border-radius: var(--radius-gross); background: var(--surface); color: var(--text); }
.a-dialog::backdrop, .w-dialog::backdrop { background: color-mix(in srgb, var(--text) 35%, transparent); }
.a-dialog-text { margin: 0; font-size: var(--text-normal); line-height: var(--zeile-text); color: var(--text); }
.a-dialog-aktionen { justify-content: flex-end; }
.a-meldungsleiste { position: fixed; top: var(--abstand-4); left: var(--rand); right: var(--rand); z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.a-meldungsleiste[hidden] { display: none; }
.a-meldungsleiste .a-meldung { display: flex; align-items: center; gap: var(--abstand-4); max-width: var(--breite-normal); background: var(--surface); pointer-events: auto; }

/* --- Tabelle und Liste: Kartenliste wie die Terminliste im Portal (Fläche, Linie, großer Radius, Zeilen mit Linie
   dazwischen). Auf dem Handy wird jede Zeile ein Block: erste Zelle oben, der Rest klein darunter. --- */
.a-tabelle-rahmen, .a-zeilen { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-gross); }
.a-tabelle-rahmen { overflow-x: auto; padding: 0 var(--abstand-6); }
.a-tabelle { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--text-normal); }
.a-tabelle thead tr { text-align: left; color: var(--ton-3); font-size: var(--text-etikett); letter-spacing: var(--sperrung-etikett); text-transform: uppercase; }
.a-tabelle th { padding: var(--abstand-5) var(--abstand-3) var(--abstand-3); font-weight: 500; }
.a-tabelle td { padding: var(--abstand-5) var(--abstand-3); vertical-align: top; }
.a-tabelle.kompakt td { padding: var(--abstand-4) var(--abstand-3); }
.a-tabelle th:first-child, .a-tabelle td:first-child { padding-left: 0; }
.a-tabelle th:last-child, .a-tabelle td:last-child { padding-right: 0; text-align: right; }
.a-tabelle tbody tr { border-top: 1px solid var(--line); }
/* gewählte Zeile: Seitengrund und innere Linie links, über die ganze Breite der Karte */
.a-tabelle tr.gewaehlt { background: var(--bg); box-shadow: inset 2px 0 0 var(--text); }
.a-tabelle tr.gewaehlt td:first-child { padding-left: var(--abstand-4); }
.a-tabelle tr[data-link] { cursor: pointer; }
.a-tabelle .name { font-weight: 500; text-decoration: none; color: var(--ton-1); }
.a-tabelle .unter { color: var(--ton-3); font-size: var(--text-klein); }
/* Liste: Zeilen mit Linie dazwischen, in einer Karte */
.a-zeilen { list-style: none; margin: 0; padding: 0 var(--abstand-6); display: flex; flex-direction: column; }
.a-zeilen > li, .a-zeilen > a { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-3) var(--abstand-4); flex-wrap: wrap; padding: var(--abstand-5) 0; border-top: 1px solid var(--line); text-decoration: none; }
.a-zeilen > :first-child { border-top: 0; }
/* Verlauf in einer Karte (Heute, Zuletzt passiert): Zeilen mit Linie wie die Terminliste im Portal */
.a-karte > .a-verlauf { gap: 0; font-size: var(--text-normal); }
.a-karte > .a-verlauf > li { padding: var(--abstand-3) 0; border-top: 1px solid var(--line); }
.a-karte > .a-verlauf > li:first-child { padding-top: 0; border-top: 0; }
/* Verlauf: kurze Einträge untereinander */
.a-verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--abstand-2); font-size: var(--text-klein); color: var(--ton-3); }
.a-hell { color: var(--text); }

/* --- Kennzahlen --- */
.a-zahlen { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--abstand-4); }
.a-zahl { display: flex; flex-direction: column; gap: var(--abstand-2); padding: var(--abstand-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-gross); }
.a-zahl span:nth-child(1) { font-size: var(--text-etikett); font-weight: 500; letter-spacing: var(--sperrung-etikett); text-transform: uppercase; color: var(--ton-3); }
.a-zahl span:nth-child(2) { font-family: var(--serif); font-size: var(--text-seitentitel); line-height: var(--zeile-titel); color: var(--ton-1); }
.a-zahl span:nth-child(3) { font-size: var(--text-klein); color: var(--ton-3); }
.a-zahl span:nth-child(3):empty { display: none; }

@media (max-width: 640px) {
  .a-zwei { grid-template-columns: minmax(0, 1fr); }
  .a-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-3); }
  .a-zahl { padding: var(--abstand-4); }
  .a-seitenkopf .a-knopf, .a-intro > .a-knopf { width: 100%; }
  .a-tabelle-rahmen, .a-zeilen { padding: 0 var(--abstand-5); }
  .a-tabelle { min-width: 0; }
  .a-tabelle thead { display: none; }
  .a-tabelle tbody, .a-tabelle tr { display: block; }
  .a-tabelle tbody tr { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-3); padding: var(--abstand-4) 0; }
  .a-tabelle tbody tr:first-child { border-top: 0; }
  .a-tabelle tr.gewaehlt { margin: 0 calc(-1 * var(--abstand-5)); padding-left: var(--abstand-5); padding-right: var(--abstand-5); }
  .a-tabelle td, .a-tabelle.kompakt td { display: block; padding: 0; text-align: left; font-size: var(--text-klein); color: var(--ton-3); }
  .a-tabelle td:first-child, .a-tabelle tr.gewaehlt td:first-child { flex: 1 1 100%; padding: 0; font-size: var(--text-normal); color: var(--text); }
  .a-tabelle td:last-child { text-align: left; }
}

/* ===================== 3. Kundenbereich ===================== */

/* Seitenbreiten: breit (Übersicht), normal (Modul, Lektion, Hilfe), schmal (Formulare, Login, Nachricht) */
.start, .schmal, .eng, .kopf { width: 100%; margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }
.start { max-width: calc(var(--breite-breit) + 2 * var(--rand)); padding-top: var(--seite-oben); padding-bottom: var(--seite-unten); display: flex; flex-direction: column; gap: var(--abstand-abschnitt); }
.schmal { max-width: calc(var(--breite-normal) + 2 * var(--rand)); padding-top: var(--seite-oben); padding-bottom: var(--seite-unten); display: flex; flex-direction: column; gap: var(--abstand-abschnitt); }
.eng { max-width: calc(var(--breite-schmal) + 2 * var(--rand)); padding-top: var(--seite-oben); padding-bottom: var(--seite-unten); display: flex; flex-direction: column; gap: var(--abstand-7); }

/* Kopf */
.kopf { max-width: calc(var(--breite-breit) + 2 * var(--rand)); padding-top: var(--abstand-6); padding-bottom: var(--abstand-6); display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-6); }
.marke { font-family: var(--serif); font-size: 18px; text-decoration: none; letter-spacing: 0.01em; }
.marke-logo { display: block; height: 32px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; }
/* Wortmarke aus der Markendatei („wortmarke“: Text vor und nach dem Kreis); Schrift und Kugel setzt das Produkt-CSS */
.wortmarke { display: inline-flex; align-items: baseline; line-height: 1; white-space: nowrap; }
.wortmarke-o { display: inline-block; width: .5em; height: .5em; margin: 0 .08em; border-radius: 50%; background: currentColor; }
.kopf-nav { display: flex; gap: var(--abstand-6); align-items: center; font-size: var(--text-normal); }
.kopf-nav .rechts { display: flex; align-items: center; gap: var(--abstand-6); }
.link-leise { text-decoration: none; color: var(--ton-3); font-size: var(--text-normal); }
.schalter { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-rund); border: 1px solid var(--line); }
.schalter button { width: 36px; height: 36px; border-radius: var(--radius-rund); border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; color: var(--ton-3); }
.schalter button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-text); }
.schalter-mobil { display: none; width: var(--hoehe); height: var(--hoehe); border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); align-items: center; justify-content: center; cursor: pointer; }
.schalter-mobil .ic-sonne { display: none; }
.schalter-mobil .ic-mond { display: block; }
.ist-dunkel .schalter-mobil .ic-sonne { display: block; }
.ist-dunkel .schalter-mobil .ic-mond { display: none; }
.avatar { width: var(--hoehe); height: var(--hoehe); border-radius: 50%; background: var(--img); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: var(--text-klein); font-weight: 500; text-decoration: none; overflow: hidden; flex: 0 0 auto; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zurueck { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: var(--hoehe); font-size: var(--text-normal); color: var(--ton-3); text-decoration: none; align-self: flex-start; }

/* Etiketten */
.marker { display: flex; align-items: center; gap: var(--abstand-2); }
.punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); flex: 0 0 auto; }

/* Bildflächen mit Modulnummer (Titelbild fehlt) */
.schritt-bild, .modul-bild, .modul-titelbild { background: var(--img); border-radius: var(--radius); padding: var(--abstand-4) var(--abstand-5); display: flex; align-items: flex-end; justify-content: space-between; position: relative; overflow: hidden; }
.schritt-bild .nr, .modul-bild .nr, .modul-titelbild .nr { font-family: var(--serif); font-style: italic; font-size: var(--text-bildzahl); line-height: 1; color: var(--img-text); position: relative; }
.titelbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.schritt-bild .pill, .modul-bild .pill, .modul-titelbild .pill { position: relative; }

/* Startseite: nächster Schritt */
.schritt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-gross); padding: var(--abstand-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-7); }
.schritt-bild { flex: 1 1 380px; aspect-ratio: 16 / 10; }
.schritt-text { flex: 1 1 380px; min-width: 0; padding: var(--abstand-3) var(--abstand-6) var(--abstand-3) 0; display: flex; flex-direction: column; gap: var(--abstand-3); align-items: flex-start; }
.schritt-text h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--text-abschnitt); line-height: var(--zeile-kartentitel); }
.schritt-text p { margin: 0; color: var(--ton-3); }
.schritt-text .knopf { margin-top: var(--abstand-2); }

/* Termine */
.termin-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--abstand-6); }
.termin-gebucht { justify-content: space-between; }
.termin-gebucht .oben { display: flex; flex-direction: column; gap: var(--abstand-2); }
.termin-gebucht .etikett { display: inline-flex; align-items: center; gap: var(--abstand-2); }
.termin-gebucht h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--text-kartentitel); line-height: var(--zeile-kartentitel); }
.termin-gebucht p { margin: 0; color: var(--ton-3); }
.termin-aktionen { display: flex; align-items: center; gap: var(--abstand-4); flex-wrap: wrap; }
.termin-buchen { gap: var(--abstand-2); }
.termin-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.termin-liste li { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-4); padding: var(--abstand-3) 0; border-bottom: 1px solid var(--line); }
.termin-liste li:last-child { border-bottom: 0; }
.termin-liste .wann { display: flex; flex-direction: column; }
.termin-liste .wann span + span { font-size: var(--text-klein); color: var(--ton-3); }
.termin-buchen > a.link-leise { align-self: flex-start; padding: var(--abstand-2) 0; }
.termin-liste li.slot-tag { align-items: flex-start; }
.slot-zeiten { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--abstand-2); max-width: 60%; }
.termin-gesperrt .termin-liste { filter: blur(3px); opacity: .6; pointer-events: none; user-select: none; }
.termin-gesperrt .sperr-hinweis { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-4); font-size: var(--text-normal); color: var(--ton-3); }
.termin-gesperrt .sperr-hinweis a { color: var(--text); font-weight: 500; text-decoration: none; }
.mon-rest { display: inline; }

/* Module */
.modul-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--abstand-6); }
.modul-karte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-gross); padding: var(--abstand-3); display: flex; flex-direction: column; gap: var(--abstand-3); }
.modul-bild { aspect-ratio: 16 / 9; }
.modul-text, .modul-fuss, .modul-fuss-offen, .modul-fuss-bald { padding: 0 var(--abstand-3); }
.modul-text { padding-top: var(--abstand-2); display: flex; flex-direction: column; gap: var(--abstand-2); flex: 1 1 auto; }
.modul-text h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--text-kartentitel); line-height: var(--zeile-kartentitel); }
.modul-text p { margin: 0; color: var(--ton-3); }
.modul-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-3); font-size: var(--text-normal); }
.modul-fuss a, .modul-fuss-offen a { display: inline-flex; align-items: center; min-height: var(--hoehe); text-decoration: none; }
.modul-fuss a.stark, .modul-fuss-offen a { font-weight: 500; }
.modul-fuss .check { display: inline-flex; align-items: center; gap: var(--abstand-2); }
.modul-fuss-offen { padding-top: var(--abstand-2); display: flex; flex-direction: column; gap: var(--abstand-1); }
.modul-fuss-offen .zeile { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-normal); }
.modul-fuss-bald { padding-bottom: var(--abstand-3); color: var(--ton-3); }
/* Gesperrte Karte (Jan 03.11.2026), eine Quelle für Admin und Portal: die ganze Karte bei .5, sonst wie jede Karte.
   Das Schloss (SCHLOSS_KACHEL) steht in .gesperrt-huelle neben der Karte und liegt mittig über Bild oder Vorschau,
   damit es nicht mit ausblasst. In Vorschau-Dokumenten bleiben Unternehmen und Überschrift lesbar, Unterzeilen sind
   verpixelt (.verpixelt: harte Kacheln, keine Unschärfe, keine Schrägstreifen). */
:is(.modul-karte, .a-modul).gesperrt { opacity: .5; }
.gesperrt-huelle { position: relative; display: grid; min-width: 0; }
.schloss-kachel { position: absolute; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.schloss-kachel > span { width: 80px; height: 80px; border-radius: 20px; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 40%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 .6px var(--line2), 0 10px 24px -12px rgba(10, 10, 20, .18); }
.schloss-kachel i { font-style: normal; font-size: 32px; line-height: 1; }
.verpixelt { display: block; height: 10px; --px-a: color-mix(in srgb, var(--text) 18%, transparent); --px-b: color-mix(in srgb, var(--text) 8%, transparent);
  background: conic-gradient(var(--px-a) 25%, transparent 0 50%, var(--px-a) 0 75%, transparent 0) 0 0 / 10px 10px,
    linear-gradient(90deg, var(--px-a) 0 40%, transparent 0) 0 0 / 25px 5px, linear-gradient(90deg, transparent 0 60%, var(--px-a) 0) 0 5px / 35px 5px, var(--px-b); }
.modul-raster .gesperrt-huelle > .schloss-kachel { top: calc(var(--abstand-3) + 1px); left: calc(var(--abstand-3) + 1px); right: calc(var(--abstand-3) + 1px); aspect-ratio: 16 / 9; }
.fortschritt { height: 2px; background: var(--track); border-radius: 2px; }
.fortschritt > div { height: 2px; background: var(--text); border-radius: 2px; }

.fuss { display: flex; justify-content: space-between; gap: var(--abstand-4); flex-wrap: wrap; padding-top: var(--abstand-7); border-top: 1px solid var(--line); font-size: var(--text-klein); color: var(--ton-3); }
.fuss p { margin: 0; }

/* Modulseite, Lektion, Hilfe */
.modul-titelbild { aspect-ratio: 16 / 7; padding: var(--abstand-6); }
.modul-titelbild.gesperrt-bild { background: var(--img-locked); }
.meta { display: flex; gap: var(--abstand-6); flex-wrap: wrap; font-size: var(--text-klein); color: var(--ton-3); }
.lektionen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.lektionen li { display: flex; align-items: center; gap: var(--abstand-6); padding: var(--abstand-6) 0; border-bottom: 1px solid var(--line); }
.lektionen .nr { width: 28px; font-size: var(--text-klein); color: var(--ton-3); flex: 0 0 auto; }
.lektionen .mitte { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--abstand-1); min-width: 0; }
.lektionen .titel { font-size: var(--text-normal); text-decoration: none; }
.lektionen .erledigt .titel { color: var(--dim); }
.lektionen .unter { font-size: var(--text-klein); color: var(--ton-3); }
.lektionen .check { display: inline-flex; align-items: center; gap: var(--abstand-2); font-size: var(--text-klein); }
.lektionen .kreis { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line2); flex: 0 0 auto; }
.lektionen li.aktuell { padding: var(--karte-innen); margin: var(--abstand-3) 0; background: var(--surface); border: 1px solid var(--text); border-radius: var(--radius-gross); flex-wrap: wrap; }
.lektionen li.aktuell .mitte { flex: 1 1 260px; }
.lektionen li.aktuell .titel { font-family: var(--serif); font-size: var(--text-kartentitel); line-height: var(--zeile-kartentitel); }
.lektionen .gesperrt-zeile .titel { color: var(--dim); }
.ausblick { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-6); flex-wrap: wrap; padding-top: var(--abstand-7); border-top: 1px solid var(--line); }
.ausblick > div { display: flex; flex-direction: column; gap: var(--abstand-1); }
.ausblick .was { font-size: var(--text-normal); text-decoration: none; }
.sperre { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--abstand-6); flex-wrap: wrap; }
.sperre p { margin: 0; color: var(--ton-3); }

.video { aspect-ratio: 16 / 9; background: var(--img); border-radius: var(--radius-gross); overflow: hidden; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.prosa { font-size: var(--text-lesen); line-height: 1.75; }
.prosa > :first-child { margin-top: 0; }
.prosa > :last-child { margin-bottom: 0; }
.prosa h2, .prosa h3, .prosa h4 { font-family: var(--serif); font-weight: 400; line-height: var(--zeile-kartentitel); margin: var(--abstand-7) 0 var(--abstand-3); }
.prosa h2 { font-size: var(--text-abschnitt); }
.prosa h3, .prosa h4 { font-size: var(--text-kartentitel); }
.prosa p, .prosa ul, .prosa ol, .prosa blockquote { margin: 0 0 var(--abstand-4); }
.prosa ul, .prosa ol { padding-left: var(--abstand-6); }
.prosa blockquote { padding-left: var(--abstand-4); border-left: 2px solid var(--line2); color: var(--ton-3); }
.prosa code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--img); padding: 2px 6px; border-radius: var(--radius-klein); }
.anhang { display: flex; align-items: center; gap: var(--abstand-4); padding: var(--abstand-4); border-radius: var(--radius); border: 1px solid var(--line); text-decoration: none; }
.lektion-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-6); flex-wrap: wrap; padding-top: var(--abstand-7); border-top: 1px solid var(--line); }
.lektion-fuss .check { display: inline-flex; align-items: center; gap: var(--abstand-2); }

.hilfe-liste { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.hilfe-liste details { border-bottom: 1px solid var(--line); }
.hilfe-liste summary { cursor: pointer; list-style: none; padding: var(--abstand-5) 0; font-family: var(--serif); font-size: var(--text-kartentitel); line-height: var(--zeile-kartentitel); display: flex; justify-content: space-between; gap: var(--abstand-4); }
.hilfe-liste summary::-webkit-details-marker { display: none; }
.hilfe-liste summary::after { content: '+'; font-family: var(--sans); color: var(--ton-3); }
.hilfe-liste details[open] summary::after { content: '−'; }
.hilfe-liste .prosa { padding: 0 0 var(--abstand-6); color: var(--ton-3); font-size: var(--text-normal); }

/* Formulare (Profil, Kasse) */
.ehrenfeld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.email-aendern { padding-top: var(--abstand-2); }
.links-aus { align-self: flex-start; }

/* Profil */
.foto-zeile { display: flex; align-items: center; gap: var(--abstand-6); flex-wrap: wrap; }
.foto-gross { width: 112px; height: 112px; border-radius: 50%; background: var(--img); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: var(--text-seitentitel); color: var(--text); overflow: hidden; }
.foto-gross img { width: 100%; height: 100%; object-fit: cover; }
.foto-knoepfe { display: flex; flex-direction: column; gap: var(--abstand-2); align-items: flex-start; }
.foto-knoepfe .reihe { display: flex; gap: var(--abstand-4); align-items: center; }
.wahl { display: flex; gap: var(--abstand-1); padding: var(--abstand-1); border-radius: var(--radius-rund); border: 1px solid var(--line); align-self: flex-start; }
.wahl button { border-color: transparent; color: var(--ton-3); }
.liste { display: flex; flex-direction: column; gap: var(--abstand-2); }
.liste .zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-4); padding: var(--abstand-4) 0; border-top: 1px solid var(--line); }
.liste .zeile:last-child { border-bottom: 1px solid var(--line); }
.liste label.zeile { cursor: pointer; }
.liste .zeile input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--text); }
.liste .zeile input[type=radio] { width: 20px; height: 20px; margin: 0; accent-color: var(--text); flex: 0 0 auto; }
/* Kasse (Bezahlen Stufe 2): Zahlweg zur Wahl, Rechnungsdaten aufklappbar */
.kasse-wahl { display: flex; flex-direction: column; gap: var(--abstand-1); flex: 1 1 auto; min-width: 0; }
.kasse-wahl .leise { font-size: var(--text-klein); }
.kasse-karte .liste .zeile { flex-wrap: wrap; }
.kasse-karte .liste .zeile .kasse-wahl { flex: 1 1 180px; overflow-wrap: anywhere; }
.kasse-mehr { border-top: 1px solid var(--line); padding-top: var(--abstand-4); }
.kasse-mehr > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--abstand-3); font-size: var(--text-normal); color: var(--text); }
.kasse-mehr > summary::-webkit-details-marker { display: none; }
.kasse-mehr > summary::after { content: "+"; color: var(--ton-3); }
.kasse-mehr[open] > summary::after { content: "\2212"; }
.kasse-mehr[open] > summary { margin-bottom: var(--abstand-4); }
.ende-zeile { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-4); flex-wrap: wrap; }

/* Kasse */
.preis-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--abstand-4); flex-wrap: wrap; }
.preis { font-family: var(--serif); font-size: var(--text-seitentitel); line-height: var(--zeile-titel); }

/* Handy */
@media (max-width: 640px) {
  .kopf { gap: var(--abstand-3); padding-top: var(--abstand-4); padding-bottom: var(--abstand-4); }
  .marke { font-size: 17px; letter-spacing: 0; }
  .kopf-nav { gap: var(--abstand-2); }
  .kopf-nav .link-hilfe { display: none; }
  .schalter { display: none; }
  .schalter-mobil { display: flex; }
  .schritt { flex-direction: column; align-items: stretch; gap: var(--abstand-2); }
  .schritt-bild { flex: none; }
  .schritt-text { flex: none; padding: var(--abstand-3); align-items: stretch; }
  .schritt-text .knopf { width: 100%; }
  .schritt-text .nur-gross { display: none; }
  .bereich-termine .bereich-kopf { flex-direction: column; align-items: flex-start; gap: var(--abstand-1); }
  .termin-raster, .modul-raster { display: flex; flex-direction: column; gap: var(--abstand-4); }
  .termin-aktionen { justify-content: space-between; }
  .termin-buchen > .etikett, .termin-buchen > a.link-leise { display: none; }
  .termin-liste li.slot-tag { flex-direction: column; gap: var(--abstand-2); }
  .slot-zeiten { justify-content: flex-start; max-width: none; }
  .mon-rest { display: none; }
  .fuss .nur-gross { display: none; }
  .lektionen li { gap: var(--abstand-4); }
  .lektionen li.aktuell .knopf { width: 100%; }
}

/* ===================== Lektion aus Blöcken (Bauauftrag 01.11.2026, Teil B) =====================
   Lesespalte um 680 px, Bilder über die ganze Spalte, Zitat mit Akzentlinie, Hinweis-Kasten, Button, Trennlinie. */
:root { --breite-lesen: 680px; }
.schmal.lektion-seite { max-width: calc(var(--breite-lesen) + 2 * var(--rand)); }
.lektion-inhalt { display: flex; flex-direction: column; }
.lektion-inhalt > * { margin-top: 0; margin-bottom: var(--abstand-5); }
.lektion-inhalt > :last-child { margin-bottom: 0; }
.lektion-inhalt h2, .lektion-inhalt h3 { margin-top: var(--abstand-7); margin-bottom: var(--abstand-3); }
.lektion-inhalt > h2:first-child, .lektion-inhalt > h3:first-child { margin-top: 0; }
.lektion-inhalt a:not(.knopf):not(.anhang) { color: inherit; text-decoration: underline; text-decoration-color: var(--akzent); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.lektion-inhalt li + li { margin-top: var(--abstand-2); }
.lektion-inhalt .video { margin-top: var(--abstand-3); margin-bottom: var(--abstand-6); }
.lektion-inhalt .video video, .lektion-seite > .video video { width: 100%; height: 100%; display: block; background: var(--img); }
.l-bild { margin-left: 0; margin-right: 0; display: flex; flex-direction: column; gap: var(--abstand-2); }
.l-bild img { width: 100%; height: auto; display: block; border-radius: var(--radius-gross); background: var(--img); }
.l-bild figcaption { font-size: var(--text-klein); line-height: var(--zeile-text); color: var(--ton-3); }
.prosa blockquote.l-zitat { margin-left: 0; margin-right: 0; padding: var(--abstand-1) 0 var(--abstand-1) var(--abstand-5); border-left: 3px solid var(--akzent); color: var(--text); }
.l-zitat p { margin: 0; font-family: var(--serif); font-size: var(--text-kartentitel); line-height: var(--zeile-kartentitel); }
.l-zitat footer { margin-top: var(--abstand-2); font-size: var(--text-klein); color: var(--ton-3); }
.l-hinweis { padding: var(--abstand-4) var(--abstand-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: var(--abstand-1); }
.l-hinweis strong { font-size: var(--text-etikett); letter-spacing: var(--sperrung-etikett); text-transform: uppercase; color: var(--ton-3); }
.l-hinweis p { margin: 0; font-size: var(--text-normal); line-height: var(--zeile-text); }
.l-hinweis.tipp { border-color: var(--akzent); }
.l-hinweis.wichtig { border-color: var(--text); }
.lektion-inhalt hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin-top: var(--abstand-4); margin-bottom: var(--abstand-6); }
.l-knopf { display: flex; }
.lektion-inhalt .anhang { color: inherit; }
@media (max-width: 640px) {
  .l-zitat p { font-size: var(--text-lesen); }
  .l-knopf .knopf { width: 100%; justify-content: center; }
}

/* --- CRM-Bausteine (Bauplan CRM 7): Chips, Board, kleine Karte, Zeitachse --- */
.a-chips { display: flex; flex-wrap: wrap; gap: var(--abstand-2); align-items: center; margin: 0; padding: 0; border: 0; }
.a-chips > a, .a-chips.wahl label span { display: inline-flex; align-items: center; height: var(--hoehe-chip); padding: 0 var(--abstand-4); border-radius: var(--radius-rund);
  border: 1px solid var(--line2); color: var(--text); font-size: var(--text-klein); text-decoration: none; cursor: pointer; }
.a-chips > a[aria-current="true"], .a-chips.wahl input:checked + span { border-color: var(--text); background: var(--text); color: var(--bg); }
.a-chips.wahl legend { width: 100%; margin-bottom: var(--abstand-2); }
.a-chips.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.a-chips.wahl input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.a-chips.klein { gap: var(--abstand-1) var(--abstand-2); }
.a-chips button.a-pill { cursor: pointer; font: inherit; font-size: var(--text-etikett); }
.a-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(calc(4 * var(--abstand-9) - var(--abstand-4)), 1fr); gap: var(--abstand-4); overflow-x: auto; padding-bottom: var(--abstand-2); align-items: start; }
.a-board-spalte { display: flex; flex-direction: column; gap: var(--abstand-3); min-height: calc(2 * var(--abstand-9)); padding: var(--abstand-3); border: 1px solid var(--line); border-radius: var(--radius-gross); background: var(--bg); }
.a-board-spalte.ueber { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.a-board-kopf { margin: 0; font-size: var(--text-klein); font-weight: 500; color: var(--ton-3); letter-spacing: 0.04em; cursor: default; }
details.a-board-spalte > summary { cursor: pointer; }
.a-board-karten { display: flex; flex-direction: column; gap: var(--abstand-2); }
.a-karte-klein { display: flex; flex-direction: column; gap: var(--abstand-1); padding: var(--abstand-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: var(--text-klein); cursor: grab; }
.a-karte-klein.gezogen { opacity: 0.5; }
.a-karte-klein-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-2); font-size: var(--text-normal); }
.a-karte-klein-kopf a { color: var(--text); text-decoration: none; font-weight: 500; }
.a-karte-klein .a-punkt { flex: none; width: var(--abstand-2); height: var(--abstand-2); border-radius: 50%; background: var(--fehler); }
.a-karte-klein .nur-handy { display: none; }
.a-zeitachse { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.a-zeitachse > li { display: grid; grid-template-columns: calc(2 * var(--abstand-9) - var(--abstand-2)) 1fr; gap: var(--abstand-1) var(--abstand-4); padding: var(--abstand-3) 0; border-top: 1px solid var(--line); font-size: var(--text-normal); line-height: var(--zeile-text); }
.a-zeitachse > li[hidden] { display: none; }
.a-zeitachse > li > .a-leise:first-child { font-size: var(--text-klein); }
.a-zeitachse .a-notiz { white-space: pre-wrap; }
.a-zeitachse-knoepfe { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--abstand-3); }
.a-zeitachse-knoepfe:empty { display: none; }
@media (max-width: 640px) {
  .a-board { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
  .a-karte-klein { cursor: default; }
  .a-karte-klein .nur-handy { display: flex; }
  .a-zeitachse > li { grid-template-columns: 1fr; }
  .a-zeitachse-knoepfe { grid-column: 1; }
}

/* Auswertung (Dashboard und Kontaktseite, 02.11.2026): Leiste je Tag, Fortschritt in Stufen, Rangliste, Einbau-Zeile.
   Schlichtes SVG, Farben nur über Tokens. */
.a-tage { margin: 0; display: flex; flex-direction: column; gap: var(--abstand-1); }
.a-tage svg { display: block; width: 100%; height: var(--abstand-8); }
.a-tage rect.wert { fill: var(--text); }
.a-tage rect.leer { fill: var(--line2); }
.a-tage figcaption { display: flex; justify-content: space-between; font-size: var(--text-etikett); color: var(--ton-3); }
.a-stufen { display: block; width: 100%; height: var(--abstand-2); border-radius: var(--radius-rund); background: var(--track); overflow: hidden; }
.a-stufen .fertig { fill: var(--text); }
.a-stufen .haelfte { fill: var(--muted); }
.a-stufen .angefangen { fill: var(--line2); }
.a-stufen .angefangen-stark { fill: var(--muted); }
.a-stufen .nicht { fill: var(--track); }
.a-fortschritt > li { display: flex; flex-direction: column; gap: var(--abstand-2); }
.a-stufen-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-4); font-size: var(--text-klein); color: var(--ton-3); }
.a-stufen-legende li { display: inline-flex; align-items: center; gap: var(--abstand-2); }
.a-stufen-legende i { width: var(--abstand-2); height: var(--abstand-2); border-radius: 50%; background: var(--track); }
.a-stufen-legende i.fertig { background: var(--text); }
.a-stufen-legende i.haelfte { background: var(--muted); }
.a-stufen-legende i.angefangen { background: var(--line2); }
.a-fortschritt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--abstand-3); }
.a-fortschritt-liste li { display: flex; flex-direction: column; gap: var(--abstand-1); }
.a-rangliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--abstand-2); font-size: var(--text-klein); }
.a-rangliste li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto; gap: var(--abstand-3); align-items: center; }
.a-rangliste li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-rangliste svg { display: block; width: 100%; height: var(--abstand-2); }
.a-rangliste rect.spur { fill: var(--track); }
.a-rangliste rect.wert { fill: var(--text); }
.a-rangliste li > a:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
/* Dashboard mit Modul tracking (Tracking 9.9): Vergleich zum Zeitraum davor, Trichter vom Besuch zum Kauf */
.a-trend { font-size: var(--text-klein); font-weight: 500; color: var(--muted); }
.a-trend.schlecht { color: var(--fehler); }
.a-trichter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--abstand-3); }
.a-trichter li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) 6ch 6ch; gap: var(--abstand-3); align-items: center; font-size: var(--text-klein); }
.a-trichter li > span:nth-child(3) { text-align: right; font-weight: 500; }
.a-trichter svg { display: block; width: 100%; height: var(--abstand-3); }
.a-trichter rect.spur { fill: var(--track); }
.a-trichter rect.wert { fill: var(--text); }
.a-code { margin: 0; padding: var(--abstand-3) var(--abstand-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-family: ui-monospace, monospace; font-size: var(--text-klein); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.a-einbau { display: flex; flex-direction: column; gap: var(--abstand-2); }
.a-einbau > summary { list-style: none; cursor: pointer; }
.a-einbau > summary::-webkit-details-marker { display: none; }
.a-zahlen-klein .a-zahl { padding: var(--abstand-4); border-radius: var(--radius); }
.a-zahlen-klein .a-zahl span:nth-child(2) { font-size: var(--text-abschnitt); }
@media (max-width: 640px) {
  .a-rangliste li { grid-template-columns: minmax(0, 1fr) auto; }
  .a-rangliste svg { grid-column: 1 / -1; grid-row: 2; }
}
/* Kasse (Bezahlen, 02.11.2026): Seite im Rahmen des Portals, links Bestellung und Daten, rechts das Zahlfeld.
   Danke-Seite mit abgehakten Schritten (Vorbild FocusRoom „Freigegeben“). Markup: src/ui/kasse.js, Logik: public/kasse.js */
.kasse-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--karte-luecke); align-items: start; }
.kasse-spalte { display: flex; flex-direction: column; gap: var(--karte-luecke); min-width: 0; }
.kasse-zahlung { position: sticky; top: var(--abstand-6); }
.kasse-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--abstand-4); flex-wrap: wrap; font-size: var(--text-normal); color: var(--text); }
.kasse-zeile.leise { font-size: var(--text-klein); color: var(--ton-3); }
.kasse-name { font-size: var(--text-kartentitel); line-height: var(--zeile-kartentitel); font-weight: 500; }
.kasse-preis { font-family: var(--serif); font-size: var(--text-kartentitel); line-height: var(--zeile-kartentitel); }
.kasse-unter { margin: 0; font-size: var(--text-klein); color: var(--ton-3); }
.kasse-bestellung { gap: var(--abstand-3); }
.kasse-leistungen { list-style: none; margin: var(--abstand-2) 0 0; padding: var(--abstand-4) 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--abstand-2); }
.kasse-leistungen li { display: flex; align-items: flex-start; gap: var(--abstand-3); font-size: var(--text-normal); line-height: var(--zeile-text); color: var(--text); }
.kasse-leistungen svg { flex: 0 0 auto; margin-top: 3px; color: var(--ton-3); }
.kasse-als { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; padding: var(--abstand-3) var(--abstand-4);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-size: var(--text-normal); line-height: var(--zeile-text); color: var(--text); overflow-wrap: anywhere; }
.kasse-gruppe { display: flex; flex-direction: column; gap: var(--abstand-3); }
.kasse-klapp > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-3); font-size: var(--text-normal); color: var(--text); }
.kasse-klapp > summary::-webkit-details-marker { display: none; }
.kasse-klapp > summary .e-link { color: var(--ton-3); }
.kasse-klapp[open] > summary { margin-bottom: var(--abstand-4); }
.kasse-gruppe .kasse-klapp > summary { padding: var(--abstand-3) var(--abstand-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.kasse-express { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: var(--abstand-3); }
.kasse-wallet { width: 100%; justify-content: center; }
.kasse-wallet[hidden] { display: none; }
.kasse-oder { display: flex; align-items: center; gap: var(--abstand-3); font-size: var(--text-klein); color: var(--ton-3); }
.kasse-oder::before, .kasse-oder::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.kasse-reiter { display: flex; gap: var(--abstand-1); padding: var(--abstand-1); border: 1px solid var(--line); border-radius: var(--radius-rund); }
.kasse-reiter-knopf { flex: 1 1 0; position: relative; cursor: pointer; }
.kasse-reiter-knopf input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kasse-reiter-knopf span { display: flex; align-items: center; justify-content: center; min-height: var(--hoehe-chip); padding: 0 var(--abstand-3); border-radius: var(--radius-rund);
  border: 1px solid transparent; font-size: var(--text-klein); color: var(--ton-3); text-align: center; }
.kasse-reiter-knopf input:checked + span { border-color: var(--line2); background: var(--bg); color: var(--text); }
.kasse-reiter-knopf input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.kasse-pane[hidden] { display: none; }
.kasse-weitere-inhalt { display: flex; flex-direction: column; gap: var(--abstand-4); }
.kasse-mandat { font-size: var(--text-klein); color: var(--ton-3); }
.kasse-mandat input { margin-top: 0; }
.kasse-kartenzeile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--feld-luecke); }
.kasse-mfeld { height: var(--hoehe); padding: 0 var(--abstand-4); display: flex; align-items: center; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--bg); }
.kasse-mfeld > * { width: 100%; }
.kasse-mfeld > input { height: 100%; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--text-feld); outline: none; }
.kasse-summe { display: flex; flex-direction: column; gap: var(--abstand-2); padding-top: var(--abstand-4); border-top: 1px solid var(--line); }
.kasse-summe strong { font-family: var(--serif); font-size: var(--text-kartentitel); line-height: var(--zeile-kartentitel); font-weight: 400; }
.kasse-los { width: 100%; justify-content: center; }
.kasse-los[aria-busy="true"] { opacity: 0.7; }
.kasse-recht { margin: 0; font-size: var(--text-klein); line-height: var(--zeile-text); color: var(--ton-3); }
.kasse-recht a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kasse-test { text-align: center; }
.kasse-danke > .kasse-karte, .kasse-danke > .test-banner { width: 100%; max-width: var(--breite-normal); }
.kasse-haken-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kasse-haken-liste li { display: flex; align-items: center; gap: var(--abstand-4); padding: var(--abstand-4) 0; border-top: 1px solid var(--line); }
.kasse-haken-liste li:first-child { border-top: 0; padding-top: 0; }
.kasse-check { flex: 0 0 auto; width: var(--abstand-6); height: var(--abstand-6); display: grid; place-items: center; border-radius: var(--radius-rund); background: var(--btn-bg); color: var(--btn-text); }
.kasse-schritt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--abstand-1); font-size: var(--text-normal); line-height: var(--zeile-text); color: var(--text); overflow-wrap: anywhere; }
.kasse-schritt .leise { font-size: var(--text-klein); color: var(--ton-3); }
.kasse-weiter { display: flex; gap: var(--abstand-3); flex-wrap: wrap; }
.kasse-testseite { max-width: var(--breite-normal); }
/* Profil: Rechnungsliste mit „Auf Firma ausstellen“ (Meine Daten) */
.liste .zeile > a:first-child { white-space: nowrap; }
.liste .zeile form.inline { display: inline; }
.liste .zeile form.inline .knopf-text { min-height: 0; padding: 0; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .kasse-raster { grid-template-columns: minmax(0, 1fr); }
  .kasse-zahlung { position: static; }
}
@media (max-width: 640px) {
  .kasse-kartenzeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kasse-kartenzeile .kasse-nummer { grid-column: 1 / -1; }
  .kasse-weiter .knopf, .kasse-weiter .knopf-rand { width: 100%; justify-content: center; }
}

/* Portal-Frage (Tracking 11.3): Website-Besuche dem Konto zuordnen, zwei gleich große Buttons */
.portal-frage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-gross); padding: var(--abstand-5) var(--abstand-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-5); }
.portal-frage-text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: var(--abstand-2); }
.portal-frage-text h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--text-abschnitt); line-height: var(--zeile-kartentitel); }
.portal-frage-text p { margin: 0; color: var(--muted); }
.portal-frage-knoepfe { flex: 0 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-3); }
.portal-frage-knoepfe .knopf-rand { justify-content: center; }
@media (max-width: 640px) { .portal-frage-knoepfe { flex: 1 1 100%; } }
.liste .zeile-zweizeilig > span:first-child { display: flex; flex-direction: column; gap: var(--abstand-1); }
.liste .zeile-zweizeilig > input { flex: none; }
.a-filterzeile [data-sort-interesse] { align-self: center; }
.a-filterzeile [data-sort-interesse][aria-current="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
/* ===================== Ruhe (02.11.2026): Akkordeon und Kartenreihe =====================
   Jan: „Minimalismus, wie es nur geht … Akkordeons und horizontale Karten, die gescrollt werden, wenn das Sinn macht.“
   Nur dort einsetzen, wo eine Seite wirklich mehr Infos braucht. Beispiele und Regeln: DESIGN.md, Musterseite /admin/muster. */

/* --- Akkordeon: <details> mit <summary>. Tastatur (Enter, Leertaste) und Screenreader (aufgeklappt/zugeklappt) bringt
   das Element selbst mit. Öffnen gleitet, wo der Browser es kann (::details-content), sonst springt es auf. --- */
.a-akkordeon, .akkordeon { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.a-akkordeon:last-child, .akkordeon:last-child { border-bottom: 1px solid var(--line); }
.a-akkordeon + .a-akkordeon, .akkordeon + .akkordeon { border-top: 1px solid var(--line); }
.a-akkordeon > summary, .akkordeon > summary {
  display: flex; align-items: center; gap: var(--abstand-3); min-height: var(--hoehe); padding: var(--abstand-3) 0; list-style: none; cursor: pointer;
  font-size: var(--text-normal); font-weight: var(--gewicht-stark); color: var(--ton-1); -webkit-tap-highlight-color: transparent; }
.a-akkordeon > summary::-webkit-details-marker, .akkordeon > summary::-webkit-details-marker { display: none; }
.a-akkordeon > summary::after, .akkordeon > summary::after {
  content: ""; flex: 0 0 auto; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--ton-3); border-bottom: 1.5px solid var(--ton-3);
  transform: translateY(-2px) rotate(45deg); transition: transform var(--dauer) var(--kurve); }
.a-akkordeon[open] > summary::after, .akkordeon[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.a-akkordeon > summary:hover, .akkordeon > summary:hover { opacity: .72; }
.a-akkordeon > summary:focus-visible, .akkordeon > summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: var(--radius-klein); }
/* Zusatz rechts im Kopf (Zahl, Status): Stufe 3 */
.akkordeon-zusatz { font-size: var(--text-klein); font-weight: 400; color: var(--ton-3); }
.akkordeon-inhalt { display: flex; flex-direction: column; gap: var(--abstand-4); padding: 0 0 var(--abstand-5); }
/* Karte: ein Akkordeon als eigene Fläche (lange Einstellungsseiten) */
.a-akkordeon.karte, .akkordeon.karte { padding: 0 var(--karte-innen); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-gross); }
.a-akkordeon.karte > summary, .akkordeon.karte > summary { min-height: calc(var(--hoehe) + var(--abstand-4)); }
/* Gleiten beim Öffnen (Chrome, Edge, Safari ab 18.4); ältere Browser klappen ohne Übergang */
@supports selector(::details-content) {
  .a-akkordeon, .akkordeon { interpolate-size: allow-keywords; }
  .a-akkordeon::details-content, .akkordeon::details-content { height: 0; overflow: clip; opacity: 0;
    transition: height var(--dauer) var(--kurve), opacity var(--dauer) var(--kurve), content-visibility var(--dauer) allow-discrete; }
  .a-akkordeon[open]::details-content, .akkordeon[open]::details-content { height: auto; opacity: 1; }
}

/* --- Kartenreihe: Karten nebeneinander, wischen mit Einrasten, die nächste Karte schaut an. Auf dem Desktop zwei Pfeile,
   sobald die Reihe breiter ist als die Seite (public/kern.js setzt sie). „handy“: nur bis 640 px eine Reihe, darüber
   bleibt das Raster des Bausteins (z. B. die vier Kennzahlen). --- */
.kartenreihe { position: relative; display: flex; flex-direction: column; gap: var(--abstand-3); min-width: 0; }
.kartenreihe-spur {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(calc(var(--abstand-9) * 4), calc((100% - 2 * var(--abstand-4)) / 2.6)); gap: var(--abstand-4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: var(--abstand-1); }
.kartenreihe-spur::-webkit-scrollbar { display: none; }
.kartenreihe-spur > * { scroll-snap-align: start; min-width: 0; }
.kartenreihe-spur:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: var(--radius-gross); }
.kartenreihe-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-4); min-height: var(--hoehe-chip); }
.kartenreihe-pfeile { display: none; gap: var(--abstand-2); margin-left: auto; }
.kartenreihe > .kartenreihe-pfeile { align-self: flex-end; }
.kartenreihe-pfeile button { width: var(--hoehe-chip); height: var(--hoehe-chip); display: grid; place-items: center; padding: 0; border-radius: var(--radius-rund);
  border: 1px solid var(--line2); background: var(--surface); color: var(--ton-1); cursor: pointer; }
.kartenreihe-pfeile button:hover { border-color: var(--text); }
.kartenreihe-pfeile button[disabled] { opacity: .35; cursor: default; border-color: var(--line); }
@media (hover: hover) and (pointer: fine) {
  .kartenreihe.ueberlauf .kartenreihe-pfeile { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .kartenreihe-spur { scroll-behavior: auto; } }
@media (max-width: 640px) {
  /* Reihe bis an den Rand der Seite, die nächste Karte schaut an */
  .kartenreihe-spur, .kartenreihe-handy {
    margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); padding-left: var(--rand); padding-right: var(--rand); scroll-padding-inline: var(--rand);
    grid-auto-columns: 78%; }
  .kartenreihe-handy { display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 44%; gap: var(--abstand-3);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .kartenreihe-handy::-webkit-scrollbar { display: none; }
  .kartenreihe-handy > * { scroll-snap-align: start; min-width: 0; }
}
/* Board der Kontakte als Kartenreihe: eigene Spaltenbreite, Einrasten nur in der Nähe (Ziehen bleibt ruhig), Handy untereinander */
.a-board.kartenreihe-spur { grid-auto-columns: minmax(calc(4 * var(--abstand-9) - var(--abstand-4)), 1fr); scroll-snap-type: x proximity; }
@media (max-width: 640px) {
  .a-board.kartenreihe-spur { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; margin: 0; padding: 0; scroll-snap-type: none; }
}

/* --- Wahl als Karten (eigene Felder 7.1 und 7.2: Ebene, Art des Formulars): Radio-Buttons nebeneinander, auf dem Handy
   untereinander. Gewählte Karte mit innerer Linie (Regel 4), gesperrte Karte (disabled) leise. --- */
.a-wahlkarten { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-3); }
.a-wahlkarten > legend { padding: 0 0 var(--abstand-2); }
.a-wahlkarten > .a-hinweis { grid-column: 1 / -1; margin: 0; }
.a-wahlkarte { position: relative; display: block; min-width: 0; cursor: pointer; }
.a-wahlkarte input { position: absolute; opacity: 0; pointer-events: none; }
.a-wahlkarte-innen { display: flex; flex-direction: column; gap: var(--abstand-1); height: 100%; padding: var(--abstand-4); border: 1px solid var(--line2); border-radius: var(--radius); background: var(--bg); color: var(--text); }
.a-wahlkarte:hover .a-wahlkarte-innen { border-color: var(--text); }
.a-wahlkarte input:checked + .a-wahlkarte-innen { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.a-wahlkarte input:focus-visible + .a-wahlkarte-innen { outline: 2px solid var(--text); outline-offset: 2px; }
.a-wahlkarte input:disabled + .a-wahlkarte-innen { opacity: .45; cursor: default; }
.a-wahlkarte:has(input:disabled) { cursor: default; }
.a-wahlkarte-name { font-size: var(--text-normal); font-weight: var(--gewicht-stark); color: var(--ton-1); }
.a-wahlkarte-text { font-size: var(--text-klein); line-height: var(--zeile-text); color: var(--ton-3); }
@media (max-width: 640px) { .a-wahlkarten { grid-template-columns: minmax(0, 1fr); } }