/* ─────────────────────────────────────────────────────────────────
   Kundenstimmen

   Farben kommen aus den Flächen-Tokens in _basis.css - hier steht
   keine einzige eigene Farbe. Damit tragen die Stimmen auf jedem
   Grund, auch auf dunkel und auf der Akzentfläche.
   ───────────────────────────────────────────────────────────────── */

.lt-st{padding:64px 0}

.lt-st__kopf{margin:0 auto 34px;max-width:44rem;text-align:center}
.lt-st__titel{font-family:var(--schrift_titel);
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15;margin:0;
  color:var(--auf-flaeche-stark);text-wrap:balance}

/* ── Gesamtnote ──────────────────────────────────────────────────
   Zahl, Sterne und Herkunft in einer Zeile. Die Herkunft gehört
   dazu: Eine Note ohne Quelle wirkt selbst vergeben. */
/* Drei Zeilen übereinander, alle mittig: Zahl, Sterne, Anzahl.

   Vorher standen sie nebeneinander - dann steht die große Zahl links
   und schiebt die Sterne aus der Mitte, und der Zusatz hängt rechts
   daneben wie ein Nachtrag. Untereinander liest es sich als eine
   Aussage: so gut, so viele.

   Die Sterne sind die Mitte der Anordnung, weil sie das Erste sind,
   was man sieht. Zahl und Anzahl richten sich daran aus. */
.lt-st__note{display:flex;flex-direction:column;align-items:center;
  gap:6px;margin-top:16px}
.lt-st__zahl{font-family:var(--schrift_titel);font-size:2.6rem;line-height:1;
  color:var(--auf-flaeche-akzent)}

/* Etwas größer als in den Karten: Hier tragen die Sterne die Aussage,
   dort begleiten sie nur eine einzelne Stimme. */
.lt-st__note .lt-st__stern{width:1.3em;height:1.3em}

.lt-st__woher{font-size:.84rem;color:var(--auf-flaeche-schwach)}

/* ── Sterne ──────────────────────────────────────────────────────
   Der halbe Stern entsteht aus einem Verlauf, nicht aus einem
   zweiten Zeichen: halb gefüllt, halb durchsichtig, exakt an der
   Mitte. Ein "halber Stern" als eigene Form säße bei anderer Größe
   schief. */
.lt-st__sterne{display:inline-flex;gap:2px;flex:0 0 auto}
.lt-st__stern{width:1.05em;height:1.05em;flex:0 0 auto}
.lt-st__stern--voll{fill:var(--auf-flaeche-akzent)}
.lt-st__stern--leer{fill:var(--auf-flaeche-linie)}
.lt-st__stern--halb{fill:url(#lt-st-halb)}
/* Ohne Verlaufsdefinition im Dokument bliebe der halbe Stern
   unsichtbar - deshalb als Rückfall die Kante hart in der Mitte. */
.lt-st__stern--halb{fill:var(--auf-flaeche-akzent);clip-path:inset(0 50% 0 0)}

/* Für Vorleseprogramme, nicht fürs Auge. */
.lt-st__lesbar{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* ── Eine Stimme ─────────────────────────────────────────────────*/
/* Die Karte trägt drei Dinge, die sie vom grauen Kasten abheben -
   alle drei aus den Flächen-Tokens, damit sie auf jedem Grund
   funktionieren:

   1. Eine Akzentkante oben. Zwei Pixel genügen; sie gibt der Karte
      eine Leserichtung, ohne Farbe in die Fläche zu tragen.
   2. Ein großes Anführungszeichen als Zierde im Hintergrund.
   3. Ein leichtes Anheben beim Überfahren - nur am Zeiger, denn auf
      dem Telefon gibt es kein Überfahren, dort wäre es ein
      Hängenbleiben nach dem Tippen. */
.lt-st__karte{margin:0;padding:26px 26px 22px;border-radius:var(--radius);
  background:var(--auf-flaeche-grund);
  border:1px solid var(--auf-flaeche-linie);
  display:flex;flex-direction:column;gap:14px;
  position:relative;overflow:hidden;
  transition:transform .18s ease-out, border-color .18s ease-out}

.lt-st__karte::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--auf-flaeche-akzent);opacity:.7}

/* Das große Zeichen liegt HINTER dem Text, nicht davor: als Zierde
   angeschnitten in der Ecke. Ein Anführungszeichen vor dem ersten
   Wort schiebt die Zeile ein und sieht bei zwei Zeilen schief aus. */
.lt-st__karte::after{content:'„';position:absolute;top:-18px;right:10px;
  font-family:var(--schrift_titel);font-size:7rem;line-height:1;
  color:var(--auf-flaeche-akzent);opacity:.08;pointer-events:none}

@media(hover:hover){
  .lt-st__karte:hover{transform:translateY(-3px);
    border-color:var(--auf-flaeche-akzent)}
}

.lt-st__text{margin:0;font-size:1rem;line-height:1.65;
  color:var(--auf-flaeche-stark);position:relative}

/* Trennlinie über dem Namen: Sie schließt das Zitat ab, damit Name
   und Ort nicht wie ein weiterer Satz daraus wirken. */
.lt-st__wer{display:flex;align-items:center;gap:11px;margin-top:auto;
  padding-top:14px;border-top:1px solid var(--auf-flaeche-linie)}
.lt-st__bild{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid var(--auf-flaeche-akzent)}
/* Ohne Bild der Anfangsbuchstabe - gleiche Maße wie das Porträt,
   damit die Karten auf einer Linie stehen. */
.lt-st__initial{width:42px;height:42px;flex:0 0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--schrift_titel);font-size:1.15rem;line-height:1;
  color:var(--auf-flaeche-marke-text);background:var(--auf-flaeche-marke)}
.lt-st__wer strong{display:block;font-size:.88rem;font-weight:600;
  color:var(--auf-flaeche-stark)}
.lt-st__wer small{display:block;font-size:.76rem;color:var(--auf-flaeche-schwach)}

/* ── Wischreihe ──────────────────────────────────────────────────
   Einrastpunkte statt Karussell: Der Leser bestimmt das Tempo, es
   läuft nichts von allein weg, und es braucht kein Skript.

   Die Karten sind bewusst schmaler als der Bildschirm - die
   angeschnittene nächste Karte ist der einzige Hinweis darauf, dass
   es weitergeht. Passen sie genau, wischt niemand. */
.lt-st--reihe .lt-st__liste{display:flex;gap:18px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding-bottom:4px;
  /* Keine Leiste. Sie stand quer unter den Karten und sah aus wie
     ein Fehler im Aufbau - auf dem Telefon zeigt sie das System
     ohnehin nur beim Wischen, am Schreibtisch dauerhaft.

     Dass es weitergeht, sagt stattdessen die angeschnittene nächste
     Karte und der Schleier am rechten Rand. */
  scrollbar-width:none;-ms-overflow-style:none}
.lt-st--reihe .lt-st__liste::-webkit-scrollbar{display:none}

.lt-st--reihe .lt-st__karte{flex:0 0 min(340px, 82%);scroll-snap-align:start}

/* Der Schleier: zeigt an, dass rechts noch etwas kommt. Er liegt in
   der Grundfarbe der Fläche und wird nach rechts undurchsichtig -
   deshalb --auf-flaeche-grund und nicht eine feste Farbe, sonst
   stünde auf dunklem Grund ein heller Balken. */
/* Die Bahn umschließt Liste und Knöpfe - der Schleier hing vorher am
   ganzen Wrap und lag damit auch über der Überschrift. */
.lt-st__bahn{position:relative}

.lt-st--reihe .lt-st__bahn::after{content:'';position:absolute;
  top:0;right:0;bottom:0;width:56px;pointer-events:none;
  opacity:1;transition:opacity .2s;
  background:linear-gradient(to right, transparent,
    color-mix(in srgb, var(--auf-flaeche-grund) 85%, transparent));
}
/* Am Ende der Reihe kein Schleier - dort kommt nichts mehr. */
.lt-st__bahn.am-ende::after{opacity:0}

/* ── Pfeilknöpfe ─────────────────────────────────────────────────
   Maße und Lage stehen AUSSERHALB der Medienabfrage.

   Vorher steckte alles darin - griff sie nicht, standen zwei nackte
   Knöpfe ohne Größe und ohne Lage oben links in der Ecke. Genau das
   war zu sehen. Jetzt ist die Grundgestalt immer da; die Abfrage
   entscheidet nur noch, OB sie erscheinen. */
.lt-st__pfeil{
  display:none;align-items:center;justify-content:center;
  position:absolute;top:calc(50% - 9px);transform:translateY(-50%);
  z-index:3;width:44px;height:44px;padding:0;
  border-radius:50%;cursor:pointer;
  border:1px solid var(--auf-flaeche-linie);
  background:var(--auf-flaeche-grund);
  color:var(--auf-flaeche-stark);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:opacity .2s, visibility .2s, transform .15s, border-color .15s;
}
/* Feste Maße für das Zeichen: Ohne sie zieht sich ein SVG ohne
   Breitenangabe auf null zusammen - der Knopf war leer. */
.lt-st__pfeil svg{width:20px;height:20px;display:block;flex:0 0 auto}

.lt-st__pfeil:hover{border-color:var(--auf-flaeche-akzent);
  color:var(--auf-flaeche-akzent);transform:translateY(-50%) scale(1.06)}

.lt-st__pfeil--links{left:-16px}
.lt-st__pfeil--rechts{right:-16px}

/* Nur am Zeiger und mit Platz: Auf dem Telefon ist Wischen die
   natürliche Geste, dort nähmen zwei Kreise Raum weg. */
@media(hover:hover) and (min-width:761px){
  .lt-st--reihe .lt-st__pfeil{display:flex}
}

/* Ein Knopf, der ins Leere führt, verschwindet. */
.lt-st__bahn.am-anfang .lt-st__pfeil--links,
.lt-st__bahn.am-ende .lt-st__pfeil--rechts,
.lt-st__bahn.ohne-pfeile .lt-st__pfeil{
  opacity:0;visibility:hidden;pointer-events:none}

/* Damit die Kreise am Rand nicht über die Karten ragen, bekommt die
   Reihe innen Luft - und der Schleier endet vor dem rechten Knopf. */
@media(hover:hover) and (min-width:761px){
  .lt-st--reihe .lt-st__bahn{padding-inline:6px}
}

/* ── Raster ──────────────────────────────────────────────────────*/
.lt-st--raster .lt-st__liste{display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:stretch}

/* ── Eine große vorweg ───────────────────────────────────────────
   Die erste Stimme über die volle Breite und größer gesetzt, die
   übrigen darunter. Für den Fall, dass eine Bewertung besonders gut
   trägt - und weil eine Reihe gleich großer Karten schnell wie ein
   Formular aussieht. */
.lt-st--gross .lt-st__liste{display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.lt-st--gross .lt-st__karte:first-child{grid-column:1/-1;padding:30px 34px}
.lt-st--gross .lt-st__karte:first-child .lt-st__text{
  font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.55}

@media(max-width:600px){
  .lt-st{padding:44px 0}
  .lt-st__karte{padding:18px 20px}
  .lt-st__zahl{font-size:1.9rem}
}

/* ── Teaser zu den Google-Bewertungen ────────────────────────────
   Dieselbe Form wie eine Stimme, aber gefüllt statt umrandet: Sie
   steht am Ende der Reihe und soll als Abschluss wirken, nicht als
   weitere Meinung. Wer bis hierher gelesen hat, will mehr sehen.

   Farben wieder aus den Tokens - die Karte trägt damit auf jedem
   Grund, auch auf der Akzentfläche, wo eine gefüllte Fläche in
   Akzentfarbe unsichtbar wäre. */
.lt-st__karte--google{
  text-decoration:none;
  background:color-mix(in srgb, var(--auf-flaeche-akzent) 10%, transparent);
  border-color:var(--auf-flaeche-akzent);
  align-items:center;text-align:center;justify-content:center;gap:10px;
}
/* Kein Anführungszeichen und keine Kante: Hier wird nichts zitiert. */
.lt-st__karte--google::before,
.lt-st__karte--google::after{content:none}

.lt-st__gkopf{display:flex;align-items:center;gap:7px;
  font-size:.8rem;font-weight:600;color:var(--auf-flaeche-schwach);
  letter-spacing:.02em}
.lt-st__gicon{width:17px;height:17px;flex:0 0 auto;color:var(--auf-flaeche-akzent)}

.lt-st__gnote{display:flex;flex-direction:column;align-items:center;gap:5px}
.lt-st__gnote strong{font-family:var(--schrift_titel);font-size:2.4rem;
  line-height:1;font-weight:400;color:var(--auf-flaeche-akzent)}
.lt-st__gnote .lt-st__stern{width:1.15em;height:1.15em}

.lt-st__gzahl{font-size:.82rem;color:var(--auf-flaeche-schwach)}

/* Der Verweis sieht aus wie ein Knopf, ist aber keiner - die ganze
   Karte ist der Verweis. Ein Knopf IM Verweis wäre ein zweites
   Ziel im selben Ziel. */
.lt-st__gcta{display:inline-flex;align-items:center;gap:6px;
  margin-top:2px;padding:9px 16px;border-radius:var(--radius-knopf, 7px);
  background:var(--auf-flaeche-marke);color:var(--auf-flaeche-marke-text);
  font-size:.84rem;font-weight:700}
.lt-st__gcta::after{content:'→';font-weight:400}
.lt-st__karte--google:hover .lt-st__gcta{filter:brightness(1.08)}

/* Der Hinweis erscheint nur in der Vorschau des Editors - siehe
   render.php. Er sieht bewusst nach Notiz aus und nicht nach
   Seiteninhalt: gestrichelt, kleiner, ohne Akzentfarbe. */
/* Standardmäßig unsichtbar - nur im Editorrahmen zeigt das CMS die
   Klasse lt-vorschau am Dokument. */
.lt-st__ghinweis{display:none}
/* Bei Entwürfen dauerhaft sichtbar - siehe render.php. */
.lt-st__ghinweis--immer{display:block}
.lt-vorschau .lt-st__ghinweis,
.lt-st__ghinweis--immer{display:block;margin-top:6px;padding:8px 10px;
  border:1px dashed var(--auf-flaeche-linie);border-radius:6px;
  font-size:.72rem;line-height:1.45;color:var(--auf-flaeche-schwach);
  max-width:26rem}