/* ------------------------------------------------------------------
   GOfari Statusseite.
   Keine fremden Herkuenfte: keine Schrift, kein Skript, kein Bild von aussen.
   Die Inhaltsrichtlinie erlaubt daher script-src 'self' ohne Ausnahme.
   ------------------------------------------------------------------ */

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

:root {
  /* Grundfläche: dunkles Waldgrün */
  --forest-900: #05100c;
  --forest-800: #0a1a14;
  --forest-700: #10251e;
  --forest-600: #17322a;

  /* Helle mineralische Inhaltsflächen */
  --mineral-050: #fafbf9;
  --mineral-100: #f1f4f0;
  --mineral-200: #e3e8e2;

  /* Signalrot: ausschliesslich Schriftzug und Fokus */
  --signal: #ff4438;

  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 11px;
  --radius-sm: 8px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --pad: 20px;
  --tap: 44px;
}

/* --- Dunkel (Vorgabe der Marke) --- */
:root, :root[data-theme="dark"] {
  --page: var(--forest-900);
  --band: #030a08;
  --surface: var(--forest-800);
  --surface-2: var(--forest-700);
  --surface-3: var(--forest-600);
  --line: rgba(212, 232, 223, .11);
  --line-strong: rgba(212, 232, 223, .21);
  --ink: #eff5f2;
  --ink-2: #b4c5bd;
  --ink-3: #83968e;
  --ok-fg: #4ecb93;
  --ok-bg: rgba(78, 203, 147, .13);
  --ok-line: rgba(78, 203, 147, .34);
  --degraded-fg: #e8b04a;
  --degraded-bg: rgba(232, 176, 74, .13);
  --degraded-line: rgba(232, 176, 74, .34);
  --outage-fg: #ff8272;
  --outage-bg: rgba(255, 130, 114, .13);
  --outage-line: rgba(255, 130, 114, .34);
  --unknown-fg: #9caea6;
  --unknown-bg: rgba(156, 174, 166, .13);
  --unknown-line: rgba(156, 174, 166, .32);
  --planned-fg: #82b6d4;
  --planned-bg: rgba(130, 182, 212, .13);
  --planned-line: rgba(130, 182, 212, .34);
  --bar-empty: rgba(212, 232, 223, .12);
  --shadow: 0 16px 40px rgba(0, 0, 0, .40);
}

/* --- Hell --- */
:root[data-theme="light"] {
  --page: var(--mineral-100);
  --band: var(--forest-800);
  --surface: #ffffff;
  --surface-2: var(--mineral-050);
  --surface-3: var(--mineral-200);
  --line: rgba(10, 32, 24, .11);
  --line-strong: rgba(10, 32, 24, .22);
  --ink: #0e1d17;
  --ink-2: #435449;
  --ink-3: #64736b;
  --ok-fg: #16764f;
  --ok-bg: rgba(22, 118, 79, .10);
  --ok-line: rgba(22, 118, 79, .28);
  --degraded-fg: #8a5f0c;
  --degraded-bg: rgba(138, 95, 12, .10);
  --degraded-line: rgba(138, 95, 12, .26);
  --outage-fg: #a53127;
  --outage-bg: rgba(165, 49, 39, .09);
  --outage-line: rgba(165, 49, 39, .26);
  --unknown-fg: #53625b;
  --unknown-bg: rgba(83, 98, 91, .10);
  --unknown-line: rgba(83, 98, 91, .26);
  --planned-fg: #2f5b74;
  --planned-bg: rgba(47, 91, 116, .10);
  --planned-line: rgba(47, 91, 116, .26);
  --bar-empty: rgba(10, 32, 24, .11);
  --shadow: 0 14px 34px rgba(14, 29, 23, .09);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --page: var(--mineral-100);
    --band: var(--forest-800);
    --surface: #ffffff;
    --surface-2: var(--mineral-050);
    --surface-3: var(--mineral-200);
    --line: rgba(10, 32, 24, .11);
    --line-strong: rgba(10, 32, 24, .22);
    --ink: #0e1d17;
    --ink-2: #435449;
    --ink-3: #64736b;
    --ok-fg: #16764f;
    --ok-bg: rgba(22, 118, 79, .10);
    --ok-line: rgba(22, 118, 79, .28);
    --degraded-fg: #8a5f0c;
    --degraded-bg: rgba(138, 95, 12, .10);
    --degraded-line: rgba(138, 95, 12, .26);
    --outage-fg: #a53127;
    --outage-bg: rgba(165, 49, 39, .09);
    --outage-line: rgba(165, 49, 39, .26);
    --unknown-fg: #53625b;
    --unknown-bg: rgba(83, 98, 91, .10);
    --unknown-line: rgba(83, 98, 91, .26);
    --planned-fg: #2f5b74;
    --planned-bg: rgba(47, 91, 116, .10);
    --planned-line: rgba(47, 91, 116, .26);
    --bar-empty: rgba(10, 32, 24, .11);
    --shadow: 0 14px 34px rgba(14, 29, 23, .09);
  }
}

html { -webkit-text-size-adjust: 100%; background: var(--band); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
  border-radius: 5px;
}

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

.skip-link {
  position: absolute;
  left: 12px; top: -80px;
  z-index: 30;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--signal);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ================= Dunkles Kopfband ================= */

.band {
  position: relative;
  overflow: hidden;
  background: var(--band);
  color: #eff5f2;
  padding-top: env(safe-area-inset-top);
}


.band-inner { position: relative; padding: 14px 0 26px; }

.band-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
}

/* Zeichen und Wortmarke folgen src/components/brand.tsx und globals.css:
   Hoehe und Breite der Marke haengen an der Schriftgroesse, damit beide
   zusammen skalieren. 1.25em zu 0.72em ist das Seitenverhaeltnis 512:296. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding-right: 4px;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.08em;
  line-height: 1;
  text-decoration: none;
  color: inherit;
}
.brand:hover .brand-mark { color: #ffffff; }
.brand:hover .word { text-decoration: underline; text-underline-offset: 4px; }
.brand-mark {
  height: 0.72em;
  width: 1.25em;
  flex: 0 0 auto;
  overflow: visible;
  color: #e6efe9;
}
.brand-wordmark { display: inline-flex; align-items: baseline; }
.brand .go { color: var(--signal); }
.brand .word { color: #ffffff; }

.band-spacer { flex: 1; }

.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 13px;
  border: 1px solid rgba(230, 245, 238, .20);
  border-radius: 999px;
  background: rgba(230, 245, 238, .06);
  color: #cfe3da;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ghost-button:hover { color: #fff; border-color: rgba(230, 245, 238, .38); }
.ghost-button svg { display: block; }

.band h1 {
  margin: 20px 0 0;
  font-size: clamp(26px, 7.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -.026em;
  font-weight: 700;
  color: #ffffff;
}

.band-meta {
  margin: 9px 0 0;
  font-size: 13.5px;
  color: rgba(226, 240, 234, .64);
}
.band-meta .sep { padding: 0 7px; opacity: .55; }

/* ================= Gesamtzustand ================= */

.status-card {
  margin-top: -14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.status-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 17px var(--pad);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.018em;
  border-bottom: 1px solid var(--line);
}
.status-banner .glyph {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: currentColor;
}
.status-banner .glyph svg { width: 18px; height: 18px; display: block; color: var(--surface); }

.status-banner.is-operational { color: var(--ok-fg);       background: var(--ok-bg); }
.status-banner.is-degraded    { color: var(--degraded-fg); background: var(--degraded-bg); }
.status-banner.is-outage      { color: var(--outage-fg);   background: var(--outage-bg); }
.status-banner.is-unknown     { color: var(--unknown-fg);  background: var(--unknown-bg); }
.status-banner.is-planned     { color: var(--planned-fg);  background: var(--planned-bg); }

.status-body { padding: 16px var(--pad) 18px; }
.status-body p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

.affected {
  display: none;
  align-items: center;
  gap: 9px;
  margin-top: 14px !important;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  border: 1px solid currentColor;
  font-size: 14px;
  font-weight: 600;
}
.affected svg { flex: none; width: 17px; height: 17px; }
.affected b { font-weight: 700; }
[data-overall="degraded"] .affected,
[data-overall="outage"] .affected,
[data-overall="unknown"] .affected,
[data-overall="planned"] .affected { display: flex; }
[data-overall="degraded"] .affected { color: var(--degraded-fg); background: var(--degraded-bg); border-color: var(--degraded-line); }
[data-overall="outage"]   .affected { color: var(--outage-fg);   background: var(--outage-bg);   border-color: var(--outage-line); }
[data-overall="unknown"]  .affected { color: var(--unknown-fg);  background: var(--unknown-bg);  border-color: var(--unknown-line); }
[data-overall="planned"]  .affected { color: var(--planned-fg);  background: var(--planned-bg);  border-color: var(--planned-line); }

/* ================= Abschnitte ================= */

section.block { margin-top: 30px; }

.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 0 2px;
}
.block-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}

.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}
.segmented button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.segmented button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}

/* ================= Bereichsliste (eine Karte, Zeilen) ================= */

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  overflow: hidden;
}

.service { border-bottom: 1px solid var(--line); }
.service:last-child { border-bottom: 0; }

.service-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 15px var(--pad) 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.service-row:hover { background: var(--surface-2); }

.service-mark {
  flex: none;
  width: 21px; height: 21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: currentColor;
}
.service-mark svg { width: 14px; height: 14px; display: block; color: var(--surface); }
.service-mark.is-operational { color: var(--ok-fg); }
.service-mark.is-degraded    { color: var(--degraded-fg); }
.service-mark.is-outage      { color: var(--outage-fg); }
.service-mark.is-unknown     { color: var(--unknown-fg); }
.service-mark.is-planned     { color: var(--planned-fg); }

.service-name {
  flex: 1;
  min-width: 0;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ink);
}

.service-state { flex: none; font-size: 13px; font-weight: 650; }
.service-state.is-operational { color: var(--ok-fg); }
.service-state.is-degraded    { color: var(--degraded-fg); }
.service-state.is-outage      { color: var(--outage-fg); }
.service-state.is-unknown     { color: var(--unknown-fg); }
.service-state.is-planned     { color: var(--planned-fg); }

.chev { flex: none; color: var(--ink-3); transition: transform .18s ease; }
.service-row[aria-expanded="true"] .chev { transform: rotate(180deg); }

.service-body { padding: 0 var(--pad) 17px; }

/* Verlaufsbalken: dick und gerundet wie in der Vorlage */
.bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  touch-action: pan-y;
}
.bars[data-period="90"] { gap: 1.5px; }

.bar {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--bar-empty);
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.bars[data-period="90"] .bar { border-radius: 2px; }
/* Vergrösserte Berührfläche ohne sichtbares Wachstum */
.bar::after { content: ""; position: absolute; inset: -11px -1px; }

.bar[data-day-state="operational"] { background: var(--ok-fg); }
.bar[data-day-state="degraded"]    { background: var(--degraded-fg); height: 68%; }
.bar[data-day-state="outage"]      { background: var(--outage-fg); }
.bar[data-day-state="planned"] {
  height: 68%;
  background: repeating-linear-gradient(135deg, var(--planned-fg) 0 3px, color-mix(in srgb, var(--planned-fg) 35%, transparent) 3px 6px);
}
.bar[data-day-state="unknown"] {
  height: 46%;
  background: repeating-linear-gradient(135deg, var(--unknown-fg) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--unknown-fg) 60%, transparent);
}
.bar[aria-current="true"] { filter: brightness(1.2); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px currentColor; }
.bar:hover { filter: brightness(1.14); }

.uptime {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-3);
}
.uptime .value {
  font-size: 15.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.uptime .value.is-operational { color: var(--ok-fg); }
.uptime .value.is-degraded    { color: var(--degraded-fg); }
.uptime .value.is-outage      { color: var(--outage-fg); }
.uptime .value.is-unknown     { color: var(--unknown-fg); }
.uptime .value.is-planned     { color: var(--planned-fg); }

/* Aufgeklappter Bereich */
.service-detail {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.service-detail.is-open { display: block; }

.readout {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-2);
}
.readout b { color: var(--ink); font-weight: 650; }
.readout .marker { flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.readout.is-operational { color: var(--ok-fg); }
.readout.is-degraded    { color: var(--degraded-fg); }
.readout.is-outage      { color: var(--outage-fg); }
.readout.is-unknown     { color: var(--unknown-fg); }
.readout.is-planned     { color: var(--planned-fg); }

.service-detail .desc {
  margin: 12px 0 0;
  font-size: 14.5px;
  color: var(--ink-2);
  max-width: 52ch;
}

/* ================= Legende ================= */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 13px;
  padding: 0 4px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-swatch { width: 9px; border-radius: 999px; flex: none; }
.legend-swatch.is-operational { background: var(--ok-fg); height: 17px; }
.legend-swatch.is-degraded    { background: var(--degraded-fg); height: 12px; }
.legend-swatch.is-outage      { background: var(--outage-fg); height: 17px; }
.legend-swatch.is-unknown {
  height: 8px;
  background: repeating-linear-gradient(135deg, var(--unknown-fg) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--unknown-fg) 60%, transparent);
}

/* ================= Meldungen ================= */

.incident {
  --incident-accent: var(--unknown-fg);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.incident::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--incident-accent);
}
.incident.is-operational { --incident-accent: var(--ok-fg); }
.incident.is-degraded { --incident-accent: var(--degraded-fg); }
.incident.is-outage { --incident-accent: var(--outage-fg); }
.incident.is-unknown { --incident-accent: var(--unknown-fg); }
.incident.is-planned { --incident-accent: var(--planned-fg); }
.incident + .incident,
.incident-more-list .incident:first-child { margin-top: 9px; }

.incident-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title tag"
    "date date";
  align-items: center;
  gap: 3px 10px;
  width: 100%;
  min-height: 68px;
  padding: 12px 15px 12px 19px;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
}
.incident-toggle {
  grid-template-columns: minmax(0, 1fr) auto 18px;
  grid-template-areas:
    "title tag chev"
    "date date chev";
  cursor: pointer;
}
.incident-toggle:hover { background: var(--surface-2); }
.incident-title {
  grid-area: title;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -.014em;
}
.tag {
  grid-area: tag;
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  border: 1px solid currentColor;
}
.tag.is-operational { color: var(--ok-fg);       background: var(--ok-bg);       border-color: var(--ok-line); }
.tag.is-degraded    { color: var(--degraded-fg); background: var(--degraded-bg); border-color: var(--degraded-line); }
.tag.is-outage      { color: var(--outage-fg);   background: var(--outage-bg);   border-color: var(--outage-line); }
.tag.is-unknown     { color: var(--unknown-fg);  background: var(--unknown-bg);  border-color: var(--unknown-line); }
.tag.is-planned     { color: var(--planned-fg);  background: var(--planned-bg);  border-color: var(--planned-line); }
.incident-date {
  grid-area: date;
  min-width: 0;
  font-size: 12px;
  color: var(--ink-3);
}
.incident-toggle .chev { grid-area: chev; justify-self: end; }
.incident-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.incident-details {
  padding: 0 15px 15px 19px;
  border-top: 1px solid var(--line);
}
.incident-details[hidden],
.incident-more-list[hidden] { display: none; }

.timeline {
  list-style: none;
  margin: 13px 0 0;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--line-strong);
}
.timeline li { position: relative; padding-bottom: 12px; font-size: 13.5px; color: var(--ink-2); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -23px; top: 7px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line-strong);
}
.timeline li.is-resolved::before { border-color: var(--ok-fg); background: var(--ok-fg); }
.timeline .stamp {
  display: block;
  font-family: var(--font-num);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  margin-bottom: 2px;
}

.empty-state {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14.5px;
  margin-bottom: 9px;
}
.empty-state > svg { flex: none; color: var(--ok-fg); }
.empty-state .empty-text { flex: 1; min-width: 0; }

.incident-more {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: 9px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.incident-more:hover { color: var(--ink); background: var(--surface-2); }


/* ================= Fuss ================= */

.foot {
  margin-top: 34px;
  padding: 24px 0 calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
}
.foot p { margin: 0 0 11px; max-width: 62ch; }
.foot .rule {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

/* ================= Enge Geräte (320 px) ================= */

@media (max-width: 359px) {
  :root { --pad: 15px; }
  .wrap { padding-left: 12px; padding-right: 12px; }
  .brand { font-size: 19px; gap: 0.4rem; }
  .ghost-button span { display: none; }
  .ghost-button { padding: 0; }
  .band h1 { font-size: 25px; }
  .band-meta { font-size: 12.5px; }
  .status-banner { font-size: 17px; padding: 15px var(--pad); gap: 10px; }
  .block-head h2 { font-size: 17.5px; }
  .block-head { flex-direction: column; align-items: stretch; }
  .segmented { align-self: flex-start; }
  .service-name { font-size: 15.5px; }
  .service-state { font-size: 12px; }
  .preview-choices { grid-template-columns: 1fr 1fr; }
}

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


/* ================= Ladezustand und Abrufabbruch ================= */

.laedt .status-banner,
.laedt .service-state,
.laedt .uptime .value { color: var(--ink-3); }

.abruf-fehler {
  display: none;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  border: 1px solid var(--unknown-line);
  background: var(--unknown-bg);
  color: var(--unknown-fg);
  font-size: 14px;
  font-weight: 600;
}
body[data-abruf="fehler"] .abruf-fehler { display: flex; }