:root{
  --navy:#1F3864; --navy-d:#152744; --navy-l:#2E5090;
  --anthrazit:#22272E; --gelb:#FFC107; --gelb-d:#E0A800;
  --ink:#1A1D21; --grau:#5C6570; --grau-l:#8A929C;
  --linie:#E2E7EF; --bg:#FFFFFF; --bg-alt:#F5F7FB;
  --radius:12px;
  --schatten:0 1px 2px rgba(24,32,48,.05), 0 8px 24px rgba(24,32,48,.07);
  --schatten-l:0 1px 2px rgba(24,32,48,.04);
  --font:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:78px}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:var(--navy-l); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2; margin:0 0 .5em; color:var(--anthrazit); font-weight:700; letter-spacing:-.015em}
h1{font-size:clamp(2rem,5.2vw,3.4rem)}
h2{font-size:clamp(1.55rem,3.4vw,2.4rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.wrap{max-width:1180px; margin:0 auto; padding:0 22px}
.eng{max-width:840px}
section{padding:clamp(56px,8vw,104px) 0}
.alt{background:var(--bg-alt)}
.kicker{display:inline-flex; align-items:center; gap:9px; font-size:.78rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--navy-l); margin-bottom:14px}
.kicker::before{content:""; width:26px; height:3px; border-radius:2px; background:var(--gelb)}
.lead{font-size:clamp(1.05rem,1.9vw,1.22rem); color:var(--grau); max-width:66ch}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:10px; border:2px solid transparent; font-size:1rem;
  font-weight:700; cursor:pointer; text-decoration:none!important; font-family:inherit;
  line-height:1.2; transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.btn:active{transform:translateY(1px)}
.btn-gelb{background:var(--gelb); color:#231A00; box-shadow:0 4px 14px rgba(255,193,7,.32)}
.btn-gelb:hover{background:var(--gelb-d)}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-l)}
.btn-rand{border-color:rgba(255,255,255,.42); color:#fff}
.btn-rand:hover{background:rgba(255,255,255,.12)}
.btn-rand-d{border-color:var(--linie); color:var(--anthrazit); background:#fff}
.btn-rand-d:hover{border-color:var(--navy); color:var(--navy)}
.btn-gross{padding:18px 34px; font-size:1.06rem}
.btn svg{flex:none}
.btn-reihe{display:flex; gap:13px; flex-wrap:wrap; margin-top:30px}
header{position:fixed; inset:0 0 auto 0; z-index:100; background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:.25s}
header.fest{border-bottom-color:var(--linie); box-shadow:0 2px 20px rgba(24,32,48,.07)}
.kopf{display:flex; align-items:center; gap:26px; height:74px}
.marke{display:flex; align-items:center; gap:11px; text-decoration:none!important; flex:none}
.marke .zeichen{width:40px; height:40px; border-radius:9px; background:var(--navy);
  display:grid; place-items:center; flex:none}
.marke .txt strong{display:block; font-size:1.06rem; color:var(--anthrazit); line-height:1.15}
.marke .txt span{display:block; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--grau-l); font-weight:600}
nav.haupt{display:flex; gap:3px; margin-left:auto}
nav.haupt a{padding:9px 14px; border-radius:8px; color:var(--anthrazit); font-size:.95rem;
  font-weight:600; text-decoration:none!important}
nav.haupt a:hover{background:var(--bg-alt); color:var(--navy)}
.kopf-cta{display:flex; gap:10px; align-items:center}
.kopf-tel{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--anthrazit);
  font-size:.98rem; white-space:nowrap}
.kopf-tel svg{color:var(--navy)}
.burger{display:none; width:44px; height:44px; border:1px solid var(--linie); background:#fff;
  border-radius:9px; cursor:pointer; padding:0}
.burger span{display:block; width:19px; height:2px; background:var(--anthrazit); margin:4px auto;
  border-radius:2px; transition:.2s}
.burger.auf span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.auf span:nth-child(2){opacity:0}
.burger.auf span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hero{position:relative; color:#fff; overflow:hidden;
  padding:calc(74px + clamp(54px,8vw,92px)) 0 clamp(60px,8vw,100px);
  background:radial-gradient(1100px 520px at 78% -10%, rgba(46,80,144,.55), transparent 62%),
             linear-gradient(158deg, #1B2430 0%, #1F3864 58%, #152744 100%)}
.hero::after{content:""; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(900px 500px at 76% 12%, #000 10%, transparent 72%);
  mask-image:radial-gradient(900px 500px at 76% 12%, #000 10%, transparent 72%)}
.hero .wrap{position:relative; z-index:2}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(30px,5vw,64px); align-items:center}
.hero h1{color:#fff}
.hero h1 em{font-style:normal; color:var(--gelb)}
.hero .lead{color:#CBD4E2; font-size:clamp(1.06rem,2vw,1.26rem); margin-top:6px}
.hero-chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:30px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:100px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  font-size:.87rem; font-weight:600; color:#E8EDF5}
.chip svg{color:var(--gelb); flex:none}
.hero-karte{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:16px; padding:28px; backdrop-filter:blur(8px)}
.hero-karte h3{color:#fff; font-size:1.12rem; margin-bottom:6px}
.hero-karte p{color:#B9C3D2; font-size:.95rem}
.hero-karte .zeile{display:flex; align-items:center; gap:13px; padding:13px 0;
  border-top:1px solid rgba(255,255,255,.13)}
.hero-karte .zeile:first-of-type{border-top:0}
.hero-karte .zeile .ic{width:38px; height:38px; border-radius:9px; background:rgba(255,193,7,.16);
  display:grid; place-items:center; flex:none; color:var(--gelb)}
.hero-karte .zeile b{display:block; color:#fff; font-size:.97rem}
.hero-karte .zeile small{color:#A9B4C4; font-size:.83rem}
.band{background:var(--navy-d); color:#fff}
.band-in{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.1)}
.band-el{background:var(--navy-d); padding:26px 22px; text-align:center}
.band-el b{display:block; font-size:1.5rem; color:var(--gelb); line-height:1.15}
.band-el span{font-size:.87rem; color:#B9C3D2}
.bildbox{position:relative; border-radius:var(--radius); overflow:hidden; min-height:260px;
  background:linear-gradient(140deg, #223049, #2E5090 55%, #1F3864);
  display:grid; place-items:center; color:#fff; box-shadow:var(--schatten)}
.bildbox::after{content:""; position:absolute; inset:0; opacity:.2;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:38px 38px}
.bildbox .inhalt{position:relative; z-index:2; text-align:center; padding:26px}
.bildbox svg{opacity:.9; margin:0 auto 10px}
.bildbox .titel{font-weight:700; font-size:1rem}
.bildbox .hinweis{font-size:.79rem; color:#B9C3D2; margin-top:5px}
.bildbox.hoch{min-height:400px}
.karten{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.karte{background:#fff; border:1px solid var(--linie); border-radius:var(--radius); padding:26px;
  box-shadow:var(--schatten-l); transition:.18s}
.karte:hover{transform:translateY(-3px); box-shadow:var(--schatten); border-color:#CFD8E6}
.karte .ic{width:46px; height:46px; border-radius:11px; background:#EDF2FB; color:var(--navy);
  display:grid; place-items:center; margin-bottom:16px}
.karte h3{font-size:1.08rem; margin-bottom:8px}
.karte p{font-size:.95rem; color:var(--grau); margin:0}
.karte .nutzen{display:block; margin-top:13px; padding-top:13px; border-top:1px dashed var(--linie);
  font-size:.89rem; color:var(--navy); font-weight:600}
.ablauf{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:s}
.schritt{position:relative; padding-top:16px}
.schritt::before{counter-increment:s; content:counter(s); display:grid; place-items:center;
  width:52px; height:52px; border-radius:14px; background:var(--navy); color:#fff;
  font-size:1.3rem; font-weight:800; margin-bottom:16px}
.schritt::after{content:""; position:absolute; top:42px; left:62px; right:-14px; height:2px;
  background:repeating-linear-gradient(90deg, var(--linie) 0 7px, transparent 7px 14px)}
.schritt:last-child::after{display:none}
.schritt h3{font-size:1.05rem}
.schritt p{font-size:.94rem; color:var(--grau); margin:0}
.assi{background:#fff; border:1px solid var(--linie); border-radius:16px;
  box-shadow:var(--schatten); overflow:hidden; max-width:920px; margin:0 auto}
.assi-kopf{background:linear-gradient(135deg,var(--navy),var(--navy-l)); color:#fff; padding:26px 30px}
.assi-kopf h3{color:#fff; margin:0 0 4px; font-size:1.28rem}
.assi-kopf p{margin:0; color:#C3CEE0; font-size:.94rem}
.fortschritt{display:flex; gap:6px; margin-top:18px}
.fortschritt i{flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.22)}
.fortschritt i.an{background:var(--gelb)}
.assi-koerper{padding:30px}
.frage{display:none}
.frage.an{display:block; animation:auf .22s ease}
@keyframes auf{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
.frage > h4{font-size:1.16rem; margin:0 0 6px; color:var(--anthrazit)}
.frage > .hilf{font-size:.9rem; color:var(--grau); margin:0 0 20px}
.wahl{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:11px}
.opt{display:flex; align-items:flex-start; gap:12px; padding:15px 17px; border:2px solid var(--linie);
  border-radius:11px; cursor:pointer; background:#fff; transition:.14s; text-align:left;
  font-family:inherit; font-size:1rem; color:var(--ink); width:100%}
.opt:hover{border-color:var(--navy-l); background:#F8FAFE}
.opt.gewaehlt{border-color:var(--navy); background:#EDF2FB; box-shadow:inset 0 0 0 1px var(--navy)}
.opt .haken{width:22px; height:22px; border-radius:6px; border:2px solid var(--linie); flex:none;
  display:grid; place-items:center; margin-top:1px; background:#fff; color:#fff}
.opt.gewaehlt .haken{background:var(--navy); border-color:var(--navy)}
.opt .haken svg{opacity:0}
.opt.gewaehlt .haken svg{opacity:1}
.opt b{display:block; font-size:.99rem; line-height:1.3}
.opt small{display:block; color:var(--grau); font-size:.85rem; margin-top:3px}
.feld{margin-bottom:16px}
.feld label{display:block; font-size:.88rem; font-weight:600; color:var(--anthrazit); margin-bottom:6px}
.feld input,.feld select,.feld textarea{width:100%; padding:13px 15px; border:2px solid var(--linie);
  border-radius:10px; font-family:inherit; font-size:1rem; background:#fff; color:var(--ink)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none; border-color:var(--navy-l)}
.feld textarea{min-height:120px; resize:vertical}
.feld .mini{font-size:.82rem; color:var(--grau-l); margin-top:5px}
.assi-fuss{display:flex; gap:11px; align-items:center; padding:20px 30px;
  border-top:1px solid var(--linie); background:var(--bg-alt)}
.assi-fuss .luft{flex:1}
.assi-schritt{font-size:.85rem; color:var(--grau); font-weight:600}
.ergebnis{display:none}
.ergebnis.an{display:block}
.preisbox{background:linear-gradient(135deg,#1F3864,#2E5090); color:#fff; border-radius:14px;
  padding:28px 30px; text-align:center; margin-bottom:22px}
.preisbox .lb{font-size:.84rem; letter-spacing:.11em; text-transform:uppercase;
  color:#B9C6DC; font-weight:700}
.preisbox .wert{font-size:clamp(1.9rem,5vw,2.7rem); font-weight:800; color:var(--gelb);
  margin:8px 0 3px; letter-spacing:-.02em}
.preisbox .zus{font-size:.9rem; color:#C3CEE0}
.erg-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:20px}
.erg-karte{border:1px solid var(--linie); border-radius:12px; padding:20px}
.erg-karte h4{font-size:.79rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grau); margin:0 0 12px}
.erg-karte ul{margin:0; padding-left:19px; font-size:.94rem}
.erg-karte li{margin-bottom:6px}
.erg-karte li::marker{color:var(--navy-l)}
.rechtlich{background:#FFF9E8; border:1px solid #F0DCA0; border-left:4px solid var(--gelb);
  border-radius:10px; padding:17px 20px; font-size:.9rem; color:#5B4A12; margin-bottom:20px}
.rechtlich b{color:#3F330B}
.ueber{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,60px); align-items:center}
.zitat{border-left:4px solid var(--gelb); padding:4px 0 4px 22px; margin:26px 0;
  font-size:1.12rem; color:var(--anthrazit); font-style:italic}
.merkmale{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px}
.merkmal{display:flex; gap:12px; align-items:flex-start}
.merkmal .ic{width:34px; height:34px; border-radius:9px; background:#EDF2FB; color:var(--navy);
  display:grid; place-items:center; flex:none}
.merkmal b{display:block; font-size:.97rem}
.merkmal small{color:var(--grau); font-size:.87rem}
.kontakt-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,50px)}
.kontakt-weg{display:flex; gap:15px; align-items:flex-start; padding:20px; border:1px solid var(--linie);
  border-radius:12px; background:#fff; margin-bottom:13px; text-decoration:none!important; transition:.15s}
.kontakt-weg:hover{border-color:var(--navy); box-shadow:var(--schatten-l)}
.kontakt-weg .ic{width:46px; height:46px; border-radius:11px; background:var(--navy); color:#fff;
  display:grid; place-items:center; flex:none}
.kontakt-weg b{display:block; font-size:1.06rem; color:var(--anthrazit)}
.kontakt-weg small{color:var(--grau); font-size:.89rem}
.formular{background:#fff; border:1px solid var(--linie); border-radius:14px; padding:28px;
  box-shadow:var(--schatten-l)}
.feld-paar{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.datei{border:2px dashed var(--linie); border-radius:11px; padding:20px; text-align:center;
  color:var(--grau); font-size:.9rem; cursor:pointer; transition:.15s; background:var(--bg-alt)}
.datei:hover{border-color:var(--navy-l); color:var(--navy)}
.pflicht{color:#C0392B}
footer{background:var(--anthrazit); color:#AEB7C3; padding:64px 0 26px; font-size:.93rem}
footer h4{color:#fff; font-size:.99rem; margin-bottom:14px}
footer a{color:#AEB7C3}
footer a:hover{color:var(--gelb)}
.fuss-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.15fr; gap:34px;
  padding-bottom:34px; border-bottom:1px solid #3A424E}
.fuss-liste{list-style:none; margin:0; padding:0}
.fuss-liste li{margin-bottom:8px}
.fuss-unten{display:flex; justify-content:space-between; gap:18px; padding-top:22px;
  flex-wrap:wrap; font-size:.86rem; color:#7D8794}
.orte{font-size:.86rem; color:#7D8794; line-height:1.8}
.rechtstext{max-width:840px}
.rechtstext h3{margin-top:26px}
.rechtstext p,.rechtstext li{font-size:.94rem; color:var(--grau)}
.rufleiste{display:none; position:fixed; inset:auto 0 0 0; z-index:99; background:#fff;
  border-top:1px solid var(--linie); padding:10px 14px; gap:10px;
  box-shadow:0 -4px 20px rgba(24,32,48,.1)}
.rufleiste .btn{flex:1; padding:14px 10px; font-size:.95rem}
@media(max-width:1000px){
  .hero-grid,.ueber,.kontakt-grid{grid-template-columns:1fr}
  .karten{grid-template-columns:repeat(2,1fr)}
  .ablauf{grid-template-columns:repeat(2,1fr)}
  .schritt::after{display:none}
  .band-in{grid-template-columns:repeat(2,1fr)}
  .fuss-grid{grid-template-columns:1fr 1fr}
  .erg-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  body{font-size:16px; padding-bottom:72px}
  nav.haupt{position:fixed; inset:74px 0 auto 0; background:#fff; flex-direction:column; gap:0;
    padding:12px 18px 22px; border-bottom:1px solid var(--linie); display:none;
    box-shadow:0 12px 26px rgba(24,32,48,.11); max-height:calc(100vh - 74px); overflow:auto}
  nav.haupt.auf{display:flex}
  nav.haupt a{padding:14px 6px; border-bottom:1px solid var(--linie); border-radius:0; font-size:1.02rem}
  .burger{display:block}
  .kopf-cta .btn,.kopf-tel{display:none}
  .karten,.ablauf,.merkmale,.feld-paar,.band-in,.fuss-grid{grid-template-columns:1fr}
  .rufleiste{display:flex}
  section{padding:52px 0}
  .assi-koerper,.assi-kopf,.assi-fuss{padding-left:20px; padding-right:20px}
  .formular{padding:22px}
  .hero{padding-top:calc(74px + 44px)}
}
@media print{header,.rufleiste,.btn,nav{display:none!important} body{font-size:11pt}}

/* ------------------------------------------------- Unterseiten und Teaser */
.seitenkopf{background:linear-gradient(158deg,#1B2430 0%,#1F3864 58%,#152744 100%); color:#fff;
  padding:calc(74px + 54px) 0 54px; position:relative; overflow:hidden}
.seitenkopf::after{content:""; position:absolute; inset:0; opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(700px 380px at 80% 10%, #000 10%, transparent 72%);
  mask-image:radial-gradient(700px 380px at 80% 10%, #000 10%, transparent 72%)}
.seitenkopf .wrap{position:relative; z-index:2}
.seitenkopf h1{color:#fff; margin-bottom:.3em}
.seitenkopf .lead{color:#CBD4E2}
.brotkrumen{font-size:.85rem; color:#9FADC2; margin-bottom:14px}
.brotkrumen a{color:#9FADC2}
.brotkrumen a:hover{color:var(--gelb)}
.teaser{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.teaser a{display:block; background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  padding:26px; text-decoration:none!important; color:var(--ink); box-shadow:var(--schatten-l); transition:.18s}
.teaser a:hover{transform:translateY(-3px); box-shadow:var(--schatten); border-color:#CFD8E6}
.teaser .ic{width:46px; height:46px; border-radius:11px; background:#EDF2FB; color:var(--navy);
  display:grid; place-items:center; margin-bottom:14px}
.teaser h3{font-size:1.1rem; margin-bottom:6px}
.teaser p{font-size:.94rem; color:var(--grau); margin:0 0 12px}
.teaser .mehr{font-weight:700; color:var(--navy); font-size:.93rem}
nav.haupt a.aktiv{background:#EDF2FB; color:var(--navy)}
.preisgrund{background:var(--bg-alt); border:1px solid var(--linie); border-radius:12px;
  padding:18px 20px; font-size:.9rem; color:var(--grau); margin-top:22px}
.preisgrund b{color:var(--anthrazit)}
.preisgrund table{width:100%; margin-top:10px; font-size:.88rem}
.preisgrund th,.preisgrund td{border:1px solid var(--linie); padding:6px 9px; text-align:left}
.preisgrund th{background:var(--navy); color:#fff; font-weight:600}
.preisgrund td.num{text-align:right; white-space:nowrap}
@media(max-width:1000px){.teaser{grid-template-columns:1fr}}