/* Schrift lokal eingebunden – kein Laden von Google */
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin-variable.woff2) format("woff2-variations"),url(fonts/inter-latin-variable.woff2) format("woff2")}

/* Tokens: unverändert aus Designsystem/index.html */
:root {
  --blau: #0059bf;
  --blau-dunkel: #004796;
  --blau-hell: #2f7ad4;
  --marine: #0e2847;
  --marine-tief: #091b31;
  --logo-blau: #005090;
  --text: #202020;
  --text-leise: #4a5361;
  --text-invers: #fff;
  --fuss-text: #ccd6e4;
  --fuss-titel: #92a6c0;
  --linie: #dde2e8;
  --linie-kraeftig: #c3ccd6;
  --linie-bedienung: #75859c;
  --linie-blau: #c9dcf3;
  --grund: #fff;
  --grund-leise: #eff4fb;
  --grund-blau: #e4edf9;
  --hinweis: #ffe680;
  --hinweis-text: #3d3000;
  --verlauf-leise: linear-gradient(180deg, #f5f8fd 0%, #eff4fb 55%, #eaf0f9 100%);
  --verlauf-tief: linear-gradient(180deg, #e4edf9 0%, #dde8f7 100%);
  --verlauf-karte: linear-gradient(#fff 0%, #fcfdfe 100%);
  --verlauf-karte-blau: linear-gradient(180deg, #f2f7fd 0%, #e4edf9 100%);
  --verlauf-balken: linear-gradient(90deg, #2f7ad4 0%, #0059bf 100%);
  --lichtschein: radial-gradient(72% 88% at 18% 0, #3874cd57 0%, #0000 68%), radial-gradient(48% 60% at 96% 100%, #091b318c 0%, #0000 70%);
  --schrift: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(2.1rem, 5.2vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 3.4vw, 2.3rem);
  --fs-h3: clamp(1.2rem, 2.2vw, 1.45rem);
  --fs-lead: 1.12rem;
  --fs-gross: 1.22rem;
  --fs-body: 1.0625rem;
  --fs-klein: .92rem;
  --fs-ueberzeile: .8rem;
  --fs-marke: .68rem;
  --lh-titel: 1.15;
  --lh-body: 1.65;
  --ls-titel: -.02em;
  --ls-ueberzeile: .09em;
  --breite: 1180px;
  --breite-text: 68ch;
  --a1: .25rem; --a2: .5rem; --a3: .75rem; --a4: 1rem; --a5: 1.5rem;
  --a6: 2rem; --a7: 3rem; --a8: 4rem; --a9: 6rem;
  --radius: 10px;
  --radius-gross: 18px;
  --radius-rund: 999px;
  --schattenfarbe: 38 32 28;
  --schatten-0: 0 1px 1px rgb(var(--schattenfarbe) / .04);
  --schatten-1: 0 1px 1px rgb(var(--schattenfarbe) / .05), 0 2px 4px rgb(var(--schattenfarbe) / .06), 0 6px 14px rgb(var(--schattenfarbe) / .05);
  --schatten-2: 0 1px 1px rgb(var(--schattenfarbe) / .06), 0 4px 8px rgb(var(--schattenfarbe) / .07), 0 12px 26px rgb(var(--schattenfarbe) / .07);
  --schatten-3: 0 1px 2px rgb(var(--schattenfarbe) / .07), 0 8px 16px rgb(var(--schattenfarbe) / .09), 0 22px 44px rgb(var(--schattenfarbe) / .09);
  --schatten-4: 0 2px 3px rgb(var(--schattenfarbe) / .08), 0 14px 28px rgb(var(--schattenfarbe) / .11), 0 34px 68px rgb(var(--schattenfarbe) / .11);
  --schatten: var(--schatten-1);
  --schatten-hoch: var(--schatten-3);
  --kante-oben: inset 0 1px 0 #ffffffe6;
  --kante-unten: inset 0 -1px 0 rgb(var(--schattenfarbe) / .07);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* Basis */
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:var(--schrift);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);background:var(--grund);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0 0 var(--a4);font-weight:700;line-height:var(--lh-titel);letter-spacing:var(--ls-titel);text-wrap:balance;hyphens:manual;overflow-wrap:break-word}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);line-height:1.3}
p{margin:0 0 var(--a4);text-wrap:pretty} p:last-child{margin-bottom:0}
a{color:var(--blau);text-underline-offset:3px} a:hover{color:var(--blau-dunkel)}
:where(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:4px}
.abschnitt--blau :where(a,button):focus-visible{outline-color:#fff}
.sprung{position:absolute;left:var(--a4);top:var(--a4);z-index:100;padding:var(--a3) var(--a5);border-radius:var(--radius);background:var(--blau);color:#fff;font-weight:600;text-decoration:none;transform:translateY(-200%)}
.sprung:focus{transform:none;color:#fff}

.huelle{width:min(100% - 2.5rem, var(--breite));margin-inline:auto}
.lese{max-width:var(--breite-text)}
.abschnitt{padding-block:clamp(var(--a7),7vw,var(--a9))}
.abschnitt--leise{background:var(--verlauf-leise)}
.abschnitt--tief{background:var(--verlauf-tief);box-shadow:var(--kante-oben),var(--kante-unten)}
.abschnitt--blau{background:var(--marine);color:var(--text-invers);position:relative;isolation:isolate;overflow:hidden}
.abschnitt--blau::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--lichtschein)}
.abschnitt--blau h2,.abschnitt--blau h3{color:var(--text-invers)}

.ueberzeile{font-size:var(--fs-ueberzeile);font-weight:700;letter-spacing:var(--ls-ueberzeile);text-transform:uppercase;color:var(--blau);margin-bottom:var(--a3)}
.vorspann{font-size:var(--fs-lead);color:var(--text-leise);max-width:62ch}
.gross{font-size:var(--fs-gross);line-height:1.45}
.klein{font-size:var(--fs-klein);color:var(--text-leise)}
.zeile-blau{display:block;color:var(--blau)}
.strich{width:62px;height:3px;margin:var(--a5) 0;border:0;border-radius:2px;background:var(--blau)}
.strich--hell{background:var(--text-invers)}
.kopf-abschnitt{margin-bottom:var(--a6);max-width:52rem}
.raster{display:grid;gap:var(--a5);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.raster--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:860px){.raster--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){.raster--4{grid-template-columns:repeat(4,1fr)}.raster--2-1{grid-template-columns:1.25fr 1fr}.raster--1-1{grid-template-columns:1fr 1fr}}
.raster--mitte{align-items:center}
.knopfreihe{display:flex;flex-wrap:wrap;gap:var(--a4);align-items:center}
.abstand-oben{margin-top:var(--a6)}

/* Button */
.knopf{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:var(--a3);padding:.95rem 1.6rem;border:2px solid #0000;border-radius:var(--radius);background:var(--blau);color:var(--text-invers);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;box-shadow:var(--schatten);transition:background .15s,transform .15s,box-shadow .15s,border-color .15s}
.knopf:hover{background:var(--blau-dunkel);color:var(--text-invers);box-shadow:var(--schatten-hoch);transform:translateY(-1px)}
.knopf:active{transform:none}
.knopf .pfeil{transition:transform .15s} .knopf:hover .pfeil{transform:translateX(3px)}
.knopf--zurueckhaltend{background:0 0;color:var(--blau);border-color:var(--linie-bedienung);box-shadow:none}
.knopf--zurueckhaltend:hover{background:var(--grund-blau);color:var(--blau-dunkel);border-color:var(--blau)}
.knopf--hell{background:var(--text-invers);color:var(--marine)}
.knopf--hell:hover{background:#eaf1fb;color:var(--marine)}
.knopf--rand-hell{background:0 0;color:#fff;border-color:#ffffff73;box-shadow:none}
.knopf--rand-hell:hover{background:#ffffff14;border-color:#fff}
.knopf--klein{padding:.7rem 1.15rem;font-size:.95rem}

/* Header */
.kopf{position:sticky;top:0;z-index:50;background:#fffffff7;border-bottom:1px solid var(--linie)}
.kopf__reihe{display:flex;align-items:center;gap:var(--a5);min-height:78px}
.kopf__logo img{width:168px}
.kopf__menue{display:none;gap:var(--a5);margin-inline:auto}
.kopf__punkt{color:var(--text);font-size:.95rem;font-weight:500;text-decoration:none;padding-block:.4rem;border-bottom:2px solid #0000;white-space:nowrap}
.kopf__punkt:hover{color:var(--blau);border-bottom-color:var(--linie-kraeftig)}
.kopf__aktionen{display:none;align-items:center;gap:var(--a5)}
.kopf__telefon{color:var(--text);font-size:.95rem;font-weight:600;text-decoration:none;white-space:nowrap}
.kopf__telefon:hover{color:var(--blau)}
.kopf__schalter{margin-left:auto;width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--linie-bedienung);border-radius:var(--radius);background:0 0;cursor:pointer}
.kopf__balken,.kopf__balken::before,.kopf__balken::after{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s,background .2s}
.kopf__balken{position:relative}
.kopf__balken::before,.kopf__balken::after{content:"";position:absolute}
.kopf__balken::before{transform:translateY(-7px)}.kopf__balken::after{transform:translateY(7px)}
.ist-offen .kopf__balken{background:0 0}
.ist-offen .kopf__balken::before{transform:rotate(45deg)}.ist-offen .kopf__balken::after{transform:rotate(-45deg)}
.kopf__mobil{display:none;border-top:1px solid var(--linie);padding-block:var(--a4);background:#fff}
.ist-offen .kopf__mobil{display:block}
.kopf__mobil a{display:block;padding:var(--a4) 0;color:var(--text);font-weight:500;text-decoration:none;border-bottom:1px solid var(--linie)}
.kopf__mobil a:last-child{border-bottom:0}
.kopf__mobil .kopf__mobil-haupt{color:var(--blau);font-weight:700}
@media (min-width:1060px){.kopf__menue,.kopf__aktionen{display:flex}.kopf__schalter,.ist-offen .kopf__mobil{display:none}}

/* Hero */
.kopfbereich{padding-block:clamp(var(--a6),5vw,var(--a8));overflow:hidden}
.kopfbereich__raster{display:grid;gap:var(--a6);align-items:center;grid-template-columns:minmax(0,1fr)}
.kopfbereich__beisatz{font-size:var(--fs-lead);color:var(--text-leise);max-width:56ch}
.kopfbereich__bild{margin:0}
.kopfbereich__bild img{width:100%;border-radius:var(--radius-gross);box-shadow:var(--schatten-hoch);aspect-ratio:4/3;object-fit:cover;object-position:50% 50%}
@media (min-width:980px){.kopfbereich__raster{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--a8)}}

/* Karte */
.karte{position:relative;padding:var(--a5);border:1px solid var(--linie);border-radius:var(--radius-gross);background:var(--verlauf-karte);box-shadow:var(--kante-oben),var(--schatten-1);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s}
.karte h3{margin-bottom:var(--a2)}
.karte--blau{background:var(--verlauf-karte-blau);border-color:var(--linie-blau);box-shadow:var(--kante-oben),var(--schatten-2)}
@media (hover:hover){.karte:hover{transform:translateY(-3px);box-shadow:var(--kante-oben),var(--schatten-3);border-color:#cfdaea}}
.karte--still:hover{transform:none!important}
.karte__symbol{width:42px;height:42px;display:grid;place-items:center;margin-bottom:var(--a4);border:1.5px solid var(--blau);border-radius:50%;background:#0059bf0f;color:var(--blau);font-weight:700;font-variant-numeric:tabular-nums}
.karte__symbol svg{width:21px;height:21px}
.karte--fehlt{border-style:dashed;border-color:var(--linie-kraeftig);background:#fff;box-shadow:none}
.karte--fehlt:hover{transform:none!important;box-shadow:none!important}

/* Kasten */
.kasten{position:relative;padding:var(--a5);border-left:4px solid var(--blau);border-radius:0 var(--radius) var(--radius) 0;background:linear-gradient(180deg,#eaf2fc 0%,var(--grund-blau) 100%);box-shadow:var(--schatten-0)}
.kasten__zahl{font-size:clamp(2rem,4vw,2.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--blau);margin-bottom:var(--a2);font-variant-numeric:tabular-nums}

/* Listen */
.merkmale{list-style:none;margin:var(--a5) 0;padding:0}
.merkmale li{display:flex;align-items:center;gap:var(--a4);padding:var(--a4) 0;border-bottom:1px solid var(--linie)}
.merkmale li:last-child{border-bottom:0}
.merkmale .ring{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--blau);border-radius:50%;color:var(--blau)}
.merkmale .ring svg{width:20px;height:20px}
.punkte{list-style:none;margin:0;padding:0}
.punkte li{position:relative;padding:var(--a4) 0 var(--a4) 2.1rem;border-bottom:1px solid var(--linie)}
.punkte li:last-child{border-bottom:0}
.punkte li::before{content:"";position:absolute;left:.25rem;top:1.5rem;width:10px;height:10px;border-radius:50%;background:var(--blau)}
.liste{list-style:none;margin:var(--a4) 0;padding:0}
.liste li{position:relative;padding-left:1.6rem;margin-bottom:var(--a3)}
.liste li:last-child{margin-bottom:0}
.liste li::before{content:"";position:absolute;left:.1rem;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--blau)}
.schritte{counter-reset:s;list-style:none;margin:0;padding:0}
.schritte>li{counter-increment:s;position:relative;padding-left:4.2rem;padding-bottom:var(--a6)}
.schritte>li::before{content:counter(s);position:absolute;left:0;top:-2px;width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;background:var(--blau);color:#fff;font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums}
.schritte>li::after{content:"";position:absolute;left:calc(1.375rem - 1px);top:3.1rem;bottom:.6rem;width:2px;background:var(--linie)}
.schritte>li:last-child{padding-bottom:0}.schritte>li:last-child::after{display:none}
.schritte h3{margin-bottom:var(--a2)}
.schritte .badge{margin-left:var(--a2);vertical-align:middle}
@media (min-width:980px){.ablauf__info{position:sticky;top:110px}}
.frage{border-bottom:1px solid var(--linie)}.frage:first-of-type{border-top:1px solid var(--linie)}
.frage summary{display:flex;gap:var(--a4);align-items:flex-start;padding:var(--a5) 0;cursor:pointer;list-style:none}
.frage summary::-webkit-details-marker{display:none}
.frage summary h3{flex:auto;margin:0;font-size:1.08rem;font-weight:600;letter-spacing:-.01em}
.frage summary::after{content:"";flex:none;width:12px;height:12px;margin-top:.42em;border-right:2px solid var(--blau);border-bottom:2px solid var(--blau);transform:rotate(45deg);transition:transform .15s}
.frage[open] summary::after{transform:rotate(-135deg)}
.frage summary:hover h3{color:var(--blau)}
.frage__antwort{padding-bottom:var(--a5)}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:.4em;padding:4px 10px;border-radius:var(--radius-rund);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#0059bf14;color:var(--blau);line-height:1.4}
.badge--neutral{background:#eef2f8;color:var(--text-leise)}
.badge--hinweis{background:var(--hinweis);color:var(--hinweis-text)}

/* Bild */
.hochbild{margin:0}
.hochbild img{width:100%;border-radius:var(--radius-gross);aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;box-shadow:var(--schatten-2)}

.illustration{margin:0}
.illustration img{width:100%;border-radius:var(--radius-gross);border:1px solid var(--linie-blau);box-shadow:var(--kante-oben),var(--schatten-2);background:#fff}

/* Preis */
.preis{font-size:clamp(2.4rem,5vw,3.2rem);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--blau);margin:var(--a2) 0 var(--a3)}
.preis small{font-size:.4em;font-weight:600;color:var(--text-leise);letter-spacing:0;margin-right:.3em;vertical-align:.5em}

/* Formular */
.formular .feld{margin-bottom:var(--a4)}
.formular label{display:block;margin-bottom:var(--a2);font-size:.97rem;font-weight:600;color:var(--text)}
.formular input,.formular textarea{width:100%;padding:.7rem .85rem;font:inherit;color:var(--text);background:var(--grund);border:1px solid var(--linie-bedienung);border-radius:var(--radius)}
.formular textarea{resize:vertical;min-height:7rem}
.formular input:focus-visible,.formular textarea:focus-visible{border-color:var(--blau)}
.formular .zweispaltig{display:grid;gap:0 var(--a4)}
@media (min-width:560px){.formular .zweispaltig{grid-template-columns:1fr 1fr}}
.pflicht{color:var(--blau)}
.schluss__karte{color:var(--text);padding:var(--a6)}.schluss__kontakt{margin-top:var(--a5);display:grid;gap:var(--a2)}
.schluss__kontakt a{color:#fff;font-weight:600;text-decoration:none}
.schluss__kontakt a:hover{text-decoration:underline;color:#fff}

/* Footer */
.fuss{background:var(--marine-tief);color:var(--fuss-text);padding-block:var(--a8) var(--a5)}
.fuss a{color:#fff;text-decoration:none}.fuss a:hover{color:#fff;text-decoration:underline}
.fuss__oben{display:grid;gap:var(--a7)}
@media (min-width:820px){.fuss__oben{grid-template-columns:1.4fr 1fr 1.2fr;gap:var(--a6)}}
.fuss__logo{width:168px;margin-bottom:var(--a5);filter:brightness(0) invert(1);opacity:.94}
.fuss__logo-flaeche{display:inline-block;margin-bottom:var(--a5);padding:var(--a3) var(--a4);background:#fff;border-radius:var(--radius);box-shadow:var(--schatten-1)}
.fuss__logo-farbig{width:168px;height:auto}
.fuss__spalte h2{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fuss-titel);margin-bottom:var(--a4)}
.fuss__spalte a{display:block;padding-block:.32rem}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--a4) var(--a6);margin-top:var(--a7);padding-top:var(--a5);border-top:1px solid #ffffff24;font-size:.9rem}
.fuss__unten p{margin:0}
.fuss__unten nav{display:flex;gap:var(--a3) var(--a5);flex-wrap:wrap}
.fuss__unten nav a{padding-block:.5rem}

/* Deko: dezent hinter dem Text, auf Mobil aus */
.kugelgrund{position:fixed;top:50%;left:50%;z-index:0;width:min(78vw,700px);transform:translate(-50%,-50%);opacity:.16;pointer-events:none;-webkit-mask-image:radial-gradient(farthest-side,#000 62%,#0000 100%);mask-image:radial-gradient(farthest-side,#000 62%,#0000 100%)}
.kopf,main,.fuss{position:relative;z-index:1}
.muster{position:absolute;right:0;bottom:0;width:240px;height:240px;opacity:.18;pointer-events:none;background-image:linear-gradient(135deg,transparent 46%,#fff 46%,#fff 54%,transparent 54%);background-size:22px 22px;-webkit-mask-image:linear-gradient(315deg,#000 10%,#0000 65%);mask-image:linear-gradient(315deg,#000 10%,#0000 65%)}
@media (max-width:720px){.kugelgrund,.muster{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,::before,::after{transition-duration:.01ms!important}}

/* Unterseiten (Impressum, Datenschutz) */
.kopf__zurueck{margin-left:auto;font-size:.95rem;font-weight:600;text-decoration:none;white-space:nowrap}
.rechtstext{max-width:var(--breite-text)}
.rechtstext h2{font-size:clamp(1.2rem,2.2vw,1.45rem);line-height:1.3;margin:var(--a7) 0 var(--a3)}
.rechtstext h2:first-of-type{margin-top:var(--a6)}
.rechtstext address{font-style:normal}