@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:700;font-display:swap;src:url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

:root{
  --kopf:#1B2533; --kopf-text:#AEB9C7;
  --grund:#F3F4F6; --flaeche:#FFFFFF; --flaeche-2:#FAFAFB; --linie:#E3E6EA;
  --text:#1B2533; --text-2:#4A5565; --text-3:#5A6473;
  --blau:#1D6FE0; --blau-dunkel:#1558B5; --rot:#B91C1C; --orange:#C2410C; --orange-hell:#F97316; --gelb:#EFB01F;
  --s1:#1E8A4C; --s2:#1D6FE0; --s3:#C0262D; --leitung:#8A6508; --meldung:#C8321F;
  --f-titel:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-text:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--grund);color:var(--text);font:18px/1.6 var(--f-text)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau)}
a:hover{color:var(--blau-dunkel)}
a:focus-visible{outline:3px solid var(--gelb);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-titel);font-weight:700;line-height:1.02;margin:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,6vw,5rem)}
h2{font-size:clamp(2rem,4vw,3.2rem)}
h3{font-size:1.6rem}
p{margin:0}
.huelle{max-width:1280px;margin:0 auto;padding-inline:64px}
@media (max-width:900px){.huelle{padding-inline:24px}}
@media (max-width:480px){.huelle{padding-inline:16px}}
.dachzeile{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rot)}
.leise{color:var(--text-2)}
.stapel{display:flex;flex-direction:column;gap:16px}
.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.zwei{grid-template-columns:1fr;gap:32px}.drei{grid-template-columns:1fr}.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.vier{grid-template-columns:1fr}}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:24px;display:flex;flex-direction:column;gap:6px}
.karte h3{font-size:1.65rem}
.abschnitt{padding-block:96px}
.abschnitt.weiss{background:var(--flaeche);border-block:1px solid var(--linie)}
@media (max-width:900px){.abschnitt{padding-block:64px}}
.knopf{display:inline-flex;align-items:center;padding:13px 22px;border-radius:6px;font-weight:700;text-decoration:none}
.knopf.voll{background:var(--blau);color:#fff}
.knopf.voll:hover{background:var(--blau-dunkel);color:#fff}
.knopf.rand{border:1px solid #C9CFD8;color:var(--text)}
.knopf.rand:hover{border-color:var(--text);color:var(--text)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px}

/* Kopf */
.kopf{background:var(--kopf);color:#fff}
.kopf .huelle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.marke{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.marke:hover{color:#fff}
.marke img{width:40px;height:40px}
.marke b{display:block;font-family:var(--f-titel);font-size:1.6rem;line-height:1}
.marke small{display:block;font-size:.8rem;color:var(--kopf-text)}
.navi{display:flex;align-items:center;gap:26px;font-size:1rem}
.navi a{color:#D5DDE8;text-decoration:none}
.navi a:hover{color:#fff}
.navi .knopf{color:#fff;padding:9px 16px}
@media (max-width:900px){.navi a:not(.knopf){display:none}}

/* Aufmacher */
.aufmacher{background:var(--flaeche);border-bottom:1px solid var(--linie);padding-top:72px}
.aufmacher-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:end}
.aufmacher-text{grid-column:span 8}
.aufmacher-text .leise{font-size:1.2rem;max-width:44em}
.sachgebiete{grid-column:span 4;display:flex;flex-direction:column;gap:8px;padding-bottom:6px}
.sachgebiete span.hinweis{font-size:.85rem;color:var(--text-3)}
@media (max-width:900px){.aufmacher{padding-top:48px}.aufmacher-text,.sachgebiete{grid-column:1/-1}}
.reiter{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.reiter li{border:2px solid currentColor;border-radius:6px;padding:4px 12px;font-size:.88rem;font-weight:700}
.reiter .meldung{background:var(--meldung);border-color:var(--meldung);color:#fff}
.reiter .leitung{color:var(--leitung)}
.reiter .s1{color:var(--s1)}
.reiter .s2{color:var(--s2)}
.reiter .s3{color:var(--s3)}
.reiter .vb{background:var(--kopf);border-color:var(--kopf);color:#fff}
.schaufenster{margin-top:40px;border:1px solid var(--linie);border-bottom:0;border-radius:10px 10px 0 0;background:var(--grund);padding:12px 12px 0;box-shadow:0 -12px 40px rgba(27,37,51,.08)}
.schaufenster img{border-radius:6px 6px 0 0}
.kennzahlen{padding-top:32px}
.kennzahlen .karte b{font-family:var(--f-titel);font-size:1.55rem;line-height:1.1}
.kennzahlen .karte span{font-size:.93rem;color:var(--text-3)}

/* Bilder mit Titelleiste wie in der Anwendung */
.fenster{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;overflow:hidden;margin:0}
.fenster figcaption{background:var(--kopf);color:#fff;padding:11px 18px;font-size:.9rem;font-weight:700}
.fenster figcaption span{color:var(--kopf-text);font-weight:400}
.rahmen{background:var(--grund);border:1px solid var(--linie);border-radius:10px;padding:14px;margin:0}
.rahmen img{border-radius:6px}

/* Ablauf Flaechenlage */
.ablauf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:schritt}
.ablauf li{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:16px 20px 16px 64px;position:relative;counter-increment:schritt}
.ablauf li::before{content:counter(schritt,decimal-leading-zero);position:absolute;left:20px;top:17px;font-family:var(--f-mono);font-size:.85rem;color:var(--blau)}
.ablauf b{display:block}
.ablauf span{color:var(--text-2);font-size:1rem}

.liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.liste li{padding-left:22px;position:relative}
.liste li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border:2px solid var(--rot);transform:rotate(45deg)}
.marke-rot{align-self:flex-start;border:2px solid var(--s3);color:var(--s3);border-radius:6px;padding:2px 10px;font-size:.85rem;font-weight:700}

.verwaltung{border:1px solid var(--linie);border-radius:12px;overflow:hidden;margin-top:48px}
.verwaltung .titel{background:var(--kopf);color:#fff;padding:13px 28px;font-size:.95rem;font-weight:700}
.verwaltung .titel span{color:var(--kopf-text);font-weight:400}
.verwaltung .inhalt{background:var(--flaeche-2);padding:44px 28px}

.kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.kacheln li{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:10px 14px;font-size:1rem}
@media (max-width:480px){.kacheln{grid-template-columns:1fr}}

.ausfall-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:32px}
.ausfall-marke{background:var(--orange);color:#fff;border-radius:6px;padding:5px 12px;font-size:.85rem;font-weight:700}
.ausfall .karte{border-top:4px solid var(--orange-hell)}

.grundlage{display:flex;flex-wrap:wrap;gap:8px 32px;align-items:baseline;margin-top:32px}
.grundlage .dachzeile{color:var(--text-3);min-width:220px}

/* Kontakt */
.kontakt{background:var(--kopf);color:#fff;border-radius:14px;padding:56px}
.kontakt .dachzeile{color:var(--gelb)}
.kontakt .leise{color:#C7D0DC}
.kontakt-karte{background:var(--flaeche);color:var(--text);border-radius:10px;padding:32px;display:flex;flex-direction:column;gap:10px}
.kontakt-karte h3{font-size:1.8rem}
.post{font-size:1.2rem;font-weight:600;overflow-wrap:anywhere}
.post a{text-decoration:none;border-bottom:2px solid currentColor}
@media (max-width:900px){.kontakt{padding:32px 24px}}

/* Fuss */
.fuss{background:var(--kopf);color:var(--kopf-text);font-size:.93rem}
.fuss .huelle{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-block:28px}
.fuss a{color:#D5DDE8}

/* Rechtstexte */
.rechtstext{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:48px;max-width:860px;margin:64px auto}
.rechtstext h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:24px}
.rechtstext h2{font-size:1.7rem;margin:32px 0 8px}
.rechtstext p,.rechtstext ul{margin:0 0 12px}
@media (max-width:900px){.rechtstext{padding:28px 20px;margin:32px 16px}}

/* Hilfsklassen statt Inline-Styles */
.stapel.gross{gap:44px}
.schmal{max-width:820px}
.abstand-unten{margin-bottom:36px}
.zwei.oben{align-items:start}
.rahmen.weiss-grund{background:var(--flaeche)}
.abschnitt.ohne-oben{padding-top:0}
.leise.klein{font-size:.93rem}
@media (max-width:480px){.marke b{font-size:1.3rem;white-space:nowrap}.marke small{font-size:.72rem}.navi .knopf{padding:8px 12px;font-size:.88rem}}
.quelle{font-size:.78rem;color:var(--text-3);padding:6px 10px;margin:0}
.schaufenster .quelle{padding:6px 2px}
.kacheln small{color:var(--text-3);font-size:.85rem}
.stapel h3{font-size:1.75rem}
.kontakt-karte .leise{color:var(--text-3)}
.werkzeuge .karte h3{font-size:1.4rem}
.frage{margin-top:32px;background:var(--kopf);color:#fff;border-radius:12px;padding:32px;display:flex;flex-direction:column;gap:10px}
.frage .leise{color:#C7D0DC;max-width:62em}
.frage h3{font-size:1.8rem}
.datenschutz{margin-top:40px;gap:12px}
.datenschutz h3{font-size:1.6rem}