/* ==========================================================================
   FOUNDER COCKPIT — Business Workshop · Landing
   Design system 1:1 mit den FC-Decks (presentations/founder-cockpit-workshop).
   Lichtmodell: warmes Licht oben links, goldene Haarlinien, Navy als Gegengewicht.
   ========================================================================== */

/* ---------- Tokens (aus dem Deck übernommen) ---------- */
:root{
  --bg:#F4EFE6; --surface:#FFFFFF; --surface-2:#FBF8F2;
  --ink:#1A1813; --muted:#4A4136; --faint:#7C7264;
  --line:26 24 19; --line-a:.075;
  --accent:200 168 119; --accent-strong:169 134 63; --accent-deep:140 106 40;
  --accent-contrast:#FFFFFF;
  --navy:12 18 52; --navy-strong:26 36 92; --navy-contrast:#FFFFFF;
  --shadow-rgb:26 24 19; --sh-1:.05; --sh-2:.08; --sh-3:.10;
  --hi:rgb(255 255 255/.7);

  --ease:cubic-bezier(.16,1,.3,1);
  --t-mega:    clamp(2.5rem, 3.6vw + 1.9vh, 6.6rem);
  --t-display: clamp(1.85rem, 2.1vw + 1.2vh, 3.9rem);
  --t-section: clamp(1.4rem, 1.3vw + .8vh, 2.6rem);
  --t-lede:    clamp(1rem, .4vw + .45vh + .55rem, 1.35rem);
  --t-body:    clamp(.92rem, .18vw + .22vh + .72rem, 1.06rem);
  --t-micro:   clamp(.68rem, .08vw + .16vh + .56rem, .8rem);

  --shadow-card: 0 1px 2px -1px rgb(var(--shadow-rgb)/var(--sh-1)),
                 0 5px 14px -6px rgb(var(--shadow-rgb)/var(--sh-2)),
                 0 14px 32px -14px rgb(var(--shadow-rgb)/var(--sh-3)),
                 inset 0 1px 0 var(--hi);
  --shadow-lift: 0 8px 24px -10px rgb(var(--shadow-rgb)/.14),
                 0 28px 60px -22px rgb(var(--shadow-rgb)/.18),
                 inset 0 1px 0 var(--hi);
  --r:18px; --r-sm:12px;
  --pad:clamp(1.15rem,4vw,2.6rem);
  --maxw:1240px;
}
/* Bewusst KEIN Dark-Mode: die Marke tritt hell auf — helle Fläche,
   goldene Haarlinie, Navy als Gegengewicht. */


/* ---------- Reset ---------- */
:root{color-scheme:light;}   /* Browser-UI (Formularfelder, Scrollbars) bleibt hell */
*,*::before,*::after{box-sizing:border-box;}
html{font-size:clamp(15px,.34vw+.28vh+9px,19px);scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--bg);color:var(--ink);font-size:var(--t-body);
  font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
button{font:inherit;color:inherit;}
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;
  line-height:1.03;letter-spacing:-.022em;margin:0;text-wrap:balance;}
p{margin:0;text-wrap:pretty;}
::selection{background:rgb(var(--accent-strong));color:var(--accent-contrast);}
:focus-visible{outline:2px solid rgb(var(--accent-strong));outline-offset:3px;border-radius:6px;}

/* ---------- Ambient light ---------- */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(46% 40% at 8% 0%,   rgb(var(--accent)/.20) 0%, transparent 60%),
    radial-gradient(40% 38% at 100% 4%, rgb(var(--accent-strong)/.10) 0%, transparent 58%),
    radial-gradient(50% 46% at 78% 92%, rgb(var(--navy-strong)/.07) 0%, transparent 66%);}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 2*var(--pad),var(--maxw));margin-inline:auto;position:relative;z-index:2;}
section{position:relative;z-index:2;padding-block:clamp(3.6rem,8vh,7.5rem);}
.sec-head{max-width:62ch;margin-bottom:clamp(2rem,4vh,3.4rem);}
.eyebrow{font-size:var(--t-micro);font-weight:600;text-transform:uppercase;letter-spacing:.22em;
  color:rgb(var(--accent-deep));display:inline-flex;align-items:center;gap:.65rem;margin-bottom:.85rem;
  font-family:'JetBrains Mono',monospace;}
.eyebrow::before{content:'';width:1.7rem;height:1px;background:rgb(var(--accent-strong));opacity:.7;}
h2{font-size:var(--t-display);}
h3{font-size:var(--t-section);}
.lede{font-size:var(--t-lede);color:var(--muted);margin-top:1rem;line-height:1.55;}
.stop{color:rgb(var(--accent-strong));}
.accent-text{background:linear-gradient(120deg,rgb(var(--accent)) 0%,rgb(var(--accent-strong)) 45%,rgb(var(--accent-deep)) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}

/* ---------- Card ---------- */
.card{background:var(--surface);border:1px solid rgb(var(--line)/var(--line-a));
  border-radius:var(--r);box-shadow:var(--shadow-card);padding:clamp(1.2rem,2.4vw,2rem);
  position:relative;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.card::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgb(var(--accent-strong)/.55),transparent);}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);}
.grid{display:grid;gap:clamp(.9rem,1.8vw,1.5rem);}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.92em 1.7em;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font-weight:600;font-size:var(--t-body);letter-spacing:.005em;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);}
.btn-primary{color:var(--accent-contrast);
  background:linear-gradient(135deg,rgb(var(--accent)) 0%,rgb(var(--accent-strong)) 55%,rgb(var(--accent-deep)) 100%);
  box-shadow:0 2px 6px -2px rgb(var(--accent-deep)/.5),0 14px 30px -12px rgb(var(--accent-deep)/.55),inset 0 1px 0 rgb(255 255 255/.32);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 10px -2px rgb(var(--accent-deep)/.5),0 22px 44px -14px rgb(var(--accent-deep)/.6),inset 0 1px 0 rgb(255 255 255/.32);}
.btn-ghost{background:transparent;border-color:rgb(var(--line)/.2);color:var(--ink);}
.btn-ghost:hover{border-color:rgb(var(--accent-strong)/.6);transform:translateY(-2px);}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important;}
.btn .sp{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;display:none;}
.btn.is-busy .sp{display:block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Topbar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:1rem;padding:.7rem var(--pad);
  background:rgb(var(--line)/0);backdrop-filter:blur(0);
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;}
.topbar.stuck{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:rgb(var(--line)/.1);}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto;}
.brand img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 4px 12px rgb(var(--accent-strong)/.3));}
.brand span{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:.14em;
  font-size:var(--t-micro);text-transform:uppercase;}
.brand b{color:rgb(var(--accent-deep));font-weight:600;}
.navlinks{display:none;gap:1.6rem;font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;
  font-weight:500;color:var(--muted);}
.navlinks a{text-decoration:none;position:relative;padding-block:.3rem;}
.navlinks a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgb(var(--accent-strong));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.navlinks a:hover::after{transform:scaleX(1);}
@media(min-width:1000px){.navlinks{display:flex;}}
.lang-bar{display:flex;gap:2px;padding:3px;border-radius:999px;
  background:var(--surface);border:1px solid rgb(var(--line)/var(--line-a));box-shadow:var(--shadow-card);}
.lang-bar button{border:0;background:transparent;padding:.28rem .62rem;border-radius:999px;cursor:pointer;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;color:var(--faint);transition:.25s var(--ease);}
.lang-bar button[aria-current="true"]{background:rgb(var(--accent-strong)/.16);color:rgb(var(--accent-deep));}
.topbar .btn{padding:.6em 1.15em;font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:grid;align-items:center;padding-top:5.5rem;padding-bottom:3rem;}
.hero-grid{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center;}
@media(min-width:1040px){.hero-grid{grid-template-columns:1.15fr .85fr;}}
.hero h1{font-size:var(--t-mega);letter-spacing:-.035em;}
.hero h1 em{font-style:normal;display:block;}
.hero .lede{max-width:52ch;}
.hero-meta{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.8rem;}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border-radius:999px;
  background:var(--surface);border:1px solid rgb(var(--line)/.1);box-shadow:var(--shadow-card);
  font-size:var(--t-micro);font-weight:500;letter-spacing:.04em;}
.chip svg{width:1em;height:1em;color:rgb(var(--accent-deep));flex:none;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:2rem;}
.hero-note{font-size:var(--t-micro);color:var(--faint);margin-top:.9rem;}

/* Instrument (Hero-Visual, ersetzt später das Video) */
.instrument{position:relative;aspect-ratio:1/1;max-width:min(100%,520px);margin-inline:auto;}
.instrument svg{width:100%;height:100%;overflow:visible;}
.inst-ring{fill:none;stroke:rgb(var(--line)/.13);stroke-width:1;}
.inst-arc{fill:none;stroke:url(#goldgrad);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s var(--ease) .35s forwards;}
.inst-tick{stroke:rgb(var(--line)/.22);stroke-width:1;}
.inst-tick.on{stroke:rgb(var(--accent-strong));stroke-width:2;}
.inst-needle{transform-origin:200px 200px;animation:sweep 5.5s var(--ease) .5s forwards;}
.inst-core{fill:rgb(var(--navy));}
.inst-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  fill:var(--faint);text-transform:uppercase;}
.inst-value{font-family:'Space Grotesk',sans-serif;font-size:46px;font-weight:600;fill:var(--ink);
  text-anchor:middle;letter-spacing:-.03em;}
.inst-sub{font-family:'Inter',sans-serif;font-size:11px;fill:var(--muted);text-anchor:middle;letter-spacing:.1em;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes sweep{0%{transform:rotate(-118deg);}100%{transform:rotate(46deg);}}
@media (prefers-reduced-motion:reduce){
  .inst-arc{animation:none;stroke-dashoffset:0;}
  .inst-needle{animation:none;transform:rotate(46deg);}
}
.instrument .halo{position:absolute;inset:8%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 32% 26%,rgb(var(--accent)/.34),transparent 62%);filter:blur(28px);}

/* Scroll cue */
.scrollcue{display:flex;align-items:center;gap:.6rem;margin-top:2.4rem;font-size:var(--t-micro);
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-family:'JetBrains Mono',monospace;}
.scrollcue i{width:1px;height:2.2rem;background:linear-gradient(rgb(var(--accent-strong)),transparent);
  animation:cue 2.2s var(--ease) infinite;}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top;}50%{opacity:1;transform:scaleY(1);}}

/* ---------- Reveal ---------- */
/* Die Startopacity hängt an .js: fällt JavaScript aus, bleibt ALLES sichtbar.
   Unsichtbarer Inhalt ist der teuerste Fehler, den eine Verkaufsseite machen kann. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.js .rv.in{opacity:1;transform:none;}
.rv[data-d="1"]{transition-delay:.09s}.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}.rv[data-d="4"]{transition-delay:.36s}
.rv[data-d="5"]{transition-delay:.45s}.rv[data-d="6"]{transition-delay:.54s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}}

/* ---------- Pain ---------- */
.pain-list{display:grid;gap:.6rem;}
.pain{display:flex;gap:.9rem;align-items:flex-start;padding:.85rem 1.05rem;border-radius:var(--r-sm);
  background:linear-gradient(120deg,var(--surface),var(--surface-2));
  border:1px solid rgb(var(--line)/.08);border-left:2px solid rgb(var(--accent-strong)/.55);
  transition:transform .35s var(--ease),border-color .35s var(--ease);}
.pain:hover{transform:translateX(4px);border-left-color:rgb(var(--accent-strong));}
.pain .n{font-family:'JetBrains Mono',monospace;font-size:var(--t-micro);color:rgb(var(--accent-deep));
  font-weight:600;padding-top:.15rem;}
.verdict{margin-top:1.6rem;padding:1.3rem 1.5rem;border-radius:var(--r);
  background:rgb(var(--navy));color:var(--navy-contrast);box-shadow:var(--shadow-lift);
  font-family:'Space Grotesk',sans-serif;font-size:var(--t-section);line-height:1.28;letter-spacing:-.02em;}
.verdict small{display:block;margin-top:.7rem;font-family:'Inter',sans-serif;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;opacity:.6;font-weight:500;}

/* ---------- Phasen ---------- */
.phase{padding:0;overflow:hidden;}
.phase-top{padding:clamp(1.2rem,2.4vw,1.9rem);display:flex;gap:1rem;align-items:flex-start;}
.phase-num{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.6rem,5vw,4rem);font-weight:700;
  line-height:.8;color:transparent;-webkit-text-stroke:1.4px rgb(var(--accent-strong)/.55);flex:none;}
.phase h3{margin-bottom:.35rem;}
.phase-strat{font-family:'JetBrains Mono',monospace;font-size:var(--t-micro);letter-spacing:.1em;
  color:rgb(var(--accent-deep));text-transform:uppercase;}
.phase-body{padding:0 clamp(1.2rem,2.4vw,1.9rem) clamp(1.2rem,2.4vw,1.9rem);color:var(--muted);}
.exchange{display:flex;align-items:center;gap:.7rem;margin-top:1.1rem;flex-wrap:wrap;}
.ex-box{flex:1 1 40%;padding:.7rem .9rem;border-radius:var(--r-sm);background:var(--surface-2);
  border:1px solid rgb(var(--line)/.09);}
.ex-box .k{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.ex-box .v{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--ink);margin-top:.2rem;}
.ex-arrow{flex:none;color:rgb(var(--accent-strong));font-size:1.3rem;}
.kpi{margin-top:1.1rem;padding-top:.9rem;border-top:1px dashed rgb(var(--line)/.16);
  font-size:var(--t-micro);color:var(--muted);}
.kpi b{display:block;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:rgb(var(--accent-deep));margin-bottom:.25rem;}

/* ---------- Agenda ---------- */
.agenda{display:grid;gap:0;counter-reset:ag;}
.ag{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.15rem 0;
  border-top:1px solid rgb(var(--line)/.1);align-items:start;transition:padding-left .4s var(--ease);}
.ag:last-child{border-bottom:1px solid rgb(var(--line)/.1);}
.ag:hover{padding-left:.7rem;}
.ag-n{font-family:'JetBrains Mono',monospace;font-size:var(--t-micro);font-weight:600;
  color:rgb(var(--accent-deep));padding-top:.35rem;letter-spacing:.1em;}
.ag h4{font-size:calc(var(--t-body) * 1.18);font-weight:600;}
.ag p{color:var(--muted);font-size:var(--t-body);margin-top:.25rem;}
.ag-time{font-family:'JetBrains Mono',monospace;font-size:var(--t-micro);color:var(--faint);
  margin-top:.35rem;letter-spacing:.08em;}

/* ---------- Screening-Matrix ---------- */
.matrix{border-radius:var(--r);overflow:hidden;border:1px solid rgb(var(--line)/.1);
  box-shadow:var(--shadow-card);background:var(--surface);}
.mx-row{display:grid;grid-template-columns:1.6fr repeat(4,1fr);}
.mx-head{background:rgb(var(--navy));color:var(--navy-contrast);}
.mx-head .mx-cell{font-family:'JetBrains Mono',monospace;font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;opacity:.9;}
.mx-cell{padding:.75rem .8rem;border-right:1px solid rgb(var(--line)/.07);font-size:var(--t-micro);}
.mx-row:not(.mx-head){border-top:1px solid rgb(var(--line)/.07);}
.mx-row:not(.mx-head) .mx-cell:first-child{font-weight:600;font-size:var(--t-body);
  font-family:'Space Grotesk',sans-serif;}
.mx-cell:first-child small{display:block;font-family:'Inter',sans-serif;font-weight:400;
  color:var(--faint);font-size:var(--t-micro);margin-top:.15rem;letter-spacing:0;}
.mx-cell:last-child{border-right:0;}
.band{display:inline-block;width:100%;height:5px;border-radius:99px;background:rgb(var(--line)/.1);}
.b1{background:rgb(var(--line)/.16)}.b2{background:rgb(var(--accent)/.5)}
.b3{background:rgb(var(--accent-strong)/.75)}.b4{background:rgb(var(--accent-deep));}
@media(max-width:760px){
  .mx-row{grid-template-columns:1fr;}
  .mx-head{display:none;}
  .mx-row:not(.mx-head){padding:.4rem 0;}
  .mx-cell{border-right:0;padding:.35rem .9rem;}
  .mx-row:not(.mx-head) .mx-cell:not(:first-child){display:inline-block;width:23%;}
}

/* ---------- 2D → 3D ---------- */
.dim{display:grid;gap:clamp(1rem,2vw,1.6rem);}
@media(min-width:820px){.dim{grid-template-columns:1fr auto 1fr;align-items:center;}}
.tower{display:grid;gap:.55rem;}
.tier{padding:.85rem 1rem;border-radius:var(--r-sm);background:rgb(var(--navy));color:var(--navy-contrast);
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;}
.tier b{font-family:'Space Grotesk',sans-serif;font-weight:600;}
.tier span{font-family:'JetBrains Mono',monospace;font-size:var(--t-micro);letter-spacing:.16em;opacity:.65;}
.tier.gold{position:relative;background:rgb(var(--navy));
  box-shadow:0 0 0 1px rgb(var(--accent-strong)/.85),inset 0 0 0 3px rgb(var(--navy)),inset 0 0 0 4px rgb(var(--accent)/.55);}
.dim-mid{text-align:center;color:rgb(var(--accent-strong));font-size:1.8rem;}
.dim-cap{font-size:var(--t-micro);color:var(--muted);margin-top:.7rem;line-height:1.5;}
.dim-tag{font-family:'JetBrains Mono',monospace;font-size:var(--t-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.6rem;display:block;}

/* ---------- Mentor ---------- */
.mentor{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:center;}
@media(min-width:900px){.mentor{grid-template-columns:.8fr 1.2fr;}}
.mentor-portrait{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;position:relative;
  background:linear-gradient(150deg,rgb(var(--navy)) 0%,rgb(var(--navy-strong)) 100%);
  box-shadow:var(--shadow-lift);display:grid;place-items:center;}
.mentor-portrait img{width:100%;height:100%;object-fit:cover;}
.mentor-portrait .mono-init{font-family:'Space Grotesk',sans-serif;font-size:clamp(3rem,7vw,5rem);
  font-weight:600;color:rgb(var(--accent)/.9);letter-spacing:.02em;}
.mentor-portrait::after{content:'';position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(transparent,rgb(var(--navy)/.85));}
.mentor-facts{display:grid;gap:.7rem;margin-top:1.5rem;}
.fact{display:flex;gap:.85rem;align-items:baseline;padding-bottom:.7rem;
  border-bottom:1px solid rgb(var(--line)/.09);}
.fact b{font-family:'Space Grotesk',sans-serif;font-size:calc(var(--t-body)*1.5);font-weight:600;
  color:rgb(var(--accent-deep));min-width:4.5ch;}
.fact span{color:var(--muted);font-size:var(--t-body);}

/* ---------- Wert / Mitnehmen ---------- */
.take{display:flex;gap:1rem;align-items:flex-start;}
.take .tile{width:2.6rem;height:2.6rem;border-radius:12px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,rgb(var(--accent)/.26),rgb(var(--accent)/.06) 60%,rgb(var(--accent)/.14));
  color:rgb(var(--accent-deep));border:1px solid rgb(var(--accent)/.34);
  box-shadow:inset 0 1px 0 var(--hi),0 6px 16px -10px rgb(var(--accent-strong)/.5);}
.take .tile svg{width:1.15rem;height:1.15rem;}
.take h4{font-size:calc(var(--t-body)*1.12);margin-bottom:.25rem;}
.take p{color:var(--muted);font-size:var(--t-body);}

/* ---------- ROI ---------- */
.roi{display:grid;gap:1rem;}
@media(min-width:860px){.roi{grid-template-columns:1fr 1fr 1.15fr;}}
.roi .card{display:flex;flex-direction:column;justify-content:center;}
.roi .big{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.9rem,3.4vw,3rem);font-weight:600;
  letter-spacing:-.03em;line-height:1;margin:.4rem 0;font-variant-numeric:tabular-nums;}
.roi .k{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  font-family:'JetBrains Mono',monospace;}
.roi .hl{background:rgb(var(--navy));color:var(--navy-contrast);}
.roi .hl .k{color:rgb(var(--accent));}
.roi .hl .big{color:rgb(var(--accent));}
.disclaimer{margin-top:1.2rem;font-size:var(--t-micro);color:var(--faint);line-height:1.6;max-width:80ch;}

/* ---------- Ticket / Checkout ---------- */
.ticket-wrap{display:grid;gap:clamp(1.2rem,2.5vw,2rem);}
@media(min-width:960px){.ticket-wrap{grid-template-columns:1.05fr .95fr;align-items:start;}}
.price-card{background:rgb(var(--navy));color:var(--navy-contrast);border-radius:var(--r);
  padding:clamp(1.4rem,3vw,2.3rem);box-shadow:var(--shadow-lift);position:relative;overflow:hidden;}
.price-card::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 12% 0%,rgb(var(--accent)/.22),transparent 62%);}
.price-card > *{position:relative;}
.price-tag{display:flex;align-items:baseline;gap:.6rem;margin:1rem 0 .3rem;}
.price-tag .amt{font-family:'Space Grotesk',sans-serif;font-size:clamp(3rem,7vw,4.6rem);font-weight:700;
  letter-spacing:-.04em;line-height:.9;color:rgb(var(--accent));}
.price-tag .cur{font-size:1.4rem;font-weight:500;color:rgb(var(--accent));}
.price-sub{font-size:var(--t-micro);opacity:.72;letter-spacing:.05em;}
.incl{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.6rem;}
.incl li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-body);}
.incl svg{width:1.05em;height:1.05em;color:rgb(var(--accent));flex:none;margin-top:.28em;}
.seats{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid rgb(255 255 255/.14);}
.seatbar{height:6px;border-radius:99px;background:rgb(255 255 255/.14);overflow:hidden;margin-top:.55rem;}
.seatbar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,rgb(var(--accent)),rgb(var(--accent-strong)));
  width:0;transition:width 1.4s var(--ease);}
.seats .k{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;opacity:.7;
  display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;}

/* Form */
.form{display:grid;gap:.85rem;}
.field{display:grid;gap:.35rem;}
.field label{font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);font-weight:600;font-family:'JetBrains Mono',monospace;}
.field input{width:100%;padding:.78rem .95rem;border-radius:var(--r-sm);
  border:1px solid rgb(var(--line)/.16);background:var(--surface);color:var(--ink);
  font:inherit;font-size:var(--t-body);transition:border-color .25s var(--ease),box-shadow .25s var(--ease);}
.field input:focus{outline:0;border-color:rgb(var(--accent-strong));
  box-shadow:0 0 0 3px rgb(var(--accent-strong)/.16);}
.field input:user-invalid{border-color:#C2410C;}
.row2{display:grid;gap:.85rem;grid-template-columns:1fr 1fr;}
@media(max-width:520px){.row2{grid-template-columns:1fr;}}
.consent{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--t-micro);color:var(--muted);
  line-height:1.55;}
.consent input{margin-top:.2rem;accent-color:rgb(var(--accent-strong));width:1rem;height:1rem;flex:none;}
.consent a{color:rgb(var(--accent-deep));}
.paybox{display:grid;gap:.7rem;margin-top:.4rem;}
.paysep{display:flex;align-items:center;gap:.8rem;color:var(--faint);font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;}
.paysep::before,.paysep::after{content:'';height:1px;flex:1;background:rgb(var(--line)/.12);}
#paypal-button-container{min-height:0;}
.trust{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:1rem;font-size:var(--t-micro);
  color:var(--faint);}
.trust span{display:inline-flex;align-items:center;gap:.4rem;}
.trust svg{width:.95em;height:.95em;color:rgb(var(--accent-deep));}
.formmsg{font-size:var(--t-micro);padding:.7rem .9rem;border-radius:var(--r-sm);display:none;line-height:1.5;}
.formmsg.err{display:block;background:#FEF2F2;color:#991B1B;border:1px solid #FECACA;}
.formmsg.ok{display:block;background:rgb(var(--accent)/.14);color:rgb(var(--accent-deep));
  border:1px solid rgb(var(--accent)/.3);}

/* ---------- Film (Vimeo, aktiviert sich sobald CONFIG.vimeoId gesetzt ist) ---------- */
.film-frame{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;
  box-shadow:var(--shadow-lift);background:rgb(var(--navy));}
.film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.5rem;max-width:80ch;}
details.qa{border:1px solid rgb(var(--line)/.1);border-radius:var(--r-sm);background:var(--surface);
  padding:0 1.1rem;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);}
details.qa[open]{border-color:rgb(var(--accent-strong)/.4);box-shadow:var(--shadow-card);}
details.qa summary{cursor:pointer;list-style:none;padding:1rem 0;font-weight:600;
  font-family:'Space Grotesk',sans-serif;display:flex;justify-content:space-between;gap:1rem;align-items:center;}
details.qa summary::-webkit-details-marker{display:none;}
details.qa summary::after{content:'+';color:rgb(var(--accent-deep));font-size:1.3rem;font-weight:400;
  transition:transform .3s var(--ease);flex:none;}
details.qa[open] summary::after{transform:rotate(45deg);}
details.qa p{padding-bottom:1.1rem;color:var(--muted);}

/* ---------- Final CTA ---------- */
.final{background:rgb(var(--navy));color:var(--navy-contrast);border-radius:var(--r);
  padding:clamp(2rem,5vw,4rem);text-align:center;box-shadow:var(--shadow-lift);
  position:relative;overflow:hidden;}
.final::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% -10%,rgb(var(--accent)/.24),transparent 62%);}
.final > *{position:relative;}
.final h2{font-size:var(--t-display);}
.final .lede{color:rgb(255 255 255/.72);margin-inline:auto;max-width:56ch;}

/* ---------- Footer ---------- */
footer{padding:2.5rem 0 3rem;border-top:1px solid rgb(var(--line)/.1);margin-top:3rem;
  font-size:var(--t-micro);color:var(--faint);}
.foot{display:flex;flex-wrap:wrap;gap:1rem 1.8rem;align-items:center;justify-content:space-between;}
.foot nav{display:flex;flex-wrap:wrap;gap:1.2rem;}
.foot a{text-decoration:none;}
.foot a:hover{color:rgb(var(--accent-deep));}

/* ---------- Sticky mobile CTA ---------- */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:35;padding:.6rem var(--pad)
  calc(.6rem + env(safe-area-inset-bottom));display:flex;gap:.8rem;align-items:center;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);
  border-top:1px solid rgb(var(--line)/.1);transform:translateY(110%);transition:transform .4s var(--ease);}
.stickybar.show{transform:none;}
.stickybar .p{font-family:'Space Grotesk',sans-serif;font-weight:600;margin-right:auto;line-height:1.2;}
.stickybar .p small{display:block;font-family:'Inter',sans-serif;font-weight:400;
  font-size:var(--t-micro);color:var(--faint);}
@media(min-width:1000px){.stickybar{display:none;}}

/* ==========================================================================
   PREMIUM LAYER — moderne Plattform-Features, alle progressiv erweiternd:
   @property-Gradienten, scroll-driven animations, Pointer-Spotlight,
   3D-Tilt, Zeilen-Masken-Reveal, animierte Datenvisualisierung.
   Jede Bewegung läuft auf transform/opacity und respektiert reduced-motion.
   ========================================================================== */

@property --sheen   { syntax:'<percentage>'; inherits:false; initial-value:-40%; }
@property --spot-x  { syntax:'<percentage>'; inherits:false; initial-value:50%; }
@property --spot-y  { syntax:'<percentage>'; inherits:false; initial-value:0%; }
@property --ring    { syntax:'<angle>';      inherits:false; initial-value:0deg; }

/* ---------- Fortschritts-Schiene (wie im Deck) ---------- */
.progress-rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  background:rgb(var(--line)/.07);}
.progress-fill{height:100%;width:0;transform-origin:0 50%;
  background:linear-gradient(90deg,rgb(var(--navy-strong)),rgb(var(--accent-strong)),rgb(var(--accent)));}
/* Native scroll-driven animation, wo verfügbar — sonst übernimmt JS. */
@supports (animation-timeline: scroll()){
  .progress-fill{width:100%;transform:scaleX(0);
    animation:railGrow linear forwards;animation-timeline:scroll(root block);}
  @keyframes railGrow{to{transform:scaleX(1);}}
  .js .progress-fill{width:100%;}
}

/* ---------- Goldener Sheen auf der Haupt-CTA ---------- */
.btn-primary{position:relative;overflow:hidden;isolation:isolate;}
.btn-primary::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent var(--sheen),
    rgb(255 255 255/.42) calc(var(--sheen) + 9%),
    transparent calc(var(--sheen) + 20%));
  transition:--sheen .9s var(--ease);}
.btn-primary:hover::after,.btn-primary:focus-visible::after{--sheen:130%;}

/* ---------- Pointer-Spotlight + 3D-Tilt auf Karten ---------- */
.card,.price-card,.pain,.ag{--spot-x:50%;--spot-y:-20%;}
.card::after,.price-card::after{content:'';position:absolute;inset:0;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(38% 60% at var(--spot-x) var(--spot-y),
    rgb(var(--accent)/.20),transparent 68%);}
.card:hover::after{opacity:1;}
.price-card::after{opacity:.55;}
.price-card:hover::after{opacity:1;}

@media (hover:hover) and (pointer:fine){
  .tilt-scene{perspective:1400px;}
  .card.tilt{transform-style:preserve-3d;
    transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));
    transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
  .card.tilt:hover{--ty:-5px;box-shadow:var(--shadow-lift);}
}
@media (prefers-reduced-motion:reduce){
  .card.tilt{transform:none!important;}
  .btn-primary::after{display:none;}
}

/* ---------- Zeilenweiser Masken-Reveal für Überschriften ---------- */
.js .lines .ln{display:block;overflow:hidden;}
.js .lines .ln > i{display:block;font-style:inherit;transform:translateY(105%);
  transition:transform .95s var(--ease);}
.js .lines.in .ln > i{transform:none;}
.js .lines.in .ln:nth-child(2) > i{transition-delay:.08s;}
.js .lines.in .ln:nth-child(3) > i{transition-delay:.16s;}
@media (prefers-reduced-motion:reduce){
  .js .lines .ln > i{transform:none!important;transition:none;}
}

/* ---------- Geister-Kapitelziffer ---------- */
.sec-head{position:relative;}
.ghost-num{position:absolute;right:0;top:-.35em;z-index:-1;pointer-events:none;
  font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:.75;
  font-size:clamp(6rem,16vw,15rem);letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px rgb(var(--line)/.09);
  user-select:none;}
@media(max-width:760px){.ghost-num{opacity:.6;font-size:clamp(5rem,26vw,9rem);}}

/* ---------- Phasen-Kette: SVG-Bogen, der sich beim Scrollen zeichnet ---------- */
.chain{margin:2rem 0 -.6rem;}
.chain svg{width:100%;height:clamp(64px,7vw,104px);overflow:visible;}
.chain path{fill:none;stroke:rgb(var(--accent-strong)/.75);stroke-width:1.6;
  stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.5s var(--ease);}
.chain.in path{stroke-dashoffset:0;}
.chain .tip{fill:rgb(var(--accent-strong));opacity:0;transition:opacity .4s var(--ease) 1.1s;}
.chain.in .tip{opacity:1;}
.chain text{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;
  fill:var(--faint);text-transform:uppercase;text-anchor:middle;}

/* ---------- Säulen-Radar (Screening) ---------- */
.radar-wrap{display:grid;gap:clamp(1.2rem,2.5vw,2rem);align-items:center;}
@media(min-width:980px){.radar-wrap{grid-template-columns:1fr .82fr;}}
.radar{position:relative;aspect-ratio:1/1;max-width:440px;margin-inline:auto;width:100%;}
.radar svg{width:100%;height:100%;overflow:visible;}
.radar .grid-ring{fill:none;stroke:rgb(var(--line)/.12);stroke-width:1;}
.radar .spoke{stroke:rgb(var(--line)/.12);stroke-width:1;}
.radar .shape{fill:rgb(var(--accent)/.22);stroke:rgb(var(--accent-strong));stroke-width:2;
  stroke-linejoin:round;transform-origin:50% 50%;transform:scale(.05);opacity:0;
  transition:transform 1.5s var(--ease),opacity .7s var(--ease);}
.radar.in .shape{transform:scale(1);opacity:1;}
.radar .node{fill:rgb(var(--accent-deep));opacity:0;transition:opacity .5s var(--ease) .9s;}
.radar.in .node{opacity:1;}
.radar .lbl{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.14em;
  fill:var(--muted);text-transform:uppercase;}
.radar-legend{display:grid;gap:.55rem;}
.rl{display:flex;align-items:center;gap:.8rem;padding:.6rem .85rem;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid rgb(var(--line)/.08);}
.rl b{font-family:'JetBrains Mono',monospace;color:rgb(var(--accent-deep));font-size:var(--t-micro);}
.rl span{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--t-body);}
.rl small{margin-left:auto;color:var(--faint);font-size:var(--t-micro);}

/* ---------- Zahlen-Countup ---------- */
.num{font-variant-numeric:tabular-nums;}

/* ---------- Hero-Parallax ---------- */
.instrument{transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .9s var(--ease);}
@media (prefers-reduced-motion:reduce){.instrument{transform:none!important;}}
.instrument .ring-anim{transform-origin:200px 200px;
  animation:ringSpin 42s linear infinite;}
@keyframes ringSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.instrument .ring-anim{animation:none;}}

/* ---------- Abschnitts-Trennlinie mit Goldfaden ---------- */
.hairline{height:1px;background:linear-gradient(90deg,transparent,
  rgb(var(--accent-strong)/.4) 18%,rgb(var(--accent-strong)/.4) 82%,transparent);
  transform:scaleX(0);transform-origin:50%;transition:transform 1.2s var(--ease);}
.hairline.in{transform:scaleX(1);}

/* ---------- Masken-Wischblende für Überschriften ---------- */
.js h1.mask,.js h2.mask{clip-path:inset(0 0 108% 0);
  transition:clip-path 1.05s var(--ease),opacity .6s var(--ease);}
.js h1.mask.in,.js h2.mask.in{clip-path:inset(0 0 -14% 0);}

/* ==========================================================================
   EDITORIAL REFINEMENT
   Die erste Fassung hatte auf breiten Schirmen zu viel Leere und zu wenig
   Rhythmus: einspaltige Abschnitts-Köpfe liessen die Lede allein stehen,
   die Geisterziffer schwebte, und die Seite war durchgehend beige.
   Hier: zweispaltiger Kopf, engere Vertikale, ein Navy-Band als Kontrapunkt.
   ========================================================================== */

:root{ --maxw:1320px; }

/* Vertikale beruhigen — vorher bis 7,5rem, das riss Löcher auf grossen Schirmen */
section{ padding-block:clamp(3.4rem,6.2vh,5.6rem); }

/* ---------- Abschnitts-Kopf: Überschrift links, Lede rechts ---------- */
.sec-head{
  max-width:none;
  display:grid;
  gap:.2rem clamp(2rem,4vw,4.5rem);
  align-items:end;
  padding-bottom:clamp(1.1rem,2vw,1.8rem);
  border-bottom:1px solid rgb(var(--line)/.1);
  margin-bottom:clamp(1.8rem,3.4vh,2.8rem);
}
.sec-head .eyebrow{ grid-column:1 / -1; margin-bottom:.5rem; }
.sec-head h2{ max-width:20ch; }
.sec-head .lede{ margin-top:0; max-width:46ch; }
@media(min-width:1024px){
  .sec-head{ grid-template-columns:1.15fr .85fr; }
  .sec-head .lede{ padding-bottom:.35em; }   /* Grundlinien treffen sich */
}

/* Geisterziffer: vom schwebenden Klotz zur gesetzten Index-Marke */
.ghost-num{
  position:static;
  grid-column:1 / -1;
  justify-self:end;
  order:-1;
  font-size:clamp(2.6rem,4vw,4.4rem);
  line-height:1;
  margin-bottom:-.55em;      /* schiebt sie hinter die Augenbraue */
  -webkit-text-stroke:1px rgb(var(--line)/.14);
  opacity:.9;
}
@media(max-width:1023px){ .ghost-num{ display:none; } }

/* ---------- Hero ---------- */
.hero h1{ hyphens:manual; max-width:16ch; }
@media(min-width:1040px){ .hero-grid{ grid-template-columns:1.28fr .72fr; } }
.instrument{ max-width:min(100%,440px); }

/* Vertrauensleiste — füllt den vorher leeren Fuss des Heros */
.cred{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:.2rem clamp(1rem,2.4vw,2.4rem);
  margin-top:2.2rem; padding-top:1.3rem;
  border-top:1px solid rgb(var(--line)/.12);
}
.cred-item{ display:flex; flex-direction:column; gap:.1rem; }
.cred-item b{
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:clamp(1.5rem,2vw,2.1rem); line-height:1;
  letter-spacing:-.03em; color:rgb(var(--accent-deep));
  font-variant-numeric:tabular-nums;
}
.cred-item span{
  font-size:var(--t-micro); color:var(--faint);
  letter-spacing:.1em; text-transform:uppercase;
}

/* Feines Raster nur im Hero — Cockpit-Anmutung, kaum sichtbar, aber spürbar */
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgb(var(--line)/.045) 1px,transparent 1px),
    linear-gradient(90deg,rgb(var(--line)/.045) 1px,transparent 1px);
  background-size:clamp(48px,5vw,84px) clamp(48px,5vw,84px);
  mask-image:radial-gradient(74% 66% at 62% 44%,#000 0%,transparent 78%);
}

/* ---------- Navy-Band: der Kontrapunkt gegen die durchgehende Beige ---------- */
.band-navy{
  background:rgb(var(--navy)); color:var(--navy-contrast);
  margin-block:clamp(1.5rem,4vh,3.2rem);
  padding-block:clamp(3.4rem,8vh,6.4rem);
  position:relative; overflow:hidden;
}
.band-navy::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(52% 60% at 14% 0%,  rgb(var(--accent)/.20),transparent 62%),
    radial-gradient(46% 52% at 92% 100%,rgb(var(--accent)/.12),transparent 64%);
}
.band-navy::after{                       /* Haarlinien-Raster, sehr leise */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(90deg,rgb(255 255 255/.05) 1px,transparent 1px);
  background-size:clamp(60px,6vw,110px) 100%;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}
.band-inner{ position:relative; max-width:56ch; }
.band-label{
  font-family:'JetBrains Mono',monospace; font-size:var(--t-micro);
  letter-spacing:.24em; text-transform:uppercase;
  color:rgb(var(--accent)); display:inline-flex; align-items:center; gap:.7rem;
}
.band-label::before{ content:''; width:2rem; height:1px; background:rgb(var(--accent)); opacity:.7; }
.band-claim{
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:clamp(1.5rem,2.6vw + .6vh,3rem); line-height:1.12; letter-spacing:-.028em;
  margin-top:1.1rem; text-wrap:balance;
}
.band-claim em{
  font-style:normal;
  background:linear-gradient(120deg,rgb(var(--accent)),rgb(var(--accent-strong)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.band-rule{
  height:1px; width:0; margin:1.6rem 0 1.2rem;
  background:linear-gradient(90deg,rgb(var(--accent)),rgb(var(--accent)/0));
  transition:width 1.4s var(--ease) .25s;
}
.band-inner.in .band-rule{ width:min(100%,22rem); }
.band-sub{ color:rgb(255 255 255/.66); font-size:var(--t-lede); line-height:1.55; }

/* ---------- Karten: Eckmarken statt nackter Fläche ---------- */
.card.phase::after, .card.take::after{ /* Spotlight bleibt, Marken kommen dazu */ }
.card.phase, .card.take{ --corner:rgb(var(--accent-strong)/.34); }
.card.phase::before, .card.take::before{
  content:''; position:absolute; top:10px; right:10px; left:auto;
  width:13px; height:13px; background:none;
  border-top:1px solid var(--corner); border-right:1px solid var(--corner);
  border-radius:0 4px 0 0;
}

/* ---------- Agenda: Zebra-Ruhe statt reiner Linienliste ---------- */
.ag:nth-child(odd){ background:linear-gradient(90deg,rgb(var(--accent)/.045),transparent 62%); }
.ag{ padding-inline:.9rem; border-radius:10px; }

/* ---------- Fokus-Ring auch auf dunklem Grund sichtbar ---------- */
.band-navy :focus-visible, .price-card :focus-visible, .final :focus-visible{
  outline-color:rgb(var(--accent));
}

/* ==========================================================================
   HERO v2 — kinematische Bühne aus eigenem Markenmaterial
   Schichten: Film → warmer Schleier → Raster → Inhalt → Glaspaneel.
   Der Schleier ist der eigentliche Trick: er hält die linke Hälfte auf
   Papierton (Text bleibt in voller Kontraststärke) und gibt die Tür rechts frei.
   ========================================================================== */

.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center;
       padding-top:6rem; padding-bottom:2.4rem; overflow:hidden; }
.hero::before{ content:none; }          /* altes Raster ersetzt durch .hero-grid-lines */

.hero-stage{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-poster,.hero-film{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:62% 50%; transform:scale(1.04);
}
.hero-film{ opacity:0; transition:opacity 1.1s var(--ease); }
.hero-film.is-playing{ opacity:1; }

/* Warmer Schleier: links deckend, rechts offen */
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg,
      var(--bg) 0%, var(--bg) 30%,
      color-mix(in srgb,var(--bg) 92%,transparent) 42%,
      color-mix(in srgb,var(--bg) 62%,transparent) 56%,
      color-mix(in srgb,var(--bg) 26%,transparent) 72%,
      color-mix(in srgb,var(--bg) 12%,transparent) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 26%),
    radial-gradient(58% 50% at 6% 4%, rgb(var(--accent)/.18), transparent 60%);
}
@media(max-width:1039px){
  /* Hochkant: Text sitzt ÜBER dem Bild, also deutlich stärker abdecken —
     Lesbarkeit wird pro Foto geprüft, nicht pro CSS-Klasse. */
  .hero-veil{
    background:
      linear-gradient(to bottom,
        color-mix(in srgb,var(--bg) 90%,transparent) 0%,
        color-mix(in srgb,var(--bg) 94%,transparent) 46%,
        var(--bg) 78%),
      radial-gradient(70% 40% at 50% 0%, rgb(var(--accent)/.16), transparent 62%);
  }
  .hero-poster,.hero-film{ object-position:60% 30%; }
}

.hero-grid-lines{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgb(var(--line)/.05) 1px,transparent 1px),
    linear-gradient(90deg,rgb(var(--line)/.05) 1px,transparent 1px);
  background-size:clamp(52px,5vw,92px) clamp(52px,5vw,92px);
  mask-image:radial-gradient(70% 62% at 30% 42%,#000 0%,transparent 76%);
}

.hero .wrap{ position:relative; z-index:2; }
.hero-grid{ align-items:center; }
@media(min-width:1040px){ .hero-grid{ grid-template-columns:1.32fr .68fr; } }
.hero-copy{ max-width:44rem; }
.hero h1{ font-size:clamp(2.6rem,4vw + 1.4vh,6.2rem); }

/* ---------- Glaspaneel mit dem Instrument ---------- */
.hero-panel{
  position:relative; border-radius:calc(var(--r) + 4px);
  padding:clamp(1rem,1.8vw,1.5rem);
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid rgb(255 255 255/.55);
  box-shadow:
    0 2px 6px -2px rgb(var(--shadow-rgb)/.10),
    0 30px 70px -28px rgb(var(--shadow-rgb)/.30),
    inset 0 1px 0 rgb(255 255 255/.75);
}
.hero-panel::after{               /* goldene Innenkante, zwei Haarlinien */
  content:''; position:absolute; inset:6px; border-radius:var(--r);
  border:1px solid rgb(var(--accent)/.28); pointer-events:none;
}
.panel-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0 .3rem .55rem; }
.panel-label{ font-family:'JetBrains Mono',monospace; font-size:var(--t-micro);
  letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--accent-deep)); }
.panel-dot{ width:7px; height:7px; border-radius:50%; background:rgb(var(--accent-strong));
  box-shadow:0 0 0 4px rgb(var(--accent-strong)/.18); animation:pulse 2.6s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgb(var(--accent-strong)/.16); }
                  50%{ box-shadow:0 0 0 7px rgb(var(--accent-strong)/.05); } }
@media (prefers-reduced-motion:reduce){ .panel-dot{ animation:none; } }
.hero-panel .instrument{ max-width:100%; margin:0; }
.panel-foot{ font-size:var(--t-micro); color:var(--muted); line-height:1.5;
  padding:.6rem .3rem 0; border-top:1px solid rgb(var(--line)/.1); margin-top:.4rem; }
@media(max-width:1039px){ .hero-panel{ max-width:26rem; margin-inline:auto; } }

.hero .scrollcue{ margin-top:1.6rem; }

/* ==========================================================================
   Mentor-Porträt — echtes Foto
   ========================================================================== */
.mentor-portrait{ margin:0; background:rgb(var(--navy)); }
.mentor-portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.mentor-portrait::after{
  content:''; position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(transparent,rgb(12 18 52/.82));
}
.portrait-tag{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.1rem clamp(1rem,2vw,1.5rem); display:grid; gap:.1rem; color:#fff;
}
.portrait-tag b{ font-family:'Space Grotesk',sans-serif; font-size:calc(var(--t-body)*1.15); }
.portrait-tag span{ font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:rgb(var(--accent)); }
.mentor-portrait .mono-init{ display:none; }

/* ---------- Hero-Feinabstimmung ----------
   Erste Fassung: H1 brach auf drei Zeilen (zu grosse clamp-Obergrenze bei zu
   enger Spalte) und die Türen standen zu hell im Bild. */
.hero h1{ font-size:clamp(2.4rem,3.1vw + 1.1vh,4.6rem); max-width:none; }
.hero-copy{ max-width:min(100%,52rem); }
@media(min-width:1040px){ .hero-grid{ grid-template-columns:1.42fr .58fr; } }

/* Material statt Dunst: mehr Zeichnung in Holz und Messing */
.hero-poster,.hero-film{ filter:contrast(1.07) saturate(1.06) brightness(.97); }

/* Schleier weiter nach rechts ziehen — der Text steht auf ruhigem Papier,
   das Türblatt bleibt rechts als Material sichtbar. */
.hero-veil{
  background:
    linear-gradient(100deg,
      var(--bg) 0%, var(--bg) 40%,
      color-mix(in srgb,var(--bg) 94%,transparent) 50%,
      color-mix(in srgb,var(--bg) 70%,transparent) 62%,
      color-mix(in srgb,var(--bg) 30%,transparent) 78%,
      color-mix(in srgb,var(--bg) 14%,transparent) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 24%),
    radial-gradient(56% 48% at 4% 2%, rgb(var(--accent)/.16), transparent 62%);
}
.hero-grid-lines{ opacity:.6; }

/* ---------- Abschluss-CTA auf dem eigenen Boardroom-Bild ----------
   Das Navy bleibt als Deckschicht: der Text steht nie direkt auf dem Foto.
   Kontrast wurde am tatsächlichen Bild geprüft, nicht an der Klasse. */
.final{ isolation:isolate; }
.final-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 42%; z-index:-2; filter:saturate(1.05) contrast(1.04);
}
.final::before{
  z-index:-1;
  background:
    linear-gradient(180deg, rgb(12 18 52/.90), rgb(12 18 52/.84) 55%, rgb(12 18 52/.94)),
    radial-gradient(60% 60% at 50% -10%, rgb(var(--accent)/.26), transparent 62%);
}

/* ==========================================================================
   HERO v3 — Diagnose-Paneel entfernt, Film sichtbar
   Ohne Glaspaneel trägt die Bühne allein. Der Schleier wird leichter als in v2,
   aber die Textspalte bleibt auf Papierton: Lesbarkeit steht über Bildanteil.
   Am tatsächlichen Bild geprüft — die Tür ist hell und goldstichig, ein zu
   dünner Schleier frisst genau die goldene Akzentzeile der H1.
   ========================================================================== */
.hero-grid{ display:block; }
@media(min-width:1040px){
  .hero-grid{ grid-template-columns:none; }
  .hero-copy{ max-width:min(100%,42rem); }
}

.hero-veil{
  background:
    linear-gradient(100deg,
      var(--bg) 0%,
      color-mix(in srgb,var(--bg) 97%,transparent) 34%,
      color-mix(in srgb,var(--bg) 84%,transparent) 46%,
      color-mix(in srgb,var(--bg) 46%,transparent) 62%,
      color-mix(in srgb,var(--bg) 14%,transparent) 80%,
      transparent 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 22%),
    radial-gradient(50% 44% at 4% 2%, rgb(var(--accent)/.12), transparent 62%);
}
@media(max-width:1039px){
  .hero-veil{
    background:
      linear-gradient(to bottom,
        color-mix(in srgb,var(--bg) 86%,transparent) 0%,
        color-mix(in srgb,var(--bg) 92%,transparent) 46%,
        var(--bg) 80%),
      radial-gradient(70% 40% at 50% 0%, rgb(var(--accent)/.12), transparent 62%);
  }
}
.hero-poster,.hero-film{ filter:contrast(1.08) saturate(1.04) brightness(.99); }
.hero-grid-lines{ opacity:.4; }
/* Alles im Hero bleibt in der gedeckten Spalte — sonst stehen Fussnote und
   Kennzahlen mitten auf dem Türblatt und sind nicht mehr lesbar. */
.hero-note{ max-width:34rem; }
.hero .cred{ max-width:38rem; }
@media(min-width:1040px){ .hero .cred{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2vw,2rem); } }