@font-face{font-family:'Overpass';src:url('../fonts/overpass-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Roustel';src:url('../fonts/roustel-sub.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}

:root{
  /* Papier und Tiefe */
  --papier:#faf8f0;
  --papier-2:#f2efe3;
  --weiss:#fff;
  --tiefe:#43473c;          /* Text und CTA-Fläche — 8,96:1 auf Papier */
  --tiefe-tief:#2f322a;
  --ink-2:#586150;          /* Sekundärtext — 6,09:1 auf Papier */
  --linie:rgba(67,71,60,.15);
  --linie-stark:rgba(67,71,60,.28);
  /* EINE Akzent-Hue: Pfirsich. Nur Fläche und Marker, nie Text. */
  --akzent:#ffc89f;
  --akzent-weich:rgba(255,200,159,.34);
  --sand:#fcdfa0;
  --salbei:#8b9680;         /* nur Fläche und Linie */
  --salbei-weich:rgba(139,150,128,.16);
  /* Maße */
  --spalte:min(100% - 2.5rem, 68rem);
  --text:62ch;
  --r:14px;
  --r-gross:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--papier);color:var(--tiefe);
  font-family:'Overpass',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;font-size:clamp(1.0625rem,.98rem + .38vw,1.1875rem);
  line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--ink-2);text-underline-offset:.22em;text-decoration-thickness:.06em;}
a:hover{color:var(--tiefe);}
:focus-visible{outline:3px solid var(--tiefe);outline-offset:3px;border-radius:4px;}
h1,h2,h3,h4{line-height:1.1;letter-spacing:-.022em;margin:0;font-weight:800;text-wrap:balance;}
p{margin:0 0 1.15em;max-width:var(--text);}
::selection{background:var(--akzent);color:var(--tiefe);}

.wrap{width:var(--spalte);margin-inline:auto;}
.skip{position:absolute;left:-9999px;top:0;background:var(--tiefe);color:var(--papier);padding:.85rem 1.4rem;z-index:100;border-radius:0 0 var(--r) 0;}
.skip:focus{left:0;}

/* ---------- Vorschau-Leiste (nur für Katrins Kontrolle) ---------- */
.vorschau{position:sticky;top:0;z-index:60;background:var(--tiefe);color:var(--papier);font-size:.83rem;}
.vorschau .in{width:var(--spalte);margin-inline:auto;display:flex;flex-wrap:wrap;gap:.55rem 1.1rem;align-items:center;padding:.6rem 0;}
.vorschau b{font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:.71rem;}
.vorschau .hinweis{color:rgba(250,248,240,.72);flex:1 1 14rem;min-width:0;}
.vorschau-nav{display:flex;gap:.4rem;flex-wrap:wrap;}
.vorschau-nav a{
  color:var(--papier);text-decoration:none;border:1px solid rgba(250,248,240,.32);
  border-radius:99px;padding:.28rem .85rem;font-weight:600;font-size:.8rem;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.vorschau-nav a:hover{background:rgba(250,248,240,.14);border-color:rgba(250,248,240,.6);}
.vorschau-nav a[aria-current]{background:var(--papier);color:var(--tiefe);border-color:var(--papier);}

/* ---------- Kopf ---------- */
.kopf{padding:1.7rem 0 .5rem;}
.kopf .in{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--tiefe);}
.marke img{width:34px;height:auto;}
.marke span{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;}
.kopf-tel{font-size:.87rem;font-weight:600;text-decoration:none;color:var(--ink-2);}

/* ---------- Hero ---------- */
.hero{padding:clamp(2rem,1rem + 4vw,4.5rem) 0 clamp(2.5rem,2rem + 3vw,4rem);}
.hero .in{display:grid;grid-template-columns:1fr;gap:clamp(2rem,1rem + 4vw,3.5rem);align-items:center;}
@media (min-width:62rem){.hero .in{grid-template-columns:1.15fr .85fr;}}
.hero h1{font-size:clamp(2.3rem,1.35rem + 4.2vw,4.15rem);letter-spacing:-.035em;}
.hero h1 .leicht{
  font-weight:300;display:block;font-size:.52em;line-height:1.24;
  letter-spacing:-.018em;color:var(--ink-2);margin-top:.5em;max-width:20ch;
}
.hero-lead{font-size:clamp(1.09rem,1.02rem + .34vw,1.28rem);color:var(--ink-2);margin-top:1.3rem;max-width:36ch;}
.hero-foto{position:relative;}
.hero-foto img{border-radius:var(--r-gross);width:100%;}
.hero-foto::after{
  content:"";position:absolute;inset:auto -1.1rem -1.1rem auto;width:58%;height:42%;
  background:var(--akzent-weich);border-radius:var(--r-gross);z-index:-1;
}
.disclaimer-hero{
  margin-top:1.5rem;font-size:.92rem;color:var(--ink-2);max-width:44ch;
  border-left:3px solid var(--akzent);padding-left:.95rem;
}

/* ---------- Knopf ---------- */
.knopf-reihe{display:flex;flex-wrap:wrap;gap:.9rem 1.1rem;align-items:center;margin-top:1.9rem;}
.knopf{
  display:inline-flex;align-items:center;gap:.6rem;background:var(--tiefe);color:var(--papier);
  text-decoration:none;font-weight:700;font-size:1.02rem;padding:.95rem 1.75rem;
  border:0;border-radius:99px;cursor:pointer;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.knopf:hover{background:var(--tiefe-tief);color:var(--papier);}
.knopf .pfeil{transition:transform .2s var(--ease);}
.knopf:hover .pfeil{transform:translateX(3px);}
.knopf-2{
  display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:var(--ink-2);
  font-weight:600;text-decoration:none;border-bottom:1px solid var(--linie-stark);padding-bottom:.15rem;
}
.knopf-2:hover{color:var(--tiefe);border-color:var(--tiefe);}
.knopf-note{font-size:.88rem;color:var(--ink-2);margin:.85rem 0 0;max-width:40ch;}
@media (prefers-reduced-motion:reduce){.knopf,.knopf .pfeil{transition:none;}}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:clamp(3rem,2rem + 4vw,5.5rem) 0;}
.abschnitt-getoent{background:var(--papier-2);}
.abschnitt-dunkel{background:var(--tiefe);color:var(--papier);}
.abschnitt-dunkel h2,.abschnitt-dunkel h3{color:var(--papier);}
.abschnitt-dunkel p{color:rgba(250,248,240,.84);}
.abschnitt h2{font-size:clamp(1.75rem,1.3rem + 1.9vw,2.7rem);max-width:19ch;}
.abschnitt .lead{font-size:1.06rem;color:var(--ink-2);margin-top:1.1rem;}
.abschnitt-dunkel .lead{color:rgba(250,248,240,.8);}
.eyebrow{
  font-size:.73rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 .85rem;display:block;
}
.abschnitt-dunkel .eyebrow{color:var(--akzent);}

/* ---------- Wiedererkennen: vier Sätze ---------- */
.saetze{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--linie);max-width:52rem;}
.saetze li{
  border-bottom:1px solid var(--linie);padding:1.15rem 0 1.15rem 2.6rem;position:relative;
  font-size:clamp(1.06rem,1rem + .3vw,1.22rem);
}
.saetze li::before{
  content:"";position:absolute;left:.4rem;top:1.72rem;width:9px;height:9px;border-radius:50%;
  background:var(--akzent);
}

/* ---------- Signatur: die Gleichung ---------- */
.gleichung{margin:0;padding:0;}
.gl-zeile{
  font-size:clamp(1.4rem,.85rem + 2.3vw,2.6rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.22;display:flex;flex-wrap:wrap;align-items:baseline;gap:.34em;
  margin:0 0 .55em;max-width:none;
}
.gl-zeile .op{color:var(--ink-2);font-weight:300;}
.gl-durch{position:relative;display:inline-block;}
.gl-durch::after{
  content:"";position:absolute;left:-.06em;right:-.06em;top:.55em;height:.075em;
  background:var(--tiefe);transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease) .1s;
}
.gl-an .gl-durch::after{transform:scaleX(1);}
.gl-frage{
  font-family:'Roustel','Overpass',cursive;font-weight:400;letter-spacing:0;
  color:var(--ink-2);font-size:1.12em;
}
.faktoren{
  list-style:none;margin:2.6rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;
  max-width:58rem;
}
.faktoren li{
  background:var(--papier);padding:1.4rem 1.35rem;
  opacity:1;transform:none;
}
.js .faktoren li{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.js .gl-an .faktoren li,.js .faktoren.gl-an li{opacity:1;transform:none;}
.faktoren .nr{
  font-family:'Roustel','Overpass',cursive;font-size:1.35rem;color:var(--ink-2);
  display:block;line-height:1;margin-bottom:.5rem;
}
.faktoren b{display:block;font-size:1.02rem;font-weight:800;margin-bottom:.25rem;}
.faktoren span.txt{font-size:.9rem;color:var(--ink-2);line-height:1.45;display:block;}
@media (prefers-reduced-motion:reduce){
  .js .faktoren li{opacity:1;transform:none;transition:none;}
  .gl-durch::after{transform:scaleX(1);transition:none;}
}

/* ---------- Zwei Spalten mit Foto ---------- */
.zwei{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,1rem + 3vw,3.4rem);align-items:center;}
@media (min-width:56rem){
  .zwei{grid-template-columns:1fr 1fr;}
  .zwei.foto-links > .foto{order:-1;}
}
.zwei .foto img{border-radius:var(--r-gross);width:100%;}
.zwei h2{max-width:16ch;}

/* ---------- Angebot ---------- */
.angebot{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:clamp(1.6rem,1.1rem + 2vw,2.8rem);max-width:44rem;
}
.angebot .kicker{font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);}
.angebot h3{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.05rem);margin:.5rem 0 .2rem;}
.preis{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin:1.1rem 0 .3rem;}
.preis .zahl{font-size:clamp(1.9rem,1.5rem + 1.6vw,2.6rem);font-weight:800;letter-spacing:-.03em;}
.preis-note{font-size:.88rem;color:var(--ink-2);margin:0;max-width:46ch;}
.enthalten{list-style:none;margin:1.7rem 0 0;padding:0;display:grid;gap:.75rem;}
.enthalten li{padding-left:1.75rem;position:relative;font-size:1rem;}
.enthalten li::before{
  content:"";position:absolute;left:0;top:.52em;width:.72rem;height:.4rem;
  border-left:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);
  transform:rotate(-45deg);
}
.offen-marker{
  display:inline-block;background:var(--sand);color:var(--tiefe);border-radius:99px;
  padding:.1rem .6rem;font-size:.74rem;font-weight:800;letter-spacing:.04em;white-space:nowrap;
}

/* ---------- Ablauf ---------- */
.schritte{list-style:none;counter-reset:s;margin:2.4rem 0 0;padding:0;display:grid;gap:1.6rem;}
@media (min-width:48rem){.schritte{grid-template-columns:repeat(3,1fr);gap:2rem;}}
.schritte li{counter-increment:s;padding-top:1.15rem;border-top:2px solid var(--akzent);}
.schritte li::before{
  content:counter(s,decimal-leading-zero);font-family:'Roustel','Overpass',cursive;
  font-size:1.5rem;color:var(--ink-2);display:block;line-height:1;margin-bottom:.55rem;
}
.schritte b{display:block;font-size:1.08rem;margin-bottom:.35rem;}
.schritte p{font-size:.96rem;color:var(--ink-2);margin:0;}

/* ---------- Stimmen-Platzhalter ---------- */
.platzhalter{
  border:2px dashed var(--linie-stark);border-radius:var(--r);padding:1.5rem 1.6rem;
  background:var(--papier);max-width:46rem;
}
.platzhalter p{margin:0;font-size:.97rem;color:var(--ink-2);}
.platzhalter b{color:var(--tiefe);}

/* ---------- FAQ ---------- */
.faq{max-width:52rem;margin-top:2.2rem;border-top:1px solid var(--linie);}
.faq details{border-bottom:1px solid var(--linie);}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.4rem 1.15rem 0;position:relative;
  font-weight:700;font-size:1.05rem;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:.5rem;top:1.55rem;width:.6rem;height:.6rem;
  border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);}
.faq .a{padding:0 0 1.3rem;color:var(--ink-2);}
.faq .a p:last-child{margin-bottom:0;}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none;}}

/* ---------- Formular ---------- */
.formular{display:grid;gap:1.1rem;max-width:34rem;margin-top:2rem;}
.feld label{display:block;font-weight:700;font-size:.95rem;margin-bottom:.4rem;}
.feld input[type=text],.feld input[type=email]{
  width:100%;font:inherit;font-size:1rem;padding:.85rem 1rem;color:var(--tiefe);
  background:var(--weiss);border:1px solid var(--linie-stark);border-radius:var(--r);
}
.abschnitt-dunkel .feld label{color:var(--papier);}
.feld input:focus-visible{outline:3px solid var(--akzent);outline-offset:1px;}
.zustimmung{display:flex;gap:.75rem;align-items:flex-start;font-size:.92rem;line-height:1.5;}
.zustimmung input{margin-top:.28rem;width:1.15rem;height:1.15rem;flex:0 0 auto;accent-color:var(--tiefe);}
.abschnitt-dunkel .zustimmung{color:rgba(250,248,240,.86);}
.abschnitt-dunkel .zustimmung a{color:var(--akzent);}
.abschnitt-dunkel .knopf{background:var(--akzent);color:var(--tiefe);}
.abschnitt-dunkel .knopf:hover{background:var(--sand);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.meldung{border-radius:var(--r);padding:1rem 1.2rem;font-size:.97rem;margin-bottom:1.2rem;}
.meldung-ok{background:var(--salbei-weich);border:1px solid var(--salbei);}
.meldung-fehler{background:var(--akzent-weich);border:1px solid var(--akzent);}
.abschnitt-dunkel .meldung{color:var(--papier);}

/* ---------- Fuß ---------- */
.fuss{background:var(--papier-2);padding:3rem 0 2.2rem;font-size:.92rem;color:var(--ink-2);border-top:1px solid var(--linie);}
.fuss-oben{display:grid;gap:1.8rem;margin-bottom:2rem;}
@media (min-width:48rem){.fuss-oben{grid-template-columns:1.4fr 1fr 1fr;}}
.fuss b{color:var(--tiefe);display:block;margin-bottom:.55rem;font-size:.79rem;letter-spacing:.14em;text-transform:uppercase;}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;}
.fuss a{color:var(--ink-2);}
.fuss-unten{border-top:1px solid var(--linie);padding-top:1.4rem;display:grid;gap:.9rem;}
.fuss-unten p{margin:0;font-size:.86rem;max-width:78ch;}
.fuss .schluss{font-family:'Roustel','Overpass',cursive;font-size:1.3rem;color:var(--ink-2);letter-spacing:0;}