/* LüftungsProtokoll — lueftungstool.de
   Externes Stylesheet mit Absicht: keine inline-styles => CSP ohne 'unsafe-inline'.
   Farbwelt und Schrift bewusst identisch zum Tool (protokoll.), damit Website und
   Anwendung als ein Produkt gelesen werden. */

@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin.woff2') format('woff2');font-weight:300 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');font-weight:300 800;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-display:swap;}

:root{
  --teal:#0F766E; --teal-dark:#115E59; --teal-light:#CCFBF1;
  --ink:#0F172A; --body:#334155; --muted:#5E6B81;   /* nicht #64748B: das ergab auf --bg nur 4,43:1 und verfehlt WCAG AA (4,5:1) */
  --bg:#F5F7F9; --surface:#FFFFFF; --line:#E2E8F0;
  --radius:14px; --wrap:1080px;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#F1F5F9;--body:#CBD5E1;--muted:#94A3B8;--bg:#0B1220;--surface:#111C2E;--line:#1E293B;
    --teal:#2DD4BF;--teal-dark:#5EEAD4;--teal-light:#134E4A;}
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--body);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
h1,h2,h3{color:var(--ink);font-weight:700;letter-spacing:-.02em;line-height:1.25}

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.skip{position:absolute;left:-9999px;top:0;background:var(--teal);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

header{border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:66px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk','Inter',sans-serif;font-size:19px;
  font-weight:700;color:var(--teal);text-decoration:none;letter-spacing:-.3px}
.brand svg{width:26px;height:26px;flex:none}
.nav nav{display:flex;align-items:center;gap:22px;font-size:15px;flex-wrap:wrap}
.nav nav a{color:var(--body);text-decoration:none}
.nav nav a:hover{color:var(--teal)}

.btn{display:inline-block;background:var(--teal);color:#fff;padding:11px 22px;border-radius:10px;
  font-weight:600;text-decoration:none;font-size:15px;border:1px solid var(--teal)}
.btn:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
.btn-ghost{background:transparent;color:var(--teal)}
.btn-ghost:hover{background:var(--teal-light);color:var(--teal-dark)}
@media (prefers-color-scheme:dark){.btn{color:#04211E}.btn-ghost{color:var(--teal)}}

.hero{padding:78px 0 62px;text-align:center}
.badge{display:inline-block;background:var(--teal-light);color:var(--teal-dark);font-size:13px;font-weight:600;
  padding:5px 13px;border-radius:999px;margin-bottom:20px;letter-spacing:.01em}
@media (prefers-color-scheme:dark){.badge{color:var(--teal)}}
.hero h1{font-size:clamp(30px,5.2vw,50px);margin-bottom:18px}
.hero p{font-size:clamp(17px,2.1vw,20px);max-width:660px;margin:0 auto 30px;color:var(--body)}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.section{padding:56px 0;border-top:1px solid var(--line)}
.section h2{font-size:clamp(23px,3vw,31px);margin-bottom:12px}
.section .lead{max-width:620px;margin-bottom:34px;color:var(--muted)}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.card h3{font-size:17px;margin-bottom:8px}
.card p{font-size:15px;color:var(--body)}
.card .ico{width:38px;height:38px;border-radius:10px;background:var(--teal-light);color:var(--teal-dark);
  display:grid;place-items:center;margin-bottom:14px}
@media (prefers-color-scheme:dark){.card .ico{color:var(--teal)}}
.card .ico svg{width:20px;height:20px}

/* Schritt-für-Schritt: <ol> bleibt semantisch eine Reihenfolge, die Zahl kommt aus dem Counter */
.steps{counter-reset:s;list-style:none;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  background:var(--teal);color:#fff;font-weight:700;font-size:15px;margin-bottom:12px}
@media (prefers-color-scheme:dark){.steps li::before{color:#04211E}}
.steps h3{font-size:16px;margin-bottom:6px}
.steps p{font-size:15px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px}
.panel h2{margin-bottom:10px}
dl.faq dt{font-weight:600;color:var(--ink);margin-top:20px}
dl.faq dt:first-child{margin-top:0}
dl.faq dd{margin:5px 0 0;color:var(--body)}

footer{border-top:1px solid var(--line);background:var(--surface);padding:34px 0;margin-top:8px;font-size:14px}
.foot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--teal);text-decoration:underline}
.copy{color:var(--muted)}

/* Rechtstext-Seiten */
.doc{max-width:760px;margin:0 auto;padding:44px 22px 76px}
.doc h1{font-size:28px;margin:8px 0 20px}
.doc h2{font-size:17px;color:var(--teal);margin:26px 0 6px}
.doc p,.doc li{margin:0 0 11px;font-size:15px}
.doc ul{padding-left:20px}
.doc .back{display:inline-block;margin-top:26px;color:var(--muted);text-decoration:none;font-size:14px}
.note{background:var(--teal-light);border:1px solid var(--teal);border-radius:10px;padding:13px 17px;
  font-size:14px;color:var(--teal-dark);margin-bottom:22px}
@media (prefers-color-scheme:dark){.note{color:var(--teal)}}

/* Utility statt inline-style — haelt CSP ohne 'unsafe-inline' */
.mt{margin-top:18px}