/* Erklärvideo (components/ErklaerVideo.tsx, Vidalytics-Prinzip): startet stumm, Klick → von vorn mit Ton.
   Zwei Fassungen: Hero von /fuer-fotografen (dunkles Grün) und Startseite unter der Suche (für Paare, .ev-hell auf hellem Grund).
   Die Seiten binden diese Datei vor ihrem eigenen Stylesheet ein (seitenbezogene Abstände dort überschreiben die Grundwerte hier).
   Kein Vorschaubild; Hintergrund = Hintergrund des ersten Bilds, damit vor dem Laden nichts aufblitzt. */
.ffv-video{--ev-tief:#0A4B37;--ev-gruen:#0E9F6E;--ev-tinte:#15181B;--ev-text:#4D5660;--ev-cap:#BFE0D0;--ev-schatten:0 50px 90px -40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1);position:relative;margin:0;padding:0 0 30px;min-width:0}
.ffv-video.ev-hell{--ev-cap:var(--fg3,#7A8590);--ev-schatten:0 34px 70px -34px rgba(60,30,20,.42),0 0 0 1px rgba(16,20,24,.06)}
.ffv-video-r{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#F8F2E9;container-type:inline-size;box-shadow:var(--ev-schatten);isolation:isolate;-webkit-tap-highlight-color:transparent}
.ffv-video-v{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:#F8F2E9}
.ffv-video-r.m-warten .ffv-video-v,.ffv-video-r.m-ton .ffv-video-v,.ffv-video-r.m-pause .ffv-video-v{cursor:pointer}
.ffv-video-r.ruhig,.ffv-video-r.ruhig .ffv-video-v{cursor:none}
.ffv-video-v::cue{font:600 1em/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff;background:rgba(21,24,27,.8)}
.ffv-video figcaption{position:absolute;right:0;bottom:2px;font-size:12.5px;color:var(--ev-cap)}
/* Hinweis „Dein/Euer Video läuft bereits – Klick für Ton“ (ganze Fläche klickbar), Abspielknopf, Pause */
.ffv-video-ton,.ffv-video-start,.ffv-video-weiter{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;margin:0;padding:12px;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.ffv-video-ton{align-items:flex-end;padding-bottom:6.5%}
.ffv-video-karte{display:flex;align-items:center;gap:14px;padding:13px 22px 13px 13px;border-radius:20px;background:rgba(10,75,55,.95);color:#fff;box-shadow:0 24px 46px -18px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .2s cubic-bezier(.2,.7,.2,1),background .2s}
.ffv-video-ton:hover .ffv-video-karte{transform:scale(1.04);background:var(--ev-tief)}
.ffv-video-lsp{position:relative;flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#fff;color:var(--ev-tief)}
.ffv-video-lsp::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(143,224,185,.8);opacity:0}
.ffv-video-txt{display:flex;flex-direction:column;gap:3px;text-align:left}
.ffv-video-txt b{font:800 19px/1.15 var(--fd);letter-spacing:-.02em}
.ffv-video-txt span{font-size:15px;font-weight:700;color:#BDF0D6}
.ffv-video-play{display:grid;place-items:center;width:80px;height:80px;padding-left:4px;border-radius:50%;background:#fff;color:var(--ev-tief);box-shadow:0 18px 40px -14px rgba(0,0,0,.55);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.ffv-video-start{flex-direction:column;gap:14px}
.ffv-video-start .ffv-video-play{background:var(--ev-tief);color:#fff}
.ffv-video-start .ffv-video-txt{align-items:center;text-align:center;color:var(--ev-tinte)}
.ffv-video-start .ffv-video-txt span{color:var(--ev-text)}
.ffv-video-weiter{background:rgba(21,24,27,.16)}
.ffv-video-start:hover .ffv-video-play,.ffv-video-weiter:hover .ffv-video-play{transform:scale(1.06)}
.ffv-video-ton:focus-visible,.ffv-video-start:focus-visible,.ffv-video-weiter:focus-visible{outline:3px solid #BDF0D6;outline-offset:-6px;border-radius:18px}
/* Bedienleiste nach dem Klick; die Fortschrittsleiste läuft erst schnell, dann langsamer (lib/fortschrittsleiste.ts) */
.ffv-video-leiste{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:4px;padding:30px 10px 13px;background:linear-gradient(to top,rgba(8,30,22,.5),rgba(8,30,22,0));transition:opacity .25s}
.ffv-video-r.ruhig .ffv-video-leiste{opacity:0;pointer-events:none}
.ffv-video-leiste button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:12px;background:transparent;color:#fff;cursor:pointer;transition:background .15s}
.ffv-video-leiste button:hover,.ffv-video-leiste button.an{background:rgba(255,255,255,.2)}
.ffv-video-leiste button:focus-visible{outline:3px solid #BDF0D6;outline-offset:0}
.ffv-video-luecke{flex:1}
.ffv-video-fort{position:absolute;left:0;right:0;bottom:0;z-index:3;height:5px;background:rgba(255,255,255,.4);pointer-events:none}
.ffv-video-fort span{display:block;height:100%;background:var(--ev-gruen);box-shadow:0 0 10px rgba(14,159,110,.6);transform-origin:left center;transform:scaleX(0)}
/* Untertitel (eigene Zeile über der Bedienleiste; rutscht nach unten, wenn die Leiste ausgeblendet ist) */
.ffv-video-ut{position:absolute;left:5%;right:5%;bottom:64px;z-index:2;display:flex;justify-content:center;pointer-events:none;transition:bottom .25s}
.ffv-video-r.ruhig .ffv-video-ut{bottom:16px}
.ffv-video-ut span{max-width:100%;padding:4px 12px 5px;border-radius:8px;background:rgba(21,24,27,.82);color:#fff;font:600 15px/1.35 var(--ff);font-size:clamp(12.5px,3.1cqi,22px);text-align:center;white-space:pre-line}
/* Schluss: Aufruf + nochmal ansehen */
.ffv-video-ende{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;background:rgba(10,75,55,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;text-align:center}
.ffv-video-ende-t{margin:0;font:800 clamp(21px,2.3vw,28px)/1.15 var(--fd);letter-spacing:-.025em}
.ffv-video-ende-b{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ffv-video-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:14px;background:#fff;color:var(--ev-tief);font:700 16px/1.2 var(--ff);letter-spacing:-.01em;text-decoration:none!important;box-shadow:0 14px 30px -16px rgba(0,0,0,.55);transition:transform .15s,box-shadow .15s}
.ffv-video-cta:hover{transform:translateY(-1px);box-shadow:0 18px 34px -16px rgba(0,0,0,.6)}
.ffv-video-nochmal{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 20px;border:1.5px solid rgba(255,255,255,.5);border-radius:14px;background:transparent;color:#fff;font:700 16px/1.2 var(--ff);cursor:pointer;transition:border-color .15s,background .15s}
.ffv-video-nochmal:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.ffv-video-ende .ffv-video-cta:focus-visible,.ffv-video-nochmal:focus-visible{outline:3px solid #BDF0D6;outline-offset:2px}
/* Vollbild (Desktop, Android, iPad); iPhone nutzt den eigenen Vollbild-Player */
.ffv-video-r:fullscreen{border-radius:0;background:#000;box-shadow:none}
.ffv-video-r:fullscreen .ffv-video-v{object-fit:contain;background:#000}
@media (prefers-reduced-motion:no-preference){
  .ffv-video-karte{animation:ffv-auf .5s cubic-bezier(.2,.7,.2,1) both}
  .ffv-video-lsp::after{animation:ffv-puls 1.9s cubic-bezier(.2,.7,.2,1) infinite}
}
@keyframes ffv-puls{0%{transform:scale(.82);opacity:.95}75%,100%{transform:scale(1.32);opacity:0}}
@keyframes ffv-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:479.98px){
  .ffv-video-karte{gap:11px;padding:10px 16px 10px 10px;border-radius:16px}
  .ffv-video-lsp{width:44px;height:44px}
  .ffv-video-lsp svg{width:22px;height:22px}
  .ffv-video-txt b{font-size:16px}
  .ffv-video-txt span{font-size:13.5px}
  .ffv-video-play{width:64px;height:64px}
  .ffv-video-leiste{padding:24px 6px 10px;gap:2px}
  .ffv-video-ut{bottom:56px}
  .ffv-video-r.ruhig .ffv-video-ut{bottom:12px}
  .ffv-video-leiste button{width:38px;height:38px}
  .ffv-video-ende{gap:12px;padding:12px}
  .ffv-video-ende-t{font-size:19px}
  .ffv-video-cta,.ffv-video-nochmal{min-height:44px;padding:0 16px;font-size:15px}
}

/* Startseite (app/page.tsx): Erklärvideo für Paare direkt unter der Suche (Wunsch Valentin 03.11.2026) */
.sec.home-video{padding-top:12px}
.home-video .h8-t{margin-bottom:10px;text-wrap:balance}
.home-video-lead{max-width:58ch;margin:0 auto 26px;text-align:center;text-wrap:balance}
.home-video .ffv-video{max-width:960px;margin:0 auto}
@media (max-width:700px){
  .sec.home-video{padding-top:8px}
  .home-video-lead{margin-bottom:18px;font-size:15px}
  .home-video .ffv-video{padding-bottom:26px}
  .home-video .ffv-video-r{border-radius:16px}
  .home-video .ffv-video figcaption{bottom:0}
}