:root{--dunkel:#141414;--hell:#F4F2ED;--flaeche:#FBFAF7;--linie:#E9E6DF;--grau:#6A655E;--max:1120px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:'Archivo',system-ui,sans-serif;color:var(--dunkel);background:var(--hell);-webkit-font-smoothing:antialiased;line-height:1.6}
h1,h2{font-family:'Newsreader',Georgia,serif;font-weight:400;letter-spacing:-.02em;line-height:1.08}
h2{font-size:clamp(30px,5vw,52px);margin-bottom:32px}
h3{font-size:18px;margin-bottom:6px}
a{color:inherit}
section{padding:clamp(72px,12vw,140px) 20px}
section>*{max-width:var(--max);margin-left:auto;margin-right:auto}
section:not(#intro)>*{margin-left:max(0px,calc((100% - var(--max))/2));margin-right:auto}
main>section{scroll-margin-top:60px}
.dunkel{background:var(--dunkel);color:var(--hell)}
.hell{background:var(--hell)}
.flaeche{background:var(--flaeche)}
.kopf{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid rgba(244,242,237,.12)}
.kopf-marke{font-weight:600;text-decoration:none;font-size:14px;letter-spacing:.04em}
.kopf nav{display:flex;gap:18px;font-size:14px}
.kopf nav a{text-decoration:none;opacity:.8}
#intro{min-height:calc(100svh - 52px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px}
#logo{width:min(46vw,260px);height:auto;color:var(--hell);overflow:visible}
.kernaussage{font-size:clamp(34px,7vw,76px)}
.kernaussage span{display:inline-block}
.unterzeile{color:rgba(244,242,237,.72);font-size:clamp(16px,2.2vw,19px);max-width:620px}
.hell .unterzeile{color:var(--grau)}
.knoepfe{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.knopf{display:inline-block;padding:14px 26px;border-radius:999px;font-weight:600;text-decoration:none;border:1px solid var(--hell);font-size:15px;cursor:pointer;font-family:inherit}
.knopf-hell{background:var(--hell);color:var(--dunkel)}
.knopf:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #C9A25B;outline-offset:3px}
.hell :focus-visible{outline-color:var(--dunkel)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.kachel{background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;padding:28px}
.kachel-linie{width:64px;height:4px;margin-bottom:18px;overflow:visible}
.kachel-linie line{stroke:var(--dunkel);stroke-width:3}
.kachel p,.belege span,.ablauf p{color:var(--grau)}
.taetigkeiten{list-style:none;display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--linie);font-size:15px}
.taetigkeiten li{position:relative;padding-left:18px}
.taetigkeiten li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:7px;background:var(--dunkel);clip-path:polygon(50% 0,100% 100%,0 100%)}
.belege{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}
.belege li{border-top:2px solid var(--dunkel);padding-top:16px;display:flex;flex-direction:column;gap:6px}
.ablauf-rahmen{position:relative}
.ablauf{list-style:none;display:grid;gap:36px;padding-left:44px}
.ablauf-linie{position:absolute;left:13px;top:6px;bottom:6px;width:2px;background:var(--dunkel);transform-origin:top}
.ablauf li{position:relative}
.ablauf b{position:absolute;left:-44px;top:0;width:28px;height:28px;border-radius:50%;background:var(--dunkel);color:var(--hell);display:grid;place-items:center;font-size:13px}
.formular{display:grid;gap:14px;max-width:560px;margin-top:28px}
.formular label{display:grid;gap:6px;font-size:14px}
.formular input,.formular select,.formular textarea{font:inherit;padding:12px 14px;border-radius:10px;border:1px solid rgba(244,242,237,.5);background:rgba(244,242,237,.06);color:inherit}
.formular select option{color:var(--dunkel)}
.formular .hinweis{font-size:13px;opacity:.7}
.formular .status{min-height:1.4em;font-size:14px}
.formular button[disabled]{opacity:.6;cursor:wait}
.falle{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
body[data-formulare="aus"] .formular{display:none}
body[data-formulare="an"] .formular-aus{display:none}
.formular-aus{margin-top:24px}
.person{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:40px;align-items:center}
.person img{width:100%;height:auto;border-radius:14px}
@media (max-width:480px){.kopf-marke{display:none}.kopf{justify-content:center}}
@media (max-width:700px){.person{grid-template-columns:1fr}.kopf nav{gap:12px}}
.kontaktdaten{display:grid;gap:12px;margin-top:36px;color:rgba(244,242,237,.8)}
.fuss{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:28px 20px;font-size:13px;border-top:1px solid rgba(244,242,237,.12)}
.fuss nav{display:flex;gap:16px}
/* Dreieck als wiederkehrendes Gestaltungselement über jeder Abschnittsüberschrift */
section:not(#intro) h2::before{content:'';display:block;width:22px;height:19px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%);margin-bottom:18px}
#unternehmen h2::before{display:none}
/* Ausgangszustand nur, wenn Animationen aktiv sind (html.anim, gesetzt im <head>) */
html.anim [data-reveal]{opacity:0;transform:translateY(24px)}
/* Kernaussage zeilenweise: die Zeilen statt der Überschrift ausblenden */
html.anim .kernaussage[data-reveal]{opacity:1;transform:none}
html.anim .kernaussage span{opacity:0;transform:translateY(24px)}