/* ===========================================================================
   KUNDENSTIMMEN  (#bewertungen)

   Neu gebaut am 24.08.2026 nach einer Vorlage des Kunden — Aufbau, Farbigkeit
   und Bedienung sind daraus 1:1 uebernommen.

   WAS SICH GEGENUEBER DEM STAND VON HEUTE FRUEH GEAENDERT HAT, und zwar auf
   ausdrueckliche Ansage:
     — Die Karten sind wieder HELL (Creme mit goldener Haarlinie) statt navy.
     — Die Initialenkreise sind wieder NAVY statt bunt wie bei Google.
     — Die Sterne stehen in Gold statt im Sandton.
     — Die Reihe laeuft NICHT mehr von allein. Geblaettert wird ueber zwei
       Pfeile und die Punkte darunter.
   Wer das rueckgaengig machen will, findet beide Staende in der
   Versionsgeschichte.

   ZUR TYPOGRAFIE DER KARTE, von oben nach unten:
     Kreis mit Initialen — Sterne — Zitatzeile — Fliesstext —
     „Vollständige Bewertung" — Name — Quellenzeile mit Google-G.

   Die Zitatzeile ist ein WOERTLICHER AUSSCHNITT aus derselben Rezension, kein
   zusammengefasster Satz. Die Vorlage zeigt dort sinngemaess umgeschriebene
   Saetze; das waere eine erfundene Kundenaussage.
   =========================================================================== */

.ref {
  /* ===== Farben =========================================================
     Gemessen gegen den Cremegrund #F7F3EC:
       Navy #102949 (Ueberschrift, Name)          14.02:1
       --ink-mute #5F6E85 (Fliesstext)             4.89:1
       --gold-text #86693A (Zitat, Link, Eyebrow)  4.53:1
       --gold #A8874F (Sterne, Haarlinien)         3.16:1 — nichttextlich,
                                                   dort gelten 3:1
     ==================================================================== */
  /* 30.08.2026 von #F7F3EC auf #F7F3F0 gezogen — vier Einheiten im
     Blaukanal. Grund: der Abschnitt darunter (#warum-immobilien) beginnt
     auf --fl-creme #F7F3F0 und faehrt von dort ueber seine volle Hoehe nach
     Weiss. Standen hier weiter #F7F3EC, blieb an der Naht eine Stufe von
     vier Einheiten stehen — sichtbar wird sie kaum, aber die Regel aus
     base.css misst Stufen, nicht Augenmass. Jetzt treffen zwei gleiche
     Werte aufeinander und die Naht existiert nicht mehr.
     Der Wert wirkt auch auf ueber-estera.html und
     karriere-immobilienberater.html; dort steht der Abschnitt zwischen
     denselben hellen Flaechen, vier Einheiten aendern daran nichts. */
  --rez-grund:    #F7F3F0;   /* Creme der Section und der Karten            */
  --rez-linie:    rgba(168, 135, 79, 0.42);   /* Goldhaarlinie am Kartenrand */
  --rez-portraet: clamp(50px, 4vw, 58px);     /* Durchmesser des Kreises     */
  --rez-luft:     clamp(20px, 1.8vw, 30px);   /* Innenrand der Karte         */
  --rez-abstand:  clamp(16px, 1.5vw, 24px);   /* Abstand zwischen den Karten */
  /* VON 4 AUF 3 — 01.09.2026, Optimierungsbriefing, Abschnitt 04: „Pro
     Karte weniger sichtbare Zeilen verwenden, damit die Karten nicht hoeher
     werden." Die Schrift des Auszugs ist von 14,4 auf 17,6 px gewachsen,
     der Zeilenabstand von 1,62 auf 1,7; vier Zeilen davon waeren 120 statt
     93 px. Drei Zeilen sind 90 px — die Karte bleibt gleich hoch.
     Gemessen vorher/nachher steht im Bericht vom 01.09.2026. */
  --rez-zeilen:   3;         /* sichtbare Zeilen, bevor der Aufklapper greift */

  /* Hoehe der Kurve. Sie MUSS kleiner bleiben als der untere Innenabstand
     der Hero-Section (hero-a.css) — sonst legt sich die Kurve auf deren
     weissen Marmorkasten statt auf das Navy und ist nicht mehr zu sehen. */
  --ref-bogen-h: clamp(48px, 6vw, 92px);

  position: relative;
  z-index: 1;

  /* KEINE eigene Flaeche am Element. Sie wuerde ueber die volle Hoehe
     liegen und damit auch ueber den Bereich OBERHALB der Kurve — dort soll
     aber das dunkle Bildband der Hero-Section durchscheinen. Die Flaeche
     beginnt deshalb erst unter der Kurve, siehe .ref::after. */
  background: none;

  /* Die Section wird um die Hoehe der Kurve nach oben gezogen und legt sich
     mit ihr ueber den Abschluss der Hero-Section. Der obere Innenabstand
     holt das wieder auf, damit der Kopf nicht in die Kurve rutscht. */
  margin-top: calc(-1 * var(--ref-bogen-h));
  padding: calc(var(--ref-bogen-h) + clamp(2.4rem, 6vh, 4.5rem)) 0 clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;   /* die Reihe darf die Seite nicht verbreitern */
}

/* Die Flaeche UNTER der Kurve: Creme mit einem Hauch Marmor.
   Der Marmor liegt als eigene, sehr blasse Lage darauf statt als
   Hintergrundbild mit Deckkraft — `opacity` am Element wuerde den Text
   mitnehmen. Ein Pixel Ueberlappung nach oben, sonst blitzt bei manchen
   Bildschirmskalierungen eine Haarlinie zwischen Kurve und Flaeche durch. */
.ref::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--ref-bogen-h) - 1px);
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(247, 243, 240, 0.88), rgba(247, 243, 240, 0.88)),
    var(--rez-grund) url('../img/marble2.jpg') center / cover no-repeat;
}
.ref__inner {
  position: relative;
  z-index: 1;
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------------------------------------------------------------------------
   Der geschwungene obere Rand.

   Er liegt als SVG ganz oben in der Section und ist in der Cremefarbe
   gefuellt; darunter schaut das dunkle Bildband der Hero-Section hervor.
   `preserveAspectRatio="none"` laesst die Kurve mit der Fensterbreite
   mitgehen — sonst wuerde sie an den Seiten beschnitten und der Schwung
   waere bei jeder Breite ein anderer.

   Ein Pixel Ueberstand nach oben und unten (`top: -1px`, Hoehe plus 2):
   sonst blitzt bei manchen Bildschirmskalierungen eine Haarlinie zwischen
   Kurve und Flaeche durch.
--------------------------------------------------------------------------- */
.ref__bogen {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: var(--ref-bogen-h);
  display: block;
}
.ref__bogen path { fill: var(--rez-grund); }

/* ---------------------------------------------------------------------------
   1 — Kopf, mittig
--------------------------------------------------------------------------- */
.ref__kopf {
  max-width: 62rem;
  margin: 0 auto clamp(2.2rem, 4.5vh, 3.4rem);
  text-align: center;
}
.ref__eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(0.78rem, 0.85vw, 0.86rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em;   /* gleicht die Sperrung hinter dem letzten Zeichen aus */
  text-transform: uppercase;
  color: var(--gold-text);
}
/* Die kurze Goldlinie unter der Kleinzeile — dieselbe Sprache wie .rule-gold. */
.ref__strich {
  display: block;
  width: 34px;
  height: 1px;
  margin: clamp(0.6rem, 1.2vh, 0.9rem) auto 0;
  background: var(--gold);
  opacity: 0.8;
}
.ref__h2 {
  margin-top: clamp(0.9rem, 2vh, 1.5rem);
  font-size: clamp(1.9rem, 3.3vw, 3.15rem);
  line-height: 1.08;
  color: var(--navy-800);
  text-wrap: balance;
}
.ref__lead {
  margin: clamp(0.7rem, 1.5vh, 1.1rem) auto 0;
  max-width: 44rem;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.08vw, 1.12rem);
  line-height: 1.6;
  color: var(--ink-mute);
}

/* --- Die Google-Zeile ----------------------------------------------------- */
.ref__siegel {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.6rem, 1vw, 0.9rem);
  margin-top: clamp(1.2rem, 2.6vh, 1.9rem);
  padding: 4px 2px;
  transition: opacity 0.4s var(--ease);
}
.ref__siegel:hover { opacity: 0.78; }
.ref__siegel .rez__g { width: 26px; height: 26px; }
.ref__siegel-sterne { display: flex; gap: 3px; }
.ref__siegel-sterne svg { width: 17px; height: 17px; fill: var(--gold); }
.ref__siegel-wert,
.ref__siegel-zahl {
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.06vw, 1.08rem);
  font-weight: 500;
  color: var(--navy-800);
}
/* Der senkrechte Teiler zwischen Note und Anzahl, wie in der Vorlage. */
.ref__siegel-teiler {
  width: 1px;
  height: 1.1em;
  background: rgba(16, 41, 73, 0.28);
}

/* Einlauf: sichtbar ist der Ausgangszustand, ausgeblendet wird erst, wenn
   site.js `is-ready` gesetzt hat. Ohne Javascript steht der Kopf sofort da.
   Dieselbe Umkehr wie in schluss.css. */
/* 0,85 s -> 0,5 s, 16 -> 14 px — Optimierungsbriefing 01.09.2026, P0. */
.ref__kopf[data-reveal] { opacity: 1; transform: none; }
.is-ready .ref__kopf[data-reveal] { opacity: 0; transform: translateY(14px); }
.is-ready .ref__kopf[data-reveal][data-seen='true'] {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft);
}

/* ---------------------------------------------------------------------------
   2 — Das Karussell

   Aufbau: Pfeil, Fenster, Pfeil in einer Reihe. Das Fenster ist beschnitten,
   die Spur darin wird verschoben. Wie weit, rechnet `rezensionen.js` — die
   Kartenbreite ergibt sich aus dem Raster und ist in CSS nicht bekannt.
--------------------------------------------------------------------------- */
.rez__karussell {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.6rem);
}

.rez__pfeil {
  flex: none;
  width: clamp(34px, 3vw, 44px);
  height: clamp(34px, 3vw, 44px);
  display: grid;
  place-items: center;
  color: var(--navy-800);
  border-radius: 50%;
  transition: color 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease);
}
.rez__pfeil svg {
  width: 60%;
  height: 60%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rez__pfeil:hover { background: rgba(16, 41, 73, 0.07); }
/* Am Anfang und am Ende: der Pfeil bleibt stehen, wird aber sichtbar
   wirkungslos. `disabled` statt Ausblenden — sonst springt die Reihe. */
.rez__pfeil[disabled] { opacity: 0.22; cursor: default; }
.rez__pfeil[disabled]:hover { background: none; }

.rez__fenster {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* Die Karten haben oben einen Kreis, der ueber die Kante ragt; ohne diesen
     Rand wuerde er beschnitten. */
  padding: calc(var(--rez-portraet) / 2 + 6px) 0 10px;
  margin: calc(var(--rez-portraet) / -2 - 6px) 0 -10px;
}
/* Ohne Javascript bleibt das Fenster seitlich schiebbar — dann sind die
   Pfeile wirkungslos, aber alle Rezensionen erreichbar. */
.rez__fenster:not([data-rez-bereit]) { overflow-x: auto; scrollbar-width: none; }
.rez__fenster:not([data-rez-bereit])::-webkit-scrollbar { display: none; }

.rez__spur {
  display: flex;
  align-items: stretch;   /* macht alle Karten einer Seite gleich hoch */
  gap: var(--rez-abstand);
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.6s var(--ease-soft);
}
@media (prefers-reduced-motion: reduce) {
  .rez__spur { transition: none; }
}
.rez {
  flex: none;
  /* Wie viele nebeneinander stehen, setzt rezensionen.js als --rez-proseite.
     Der Rueckfall 3 gilt, solange das Skript noch nicht gerechnet hat. */
  width: calc((100% - (var(--rez-proseite, 3) - 1) * var(--rez-abstand)) / var(--rez-proseite, 3));
  display: flex;
}

/* --- Die Karte ------------------------------------------------------------ */
.rez__karte {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--rez-portraet) / 2 + var(--rez-luft) * 0.8) var(--rez-luft) var(--rez-luft);
  border: 1px solid var(--rez-linie);
  border-radius: 12px;
  background: var(--rez-grund);
  text-align: center;
}

/* Der Kreis ragt zur Haelfte ueber die Oberkante. */
.rez__bild {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--rez-portraet);
  height: var(--rez-portraet);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy-800);
  display: grid;
  place-items: center;
}
.rez__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.rez__initialen {
  font-family: var(--font-display);
  font-size: calc(var(--rez-portraet) * 0.36);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #FFFFFF;          /* 15.51:1 auf Navy */
  font-variant-numeric: lining-nums;
}

/* Fuenf Sterne in Gold. Im Markup stehen immer fuenf; wie viele GEFUELLT
   sind, sagt allein data-sterne am <p> — ohne Javascript und ohne SVG-Arbeit.
   WICHTIG: aria-label am selben <p> mitaendern. */
.rez__sterne {
  display: flex;
  gap: 5px;
  margin-bottom: clamp(11px, 1.3vh, 15px);
}
.rez__sterne svg { width: 17px; height: 17px; fill: var(--gold); }
.rez__sterne[data-sterne="4"] svg:nth-of-type(n + 5),
.rez__sterne[data-sterne="3"] svg:nth-of-type(n + 4),
.rez__sterne[data-sterne="2"] svg:nth-of-type(n + 3),
.rez__sterne[data-sterne="1"] svg:nth-of-type(n + 2) { fill: rgba(16, 41, 73, 0.16); }

/* Die Zitatzeile — woertlicher Ausschnitt aus der Rezension darunter. */
.rez__zitat {
  font-family: var(--font-display);
  font-size: clamp(1.14rem, 1.28vw, 1.34rem);
  font-weight: 400;
  line-height: 1.28;
  color: var(--navy-800);
  text-wrap: balance;
  margin-bottom: clamp(10px, 1.2vh, 14px);
}

/* --- Text ----------------------------------------------------------------- */
/* Der Text steht in ORIGINALLAENGE im Dokument — gekuerzt wird nie, nur
   verdeckt. Eingeklappt zeigt die Karte --rez-zeilen Zeilen; ob das reicht,
   misst rezensionen.js je Karte und blendet den Knopf danach ein oder aus.
   Die Beschneidung haengt an [data-rez-bereit]: ohne Javascript stehen alle
   Texte vollstaendig da und es gibt keinen toten Knopf. */
/* GROESSER — 01.09.2026, Optimierungsbriefing, Abschnitt 04 („Schriftgroesse
   und Zeilenabstand der Auszuege erhoehen") und Abschnitt 19 („kein
   Fliesstext unter 16 px"). Vorher clamp(0.9rem, 0.96vw, 0.97rem) — bei
   1440 waren das 14,4 px, unter der Marke. Jetzt 16 px als Untergrenze,
   17,6 px ab 1440, Zeilenabstand 1,7. Dass die Karte dabei nicht hoeher
   wird, traegt --rez-zeilen (oben). */
.rez__text p {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.7;
  color: var(--ink-mute);
  text-wrap: pretty;
}
.rez__text p + p { margin-top: 0.7em; }

[data-rez-bereit] .rez__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--rez-zeilen);
  line-clamp: var(--rez-zeilen);
  overflow: hidden;
}
[data-rez-bereit] .rez__karte[data-offen] .rez__text {
  display: block;
  overflow: visible;
}

.rez__mehr {
  margin-top: clamp(10px, 1.2vh, 14px);
  padding: 2px 1px;
  font-family: var(--font-ui);
  /* 13,8 -> 15,4 px bei 1440 — Optimierungsbriefing 01.09.2026, Abschnitt
     19: keine Kartenzeile unter 15 px. */
  font-size: clamp(0.94rem, 1vw, 1rem);
  font-weight: 500;
  color: var(--gold-text);          /* 4.53:1 auf dem Cremegrund */
  border-bottom: 1px solid var(--rez-linie);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.rez__mehr:hover { color: var(--navy-800); border-color: var(--gold); }
.rez__mehr:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 3px;
}
.rez__mehr[hidden] { display: none; }

/* margin-top: auto schiebt Name und Quellenzeile auf die Unterkante. Weil
   alle Karten einer Seite gleich hoch sind, stehen sie damit auf einer Linie
   — auch bei sehr kurzen Rezensionen. */
.rez__name {
  margin-top: auto;
  padding-top: clamp(14px, 1.8vh, 20px);
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 1.16vw, 1.2rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--navy-800);          /* 14.02:1 auf dem Cremegrund */
}
.rez__quelle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-top: clamp(10px, 1.2vh, 14px);
  font-family: var(--font-ui);
  /* 13,4 -> 15 px — Optimierungsbriefing 01.09.2026, Abschnitt 19. */
  font-size: clamp(0.94rem, 0.98vw, 0.98rem);
  color: var(--ink-mute);
}
.rez__quelle .rez__g { width: 17px; height: 17px; }
.rez__g { display: block; }

/* ---------------------------------------------------------------------------
   3 — Die Punkte
   Anzahl und Zustand setzt rezensionen.js; ohne Javascript bleibt die Leiste
   leer und faellt damit weg.
--------------------------------------------------------------------------- */
.rez__punkte {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: clamp(1.6rem, 3.4vh, 2.4rem);
  min-height: 6px;
}
.rez__punkt {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(16, 41, 73, 0.2);
  cursor: pointer;
  transition: width 0.4s var(--ease), background 0.4s var(--ease);
}
/* Die aktive Seite ist ein Balken in Gold, nicht ein groesserer Punkt —
   so in der Vorlage. */
.rez__punkt[aria-selected='true'] {
  width: 30px;
  background: var(--gold);
}
.rez__punkt:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Umbrueche. Wie viele Karten nebeneinander stehen, entscheidet
   rezensionen.js anhand derselben Grenzen — sie stehen dort noch einmal.
--------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* 5 -> 4 mit der groesseren Schrift (01.09.2026): vier Zeilen zu 16 px
     und 1,7 sind 109 px, vorher fuenf zu 14,4 und 1,62 waren 117. */
  .ref { --rez-zeilen: 4; }
}
/* 699 und nicht 700: rezensionen.js schaltet bei `innerWidth < 700` auf EINE
   Karte je Seite. Stuende hier 700, waeren bei genau 700 px die Pfeile schon
   weg, waehrend noch zwei Karten nebeneinander stehen — die beiden Grenzen
   muessen auf demselben Pixel liegen. */
@media (max-width: 699px) {
  /* DIE PFEILE BLEIBEN JETZT AUCH AUF DEM TELEFON — 04.09.2026,
     Kundenwunsch woertlich: „Bei den einzelnen Google-Rezensionen gibt es
     keinen Pfeil nach rechts. Du musst einen Pfeil nach rechts einbauen,
     sodass man von Google-Rezension zu Google-Rezension weiterschauen
     kann."
     Hier stand `display: none` mit der Begruendung „auf dem Telefon wird
     gewischt". Das Wischen funktioniert weiterhin — aber es ist nichts zu
     sehen, was es ankuendigt, und genau das hat der Kunde beanstandet.
     Damit die zwei Knoepfe auf 342 px Kastenbreite nicht das Fenster
     auffressen, ruecken sie UNTER die Karten in eine eigene Zeile, neben
     die Punkte; die Regeln dafuer stehen am Ende dieser Datei. */
  .rez__karussell { gap: 0; }
}

/* ===========================================================================
   DIE FUENF STERNE FALLEN AUF IHRE GROESSE ZUSAMMEN — 31.08.2026

   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   DIE VORIGE GESTE IST ERSATZLOS ENTFALLEN. Die fuenf Sterne deckten sich
   ueber eine wandernde Maske von links nach rechts auf, einer nach dem
   anderen. Kundenwunsch vom 31.08.2026: die Sterne sollen „gross
   hereinkommen und dann auf ihre Groesse zusammenfallen".
   Die ganze Maskenrechnung (240 % Maskenkasten, Verlauf 45 -> 55 Prozent,
   mask-position 0 -> 100 %) ist damit gegenstandslos und mit entfernt.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

   WAS JETZT PASSIERT: die Leiste aus fuenf Sternen beginnt auf dem
   2,6-Fachen ihrer Groesse und fast durchsichtig und faellt in einem Zug
   auf ihr Mass zusammen; dabei wird sie fest. Am Ende steht sie genau
   dort, wo sie ohne jede Bewegung auch staende, neben „5,0 von 5 Sternen".

   DIE ZWEI WERTE UND WARUM SIE SO STEHEN
     Massstab  2.6 -> 1     Die Leiste ist rund 100 px breit; auf dem
                            2,6-Fachen sind das 260 px. Sie ragt damit
                            deutlich ueber das Siegel hinaus — das ist das
                            „gross hereinkommen". Mehr waere Spielerei,
                            weniger saehe man nicht.
     Deckkraft 0.1 -> 1     Ausdruecklich „leicht durchscheinend beginnen".
                            Bei 0.1 liegt der grosse Zustand als Hauch
                            ueber der Zeile daneben und macht sie nicht
                            unleserlich; die Zeile bleibt die ganze Zeit
                            zu lesen. Bei voller Groesse steht die Leiste
                            wieder deckend.
     Ursprung  Mitte        Die Leiste faellt in sich zusammen, nicht in
                            eine Ecke. `transform` aendert das Mass im
                            Fluss nicht: das Siegel bleibt waehrend der
                            ganzen Bewegung genau so breit wie danach, es
                            rueckt also nichts.

   ZEITLICH: 900 ms, Ausklingkurve, 500 ms nach dem Einlauf des Kopfes
   (`.ref__kopf` selbst braucht 0,9 s). Einmalig — `data-seen` setzt
   assets/js/site.js genau ein Mal, wenn der Kopf ins Bild kommt.

   BEWEGT WERDEN NUR `transform` UND `opacity`.
   OHNE JAVASCRIPT fehlt `.is-ready` und die Leiste steht sofort in ihrer
   Groesse; bei `reduce` ebenso.
   =========================================================================== */
.is-ready .ref__kopf[data-reveal] .ref__siegel-sterne {
  transform-origin: 50% 50%;
}
/* 900 ms nach 500 ms -> 500 ms nach 150 ms — Optimierungsbriefing
   01.09.2026, P0. Die Geste (gross herein, auf ihr Mass zusammenfallen)
   bleibt; sie ist nach 650 statt 1400 ms vorbei. */
.is-ready .ref__kopf[data-reveal][data-seen='true'] .ref__siegel-sterne {
  animation: ref-sterne 500ms 150ms var(--ease-soft) both;
}
@keyframes ref-sterne {
  from { transform: scale(2.6); opacity: 0.1; }
  to   { transform: none;       opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  /* Auch der Kopf selbst: sein Startzustand oben (0,3,0) schlaegt die
     siteweite Ruhe-Regel in leistungen.css. Bei `reduce` ist er sofort da
     — 01.09.2026, Optimierungsbriefing P0. */
  .is-ready .ref__kopf[data-reveal] { opacity: 1; transform: none; transition: none; }
  .is-ready .ref__kopf[data-reveal][data-seen='true'] .ref__siegel-sterne {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* MOBIL, 01.09.2026 — Briefing 19: Trefferflaechen. „Bewertung vollständig
   lesen" war 29 px hoch; der Daumen braucht 44. Padding statt Zeilenabstand,
   damit die Zeile nicht auseinanderrueckt. Die Karussellpunkte bekommen
   ueber einen unsichtbaren Rand eine 24-px-Trefferflaeche, ohne groesser
   auszusehen. */
@media (max-width: 899px) {
  .rez__mehr { min-height: 44px; padding-block: 0.6rem; }
  .rez__punkt { position: relative; }
  .rez__punkt::after { content: ''; position: absolute; inset: -9px; }
}

/* ===========================================================================
   DIE ZWEI BLAETTERKNOEPFE — 04.09.2026

   Kundenwunsch woertlich: „Bei den einzelnen Google-Rezensionen gibt es
   keinen Pfeil nach rechts. Du musst einen Pfeil nach rechts einbauen,
   sodass man von Google-Rezension zu Google-Rezension weiterschauen kann."

   DEN PFEIL GAB ES, ER WAR NUR NICHT ZU ERKENNEN — und das ist genau
   dasselbe. Gemessen stand er bei 1440 px als 43 x 43 px grosse Flaeche
   ganz am rechten Rand; sichtbar war davon nur ein Winkel aus zwei
   Haarlinien in Navy, ohne Kante und ohne Flaeche, mit 30 px Abstand zur
   naechsten Karte. Auf einer Seite, die sonst mit Kaesten und Kanten
   arbeitet, liest sich das als Strichzeichnung und nicht als Knopf. Auf dem
   Telefon stand er ueberhaupt auf `display: none`.

   ER WIRD JETZT EIN KNOPF: runde Flaeche in Weiss, goldene Haarlinie, der
   Winkel darin in Navy. Damit sieht er aus wie die uebrigen Bedienelemente
   des Projekts (dieselbe Kante wie .btn, derselbe Radius wie die Punkte
   darunter). Groesse 44 px — die Trefferflaeche, die das
   Optimierungsbriefing in Abschnitt 19 verlangt; vorher waren es an
   schmalen Fenstern 34.

   GEMESSENE KONTRASTE: Kante --gold auf dem Papier der Section 3,36:1
   (nichttextlich, Schwelle 3:1), der Winkel Navy auf Weiss 13,3:1. Im
   gesperrten Zustand faellt die Deckkraft auf 0,32 statt bisher 0,22 —
   0,22 auf Weiss ergab fuer die Kante 1,4:1 und liess den Knopf
   verschwinden statt ihn als „hier geht es nicht weiter" zu zeigen.
   =========================================================================== */
.rez__pfeil {
  width: 44px;
  height: 44px;
  background: var(--paper);
  border: 1px solid var(--gold);
  box-shadow: 0 1px 2px rgba(16, 41, 73, 0.06);
}
.rez__pfeil:hover { background: #FBF8F4; border-color: var(--navy-800); }
.rez__pfeil[disabled] { opacity: 0.32; }
.rez__pfeil[disabled]:hover { background: var(--paper); border-color: var(--gold); }

/* AUF DEM TELEFON STEHEN SIE UNTER DEN KARTEN, NICHT DANEBEN. Zwei Knoepfe
   von je 44 px plus Abstand haetten von den 342 px Kastenbreite 128 px
   gekostet — die Karte waere auf 214 px geschrumpft. Sie ruecken deshalb in
   die Zeile der Punkte: Pfeil links, Punkte in der Mitte, Pfeil rechts.
   Dafuer werden die zwei Knoepfe aus dem Fluss des Karussells genommen und
   ueber `position: fixed` ist hier nichts gebaut — sie bleiben im Markup,
   wo sie sind, und die Zeile darunter wird zum gemeinsamen Behaelter.
   `order` sortiert sie um das Fenster herum. */
@media (max-width: 699px) {
  .rez__karussell {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    column-gap: 10px;
  }
  .rez__fenster { grid-column: 1 / -1; grid-row: 1; }
  .rez__pfeil--zurueck { grid-column: 1; grid-row: 2; }
  .rez__pfeil--vor     { grid-column: 3; grid-row: 2; }
  .rez__karussell { row-gap: clamp(0.9rem, 3vw, 1.2rem); }
}