@charset "utf-8";
/* ==========================================================================
   Balance-Methode – zentrales Stylesheet
   Wird von ALLEN Seiten geladen. Änderungen hier wirken überall.
   ========================================================================== */

/* --- 1. CI-Tokens ------------------------------------------------------- */
:root{
  /* Markenfarben */
  --forest:#1E4034;        /* Waldgrün – Navigation, Flächen, Akzente */
  --forest-deep:#163027;   /* dunkler, für Hover auf Waldgrün */
  --sage:#24765D;          /* zweites Grün aus dem Logo (A-Zeichen, "METHODE") */
  --sand:#EDE7DD;          /* Sandbeige – Flächen */
  --sand-light:#F6F2EB;    /* aufgehellt, für abwechselnde Sektionen */
  --terra:#C1663F;         /* Terrakotta – ausschliesslich Buttons */
  --terra-deep:#A5522F;    /* Terrakotta Hover */
  --ink:#1C1C1A;           /* Anthrazit – Fliesstext */

  /* Abgeleitet */
  --muted:#5C5A54;         /* Sekundärtext */
  --line:#DCD3C4;          /* Trennlinien auf Sand */
  --line-light:#E8E2D6;
  --white:#fff;

  /* Typo-Skala – gilt fuer alle Seiten */
  --fs-h1:clamp(2rem,5vw,3.1rem);      /* Hauptueberschrift */
  --fs-h2:clamp(1.45rem,3.5vw,2.05rem);/* Zwischenstufe, z.B. Zeitraum-Zeile */
  --fs-h3:clamp(1.15rem,2.2vw,1.3rem); /* etwas groesser als Fliesstext */
  --fs-body:1.125rem;                  /* 18px – Fliesstext, Bulletpoints */

  /* Layout */
  --maxw:1080px;
  --maxw-text:720px;
  --radius:10px;
  --radius-lg:16px;
  --shadow:0 8px 28px rgba(30,64,52,.10);
  --shadow-soft:0 2px 10px rgba(30,64,52,.06);
}

/* --- 2. Reset & Basis ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  /* Spaltenlayout, damit die Fusszeile auch auf kurzen Seiten unten
     am Fensterrand sitzt und darunter keine leere Flaeche bleibt. */
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--white);
  color:var(--ink);
  font-family:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}

figure{margin:0}
figcaption{margin:0}

a{color:var(--sage);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--forest)}

h1,h2,h3,h4{
  margin:0;
  color:var(--forest);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.015em;
}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}

hr{border:0;border-top:1px solid var(--line);margin:32px 0}

::selection{background:var(--sage);color:var(--white)}

:focus-visible{
  outline:3px solid var(--sage);
  outline-offset:3px;
  border-radius:4px;
}

/* --- 3. Typo-Skala ------------------------------------------------------- */
.t-hero{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.025em}
.t-hero .mark{color:var(--sage)}
.t-h2{font-size:var(--fs-h2);font-weight:700;line-height:1.28}
.t-h3{font-size:var(--fs-h3);font-weight:700;line-height:1.35}

/* Eyebrow – kleine Auszeichnung über einer Headline */
.eyebrow{
  display:block;
  margin:0 0 14px;
  color:var(--sage);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* Lead – hervorgehobener Einleitungssatz */
.lead{
  max-width:var(--maxw-text);
  color:var(--muted);
  font-size:var(--fs-h3);
  font-weight:400;
}

.muted{color:var(--muted)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* --- 4. Layout ----------------------------------------------------------- */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:22px;
}

.wrap-narrow{
  max-width:var(--maxw-text);
  margin:0 auto;
  padding-inline:22px;
}

/* Mittlere Breite – zwischen .wrap und .wrap-narrow.
   Fuer Inhalte, die nicht die volle Breite brauchen, aber mehr als
   eine Textspalte, etwa ein Video mit zugehoerigem Kasten. */
.wrap-mid{
  max-width:860px;
  margin:0 auto;
  padding-inline:22px;
}

/* Sektionen: einheitlicher vertikaler Rhythmus, Flächen per Modifier */
.section{padding-block:clamp(48px,7vw,84px)}
.section--sand{background:var(--sand)}
.section--sand-light{background:var(--sand-light)}
.section--forest{background:var(--forest);color:var(--sand)}
.section--forest h1,
.section--forest h2,
.section--forest h3{color:var(--white)}
.section--forest .lead,
.section--forest .muted{color:rgba(237,231,221,.82)}
.section--forest .eyebrow{color:var(--sand)}
.section--tight{padding-block:clamp(32px,4.5vw,52px)}

/* --- 5. Kopf- und Fusszeile ---------------------------------------------- */
main{flex:1 0 auto}

.site-header{flex:0 0 auto}
.site-footer{flex:0 0 auto;margin-top:auto}

.site-header{
  padding:20px 22px;
  background:var(--white);
  border-bottom:1px solid var(--line-light);
  text-align:center;
}
.site-header img{
  height:52px;
  width:auto;
  margin:0 auto;
}
@media(max-width:600px){
  .site-header{padding:16px}
  .site-header img{height:40px}
}

.site-footer{
  padding:34px 22px;
  background:var(--forest);
  color:rgba(237,231,221,.75);
  font-size:.92rem;
  text-align:center;
}
.site-footer a{
  color:var(--sand);
  text-decoration:none;
  border-bottom:1px solid rgba(237,231,221,.35);
}
.site-footer a:hover{
  color:var(--white);
  border-bottom-color:var(--white);
}
.site-footer .sep{opacity:.45;padding-inline:8px}

/* --- 6. Buttons ---------------------------------------------------------- */
.cta{
  display:inline-block;
  padding:17px 38px;
  border:0;
  border-radius:var(--radius);
  background:var(--terra);
  color:var(--white);
  font-family:inherit;
  font-size:var(--fs-h3);
  font-weight:700;
  line-height:1.35;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:background .16s ease,transform .16s ease;
}
.cta:hover{background:var(--terra-deep);color:var(--white);transform:translateY(-1px)}
.cta:active{transform:translateY(0)}

.cta--ghost{
  background:transparent;
  border:2px solid var(--forest);
  color:var(--forest);
  box-shadow:none;
}
.cta--ghost:hover{background:var(--forest);color:var(--white)}

.cta--block{display:block;width:100%}

/* Wrapper, der einen Button zentriert und ihm Luft gibt */
.cta-center{padding-block:28px;text-align:center}
.cta-note{
  margin-top:12px;
  color:var(--muted);
  font-size:.9rem;
}
.section--forest .cta-note{color:rgba(237,231,221,.7)}

/* --- 7. Checkliste ------------------------------------------------------- */
.checks{margin:0;padding:0;list-style:none}
.checks li{
  position:relative;
  padding:11px 0 11px 38px;
  border-bottom:1px solid var(--line);
}
.checks li:last-child{border-bottom:0}
.checks li::before{
  content:"";
  position:absolute;
  left:0;
  top:1.05em;
  transform:translateY(-50%);
  width:23px;
  height:23px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2324765D'/%3E%3Cpath d='M10.3 16.5 6.2 12.4l1.5-1.5 2.6 2.6 6-6 1.5 1.5z' fill='%23fff'/%3E%3C/svg%3E") center/100% no-repeat;
}

.section--forest .checks li{border-bottom-color:rgba(237,231,221,.18)}
.section--forest .checks li::before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23EDE7DD'/%3E%3Cpath d='M10.3 16.5 6.2 12.4l1.5-1.5 2.6 2.6 6-6 1.5 1.5z' fill='%231E4034'/%3E%3C/svg%3E") center/100% no-repeat}

/* --- 8. Karten ----------------------------------------------------------- */
.card{
  padding:26px 28px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--white);
  box-shadow:var(--shadow-soft);
}
.card h3{margin-bottom:8px}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.cards--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){
  .cards{grid-template-columns:1fr}
  .cards--2{grid-template-columns:1fr}
}

/* --- 9. Bild-Text-Split --------------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,56px);
  align-items:center;
}
.split--narrow-media{grid-template-columns:300px 1fr}
.split--flip .split__media{order:2}
@media(max-width:820px){
  .split,
  .split--narrow-media{grid-template-columns:1fr;gap:24px}
  .split--flip .split__media{order:0}

  /* Auf schmalen Geraeten das Medium vor den Text ziehen.
     Gilt nur fuer .split--media-top, damit andere Aufteilungen
     ihre Reihenfolge behalten. */
  .split--media-top .split__media{order:-1}
}

/* --- 10. Preis ------------------------------------------------------------ */
.price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price__old{color:var(--muted);text-decoration:line-through;font-weight:500}
.price__new{color:var(--terra);font-size:1.35rem;font-weight:800}

/* --- 11. Video (16:9, responsiv) ------------------------------------------ */
.video{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--radius-lg);
  overflow:hidden;
  /* Schwarz, nicht Waldgruen: Ist das Video breiter oder schmaler als 16:9,
     legt der Player Balken an. Auf Schwarz verschmelzen sie mit dem Bild,
     auf Gruen wuerden sie als Rahmen auffallen. */
  background:#000;
  box-shadow:var(--shadow);
}

/* Fuer Videos im Kinoformat (etwa 2:1), damit gar keine Balken entstehen */
.video--wide{aspect-ratio:2/1}

/* Eigene Hoechstbreite direkt am Element – wirkt auch dann, wenn der
   umgebende Container einmal nicht greifen sollte. */
.video--mid{max-width:816px;margin-inline:auto}
.video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* --- 12. Rechtstexte (Impressum, Datenschutz, AGB) ------------------------ */
.legal{
  padding-block:clamp(40px,6vw,64px);
  background:var(--sand-light);
}
.legal .wrap-narrow{
  padding:clamp(28px,5vw,48px);
  border-radius:var(--radius-lg);
  background:var(--white);
  box-shadow:var(--shadow-soft);
}
.legal h1{margin-bottom:24px;font-size:clamp(1.7rem,4vw,2.2rem)}
.legal h2{margin:34px 0 12px;font-size:1.25rem}
.legal h3{margin:24px 0 8px;font-size:1.05rem}
.legal p,
.legal li{color:var(--ink)}
.legal ul,
.legal ol{padding-left:22px}
.legal li{margin-bottom:6px}

/* --- 13. Bewegung reduzieren --------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* --- 14. Countdown -------------------------------------------------------- */
.countdown{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(6px,1.6vw,14px);
}
.countdown[hidden]{display:none}

.countdown__unit{min-width:clamp(52px,9vw,72px);text-align:center}

.countdown__num{
  display:block;
  color:var(--forest);
  font-size:clamp(1.7rem,4.4vw,2.4rem);
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

.countdown__label{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:clamp(.62rem,1.5vw,.72rem);
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.countdown__sep{
  color:var(--line);
  font-size:clamp(1.4rem,3.6vw,2rem);
  font-weight:700;
  line-height:1.1;
}

/* Zustand nach Ablauf der Frist */
.countdown-done{
  margin:0;
  color:var(--terra);
  font-size:1.05rem;
  font-weight:700;
}
.countdown-done[hidden]{display:none}

/* Zeitraum-Zeile über dem Countdown */
.deadline-note{
  margin:0 0 16px;
  color:var(--forest);
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.015em;
}

/* Auf schmalen Geraeten eigene Groesse: Die Datumszeile ist deutlich laenger
   als eine normale Zwischenueberschrift und wuerde in H2-Groesse umbrechen.
   Der obere Wert entspricht dem Minimum von --fs-h2, damit der Uebergang
   zur Desktop-Groesse nahtlos bleibt. */
@media(max-width:560px){
  .deadline-note{font-size:clamp(1.05rem,4.6vw,1.45rem)}
}

/* --- 15. Button mit Zusatzzeile ------------------------------------------ */
.cta__main{display:block;font-size:var(--fs-h3);font-weight:700;line-height:1.35}
.cta__sub{
  display:block;
  margin-top:5px;
  font-size:.83rem;
  font-weight:500;
  line-height:1.35;
  opacity:.92;
}

/* --- 16. Bullet-Liste mit Fettung am Zeilenanfang ------------------------- */
.checks strong{color:var(--forest);font-weight:700}

/* --- 17. Abschliessender Merksatz ---------------------------------------- */
.closing{
  max-width:760px;
  margin:0 auto;
  font-size:var(--fs-body);
}
.closing .quote{color:var(--muted)}
.closing strong{color:var(--forest);font-weight:700}

/* --- 18. Abstands-Modifier fuer den Hero-Bereich -------------------------- */
/* Reihenfolge: Band -> Hero -> Split -> Signup. Jeweils oben/unten getrennt,
   damit benachbarte Sektionen naeher zusammenruecken. */
.section--band{padding-block:clamp(14px,2vw,20px)}
.section--hero{padding-block:clamp(30px,4vw,46px) clamp(14px,2vw,20px)}
.section--split{padding-block:clamp(8px,1.4vw,14px) clamp(10px,1.6vw,16px)}
.section--signup{padding-block:clamp(2px,.8vw,8px) clamp(26px,3.6vw,40px)}
.section--closing{padding-block:clamp(26px,3.6vw,40px)}

/* Button braucht weniger Eigenabstand, weil die Sektion ihn bereits setzt */
.section--signup .cta-center{padding-block:0 20px}

/* --- 19. Nutzen-Kacheln --------------------------------------------------- */
.tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3vw,34px);
}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tiles{grid-template-columns:1fr;gap:28px}}

.tile{text-align:center}

.tile__img{
  aspect-ratio:6/5;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--sand);
  box-shadow:var(--shadow-soft);
}
.tile__img img{width:100%;height:100%;object-fit:cover}

.tile h3{
  margin:16px 0 7px;
  font-size:var(--fs-h3);
  line-height:1.3;
}
.tile p{
  margin:0;
  color:var(--muted);
  font-size:var(--fs-body);
  line-height:1.55;
}

/* --- 20. "Bekannt aus" – durchlaufende Logoleiste ------------------------- */
.knownfrom{
  padding:24px 0;
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  background:var(--white);
}
.knownfrom__inner{
  display:flex;
  align-items:center;
  gap:26px;
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:22px;
}
.knownfrom__label{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:22px;
  color:var(--muted);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.knownfrom__label::after{
  content:"";
  width:1px;
  height:34px;
  background:var(--sage);
  opacity:.55;
}

.marquee{
  position:relative;
  flex:1 1 auto;
  min-height:44px;
  overflow:hidden;
  /* weiche Kanten links und rechts, damit die Logos nicht hart abreissen */
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.marquee__track{
  display:flex;
  align-items:center;
  gap:56px;
  width:max-content;
  animation:kf-scroll 42s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee img{
  flex:0 0 auto;
  height:38px;
  width:auto;
  object-fit:contain;
}
@keyframes kf-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(max-width:620px){
  .knownfrom__inner{flex-direction:column;gap:14px;align-items:stretch}
  .knownfrom__label{justify-content:center}
  .knownfrom__label::after{display:none}
  .marquee img{height:30px}
  .marquee__track{gap:40px}
}
@media(prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
}

/* --- 21. Abstaende Block 2 ------------------------------------------------ */
.section--benefits{padding-block:clamp(38px,5vw,58px) clamp(18px,2.4vw,26px)}

/* Kopf einer Sektion: Ueberschrift, optional mit Unterzeile.
   Der Abstand nach unten sitzt am Wrapper, damit er unabhaengig davon
   gleich bleibt, ob eine Unterzeile vorhanden ist oder nicht. */
.section-head{margin-bottom:clamp(24px,3.2vw,36px);text-align:center}

/* Ueberschriften der Kacheln auf zwei Zeilen reservieren, damit die
   Beschreibungen in einer Reihe auf gleicher Hoehe beginnen.
   Nur im mehrspaltigen Layout sinnvoll. */
@media(min-width:561px){
  .tile h3{min-height:2.6em}
}

/* --- 22. Kacheln mit zwei Absaetzen (Block 3) ------------------------------ */
/* Eigene Variante, weil hier drei statt sechs Kacheln stehen und jede
   zwei Textabsaetze traegt. Breitere Spalten, mehr Luft zwischen den Absaetzen. */
.tiles--wide{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,40px)}
@media(max-width:820px){.tiles--wide{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

.tile p + p{margin-top:.85em}

/* Untertitel unter einer Abschnittsueberschrift */
.section-sub{
  max-width:var(--maxw-text);
  margin:12px auto 0;
  color:var(--muted);
  font-size:var(--fs-h3);
}

/* --- 23. Team ------------------------------------------------------------- */
.teamgrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.2vw,24px);
}
@media(max-width:860px){.teamgrid{grid-template-columns:repeat(2,1fr)}}
/* Erst auf sehr schmalen Geraeten einspaltig – gaengige Handys (360–430px)
   zeigen weiterhin zwei Portraits nebeneinander. */
@media(max-width:339px){.teamgrid{grid-template-columns:1fr;max-width:280px;margin-inline:auto}}

.member{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--sand);
  box-shadow:var(--shadow);
}
.member img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:520/841;
  object-fit:cover;
}

/* Beschriftung liegt auf dem Bild. Der Verlauf startet transparent und
   laeuft nach unten in Waldgruen aus, damit die Schrift auf jedem Foto
   lesbar bleibt, egal wie hell der Hintergrund ist. */
.member__cap{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  padding:64px 14px 14px;
  color:var(--white);
  background:linear-gradient(
    to bottom,
    rgba(30,64,52,0) 0%,
    rgba(30,64,52,.55) 38%,
    rgba(30,64,52,.90) 68%,
    rgba(30,64,52,.96) 100%);
}
.member__name{
  font-size:.97rem;
  font-weight:700;
  line-height:1.25;
}
.member__role{
  margin-top:3px;
  font-size:.82rem;
  line-height:1.35;
  opacity:.92;
}
@media(max-width:420px){
  .member__name{font-size:.9rem}
  .member__role{font-size:.76rem}
}

/* --- 24. Bestaetigungsseite ----------------------------------------------- */
/* Zweite Zeile der Begruessung – gleiche Groesse wie die Ueberschrift,
   damit beide Zeilen als ein Block gelesen werden. */
.confirm-note{
  margin:8px 0 0;
  color:var(--forest);
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.015em;
}
@media(max-width:560px){
  .confirm-note{font-size:clamp(1.05rem,4.6vw,1.45rem)}
}

/* Hervorhebung im Fliesstext: zweites Logo-Gruen plus Unterstreichung */
.mark-underline{
  color:var(--sage);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}

/* Zwei Videos nebeneinander */
.video-cols{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(26px,4vw,44px);
}
@media(max-width:820px){
  .video-cols{grid-template-columns:1fr;max-width:620px;margin-inline:auto}
}

.video-title{
  margin:0 0 14px;
  font-size:var(--fs-h3);
  line-height:1.3;
  text-align:center;
}
.video-title span{display:block;font-weight:400;color:var(--muted)}

/* --- 25. Einwilligungsbanner --------------------------------------------- */
.consent{
  position:fixed;
  inset:auto 0 0 0;
  z-index:9999;
  display:none;
  padding:16px;
  background:rgba(28,28,26,.42);
}
.consent.is-open{display:block}

.consent__box{
  max-width:760px;
  margin:0 auto;
  max-height:88vh;
  overflow-y:auto;
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--sand-light);
  box-shadow:0 12px 40px rgba(28,28,26,.28);
}

.consent__title{
  margin:0 0 8px;
  font-size:clamp(1.1rem,2.4vw,1.3rem);
  color:var(--forest);
}
.consent__text{
  margin:0 0 18px;
  font-size:.92rem;
  line-height:1.55;
  color:var(--ink);
}
.consent__text a{color:var(--sage);font-weight:600}

.consent__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.consent__actions--panel{margin-top:18px}

/* Zustimmen und Ablehnen bewusst in gleicher Groesse und Gewichtung */
.consent__btn{
  flex:1 1 200px;
  padding:13px 22px;
  border:2px solid transparent;
  border-radius:var(--radius);
  font-family:inherit;
  font-size:1rem;
  font-weight:700;
  line-height:1.3;
  cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.consent__btn--accept{background:var(--terra);color:var(--white)}
.consent__btn--accept:hover{background:var(--terra-deep)}
.consent__btn--reject{
  background:transparent;
  border-color:var(--forest);
  color:var(--forest);
}
.consent__btn--reject:hover{background:var(--forest);color:var(--white)}

.consent__link{
  flex:0 0 auto;
  padding:13px 8px;
  border:0;
  background:none;
  color:var(--muted);
  font-family:inherit;
  font-size:.92rem;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.consent__link:hover{color:var(--forest)}

.consent__panel{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.consent__cat + .consent__cat{margin-top:16px}
.consent__row{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.consent__row input{width:18px;height:18px;accent-color:var(--sage);cursor:pointer}
.consent__row input:disabled{cursor:default;opacity:.65}
.consent__name{font-weight:700;color:var(--forest)}
.consent__name em{font-style:normal;font-weight:400;color:var(--muted);font-size:.88em}
.consent__desc{
  margin:5px 0 0 28px;
  font-size:.85rem;
  line-height:1.5;
  color:var(--muted);
}

@media(max-width:560px){
  .consent{padding:10px}
  .consent__btn{flex:1 1 100%}
  .consent__link{width:100%;text-align:center}
}


/* --- 27. Naechste Schritte (Bestaetigungsseite) --------------------------- */
.nextsteps{
  margin-top:clamp(20px,2.6vw,28px);
  padding:clamp(22px,3vw,34px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--sand-light);
}

.nextsteps__title{
  margin:0 0 clamp(16px,2vw,22px);
  font-size:var(--fs-h3);
  text-align:center;
}

/* Nummerierte Schritte. Die Ziffern kommen aus einem CSS-Zaehler, damit
   beim Umsortieren nichts von Hand angepasst werden muss. */
.steps{
  counter-reset:schritt;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,1.8vw,18px) clamp(22px,3vw,38px);
  margin:0;
  padding:0;
  list-style:none;
}
@media(max-width:820px){
  .steps{grid-template-columns:1fr}
}

.steps li{
  position:relative;
  counter-increment:schritt;
  padding-left:42px;
  line-height:1.5;
}
.steps li::before{
  content:counter(schritt);
  position:absolute;
  left:0;
  top:.1em;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--sage);
  color:var(--white);
  font-size:.9rem;
  font-weight:700;
  line-height:1;
}
.steps strong{color:var(--forest);font-weight:700}

.nextsteps__help{
  margin:clamp(18px,2.2vw,24px) 0 0;
  padding-top:clamp(14px,1.8vw,18px);
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.95rem;
  text-align:center;
}
.nextsteps__help a{font-weight:600}