/* =========================================================================
   SOWANIX — LKW-Zähler: Komponenten-Styles.
   Ergänzt das geteilte Design-System (design-system.css) um die spezifischen
   Bausteine des Zählers: Beitrag-Karte, Formular, Admin-Tabelle, Flash, Status.

   REGELN: ausschliesslich bestehende Design-Tokens (var(--color-*), --space-*,
   --text-*, --radius, --shadow). KEINE neuen Farbwerte, keine CSS-Importe,
   KEINE externen Requests.
   ========================================================================= */

/* ---- Flash-Nachrichten --------------------------------------------------- */
.flash {
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  background-color: var(--color-surface);
  box-shadow: var(--shadow);
}

.flash--ok {
  border-left-color: var(--color-primary);
}

.flash--fehler {
  border-left-color: var(--color-accent);
  color: var(--color-accent);
}

/* ---- Beitrag-Karte (öffentliche Liste, CNT-01) --------------------------- */
.beitrag {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow);
}

.beitrag + .beitrag {
  margin-top: var(--space-5);
}

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

.beitrag__avatar {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.beitrag__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.beitrag__fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.beitrag__fotos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

/* ---- Mitmach-Formular (CNT-02) ------------------------------------------- */
.formular {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.feld {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.feld-label {
  font-weight: 700;
  color: var(--color-text);
}

.feld input,
.feld textarea,
.feld select {
  font: inherit;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  width: 100%;
}

.feld textarea {
  min-height: 8rem;
  resize: vertical;
}

/* Honeypot: für Menschen unsichtbar, aber NICHT display:none (Bots füllen es
   aus). Clip-Technik statt left:-9999px — sonst erzeugt iOS Safari daraus
   horizontalen Scroll nach links (Querverschiebung der Seite). */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

/* ---- Admin-Tabelle (Moderation, Plan 07-04) ------------------------------ */
.admin-tabelle {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

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

.admin-tabelle th {
  font-family: var(--font-heading);
  color: var(--color-text);
  background-color: var(--color-bg);
}

.admin-tabelle tr:last-child td {
  border-bottom: none;
}

/* ---- Status-Kennzeichnung (dezent, aus vorhandenen Tokens) --------------- */
.status {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  color: var(--color-text-muted);
}

.status--unfreigegeben {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.status--freigegeben {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.status--abgelehnt {
  border-color: var(--color-border);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* ---- Wochen-Diagramm (VIZ-01 / VIZ-02) ----------------------------------- */
/* Nutzt AUSSCHLIESSLICH bestehende Design-Tokens; keine neuen Farbwerte,
   keine externen Requests. Das SVG ist selbst erzeugt (woche_svg()). */
.woche {
  margin-bottom: var(--space-6);
}

.woche > h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

/* Die viewBox ist schmal (320er-Fläche, s. woche_svg()). Damit der Maßstab auch
   auf großen Bildschirmen nahe 1 bleibt — und die Beschriftung nicht ins
   Riesenhafte wächst — wird die Darstellungsbreite gedeckelt und zentriert. */
.woche__svg {
  display: block;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  height: auto;
}

/* Balken: Werktage im gedeckten Primärton. */
.woche__balken {
  fill: var(--color-primary);
}

/* Sonntag deutlich abgesetzt: warmer Akzent + gedämpft → Kontrast sofort sichtbar. */
.woche__balken--sonntag {
  fill: var(--color-accent);
  opacity: 0.55;
}

.woche__achse {
  stroke: var(--color-border);
  stroke-width: 1.5;
}

/* Angaben in der 320er-viewBox ≈ echte Pixel (Maßstab nahe 1, s. oben). */
.woche__wert {
  fill: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
}

.woche__label {
  fill: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
}

.woche__einheit {
  fill: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 16px;
}

.woche__hinweis {
  fill: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 16px;
}

/* ---- Screenreader-only-Utility ------------------------------------------- */
.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;
}

/* ---- Wiederverwendbare Aktions-Schaltfläche (auch Plan 08-02) ------------- */
/* Stil analog .site-nav__toggle (Primärton, Hover Akzent, Radius). */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-primary-contrast);
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  text-decoration: none;
}

.knopf:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary-contrast);
}

/* ---- Teilen/Download-Bedienelement des Wochenbildes (Plan 08-02) --------- */
/* Nutzt die bestehende .knopf-Komponente; nur Layout, keine neuen Farbwerte. */
.woche__teilen {
  margin-top: var(--space-4);
}

a.knopf {
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Mobil mühelos (UX-03): große Tap-Ziele, kein iOS-Zoom, großer Absende-Button
   -------------------------------------------------------------------------- */
.feld input,
.feld textarea,
.feld select {
  min-height: 3rem;          /* 48px Tap-Ziel */
  font-size: 16px;           /* verhindert Auto-Zoom auf iOS */
}

/* Datei-Auswahl: native Eingabe versteckt (aber funktional), ein echtes <label>
   dient als großer, einheitlicher Knopf — gleiche Höhe wie „Zählung absenden".
   Der native iOS-Standardknopf ließe sich nicht zuverlässig/einheitlich stylen. */
.datei-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.datei-btn {
  display: block;
  width: 100%;
  min-height: var(--btn-h);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  border-radius: var(--radius);
  font-size: var(--text-lg);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.datei-btn:hover { background: var(--color-accent); }
.datei-name {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Zeit von / bis nebeneinander (auf sehr schmalen Screens untereinander). */
.feld--zeit {
  flex-direction: row;
  gap: var(--space-3);
}
.feld--zeit > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 0;
  min-width: 0;
}

/* Großer, gut erreichbarer Absende-Button. */
.formular__absenden {
  min-height: var(--btn-h);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  border-radius: var(--radius);
  font-size: var(--text-lg);
  font-weight: 700;
  cursor: pointer;
}
.formular__absenden:hover {
  background: var(--color-accent);
}

/* ---------------------------------------------------------------------------
   Direkter Live-Zähler (Phase 10). Nutzt AUSSCHLIESSLICH bestehende Tokens.
   LKW = Akzent (der „Störer"), Auto = Primär (Asphalt), Moped = gedämpft.
   -------------------------------------------------------------------------- */
.live {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 34rem;
  margin-inline: auto;
}

/* Live-Zählmaske als „fester" Tipp-Bildschirm: kein Doppeltipp-Zoom, keine
   iOS-Auswahl-Lupe, kein Gummiband-Scrollen — so lässt sich sehr schnell
   hintereinander auf die Zähl-Buttons tippen, ohne dass die Ansicht springt. */
body.seite-live {
  touch-action: manipulation;
  overscroll-behavior: contain;
}
body.seite-live main {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Doppelzähl-Warnung: standardmäßig via [hidden] aus, JS blendet sie ein. */
.live__warnung {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  border: 1px solid var(--color-stop);
  border-left-width: 5px;
  border-radius: var(--radius);
  padding: var(--space-4);
  background-color: #fdecea;      /* zartes Rot — fällt auf, bleibt lesbar */
  color: #8a1c1c;                 /* dunkles Rot für guten Kontrast */
  box-shadow: 0 4px 14px rgba(198, 40, 40, 0.14);
}
.live__warnung[hidden] { display: none; }
.live__warnung-icon {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: var(--color-stop);
}
.live__warnung-icon svg { width: 1.75rem; height: 1.75rem; }
.live__warnung-text {
  font-weight: 500;
  line-height: 1.45;
}
.live__warnung-titel {
  display: block;
  margin-bottom: 0.2rem;
  font-size: var(--text-lg);
  font-weight: 800;
}

.live__uhr-box { text-align: center; }
.live__uhr-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.live__uhr {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.04em;
}

/* Großer Start-Knopf. */
.live__start {
  width: 100%;
  min-height: var(--btn-h);
  font: inherit;
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-go-contrast);
  background-color: var(--color-go);   /* Signalgruen: zentrale Zaehl-Aktion */
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(31, 157, 85, 0.35);
}
.live__start:hover { background-color: var(--color-go-hover); }

/* Grüner „Los/Start"-Modifier der .knopf-Komponente — für die zentrale
   Zähl-Aktion (z. B. „Jetzt live mitzählen"), hebt sich klar ab. */
.knopf--los {
  background-color: var(--color-go);
  border-color: var(--color-go);
  color: var(--color-go-contrast);
  box-shadow: 0 4px 14px rgba(31, 157, 85, 0.35);
}
.knopf--los:hover {
  background-color: var(--color-go-hover);
  border-color: var(--color-go-hover);
  color: var(--color-go-contrast);
}

/* „Ergebnis teilen"-Button (Warngelb, hebt sich von der grünen Zähl-Aktion ab). */
.knopf--teilen {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.knopf--teilen:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  filter: brightness(0.95);
}

/* Ergebnis-Landing-Page (geteilte, virale Ansicht). */
.ergebnis__titel {
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
}
.ergebnis__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.ergebnis__cta .knopf {
  flex: 1 1 12rem;
  justify-content: center;
  min-height: var(--btn-h);
  font-size: var(--text-lg);
}

/* Danke-Seite nach einer Live-Zählung. */
.gezaehlt {
  max-width: 34rem;
  margin: var(--space-6) auto;
  text-align: center;
}
.gezaehlt__haken {
  width: 5rem;
  height: 5rem;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--color-go);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gezaehlt__haken svg { width: 2.8rem; height: 2.8rem; fill: #fff; }
.gezaehlt__titel { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.gezaehlt__nr { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.gezaehlt__nr strong { color: var(--color-go); }
.gezaehlt__hinweis { color: var(--color-text-muted); margin-top: var(--space-4); }
.gezaehlt__cta { margin-top: var(--space-5); }
.gezaehlt__text { color: var(--color-text-muted); }

/* Ergebnis-Übersicht direkt nach der Zählung (Kennzahlen + Wochenbild + Aktionen). */
.gezaehlt-uebersicht {
  max-width: 46rem;
  margin: 0 auto var(--space-6);
}
.gezaehlt-uebersicht__titel {
  font-size: var(--text-xl);
  text-align: center;
  margin-bottom: var(--space-4);
}

/* Kennzahl-Kacheln: drei nebeneinander, auf schmalen Screens gestapelt. */
.stat-kacheln {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
/* Kacheln in derselben Farbwelt wie die Ergebnis-Karte: Logo-Blau als Grund,
   die Zahl in Warngelb. Damit gehoert die Uebersicht sichtbar zur Zaehlung
   darueber und nicht zu den weissen Inhaltskarten der Seite. */
.stat-kachel {
  background: #0b1d36;
  border: 0;
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
  text-align: center;
}
.stat-kachel__zahl {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.1;
}
.stat-kachel__label {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: #b9c6d8;
}

.gezaehlt-uebersicht__trend {
  margin-top: var(--space-4);
  text-align: center;
}

/* Aktions-Reihe: drei gleich breite, große Tap-Ziele; „Zurück ins Menü" hell. */
.gezaehlt-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.gezaehlt-aktionen .knopf {
  flex: 1 1 12rem;
  justify-content: center;
  min-height: var(--btn-h);
  font-size: var(--text-lg);
}
/* Warngelber Zweitknopf (typisches SOWANIX-Gelb, dunkle Schrift). */
.knopf--gelb {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.knopf--gelb:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  filter: brightness(0.95);
}

@media (max-width: 30rem) {
  .stat-kacheln { grid-template-columns: 1fr; }
}

/* Fahrzeug-Knöpfe: große Tap-Ziele, Zahl rechts. */
.live__knoepfe {
  position: relative;   /* Bezug für die Flugschicht der Tipp-Rückmeldung */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.live__knoepfe[hidden] { display: none; }

/* ---- Rückmeldung beim Tippen ----
   Die Symbole sollen HINTER dem gedrückten Knopf hervorkommen. Weil die drei
   Zählknöpfe als volle Balken direkt übereinanderliegen, wäre eine Flugschicht
   ganz unten praktisch unsichtbar — sie würde komplett von den Nachbarknöpfen
   verdeckt. Deshalb: die Schicht liegt ÜBER den ruhenden Knöpfen (2), der
   gerade gedrückte Knopf hebt sich für die Dauer des Flugs darüber (3). Die
   Symbole starten damit verdeckt unter ihm und fliegen frei nach außen. */
.live__funken {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}
.live__funke {
  position: absolute;
  width: 2.1rem;
  height: 2.1rem;
  fill: currentColor;
  pointer-events: none;
  will-change: transform, opacity;
}
/* Knöpfe und Texte liegen unter der Flugschicht … */
.live__fz,
.live__stop,
.live__hinweis,
.live__effekt { position: relative; z-index: 1; }
/* … nur der gerade gedrückte Knopf liegt darüber, solange seine Symbole fliegen. */
.live__fz.is-flug { z-index: 3; }

/* Die Zahl springt beim Tippen kurz an — zweite, ruhige Bestätigung. */
.live__fz .live__fz-zahl { transition: transform 0.1s ease; }
.live__fz.is-getippt .live__fz-zahl { transform: scale(1.22); }
@media (prefers-reduced-motion: reduce) {
  .live__fz.is-getippt .live__fz-zahl { transform: none; }
}

/* Wahl der Rückmeldung: bewusst kleine Knöpfe — sie sind Beiwerk neben dem
   Zählen (gleiche Haltung wie bei den Teilen-Knöpfen). */
.live__effekt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.live__effekt-label {
  /* eigene Zeile — sonst rutscht auf schmalen Geräten ein Knopf allein nach unten */
  flex: 1 0 100%;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}
.live__effekt-btn {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 0.4em 0.85em;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  touch-action: manipulation;
}
.live__effekt-btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.live__fz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 4.25rem;
  padding: 0 var(--space-5);
  font: inherit;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary-contrast);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;      /* Safari/iOS: keine Textauswahl beim schnellen Tippen */
  -webkit-touch-callout: none;    /* iOS: keine Auswahl-/Lupe-Blase bei Tap/Halten */
  touch-action: manipulation;     /* iOS: kein Doppeltipp-Zoom → sehr schnelles Zählen möglich */
  transition: transform 0.06s ease;
}
.live__fz:active { transform: scale(0.98); }
.live__fz--lkw   { background-color: var(--color-accent); color: var(--color-on-accent); }
.live__fz--auto  { background-color: var(--color-primary); }
.live__fz--moped { background-color: var(--color-text-muted); }

.live__fz-name { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; }
.live__fz svg { width: 1.9rem; height: 1.9rem; fill: currentColor; flex: 0 0 auto; }
.live__fz-text { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.live__fz-haupt { font-size: var(--text-lg); font-weight: 700; }
.live__fz-sub { font-size: var(--text-sm); font-weight: 600; opacity: 0.82; }
.live__fz-zahl {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: var(--text-2xl);
  min-width: 2ch;
  text-align: right;
}

/* Signal-Rot für die Stopp-Aktion (Gegenpol zum grünen Start). */
:root {
  --color-stop: #c62828;
  --color-stop-hover: #a31f1f;
  --color-stop-contrast: #ffffff;
}

/* Stopp: satt rot gefüllt — unmissverständliche Gegenaktion zum grünen Start. */
.live__stop {
  width: 100%;
  min-height: var(--btn-h);
  margin-top: var(--space-2);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-stop-contrast);
  background-color: var(--color-stop);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(198, 40, 40, 0.32);
}
.live__stop:hover { background-color: var(--color-stop-hover); }

.live__hinweis {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* Zentrales Hinweis-Fenster „Zählzeit zu kurz" (Overlay, mittig). */
.live-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(27, 30, 35, 0.55);
}
.live-modal[hidden] { display: none; }
.live-modal__box {
  width: 100%;
  max-width: 30rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
  padding: var(--space-6);
  text-align: center;
}
.live-modal__icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-4);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fbe4e2;
  color: var(--color-stop);
}
.live-modal__icon svg { width: 2rem; height: 2rem; }
.live-modal__titel { margin: 0 0 var(--space-3); }
.live-modal__text {
  margin: 0 auto var(--space-3);
  max-width: 26rem;
  color: var(--color-text);
}
.live-modal__btn {
  margin-top: var(--space-3);
  width: 100%;
  min-height: var(--btn-h);
  font: inherit;
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-go-contrast);
  background-color: var(--color-go);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(31, 157, 85, 0.35);
}
.live-modal__btn:hover { background-color: var(--color-go-hover); }
/* Als <a> gerendert (Navigation ins Menü) → wie ein Button zentrieren. */
a.live-modal__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
/* Zweitknopf „Zurück ins Menü": Warngelb, damit man aus dem Fenster wieder
   herausfindet, ohne zwingend neu zählen zu müssen. */
.live-modal__btn--menue {
  margin-top: var(--space-2);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: none;
}
.live-modal__btn--menue:hover {
  background-color: var(--color-accent);
  filter: brightness(0.95);
}
body.live-modal-offen { overflow: hidden; }
.live__hinweis-klein {
  display: block;
  margin-top: var(--space-1);
  /* war 0.78rem (12,5 px) — kleinster Text der Seite und auf dem Telefon nicht
     mehr lesbar; jetzt das normale Maß für Hilfstexte. */
  font-size: var(--text-sm);
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   PWA-App-Modus: Ist SOWANIX als App installiert (display-mode: standalone),
   wird der Live-Zähler zur Vollbild-App — Marketing-Shell aus, größere Ziele.
   (html.pwa-standalone kommt aus assets/js/pwa.js bzw. dem Inline-Head-Skript.)
   -------------------------------------------------------------------------- */
.pwa-standalone body.seite-live .site-header,
.pwa-standalone body.seite-live .claim-banner,
.pwa-standalone body.seite-live .site-footer,
.pwa-standalone body.seite-live .mitzaehlen-fab { display: none; }

/* Sichere Ränder (Notch). Der erklärende Intro-Text BLEIBT im App-Modus sichtbar,
   damit klar ist, was man tut. */
.pwa-standalone body.seite-live main { padding-top: env(safe-area-inset-top, 0); }
.pwa-standalone body.seite-live .page-intro { margin-bottom: var(--space-4); }

/* Größere Tap-Ziele und Zahlen (Inhalt fließt natürlich, kein Zwangs-Vollbild). */
.pwa-standalone .live {
  max-width: 40rem;
  margin-top: var(--space-3);
}
.pwa-standalone .live__uhr { font-size: 3rem; }
.pwa-standalone .live__start { min-height: var(--btn-h); font-size: var(--text-xl); }
.pwa-standalone .live__fz { min-height: 5.5rem; font-size: var(--text-xl); }
.pwa-standalone .live__fz svg { width: 2.25rem; height: 2.25rem; }
.pwa-standalone .live__fz-zahl { font-size: var(--text-3xl); }
.pwa-standalone .live__stop { min-height: var(--btn-h); font-size: var(--text-lg); }

/* Admin: Foto-Moderations-Raster (Foto-Wand) */
.admin-foto-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4);
}
/* Freigegebene Fotos: kompakter (schon geprüft, nur noch Übersicht/Löschen). */
.admin-foto-raster--klein {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}
.admin-foto {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Klickbare Vorschau: öffnet das Foto groß (Kennzeichen/Gesichter prüfen). */
.admin-foto__bild {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-primary);
}
.admin-foto__bild img {
  display: block;
  width: 100%;
  height: 190px;
  /* ganzes Bild zeigen — nichts am Rand abschneiden (Kennzeichen!). */
  object-fit: contain;
  background: var(--color-primary);
}
.admin-foto-raster--klein .admin-foto__bild img {
  height: 120px;
  object-fit: cover;   /* freigegeben: kompakt, Bildausschnitt genügt */
}
.admin-foto__lupe {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius);
  background: rgba(27, 30, 35, 0.82);
  color: #fff;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.admin-foto__bild:hover .admin-foto__lupe,
.admin-foto__bild:focus-visible .admin-foto__lupe { opacity: 1; }
@media (hover: none) { .admin-foto__lupe { opacity: 1; } }

.admin-foto__aktionen {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.admin-foto__fuss {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* Admin: gegliederte Foto-Wand (drei Kategorien) */
.admin-fotowand__kopf { margin-bottom: var(--space-2); }
/* Kategorie = klappbare weiße Kachel (gleiche Optik wie .admin-details),
   mit farbigem Streifen links = Kennfarbe der Kategorie. */
.admin-kat-block {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--kat-farbe, var(--color-primary));
  border-radius: var(--radius);
}
/* Kopf jeder Kategorie = klickbares <summary> (auf-/zuklappen). */
.admin-kat-block__kopf {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
}
.admin-kat-block__kopf::-webkit-details-marker { display: none; }
.admin-kat-block__kopf::before {
  content: "▸";
  color: var(--kat-farbe, var(--color-primary));
  font-weight: 700;
  align-self: center;
}
.admin-kat-block[open] > .admin-kat-block__kopf::before { content: "▾"; }
.admin-kat-block[open] > .admin-kat-block__kopf { margin-bottom: var(--space-3); }
.admin-kat-block__kopf h3 {
  margin: 0;
  color: var(--color-primary);
}
.admin-kat-block__zaehler { margin-left: auto; }   /* Zähler nach rechts */
.admin-kat-block__badge { color: var(--color-accent); }
.admin-kat-block__titel {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-base);
  color: var(--color-accent);
}
.admin-kat-block__titel--frei { color: var(--color-text-muted); }
.admin-kat-block__leer { margin-top: var(--space-2); font-style: italic; }

/* Admin: einklappbare lange Liste (Live-Zähler) */
.admin-details {
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-primary);   /* gleiche Kachel-Form wie Kategorien */
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
}
.admin-details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.admin-details > summary::-webkit-details-marker { display: none; }
.admin-details > summary::before {
  content: "▸";
  color: var(--color-primary);
  font-weight: 700;
}
.admin-details[open] > summary::before { content: "▾"; }
.admin-details__titel { font-weight: 700; font-size: var(--text-lg, 1.1rem); }
.admin-details[open] > summary { margin-bottom: var(--space-3); }

/* ---- Admin-Aktions-Buttons: klare farbliche Rollen ----------------------- */
.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: inherit;
  font-weight: 700;
  line-height: 1.1;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  /* neutraler Grundzustand (z. B. „Verschieben"); Varianten überschreiben. */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
}
.admin-btn:hover { border-color: var(--color-primary); }
.admin-btn--klein { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }

/* Freigeben = Signalgrün (bestätigende Haupt-Aktion). */
.admin-btn--frei {
  background: var(--color-go);
  border-color: var(--color-go);
  color: var(--color-go-contrast);
}
.admin-btn--frei:hover { background: var(--color-go-hover); border-color: var(--color-go-hover); }

/* Neutral = heller Umriss (Ablehnen, Speichern, Ausblenden). */
.admin-btn--neutral {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
.admin-btn--neutral:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Gefahr = Rot (Löschen, unwiderruflich). */
.admin-btn--gefahr {
  background: #fff;
  border-color: #c0392b;
  color: #c0392b;
}
.admin-btn--gefahr:hover { background: #c0392b; color: #fff; }

/* --- Marke & Impressum in der Live-App (nur Standalone; im Browser liefert die
   Shell Logo/LKW/Impressum → hier ausgeblendet, keine Dopplung). --- */
.live-marke,
.live-fuss { display: none; }
.pwa-standalone body.seite-live .live-marke { display: flex; }
.pwa-standalone body.seite-live .live-fuss { display: block; }

.live-marke {
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  margin-bottom: var(--space-5);
}
.live-marke__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}
.live-marke__logo {
  height: 99px;
  width: auto;
  flex: 0 0 auto;
}
.live-marke__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: 0.06em;
  color: var(--color-primary);
}
/* Exakt wie das Website-Claim-Banner: Vollbreiten-Band, keine runden Ecken,
   dunkler Truck + Text auf Warngelb. Full-Bleed über die Container-Breite. */
.live-marke__claim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  letter-spacing: 0.01em;
}
.live-marke__claim svg { height: 1.15em; width: auto; flex: 0 0 auto; }

.live-fuss {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.live-fuss a { color: var(--color-text-muted); text-underline-offset: 2px; }
.live-fuss span { margin: 0 0.5em; }

/* Admin: Kategorie eines Fotos ändern (Dropdown je Foto). */
.admin-kat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-2) 0;
}
.admin-kat__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.admin-kat select { flex: 1 1 8rem; min-width: 8rem; }

/* ---- Ergebnis EINER Zaehlung (Danke-Seite + geteilte Landing-Page) ---------
   Bewusst dieselbe Sprache wie das OG-Bild: dunkles Feld, Symbol + grosse Zahl,
   darunter wann und wie lange gezaehlt wurde. */
/* ---- Ergebnis-Karte einer Zählung (/gezaehlt und /zaehlung/{id}) --------
   Nimmt die Bildsprache der geteilten Vorschaubilder auf: Logo-Blau als Grund,
   gelbes Band über die volle Breite mit dunkler Schrift, Zahlen in einem
   abgerundeten Feld, Symbole in Warngelb. Damit sehen Seite und geteiltes Bild
   wie dasselbe Ding aus. */
.zaehlung-karte {
  --karte-blau: #0b1d36;          /* exakt der Ton des SOWANIX-Logos */
  --karte-blau-hell: #132b4a;     /* abgesetzte Felder in der Karte */
  background: var(--karte-blau);
  color: #fff;
  border-radius: var(--radius);
  padding: 0;                      /* das gelbe Band sitzt bündig oben */
  margin: var(--space-5) 0;
  overflow: hidden;                /* Band folgt der Rundung */
}
/* Gelbes Kopfband über die GANZE Kartenbreite — die Designvorlage der Seite.
   Wichtig: Das Band ist ein <p>, und design-system.css begrenzt Absätze für die
   Lesbarkeit auf 65ch. Ohne das Zurücksetzen endete der gelbe Streifen mitten
   in der Karte (bei rund 60 % der Breite). */
.zaehlung-karte__kicker {
  max-width: none;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-accent);
  background: var(--color-accent);
  margin: 0;
  padding: var(--space-3) var(--space-5);
}
.zaehlung-karte__titel {
  font-size: var(--text-2xl);
  line-height: 1.15;
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  color: #fff;
}
/* Zahlenfeld: eigenes abgerundetes Feld wie im Vorschaubild. */
.zaehlung-zahlen {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: 0 var(--space-5) var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--karte-blau-hell);
  border-radius: var(--radius);
}
.zaehlung-zahl {
  display: grid;
  grid-template-columns: 3.4rem auto;
  align-items: center;
  column-gap: var(--space-4);
  row-gap: 0;
}
/* Symbole in Warngelb: die PNGs sind weiße Silhouetten, die Maske färbt sie um. */
.zaehlung-zahl__sym {
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  background: var(--color-accent);
  -webkit-mask: var(--sym) center / contain no-repeat;
  mask: var(--sym) center / contain no-repeat;
}
.zaehlung-zahl__sym img { display: none; }   /* Bild dient nur noch als Maske */
/* Pfade relativ zu dieser Datei (/zaehler/assets/). */
.zaehlung-zahl__sym--lkw   { --sym: url('sym-lkw.png'); }
.zaehlung-zahl__sym--auto  { --sym: url('sym-auto.png'); }
.zaehlung-zahl__sym--moped { --sym: url('sym-moped.png'); }
.zaehlung-zahl__wert {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}
.zaehlung-zahl__label {
  grid-column: 2;
  font-size: var(--text-sm);
  color: #b9c6d8;
  margin-top: 0.15rem;
}
.zaehlung-karte__wann {
  font-size: var(--text-sm);
  color: #b9c6d8;
  margin: 0 var(--space-5) var(--space-4);
}
/* Hochrechnung: vollflächig gelb mit dunkler Schrift (keine helle Box mit
   Akzentkante) — das ist die Kernaussage der Zählung. */
.zaehlung-karte__hochrechnung {
  /* wie beim Kopfband: die 65ch-Lesebreite für Absätze aus design-system.css
     zurücknehmen, sonst endet die gelbe Fläche auf breiten Schirmen bei ~78 % */
  max-width: none;
  margin: 0 var(--space-5) var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius);
  font-weight: 600;
}
.zaehlung-karte__hochrechnung strong { color: var(--color-on-accent); }
.zaehlung-karte__teilen-titel {
  font-size: var(--text-lg);
  margin: 0;
  padding: 0 var(--space-5);
  color: #fff;
}
.zaehlung-karte__teilen-text {
  font-size: var(--text-sm);
  color: #b9c6d8;
  margin: var(--space-2) var(--space-5) var(--space-4);
}
.zaehlung-karte .teilen-leiste { margin: 0 var(--space-5) var(--space-5); }
.zaehlung-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Teilen-Leiste: Netzwerk-Links stehen serverseitig im HTML.
   Die Knöpfe sind die app-weite Komponente .teilen-btn (design-system.css) und
   bleiben BEWUSST schmal — sie wachsen nicht auf volle Breite. Teilen ist eine
   Nebensache neben dem Zählen; eine Leiste aus breiten Flächen würde davon
   ablenken. Gleiches Muster wie unter den Bildern der Startseite. */
.teilen-leiste { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.teilen-leiste .teilen-btn { flex: 0 0 auto; }
.teilen-leiste__status {
  flex: 1 1 100%;
  font-size: var(--text-sm);
  color: var(--color-accent);
  margin: 0;
  min-height: 1.2em;
  word-break: break-all;
}
/* Auf der dunklen Ergebnis-Karte brauchen die Knoepfe hellen Rand/Text:
   gefüllte, halbtransparente Flächen statt dünner Umrisse. */
.zaehlung-karte .knopf,
.zaehlung-karte .teilen-btn {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border-color: transparent;
}
.zaehlung-karte .knopf:hover,
.zaehlung-karte .teilen-btn:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: transparent;
  color: #fff;
}
/* System-Teilen ist die Haupt-Aktion → Warngelb mit dunkler Schrift. */
.zaehlung-karte .knopf--teilen,
.zaehlung-karte .teilen-btn--primär {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.zaehlung-karte .knopf--teilen:hover,
.zaehlung-karte .teilen-btn--primär:hover {
  background: #f0b21f;
  border-color: #f0b21f;
  color: var(--color-on-accent);
}
/* Der schwebende „+ Mitzählen"-Knopf liegt über dem Inhalt — unten Platz lassen,
   damit er nie den letzten Knopf oder Absatz verdeckt. */
main { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
body.seite-live main, body.seite-admin main { padding-bottom: 0; }