/* Bewertungs-Karussell — auf der Startseite (Abschnitt "Stimmen") UND im
   Warenkorb im Einsatz. Seit dem 2026-08-27 ein Takt-Karussell (Dimis Ansage,
   nachgeschaerft am selben Tag): KEIN Dauerlauf — alle 10 Sekunden schiebt ein
   kleines Skript (inc/startseite-abschnitte.php) die Spur um eine Karte nach
   links; die transition hier macht den Schritt weich. Das Band steht in der
   Inhaltsspalte, also zentriert im Layout.

   Sichtbar sind 3,5 Karten; die halbe vierte zeigt, dass mehr kommt. Die
   Kartenbreite rechnet ueber Container-Queries (100cqw = Breite des Bandes);
   ohne Unterstuetzung greift die feste Rueckfallbreite davor. Die
   Avatar-Kreise mit Namenskuerzel sind ersatzlos entfallen. Faellt das Skript
   aus, steht die Reihe auf Position 1 — nichts ist versteckt. */

.kw-neu .bewertungs-band{overflow:hidden;position:relative;container-type:inline-size;
  padding-block:8px}

/* Weiche Kante nur rechts, wo die halbe Karte angeschnitten ist. */
.kw-neu .bewertungs-band::after{content:"";position:absolute;top:0;bottom:0;right:0;
  width:70px;z-index:2;pointer-events:none;
  background:linear-gradient(270deg,#fff,transparent)}

.kw-neu .bewertungs-spur{display:flex;width:max-content}

/* Der Abstand am Teil-Ende (padding-right) muss dem Kartenabstand entsprechen,
   sonst springt die Naht zwischen den beiden Spuren. */
.kw-neu .bewertungs-teil{display:flex;flex-shrink:0;align-items:stretch;gap:16px;
  padding-right:16px}

.kw-neu .bewertungs-karte{background:#fff;border:1px solid #e8e8e8;border-radius:8px;
  padding:24px;flex:0 0 auto;
  width:300px;
  width:calc((100cqw - 3 * 16px) / 3.5)}
.kw-neu .bewertungs-kopf{display:flex;align-items:center;gap:8px;margin-bottom:8px;
  flex-wrap:wrap}
.kw-neu .bewertungs-kopf h3{font-size:15px;font-weight:600;color:var(--text);margin:0}
.kw-neu .bewertungs-sterne{font-size:12px;color:var(--bordeaux);white-space:nowrap}
.kw-neu .bewertungs-karte > p{font-size:14px;line-height:1.6;color:var(--text);margin:0;
  white-space:normal}

/* Die Punkte unter dem Band — manuelle Navigation, der aktive folgt dem Takt.
   Der sichtbare Punkt misst 10 px; der transparente Rand vergroessert die
   Klick-/Tippflaeche auf 30 px, ohne die Optik aufzublasen. */
.kw-neu .bewertungs-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:2px;
  margin-top:var(--s4)}
.kw-neu .bewertungs-dot{box-sizing:content-box;width:10px;height:10px;padding:0;
  border:10px solid transparent;border-radius:50%;cursor:pointer;
  background:rgba(112,16,32,.25);background-clip:padding-box;
  transition:background-color 200ms}
.kw-neu .bewertungs-dot:hover{background-color:rgba(112,16,32,.45)}
.kw-neu .bewertungs-dot.aktiv{background-color:var(--bordeaux)}
.kw-neu .bewertungs-dot:focus-visible{outline:2px solid var(--bordeaux);outline-offset:1px}

@media (max-width:900px){
  .kw-neu .bewertungs-karte{width:340px;width:calc((100cqw - 2 * 16px) / 2.5)}
}
@media (max-width:600px){
  .kw-neu .bewertungs-karte{width:260px;width:calc((100cqw - 16px) / 1.5);padding:16px}
}

/* Wer Bewegung abbestellt hat, bekommt eine stehende, von Hand scrollbare Reihe —
   die zweite (rein optische) Spur bleibt dabei ausgeblendet. */
@media (prefers-reduced-motion:reduce){
  .kw-neu .bewertungs-spur{animation:none;width:auto;overflow-x:auto}
  .kw-neu .bewertungs-teil[aria-hidden="true"]{display:none}
}