/* Datenfluss-Standard – Gestaltung der Plattform.
   Folgt der Datenfluss-Karte: Papier und Tinte, IBM Plex, Siegelrot als Akzent. */

@font-face { font-family:"Plex Sans"; src:url(/schriften/IBMPlexSans-Regular.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Plex Sans"; src:url(/schriften/IBMPlexSans-SemiBold.woff2) format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url(/schriften/IBMPlexMono-Regular.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url(/schriften/IBMPlexMono-SemiBold.woff2) format("woff2"); font-weight:600; font-display:swap; }

:root {
  --papier:#ECEEE9; --karte:#FFFFFF; --tinte:#171B1D; --grau:#5C6467;
  --linie:#D8DCD4; --feld:#F4F6F1; --rot:#C8102E; --rot-text:#B00E28;
  --amber:#8A5A00; --amberbg:#F6E7C8; --amberlinie:#E4CD9C;
  --dunkel:#171B1D; --dunkel-text:#FFFFFF; --dunkel-meta:#B9BFC1;
  --gruen:#1F6B45;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier:#14171A; --karte:#1C2124; --tinte:#E8EAE5; --grau:#9BA3A5;
    --linie:#2E3538; --feld:#22282B; --rot:#F04B62; --rot-text:#F04B62;
    --amber:#D9A84E; --amberbg:#2E2612; --amberlinie:#4A3D1E;
    --dunkel:#E8EAE5; --dunkel-text:#14171A; --dunkel-meta:#4E585C;
    --gruen:#5FBF8E;
  }
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:"Plex Sans",-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
.seite { max-width:940px; margin:0 auto; padding:0 24px; }
.eng { max-width:720px; }

h1,h2,h3 { line-height:1.25; text-wrap:balance; margin:0; font-weight:600; }
h1 { font-size:clamp(30px,5.2vw,44px); letter-spacing:-0.015em; }
h2 { font-size:23px; }
h3 { font-size:17px; }
p { margin:0 0 1em; max-width:66ch; }
p:last-child { margin-bottom:0; }
a { color:var(--rot-text); }
a:focus-visible, button:focus-visible { outline:2px solid var(--rot); outline-offset:3px; }
code, .mono { font-family:"Plex Mono",ui-monospace,"SF Mono",Consolas,monospace; }

/* Kopf- und Fusszeile */
.kopfleiste {
  border-bottom:1px solid var(--linie); background:var(--karte);
  position:sticky; top:0; z-index:5;
}
.kopfleiste .seite { display:flex; align-items:center; justify-content:space-between; gap:16px; height:58px; }
.marke {
  font-family:"Plex Mono",ui-monospace,monospace; font-weight:600; font-size:12.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--tinte); text-decoration:none;
}
.marke span { color:var(--rot-text); }
.navi { display:flex; gap:18px; font-size:14.5px; }
.navi a { color:var(--grau); text-decoration:none; }
.navi a:hover, .navi a[aria-current="page"] { color:var(--tinte); }

.fuss {
  margin-top:72px; border-top:1px solid var(--linie); background:var(--karte);
  padding:26px 0 40px;
}
.fuss .seite { display:flex; flex-wrap:wrap; gap:10px 26px; align-items:baseline; }
.fuss, .fuss a { font-family:"Plex Mono",ui-monospace,monospace; font-size:11.5px; color:var(--grau); }

/* Bausteine */
.eyebrow {
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:11.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--rot-text); margin:0 0 14px;
}
.eyebrow.neutral { color:var(--grau); }
section { margin-top:56px; }
.karte {
  background:var(--karte); border:1px solid var(--linie); border-radius:10px;
  padding:24px 26px;
}
.tag {
  display:inline-block; font-family:"Plex Mono",ui-monospace,monospace;
  font-size:10.5px; font-weight:600; letter-spacing:0.05em;
  border:1px solid var(--linie); border-radius:20px; padding:2px 9px;
  color:var(--grau); white-space:nowrap;
}
.tag.gemessen { color:var(--grau); }
.tag.deklariert { color:var(--gruen); border-color:var(--gruen); }
.tag.blockiert { color:var(--amber); border-color:var(--amberlinie); background:var(--amberbg); }

/* Startseite */
.hero { padding:64px 0 8px; }
.hero .these { font-size:19px; max-width:58ch; margin-top:18px; color:var(--grau); }
.hero .these strong { color:var(--tinte); font-weight:600; }
.pfad {
  display:inline-block; margin-top:22px; font-family:"Plex Mono",ui-monospace,monospace;
  font-size:13px; background:var(--karte); border:1px solid var(--linie);
  border-radius:8px; padding:9px 13px; overflow-x:auto; max-width:100%;
}
.pfad b { color:var(--rot-text); font-weight:600; }

.kennzahlen { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:34px; }
.kennzahl { background:var(--karte); border:1px solid var(--linie); border-radius:10px; padding:16px 18px; }
.kennzahl .wert { font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.kennzahl .was { font-family:"Plex Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--grau); margin-top:2px; }

.stufen { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:16px; }
.stufe { background:var(--karte); border:1px solid var(--linie); border-radius:10px; padding:18px 20px; }
.stufe .nr { font-family:"Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600; color:var(--rot-text); letter-spacing:0.08em; }
.stufe h3 { margin:6px 0 4px; }
.stufe p { font-size:14.5px; color:var(--grau); }

/* Register */
.registerliste { list-style:none; margin:18px 0 0; padding:0; border:1px solid var(--linie); border-radius:10px; overflow:hidden; background:var(--karte); }
.registerliste li { border-bottom:1px solid var(--linie); }
.registerliste li:last-child { border-bottom:none; }
.registerliste a {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  padding:13px 18px; text-decoration:none; color:var(--tinte);
}
.registerliste a:hover { background:var(--feld); }
.registerliste .host { font-family:"Plex Mono",ui-monospace,monospace; font-size:14px; flex:1 1 240px; }
.registerliste .anzahl { font-family:"Plex Mono",ui-monospace,monospace; font-size:12px; color:var(--grau); font-variant-numeric:tabular-nums; }

/* Profilseite */
.profilkopf { padding:44px 0 0; }
.profilkopf h1 { font-family:"Plex Mono",ui-monospace,monospace; font-size:clamp(20px,3.6vw,30px); letter-spacing:-0.01em; word-break:break-all; }
.profilmeta { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:14px; }

.dienste { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.dienst { background:var(--karte); border:1px solid var(--linie); border-radius:10px; padding:14px 18px; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; }
.dienst .name { font-weight:600; flex:1 1 200px; }
.dienst .kat { font-family:"Plex Mono",ui-monospace,monospace; font-size:11px; color:var(--grau); letter-spacing:0.05em; text-transform:uppercase; }
.dienst .hosts { flex-basis:100%; font-family:"Plex Mono",ui-monospace,monospace; font-size:11.5px; color:var(--grau); word-break:break-all; }
.land { font-family:"Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600; padding:2px 7px; border-radius:5px; background:var(--feld); border:1px solid var(--linie); }
.land.drittland { color:var(--amber); background:var(--amberbg); border-color:var(--amberlinie); }

.hostliste { font-family:"Plex Mono",ui-monospace,monospace; font-size:12.5px; color:var(--grau); margin:12px 0 0; padding:0; list-style:none; }
.hostliste li { padding:3px 0; word-break:break-all; }

.hinweis { background:var(--amberbg); border:1px solid var(--amberlinie); border-radius:10px; padding:18px 22px; margin-top:16px; }
.hinweis h3 { color:var(--amber); font-size:15px; }
.hinweis p { font-size:14.5px; color:var(--amber); margin-top:6px; }

.leer { color:var(--grau); font-style:normal; }

/* Tabellen. Gehoeren hierher und nicht in einen <style>-Block einer einzelnen
   Seite: Der Bericht benutzte dieselben Klassen, bekam aber keine Regeln dazu –
   Kopfzeile zusammengelaufen, kein Rahmen, und das seitliche Scrollen im Kasten
   griff nicht. Ausgerechnet die Seite, auf die wir Journalistinnen schicken. */
.tabelle-rahmen { overflow-x:auto; margin-top:14px; }
.tabelle-rahmen table { border-collapse:collapse; width:100%; font-size:14.5px; }
.tabelle-rahmen th { text-align:left; font-family:"Plex Mono",ui-monospace,monospace;
  font-weight:600; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--grau); padding:0 14px 8px 0; border-bottom:1px solid var(--linie); white-space:nowrap; }
.tabelle-rahmen td { padding:10px 14px 10px 0; border-bottom:1px solid var(--linie); vertical-align:top; }
.tabelle-rahmen tr:last-child td { border-bottom:none; }
.tabelle-rahmen td.zahl, .tabelle-rahmen th.zahl { text-align:right; font-family:"Plex Mono",ui-monospace,monospace;
  font-size:13px; white-space:nowrap; }

@media (max-width:700px) {
  /* Die Navigation war eine nicht umbrechende Zeile: Bei 390 px Fensterbreite
     war die Seite 576 px breit, und die hinteren Punkte waren nur durch
     Querscrollen erreichbar. Umbrechen statt ueberlaufen. */
  .kopfleiste .seite { height:auto; flex-wrap:wrap; gap:6px 0; padding-top:10px; padding-bottom:10px; }
  .navi { flex-wrap:wrap; gap:10px 14px; font-size:13.5px; }
}

@media (max-width:560px) {
  .seite { padding:0 16px; }
  .hero { padding:40px 0 4px; }
  .navi { gap:10px 12px; font-size:13.5px; }
}

/* Nichts darf die Seite breiter machen als das Fenster. */
html, body { max-width:100%; overflow-x:hidden; }
img, svg, pre, code { max-width:100%; }