/* ═══════════════════════════════════════════════════════════════
   StratXpand Funnel · eine Bühne, ein Eimer, ein Case
   Tokens und Schriften aus site.css.
   ═══════════════════════════════════════════════════════════════ */
:root { --fn-bg: #F4F1EA; --fn-line: #E3DDD2; --st-ok: #1F7A46; --st-bad: #A3261A; --st-wait: #8A5A0E; --ease: cubic-bezier(.16,1,.3,1); }
html { scroll-behavior: smooth; }
.fn-body { background: radial-gradient(900px 500px at 85% 0, rgba(30,58,230,.07), transparent 60%), radial-gradient(700px 600px at 0 100%, rgba(200,134,30,.08), transparent 60%), var(--fn-bg); color: var(--tx); min-height: 100vh; display: flex; flex-direction: column; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--tx); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 999; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

/* ─── Kopf ─── */
.fn-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 14px max(16px, calc((100vw - 1240px) / 2)); padding-top: calc(14px + env(safe-area-inset-top, 0px)); background: rgba(244,241,234,.86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--fn-line); }
.wordmark { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--tx); flex: none; }
.wordmark b { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.wordmark span { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.fn-steps { list-style: none; margin: 0 auto; padding: 0; display: flex; align-items: center; gap: 6px; }
.fn-steps li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tx-3); font-weight: 500; }
.fn-steps li + li::before { content: ''; width: 18px; height: 1px; background: var(--fn-line); margin-right: 1px; }
.fn-steps i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: 'Space Mono', monospace; font-size: 10.5px; font-weight: 700; border: 1px solid var(--brd); background: #fff; transition: all .3s; }
.fn-steps li.is-done i { background: var(--hi); border-color: var(--hi); color: transparent; position: relative; }
.fn-steps li.is-done i::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 11px; }
.fn-steps li.is-now { color: var(--tx); }
.fn-steps li.is-now i { background: var(--acc); border-color: var(--acc); color: #fff; box-shadow: 0 0 0 4px var(--acc-soft); }
.fn-steps li span { white-space: nowrap; }
.fn-top-link { font-size: 14px; font-weight: 500; color: var(--tx-2); text-decoration: none; flex: none; }
.fn-top-link:hover { color: var(--acc); }
@media (max-width: 1100px) { .fn-steps li span { display: none; } .fn-steps li.is-now span { display: inline; } }
@media (max-width: 640px) { .fn-top { gap: 12px; } .fn-steps li.is-now span { display: none; } .fn-steps li + li::before { width: 8px; } .fn-top-link { display: none; } .wordmark span { display: none; } }

/* ─── Bühne ─── */
.fn-main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 32px 16px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.fn-main.is-case, .fn-main.is-loading { grid-template-columns: minmax(0, 1fr); }
.fn-main.is-case .fn-bucket, .fn-main.is-loading .fn-bucket { display: none; }
.fn-stage { padding: 0; outline: none; transition: opacity .18s ease, transform .18s ease; }
.fn-stage.is-out { opacity: 0; transform: translateY(8px); }
.fn-stage.is-in .fn-card { animation: fnIn .5s var(--ease); }
.fn-stage.is-in .fn-opt { animation: fnOpt .5s var(--ease) both; animation-delay: calc(var(--d, 0) * 45ms + 80ms); }
@keyframes fnIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fnOpt { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fn-card { position: relative; background: #fff; border: 1px solid var(--fn-line); border-radius: 26px; padding: 34px 36px 26px; box-shadow: 0 40px 90px -60px rgba(22,19,16,.45); }
.fn-main.is-case .fn-card, .fn-main.is-loading .fn-card { background: transparent; border: 0; box-shadow: none; padding: 0; }
.fn-kicker { display: inline-block; font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 18px; }
.fn-q-no { display: block; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); margin: 0 0 8px; }
.fn-q { font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 3.3vw, 42px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; margin: 0 0 12px; }
.fn-lead { font-size: 16px; line-height: 1.55; color: var(--tx-2); margin: 0 0 22px; }

/* Andre spricht */
.fn-say { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; margin: 0 0 22px; }
.fn-say img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--hi); }
.fn-say > div { background: var(--fn-bg); border-radius: 4px 16px 16px 16px; padding: 12px 16px; animation: fnSay .55s var(--ease); }
.fn-say b { display: block; font-size: 12px; font-weight: 600; color: var(--tx-3); margin-bottom: 2px; }
.fn-say p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--tx); }
@keyframes fnSay { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.fn-beleg { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: baseline; margin: -8px 0 24px 52px; padding: 10px 14px; border-left: 3px solid var(--hi); background: var(--hi-soft); border-radius: 0 12px 12px 0; }
.fn-beleg b { font-family: 'Space Grotesk', sans-serif; font-size: 20px; letter-spacing: -0.02em; grid-row: span 2; }
.fn-beleg span { font-size: 14px; line-height: 1.45; }
.fn-beleg small { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--tx-3); }
.fn-first { margin: -10px 0 0 52px; font-size: 14px; color: var(--tx-2); line-height: 1.5; }
.fn-first b { color: var(--tx); font-weight: 600; }

/* Antworten */
.fn-opts { display: grid; gap: 8px; margin: 0 0 8px; }
.fn-opt { font: inherit; text-align: left; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 13px 16px 13px 12px; border-radius: 14px; border: 1px solid var(--fn-line); background: #fff; color: var(--tx); cursor: pointer; font-size: 16px; font-weight: 500; line-height: 1.35; transition: border-color .2s, background .2s, transform .15s, box-shadow .2s; }
.fn-opt kbd { font: 700 11px 'Space Mono', monospace; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--fn-line); background: var(--fn-bg); color: var(--tx-2); transition: all .2s; }
.fn-opt::after { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--brd); transition: all .2s; }
.fn-opts.is-multi .fn-opt::after { border-radius: 5px; }
.fn-opt:hover, .fn-opt:focus-visible { border-color: var(--tx); outline: none; box-shadow: 0 10px 24px -18px rgba(22,19,16,.5); transform: translateX(2px); }
.fn-opt:hover kbd { border-color: var(--tx); color: var(--tx); }
.fn-opt:active { transform: scale(.99); }
.fn-opt[aria-checked="true"] { border-color: var(--hi); background: var(--hi-soft); }
.fn-opt[aria-checked="true"] kbd { background: var(--hi); border-color: var(--hi); color: #fff; }
.fn-opt[aria-checked="true"]::after { background: var(--hi); border-color: var(--hi); box-shadow: inset 0 0 0 3px #fff; }
.fn-opt.is-hit { animation: fnHit .4s ease-out; }
@keyframes fnHit { 40% { transform: scale(1.02); box-shadow: 0 0 0 7px var(--hi-soft); } }

.fn-eigen, .fn-own { margin-top: 14px; }
.fn-eigen label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.fn-eigen textarea, .fn-own textarea { font: inherit; font-size: 16px; line-height: 1.5; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--brd); background: #fff; color: var(--tx); resize: vertical; }
.fn-eigen textarea:focus, .fn-own textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
textarea.is-empty { border-color: var(--hi) !important; box-shadow: 0 0 0 4px var(--hi-soft) !important; }
.fn-own summary { cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--acc); list-style: none; padding: 6px 0; }
.fn-own summary::-webkit-details-marker { display: none; }
.fn-own summary::before { content: '+ '; }
.fn-own[open] summary::before { content: '− '; }
.fn-own textarea { margin-top: 6px; }
.fn-fine { font-size: 12.5px; color: var(--tx-3); line-height: 1.5; margin: 8px 0 0; }

.fn-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--fn-line); }
.fn-back, .fn-link { font: inherit; font-size: 14px; color: var(--tx-3); background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fn-back:hover, .fn-link:hover { color: var(--tx); }
.fn-next { font: inherit; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; border: 0; background: var(--tx); color: #fff; font-size: 15.5px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .2s, transform .15s, opacity .2s, box-shadow .2s; }
.fn-next i { font-style: normal; transition: transform .2s; }
.fn-next:hover, .fn-next:focus-visible { background: var(--acc); outline: none; }
.fn-next:hover i { transform: translateX(3px); }
.fn-next:disabled { opacity: .35; cursor: not-allowed; background: var(--tx); }
.fn-next.is-go { background: var(--acc); box-shadow: 0 14px 30px -14px rgba(30,58,230,.7); }
.fn-next.is-go:hover { background: var(--tx); }
.fn-next.is-big { padding: 16px 26px; font-size: 16.5px; background: var(--acc); }
.fn-next.is-big:hover { background: var(--tx); }

.fn-think { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: var(--acc-soft); color: var(--acc); font-size: 14.5px; font-weight: 600; }
.fn-think-dots { display: inline-flex; gap: 4px; }
.fn-think-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); animation: fnDot 1s infinite ease-in-out; }
.fn-think-dots i:nth-child(2) { animation-delay: .15s; }
.fn-think-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes fnDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

/* Rechner */
.fn-calc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.fn-calc-fields { display: grid; gap: 10px; align-content: start; }
.fn-field { display: grid; gap: 6px; font-size: 14px; color: var(--tx-2); }
.fn-input { display: grid; grid-template-columns: 38px 1fr 38px auto; align-items: stretch; border: 1px solid var(--brd); border-radius: 12px; overflow: hidden; background: #fff; }
.fn-input:focus-within { border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
.fn-input button { font: inherit; font-size: 18px; border: 0; background: var(--fn-bg); color: var(--tx); cursor: pointer; }
.fn-input button:hover { background: var(--acc-soft); color: var(--acc); }
.fn-input input { font: inherit; font-size: 17px; font-weight: 600; text-align: center; border: 0; min-width: 0; width: 100%; padding: 9px 4px; color: var(--tx); -moz-appearance: textfield; }
.fn-input input::-webkit-outer-spin-button, .fn-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fn-input input:focus { outline: none; }
.fn-input em { font-style: normal; display: grid; place-items: center; padding: 0 10px; font-family: 'Space Mono', monospace; font-size: 11px; color: var(--tx-3); border-left: 1px solid var(--fn-line); min-width: 44px; }
.fn-calc-out { background: var(--bg-dark); color: #fff; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.fn-calc-out span { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.fn-calc-out b { font-family: 'Space Grotesk', sans-serif; font-size: clamp(38px, 4.2vw, 54px); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.fn-calc-out p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.75); }

/* ═══ Eimer: Turm aus Bausteinen ═══ */
.fn-bucket { position: sticky; top: 84px; }
.bk-panel { position: relative; overflow: hidden; border-radius: 28px; color: #fff; background: radial-gradient(420px 260px at 50% 78%, rgba(200,134,30,.16), transparent 70%), radial-gradient(360px 220px at 100% 0, rgba(30,58,230,.18), transparent 70%), #13110F; border: 1px solid rgba(255,255,255,.07); box-shadow: 0 40px 90px -50px rgba(22,19,16,.8), inset 0 1px 0 rgba(255,255,255,.06); }
.bk-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(180deg, #000, transparent 80%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); }
.bk-head { position: relative; width: 100%; font: inherit; color: inherit; text-align: left; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; padding: 18px 20px 6px; border: 0; background: none; cursor: default; }
.bk-ring { position: relative; width: 48px; height: 48px; display: grid; place-items: center; }
.bk-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.bk-ring circle { fill: none; stroke-width: 3.5; }
.bk-ring-bg { stroke: rgba(255,255,255,.1); }
.bk-ring-val { stroke: var(--hi); stroke-linecap: round; stroke-dasharray: 125.7; stroke-dashoffset: 125.7; transition: stroke-dashoffset .9s var(--ease); }
.bk-ring em { font: 700 12px 'Space Grotesk', sans-serif; font-style: normal; letter-spacing: -0.02em; }
.bk-title small { display: block; font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.bk-title b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 19px; letter-spacing: -0.02em; }
.bk-pct { font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.bk-pct em { font-style: normal; }
.bk-pct i { font-style: normal; font-size: 15px; color: rgba(255,255,255,.45); margin-left: 1px; }
.bk-last { display: none; }
.bk-stage { position: relative; height: 290px; }
.bk-iso { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bk-drop { position: absolute; left: 50%; top: 24px; width: 40px; height: 20px; margin-left: -20px; }
.bk-empty { position: absolute; left: 32px; right: 32px; top: 70px; margin: 0; text-align: center; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.55); }
.bk-slab { transform-box: view-box; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.bk-slab.is-drop { animation: bkSlab .8s cubic-bezier(.3,1.4,.5,1) both; animation-delay: .52s; }
@keyframes bkSlab { 0% { opacity: 0; transform: translateY(-150px); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.bk-glow { transition: opacity .4s; opacity: .7; }
.fn-bucket.is-catch .bk-glow { animation: bkGlow .7s var(--ease); }
.fn-bucket.is-catch .bk-ring { animation: bkRing .5s var(--ease); }
.fn-bucket.is-catch .bk-base { animation: bkBase .45s var(--ease); transform-box: view-box; }
@keyframes bkGlow { 30% { opacity: 1; } }
@keyframes bkRing { 40% { transform: scale(1.14); } }
@keyframes bkBase { 35% { transform: translateY(3px); } }
.bk-legend { position: relative; list-style: none; margin: 0; padding: 4px 14px 16px; display: grid; gap: 4px; }
.bk-legend li { display: grid; grid-template-columns: 10px 76px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); }
.bk-legend li i { width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); }
.bk-legend li span { font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.bk-legend li b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-legend li.is-new { animation: bkLegend .7s var(--ease) both; animation-delay: .6s; background: rgba(200,134,30,.12); border-color: rgba(200,134,30,.3); }
@keyframes bkLegend { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.bk-legend li.bk-more { display: block; text-align: center; font-size: 12px; color: rgba(255,255,255,.45); background: none; border: 0; padding: 4px; }
.fn-bucket.is-busy .bk-ring-val { animation: bkBusy 1s ease-in-out infinite; }
@keyframes bkBusy { 50% { opacity: .35; } }

/* Fliegende Antwort */
.fly { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; max-width: 300px; padding: 9px 14px; border-radius: 12px; background: var(--hi); color: #fff; font: 600 14px 'Inter', system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 18px 40px -14px rgba(200,134,30,.8); will-change: transform; }

/* ═══ Ladebildschirm ═══ */
.ld { min-height: calc(100vh - 220px); display: grid; place-content: center; justify-items: center; text-align: center; gap: 22px; padding: 30px 0; }
.ld-orb { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.ld-orb i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--acc); animation: ldSpin 1.4s linear infinite; }
.ld-orb i:nth-child(2) { inset: 14px; border-top-color: var(--hi); animation-duration: 1.9s; animation-direction: reverse; }
.ld-orb i:nth-child(3) { inset: 28px; border-top-color: var(--tx); animation-duration: 2.6s; }
.ld-orb b { font-family: 'Space Grotesk', sans-serif; font-size: 30px; color: var(--st-ok); opacity: 0; transform: scale(.5); transition: all .4s var(--ease); }
.ld.is-hit .ld-orb b { opacity: 1; transform: none; }
@keyframes ldSpin { to { transform: rotate(360deg); } }
.ld.is-hit .ld-orb i { animation-play-state: paused; border-color: var(--st-ok); transition: border-color .3s; }
.ld-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.03em; margin: 0; }
.ld-dots i { font-style: normal; animation: fnDot 1s infinite; display: inline-block; }
.ld-dots i:nth-child(2) { animation-delay: .15s; } .ld-dots i:nth-child(3) { animation-delay: .3s; }
.ld-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.ld-steps li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--tx-3); transition: color .3s; }
.ld-steps li i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--brd); display: grid; place-items: center; transition: all .3s; position: relative; }
.ld-steps li.is-now { color: var(--tx); font-weight: 600; }
.ld-steps li.is-now i { border-color: var(--acc); border-top-color: transparent; animation: ldSpin .8s linear infinite; }
.ld-steps li.is-done { color: var(--tx); }
.ld-steps li.is-done i { background: var(--st-ok); border-color: var(--st-ok); }
.ld-steps li.is-done i::after { content: '✓'; color: #fff; font-size: 12px; font-weight: 700; }
.ld-scan { width: min(560px, 90vw); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.ld-track { display: flex; gap: 10px; width: max-content; animation: ldScan 2.4s linear infinite; }
.ld-track span { padding: 8px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--fn-line); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
@keyframes ldScan { to { transform: translateX(-33.33%); } }
.ld.is-hit .ld-track { animation-play-state: paused; }
.ld.is-hit .ld-title { color: var(--st-ok); }

/* ═══ Case ═══ */
.cs { display: grid; gap: 28px; }
.cs-head { text-align: center; max-width: 780px; margin: 8px auto 0; animation: fnIn .7s var(--ease) both; }
.cs-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--fn-line); font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-2); }
.cs-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--st-ok); box-shadow: 0 0 0 4px rgba(37,140,80,.15); }
.cs-head h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(36px, 5.4vw, 72px); letter-spacing: -0.045em; line-height: 1; margin: 16px 0 12px; }
.cs-head p { font-size: 17px; color: var(--tx-2); line-height: 1.5; margin: 0; }
.cs-hint { text-align: center; font-size: 12.5px; color: var(--tx-3); margin: -14px 0 0; }
.cs-say { max-width: 780px; margin: 0 auto; width: 100%; }
.cs-say .fn-say { margin-bottom: 10px; }
.cs-say .fn-say > div { background: #fff; border: 1px solid var(--fn-line); }

/* App-Vorschau */
.ap-stage { position: relative; padding: 0 40px 40px 0; }
.ap-stage.has-phone { padding-right: 130px; }
.ap { position: relative; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #D8D1C4; box-shadow: 0 60px 120px -60px rgba(22,19,16,.55), 0 20px 40px -30px rgba(22,19,16,.3); animation: apIn 1s var(--ease) both; animation-delay: .1s; transform-origin: 50% 0; }
@keyframes apIn { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }
.ap-chrome { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; padding: 10px 14px; background: #F3F0EA; border-bottom: 1px solid #E4DED3; }
.ap-dots { display: inline-flex; gap: 6px; }
.ap-dots i { width: 11px; height: 11px; border-radius: 50%; background: #E06C5C; }
.ap-dots i:nth-child(2) { background: #E7B34A; } .ap-dots i:nth-child(3) { background: #6DBE6A; }
.ap-url { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 8px; background: #fff; border: 1px solid #E4DED3; font-size: 12px; color: var(--tx-2); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ap-url svg { width: 12px; height: 12px; fill: none; stroke: var(--st-ok); stroke-width: 2.4; flex: none; }
.ap-live { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-ok); }
.ap-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--st-ok); animation: apPulse 1.6s ease-out infinite; }
@keyframes apPulse { 0% { box-shadow: 0 0 0 0 rgba(37,140,80,.5); } 100% { box-shadow: 0 0 0 8px rgba(37,140,80,0); } }
.ap-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 460px; }
.ap-side { background: #171411; color: rgba(255,255,255,.7); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.ap-logo { display: flex; align-items: center; gap: 10px; padding: 4px 6px 16px; }
.ap-logo b { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, var(--hi), #E3A64A); color: #fff; font: 700 13px 'Space Grotesk', sans-serif; flex: none; }
.ap-logo span { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.2; }
.ap-side .ap-nav { display: grid; gap: 2px; }
.ap-link { font: inherit; color: inherit; text-align: left; width: 100%; border: 0; background: none; cursor: pointer; }
.ap-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.ap-link:focus-visible { outline: 2px solid var(--hi); outline-offset: -2px; }
.ap-side .ap-link, .ap-set { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; line-height: 1.25; animation: apSide .6s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 400ms); }
.ap-side .ap-link span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ap-side .ap-link svg, .ap-set svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.ap-side .ap-link.is-on { background: rgba(255,255,255,.09); color: #fff; }
@keyframes apSide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.ap-set { margin-top: auto; }
.ap-user { display: flex; align-items: center; gap: 10px; padding: 12px 6px 2px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 8px; }
.ap-user i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #6B5BD2; color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.ap-user span { font-size: 12.5px; color: #fff; font-weight: 600; line-height: 1.2; }
.ap-user small { display: block; font-weight: 400; color: rgba(255,255,255,.5); font-size: 11px; }
.ap-main { padding: 18px 20px 20px; background: #FAF9F6; min-width: 0; }
.ap-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ap-top > div { flex: 1; min-width: 0; }
.ap-top small { font-size: 11.5px; color: var(--tx-3); }
.ap-top strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 20px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-search input { font: inherit; border: 0; background: none; outline: none; width: 100%; color: var(--tx); min-width: 0; }
.ap-search { display: inline-flex; align-items: center; gap: 8px; width: 180px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid #E4DED3; font-size: 12.5px; color: var(--tx-3); }
.ap-search svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.ap-btn { font: inherit; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 10px; background: var(--acc); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ap-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { position: relative; overflow: hidden; padding: 12px 14px 10px; border-radius: 12px; background: #fff; border: 1px solid #ECE7DE; animation: fnIn .7s var(--ease) both; animation-delay: calc(var(--d, 0) * 110ms + 350ms); transition: box-shadow .3s; }
.kpi span { display: block; font-size: 11.5px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 26px; letter-spacing: -0.03em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi.warn b { color: var(--st-bad); }
.kpi.gut b { color: var(--st-ok); }
.kpi.is-bump { box-shadow: 0 0 0 3px var(--acc-soft); }
.kpi-spark { position: absolute; right: 10px; bottom: 10px; width: 70px; height: 26px; }
.kpi-spark polyline { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; stroke-dashoffset: 160; animation: apDraw 1.4s var(--ease) forwards; animation-delay: .9s; opacity: .55; }
.kpi.warn .kpi-spark polyline { stroke: var(--st-bad); }
.kpi.gut .kpi-spark polyline { stroke: var(--st-ok); }
@keyframes apDraw { to { stroke-dashoffset: 0; } }
.ap-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ap-table { background: #fff; border: 1px solid #ECE7DE; border-radius: 12px; overflow: hidden; font-size: 12.5px; }
.ap-tr { display: grid; grid-template-columns: 1.35fr 1.2fr 1fr .95fr; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid #F0ECE4; animation: apRow .55s var(--ease) both; animation-delay: calc(var(--d, 0) * 80ms + 650ms); }
.ap-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx-2); }
.ap-th { border-top: 0; background: #FBFAF7; font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; animation: none; }
.ap-th > span { color: var(--tx-3); }
.ap-first { display: flex; align-items: center; gap: 8px; }
.ap-first i { font-style: normal; flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-size: 9.5px; font-weight: 700; }
.ap-first b { font-weight: 600; color: var(--tx); overflow: hidden; text-overflow: ellipsis; }
.ap-tr.is-live { animation: apLive 1.6s var(--ease) both; }
@keyframes apRow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes apLive { 0% { opacity: 0; transform: translateY(-12px); background: var(--acc-soft); } 20% { opacity: 1; transform: none; background: var(--acc-soft); } 100% { background: transparent; } }
.st { font-style: normal; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--fn-line); background: var(--fn-bg); color: var(--tx-2); white-space: nowrap; }
.st.neu { color: var(--acc); border-color: rgba(30,58,230,.3); background: var(--acc-soft); }
.st.inarbeit { color: #3F4AA0; border-color: rgba(63,74,160,.25); background: rgba(63,74,160,.06); }
.st.wartet, .st.teil { color: var(--st-wait); border-color: rgba(200,134,30,.35); background: var(--hi-soft); }
.st.erledigt, .st.ok { color: var(--st-ok); border-color: rgba(37,140,80,.3); background: rgba(37,140,80,.08); }
.st.fehlt { color: var(--st-bad); border-color: rgba(190,50,35,.3); background: rgba(190,50,35,.07); }
.ap-detail { background: #fff; border: 1px solid #ECE7DE; border-radius: 12px; padding: 14px; display: grid; gap: 4px; animation: fnIn .7s var(--ease) both; animation-delay: 1s; }
.ap-detail small { font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.ap-detail strong { font-size: 15px; }
.ap-detail-sub { font-size: 12.5px; color: var(--tx-2); }
.ap-tl { list-style: none; margin: 10px 0 6px; padding: 0 0 0 14px; border-left: 2px solid #ECE7DE; display: grid; gap: 9px; }
.ap-tl li { position: relative; font-size: 12px; color: var(--tx-2); line-height: 1.35; animation: apSide .5s var(--ease) both; animation-delay: calc(var(--d, 0) * 220ms + 1.3s); }
.ap-tl li::before { content: ''; position: absolute; left: -20px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--acc); }
.ap-tl li:last-child::before { background: var(--acc); }
.ap-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.ap-tags i { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 3px 7px; border-radius: 6px; background: var(--fn-bg); color: var(--tx-2); }
.ap-action { margin-top: 6px; text-align: center; padding: 9px; border-radius: 10px; background: var(--tx); color: #fff; font-size: 12.5px; font-weight: 600; }
.ap-toast { position: absolute; left: 226px; bottom: 16px; display: flex; align-items: center; gap: 10px; max-width: 320px; padding: 11px 14px; border-radius: 12px; background: #171411; color: #fff; font-size: 13px; box-shadow: 0 20px 40px -18px rgba(22,19,16,.7); opacity: 0; transform: translateY(12px); pointer-events: none; }
.ap-toast i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hi); box-shadow: 0 0 0 4px rgba(200,134,30,.25); }
.ap-toast.is-on { animation: apToast 3.6s var(--ease) forwards; }
@keyframes apToast { 0% { opacity: 0; transform: translateY(12px); } 10%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }

/* Handy */
.ph { position: absolute; right: 0; bottom: 0; width: 196px; height: 380px; border-radius: 34px; background: #171411; padding: 9px; box-shadow: 0 40px 80px -30px rgba(22,19,16,.7); animation: phIn 1s var(--ease) both; animation-delay: .9s; }
@keyframes phIn { from { opacity: 0; transform: translateY(50px) rotate(4deg); } to { opacity: 1; transform: rotate(-2deg); } }
.ph-notch { position: absolute; top: 14px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 999px; background: #000; z-index: 2; }
.ph-screen { height: 100%; border-radius: 26px; background: #FAF9F6; padding: 40px 14px 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ph-screen small { font-size: 10px; color: var(--tx-3); }
.ph-screen strong { font-family: 'Space Grotesk', sans-serif; font-size: 16px; letter-spacing: -0.02em; line-height: 1.15; }
.ph-screen ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.ph-screen li { font-size: 11.5px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #ECE7DE; animation: apRow .5s var(--ease) both; animation-delay: calc(var(--d, 0) * 150ms + 1.5s); }
.ph-sig { margin-top: 2px; border-radius: 10px; background: #fff; border: 1px solid #ECE7DE; padding: 4px 8px 6px; }
.ph-sig svg { width: 100%; height: 36px; }
.ph-sig path { fill: none; stroke: var(--acc); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: apDraw 1.8s ease-in-out forwards; animation-delay: 2.3s; }
.ph-sig span { display: block; font-size: 9px; color: var(--tx-3); border-top: 1px solid #ECE7DE; padding-top: 3px; }
.ph-btn { margin-top: auto; text-align: center; padding: 10px; border-radius: 12px; background: var(--acc); color: #fff; font-size: 12px; font-weight: 600; }

/* Anfrage */
.cs-form { border-radius: 26px; padding: 30px; background: #fff; border: 1px solid var(--fn-line); max-width: 880px; width: 100%; margin: 0 auto; }
.cs-form h2 { font-family: 'Space Grotesk', sans-serif; font-size: 32px; letter-spacing: -0.03em; margin: 0 0 6px; }
.cs-form > p { font-size: 15.5px; color: var(--tx-2); line-height: 1.5; margin: 0 0 16px; }
.fn-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; }
.fn-form label { display: grid; gap: 5px; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.fn-form label.full { grid-column: 1 / -1; }
.fn-form input { font: 400 16px 'Inter', -apple-system, system-ui, sans-serif; letter-spacing: 0; text-transform: none; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--brd); color: var(--tx); background: #fff; width: 100%; }
.fn-form input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
.fn-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }


/* ═══ Klickbares Werkzeug ═══ */
.ap-hint { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); z-index: 3; padding: 6px 14px; border-radius: 999px; background: var(--hi); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 12px 26px -12px rgba(200,134,30,.9); animation: apHint 2.2s ease-in-out infinite; animation-delay: 2s; white-space: nowrap; }
@keyframes apHint { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }
.ap-stage { padding-top: 22px; }
.ap-mobnav { display: none; }
.ap-tr.is-row { cursor: pointer; transition: background .2s; }
.ap-tr.is-row:hover { background: #FBFAF6; }
.ap-tr.is-row.is-sel { background: var(--acc-soft); box-shadow: inset 3px 0 0 var(--acc); }
.ap-tr.is-row:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
button.st { font-family: inherit; cursor: pointer; transition: transform .15s, box-shadow .2s; }
button.st:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -6px rgba(22,19,16,.4); }
.ap-detail-st { justify-self: start; margin: 6px 0 2px; }
button.ap-action { font: inherit; border: 0; cursor: pointer; width: 100%; }
button.ap-action:hover { background: var(--acc); }
.ap-leer { padding: 18px; margin: 0; color: var(--tx-3); font-size: 13px; }
#apView.is-swap { animation: fnIn .45s var(--ease); }
#apView.is-swap .kpi, #apView.is-swap .ap-tr, #apView.is-swap .ap-detail, #apView.is-swap .ap-tl li { animation: none; }
.am { background: #fff; border: 1px solid #ECE7DE; border-radius: 14px; padding: 18px; display: grid; gap: 16px; min-height: 330px; align-content: start; }
.am-head { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.am-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--hi-soft); display: grid; place-items: center; grid-row: span 2; }
.am-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--hi); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.am-head strong { font-family: 'Space Grotesk', sans-serif; font-size: 20px; letter-spacing: -0.02em; }
.am-head p { margin: 2px 0 0; font-size: 13.5px; color: var(--tx-2); }
.am-loest { grid-column: 2; justify-self: start; font-style: normal; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(190,50,35,.07); color: var(--st-bad); border: 1px solid rgba(190,50,35,.2); }
.am-btn { font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--brd); background: #fff; color: var(--tx); cursor: pointer; white-space: nowrap; transition: all .2s; }
.am-btn:hover { border-color: var(--tx); }
.am-btn.is-main { background: var(--acc); color: #fff; border-color: var(--acc); justify-self: start; padding: 10px 18px; }
.am-btn.is-main:hover { background: var(--tx); border-color: var(--tx); }
.am-btn:disabled { opacity: .35; cursor: not-allowed; }
.am-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.am-list li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 110px 100px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid #F0ECE4; font-size: 13px; color: var(--tx-2); }
.am-list li.is-due { border-color: rgba(190,50,35,.3); background: rgba(190,50,35,.04); }
.am-list li em { font-style: normal; font-size: 12px; color: var(--tx-3); }
.am-list li.is-due em { color: var(--st-bad); font-weight: 600; }
.am-done { font-size: 12.5px; font-weight: 600; color: var(--st-ok); text-align: center; animation: fnOpt .4s var(--ease); }
.am-sign { display: grid; gap: 12px; }
.am-sign-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.am-sign-info small { font-family: 'Space Mono', monospace; font-size: 9.5px; text-transform: uppercase; color: var(--tx-3); letter-spacing: .06em; }
.am-sign-info b { font-size: 15px; }
.am-sign-info span { font-size: 13px; color: var(--tx-2); }
.am-pad { position: relative; height: 150px; border-radius: 12px; border: 1.5px dashed var(--brd); background: #FBFAF7; touch-action: none; }
.am-pad canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.am-pad span { position: absolute; left: 14px; right: 14px; bottom: 10px; border-top: 1px solid var(--brd); padding-top: 4px; font-size: 11px; color: var(--tx-3); pointer-events: none; }
.am-ok { display: grid; gap: 4px; padding: 16px; border-radius: 12px; background: rgba(37,140,80,.07); border: 1px solid rgba(37,140,80,.25); animation: fnIn .5s var(--ease); }
.am-ok b { color: var(--st-ok); font-size: 15px; }
.am-ok span { font-size: 13px; color: var(--tx-2); }
.am-pdf { justify-self: start; margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 600; padding: 6px 10px 6px 26px; border-radius: 8px; background: #fff; border: 1px solid #ECE7DE; position: relative; }
.am-pdf::before { content: 'PDF'; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-size: 7px; font-weight: 800; color: #fff; background: var(--st-bad); padding: 2px 2px; border-radius: 2px; }
.am-tpl { display: grid; gap: 12px; }
.am-tpl-list { display: flex; flex-wrap: wrap; gap: 6px; }
.am-chip { font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--brd); background: #fff; color: var(--tx-2); cursor: pointer; transition: all .2s; white-space: nowrap; }
.am-chip:hover { border-color: var(--tx); color: var(--tx); }
.am-chip.is-on { background: var(--tx); border-color: var(--tx); color: #fff; }
.am-mail { display: grid; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid #ECE7DE; background: #FBFAF7; }
.am-mail small { font-size: 11.5px; color: var(--tx-3); }
.am-mail p { margin: 0; font-size: 14px; line-height: 1.55; min-height: 70px; }
.am-ph { color: var(--tx-3); font-size: 13.5px; }
.am-roles { display: grid; gap: 12px; }
.am-perms { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.am-perms li { padding: 9px 12px; border-radius: 10px; background: rgba(37,140,80,.06); color: var(--tx); font-size: 13.5px; animation: fnOpt .35s var(--ease); }
.am-perms li.is-off { background: var(--fn-bg); color: var(--tx-3); }
.am-note { margin: 0; font-size: 12.5px; color: var(--tx-3); }
.am-report { display: grid; gap: 12px; }
.am-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; height: 150px; padding: 0 6px; }
.am-bars div { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; }
.am-bars i { align-self: end; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #7F95FA, var(--acc)); animation: amBar .9s var(--ease) both; animation-delay: calc(var(--d) * 120ms); transform-origin: bottom; }
.am-bars span { font-size: 11px; color: var(--tx-3); text-align: center; }
@keyframes amBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.am-listview { display: grid; gap: 6px; }
.am-check { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid #F0ECE4; font-size: 13px; cursor: pointer; }
.am-check input { width: 18px; height: 18px; accent-color: var(--hi); }
.am-check span { color: var(--tx-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-check span b { color: var(--tx); }

/* Abschnitte des Case */
.vl, .dn, .rf, .pk { opacity: 1; }
.vl { border-radius: 26px; padding: 34px 32px 28px; background: var(--bg-dark); color: #fff; position: relative; overflow: hidden; }
.vl::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 300px at 90% 0, rgba(240,107,90,.18), transparent 70%); pointer-events: none; }
.vl-head { position: relative; max-width: 760px; margin-bottom: 24px; }
.vl-head > span { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #FF8A74; }
.vl-head h2 { color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.035em; line-height: 1.1; margin: 8px 0 10px; }
.vl-head p { margin: 0; font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.7); }
.vl-grid { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: center; }
.vl-big small { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.vl-big b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: clamp(52px, 7vw, 92px); letter-spacing: -0.05em; line-height: 1; color: #FF8A74; margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
.vl-big span { font-size: 15px; color: rgba(255,255,255,.7); }
.vl-bars { display: grid; gap: 12px; }
.vl-row { display: grid; grid-template-columns: 86px minmax(0, 1fr) 100px; align-items: center; gap: 14px; }
.vl-row > span { font-size: 13.5px; color: rgba(255,255,255,.65); }
.vl-row > div { position: relative; height: 26px; border-radius: 8px; background: rgba(255,255,255,.06); }
.vl-row i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px; background: linear-gradient(90deg, rgba(240,107,90,.55), #F06B5A); transition: width 1.2s var(--ease); transition-delay: calc(var(--d) * 150ms + 200ms); }
.vl.is-in .vl-row i { width: var(--w); }
.vl-row > b { text-align: right; font-family: 'Space Grotesk', sans-serif; font-size: 18px; letter-spacing: -0.02em; }
.vl-mark { position: absolute; top: -18px; left: var(--x); transform: translateX(-50%); font-style: normal; font-size: 10px; color: rgba(255,255,255,.6); white-space: nowrap; }
.vl-mark::after { content: ''; position: absolute; left: 50%; top: 15px; width: 2px; height: 34px; margin-left: -1px; background: #fff; border-radius: 2px; }
.vl-note { position: relative; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: 15px; color: #fff; }

.dn, .rf { border-radius: 26px; padding: 34px 32px 30px; background: #fff; border: 1px solid var(--fn-line); }
.dn-head > span, .rf-head > span { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.dn-head h2, .rf-head h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.035em; line-height: 1.1; margin: 8px 0 22px; }
.dn-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.dn-pairs { display: grid; gap: 10px; }
.dn-pair { display: grid; grid-template-columns: minmax(0, .8fr) 26px minmax(0, 1.2fr); align-items: stretch; gap: 8px; opacity: 0; transform: translateY(12px); transition: all .6s var(--ease); transition-delay: calc(var(--d) * 120ms); }
.dn.is-in .dn-pair { opacity: 1; transform: none; }
.dn-vorher, .dn-nachher { border-radius: 16px; padding: 14px 16px; }
.dn-vorher { background: rgba(190,50,35,.05); border: 1px solid rgba(190,50,35,.15); }
.dn-nachher { background: rgba(37,140,80,.06); border: 1px solid rgba(37,140,80,.2); }
.dn-vorher small, .dn-nachher small, .dn-day > small { font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.dn-vorher p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--tx); }
.dn-nachher b { display: block; margin-top: 4px; font-size: 15px; }
.dn-nachher p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--tx-2); }
.dn-arrow { align-self: center; justify-self: center; font-size: 18px; color: var(--tx-3); }
.dn-day { border-radius: 18px; background: var(--fn-bg); padding: 18px 20px; }
.dn-day ol { list-style: none; margin: 12px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--fn-line); display: grid; gap: 14px; }
.dn-day li { position: relative; opacity: 0; transform: translateX(8px); transition: all .5s var(--ease); transition-delay: calc(var(--d) * 180ms + 300ms); }
.dn.is-in .dn-day li { opacity: 1; transform: none; }
.dn-day li::before { content: ''; position: absolute; left: -23px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--hi); }
.dn-day li b { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--hi); }
.dn-day li p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; }

.rf { background: linear-gradient(135deg, #fff 0%, #FBF6EC 100%); }
.rf-head > span { color: var(--hi); }
.rf-head h2 { margin-bottom: 4px; }
.rf-head p { margin: 0 0 20px; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.rf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.rf-stats div { padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--fn-line); opacity: 0; transform: translateY(10px); transition: all .6s var(--ease); transition-delay: calc(var(--d) * 100ms); }
.rf.is-in .rf-stats div { opacity: 1; transform: none; }
.rf-stats b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.035em; }
.rf-stats span { font-size: 12.5px; color: var(--tx-2); }
.rf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.rf-grid small { display: block; font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 4px; }
.rf-grid p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--tx-2); }
.rf-grid ol { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.rf-grid ol li::marker { color: var(--hi); font-weight: 700; }
.rf-grenze { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--fn-line); font-size: 14px !important; }
.rf-grenze b { color: var(--tx); }
.rf-grid a { font-size: 14.5px; font-weight: 600; color: var(--acc); }

.pk { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 14px; align-items: stretch; }
.pk-card { border-radius: 26px; padding: 26px; background: var(--hi-soft); border: 1.5px solid var(--hi); display: flex; flex-direction: column; gap: 4px; }
.pk-card > span, .pk-plan > span { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.pk-card strong { font-size: 18px; margin-top: 4px; }
.pk-card > b { font-family: 'Space Grotesk', sans-serif; font-size: 48px; letter-spacing: -0.045em; line-height: 1.05; }
.pk-card > small { font-size: 13px; color: var(--tx-2); }
.pk-card > p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--tx-2); }
.pk-hint { padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid rgba(200,134,30,.35); }
.pk-incl { list-style: none; margin: auto 0 0; padding: 16px 0 0; display: grid; gap: 7px; }
.pk-incl li { position: relative; padding-left: 24px; font-size: 14px; }
.pk-incl li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%; background: var(--hi); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.pk-plan { border-radius: 26px; padding: 26px 28px; background: #fff; border: 1px solid var(--fn-line); }
.pk-plan h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.03em; line-height: 1.1; margin: 8px 0 8px; }
.pk-lead { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--tx-2); }
.pk-steps { list-style: none; counter-reset: pk; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.pk-steps li { counter-increment: pk; position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 50px; border-radius: 14px; background: var(--fn-bg); opacity: 0; transform: translateY(10px); transition: all .5s var(--ease); transition-delay: calc(var(--d) * 110ms); }
.pk.is-in .pk-steps li { opacity: 1; transform: none; }
.pk-steps li::before { content: counter(pk); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 8px; background: var(--tx); color: #fff; font: 700 12px 'Space Grotesk', sans-serif; display: grid; place-items: center; }
.pk-steps em { font-style: normal; font-size: 13px; color: var(--st-bad); }
.pk-steps span { font-size: 14.5px; color: var(--tx); line-height: 1.45; }
.pk-extra { margin: 0 0 12px; }
.pk-extra small { font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.pk-extra ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--tx-2); }
.pk-time { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--fn-line); }
.pk-time div { display: grid; gap: 2px; }
.pk-time b { font-family: 'Space Grotesk', sans-serif; font-size: 16px; color: var(--acc); }
.pk-time span { font-size: 13px; color: var(--tx-2); line-height: 1.4; }


/* Name und Unternehmen in Frage 5 */
.fn-who { margin-top: 20px; padding: 18px; border-radius: 16px; background: var(--hi-soft); border: 1px solid rgba(200,134,30,.3); }
.fn-who .fn-q-no { color: #8A5A0E; margin-bottom: 10px; }
.fn-who .fn-form { margin: 0; }
.ap-logo span small { display: block; font-size: 10.5px; font-weight: 400; color: rgba(255,255,255,.5); margin-top: 1px; }

/* Nächster Schritt und Erstgespräch */
.cs-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: 30px 32px; border-radius: 26px; background: var(--bg-dark); color: #fff; }
.cs-next span { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--hi); }
.cs-next h2 { color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.03em; margin: 6px 0 6px; }
.cs-next p { margin: 0; color: rgba(255,255,255,.7); font-size: 15.5px; }
.fn-main.is-case { padding-bottom: 120px; }
.eg-bar { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; width: min(760px, calc(100vw - 24px)); display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 10px 10px 12px; border-radius: 20px; background: rgba(19,17,15,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; box-shadow: 0 30px 60px -24px rgba(22,19,16,.7); animation: egIn .6s var(--ease) both; animation-delay: .8s; }
@keyframes egIn { from { opacity: 0; transform: translate(-50%, 30px); } to { opacity: 1; transform: translate(-50%, 0); } }
.eg-bar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 2px var(--hi); }
.eg-bar b { display: block; font-size: 15px; }
.eg-bar span { display: block; font-size: 12.5px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eg-bar .fn-next { white-space: nowrap; }
.eg { position: fixed; inset: 0; z-index: 300; background: rgba(22,19,16,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.eg-box { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 26px; padding: 30px 30px 24px; box-shadow: 0 40px 100px -40px rgba(22,19,16,.7); animation: fnIn .45s var(--ease); }
.eg-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--fn-bg); cursor: pointer; font-size: 14px; }
.eg-kicker { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--hi); }
.eg-box h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.03em; line-height: 1.1; margin: 6px 40px 8px 0; }
.eg-lead { margin: 0 0 18px; font-size: 15px; color: var(--tx-2); }
.eg-zeit { margin: 0 0 16px; }
.eg-zeit small, .eg-case small { display: block; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 6px; }
.eg-zeit div { display: flex; flex-wrap: wrap; gap: 6px; }
.eg-case { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--fn-bg); }
.eg-case dl { margin: 0; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; font-size: 13.5px; }
.eg-case dt { color: var(--tx-3); }
.eg-case dd { margin: 0; color: var(--tx); }
.fn-form input.is-empty { border-color: var(--hi); box-shadow: 0 0 0 4px var(--hi-soft); }
.fn-fine.is-warn { color: var(--st-bad); }
@media (max-width: 640px) {
  .eg-bar { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .eg-bar img { width: 38px; height: 38px; }
  .eg-bar span { display: none; }
  .eg-bar .fn-next { grid-column: 1 / -1; justify-content: center; }
  .eg-box { padding: 24px 18px 18px; border-radius: 20px; }
  .eg-case dl { grid-template-columns: 1fr; gap: 0; }
  .eg-case dd { margin-bottom: 8px; }
  .cs-next { padding: 24px 18px; }
  .cs-next .fn-next { width: 100%; justify-content: center; }
}

.eg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.eg-danke { text-align: center; padding: 10px 0 4px; }
.eg-check { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--st-ok); color: #fff; font-size: 30px; font-weight: 700; animation: egCheck .6s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes egCheck { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.eg-danke h2 { margin: 6px 0 8px !important; }
.eg-danke .eg-lead { max-width: 440px; margin: 0 auto 20px; }
.eg-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; text-align: left; padding: 16px 18px; border-radius: 16px; background: var(--fn-bg); margin-bottom: 12px; }
.eg-next b { display: block; font-size: 15px; }
.eg-next span { font-size: 13.5px; color: var(--tx-2); }
.eg-wege { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.eg-weg { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: var(--fn-bg); }
.eg-weg b { font-size: 15px; }
.eg-weg span { font-size: 13.5px; color: var(--tx-2); line-height: 1.45; flex: 1; }
.eg-weg a:not(.fn-next) { color: var(--acc); font-weight: 600; }
.eg-weg .fn-next { align-self: flex-start; margin-top: 6px; }
.eg-text summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--tx-2); }
.eg-text textarea { width: 100%; margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--brd); font: 12.5px/1.5 'Space Mono', monospace; color: var(--tx); background: #fff; resize: vertical; }
@media (max-width: 640px) { .eg-wege { grid-template-columns: 1fr; } .eg-next .fn-next { width: 100%; justify-content: center; } }

/* ─── Fuß ─── */
.fn-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); font-size: 12.5px; color: var(--tx-3); }
.fn-foot a { color: var(--tx-3); }
.fn-foot a:hover { color: var(--tx); }

/* ─── Termin-Overlay ─── */
.cal-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(22,19,16,.6); display: none; align-items: center; justify-content: center; padding: 16px; }
.cal-overlay.open { display: flex; }
.cal-box { position: relative; width: min(960px, 100%); height: min(760px, 92vh); background: #fff; border-radius: 18px; overflow: hidden; }
.cal-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg-dark); color: #fff; cursor: pointer; font-size: 15px; }
#calMount { width: 100%; height: 100%; }

/* ═══ Responsiv ═══ */
@media (max-width: 1100px) {
  .ap-toast { left: auto; right: 16px; }
  .ap-grid { grid-template-columns: 1fr; }
  .ap-detail { display: none; }
  .ap-search { display: none; }
}
@media (max-width: 960px) {
  .fn-main { grid-template-columns: minmax(0, 1fr); padding-top: 18px; padding-bottom: 104px; }
  .fn-bucket { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); top: auto; z-index: 70; }
  .bk-panel { border-radius: 22px; }
  .bk-head { grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 12px; padding: 10px 16px 10px 10px; cursor: pointer; }
  .bk-ring { width: 42px; height: 42px; grid-row: span 2; }
  .bk-title small { display: none; }
  .bk-title b { font-size: 15px; }
  .bk-pct { font-size: 20px; grid-row: span 2; }
  .bk-pct i { font-size: 12px; }
  .bk-last { display: block; grid-column: 2; font-size: 12.5px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bk-body { display: none; max-height: 60vh; overflow: auto; }
  .fn-bucket.is-open .bk-body { display: block; }
  .bk-stage { height: 220px; }
  .vl-grid, .dn-grid, .rf-grid, .pk { grid-template-columns: 1fr; }
  .rf-stats { grid-template-columns: 1fr 1fr; }
  .am-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .am-list li > span:nth-child(2), .am-list li em { display: none; }
  .ap-stage { padding: 0; }
  .ph { display: none; }
}
@media (max-width: 640px) {
  .fn-card { padding: 24px 18px 18px; border-radius: 20px; }
  .fn-opt { font-size: 15px; padding: 12px 12px 12px 10px; gap: 10px; }
  .fn-beleg, .fn-first { margin-left: 0; }
  .fn-calc, .fn-form { grid-template-columns: 1fr; }
  .fn-next.is-big { width: 100%; justify-content: center; }
  .ap-body { grid-template-columns: 1fr; min-height: 0; }
  .ap-side { display: none; }
  .ap-mobnav { display: flex; gap: 6px; overflow-x: auto; margin: -4px 0 12px; padding-bottom: 4px; }
  .ap-search { display: none; }
  .dn-pair { grid-template-columns: 1fr; }
  .dn-arrow { transform: rotate(90deg); }
  .vl, .dn, .rf, .cs-form { padding: 24px 18px; }
  .vl-row { grid-template-columns: 70px minmax(0, 1fr) 80px; gap: 8px; }
  .vl-row > b { font-size: 15px; }
  .pk-time { grid-template-columns: 1fr; }
  .pk-plan, .pk-card { padding: 22px 18px; }
  .ap-chrome { grid-template-columns: 50px 1fr 50px; }
  .ap-main { padding: 14px 12px; }
  .ap-kpis { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .kpi { padding: 9px 9px 8px; }
  .kpi span { font-size: 10px; white-space: normal; line-height: 1.2; min-height: 24px; }
  .kpi b { font-size: 18px; }
  .kpi-spark { display: none; }
  .ap-tr { grid-template-columns: minmax(0, 1fr) auto; }
  .ap-tr > span:nth-child(2), .ap-tr > span:nth-child(3) { display: none; }
  .ap-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .ap-toast { left: 12px; }
  .cs-ref { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .kpi-spark polyline, .ph-sig path { stroke-dashoffset: 0; }
  .vl-row i { width: var(--w); }
  .ap-toast { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Gestaltung: Werkstatt-Blaupause (17.09.2026)
   Papier, Tinte, Signalorange. Überschriften in Instrument Serif,
   technische Beschriftung sparsam in Space Mono.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --paper: #F1ECE2; --paper-2: #E9E2D5; --card: #FFFDF8;
  --tx: #16130F; --tx-2: #4B453D; --tx-3: #8C8478;
  --fn-bg: #EEE8DD; --fn-line: #DCD3C4; --brd: #CFC5B4;
  --acc: #D6461A; --acc-soft: rgba(214,70,26,.08);
  --hi: #B8741B; --hi-soft: rgba(184,116,27,.10);
  --print: #6E7C8F;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
}
.fn-body { background: var(--paper); }
.fn-body::after { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fn-top, .fn-main, .fn-foot, .eg-bar { position: relative; z-index: 2; }
.fn-top { position: sticky; z-index: 50; }
.eg-bar { position: fixed; z-index: 90; }

/* Blaupause */
.bp { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; --px: 0; --py: 0;
  background-image:
    linear-gradient(rgba(110,124,143,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,124,143,.10) 1px, transparent 1px),
    linear-gradient(rgba(110,124,143,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,124,143,.05) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 60% 45%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 80% at 60% 45%, #000 35%, transparent 100%); }
.bp-bau { position: absolute; right: -4vw; bottom: -6vh; width: min(1100px, 78vw); height: auto; opacity: .9;
  transform: translate(calc(var(--px) * -10px), calc(var(--py) * -8px)); }
.bp-raster line { stroke: rgba(110,124,143,.16); stroke-width: 1; }
.bp-mass line { stroke: var(--print); stroke-width: 1; stroke-dasharray: 2 4; }
.bp-mass text { font: 400 13px 'Space Mono', monospace; fill: var(--print); text-anchor: middle; letter-spacing: .04em; }
.bp-b polygon { stroke-width: 1.1; stroke-linejoin: round; transition: fill .8s var(--ease), stroke .8s var(--ease); }
.bp-b.is-plan polygon { fill: none; stroke: rgba(110,124,143,.35); stroke-dasharray: 4 5; }
.bp-b.is-ink .f-t { fill: #FBF8F2; stroke: #3A342C; }
.bp-b.is-ink .f-l { fill: #E4DCCD; stroke: #3A342C; }
.bp-b.is-ink .f-r { fill: #D3C8B5; stroke: #3A342C; }
.bp-b.is-akzent .f-t { fill: #F2A27F; } .bp-b.is-akzent .f-l { fill: #DC6A40; } .bp-b.is-akzent .f-r { fill: #B94E27; }
.bp-b.is-neu polygon { stroke-dasharray: 600; stroke-dashoffset: 600; animation: bpZeichnen 1.4s var(--ease) forwards; animation-delay: .5s; }
.bp-b.is-neu { animation: bpSetzen .9s var(--ease) both; animation-delay: .45s; }
@keyframes bpZeichnen { to { stroke-dashoffset: 0; } }
@keyframes bpSetzen { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
.bp-mark { position: absolute; width: 22px; height: 22px; border-color: rgba(22,19,15,.35); border-style: solid; border-width: 0; }
.bp-mark.tl { top: 76px; left: 18px; border-top-width: 1px; border-left-width: 1px; }
.bp-mark.tr { top: 76px; right: 18px; border-top-width: 1px; border-right-width: 1px; }
.bp-mark.bl { bottom: 18px; left: 18px; border-bottom-width: 1px; border-left-width: 1px; }
.bp-mark.br { bottom: 18px; right: 18px; border-bottom-width: 1px; border-right-width: 1px; }
.bp-kopf { position: absolute; right: 48px; bottom: 26px; display: flex; border: 1px solid rgba(22,19,15,.3); background: rgba(241,236,226,.7); font: 400 10.5px 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-2); }
.bp-kopf span { padding: 6px 10px; border-left: 1px solid rgba(22,19,15,.2); }
.bp-kopf span:first-child { border-left: 0; }
.bp-kopf b { color: var(--acc); font-weight: 700; }
body.is-case .bp-bau { opacity: .16; transition: opacity 1s; }
body.is-loading .bp-bau { right: 2vw; bottom: 6vh; width: min(900px, 58vw); }
.fn-main.is-loading .ld { justify-items: start; text-align: left; place-content: center start; max-width: 620px; margin-left: 2vw; }
.fn-main.is-loading .ld-scan { mask-image: linear-gradient(90deg, #000 70%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); }
.fn-foot { background: transparent; border-top: 1px solid rgba(22,19,15,.1); }
.ap-hint { border-radius: 3px; background: var(--tx); box-shadow: 0 10px 20px -10px rgba(22,19,15,.6); }
.ld-track span { border-radius: 3px; background: var(--card); }

/* Kopfzeile */
.fn-top { background: rgba(241,236,226,.82); border-bottom-color: rgba(22,19,15,.12); }
.wordmark b { font-family: var(--serif); font-weight: 400; font-size: 25px; letter-spacing: -0.01em; }
.wordmark span { color: var(--tx-3); }
.fn-steps { gap: 2px; }
.fn-steps li { font-size: 13px; }
.fn-steps li + li::before { width: 22px; background: rgba(22,19,15,.18); }
.fn-steps i { width: auto; height: auto; min-width: 22px; padding: 2px 5px; border: 0; border-radius: 0; background: none; font-size: 11px; color: var(--tx-3); box-shadow: none !important; }
.fn-steps li.is-now i { background: none; color: var(--acc); border-bottom: 2px solid var(--acc); }
.fn-steps li.is-done i { background: none; color: transparent; }
.fn-steps li.is-done i::after { color: var(--tx); font-size: 12px; }
.fn-steps li.is-done { color: var(--tx-2); }

/* Karte der Frage */
.fn-card { background: var(--card); border: 1px solid rgba(22,19,15,.14); border-radius: 6px; padding: 42px 44px 30px;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 0 rgba(22,19,15,.03), 0 40px 80px -50px rgba(22,19,15,.35); }
.fn-card::before, .fn-card::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--acc); border-style: solid; }
.fn-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.fn-card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.fn-main.is-case .fn-card::before, .fn-main.is-case .fn-card::after, .fn-main.is-loading .fn-card::before, .fn-main.is-loading .fn-card::after { display: none; }
.fn-kicker { font: 500 13px 'Inter', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--tx-3); margin-bottom: 26px; display: flex; align-items: center; gap: 10px; }
.fn-kicker::before { content: ''; width: 28px; height: 1px; background: var(--tx-3); }
.fn-q-no { font: 500 12.5px 'Inter', system-ui, sans-serif; letter-spacing: .01em; text-transform: none; color: var(--tx-3); margin-bottom: 14px; }
.fn-q { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.6vw, 66px); letter-spacing: -0.015em; line-height: 1.0; margin-bottom: 16px; color: var(--tx); }
.fn-lead { font-size: 16.5px; color: var(--tx-2); max-width: 620px; }

/* Antworten */
.fn-opts { gap: 0; border-top: 1px solid rgba(22,19,15,.12); }
.fn-opt { border: 0; border-bottom: 1px solid rgba(22,19,15,.12); border-radius: 0; background: transparent; padding: 17px 12px 17px 4px; font-size: 17px; grid-template-columns: 34px 1fr auto; box-shadow: none !important; transform: none !important; position: relative; }
.fn-opt::before { content: ''; position: absolute; left: -44px; top: 0; bottom: 0; width: 3px; background: var(--acc); transform: scaleY(0); transition: transform .3s var(--ease); }
.fn-opt kbd { width: 24px; height: 24px; border-radius: 3px; border: 1px solid rgba(22,19,15,.2); background: transparent; font-size: 10.5px; color: var(--tx-3); }
.fn-opt::after { content: '→'; width: auto; height: auto; border: 0; border-radius: 0; font-size: 18px; color: var(--tx-3); opacity: 0; transform: translateX(-8px); transition: all .25s var(--ease); background: none !important; box-shadow: none !important; }
.fn-opts.is-multi .fn-opt::after { content: ''; width: 18px; height: 18px; border: 1.5px solid rgba(22,19,15,.3); border-radius: 3px; opacity: 1; transform: none; }
.fn-opt:hover, .fn-opt:focus-visible { background: rgba(22,19,15,.025); padding-left: 12px; }
.fn-opt:hover::after, .fn-opt:focus-visible::after { opacity: 1; transform: none; color: var(--acc); }
.fn-opt:hover kbd { border-color: var(--tx); color: var(--tx); }
.fn-opt[aria-checked="true"] { background: var(--acc-soft); padding-left: 12px; }
.fn-opt[aria-checked="true"]::before { transform: scaleY(1); }
.fn-opt[aria-checked="true"] kbd { background: var(--acc); border-color: var(--acc); color: #fff; }
.fn-opts:not(.is-multi) .fn-opt[aria-checked="true"]::after { opacity: 1; transform: none; color: var(--acc); content: '✓'; }
.fn-opts.is-multi .fn-opt[aria-checked="true"]::after { background: var(--acc) !important; border-color: var(--acc); box-shadow: inset 0 0 0 3px var(--card) !important; }
.fn-opt.is-hit { animation: none; }

/* Andre */
.fn-say > div { background: transparent; border-left: 2px solid var(--acc); border-radius: 0; padding: 2px 0 2px 16px; }
.fn-say b { font: 500 12.5px 'Inter', system-ui, sans-serif; color: var(--tx-3); }
.fn-say p { font-size: 17px; line-height: 1.6; color: var(--tx); }
.fn-say img { box-shadow: 0 0 0 1px rgba(22,19,15,.2); filter: grayscale(.25) contrast(1.05); }
.fn-beleg { border-left-color: var(--tx); background: transparent; border-top: 1px solid rgba(22,19,15,.12); border-bottom: 1px solid rgba(22,19,15,.12); border-radius: 0; margin-left: 52px; }
.fn-beleg b { font-family: var(--serif); font-weight: 400; font-size: 28px; }

/* Knöpfe und Felder */
.fn-next { border-radius: 4px; background: var(--tx); padding: 14px 22px; letter-spacing: .005em; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset; }
.fn-next:hover, .fn-next:focus-visible { background: var(--acc); }
.fn-next.is-go, .fn-next.is-big { background: var(--acc); box-shadow: 0 12px 26px -14px rgba(214,70,26,.8); }
.fn-next.is-go:hover, .fn-next.is-big:hover { background: var(--tx); }
.fn-nav { border-top-color: rgba(22,19,15,.12); }
.fn-input, .fn-form input, .fn-eigen textarea, .fn-own textarea { border-radius: 4px !important; border-color: rgba(22,19,15,.2) !important; background: #fff; }
.fn-calc-out { border-radius: 4px; background: var(--tx); }
.fn-calc-out b { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 5vw, 68px); letter-spacing: -0.02em; }
.fn-who { border-radius: 4px; background: transparent; border: 1px dashed rgba(22,19,15,.3); }
.fn-who .fn-q-no { color: var(--tx-2); font-weight: 600; }
.fn-think { border-radius: 4px; }
.am-chip { border-radius: 4px; }

/* Eimer */
.bk-panel { border-radius: 8px; background: radial-gradient(420px 260px at 50% 80%, rgba(214,70,26,.16), transparent 70%), #15120F; }
.bk-title b { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: 0; }
.bk-ring-val { stroke: var(--acc); }
.bk-legend li { border-radius: 4px; }
.fly { border-radius: 4px; background: var(--tx); box-shadow: 0 16px 30px -12px rgba(22,19,15,.6); border-left: 3px solid var(--acc); }

/* Laden und Case */
.ld-title, .cs-head h1, .vl-head h2, .dn-head h2, .rf-head h2, .pk-plan h2, .cs-next h2, .eg-box h2, .am-head strong {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.cs-head h1 { font-size: clamp(56px, 8vw, 112px); line-height: .95; }
.ld-title { font-size: clamp(34px, 4.4vw, 56px); }
.vl-head h2, .dn-head h2, .rf-head h2 { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.02; }
.pk-plan h2, .cs-next h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.04; }
.eg-box h2 { font-size: clamp(30px, 3.4vw, 40px); }
.cs-kicker { border-radius: 2px; background: transparent; border-color: rgba(22,19,15,.25); }
.cs-kicker i { background: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
.vl, .dn, .rf, .pk-card, .pk-plan, .cs-next, .eg-box, .am, .ap, .kpi, .ap-table, .ap-detail, .dn-day, .dn-vorher, .dn-nachher, .rf-stats div, .rf-grenze, .pk-steps li, .eg-case, .eg-next, .eg-weg { border-radius: 6px !important; }
.dn, .rf, .pk-plan, .eg-box { background: var(--card); border-color: rgba(22,19,15,.14); }
.vl-big b, .rf-stats b, .pk-card > b, .cs-num { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
.vl-big b { color: #F2805A; }
.vl-row i { background: linear-gradient(90deg, rgba(214,70,26,.45), var(--acc)); border-radius: 2px; }
.vl-row > div { border-radius: 2px; }
.pk-card { background: transparent; border: 1px solid var(--tx); }
.pk-incl li::before, .cs-col ul.is-check li::before { background: var(--tx); }
.pk-steps li { background: transparent; border: 1px solid rgba(22,19,15,.12); }
.pk-steps li::before { border-radius: 2px; background: var(--acc); }
.dn-vorher { background: transparent; border: 1px dashed rgba(214,70,26,.45); }
.dn-nachher { background: var(--card); border: 1px solid rgba(22,19,15,.18); }
.rf { background: var(--card); }
.eg-bar { border-radius: 6px; background: rgba(22,19,15,.96); }

@media (max-width: 960px) {
  .bp-bau { width: 130vw; right: -35vw; bottom: -4vh; opacity: .45; }
  .bp-kopf, .bp-mark { display: none; }
  .fn-card { padding: 28px 22px 20px; }
  .fn-opt::before { left: -22px; }
}
@media (max-width: 640px) {
  .fn-q { font-size: 40px; }
  .fn-say p { font-size: 16px; }
  .fn-main.is-loading .ld { margin-left: 0; }
  .fn-opt { font-size: 15.5px; padding: 15px 6px 15px 2px; }
  .cs-head h1 { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) { .bp-b.is-neu polygon { stroke-dashoffset: 0; } }
@media (max-width: 640px) {
  .fn-steps { gap: 0; }
  .fn-steps li + li::before { width: 8px; margin-right: 0; }
  .fn-steps i { min-width: 16px; padding: 2px 3px; font-size: 10px; }
  .wordmark b { font-size: 22px; }
}