/* РАЗБОР — Designsystem
   Akte trifft Boulevard. Fünf Farben mit je einer festen Rolle.
   Schriften ausschließlich lokal, kein Aufruf an Dritte. */

/* ---------- Schriften ---------- */
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/oswald-500-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/oswald-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/oswald-700-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/oswald-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/golos-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/golos-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/golos-500-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/golos-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/golos-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/golos-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/plex-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/plex-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/plex-500-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/plex-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Marken-Tokens ---------- */
:root{
  color-scheme:dark;
  --akte:#0E1219;
  --flaeche:#161C26;
  --linie:#232B37;
  --papier:#F4F6F8;
  --matt:#8C97A6;
  --stempel:#E2504F;
  --amtsblau:#9FB6D4;
  --signal:#FFD84D;

  --max-page:1120px;
  --max-text:680px;
  --rand:20px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s12:48px; --s16:64px; --s24:96px; --s32:128px;

  --mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
  --display:'Oswald',Arial Narrow,Arial,sans-serif;
  --text:'Golos Text',-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (min-width:600px){:root{--rand:32px}}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--akte);color:var(--papier);
  font-family:var(--text);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:900px){body{font-size:18px;line-height:1.65}}

img,video{max-width:100%;height:auto;display:block}
a{color:var(--papier);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--stempel)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
::selection{background:var(--stempel);color:var(--papier)}

h1,h2,h3{font-family:var(--display);font-weight:700;text-transform:uppercase;margin:0;text-wrap:balance}
h1{font-size:34px;line-height:1.05;letter-spacing:.01em}
h2{font-size:24px;line-height:1.15;font-weight:600}
h3{font-size:19px;line-height:1.2;font-weight:500}
@media (min-width:900px){
  h1{font-size:56px;line-height:1.02}
  h2{font-size:32px;line-height:1.1}
  h3{font-size:21px}
}
p{margin:0}
b,strong{font-weight:600}
i,em{font-style:normal;font-weight:600}  /* Kursiv ist im System nicht vorgesehen */

.wrap{max-width:var(--max-page);margin:0 auto;padding-inline:var(--rand)}
.text{max-width:var(--max-text)}
.mono{font-family:var(--mono)}
.matt{color:var(--matt)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--rand);top:8px;z-index:99;background:var(--stempel);color:var(--papier);padding:10px 14px}

/* ---------- Kopf ---------- */
.kopf{border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
  padding-block:var(--s4);min-height:64px}
.marke{display:inline-flex;flex-direction:column;gap:5px;text-decoration:none}
.marke span{font-family:var(--display);font-weight:700;font-size:22px;line-height:1;
  letter-spacing:.04em;text-transform:uppercase;color:var(--papier)}
.marke i{display:block;width:100%;height:3px;background:var(--stempel)}
.marke:hover span{color:var(--papier)}
@media (min-width:900px){.marke span{font-size:26px}}

.nav{display:none;gap:var(--s6);align-items:center}
.nav a{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--matt)}
.nav a:hover,.nav a[aria-current]{color:var(--papier)}
@media (min-width:820px){.nav{display:flex}.burger{display:none}}
.burger{background:none;border:1px solid var(--linie);color:var(--papier);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 12px;cursor:pointer;min-height:44px}
.nav-mob{display:none;flex-direction:column;gap:var(--s1);padding-bottom:var(--s4)}
.nav-mob.auf{display:flex}
.nav-mob a{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--papier);padding:12px 0;border-bottom:1px solid var(--linie)}

/* ---------- Abschnitte ---------- */
section{padding-block:56px}
@media (min-width:900px){section{padding-block:96px}}
.kicker{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--matt)}
.lead{font-size:19px;line-height:1.5}
@media (min-width:900px){.lead{font-size:21px}}

/* ---------- Aktenkarte ---------- */
.karten{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media (min-width:700px){.karten{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.karten{grid-template-columns:1fr 1fr 1fr}}

.karte{position:relative;display:block;background:var(--flaeche);border-top:2px solid var(--linie);
  padding:20px;text-decoration:none;color:inherit;min-height:44px}
.karte::before{content:"";position:absolute;left:0;top:-2px;bottom:0;width:0;background:var(--stempel);
  transition:width .15s ease}
.karte:hover::before,.karte:focus-visible::before{width:3px}
.karte:hover .az,.karte:focus-visible .az{color:var(--stempel)}
.karte .az{font-family:var(--mono);font-size:13px;color:var(--amtsblau);display:block;margin-bottom:10px}
.karte h3{font-weight:600;margin-bottom:8px}
.karte p{font-size:15px;color:var(--matt);line-height:1.45}
.karte .fuss{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--matt)}

.karte-xl{padding:24px}
.karte-xl h1{margin-block:10px 14px}
@media (min-width:900px){.karte-xl{padding:40px}}

/* ---------- Quellenblock ---------- */
.quellen{background:var(--flaeche);border-top:2px solid var(--amtsblau);padding:24px 20px;margin-top:var(--s8)}
@media (min-width:900px){.quellen{padding:32px}}
.quellen h2{color:var(--papier);margin-bottom:var(--s6)}
.quelle{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);padding-block:20px;
  border-top:1px solid var(--linie)}
.quelle:first-of-type{border-top:0;padding-top:0}
.quelle .nr{font-family:var(--mono);font-size:20px;color:var(--amtsblau);line-height:1.2}
.quelle .typ{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--matt);display:block;margin-bottom:6px}
.quelle .titel{font-weight:500;display:block;margin-bottom:4px}
.quelle .fund{font-family:var(--mono);font-size:14px;color:var(--amtsblau);display:block;margin-bottom:8px}
.quelle .was{font-size:15px;color:var(--matt);margin-bottom:8px}
.quelle .geprueft{font-family:var(--mono);font-size:12px;color:var(--matt)}
.quelle a{color:var(--amtsblau)}

/* ---------- Signalzahl ---------- */
.zahl{margin-block:var(--s8)}
.zahl b{display:block;font-family:var(--display);font-weight:700;font-size:46px;line-height:1;
  color:var(--signal);font-variant-numeric:tabular-nums}
.zahl span{display:block;font-family:var(--mono);font-size:14px;color:var(--matt);margin-top:8px}
@media (min-width:900px){.zahl b{font-size:72px}}

/* ---------- Hinweisbox ---------- */
.pometka{background:var(--flaeche);border-left:3px solid var(--amtsblau);padding:16px 18px;margin-block:var(--s6)}
.pometka.warn{border-left-color:var(--signal)}
.pometka.rot{border-left-color:var(--stempel)}
.pometka b{display:block;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--matt);margin-bottom:6px}
.pometka p{font-size:16px}

/* ---------- Status ---------- */
.status{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  border:1px solid var(--amtsblau);color:var(--amtsblau);padding:4px 8px}
.status.alt{border-color:var(--linie);color:var(--matt)}
.status.neu{border-color:var(--signal);color:var(--signal)}

/* ---------- Knopf ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  background:var(--stempel);color:var(--papier);font-family:var(--text);font-weight:600;font-size:19px;
  padding:12px 24px;border:0;border-radius:2px;text-decoration:none;cursor:pointer}
.knopf:hover{background:#c9403f;color:var(--papier)}
.knopf.hell{background:var(--papier);color:var(--akte)}
.knopf.hell:hover{background:#e2e6ea;color:var(--akte)}
.textlink{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--amtsblau)}

/* ---------- Vertrauensblock ---------- */
.drei{display:grid;gap:var(--s6);grid-template-columns:1fr;margin-top:var(--s8)}
@media (min-width:820px){.drei{grid-template-columns:repeat(3,1fr);gap:var(--s8)}}
.drei h3{margin-bottom:var(--s3)}
.drei p{font-size:16px;color:var(--matt)}

/* ---------- Suche ---------- */
.suche{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.suche input{flex:1 1 180px;min-height:48px;background:var(--flaeche);border:1px solid var(--linie);
  color:var(--papier);font-family:var(--mono);font-size:16px;padding:0 14px;border-radius:2px}
.suche input::placeholder{color:var(--matt)}

/* ---------- CTA-Band ---------- */
.band{background:var(--stempel);color:var(--akte)}
.band h2,.band p{color:var(--akte)}
.band p{max-width:var(--max-text);margin-top:var(--s3)}
.band .knopf{margin-top:var(--s6)}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--linie);padding-block:var(--s12) var(--s8);font-size:15px}
.fuss-grid{display:grid;gap:var(--s8);grid-template-columns:1fr}
@media (min-width:820px){.fuss-grid{grid-template-columns:2fr 1fr 1fr}}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fuss a{color:var(--matt);text-decoration:none}
.fuss a:hover{color:var(--papier)}
.fuss .recht{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--linie);
  font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--matt)}

/* ---------- Fließtext-Seiten ---------- */
.inhalt h2{margin-top:var(--s12);margin-bottom:var(--s4)}
.inhalt h3{margin-top:var(--s8);margin-bottom:var(--s3)}
.inhalt p{margin-top:var(--s4)}
.inhalt ul{margin-top:var(--s4);padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.inhalt ul li{display:grid;grid-template-columns:auto 1fr;gap:12px}
.inhalt ul li::before{content:"—";color:var(--stempel)}
.inhalt a{color:var(--amtsblau)}

/* ---------- Tabellen / breite Inhalte ---------- */
.scroll-x{overflow-x:auto}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}