/*
 * Demus iudicet – Gestaltungsgrundlage (Arbeitspaket M9, D-30 „Clay“-Stil).
 * Handgeschrieben, kein Framework, keine externen Schriften. Alles rund, weiche Tiefe,
 * großzügiger Raum, getönte Flächen. Verwaltung/Wahlstation (kiosk, admin, platform) folgen in
 * M10 und bleiben bewusst auf den bisherigen, schlichten Stilen – nur die Design-Tokens werden
 * bereits jetzt für alle Layouts einheitlich definiert.
 */

:root {
  /* Grundfarbe: gedecktes Blaugrün */
  --color-primary: #2f7f86;
  --color-primary-dark: #256267;
  --color-primary-contrast: #ffffff;
  --color-primary-tint: #ddeff0;
  --color-primary-tint-text: #1c4548;
  /* Eigener Ton für Fließtext-Verlinkung/Beschriftungen: --color-primary allein erreicht auf
     --color-bg nur 4.21:1 (siehe axe-core-Befund in a11y.spec.ts) – als Text immer diesen
     dunkleren Ton verwenden, --color-primary bleibt für Flächen (Schaltflächen, Seitenleiste). */
  --color-link: var(--color-primary-dark);

  /* Hintergrund und Flächen: warmes Sand statt reinem Grau */
  --color-bg: #f6f3ee;
  --color-surface: #fffdfa;
  --color-surface-edge: #ffffff;
  --color-border: #e4ddd0;
  --color-border-strong: #cdc2ac;

  /* Text */
  --color-text: #1f2d33;
  --color-text-muted: #5c6b71;

  /* Handlungsfarbe: warmes Korallenrot, kräftiger als die Vorschlagsfarbe, damit Weiß darauf
     lesbar bleibt (AA geprüft, siehe Abschlussbericht). Die hellere Koralle dient nur als
     dekorative Tönung, nie als Schaltflächenfläche mit Text. */
  --color-action: #b84e33;
  --color-action-dark: #9c4029;
  --color-action-contrast: #ffffff;
  --color-action-tint: #fbe9dc;
  --color-action-tint-text: #7a3c1c;

  /* Zweite Tönung: Salbeigrün, für Erfolg */
  --tint-success-bg: #e3efdf;
  --tint-success-text: #2e5c34;
  --color-success: #2e6b3e;
  --color-success-bg: #e3efdf;

  /* Dritte Tönung: Apricot, für Hinweise */
  --tint-notice-bg: #fbe9dc;
  --tint-notice-text: #7a4a1c;
  --color-warning: #8a5a1f;
  --color-warning-bg: #fbe9dc;

  /* Vierte Tönung: Himmelblau, für Information */
  --tint-info-bg: #e1ecf7;
  --tint-info-text: #2a4a6b;

  --color-danger: #b4453a;
  --color-danger-bg: #fbe5e2;

  --color-focus: #a8580a;
  --color-focus-ring: rgba(168, 88, 10, 0.35);

  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-base: 1.0625rem; /* 17px */
  --font-size-small: 0.9375rem; /* 15px, nur für Nebentext, nie Fließtext */
  --line-height-base: 1.6;
  --measure: 38rem; /* ~70 Zeichen bei Grundgröße */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-card: 0 8px 24px rgba(31, 45, 51, 0.08);
  --shadow-card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-button: 0 4px 12px rgba(31, 45, 51, 0.12);
  --shadow-button-pressed: 0 1px 3px rgba(31, 45, 51, 0.14);

  --max-width: 64rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #7fc7cc;
    --color-primary-dark: #a3d8dc;
    --color-primary-contrast: #0c2224;
    --color-primary-tint: #1f3d40;
    --color-primary-tint-text: #cdeef0;
    --color-link: var(--color-primary-dark);

    --color-bg: #16262a;
    --color-surface: #1e3236;
    --color-surface-edge: #274045;
    --color-border: #35494d;
    --color-border-strong: #4a6166;

    --color-text: #eef3f2;
    --color-text-muted: #a9bcbe;

    --color-action: #ef9370;
    --color-action-dark: #f4ab8f;
    --color-action-contrast: #2b1208;
    --color-action-tint: #3f2c20;
    --color-action-tint-text: #f6cdb3;

    --tint-success-bg: #24382a;
    --tint-success-text: #b7e0bd;
    --color-success: #9bd6a4;
    --color-success-bg: #24382a;

    --tint-notice-bg: #3d2f21;
    --tint-notice-text: #f0c99b;
    --color-warning: #f0c99b;
    --color-warning-bg: #3d2f21;

    --tint-info-bg: #223345;
    --tint-info-text: #b7d3ef;

    --color-danger: #f0a89e;
    --color-danger-bg: #3d2420;

    --color-focus: #ffc178;
    --color-focus-ring: rgba(255, 193, 120, 0.35);

    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-button-pressed: 0 1px 3px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
  }
}

/* ---------- Grundlage ---------- */

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  /* Sicherheitsnetz gegen waagerechtes Scrollen der ganzen Seite (siehe CLAUDE.md: „Wide content
     … must scroll inside its own overflow-x: auto container“) – einzelne Bausteine mit eigenem
     `overflow-x: auto` (z. B. `.choice-scale`, Feinschliff aus der M14-Abnahme) bleiben davon
     unberührt, sie scrollen weiterhin innerhalb ihrer eigenen Breite. `document.body.scrollWidth`
     entsprach schon vor dieser Zeile stets der Fensterbreite; ergänzt, weil
     `document.documentElement.scrollWidth` (und damit u. a. Playwright-Ganzseiten-Screenshots)
     ohne sie größer als die Fensterbreite ausfiel, siehe Abschlussbericht M15. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

@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;
  }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  z-index: 100;
  font-weight: 600;
}

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

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

/* ---------- Kopf- und Fußbereich ---------- */

.site-header {
  padding: var(--space-4) var(--space-5);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.site-title {
  margin: 0;
}

/* Wortmarke als runde Kachel (Feinschliff aus der M9-Abnahme: „damit der Kopf nicht wie nackter
   Text wirkt“). */
.site-title a {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary-contrast);
  background: var(--color-primary);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-button);
}

/* Feinschliff aus der Abnahme von M11 (Arbeitspaket M15): hält die Marketing-Navigation
   (`.landing-nav`, siehe unten) und die Zugangscode-Pille in derselben Kopfzeile, statt einer
   zweiten Leiste darunter. Ohne `header_nav`-Inhalt (alle Seiten außer den fünf öffentlichen
   Marketingseiten) enthält dieser Container nur die Zugangscode-Pille, verhält sich also wie vor
   M15. */
.site-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.site-header-code-link {
  font-weight: 700;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--color-surface);
  color: var(--color-link);
  box-shadow: var(--shadow-card);
}

.site-header-code-link:hover {
  background: var(--color-primary-tint);
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-5) var(--space-8);
}

/* Verwaltungsrahmen braucht mehr Breite als Bürgerseiten (Arbeitspaket M10 Nachbesserung 1,
   Befund 2): `.admin-shell` setzte selbst schon `max-width: 84rem`, aber `main` (oben) begrenzt
   auf `--max-width` (64rem) und zentriert – der Kindknoten kann diese Grenze seines Elternelements
   nicht überschreiten, egal welchen eigenen `max-width`-Wert er trägt. Dadurch blieb der
   Inhaltsbereich nach Abzug der 16rem-Seitenleiste auf rund 650px, die Abstimmungstabelle wurde an
   der Kartenkante abgeschnitten. `main` bekommt auf Verwaltungsseiten deshalb keine eigene Breite
   mehr; `.admin-shell` übernimmt Breite und Zentrierung vollständig. */
body.is-admin main {
  max-width: none;
  padding: 0;
}

.site-footer {
  padding: var(--space-5);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.site-footer nav {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-footer a {
  color: var(--color-text-muted);
}

/* ---------- Typografie ---------- */

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  color: var(--color-text);
  font-weight: 800;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  margin: 0 0 var(--space-4);
}

h2 {
  font-size: 1.5rem;
  margin: var(--space-7) 0 var(--space-4);
}

h2:first-child {
  margin-top: 0;
}

/* Feinschliff aus der M9-Abnahme: Abstand zwischen einer Kartengruppe und der nächsten
   Zwischenüberschrift. `h2:first-child` setzt den oberen Rand jeder Überschrift auf 0, sobald sie
   das erste Kind ihres eigenen <section>-Elements ist – genau das ist bei aufeinanderfolgenden
   <section>-Blöcken (z. B. „Laufende“/„Abgeschlossene Abstimmungen“) immer der Fall, wodurch die
   Überschrift auf dem Telefon an der Karte darüber klebte. Der Abstand kommt daher vom
   <section>-Element selbst.

   Nur für unmittelbar aufeinanderfolgende Abschnitte der Seite (direkte Kinder von `main`) –
   nicht `section + section` allgemein (Arbeitspaket M10 Nachbesserung 1, Befund 6): dieselbe
   Regel traf sonst auch auf zwei <section>-Karten nebeneinander in einem Grid (z. B.
   `.station-cards` auf `/station`), wo „section“ nur zufällig das Element für „Karte“ ist – die
   zweite Karte bekam dadurch 48px Abstand nach oben und begann sichtbar tiefer als die erste. */
main > section + section {
  margin-top: var(--space-7);
}

h3 {
  font-size: 1.1875rem;
  margin: var(--space-5) 0 var(--space-3);
}

p {
  max-width: var(--measure);
}

.lede {
  font-size: 1.1875rem;
  color: var(--color-text-muted);
}

a {
  color: var(--color-link);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

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

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

.no-margin {
  margin: 0;
}

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

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

.field {
  margin-bottom: var(--space-5);
  max-width: 26rem;
}

.field-wide {
  max-width: none;
}

.hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  margin: var(--space-1) 0 var(--space-2);
}

input,
select,
textarea {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  min-height: 44px;
}

textarea {
  min-height: 6rem;
  border-radius: var(--radius-md);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--color-focus);
}

input[type='radio'],
input[type='checkbox'] {
  width: 1.4rem;
  height: 1.4rem;
  min-height: 0;
  accent-color: var(--color-link);
  vertical-align: -0.35em;
  margin-right: var(--space-2);
}

fieldset {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: 0 0 var(--space-5);
}

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

/* M18: einzelne Radio-Zeile innerhalb eines <fieldset> (z. B. Zahlungsweg bei der Registrierung,
 * Tarifwahl im Abrechnungsbereich) – normalgewichtig statt der fetten Standard-<label>, damit sie
 * sich von der <legend> abhebt. */
.field-radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
  margin-bottom: var(--space-3);
}

.field-radio:last-child {
  margin-bottom: 0;
}

.field-radio[aria-disabled='true'] {
  color: var(--color-text-muted);
}

.field-error {
  color: var(--color-danger);
  font-size: var(--font-size-small);
  font-weight: 600;
  margin: var(--space-1) 0 0;
}

/* QR-Codes (TOTP-Einrichtung, Sofortausstellung an der Wahlstation, Zugang neu ausstellen):
   bisher ganz ohne Gestaltung eingebunden (Arbeitspaket M10 Nachbesserung 1, Befund 4). */
.qr-code {
  display: inline-flex;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: var(--space-3) 0;
}

.qr-code svg {
  display: block;
  width: 100%;
  max-width: 14rem;
  height: auto;
}

/* Anmeldeseiten (Verwaltung/Plattform) als zentrierte Karte mit Wortmarke im Seitenkopf
   (Arbeitspaket M10 Nachbesserung 1, Befund 4). Die Wortmarke selbst kommt aus `.site-header`
   in `base.njk` (Feinschliff aus der M9-Abnahme) – hier nur die Zentrierung der Karte darunter. */
.auth-page {
  max-width: 26rem;
  margin: var(--space-7) auto;
}

.tenant-select-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tenant-select-list form {
  margin: 0;
}

.tenant-select-list button {
  width: 100%;
}

/* Wiederherstellungscodes (TOTP) als Kachelraster statt einer nackten Aufzählungsliste
   (Arbeitspaket M10 Nachbesserung 1, Befund 4). */
.recovery-codes-grid {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
}

.input-large {
  font-size: 1.375rem;
  text-align: center;
  letter-spacing: 0.04em;
  max-width: 22rem;
}

/* ---------- Schaltflächen: Pillen ---------- */

button,
.button {
  font: inherit;
  font-weight: 700;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6);
  min-height: 48px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
  box-shadow: var(--shadow-button);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    filter 0.1s ease;
}

button:hover,
.button:hover {
  filter: brightness(1.06);
  text-decoration: none;
}

button:active,
.button:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-button-pressed);
}

button:disabled,
.button[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.button-action {
  background: var(--color-action);
  color: var(--color-action-contrast);
}

.button-secondary {
  background: var(--color-surface);
  color: var(--color-link);
  border: 2px solid var(--color-primary);
  box-shadow: none;
}

.button-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 2px solid var(--color-danger);
  box-shadow: none;
}

.button-quiet {
  background: transparent;
  color: var(--color-link);
  box-shadow: none;
  padding: var(--space-2) var(--space-4);
}

.button-small {
  padding: var(--space-2) var(--space-4);
  min-height: 40px;
  font-size: var(--font-size-small);
}

.button-block {
  display: flex;
  width: 100%;
}

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

/* ---------- Teilnehmernavigation ---------- */

.nav-role {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  margin: 0 auto;
  max-width: var(--max-width);
}

.nav-role-group {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  align-items: center;
}

.nav-role-org {
  font-weight: 700;
  color: var(--color-text-muted);
}

.nav-role a {
  font-weight: 700;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.nav-role a:hover {
  background: var(--color-primary-tint);
}

.nav-role button {
  background: transparent;
  color: var(--color-text-muted);
  box-shadow: none;
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
}

.nav-role button:hover {
  background: var(--color-surface);
  filter: none;
}

/* ---------- Karten ---------- */

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card), var(--shadow-card-inset);
  margin-bottom: var(--space-5);
}

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

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

.card-tint-primary {
  background: var(--color-primary-tint);
  color: var(--color-primary-tint-text);
}

.card-tint-success {
  background: var(--tint-success-bg);
  color: var(--tint-success-text);
}

.card-tint-notice {
  background: var(--tint-notice-bg);
  color: var(--tint-notice-text);
}

.card-tint-info {
  background: var(--tint-info-bg);
  color: var(--tint-info-text);
}

.card-tint-primary h1,
.card-tint-primary h2,
.card-tint-primary h3,
.card-tint-success h1,
.card-tint-success h2,
.card-tint-success h3,
.card-tint-notice h1,
.card-tint-notice h2,
.card-tint-notice h3,
.card-tint-info h1,
.card-tint-info h2,
.card-tint-info h3 {
  color: inherit;
}

.card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Zeilen wie „Zuletzt geändert“ auf der Übersicht: Titel links als kräftiger, nicht
   unterstrichener Text (Arbeitspaket M10 Nachbesserung 1, Befund 7 – ein unterstrichener Link
   mitten im Fließtext einer Zeile wirkt unruhig); Unterstreichung bleibt bei Hover/Fokus als
   Hinweis, dass die Zeile klickbar ist. */
.card-row-title {
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}

.card-row-title:hover,
.card-row-title:focus-visible {
  text-decoration: underline;
}

.card-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ---------- Abzeichen (Symbolkacheln) ---------- */

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-tint);
  color: var(--color-link);
  flex-shrink: 0;
}

.icon-tile svg {
  width: 24px;
  height: 24px;
}

.icon-tile-action {
  background: var(--color-action-tint);
  color: var(--color-action-dark);
}

.icon-tile-success {
  background: var(--tint-success-bg);
  color: var(--color-success);
}

.icon-tile-notice {
  background: var(--tint-notice-bg);
  color: var(--color-warning);
}

.icon-tile-info {
  background: var(--tint-info-bg);
  color: var(--tint-info-text);
}

/* Schrittnummer-Kacheln ("So funktioniert es", Feinschliff aus der M9-Abnahme). */
.icon-tile-step {
  font-size: 1.25rem;
  font-weight: 800;
}

/* Schritt-/Symbolkarten mit Kachel links (Startseite). */
.icon-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.icon-card-body {
  flex: 1 1 auto;
}

/* ---------- Statusabzeichen ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-small);
  font-weight: 700;
  white-space: nowrap;
}

.badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.badge-open {
  background: var(--tint-success-bg);
  color: var(--tint-success-text);
}

.badge-closed {
  background: var(--tint-info-bg);
  color: var(--tint-info-text);
}

.badge-neutral {
  background: var(--color-border-strong);
  color: var(--color-text);
}

/* M18: Abonnement-/Rechnungsstatus (siehe Arbeitspaket M18, Abschnitt 4). */
.badge-warning {
  background: var(--tint-notice-bg);
  color: var(--color-warning);
}

.badge-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.billing-banner {
  margin-bottom: var(--space-5);
}

.billing-banner a {
  font-weight: 700;
}

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

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-value {
  font-size: clamp(2.25rem, 1.9rem + 1vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-link);
}

.stat-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

/* ---------- Kachelraster (Übersichten) ---------- */

.tile-grid {
  display: grid;
  /* Feinschliff aus der Abnahme von M11 (Arbeitspaket M15): `auto-fill` reservierte auch bei nur
     zwei Kacheln (z. B. `/anmelden`) leere Spalten in voller Breite – sichtbar als Leerraum rechts
     neben den Karten. `auto-fit` kollabiert ungenutzte Spuren, sodass vorhandene Kacheln den Platz
     ausfüllen; bei vollen Reihen (z. B. die acht Kacheln unter „Funktionen“) verhält es sich
     identisch zu vorher. */
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.tile {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-surface);
  box-shadow: var(--shadow-card), var(--shadow-card-inset);
}

/* ---------- Ergebnis-Listen als Karten ---------- */

.poll-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.poll-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card), var(--shadow-card-inset);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Feinschliff aus der M9-Abnahme: Statusabzeichen immer unter dem Titel, unabhängig von der
   Titellänge (vorher sprang es je nach Zeilenumbruch zwischen "neben dem Titel" und "darunter"). */
.poll-card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.poll-card-title {
  margin: 0;
  font-size: 1.25rem;
}

.poll-card-title a {
  color: var(--color-text);
  text-decoration: none;
}

.poll-card-title a:hover {
  color: var(--color-link);
}

.poll-card-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.poll-card {
  position: relative;
}

.poll-card-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  margin: 0;
}

.poll-card-actions {
  margin-top: var(--space-2);
  position: relative;
  z-index: 1;
}

.poll-card-actions .button {
  pointer-events: auto;
}

.empty-note {
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: 0;
}

/* ---------- Ergebnisbalken ---------- */

.results-chart {
  width: 100%;
  height: auto;
  margin: var(--space-4) 0;
}

.results-bar-track {
  fill: var(--color-border);
}

.results-bar {
  fill: var(--color-primary);
}

.results-bar-label,
.results-bar-value {
  fill: var(--color-text);
  font-family: var(--font-sans);
}

.results-stand {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.results-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
}

.results-table-wrap table {
  min-width: max-content;
}

.results-table-wrap th,
.results-table-wrap td {
  white-space: nowrap;
}

/* Abstimmungstabelle (Arbeitspaket M10b): bei 1280px reichte die Breite nicht, weil Titel und
   Zeitraum als eine lange Zeile gerechnet wurden. Titel wird begrenzt und bricht um, der Zeitraum
   darf zwischen den beiden Datumsangaben umbrechen ("... 2026" / "bis ... 2026"). Die übrigen
   Spalten bleiben einzeilig, damit bei 1024px weiterhin das innere Scrollen als Rückfall greift. */
.polls-table .col-title {
  white-space: normal;
  max-width: 15rem;
}

.polls-table .col-period {
  white-space: normal;
  max-width: 13rem;
}

/* Die beiden Datumsangaben selbst brechen nie mitten im Wort um ("12. Sep-\ntember"), nur
   zwischen ihnen (nach "bis"), damit die Zeitraum-Spalte zuverlässig auf zwei Zeilen bleibt. */
.polls-table .col-period .nowrap {
  white-space: nowrap;
}

.results-table-details {
  margin: var(--space-4) 0;
}

.results-table-details > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-link);
  padding: var(--space-2) 0;
}

.suppression-note {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Feinschliff aus der M9-Abnahme: maskierte Zellen als neutrales Abzeichen statt unterstrichenem
   Text (wirkte wie ein Link). `abbr` unterstreicht standardmäßig gepunktet – bewusst überschrieben. */
.masked-cell {
  /* --color-text-muted auf --color-border erreicht nur 4.09:1 (axe-core-Befund color-contrast,
     15px ist bei fett nicht „groß“ genug für die 3:1-Ausnahme) – deshalb der volle Textton. */
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: var(--font-size-small);
  color: var(--color-text);
  background: var(--color-border);
  padding: 0.15rem var(--space-3);
  border-radius: var(--radius-pill);
  text-decoration: none;
  border-bottom: none;
}

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

table {
  border-collapse: collapse;
  width: 100%;
  background: var(--color-surface);
}

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

td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: none;
}

tr.group-row th,
tr.group-row td {
  font-weight: 700;
  background: var(--color-primary-tint);
}

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

.flash {
  background: var(--tint-success-bg);
  color: var(--tint-success-text);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  font-weight: 600;
}

.flash-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.flash ul {
  margin: 0;
  padding-left: var(--space-5);
}

/* ---------- Diskussion ---------- */

.comment {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-card);
}

.comment-replies {
  margin-left: var(--space-6);
  border-left: 3px solid var(--color-border);
  padding-left: var(--space-5);
}

.comment-meta {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.comment-alias {
  font-weight: 700;
  color: var(--color-link);
}

.comment-body {
  margin: 0 0 var(--space-2);
}

.comment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.comment-actions details {
  display: inline-block;
}

.comment-actions summary {
  cursor: pointer;
  color: var(--color-link);
  font-weight: 700;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  list-style: none;
}

.comment-actions summary::-webkit-details-marker {
  display: none;
}

.comment-actions summary:hover {
  background: var(--color-primary-tint);
}

.comment-actions form {
  margin-top: var(--space-3);
}

.comment-actions .button,
.comment-actions button {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
}

.comment-form textarea {
  margin-bottom: var(--space-3);
}

/* ---------- Antwortmöglichkeiten (Stimmabgabe) ---------- */

.choice-list {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.choice-option {
  display: block;
}

.choice-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.choice-option-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  min-height: 44px;
  box-shadow: var(--shadow-card);
}

.choice-option input:checked + .choice-option-label {
  border-color: var(--color-link);
  background: var(--color-primary-tint);
  color: var(--color-primary-tint-text);
}

.choice-option input:focus-visible + .choice-option-label {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.choice-scale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--space-3);
}

.choice-scale .choice-option-label {
  flex-direction: column;
  text-align: center;
  justify-content: center;
  gap: var(--space-1);
}

.choice-scale-number {
  font-size: 1.5rem;
  font-weight: 800;
}

/* Feinschliff aus der Abnahme von M14 (Arbeitspaket M15): `auto-fit, minmax(6.5rem, …)` ergab auf
   dem Telefon nur zwei Stufen je Zeile (unruhiger Zickzack bei 5 bis 7 Stufen). Eine Reihe mit
   waagerechtem Scrollen (statt eines starren 4+3-Rasters) funktioniert unabhängig von der
   Stufenzahl (2 bis 7, siehe PLAN.md Kapitel 17.6) gleich gut. */
@media (max-width: 480px) {
  .choice-scale {
    display: flex;
    /* `.choice-list` (zweite Klasse auf demselben <ul>, siehe partials/vote-form.njk) setzt
       `flex-direction: column` – ohne dieses Überschreiben blieb es dabei (gleiche Spezifität,
       0,1,0, aber `.choice-list` definiert die Eigenschaft, `.choice-scale` bislang nicht), und
       die Stufen stapelten sich trotz `display: flex` weiter untereinander statt in einer
       waagerecht scrollbaren Reihe. Beim Screenshot-Abgleich für M15 aufgefallen. */
    flex-direction: row;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
  }

  .choice-scale .choice-option {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 6rem;
  }
}

/* ---------- Dankeseite ---------- */

.done-card {
  text-align: center;
}

.done-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
}

.done-icon svg {
  width: 32px;
  height: 32px;
}

/* ---------- Zusammenfassung / Bestätigung ---------- */

.summary-list {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
}

.summary-list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.summary-list li:last-child {
  border-bottom: none;
}

/* ---------- Hilfsklassen ---------- */

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

.secret-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.25rem;
  background: var(--color-primary-tint);
  color: var(--color-primary-tint-text);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: inline-block;
  user-select: all;
}

.stack-gap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* „Offene Abstimmungen“ auf der Wahlstations-Startseite als Kartenliste statt Aufzählungspunkte
   (Arbeitspaket M10 Nachbesserung 1, Befund 6). */
.mini-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mini-card-list li {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-tint);
  font-weight: 700;
}

/* ---------- Wahlstations-Kiosk (M7, verfeinert in M10) ---------- */

.kiosk {
  font-size: 1.4rem;
}

.kiosk h1,
.kiosk h2 {
  font-size: 2rem;
}

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

.kiosk-timer {
  margin: 0;
  font-weight: 600;
}

.kiosk-end-button {
  font-size: 1.2rem;
  padding: var(--space-3) var(--space-4);
  min-height: 64px;
}

.kiosk button,
.kiosk input,
.kiosk select {
  font-size: 1.2rem;
}

.kiosk .choice-option-label,
.kiosk button,
.kiosk .button,
.kiosk input[type='submit'] {
  min-height: 64px;
}

.kiosk p,
.kiosk li,
.kiosk label,
.kiosk .hint {
  font-size: 1.25rem;
}

/* Ruhiger Kopfbalken der Wahlstation mit Einrichtungsname (Arbeitspaket M10, Abschnitt 4). */
.kiosk-org-name {
  font-weight: 800;
  margin: 0;
}

.kiosk-end-form {
  margin-top: var(--space-7);
}

.station-scanner {
  margin-bottom: var(--space-4);
}

.station-scanner video {
  width: 100%;
  max-width: 24rem;
  border-radius: var(--radius-md);
}

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

.print-only {
  display: none;
}

@media print {
  .site-header,
  .nav-role,
  .kiosk-bar,
  .site-footer,
  .admin-sidebar,
  .admin-page-head,
  .no-print {
    display: none !important;
  }

  .print-only {
    display: block;
  }

  main,
  .admin-shell,
  .admin-main {
    max-width: none;
    padding: 0;
    display: block;
  }

  /* Druckansicht ohne Farbe und ohne Schatten (Arbeitspaket M10, Abschnitt 4). */
  .card,
  .done-card {
    background: none;
    box-shadow: none;
    color: #000;
    padding: 0;
  }

  .secret-value {
    background: none;
    color: #000;
    border: 1px solid #000;
  }
}

/* ---------- Verwaltungsrahmen: Seitenleiste (Arbeitspaket M10) ---------- */

.admin-shell {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 84rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-8);
}

.admin-sidebar {
  flex: 0 0 16rem;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: var(--space-5);
}

.admin-sidebar-head {
  padding: 0 var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.admin-sidebar-org {
  font-weight: 800;
  font-size: 1.0625rem;
  margin: 0 0 var(--space-1);
}

.admin-sidebar-role {
  /* Voller Kontrast statt Deckkraft: eine reduzierte Deckkraft auf der Grundfarbe unterschreitet
     schnell AA (axe-core-Befund color-contrast, 3.86:1 statt mindestens 4.5:1). Die Unterscheidung
     zum Einrichtungsnamen kommt allein aus der Schriftstärke. */
  margin: 0;
  font-size: var(--font-size-small);
  font-weight: 400;
}

.admin-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.admin-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-primary-contrast);
  text-decoration: none;
  font-weight: 600;
  min-height: 44px;
}

.admin-nav a:hover {
  background: rgba(255, 255, 255, 0.14);
}

.admin-nav a[aria-current='page'] {
  background: var(--color-surface);
  color: var(--color-link);
  box-shadow: var(--shadow-button);
}

.admin-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}

.admin-nav a[aria-current='page'] .admin-nav-icon {
  background: var(--color-primary-tint);
  color: var(--color-link);
}

.admin-nav-icon svg {
  width: 18px;
  height: 18px;
}

.admin-sidebar-foot {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Arbeitspaket M10b: der Kontobereich existiert zweimal aus demselben Grund wie `.admin-nav`
   oben – eine dauerhaft sichtbare Fassung für breite Bildschirme, eine zweite innerhalb von
   `<details class="admin-topbar">`, die auf dem Telefon nur bei geöffnetem Menü sichtbar ist.
   Ohne dieses Ausblenden stand der Kontobereich auf dem Telefon auch bei geschlossenem Menü
   sichtbar unter der Kopfzeile „Menü“. */
.admin-sidebar-foot-persistent {
  display: none;
}

@media (min-width: 861px) {
  .admin-sidebar-foot-persistent {
    display: flex;
  }
}

/* Eigener Linkton statt der Fließtext-Linkfarbe (--color-link): auf der farbigen Sidebar-Fläche
   erreicht --color-link nicht überall AA, --color-primary-contrast (Weiß/Dunkel je nach Thema)
   dagegen schon, siehe Kontrastprüfung im Abschlussbericht. */
.admin-sidebar-foot a {
  color: var(--color-primary-contrast);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
}

.admin-sidebar-foot form button {
  width: 100%;
}

.admin-main {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.admin-page-head h1 {
  margin-bottom: 0;
}

/* Zwei Navigationslisten statt einer (Arbeitspaket M10 Nachbesserung 1, Befund 1): eine
   dauerhaft sichtbare (`.admin-nav-persistent`) für breite Bildschirme, eine zweite, identische
   innerhalb von `<details class="admin-topbar">` fürs ausklappbare Mobil-Menü. Ein gemeinsames
   `<details>` für beide Fälle funktioniert in aktuellen Browsern nicht mehr zuverlässig: der
   Inhalt eines geschlossenen `<details>` läuft intern über eine `::details-content`-Fläche mit
   `content-visibility: hidden`, die ein einfaches `nav { display: block }` im Autorenstylesheet
   nicht mehr aufhebt – die Navigation blieb dadurch auf allen Bildschirmbreiten unsichtbar, obwohl
   sie im HTML vorhanden war. Standardmäßig (schmale Bildschirme) ist deshalb die persistente Liste
   ausgeblendet und `<details>` sichtbar; die Media Query unten dreht das für breite Bildschirme um. */
.admin-nav-persistent {
  display: none;
}

@media (min-width: 861px) {
  .admin-nav-persistent {
    display: block;
    margin-bottom: var(--space-4);
  }

  .admin-topbar {
    display: none;
  }
}

/* Plattformverwaltung: gleicher Rahmen, dunklere Grundfarbe (D-30-Vorgabe „eigene Grundfarbe
   leicht abgesetzt, damit klar ist, dass man auf Betreiberebene ist“). */
.admin-shell-platform .admin-sidebar {
  background: var(--color-primary-dark);
}

@media (prefers-color-scheme: dark) {
  .admin-shell-platform .admin-sidebar {
    background: #0e1b1d;
  }
}

@media (max-width: 860px) {
  .admin-shell {
    flex-direction: column;
    padding: var(--space-3) var(--space-4) var(--space-7);
  }

  .admin-sidebar {
    flex: 1 1 auto;
    width: 100%;
    position: static;
    padding: var(--space-3) var(--space-4);
  }

  .admin-topbar > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    padding: var(--space-2) var(--space-2);
  }

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

  .admin-topbar[open] .admin-nav {
    margin-top: var(--space-3);
  }

  .admin-sidebar-head {
    display: none;
  }
}

/* ---------- Kennzahlkacheln (Übersicht, Vorbild des Auftraggebers) ---------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  /* `align-items: start` statt der Grid-Vorgabe `stretch` (Arbeitspaket M10 Nachbesserung 1,
     Befund 3): die Kacheln sollen ihre natürliche Höhe behalten, nicht auf die Höhe der
     höchsten Kachel der Zeile gestreckt werden – sonst wandert die Zahl in die Mitte der
     gestreckten Fläche und Symbol/Erklärzeile kleben oben bzw. unten. */
  align-items: start;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}

.kpi-tile {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card), var(--shadow-card-inset);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.kpi-tile .icon-tile {
  margin-bottom: var(--space-1);
}

.kpi-value {
  font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem);
  font-weight: 800;
  line-height: 1;
}

/* M18: für Kacheln mit einem Wort/Datum statt einer Zahl (Tarifname, Datum) – die große
 * Zahlengröße oben würde z. B. „Kommune“ über den Kachelrand hinaus laufen lassen. */
.kpi-value-text {
  font-size: 1.5rem;
}

.kpi-label {
  font-weight: 700;
  margin: 0;
}

.kpi-hint {
  /* Kein opacity-Abdunkeln (siehe .admin-sidebar-role weiter oben) – die Tönungsfarben sind
     bereits für ausreichenden Kontrast auf ihrer jeweiligen Fläche gewählt (siehe D-32). */
  margin: 0;
  font-size: var(--font-size-small);
}

.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.todo-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.todo-list li:last-child {
  border-bottom: none;
}

/* ---------- Tabellen in Karten (Verwaltung) ---------- */

.table-card {
  padding: 0;
  overflow: hidden;
}

.table-card table {
  background: transparent;
}

.table-card th,
.table-card td {
  border-bottom: 1px solid var(--color-border);
}

.table-card-toolbar {
  padding: var(--space-5) var(--space-6) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.table-card .results-table-wrap {
  border: none;
  border-radius: 0;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.row-actions form {
  display: inline-flex;
}

.row-actions .button {
  min-height: 36px;
  padding: var(--space-1) var(--space-4);
  font-size: var(--font-size-small);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.filter-bar .field {
  margin-bottom: 0;
  max-width: 14rem;
}

.filter-bar label {
  font-size: var(--font-size-small);
}

/* ---------- Import-Assistent: nummerierte Schritte ---------- */

.wizard-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0;
  margin: 0 0 var(--space-6);
}

.wizard-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  font-weight: 700;
  color: var(--color-text-muted);
}

.wizard-steps li .wizard-step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border);
  color: var(--color-text);
  font-size: var(--font-size-small);
}

.wizard-steps li.is-current {
  color: var(--color-text);
  background: var(--color-primary-tint);
}

.wizard-steps li.is-current .wizard-step-number,
.wizard-steps li.is-done .wizard-step-number {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.distribution-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.distribution-bar-label {
  flex: 0 0 10rem;
  font-size: var(--font-size-small);
}

.distribution-bar-track {
  flex: 1 1 auto;
  height: 12px;
  min-width: 4rem;
}

.distribution-bar-count {
  flex: 0 0 3rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* ---------- Moderationskarten ---------- */

.moderation-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.moderation-card-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  margin: 0;
}

.moderation-card-body {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0;
}

.moderation-card-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.moderation-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.moderation-card-actions form {
  display: inline-flex;
}

.moderation-card-actions .button {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-small);
}

/* ---------- Wahlstation: Startkarten ---------- */

.station-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
  align-items: stretch;
  margin-bottom: var(--space-5);
}

.station-cards .card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---------- Plattform-Startseite ---------- */

.home-hero {
  max-width: 40rem;
  margin: 0 auto var(--space-7);
  padding-top: var(--space-5);
  text-align: center;
}

.home-hero h1 {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  margin-bottom: var(--space-3);
  color: var(--color-link);
}

.home-lead {
  font-size: 1.1875rem;
  color: var(--color-text-muted);
  margin: 0 auto var(--space-5);
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.home-section {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-6) 0;
}

.home-section h2 {
  margin-top: 0;
}

.home-steps,
.home-privacy-points {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-steps li,
.home-privacy-points li {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
}

.home-tenant-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.home-tenant-item {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card), var(--shadow-card-inset);
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.home-tenant-item a {
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  color: var(--color-text);
}

.home-tenant-item a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.home-tenant-item a:hover {
  color: var(--color-link);
}

.home-tenant-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.home-for-institutions {
  margin-bottom: var(--space-4);
}

/* ---------- Feinabstimmung schmale Bildschirme ---------- */

@media (max-width: 480px) {
  main {
    padding: var(--space-3) var(--space-4) var(--space-7);
  }

  .card,
  .tile,
  .poll-card {
    padding: var(--space-4);
  }

  .nav-role {
    padding: var(--space-3);
  }

  .nav-role a {
    padding: var(--space-2) var(--space-3);
  }

  .nav-role button {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-small);
  }

  button,
  .button {
    width: 100%;
  }

  .button-row .button,
  .button-row button {
    width: auto;
  }

  .comment-replies {
    margin-left: var(--space-3);
    padding-left: var(--space-3);
  }
}

/*
 * Öffentliche Marketingseiten: Landingpage, Anmelde-Hub, Registrierung, öffentliche Übersicht
 * (Arbeitspaket M11, eingeordnet in M15). Nutzt durchgehend die Design-Tokens aus M9
 * (`--color-*`, `--space-*`, `--radius-*`, `--shadow-*`) und bestehende Bausteine (`.card`,
 * `.tile`, `.icon-tile`, `.badge`, `.button`, `.home-hero` usw.) statt neuer Grundfarben.
 */

/* ---------- Marketing-Navigation der öffentlichen Seiten (siehe public/landing-nav.njk) --------
   Seit dem Feinschliff aus der M11-Abnahme (M15) Teil derselben Kopfzeile wie die Wortmarke und
   die Zugangscode-Pille (`.site-header-actions` oben), nicht mehr eine eigene, zweite Leiste
   darunter – deshalb hier ohne eigene Breitenbegrenzung/Zentrierung. */

.landing-nav {
  display: flex;
  align-items: center;
}

.landing-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.landing-nav-links-persistent {
  justify-content: flex-end;
}

.landing-nav-links a:not(.button) {
  font-weight: 700;
  text-decoration: none;
  color: var(--color-link);
}

.landing-nav-links a:not(.button):hover {
  text-decoration: underline;
}

.landing-nav-mobile {
  display: none;
}

.landing-nav-mobile summary {
  display: inline-flex;
  width: fit-content;
  cursor: pointer;
  font-weight: 700;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  list-style: none;
}

.landing-nav-mobile summary::-webkit-details-marker {
  display: none;
}

.landing-nav-mobile[open] summary {
  margin-bottom: var(--space-3);
}

.landing-nav-mobile .landing-nav-links {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

@media (max-width: 720px) {
  .landing-nav-links-persistent {
    display: none;
  }

  .landing-nav-mobile {
    display: block;
  }
}

/* ---------- Breite Startseitenabschnitte (Kachelraster brauchen mehr als die 40rem Lesebreite
   von `.home-section`, siehe M9) ---------- */

.home-section-wide {
  max-width: none;
  margin: 0;
  padding: var(--space-6) 0;
}

.home-section-wide h2 {
  margin-top: 0;
}

/* ---------- Hero mit Schaubild ---------- */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-5) 0 var(--space-6);
}

.hero-grid .home-hero {
  max-width: none;
  margin: 0;
  padding-top: 0;
  text-align: left;
}

.hero-grid .home-actions {
  justify-content: flex-start;
}

.hero-visual-wrap {
  display: flex;
  justify-content: center;
}

.hero-card {
  width: 100%;
  max-width: 22rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card), var(--shadow-card-inset);
}

.hero-card-eyebrow {
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--font-size-small);
  font-weight: 800;
  color: var(--color-link);
}

.hero-card-title {
  margin: 0 0 var(--space-5);
  font-size: 1.1875rem;
  font-weight: 700;
}

.hero-chart {
  width: 100%;
  height: auto;
}

.hero-chart-label,
.hero-chart-value {
  font-family: var(--font-sans);
  font-size: 13px;
  fill: var(--color-text);
}

.hero-chart-track {
  fill: var(--color-border);
}

.hero-chart-bar {
  fill: var(--color-primary);
}

.hero-chart-bar-alt {
  fill: var(--color-action);
}

.hero-chart-bar-muted {
  fill: var(--color-border-strong);
}

.hero-card-meta {
  margin: var(--space-5) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid .home-hero {
    text-align: center;
  }

  .hero-grid .home-actions {
    justify-content: center;
  }

  .hero-visual-wrap {
    order: -1;
  }
}

/* ---------- „So funktioniert es“: Reiter aus Radio-Buttons, ohne JavaScript ---------- */

.tabs {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Optisch unsichtbar, aber weiterhin fokussierbar (anders als `display: none`), damit Tastatur-
   und Screenreader-Nutzung erhalten bleibt – die sichtbaren `<label>`-Pillen darunter sind
   Stellvertreter für die eigentlichen, echten Radio-Buttons. */
.tabs-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tabs-list {
  display: inline-flex;
  gap: var(--space-1);
  background: var(--color-surface);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  margin: 0 0 var(--space-5);
}

.tabs-tab {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
}

#how-tab-org:checked ~ .tabs-list label[for='how-tab-org'],
#how-tab-participant:checked ~ .tabs-list label[for='how-tab-participant'] {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

#how-tab-org:focus-visible ~ .tabs-list label[for='how-tab-org'],
#how-tab-participant:focus-visible ~ .tabs-list label[for='how-tab-participant'] {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.tabs-panel {
  display: none;
}

#how-tab-org:checked ~ .tabs-panel-org {
  display: block;
}

#how-tab-participant:checked ~ .tabs-panel-participant {
  display: block;
}

/* ---------- Preise ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
  margin: var(--space-5) 0;
  align-items: stretch;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card), var(--shadow-card-inset);
}

.pricing-card > *:last-child {
  margin-top: auto;
  padding-top: var(--space-5);
}

.pricing-card-highlight {
  background: var(--color-primary-tint);
  color: var(--color-primary-tint-text);
  box-shadow:
    0 0 0 2px var(--color-primary),
    var(--shadow-card);
}

.pricing-card-highlight h3 {
  color: inherit;
}

.pricing-card-flag {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-small);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pricing-card-audience {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.pricing-card-highlight .pricing-card-audience {
  color: inherit;
  opacity: 0.85;
}

.pricing-price {
  margin: 0 0 var(--space-4);
}

.pricing-price-amount {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  font-weight: 800;
}

.pricing-price-period {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.pricing-card-highlight .pricing-price-period {
  color: inherit;
  opacity: 0.85;
}

.pricing-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pricing-features li {
  padding-left: var(--space-5);
  position: relative;
}

.pricing-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.pricing-legal-note {
  margin: 0;
}

.pricing-recap {
  margin-bottom: var(--space-4);
}

/* M18: Umschalter monatlich/jährlich, reines HTML/CSS (Arbeitspaket M18, Abschnitt 4: „ohne
 * JavaScript per Radio/CSS“), gleiches Muster wie der Reiter „Einrichtung/Teilnehmende“ oben
 * (`.tabs-panel`/`#how-tab-org:checked`). `.pricing-toggle-input` ist visuell versteckt, aber
 * über die zugehörigen `<label>` weiter mit Tastatur und Screenreader bedienbar (kein
 * `display:none`, siehe barrierefreie Radio-Pillen unten). */
/* Umschlossen von `.pricing-toggle-fieldset`: beide Radio-Knöpfe liegen VOR diesem Wrapper im
 * DOM (siehe `pricing-macros.njk`) – wichtig, weil ein `position: absolute`-Element ohne eigene
 * `top`/`left`-Angabe an seiner ursprünglichen Fließposition verbleibt („static position“); stünde
 * ein Radio-Knopf zwischen zwei sichtbaren Labeln, läge sein (wenn auch unsichtbarer) Klickbereich
 * über dem nachfolgenden Label und würde dessen Klicks abfangen. */
.pricing-toggle-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.pricing-toggle {
  display: inline-flex;
  gap: var(--space-1);
  background: var(--color-surface);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-5);
}

/* `input.pricing-toggle-input` (Element + Klasse) statt nur `.pricing-toggle-input`: dieselbe
 * Spezifität wie die allgemeine Regel `input[type='radio']` weiter oben (Element + Attribut,
 * setzt dort width/height auf 1,4rem) – bei gleicher Spezifität gewinnt die später im Dokument
 * stehende Regel, hier also diese (siehe Abschlussbericht, Abschnitt „Beobachtungen“: ohne diese
 * Verschärfung blieb der Radio-Knopf mit voller 1,4rem-Klickfläche über dem folgenden Label
 * liegen und fing dessen Klicks ab – mit dem eigenen Playwright-Screenshot-Lauf gefunden). */
input.pricing-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pricing-toggle label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-5);
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text-muted);
}

/* Allgemeiner Geschwister-Selektor mit `[for]`-Attribut statt `+ label` (wie
 * `#how-tab-org:checked ~ .tabs-list label[for='how-tab-org']` weiter oben): die Radio-Knöpfe
 * stehen VOR `.pricing-toggle` im DOM, nicht unmittelbar vor ihrem jeweiligen `<label>` (siehe
 * `pricing-macros.njk`), ein einfacher Nachbar-Kombinator `+` griffe daher nicht. */
#pricing-interval-monthly:checked ~ .pricing-toggle label[for='pricing-interval-monthly'],
#pricing-interval-yearly:checked ~ .pricing-toggle label[for='pricing-interval-yearly'] {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

#pricing-interval-monthly:focus-visible ~ .pricing-toggle label[for='pricing-interval-monthly'],
#pricing-interval-yearly:focus-visible ~ .pricing-toggle label[for='pricing-interval-yearly'] {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.pricing-price-yearly {
  display: none;
}

#pricing-interval-yearly:checked ~ .pricing-grid .pricing-price-monthly {
  display: none;
}

#pricing-interval-yearly:checked ~ .pricing-grid .pricing-price-yearly {
  display: inline;
}

.pricing-grid-enterprise {
  grid-template-columns: 1fr;
  max-width: 24rem;
  margin-top: 0;
}

.pricing-card-enterprise {
  border: 2px dashed var(--color-border-strong);
  box-shadow: none;
}

/* ---------- Abschluss-Aufruf ---------- */

.cta-section .button-row {
  margin-top: var(--space-5);
}

/*
 * Abstimmungsbaukasten: Fragenliste/-formular der Verwaltung, Vorschau, Stimmabgabe mit mehreren
 * Fragen, Freitexte (Arbeitspaket M14, PLAN.md Kapitel 17.6, eingeordnet in M15). Nutzt
 * durchgehend die Design-Tokens aus M9 (`--color-*`, `--space-*`, `--radius-*`, `--shadow-*`) und
 * bestehende Bausteine (`.card`, `.badge`, `.button`, `.choice-list`, `.choice-option`,
 * `.choice-scale`, `.field-error`) statt neuer Grundfarben (siehe D-30).
 */

/* ---------- Reiter „Einstellungen / Fragen / Vorschau / Ergebnisse“ (admin/polls/*.njk) -------- */

.poll-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.poll-tabs a {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-surface-tint, var(--color-surface));
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
}

.poll-tabs a[aria-current='page'] {
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
}

.poll-tabs a:hover,
.poll-tabs a:focus-visible {
  text-decoration: underline;
}

/* ---------- Fragenliste der Verwaltung (admin/polls/questions.njk) ------------------------------ */

.question-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.question-card-admin .admin-page-head {
  align-items: flex-start;
  gap: var(--space-3);
}

.question-option-preview {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}

/* Feinschliff aus der Abnahme von M14 (Arbeitspaket M15): Kacheln mit Symbol und Rahmen statt
   Textblöcken; feste Spaltenzahl statt `auto-fit`, damit die fünfte Kachel nie allein in einer
   Zeile steht (3+2 zwischen 640 und 1099px, 5 in einer Reihe ab 1100px, siehe Media Queries
   unten). */
.question-type-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .question-type-tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .question-type-tiles {
    grid-template-columns: repeat(5, 1fr);
  }
}

.question-type-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  height: 100%;
}

.question-type-tile:hover,
.question-type-tile:focus-visible {
  border-color: var(--color-link);
  box-shadow: var(--shadow-card), var(--shadow-card-inset);
}

.question-type-tile-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-tint);
  color: var(--color-link);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.question-type-tile-icon svg {
  width: 22px;
  height: 22px;
}

.question-type-tile span:not(.question-type-tile-icon) {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* ---------- Fragen bei der Stimmabgabe/Vorschau (partials/vote-form.njk) ------------------------ */

.question-card {
  border: none;
  border-radius: var(--radius-lg, 1rem);
  background: var(--color-surface-tint, var(--color-surface));
  padding: var(--space-5);
  margin: 0 0 var(--space-5);
  /* Browser-Voreinstellung für <fieldset> ist `min-width: min-content` und ignoriert dabei laut
     Spezifikation eigentlich Nachfahren mit eigenem Overflow – in der Praxis rechnen Browser den
     Inhalt trotzdem ein. Ohne dieses Zurücksetzen zwang die waagerecht scrollbare Skala (siehe
     `.choice-scale` unten, Feinschliff aus der M14-Abnahme) die ganze Seite zum waagerechten
     Scrollen, statt nur innerhalb der Skala zu scrollen (bei M15 per Screenshot aufgefallen,
     siehe CLAUDE.md: „Wide content … must scroll inside its own overflow-x: auto container“). */
  min-width: 0;
}

.question-card legend {
  padding: 0 var(--space-2);
}

.question-number {
  font-weight: 700;
}

.required-mark {
  color: var(--color-danger);
}

.choice-option-other {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.choice-option-other .choice-other-text {
  /* Überschreibt `.choice-option input` (M9: versteckt das eigentliche Radio/Checkbox-Element,
     das stattdessen über das gekoppelte `.choice-option-label` bedient wird, siehe app.css weiter
     oben) – dieses Feld ist ein echtes, sichtbares Textfeld, kein verstecktes Auswahlelement. Der
     Selektor braucht zwei Klassen (`.choice-option-other .choice-other-text`, Spezifität 0,2,0),
     um `.choice-option input` (eine Klasse + ein Elementtyp, Spezifität 0,1,1) zuverlässig zu
     schlagen – eine einzelne Klasse allein (0,1,0) reicht nicht, unabhängig von der Reihenfolge im
     Stylesheet. Siehe Arbeitspaket M14, Datenschutz-/Gestaltungsregel „nur additiv am Dateiende“,
     deshalb hier statt einer Änderung an der M9-Regel selbst. */
  position: static;
  opacity: 1;
  width: auto;
  height: auto;
  flex: 1 1 auto;
  min-width: 12rem;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}

.choice-other-text:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.free-text-input {
  width: 100%;
  resize: vertical;
}

.char-counter {
  font-size: var(--font-size-small);
  color: var(--color-text-muted, var(--color-text));
  margin: var(--space-1) 0 0;
  text-align: right;
}

/* ---------- Ergebnisse je Frage (partials/results.njk) ------------------------------------------ */

.question-result-card {
  margin-bottom: var(--space-5);
}

.results-count {
  font-weight: 600;
}

.results-freetext-count {
  font-size: var(--font-size-large, 1.1rem);
  font-weight: 600;
}

/*
 * Registrierung, Plattform-Mandantenliste (Prüfung/Tarif/Slug), Nutzereinladung und
 * „Passwort vergessen“ (Arbeitspaket M12, eingeordnet in M15). Nutzt durchgehend die
 * Design-Tokens aus M9 (`--color-*`, `--space-*`, `--radius-*`) und bestehende Bausteine
 * (`.card`, `.field`, `.button*`, `.kpi-*`, `.badge*`, `.results-table-wrap`) statt neuer
 * Grundfarben.
 */

/* ---------- Mandantenliste /platform: schmale Inline-Formulare je Zeile (Slug/Tarif) ---------- */

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.input-small {
  width: auto;
  min-width: 8rem;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}

.tenant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- Registrierungsformular (src/views/registration/index.njk) ------------------------- */

#formular {
  max-width: 40rem;
}