/* Bausteine (AP-D1): Darstellung der Jinja2-Makros aus vorlagen/bausteine/.
   Zuordnung Makro ↔ Klassen: docs/ui-design/bausteine.md. Nur Tokens, keine Farbwerte. */

/* --- Seitenkopf ----------------------------------------------------------------------- */

.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}

.seitenkopf-text {
  max-width: var(--content-reading-max);
}

.seitenkopf-oberzeile {
  margin: 0 0 var(--space-1);
  color: var(--color-action);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.seitenkopf-beschreibung {
  margin: 0;
  color: var(--color-text-muted);
}

.seitenkopf-status {
  margin: var(--space-3) 0 0;
}

.seitenkopf-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --- Karte ---------------------------------------------------------------------------- */

.karte {
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.karte-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.karte-titel {
  margin: 0;
  font-size: var(--font-size-lg);
}

.karte-untertitel {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* einklappbare Karte (<details>) */
.karte-einklappbar > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  margin: calc(var(--space-2) * -1) 0;
  cursor: pointer;
  list-style: none;
}

.karte-einklappbar > summary::-webkit-details-marker {
  display: none;
}

.karte-einklappbar > summary::before {
  content: "▸";
  color: var(--color-action);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.karte-einklappbar[open] > summary::before {
  transform: rotate(90deg);
}

.karte-einklappbar > summary .karte-titel {
  display: inline;
}

.karte-einklappbar[open] > summary {
  margin-bottom: var(--space-4);
}

/* --- KPI-Karte ------------------------------------------------------------------------ */

.kpi-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.kpi-karte {
  margin: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.kpi-label {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.kpi-wert {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
}

.kpi-wert-offen {
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

.kpi-detail {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
}

.kpi-positiv .kpi-detail {
  color: var(--color-positive);
}

.kpi-negativ .kpi-detail {
  color: var(--color-negative);
}

/* --- Knöpfe --------------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height-md);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.knopf:hover {
  border-color: var(--color-action);
  color: var(--color-text);
  background: var(--color-surface-subtle);
}

.knopf-primaer {
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-text-on-dark);
}

.knopf-primaer:hover {
  border-color: var(--color-action-hover);
  background: var(--color-action-hover);
  color: var(--color-text-on-dark);
}

.knopf-primaer:active {
  background: var(--color-action-active);
}

.knopf-tertiaer {
  border-color: transparent;
  background: transparent;
  color: var(--color-action);
}

.knopf-tertiaer:hover {
  background: var(--color-surface-selected);
  color: var(--color-action-hover);
  border-color: transparent;
}

.knopf-klein {
  min-height: var(--control-height-sm);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.knopf-breit {
  width: 100%;
}

/* vom Skript ausgeblendete Knöpfe (z. B. „Weitere Zeile“ bei 10 Zeilen) */
.knopf[hidden] {
  display: none;
}

/* --- Status-Marken -------------------------------------------------------------------- */

.status-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-canvas-dense);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  white-space: nowrap;
}

/* Punkt als Ergänzung – der Text trägt die Bedeutung */
.status-marke::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: currentcolor;
}

.status-positiv {
  background: var(--color-positive-bg);
  color: var(--color-positive);
}

.status-negativ {
  background: var(--color-negative-bg);
  color: var(--color-negative);
}

.status-warnung {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.status-info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

/* --- Meldungen ------------------------------------------------------------------------ */

.meldungsbox {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-left: var(--space-1) solid var(--color-info);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
}

.meldungsbox p {
  margin: 0;
}

.meldungsbox p + p {
  margin-top: var(--space-2);
}

.meldungsbox-titel {
  font-weight: var(--font-weight-bold);
}

.meldungsbox-erfolg {
  border-left-color: var(--color-positive);
  background: var(--color-positive-bg);
}

.meldungsbox-fehler {
  border-left-color: var(--color-negative);
  background: var(--color-negative-bg);
}

.meldungsbox-warnung {
  border-left-color: var(--color-warning);
  background: var(--color-warning-bg);
}

.feldfehler {
  margin: var(--space-1) 0 0;
  color: var(--color-negative);
  font-size: var(--font-size-sm);
}

/* --- Leerer Zustand ------------------------------------------------------------------- */

.leerzustand {
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.leerzustand-titel {
  margin: 0 0 var(--space-2);
  font-weight: var(--font-weight-bold);
}

.leerzustand-text {
  margin: 0 auto var(--space-4);
  max-width: var(--content-reading-max);
  color: var(--color-text-muted);
}

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

.formular {
  display: grid;
  gap: var(--space-4);
}

.feld {
  display: grid;
  gap: var(--space-1);
}

.feld > label,
.feld-label {
  font-weight: var(--font-weight-medium);
}

.feld-hilfe {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.eingabe {
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.eingabe:hover {
  border-color: var(--color-action);
}

.eingabe[type="file"] {
  padding: var(--space-2);
}

.ankreuzfeld {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.ankreuzfeld input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.2rem 0 0;
  accent-color: var(--color-action);
}

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

.tabellenrahmen {
  /* relative: unsichtbare Vorlesetexte (.sr-only) bleiben im Scrollbereich und verbreitern
     nicht die Seite */
  position: relative;
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

/* in einer Karte keine zweite Umrandung (keine verschachtelten Karten) */
.karte .tabellenrahmen {
  border: 0;
  border-radius: 0;
}

.karte .daten-tabelle caption {
  padding-left: 0;
}

.daten-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.daten-tabelle caption {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
}

.daten-tabelle th,
.daten-tabelle td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.daten-tabelle thead th {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  border-top: var(--border-width) solid var(--color-border);
}

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

.daten-tabelle .zahl {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

/* sichtbarer Wisch-Hinweis nur bei schmaler Ansicht (siehe Responsiv) */
.wischhinweis {
  display: none;
  margin: 0 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.metadaten {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.schluessel {
  font-family: var(--font-mono);
}

/* --- Aktionsmenü (<details>, ohne JavaScript bedienbar) ------------------------------- */

.zeilenaktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
}

.aktionsmenue > summary {
  list-style: none;
}

.aktionsmenue > summary::-webkit-details-marker {
  display: none;
}

.aktionsmenue > summary::after {
  content: "▾";
  font-size: var(--font-size-xs);
}

.aktionsmenue[open] > summary {
  background: var(--color-surface-selected);
  border-color: var(--color-action);
}

.aktionsmenue-liste {
  display: grid;
  gap: var(--space-1);
  min-width: 10rem;
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.aktionsmenue-liste form {
  margin: 0;
}

.aktionsmenue-liste .knopf {
  width: 100%;
  justify-content: flex-start;
}

/* --- Details anzeigen (lange Inhalte) ------------------------------------------------- */

.details-klein > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-sm);
  color: var(--color-action);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.details-klein ul {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* --- Diagramm ------------------------------------------------------------------------- */

.diagramm {
  margin: 0;
}

.diagramm-titel {
  margin: 0 0 var(--space-2);
  font-weight: var(--font-weight-bold);
}

.diagramm-flaeche {
  position: relative;
  min-height: var(--chart-min-height);
}

.diagramm-zusammenfassung {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* --- Ergänzungen AP-D2 ---------------------------------------------------------------- */

/* Metadaten im Fließtext (z. B. „(archiviert)“, Zeiträume unter Zahlen) */
.metadaten-inline {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Link oder Hinweis am Ende einer Karte */
.karte-fuss {
  margin: var(--space-4) 0 0;
}

.karte > .meldungsbox + *,
.karte > * + .meldungsbox {
  margin-top: var(--space-4);
}

/* KPI-Karte mit weiteren Werten (Vergleich „Auf einen Blick“) */
.kpi-werte {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.kpi-werte > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.kpi-werte dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.kpi-werte dd {
  margin: 0;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Grün/Rot nur zusätzlich zum Vorzeichen, wo „besser/schlechter“ fachlich eindeutig ist */
.kpi-ton-positiv {
  color: var(--color-positive);
}

.kpi-ton-negativ {
  color: var(--color-negative);
}

/* Schlüssel-Wert-Raster: Beschriftung über dem Wert; ab 1024 px zwei Spalten */
.schluessel-werte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-8);
  margin: 0;
}

.schluessel-werte dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

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

/* Statuszeilen: „Beschriftung: Wert“ in einer Zeile, umbrechend */
.statuszeilen {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.statuszeilen > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.statuszeilen dt {
  font-weight: var(--font-weight-medium);
}

.statuszeilen dd {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  overflow-wrap: anywhere;
}

/* Nebenzeile direkt unter der vorigen, kleiner und gedämpft (AP-D3: „Letzter Lauf
   insgesamt“ unter „Täglicher Kursabruf“) */
.statuszeilen .statuszeile-neben {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.statuszeile-neben dt {
  font-weight: var(--font-weight-normal);
}

/* Kompakte Liste in einer Karte: Text links, eine Aktion oder ein Status rechts */
.kompaktliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kompaktliste-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.kompaktliste-zeile:first-child {
  padding-top: 0;
}

.kompaktliste-zeile:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.kompaktliste-text {
  min-width: 0;
  flex: 1 1 14rem;
}

.kompaktliste-name {
  font-weight: var(--font-weight-medium);
}

/* Liste mit Status-Abzeichen (AP-D3, H2): ab 768 px steht das Abzeichen immer rechts,
   darunter immer unter dem Text (siehe Responsiv) – nie je nach Textlänge mal so, mal so */
.kompaktliste-status .kompaktliste-zeile {
  flex-wrap: nowrap;
}

.kompaktliste-status .kompaktliste-text {
  flex-basis: auto;
}

.kompaktliste-status .kompaktliste-aktion {
  flex: none;
}

/* Einklappbare Werte (z. B. Formel und Sonderfälle) */
.details-werte {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.details-werte dt {
  font-weight: var(--font-weight-bold);
}

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

/* Formular in Schritten: Feldgruppe (fieldset) als Karte mit Überschrift */
.formular-schritt {
  min-width: 0;
  margin: 0 0 var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.formular-schritt-titel {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.formular-schritt-titel + * {
  clear: both;
}

.schritt-nr {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  border-radius: var(--radius-pill);
  background: var(--color-surface-selected);
  color: var(--color-action);
  font-size: var(--font-size-sm);
}

/* sekundäre Aufgabe: ohne Fläche, nur gerahmt */
.formular-sekundaer {
  background: transparent;
  box-shadow: none;
}

.formular-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.feld-schmal {
  max-width: 28rem;
}

/* Einheit sichtbar neben dem Feld; der übertragene Wert bleibt die reine Zahl */
.eingabe-mit-einheit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.einheit {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* Legende unter einem Diagramm (diagramm_legende): Linienmuster + voller Name, umbrechend */
.legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.legende[hidden] {
  display: none;
}

.legende-eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target-min);
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.legende-eintrag:hover {
  border-color: var(--color-border);
  background: var(--color-surface-subtle);
}

/* ausgeblendete Reihe: durchgestrichen (nicht nur blasser), aria-pressed="false" */
.legende-eintrag[aria-pressed="false"] {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.legende-linie {
  position: relative;
  flex: none;
  width: 1.75rem;
  border-top: calc(var(--border-width) * 3) solid var(--legende-farbe, var(--chart-series-1));
}

/* zweites Merkmal neben der Farbe: Punktform wie im Diagramm (FORMEN in vergleich.js) */
.legende-punkt {
  position: absolute;
  top: calc(var(--border-width) * -1.5);
  left: 50%;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--legende-farbe, var(--chart-series-1));
  transform: translate(-50%, -50%);
}

.legende-muster-1 .legende-punkt {
  border-radius: var(--radius-pill);
}

/* AP-D3 (H9): Muster 2 = Raute, Muster 4 = Quadrat (wie FORMEN in vergleich.js) */
.legende-muster-2 .legende-punkt {
  width: 0.5rem;
  height: 0.5rem;
  transform: translate(-50%, -50%) rotate(45deg);
}

.legende-muster-3 .legende-punkt {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.legende-muster-4 .legende-punkt {
  width: 0.5625rem;
  height: 0.5625rem;
}

.legende-muster-5 .legende-punkt {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.legende-eintrag[aria-pressed="false"] .legende-linie {
  border-top-style: dotted;
}

.legende-farbe-1 {
  --legende-farbe: var(--chart-series-1);
}

.legende-farbe-2 {
  --legende-farbe: var(--chart-series-2);
}

.legende-farbe-3 {
  --legende-farbe: var(--chart-series-3);
}

.legende-farbe-4 {
  --legende-farbe: var(--chart-series-4);
}

.legende-farbe-5 {
  --legende-farbe: var(--chart-series-5);
}

.legende-linie-referenz {
  border-top-style: dashed;
  border-top-color: var(--chart-axis);
}

/* --- Seitenmuster: Anmeldung ---------------------------------------------------------- */

.anmeldung {
  display: grid;
  gap: var(--space-8);
  justify-items: center;
  max-width: 28rem;
  margin: var(--space-8) auto 0;
}

.anmeldung-marke {
  text-align: center;
}

.anmeldung-marke img {
  display: block;
  width: 15rem;
  height: auto;
  margin: 0 auto var(--space-6);
}

.claim {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.unterzeile {
  margin: 0;
  color: var(--color-text-muted);
}

.anmeldung-karte {
  width: 100%;
  margin: 0;
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

.meldung-anmeldung {
  margin-bottom: var(--space-4);
}

.anmeldung-karte h1 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-6);
}

/* --- Seitenmuster: Strategien --------------------------------------------------------- */

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

.strategien-tabelle td:first-child {
  min-width: 12rem;
}

.strategien-tabelle .status-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.strategien-tabelle .grund {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-negative);
  font-size: var(--font-size-xs);
}

/* --- Responsiv ------------------------------------------------------------------------ */

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

@media (max-width: 74.99rem) {
  .kpi-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* AP-D2: Tabelle mit stapeln="breit" – unter 1200 px je Zeile ein Block (wie die
     gestapelte Tabelle unter 768 px, siehe unten) */
  .tabelle-gestapelt-breit,
  .tabelle-gestapelt-breit tbody,
  .tabelle-gestapelt-breit caption {
    display: block;
  }

  .tabelle-gestapelt-breit thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tabelle-gestapelt-breit tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-4) 0;
    border-bottom: var(--border-width) solid var(--color-border);
  }

  .tabelle-gestapelt-breit tbody tr:last-child {
    border-bottom: 0;
  }

  .tabelle-gestapelt-breit td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .tabelle-gestapelt-breit .zahl {
    text-align: left;
  }

  .tabelle-gestapelt-breit td[data-spalte]::before {
    content: attr(data-spalte);
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
  }

  .tabelle-gestapelt-breit .zelle-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
  }
}

@media (max-width: 47.99rem) {
  .karte,
  .formular-schritt {
    padding: var(--space-4);
  }

  .kpi-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .anmeldung {
    margin-top: var(--space-4);
    gap: var(--space-6);
  }

  .anmeldung-karte {
    padding: var(--space-6) var(--space-4);
  }

  .daten-tabelle th,
  .daten-tabelle td {
    padding: var(--space-2) var(--space-3);
  }

  .wischhinweis {
    display: block;
  }

  .kompaktliste-status .kompaktliste-zeile {
    flex-direction: column;
    align-items: flex-start;
  }

  /* B2 (Prüfung AP-D1): gestapelte Tabelle – jede Zeile ein Block, Spaltenname aus
     data-spalte als sichtbare Beschriftung. Reihenfolge: Name, Hauptaktion, Status, weitere
     Aktionen, übrige Angaben. Nur Darstellung; HTML, Links und Formulare bleiben gleich. */
  .tabelle-gestapelt,
  .tabelle-gestapelt tbody,
  .tabelle-gestapelt caption {
    display: block;
  }

  .tabelle-gestapelt thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tabelle-gestapelt tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-4) 0;
    border-bottom: var(--border-width) solid var(--color-border);
  }

  .tabelle-gestapelt tbody tr:first-child {
    padding-top: 0;
  }

  .tabelle-gestapelt tbody tr:last-child {
    border-bottom: 0;
  }

  .tabelle-gestapelt td {
    display: block;
    order: 5;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .tabelle-gestapelt .zahl {
    text-align: left;
  }

  .tabelle-gestapelt td[data-spalte]::before {
    content: attr(data-spalte);
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
  }

  .tabelle-gestapelt .zelle-name {
    order: 1;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
  }

  /* Aktionen-Zelle auflösen, damit Hauptaktion und Menü getrennt einsortiert werden */
  .tabelle-gestapelt .zelle-aktionen,
  .tabelle-gestapelt .zelle-aktionen .zeilenaktionen {
    display: contents;
  }

  .tabelle-gestapelt .zeilenaktionen > .knopf {
    order: 2;
    justify-self: start;
  }

  .tabelle-gestapelt .zelle-status {
    order: 3;
  }

  .tabelle-gestapelt .zeilenaktionen > .aktionsmenue {
    order: 4;
    justify-self: start;
  }

  .strategien-tabelle td:first-child {
    min-width: 0;
  }
}