/* ══════════════════════════════════════════════════════════════════════════
   Abstimmungsmodul — Bereichs-CSS im v3-Design (Spec § 19).

   Kein neues Design-System: alles hier nutzt die v3-Tokens (--v3-*) und lebt
   unter `.v3-page`, genau wie die Bereichs-Namensraeume `pk-`, `at-`, `s3-`.
   Neu sind nur die vier Dinge, die es in v3 noch nicht gibt und die die Spec
   verlangt: die Statusfarben-Tabelle (§ 19.2), der Beteiligungsbalken mit
   Quorum-Marke (§ 19.1), die Ergebnisbalken mit Schwellenlinie (§ 19.3) und
   der Stimmzettel in Mobil-/Desktop-Ansicht (§ 19.4).

   Bewusst reine CSS-Balken, kein Diagramm-Framework — damit das Ergebnis-PDF
   (Grover, Etappe 4) identisch aussieht.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Badges: die verbindliche Statusfarben-Tabelle (§ 19.2) ─────────────── */
.v3-page .ab-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1px;
  border: 1px solid transparent; white-space: nowrap;
}
.v3-page .ab-badge.ab-slate  { background: #f1f4f8; color: #5b6b84; border-color: #e2e8f0; }
.v3-page .ab-badge.ab-indigo { background: #eef0ff; color: #4338ca; border-color: #d7dbff; }
.v3-page .ab-badge.ab-amber  { background: #fdf3e2; color: #a15c00; border-color: #f7dfb4; }
.v3-page .ab-badge.ab-green  { background: #e6f6ec; color: #12703f; border-color: #bfe6cf; }
.v3-page .ab-badge.ab-blue   { background: #e8effd; color: #1e56c8; border-color: #c8dafa; }
.v3-page .ab-badge.ab-violet { background: #f2ecfd; color: #6b3fd4; border-color: #ddd0f8; }
.v3-page .ab-badge.ab-red    { background: #fdeaec; color: #a52b3a; border-color: #f4bdc4; }
.v3-page .ab-badge.ab-orange { background: #fdeee2; color: #a8500a; border-color: #f7d3b4; }
.v3-page .ab-badge.ab-sky    { background: #e5f4fb; color: #0b6f92; border-color: #bfe4f2; }
.v3-page .ab-badge.ab-navy   { background: #e9edf6; color: #0f2b46; border-color: #ccd7ea; }
.v3-page .ab-badge.ab-muted  { background: #f6f7f9; color: #98a2b3; border-color: #e9ecf1; }

/* „laeuft gerade" — gruener, pulsierender Punkt (§ 19.2) */
.v3-page .ab-badge .ab-dot {
  width: 7px; height: 7px; border-radius: 999px; background: currentColor;
  animation: ab-puls 1.6s ease-in-out infinite;
}
@keyframes ab-puls { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
@media (prefers-reduced-motion: reduce) {
  .v3-page .ab-badge .ab-dot { animation: none; }
}

/* Probewahl: diagonale Schraffur + Badge, in JEDER Ansicht (§ 19.2) */
.v3-page .ab-badge.ab-probe {
  color: #7a4b00; border-color: #f0d3a0;
  background: repeating-linear-gradient(45deg, #fff7e6, #fff7e6 5px, #ffedcc 5px, #ffedcc 10px);
}
.v3-page .ab-probe-flaeche {
  background: repeating-linear-gradient(45deg,
    rgba(255,237,204,.55), rgba(255,237,204,.55) 9px,
    rgba(255,247,230,.55) 9px, rgba(255,247,230,.55) 18px);
}

/* ── Kachelreihe „Wo stehen wir?" (§ 19.1) ─────────────────────────────── */
.v3-page .ab-kpis {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.v3-page .ab-kpi {
  background: var(--v3-card); border: 1px solid var(--v3-line);
  border-radius: var(--v3-r); box-shadow: var(--v3-shadow); padding: 14px 16px;
}
.v3-page .ab-kpi .kl { font-size: 11.5px; font-weight: 700; color: var(--v3-ink3);
                       text-transform: uppercase; letter-spacing: .4px; }
.v3-page .ab-kpi .kv { font-size: 24px; font-weight: 800; margin-top: 4px;
                       font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.v3-page .ab-kpi .kv small { font-size: 13px; font-weight: 650; color: var(--v3-ink2); }
.v3-page .ab-kpi .kd { font-size: 12px; color: var(--v3-ink2); margin-top: 3px; }
.v3-page .ab-kpi.ab-ton-amber .kv { color: var(--v3-warn); }
.v3-page .ab-kpi.ab-ton-green .kv { color: var(--v3-ok); }
.v3-page .ab-kpi.ab-ton-blue  .kv { color: var(--v3-brand); }

/* ── Beteiligungs-Balken mit Quorum-Marke (§ 19.1) ─────────────────────── */
.v3-page .ab-bar { position: relative; height: 10px; border-radius: 999px;
                   background: #eef1f6; overflow: visible; margin-top: 8px; }
.v3-page .ab-bar .fill { position: absolute; inset: 0 auto 0 0; height: 100%;
                         border-radius: 999px; background: linear-gradient(90deg, #2f6fe0, #1e56c8); }
.v3-page .ab-bar .fill.ok   { background: linear-gradient(90deg, #23a463, #178a50); }
.v3-page .ab-bar .fill.warn { background: linear-gradient(90deg, #e0a02f, #c07600); }
.v3-page .ab-bar .marke { position: absolute; top: -4px; bottom: -4px; width: 2px;
                          background: #16233a; border-radius: 2px; }
.v3-page .ab-bar .marke::after {
  content: attr(data-label); position: absolute; top: -17px; left: 50%;
  transform: translateX(-50%); font-size: 10px; font-weight: 700;
  color: var(--v3-ink2); white-space: nowrap;
}

/* Die Schrittkette selbst kommt aus `shared/_step_indicator` (.studio-stepper,
   Muster Kampagnen-Studio) — hier nur der Abstand zum Rest der Seite. */
.v3-page .studio-stepper { margin: 4px 0 16px; }

/* ── Guard-Checkliste „was fehlt noch" (§ 19.5) ────────────────────────── */
.v3-page .ab-check { display: grid; gap: 10px; }
.v3-page .ab-check .zeile { border: 1px solid var(--v3-line); border-radius: 12px;
                            padding: 12px 14px; background: #fff; }
.v3-page .ab-check .zeile.ok   { border-color: #bfe6cf; background: #f6fcf8; }
.v3-page .ab-check .zeile.offen { border-color: #f7dfb4; background: #fffdf7; }
.v3-page .ab-check .kopf { display: flex; align-items: center; gap: 9px;
                           font-weight: 700; font-size: 13px; }
.v3-page .ab-check .kopf .zeichen { font-size: 14px; }
.v3-page .ab-check ul { margin: 7px 0 0 26px; padding: 0; font-size: 12.5px;
                        color: var(--v3-ink2); }
.v3-page .ab-check li { margin: 3px 0; }
.v3-page .ab-check .hinweis { margin: 6px 0 0 26px; font-size: 12px; color: var(--v3-ink3); }

/* ── Ergebnisbalken mit Schwellenlinie (§ 19.3) ────────────────────────── */
.v3-page .ab-ergebnis { display: grid; gap: 10px; }
.v3-page .ab-obar { position: relative; }
.v3-page .ab-obar .lbl { display: flex; justify-content: space-between; gap: 12px;
                         font-size: 12.5px; margin-bottom: 4px; }
.v3-page .ab-obar .lbl .z { font-weight: 700; font-variant-numeric: tabular-nums; }
.v3-page .ab-obar .track { position: relative; height: 22px; border-radius: 8px;
                           background: #f1f4f8; border: 1px solid var(--v3-line2); }
.v3-page .ab-obar .val { position: absolute; inset: 0 auto 0 0; border-radius: 7px;
                         background: linear-gradient(90deg, #2f6fe0, #1e56c8); }
.v3-page .ab-obar.ja  .val { background: linear-gradient(90deg, #23a463, #178a50); }
.v3-page .ab-obar.nein .val { background: linear-gradient(90deg, #d9556a, #c93a4a); }
/* Enthaltungen optisch abgesetzt: gestreift, grau (§ 19.3) */
.v3-page .ab-obar.enth .val {
  background: repeating-linear-gradient(45deg, #cfd6e2, #cfd6e2 6px, #e2e8f0 6px, #e2e8f0 12px);
}
.v3-page .ab-schwelle { position: absolute; top: -3px; bottom: -3px; width: 2px;
                        background: #16233a; }
.v3-page .ab-schwelle span { position: absolute; top: -16px; left: 4px; font-size: 10px;
                             font-weight: 700; color: var(--v3-ink); white-space: nowrap; }
.v3-page .ab-feststellung { font-size: 17px; font-weight: 800; padding: 10px 14px;
                            border-radius: 12px; display: inline-block; }
.v3-page .ab-nachrichtlich { margin-left: 22px; border-left: 3px solid var(--v3-line);
                             padding-left: 14px; }

/* ── Stimmzettel-Vorschau (§ 19.4/§ 19.6) ──────────────────────────────── */
.v3-page .ab-vorschau-rahmen {
  border: 3px dashed #c93a4a; border-radius: 18px; padding: 14px; background: #fff8f8;
}
.v3-page .ab-vorschau-rahmen .ab-vorschau-band {
  font-size: 12px; font-weight: 800; color: #a52b3a; letter-spacing: .3px;
  margin-bottom: 12px; text-transform: uppercase;
}
.ab-zettel {
  background: #fff; border: 1px solid #e6eaf1; border-radius: 16px;
  padding: 20px; margin: 0 auto; font-size: 16px; line-height: 1.5; color: #16233a;
}
.ab-zettel.ab-mobil   { max-width: 420px; }
.ab-zettel.ab-desktop { max-width: 760px; }
.ab-zettel .ab-kopf { font-size: 13px; color: #5b6b84; border-bottom: 1px solid #eef1f6;
                      padding-bottom: 10px; margin-bottom: 14px; }
.ab-zettel .ab-fortschritt { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.ab-zettel .ab-punkt { width: 8px; height: 8px; border-radius: 999px; background: #dfe4ec; }
.ab-zettel .ab-punkt.on { background: #1e56c8; }
.ab-zettel .ab-frage { font-size: 19px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 6px; }
.ab-zettel .ab-antragstext { font-size: 15px; color: #5b6b84; margin-bottom: 16px;
                             white-space: pre-line; }
/* Optionen als grosse Flaechen: volle Breite, min. 56 px, ganze Karte klickbar */
.ab-zettel .ab-option {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  padding: 14px 16px; margin-bottom: 10px; border: 2px solid #e6eaf1;
  border-radius: 14px; background: #fff; cursor: pointer; font-size: 16px;
}
.ab-zettel .ab-option:hover { border-color: #bcd3f7; background: #f7faff; }
.ab-zettel .ab-option input { width: 20px; height: 20px; flex: none; accent-color: #1e56c8; }
.ab-zettel .ab-option:focus-within { outline: 3px solid #bcd3f7; outline-offset: 2px; }
.ab-zettel .ab-absenden {
  width: 100%; min-height: 54px; border: 0; border-radius: 14px; margin-top: 6px;
  background: linear-gradient(135deg, #2f6fe0, #1e56c8); color: #fff;
  font-size: 16px; font-weight: 750; cursor: not-allowed; opacity: .75;
}
.ab-zettel .ab-fuss { font-size: 13px; color: #8b98ad; margin-top: 12px; }
.ab-zettel .ab-luecke { font-size: 13px; font-weight: 700; color: #a15c00;
                        background: #fdf3e2; border: 1px solid #f7dfb4;
                        border-radius: 10px; padding: 8px 11px; margin-bottom: 12px; }

/* ── Formulare + Tabellen des Moduls ───────────────────────────────────── */
.v3-page .ab-sect { padding: 18px 20px; margin-bottom: 16px; }
.v3-page .ab-sect > h2 { font-size: 15px; font-weight: 800; margin: 0 0 4px; }
.v3-page .ab-sect > .sub { font-size: 12.5px; color: var(--v3-ink3); margin-bottom: 14px; }
.v3-page .ab-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.v3-page .ab-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.v3-page .ab-field > label { font-size: 12px; font-weight: 700; color: var(--v3-ink2); }
.v3-page .ab-field .tip { font-size: 11.5px; color: var(--v3-ink3); }
.v3-page .ab-input, .v3-page .ab-select, .v3-page .ab-textarea {
  width: 100%; border: 1px solid var(--v3-line); border-radius: 10px;
  padding: 9px 11px; font-size: 13.5px; font-family: inherit; color: var(--v3-ink);
  background: #fff;
}
.v3-page .ab-textarea { min-height: 90px; resize: vertical; }
.v3-page .ab-input:disabled, .v3-page .ab-select:disabled, .v3-page .ab-textarea:disabled {
  background: #f6f7f9; color: var(--v3-ink3); cursor: not-allowed;
}
.v3-page .ab-note {
  border: 1px solid var(--v3-line); border-radius: 11px; padding: 10px 13px;
  font-size: 12.5px; color: var(--v3-ink2); background: #f8fafc;
}
.v3-page .ab-note.warn { background: #fffdf7; border-color: #f7dfb4; color: #7a4b00; }
.v3-page .ab-note.bad  { background: #fdeaec; border-color: #f4bdc4; color: #a52b3a; }
.v3-page .ab-note.ok   { background: #f6fcf8; border-color: #bfe6cf; color: #12703f; }
.v3-page .ab-fehler { margin-bottom: 14px; }
.v3-page .ab-fehler ul { margin: 0; padding-left: 18px; }
.v3-page .ab-actrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
                      margin-top: 16px; }

.v3-page .ab-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.v3-page .ab-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--v3-ink3); font-weight: 800; padding: 10px 12px;
  border-bottom: 1px solid var(--v3-line);
}
.v3-page .ab-table td { padding: 11px 12px; border-bottom: 1px solid var(--v3-line2);
                        vertical-align: top; }
.v3-page .ab-table tbody tr:hover { background: #fafbfe; }
.v3-page .ab-table .num { font-variant-numeric: tabular-nums; }
.v3-page .ab-scroll { overflow-x: auto; }

.v3-page .ab-empty { text-align: center; padding: 34px 20px; }
.v3-page .ab-empty .h { font-size: 15px; font-weight: 800; }
.v3-page .ab-empty .s { font-size: 13px; color: var(--v3-ink3); margin: 6px auto 14px;
                        max-width: 520px; }

/* Mobil: Kacheln und Kette einspaltig, Tabellen scrollen im eigenen Kasten */
@media (max-width: 720px) {
  .v3-page .ab-kpis { grid-template-columns: 1fr; }
  .v3-page .ab-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Oeffentliche Stimmabgabe-Strecke (Etappe 3, Spec § 8.2 + § 19.4).

   Diese Seiten laufen OHNE App-Shell und OHNE `.v3-page` — sie sind das
   Einzige, was alle ~6.400 Menschen zu sehen bekommen, und sie muessen ohne
   JavaScript funktionieren. Deshalb hier bewusst eigene, genuegsame Regeln:
   mobile-first, Grundtext 16 px (verhindert iOS-Auto-Zoom), Trefferflaechen
   >= 56 px, kein horizontales Scrollen.

   Der Stimmzettel selbst (`.ab-zettel`, oben) wird von Vorschau UND echter
   Strecke geteilt — hier kommen nur die Zustaende dazu, die es in der
   read-only Vorschau nicht gibt.
   ══════════════════════════════════════════════════════════════════════════ */

/* Schriften ausschliesslich aus dem System-Stack: die oeffentliche Strecke
   laedt bewusst KEIN Google-Font-CDN (siehe layouts/stimmabgabe.html.erb) —
   die IP eines Stimmberechtigten geht bei der Stimmabgabe an niemanden. */
.ab-public {
  margin: 0; min-height: 100vh; background: #eef2f8; color: #16233a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
.ab-public-wrap { max-width: 460px; margin: 0 auto; padding: 16px 14px 56px; }
@media (min-width: 760px) {
  .ab-public-wrap { max-width: 660px; padding: 34px 20px 72px; }
}

/* Kopfzeile: Traeger + Art der Abstimmung + Sprachumschalter */
.ab-public .ab-marke {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.ab-public .ab-marke .traeger {
  font-family: Georgia, "Times New Roman", serif; font-size: 20px; color: #00306B;
}
.ab-public .ab-marke .art { font-size: 13px; font-weight: 700; color: #5b6b84; }
.ab-public .ab-sprache { display: flex; gap: 6px; }
.ab-public .ab-sprache a {
  min-height: 34px; display: inline-flex; align-items: center; padding: 4px 11px;
  border: 1px solid #d7dee9; border-radius: 999px; background: #fff;
  font-size: 13px; font-weight: 650; color: #5b6b84; text-decoration: none;
}
.ab-public .ab-sprache a.on { background: #00306B; border-color: #00306B; color: #fff; }

/* Karte fuer Einstieg / Abschluss / Hinweisseiten */
.ab-public .ab-karte {
  background: #fff; border: 1px solid #e6eaf1; border-radius: 16px;
  padding: 20px; margin-bottom: 14px; overflow-wrap: anywhere;
}
.ab-public .ab-karte h1 { font-size: 21px; font-weight: 800; letter-spacing: -.2px; margin: 0 0 8px; }
.ab-public .ab-karte h2 { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
.ab-public .ab-karte p { margin: 0 0 12px; }
.ab-public .ab-karte p:last-child { margin-bottom: 0; }
.ab-public .ab-meta { font-size: 14px; color: #5b6b84; margin: 0 0 14px; }
.ab-public .ab-meta dt { font-weight: 700; color: #16233a; }
.ab-public .ab-meta dd { margin: 0 0 8px; }

/* Grosse Aktionsflaeche — dieselbe Groesse wie der Absende-Knopf */
.ab-public .ab-cta {
  display: block; width: 100%; min-height: 54px; border: 0; border-radius: 14px;
  background: linear-gradient(135deg, #2f6fe0, #1e56c8); color: #fff;
  font-size: 16px; font-weight: 750; cursor: pointer; text-align: center;
  text-decoration: none; padding: 15px 18px; font-family: inherit;
}
.ab-public .ab-cta.zweitrangig { background: #fff; color: #1e56c8; border: 2px solid #c8dafa; }
.ab-public .ab-cta:focus-visible { outline: 3px solid #bcd3f7; outline-offset: 2px; }

/* Zugangscode: gross, gruppiert, gut tippbar */
.ab-public .ab-code-feld { margin: 14px 0 12px; }
.ab-public .ab-code-feld label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.ab-public .ab-code-input {
  width: 100%; min-height: 56px; border: 2px solid #d7dee9; border-radius: 14px;
  padding: 12px 14px; font-size: 22px; font-weight: 700; letter-spacing: 3px;
  text-align: center; text-transform: uppercase; font-family: inherit; color: #16233a;
}
.ab-public .ab-code-input:focus { border-color: #1e56c8; outline: 3px solid #bcd3f7; outline-offset: 1px; }
.ab-public .ab-tip { font-size: 13px; color: #5b6b84; margin-top: 6px; }

/* Fehler und Hinweise als TEXT, nicht nur farblich (Barrierefreiheit § 19.4) */
.ab-public .ab-warn, .ab-zettel .ab-warn {
  border-radius: 12px; padding: 11px 13px; font-size: 14px; margin-bottom: 12px;
  border: 1px solid #f4bdc4; background: #fdeaec; color: #a52b3a; font-weight: 650;
}
.ab-public .ab-info, .ab-zettel .ab-info {
  border-radius: 12px; padding: 11px 13px; font-size: 14px; margin-bottom: 12px;
  border: 1px solid #c8dafa; background: #eff5ff; color: #1d4b9e;
}
.ab-public .ab-info.namentlich, .ab-zettel .ab-info.namentlich {
  border-color: #f7d3b4; background: #fdeee2; color: #8a4208; font-weight: 650;
}
.ab-public .ab-probe-band {
  border: 2px dashed #d8a13a; border-radius: 12px; padding: 9px 12px;
  background: repeating-linear-gradient(45deg, #fff7e6, #fff7e6 6px, #ffedcc 6px, #ffedcc 12px);
  color: #7a4b00; font-weight: 800; font-size: 13px; margin-bottom: 12px;
  text-align: center; letter-spacing: .3px;
}

/* Quittungsliste der Abschlussseite (Referenz + Zeitpunkt, NIE der Inhalt) */
.ab-public .ab-quittung {
  border: 1px solid #e6eaf1; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
  background: #fbfcfe;
}
.ab-public .ab-quittung .titel { font-weight: 700; font-size: 15px; }
.ab-public .ab-quittung .nr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px;
  font-weight: 700; letter-spacing: 1px;
}
.ab-public .ab-quittung .zeit { font-size: 13px; color: #5b6b84; }
.ab-public .ab-fuss { font-size: 13px; color: #5b6b84; margin-top: 16px; text-align: center; }

/* Interaktiver Stimmzettel — die Zustaende, die die Vorschau nicht kennt */
.ab-zettel form { margin: 0; }
.ab-zettel .ab-absenden:enabled { cursor: pointer; opacity: 1; }
.ab-zettel .ab-absenden:focus-visible { outline: 3px solid #bcd3f7; outline-offset: 2px; }
.ab-zettel .ab-option.gewaehlt { border-color: #1e56c8; background: #f2f7ff; }
.ab-zettel .ab-frage, .ab-zettel .ab-antragstext { overflow-wrap: anywhere; }
.ab-zettel .ab-freitext {
  width: 100%; min-height: 88px; border: 2px solid #e6eaf1; border-radius: 12px;
  padding: 11px 13px; font-size: 16px; font-family: inherit; margin-bottom: 12px;
}

/* Roter Tonwert der KPI-Kachel — ergaenzt ab-ton-amber/green/blue (v3-Umbau
   Abschlussklassen/Winback 2026-07-30: „Nichtzahler", „Gekuendigt"). */
.v3-page .ab-kpi.ab-ton-red .kv { color: var(--v3-bad); }