/* ==========================================================================
   WiesnerStudios — wiesnerstudios.de
   Stand 10.09.2026

   Schriften: bewusst KEINE externe Schrift. Es wird der Schrift-Stack des
   jeweiligen Geräts benutzt. Damit gibt es null Anfragen an fremde Server —
   das Google-Fonts-Abmahnthema ist so vollständig erledigt und die Seite
   lädt auf dem Handy sofort.

   Wenn Sie später doch eine eigene Schrift wollen (z. B. Inter):
   1. woff2-Dateien nach assets/fonts/ legen
   2. @font-face-Blöcke unten einkommentieren und Dateinamen anpassen
   3. in --font den Namen an den Anfang setzen
   Nicht über fonts.googleapis.com einbinden.
   ========================================================================== */

/*
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
*/

:root{
  --weiss:#FFFFFF;
  --flaeche:#F4F8FC;
  --text:#1A2733;
  --navy:#123A5C;
  --blau:#0F6FB8;
  --blau-dunkel:#0B5891;
  --hell:#7EC4E8;
  --hell-flaeche:#EAF3FB;
  --linie:#DCE7F1;
  --text-leise:#5A6B7C;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --wrap:1120px;
  --r:14px;
  --r-sm:10px;
  --r-xl:26px;
  --schatten:0 1px 2px rgba(18,58,92,.05), 0 8px 24px rgba(18,58,92,.07);
  --schatten-stark:0 2px 4px rgba(18,58,92,.06), 0 18px 44px rgba(18,58,92,.14);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--weiss);
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%}
[hidden]{display:none !important}

h1,h2,h3{color:var(--navy); line-height:1.18; letter-spacing:-.02em; margin:0 0 .5em}
h1{font-size:clamp(2.1rem,7vw,3.6rem); font-weight:800}
h2{font-size:clamp(1.6rem,4.4vw,2.5rem); font-weight:750}
h3{font-size:1.18rem; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{font-weight:700; color:var(--navy)}

a{color:var(--blau); text-underline-offset:3px}
a:hover{color:var(--blau-dunkel)}

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

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:20px}
.wrap-narrow{max-width:720px}
.center{text-align:center}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font:inherit; font-weight:650; letter-spacing:-.01em;
  padding:14px 22px; border-radius:var(--r-sm); border:2px solid transparent;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background-color .15s ease, border-color .15s ease, transform .1s ease, color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blau); color:#fff; border-color:var(--blau)}
.btn-primary:hover{background:var(--blau-dunkel); border-color:var(--blau-dunkel); color:#fff}
.btn-outline{background:var(--weiss); color:var(--navy); border-color:var(--linie); box-shadow:var(--schatten)}
.btn-dark{background:var(--navy); color:#fff; border-color:var(--navy)}
.btn-dark:hover{background:#0C2C47; border-color:#0C2C47; color:#fff}
.btn-outline:hover{border-color:var(--blau); color:var(--blau); box-shadow:var(--schatten-stark)}
.btn-ghost{background:transparent; color:var(--navy); border-color:transparent; text-decoration:underline}
.btn-ghost:hover{color:var(--blau)}
.btn-ghost-light{background:transparent; color:#CFE0EE; border-color:rgba(255,255,255,.28)}
.btn-ghost-light:hover{color:#fff; border-color:rgba(255,255,255,.6)}
.btn-sm{padding:10px 16px; font-size:.95rem}
.btn-lg{padding:21px 38px; font-size:1.2rem}
.btn-block{display:flex; width:100%}

.eyebrow{
  font-size:.82rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blau); margin:0 0 .8em;
}

/* ---------- Header ---------- */
.header-right > .btn{display:none}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--linie);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:62px}
.header-inner.nav-center{display:grid; grid-template-columns:1fr auto 1fr; gap:8px}
.nav-center .hauptnav-left{grid-column:1; justify-self:start}
.wordmark{
  font-size:1.16rem; font-weight:800; letter-spacing:-.03em;
  text-decoration:none; color:var(--navy); white-space:nowrap;
}
.nav-center .wordmark{grid-column:2; justify-self:center}
.header-right{display:flex; align-items:center; gap:14px}
.nav-center .header-right{grid-column:3; justify-self:end}
.wordmark-a{color:var(--navy)}
.wordmark-b{color:var(--blau)}

/* ---------- Hero ---------- */
.hero{
  padding:clamp(48px,9vw,104px) 0 clamp(40px,7vw,84px);
  background:
    radial-gradient(90% 130% at 12% -20%, #EAF3FB 0%, rgba(234,243,251,0) 62%),
    var(--weiss);
  border-bottom:1px solid var(--linie);
}
.hero-inner{max-width:980px}
.hero h1{margin-bottom:.42em; font-size:clamp(2.5rem,8.6vw,4.7rem)}
.hl{color:var(--blau)}
.lead{font-size:clamp(1.05rem,2.3vw,1.3rem); color:var(--text-leise); max-width:640px; line-height:1.6}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 34px}
.hero-facts{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:11px;
  font-size:.98rem; color:var(--text-leise);
}
.hero-facts li{display:flex; align-items:flex-start; gap:10px}
.ico{width:20px; height:20px; flex:0 0 20px; margin-top:2px; fill:none; stroke:var(--blau); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

/* ---------- Sektionen ---------- */
.section{padding:clamp(52px,8.5vw,104px) 0}
.section-alt{background:var(--flaeche); border-block:1px solid var(--linie)}
.section-intro{color:var(--text-leise); max-width:620px; margin:0 auto 44px; font-size:1.05rem}
.section-intro.center{text-align:center}
.section-note{
  margin:44px auto 0; max-width:640px; text-align:center;
  color:var(--text-leise); font-size:.98rem;
}

/* ---------- Bento-Komponenten (Problem/Lösung + Ablauf) ---------- */
.blob-wrap{position:absolute; inset:0; overflow:hidden; border-radius:inherit; z-index:0; pointer-events:none}
.blob{
  position:absolute; width:58%; padding-bottom:58%; border-radius:50%;
  filter:blur(42px); opacity:.55; will-change:transform;
  animation:blob-drift 12s ease-in-out infinite alternate;
}
.blob--a{top:-20%; right:-14%; background:radial-gradient(circle at 35% 35%, var(--linie), transparent 72%)}
.blob--b{
  bottom:-22%; left:-14%; width:46%; padding-bottom:46%;
  background:radial-gradient(circle at 35% 35%, var(--hell-flaeche), transparent 72%);
  animation-duration:15s; animation-delay:-5s;
}
.blob--blau{background:radial-gradient(circle at 35% 35%, var(--hell), transparent 72%); opacity:.5}
.blob--navy{background:radial-gradient(circle at 35% 35%, rgba(126,196,232,.55), transparent 72%); opacity:.3}
@keyframes blob-drift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-16px,12px) scale(1.14)}
}

.floating-chip{
  position:absolute; z-index:2; display:flex; align-items:center; gap:9px;
  background:var(--weiss); border:1px solid var(--linie); border-radius:999px;
  padding:8px 16px 8px 8px; box-shadow:var(--schatten-stark);
  font-size:.82rem; font-weight:650; color:var(--navy); white-space:nowrap;
  animation:chip-bob 4.5s ease-in-out infinite;
}
.floating-chip__ico{
  width:26px; height:26px; border-radius:50%; flex:0 0 26px;
  background:var(--blau); display:flex; align-items:center; justify-content:center;
}
.floating-chip__ico svg{width:13px; height:13px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
@keyframes chip-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.phone-mock{
  position:relative; z-index:1; width:min(190px,68%); margin:0 auto;
  aspect-ratio:9/18; background:var(--navy); border-radius:32px; padding:9px;
  box-shadow:var(--schatten-stark);
  animation:phone-float 6s ease-in-out infinite;
}
.phone-mock::before{
  content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:60px; height:16px; background:inherit; border-radius:0 0 12px 12px; z-index:2;
}
.phone-mock__screen{
  position:relative; width:100%; height:100%; background:var(--weiss);
  border-radius:23px; overflow:hidden; display:flex; flex-direction:column;
  padding:22px 10px 10px; gap:8px;
}
.phone-mock__status{display:flex; justify-content:space-between; font-size:10px; font-weight:750; color:var(--navy)}
.phone-mock__notif{
  display:flex; gap:8px; align-items:flex-start; text-align:left;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:11px; padding:9px;
  transition:opacity .25s ease;
}
.phone-mock__notif-ico{
  width:22px; height:22px; border-radius:50%; flex:0 0 22px;
  display:flex; align-items:center; justify-content:center; background:var(--linie);
}
.phone-mock__notif-ico svg{width:12px; height:12px; fill:none; stroke:var(--text-leise); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.phone-mock__notif-txt{font-size:10.5px; line-height:1.4; color:var(--text-leise)}
.phone-mock__notif-txt strong{display:block; font-size:11.5px; color:var(--navy); font-weight:750}

.phone-mock--kalt{background:#AEBBC8}
.phone-mock--kalt .phone-mock__notif{opacity:.75}
.phone-mock--warm .phone-mock__notif{background:var(--hell-flaeche); border-color:#CFE6F6; animation:notif-pulse 2.6s ease-in-out infinite}
.phone-mock--warm .phone-mock__notif-ico{background:var(--blau)}
.phone-mock--warm .phone-mock__notif-ico svg{stroke:#fff}
@keyframes notif-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(15,111,184,.28)}
  50%{box-shadow:0 0 0 7px rgba(15,111,184,0)}
}
@keyframes phone-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* ---------- Problem/Lösung ---------- */
.problem-kopf{display:grid; gap:32px; align-items:center; margin-bottom:32px}
.problem-intro{max-width:680px; margin:0}

/* ---------- Radar-Grafik ---------- */
.radar-wrap{display:flex; flex-direction:column; align-items:center; gap:18px}
.radar{width:min(280px,80%); height:auto}
.radar-ring{fill:none; stroke:var(--linie); stroke-width:1}
.radar-ticks line{stroke:var(--linie); stroke-width:1.5}
.radar-sweep{transform-origin:90px 90px; animation:radar-dreh 6s linear infinite}
.radar-wedge{fill:url(#radarFade); opacity:.55}
.radar-hand{stroke:var(--blau); stroke-width:2; stroke-linecap:round}
.radar-punkt{fill:var(--navy)}
@keyframes radar-dreh{to{transform:rotate(360deg)}}

/* Blips leuchten erst auf, NACHDEM der Zeiger über sie hinweggestrichen ist (wie bei einem
   Schiffsradar) — Verzögerung = Blip-Winkel/360 × 6s, im Uhrzeigersinn ab 12 Uhr gemessen:
   Blip 1 bei ~39°, Blip 2 bei ~102°, Blip 3 bei ~164°. */
.radar-blip{fill:var(--linie)}
.radar-blip-1{animation:radar-blink 6s linear infinite; animation-delay:.65s}
.radar-blip-2{animation:radar-blink 6s linear infinite; animation-delay:1.7s}
.radar-blip-3{animation:radar-blink 6s linear infinite; animation-delay:2.73s}
@keyframes radar-blink{
  0%{fill:var(--linie)}
  3%{fill:var(--blau)}
  22%{fill:var(--linie)}
  100%{fill:var(--linie)}
}
/* Gestrichelte Linien: laufender Strich zieht die Bewerber-Punkte zum Betrieb-Icon */
.radar-linie{fill:none; stroke:var(--linie); stroke-width:1.4; stroke-dasharray:3 3; animation:radar-linie-fluss 1s linear infinite}
@keyframes radar-linie-fluss{to{stroke-dashoffset:-6}}
.radar-haus{fill:none; stroke:var(--navy); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

.radar-legende{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:.86rem; color:var(--text-leise); max-width:280px}
.radar-legende li{display:flex; align-items:flex-start; gap:9px}
.radar-legende-punkt{width:9px; height:9px; border-radius:50%; flex:0 0 9px; margin-top:5px; background:var(--linie)}
.radar-legende-punkt--aktiv{background:var(--blau)}

/* ---------- Antwort-Box (Problem/Lösung) ---------- */
.antwort-box{
  position:relative; background:var(--hell-flaeche); border:1px solid #CFE6F6; border-left:5px solid var(--blau);
  border-radius:var(--r-sm); padding:clamp(22px,4vw,30px) clamp(22px,4vw,32px);
}
.antwort-box h3{margin-bottom:.4em}
.antwort-box > p{color:var(--text); margin-bottom:1em}
.answer-liste{
  list-style:none; margin:0; padding:0; text-align:left;
  display:flex; flex-direction:column; gap:11px;
  font-size:.98rem; color:var(--text);
}
.answer-liste li{display:flex; align-items:flex-start; gap:10px}
.fineprint{font-size:.95rem; color:var(--text-leise); margin-top:1.2em}

/* ---------- Prozess: Ablauf-Banner ---------- */
.ablauf-banner{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--navy),var(--blau-dunkel));
  padding:clamp(26px,4vw,36px) clamp(22px,4vw,40px);
  margin-bottom:36px;
}
.ablauf-rail{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:4px; max-width:660px; margin:0 auto;
}
.ablauf-rail-punkt{
  width:34px; height:34px; border-radius:50%; flex:0 0 34px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.35);
  color:#fff; font-size:.8rem; font-weight:750; transition:background-color .25s ease, border-color .25s ease;
}
.ablauf-rail-punkt.is-ziel{background:var(--hell); border-color:var(--hell); color:var(--navy)}
.ablauf-rail-linie{flex:1; height:2px; background:rgba(255,255,255,.22); position:relative; overflow:hidden; border-radius:2px}
.ablauf-rail-linie::after{
  content:""; position:absolute; inset:0; width:44%;
  background:linear-gradient(90deg,transparent,var(--hell),transparent);
  animation:rail-flow 3.4s linear infinite;
}
@keyframes rail-flow{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@media (max-width:539px){ .ablauf-rail-punkt{width:28px; height:28px; flex:0 0 28px; font-size:.72rem} }

/* ---------- Prozess: Bento-Karten ---------- */
.ablauf-bento{display:grid; gap:18px; margin-top:8px}
@media (min-width:640px){ .ablauf-bento{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .ablauf-bento{grid-template-columns:repeat(3,1fr)} }
.ablauf-bento--zwei{max-width:820px; margin-inline:auto}
@media (min-width:1040px){ .ablauf-bento--zwei{grid-template-columns:repeat(2,1fr)} }

.ablauf-karte{
  position:relative; overflow:hidden;
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--r-xl);
  padding:26px 24px 24px;
  box-shadow:var(--schatten);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ablauf-karte:hover,.ablauf-karte.is-aktiv{transform:translateY(-7px); box-shadow:var(--schatten-stark); border-color:var(--hell)}
.ablauf-karte--featured{background:var(--hell-flaeche); border-color:#CFE6F6}
.ablauf-tag{
  position:relative; z-index:1; display:inline-block; margin-bottom:10px;
  background:var(--blau); color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:999px;
}

.ablauf-nr{
  position:relative; z-index:1; display:block;
  font-size:.85rem; font-weight:800; color:var(--blau); letter-spacing:.02em; margin-bottom:10px;
}
.ablauf-icon-badge{
  position:relative; z-index:1;
  width:48px; height:48px; border-radius:14px; margin-bottom:16px;
  background:var(--hell-flaeche); display:flex; align-items:center; justify-content:center;
  transition:background-color .25s ease, transform .25s ease;
}
.ablauf-karte:hover .ablauf-icon-badge,.ablauf-karte.is-aktiv .ablauf-icon-badge{background:var(--blau); transform:scale(1.08) rotate(-4deg)}
.ablauf-icon-badge svg{
  width:24px; height:24px; fill:none; stroke:var(--blau); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s ease;
}
.ablauf-karte:hover .ablauf-icon-badge svg,.ablauf-karte.is-aktiv .ablauf-icon-badge svg{stroke:#fff}
.ablauf-karte h3{position:relative; z-index:1; margin-bottom:.45em}
.ablauf-karte p{position:relative; z-index:1; color:var(--text-leise); font-size:.98rem; margin:0}

/* ---------- Prozess: dunkle Feature-Karte (Schritt 6) ---------- */
.ablauf-feature{
  position:relative; overflow:hidden; margin-top:18px;
  background:var(--navy); border-radius:var(--r-xl); color:#fff;
  padding:clamp(30px,5vw,44px) clamp(24px,5vw,40px);
  display:grid; gap:30px; align-items:center;
  box-shadow:var(--schatten);
  transition:transform .25s ease, box-shadow .25s ease;
}
.ablauf-feature:hover,.ablauf-feature.is-aktiv{transform:translateY(-6px); box-shadow:var(--schatten-stark)}
.ablauf-feature-text{position:relative; z-index:1}
.ablauf-feature h3{color:#fff; font-size:1.4rem}
.ablauf-feature p{color:#B7CEE0; margin:0}
.ablauf-nr--hell{color:var(--hell)}
.ablauf-feature-visual{position:relative; z-index:1; display:flex; justify-content:center}
.ablauf-feature-visual .floating-chip{left:-6px; bottom:2px}
@media (min-width:760px){
  .ablauf-feature{grid-template-columns:1.15fr .85fr}
}

/* ---------- Pakete ---------- */
/* Alle 3 Karten immer auf einen Blick sichtbar, ohne Scrollen: 1 Spalte auf dem Handy,
   2 auf mittleren Bildschirmen, erst auf breiten Bildschirmen eine einzelne Reihe. */
.pakete{display:grid; grid-template-columns:1fr; gap:22px; align-items:stretch}
.paket{
  position:relative; background:var(--weiss);
  border:1px solid var(--linie); border-radius:var(--r);
  padding:26px 24px 24px; display:flex; flex-direction:column;
  box-shadow:var(--schatten);
  transition:transform .22s ease, box-shadow .22s ease;
}
.paket:hover{transform:translateY(-7px) scale(1.02); box-shadow:var(--schatten-stark)}
.paket-hero{
  border:2px solid var(--blau); box-shadow:var(--schatten-stark);
  padding-top:34px;
}
.paket-hero:hover{transform:translateY(-9px) scale(1.025)}
.paket-flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--blau); color:#fff; font-size:.76rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px; margin:0; white-space:nowrap;
}
.paket-head{border-bottom:1px solid var(--linie); padding-bottom:18px; margin-bottom:18px}
.paket-name{font-size:1.3rem; margin-bottom:.2em}
.paket-sub{color:var(--text-leise); font-size:.96rem; margin:0 0 14px}
.paket-preis{margin:0; color:var(--navy); display:flex; align-items:baseline; gap:.35em}
.ab{font-size:.95rem; color:var(--text-leise); font-weight:600}
.zahl{font-size:2.05rem; font-weight:800; letter-spacing:-.03em}
.paket-preis-note{font-size:.85rem; color:var(--text-leise); margin:4px 0 0}
.paket-liste{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:11px; flex:1}
.paket-liste li{display:grid; grid-template-columns:112px 1fr; gap:10px; font-size:.96rem; align-items:baseline}
.li-k{color:var(--text-leise); font-size:.79rem; text-transform:uppercase; letter-spacing:.05em; font-weight:650}
.li-v{color:var(--text); font-weight:600}
.li-v em{font-style:normal; color:var(--blau); font-weight:700}

.paket-abo{border:2px solid var(--navy); padding-top:34px}
.paket-abo:hover{transform:translateY(-9px) scale(1.025)}
.paket-flag-abo{background:var(--navy)}
.zahl-klein{font-size:1.2rem; font-weight:800; letter-spacing:-.02em; line-height:1.25}
.paket-preis-suffix{font-size:.95rem; color:var(--text-leise); font-weight:600}

.klassen-tabelle{margin:4px 0 20px; padding-top:14px; border-top:1px solid var(--linie); display:grid; gap:8px}
.klassen-zeile{display:grid; grid-template-columns:20px 1fr auto; gap:10px; align-items:baseline}
.klassen-buchstabe{font-weight:800; color:var(--navy); font-size:.92rem}
.klassen-berufe{color:var(--text-leise); font-size:.82rem; line-height:1.35}
.klassen-preis{font-weight:700; color:var(--navy); font-size:.88rem; white-space:nowrap}

/* ---------- 30-Tage-Einheiten-Steller (Abo) ---------- */
.stepper{display:inline-flex; align-items:center; gap:9px}
.stepper-input{
  width:60px; font:inherit; font-size:1rem; font-weight:700; color:var(--navy); text-align:center;
  padding:8px 4px; border:2px solid var(--linie); border-radius:var(--r-sm); background:var(--weiss);
  transition:border-color .15s ease;
}
.stepper-input:focus{border-color:var(--blau); outline:none}
.stepper-suffix{font-size:.85rem; font-weight:600; color:var(--text-leise)}
.li-v em.li-zusatz.stepper-tage{font-style:normal; color:var(--blau); font-weight:700}
em.stepper-tage{font-style:normal; color:var(--blau); font-weight:700}
.laufzeit-feld{
  padding:14px 16px; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-sm);
}
.laufzeit-feld .hint{margin-top:9px}
.hint-rabatt{color:var(--blau-dunkel)}
.hint-rabatt strong{color:var(--navy)}

.budget-satz{
  margin:38px auto 0; max-width:660px; text-align:center;
  font-size:.98rem; color:var(--text-leise); line-height:1.65;
}
.budget-satz strong{color:var(--navy)}
.budget-schluss{display:block; margin-top:10px}
.section-dark .budget-satz{color:#B7CEE0}
.section-dark .budget-satz strong{color:#fff}

.schnellstart-banner{
  text-align:center; margin:34px auto 0; max-width:660px;
  padding:16px 20px; border-radius:var(--r-sm); font-size:.95rem; line-height:1.5;
  background:rgba(126,196,232,.12); border:1px solid rgba(126,196,232,.35); color:#DCE9F3;
}
.schnellstart-banner strong{color:#fff}
/* Blitz sitzt direkt vor dem Label, nicht als eigene Spalte daneben. */
.schnellstart-ico{width:19px; height:19px; fill:var(--hell); vertical-align:-4px; margin-right:7px}

.anlass-teaser{margin-top:16px; font-size:.92rem}
.anlass-teaser-link{font-weight:700; text-decoration:none}
.anlass-teaser-link:hover{text-decoration:underline}
.section-dark .anlass-teaser-text{color:#B7CEE0}
.section-dark .anlass-teaser-link{color:var(--hell)}
.section-dark .anlass-teaser-link:hover{color:#fff}
.li-v em.li-zusatz{display:block; font-style:normal; font-weight:500; font-size:.84rem; color:var(--text-leise); margin-top:1px}

/* ---------- Abo für Dauerkunden ---------- */
.abo-karte{
  position:relative; overflow:hidden;
  background:var(--navy); border-radius:var(--r-xl); color:#fff;
  padding:clamp(30px,5vw,48px) clamp(24px,5vw,44px);
  box-shadow:var(--schatten);
}
.abo-text{position:relative; z-index:1; max-width:620px}
.abo-karte .eyebrow{color:var(--hell); margin-bottom:.7em}
.abo-karte h2{color:#fff; margin-bottom:.5em; font-size:clamp(1.5rem,3.6vw,2.1rem)}
.abo-intro{color:#B7CEE0; font-size:1.05rem; margin:0}
.abo-liste{list-style:none; margin:22px 0 30px; padding:0; display:flex; flex-direction:column; gap:11px}
.abo-liste li{display:flex; align-items:flex-start; gap:10px; color:#DCE9F3; font-size:.98rem}
.abo-liste .ico{stroke:var(--hell)}
.abo-actions{display:flex; flex-wrap:wrap; align-items:center; gap:16px}
.abo-preis-note{color:#9FBBD1; font-size:.92rem}

/* ---------- Navileiste im Header ---------- */
.hauptnav{display:none; align-items:center; gap:15px}
.hauptnav a{
  color:var(--text-leise); text-decoration:none; font-size:.86rem; font-weight:600;
  padding:3px 0; border-bottom:2px solid transparent; white-space:nowrap;
}
.hauptnav a:hover{color:var(--blau); border-bottom-color:var(--blau)}
.hauptnav a[aria-current="page"]{color:var(--blau); border-bottom-color:var(--blau)}

/* ---------- Extras ---------- */
.extras{display:grid; gap:16px; align-items:stretch}
.extra{
  position:relative; display:flex; flex-direction:column; gap:9px;
  text-align:left; font:inherit; cursor:pointer;
  background:var(--weiss); border:2px solid var(--linie); border-radius:var(--r);
  padding:22px 22px 20px; box-shadow:var(--schatten);
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.extra:hover{border-color:var(--hell)}
.extra[aria-pressed="true"]{border-color:var(--blau); background:var(--hell-flaeche); box-shadow:var(--schatten-stark)}
.extra:focus-visible{outline:3px solid var(--blau); outline-offset:3px}
.extra-ico{
  width:34px; height:34px; fill:none; stroke:var(--blau);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.extra-titel{font-size:1.32rem; font-weight:750; color:var(--navy); letter-spacing:-.015em; line-height:1.2}
.extra-text{font-size:.95rem; color:var(--text-leise); line-height:1.55; flex:1}
.extra-preis{
  font-size:1.35rem; font-weight:800; color:var(--navy); letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:.32em; margin-top:4px;
}
.extra-preis .ab{font-size:.9rem; font-weight:600; color:var(--text-leise); letter-spacing:0}
.extra-preis-note{display:block; font-size:.8rem; color:var(--text-leise); margin-top:4px}
.anlass-karte{cursor:default}
.extra-haken{
  position:absolute; top:14px; right:14px;
  width:28px; height:28px; border-radius:50%;
  border:2px solid var(--linie); background:var(--weiss);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, border-color .15s ease;
}
.extra-haken svg{width:15px; height:15px; fill:none; stroke:transparent; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round}
.extra[aria-pressed="true"] .extra-haken{background:var(--blau); border-color:var(--blau)}
.extra[aria-pressed="true"] .extra-haken svg{stroke:#fff}
.extras-fuss{
  margin:30px auto 0; max-width:620px; text-align:center;
  font-size:.93rem; color:var(--text-leise);
}

.extraswahl{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r);
  padding:18px; margin:0 0 22px;
}
.ex-chips{display:flex; flex-wrap:wrap; gap:10px}

/* Preis-Kästchen (z. B. Zusätzlich dazubuchen): wie Paket-Kästchen, aber Mehrfachauswahl mit Häkchen */
.chip-preis{flex:1 1 200px}
.chip.chip-preis > span{
  flex-direction:column; align-items:flex-start; text-align:left;
  padding:14px 40px 13px 16px; gap:2px; font-size:.98rem; font-weight:700; color:var(--navy);
}
.chip-preis small{font-size:.85rem; font-weight:650; color:var(--text-leise)}
.chip-preis input:checked + span small{color:var(--blau)}
.chip-preis-haken{
  position:absolute; top:12px; right:12px;
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--linie); background:var(--weiss);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, border-color .15s ease;
}
.chip-preis-haken svg{width:13px; height:13px; fill:none; stroke:transparent; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round}
.chip-preis input:checked + span .chip-preis-haken{background:var(--blau); border-color:var(--blau)}
.chip-preis input:checked + span .chip-preis-haken svg{stroke:#fff}

/* ---------- Dunkler Block / Formular ---------- */
.section-dark{background:var(--navy); color:#DCE9F3}
.section-dark h2{color:#fff}
.section-dark .eyebrow{color:var(--hell)}
.section-dark .section-intro{color:#B7CEE0}

.form-card{
  background:var(--weiss); color:var(--text);
  border-radius:var(--r); padding:clamp(22px,4vw,36px);
  box-shadow:var(--schatten-stark);
}

.progress{margin-bottom:28px}
.progress-bar{height:6px; background:var(--linie); border-radius:999px; overflow:hidden}
.progress-bar span{display:block; height:100%; background:var(--blau); border-radius:999px; transition:width .3s ease}
.progress-steps{list-style:none; display:flex; justify-content:space-between; margin:14px 0 0; padding:0}
.ps{display:flex; align-items:center; gap:8px; color:var(--text-leise); font-size:.9rem; font-weight:600}
.ps-num{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--linie); color:var(--text-leise); font-size:.82rem; font-weight:750;
  transition:background-color .2s ease, color .2s ease;
}
.ps.is-active{color:var(--navy)}
.ps.is-active .ps-num{background:var(--blau); color:#fff}
.ps.is-done .ps-num{background:var(--navy); color:#fff}
@media (max-width:479px){ .ps-label{display:none} }

.fs{border:0; margin:0; padding:0; min-width:0}
.fs-legend{
  font-size:1.22rem; font-weight:750; color:var(--navy);
  letter-spacing:-.015em; margin-bottom:20px; padding:0;
}
.field{margin-bottom:20px}
.field-row{display:grid; gap:20px}
.field label,.label-as-text{display:block; font-weight:650; font-size:.95rem; color:var(--navy); margin-bottom:7px}
.opt{font-weight:500; color:var(--text-leise)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--text);
  padding:13px 14px; border:2px solid var(--linie); border-radius:var(--r-sm);
  background:var(--weiss); transition:border-color .15s ease;
}
select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%235A6B7C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
  padding-right:38px;
}
textarea{resize:vertical; min-height:88px}
input:focus,select:focus,textarea:focus{border-color:var(--blau); outline:none}
input.is-error,select.is-error,textarea.is-error{border-color:#C0392B}
.hint{font-size:.87rem; color:var(--text-leise); margin:7px 0 0}
.err{display:none; font-size:.87rem; color:#C0392B; font-weight:600; margin:7px 0 0}
.err.is-shown{display:block}

.radio-row,.pw-chips{display:flex; flex-wrap:wrap; gap:10px}
.pw-chips--zwei .chip-lg{flex:1 1 0}
.chip{position:relative; margin:0}
.chip input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.chip span{
  display:flex; align-items:center; justify-content:center;
  padding:11px 20px; border:2px solid var(--linie); border-radius:var(--r-sm);
  font-weight:650; color:var(--text-leise); background:var(--weiss);
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.chip input:checked + span{border-color:var(--blau); color:var(--blau); background:var(--hell-flaeche)}
.chip input:focus-visible + span{outline:3px solid var(--blau); outline-offset:2px}
.chip-lg span{flex-direction:column; gap:3px; min-width:82px; padding:12px 14px; font-size:1.15rem; font-weight:800; color:var(--navy)}
.chip-lg small{font-size:.75rem; font-weight:600; color:var(--text-leise); letter-spacing:0}
.chip-lg input:checked + span small{color:var(--blau)}
.pw-chips--paket .chip-lg span{font-size:.92rem; min-width:0}

.paketwahl{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r);
  padding:18px; margin:26px 0 22px;
}
.pw-label{display:block; font-weight:650; font-size:.95rem; color:var(--navy); margin-bottom:11px}

.field-check{margin-top:14px}
.check{
  position:relative; display:flex; gap:14px; align-items:flex-start;
  font-weight:500 !important; font-size:.93rem !important; color:var(--text-leise) !important; line-height:1.55;
  cursor:pointer; padding:15px 17px; border:1.5px solid var(--linie); border-radius:var(--r-sm);
  background:var(--weiss); transition:border-color .15s ease, background-color .15s ease;
}
.check:hover{border-color:#B9CFE0}
.check input{position:absolute; opacity:0; width:1px; height:1px}
.check-mark{
  flex:0 0 24px; width:24px; height:24px; margin-top:1px; border-radius:50%;
  border:2px solid var(--linie); background:var(--weiss);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, border-color .15s ease;
}
.check-mark svg{width:13px; height:13px; fill:none; stroke:transparent; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round}
.check input:checked ~ .check-mark{background:var(--blau); border-color:var(--blau)}
.check input:checked ~ .check-mark svg{stroke:#fff}
.check input:focus-visible ~ .check-mark{outline:3px solid var(--blau); outline-offset:2px}
.check:has(input:checked){border-color:var(--blau); background:var(--hell-flaeche)}
/* Dezenter Dauerhinweis auf ein einzelnes Feld: immer sichtbarer, leicht blauer Rahmen statt der blassen Standardlinie */
.check--hinweis{border-color:var(--hell)}
.check--hinweis:hover{border-color:var(--blau)}
.check--hinweis:has(input:checked){border-color:var(--blau)}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.fs-actions{margin-top:26px}
.fs-actions.two{display:grid; grid-template-columns:auto 1fr; gap:12px}
.fs-actions.two .btn{width:100%}
.section-dark .fs-actions.two .btn-ghost-light{color:var(--text-leise); border-color:var(--linie)}
.section-dark .fs-actions.two .btn-ghost-light:hover{color:var(--navy); border-color:var(--navy)}

.form-status{margin:16px 0 0; font-size:.95rem; font-weight:600; text-align:center; min-height:1.4em}
.form-status.is-error{color:#C0392B}
.form-status.is-busy{color:var(--text-leise)}

.talk-card{
  margin-top:34px; padding:clamp(22px,4vw,32px);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r); text-align:center;
}
.talk-ico{width:34px; height:34px; margin:0 auto 12px; fill:none; stroke:var(--hell); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.talk-text{color:#DCE9F3; font-size:1.05rem; font-weight:600; max-width:440px; margin:0 auto 18px}
.talk-form{max-width:380px; margin:0 auto; text-align:left}
.talk-form .field{margin-bottom:12px}
.talk-form input{background:rgba(255,255,255,.94)}
.talk-form .talk-btn{width:100%; margin-top:4px}
.talk-fineprint{color:#9FBBD1; font-size:.85rem; margin:14px 0 0}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy); color:#9FBBD1; padding:48px 0 26px; border-top:1px solid rgba(255,255,255,.08)}
.footer-inner{display:grid; gap:26px}
.site-footer .wordmark-a{color:#fff}
.site-footer .wordmark-b{color:var(--hell)}
.footer-claim{margin:10px 0 0; font-size:.95rem; max-width:340px; color:#9FBBD1}
.footer-nav{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center}
.footer-nav a{color:#CFE0EE; text-decoration:none; font-size:.96rem; font-weight:600}
.footer-nav a:hover{color:#fff; text-decoration:underline}
.footer-bottom{margin-top:32px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:.87rem; color:#7E9AB2}
.footer-bottom p{margin:0}

/* ---------- Rechtstexte ---------- */
.legal{padding:clamp(44px,7vw,80px) 0 clamp(52px,8vw,90px)}
.legal h1{font-size:clamp(1.8rem,5vw,2.6rem); margin-bottom:.5em}
.legal h2{font-size:1.3rem; margin:2.2em 0 .6em}
.legal h3{font-size:1.05rem; margin:1.6em 0 .5em}
.legal p,.legal li{color:var(--text); font-size:1rem}
.legal ul{padding-left:1.2em; margin:0 0 1.1em}
.legal li{margin-bottom:.5em}
.legal .stand{color:var(--text-leise); font-size:.92rem}
.platzhalter{
  background:#FFF3D6; border:1px dashed #D9A520; border-radius:6px;
  padding:2px 7px; font-weight:700; color:#7A5800; font-size:.94em;
  display:inline-block;
}
.hinweis-box{
  background:#FFF8E6; border:1px solid #E8C86A; border-left:5px solid #D9A520;
  border-radius:var(--r-sm); padding:18px 20px; margin:0 0 34px; font-size:.95rem;
}
.hinweis-box strong{color:#7A5800}
.hinweis-box p:last-child{margin-bottom:0}

/* ---------- Danke-Seite ---------- */
.danke{padding:clamp(56px,9vw,110px) 0; text-align:center; background:radial-gradient(80% 110% at 50% -10%, #EAF3FB 0%, rgba(234,243,251,0) 65%), var(--weiss)}
.danke-mark{
  width:78px; height:78px; margin:0 auto 26px; border-radius:50%;
  background:var(--blau); display:flex; align-items:center; justify-content:center;
}
.danke-mark svg{width:38px; height:38px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.danke .lead{margin-inline:auto}
.danach{
  text-align:left; max-width:620px; margin:44px auto 0;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r);
  padding:clamp(22px,4vw,34px);
}
.danach h2{font-size:1.3rem; margin-bottom:1em}
.danach ol{margin:0; padding-left:1.3em; display:grid; gap:14px}
.danach li{padding-left:4px}
.danach li strong{display:block; margin-bottom:2px}
.danach li span{color:var(--text-leise); font-size:.97rem}

/* ==========================================================================
   Ab hier: größere Bildschirme. Mobil ist der Ausgangszustand.
   ========================================================================== */
@media (min-width:600px){
  .field-row{grid-template-columns:1fr 1fr}
  .header-inner{gap:16px; min-height:66px}
  .header-right > .btn{display:inline-flex}
  .hauptnav{display:flex; gap:20px}
  .hauptnav a{font-size:.92rem}
  .hero-facts{flex-direction:row; flex-wrap:wrap; gap:10px 26px}
  .footer-inner{grid-template-columns:1fr auto; align-items:end}
  .footer-nav{justify-content:flex-end}
}

@media (min-width:640px){
  .pakete{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:760px){
  body{font-size:18px}
  .problem-kopf{grid-template-columns:1.2fr .8fr}
  .steps{grid-template-columns:repeat(2,1fr); gap:0 34px}
  .extras{grid-template-columns:repeat(2,1fr); gap:18px}
  .hauptnav{gap:24px}
  .step::before{display:none}
  .step{padding-bottom:26px}
  .fs-actions.two{grid-template-columns:auto auto; justify-content:space-between}
  .fs-actions.two .btn{width:auto; min-width:150px}
}

@media (min-width:1100px){
  .pakete{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:1040px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .extras{grid-template-columns:repeat(2,1fr); max-width:900px; margin-inline:auto}
  .extras-2{max-width:760px}
  .hauptnav{gap:30px}
}