/*
  Gestaltung des Feuerwehr-ERP (Konzept Abschnitt 9): Handy zuerst (360 px), Feuerwehrrot als Akzent, sonst ruhige
  Grautöne, hell und dunkel nach Systemeinstellung, Kontraste nach WCAG AA (Text mindestens 4,5:1, Rahmen von
  Bedienelementen und Fokus mindestens 3:1), Fokus immer sichtbar, Zustände nie nur über Farbe.
*/

/* --- Farben und Maße -------------------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-2: #eef0f3;
  --color-text: #1b1f24;
  --color-text-muted: #4a5260;
  --color-border: #d5d9df;
  --color-input-border: #6b7280;
  --color-link: #a8231c;
  --color-accent: #b3261e;
  --color-accent-hover: #8f1d17;
  --color-on-accent: #ffffff;
  --color-header-bg: #b3261e;
  --color-header-text: #ffffff;
  --color-focus: #1d4ed8;
  --color-header-focus: #ffffff;

  --status-green-text: #1e6b2a;
  --status-green-bg: #e7f4ea;
  --status-yellow-text: #6e4400;
  --status-yellow-bg: #fff3d1;
  --status-red-text: #a3201a;
  --status-red-bg: #fdecea;
  --demo-text: #4a3500;
  --demo-bg: #ffe08a;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --radius: 0.5rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --tap: 2.75rem; /* 44 px Mindestgröße für Tipp-Flächen */
  --content-width: 72rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121417;
    --color-surface: #1c1f24;
    --color-surface-2: #252a31;
    --color-text: #e6e8eb;
    --color-text-muted: #a9b0ba;
    --color-border: #39404a;
    --color-input-border: #8b939e;
    --color-link: #ff8f85;
    --color-accent: #c0392b;
    --color-accent-hover: #a5281d;
    --color-on-accent: #ffffff;
    --color-header-bg: #8e1c16;
    --color-header-text: #ffffff;
    --color-focus: #8ab4f8;
    --color-header-focus: #ffffff;

    --status-green-text: #9bdcaa;
    --status-green-bg: #15301c;
    --status-yellow-text: #ffd47a;
    --status-yellow-bg: #3a2c0b;
    --status-red-text: #ffa59c;
    --status-red-bg: #3d1714;
    --demo-text: #ffe08a;
    --demo-bg: #3a2c0b;
  }
}

/* --- Grundlagen ----------------------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; margin-top: var(--space-6); }
h3 { font-size: 1.1rem; margin-top: var(--space-6); }

p,
ul,
ol,
dl {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--color-link);
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

img {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

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

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -10rem;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: var(--space-2);
}

.muted,
.helptext {
  color: var(--color-text-muted);
}

.lead {
  color: var(--color-text-muted);
  margin-top: calc(-1 * var(--space-2));
}

/* --- Kopf, Navigation, Fuß ------------------------------------------------------------------------------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-header-bg);
  color: var(--color-header-text);
}

.topbar a,
.topbar .nav-button {
  color: var(--color-header-text);
}

.topbar :focus-visible {
  outline-color: var(--color-header-focus);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  font-weight: 700;
  text-decoration: none;
}

.brand img {
  border-radius: 0.375rem;
  outline: 1px solid rgb(255 255 255 / 0.6);
}

/* Wortmarke der Wehr auf der Anmeldeseite (static/img/HERKUNFT.md) */
.wordmark {
  display: block;
  width: min(22rem, 100%);
  height: auto;
  margin: 0 auto var(--space-4);
}

.mainnav ul,
.subnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mainnav a,
.nav-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  text-decoration: none;
  font: inherit;
}

.mainnav a:hover,
.nav-button:hover {
  background: rgb(0 0 0 / 0.18);
}

.mainnav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}

.mainnav form {
  margin: 0;
}

.nav-button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.subnav {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.subnav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-2);
}

.subnav a[aria-current="page"] {
  font-weight: 700;
  text-decoration-thickness: 3px;
}

.content {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-4);
}

.content:focus {
  outline: none;
}

.footer {
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.footer p {
  margin: 0;
}

.demo-banner,
.offline-banner {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  text-align: center;
  font-size: 0.9375rem;
}

.demo-banner {
  color: var(--demo-text);
  background: var(--demo-bg);
}

.offline-banner {
  color: var(--status-yellow-text);
  background: var(--status-yellow-bg);
  border-bottom: 2px solid currentColor;
}

.offline-banner[hidden] {
  display: none;
}

/* --- Meldungen und Hinweise ------------------------------------------------------------------------------ */

.messages {
  list-style: none;
  padding: 0;
}

.message {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  border-left: 4px solid currentColor;
  border-radius: var(--radius);
  background: var(--color-surface);
}

.message > span[aria-hidden="true"] {
  font-weight: 700;
}

.message-success { color: var(--status-green-text); background: var(--status-green-bg); }
.message-warning { color: var(--status-yellow-text); background: var(--status-yellow-bg); }
.message-error { color: var(--status-red-text); background: var(--status-red-bg); }
.message-info,
.message-debug { color: var(--color-text); background: var(--color-surface-2); }

.hint {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface-2);
}

.placeholder {
  padding: var(--space-3);
  border: 2px dashed var(--color-input-border);
  border-radius: var(--radius);
}

/* --- Ampel: immer mit Symbol (✓ ! ✕) und Text im Markup, nie nur Farbe ----------------------------------------- */

.status {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding: 0.1em 0.6em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

.status-green { color: var(--status-green-text); background: var(--status-green-bg); }
.status-yellow { color: var(--status-yellow-text); background: var(--status-yellow-bg); }
.status-red { color: var(--status-red-text); background: var(--status-red-bg); }

/* In Karten bricht eine lange Ampel um, statt die Seite zu verbreitern (Prüfrunde B2: „Verschwiegenheitserklärung
   gültig bis …“ am Handy und Tablet); in Tabellen bleibt sie einzeilig. */
.card .status {
  max-width: 100%;
  white-space: normal;
}

/* Zu-/Absage und Namensliste: ein langer Grund ohne Leerzeichen (etwa ein Link) bricht um (Prüfrunde B19) */
.rsvp,
.response-names {
  overflow-wrap: anywhere;
}

/* --- Material: Mengen je Teiletyp (E-66-Nachtrag) ------------------------------------------------------------
   Einsatzseite (Reiter „Atemschutz und Material“) und Terminseite der Probe, Baustein incidents/_material_counts.html;
   hier statt in incidents.css, weil die Terminseite nur app.css lädt. */

.material-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

/* Normaler Textfluss: lange Freitexte brechen zwischen Wörtern um, Menge und Einheit bleiben ganz */
.material-counts li {
  max-width: 100%;
  padding: var(--space-1) var(--space-3);
  overflow-wrap: break-word;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* --- Dashboard-Karten: eine Spalte am Handy, zwei ab 48 rem, drei ab 72 rem ----------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 72rem) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  min-width: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.card h2 {
  margin-top: 0;
  font-size: 1.125rem;
}

.card > :last-child {
  margin-bottom: 0;
}

.card-priority {
  border-color: var(--color-accent);
  border-width: 2px;
}

.card-error {
  border-color: var(--status-red-text);
  border-style: dashed;
}

/* Schulterklappe neben dem Dienstgrad (E-29; Karte „Einsatzrelevanz“, „Dienstgrad“, Personenseite) */
.insignia-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.insignia-row > :last-child > :last-child {
  margin-bottom: 0;
}

.insignia {
  flex: none;
  height: auto;
}

/* Abschnitte innerhalb einer Karte (Karte „Einsatzrelevanz“) */
.card .card-section {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 1rem;
}

.card .card-section:first-child {
  margin-top: 0;
}

.readiness-reasons {
  padding-left: var(--space-4);
}

.readiness-deadlines {
  list-style: none;
  padding-left: 0;
}

.readiness-deadlines li {
  margin-bottom: var(--space-2);
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(7rem, 40%) 1fr;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}

.facts dt {
  color: var(--color-text-muted);
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.inline-list,
.tag-list,
.card-links,
.link-list {
  list-style: none;
  padding: 0;
}

.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  margin: 0;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag-list li {
  padding: 0.1em 0.6em;
  border: 1px solid var(--color-input-border);
  border-radius: 999px;
}

.card-links li,
.link-list li {
  border-top: 1px solid var(--color-border);
}

.card-links a,
.link-list a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
}

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

form p,
.field {
  margin: 0 0 var(--space-4);
}

fieldset {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

legend {
  padding: 0 var(--space-2);
  font-weight: 700;
}

label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: max(1rem, 16px); /* verhindert das Zoomen auf iOS */
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
}

textarea {
  min-height: 6rem;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: var(--color-accent);
  flex: none;
}

.field-checkbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.field-checkbox label {
  margin: 0;
  font-weight: 400;
  min-height: var(--tap);
  display: flex;
  align-items: center;
}

.field-checkbox .helptext,
.field-checkbox .errorlist {
  flex-basis: 100%;
  margin-left: calc(1.375rem + var(--space-3));
}

form p > input[type="checkbox"] + label {
  display: inline;
  margin-left: var(--space-2);
}

.helptext,
form p > span {
  display: block;
  margin: var(--space-1) 0 0;
  font-size: 0.9375rem;
}

.errorlist {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  color: var(--status-red-text);
  font-weight: 600;
}

.errorlist li::before {
  content: "✕ ";
}

.field-invalid input,
.field-invalid select,
.field-invalid textarea,
[aria-invalid="true"] {
  border-color: var(--status-red-text);
  border-width: 2px;
}

.form-errors {
  margin-bottom: var(--space-4);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
}

button:hover,
.button:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.button-outline,
.button-secondary {
  color: var(--color-link);
  background: transparent;
  border-color: currentColor;
}

.button-outline:hover,
.button-secondary:hover {
  color: var(--color-on-accent);
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.button-danger {
  color: #ffffff;
  background: #a3201a; /* in beiden Schemata gleich: Weiß darauf 7,5:1 */
  border-color: #a3201a;
}

button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

.topbar .nav-button {
  font-weight: 400;
  border: 0;
}

/* allauth-Seiten: Anmelden und Codes in einer schmalen, mittigen Spalte */
.page-entrance .content {
  max-width: 30rem;
}

.page-account .content form button,
.page-account .content form .button {
  width: 100%;
}

.page-account hr {
  margin: var(--space-6) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.page-account section {
  margin-bottom: var(--space-6);
}

.page-account .content form div > button + button {
  margin-top: var(--space-2);
}

/* Wertung eines Einsatzes als Einsatzübung (Atemschutz, E-65a): Vermerk als eigene Zeile, Knöpfe nebeneinander und
   am Handy umbrechend, jeder mindestens 44 px hoch (über button). */
.rating-note {
  display: block;
}

.rating-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

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

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

table,
.table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

thead th {
  background: var(--color-surface-2);
  white-space: nowrap;
}

tbody tr:last-child > * {
  border-bottom: 0;
}

/* --- Dialoge ------------------------------------------------------------------------------------------- */

dialog {
  width: min(32rem, calc(100vw - 2rem));
  padding: var(--space-4);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

dialog::backdrop {
  background: rgb(0 0 0 / 0.5);
}

/* --- Geräteanpassung (SYS-24, Architektur 18) -------------------------------------------------------------
   Drei Haltepunkte: Handy bis 47 rem (eine Spalte, Tabellen als Karten), Tablet 48 bis 79 rem (zwei Spalten,
   Kacheln vier je Reihe, Formulare zweispaltig), PC ab 80 rem. Geprüft werden 360, 820, 1180 und 1366 px.
   Tipp-Flächen mindestens 44 px (--tap), auch für Links in Tabellen und im Fuß. */

td a,
th a,
.footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/* Tabelle am Handy als Karten: <table class="table-cards"> mit data-label="Spaltenname" an jeder Zelle;
   .cell-main ist die Titelzeile der Karte (ohne Beschriftung). Ab Tablet eine gewöhnliche Tabelle. */
@media (max-width: 47.99rem) {
  .table-wrap:has(> .table-cards) {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .table-cards,
  .table-cards tbody,
  .table-cards tr,
  .table-cards td,
  .table-cards tbody th {
    display: block;
    width: 100%;
  }

  .table-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .table-cards tr {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-3);
    padding: var(--space-1) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .table-cards td,
  .table-cards tbody th {
    position: relative;
    min-height: var(--tap);
    padding: var(--space-2) 0 var(--space-2) calc(min(40%, 9rem) + var(--space-3));
    border-bottom: 1px solid var(--color-border);
    overflow-wrap: anywhere;
  }

  .table-cards td::before,
  .table-cards tbody th::before {
    content: attr(data-label);
    position: absolute;
    top: var(--space-2);
    left: 0;
    width: min(40%, 9rem);
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .table-cards td a,
  .table-cards tbody th a {
    min-height: 1.5rem; /* in der Karte zählt die ganze Zeile als Tipp-Fläche, siehe unten */
  }

  /* Mehrere Knöpfe oder Links in einer Zelle („Öffnen“ und „Herunterladen“, „Ändern“ und „Löschen“): jeder für sich
     mindestens 44 px hoch (Prüfrunde B18) */
  .table-cards td .button,
  .table-cards td li > a {
    min-height: var(--tap);
  }

  .table-cards td > a:only-child,
  .table-cards .cell-main > a:first-child {
    display: flex;
    min-height: var(--tap);
    margin: calc(-1 * var(--space-2)) 0;
  }

  .table-cards td:not([data-label]),
  .table-cards .cell-main {
    padding-left: 0;
  }

  .table-cards td:not([data-label])::before,
  .table-cards .cell-main::before {
    content: none;
  }

  .table-cards .cell-main {
    order: -1; /* Titel der Karte zuerst, auch wenn die Spalte in der Tabelle weiter hinten steht */
    font-size: 1.0625rem;
    font-weight: 600;
  }

  .table-cards tr > :last-child {
    border-bottom: 0;
  }
}

/* Kacheln (Terminal, Schnellzugriffe): zwei je Reihe am Handy, vier am Tablet, sechs am PC.
   <ul class="tiles"><li><a class="tile" href="…">…</a></li></ul> oder direkt <div class="tiles"><button class="tile">…</div> */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.tiles > * {
  min-width: 0;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  height: 100%;
  min-height: calc(2 * var(--tap));
  padding: var(--space-3);
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.tile:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
  border-color: var(--color-accent);
}

.tile[aria-pressed="true"],
.tile-active {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

@media (min-width: 48rem) {
  .tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .tiles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Formulare: eine Spalte am Handy, zwei ab Tablet; breite Felder (Textfelder, Scan-Feld) mit .form-grid-full */
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-4);
  align-items: start;
}

.form-grid > * {
  min-width: 0;
}

@media (min-width: 48rem) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid > .form-grid-full {
    grid-column: 1 / -1;
  }
}

/* Detailseiten: Angaben und Bearbeiten nebeneinander ab Tablet, am PC mit breiterer Angabenspalte */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-6);
  align-items: start;
}

.detail-grid > * {
  min-width: 0;
}

.detail-grid h2:first-child {
  margin-top: 0;
}

@media (min-width: 48rem) {
  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .detail-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

/* Auswahl als Radios mit großer Tipp-Fläche: <div class="choice-list"><label class="choice"><input type="radio"> …</label></div> */
.choice-list {
  display: grid;
  gap: 0;
  margin-bottom: var(--space-2);
}

.choice-group {
  padding-bottom: var(--space-3);
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

/* Filterleiste über Listen (GET-Formular) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.filter-bar .field {
  flex: 1 1 11rem;
  margin: 0;
}

.filter-bar .filter-actions {
  flex: 0 0 auto;
}

@media (max-width: 47.99rem) {
  .filter-bar .filter-actions,
  .filter-bar .filter-actions button {
    flex-basis: 100%;
    width: 100%;
  }
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.nowrap {
  white-space: nowrap;
}

.prewrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.figure-image {
  margin: 0 0 var(--space-4);
}

.figure-image figcaption a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.figure-image img {
  display: block;
  max-height: 24rem;
  width: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* Entwürfe (E-28): Hinweisleiste aus templates/core/_draft_notice.html und Speicherstand am Formular */
.draft-notice {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-left: 4px solid var(--color-focus);
  border-radius: var(--radius);
}

.draft-notice p {
  margin-bottom: var(--space-2);
}

.draft-notice .form-actions {
  margin-bottom: 0;
}

.draft-notice [hidden] {
  display: none !important; /* .helptext setzt display: block und würde hidden sonst überstimmen */
}

.draft-status {
  min-height: 1.5em; /* reserviert die Zeile, damit die Knöpfe beim Speichern nicht springen */
  margin-bottom: var(--space-2);
  font-size: 0.9375rem;
}

@media print {
  .draft-notice,
  .draft-status,
  .filter-bar,
  .pagination {
    display: none !important;
  }
}

/* --- Bewegung reduzieren -------------------------------------------------------------------------------- */

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

/* --- Druck: Grundlage für Listen und Nachweise ------------------------------------------------------------- */

@media print {
  :root {
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-text: #000000;
    --color-text-muted: #333333;
    --color-border: #999999;
    --color-link: #000000;
  }

  body {
    display: block;
    font-size: 11pt;
    background: #ffffff;
    color: #000000;
  }

  .topbar,
  .mainnav,
  .subnav,
  .skip-link,
  .demo-banner,
  .offline-banner,
  .messages,
  .form-actions,
  .card-links,
  .no-print,
  button,
  dialog {
    display: none !important;
  }

  .content {
    max-width: none;
    padding: 0;
  }

  .card,
  .table-wrap,
  fieldset {
    border-color: #999999;
    break-inside: avoid;
  }

  .card-grid {
    display: block;
  }

  .card {
    margin-bottom: 1rem;
  }

  .table-wrap {
    overflow: visible;
  }

  thead {
    display: table-header-group;
  }

  tr {
    break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }

  .footer {
    border-top: 1px solid #999999;
    color: #333333;
  }
}

/* --- Aktionsliste (E-53) -----------------------------------------------------------------------------------------
   Handlungen einer Seite (Archiv einspielen, Passwort ändern …): je Zeile ein Link in Tipphöhe mit Titel (fett) und
   einem Satz Erklärung, Pfeil rechts, Trennlinie zwischen den Zeilen, am Handy volle Breite. Reiter der
   Unternavigation und Einträge der Seitenleiste werden hier nicht wiederholt; Listen von Datensätzen bleiben
   .link-list mit eigener Überschrift.
   <ul class="action-list"><li><a href="…"><span class="action-title">Titel</span>
     <span class="action-text">Ein Satz Erklärung.</span></a></li></ul> */
.action-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.action-list li + li {
  border-top: 1px solid var(--color-border);
}

.action-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
}

.action-list li:first-child a {
  border-radius: var(--radius) var(--radius) 0 0;
}

.action-list li:last-child a {
  border-radius: 0 0 var(--radius) var(--radius);
}

.action-list li:only-child a {
  border-radius: var(--radius);
}

.action-list a::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: var(--space-1);
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(-45deg);
}

.action-list a:hover {
  background: var(--color-surface-2);
}

.action-list a:hover .action-title {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.action-title {
  grid-column: 1;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.action-text {
  grid-column: 1;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.card .action-list {
  margin-bottom: 0;
}

/* Inhaltsverzeichnis in einer Zeile („Inhalt: A · B · C“) für lange Seiten mit wenigen Abschnitten */
.toc-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-2);
}

.toc-line a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

@media print {
  .action-list,
  .toc-line {
    display: none !important;
  }
}

/* --- QA-A: Korrekturen aus Prüfrunde A (Optik) ----------------------------------------------------------------
   A-25: lange Kennzeichen brechen um statt aus dem Bildschirm zu laufen. A-27: Die versteckten Vorlesetexte
   (.visually-hidden, position: absolute) hängen am Scrollrahmen der Tabelle, sonst scrollt die ganze Seite. A-26, A-30:
   Tipp-Flächen mindestens 44 px für Fahrzeug- und Faktenlinks, Aufklapper, die Schrittleiste der Assistenten,
   Rücksprung-Links und Auswahlknöpfe. */

.status {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  border-radius: 1em;
}

/* --- QA-C: Korrekturen aus Prüfrunde C (Befunde 17, 18, 19, 38) ------------------------------------------------ */

/* Befund 17: Versteckte Texte (.visually-hidden, position: absolute) in breiten Tabellen bezogen sich auf ein Element
   außerhalb des Scrollbereichs und verbreiterten so die ganze Seite (360 px: bis 637 px). Der Rahmen der Tabelle wird
   ihr Bezugsrahmen; sie bleiben im Scrollbereich der Tabelle. */
.table-wrap {
  position: relative;
}

.facts dt a,
.facts dd a,
.readiness-deadlines li > a:first-child,
.onboarding-progress a,
.back-link a,
.tap-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.content code {
  overflow-wrap: anywhere; /* lange Adressen wie der Anmeldelink der Einladung brechen um */
}


/* Befund 18: Lange Ampeltexte („nein (Neustart von caddy und web ausstehend?)“, „Verschwiegenheitserklärung gültig
   bis …“) ragten mit white-space: nowrap aus Spalte und Karte; sie brechen jetzt innerhalb der Ampel um. */
.status {
  white-space: normal;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Befund 19: Vorformatierter Text (Protokolle, Dateiinhalte) verbreitert nie die Seite; zu breite Zeilen scrollen im
   eigenen Kasten. Das Import-Protokoll bricht zusätzlich um (Klasse prewrap in backup/import_result.html). */
pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Lange Pfade und Namen in <code> (Ablageordner, Dateinamen) brechen um, statt die Seite zu verbreitern. */
code {
  overflow-wrap: anywhere;
}

/* Befund 38 (auch Prüfrunde A-26 und B4): Aufklapper und Namen in Fristenlisten mit mindestens 44 px Tipphöhe (--tap),
   wie Knöpfe und Reiter; eigene Regeln (etwa .env-badge > summary) überschreiben Höhe und Polster bei Bedarf. */
details > summary {
  min-height: var(--tap);
  padding-block: 0.625rem;
  cursor: pointer;
}

.field label:has(> input[type="radio"]),
.field label:has(> input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
}

.readiness-deadlines li > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}