/* Konzept A · Kino-Story — dunkel, filmisch, durchgehend */
:root { --bg: #07090c; --ink: #f2f4f7; --mut: #9aa3ad; --acc: #2fd3ee; --acc2: #ffc857; --line: rgba(255,255,255,.12);
  --fh: 'Anton', Impact, sans-serif; --fb: 'Inter', system-ui, sans-serif; --fs: 'Instrument Serif', Georgia, serif; --gut: clamp(1.2rem, 5vw, 6rem); color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--fb); -webkit-font-smoothing: antialiased; }
html.lenis, html.lenis body { height: auto; }
body { opacity: 0; transition: opacity .6s; } body.ready { opacity: 1; }
img, video { display: block; max-width: 100%; }
section { position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.center { text-align: center; }
.eyebrow { font: 700 clamp(.75rem, .95vw, 1rem)/1 var(--fb); letter-spacing: .28em; text-transform: uppercase; color: var(--acc); margin: 0 0 1rem; }
.sec-h { font: 400 clamp(2.2rem, 5.4vw, 6.4rem)/.95 var(--fh); text-transform: uppercase; letter-spacing: .005em; margin: 0 0 1.2rem; }
.sub { color: var(--mut); font-size: clamp(1rem, 1.4vw, 1.4rem); margin: 0 0 2rem; }
.big-s { font: 700 clamp(1.2rem, 2vw, 2.2rem)/1.2 var(--fb); }
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em 0 .04em; margin: -.12em 0 -.04em; } .swi, .sc { display: inline-block; }
.acc { color: var(--acc); }
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.prog { position: fixed; z-index: 95; inset: 0 0 auto; height: 3px; } .prog__bar { height: 100%; background: linear-gradient(90deg, var(--acc), var(--acc2)); transform-origin: 0 50%; transform: scaleX(0); }
.top { position: fixed; z-index: 80; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 16px var(--gut); mix-blend-mode: normal; pointer-events: none; }
.top > * { pointer-events: auto; } .top__logo img { height: 34px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
.top__hint { font: 500 12px/1 var(--fb); color: var(--mut); letter-spacing: .05em; } kbd { border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font: inherit; }

/* 1 Hero */
.hero { height: 260vh; }
.hero__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.hero__frame { position: absolute; inset: 0; overflow: hidden; will-change: transform, border-radius; }
.hero__frame video { width: 100%; height: 100%; object-fit: cover; }
.hero__frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,12,.25), rgba(7,9,12,.1) 40%, rgba(7,9,12,.85)); }
.hero__t1, .hero__t2 { position: relative; z-index: 2; text-align: center; padding: 0 var(--gut); }
.hero__t2 { position: absolute; opacity: 0; }
.hero__h { margin: 0; font: 400 clamp(3rem, 10vw, 12rem)/.88 var(--fh); text-transform: uppercase; }
.hero__h--acc { color: var(--acc); }
.hero__k { font: 600 clamp(.8rem, 1.2vw, 1.2rem)/1 var(--fb); letter-spacing: .5em; margin: 1.2rem 0; color: var(--acc2); }
.hero__q { font: italic 400 clamp(2.4rem, 7vw, 8rem)/1 var(--fs); margin: 0; }
.hero__s { font: 700 clamp(.9rem, 1.4vw, 1.4rem)/1 var(--fb); letter-spacing: .4em; color: var(--acc); margin-top: 1.4rem; }
.cue { position: absolute; bottom: 4vh; left: 50%; width: 1px; height: 60px; background: linear-gradient(transparent, var(--ink)); z-index: 3; animation: cue 2s infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* 2 Wer bin ich · Charakterkarte (Idee aus „Level") im Kino-Look */
.prof { min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.4rem, 3vw, 3rem); align-items: center; padding: 14vh var(--gut);
  background: radial-gradient(ellipse at 15% 20%, rgba(47,211,238,.12), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(255,200,87,.08), transparent 55%); }
.prof__card { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, rgba(17,24,31,.96), rgba(9,13,17,.98)); border: 1px solid rgba(47,211,238,.28);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.85), 0 0 70px -24px rgba(47,211,238,.35); }
.prof__img { position: relative; overflow: hidden; min-height: 100%; }
.prof__img img { width: 100%; height: 100%; object-fit: cover; }
.prof__rank { position: absolute; left: 14px; bottom: 14px; font: 700 12px/1 var(--fb); letter-spacing: .12em; text-transform: uppercase;
  background: var(--acc2); color: #0a0d11; padding: 8px 13px; border-radius: 999px; }
.prof__body { padding: clamp(1.3rem, 2.6vw, 2.6rem); }
.prof__n { margin: 0 0 1.4rem; font: 400 clamp(1.9rem, 4vw, 4.2rem)/.92 var(--fh); text-transform: uppercase; padding-top: .08em; }
.prof__skills { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .6rem; }
.prof__skills li { display: flex; gap: .85rem; align-items: flex-start; font: 600 clamp(.95rem, 1.15vw, 1.15rem)/1.35 var(--fb); }
.prof__skills i { flex: none; font: 700 11px/1 var(--fb); font-style: normal; color: #0a0d11; background: var(--acc); border-radius: 6px; padding: 5px 7px; margin-top: 2px; }
.prof__c { margin: 0; display: inline-block; font: italic 400 clamp(1.15rem, 1.8vw, 1.9rem)/1.1 var(--fs); color: var(--acc2);
  padding: .55em .8em; border-radius: 12px; border: 1px dashed rgba(255,200,87,.5); }
.prof__stats { padding: clamp(1.3rem, 2.6vw, 2.6rem); border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.prof__logos { display: flex; gap: .8rem; margin-bottom: 1.6rem; flex-wrap: wrap; align-items: center; }
.prof__logos img { height: 46px; border-radius: 10px; }
.prof__hl { margin: 0 0 .4rem; font: 700 .78rem/1 var(--fb); letter-spacing: .28em; text-transform: uppercase; color: var(--acc); }
.pstat { padding: 1.1rem 0; border-top: 1px solid var(--line); }
.pstat__v { display: block; margin: 0 0 .7rem; font: 600 clamp(.95rem, 1.1vw, 1.1rem)/1.35 var(--fb); }
.pstat__v .n { font: 400 clamp(1.6rem, 2.2vw, 2.4rem)/1 var(--fh); color: var(--acc); vertical-align: -.02em; }
.pstat__meter { height: 10px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.pstat__meter i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 5px; background: linear-gradient(90deg, var(--acc), var(--acc2)); transform: scaleX(0); transform-origin: left; }

/* 4 Warum */
.why { height: 100vh; overflow: hidden; display: grid; place-items: center; }
.why__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why__h { position: relative; margin: 0; font: 400 clamp(4rem, 15vw, 20rem)/.85 var(--fh); text-transform: uppercase; text-align: center; color: #fff; mix-blend-mode: difference; }

/* 5 Vergleich: Kurstafel + absteigende Balken (Idee „Terminal") */
.trm { min-height: 100vh; padding: 12vh var(--gut) 8vh; display: flex; flex-direction: column; justify-content: center; }
.trm__head { margin-bottom: clamp(1.4rem, 4vh, 2.6rem); }
.trm__code { display: inline-block; margin-bottom: 1rem; font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .2em; color: var(--acc); border: 1px solid rgba(47,211,238,.35); border-radius: 4px; padding: 6px 10px; }
.trm__g { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr); gap: clamp(1.2rem, 3vw, 3rem); align-items: stretch; }
.trm__chart { display: flex; flex-direction: column; }
.trm__axes { display: flex; gap: 1.6rem; margin-bottom: 1rem; font: 700 .72rem/1 var(--fb); letter-spacing: .2em; text-transform: uppercase; color: var(--mut); }
.trm__axes span::before { content: '◆ '; color: var(--acc); }
.trm__axr { margin-left: auto; color: var(--acc2); }
.trm__axr::before { content: '' !important; }
.bars { flex: 1; min-height: 44vh; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.6rem, 1.6vw, 1.6rem); align-items: end; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 .4rem; }
.bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .55rem; }
.bar__val { order: -1; font: 700 clamp(1rem, 1.7vw, 1.7rem)/1 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--acc); font-variant-numeric: tabular-nums; }
.bar__val em { font-style: normal; }
.bar__col { width: 100%; max-width: 120px; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, rgba(47,211,238,.6), rgba(47,211,238,.04)); border-top: 3px solid var(--acc); transform-origin: bottom; transform: scaleY(0); }
.bar__lbl { font: 400 clamp(.85rem, 1.3vw, 1.4rem)/1 var(--fh); text-transform: uppercase; color: var(--ink); text-align: center; }
.bar--win .bar__col { background: linear-gradient(180deg, rgba(255,200,87,.75), rgba(255,200,87,.05)); border-color: var(--acc2); }
.bar--win .bar__val { color: var(--acc2); }
.bar--dn .bar__col { background: linear-gradient(180deg, rgba(154,163,173,.4), rgba(154,163,173,.03)); border-color: var(--mut); }
.bar--dn .bar__val { color: var(--mut); }
.trm__invest { background: rgba(255,255,255,.03); border: 1px solid rgba(255,200,87,.32); border-radius: 12px; padding: clamp(1.3rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; justify-content: center; gap: .9rem; }
.trm__tag { align-self: flex-start; margin-bottom: .4rem; font: 400 clamp(1.4rem, 2.4vw, 2.4rem)/1 var(--fh); text-transform: uppercase; color: var(--acc2); }
.iv { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font: 700 clamp(1.15rem, 1.9vw, 1.8rem)/1 var(--fb); }
.iv small { font: 600 .72rem/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.iv--acc { color: var(--acc); }
.iv__sep { height: 1px; background: var(--line); margin: .5rem 0; }
.iv__lead { margin: 0; font: 600 .82rem/1 var(--fb); letter-spacing: .18em; text-transform: uppercase; color: var(--mut); }
.iv__big { margin: 0; font: 400 clamp(2.8rem, 6.5vw, 5.2rem)/.9 var(--fh); color: var(--acc2); }

/* 6 Private Rente: Splitscreen (Idee „Doku") */
.psplit { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--bg); min-height: 100vh; }
.psplit__s { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: flex-end; }
.psplit__s video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: grayscale(.3); }
.psplit__s::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,12,.1), rgba(7,9,12,.9)); }
.psplit__t { position: relative; z-index: 1; padding: 0 clamp(1.2rem, 3vw, 3rem) 12vh; }
.psplit__t h3 { margin: 0 0 .7rem; font: 400 clamp(1.9rem, 3.6vw, 3.8rem)/1 var(--fh); text-transform: uppercase; }
.psplit__t p { margin: 0 0 1.4rem; font: 500 clamp(.85rem, 1.05vw, 1.1rem)/1.5 var(--fb); color: var(--mut); }
.psplit__t small { display: block; margin-bottom: .3rem; font: 700 .72rem/1 var(--fb); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.psplit__t b { font: 400 clamp(2.8rem, 5.5vw, 6rem)/1 var(--fh); color: var(--ink); }
.psplit__s--b .psplit__t small { color: var(--acc2); }
.psplit__s--b .psplit__t b { color: var(--acc2); }

/* 7 Eigenheim oder Kapitalanlage: Keynote-Beats, je ein Halt (Idee „Keynote") */
.keyn { position: relative; min-height: 100vh; overflow: hidden; display: grid; place-items: center; text-align: center; padding: 10vh var(--gut); background: #000; }
.keyn__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.4) grayscale(.2); }
.keyb { position: relative; z-index: 1; width: min(1100px, 92%); }
.keyn__h { margin: 0 0 1.4rem; font: 400 clamp(2.2rem, 5.5vw, 6rem)/1 var(--fh); text-transform: uppercase; }
.keyn__q { margin: 0; font: italic 400 clamp(1.1rem, 2vw, 2rem)/1.3 var(--fs); color: var(--acc); }
.keyn__mega { margin: 0 0 1rem; font: 400 clamp(3rem, 10vw, 11rem)/.92 var(--fh); text-transform: uppercase; color: var(--acc2); }
.keyn__s { margin: 0; font: 600 clamp(1.1rem, 2vw, 2rem)/1.2 var(--fb); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.keyn__line { margin: .3em 0; font: 400 clamp(1.6rem, 4vw, 4.4rem)/1.05 var(--fh); text-transform: uppercase; }

/* 8 Fächer */
.fan { min-height: 100vh; padding: 14vh var(--gut); display: grid; grid-template-columns: 1.1fr 1fr; gap: 4vw; align-items: center; }
.fan__media { aspect-ratio: 16/9; overflow: hidden; border-radius: 4px; } .fan__media video { width: 100%; height: 100%; object-fit: cover; }
.fan__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fcard { padding: 1.6rem; border: 1px solid var(--line); border-radius: 6px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.01)); }
.fcard small { display: block; font: 700 .8rem/1 var(--fb); letter-spacing: .25em; color: var(--mut); margin-bottom: .7rem; }
.fcard b { font: 400 clamp(1.4rem, 2.4vw, 2.6rem)/1 var(--fh); text-transform: uppercase; color: var(--acc); }

/* Museum-Bausteine (gemeinsam) */
.mus-sign { display: inline-flex; flex-direction: column; gap: .35rem; margin: 0 0 2rem; padding-left: 14px; border-left: 2px solid var(--acc); }
.mus-sign span { font: 700 .72rem/1 var(--fb); letter-spacing: .3em; text-transform: uppercase; color: var(--acc); }
.mus-sign b { font: 400 clamp(1.8rem, 3.6vw, 3.6rem)/1.05 var(--fh); text-transform: uppercase; }
.mus-sign--center { align-items: center; text-align: center; padding-left: 0; border-left: 0; }
.mus-spot { position: absolute; left: 50%; top: 0; width: min(90vw, 1100px); height: 100%; transform: translateX(-50%); pointer-events: none; z-index: 0; background: radial-gradient(ellipse 60% 70% at 50% 35%, rgba(47,211,238,.16), transparent 70%); }
.mus-spot--wide { width: 140vw; }

/* 9 Eigenheim: Museum-Exponat */
.exhibit { position: relative; min-height: 100vh; padding: 14vh var(--gut) 10vh; text-align: center; overflow: hidden; }
.exhibit > *:not(.mus-spot) { position: relative; z-index: 1; }
.exhibit .mus-sign { text-align: left; }
.exhibit__sub { margin: -1rem 0 5vh; font: italic 400 clamp(1.1rem, 1.6vw, 1.5rem)/1.3 var(--fs); color: var(--acc2); }
.exhibit__g { display: grid; grid-template-columns: 1fr minmax(0, .8fr) 1fr; gap: clamp(1rem, 3vw, 3rem); align-items: center; }
.exhibit__g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.exhibit__g li { position: relative; font: 400 clamp(1.05rem, 1.6vw, 1.6rem)/1.15 var(--fh); text-transform: uppercase; padding: .7rem 1rem; border: 1px solid var(--line); }
.exhibit__pro li { text-align: right; border-right: 3px solid #34d399; }
.exhibit__con li { text-align: left; border-left: 3px solid #f87171; }
.exhibit__pro li::after, .exhibit__con li::before { content: ''; position: absolute; top: 50%; width: clamp(1rem, 3vw, 3rem); height: 1px; background: rgba(47,211,238,.5); }
.exhibit__pro li::after { left: 100%; } .exhibit__con li::before { right: 100%; }
.exhibit__ped img { width: 82%; margin: 0 auto; display: block; filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.exhibit__base { height: 10vh; margin-top: -2px; background: linear-gradient(90deg, #11161c, #1b2530 50%, #11161c); }

/* 10 Rechnung */
.ledger { min-height: 100vh; }
.ledger__pin { padding: 9vh var(--gut) 6vh; display: flex; flex-direction: column; }
.ledger__h { font: italic 400 clamp(1.6rem, 3.2vw, 3.6rem)/1 var(--fs); margin: 0 0 1rem; text-align: center; }
.ledger__base { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1.5rem; font: 700 clamp(.85rem, 1.1vw, 1.15rem)/1 var(--fb); color: var(--acc); margin-bottom: 2vh; }
.ledger__cols { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 6vw, 6rem); min-height: 0; }
.lcol h3 { display: flex; align-items: center; gap: .8rem; font: 400 clamp(1.4rem, 2.4vw, 2.6rem)/1 var(--fh); text-transform: uppercase; margin: 0 0 .6rem; }
.lcol h3 img { width: 48px; height: 48px; object-fit: contain; }
.lcol p { margin: 0; padding: .22rem 0; font: 500 clamp(.78rem, 1.05vw, 1.12rem)/1.3 var(--fb); border-bottom: 1px dashed var(--line); }
.lcol .lg { margin-top: .7rem; border: 0; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.lg.in { color: #34d399; } .lg.out { color: #f87171; } .lg.val { color: var(--acc2); }
.lcol .sum { font-weight: 800; }
/* Ergebnis als Text unter der jeweiligen Liste: links rot (Eigenheim), rechts grün (Kapital-Immo) */
.lresult { margin-top: 1.4rem !important; padding-top: 1rem !important; border: 0 !important; border-top: 2px solid var(--line) !important; display: flex; flex-direction: column; gap: .3rem; }
.lresult__k { font: 700 .72rem/1 var(--fb); letter-spacing: .24em; text-transform: uppercase; color: var(--mut); }
.lresult b { font: 400 clamp(2rem, 4.2vw, 4.4rem)/1 var(--fh); }
.lresult--neg b { color: #f87171; } .lresult--pos b { color: #34d399; }

/* 11 Unsere Empfehlung: Daten-Story (Idee „Daten") */
.dstory { min-height: 100vh; padding: 14vh var(--gut); }
.dstory__head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 5vh; }
.dkick { flex: none; display: inline-grid; place-items: center; min-width: 3rem; height: 3rem; border: 1.5px solid var(--acc); border-radius: 999px; font: 700 1rem/1 var(--fb); color: var(--acc); font-variant-numeric: tabular-nums; }
.dstory__g { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.dstep { padding: clamp(1.4rem, 2.6vw, 2.4rem); border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-left: 3px solid var(--acc); }
.dstep p { margin: 0; font: 600 clamp(1.05rem, 1.6vw, 1.7rem)/1.35 var(--fb); }
.dstep__n { display: block; margin-bottom: .8rem; font: 700 .8rem/1 var(--fb); letter-spacing: .18em; color: var(--acc); font-variant-numeric: tabular-nums; }
.dstep__k { font: 700 .82rem/1 var(--fb) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--acc2) !important; margin-bottom: .6rem !important; }
.dstep--hl { border-left-color: #34d399; background: rgba(52,211,153,.08); grid-column: 1 / -1; }
.dstep--hl p { font: 400 clamp(1.6rem, 3vw, 3rem)/1.1 var(--fh); text-transform: uppercase; color: #6ee7b7; }

/* 12 Warum investieren: Galeriewand mit Taschenlampe */
.salon { position: relative; min-height: 100vh; padding: 14vh var(--gut) 12vh; --mx: 50%; --my: 45%; background: radial-gradient(ellipse at 50% 0%, rgba(47,211,238,.1), transparent 60%); overflow: hidden; }
.salon__hint { margin: -1rem 0 4vh; font: italic 400 1rem/1.3 var(--fs); color: var(--mut); }
.salon__wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(90px, 11vw, 170px); gap: clamp(.9rem, 1.8vw, 1.8rem); }
.sf { margin: 0; position: relative; display: flex; flex-direction: column; padding: 7px; border-radius: 4px; background: linear-gradient(135deg, rgba(47,211,238,.35), rgba(255,200,87,.25) 50%, rgba(47,211,238,.2)); box-shadow: 0 20px 30px -16px rgba(0,0,0,.7); }
.sf__in { flex: 1; background: #0c1116; display: grid; place-items: center; overflow: hidden; min-height: 0; border-radius: 2px; }
.sf__in img { width: 46%; max-height: 66%; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 0 10px var(--acc)); }
.sf figcaption { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: .45rem .8rem; border-radius: 3px; font: 400 clamp(.8rem, 1.05vw, 1.1rem)/1.15 var(--fh); text-transform: uppercase; text-align: center; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); }
.sf--a { grid-column: 1 / 3; grid-row: span 2; } .sf--b { grid-column: 3 / 4; } .sf--c { grid-column: 4 / 5; grid-row: span 2; } .sf--d { grid-column: 5 / 7; }
.sf--e { grid-column: 3 / 4; } .sf--f { grid-column: 5 / 6; } .sf--g { grid-column: 6 / 7; } .sf--h { grid-column: 1 / 2; } .sf--i { grid-column: 2 / 4; } .sf--j { grid-column: 4 / 7; }
.salon__dark { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle 26vmax at var(--mx) var(--my), transparent 0, rgba(5,7,10,.2) 40%, rgba(5,7,10,.8) 100%); opacity: 0; transition: opacity .6s; }
.salon.is-torch .salon__dark { opacity: 1; }

/* 13 Mythen: Comic-Seite mit Sprechblasen (Idee „Storyboard") */
.comic { position: relative; height: 100vh; overflow: hidden; }
.comic__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.42) grayscale(.15); }
.comic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,12,.5), rgba(7,9,12,.3) 40%, rgba(7,9,12,.6)); }
.comic__intro { position: absolute; z-index: 2; left: var(--gut); top: 9vh; max-width: 60%; }
.comic__chap { display: inline-block; margin-bottom: 1rem; padding: .3em .7em; background: var(--acc2); color: #0a0d11; font: 800 1rem/1 var(--fb); border-radius: 4px; }
.comic__h { margin: 0 0 1rem; font: 400 clamp(1.8rem, 4vw, 4.4rem)/1 var(--fh); text-transform: uppercase; text-shadow: 0 4px 24px rgba(0,0,0,.85); }
.comic__cap { margin: 0; font: 600 clamp(.95rem, 1.4vw, 1.4rem)/1.3 var(--fb); color: var(--acc2); text-shadow: 0 2px 14px rgba(0,0,0,.95); }
.bubs { position: absolute; inset: 0; z-index: 2; }
.bub { position: absolute; max-width: min(23vw, 250px); padding: .8rem 1.1rem; background: #f2f4f7; color: #0a0d11; border-radius: 16px; font: 700 clamp(.85rem, 1.05vw, 1.12rem)/1.25 var(--fb); box-shadow: 0 16px 36px -10px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.2); }
.bub p { margin: 0; }
.bub::after { content: ''; position: absolute; bottom: -10px; left: 22px; border: 10px solid transparent; border-top-color: #f2f4f7; border-bottom: 0; }
.bub--r { background: var(--acc); }
.bub--r::after { border-top-color: var(--acc); }
/* über das Video verteilt (um die Intro-Ecke oben links herum) */
.b1 { top: 52%; left: 4%; } .b2 { top: 61%; left: 29%; } .b3 { top: 73%; left: 13%; } .b4 { top: 84%; left: 36%; }
.b5 { top: 67%; left: 49%; } .b6 { top: 23%; left: 71%; } .b7 { top: 39%; left: 78%; } .b8 { top: 55%; left: 63%; }
.b9 { top: 72%; left: 77%; } .b10 { top: 86%; left: 58%; }

/* 14 Herausforderungen: Quest-Log (Idee „Level") */
.qlog { min-height: 90vh; padding: 16vh var(--gut); }
.qlog__l { list-style: none; margin: 4vh 0 0; padding: 0; display: grid; gap: .8rem; max-width: 1100px; }
.qlog__l li { display: flex; align-items: center; gap: 1.2rem; padding: 1.1rem 1.3rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: border-color .4s, background .4s; }
.qlog__l i { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--mut); position: relative; transition: .4s; }
.qlog__l li.is-on i { background: var(--acc); border-color: var(--acc); }
.qlog__l li.is-on i::after { content: ''; position: absolute; left: 9px; top: 3px; width: 7px; height: 14px; border: solid var(--bg); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.qlog__l li.is-on { border-color: rgba(47,211,238,.4); background: rgba(47,211,238,.07); }
.qlog__l span { flex: 1; font: 400 clamp(1.1rem, 2vw, 2rem)/1.15 var(--fh); text-transform: uppercase; padding-top: .06em; }
.qlog__last span[data-t] { flex: 0 1 auto; } .qlog__wink { flex: none; margin-left: .5rem; font-size: 1.25em; }

/* 15 Leverage-Frage: Inschrift mit Spotlight auf die Frage */
.inscr { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; text-align: center; padding: 14vh var(--gut); overflow: hidden; background: #05080a; }
.inscr > * { position: relative; z-index: 1; }
.inscr__spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 46% 40% at 50% 54%, rgba(47,211,238,.28), rgba(47,211,238,.07) 42%, transparent 72%); }
.inscr::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 58% 50% at 50% 54%, transparent 32%, rgba(3,5,7,.93) 100%); }
.inscr__q { margin: 0; max-width: 20ch; font: 400 clamp(2rem, 5.2vw, 6rem)/1.08 var(--fh); text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 0 36px rgba(47,211,238,.42); }
/* 15b Was ist Leverage: Doku-Szenen, je ein Halt (Idee „Doku") */
.docu { position: relative; box-sizing: border-box; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1rem, 3vh, 2rem); text-align: center; padding: 9vh var(--gut); background: #000; }
.docu__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; filter: grayscale(.3); }
.docu::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 85% 60% at 50% 52%, rgba(7,9,12,.62), rgba(7,9,12,.42)), linear-gradient(180deg, rgba(7,9,12,.5), rgba(7,9,12,.8)); }
.docu > * { position: relative; z-index: 1; }
.docu__h { position: absolute; z-index: 2; left: var(--gut); top: 8vh; margin: 0; font: 700 clamp(.75rem, .9vw, .95rem)/1 var(--fb); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); }
.docu--pig { background: #0c1116; } .docu__pig { max-height: 44vh; max-width: 90%; width: auto; object-fit: contain; }
.scn__s { max-width: min(90%, 1000px); margin: 0; font: 400 clamp(1.4rem, 2.6vw, 2.8rem)/1.35 var(--fs); color: var(--ink); text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.docu--pig .scn__s { color: var(--acc2); text-shadow: none; }

/* Profi-Block (nur Wissens-Stufe 6–10): ein Thema pro Folie, ausführlich erklärt */
html:not(.profi-on) [data-show="profi"] { display: none !important; }
.pro { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; height: 100vh; overflow: hidden; background: #0a0d11; }
.pro__txt { display: flex; flex-direction: column; justify-content: center; padding: 7vh clamp(1.4rem,3.4vw,4rem); min-width: 0; }
.pro__fig { position: relative; margin: 0; overflow: hidden; }
.pro__fig img { width: 100%; height: 100%; object-fit: cover; }
.pro__fig::after { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, transparent 55%, #0a0d11); }
.pro__k { font: 700 clamp(.66rem,.82vw,.86rem)/1 var(--fb); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); margin: 0 0 .8rem; }
.pro__h { font: 400 clamp(1.5rem,3vw,2.9rem)/1.02 var(--fh); text-transform: uppercase; margin: 0 0 1rem; }
.pro__x { font: 400 clamp(.92rem,1.2vw,1.2rem)/1.5 var(--fb); color: #d7dee5; margin: 0 0 1rem; }
.pro__x b { color: #fff; font-weight: 700; }
.pro__ex { border-left: 4px solid var(--acc2); background: rgba(255,200,87,.11); border-radius: 0 14px 14px 0; padding: 1rem 1.25rem; font: 500 clamp(1.02rem,1.4vw,1.4rem)/1.5 var(--fb); color: #f4f7fa; margin: .2rem 0 1rem; }
.pro__ex .lab { display: block; font: 700 .66rem/1 var(--fb); letter-spacing: .16em; text-transform: uppercase; color: var(--acc2); margin-bottom: .55rem; }
.pro__ex b { color: var(--acc2); font-weight: 800; font-size: 1.2em; white-space: nowrap; }
.pro__tip { font: 400 clamp(.82rem,1.02vw,1rem)/1.42 var(--fb); color: var(--mut); margin: 0; padding-left: 1.5rem; position: relative; }
.pro__tip::before { content: '💡'; position: absolute; left: 0; top: 0; font-size: .95em; }
.pro__tip.is-falle::before { content: '⚠️'; }
.pro__tip b { color: #fff; font-weight: 700; }
.pro__disc { margin: .7rem 0 0; font: italic 400 clamp(.6rem,.72vw,.72rem)/1.3 var(--fb); color: rgba(255,255,255,.32); }

/* Vergleichstabelle (z. B. Lineare vs. degressive AfA) – volle Breite */
.pro--tab { display: block; position: relative; height: 100vh; overflow: hidden; background: #0a0d11; grid-template-columns: none; }
.pro__bg2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.pro--tab::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,12,.78), rgba(7,9,12,.93)); }
.pro__tabin { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 6vh var(--gut); }
.pro__lead2 { font: 400 clamp(.95rem,1.3vw,1.25rem)/1.5 var(--fb); color: #d7dee5; margin: .2rem 0 1.1rem; }
.pro__lead2 b { color: #fff; font-weight: 700; }
.afatab { width: 100%; border-collapse: collapse; font: 500 clamp(.95rem,1.45vw,1.45rem)/1 var(--fb); margin: 0 0 1.1rem; }
.afatab th, .afatab td { padding: clamp(.45rem,1.05vh,.8rem) 1rem; text-align: right; border-bottom: 1px solid var(--line); }
.afatab th:first-child, .afatab td:first-child { text-align: left; }
.afatab thead th { font: 700 clamp(.58rem,.8vw,.78rem)/1.2 var(--fb); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); border-bottom: 2px solid var(--line); }
.afatab tbody td:first-child { color: var(--mut); font-weight: 700; }
.afatab td.hi { color: var(--acc2); font-weight: 800; }
.afatab td.plus { color: #34d399; font-weight: 700; }
.afatab tfoot td { border-top: 2px solid var(--acc2); border-bottom: none; font-weight: 800; color: #fff; padding-top: .85rem; }
.afatab tfoot td.hi { color: var(--acc2); }
.afatab tfoot td.plus { color: #34d399; }
.pro__ex--rec { font: 400 clamp(.92rem,1.2vw,1.18rem)/1.5 var(--fb); }
.pro__ex--rec b { font-size: 1em; color: var(--acc2); font-weight: 800; white-space: normal; }

/* ====== Großer Schritt-für-Schritt-Rechenweg (pro--calc) ====== */
.pro--calc { display: block; position: relative; height: 100vh; overflow: hidden; background: #0a0d11; grid-template-columns: none; }
.pro--calc .pro__bg2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; }
.pro--calc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,12,.80), rgba(7,9,12,.94)); }
.pro__calcin { position: relative; z-index: 2; height: 100%; max-width: 1140px; margin: 0 auto; padding: 4vh var(--gut); display: flex; flex-direction: column; justify-content: center; }
.calc__formel { display: inline-block; align-self: flex-start; font: 500 clamp(.9rem,1.2vw,1.18rem)/1.4 var(--fb); color: #e7edf2; background: rgba(47,211,238,.08); border: 1px solid rgba(47,211,238,.28); border-radius: 12px; padding: .6rem 1rem; margin: .5rem 0 1.3rem; }
.calc__formel b { color: var(--acc); font-weight: 700; }
.calc__sub { display: block; margin-top: .45rem; font: 500 clamp(.76rem,.92vw,.94rem)/1.4 var(--fb); color: var(--mut); }
.calc__sub b { color: #cfd7de; font-weight: 700; }
/* Vergleichs-/Szenario-Karten */
.scen { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(.7rem,1.4vw,1.3rem); margin: 0 0 1.2rem; }
.scen--2 { grid-template-columns: repeat(2,1fr); max-width: 760px; }
.scen__c { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1rem,1.7vw,1.5rem); display: flex; flex-direction: column; }
.scen__c--hi { border-color: var(--acc2); background: rgba(255,200,87,.08); }
.scen__t { font: 700 clamp(.98rem,1.3vw,1.28rem)/1.2 var(--fb); color: #fff; margin: 0 0 .15rem; }
.scen__sub { font: 500 clamp(.7rem,.88vw,.85rem)/1.35 var(--fb); color: var(--mut); margin: 0 0 1rem; min-height: 2.4em; }
.scen__row { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .45rem 0; font: 500 clamp(.92rem,1.2vw,1.2rem)/1.2 var(--fb); color: #cfd7de; }
.scen__row b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scen__hr { height: 1px; background: var(--line); margin: .55rem 0 0; }
.scen__res { margin-top: auto; padding-top: .7rem; }
.scen__reslab { display: block; font: 700 .62rem/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin-bottom: .3rem; }
.scen__resval { font: 400 clamp(2.1rem,3.6vw,3.1rem)/1 var(--fh); color: var(--acc2); }
.scen__resval--cy { color: var(--acc); }
.scen__resval--gr { color: #34d399; }
.pro--calc .pro__x--note { font: 400 clamp(.8rem,1.02vw,1.04rem)/1.55 var(--fb); color: #b9c2cc; margin: .2rem 0 .7rem; max-width: 72ch; }
.pro--calc .pro__x--note b { color: #fff; font-weight: 700; }
@media (max-width: 860px) {
  .pro--calc { height: auto; min-height: 100vh; }
  .pro__calcin { padding: 5vh var(--gut) 7vh; }
  .scen, .scen--2 { grid-template-columns: 1fr; gap: .7rem; max-width: none; }
  .scen__sub { min-height: 0; }
  .scen__resval { font-size: 2.3rem; }
}
/* Vor- & Nachteile (zwei Spalten) */
.vn { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.8rem,1.6vw,1.4rem); margin: .4rem 0 1rem; width: 100%; }
.vn__c { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1rem,1.7vw,1.5rem); }
.vn__t { font: 400 clamp(1.1rem,1.7vw,1.6rem)/1.05 var(--fh); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .9rem; color: #fff; }
.vn__t small { display: block; font: 700 .58rem/1.3 var(--fb); letter-spacing: .14em; color: var(--acc); margin-bottom: .25rem; }
.vn__l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.vn__l li { position: relative; padding-left: 1.7rem; font: 500 clamp(.86rem,1.1vw,1.1rem)/1.4 var(--fb); color: #d7dee5; }
.vn__l li::before { position: absolute; left: 0; top: -.05em; font-weight: 800; font-size: 1.15em; }
.vn__l li.p::before { content: '+'; color: #34d399; }
.vn__l li.m::before { content: '–'; color: #f87171; }
@media (max-width: 860px) { .vn { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .pro--tab { height: auto; min-height: 100vh; }
  .pro__tabin { padding: 5vh var(--gut) 6vh; }
  .afatab { font-size: .82rem; }
  .afatab th, .afatab td { padding: .45rem .35rem; }
  .afatab thead th { font-size: .54rem; letter-spacing: .04em; }
  .pro__ex--rec { font-size: .86rem; }
}

@media (max-width: 860px) {
  .pro__disc { font-size: .6rem; margin-top: .5rem; }
  .pro { grid-template-columns: 1fr; grid-template-rows: 22vh auto; height: auto; min-height: 100vh; }
  .pro__fig { grid-row: 1; }
  .pro__txt { grid-row: 2; padding: 3vh var(--gut) 6vh; justify-content: flex-start; }
  .pro__fig::after { background: linear-gradient(180deg, transparent 35%, #0a0d11); }
  .pro__h { font-size: 1.22rem; margin-bottom: .55rem; }
  .pro__x { font-size: .86rem; line-height: 1.4; margin-bottom: .55rem; }
  .pro__ex { font-size: 1rem; padding: .75rem .9rem; margin-bottom: .55rem; }
  .pro__tip { font-size: .8rem; }
  .pro__fig { }
}

/* Sparschwein-Aufschlüsselung: Einsatz + Wertsteigerung + Steuervorteile */
.spv3__grid { display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 1.4vw, 1.5rem); width: min(96%, 1120px); }
.spv3__col { position: relative; flex: 1 1 0; min-width: 0; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 54px -26px rgba(0,0,0,.85); }
.spv3__col img { display: block; width: 100%; height: clamp(180px, 30vh, 320px); object-fit: cover; }
.spv3__col::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,12,.08), rgba(7,9,12,.9)); }
.spv3__col figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(.6rem,1.4vh,1rem); text-align: center; }
.spv3__lab { display: block; font: 700 clamp(.6rem,.85vw,.78rem)/1.2 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: #cfd6dd; }
.spv3__val { display: block; font: 400 clamp(1.5rem,2.6vw,2.4rem)/1 var(--fh); margin-top: .25rem; color: var(--ink); }
.spv3__val--cy { color: var(--acc); } .spv3__val--go { color: var(--acc2); } .spv3__val--gr { color: #34d399; }
.spv3__plus { flex: 0 0 auto; align-self: center; font: 400 clamp(1.4rem,2.4vw,2.2rem)/1 var(--fh); color: #34d399; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.spv3__sum { font: 400 clamp(1.9rem,3.6vw,3.2rem)/1 var(--fh); color: #34d399; }
.spv3__sumlab { font: 700 clamp(.65rem,.9vw,.82rem)/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin-left: .3rem; }
.spv3 .scn__s { font-size: clamp(1.2rem, 2.2vw, 2.2rem); }
@media (max-width: 600px) {
  .spv3__grid { flex-direction: column; width: 82%; gap: .35rem; }
  .spv3__col { flex: 0 0 auto; width: 100%; }
  .spv3__col img { height: 13vh; }
  .spv3__val { font-size: 1.5rem; }
  .spv3__plus { transform: none; }
}

/* 16 Rakete */
.rocket { height: 100vh; overflow: hidden; display: grid; place-items: center; }
.rocket__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rocket__h { position: relative; font: 400 clamp(2.6rem, 7vw, 8.4rem)/.9 var(--fh); text-transform: uppercase; text-align: center; max-width: 14ch; margin: 0; text-shadow: 0 10px 40px rgba(0,0,0,.6); }
/* 16b 10 Jahre Steuer: Legendär-Abzeichen (Idee „Level") */
.lvtax { min-height: 100vh; padding: 14vh var(--gut); display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(1.4rem, 4vw, 5rem); align-items: center; }
.legend { position: relative; aspect-ratio: .87; display: grid; place-content: center; text-align: center; gap: .5rem; padding: 2rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, var(--acc2), #ff8a3c 60%, var(--acc)); color: #0a0d11; max-width: 420px; width: 100%; justify-self: center; }
.legend__r { font: 700 .8rem/1 var(--fb); text-transform: uppercase; letter-spacing: .2em; }
.legend span:nth-child(2) { font: 700 clamp(1rem, 1.5vw, 1.5rem)/1.2 var(--fb); }
.legend b { font: 400 clamp(3rem, 6vw, 6.4rem)/1 var(--fh); padding-top: .06em; }
.lvtax__l { list-style: none; margin: 1rem 0 2rem; padding: 0; display: grid; gap: .6rem; }
.lvtax__l li { padding: 1rem 1.2rem; border-radius: 12px; background: rgba(255,255,255,.04); border-left: 4px solid var(--acc2); font: 600 clamp(.95rem, 1.3vw, 1.35rem)/1.35 var(--fb); }
.lvtax__k { margin: 0 0 1.2rem; font: 700 .82rem/1.3 var(--fb); text-transform: uppercase; letter-spacing: .14em; color: var(--acc); }
.lvtax__chips { display: flex; flex-wrap: wrap; gap: .7rem; }
.lvtax__chips span { padding: .8em 1.1em; border-radius: 12px; background: rgba(47,211,238,.12); border: 1px solid rgba(47,211,238,.45); font: 700 clamp(.8rem, 1.1vw, 1.1rem)/1.2 var(--fb); }

/* 17 Summary */
.sum { padding: 16vh 0; overflow: hidden; } .sum .sec-h { padding: 0 var(--gut); }
.marq { overflow: hidden; margin-top: 4vh; } .marq__in { display: flex; gap: 4vw; width: max-content; animation: mq 26s linear infinite; }
.marq__in span { font: 400 clamp(2.6rem, 7vw, 8rem)/1 var(--fh); text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 1.5px var(--acc); color: transparent; }
.marq__in span:nth-child(even) { color: var(--acc); -webkit-text-stroke: 0; }
@keyframes mq { to { transform: translateX(-50%); } }

/* 18 Pause / Prozess */
.pause { height: 80vh; overflow: hidden; } .pause video { width: 100%; height: 100%; object-fit: cover; }
.pause--full { height: 100vh; } .pause--full video { object-fit: contain; background: #000; }
.proc { height: 100vh; overflow: hidden; display: grid; place-items: center; } .proc video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); }
.proc__t { position: relative; text-align: center; } .proc__t h2 { font: 400 clamp(3rem, 9vw, 11rem)/.9 var(--fh); text-transform: uppercase; margin: 0; } .proc__t p { font: italic 400 clamp(1.6rem, 3vw, 3.4rem)/1 var(--fs); color: var(--acc2); }

/* 19 Schritte: sticky Rail */
.steps { display: grid; grid-template-columns: minmax(240px, 28vw) 1fr; gap: 4vw; padding: 0 var(--gut); }
.steps__rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.steps__rail ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.6rem; }
.steps__rail li { display: flex; gap: 1rem; align-items: center; font: 700 clamp(.9rem, 1.2vw, 1.3rem)/1.2 var(--fb); color: var(--mut); transition: color .4s; }
.steps__rail li b { width: 3rem; height: 3rem; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font: 400 1.4rem/1 var(--fh); transition: .4s; }
.steps__rail li.is-on { color: var(--ink); } .steps__rail li.is-on b { background: var(--acc); color: var(--bg); border-color: var(--acc); box-shadow: 0 0 30px -4px var(--acc); }
.st { min-height: 100vh; padding: 14vh 0; display: flex; flex-direction: column; justify-content: center; }
.st__h { font: 400 clamp(1.8rem, 3.6vw, 4.2rem)/.95 var(--fh); text-transform: uppercase; margin: 0 0 2rem; }
.st__split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.4rem; align-items: center; }
.st__split p { margin: .4rem 0; font-size: clamp(1rem, 1.35vw, 1.4rem); }
.st__split video { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; }
.stamp { display: inline-block; margin-top: 3rem; padding: 1rem 1.6rem; border: 3px solid var(--acc); border-radius: 6px; transform: rotate(-2deg); font: 400 clamp(1.2rem, 2.2vw, 2.4rem)/1 var(--fh); text-transform: uppercase; color: var(--acc); align-self: flex-start; }
.stamp--red { border-color: #f87171; color: #f87171; }
/* Doku-Bausteine (Wie verdienen / Schritt 1) */
.sg__k { font: italic 400 clamp(1.15rem, 1.7vw, 1.8rem)/1.35 var(--fs); color: var(--acc); margin: 0 0 1.4rem; }
.sg__two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.frame { position: relative; overflow: hidden; border-radius: 6px; }
.frame video { width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: grayscale(.25); }
.lt { display: inline-flex; flex-direction: column; align-items: flex-start; }
.lt b { display: inline-block; font: 700 clamp(1.1rem, 1.8vw, 1.9rem)/1.1 var(--fb); text-transform: uppercase; background: rgba(7,9,12,.88); color: var(--acc); border-left: 3px solid var(--acc); padding: .38em .7em .32em; }
.lt span { display: inline-block; font: 500 clamp(.85rem, 1.15vw, 1.15rem)/1.3 var(--fb); background: var(--acc); color: #0a0d11; padding: .38em .7em; max-width: 52ch; }
.lt--in { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; } .lt--in b { font-size: clamp(.95rem, 1.3vw, 1.35rem); } .lt--in span { font-size: clamp(.8rem, 1vw, 1rem); }
.sg__quote { margin: 1.6rem 0 0; font: italic 400 clamp(1.3rem, 2.2vw, 2.3rem)/1.25 var(--fs); color: var(--acc); }
.locks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.lock { position: relative; display: grid; gap: .3rem; justify-items: center; text-align: center; padding: 2.4rem 1.2rem 1.8rem; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: border-color .4s; }
.lock__i { width: 46px; height: 40px; border-radius: 10px; background: var(--mut); position: relative; margin-bottom: 1rem; transition: background .4s; }
.lock__i::before { content: ''; position: absolute; left: 9px; top: -20px; width: 28px; height: 28px; border: 5px solid var(--mut); border-bottom: 0; border-radius: 16px 16px 0 0; transition: transform .5s, border-color .4s; transform-origin: 100% 100%; }
.lock.is-open { border-color: rgba(47,211,238,.45); }
.lock.is-open .lock__i { background: var(--acc); } .lock.is-open .lock__i::before { border-color: var(--acc); transform: translateX(14px) rotate(25deg); }
.lock small { font: 700 .82rem/1.2 var(--fb); text-transform: uppercase; letter-spacing: .1em; color: var(--mut); }
.lock b { font: 400 clamp(1.8rem, 3.4vw, 3.6rem)/1.05 var(--fh); padding-top: .06em; color: var(--ink); }
.docs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } .docs--one { grid-template-columns: minmax(0, 520px); }
.docs img { width: 100%; background: #fff; border-radius: 6px; padding: .6rem; box-shadow: 0 30px 60px -30px #000; transform: rotate(-1.5deg); } .docs img:nth-child(2) { transform: rotate(1.5deg); }
.dbanks { display: flex; gap: 1.6rem; align-items: center; } .dbanks .dscan { flex: 1; } .dbanks .dscan img { width: 100%; max-height: 42vh; object-fit: contain; object-position: left top; background: #f4f1e8; padding: .5rem; border-radius: 4px; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.dbanks__n b { display: block; font: 400 clamp(3rem, 6vw, 6.4rem)/1 var(--fh); color: var(--acc2); } .dbanks__n span { font: 500 1rem/1.3 var(--fb); letter-spacing: .1em; }
.st__q { font: italic 400 clamp(1.6rem, 3vw, 3.4rem)/1.1 var(--fs); color: var(--acc2); margin: 0 0 2rem; }
.chips { display: flex; flex-wrap: wrap; gap: .8rem; } .chips span { padding: 1rem 1.4rem; border-radius: 999px; background: rgba(47,211,238,.1); border: 1px solid var(--acc); font: 700 clamp(.9rem, 1.3vw, 1.35rem)/1 var(--fb); }
.st__why { font: 400 2rem/1 var(--fh); color: var(--acc2); margin: 1rem 0 !important; }
.perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 1.5rem 0 1.6rem; }
.pk { flex: 1 1 300px; max-width: 360px; min-height: 6.4rem; display: flex; gap: 1rem; align-items: center; padding: 1.2rem 1.4rem; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font: 600 clamp(.95rem, 1.25vw, 1.3rem)/1.3 var(--fb); }
.pk i { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 10px; display: grid; place-items: center; background: rgba(255,200,87,.15); color: var(--acc2); font-style: normal; }
.pk--w { border-color: rgba(47,211,238,.4); }
.perks__n { font: 500 clamp(1rem, 1.3vw, 1.35rem)/1.45 var(--fb); color: var(--mut); max-width: 1100px; }
.perks__win { display: inline-block; margin: 1rem 0 0; padding: .6em 1em; border-radius: 12px; background: linear-gradient(100deg, var(--acc2), var(--acc)); color: #0a0d11; font: 400 clamp(1.4rem, 2.4vw, 2.6rem)/1.1 var(--fh); text-transform: uppercase; }

/* 20 Quiz + Fazit: Spielshow-Look (Idee „Quizshow") */
.gshow { position: relative; min-height: 100vh; padding: 14vh var(--gut); text-align: center; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.gspots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gspot { position: absolute; top: -12%; width: clamp(220px, 30vw, 520px); height: 130%; transform-origin: 50% 0; opacity: .22; filter: blur(8px); }
.gspot--a { left: 10%; transform: rotate(-18deg); background: linear-gradient(180deg, rgba(47,211,238,.7), transparent 70%); }
.gspot--b { right: 10%; transform: rotate(18deg); background: linear-gradient(180deg, rgba(255,200,87,.6), transparent 70%); }
.gshow > *:not(.gspots), .gfazit > *:not(.gspots) { position: relative; z-index: 1; }
.gled { margin: 0 0 1.2rem; font: 700 clamp(1rem, 1.5vw, 1.5rem)/1.15 var(--fb); letter-spacing: .18em; text-transform: uppercase; color: var(--acc); text-shadow: 0 0 8px rgba(47,211,238,.8), 0 0 22px rgba(47,211,238,.35); }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 1100px; margin: 3vh auto 0; }
.gans { border: 0; margin: 0; padding: 2px; background: linear-gradient(180deg, rgba(47,211,238,.5), rgba(47,211,238,.1)); border-radius: 14px; cursor: pointer; text-align: left; font: inherit; }
.gans__in { display: flex; align-items: center; gap: 1rem; min-height: 5rem; padding: 1.2rem 1.6rem; border-radius: 12px; background: linear-gradient(180deg, #11202a, #0a1116); transition: background .35s; }
.gans__in > i { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 8px; background: var(--acc2); color: #0a0d11; font: 400 1.4rem/1 var(--fh); font-style: normal; }
.gans__t { display: grid; gap: .2rem; }
.gans__t b { font: 700 clamp(1rem, 1.4vw, 1.4rem)/1.1 var(--fb); text-transform: uppercase; color: var(--acc); }
.gans__t > span { font: 500 clamp(.85rem, 1.1vw, 1.1rem)/1.3 var(--fb); color: var(--ink); }
.gans:hover .gans__in { background: linear-gradient(180deg, #16303c, #0d1a22); }
.gans.is-pick { background: linear-gradient(180deg, var(--acc2), rgba(255,200,87,.3)); }
.gans.is-pick .gans__in { background: linear-gradient(180deg, #1d3b47, #12232c); }
.gans.is-correct { background: linear-gradient(180deg, #34d399, rgba(52,211,153,.3)); }
.gans.is-correct .gans__in { background: linear-gradient(180deg, #15503a, #0c3326); }
.gans.is-correct .gans__in > i { background: #34d399; }
.gans.is-wrong { background: linear-gradient(180deg, #f87171, rgba(248,113,113,.3)); }
.gans.is-wrong .gans__in { background: linear-gradient(180deg, #4d1a22, #2e0f15); }
.gans.is-wrong .gans__in > i { background: #f87171; }
.gans.is-wrong .gans__t { opacity: .6; }
.gstate { margin: 2.5rem 0 0; font: 600 .9rem/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
/* 20b Auflösung: Gewinner/Pokal bzw. „fragen wir die Investoren" */
.gwin { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; text-align: center; padding: 12vh var(--gut); overflow: hidden; }
.gwin > *:not(.gspots) { position: relative; z-index: 1; }
.gwin__trophy { font-size: clamp(5rem, 14vw, 12rem); line-height: 1; filter: drop-shadow(0 10px 40px rgba(255,200,87,.55)); opacity: 0; transform: scale(.4); transition: opacity .6s, transform .6s cubic-bezier(.2,1.4,.4,1); height: 0; }
.gwin.is-win .gwin__trophy { opacity: 1; transform: scale(1); height: auto; }
.gwin__verdict { margin: 0; min-height: 1.1em; font: 700 clamp(1.1rem, 2.2vw, 2.2rem)/1.15 var(--fb); letter-spacing: .1em; text-transform: uppercase; }
.gwin.is-win .gwin__verdict { color: #6ee7b7; }
.gwin.is-win .gwin__verdict::after { content: 'RICHTIG! DU DENKST WIE EIN INVESTOR'; }
.gwin.is-lose .gwin__verdict { color: var(--acc2); }
.gwin.is-lose .gwin__verdict::after { content: 'OK — DANN FRAGEN WIR DOCH MAL DIE PROFIS'; }
.gwin__h { margin: 0; font: 400 clamp(2rem, 5vw, 5.4rem)/1.08 var(--fh); text-transform: uppercase; background: linear-gradient(180deg, #ffe9a8, var(--acc2) 50%, #c89a3a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gfazit { position: relative; min-height: 100vh; padding: 14vh var(--gut); overflow: hidden; }
.gfazit__h { margin: 0 0 5vh; font: 400 clamp(2rem, 5vw, 5.6rem)/1.05 var(--fh); text-transform: uppercase; background: linear-gradient(180deg, #ffe9a8, var(--acc2) 50%, #c89a3a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fz5 { display: grid; gap: 1rem; max-width: 1100px; }
.fp { margin: 0; padding: 1.2rem 1.4rem; border-radius: 12px; background: rgba(255,255,255,.03); border-left: 3px solid var(--acc); font: 500 clamp(.95rem, 1.3vw, 1.35rem)/1.4 var(--fb); }

/* 21 Mietrendite */
.rent { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gut); background: radial-gradient(ellipse at 50% 50%, rgba(47,211,238,.16), transparent 60%); }
.rent__h { font: 400 clamp(2.6rem, 6.4vw, 7.6rem)/.92 var(--fh); text-transform: uppercase; margin: 0; }
.rent__min { font: 400 clamp(5rem, 16vw, 18rem)/1 var(--fh); color: var(--acc); margin: 2vh 0 0; }
/* 21 Social Media: Warn-Karten (Idee „Level") */
.traps { min-height: 100vh; padding: 16vh var(--gut); }
.traps__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 4vh; }
.traps__g p { margin: 0; display: flex; gap: 1rem; align-items: flex-start; padding: 1.3rem; border-radius: 14px; background: repeating-linear-gradient(-45deg, rgba(248,113,113,.07) 0 14px, transparent 14px 28px), rgba(255,255,255,.03); border: 1px solid rgba(248,113,113,.4); font: 600 clamp(.95rem, 1.25vw, 1.3rem)/1.35 var(--fb); }
.traps__g i { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: #f87171; color: #0a0d11; font: 800 1.1rem/1 var(--fb); font-style: normal; }
/* 21b Bruttomietrendite: Bildschirm-Karten (Idee „Level") */
.calcs { min-height: 100vh; padding: 14vh var(--gut); }
.calc__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.4rem); align-items: start; }
.con { padding: clamp(1.2rem, 2.2vw, 2.2rem); border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(248,113,113,.35); }
.con--good { border-color: var(--acc); box-shadow: 0 0 60px -24px var(--acc); }
.con h4 { margin: 0 0 1rem; font: 400 clamp(1.5rem, 2.6vw, 2.8rem)/1.1 var(--fh); text-transform: uppercase; }
.con__s { padding: 1.2rem; border-radius: 12px; background: #0a0f14; font: 500 clamp(.85rem, 1vw, 1.05rem)/1.5 var(--fb); color: #ffb3ad; border: 1px solid rgba(255,255,255,.06); }
.con--good .con__s { color: #bff0c0; }
.con__s p { margin: 0 0 .3rem; }
.con__f { border-top: 1px dashed rgba(255,255,255,.2); padding-top: .6rem; margin-top: .6rem; }
.con__r { font: 400 clamp(2rem, 4vw, 4.4rem)/1.05 var(--fh) !important; margin-top: .4rem !important; }
.con--good .con__r { color: var(--acc); }
.con__x { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.con__x li { font: 700 .9rem/1.3 var(--fb); color: #f87171; } .con__x li::before { content: '✕  '; }
/* 21c Konservativ: Regel-Karten (Idee „Level") */
.cons { min-height: 100vh; padding: 14vh var(--gut); text-align: center; }
.rules__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 4vh; }
.rules__g p { margin: 0; padding: 1.3rem; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font: 600 clamp(.95rem, 1.25vw, 1.3rem)/1.35 var(--fb); }
.rules__g--a p { border-color: rgba(47,211,238,.4); background: rgba(47,211,238,.06); }
.rules__why { margin: 5vh 0 1.4rem; font: 400 clamp(2.4rem, 6vw, 6.4rem)/1.05 var(--fh); text-transform: uppercase; color: var(--acc); }

/* 22 Schritt 3 / Party / Versprechen */
.s3 { min-height: 100vh; padding: 16vh var(--gut); }
.s3__l { list-style: none; padding: 0; margin: 4vh 0 0; display: grid; gap: 1.4rem; counter-reset: s; }
.s3__l li { counter-increment: s; display: grid; grid-template-columns: 5rem 1fr; align-items: baseline; font: 700 clamp(1.1rem, 1.8vw, 2rem)/1.3 var(--fb); }
.s3__l li::before { content: counter(s, decimal-leading-zero); font: 400 clamp(2rem, 3vw, 3.4rem)/1 var(--fh); color: var(--acc); }
.s3__dots { font: italic 400 clamp(2rem, 4vw, 4.6rem)/1 var(--fs) !important; color: var(--acc2); }
.party { height: 100vh; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.party video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.party::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(7,9,12,.9)); }
.party__h { position: relative; z-index: 2; font: 400 clamp(3rem, 9vw, 11rem)/.9 var(--fh); text-transform: uppercase; margin: 0 0 8vh; color: var(--acc2); }
.confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; }
.donorwall { min-height: 100vh; padding: 14vh var(--gut); }
.plaque { margin-top: 4vh; padding: clamp(2rem, 4vw, 4rem); border-radius: 8px; text-align: center; background: linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,.02) 50%, rgba(255,255,255,.05)); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(47,211,238,.08); }
.plaque__k { margin: 0 0 2.4rem; font: 400 clamp(1.6rem, 3vw, 3rem)/1.1 var(--fh); text-transform: uppercase; letter-spacing: .06em; color: var(--acc); }
.plaque ul { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 3rem; max-width: 1100px; }
.plaque li { font: 600 clamp(.95rem, 1.2vw, 1.2rem)/1.45 var(--fb); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); padding-top: 1.1rem; border-top: 1px solid var(--line); }
.plaque__f { margin: 2.8rem 0 0; font: 400 clamp(1.3rem, 2.2vw, 2.2rem)/1.3 var(--fh); text-transform: uppercase; color: var(--acc2); }

/* 23 Zitat: gerahmtes Porträt (Idee „Museum") */
.quote { min-height: 100vh; padding: 14vh var(--gut); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.quote__frame { margin: 0; justify-self: center; width: 100%; max-width: 440px; padding: clamp(8px, 1vw, 14px); border-radius: 4px; background: linear-gradient(135deg, rgba(255,200,87,.5), rgba(47,211,238,.35) 50%, rgba(255,200,87,.4)); box-shadow: 0 30px 60px -25px rgba(0,0,0,.6); }
.quote__frame-in { overflow: hidden; background: #0c1116; border-radius: 2px; }
.quote__frame-in img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.quote blockquote { margin: 0; }
.quote__a { font: italic 400 clamp(2rem, 4.4vw, 5.2rem)/1.02 var(--fs); margin: 0 0 1.4rem; color: var(--mut); }
.quote__b { font: 400 clamp(2.4rem, 5.4vw, 6.4rem)/.95 var(--fh); text-transform: uppercase; margin: 0 0 2rem; color: var(--acc2); }
.quote cite { font: 700 .9rem/1 var(--fb); letter-spacing: .3em; color: var(--acc); font-style: normal; }
.end { height: 100vh; overflow: hidden; display: grid; place-items: center; }
.end video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.end__t { position: relative; text-align: center; } .end__t h2 { font: 400 clamp(3rem, 9vw, 11rem)/.9 var(--fh); text-transform: uppercase; margin: 0; color: var(--acc); } .end__t p { font: 700 clamp(1rem, 1.6vw, 1.6rem)/1 var(--fb); letter-spacing: .25em; margin-top: 2rem; }

@media (max-width: 860px) {
  .prof, .prof__card, .fan, .quote, .steps, .st__split, .psplit, .lvtax { grid-template-columns: 1fr; }
  .prof__img { aspect-ratio: 4/3; }
  .steps__rail { position: relative; height: auto; padding-top: 10vh; } .locks, .sg__two, .answers, .traps__g, .calc__g, .rules__g, .perks, .dstory__g { grid-template-columns: 1fr; }
  .dbanks { flex-direction: column; }
  .legend { max-width: 280px; }
  .plaque ul { grid-template-columns: 1fr; } .quote { grid-template-columns: 1fr; } .quote__frame { max-width: 320px; }
  .exhibit__g { grid-template-columns: 1fr; } .exhibit__pro li, .exhibit__con li { text-align: left; border-right: 0; border-left: 3px solid #34d399; } .exhibit__con li { border-left-color: #f87171; } .exhibit__pro li::after, .exhibit__con li::before { display: none; }
  .salon__wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(100px, 30vw, 150px); } .sf { grid-column: auto !important; grid-row: auto !important; } .sf figcaption { white-space: normal; font-size: .7rem; }
  .psplit__s { min-height: 72vh; }
  .trm__g { grid-template-columns: 1fr; } .bars { min-height: 38vh; } .bar__col { max-width: 80px; }
  .ledger { height: auto; } .ledger__pin { position: relative; height: auto; } .ledger__cols { grid-template-columns: 1fr; gap: 2rem; }
  .comic { height: auto; min-height: 100vh; } .comic__bg, .comic::after { height: 46vh; }
  .comic__intro { position: relative; top: auto; left: auto; max-width: 100%; padding: 8vh var(--gut) 1vh; }
  .bubs { position: relative; inset: auto; display: flex; flex-direction: column; gap: 1rem; padding: 2vh var(--gut) 8vh; }
  .bub { position: static !important; top: auto !important; left: auto !important; max-width: 100%; }
  .top__hint { display: none; }
}
body { overflow-x: clip; } section { overflow-x: clip; }
.pstat__v .n { font-size: clamp(1.5rem, 6vw, 2.2rem); }
/* Handy/Tablet: Logo auf dezentem dunklem Grund, damit darunter durchlaufender Text es nicht stört */
@media (max-width: 900px) {
  .top__logo { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 12px; background: rgba(7,9,12,.9); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
  .top__logo img { height: 28px; filter: none; }
}