/* ═══════════════════════════════════════════════════════════════════════
   PRIMA DAMA · Fassung 5.0
   ───────────────────────────────────────────────────────────────────────
   FÜR WEN

   Sie ist 21 bis 28. Sie liest die Seite auf dem Handy, abends, nebenbei.
   Sie ist nicht dumm, aber sie hat keine Lust auf Fachbegriffe und liest
   keine Absätze. Sie will in zehn Sekunden wissen:
     · Was muss ich machen?      → wenig
     · Was macht ihr?            → alles andere
     · Was verdiene ich?         → ehrlich gerechnet
     · Komme ich wieder raus?    → jederzeit

   WAS DARAUS FOLGT
   1. Warm statt technisch. Creme und Rosé, kein Grau, kein Blaugrün.
   2. Runde Formen, weiche Schatten. Nichts hat harte Kanten.
   3. Kurze Sätze, große Schrift, wenig pro Bildschirm.
   4. Der Bewerben-Knopf ist nie weiter als eine Daumenlänge weg.
   5. Keine Tabellen, keine Register, keine Fachwörter.
   6. Zahlen groß und freundlich, nie als Datenblatt.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Flächen: warm, nicht klinisch ─────────────────── */
  --bg:#FDFAF7;
  --bg-2:#F6EFE9;
  --bg-3:#FBF4EF;
  --bg-tief:#2B211F;
  --line:#EBE0D8;
  --line-2:#DCCDC2;

  /* ── Schrift ───────────────────────────────────────── */
  --ink:#241D1B;
  --ink-2:#6B5F59;
  --ink-3:#9A8C84;

  /* ── Akzent: warmes Rosé-Rot ───────────────────────── */
  --akzent:#C98686;
  --akzent-d:#A15A5A;
  --akzent-w:#F6E8E6;
  --gold:#C9A15C;

  --nav-h:58px;
  --maxw:1080px;
  --lese:620px;

  --r:20px; --r-l:32px; --r-xl:44px;

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,
         Roboto,"Helvetica Neue",Arial,sans-serif;

  --ease:cubic-bezier(.22,.75,.3,1);
  --schatten:0 6px 20px rgba(90,60,50,.07), 0 26px 60px rgba(90,60,50,.09);
  --schatten-s:0 3px 12px rgba(90,60,50,.06), 0 12px 32px rgba(90,60,50,.07);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  font-family:var(--sans);background:var(--bg);color:var(--ink);
  font-size:18px;line-height:1.6;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:88px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(201,134,134,.16)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:4px;border-radius:8px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.lese{max-width:var(--lese)}
.mitte{text-align:center}
.mitte .lese{margin-left:auto;margin-right:auto}

section{padding:64px 0}
.luft{padding:84px 0}
.creme{background:var(--bg-2)}
.zart{background:var(--bg-3)}
.tief{background:var(--bg-tief);color:#fff}
.tief p{color:rgba(255,255,255,.7)}

/* ── Schrift ───────────────────────────────────────── */
h1{font-size:clamp(38px,9.5vw,74px);line-height:1.04;letter-spacing:-.035em;font-weight:680}
h2{font-size:clamp(29px,6.6vw,50px);line-height:1.08;letter-spacing:-.03em;font-weight:680}
h3{font-size:clamp(19px,2.6vw,23px);line-height:1.25;letter-spacing:-.02em;font-weight:620}
p{color:var(--ink-2)}
p + p{margin-top:16px}

.gross{font-size:clamp(19px,2.6vw,24px);line-height:1.45;color:var(--ink-2);
  letter-spacing:-.018em}
.klein{font-size:15px;line-height:1.5;color:var(--ink-3)}

.tag{display:inline-block;font-size:14px;font-weight:640;color:var(--akzent);
  margin-bottom:14px}

/* Kleines Vertrauens-Band */
.band{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px}
.band span{display:inline-flex;align-items:center;gap:7px;font-size:14px;
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
  padding:8px 15px;border-radius:100px;box-shadow:var(--schatten-s)}
.band svg{width:14px;height:14px;color:var(--akzent)}

/* ── Knöpfe: groß, rund, freundlich ────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:18px;font-weight:620;letter-spacing:-.014em;
  padding:17px 34px;border-radius:100px;border:2px solid transparent;cursor:pointer;
  background:var(--akzent);color:#fff;font-family:var(--sans);
  box-shadow:0 6px 18px rgba(201,134,134,.26);
  transition:background .22s ease,transform .2s var(--ease),box-shadow .28s ease,
    color .22s ease,border-color .22s ease;
}
.btn:hover{background:var(--akzent-d);transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(201,134,134,.34)}
.btn-linie{background:#fff;color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn-linie:hover{background:#fff;border-color:var(--akzent);color:var(--akzent);
  box-shadow:var(--schatten-s)}
.btn-hell{background:#fff;color:var(--ink);box-shadow:0 6px 20px rgba(0,0,0,.2)}
.btn-hell:hover{background:#fff;color:var(--akzent)}
.btn-voll{width:100%}
.btn svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.aktion{display:flex;flex-wrap:wrap;gap:12px}
.aktion.mitte{justify-content:center}
.unterknopf{font-size:14.5px;color:var(--ink-3);margin-top:14px}

.tl{color:var(--akzent);border-bottom:1px solid rgba(201,134,134,.35)}
.tl:hover{border-bottom-color:var(--akzent)}

/* ═══ KOPFLEISTE ════════════════════════════════════ */
nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;
  background:rgba(253,250,247,.82);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s ease}
nav.stuck{border-bottom-color:var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.marke{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:700;
  letter-spacing:.08em}
.marke .zeichen{height:27px;width:auto;flex-shrink:0;display:block}
.f-marke .marke .zeichen{height:30px}
.nav-links{display:none;gap:28px;font-size:15px;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav-rechts{display:flex;align-items:center;gap:12px}
.sprache{display:flex;gap:2px;font-size:13px;color:var(--ink-3)}
.sprache a{padding:4px 7px;border-radius:7px}
.sprache a.hier{color:var(--ink);font-weight:640}
.sprache a:hover{background:var(--bg-2)}
.nav-btn{font-size:14.5px;padding:10px 20px;box-shadow:none}
.burger{display:flex;flex-direction:column;gap:4px;background:none;border:0;
  cursor:pointer;padding:8px;margin-right:-8px}
.burger i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s ease}
.burger.auf i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.auf i:nth-child(2){opacity:0}
.burger.auf i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menue{position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;
  background:var(--bg);
  border-bottom:1px solid var(--line);padding:12px 22px 28px;
  max-height:calc(100dvh - var(--nav-h));overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(-120%);-webkit-transform:translateY(-120%);
  transition:transform .34s var(--ease),-webkit-transform .34s var(--ease)}
.menue.auf{transform:translateY(0);-webkit-transform:translateY(0)}
.menue a{display:block;font-size:21px;font-weight:600;letter-spacing:-.024em;
  padding:15px 0;border-bottom:1px solid var(--line)}
.menue .btn{width:100%;margin-top:20px}

/* ═══ KOPFBEREICH ═══════════════════════════════════ */
.kopf{padding:calc(var(--nav-h) + 52px) 0 0;text-align:center}
.kopf h1{margin:0 auto 22px}
.kopf .gross{max-width:22ch;margin:0 auto 32px}
.kopf.links{text-align:left}
.kopf.links h1,.kopf.links .gross{margin-left:0}

.buehne{margin-top:52px;border-radius:var(--r-xl);overflow:hidden;
  background:var(--bg-2);aspect-ratio:4/3;box-shadow:var(--schatten)}
.buehne img{width:100%;height:100%;object-fit:cover}
@media(min-width:700px){.buehne{aspect-ratio:16/9}}

.ph{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:24px;
  background:linear-gradient(150deg,#F7EEE8,#F1E3DA 60%,#F7EEE8);
  color:var(--ink-3);font-size:12.5px;line-height:1.7;letter-spacing:0}
.ph b{display:block;color:var(--ink-2);font-size:14px;font-weight:640;margin-bottom:6px;
  letter-spacing:-.01em}

/* ═══ SPLIT: was du / was wir ═══════════════════════ */
.teilung{display:grid;gap:18px}
.seite{border-radius:var(--r-l);padding:32px 26px;box-shadow:var(--schatten-s)}
.seite.du{background:#fff;border:2px solid var(--akzent)}
.seite.wir{background:var(--bg-2)}
.seite .kopfzeile{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.seite .kopfzeile b{font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--akzent)}
.seite.wir .kopfzeile b{color:var(--ink-3)}
.seite h3{margin-bottom:20px;font-size:clamp(22px,4vw,28px)}
.seite ul{list-style:none}
.seite li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  font-size:17px;color:var(--ink-2)}
.seite li svg{width:19px;height:19px;flex-shrink:0;margin-top:3px;color:var(--akzent)}
.seite.wir li svg{color:var(--ink-3)}

/* ═══ GROSSE PUNKTE ═════════════════════════════════ */
.punkte{display:grid;gap:14px}
.punkt{background:#fff;border-radius:var(--r-l);padding:28px 26px;
  box-shadow:var(--schatten-s);transition:transform .3s var(--ease)}
.punkt:hover{transform:translateY(-3px)}
.punkt h3{margin-bottom:10px}
.punkt p{font-size:17px;margin:0}
.tief .punkt{background:rgba(255,255,255,.07)}
.tief .punkt h3{color:#fff}

/* ═══ DUNKLER PREMIUM-BLOCK ═════════════════════════ */
.dunkel{position:relative;overflow:hidden;background:var(--bg-tief);color:#fff}
.dunkel .wrap{position:relative;z-index:2}
.dunkel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 50% at 12% 8%,rgba(201,161,92,.20),transparent 62%),
    radial-gradient(60% 55% at 92% 96%,rgba(201,134,134,.24),transparent 64%)}
.dunkel h1,.dunkel h2,.dunkel h3{color:#fff}
.dunkel .gross{color:rgba(255,255,255,.82)}
.dunkel .zahl b{color:#F1CB8B}
.dunkel .zahl span{color:rgba(255,255,255,.7)}

/* ═══ Kontakt-Umschalter (WhatsApp / E-Mail) ═══ */
.kw-weg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kw-weg button{padding:13px 14px;border-radius:12px;border:1.5px solid var(--line-2);
  background:#fff;color:var(--ink-2);font-size:15px;font-weight:640;cursor:pointer;
  transition:all .2s ease}
.kw-weg button:hover{border-color:var(--akzent)}
.kw-weg button.an{border-color:var(--akzent);background:var(--akzent-w);color:var(--akzent-d)}
.kw-tel-reihe{display:grid;grid-template-columns:106px 1fr;gap:8px}
.kw-tel-reihe select{width:100%;min-width:0}

/* ═══ LP · Formular-Split (Foto-Panel + weiße Karte) ═══ */
.lpf-grid{display:grid;gap:26px;align-items:stretch}
/* Weiße Formular-Karte: Text IMMER dunkel, egal ob in .dunkel */
.lpf-grid .formular{margin:0;max-width:none;color:var(--ink)}
.dunkel .formular,.dunkel .formular label,.dunkel .formular .feld label,
.dunkel .formular input,.dunkel .formular select,.dunkel .formular textarea,
.dunkel .formular .haken label{color:var(--ink)}
.dunkel .formular .opt,.dunkel .formular .hinweis{color:var(--ink-3)}

/* Foto-Panel mit Text-Overlay */
.lpf-bild{position:relative;overflow:hidden;border-radius:26px;min-height:460px;
  display:flex;align-items:flex-end;box-shadow:0 34px 74px -32px rgba(0,0,0,.5)}
.lpf-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.lpf-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,14,12,.15) 0%,rgba(20,14,12,.55) 45%,rgba(20,14,12,.9) 100%)}
.lpf-bild-in{position:relative;z-index:2;padding:34px 32px;color:#fff}
.lpf-bild-in .tag{color:#FFCE9E;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24)}
.lpf-bild-in h2{color:#fff;font-size:clamp(26px,3.4vw,38px);line-height:1.05;margin:12px 0 22px}
.lpf-steps{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.lpf-steps li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:rgba(255,255,255,.85)}
.lpf-steps li span{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.16);color:#FFCE9E;font-weight:800;font-size:13px}
.lpf-steps li b{color:#fff}
.lpf-trust{display:flex;flex-wrap:wrap;gap:9px}
.lpf-trust span{font-size:13px;color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:6px 13px}
@media(min-width:900px){
  .lpf-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px}
}

/* ═══ ZAHLEN ════════════════════════════════════════ */
.zahlen{display:grid;gap:34px;text-align:center}
.zahl b{display:block;font-size:clamp(52px,13vw,80px);font-weight:700;
  letter-spacing:-.05em;line-height:.98;color:var(--akzent)}
.tief .zahl b{color:#fff}
.zahl span{display:block;font-size:16.5px;color:var(--ink-2);margin-top:12px;
  max-width:22ch;margin-left:auto;margin-right:auto}
.tief .zahl span{color:rgba(255,255,255,.66)}

/* ═══ RECHNER ═══════════════════════════════════════ */
.rechner{background:#fff;border-radius:var(--r-xl);padding:32px 24px;
  box-shadow:var(--schatten)}
.r-kopf{text-align:center;margin-bottom:26px}
.r-kopf span{display:block;font-size:15.5px;color:var(--ink-3);margin-bottom:8px}
.r-wert{font-size:clamp(38px,9vw,56px);font-weight:700;letter-spacing:-.04em;
  color:var(--ink);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;
  border-radius:100px;cursor:pointer;outline:none;
  background:linear-gradient(90deg,var(--akzent) 0%,var(--akzent) var(--pct,30%),
    var(--bg-2) var(--pct,30%),var(--bg-2) 100%)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;
  border-radius:50%;background:#fff;border:0;cursor:grab;
  box-shadow:0 2px 6px rgba(90,60,50,.22),0 6px 18px rgba(90,60,50,.18)}
input[type=range]::-moz-range-thumb{width:32px;height:32px;border-radius:50%;
  background:#fff;border:0;cursor:grab;box-shadow:0 2px 6px rgba(90,60,50,.22)}
.r-out{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.r-feld{background:var(--bg-3);border-radius:var(--r);padding:22px 14px;text-align:center}
.r-feld.du{background:var(--akzent-w)}
.r-feld b{display:block;font-size:clamp(28px,7vw,40px);font-weight:700;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.r-feld.du b{color:var(--akzent)}
.r-feld span{display:block;font-size:14.5px;color:var(--ink-3);margin-top:10px}

/* ═══ FRAGEN ════════════════════════════════════════ */
details{background:#fff;border-radius:var(--r);margin-bottom:10px;
  box-shadow:var(--schatten-s);overflow:hidden}
summary{padding:22px 52px 22px 24px;font-size:18px;font-weight:600;
  letter-spacing:-.02em;cursor:pointer;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:24px;top:28px;width:10px;height:10px;
  border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent);
  transform:rotate(45deg);transition:transform .28s var(--ease)}
details[open] summary::after{transform:rotate(-135deg);top:32px}
details p{font-size:16.5px;padding:0 24px 24px}
/* Fragen zweispaltig */
.fragen-2sp{max-width:980px;margin:0 auto}
@media(min-width:760px){
  .fragen-2sp{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  .fragen-2sp details{margin-bottom:0}
}

/* ═══ FORMULAR ══════════════════════════════════════ */
.formular{background:#fff;border-radius:var(--r-xl);padding:30px 22px;
  box-shadow:var(--schatten);max-width:520px;margin:0 auto}
.fortschritt{height:6px;background:var(--bg-2);border-radius:100px;overflow:hidden;
  margin-bottom:28px}
.fortschritt i{display:block;height:100%;width:0;background:var(--akzent);
  border-radius:100px;transition:width .4s var(--ease)}
.feld{margin-bottom:20px}
.reihe{display:grid;gap:20px;grid-template-columns:1fr}
label{display:block;font-size:16px;font-weight:620;margin-bottom:9px;
  letter-spacing:-.014em}
label .opt{font-weight:400;color:var(--ink-3)}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;padding:15px 17px;font-size:17px;font-family:var(--sans);
  background:var(--bg-3);border:2px solid transparent;border-radius:var(--r);
  color:var(--ink);transition:border-color .2s ease,background .2s ease}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--akzent);
  background:#fff}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' fill='none'%3E%3Cpath d='M1.5 1.5l5 5 5-5' stroke='%239A8C84' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 17px center}
textarea{resize:vertical;min-height:96px;line-height:1.5}
.hinweis{font-size:14.5px;color:var(--ink-3);margin-top:9px;line-height:1.5}
.haken{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.haken input{width:22px;height:22px;margin-top:1px;flex-shrink:0;
  accent-color:var(--akzent);cursor:pointer}
.haken label{font-size:15.5px;font-weight:400;color:var(--ink-2);margin:0;
  line-height:1.45;cursor:pointer}
.hp{position:absolute;left:-9999px}
.fehler{display:none;font-size:16px;color:var(--akzent-d);background:var(--akzent-w);
  border-radius:var(--r);padding:14px 18px;margin:0 0 20px}

/* ═══ KASTEN ════════════════════════════════════════ */
.kasten{background:#fff;border-radius:var(--r-l);padding:28px 24px;
  box-shadow:var(--schatten-s)}
.kasten.akz{background:var(--akzent-w);box-shadow:none}
.kasten h3{margin-bottom:12px}
.kasten p{font-size:17px}

/* ═══ FUSS ══════════════════════════════════════════ */
footer{border-top:1px solid var(--line);padding:52px 0 44px;background:var(--bg-2)}
.f-top{display:flex;flex-direction:column;gap:32px;margin-bottom:38px}
.f-marke{max-width:280px}
.f-marke p{font-size:15px;margin-top:14px;color:var(--ink-3)}
.f-spalten{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.f-spalte h4{font-size:14px;color:var(--ink-3);font-weight:640;margin-bottom:14px}
.f-spalte a{display:block;font-size:16px;color:var(--ink-2);padding:6px 0}
.f-spalte a:hover{color:var(--akzent)}
.f-bot{padding-top:26px;border-top:1px solid var(--line);display:flex;
  flex-direction:column;gap:10px;font-size:14px;color:var(--ink-3)}

/* ═══ HAFTLEISTE ════════════════════════════════════ */
.haft{position:fixed;left:0;right:0;bottom:0;z-index:95;padding:12px 20px 18px;
  background:rgba(253,250,247,.94);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line)}
.haft .btn{width:100%}

/* ═══ EINBLENDUNG ═══════════════════════════════════ */
.auf{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.auf.in{opacity:1;transform:none}
.auf-s>*{opacity:0;transform:translateY(20px);
  transition:opacity .65s var(--ease),transform .65s var(--ease)}
.auf-s.in>*{opacity:1;transform:none}
.auf-s.in>*:nth-child(2){transition-delay:.09s}
.auf-s.in>*:nth-child(3){transition-delay:.18s}
.auf-s.in>*:nth-child(4){transition-delay:.27s}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .auf,.auf-s>*{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ═══ UMBRÜCHE ══════════════════════════════════════ */
@media(min-width:700px){
  .reihe{grid-template-columns:1fr 1fr}
  .zahlen{grid-template-columns:repeat(3,1fr)}
  .punkte{grid-template-columns:1fr 1fr}
  .teilung{grid-template-columns:1fr 1fr;gap:22px}
  .rechner{padding:44px 40px}
  .formular{padding:40px 36px}
  .kasten{padding:36px 34px}
  .f-bot{flex-direction:row;justify-content:space-between;align-items:center}
}
@media(min-width:960px){
  .nav-links{display:flex}
  .burger{display:none}
  section{padding:92px 0}
  .luft{padding:120px 0}
  .f-top{flex-direction:row;justify-content:space-between}
  .f-spalten{grid-template-columns:repeat(3,1fr);gap:56px}
  .haft{display:none}
  body{padding-bottom:0}
}

/* ═══════════════════════════════════════════════════════════════════════
   ZUSATZ 5.1 · Kontrast, Bewegung, interaktive Teile
   Ziel: Die drei Argumente (nichts zahlen, alles abgenommen, jederzeit
   raus) müssen in unter zehn Sekunden ankommen — auch beim Scrollen
   mit halber Aufmerksamkeit.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Dunkler Kopf mit Bild dahinter ───────────────── */
.held{position:relative;overflow:hidden;background:var(--bg-tief);color:#fff;
  padding:calc(var(--nav-h) + 64px) 0 72px;text-align:center}
.held-bg{position:absolute;inset:0;z-index:0}
.held-bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.held-bg .ph{opacity:.22}
.held::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,rgba(43,33,31,.35),rgba(43,33,31,.9) 72%)}
.held .wrap{position:relative;z-index:2}
.held h1{color:#fff}
.held .gross{color:rgba(255,255,255,.82)}
.held .unterknopf{color:rgba(255,255,255,.6)}
.held .band span{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);
  color:#fff;backdrop-filter:blur(8px)}
.held .band svg{color:#fff}
nav.auf-hell{background:transparent;border-bottom-color:transparent}

/* ── Kontrastband: drei Argumente, groß ───────────── */
.usp{display:grid;gap:2px;background:var(--line)}
.usp > div{background:#fff;padding:38px 24px;text-align:center;
  transition:background .3s ease,transform .3s var(--ease)}
.usp > div:hover{background:var(--akzent-w);transform:translateY(-2px)}
.usp b{display:block;font-size:clamp(40px,10vw,64px);font-weight:700;
  letter-spacing:-.05em;line-height:1;color:var(--akzent);
  font-variant-numeric:tabular-nums}
.usp span{display:block;font-size:17px;font-weight:600;color:var(--ink);margin-top:12px}
.usp small{display:block;font-size:15px;color:var(--ink-3);margin-top:6px}
@media(min-width:700px){.usp{grid-template-columns:repeat(3,1fr)}}

/* ── Umschalter: vorher / nachher ─────────────────── */
.schalter{display:inline-flex;background:var(--bg-2);border-radius:100px;padding:5px;
  gap:4px;margin:0 auto 28px}
.schalter button{border:0;background:transparent;font-family:var(--sans);font-size:16px;
  font-weight:620;color:var(--ink-2);padding:11px 24px;border-radius:100px;cursor:pointer;
  transition:background .25s var(--ease),color .25s ease}
.schalter button.an{background:#fff;color:var(--akzent);box-shadow:var(--schatten-s)}
.tafel{display:none}
.tafel.an{display:block;animation:einblenden .45s var(--ease)}
@keyframes einblenden{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tagesliste{list-style:none;max-width:440px;margin:0 auto;text-align:left}
.tagesliste li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid var(--line);font-size:17px;color:var(--ink-2)}
.tagesliste li:last-child{border-bottom:none}
.tagesliste .zeit{font-weight:700;color:var(--ink);flex-shrink:0;width:58px;
  font-variant-numeric:tabular-nums}
.tagesliste li.frei{color:var(--akzent);font-weight:600}

/* ── Fortschrittsbalken oben ──────────────────────── */
.fortschrittsleiste{position:fixed;top:0;left:0;height:3px;width:100%;z-index:120;
  background:var(--akzent);transform:scaleX(0);transform-origin:0 50%}

/* ── Zahl, die beim Sichtbarwerden hochzählt ──────── */
.zaehlt{font-variant-numeric:tabular-nums}

/* ── Sanftes Schweben für Bildkacheln ─────────────── */
.schwebt{animation:schweben 7s ease-in-out infinite}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ── Hintergrundbild für helle Abschnitte ─────────── */
.mit-bild{position:relative;overflow:hidden}
.mit-bild .hg{position:absolute;inset:0;z-index:0;opacity:.1}
.mit-bild .hg img{width:100%;height:100%;object-fit:cover}
.mit-bild .wrap{position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){
  .schwebt{animation:none}
  .tafel.an{animation:none}
}

/* ═══ Zusatz 5.2 · Bildflächen ═════════════════════════════ */
.tafel-bild{border-radius:var(--r-l);overflow:hidden;max-width:340px;margin:0 auto 24px;
  box-shadow:var(--schatten);aspect-ratio:3/4}
.tafel-bild img{width:100%;height:100%;object-fit:cover}

.seite-bild{border-radius:var(--r);overflow:hidden;margin-bottom:22px;aspect-ratio:3/4;
  max-height:300px}
.seite-bild img{width:100%;height:100%;object-fit:cover;object-position:center 30%}

.streifen{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.streifen figure{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--bg-2)}
.streifen figure.breit{grid-column:span 2;aspect-ratio:16/9}
.streifen img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.streifen figure:hover img{transform:scale(1.04)}
@media(min-width:700px){
  .streifen{grid-template-columns:repeat(4,1fr);gap:14px}
  .streifen figure.breit{grid-column:span 2;aspect-ratio:3/4}
}

/* ═══ Zusatz 5.3 · Klartext mit Bild ═══════════════════════ */
.paar-eng{display:grid;gap:22px;align-items:center;max-width:900px;margin:0 auto}
.bild-klein{border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/9;
  box-shadow:var(--schatten-s)}
.bild-klein img{width:100%;height:100%;object-fit:cover}
@media(min-width:760px){
  .paar-eng{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:34px}
}

/* ═══════════════════════════════════════════════════════════════════════
   ZUSATZ 5.4 · Breite nutzen
   Problem: Auf grossen Schirmen stand alles in einer 620px-Spalte
   mittig, links und rechts blieben je 700px leer. Ab 900px laufen die
   grossen Bloecke deshalb jetzt zweispaltig.
   ═══════════════════════════════════════════════════════════════════════ */
:root{--maxw:1240px}

/* Zweispalter: Text links, Bauteil rechts */
.block2{display:grid;gap:34px;align-items:center}
.block2 .text h2{margin-bottom:16px}
.block2 .text .gross{max-width:26ch}
@media(min-width:900px){
  .block2{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:70px}
  .block2.dreh{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .block2.dreh .text{order:2}
  .block2 .text{text-align:left}
  .block2 .text h2{font-size:clamp(32px,3.6vw,52px)}
}

/* Rechner darf breiter werden */
@media(min-width:900px){
  .rechner{padding:48px 46px}
  .r-wert{font-size:clamp(40px,4vw,58px)}
  .r-out{gap:18px}
  .r-feld{padding:28px 18px}
  .r-feld b{font-size:clamp(30px,3.2vw,44px)}
}

/* Dienstagabend: Bild links, Liste rechts */
.abend{display:grid;gap:26px;align-items:start}
.abend .tafel-bild{max-width:none;margin:0;aspect-ratio:3/4}
.abend .tagesliste{max-width:none;margin:0}
.abend .tagesliste li{font-size:18px;padding:17px 0}
@media(min-width:900px){
  .abend{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
  .tafel{display:none}
  .tafel.an{display:contents}
  .abend-innen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;
    align-items:start}
}

/* Vier Karten statt zwei nebeneinander, wenn Platz ist */
@media(min-width:1000px){
  .punkte{grid-template-columns:repeat(4,1fr)}
  .punkt{padding:32px 26px}
}

/* Bildstreifen darf hoeher werden */
@media(min-width:900px){
  .streifen figure{aspect-ratio:3/4}
  .streifen{gap:18px}
}

/* Weniger Luft, mehr Inhalt pro Bildschirm */
@media(min-width:900px){
  .luft{padding:104px 0}
  section{padding:88px 0}
}

/* ═══════════════════════════════════════════════════════════════════════
   ZUSATZ 6.0 · Reichere Navigation und dichtere Startseite
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Aufklapp-Menü in der Kopfleiste ──────────────── */
.nav-links{position:relative}
.nav-punkt{position:relative}
.nav-punkt > a{display:inline-flex;align-items:center;gap:6px;padding:18px 0}
.nav-punkt > a::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
  opacity:.45;transition:transform .28s var(--ease),opacity .2s ease}
.nav-punkt:hover > a::after{transform:rotate(225deg) translateY(-2px);opacity:.8}

.klappe{
  position:fixed;left:0;right:0;top:var(--nav-h);z-index:98;
  background:rgba(253,250,247,.97);backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
  box-shadow:0 20px 50px rgba(90,60,50,.09);
}
.nav-punkt:hover .klappe,.klappe:hover{opacity:1;visibility:visible;transform:translateY(0)}
.klappe-in{max-width:var(--maxw);margin:0 auto;padding:34px 22px 38px;
  display:grid;gap:28px;grid-template-columns:repeat(3,1fr)}
.klappe-sp h5{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px}
.klappe-sp a{display:block;padding:11px 0;border-radius:10px}
.klappe-sp a b{display:block;font-size:16.5px;font-weight:620;color:var(--ink);
  letter-spacing:-.018em;margin-bottom:3px;transition:color .2s ease}
.klappe-sp a span{display:block;font-size:14px;color:var(--ink-3);line-height:1.45}
.klappe-sp a:hover b{color:var(--akzent)}
.klappe-bild{border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--schatten-s)}
.klappe-bild img{width:100%;height:100%;object-fit:cover}
.klappe-hinweis{grid-column:1/-1;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  font-size:14.5px;color:var(--ink-3)}
.klappe-hinweis b{color:var(--ink)}

/* ── Zahlenband ───────────────────────────────────── */
.band-zahlen{display:grid;gap:2px;background:var(--line);border-radius:var(--r-l);
  overflow:hidden}
.band-zahlen > div{background:var(--bg);padding:30px 22px;text-align:center}
.band-zahlen b{display:block;font-size:clamp(30px,5vw,44px);font-weight:700;
  letter-spacing:-.04em;line-height:1;color:var(--akzent)}
.band-zahlen span{display:block;font-size:15px;color:var(--ink-2);margin-top:10px}
@media(min-width:700px){.band-zahlen{grid-template-columns:repeat(4,1fr)}}

/* ── Frage-Antwort-Kacheln ────────────────────────── */
.fk{display:grid;gap:14px}
.fk-el{background:#fff;border-radius:var(--r-l);padding:28px 26px;
  box-shadow:var(--schatten-s);transition:transform .3s var(--ease)}
.fk-el:hover{transform:translateY(-3px)}
.fk-el h4{font-size:17px;font-weight:640;margin-bottom:10px;color:var(--akzent)}
.fk-el p{font-size:16.5px;margin:0}
@media(min-width:700px){.fk{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.fk{grid-template-columns:repeat(3,1fr)}}

/* ── Zeitstrahl ───────────────────────────────────── */
.strahl{display:grid;gap:0}
.strahl-el{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:26px 0;
  border-bottom:1px solid var(--line)}
.strahl-el:last-child{border-bottom:none}
.strahl-nr{width:44px;height:44px;border-radius:50%;background:var(--akzent-w);
  color:var(--akzent);display:grid;place-items:center;font-weight:700;font-size:17px;
  flex-shrink:0}
.strahl-el h3{margin-bottom:6px}
.strahl-el p{margin:0;font-size:16.5px}
@media(min-width:900px){
  .strahl{grid-template-columns:repeat(2,1fr);gap:0 56px}
  .strahl-el{border-bottom:1px solid var(--line)}
}

/* ── Fuß mit mehr Struktur ────────────────────────── */
.f-spalten{gap:30px}
@media(min-width:960px){.f-spalten{grid-template-columns:repeat(4,1fr);gap:44px}}

/* ═══════════════════════════════════════════════════════════════════════
   ZUSATZ 6.1 · Held mit Aussage statt Nullen
   ═══════════════════════════════════════════════════════════════════════ */
.held{min-height:82vh;display:flex;align-items:center}
.held-in{padding:80px 0}
.held-tag{display:inline-block;font-size:14px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  padding:8px 18px;border-radius:100px;backdrop-filter:blur(8px);margin-bottom:24px}
.held h1{font-size:clamp(44px,8.5vw,92px);letter-spacing:-.04em;line-height:1.0}
.held .gross{color:rgba(255,255,255,.85)}
.held .aktion{margin:36px 0 0}
.held em{font-style:normal;color:var(--gold)}
.btn-glas{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(8px);box-shadow:none}
.btn-glas:hover{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.5)}
/* Held-Bild wärmer und tiefer abdunkeln, damit weiße Schrift trägt */
.held::after{background:linear-gradient(180deg,rgba(43,33,31,.55),rgba(43,33,31,.82) 60%,rgba(43,33,31,.9))}

/* ═══ Zusatz 6.2 · Einsteiger-Block ════════════════════════ */
.bild-gross{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:3/4;
  box-shadow:var(--schatten);max-height:560px}
.bild-gross img{width:100%;height:100%;object-fit:cover}
ul.mini{list-style:none}
ul.mini li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  font-size:17px;color:var(--ink-2);border-bottom:1px solid var(--line)}
ul.mini li:last-child{border-bottom:none}
ul.mini li svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;color:var(--akzent)}
ul.mini b{color:var(--ink);font-weight:640}

/* ═══════════════════════════════════════════════════════════════════════
   ZUSATZ 6.3 · Held zum Leben erwecken
   ═══════════════════════════════════════════════════════════════════════ */

/* Langsamer Ken-Burns-Zoom aufs Hintergrundbild */
.held-bg img{animation:kenburns 22s ease-out forwards}
@keyframes kenburns{
  from{transform:scale(1.12) translateY(-1%)}
  to{transform:scale(1) translateY(0)}
}

/* Warmer Lichtkegel hinter der Headline — zieht das Auge in die Mitte */
.held::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 42%,
    rgba(255,210,170,.22),rgba(255,180,140,.06) 45%,transparent 72%);
  mix-blend-mode:screen;opacity:0;animation:lichtauf 2.4s var(--ease) .3s forwards;
}
@keyframes lichtauf{to{opacity:1}}

/* Sanftes Flackern des Lampenlichts (sehr dezent) */
.held-bg::after{
  content:"";position:absolute;top:6%;left:4%;width:34%;height:60%;
  background:radial-gradient(circle at 30% 30%,rgba(255,196,120,.16),transparent 60%);
  animation:kerze 5.5s ease-in-out infinite;pointer-events:none;
}
@keyframes kerze{0%,100%{opacity:.7}50%{opacity:1}}

/* Headline: warmer Schein direkt am Text, damit sie „leuchtet" */
.held h1{text-shadow:0 2px 30px rgba(0,0,0,.35),0 0 60px rgba(255,190,150,.12)}

/* Heller Button bekommt einen wandernden Glanz */
.held .btn-hell{position:relative;overflow:hidden}
.held .btn-hell::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-18deg);animation:glanz 4.5s ease-in-out 1.5s infinite;
}
@keyframes glanz{
  0%{left:-60%}
  22%{left:130%}
  100%{left:130%}
}

/* Scroll-Hinweis unten */
.scrollhint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(255,255,255,.6);font-size:12.5px;letter-spacing:.04em;
  animation:hintauf 1s var(--ease) 1.4s both}
.scrollhint svg{width:22px;height:22px;animation:huepf 2.2s ease-in-out infinite}
@keyframes huepf{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}
@keyframes hintauf{from{opacity:0}to{opacity:1}}

/* Badge pulst ganz leicht, damit „3 Plätze frei" auffällt */
.held-tag{position:relative}
.held-tag::before{content:"";position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(201,161,92,.6);animation:puls 2.4s ease-out infinite}
.held-tag{padding-left:32px}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(201,161,92,.6)}70%{box-shadow:0 0 0 8px rgba(201,161,92,0)}100%{box-shadow:0 0 0 0 rgba(201,161,92,0)}}

@media(prefers-reduced-motion:reduce){
  .held-bg img,.held::before,.held-bg::after,.held .btn-hell::after,
  .scrollhint svg,.held-tag::before{animation:none}
  .held::before{opacity:1}
}

/* ═══ Zusatz 6.4 · Hintergrund heller, Headline enger ══════ */
/* Bild deutlicher zeigen: Abdunklung reduziert */
.held::after{background:linear-gradient(180deg,rgba(43,33,31,.34),rgba(43,33,31,.6) 55%,rgba(43,33,31,.74)) !important}
.held-bg img{opacity:.62}
/* Headline etwas kompakter, damit sie sicher 3 Zeilen bleibt */
.held h1{font-size:clamp(40px,7.4vw,80px);line-height:.98}
/* Lesbarkeit trotz hellerem Bild: leichter Textschatten mehr */
.held h1{text-shadow:0 2px 24px rgba(0,0,0,.5),0 0 60px rgba(255,190,150,.12)}
.held .gross{text-shadow:0 1px 14px rgba(0,0,0,.55)}

/* ═══ Zusatz 6.5 · Held exakt bildschirmhoch, Scroll-Hinweis sichtbar ══ */
.held{min-height:100svh;min-height:100vh}
.held-in{padding:calc(var(--nav-h) + 24px) 0 84px}     /* Platz oben für Nav, unten für Hinweis */
.held .aktion{margin-top:30px}
.held .band{margin-top:20px}
/* Headline auf großen Schirmen etwas kompakter, damit alles + Hinweis passt */
@media(min-height:700px) and (min-width:900px){
  .held h1{font-size:clamp(40px,6.4vw,72px)}
}
/* Scroll-Hinweis: immer sichtbar am unteren Rand, mit Klickfläche */
.scrollhint{bottom:20px;padding:8px 14px;border-radius:100px;
  background:rgba(0,0,0,.18);backdrop-filter:blur(6px)}
.scrollhint:hover{color:#fff;background:rgba(0,0,0,.3)}
/* Auf kleinen Höhen (Laptop quer) Hinweis nicht doppelt drängeln */
@media(max-height:640px){.scrollhint{display:none}.held-in{padding-bottom:56px}}

/* ═══════════════════════════════════════════════════════════════════════
   ZUSATZ 6.6 · Premium-Rechner — dunkel, groß, Jahreszahl als Wow
   ═══════════════════════════════════════════════════════════════════════ */
.rechner-sek{position:relative;overflow:hidden;background:var(--bg-tief);
  padding:96px 0;color:#fff}
.rechner-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 40% at 50% 30%,rgba(201,161,92,.18),transparent 70%),
    radial-gradient(60% 50% at 80% 90%,rgba(201,134,134,.16),transparent 70%)}
.rechner-sek .wrap{position:relative;z-index:2}

.rechner-p{max-width:600px;margin:0 auto;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-xl);padding:34px 30px;
  backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.4)}

.rp-slider{margin-bottom:34px}
.rp-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.rp-label span:first-child{font-size:15px;color:rgba(255,255,255,.6)}
.rp-um{font-size:clamp(24px,5vw,32px);font-weight:700;letter-spacing:-.03em;
  color:#fff;font-variant-numeric:tabular-nums}
.rechner-p input[type=range]{-webkit-appearance:none;appearance:none;width:100%;
  height:8px;border-radius:100px;cursor:pointer;outline:none;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) var(--pct,40%),
    rgba(255,255,255,.14) var(--pct,40%),rgba(255,255,255,.14) 100%)}
.rechner-p input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:32px;height:32px;border-radius:50%;background:#fff;border:0;cursor:grab;
  box-shadow:0 2px 10px rgba(0,0,0,.4),0 0 0 4px rgba(201,161,92,.25)}
.rechner-p input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}
.rechner-p input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;
  background:#fff;border:0;cursor:grab;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.rp-marks{display:flex;justify-content:space-between;margin-top:12px;
  font-size:13px;color:rgba(255,255,255,.4)}

.rp-haupt{text-align:center;padding:14px 0 8px}
.rp-cap{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.rp-gross{font-size:clamp(56px,14vw,92px);font-weight:700;letter-spacing:-.05em;
  line-height:1;margin:12px 0 10px;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#F4D9A8);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 40px rgba(201,161,92,.3)}
.rp-jahr{font-size:18px;color:rgba(255,255,255,.7)}
.rp-jahr b{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}

.rp-bar{display:flex;height:8px;border-radius:100px;overflow:hidden;margin:28px 0 14px;
  background:rgba(255,255,255,.1)}
.rp-bar i{display:block;height:100%;transition:width .35s var(--ease)}
.rp-bar .du{background:var(--gold)}
.rp-bar .wir{background:rgba(255,255,255,.28)}
.rp-legende{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;
  font-size:14.5px;color:rgba(255,255,255,.7);margin-bottom:26px}
.rp-legende b{color:#fff;font-variant-numeric:tabular-nums}
.rp-legende span{display:inline-flex;align-items:center;gap:8px}
.rp-legende i{width:10px;height:10px;border-radius:3px;display:block}
.rp-legende .pkt-du{background:var(--gold)}
.rp-legende .pkt-wir{background:rgba(255,255,255,.28)}
.rechner-p .btn{background:#fff;color:var(--ink)}
.rechner-p .btn:hover{background:#fff;color:var(--akzent)}

/* ═══════════════════════════════════════════════════════════════════════
   ZUSATZ 6.7 · Rechner hell, zweispaltig, 40 % begründet
   ═══════════════════════════════════════════════════════════════════════ */
.rp-grid{display:grid;gap:40px;align-items:center}
.rp-text h2{font-size:clamp(32px,5vw,54px)}

/* 40%-Begründung */
.rp-warum{margin-top:32px;background:#fff;border-radius:var(--r-l);
  padding:26px 24px;box-shadow:var(--schatten-s)}
.rp-warum-kopf{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.rp-warum-pct{font-size:38px;font-weight:700;letter-spacing:-.04em;color:var(--akzent);
  line-height:1}
.rp-warum-t{font-size:15.5px;color:var(--ink-2);font-weight:600}
.rp-warum .mini li{font-size:15.5px;padding:9px 0}
.rp-warum b{color:var(--ink);font-weight:640}

/* Rechner-Karte hell */
.rp-karte{background:#fff;border-radius:var(--r-xl);padding:32px 28px;
  box-shadow:var(--schatten)}
.rp-karte .rp-label{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:16px}
.rp-karte .rp-label span:first-child{font-size:15px;color:var(--ink-3)}
.rp-um{font-size:clamp(24px,4vw,32px);font-weight:700;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.rp-karte input[type=range]{-webkit-appearance:none;appearance:none;width:100%;
  height:8px;border-radius:100px;cursor:pointer;outline:none;
  background:linear-gradient(90deg,var(--akzent) 0%,var(--akzent) var(--pct,40%),
    var(--bg-2) var(--pct,40%),var(--bg-2) 100%)}
.rp-karte input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:32px;height:32px;border-radius:50%;background:#fff;border:0;cursor:grab;
  box-shadow:0 2px 8px rgba(90,60,50,.22),0 0 0 4px rgba(201,134,134,.16)}
.rp-karte input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.08)}
.rp-karte input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;
  background:#fff;border:0;cursor:grab;box-shadow:0 2px 8px rgba(90,60,50,.22)}
.rp-marks{display:flex;justify-content:space-between;margin-top:12px;
  font-size:13px;color:var(--ink-3)}

.rp-haupt{text-align:center;padding:26px 0 6px}
.rp-cap{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3)}
.rp-gross{font-size:clamp(52px,11vw,84px);font-weight:700;letter-spacing:-.05em;
  line-height:1;margin:10px 0 8px;font-variant-numeric:tabular-nums;color:var(--akzent)}
.rp-jahr{font-size:18px;color:var(--ink-2)}
.rp-jahr b{color:var(--akzent);font-weight:700;font-variant-numeric:tabular-nums}

.rp-bar{display:flex;height:8px;border-radius:100px;overflow:hidden;margin:24px 0 12px;
  background:var(--bg-2)}
.rp-bar i{display:block;height:100%;transition:width .35s var(--ease)}
.rp-bar .du{background:var(--akzent)}
.rp-bar .wir{background:var(--line-2)}
.rp-legende{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;
  font-size:14.5px;color:var(--ink-3);margin-bottom:22px}
.rp-legende b{color:var(--ink);font-variant-numeric:tabular-nums}
.rp-legende span{display:inline-flex;align-items:center;gap:8px}
.rp-legende i{width:10px;height:10px;border-radius:3px;display:block}
.rp-legende .pkt-du{background:var(--akzent)}
.rp-legende .pkt-wir{background:var(--line-2)}

@media(min-width:900px){
  .rp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
}

/* ═══ Zusatz 6.8 · Zahl dominant, Begründung einfach ═══════ */
/* Große Zahl: deutlich größer, mit Nachdruck */
.rp-haupt{padding:20px 0 8px}
.rp-cap{font-size:14px;color:var(--ink-2);font-weight:600;letter-spacing:0;text-transform:none}
.rp-gross{font-size:clamp(60px,13vw,104px);margin:8px 0 18px;font-weight:720;
  letter-spacing:-.055em}
/* Jahreszahl als eigene Box, sichtbar aber sekundär */
.rp-jahr-box{display:inline-flex;align-items:baseline;gap:10px;
  background:var(--akzent-w);border-radius:100px;padding:10px 20px}
.rp-jahr-box span{font-size:14px;color:var(--ink-2);font-weight:600}
.rp-jahr-box b{font-size:22px;color:var(--akzent);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Begründung: große einfache Aussage */
.rp-warum-kopf{display:block;border:none;padding:0;margin-bottom:16px}
.rp-warum-gross{font-size:clamp(24px,3.4vw,30px);font-weight:700;letter-spacing:-.03em;
  line-height:1.1;color:var(--ink)}

/* Umsatz-Zahl oben etwas ruhiger, damit die große Zahl gewinnt */
.rp-um{font-size:clamp(22px,3.4vw,28px)}

/* ═══ Zusatz 6.9 · Jahreszahl auffällig ════════════════════ */
.rp-jahr-box{background:var(--akzent) !important;padding:14px 26px !important;
  box-shadow:0 8px 22px rgba(201,134,134,.3);gap:12px !important}
.rp-jahr-box span{color:rgba(255,255,255,.82) !important;font-weight:600}
.rp-jahr-box b{color:#fff !important;font-size:clamp(24px,4vw,30px) !important}

/* ═══ Zusatz 6.10 · Jahres-Box wieder dezent, Monatszahl dominiert ══ */
.rp-jahr-box{background:var(--akzent-w) !important;padding:9px 18px !important;
  box-shadow:none !important;gap:8px !important}
.rp-jahr-box span{color:var(--ink-2) !important}
.rp-jahr-box b{color:var(--akzent) !important;font-size:19px !important}
/* Monatszahl klar dominant */
.rp-gross{font-size:clamp(64px,14vw,112px) !important}
.rp-cap{font-size:14px}

/* ═══ Zusatz 6.11 · Einsteiger-Block: nummerierte Schritte, kein Leerraum ══ */
.eins-block .text h2{font-size:clamp(34px,5.2vw,58px)}
.eins-liste{margin-top:30px;display:grid;gap:2px}
.eins-el{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--line)}
.eins-el:first-child{border-top:1px solid var(--line)}
.eins-nr{width:34px;height:34px;border-radius:50%;background:var(--akzent);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:16px;flex-shrink:0}
.eins-el div{font-size:16.5px;color:var(--ink-2);line-height:1.5}
.eins-el b{color:var(--ink);font-weight:640}
/* Bild etwas kürzer, damit es zur Textspalte passt und kein Loch entsteht */
.eins-block .bild-gross{max-height:none;align-self:stretch}
@media(min-width:900px){
  .eins-block{align-items:stretch}
  .eins-block .bild-gross{aspect-ratio:auto;height:100%}
  .eins-block .bild-gross img{height:100%}
}

/* ═══ Zusatz 6.12 · Wer macht was: Kontrast als Verkaufsargument ══ */
.teilung{align-items:stretch}
.seite{display:flex;flex-direction:column;overflow:hidden;padding:0}
.seite-bild{aspect-ratio:16/11;max-height:none;margin:0;border-radius:0}
.seite-bild img{object-position:center 25%}
.seite-in{padding:28px 26px 30px;display:flex;flex-direction:column;flex:1}
.seite .kopfzeile{margin-bottom:18px}
.seite ul{flex:0 0 auto}
/* Du-Karte: Abschluss groß, füllt den Platz statt leer zu wirken */
.du-schluss{margin-top:auto;padding-top:26px;font-size:clamp(30px,4vw,42px);
  font-weight:720;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.du-schluss span{color:var(--akzent)}
/* Wir-Karte: mehr Punkte, engere Zeilen, damit sie „voll" wirkt */
.wir-liste li{padding:12px 0!important;border-bottom:1px solid rgba(0,0,0,.05)}
.wir-liste li:last-child{border-bottom:none}
.wir-mehr{display:inline-block;margin-top:20px;font-weight:640;font-size:16px}
/* auf Desktop beide Karten gleich hoch */
@media(min-width:700px){
  .seite.du .seite-bild{aspect-ratio:1/1}
}

/* ═══════════════════════════════════════════════════════════════════════
   ZUSATZ 6.13 · Wer macht was — kompakt, Bild beschnitten, Waage
   ═══════════════════════════════════════════════════════════════════════ */
/* Interaktive Arbeits-Waage */
.waage{display:flex;gap:6px;max-width:760px;margin:0 auto;height:88px}
.waage>div{border-radius:var(--r);display:flex;flex-direction:column;
  align-items:center;justify-content:center;cursor:pointer;position:relative;
  overflow:hidden;transition:flex-basis .6s var(--ease),transform .2s ease}
.waage>div:active{transform:scale(.98)}
.waage-du{background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2)}
.waage-wir{background:var(--akzent);color:#fff;box-shadow:0 8px 24px rgba(201,134,134,.28)}
.waage-label{font-size:12px;font-weight:600;letter-spacing:.05em;opacity:.8}
.waage-wert{font-size:clamp(26px,5vw,38px);font-weight:720;letter-spacing:-.03em;line-height:1}
.waage.aktiv-du .waage-du{flex-basis:78%!important}
.waage.aktiv-du .waage-wir{flex-basis:22%!important}

/* Kompaktes Karten-Grid */
.wmw-grid{display:grid;gap:16px;grid-template-columns:1fr}
.wmw-karte{background:#fff;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--schatten-s);display:flex;flex-direction:column;
  transition:box-shadow .3s ease,transform .2s ease}
.wmw-karte.du{border:2px solid var(--akzent)}
.wmw-karte.wir{background:var(--bg-2)}
.wmw-bild{aspect-ratio:16/10;overflow:hidden}
.wmw-bild img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.wmw-in{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.wmw-kopf{margin-bottom:14px}
.wmw-tag{display:block;font-size:12.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.wmw-kopf b{font-size:clamp(22px,3.4vw,28px);font-weight:700;letter-spacing:-.025em}
.wmw-karte.du .wmw-kopf b{color:var(--akzent)}
.wmw-in ul{list-style:none;flex:1}
.wmw-in li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;
  font-size:15.5px;color:var(--ink-2);line-height:1.4}
.wmw-in li svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--akzent)}
.wmw-schluss{margin-top:14px;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}

/* Hervorheben, wenn Waagen-Seite angetippt */
.wmw-karte.betont{box-shadow:0 0 0 3px var(--akzent),var(--schatten);transform:translateY(-2px)}

@media(min-width:820px){
  .wmw-grid{grid-template-columns:1fr 1fr;align-items:start}
  /* Du-Karte kompakter, damit beide etwa gleich hoch sind */
  .wmw-karte.du .wmw-bild{aspect-ratio:4/3}
}

/* ═══ Zusatz 6.14 · Wer-macht-was-Bild: sauberer 4:3-Crop ══ */
.wmw-bild{aspect-ratio:4/3}
.wmw-bild img{object-position:center 40%}
@media(min-width:820px){.wmw-karte.du .wmw-bild{aspect-ratio:4/3}}

/* ═══ Zusatz 6.15 · Wer-macht-was: beide Kästen exakt gleich hoch ══ */
.wmw-grid{align-items:stretch}
.wmw-karte{height:100%}
.wmw-karte .wmw-in{display:flex;flex-direction:column}
/* Wir-Karte: Liste verteilt sich über die volle Höhe, kein Loch */
.wmw-karte.wir .wmw-in ul{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.wmw-karte.wir .wmw-in li{padding:11px 0}
/* Du-Karte: Bild oben, Inhalt füllt Rest; Schluss bleibt unten */
.wmw-karte.du .wmw-in{flex:1}
.wmw-karte.du .wmw-schluss{margin-top:auto}
@media(min-width:820px){
  /* Du-Bild etwas flacher, damit Höhe zur Wir-Karte passt */
  .wmw-karte.du .wmw-bild{aspect-ratio:5/4}
}

/* ═══ Zusatz 6.16 · Bild fixiert, Kästen sauber gleich hoch ══════════════
   Vorher: align-items:stretch hat das Bild mitgestreckt → riesig.
   Jetzt: Bild hat festes Querformat (flex:0 0 auto), nur der Textteil
   wächst, um die Höhe der Wir-Karte auszugleichen.
   ═══════════════════════════════════════════════════════════════════════ */
.wmw-karte{display:flex;flex-direction:column;height:100%}
.wmw-bild{aspect-ratio:3/2 !important;flex:0 0 auto !important;height:auto !important}
.wmw-bild img{object-position:center 32%}
.wmw-karte.du .wmw-in{flex:1;display:flex;flex-direction:column}
.wmw-karte.du .wmw-schluss{margin-top:auto}
.wmw-karte.wir .wmw-in{flex:1;display:flex;flex-direction:column}
.wmw-karte.wir .wmw-in ul{flex:1;display:flex;flex-direction:column;justify-content:space-between}
@media(min-width:820px){
  .wmw-karte.du .wmw-bild{aspect-ratio:3/2 !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   ZUSATZ 6.17 · Bild-Position + "Wir machen alles" dominant
   ═══════════════════════════════════════════════════════════════════════ */
.wmw-bild img{object-position:center 26%}

/* Wir-Karte in den Vordergrund: mehr Breite, kräftiger, wirkt „voll" */
@media(min-width:820px){
  .wmw-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
}
.wmw-karte.wir{background:var(--akzent-w);border:2px solid var(--akzent);
  position:relative;box-shadow:0 14px 40px rgba(201,134,134,.16)}
.wmw-karte.wir .wmw-tag{color:var(--akzent)}
.wmw-karte.wir .wmw-kopf b{color:var(--ink)}
.wir-zahl{display:block;margin-top:6px;font-size:14px;font-weight:640;color:var(--akzent)}
/* Nummerierte, kräftigere Liste */
.wir-nummeriert{counter-reset:wj}
.wir-nummeriert li{counter-increment:wj;font-weight:520;color:var(--ink)!important;
  padding:12px 0!important}
.wir-nummeriert li svg{display:none}
.wir-nummeriert li::before{content:counter(wj);flex-shrink:0;width:26px;height:26px;
  border-radius:50%;background:var(--akzent);color:#fff;font-size:13px;font-weight:700;
  display:grid;place-items:center;margin-right:2px}
.wir-punch{margin-top:16px;padding-top:16px;border-top:1px solid rgba(201,134,134,.2);
  font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--akzent)}

/* Du-Karte etwas zurücknehmen, damit Wir dominiert */
.wmw-karte.du{border:1px solid var(--line)}
.wmw-karte.du .wmw-schluss{font-size:18px}

/* ═══════════════════════════════════════════════════════════════════════
   ZUSATZ 6.18 · Dienstagabend — designter Umschalter, Money-Counter
   ═══════════════════════════════════════════════════════════════════════ */
/* Umschalter mit gleitendem Indikator */
.schalter2{position:relative;display:inline-flex;background:#fff;border-radius:100px;
  padding:6px;box-shadow:var(--schatten-s);margin:0 auto 34px}
.schalter2 button{position:relative;z-index:2;border:0;background:transparent;
  font-family:var(--sans);font-size:16px;font-weight:640;color:var(--ink-2);
  padding:12px 30px;border-radius:100px;cursor:pointer;transition:color .3s ease}
.schalter2 button.an{color:#fff}
.schalter2-glow{position:absolute;z-index:1;top:6px;bottom:6px;left:6px;
  width:calc(50% - 6px);border-radius:100px;background:var(--akzent);
  box-shadow:0 6px 18px rgba(201,134,134,.3);
  transition:transform .42s var(--ease),background .3s ease}
.schalter2.mit .schalter2-glow{transform:translateX(100%)}
.schalter2.mit .schalter2-glow{background:var(--forst,#1B4237)}

/* Tafeln überblenden */
.abend2{position:relative;max-width:920px;margin:0 auto}
.tafel2{display:none}
.tafel2.an{display:block;animation:tafelrein .5s var(--ease)}
@keyframes tafelrein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.abend2-in{display:grid;gap:26px;align-items:center}
.abend2-bild{border-radius:var(--r-l);overflow:hidden;aspect-ratio:3/4;
  box-shadow:var(--schatten);max-height:440px}
.abend2-bild img{width:100%;height:100%;object-fit:cover}
@media(min-width:800px){
  .abend2-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
}

/* Stress-Badge / Zeitliste */
.stress-badge{display:inline-block;font-size:14px;font-weight:640;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);padding:8px 16px;border-radius:100px;
  margin-bottom:18px;box-shadow:var(--schatten-s)}
.zeitliste{list-style:none}
.zeitliste li{display:grid;grid-template-columns:66px 1fr;gap:14px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink-2);
  opacity:0;transform:translateX(-8px);animation:zeilerein .5s var(--ease) forwards}
.zeitliste li:nth-child(1){animation-delay:.05s}
.zeitliste li:nth-child(2){animation-delay:.13s}
.zeitliste li:nth-child(3){animation-delay:.21s}
.zeitliste li:nth-child(4){animation-delay:.29s}
.zeitliste li:nth-child(5){animation-delay:.37s}
@keyframes zeilerein{to{opacity:1;transform:none}}
.zeitliste li:last-child{border-bottom:none}
.zeitliste .zeit{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.zeitliste li.frei{color:var(--forst,#1B4237);font-weight:600}
.zeitliste.mit li span:last-child{color:var(--ink-3)}
.zeitliste.mit li.frei span:last-child{color:var(--forst,#1B4237)}

/* Money-Karte */
.geld-karte{background:linear-gradient(135deg,#1B4237,#26594A);color:#fff;
  border-radius:var(--r-l);padding:24px 26px;margin-bottom:20px;
  box-shadow:0 14px 36px rgba(27,66,55,.28);position:relative;overflow:hidden}
.geld-karte::after{content:"";position:absolute;top:-30%;right:-10%;width:180px;height:180px;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
.geld-label{font-size:13.5px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.7)}
.geld-wert{font-size:clamp(40px,8vw,58px);font-weight:720;letter-spacing:-.03em;
  line-height:1.05;margin:6px 0 8px;font-variant-numeric:tabular-nums}
.geld-sub{font-size:14px;color:rgba(255,255,255,.65)}

/* ═══════════════════════════════════════════════════════════════════════
   ZUSATZ 6.19 · "Deine ersten 30 Tage" als animierte Reise-Timeline
   ═══════════════════════════════════════════════════════════════════════ */
.reise{position:relative;margin-top:20px}
/* Verbindungslinie */
.reise-linie{position:absolute;background:var(--line);border-radius:100px;z-index:0;overflow:hidden}
.reise-linie i{display:block;background:linear-gradient(90deg,var(--akzent),var(--forst));
  border-radius:100px}

/* Schritt */
.reise-schritt{position:relative;z-index:1;display:flex;gap:20px;align-items:flex-start;
  opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reise-schritt.zeig{opacity:1;transform:none}
.reise-node{width:56px;height:56px;border-radius:50%;flex-shrink:0;display:grid;
  place-items:center;background:#fff;border:3px solid var(--line);
  font-size:22px;font-weight:720;color:var(--ink-3);position:relative;
  transition:border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease),
    box-shadow .4s ease}
.reise-schritt.zeig .reise-node{border-color:var(--akzent);color:var(--akzent);
  transform:scale(1.06);box-shadow:0 8px 22px rgba(201,134,134,.22)}
.reise-ziel.zeig .reise-node{background:var(--forst);border-color:var(--forst);color:#fff;
  box-shadow:0 10px 26px rgba(27,66,55,.32)}
.reise-card{background:#fff;border-radius:var(--r-l);padding:22px 22px 24px;
  box-shadow:var(--schatten-s);flex:1}
.reise-woche{display:block;font-size:13px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--akzent);margin-bottom:6px}
.reise-ziel .reise-woche{color:var(--forst)}
.reise-card h3{margin-bottom:8px;font-size:20px}
.reise-card p{font-size:15.5px;margin:0}

/* Mobil: vertikale Linie links */
.reise{display:flex;flex-direction:column;gap:26px}
.reise-linie{left:27px;top:20px;bottom:20px;width:4px}
.reise-linie i{width:100%;height:var(--fill,0%);transition:height 1.1s var(--ease)}

/* Desktop: horizontale Timeline, 4 Spalten */
@media(min-width:820px){
  .reise{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:28px}
  .reise-schritt{flex-direction:column;gap:0;align-items:stretch}
  .reise-node{margin:0 auto 20px}
  .reise-linie{left:8%;right:8%;top:56px;bottom:auto;width:auto;height:4px}
  .reise-linie i{height:100%;width:var(--fill,0%);transition:width 1.2s var(--ease)}
  .reise-card{text-align:center}
}

/* ═══ Zusatz 6.20 · Woche 4 „Erstes Geld" als grünes Highlight ══════════ */
/* Node dauerhaft grün + Glow, auch vor der Animation */
.reise-ziel .reise-node{background:var(--forst) !important;border-color:var(--forst) !important;
  color:#fff !important;box-shadow:0 10px 28px rgba(27,66,55,.35) !important}
.reise-ziel.zeig .reise-node{animation:geldpuls 1.8s ease-in-out infinite}
@keyframes geldpuls{0%,100%{box-shadow:0 10px 28px rgba(27,66,55,.35)}
  50%{box-shadow:0 10px 28px rgba(27,66,55,.35),0 0 0 10px rgba(27,66,55,.12)}}

/* Karte hervorheben: grüner Verlauf, Rahmen, größer wirkend */
.reise-ziel .reise-card{background:linear-gradient(160deg,#F0F7F3,#E6F1EB);
  border:2px solid var(--forst);box-shadow:0 16px 40px rgba(27,66,55,.18);
  position:relative}
.reise-ziel .reise-woche{color:var(--forst) !important}
.reise-ziel .reise-card h3{color:var(--forst);font-size:22px}
.reise-ziel .reise-card p{color:#2c463c}
/* kleines „Zahltag"-Fähnchen */
.reise-ziel .reise-card::before{content:"💸 Zahltag";position:absolute;top:-13px;
  left:50%;transform:translateX(-50%);background:var(--forst);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.03em;padding:5px 14px;border-radius:100px;
  white-space:nowrap;box-shadow:0 6px 16px rgba(27,66,55,.28)}
/* etwas mehr Luft oben, damit das Fähnchen Platz hat */
.reise-ziel{padding-top:6px}

/* ═══ Zusatz 6.21 · Reise: volle Lesbarkeit, € + Zahltag kräftig ════════ */
/* Keine Opacity-Animation mehr → Inhalt immer voll sichtbar, nur leichtes Hochschieben */
.reise-schritt{opacity:1 !important;transform:translateY(14px);transition:transform .55s var(--ease)}
.reise-schritt.zeig{transform:none}

/* €-Node: immer sattgrün, weißes fettes Zeichen */
.reise-ziel .reise-node{background:var(--forst) !important;border-color:var(--forst) !important}
.reise-ziel .reise-node span{color:#fff !important;font-size:26px;font-weight:800;line-height:1}

/* Zahltag-Fähnchen: solide, klar lesbar, über der Karte */
.reise-ziel .reise-card::before{background:var(--forst) !important;color:#fff !important;
  z-index:3;opacity:1 !important;top:-14px;padding:6px 16px;font-size:12.5px;
  box-shadow:0 8px 20px rgba(27,66,55,.35)}

/* ═══════════════════════════════════════════════════════════════════════
   ZUSATZ 6.22 · Abschluss-CTA — conversion-optimiert
   ═══════════════════════════════════════════════════════════════════════ */
.cta-final{position:relative;overflow:hidden;padding:100px 0;
  background:linear-gradient(160deg,#2B211F,#3A2621)}
.cta-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(50% 55% at 50% 20%,rgba(201,134,134,.35),transparent 65%),
    radial-gradient(45% 45% at 85% 90%,rgba(201,161,92,.16),transparent 70%)}
.cta-final .wrap{position:relative;z-index:2}
.cta-box{max-width:660px;margin:0 auto;text-align:center;color:#fff}
.cta-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:640;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  padding:9px 18px;border-radius:100px;margin-bottom:26px;backdrop-filter:blur(8px)}
.cta-dot{width:7px;height:7px;border-radius:50%;background:#FF8A73;
  box-shadow:0 0 0 0 rgba(255,138,115,.6);animation:puls 2.2s ease-out infinite}
.cta-h{font-size:clamp(32px,5.6vw,58px);line-height:1.05;letter-spacing:-.03em;
  font-weight:700;color:#fff;margin-bottom:20px}
.cta-p{font-size:clamp(17px,2.2vw,20px);line-height:1.5;color:rgba(255,255,255,.78);
  max-width:30ch;margin:0 auto 30px}
.cta-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:38px}
.cta-chips span{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:560;
  color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:9px 16px;border-radius:100px}
.cta-chips svg{width:15px;height:15px;color:#8FD3B6}

/* Der Haupt-Button: groß, warm, mit Glanz + sanftem Puls */
.btn-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:-.01em;
  padding:21px 44px;border-radius:100px;background:#fff;color:var(--ink);cursor:pointer;
  overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 0 rgba(255,255,255,.4);
  transition:transform .2s var(--ease),box-shadow .3s ease;
  animation:ctapuls 2.6s ease-in-out infinite}
.btn-cta:hover{transform:translateY(-3px) scale(1.02);color:var(--akzent);
  box-shadow:0 20px 50px rgba(0,0,0,.4)}
.btn-cta svg{width:17px;height:17px;transition:transform .25s var(--ease)}
.btn-cta:hover svg{transform:translateX(4px)}
.btn-cta::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:glanz 4.5s ease-in-out 1s infinite}
@keyframes ctapuls{0%,100%{box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 0 rgba(255,255,255,.28)}
  50%{box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 14px rgba(255,255,255,0)}}
.cta-mini{font-size:14px;color:rgba(255,255,255,.5);margin-top:18px}

@media(prefers-reduced-motion:reduce){
  .btn-cta,.cta-dot{animation:none}
  .btn-cta::after{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   ZUSATZ 6.23 · Exit-Popup
   ═══════════════════════════════════════════════════════════════════════ */
.pop-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(30,20,18,.55);
  backdrop-filter:blur(6px);opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease}
.pop-overlay.auf{opacity:1;visibility:visible}
.pop{position:relative;width:100%;max-width:820px;background:#fff;border-radius:var(--r-xl);
  overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.4);
  display:grid;grid-template-columns:1fr;transform:translateY(20px) scale(.98);
  transition:transform .38s var(--ease)}
.pop-overlay.auf .pop{transform:none}
.pop-x{position:absolute;top:14px;right:16px;z-index:3;width:38px;height:38px;border:0;
  border-radius:50%;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);
  font-size:26px;line-height:1;color:var(--ink-2);cursor:pointer;display:grid;
  place-items:center;transition:background .2s ease,transform .2s ease}
.pop-x:hover{background:#fff;transform:rotate(90deg)}
.pop-bild{display:none}
.pop-in{padding:34px 30px 30px;text-align:center}
.pop-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;
  color:var(--akzent);background:var(--akzent-w);padding:7px 15px;border-radius:100px;
  margin-bottom:18px}
.pop-dot{width:7px;height:7px;border-radius:50%;background:var(--akzent);
  animation:puls 2.2s ease-out infinite}
.pop-in h3{font-size:clamp(26px,4.4vw,34px);line-height:1.1;letter-spacing:-.03em;
  font-weight:720;margin-bottom:14px}
.pop-in p{font-size:16.5px;max-width:34ch;margin:0 auto 20px}
.pop-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.pop-chips span{font-size:14px;font-weight:560;color:var(--ink-2);background:var(--bg-2);
  padding:8px 14px;border-radius:100px}
.pop-btn{font-size:18px;padding:18px 36px;background:var(--akzent);color:#fff;
  animation:ctapuls 2.6s ease-in-out infinite}
.pop-btn:hover{background:var(--akzent-d);color:#fff}
.pop-nein{display:block;margin:16px auto 0;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:14.5px;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px}
.pop-nein:hover{color:var(--ink-2)}

@media(min-width:680px){
  .pop{grid-template-columns:0.9fr 1.1fr;text-align:left}
  .pop-bild{display:block;position:relative}
  .pop-bild img{width:100%;height:100%;object-fit:cover;min-height:420px}
  .pop-in{text-align:left;padding:44px 40px}
  .pop-in p{margin-left:0;margin-right:0}
  .pop-chips{justify-content:flex-start}
  .pop-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.pop-btn,.pop-dot{animation:none}.pop-btn::after{display:none}}

/* ═══ Zusatz 6.24 · Popup als Call-Kontaktformular ═════════ */
.pop-bild{position:relative}
.pop-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,20,18,.15),rgba(30,20,18,.72))}
.pop-bild-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 26px 24px;color:#fff}
.pop-eyebrow.hell{color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24)}
.pop-eyebrow.hell .pop-dot{background:#FF8A73}
.pop-bild-txt h3{color:#fff;font-size:clamp(26px,4vw,34px);line-height:1.08;margin:12px 0 16px}
.pop-steps{list-style:none;display:grid;gap:8px}
.pop-steps li{font-size:15px;color:rgba(255,255,255,.9);display:flex;gap:9px}
.pop-steps b{color:#FFCE9E}
.pop-bild img{min-height:480px}

.pop-in{padding:32px 30px 30px;text-align:left}
.pop-formkopf h4{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.pop-formkopf{margin-bottom:20px}
.pop-feld{margin-bottom:15px}
.pop-feld label{display:block;font-size:13.5px;font-weight:640;margin-bottom:7px}
.pop-feld input{width:100%;padding:13px 15px;font-size:16px;font-family:var(--sans);
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease}
.pop-feld input:focus{outline:none;border-color:var(--akzent);background:#fff;
  box-shadow:0 0 0 3px rgba(201,134,134,.12)}
.pop-feld select{padding:13px 11px;font-size:16px;font-family:var(--sans);
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink)}
.pop-feld select:focus{outline:none;border-color:var(--akzent)}
.pop-feld .kw-tel-reihe{margin:0}
.pop-feld .kw-tel-reihe input{width:100%}
.pop-haken{display:flex;gap:11px;align-items:flex-start;margin:6px 0 18px;cursor:pointer}
.pop-haken input{width:19px;height:19px;margin-top:2px;flex-shrink:0;accent-color:var(--akzent)}
.pop-haken span{font-size:13px;color:var(--ink-2);line-height:1.45}
.pop-fehler{display:none;font-size:14px;color:var(--akzent-d);margin:0 0 14px}
.pop-btn{width:100%;font-size:18px;padding:17px 30px}
.pop-nein{width:100%;margin-top:12px}

/* ═══ Zusatz 6.26 · Popup-Formular: Reihe, Insta-Feld ══════ */
.pop-reihe{display:grid;grid-template-columns:1.6fr 1fr;gap:12px}
.pop-feld .opt{font-weight:400;color:var(--ink-3);font-size:12px}
.pop-haken + .pop-haken{margin-top:-6px}

/* ═══ Zusatz 6.27 · Popup Kontaktweg-Umschalter ═══════════ */
.pop-weg{display:inline-flex;background:var(--bg-2);border-radius:100px;padding:5px;gap:4px;width:100%}
.pop-weg button{flex:1;border:0;background:transparent;font-family:var(--sans);font-size:15px;
  font-weight:640;color:var(--ink-2);padding:11px 16px;border-radius:100px;cursor:pointer;
  transition:background .22s ease,color .22s ease,box-shadow .22s ease}
.pop-weg button.an{background:#fff;color:var(--akzent);box-shadow:var(--schatten-s)}

/* ═══ Zusatz 6.28 · Popup: kompakte Ja/Nein-Zeile ═════════ */
.pop-inline{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pop-inline > label{margin-bottom:0;white-space:nowrap}
.pop-jn{display:inline-flex;background:var(--bg-2);border-radius:100px;padding:4px;gap:3px}
.pop-jn button{border:0;background:transparent;font-family:var(--sans);font-size:14.5px;
  font-weight:640;color:var(--ink-2);padding:8px 22px;border-radius:100px;cursor:pointer;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.pop-jn button.an{background:#fff;color:var(--akzent);box-shadow:var(--schatten-s)}

/* ═══════════════════════════════════════════════════════════════════════
   ZUSATZ 6.29 · Trust-Leiste unter dem Held
   ═══════════════════════════════════════════════════════════════════════ */
.trustbar{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trustbar-in{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;
  padding:20px 0}
.trustbar-in span{display:inline-flex;align-items:center;gap:9px;font-size:15px;
  color:var(--ink-2);white-space:nowrap}
.trustbar-in b{color:var(--ink);font-weight:640}
.trustbar-in svg{width:19px;height:19px;color:var(--akzent);flex-shrink:0}
@media(min-width:760px){
  .trustbar-in{gap:0;justify-content:space-between}
  .trustbar-in span{font-size:15.5px}
}

/* ═══════════════════════════════════════════════════════════════════════
   SEITE „WAS WIR MACHEN"
   ═══════════════════════════════════════════════════════════════════════ */
/* TrendRadar-Highlight */
.radar{position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:var(--bg-tief);color:#fff;display:grid;gap:0}
.radar-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(50% 60% at 20% 20%,rgba(201,134,134,.4),transparent 60%),
    radial-gradient(50% 60% at 90% 90%,rgba(201,161,92,.22),transparent 65%)}
.radar-in{position:relative;z-index:2;padding:44px 34px}
.radar-badge{display:inline-block;font-size:14px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  padding:8px 16px;border-radius:100px;margin-bottom:20px}
.radar-in h2{color:#fff;font-size:clamp(34px,6vw,56px);margin-bottom:16px}
.radar-in p{color:rgba(255,255,255,.82);font-size:clamp(16px,2vw,18.5px);max-width:44ch}
.radar-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);overflow:hidden;margin-top:28px}
.radar-stats > div{background:rgba(43,33,31,.6);padding:20px 16px;text-align:center}
.radar-stats b{display:block;font-size:19px;font-weight:700;color:#FFCE9E}
.radar-stats span{display:block;font-size:13px;color:rgba(255,255,255,.6);margin-top:5px}
.radar-bild{position:relative;z-index:2;min-height:240px}
.radar-bild .ph{border-radius:0}
@media(min-width:860px){
  .radar{grid-template-columns:1.15fr .85fr}
  .radar-in{padding:52px 46px}
  .radar-bild{min-height:auto}
}

/* Normal vs Wir */
.vs-grid{display:grid;gap:18px;grid-template-columns:1fr}
.vs-karte{background:#fff;border-radius:var(--r-l);padding:28px 26px;box-shadow:var(--schatten-s)}
.vs-sym{width:44px;height:44px;border-radius:12px;background:var(--akzent-w);color:var(--akzent);
  display:grid;place-items:center;margin-bottom:18px}
.vs-sym svg{width:22px;height:22px}
.vs-karte h3{margin-bottom:16px;font-size:22px}
.vs-zeile{font-size:15.5px;line-height:1.5;padding:12px 0;border-top:1px solid var(--line)}
.vs-zeile span{font-weight:700}
.vs-zeile.andere{color:var(--ink-3)}.vs-zeile.andere span{color:var(--ink-3)}
.vs-zeile.wir{color:var(--ink-2)}.vs-zeile.wir span{color:var(--akzent)}
.vs-zeile.wir b{color:var(--ink);font-weight:640}
@media(min-width:700px){.vs-grid{grid-template-columns:1fr 1fr}}

/* Feature-Grid */
.feat-grid{display:grid;gap:16px;grid-template-columns:1fr}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:24px 22px;
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease}
.feat:hover{transform:translateY(-3px);box-shadow:var(--schatten-s);border-color:var(--line-2)}
.feat-i{font-size:28px;margin-bottom:12px;line-height:1}
.feat h4{font-size:17px;margin-bottom:6px}
.feat p{font-size:14.5px;margin:0}
@media(min-width:560px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.feat-grid{grid-template-columns:repeat(3,1fr)}}

/* Vergleichstabelle */
.vt{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:#fff}
.vt-row{display:grid;grid-template-columns:1.4fr .9fr .9fr;border-bottom:1px solid var(--line)}
.vt-row:last-child{border-bottom:none}
.vt-row > div{padding:15px 16px;font-size:14.5px;display:flex;align-items:center}
.vt-row > div:first-child{color:var(--ink-2);font-weight:520}
.vt-head > div{background:var(--bg-2);font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3)}
.vt-uns{background:var(--akzent-w);color:var(--ink)!important;font-weight:700!important;
  justify-content:center}
.vt-head .vt-uns{color:var(--akzent)!important}
.vt-nein{color:var(--ink-3)!important;justify-content:center}
@media(max-width:560px){.vt-row>div{font-size:13px;padding:12px 10px}}

/* ═══════════════════════════════════════════════════════════════════════
   SEITE „WAS WIR MACHEN" · Fassung 2 (Startseiten-Stil)
   ═══════════════════════════════════════════════════════════════════════ */
/* TrendRadar mit animiertem Radar */
.tr{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--bg-tief);
  color:#fff;display:grid;gap:0;grid-template-columns:1fr}
.tr-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(55% 60% at 15% 20%,rgba(201,134,134,.4),transparent 60%),
    radial-gradient(55% 60% at 90% 90%,rgba(201,161,92,.22),transparent 65%)}
.tr-text{position:relative;z-index:2;padding:44px 32px}
.tr-badge{display:inline-block;font-size:14px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  padding:8px 16px;border-radius:100px;margin-bottom:20px}
.tr-text h2{color:#fff;font-size:clamp(34px,6vw,54px);margin-bottom:16px}
.tr-text p{color:rgba(255,255,255,.82);font-size:clamp(16px,2vw,18.5px);max-width:44ch}
.tr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);overflow:hidden;margin-top:28px}
.tr-stats > div{background:rgba(43,33,31,.55);padding:18px 14px;text-align:center}
.tr-stats b{display:block;font-size:17px;font-weight:700;color:#FFCE9E}
.tr-stats span{display:block;font-size:12.5px;color:rgba(255,255,255,.6);margin-top:5px}

.tr-radar{position:relative;z-index:2;display:grid;place-items:center;padding:30px}
.radar-wrap{position:relative;width:min(320px,80vw);aspect-ratio:1}
.radar-svg{width:100%;height:100%}
.radar-sweep{transform-origin:100px 100px;animation:radarDreh 4s linear infinite}
@keyframes radarDreh{to{transform:rotate(360deg)}}
.blip{fill:#FFCE9E;opacity:0}
.blip.b1{animation:blip 4s linear .6s infinite}
.blip.b2{animation:blip 4s linear 1.8s infinite}
.blip.b3{animation:blip 4s linear 2.7s infinite}
.blip.b4{animation:blip 4s linear 3.4s infinite}
@keyframes blip{0%{opacity:0;r:2}10%{opacity:1;r:6}40%{opacity:.8;r:4}100%{opacity:0;r:4}}
.radar-tags{position:absolute;inset:0;pointer-events:none}
.rt{position:absolute;font-size:12.5px;font-weight:640;color:#241d1b;background:#fff;
  padding:6px 11px;border-radius:100px;box-shadow:0 6px 16px rgba(0,0,0,.3);white-space:nowrap;
  opacity:0;animation:rtPop 4s ease-in-out infinite}
.rt1{top:24%;right:2%;animation-delay:.8s}
.rt2{bottom:22%;left:0%;animation-delay:2s}
.rt3{bottom:6%;right:16%;animation-delay:3s}
@keyframes rtPop{0%{opacity:0;transform:scale(.8) translateY(6px)}
  12%{opacity:1;transform:none}45%{opacity:1}60%{opacity:0}100%{opacity:0}}
@media(min-width:900px){.tr{grid-template-columns:1.1fr .9fr}.tr-text{padding:56px 46px}}
@media(prefers-reduced-motion:reduce){.radar-sweep,.blip,.rt{animation:none}.blip,.rt{opacity:.9}}

/* Bild-Text-Blöcke wie Startseite */
.wwm2{display:grid;gap:32px;align-items:center;margin-bottom:64px}
.wwm2:last-child{margin-bottom:0}
.wwm2-bild{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--schatten);
  aspect-ratio:4/5;max-height:520px}
.wwm2-bild img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.wwm2-text h3{font-size:clamp(24px,3.6vw,34px);margin:6px 0 18px}
.vs-mini{font-size:16px;line-height:1.5;padding:14px 0;border-top:1px solid var(--line)}
.vs-mini b{color:var(--ink);font-weight:640}
.vs-x,.vs-c{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 10px;border-radius:100px;margin-right:10px;vertical-align:middle}
.vs-x{background:var(--bg-2);color:var(--ink-3)}
.vs-c{background:var(--akzent-w);color:var(--akzent)}
@media(min-width:820px){
  .wwm2{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:60px}
  .wwm2.dreh .wwm2-bild{order:2}
}

/* Feature-Grid (bleibt) */
.feat-grid{display:grid;gap:16px;grid-template-columns:1fr}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:24px 22px;
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease}
.feat:hover{transform:translateY(-3px);box-shadow:var(--schatten-s);border-color:var(--line-2)}
.feat-i{font-size:28px;margin-bottom:12px;line-height:1}
.feat h4{font-size:17px;margin-bottom:6px}
.feat p{font-size:14.5px;margin:0}
@media(min-width:560px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.feat-grid{grid-template-columns:repeat(3,1fr)}}

/* ═══ DUELL · Andere vs PDA ═══ */
.duell{display:grid;gap:20px;align-items:center;position:relative}
.dl-karte{position:relative;border-radius:26px;padding:34px 30px}
.dl-tag,.dl-marke{display:flex;align-items:center;gap:11px;font-weight:800;margin-bottom:22px}

/* Mager — allein & andere Agenturen, gedämpft */
.dl-mager{background:var(--bg-2);border:1px solid var(--line)}
.dl-mager .dl-tag{color:var(--ink-3);font-size:15px;letter-spacing:.02em}
.dl-mager .dl-liste li{color:var(--ink-2)}
.dc-grau{background:#C7BDB6!important;box-shadow:none!important}
.dl-fazit{margin:20px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-3);font-weight:560}
.dl-fazit-hell{color:rgba(255,255,255,.82)}

/* PDA — groß, warm, leuchtend, angehoben */
.dl-pda{background:linear-gradient(165deg,#2B211F 0%,#3A2926 100%);color:#fff;overflow:hidden;
  box-shadow:0 40px 80px -34px rgba(201,134,134,.55);z-index:2}
.dl-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 55% at 15% 0%,rgba(201,161,92,.28),transparent 60%),
    radial-gradient(60% 60% at 100% 100%,rgba(201,134,134,.34),transparent 62%)}
.dl-pda > *{position:relative;z-index:1}
.dl-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);color:#FFCE9E;font-size:12.5px;font-weight:800;
  padding:6px 13px;border-radius:100px;margin-bottom:18px}
.dl-marke svg{width:34px;height:34px;border-radius:9px}
.dl-marke b{font-size:19px;color:#fff}

/* Listen */
.dl-liste{display:flex;flex-direction:column;gap:0}
.dl-liste li{display:flex;align-items:center;gap:13px;font-size:15.5px;font-weight:560;
  padding:12px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.dl-liste li:last-child{border-bottom:none}
.dl-pda .dl-liste li{border-bottom-color:rgba(255,255,255,.09);color:rgba(255,255,255,.92)}
.dl-pda .dl-liste li b{color:#FFCE9E;font-weight:800}
.dx{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 auto;
  border-radius:50%;background:rgba(0,0,0,.07);color:var(--ink-3);font-size:14px}
.dc{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 auto;
  border-radius:50%;background:var(--forst,#1B6E52);color:#fff;font-size:14px;font-weight:900;
  box-shadow:0 4px 12px rgba(27,110,82,.5)}

/* VS-Kreis */
.dl-vs{justify-self:center;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);box-shadow:0 12px 28px -10px rgba(43,33,31,.3);
  font-weight:900;font-style:italic;color:var(--akzent);font-size:18px;
  margin:-6px 0;z-index:3;position:relative}

/* Häkchen poppen gestaffelt rein */
.dl-pda .dl-liste li{opacity:0;transform:translateX(-10px)}
.dl-pda.in .dl-liste li{opacity:1;transform:none;transition:all .5s var(--ease)}
.dl-pda.in .dl-liste li:nth-child(1){transition-delay:.05s}
.dl-pda.in .dl-liste li:nth-child(2){transition-delay:.13s}
.dl-pda.in .dl-liste li:nth-child(3){transition-delay:.21s}
.dl-pda.in .dl-liste li:nth-child(4){transition-delay:.29s}
.dl-pda.in .dl-liste li:nth-child(5){transition-delay:.37s}
.dl-pda.in .dl-liste li:nth-child(6){transition-delay:.45s}
.dl-pda.in .dl-liste li:nth-child(7){transition-delay:.53s}
.dl-pda.in .dl-liste li:nth-child(8){transition-delay:.61s}
.dl-pda.in .dc{animation:dcpop .4s var(--ease) both}
.dl-pda.in .dl-liste li:nth-child(1) .dc{animation-delay:.20s}
.dl-pda.in .dl-liste li:nth-child(2) .dc{animation-delay:.28s}
.dl-pda.in .dl-liste li:nth-child(3) .dc{animation-delay:.36s}
.dl-pda.in .dl-liste li:nth-child(4) .dc{animation-delay:.44s}
.dl-pda.in .dl-liste li:nth-child(5) .dc{animation-delay:.52s}
.dl-pda.in .dl-liste li:nth-child(6) .dc{animation-delay:.60s}
.dl-pda.in .dl-liste li:nth-child(7) .dc{animation-delay:.68s}
.dl-pda.in .dl-liste li:nth-child(8) .dc{animation-delay:.76s}
@keyframes dcpop{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

@media(min-width:900px){
  .duell{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.18fr);gap:18px}
  .dl-mager{transform:scale(.96);opacity:.92}
  .dl-pda{padding:44px 40px;transform:scale(1.04);margin-left:6px}
}
@media(prefers-reduced-motion:reduce){
  .dl-pda .dl-liste li{opacity:1;transform:none}
  .dl-pda.in .dc{animation:none}
}

/* Vergleichstabelle — PDA-Spalte knallt als hervorgehobene Karte */
.vt{position:relative;max-width:840px;margin:22px auto 0;padding-top:16px;
  border:none!important;background:none!important;overflow:visible!important;border-radius:0}
.vt-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:stretch}
.vt-row > div{padding:16px 18px;font-size:15px;display:flex;align-items:center;
  border-bottom:1px solid var(--line)}
.vt-row:last-child > div{border-bottom:none}
.vt-row > div:first-child{color:var(--ink-2);font-weight:560}

/* Kopfzeile */
.vt-head > div{border-bottom:none;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);justify-content:center;padding-bottom:14px}
.vt-and{color:var(--ink-3);justify-content:center;gap:8px;text-align:center}

/* Die PDA-Spalte: durchgehende erhöhte Karte mit Akzent */
.vt-uns{position:relative;justify-content:center;gap:9px;font-weight:800;color:var(--ink);
  background:linear-gradient(180deg,#fff, #FFF7F4);border-left:1px solid var(--akzent-w);
  border-right:1px solid var(--akzent-w)}
.vt-row:first-child .vt-uns{border-radius:20px 20px 0 0;border-top:1px solid var(--akzent-w);
  background:linear-gradient(180deg,var(--akzent),var(--akzent-d));
  box-shadow:0 -2px 0 var(--akzent)}
.vt-row:last-child .vt-uns{border-radius:0 0 20px 20px;border-bottom:1px solid var(--akzent-w)}
.vt{filter:drop-shadow(0 26px 48px rgba(201,134,134,.20))}
.vt-uns b{font-weight:800;color:var(--akzent-d)}

/* Badge im Kopf */
.vt-badge{display:inline-block;color:#fff;font-size:13px;font-weight:800;letter-spacing:.02em;
  text-transform:none}
.vt-head .vt-and{color:var(--ink-3)}

/* Häkchen & Kreuz */
.vc{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--forst,#1B6E52);color:#fff;font-size:13px;font-weight:900;flex:0 0 auto}
.vx{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:rgba(0,0,0,.06);color:var(--ink-3);font-size:13px;flex:0 0 auto}

@media(max-width:560px){
  .vt-row>div{font-size:13px;padding:13px 10px}
  .vt-badge{font-size:12px}
}

/* ═══════════════════════════════════════════════════════════════════════
   „WAS WIR MACHEN" · interaktiver Vergleich Andere ⟷ PDA
   ═══════════════════════════════════════════════════════════════════════ */
.vgl-schalter{position:relative;display:inline-flex;background:#fff;border-radius:100px;
  padding:6px;box-shadow:var(--schatten-s);margin:0 auto 40px}
.vgl-schalter button{position:relative;z-index:2;border:0;background:transparent;
  font-family:var(--sans);font-size:16px;font-weight:640;color:var(--ink-2);
  padding:12px 30px;border-radius:100px;cursor:pointer;transition:color .3s ease;white-space:nowrap}
.vgl-schalter button.an{color:#fff}
.vgl-glow{position:absolute;z-index:1;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);
  border-radius:100px;background:var(--ink-3);transition:transform .42s var(--ease),background .3s ease}
.vgl-schalter.pda .vgl-glow{transform:translateX(100%);background:var(--akzent)}

.vgl-grid{display:grid;gap:18px;grid-template-columns:1fr}
.vgl-karte{background:#fff;border:2px solid var(--line);border-radius:var(--r-l);
  padding:28px 26px;transition:border-color .4s var(--ease),box-shadow .4s ease,
    transform .4s var(--ease),background .4s ease}
.vgl-ico{font-size:30px;margin-bottom:12px;line-height:1;filter:grayscale(1) opacity(.5);
  transition:filter .4s ease}
.vgl-karte h3{font-size:22px;margin-bottom:14px}
.vgl-a,.vgl-p{font-size:16px;line-height:1.5;margin:0}
.vgl-a b,.vgl-p b{font-weight:640;color:var(--ink)}
/* Modus: Andere Agentur */
.vgl-grid[data-mode="andere"] .vgl-karte{background:var(--bg-2);border-color:var(--line)}
.vgl-grid[data-mode="andere"] .vgl-p{display:none}
.vgl-grid[data-mode="andere"] .vgl-a{color:var(--ink-3)}
.vgl-grid[data-mode="andere"] .vgl-a::before{content:"✕  ";color:var(--ink-3);font-weight:700}
/* Modus: PDA */
.vgl-grid[data-mode="pda"] .vgl-karte{background:#fff;border-color:var(--akzent);
  box-shadow:0 12px 34px rgba(201,134,134,.14);transform:translateY(-2px)}
.vgl-grid[data-mode="pda"] .vgl-ico{filter:none}
.vgl-grid[data-mode="pda"] .vgl-a{display:none}
.vgl-grid[data-mode="pda"] .vgl-p{color:var(--ink-2);animation:vglRein .45s var(--ease)}
.vgl-grid[data-mode="pda"] .vgl-p::before{content:"✓  ";color:var(--akzent);font-weight:800}
@keyframes vglRein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:700px){.vgl-grid{grid-template-columns:1fr 1fr}}

/* ═══════════════════════════════════════════════════════════════════════
   „WAS WIR MACHEN" · Bento-Grid (Apple-Stil)
   ═══════════════════════════════════════════════════════════════════════ */
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.bt{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:24px 22px;display:flex;flex-direction:column;gap:2px;
  transition:transform .3s var(--ease),box-shadow .35s ease,border-color .3s ease}
.bt:hover{transform:translateY(-3px);box-shadow:var(--schatten-s);border-color:var(--line-2)}
.bt-ico{width:44px;height:44px;border-radius:12px;background:var(--akzent-w);
  display:grid;place-items:center;color:var(--akzent);margin-bottom:14px}
.bt-ico svg{width:23px;height:23px}
.bt h3{font-size:clamp(20px,2.4vw,26px);margin:0 0 6px;letter-spacing:-.02em}
.bt h4{font-size:16.5px;margin:0 0 4px;letter-spacing:-.01em}
.bt p{font-size:14.5px;color:var(--ink-3);margin:0;line-height:1.45}
.bt p b{color:var(--ink);font-weight:640}
.bt-kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--akzent);margin-bottom:8px}

/* Du-Kachel: Akzent-Highlight */
.bt-du{background:linear-gradient(150deg,var(--akzent),var(--akzent-d));color:#fff;
  border:none;flex-direction:row;align-items:center;gap:20px;
  box-shadow:0 16px 40px rgba(201,134,134,.24)}
.bt-du .bt-ico{background:rgba(255,255,255,.18);color:#fff;width:52px;height:52px;flex-shrink:0;margin:0}
.bt-du .bt-ico svg{width:26px;height:26px}
.bt-du .bt-kicker{color:rgba(255,255,255,.85)}
.bt-du h3{color:#fff}
.bt-du p{color:rgba(255,255,255,.85);font-size:15.5px}

/* TrendRadar: dunkle, hohe Kachel mit Mini-Radar */
.bt-dark{background:var(--bg-tief);border:none;color:#fff;position:relative;overflow:hidden;
  justify-content:flex-end;min-height:230px}
.bt-dark::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 70% 25%,rgba(201,161,92,.28),transparent 65%)}
.bt-dark > *{position:relative;z-index:2}
.bt-dark h3{color:#fff}
.bt-dark p{color:rgba(255,255,255,.72)}
.bt-kicker.gold{color:#FFCE9E}
.bt-radar{position:absolute;top:-10px;right:-10px;width:150px;height:150px;z-index:1;opacity:.9}
.bt-radar svg{width:100%;height:100%}
.bt-sweep{transform-origin:60px 60px;animation:radarDreh 4s linear infinite}
.bt-blip{fill:#FFCE9E;opacity:0;animation:blip 4s linear 1s infinite}
.bt-blip.d2{animation-delay:2.6s}

/* Spannen */
@media(min-width:760px){
  .bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto)}
  .bt-wide{grid-column:span 2}
  .bt-tall{grid-row:span 2}
}

/* ═══ Bento: vollständige Reihen + AI-/Manager-Kacheln ══════ */
.bt-ai{position:relative}
.bt-ai .bt-ico{background:rgba(201,161,92,.16);color:#9a7b3c}
.bt-ai::after{content:"KI";position:absolute;top:16px;right:16px;font-size:11px;font-weight:800;
  letter-spacing:.06em;color:#9a7b3c;background:rgba(201,161,92,.14);padding:3px 8px;border-radius:100px}
@media(min-width:760px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .bt-wide{grid-column:span 2}
  .bt-tall{grid-row:span 1}
  .bt-dark{min-height:auto}
  .bt-dark .bt-radar{width:130px;height:130px;top:-6px;right:-6px}
}

/* ═══ Unsere Chatter ═══ */
.chatter{display:grid;gap:34px;align-items:center}
.chatter-zahl{background:var(--bg-tief);color:#fff;border-radius:var(--r-xl);
  padding:48px 34px;text-align:center;box-shadow:var(--schatten)}
.chatter-zahl b{display:block;font-size:clamp(52px,10vw,84px);font-weight:720;
  letter-spacing:-.04em;line-height:1;background:linear-gradient(180deg,#fff,#F4D9A8);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.chatter-zahl span{display:block;font-size:17px;color:rgba(255,255,255,.72);margin-top:14px;
  max-width:22ch;margin-left:auto;margin-right:auto}
.chatter-text h2{font-size:clamp(26px,3.8vw,38px);margin:6px 0 16px}
.chatter-text .mini{margin-top:22px}
@media(min-width:820px){.chatter{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:60px}}

/* ═══ Exclusive Events ═══ */
.event{position:relative;overflow:hidden;background:var(--bg-tief);color:#fff;
  padding:120px 0;min-height:520px;display:flex;align-items:center}
.event-bg{position:absolute;inset:0;z-index:0}
.event-bg img{width:100%;height:100%;object-fit:cover;opacity:.45}
.event-bg .ph{width:100%;height:100%;opacity:.4}
.event::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(43,33,31,.45),rgba(43,33,31,.85))}
.event-glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 30%,rgba(201,161,92,.28),transparent 65%)}
.event .wrap{position:relative;z-index:2}
.event-in{max-width:640px}
.event-badge{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.04em;
  color:#FFCE9E;background:rgba(201,161,92,.16);border:1px solid rgba(201,161,92,.3);
  padding:8px 18px;border-radius:100px;margin-bottom:22px}
.event-in h2{color:#fff;font-size:clamp(34px,6vw,60px);line-height:1.04;margin-bottom:20px}
.event-in p{color:rgba(255,255,255,.82);font-size:clamp(17px,2.1vw,20px);max-width:46ch;margin-bottom:26px}
.event-tags{display:flex;flex-wrap:wrap;gap:10px}
.event-tags span{font-size:14.5px;font-weight:560;color:#fff;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);padding:9px 16px;border-radius:100px;backdrop-filter:blur(6px)}

/* ═══ Chatter-Vergleich · Chat-Mockups ════════════════════ */
.chatvs{display:grid;gap:20px;grid-template-columns:1fr;max-width:820px;margin:0 auto}
.cv-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--schatten-s);display:flex;flex-direction:column}
.cv-wir{border:2px solid var(--akzent);box-shadow:0 14px 38px rgba(201,134,134,.16)}
.cv-head{padding:16px 20px;border-bottom:1px solid var(--line);background:var(--bg-3)}
.cv-tag{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.cv-tag.akz{color:var(--akzent)}
.cv-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;
  background:linear-gradient(180deg,var(--bg-3),#fff)}
.cb{max-width:80%;padding:11px 15px;border-radius:18px;font-size:15px;line-height:1.4;
  animation:cbIn .4s var(--ease) both}
.cb.in{align-self:flex-start;background:#EDEAE4;color:var(--ink);border-bottom-left-radius:5px}
.cb.out{align-self:flex-end;background:var(--akzent);color:#fff;border-bottom-right-radius:5px}
.cb.out.grau{background:#D8D3CB;color:var(--ink-2)}
.cb.klein{font-size:20px;letter-spacing:2px;color:var(--ink-3);padding:8px 15px}
.cb-ppv{display:inline-block;margin-top:6px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);
  padding:4px 10px;border-radius:100px;font-size:13px;font-weight:640}
.cv-body .cb:nth-child(1){animation-delay:.05s}
.cv-body .cb:nth-child(2){animation-delay:.18s}
.cv-body .cb:nth-child(3){animation-delay:.31s}
.cv-body .cb:nth-child(4){animation-delay:.44s}
.cv-body .cb:nth-child(5){animation-delay:.57s}
@keyframes cbIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.cv-foot{padding:16px 20px;font-size:15px;font-weight:600;text-align:center;border-top:1px solid var(--line)}
.cv-foot b{font-weight:800}
.cv-foot.bad{color:var(--ink-3);background:var(--bg-2)}
.cv-foot.gut{color:#fff;background:var(--forst)}
@media(min-width:760px){.chatvs{grid-template-columns:1fr 1fr}}

/* ═══ Fix: grüner Ergebnis-Balken fest (nicht von --forst abhängig) ══════ */
:root{--forst:#1B6E52;}
.cv-foot.gut{background:#1B6E52 !important;color:#fff !important}
.cv-foot.gut b{color:#fff !important}

/* ═══ Mehr Einnahmen · Kooperationen ══════════════════════ */
.einnahmen{display:grid;gap:18px;grid-template-columns:1fr}
.ein-karte{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:30px 26px;position:relative;transition:transform .3s var(--ease),box-shadow .35s ease,border-color .3s ease}
.ein-karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-s);border-color:var(--line-2)}
.ein-ico{width:48px;height:48px;border-radius:13px;background:var(--akzent-w);color:var(--akzent);
  display:grid;place-items:center;margin-bottom:16px}
.ein-ico svg{width:24px;height:24px}
.ein-badge{position:absolute;top:26px;right:22px;font-size:11.5px;font-weight:700;
  letter-spacing:.02em;color:#1B6E52;background:#E7F2EC;padding:5px 11px;border-radius:100px}
.ein-karte h3{font-size:21px;margin-bottom:10px}
.ein-karte p{font-size:15px;margin:0;line-height:1.5}
@media(min-width:760px){.einnahmen{grid-template-columns:repeat(3,1fr)}}

/* ═══════════════════════════════════════════════════════════════════════
   Einnahmen-Stapel (dunkel) + Profi-Shooting Editorial
   ═══════════════════════════════════════════════════════════════════════ */
.ein2{position:relative;overflow:hidden;background:var(--bg-tief);color:#fff;padding:100px 0}
.ein2-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(50% 60% at 20% 20%,rgba(201,161,92,.24),transparent 62%),
    radial-gradient(50% 60% at 90% 90%,rgba(201,134,134,.2),transparent 65%)}
.ein2 .wrap{position:relative;z-index:2}
.ein2-grid{display:grid;gap:44px;align-items:center}
.ein2-text h2{font-size:clamp(30px,4.6vw,48px);margin-bottom:16px}
.ein2-text p{font-size:clamp(16px,2vw,19px);max-width:42ch}

/* Stapel */
.stapel{display:flex;flex-direction:column;gap:22px}
.st-row{display:block}
.st-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.st-head b{font-size:17px;color:#fff}
.st-head span{font-size:12px;color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:2px 9px}
.st-head span.gruen{color:#8FD3B6;border-color:rgba(143,211,182,.4)}
.st-erkl{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.62);
  max-width:52ch;margin:0 0 10px}
.st-erkl b{color:rgba(255,255,255,.9)}
.st-bar{height:22px;background:rgba(255,255,255,.08);border-radius:100px;overflow:hidden}
.st-fill{display:block;height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--akzent),#DDA3A3);transition:width 1.1s var(--ease)}
.st-fill.base{background:linear-gradient(90deg,#C9A15C,#E4C98B)}
.st-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:10px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.st-total span{font-size:14px;color:rgba(255,255,255,.6)}
.st-total b{font-size:clamp(18px,2.4vw,24px);font-weight:700;color:#FFCE9E;text-align:right}
@media(min-width:880px){.ein2-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}}

/* Profi-Shooting · hell, Text neben Bild */
.shoot2{background:var(--bg)}
.shoot2-grid{display:grid;gap:40px;align-items:center}
.shoot2-text h2{font-size:clamp(32px,5vw,52px);line-height:1.04;margin-bottom:16px}
.shoot2-text p{font-size:clamp(16px,2vw,19px);color:var(--ink);opacity:.82;
  max-width:46ch;margin-bottom:24px}
.shoot2-bild{position:relative;border-radius:26px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(43,33,31,.5);aspect-ratio:4/5}
.shoot2-bild img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
@media(min-width:880px){
  .shoot2-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
  .shoot2-bild{aspect-ratio:4/5;max-height:600px}
}

/* ═══════════════════════════════════════════════════════════
   GELD-SEITE · Split · Fluss · 40%-Kacheln
   ═══════════════════════════════════════════════════════════ */

/* Split-Balken 60/40 */
.gsplit{display:flex;height:clamp(150px,26vw,220px);border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 30px 66px -30px rgba(201,134,134,.4);max-width:860px;margin:0 auto}
.gsplit-du,.gsplit-wir{display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:20px;text-align:center;flex-grow:0;flex-shrink:0;transition:flex-basis 1.1s var(--ease)}
.gsplit-du{flex-basis:50%;background:linear-gradient(150deg,var(--akzent),var(--akzent-d));color:#fff}
.gsplit-wir{flex-basis:50%;background:var(--bg-2);color:var(--ink-2)}
.gsplit.in .gsplit-du{flex-basis:60%}
.gsplit.in .gsplit-wir{flex-basis:40%}
.gsplit-pct{font-size:clamp(38px,8vw,72px);font-weight:800;letter-spacing:-.04em;line-height:1}
.gsplit-lab{font-size:clamp(13px,1.6vw,16px);margin-top:8px;font-weight:600;opacity:.92}
.gsplit-wir .gsplit-lab{opacity:.7}

.gsplit-note{display:grid;gap:14px;max-width:860px;margin:26px auto 0}
.gsplit-note > div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.gsplit-note b{display:block;font-size:16px;color:var(--ink);margin-bottom:4px}
.gsplit-note span{font-size:14px;color:var(--ink-3);line-height:1.45}
@media(min-width:760px){.gsplit-note{grid-template-columns:repeat(3,1fr)}}

/* Geld-Fluss */
.fluss{display:grid;gap:16px;align-items:stretch;max-width:960px;margin:0 auto}
.fl-step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 24px;
  box-shadow:var(--schatten-s);position:relative}
.fl-nr{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--akzent-w);color:var(--akzent-d);font-weight:800;font-size:16px;
  margin-bottom:14px}
.fl-step b{display:block;font-size:18px;color:var(--ink);margin-bottom:7px}
.fl-step p{font-size:14.5px;color:var(--ink-3);line-height:1.5}
.fl-uns{background:var(--bg-tief);border-color:var(--bg-tief)}
.fl-uns .fl-nr{background:rgba(255,255,255,.14);color:#FFCE9E}
.fl-uns b{color:#fff}
.fl-uns p{color:rgba(255,255,255,.72)}
.fl-pfeil{display:none;align-items:center;justify-content:center;color:var(--akzent);
  font-size:26px;font-weight:700}
@media(min-width:820px){
  .fluss{grid-template-columns:1fr auto 1fr auto 1fr;gap:8px}
  .fl-pfeil{display:flex}
}

/* Wofür die 40% · hell mit Icons */
.wert40{position:relative;overflow:hidden;background:var(--bg);padding:96px 0}
.w40-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(52% 48% at 12% 8%,rgba(201,161,92,.14),transparent 60%),
    radial-gradient(56% 56% at 92% 96%,rgba(201,134,134,.12),transparent 62%)}
.wert40 .wrap{position:relative;z-index:2}
.w40-kopf{max-width:640px;margin-bottom:44px}
.w40-kopf h2{font-size:clamp(30px,4.8vw,50px);line-height:1.03;margin:6px 0 14px}
.w40-grid{display:grid;gap:16px}
.w40{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:28px 24px;box-shadow:0 10px 30px -20px rgba(43,33,31,.28);text-decoration:none;
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.w40::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--akzent),var(--gold,#C9A15C));transition:width .4s var(--ease)}
.w40:hover{transform:translateY(-5px);box-shadow:0 26px 54px -24px rgba(201,134,134,.4);
  border-color:var(--akzent-w)}
.w40:hover::before{width:100%}
.w40-ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:14px;background:var(--akzent-w);color:var(--akzent-d);margin-bottom:16px;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.w40:hover .w40-ic{background:var(--akzent);color:#fff;transform:scale(1.06)}
.w40-ic svg{width:26px;height:26px}
.w40 h3{font-size:18.5px;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.w40 p{font-size:14.5px;color:var(--ink-3);line-height:1.5;flex:1 0 auto}
.w40-mehr{display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-size:14px;font-weight:700;color:var(--akzent-d)}
.w40-mehr svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.w40:hover .w40-mehr svg{transform:translateX(4px)}
.auf-s.in>*:nth-child(5){transition-delay:.36s}
.auf-s.in>*:nth-child(6){transition-delay:.45s}
@media(min-width:640px){.w40-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.w40-grid{grid-template-columns:repeat(3,1fr)}}

/* Bilder mit sanftem Parallax (JS steuert das Transform) */
.pbild{overflow:hidden}
.pbild img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.14)}

/* Emotionales Bildband */
.gband{position:relative;height:clamp(300px,52vw,560px);overflow:hidden}
.gband-bild{position:absolute;inset:0}
.gband-bild img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.gband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(43,33,31,.7) 0%,rgba(43,33,31,.3) 42%,transparent 70%)}
.gband-txt{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(24px,5vw,60px);
  max-width:640px;color:#fff}
.gband-txt span{display:block;font-size:clamp(14px,2vw,18px);color:rgba(255,255,255,.82);
  margin-bottom:10px}
.gband-txt b{display:block;font-size:clamp(26px,5vw,52px);font-weight:700;
  letter-spacing:-.025em;line-height:1.05}

/* Über uns · Team-Showcase (WOW) */
.tw{display:grid;gap:20px;align-items:stretch}
@media(min-width:900px){.tw{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:26px}}

/* Bühne */
.tw-stage{position:relative;overflow:hidden;border-radius:28px;padding:40px 38px;
  min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(165deg,#2B211F 0%,#3A2926 100%);color:#fff;
  box-shadow:0 40px 84px -36px rgba(201,134,134,.5)}
.tw-stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 85% 0%,rgba(201,161,92,.28),transparent 60%),
    radial-gradient(70% 60% at 0% 100%,rgba(201,134,134,.32),transparent 62%)}
.tw-nr{position:absolute;top:6px;right:24px;z-index:1;font-size:clamp(120px,20vw,220px);
  font-weight:800;line-height:1;letter-spacing:-.05em;color:rgba(255,255,255,.06)}
.tw-ic{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.12);color:#FFCE9E;
  margin-bottom:20px;backdrop-filter:blur(6px)}
.tw-ic svg{width:32px;height:32px}
.tw-body{position:relative;z-index:2}
.tw-body h3{font-size:clamp(26px,4vw,40px);letter-spacing:-.02em;line-height:1.05;color:#fff}
.tw-body p{margin-top:12px;font-size:clamp(15px,2vw,18px);color:rgba(255,255,255,.78);max-width:36ch}
/* Crossfade beim Wechsel */
.tw-ic,.tw-nr,.tw-body h3,.tw-body p{transition:opacity .32s var(--ease),transform .32s var(--ease)}
.tw-stage.wechsel .tw-ic,.tw-stage.wechsel .tw-body h3,.tw-stage.wechsel .tw-body p{opacity:0;transform:translateY(10px)}
.tw-stage.wechsel .tw-nr{opacity:0}

/* Liste */
.tw-liste{display:flex;flex-direction:column;gap:8px}
.tw-item{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;
  text-align:left;width:100%;padding:18px 20px;border-radius:16px;cursor:pointer;
  background:#fff;border:1px solid var(--line);color:var(--ink-3);
  font-size:16px;font-weight:600;transition:all .3s var(--ease)}
.tw-item b{font-size:13px;font-weight:800;color:var(--line-2);min-width:22px}
.tw-item span{flex:1}
.tw-item:hover{border-color:var(--akzent-w);color:var(--ink)}
.tw-item.an{background:var(--akzent-w);border-color:var(--akzent);color:var(--akzent-d)}
.tw-item.an b{color:var(--akzent)}
.tw-prog{position:absolute;left:0;bottom:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--akzent),var(--gold,#C9A15C))}
.tw-item.an .tw-prog{width:100%;transition:width var(--tw-dauer,4s) linear}
@media(prefers-reduced-motion:reduce){.tw-item.an .tw-prog{transition:none;width:100%}}

/* Über uns · Diskretion */
.disk{position:relative;text-align:center;max-width:720px;margin:0 auto;padding-top:20px}
.disk-mark{margin:0 auto 22px;width:64px;height:64px;color:var(--akzent);
  filter:drop-shadow(0 14px 30px rgba(201,134,134,.32))}
.disk-mark svg{width:100%;height:100%}
.disk h2{font-size:clamp(30px,5vw,52px);line-height:1.02}
.disk-punkte{display:grid;gap:16px;margin-top:44px}
.dp{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 24px;
  box-shadow:0 10px 30px -20px rgba(43,33,31,.26);text-align:left;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.dp::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--akzent),var(--gold,#C9A15C));transition:width .4s var(--ease)}
.dp:hover{transform:translateY(-5px);box-shadow:0 26px 54px -24px rgba(201,134,134,.4);border-color:var(--akzent-w)}
.dp:hover::before{width:100%}
.dp-nr{position:absolute;top:20px;right:22px;font-size:13px;font-weight:800;
  color:var(--line-2);letter-spacing:.02em}
.dp-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:13px;background:var(--akzent-w);color:var(--akzent-d);margin-bottom:14px;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.dp:hover .dp-ic{background:var(--akzent);color:#fff;transform:scale(1.06)}
.dp-ic svg{width:24px;height:24px}
.dp b{display:block;font-size:17.5px;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.dp p{font-size:14.5px;color:var(--ink-3);line-height:1.5}
@media(min-width:820px){.disk-punkte{grid-template-columns:repeat(3,1fr)}}

/* Fragen-Seite · ruhiger Bild-Split-Kopf */
.kopf-split{text-align:left;padding-bottom:24px}
.kopf-split h1{font-size:clamp(34px,5.4vw,60px);line-height:1.02;letter-spacing:-.03em}
@media(min-width:860px){
  .kopf-split .psplit{align-items:center;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:52px}
  .kopf-split .psplit-bild{aspect-ratio:4/5;max-height:460px;align-self:center}
  .kopf-split .psplit-txt .gross{max-width:44ch;margin:16px 0 0}
}
@media(max-width:859px){
  .kopf-split{text-align:center}
  .kopf-split .psplit-txt .tag{margin-left:auto;margin-right:auto}
  .kopf-split .psplit-bild{max-width:400px;max-height:460px;margin:0 auto}
}

/* Fragen-Seite · Die größten Sorgen (ruhig, keine Kacheln) */
.sorgen{max-width:800px;margin:0 auto;display:flex;flex-direction:column}
.sorge{display:flex;gap:22px;align-items:flex-start;padding:30px 0;border-bottom:1px solid var(--line)}
.sorge:first-child{padding-top:0}
.sorge:last-child{border-bottom:none}
.sorge-ic{flex:0 0 auto;width:56px;height:56px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--akzent-w);color:var(--akzent-d)}
.sorge-ic svg{width:28px;height:28px}
.sorge h3{font-size:clamp(19px,2.6vw,24px);color:var(--ink);letter-spacing:-.015em;margin-bottom:9px;line-height:1.2}
.sorge p{font-size:clamp(15px,2vw,17px);color:var(--ink-2);line-height:1.6}
.sorge p b{color:var(--ink)}
.sorge-schluss{max-width:640px;margin:44px auto 0;text-align:center;
  font-size:clamp(15px,2vw,17.5px);color:var(--akzent-d);line-height:1.6;
  background:var(--akzent-w);border-radius:20px;padding:24px 28px}
@media(max-width:560px){.sorge-ic{width:46px;height:46px}.sorge-ic svg{width:24px;height:24px}}

/* Die 4 Fragen */
.fragen4{display:grid;gap:14px;max-width:760px;margin:0 auto}
.fr4{display:flex;align-items:flex-start;gap:18px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:18px;padding:22px 24px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.fr4:hover{transform:translateY(-2px);box-shadow:0 16px 38px -22px rgba(43,33,31,.3)}
.fr4-nr{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;background:var(--akzent);color:#fff;
  font-weight:800;font-size:16px}
.fr4-in{display:flex;flex-direction:column;gap:8px;padding-top:2px}
.fr4-q{font-size:clamp(17px,2.4vw,20px);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.fr4-a{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--ink-2);line-height:1.5}
.fr4-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--forst,#1B6E52);color:#fff;margin-top:1px}
.fr4-ic svg{width:13px;height:13px}

/* Klartext-Liste (statt Kacheln) */
.klar-liste{display:grid;gap:0 56px;max-width:900px;margin:0 auto}
.klar{display:flex;align-items:flex-start;gap:16px;padding:22px 0;
  border-bottom:1px solid var(--line)}
.klar-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--forst,#1B6E52);color:#fff;margin-top:1px}
.klar-ic svg{width:17px;height:17px}
.klar b{display:block;font-size:17.5px;color:var(--ink);letter-spacing:-.01em;margin-bottom:3px}
.klar span{display:block;font-size:14.5px;color:var(--ink-3);line-height:1.5}
@media(min-width:760px){
  .klar-liste{grid-template-columns:1fr 1fr}
  /* letzte Zeile jeder Spalte ohne Trennlinie */
  .klar:nth-last-child(-n+2){border-bottom:none}
}
@media(max-width:759px){
  .klar:last-child{border-bottom:none}
}

/* Traum-Rotator */
.traum-zeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:18px;
  font-size:clamp(20px,3vw,28px);font-weight:700;letter-spacing:-.02em}
.traum-vor{color:var(--ink-3);font-weight:600}
.traum-rot{position:relative;color:var(--akzent);white-space:nowrap;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.traum-rot::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:linear-gradient(90deg,var(--akzent),transparent);border-radius:2px}
.traum-rot.raus{opacity:0;transform:translateY(-8px)}

/* Traum-Chips */
.traum-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.traum-chips span{font-size:13.5px;font-weight:560;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--line);border-radius:100px;padding:7px 15px;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.traum-chips span:hover{transform:translateY(-2px);background:var(--akzent-w);color:var(--akzent-d)}

/* Bild-Split (Text neben Bild) */
.psplit{display:grid;gap:36px;align-items:center}
.psplit-bild{border-radius:26px;aspect-ratio:4/5;
  box-shadow:0 34px 74px -32px rgba(43,33,31,.5)}
.psplit-txt h2{font-size:clamp(30px,4.6vw,50px);line-height:1.05}
@media(min-width:860px){
  .psplit{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:60px}
  .psplit-dreh .psplit-bild{order:2}
  .psplit-bild{aspect-ratio:4/5;max-height:560px}
}

/* ═══ Potenzial-Rechner · Schritte ═══ */
.est-schritte{margin:20px 0 6px;display:flex;flex-direction:column;gap:2px}
.est-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.est-row span{font-size:14.5px;color:var(--ink-3)}
.est-row b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.est-row.gut{border-bottom:none}
.est-row.gut span{color:var(--forst,#1B6E52);font-weight:600}
.est-row.gut b{font-size:13px;color:var(--forst,#1B6E52);
  background:rgba(27,110,82,.1);padding:4px 10px;border-radius:100px}