/* Schriften liegen auf dieser Website selbst (keine Anfrage an Google). SIL Open Font License, siehe fonts/. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-latin-opsz-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-latin-opsz-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-wght-normal.woff2) format("woff2")}
  /* Ein bewusst festgelegter Markenauftritt: Farben gelten unabhängig vom Viewer-Theme. */
  :root{
    --nacht:#0A1430; --tief:#16233F; --tief-2:#1F2F52; --linie-dunkel:rgba(201,164,92,.22);
    --gold:#C9A45C; --gold-hell:#F5C86B; --gold-dunkel:#B8863A;
    --akzent:#B8863A; --akzent-dunkel:#7D5A1F; --akzent-hell:#F6EBD3;
    --papier:#FAF8F4; --weiss:#FFFFFF; --slate-100:#F1EDE5; --slate-200:#E4DDD0;
    --tinte:#1E293B; --tinte-2:#475569; --tinte-3:#64748B;
    --auf-dunkel:#E6EAF2; --auf-dunkel-2:#98A3B1;
    --serif:"Fraunces", "Iowan Old Style", Georgia, serif;
    --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --max:1180px;
    color-scheme:light;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--papier);color:var(--tinte);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  img{max-width:100%;display:block}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--gold-hell);outline-offset:3px;border-radius:6px}
  .wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
  h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;text-wrap:balance;margin:0}
  .eyebrow{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}

  /* ---------- Buttons ---------- */
  .btn{display:inline-flex;align-items:center;gap:.55em;font:600 15px/1 var(--sans);text-decoration:none;border-radius:999px;padding:15px 24px;transition:transform .2s, background .2s, box-shadow .2s;cursor:pointer;border:0}
  .btn-gold{background:linear-gradient(180deg,#F7D489 0%,var(--gold) 100%);color:var(--nacht);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 10px 28px -10px rgba(201,164,92,.75)}
  .btn-gold:hover{background:linear-gradient(180deg,#FBE0A6 0%,#D6B26A 100%);transform:translateY(-1px)}
  .btn-ghost{color:var(--auf-dunkel);border:1px solid rgba(230,234,242,.25);background:transparent}
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold-hell)}
  .btn svg{width:16px;height:16px}

  /* ---------- Header ---------- */
  .kopf{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--nacht);border-bottom:1px solid var(--linie-dunkel)}
  .kopf .wrap{display:flex;align-items:center;gap:28px;height:68px}
  .marke{display:flex;align-items:center;gap:10px;text-decoration:none}
  .marke img{height:30px;width:auto}
  .wortmarke{font:700 22px/1 var(--sans);letter-spacing:-.01em;background:linear-gradient(100deg,var(--gold-dunkel) 0%,var(--gold-hell) 45%,#fff3d1 50%,var(--gold-hell) 55%,var(--gold) 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
  .nav{display:flex;gap:26px;margin-left:auto;align-items:center}
  .nav a{color:var(--auf-dunkel-2);text-decoration:none;font-size:15px;font-weight:500}
  .nav a:hover{color:var(--gold-hell)}
  .kopf .btn{padding:11px 18px;font-size:14px}
  .nav a.btn-gold,.nav a.btn-gold:hover{color:var(--nacht)}
  @media (max-width:760px){.nav a.opt{display:none}.kopf .wrap{gap:14px}.nav{gap:16px}}
  .kopf .btn .kurz{display:none}
  @media (max-width:440px){.kopf .btn .lang{display:none}.kopf .btn .kurz{display:inline}}

  /* ---------- Hero ---------- */
  .hero{position:relative;background:radial-gradient(1200px 600px at 78% 30%,#1b2c55 0%,transparent 60%),radial-gradient(700px 500px at 5% 100%,#13224a 0%,transparent 70%),var(--nacht);color:var(--auf-dunkel);overflow:hidden;isolation:isolate}
  .hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-hell) 50%,var(--gold) 70%,transparent)}
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(56px,8vw,104px) clamp(64px,8vw,112px)}
  /* Logo-Animation: freigestellter Läufer (animiertes WebP mit Alpha) direkt auf dem Hero-Grund */
  /* Ausschnitt reicht oben 40 px (bei 360 px Breite) weiter, damit der Kopf nie angeschnitten ist;
     der negative Rand gleicht das aus, sodass das fertige Logo an derselben Stelle steht */
  .logo-lauf{--lw:clamp(180px,18vw,240px);display:block;width:var(--lw);aspect-ratio:360/450;margin:calc(-22px - var(--lw) * 40 / 360) 0 14px -18px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);mask-image:linear-gradient(90deg,transparent 0,#000 14%)}
  .logo-lauf img{width:100%;height:100%;object-fit:contain;display:block}
  .hero .eyebrow{color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:22px}
  .hero .eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
  .hero h1{font-size:clamp(40px,5.4vw,68px);line-height:1.02;color:#fff;font-weight:400;font-variation-settings:"opsz" 144}
  .hero h1 em{font-style:italic;color:var(--gold-hell);font-weight:400}
  .hero .lead{font-size:clamp(17px,1.5vw,19px);color:var(--auf-dunkel-2);max-width:32em;margin:26px 0 34px}
  .hero .aktionen{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  .hero .klein{margin-top:18px;font-size:13.5px;color:var(--auf-dunkel-2);display:flex;flex-wrap:wrap;gap:6px 18px}
  .hero .klein span::before{content:"✓";color:var(--gold);margin-right:6px}

  .buehne{position:relative;max-width:100%}
  .buehne::before{content:"";position:absolute;inset:8% 6% -4%;background:radial-gradient(closest-side,rgba(245,200,107,.18),transparent);filter:blur(20px);z-index:-1}
  .buehne .tablet{will-change:transform}
  .hero .glanz{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(245,200,107,.08) 50%,transparent 60%);background-size:300% 100%;animation:sweep 9s ease-in-out infinite;z-index:-1}
  @keyframes sweep{0%,20%{background-position:100% 0}60%,100%{background-position:0 0}}
  @media (max-width:900px){
    .hero .wrap{grid-template-columns:1fr}
    /* Handy: Tablet direkt unter die Headline, Text und Buttons darunter */
    .hero .wrap{row-gap:0}
    .hero-text{display:contents}
    .buehne{order:1;margin:30px 0 34px}
    .hero .lead,.hero .aktionen,.hero .klein{order:2}
    .hero .lead{margin-top:0}
  }

  /* ---------- Tablet (nachgebaute App-Oberfläche) ---------- */
  /* Modernes Tablet: schmaler Displayrand, feiner Aluminiumrahmen, Glasreflex */
  .tablet{container-type:inline-size;position:relative;background:#0c0e13;border-radius:3.6cqw;padding:1cqw;
    box-shadow:0 0 0 .18cqw #3a404c,0 0 0 .32cqw #1b1f27,0 1px 0 .32cqw rgba(255,255,255,.08),0 46px 90px -34px rgba(0,0,0,.75)}
  .tablet::before{content:"";position:absolute;top:.35cqw;left:50%;width:.55cqw;height:.55cqw;margin-left:-.275cqw;border-radius:50%;background:#1d2330;box-shadow:inset 0 0 0 .1cqw #2b3342;z-index:2}
  .tablet .screen{position:relative;background:var(--papier);border-radius:2.7cqw;overflow:hidden;aspect-ratio:4/3;font-family:var(--sans);color:var(--tinte)}
  .tablet .screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(125deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 32%)}
  .app{position:absolute;inset:0;display:grid;grid-template-columns:24% 1fr;transition:opacity .5s ease, transform .5s ease}
  .app[aria-hidden="true"]{opacity:0;transform:translateY(2%);pointer-events:none}
  .app-seite{background:#fff;border-right:1px solid var(--slate-200);padding:3cqw 2.2cqw;display:flex;flex-direction:column;gap:1.2cqw}
  .app-seite .logo-mini{font:800 2.3cqw/1 var(--sans);color:var(--tinte);letter-spacing:-.02em;margin-bottom:1.6cqw}
  .app-seite .logo-mini b{color:var(--akzent-dunkel)}
  .app-person{display:flex;align-items:center;gap:1.2cqw;padding:1.1cqw 1.2cqw;border-radius:1.2cqw;font-size:1.55cqw;color:var(--tinte-2)}
  .app-person i{width:3.2cqw;height:3.2cqw;border-radius:50%;background:var(--slate-100);display:grid;place-items:center;font:600 1.3cqw/1 var(--sans);font-style:normal;color:var(--tinte-3);flex:none}
  .app-person.aktiv{background:var(--akzent-hell);color:var(--akzent-dunkel);font-weight:600}
  .app-person.aktiv i{background:var(--gold);color:var(--nacht)}
  .app-haupt{padding:3cqw 3.2cqw;display:flex;flex-direction:column;gap:1.8cqw;min-width:0}
  .app-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:2cqw}
  .app-kopf h4{margin:0;font:800 2.9cqw/1.15 var(--sans);letter-spacing:-.02em}
  .app-kopf small{display:block;font-size:1.5cqw;color:var(--tinte-3);margin-top:.6cqw}
  .chip{display:inline-block;font:600 1.3cqw/1 var(--sans);padding:.7cqw 1.2cqw;border-radius:99px;background:var(--slate-100);color:var(--tinte-2);white-space:nowrap}
  .chip.gold{background:var(--akzent-hell);color:var(--akzent-dunkel)}
  .app-btn{font:700 1.5cqw/1 var(--sans);background:linear-gradient(180deg,#F7D489,var(--gold));color:var(--nacht);padding:1.3cqw 2cqw;border-radius:1.4cqw;white-space:nowrap}
  .uebung{display:grid;grid-template-columns:6.5cqw 1fr auto;gap:1.6cqw;align-items:center;background:#fff;border:1px solid var(--slate-200);border-radius:1.6cqw;padding:1.1cqw}
  .uebung img{width:6.5cqw;height:6.5cqw;border-radius:1cqw;object-fit:cover}
  .uebung b{display:block;font-size:1.65cqw;font-weight:700;line-height:1.2}
  .uebung span{font-size:1.35cqw;color:var(--tinte-3)}
  .uebung .dosis{font:700 1.5cqw/1 var(--sans);color:var(--tinte);text-align:right;font-variant-numeric:tabular-nums}
  .uebung .dosis small{display:block;font-weight:500;color:var(--tinte-3);font-size:1.2cqw;margin-top:.5cqw}
  .uebung.neu{border-style:dashed;background:transparent;color:var(--akzent-dunkel);font:600 1.5cqw/1 var(--sans);grid-template-columns:1fr;text-align:center;padding:1.8cqw}
  /* Training */
  .training{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;flex:1;min-height:0}
  .training .bild{border-radius:1.8cqw;overflow:hidden;background:#f6efe2}
  .training .bild img{width:100%;height:100%;object-fit:cover}
  .saetze{display:flex;flex-direction:column;gap:1.2cqw}
  .satz{display:flex;justify-content:space-between;align-items:center;padding:1.4cqw 1.6cqw;border-radius:1.4cqw;border:1px solid var(--slate-200);background:#fff;font-size:1.6cqw;font-variant-numeric:tabular-nums}
  .satz .haken{width:3.2cqw;height:3.2cqw;border-radius:50%;border:.25cqw solid var(--slate-200)}
  .satz.fertig{background:var(--akzent-hell);border-color:transparent;color:var(--akzent-dunkel);font-weight:600}
  .satz.fertig .haken{background:var(--akzent);border-color:var(--akzent);position:relative}
  .satz.fertig .haken::after{content:"";position:absolute;left:32%;top:20%;width:25%;height:45%;border:solid #fff;border-width:0 .35cqw .35cqw 0;transform:rotate(45deg)}
  .satz.jetzt{border:.2cqw solid var(--akzent);font-weight:700}
  .fortschritt{height:1cqw;background:var(--slate-100);border-radius:99px;overflow:hidden;margin-top:auto}
  .fortschritt i{display:block;height:100%;width:45%;background:var(--akzent);border-radius:inherit}
  /* Verlauf */
  .kennzahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw}
  .kennzahl{background:#fff;border:1px solid var(--slate-200);border-radius:1.6cqw;padding:1.5cqw 1.8cqw}
  .kennzahl b{display:block;font:800 3cqw/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .kennzahl span{font-size:1.3cqw;color:var(--tinte-3)}
  .kennzahl b em{font-style:normal;color:var(--akzent-dunkel);font-size:1.7cqw;margin-left:.4cqw}
  .diagramm{background:#fff;border:1px solid var(--slate-200);border-radius:1.6cqw;padding:1.6cqw 1.8cqw;flex:1;min-height:0;display:flex;flex-direction:column}
  .diagramm .t{font:700 1.6cqw/1 var(--sans);display:flex;justify-content:space-between}
  .diagramm .t span{font-weight:500;color:var(--tinte-3);font-size:1.3cqw}
  .diagramm svg{width:100%;flex:1;min-height:0;margin-top:1cqw}

  /* ---------- Vertrauensleiste ---------- */
  .leiste{background:var(--tief);border-bottom:1px solid var(--linie-dunkel)}
  .leiste ul{list-style:none;margin:0;padding-block:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px}
  .leiste li{display:flex;align-items:center;gap:10px;color:var(--auf-dunkel);font-size:14.5px;font-weight:500}
  .leiste svg{width:18px;height:18px;color:var(--gold);flex:none}

  /* ---------- Abschnitte hell ---------- */
  .abschnitt{padding-block:clamp(72px,10vw,128px)}
  .kopfzeile{max-width:40rem;margin-bottom:clamp(40px,5vw,64px)}
  .kopfzeile .eyebrow{color:var(--akzent-dunkel);margin-bottom:16px;display:block}
  .kopfzeile h2{font-size:clamp(32px,4vw,50px);line-height:1.08;color:var(--tinte)}
  .kopfzeile h2 em{font-style:italic;color:var(--akzent-dunkel)}
  .kopfzeile p{font-size:18px;color:var(--tinte-2);margin:18px 0 0}

  .zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--slate-200)}
  .zahl{padding:32px 32px 8px 0}
  .zahl + .zahl{padding-left:32px;border-left:1px solid var(--slate-200)}
  .zahl b{display:block;font:400 clamp(56px,7vw,92px)/1 var(--serif);color:var(--tinte);letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 144}
  .zahl b small{font-size:.38em;color:var(--akzent-dunkel);font-family:var(--sans);font-weight:600;letter-spacing:0;margin-left:4px}
  .zahl h3{font:600 17px/1.3 var(--sans);margin:18px 0 8px;letter-spacing:0}
  .zahl p{margin:0;color:var(--tinte-2);font-size:15.5px;max-width:28ch}
  @media (max-width:760px){.zahlen{grid-template-columns:1fr}.zahl,.zahl + .zahl{padding:28px 0 20px;border-left:0}.zahl + .zahl{border-top:1px solid var(--slate-200)}}

  /* ---------- Tablet-Story ---------- */
  .story{background:linear-gradient(180deg,var(--papier),#F4EEE2)}
  .story-raster{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,72px);align-items:start}
  .story-tablet{position:sticky;top:calc(96px + env(safe-area-inset-top,0px))}
  .story-tablet .tablet{box-shadow:0 0 0 .18cqw #3a404c,0 0 0 .32cqw #1b1f27,0 50px 90px -40px rgba(15,23,42,.45)}
  .schritte{display:flex;flex-direction:column}
  .schritt{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding-block:24px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;opacity:.38;transition:opacity .4s}
  .schritt:first-child{min-height:48vh;justify-content:flex-start;padding-top:8vh}
  .schritt.aktiv{opacity:1}
  .schritt .nr{font:500 15px/1 var(--serif);font-style:italic;color:var(--akzent-dunkel);display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .schritt .nr::after{content:"";height:1px;width:40px;background:currentColor;opacity:.5}
  .schritt h3{font-size:clamp(26px,2.6vw,34px);line-height:1.12;margin-bottom:12px}
  .schritt p{margin:0;color:var(--tinte-2);font-size:16.5px;max-width:34ch}
  @media (max-width:900px){
    .story-raster{grid-template-columns:1fr}
    .story-tablet{top:calc(76px + env(safe-area-inset-top,0px));z-index:5}
    .schritt,.schritt:first-child{min-height:auto;padding:36px 0 8px;justify-content:flex-start}
    .schritte{position:relative;z-index:1}
  }

  /* ---------- Datenschutz (dunkel) ---------- */
  .schutz{background:radial-gradient(900px 500px at 90% 0%,#1d2f5b 0%,transparent 60%),var(--nacht);color:var(--auf-dunkel);position:relative;overflow:hidden}
  .schutz .kopfzeile .eyebrow{color:var(--gold)}
  .schutz .kopfzeile h2{color:#fff}
  .schutz .kopfzeile h2 em{color:var(--gold-hell)}
  .schutz .kopfzeile p{color:var(--auf-dunkel-2)}
  .schutz-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--linie-dunkel);border:1px solid var(--linie-dunkel);border-radius:22px;overflow:hidden}
  .schutz-punkt{background:var(--nacht);padding:32px 28px 36px;display:flex;flex-direction:column;gap:14px;transition:background .3s}
  .schutz-punkt:hover{background:#0e1a3c}
  .schutz-punkt svg{width:30px;height:30px;color:var(--gold)}
  .schutz-punkt h3{font-size:22px;color:#fff;line-height:1.2}
  .schutz-punkt p{margin:0;color:var(--auf-dunkel-2);font-size:15px}
  .schutz-punkt code{font:500 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--gold-hell);background:rgba(245,200,107,.08);padding:4px 7px;border-radius:6px;align-self:flex-start;margin-top:auto}
  @media (max-width:980px){.schutz-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:560px){.schutz-raster{grid-template-columns:1fr}}

  /* ---------- Gründerpreis ---------- */
  .gruender-banner{position:relative;overflow:hidden;border-radius:26px;padding:clamp(32px,5vw,56px);background:linear-gradient(135deg,#2a2210 0%,#15110a 55%,#231b0b 100%);color:#f7ecd4;display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:28px 48px;align-items:center;border:1px solid rgba(245,200,107,.35)}
  .gruender-banner::before{content:"";position:absolute;inset:-50% auto -50% -30%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,230,170,.22),transparent);transform:rotate(18deg);animation:blitz 5.5s ease-in-out infinite}
  @keyframes blitz{0%,55%{left:-30%}100%{left:130%}}
  .gruender-banner .eyebrow{color:var(--gold-hell)}
  .gruender-banner h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1;margin:14px 0 12px;color:#fff}
  .gruender-banner h2 em{color:var(--gold-hell)}
  .gruender-banner p{margin:0;color:#d8c9a5;max-width:44ch}
  .preis-mini{text-align:right;position:relative}
  .preis-mini .alt{display:block;font:500 15px/1 var(--sans);color:#b9a77f}
  .preis-mini b{display:block;font:400 64px/1 var(--serif);color:var(--gold-hell);letter-spacing:-.03em;margin:6px 0 16px;font-variant-numeric:tabular-nums}
  .preis-mini b small{font:500 16px/1 var(--sans);color:#d8c9a5;letter-spacing:0}
  .preis-mini a.link{color:#f7ecd4;font-weight:600;font-size:15px;text-underline-offset:4px}
  @media (max-width:720px){.gruender-banner{grid-template-columns:1fr}.preis-mini{text-align:left}}

  /* ---------- Gründer-Block ---------- */
  .person{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;max-width:920px}
  .portraet{width:clamp(140px,18vw,200px);aspect-ratio:4/5;border-radius:120px 120px 22px 22px;background:linear-gradient(160deg,var(--tief),var(--nacht));display:grid;place-items:center;color:var(--gold);font:italic 400 15px/1.3 var(--serif);text-align:center;padding:20px;border:1px solid var(--linie-dunkel);position:relative}
  .portraet::after{content:"Platzhalter";position:absolute;bottom:14px;font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--auf-dunkel-2);font-style:normal}
  .person blockquote{margin:0;font:400 clamp(22px,2.4vw,30px)/1.35 var(--serif);color:var(--tinte);text-wrap:pretty}
  .person blockquote em{color:var(--akzent-dunkel)}
  .person .wer{margin-top:20px;font-size:15px;color:var(--tinte-2);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
  .person .wer b{color:var(--tinte)}
  .mail{font:500 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--slate-100);padding:7px 10px;border-radius:8px;user-select:all}
  @media (max-width:620px){.person{grid-template-columns:1fr}}

  /* ---------- Abschluss & Fuß ---------- */
  .abschluss{background:var(--nacht);color:var(--auf-dunkel);text-align:center;position:relative;overflow:hidden}
  .abschluss .laeufer-gross{width:92px;margin:0 auto 26px;opacity:.95}
  .abschluss h2{font-size:clamp(34px,4.6vw,58px);line-height:1.05;color:#fff;max-width:16ch;margin-inline:auto}
  .abschluss h2 em{color:var(--gold-hell)}
  .abschluss p{color:var(--auf-dunkel-2);margin:18px auto 32px;max-width:40ch;font-size:17px}
  .fuss{background:#070e22;color:var(--auf-dunkel-2);font-size:14px}
  .fuss .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;padding-block:28px}
  .fuss nav{display:flex;gap:22px;flex-wrap:wrap}
  .fuss a{text-decoration:none}.fuss a:hover{color:var(--gold-hell)}

  /* ---------- Scroll-Einblendung (Ruhezustand bleibt sichtbar) ---------- */
  @supports (animation-timeline: view()){
    .rein{animation:rein linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes rein{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .buehne .tablet{transform:none!important}
  }

  /* =====================================================================
     Unterseiten (Funktionen, Preise)
     ===================================================================== */
  .nav a[aria-current="page"]{color:var(--gold-hell)}

  /* Seitenkopf: dunkel wie der Hero, aber ohne Bühne */
  .seitenkopf{background:radial-gradient(900px 480px at 85% 0%,#1b2c55 0%,transparent 60%),var(--nacht);color:var(--auf-dunkel);position:relative;overflow:hidden}
  .seitenkopf::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-hell) 50%,var(--gold) 70%,transparent)}
  .seitenkopf .wrap{padding-block:clamp(56px,8vw,96px) clamp(48px,7vw,80px)}
  .seitenkopf.mit-ueberlappung .wrap{padding-bottom:clamp(96px,12vw,150px)}
  .seitenkopf .eyebrow{color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:20px}
  .seitenkopf .eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
  .seitenkopf h1{font-size:clamp(38px,5vw,62px);line-height:1.04;color:#fff;font-weight:400;max-width:17ch;font-variation-settings:"opsz" 144}
  .seitenkopf h1 em{font-style:italic;color:var(--gold-hell)}
  .seitenkopf .lead{font-size:clamp(17px,1.5vw,19px);color:var(--auf-dunkel-2);max-width:36em;margin:22px 0 0}
  .sprungmarken{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0;padding:0;list-style:none}
  .sprungmarken a{display:inline-block;font:500 14px/1 var(--sans);color:var(--auf-dunkel);text-decoration:none;padding:10px 16px;border-radius:99px;border:1px solid rgba(230,234,242,.18)}
  .sprungmarken a:hover{border-color:var(--gold);color:var(--gold-hell)}

  /* Funktionsreihen: Text + Bild im Wechsel */
  .funktion{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:center;scroll-margin-top:90px}
  .funktion + .funktion{margin-top:clamp(80px,11vw,140px)}
  .funktion.gespiegelt > :first-child{order:2}
  .funktion .eyebrow{color:var(--akzent-dunkel);display:block;margin-bottom:14px}
  .funktion h2{font-size:clamp(30px,3.4vw,44px);line-height:1.1}
  .funktion h2 em{font-style:italic;color:var(--akzent-dunkel)}
  .funktion > div > p{font-size:17px;color:var(--tinte-2);margin:16px 0 0;max-width:36em}
  .haken-liste{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
  .haken-liste li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--tinte)}
  .haken-liste li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--akzent-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%237D5A1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;margin-top:1px}
  .haken-liste li span{color:var(--tinte-2)}
  @media (max-width:900px){.funktion{grid-template-columns:1fr}.funktion.gespiegelt > :first-child{order:0}}

  /* Katalog-Mosaik */
  .katalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .katalog figure{margin:0;background:#fff;border:1px solid var(--slate-200);border-radius:16px;overflow:hidden}
  .katalog img{width:100%;aspect-ratio:1;object-fit:cover;background:#f6efe2}
  .katalog figcaption{font:600 12.5px/1.3 var(--sans);padding:9px 11px 11px;color:var(--tinte)}
  .katalog figcaption span{display:block;font-weight:500;color:var(--tinte-3);font-size:11.5px;margin-top:2px}
  .katalog .mehr{display:grid;place-items:center;align-content:center;text-align:center;background:var(--nacht);border-color:var(--nacht);color:var(--gold-hell);font:400 44px/1 var(--serif);padding:12px}
  .katalog .mehr small{display:block;font:500 12.5px/1.35 var(--sans);color:var(--auf-dunkel-2);margin-top:8px}
  @media (max-width:560px){.katalog{grid-template-columns:repeat(2,minmax(0,1fr))}}

  /* Admin-Web-Skizze (Browserfenster) */
  .fenster{background:#fff;border:1px solid var(--slate-200);border-radius:16px;box-shadow:0 30px 70px -40px rgba(15,23,42,.45);overflow:hidden}
  .fenster-leiste{display:flex;align-items:center;gap:7px;padding:12px 14px;background:var(--slate-100);border-bottom:1px solid var(--slate-200)}
  .fenster-leiste i{width:10px;height:10px;border-radius:50%;background:var(--slate-200)}
  .fenster-leiste span{margin-left:12px;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tinte-3);background:#fff;padding:6px 10px;border-radius:6px;flex:1;max-width:260px}
  .fenster-inhalt{padding:22px;display:grid;gap:12px}
  .fenster-inhalt h4{margin:0 0 4px;font:700 16px/1.2 var(--sans)}
  .zeile{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 14px;border:1px solid var(--slate-200);border-radius:12px;font-size:14px}
  .zeile i{width:30px;height:30px;border-radius:50%;background:var(--akzent-hell);color:var(--akzent-dunkel);display:grid;place-items:center;font:700 11px/1 var(--sans);font-style:normal}
  .zeile small{display:block;color:var(--tinte-3);font-size:12px}
  .status{font:600 11.5px/1 var(--sans);padding:6px 9px;border-radius:99px;background:#E7F3EC;color:#276243;white-space:nowrap}
  .status.aus{background:var(--slate-100);color:var(--tinte-3)}
  .kopplung{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 18px;border-radius:12px;background:var(--nacht);color:var(--auf-dunkel);margin-top:4px}
  .kopplung b{font:500 24px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:var(--gold-hell)}
  .kopplung small{font-size:12.5px;color:var(--auf-dunkel-2)}

  /* Dunkles Band mit Datenschutz-Kurzfassung */
  .band{background:var(--nacht);color:var(--auf-dunkel)}
  .band .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(32px,6vw,80px);align-items:start;padding-block:clamp(64px,9vw,112px)}
  .band h2{color:#fff;font-size:clamp(30px,3.4vw,44px);line-height:1.1}
  .band h2 em{color:var(--gold-hell);font-style:italic}
  .band .eyebrow{color:var(--gold);display:block;margin-bottom:14px}
  .band dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px}
  .band dt{font:600 16px/1.3 var(--sans);color:#fff;margin-bottom:6px}
  .band dd{margin:0;color:var(--auf-dunkel-2);font-size:15px}
  @media (max-width:900px){.band .wrap{grid-template-columns:1fr}}
  @media (max-width:560px){.band dl{grid-template-columns:1fr}}

  .hinweis-fitness{margin-top:clamp(64px,8vw,96px);padding:24px 28px;border-radius:18px;background:var(--akzent-hell);color:var(--tinte)}
  .hinweis-fitness b{font-family:var(--serif);font-weight:500;font-size:21px}
  .hinweis-fitness p{margin:6px 0 0;color:var(--tinte-2);font-size:15.5px;max-width:60ch}

  /* ---------- Preise ---------- */
  .preis-raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,48px);align-items:start;margin-top:calc(-1 * clamp(64px,9vw,110px));position:relative;z-index:2}
  .preiskarte{background:#fff;border:1px solid var(--slate-200);border-radius:26px;padding:clamp(26px,4vw,44px);box-shadow:0 40px 80px -50px rgba(10,20,48,.55)}
  .preiskarte-kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
  .preiskarte-kopf h2{font-size:26px}
  .umschalter{display:inline-grid;grid-template-columns:auto auto;background:var(--slate-100);border-radius:99px;padding:4px}
  .umschalter button{font:600 14px/1 var(--sans);border:0;background:transparent;color:var(--tinte-2);padding:11px 16px;border-radius:99px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
  .umschalter button[aria-pressed="true"]{background:var(--nacht);color:#fff}
  .umschalter button small{font:inherit;font-size:12px;color:var(--akzent-dunkel);margin-left:6px}
  .umschalter button[aria-pressed="true"] small{color:var(--gold-hell)}
  .preis-gross{display:flex;align-items:baseline;gap:10px;margin:26px 0 6px;flex-wrap:wrap}
  .preis-gross b{font:400 clamp(64px,8vw,92px)/1 var(--serif);letter-spacing:-.035em;color:var(--tinte);font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 144}
  .preis-gross span{font-size:17px;color:var(--tinte-2)}
  .preis-unter{font-size:15px;color:var(--tinte-3);min-height:1.6em;margin:0}
  .preis-unter strong{color:var(--akzent-dunkel);font-weight:600}
  .preiskarte .btn{width:100%;justify-content:center;margin-top:26px;padding-block:17px;font-size:16px}
  .preiskarte .fein{font-size:13.5px;color:var(--tinte-3);text-align:center;margin:12px 0 0}
  .inklusive{border-top:1px solid var(--slate-200);margin-top:30px;padding-top:24px}
  .inklusive h3{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-3)}
  .inklusive .haken-liste{margin-top:18px}

  .seitenleiste{display:grid;gap:18px}
  .seitenleiste .gruender-banner{grid-template-columns:1fr;padding:30px 30px 32px;border-radius:22px}
  .seitenleiste .gruender-banner h2{font-size:28px;margin:12px 0 10px}
  .ruhe{background:#fff;border:1px solid var(--slate-200);border-radius:22px;padding:26px 28px}
  .ruhe-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
  .ruhe h3{font-size:24px}
  .ruhe .betrag{font:400 34px/1 var(--serif);color:var(--tinte);font-variant-numeric:tabular-nums}
  .ruhe .betrag small{font:500 14px/1 var(--sans);color:var(--tinte-3)}
  .ruhe p{margin:10px 0 0;color:var(--tinte-2);font-size:15px}
  .ruhe .eyebrow{color:var(--akzent-dunkel)}
  @media (max-width:900px){.preis-raster{grid-template-columns:1fr}}

  /* Zeitleiste Testphase */
  .zeitleiste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .zeitleiste li{position:relative;padding:34px 28px 0 0}
  .zeitleiste li::before{content:"";position:absolute;top:8px;left:0;right:0;height:2px;background:var(--slate-200)}
  .zeitleiste li::after{content:"";position:absolute;top:2px;left:0;width:14px;height:14px;border-radius:50%;background:var(--papier);border:2px solid var(--akzent)}
  .zeitleiste li:first-child::after{background:var(--akzent)}
  .zeitleiste .tag{font:500 15px/1 var(--serif);font-style:italic;color:var(--akzent-dunkel)}
  .zeitleiste h3{font-size:22px;margin:10px 0 8px}
  .zeitleiste p{margin:0;color:var(--tinte-2);font-size:15.5px;max-width:30ch}
  @media (max-width:760px){.zeitleiste{grid-template-columns:1fr}.zeitleiste li{padding:0 0 26px 32px}.zeitleiste li::before{top:0;bottom:0;left:6px;right:auto;width:2px;height:auto}.zeitleiste li:last-child::before{display:none}}

  /* FAQ */
  .faq{max-width:820px;border-top:1px solid var(--slate-200)}
  .faq details{border-bottom:1px solid var(--slate-200)}
  .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:500 clamp(19px,1.8vw,22px)/1.3 var(--serif);color:var(--tinte)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--slate-200);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M8 13h10M13 8v10' stroke='%237D5A1F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat;transition:transform .25s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details p{margin:0 0 22px;color:var(--tinte-2);font-size:16px;max-width:62ch}

  /* Katalog in schmaler Spalte: kürzere Beschriftung, Silbentrennung statt Abschneiden */
  .katalog-huelle{container-type:inline-size}
  .katalog figcaption{hyphens:manual;overflow-wrap:break-word}
  .katalog .mehr{font-size:clamp(26px,9cqw,44px)}
  @container (max-width:560px){
    .katalog{gap:8px}
    .katalog figcaption{font-size:11.5px;padding:7px 8px 9px}
    .katalog figcaption span{display:none}
    .katalog .mehr small{font-size:11px}
  }

  /* ---------- Rechtstexte (Impressum, Datenschutz, AGB & AVV) ---------- */
  .recht-raster{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
  .recht-inhalt{position:sticky;top:calc(96px + env(safe-area-inset-top,0px));font-size:14px}
  .recht-inhalt b{display:block;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-dunkel);margin-bottom:14px}
  .recht-inhalt ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--slate-200)}
  .recht-inhalt a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--tinte-2);text-decoration:none}
  .recht-inhalt a:hover{color:var(--akzent-dunkel);border-left-color:var(--gold)}
  .recht{max-width:44rem;font-size:16.5px;color:var(--tinte)}
  .recht h2{font-size:clamp(24px,2.4vw,30px);line-height:1.2;color:var(--tinte);margin:56px 0 14px;scroll-margin-top:100px}
  .recht h2:first-of-type{margin-top:0}
  .recht h3{font:600 17px/1.3 var(--sans);letter-spacing:0;margin:28px 0 8px}
  .recht p,.recht ul,.recht dl{margin:0 0 14px}
  .recht ul{padding-left:1.2em}
  .recht li{margin-bottom:6px}
  .recht a{color:var(--akzent-dunkel)}
  .recht address{font-style:normal;line-height:1.7}
  .recht dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 20px}
  .recht dt{color:var(--tinte-3)}
  .recht dd{margin:0}
  .recht .tabelle{overflow-x:auto;margin:0 0 14px}
  .recht table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
  .recht th,.recht td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--slate-200);vertical-align:top}
  .recht th{font-weight:600;color:var(--tinte-2);background:var(--slate-100)}
  .platzhalter{background:var(--akzent-hell);color:var(--akzent-dunkel);padding:1px 6px;border-radius:5px;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .entwurf-hinweis{display:flex;gap:14px;align-items:flex-start;background:#FFF8E8;border:1px solid #EAD7A8;border-radius:14px;padding:16px 18px;margin-bottom:44px;font-size:15px;color:#5B4318}
  .entwurf-hinweis svg{width:22px;height:22px;flex:none;margin-top:1px}
  .entwurf-hinweis p{margin:0}
  .stand{margin-top:48px;font-size:14px;color:var(--tinte-3)}
  .fuss a[aria-current="page"]{color:var(--gold-hell)}
  @media (max-width:860px){
    .recht-raster{grid-template-columns:1fr}
    .recht-inhalt{position:static}
  }

  /* ---------- Tablet-Mockup im echten App-Design ----------
     Entspricht der Logo-Edition der Tablet-App (apps/tablet, data-theme="logo"):
     Mitternachtsblau als Grund, Karten in #16233F, mattes Gold für Aktionen.
     Die Übungsbilder behalten ihre helle Kachel wie in der App. */
  .tablet .screen{
    --papier:#0b1020; --karte:#16233F; --slate-100:#111a2f; --slate-200:#2B3A5C;
    --tinte:#eef2f8; --tinte-2:#cbd5e1; --tinte-3:#98A3B1;
    --akzent:#d9b877; --akzent-dunkel:#e6c98a; --akzent-hell:#241c10;
    background:radial-gradient(120% 70% at 85% -10%,rgba(217,184,119,.09),transparent 60%),linear-gradient(160deg,#0b1020 0%,#0d1428 55%,#0a0f1c 100%)}
  .tablet .app-seite,.tablet .uebung,.tablet .satz,.tablet .kennzahl,.tablet .diagramm{background:var(--karte)}
  .tablet .uebung.neu{background:transparent;border-color:var(--slate-200)}
  .tablet .satz.fertig{background:var(--akzent-hell);border-color:transparent}
  .tablet .satz.fertig .haken::after{border-color:#1a1206}
  .tablet .uebung img,.tablet .training .bild{background:#f4efe2}
  .tablet .logo-mini,.tablet .logo-mini b{color:#c9a45c}
  .tablet .app-btn{background:#d9b877;color:#1a1206}
  .tablet .app-person.aktiv i{background:#d9b877;color:#1a1206}
  .tablet .kennzahl b em{color:var(--akzent)}
  /* Dunkler Bildschirm auf dunklem Hero: feiner Goldrand und warmer Schein trennen das Gerät vom Grund */
  .hero .tablet{box-shadow:0 0 0 .18cqw #4a5263,0 0 0 .32cqw #1b1f27,0 0 0 .5cqw rgba(201,164,92,.28),0 46px 90px -34px rgba(0,0,0,.8),0 0 120px -30px rgba(201,164,92,.35)}

  /* Gründerfoto */
  .portraet.foto{padding:0;overflow:hidden}
  .portraet.foto::after{content:none}
  .portraet.foto img{width:100%;height:100%;object-fit:cover;display:block}
  a.mail{color:inherit;text-decoration:none}