/* ROI Growth — Hausthema "Vorsorge-Blau" (Variante 15, gewählt 2026-08-05).
   Schrift und Farbe stammen aus der Landeseiten-Case-Study koerlin-kindervorsorge.
   Kontrastregel: Fläche und Schrift sind getrennte, gemessene Werte.
   Gemessen gegen --papier #F5F7FC:
     --tinte  #14213D = 13.8:1   --text #414B60 = 7.3:1   --leise #5B667C = 5.1:1
     --akzent-text #254987 = 8.2:1   --signal-text #A33C02 = 4.9:1
   Auf --akzent #254987: Weiß = 8.6:1. Auf --signal #F86102: --auf-signal #1A0A00 = 8.4:1. */

/* ============ TOKENS ============ */
:root{
  /* Farbwelt */
  --tinte:#14213D; --text:#414B60; --leise:#5B667C; --linie:#DCE3F0;
  --papier:#F5F7FC; --papier-2:#FFFFFF;
  --akzent:#254987; --akzent-tief:#1A3564; --akzent-hell:#E4EAF6;
  --akzent-text:#254987; --auf-akzent:#FFFFFF;
  --signal:#F86102; --signal-tief:#C74B00; --signal-text:#A33C02; --auf-signal:#1A0A00;
  --signal-hell:#FBF0DC; --auf-akzent-2:#D8E3F5; --auf-akzent-3:#E9EFF9;
  --akzent-mark:#FFC199; --fuss-text:#AEB7C6; --fuss-link:#E3E8F2; --fehler:#B03A2B;

  /* Typo: Serifen-Display, Mukta als Body */
  --disp:'DM Serif Text',Georgia,serif;
  --sans:'Mukta',system-ui,sans-serif;
  --disp-weight:400;
  --fs-1:clamp(2.2rem,1.5rem + 3.2vw,3.6rem);
  --fs-2:clamp(1.7rem,1.25rem + 2vw,2.6rem);
  --fs-3:clamp(1.2rem,1rem + .65vw,1.45rem);
  --fs-b:1.0625rem; --fs-s:.9375rem;

  /* Raum */
  --s-1:.5rem; --s-2:.75rem; --s-3:1rem; --s-4:1.5rem;
  --s-5:2rem; --s-6:3rem; --s-7:4rem; --s-8:6rem;
  --sec-pad:clamp(3.5rem,8vw,6rem);
  --wrap:1180px;

  --rund:10px; --rund-klein:6px;
  --schatten:0 1px 2px rgba(20,33,61,.06);
  --schatten-hoch:0 16px 38px -20px rgba(20,33,61,.26);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --t-fast:.14s; --t-med:.24s;
}

/* ============ BASIS ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{font-family:var(--sans);font-size:var(--fs-b);line-height:1.65;
  color:var(--text);background:var(--papier);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--akzent-text)}
::selection{background:var(--akzent-hell);color:var(--tinte)}
h1,h2{font-family:var(--disp);color:var(--tinte);font-weight:var(--disp-weight);
  line-height:1.14;letter-spacing:-.01em;text-wrap:balance}
h3{font-family:var(--sans);color:var(--tinte);font-weight:700;line-height:1.25;letter-spacing:-.005em}
h1{font-size:var(--fs-1)}h2{font-size:var(--fs-2)}h3{font-size:var(--fs-3)}
p{max-width:65ch}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px;border-radius:4px}
h1 u,h2 u{text-decoration:none;font-style:italic;color:var(--akzent-text);
  background:linear-gradient(0deg,#FBD9C2,#FBD9C2) no-repeat 0 80%/100% .16em}
.on-akzent h1 u,.on-akzent h2 u{color:#fff;
  background-image:linear-gradient(0deg,var(--signal),var(--signal))}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.25rem)}
.sec{padding-block:var(--sec-pad)}
.sec.flaeche{background:var(--papier-2)}
.sec.akzent-flaeche{background:var(--akzent-hell)}
.eyebrow{font-size:.875rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--akzent-text);margin-bottom:var(--s-3);display:block}
.sec-head{margin-bottom:clamp(1.75rem,4vw,3rem);max-width:46rem}
.sec-head p{margin-top:var(--s-3);color:var(--leise)}
.lede{font-size:clamp(1.1rem,1.4vw,1.2rem)}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-weight:600;font-size:1rem;
  padding:.95rem 1.6rem;border-radius:var(--rund-klein);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;min-height:48px;
  transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--akzent);color:var(--auf-akzent)}
.btn-primary:hover{background:var(--akzent-tief)}
/* Fläche bewusst --signal-tief statt --signal: #F86102 mit Weiß liegt bei 3.13:1,
   #C74B00 mit Weiß bei 4.74:1, Hover #A33C02 bei 6.55:1. */
.btn-signal{background:var(--signal-tief);color:#fff}
.btn-signal:hover{background:var(--signal-text);color:#fff}
.btn-ghost{border-color:var(--linie);color:var(--tinte);background:var(--papier)}
.btn-ghost:hover{border-color:var(--akzent);color:var(--akzent-text)}
.btn-micro{display:block;margin-top:var(--s-2);font-size:var(--fs-s);color:var(--leise)}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);
  border-bottom:1px solid transparent;transition:border-color var(--t-med),box-shadow var(--t-med)}
.nav.scrolled{border-color:var(--linie);box-shadow:var(--schatten);backdrop-filter:blur(8px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-block:.9rem}
.nav-logo img{height:32px;width:auto}
.nav-links{display:none;gap:var(--s-5);list-style:none;align-items:center}
.nav-links a{color:var(--tinte);text-decoration:none;font-weight:600;font-size:var(--fs-s);
  background:linear-gradient(0deg,var(--signal),var(--signal)) no-repeat 0 100%/0% 2px;
  transition:background-size var(--t-med) var(--ease-out);padding-bottom:2px}
.nav-links a:hover{background-size:100% 2px}
.nav-tel{display:none;font-weight:600;color:var(--tinte);text-decoration:none;font-size:var(--fs-s)}
.nav-cta{display:none}
.nav-burger{display:grid;place-items:center;width:44px;height:44px;background:none;border:0;cursor:pointer}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{content:"";display:block;
  width:22px;height:2px;background:var(--tinte);position:relative;
  transition:transform var(--t-med) var(--ease-out)}
.nav-burger span::before{position:absolute;top:-7px}
.nav-burger span::after{position:absolute;top:7px}
body.nav-open .nav-burger span{background:transparent}
body.nav-open .nav-burger span::before{transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-burger span::after{transform:translateY(-7px) rotate(-45deg)}
body.nav-open{overflow:hidden}
.nav-mobile{position:fixed;inset:0;z-index:40;background:var(--papier);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s-4);
  padding:var(--s-6);opacity:0;pointer-events:none;transition:opacity var(--t-med) var(--ease-out)}
body.nav-open .nav-mobile{opacity:1;pointer-events:auto}
.nav-mobile a{font-family:var(--sans);font-weight:700;font-size:1.6rem;color:var(--tinte);text-decoration:none;font-weight:600}
/* Der Haupt-CTA im offenen Handymenue ist auch ein a und erbte sonst 1,6rem plus
   Tinte auf Akzentblau: 1,81:1 und zweizeilig aus dem Button heraus. */
.nav-mobile a.btn-primary{font-size:1rem;color:#fff}
.nav-mobile a.btn-ghost{font-size:1rem}
.nav-mobile .btn{margin-top:var(--s-4)}


/* ============ MEGA-MENÜ ============
   Acht Zielseiten in zwei Gruppen. Öffnet auf Hover UND auf Fokus, damit es per
   Tastatur bedienbar bleibt, und auf Klick, damit es am Touchgerät funktioniert:
   dort gibt es kein Hover, ein reines Hover-Menü wäre für Handynutzer tot.
   Unter 1024px übernimmt das Vollbild-Overlay, dort steht alles offen untereinander. */
.nav-menu{position:relative}
.nav-menu > button{
  display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:var(--fs-s);color:var(--tinte);
  padding:.35rem 0;min-height:44px;
  background-image:linear-gradient(0deg,var(--signal),var(--signal));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;
  transition:background-size var(--t-med) var(--ease-out)}
.nav-menu > button::after{
  content:"";width:.42rem;height:.42rem;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t-fast) var(--ease-out)}
.nav-menu:hover > button,.nav-menu:focus-within > button,
.nav-menu[data-offen="1"] > button{background-size:100% 2px}
.nav-menu[data-offen="1"] > button::after{transform:rotate(-135deg) translateY(-2px)}

.nav-panel{
  position:absolute;top:calc(100% + .65rem);left:50%;translate:-50% 0;z-index:60;
  min-width:min(38rem,84vw);background:var(--papier-2);border:1px solid var(--linie);
  border-radius:var(--rund);box-shadow:var(--schatten-hoch);padding:var(--s-4);
  display:grid;gap:.15rem;grid-template-columns:1fr 1fr;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out),visibility var(--t-med)}
.nav-menu:hover .nav-panel,.nav-menu:focus-within .nav-panel,
.nav-menu[data-offen="1"] .nav-panel{opacity:1;visibility:visible;transform:translateY(0)}
/* Unsichtbare Brücke, damit der Zeiger den Spalt zum Panel überqueren kann. */
.nav-menu::after{content:"";position:absolute;left:0;right:0;top:100%;height:.7rem}

.nav-panel a{
  display:block;padding:.7rem .8rem;border-radius:var(--rund-klein);text-decoration:none;
  color:var(--tinte);transition:background var(--t-fast) var(--ease-out)}
.nav-panel a:hover,.nav-panel a:focus-visible{background:var(--akzent-hell)}
.nav-panel strong{display:block;font-weight:700;font-size:.95rem;line-height:1.3}
.nav-panel span{display:block;font-size:.8125rem;color:var(--leise);margin-top:.15rem;line-height:1.4}
.nav-panel .panel-kopf{
  grid-column:1/-1;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--leise);padding:.2rem .8rem .55rem}

/* Mobile: Gruppen stehen offen im Overlay, keine Klapperei auf kleinem Schirm. */
.nav-mobile .m-gruppe{font-size:.75rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--leise);margin-top:var(--s-3)}
.nav-mobile .m-unter{font-size:1.15rem;font-weight:600;padding-left:.9rem;
  border-left:2px solid var(--linie)}
@media (max-width:1023px){.nav-menu{display:none}}
@media (prefers-reduced-motion:reduce){.nav-panel{transition:none}}

/* ============ HERO ============ */
.hero{padding-block:clamp(2.5rem,6vw,5rem)}
.hero-grid{display:grid;gap:var(--s-6)}
.hero h1{margin-block:var(--s-3) var(--s-4)}
.hero .lead{font-size:clamp(1.1rem,1.5vw,1.25rem);max-width:36rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5);align-items:center}
.hero-trust{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-5);
  font-size:var(--fs-s);font-weight:600;color:var(--tinte)}
.hero-trust span{display:flex;align-items:center;gap:.45rem}
.hero-trust svg{color:var(--signal-text);flex-shrink:0}

/* Referenz-Showcase (Bestand, Davids Signature) */
.showcase{position:relative;height:560px;display:none;grid-template-columns:1fr 1fr;gap:16px;
  transform:rotate(-3deg) scale(1.04);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.show-col{display:flex;flex-direction:column;gap:16px;animation:rollUp 30s linear infinite}
.show-col--down{animation-direction:reverse;align-self:end}
.showcase:hover .show-col{animation-play-state:paused}
.show-shot{flex:none;border-radius:14px;overflow:hidden;border:1px solid var(--linie);
  box-shadow:0 24px 50px -28px rgba(20,33,61,.45)}
.show-shot img{width:100%;aspect-ratio:1280/800;object-fit:cover;object-position:top}
@keyframes rollUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media (min-width:768px){.showcase{display:grid}}
/* Die versetzten Spalten ragen rechnerisch ueber den Viewport. Sichtbar scrollt
   nichts, scrollWidth meldet aber 10 bis 16 px zu viel. clip statt hidden, damit
   kein Scrollcontainer entsteht, der sticky im Hero brechen wuerde. */
.showcase{overflow:clip}


/* ============ BAND (Kennzahlen / Logos) ============ */
.band{border-block:1px solid var(--linie);background:var(--papier-2)}
.band ul{list-style:none;display:grid;gap:var(--s-3);padding-block:var(--s-4);
  font-weight:600;color:var(--tinte);font-size:var(--fs-s)}
.band li{display:flex;gap:.6rem;align-items:baseline}
.band li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--signal);flex-shrink:0;transform:translateY(-.1em)}

/* ============ PROBLEM ============ */
.schmerz{display:grid;gap:var(--s-4)}
.schmerz-karte{background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund);
  padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.schmerz-karte svg{color:var(--signal-text)}
.schmerz-karte p{font-family:var(--sans);font-weight:700;color:var(--tinte);font-size:1.1rem;line-height:1.3}
.schmerz-karte span{font-size:var(--fs-s);color:var(--leise)}
.turn{margin-top:var(--s-6);font-size:1.125rem;max-width:46rem}

/* ============ LEISTUNGS-KARTEN ============ */
.karten{display:grid;gap:var(--s-4)}
.karte{background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund);
  padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;
  transition:box-shadow var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out)}
.karte .icon{width:48px;height:48px;border-radius:12px;background:var(--akzent-hell);
  display:grid;place-items:center;color:var(--akzent-text);margin-bottom:var(--s-4)}
.karte h3{margin-bottom:var(--s-2)}
.karte p{color:var(--text);flex-grow:1;font-size:var(--fs-s)}
.karte ul{list-style:none;margin-block:var(--s-3);display:grid;gap:.5rem;font-size:var(--fs-s)}
.karte ul li{display:flex;gap:.55rem;align-items:baseline}
.karte ul li::before{content:"✓";color:var(--akzent-text);font-weight:700}
.karte .link{margin-top:var(--s-3);font-weight:600;text-decoration:none;color:var(--akzent-text);
  display:inline-flex;gap:.4rem;align-items:center}
.karte .link::after{content:"→";transition:transform var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .karte:hover{box-shadow:var(--schatten-hoch);transform:translateY(-3px)}
  .karte .link:hover::after{transform:translateX(4px)}
}

/* ============ CASES ============ */
.case{display:grid;gap:var(--s-5);padding-block:clamp(2rem,5vw,3.25rem);border-top:1px solid var(--linie)}
.case:last-of-type{border-bottom:1px solid var(--linie)}
.case-shot img{border-radius:var(--rund);border:1px solid var(--linie);
  box-shadow:var(--schatten-hoch);aspect-ratio:16/10;object-fit:cover;object-position:top}
.case-meta .branche{font-size:var(--fs-s);color:var(--leise);font-weight:600}
.case-meta h3{font-size:clamp(1.3rem,1.8vw,1.6rem);margin-block:.3rem var(--s-4)}
.case-fact{margin-bottom:var(--s-3);font-size:var(--fs-s)}
.case-fact dt{font-weight:600;color:var(--tinte);display:inline}
.case-fact dt::after{content:": "}
.case-fact dd{display:inline}
.case-num{font-family:var(--sans);font-weight:700;color:var(--tinte);
  font-size:clamp(2.6rem,5.5vw,4.25rem);line-height:1;letter-spacing:-.02em;
  display:inline-block;margin-top:var(--s-4);
  background:linear-gradient(0deg,var(--signal),var(--signal)) no-repeat 0 94%/100% .11em;
  font-variant-numeric:tabular-nums}
.case-num-label{display:block;font-family:var(--sans);font-weight:600;color:var(--leise);
  font-size:var(--fs-s);margin-top:.5rem}
.case-second{margin-top:var(--s-3);font-size:var(--fs-s);font-weight:600;color:var(--text)}

/* ============ ZAHLEN-BAND ============ */
.zahlen{background:var(--akzent);color:var(--auf-akzent)}
.zahlen-grid{display:grid;gap:var(--s-5);padding-block:clamp(2.5rem,6vw,4rem)}
.zahl{text-align:left}
.zahl strong{font-family:var(--sans);font-weight:700;font-size:clamp(2.2rem,4.5vw,3.4rem);
  line-height:1;display:block;color:#fff;font-variant-numeric:tabular-nums}
/* Nur das Label-Span darunter, NICHT der Count-up-Span im <strong>. Ohne den
   Kindselektor schrumpft die Zahl selbst auf Labelgröße und das Plus steht allein. */
.zahl > span{font-size:var(--fs-s);color:var(--auf-akzent-2);font-weight:600;display:block;margin-top:.5rem}
.zahl strong span{font:inherit;color:inherit;display:inline;margin:0}

/* ============ ABLAUF / SCHRITTE ============ */
.steps{list-style:none;display:grid;gap:var(--s-4);counter-reset:step}
.steps li{counter-increment:step;background:var(--papier);border-radius:var(--rund);
  border:1px solid var(--linie);padding:clamp(1.4rem,2.5vw,1.9rem);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:start}
.steps li::before{content:counter(step);font-family:var(--sans);font-weight:700;font-size:1.15rem;
  width:2.6rem;height:2.6rem;border-radius:50%;background:var(--akzent-hell);color:var(--akzent-text);
  display:grid;place-items:center}
.steps h3{margin-bottom:.35rem;font-size:1.15rem}
.steps p{font-size:var(--fs-s)}
.steps .dauer{display:inline-block;margin-top:.5rem;font-size:.8125rem;font-weight:600;
  color:var(--signal-text);background:var(--signal-hell);border-radius:99px;padding:.2rem .7rem}

/* ============ ERSTGESPRÄCH ============ */
.gespraech{display:grid;gap:var(--s-5)}
.gespraech-liste{list-style:none;display:grid;gap:var(--s-3)}
/* Kein flex auf dem li: sonst wird jeder Inline-Link darin zu einem eigenen
   Flex-Item und der Satz bricht in Spalten statt zu fliessen. Marker absolut. */
.gespraech-liste li{position:relative;padding-left:1.7rem;font-size:var(--fs-b)}
.gespraech-liste li::before{content:"✓";position:absolute;left:0;top:0;
  color:var(--akzent-text);font-weight:700}
.gespraech-nicht li::before{content:"✕";color:var(--signal-text)}

/* ============ DAVID ============ */
.david-grid{display:grid;gap:var(--s-6);align-items:center}
.david-grid img{border-radius:var(--rund);border:1px solid var(--linie);
  box-shadow:var(--schatten-hoch);max-width:420px;width:100%}
.david-copy h2{margin-bottom:var(--s-4)}
.david-copy p{margin-bottom:var(--s-4)}
.david-copy p:last-child{margin-bottom:0}
.gespraech h3{margin-bottom:var(--s-3)}

/* ============ STIMMEN ============ */
.reviews{display:grid;gap:var(--s-4)}
.review{background:var(--papier);border-radius:var(--rund);padding:clamp(1.4rem,2.5vw,1.9rem);
  border:1px solid var(--linie);display:flex;flex-direction:column;gap:var(--s-3)}
.review .stars{color:var(--signal-text);letter-spacing:.15em;font-size:.9rem}
.review blockquote{font-size:1rem;color:var(--tinte)}
.review figcaption{margin-top:auto;font-size:var(--fs-s);color:var(--leise);font-weight:600}

/* ============ REGION ============ */
.region-grid{display:grid;gap:var(--s-5);align-items:center}
.region-grid img{border-radius:var(--rund);border:1px solid var(--linie)}
.region-liste{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--s-4)}
.region-liste li{font-size:var(--fs-s);font-weight:600;color:var(--akzent-text);
  background:var(--akzent-hell);border-radius:99px;padding:.35rem .9rem}

/* ============ FAQ ============ */
.faq{max-width:48rem}
.faq details{border-bottom:1px solid var(--linie);padding-block:var(--s-2)}
.faq summary{font-family:var(--sans);font-weight:700;font-size:1.1rem;color:var(--tinte);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s-3);
  padding-block:.75rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.35rem;color:var(--akzent-text);
  transition:transform var(--t-med) var(--ease-out);flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-block:.3rem 1rem}

/* ============ CTA (Akzent-Fläche) ============ */
.on-akzent{background:var(--akzent);color:var(--auf-akzent-3)}
/* Die Formularkarte liegt als helle Flaeche IN der Akzentsektion. Weiss darauf
   ergibt 1,06:1, die Ueberschrift waere praktisch unsichtbar. Deshalb ausnehmen,
   statt es auf jeder einzelnen Seite zurueckzudrehen. */
.on-akzent h2,.on-akzent h3{color:#fff}
.on-akzent .fnl h2,.on-akzent .fnl h3{color:var(--tinte)}
.on-akzent .fnl p{color:var(--text)}
.on-akzent .fnl .fnl-intro{color:var(--leise)}
.on-akzent p{color:var(--auf-akzent-2)}
/* h2 ausserhalb von .sec-head hat sonst keinen Abstand, der Folgeabsatz startet
   auf der Grundlinie der Headline. Betrifft jede CTA- und Standortsektion. */
.on-akzent h2 + p,.cta-grid h2 + p,.region-grid h2 + p{margin-top:var(--s-3)}
.on-akzent .eyebrow{color:var(--akzent-mark)}
.cta-grid{display:grid;gap:var(--s-6)}
.cta-direct{font-size:var(--fs-b)}
.cta-direct a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cta-punkte{list-style:none;display:grid;gap:var(--s-2);margin-top:var(--s-4);font-size:var(--fs-s)}
.cta-punkte li{display:flex;gap:.6rem;align-items:baseline;color:var(--auf-akzent-2)}
.cta-punkte li::before{content:"✓";color:var(--akzent-mark);font-weight:700}

/* Funnel */
/* Anfrageformular: ein Schritt, vier Felder. Der frühere Mehrschritt-Funnel ist raus,
   weil jeder Klick eine eigene Abbruchstelle war und die Felder ohnehin in einen Blick passen. */
/* position:relative, damit der Honeypot mit left:-9999px im Formular bleibt und
   nicht gegen den Dokumentrand rechnet. */
.fnl{position:relative;background:var(--papier);color:var(--text);border-radius:var(--rund);
  padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--schatten-hoch);max-width:34rem}
.fnl h3{font-size:1.2rem;margin-bottom:var(--s-2)}
.fnl .fnl-intro{font-size:var(--fs-s);color:var(--leise);margin-bottom:var(--s-4)}
.fnl-grid{display:grid;gap:var(--s-3)}
.fnl-feld label{display:block;font-weight:600;font-size:var(--fs-s);color:var(--tinte);margin-bottom:.35rem}
.fnl-feld label .opt{font-weight:400;color:var(--leise)}
.fnl input,.fnl textarea{width:100%;font-size:1rem;font-family:var(--sans);padding:.85rem 1rem;
  border:1.5px solid var(--linie);border-radius:var(--rund-klein);background:#fff;color:var(--tinte)}
.fnl textarea{min-height:6rem;resize:vertical}
.fnl input:focus-visible,.fnl textarea:focus-visible{outline:2px solid var(--akzent);outline-offset:1px;border-color:var(--akzent)}
.fnl input[aria-invalid="true"]{border-color:var(--fehler)}
.fnl .err{color:var(--fehler);font-size:var(--fs-s);margin-top:.3rem;display:none}
.fnl .err.an{display:block}
.fnl .hp{position:absolute;left:-9999px}
.fnl .btn{width:100%;margin-top:var(--s-2)}
.fnl .fnl-fuss{font-size:var(--fs-s);color:var(--leise);margin-top:var(--s-3)}
.fnl-danke{display:none}
.fnl.fertig .fnl-grid,.fnl.fertig .fnl-intro,.fnl.fertig .btn,.fnl.fertig .fnl-fuss{display:none}
.fnl.fertig .fnl-danke{display:block}
.fnl-danke h3{color:var(--akzent-text)}
@media (min-width:560px){.fnl-grid{grid-template-columns:1fr 1fr}.fnl-feld.voll{grid-column:1/-1}}

/* ============ RÜCKRUF-LEISTE ============ */
.rueckruf{background:var(--papier-2);border-top:1px solid var(--linie)}
.rueckruf-inner{display:grid;gap:var(--s-4);padding-block:var(--s-6);align-items:center}
.rueckruf strong{font-family:var(--sans);font-weight:700;font-size:1.25rem;color:var(--tinte)}
.rueckruf a.tel{font-family:var(--sans);font-weight:700;font-size:clamp(1.4rem,2.5vw,1.9rem);
  color:var(--akzent-text);text-decoration:none}

/* ============ FOOTER ============ */
.footer{background:var(--tinte);color:var(--fuss-text);padding-block:var(--s-7) var(--s-5);font-size:var(--fs-s)}
.footer a{color:var(--fuss-link);text-decoration:none;padding-block:.35rem;display:inline-block}
.footer a:hover{color:var(--signal)}
.footer-grid{display:grid;gap:var(--s-5);margin-bottom:var(--s-6)}
.footer-brand img{height:30px;width:auto;margin-bottom:var(--s-3)}
.footer nav{display:flex;flex-direction:column;gap:.25rem}
.footer .legal{border-top:1px solid rgba(255,255,255,.12);padding-top:var(--s-4);
  display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between}

/* ============ MOBILE STICKY ============ */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:45;display:flex;gap:1px;
  background:var(--linie);border-top:1px solid var(--linie);
  transform:translateY(100%);transition:transform var(--t-med) var(--ease-out)}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta a{flex:1;display:grid;place-items:center;padding:.9rem;font-weight:600;
  font-size:var(--fs-s);text-decoration:none;background:var(--papier);color:var(--tinte);min-height:48px}
.sticky-cta a.main{background:var(--akzent);color:#fff}
@media (max-width:1023px){body{padding-bottom:50px}}

/* ============ REVEALS ============ */
.rv{opacity:0;transform:translateY(16px)}
.rv.visible,html.no-js .rv{opacity:1;transform:none;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}



/* --- Ergebnis-Achse: Linie links, Ziffernpunkte an den Cases (ab 1024px, per JS gesetzt) --- */
.m-achse{position:relative}
.m-schiene{position:absolute;left:-1.75rem;top:0;bottom:0;width:2px;background:var(--linie);
  border-radius:2px;pointer-events:none}
.m-schiene-fuellung{position:absolute;inset:0;background:var(--akzent);transform-origin:top center;
  transform:scaleY(0);border-radius:2px;display:block}
.m-achse .case{position:relative}
.m-punkt{position:absolute;left:-2.6rem;top:clamp(2rem,5vw,3.25rem);
  width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.02em;
  background:var(--papier);color:var(--leise);border:2px solid var(--linie);
  font-variant-numeric:tabular-nums;transition:background var(--t-med),color var(--t-med),border-color var(--t-med)}
.m-punkt.an{background:var(--akzent);color:#fff;border-color:var(--akzent)}
@media (max-width:1023px){.m-schiene,.m-punkt{display:none}}

/* --- Ablauf-Weg: Linie waechst mit dem Scrollen, Schritte werden aktiv --- */
.m-weg{position:relative}
.m-weg-linie{position:absolute;pointer-events:none;background:var(--linie);border-radius:2px}
.m-weg-linie i{position:absolute;inset:0;background:var(--akzent);border-radius:2px;display:block;
  transform-origin:top left}
/* Richtung kommt aus der gemessenen Anordnung (siehe motion.js), nicht aus einer
   Breakpoint-Annahme. Sonst liegt die Linie quer ueber dem Text, wenn eine Seite
   den Ablauf auch am Desktop untereinander setzt. */
/* Die Linie liegt IM Aussenraum der Liste, nie im Textfluss. Ein fester Innen-
   Offset (frueher 2.6rem) trifft je nach Seitenvariante die Ziffern oder den
   Titel, weil manche Seiten den Schritt-Marker als grosse Zahl setzen. */
.m-weg--hoch .m-weg-linie{left:calc(-1 * clamp(.7rem,2.5vw,1.4rem));top:.4rem;bottom:.4rem;width:2px;right:auto;height:auto}
.m-weg--hoch .m-weg-linie i{transform:scaleY(0);transform-origin:top center}
.m-weg--quer .m-weg-linie{left:0;right:0;top:-1.4rem;bottom:auto;width:auto;height:2px}
.m-weg--quer .m-weg-linie i{transform:scaleX(0);transform-origin:left center}
.m-weg li{transition:opacity var(--t-med) var(--ease-out)}
.m-weg li:not(.m-an){opacity:.62}
.m-weg li.m-an{opacity:1}
.m-weg li::before{transition:background var(--t-med),color var(--t-med)}
/* Ueber Variablen, nicht hart: Varianten, die die Kreisflaeche entfernen, setzen
   --marker-an-text auf eine dunkle Farbe und bekommen keine weisse Ziffer auf
   hellem Grund. Voreinstellung bleibt die gefuellte Kreisflaeche. */
.m-weg li.m-an::before{background:var(--marker-an-flaeche,var(--akzent));
  color:var(--marker-an-text,#fff)}
@media (prefers-reduced-motion:reduce){
  .m-schiene-fuellung{transform:scaleY(1)!important}
  .m-weg-linie i{transform:none!important}
  .m-weg li{opacity:1!important}
}

/* ============ MOTION ============
   Maske je Headline-Zeile: die Zeile fährt von unten hinter der Kante hervor,
   statt nur einzublenden. Nur transform und opacity, nichts Layout-Auslösendes. */
/* Beschnitt in BEIDE Richtungen ausgleichen: senkrecht die Unterlaengen,
   waagrecht die Ueberhaenge der Kursiven, sonst verliert das f seinen Bogen. */
.m-maske{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em;
  padding-right:.16em;margin-right:-.16em}
.m-line{display:block;will-change:transform}
.hero h1 .m-line{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .m-maske{overflow:visible}
  .m-line{transform:none!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ============ BREAKPOINTS ============ */
@media (min-width:768px){
  .band ul{grid-template-columns:repeat(4,1fr)}
  .schmerz{grid-template-columns:repeat(3,1fr)}
  .karten{grid-template-columns:repeat(2,1fr)}
}
/* Drei Spalten erst, wenn eine Spalte breit genug fuer eine ganze Zeile ist.
   Bei 768px waeren es ~200px und die Zeilen brechen nach zwei Woertern. */
@media (min-width:900px){
  .karten{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:768px){
  .reviews{grid-template-columns:1fr 1fr}
  .hero-grid{grid-template-columns:1.15fr .85fr;align-items:center}
  .case{grid-template-columns:45% 1fr;align-items:center}
  .case:nth-of-type(even){grid-template-columns:1fr 45%}
  .case:nth-of-type(even) .case-shot{order:2}
  .zahlen-grid{grid-template-columns:repeat(4,1fr)}
  .david-grid{grid-template-columns:.85fr 1.15fr}
  .gespraech{grid-template-columns:1fr 1fr}
  .region-grid{grid-template-columns:1fr 1fr}
  .cta-grid{grid-template-columns:1fr 1fr;align-items:center}
  .rueckruf-inner{grid-template-columns:1fr auto auto}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps li{grid-template-columns:1fr;gap:var(--s-3)}
  .steps.vier{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1024px){
  .nav-links{display:flex}
  .nav-tel{display:inline}
  .nav-cta{display:inline-flex}
  .nav-burger,.nav-mobile{display:none}
  .sticky-cta{display:none}
}