/* Aussehen der Oberfläche von Relay Core – Erscheinungsbild Orgalotse (Entscheidung Jürgen 09.11.2026, Möglichkeit A
   „neues Aussehen, Aufbau bleibt“, docs/04-platform/gestaltung.md). Gleich der Vorlage
   des Produkts (oberflaeche.css): gleiche Klassen, gleiche Bedienung wie bisher. Gilt auch für die eingebetteten
   Produktseiten (Klassen knopf, haupt, gefahr, hinweis, fehler, wahl, karte, meldung …).
   Flächen überwiegend weiß, Schwarz nur zum Hervorheben (Anmeldung links). Hellblau für Linien und Akzente, als Schrift
   nur auf Schwarz. Grün nur als Fläche, Linie oder Akzent – nie als Schrift, Schrift auf Grün immer Tinte. Rot nur für
   Dringendes, Fehler und Löschen/Trennen. Grau (#717976) nur für Ränder (auf Weiß 4,47:1 – zu wenig für Text). Linien
   statt Schatten, eckige Knöpfe. Icons: Lucide (ISC) direkt als SVG (app/icons.py), Farbe über currentColor, nichts
   aus dem Netz. Schriften League Spartan (Überschriften) und Inter (Text) liegen beim Programm selbst. */
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("schriften/league-spartan-600.woff2") format("woff2"); }
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("schriften/league-spartan-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schriften/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("schriften/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("schriften/inter-600.woff2") format("woff2"); }

:root {
  --tinte: #000000;           /* Text, schwarze Akzentflächen */
  --schiefer: #1E2321;        /* Fließtext, leiser Text */
  --grau: #717976;            /* nur Ränder (Eingabefelder, Punkte der Schrittliste), nie Text */
  --linie: #B5BDB9;           /* Trennlinien 2 px; leiser Text auf Tinte */
  --hell: #E9FAFE;            /* Hellblau-Fläche: helle Abschnitte, Tabellenkopf */
  --weiss: #FFFFFF;           /* Grundfläche */
  --blau: #88E6FA;            /* Hellblau: Linien, Akzente, Icons auf Schwarz – nie als Schrift auf Weiß */
  --signal: #39DC48;          /* nur Fläche, Linie, Akzent – Schrift darauf immer Tinte */
  --signal-dunkel: #2CC23B;   /* grüner Knopf beim Darüberfahren */
  --notfall: #DB0707;         /* nur Dringendes, Fehler, Löschen/Trennen */
  --notfall-flaeche: #FCEDEB; /* so hell, dass rote Schrift darauf 4,5:1 erreicht */
  --warnung-flaeche: #FFF1C2; /* Admin-Modus und Warnungen (kein Fehler) – wie bisher gut sichtbar */
  --warnung-linie: #C9A400;
  --breite: 70rem;
  --titel: "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--schrift); font-size: 1rem; line-height: 1.6;
  color: var(--schiefer); background: var(--weiss);
}
strong, b { font-weight: 600; color: var(--tinte); }
a { color: var(--tinte); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--signal-dunkel); }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }

/* ---------- Kopfzeile: weiß mit hellblauer Linie wie der Fuß der Landingpage (Entscheidung 10.11.2026) ---------- */
.kopf { background: var(--weiss); color: var(--tinte); border-bottom: 4px solid var(--blau); }
.kopf :focus-visible { outline-color: var(--tinte); }
.kopf .innen {
  max-width: var(--breite); margin: 0 auto; padding: .6rem 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem;
}
.marke {
  display: inline-flex; align-items: center; gap: .65rem; min-height: 44px;
  font-family: var(--titel); font-weight: 700; font-size: 1.4rem; line-height: 1; color: var(--tinte);
  text-decoration: none;
}
.marke:hover { color: var(--tinte); }
/* Bildmarke wie auf der Landingpage: Kreis mit 2-px-Linie, grüner Punkt in der Mitte (Name nur aus
   RELAY_ANZEIGENAME). */
.bildmarke {
  position: relative; display: inline-block; flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid currentColor; background: none;
}
.bildmarke::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--signal);
}
.kopf nav { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1 1 auto; }
.kopf nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border-radius: 0;
  color: var(--schiefer); text-decoration: none; font-size: .95rem; border-bottom: 4px solid transparent;
}
.kopf nav a:hover { color: var(--tinte); border-bottom-color: var(--blau); }
.kopf nav a.aktiv { color: var(--tinte); border-bottom-color: var(--signal); font-weight: 600; }
.kopf .wer { color: var(--schiefer); font-size: .9rem; margin-right: .6rem; }
.kopf button.leise {
  background: transparent; color: var(--tinte); border-color: var(--linie); padding: 0 1rem; margin: 0;
}
.kopf button.leise:hover { background: var(--hell); color: var(--tinte); }

/* Admin-Modus: gelbe Leiste, gut sichtbar */
.adminmodus { background: var(--warnung-flaeche); color: var(--tinte); border-bottom: 3px solid var(--warnung-linie); }
.adminmodus .innen { max-width: var(--breite); margin: 0 auto; padding: .5rem 1.5rem; }
.adminmodus button.leise { margin: .2rem 0 .2rem .4rem; color: var(--tinte); border-color: var(--tinte); }

/* ---------- Inhalt ---------- */
main { flex: 1 0 auto; width: 100%; max-width: var(--breite); margin: 0 auto; padding: 2rem 1.5rem 2.5rem; }
h1, h2 { font-family: var(--titel); color: var(--tinte); font-weight: 700; line-height: 1.15; }
h1 { font-size: 2.3rem; margin: 0 0 1.2rem; }
h2 { font-size: 1.5rem; font-weight: 600; margin: 2rem 0 .7rem; }
h3 { font-size: 1.05rem; font-weight: 600; color: var(--tinte); margin: 1.4rem 0 .5rem; }
main > h1 + p.hinweis { margin-top: -.6rem; }
p { margin: .7rem 0; }
ul { padding-left: 1.3rem; }
footer {
  background: var(--weiss); border-top: 2px solid var(--linie); color: var(--schiefer); font-size: .85rem;
  padding: 1.1rem max(1.5rem, calc((100% - var(--breite)) / 2 + 1.5rem));
}

/* Karten: weiß auf hellem Grund, 2-px-Linie statt Schatten, eckig */
.karte {
  background: var(--weiss); border: 2px solid var(--linie); border-radius: 0;
  padding: 1.4rem 1.6rem; margin: 1.2rem 0;
}
.karte > :first-child { margin-top: 0; }
.karte > :last-child { margin-bottom: 0; }
.karte h2 { margin-top: 0; }
/* Hinweis-Kästen („Noch offen: …“): Hellblau-Fläche, Strich links in Tinte (Entscheidung 10.11.2026) */
.karte.schritt { border-left: 4px solid var(--tinte); background: var(--hell); }
.karte.erledigt { border-left: 4px solid var(--signal); }

/* Aufklappbare Abschnitte sehen aus wie Karten */
details {
  background: var(--weiss); border: 2px solid var(--linie); border-radius: 0; margin: 1.2rem 0; padding: 0 1.6rem;
}
details[open] { padding-bottom: 1.2rem; }
details.karte { padding: 0 1.6rem; }
summary {
  cursor: pointer; color: var(--tinte); font-weight: 600; min-height: 44px; padding: .8rem 0;
  list-style-position: inside;
}
details[open] > summary { border-bottom: 2px solid var(--linie); margin-bottom: .6rem; }

.gross { font-size: 1.15rem; }
.ok { color: var(--tinte); font-weight: 600; }
.fehler { color: var(--notfall); }
.hinweis { color: var(--schiefer); }
small { font-size: .85rem; }

/* Meldungen: weißer Grund, 4-px-Strich links (Grün = gut, Rot = Fehler, Tinte = Info, Gelb = Warnung); Info auf
   Hellblau-Fläche */
.meldung {
  background: var(--weiss); border: 2px solid var(--linie); border-left: 4px solid var(--tinte);
  border-radius: 0; padding: .8rem 1.1rem; margin: 1.2rem 0; color: var(--schiefer);
}
.meldung > :first-child { margin-top: 0; }
.meldung > :last-child { margin-bottom: 0; }
.meldung.ok { border-left-color: var(--signal); color: var(--schiefer); font-weight: 400; }
.meldung.fehler { border-left-color: var(--notfall); color: var(--schiefer); }
.meldung.info { border-left-color: var(--tinte); background: var(--hell); }
.meldung.warnung { border-left-color: var(--warnung-linie); }   /* Warnung (kein Fehler): Gelb wie die Admin-Leiste */

/* ---------- Knöpfe: eckig, mindestens 44 px hoch; Hauptknopf Grün mit Tinte ---------- */
button, .knopf {
  font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.3;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .45rem 1.15rem; margin: .25rem .4rem .25rem 0;
  border: 2px solid var(--tinte); border-radius: 2px; background: var(--weiss); color: var(--tinte);
  text-decoration: none; cursor: pointer; vertical-align: middle; text-align: center;
}
button:hover, .knopf:hover { background: var(--hell); color: var(--tinte); border-color: var(--tinte); }
button.haupt, .knopf.haupt { background: var(--signal); border-color: var(--tinte); color: var(--tinte); }
button.haupt:hover, .knopf.haupt:hover { background: var(--signal-dunkel); border-color: var(--signal-dunkel); color: var(--tinte); }
button.gefahr, .knopf.gefahr { border-color: var(--notfall); color: var(--notfall); background: var(--weiss); }
button.gefahr:hover, .knopf.gefahr:hover { background: var(--notfall); color: var(--weiss); }
button.leise { color: var(--schiefer); border-color: var(--linie); padding: .3rem .9rem; }
.knopf.gross, button.gross { font-size: 1.05rem; min-height: 52px; padding: .7rem 1.6rem; }
form.zeile { display: inline; }

/* ---------- Anleitungen (Schritt für Schritt, z. B. „Von POP3 auf IMAP umstellen“) ---------- */
ol.schritte { padding-left: 1.5rem; margin: .6rem 0; }
ol.schritte > li { margin: .55rem 0; padding-left: .2rem; }
ol.schritte > li::marker { color: var(--tinte); font-weight: 600; }
.wert { font-weight: 600; color: var(--tinte); overflow-wrap: anywhere; }

/* ---------- Schrittliste der Einrichtung (Übersicht): Häkchen, nächster Schritt hervorgehoben ---------- */
ol.einrichtung { list-style: none; padding: 0; margin: .6rem 0; }
ol.einrichtung > li { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem 0; border-top: 2px solid var(--linie); }
ol.einrichtung > li:first-child { border-top: 0; }
ol.einrichtung > li > div { flex: 1; min-width: 0; }
ol.einrichtung > li > div > p, ol.einrichtung > li > div > ul { margin: .3rem 0; }
ol.einrichtung .punkt {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: 50%; border: 2px solid var(--grau); color: var(--schiefer); font-weight: 600; background: var(--weiss);
}
ol.einrichtung li.erledigt .punkt { background: var(--signal); border-color: var(--signal); color: var(--tinte); }
ol.einrichtung li.jetzt .punkt { background: var(--hell); border-color: var(--tinte); color: var(--tinte); }
ol.einrichtung li.jetzt strong { color: var(--tinte); }
/* Nächster Schritt hellblau hinterlegt; die Karte der Schrittliste selbst bleibt weiß (sonst ginge er unter) */
ol.einrichtung > li.jetzt { background: var(--hell); margin: 0 -.8rem; padding: .7rem .8rem; }
.karte.schritt:has(> ol.einrichtung) { background: var(--weiss); }
button[disabled], button[disabled]:hover {
  cursor: not-allowed; background: var(--hell); border-color: var(--linie); color: var(--schiefer);
}

/* ---------- Formulare ---------- */
label { display: block; margin: .35rem 0; font-weight: 500; color: var(--tinte); }
label .hinweis { font-weight: 400; }
label.wahl { display: flex; gap: .6rem; align-items: center; min-height: 44px; font-weight: 400; margin: .1rem 0; }
label.wahl input { width: 1.2rem; height: 1.2rem; accent-color: var(--tinte); flex: none; margin: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--tinte); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input:not([type]),
select, textarea {
  display: block; width: 100%; max-width: 40rem; min-height: 44px; margin-top: .3rem;
  font: inherit; font-weight: 400; color: var(--tinte); background: var(--weiss);
  padding: .5rem .7rem; border: 1px solid var(--grau); border-radius: 2px;
}
::placeholder { color: var(--schiefer); opacity: 1; }   /* 15,9:1 auf Weiß, in allen Browsern gleich */
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border: 2px solid var(--notfall); }
textarea { min-height: 6rem; }
/* Eingabefelder sind Blöcke: ein folgender Zeilenumbruch (Hilfe- oder Fehlertext darunter) ergäbe eine Leerzeile */
input + br, select + br, textarea + br, datalist + br, label.wahl + br { display: none; }
fieldset {
  border: 2px solid var(--linie); border-radius: 0; padding: .6rem 1rem .8rem; margin: .8rem 0; max-width: 40rem;
}
legend { font-weight: 500; color: var(--tinte); padding: 0 .3rem; }
dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .4rem 1.2rem; margin: .8rem 0; }
dt { color: var(--schiefer); }
dd { margin: 0; color: var(--tinte); }

/* ---------- Tabellen: weiße Fläche, Linien; auf dem Handy je Zeile eine Karte (siehe unten) ---------- */
table {
  width: 100%; margin: .8rem 0; background: var(--weiss); border: 2px solid var(--linie); border-radius: 0;
  border-collapse: separate; border-spacing: 0;
}
td, th {
  border-bottom: 2px solid var(--linie); padding: .7rem .9rem; text-align: left; vertical-align: top;
  overflow-wrap: break-word;
}
tr:last-child > td, tr:last-child > th { border-bottom: 0; }
th { color: var(--schiefer); font-weight: 600; font-size: .85rem; background: var(--hell); }
tr:first-child > th:first-child, tr:first-child > th:last-child { border-radius: 0; }
td form { margin: 0; }
.karte table, .meldung table { border: 0; border-radius: 0; margin: .4rem -.9rem; width: calc(100% + 1.8rem); }
.karte th { background: transparent; }

[hidden] { display: none !important; }

/* ---------- Anmeldeseite: zweigeteilt, links schwarz mit blauer Linie ---------- */
.geteilt { flex: 1 0 auto; display: flex; flex-wrap: wrap; }
.buehne {
  flex: 1 1 26rem; background: var(--tinte); color: var(--weiss); border-right: 4px solid var(--blau);
  padding: 3.5rem 3.5rem 3rem; display: flex; flex-direction: column; gap: 3rem;
}
.buehne :focus-visible { outline-color: var(--blau); }
.buehne .marke, .buehne .marke:hover { color: var(--weiss); }
.buehne .marke { font-size: 1.75rem; gap: .9rem; }
.buehne .marke .bildmarke { width: 40px; height: 40px; border-color: var(--blau); }
.buehne .marke .bildmarke::after { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.buehne .botschaft { max-width: 29rem; margin: auto 0; }
.buehne .claim {
  font-family: var(--titel); font-weight: 700; font-size: 3rem; line-height: 1.05; margin: 0 0 1.2rem;
  color: var(--weiss);
}
.buehne .kurztext { font-size: 1.05rem; line-height: 1.6; color: var(--linie); margin: 0; }
.geteilt main {
  flex: 1 1 30rem; max-width: none; margin: 0; padding: 3.5rem 1.5rem;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.anmeldekarte {
  width: 100%; max-width: 28rem; background: var(--weiss); border: 2px solid var(--linie);
  border-top: 4px solid var(--blau); border-radius: 0; padding: 2.5rem;
}
.anmeldekarte h1 { font-size: 2rem; margin: 0 0 1rem; }
.anmeldekarte .karte { border: 0; padding: 0; margin: 0; }
.anmeldekarte .meldung { margin: 0 0 1rem; }
.anmeldekarte .knopf.haupt { display: flex; width: 100%; margin: 1.2rem 0; }
.anmeldekarte button.haupt { display: block; width: 100%; margin: 1.2rem 0; }
.anmeldekarte form p { margin: .9rem 0; }
.anmeldekarte .karte p.hinweis:last-child { border-top: 2px solid var(--linie); padding-top: 1rem; font-size: .9rem; }
.anmeldekarte > p.hinweis:last-child { margin: .4rem 0 0; font-size: .9rem; }

/* ---------- Tabellen gestapelt: Handy (auch quer) und Tablet bis unter 60rem (QA-DL-01, QA-DLN-01) ----------
   Je Zeile eine Karte, Spaltenname (data-label, app/tabellen.py) über dem Wert. Erst ab 60rem (960 px) ist genug Platz
   für Tabellen mit 6–7 Spalten und Knopf; die übrigen Handy-Regeln gelten weiter erst unter 40rem. */
@media (max-width: 59.99rem) {
  table, thead, tbody, tr, th, td { display: block; width: 100%; }
  tr:not(:has(> td)) { display: none; }   /* Kopfzeile: die Namen stehen an den Zellen */
  tr { padding: .6rem .9rem; border-bottom: 2px solid var(--linie); }
  tr:last-child { border-bottom: 0; }
  td, th { border: 0; padding: .2rem 0; }
  th { background: transparent; padding-top: .4rem; }
  td:empty { display: none; }
  td[data-label]::before {
    content: attr(data-label); display: block; color: var(--schiefer); font-size: .8rem; font-weight: 600;
  }
}

/* ---------- Handy ---------- */
@media (max-width: 40rem) {
  .kopf .innen { padding: .5rem 1rem; gap: .2rem 1rem; }
  .kopf nav { order: 3; flex-basis: 100%; margin: 0 -.5rem; }
  .kopf nav a { padding: 0 .55rem; }
  .kopf .wer { margin-left: auto; }
  .adminmodus .innen { padding: .5rem 1rem; }
  main { padding: 1.4rem 1rem 2rem; }
  h1 { font-size: 1.85rem; }
  .karte { padding: 1.1rem 1.1rem; }
  details { padding: 0 1.1rem; }
  details.karte { padding: 0 1.1rem; }
  .karte table, .meldung table { margin: .4rem -1.1rem; width: calc(100% + 2.2rem); }
  .karte tr, .meldung tr { padding: .6rem 1.1rem; }
  dl { grid-template-columns: 1fr; gap: 0; }
  dd { margin-bottom: .5rem; }
  .buehne { padding: 2rem 1.25rem 2.2rem; gap: 1.8rem; border-right: 0; border-bottom: 4px solid var(--blau); }
  .buehne .claim { font-size: 2.2rem; }
  .geteilt main { padding: 1.5rem 1rem 2rem; }
  .anmeldekarte { padding: 1.6rem 1.4rem; }
  .anmeldekarte h1 { font-size: 1.7rem; }
  footer { padding: 1rem; }
}

/* ---------- Betreiber-Bereich: Unterpunkte, Übersicht, Betrieb & Monitoring ---------- */
.unternav { background: var(--weiss); border-bottom: 2px solid var(--linie); }
.unternav .innen { max-width: var(--breite); margin: 0 auto; padding: 0 1.5rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.unternav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; color: var(--schiefer);
  text-decoration: none; font-size: .95rem; border-bottom: 4px solid transparent; }
.unternav a:hover { color: var(--tinte); border-bottom-color: var(--linie); }
.unternav a.aktiv { color: var(--tinte); font-weight: 600; border-bottom-color: var(--signal); }
.zustand { display: inline-block; padding: .05rem .6rem; border: 2px solid var(--tinte); font-weight: 600;
  font-size: .85rem; color: var(--tinte); background: var(--weiss); letter-spacing: .02em; }
.zustand.ok { background: var(--signal); border-color: var(--signal); color: var(--tinte); }
.zustand.warnung, .zustand.unbekannt { background: var(--warnung-flaeche); border-color: var(--warnung-linie); }
.zustand.stoerung { background: var(--notfall); border-color: var(--notfall); color: var(--weiss); }
.zustand.info, .zustand.lokal { background: var(--hell); border-color: var(--linie); }
.zustandszeile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.zweispaltig { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1.2rem; }
.zweispaltig > .karte { margin: 0; }
ul.aufmerksamkeit { list-style: none; padding: 0; margin: .6rem 0 0; }
ul.aufmerksamkeit li { border-top: 2px solid var(--linie); border-left: 4px solid var(--linie); }
ul.aufmerksamkeit li.warnung { border-left-color: var(--warnung-linie); }
ul.aufmerksamkeit li.stoerung { border-left-color: var(--notfall); }
ul.aufmerksamkeit a { display: block; padding: .6rem .8rem; text-decoration: none; min-height: 44px; }
ul.aufmerksamkeit a:hover { background: var(--hell); }
ul.aufmerksamkeit small { display: block; color: var(--schiefer); overflow-wrap: anywhere; }
.pruefungen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .8rem; }
.pruefung { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .8rem 1rem;
  border: 2px solid var(--linie); border-left-width: 4px; background: var(--weiss); min-width: 0; }
.pruefung.ok { border-left-color: var(--signal); }
.pruefung.warnung, .pruefung.unbekannt { border-left-color: var(--warnung-linie); }
.pruefung.stoerung { border-left-color: var(--notfall); }
.pruefung > span:first-child { font-weight: 600; color: var(--tinte); }
.pruefung strong, .pruefung small { overflow-wrap: anywhere; }
.pruefung small { color: var(--schiefer); }
.pruefung a { display: inline-flex; align-items: center; min-height: 44px; }
ul.diagnose { margin: .4rem 0 0; }
ul.diagnose li { overflow-wrap: anywhere; }

/* ---------- Icons (Lucide, ISC; app/icons.py): sparsam, nur zur Orientierung, immer neben Text (aria-hidden) ----------
   Linien in currentColor – auf Weiß in Tinte, nur bei Fehler und Notfall in Rot. Hinweise: Icon links im Rand.
   Überschriften in Mein Konto und Info-Hinweise: Icon im hellblauen Kreis mit 2-px-Rand in Tinte wie die drei Schritte
   der Landingpage (Entscheidung 10.11.2026); Warnung, Fehler und Notfall bleiben ohne Kreis. */
.icon { display: inline-block; flex: none; width: 1.25rem; height: 1.25rem; vertical-align: -.25em; }
.meldung:has(> .icon:first-child) { position: relative; padding-left: 3rem; }
.meldung > .icon:first-child { position: absolute; left: 1rem; top: .95rem; color: var(--tinte); }
.meldung > .icon:first-child + * { margin-top: 0; }
.meldung.fehler > .icon:first-child, .icon.notfall { color: var(--notfall); }
.mit-icon { display: flex; align-items: center; gap: .6rem; }
h2.mit-icon .icon {
  width: 2.5rem; height: 2.5rem; padding: .5rem; border: 2px solid var(--tinte); border-radius: 50%;
  background: var(--hell); color: var(--tinte);
}
@media (max-width: 40rem) {   /* Handy: kleinerer Kreis, damit lange Titel wie bisher in 320 px passen */
  h2.mit-icon .icon { width: 2.1rem; height: 2.1rem; padding: .35rem; }
}
.meldung.info:has(> .icon:first-child) { padding-left: 3.6rem; }
.meldung.info > .icon:first-child {
  left: .8rem; top: .55rem; width: 2rem; height: 2rem; padding: .3rem; border: 2px solid var(--tinte);
  border-radius: 50%; background: var(--hell);
}
ol.einrichtung .punkt .icon { width: 1.1rem; height: 1.1rem; vertical-align: 0; }