/* ATLAS v3 — immersiver Snapshot-Flow. Palette aus dem Owner-Deck:
   Ink / Teal / Cyan / Lime / Cloud. Calm premium: Weißraum, wenige Farben,
   große Zahlen. */
:root {
  --ink: #0b1826; --ink-2: #13253a; --ink-3: #1c3149;
  --teal: #16b3a4; --teal-dark: #0f8d81; --cyan: #45d0e6; --lime: #b8ea3c;
  --cloud: #f4f7f9; --card: #ffffff; --line: #dfe6ec; --mut: #5b6b7a; --txt: #0b1826;
  --warn: #c98a12; --err: #c0392b;
  --head-h: 60px; --nav-h: 76px; --maxw: 1040px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font); background: var(--cloud); color: var(--txt);
  min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}
body[data-theme="dark"] { background: var(--ink); color: #fff; }
body[data-theme="dark"] .top, body[data-theme="dark"] .navbar { background: rgba(11,24,38,.82); border-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .mark { color: #fff; }
body[data-theme="dark"] .mark .sub, body[data-theme="dark"] .live { color: rgba(255,255,255,.55); }
body[data-theme="dark"] .navbar .back { color: rgba(255,255,255,.7); }
body[data-theme="dark"] .navbar .skip { color: rgba(255,255,255,.55); }
body[data-theme="dark"] .progress .seg { background: rgba(255,255,255,.14); }
body[data-theme="dark"] .progress .seg i { background: var(--teal); }
body[data-theme="dark"] .progress .seg.done i { background: var(--lime); }

.top {
  position: fixed; top: 0; left: 0; right: 0; height: var(--head-h); z-index: 10;
  display: flex; align-items: center; gap: 24px; padding: 0 28px;
  background: rgba(244,247,249,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.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; color: var(--mut); margin-left: 10px; }
.progress { flex: 1; display: flex; gap: 6px; max-width: 520px; margin: 0 auto; }
.progress .seg { flex: 1; height: 5px; border-radius: 3px; background: #d7dfe6; 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); }
.progress .seg span { position: absolute; top: 9px; left: 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.live { font-size: 12px; color: var(--mut); white-space: nowrap; min-width: 120px; text-align: right; }
.live b { color: var(--teal-dark); font-weight: 700; }
.live .glyph { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--teal); font-size: 15px; display: inline-block; width: 1.1em; margin-right: 6px; vertical-align: -1px; }
body[data-theme="dark"] .live .glyph { color: var(--lime); }

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

.navbar {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-h); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px;
  background: rgba(244,247,249,.9); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
}
.navbar .inner { width: 100%; max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.navbar .back { background: none; border: 0; color: var(--mut); font: inherit; font-weight: 600; cursor: pointer; padding: 10px 4px; }
.navbar .back:disabled { opacity: .25; cursor: default; }
.navbar .right { display: flex; align-items: center; gap: 18px; }
.navbar .skip { background: none; border: 0; color: var(--mut); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.navbar .hint { font-size: 13px; color: var(--mut); }

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 { opacity: .4; cursor: default; box-shadow: none; }
button.primary.lime { background: var(--lime); color: var(--ink); box-shadow: 0 8px 24px rgba(184,234,60,.3); }
button.secondary {
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 20px; font: inherit; font-weight: 700; cursor: pointer;
}
body[data-theme="dark"] button.secondary { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.18); }

.kicker { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 14px; }
body[data-theme="dark"] .kicker { color: var(--cyan); }
h1.display { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.08; font-weight: 900; letter-spacing: -.02em; max-width: 18ch; margin-bottom: 18px; }
h1.display.wide { max-width: 26ch; }
h1.display.long { font-size: clamp(24px, 3.2vw, 36px); max-width: 34ch; }
h1.display.xlong { font-size: clamp(20px, 2.4vw, 28px); max-width: 46ch; line-height: 1.25; }
h2.title { font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; font-weight: 900; letter-spacing: -.015em; margin-bottom: 10px; max-width: 30ch; }
.lead { font-size: 18px; color: var(--mut); max-width: 60ch; margin-bottom: 28px; }
body[data-theme="dark"] .lead { color: rgba(255,255,255,.7); }
.small { font-size: 13px; color: var(--mut); }
body[data-theme="dark"] .small { color: rgba(255,255,255,.55); }
.empty { color: var(--mut); 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: 900px; }
.options.compact .opt { padding: 16px 18px; }
.options.compact .opt .t { font-size: 16px; }
.opt {
  display: flex; align-items: flex-start; gap: 14px; text-align: left; width: 100%;
  background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 18px 20px;
  font: inherit; cursor: pointer; transition: border-color .15s, transform .12s, box-shadow .15s; color: var(--txt);
}
.opt:hover { border-color: #b9c6d1; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(11,24,38,.06); }
.opt.on { border-color: var(--teal); box-shadow: 0 8px 24px rgba(22,179,164,.18); }
.opt .box { flex: 0 0 22px; height: 22px; border-radius: 7px; border: 2px solid #c5d0d9; margin-top: 2px; position: relative; }
.opt.multi .box { border-radius: 6px; }
.opt.on .box { background: var(--teal); border-color: var(--teal); }
.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 { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: var(--cloud); display: grid; place-items: center; color: var(--teal-dark); font-weight: 900; font-size: 18px; }
.opt .t { font-weight: 800; font-size: 17px; line-height: 1.25; }
.opt .d { color: var(--mut); font-size: 14px; margin-top: 3px; }
.ftext { width: 100%; max-width: 640px; font: inherit; font-size: 17px; padding: 16px 18px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); color: var(--txt); }
.ftext:focus { outline: none; border-color: var(--teal); }
.qmeta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin-top: 14px; }

/* Start */
.start { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.uploadbox {
  border: 2px dashed #b9c6d1; border-radius: 20px; padding: 26px; background: rgba(255,255,255,.6);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start; transition: border-color .15s, background .15s;
}
.uploadbox.drag { border-color: var(--teal); background: rgba(22,179,164,.06); }
.uploadbox strong { font-size: 17px; }
.uploadbox .ok { color: var(--teal-dark); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 14px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--txt);
}
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip:disabled { opacity: .5; cursor: default; }
.or { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin: 22px 0 10px; }
.start-cta { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Dark hero card */
.hero-card {
  background: var(--ink-2); border-radius: 28px; padding: 40px; color: #fff; position: relative; 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%); }
.hero-card .k { color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero-card h3 { font-size: 30px; line-height: 1.15; font-weight: 900; margin: 10px 0 24px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat b { display: block; font-size: 40px; line-height: 1; font-weight: 900; color: var(--lime); letter-spacing: -.02em; }
.stat span { display: block; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75); margin-top: 8px; line-height: 1.3; }
.stat .beleg { display: block; font-size: 11px; color: rgba(255,255,255,.45); margin-top: 4px; font-weight: 500; }
.belege { list-style: none; margin-top: 22px; display: grid; gap: 6px; }
.belege li { position: relative; padding-left: 18px; font-size: 14px; color: rgba(255,255,255,.85); }
.belege li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.belege li.ctx::before { background: var(--lime); }
.check-k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin: 26px 0 -14px; }
.erkennt { margin-top: 30px; }
/* Dunkles Profil (Snapshot-Stil): Timeline, Kommentarfeld, Labels */
body[data-theme="dark"] .check-k { color: rgba(255,255,255,.55); }
body[data-theme="dark"] .timeline .rail { background: rgba(255,255,255,.15); }
body[data-theme="dark"] .timeline .when { color: var(--cyan); }
body[data-theme="dark"] .timeline .what { color: rgba(255,255,255,.7); }
body[data-theme="dark"] .timeline .dot { border-color: var(--ink); }
body[data-theme="dark"] .korrektur label { color: #fff; }
body[data-theme="dark"] .ftext { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.18); }
body[data-theme="dark"] .ftext::placeholder { color: rgba(255,255,255,.4); }
body[data-theme="dark"] .ftext:focus { border-color: var(--cyan); }
body[data-theme="dark"] .hero-card { background: var(--ink-2); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.korrektur { margin-top: 8px; display: grid; gap: 10px; max-width: 760px; }
.korrektur label { font-weight: 700; }
.korrektur textarea.ftext { resize: vertical; max-width: none; font-size: 15px; line-height: 1.45; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fact .k { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; }
.fact b { font-size: 16px; font-weight: 700; line-height: 1.35; }

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

/* Interstitial / Status */
.status-list { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 8px 0 24px; }
.status-item { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
body[data-theme="dark"] .status-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.status-item .dot { width: 14px; height: 14px; border-radius: 50%; background: #c5d0d9; flex: 0 0 14px; }
.status-item.run .dot { background: var(--teal); animation: pulse 1.2s ease-in-out infinite; }
.status-item.ok .dot { background: var(--lime); }
.status-item.err .dot { background: var(--err); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(22,179,164,.45); } 50% { box-shadow: 0 0 0 9px rgba(22,179,164,0); } }
.status-item .l { font-weight: 700; flex: 1; }
.status-item .s { color: var(--mut); font-variant-numeric: tabular-nums; }
body[data-theme="dark"] .status-item .s { color: rgba(255,255,255,.55); }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; }
.principle { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.principle .n { font-size: 12px; font-weight: 800; color: var(--teal-dark); letter-spacing: .1em; }
.principle h4 { font-size: 16px; margin: 8px 0 6px; }
.principle p { color: var(--mut); font-size: 14px; }

/* Einordnung */
.ladder { display: flex; gap: 8px; margin: 8px 0 22px; flex-wrap: wrap; }
.rung { padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-weight: 800; font-size: 13px; letter-spacing: .06em; color: var(--mut); cursor: pointer; font-family: inherit; }
.rung.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.rung.engine { outline: 2px solid var(--teal); outline-offset: 2px; }
.rung small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0; color: inherit; opacity: .8; margin-top: 2px; }
.reason { background: var(--card); border-left: 4px solid var(--teal); border-radius: 12px; padding: 16px 20px; max-width: 720px; margin-bottom: 18px; }
.reason .k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 4px; }

/* Reveal: Career Capital */
.two { display: grid; grid-template-columns: 1fr auto 1.15fr; gap: 22px; align-items: stretch; }
.arrow { display: grid; place-items: center; color: var(--teal); font-size: 34px; font-weight: 900; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 30px; box-shadow: 0 10px 30px rgba(11,24,38,.05); }
.card.dark { background: var(--ink-2); color: #fff; border-color: transparent; }
.card .k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin-bottom: 12px; }
.card.dark .k { color: var(--cyan); }
.card h3 { font-size: 26px; line-height: 1.2; font-weight: 900; margin-bottom: 10px; }
.card p { color: var(--mut); }
.card.dark p { color: rgba(255,255,255,.75); }
.badge { display: inline-block; margin-top: 18px; padding: 8px 12px; border-radius: 8px; background: var(--cloud); border: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 20px; }
.pill { background: var(--ink-3); border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 700; text-align: center; }
.insight { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin-top: 8px; }
.insight .k { color: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding-top: 3px; }
.insight p { color: #fff !important; font-weight: 700; }

/* Timeline */
.timeline { position: relative; margin: 34px 0 30px; padding: 0 8px; }
.timeline .rail { position: absolute; left: 8px; right: 8px; top: 46px; height: 3px; background: #d7dfe6; border-radius: 2px; }
.timeline ol { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; position: relative; }
.timeline li { text-align: center; }
.timeline .when { color: var(--teal-dark); font-weight: 800; font-size: 13px; }
.timeline .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--teal); margin: 12px auto; border: 4px solid var(--cloud); box-shadow: 0 0 0 2px var(--teal); }
.timeline li:last-child .dot { background: var(--lime); box-shadow: 0 0 0 2px var(--lime); }
.timeline .what { font-size: 13px; color: var(--mut); line-height: 1.35; }
.callout { background: #e8f7f5; border: 1px solid #bfe6e0; border-radius: 14px; padding: 16px 20px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; max-width: 900px; }
.callout .k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-dark); padding-top: 4px; white-space: nowrap; }
.callout p { font-weight: 700; }
.callout + .callout { margin-top: 12px; }
.callout.warn { background: #fff6e5; border-color: #f1dba8; }
.callout.warn .k { color: var(--warn); }

/* Strengths */
.bars { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 24px; }
.bar { display: grid; grid-template-columns: 32px 1.2fr 1.6fr 200px 120px; gap: 16px; align-items: center; }
.bar .n { color: var(--teal-dark); font-weight: 800; font-size: 13px; }
.bar .t { font-weight: 900; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.bar .e { color: var(--mut); font-size: 14px; }
.bar .track { height: 10px; border-radius: 5px; background: #dfe6ec; overflow: hidden; }
.bar .track i { display: block; height: 100%; background: var(--teal); border-radius: 5px; }
.bar .lvl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark); text-align: right; }
.bar .lvl.low { color: var(--warn); }
.bar .lvl.none { color: var(--mut); }
.footnote { font-weight: 700; margin-top: 8px; }

/* Was die Engine erkennt — Blasen */
.bubbles { width: 100%; height: auto; display: block; margin: 6px 0 10px; overflow: visible; }
.bfloat { animation: bfloat 6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.bubble { animation: bpop .7s cubic-bezier(.2,.8,.2,1.1) both; transform-box: fill-box; transform-origin: center; cursor: pointer; outline: none; transition: scale .4s cubic-bezier(.2,.7,.2,1); }
.bubble.on { scale: 1.06; }
.bubble circle { transition: filter .15s, stroke-width .15s; stroke: rgba(255,255,255,0); stroke-width: 0; }
.bubble:hover circle, .bubble:focus circle { filter: brightness(1.08); stroke: rgba(255,255,255,.55); stroke-width: 4; }
.bubble.on circle { stroke: #fff; stroke-width: 5; }
.bubble.hollow circle { fill: rgba(255,255,255,.04); pointer-events: all; stroke: rgba(255,255,255,.45); stroke-width: 2.5; stroke-dasharray: 9 7; }
.bubble.hollow:hover circle, .bubble.hollow:focus circle { stroke: rgba(255,255,255,.8); stroke-width: 3; }
.bubble.hollow.on circle { stroke: #f0c24b; stroke-width: 3.5; }
.bubble.hollow .blabel { color: rgba(255,255,255,.75); font-weight: 700; }
.blegend i.hollow { background: transparent; border: 1.5px dashed rgba(255,255,255,.6); }
.bpanel .k.gap { color: #f0c24b; }
.bubble foreignObject { pointer-events: none; }
.blabel { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 800; line-height: 1.15; color: #fff; padding: 8%; overflow-wrap: break-word; hyphens: auto; font-family: var(--font); }
.blabel.dark { color: var(--ink); }
@keyframes bpop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bfloat { from { transform: translateY(-6px); } to { transform: translateY(7px); } }
.blegend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 12px; color: var(--mut); margin-bottom: 16px; }
.blegend .t { font-weight: 700; }
.blegend .li { display: inline-flex; align-items: center; gap: 6px; }
.blegend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.bpanel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 24px; margin-bottom: 22px; min-height: 96px; position: relative; overflow: hidden; transition: opacity .5s ease; }
.bpanel.idle { opacity: 0; }
.bpanel .bp-in { animation: rise .4s cubic-bezier(.2,.7,.2,1) both; }
/* Tour-Fortschritt: dünne Linie oben füllt sich pro Blase; verschwindet, sobald der Nutzer selbst wählt */
.bpanel .bp-prog { position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--teal); animation: bprog linear forwards; }
@keyframes bprog { to { width: 100%; } }
.bpanel .k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 6px; }
.bpanel h4 { font-size: 18px; margin-bottom: 6px; }
.bpanel p { color: var(--mut); }
.callout.warn ul { margin-left: 18px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .bfloat, .bubble, .bpanel .bp-in { animation: none; } .bubble { transition: none; } }

/* Fingerprint */
/* Radar mit Beschriftung an den Ecken braucht die Breite – die Deutung steht darunter */
.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: #cfd9e2; stroke-width: 1; }
.radar .axis { stroke: #cfd9e2; stroke-width: 1; }
.radar .shape { fill: rgba(22,179,164,.18); stroke: var(--teal); stroke-width: 3; stroke-linejoin: round; }
.radar .pt { fill: var(--teal); }
.radar .rlab { overflow: visible; }
.rlabel { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 5px; font-size: calc(17px * var(--fs, 1)); font-weight: 800; line-height: 1.15; color: var(--ink); overflow-wrap: break-word; hyphens: auto; }
.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; display: flex; flex-direction: column; gap: 10px; }
.legend li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; font-weight: 700; font-size: 15px; }
.legend .n { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #d7dfe6; }
.dots i.on { background: var(--teal); }
.reads { display: flex; flex-direction: column; gap: 12px; }
.read { display: grid; grid-template-columns: 165px 1fr; gap: 12px; align-items: start; }
.read .k { font-weight: 800; font-size: 13px; }
.read .k.strong { color: var(--teal-dark); } .read .k.diff { color: var(--teal-dark); } .read .k.grow { color: var(--warn); } .read .k.open { color: var(--warn); }
.read p { color: var(--mut); font-size: 14px; }

/* Cards grid */
.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(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.ucard .n { font-size: 12px; font-weight: 800; color: var(--teal-dark); }
.ucard h4 { font-size: 18px; line-height: 1.2; text-transform: uppercase; letter-spacing: .03em; }
.ucard .b { font-weight: 700; }
.ucard .m { color: var(--mut); font-size: 14px; }
.ucard .diff { display: grid; gap: 8px; }
.ucard .diff .v { background: var(--cloud); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.ucard .diff .v.before { color: var(--mut); text-decoration: line-through; text-decoration-color: rgba(91,107,122,.5); }
.ucard .diff .v.after { font-weight: 700; border-left: 3px solid var(--teal); }
.ucard .cond { font-size: 12px; color: var(--warn); font-weight: 700; }

/* Zielrollen */
.roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0 22px; }
.role { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; }
.role.strong { border-color: var(--teal); box-shadow: 0 10px 30px rgba(22,179,164,.12); }
.role .h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.role h4 { font-size: 18px; line-height: 1.2; min-width: 0; flex: 1; }
.fit { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark); white-space: nowrap; }
.fit.neutral { color: var(--mut); }
.role p { color: var(--mut); font-size: 14px; }
.role ul { margin: 8px 0 0 18px; color: var(--mut); font-size: 14px; }
.role .clar { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--warn); }
.role .hint { margin-top: 8px; font-size: 13px; color: var(--mut); border-top: 1px dashed var(--line); padding-top: 8px; }
.groupk { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin: 18px 0 8px; }

/* Ready + Paid */
.bigstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 30px 0 40px; }
.bigstat b { display: block; font-size: 56px; line-height: 1; font-weight: 900; color: var(--lime); letter-spacing: -.03em; }
.bigstat span { display: block; margin-top: 10px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.75); }
.paid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; }
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-left: 3px solid var(--teal); padding-left: 18px; position: relative; }
.row + .row { border-top: 1px solid var(--line); }
.row .k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.row .v { font-weight: 800; font-size: 17px; }
.row .v.locked { display: inline-flex; align-items: center; gap: 10px; color: var(--mut); }
.row .v.locked i { display: inline-block; width: 140px; height: 16px; border-radius: 4px; background: repeating-linear-gradient(90deg, #a9b6c2 0 10px, #c6d0d9 10px 14px); filter: blur(1px); }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 6px 0 24px; }
.ticks li { display: flex; gap: 12px; font-weight: 700; font-size: 15px; }
.ticks li::before { content: "✓"; color: var(--lime); font-weight: 900; }
.price { display: flex; align-items: baseline; gap: 14px; }
.price b { font-size: 40px; font-weight: 900; white-space: nowrap; }
.price span { color: rgba(255,255,255,.6); font-size: 13px; }
.price-note { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.7) !important; font-weight: 600; }
/* Paid: Was Nichtstun kostet – drei Zahlen neben dem Preis */
.invest { margin-top: 26px; margin-bottom: 18px; }
.invest > .k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 12px; }
.istats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.istat { background: var(--ink-2); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 20px 22px; min-width: 0; overflow-wrap: anywhere; }
.istat b { display: block; font-size: 34px; font-weight: 900; letter-spacing: -.02em; color: var(--lime); margin-bottom: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.istat p { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.88); line-height: 1.35; }
.istat .src { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.5); }
.s-paid .paid > .card:first-child { animation: slide-l .7s cubic-bezier(.2,.7,.2,1) backwards .25s; }
.s-paid .paid > .card.dark { animation: slide-r .7s cubic-bezier(.2,.7,.2,1) backwards .4s; }
.s-paid .istat { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards; }
.s-paid .istat:nth-child(1) { animation-delay: .8s; } .s-paid .istat:nth-child(2) { animation-delay: .95s; } .s-paid .istat:nth-child(3) { animation-delay: 1.1s; }
.s-paid .callout { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards 1.4s; }

/* Final */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 22px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.tile.wide { grid-column: span 3; }
.tile .k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin-bottom: 8px; }
.tile p, .tile li { font-weight: 700; font-size: 15px; }
.tile ul { margin-left: 18px; }
.next-big { background: var(--ink-2); color: #fff; border-radius: 24px; padding: 30px; margin-top: 10px; }
.next-big .k { color: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.next-big p { font-size: 22px; font-weight: 900; line-height: 1.25; }
.ledger { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; margin: 8px 0 22px; }
.lcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.lcard h4 { margin-bottom: 6px; }
.lcard .b { color: var(--mut); font-size: 14px; }
.lcard .a { font-weight: 700; margin-top: 6px; border-left: 3px solid var(--lime); padding-left: 10px; }
.lcard.open { background: #fff6e5; border-color: #f1dba8; }
.lcard.open ul { margin-left: 18px; font-size: 14px; }
.roadmap { list-style: none; display: grid; gap: 12px; margin: 8px 0 22px; }
.rstep { display: grid; grid-template-columns: 130px 1fr; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.rstep .p { font-weight: 800; color: var(--teal-dark); font-size: 13px; }
.rstep b { display: block; margin-bottom: 4px; }
.rstep span { color: var(--mut); font-size: 14px; }

/* Overflow-Sicherheit: Grid-Kinder dürfen schrumpfen, lange Wörter brechen */
.two > *, .fp > *, .paid > *, .ledger > *, .grid2 > *, .grid3 > *, .roles > *, .tiles > *, .options > *, .principles > *, .bigstats > *, .facts > *, .start > *, .bar > *, .read > *, .callout > *, .insight > * { min-width: 0; }
.card, .ucard, .role, .tile, .lcard, .rstep, .opt, .hero-card, .reason, .callout, .principle, .status-item, .errbox, .pill, .legend li, .bar { overflow-wrap: anywhere; }
h1.display, h2.title, .lead { overflow-wrap: anywhere; }

/* Dunkle Ergebnis-Seiten (Analyse + Empfehlung) */
body[data-theme="dark"] .card, body[data-theme="dark"] .ucard, body[data-theme="dark"] .role, body[data-theme="dark"] .tile,
body[data-theme="dark"] .lcard, body[data-theme="dark"] .rstep, body[data-theme="dark"] .bpanel, body[data-theme="dark"] .principle {
  background: var(--ink-2); border-color: rgba(255,255,255,.08); color: #fff; box-shadow: none;
}
body[data-theme="dark"] .card p, body[data-theme="dark"] .ucard .m, body[data-theme="dark"] .role p, body[data-theme="dark"] .role ul,
body[data-theme="dark"] .rstep span, body[data-theme="dark"] .bar .e, body[data-theme="dark"] .read p, body[data-theme="dark"] .lcard .b,
body[data-theme="dark"] .bpanel p, body[data-theme="dark"] .principle p, body[data-theme="dark"] .blegend, body[data-theme="dark"] .groupk,
body[data-theme="dark"] .card .k, body[data-theme="dark"] .tile .k, body[data-theme="dark"] .row .k { color: rgba(255,255,255,.62); }
body[data-theme="dark"] .card.dark { background: var(--ink-3); }
body[data-theme="dark"] .badge { background: var(--ink-3); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
body[data-theme="dark"] .pill { background: var(--ink); }
body[data-theme="dark"] .fit, body[data-theme="dark"] .bar .lvl, body[data-theme="dark"] .rstep .p, body[data-theme="dark"] .ucard .n,
body[data-theme="dark"] .bar .n, body[data-theme="dark"] .read .k.strong, body[data-theme="dark"] .read .k.diff, body[data-theme="dark"] .bpanel .k,
body[data-theme="dark"] .principle .n { color: var(--cyan); }
body[data-theme="dark"] .fit.neutral { color: rgba(255,255,255,.55); }
body[data-theme="dark"] .bar .lvl.low, body[data-theme="dark"] .read .k.grow, body[data-theme="dark"] .read .k.open, body[data-theme="dark"] .ucard .cond, body[data-theme="dark"] .role .clar { color: #f0c24b; }
body[data-theme="dark"] .bar .lvl.none { color: rgba(255,255,255,.45); }
body[data-theme="dark"] .bar .track, body[data-theme="dark"] .dots i { background: rgba(255,255,255,.14); }
body[data-theme="dark"] .bar .track i, body[data-theme="dark"] .dots i.on { background: var(--teal); }
body[data-theme="dark"] .footnote { color: #fff; }
body[data-theme="dark"] .callout { background: rgba(69,208,230,.10); border-color: rgba(69,208,230,.25); color: #fff; }
body[data-theme="dark"] .callout .k { color: var(--cyan); }
body[data-theme="dark"] .callout.warn { background: rgba(240,194,75,.10); border-color: rgba(240,194,75,.3); }
body[data-theme="dark"] .callout.warn .k { color: #f0c24b; }
body[data-theme="dark"] .radar .grid, body[data-theme="dark"] .radar .axis { stroke: rgba(255,255,255,.18); }
body[data-theme="dark"] .rlabel { color: #fff; }
body[data-theme="dark"] .legend .n { background: var(--cyan); color: var(--ink); }
body[data-theme="dark"] .ucard .diff .v { background: var(--ink-3); }
body[data-theme="dark"] .ucard .diff .v.before { color: rgba(255,255,255,.5); }
body[data-theme="dark"] .role.strong { border-color: var(--teal); box-shadow: 0 0 0 1px rgba(22,179,164,.4); }
body[data-theme="dark"] .role .hint { border-top-color: rgba(255,255,255,.12); color: rgba(255,255,255,.62); }
body[data-theme="dark"] .row + .row { border-top-color: rgba(255,255,255,.1); }
body[data-theme="dark"] .row .v.locked { color: rgba(255,255,255,.55); }
body[data-theme="dark"] .row .v.locked i { background: repeating-linear-gradient(90deg, #3a4a5c 0 10px, #2a3a4c 10px 14px); }
body[data-theme="dark"] .lcard.open { background: rgba(240,194,75,.10); border-color: rgba(240,194,75,.3); }
body[data-theme="dark"] .lcard .a { border-left-color: var(--lime); }
body[data-theme="dark"] .tile p, body[data-theme="dark"] .tile li { color: #fff; }
body[data-theme="dark"] .next-big { background: var(--ink-3); }
body[data-theme="dark"] .arrow { color: var(--cyan); }
body[data-theme="dark"] .bubbles { filter: drop-shadow(0 12px 30px rgba(0,0,0,.35)); }

/* Quote-Loader (Warte-Screens): Ring links, Zitat rechts. Nur dunkel. */
.qloader { display: grid; grid-template-columns: 132px 1fr; gap: 36px; align-items: center; margin: 6px 0 30px; }
.qring { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.qring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.qring .track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 3; }
.qring .arc { fill: none; stroke-width: 3; stroke-linecap: round; transform-origin: 50% 50%; }
.qring .a1 { stroke: var(--teal); stroke-dasharray: 70 194; animation: qspin 1.6s linear infinite; }
.qring .a2 { stroke: var(--cyan); stroke-dasharray: 40 161; opacity: .8; animation: qspin 2.6s linear infinite reverse; }
.qring .orb { transform-origin: 50% 50%; animation: qspin 1.6s linear infinite; }
.qring .orb circle { fill: var(--lime); filter: drop-shadow(0 0 6px rgba(184,234,60,.9)); }
.qring .qsec { position: relative; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.85); letter-spacing: .02em; }
@keyframes qspin { to { transform: rotate(360deg); } }
.qbody { min-width: 0; position: relative; }
.qtitle { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.qcard { position: relative; min-height: 200px; padding: 6px 0 0 34px; 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; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes qout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px); filter: blur(4px); } }
.qcard .qmark { position: absolute; left: -6px; top: -26px; font-size: 92px; line-height: 1; font-weight: 900; color: var(--lime); opacity: .9; font-family: Georgia, "Times New Roman", serif; }
.qcard .qtext { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.22; font-weight: 800; letter-spacing: -.01em; max-width: 26ch; color: #fff; overflow-wrap: anywhere; }
.qcard.stat { padding-left: 0; }
.qcard.stat .qnum { font-size: clamp(48px, 6vw, 72px); line-height: 1; font-weight: 900; letter-spacing: -.03em; color: var(--lime); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.qcard.stat .qtext { font-size: clamp(17px, 1.8vw, 21px); font-weight: 700; color: rgba(255,255,255,.88); max-width: 46ch; }
.qcard .qby { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.qcard .qby b { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.qcard .qby span { font-size: 13px; color: rgba(255,255,255,.55); }
.qbar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 18px; max-width: 420px; }
.qbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--cyan)); }
@media (prefers-reduced-motion: reduce) {
  .qring .a1, .qring .a2, .qring .orb { animation: none; }
  .qring .a1 { animation: qpulse 1.6s ease-in-out infinite; }
  @keyframes qpulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
  .qcard.in, .qcard.out { animation-duration: .01s; filter: none; }
}

/* Fehler / Gate */
.errbox { background: #fdecea; border: 1px solid #f2b8b0; border-radius: 16px; padding: 18px 22px; color: #7a1f16; max-width: 760px; }
.errbox details { margin-top: 10px; }
.errbox pre { white-space: pre-wrap; font-size: 12px; max-height: 260px; overflow: auto; background: rgba(255,255,255,.6); padding: 10px; border-radius: 8px; }
.gate { max-width: 520px; }
.gate input { width: 100%; font: inherit; font-size: 17px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 12px; margin: 12px 0; }

@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; }
  .navbar { padding: 0 16px; }
  .start, .two, .fp, .paid, .ledger, .facts { grid-template-columns: 1fr; }
  .arrow { transform: rotate(90deg); }
  .options, .pills, .grid2, .grid3, .roles, .principles, .tiles { grid-template-columns: 1fr; }
  .options.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile.wide { grid-column: auto; }
  .bigstats { grid-template-columns: repeat(2, 1fr); }
  .bar { grid-template-columns: 24px 1fr 90px; }
  .bar .e { grid-column: 2 / span 2; }
  .bar .track { grid-column: 2; }
  .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: 16px; height: 16px; border-width: 3px; }
  .timeline .when, .timeline .what { grid-column: 2; }
  .callout { grid-template-columns: 1fr; gap: 6px; }
  .callout .k { white-space: normal; }
  .insight { grid-template-columns: 1fr; gap: 6px; }
  .role .h { flex-direction: column; align-items: flex-start; }
  .fit { white-space: normal; }
  .hero-card { padding: 26px; border-radius: 20px; }
  .hero-card h3 { font-size: 22px; }
  .qloader { grid-template-columns: 1fr; gap: 18px; }
  .qring { width: 84px; height: 84px; }
  .qring .qsec { font-size: 12px; }
  .qcard { min-height: 210px; padding-left: 26px; }
  .qcard .qmark { font-size: 68px; top: -18px; }
  .erow { grid-template-columns: 1fr; gap: 6px; }
  .erow .klv { justify-content: flex-start; }
  .row { grid-template-columns: 1fr; gap: 4px; }
  .rstep { grid-template-columns: 1fr; }
  .read { grid-template-columns: 1fr; }
  .rlabel { font-size: calc(22px * var(--fs, 1)); }
  .istats { grid-template-columns: 1fr; }
}

/* ---- Bewegung auf den Ergebnis-Screens 01–05 ------------------------------
   Jeder Screen erzählt seine Aussage in der Reihenfolge, in der man sie lesen
   soll: Kopf → Beleg → Fazit. Nur Eintritts-Animationen (einmalig, kurz,
   gestaffelt), keine Dauerschleifen außer dem Atmen der Fingerprint-Fläche.
   Mechanik: `translate`/`scale` statt `transform`, damit nichts mit bestehenden
   Transforms (z. B. Pfeil-Rotation mobil) kollidiert; `backwards` hält den
   Startzustand nur bis zum Delay und gibt danach die normalen Styles frei.
   Re-Render desselben Screens (`.no-enter`) und reduced-motion: alles springt
   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 { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards; }
.anim > .title { animation-delay: .07s; }
.anim > .lead { animation-delay: .14s; }

/* 01 Career Capital: sichtbar → Pfeil → Gesamtprofil, Pills tropfen ein, Insight zuletzt */
.s-capital .two > .card:first-child { animation: slide-l .7s cubic-bezier(.2,.7,.2,1) backwards .25s; }
.s-capital .badge { animation: fade .5s ease backwards .7s; }
.s-capital .arrow { animation: arrow-in .7s cubic-bezier(.2,.7,.2,1) backwards .55s; }
@keyframes arrow-in { from { opacity: 0; translate: -10px 0; } 60% { translate: 3px 0; } }
.s-capital .card.dark { animation: slide-r .7s cubic-bezier(.2,.7,.2,1) backwards .5s; }
.s-capital .pill { animation: pop .5s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(.85s + var(--i, 0) * .06s); }
.s-capital .insight { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards 1.3s; }

/* 02 Entwicklungspfad: Schiene zeichnet sich, Stationen folgen ihr, letzte Station 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); }
@keyframes draw-x { from { scale: 0 1; } }
.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 rgba(184,234,60,.6); } to { box-shadow: 0 0 0 22px rgba(184,234,60,0); } }
.s-timeline .callout { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.75s + var(--n, 4) * .16s); }

/* 03 Signature Strengths: Zeile für Zeile, Balken füllen sich, Stufe erscheint nach dem Balken */
.s-strengths .bar { animation: rise .55s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.25s + var(--i, 0) * .12s); }
.s-strengths .bar .track i { animation: fill-x .9s cubic-bezier(.3,.1,.2,1) backwards; animation-delay: calc(.6s + var(--i, 0) * .12s); }
@keyframes fill-x { from { clip-path: inset(0 100% 0 0 round 5px); } to { clip-path: inset(0 0 0 0 round 5px); } }
.s-strengths .bar .lvl { animation: fade .5s ease backwards; animation-delay: calc(1.25s + var(--i, 0) * .12s); }
.s-strengths .footnote { animation: rise .5s ease backwards 1.9s; }

/* 04 Fingerprint: Raster wächst von innen, Form entfaltet sich, Punkte setzen sich, Legende füllt ihre Stufen */
.s-fingerprint .radar .grid { transform-box: view-box; transform-origin: 50% 50%; animation: radar-grid .8s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.2s + var(--i, 0) * .07s); }
@keyframes radar-grid { from { opacity: 0; scale: .45; } }
.s-fingerprint .radar .axis { animation: fade .6s ease backwards .55s; }
.s-fingerprint .radar .shape { transform-box: view-box; transform-origin: 50% 50%; animation: radar-shape .9s cubic-bezier(.2,.8,.2,1.05) backwards .8s, breathe 4.5s ease-in-out 1.8s infinite alternate; }
@keyframes radar-shape { from { opacity: 0; scale: .2; } }
@keyframes breathe { from { fill: rgba(22,179,164,.18); } to { fill: rgba(22,179,164,.3); } }
.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.3s + var(--i, 0) * .07s); }
.s-fingerprint .radar .rlab { animation: fade .5s ease backwards; animation-delay: calc(1.4s + var(--i, 0) * .07s); }
.s-fingerprint .rlabel .dots i.on { animation: pop .3s ease-out backwards; animation-delay: calc(1.7s + var(--i, 0) * .07s + var(--j, 0) * .05s); }
.s-fingerprint .fp > .card { animation: rise .7s cubic-bezier(.2,.7,.2,1) backwards 1.6s; }
.s-fingerprint .read { animation: rise .5s ease backwards; animation-delay: calc(1.9s + var(--i, 0) * .1s); }

/* 05 Unter Wert: Karten steigen auf, „vorher“ erscheint und wird durchgestrichen, „nachher“ rückt nach und leuchtet kurz */
.s-underrated .ucard { animation: rise-card .7s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.25s + var(--i, 0) * .14s); }
@keyframes rise-card { from { opacity: 0; translate: 0 20px; scale: .985; } }
.s-underrated .ucard .v.before { animation: fade .45s ease backwards, strike .5s ease backwards; animation-delay: calc(.6s + var(--i, 0) * .14s), calc(1.05s + var(--i, 0) * .14s); }
@keyframes strike { from { text-decoration-color: transparent; } }
.s-underrated .ucard .v.after { animation: rise .55s cubic-bezier(.2,.7,.2,1) backwards, after-glow 1.6s ease-out backwards; animation-delay: calc(1.3s + var(--i, 0) * .14s), calc(1.3s + var(--i, 0) * .14s); }
@keyframes after-glow { from { box-shadow: inset 0 0 0 999px rgba(22,179,164,.22); } to { box-shadow: inset 0 0 0 999px rgba(22,179,164,0); } }
.s-underrated .ucard .cond { animation: fade .5s ease backwards; animation-delay: calc(1.75s + var(--i, 0) * .14s); }
.s-underrated .callout { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards 2.1s; }

/* Re-Render desselben Screens: nichts spielt erneut, alles steht sofort im Endzustand */
.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 { animation: none !important; }
}

/* ---- 06 Optionen: Opportunity Map (Owner-Deck S. 07) ---- */
.omap-wrap { overflow-x: auto; margin: 6px 0 18px; padding: 4px 0; }
.omap { position: relative; min-width: 680px; height: 540px; }
.omap .ax { position: absolute; background: rgba(255,255,255,.18); border-radius: 2px; }
.omap .ax.x { left: 0; right: 0; top: 50%; height: 3px; margin-top: -1px; }
.omap .ax.y { top: 3%; bottom: 3%; left: 50%; width: 3px; margin-left: -1px; }
.omap .axl { position: absolute; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap; }
.omap .axl.t { left: 50%; top: 0; translate: 12px -30%; }
.omap .axl.b { left: 50%; bottom: 0; translate: 12px 30%; }
/* Links/rechts sitzen auf der Achse und decken sie an den Enden ab (wie im Deck) */
.omap .axl.l { left: 0; top: 50%; translate: 0 -50%; padding-right: 12px; background: var(--ink); }
.omap .axl.r { right: 0; top: 50%; translate: 0 -50%; padding-left: 12px; background: var(--ink); }
.omap .heute { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 4px; width: 0; }
.omap .heute i { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--ink-2), 0 0 0 6px rgba(255,255,255,.35); }
.omap .heute b { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.omap .heute span { font-size: 12px; color: rgba(255,255,255,.6); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.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; }
.omap .pin .dot { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--teal); translate: 0 -50%; transition: scale .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.omap .pin.strong .dot { background: var(--lime); }
.omap .pin .name { position: absolute; bottom: 12px; width: 170px; text-align: center; font-size: 13px; font-weight: 800; line-height: 1.2; color: #fff; }
.omap .pin .pfit { position: absolute; top: 12px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 7px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.12); white-space: nowrap; transition: background .25s, color .25s, border-color .25s; }
.omap .pin .pfit.hi { background: rgba(22,179,164,.18); color: var(--cyan); border-color: rgba(22,179,164,.35); }
.omap .pin:hover .dot, .omap .pin:focus-visible .dot { scale: 1.2; box-shadow: 0 0 0 5px rgba(255,255,255,.18); }
.omap .pin.on .dot { scale: 1.3; box-shadow: 0 0 0 4px var(--ink-2), 0 0 0 6px #fff; }
.omap .pin.on .pfit { background: #fff; color: var(--ink); border-color: #fff; }
.role.detail { margin-bottom: 22px; }
.role.detail .dir { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 8px; }
/* Eintritt: Achsen zeichnen sich vom Kreuz aus, Heute setzt sich, Pins folgen nach Engine-Reihenfolge, Karte zuletzt */
.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 .axl { 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; }