/* KI-PM-Dashboard — Gestaltung
 *
 * Grundlage: die Gestaltungslinie vom 10.09.2026 und das Erscheinungsbild der
 * Akademie Überlingen. Was dort steht, gilt hier unverändert:
 *   - keine dekorativen Schatten- und Leuchteffekte
 *   - 2-px-Akzent, nicht mehr
 *   - Hellgrau als Seitengrund, Beige trägt nur das Kopfband
 *   - kein reines Weiß als Seitengrund, keine Fremdfarben
 *
 * Was hier NEU ist, weil es in einer Seite keinen Platz hatte, in einer
 * Anwendung aber gebraucht wird: Navigationsrahmen, Zustände (überfahren,
 * Tastaturfokus, gesperrt, ladend, leer, fehlerhaft), Dunkelmodus.
 *
 * ZUM DUNKELMODUS: Die Quelle kennt keinen. Alle Dunkelwerte sind deshalb aus
 * den Palettenmarken ABGELEITET (color-mix), nie frei gewählt — dasselbe
 * Verfahren, mit dem die Quelle schon ihre Trennlinie bildet. Es entsteht kein
 * Farbwert außerhalb der Palette.
 */

:root {
  /* Hauspalette — unverändert aus der Quelle */
  --rot: #e20613;
  --rot-dunkel: #9a1d28;
  --beige: #faf6e5;
  --grau: #666b6e;
  --hellgrau: #f4f4f4;
  --text: #676767;
  --kopf: #000000;
  --flaeche: #ffffff;
  --gruen: #557555;
  --tuerkis: #52abb0;
  --bernstein: #ffc378;

  /* Die beiden Endpunkte der Hauspalette unter eigenem, UNVERAENDERLICHEM Namen.
     Sie tragen dieselben Werte wie --kopf und --flaeche in der hellen Fassung und
     sind deshalb keine Fremdfarben. Gebraucht werden sie, weil der Dunkelmodus
     --kopf und --flaeche umdefiniert: Eine Ableitung, die var(--kopf) als Schwarz
     benutzt, bekommt im Dunkelmodus Weiss zurueck (Eigenschaften werden beim
     GEBRAUCH aufgeloest, nicht in Schreibreihenfolge) — und der Dunkelmodus wird
     hell. Gemessen am 19.09.2026. */
  --schwarz: #000000;
  --weiss: #ffffff;

  --linie: color-mix(in srgb, var(--grau) 22%, transparent);
  --linie-stark: color-mix(in srgb, var(--grau) 40%, transparent);
  --flaeche-ruhig: color-mix(in srgb, var(--grau) 5%, var(--flaeche));
  --flaeche-betont: color-mix(in srgb, var(--grau) 10%, var(--flaeche));

  --serif: "Merriweather", Georgia, serif;
  --sans: "PT Sans", Arial, Calibri, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);

  --seitenleiste: 15rem;
  --kopfhoehe: 4rem;
  --radius: 3px;
}

/* --- Dunkelmodus ---------------------------------------------------------- */

/* Die WERTE stehen genau einmal, hier. Die beiden Blöcke darunter weisen sie nur
   noch zu — einer für den Systemwunsch, einer für die Wahl von Hand. Vorher
   standen zwei Wertesätze nebeneinander: der eine abgeleitet und rechnerisch
   falsch, der andere frei gewählt. Zwei Wertesätze für dieselbe Sache laufen
   auseinander; hier taten sie es bereits. */
:root {
  --dunkel-hellgrau:       color-mix(in srgb, var(--schwarz) 75%, var(--grau));
  --dunkel-flaeche:        color-mix(in srgb, var(--schwarz) 66%, var(--grau));
  --dunkel-flaeche-ruhig:  color-mix(in srgb, var(--schwarz) 70%, var(--grau));
  --dunkel-flaeche-betont: color-mix(in srgb, var(--schwarz) 57%, var(--grau));
  --dunkel-text:           color-mix(in srgb, var(--weiss) 88%, var(--grau));
  --dunkel-beige:          color-mix(in srgb, #faf6e5 16%, var(--schwarz));
  --dunkel-linie:          color-mix(in srgb, var(--weiss) 16%, transparent);
  --dunkel-linie-stark:    color-mix(in srgb, var(--weiss) 30%, transparent);

  /* Verweise tragen im Hellen das dunkle Hausrot. Auf dunklem Grund bleibt davon
     ein Kontrast von 1,90:1 übrig — die Links waren praktisch unlesbar. Das
     aufgehellte Hausrot kommt auf 5,1:1 und bleibt dabei Hausrot, kein neuer
     Farbton. Gemessen am 19.09.2026 in System-Dunkel. */
  --verweis: var(--rot-dunkel);
  --dunkel-verweis: color-mix(in srgb, var(--rot) 60%, var(--weiss));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --hellgrau: var(--dunkel-hellgrau);
    --flaeche: var(--dunkel-flaeche);
    --flaeche-ruhig: var(--dunkel-flaeche-ruhig);
    --flaeche-betont: var(--dunkel-flaeche-betont);
    --text: var(--dunkel-text);
    --kopf: var(--weiss);
    --beige: var(--dunkel-beige);
    --linie: var(--dunkel-linie);
    --linie-stark: var(--dunkel-linie-stark);
    --verweis: var(--dunkel-verweis);
  }
}

:root[data-thema="dunkel"] {
  --hellgrau: var(--dunkel-hellgrau);
  --flaeche: var(--dunkel-flaeche);
  --flaeche-ruhig: var(--dunkel-flaeche-ruhig);
  --flaeche-betont: var(--dunkel-flaeche-betont);
  --text: var(--dunkel-text);
  --kopf: var(--weiss);
  --beige: var(--dunkel-beige);
  --linie: var(--dunkel-linie);
  --linie-stark: var(--dunkel-linie-stark);
  --verweis: var(--dunkel-verweis);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hellgrau);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--kopf); margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { max-width: 74ch; }

a { color: var(--verweis); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: color-mix(in srgb, var(--verweis) 75%, var(--kopf)); }

/* Tastaturfokus IMMER sichtbar. Die Führungsetage bedient auch mit der Tastatur,
   und ein unsichtbarer Fokus ist der häufigste Grund, sich zu verlaufen. */
:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* --- Kopfleiste ----------------------------------------------------------- */

/* Die Höhe ist eine MINDEST-Höhe, keine feste. Mit `height` blieb die Leiste auf
   dem Telefon bei 64 px, während ihr Inhalt 105 px brauchte — der Untertitel lief
   unten heraus und legte sich über den ersten Menüpunkt, der dadurch nicht mehr
   anklickbar war. Gemessen am 19.09.2026: Klick auf „Alle Vorhaben" traf die
   Kopfleiste statt den Link. */
.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--kopfhoehe);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .5rem 1.25rem;
  background: var(--beige);
  border-bottom: 2px solid var(--rot);
}

.kopfleiste .marke { font-family: var(--serif); font-size: 1.05rem; color: var(--kopf); }
.kopfleiste .marke span { display: block; font-family: var(--sans); font-size: .78rem; color: var(--text); }
.kopfleiste .rechts { margin-left: auto; display: flex; align-items: center; gap: .75rem; font-size: .85rem; }

.rollenmarke {
  padding: .15rem .5rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  font-size: .78rem;
}

/* --- Seitenleiste --------------------------------------------------------- */

.rahmen { display: grid; grid-template-columns: var(--seitenleiste) 1fr; min-height: calc(100vh - var(--kopfhoehe)); }

/* Rasterfelder schrumpfen von sich aus NICHT unter ihren breitesten Inhalt
   (min-width hat im Raster den Vorgabewert auto). Ohne diese Zeile blaeht eine
   breite Tabelle die ganze Spalte auf, der Umbruchrahmen darum bleibt wirkungslos
   und die Seite laeuft waagerecht ueber. Gemessen 19.09.2026 auf dem Telefon:
   Fenster 390 px, Dokument 590 px. */
.rahmen > * { min-width: 0; }

.seitenleiste {
  background: var(--flaeche-ruhig);
  border-right: 1px solid var(--linie);
  padding: 1.25rem 0;
}

.seitenleiste nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem 1.25rem;
  color: var(--text);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.seitenleiste nav a:hover { background: var(--flaeche-betont); color: var(--kopf); }
.seitenleiste nav a[aria-current="page"] {
  border-left-color: var(--rot);
  background: var(--flaeche);
  color: var(--kopf);
  font-weight: 700;
}

.seitenleiste .gruppe {
  padding: 1.25rem 1.25rem .35rem;
  font-size: .76rem;
  color: var(--text);
  border-top: 1px solid var(--linie);
  margin-top: .75rem;
}
.seitenleiste .gruppe:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

.inhalt { padding: 1.5rem 1.75rem 4rem; max-width: 1400px; }

/* --- Kennzahlen ----------------------------------------------------------- */

.kacheln { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 .5rem; padding: 0; list-style: none; }

/* `flex: 1 1 0` statt einer Wunschbreite: Alle Kacheln werden gleich breit,
   unabhängig davon, wie lang ihre Definition ist. Vorher bestimmte der Text die
   Breite — eine Kachel war doppelt so breit wie ihre Nachbarin, und die Reihe
   wirkte zufällig zusammengesetzt statt gesetzt. */
.kachel {
  flex: 1 1 0;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-top: 2px solid var(--rot);
  border-radius: var(--radius);
  padding: .9rem 1rem;
}
.kachel .wert { font-family: var(--serif); font-size: 2rem; color: var(--kopf); line-height: 1.1; }
.kachel .titel { font-size: .95rem; color: var(--kopf); }

/* Die Definition ist Beiwerk, nicht Botschaft. Sie steht deshalb ruhiger und
   rückt an den unteren Rand — so stehen die Zahlen aller Kacheln auf einer
   Linie, und der Blick findet sie ohne zu suchen. */
.kachel .definition {
  font-size: .78rem;
  margin-top: auto;
  padding-top: .5rem;
  color: color-mix(in srgb, var(--text) 82%, transparent);
}

/* Eine Untergliederung steht EINGERÜCKT an ihrer Oberkachel, nie gleichrangig
   daneben. Genau das war der Fehler der Vorlage: zwei gleichrangige Kacheln,
   von denen die eine in der anderen steckte. */
.kachel.untergliederung {
  flex: 0 1 11rem;
  margin-left: -.35rem;
  border-top-color: var(--linie-stark);
  background: var(--flaeche-ruhig);
}
.kachel.untergliederung .wert { font-size: 1.5rem; }

/* Das Zeichen gehört VOR DEN TITEL, nicht vor die Kachel. Am Kachelelement
   stand es vor dem ersten Kind — und weil das ein Block ist, landete es in einer
   eigenen Zeile über der Zahl. Gesehen am 19.09.2026 im Bildschirmabzug; kein
   Messgerät schlägt dabei an, die Seite ist ja vollständig und lesbar. */
.kachel.untergliederung .titel::before { content: "↳ "; color: var(--grau); }

.ueberlappung { font-size: .78rem; margin: 0 0 1.5rem; color: var(--text); }

/* --- Filterleiste --------------------------------------------------------- */

.filterleiste {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: flex-end;
}
/* Alle Filterfelder gleich breit, die beiden Knöpfe geschlossen am rechten Rand.
   Vorher richtete sich die Breite nach dem längsten Auswahleintrag: „Team" nahm
   die halbe Zeile, „Art" stand daneben, und die Knöpfe klebten irgendwo dazwischen. */
.filterleiste label { display: flex; flex-direction: column; font-size: .78rem; gap: .2rem; min-width: 0; flex: 1 1 11rem; }

/* Die beiden Knöpfe bleiben beieinander und umbrechen gemeinsam. Einzeln
   ausgezeichnet rutschte „Zurücksetzen" allein in die nächste Zeile, sobald die
   Felder die erste füllten. */
.filterleiste .filterknoepfe { display: flex; gap: .5rem; margin-left: auto; }
.filterleiste input, .filterleiste select { min-width: 9rem; max-width: 100%; }

/* Ein Auswahlfeld wächst auf die Breite seines längsten Eintrags. „Projekte und
   Vorhaben" machte es 524 px breit — bei 390 px Fensterbreite lief dadurch die
   ganze Seite waagerecht über. Auf schmalen Bildschirmen steht die Filterleiste
   deshalb einspaltig, und jedes Feld nimmt genau die verfügbare Breite. */
@media (max-width: 640px) {
  .filterleiste { flex-direction: column; align-items: stretch; }
  .filterleiste label { width: 100%; }
  .filterleiste input, .filterleiste select { min-width: 0; width: 100%; }
}

.filterstand { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; font-size: .82rem; }
.filtermarke {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .5rem;
  background: var(--flaeche-betont);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
}
.filtermarke a { text-decoration: none; font-weight: 700; }

input, select, textarea {
  font-family: var(--sans);
  font-size: .92rem;
  min-height: 44px;
  padding: .4rem .55rem;
  background: var(--flaeche);
  color: var(--kopf);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
}
input:hover, select:hover, textarea:hover { border-color: var(--grau); }
textarea { width: 100%; resize: vertical; }

/* --- Schaltflächen -------------------------------------------------------- */

/* 44 px Mindesthöhe für jedes Bedienelement — der Prüfvertrag verlangt sie, und
   die Führungsebene bedient diese Seiten auch auf dem Tablet. Die Breite bleibt
   unberührt: Ein Knopf wird höher, nicht klobiger. */
.knopf {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .45rem .9rem;
  font-family: var(--sans);
  font-size: .9rem;
  background: var(--flaeche);
  color: var(--kopf);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.knopf:hover { background: var(--flaeche-betont); border-color: var(--grau); color: var(--kopf); }
.knopf:active { background: var(--flaeche-ruhig); }
.knopf[disabled], .knopf[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.knopf.wichtig { background: var(--rot); border-color: var(--rot); color: #ffffff; }
.knopf.wichtig:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: #ffffff; }
.knopf.gefahr { border-color: var(--rot); color: var(--rot); }

/* --- Tabellen ------------------------------------------------------------- */

/* Tabellen dürfen breit sein — die SEITE darf es nicht. Ohne diesen Rahmen
   schiebt eine breite Tabelle die ganze Seite waagerecht auf, und auf dem
   Telefon wandert der Text unter den Rand. Gemessen im Durchklick vom
   18.09.2026: 22 von 72 Messungen liefen über. */
.tabellenrahmen {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}

table { width: 100%; min-width: 34rem; border-collapse: collapse; background: var(--flaeche); }
caption { text-align: left; padding: .5rem 0; font-size: .85rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: .78rem; color: var(--text); font-weight: 700; border-bottom-color: var(--linie-stark); }
tbody tr { transition: background .1s var(--ease); }
tbody tr:hover { background: var(--flaeche-ruhig); }
td .zeilenname { color: var(--kopf); font-weight: 700; text-decoration: none; }
td .zeilenname:hover { text-decoration: underline; }

.abgeschlossen td { color: color-mix(in srgb, var(--text) 70%, transparent); }
.abgeschlossen .zeilenname { color: var(--text); }

/* --- Statuspunkte --------------------------------------------------------- */

.status { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.status::before {
  content: "";
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--grau);
  flex: none;
}
.status[data-status="entwicklung"]::before { background: var(--gruen); }
.status[data-status="test"]::before { background: var(--tuerkis); }
.status[data-status="planung"]::before { background: var(--bernstein); }
.status[data-status="offen"]::before { background: var(--rot); }
.status[data-status="pausiert"]::before { background: var(--grau); }
.status[data-status="verworfen"]::before { background: var(--kopf); }
.status[data-status="abgeschlossen"]::before {
  background: transparent;
  border: 2px solid var(--gruen);
  width: .55rem;
  height: .55rem;
}

/* --- Entscheidungen: das EINE betonte Element ----------------------------- */

.entscheidungen { margin: 2rem 0; }
.entscheidungskarte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 2px solid var(--rot);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin-bottom: .6rem;
}
.entscheidungskarte h3 { color: var(--verweis); }
.entscheidungskarte .betrifft { font-size: .82rem; margin-top: .4rem; }

/* --- Detailansicht -------------------------------------------------------- */

.kategorien { display: grid; grid-template-columns: 14rem 1fr; gap: .1rem 1.25rem; margin: 0; }
.kategorien dt { font-size: .82rem; color: var(--text); padding: .45rem 0; border-top: 1px solid var(--linie); }
.kategorien dd { margin: 0; padding: .45rem 0; color: var(--kopf); border-top: 1px solid var(--linie); white-space: pre-line; }

details.block { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); margin-bottom: .6rem; }
details.block > summary {
  padding: .6rem .9rem;
  cursor: pointer;
  font-family: var(--serif);
  color: var(--kopf);
  list-style: none;
}
details.block > summary::-webkit-details-marker { display: none; }
details.block > summary::before { content: "▸ "; color: var(--grau); }
details.block[open] > summary::before { content: "▾ "; }
details.block > summary:hover { background: var(--flaeche-ruhig); }
details.block .innen { padding: 0 .9rem .9rem; }

/* --- Formulare ------------------------------------------------------------ */

/* `min-width: 0` hebt den Browser-Standard `min-content` für <fieldset> auf. Ohne
   diese Zeile bestimmt das breiteste Auswahlfeld die Breite der ganzen Gruppe: Ein
   langer Eintrag im Leistungsfeld machte sie 554 px breit und ließ die Seite auf
   dem Telefon waagerecht überlaufen. Gemessen am 19.09.2026. */
.feldgruppe { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); padding: 1rem 1.1rem; margin-bottom: 1rem; min-width: 0; }
.feld input, .feld select, .feld textarea { max-width: 100%; }
.feldgruppe > legend { font-family: var(--serif); color: var(--kopf); padding: 0 .4rem; }
.feld { margin-bottom: .9rem; }
.feld > label { display: block; font-size: .85rem; color: var(--kopf); margin-bottom: .2rem; }
.feld .hilfe { font-size: .78rem; margin-top: .2rem; }
.feld.pflicht > label::after { content: " *"; color: var(--rot); }
.feld .fehler { color: var(--rot); font-size: .82rem; margin-top: .2rem; }
.feld.hat-fehler input, .feld.hat-fehler select, .feld.hat-fehler textarea { border-color: var(--rot); }

/* --- Meldungen, leere und fehlerhafte Zustände ---------------------------- */

.meldung {
  padding: .7rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--linie-stark);
  background: var(--flaeche);
  border-left: 2px solid var(--grau);
  margin-bottom: 1rem;
}
.meldung.erfolg { border-left-color: var(--gruen); }
.meldung.fehler { border-left-color: var(--rot); }
.meldung.hinweis { border-left-color: var(--bernstein); }

.leer {
  background: var(--flaeche);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: left;
}
.leer h3 { margin-bottom: .3rem; }

/* Ladezustand: die Seite bleibt still, nur der laufende Bereich zeigt es an. */
[aria-busy="true"] { opacity: .55; transition: opacity .15s var(--ease); }

/* --- Klickflächen ---------------------------------------------------------- */

/* Ein Textlink ist 17 px hoch. Das ist für eine Maus knapp und für einen Finger
   auf dem Tablet zu wenig — die Führungsebene liest diese Seiten auch unterwegs.
   Diese Links bekommen deshalb eine Klickfläche von 44 px (WCAG 2.2, Ziel des
   Prüfvertrags). Das negative Außenmaß hält die Tabellenzeile schlank: Sie wächst
   nur auf genau diese 44 px, statt die Polsterung der Zelle obendrauf zu legen. */
td .zeilenname,
td a,
.kategorien dd a,
.entscheidungskarte .betrifft a,
main.inhalt li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -.55rem;
}

/* In der Kartendarstellung wird jede Zelle zu einem eigenen Block mit sehr
   schmaler Polsterung. Das negative Außenmaß von oben würde dort die Zeilen
   ineinanderschieben — es gilt deshalb nur für die Spaltendarstellung. */
@media (max-width: 640px) {
  td .zeilenname,
  td a,
  .kategorien dd a,
  .entscheidungskarte .betrifft a,
  main.inhalt li a { margin-block: 0; }
}

/* --- Fuß ------------------------------------------------------------------ */

.fuss { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--linie); font-size: .8rem; }

/* --- Kleine Bildschirme --------------------------------------------------- */

@media (max-width: 900px) {
  .rahmen { grid-template-columns: 1fr; }
  .seitenleiste { border-right: 0; border-bottom: 1px solid var(--linie); padding: .5rem 0; }
  .seitenleiste nav { display: flex; flex-wrap: wrap; }
  .seitenleiste nav a { border-left: 0; border-bottom: 2px solid transparent; padding: .5rem .9rem; }
  .seitenleiste nav a[aria-current="page"] { border-left: 0; border-bottom-color: var(--rot); }
  /* Die Gruppenüberschriften bleiben sichtbar. Ausgeblendet ergaben sie eine
     ununterbrochene Liste aus zehn Einträgen, in der sich niemand zurechtfindet —
     gerade auf dem kleinen Bildschirm ist die Gliederung wichtiger, nicht
     entbehrlicher. Sie nehmen die volle Zeilenbreite und trennen so die Blöcke. */
  .seitenleiste .gruppe {
    flex-basis: 100%;
    border-top: 0;
    margin-top: .35rem;
    padding: .5rem .9rem .1rem;
  }
  .seitenleiste .gruppe:first-child { margin-top: 0; padding-top: .25rem; }
  .inhalt { padding: 1rem 1rem 3rem; }
  .kategorien { grid-template-columns: 1fr; gap: 0; }
  .kategorien dd { padding-top: 0; border-top: 0; padding-bottom: .7rem; }
}

@media (max-width: 640px) {
  table, thead, tbody, tr, th, td { display: block; }
  /* Die Mindestbreite gilt nur der Spaltendarstellung. In der Kartendarstellung
     erzeugt sie genau den Ueberlauf, den die Karten verhindern sollen. */
  table { min-width: 0; }
  .tabellenrahmen { overflow-x: visible; }
  thead { display: none; }
  tbody tr { border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: .6rem; padding: .3rem; }
  td { border-bottom: 0; padding: .25rem .5rem; }
  td::before { content: attr(data-spalte) ": "; font-size: .76rem; color: var(--text); }
  td:first-child::before { content: ""; }
}

/* --- Bewegung nur, wenn sie erwünscht ist --------------------------------- */

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

/* --- Druck ---------------------------------------------------------------- */

@media print {
  .kopfleiste, .seitenleiste, .filterleiste, .knopf { display: none; }
  .rahmen { display: block; }
  body { background: #ffffff; color: #000000; }
  details.block { border: 0; }
  details.block .innen { display: block !important; }
}

/* --- Was bis zum 20.09.2026 als style-Attribut in den Vorlagen stand ------- */
/*                                                                            */
/* Verschoben, damit die Richtlinie für Seiteninhalte ohne 'unsafe-inline'     */
/* auskommt (Audit-Befund F-02). Ein einziges style-Attribut hätte die ganze   */
/* Strenge gekostet: Wer Inline-Stile erlaubt, erlaubt sie überall.            */

.abmeldeform { margin: 0; }

.anmeldebox { max-width: 24rem; margin: 3rem auto; }

.anmeldehinweis { margin-top: 2rem; font-size: .85rem; }