/* Fairfinanz — Bewertungs-Laufleiste.
   Baut auf tokens.css auf. Keine Inline-Styles im Markup (CSP: style-src 'self');
   die einzige aus JS gesetzte Eigenschaft ist --fuellung über die CSSOM — das ist
   kein style-Attribut und damit CSP-konform.

   Die Leiste ist ein echter Scroll-Container, kein Keyframe (siehe js/bewertungen.js).
   Der Grund: Eine laufende CSS-Transformation kann man nicht anfassen — die alte Leiste
   war ein Video. Über `scrollLeft` sind Ziehen, Wischen, Rad, Trackpad und Pfeiltasten
   nativ dabei; JS schiebt den Scrollstand nur weiter und hält die Schleife heil.

   Zwei identische Spuren: Spur 2 beginnt bei Spurbreite + Abstand. Erreicht der
   Scrollstand diesen Wert, zieht JS ihn genau davon ab — der Inhalt darunter ist
   danach pixelgleich derselbe. Keine Naht. */

.stimmen {
  --abstand: 24px;
  --karte: 360px;
  --auslauf: 8rem;

  margin-top: 56px;
}

/* Die Leiste bleibt bewusst IN der Bahn und bricht nicht über die Viewport-Kante aus:
   --gutter enthält ein 100%, das sich immer gegen den ELTERNKASTEN auflöst. In einem
   ausgebrochenen Element wäre das nicht mehr die Sektionsbreite, der negative Rand
   säße daneben — und ein 100vw-Ausbruch würde die Scrollbar mitzählen und einen
   waagerechten Seitenüberlauf erzeugen (genau das, was tools/pruefen.mjs abfängt).
   Die Maske an den Kanten leistet dasselbe fürs Auge. */
.stimmen-fenster {
  display: flex;
  gap: var(--abstand);

  /* auto statt hidden: DAS ist der Umbau. Der Kasten scrollt jetzt wirklich. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;   /* nicht die ganze Seite mitziehen */
  scrollbar-width: none;            /* der Balken wäre hier nur Lärm — gezogen wird direkt */
  cursor: grab;

  /* Maske statt Farbverlaufs-Overlay: funktioniert auf jedem Hintergrund und muss
     nicht mit --flaeche2 synchron gehalten werden. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--auslauf), #000 calc(100% - var(--auslauf)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--auslauf), #000 calc(100% - var(--auslauf)), transparent 100%);
}
.stimmen-fenster::-webkit-scrollbar { display: none; }

/* Im Griff: Cursor umstellen und die Textauswahl abschalten — sonst markiert das Ziehen
   die Bewertungstexte, statt die Leiste zu bewegen. */
.stimmen-fenster.ist-gezogen {
  cursor: grabbing;
  user-select: none;
}

/* Das Fenster ist mit der Tastatur erreichbar (tabindex im Markup) und muss das zeigen. */
.stimmen-fenster:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 3px;
}

.stimmen-spur {
  flex: 0 0 auto;
  display: flex;
  /* NICHT stretch. Die Bewertungen sind 180 bis 725 Zeichen lang; gleich hohe Karten
     bekämen alle das Maß der längsten, und unter der kürzesten stünden 420 px leeres
     Papier (mobil: eine halbe Bildschirmhöhe). Gekürzt wird nichts — die Texte sind
     wörtlich (§ 5b UWG). Also flattern die Unterkanten, und in einer waagerechten Leiste
     liest sich das wie ein Regal, nicht wie ein Fehler. */
  align-items: flex-start;
  gap: var(--abstand);
  min-width: max-content;     /* die Spur ist so breit wie ihr Inhalt, nicht wie das Fenster */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die zwei Knöpfe. Sie sind die Tastatur- und Barrierefreiheits-Fassung dessen,
   was mit der Maus das Ziehen leistet. Vor dem Start versteckt (hidden im Markup):
   ohne JS gibt es nichts zu steuern. */
.stimmen-steuerung {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}
/* Ohne diese Zeile schlägt display:flex das [hidden] des Browsers — und wenn js/bewertungen.js
   ausfällt (js/site.js fängt das per try/catch ab), stünden hier drei klickbare Knöpfe ohne
   Handler, plus drei folgenlose Tab-Stopps. Dasselbe Muster steht in css/rechner.css. */
.stimmen-steuerung[hidden] { display: none; }

/* Der Pausenknopf zeigt, was der Klick tut: läuft die Leiste, steht dort das Pausenzeichen;
   steht sie, das Abspielzeichen. */
.stimmen-pause .stimmen-pause-aus { display: none; }
.ist-angehalten .stimmen-pause .stimmen-pause-an { display: none; }
.ist-angehalten .stimmen-pause .stimmen-pause-aus { display: inline; }
.stimmen-pause { font-size: 15px; }
.stimmen-pause[aria-pressed="true"] { border-color: var(--tinte); }
.stimmen-knopf {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: var(--tinte);
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  cursor: pointer;
}
.stimmen-knopf:hover { border-color: var(--tinte); }
.stimmen-knopf:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 2px;
}

.stimme-feld {
  flex: 0 0 var(--karte);
  width: var(--karte);
  display: flex;
}

.stimme {
  margin: 0;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--papier);        /* Papierkarte auf der Sandfläche */
  border: 1px solid var(--linie);
}

/* Sterne: eine graue Reihe, darüber eine goldene, auf --fuellung beschnitten.
   4,80 von 5 zeigt damit 96 % Gold statt fünf voller Sterne. Reine Grafik —
   die Note steht als Zahl in der Fußzeile, deshalb ist Gold hier zulässig. */
.stimme-sterne {
  position: relative;
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 3px;
  color: var(--linie);
  margin-bottom: 18px;
}
.stimme-sterne::before { content: "★★★★★"; }
.stimme-sterne span {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: var(--fuellung, 100%);
  color: var(--akzent);
  white-space: nowrap;
}
.stimme-sterne span::before { content: "★★★★★"; }

/* Kleiner als früher (die Bewertung war mal ein Höhepunkt, jetzt ist sie eine von zehn),
   aber immer noch vollständig — gekürzt wird kein Wort (§ 5b UWG). */
.stimme-text {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--tinte);
  text-wrap: pretty;
}

.stimme-fuss {
  margin-top: auto;           /* Fuß klebt unten, auch wenn der Text kurz ist */
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stimme-name { font-weight: 700; color: var(--tinte); }
.stimme-meta { font-size: var(--t-klein); color: var(--sekundaer); }

/* § 5b UWG: Wer mit Bewertungen wirbt, muss sagen, ob und wie er die Echtheit prüft.
   Es sind ZWEI Absätze, und beide sind Pflicht — der erste nennt Herkunft und Auswahl,
   der zweite die Echtheitsprüfung (Abs. 3). Bis Runde 5 gab es nur den ersten; der Kommentar
   hier forderte den zweiten seit Runde 4 ein, ohne dass er je geschrieben wurde.
   Nicht entfernen. */
.stimmen-hinweis {
  margin-top: 28px;
  max-width: 62ch;
}
.stimmen-hinweis + .stimmen-hinweis { margin-top: 14px; }
.stimmen-hinweis a { color: var(--tinte); text-underline-offset: 3px; }

@media (max-width: 1079px) {
  .stimmen {
    --karte: 280px;
    --auslauf: 3rem;
    margin-top: 40px;
  }
  .stimme { padding: 22px 22px 20px; }
  .stimme-text { font-size: 16px; }
}

/* Reduced Motion: KEIN Selbstlauf (js/bewertungen.js startet die Schleife gar nicht erst)
   und keine Leiste, sondern ein statisches Raster, in dem jede Bewertung genau EINMAL
   steht. Die Kopie-Spur fällt weg, das Fenster hört auf zu scrollen.
   Die Knöpfe bleiben trotzdem bedienbar — sie schieben dann einfach nichts mehr, weil
   nichts mehr überläuft. Sie zu verstecken wäre ebenso richtig; sichtbar zu lassen ist
   billiger und stört nicht. */
@media (prefers-reduced-motion: reduce) {
  .stimmen-fenster {
    overflow: visible;
    cursor: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .stimmen-spur {
    flex-wrap: wrap;
    min-width: 0;
    row-gap: var(--abstand);
    /* Hier wieder gleich hoch: In einer laufenden Leiste sieht eine flatternde Unterkante
       aus wie ein Regal, in einem stehenden Raster wie ein Fehler. */
    align-items: stretch;
  }
  .stimmen-spur.ist-kopie { display: none; }
  .stimme-feld { flex: 1 1 300px; width: auto; }
  .stimmen-steuerung { display: none; }
}