/* ATLAS v4 — Design-Sprache „Karriere-Atlas“ (2026-09-06).
   Ein Atlas ist ein Buch aus Karten. ATLAS vermisst einen Lebenslauf und
   zeichnet daraus eine Karte: Stationen als Route, Kompetenzen als
   Ortssignaturen (Kreisgröße = Evidenz), der Fingerprint als Höhenlinien,
   die Opportunity Map als Blatt mit Standort. Deshalb: Kartenpapier statt
   Weiß, Tusche statt Schwarz, Höhenlinien-Braun für alle Struktur-Linien,
   GENAU EIN Rot für „Du bist hier“ (Standort, aktuelle Station, Auswahl,
   Hauptaktion), Gewässerblau für Unvermessenes (Lücken, Offenes, Links),
   und die Evidenz-Skala als hypsometrische Farbreihe wie im Schulatlas:
   Gipfel dunkelbraun → Hochland ocker → Tiefland grün → Meer blau.
   Jede Farbe bedeutet genau eine Sache – wie in einer Zeichenerklärung.
   Schrift: Bricolage Grotesque (Titel und Text, optische Größen) und
   Archivo Narrow (Kartenbeschriftung: Daten, Achsen, Legenden, Stufen). */
/* v5 = v4 (Ablauf, Blätter, Karten) im Look von v3: Palette aus dem Owner-Deck
   (Ink / Teal / Cyan / Lime / Cloud), Systemschrift, schwere Titel, weiche
   Karten. Die Token-Namen bleiben die von v4, damit jede v4-Regel weiter
   greift; nur ihre Werte kommen aus v3. Hell = Start und Fragen (Cloud),
   dunkel (body[data-theme="dark"]) = Einordnung, Analyse und Empfehlung (Ink)
   – genau wie in v3. Bedeutung je Token:
   --route  = „du bist hier“ / Hauptakzent (hell Teal, dunkel Lime)
   --contour = Struktur-Linien und Beschriftungen (Teal)
   --water  = Unvermessenes, Offenes, Links (Cyan)
   --h1…--h6 = Evidenz-Skala, dieselben Farben wie die Blasen in v3. */
:root {
  --paper: #f4f7f9; --paper-2: #e9eff3; --paper-3: #dfe6ec; --paper-4: #c5d0d9; --sheet: #ffffff;
  --ink: #0b1826; --ink-2: #5b6b7a; --ink-3: #8a98a6;
  --contour: #0f8d81; --contour-soft: rgba(22,179,164,.35);
  --route: #16b3a4; --route-soft: rgba(22,179,164,.14); --on-route: #ffffff;
  --water: #1c8fb0; --water-soft: #e3f5f9;
  --warn: #c98a12; --warn-soft: #fff6e5;
  --shadow: #0b1826; --shade: #0b1826;
  --teal: #16b3a4; --teal-dark: #0f8d81; --cyan: #45d0e6; --lime: #b8ea3c; --navy: #0b1826; --navy-2: #13253a; --navy-3: #1c3149;
  /* Evidenz-Skala: sehr stark … keine Evidenz (= BUBBLE_COLORS in v3) */
  --h1: #b8ea3c; --h2: #16b3a4; --h3: #45d0e6; --h4: #7fa6c9; --h5: #5b6b7a; --h6: #3a4a5c;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --label: var(--font);
  --head-h: 60px; --nav-h: 0px; --maxw: 1080px;   /* --nav-h: keine Fußleiste, der Viewport endet unten am Rand (Scrub rechnet damit) */
}
body[data-theme="dark"] {
  --paper: #0b1826; --paper-2: #13253a; --paper-3: #1f3550; --paper-4: #2d4561; --sheet: #13253a;
  --ink: #ffffff; --ink-2: rgba(255,255,255,.72); --ink-3: rgba(255,255,255,.5);
  --contour: #45d0e6; --contour-soft: rgba(69,208,230,.3);
  --route: #b8ea3c; --route-soft: rgba(184,234,60,.16); --on-route: #0b1826;
  --water: #45d0e6; --water-soft: rgba(69,208,230,.10);
  --warn: #f0c24b; --warn-soft: rgba(240,194,75,.10);
  --shadow: #000000; --shade: #000000;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font); background: var(--paper); color: var(--ink); overflow-x: hidden;
  min-height: 100vh; line-height: 1.5; font-size: 16px; -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}
::selection { background: var(--route); color: var(--paper); }
:focus-visible { outline: 2px solid var(--route); outline-offset: 3px; }

/* ---------- Kopf: Marke, Route (Fortschritt), Status ---------- */
.top {
  position: fixed; top: 0; left: 0; right: 0; height: var(--head-h); z-index: 10;
  display: flex; align-items: center; gap: 28px; padding: 0 28px;
  background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--paper-3);
}
.mark { font-weight: 900; letter-spacing: .16em; font-size: 15px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.mark .sub { font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-left: 10px; }
/* Fortschritt wie in v3: fünf Balken, der aktuelle füllt sich innerhalb der Phase (Breite von i). */
.progress { flex: 1; display: flex; gap: 6px; max-width: 520px; margin: 0 auto; }
.progress .seg { flex: 1; height: 5px; border-radius: 3px; background: var(--paper-3); overflow: hidden; position: relative; }
.progress .seg i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--teal); transition: width .4s ease; }
.progress .seg.done i { width: 100%; background: var(--teal-dark); }
body[data-theme="dark"] .progress .seg { background: rgba(255,255,255,.14); }
body[data-theme="dark"] .progress .seg.done i { background: var(--lime); }
.progress .seg span { display: none; }   /* wie in v3: die Balken tragen keine Beschriftung */
.live { font-size: 12px; color: var(--ink-2); white-space: nowrap; min-width: 120px; text-align: right; }
.live b { color: var(--contour); font-weight: 700; }
.live .glyph { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--route); font-size: 15px; display: inline-block; width: 1.1em; margin-right: 6px; vertical-align: -1px; }

.stage {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto; padding: calc(var(--head-h) + 40px) 28px 72px;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
}
.stage.top-align { justify-content: flex-start; }
.screen { animation: enter .5s cubic-bezier(.2,.7,.2,1) both; width: 100%; }
.screen.no-enter { animation: none; }
@keyframes enter { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Blatt-Navigation: im Fluss, nicht als Leiste ----------
   „Zurück“ leise über dem Blatt, die Aktion am Ende des Blatts. */
.backlink { align-self: flex-start; background: none; border: 0; padding: 0; margin: 0 0 22px; cursor: pointer; font: inherit; font-family: var(--label); font-size: 14.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.backlink:hover { color: var(--ink); }
.flownav { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 44px; }
.flownav .skip { background: none; border: 0; color: var(--ink-2); font: inherit; font-family: var(--label); font-size: 15px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.flownav .skip:hover { color: var(--ink); }
.flownav .hint { font-family: var(--label); font-size: 14.5px; color: var(--ink-3); }

/* Knöpfe: Tusche auf Papier. Die Hauptaktion bekommt beim Überfahren die
   rote Route als Unterkante – dieselbe Linie wie im Fortschritt. */
button.primary {
  background: var(--ink); color: var(--paper); border: 0; border-radius: 3px; padding: 14px 26px;
  font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; box-shadow: inset 0 -3px 0 transparent;
  transition: box-shadow .15s, background .15s, opacity .2s;
}
button.primary:hover:not(:disabled) { box-shadow: inset 0 -3px 0 var(--route); }
button.primary:disabled { background: var(--paper-3); color: var(--ink-3); cursor: default; }
button.secondary {
  background: transparent; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 3px;
  padding: 11px 18px; font: inherit; font-weight: 600; cursor: pointer;
}
button.secondary:hover { background: var(--ink); color: var(--paper); }

/* ---------- Typografie ---------- */
/* Blattkennung: Kartenbeschriftung mit rotem Kartenzeichen davor. */
.kicker { display: flex; align-items: center; gap: 10px; font-family: var(--label); font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--contour); margin-bottom: 16px; }
.kicker::before { content: ""; width: 8px; height: 8px; background: var(--route); flex: 0 0 8px; }
h1.display { font-size: clamp(34px, 4.8vw, 62px); line-height: 1.02; font-weight: 700; letter-spacing: -.025em; max-width: 19ch; margin-bottom: 20px; text-wrap: balance; }
h1.display.wide { max-width: 26ch; }
h1.display.long { font-size: clamp(26px, 3.3vw, 40px); max-width: 34ch; line-height: 1.12; }
h1.display.xlong { font-size: clamp(21px, 2.4vw, 29px); max-width: 46ch; line-height: 1.25; letter-spacing: -.01em; }
h2.title { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; max-width: 30ch; text-wrap: balance; }
.lead { font-size: 19px; color: var(--ink-2); max-width: 58ch; margin-bottom: 30px; line-height: 1.5; }
.small { font-family: var(--label); font-size: 14.5px; color: var(--ink-3); }
.empty { color: var(--ink-3); font-style: italic; }

/* ---------- Fragen ---------- */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 820px; }
.options.single { grid-template-columns: 1fr; max-width: 640px; }
.options.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 920px; }
.options.compact .opt { padding: 16px 18px; }
.options.compact .opt .t { font-size: 16.5px; }
.opt {
  display: flex; align-items: flex-start; gap: 14px; text-align: left; width: 100%;
  background: var(--sheet); border: 1.5px solid var(--paper-4); border-radius: 4px; padding: 18px 20px;
  font: inherit; cursor: pointer; transition: border-color .15s, background .15s; color: var(--ink);
}
.opt:hover { border-color: var(--ink); }
.opt.on { border-color: var(--route); background: var(--sheet); }
.opt .box { flex: 0 0 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink-3); margin-top: 2px; position: relative; transition: border-color .15s; }
.opt.multi .box { border-radius: 3px; }
.opt.on .box { border-color: var(--route); background: var(--route); box-shadow: inset 0 0 0 3.5px var(--sheet); }
.opt .icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 4px; background: var(--paper-2); display: grid; place-items: center; color: var(--contour); font-weight: 700; font-size: 18px; }
.opt .t { font-weight: 600; font-size: 17px; line-height: 1.3; }
.opt .d { font-family: var(--label); color: var(--ink-2); font-size: 15px; margin-top: 3px; }
/* Eingaben: eine Schreiblinie wie auf einem Vermessungsbogen */
.ftext { width: 100%; max-width: 640px; font: inherit; font-size: 18px; padding: 12px 2px; border: 0; border-bottom: 2px solid var(--ink-3); border-radius: 0; background: transparent; color: var(--ink); transition: border-color .15s; }
.ftext::placeholder { color: var(--ink-3); }
.ftext:focus { outline: none; border-color: var(--route); }
.qmeta { font-family: var(--label); font-size: 13.5px; color: var(--ink-3); margin-top: 16px; }

/* ---------- Start ---------- */
.start { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
.start > div:first-child { padding-top: 38px; }
/* Das Titelbild: ein Gipfel aus Höhenlinien, eine Route hinauf, die letzte
   Station rot. Zeichnet sich beim Laden – die eine große Bewegung der Seite. */
.start-right { display: grid; gap: 22px; }
.hero-art { width: 100%; height: auto; display: block; margin: -8px 0 0; overflow: visible; }
.hero-art .ct { fill: none; stroke: var(--contour); stroke-width: 1.2; opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.5s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(.1s + var(--i, 0) * .11s); }
.hero-art .route { fill: none; stroke: var(--route); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s cubic-bezier(.4,0,.2,1) forwards 1.1s; }
.hero-art .st { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: pop .45s cubic-bezier(.2,.8,.3,1.3) backwards; animation-delay: calc(1.25s + var(--i, 0) * .22s); }
.hero-art .heute { transform-box: fill-box; transform-origin: center; animation: pop .5s cubic-bezier(.2,.8,.3,1.3) backwards 2.35s; }
.hero-art .heute .pin { fill: var(--route); stroke: var(--paper); stroke-width: 2.5; }
.hero-art .heute .halo { fill: none; stroke: var(--route); stroke-width: 1.5; opacity: .5; animation: halo 2.6s ease-out 2.8s infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes halo { 0% { scale: .5; opacity: .6; } 100% { scale: 1.6; opacity: 0; } }
.hero-art .halo { transform-box: fill-box; transform-origin: center; }
.uploadbox {
  border: 1.5px dashed var(--contour-soft); border-radius: 4px; padding: 24px; background: color-mix(in srgb, var(--sheet) 70%, transparent);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start; transition: border-color .15s, background .15s;
}
.uploadbox.drag { border-color: var(--route); background: var(--route-soft); }
.uploadbox strong { font-size: 18px; font-weight: 600; }
.uploadbox .ok { font-family: var(--label); color: var(--ink); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--ink-3); background: transparent; border-radius: 3px; padding: 8px 12px;
  font: inherit; font-family: var(--label); font-size: 14.5px; font-weight: 500; cursor: pointer; color: var(--ink); text-align: left;
  transition: border-color .15s, background .15s, color .15s;
}
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:disabled { opacity: .5; cursor: default; }
.or { display: flex; align-items: center; gap: 12px; font-family: var(--label); font-size: 13.5px; color: var(--ink-3); margin: 22px 0 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--paper-4); }
.start-cta { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---------- Kartenkopf: Kurzprofil (Stufe 0) ---------- */
.hero-card {
  background: var(--sheet); border: 1px solid var(--ink); border-top-width: 3px; border-radius: 2px; padding: 30px 34px 32px; position: relative;
  box-shadow: 0 1px 0 var(--paper-4), 0 18px 40px -24px color-mix(in srgb, var(--shadow) 35%, transparent);
}
.hero-card .k { font-family: var(--label); color: var(--contour); font-size: 14.5px; font-weight: 600; margin-bottom: 18px; }
.hero-card h3 { font-size: 30px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 22px; }
.hero-card .ziel-kombi { color: var(--ink-2); font-size: 17px; margin-top: -10px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stat b { display: block; font-size: clamp(46px, 5vw, 66px); line-height: .95; font-weight: 800; color: var(--ink); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat b::after { content: ""; display: block; width: 30px; height: 3px; background: var(--route); margin-top: 10px; }
.stat span { display: block; font-family: var(--label); font-size: 15.5px; font-weight: 600; color: var(--ink); margin-top: 10px; line-height: 1.3; }
.stat .beleg { display: block; font-family: var(--label); font-size: 13.5px; color: var(--ink-3); margin-top: 4px; font-weight: 400; }
.belege { list-style: none; padding: 0; margin-top: 26px; display: grid; gap: 7px; }
.belege li { position: relative; padding-left: 22px; font-size: 15.5px; color: var(--ink-2); }
.belege li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 2px; background: var(--contour); }
.belege li.ctx::before { background: var(--water); }
.check-k { font-family: var(--label); font-size: 14.5px; font-weight: 600; color: var(--contour); margin: 34px 0 -12px; }
.erkennt { margin-top: 30px; }
.korrektur { margin-top: 8px; display: grid; gap: 10px; max-width: 760px; }
.korrektur label { font-weight: 600; }
.korrektur textarea.ftext { resize: vertical; max-width: none; font-size: 16px; line-height: 1.45; border: 1.5px solid var(--paper-4); border-radius: 3px; background: var(--sheet); padding: 12px 14px; }
.korrektur textarea.ftext:focus { border-color: var(--route); }

/* Schreibmaschine auf der Startseite */
.rotator { display: flex; align-items: center; gap: 2px; margin: 0 0 26px; font-size: 22px; font-weight: 500; min-height: 1.6em; color: var(--ink); letter-spacing: -.01em; }
.rotator .line { white-space: pre-wrap; }
.rotator .cursor { display: inline-block; width: 2px; height: 1.15em; background: var(--route); margin-left: 3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ---------- Karten (Sheets) ---------- */
.card { background: var(--sheet); border: 1px solid var(--paper-4); border-radius: 3px; padding: 30px; }
.card.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card .k { font-family: var(--label); font-size: 14.5px; font-weight: 600; color: var(--contour); margin-bottom: 12px; }
.card.dark .k { color: var(--h3); }
.card h3 { font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.card p { color: var(--ink-2); }
.card.dark p { color: color-mix(in srgb, var(--paper) 78%, transparent); }

/* ---------- Route der Stationen (Kurzprofil) ---------- */
.timeline { position: relative; margin: 40px 0 26px; padding: 0 8px; }
.timeline .rail { position: absolute; left: 8px; right: 8px; top: 40px; height: 2px; background: repeating-linear-gradient(90deg, var(--route) 0 10px, transparent 10px 16px); }
.timeline ol { list-style: none; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; position: relative; }
.timeline li { text-align: center; }
.timeline .when { font-family: var(--label); color: var(--ink); font-weight: 600; font-size: 14.5px; }
.timeline .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--paper); margin: 10px auto; border: 2.5px solid var(--ink); box-shadow: 0 0 0 4px var(--paper); }
.timeline li:last-child .dot { background: var(--route); border-color: var(--route); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5.5px var(--route); }
.timeline .what { font-size: 14.5px; color: var(--ink-2); line-height: 1.35; }
.callout { background: var(--paper-2); border-left: 3px solid var(--contour); border-radius: 0 3px 3px 0; padding: 16px 20px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; max-width: 900px; }
.callout .k { font-family: var(--label); font-size: 14.5px; font-weight: 600; color: var(--contour); padding-top: 3px; white-space: nowrap; }
.callout p { font-weight: 600; }
.callout + .callout { margin-top: 12px; }
.callout.warn { background: var(--warn-soft); border-left-color: var(--warn); }
.callout.warn .k { color: var(--warn); }
.callout.warn ul { margin-left: 18px; font-weight: 500; }

/* ---------- Blatt 3: Signature Strengths (Höhenprofil) ---------- */
/* Kernthese (Blatt 1): Belege als Chips unter dem Titel, dann die Konsequenz,
   dann – nur wenn nötig – der ehrliche Hinweis, ob der CV das Ziel trägt.
   Gewässerblau = noch unvermessen, Ocker = nur unter Bedingung. */
.kern { margin: -4px 0 26px; max-width: 900px; }
.kchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.kchip { font-family: var(--label); font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 5px 11px; border: 1px solid var(--paper-4); background: color-mix(in srgb, var(--sheet) 70%, transparent); border-radius: 2px; white-space: nowrap; }
.kchip::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--h2); margin-right: 8px; vertical-align: 1px; }
.kwhy { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; border-left: 3px solid var(--contour); padding: 4px 0 4px 16px; }
.kwhy .k { font-family: var(--label); font-size: 14.5px; font-weight: 600; color: var(--contour); white-space: nowrap; }
.kwhy p { font-size: 17px; font-weight: 600; }
.kfit { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-top: 12px; font-size: 15px; color: var(--ink-2); padding: 10px 14px; border-radius: 2px; }
.kfit .k { font-family: var(--label); font-size: 14px; font-weight: 600; white-space: nowrap; }
.kfit.offen { background: var(--water-soft); border-left: 3px solid var(--water); } .kfit.offen .k { color: var(--water); }
.kfit.teilweise { background: var(--warn-soft); border-left: 3px solid var(--warn); } .kfit.teilweise .k { color: var(--warn); }
.refs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 22px; font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; }
.refs .k { font-family: var(--label); font-size: 14.5px; font-weight: 600; color: var(--contour); }
/* ---------- Blatt 5: Was noch fehlt – die Gap-Analyse als Kartenfelder ----------
   Jede Lücke ist ein Feld im Raster – kein Ort auf einer Karte: für eine Lücke
   gibt es keine Koordinate, also wird auch keine erfunden. Das Feldzeichen
   links sagt die Sorte: Evidence Gap = Höhenlinien im Gewässerblau, das
   Gelände ist da, nur nicht vermessen; Skill Gap = schraffiertes Leerfeld,
   Neuland. Rechts steht, was das Feld füllen würde. */
/* Die Felder liegen als Blattschnitt nebeneinander: zwei Kartenblätter je
   Reihe, jedes mit Feldzeichen, Befund und den fehlenden Belegen. */
/* Spalten statt Raster: die Felder sind verschieden hoch, ein Raster würde
   jede Reihe auf das höchste Feld aufziehen und halbe Blätter leer lassen. */
/* Blatt 5, Blattübersicht: vermessene Felder (Kompetenzen) und weiße Flecken
   (Lücken) in einem Register. Ein Feld trägt nur Thema und leere Kästchen
   (= fehlende Belege); der Befund steht einmal, im Beleg-Kasten darunter. */
.wf { margin: 6px 0 22px; }
.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.wft { position: relative; min-height: 118px; padding: 10px 12px 11px; border: 1px solid var(--paper-4); border-radius: 2px; background: var(--sheet); display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; overflow: hidden; min-width: 0; }
.wft .th { font-family: var(--label); font-size: calc(14.5px * var(--fs, 1)); line-height: 1.22; font-weight: 600; letter-spacing: .01em; overflow-wrap: normal; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* vermessen: Höhenlinien aus dem Blatt-Relief, je Feld ein anderer Ausschnitt; stumm, nicht klickbar */
.wft.map { border-color: var(--paper-3); background: var(--sheet) url("contours.svg") no-repeat var(--ox, 0%) var(--oy, 0%) / 420px auto; }
.wft.map::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--sheet) 34%, color-mix(in srgb, var(--sheet) 55%, transparent) 70%, color-mix(in srgb, var(--sheet) 20%, transparent)); }
.wft.map .th { position: relative; color: var(--ink-3); font-weight: 500; }
/* weiße Flecken: klickbar, gepunktet (Gelände da) oder schraffiert (Neuland) */
.wft.ev, .wft.sk { cursor: pointer; border-style: dashed; transition: border-color .2s, box-shadow .2s, translate .2s; }
.wft.ev { border-color: var(--water); background: repeating-radial-gradient(circle at 28% 64%, transparent 0 3.5px, color-mix(in srgb, var(--water) 22%, transparent) 3.5px 4.8px), var(--water-soft); }
.wft.sk { border-color: var(--paper-4); background: repeating-linear-gradient(45deg, transparent 0 4px, var(--paper-3) 4px 5.4px), var(--sheet); }
.wft.ev .th, .wft.sk .th { position: relative; padding: 3px 6px 3px 0; }
.wft.ev .th { color: var(--ink); } .wft.sk .th { color: var(--ink); }
.wft.ev .th::before, .wft.sk .th::before { content: ""; position: absolute; inset: 0 -4px 0 -6px; z-index: -1; background: var(--sheet); border-radius: 2px; opacity: .92; }
.wft.ev .th, .wft.sk .th { z-index: 0; }
.wft.ev:hover, .wft.sk:hover { translate: 0 -2px; box-shadow: 0 4px 14px color-mix(in srgb, var(--shadow) 9%, transparent); }
.wft.on { border-style: solid; border-color: var(--route); box-shadow: 0 0 0 2px var(--route-soft); }
.wf-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-family: var(--label); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.wf-top .nr { color: var(--ink-3); white-space: nowrap; flex: none; } .wft.ev .wf-top .art { color: var(--water); } .wft.sk .wf-top .art { color: var(--contour); }
.wft.on .wf-top .nr { color: var(--route); }
.wft .bel { display: flex; gap: 4px; margin-top: 2px; position: relative; }
.wft .bel i { width: 9px; height: 9px; border: 1.5px solid var(--contour-soft); background: var(--sheet); }
.wft.ev .bel i { border-color: var(--water); }
.wf-beleg { border-left-color: var(--route); }
.wf-beleg .k.ev { color: var(--water); } .wf-beleg .k.sk { color: var(--contour); }
.wf-belege { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--paper-3); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.wf-belege .k { font-family: var(--label); font-size: 13.5px; font-weight: 600; color: var(--contour); }
.wf-belege ul { list-style: none; margin: 0; padding: 0; flex: 1 0 100%; display: grid; gap: 3px; font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.wf-belege li { position: relative; padding-left: 14px; overflow-wrap: anywhere; }
.wf-belege li::before { content: ""; position: absolute; left: 0; top: .42em; width: 7px; height: 7px; border: 1.5px solid var(--contour-soft); }
.footnote { font-weight: 600; margin-top: 8px; }
/* Unvermessen: was der Lebenslauf nicht zeigt, steht im Gewässerblau */
.missing { background: var(--water-soft); border-left: 3px solid var(--water); border-radius: 0 3px 3px 0; padding: 18px 22px; max-width: 900px; overflow-wrap: anywhere; }
.missing .k { font-family: var(--label); font-size: 14.5px; font-weight: 600; color: var(--water); margin-bottom: 8px; }
.missing ul { margin: 0 0 0 18px; font-weight: 600; }
.missing li + li { margin-top: 4px; }

/* ---------- Blatt 1: Was ATLAS erkennt – Ortssignaturen ---------- */
/* ---------- Blatt 2: Fingerprint als Höhenlinien ---------- */
/* Standort (Blatt 2, Beistellkarte): Career Position aus Stufe 0 neben dem
   Selbstbild aus Frage 4, ein Satz Vergleich (Ocker-Braun = höher gelesen,
   Gewässerblau = noch nicht belegt), dann die Begründung der Einordnung. */
.standort { margin: 2px 0 16px; max-width: 900px; }
.standort .srow { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.standort .sp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.standort .sp .k { font-family: var(--label); font-size: 13.5px; font-weight: 600; color: var(--contour); }
.standort .sp b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.standort .sp .d { font-family: var(--label); font-size: 13.5px; color: var(--ink-3); }
.standort .sv { flex: 1 1 100%; font-weight: 600; font-size: 15px; padding: 6px 12px; border-left: 3px solid var(--contour); background: var(--paper-2); }
.standort .sv.up { border-left-color: var(--h2); background: color-mix(in srgb, var(--h3) 16%, transparent); }
.standort .sv.open { border-left-color: var(--water); background: var(--water-soft); }
.standort .sb { font-size: 14.5px; color: var(--ink-2); margin-top: 8px; max-width: 80ch; }
/* Beleg-Zeile in der Beistellkarte: Evidenz der gewählten Kompetenz oder der Satz zur Lücke. */
.fp-beleg { background: var(--sheet); border: 1px solid var(--paper-4); border-left: 3px solid var(--route); padding: 10px 14px; margin-top: 14px; }
.fp-beleg .k { font-family: var(--label); font-size: 13.5px; font-weight: 600; color: var(--contour); margin-bottom: 2px; }
.fp-beleg .k.gap { color: var(--water); }
.fp-beleg h4 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 2px; }
.fp-beleg p { color: var(--ink-2); font-size: 15px; }
.pick { cursor: pointer; text-decoration: underline dotted var(--contour-soft); text-underline-offset: 3px; }
.pick:hover, .pick:focus-visible { color: var(--ink); text-decoration-color: var(--route); }
.read .k.open + p .pick { color: var(--water); }
.rlabel.pickable { cursor: pointer; pointer-events: all; }
.rlabel.pickable.on .t { color: var(--route); }
.fp { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
.radar { width: 100%; max-width: 720px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.radar .grid { fill: none; stroke: var(--contour); stroke-width: 1; opacity: .55; }
.radar .axis { stroke: var(--paper-4); stroke-width: 1; }
.radar .shape { fill: color-mix(in srgb, var(--h3) 38%, transparent); stroke: var(--h2); stroke-width: 2.5; stroke-linejoin: round; }
.radar .pt { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.radar .rlab { overflow: visible; }
.rlabel { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px; font-size: calc(17px * var(--fs, 1)); font-weight: 700; line-height: 1.15; color: var(--ink); overflow-wrap: normal; hyphens: manual; letter-spacing: -.01em; }
.rlabel.l { align-items: flex-start; text-align: left; } .rlabel.r { align-items: flex-end; text-align: right; } .rlabel.c { align-items: center; text-align: center; }
.rlabel.t { justify-content: flex-end; } .rlabel.b { justify-content: flex-start; } .rlabel.m { justify-content: center; }
.rlabel .dots i { width: 9px; height: 9px; }
.legend { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legend li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; font-weight: 600; font-size: 15px; }
.legend .n { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-3); }
.dots i.on { background: var(--h2); }
/* Zeichenerklärung zum Netz: kein Kasten, sondern der Fuß des Blatts (wie die
   Opportunity Map, Owner 2026-09-11). Eine Höhenlinie trennt sie vom Netz, der
   Titel steht als Randnotiz in der Kartenschrift, die vier Lesarten stehen als
   Spalten einer Legende – jede mit ihrem Zeichen: gefülltes Quadrat = belegt,
   offenes Quadrat = unvermessen, dasselbe Zeichen wie bei den fehlenden
   Belegen auf Blatt 5. */
.fp-legende { border-top: 1px solid var(--paper-3); margin-top: 24px; padding-top: 15px; }   /* Papierton, nicht das Höhenlinien-Braun: die braune Linie trennt Blätter (.rs + .rs), diese hier nur Netz und Erklärung */
.fp-legende > h3 { font-family: var(--label); font-size: 14.5px; font-weight: 600; color: var(--contour); margin-bottom: 13px; }
/* Der Beleg zur gewählten Kompetenz schließt die Legende ab – dasselbe Band wie
   der Vergleichssatz im Kopf des Blatts, nur im Standort-Rot statt im Braun. */
.fp-legende .fp-beleg { background: var(--paper-2); border: 0; border-left: 3px solid var(--route); margin-top: 20px; padding: 11px 16px; }
.reads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.read { padding: 0 18px; border-left: 1px solid var(--paper-3); }
.read:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.read .k { display: flex; align-items: center; gap: 7px; font-family: var(--label); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 7px; }
.read .k::before { content: ""; width: 9px; height: 9px; flex: 0 0 9px; background: currentColor; }
.read .k.open::before { background: none; border: 1.5px solid currentColor; }
.read .k.strong { color: var(--h1); } .read .k.diff { color: var(--contour); } .read .k.grow { color: var(--warn); } .read .k.open { color: var(--water); }
.read p { color: var(--ink-2); font-size: 15px; line-height: 1.45; }

/* ---------- Kartenraster ---------- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 22px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px 0 22px; }
.ucard { background: var(--sheet); border: 1px solid var(--paper-4); border-radius: 3px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.ucard .n { font-family: var(--label); font-size: 14.5px; font-weight: 600; color: var(--contour); }
.ucard .claim { font-size: 16px; line-height: 1.5; }
.ucard .claim b { font-weight: 700; }
.ucard .claim .cond { font-size: inherit; font-weight: 400; color: var(--warn); }
.ucard h4 { font-size: 18px; line-height: 1.2; }
.ucard .b { font-weight: 600; }
.ucard .m { color: var(--ink-2); font-size: 15px; }
.ucard .diff { display: grid; gap: 8px; }
.ucard .diff .v { background: var(--paper-2); border-radius: 2px; padding: 10px 12px; font-size: 15px; }
.ucard .diff .v.before { color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent); }
.ucard .diff .v.after { font-weight: 600; border-left: 3px solid var(--route); }
.ucard .cond { font-family: var(--label); font-size: 13.5px; color: var(--warn); font-weight: 600; }   /* Beleg-Zeile der CV-Updates; die Bedingung im Satz einer Unter-Wert-Karte färbt .claim .cond */

/* ---------- Zielrollen ---------- */
.roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0 22px; }
.role { background: var(--sheet); border: 1px solid var(--paper-4); border-radius: 3px; padding: 22px 24px; }
.role.strong { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--route); }
.role .h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.role h4 { font-size: 19px; line-height: 1.2; min-width: 0; flex: 1; font-weight: 700; letter-spacing: -.01em; }
.fit { display: inline-flex; align-items: center; gap: 8px; font-family: var(--label); font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.fit.neutral { color: var(--ink-3); }
.role p { color: var(--ink-2); font-size: 15px; }
.role ul { margin: 8px 0 0 18px; color: var(--ink-2); font-size: 15px; }
.role .clar { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--warn); }
.role .hint { margin-top: 8px; font-size: 14px; color: var(--ink-2); border-top: 1px dashed var(--paper-4); padding-top: 8px; }
.groupk { font-family: var(--label); font-size: 14.5px; font-weight: 600; color: var(--contour); margin: 18px 0 8px; }

/* ---------- Vertiefung (Stufe 3) ---------- */
.ledger { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; margin: 8px 0 22px; }
.lcard { background: var(--sheet); border: 1px solid var(--paper-4); border-radius: 3px; padding: 20px; }
.lcard h4 { margin-bottom: 6px; font-size: 18px; }
.lcard .b { color: var(--ink-3); font-size: 15px; }
.lcard .a { font-weight: 600; margin-top: 6px; border-left: 3px solid var(--route); padding-left: 10px; }
.lcard.open { background: var(--warn-soft); border-color: transparent; border-left: 3px solid var(--warn); }
.lcard.open ul { margin-left: 18px; font-size: 15px; }
.roadmap { list-style: none; padding: 0; display: grid; gap: 0; margin: 8px 0 22px; border-top: 1px solid var(--paper-4); }
.rstep { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--paper-4); }
.rstep .p { font-family: var(--label); font-weight: 600; color: var(--contour); font-size: 14.5px; padding-top: 2px; }
.rstep b { display: block; margin-bottom: 4px; font-weight: 600; font-size: 17px; }
.rstep span { color: var(--ink-2); font-size: 15px; }

/* Überlauf-Sicherheit */
.fp > *, .ledger > *, .grid2 > *, .grid3 > *, .roles > *, .options > *, .start > *, .wft > *, .read > *, .callout > * { min-width: 0; }
.card, .ucard, .role, .lcard, .rstep, .opt, .hero-card, .callout, .errbox, .legend li, .wft, .step, .action-card { overflow-wrap: anywhere; }
h1.display, h2.title, .lead { overflow-wrap: anywhere; }

/* ---------- Warte-Screens: ein Schirm, die Karte in voller Größe ----------
   Bis 2026-09-11 lief der Warte-Screen um 350–500 px über den Schirm: Kicker,
   Titel, Karte, eine 200 px hohe Zitattafel und eine Statusliste mit vier
   Zeilen, die dasselbe sagte wie die Karte darunter und die Kopfleiste
   darüber. Jetzt trägt der Screen genau drei Dinge untereinander – Kopfzeile,
   Karte (unverändert groß), Zitatstreifen – und passt damit auf einen Schirm.
   Ist das Fenster flach, fällt der Streifen weg: die Karte ist der Inhalt,
   das Zitat ist die Zugabe. */
.stage:has(> .warten) { padding-top: calc(var(--head-h) + 16px); padding-bottom: 28px; }
.qloader { display: flex; flex-direction: column; gap: 16px; margin: 0; min-width: 0; }
.qtitle { font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.qhint { margin-top: 5px; font-size: 14.5px; color: var(--ink-3); }
/* Die Route (siehe app.js routeMap): Gebirgskarte aus Höhenlinien, die Route
   der Analyse in Rot, der Punkt wandert, die Kamera folgt ihm über die Karte */
/* Die Karte liegt nicht in einem Kasten, sondern läuft über die volle Breite
   des Fensters und verläuft an den Rändern ins Papier – das Blatt ist die Karte. */
.routemap { position: relative; height: clamp(300px, 54vh, 600px); overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* Solange die Karte steht, hat das Relief des Blatts (body::before) Pause – zwei Höhenlinien-Sätze übereinander wären Brei. */
body:has(.routemap)::before { opacity: 0; }
.routemap .world { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.routemap svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.routemap svg.terrain { transform: translateZ(0); }
.routemap .ct { fill: none; stroke: var(--contour); opacity: .42; stroke-width: .8px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.routemap .ct.idx { opacity: .7; stroke-width: 1.3px; }
.routemap .ahead { fill: none; stroke: var(--ink-3); stroke-width: 3; stroke-dasharray: 1 11; stroke-linecap: round; opacity: .75; }
.routemap .done { fill: none; stroke: var(--route); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.routemap .camp { fill: var(--sheet); stroke: var(--ink-2); stroke-width: 3; }
.routemap .camp.done { fill: var(--route); stroke: var(--sheet); }
.routemap .head .dot { fill: var(--route); stroke: var(--sheet); stroke-width: 4; }
.routemap .head .halo { fill: none; stroke: var(--route); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: route-halo 2.4s ease-out infinite; }
@keyframes route-halo { 0% { scale: .4; opacity: .8; } 100% { scale: 1.6; opacity: 0; } }
.routemap .head .x { display: none; fill: none; stroke: var(--route); stroke-width: 5; stroke-linecap: round; }
.routemap.err .head .halo { animation: none; opacity: 0; } .routemap.err .head .x { display: block; } .routemap.err .head .dot { fill: var(--sheet); stroke: var(--route); }
.routemap .lbl { position: absolute; font-family: var(--label); font-size: 12px; line-height: 1; white-space: nowrap; pointer-events: none; color: var(--ink-2); transform: translate(-50%, -50%); }
.routemap .lbl.camp { font-weight: 600; letter-spacing: .03em; }
.routemap .lbl.peak { color: var(--contour); font-size: 11.5px; }
.routemap .qsec { position: absolute; left: max(28px, calc(50vw - var(--maxw) / 2 + 28px)); top: 16%; font-family: var(--label); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--ink-2); background: color-mix(in srgb, var(--sheet) 88%, transparent); padding: 3px 8px; }
.routemap .mapscale { position: absolute; right: max(28px, calc(50vw - var(--maxw) / 2 + 28px)); bottom: 15%; display: flex; align-items: flex-end; gap: 6px; font-family: var(--label); font-size: 11.5px; line-height: 1; color: var(--ink-3); background: color-mix(in srgb, var(--sheet) 88%, transparent); padding: 3px 6px; }
.routemap .mapscale i { display: block; width: 48px; height: 5px; border: 1px solid var(--ink-3); border-top: none; }
.qstrip { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.qcard { position: relative; will-change: transform, opacity; }
.qcard.in { animation: qin .55s cubic-bezier(.2,.7,.2,1) both; }
.qcard.out { animation: qout .42s cubic-bezier(.6,0,.8,.4) both; }
@keyframes qin { from { opacity: 0; translate: 0 10px; filter: blur(3px); } to { opacity: 1; translate: 0 0; filter: none; } }
@keyframes qout { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -8px; filter: blur(3px); } }
/* Das Zitat: eine Zeile Text, die Zahl steht im Satz statt über ihm */
.qcard .qtext { font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.qcard .qnum { color: var(--route); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.qcard .qby { margin-top: 5px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-family: var(--label); }
.qcard .qby b { font-size: 14px; font-weight: 600; color: var(--contour); }
.qcard .qby span { font-size: 13.5px; color: var(--ink-3); }
.qbar { height: 2px; background: var(--paper-4); overflow: hidden; max-width: 420px; }
.qbar i { display: block; height: 100%; width: 0; background: var(--ink); }
/* Flaches Fenster: das Zitat geht, die Karte bleibt und rückt auf 52vh
   zusammen – so passt der Screen bis hinunter zu ~560 px Fensterhöhe.
   Oberhalb von 660 px bleibt das Zitat stehen (gemessen, nicht geraten:
   scripts/shoot_wait.mjs meldet jede Fensterhöhe, die überläuft). */
@media (max-height: 660px) { .qstrip, .qhint { display: none; } .routemap { height: clamp(240px, 52vh, 600px); } }
@media (prefers-reduced-motion: reduce) {
  .routemap .head .halo { animation: none; opacity: .5; }
  .qcard.in, .qcard.out { animation-duration: .01s; filter: none; }
}

/* ---------- Fehler / Zugang ---------- */
.errbox { background: var(--sheet); border: 1.5px solid var(--route); border-radius: 3px; padding: 18px 22px; color: var(--ink); max-width: 760px; }
.errbox details { margin-top: 10px; }
.errbox summary { font-family: var(--label); cursor: pointer; }
.errbox pre { white-space: pre-wrap; font-size: 12px; max-height: 260px; overflow: auto; background: var(--paper-2); padding: 10px; border-radius: 2px; }
.gate { max-width: 520px; }
.gate input { width: 100%; font: inherit; font-size: 18px; padding: 12px 2px; border: 0; border-bottom: 2px solid var(--ink-3); background: transparent; border-radius: 0; margin: 12px 0 20px; color: var(--ink); }
.gate input:focus { outline: none; border-color: var(--route); }

@media (max-width: 860px) {
  .top { padding: 0 16px; gap: 12px; }
  .mark .sub { display: none; }
  .progress .seg span { display: none; }
  .live { min-width: 0; }
  .stage { padding-left: 16px; padding-right: 16px; }
  .flownav button.primary { width: 100%; }
  .flownav { margin-top: 32px; }
  .start, .fp, .ledger { grid-template-columns: 1fr; }
  .start { gap: 28px; }
  .start > div:first-child { padding-top: 0; }
  .hero-art { max-width: 420px; margin: 0 auto; }
  .options, .grid2, .grid3, .roles { grid-template-columns: 1fr; }
  .options.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline { margin: 20px 0; padding: 0; }
  .timeline ol { display: flex; flex-direction: column; gap: 14px; }
  .timeline .rail { display: none; }
  .timeline li { text-align: left; display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; align-items: start; }
  .timeline .dot { grid-column: 1; grid-row: 1 / span 2; margin: 2px 0 0; width: 14px; height: 14px; box-shadow: none; }
  .timeline li:last-child .dot { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--route); }
  .timeline .when, .timeline .what { grid-column: 2; }
  .callout { grid-template-columns: 1fr; gap: 6px; }
  .callout .k { white-space: normal; }
  .role .h { flex-direction: column; align-items: flex-start; }
  .fit { white-space: normal; }
  .hero-card { padding: 24px 22px; }
  .hero-card h3 { font-size: 22px; }
  .stat-row { grid-template-columns: 1fr; gap: 22px; }
  .stat b { font-size: 46px; }
  .stat b::after { margin-top: 6px; }
  .qloader { gap: 12px; }
  .routemap { height: clamp(240px, 40vh, 360px); }
  .routemap .qsec { font-size: 11.5px; left: 16px; }
  .routemap .mapscale { display: none; }
  .stage:has(> .warten) { padding-bottom: 20px; justify-content: flex-start; }   /* auf dem Telefon oben anfangen: zentriert stünden 200 px Luft über dem Titel */
  .qhint { margin-top: 3px; font-size: 14px; }
  .qstrip { gap: 9px; }
  .row { grid-template-columns: 1fr; gap: 4px; }
  .rstep { grid-template-columns: 1fr; }
  .reads { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .read:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .rlabel { font-size: calc(22px * var(--fs, 1)); }
}
@media (max-width: 720px) {
  .wf-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
  .reads { grid-template-columns: 1fr; row-gap: 16px; }
  .read { padding: 0; border-left: 0; }
  .wft { min-height: 112px; padding: 8px 9px 9px; } .wft .th { font-size: calc(13px * var(--fs, 1)); -webkit-line-clamp: 4; } .wf-top { font-size: 11.5px; }
  .wf-top .art { display: none; }   /* schmal: die Sorte steht schon im Muster (gepunktet/schraffiert), das Wort passt nicht ins Feld */
}

/* ---- Bewegung auf den Blättern (Reihenfolge = Leserichtung) ------------------
   Jedes Blatt zeichnet sich in der Reihenfolge Kopf → Beleg → Fazit; nur
   Eintritts-Animationen, keine Dauerschleifen außer dem Atmen der
   Fingerprint-Fläche und dem Schweben der Ortssignaturen. `translate`/`scale`
   statt `transform`, damit nichts mit bestehenden Transforms kollidiert;
   `backwards` hält den Startzustand bis zum Delay. Re-Render (.no-enter) und
   reduced-motion springen sofort in den Endzustand. */
.screen.anim:not(.no-enter) { animation: enter-soft .4s ease both; }
@keyframes enter-soft { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; translate: 0 12px; } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; scale: .5; } }
@keyframes slide-l { from { opacity: 0; translate: -18px 0; } }
@keyframes slide-r { from { opacity: 0; translate: 18px 0; } }

.anim > .kicker, .anim > .title, .anim > .lead, .anim > .rs-head > .kicker, .anim > .rs-head > .title, .anim > .rs-head > .lead { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards; }
.anim > .title, .anim > .rs-head > .title { animation-delay: .07s; }
.anim > .lead, .anim > .rs-head > .lead { animation-delay: .14s; }

/* Blatt 4 Career Capital: Eisberg – siehe Block am Dateiende */

/* Route der Stationen: Linie zeichnet sich, Stationen folgen, die letzte pulst einmal */
.s-timeline .rail { transform-origin: left center; animation: draw-x cubic-bezier(.45,.05,.55,.95) backwards .35s; animation-duration: calc(var(--n, 4) * .16s); }
.s-timeline li { --d: calc(.4s + var(--i, 0) * .16s); }
.s-timeline .dot { animation: pop .5s cubic-bezier(.2,.8,.3,1.35) backwards var(--d); }
.s-timeline .when { animation: rise .5s ease backwards calc(var(--d) + .06s); }
.s-timeline .what { animation: rise .5s ease backwards calc(var(--d) + .14s); }
.s-timeline li:last-child .dot { position: relative; }
.s-timeline li:last-child .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; animation: ring 1.3s ease-out both calc(var(--d) + .45s); }
@keyframes ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--route) 60%, transparent); } to { box-shadow: 0 0 0 22px color-mix(in srgb, var(--route) 0%, transparent); } }

/* Blatt 5 Was noch fehlt: Feld für Feld – Feldzeichen und Befund, dann die fehlenden Belege daneben, zuletzt was damit passiert */
/* Register: erst zeichnet sich das vermessene Gelände, dann tauchen die weißen Flecken auf, zuletzt der Befund */
.s-luecken .wft.map { animation: fade .5s ease backwards; animation-delay: calc(.15s + var(--i, 0) * .05s); }
.s-luecken .wft.ev, .s-luecken .wft.sk { animation: pop .45s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.7s + var(--i, 0) * .07s); }
.s-luecken .wf-beleg { animation: rise .5s ease backwards 1.5s; }
.s-luecken .callout { animation: rise .5s ease backwards 1.8s; }
/* Blatt 4: die Referenzprojekte stehen jetzt hier, über dem Massiv */
.s-unterwert .refs { animation: fade .5s ease backwards .15s; }

/* Blatt 2 Fingerprint: Höhenlinien zeichnen sich von innen nach außen, die Fläche entfaltet sich, Punkte setzen sich, Legende füllt ihre Stufen */
.s-fingerprint .radar .grid { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .9s cubic-bezier(.4,0,.2,1) backwards; animation-delay: calc(.15s + var(--i, 0) * .12s); animation-fill-mode: both; }
.s-fingerprint .radar .axis { animation: fade .6s ease backwards .7s; }
.s-fingerprint .radar .shape { transform-box: view-box; transform-origin: 50% 50%; animation: radar-shape .9s cubic-bezier(.2,.8,.2,1.05) backwards .9s, breathe 4.5s ease-in-out 1.9s infinite alternate; }
@keyframes radar-shape { from { opacity: 0; scale: .2; } }
@keyframes breathe { from { fill: color-mix(in srgb, var(--h3) 30%, transparent); } to { fill: color-mix(in srgb, var(--h3) 50%, transparent); } }
.s-fingerprint .radar .pt { transform-box: fill-box; transform-origin: center; animation: pop .45s cubic-bezier(.2,.8,.3,1.35) backwards; animation-delay: calc(1.4s + var(--i, 0) * .07s); }
.s-fingerprint .radar .rlab { animation: fade .5s ease backwards; animation-delay: calc(1.5s + var(--i, 0) * .07s); }
.s-fingerprint .rlabel .dots i.on { animation: pop .3s ease-out backwards; animation-delay: calc(1.8s + var(--i, 0) * .07s + var(--j, 0) * .05s); }
.s-fingerprint .aside { animation: rise .7s cubic-bezier(.2,.7,.2,1) backwards 1.7s; }
.s-fingerprint .read { animation: rise .5s ease backwards; animation-delay: calc(2s + var(--i, 0) * .1s); }


.screen.no-enter.anim *, .screen.no-enter.anim *::after { animation-duration: 0s !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  .screen.anim, .screen.anim *, .screen.anim *::after, .hero-art * { animation: none !important; }
  .hero-art .ct, .hero-art .route { stroke-dashoffset: 0; }
}

/* ---- Blatt 7: Opportunity Map – ein Achsenkreuz mit Standort, direkt auf dem
   Papier (Owner, 2026-09-11: kein Kasten – das Diagramm sitzt wie Netz und
   Zusammenfluss ohne Rahmen im Blatt; nur das Gradnetz bleibt, leise) ---- */
.omap-wrap { overflow-x: auto; margin: 6px 0 18px; padding: 4px 0; }
/* Rahmen um die Zeichenfläche: Legende, Achsentitel außen (oben/unten waagerecht, links/rechts senkrecht) */
.omap-frame { display: grid; grid-template-columns: 22px minmax(680px, 1fr) 22px; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 8px; align-items: center; }
.omap-legend { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--label); font-size: 13.5px; line-height: 1.3; color: var(--ink-2); }
.omap-legend i { width: 12px; height: 12px; border-radius: 50%; background: var(--route); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--route); flex: 0 0 12px; margin: 0 4px 0 3px; }
.omap-legend b { color: var(--route); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.omap-frame .axl { font-family: var(--label); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; justify-self: center; }
.omap-frame .axl.t { grid-column: 2; grid-row: 1; }
.omap-frame .axl.b { grid-column: 2; grid-row: 3; }
.omap-frame .axl.l { grid-column: 1; grid-row: 2; writing-mode: vertical-rl; rotate: 180deg; }
.omap-frame .axl.r { grid-column: 3; grid-row: 2; writing-mode: vertical-rl; }
@media (max-width: 860px) { .omap-frame .axl.t, .omap-frame .axl.b { justify-self: start; } }   /* schmal: die Fläche rollt seitlich, die Titel bleiben am sichtbaren Rand */
.omap {
  grid-column: 2; grid-row: 2; position: relative; height: 560px;
  background-image: linear-gradient(color-mix(in srgb, var(--paper-4) 50%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--paper-4) 50%, transparent) 1px, transparent 1px);   /* paper-4, halb – leiser als das Blatt selbst */
  background-size: 12.5% 12.5%; background-position: -1px -1px;
}
/* Gradnetz nur innen: die äußerste Linie wäre sonst wieder ein Rahmen */
.omap::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1.5px var(--paper); }
.omap .ax { position: absolute; background: var(--ink); }
.omap .ax.x { left: 0; right: 0; top: 50%; height: 1.5px; }
.omap .ax.y { top: 0; bottom: 0; left: 50%; width: 1.5px; }
/* Heute: Anker ohne Ausdehnung im Ursprung, Punkt zentriert, Wort rechts daneben auf der Achse */
.omap .heute { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.omap .heute i { position: absolute; left: 0; top: 0; translate: -50% -50%; width: 18px; height: 18px; border-radius: 50%; background: var(--route); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--route); }
.omap .heute b { position: absolute; left: 16px; top: 0; translate: 0 -50%; font-family: var(--label); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--route); white-space: nowrap; background: var(--paper); padding: 0 6px; }
.omap .pin { position: absolute; translate: -50% -50%; width: 0; height: 0; display: grid; justify-items: center; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; outline: none; z-index: 1; }
.omap .pin.on, .omap .pin:hover, .omap .pin:focus-visible { z-index: 4; }   /* gewählter Pin auch über dem Standort */
.omap .pin .dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2.5px solid var(--paper); box-shadow: 0 0 0 1.5px var(--ink); translate: 0 -50%; transition: scale .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .25s; }
.omap .pin.strong .dot { background: var(--h2); box-shadow: 0 0 0 1.5px var(--h2); }
.omap .pin .name { position: absolute; bottom: 12px; width: 176px; text-wrap: balance; text-align: center; font-size: 13.5px; font-weight: 700; line-height: 1.2; color: var(--ink); letter-spacing: -.01em; text-shadow: 0 0 6px var(--paper), 0 0 2px var(--paper); }
.omap .pin .pfit { position: absolute; top: 12px; font-family: var(--label); font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 2px; background: var(--paper); color: var(--ink-2); border: 1px solid var(--paper-4); white-space: nowrap; transition: background .25s, color .25s, border-color .25s; }
.omap .pin .pfit.hi { color: var(--ink); border-color: var(--ink-3); }
.omap .pin.flip .name { bottom: auto; top: 12px; }
.omap .pin.flip .pfit { top: auto; bottom: 12px; }
.omap .pin:hover .dot, .omap .pin:focus-visible .dot { scale: 1.2; }
.omap .pin.on .dot { scale: 1.3; background: var(--route); box-shadow: 0 0 0 1.5px var(--route), 0 0 0 6px var(--route-soft); }
.omap .pin.on .pfit { background: var(--route); color: var(--paper); border-color: var(--route); }
.role.detail { margin-bottom: 22px; border-left: 3px solid var(--route); }
.role.detail .dir { font-family: var(--label); font-size: 13.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 8px; }
.s-roles .omap { animation: fade .5s ease backwards .1s; }
.s-roles .omap .ax.x { transform-origin: center; animation: draw-cx .8s cubic-bezier(.3,.1,.3,1) backwards .2s; }
.s-roles .omap .ax.y { transform-origin: center; animation: draw-cy .8s cubic-bezier(.3,.1,.3,1) backwards .2s; }
@keyframes draw-cx { from { scale: 0 1; } }
@keyframes draw-cy { from { scale: 1 0; } }
.s-roles .omap-frame .axl, .s-roles .omap-legend { animation: fade .5s ease backwards .8s; }
.s-roles .omap .heute { animation: heute-in .6s cubic-bezier(.2,.8,.3,1.3) backwards .5s; }
@keyframes heute-in { from { opacity: 0; scale: .4; } }
.s-roles .omap .pin { animation: pop .5s cubic-bezier(.2,.8,.3,1.25) backwards; animation-delay: calc(.9s + var(--i, 0) * .12s); }
.s-roles .role.detail { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards 1.3s; }

/* ---- Stationen-Korrektur am Kurzprofil ---- */
.check-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 34px 0 -12px; }
.check-head .check-k { margin: 0; }
.chg, .timeline .chg { display: inline-block; margin-top: 6px; padding: 2px 6px; border-radius: 2px; font-family: var(--label); font-size: 12px; font-weight: 600; color: var(--paper); background: var(--route); }
.kin { width: 100%; font: inherit; font-size: 15px; padding: 8px 2px; border: 0; border-bottom: 2px solid var(--ink-3); border-radius: 0; background: transparent; color: var(--ink); }
.kin:focus { outline: none; border-color: var(--route); }
.mini { font: inherit; font-family: var(--label); font-size: 13.5px; font-weight: 600; padding: 6px 10px; border-radius: 3px; border: 1px solid var(--ink-3); background: transparent; color: var(--ink); cursor: pointer; }
.mini.go { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mini:disabled { opacity: .4; cursor: not-allowed; }
.timeline.editing ol { display: flex; flex-direction: column; gap: 14px; }
.timeline.editing .rail { display: none; }
.timeline.editing li { text-align: left; display: grid; grid-template-columns: 24px 1fr auto; column-gap: 12px; align-items: start; }
.timeline.editing .dot { grid-column: 1; grid-row: 1 / span 2; margin: 2px 0 0; width: 14px; height: 14px; box-shadow: none; }
.timeline.editing .when, .timeline.editing .what { grid-column: 2; }
.timeline.editing .xbtn { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.timeline .what .kin { margin-top: 8px; }
.xbtn { appearance: none; width: 26px; height: 26px; padding: 0; line-height: 1; font-size: 18px; cursor: pointer; border-radius: 3px; border: 1px solid var(--paper-4); background: var(--sheet); color: var(--ink-2); }
.xbtn:hover, .xbtn:focus-visible { outline: none; border-color: var(--route); color: var(--route); }
.st-editbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 20px; }
.st-editbar[hidden] { display: none; }
.st-add, .st-edit { font: inherit; font-family: var(--label); font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 3px; border: 1px dashed var(--contour-soft); background: transparent; color: var(--ink-2); cursor: pointer; }
.st-add:hover, .st-edit:hover, .st-edit:focus-visible { border-color: var(--route); color: var(--route); outline: none; }
.st-edit { padding: 5px 10px; font-size: 13.5px; }
.linkbtn { justify-self: start; font: inherit; font-family: var(--label); font-size: 15px; font-weight: 600; padding: 0; border: 0; background: none; color: var(--water); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.korrektur-body { display: grid; gap: 10px; }
.korrektur-body[hidden] { display: none; }

/* ---- Scroll-Reveal: die Blätter der Analyse untereinander ---- */
.scrollflow { display: block; }
.rs { min-height: 70vh; padding: 28px 0 52px; scroll-margin-top: 84px; }
/* Blattwechsel: eine Höhenlinie als Trennung */
.rs + .rs { border-top: 1px solid var(--contour-soft); }
.rs.text { min-height: 0; }
.rs:not(.on) { pointer-events: none; }
.rs > .screen, .rs-pin > .screen { width: 100%; margin: 0; }
/* Kopf, Körper, Beistellkarte untereinander (einspaltig auf allen Breiten) —
   die Beistellkarte (Deutung des Fingerprints) erst nach dem Netz. */
.rs-pin > .screen { display: flex; flex-direction: column; }
.rs-head { display: contents; }
.rs-body { order: 1; }
.rs-head > .aside { order: 2; margin-top: 26px; }
.rs.wait { display: flex; flex-direction: column; justify-content: center; }
.scrollflow .rs:last-child { padding-bottom: calc(var(--nav-h) + 24px); }
.scrollhint { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--label); font-size: 14px; font-weight: 600; color: var(--ink-3); transition: opacity .4s; }
.scrollhint.off { opacity: 0; }
.scrollhint i { width: 11px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; animation: sh-bounce 1.6s ease-in-out infinite; }
@keyframes sh-bounce { 0%, 100% { translate: 0 -3px; opacity: .45; } 50% { translate: 0 4px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scrollhint i { animation: none; } }

/* ---- Scrubben (breite Schirme, siehe app.js SCRUB) ----
   Keine Pinnung: das Blatt scrollt normal, seine Position im Viewport treibt
   die Animationen an (fertig, sobald es ganz zu sehen ist). Einspaltig (Owner,
   2026-09-07): Kopf über der Visualisierung – deshalb kompakter Kopf und
   Visualisierungen, die app.js (scrubFit) nach dem Restplatz bemisst, damit
   „ganz zu sehen“ auf einen Schirm passt. */
@media (min-width: 1100px) {
  .rs.scrub { padding-top: 0; padding-bottom: 0; }
  .scrollflow .rs.scrub:last-child { padding-bottom: 0; }
  .rs.scrub .rs-pin { padding: 24px 0 20px; }
  .rs.scrub .rs-head h1.display, .rs.scrub .rs-head h2.title { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; margin-bottom: 6px; }
  .rs.scrub .rs-head .lead { font-size: 15.5px; line-height: 1.4; margin-bottom: 12px; max-width: 70ch; }
  /* Fingerprint: Netz nach der Höhe bemessen, die Deutung als Zeile darunter */
  /* Netz: Breite setzt app.js (scrubFit) aus dem Restplatz; Beschriftung hält gegen den Maßstab */
  .rs.scrub .radar { max-width: 720px; }
  .rs.scrub .rlabel { font-size: calc(15.5px * var(--rs, 1) * var(--fs, 1)); gap: calc(5px * var(--rs, 1)); }
  .rs.scrub .rlabel .dots i { width: calc(8px * var(--rs, 1)); height: calc(8px * var(--rs, 1)); }
  .rs.scrub .rlabel .dots { gap: calc(3px * var(--rs, 1)); }
  .rs.scrub .rs-head > .aside { margin-top: 12px; padding-top: 11px; }
  .rs.scrub .standort { margin-bottom: 10px; } .rs.scrub .standort .sp b { font-size: 16px; } .rs.scrub .standort .sv { font-size: 14px; padding: 4px 10px; } .rs.scrub .standort .sb { font-size: 13.5px; margin-top: 5px; }
  .rs.scrub .fp-beleg { margin-top: 10px; padding: 8px 12px; } .rs.scrub .fp-beleg h4 { font-size: 15px; } .rs.scrub .fp-beleg p { font-size: 13.5px; }
  .rs.scrub .rs-head > .aside h3 { font-size: 13.5px; margin-bottom: 8px; }
  .rs.scrub .read .k { margin-bottom: 5px; }
  .rs.scrub .read p { font-size: 13.5px; }
  /* Zusammenfluss: Höhe setzt app.js (scrubFit); Beschriftung hält gegen den Maßstab */
  .rs.scrub .aha { margin-top: 0; }
  .rs.scrub .aha svg.confluence { max-width: 100%; }
  .rs.scrub .confluence .tname { font-size: calc(15.5px * var(--rs, 1)); }
  .rs.scrub .confluence .tcontrib { font-size: calc(12.5px * var(--rs, 1)); }
  .rs.scrub .aha-these { font-size: 22px; margin-bottom: 10px; }
  .rs.scrub .aha-why p { font-size: 14px; }
  .rs.scrub .aha-beleg { margin-top: 10px; }
  /* Höhenprofil: Höhe setzt app.js (scrubFit); Beschriftung hält gegen den Maßstab */
  .rs.scrub .uw { margin-top: 0; }
  .rs.scrub .uw svg.massif { max-width: 100%; }
  .rs.scrub .uw-beleg { margin-top: 8px; }
  .rs.scrub .uw-karten { margin-top: 8px; padding-top: 8px; }
  .rs.scrub .uw-karten > .k { margin-bottom: 6px; }
  .rs.scrub .uw-karten .grid3 { gap: 12px; }
  .rs.scrub .uw-karten .ucard { padding: 12px 14px; gap: 2px 8px; }
  .rs.scrub .uw-karten .ucard .claim { font-size: 14.5px; line-height: 1.42; }
  /* Karte: Höhe setzt app.js (scrubFit) */
  .rs.scrub .omap-frame { grid-template-columns: 22px minmax(0, 1fr) 22px; }
  .rs.scrub .omap-wrap { margin-top: 0; }
  .rs.scrub .role.detail { padding: 12px 20px; margin-bottom: 0; }
  .rs.scrub .role.detail h4 { font-size: 17px; }
  .rs.scrub .role.detail p, .rs.scrub .role.detail .clar { font-size: 14px; margin-top: 4px; }
  .rs.scrub .wf { margin: 0 0 14px; }
  .rs.scrub .wft { min-height: 108px; }
  .rs.scrub .wf-belege ul { font-size: 13.5px; }
  .rs.scrub .callout { padding: 10px 18px; }
  .rs.scrub .missing { padding: 12px 18px; }
}
/* Flache Laptop-Fenster: noch etwas dichter, damit das gepinnte Blatt hineinpasst */
@media (min-width: 1100px) and (max-height: 800px) {
  .rs.scrub .rs-pin { padding-top: 16px; }
  .rs.scrub .rs-head h1.display, .rs.scrub .rs-head h2.title { font-size: 26px; margin-bottom: 4px; }
  .rs.scrub .rs-head .lead { font-size: 15px; margin-bottom: 8px; line-height: 1.35; }
  .rs.scrub .rs-head > .aside { margin-top: 8px; padding-top: 9px; }
  .rs.scrub .rs-head > .aside h3 { font-size: 13px; margin-bottom: 6px; }
  .rs.scrub .read p { font-size: 13px; line-height: 1.35; }
  .rs.scrub .read .k { font-size: 12px; margin-bottom: 4px; }
  .rs.scrub .uw-karten .ucard { padding: 10px 12px; }
  .rs.scrub .uw-karten .ucard .claim { font-size: 13.5px; }
  .rs.scrub .role.detail { padding: 10px 18px; }
  .rs.scrub .role.detail p, .rs.scrub .role.detail .clar { font-size: 13.5px; margin-top: 3px; }
  .rs.scrub .wft { min-height: 96px; }
}

/* ---------- Blatt 3: Aha – die verborgene Stärke als Zusammenfluss ----------
   Jede belegte Kompetenz ist ein Zufluss (Farbe und Breite = Evidenz-Stufe
   aus der Zeichenerklärung), sie laufen an einem Punkt zusammen, der
   vereinigte Strom in Tusche trägt die Fähigkeit. Rechts der Text: die
   These, warum die Kombination mehr ist als die Summe, und die Beleg-Zeile
   des gewählten Zuflusses. Gefunden=false steht im Gewässerblau. */
.aha { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; margin-top: 4px; }
.aha-map { min-width: 0; }
.aha svg.confluence { display: block; width: 100%; height: auto; overflow: visible; }
.confluence .flow { fill: none; stroke-linecap: round; opacity: .92; stroke-dasharray: 1; stroke-dashoffset: 1; }
.confluence .hit { fill: none; stroke: transparent; stroke-width: 34; }
.confluence .trib { cursor: pointer; outline: none; }
.confluence .trib.on .flow, .confluence .trib:hover .flow, .confluence .trib:focus-visible .flow { opacity: 1; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
.confluence .trib.on .src, .confluence .trib:focus-visible .src { stroke: var(--route); stroke-width: 3; }
.confluence .trib.on .tname { fill: var(--route); }
.confluence .src { stroke: var(--sheet); stroke-width: 2.5; }
.confluence .join { r: 12px; }
.confluence .tname { font-family: var(--font); font-size: calc(16px * var(--rs, 1)); font-weight: 700; fill: var(--ink); letter-spacing: -.01em; }
.confluence .tcontrib { font-family: var(--label); font-size: calc(13px * var(--rs, 1)); font-weight: 600; fill: var(--ink-3); }
.confluence .main { fill: none; stroke: var(--ink); stroke-linecap: butt; opacity: .9; stroke-dasharray: 1; stroke-dashoffset: 1; }
.confluence .join { fill: var(--ink); stroke: var(--sheet); stroke-width: 3; }
.aha-text { min-width: 0; }
.aha-text > .k { font-family: var(--label); font-size: 14.5px; font-weight: 600; color: var(--contour); margin-bottom: 8px; }
.aha-these { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin: 0 0 16px; }
.aha-these .w { display: inline-block; }
.aha-why .k { display: block; font-family: var(--label); font-size: 13.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.aha-why p { color: var(--ink-2); font-size: 15.5px; line-height: 1.45; }
.aha-beleg { margin-top: 16px; }
/* Ehrlich nichts gefunden: das Blatt ist nur Text, keine Mindesthöhe */
.rs:has(.aha-none) { min-height: 0; }
.aha-none h4 { font-size: 20px; line-height: 1.25; margin: 0 0 8px; }
.aha-none p { color: var(--ink-2); font-size: 15.5px; }
@media (min-width: 861px) { .aha { grid-template-columns: 3fr 2fr; gap: 28px; } }
/* Ablauf beim Einscrollen: Quellen erscheinen, die Zuflüsse fließen nacheinander
   zum Zusammenfluss, der Punkt setzt sich, der Strom fließt nach rechts in den
   Text, die These erscheint Wort für Wort, dann das Warum, dann der Beleg. */
.s-aha .confluence .src { transform-box: fill-box; transform-origin: center; animation: pop .45s cubic-bezier(.2,.8,.3,1.35) backwards; animation-delay: calc(.15s + var(--i, 0) * .32s); }
.s-aha .confluence .tname, .s-aha .confluence .tcontrib { animation: fade .5s ease backwards; animation-delay: calc(.25s + var(--i, 0) * .32s); }
.s-aha .confluence .flow { animation: flow-draw 1s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(.35s + var(--i, 0) * .32s); }
@keyframes flow-draw { to { stroke-dashoffset: 0; } }
.s-aha .confluence .join { transform-box: fill-box; transform-origin: center; animation: pop .45s cubic-bezier(.2,.8,.3,1.35) backwards; animation-delay: calc(.6s + var(--n, 3) * .32s); }
.s-aha .confluence .main { animation: flow-draw .8s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(.8s + var(--n, 3) * .32s); }
.s-aha .aha-text > .k { animation: fade .5s ease backwards; animation-delay: calc(1.3s + var(--n, 3) * .32s); }
.s-aha .aha-these .w { animation: rise .45s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(1.4s + var(--n, 3) * .32s + var(--w, 0) * .06s); }
.s-aha .aha-why { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(2.6s + var(--n, 3) * .32s); }
.s-aha .aha-beleg { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(3s + var(--n, 3) * .32s); }
.s-aha .aha-none { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards .3s; }

/* ---------- Blatt 4: Unter Wert – das Career Capital als Höhenprofil ----------
   Der Jobtitel ist die Wasseroberfläche, das Massiv der belegten Kompetenzen
   liegt darunter: jeder Berg eine Kompetenz, ganz in der Höhenfarbe seiner
   eigenen Evidenz-Stufe (plus kleinem Ton-Versatz je Position, damit zwei
   Nachbarn derselben Stufe auseinandergehen), Ostflanke im Schatten, das
   Wasser im Gewässerblau, die drei Fahnen in Rot („du bist hier": das ist
   deine Lage). Wenig Text – die Beleg-Zeile unter dem Bild trägt heute/wert
   der gewählten Fahne. */
.uw { margin-top: 4px; }
.uw-map { min-width: 0; }
.uw svg.massif { display: block; width: 100%; height: auto; overflow: hidden; }
.massif .mt { stroke: color-mix(in srgb, var(--shadow) 34%, transparent); stroke-width: 1; }   /* Farbe je Berg (Stufe des Gipfels) steht im fill-Attribut; die Hangkante trennt ihn vom Berg dahinter */
.massif .shade { fill: color-mix(in srgb, var(--shade) 14%, transparent); }                   /* Ostflanke im Schatten: Licht von links, das gibt den Bergen Relief */
.massif .ridge { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.massif .pname { font-family: var(--label); font-size: calc(13px * var(--rs, 1)); font-weight: 600; fill: var(--ink-2); }
.massif .water { fill: color-mix(in srgb, var(--water) 13%, transparent); }
.massif .wave { fill: none; stroke: var(--water); stroke-width: 1.5; opacity: .7; }
.massif .sea { transform: translateY(var(--y1)); }
.massif .wline line { stroke: var(--water); stroke-width: 1.2; stroke-dasharray: 6 5; opacity: .8; }
.massif .wcap { font-family: var(--label); font-size: calc(12.5px * var(--rs, 1)); font-weight: 600; letter-spacing: .02em; fill: var(--water); }
.massif .wtitle { font-family: var(--font); font-size: calc(16px * var(--rs, 1)); font-weight: 700; letter-spacing: -.01em; fill: var(--ink); }
.massif .flag { cursor: pointer; outline: none; }
.massif .pole { stroke: var(--route); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.massif .cloth { fill: var(--route); }
.massif .foot { fill: var(--route); stroke: var(--sheet); stroke-width: 2; r: calc(5px * var(--rs, 1)); }
.massif .ftitle { font-family: var(--font); font-size: calc(15.5px * var(--rs, 1)); font-weight: 700; fill: var(--ink); letter-spacing: -.01em; }
.massif .fsub { font-family: var(--label); font-size: calc(12.5px * var(--rs, 1)); font-weight: 600; fill: var(--ink-3); }
.massif .flag.on .ftitle, .massif .flag:hover .ftitle, .massif .flag:focus-visible .ftitle { fill: var(--route); }
.massif .flag.on .foot, .massif .flag:focus-visible .foot { r: calc(7px * var(--rs, 1)); }
.uw-beleg { margin-top: 14px; }
.uw-beleg p .heute { font-family: var(--label); font-weight: 600; color: var(--ink-3); }
/* Unter dem Bild die drei Formulierungen aus Teil 2: die Deutung oben, das
   Dokument unten. Bis Teil 2 da ist, trägt jede Karte nur ihre Nummer und
   sagt, worauf sie wartet; der Block steht damit von Anfang an an seinem
   Platz und wächst mit dem Text, den er bekommt. */
.uw-karten { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--paper-4); }
.uw-karten > .k { font-family: var(--label); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.uw-karten .grid3 { margin: 0; }
/* Nummer neben der Aussage, nicht darüber: der Block steht unter einem Bild,
   das die Höhe braucht – jede gesparte Zeile zählt. */
.uw-karten .ucard { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; }
.uw-karten .ucard .n { line-height: 1.5; }
.uw-karten .claim.wartet { font-family: var(--label); font-size: 14.5px; color: var(--ink-3); }
@media (max-width: 640px) { .massif .pname { display: none; } }   /* schmal: nur die Gipfel mit Fahne tragen einen Namen (an der Fahne) */
/* Ablauf beim Einscrollen: die Wasserlinie mit dem Titel, dann sinkt das Wasser
   und legt das Massiv frei, die Gipfelnamen erscheinen, die Fahnen setzen sich
   nacheinander (Stange, Tuch, Name), zuletzt die Beleg-Zeile. */
.s-unterwert .wline { animation: fade .5s ease backwards .1s; }
.s-unterwert .sea { animation: sea-fall 1.5s cubic-bezier(.45,0,.2,1) both .35s; }
@keyframes sea-fall { from { transform: translateY(var(--y0)); } to { transform: translateY(var(--y1)); } }
.s-unterwert .pname { animation: fade .5s ease backwards; animation-delay: calc(1.85s + var(--i, 0) * .06s); }
.s-unterwert .flag .foot { transform-box: fill-box; transform-origin: center; animation: pop .35s cubic-bezier(.2,.8,.3,1.35) backwards; animation-delay: calc(2.2s + var(--i, 0) * .4s); }
.s-unterwert .flag .pole { animation: flow-draw .4s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(2.3s + var(--i, 0) * .4s); }
.s-unterwert .flag .cloth { transform-box: fill-box; transform-origin: 0 50%; animation: pop .35s cubic-bezier(.2,.8,.3,1.35) backwards; animation-delay: calc(2.65s + var(--i, 0) * .4s); }
.s-unterwert .flag .ftitle, .s-unterwert .flag .fsub { animation: fade .4s ease backwards; animation-delay: calc(2.75s + var(--i, 0) * .4s); }
.s-unterwert .uw-beleg { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards 3.7s; }
.s-unterwert .uw-karten > .k { animation: fade .5s ease backwards 3.9s; }
.s-unterwert .uw-karten .ucard { animation: rise .55s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(4s + var(--i, 0) * .12s); }

/* ---------- Landing: drei Schritte unter dem Titelbild; CV-Screen mit Versprechen ---------- */
.steps { display: grid; gap: 0; border-top: 1px solid var(--paper-4); }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 14px 4px; border-bottom: 1px solid var(--paper-4); }
.step .n { font-family: var(--label); font-size: 14.5px; font-weight: 600; color: var(--contour); padding-top: 2px; }
.step b { display: block; font-size: 16.5px; font-weight: 600; }
.step span { font-family: var(--label); color: var(--ink-2); font-size: 14.5px; }
.uploadbox button:disabled { opacity: .5; cursor: default; }
/* Modellwahl unter den drei Schritten: ein Label, drei Chips, ein Satz */
.engine { display: grid; gap: 10px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--paper-4); max-width: 520px; }
.engine .lbl { font-family: var(--label); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cv-locked { font-family: var(--label); font-size: 14.5px; color: var(--ink-3); margin-top: 12px; }
.qwhy { margin-top: 20px; font-family: var(--label); font-size: 14.5px; color: var(--ink-2); max-width: 640px; }
.qwhy b { display: inline-block; margin-right: 8px; font-weight: 600; color: var(--contour); }
/* Obergrenze erreicht: nicht gewählte Optionen dimmen, gewählte bleiben abwählbar */
.options.max .opt:not(.on) { opacity: .45; cursor: default; }

/* ---- Richtung: eine Rolle vollständig, nach den Rückfragen (Free-Vertrag Nr. 4) ---- */
.s-richtung .role.detail.richtung { padding: 26px 30px; max-width: 900px; }
.s-richtung .role.detail .h h4 { font-family: var(--label); font-size: 14.5px; font-weight: 600; color: var(--contour); letter-spacing: .01em; }
.rgrid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px 32px; margin-top: 14px; }
.rgrid > * { min-width: 0; }
.rgrid .rk { font-family: var(--label); font-size: 14px; font-weight: 600; color: var(--contour); margin-bottom: 6px; }
.rgrid ul { margin: 0 0 0 18px; color: var(--ink-2); font-size: 15.5px; }
.rgrid li + li { margin-top: 4px; }
.rgrid .open .rk { color: var(--water); }
.rgrid .open ul { color: var(--ink-2); }
.rgrid .open li::marker { color: var(--water); }
.s-richtung .role.detail { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards .35s; }

/* ---- Routenvergleich: empfohlene Route neben höchstens einer Alternative,
   jede mit ihren Bezügen auf die Blätter davor ---- */
.role.rc { padding: 24px 26px; }
.role.rc.strong { border-left: 3px solid var(--route); box-shadow: none; }
.rc-tag { font-family: var(--label); font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.role.rc.strong .rc-tag { color: var(--route); }
.role.rc .h h4 { font-size: 22px; }
.role.rc .dir { font-family: var(--label); font-size: 13.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; }
.rc-refs { margin-top: 16px; border-top: 1px solid var(--paper-4); padding-top: 14px; }
.rc-refs .rk { font-family: var(--label); font-size: 14px; font-weight: 600; color: var(--contour); margin-bottom: 10px; }
.rc-refs .ref { padding: 10px 0 10px 14px; border-left: 2px solid var(--paper-4); }
.rc-refs .ref + .ref { margin-top: 8px; }
.role.rc.strong .rc-refs .ref { border-left-color: var(--h2); }
.rc-refs .src { font-family: var(--label); font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.rc-refs .src b { color: var(--contour); font-weight: 600; }
.rc-refs .bf { font-size: 15px; color: var(--ink-2); }
.rc-refs .bd { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 3px; }
/* Richtung: die Bezüge stehen im Detail-Kasten, die Alternative folgt darunter */
.s-richtung .role.detail .rc-refs { margin-top: 18px; }
.s-richtung .alt { max-width: 900px; margin-top: 26px; animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards .7s; }
.s-richtung .alt-lead { color: var(--ink-2); font-size: 16px; margin-bottom: 12px; max-width: 70ch; }

/* ---- Aktion: eine vollständige Aufgabe für die nächsten sieben Tage ---- */
.action-card { max-width: 900px; background: var(--sheet); border: 1px solid var(--paper-4); border-left: 3px solid var(--route); border-radius: 3px; padding: 28px 30px; }
.action-label { font-family: var(--label); font-size: 14px; font-weight: 600; color: var(--contour); margin-bottom: 18px; }
.action-steps { list-style: none; padding: 0; counter-reset: action; border-top: 1px solid var(--paper-4); }
.action-steps li { counter-increment: action; display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; padding: 17px 0; border-bottom: 1px solid var(--paper-4); font-size: 17px; font-weight: 600; }
.action-steps li::before { content: counter(action); width: 28px; height: 28px; display: grid; place-items: center; border: 1.5px solid var(--route); border-radius: 50%; color: var(--route); font: 600 14px var(--label); }
.action-done { margin-top: 22px; padding: 18px 20px; background: var(--water-soft); border-left: 3px solid var(--water); }
.action-done .k { font-family: var(--label); font-size: 14px; font-weight: 600; color: var(--water); margin-bottom: 5px; }
.action-done p { font-size: 17px; font-weight: 600; }
.s-aktion .action-card { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards .35s; }
@media (max-width: 720px) {
  .rgrid { grid-template-columns: 1fr; }
  .action-card { padding: 22px 20px; }
}
/* ---------- Entwickler-Pille (Replay / Aufzeichnen) ----------
   Unten links, über allem – sagt, dass das kein Live-Lauf ist. Nie Teil des
   Erlebnisses: erscheint nur mit ?replay= oder ?aufzeichnen=1. */
.devpill { position: fixed; left: 14px; bottom: 14px; z-index: 50; display: flex; gap: 10px; align-items: center; max-width: calc(100vw - 28px);
  padding: 8px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 12px/1.2 var(--label); letter-spacing: .02em; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.devpill b { color: var(--h3); white-space: nowrap; }
.devpill.rec b { color: var(--route); }
.devpill a, .devpill button { color: inherit; background: rgba(255,255,255,.14); border: 0; border-radius: 999px; padding: 5px 10px; font: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; }
.devpill a:hover, .devpill button:hover { background: rgba(255,255,255,.26); }
.devpill .msg:empty { display: none; }

/* =====================================================================
   v5: v3-Look über den v4-Bauteilen. Alles hier ersetzt nur Form und
   Schrift (Radien, Gewichte, Großbuchstaben-Beschriftung, Knöpfe); die
   Farben kommen bereits über die Token oben. Steht am Dateiende, damit es
   die gleichrangigen v4-Regeln davor schlägt.
   ===================================================================== */
.stage { padding-top: calc(var(--head-h) + 40px); }

/* Knöpfe wie v3: Teal, rund, fett, mit weichem Schatten */
button.primary {
  background: var(--teal); color: #fff; border: 0; border-radius: 12px; padding: 14px 26px;
  font: inherit; font-weight: 800; font-size: 15px; letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 8px 24px rgba(22,179,164,.28); transition: transform .12s, box-shadow .12s, opacity .2s;
}
button.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(22,179,164,.35); }
button.primary:disabled { background: var(--teal); color: #fff; opacity: .4; cursor: default; box-shadow: none; }
button.secondary { background: var(--sheet); color: var(--ink); border: 1px solid var(--paper-3); border-radius: 12px; padding: 12px 20px; font: inherit; font-weight: 700; cursor: pointer; }
button.secondary:hover { background: var(--sheet); color: var(--ink); border-color: var(--teal); }
body[data-theme="dark"] button.secondary { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.18); }
.backlink, .flownav .skip, .flownav .hint { font-weight: 600; }

/* Typografie wie v3: schwere Titel, Großbuchstaben-Kicker */
.kicker { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--contour); margin-bottom: 14px; }
.kicker::before { content: none; }
h1.display, h2.title { font-weight: 900; letter-spacing: -.02em; }
h1.display { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.08; max-width: 18ch; margin-bottom: 18px; }
h1.display.long { font-size: clamp(24px, 3.2vw, 36px); }
h1.display.xlong { font-size: clamp(20px, 2.4vw, 28px); }
h2.title { font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; }
.lead { font-size: 18px; }
.small { font-size: 13px; }
.card h3, .hero-card h3, .aha-these, .ucard h4, .role h4, .lcard h4, .rstep b, .aha-none h4, .fp-beleg h4, .stat b { font-weight: 900; }
.opt .t, .step b, .uploadbox strong, .korrektur label, .callout p, .kwhy p, .missing ul, .action-steps li, .action-done p, .rc-refs .bd { font-weight: 700; }

/* Kartenbeschriftung: v3-Etiketten (klein, fett, gesperrt, Großbuchstaben) statt Archivo Narrow */
.card .k, .hero-card .k, .callout .k, .refs .k, .missing .k, .check-k, .groupk, .kwhy .k, .kfit .k, .standort .sp .k,
.fp-beleg .k, .fp-legende > h3, .aha-text > .k, .aha-why .k, .wf-belege .k, .uw-karten > .k, .rgrid .rk, .rc-refs .rk,
.rc-tag, .action-label, .action-done .k, .engine .lbl, .ucard .n, .step .n, .rstep .p, .qwhy b, .qby b,
.s-richtung .role.detail .h h4, .role.detail .dir, .role.rc .dir, .fit, .omap-frame .axl, .omap-legend b, .omap .heute b {
  font-family: var(--font); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.hero-card .k, .card .k, .fp-legende > h3 { margin-bottom: 12px; }

/* Fragen */
.opt { background: var(--sheet); border: 2px solid var(--paper-3); border-radius: 16px; transition: border-color .15s, transform .12s, box-shadow .15s; }
.opt:hover { border-color: var(--paper-4); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(11,24,38,.06); }
.opt.on { border-color: var(--teal); background: var(--sheet); box-shadow: 0 8px 24px rgba(22,179,164,.18); }
.opt .box { flex: 0 0 22px; height: 22px; border-radius: 7px; border: 2px solid var(--paper-4); }
.opt.multi .box { border-radius: 6px; }
.opt.on .box { background: var(--teal); border-color: var(--teal); box-shadow: none; }
.opt.on .box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.opt .icon { border-radius: 10px; background: var(--paper); color: var(--teal-dark); font-weight: 900; }
.opt .t { font-weight: 800; }
.opt .d, .step span, .qwhy, .cv-locked, .qmeta { font-family: var(--font); }
.ftext { font-size: 17px; padding: 16px 18px; border: 2px solid var(--paper-3); border-radius: 14px; background: var(--sheet); }
.ftext:focus { border-color: var(--teal); }
body[data-theme="dark"] .ftext { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
body[data-theme="dark"] .ftext:focus { border-color: var(--cyan); }
.korrektur textarea.ftext { border: 2px solid var(--paper-3); border-radius: 14px; background: var(--sheet); }
.qmeta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* Start */
.uploadbox { border: 2px dashed var(--paper-4); border-radius: 20px; background: rgba(255,255,255,.6); }
.uploadbox.drag { border-color: var(--teal); background: rgba(22,179,164,.06); }
.uploadbox .ok { font-family: var(--font); color: var(--teal-dark); font-weight: 700; }
.chip { border: 1px solid var(--paper-3); background: var(--sheet); border-radius: 999px; padding: 8px 14px; font-family: var(--font); font-size: 13px; font-weight: 600; }
.chip:hover { border-color: var(--paper-4); }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.or { font-family: var(--font); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.rotator { font-weight: 800; font-size: 21px; }
.rotator .cursor { width: 3px; border-radius: 2px; background: var(--teal); }
.steps, .step, .engine { border-color: var(--paper-3); }
.step .n { color: var(--teal-dark); }

/* Kurzprofil (Einordnung, dunkel): die dunkle Heldenkarte aus v3 */
.hero-card { background: var(--navy-2); color: #fff; border: 0; border-radius: 28px; padding: 40px; overflow: hidden; box-shadow: 0 30px 80px rgba(11,24,38,.35); }
.hero-card::before { content: ""; position: absolute; inset: auto -60px -80px auto; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(69,208,230,.25), transparent 70%); pointer-events: none; }
body[data-theme="dark"] .hero-card { box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.hero-card .k { color: var(--cyan); }
.hero-card .ziel-kombi { color: rgba(255,255,255,.7); }
.stat b { font-size: 40px; line-height: 1; color: var(--lime); letter-spacing: -.02em; }
.stat b::after { content: none; }
.stat span { font-family: var(--font); font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75); margin-top: 8px; }
.stat .beleg { font-family: var(--font); font-size: 11px; color: rgba(255,255,255,.45); }
.belege li { color: rgba(255,255,255,.85); font-size: 14px; padding-left: 18px; }
.belege li::before { top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.belege li.ctx::before { background: var(--lime); }

/* Karten wie v3: weiß bzw. Ink-2, große Radien */
.card { border: 1px solid var(--paper-3); border-radius: 24px; box-shadow: 0 10px 30px rgba(11,24,38,.05); }
.card.dark { background: var(--navy-2); color: #fff; border-color: transparent; }
.card.dark .k { color: var(--cyan); }
.card.dark p { color: rgba(255,255,255,.75); }
.ucard { border: 1px solid var(--paper-3); border-radius: 22px; }
.role { border: 1px solid var(--paper-3); border-radius: 20px; }
.role.strong { border-color: var(--teal); box-shadow: 0 10px 30px rgba(22,179,164,.12); }
.role.detail { border-left: 1px solid var(--paper-3); }
.role.rc.strong { border: 1px solid var(--teal); box-shadow: 0 10px 30px rgba(22,179,164,.12); }
.lcard { border: 1px solid var(--paper-3); border-radius: 18px; }
.lcard.open { border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.roadmap { border-top: 0; gap: 12px; }
.rstep { background: var(--sheet); border: 1px solid var(--paper-3); border-radius: 16px; padding: 18px 20px; }
.action-card { border: 1px solid var(--paper-3); border-radius: 24px; }
.action-steps, .action-steps li, .rc-refs, .uw-karten { border-color: var(--paper-3); }
.action-steps li::before { font: 800 13px var(--font); }
.action-done { border-radius: 14px; border-left: 0; }
body[data-theme="dark"] .card, body[data-theme="dark"] .ucard, body[data-theme="dark"] .role, body[data-theme="dark"] .lcard,
body[data-theme="dark"] .rstep, body[data-theme="dark"] .action-card { border-color: rgba(255,255,255,.08); box-shadow: none; }
body[data-theme="dark"] .role.strong, body[data-theme="dark"] .role.rc.strong { border-color: var(--teal); box-shadow: 0 0 0 1px rgba(22,179,164,.4); }

/* Hinweiskästen wie v3: getönte Fläche, Rahmen, runde Ecken */
.callout { background: #e8f7f5; border: 1px solid #bfe6e0; border-radius: 14px; }
.callout.warn { background: var(--warn-soft); border: 1px solid #f1dba8; }
body[data-theme="dark"] .callout { background: rgba(69,208,230,.10); border-color: rgba(69,208,230,.25); }
body[data-theme="dark"] .callout.warn { background: rgba(240,194,75,.10); border-color: rgba(240,194,75,.3); }
.missing { border: 1px solid color-mix(in srgb, var(--water) 30%, transparent); border-radius: 16px; }
.kwhy { border-left-color: var(--teal); }
.kfit { border-radius: 12px; }
.kchip { font-family: var(--font); font-size: 13px; border-radius: 999px; padding: 6px 12px; background: var(--sheet); border-color: var(--paper-3); }
.standort .sv { border-radius: 0 10px 10px 0; }
.fp-beleg, .fp-legende .fp-beleg { border-radius: 0 12px 12px 0; }
.fp-legende, .rs + .rs { border-color: var(--paper-3); }
.wft { border-radius: 12px; }
.wf-top, .standort .sp .d, .rc-refs .src, .aha-why .k, .confluence .tcontrib, .massif .pname, .massif .wcap, .massif .fsub, .routemap .lbl, .routemap .qsec, .routemap .mapscale, .omap .pin .pfit, .omap-legend, .scrollhint, .flownav .skip, .flownav .hint, .backlink, .mini, .st-add, .st-edit, .linkbtn, .chg, .devpill { font-family: var(--font); }
.omap .pin .pfit { border-radius: 7px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.omap .pin .name { font-weight: 800; }
.omap .pin.strong .dot { background: var(--h1); box-shadow: 0 0 0 1.5px var(--h1); }
.omap .pin .dot { background: var(--teal); box-shadow: 0 0 0 1.5px var(--teal); border-color: var(--paper); }
.chg { border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: var(--lime); }
.mini, .st-add, .st-edit, .xbtn { border-radius: 9px; }
.mini.go { background: var(--lime); border-color: var(--lime); color: var(--navy); }
.kin { border: 1px solid var(--paper-3); border-radius: 9px; padding: 8px 10px; background: var(--sheet); }
.kin:focus { border-color: var(--teal); }

/* Route der Stationen wie v3: durchgezogene Schiene, Teal-Punkte, die letzte in Lime */
.timeline .rail { top: 46px; height: 3px; border-radius: 2px; background: var(--paper-3); }
body[data-theme="dark"] .timeline .rail { background: rgba(255,255,255,.15); }
.timeline .when { font-family: var(--font); color: var(--contour); font-weight: 800; font-size: 13px; }
.timeline .dot { width: 20px; height: 20px; margin: 12px auto; background: var(--teal); border: 4px solid var(--paper); box-shadow: 0 0 0 2px var(--teal); }
.timeline li:last-child .dot { background: var(--lime); border-color: var(--paper); box-shadow: 0 0 0 2px var(--lime); }
.timeline .what { font-size: 13px; }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(184,234,60,.6); } to { box-shadow: 0 0 0 22px rgba(184,234,60,0); } }

/* Fehler / Zugang wie v3 */
.errbox { background: #fdecea; border: 1px solid #f2b8b0; border-radius: 16px; color: #7a1f16; }
.errbox pre { background: rgba(255,255,255,.6); border-radius: 8px; }
.gate input { font-size: 17px; padding: 14px 16px; border: 2px solid var(--paper-3); border-radius: 12px; background: var(--sheet); margin: 12px 0; }
.gate input:focus { border-color: var(--teal); }

@media (max-width: 860px) {
  .hero-card { padding: 26px; border-radius: 20px; }
  .hero-card h3 { font-size: 22px; }
  .stat b { font-size: 40px; }
  .timeline .dot { width: 16px; height: 16px; border-width: 3px; margin: 2px 0 0; }
  .timeline li:last-child .dot { box-shadow: 0 0 0 2px var(--lime); }
}
/* Achsenkreuz und Zusammenfluss wie v3: Achsen leise, der vereinigte Strom im Akzent statt als Tuschebalken */
.omap .ax { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.omap .ax.x { height: 3px; } .omap .ax.y { width: 3px; }
.confluence .main { stroke: var(--route); opacity: 1; }
.confluence .join { fill: var(--route); stroke: var(--paper); }
/* Entwickler-Pille: immer Ink, auch auf dunklen Screens */
.devpill { background: var(--navy); color: #fff; border: 1px solid rgba(255,255,255,.12); }
.devpill b { color: var(--lime); }
/* Schmal: die Großbuchstaben-Etiketten sind breiter als v4s Kartenschrift – Etikett über den Text statt daneben */
@media (max-width: 720px) {
  .kwhy { grid-template-columns: 1fr; gap: 4px; }
  .kwhy .k, .callout .k { white-space: normal; }
}