/* =========================================================================
   SOWANIX — Design-System
   Eine wiederverwendbare Stylesheet-Datei: Design-Tokens, Reset/Base,
   responsives Layout und Shell-Komponenten (Header, Nav, Footer).

   Tonalitaet: sachlich-dokumentarisch, warm und glaubwuerdig.
   Grundton hell/warm, EIN gedeckter Primaerakzent (Asphalt/Schiefer),
   ein dezent warmer Signalton als Akzent. Keine grellen Farben,
   keine Farbkollision.

   Selbst-gehostet: KEINE externen Web-Fonts, keine CSS-Imports,
   KEINE Fremd-Requests (kein render-blocking, kein Drittanbieter-Leak).

   NAV-ZUSTANDSKLASSE (fuer Task 2 / nav.js):
   Die Mobil-Navigation wird ueber die Zustandsklasse `.site-nav--open`
   auf dem <nav class="site-nav"> gesteuert. nav.js schaltet diese Klasse
   um und synchronisiert `aria-expanded` am Toggle-Button. Ohne die Klasse
   ist die Nav-Liste auf Mobil eingeklappt (verborgen); mit der Klasse
   sichtbar. Ab dem Desktop-Breakpoint (48em) ist die Nav immer sichtbar
   und der Toggle ausgeblendet.
   ========================================================================= */

/* ---- (1) Design-Tokens --------------------------------------------------- */
:root {
  /* Farben — Konzept „Signal": Asphaltschwarz + Warngelb (Verkehrszeichen-/
     Baustellen-Sprache). Warngelb ist ein heller Flaechenton → Text auf Gelb
     IMMER dunkel (--color-on-accent); Akzent-als-Text auf Weiss nutzt den
     dunkleren Gelbton (--color-accent-ink), sonst scheitert der Kontrast. */
  --color-bg: #f4f2ec;           /* warmes, helles Papier (Grundton) */
  --color-surface: #ffffff;      /* Karten-/Flaechenhintergrund */
  --color-text: #1b1e23;         /* dunkler Lesetext */
  --color-text-muted: #565d66;   /* sekundaerer Text */
  --color-border: #e2ddd2;       /* dezente Trennlinien */
  --color-primary: #23272e;      /* Asphaltschwarz (Header/Buttons/Footer) */
  --color-primary-contrast: #ffffff;
  --color-primary-hover: #333a44; /* angehobenes Asphalt fuer Button-Hover */
  --color-accent: #e6a100;       /* Warngelb — Flaechen/Baender/Signale */
  --color-accent-ink: #7d5800;   /* dunkles Gelb — Akzent-als-Text auf Hell */
  --color-on-accent: #1b1e23;    /* Text/Icon AUF Warngelb (immer dunkel) */
  --color-neu: #d6246e;          /* Pink — markiert NEUE Funktionen (Weiss darauf ≈ 4,9:1) */
  --color-go: #1f9d55;           /* Signalgruen — zentraler Zaehl-CTA (Los/Start) */
  --color-go-hover: #17864a;     /* dunkleres Gruen fuer Hover */
  --color-go-contrast: #ffffff;  /* Text AUF Gruen */

  /* Typografie — System-Font-Stacks (keine externen Web-Fonts) */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman",
    "Noto Serif", serif;

  /* Typo-Skala (rem, modulare Skala ~1.2) */
  --text-sm: 0.833rem;
  --text-base: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.44rem;
  --text-2xl: 1.728rem;
  --text-3xl: 2.074rem;

  --leading-body: 1.6;
  --leading-heading: 1.2;

  /* Abstaende */
  --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;

  /* Layout */
  --container-max: 72rem;
  --container-pad: 1.25rem;

  --radius: 0.5rem;
  --shadow: 0 1px 2px rgba(34, 38, 43, 0.06), 0 4px 16px rgba(34, 38, 43, 0.08);

  /* Einheitliche Höhe aller Aktions-/Teilen-Buttons (großes Tap-Ziel). */
  --btn-h: 3.25rem;
}

/* ---- (2) Reset / Base ---------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sicherheitsnetz gegen horizontales Verschieben der Seite (z. B. off-screen
     positionierte Elemente). Kein seitliches Scrollen auf Mobilgeräten. */
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: var(--leading-body);
  font-size: var(--text-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

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

a:hover {
  color: var(--color-accent-ink);
}

/* Sichtbarer Fokusring (Barrierefreiheit) */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- (3) Layout-Utilities + Ueberschriften-Hierarchie -------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Desktop: Inhaltsspalte schmaler und zentriert, damit Text, Karten und Bilder
   als eine ruhige Mittelspalte stehen statt links an einem breiten Leerraum zu
   kleben. Header/Nav und Footer behalten die volle Containerbreite.
   Ausnahmen: Zählmaske (seite-live) und Admin (seite-admin) brauchen Platz. */
@media (min-width: 64em) {
  body:not(.seite-live):not(.seite-admin) main > .container {
    max-width: 58rem;
  }
}

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

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

@media (min-width: 48em) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-heading);
  color: var(--color-text);
  font-weight: 700;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

p {
  color: var(--color-text);
  max-width: 65ch;
}

/* Listenpunkte im Inhalt: gleiche Lesebreite wie Absätze, sonst laufen
   Aufzählungen (z. B. tempo-30) über die volle Breite und brechen die Spalte. */
main li {
  max-width: 65ch;
}

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

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow);
}

/* ---- (4) Shell-Komponenten: Header / Nav / Footer ------------------------ */
.site-header {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

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

.site-header__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;              /* kein Zeilen-Zwischenraum um das Logo */
  text-decoration: none;
}

/* Offizielles Logo. Navy auf hellem Header. Bewusst groß, da kleinteilig. */
.site-header__logo {
  display: block;
  height: 116px;
  width: auto;
}

.site-header__brand:hover .site-header__logo {
  opacity: 0.85;
}

@media (max-width: 30rem) {
  .site-header__logo { height: 83px; }
}

/* Navigation — mobile-first: Liste eingeklappt, Toggle sichtbar */
/* „Neu"-Knopf in der Kopfzeile — weist auf eine neue Funktion hin.
   Steht als eigenes Flex-Kind zwischen Logo und Navigation. `margin-left: auto`
   schiebt ihn samt Navigation nach rechts, sodass er NICHT mittig schwebt,
   sondern dicht bei der Navigation sitzt:
     – mobil praktisch direkt am Menue-Knopf (negative Marge frisst die halbe
       Container-Luecke wieder auf),
     – am Desktop mit etwas mehr Abstand zum ersten Menuepunkt, als die
       Menuepunkte untereinander haben (siehe Desktop-Block weiter unten).
   Masse bewusst identisch mit .site-nav__toggle. */
.site-neu {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  margin-right: calc(var(--space-2) - var(--space-3));
  font: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background-color: var(--color-neu);
  border: 1px solid var(--color-neu);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  /* Unregelmaessiges, dezentes Gluehen: die Zwischenschritte liegen bewusst
     nicht auf gleichen Abstaenden, damit es nicht wie ein Metronom pulst. */
  animation: neu-gluehen 9s ease-in-out infinite;
}
.site-neu:hover {
  background-color: #b81c5c;
  border-color: #b81c5c;
}

@keyframes neu-gluehen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 36, 110, 0); }
  9%       { box-shadow: 0 0 10px 2px rgba(214, 36, 110, 0.42); }
  17%      { box-shadow: 0 0 4px 0 rgba(214, 36, 110, 0.14); }
  31%      { box-shadow: 0 0 15px 3px rgba(214, 36, 110, 0.5); }
  44%      { box-shadow: 0 0 2px 0 rgba(214, 36, 110, 0.08); }
  63%      { box-shadow: 0 0 9px 2px rgba(214, 36, 110, 0.34); }
  74%      { box-shadow: 0 0 3px 0 rgba(214, 36, 110, 0.1); }
  88%      { box-shadow: 0 0 12px 2px rgba(214, 36, 110, 0.4); }
}

/* Wer Bewegung reduziert haben moechte, bekommt ein ruhiges, festes Gluehen. */
@media (prefers-reduced-motion: reduce) {
  .site-neu {
    animation: none;
    box-shadow: 0 0 8px 1px rgba(214, 36, 110, 0.3);
  }
}

.site-nav {
  position: relative;
}

.site-nav__toggle {
  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-3);
  cursor: pointer;
}

.site-nav__toggle:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.site-nav__list {
  list-style: none;
  padding: var(--space-2);
  margin: 0;
  /* eingeklappt: verborgen bis .site-nav--open gesetzt ist */
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 15rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 20;
}

/* Zustandsklasse: nav.js setzt .site-nav--open zum Aufklappen */
.site-nav--open .site-nav__list {
  display: block;
}

.site-nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
}

.site-nav__link:hover {
  background-color: var(--color-bg);
  color: var(--color-accent-ink);
}

.site-nav__link[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 700;
  background-color: var(--color-bg);
}

/* MITZÄHLEN ist die zentrale Handlung der Seite und steht deshalb als gruener
   Knopf im Menue — gleicher Signalton wie der feste „+ Mitzaehlen"-Knopf
   (--color-go), abgerundetes Rechteck statt Pille. Die aria-current-Regel
   oben wuerde ihn sonst auf der Zaehler-Seite wieder hell einfaerben, daher
   greift der aktive Zustand hier separat (dunkleres Gruen). */
.site-nav__link--cta,
.site-nav__link--cta[aria-current="page"] {
  background-color: var(--color-go);
  color: var(--color-go-contrast);
  font-weight: 700;
}
.site-nav__link--cta:hover,
.site-nav__link--cta[aria-current="page"] {
  background-color: var(--color-go-hover);
  color: var(--color-go-contrast);
}

/* Hauptinhalt */
main {
  flex: 1 0 auto;
  padding-block: var(--space-7);
}

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

.section {
  margin-top: var(--space-6);
}

/* Footer */
.site-footer {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-6);
  margin-top: var(--space-8);
  /* Footer-Inhalt mittig — passt zum zentrierten Claim und zur Mittelspalte. */
  text-align: center;
}

/* Absätze im Footer haben das globale 65ch-Limit; ohne auto-Margin stünde der
   Block links, obwohl der Text zentriert ist. */
.site-footer p {
  margin-inline: auto;
}

.site-footer a {
  color: var(--color-primary-contrast);
}

.site-footer__brand {
  margin: 0 0 var(--space-2);
  line-height: 0;
}

/* Logo im dunklen Footer: dasselbe SVG, per Filter zu Weiß invertiert. */
.site-footer__logo {
  display: block;
  height: 56px;
  width: auto;
  margin-inline: auto;
  filter: brightness(0) invert(1);
}

.site-footer__note {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

/* Dezenter „App installieren"-Link im Footer (ersetzt den früheren
   Startseiten-Kasten). Nutzt dieselbe pwa.js-Steuerung wie zuvor. */
.site-footer__app {
  margin-top: var(--space-2);
}
.site-footer__app[hidden] { display: none; }
.site-footer__applink {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.75);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.site-footer__applink:hover { color: #fff; }
.site-footer__appicon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.site-footer__apphelp {
  display: block;
  margin-top: var(--space-1);
  margin-inline: auto;
  max-width: 42rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.site-footer__apphelp[hidden] { display: none; }

/* ---- App-Installations-Anleitung (app-installieren.html) ----------------- */
.install-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.install-card__ico {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-radius: var(--radius);
}
.install-card__ico svg { width: 1.6rem; height: 1.6rem; }
.install-card h3 { margin: 0; }
.install-card .install-note { margin-top: 0; }
.install-note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.install-steps {
  margin: var(--space-3) 0 0;
  padding-left: 1.25rem;
}
.install-steps > li { line-height: var(--leading-body); }
.install-steps > li + li { margin-top: var(--space-2); }
/* Kleine „so sieht der Knopf aus"-Chips im Fließtext — die Minimalgrafik. */
.install-steps .ui {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.05em 0.45em;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  font-weight: 600;
  white-space: nowrap;
}
.install-steps .ui svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}
.install-tip {
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow);
}
.install-tip h2 { margin-top: 0; }
.install-tip ul { padding-left: 1.25rem; }

/* ---- Desktop-Breakpoint: horizontale Nav, Toggle ausgeblendet ------------ */
@media (min-width: 48em) {
  .site-nav__toggle {
    display: none;
  }

  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    position: static;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }

  .site-nav__link {
    padding: var(--space-2) var(--space-3);
  }

  /* Am Desktop rueckt der „Neu"-Knopf an den ersten Menuepunkt heran — aber
     mit etwas mehr Luft, als die Menuepunkte untereinander haben (die stehen
     nur var(--space-1) auseinander). */
  .site-neu {
    margin-right: var(--space-2);
  }
}

/* ---- (5) Zeitstrahl-Komponente (geschichte.html) ------------------------- */
/* Progressive Enhancement: Baseline = native <details>. Diese Regeln nutzen
   AUSSCHLIESSLICH bestehende Design-Tokens (kein neuer Token, kein Fork) und
   verursachen KEINE externen Requests. Die Sichtbarkeit der Ereignisinhalte
   steuert das native <details> bzw. timeline.js — hier wird nichts hart per
   display:none auf .timeline__body kollabiert. */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: var(--space-6);
  position: relative;
}

/* vertikale Verbindungslinie */
.timeline::before {
  content: "";
  position: absolute;
  top: var(--space-2);
  bottom: var(--space-2);
  left: calc(var(--space-2) + 1px);
  width: 2px;
  background-color: var(--color-border);
}

.timeline__item {
  position: relative;
  margin: 0;
}

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

/* Punkt auf der Linie */
.timeline__marker {
  position: absolute;
  left: calc(-1 * var(--space-6) + var(--space-1));
  top: var(--space-3);
  width: var(--space-3);
  height: var(--space-3);
  border-radius: 50%;
  background-color: var(--color-accent);
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
}

/* „heute" dezent kräftiger hervorgehoben (Primärton statt Akzent) */
.timeline__item--now .timeline__marker {
  background-color: var(--color-primary);
  width: calc(var(--space-3) + var(--space-1));
  height: calc(var(--space-3) + var(--space-1));
  left: calc(-1 * var(--space-6) + var(--space-1) - 1px);
}

.timeline__event {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow);
}

.timeline__item--now .timeline__event {
  border-color: var(--color-primary);
}

.timeline__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.timeline__summary::-webkit-details-marker {
  display: none;
}

.timeline__date {
  font-size: var(--text-sm);
  color: var(--color-accent-ink);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.timeline__item--now .timeline__date {
  color: var(--color-primary);
}

.timeline__title {
  font-size: var(--text-lg);
  margin: 0;
}

.timeline__body {
  padding-top: var(--space-3);
  color: var(--color-text);
}

.timeline__body p {
  color: var(--color-text);
}

/* JS-only Steuerung — Sichtbarkeit steuert das hidden-Attribut (JS entfernt
   es); im CSS wird sie nicht erzwungen. Stil analog .site-nav__toggle. */
.timeline__toggle-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: inherit;
  font-size: var(--text-sm);
  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-3);
  cursor: pointer;
}

.timeline__toggle-all:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Sanftes Aufklappen NUR wenn Bewegung erwünscht ist. */
@media (prefers-reduced-motion: no-preference) {
  .timeline--js .timeline__body {
    animation: timeline-reveal 220ms ease-out;
  }

  @keyframes timeline-reveal {
    from {
      opacity: 0;
      transform: translateY(-0.25rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ---------------------------------------------------------------------------
   Aufmacher-/Inhaltsbild (figure) — nutzt bestehende Tokens, keine neuen Farben
   -------------------------------------------------------------------------- */
.hero-figure {
  margin: 0;
}

.hero-figure img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero-figure figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
}

/* ---------------------------------------------------------------------------
   Bild vergrößern — antippbares Inhaltsbild + Vollbild-Overlay
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

.bild-zoom__flaeche {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius);
  cursor: zoom-in;
}

.bild-zoom__flaeche:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.bild-zoom__lupe {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  box-shadow: var(--shadow);
}

.bild-zoom__lupe svg {
  width: 1.5rem;
  height: 1.5rem;
}

.bild-zoom__hinweis {
  display: block;
}

/* Teilen-Leiste unter dem Bild */
.bild-teilen {
  margin-top: var(--space-3);
}

.bild-teilen__titel {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

.bild-teilen__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Die Knoepfe selbst sind die bestehende Komponente .teilen-btn
   (siehe „Teilen-Buttons" weiter unten) — hier nur der Sonderfall,
   dass der System-Knopf ausgeblendet bleibt, wo das Geraet ihn nicht kann. */
.teilen-btn[hidden] {
  display: none;
}

.bild-teilen__rueckmeldung:empty {
  display: none;
}

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

.bild-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: var(--space-3);
  background: rgba(15, 18, 22, 0.92);
  overflow: auto;
  /* Das Bild darf groesser als der Bildschirm werden — im Overlay wird
     gescrollt, damit auf dem Handy jedes Detail erkennbar bleibt. */
  -webkit-overflow-scrolling: touch;
}

.bild-zoom-overlay[hidden] {
  display: none;
}

.bild-zoom-overlay__inhalt {
  width: 100%;
  max-width: min(1600px, 96vw);
  margin: 0 auto;
}

.bild-zoom-overlay__inhalt img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: #fff;
}

.bild-zoom-overlay__text {
  margin: var(--space-2) 0 0;
  color: #fff;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  text-align: center;
}

.bild-zoom-overlay__zu {
  /* fest am Bildschirmrand: bleibt erreichbar, auch wenn im Bild gescrollt wird */
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.bild-zoom-overlay__zu:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Namens-Aufschlüsselung (Warum SOWANIX?) — SO / WA / NIX
   -------------------------------------------------------------------------- */
.name-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-xl);
  color: var(--color-text-muted);
}

.name-breakdown strong {
  color: var(--color-primary);
}

/* ===========================================================================
   LKW-Zähler zentral & mobil (UX-01 / UX-02)
   Nur bestehende Tokens, keine neuen Farb-Literale, keine externen Ressourcen.
   =========================================================================== */

/* Startseiten-Aufmacher: das Wochenbild führt, darunter der Mitzähl-Aufruf. */
.zaehler-lead {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  margin-bottom: var(--space-7);
}

.zaehler-lead__bild {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.zaehler-lead__text {
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  color: var(--color-text);
}

.zaehler-lead__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.zaehler-lead__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding: var(--space-2) var(--space-5);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--text-lg);
  text-decoration: none;
}

.zaehler-lead__cta:hover {
  background: var(--color-primary-hover);
  color: var(--color-primary-contrast);
}

.zaehler-lead__link {
  font-weight: 600;
}

/* Fester „+ Mitzählen“-Button — nur mobil, am unteren Bildschirmrand. */
.mitzaehlen-fab {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding: var(--space-3) var(--space-4);
  background: var(--color-go);            /* Signalgruen: zentrale Zaehl-Aktion */
  color: var(--color-go-contrast);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(31, 157, 85, 0.4);
  font-size: var(--text-lg);
  font-weight: 800;
  text-decoration: none;
  text-align: center;
}

.mitzaehlen-fab:hover {
  color: var(--color-go-contrast);
  background: var(--color-go-hover);
}

/* Platz schaffen, damit der feste Button die Footer-Links nicht verdeckt (mobil). */
body {
  padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
}

/* Ab Desktop-Breakpoint: FAB aus, Body-Bodenabstand zurücknehmen. */
@media (min-width: 48em) {
  .mitzaehlen-fab { display: none; }
  body { padding-bottom: 0; }
}

/* ===========================================================================
   Seitenweiter Claim (unter dem Header, auf allen Seiten)
   =========================================================================== */
.claim-banner {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
/* Ein einziges, konsequent zentriertes Element: LKW + Claim als eine Flex-Gruppe.
   align-items:center richtet Symbol und Text sauber auf einer Mittellinie aus;
   justify-content:center hält die Gruppe als Ganzes mittig — kein „ohne Sinn
   verschobenes" Icon mehr. gap ersetzt den früheren margin-Hack. */
.claim-banner p {
  margin: 0;
  max-width: none; /* globales p-Limit (65ch) aufheben, sonst klebt der Claim auf Desktop links */
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  letter-spacing: 0.01em;
}

.claim-banner__lkw {
  height: 1.15em;
  width: auto;
  flex: none; /* Symbol behält seine Größe, wird nie gestaucht */
}

/* ===========================================================================
   PWA: „Als App installieren"-Angebot (Startseite)
   =========================================================================== */
.pwa-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}
.pwa-offer[hidden] { display: none; }

.pwa-offer__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: inherit;
  font-weight: 700;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  min-height: var(--btn-h);
  cursor: pointer;
}
.pwa-offer__btn:hover { filter: brightness(0.94); }
.pwa-offer__icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.pwa-offer__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1 1 12rem;
}
.pwa-offer__hilfe {
  flex-basis: 100%;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.pwa-offer__hilfe[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   App-Kachel: ersetzt den frueheren Menuepunkt „App installieren".
   Zeigt das echte App-Symbol (so sieht es spaeter auf dem Startbildschirm aus)
   neben Kurztext, Installations-Knopf und dem Link zur Schritt-Anleitung.
   Traegt data-pwa-offer, wird also von pwa.js gesteuert (und verschwindet,
   sobald SOWANIX als App laeuft).
   --------------------------------------------------------------------------- */
.app-karte {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.app-karte[hidden] { display: none; }

.app-karte__icon {
  flex: 0 0 auto;
  width: 6rem;
  height: 6rem;
  border-radius: 1.35rem; /* App-Icon-Anmutung wie auf dem Startbildschirm */
  box-shadow: var(--shadow);
}

/* min-width:0 ist Pflicht: sonst zwingt der lange Knopftext („SOWANIX als App
   installieren") das Flex-Kind auf seine min-content-Breite und die Kachel
   laeuft auf schmalen Handys ueber den rechten Rand hinaus. */
.app-karte__text { flex: 1 1 16rem; min-width: 0; }
.app-karte__text > h2 { margin-top: 0; }
.app-karte__text > p { max-width: none; }

.app-karte__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}
.app-karte__link { font-size: var(--text-sm); }

/* Mobil: Symbol ueber den Text, alles zentriert, Knopf ueber die volle Breite */
@media (max-width: 34em) {
  .app-karte {
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-4);
  }
  .app-karte__text > h2 { font-size: var(--text-xl); }
  .app-karte__aktionen { justify-content: center; }
  .app-karte__aktionen .pwa-offer__btn {
    width: 100%;
    justify-content: center;
    padding-inline: var(--space-3);
  }
}

.pwa-ios {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.pwa-ios[hidden] { display: none; }

/* ===========================================================================
   Teilen-Buttons (seitenübergreifend: Verkehr, Foto) — einheitliche Button-Höhe.
   =========================================================================== */
/* ---- Teilen-Knöpfe — APP-WEITES MUSTER ----------------------------------
   Vorbild ist die Leiste unter den Bildern der Startseite: KURZE Beschriftung
   (nur der Name des Weges — „WhatsApp", „E-Mail", „Link kopieren"), schmale
   Knöpfe, die nebeneinander stehen und umbrechen.

   REGEL: Teilen-Knöpfe wachsen NIE auf volle Breite und bekommen keine
   Rasterflächen. Teilen ist eine Nebensache neben dem Zählen und den
   Diagrammen — eine große Fläche würde davon ablenken. Wer eine neue
   Teilen-Leiste baut: .teilen-btn verwenden, Container mit
   `display:flex; flex-wrap:wrap; gap:var(--space-2)`, keine flex-Streckung. */
.teilen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  flex: 0 0 auto;      /* nie strecken — s. Regel oben */
  min-height: var(--btn-h);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  font-size: var(--text-base);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.05s;
}
.teilen-btn:hover { border-color: var(--color-primary); background: #faf7f2; }
.teilen-btn:active { transform: translateY(1px); }
.teilen-btn--primär {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-color: var(--color-primary);
}
.teilen-btn--primär:hover { background: var(--color-primary-hover); color: #fff; }
.teilen-btn svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

/* Mobil: Haupt-Aktions-Buttons füllen die Breite → gleich groß. */
@media (max-width: 40rem) {
  .zaehler-lead__cta { width: 100%; }
}

/* ---- (12) Mobile Lesbarkeit --------------------------------------------- */
/* `--text-sm` (0.833rem = 13,3 px) ist das Maß für Hilfstexte, Bildunterschriften,
   Metazeilen und die Fußzeile. Auf dem Telefon ist das zu klein — deshalb wird der
   Token dort auf 0.9rem (14,4 px) angehoben. Eine Stelle, wirkt überall: alle
   Komponenten rechnen mit var(--text-sm), auch die des LKW-Zählers. */
@media (max-width: 40rem) {
  :root {
    --text-sm: 0.9rem;
  }
}