/* ==========================================================================
   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;
  --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:transparent; color:var(--navy); border-color:var(--linie)}
.btn-outline:hover{border-color:var(--blau); color:var(--blau)}
.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-inner > .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}
.wordmark{
  font-size:1.16rem; font-weight:800; letter-spacing:-.03em;
  text-decoration:none; color:var(--navy); white-space:nowrap;
}
.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;
}

/* ---------- Problem/Lösung ---------- */
.split{display:grid; gap:36px; align-items:center}
.split-visual{display:flex; justify-content:center}
.figure-block{margin:0; width:100%; max-width:360px}
.figure{width:100%; height:auto; display:block}
.figure-legende{margin-top:18px; display:grid; gap:9px}
.figure-legende p{margin:0; font-size:.93rem; color:var(--text-leise); display:flex; align-items:flex-start; gap:10px; line-height:1.45}
.pkt{flex:0 0 14px; width:14px; height:14px; border-radius:50%; margin-top:4px}
.pkt-voll{background:var(--blau)}
.pkt-ring{background:#EAF3FB; box-shadow:inset 0 0 0 4px #CFE6F6}
.fig-t{font-size:12px; font-weight:600; fill:var(--navy); font-family:var(--font)}
.fig-t-inv{font-size:12px; font-weight:700; fill:#fff; font-family:var(--font)}
.fig-t-sm{font-size:11px; font-weight:600; fill:var(--text-leise); font-family:var(--font)}
.fig-t-accent{fill:var(--blau)}

/* ---------- Radar-Animation (Problem/Lösung) ---------- */
.radar-svg{overflow:visible}
.radar-ringe circle{fill:none; stroke:var(--linie); stroke-width:1.4}
.radar-kreuz{stroke:var(--linie); stroke-width:1}
.radar-sweep{transform-box:fill-box; transform-origin:center; animation:radar-dreh 4.5s linear infinite}
.radar-sweep path{fill:url(#radarGrad)}
@keyframes radar-dreh{to{transform:rotate(360deg)}}
.radar-linie{fill:none; stroke:var(--linie); stroke-width:1.5; stroke-dasharray:2.5 5}
.blip-ping{fill:none; stroke:var(--blau); stroke-width:2; opacity:0; animation:blip-ping 2.8s ease-out infinite}
.blip-punkt{fill:var(--blau)}
@keyframes blip-ping{
  0%{r:4; opacity:.85}
  65%{r:20; opacity:0}
  100%{r:20; opacity:0}
}
.radar-dot{fill:var(--blau); offset-rotate:0deg; opacity:0; animation:radar-fahrt 2.8s ease-in-out infinite}
@keyframes radar-fahrt{
  0%{offset-distance:0%; opacity:0}
  6%{opacity:1}
  88%{opacity:1}
  100%{offset-distance:100%; opacity:0}
}
.betrieb-icon rect{fill:none; stroke:var(--navy); stroke-width:2; stroke-linejoin:round}
.betrieb-icon path{fill:none; stroke:var(--navy); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.betrieb-icon rect:last-child{fill:var(--navy); stroke:none}

.answer-card{
  margin-top:44px; padding:clamp(24px,4vw,40px);
  background:var(--hell-flaeche); border-radius:var(--r);
  border-left:5px solid var(--blau);
}
.answer-card h3{font-size:1.35rem; margin-bottom:.6em}
.fineprint{font-size:.95rem; color:var(--text-leise); margin-top:1.2em}

/* ---------- Prozess ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:0}
.step{position:relative; display:grid; grid-template-columns:44px 1fr; gap:18px; padding-bottom:30px}
.step:last-child{padding-bottom:0}
.step::before{
  content:""; position:absolute; left:21px; top:44px; bottom:-2px; width:2px;
  background:linear-gradient(180deg,var(--hell),var(--linie));
}
.step:last-child::before{display:none}
.step-mark{display:flex; justify-content:center}
.step-num{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--navy); color:#fff; font-weight:750; font-size:1.05rem;
  position:relative; z-index:1;
}
.step-body{
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--r);
  padding:22px 22px 20px; box-shadow:var(--schatten); position:relative;
}
.step-ico{
  width:34px; height:34px; margin-bottom:12px;
  fill:none; stroke:var(--blau); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.step-body h3{margin-bottom:.45em}
.step-body p{color:var(--text-leise); font-size:.99rem; margin:0}

.step-num{transition:transform .3s ease, box-shadow .3s ease}
.step-body{transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.step.is-aktiv .step-num{transform:scale(1.22); box-shadow:0 0 0 7px var(--hell-flaeche)}
.step.is-aktiv .step-body{border-color:var(--blau); box-shadow:var(--schatten-stark); transform:translateY(-3px)}

/* ---------- Pakete ---------- */
.pakete{display:grid; gap:20px; align-items:start; max-width:520px; margin-inline:auto}
.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}

.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)}
.section-dark .budget-satz{color:#B7CEE0}
.section-dark .budget-satz strong{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}


/* ---------- Navileiste im Header ---------- */
.hauptnav{display:flex; align-items:center; gap:15px; margin-left:auto}
.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)}

/* ---------- 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.12rem; font-weight:700; color:var(--navy); letter-spacing:-.01em; line-height:1.25}
.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:2px}
.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:9px}
.chip-breit span{padding:10px 15px; font-size:.93rem; font-weight:600; gap:9px}
.chip-breit span::before{
  content:""; flex:0 0 18px; width:18px; height:18px; border-radius:5px;
  border:2px solid var(--linie); background:var(--weiss);
  background-repeat:no-repeat; background-position:center; background-size:11px;
  transition:background-color .15s ease, border-color .15s ease;
}
.chip-breit input:checked + span::before{
  border-color:var(--blau); background-color:var(--blau);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- 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}
.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)}

.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:6px}
.check{display:flex; gap:12px; align-items:flex-start; font-weight:500 !important; font-size:.93rem !important; color:var(--text-leise) !important; line-height:1.5; cursor:pointer}
.check input{flex:0 0 21px; width:21px; height:21px; margin:2px 0 0; accent-color:var(--blau); cursor:pointer}

.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-link{margin-top:26px; color:#B7CEE0; font-size:.98rem}
.talk-link a{color:var(--hell); font-weight:650}
.talk-link a:hover{color:#fff}

/* ---------- 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-inner > .btn{display:inline-flex}
  .hauptnav{gap:20px; margin-right:6px}
  .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:760px){
  body{font-size:18px}
  .split{grid-template-columns:1.15fr .85fr; gap:52px}
  .steps{grid-template-columns:repeat(2,1fr); gap:0 34px}
  .extras{grid-template-columns:repeat(2,1fr); gap:18px}
  .hauptnav{gap:24px; margin-right:10px}
  .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:940px){
  .pakete{grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; max-width:none}
  .paket{height:100%}
}

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