/* ==========================================================================
   HÖHER Block: Video-Testimonials
   ========================================================================== */

/* Symmetrisch. Vorher standen hier 96px oben und 44px unten, und weil die Section
   zweimal auf der Erfahrungsberichte-Seite steht, schwankte der senkrechte Rhythmus
   der Seite zwischen 62px und 192px, also um den Faktor 3,1. */
.video-testimonials-section{
  background-color:var(--bg-color,var(--background-white));
  padding:clamp(56px,8vw,96px) 0;
}
.video-testimonials{display:flex;flex-direction:column;gap:32px}
/* Dieselbe Skala und Zeilenhöhe wie die h2 des Themes und des Rezensionsblocks.
   Vorher clamp(28px,3.6vw,44px)/1.18: das waren bei 1440px 44px gegen 37px im Rest
   der Seite, also 7px oder 19 Prozent Sprung von Section zu Section. */
.video-testimonials__title{
  font-family:var(--font3),serif;font-weight:400;font-size:clamp(28px,6vw,37px);
  line-height:1.2973;color:var(--typography-black);margin:0;max-width:24ch;text-wrap:balance;
}
/* Fliesstext 20 (Lesbarkeit 21.10.2026, vorher 16). */
.video-testimonials__subtitle{
  font-family:var(--font4);font-size:var(--schrift-20);line-height:1.6;color:var(--typography-dark-grey);
  margin:0;max-width:64ch;
}

/* Grundzustand ohne JavaScript: Raster. Alle Karten sichtbar, nichts fehlt.
   Mit JavaScript wird daraus eine wischbare Reihe (siehe unten), weil ein Raster bei
   jeder Anzahl, die nicht auf die Spaltenzahl aufgeht, eine halb leere letzte Zeile
   hinterlaesst. Bei fuenf Videos in vier Spalten steht eine Karte allein neben einem
   Loch von drei Spaltenbreiten. */
.video-testimonials__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px}

/* Der Radius sitzt hier nicht umsonst: die Karte hat zwar weder Hintergrund noch Rahmen,
   aber der Fokusring folgt dem border-radius. Ohne ihn bekaeme die Tastaturbedienung
   ein eckiges Rechteck um eine runde Kachel. 20px, wie Thumbnail und Rezensionskarte. */
.vt-card{
  display:flex;flex-direction:column;gap:12px;text-decoration:none;
  color:var(--typography-black);border-radius:20px;
}
.vt-card:focus-visible{outline:3px solid var(--typography-black);outline-offset:4px}
/* Karte mit eigener Datei ist ein <button>, kein <a>: Browser-Grundstil weg, Rest 1:1
   von der Link-Karte uebernommen (Groesse, Ausrichtung, Cursor). */
.vt-card--datei{
  background:none;border:0;padding:0;margin:0;width:100%;text-align:left;
  font-family:inherit;cursor:pointer;
}
/* 20px statt 16px. Damit stimmen Videokachel quer, Videokachel hoch und Rezensionskarte
   ueberein, vorher hatte ausgerechnet die groesste Kachel den kleinsten Radius. */
/* Schatten weich statt Rahmen: Ghost-Card-Verbot aus claude-design-extrakt.md (Elevation
   nur einmal je Karte), derselbe Ink-getönte Low-Alpha-Ton wie hoeher-leistungen/-aktion. */
.vt-card__thumb{
  position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  background:var(--tint,var(--background-light-beige));
  box-shadow:0 6px 20px rgba(39,37,42,.08);
}
.vt-card__thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.vt-card:hover .vt-card__thumb img{transform:scale(1.03)}
.vt-card__thumb--spielt video{display:block;width:100%;height:100%;object-fit:contain;background:var(--typography-black)}
/* Weisse Pille oben links, z. B. „Job und Kind": leicht transparent statt deckend, damit
   sie als Pille ÜBER dem Bild liegt statt wie ein eigenes Etikett daneben zu wirken. */
.vt-card__tag{
  position:absolute;left:16px;top:16px;z-index:1;
  display:inline-flex;align-items:center;max-width:calc(100% - 32px);
  min-height:26px;line-height:18px;padding:4px 10px;border-radius:13px;
  background:rgba(255,255,255,.92);
  font-family:var(--font4);font-size:var(--schrift-12);font-weight:500;letter-spacing:.04em;
  color:var(--typography-black);
  /* Umbrechen statt abschneiden (Denis 23.09.2026, Dankeseite: "Bauen, Kind, Pflegedienst"
     wurde bei schmalen Karten gekappt; text-overflow greift an inline-flex ohnehin nicht). */
  white-space:normal;
}
/* Der Knopf sitzt unten links, nicht mittig. Die Thumbnails tragen einen eingebrannten
   Titel im Bild, ein mittiger Knopf schneidet ihn mittendurch. Unten links liegt in
   allen Motiven die ruhigste Flaeche. 46px fuer Quer- und Hochformat gleich (Mockup-Mass,
   vorher 52px nur im Querformat, macht die eigene Regel unter „Hochformat" ueberfluessig). */
.vt-card__play{
  position:absolute;left:14px;bottom:14px;
  width:46px;height:46px;border-radius:999px;background:var(--typography-black);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(39,37,42,.28);transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.vt-card:hover .vt-card__play{transform:scale(1.08)}
.vt-card:active .vt-card__play{transform:scale(.96)}
.vt-card__play svg{width:17px;height:17px}
/* DM Sans 20/600 statt Rowan: Rowan beginnt in der Skala bei 24 (Denis 25.09.2026), 20 statt 16 seit 21.10.2026. */
.vt-card__title{
  font-family:var(--font4);font-weight:600;font-size:var(--schrift-20);line-height:1.35;
  color:var(--typography-black);margin:0;text-wrap:pretty;
}
.vt-card:hover .vt-card__title{text-decoration:underline;text-underline-offset:3px}
/* margin-top:auto haelt die Meta-Zeile aller Karten auf einer Linie, egal wie viele
   Zeilen der Titel darueber braucht. Ohne das tanzt sie je nach Umbruch. */
.vt-card__meta{
  margin-top:auto;padding-top:2px;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font4);font-size:var(--schrift-16);color:var(--typography-dark-grey);
}
.vt-card__meta svg{width:16px;height:16px;flex-shrink:0}

/* Fuss: Schlusssatz, Button, Zweitlink mobil untereinander (24px Abstand). Ab 1200px
   (Breakpoint wie die Reihe oben) steht der Schlusssatz links, Button und Zweitlink
   bilden rechts eine Gruppe mit demselben 24px-Abstand (margin-left:auto auf dem
   Button schiebt die Gruppe an den rechten Rand, ohne closer/cta/zweitlink im Markup
   in einen eigenen Wrapper packen zu muessen). */
.video-testimonials__footer{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
@media (min-width:1200px){
  .video-testimonials__footer{flex-direction:row;flex-wrap:wrap;align-items:center}
  .video-testimonials__cta{margin-left:auto}
}
.video-testimonials__closer{
  font-family:var(--font3),serif;font-weight:400;font-size:24px;line-height:1.3;
  color:var(--typography-black);margin:0;
}
.video-testimonials__cta{align-self:flex-start}
/* Ohne Schlusssatz stehen die Knoepfe links (Denis 25.09.2026, Aussage steht im Intro-Block davor). */
.video-testimonials__footer > .video-testimonials__cta:first-child{margin-left:0}
/* Tertiaerlink: reiner Text mit Pfeil-Icon, keine eigene Button-Optik. Positionierung des
   Pfeils per `.arrow-link` aus frontend/src/styles/common/_base.scss (Theme-Klasse, z. B.
   im Footer benutzt) statt einer neuen Regel; hier nur Typografie der Videokarten-Section. */

/* --------------------------------------------------------------------------
   Mit JavaScript wird aus dem Raster eine wischbare Reihe, im Quer- wie im
   Hochformat. Damit gibt es nie eine halb leere letzte Zeile, egal wie viele
   Videos jemand einträgt. Die Punkte-Navigation kommt aus assets/reihe.js und
   erscheint nur, wenn wirklich mehr Inhalt da ist.

   padding-left:8px mit margin-left:-8px gleicht sich im Layout aus und schafft
   trotzdem Platz fuer den Fokusring der ersten Karte (3px Ring, 4px Abstand).
   Ohne das schneidet ihn das overflow-x:auto an der linken Kante ab.
   -------------------------------------------------------------------------- */
.vt--js .video-testimonials__grid{
  display:flex;grid-template-columns:none;gap:24px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:2px 1rem 18px 8px;margin-right:-1rem;margin-left:-8px;
  -webkit-overflow-scrolling:touch;
  /* Leiste ausgeblendet, die Reihe bleibt wisch- und tastaturbedienbar; die Punkte
     darunter (assets/reihe.js) sind die einzige sichtbare Navigation, wie im Mockup. */
  scrollbar-width:none;
}
/* Gemessen am 02.08.2026 auf der Live-Seite: flex-basis stand korrekt auf 340px, aber
   flex-shrink auf 1. Fuenf Karten zu 340px brauchen 1796px, es sind aber nur 1362px da,
   also wurde jede Karte auf 241px gequetscht und scrollWidth war gleich clientWidth:
   die Reihe war gar nicht wischbar und die Kacheln 29 Prozent zu klein. Auf dem Handy
   blieben von 242px noch 116px, also weniger als die halbe Flaeche.

   Woher das flex-shrink:1 kam, ist NICHT abschliessend geklaert. Die Kurzform
   `flex:0 0 min(84vw,340px)` ist es nicht: sie und die Langform verhalten sich in einem
   isolierten Test identisch und beide korrekt. Deshalb steht hier beides. Die Langform,
   weil sie sich von einer fremden `flex`-Kurzform nicht komplett ueberschreiben laesst,
   und min-width, weil das ueberhaupt nicht Teil der flex-Kurzform ist und die Karte
   damit auch dann ihre Breite behaelt, wenn flex-shrink erneut auf 1 landet.
   Der Rezensionsblock daneben war nie betroffen, dort stimmte flex-shrink. */
.vt--js .vt-card{
  flex-grow:0;flex-shrink:0;flex-basis:min(84vw,340px);
  min-width:min(84vw,340px);
  scroll-snap-align:start;
}
.vt--js .video-testimonials__grid::-webkit-scrollbar{display:none}
/* Muss bei 1200 umschalten, nicht bei 768. Das Theme wechselt das Container-Padding in
   `@media (max-width:1199px)` von 3.938rem auf 1rem, nicht bei 767px. Zwischen 768 und
   1199 ragte die Reihe dadurch 47px aus dem Bild. */
@media (min-width:1200px){
  .vt--js .video-testimonials__grid{padding-right:3.938rem;margin-right:-3.938rem}
}

/* --------------------------------------------------------------------------
   Hochformat für Shorts.

   Shorts sind 9:16. Im 16:9-Rahmen liefert YouTube ein Thumbnail mit schwarzen
   Balken links und rechts, das Motiv schrumpft auf ein Drittel der Kachel.
   Deshalb bekommen Shorts ein eigenes Seitenverhältnis und schmalere Spalten,
   sonst stehen drei Hochkant-Kacheln so breit wie ein Kinofilm nebeneinander.
   -------------------------------------------------------------------------- */
.vt--js.vt-format_hoch .video-testimonials__grid{gap:20px}
.vt--js.vt-format_hoch .vt-card{
  flex-grow:0;flex-shrink:0;flex-basis:min(78vw,300px);
  min-width:min(78vw,300px);
}
.vt-format_hoch .vt-card__thumb{aspect-ratio:9/16}
/* Play-Knopf ist inzwischen in beiden Formaten 46px (siehe .vt-card__play oben), hier
   also nichts mehr zu ueberschreiben. */

@media (prefers-reduced-motion: reduce){
  .vt-card__thumb img,.vt-card__play{transition:none}
  .vt-card:hover .vt-card__thumb img{transform:none}
  /* Vorher translate(-50%,-50%). Das war ein Rest aus der Zeit, als der Knopf mittig
     sass. Seit er unten links sitzt, sprang er bei „Bewegung reduzieren" um 23 bis 26px
     nach oben links und stand halb ausserhalb der Kachel. */
  .vt-card:hover .vt-card__play{transform:none}
}

/* Gleiche Spezifitaetsfalle wie im Rezensionsblock: .hb-reihe_laufband aus shared.css
   (0,1,0) verliert gegen .vt--js .video-testimonials__grid (0,2,0). Die Videoreihen
   laufen heute zwar nicht von selbst, aber wenn jemand das Attribut je setzt, soll es
   nicht am Snapping scheitern. */
.vt--js .video-testimonials__grid.hb-reihe_laufband{scroll-snap-type:none}

/* --------------------------------------------------------------------------
   Feld navigation = pfeile. Voreinstellung ist punkte (siehe oben), unveraendert.
   reihe.js baut die Punkte weiterhin (wird nicht angefasst), sie werden hier nur
   ausgeblendet. Kopf und Pfeile stehen im Markup als eigene Geschwister von
   .video-testimonials__grid, damit sie mobil einfach in Dokumentreihenfolge
   (Kopf, Reihe, Pfeile) untereinanderstehen; ab 768px schiebt Grid sie neben den Kopf.
   -------------------------------------------------------------------------- */
.vt-nav_pfeile .hb-punkte{display:none}

.video-testimonials__head{display:flex;flex-direction:column;gap:12px}
/* Titel breit (zwei statt drei schmale Zeilen), Subline direkt darunter wie im Mockup.
   Die Variante mit Subline rechts daneben hat Denis am 23.09.2026 verworfen. */
.video-testimonials__head .video-testimonials__title{max-width:800px}
.video-testimonials__head .video-testimonials__subtitle{max-width:64ch}

.vt-pfeile{display:flex;gap:12px}
/* Blaetterpfeile sind kein Knopf im Sinne der drei CI-Knoepfe, sondern Steuerung: nur das Symbol,
   48px Klickflaeche, Hover Orange 100 (wie .hb-rund der Reihen, Denis 09.10.2026: „ohne die weissen
   Kreise"). Bis 27.10.2026 waren es helle Knoepfe (button_light), die es im CI nicht mehr gibt. */
.vt-pfeile .vt-pfeil{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--typography-black);
  transition:background-color 300ms cubic-bezier(.16,1,.3,1);
}
.vt-pfeile .vt-pfeil:hover{background:var(--orange-100)}
.vt-pfeile .vt-pfeil:focus-visible{outline:3px solid var(--typography-black);outline-offset:2px}
.vt-pfeil svg{width:20px;height:20px}
.vt-pfeil:disabled{opacity:.35;cursor:default;pointer-events:none}
/* Nichts zu blaettern (alle Karten sichtbar): Pfeile weg statt zwei grauer Knoepfe. */
.vt-pfeile[hidden]{display:none}
.vt-nav_pfeile .video-testimonials__subtitle{text-wrap:balance}
/* Der Snap rastete an der Innenkante (x=8) statt an der Inhaltskante (x=16) ein. */
.vt-karten_schmal .video-testimonials__grid{scroll-padding-left:8px}

@media (min-width:768px){
  .vt-nav_pfeile .video-testimonials{
    display:grid;grid-template-columns:1fr auto;
    column-gap:48px;row-gap:32px;align-items:end;
  }
  .vt-nav_pfeile .video-testimonials__head{grid-column:1;grid-row:1}
  .vt-nav_pfeile .vt-pfeile{grid-column:2;grid-row:1}
  .vt-nav_pfeile .video-testimonials__grid{grid-column:1/-1;grid-row:2}
  .vt-nav_pfeile .video-testimonials__footer{grid-column:1/-1;grid-row:3}
}

/* --------------------------------------------------------------------------
   Feld kartengroesse = schmal. Voreinstellung ist standard (heutiges Maß),
   unveraendert. Die Maße gelten fuer beide Kartenmodi (Grundraster ohne
   JavaScript und die wischbare Reihe mit .vt--js), damit die Karte auch ohne
   JavaScript nicht breiter wirkt als vorgesehen.
   -------------------------------------------------------------------------- */
/* Mindestens 220 breit (Mockup); passt die Reihe ganz in den Container, fuellen die Karten
   die Zeile statt rechts 130px Leerraum zu lassen. Hoehe folgt dem 9:16-Hochformat. */
.vt-karten_schmal .vt-card{max-width:none}
.vt-karten_schmal .vt-card__thumb{width:100%;height:auto;aspect-ratio:9/16;flex:none}
.vt--js.vt-karten_schmal .vt-card{flex:1 0 220px;min-width:220px;max-width:none}
/* Denis 23.09.2026: bei ~1180px Fensterbreite ragte die fuenfte Karte 51px ueber den Rand,
   das wirkte wie ein Fehler. Ab 1100px teilen sich bis zu fuenf Karten die Zeile (min. ~194px),
   erst darunter wird gewischt, dann mit deutlich sichtbarer Folgekarte und den Pfeilen. */
@media (min-width:1100px){
  .vt--js.vt-karten_schmal .video-testimonials__grid:not(:has(> .vt-card:nth-child(6))) .vt-card{flex:1 1 0;min-width:0}
}
.vt-karten_schmal .vt-card__meta{font-size:var(--schrift-16);line-height:22px;color:var(--typography-light-grey)}

@media (max-width:767px){
  .vt-karten_schmal .video-testimonials__grid{gap:16px}
  .vt--js.vt-karten_schmal .vt-card{flex:0 0 260px;min-width:260px;max-width:260px}
}

/* --------------------------------------------------------------------------
   Abschlusszeile: bei Pfeilen oder schmalen Karten größerer Schlusssatz auf dem
   Desktop-Maß aus dem Mockup (1280px). Das Zeilenlayout selbst (flex, row ab
   1200px, Button+Zweitlink rechts per margin-left:auto, 24px Abstand) hat die
   Section bereits, siehe .video-testimonials__footer weiter oben. Mobil bleibt
   unveraendert bei 24px (Grundregel .video-testimonials__closer). */
@media (min-width:1200px){
  .vt-nav_pfeile .video-testimonials__closer,
  .vt-karten_schmal .video-testimonials__closer{
    font-size:28px;line-height:1.25;
  }
}
/* Handy (Denis 25.09.2026): wischen statt Pfeile, weiches Einrasten statt hartem Schnappen
   (mandatory fuehlte sich hakelig an), der Wisch bleibt in der Reihe. */
@media (max-width:767px){
  .vt-nav_pfeile .vt-pfeile{display:none}
  .vt--js .video-testimonials__grid{scroll-snap-type:x proximity;overscroll-behavior-x:contain}
}

/* Vergrößern-Knopf und Popup für Videos, die in der Karte laufen (gross.js, Denis 09.10.2026).
   Popup 1:1 wie das Video-Overlay der Produktseite (assets/hoeher/pdp.css, .pdp-vo), als natives <dialog>. */
.vt-card__thumb--spielt{position:relative}
.vt-gross{align-items:center;background:var(--background-white);border:0;border-radius:100px;box-shadow:0 2px 8px rgba(39,37,42,.18);color:var(--typography-black);cursor:pointer;display:flex;height:40px;justify-content:center;padding:0;position:absolute;right:12px;top:12px;width:40px;z-index:2}
.vt-gross svg{height:18px;width:18px}
.vt-gross:hover{background:var(--orange-100)}
.vt-gross:focus-visible{outline:2px solid var(--typography-black);outline-offset:2px}
.vt-popup{background:transparent;border:0;display:flex;flex-direction:column;gap:12px;height:fit-content;inset:0;margin:auto;max-height:none;max-width:min(1040px,calc((100vh - 130px) * 16 / 9));padding:0;position:fixed;width:calc(100% - 48px)}
.vt-popup--hoch{max-width:min(480px,calc((100vh - 130px) * 9 / 16))}
.vt-popup--hoch .vt-popup__rahmen{aspect-ratio:9/16}
.vt-popup:not([open]){display:none}
.vt-popup::backdrop{background:var(--typography-black);opacity:.86}
.vt-popup__kopf{align-items:center;display:flex;gap:16px;justify-content:space-between}
.vt-popup__titel{color:var(--background-white);font-family:var(--font4);font-size:var(--schrift-16);font-weight:600;line-height:1.4;margin:0;min-width:0}
.vt-popup__kopf .button{flex:0 0 auto}
.vt-popup__rahmen{aspect-ratio:16/9;background:var(--typography-black);border-radius:12px;overflow:hidden;width:100%}
.vt-popup__rahmen video{display:block;height:100%;object-fit:contain;width:100%}
@media (max-width:767px){
  .vt-popup{gap:10px;width:100%}
  .vt-popup__kopf{padding:0 16px}
  .vt-popup__titel{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;font-size:var(--schrift-16);overflow:hidden}
  .vt-popup__rahmen{border-radius:0}
}