/* Marke Ciphermeter – nur Variablen (K4a). Kontraste gemessen mit tools/kontrast.js, siehe DESIGN.md. */
:root {
  --marke: #0e5a62;        /* Petrol: Weiß auf Marke 7,90:1 */
  --marke-dunkel: #0a434a; /* Hover: 10,97:1 auf Weiß */
  --marke-hell: #e3f0f0;   /* Flächen, Badges: Marke-dunkel darauf 9,40:1 */
  --akzent: #c8962b;       /* Messing: nur Fokusrahmen und Logo, nie Text */
  --flaeche: #f4f6f6;      /* Nebentext #4a5563 darauf 6,99:1 */
  --radius: 10px;
}
/* Seitenspezifisch (wenige Zeilen): Befundfarben im Musterbericht */
.befund { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .82rem; font-weight: 650; white-space: nowrap; }
.befund-ok { background: #e3f3ea; color: #145c34; } .befund-hinweis { background: #fff3d6; color: #6e4300; } .befund-abw { background: #fde7e5; color: #8f1c12; } .befund-info { background: #e8eef5; color: #23415f; }
.formular-feld { margin-bottom: 1.1rem; } .formular-feld input[type=checkbox] { width: auto; min-height: 0; margin-right: .5rem; } .formular-feld .check { display: flex; align-items: flex-start; font-weight: 500; }
/* Tastaturfokus im Formular sichtbar wie bei Links (Kit setzt für Felder nur einen hellen Schatten; bei Checkboxen kaum sichtbar) */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
/* Konfigurationsbeispiele: auf dem Handy waagerecht scrollbar statt Seitenüberlauf */
pre { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: .9rem 1rem; font-size: .88rem; max-width: 100%; }
.bericht h3 { margin-top: 2rem; } .bericht-kopf th { width: 9rem; }
/* Lange Fachwörter und Adressen (z. B. /.well-known/…) dürfen auf dem Handy umbrechen */
h1, h2, p, li, td { overflow-wrap: break-word; hyphens: auto; } p code, li code { overflow-wrap: anywhere; }