/**
 * Patientenstimmen — Google-Rezensionen.
 *
 * ⚠ DIESE DATEI IST ABSICHTLICH EIGENSTAENDIG. Der Block soll bei der
 * Astro-Migration in einem Stueck umziehen koennen: Markup, dieses
 * Stylesheet, assets/js/rezensionen.js und assets/daten/rezensionen.json
 * gehoeren zusammen und kennen nichts ausserhalb ihrer selbst. Deshalb steht
 * hier keine Mobirise-Klasse, keine cid, kein Selektor auf die Seite — und
 * deshalb steht es NICHT in verweise.css.
 *
 * ⚠ EIN MODUL ERBT NICHTS. Die Wurzel setzt Schrift, Groesse, Zeilenhoehe,
 * Farbe und box-sizing selbst. Gelernt am 2026-09-10 (docs/betrieb/
 * modularisieren.md): Nach dem Zusammenlegen zweier Bloecke waren Markup und
 * Regeln identisch — und sie sahen trotzdem verschieden aus, weil
 * line-height (24 gegen 20,8 px) und Knopf-Innenabstand von der Seite kamen.
 *
 * ⚠ HOVER NUR UNTER @media (hover: hover). Auf dem iPad bleibt ein
 * :hover-Zustand nach dem Antippen haengen — siehe docs/betrieb/
 * hover-auf-touch.md. :focus-visible gehoert NICHT dort hinein.
 */

.flo-stimmen {
  /* Farbrollen aus docs/farbraum.md — hier einmal gebunden, damit der Block
     bei einem Umzug seine Farben mitbringt. */
  /* ⚠ Der gruenliche Grund ist der des alten Blocks (gemessen #dfe9e0) und
     ausdruecklich gewuenscht. Er hat eine Folge: Die beige Karte hat darauf
     nur 1,05:1 Flaechenkontrast — als Farbe allein waere die Karte nicht als
     Karte zu erkennen. Deshalb traegt sie unten einen Schatten; die
     Abgrenzung kommt aus der Tiefe, nicht aus der Farbe. */
  --stimmen-flaeche: #dfe9e0;      /* blasses Gruengrau, wie der alte Block */
  --stimmen-karte: #f2eae2;        /* Flaeche warm, aus dem Fussbereich */
  --stimmen-tinte: #1d1d1d;        /* 14,16:1 auf der Kartenflaeche */
  --stimmen-ruhig: #6f6a5f;        /* 4,52:1 — Quellenzeile, Nebentext */
  --stimmen-ueberschrift: #6f6a5f; /* 4,32:1 auf #dfe9e0 — siehe Titel */
  --stimmen-rosa: #ff8a8f;         /* Praxis-Rosa, NUR als Flaeche/Symbol */
  --stimmen-petrol: #537c83;       /* Bedienung: Knoepfe, Fokus, Links */
  --stimmen-linie: rgba(29, 29, 29, .12);

  box-sizing: border-box;
  margin: 0;
  padding: 3.5rem 0 4rem;
  background: var(--stimmen-flaeche);
  font-family: "PT Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--stimmen-tinte);
}

.flo-stimmen *,
.flo-stimmen *::before,
.flo-stimmen *::after { box-sizing: border-box; }

/* ⚠ NEUTRALISIERUNG — der teuerste Teil dieser Datei, und der unscheinbarste.
   Im Entwurf sahen die Zitate richtig aus; auf index.html standen sie
   KURSIV MIT ROSA BALKEN LINKS. Ursache: Mobirise/Bootstrap gestaltet
   blockquote global (font-style: italic, border-left, padding-left), und ein
   Modul, das blockquote benutzt, erbt das mit. Dasselbe gilt fuer die
   Abstaende von p, figure und figcaption.
   Regel daraus: Jedes Element, das dieses Modul benutzt, setzt seine
   Grundwerte selbst zurueck — sonst gestaltet die Seite mit. */
/* ⚠ :where() IST HIER DER GANZE TRICK. Es zaehlt mit Spezifitaet NULL, die
   Regel wiegt also nur so viel wie ".flo-stimmen" selbst — (0,1,0), genauso
   viel wie jede Klasse des Moduls. Bei Gleichstand gewinnt die spaetere, und
   das sind die Klassenregeln weiter unten.
   Ohne :where() hob der Typselektor die Spezifitaet auf (0,1,1) und die
   Neutralisierung schlug ALLES: Gemessen hatte die Karte dann padding 0px
   statt 24px, die Quellenzeile weder Abstand noch Trennlinie, und die
   Kartenflaeche zeigte die Grundfarbe. Im Stylesheet stand alles richtig da. */
.flo-stimmen :where(blockquote, figure, figcaption, p, h2) {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  quotes: none;
}

/* ⚠ HIER STAND EINMAL "background: none" — und hat die Karten entfaerbt.
   Die Karte IST ein <figure>, also traf die Regel sie mit; und weil ein
   Typselektor die Spezifitaet auf (0,1,1) hebt, schlaegt sie die Klasse
   .flo-stimmen__karte mit (0,1,0) — unabhaengig von der Reihenfolge.
   Gemessen im Bild: Die Kartenflaeche zeigte #DFE9E0, also den Grund, statt
   #F2EAE2. Im Stylesheet war der Fehler nicht zu sehen; die Deklaration
   stand korrekt da und war trotzdem wirkungslos.
   Merke: Eine Neutralisierung darf nur Eigenschaften zuruecksetzen, die das
   Modul NICHT selbst setzt. */

.flo-stimmen :where(blockquote, q)::before,
.flo-stimmen :where(blockquote, q)::after { content: none; }

.flo-stimmen__vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Kopf ────────────────────────────────────────────────────────────── */
.flo-stimmen__kopf {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: center;
}

/* ⚠ Groesse und Gewicht sind die des Bestands (gemessen am alten Block:
   PT Sans, 40 px, Gewicht 500) — der Block soll sich in die Reihe der
   uebrigen Blockueberschriften einfuegen, nicht auffallen.
   ⚠ Die FARBE des Bestands ist bewusst NICHT uebernommen: #b2aea5 hat auf
   dieser Flaeche 1,78:1 gemessen und steht in docs/farbraum.md selbst unter
   den Problemwerten. Stattdessen "Text ruhig" #6f6a5f — dieselbe Familie,
   aus dem Gemaelde, gemessen 4,32:1 auf dieser Flaeche. */
.flo-stimmen__titel {
  margin: 0 0 1.75rem;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--stimmen-ueberschrift);
}

.flo-stimmen__note {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
}

.flo-stimmen__zahl {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.flo-stimmen__gross { color: var(--stimmen-rosa); font-size: 1.3rem; letter-spacing: .08em; }
.flo-stimmen__aus { color: var(--stimmen-ruhig); font-size: .9375rem; }

/* ── Umschalter: Zufall oder Neueste ─────────────────────────────────────
   Zwei Schalter statt eines Auswahlmenues: Bei genau zwei Moeglichkeiten ist
   beides sofort sichtbar, und der Daumen trifft ohne Zielen.
   ⚠ Nur mit JavaScript sinnvoll — deshalb blendet ihn erst das Skript ein. */
.flo-stimmen__steuer { display: none; }

.flo-stimmen--js .flo-stimmen__steuer {
  display: inline-flex;
  gap: .2rem;
  margin-top: 1.6rem;
  padding: .25rem;
  background: rgba(29, 29, 29, .055);
  border-radius: 999px;
}

.flo-stimmen__wahl {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .875rem;
  color: var(--stimmen-ruhig);
  padding: .55rem 1.15rem;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

.flo-stimmen__wahl[aria-pressed="true"] {
  background: #fff;
  color: var(--stimmen-tinte);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(29, 29, 29, .12);
}

.flo-stimmen__wahl[disabled] { cursor: default; }
.flo-stimmen__wahl:focus-visible { outline: 2px solid var(--stimmen-petrol); outline-offset: 2px; }

@media (hover: hover) {
  .flo-stimmen__wahl:not([aria-pressed="true"]):not([disabled]):hover { color: var(--stimmen-tinte); }
}

/* ── Die Reihe: native Wischgeste, Karten schnappen ein ───────────────── */
.flo-stimmen__bahn { position: relative; max-width: 1140px; margin: 2.25rem auto 0; }

.flo-stimmen__reihe {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .25rem 1.25rem 1.5rem;
  /* ⚠ OHNE scroll-padding KLEBT DIE ERSTE KARTE AM RAND — und zwar sofort,
     nicht erst nach dem Wischen. "scroll-snap-align: start" richtet die Karte
     an der Kante des SCROLLPORTS aus, und die liegt vor dem Innenabstand.
     Der Browser scrollt deshalb beim Einschnappen um genau die 1,25rem
     weiter; gemessen stand scrollLeft direkt nach dem Laden auf 20 und die
     Karte bei x = 0. Das Padding war da, es war nur weggescrollt. */
  scroll-padding-inline: 1.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.flo-stimmen__reihe::-webkit-scrollbar { display: none; }

/* ⚠ Die Kartenbreite haengt an der Geraeteklasse, nicht an einer Formel fuer
   alles. Telefon hochkant: eine Karte fast voll, die naechste lugt hervor —
   sonst sieht niemand, dass es weitergeht. Tablet zwei, Schreibtisch drei.
   ⚠ min-width: 0 ist Pflicht. Ohne die Zeile setzt der Inhalt die Untergrenze
   der Flexbox, und die Karte wird breiter als flex-basis erlaubt: gemessen
   458 px statt 269 px bei 320 px Fensterbreite. */
.flo-stimmen__karte {
  flex: 0 0 min(84vw, 340px);
  min-width: 0;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--stimmen-karte);
  border-radius: 14px;
  /* Die beige Karte hat auf dem gruenen Grund nur 1,05:1 Flaechenkontrast —
     ohne Tiefe waere sie im Bild keine Karte, sondern ein Fleck. Der Schatten
     traegt hier also die Abgrenzung, die die Farbe nicht leisten kann.
     ⚠ ABER NICHT MEHR ALS NOETIG. Der erste Wert war doppelt so stark:
     gemessen 28,7 Helligkeitsstufen direkt unter der Kante, mit einem Saum
     bis 46 px — bei einem so flachen Entwurf ein sichtbarer Rand statt einer
     Andeutung. Gemessene Alternativen: .05/.07 → 14,7 · .04/.055 → 11,3 ·
     ein einzelner 2px/10px → 6,7 (zu zart, die Karte verliert die Kante).
     Gewaehlt: 14,7 Stufen, sanft auslaufend.
     ⚠ Der Ton ist in den Grund eingefaerbt (40,55,43 statt neutralgrau),
     sonst wirkt der Schatten auf Gruen schmutzig. */
  box-shadow: 0 1px 2px rgba(40, 55, 43, .05), 0 8px 20px rgba(40, 55, 43, .07);
  display: flex;
  flex-direction: column;
}

.flo-stimmen__karte[hidden] { display: none; }

.flo-stimmen__oben { display: flex; align-items: center; gap: .65rem; margin-bottom: .9rem; }

.flo-stimmen__marke {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* Name ueber den Sternen — die Anordnung, die man von Google kennt.
   ⚠ Ob der Name ueberhaupt im Markup steht, entscheidet NICHT dieses
   Stylesheet, sondern "anzeige": { "namen": … } in
   assets/daten/rezensionen.json. Steht er nicht da, stehen die Sterne
   allein neben dem Google-Zeichen, und nichts weiter ist zu tun. */
.flo-stimmen__wer { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.flo-stimmen__name {
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--stimmen-tinte);
  /* Lange Namen duerfen die Karte nicht sprengen */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flo-stimmen__sterne { color: var(--stimmen-rosa); font-size: .875rem; letter-spacing: .08em; }

.flo-stimmen__zitat { margin: 0; flex: 1 1 auto; }

.flo-stimmen__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--stimmen-tinte);
}

/* ⚠ DAS KUERZEN HAENGT AN DER JS-KLASSE, NICHT AN DER REGEL ALLEIN.
   Stuende der Zeilenschnitt fest im Stylesheet, waere ohne JavaScript jedes
   lange Zitat abgeschnitten und der Aufklapp-Knopf ohne Funktion — also
   Inhaltsverlust statt Gestaltung. Dieselbe Regel wie in einblenden.js. */
.flo-stimmen--js .flo-stimmen__text {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.flo-stimmen--js .flo-stimmen__karte--offen .flo-stimmen__text {
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* ⚠ min-height 44px statt der 24px aus WCAG 2.5.8: Das ist ein Bedienelement
   mitten im Fliesstext, und der Daumen zielt hier ohne Hilfe. Ohne die Regel
   gemessen: 27 px. */
.flo-stimmen__mehr {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: .875rem;
  color: var(--stimmen-petrol);
  padding: .7rem 0 .35rem;
  min-height: 44px;
  align-self: flex-start;
  text-align: left;
  cursor: pointer;
}

.flo-stimmen__mehr:focus-visible { outline: 2px solid var(--stimmen-petrol); outline-offset: 2px; border-radius: 3px; }

@media (hover: hover) {
  .flo-stimmen__mehr:hover { text-decoration: underline; }
}

.flo-stimmen__quelle { margin-top: 1.1rem; padding-top: .85rem; border-top: 1px solid var(--stimmen-linie); }

.flo-stimmen__quelle a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 24px;
  font-size: .8125rem;
  color: var(--stimmen-ruhig);
  text-decoration: none;
}

.flo-stimmen__quelle svg { opacity: .6; }
.flo-stimmen__quelle a:focus-visible { outline: 2px solid var(--stimmen-petrol); outline-offset: 3px; border-radius: 3px; }

/* hover-ausnahme: Wie beim Sammel-Link. Diese Zeile gewinnt heute schon gegen
   Bootstrap, aber nur ueber die REIHENFOLGE der Dateien — eine Umstellung der
   Einbindung wuerde sie kippen. Ausgeschrieben haelt sie ohne diese Wette. */
.flo-stimmen__quelle a:hover,
.flo-stimmen__quelle a:active,
.flo-stimmen__quelle a:focus {
  color: var(--stimmen-ruhig);
  text-decoration: none;
}

@media (hover: hover) {
  .flo-stimmen__quelle a:hover { color: var(--stimmen-petrol); text-decoration: underline; }
}

/* ── Ladeanimation beim Umschalten ───────────────────────────────────────
   Ein Wechsel ohne Zwischenschritt wirkt wie ein Fehler: Die Karten waeren
   schlagartig andere. Der Platzhalter sagt "ich hole gerade neue" — und die
   Reihe behaelt dabei ihre Hoehe, weil die alten Karten stehen bleiben. */
.flo-stimmen__karte > * { transition: opacity .18s ease; }
.flo-stimmen__reihe--laedt .flo-stimmen__karte > *:not(.flo-stimmen__knochen) { opacity: 0; }

.flo-stimmen__knochen {
  position: absolute;
  inset: 1.5rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  pointer-events: none;
}

.flo-stimmen__knochen i { display: block; height: .7rem; border-radius: 4px; background: rgba(29, 29, 29, .09); }
.flo-stimmen__knochen i:first-child { width: 2rem; height: 2rem; border-radius: 50%; margin-bottom: .4rem; }

.flo-stimmen__reihe--laedt .flo-stimmen__karte::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .75) 48%, transparent 72%);
  background-size: 250% 100%;
  animation: flo-stimmen-schimmer 1.05s linear infinite;
}

@keyframes flo-stimmen-schimmer {
  from { background-position: 160% 0; }
  to { background-position: -160% 0; }
}

/* ── Einblenden beim Hereinscrollen ──────────────────────────────────────
   ⚠ Der Ausgangszustand haengt an "--bereit", und die Klasse setzt erst das
   Skript. Ohne JavaScript bleibt alles sichtbar: Eine Animation darf nie zum
   Inhaltsverlust werden. */
@media (prefers-reduced-motion: no-preference) {
  .flo-stimmen__zeigt { transition: opacity .7s ease, transform .7s cubic-bezier(.22, .9, .3, 1); }
  .flo-stimmen__zeigt--bereit { opacity: 0; transform: translateY(26px); }
  .flo-stimmen__zeigt--da { opacity: 1; transform: none; }
}

/* ── Pfeile: in der Standzeile, auf JEDEM Geraet ──────────────────────
   ⚠ Sie standen zuerst seitlich an der Reihe und nur unter
   "@media (hover: hover) and (min-width: 992px)" — auf iPad und iPhone gab
   es also gar keine. Genau dort sind sie am nuetzlichsten: Die Wischgeste
   ist unsichtbar, ein Pfeil sagt "hier geht es weiter".
   Seitlich ging es auf schmalen Schirmen nicht: Bei 390 px haetten die
   44-px-Knoepfe entweder aus dem Bild geragt oder den Zitattext verdeckt.
   In der Standzeile verdecken sie nichts und sind ueberall gleich. */
.flo-stimmen__pfeil {
  display: inline-flex;
  flex: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--stimmen-linie);
  background: #fff;
  border-radius: 50%;
  color: var(--stimmen-tinte);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(29, 29, 29, .09);
  transition: opacity .2s ease, visibility .2s;
}

.flo-stimmen__pfeil--links svg { transform: rotate(180deg); }

/* ⚠ Ein Pfeil, der nirgendwohin fuehrt, wird AUSGEBLENDET, nicht blass
   gestellt. Bei opacity .3 stand er ganz links als halber Kreis hinter der
   ersten Karte und sah aus wie ein verrutschtes Bedienelement.
   visibility statt display: Der Platz bleibt, die Leiste springt nicht. */
.flo-stimmen__pfeil[disabled] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.flo-stimmen__pfeil:focus-visible { outline: 2px solid var(--stimmen-petrol); outline-offset: 2px; }

@media (hover: hover) {
  .flo-stimmen__pfeil:not([disabled]):hover { border-color: var(--stimmen-petrol); color: var(--stimmen-petrol); }
}

/* ── Standanzeige statt Punkten ──────────────────────────────────────────
   Bei siebzig Karten waeren Punkte siebzig Ziele, die niemand zaehlt. Eine Leiste zeigt
   dasselbe stufenlos und bleibt bei jeder Kartenzahl lesbar — der Reiter ist
   so breit wie der sichtbare Anteil. Nur mit JavaScript sinnvoll. */
.flo-stimmen__stand { display: none; }

.flo-stimmen--js .flo-stimmen__stand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin-top: .5rem;
  padding: 0 1.25rem;
}

.flo-stimmen__schiene {
  position: relative;
  width: min(200px, 40vw);
  height: 3px;
  border-radius: 2px;
  background: rgba(29, 29, 29, .1);
  overflow: hidden;
}

.flo-stimmen__reiter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 2px;
  background: var(--stimmen-petrol);
  transition: transform .25s ease, width .25s ease;
}

.flo-stimmen__zaehler { margin: 0; font-size: .8125rem; color: var(--stimmen-ruhig); font-variant-numeric: tabular-nums; }

/* ── Fuss ────────────────────────────────────────────────────────────── */
.flo-stimmen__fuss { margin-top: 1.75rem; padding: 0 1.25rem; text-align: center; }

.flo-stimmen__alle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .6rem 1.4rem;
  border: 1px solid var(--stimmen-petrol);
  border-radius: 999px;
  color: var(--stimmen-petrol);
  font-size: .9375rem;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.flo-stimmen__alle:focus-visible { outline: 2px solid var(--stimmen-petrol); outline-offset: 3px; }

/* ⚠ AUF DEM IPAD WURDE DIESER LINK BEIM ANTIPPEN KURZ BLAU. Gemeldet am
   2026-09-11, und am Schreibtisch nicht zu sehen — dort ist er weiss auf
   Petrol. Der Unterschied ist keine Geraetelaune, sondern Spezifitaet:

     a:hover                    (0,1,1)  bootstrap.min.css, OHNE Media Query
     .flo-stimmen__alle         (0,1,0)  unsere Grundregel   → VERLIERT
     .flo-stimmen__alle:hover   (0,2,0)  unsere Hover-Regel  → gewinnt,
                                         aber NUR in @media (hover: hover)

   iOS setzt beim Antippen kurz :hover. Das iPad meldet "hover: none", also
   greift unsere Hover-Regel dort NICHT — Bootstraps ungeklammerte Regel aber
   schon. Fuer diesen Moment gewinnt sie gegen unsere Grundregel und faerbt
   Text blau (#0056b3) samt Unterstreichung.

   ⚠ Die Nachbarregel ".flo-stimmen__quelle a" ist aus demselben Grund NICHT
   betroffen: Sie hat einen Typselektor dabei, steht also bei (0,1,1) gleich-
   auf und gewinnt ueber die Reihenfolge. Ein Klassenname allein reicht gegen
   einen Pseudoklassen-Selektor des Bestands nicht.

   hover-ausnahme: Diese Regel MUSS ausserhalb von (hover: hover) stehen —
   eingeklammert waere sie genau dort wirkungslos, wo der Fehler auftritt.
   Sie stellt nur den RUHEZUSTAND wieder her; die gestalterische Rueckmeldung
   fuer die Maus steht weiter unten und gewinnt dort ueber die Reihenfolge. */
.flo-stimmen__alle:hover,
.flo-stimmen__alle:active,
.flo-stimmen__alle:focus {
  color: var(--stimmen-petrol);
  text-decoration: none;
}

/* Der graue Kasten, den iOS beim Antippen ueber den Link legt, gehoert nicht
   zu dieser Gestaltung — die Rueckmeldung ist der Fokusrahmen. */
.flo-stimmen__alle,
.flo-stimmen__quelle a,
.flo-stimmen__mehr,
.flo-stimmen__pfeil,
.flo-stimmen__wahl { -webkit-tap-highlight-color: transparent; }

@media (hover: hover) {
  .flo-stimmen__alle:hover { background: var(--stimmen-petrol); color: #fff; text-decoration: none; }
}

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

/* ── Breiten ─────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .flo-stimmen__karte { flex: 0 0 calc((100% - 1.5rem) / 2); }
}

@media (min-width: 992px) {
  .flo-stimmen__karte { flex: 0 0 calc((100% - 3rem) / 3); }
  .flo-stimmen__reihe { padding-left: 0; padding-right: 0; scroll-padding-inline: 0; }
  /* ⚠ NICHT margin-inline setzen — das ueberschreibt das "auto" aus der
     Grundregel, und die Reihe klebt am linken Fensterrand statt unter dem
     Kopf zu stehen (gemessen bei 1440 px: Karten begannen bei x=30 statt
     x=170). Stattdessen die Breite um dieselben 2x1,25rem verringern, die
     die Reihe unterhalb 992 px als Innenabstand hatte — dann stehen Kopf und
     Karten auf derselben Kante. */
  /* ⚠ "max-width" allein liess die Reihe zwischen 992 und 1180 px am Rand
     kleben: Erst ab 1180 px ist die Begrenzung ueberhaupt wirksam, davor ist
     die Bahn so breit wie das Fenster und "margin: auto" verteilt nichts.
     "width: min(...)" garantiert den Rand bei JEDER Breite. */
  .flo-stimmen__bahn { width: min(100% - 2.5rem, calc(1140px - 2.5rem)); }
}