/* ATLAS v6 — Designsprache „Bauplan" (2026-10-08).
   Eine Karriere ist etwas, das man baut – Stockwerk für Stockwerk. ATLAS
   liest einen Lebenslauf wie ein Architekt einen Bestand: was steht, wie
   fertig es ist, wo Lücken sind und was man darauf bauen kann. Deshalb ist
   jede Visualisierung eine Bauzeichnung: der Fingerprint ein Grundriss, die
   verborgene Stärke ein Turm aus Stockwerken, das Career Capital eine Skyline
   hinter dem Bauzaun „Jobtitel", die Lücken Baulücken in einem Block, die
   Opportunity Map ein Stadtplan mit „Du bist hier", die Richtung ein
   Bauschild, das Warten ein Haus, das hochgezogen wird.

   Grund: hell = Planpapier (Fragen), dunkel = Blaupause in Cobalt (Analyse
   und Empfehlung) – wie v3, das der Chef mochte, nur kräftiger.
   Farben, jede mit genau einer Bedeutung:
     Cobalt / Weiß  = Bestand und Struktur (Linien, Häuser, Text)
     Kranegelb      = „du": Hauptaktion, Auswahl, Heute / Du bist hier,
                      deine Markierungen, der Kran, der für dich baut
     Signalorange   = Baustelle: offen, nicht belegt, Lücke, Bedingung,
                      die Stufe, an der gerade gebaut wird
   Evidenz = Baustufe (eine Farbe hell → kräftig PLUS Muster, nie nur Farbe):
     lv0 sehr stark  massiv weiß mit Fenstern
     lv1 stark       hell mit Fenstern
     lv2 belegt      schraffiert (Rohbau)
     lv3 Grundk.     Gerüst
     lv4 Hinweis     nur gestrichelter Umriss
   Schrift: Archivo mit Breitenachse – breit und schwer für Titel (Bauschild),
   normal für Text, schmal für Bemaßung (Daten, Achsen, Legenden). */
:root {
  --paper: #f3f5fb; --paper-2: #e7ebf6; --paper-3: #d5dcee; --paper-4: #aeb9da; --sheet: #ffffff;
  --ink: #0c1a63; --ink-2: #39467f; --ink-3: #5d6896;
  --accent: #1b37c2;                      /* Struktur-Beschriftung */
  --you: #ffc61a; --on-you: #0c1a63; --you-soft: rgba(255,198,26,.22);
  --site: #d9480f; --site-soft: rgba(217,72,15,.09);
  --grid: rgba(27,55,194,.06); --grid-major: rgba(27,55,194,.10);
  --shadow: #0c1a63;
  --cobalt: #1b37c2; --cobalt-deep: #142c9e; --cobalt-ink: #0e2280; --cobalt-lite: #b9c7ff;
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --head-h: 64px; --nav-h: 0px; --maxw: 1080px;   /* --nav-h: keine Fußleiste, der Viewport endet unten am Rand (Scrub rechnet damit) */
}
body[data-theme="dark"] {
  --paper: #1b37c2; --paper-2: #2343cf; --paper-3: rgba(255,255,255,.2); --paper-4: rgba(255,255,255,.38); --sheet: #142c9e;
  --ink: #ffffff; --ink-2: rgba(255,255,255,.84); --ink-3: rgba(255,255,255,.68);
  --accent: #c9d4ff;
  --site: #ff8a4c; --site-soft: rgba(255,138,76,.14);
  --grid: rgba(255,255,255,.05); --grid-major: rgba(255,255,255,.09);
  --shadow: #0e2280;
}
* { 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;
}
/* Planraster: feines Netz alle 24 px, Achsen alle 120 px – auf Papier wie auf der Blaupause */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -1px -1px; }
::selection { background: var(--you); color: var(--on-you); }
:focus-visible { outline: 2.5px solid var(--you); outline-offset: 3px; }

/* ---------- Kopf: Marke, Skyline (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) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1.5px solid var(--ink);
}
body[data-theme="dark"] .top { background: color-mix(in srgb, var(--cobalt-deep) 94%, transparent); border-bottom-color: rgba(255,255,255,.35); }
.mark { display: inline-flex; align-items: flex-end; gap: 10px; font-weight: 850; font-stretch: 125%; letter-spacing: .04em; font-size: 17px; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap; }
/* Bildmarke: drei Häuser, das mittlere am höchsten, in Kranegelb */
.mark .glyph { display: block; width: 20px; height: 20px; background:
  linear-gradient(var(--you), var(--you)) 0 100% / 5px 11px no-repeat,
  linear-gradient(var(--you), var(--you)) 7px 100% / 6px 20px no-repeat,
  linear-gradient(var(--you), var(--you)) 15px 100% / 5px 14px no-repeat; }
body:not([data-theme="dark"]) .mark .glyph { filter: drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink)); }
.mark .sub { font-weight: 600; font-stretch: 75%; font-size: 13px; letter-spacing: .02em; color: var(--ink-3); margin-left: 4px; }
/* Fortschritt: fünf Häuser, von links nach rechts höher – eine Skyline, die mit
   dir wächst. Fertig = massiv, das aktuelle wächst von unten (Höhe von i, app.js),
   kommende sind nur geplant (gestrichelt). */
.progress { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 30px; max-width: 360px; margin: 0 auto; }
.progress { border-bottom: 2px solid var(--ink); padding: 0 6px; flex: 0 0 auto; }
.progress:empty { border: 0; }
.progress .seg { position: relative; flex: 0 0 18px; border: 1.5px dashed var(--paper-4); border-bottom: 0; }
.progress .seg:nth-child(1) { height: 11px; } .progress .seg:nth-child(2) { height: 16px; } .progress .seg:nth-child(3) { height: 21px; }
.progress .seg:nth-child(4) { height: 26px; } .progress .seg:nth-child(5) { height: 31px; }
.progress .seg i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--you); transition: height .4s ease; }
.progress .seg.done { border-style: solid; border-color: var(--ink); }
.progress .seg.done i { height: 100%; background: var(--ink); }
.progress .seg.cur { border-style: solid; border-color: var(--ink); }
.progress .seg span { display: none; }

.live { font-stretch: 80%; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; min-width: 140px; text-align: right; }
.live b { color: var(--ink); font-weight: 700; }
.live .glyph { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--site); 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) + 44px) 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; } }

/* ---------- Navigation im Fluss ---------- */
.backlink { align-self: flex-start; background: none; border: 0; padding: 0; margin: 0 0 22px; cursor: pointer; font: inherit; font-stretch: 80%; font-size: 15px; font-weight: 600; 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-stretch: 80%; font-size: 15.5px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.flownav .skip:hover { color: var(--ink); }
.flownav .hint { font-stretch: 80%; font-size: 15px; color: var(--ink-3); }

/* Knöpfe: die Hauptaktion ist ein gelbes Bauschild mit hartem Schlagschatten */
button.primary {
  background: var(--you); color: var(--on-you); border: 2px solid var(--on-you); border-radius: 0; padding: 14px 26px;
  font: inherit; font-weight: 800; font-stretch: 112%; font-size: 16px; letter-spacing: .01em; cursor: pointer;
  box-shadow: 4px 4px 0 var(--shadow); transition: translate .12s, box-shadow .12s, opacity .2s;
}
body[data-theme="dark"] button.primary { border-color: var(--cobalt-ink); }
button.primary:hover:not(:disabled) { translate: -2px -2px; box-shadow: 6px 6px 0 var(--shadow); }
button.primary:active:not(:disabled) { translate: 2px 2px; box-shadow: 1px 1px 0 var(--shadow); }
button.primary:disabled { background: transparent; color: var(--ink-3); border: 2px dashed var(--paper-4); box-shadow: none; cursor: default; }
button.secondary {
  background: var(--sheet); color: var(--ink); border: 2px solid var(--ink); border-radius: 0;
  padding: 11px 18px; font: inherit; font-weight: 700; cursor: pointer;
}
button.secondary:hover:not(:disabled) { background: var(--ink); color: var(--paper); }

/* ---------- Typografie ---------- */
/* Kennung über generierten Titeln: Bemaßungsschrift mit Höhenkote davor */
.kicker { display: flex; align-items: center; gap: 9px; font-stretch: 78%; font-size: 16px; font-weight: 600; letter-spacing: .01em; color: var(--accent); margin-bottom: 14px; }
.kicker::before { content: ""; flex: 0 0 12px; height: 9px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); }
h1.display { font-size: clamp(32px, 4.5vw, 58px); line-height: 1.02; font-weight: 820; font-stretch: 116%; letter-spacing: -.025em; max-width: 19ch; margin-bottom: 20px; text-wrap: balance; }
h1.display.wide { max-width: 24ch; }
h1.display.long { font-size: clamp(25px, 3.1vw, 38px); font-stretch: 108%; max-width: 32ch; line-height: 1.1; }
h1.display.xlong { font-size: clamp(21px, 2.3vw, 28px); font-stretch: 100%; max-width: 46ch; line-height: 1.25; letter-spacing: -.01em; }
h2.title { font-size: clamp(26px, 3vw, 38px); line-height: 1.06; font-weight: 820; font-stretch: 112%; letter-spacing: -.022em; margin-bottom: 12px; max-width: 30ch; text-wrap: balance; }
.lead { font-size: 18.5px; color: var(--ink-2); max-width: 60ch; margin-bottom: 30px; line-height: 1.5; }
.small { font-stretch: 85%; 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: 840px; }
.options.single { grid-template-columns: 1fr; max-width: 660px; }
.options.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 940px; }
.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: 2px solid var(--paper-4); border-radius: 0; padding: 18px 20px;
  font: inherit; cursor: pointer; color: var(--ink); transition: border-color .15s, background .15s, box-shadow .15s, translate .15s;
}
.opt:hover { border-color: var(--ink); box-shadow: 4px 4px 0 var(--paper-3); }
.opt.on { border-color: var(--ink); background: var(--you); color: var(--on-you); box-shadow: 4px 4px 0 var(--shadow); translate: -2px -2px; }
.opt .box { flex: 0 0 20px; height: 20px; border: 2px solid var(--ink-3); margin-top: 2px; position: relative; transition: border-color .15s, background .15s; border-radius: 50%; }
.opt.multi .box { border-radius: 0; }
.opt.on .box { border-color: var(--on-you); background: var(--on-you); box-shadow: inset 0 0 0 3px var(--you); }
.opt .icon { flex: 0 0 34px; width: 34px; height: 34px; background: var(--paper-2); display: grid; place-items: center; color: var(--accent); font-weight: 800; font-size: 18px; }
.opt.on .icon { background: var(--sheet); color: var(--on-you); }
.opt .t { font-weight: 700; font-size: 17px; line-height: 1.3; }
.opt .d { font-stretch: 88%; color: var(--ink-2); font-size: 15px; margin-top: 3px; }
.opt.on .d { color: var(--on-you); }
.ftext { width: 100%; max-width: 660px; font: inherit; font-size: 18px; padding: 14px 16px; border: 2px solid var(--paper-4); border-radius: 0; background: var(--sheet); color: var(--ink); transition: border-color .15s; }
.ftext::placeholder { color: var(--ink-3); }
.ftext:focus { outline: none; border-color: var(--ink); box-shadow: 4px 4px 0 var(--you); }
.qmeta { font-stretch: 80%; font-size: 14px; font-weight: 600; color: var(--ink-3); margin-top: 16px; }
.qwhy { margin-top: 22px; font-size: 15px; color: var(--ink-2); max-width: 660px; padding-left: 14px; border-left: 2px solid var(--paper-4); }
.qwhy b { display: block; font-stretch: 80%; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.options.max .opt:not(.on) { opacity: .45; cursor: default; }

/* ---------- Start ---------- */
.start { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: start; }
.start > div:first-child { padding-top: 26px; }
.start-right { display: grid; gap: 22px; }
/* Titelbild: Skyline in Ansicht, ein Haus im Bau, der Kran setzt das nächste Stockwerk.
   Die eine große Bewegung der Seite: Häuser wachsen, Bemaßung zieht sich, Kran, Heute. */
.hero-art { width: 100%; height: auto; display: block; margin: -10px 0 0; overflow: visible; }
.hero-art .axes line { stroke: var(--grid-major); stroke-width: 1; stroke-dasharray: 10 3 2 3; }
.hero-art .fa { fill: var(--cobalt); }
.hero-art .fb { fill: var(--cobalt-lite); }
.hero-art .fc { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; }
.hero-art .wp { fill: #ffffff; opacity: .9; }
.hero-art .wb .wp, .hero-art g:has(.fb) .wp { fill: var(--cobalt); opacity: .55; }
.hero-art .hp { stroke: var(--ink); stroke-width: 1.2; opacity: .55; }
.hero-art .ant { stroke: var(--ink); stroke-width: 2; }
.hero-art .bld { transform-box: fill-box; transform-origin: 50% 100%; animation: rise-up .9s cubic-bezier(.2,.8,.25,1) backwards; animation-delay: calc(.15s + var(--i, 0) * .09s); }
.hero-art .scaf rect { fill: none; stroke: var(--site); stroke-width: 2; stroke-dasharray: 5 4; }
.hero-art .scaf line { stroke: var(--site); stroke-width: 1.2; opacity: .7; }
.hero-art .scaf { animation: fade .5s ease backwards 1.05s; }
.hero-art .ground { stroke: var(--ink); stroke-width: 3; }
.hero-art .crane path, .hero-art .crane line { fill: none; stroke: var(--you); stroke-width: 3; stroke-linecap: square; filter: drop-shadow(1px 1px 0 var(--ink)); }
.hero-art .crane .lat { stroke-width: 1.8; }
.hero-art .crane .cw { fill: var(--ink); }
.hero-art .crane .mast, .hero-art .crane .lat, .hero-art .crane .jib { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s cubic-bezier(.4,0,.2,1) forwards 1.2s; }
.hero-art .crane .jib { animation-delay: 1.8s; }
.hero-art .crane .cw { animation: fade .4s ease backwards 2.2s; }
.hero-art .hook line { stroke: var(--ink); stroke-width: 1.5; filter: none; }
.hero-art .hook rect { fill: var(--site); }
.hero-art .hook { animation: hook-in 1s cubic-bezier(.3,.8,.3,1.1) backwards 2.3s; }
@keyframes hook-in { from { opacity: 0; translate: 0 -40px; } }
.hero-art .dim path { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s ease forwards 1.5s; }
.hero-art .kote path { fill: var(--ink); } .hero-art .kote text { font: 600 13px var(--font); font-stretch: 78%; fill: var(--ink); }
.hero-art .kote { animation: fade .4s ease backwards 1.6s; }
.hero-art .heute line { stroke: var(--you); stroke-width: 3; }
.hero-art .heute path { fill: var(--you); stroke: var(--ink); stroke-width: 1.5; }
.hero-art .heute text { font: 800 18px var(--font); font-stretch: 112%; fill: var(--ink); }
.hero-art .heute { animation: pop .5s cubic-bezier(.2,.8,.3,1.3) backwards 2.7s; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise-up { from { scale: 1 0; } }
.uploadbox {
  border: 2px dashed var(--ink-3); padding: 24px; background: var(--sheet);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start; transition: border-color .15s, background .15s;
}
.uploadbox.drag { border-color: var(--ink); background: var(--you-soft); }
.uploadbox strong { font-size: 18px; font-weight: 750; font-stretch: 105%; }
.uploadbox .ok { font-weight: 700; color: var(--ink); }
.uploadbox button:disabled { opacity: .5; cursor: default; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.5px solid var(--paper-4); background: var(--sheet); border-radius: 0; padding: 8px 12px;
  font: inherit; font-stretch: 88%; font-size: 14.5px; font-weight: 600; 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(--you); color: var(--on-you); border-color: var(--on-you); }
.chip:disabled { opacity: .5; cursor: default; }
.or { display: flex; align-items: center; gap: 12px; font-stretch: 80%; font-size: 14px; font-weight: 600; color: var(--ink-3); margin: 22px 0 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1.5px; background: var(--paper-4); }
.steps { display: grid; border-top: 2px solid var(--ink); }
.step { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 13px 2px; border-bottom: 1px solid var(--paper-4); }
.step .n { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); padding-top: 2px; }
.step b { display: block; font-size: 16.5px; font-weight: 700; }
.step span { color: var(--ink-2); font-size: 15px; }
.engine { display: grid; gap: 10px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--paper-4); max-width: 520px; }
.engine .lbl { font-stretch: 78%; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.cv-locked { font-stretch: 88%; font-size: 14.5px; color: var(--ink-3); margin-top: 12px; }
.rotator { display: flex; align-items: center; gap: 2px; margin: 0 0 26px; font-size: 21px; font-weight: 650; font-stretch: 104%; min-height: 1.6em; color: var(--ink); letter-spacing: -.01em; }
.rotator .line { white-space: pre-wrap; }
.rotator .cursor { display: inline-block; width: 10px; height: 3px; background: var(--ink); margin-left: 3px; align-self: flex-end; margin-bottom: .35em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ---------- Kurzprofil (Stufe 0): Schriftfeld einer Bauzeichnung ---------- */
.hero-card { position: relative; border: 2px solid var(--ink); background: var(--sheet); padding: 0; overflow: hidden; }
.hero-card .stat-row { margin-right: -1.5px; }
.hero-card > .k { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); padding: 12px 22px; border-bottom: 1.5px solid var(--paper-4); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat { padding: 20px 22px; border-right: 1.5px solid var(--paper-4); border-bottom: 1.5px solid var(--paper-4); }
.stat b { display: block; font-size: clamp(44px, 5vw, 64px); line-height: .95; font-weight: 850; font-stretch: 118%; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat span { display: block; font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 10px; line-height: 1.3; }
.stat .beleg { display: block; font-stretch: 85%; font-size: 14px; color: var(--ink-3); margin-top: 4px; font-weight: 400; }
.belege { list-style: none; padding: 16px 22px 20px; display: grid; gap: 7px; }
.belege li { position: relative; padding-left: 20px; font-size: 15.5px; color: var(--ink-2); }
.belege li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--ink); }
.belege li.ctx::before { background: none; border: 1.5px solid var(--site); }
.check-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 36px 0 0; }
.check-k { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); }
.korrektur { margin-top: 10px; display: grid; gap: 10px; max-width: 760px; }
.korrektur label { font-weight: 700; }
.korrektur textarea.ftext { resize: vertical; max-width: none; font-size: 16px; line-height: 1.45; }

/* Stationen als Gebäudeschnitt: jede Station ein Geschoss, die erste unten,
   die heutige oben mit gelber Höhenkote. Links die Zeiträume wie Höhenkoten,
   die Geschossdecken als Linien, unten das Fundament. */
.timeline { position: relative; margin: 18px 0 22px; --kw: 150px; }
.timeline .rail { position: absolute; left: calc(var(--kw) + 30px); top: 0; bottom: 14px; width: 2px; background: var(--ink-2); }
.timeline ol { list-style: none; padding: 0; display: flex; flex-direction: column-reverse; position: relative; }
.timeline li { display: grid; grid-template-columns: var(--kw) 30px 1fr; align-items: center; min-height: 50px; position: relative; }
.timeline li::after { content: ""; position: absolute; left: calc(var(--kw) + 30px); right: 0; top: 0; height: 1.5px; background: var(--paper-4); }
.timeline li:last-child::after { height: 3px; background: var(--ink); }
.timeline .when { font-stretch: 80%; font-weight: 600; font-size: 15px; color: var(--ink-2); text-align: right; padding-right: 8px; font-variant-numeric: tabular-nums; align-self: start; padding-top: 2px; }
.timeline .dot { width: 14px; height: 11px; margin: 0 auto; align-self: start; margin-top: -5px; background: var(--ink-2); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.timeline li:last-child .dot { background: var(--you); width: 18px; height: 14px; margin-top: -7px; filter: drop-shadow(0 0 0 var(--ink)); }
.timeline li:last-child .when { color: var(--ink); font-weight: 750; }
.timeline .what { font-size: 15.5px; color: var(--ink-2); line-height: 1.35; padding: 12px 0 12px 16px; }
.timeline li:last-child .what { color: var(--ink); font-weight: 700; }
.timeline::after { content: ""; display: block; height: 14px; margin-left: calc(var(--kw) + 30px); border-top: 3px solid var(--ink);
  background: repeating-linear-gradient(-45deg, transparent 0 5px, var(--paper-4) 5px 6.5px); }
.timeline li.empty { display: block; padding: 12px 0 12px calc(var(--kw) + 46px); }
.chg { display: inline-block; margin-left: 8px; padding: 1px 6px; font-stretch: 80%; font-size: 12.5px; font-weight: 700; color: var(--on-you); background: var(--you); vertical-align: 1px; }
.kin { width: 100%; font: inherit; font-size: 15px; padding: 8px 10px; border: 1.5px solid var(--paper-4); border-radius: 0; background: var(--sheet); color: var(--ink); }
.kin:focus { outline: none; border-color: var(--you); }
.mini { font: inherit; font-stretch: 85%; font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 0; border: 1.5px solid var(--ink-3); background: transparent; color: var(--ink); cursor: pointer; }
.mini.go { background: var(--you); border-color: var(--you); color: var(--on-you); }
.mini:disabled { opacity: .4; cursor: not-allowed; }
.timeline.editing ol { flex-direction: column; gap: 14px; }
.timeline.editing .rail, .timeline.editing::after, .timeline.editing li::after { display: none; }
.timeline.editing li { grid-template-columns: 24px 1fr auto; column-gap: 12px; align-items: start; min-height: 0; }
.timeline.editing .dot { grid-column: 1; grid-row: 1 / span 2; margin: 10px 0 0; }
.timeline.editing .when, .timeline.editing .what { grid-column: 2; text-align: left; padding: 0; }
.timeline.editing .xbtn { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.timeline .what .kin { margin-top: 8px; }
.xbtn { appearance: none; width: 28px; height: 28px; padding: 0; line-height: 1; font-size: 18px; cursor: pointer; border-radius: 0; border: 1.5px solid var(--paper-4); background: var(--sheet); color: var(--ink-2); }
.xbtn:hover, .xbtn:focus-visible { outline: none; border-color: var(--site); color: var(--site); }
.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-stretch: 85%; font-size: 14.5px; font-weight: 700; padding: 7px 12px; border-radius: 0; border: 1.5px dashed var(--paper-4); background: transparent; color: var(--ink-2); cursor: pointer; }
.st-add:hover, .st-edit:hover, .st-edit:focus-visible { border-color: var(--you); color: var(--ink); outline: none; }
.linkbtn { justify-self: start; font: inherit; font-stretch: 88%; font-size: 15.5px; font-weight: 600; padding: 0; border: 0; background: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkbtn:hover { color: var(--ink); }
.korrektur-body { display: grid; gap: 10px; }
.korrektur-body[hidden] { display: none; }

/* ---------- Hinweiskästen ---------- */
.callout { background: var(--sheet); border: 2px solid var(--ink); padding: 16px 20px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; max-width: 900px; box-shadow: 4px 4px 0 var(--paper-3); }
.callout .k { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); padding-top: 2px; white-space: nowrap; }
.callout p { font-weight: 650; }
.callout + .callout { margin-top: 12px; }
.callout.answered { border-color: var(--paper-4); box-shadow: none; background: transparent; }
.missing { background: var(--site-soft); border: 2px dashed var(--site); padding: 18px 22px; max-width: 900px; overflow-wrap: anywhere; }
.missing .k { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--site); margin-bottom: 8px; }
.missing ul { margin: 0 0 0 18px; font-weight: 600; }

/* ---------- Blatt 1: Kernthese (nur Text) ---------- */
.kern { margin: -4px 0 26px; max-width: 900px; }
.kchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.kchip { font-stretch: 88%; font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 5px 11px 5px 9px; border: 1.5px solid var(--paper-4); background: var(--sheet); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.kchip::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--ink); margin-right: 8px; vertical-align: 1px; }
.kwhy { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; border-left: 3px solid var(--ink); padding: 4px 0 4px 16px; }
.kwhy .k { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.kwhy p { font-size: 17.5px; font-weight: 650; }
.kfit { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-top: 14px; font-size: 15px; color: var(--ink-2); padding: 10px 14px; border: 2px solid var(--site); background: var(--site-soft); }
.kfit.offen { border-style: dashed; }
.kfit .k { font-stretch: 78%; font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--site); }
.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-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); }

/* ---------- Beleg-Zeile (gleich auf allen Blättern) ---------- */
.fp-beleg { background: var(--sheet); border: 1.5px solid var(--paper-4); border-left: 4px solid var(--you); padding: 11px 16px; margin-top: 14px; }
.fp-beleg .k { font-stretch: 78%; font-size: 14.5px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.fp-beleg .k.gap { color: var(--site); }
.fp-beleg h4 { font-size: 17px; font-weight: 750; letter-spacing: -.01em; margin-bottom: 2px; }
.fp-beleg p { color: var(--ink-2); font-size: 15px; }

/* ---------- Zeichenerklärung der Baustufen (HTML) ---------- */
.bau-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-stretch: 85%; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.bau-legend .li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.bau-legend .sw { width: 22px; height: 16px; flex: none; }
/* Baustufen als Fläche (HTML-Bauteile: Swatch, Stockwerk) */
.lv0.sw, .lv0.blk { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='18'%3E%3Crect x='4' y='5' width='8' height='8' fill='%231b37c2'/%3E%3C/svg%3E") 0 0 / 16px 18px; border: 2px solid #fff; }
.lv1.sw, .lv1.blk { background: var(--cobalt-lite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='18'%3E%3Crect x='4' y='5' width='8' height='8' fill='%231b37c2' opacity='.65'/%3E%3C/svg%3E") 0 0 / 16px 18px; border: 2px solid #fff; }
.lv2.sw, .lv2.blk { background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255,255,255,.75) 6px 7.5px); border: 2px solid #fff; }
.lv3.sw, .lv3.blk { background: linear-gradient(rgba(255,255,255,.55) 1.5px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(255,255,255,.55) 1.5px, transparent 1.5px) 0 0 / 14px 14px; border: 2px dashed #fff; }
.lv4.sw, .lv4.blk { background: transparent; border: 2px dashed rgba(255,255,255,.8); }

/* ---------- Blatt 2: Standort + Fingerprint als Grundriss ---------- */
.standort { margin: 2px 0 16px; max-width: 900px; display: grid; grid-template-columns: 168px 1fr; gap: 4px 26px; align-items: start; }
/* Fünf Etagen der Karriere, Start unten: ATLAS gelb, Selbstbild als Umriss */
.stower { grid-row: span 2; display: flex; flex-direction: column-reverse; border-bottom: 3px solid var(--ink); }
.stower .sf { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 24px; padding: 0 6px; border: 1.5px solid var(--paper-4); border-bottom: 0; margin: 0 calc(var(--i) * 5px); }
.stower .sf .n { font-stretch: 78%; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.stower .sf.atlas { background: var(--you); border-color: var(--you); }
.stower .sf.atlas .n { color: var(--on-you); font-weight: 750; }
.stower .sf.self { outline: 2px dashed var(--ink); outline-offset: -2px; }
.stower .m { font-stretch: 78%; font-size: 11.5px; font-weight: 800; padding: 0 4px; line-height: 16px; }
.stower .m.a { background: var(--on-you); color: var(--you); }
.stower .m.s { border: 1.5px solid var(--ink); color: var(--ink); line-height: 13px; }
.stower .sf.atlas .m.s { border-color: var(--on-you); color: var(--on-you); }
.standort .srow { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.standort .sp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.standort .sp .k { font-stretch: 78%; font-size: 14.5px; font-weight: 700; color: var(--accent); }
.standort .sp b { font-size: 19px; font-weight: 800; font-stretch: 108%; }
.standort .sp .d { font-stretch: 85%; font-size: 14px; color: var(--ink-3); }
.standort .sv { flex: 1 1 100%; font-weight: 650; font-size: 15.5px; padding: 6px 12px; border-left: 4px solid var(--ink); background: var(--sheet); }
.standort .sv.up { border-left-color: var(--you); }
.standort .sv.open { border-left-color: var(--site); }
.standort .sb { font-size: 14.5px; color: var(--ink-2); margin-top: 8px; max-width: 80ch; }
.pick { cursor: pointer; text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; }
.pick:hover, .pick:focus-visible { color: var(--ink); text-decoration-color: var(--you); }
.read .k.open + p .pick { color: var(--site); }
.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: rgba(255,255,255,.3); stroke-width: 1; stroke-dasharray: 5 6; }
.radar .grid.outer { stroke: rgba(255,255,255,.45); stroke-dasharray: none; }
.radar .axis { stroke: rgba(255,255,255,.55); stroke-width: 1.2; stroke-dasharray: 16 5 2 5; }
.radar .bubble circle { fill: var(--paper); stroke: #fff; stroke-width: 1.5; }
.radar .bubble text { font: 700 14px var(--font); font-stretch: 85%; fill: #fff; }
.radar .hat { stroke: rgba(255,255,255,.5); stroke-width: 1.6; }
.radar .shape { stroke: none; }
.radar .wall { fill: rgba(255,255,255,.07); stroke: #fff; stroke-width: 6; stroke-linejoin: miter; }
.radar .pt { fill: #fff; stroke: var(--paper); 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: 750; line-height: 1.15; color: var(--ink); overflow-wrap: normal; hyphens: manual; letter-spacing: -.01em; }
.rlabel .t { display: block; }
.rlabel .ax { display: none; }
.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.pickable { cursor: pointer; pointer-events: all; }
.rlabel.pickable.on .t { color: var(--you); }
/* Stufen-Kästchen: so viele gefüllt wie die Stufe hoch ist (Stockwerke) */
.dots { display: inline-flex; gap: 3px; align-items: flex-end; }
.dots i { width: 9px; height: 9px; border: 1.5px solid var(--paper-4); }
.dots i.on { background: var(--ink); border-color: var(--ink); }
.rlabel .dots i { width: 10px; height: 10px; }
/* Zeichenerklärung zum Grundriss: die vier Lesarten als Spalten */
.fp-legende { border-top: 1.5px solid var(--paper-4); margin-top: 24px; padding-top: 15px; }
.fp-legende > h3 { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
.fp-legende .fp-beleg { margin-top: 18px; }
.reads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.read { padding: 0 18px; border-left: 1.5px 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-stretch: 80%; font-weight: 750; font-size: 14.5px; margin-bottom: 6px; color: var(--ink); }
.read .k::before { content: ""; width: 11px; height: 11px; flex: 0 0 11px; background: #fff; }
.read .k.diff::before { background: var(--cobalt-lite); }
.read .k.grow::before { background: repeating-linear-gradient(-45deg, transparent 0 2.5px, #fff 2.5px 4px); border: 1.5px solid #fff; }
.read .k.open::before { background: none; border: 1.5px dashed var(--site); }
.read .k.open { color: var(--site); }
.read p { color: var(--ink-2); font-size: 15px; line-height: 1.45; }

/* ---------- Blatt 3: Aha – der Turm aus Stockwerken ---------- */
.aha { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; margin-top: 4px; }
.aha-map { min-width: 0; }
.tower { position: relative; padding: 78px 0 0 70px; --tw: min(290px, 46%); }
.tower .floors { display: flex; flex-direction: column-reverse; position: relative; z-index: 1; }
.floor { display: grid; grid-template-columns: var(--tw) 1fr; align-items: center; gap: 0 26px; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; outline: none; }
.floor .blk { display: block; height: 80px; border-bottom-width: 0 !important; position: relative; transition: outline-color .2s; outline: 3px solid transparent; outline-offset: 3px; }
.floor:first-child .blk { border-bottom-width: 2px !important; }
/* Geschossdecke: kragt links und rechts über die Fassade aus – so liest man Stockwerke */
.floor .blk::after { content: ""; position: absolute; left: -9px; right: -9px; bottom: -2px; height: 5px; background: var(--cobalt-ink); border: 1.5px solid #fff; }
.floor:first-child .blk::after { display: none; }
.floor .flab { position: relative; display: grid; gap: 1px; padding: 6px 0; }
.floor .flab::before { content: ""; position: absolute; left: -22px; top: 50%; width: 14px; height: 1.5px; background: rgba(255,255,255,.6); }
.floor .flab b { font-size: 18px; font-weight: 780; font-stretch: 104%; line-height: 1.2; color: var(--ink); hyphens: auto; overflow-wrap: break-word; }
.floor .flab span { font-stretch: 85%; font-size: 15px; color: var(--ink-3); line-height: 1.3; }
.floor:hover .blk, .floor:focus-visible .blk { outline-color: rgba(255,255,255,.5); }
.floor.on .blk { outline-color: var(--you); }
.floor.on .flab b { color: var(--you); }
.tower .found { display: block; height: 14px; width: calc(var(--tw) + 30px); margin-left: -15px; border-top: 3px solid #fff;
  background: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(255,255,255,.35) 5px 6.5px); }
/* Kran: Gittermast links, Ausleger über dem Dach, Seil zum Richtkranz */
.tower .crane { position: absolute; left: 0; top: 0; bottom: 14px; width: calc(70px + var(--tw) * .9); pointer-events: none; }
.tower .crane .mast { position: absolute; left: 22px; top: 12px; bottom: 0; width: 18px; border-left: 2.5px solid var(--you); border-right: 2.5px solid var(--you);
  background: repeating-linear-gradient(45deg, transparent 0 10px, var(--you) 10px 12px); }
.tower .crane .jib { position: absolute; left: 4px; right: 0; top: 12px; height: 13px; border-top: 2.5px solid var(--you); border-bottom: 2.5px solid var(--you);
  background: repeating-linear-gradient(60deg, transparent 0 9px, var(--you) 9px 11px); }
.tower .crane .rope { position: absolute; right: 26px; top: 24px; width: 2px; height: 36px; background: var(--you); }
.tower .crane .rope::after { content: ""; position: absolute; left: -7px; bottom: -8px; width: 16px; height: 10px; border: 2.5px solid var(--you); border-top: 0; border-radius: 0 0 8px 8px; }
/* Richtkranz auf dem Dach: das Haus steht – die Stärke ist da */
.tower .roof { position: absolute; z-index: 2; top: 18px; left: calc(70px + var(--tw) / 2 - 24px); width: 48px; height: 58px; }
.tower .roof svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tower .roof line { stroke: #fff; stroke-width: 2.5; }
.tower .roof path { fill: var(--you); stroke: var(--cobalt-ink); stroke-width: 1.5; }
.tower .roof path.rb { fill: none; stroke: var(--you); stroke-width: 2.5; }
.aha-text { min-width: 0; }
.aha-text > .k { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.aha-these { font-size: 28px; line-height: 1.15; font-weight: 820; font-stretch: 110%; letter-spacing: -.02em; margin: 0 0 18px; hyphens: auto; }
.aha-these .w { display: inline-block; }
.aha-why .k { display: block; font-stretch: 78%; font-size: 14.5px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.aha-why p { color: var(--ink-2); font-size: 16px; line-height: 1.45; }
.aha-beleg { margin-top: 16px; }
.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: 1.15fr .85fr; gap: 36px; } }

/* ---------- Blatt 4: Unter Wert – Skyline hinter dem Bauzaun ---------- */
.uw { margin-top: 4px; }
.uw-map { min-width: 0; }
.uw svg.skyline { display: block; width: 100%; height: auto; overflow: visible; margin: 0 auto; }
.skyline .b .body { stroke: #fff; stroke-width: 2; stroke-linejoin: miter; }
.skyline .b.lv0 .body { fill: #fff; } .skyline .b.lv1 .body { fill: var(--cobalt-lite); }
.skyline .b.lv2 .body { fill: rgba(255,255,255,.06); } .skyline .b.lv3 .body { fill: none; stroke-dasharray: 8 5; } .skyline .b.lv4 .body { fill: none; stroke-dasharray: 5 6; stroke-opacity: .85; }
.skyline .over { stroke: none; pointer-events: none; }
.skyline .win { fill: var(--cobalt); } .skyline .b.lv1 .win { opacity: .6; }
.skyline .hat { stroke: rgba(255,255,255,.7); stroke-width: 1.6; }
.skyline .scf { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.4; }
.skyline .ground { stroke: #fff; stroke-width: 3; }
.skyline .lvline { stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-dasharray: 3 6; }
.skyline .kote { fill: rgba(255,255,255,.75); }
.skyline .lvt { font: 600 calc(13.5px * var(--rs, 1)) var(--font); font-stretch: 78%; fill: var(--ink-3); }
.skyline .pname { font: 700 calc(14.5px * var(--rs, 1)) var(--font); font-stretch: 85%; fill: var(--ink-2); }
.skyline .flag { cursor: pointer; outline: none; }
.skyline .pole { stroke: var(--you); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.skyline .tri { fill: var(--you); stroke: var(--cobalt-ink); stroke-width: 1.5; stroke-linejoin: round; }
.skyline .tnum { font: 850 calc(12px * var(--rs, 1)) var(--font); fill: var(--on-you); }
.skyline .ftitle { font: 800 calc(17px * var(--rs, 1)) var(--font); font-stretch: 108%; fill: var(--ink); letter-spacing: -.01em; }
.skyline .fsub { font: 600 calc(14px * var(--rs, 1)) var(--font); font-stretch: 85%; fill: var(--ink-3); }
.skyline .flag.on .ftitle, .skyline .flag:hover .ftitle, .skyline .flag:focus-visible .ftitle { fill: var(--you); }
.skyline .flag.on .tri { stroke: #fff; stroke-width: 2.5; }
/* Der Bauzaun mit dem Jobtitel: steht vor den Füßen der Häuser, oben das Absperrband */
.fence { position: relative; z-index: 2; margin: -22px 0 0; padding: 9px 16px 10px; background: var(--cobalt-ink); border-top: 7px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--site) 0 10px, #fff 10px 20px) 7; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.fence .k { font-stretch: 78%; font-size: 14px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.fence b { font-size: 16px; font-weight: 750; color: #fff; overflow-wrap: anywhere; }
.uw-beleg { margin-top: 14px; }
.uw-beleg p .heute { font-stretch: 85%; font-weight: 700; color: var(--ink-3); }
.uw-karten { margin-top: 18px; padding-top: 14px; border-top: 1.5px solid var(--paper-4); }
.uw-karten > .k { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.uw-karten .grid3 { margin: 0; }
.uw-karten .ucard { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; }
.uw-karten .ucard .n { line-height: 1.5; }
.uw-karten .claim.wartet { font-stretch: 85%; font-size: 14.5px; color: var(--ink-3); }
@media (max-width: 640px) { .skyline .pname { display: none; } }
/* Schmal: Markierungen nur als nummeriertes Dreieck am Dach, die Namen stehen im Schlüssel darunter */
.skyline.narrow .pole, .skyline.narrow .ftitle, .skyline.narrow .fsub, .skyline.narrow .pname { display: none; }
.uw-key { display: none; }
.uw-map:has(.skyline.narrow) .uw-key { display: grid; gap: 6px; margin-top: 12px; }
.uw-key .kb { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: baseline; text-align: left; background: none; border: 1.5px solid var(--paper-4); padding: 8px 12px; font: inherit; color: var(--ink); cursor: pointer; }
.uw-key .kb i { grid-row: span 2; align-self: center; width: 26px; height: 22px; display: grid; place-items: end center; padding-bottom: 1px; background: var(--you); clip-path: polygon(50% 0, 100% 100%, 0 100%); font: normal 850 12px var(--font); color: var(--on-you); }
.uw-key .kb b { font-size: 16px; font-weight: 800; font-stretch: 106%; }
.uw-key .kb span { font-stretch: 85%; font-size: 14px; color: var(--ink-3); }
.uw-key .kb.on { border-color: var(--you); }
.uw-key .kb.on b { color: var(--you); }

/* ---------- Karten / Raster ---------- */
.card { background: var(--sheet); border: 1.5px solid var(--paper-4); padding: 30px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 22px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0 22px; }
.ucard { background: var(--sheet); border: 1.5px solid var(--paper-4); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.ucard .n { font-stretch: 78%; font-size: 15px; font-weight: 800; color: var(--accent); }
.ucard .claim { font-size: 15.5px; line-height: 1.5; }
.ucard .claim b { font-weight: 750; }
.ucard .claim .cond { font-weight: 450; color: var(--site); }
.ucard .diff { display: grid; gap: 8px; }
.ucard .diff .v { background: var(--paper-2); padding: 10px 12px; font-size: 15px; }
body[data-theme="dark"] .ucard .diff .v { background: rgba(255,255,255,.07); }
.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: 650; border-left: 4px solid var(--you); }
.ucard .cond { font-stretch: 85%; font-size: 14px; color: var(--site); font-weight: 600; }

/* ---------- Blatt 5: Was noch fehlt – Baulücken in einem Block ----------
   Der Block ist ein Lageplan: die belegten Kompetenzen als bebaute
   Grundstücke (Dach in Draufsicht, still), dazwischen die Lücken – Evidence
   Gap = das Haus steht, ist aber nicht eingetragen (Gerüst, orange
   gestrichelt), Skill Gap = freies Grundstück (Kreuz). Die leeren Kästchen
   sind die fehlenden Nachweise. Kein Ort auf einer Karte: für eine Lücke
   gibt es keine Koordinate, also wird keine erfunden. */
.wf { margin: 6px 0 22px; }
.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 12px; background: var(--cobalt-ink); border: 2px solid rgba(255,255,255,.5); }
.wft { position: relative; min-height: 120px; padding: 10px 12px 11px; border: 2px solid transparent; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; overflow: hidden; min-width: 0; isolation: isolate; }
.wft .th { font-stretch: 88%; font-size: calc(15px * var(--fs, 1)); line-height: 1.2; font-weight: 700; overflow-wrap: normal; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* bebaut: Flachdach in Draufsicht – Fläche, Attika als innere Linie, ein Dachaufbau */
.wft.map { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.45); box-shadow: inset 0 0 0 7px rgba(255,255,255,.04), inset 0 0 0 8.5px rgba(255,255,255,.28); }
.wft.map::before { content: ""; position: absolute; right: 16px; top: 16px; width: 26px; height: 18px; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.wft.map .th { position: relative; color: rgba(255,255,255,.8); font-weight: 600; }
.wft.map .th, .wft.ev .th, .wft.sk .th { align-self: flex-start; padding: 2px 6px; margin-left: -6px; background: var(--cobalt-ink); }
.wft.ev, .wft.sk { cursor: pointer; border-style: dashed; border-color: var(--site); transition: border-color .2s, box-shadow .2s, translate .2s; }
.wft.ev { background: linear-gradient(rgba(255,138,76,.38) 1.5px, transparent 1.5px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(255,138,76,.38) 1.5px, transparent 1.5px) 0 0 / 22px 22px, rgba(255,138,76,.08); }
.wft.sk { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100M100 0L0 100' fill='none' stroke='%23ff8a4c' stroke-opacity='.6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100%; }
.wft.ev .th, .wft.sk .th { color: #fff; }
.wft.ev:hover, .wft.sk:hover { translate: 0 -2px; }
.wft.on { border-style: solid; border-color: var(--you); box-shadow: 0 0 0 2px var(--you); }
.wf-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-stretch: 78%; font-size: 13.5px; font-weight: 700; margin-bottom: auto; }
.wf-top .nr { color: #fff; background: var(--cobalt-ink); padding: 0 4px; flex: none; }
.wf-top .art { color: var(--site); background: var(--cobalt-ink); padding: 0 4px; }
.wft.on .wf-top .nr { background: var(--you); color: var(--on-you); }
.wft .bel { display: flex; gap: 4px; margin-top: 2px; position: relative; }
.wft .bel i { width: 10px; height: 10px; border: 1.5px solid var(--site); background: var(--cobalt-ink); }
.wf-beleg .k.ev, .wf-beleg .k.sk { color: var(--site); }
.wf-belege { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--paper-3); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.wf-belege .k { font-stretch: 78%; font-size: 14px; font-weight: 700; color: var(--accent); }
.wf-belege ul { list-style: none; margin: 0; padding: 0; flex: 1 0 100%; display: grid; gap: 3px; font-size: 14.5px; color: var(--ink-2); line-height: 1.35; }
.wf-belege li { position: relative; padding-left: 16px; overflow-wrap: anywhere; }
.wf-belege li::before { content: ""; position: absolute; left: 0; top: .38em; width: 8px; height: 8px; border: 1.5px solid var(--site); }

/* ---------- Blatt 6: Opportunity Map – Stadtplan mit „Du bist hier" ---------- */
.omap-wrap { overflow-x: auto; margin: 6px 0 18px; padding: 4px 0; }
.omap-frame { display: grid; grid-template-columns: 30px minmax(680px, 1fr) 30px; grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 8px; align-items: center; }
.omap-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 15px; line-height: 1.3; color: var(--ink-2); }
.omap-legend i { width: 16px; height: 16px; border-radius: 50%; background: var(--you); border: 2.5px solid var(--cobalt-ink); box-shadow: 0 0 0 2px var(--you); flex: 0 0 16px; margin: 0 2px 0 3px; }
.omap-legend b { color: var(--you); font-stretch: 100%; font-size: 15px; font-weight: 800; }
/* Achsentitel als Straßenschilder */
.omap-frame .axl { font-stretch: 80%; font-size: 13.5px; font-weight: 700; color: var(--cobalt-ink); background: #fff; padding: 3px 10px; border: 1.5px solid var(--cobalt-ink); box-shadow: 0 0 0 1.5px #fff; 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; padding: 10px 3px; }
.omap-frame .axl.r { grid-column: 3; grid-row: 2; writing-mode: vertical-rl; padding: 10px 3px; }
@media (max-width: 860px) { .omap-frame .axl.t, .omap-frame .axl.b { justify-self: start; } }
/* Häuserblöcke: jede Zelle ein Block, dazwischen Straßen in Cobalt */
.omap { grid-column: 2; grid-row: 2; position: relative; height: 560px; background-color: rgba(255,255,255,.1);
  background-image: linear-gradient(var(--paper) 0 7px, transparent 7px), linear-gradient(90deg, var(--paper) 0 7px, transparent 7px);
  background-size: 12.5% 12.5%; background-position: -4px -4px; }
.omap::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 4px var(--paper); }
/* Hauptstraßen: die beiden Achsen, breit, mit Mittelstrich */
.omap .ax { position: absolute; background-color: var(--cobalt-ink); }
.omap .ax.x { left: 0; right: 0; top: calc(50% - 7px); height: 14px; background-image: linear-gradient(90deg, rgba(255,255,255,.8) 0 55%, transparent 55%); background-size: 22px 2px; background-repeat: repeat-x; background-position: 0 50%; }
.omap .ax.y { top: 0; bottom: 0; left: calc(5% - 7px); width: 14px; background-image: linear-gradient(rgba(255,255,255,.8) 0 55%, transparent 55%); background-size: 2px 22px; background-repeat: repeat-y; background-position: 50% 0; }
.omap .heute { position: absolute; left: 5%; 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: 26px; height: 26px; border-radius: 50%; background: var(--you); border: 4px solid var(--cobalt-ink); box-shadow: 0 0 0 3px var(--you), 0 0 0 10px rgba(255,198,26,.22); }
.omap .heute b { position: absolute; left: 22px; top: 0; translate: 0 -50%; font-stretch: 100%; font-size: 14px; font-weight: 850; color: var(--on-you); white-space: nowrap; background: var(--you); padding: 2px 8px; border: 1.5px solid var(--cobalt-ink); }
.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; }
/* Ziel als Haus in Draufsicht: Quadrat; sehr hohe Passung massiv, sonst Umriss */
.omap .pin .dot .num { display: none; font-style: normal; }
.omap-key { display: none; }
.omap .pin .dot { display: block; width: 16px; height: 16px; background: var(--cobalt-ink); border: 3px solid #fff; translate: 0 -50%; transition: scale .25s cubic-bezier(.2,.7,.2,1), background .25s, border-color .25s; }
.omap .pin.strong .dot { background: #fff; box-shadow: 0 0 0 2px var(--cobalt-ink); }
.omap .pin .name { position: absolute; bottom: 14px; width: 180px; text-wrap: balance; text-align: center; font-size: 14px; font-weight: 750; line-height: 1.2; color: #fff; letter-spacing: -.01em; text-shadow: 0 0 3px var(--paper), 0 0 6px var(--paper), 0 0 10px var(--paper); }
.omap .pin .pfit { position: absolute; top: 13px; font-stretch: 80%; font-size: 12.5px; font-weight: 700; padding: 1px 7px; background: var(--cobalt-ink); color: var(--ink-2); border: 1px solid rgba(255,255,255,.35); white-space: nowrap; transition: background .25s, color .25s, border-color .25s; }
.omap .pin .pfit.hi { color: #fff; border-color: #fff; }
.omap .pin.flip .name { bottom: auto; top: 13px; }
.omap .pin.flip .pfit { top: auto; bottom: 13px; }
.omap .pin:hover .dot, .omap .pin:focus-visible .dot { scale: 1.2; }
.omap .pin.on .dot { scale: 1.3; background: var(--you); border-color: var(--cobalt-ink); box-shadow: 0 0 0 2px var(--you); }
.omap .pin.on .name { color: var(--you); }
.omap .pin.on .pfit { background: var(--you); color: var(--on-you); border-color: var(--you); }

/* ---------- Rollen-Karten (Opportunity-Detail, Richtung, Alternative) ---------- */
.roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0 22px; }
.role { background: var(--sheet); border: 1.5px solid var(--paper-4); padding: 20px 22px; }
.role.strong { border-color: var(--ink); }
.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: 800; font-stretch: 104%; letter-spacing: -.01em; }
.fit { display: inline-flex; align-items: center; gap: 8px; font-stretch: 80%; font-size: 14.5px; font-weight: 700; 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: 14.5px; font-weight: 650; color: var(--site); }
.role .hint { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); border-top: 1.5px dashed var(--paper-4); padding-top: 8px; }
.groupk { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); margin: 18px 0 8px; }
.role.detail { margin-bottom: 22px; border-left: 4px solid var(--you); }
.role.detail .dir { font-stretch: 80%; font-size: 14.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 8px; }

/* Richtung: die empfohlene Rolle als Bauschild – weiße Tafel, Zeilen wie
   eine Tabelle, zwei Pfosten darunter. Die Tafel trägt die Token des
   Planpapiers, damit alles darin wie auf einem hellen Blatt steht. */
.s-richtung .role.detail.richtung, .role.rc {
  --ink: #0c1a63; --ink-2: #39467f; --ink-3: #5d6896; --accent: #1b37c2; --site: #d9480f; --paper-3: #d5dcee; --paper-4: #aeb9da; --sheet: #ffffff;
  color: var(--ink); background: var(--sheet); border: 3px solid var(--cobalt-ink);
}
.s-richtung .role.detail.richtung { position: relative; max-width: 900px; padding: 0; margin-bottom: 64px; box-shadow: 8px 8px 0 var(--cobalt-ink); }
.s-richtung .role.detail.richtung::before, .s-richtung .role.detail.richtung::after { content: ""; position: absolute; top: 100%; width: 12px; height: 54px; background: var(--cobalt-ink); border: 2px solid rgba(255,255,255,.4); border-top: 0; }
.s-richtung .role.detail.richtung::before { left: 14%; } .s-richtung .role.detail.richtung::after { right: 14%; }
.s-richtung .role.detail.richtung > .h { margin: 0; padding: 14px 26px; background: var(--cobalt); color: #fff; }
.s-richtung .role.detail.richtung > .h h4 { font-stretch: 78%; font-size: 15px; font-weight: 700; color: #c9d4ff; }
.s-richtung .role.detail.richtung > .h .fit { color: #fff; font-size: 16px; }
.s-richtung .role.detail.richtung > .h .dots i { border-color: rgba(255,255,255,.5); }
.s-richtung .role.detail.richtung > .h .dots i.on { background: var(--you); border-color: var(--you); }
.s-richtung .role.detail.richtung > .dir { padding: 10px 26px; margin: 0; border-bottom: 1.5px solid var(--paper-3); font-size: 15.5px; color: var(--ink-2); }
.s-richtung .role.detail.richtung > .rgrid { margin: 0; padding: 16px 26px 4px; }
.s-richtung .role.detail.richtung > .rc-refs { margin: 14px 26px 0; }
.s-richtung .role.detail.richtung > .hint { margin: 12px 26px 0; }
.s-richtung .role.detail.richtung > :last-child { margin-bottom: 22px; }
.rgrid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px 32px; margin-top: 14px; }
.rgrid > * { min-width: 0; }
.rgrid .rk { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); 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(--site); }
.rgrid .open li::marker { color: var(--site); }
.role.rc { padding: 22px 26px; }
.role.rc.strong { border-width: 3px; }
.s-richtung .alt .role.rc { background: transparent; color: #fff; border: 2px dashed rgba(255,255,255,.6);
  --ink: #fff; --ink-2: rgba(255,255,255,.84); --ink-3: rgba(255,255,255,.68); --accent: #c9d4ff; --site: #ff8a4c; --paper-3: rgba(255,255,255,.2); --paper-4: rgba(255,255,255,.38); }
.rc-tag { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.role.rc .h h4 { font-size: 22px; }
.role.rc .dir { font-stretch: 80%; font-size: 14.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; }
.rc-refs { margin-top: 16px; border-top: 1.5px solid var(--paper-3); padding-top: 14px; }
.rc-refs .rk { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.rc-refs .ref { padding: 8px 0 8px 14px; border-left: 3px solid var(--paper-4); }
.rc-refs .ref + .ref { margin-top: 8px; }
.s-richtung .role.detail .rc-refs .ref { border-left-color: var(--accent); }
.rc-refs .src { font-stretch: 85%; font-size: 14px; color: var(--ink-3); margin-bottom: 3px; }
.rc-refs .src b { color: var(--accent); font-weight: 700; }
.rc-refs .bf { font-size: 15px; color: var(--ink-2); }
.rc-refs .bd { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 3px; }
.s-richtung .alt { max-width: 900px; margin-top: 26px; }
.s-richtung .alt-lead { color: var(--ink-2); font-size: 16.5px; margin-bottom: 12px; max-width: 70ch; }

/* ---------- Aktion: die eine Aufgabe für sieben Tage ---------- */
.action-card { max-width: 900px; background: var(--sheet); border: 2px solid rgba(255,255,255,.55); padding: 26px 30px; }
.action-label { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
.action-steps { list-style: none; padding: 0; counter-reset: action; border-top: 1.5px solid var(--paper-3); }
.action-steps li { counter-increment: action; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1.5px solid var(--paper-3); font-size: 17px; font-weight: 650; }
.action-steps li::before { content: counter(action); width: 30px; height: 30px; display: grid; place-items: center; background: var(--you); color: var(--on-you); font: 850 15px var(--font); font-stretch: 110%; }
.action-done { margin-top: 20px; padding: 16px 20px; border: 2px solid #fff; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline; }
.action-done .k { font-stretch: 78%; font-size: 15px; font-weight: 700; color: var(--accent); }
.action-done p { font-size: 17px; font-weight: 700; }

/* ---------- Vertiefung ---------- */
.ledger { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; margin: 8px 0 22px; }
.lcard { background: var(--sheet); border: 1.5px solid var(--paper-4); padding: 18px 20px; }
.lcard h4 { margin-bottom: 6px; font-size: 18px; font-weight: 800; }
.lcard .b { color: var(--ink-3); font-size: 15px; }
.lcard .a { font-weight: 650; margin-top: 6px; border-left: 4px solid var(--you); padding-left: 10px; }
.lcard.open { background: var(--site-soft); border: 2px dashed var(--site); }
.lcard.open h4 { color: var(--site); }
.lcard.open ul { margin-left: 18px; font-size: 15px; }
/* 90-Tage-Plan wie ein Bauzeitenplan: Zeitraum links, Arbeit rechts */
.roadmap { list-style: none; padding: 0; display: grid; margin: 8px 0 22px; border-top: 2px solid #fff; }
.rstep { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 16px 4px; border-bottom: 1.5px solid var(--paper-3); }
.rstep .p { font-stretch: 80%; font-weight: 700; color: var(--accent); font-size: 15px; padding-top: 2px; }
.rstep b { display: block; margin-bottom: 4px; font-weight: 750; font-size: 17px; }
.rstep span { color: var(--ink-2); font-size: 15px; }

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

/* ---------- Warte-Screens: ein Haus wird hochgezogen ----------
   Ein Schirm: Kopfzeile, die Baustelle in voller Breite, darunter das Zitat.
   Ein Stockwerk je Stufe der Pipeline; das laufende wächst im orangen
   Gerüst, fertige stehen massiv mit Fenstern, kommende sind gestrichelt. */
.stage:has(> .warten) { padding-top: calc(var(--head-h) + 18px); padding-bottom: 28px; }
.qloader { display: flex; flex-direction: column; gap: 16px; margin: 0; min-width: 0; }
.qtitle { font-size: clamp(21px, 2vw, 27px); font-weight: 820; font-stretch: 110%; line-height: 1.2; letter-spacing: -.015em; color: var(--ink); }
.qhint { margin-top: 5px; font-size: 15px; color: var(--ink-3); }
.buildsite { position: relative; height: clamp(300px, 54vh, 600px); width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; }
.buildsite svg.site { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.buildsite .city { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.2); stroke-width: 1.5; }
.buildsite .ground { stroke: #fff; stroke-width: 3; }
.buildsite .plan { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 2; stroke-dasharray: 7 6; }
.buildsite .fill { fill: #fff; }
.buildsite .wins { opacity: 0; transition: opacity .5s; }
.buildsite .win { fill: var(--cobalt); }
.buildsite .scaf { fill: none; stroke: var(--site); stroke-width: 2.5; opacity: 0; }
.buildsite .kote { fill: rgba(255,255,255,.45); }
.buildsite .slbl { font: 650 19px var(--font); font-stretch: 80%; fill: rgba(255,255,255,.55); }
.buildsite .storey.done .plan { stroke: #fff; stroke-dasharray: none; }
.buildsite .storey.done .wins { opacity: 1; }
.buildsite .storey.done .fill { stroke: var(--cobalt-ink); stroke-width: 4; }
.buildsite .storey.done .slbl { fill: #fff; }
.buildsite .storey.done .kote { fill: #fff; }
.buildsite .storey.cur .scaf { opacity: 1; }
.buildsite .storey.cur .fill { fill: rgba(255,255,255,.85); }
.buildsite .storey.cur .slbl { fill: #fff; font-weight: 800; }
.buildsite .storey.cur .kote { fill: var(--site); }
.buildsite .storey.err .fill, .buildsite .storey.err .kote { fill: var(--site); }
.buildsite .storey.err .plan { stroke: var(--site); stroke-dasharray: none; }
.buildsite .kote.base { fill: #fff; } .buildsite .slbl.base { fill: #fff; }
.buildsite .crane path { fill: none; stroke: var(--you); stroke-width: 3.5; stroke-linejoin: round; }
.buildsite .crane .cw { fill: var(--cobalt-ink); stroke: var(--you); stroke-width: 2; }
.buildsite .rope { stroke: var(--you); stroke-width: 2.5; }
.buildsite .load { fill: var(--site); stroke: var(--cobalt-ink); stroke-width: 2; }
.buildsite .qsec { position: absolute; left: max(28px, calc(50vw - var(--maxw) / 2 + 28px)); top: 8%; font-stretch: 85%; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; background: var(--cobalt-ink); border: 1.5px solid rgba(255,255,255,.45); padding: 4px 10px; }
.buildsite .qsec:empty { display: 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); } }
.qcard .qtext { font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.38; font-weight: 600; letter-spacing: -.005em; color: var(--ink); overflow-wrap: anywhere; }
.qcard .qnum { font-weight: 850; font-stretch: 112%; color: var(--ink); background: linear-gradient(transparent 62%, rgba(255,255,255,.22) 62%); }
.qcard .qby { margin-top: 5px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.qcard .qby b { font-stretch: 80%; font-size: 14.5px; font-weight: 700; color: var(--accent); }
.qcard .qby span { font-stretch: 85%; font-size: 14px; color: var(--ink-3); }
.qbar { height: 3px; background: var(--paper-3); overflow: hidden; max-width: 420px; }
.qbar i { display: block; height: 100%; width: 0; background: var(--ink); }
@media (max-height: 660px) { .qstrip, .qhint { display: none; } .buildsite { height: clamp(240px, 52vh, 600px); } }
@media (prefers-reduced-motion: reduce) { .qcard.in, .qcard.out { animation-duration: .01s; filter: none; } .buildsite .wins { transition: none; } }

/* ---------- Fehler / Zugang ---------- */
.errbox { background: var(--sheet); border: 2px solid var(--site); padding: 18px 22px; color: var(--ink); max-width: 760px; box-shadow: 4px 4px 0 var(--site-soft); }
.errbox details { margin-top: 10px; }
.errbox summary { font-stretch: 85%; font-weight: 600; cursor: pointer; }
.errbox pre { white-space: pre-wrap; font-size: 12px; max-height: 260px; overflow: auto; background: var(--paper-2); padding: 10px; }
body[data-theme="dark"] .errbox pre { background: rgba(0,0,0,.18); }
.gate { max-width: 520px; }
.gate input { width: 100%; font: inherit; font-size: 18px; padding: 14px 16px; border: 2px solid var(--paper-4); background: var(--sheet); border-radius: 0; margin: 12px 0 20px; color: var(--ink); }
.gate input:focus { outline: none; border-color: var(--ink); box-shadow: 4px 4px 0 var(--you); }

/* ---------- Entwickler-Pille (Replay / Aufzeichnen) ---------- */
.devpill { position: fixed; left: 14px; bottom: 14px; z-index: 50; display: flex; gap: 10px; align-items: center; max-width: calc(100vw - 28px);
  padding: 7px 12px; background: var(--cobalt-ink); color: #fff; border: 1.5px solid rgba(255,255,255,.4); font: 500 13px/1.2 var(--font); font-stretch: 85%; box-shadow: 3px 3px 0 rgba(0,0,0,.25); }
.devpill b { color: var(--you); white-space: nowrap; }
.devpill a, .devpill button { color: inherit; background: rgba(255,255,255,.14); border: 0; padding: 4px 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; }

/* ---- 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 Schnittlinie (Strichpunkt) über die volle Breite */
.rs + .rs { border-top: 1.5px dashed rgba(255,255,255,.3); }
.rs.text { min-height: 0; }
.rs:not(.on) { pointer-events: none; }
.rs > .screen, .rs-pin > .screen { width: 100%; margin: 0; }
.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-stretch: 85%; font-size: 15px; font-weight: 600; color: var(--ink-3); transition: opacity .4s; }
.scrollhint.off { opacity: 0; }
.scrollhint i { width: 12px; height: 9px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); 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; } }

/* ---- Bewegung auf den Blättern (Reihenfolge = Leserichtung) ------------------
   Nur Eintritts-Animationen; `translate`/`scale` statt `transform`; `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 drop { from { opacity: 0; translate: 0 -46px; } 70% { opacity: 1; } }
.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 2 Grundriss: Achsen ziehen sich, Raster erscheint, die Platte setzt sich, Stützen, Beschriftung */
.s-fingerprint .radar .axis { animation: fade .5s ease backwards .15s; }
.s-fingerprint .radar .bubble { transform-box: fill-box; transform-origin: center; animation: pop .4s cubic-bezier(.2,.8,.3,1.35) backwards; animation-delay: calc(.3s + var(--i, 0) * .06s); }
.s-fingerprint .radar .grid { animation: fade .5s ease backwards; animation-delay: calc(.5s + var(--i, 0) * .08s); }
.s-fingerprint .radar .shape, .s-fingerprint .radar .wall { transform-box: view-box; transform-origin: 50% 50%; animation: radar-shape .9s cubic-bezier(.2,.8,.2,1.05) backwards 1s; }
@keyframes radar-shape { from { opacity: 0; scale: .15; } }
.s-fingerprint .radar .pt { transform-box: fill-box; transform-origin: center; animation: pop .4s cubic-bezier(.2,.8,.3,1.35) backwards; animation-delay: calc(1.6s + var(--i, 0) * .07s); }
.s-fingerprint .radar .rlab { animation: fade .5s ease backwards; animation-delay: calc(1.7s + var(--i, 0) * .07s); }
.s-fingerprint .rlabel .dots i.on { animation: pop .3s ease-out backwards; animation-delay: calc(2s + var(--j, 0) * .05s); }
.s-fingerprint .aside { animation: rise .7s cubic-bezier(.2,.7,.2,1) backwards 1.9s; }
.s-fingerprint .read { animation: rise .5s ease backwards; animation-delay: calc(2.1s + var(--i, 0) * .1s); }
.s-fingerprint .stower .sf { animation: fade .35s ease backwards; animation-delay: calc(.2s + var(--i, 0) * .08s); }

/* Blatt 3 Turm: Kran steht, Stockwerke werden nacheinander aufgesetzt (unten zuerst), Richtkranz, dann der Text */
.s-aha .tower .crane { animation: fade .5s ease backwards .1s; }
.s-aha .tower .found { animation: fade .4s ease backwards .2s; }
.s-aha .floor .blk { animation: drop .6s cubic-bezier(.25,.8,.3,1.08) backwards; animation-delay: calc(.35s + var(--i, 0) * .42s); }
.s-aha .floor .flab { animation: fade .45s ease backwards; animation-delay: calc(.6s + var(--i, 0) * .42s); }
.s-aha .tower .roof { transform-origin: 50% 100%; animation: pop .5s cubic-bezier(.2,.8,.3,1.35) backwards; animation-delay: calc(.55s + var(--n, 3) * .42s); }
.s-aha .bau-legend { animation: fade .5s ease backwards; animation-delay: calc(.8s + var(--n, 3) * .42s); }
.s-aha .aha-text > .k { animation: fade .5s ease backwards; animation-delay: 2s; }
.s-aha .aha-these .w { animation: rise .45s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(2.1s + var(--w, 0) * .05s); }
.s-aha .aha-why { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards 2.9s; }
.s-aha .aha-beleg { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards 3.2s; }
.s-aha .aha-none { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards .3s; }

/* Blatt 4 Skyline: Häuser wachsen hinter dem Zaun hoch, Namen, dann setzen sich die drei Markierungen */
.s-unterwert .refs { animation: fade .5s ease backwards .15s; }
.s-unterwert .levels { animation: fade .5s ease backwards .2s; }
.s-unterwert .skyline .b { transform-box: fill-box; transform-origin: 50% 100%; animation: rise-up .9s cubic-bezier(.2,.8,.25,1) backwards; animation-delay: calc(.3s + var(--i, 0) * .12s); }
.s-unterwert .pname { animation: fade .5s ease backwards; animation-delay: calc(1.5s + var(--i, 0) * .06s); }
.s-unterwert .flag .tri, .s-unterwert .flag .tnum { transform-box: fill-box; transform-origin: 50% 100%; animation: pop .35s cubic-bezier(.2,.8,.3,1.35) backwards; animation-delay: calc(1.9s + var(--i, 0) * .4s); }
.s-unterwert .flag .pole { animation: draw .4s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(2.05s + var(--i, 0) * .4s); }
.s-unterwert .flag .ftitle, .s-unterwert .flag .fsub { animation: fade .4s ease backwards; animation-delay: calc(2.35s + var(--i, 0) * .4s); }
.s-unterwert .bau-legend { animation: fade .5s ease backwards 1.6s; }
.s-unterwert .uw-beleg { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards 3.4s; }
.s-unterwert .uw-karten > .k { animation: fade .5s ease backwards 3.6s; }
.s-unterwert .uw-karten .ucard { animation: rise .55s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(3.7s + var(--i, 0) * .12s); }

/* Blatt 5 Baulücken: erst die bebauten Grundstücke, dann tauchen die Lücken 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; }

/* Blatt 6 Stadtplan: Straßen, Du bist hier, dann die Ziele */
.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: 50% 50%; 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: pop .6s cubic-bezier(.2,.8,.3,1.3) backwards .5s; }
.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; }

/* Richtung / Aktion */
.s-richtung .role.detail { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards .35s; }
.s-richtung .alt { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards .7s; }
.s-aktion .action-card { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards .35s; }

.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 .crane path, .hero-art .dim path, .skyline .pole { stroke-dashoffset: 0; }
  .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). Kompakter Kopf,
   Visualisierungen bemisst app.js (scrubFit) nach dem Restplatz. */
@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: 26px 0 22px; }
  .rs.scrub .rs-head h1.display, .rs.scrub .rs-head h2.title { font-size: clamp(25px, 2.3vw, 31px); line-height: 1.08; margin-bottom: 6px; }
  .rs.scrub .rs-head .lead { font-size: 16px; line-height: 1.4; margin-bottom: 12px; max-width: 72ch; }
  .rs.scrub .radar { max-width: 720px; }
  .rs.scrub .rlabel { font-size: calc(16px * var(--rs, 1) * var(--fs, 1)); gap: calc(5px * var(--rs, 1)); }
  .rs.scrub .rlabel .dots i { width: calc(9px * var(--rs, 1)); height: calc(9px * var(--rs, 1)); border-width: calc(1.5px * 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: 17px; } .rs.scrub .standort .sv { font-size: 14.5px; padding: 4px 10px; } .rs.scrub .standort .sb { font-size: 14px; margin-top: 5px; }
  .rs.scrub .stower .sf { height: 21px; }
  .rs.scrub .fp-beleg { margin-top: 10px; padding: 8px 14px; } .rs.scrub .fp-beleg h4 { font-size: 15.5px; } .rs.scrub .fp-beleg p { font-size: 14px; }
  .rs.scrub .rs-head > .aside h3 { font-size: 14.5px; margin-bottom: 8px; }
  .rs.scrub .read .k { margin-bottom: 5px; }
  .rs.scrub .read p { font-size: 14px; }
  .rs.scrub .aha { margin-top: 0; }
  .rs.scrub .aha-these { font-size: 24px; margin-bottom: 10px; }
  .rs.scrub .aha-why p { font-size: 15px; }
  .rs.scrub .aha-beleg { margin-top: 10px; }
  .rs.scrub .floor .blk { height: 70px; }
  .rs.scrub .uw { margin-top: 0; }
  .rs.scrub .uw svg.skyline { 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 10px; }
  .rs.scrub .uw-karten .ucard .claim { font-size: 14.5px; line-height: 1.42; }
  .rs.scrub .bau-legend { margin-top: 8px; }
  .rs.scrub .omap-frame { grid-template-columns: 30px minmax(0, 1fr) 30px; }
  .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: 14.5px; margin-top: 4px; }
  .rs.scrub .wf { margin: 0 0 14px; }
  .rs.scrub .wft { min-height: 108px; }
  .rs.scrub .wf-belege ul { font-size: 14px; }
  .rs.scrub .missing { padding: 12px 18px; }
}
@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 .read p { font-size: 13.5px; line-height: 1.35; }
  .rs.scrub .uw-karten .ucard { padding: 10px 12px; }
  .rs.scrub .uw-karten .ucard .claim { font-size: 14px; }
  .rs.scrub .role.detail { padding: 10px 18px; }
  .rs.scrub .wft { min-height: 96px; }
  .rs.scrub .floor .blk { height: 54px; }
  .rs.scrub .tower { padding-top: 66px; }
}

/* ---------- Schmale Schirme ---------- */
@media (max-width: 860px) {
  :root { --head-h: 58px; }
  .top { padding: 0 16px; gap: 12px; }
  .mark .sub { display: none; }
  .progress { gap: 3px; padding: 0 4px; }
  .progress .seg { flex-basis: 12px; }
  .mark { font-size: 15px; gap: 8px; }
  .live { min-width: 0; font-size: 12px; white-space: normal; line-height: 1.15; flex: 1; }
  .stage { padding-left: 16px; padding-right: 16px; padding-top: calc(var(--head-h) + 28px); }
  .flownav button.primary { width: 100%; }
  h1.display, h2.title { hyphens: auto; }   /* schmal: lange deutsche Wörter trennen statt hinauslaufen */
  .flownav { margin-top: 32px; }
  .start, .fp, .ledger { grid-template-columns: 1fr; }
  .start { gap: 26px; }
  .start > div:first-child { padding-top: 0; }
  .hero-art { max-width: 460px; margin: 0 auto; }
  .options, .grid2, .grid3, .roles { grid-template-columns: 1fr; }
  .options.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline { --kw: 96px; }
  .timeline .when { font-size: 13.5px; }
  .timeline .what { font-size: 15px; padding-left: 12px; }
  .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; }
  .stat-row { grid-template-columns: 1fr; }
  .stat { border-right: 0; }
  .stat b { font-size: 46px; }
  .qloader { gap: 12px; }
  .buildsite { height: clamp(260px, 42vh, 380px); }
  .buildsite .slbl { font-size: 30px; }
  .buildsite .qsec { font-size: 13px; left: 16px; top: 4%; }
  .stage:has(> .warten) { padding-bottom: 20px; justify-content: flex-start; }
  .qhint { margin-top: 3px; font-size: 14.5px; }
  .qstrip { gap: 9px; }
  .rstep { grid-template-columns: 1fr; gap: 4px; }
  .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)); }
  .rlabel .dots i { width: 13px; height: 13px; }
  .standort { grid-template-columns: 1fr; }
  .stower { grid-row: auto; max-width: 240px; margin-bottom: 10px; }
  .tower { padding-left: 52px; padding-top: 72px; --tw: 44%; }
  .tower .crane .mast { left: 12px; width: 15px; }
  .tower .roof { left: calc(52px + var(--tw) / 2 - 22px); }
  .floor { gap: 0 20px; }
  .floor .blk { height: 64px; }
  .floor .flab b { font-size: 16px; }
  .floor .flab span { font-size: 14px; }
  .floor .flab::before { left: -16px; width: 10px; }
  .aha-these { font-size: 23px; }
  .s-richtung .role.detail.richtung > .h, .s-richtung .role.detail.richtung > .dir, .s-richtung .role.detail.richtung > .rgrid { padding-left: 18px; padding-right: 18px; }
  .s-richtung .role.detail.richtung > .rc-refs, .s-richtung .role.detail.richtung > .hint { margin-left: 18px; margin-right: 18px; }
  .s-richtung .role.detail.richtung { box-shadow: 5px 5px 0 var(--cobalt-ink); }
  .kwhy { grid-template-columns: 1fr; gap: 4px; }
  .kwhy .k { white-space: normal; }
}
@media (max-width: 720px) {
  /* Stadtplan ohne Wischen: passt in die Spalte, Ziele als nummerierte Häuser, Namen im Schlüssel */
  .omap-wrap { overflow: visible; }
  .omap-frame { grid-template-columns: 26px minmax(0, 1fr) 26px; column-gap: 6px; }
  .s-roles .omap, .rs .omap { height: 420px; --pdx: .3px; }
  .omap .pin .name, .omap .pin .pfit { display: none; }
  .omap .pin .dot { width: 28px; height: 28px; display: grid; place-items: center; border-width: 2.5px; }
  .omap .pin .dot .num { display: block; font-size: 13px; font-weight: 850; color: #fff; line-height: 1; }
  .omap .pin.strong .dot .num { color: var(--cobalt-ink); }
  .omap .pin.on .dot .num { color: var(--on-you); }
  .omap .heute b { font-size: 12.5px; padding: 1px 6px; left: 18px; }
  .omap .heute i { width: 20px; height: 20px; border-width: 3px; }
  .omap-frame .axl { font-size: 12.5px; white-space: normal; text-align: center; }
  .omap-frame .axl.l, .omap-frame .axl.r { white-space: nowrap; }
  .omap-key { display: grid; gap: 6px; margin: 2px 0 16px; }
  .omap-key .kb { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: baseline; text-align: left; background: none; border: 1.5px solid var(--paper-4); padding: 8px 12px; font: inherit; color: var(--ink); cursor: pointer; }
  .omap-key .kb i { grid-row: span 2; align-self: center; width: 26px; height: 26px; display: grid; place-items: center; background: var(--cobalt-ink); border: 2.5px solid #fff; font: normal 850 13px var(--font); color: #fff; }
  .omap-key .kb b { font-size: 15.5px; font-weight: 750; line-height: 1.25; }
  .omap-key .kb span { font-stretch: 85%; font-size: 14px; color: var(--ink-3); }
  .omap-key .kb.on { border-color: var(--you); }
  .omap-key .kb.on i { background: var(--you); border-color: var(--cobalt-ink); color: var(--on-you); }
  .omap-key .kb.on b { color: var(--you); }
  .wf-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 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(14px * var(--fs, 1)); -webkit-line-clamp: 4; } .wf-top { font-size: 12.5px; }
  .wf-top .art { display: none; }
  .rgrid { grid-template-columns: 1fr; }
  .action-card { padding: 20px 18px; }
  .action-done { grid-template-columns: 1fr; }
  .fence { margin-top: -14px; }
}