/* Schriften: selbst gehostet, auf Latein/Deutsch reduziert, variabel. */
/* Die @font-face-Regeln stehen in marke.css, damit die Schriften
   dort neben den Farben an einer Stelle liegen. */

/* ─────────────────────────────────────────────────────────────
   VARIANTE D: nach dem Vorbild fora.so
   Ruhiges Dunkel, zweifarbige Überschriften (hell, dann grau),
   Pill-Etiketten, große runde Flächen.
   Zwei Bühnen bleiben beim Scrollen stehen und hellen Zeile für
   Zeile auf. Bewegung ist überall dezent und fällt bei reduzierter
   Bewegung ganz weg.
   ───────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;--kopf-h:78px;--licht-rgb:232,132,90;--auf-licht:#2A1109;
  --grund:#100C0A;
  --flaeche:#17120F;
  --flaeche-hoch:#1F1814;
  --kante:rgba(244,236,228,.09);
  --kante-hell:rgba(244,236,228,.16);

  --creme:#F4ECE4;
  --text:#C3B7AD;
  --grau:#958A82;
  --grau-tief:#4A413B;

  --licht:#E8845A;
  --licht-hell:#F6B491;
  --moos:#7FA98A;

  --titel:"Bricolage Grotesque","Figtree","Helvetica Neue",Arial,sans-serif;
  --schrift:"Figtree","Helvetica Neue",Arial,sans-serif;

  --rund:22px;
  --rund-klein:14px;
  --bund:clamp(1.25rem,5vw,4rem);
  --schatten:0 1px 1px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35),0 40px 80px rgba(0,0,0,.3);
  --weich:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--grund);color:var(--creme);font-family:var(--schrift);
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.menue-offen{overflow:hidden}
h1,h2,h3{margin:0;font-family:var(--titel);font-weight:600;text-wrap:balance}
p{margin:0}
figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
::selection{background:var(--licht);color:var(--grund)}
:focus-visible{outline:2px solid var(--licht-hell);outline-offset:3px}
.sprung{position:fixed;left:1rem;top:-4rem;z-index:100;padding:.7rem 1.1rem;border-radius:999px;background:var(--creme);color:#1A120E;font-weight:600;text-decoration:none;transition:top .2s}
.sprung:focus{top:1rem}
#oben{position:absolute;top:0;left:0;width:1px;height:12px;pointer-events:none}

.innen{max-width:76rem;margin:0 auto;padding:0 var(--bund);position:relative}
.feld{padding:clamp(3.5rem,7vw,5.5rem) 0;position:relative}

/* ── Überschriften: erster Teil hell, zweiter Teil grau ──────── */
.zwei{color:var(--grau)}

.pill{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:500;color:var(--text);
  padding:.35rem .9rem;border-radius:999px;background:rgba(244,236,228,.06);box-shadow:inset 0 0 0 1px var(--kante-hell)}
.pill::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--licht)}
.titel{font-size:clamp(2rem,4.2vw,3.3rem);line-height:1.06;letter-spacing:-.035em;max-width:20ch;padding-bottom:.08em}
.text{font-size:1.0625rem;line-height:1.7;color:var(--text);max-width:38rem}
.text strong{color:var(--creme);font-weight:600}
.fein{font-size:.8125rem;line-height:1.6;color:var(--grau);max-width:38rem}
.kopf-block{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.kopf-block.mitte{align-items:center;text-align:center}
.kopf-block:not(.mitte) > .pill,.team-text > .pill,.geschenk-text > .pill{align-self:flex-start}
.kopf-block.mitte .text{margin:0 auto}

.tk{font-weight:600;letter-spacing:.06em;white-space:nowrap;color:#FAEBE1;-webkit-text-fill-color:#FAEBE1}
.tk span{color:#F29A7C;-webkit-text-fill-color:#F29A7C}

/* ── Knöpfe ─────────────────────────────────────────────────── */
.knopf{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;
  font-weight:600;font-size:.9688rem;padding:.85rem 1.6rem;border-radius:999px;text-decoration:none;border:0;cursor:pointer;
  color:var(--auf-licht);background:linear-gradient(180deg,var(--licht-hell),var(--licht));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 28px rgba(var(--licht-rgb),.3);
  transition:transform .25s var(--weich),background .2s,box-shadow .25s}
/* Der Pfeil im Knopf trägt im Markup keine Maße. Ohne diese Zeile
   nimmt er die Ersatzgröße des Browsers an und wird riesig. */
.knopf svg{flex:none;width:1.125rem;height:.875rem}
.knopf::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .7s var(--weich)}
.knopf:hover{transform:translateY(-2px)}
.knopf:hover::after{left:130%}
.knopf:active{transform:scale(.98)}
.knopf-licht{background:linear-gradient(180deg,var(--licht-hell),var(--licht));color:var(--auf-licht);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 28px rgba(var(--licht-rgb),.3)}
.knopf-licht:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 36px rgba(var(--licht-rgb),.45)}
.knopf-still{background:rgba(244,236,228,.06);color:var(--creme);box-shadow:inset 0 0 0 1px var(--kante-hell)}
.knopf-still:hover{background:rgba(244,236,228,.11)}
.mikro{font-size:.8125rem;color:var(--grau);margin-top:.8rem}
.auftakt .mikro,.abschluss .mikro{color:var(--text)}
.abschluss .zwei{color:var(--text)}
.tatreihe{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:2rem}

/* ── Kopfzeile ──────────────────────────────────────────────── */
.kopf{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.kopf.fest{background:rgba(16,12,10,.8);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 var(--kante)}
.kopf-in{max-width:76rem;margin:0 auto;padding:0 var(--bund);height:var(--kopf-h);display:flex;align-items:center;gap:1rem}
.marke{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;line-height:1;flex:none}
.marke-text{display:inline-flex;flex-direction:column;gap:.35rem}
.marke-figur{height:48px;width:auto;flex:none;filter:drop-shadow(0 0 12px rgba(var(--licht-rgb),.35))}
.marke-text img{height:20px;width:auto}
.marke-zeile{font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.menu{display:none;gap:clamp(1.1rem,1.9vw,2rem);margin:0 auto}
.menu a{padding:.6rem 0;font-size:.875rem;font-weight:500;color:var(--text);text-decoration:none;transition:color .16s}
.menu a:hover{color:var(--creme)}
.kopf .knopf{padding:.55rem 1.1rem;font-size:.8438rem;margin-left:auto;flex:none}
.burger{flex:none;width:42px;height:42px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(244,236,228,.07);box-shadow:inset 0 0 0 1px var(--kante-hell);display:grid;place-items:center}
.burger svg{width:18px;height:18px}
@media(max-width:30rem){
  :root{--kopf-h:66px}
  .kopf-in{gap:.6rem}
  .marke-text img{height:16px}
  .marke-figur{height:38px}
  .marke-zeile{font-size:.625rem;letter-spacing:.07em}
  .kopf .knopf{padding:.5rem .9rem;font-size:.8125rem}
}
.kopf .knopf{gap:0}
.kopf .knopf .lang{white-space:pre}
.kopf-knopf .kurz{display:none;white-space:nowrap}
@media(max-width:52rem){
  .kopf-knopf .lang{display:none}
  .kopf-knopf .kurz{display:inline}
}
@media(max-width:26rem){
  .kopf .knopf{padding:.5rem .8rem;font-size:.78rem}
  .marke-zeile{display:none}
}
@media(max-width:30rem){ .kopf .knopf .lang{display:none} }
@media(max-width:21rem){ .kopf .knopf{display:none} .burger{margin-left:auto} }
@media(min-width:64rem){ .menu{display:flex} .kopf .knopf{margin-left:0} .burger{display:none} }

/* ── Mobiles Vollbild-Menü ──────────────────────────────────── */
.menue{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;padding:0 var(--bund) 2rem;overflow-y:auto;
  background:radial-gradient(100% 50% at 50% 0%,rgba(var(--licht-rgb),.18),transparent 70%),var(--grund);
  opacity:0;visibility:hidden;transform:translateY(-.6rem);
  transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s}
.menue[hidden]{display:none}
.menue.offen{opacity:1;visibility:visible;transform:none;transition:opacity .28s ease,transform .28s ease}
.menue-kopf{display:flex;align-items:center;justify-content:space-between;height:var(--kopf-h);border-bottom:1px solid var(--kante)}
.menue-nav{display:flex;flex-direction:column;margin-top:1.2rem}
.menue-nav a{display:flex;align-items:center;justify-content:space-between;min-height:3.4rem;font-family:var(--titel);font-size:1.45rem;font-weight:500;
  letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--kante)}
.menue-nav a::after{content:"";width:.5rem;height:.5rem;border-top:2px solid var(--grau);border-right:2px solid var(--grau);transform:rotate(45deg);margin-right:.3rem}
.menue.offen .menue-nav a{animation:auf .5s var(--weich) both}
.menue.offen .menue-nav a:nth-child(2){animation-delay:.04s}.menue.offen .menue-nav a:nth-child(3){animation-delay:.08s}
.menue.offen .menue-nav a:nth-child(4){animation-delay:.12s}.menue.offen .menue-nav a:nth-child(5){animation-delay:.16s}
.menue.offen .menue-nav a:nth-child(6){animation-delay:.2s}.menue.offen .menue-nav a:nth-child(7){animation-delay:.24s}.menue.offen .menue-nav a:nth-child(8){animation-delay:.28s}.menue.offen .menue-nav a:nth-child(9){animation-delay:.32s}
.menue-tat{margin-top:2rem;display:flex;flex-direction:column;gap:.8rem;text-align:center}
.menue-tat .knopf{width:100%;padding:1rem}
.menue-fuss{margin-top:auto;padding-top:2.4rem;display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}
.recht{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.4rem;font-size:.8125rem;color:var(--grau)}
.recht a,.recht button{text-decoration:none;transition:color .16s;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.recht a:hover,.recht button:hover{color:var(--creme)}
@media(max-width:40rem){ .recht a,.recht button{padding:.6rem 0} }
.menue-fuss .fein a,.fuss .fein a{color:var(--text);text-underline-offset:3px}

/* ── Auftakt: Abendlicht ────────────────────────────────────── */
.auftakt{position:relative;padding:calc(var(--kopf-h) + clamp(1.8rem,4vw,3rem)) 0 clamp(2.5rem,5vw,4rem);overflow:hidden;
  background:
    radial-gradient(70% 38% at 50% 88%,rgba(246,180,145,.30),transparent 70%),
    radial-gradient(110% 55% at 50% 100%,rgba(var(--licht-rgb),.42),transparent 72%),
    radial-gradient(90% 60% at 50% 110%,rgba(158,74,44,.6),transparent 75%),
    linear-gradient(180deg,#0E0A09 0%,#15100D 34%,#2A1C16 62%,#4A2A1D 88%,#3A2218 100%)}
.auftakt-in{text-align:center;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.auftakt-figur{width:clamp(64px,6vw,84px);height:auto;margin-bottom:1rem;filter:drop-shadow(0 0 30px rgba(var(--licht-rgb),.35))}
@media (prefers-reduced-motion:no-preference){
  /* Die Figur atmet: ein langsamer Takt, wie eine ruhige Ein- und Ausatmung. */
  .auftakt-figur.da{animation:atmen 7s ease-in-out 3}
  @keyframes atmen{0%,100%{transform:scale(1);filter:drop-shadow(0 0 26px rgba(var(--licht-rgb),.3))}
    50%{transform:scale(1.04);filter:drop-shadow(0 0 44px rgba(246,180,145,.55))}}
}
.auftakt h1 .zwei{color:var(--licht-hell)}
.auftakt h1{font-size:clamp(2.2rem,4.8vw,3.9rem);line-height:1.04;letter-spacing:-.04em;max-width:19ch;margin-top:1.1rem;padding-bottom:.08em}
.auftakt .text{margin:1.2rem auto 0;max-width:36rem}
.auftakt .tatreihe{justify-content:center}
.hero-bild{position:relative;z-index:1;max-width:72rem;margin:clamp(2.5rem,5vw,3.5rem) auto 0;border-radius:var(--rund);overflow:hidden;
  aspect-ratio:16/9;box-shadow:inset 0 0 0 1px var(--kante-hell),var(--schatten)}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
@media(max-width:40rem){ .hero-bild{aspect-ratio:4/3} }
.hero-bild picture{display:contents}

/* ── Bühne 1: Deine Woche ───────────────────────────────────── */
.buehne-woche{padding-top:clamp(2.5rem,6vw,5rem);position:relative;z-index:2}
.buehne-weg{display:none}
.buehne-halt{padding:clamp(1rem,3vw,2rem) 0 clamp(2rem,4vw,3rem)}
.fenster{max-width:68rem;margin:0 auto;border-radius:var(--rund);padding:10px;
  background:rgba(22,16,13,.72);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:inset 0 0 0 1px var(--kante-hell),var(--schatten)}
.fenster-in{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:52rem){ .fenster-in{grid-template-columns:.85fr 1.15fr} }
@media(max-width:51.99rem){ .kasten{order:-1} }
.fenster-grafik{border-radius:calc(var(--rund) - 8px);min-height:20rem;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.4rem;padding:2rem 1rem;background:radial-gradient(80% 60% at 50% 50%,rgba(var(--licht-rgb),.2),transparent 70%),rgba(244,236,228,.03)}
.tage{display:flex;gap:.3rem}
.tage span{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:600;color:var(--grau);
  box-shadow:inset 0 0 0 1px var(--kante)}
.tage .an{background:linear-gradient(180deg,var(--licht-hell),var(--licht));color:var(--auf-licht)}
.ring-halt{position:relative;width:min(14rem,72%)}
.ring{display:block;width:100%;height:auto}
.ring circle{fill:none;stroke-width:13}
.ring .spur{stroke:rgba(244,236,228,.06)}
.ring .s1{stroke:var(--licht-hell);stroke-dasharray:9.4 50.6;stroke-dashoffset:0}
.ring .s2{stroke:var(--licht);stroke-dasharray:39.4 20.6;stroke-dashoffset:-10}
.ring .s3{stroke:var(--moos);stroke-dasharray:9.4 50.6;stroke-dashoffset:-50}
.ring .s1,.ring .s2,.ring .s3{transition:stroke-dasharray 1.1s var(--weich)}
.ring .s2{transition-delay:.35s}.ring .s3{transition-delay:1.1s}
.fenster.zeig:not(.da) .ring .s1,.fenster.zeig:not(.da) .ring .s2,.fenster.zeig:not(.da) .ring .s3{stroke-dasharray:0 60}
.ring-mitte{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-mitte b{font-family:var(--titel);font-size:3.2rem;font-weight:600;letter-spacing:-.05em;line-height:1}
.ring-mitte span{font-size:.8125rem;color:var(--grau);margin-top:.2rem}
.legende{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1rem;font-size:.8125rem;color:var(--text)}
.legende span{display:inline-flex;align-items:center;gap:.4rem}
.legende i{width:.55rem;height:.55rem;border-radius:50%}
.legende .l1{background:var(--licht-hell)}.legende .l2{background:var(--licht)}.legende .l3{background:var(--moos)}
.kasten{border-radius:calc(var(--rund) - 8px);padding:clamp(1.4rem,3vw,2.4rem);background:rgba(244,236,228,.03);display:flex;flex-direction:column;justify-content:center}
.kasten h2{font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:-.03em;margin-bottom:1.3rem;padding-bottom:.06em}
.zeilen{display:flex;flex-direction:column;position:relative}
.zeilen li{display:grid;grid-template-columns:8.2rem 1fr;gap:1rem;align-items:baseline;padding:.72rem 0;border-top:1px solid var(--kante)}
.zeilen li:first-child{border-top:0}
.zeilen .wann{font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--licht-hell);font-variant-numeric:tabular-nums}
.zeilen .was{font-size:clamp(1rem,1.5vw,1.125rem);line-height:1.45;color:var(--creme)}
.zeilen .was b{font-weight:600}
@media(max-width:30rem){ .zeilen li{grid-template-columns:1fr;gap:.2rem} }

/* ── Bühne 2: Leuchttext mit Figur ──────────────────────────── */
.buehne-leucht{position:relative;margin-top:clamp(2.5rem,7vw,5.5rem)}
.leucht-halt{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center;padding-block:clamp(3rem,6vw,4.5rem)}
@media(min-width:56rem){ .leucht-halt{grid-template-columns:1.35fr .65fr} }
.leucht{font-family:var(--titel);font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.3;letter-spacing:-.025em;font-weight:500;color:var(--creme)}
.leucht + .leucht{margin-top:1.1em}
.zeile{display:inline}
.leucht-figur{position:relative;justify-self:center;width:min(100%,13rem)}
.leucht-figur::before{content:"";position:absolute;inset:8% -12% 0;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--licht-rgb),.34),transparent);filter:blur(22px)}
@media(max-width:55.99rem){ .leucht-figur{display:none} }

/* Scrollgetriebene Bewegung (Chrome, Edge, Safari). Ohne Unterstützung
   oder bei reduzierter Bewegung steht alles ruhig und voll lesbar da. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .zeile,.zeilen li{animation:hell linear both;animation-timeline:view();animation-range:entry 100% cover 42%}
    @keyframes hell{from{opacity:.5}to{opacity:1}}
    .leucht .zeile{animation-name:fokus}
    @keyframes fokus{from{opacity:.45}to{opacity:1}}
    .zeilen li{color:var(--creme)}
    .zeilen{view-timeline:--zeilen block}
    .zeilen::before{content:"";position:absolute;left:-1rem;top:.6rem;bottom:.6rem;width:2px;border-radius:2px;
      background:linear-gradient(var(--licht-hell),var(--licht));transform-origin:top;
      animation:linie linear both;animation-timeline:--zeilen;animation-range:cover 5% cover 60%}
    @keyframes linie{from{transform:scaleY(0)}to{transform:scaleY(1)}}

    @media (min-width:64rem) and (min-height:40rem){
      /* Die Inhalte bleiben oben stehen, solange der Platzhalter darunter
         durchscrollt. Danach laufen sie ohne Leerraum mit dem Abschnitt weiter.
         Die Zeitfenster der Zeilen setzt das Script passend zur Fensterhöhe. */
      .buehne-weg{display:block}
      .buehne-woche{view-timeline:--woche block}
      .buehne-halt{position:sticky;top:calc(var(--kopf-h) + 3vh);padding:0}
      .buehne-woche .buehne-weg{height:60vh}
      .buehne-woche .zeilen li{animation-timeline:--woche;animation-range:cover var(--a) cover var(--b)}
      .buehne-woche .zeilen::before{content:"";position:absolute;left:-1.2rem;top:.6rem;bottom:.6rem;width:2px;border-radius:2px;
        background:linear-gradient(var(--licht-hell),var(--licht));transform-origin:top;
        animation:linie linear both;animation-timeline:--woche;animation-range:cover var(--la) cover var(--lb)}
      @keyframes linie{from{transform:scaleY(0)}to{transform:scaleY(1)}}

      .buehne-leucht{view-timeline:--leucht block}
      .leucht-halt{position:sticky;top:calc(var(--kopf-h) + 10vh);padding-block:1rem}
      .buehne-leucht .buehne-weg{height:55vh}
      .buehne-leucht .zeile{animation-timeline:--leucht;animation-range:cover var(--a) cover var(--b)}
      .leucht-figur{animation:aufleuchten linear both;animation-timeline:--leucht;animation-range:cover var(--la) cover var(--lb)}
      @keyframes aufleuchten{from{opacity:.25;transform:scale(.94);filter:saturate(.4)}to{opacity:1;transform:none;filter:none}}
    }
  }
}

/* ── Vier Fähigkeiten ───────────────────────────────────────── */
.vier{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:34rem){ .vier{grid-template-columns:1fr 1fr} }
.vier-hinweis{max-width:46rem;margin:clamp(1.2rem,2.6vw,1.8rem) auto 0;text-align:center;font-size:.9688rem;line-height:1.6;color:var(--text)}
.tag-karte{position:relative;border-radius:var(--rund);padding:clamp(1.4rem,3vw,2.1rem);background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante);
  display:flex;flex-direction:column;gap:.9rem;overflow:hidden;transition:transform .45s var(--weich),box-shadow .45s var(--weich)}
.tag-karte::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--licht-hell),var(--licht));
  transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--weich) .25s}
.tag-karte.da::before{transform:none}
.tag-karte.zeig.da:hover,.tag-karte:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(var(--licht-rgb),.35),0 24px 48px rgba(0,0,0,.35)}
.tag-karte:hover::after{transform:translateX(-.08em)}
.tag-karte h3{font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.03em;line-height:1.1}

/* ── Selbstcheck ────────────────────────────────────────────── */
.szenen{display:flex;flex-direction:column}
.szene{position:relative;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  border-top:1px solid var(--kante);padding:clamp(1rem,2vw,1.35rem) 3.2rem clamp(1rem,2vw,1.35rem) 0;
  font-size:clamp(1.08rem,2.3vw,1.45rem);font-weight:500;line-height:1.35;letter-spacing:-.01em;color:var(--grau);
  transition:color .25s,padding-left .35s var(--weich)}
.szene:last-child{border-bottom:1px solid var(--kante)}
.szene:hover{color:var(--text)}
.szene::before{content:"";position:absolute;left:0;top:50%;width:0;height:2px;border-radius:2px;background:var(--licht);
  transform:translateY(-50%);transition:width .35s var(--weich)}
.szene::after{content:"";position:absolute;right:.2rem;top:50%;width:1.45rem;height:1.45rem;transform:translateY(-50%);border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--kante-hell);transition:background .25s,box-shadow .25s,transform .35s var(--weich)}
.szene[aria-pressed="true"]{color:var(--creme);padding-left:2.9rem}
.szene[aria-pressed="true"]::before{width:1.9rem}
.szene[aria-pressed="true"]::after{background:var(--licht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1109' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/68% no-repeat;transform:translateY(-50%) scale(1.08)}
.antwort{display:none;margin-top:1.6rem;padding:clamp(1.3rem,2.6vw,1.8rem) clamp(1.3rem,3vw,2.2rem);border-radius:var(--rund);gap:1.2rem;align-items:center;
  position:relative;overflow:hidden;
  background:linear-gradient(110deg,rgba(var(--licht-rgb),.18),rgba(var(--licht-rgb),.05) 65%);box-shadow:inset 0 0 0 1px rgba(var(--licht-rgb),.26)}
.antwort[data-an="true"]{display:grid;animation:auf .5s var(--weich)}
@media(min-width:48rem){ .antwort{grid-template-columns:1fr auto;gap:2.5rem} }
.antwort-titel{font-family:var(--titel);font-size:1.3rem;font-weight:600}
.antwort-text{font-size:1rem;color:var(--text);margin-top:.35rem;max-width:46rem}
@keyframes auf{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}

/* ── Tabs: die drei Stufen ──────────────────────────────────── */
.reiter{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:999px;
  background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante);max-width:40rem;margin:0 auto}
.reiter-licht{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 16px) / 3);border-radius:999px;
  background:var(--flaeche-hoch);box-shadow:inset 0 0 0 1px var(--kante-hell),0 4px 14px rgba(0,0,0,.3);
  transform:translateX(calc(var(--pos,0) * (100% + 4px)));transition:transform .45s var(--weich)}
.reiter button{position:relative;border:0;background:none;cursor:pointer;padding:.7rem .6rem;border-radius:999px;font-size:.9375rem;font-weight:500;
  color:var(--grau);transition:color .2s}
.reiter button:hover,.reiter button[aria-selected="true"]{color:var(--creme)}
.stufen{margin-top:1.6rem}
.stufe{display:grid;grid-template-columns:1fr;border-radius:var(--rund);overflow:hidden;box-shadow:inset 0 0 0 1px var(--kante);background:var(--flaeche)}
.stufe[hidden]{display:none}
.stufe:not([hidden]){animation:auf .55s var(--weich)}
@media(min-width:52rem){ .stufe{grid-template-columns:1.05fr .95fr;min-height:24rem} }
.stufe-text{padding:clamp(1.6rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center;gap:1rem}
.stufe-text h3{font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.035em;line-height:1.08;padding-bottom:.06em}
.stufe-bild{position:relative;aspect-ratio:4/3;overflow:hidden;align-self:center}
.stufe-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.haken{display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem}
.haken li{display:flex;gap:.7rem;align-items:baseline;font-size:.9688rem;color:var(--text)}
.haken li::before{content:"";flex:none;width:.45rem;height:.45rem;border-radius:50%;background:var(--moos);transform:translateY(-.1rem)}

/* ── Bento: was du bekommst ─────────────────────────────────── */
.bento{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:56rem){ .bento{grid-template-columns:repeat(3,1fr)} .breit{grid-column:span 2} }
.kachel{border-radius:var(--rund);padding:clamp(1.5rem,3vw,2.1rem);background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante);
  display:flex;flex-direction:column;gap:.7rem;position:relative;overflow:hidden;min-height:13rem;
  transition:transform .4s var(--weich),box-shadow .4s}
.kachel{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.kachel[data-kippt]{transition:transform .1s linear,box-shadow .3s}
.kachel:hover{box-shadow:inset 0 0 0 1px var(--kante-hell),0 20px 40px rgba(0,0,0,.3)}
.kachel h3{font-size:1.35rem;letter-spacing:-.025em;line-height:1.2}
.kachel p{font-size:.9688rem;color:var(--text);line-height:1.6;max-width:34rem}
.kachel .kachel-gross .zwei{color:var(--licht-hell)}
.kachel .kachel-gross{font-family:var(--titel);font-size:clamp(4rem,9vw,6.5rem);font-weight:600;letter-spacing:-.06em;line-height:.95;padding-bottom:.05em}
.k-live{background:radial-gradient(80% 90% at 90% 100%,rgba(var(--licht-rgb),.35),transparent 70%),var(--flaeche);justify-content:flex-end}
.k-live .kopfzeile{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.k-raum{background:radial-gradient(90% 80% at 0% 0%,rgba(127,169,138,.22),transparent 70%),var(--flaeche)}
.k-stufe{background:radial-gradient(70% 90% at 100% 0%,rgba(246,180,145,.16),transparent 70%),var(--flaeche)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.3rem}
.chips li{font-size:.8438rem;color:var(--creme);padding:.45rem .85rem;border-radius:999px;background:rgba(244,236,228,.05);box-shadow:inset 0 0 0 1px var(--kante)}
.nein-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.nein-chips li{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9375rem;font-weight:600;color:var(--grau);padding:.5rem 1rem .5rem .85rem;
  border-radius:999px;background:rgba(232,132,90,.06);
  box-shadow:inset 0 0 0 1px rgba(232,132,90,.3)}
.nein-chips li::before{content:"×";font-size:1.15rem;font-weight:700;color:#E2705A;line-height:1}

/* ── Team ───────────────────────────────────────────────────── */
.team-raster{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:56rem){ .team-raster{grid-template-columns:.85fr 1.15fr} }
.portraet{border-radius:var(--rund);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--schatten),inset 0 0 0 1px var(--kante)}
@media(max-width:55.99rem){ .portraet{max-width:17rem;justify-self:center;width:100%} .team-text{order:-1} }
.portraet img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--weich)}
.portraet:hover img{transform:scale(1.03)}
.team-text{display:flex;flex-direction:column;gap:1.2rem}
.zitat{margin:0;position:relative;padding:1.2rem 1.4rem;border-radius:var(--rund-klein);background:rgba(var(--licht-rgb),.08)}
.zitat p{font-family:var(--titel);font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.45;letter-spacing:-.01em;color:var(--creme)}
.zitat footer{margin-top:.5rem;font-size:.8438rem;color:var(--grau)}
.name{font-size:.9375rem;color:var(--grau)}
.name b{color:var(--creme);font-weight:600}
.kollegen-kopf{margin:clamp(3.5rem,7vw,5rem) 0 1.6rem}
.kollegen{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:40rem){ .kollegen{grid-template-columns:repeat(3,1fr)} }
.kollegin{border-radius:var(--rund);overflow:hidden;background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante);transition:transform .4s var(--weich)}
.kollegin:hover{transform:translateY(-3px)}
.kollegin figure{aspect-ratio:4/5;overflow:hidden}
.kollegin img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform 1.2s var(--weich)}
.kollegin:hover img{transform:scale(1.04)}
.kollegin div{padding:1.1rem 1.3rem 1.3rem}
.kollegin b{display:block;font-family:var(--titel);font-size:1.2rem;font-weight:600;letter-spacing:-.02em}
.kollegin span{display:block;font-size:.9063rem;color:var(--text);margin-top:.2rem;line-height:1.45}
/* Auf dem Handy so groß wie das Porträt von Victoria */
@media(max-width:39.99rem){ .kollegin{max-width:17rem;width:100%;justify-self:center} }
@media(max-width:55.99rem){ .nur-breit{display:none} }
@media(min-width:56rem){ .nur-schmal{display:none} }

/* ── Ablauf: die Linie zeichnet sich, die Stationen leuchten nacheinander ── */
.weg{display:grid;grid-template-columns:1fr;gap:2.2rem;position:relative;counter-reset:w}
.weg::before{content:"";position:absolute;left:1.2rem;top:1.2rem;bottom:1.2rem;width:2px;border-radius:2px;
  background:linear-gradient(var(--licht),rgba(244,236,228,.15));transform-origin:top;transform:scaleY(0);transition:transform 1.8s var(--weich) .1s}
@media(min-width:56rem){
  .weg{grid-template-columns:repeat(4,1fr);gap:1.5rem}
  .weg::before{left:1.2rem;right:calc(25% - 2.325rem);top:1.2rem;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,var(--licht),rgba(244,236,228,.15));transform-origin:left;transform:scaleX(0)}
}
.weg.da::before{transform:none}
/* Schritt 3 und 4 wiederholen sich jede Woche, immer wieder: Bogen von 4 zurück zu 3 */
.weg-halt{position:relative}
.schleife{margin:1.6rem 0 0 3.6rem}
.schleife > span{box-shadow:inset 0 0 0 1.5px rgba(var(--licht-rgb),.45);background:rgba(var(--licht-rgb),.12)}
@media (prefers-reduced-motion:no-preference){
  .schleife svg{animation:dreht 4.5s linear 4}
  @keyframes dreht{to{transform:rotate(360deg)}}
}
.schleife > span{display:inline-flex;align-items:center;gap:.45rem;font-size:.8125rem;font-weight:600;color:var(--licht-hell);
  padding:.35rem .85rem;border-radius:999px;background:var(--grund);box-shadow:inset 0 0 0 1px rgba(var(--licht-rgb),.4)}
.schleife svg{width:1rem;height:1rem}
.schleife-kurz{display:none}
@media(min-width:56rem){
  .weg-halt{padding-top:3.2rem}
  .schleife{position:absolute;top:.9rem;height:calc(2.3rem + 2px);margin:0;
    left:calc((100% - 4.5rem) / 2 + 3rem + 1.2rem - 1px);width:calc((100% - 4.5rem) / 4 + 1.5rem + 2px);
    border:2px dashed rgba(246,180,145,.7);border-bottom:0;border-radius:1.6rem 1.6rem 0 0}
  .schleife::after{content:"";position:absolute;left:-7px;bottom:-4px;border:6px solid transparent;border-top:8px solid rgba(246,180,145,.9);border-bottom:0}
  .schleife > span{position:absolute;left:50%;top:0;transform:translate(-50%,-55%);white-space:nowrap}
  .schleife-kurz{display:inline}
  .schleife-lang{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.station{position:relative;counter-increment:w;padding-left:3.6rem}
@media(min-width:56rem){ .station{padding-left:0} }
.station::before{content:counter(w);display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;
  font-weight:700;font-size:.95rem;background:var(--grund);color:var(--grau);box-shadow:inset 0 0 0 1.5px var(--grau-tief);
  position:absolute;left:0;top:0;transition:background .5s,color .5s,box-shadow .5s,transform .5s var(--weich)}
@media(min-width:56rem){ .station::before{position:relative;margin-bottom:1.2rem} }
.station h3,.station p{opacity:.5;transform:translateY(.6rem);transition:opacity .7s var(--weich),transform .7s var(--weich)}
.station h3 a{text-decoration:none}
.station h3{font-size:1.2rem;line-height:1.3;letter-spacing:-.02em;margin-bottom:.45rem;padding-top:.3rem}
@media(min-width:56rem){ .station h3{padding-top:0} }
.station p{font-size:.9375rem;color:var(--text);line-height:1.55;max-width:20rem}
.weg.da .station::before{background:linear-gradient(180deg,var(--licht-hell),var(--licht));color:var(--auf-licht);box-shadow:0 4px 14px rgba(0,0,0,.4);transform:scale(1.06)}
.weg.da .station h3,.weg.da .station p{opacity:1;transform:none}
.weg.da .station:nth-child(1)::before,.weg.da .station:nth-child(1) h3,.weg.da .station:nth-child(1) p{transition-delay:.2s}
.weg.da .station:nth-child(2)::before,.weg.da .station:nth-child(2) h3,.weg.da .station:nth-child(2) p{transition-delay:.65s}
.weg.da .station:nth-child(3)::before,.weg.da .station:nth-child(3) h3,.weg.da .station:nth-child(3) p{transition-delay:1.1s}
.weg.da .station:nth-child(4)::before,.weg.da .station:nth-child(4) h3,.weg.da .station:nth-child(4) p{transition-delay:1.55s}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    #ablauf{view-timeline:--ablauf block}
    .weg::before{transition:none;animation:strich linear both;animation-timeline:--ablauf;animation-range:cover 22% cover 52%}
    @keyframes strich{from{transform:scaleY(0)}to{transform:none}}
    @media(min-width:56rem){ @keyframes strich{from{transform:scaleX(0)}to{transform:none}} }
    .station::before,.station h3,.station p{transition:none;animation:station linear both;animation-timeline:--ablauf;
      animation-range:cover calc(22% + var(--n) * 8%) cover calc(28% + var(--n) * 8%)}
    .station::before{animation-name:nummer}
    .schleife{animation:schleife linear both;animation-timeline:--ablauf;animation-range:cover 50% cover 58%}
    @keyframes schleife{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
    @keyframes station{from{opacity:.5;transform:translateY(.6rem)}to{opacity:1;transform:none}}
    @keyframes nummer{from{background:var(--grund);color:var(--grau);box-shadow:inset 0 0 0 1.5px var(--grau-tief);transform:none}
      to{background:linear-gradient(180deg,var(--licht-hell),var(--licht));color:var(--auf-licht);box-shadow:0 4px 14px rgba(0,0,0,.4);transform:scale(1.06)}}
  }
}

/* ── Aufnahme-Filter ────────────────────────────────────────── */
.filter{border-radius:var(--rund);overflow:hidden;background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante);max-width:52rem;margin:0 auto}
.frage{display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;justify-content:space-between;align-items:center;
  padding:1.2rem clamp(1.2rem,2.6vw,1.8rem);border-bottom:1px solid var(--kante)}
.frage-text{font-size:1rem;font-weight:500;line-height:1.45;flex:1 1 19rem}
.frage-text .zusatz{display:block;font-size:.8125rem;font-weight:400;color:var(--grau);margin-top:.35rem;line-height:1.5}
.wahl{display:flex;gap:.4rem;flex:none}
.wahl input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px}
.wahl label{font-size:.875rem;font-weight:600;padding:.48rem 1.1rem;border-radius:999px;color:var(--text);
  background:rgba(244,236,228,.05);box-shadow:inset 0 0 0 1px var(--kante-hell);cursor:pointer;user-select:none;transition:background .16s,color .16s,transform .2s var(--weich)}
.wahl label:hover{color:var(--creme);background:rgba(244,236,228,.1)}
.wahl input:checked + label{color:#1A120E;background:var(--creme);box-shadow:none;transform:scale(1.04)}
.wahl input:focus-visible + label{outline:2px solid var(--licht-hell);outline-offset:2px}
.filter-fuss{padding:1.3rem clamp(1.2rem,2.6vw,1.8rem);display:flex;flex-direction:column;gap:.9rem}
.ergebnis{display:none;padding:1.1rem 1.3rem;border-radius:var(--rund-klein);font-size:1rem;line-height:1.55}
.ergebnis[data-stand="frei"],.ergebnis[data-stand="abklaeren"]{display:block;animation:auf .45s var(--weich)}
.ergebnis[data-stand="frei"]{background:rgba(127,169,138,.12);box-shadow:inset 0 0 0 1px rgba(127,169,138,.3)}
.ergebnis[data-stand="abklaeren"]{background:rgba(var(--licht-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--licht-rgb),.3)}
.ergebnis b{display:block;font-weight:700;margin-bottom:.3rem}
.ergebnis .knopf{margin-top:1rem}

/* ── Preise ─────────────────────────────────────────────────── */
.wert{max-width:44rem;margin:0 auto clamp(2.4rem,5vw,3.4rem);text-align:center}
.tausch{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:1.8rem auto 0;max-width:40rem}
.tausch-karte{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.3rem;padding:1.4rem 1rem;
  border-radius:var(--rund);background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante)}
.tausch-wir{background:radial-gradient(90% 80% at 50% 0%,rgba(var(--licht-rgb),.22),transparent 70%),var(--flaeche-hoch);box-shadow:inset 0 0 0 1px rgba(var(--licht-rgb),.35)}
.tausch-etikett{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);line-height:1.4}
.tausch-wert{font-family:var(--titel);font-size:clamp(1.7rem,4.5vw,2.2rem);font-weight:600;letter-spacing:-.03em;color:var(--creme);line-height:1.1}
.tausch-info{font-size:.875rem;color:var(--text);line-height:1.4}
.tausch-aktion{margin-top:.35rem;font-size:.75rem;font-weight:600;color:var(--auf-licht);background:var(--licht-hell);padding:.2rem .65rem;border-radius:999px;text-align:center}
.tausch > i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;width:2.3rem;height:2.3rem;border-radius:50%;
  display:grid;place-items:center;background:var(--grund);box-shadow:inset 0 0 0 1px var(--kante-hell);font-style:normal;font-size:1.15rem;color:var(--licht-hell)}
.preis-name{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.preis-zahl{font-family:var(--titel);font-size:clamp(3rem,6vw,4.2rem);font-weight:600;letter-spacing:-.05em;line-height:1}
.preis-zahl small{font-family:var(--schrift);font-size:.9375rem;font-weight:500;letter-spacing:0;color:var(--grau);margin-left:.4rem}
.wert-lead{font-family:var(--titel);font-size:clamp(1.4rem,3vw,2.1rem);font-weight:600;
  letter-spacing:-.03em;line-height:1.2;text-align:center;color:var(--creme);margin-bottom:.6rem}
.wert-lead b{color:var(--licht-hell);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  @keyframes schein{from{transform:translate(-8%,0)}to{transform:translate(8%,6%)}}
}
.preis-hinweis{text-align:center;margin:2rem auto 0}
@media(max-width:30rem){
  .tatreihe{flex-direction:column;align-items:stretch}
  .tatreihe .knopf,.antwort .knopf,.ergebnis .knopf{width:100%;align-self:stretch}
}
/* Sind die 50 Launch-Plätze vergeben (LAUNCH_VOLL in js/start.js), blendet sich die Aktion aus. */
.aktion-vorbei .nur-aktion{display:none!important}

/* ── Gutschein ──────────────────────────────────────────────── */
.geschenk-raster{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(min-width:56rem){ .geschenk-raster{grid-template-columns:1.1fr .9fr} }
.geschenk-text{display:flex;flex-direction:column;gap:1.1rem}
.geschenk-wahl{margin-top:.6rem;max-width:23rem}
.geschenk-schritte a{color:var(--licht-hell);text-underline-offset:3px}
.geschenk-text .mikro a{color:var(--licht-hell);text-underline-offset:3px}
.geschenk-text .mikro{margin-top:0}
.geschenk-schritte{display:flex;flex-direction:column;gap:.7rem;counter-reset:g;margin:.4rem 0}
.geschenk-schritte li{position:relative;padding-left:2.6rem;font-size:1rem;line-height:1.55;color:var(--text);counter-increment:g}
.geschenk-schritte li::before{content:counter(g);position:absolute;left:0;top:-.05rem;width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;
  font-size:.8125rem;font-weight:700;color:var(--auf-licht);background:linear-gradient(180deg,var(--licht-hell),var(--licht))}
.geschenk-schritte b{color:var(--creme);font-weight:600}

/* ── E-Mail-Anmeldung (KlickTipp über eigenen Endpunkt, kein iframe) ── */
.post-feld{padding:clamp(2.5rem,5vw,4rem) 0}
.post{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:center;padding:clamp(1.4rem,4vw,2.6rem);border-radius:var(--rund);
  background:radial-gradient(70% 90% at 100% 0%,rgba(var(--licht-rgb),.22),transparent 70%),var(--flaeche);box-shadow:inset 0 0 0 1px rgba(var(--licht-rgb),.3)}
@media(min-width:56rem){ .post{grid-template-columns:1.1fr 1fr} }
.post-text{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.post-titel{font-family:var(--titel);font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;letter-spacing:-.03em;font-weight:600;padding-bottom:.06em}
.post-einleitung{font-size:1rem;line-height:1.65;color:var(--text)}
.post-form{display:flex;flex-direction:column;gap:.9rem}
.post-felder{display:grid;grid-template-columns:1fr;gap:.8rem}
@media(min-width:30rem){ .post-felder{grid-template-columns:1fr 1.4fr} }
.post-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.875rem;font-weight:600;color:var(--creme)}
.post-form input{width:100%;font:inherit;font-weight:400;font-size:1rem;color:var(--creme);background:var(--grund);border:1px solid var(--kante-hell);
  border-radius:12px;padding:.8rem .95rem}
.post-form input:focus{outline:none;border-color:var(--licht);box-shadow:0 0 0 3px rgba(var(--licht-rgb),.25)}
.post-form input[aria-invalid="true"]{border-color:#E07A6A}
.post-form .knopf{align-self:flex-start}
@media(max-width:30rem){ .post-form .knopf{width:100%} }
.post-klein{font-size:.78rem;line-height:1.55;color:var(--grau)}
.post-klein a{color:var(--text)}
.post-meldung{padding:.9rem 1.1rem;border-radius:12px;font-size:.9375rem;line-height:1.5}
.post-meldung[hidden]{display:none}
.honig{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

@media(max-width:40rem){ .zeig .titel,.titel.zeig,.wortweise .w{filter:none!important} }

/* ── Eine Preiskachel ── */
.angebot{position:relative;max-width:62rem;margin:0 auto;border-radius:var(--rund);overflow:hidden;background:var(--flaeche-hoch);
  box-shadow:inset 0 0 0 1px rgba(var(--licht-rgb),.35),var(--schatten)}
.angebot::before{content:"";position:absolute;inset:-30% -10% auto auto;width:60%;height:80%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--licht-rgb),.2),transparent)}
.angebot > *{position:relative}
@media(min-width:52rem){ .angebot-inhalt{border-top:0;border-left:1px solid var(--kante)} }
.angebot-inhalt{padding:clamp(1.6rem,3.4vw,2.4rem);display:flex;flex-direction:column;gap:.9rem}
.angebot-inhalt{border-top:1px solid var(--kante)}
.angebot .haken{padding-top:0;border-top:0;margin-top:0;gap:.8rem}
.angebot .haken li{line-height:1.5}
.angebot .haken b{color:var(--creme);font-weight:600}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-raster{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:56rem){ .faq-raster{grid-template-columns:2fr .8fr;gap:16px;align-items:start} }
.frag-uns{border-radius:var(--rund);padding:1.8rem;background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante);display:flex;flex-direction:column;gap:.8rem}
@media(min-width:56rem){ .frag-uns{position:sticky;top:6rem} }
.frag-uns h3{font-size:1.35rem;letter-spacing:-.025em;padding-bottom:.06em}
.frag-uns p{font-size:.9375rem;color:var(--text)}
.frag-uns a.weiter{font-size:.9375rem;font-weight:600;text-decoration:none;color:var(--licht-hell);margin-top:.4rem}
.fragen{display:flex;flex-direction:column;gap:8px}
.fragen details{border-radius:var(--rund-klein);background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante);transition:background .25s}
.fragen details[open]{background:var(--flaeche-hoch)}
.fragen summary{cursor:pointer;list-style:none;padding:1.15rem 3.4rem 1.15rem 1.4rem;position:relative;font-size:1rem;font-weight:500;line-height:1.45}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";position:absolute;right:1.4rem;top:50%;width:.5rem;height:.5rem;margin-top:-.35rem;
  border-right:2px solid var(--grau);border-bottom:2px solid var(--grau);transform:rotate(45deg);transition:transform .3s var(--weich)}
.fragen details[open] summary::after{transform:rotate(-135deg);margin-top:-.1rem}
.fragen details p{padding:0 1.4rem 1.3rem;color:var(--text);font-size:.9688rem;max-width:44rem}
.fragen details[open] p{animation:auf .4s var(--weich)}

/* ── Abschluss ──────────────────────────────────────────────── */
.abschluss{text-align:center}
.abschluss .titel{margin:0 auto;max-width:18ch;font-size:clamp(2.2rem,5vw,3.9rem)}
.abschluss .text{margin:1.4rem auto 0}
.abschluss .tatreihe{justify-content:center}

/* ── Fuß ────────────────────────────────────────────────────── */
.fuss{border-top:1px solid var(--kante);padding:clamp(3rem,6vw,4.5rem) 0 2.4rem}
.fuss-oben{max-width:60rem;margin:0 auto;padding:0 var(--bund);display:grid;grid-template-columns:1fr;gap:2.4rem;justify-items:center;text-align:center}
@media(min-width:48rem){ .fuss-oben{grid-template-columns:auto auto;justify-content:center;align-items:center;gap:5rem;text-align:left;justify-items:start} }
.fuss-logo{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-decoration:none}
.fuss-figur{width:74px}
.fuss-wort{width:190px;margin-top:.3rem}
.fuss-nav{display:grid;grid-template-columns:auto auto;column-gap:clamp(1.6rem,6vw,2.6rem);gap:.15rem clamp(1.6rem,6vw,2.6rem)}
.fuss-nav a{font-size:.9375rem;color:var(--text);text-decoration:none;padding:.3rem 0;transition:color .16s}
.fuss-nav a:hover{color:var(--creme)}
.fuss-meta{max-width:54rem;margin-bottom:.7rem;color:var(--grau)}
.fuss-unten{width:calc(100% - 2 * var(--bund));max-width:calc(76rem - 2 * var(--bund));margin:clamp(2.6rem,5vw,3.4rem) auto 0;padding:1.8rem 0 0;border-top:1px solid var(--kante);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center}

/* ── Cookie-Hinweis: blockiert die Seite, bis entschieden ist. Gleichwertige Knöpfe, keine Dark Patterns. ── */
.cookie-banner{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:1rem;
  background:rgba(10,7,6,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s ease}
@media(max-width:40rem){ .cookie-banner{place-items:end center} }
.cookie-banner.sichtbar{opacity:1}
.cookie-banner[hidden]{display:none}
.cookie-inner{width:min(100%,36rem);max-height:calc(100dvh - 2rem);overflow:auto;border-radius:var(--rund);padding:clamp(1.4rem,4vw,2.1rem);
  background:var(--flaeche-hoch);box-shadow:inset 0 0 0 1px var(--kante-hell),0 30px 80px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:1.3rem;
  transform:translateY(1rem);transition:transform .45s var(--weich)}
.cookie-banner.sichtbar .cookie-inner{transform:none}
.cookie-titel{font-family:var(--titel);font-size:1.3rem;line-height:1.2;font-weight:600;letter-spacing:-.02em;margin-bottom:.55rem}
.cookie-recht{display:flex;justify-content:center;gap:1.4rem;font-size:.8125rem}
.cookie-recht a{color:var(--grau);text-underline-offset:3px;padding:.3rem 0}
.cookie-recht a:hover{color:var(--creme)}
.cookie-text p:not(.cookie-titel){font-size:.9375rem;color:var(--text);line-height:1.6}
.cookie-text a,.cookie-karte a{color:var(--licht-hell);text-underline-offset:3px}
.cookie-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.cookie-knoepfe .knopf{width:100%;padding:.85rem 1rem;font-size:.9063rem}
.cookie-knoepfe #cookie-einstellungen{grid-column:1/-1;order:3}
@media(max-width:26rem){ .cookie-knoepfe{grid-template-columns:1fr} }
.cookie-fuss .knopf{padding:.7rem 1.2rem;font-size:.875rem}
.cookie-dialog{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1.2rem;background:rgba(10,7,6,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cookie-dialog[hidden]{display:none}
.cookie-karte{width:min(100%,38rem);max-height:90vh;overflow-y:auto;border-radius:var(--rund);padding:clamp(1.4rem,4vw,2.2rem);
  background:var(--flaeche-hoch);box-shadow:inset 0 0 0 1px var(--kante-hell),var(--schatten);position:relative}
.cookie-karte h2{font-size:1.6rem;letter-spacing:-.03em;margin-bottom:.6rem;padding-right:2.5rem}
.cookie-karte > p{font-size:.9375rem;color:var(--text);line-height:1.6}
.cookie-zu{position:absolute;top:1rem;right:1rem}
.cookie-kat{margin-top:1rem;padding:1rem 1.2rem;border-radius:var(--rund-klein);background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante)}
.cookie-kat-kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.4rem}
.cookie-kat h3{font-size:1.05rem}
.cookie-kat p{font-size:.875rem;color:var(--text);line-height:1.55}
.cookie-kat small{display:block;margin-top:.5rem;font-size:.8125rem;color:var(--grau);line-height:1.5}
.schalter{position:relative;flex:none;width:44px;height:24px}
.schalter input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.schalter span{position:absolute;inset:0;border-radius:999px;background:rgba(244,236,228,.38);transition:background .2s}
.schalter span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--creme);transition:transform .25s var(--weich)}
.schalter input:checked + span{background:var(--licht)}
.schalter input:checked + span::after{transform:translateX(20px)}
.schalter input:disabled + span{opacity:.6}
.schalter input:focus-visible + span{outline:2px solid var(--licht-hell);outline-offset:2px}
.cookie-fuss{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}

/* ── Einblenden ─────────────────────────────────────────────── */
.zeig{opacity:0;transform:translateY(1.1rem);transition:opacity .5s var(--weich),transform .5s var(--weich);transition-delay:calc(var(--i,0) * 55ms)}
.zeig.da{opacity:1;transform:none}
/* Der Hero braucht kein Skript: er blendet per CSS ein und ist sofort da. */
@media (prefers-reduced-motion:no-preference){ .rein{animation:auf .6s var(--weich) both;animation-delay:calc(.1s + var(--i,0) * 70ms)} }
@media (prefers-reduced-motion:no-preference){
  .zeig .titel,.titel.zeig{transition:opacity .5s var(--weich),transform .5s var(--weich),filter .6s var(--weich)}
  .zeig:not(.da) .titel,.titel.zeig:not(.da){filter:blur(4px)}
  .kachel.zeig:not(.da){transform:translateY(2rem) rotate(1.2deg) scale(.97)!important}
  .kachel.zeig{transition:opacity .5s var(--weich),transform .5s var(--weich),filter .5s var(--weich),box-shadow .4s;transition-delay:calc(var(--i,0) * 55ms)}
  .abschluss::before{content:"";position:absolute;left:50%;bottom:-24%;width:80vw;height:70vw;max-width:60rem;max-height:52rem;border-radius:50%;
    transform:translateX(-50%);background:radial-gradient(closest-side,rgba(var(--licht-rgb),.26),transparent);pointer-events:none;animation:atmet 8s ease-in-out 3 alternate;
    -webkit-mask-image:linear-gradient(transparent 0,#000 40%,#000 88%,transparent 100%);
    mask-image:linear-gradient(transparent 0,#000 40%,#000 88%,transparent 100%)}
  @keyframes atmet{from{opacity:.5;transform:translateX(-50%) scale(1)}to{opacity:1;transform:translateX(-50%) scale(1.12)}}
}
.abschluss{position:relative;isolation:isolate}
/* Der Schein liegt in einer eigenen Ebene und wird nach oben ausgeblendet,
   damit an der Sektionskante keine Linie entsteht. */
.abschluss::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(64% 62% at 50% 96%,rgba(var(--licht-rgb),.3),transparent 72%);
  -webkit-mask-image:linear-gradient(transparent 0,#000 38%,#000 86%,transparent 100%);
  mask-image:linear-gradient(transparent 0,#000 38%,#000 86%,transparent 100%)}
.abschluss .innen{z-index:1}
#ablauf::before,.fuss::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(244,236,228,.07) 1px,transparent 1px);background-size:16px 16px;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(60% 70% at 50% 50%,#000,transparent)}
.fuss{position:relative}
.fuss > *{position:relative}

/* ── Geschenk: Dauer wählen ────────────────────────────────────────── */
.dauer-schalter{display:inline-flex;gap:4px;padding:4px;border-radius:999px;margin-bottom:.8rem;
  background:rgba(244,236,228,.05);box-shadow:inset 0 0 0 1px var(--kante)}
.dauer-knopf{border:0;background:none;font:inherit;cursor:pointer;color:var(--grau);
  padding:.55rem 1rem;border-radius:999px;font-size:.875rem;font-weight:600;
  transition:background .22s var(--weich),color .22s}
.dauer-knopf:hover{color:var(--creme)}
.dauer-knopf.an{background:var(--licht);color:var(--auf-licht)}
.dauer-knopf:focus-visible{outline:2px solid var(--licht-hell);outline-offset:2px}
.geschenk-wahl [data-d]{display:none}
.geschenk-wahl[data-dauer="3"] [data-d="3"],
.geschenk-wahl[data-dauer="6"] [data-d="6"],
.geschenk-wahl[data-dauer="12"] [data-d="12"]{display:inline}
.geschenk-klein{display:block}

/* ── Knöpfe geben unter dem Zeiger nach ────────────────────────────── */
.knopf{transform-origin:center;transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
  translateZ(calc(var(--hebt,0) * 2px))}
.knopf[data-kippt]{transition:transform .09s linear}
.knopf:active{transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(.975)}

/* ── Nach oben springen ────────────────────────────────────────────── */
.nach-oben{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:39;
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  color:var(--creme);background:rgba(30,22,18,.82);text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--kante-hell),0 8px 24px rgba(0,0,0,.4);
  opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;
  transition:opacity .3s var(--weich),transform .3s var(--weich),background .2s}
.nach-oben[hidden]{display:grid}
.nach-oben:not(.da){visibility:hidden}
.nach-oben.da{opacity:1;transform:none;pointer-events:auto}
.nach-oben:hover{background:var(--licht);color:var(--auf-licht)}
.nach-oben:focus-visible{outline:2px solid var(--creme);outline-offset:3px}
.nach-oben svg{width:22px;height:22px}
@media(max-width:34rem){ .nach-oben{width:40px;height:40px} }

/* ── Versprechen als Siegel ────────────────────────────────────────── */
.siegel{flex:none;width:clamp(48px,6vw,60px);display:grid;place-items:center;
  filter:drop-shadow(0 4px 14px rgba(127,169,138,.35))}
.siegel svg{width:100%;height:auto}
.siegel-text{display:flex;flex-direction:column;gap:.2rem}

/* ── Geschenk: Preis über dem Gutschein ────────────────────────────── */
.geschenk-spalte{display:flex;flex-direction:column;gap:clamp(1rem,2.4vw,1.6rem)}
.geschenk-spalte .geschenk-wahl{max-width:none}
.geschenk-spalte .dauer-schalter{align-self:flex-start}

/* ── Wortkugel ─────────────────────────────────────────────────────── */
.wolke{margin-top:clamp(1.4rem,3vw,2rem);padding:clamp(1.4rem,3vw,2rem) 1rem;border-radius:var(--rund);
  background:radial-gradient(60% 60% at 50% 45%,rgba(var(--licht-rgb),.12),transparent 70%),var(--flaeche);
  box-shadow:inset 0 0 0 1px var(--kante);text-align:center}
.wolke-titel{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--licht-hell);margin-bottom:.6rem}
.kugel-halt{display:flex;justify-content:center}
.kugel{position:relative;z-index:0;width:min(100%,40rem);height:min(80vw,26rem);overflow:hidden;contain:paint;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.nur-touch{display:none}
@media (hover:none){ .nur-maus{display:none} .nur-touch{display:inline} }
.kugel.zieht{cursor:grabbing}
.kugel:focus-visible{outline:2px solid var(--licht-hell);outline-offset:6px;border-radius:var(--rund)}
.kugel-wort{position:absolute;left:50%;top:50%;white-space:nowrap;font-size:.9375rem;
  font-weight:600;line-height:1;color:var(--creme);will-change:transform,opacity;
  transition:color .2s}
/* Der Mond in der Mitte: ein Netz aus Längen- und Breitenkreisen, das sich
   mit den Begriffen dreht. Vorne ziehen die Begriffe darüber, hinten
   verschwinden sie dahinter. Gezeichnet von js/wolke.js. */
.kugel-netz{position:absolute;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}
.kugel-wort.t1{color:#FBD0B6}
.kugel-wort.t2{color:#C3DDCB}
.kugel-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1rem;margin-top:.5rem}
.kugel-pause{border:0;background:rgba(244,236,228,.06);box-shadow:inset 0 0 0 1px var(--kante);
  color:var(--text);font:inherit;font-size:.75rem;font-weight:600;letter-spacing:.04em;
  padding:.4rem .8rem;border-radius:999px;cursor:pointer;min-height:24px}
.kugel-pause:hover{color:var(--creme)}
.kugel-pause:focus-visible{outline:2px solid var(--licht-hell);outline-offset:2px}
.kugel-hinweis{margin:0;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
@media(max-width:46rem){ .kugel-wort{font-size:.8125rem} .kugel{height:min(92vw,23rem)} .wolke{padding-inline:.25rem} }
@media(max-width:30rem){ .kugel-wort{font-size:.75rem} }

/* ── Videofeld: nichts vom Anbieter, bevor zugestimmt wurde ────────── */
.video-feld{position:relative;isolation:isolate}
.video-feld img{transition:filter .4s var(--weich),transform .6s var(--weich)}
.video-feld[data-stand="gesperrt"] img{filter:brightness(.5) saturate(.85)}
/* Solange das Video fehlt, steht nur das Foto da, ohne Knopf und ohne Abdunkeln. */
.video-feld[data-stand="folgt"] .video-start,.video-feld[data-stand="folgt"] .video-fuss{display:none}
.video-feld[data-stand="frei"] img{filter:brightness(.72)}
.video-feld iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
.video-feld[data-stand="laeuft"] .video-start,.video-feld[data-stand="laeuft"] .video-fuss{display:none}

.video-start{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.9rem;padding:1.5rem;
  border:0;background:none;color:var(--creme);font:inherit;cursor:pointer;text-align:center}
.video-feld[data-stand="folgt"] .video-start{cursor:default}
.video-knauf{display:grid;place-items:center;width:clamp(58px,7vw,76px);height:clamp(58px,7vw,76px);
  border-radius:50%;background:var(--licht);color:var(--auf-licht);
  box-shadow:0 10px 40px rgba(var(--licht-rgb),.45);transition:transform .3s var(--weich)}
.video-knauf svg{width:42%;height:42%;margin-left:8%}
.video-start:hover .video-knauf{transform:scale(1.07)}
.video-feld[data-stand="folgt"] .video-knauf{background:rgba(244,236,228,.14);color:var(--grau);box-shadow:none}
.video-feld[data-stand="folgt"] .video-start:hover .video-knauf{transform:none}
.video-start:focus-visible{outline:3px solid var(--licht-hell);outline-offset:-6px;border-radius:var(--rund)}
.video-worte{display:flex;flex-direction:column;gap:.25rem;max-width:32rem}
.video-titel{font-family:var(--titel);font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:600;letter-spacing:-.02em}
.video-klein{font-size:.875rem;line-height:1.5;color:var(--text)}

.video-fuss{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:.4rem 1.1rem;padding:.7rem 1.2rem;
  background:linear-gradient(transparent,rgba(10,7,6,.82) 55%);font-size:.8125rem;color:var(--text)}
.video-merk{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;min-height:24px;padding:.2rem 0}
.video-merk input{width:1rem;height:1rem;accent-color:var(--licht);cursor:pointer}
.video-fuss a{color:var(--licht-hell);min-height:24px;display:inline-flex;align-items:center}

.video-nur-gesperrt,.video-nur-frei,.video-nur-folgt{display:none}
.video-feld[data-stand="gesperrt"] .video-nur-gesperrt{display:flex}
.video-feld[data-stand="gesperrt"] span.video-nur-gesperrt{display:block}
.video-feld[data-stand="frei"] .video-nur-frei{display:block}
.video-feld[data-stand="folgt"] .video-nur-folgt{display:block}
.video-feld:not([data-stand]) .video-start{display:none}

/* ── Zwei Tarifkacheln ─────────────────────────────────────────────── */
.tarife{display:grid;grid-template-columns:1fr;gap:1px;background:var(--kante)}
@media(min-width:48rem){ .tarife{grid-template-columns:1fr 1fr} }
.tarif{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  padding:clamp(1.6rem,3.4vw,2.3rem);background:var(--flaeche-hoch)}
.tarif-lauf{flex:1}
.tarif-launch{background:radial-gradient(80% 70% at 100% 0%,rgba(var(--licht-rgb),.16),transparent 70%),var(--flaeche-hoch)}
.tarif-band{align-self:stretch;width:calc(100% + 2 * clamp(1.6rem,3.4vw,2.3rem));margin:calc(clamp(1.6rem,3.4vw,2.3rem) * -1) calc(clamp(1.6rem,3.4vw,2.3rem) * -1) .2rem;
  padding:.6rem 1.2rem;text-align:center;font-size:.75rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--auf-licht);
  background:linear-gradient(90deg,var(--licht-hell),var(--licht))}
.tarif-name{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.tarif-launch .tarif-name{color:var(--licht-hell)}
.tarif-band-still{background:rgba(244,236,228,.08);color:var(--text)}
.tarif-lauf{font-size:.9375rem;line-height:1.55;color:var(--text);flex:1}
.tarif-lauf b{color:var(--creme);font-weight:600}
.tarif .knopf{align-self:stretch;justify-content:center}
.tarif-mikro{font-size:.8125rem;line-height:1.5;color:var(--grau);min-height:3em}

/* ── Umschalter monatlich / jaehrlich ──────────────────────────────── */
.takt-halt{display:flex;justify-content:center;margin-bottom:clamp(1.1rem,2.4vw,1.6rem)}
.takt{display:inline-flex;gap:6px;padding:6px;border-radius:999px;
  background:var(--flaeche-hoch);box-shadow:inset 0 0 0 1px var(--kante-hell),0 12px 30px rgba(0,0,0,.3)}
.takt-knopf{border:0;background:none;font:inherit;cursor:pointer;color:var(--text);
  display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1.4rem;border-radius:999px;
  font-size:1rem;font-weight:600;transition:background .22s var(--weich),color .22s,box-shadow .22s}
.takt-knopf:hover{color:var(--creme)}
.takt-knopf.an{background:var(--licht);color:var(--auf-licht);box-shadow:0 6px 18px rgba(var(--licht-rgb),.4)}
.takt-knopf > span{font-size:.8125rem;font-weight:700;padding:.22rem .6rem;border-radius:999px;
  background:var(--moos);color:#10201A;white-space:nowrap}
.takt-knopf.an > span{background:#10201A;color:#BFE0CB}
.takt-knopf:focus-visible{outline:2px solid var(--licht-hell);outline-offset:2px}
@media(max-width:26rem){ .takt-knopf{padding:.6rem .8rem;font-size:.875rem} .takt-knopf > span{display:none} }

.angebot[data-takt="monat"] .t-jahr,.angebot[data-takt="jahr"] .t-monat{display:none}

/* ── Versprechen ───────────────────────────────────────────────────── */
.angebot-garantie{display:flex;flex-direction:row;align-items:center;gap:clamp(.9rem,2vw,1.3rem);
  padding:clamp(1.3rem,3vw,1.8rem) clamp(1.6rem,3.4vw,2.4rem);
  border-top:1px solid var(--kante);background:rgba(127,169,138,.12)}
.angebot-garantie b{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--titel);
  font-size:1.2rem;font-weight:600;letter-spacing:-.02em;color:var(--creme);margin:0}
.angebot-garantie b::after{content:"14 Tage Geld zurück";font-family:var(--schrift);
  font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#A6C9B1;padding:.25rem .6rem;border-radius:999px;background:rgba(127,169,138,.18);
  box-shadow:inset 0 0 0 1px rgba(127,169,138,.35)}
.angebot-garantie p{font-size:1.0313rem;line-height:1.6;color:var(--text);max-width:52rem}
/* Mobil untereinander. Muss hinter der Grundregel stehen, sonst gewinnt die. */
@media(max-width:34rem){ .angebot-garantie{flex-direction:column;align-items:flex-start;text-align:left}
  .siegel{margin-bottom:.4rem} .angebot-garantie b{flex-wrap:wrap;gap:.35rem .5rem} }

/* ── Geschenk direkt unter dem Preis ───────────────────────────────── */
.preis-geschenk{max-width:62rem;margin:12px auto 0;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:1rem 1.6rem;
  padding:clamp(1.2rem,2.8vw,1.6rem) clamp(1.6rem,3.4vw,2.4rem);border-radius:var(--rund);
  background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante)}
.preis-geschenk b{display:block;font-family:var(--titel);font-size:1.15rem;font-weight:600;
  letter-spacing:-.02em;color:var(--creme);margin-bottom:.25rem}
.preis-geschenk p{font-size:.9375rem;line-height:1.55;color:var(--text);max-width:40rem}
.preis-geschenk .knopf{flex:none}

/* ── Geschenkkarte in der Verschenken-Sektion ──────────────────────── */
.geschenk-karte{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
  padding:clamp(1.3rem,3vw,1.7rem);border-radius:var(--rund);
  background:radial-gradient(90% 80% at 100% 0%,rgba(var(--licht-rgb),.14),transparent 70%),var(--flaeche);
  box-shadow:inset 0 0 0 1px rgba(var(--licht-rgb),.28)}
.geschenk-dauer{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--licht-hell)}
.geschenk-preis{font-family:var(--titel);font-size:clamp(2.4rem,5vw,3.2rem);font-weight:600;
  letter-spacing:-.05em;line-height:1;color:var(--creme)}
.geschenk-klein{font-size:.9063rem;color:var(--text)}
.geschenk-rechnung{margin:.5rem 0 .9rem;font-size:.8125rem;font-weight:600;color:var(--licht-hell);
  padding:.35rem .7rem;border-radius:999px;background:rgba(var(--licht-rgb),.1);
  box-shadow:inset 0 0 0 1px rgba(var(--licht-rgb),.25);align-self:flex-start}
.geschenk-karte .knopf{align-self:stretch;justify-content:center}

/* ── Rechner mit Schieberegler ──────────────────────────────────────── */
.rechner{max-width:34rem;margin:clamp(1.6rem,3vw,2.2rem) auto 0;display:flex;flex-direction:column;gap:.7rem}
.rechner-frage{font-size:.9375rem;font-weight:600;color:var(--creme);text-align:center}
.schieber{position:relative;height:40px;display:flex;align-items:center}
.schieber input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:grab;
  -webkit-appearance:none;appearance:none;background:none}
.schieber input:active{cursor:grabbing}
.schieber-bild{position:absolute;left:11px;right:11px;top:50%;height:22px;transform:translateY(-50%);pointer-events:none}
.schieber-spur{position:absolute;left:-11px;right:-11px;top:50%;height:6px;transform:translateY(-50%);
  border-radius:999px;background:rgba(244,236,228,.12)}
.schieber-voll{position:absolute;left:-11px;top:50%;height:6px;width:calc(var(--p,0%) + 11px);transform:translateY(-50%);
  border-radius:999px;background:linear-gradient(90deg,rgba(var(--licht-rgb),.55),var(--licht));
  transition:width .18s var(--weich)}
.schieber-geist{position:absolute;top:50%;left:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  background:var(--grund);box-shadow:inset 0 0 0 2px rgba(246,180,145,.55);opacity:0;
  transition:left .18s var(--weich),opacity .5s ease}
.schieber-griff{position:absolute;top:50%;left:var(--p,0%);width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:var(--creme);box-shadow:0 2px 10px rgba(0,0,0,.45);transition:left .18s var(--weich)}
.schieber input:focus-visible ~ .schieber-bild .schieber-griff{outline:2px solid var(--licht-hell);outline-offset:3px}
.schieber-skala{display:flex;justify-content:space-between;margin-top:-.3rem;font-size:.8125rem;color:var(--grau)}
.schieber-skala span{transition:color .18s,font-weight .18s}
.schieber-skala .an{color:var(--licht-hell);font-weight:700}
.rechner-aus{font-size:.9375rem;color:var(--text);text-align:center;line-height:1.55;min-height:1.55em}
.rechner-aus b{color:var(--creme);font-weight:600}
@media (prefers-reduced-motion:reduce){
  .schieber-voll,.schieber-griff,.schieber-geist{transition:none}
}

/* ── Feine Bewegung ─────────────────────────────────────────── */
.fortschritt{display:none}
@media (prefers-reduced-motion:no-preference){

  /* Lesefortschritt als feine Linie unter dem Kopf */
  @supports (animation-timeline: scroll()){
    .fortschritt{display:block;position:fixed;left:0;top:calc(var(--kopf-h) - 1px);height:2px;width:100%;z-index:41;
      transform-origin:0 50%;pointer-events:none;
      background:linear-gradient(90deg,rgba(var(--licht-rgb),.3),var(--licht-hell));
      animation:fortschritt linear both;animation-timeline:scroll(root block)}
    @keyframes fortschritt{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }

  /* Wo scrollgebundene Animationen fehlen (Safari, Firefox), setzt
     js/fortschritt.js die Variable --gelesen per Scroll-Listener. */
  @supports not (animation-timeline: scroll()){
    .fortschritt{display:block;position:fixed;left:0;top:calc(var(--kopf-h) - 1px);height:2px;width:100%;z-index:41;
      transform-origin:0 50%;transform:scaleX(var(--gelesen,0));pointer-events:none;
      background:linear-gradient(90deg,rgba(var(--licht-rgb),.3),var(--licht-hell))}
  }

  /* Die Überschrift kommt Wort für Wort */
  .wortweise .w{display:inline-block;animation:wort .9s var(--weich) both;
    animation-delay:calc(.3s + var(--w,0) * 55ms)}
  @keyframes wort{from{opacity:0;transform:translateY(.55em) rotate(1.2deg);filter:blur(6px)}
    to{opacity:1;transform:none;filter:none}}

  /* Das Hero-Bild schiebt sich auf */
  .hero-bild{animation:bildauf .85s var(--weich) .25s both}
  @keyframes bildauf{from{clip-path:inset(38% 10% 0 10% round var(--rund))}
    to{clip-path:inset(0 0 0 0 round var(--rund))}}
  .hero-bild img{animation:bildnah 1.1s var(--weich) .25s both}
  @keyframes bildnah{from{transform:scale(1.09)}to{transform:none}}

  /* Team- und Blogbilder wischen beim Hineinscrollen auf */
  .portraet.zeig,.kollegin.zeig figure{position:relative}
  .portraet.zeig::after,.kollegin.zeig figure::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:var(--grund);transform-origin:50% 100%;transition:transform .6s var(--weich);
    transition-delay:calc(var(--i,0) * 55ms)}
  .kollegin.zeig figure::after{background:var(--flaeche)}
  .portraet.zeig.da::after,.kollegin.zeig.da figure::after{transform:scaleY(0)}

  /* Das Zitat bekommt eine Kante, die mitwächst */
  .zitat::before{content:"";position:absolute;left:0;top:1rem;bottom:1rem;width:2px;border-radius:2px;
    background:linear-gradient(var(--licht-hell),rgba(var(--licht-rgb),.25));
    transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--weich) .35s}
  .zitat.da::before{transform:none}
  @supports (animation-timeline: view()){
    .zitat p{animation:hell linear both;animation-timeline:view();animation-range:entry 95% cover 38%}
  }

  /* Die Zahl stellt sich scharf */
  .angebot.zeig .preis-zahl{opacity:0;transform:translateY(.4rem) scale(.94);filter:blur(5px);
    transition:opacity .8s var(--weich) .4s,transform .9s var(--weich) .4s,filter .9s var(--weich) .4s}
  .angebot.zeig.da .preis-zahl{opacity:1;transform:none;filter:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.2s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  :hover{transform:none!important}
  html{scroll-behavior:auto!important}
  .zeig{opacity:1!important;transform:none!important}
  .hero-bild,.hero-bild img{clip-path:none!important}
  .portraet::after,.kollegin figure::after{display:none!important}
  .preis-zahl{opacity:1!important;filter:none!important;transform:none!important}
  .weg::before{transform:none}
  .station h3,.station p{opacity:1;transform:none}
}
/* Auf Handys sieht man den Unschärfe-Effekt kaum, er kostet aber bei jedem Scroll-Bild Rechenzeit. */
@media (max-width:52rem),(hover:none){
  .fenster{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(22,16,13,.94)}
  .kopf.fest{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(16,12,10,.94)}
}
@media (prefers-reduced-transparency:reduce){
  .fenster,.kopf.fest{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--flaeche)}
}

@media(max-width:40rem){ .wahl label{padding:.75rem 1.35rem} }