/* Layout: Onepager im Stil "freundlich-grafisch": Karten und Knöpfe mit schwarzer Kontur und hartem Versatzschatten, Textmarker in Sonne, Strichsymbole auf Farbflecken, Wellen als Übergänge. Ein helles Erscheinungsbild nach CD, unabhängig vom Gerätemodus. */
@font-face{font-family:"Barlow Condensed";src:url(fonts/BarlowCondensed-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/BarlowCondensed-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/Barlow-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/Barlow-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --gruen:#7ed957;--tanne:#0f3d36;--creme:#f6f3ea;--sonne:#ffc234;--weiss:#ffffff;--schwarz:#000000;
  --gruen-hell:#e6f6dc;--gruen-dunkel:#2a6f0f;--grau:#5c5c5c;--linie:#d9d4c7;--tanne-text:#d3dfdc;--sonne-hell:#fff3d6;
  --display:"Sugo Pro Display","Sugo Display","Barlow Condensed","Arial Narrow",sans-serif;
  --text:Barlow,"Segoe UI",system-ui,sans-serif;
  --kontur:2px solid var(--schwarz);--schatten:5px 5px 0 var(--schwarz);--schatten-klein:3px 3px 0 var(--schwarz);
  --wrap:1120px;--gutter:20px;--section:72px;
  color-scheme:light;
}
@media (min-width:900px){:root{--gutter:40px;--section:104px}}
*{box-sizing:border-box}
body{margin:0;background:var(--weiss);color:var(--schwarz);font-family:var(--text);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;padding-bottom:60px}
@media (min-width:900px){body{font-size:19px;padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
a{color:var(--gruen-dunkel)}
:focus-visible{outline:3px solid var(--schwarz);outline-offset:4px;border-radius:6px}
.dunkel :focus-visible{outline-color:var(--weiss)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.schmal{max-width:760px}
section{padding-block:var(--section);position:relative}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance}
h1,h2{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1.02;letter-spacing:.005em}
h1{font-size:clamp(40px,7vw,70px)}
h2{font-size:clamp(32px,4.8vw,48px)}
h3{font-family:var(--text);font-weight:600;font-size:22px;line-height:1.3}
.zentriert{text-align:center}
.mark{background:var(--sonne);padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ph{border-bottom:2px dashed currentColor}

/* Knöpfe und Etiketten */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--text);font-weight:600;font-size:17px;line-height:1;padding:16px 26px;border-radius:999px;background:var(--weiss);color:var(--schwarz);border:var(--kontur);box-shadow:var(--schatten-klein);text-decoration:none;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--schwarz)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--schwarz)}
.btn.gruen{background:var(--gruen)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;line-height:1;padding:7px 12px;border-radius:999px;background:var(--weiss);border:var(--kontur);white-space:nowrap}
.tag svg{width:14px;height:14px}

/* Kopf */
.top{background:var(--weiss);border-bottom:var(--kontur);position:relative;z-index:2}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.top img{width:172px;height:auto}
.top .btn{padding:11px 18px;font-size:15px}
@media (min-width:900px){.top img{width:200px}}
@media (min-width:1100px){.top img{width:250px}}
@media (max-width:374px){.top img{width:136px}.top .btn{padding:9px 12px;font-size:14px}}

/* Welle */
.welle{display:block;width:100%;height:56px}
@media (min-width:900px){.welle{height:90px}}

/* Hero */
.hero{background:var(--gruen-hell);padding-block:48px 0;overflow:hidden}
.hero .wrap{display:grid;gap:44px;align-items:center}
.hero .txt{display:grid;gap:22px;min-width:0}
.hero .zeile{font-weight:600;font-size:16px}
.hero h1{color:var(--tanne)}
.hero .lead{font-size:clamp(19px,2vw,22px);max-width:34ch}
.hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.hero .weiche{margin:22px 0 0;font-size:17px;color:var(--grau)}
.hero .weiche a{color:var(--schwarz);font-weight:600;text-underline-offset:3px}
.hero .cta .tel{font-weight:600;color:var(--schwarz);text-decoration:none;font-size:19px;font-variant-numeric:tabular-nums}
.bildfleck{position:relative;width:min(100%,460px);aspect-ratio:1;justify-self:center}
.bildfleck .fleck{position:absolute;inset:0;background:var(--gruen);border-radius:58% 42% 52% 48%/46% 55% 45% 54%;transform:rotate(-6deg)}
.bildfleck .foto{position:absolute;inset:8% 6% 6% 8%;border-radius:12px;border:var(--kontur);box-shadow:var(--schatten)}
.bildfleck .tag{position:absolute;left:14%;bottom:3%}
.stoerer{position:absolute;right:-1%;top:2%;width:30%;aspect-ratio:1;border-radius:50%;background:var(--sonne);border:var(--kontur);box-shadow:var(--schatten-klein);display:grid;place-items:center;text-align:center;transform:rotate(8deg);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(15px,2.2vw,20px);line-height:1;padding:8px}
@media (min-width:900px){.hero{padding-top:80px}.hero .wrap{grid-template-columns:1.08fr .92fr;gap:64px}}

/* Foto-Platzhalter */
.foto{background:repeating-linear-gradient(135deg,#e7e3d8 0 14px,#efece4 14px 28px);display:grid;place-items:center;text-align:center;color:var(--grau);font-size:15px;line-height:1.35;padding:12%}
.foto span{background:var(--weiss);padding:6px 10px;border-radius:6px}

/* Problem */
.problem .wrap{display:grid;gap:40px;align-items:center}
.problem .txt{display:grid;gap:18px;min-width:0;max-width:60ch}
.statkarte{background:var(--gruen);border:var(--kontur);box-shadow:var(--schatten);border-radius:14px;padding:30px 28px;display:grid;gap:6px;justify-self:start;width:min(100%,380px)}
.statkarte .zahl{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(72px,11vw,112px);line-height:.88;white-space:nowrap}
.statkarte .einheit{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:28px;line-height:1}
.statkarte .was{font-size:16px;margin-top:6px}
.quelle{font-size:14px;color:var(--grau)}
@media (min-width:900px){.problem .wrap{grid-template-columns:.8fr 1.2fr;gap:72px}.statkarte{justify-self:center}}

/* Leistungen */
.leistungen{background:var(--creme)}
.kopf{display:grid;gap:14px;margin-bottom:48px;justify-items:center;text-align:center}
.kopf p{max-width:52ch}
.drei{display:grid;gap:48px}
.leistung{display:grid;gap:14px;justify-items:center;text-align:center}
.symbol{position:relative;width:132px;height:112px;display:grid;place-items:center}
.symbol .fleck{position:absolute;inset:6px 4px 0 14px;border-radius:58% 42% 50% 50%/52% 45% 55% 48%}
.symbol svg{position:relative;width:84px;height:84px}
.leistung p{max-width:34ch}
@media (min-width:820px){.drei{grid-template-columns:repeat(3,1fr);gap:36px}}

/* Versprechen */
.ehrlich .zitat{position:relative;background:var(--weiss);border:var(--kontur);box-shadow:var(--schatten);border-radius:14px;padding:64px 28px 32px;margin-top:40px;display:grid;gap:18px}
.ehrlich .zeichen{position:absolute;left:50%;top:-34px;transform:translateX(-50%);width:68px;height:68px;border-radius:50%;background:var(--sonne);border:var(--kontur);box-shadow:var(--schatten-klein);display:grid;place-items:center}
.ehrlich .zeichen svg{width:30px;height:30px}
.ehrlich .zitat p{font-size:clamp(20px,2.3vw,25px);line-height:1.5}
.ehrlich .wer{font-size:15px;color:var(--gruen-dunkel);font-weight:600}
@media (min-width:900px){.ehrlich .zitat{padding:72px 64px 44px}}

/* Ablauf */
.ablauf{background:var(--gruen-hell)}
.zeitleiste{list-style:none;margin:0;padding:0;display:grid;gap:34px;position:relative}
.zeitleiste::before{content:"";position:absolute;left:21px;top:24px;bottom:24px;width:3px;background:var(--tanne)}
.zeitleiste li{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;position:relative}
.zeitleiste .nr{width:44px;height:44px;border-radius:50%;background:var(--tanne);color:var(--gruen);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:22px;border:var(--kontur);position:relative}
.zeitleiste h3{display:inline;font-size:21px}
.zeitleiste p{margin-top:6px}

/* Preise */
.zwei{display:grid;gap:36px;margin-top:8px}
.karte{position:relative;background:var(--weiss);border:var(--kontur);box-shadow:var(--schatten);border-radius:14px;padding:38px 28px 30px;display:grid;gap:10px;align-content:start}
.karte > .tag{position:absolute;top:-18px;left:24px}
.karte.gruen{background:var(--gruen)}
.betrag{font-family:var(--display);font-weight:800;font-size:clamp(46px,6vw,62px);line-height:1;font-variant-numeric:tabular-nums}
.betrag small{font-size:.38em;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.hinweis{margin-top:28px;font-size:15px;color:var(--grau);text-align:center}
@media (min-width:760px){.zwei{grid-template-columns:1fr 1fr;gap:32px}}

/* Erfahrung */
.ich{background:var(--sonne-hell)}
.pillen{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pillen li{font-size:15px;font-weight:600;line-height:1;padding:9px 14px;border-radius:999px;background:var(--gruen-hell);border:var(--kontur)}
.gruen-tag{background:var(--gruen)!important}

/* Kontakt */
.kontakt{background:var(--tanne);color:var(--weiss);padding-top:24px}
.kontakt .wrap{display:grid;gap:24px;justify-items:center;text-align:center}
.kontakt h2{color:var(--creme)}
.kontakt h2 .mark{color:var(--schwarz)}
.kontakt .gross{font-family:var(--display);font-weight:800;font-size:clamp(42px,7vw,76px);line-height:1;color:var(--gruen);text-decoration:none;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kontakt .mail{font-size:clamp(20px,2.4vw,26px);color:var(--weiss);font-weight:600;overflow-wrap:anywhere}
.kontakt p{color:var(--tanne-text)}
.fuss{width:100%;border-top:1px solid #2c5a53;margin-top:36px;padding-top:28px;display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between}
.fuss img{width:170px}
.fuss nav{display:flex;gap:24px;font-size:15px}
.fuss a{color:var(--tanne-text)}
.welle-oben{background:var(--weiss)}

/* Anrufleiste mobil */
.anrufleiste{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:10}
.anrufleiste .btn{width:100%;background:var(--gruen);padding:15px}
@media (min-width:900px){.anrufleiste{display:none}}

.entwurf{background:var(--sonne);color:var(--schwarz);font-size:14px;text-align:center;padding:8px var(--gutter);border-bottom:var(--kontur)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Ergänzungen: Navigation, zwei Wege, Fachkräfte, Illustration */
.bg-weiss{background:var(--weiss)}.bg-creme{background:var(--creme)}.bg-gruenhell{background:var(--gruen-hell)}.bg-sonnehell{background:var(--sonne-hell)}
.hauptnav{display:flex;gap:10px;flex-wrap:wrap}
.hauptnav a{font-weight:600;font-size:15px;color:var(--schwarz);text-decoration:none;padding:9px 14px;border-radius:999px;border:2px solid transparent}
.hauptnav a:hover{border-color:var(--schwarz)}
.top .wrap{flex-wrap:wrap}
.top .rechts{display:flex;align-items:center;gap:14px}
@media (max-width:899px){.hauptnav{order:3;width:100%;justify-content:space-between;border-top:2px solid var(--schwarz);margin-inline:calc(-1 * var(--gutter));padding:8px var(--gutter) 0;width:calc(100% + 2 * var(--gutter))}.hauptnav a{padding:8px 4px;font-size:14px}}
.wege{padding-top:24px}
.wege .zwei{margin-top:0}
.weg{display:grid;gap:14px;align-content:start}
.weg h2{font-size:clamp(28px,3.6vw,38px)}
.weg .btn{justify-self:start;margin-top:6px}
.check{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.check li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.check li::before{content:"";width:24px;height:24px;margin-top:3px;border-radius:50%;background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat;border:2px solid var(--schwarz)}
.fachkraefte .wrap{display:grid;gap:40px;align-items:start}
.fachkraefte .txt{display:grid;gap:18px;min-width:0}
.fachkraefte .aktion{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.fachkraefte .karte p{font-size:17px}
@media (min-width:900px){.fachkraefte .wrap{grid-template-columns:1.1fr .9fr;gap:64px}}
.erfahrung{display:grid;gap:36px;align-items:start}
.illu{background:var(--weiss);border:var(--kontur);box-shadow:var(--schatten);border-radius:14px;overflow:hidden;position:relative}
.illu img{width:100%;aspect-ratio:900/715;object-fit:cover}
.illu .tag{position:absolute;left:16px;bottom:14px}
.erfahrung .stapel{display:grid;gap:36px}
@media (min-width:900px){.erfahrung{grid-template-columns:.95fr 1.05fr;gap:40px}}
.vorteile-sektion{padding-top:24px}
.vorteile-sektion .vorteile{margin-top:0}
.vorteile{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:14px}
.vorteile li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--creme);border-radius:999px;padding:10px 20px 10px 10px;font-size:17px}
.vorteile .punkt{width:40px;height:40px;border-radius:50%;border:var(--kontur);display:grid;place-items:center}
.vorteile .punkt svg{width:20px;height:20px}
@media (min-width:900px){.vorteile{grid-template-columns:repeat(3,1fr)}}
.check-sektion{padding-top:24px}
.stellencheck{display:grid;gap:18px}
.stellencheck .aktion{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;margin-top:6px}
@media (min-width:900px){.stellencheck{grid-template-columns:1.2fr .8fr;align-items:center;gap:40px;padding:48px 48px 44px}.stellencheck .aktion{justify-content:flex-end}}
.btn.wa{background:var(--gruen)}

/* Navigation: aktive Seite */
.hauptnav a[aria-current="page"]{border-color:var(--schwarz);background:var(--sonne)}
@media (max-width:899px){.hauptnav a{font-size:14px;padding:8px 6px}}

/* Seitenkopf für Unterseiten */
.seitenkopf{background:var(--gruen-hell);padding-block:56px 0;overflow:hidden}
.seitenkopf .wrap{display:grid;gap:18px;max-width:900px}
.seitenkopf h1{color:var(--tanne)}
.seitenkopf .lead{font-size:clamp(19px,2vw,22px);max-width:52ch}

/* Formulare */
.reiter{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px}
.reiter a{display:inline-flex;align-items:center;font-weight:600;font-size:17px;padding:13px 22px;border-radius:999px;border:var(--kontur);background:var(--weiss);color:var(--schwarz);text-decoration:none}
.reiter a[aria-selected="true"]{background:var(--gruen);box-shadow:var(--schatten-klein)}
.formkarte{position:relative;background:var(--weiss);border:var(--kontur);box-shadow:var(--schatten);border-radius:14px;padding:40px 24px 30px}
.formkarte > .tag{position:absolute;top:-18px;left:22px}
@media (min-width:900px){.formkarte{padding:52px 48px 40px}}
.formular{display:grid;gap:22px}
.reihe{display:grid;gap:22px}
@media (min-width:760px){.reihe{grid-template-columns:1fr 1fr}}
.feld{display:grid;gap:8px;min-width:0}
.feld label,.feld legend{font-weight:600;font-size:17px}
.feld .hilfe{font-size:15px;color:var(--grau)}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld select,.feld textarea{font:inherit;font-size:17px;color:var(--schwarz);background:var(--weiss);border:var(--kontur);border-radius:10px;padding:12px 14px;width:100%}
.feld textarea{min-height:140px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:3px solid var(--sonne);outline-offset:1px}
fieldset.feld{border:0;padding:0;margin:0}
.optionen{display:flex;flex-wrap:wrap;gap:10px}
.optionen label{display:inline-flex;align-items:center;gap:8px;font-weight:400;font-size:16px;padding:9px 14px;border:var(--kontur);border-radius:999px;background:var(--gruen-hell);cursor:pointer}
.optionen input{accent-color:var(--tanne);width:18px;height:18px}
.upload{border:2px dashed var(--schwarz);border-radius:12px;padding:18px;background:var(--creme);display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.upload input{font:inherit;font-size:15px;max-width:100%;width:100%}
.einwilligung{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:16px;background:var(--sonne-hell);border-radius:12px;padding:16px}
.einwilligung input{width:22px;height:22px;margin-top:2px;accent-color:var(--tanne)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular .absenden{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.formular button.btn{cursor:pointer;font-family:var(--text)}
.meldung{border:var(--kontur);border-radius:12px;padding:16px 18px;font-size:17px}
.meldung.fehler{background:#ffe1d6}
.meldung.info{background:var(--sonne-hell)}
.pflicht{color:var(--gruen-dunkel)}

/* Wissensseite */
.inhalt{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.inhalt a{display:inline-flex;font-weight:600;font-size:16px;padding:10px 16px;border-radius:999px;border:var(--kontur);background:var(--weiss);color:var(--schwarz);text-decoration:none;box-shadow:var(--schatten-klein)}
.wissen-block{display:grid;gap:28px}
.wissen-block .kopfzeile{display:grid;gap:12px;max-width:62ch}
.fakten{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
.fakten .karte{min-width:0;overflow-wrap:break-word}
@media (min-width:820px){.fakten{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fakten .karte p + p{margin-top:10px}
.eckdaten{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.eckdaten li{display:grid;grid-template-columns:150px 1fr;gap:12px;font-size:17px;border-top:1px solid var(--linie);padding-top:8px}
.eckdaten li span:first-child{font-weight:600}
@media (max-width:520px){.eckdaten li{grid-template-columns:1fr;gap:2px}}
.darf{display:grid;gap:20px}
@media (min-width:760px){.darf{grid-template-columns:1fr 1fr}}
.liste{margin:6px 0 0;padding-left:1.2em;display:grid;gap:6px}
.quellen{font-size:15px;color:var(--grau)}
.quellen ul{margin:8px 0 0;padding-left:1.2em;display:grid;gap:4px}
.stand{font-size:15px;color:var(--grau)}

/* Anlaufstellen */
.hinweis-leipzig{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;background:var(--sonne-hell);border:var(--kontur);border-radius:12px;padding:14px 18px;font-size:17px;max-width:900px}
.hinweis-leipzig svg{width:22px;height:22px;margin-top:3px}
.anbieter{display:grid;gap:36px;grid-template-columns:minmax(0,1fr)}
.anbieterkarte{min-width:0;overflow-wrap:break-word}
.anbieterkarte a{overflow-wrap:anywhere}
@media (min-width:820px){.anbieter{grid-template-columns:repeat(2,minmax(0,1fr))}}
.anbieterkarte{scroll-margin-top:24px}
.anbieterkarte .ort{display:flex;gap:8px;align-items:flex-start;font-size:15px;color:var(--grau);font-weight:600}
.anbieterkarte .ort svg{width:16px;height:16px;flex:none;margin-top:3px}
.anbieterkarte .gut{font-size:16px;background:var(--gruen-hell);border-radius:10px;padding:10px 12px}
.anbieterkarte .eckdaten li{grid-template-columns:1fr;gap:2px;font-size:16px}
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.links .btn{padding:11px 18px;font-size:15px}
.kontaktzeile{font-size:15px;color:var(--grau);overflow-wrap:anywhere}
.anbieterkarte:target{outline:4px solid var(--sonne);outline-offset:4px}

/* Einstieg mit Bildmarke */
.bildfleck.mit-marke .fleck{background:var(--tanne)}
.bildfleck.mit-marke .marke{position:absolute;left:13%;top:13%;width:74%;height:auto}
.bildfleck.mit-marke .tag{left:10%;bottom:6%}

/* Anschrift im Fußbereich */
.kontakt .adresse{font-style:normal;font-size:15px;color:var(--tanne-text)}

/* Hauptmenü am Handy in einer Zeile */
@media (max-width:899px){.hauptnav{flex-wrap:nowrap;gap:2px}.hauptnav a{font-size:13.5px;padding:8px 5px;white-space:nowrap}}

/* ===== Barrierefreiheit und Bedienbarkeit ===== */
/* Nur für Screenreader sichtbar */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Sprunglink: erscheint beim ersten Tab */
.sprunglink{position:absolute;left:16px;top:-100px;z-index:100;background:var(--sonne);color:var(--schwarz);font-weight:600;padding:12px 18px;border:var(--kontur);border-radius:10px;text-decoration:none}
.sprunglink:focus{top:calc(12px + env(safe-area-inset-top,0px))}
main:focus{outline:none}
/* Kopfzeile am Desktop beim Scrollen sichtbar */
@media (min-width:900px){.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20}}
[id]{scroll-margin-top:16px}
@media (min-width:900px){[id]{scroll-margin-top:124px}}
/* Lesbare Mindestgrößen */
.tag{font-size:15px}
.quelle,.stand,.hinweis,.kontaktzeile,.anbieterkarte .ort,.kontakt .adresse,.feld .hilfe,.hilfe{font-size:16px}
.pillen li{font-size:16px}
.fuss nav a{font-size:16px;display:inline-block;padding-block:6px}
/* Schnellkontakt am Handy: genug Abstand unten */
@media (max-width:899px){body{padding-bottom:88px}}
/* Externe Links kennzeichnen */
.btn[href^="http"]::after,.quellen a[href^="http"]::after{content:"\2197" / "";font-weight:600;margin-left:2px}
/* Formulare: Fehler am Feld */
.fehlertext{display:flex;gap:8px;align-items:flex-start;color:#a3241b;font-weight:600;font-size:16px;margin:0}
.fehlertext::before{content:"!" / "";flex:none;width:20px;height:20px;border-radius:50%;background:#a3241b;color:#fff;display:grid;place-items:center;font-size:14px;line-height:1;margin-top:2px}
.feld [aria-invalid="true"]{border-color:#a3241b;box-shadow:0 0 0 2px #a3241b}
.einwilligung:has([aria-invalid="true"]){box-shadow:0 0 0 3px #a3241b}
.einwilligung .fehlertext{grid-column:1 / -1}
.meldung:focus{outline:3px solid var(--schwarz);outline-offset:3px}
button.btn:disabled{opacity:.7;cursor:progress;transform:none;box-shadow:var(--schatten-klein)}
.reiter a:focus-visible{outline:3px solid var(--schwarz);outline-offset:4px}
/* Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){.btn:hover,.btn:active{transform:none}}

/* Sehr schmale Bildschirme (320 px): Menü bleibt einzeilig und lässt sich notfalls seitlich wischen */
@media (max-width:374px){.hauptnav{overflow-x:auto;scrollbar-width:none;gap:0}.hauptnav::-webkit-scrollbar{display:none}.hauptnav a{font-size:13px;padding:8px 4px}}
.wissen-block{grid-template-columns:minmax(0,1fr)}
.wissen-block h2,.wissen-block h3,.wissen-block p{overflow-wrap:break-word;hyphens:auto}

/* Ratgeber */
.seitenkopf .meta{font-size:16px;color:var(--grau)}
.brotkrumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:16px}
.brotkrumen li + li::before{content:"/";margin:0 10px;color:var(--grau)}
.brotkrumen a{color:var(--schwarz);text-underline-offset:3px}
.brotkrumen [aria-current]{color:var(--grau)}
.artikel{padding:32px 0 72px}
.artikel .wrap{max-width:760px}
.artikel h2{font-size:clamp(26px,3.4vw,34px);margin:52px 0 14px;scroll-margin-top:100px}
.artikel p + p{margin-top:14px}
.artikel ul,.artikel ol{margin:14px 0 0;padding-left:1.3em;display:grid;gap:10px}
.artikel li::marker{font-weight:700}
.kasten{background:var(--gruen-hell);border:var(--kontur);border-radius:14px;box-shadow:var(--schatten-klein);padding:24px 26px;margin:28px 0}
.kasten.gelb{background:var(--sonne-hell)}
.kasten ul{margin-top:10px}
.artikel .kasten-titel,.kasten-titel{font-size:22px;margin:0 0 6px}
.cta-kasten{background:var(--creme);margin-top:56px;display:grid;gap:12px}
.cta-kasten .kasten-titel{font-size:clamp(24px,3vw,30px)}
.artikel .quellen{margin-top:48px}
.artikel .quellen .kasten-titel{font-size:20px}
.artikel .stand{margin-top:20px}
.beitrag h3 a{color:var(--schwarz);text-decoration:none}
.beitrag h3 a::after{content:"";position:absolute;inset:0;border-radius:14px}
.beitrag:hover h3 a,.beitrag h3 a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.beitrag:focus-within{outline:3px solid var(--schwarz);outline-offset:4px}
.beitrag h3 a:focus-visible{outline:none}
.beitrag .meta{font-size:16px;color:var(--grau)}
.ratgeber-gruppe h2,.weiterlesen h2{margin-bottom:44px}
.weiterlesen .fakten + p{margin-top:28px}
.artikelkopf .wrap{max-width:760px}