@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-latin-600-normal.woff2") format("woff2")}

:root{
  --surface-page:#f5f2ec;--surface-raised:#ede8df;--surface-inverse:#18212b;--accent-tint:#f4e6de;
  --text-primary:#18212b;--text-secondary:#4a5867;--text-inverse-secondary:#94a2b1;
  --accent:#a8553a;--accent-strong:#8c4530;--accent-on-dark:#d89372;
  --border:#ddd6c9;--border-strong:#c6bca9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-primary);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:28px}
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;font-weight:600;margin:0}
p{margin:0}
a{color:var(--accent-strong)}a:hover{color:#6e3524}
a:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px}

/* Kopf */
.kopf{border-bottom:1px solid var(--border)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.name{font-size:17px;font-weight:600;letter-spacing:-.2px;color:var(--text-primary);text-decoration:none}
.nav{display:flex;gap:24px;flex-wrap:wrap;font-size:16px;font-weight:500}
.nav a{color:var(--text-primary);text-decoration:none}
.nav a.kontakt{color:var(--accent-strong)}

/* Typo */
.overline{font-size:13px;line-height:16px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:var(--accent-strong)}
.display{font-size:clamp(38px,7vw,56px);line-height:1.07;letter-spacing:-1.4px;max-width:760px}
.lead{font-size:clamp(21px,3vw,25px);line-height:1.44;font-weight:500;color:var(--text-secondary)}
.h1{font-size:clamp(32px,5vw,40px);line-height:1.15;letter-spacing:-.8px}
.h2{font-size:clamp(26px,4vw,30px);line-height:1.27;letter-spacing:-.45px}
.h3{font-size:22px;line-height:30px}
.body-lg{font-size:19px;line-height:31px}
.sekundaer{color:var(--text-secondary)}
.klein{font-size:15px;line-height:24px}

/* Schaltflächen */
.knoepfe{display:flex;gap:16px;flex-wrap:wrap}
.knopf{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:8px;font-size:16px;font-weight:500;text-decoration:none}
.knopf.primaer{background:var(--accent);color:#fff}
.knopf.primaer:hover{background:var(--accent-strong);color:#fff}
.knopf.sekundaer-k{border:1px solid var(--border-strong);color:var(--text-primary)}
.knopf.sekundaer-k:hover{border-color:var(--text-secondary);color:var(--text-primary)}

/* Abschnitte */
.hero{padding-top:96px;padding-bottom:96px}
.marke{display:block;width:100%;max-width:480px;min-width:244px;height:auto;margin:0 0 80px}
.band{background:var(--surface-raised);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.abschnitt{padding-top:96px;padding-bottom:96px}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.karte{background:var(--surface-page);border:1px solid var(--border-strong);border-radius:8px;padding:24px}
.schritte{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.schritte li{border-top:2px solid var(--accent);padding-top:24px}
.nummer{font-size:13px;font-weight:600;color:var(--accent-strong)}
.dunkel{background:var(--surface-inverse);color:var(--surface-page)}
.dunkel .overline{color:var(--accent-on-dark)}
.kontaktwege{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:48px;max-width:880px}
.weg{border:1px solid var(--border-strong);border-radius:8px;padding:32px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.weg.betont{background:var(--accent-tint)}
.mail{font-size:19px;font-weight:500;word-break:break-word}

/* Fuß */
.fuss{border-top:1px solid var(--border)}
.fuss .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:32px;padding-bottom:32px;font-size:15px;color:var(--text-secondary)}
.fuss nav{display:flex;gap:24px}

/* Rechtstexte */
.recht{padding-top:64px;padding-bottom:96px;max-width:720px}
.recht h1{margin-bottom:32px}
.recht h2{font-size:22px;line-height:30px;margin:40px 0 12px}
.recht p,.recht ul{margin:0 0 16px}
.recht ul{padding-left:20px}

@media (max-width:600px){
  .hero{padding-top:64px;padding-bottom:64px}
  .marke{margin-bottom:56px}
  .abschnitt{padding-top:64px;padding-bottom:64px}
}