/* NORDIX — Stimmen als Laufband
   Portierung der 21st.dev-Komponente „marquee-01" nach Vanilla-CSS.

   VORLAGE vs. HIER:
   · Die Vorlage ist React + Tailwind + shadcn/ui. Der Mechanismus bleibt:
     zwei Reihen, gegenläufig, Pause beim Darüberfahren, Verläufe an den
     Rändern. Umgesetzt mit einer Keyframe-Animation statt der Tailwind-Klasse.
   · Vorlage: `line-clamp-2` schneidet den Text nach zwei Zeilen ab. Das geht
     bei erfundenen SaaS-Zitaten, nicht bei echten Kundenbewertungen — eine
     mitten im Satz abgeschnittene Rezension wirkt schlampig. Hier laufen die
     Texte vollständig, und alle Karten einer Reihe sind gleich hoch.
   · Vorlage: Profilbilder von einem fremden Server. Hier Monogramme aus dem
     Anfangsbuchstaben — keine externe Quelle, und Google zeigt bei Konten
     ohne Bild ohnehin genau das.
   · Vorlage: `@username`. Bei Google gibt es keine Handles; an der Stelle
     stehen die Sterne.
   · Ergänzt: Sternwertung, Herkunftsangabe und der Weg zum Profil.

   Das Band läuft absichtlich über die volle Breite und nicht in der
   Lesespalte: Die Verläufe an den Rändern setzen voraus, dass die Karten aus
   dem Bild heraus- und hereinlaufen. In einer 620 px schmalen Spalte wären
   nur zwei Karten sichtbar und die Bewegung ginge verloren. */

:root{
  --st-w:320px;          /* Kartenbreite */
  --st-gap:14px;
  --st-tempo:38;         /* Pixel pro Sekunde — nicht die Dauer, damit beide
                            Reihen unabhängig von ihrer Länge gleich schnell
                            laufen */
  --st-r:14px;
}

/* volle Breite: das Band ist Geschwister von .sec, die Polsterung der
   Sektion wird per negativem Rand zurückgenommen */
.stimmen{
  margin:clamp(30px,4vw,52px) calc(var(--pad) * -1) 0;
  position:relative;
  display:flex;flex-direction:column;gap:var(--st-gap);
  overflow:hidden;
}

/* Verläufe an den Rändern */
.stimmen::before,
.stimmen::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(48px,12vw,190px);
  z-index:2;pointer-events:none;
}
.stimmen::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.stimmen::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}

.band2{overflow:hidden}
.spur2{
  display:flex;gap:var(--st-gap);width:max-content;
  animation:st-lauf var(--st-dauer,30s) linear infinite;
  will-change:transform;
}
/* Die zweite Reihe läuft gegenläufig UND um eine halbe Runde versetzt.
   Ohne den Versatz stünden zu Beginn in beiden Reihen dieselben Karten
   untereinander — es sähe nach einem Fehler aus, nicht nach zwei Reihen. */
.band2[data-rueck="1"] .spur2{
  animation-direction:reverse;
  animation-delay:calc(var(--st-dauer,30s) * -0.5);
}
.stimmen:hover .spur2,
.stimmen:focus-within .spur2{animation-play-state:paused}

@keyframes st-lauf{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--st-schub) * -1),0,0)}
}

/* ---------- Karte ---------- */
.rez{
  flex:0 0 var(--st-w);
  display:flex;flex-direction:column;gap:12px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--st-r);
  background:var(--panel);
  color:inherit;text-decoration:none;
  transition:border-color .3s ease,background-color .3s ease;
}
.rez:hover,.rez:focus-visible{
  border-color:var(--orange);
  background:color-mix(in srgb,var(--orange) 5%,var(--panel));
}

.rez .oben{display:flex;align-items:center;gap:11px}
.rez .mono{
  display:grid;place-items:center;flex:0 0 auto;
  width:36px;height:36px;border-radius:999px;
  background:color-mix(in srgb,var(--orange) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--orange) 45%,transparent);
  font-family:var(--font-display);font-weight:600;font-size:16px;
  color:var(--orange);
}
.rez .wer{min-width:0}
.rez .name{
  font-family:var(--font-display);font-weight:600;
  font-size:16px;letter-spacing:.01em;text-transform:uppercase;
  color:var(--ink);line-height:1.1;
}
.rez .sterne{display:flex;gap:2px;margin-top:5px}
.rez .sterne svg{width:13px;height:13px;fill:var(--orange)}

.rez .txt{
  font-size:13.5px;line-height:1.62;color:var(--ink-2);
  /* hängende Anführungszeichen, damit die erste Zeile bündig steht */
  hanging-punctuation:first;
}

.rez .quelle{
  margin-top:auto;padding-top:12px;
  border-top:1px solid var(--line-2);
  font-size:var(--fs-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:color .3s ease;
}
.rez:hover .quelle,.rez:focus-visible .quelle{color:var(--orange)}

/* ---------- Weg zum Profil ---------- */
.gbp-reihe{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

.gbp{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 20px;
  border:1px solid var(--line-2);border-radius:999px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;
  transition:color .25s ease,border-color .25s ease,background-color .25s ease;
}
.gbp:hover,.gbp:focus-visible{
  color:var(--orange);border-color:var(--orange);
  background:color-mix(in srgb,var(--orange) 10%,transparent);
}
.gbp svg{width:13px;height:13px;transition:transform .3s cubic-bezier(.25,1,.5,1)}
.gbp:hover svg{transform:translate(2px,-2px)}

/* Der Aufruf ist das Ziel dieser Sektion, das Nachlesen die Nebensache. */
.gbp-haupt{
  color:var(--bg);background:var(--orange);border-color:var(--orange);
}
.gbp-haupt:hover,.gbp-haupt:focus-visible{
  color:var(--bg);background:var(--orange-hell);border-color:var(--orange-hell);
}

/* ---------- Herkunft der Bewertungen ---------- */
/* Steht unter dem Band, nicht darüber: Erst sieht man die Stimmen, dann
   liest man, woher sie stammen. Kleiner als der Fließtext, aber deutlich
   größer als die Mikroschrift — es ist eine Pflichtangabe, kein Kleingedrucktes. */
.sec-fuss{margin-top:clamp(26px,3.4vw,40px)}
.echtheit{
  font-size:13px;line-height:1.7;color:var(--ink-3);
  max-width:78ch;
  padding-top:16px;border-top:1px solid var(--line);
}
.echtheit b{color:var(--ink-2);font-weight:500}

/* ---------- Handy ---------- */
@media(max-width:640px){
  :root{--st-w:262px}
}

/* Wer Bewegung abgestellt hat, bekommt kein Laufband, sondern eine Reihe,
   die sich von Hand schieben lässt. */
@media(prefers-reduced-motion:reduce){
  /* will-change zurücknehmen: Ohne Animation gibt es nichts vorzubereiten,
     die Compositor-Ebene bliebe aber bestehen — Arbeitsspeicher für eine
     Bewegung, die derjenige gerade abbestellt hat. */
  .spur2{animation:none;will-change:auto}
  .band2{overflow-x:auto;scroll-snap-type:x mandatory}
  .rez{scroll-snap-align:start}
}

/* ── Bewertungs-Kopfblock ────────────────────────────────────────────────
   Runde 200, Variante A. Ein flacher Balken in der Textspalte — LINKSBÜNDIG.

   Die erste Fassung war eine zentrierte Karte (`margin:26px auto`). Das war
   falsch: `.sec` ist ein Raster aus Randspalte und linksbündiger Textspalte,
   eine zentrierte Box bricht darin die Leseachse und lässt rechts eine Lücke.
   Aufgefallen ist es erst live, weil der Bake-off die Box ISOLIERT zeigte und
   nicht im Sektionsraster — seither wird jeder Bake-off im echten Raster und
   gegen die echten CSS-Dateien gebaut. */
.gnote{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:26px 0 0;padding:14px 20px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px}
.gnote-marke{width:20px;height:20px;flex:none}
.gnote-schnitt{font-family:var(--font-display);font-size:34px;line-height:.9;
  letter-spacing:.01em;color:var(--ink)}
.gnote-sterne{display:inline-flex;gap:3px}
.gnote-sterne svg{width:20px;height:20px;fill:var(--orange)}
.gnote-meta{color:var(--ink-3);font-size:11.5px;letter-spacing:.03em;line-height:1.5}
.gnote-meta b{color:var(--ink-2);font-weight:400}

/* Am Telefon bricht der Balken um; die Note bleibt die erste Zeile. */
@media(max-width:560px){
  .gnote{gap:12px;padding:13px 16px}
  .gnote-schnitt{font-size:30px}
  .gnote-sterne svg{width:17px;height:17px}
}

/* ── Google-Signet in der Rezensionskarte ───────────────────────────────
   Runde 201. Rechts in der Kopfzeile, auf der Mittellinie des
   Initialen-Kreises. `margin-left:auto` schiebt es ans Ende, die Ausrichtung
   besorgt `align-items:center` von `.oben` — deshalb stimmt sie auch, wenn
   ein langer Name umbricht. Gemessen: 0,0 px Abweichung bei allen Namen. */
.rez .gmark{margin-left:auto;flex:none;line-height:0}
.rez .gmark svg{display:block;width:20px;height:20px}