/* =========================================================================
   KUNDINNENSTIMMEN — Darstellung
   -------------------------------------------------------------------------
   Diese Regeln standen früher in css/start.css und waren damit nur auf der
   Startseite verfügbar. Auf allen Unterseiten blieb der Bewertungsbereich
   deshalb unformatiert und sah aus wie loser Text.

   Jetzt liegen sie in einer eigenen Datei. Jede Seite, die Bewertungen
   zeigt, bindet sie ein:

       <link rel="stylesheet" href="css/bewertungen.css">

   Bitte nicht zurück nach start.css kopieren. Sonst gibt es die Regeln
   zweimal und sie laufen mit der Zeit auseinander.

   -------------------------------------------------------------------------
   ZUM BAND

   Die Bewegung macht js/bewertungen.js mit requestAnimationFrame und
   translate3d, nicht CSS. Der Grund steht dort ausführlich: Eine
   CSS-Animation lässt sich nicht sauber anhalten und weiterwischen.

   Hier steht deshalb bewusst KEINE animation-Regel für das Band. Wer eine
   hinzufügt, bekommt zwei Bewegungen übereinander.
   ========================================================================= */

/* ---------- Vertrauenszeile ---------- */

.pe-zeile {
  display: flex; align-items: center;
  gap: clamp(20px, 3vw, 40px);
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: clamp(26px, 2.6vw, 38px);
  text-align: left;
}

.pez-text { min-width: 0; }

/* Das eingebettete ProvenExpert-Siegel wurde entfernt. Es lud ein
   Fremdbild von provenexpert.com, brachte eine eigene Gestaltung mit und
   stand quer zur Markenwelt. Note und Anzahl kommen weiterhin live über
   die API. Falls es doch einmal gebraucht wird, ist die Regel schnell
   wieder geschrieben — bitte dann aber bewusst entscheiden. */

.pez-note { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pez-sterne { color: var(--orange); font-size: 1.1rem; letter-spacing: 0.14em; line-height: 1; }

.pez-wert {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1; letter-spacing: -0.02em;
}

.pez-anzahl {
  font-family: var(--sans);
  font-size: 0.88rem; color: #5F4E42;
  margin: 0 0 10px;
}

.pez-hinweis {
  font-family: var(--sans);
  font-size: 0.76rem; color: var(--warm-grey);
  line-height: 1.6; margin: 0 0 10px;
}

.pez-link {
  font-family: var(--sans);
  font-size: 0.86rem; font-weight: 600;
  color: var(--orange-dark); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.pez-link:hover { border-bottom-color: var(--orange); }
.pez-link .btn-arrow { transition: transform 0.25s ease; }
.pez-link:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Offizielles ProvenExpert-Widget ---------- */

.pe-widget { margin-top: clamp(34px, 3.6vw, 54px); }
.pe-widget[data-leer] { display: none; }

/* ---------- Das Band ---------- */

.pe-wand { margin-top: clamp(30px, 3.2vw, 46px); }
.pe-wand[hidden] { display: none; }

.pew-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: clamp(16px, 1.8vw, 22px);
}
.pew-label {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--warm-grey);
}
.pew-alle {
  font-family: var(--sans);
  font-size: 0.8rem; font-weight: 600;
  color: var(--orange-dark); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.pew-alle:hover { border-bottom-color: var(--orange); }

/* ---------- Der Slider ----------

   Zwei Eigenschaften machen die eigentliche Arbeit: overflow-x und
   scroll-snap. Der Browser kann das, es misst nichts, und deshalb kann
   auch nichts danebengehen.

   Vorher stand hier ein Laufband, das seine eigene Breite messen musste,
   um zu wissen, wann es zurückspringt. Diese Messung passierte einmal —
   vor dem Laden der Schriften und vor dem endgültigen Umbruch. Stimmte
   sie nicht, entstand eine Lücke. Genau das ist mehrfach passiert.

   Ohne JavaScript bleibt das hier ein bedienbarer Slider. Man schiebt
   ihn mit dem Finger oder dem Trackpad.
   -------------------------------------------------------------------- */

.pew-reihen {
  display: flex;
  gap: clamp(12px, 1.5vw, 20px);

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;

  /* Die Karten haben einen Schatten. Ohne etwas Luft würde er an der
     Kante abgeschnitten. */
  padding: 4px 2px 14px;
  margin: -4px -2px -14px;

  /* Rollbalken ausblenden. Bedient wird mit Wischen, Trackpad oder den
     Pfeilen darunter. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pew-reihen::-webkit-scrollbar { display: none; }

/* Sichtbar, wenn jemand mit der Tastatur hierher kommt. */
.pew-reihen:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: var(--r);
}

.pew-reihen > .pew-karte {
  scroll-snap-align: start;
  flex: 0 0 auto;
  /* Drei Karten auf dem Desktop, eine auf dem Handy. Dazwischen
     entscheidet der verfügbare Platz. */
  width: calc((100% - 2 * clamp(12px, 1.5vw, 20px)) / 3);
  min-width: 280px;
}

@media (max-width: 1000px) {
  .pew-reihen > .pew-karte {
    width: calc((100% - clamp(12px, 1.5vw, 20px)) / 2);
  }
}
@media (max-width: 680px) {
  .pew-reihen > .pew-karte {
    /* Etwas schmaler als das Fenster: Die angeschnittene nächste Karte
       zeigt, dass es weitergeht. Das ersetzt jeden Hinweis. */
    width: 84%;
    min-width: 0;
  }
}

/* ---------- Pfeile und Punkte ----------
   Erzeugt js/bewertungen.js. Erscheinen nur, wenn nicht alle Karten
   gleichzeitig zu sehen sind. */

.pew-bedienung {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}

.pewb-pfeil {
  font: inherit;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(90, 60, 35, 0.16);
  background: var(--white);
  color: var(--charcoal);
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.pewb-pfeil:hover:not(:disabled) {
  border-color: var(--orange);
  background: var(--cream);
}
.pewb-pfeil:disabled { opacity: 0.3; cursor: default; }

.pewb-punkte {
  display: flex;
  align-items: center;
  gap: 7px;
}
.pewb-punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(90, 60, 35, 0.22);
  transition: background 0.24s ease, width 0.24s ease;
}
.pewb-punkt.ist-da {
  width: 22px;
  border-radius: 999px;
  background: var(--orange);
}

@media (prefers-reduced-motion: reduce) {
  .pew-reihen { scroll-behavior: auto; }
  .pewb-punkt, .pewb-pfeil { transition: none; }
}

.pew-karte {
  flex: 0 0 clamp(270px, 27vw, 360px);
  user-select: none; -webkit-user-select: none;
}

/* ---------- Die Karte selbst ----------
   Gilt in beiden Zuständen, im Raster wie im Band. */

.pew-karte {
  margin: 0;
  background: var(--offwhite);
  border: 1px solid rgba(90,60,35,0.10);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  padding: clamp(22px, 2.2vw, 30px);
  display: flex; flex-direction: column;
}

.pewk-sterne {
  color: var(--orange);
  font-size: 0.85rem; letter-spacing: 0.12em;
  line-height: 1; margin-bottom: 14px;
}

.pew-karte blockquote {
  font-family: var(--sans);
  font-size: 0.92rem; color: #5F4E42;
  line-height: 1.65;
  margin: 0 0 18px; padding: 0; border: none;
  flex: 1;
}

.pew-karte figcaption {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(90,60,35,0.10);
}

.pewk-name {
  font-family: var(--sans);
  font-size: 0.84rem; font-weight: 600; color: var(--charcoal);
}

.pewk-quelle {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange-dark);
}

/* ---------- Breiten ----------
   Die Kartenbreiten stehen jetzt oben beim Slider. Die alten Regeln für
   .ist-band sind entfallen — die Klasse gibt es nicht mehr. */

@media (max-width: 640px) {
  .pe-zeile { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pez-link .btn-arrow { transition: none; }
}