/* ═════════════════════════════════════════════════════════════════════════
   Kundenstimmen

   Echte Google-Rezensionen, wörtlich zitiert. Ausgelassenes steht als […],
   damit erkennbar bleibt, dass gekürzt wurde und nicht umformuliert.

   Grossformat statt Kartenraster: zwei Stimmen, jede über die volle Breite,
   freigestelltes Portrait und Zitat nebeneinander — bei der ersten Karte das
   Bild links, bei der zweiten rechts. Zwei ausführliche Stimmen mit Gesicht
   tragen mehr als fünf kurze, von denen drei niemanden nennen.

   Die Flächen sind dieselben Töne, die auch die Referenzkarten tragen
   (--reference-purple, --reference-blue). Damit gehört die Sektion sichtbar
   zum Beweisteil der Seite und nicht zu den Systemabschnitten.

   Die Portraits sind freigestellt und sitzen auf der Grundlinie der Karte,
   nicht in einem Rahmen: ein Kasten im Kasten würde die Fläche zerteilen und
   die Person zur Bebilderung degradieren.

   Die Bewertung steht einmal über der Überschrift statt in jeder Karte —
   fünfmal dieselben fünf Sterne lesen sich wie Deko, und die Wertung gilt dem
   Profil, nicht der einzelnen Stimme.
   ═════════════════════════════════════════════════════════════════════════ */

.stimmen {
  --stimme-blau: #317093;
  --stimme-tuerkis: var(--sicht-fl, #0E8A97);
  --stimme-flaeche: var(--flaeche, #FBFAF8);
  /* Oben und unten derselbe Wert: die Sektion steht zwischen zwei fremden
     Abschnitten und darf an keine der beiden Kanten kleben. */
  padding-block: clamp(72px, 9vw, 132px);
}

/* ── Kopf ─────────────────────────────────────────────────────────────────
   Die Wertung ersetzt die Rubrikzeile. Blau statt Gold: Es geht um eine
   belegte Zahl, nicht um Auszeichnungsoptik — und die Zahl ist zugleich der
   Weg zum echten Profil. */
.stimmen__kopf { max-width: 760px; margin-bottom: clamp(34px, 4.4vw, 60px); }

.stimmen__wert { margin: 0 0 14px; line-height: 1; }
.stimmen__wert a {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  color: var(--stimme-blau);
  text-decoration: none;
}
.stimmen__sterne {
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--stimme-blau);
}
.stimmen__wertung { font-size: 16px; letter-spacing: -0.01em; }
.stimmen__wertung b { font-weight: 700; font-size: 19px; }
.stimmen__wert a:hover .stimmen__wertung { text-decoration: underline; text-underline-offset: 3px; }

.stimmen__kopf h2 { margin: 0; }

/* ── Liste ────────────────────────────────────────────────────────────────
   Gestapelt statt nebeneinander: jede Stimme bekommt die volle Satzbreite,
   sonst wäre das Portrait wieder nur ein Icon. */
.stimmen__liste {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
}

.stimme {
  --stimme-ton: var(--reference-purple, #eae7ff);
  position: relative;
  display: grid;
  grid-template-columns: clamp(250px, 33%, 430px) minmax(0, 1fr);
  align-items: end;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(28px, 3.4vw, 52px) clamp(24px, 3.2vw, 52px) 0;
  min-height: clamp(300px, 27vw, 420px);
  border-radius: 22px;
  background: var(--stimme-ton);
  overflow: hidden;
}
.stimme--lila    { --stimme-ton: var(--reference-purple, #eae7ff); }
.stimme--tuerkis { --stimme-ton: var(--reference-blue, #ddf8fa); }

/* Die Spaltenfolge kommt aus der Klasse, nicht aus der Reihenfolge im Markup:
   so bleibt im Quelltext beide Male das Zitat der Hauptinhalt und das Bild die
   Beigabe — auch bei der Karte, in der das Bild links steht. */
.stimme--bild-rechts { grid-template-columns: minmax(0, 1fr) clamp(250px, 33%, 430px); }

/* Das Wort traegt die Karte: es sitzt nicht unten, sondern verteilt sich ueber
   die volle Hoehe — Sterne oben, Zitat in der Mitte, Name unten. Sonst bliebe
   neben einem grossen Portrait eine leere obere Haelfte. */
.stimme__wort {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.5vw, 20px);
  padding-block: clamp(28px, 3.4vw, 52px);
}

.stimme .stimme__sterne {
  color: var(--stimme-tuerkis);
  font-size: clamp(22px, 2.1vw, 30px);
  letter-spacing: 0.08em;
  line-height: 1;
}

.stimme__text { margin: 0; }
.stimme__text p {
  margin: 0;
  font-family: var(--zitat, "Newsreader", Georgia, serif);
  font-weight: 500;
  font-size: clamp(20px, 2.05vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink, #19191C);
  text-wrap: pretty;
}
/* Die Auslassung soll man sehen, aber nicht lesen müssen. */
.stimme__text .aus { color: color-mix(in srgb, var(--ink, #19191C) 42%, transparent); }

.stimme__wer { display: block; margin-top: 0; }
.stimme__name {
  display: block;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink, #19191C);
}
.stimme__rolle {
  display: block;
  margin-top: 3px;
  font-size: clamp(13px, 1vw, 14.5px);
  color: color-mix(in srgb, var(--ink, #19191C) 62%, transparent);
  line-height: 1.4;
}

/* ── Portrait ─────────────────────────────────────────────────────────────
   Freigestellt, auf der Grundlinie stehend. `align-self: end` plus der
   fehlende Innenabstand nach unten lassen die Person aus der Fläche
   herauswachsen, statt in ihr zu schweben. */
.stimme__bild { align-self: end; justify-self: end; }
.stimme--bild-links .stimme__bild { justify-self: start; }
/* Herzbergs Aufnahme endet knapp unter der Schulter; freigestellt wirkt die
   Kante wie abgerundet. Ein Stueck unter die Kartenkante geschoben, faellt das
   nicht mehr auf — die Karte schneidet, nicht der Freisteller. */
.stimme__bild--tief { margin-bottom: clamp(-42px, -3.4vw, -22px); }
.stimme__bild img {
  display: block;
  width: 100%;
  height: auto;
  /* Die Grenze ist die Kartenhoehe, nicht die Bildbreite: beide Portraits
     haben ein anderes Seitenverhaeltnis (Herzberg fast quadratisch, Lindenthal
     hochkant). Ohne feste Hoehe waere eines doppelt so gross wie das andere. */
  max-height: clamp(280px, 26vw, 400px);
  object-fit: contain;
  object-position: bottom;
}

@media (max-width: 860px) {
  .stimme {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-inline: clamp(20px, 5vw, 32px);
    align-items: start;
  }
  /* Auf dem Handy steht das Bild über dem Zitat und wird schmaler: ein
     bodenständiges Portrait in voller Breite schöbe den Text unter den Falz. */
  .stimme__bild {
    order: -1;
    justify-self: start;
    margin-bottom: -4px;
  }
  .stimme__bild img { max-height: 190px; width: auto; }
  .stimme__wort { padding-bottom: clamp(24px, 6vw, 34px); }
}

/* ── Altbestand: rundes Portrait ──────────────────────────────────────────
   Die Sprachfassungen unter /en/, /fr/, /zh/ und /ar/ tragen noch das alte
   Markup mit .stimme__portrait und .stimme__logo in der Fusszeile der Karte.
   Ohne diese Regeln wuerde das Portrait dort unskaliert in voller Breite
   stehen. Entfaellt, sobald die Sprachfassungen nachgezogen oder aus dem
   Auftritt genommen sind. */
.stimme__portrait {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--stimme-flaeche, #FBFAF8);
}
.stimme__wer:has(.stimme__portrait),
.stimme__wer:has(.stimme__logo) { display: flex; align-items: center; gap: 14px; }
.stimme__logo {
  flex: 0 0 auto;
  min-width: 44px; height: 44px;
  padding-inline: 10px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--stimme-flaeche, #FBFAF8);
  overflow: hidden;
}
.stimme__logo img { max-width: 96px; max-height: 22px; width: auto; height: auto; display: block; }
.stimme__quelle { font-size: 12.5px; color: var(--stimme-blau, #317093); font-weight: 500; }
.stimme__sterne { color: var(--stimme-blau, #317093); font-size: 15px; letter-spacing: 0.14em; line-height: 1; }

/* ── Schmale Fassung unter dem Formular ───────────────────────────────────
   Auf der Prüfungsseite darf nichts vom Formular ablenken: kleinere Schrift,
   kein Portrait, nur eine Trennlinie nach oben. */
.stimmen--schmal {
  border-top: 1px solid var(--line);
  padding-block: clamp(30px, 4.5vh, 52px);
}
.stimmen--schmal .stimmen__kopf { margin-bottom: clamp(20px, 2.6vw, 30px); }
.stimmen--schmal .stimmen__kopf h2 {
  font-weight: 700;
  font-size: clamp(19px, 1.7vw, 23px);
  letter-spacing: -0.035em;
}
.stimmen--schmal .stimmen__sterne { font-size: 20px; }
/* Nach verfügbarem Platz statt nach Fensterbreite: der Textkörper der
   Prüfungsseite ist schmaler als das Fenster, zwei feste Spalten ergäben dort
   zwei 220-px-Säulen mit Flatterrand. */
.stimmen--schmal .stimmen__liste {
  /* min() als Untergrenze, sonst erzwingt minmax() bei einem Container unter
     300 px eine Spalte, die breiter ist als ihr Elternteil — Seitenüberlauf. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.stimmen--schmal .stimme {
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(20px, 2.2vw, 28px);
  min-height: 0;
  border-radius: 16px;
}
.stimmen--schmal .stimme__wort { padding-block: 0; gap: 10px; }
.stimmen--schmal .stimme__text p { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.45; }
.stimmen--schmal .stimme__bild { display: none; }