/* Kidemie — Gestaltung (B2a, 15.10.2026). Plan §10: ruhig, hell und dunkel aus neun Tokens, EIN Akzent mit EINER Bedeutung
   („gewählt“), Zeichen als Inline-SVG. Die eine Kühnheit: der Stand-Stempel wie ein Preisschild, der sichtbar altert.
   Strenge CSP: diese Datei ist der einzige Ort für Gestalt — kein style-Attribut, kein <style> in Seiten.
   Hexwerte stehen NUR in den Token-Blöcken; Bauteile lesen var(--…) (DESIGN.md „Token sind EINE Quelle“). */

/* ── Tokens. M9 (17.10.2026), seine Wahl E19: Richtung S1 „Signal“ SITE-WEIT — Werte aus vision/gestaltung/v2/start-s1.css (dunkel als
   Vorgabe wie B2, hell aus S1-hell). Bedeutungen: --akzent bleibt NUR „gewählt“ (aria-current, aria-pressed, Fokus); --handlung heißt
   „das Nächste tun“ (EIN Hauptknopf je Ansicht); --frisch/--altert bleiben an den Stempeln. Bildfarben (--bild-a|b|c: Netz, Verläufe)
   und die sieben Bereichstöne (--bereich-1 … 7, ein Verlauf Cyan → Magenta → Orange, gerechnet 17.10.2026 von S1) tragen KEINE
   Bedeutung — nur Streifen und Schein. Die Aura (zwei) bleibt für das Zeichen. Kontrast: werkzeuge/kontrast.mjs + browser.test.mjs
   „M6 Kontrast“ (dort auch Handlung und Bereichsstreifen), Zahlen in betrieb/fortschritt-m9-start.md.
   VORGABE IST DUNKEL, auch wenn das System hell will (`:root:not([data-theme="hell"])`); hell nur über den Umschalter im Fuß.
   Die Blöcke `:root` (= hell) und `@media (prefers-color-scheme: dark)` (= dunkel) bleiben, weil werkzeuge/kontrast.mjs sie gegen
   die [data-theme]-Blöcke vergleicht — jede Abweichung wäre eine zweite Wahrheit. ── */
:root {
  --grund: #f4f5f8; --flaeche: #ffffff; --linie: #7b8396; --text: #0d1017; --leise: #4a5162;
  --akzent: #1d4fa8; --auf-akzent: #ffffff; --frisch: #24663a; --altert: #8a5200; --aura-a: #c9d8f5; --aura-b: #f4f5f8;
  --handlung: #006a78; --auf-handlung: #ffffff; --bild-a: #0891b2; --bild-b: #c026d3; --bild-c: #ea580c;
  --bereich-1: #0891b2; --bereich-2: #456dbd; --bereich-3: #834ac8; --bereich-4: #c026d3; --bereich-5: #ce3791; --bereich-6: #dc474e; --bereich-7: #ea580c;
  --rand: clamp(14px, 4vw, 32px);
  --radius: 10px;
  --leiste: 0px;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #07080d; --flaeche: #12151e; --linie: #5f677a; --text: #f2f1ec; --leise: #a9afbd;
    --akzent: #8db6ff; --auf-akzent: #07080d; --frisch: #86c796; --altert: #e8b062; --aura-a: #1f3566; --aura-b: #07080d;
    --handlung: #3ee6f0; --auf-handlung: #05070c; --bild-a: #22d3ee; --bild-b: #e64bd6; --bild-c: #ff8a3d;
    --bereich-1: #22d3ee; --bereich-2: #63a6e6; --bereich-3: #a578de; --bereich-4: #e64bd6; --bereich-5: #ee60a3; --bereich-6: #f77570; --bereich-7: #ff8a3d;
  }
}
/* B2, seine Wahl 16.10.2026: dunkel ist die Vorgabe — ohne Wahl gilt dunkel, gleich was das System sagt. */
:root:not([data-theme="hell"]) {
  --grund: #07080d; --flaeche: #12151e; --linie: #5f677a; --text: #f2f1ec; --leise: #a9afbd;
  --akzent: #8db6ff; --auf-akzent: #07080d; --frisch: #86c796; --altert: #e8b062; --aura-a: #1f3566; --aura-b: #07080d;
  --handlung: #3ee6f0; --auf-handlung: #05070c; --bild-a: #22d3ee; --bild-b: #e64bd6; --bild-c: #ff8a3d;
  --bereich-1: #22d3ee; --bereich-2: #63a6e6; --bereich-3: #a578de; --bereich-4: #e64bd6; --bereich-5: #ee60a3; --bereich-6: #f77570; --bereich-7: #ff8a3d; color-scheme: dark;
}
/* [data-theme] überstimmt alles (Bauregeln 15.10.2026; Umschalter M6). */
:root[data-theme="hell"] {
  --grund: #f4f5f8; --flaeche: #ffffff; --linie: #7b8396; --text: #0d1017; --leise: #4a5162;
  --akzent: #1d4fa8; --auf-akzent: #ffffff; --frisch: #24663a; --altert: #8a5200; --aura-a: #c9d8f5; --aura-b: #f4f5f8;
  --handlung: #006a78; --auf-handlung: #ffffff; --bild-a: #0891b2; --bild-b: #c026d3; --bild-c: #ea580c;
  --bereich-1: #0891b2; --bereich-2: #456dbd; --bereich-3: #834ac8; --bereich-4: #c026d3; --bereich-5: #ce3791; --bereich-6: #dc474e; --bereich-7: #ea580c; color-scheme: light;
}
:root[data-theme="dunkel"] {
  --grund: #07080d; --flaeche: #12151e; --linie: #5f677a; --text: #f2f1ec; --leise: #a9afbd;
  --akzent: #8db6ff; --auf-akzent: #07080d; --frisch: #86c796; --altert: #e8b062; --aura-a: #1f3566; --aura-b: #07080d;
  --handlung: #3ee6f0; --auf-handlung: #05070c; --bild-a: #22d3ee; --bild-b: #e64bd6; --bild-c: #ff8a3d;
  --bereich-1: #22d3ee; --bereich-2: #63a6e6; --bereich-3: #a578de; --bereich-4: #e64bd6; --bereich-5: #ee60a3; --bereich-6: #f77570; --bereich-7: #ff8a3d; color-scheme: dark;
}
/* ── Marken-Tokens der Anmeldewege (K2, 16.10.2026; Konzept §7). Werte nach den Knopf-Regeln der Anbieter: Apple schwarz/weiß
   (Human Interface Guidelines „Sign in with Apple“), Google hell #FFFFFF/#747775/#1F1F1F, dunkel #131314/#8E918F/#E3E3E3
   (Google Identity „Sign in with Google branding“), das „G“ in seinen vier Farben unverändert. Stand meines Wissens, am 16.10.
   nicht nachgelesen — nicht belegt; vor dem Ausrollen gegen die Seiten der Anbieter prüfen. ── */
:root {
  --marke-apple-grund: #000000; --marke-apple-text: #ffffff; --marke-apple-rand: #000000;
  --marke-google-grund: #ffffff; --marke-google-rand: #747775; --marke-google-text: #1f1f1f;
  --marke-google-blau: #4285f4; --marke-google-rot: #ea4335; --marke-google-gelb: #fbbc05; --marke-google-gruen: #34a853;
}
@media (prefers-color-scheme: dark) {
  :root { --marke-apple-grund: #ffffff; --marke-apple-text: #000000; --marke-apple-rand: #ffffff;
    --marke-google-grund: #131314; --marke-google-rand: #8e918f; --marke-google-text: #e3e3e3; }
}
/* Vorgabe dunkel (B2, 16.10.2026) gilt auch für die Marken-Knöpfe. */
:root:not([data-theme="hell"]) { --marke-apple-grund: #ffffff; --marke-apple-text: #000000; --marke-apple-rand: #ffffff;
  --marke-google-grund: #131314; --marke-google-rand: #8e918f; --marke-google-text: #e3e3e3; }
:root[data-theme="hell"] { --marke-apple-grund: #000000; --marke-apple-text: #ffffff; --marke-apple-rand: #000000;
  --marke-google-grund: #ffffff; --marke-google-rand: #747775; --marke-google-text: #1f1f1f; }
:root[data-theme="dunkel"] { --marke-apple-grund: #ffffff; --marke-apple-text: #000000; --marke-apple-rand: #ffffff;
  --marke-google-grund: #131314; --marke-google-rand: #8e918f; --marke-google-text: #e3e3e3; }

/* ── Grund ── */
*, *::before, *::after { box-sizing: border-box; }
/* hidden gilt immer — sonst schlägt display:flex einer Kachel das Attribut, und der Filter (kern.js) blendet nichts aus (N1, 15.10.2026). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* 15.10.2026: Lange Kennungen und Adressen brechen um statt am Telefon quer zu laufen (375 px, Bauregeln). */
  overflow-wrap: anywhere;
}
main { display: block; max-width: 1240px; margin: 0 auto; padding: 8px var(--rand) 48px; }
main:focus { outline: none; }
h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); line-height: 1.15; margin: 20px 0 8px; letter-spacing: -0.01em; }
h2 { font-size: 1.3rem; line-height: 1.25; margin: 0 0 12px; }
h3 { font-size: 1.05rem; margin: 0 0 6px; }
h4 { font-size: .95rem; margin: 0 0 6px; display: flex; gap: 6px; align-items: center; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
p { margin: 0 0 10px; }
.z { width: 20px; height: 20px; flex: none; }
.unterzeile { color: var(--leise); font-size: 1.05rem; max-width: 70ch; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 8px; top: -60px; background: var(--flaeche); padding: 10px 14px; border-radius: var(--radius); z-index: 30; }
.sprung:focus { top: 8px; }

/* Fokus: immer sichtbar, Akzent = „gewählt/hier“ (DESIGN.md Rand & Fokus). Sprungziele ohne Umriss. */
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* ── Kopf: Marke · Ziele · Frag ── */
.kopf {
  max-width: 1240px; margin: 0 auto; padding: 10px var(--rand);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.marke { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.ziele { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.ziele a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border-radius: var(--radius); text-decoration: none; color: var(--leise); border: 1px solid transparent;
}
.ziele a:hover { color: var(--text); border-color: var(--linie); }
.ziele a[aria-current="page"] { color: var(--akzent); border-color: var(--akzent); font-weight: 600; }
.frag { display: flex; flex: 0 1 260px; min-width: 0; }
.frag input, .frag-gross input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; font: inherit; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius) 0 0 var(--radius);
}
.frag button, .frag-gross button {
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px;
  font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer;
}

/* Am Telefon stehen die Ziele als Leiste unten (BEDIENUNG 10, Vertrag §4). Hier Viewport statt Container: die Leiste ist
   position:fixed, und ein Container mit Größen-Eindämmung würde sie an sich statt an den Bildschirm binden (15.10.2026). */
@media (max-width: 640px) {
  :root { --leiste: 64px; }
  body { padding-bottom: calc(var(--leiste) + env(safe-area-inset-bottom)); }
  .ziele {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; gap: 0; flex-wrap: nowrap;
    background: var(--flaeche); border-top: 1px solid var(--linie); padding: 2px 2px calc(2px + env(safe-area-inset-bottom));
  }
  /* N7 16.10.2026: „Fortschritt“ brach bei 390 px als „Fortschrit t“ (B6) — gleich breite Ziele (flex-basis 0) ließen ihm
     60 px. Jetzt wächst jedes Ziel aus seinem Wort (Basis auto), und das Wort bricht nie. */
  .ziele a { flex: 1 1 auto; min-width: 0; flex-direction: column; justify-content: center; gap: 2px; min-height: 58px; padding: 0 2px; font-size: .75rem; }
  .ziele a span { white-space: nowrap; }
  .frag { flex: 1 1 100%; }
}

/* ── Kacheln: Flex-Umbruch mit Deckel (MARKETING.md „Raster, das nicht bricht“, gemessen 08.09.2026: Grid lässt Löcher).
   Deckel 1,7 × Basis, damit eine allein stehende letzte Kachel nicht die volle Breite nimmt. ── */
.kacheln { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; padding: 0; }
.kachel {
  flex: 1 1 15rem; max-width: 25.5rem; min-height: 44px; position: relative;
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); text-decoration: none; color: var(--text);
}
a.kachel:hover { border-color: var(--text); }
.kachel[aria-current], .kachel[aria-current="true"], .kachel[aria-current="page"] { border: 2px solid var(--akzent); padding: 13px 15px; }
.kachel .z { color: var(--leise); }
.k-name { font-weight: 600; padding-right: 36px; }
.k-zahl { color: var(--leise); font-size: .9rem; font-variant-numeric: tabular-nums; }
.kachel.kommt { border-style: dashed; color: var(--leise); }
/* Wegweiser-Kacheln (Anbieter, Themen, Fälle) sind kleiner: am Telefon zwei je Reihe statt zehn untereinander (390 px, 23:17). */
.kacheln.anbieter .kachel, .kacheln.themen .kachel, .kacheln.faelle .kachel { flex-basis: 9.5rem; max-width: 16rem; padding: 10px 12px; }
/* /modelle/: je Modell eine kleine Kachel — die Übersicht über alle, auf die der Filter wirkt (N1, 15.10.2026). */
.kacheln.modelle-uebersicht { gap: 8px; }
.kacheln.modelle-uebersicht .kachel { flex-basis: 10.5rem; max-width: 17rem; padding: 8px 12px; gap: 2px; }
.kacheln.modelle-uebersicht .k-name { padding-right: 0; }
.fall-luecke { margin-top: -20px; }
/* Ohne Hash ist der erste Teil gewählt (BEDIENUNG 6) — seine Kachel trägt dann dieselbe Markierung wie eine per # gewählte. */
main:not(:has(.teile :target)) .kachel.vorgewaehlt { border: 2px solid var(--akzent); }
main:not(:has(.teile :target)) .kacheln.modelle-uebersicht .kachel.vorgewaehlt { padding: 7px 11px; }
main:not(:has(.teile :target)) .kacheln.themen .kachel.vorgewaehlt { padding: 9px 11px; }
.kachel .stand { align-self: flex-start; }
/* Abzeichen rechts bündig, feste Stelle (BEDIENUNG 8). */
.kachel .abzeichen { position: absolute; top: 12px; right: 12px; }

/* Abzeichen (Vertrag §4): kern.js setzt gruen | gelb | leer und die Zahl in .fehlt. Zustand nie nur Farbe: Form + Zahl. */
.abzeichen {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 13px; border: 2px solid var(--linie); font-size: .8rem; font-weight: 700; color: var(--leise); vertical-align: middle;
}
.abzeichen.gruen { border-color: var(--frisch); background: var(--frisch); color: var(--flaeche); }
.abzeichen.gelb { border-color: var(--altert); border-style: dashed; color: var(--altert); }
.abzeichen .fehlt:empty { display: none; }

/* ── Ein Teil unter den Kacheln (BEDIENUNG 1). Gewählt per # (die Kachel ist ein Anker) — auch wenn der Anker IN einem Teil
   liegt (/glossar/#<begriff>, /modelle/#<modell>). Ohne Wahl der erste Teil (BEDIENUNG 6: vorbelegt). Alles steht im HTML,
   ohne JS erreichbar über die Kacheln. N1, 15.10.2026: vorher standen ohne Hash ALLE Teile da (F1-03/04: 11 965 / 78 354 px). ── */
.teile:not(:has(:target)) > .teil:not(:first-child) { display: none; }
.teile:has(:target) > .teil:not(:target):not(:has(:target)) { display: none; }
.teil { scroll-margin-top: 12px; margin-bottom: 28px; }
.teil > .kurz { color: var(--leise); }

/* ── Der Stand-Stempel: ein Preisschild an jeder Zahl (Plan §10, die Kühnheit). Er altert sichtbar — Zeichen, Wort und
   Farbe, nie Farbe allein (WCAG 1.4.1): frisch = durchgezogen, altert = gestrichelt, überfällig = gepunktet + grau +
   „veraltet“. kern.js setzt die Klasse aus data-stand / data-pruefen-bis (Vertrag §4, 15.10.2026). ── */
.stand {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; padding: 1px 8px 1px 6px;
  font-size: .78rem; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--leise); border: 1px solid currentColor; border-radius: 3px 11px 11px 3px; vertical-align: 1px;
}
.stand .zs { width: 13px; height: 13px; }
.stand.frisch { color: var(--frisch); border-style: solid; }
.stand.frisch::after { content: "· frisch"; }
.stand.altert { color: var(--altert); border-style: dashed; }
.stand.altert::after { content: "· altert"; }
.stand.ueberfaellig { color: var(--leise); border-style: dotted; }
.stand.ueberfaellig::after { content: "· veraltet"; font-weight: 700; }
.stand-ohne { border-style: dotted; }

/* ── Quellen, Aussagen, Türen ── */
.quelle { font-style: normal; font-size: .85rem; color: var(--leise); margin-right: 8px; }
/* Zitat-Links als Chips mit ≥ 44 px Trefferfläche (F1-08: vorher 16–17 px hohe Textlinks). */
.quelle a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; padding: 4px 12px; text-decoration: none;
  border: 1px solid var(--linie); border-radius: 22px; background: var(--grund); }
.quelle a:hover { border-color: var(--text); color: var(--text); }
.aussagen { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.aussage { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 14px; }
.aussage > p:first-child { margin-bottom: 6px; }
.beleg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: .85rem; }
.beleg .stand { margin-left: 0; }
.art { font-size: .78rem; color: var(--leise); border: 1px solid var(--linie); border-radius: 3px; padding: 0 6px; }
.widerspruch { font-size: .88rem; color: var(--altert); margin-top: 6px; }
.vn { font-weight: 700; }
.aussage.nachteil { border-left: 4px solid var(--altert); }
.aussage.vorteil { border-left: 4px solid var(--frisch); }
.tuer { display: inline-flex; align-items: center; min-height: 44px; padding: 2px 10px; margin: 2px 2px 2px 0;
  border: 1px solid var(--linie); border-radius: 16px; text-decoration: none; background: var(--flaeche); }
.tuer:hover { border-color: var(--text); }
.tuer[aria-current] { border-color: var(--akzent); color: var(--akzent); }
.tueren dl { margin: 0 0 20px; display: grid; gap: 10px; }
.tueren dl > div { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: 8px; align-items: baseline; }
.tueren dt { color: var(--leise); font-size: .9rem; }
.tueren dd { margin: 0; }
.tueren-kurz { font-size: .9rem; color: var(--leise); }
.nb, .kommt-noch, .hinweis, .hinweis-js { color: var(--leise); font-style: italic; }
.hinweis { font-size: .95rem; margin: 0 6px; }
.fachwort { color: var(--leise); font-size: max(.92em, .95rem); font-weight: 400; }
.fachwort-zeile { color: var(--leise); }
.brotkrumen { margin: 12px 0 0; font-size: .9rem; color: var(--leise); }
.brotkrumen a, .weiter > a { display: inline-flex; align-items: center; min-height: 44px; }
.einstieg { font-size: 1.05rem; max-width: 70ch; border-left: 3px solid var(--linie); padding: 2px 0 2px 14px; margin: 4px 0 20px; }
/* einstieg_beleg (N7 16.10.2026): die Herkunft des Einstiegs, leise darunter. */
.einstieg:has(+ .einstieg-beleg) { margin-bottom: 6px; }
.einstieg-beleg { display: flex; align-items: center; gap: 6px; margin: 0 0 20px 17px; font-size: .88rem; color: var(--leise); }
.einstieg-beleg .z { flex: none; width: 16px; height: 16px; }
.einstieg-beleg code { white-space: nowrap; } /* Modellname nie im Wort trennen (390 px: „qwen2.5-“ / „coder:7b“) */
.block { margin: 0 0 32px; }
.held { margin-bottom: 16px; }
.weiter { font-size: .95rem; }
.netz-zahlen, .pruefstand { color: var(--leise); font-size: .92rem; }

/* ── Frag das Netz, groß (Start, Suche) ── */
.frag-gross { display: flex; max-width: 720px; margin: 0 0 12px; }
.frag-gross input { min-height: 56px; font-size: 1.15rem; padding: 0 16px; }
.frag-gross button { min-height: 56px; padding: 0 18px; font-weight: 600; }

/* ── Übungen (Vertrag §5): Einhängepunkt; B2b baut die Bühne hinein. Container für die Spaltenwahl im Inneren. ── */
.uebung {
  container-type: inline-size; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 16px clamp(14px, 2.5vw, 24px); margin: 0 0 32px;
}
.uebung .aufgabe { font-weight: 600; font-size: 1.05rem; }
.uebung .kandidaten { padding-left: 1.2rem; }
.loesung summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.uebung-fehlt { margin: 0 0 32px; }

/* Bedienflächen, die kern.js und die Übungen hineinbauen, ebenfalls ≥ 44 px (gemessen 15.10.2026: Eingaben des Rechners
   32 px, Export-Knopf auf /fortschritt/). */
.uebung input, .uebung select, .uebung button, .knopf { min-height: 44px; font: inherit; }
.uebung input, .uebung select { padding: 0 10px; color: var(--text); background: var(--grund); border: 1px solid var(--linie); border-radius: 6px; }
.knopf { display: inline-flex; align-items: center; padding: 0 14px; margin: 0 8px 8px 0; color: var(--text); cursor: pointer;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.import-datei { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.knopf:has(+ .import-datei:focus-visible) { outline: 3px solid var(--akzent); outline-offset: 3px; }
.block h3 > a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── Prüffrage ── */
.pruefrage { border: 2px solid var(--linie); border-radius: var(--radius); padding: 16px clamp(14px, 2.5vw, 24px); margin: 0 0 32px; background: var(--flaeche); }
.pruefrage h2 { display: flex; gap: 8px; align-items: center; }
.frage { font-size: 1.1rem; font-weight: 600; }
.antworten { display: grid; gap: 8px; margin: 0 0 12px; }
.antwort {
  min-height: 44px; text-align: left; padding: 10px 14px; font: inherit; color: var(--text); cursor: pointer;
  background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius);
}
.antwort:hover { border-color: var(--text); }
.antwort.richtig { border: 2px solid var(--frisch); }
.antwort.falsch { border: 2px dashed var(--altert); }

/* ── Weiter/Zurück an fester Stelle (BEDIENUNG 8, Loupe 04.10.: „immer an der gleichen Stelle“): klebt unten,
   zurück links, weiter rechts — auch wenn nur einer da ist. ── */
.blaettern {
  position: sticky; bottom: calc(var(--leiste) + env(safe-area-inset-bottom)); z-index: 10;
  display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; background: var(--grund); border-top: 1px solid var(--linie);
}
.blaettern a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; max-width: 48%;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); text-decoration: none;
}
.blaettern a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blaettern .weiter { margin-left: auto; }

/* ── Modelle: eine Zeile je Modell, feste Spalten (BEDIENUNG 8). Breite aus dem Container (DESIGN.md Achse 4). ── */
.teile, .modell-liste { container-type: inline-size; }
.filterleiste { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.filter {
  min-height: 44px; padding: 0 14px; font: inherit; color: var(--text); cursor: pointer;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 22px;
}
.filter[aria-pressed="true"] { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }
.filter-zahl { color: var(--leise); font-size: .95rem; }
.modell-zeile { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 10px; }
.modell-zeile h3 { margin-bottom: 8px; }
/* N7 16.10.2026: EIN Stempel je Karte im Kopf, rechts neben dem Namen; bricht am Telefon darunter. */
.karten-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.karten-kopf h3 { margin-bottom: 4px; }
.karten-stand { margin: 0 0 6px; font-size: .95rem; color: var(--leise); }
.karten-stand .stand { margin: 0 0 0 4px; }
/* Bezug als eigene Zeile, Quelle und Tür darunter (als Fließtext gemessen höher: 4 006 statt 3 938 px bei 1280, 16.10.2026). */
.bezug { flex: 1 1 100%; }
/* N10 16.10.2026 (F2-08): der Bezugssatz einmal je Familie über den Karten; die Karte verweist mit „siehe oben“ (≥ 44 px Ziel). */
.bezug-familie { background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--akzent); border-radius: var(--radius);
  padding: 10px 14px; margin: 0 0 10px; scroll-margin-top: 5.5rem; }
.bezug-familie .stand { margin: 0 4px; }
.bezug-verweis { display: inline-flex; align-items: center; min-height: 44px; margin-left: 6px; }
.quellen-familie { margin: 0 0 10px; }
/* N10 16.10.2026: am Telefon zwei Wahl-Kacheln je Zeile und knappere Modell-Kacheln — /modelle/ 390 px 6 983 → Tor < 6 000. */
@media (max-width: 640px) {
  .wahl-gruppe:not(.saetze) .kachel { flex: 1 1 9rem; padding: 8px 10px; }
  .wahl-gruppe:not(.saetze) .kachel[aria-pressed="true"] { padding: 7px 9px; }
  .kacheln.modelle-uebersicht .kachel { flex-basis: 9rem; padding: 6px 10px; }
  .kacheln.modelle-uebersicht .k-zahl { font-size: .8rem; }
}
.eigenschaften { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.eigenschaften > div { min-width: 0; }
.eigenschaften dt { font-size: .78rem; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }
.eigenschaften dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.eigenschaften .breit { grid-column: 1 / -1; }
.eigenschaften .wert { font-weight: 600; font-variant-numeric: tabular-nums; }
.eigenschaften .stand { margin: 0; }
/* 15.10.2026: bei 1000 px liefen zwei Stempel 24 px über den Rand, bei 1400 px stießen die Stempel von Preis Ein und Aus
   aneinander (Bilder modelle-1000/1400) — ein Stempel braucht rund 185 px. Darum höchstens drei Spalten, zwei Reihen. */
@container (min-width: 620px) { .eigenschaften { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* N7 16.10.2026: Karten mit Bezug haben vier kurze Werte (Kennung, Kontext, Preis Ein/Aus) — eine Reihe statt 3 + 1. Die Stempel
   sitzen dort fast immer im Kartenkopf, darum reicht die Breite. */
@container (min-width: 620px) { .eigenschaften.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Im schmalen Feld bricht der Stempel zwischen Datum und Wort um, nie mitten im Wort (390 px: „frisc h“, 23:17). */
.eigenschaften .stand { max-width: 100%; flex-wrap: wrap; column-gap: 4px; }
.quellen-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 0; }
.quellen-zeile .z { width: 16px; height: 16px; color: var(--leise); }
.klaerung { border: 2px solid var(--text); border-radius: var(--radius); padding: 16px clamp(14px, 2.5vw, 24px); margin: 0 0 32px; background: var(--flaeche); }

/* ── Lokal oder Cloud: sechs Achsen, je zwei Seiten ── */
.achsen { display: grid; gap: 14px; }
.achse { container-type: inline-size; border-top: 1px solid var(--linie); padding-top: 12px; }
.zwei { display: grid; gap: 12px; }
@container (min-width: 640px) { .zwei { grid-template-columns: 1fr 1fr; } }
/* N7 16.10.2026 (F1-10): Begriffe an einer Achse (Datenresidenz, Training) als Karte, leere Seite als eine Zeile. */
.achse-begriff { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 10px; }
.achse-begriff h5 { margin: 0; font-size: 1rem; }
.achse-begriff > p { margin: 4px 0; }
.achse-begriff summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.seite-leer { margin: 4px 0 0; font-size: .95rem; }
.achsen-luecke { display: block; margin: 14px 0 0; }

/* ── Netz (ohne JS): Mitte und Nachbarn je Kantentyp; den Kranz zeichnet netz.js ── */
#kranz .mitte { background: var(--flaeche); border: 2px solid var(--akzent); border-radius: var(--radius); padding: 16px; margin: 0 0 16px; }
.nachbarn ul { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 4px; }

/* ── Glossar (F1-04, N1 15.10.2026): eine Zeile je Begriff — Name, Zahl der Aussagen rechts in fester Spalte, kurz darunter
   (zugeklappt zwei Zeilen). Aufklappen zeigt Aussagen und Türen. Der Anker sitzt im Inhalt, darum Abstand nach oben, damit
   die Zeile mit dem Namen sichtbar bleibt. ── */
.eintrag { border-top: 1px solid var(--linie); }
.eintrag > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline;
  min-height: 44px; padding: 10px 4px; cursor: pointer; list-style: none;
}
.eintrag > summary::-webkit-details-marker { display: none; }
.e-name { font-weight: 600; }
.e-name::before {
  content: ""; display: inline-block; width: .45em; height: .45em; margin: 0 .6em .12em 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.eintrag[open] .e-name::before { transform: rotate(45deg); }
.e-zahl { grid-column: 2; grid-row: 1; color: var(--leise); font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.e-kurz { grid-column: 1 / -1; color: var(--leise); font-size: .92rem; }
.eintrag:not([open]) .e-kurz { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* Am Telefon eine Zeile: das Netz wächst (23:51: 137 statt 123 Knoten, Thema „Modelle“ 5 654 px) — die Übersicht soll mitwachsen
   können, ohne wieder zur Wand zu werden. Aufgeklappt steht alles. */
@media (max-width: 640px) { .eintrag:not([open]) .e-kurz { -webkit-line-clamp: 1; line-clamp: 1; } }
.eintrag-inhalt { padding: 2px 4px 16px; scroll-margin-top: 5.5rem; }
.eintrag:has(> .eintrag-inhalt:target) { border-top: 3px solid var(--akzent); }
.eintrag:has(> .eintrag-inhalt:target) > summary { color: var(--akzent); }
dl.tueren-kurz { display: grid; gap: 4px; margin: 0; }
dl.tueren-kurz > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 8px; align-items: baseline; }
dl.tueren-kurz dd { margin: 0; }
details.mehr > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
/* N10 16.10.2026 (F2-07): in der Lektion stehen je Begriff zwei Aussagen offen, der Rest klappt auf. */
.begriff-kurz { margin: 0 0 18px; }
.begriff-kurz > details.mehr > .aussagen { margin-top: 6px; }
/* N20 16.10.2026 (F4-04): Lektion < 5 000 px bei 390. Am Telefon stehen die Begriffe nebeneinander als wischbare Reihe — jede Karte
   86 % breit, die nächste ragt sichtbar herein; die Seite selbst läuft nicht quer. Inhalt und Regel (kurz + 2 Aussagen offen) bleiben
   gleich; vorher k10-l3 6 825 px, davon 2 618 px Begriffe untereinander. */
@media (max-width: 34rem) {
  .begriffe-reihe { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--rand)); padding: 0 var(--rand) 8px; scroll-padding-inline: var(--rand); }
  .begriffe-reihe > .begriff-kurz { flex: 0 0 86%; min-width: 0; margin: 0; scroll-snap-align: start; }
}
/* Befehls-Übung (N20, F4-04): „Kopieren“ neben dem Befehl, Belege und gemessene Ausgabe nebeneinander — vorher je Befehl eine eigene
   Zeile für den Knopf und je eine für jedes Aufklappen (k10-l3: 6 Befehle, 1 356 px bei 1280). */
.aufz-befehle > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; align-items: center; margin-bottom: 10px; }
.aufz-befehle > li > * { grid-column: 1 / -1; margin: 0; }
.aufz-befehle > li > .aufz-befehl { grid-column: 1 / 3; grid-row: 1; }
.aufz-befehle > li > .knopf { grid-column: 3; grid-row: 1; justify-self: end; }
.aufz-befehle > li > p.klein { grid-column: 1; }
.aufz-befehle > li > details.aufz-belege-auf { grid-column: 2; } /* Belege immer in Spalte 2, Ausgabe in 3 — fluchtet (BEDIENUNG 8) */
.aufz-befehle > li > details:not(.aufz-belege-auf) { grid-column: 3; }
.aufz-befehle > li > details[open] { grid-column: 1 / -1; }
@media (max-width: 34rem) {
  .aufz-befehle > li > p.klein, .aufz-befehle > li > details.loesung { grid-column: 1 / -1; }
}

/* ── Quellen ── */
.quellen { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.quellen li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--linie); scroll-margin-top: 12px; }
.quellen li:target { background: var(--flaeche); }

/* ── Fuß ── */
.fuss { max-width: 1240px; margin: 0 auto; padding: 20px var(--rand) 32px; border-top: 1px solid var(--linie); color: var(--leise); font-size: .9rem; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin-bottom: 8px; }
.fuss nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }

/* Bewegung: nur kurze Rückmeldung; unter reduced-motion gar keine (DESIGN.md Achse 7). */
@media (prefers-reduced-motion: no-preference) {
  .kachel, .tuer, .filter, .antwort { transition: border-color .15s ease; }
}

/* ── Bauteile, die B2b per Skript baut (Klassen aus web/kern.js, netz.js, suche.js, uebungen-netz.js gelesen 15.10.2026).
   Gestalt bleibt hier, an EINER Stelle; B2b liefert nur Struktur. Anlass: Bild start-1400-hell.jpg (23:14) — Modell-Kacheln
   standen als lange Spalte, das Ergebnis darunter statt rechts (BEDIENUNG 5). ── */
/* kern.js legt .uebung-buehne an, uebungen-netz.js darin .uebung-feld mit Eingabe und Ergebnis (gelesen 23:16). */
.uebung-feld { display: grid; gap: 16px 24px; }
@container (min-width: 700px) {
  .uebung-feld { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .uebung-feld > .uebung-ergebnis { position: sticky; top: 12px; }
}
.uebung-eingabe, .uebung-ergebnis { min-width: 0; }
.uebung-ergebnis { border-left: 3px solid var(--linie); padding: 4px 0 4px 16px; }
.uebung-aufgabe { font-weight: 600; }
.wahl-gruppe { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.wahl-gruppe.saetze { flex-direction: column; }
button.kachel, button.chip { font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.wahl-gruppe .kachel { flex: 1 1 11rem; max-width: 18.7rem; padding: 10px 14px; }
.wahl-gruppe.saetze .kachel { max-width: none; }
.kachel[aria-pressed="true"], .chip[aria-pressed="true"] { border: 2px solid var(--akzent); color: var(--akzent); font-weight: 600; }
.wahl-gruppe .kachel[aria-pressed="true"] { padding: 9px 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 22px; text-decoration: none; }
/* Rechner (F1-12): Felder in festem Raster Label · Feld · Herkunft — gleiche Spaltenbreiten in jeder Zeile (BEDIENUNG 8). */
.uebung .feld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 9rem) minmax(0, 7.5rem); align-items: center; gap: 4px 12px; margin: 0 0 8px; }
.uebung .feld > input, .uebung .feld > select { width: 100%; min-width: 0; }
.uebung .feld > select { grid-column: 2 / -1; }
@container (max-width: 440px) {
  .uebung .feld { grid-template-columns: minmax(0, 1fr) minmax(0, 7.5rem); }
  .uebung .feld > select { grid-column: 1 / -1; }
  .uebung .feld > .annahme { grid-column: 2; margin-top: -4px; }
}
/* „Cloud · Modell · 7,20 $ je Monat“ — Trenner zwischen Wort und Betrag (F1-12: lief „Flash7,2 $“ zusammen). */
.summe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 6px; }
.summe > .wort::after { content: " ·"; }
.fall-karte { background: var(--grund); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px; }
.fall-annahmen, .rechenweg, .naeherung, .hw-hinweis, .annahme, .klein { color: var(--leise); font-size: .95rem; }
.klein { font-size: .9rem; } /* Etikett (Prüfung 7 nimmt .klein aus); Absätze oben ≥ 15 px — FEIN-2 */
/* M9 (17.10.2026): der Hauptknopf trägt --handlung („das Nächste tun“), nicht mehr --akzent (das heißt nur „gewählt“). */
.knopf.haupt { background: var(--handlung); color: var(--auf-handlung); border-color: var(--handlung); }
.knopf.leise { border-style: dashed; }
.betrag { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vergleich { display: grid; gap: 8px; }
.balken-liste { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.balken-spur { height: 12px; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; }
.balken-fuellung { display: block; height: 100%; background: var(--akzent); }
.balken-zahl { font-variant-numeric: tabular-nums; color: var(--leise); font-size: .9rem; }
.pruef-meldung { font-weight: 600; }
.aussage.leer { border-style: dashed; }

/* Startseite „Anfangen mit / Weiter mit“ (kern.js, BEDIENUNG 10): eine Zeile mit Abständen, die Kurszeile leise. */
.weiter-mit { margin: 8px 0 0; }
.weiter-mit .tuer { gap: 8px; flex-wrap: wrap; padding: 6px 14px; border-radius: var(--radius); }
.weiter-wort, .weiter-kurs { color: var(--leise); }

/* Suche (suche.js) und Kachelkranz (netz.js) */
.treffer-zahl { color: var(--leise); }
.treffer.kachel { max-width: none; flex-basis: 20rem; }
.kranz-mitte { background: var(--flaeche); border: 2px solid var(--akzent); border-radius: var(--radius); padding: 16px; margin: 0 0 16px; }
.kranz-ring { display: grid; gap: 16px; }
.kranz-gruppe h3, .kranz-kopf { color: var(--leise); font-size: .95rem; }
.kachel-typ { color: var(--leise); font-size: .8rem; }
.kachel-name { font-weight: 600; }

/* N10 16.10.2026 (F2-07): lange Prompts und Antworten aufgezeichneter Läufe (B5) stehen in einem Fenster fester Höhe mit eigener
   Bildlaufleiste — der Text bleibt ganz, die Lektion bleibt kurz (k5-l3 vorher 5 422 px bei 1280, Übung allein 3 504 px). */
/* 16rem statt 22rem (N20, 16.10.2026; F4-04): die Prüffrage der Werkstatt-Lektionen stand bei 2 232 px (1280); der Text bleibt ganz
   lesbar, er scrollt im Kasten. */
.aufz-text { max-height: 16rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--linie); border-radius: var(--radius); padding: 8px 12px; }
@media (max-width: 34rem) { .aufz-text { max-height: 12rem; } } /* N20: vier Kästen je Werkstatt-Lektion, k14-l2 sonst 5 179 px bei 390 */
.aufz-text:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
/* N10 16.10.2026: „n weitere Aussagen“ zeigt, dass es aufklappt — Winkel aus Rahmenlinien (kein Zeichen, keine Schrift). */
details.mehr > summary { list-style: none; }
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr > summary::before { content: ""; width: 7px; height: 7px; margin: 0 12px 0 4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); flex: none; }
details.mehr[open] > summary::before { transform: rotate(45deg); }

/* ── Konto (K2, 16.10.2026; Konzept §7). Leise: ein Text-Link im Kopf, kein Banner, kein Modal (BEDIENUNG 10/11). ── */
.konto-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; position: relative;
  color: var(--leise); text-decoration: none; border: 1px solid transparent; border-radius: var(--radius);
}
.konto-link:hover { color: var(--text); border-color: var(--linie); }
.konto-link[aria-current="page"] { color: var(--akzent); border-color: var(--akzent); }
/* Angemeldet: ein Haken am Zeichen — Form, nicht nur Farbe (WCAG 1.4.1). */
.konto-link .konto-haken { display: none; position: absolute; left: 21px; top: 23px; width: 13px; height: 13px; border-radius: 7px;
  background: var(--frisch); color: var(--flaeche); box-shadow: 0 0 0 2px var(--grund); }
.konto-link[data-konto="an"] .konto-haken { display: block; }
.konto-link[data-konto="an"] { color: var(--text); }

/* Am Telefon steht „Konto“ rechts neben der Marke, die Frage-Zeile darunter (sonst eine eigene Zeile nur für den Link, 390 px). */
@media (max-width: 640px) {
  .kopf .marke { order: 0; }
  .kopf .konto-link { order: 1; margin-left: auto; }
  .kopf .frag { order: 2; }
}
.konto-seite { max-width: 1240px; }
.anmelden-blatt { max-width: 440px; margin: 8px 0 32px; }
/* /anmelden/: links die Wege, rechts was das Konto tut — zwei Spalten erst, wenn der Container sie trägt (DESIGN Achse 4). */
.anmelden-raster { container-type: inline-size; }
@container (min-width: 820px) {
  .anmelden-spalten { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 64px; align-items: start; }
  .konto-fakten { margin-top: 112px; }
}
.konto-fakten ul { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 18px; max-width: 520px; }
.konto-fakten li { display: flex; gap: 14px; align-items: flex-start; color: var(--leise); }
.konto-fakten li .z { color: var(--text); margin-top: 2px; }
.konto-fakten strong { display: block; color: var(--text); }
.konto-status { min-height: 1.55em; color: var(--leise); }
.konto-status[data-art="fehler"] { color: var(--text); border-left: 3px solid var(--altert); padding-left: 10px; }
.konto-status[data-art="ok"] { color: var(--text); border-left: 3px solid var(--frisch); padding-left: 10px; }

/* Drei gleich große Wege (Konzept §7: Apple = Google an Gewicht; Passkey oben). */
.wege-knoepfe { display: grid; gap: 12px; margin: 0 0 16px; }
.weg-knopf {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; width: 100%; padding: 6px 16px;
  font: inherit; font-weight: 600; font-size: 1.02rem; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  border-radius: var(--radius); border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
}
.weg-knopf .weg-zeichen { width: 22px; height: 22px; flex: none; }
.weg-knopf .weg-text { display: flex; flex-direction: column; align-items: flex-start; }
.weg-knopf small { font-weight: 400; font-size: .82rem; color: var(--leise); }
.weg-knopf:hover { border-color: var(--text); }
.weg-apple { background: var(--marke-apple-grund); color: var(--marke-apple-text); border-color: var(--marke-apple-rand); }
.weg-apple:hover { border-color: var(--marke-apple-rand); }
.weg-apple .weg-zeichen { fill: currentColor; }
.weg-google { background: var(--marke-google-grund); color: var(--marke-google-text); border-color: var(--marke-google-rand); }
.weg-google:hover { border-color: var(--marke-google-text); }
.g-blau { fill: var(--marke-google-blau); }
.g-rot { fill: var(--marke-google-rot); }
.g-gelb { fill: var(--marke-google-gelb); }
.g-gruen { fill: var(--marke-google-gruen); }
.weg-knopf:disabled { cursor: progress; opacity: .7; }
.link-knopf {
  font: inherit; color: inherit; background: none; border: 0; padding: 0 2px; min-height: 44px; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 600;
}
.neu-hier, .ohne-konto { margin: 0 0 6px; }
.ohne-konto, .konto-klein { color: var(--leise); font-size: .95rem; }
.schwebend { max-width: 560px; border: 2px solid var(--linie); border-radius: var(--radius); padding: 16px clamp(14px, 2.5vw, 24px);
  background: var(--flaeche); margin: 0 0 32px; }
.schwebend .knopf { width: 100%; justify-content: center; margin: 0; text-align: center; min-height: 52px; }

/* /konto/: Kacheln, darunter EIN Teil (BEDIENUNG 1); Teile zweispaltig erst ab genug Platz im Container (DESIGN Achse 4). */
.konto-kacheln .kachel { flex-basis: 13rem; }
/* Am Telefon zwei Kacheln je Reihe — sonst rückt der gewählte Teil unter vier volle Breiten (390 px gemessen, 16.10.2026). */
@media (max-width: 640px) {
  .konto-kacheln { gap: 8px; }
  .konto-kacheln .kachel { flex-basis: calc(50% - 4px); max-width: none; padding: 10px 12px; }
  .konto-kacheln .kachel[aria-current] { padding: 9px 11px; }
  .konto-kacheln .k-name { padding-right: 0; font-size: .95rem; }
}
.konto-liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; max-width: 720px; }
.konto-liste li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 56px; padding: 6px 6px 6px 14px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
}
.konto-liste .weg-zeichen { width: 22px; height: 22px; flex: none; }
.konto-liste .weg-name { font-weight: 600; }
.konto-liste .weg-seit { color: var(--leise); font-size: .88rem; flex: 1 1 10rem; }
.konto-liste .knopf { margin: 0; }
.dieser { font-size: .78rem; border: 1px solid currentColor; border-radius: 11px; padding: 0 8px; color: var(--leise); }
.weg-neu { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; max-width: 720px; }
.weg-neu .weg-knopf { flex: 1 1 13rem; width: auto; min-height: 48px; font-size: .95rem; }
.kaestchen { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.kaestchen input { width: 22px; height: 22px; margin: 0; accent-color: var(--akzent); }
.bestaetigung-blatt { max-width: 720px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 12px; }
.bestaetigung-blatt ol { margin: 0 0 10px; padding-left: 1.4em; }
.unterschrift { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--leise); word-break: break-all; }
/* Löschen: abgesetzt, aber nicht versteckt und nicht kleiner als Anlegen (Konzept §7: ohne dunkle Muster). */
.konto-loeschen { margin: 40px 0 0; padding: 20px 0 0; border-top: 1px dashed var(--linie); max-width: 720px; }
.konto-loeschen .knopf { border-style: dashed; }
.loeschen-frage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ── N12 (16.10.2026): USP-Reihe unter der h1 der Startseite (F3 §2, DYNAMIK §1 „USPs oben, mit Symbolen, je ein Satz“).
   Tor: Oberkante ≤ 320 px bei 1280, ≤ 480 px bei 390 (seiten.test.mjs). Einflug (.einflug) und die Bühne des lebenden Zeichens
   rechts neben der h1 regelt N13 in bewegung.css — hier nur die Reihe selbst. ── */
.held h1 { margin-bottom: 14px; }
.usp { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.usp-punkt {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px 6px 8px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 22px; font-size: 1rem; line-height: 1.3;
}
.usp-zeichen { width: 30px; height: 30px; padding: 5px; flex: none; border-radius: 15px; color: var(--frisch); border: 1.5px solid currentColor; }
.usp-punkt strong { font-variant-numeric: tabular-nums; }
.held .unterzeile { margin-bottom: 4px; }
/* „Für wen?“ sitzt im Kopfblock neben dem Zeichen (N20, 16.10.2026; F4-03) — Abstand zur Unterzeile wie zwischen Blöcken. */
.held > #fuer-wen { margin: 20px 0 0; }
@media (max-width: 640px) {
  .usp { flex-direction: column; align-items: flex-start; gap: 6px; }
  .usp-punkt { font-size: .95rem; padding: 4px 12px 4px 6px; }
  .usp-zeichen { width: 28px; height: 28px; }
}

/* ── N12: Tür „Für Teams und Behörden“ → /angebot/ in Kopf und Fuß jeder Seite (F3 §6.1). Umrandet, damit sie als Tür und nicht als
   siebtes Ziel gelesen wird; gewählt (aria-current auf /angebot/) im Akzent wie die Ziele. ── */
.tuer-angebot {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; white-space: nowrap;
  color: var(--text); text-decoration: none; font-weight: 600; border: 1px solid var(--text); border-radius: var(--radius);
}
.tuer-angebot:hover { background: var(--flaeche); }
.fuss nav .fuss-angebot { gap: 6px; font-weight: 600; color: var(--text); }
.tuer-angebot[aria-current="page"], .fuss nav .fuss-angebot[aria-current="page"] { color: var(--akzent); border-color: var(--akzent); }
.fuss-angebot .z { width: 18px; height: 18px; }
/* Der Prüfstand-Satz bleibt ehrlich, steht aber leise unter dem Markensatz (F3 §1 „Lust nimmt“). */
.fuss .pruefstand { font-size: .8rem; margin: 0; }
@media (max-width: 640px) {
  .kopf .tuer-angebot { order: 1; margin-left: auto; padding: 0 10px; font-size: .88rem; }
  .kopf .tuer-angebot .z { width: 18px; height: 18px; }
  /* Die Tür nimmt am Telefon den Platz rechts neben der Marke; „Konto“ rückt neben das Suchfeld, statt eine eigene Zeile zu
     bekommen (390 px gemessen 16.10.2026: Kopf 168 → 116 px). */
  .kopf .frag { order: 2; flex: 1 1 12rem; } /* Basis 12rem: passt nicht mehr neben die Tür, bricht also in Zeile 2 */
  .kopf .konto-link { order: 3; margin-left: 0; }
}

/* ── Kurse nach Bereich, Rollen (N17, 16.10.2026; BEDIENUNG 1, 2, 7). /kurse/: Bereich-Kacheln, darunter der gewählte Bereich mit
   seinen Kurs-Kacheln, darunter die Lektionen des gewählten Kurses — zwei Ebenen .teile, dieselben :target-Regeln wie oben. ── */
.kacheln.bereiche .kachel, .kacheln.rollen-wahl .kachel { flex-basis: 11rem; max-width: 18.7rem; padding: 10px 12px; }
.kacheln.bereiche .kachel[aria-current], .kacheln.rollen-wahl .kachel[aria-current] { padding: 9px 11px; }
main:not(:has(.teile :target)) .kacheln.bereiche .kachel.vorgewaehlt { padding: 9px 11px; }
/* Der erste Kurs eines Bereichs ist vorbelegt, solange kein Kurs im Bereich gewählt ist (auch bei #<bereich> oder altem Anker). */
.bereich-teil:not(:has(.teile :target)) > .kurs-wahl .kachel.vorgewaehlt { border: 2px solid var(--akzent); padding: 13px 15px; }
.kurs-teil > h3 { margin: 4px 0 10px; }
.kurs-teil > h3 a { color: var(--text); }
/* Alter Pfad-Anker (/kurse/#ki-verstehen): leer, nur Sprungziel — :has(:target) wählt den Bereich, der ihn trägt. */
.anker-alias { display: block; height: 0; scroll-margin-top: 12px; }
.kachel .zaehlt { font-variant-numeric: tabular-nums; }
.unterzeile .abzeichen { margin-left: 6px; }
.schulungsmappe h2 { display: flex; align-items: center; gap: 8px; }
.schulungsmappe .mappe { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.schulungsmappe .mappe li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
/* Rolle oben, Bereich darunter (N20, 16.10.2026; F4-03): auf /kurse/ dieselben Rollen-Kacheln wie auf Start, so klein wie die
   Bereiche; die Linie darunter trennt Navigation (Rolle) und Regal (Bereich). */
.kacheln.kurse-rollen { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.kacheln.kurse-rollen .kachel { flex-basis: 11rem; max-width: 18.7rem; padding: 10px 12px; }
@media (max-width: 34rem) {
  .kacheln.bereiche, .kacheln.rollen-wahl, .kacheln.kurse-rollen { gap: 8px; }
  .kacheln.bereiche .kachel, .kacheln.rollen-wahl .kachel, .kacheln.kurse-rollen .kachel { flex-basis: calc(50% - 4px); max-width: none; }
  .kacheln.bereiche .k-name, .kacheln.rollen-wahl .k-name, .kacheln.kurse-rollen .k-name { font-size: .95rem; }
}

/* ── Grundskala (M1, 16.10.2026; Konzept Marketing §5 — NICHT drehbar, gilt ab M1). Gedreht werden später nur Akzent, Dichte,
   Zeichen, Spalten, Kopfinhalt, Bild, Bewegungsstufe (DESIGN „Variationsachsen“); die Farben oben bleiben, bis er die Richtung
   wählt (E17). Typo-Werte linear zwischen 390 und 1280 px: h1 34 → 56, h2 26 → 34, h3 20 → 22, Fließtext 17 → 18 (clamp aus den
   beiden Messpunkten gerechnet: Steigung = Δpx / 890 px, Achsenabschnitt = Wert bei 390 − Steigung × 390). ── */
:root {
  --inhalt: 1240px;
  --inhalt-innen: 1880px;  /* DESIGN-1 (18.10.2026): Innenseiten „Pfad“ bis 1 880 px (Auftrag design § 1.1), main.innen in innen.css */
  --rand: clamp(16px, 4vw, 40px);
  --raster: 8px;
  --abschnitt: 56px;
  --h1: clamp(34px, 24.36px + 2.472vw, 56px);  --h1-zeile: 1.05;
  --h2: clamp(26px, 22.49px + 0.899vw, 34px);  --h2-zeile: 1.15;
  --h3: clamp(20px, 19.12px + 0.2247vw, 22px); --h3-zeile: 1.25;
  --text-groesse: clamp(17px, 16.56px + 0.1124vw, 18px); --text-zeile: 1.55;
  --chip: 15px;
  --radius: 14px;          /* Kacheln, Flächen */
  --radius-knopf: 10px;    /* Knöpfe, Felder, Ziele */
  --fokus: var(--text);    /* Fokus 3 px im Textton (§5) */
  --zeichen-chip: 24px;
  --zeichen-kachel: 40px;
  --bedien: 44px;
}
@media (min-width: 960px) { :root { --abschnitt: 96px; } }

body { font-size: var(--text-groesse); line-height: var(--text-zeile); }
main, .kopf, .fuss { max-width: var(--inhalt); }
h1 { font-size: var(--h1); line-height: var(--h1-zeile); letter-spacing: -0.015em; }
h2 { font-size: var(--h2); line-height: var(--h2-zeile); }
h3 { font-size: var(--h3); line-height: var(--h3-zeile); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.knopf, .ziele a, .tuer-angebot, .kopf-pilot, .konto-link, .blaettern a, .weg-knopf, .antwort, .sprung { border-radius: var(--radius-knopf); }
.frag input, .frag-gross input { border-radius: var(--radius-knopf) 0 0 var(--radius-knopf); }
.frag button, .frag-gross button { border-radius: 0 var(--radius-knopf) var(--radius-knopf) 0; }
.usp-punkt { font-size: var(--chip); }
.usp-zeichen { width: calc(var(--zeichen-chip) + 10px); height: calc(var(--zeichen-chip) + 10px); }
.z.kz { width: var(--zeichen-kachel); height: var(--zeichen-kachel); color: var(--akzent); stroke-width: 1.5; }

/* Kopf (M1): Suchfeld nimmt, was bleibt — so bleibt der Kopf bei 1280 EINE Zeile. „Pilot anfragen“ erst ab 960 px. */
.kopf .frag { flex: 1 1 10rem; max-width: 260px; }
.kopf-pilot { display: none; }
@media (min-width: 960px) {
  .kopf-pilot { display: inline-flex; align-items: center; min-height: var(--bedien); padding: 0 14px; white-space: nowrap; font-weight: 600;
    text-decoration: none; background: var(--akzent); color: var(--auf-akzent); border: 1px solid var(--akzent); }
  .kopf-pilot:hover { background: var(--text); border-color: var(--text); color: var(--grund); }
}
.fassung { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Start (M1, Konzept §2): Held mit zwei Knöpfen, darunter Abschnitte im Abstand der Grundskala. */
.held-knoepfe { display: flex; flex-wrap: wrap; gap: var(--raster) calc(2 * var(--raster)); margin: calc(2 * var(--raster)) 0 0; }
.held-knoepfe .knopf { min-height: 52px; padding: 0 20px; gap: 8px; margin: 0; font-weight: 600; text-decoration: none; }
.knopf.haupt:hover { background: var(--text); border-color: var(--text); color: var(--grund); }
.abschnitt { margin: var(--abschnitt) 0 0; }
.abschnitt > h2 { margin-bottom: calc(3 * var(--raster)); }
.kacheln.angebote .kachel, .kacheln.schritte .kachel { flex: 1 1 18rem; max-width: none; padding: calc(3 * var(--raster)); gap: var(--raster); }
.k-preis { font-size: var(--h3); font-weight: 700; font-variant-numeric: tabular-nums; }
.k-satz { color: var(--leise); }
.art4-belege { margin-top: calc(2 * var(--raster)); }
.netz-heute { list-style: none; margin: 0 0 calc(2 * var(--raster)); padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--raster) calc(4 * var(--raster)); }
.netz-heute strong { font-size: var(--h2); font-variant-numeric: tabular-nums; margin-right: 4px; }
.pilot { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); padding: calc(3 * var(--raster)) clamp(16px, 3vw, 32px); }
.pilot .knopf { margin: 0; gap: 8px; text-decoration: none; }

/* Zugang (M1, Konzept §4): Schloss mit „Konto“ an gesperrten Lektionen, „Probelektion“ an der freien — Zeichen + Wort, nie nur Farbe. */
.schloss, .probe-marke { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: .82rem; line-height: 1.4;
  padding: 1px 8px; border: 1px solid var(--linie); border-radius: 11px; color: var(--leise); white-space: nowrap; }
.schloss .z { width: 14px; height: 14px; }
.probe-marke { border-color: var(--frisch); color: var(--frisch); }
.unterzeile .probe-marke { margin-right: 6px; vertical-align: 1px; }
.zugang-zeile { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.blaettern a .z:first-child:not(:last-child) { width: 16px; height: 16px; }
.zu-hinweis { color: var(--leise); font-size: .95rem; }

/* Preise (M1, Konzept §3): zwei Spalten ab 960 px, darunter untereinander; Preis rechts in fester Spalte (BEDIENUNG 8). */
.preis-spalten { display: grid; gap: calc(3 * var(--raster)); margin: calc(3 * var(--raster)) 0 calc(2 * var(--raster)); }
@media (min-width: 960px) { .preis-spalten { grid-template-columns: 1fr 1fr; align-items: start; } }
.preis-sparte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: calc(3 * var(--raster)) clamp(16px, 2.5vw, 28px); scroll-margin-top: 12px; }
.preis-sparte:target { border: 2px solid var(--akzent); }
.preis-sparte h2 { display: flex; align-items: center; gap: 12px; }
.sparte-satz { color: var(--leise); }
.posten-liste { list-style: none; margin: calc(2 * var(--raster)) 0 0; padding: 0; }
.posten { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: calc(2 * var(--raster)) 0; border-top: 1px solid var(--linie); }
.p-name { font-weight: 600; }
.p-preis { grid-column: 2; grid-row: 1; font-size: var(--h3); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.p-einheit, .p-hinweis { grid-column: 1 / -1; color: var(--leise); font-size: .92rem; }
.p-umfang { grid-column: 1 / -1; margin: 4px 0 0; padding-left: 1.2em; color: var(--leise); font-size: .92rem; }
.preis-stand { color: var(--leise); font-size: .95rem; }
.hauslizenz { display: grid; gap: calc(3 * var(--raster)); }
@media (min-width: 960px) { .hauslizenz { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.umfang { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.umfang li { display: flex; gap: 12px; align-items: flex-start; }
.umfang .z { color: var(--frisch); margin-top: 3px; }
.mappe-beweis { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: calc(2 * var(--raster)) calc(3 * var(--raster)); }
.mappe-beweis h3 { display: flex; align-items: center; gap: 8px; }
.mappe-zahlen { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.mappe-zahlen strong { font-size: var(--h3); font-variant-numeric: tabular-nums; margin-right: 4px; }
.frage-auf { border-top: 1px solid var(--linie); }
.frage-auf:last-child { border-bottom: 1px solid var(--linie); }
.frage-auf > summary { min-height: var(--bedien); display: flex; align-items: center; gap: 12px; padding: 12px 4px; cursor: pointer; font-weight: 600; font-size: var(--h3); list-style: none; }
.frage-auf > summary::-webkit-details-marker { display: none; }
.frage-auf > summary::before { content: ""; width: 8px; height: 8px; flex: none; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); }
.frage-auf[open] > summary::before { transform: rotate(45deg); }
.antwort-text { padding: 0 4px 16px 24px; max-width: 75ch; }
.preis-hinweise { color: var(--leise); padding-left: 1.2em; }
/* Kopf bei 1280 in EINER Zeile (gemessen 16.10.2026, 17:1x: 116 px, „Konto“ brach in Zeile 2): Ziele und Türen knapper. */
@media (min-width: 641px) {
  .kopf { gap: 8px 10px; }
  .ziele { gap: 0; }
  .ziele a { padding: 0 9px; }
  .kopf .frag { flex: 1 1 7rem; max-width: 240px; }
}
.held .weiter-mit { margin: calc(2 * var(--raster)) 0 0; }
.preis-stand { margin-bottom: calc(4 * var(--raster)); }
/* Modell-Karten am Telefon (M1, 16.10.2026): mit der Grundskala (Fließtext 17 px) wuchs /modelle/ bei 390 auf 253 px je Modell
   (Tor ≤ 250, seiten.test.mjs). Datenkarten sind kein Fließtext — Werte in 15 px, wie Chips (§5). */
@media (max-width: 640px) {
  .modell-zeile { font-size: var(--chip); padding: 10px 12px; }
  .modell-zeile .eigenschaften { gap: 6px 12px; }
}
/* Lektion am Telefon (M1, 16.10.2026): mit Fließtext 17 px (Grundskala) standen drei Lektionen knapp über dem Tor < 5 000 px bei 390
   (k14-l2 5 062, k9-l3 5 009, k10-l3 5 004). Aufzeichnungs-Kästen scrollen ohnehin; Aussage-Karten etwas knapper. */
@media (max-width: 34rem) {
  .aufz-text { max-height: 10.5rem; }
  .aussage { padding: 10px 12px; }
  .uebung, .pruefrage { padding: 14px 12px; }
}

/* ── B2 „Tief · Kacheln“, seine Wahl 16.10.2026 (E17; M6). Form-Werte aus Konzept Marketing §5 / richtungen.css `kacheln`: dichter als
   die Grundskala — Abschnitt 72 px (≥ 960) / 40 px (Telefon), h1 48 px bei 1280 und 32 px bei 390 (clamp aus beiden Punkten:
   Steigung 16 px / 890 px = 1,798vw, Achsenabschnitt 32 − 0,01798 × 390 = 24,99 px), Rahmen 1 px an jeder Fläche, Zeichen 40 px
   in Kacheln (--zeichen-kachel, schon M1). Farben: Token-Blöcke oben. ── */
:root {
  --abschnitt: 40px;
  --h1: clamp(32px, 24.99px + 1.798vw, 48px);
  --rahmen: 1px;
  --zeichen-kachel: 40px;
}
@media (min-width: 960px) { :root { --abschnitt: 72px; } }
.kachel, .usp-punkt, .pilot, .preis-sparte, .mappe-beweis, .aussage, .modell-zeile, .uebung { border-width: var(--rahmen); }

/* Umschalter Hell/Dunkel im Fuß (M6, BEDIENUNG 7): EIN Knopf, 44 px, Inline-SVG. Er zeigt das Zeichen des Schemas, in das er
   wechselt (Mond im hellen, Sonne im dunklen) und sagt es als Wort; kern.js setzt data-theme und aria-pressed. */
.schema-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: var(--bedien); min-width: var(--bedien); padding: 0 12px;
  font: inherit; color: var(--text); background: var(--flaeche); border: var(--rahmen) solid var(--linie); border-radius: var(--radius-knopf); cursor: pointer; }
.schema-knopf:hover { border-color: var(--text); }
.schema-knopf .z { width: 20px; height: 20px; }
.schema-knopf .schema-mond, :root[data-theme="hell"] .schema-knopf .schema-sonne { display: none; }
:root[data-theme="hell"] .schema-knopf .schema-mond { display: inline; }
.fuss-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.fuss-zeile > p { margin: 0; }
/* Am Telefon kostet der Umschalter eine Zeile im Fuß (+52 px); damit blieb k9-l3 bei 390 nicht unter dem N20-Tor (< 5 000 px, gemessen
   16.10.2026, 18:1x: 5 003 px). Der Fuß wird dort knapper statt die Lektion zu kürzen. */
@media (max-width: 640px) { .fuss { padding-top: 12px; padding-bottom: 12px; } .fuss nav { margin-bottom: 0; } }

/* ── Textfelder (Leitung 16.10.2026, 18:3x): M5s Schreibübung brauchte eine Klasse, stil.css gehörte M6 — Schrift, Farben und Rand aus den Tokens,
   sonst zeichnet der Browser Monospace auf Grau (M5-Bericht). Mindesthöhe 3 Zeilen, Breite setzt die Übung per CSSOM. ── */
textarea, input[type="text"], input[type="search"] {
  font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-knopf, 10px);
  padding: 10px 12px; min-height: 44px;
}
textarea { min-height: calc(3 * 1.55em + 20px); resize: vertical; }

/* ── Lizenz (M10, 17.10.2026, E18 P3): /preise/ mit Sparten-Wahl (zwei Kacheln oben, darunter NUR die gewählte Sparte; ohne Skript beide),
   Bestell-Knopf je Posten, Hervorhebung des Kurses aus ?kurs=; /konto/ und /verwaltung/ Kachel „Lizenzen“, Modal „Lizenz eintragen“. ── */
.preis-wahl { margin: calc(3 * var(--raster)) 0 0; }
.preis-wahl .kachel { flex-basis: 16rem; text-align: left; font: inherit; color: var(--text); background: var(--flaeche); cursor: pointer; }
.preis-wahl .kachel[aria-pressed="true"] { border: 2px solid var(--akzent); }
.preis-wahl .k-satz { color: var(--leise); font-size: .92rem; }
.preis-sparte[hidden] { display: none; }
.preis-spalten:has(> .preis-sparte[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }
.lizenz-kurs { margin: calc(2 * var(--raster)) 0 0; padding: calc(1.5 * var(--raster)) calc(2 * var(--raster)); border-left: 3px solid var(--akzent); background: var(--flaeche); border-radius: var(--radius); }
.posten .lizenz-knopf { grid-column: 1 / -1; justify-self: start; margin-top: var(--raster); gap: 8px; text-decoration: none; }
.posten.hervor { border-top: 2px solid var(--akzent); }
.posten.hervor .p-name { color: var(--akzent); }
.sparte-hinweis { color: var(--leise); font-size: .95rem; margin-bottom: 0; } /* FIRMA-1-Nachlese 17.10.2026: .92rem = 14,72 px fiel in der Breiten-Runde (7) durch */
.lizenz-liste .weg-seit { font-variant-numeric: tabular-nums; }
.lizenz-modal { color: var(--text); background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); padding: calc(3 * var(--raster)); width: min(34rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.lizenz-modal::backdrop { background: var(--grund); opacity: .85; }
.lizenz-form h2 { margin-top: 0; }
.lizenz-feld { display: grid; gap: 4px; margin: 0 0 calc(2 * var(--raster)); }
.lizenz-feld label { font-weight: 600; }
.lizenz-feld small { color: var(--leise); }
.lizenz-feld input, .lizenz-feld select { width: 100%; min-width: 0; min-height: 44px; font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-knopf, 10px); padding: 0 12px; }
.lizenz-feld input:focus-visible, .lizenz-feld select:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.lizenz-knoepfe { margin: calc(2 * var(--raster)) 0 0; }

/* ── M9 (17.10.2026, seine Wahl E19): Kopf mit fünf Zielen und Startseite S1 „Signal“ (vision/gestaltung/v2/start-s1.css, in die Website
   übernommen). Nur Tokens; die Bewegung (Netz-Canvas, Zähler) steht in web/netz-canvas.js und lebt NUR auf `/` — Innenseiten bleiben ruhig. ── */

/* Kopf: Marke · Kurse · Netz · Preise · Suche · Konto. Preise und Suche sind Ziele wie die anderen (in .ziele), nicht mehr umrandete Türen. */
.kopf .ziele { justify-content: flex-end; }
.kopf .ziele .tuer-angebot, .kopf .ziele .tuer-suche { border: 1px solid transparent; font-weight: inherit; color: var(--leise); white-space: nowrap; }
.kopf .ziele .tuer-angebot:hover, .kopf .ziele .tuer-suche:hover { color: var(--text); border-color: var(--linie); background: none; }
.kopf .ziele a[aria-current="page"] { color: var(--akzent); border-color: var(--akzent); font-weight: 600; }
.ziele a span { white-space: nowrap; }
@media (min-width: 641px) {
  .kopf { flex-wrap: nowrap; }
  .kopf .ziele { flex-wrap: nowrap; }
  .kopf .konto-link { flex: none; }
}
@media (max-width: 640px) {
  /* Telefon: Marke und Konto oben in EINER Zeile, die vier Ziele unten in der Leiste (BEDIENUNG 10, wie bisher). */
  .kopf { flex-wrap: nowrap; }
  .kopf .ziele .tuer-angebot, .kopf .ziele .tuer-suche { order: 0; margin-left: 0; padding: 0 2px; font-size: .75rem; }
  .kopf .ziele .tuer-angebot .z, .kopf .ziele .tuer-suche .z { width: 20px; height: 20px; }
  .kopf .konto-link { order: 1; margin-left: auto; }
}

/* Start: der Held reicht über die volle Breite (Netz-Canvas), alles andere in der Hülle von main. */
body[data-seite="start"] { overflow-x: clip; }
body[data-seite="start"] main { padding-top: 0; }
body[data-seite="start"] .held { position: relative; isolation: isolate; overflow: hidden; margin: 0 calc(50% - 50vw) 0; padding: clamp(40px, 7vw, 104px) max(var(--rand), calc(50vw - 620px + var(--rand))) clamp(40px, 6vw, 80px); }
.netz-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
/* Schleier: Verlauf nach Grund hinter dem Text, damit Text/Grund ≥ 4,5 : 1 bleibt, auch über der hellsten Kante (S1 gemessen 17.10.2026:
   ein Knoten unter „zeigt.“ gab ohne ihn 1,04 : 1). Er liegt nur auf der Höhe des Texts; oben glimmt das Netz frei. */
body[data-seite="start"] .held::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--grund) 95%, transparent) 0%, color-mix(in srgb, var(--grund) 95%, transparent) 50%,
      color-mix(in srgb, var(--grund) 72%, transparent) 66%, transparent 86%),
    linear-gradient(to bottom, transparent 70%, var(--grund) 100%); }
@media (min-width: 561px) {
  body[data-seite="start"] .held::before { -webkit-mask-image: linear-gradient(to bottom, transparent 8%, var(--grund) 22%); mask-image: linear-gradient(to bottom, transparent 8%, var(--grund) 22%); }
}
.held-text { max-width: 900px; }
body[data-seite="start"] .held h1 { margin: 0; font-size: clamp(2.75rem, 7.5vw, 6rem); font-weight: 800; line-height: .95; letter-spacing: -0.035em; text-wrap: balance; }
body[data-seite="start"] .held .unterzeile { margin: 28px 0 0; max-width: 40ch; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; color: var(--leise); }
body[data-seite="start"] .held .unterzeile strong { color: var(--text); font-variant-numeric: tabular-nums; }
body[data-seite="start"] .held-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin: 36px 0 0; }
body[data-seite="start"] .held-knoepfe .knopf { min-height: 56px; padding: 0 26px; gap: 10px; margin: 0; border-radius: 999px; font-size: 18px; font-weight: 700;
  border: 2px solid var(--linie); background: color-mix(in srgb, var(--grund) 70%, transparent); transition: transform 150ms, border-color 150ms, box-shadow 150ms; }
body[data-seite="start"] .held-knoepfe .knopf:hover { border-color: var(--text); transform: translateY(-2px); }
body[data-seite="start"] .held-knoepfe .knopf.haupt { background: var(--handlung); border-color: var(--handlung); color: var(--auf-handlung);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--handlung) 35%, transparent); }
body[data-seite="start"] .held-knoepfe .knopf.haupt:hover { background: var(--handlung); color: var(--auf-handlung); border-color: var(--handlung);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--handlung) 30%, transparent), 0 10px 40px color-mix(in srgb, var(--handlung) 50%, transparent); }
.held-hinweis { margin: 18px 0 0; font-size: 15px; color: var(--leise); display: flex; align-items: center; gap: 8px; }
.held-hinweis .z { width: 18px; height: 18px; }
.ueberspringen { position: absolute; right: max(var(--rand), calc(50vw - 620px + var(--rand))); bottom: 14px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }

/* Glas: Fläche, 1 px Linie, innerer Schein in Bildfarbe (S1). Gilt für die Flächen der Startseite. */
body[data-seite="start"] :is(.usp-punkt, .schritt-kachel, .kurs-kachel, .preis-kachel, .pruef-flaeche) {
  position: relative; border: 1px solid var(--linie); border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--flaeche) 92%, var(--bild-a)) 0%, var(--flaeche) 55%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent), inset 0 0 40px color-mix(in srgb, var(--bild-a) 6%, transparent); }

/* USP-Reihe: drei Chips, die Zahl groß vorn (S1). */
body[data-seite="start"] .usp { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; flex-direction: row; align-items: stretch; }
body[data-seite="start"] .usp-punkt { flex: 1 1 280px; display: flex; align-items: center; gap: 16px; padding: 18px 22px; font-size: var(--text-groesse); }
body[data-seite="start"] .usp-zeichen { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 0; color: var(--bild-a); }
body[data-seite="start"] .usp-punkt:nth-child(2) .usp-zeichen { color: var(--bild-b); }
body[data-seite="start"] .usp-punkt:nth-child(3) .usp-zeichen { color: var(--bild-c); }
.usp-zahl { flex: none; white-space: nowrap; overflow-wrap: normal; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.usp-satz { color: var(--leise); line-height: 1.3; }
.usp-satz b { display: block; color: var(--text); }
/* FEIN-1 (17.10.2026, F5 B2): jeder Chip ist eine Tür (BEDIENUNG 2) — die ganze Fläche klickt (::after über den Chip), Hover 150 ms
   (DYNAMIK §2: 120–180 ms), Fokus sichtbar am Chip. Am Ziel: Kopf-Tür gewählt bzw. die Übung per :target markiert. */
.usp-punkt { position: relative; transition: border-color .15s ease, transform .15s ease; }
.usp-tuer { display: flex; align-items: center; gap: inherit; color: inherit; text-decoration: none; min-width: 0; }
.usp-tuer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.usp-tuer:focus-visible { outline: none; }
.usp-punkt:has(.usp-tuer:focus-visible) { outline: 3px solid var(--akzent); outline-offset: 3px; } /* wie :focus-visible überall */
.usp-punkt:has(.usp-tuer:hover) { border-color: color-mix(in srgb, var(--text) 45%, var(--linie)); transform: translateY(-2px); }
body[data-seite="start"] .usp-punkt:has(.usp-tuer:hover) { border-color: color-mix(in srgb, var(--text) 45%, var(--linie)); }
.usp-punkt:has(.usp-tuer:hover) .usp-satz b { text-decoration: underline; text-underline-offset: 3px; }
.uebung:target { scroll-margin-top: 80px; outline: 2px solid var(--akzent); outline-offset: 6px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .usp-punkt { transition: none; } .usp-punkt:has(.usp-tuer:hover) { transform: none; } }

/* Abschnitte der Startseite */
body[data-seite="start"] .abschnitt { margin: clamp(48px, 7vw, 96px) 0 0; }
body[data-seite="start"] .abschnitt > h2 { margin: 0 0 8px; font-size: clamp(30px, 4vw, 48px); font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; }
.vorspann { margin: 0 0 28px; color: var(--leise); max-width: 60ch; }
.schritte, .preis-kacheln { display: flex; flex-wrap: wrap; gap: 16px; }
.schritte > *, .preis-kacheln > * { flex: 1 1 260px; max-width: 100%; }
.schritt-kachel { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.schritt-kachel h3 { margin: 4px 0 0; font-size: 24px; line-height: 1.1; }
.schritt-kachel .k-satz { margin: 0; }
.schritt-kopf { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.schritt-nr { font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.schritt-zeit { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--linie); }
.schritt-zeit .z, .kurs-daten .z { width: 16px; height: 16px; }
.schritt-tuer { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.schritt-tuer .z, .tuer-gross .z, .preis-kachel .knopf .z { width: 18px; height: 18px; }

/* Kurse: Kacheln mit Bereichsstreifen (Bildfarbe, keine Bedeutung), kippen auf Hover (150 ms, 3°; DYNAMIK Hover 120–180 ms). */
.kurs-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; perspective: 900px; }
body[data-seite="start"] .kurs-kachel { max-width: none; display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 20px 28px; min-height: 172px; overflow: hidden;
  transition: transform 150ms ease-out, border-color 150ms; transform-origin: 50% 100%; }
.kurs-kachel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--streifen, var(--bereich-1)); }
body[data-seite="start"] .kurs-kachel:hover, body[data-seite="start"] .kurs-kachel:focus-visible { transform: rotateX(3deg) rotateY(-3deg) translateY(-3px); border-color: var(--streifen, var(--text)); box-shadow: none; }
.kurs-kachel .k-name { font-size: 21px; line-height: 1.15; padding-right: 0; }
.kurs-bereich { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--leise); }
.kurs-daten { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; color: var(--leise); }
.kurs-daten > span { display: inline-flex; align-items: center; gap: 6px; }
.kurs-kachel .z { color: var(--leise); }
.streifen-1 { --streifen: var(--bereich-1); } .streifen-2 { --streifen: var(--bereich-2); } .streifen-3 { --streifen: var(--bereich-3); }
.streifen-4 { --streifen: var(--bereich-4); } .streifen-5 { --streifen: var(--bereich-5); } .streifen-6 { --streifen: var(--bereich-6); }
.streifen-7 { --streifen: var(--bereich-7); }
body[data-seite="start"] .weiter { margin: 20px 0 0; font-size: inherit; }
.tuer-gross { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--linie);
  text-decoration: none; font-weight: 700; color: var(--text); transition: border-color 150ms; }
.tuer-gross:hover { border-color: var(--text); }

/* Preise je Lizenz: drei Kacheln aus preise.json. */
.preis-kachel { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.preis-kachel h3 { margin: 0; font-size: 20px; }
.preis-kachel p { margin: 0; }
.preis-betrag { font-size: 48px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.preis-einheit { color: var(--leise); font-size: 15px; }
.preis-umfang { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.preis-umfang li { display: flex; gap: 8px; align-items: flex-start; }
.preis-umfang .z { width: 18px; height: 18px; margin-top: .2em; color: var(--frisch); }
body[data-seite="start"] .preis-kachel .knopf { margin: auto 0 0; align-self: flex-start; min-height: 48px; padding: 0 20px; gap: 8px; border-radius: 999px; font-weight: 700; text-decoration: none; }
body[data-seite="start"] .art4-belege { margin-top: 24px; color: var(--leise); }
.art4-belege b { color: var(--text); }

/* Prüf es selbst */
.pruef-flaeche { padding: clamp(22px, 4vw, 40px); display: grid; gap: 28px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.pruef-suche { display: flex; gap: 10px; flex-wrap: wrap; }
.pruef-suche label { flex: 1 1 100%; font-weight: 700; }
.pruef-suche input { flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 0 18px; font-size: 18px; background: var(--grund); border-radius: 12px; }
body[data-seite="start"] .pruef-suche .knopf { min-height: 52px; margin: 0; gap: 8px; padding: 0 20px; border-radius: 12px; font-weight: 700; }
.pruef-zahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pruef-zahlen strong { display: block; font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pruef-zahlen span { color: var(--leise); font-size: 15px; }
.pruef-stand { margin: 0; }
.pruef-tueren { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) { .pruef-flaeche { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  body[data-seite="start"] .held { padding-top: 32px; }
  /* Am Telefon liegt Text über der ganzen Breite: der Schleier deckt sie ganz (S1: Kontrast gegen die hellste Kante). */
  body[data-seite="start"] .held::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--grund) 55%, transparent) 0%, color-mix(in srgb, var(--grund) 86%, transparent) 22%, color-mix(in srgb, var(--grund) 86%, transparent) 80%, var(--grund) 100%); }
  body[data-seite="start"] .held h1 { font-size: 44px; }
  body[data-seite="start"] .held-knoepfe .knopf { width: 100%; justify-content: center; }
  .usp-zahl { font-size: 34px; }
  body[data-seite="start"] .kurs-kachel { min-height: 0; padding: 16px 16px 16px 24px; }
  .ueberspringen { bottom: 6px; }
}

/* Halteknopf im Fuß (M9; WCAG 2.2.2): bewegung.js legt ihn nur auf der Startseite an, neben den Schema-Umschalter. Angehalten steht
   ALLES: Canvas und Zähler (netz-canvas.js liest .bewegung-steht), CSS-Animationen pausiert, Übergänge aus (getAnimations() → 0 laufend). */
.fuss .bewegung-halt { display: inline-flex; align-items: center; gap: 8px; min-height: var(--bedien); min-width: var(--bedien); padding: 0 12px;
  font: inherit; color: var(--text); background: var(--flaeche); border: var(--rahmen) solid var(--linie); border-radius: var(--radius-knopf); cursor: pointer; }
.fuss .bewegung-halt:hover { border-color: var(--text); }
.fuss .bewegung-halt .z { width: 20px; height: 20px; }
.fuss-regler { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.bewegung-steht *, .bewegung-steht *::before, .bewegung-steht *::after { animation-play-state: paused !important; transition: none !important; }
.bewegung-steht body[data-seite="start"] .kurs-kachel:hover, .bewegung-steht body[data-seite="start"] .held-knoepfe .knopf:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  body[data-seite="start"] .kurs-kachel, body[data-seite="start"] .held-knoepfe .knopf { transition: none; }
  body[data-seite="start"] .kurs-kachel:hover, body[data-seite="start"] .kurs-kachel:focus-visible, body[data-seite="start"] .held-knoepfe .knopf:hover { transform: none; }
}

/* Staffel-Rechner (STAFFEL-1, 17.10.2026; BEDIENUNG 5, 8): EIN Feld, das Ergebnis daneben (schmal: direkt darunter). Die Ergebnisfläche
   hat eine feste Mindesthöhe — drei Zeilen, auch bei Fehlermeldung —, damit beim Tippen nichts springt; Beträge in fester Spalte. */
.staffel-rechner { margin-top: calc(3 * var(--raster)); padding-top: calc(2 * var(--raster)); border-top: var(--rahmen) solid var(--linie); }
.staffel-rechner[hidden] { display: none; }
.staffel-rechner h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 calc(1.5 * var(--raster)); font-size: 1.05rem; }
.staffel-flaeche { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; }
.staffel-eingabe { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.staffel-eingabe label { font-weight: 700; }
.staffel-eingabe input { width: 9ch; min-height: var(--bedien); padding: 0 12px; font: inherit; font-size: 1.15rem; font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--grund); border: var(--rahmen) solid var(--linie); border-radius: var(--radius-knopf); }
.staffel-ergebnis { flex: 1 1 260px; min-width: 0; min-height: 7.5em; display: flex; flex-direction: column; gap: 6px; }
.staffel-zeile { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.staffel-zeile .s-betrag { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 11ch; }
.staffel-stufe { color: var(--leise); font-size: .92rem; }
.staffel-rechner[data-gueltig="false"] .staffel-stufe { color: var(--text); }

/* ── KURS-1 (17.10.2026): Kursseite als Verkaufsseite und Kurs-Kacheln auf /kurse/. Tokens S1: --handlung nur am Hauptknopf
   „Probelektion starten“, --akzent nur für gewählt; Streifen --bereich-n ohne Bedeutung. Kein Inhalt vor dem Kauf: die Seite
   hat nur Kopf, Lernziele, „Danach kannst du“ und die Lektionsliste (Nummer · Titel · Minuten · Zustand). ── */
.kurs-kopf { margin-bottom: 32px; }
.kurs-kopf h1 { margin-top: 4px; overflow-wrap: anywhere; }
.kurs-fakten { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--leise); font-size: 15px; }
.kurs-fakten li { display: inline-flex; align-items: center; gap: 6px; }
.kurs-fakten .z, .kurs-lektionen .z { width: 16px; height: 16px; }
.kurs-kaufen .held-knoepfe .knopf { white-space: normal; }
.kurs-haus { margin: 10px 0 0; font-size: 15px; }
.kurs-haus a { display: inline-flex; align-items: center; min-height: 44px; } /* Tippziel ≥ 44 px (Breiten-Runde 5, FEIN-2) */
.kurs-weiter { margin: 16px 0 0; }
.kurs-weiter[hidden], .kurs-kaufen[hidden] { display: none; }
.haken-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 70ch; }
.haken-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.haken-liste li > .z { width: 20px; height: 20px; margin-top: 2px; color: var(--frisch); }
.kurs-lektionen { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; max-width: 70ch; }
.kurs-lektionen li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 48px 6px 14px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.kurs-lektionen li > a { flex: 1 1 16rem; min-width: 0; display: flex; gap: 12px; align-items: center; color: var(--text); text-decoration: none; min-height: 44px; } /* Tippziel ≥ 44 px auch ab 768 px (Breiten-Runde 5, FEIN-2) */
.kurs-lektionen li > a:hover .titel { text-decoration: underline; }
.kurs-lektionen .nr { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--leise); min-width: 1.4em; }
.kurs-lektionen .titel { flex: 1; overflow-wrap: anywhere; }
.kurs-lektionen .min { color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kurs-lektionen .abzeichen { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }
.kurs-hinweis, .kurs-rollen { color: var(--leise); font-size: 15px; }
/* /kurse/: Kurs-Kacheln (dieselbe Gestalt wie Start, ohne Kippen) */
body[data-seite="kurse"] .kurs-kachel { max-width: none; display: flex; flex-direction: column; gap: 8px; padding: 16px 44px 16px 24px; overflow: hidden; position: relative; }
.kurs-kurz { color: var(--leise); font-size: 15px; line-height: 1.4; }
body[data-seite="kurse"] .kurs-raster { margin: 12px 0 0; }
@media (max-width: 480px) { .kurs-raster { grid-template-columns: 1fr; } }

/* ── MITGLIED-1 (17.10.2026, sein Wort 15:4x „clean und übersichtlich“): /konto/ als Lernplatz, schlanke Lektionsseite. ── */
.gruss { margin: 0 0 calc(2 * var(--raster)); font-size: 1.05rem; color: var(--text); }
.gruss a { font-weight: 600; }
.konto-status:empty { min-height: 0; margin: 0; }
/* Einstellungen: kleine Kacheln, jede öffnet ihr Modal (BEDIENUNG 1, 11). Knöpfe sehen aus wie die Anker-Kacheln. */
.unter-kacheln { margin: calc(2 * var(--raster)) 0 0; }
.kachel.klein { font: inherit; color: var(--text); background: var(--flaeche); cursor: pointer; text-align: left; flex-basis: 11rem; min-height: 56px; }
.kennung-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.kennung-zeile code { overflow-wrap: anywhere; min-width: 0; }
.konto-modal { color: var(--text); background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); padding: calc(3 * var(--raster));
  width: min(36rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.konto-modal::backdrop { background: color-mix(in srgb, var(--grund) 70%, transparent); backdrop-filter: blur(6px); }
.modal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 calc(2 * var(--raster)); }
.modal-kopf h2 { margin: 0; }
.modal-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: calc(2 * var(--raster)) 0 0; }
.knopf.gefahr { border-color: var(--altert); }
/* Deine Kurse: Titel · Ring · Tür in festen Spalten (BEDIENUNG 8). */
.kurs-plaetze li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; }
.kurs-plaetze .weg-name { overflow-wrap: anywhere; }
@media (max-width: 480px) { .kurs-plaetze li { grid-template-columns: minmax(0, 1fr) auto; } .kurs-plaetze li .knopf { grid-column: 1 / -1; justify-self: start; } }
/* Ring „n von m“ (kern.js füllt ihn). */
.ring { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ring svg { flex: none; }
.ring[hidden] { display: none; } /* FEIN-1: der Lektions-Ring ohne Sitzung (F5 B5) — display:inline-flex schlüge hidden sonst */
.ring-spur { fill: none; stroke: var(--linie); stroke-width: 3; }
.ring-wert { fill: none; stroke: var(--frisch); stroke-width: 3; stroke-linecap: round; }
/* Lektion: EINE Kopfzeile Kurs · Lektion n von m · Ring. */
.lektion-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 var(--raster); }
.lektion-kopf .lektion-nr { color: var(--leise); }
.lektion-kopf .probe-marke { margin: 0; }
.blaettern .weiter.knopf.haupt { margin: 0 0 0 auto; }
.blaettern [hidden] { display: none; }

/* ── Lektion in fünf Schritten (LERN-1, 17.10.2026; Konzept Lernerlebnis §3): Zeitleiste oben, das aktuelle Feld leuchtet (--akzent =
   „gewählt“), erledigte tragen einen Strich statt einer Farbe allein (DESIGN: Farbe trägt nie allein). „Weiter“ an fester Stelle unten
   (BEDIENUNG 8), eine Bewegung je Ereignis (DYNAMIK §2: das Feld wechselt, 200 ms; reduced-motion → sofort). Am Telefon zeigt
   [data-einzeln] (kern.js, ≤ 640 px) nur den aktuellen Schritt. ── */
.zeitleiste { position: sticky; top: var(--leiste); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  margin: 4px 0 12px; padding: 8px 0; background: var(--grund); border-bottom: 1px solid var(--linie); }
.zeitleiste ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; flex: 1 1 26rem; margin: 0; padding: 0; list-style: none; }
.zeitleiste a { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 8px; border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--leise); text-decoration: none; font-size: .9rem; transition: background-color .2s, color .2s, border-color .2s; }
.zeitleiste a .nr { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1px solid currentColor; font-size: .8rem; flex: none; }
.zeitleiste a .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeitleiste a[data-erledigt] { color: var(--text); }
.zeitleiste a[data-erledigt] .nr { background: var(--linie); color: var(--grund); border-color: var(--linie); }
.zeitleiste a[aria-current="step"] { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); font-weight: 600; }
.zeitleiste a[aria-current="step"] .nr { border-color: var(--auf-akzent); }
.zeit-rest { margin: 0; color: var(--leise); font-size: .95rem; white-space: nowrap; }
.zeit-rest b { color: var(--text); }
.zeit-angebot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; padding: 6px 14px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.zeit-angebot[hidden] { display: none; }
.lern-schritt { scroll-margin-top: calc(var(--leiste) + 76px); margin: 0 0 20px; }
.schritt-titel { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1rem; }
.schritt-titel .nr { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; border: 1px solid var(--linie); font-size: .85rem; }
.schritt-titel:focus { outline: none; }
.lern-schritt.aktiv > .schritt-titel .nr { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }
.ziel-satz { font-size: 1.05rem; margin: 0 0 10px; }
.baustein { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 8px 12px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.baustein .z { flex: none; align-self: center; }
.baustein .woran { display: block; margin-top: 2px; }
.baustein .nb { color: var(--leise); }
.einordnung { font-size: 1.05rem; }
.kurs-modell { padding: 10px 14px; border-left: 3px solid var(--linie); background: var(--flaeche); }
.kurs-modell .nb { display: block; font-size: .85rem; }
.blaettern .schritt-weiter { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; margin-left: auto; max-width: 60%;
  border: 1px solid var(--handlung); border-radius: var(--radius); background: var(--handlung); color: var(--auf-handlung); font: inherit; font-weight: 600; cursor: pointer; }
.blaettern .schritt-weiter[hidden], .blaettern[data-schritte-offen] > .weiter { display: none; }
/* Verborgen, aber im Fluss (Höhe 0, unsichtbar, inert aus kern.js) statt display:none: Übungen messen beim Start ihre Breite. */
[data-einzeln] > .lern-schritt:not(.aktiv) { visibility: hidden; height: 0; overflow: hidden; margin: 0; }
@media (max-width: 640px) {
  .zeitleiste a { justify-content: center; padding: 4px; }
  .zeitleiste a .name { display: none; }
  .zeitleiste a[aria-current="step"] .name { display: none; }
  .zeit-rest { flex: 1 0 100%; }
  .zeitleiste { top: 0; }
  .blaettern .schritt-weiter { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .zeitleiste a { transition: none; } }

/* LERN-2 (17.10.2026, Konzept Lernerlebnis §4): drei Erklärstile im Schritt Erklären. --akzent heißt hier nur „gewählt“ (M9). */
.stile { margin: 4px 0 18px; max-width: 72ch; }
.stil-frage { font-weight: 600; font-size: 1.05rem; margin: 0 0 10px; }
.stil-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.stil-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px; min-height: 44px; font: inherit; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; cursor: pointer; }
.stil-kachel:hover, .stil-kachel:focus-visible { border-color: var(--akzent); }
.stil-kachel .k-name { font-weight: 600; }
.stil-kachel .k-satz { font-size: .9rem; color: var(--leise); }
.stil-wahl .nb { margin: 8px 0 0; font-size: .95rem; color: var(--leise); }
.stil-schalter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-size: .9rem; }
.stil-schalter button { font: inherit; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--linie); background: transparent; color: var(--text); cursor: pointer; }
.stil-schalter button[aria-pressed="true"] { border-color: var(--akzent); color: var(--akzent); font-weight: 600; }
.stil p { margin: 0 0 10px; line-height: 1.55; }
.stil:focus { outline: none; }
.stil-beleg { font-size: .72em; color: var(--leise); margin-left: 2px; cursor: help; }
.stil-ein { font-size: .95rem; color: var(--leise); margin: -8px 0 16px; }
.stil-belege { margin: 6px 0 4px; font-size: .9rem; }
.stil-belege summary { cursor: pointer; color: var(--leise); }
.stil-belege .aussagen { padding-left: 1.4em; }
/* Das Schaubild: HTML-Felder; die Pfeile sind Zeichen im Fluss, kein SVG-Text. kette = Reihe mit →, am Telefon untereinander mit ↓;
   fach = Fächer in EINEM Rahmen, das letzte gestrichelt (außerhalb); waage = zwei/drei Seiten nebeneinander. */
.schaubild { list-style: none; padding: 0; margin: 4px 0 10px; display: grid; gap: 12px; }
.schaubild .feld { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); position: relative; }
.schaubild .feld strong { font-size: .95rem; }
.schaubild .feld span { font-size: .9rem; color: var(--leise); line-height: 1.4; }
.form-kette { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 26px; }
.form-kette .feld:not(:last-child)::after { content: "→"; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); color: var(--leise); font-size: 1.1rem; }
.form-fach { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 10px; border: 2px solid var(--linie); border-radius: 12px; }
.form-fach .feld:last-child { border-style: dashed; background: transparent; }
.form-waage { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@media (max-width: 640px) {
  .form-kette { grid-auto-flow: row; grid-auto-columns: auto; gap: 22px; }
  .form-kette .feld:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -21px; transform: translateX(-50%); }
}

/* FIRMA-1-Nachlese (Leitung, 17.10.2026, 21:5x): die Breiten-Runde fand /bestellen/ bei 320 px 346 px breit — zwei Ursachen, gemessen mit
   scrollWidth je Element: der Betrag-Span der Rechnung trägt dort Text („12 Monate ab Freischaltung“, nowrap) und das Schalter-Etikett
   „Behörde ohne USt-IdNr“ bricht nicht um. Beträge selbst tragen geschützte Leerzeichen (M10), darum darf der Span umbrechen. */
.preis-spalten.bestellen .s-betrag { white-space: normal; overflow-wrap: anywhere; text-align: right; }
.preis-spalten.bestellen .lizenz-feld label { white-space: normal; overflow-wrap: anywhere; }
.preis-spalten.bestellen .lizenz-feld, .preis-spalten.bestellen .lizenz-form, .preis-spalten.bestellen .staffel-ergebnis { min-width: 0; max-width: 100%; }

/* ── Modell-Check am Kursende (LERN-3, 17.10.2026; Konzept Lernerlebnis §5, §7) ──────────────────────────────────────────
   Ein Ergebnis-Schirm mit dem Zeichen „Modell klar“ (EINE Form, Strich 1,8 wie alle Zeichen); --frisch heißt „fertig/grün“
   wie am Ring. EINE Bewegung: der Ring schließt sich (500 ms), bei weniger Bewegung steht sofort das Endbild (DYNAMIK § 2). */
.mc-teil { margin-block: 24px; }
.mc-situation { padding: 12px 16px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.mc-haken { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.mc-baustein { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 44px; text-align: start; }
.mc-baustein .k-satz { font-size: .88rem; color: var(--leise); }
.mc-baustein[aria-pressed="true"] { border-color: var(--frisch); }
.mc-baustein[data-vorschlag]::after { content: "Vorschlag des Modells"; font-size: .75rem; color: var(--leise); }
.mc-deutungen .antwort[aria-pressed="true"] { outline: 2px solid var(--akzent); outline-offset: 2px; }
.mc-senden { margin-block: 16px; }
.mc-ergebnis { margin-block: 16px; }
.mc-aufloesung { padding: 10px 14px; border-left: 3px solid var(--linie); background: var(--flaeche); }
.mc-fehlt-liste { padding-inline-start: 1.2em; }
.mc-fehlt { margin-block: 8px; }
.mc-fehlt .mc-was { display: block; color: var(--leise); }
.mc-fehlt .tuer { display: inline-block; margin-top: 4px; }
.mc-klar { display: grid; justify-items: center; gap: 4px; padding: 20px 16px; border: 2px solid var(--frisch); border-radius: var(--radius); text-align: center; }
.mc-klar > .zeichen, .mc-klar > svg { width: 56px; height: 56px; color: var(--frisch); }
.mc-klar-titel { margin: 0; font-size: 1.4rem; font-weight: 700; color: var(--frisch); }
.kurs-modellcheck { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mc-marke { display: inline-flex; align-items: center; gap: 4px; color: var(--frisch); font-weight: 600; }
.mc-marke[hidden] { display: none; }
.ring[data-mc="klar"] .ring-wert { stroke: var(--frisch); }
.ring[data-mc="klar"] > .zeichen { width: 18px; height: 18px; color: var(--frisch); }
.ring.schliesst .ring-wert { animation: ring-schliesst 500ms ease-out 1; }
@keyframes ring-schliesst { from { stroke-dasharray: 0 56.55; } }
@media (prefers-reduced-motion: reduce) { .ring.schliesst .ring-wert { animation: none; } }

/* LERN-4 (17.10.2026, Konzept Lernerlebnis §6): „Hilf mir“ in drei Stufen, „Das war unklar“, Kurz auffrischen. Nur Tokens, keine Hexwerte. */
.hilfe { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-start; margin-top: 1rem; }
.hilfe-auf { flex: 1 1 20rem; min-width: 0; }
.hilfe-auf > summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--handlung); }
.hilfe-auf > summary svg { width: 1.1em; height: 1.1em; }
.hilfe-stufen { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .75rem; }
.hilfe-stufe { border-left: 3px solid var(--linie); padding-left: .75rem; }
.hilfe-stufe .hilfe-name { margin: 0 0 .25rem; font-weight: 600; }
.hilfe-stufe .hilfe-name .nr { display: inline-block; min-width: 1.5em; }
.hilfe [data-hilfe-mehr], .hilfe .unklar { min-height: 44px; }
.hilfe .unklar[aria-pressed="true"] { opacity: .8; }
.auffrischen { margin: 0 0 1rem; }
.auffrischen-kachel { width: 100%; min-height: 44px; text-align: left; }
.auffrischen-fragen { display: grid; gap: 1rem; padding-left: 1.25rem; }
.auffrischen-fragen .antworten { display: grid; gap: .5rem; }
.auffrischen-fragen .antwort { min-height: 44px; text-align: left; }
.auffrischen-fragen .antwort[data-ergebnis="richtig"] { outline: 2px solid var(--handlung); }