/* innen.css — die Innenseiten-Sprache „Pfad“ (DESIGN-1, 18.10.2026; Auftrag vision/entwuerfe/bauauftrag-design-20261018.md § 1.1).
   Lädt NACH stil.css und bewegung.css auf jeder Seite außer / (web-rahmen.mjs) und greift nur in main.innen — Seiten, die ihr Häppchen
   noch nicht hatten, bleiben, wie sie sind. Vorlagen: D2 „Pfad“ (vision/gestaltung/v3/innen-d2.css: Raum, Pfad, Leben), D3 (innen-d3.css:
   Karten-Antworten). Kein Hexwert: Farben aus den Tokens in stil.css; die Bereichsfarbe kommt als lokales --tc (Bedeutung ORT: Streifen,
   Licht, Marker — nie Schrift, D3 gemessen 3,56–5,56 : 1 für 13 px); gewählt = --akzent, das Nächste tun = --handlung (M9/E19).
   Bewegung: EIN Kopflicht atmet 12 s, die Station „dran“ pulst 12 s, die Linie zieht 700 ms, Abschnitte kommen einmal herein (500 ms),
   Karten antworten 170–180 ms, ein Beleg fliegt 450 ms ein — alles hält .bewegung-steht (Halteknopf) und prefers-reduced-motion. */

/* ── Raum: Inhalt bis 1 880 px, Rand 32 px ab 768 px (16 px darunter), Spalten aus der Container-Breite von main. ── */
main.innen { container-type: inline-size; max-width: var(--inhalt-innen); padding-left: 16px; padding-right: 16px; }
@media (min-width: 768px) { main.innen { padding-left: 32px; padding-right: 32px; } }
.bereich-1, main[data-bereich="1"] { --tc: var(--bereich-1); } .bereich-2, main[data-bereich="2"] { --tc: var(--bereich-2); }
.bereich-3, main[data-bereich="3"] { --tc: var(--bereich-3); } .bereich-4, main[data-bereich="4"] { --tc: var(--bereich-4); }
.bereich-5, main[data-bereich="5"] { --tc: var(--bereich-5); } .bereich-6, main[data-bereich="6"] { --tc: var(--bereich-6); }
.bereich-7, main[data-bereich="7"] { --tc: var(--bereich-7); }
main.innen h1 { max-width: 30ch; }
/* Kopf und Fuß stehen auf derselben Kante wie der Inhalt (gesehen 18.10.2026 am Bogen 1 920 px: Marke bei 380 px, Inhalt bei 52 px). */
body:has(main.innen) .kopf, body:has(main.innen) .fuss { max-width: var(--inhalt-innen); }
@media (min-width: 768px) { body:has(main.innen) .kopf, body:has(main.innen) .fuss { padding-left: 32px; padding-right: 32px; } }

/* ── Kopfband: Titel, Satz, Zahlen, Knöpfe; dahinter EIN Licht, das atmet. Das Licht liegt ganz im Band (kein Rand, keine Naht). ──
   Maß der bewegten Fläche bei 1 280 × 900, 4 s (D2, 17.10.2026): 350 × 155 px, Hub .12–.34 → 2,48 % (Ziel 0,5–3 %). */
.kopfband { position: relative; isolation: isolate; padding: 18px 0 20px; margin: 0 0 8px; }
.kopf-licht { position: absolute; left: 0; top: 0; width: min(350px, 100%); height: 155px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at 30% 40%, var(--tc, var(--bereich-1)), transparent 62%), radial-gradient(ellipse at 75% 60%, var(--tc, var(--bereich-4)), transparent 60%);
  opacity: .12; animation: innen-atmen 12s ease-in-out infinite; transform-origin: 40% 40%; }
@keyframes innen-atmen { 0%, 100% { opacity: .12; transform: scale(.94); } 50% { opacity: .34; transform: scale(1.05); } }
.kopfband h1 { margin: 8px 0 6px; }
.kopfband .unterzeile { max-width: 70ch; }
.kopfband .brotkrumen { margin: 0; }
.konto-angebot { margin: 10px 0 0; font-size: .95rem; }
.konto-angebot a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--bedien); padding: 0 12px; border: 1px dashed var(--linie);
  border-radius: var(--radius-knopf); color: var(--leise); text-decoration: none; }
.konto-angebot a:hover { color: var(--text); border-color: var(--text); }
.konto-angebot .z { width: 18px; height: 18px; }

/* ── Blätter: < 1 100 px eine Spalte; ≥ 1 100 Weg (300) · Tun; ≥ 1 500 Weg · Tun · Belege (380). ── */
.blaetter { display: grid; gap: 24px 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.blaetter > * { min-width: 0; }
@container (min-width: 1100px) {
  .blaetter { grid-template-columns: 300px minmax(0, 1fr); }
  .blaetter > .weg { position: sticky; top: 12px; }
  .blaetter > .belege-band { grid-column: 2; }
}
@container (min-width: 1500px) {
  .blaetter.mit-belegen { grid-template-columns: 300px minmax(0, 1fr) 380px; }
  .blaetter.mit-belegen > .belege-band { grid-column: 3; grid-row: 1; position: sticky; top: 12px; }
}
.tun > .block:first-child { margin-top: 0; }
.weg h2, .belege-band h2 { font-size: var(--h3, 1.15rem); margin: 0 0 6px; }

/* ── Pfadleiste: Stationen an einer Linie; die Linie füllt sich (--fuell per CSSOM, 700 ms). ── */
.pfadleiste { position: relative; }
.pfad-stand { color: var(--leise); font-size: .95rem; margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.pfad-weg { position: relative; }
.pfad-linie, .pfad-fuell { position: absolute; left: 11px; top: 22px; width: 2px; height: calc(100% - 44px); background: var(--linie); }
.pfad-fuell { height: min(var(--fuell, 0px), calc(100% - 44px)); background: var(--tc, var(--akzent)); z-index: 1; transition: height .7s ease, width .7s ease; }
.stationen { list-style: none; margin: 0; padding: 0; }
.station { position: relative; padding: 0; margin: 0; }
.station > a { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 10px; align-items: center;
  min-height: var(--bedien); padding: 6px 4px 6px 0; color: var(--text); text-decoration: none; border-radius: var(--radius-knopf); }
.station > a:hover { background: var(--flaeche); }
.station .punkt { position: relative; z-index: 2; grid-column: 1; grid-row: 1 / span 2; justify-self: center; width: 14px; height: 14px; border-radius: 50%;
  background: var(--grund); border: 2px solid var(--tc, var(--akzent)); }
.station .nr { display: none; }
.station .titel { grid-column: 2; font-weight: 600; line-height: 1.3; }
.station .min { grid-column: 3; color: var(--leise); font-size: .9rem; font-variant-numeric: tabular-nums; }
.station .s-wort { grid-column: 2 / span 2; color: var(--leise); font-size: .85rem; }
.station .s-wort:empty { display: none; }
.station > .probe-marke, .station > .schloss { display: flex; align-items: center; gap: 6px; width: max-content; margin: -4px 0 6px 34px; font-size: .85rem; color: var(--leise); }
.station > .schloss .z { width: 16px; height: 16px; }
.station.erreicht .punkt { background: var(--tc, var(--akzent)); }
.station.dran .punkt { background: var(--tc, var(--akzent)); }
.station.dran .punkt::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: var(--tc, var(--akzent)); opacity: .28; animation: innen-puls 12s ease-in-out infinite; }
@keyframes innen-puls { 0%, 100% { transform: scale(.55); opacity: .32; } 50% { transform: scale(1.15); opacity: .08; } }
.weg .modellcheck-tuer, .weg > p { font-size: .95rem; }

/* Unter 700 px Container: der Weg als waagrechte Leiste, wischbar (die Leiste scrollt, nicht die Seite). */
@container (max-width: 699.98px) {
  .pfad-weg { overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .pfad-linie, .pfad-fuell { left: 18px; top: 13px; width: calc(100% - 36px); height: 2px; }
  .pfad-fuell { width: min(var(--fuell, 0px), calc(100% - 36px)); height: 2px; }
  .stationen { display: flex; gap: 8px; width: max-content; }
  .station { flex: 0 0 12.5rem; scroll-snap-align: start; }
  .station > a { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 28px auto auto; padding: 0 8px 4px 0; align-items: start; }
  .station .punkt { grid-column: 1; grid-row: 1; justify-self: start; margin: 6px 0 0 11px; }
  .station .titel { grid-column: 1 / -1; grid-row: 2; }
  .station .min { grid-column: 1; grid-row: 3; }
  .station .s-wort { grid-column: 2; grid-row: 3; }
  .station > .probe-marke, .station > .schloss { margin: 0 0 4px; }
}

/* ── Mini-Pfad: ein Kurs als Karte mit Streifen; Punkte = Lektionen, die Linie füllt sich bis zur letzten erreichten. ── */
.mini-pfad { position: relative; display: grid; gap: 6px; padding: 12px 14px 12px 18px; min-height: var(--bedien); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color .15s ease, translate .15s ease; }
.mini-pfad::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius) 0 0 var(--radius); background: var(--tc, var(--linie)); }
.mini-pfad:hover { border-color: var(--text); }
.mini-pfad .k-name { padding: 0; font-weight: 600; }
.mini-pfad .kurs-kurz { color: var(--leise); font-size: .9rem; line-height: 1.35; }
.mini-pfad .k-zahl { color: var(--leise); font-size: .9rem; font-variant-numeric: tabular-nums; }
.mini-pfad.kommt { border-style: dashed; color: var(--leise); }
/* Unter 700 px Container trägt die Kachel nur Name · Punkte · Zahl (BEDIENUNG 3) — der Satz zum Kurs steht auf /kurs/<id>/. Gemessen
   18.10.2026: mit Satz 5 677 px hoch bei 390 (Grenze 4 500, Basis 20 Kurse / 80 Lektionen), je Kachel 175 px, davon Satz 58 px. */
@container (max-width: 699.98px) { .mini-pfad .kurs-kurz { display: none; } .rollen-karten { gap: 8px; margin-bottom: 20px; } }
.mini-pfad.pflicht { border: 2px solid var(--akzent); padding: 11px 13px 11px 17px; }
.mini { position: relative; display: flex; justify-content: space-between; align-items: center; list-style: none; margin: 2px 0; padding: 0 2px; height: 20px; }
.mini::before, .mini::after { content: ""; position: absolute; left: 8px; right: 8px; top: 9px; height: 2px; background: var(--linie); }
.mini::after { right: auto; width: var(--fuell, 0%); max-width: calc(100% - 16px); background: var(--tc, var(--akzent)); transition: width .7s ease; }
.mini-punkt { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--flaeche); border: 2px solid var(--tc, var(--linie)); }
.mini-punkt.erreicht { background: var(--tc, var(--akzent)); }
.mini-punkt.dran::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: var(--tc, var(--akzent)); opacity: .28; animation: innen-puls 12s ease-in-out infinite; }

/* ── /kurse/: Rollen als drei Karten, darunter die Bereiche als Spalten (1 · 2 · 3 · 4 aus der Container-Breite). ── */
.rollen-karten { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 0 0 28px; }
.rolle-karte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 12px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius); }
.rolle-karte:has(.rolle-wahl[aria-pressed="true"]) { border: 2px solid var(--akzent); padding: 9px 11px; }
.rolle-wahl { display: grid; gap: 2px; justify-items: start; min-height: var(--bedien); padding: 4px 6px; font: inherit; text-align: left; color: var(--text);
  background: none; border: 0; border-radius: var(--radius-knopf); cursor: pointer; }
.rolle-wahl .k-name { font-weight: 600; padding: 0; }
.rolle-wahl .k-zahl { color: var(--leise); font-size: .9rem; }
.rolle-tuer { display: inline-flex; align-items: center; gap: 6px; min-height: var(--bedien); padding: 0 10px; color: var(--text); font-size: .95rem; }
.rolle-tuer .z { width: 18px; height: 18px; }
/* Spalten als Fluss (columns), nicht als Rasterzeilen: Bereiche mit 2 und 4 Kursen stehen sonst in einer Zeile, und die kurzen lassen Loch.
   Gemessen 18.10.2026 bei 1 512 px: Raster 3 030 px hoch, Grenze 2 600 (Basis 20 Kurse / 80 Lektionen). */
.bereich-spalten { columns: 1; column-gap: 20px; }
@container (min-width: 700px) { .bereich-spalten { columns: 2; } }
@container (min-width: 1100px) { .bereich-spalten { columns: 3; } }
@container (min-width: 1500px) { .bereich-spalten { columns: 4; } }
.bereich-spalte { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px 0 0; margin: 0 0 28px; border-top: 3px solid var(--tc); min-width: 0; break-inside: avoid; }
.bereich-spalte h2 { font-size: var(--h3, 1.15rem); margin: 0; }
/* Alte Anker (#ki-verstehen, #<kurs-id>) liegen außerhalb des Flusses — als Flex-Kinder trugen sie je 10 px Abstand (Bogen 18.10.2026: Loch über h2). */
.bereich-spalte > .anker-alias { position: absolute; top: 0; left: 0; }
.bereich-zahl { color: var(--leise); font-size: .95rem; margin: -4px 0 2px; font-variant-numeric: tabular-nums; }

/* ── Kurs: Zahlen, Quellen-Band; Rolle: Pflicht und Wahl als Mini-Pfade in Spalten. ── */
.kopfband .kurs-fakten { margin: 10px 0 4px; }
.kurs-wege { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 700px) { .kurs-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1500px) { .kurs-wege { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.belege-band { padding: 14px 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.belege-stand { color: var(--leise); font-size: .95rem; margin: 0 0 8px; }
.belege-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.belege-liste li { font-size: .95rem; line-height: 1.4; }
.belege-liste cite { font-style: normal; }
.belege-liste .stand { margin-left: 4px; }

/* ── Karte (D3): Fläche mit Streifen; Antworten auf Druck. ── */
.karte { position: relative; padding: 12px 14px 12px 18px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.karte::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius) 0 0 var(--radius); background: var(--tc, var(--linie)); }
.antwortet { animation: innen-antwortet .18s ease-out; }
.kippt { animation: innen-kippt .17s ease-out; }
.rutscht { animation: innen-rutscht .17s ease-out; }
.fliegt-ein { animation: innen-einflug .45s ease-out; }
@keyframes innen-antwortet { 50% { transform: scale(1.02); } }
@keyframes innen-kippt { 50% { transform: perspective(600px) rotateX(6deg); } }
@keyframes innen-rutscht { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes innen-einflug { from { opacity: 0; transform: translateX(24px); } }

/* ── Einflug: Abschnitte kommen beim Scrollen EINMAL herein (500 ms), nur mit Skript (innen.js setzt .js-innen und .da). ── */
.js-innen main.innen .einflug-innen { opacity: 0; translate: 0 12px; transition: opacity .5s ease, translate .5s ease; }
.js-innen main.innen .einflug-innen.da { opacity: 1; translate: 0 0; }

/* ── Halten und reduced-motion: sofort das Ziel. ── */
.bewegung-steht main.innen .einflug-innen { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
  .kopf-licht, .station.dran .punkt::after, .mini-punkt.dran::after { animation: none; }
  .pfad-fuell, .mini::after, .mini-pfad { transition: none; }
  .antwortet, .kippt, .rutscht, .fliegt-ein { animation: none; }
  .js-innen main.innen .einflug-innen { opacity: 1; translate: none; transition: none; }
}