@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url("schriften/inter-latin-wght-normal.woff2") format("woff2-variations")}
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url("schriften/inter-latin-ext-wght-normal.woff2") format("woff2-variations");unicode-range:U+0100-02BA,U+1E00-1EFF}
@font-face{font-family:"Fraunces";font-weight:100 900;font-display:swap;src:url("schriften/fraunces-latin-wght-normal.woff2") format("woff2-variations")}
:root{--gruen:#17804f;--gruen-tief:#0d3a26;--gruen-blass:#ecf7f1;--kupfer:#b4541f;--text:#231f1c;--grau:#574f47;--linie:#e8e4de;--hinter:#faf9f7}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Inter",system-ui,sans-serif;color:var(--text);background:var(--hinter);line-height:1.6;font-size:17px;display:flex;flex-direction:column;min-height:100vh}
a{color:var(--gruen)}
a:hover{color:var(--gruen-tief)}
.rahmen{width:100%;max-width:880px;margin:0 auto;padding:0 24px}
header{border-bottom:1px solid var(--linie);background:#fff}
header .rahmen{display:flex;align-items:center;justify-content:space-between;height:72px}
header img{height:30px;width:auto;display:block}
header nav a{margin-left:20px;text-decoration:none;color:var(--grau);font-size:15px}
header nav a:hover{color:var(--gruen)}
main{flex:1}
.held{padding:88px 0 64px}
.marke{display:inline-block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--kupfer);font-weight:600;margin-bottom:14px}
h1,h2{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.15;color:var(--gruen-tief)}
h1{font-size:clamp(34px,6vw,54px);margin:0 0 20px}
h2{font-size:26px;margin:44px 0 12px}
h3{font-size:17px;margin:28px 0 6px}
.einleitung{font-size:20px;color:var(--grau);max-width:640px;margin:0}
.knopf{display:inline-block;margin-top:32px;background:var(--gruen);color:#fff;text-decoration:none;padding:14px 26px;border-radius:10px;font-weight:600}
.knopf:hover{background:var(--gruen-tief);color:#fff}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;padding-bottom:64px}
.karte{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:24px}
.karte h3{margin:0 0 8px;font-size:18px;color:var(--gruen-tief)}
.karte p{margin:0;color:var(--grau);font-size:16px}
.kontakt{background:var(--gruen-blass);border-radius:16px;padding:32px;margin-bottom:72px}
.kontakt h2{margin-top:0}
.kontakt p{margin:4px 0}
.hinweis{font-size:15px;color:var(--grau);margin-top:16px}
.text{padding-top:56px;padding-bottom:72px}.text>*{max-width:720px}
.text p,.text li{color:#3a3430}
.fehlt{background:#fdf0c4;padding:0 4px;border-radius:3px}
footer{border-top:1px solid var(--linie);background:#fff;font-size:14px;color:var(--grau)}
footer .rahmen{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;padding-top:22px;padding-bottom:22px}
footer a{color:var(--grau);margin-left:18px}
@media(max-width:560px){.rahmen{padding:0 20px}header nav a{margin-left:14px;font-size:14px}header img{height:22px}.held{padding:56px 0 40px}footer a{margin-left:0;margin-right:18px}}
.hinweisleiste{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--gruen-tief);color:#e6f2ec;font-size:14px;padding:9px 20px;text-align:center}
.punkt{flex:none;width:8px;height:8px;border-radius:50%;background:#34c184;box-shadow:0 0 0 0 rgba(52,193,132,.6);animation:puls 2.4s ease-out infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(52,193,132,.6)}70%{box-shadow:0 0 0 8px rgba(52,193,132,0)}100%{box-shadow:0 0 0 0 rgba(52,193,132,0)}}
@media(prefers-reduced-motion:reduce){.punkt{animation:none}}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.knoepfe .knopf{margin-top:0}
.knopf.zweit{background:#fff;color:var(--gruen-tief);border:1px solid var(--linie)}
.knopf.zweit:hover{background:var(--gruen-blass);color:var(--gruen-tief)}
.abschnitt{padding:64px 0}
.abschnitt.hell{background:#fff;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.abschnitt h2{margin:0 0 24px;font-size:clamp(26px,3.6vw,34px);max-width:640px}
.abschnitt p{color:var(--grau)}
.abschnitt .karten{padding-bottom:0}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.zwei .klein{grid-column:1/-1;margin:0}
.punkte{margin:0;padding:0;list-style:none;counter-reset:p}
.punkte li{counter-increment:p;position:relative;padding:0 0 18px 44px;color:var(--grau)}
.punkte li::before{content:counter(p);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--gruen-blass);color:var(--gruen-tief);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center}
.punkte strong{color:var(--text)}
.klein{font-size:15px}
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.schritt{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:22px}
.schritt h3{margin:12px 0 6px;color:var(--gruen-tief)}
.schritt p{margin:0;font-size:15.5px}
.nr{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--gruen);color:#fff;font-weight:600}
.schilder{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.schilder li{background:var(--gruen-blass);color:var(--gruen-tief);border-radius:999px;padding:6px 14px;font-size:15px}
#kontakt{padding-top:64px}
@media(max-width:860px){.zwei{grid-template-columns:1fr;gap:32px}.schritte{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.schritte{grid-template-columns:1fr}.abschnitt{padding:48px 0}header nav a.breit{display:none}}
.abschnitt .karten{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.abschnitt .karten{grid-template-columns:1fr}}
.randnotiz{margin:24px 0 0;padding:16px 20px;border-left:3px solid var(--gruen-rand,#c6e5d5);background:#fff;border-radius:0 10px 10px 0;font-size:15px;color:var(--grau);max-width:880px}
.schilder li.weitere{background:none;color:var(--grau);font-style:italic;padding-left:4px}
.marke-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
header .marke-logo img{height:28px;width:auto}
.marke-logo span{font-family:"Inter",system-ui,sans-serif;font-size:21px;font-weight:700;letter-spacing:-.02em;color:#1a1613}
.marke-logo b{font-weight:700;color:var(--gruen)}
@media(max-width:560px){header .marke-logo img{height:22px}.marke-logo span{font-size:18px}}