:root{--g:#F3F1ED;--p:#FFFDF8;--t:#171418;--t2:#585557;--m:#6D2D68;--mh:#5E295A;--mt:#FFFFFF;--ms:#EDE4E7;--l:#DCD8D2;--w:#1B1F3B;--ok:#2F7A4C;--f:#B42318;--fh:#FDECEA;--wa:#7A4A06;--wh:#FDF1D8;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--g:#14141A;--p:#212026;--t:#E8E4E0;--t2:#B5B2B0;--m:#B795C2;--mh:#C3A6CC;--mt:#14141A;--ms:#312B38;--l:#3A3840;--w:#E8E4E0;--ok:#5FC468;--f:#E86660;--fh:#2E1917;--wa:#E8B84F;--wh:#2E2617}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--g);color:var(--t);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--m)}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--m);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.springen{position:absolute;inset-inline-start:8px;top:-60px;background:var(--p);padding:10px 14px;border-radius:8px;z-index:10}
.springen:focus{top:8px}
.rahmen{max-width:1200px;margin:0 auto;padding-inline:16px}
@media (min-width:768px){.rahmen{padding-inline:32px}}
@media (min-width:1280px){.rahmen{padding-inline:48px}}

/* Kopf */
.kopf{position:sticky;top:0;z-index:5;background:var(--p);border-bottom:1px solid var(--l)}
.kopf .rahmen{display:flex;align-items:center;gap:12px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;color:var(--w);text-decoration:none;min-height:44px}
.logo svg{width:30px;height:27px;color:var(--m)}
.logo span{font-size:17px;font-weight:600;letter-spacing:.3em}
.nav{display:none;gap:4px;margin-inline-start:auto}
.nav a{color:var(--t);text-decoration:none;font-size:15px;padding:0 12px;min-height:44px;display:flex;align-items:center;border-radius:8px}
.nav a[aria-current="page"]{background:var(--ms);font-weight:700}
.sprache{color:var(--t2);font-size:14px;min-height:44px;min-width:44px;display:none;align-items:center;justify-content:center;text-decoration:none}
.kopf .knopf{display:none}
.menue{margin-inline-start:auto;position:relative}
.menue summary{list-style:none;width:44px;height:44px;border:1px solid var(--l);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.menue summary::-webkit-details-marker{display:none}
.menue summary svg{width:20px;height:20px}
.menue[open] .klappe{display:flex}
.klappe{display:none;position:absolute;inset-inline-end:0;top:52px;flex-direction:column;background:var(--p);border:1px solid var(--l);border-radius:12px;padding:8px;min-width:240px;box-shadow:0 8px 28px rgba(0,0,0,.14)}
.klappe a{color:var(--t);text-decoration:none;min-height:44px;display:flex;align-items:center;padding:0 12px;border-radius:8px}
.klappe .knopf{color:var(--mt);margin-top:6px}
@media (min-width:1024px){.nav{display:flex}.sprache{display:flex}.kopf .knopf{display:inline-flex}.menue{display:none}}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:10px;font-weight:700;font-size:16px;text-decoration:none;background:var(--m);color:var(--mt);border:0;cursor:pointer;font-family:inherit;white-space:nowrap}
.knopf.zwei{background:transparent;color:var(--t);border:1px solid var(--l)}
.knopf.klein{min-height:44px;font-size:15px;padding:0 18px}
@media (hover:hover){.knopf:hover{background:var(--mh)}.knopf.zwei:hover{background:var(--ms)}.nav a:hover,.klappe a:hover{background:var(--ms)}}
.reihe{display:flex;gap:12px;flex-wrap:wrap}

/* Held */
.held{display:grid;gap:28px;padding-block:36px 28px;align-items:center}
@media (min-width:1024px){.held{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;padding-block:72px 56px}}
.kicker{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--m);margin:0 0 12px}
h1{font-size:clamp(34px,6vw,56px);line-height:1.06;letter-spacing:-.02em;margin:0 0 18px}
.lead{font-size:clamp(17px,2vw,19px);line-height:1.55;color:var(--t2);margin:0 0 26px;max-width:36em}
.kurz{margin:20px 0 0;font-size:14px;color:var(--t2)}
.held .reihe .knopf{flex:1 1 160px}
@media (min-width:768px){.held .reihe .knopf{flex:0 0 auto}}
.module{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:var(--p);border:1px solid var(--l);border-radius:16px;padding:14px}
@media (min-width:768px){.module{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:20px}}
.module div{border:1px solid var(--l);border-radius:12px;padding:10px;display:flex;flex-direction:row;align-items:center;gap:8px;font-weight:700;font-size:14px;min-height:52px;min-width:0;hyphens:manual}
@media (min-width:768px){.module div{font-size:15px}}
@media (min-width:768px){.module div{flex-direction:column;align-items:flex-start;padding:14px;gap:8px}}
.module svg{width:24px;height:24px;color:var(--m);flex:0 0 24px}
.module .mitte{grid-column:1 / -1;width:100%;order:-1;background:var(--ms);border-color:transparent;flex-direction:row;align-items:center;justify-content:center;letter-spacing:.24em;color:var(--w)}
@media (min-width:768px){.module .mitte{order:0;flex-direction:row;align-items:center}}

/* Abschnitte */
.abschnitt{padding-block:36px;border-top:1px solid var(--l)}
@media (min-width:1024px){.abschnitt{padding-block:56px}}
h2{font-size:clamp(25px,3.4vw,34px);letter-spacing:-.01em;line-height:1.2;margin:0 0 8px}
.unter{color:var(--t2);font-size:17px;margin:0 0 26px;max-width:42em}
.raster{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.raster.drei{grid-template-columns:repeat(3,minmax(0,1fr))}.raster.vier{grid-template-columns:repeat(4,minmax(0,1fr))}}
.karte{background:var(--p);border:1px solid var(--l);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px}
.karte h3{margin:0;font-size:19px;display:flex;gap:10px;align-items:center}
.karte h3 svg{width:22px;height:22px;color:var(--m);flex:0 0 22px}
.karte ul{margin:0;padding-inline-start:18px;color:var(--t2);font-size:15px;line-height:1.6}
.karte p{margin:0;color:var(--t2);font-size:15px;line-height:1.55}
.karte .mehr{color:var(--m);font-weight:700;text-decoration:none;min-height:44px;display:flex;align-items:center;margin-top:auto}
.vertrauen{display:flex;flex-direction:column;gap:6px}
.vertrauen svg{width:26px;height:26px;color:var(--m)}
.vertrauen b{font-size:17px}
.vertrauen span{color:var(--t2);font-size:15px;line-height:1.5}
.preis{background:var(--p);border:1px solid var(--l);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:10px}
.preis.hervor{border:2px solid var(--m)}
.preis small{font-size:13px;font-weight:700;color:var(--m);letter-spacing:.04em;min-height:18px}
.preis h3{margin:0;font-size:19px}
.betrag{font-size:36px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.betrag span{display:block;font-size:15px;font-weight:500;color:var(--t2);letter-spacing:0;margin-top:2px}
.preis p{margin:0;color:var(--t2);font-size:14.5px;line-height:1.5}
.preis .knopf{margin-top:auto}
.hinweis{margin:18px 0 0;color:var(--t2);font-size:14px}
.schritt i{font-style:normal;display:inline-flex;width:32px;height:32px;border-radius:50%;background:var(--ms);color:var(--m);font-weight:800;align-items:center;justify-content:center}
.liste{display:grid;gap:12px 32px;margin:0;padding:0;list-style:none}
@media (min-width:768px){.liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
.liste li{display:flex;gap:10px;font-size:16px;line-height:1.5}
.liste li::before{content:"";flex:0 0 8px;height:8px;margin-top:9px;border-radius:50%;background:var(--m)}
.buchung{background:var(--p);border:1px solid var(--l);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px}
.buchung .felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.buchung .wert{border:1px solid var(--l);border-radius:10px;padding:8px 12px;min-height:44px;font-size:14px;display:flex;flex-direction:column;justify-content:center}
.buchung .wert small{color:var(--t2);font-size:12px}
.zeiten{display:flex;gap:8px;flex-wrap:wrap}
.zeiten span{border:1px solid var(--l);border-radius:999px;padding:0 14px;min-height:44px;display:flex;align-items:center;font-weight:600;font-size:14px}
.zeiten span.an{background:var(--m);color:var(--mt);border-color:var(--m)}
.buchung p{margin:0;font-size:13px;color:var(--t2)}
.fragen details{border-bottom:1px solid var(--l);padding-block:4px}
.fragen summary{min-height:48px;display:flex;align-items:center;font-weight:700;font-size:16px;cursor:pointer}
.fragen p{margin:0 0 14px;color:var(--t2);font-size:15px;line-height:1.6;max-width:46em}

/* Fuß */
.fuss{background:var(--p);border-top:1px solid var(--l);padding-block:28px;font-size:14.5px}
.fuss .rahmen{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fuss .marke{grid-column:1 / -1}
@media (min-width:1024px){.fuss .rahmen{grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr))}.fuss .marke{grid-column:auto}}
.fuss b.zweit{margin-top:14px}
section[id]{scroll-margin-top:72px}

/* Landingpages, Ratgeber, Vergleich (Artboard „Website: Auffindbarkeit“) */
.pfad ol{list-style:none;margin:0;padding:12px 0 0;display:flex;flex-wrap:wrap;column-gap:6px;font-size:14px;color:var(--t2)}
.pfad li{display:flex;align-items:center;gap:6px;min-height:28px}
.pfad li+li::before{content:"›"}
.pfad a{color:var(--t2);display:flex;align-items:center;min-height:44px}
.held.schmal{padding-block:20px 8px}
@media (min-width:1024px){.held.schmal{grid-template-columns:minmax(0,1fr);padding-block:32px 16px}}
.eckdaten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.eckdaten div{background:var(--p);border:1px solid var(--l);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.eckdaten b{font-size:17px;line-height:1.3;hyphens:auto;overflow-wrap:break-word}
.eckdaten span,.weiter span,.schrittliste span{color:var(--t2);font-size:14.5px;line-height:1.5}
.text p{font-size:17px;line-height:1.65;max-width:46em;margin:0 0 14px}
.schrittliste{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:12px}
.schrittliste li{counter-increment:s;background:var(--p);border:1px solid var(--l);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px}
.schrittliste li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--ms);color:var(--m);font-weight:800;display:flex;align-items:center;justify-content:center}
.weiter{display:grid;gap:12px}
.weiter a{display:flex;flex-direction:column;gap:4px;min-height:56px;padding:16px 18px;border:1px solid var(--l);border-radius:12px;background:var(--p);color:var(--t);text-decoration:none}
.tabelle{display:none}
.vergleichskarten{display:grid;gap:12px}
@media (min-width:768px){.schrittliste,.weiter{grid-template-columns:repeat(2,minmax(0,1fr))}.tabelle{display:block}.vergleichskarten{display:none}}
@media (min-width:1024px){.schrittliste,.weiter{grid-template-columns:repeat(3,minmax(0,1fr))}.weiter.gross{grid-template-columns:repeat(2,minmax(0,1fr))}.weiter.vier{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (hover:hover){.weiter a:hover{border-color:var(--m)}}
.grenze{background:var(--p);border:1px dashed var(--t2);border-radius:14px;padding:20px}
.grenze h2{font-size:20px}
.grenze p{margin:0;color:var(--t2);line-height:1.6;max-width:52em}
.band{background:var(--ms);border-radius:16px;padding:24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.band b{font-size:20px}
.artikel{max-width:760px;padding-block:20px 8px}
.artikel h1{font-size:clamp(30px,4.6vw,46px)}
.artikel h2{font-size:clamp(22px,2.8vw,28px);margin:36px 0 10px;scroll-margin-top:84px}
.artikel p,.artikel li{font-size:17px;line-height:1.7}
.artikel p{margin:0 0 14px}
.artikel ul,.quellen ol,.inhaltsliste ol{padding-inline-start:22px;margin:0 0 14px}
.stand{color:var(--t2);font-size:14px;margin:0 0 18px}
.kurzgesagt{background:var(--ms);border-radius:12px;padding:16px 18px;margin:0 0 22px;font-size:17px;line-height:1.6}
.inhaltsliste,.hilfe{background:var(--p);border:1px solid var(--l);border-radius:12px;padding:14px 18px}
.inhaltsliste a{display:inline-flex;align-items:center;min-height:44px}
.hilfe{margin-top:36px;padding:20px}
.hilfe h2{margin-top:0}
.hilfe .knopf{white-space:normal;text-align:center;padding-block:10px}
.quellen li{font-size:15px;color:var(--t2);line-height:1.5;margin-bottom:8px;overflow-wrap:anywhere}
.tabelle{overflow-x:auto;border:1px solid var(--l);border-radius:14px;background:var(--p)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:12px 14px;text-align:start;vertical-align:top;border-bottom:1px solid var(--l)}
thead th{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--t2)}
td.mev{font-weight:700;background:var(--ms)}
.vergleichskarten dl{margin:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:8px 12px;font-size:14.5px}
.vergleichskarten dt{color:var(--t2)}
.vergleichskarten dd{margin:0}
.fuss b{display:block;margin-bottom:4px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.fuss a{display:flex;min-height:44px;align-items:center;color:var(--t);text-decoration:none}
.fuss p{color:var(--t2);margin:8px 0 0;line-height:1.5}

/* Formulare */
.formular{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.formular{grid-template-columns:repeat(6,minmax(0,1fr))}.b6{grid-column:span 6}.b4{grid-column:span 4}.b3{grid-column:span 3}.b2{grid-column:span 2}}
.f{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600}
.f input,.f select,.f textarea{min-height:48px;border:1px solid var(--l);border-radius:10px;background:var(--p);color:var(--t);padding:10px 12px;font-size:16px;font-family:inherit;width:100%}
.f textarea{min-height:150px;resize:vertical}
.f small{font-weight:400;color:var(--t2);font-size:13px}
.f.fehler input,.f.fehler select,.f.fehler textarea{border:2px solid var(--f)}
.f .meldung{color:var(--f);font-weight:600;font-size:13px}
.haken{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;min-height:44px;padding-block:4px}
.haken input{width:24px;height:24px;margin:0;flex:0 0 24px;accent-color:var(--m)}
.haken.fehler span{color:var(--f)}
.falle{position:absolute;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}
.melde{border-radius:12px;padding:14px 16px;margin:0 0 18px;font-size:15px;line-height:1.5}
.melde.fehler{background:var(--fh);color:var(--f);font-weight:600}
.melde.test{background:var(--wh);color:var(--wa);font-weight:700}
.melde.info{background:var(--ms);color:var(--t)}

/* Jetzt starten */
.start{display:grid;gap:24px;padding-block:28px 48px;align-items:start}
@media (min-width:1024px){.start{grid-template-columns:minmax(0,1fr) 360px;gap:40px}}
.schritte{display:none;gap:8px;margin:0 0 24px;padding:0;list-style:none}
@media (min-width:768px){.schritte{display:flex}}
.schritte li{flex:1;border-top:4px solid var(--l);padding-top:8px;font-size:14px;color:var(--t2)}
.schritte li.an{border-color:var(--m);color:var(--t);font-weight:700}
.schritte li.fertig{border-color:var(--m)}
.handyschritt{font-size:14px;color:var(--t2);margin:0 0 12px}
.kurzpreis{margin:0 0 14px;font-weight:700;font-size:15px}
@media (min-width:1024px){.kurzpreis{display:none}}
.f input,.f select,.f textarea,.haken input,legend{scroll-margin-top:96px}
@media (min-width:768px){.handyschritt{display:none}}
.stufe{border:0;margin:0 0 28px;padding:0;min-width:0}
.stufe legend{font-size:clamp(25px,3.4vw,34px);font-weight:700;letter-spacing:-.01em;margin:0 0 6px;padding:0}
.js .stufe[hidden]{display:none}
.wahl{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.wahl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.paket{display:flex;gap:12px;align-items:flex-start;background:var(--p);border:1px solid var(--l);border-radius:12px;padding:14px;cursor:pointer}
.paket:has(input:checked){border:2px solid var(--m);padding:13px}
.paket input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--m);flex:0 0 22px}
.paket b{display:block;font-size:16px}
.paket span{color:var(--t2);font-size:14px;line-height:1.45;display:block}
.paket em{font-style:normal;display:block;font-weight:700;color:var(--t);margin-top:4px;font-size:14.5px}
.zaehler{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;margin-top:20px;max-width:220px}
.zaehler input{min-height:48px;border:1px solid var(--l);border-radius:10px;background:var(--p);color:var(--t);padding:0 12px;font-size:16px;width:100%}
.mandat{font-size:13px;color:var(--t2);line-height:1.5;background:var(--p);border:1px solid var(--l);border-radius:10px;padding:12px;margin:0}
.weg{display:flex;flex-direction:column;gap:10px}
.aktionen{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap}
@media (max-width:767px){.aktionen{position:sticky;bottom:0;background:var(--p);margin-inline:-16px;padding:12px 16px;border-top:1px solid var(--l)}.aktionen .knopf{flex:1}}
.zusammen{background:var(--p);border:1px solid var(--l);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
@media (min-width:1024px){.zusammen{position:sticky;top:88px}}
.zusammen h2{margin:0;font-size:14px;color:var(--t2);letter-spacing:.04em;text-transform:uppercase}
.zeile{display:flex;justify-content:space-between;gap:12px}
.zeile span{color:var(--t2)}
.zusammen hr{border:0;border-top:1px solid var(--l);margin:4px 0;width:100%}
.summe{font-size:22px;font-weight:800}
.heute{background:var(--ms);border-radius:10px;padding:10px 12px;font-weight:700}
.mitte{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-block:56px;max-width:620px;margin:0 auto}
.mitte p{margin:0;color:var(--t2);font-size:16px;line-height:1.55}
.mitte .knopf{min-width:min(100%,280px)}
.zeichen{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ms);color:var(--m)}
.zeichen.gut{color:var(--ok)}
.zeichen.schlecht{color:var(--f);background:var(--fh)}
.zeichen svg{width:34px;height:34px}
.fakten{display:grid;grid-template-columns:auto auto;gap:6px 16px;font-size:14.5px;text-align:start;background:var(--p);border:1px solid var(--l);border-radius:12px;padding:14px 18px}
.fakten span{color:var(--t2)}
.dreh{width:44px;height:44px;border-radius:50%;border:4px solid var(--ms);border-top-color:var(--m);animation:dreh 1s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dreh{animation:none}}

/* Kontakt und Recht */
.kontakt{display:grid;gap:24px;padding-block:28px 48px;align-items:start}
@media (min-width:1024px){.kontakt{grid-template-columns:minmax(0,1fr) 340px;gap:48px;padding-block:48px 56px}}
.seitlich{background:var(--p);border:1px solid var(--l);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.seitlich a{font-weight:700;min-height:44px;display:flex;align-items:center;text-decoration:none}
.seitlich span{color:var(--t2);line-height:1.5}
.fein{font-size:13.5px;color:var(--t2);line-height:1.5}
.recht{max-width:760px;padding-block:28px 48px}
@media (min-width:1024px){.recht{padding-block:48px 56px}}
.recht h1{font-size:clamp(28px,4vw,40px)}
.recht h2{font-size:19px;margin:28px 0 8px}
.recht p,.recht li{font-size:16px;line-height:1.65}
.recht p{margin:0 0 10px}
.recht .stand{color:var(--t2);font-size:14px}