/* zerolog Monitoring — Komponenten und Seitenlayout.
 * Nur var(--…) aus tokens.css; kein roher Farbwert in dieser Datei (MASTER.md §4).
 * Mobil zuerst: 16 px Rand, eine Spalte; ab 48em / 64em mehr Spalten. Kein horizontales Scrollen.
 */

/* ---------- Grundlage ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color: var(--text);
  accent-color: var(--text);
  caret-color: var(--text);
  scrollbar-color: var(--rule-strong) transparent;
}

body {
  margin: 0;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  background: var(--bg);
  color: var(--text);
  position: relative;
}

/* Der Schein brennt nur bei frischem Prüflauf (MASTER §1). */
body::after {
  content: "";
  position: fixed;
  inset: auto 0 0 0;
  height: 40vh;
  background: var(--glow-layer);
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  transition: opacity var(--dur-glow) var(--ease-out);
}
html.is-stale body::after { opacity: 0; }

::selection { background: var(--selection-bg); color: var(--selection-fg); }

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

main { flex: 1 0 auto; }
main:focus:not(:focus-visible) { outline: none; }  /* Sprungziel: Maus-Fokus still, Tastatur behält den Ring */

img, svg { max-width: 100%; }

h1, h2, h3, h4 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-head);
  letter-spacing: var(--tracking-head);
  text-wrap: balance;
  hyphens: manual;
  margin: var(--space-5) 0 var(--space-2);
}
h1 { font-size: var(--fs-xl); margin-top: var(--space-4); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); margin-top: var(--space-4); }
h4 { font-size: var(--fs-base); margin-top: var(--space-3); }

p { margin: 0 0 var(--space-2); max-width: var(--measure); text-wrap: pretty; hyphens: auto; }

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--text); }

code, .code, .num, time { font-variant-numeric: tabular-nums; }
code, .code, .code-inline { font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }

ul, ol { padding-left: var(--space-3); margin: 0 0 var(--space-2); }

.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.vh, .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute;
  left: var(--page-pad);
  top: calc(-1 * var(--space-6));
  z-index: var(--z-toast);
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
}
.skip:focus { top: var(--space-2); }

/* ---------- Kopfzeile (§8.1) ---------- */

.site-head { border-bottom: var(--hairline) solid var(--rule); background: var(--bg); }
.head-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.brand-block { min-width: 0; flex: 1 1 14rem; }
.brand {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  letter-spacing: var(--tracking-head);
  display: inline-block;
  min-height: var(--target-min);
  line-height: var(--target-min);
}
.partner { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.partner a { color: var(--text); }

.nav-toggle {
  font: var(--btn-font);
  min-height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  border: var(--border-control) solid var(--btn-secondary-border);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border-radius: var(--radius-none);
  cursor: pointer;
  display: none;
}
.js .nav-toggle { display: inline-block; }
.js .nav:not(.is-open) { display: none; }

.nav { flex-basis: 100%; }
.nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.nav li a, .lang a {
  display: flex; align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-1);
  text-decoration: none;
}
.nav a[aria-current="page"], .lang a[aria-current="true"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--text);
}
.lang { display: flex; gap: var(--space-1); margin: 0; align-items: center; }
.lang abbr { text-decoration: none; }

@media (min-width: 48em) {
  .js .nav-toggle { display: none; }
  .js .nav:not(.is-open), .nav { display: flex; }
  .nav { flex-basis: auto; align-items: center; gap: var(--space-3); }
  .nav ul { flex-direction: row; gap: var(--space-1); }
  .head-inner { align-items: center; }
}

/* ---------- Breadcrumbs (§8.14) ---------- */

.crumbs { font-size: var(--fs-sm); margin-top: var(--space-3); }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.crumbs li + li::before { content: "/"; color: var(--text-dim); padding: 0 var(--space-1); }
.crumbs a { display: inline-block; padding: var(--space-2xs) 0; }

/* ---------- Titel und Einleitung ---------- */

.title { font-size: var(--fs-xl); }
.title-start {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin-top: var(--space-5);
  max-width: 18ch;
}
.lead { font-size: var(--fs-md); color: var(--text-muted); line-height: var(--lh-body); }
.meta, .help { font-size: var(--fs-sm); color: var(--text-muted); }
.empty, .note { color: var(--text-muted); }

/* ---------- Knöpfe (§8.8) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  font: var(--btn-font);
  border-radius: var(--radius-none);
  border: var(--border-control) solid var(--btn-secondary-border);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn, .seg-opt, .seg-link, .nav a, .lang a, .row-link, .filter-links a { touch-action: manipulation; }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-bg); }
.btn-primary:hover { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); }
.btn-secondary:hover { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-danger { background: transparent; color: var(--btn-danger-fg); border-color: var(--btn-danger-border); }
.btn-danger:hover { background: var(--danger-bg); }
.btn[disabled], .btn[aria-busy="true"] {
  color: var(--text-dim);
  border-color: var(--rule);
  background: transparent;
  cursor: not-allowed;
}
.btn-block { width: 100%; }
@media (min-width: 48em) { .btn-block { width: auto; } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); max-width: none; }

/* ---------- Suche + Segmentleiste (§8.2) ---------- */

.search { margin: var(--space-4) 0; max-width: 48rem; }
.search-row { display: flex; gap: 0; margin: var(--space-1) 0 var(--space-3); }
.search-row input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--input-height);
  font: inherit;
  padding: 0 var(--space-2);
  background: var(--input-bg);
  color: var(--input-fg);
  border: var(--border-control) solid var(--input-border);
  border-right: 0;
  border-radius: var(--radius-none);
}
.search-row input:hover { border-color: var(--input-border-hover); }
.search-lg .search-row input, .search-lg .search-row .btn { min-height: calc(var(--target-min) + 0.5rem); }

.field-label { display: block; font-weight: var(--fw-medium); margin: 0 0 var(--space-2xs); }

.seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.seg legend { padding: 0; }
.seg-row { display: flex; background: var(--seg-bg); max-width: 32rem; }
.seg-opt, .seg-link { flex: 1 1 0; position: relative; min-width: 0; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg-opt span, .seg-link {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--target-min);
  padding: 0 var(--space-2);
  color: var(--seg-fg);
  text-decoration: none;
  text-align: center;
}
.seg-opt input:checked + span, .seg-link[aria-current="true"] { background: var(--seg-selected-bg); color: var(--seg-selected-fg); }
.seg-opt input:focus-visible + span { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-width)); }
.seg-links .field-label { margin-bottom: var(--space-2xs); }

/* ---------- Zustand (§4, §5) ---------- */

.glyph {
  width: var(--glyph-size);
  height: var(--glyph-size);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.glyph-lg { width: var(--glyph-size-lg); height: var(--glyph-size-lg); }

.c-ok { color: var(--st-ok); }
.c-suspected { color: var(--st-suspected); }
.c-outage { color: var(--st-outage); }
.c-resolved { color: var(--st-resolved); }
.c-expired { color: var(--st-expired); }
.c-no-data { color: var(--st-no-data); }
.c-stale { color: var(--st-stale); }
.c-up { color: var(--st-up); }
.c-slow { color: var(--st-slow); }
.c-down { color: var(--st-down); }
.c-unknown { color: var(--st-unknown); }
.c-paused { color: var(--st-paused); }

.state { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.state-word { font-weight: var(--fw-medium); }

/* ---------- Statuszeile (§8.3) ---------- */

.statuslines { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.statusline {
  background: var(--statusline-bg);
  border-top: var(--hairline) solid var(--rule);
  border-bottom: var(--hairline) solid var(--rule);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}
.statuslines .statusline { margin: 0; }
.statusline.tint.st-outage, .statusline.tint.st-down { background: var(--st-outage-bg); }
.statusline.tint.st-suspected, .statusline.tint.st-slow { background: var(--st-suspected-bg); }
.statusline-topic { font-size: var(--fs-base); margin: 0 0 var(--space-1); color: var(--text-muted); font-weight: var(--fw-medium); }
.statusline-state { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); }
.state-word-lg { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.statusline-desc { color: var(--text); margin-bottom: var(--space-1); }
.statusline-meta { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* ---------- Listen (§8.4) ---------- */

.rows {
  list-style: none; padding: 0; margin: var(--space-2) 0;
  border-top: var(--hairline) solid var(--rule);
}
.row { border-bottom: var(--hairline) solid var(--rule); }
.row-link {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
  min-height: var(--target-min);
  padding: var(--space-2) 0;
  text-decoration: none;
}
.row-link:hover .row-name { text-decoration: underline; text-decoration-color: var(--text); }
.row-name { font-weight: var(--fw-medium); }
.row-sub { font-size: var(--fs-sm); color: var(--text-muted); }
.row-state { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--fs-sm); }
.row-sep { color: var(--text-dim); }
.row-time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.row-time time { font: inherit; }
@media (min-width: 48em) {
  .row-link { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

.sort { font-size: var(--fs-sm); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.sort a[aria-current="true"] {
  text-decoration-thickness: 2px; text-decoration-color: var(--text); font-weight: var(--fw-medium);
}
/* Status filter looks like the segment bar (§8.2): the active choice is a filled segment, not a thicker line. */
.filter-links { display: flex; flex-wrap: wrap; gap: 0; margin: var(--space-3) 0; background: var(--seg-bg); width: fit-content; max-width: 100%; }
.filter-links a {
  display: inline-flex; align-items: center; min-height: var(--target-min);
  padding: 0 var(--space-3); color: var(--seg-fg); text-decoration: none;
}
.filter-links a:hover { text-decoration: underline; text-decoration-color: var(--text); }
.filter-links a[aria-current="true"] { background: var(--seg-selected-bg); color: var(--seg-selected-fg); text-decoration: none; }

.inline-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.inline-list a { display: inline-flex; align-items: center; min-height: var(--target-min); }
.plain-list { list-style: none; padding: 0; }
.plain-list li { padding: var(--space-1) 0; border-bottom: var(--hairline) solid var(--rule); }

.continents { display: grid; gap: var(--space-4); }
@media (min-width: 64em) { .continents { grid-template-columns: 1fr 1fr; } }
.continent h3 { margin-top: 0; }
.sub-head { color: var(--text-muted); font-weight: var(--fw-medium); font-size: var(--fs-sm); margin: var(--space-3) 0 var(--space-1); }
.country-list { list-style: none; padding: 0; margin: 0; columns: 14rem; column-gap: var(--gutter); }
.country-list li { break-inside: avoid; }
.country-list a { display: flex; align-items: center; gap: var(--space-1); min-height: var(--target-min); text-decoration: none; }
.country-list a:hover span:first-of-type { text-decoration: underline; }

.place-list { list-style: none; padding: 0; columns: 12rem; column-gap: var(--gutter); }
.place-list li { padding: var(--space-2xs) 0; break-inside: avoid; }
.place-list li:target { font-weight: var(--fw-semibold); text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Startseite-Raster (§7) ---------- */

.grid-home { display: grid; gap: var(--space-4); }
@media (min-width: 64em) {
  .grid-home { grid-template-columns: 7fr 5fr; align-items: start; }
  .col-side { position: sticky; top: var(--space-3); }
}
.col-main h2, .col-side h2 { margin-top: var(--space-4); }
.map { margin-top: var(--space-2); }
.map-fallback { padding: var(--space-3); color: var(--text-muted); }
.map-actions .btn { min-width: var(--target-min); }

/* ---------- Ereignisse (§8.5) ---------- */

.event { border-top: var(--hairline) solid var(--rule); padding: var(--space-3) 0; }
.event.is-outage { background: var(--st-outage-bg); padding-left: var(--space-3); padding-right: var(--space-3); }
.event-head { display: flex; gap: var(--space-1); align-items: flex-start; margin: 0 0 var(--space-2xs); font-size: var(--fs-md); }
.event-head .glyph { margin-top: 0.15em; }
.event-state { font-weight: var(--fw-medium); margin: 0 0 var(--space-1); }
.articles-title { font-size: var(--fs-base); margin: var(--space-2) 0 var(--space-1); }
.articles { list-style: none; padding: 0; margin: 0; }
.articles li { padding: var(--space-1) 0; }
.article { display: block; }
.article-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
.articles .meta { display: block; }
details.more > summary, details.legend > summary {
  cursor: pointer;
  min-height: var(--target-min);
  display: flex; align-items: center;
  color: var(--text);
  text-decoration: underline; text-decoration-color: var(--link-underline);
}
.legend ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
section.legend h3 { font-size: var(--fs-base); }

/* ---------- Hinweise ---------- */

.notice {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-3);
  margin: var(--space-3) 0;
  background: var(--bg-raised);
  border-top: var(--hairline) solid var(--rule);
  border-bottom: var(--hairline) solid var(--rule);
}
.notice p { margin: 0; }
.notice-danger { background: var(--danger-bg); color: var(--text); }
.notice-danger .glyph { color: var(--danger); }
.notice-ok { background: var(--success-bg); }
.notice-ok .glyph { color: var(--success); }
.notice-info .glyph { color: var(--st-no-data); }
.notice[hidden] { display: none; }

.cta-band { border-top: var(--hairline) solid var(--rule); margin-top: var(--space-6); padding-top: var(--space-2); }
.callout { background: var(--bg-raised); padding: var(--space-3); border-top: var(--hairline) solid var(--rule); border-bottom: var(--hairline) solid var(--rule); }
.danger-zone { border-top: var(--hairline) solid var(--danger); margin-top: var(--space-6); }

/* ---------- Formulare (§8.7) ---------- */

.form { max-width: var(--measure); margin: var(--space-3) 0; }
.field { margin: 0 0 var(--space-4); border: 0; padding: 0; min-width: 0; }
.field .help { margin: 0 0 var(--space-1); max-width: var(--measure-narrow); }
.optional { font-weight: var(--fw-regular); color: var(--text-muted); }
.field input[type="text"], .field input[type="url"], .field input[type="email"], .field input[type="search"],
.field select, .field textarea, .copy-block textarea {
  width: 100%;
  min-height: var(--input-height);
  font: inherit;
  padding: var(--space-1) var(--space-2);
  background: var(--input-bg);
  color: var(--input-fg);
  border: var(--border-control) solid var(--input-border);
  border-radius: var(--radius-none);
}
.field textarea { min-height: calc(5 * var(--lh-body) * 1em + var(--space-2)); resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--input-border-hover); }
::placeholder { color: var(--input-placeholder); opacity: 1; }
/* Type-qualified so it matches the (0,2,1) base and hover rules above; later source order then wins. */
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"],
.field input[aria-invalid="true"]:hover, .field select[aria-invalid="true"]:hover, .field textarea[aria-invalid="true"]:hover {
  border-color: var(--input-border-invalid);
  border-width: var(--border-control-invalid);
}
.err { display: flex; gap: var(--space-2xs); align-items: center; color: var(--danger); font-size: var(--fs-sm); margin: var(--space-1) 0 0; }
.err .glyph { width: 1rem; height: 1rem; }
.group { border: 0; border-top: var(--hairline) solid var(--rule); padding: var(--space-3) 0 0; margin: var(--space-4) 0; min-width: 0; }
.group > legend { font-size: var(--fs-md); font-weight: var(--fw-semibold); padding: 0; }
.radios .radio { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); cursor: pointer; }
.radios .radio input { width: 1.25rem; height: 1.25rem; margin: 0; }
.error-summary {
  background: var(--danger-bg);
  padding: var(--space-3);
  margin: 0 0 var(--space-4);
  border-top: var(--hairline) solid var(--danger);
  border-bottom: var(--hairline) solid var(--danger);
}
.error-summary h2 { font-size: var(--fs-md); margin: 0 0 var(--space-1); }
.error-summary a { color: var(--text); }
.turnstile { min-height: calc(var(--target-min) + 4.5rem); }

.copy-block { display: grid; gap: var(--space-1); margin: var(--space-3) 0; max-width: var(--measure); }
.copy-block textarea { font-family: var(--font-mono); font-size: var(--fs-sm); background: var(--bg-sunken); resize: vertical; }
.copy-block .btn { justify-self: start; }
.code-inline { background: var(--bg-sunken); padding: var(--space-1) var(--space-2); }

/* ---------- Anfragen-Board ---------- */

.board { list-style: none; padding: 0; margin: var(--space-3) 0; border-top: var(--hairline) solid var(--rule); }
.board-item { display: grid; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: var(--hairline) solid var(--rule); }
.board-item h3 { margin: 0 0 var(--space-2xs); font-size: var(--fs-md); }
.board-vote { display: flex; align-items: center; gap: var(--space-2); }
.board-vote p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
@media (min-width: 48em) {
  .board-item { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .board-vote { flex-direction: column; align-items: flex-end; }
}

/* ---------- Tabellen (§8.12) ---------- */

/* Breite Tabellen scrollen in einem eigenen, beschrifteten Bereich (Tastatur: tabindex="0").
 * html/body schneiden per overflow-x: clip ab (MASTER §7); ohne diesen Behälter ginge Inhalt
 * bei 320 px / 400 % Zoom verloren statt zu scrollen (WCAG 1.4.10). */
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin: var(--space-3) 0; max-width: 100%; }
.table-scroll:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.table-scroll > .data { margin: 0; }
.data.sources th[scope="row"] { white-space: nowrap; }
.data.sources td:last-child { min-width: 16rem; }
@media (max-width: 47.99em) { .data.sources th[scope="row"] { white-space: normal; } .data.sources td:last-child { min-width: 0; } }
/* /methodik source list: server-side country filter (works without JS) and closed per-country groups */
.src-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); max-width: var(--measure); margin: var(--space-3) 0; }
.src-filter .field { flex: 1 1 14rem; margin: 0; }
.src-groups { border-bottom: var(--hairline) solid var(--rule); }
.src-group { border-top: var(--hairline) solid var(--rule); }
.src-group > summary .num { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.src-group > .table-scroll { margin-top: 0; }

.data { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--fs-sm); }
.data caption { text-align: left; color: var(--text-muted); padding-bottom: var(--space-1); caption-side: top; }
.data th, .data td { text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: var(--hairline) solid var(--rule); vertical-align: top; }
.data thead th, .data thead td { border-bottom-color: var(--rule-strong); font-weight: var(--fw-semibold); }
.data .num { text-align: right; font-family: var(--font-mono); }
.data code { font-size: var(--fs-xs); }
@media (max-width: 47.99em) {
  .data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data tr { display: grid; gap: var(--space-2xs); padding: var(--space-2) 0; border-bottom: var(--hairline) solid var(--rule); }
  .data th, .data td { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: var(--space-2); border: 0; padding: 0; text-align: left; }
  .data .num { text-align: left; }
  .data [data-label]::before { content: attr(data-label); color: var(--text-muted); font-family: var(--font-sans); }
  .data.history td { grid-template-columns: minmax(7rem, 40%) 1fr; }
}

/* Uptime: ein Strichcode wie auf githubstatus, darunter der Satz mit den Zahlen (§8.12).
 * Der Balken ist Zierde (aria-hidden), die Zeile darunter trägt die Information. Keine Zahlenkacheln (§3). */
.uptime { margin: var(--space-2) 0 var(--space-3); max-width: var(--measure); }
.uptime-bars {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(1px, var(--uptime-bar-w));
  gap: var(--uptime-bar-gap); height: var(--uptime-bar-h); justify-content: start;
}
.uptime-bars li { background: var(--uptime-ok); }
.uptime-bars .bar-partial { background: var(--uptime-partial); }
.uptime-bars .bar-down { background: var(--uptime-down); }
.uptime-bars .bar-none { background: transparent; box-shadow: inset 0 0 0 var(--hairline) var(--uptime-none); }
.uptime-axis {
  display: flex; justify-content: space-between; max-width: calc(90 * (var(--uptime-bar-w) + var(--uptime-bar-gap)));
  font-size: var(--fs-xs); color: var(--text-dim); margin: var(--space-2xs) 0 var(--space-2);
}
.uptime-axis .axis-30 { display: none; }
.uptime-line { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); margin: 0 0 var(--space-1); }
@media (max-width: 22.49em) {  /* unter 360 px: letzte 30 Tage */
  .uptime-bars li:nth-child(-n+60) { display: none; }
  .uptime-axis { max-width: calc(30 * (var(--uptime-bar-w) + var(--uptime-bar-gap))); }
  .uptime-axis .axis-90 { display: none; }
  .uptime-axis .axis-30 { display: inline; }
}
@media (forced-colors: active) {
  .uptime-bars li { background: CanvasText; forced-color-adjust: none; }
  .uptime-bars .bar-none { background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
}

/* ---------- Methodik / Fliesstext ---------- */

.prose { max-width: var(--measure); }
.prose li { margin-bottom: var(--space-1); }
.toc ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.toc a { display: inline-flex; min-height: var(--target-min); align-items: center; }
.coverage tbody tr:target { background: var(--bg-sunken); }

/* ---------- Fusszeile (§8.11) ---------- */

.site-foot { border-top: var(--hairline) solid var(--rule); margin-top: var(--space-7); padding: var(--space-4) 0 var(--space-5); background: var(--bg); }
.foot-groups { display: grid; gap: var(--space-4); }
@media (min-width: 48em) { .foot-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-foot h2 { font-size: var(--fs-sm); margin: 0 0 var(--space-1); }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin: 0 0 var(--space-1); }
.site-foot li a { display: inline-flex; align-items: center; min-height: var(--target-min); }
.foot-desc { display: block; font-size: var(--fs-sm); color: var(--text-muted); }
.disclaimer { font-size: var(--fs-sm); color: var(--text-muted); }
.foot-last { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); }
html.is-fresh .foot-last .glyph { color: var(--st-resolved); }
html.is-stale .foot-last .glyph { color: var(--st-stale); }

/* ---------- Druck und Systemfarben ---------- */

@media (forced-colors: active) {
  .glyph { forced-color-adjust: auto; }
  .seg-opt input:checked + span, .seg-link[aria-current="true"], .filter-links a[aria-current="true"] { outline: 2px solid CanvasText; }
}

@media print {
  body::after, .nav, .nav-toggle, .search, .map, .btn-row, .skip { display: none !important; }
}