/* ══════════════════════════════════════════════════════════
   EbenFix Webinar — Designsystem
   Kühles Stahl-Off-White · Instrument Serif + Onest
   Ein Akzent: EbenFix-Blau #004F91
   ══════════════════════════════════════════════════════════ */

@font-face{font-family:Editorial;src:url(fonts/instrument-serif-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Editorial;src:url(fonts/instrument-serif-regular-ext.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+A720-A7FF}
@font-face{font-family:Editorial;src:url(fonts/instrument-serif-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Editorial;src:url(fonts/instrument-serif-italic-ext.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+A720-A7FF}
@font-face{font-family:Onest;src:url(fonts/onest-v6-latin-regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Onest;src:url(fonts/onest-v6-latin-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Onest;src:url(fonts/onest-v6-latin-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  /* Flächen — eine kühle Graufamilie, leicht blau getönt */
  --bg:#F1F3F4;
  --bg-2:#E6EAED;
  --surface:#FFFFFF;
  --deep:#0B1E2C;

  /* Text */
  --ink:#0E1A23;
  --ink-2:#3D4B55;
  --ink-3:#55636D;
  --on-deep:#EAF1F7;
  --on-deep-2:#A9BBCA;

  /* Ein Akzent */
  --accent:#004F91;
  --accent-h:#003C6F;
  --accent-soft:#8FC1EC;   /* nur auf --deep */
  --accent-tint:rgba(0,79,145,.08);

  /* Zustände */
  --err:#B3261E;

  /* Linien */
  --line:rgba(14,26,35,.14);
  --line-2:rgba(14,26,35,.08);
  --line-deep:rgba(234,241,247,.14);

  /* Schatten — blau getönt, eine Lichtquelle von oben */
  --sh-1:0 1px 2px rgba(11,30,44,.06);
  --sh-2:0 1px 2px rgba(11,30,44,.05),0 14px 36px -16px rgba(11,30,44,.22);
  --sh-3:0 2px 6px rgba(11,30,44,.06),0 40px 80px -30px rgba(11,30,44,.35);

  /* Radien — innen enger, außen weicher */
  --r-s:6px; --r-m:10px; --r-l:16px;

  /* Schrift */
  --sans:Onest,"Helvetica Neue",Arial,sans-serif;
  --serif:Editorial,"Iowan Old Style",Georgia,serif;

  /* Raster */
  --gut:clamp(1.25rem,5vw,4rem);
  --sec:clamp(4.5rem,9vw,8.5rem);

  /* Ebenen */
  --z-sticky:50; --z-dlg:100; --z-skip:110;

  --ease:cubic-bezier(.22,.68,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1.1rem;max-width:64ch;text-wrap:pretty}
b,strong{font-weight:700}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:.5rem;z-index:var(--z-skip);background:var(--accent);color:#fff;
  padding:.75rem 1.25rem;border-radius:var(--r-s);font-weight:500;text-decoration:none}
.skip:focus{left:.5rem}

.wrap{width:min(1200px,100% - var(--gut)*2);margin-inline:auto}
.wrap--mid{width:min(820px,100% - var(--gut)*2)}
.center{text-align:center;max-width:none}

/* ── Reveal (nur mit JS verborgen) ─────────────────────── */
.js .r{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .r.in{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}
.d4{transition-delay:.24s}.d5{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.js .r{opacity:1;transform:none;transition:none}}

/* ── Typografie ────────────────────────────────────────── */
h1,.h2,.facts__n,.calc__big b,.termin__datum,.dlg__t{font-family:var(--serif);font-weight:400}
h1{font-size:clamp(2.75rem,1.55rem + 3.9vw,4.9rem);line-height:.98;letter-spacing:-.02em;margin:0 0 1.4rem;text-wrap:balance}
.h2{font-size:clamp(2.05rem,1.35rem + 2.5vw,3.45rem);line-height:1.04;letter-spacing:-.015em;margin:0 0 1.4rem;text-wrap:balance}
.h2--lg{font-size:clamp(2.35rem,1.35rem + 3.4vw,4.3rem)}
.h2--c{text-align:center;margin-inline:auto}
h1 em,.h2 em,blockquote em{font-style:italic;color:var(--accent)}
p em{font-style:italic;color:var(--accent)}

.eyebrow{font-size:.875rem;font-weight:500;color:var(--accent);margin:0 0 1rem;letter-spacing:.005em;
  display:flex;align-items:center;gap:.65rem;max-width:none}
.eyebrow::before{content:"";width:1.25rem;height:1px;background:currentColor;opacity:.6}
.eyebrow--c{justify-content:center}

.lede{font-size:clamp(1.08rem,1rem + .4vw,1.28rem);line-height:1.6;color:var(--ink-2);max-width:44ch;margin:0 0 2rem}
.lede b{color:var(--ink)}
.sublede{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.65;color:var(--ink-2);max-width:52ch;margin:0}
.sublede b{color:var(--ink)}
.sublede--c{margin:0 auto 3rem;text-align:center}

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  font:500 1rem/1.3 var(--sans);text-decoration:none;white-space:nowrap;
  background:var(--accent);color:#fff;border:1px solid transparent;border-radius:var(--r-m);
  padding:1rem 1.5rem;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 8px 20px -10px rgba(0,60,111,.7);
  transition:background-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease),color .2s,border-color .2s;
}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.btn:hover{background:var(--accent-h);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 12px 26px -12px rgba(0,60,111,.8)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.btn:disabled{opacity:.6;cursor:progress;transform:none}
.btn--full{width:100%}
.btn--lg{padding:1.15rem 2.1rem;font-size:1.05rem}
.btn--sm{padding:.6rem 1rem;font-size:.9375rem;border-radius:var(--r-s);flex:none;box-shadow:none}
.btn--ghost{background:transparent;color:var(--accent);border-color:rgba(0,79,145,.35);box-shadow:none}
.btn--ghost:hover{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:none}
.btn--hell{background:#fff;color:var(--deep);box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.btn--hell:hover{background:#DCEBF8;color:var(--deep)}
.btn--hell:focus-visible{box-shadow:0 0 0 3px var(--deep),0 0 0 5px #fff}

/* ── Sticky-Leiste ─────────────────────────────────────── */
.stickybar{position:fixed;inset:0 0 auto;z-index:var(--z-sticky);background:rgba(11,30,44,.94);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  color:var(--on-deep);transform:translateY(-100%);transition:transform .35s var(--ease);
  border-bottom:1px solid var(--line-deep)}
.stickybar.is-on{transform:none}
.stickybar__in{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:.6rem 0}
.stickybar__t{margin:0;font-size:.9375rem;color:var(--on-deep-2);white-space:nowrap;max-width:none}
.stickybar__t b{color:#fff;font-weight:500}
.stickybar__t .sep{margin:0 .5rem;opacity:.5}
@media (max-width:860px){.stickybar__t{display:none}}

/* ── Kopf ──────────────────────────────────────────────── */
.topbar{padding:1.5rem 0 0}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;border-radius:var(--r-s)}
.brand__logo{height:44px;width:auto}
.topbar__meta{margin:0;font-size:.875rem;color:var(--ink-3);max-width:none}
@media (max-width:640px){.topbar__meta{display:none}.brand__logo{height:36px}}

/* ── Hero ──────────────────────────────────────────────── */
.hero{padding:clamp(2rem,4.5vw,3.5rem) 0 0}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:1000px){.hero__in{grid-template-columns:1fr;gap:2.5rem}}

.pill{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.5rem;padding:.4rem .85rem .4rem .7rem;
  border-radius:var(--r-s);background:var(--surface);box-shadow:var(--sh-1),0 0 0 1px var(--line-2) inset;
  font-size:.875rem;font-weight:500;color:var(--ink-2);max-width:none}
.pill b{color:var(--accent);font-weight:500}
.pill__dot{width:6px;height:6px;border-radius:2px;background:var(--accent);flex:none}
.pill__sep{width:1px;height:.9em;background:var(--line)}

/* Termin — kein Kasten, eine klare Zeile */
.termin{border-top:1px solid var(--line);padding-top:1.4rem;max-width:560px}
.termin__kopf{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:baseline;margin-bottom:1.1rem}
.termin__live{grid-row:span 2;align-self:start;margin-top:.45rem;font-size:.875rem;font-weight:500;color:var(--accent);
  background:var(--accent-tint);padding:.2rem .5rem;border-radius:4px;line-height:1.4}
.termin__datum{font-size:clamp(1.45rem,1.2rem + .8vw,1.8rem);line-height:1.15;margin:0;max-width:none}
.termin__zeit{margin:.15rem 0 0;font-size:.9375rem;color:var(--ink-2);max-width:none}
.termin__aktion{display:flex;align-items:stretch;gap:.75rem;flex-wrap:wrap}
.termin__aktion .btn{flex:1 1 200px}
.termin__fein{margin:.8rem 0 0;font-size:.875rem;color:var(--ink-3);max-width:none}
.cd__over{margin:.8rem 0 0;font-size:.9375rem;color:var(--ink-2);max-width:none}

.hero__media{margin:0;position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--bg-2);
  box-shadow:var(--sh-3);aspect-ratio:1/1.08}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:22% 50%}
.hero__media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.hero__tag{position:absolute;left:1rem;bottom:1rem;display:flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:.55rem .8rem;border-radius:var(--r-s);font-size:.875rem;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums}
.hero__tag span{color:var(--accent)}
@media (max-width:1000px){.hero__media{aspect-ratio:16/10;max-width:720px}}

/* Häkchen-Reihe unter dem Hero */
.ticks{list-style:none;margin:clamp(3rem,6vw,4.5rem) 0 0;padding:1.75rem 0 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem 2rem}
@media (max-width:1000px){.ticks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ticks{grid-template-columns:1fr}}
.ticks li{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
.ticks b{display:block;color:var(--ink);font-weight:500;margin-bottom:.1rem}
.tick{flex:none;width:18px;height:18px;border-radius:5px;background:var(--accent);position:relative;margin-top:.2em}
.tick::after{content:"";position:absolute;left:5px;top:5px;width:7px;height:4px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg)}

/* ── Sektionen ─────────────────────────────────────────── */
.sec{padding:var(--sec) 0}
.sec--tint{background:var(--bg-2)}

/* Ist-Zustand */
.sec--problem{padding-top:clamp(4rem,8vw,7rem)}
.problem{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,5.5rem);align-items:start}
@media (max-width:900px){.problem{grid-template-columns:1fr}}
.problem__kopf{position:sticky;top:6rem}
.problem__kopf .h2 br{display:none}
@media (max-width:900px){.problem__kopf{position:static}}
.beats{list-style:none;margin:.4rem 0 0;padding:0;border-top:1px solid var(--line)}
.beats li{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;align-items:baseline;padding:1.25rem 0;border-bottom:1px solid var(--line-2)}
.beats span{font-family:var(--serif);font-size:1.15rem;color:var(--accent);font-variant-numeric:tabular-nums}
.beats p{margin:0;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:var(--ink-2);max-width:none}
.beats b{color:var(--ink)}

.quote{margin:0;padding:0}
.quote blockquote{margin:0 0 1rem;font-family:var(--serif);font-size:clamp(1.55rem,1.05rem + 1.8vw,2.5rem);
  line-height:1.3;letter-spacing:-.01em;color:var(--ink);max-width:28ch;text-wrap:balance}
.quote figcaption{font-size:.9375rem;line-height:1.6;color:var(--ink-3);max-width:48ch}
.quote figcaption b{color:var(--ink)}
.quote--forum{grid-column:1/-1;margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.quote--forum blockquote{max-width:24ch;font-size:clamp(1.8rem,1.1rem + 2.6vw,3.1rem)}
.quote--sm blockquote{font-size:clamp(1.35rem,1rem + 1.1vw,1.85rem);max-width:30ch}

/* Ursache */
.kopf-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.5rem clamp(2rem,6vw,5rem);align-items:end;
  margin-bottom:clamp(3rem,6vw,4.5rem)}
@media (max-width:900px){.kopf-split{grid-template-columns:1fr}}
.kopf-split .h2{margin:0}

.seq{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2.2vw,2rem);
  position:relative;counter-reset:s}
.seq::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--line)}
.seq__s{position:relative;padding-top:2rem}
.seq__s::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;
  background:var(--bg-2);box-shadow:0 0 0 1.5px var(--ink-3)}
.seq__s--key::before{background:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.seq__viz{margin:0 0 1rem;padding:.5rem .25rem;border-radius:var(--r-m);background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px var(--line-2) inset}
.seq__s--key .seq__viz{background:var(--surface);box-shadow:0 0 0 1.5px var(--accent) inset,var(--sh-2)}
.seq h3{font-size:1rem;font-weight:500;line-height:1.35;margin:0 0 .4rem;display:flex;gap:.5rem;align-items:baseline}
.seq h3 i{font-family:var(--serif);font-style:normal;font-size:1rem;color:var(--accent)}
.seq p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.seq b{color:var(--ink)}
@media (max-width:1060px){
  .seq{grid-template-columns:1fr 1fr;row-gap:2.5rem}
  .seq::before{display:none}
}
@media (max-width:600px){
  .seq{grid-template-columns:1fr;row-gap:0;padding-left:1.75rem}
  .seq::before{display:block;left:5px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .seq__s{padding:0 0 2rem}
  .seq__s::before{left:-1.75rem;top:.35rem}
}

svg{width:100%;height:auto;display:block}
.ln{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 4;opacity:.55;fill:none}
.ln--ref{stroke:var(--accent);stroke-dasharray:5 4;opacity:.8}
.plate{fill:#A8B7C1;stroke:#6C7E8A;stroke-width:.9}
.plate--fail{fill:#EBCFCB;stroke:var(--err)}
.mag{fill:#D5DDE2;stroke:#97A7B1;stroke-width:.9}
.mag--off{fill:#EEF1F3;stroke-dasharray:4 4;opacity:.8}
.wheel{fill:none;stroke:#6C7E8A;stroke-width:1.8}
.spark{stroke:var(--accent);stroke-width:1.3;stroke-linecap:round;fill:none}
.arw{stroke:var(--accent);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dim{stroke:var(--err);stroke-width:1.3;fill:none;stroke-linecap:round}
.in .pull .arw{animation:press 2.6s cubic-bezier(.4,0,.3,1) infinite}
.in .pull .arw:nth-child(2){animation-delay:.12s}
.in .pull .arw:nth-child(3){animation-delay:.24s}
@keyframes press{0%,62%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(4px);opacity:1}}
.in .wheel{animation:spin 3.4s linear infinite;transform-origin:100px 42px}
@keyframes spin{to{transform:rotate(360deg)}}
.plate--spring{transform-origin:100px 82px}
.in .plate--spring{animation:rueckfedern 3s cubic-bezier(.22,.68,.3,1) infinite}
@keyframes rueckfedern{0%,55%{transform:scaleY(.5) translateY(9px)}72%,100%{transform:scaleY(1) translateY(0)}}
@media (prefers-reduced-motion:reduce){.in .pull .arw,.in .wheel,.in .plate--spring{animation:none}}

.beleg{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:2rem clamp(2rem,6vw,5rem);align-items:end;
  margin-top:clamp(3.5rem,7vw,5.5rem);padding-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--line)}
@media (max-width:900px){.beleg{grid-template-columns:1fr}}
.aside{margin:0;padding-top:1rem;border-top:1px solid var(--line);font-size:1rem;color:var(--ink-2);max-width:44ch}
.aside b{color:var(--ink)}

/* Ansatz */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
@media (max-width:920px){.split{grid-template-columns:1fr}}
.split__c>p{color:var(--ink-2)}
.split__c b{color:var(--ink)}
.specs{margin:2.2rem 0 0;border-top:1px solid var(--line)}
.specs>div{display:grid;grid-template-columns:minmax(8.5rem,auto) 1fr;gap:.25rem 1.5rem;align-items:baseline;padding:.9rem 0;border-bottom:1px solid var(--line-2)}
.specs dt{font-family:var(--serif);font-size:1.2rem;color:var(--accent);font-variant-numeric:tabular-nums}
.specs dd{margin:0;font-size:.9375rem;color:var(--ink-2)}
@media (max-width:520px){.specs>div{grid-template-columns:1fr}}

.bild{margin:0}
.bild img{width:100%;border-radius:var(--r-m);background:var(--bg-2);box-shadow:var(--sh-1)}
.bild figcaption{margin-top:.6rem;font-size:.875rem;line-height:1.5;color:var(--ink-3)}
.bild--gross img{aspect-ratio:16/10;object-fit:cover;object-position:45% 50%;border-radius:var(--r-l);box-shadow:var(--sh-2)}
.bild-paar{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.bild-paar img{aspect-ratio:4/3;object-fit:cover}

/* Beweis */
.facts{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2.5rem clamp(2.5rem,6vw,5rem);margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:900px){.facts{grid-template-columns:1fr}}
.facts h3{font-size:1.0625rem;font-weight:500;margin:0 0 .5rem;color:var(--ink)}
.facts p{font-size:.9375rem;line-height:1.65;color:var(--ink-2);margin:0 0 .6rem;max-width:46ch}
.facts p.facts__n{font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem);line-height:1;letter-spacing:-.02em;color:var(--ink);
  margin:0 0 .9rem;max-width:none;font-variant-numeric:tabular-nums}
.facts p.facts__n--sm{font-size:clamp(1.45rem,1.15rem + 1vw,1.9rem);line-height:1.15}
.facts__n i{font-style:normal;color:var(--accent)}
.facts p.facts__s{font-size:.875rem;color:var(--ink-3);margin:.9rem 0 0}
.facts__haupt{padding-top:1.6rem;border-top:2px solid var(--accent)}
.facts__haupt p.facts__n{font-size:clamp(3.2rem,2rem + 4.6vw,6.2rem);letter-spacing:-.035em;margin-bottom:1.4rem;color:var(--accent)}
.facts__haupt p.facts__n i{color:var(--ink-3)}
.facts__haupt h3{font-size:1.25rem}
.facts__haupt p{font-size:1.0625rem;max-width:40ch}
.facts__neben{display:grid;gap:0}
.facts__neben article{padding:1.4rem 0;border-top:1px solid var(--line)}
.facts__neben article:first-child{padding-top:1.6rem}

.mid-cta{margin-top:clamp(3rem,6vw,4.5rem);padding-top:2rem;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem 2.5rem;flex-wrap:wrap}
.mid-cta p{margin:0;color:var(--ink-2);font-size:1.0625rem;max-width:48ch}
.mid-cta b{color:var(--accent);font-weight:500}

/* Rechner */
.calc{background:var(--surface);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-3),0 0 0 1px var(--line-2)}
.calc__in{display:grid;grid-template-columns:repeat(3,1fr)}
@media (max-width:680px){.calc__in{grid-template-columns:1fr}}
.calc__in label{padding:1.35rem 1.5rem 1.2rem;display:grid;gap:.45rem;border-right:1px solid var(--line-2);cursor:text}
.calc__in label:last-child{border-right:0}
@media (max-width:680px){.calc__in label{border-right:0;border-bottom:1px solid var(--line-2)}}
.calc__in label>span{font-size:.875rem;font-weight:500;color:var(--ink-2)}
.calc__f{display:flex;align-items:baseline;gap:.4rem;border-bottom:1.5px solid var(--line);font-style:normal;transition:border-color .2s}
.calc__f:focus-within{border-color:var(--accent)}
.calc__f input{font-family:var(--serif);font-size:2.1rem;color:var(--ink);border:0;background:none;width:100%;
  padding:.1rem 0;-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.calc__f input:focus{outline:none}
.calc__f input::-webkit-outer-spin-button,.calc__f input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc__f u{text-decoration:none;font-size:.875rem;color:var(--ink-3);flex:none}
.calc__out{background:var(--deep);color:var(--on-deep);padding:clamp(1.25rem,3vw,1.9rem) clamp(1.25rem,3vw,1.9rem) 1.4rem}
.calc__out>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line-deep)}
.calc__out span{font-size:.9375rem;color:var(--on-deep-2)}
.calc__out b{font-size:1.3rem;font-weight:400;font-family:var(--serif);color:#fff;font-variant-numeric:tabular-nums}
.calc__out>div.calc__big{border-bottom:0;padding-top:1.1rem}
.calc__big span{color:#fff;font-weight:500}
.calc__big b{font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem);line-height:1;color:var(--accent-soft)}
.calc__note{margin:0;padding:1rem 1.5rem;background:var(--bg);font-size:.875rem;line-height:1.6;color:var(--ink-2);max-width:none}
.calc__note b{color:var(--ink)}

/* Ablauf */
.ablauf{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5.5rem);align-items:start}
@media (max-width:900px){.ablauf{grid-template-columns:1fr}}
.ablauf__kopf{position:sticky;top:6rem}
@media (max-width:900px){.ablauf__kopf{position:static}}
.flow{list-style:none;margin:0;padding:0}
.flow li{position:relative;padding:0 0 2.2rem 3.75rem}
.flow li::before{content:"";position:absolute;left:1.05rem;top:2.6rem;bottom:.4rem;width:1px;background:var(--line)}
.flow li:last-child{padding-bottom:0}
.flow li:last-child::before{display:none}
.flow i{position:absolute;left:0;top:0;width:2.15rem;height:2.15rem;border-radius:50%;background:var(--surface);
  box-shadow:0 0 0 1px var(--line) inset;color:var(--accent);font-family:var(--serif);font-style:normal;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center}
.flow h3{margin:.3rem 0 .35rem;font-size:1.25rem;font-weight:500;line-height:1.35;letter-spacing:-.005em}
.flow p{margin:0;font-size:1rem;color:var(--ink-2);max-width:50ch}

/* Sprecher */
.speaker{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
@media (max-width:900px){.speaker{grid-template-columns:1fr}}
.speaker__bilder{display:grid;gap:1.25rem}
.speaker__bilder .bild:first-child img{aspect-ratio:4/4.3;object-fit:cover;object-position:50% 30%;border-radius:var(--r-l);box-shadow:var(--sh-2)}
.bild--klein{display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;align-items:center}
.bild--klein img{aspect-ratio:4/3;object-fit:cover}
.bild--klein figcaption{margin:0}
@media (max-width:900px){.speaker__bilder{max-width:520px}}
.speaker__c>p{color:var(--ink-2)}
.speaker__c b{color:var(--ink)}
.speaker__c .quote{margin:2rem 0}
.video{margin-top:2.4rem}
.video__k{margin:0 0 .7rem;font-size:.875rem;font-weight:500;color:var(--ink-2);max-width:none}
.video video{color:var(--on-deep);width:100%;border-radius:var(--r-l);background:var(--deep);box-shadow:var(--sh-2)}

/* Passung */
.fit{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,4.5rem);margin-top:.5rem}
@media (max-width:840px){.fit{grid-template-columns:1fr}}
.fit__c h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem);line-height:1.15;
  margin:0 0 1.4rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.fit__c ul{list-style:none;margin:0;padding:0;display:grid;gap:.95rem}
.fit__c li{font-size:1rem;line-height:1.6;color:var(--ink-2);padding-left:1.75rem;position:relative}
.fit__c b{color:var(--ink)}
.yes li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:4px;background:var(--accent-tint)}
.yes li::after{content:"";position:absolute;left:4px;top:calc(.45em + 4px);width:6px;height:3px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}
.no li::before{content:"";position:absolute;left:2px;top:.8em;width:10px;height:1.5px;background:var(--ink-3)}
.fit__c--no h3{color:var(--ink-2)}

/* FAQ */
.faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5.5rem);align-items:start}
@media (max-width:900px){.faq-layout{grid-template-columns:1fr}}
.faq-layout__kopf{position:sticky;top:6rem}
@media (max-width:900px){.faq-layout__kopf{position:static}}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer;list-style:none;padding:1.25rem 3rem 1.25rem 0;position:relative;border-radius:4px;
  font-size:clamp(1.02rem,1rem + .2vw,1.125rem);font-weight:500;line-height:1.4;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after,.faq summary::before{content:"";position:absolute;right:.5rem;top:50%;width:13px;height:1.5px;background:currentColor;transition:transform .25s var(--ease),opacity .25s}
.faq summary::before{transform:rotate(90deg)}
.faq details[open] summary{color:var(--accent)}
.faq details[open] summary::before{transform:rotate(0);opacity:0}
.faq details p{margin:0 0 1.4rem;padding-right:2rem;color:var(--ink-2);font-size:1rem;max-width:62ch;animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.faq details p{animation:none}}

/* Anmeldung — Übergang in den dunklen Fuß */
.signup{background:var(--deep);color:var(--on-deep);padding-bottom:clamp(4rem,8vw,6.5rem);
  background-image:radial-gradient(60% 80% at 50% 0%,rgba(0,79,145,.35),transparent 70%)}
.signup__in{text-align:center}
.signup .eyebrow{color:var(--accent-soft)}
.signup .h2{color:#fff;max-width:18ch}
.signup .h2 em{color:var(--accent-soft)}
.signup p{margin-inline:auto}
.signup__d{font-size:1.0625rem;color:var(--on-deep-2);margin-bottom:2.2rem}
.signup__d b{color:#fff;font-weight:500}

/* Countdown */
.cd{display:flex;gap:.4rem}
.cd>div{min-width:3.9rem;background:var(--surface);border-radius:var(--r-s);padding:.55rem .5rem .5rem;text-align:center;
  box-shadow:0 0 0 1px var(--line-2) inset}
.cd b{display:block;font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.cd span{display:block;margin-top:.3rem;font-size:.75rem;line-height:1.3;color:var(--ink-3)}
.cd.is-over{opacity:.5}
@media (max-width:420px){.cd>div{min-width:0;flex:1}.cd b{font-size:1.45rem}}

.cd--big{justify-content:center;gap:.6rem;margin:0 auto 2.4rem;max-width:520px}
.cd--big>div{flex:1;background:rgba(234,241,247,.06);box-shadow:0 0 0 1px var(--line-deep) inset;padding:1rem .5rem .85rem;border-radius:var(--r-m)}
.cd--big b{font-size:clamp(2.1rem,1.5rem + 2vw,3rem);color:#fff}
.cd--big span{font-size:.875rem;color:var(--on-deep-2)}

.cd--mini{gap:.9rem;align-items:baseline}
.cd--mini>span{white-space:nowrap;font-size:.75rem;color:var(--on-deep-2)}
.cd--mini b{display:inline;font-size:1rem;font-weight:500;font-family:var(--sans);color:#fff;margin-right:.2rem;font-variant-numeric:tabular-nums}
@media (max-width:420px){.cd--mini{gap:.55rem}}

.trust{list-style:none;margin:2.6rem auto 0;padding:1.6rem 0 0;border-top:1px solid var(--line-deep);max-width:760px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2rem}
.trust li{font-size:.875rem;color:var(--on-deep-2)}
.trust b{color:#fff;font-weight:500}

/* ── Fuß ───────────────────────────────────────────────── */
.foot{background:var(--deep);color:var(--on-deep-2);padding:0 0 2.2rem;font-size:.9375rem}
.foot__in{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-top:2.6rem;border-top:1px solid var(--line-deep)}
@media (max-width:760px){.foot__in{grid-template-columns:1fr}}
.foot__k{font-size:.875rem;font-weight:500;color:#fff;margin:0 0 .6rem}
.foot p{margin:0 0 .5rem;line-height:1.75;max-width:none}
.foot b{color:#fff;font-weight:500}
.foot a{color:var(--on-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(234,241,247,.3);transition:text-decoration-color .2s,color .2s}
.foot a:hover{color:#fff;text-decoration-color:#fff}
.foot a:focus-visible{outline-color:#fff}
.foot__fine{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line-deep);display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;align-items:flex-end}
.foot__fine p{font-size:.875rem;line-height:1.65;color:var(--on-deep-2);max-width:84ch;margin:0}
.foot__cr{flex:none}

/* ── Dialog ────────────────────────────────────────────── */
.dlg{position:fixed;inset:0;z-index:var(--z-dlg);display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,2.5rem);background:rgba(11,30,44,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s var(--ease);overflow-y:auto}
.dlg.is-open{opacity:1}
.dlg[hidden]{display:none}
.dlg__box{background:var(--surface);border-radius:var(--r-l);width:min(480px,100%);padding:clamp(1.5rem,4vw,2.25rem);
  position:relative;box-shadow:var(--sh-3);transform:translateY(12px) scale(.985);transition:transform .28s var(--ease);margin:auto}
.dlg.is-open .dlg__box{transform:none}
@media (prefers-reduced-motion:reduce){.dlg,.dlg__box{transition:none}}
.dlg__x{position:absolute;top:.9rem;right:.9rem;width:36px;height:36px;border:0;border-radius:50%;background:var(--bg);
  cursor:pointer;display:grid;place-items:center;transition:background .2s}
.dlg__x:hover{background:var(--bg-2)}
.dlg__x:active{transform:scale(.95)}
.dlg__x svg{width:14px;height:14px;fill:none;stroke:var(--ink-2);stroke-width:1.8;stroke-linecap:round}
.dlg__k{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .75rem;font-size:.875rem;font-weight:500;color:var(--accent);max-width:none}
.dlg__t{font-size:clamp(1.8rem,1.5rem + 1vw,2.3rem);line-height:1.08;margin:0 0 .5rem;letter-spacing:-.012em}
.dlg__d{margin:0 0 1.5rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line-2);font-size:.9375rem;color:var(--ink-2);max-width:none}
.dlg__d b{color:var(--ink);font-weight:500}

.form{display:grid;gap:.9rem}
.form label{display:grid;gap:.35rem}
.form label>span{font-size:.875rem;font-weight:500;color:var(--ink-2)}
.form input,.form select{font:400 1rem/1.4 var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-s);padding:.8rem .9rem;width:100%;transition:border-color .2s,box-shadow .2s,background-color .2s}
.form input::placeholder{color:#6F7C85}
.form input:hover,.form select:hover{border-color:rgba(14,26,35,.26)}
.form input:focus,.form select:focus{outline:none;background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.form input:user-invalid,.form select:user-invalid{border-color:var(--err)}
.form select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.6rem}
.form .btn{margin-top:.35rem}
.form__note{font-size:.875rem;line-height:1.55;color:var(--ink-3);margin:.25rem 0 0;max-width:none}
.form__note a{color:var(--ink-2)}
.form__err{margin:0;padding:.7rem .85rem;background:rgba(179,38,30,.07);border-radius:var(--r-s);
  font-size:.875rem;color:#8E1F18;max-width:none}

.dlg__ok{text-align:center}
.dlg__haken{display:block;width:56px;height:56px;margin:.5rem auto 1.2rem;border-radius:50%;background:var(--accent-tint);position:relative}
.dlg__haken::after{content:"";position:absolute;left:19px;top:18px;width:16px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.dlg__ok p{margin:0 auto 1.5rem;font-size:.9375rem;color:var(--ink-2);max-width:36ch}
.dlg__termin{margin:0 0 1.5rem;text-align:left;border-top:1px solid var(--line-2)}
.dlg__termin>div{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line-2)}
.dlg__termin dt{font-size:.875rem;color:var(--ink-3)}
.dlg__termin dd{margin:0;font-size:.9375rem;color:var(--ink)}

/* Feinschliff */
#rechner .center{margin:2.25rem 0 0}
.ablauf__kopf .h2 br{display:none}
.ablauf__kopf .sublede{margin-top:.25rem}

/* Mobil */
@media (max-width:560px){
  .btn{white-space:normal;text-align:center;line-height:1.3}
  .termin__aktion .cd{flex:1 1 100%}
  .cd>div{flex:1;min-width:0;padding-inline:.25rem}
  .termin__kopf{grid-template-columns:1fr}
  .termin__live{grid-row:auto;justify-self:start;margin:0 0 .5rem}
  .stickybar__in{gap:.6rem}
  .cd--mini{gap:.5rem}
  .cd--mini>span{font-size:.75rem}
  .cd--mini b{font-size:.9375rem;margin-right:.1rem}
  .hero__media{aspect-ratio:4/3}
  .bild--klein{grid-template-columns:7rem 1fr}
}
@media (max-width:380px){
  .cd--mini>span:last-child{display:none}
}

/* ─────────── Mobil: Touch-Flächen und kleine Displays ───────────
   Gemessen am 30.09.2026 bei 375×812 und 375×667.
   Apple und Google nennen 44 px als kleinste sichere Antippfläche;
   darunter lagen die Leisten-Schaltfläche (41), das Dialog-Kreuz (36)
   und die Logo-Verknüpfung (36).                                   */
@media (hover:none),(pointer:coarse){

  /* Schaltfläche in der mitlaufenden Leiste */
  .btn--sm{min-height:44px;padding-block:.65rem}

  /* Kreuz im Anmeldedialog */
  .dlg__x{width:44px;height:44px;top:.65rem;right:.65rem}

  /* Logo oben links: Bild bleibt klein, die Trefferfläche wächst */
  .brand{min-height:44px}

  /* Aufklapper der FAQ */
  .faq summary{min-height:44px;display:flex;align-items:center}

  /* Verweise im Fuß liegen als Zeilen untereinander und waren
     nur 19 px hoch — hier bekommen sie Luft, ohne den Satz zu sprengen */
  .foot p a{display:inline-block;padding-block:.8rem}
}

/* Kleine Telefone (iPhone SE und ähnlich): Termin, Countdown und
   Schaltfläche lagen 104 px unter der Falz. Die Abstände im Kopf
   werden nur hier gestrafft, das Layout bleibt unverändert. */
@media (max-width:560px) and (max-height:700px){
  .hero{padding-top:1.25rem}
  .hero__copy .pill{margin-bottom:1rem}
  .hero__copy h1{margin-bottom:.9rem}
  .hero__copy .lede{margin-bottom:1.35rem}
  .hero__in{gap:1.75rem}
  .termin{padding-top:1.25rem}
  .termin__aktion{margin-top:1rem}
}