/* =====================================================================
   safeaddress.css — Designsystem der Spicy-Media-SafeAddress-Plattform

   VERBINDLICHE GRUNDLAGE
   ----------------------
   Masterplan Kapitel 06 "Designsystem für die Website" (S. 11):
     Farben        Schwarz #090909, Spicy Rot #F01414, Weiß #FFFFFF,
                   ruhiges Grau #F2F3F5. Grün NUR für Freigaben,
                   Amber NUR für Warnungen.
     Logo          Original unverzerrt auf dunklem Grund, genug Freiraum,
                   keine Effekte über dem Schriftzug.
     Typografie    Kräftige moderne Sans-Serif für Überschriften,
                   sehr gut lesbare Sans-Serif für Rechtstexte.
                   KEINE verspielte Schrift im Impressum.
     Stil          Premium, ruhig, sicher, erwachsen. Keine Angstwerbung,
                   keine blinkenden Countdown-Tricks, kein überladenes
                   Creator-Kitschdesign.
     Accessibility Mindestens 4,5:1 für Fließtext, Tastaturbedienung,
                   sichtbarer Fokus, echte Überschriften, Alt-Texte,
                   200 % Zoom.

   Zusätzlich Hausregel (CLAUDE.md, Nutzerwunsch 12.08.2026):
   "die ganze seite soll auch augenschonend sein ... egal was wir machen
   immer augenschonend." Deshalb hier bewusst:
     - Grundfläche ist NICHT reines Schwarz-auf-Weiß-Geblitze, sondern ein
       tiefes, leicht entsättigtes Dunkel (#090909 als Basis, Flächen
       darüber minimal aufgehellt) → kein harter Leuchtkasten-Effekt.
     - Fließtext ist NICHT reines #FFFFFF auf #090909 (Kontrast 20,4:1 —
       das ist der berüchtigte "Halation"-Effekt, der bei längeren Texten
       im Dunkelmodus flimmert und die Augen ermüdet). Stattdessen
       --text-normal = #E6E7EA → Kontrast 15,1:1. Immer noch weit über der
       WCAG-AAA-Schwelle von 7:1, aber deutlich ruhiger zu lesen.
     - Kein Glow, kein Neon, keine Dauer-Animation. Bewegung nur als
       kurze, zurückhaltende Übergänge — und bei prefers-reduced-motion
       vollständig aus.

   ⚠️ ZUR ROTEN FARBE — bitte nicht "vereinfachen"
   Spicy Rot #F01414 auf #090909 hat einen Kontrast von 4,55:1. Das reicht
   für Fließtext exakt und ohne jede Reserve. Sobald jemand den Hintergrund
   einer Karte auch nur leicht aufhellt, fällt es unter 4,5:1 und die Seite
   ist nicht mehr barrierefrei. Deshalb gilt in diesem Projekt:
       --rot        NUR für Flächen, Linien, Ränder, Logo-Umfeld und
                    große/fette Schrift ab 24px bzw. 19px+bold.
       --rot-text   (#FF6B5E, Kontrast 8,1:1) für JEDE rote Schrift in
                    normaler Größe — Links, Auszeichnungen, Eyebrows.
   Wer das vertauscht, bricht Kapitel 13 "Barrierefreiheit".
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Schrift
   Selbst gehostet wäre besser (kein externer Aufruf, Kapitel 11
   "Datensparsamkeit"), ist aber erst sinnvoll, wenn die Schriftdateien
   im Repo liegen. Bis dahin bewusst die System-Schriftfamilie: sie ist
   auf jedem Gerät sofort da, verursacht KEINEN externen Request (also
   auch keine Google-Fonts-Datenschutzfrage) und ist auf allen Plattformen
   eine kräftige, moderne, sehr gut lesbare Sans-Serif — genau das, was
   Kapitel 06 verlangt.
   --------------------------------------------------------------------- */
:root {
  --schrift: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui,
             -apple-system, "Helvetica Neue", Arial, sans-serif;
  --schrift-zahlen: "SF Mono", "Cascadia Mono", "Segoe UI Mono",
                    ui-monospace, "Roboto Mono", monospace;

  /* -------------------------------------------------------------------
     2. Farben
     ------------------------------------------------------------------- */

  /* Flächen — von tief nach hoch. Jede Stufe ist absichtlich klein,
     damit Karten sich abheben, ohne dass irgendwo ein heller Block
     ins Auge sticht. */
  --grund:        #090909;   /* Masterplan-Schwarz, die Grundfläche      */
  --flaeche-1:    #101011;   /* Karten, Kästen                            */
  --flaeche-2:    #17171A;   /* Karte auf Karte, Tabellenkopf             */
  --flaeche-3:    #1F1F23;   /* Eingabefelder, Hover                      */
  --linie:        #2A2A30;   /* normale Trennlinie                        */
  --linie-stark:  #3A3A42;   /* betonte Trennlinie, Rand um Eingaben      */

  /* Schrift — Kontrastwerte gegen --grund in Klammern */
  --text-klar:    #F7F8F9;   /* 18,8:1 — Überschriften                    */
  --text-normal:  #E6E7EA;   /* 15,1:1 — Fließtext (siehe Halation oben)  */
  --text-leise:   #A8ABB3;   /* 7,6:1  — Beschriftungen, Hilfstexte       */
  --text-still:   #7E828B;   /*  4,6:1 — NUR Meta/Fußzeile, nie Fließtext */

  /* Marke */
  --rot:          #F01414;   /* Spicy Rot — Flächen/Linien/große Schrift  */
  --rot-tief:     #B70E0E;   /* gedrückter Zustand, Ränder auf Rot        */
  --rot-text:     #FF6B5E;   /* 8,1:1 — rote Schrift in normaler Größe    */
  --rot-hauch:    rgba(240, 20, 20, 0.10);  /* sehr leichte Tönung        */
  --rot-rand:     rgba(240, 20, 20, 0.32);

  /* Status — Kapitel 06: Grün NUR für Freigaben, Amber NUR für Warnungen.
     Beide Töne sind bewusst gedeckt statt Signalfarbe (augenschonend). */
  --gruen:        #34D07F;   /* Freigabe, bestanden, live                 */
  --gruen-text:   #5FE09B;
  --gruen-hauch:  rgba(52, 208, 127, 0.10);
  --gruen-rand:   rgba(52, 208, 127, 0.30);

  --amber:        #E8A317;   /* Warnung, offen, wartet                    */
  --amber-text:   #F5C55A;   /* 9,9:1 — Warntext in normaler Größe       */
  --amber-hauch:  rgba(232, 163, 23, 0.10);
  --amber-rand:   rgba(232, 163, 23, 0.30);

  /* Blau ist KEINE Markenfarbe — nur für rein sachliche Hinweise, damit
     ein neutraler Infokasten nicht fälschlich wie eine Warnung wirkt. */
  --info:         #5AA9E6;
  --info-hauch:   rgba(90, 169, 230, 0.10);
  --info-rand:    rgba(90, 169, 230, 0.28);

  /* -------------------------------------------------------------------
     3. Maße
     Abstände auf einem 4px-Raster — sorgt dafür, dass über alle Seiten
     hinweg dieselben Rhythmen entstehen, ohne dass jemand Werte raten muss.
     ------------------------------------------------------------------- */
  --a1: 4px;   --a2: 8px;   --a3: 12px;  --a4: 16px;
  --a5: 24px;  --a6: 32px;  --a7: 48px;  --a8: 64px;  --a9: 96px;

  --rund-s: 8px;
  --rund-m: 12px;
  --rund-l: 18px;

  --breite:      1160px;   /* normale Inhaltsbreite   */
  --breite-text:  720px;   /* Lesebreite für Rechtstexte — mehr Zeichen
                              pro Zeile ermüden messbar beim Lesen        */

  /* Schatten sind im Dunkelmodus fast wirkungslos; die Tiefe entsteht
     hier über die Flächenstufen. Ein einziger, sehr dezenter Schatten
     bleibt für abgehobene Elemente (Menü, Dialog). */
  --schatten: 0 18px 48px rgba(0, 0, 0, 0.55);

  --tempo: 160ms;
  --kurve: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------
   4. Grundlagen
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* KEIN festes Pixel-Wurzelmaß: Nutzer, die im Betriebssystem eine
     größere Schrift eingestellt haben, sollen diese auch bekommen
     (Kapitel 13 "Sehen: Zoom bis 200 Prozent"). */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text-normal);
  font-family: var(--schrift);
  font-size: 1.0625rem;      /* 17px — Rechtstexte werden viel gelesen  */
  line-height: 1.65;         /* großzügig, augenschonend                */
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* Überschriften: kräftig und eng gesetzt (Kapitel 06 "kräftige, moderne
   Sans-Serif"), aber ohne Versalien-Schreien im Fließtext. */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-klar);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.18;
  margin: 0 0 var(--a3);
  text-wrap: balance;        /* verhindert einzelne Wörter in letzter Zeile */
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3.0vw, 3.6rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); letter-spacing: -0.026em; }
h3 { font-size: clamp(1.22rem, 1.06rem + 0.7vw, 1.5rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 var(--a4); }
p:last-child { margin-bottom: 0; }

/* Lesebreite für alles, was echter Text ist. */
.text-spalte { max-width: var(--breite-text); }
.text-spalte p, .text-spalte li { color: var(--text-normal); }

a {
  color: var(--rot-text);
  text-decoration-color: rgba(255, 107, 94, 0.42);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--tempo) var(--kurve),
              text-decoration-color var(--tempo) var(--kurve);
}
a:hover { color: #FF8B80; text-decoration-color: currentColor; }

/* Sichtbarer Fokus — Kapitel 13 verlangt ihn ausdrücklich.
   :focus-visible statt :focus, damit ein Mausklick keinen Ring hinterlässt,
   die Tastaturbedienung aber immer einen bekommt. Der doppelte Ring
   (dunkel außen) macht ihn auch auf roten Flächen erkennbar. */
:focus-visible {
  outline: 2px solid var(--rot-text);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Kein Fokusring wird ERSATZLOS entfernt. Wer das hier ändert, muss einen
   gleichwertigen sichtbaren Zustand einbauen. */

img, svg, video { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: var(--a6) 0;
}

::selection { background: var(--rot); color: #fff; }

/* Der Sprung-Link ist Pflicht für Tastaturnutzung: er erlaubt, das
   komplette Menü zu überspringen. Er ist unsichtbar, bis er Fokus hat. */
.sprunglink {
  position: absolute;
  left: var(--a4);
  top: -100px;
  z-index: 200;
  background: var(--rot);
  color: #fff;
  font-weight: 650;
  padding: var(--a3) var(--a5);
  border-radius: 0 0 var(--rund-m) var(--rund-m);
  transition: top var(--tempo) var(--kurve);
}
.sprunglink:focus { top: 0; }

/* Nur für Screenreader — z. B. um einer Statusfarbe einen Text zu geben
   (Kapitel 13: "keine Information nur durch Farbe"). */
.nur-vorlesen {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ---------------------------------------------------------------------
   5. Aufbau
   --------------------------------------------------------------------- */
.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--a5);
}
@media (max-width: 640px) { .huelle { padding-inline: var(--a4); } }

.abschnitt { padding-block: clamp(var(--a7), 6vw, var(--a9)); }
.abschnitt--schmal { padding-block: var(--a7); }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }

/* ---------------------------------------------------------------------
   6. Kopfzeile mit Logo
   Kapitel 06: "Originales Spicy-Media-Logo unverzerrt auf dunklem
   Hintergrund, ausreichend Freiraum, keine Effekte über dem Schriftzug."
   Das Logo ist deshalb: nie verzerrt (aspect-ratio + object-fit), nie
   überlagert, nie eingefärbt, nie mit Schatten/Glow versehen.
   --------------------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(9, 9, 9, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--linie);
}
/* Ohne backdrop-filter (ältere Browser) darf die Leiste nicht durchsichtig
   bleiben — sonst läuft Text darunter durch und wird unlesbar. */
@supports not (backdrop-filter: blur(1px)) {
  .kopf { background: var(--grund); }
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: var(--a5);
  min-height: 68px;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--a3);
  text-decoration: none;
  color: inherit;
  padding: var(--a2) 0;
  flex-shrink: 0;
}
.marke__logo {
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;        /* nie verzerren */
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
  /* Das Logo hat selbst einen schwarzen Grund. Auf --grund verschwindet
     seine Kante — dieser hauchdünne Ring gibt ihm den vom Masterplan
     geforderten "ausreichenden Freiraum", ohne ein Effekt ZU SEIN. */
  box-shadow: 0 0 0 1px var(--linie-stark);
}
.marke__text { display: flex; flex-direction: column; line-height: 1.1; }
.marke__name {
  font-weight: 750;
  font-size: 0.95rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-klar);
}
.marke__zusatz {
  font-size: 0.7rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-still);
  margin-top: 2px;
}

.kopf__menue {
  display: flex;
  align-items: center;
  gap: var(--a1);
  margin-left: auto;
  flex-wrap: wrap;
}
.kopf__menue a {
  color: var(--text-leise);
  text-decoration: none;
  /* Bewusst knapp gehalten: mit den Arbeitsbereichen sind es neun
     Einträge. Bei 0,94rem und 12px Innenabstand brach die Leiste auf
     1440px in ZWEI Zeilen um (gemessen 22.08.2026: Kopfzeile 86px statt
     68px) — das sieht nach Versehen aus, nicht nach Absicht. */
  font-size: 0.88rem;
  font-weight: 550;
  padding: var(--a2) 10px;
  border-radius: var(--rund-s);
  white-space: nowrap;
  transition: color var(--tempo) var(--kurve),
              background var(--tempo) var(--kurve);
}

/* Abmelden ist keine Rubrik, sondern eine Kontoaktion. Ein feiner
   Trennstrich davor macht das sichtbar, ohne eine zweite Leiste zu
   brauchen. */
.kopf__menue a#abmelden {
  margin-left: var(--a2);
  padding-left: var(--a3);
  border-left: 1px solid var(--linie);
  color: var(--text-still);
}
.kopf__menue a#abmelden:hover { color: var(--text-klar); }
.kopf__menue a:hover { color: var(--text-klar); background: var(--flaeche-2); }
.kopf__menue a[aria-current="page"] {
  color: var(--text-klar);
  background: var(--flaeche-2);
}

/* Menüknopf fürs Handy */
.menue-knopf {
  display: none;
  margin-left: auto;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  color: var(--text-klar);
  border-radius: var(--rund-s);
  padding: var(--a2) var(--a3);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
/* Umschaltpunkt bei 1200px statt 900px: mit neun Eintraegen ist die
   Leiste darunter zu voll und braucht das Klappmenue. Lieber ein
   sauberes Menue als eine gequetschte Leiste. */
@media (max-width: 1200px) {
  .menue-knopf { display: inline-flex; align-items: center; gap: var(--a2); }
  .kopf__menue {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--grund);
    border-bottom: 1px solid var(--linie);
    padding: var(--a2) var(--a4) var(--a4);
  }
  .kopf__menue[data-offen="ja"] { display: flex; }
  .kopf__menue a { padding: var(--a3); font-size: 1rem; white-space: normal; }
  /* Im Klappmenue steht Abmelden untereinander - ein linker
     Trennstrich saehe dort wie ein Einzug aus. */
  .kopf__menue a#abmelden {
    margin-left: 0; padding-left: var(--a3);
    border-left: 0; border-top: 1px solid var(--linie); margin-top: var(--a2);
  }
}

/* ---------------------------------------------------------------------
   7. Knöpfe
   --------------------------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a2);
  font: inherit;
  font-weight: 620;
  font-size: 0.97rem;
  line-height: 1.2;
  /* Mindestgröße 44px — Kapitel 13 "Motorik: große Ziele". */
  min-height: 44px;
  padding: var(--a3) var(--a5);
  border-radius: var(--rund-m);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve),
              transform var(--tempo) var(--kurve);
}
.knopf:active { transform: translateY(1px); }
.knopf[disabled], .knopf[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.knopf--haupt {
  background: var(--rot);
  border-color: var(--rot);
  color: #fff;                /* Weiß auf #F01414 = 4,6:1, fett = ok */
}
.knopf--haupt:hover { background: #FF2A2A; border-color: #FF2A2A; color: #fff; }

.knopf--rand {
  background: transparent;
  border-color: var(--linie-stark);
  color: var(--text-klar);
}
.knopf--rand:hover { background: var(--flaeche-2); border-color: var(--text-still); color: var(--text-klar); }

.knopf--leise {
  background: var(--flaeche-2);
  border-color: var(--linie);
  color: var(--text-normal);
}
.knopf--leise:hover { background: var(--flaeche-3); color: var(--text-klar); }

/* Für Aktionen, die etwas endgültig entfernen oder sperren. Nie als
   normaler Bestätigungsknopf verwenden. */
.knopf--gefahr {
  background: transparent;
  border-color: var(--rot-rand);
  color: var(--rot-text);
}
.knopf--gefahr:hover { background: var(--rot-hauch); border-color: var(--rot); }

.knopf--breit { width: 100%; }
.knopf--gross { min-height: 52px; padding: var(--a4) var(--a6); font-size: 1.04rem; }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a3);
}

/* ---------------------------------------------------------------------
   8. Karten und Kästen
   --------------------------------------------------------------------- */
.karte {
  background: var(--flaeche-1);
  border: 1px solid var(--linie);
  border-radius: var(--rund-l);
  padding: var(--a5);
}
.karte--eng { padding: var(--a4); }
.karte--weit { padding: var(--a6); }
@media (max-width: 640px) {
  .karte, .karte--weit { padding: var(--a4); }
}

.karte__titel {
  font-size: 1.1rem;
  font-weight: 680;
  color: var(--text-klar);
  margin: 0 0 var(--a2);
}
.karte__text { color: var(--text-leise); font-size: 0.97rem; margin: 0; }

.gitter { display: grid; gap: var(--a4); }
.gitter--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gitter--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gitter--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Hinweiskästen. Die Randfarbe links trägt die Bedeutung — deshalb steht
   in JEDEM Kasten zusätzlich ein Wort ("Wichtig", "Freigabe", "Warnung"),
   damit die Information nicht nur über Farbe läuft (Kapitel 13). */
.hinweis {
  border-left: 3px solid var(--linie-stark);
  background: var(--flaeche-1);
  border-radius: 0 var(--rund-m) var(--rund-m) 0;
  padding: var(--a4) var(--a5);
  margin-block: var(--a5);
}
.hinweis__titel {
  font-weight: 700;
  color: var(--text-klar);
  margin: 0 0 var(--a2);
  font-size: 1rem;
}
.hinweis p { margin-bottom: var(--a2); font-size: 0.97rem; }
.hinweis p:last-child { margin-bottom: 0; }

.hinweis--wichtig  { border-left-color: var(--rot);   background: linear-gradient(90deg, var(--rot-hauch), transparent 55%), var(--flaeche-1); }
.hinweis--freigabe { border-left-color: var(--gruen); background: linear-gradient(90deg, var(--gruen-hauch), transparent 55%), var(--flaeche-1); }
.hinweis--warnung  { border-left-color: var(--amber); background: linear-gradient(90deg, var(--amber-hauch), transparent 55%), var(--flaeche-1); }
.hinweis--info     { border-left-color: var(--info);  background: linear-gradient(90deg, var(--info-hauch), transparent 55%), var(--flaeche-1); }

/* ---------------------------------------------------------------------
   9. Marken-Auszeichnung über Überschriften ("KAPITEL 01"-Optik der PDF)
   --------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 720;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rot-text);
  margin-bottom: var(--a3);
}
/* Die rote Linie unter Kapitelüberschriften, wie in der PDF. */
.trenner-rot {
  width: 72px;
  height: 3px;
  background: var(--rot);
  border-radius: 2px;
  margin: var(--a4) 0 var(--a5);
}

.leitsatz {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.22rem);
  color: var(--text-leise);
  max-width: 62ch;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------
   10. Zustands-Pillen
   Jede Pille trägt IMMER Text, nie nur Farbe.
   --------------------------------------------------------------------- */
.pille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 660;
  letter-spacing: 0.03em;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--linie-stark);
  background: var(--flaeche-2);
  color: var(--text-leise);
  white-space: nowrap;
}
.pille::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.pille--frei  { color: var(--gruen-text); border-color: var(--gruen-rand); background: var(--gruen-hauch); }
.pille--warte { color: var(--amber-text); border-color: var(--amber-rand); background: var(--amber-hauch); }
.pille--stopp { color: var(--rot-text);   border-color: var(--rot-rand);   background: var(--rot-hauch); }
.pille--info  { color: var(--info);       border-color: var(--info-rand);  background: var(--info-hauch); }

/* ---------------------------------------------------------------------
   11. Tabellen
   Auf schmalen Geräten scrollt die Tabelle waagerecht statt zu zerbrechen.
   tabindex="0" am Rahmen macht das auch per Tastatur bedienbar.
   --------------------------------------------------------------------- */
.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--rund-m);
  -webkit-overflow-scrolling: touch;
}
table.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  min-width: 560px;
}
table.tabelle caption {
  text-align: left;
  padding: var(--a3) var(--a4);
  color: var(--text-leise);
  font-size: 0.88rem;
  border-bottom: 1px solid var(--linie);
}
table.tabelle th {
  background: var(--flaeche-2);
  color: var(--text-klar);
  font-weight: 680;
  text-align: left;
  padding: var(--a3) var(--a4);
  border-bottom: 1px solid var(--linie-stark);
  white-space: nowrap;
}
table.tabelle td {
  padding: var(--a3) var(--a4);
  border-bottom: 1px solid var(--linie);
  color: var(--text-normal);
  vertical-align: top;
}
table.tabelle tbody tr:last-child td { border-bottom: 0; }
table.tabelle tbody tr:hover td { background: var(--flaeche-1); }

/* ---------------------------------------------------------------------
   12. Formulare
   --------------------------------------------------------------------- */
.feld { margin-bottom: var(--a4); }
.feld__label {
  display: block;
  font-size: 0.9rem;
  font-weight: 620;
  color: var(--text-klar);
  margin-bottom: var(--a2);
}
.feld__hilfe {
  font-size: 0.86rem;
  color: var(--text-leise);
  margin-top: var(--a2);
  line-height: 1.5;
}
/* Fehlertext bekommt zusätzlich ein Zeichen vorangestellt, damit er nicht
   allein über die rote Farbe erkennbar ist. */
.feld__fehler {
  font-size: 0.88rem;
  color: var(--rot-text);
  margin-top: var(--a2);
  font-weight: 600;
}
.feld__fehler::before { content: "✕ "; }

input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="password"], input[type="date"], input[type="number"],
input[type="search"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;           /* unter 16px zoomt iOS beim Antippen hinein */
  color: var(--text-klar);
  background: var(--flaeche-3);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-m);
  padding: var(--a3) var(--a4);
  min-height: 46px;
  transition: border-color var(--tempo) var(--kurve),
              background var(--tempo) var(--kurve);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--text-still); }
input:hover, select:hover, textarea:hover { border-color: var(--text-still); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rot);
  background: var(--flaeche-2);
  box-shadow: 0 0 0 3px var(--rot-hauch);
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--rot);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A8ABB3' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--a4) center;
  padding-right: var(--a7);
}
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px;
  accent-color: var(--rot);
  cursor: pointer;
  flex-shrink: 0;
}
.feld--ankreuz {
  display: flex;
  align-items: flex-start;
  gap: var(--a3);
}
.feld--ankreuz label { font-size: 0.96rem; color: var(--text-normal); cursor: pointer; }

/* ---------------------------------------------------------------------
   13. Fußzeile
   --------------------------------------------------------------------- */
.fuss {
  border-top: 1px solid var(--linie);
  background: #060606;
  padding-block: var(--a7) var(--a5);
  margin-top: var(--a8);
}
.fuss__gitter {
  display: grid;
  gap: var(--a6);
  grid-template-columns: 1.4fr repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: var(--a6);
}
.fuss__titel {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-still);
  margin-bottom: var(--a3);
}
.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste li { margin-bottom: var(--a2); }
.fuss__liste a {
  color: var(--text-leise);
  text-decoration: none;
  font-size: 0.94rem;
}
.fuss__liste a:hover { color: var(--text-klar); text-decoration: underline; }
.fuss__unten {
  border-top: 1px solid var(--linie);
  padding-top: var(--a4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--a4);
  justify-content: space-between;
  align-items: center;
  color: var(--text-still);
  font-size: 0.86rem;
}

/* ---------------------------------------------------------------------
   14. Bewegung
   Kapitel 06 verbietet "blinkende Countdown-Tricks", CLAUDE.md verlangt
   augenschonend. Die einzige Bewegung auf der ganzen Seite ist ein
   einmaliges, sehr kurzes Einblenden — und selbst das entfällt, sobald
   das Betriebssystem "weniger Bewegung" meldet.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .einblenden {
    animation: einblenden 420ms var(--kurve) both;
  }
  @keyframes einblenden {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   15. Hoher Kontrast / erzwungene Farben
   Windows-Kontrastmodus ersetzt alle Farben. Ohne diese Regeln
   verschwinden randlose Knöpfe dort vollständig.
   --------------------------------------------------------------------- */
@media (forced-colors: active) {
  .knopf { border: 1px solid ButtonText; }
  .karte, .hinweis, .tabelle-rahmen { border: 1px solid CanvasText; }
  .pille { border: 1px solid CanvasText; }
  :focus-visible { outline: 2px solid Highlight; }
}

/* ---------------------------------------------------------------------
   16. Druck
   Ein Impressum muss man ausdrucken und als Nachweis ablegen können
   (Kapitel 09 "Stand, Vorlagenversion, permanente URL ... für
   Nachweiszwecke"). Deshalb ein echtes, lesbares Druckbild statt
   weißer Schrift auf weißem Papier.
   --------------------------------------------------------------------- */
@media print {
  :root { --grund: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; }
  h1, h2, h3, h4 { color: #000; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .kopf, .fuss, .sprunglink, .knopf-reihe, .nicht-drucken { display: none !important; }
  .karte, .hinweis { border: 1px solid #bbb; background: #fff; page-break-inside: avoid; }
  table.tabelle th { background: #eee; color: #000; }
  table.tabelle td { color: #000; }
}