/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   NF-R91 – Optionale Werbevideo-Section der Branchen-Landingpages (/websites/<branche>/).
   Alles zu dieser Ergaenzung liegt in genau drei Stellen: (1) dieser Datei, (2) websites/_shared/
   branche-video.js, (3) je Seite dem Block zwischen "NF-R91 WERBEVIDEO ANFANG" und "… ENDE" plus
   den beiden Einbindungen und dem Zusatz "und das Werbevideo" im Footer-Hinweis. Praefix bv-, keine
   Abhaengigkeit anderer Sections von Hoehe oder Existenz. Rueckbau: Assets/Claude-Code-R91/README-R91.md.
   Farben kommen ueber CSS-Variablen aus den Tokens der jeweiligen Seite (Varianten unten).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.bv{--bv-grund:#0b0f14;--bv-text:#eef0f4;--bv-soft:rgba(238,240,244,.72);--bv-auge:#c49a56;--bv-titel:#f5f7fa;
  --bv-linie:rgba(255,255,255,.12);--bv-r:14px;--bv-knopf-grund:rgba(8,11,17,.6);--bv-knopf-rand:rgba(255,255,255,.24);--bv-knopf-akz:#c49a56;
  position:relative;padding:112px 0;background:var(--bv-grund);color:var(--bv-text);overflow:clip}
.bv-inner{max-width:1240px;margin:0 auto;padding:0 32px}
.bv-auge{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--bv-auge);margin-bottom:18px}
.bv-auge::before{content:'';width:22px;height:1px;background:currentColor}
.bv-titel{font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.08;letter-spacing:-.015em;color:var(--bv-titel);margin:0 0 16px;text-wrap:pretty}
.bv-nutzen{font-size:16.5px;line-height:1.75;color:var(--bv-soft);max-width:58ch;margin:0}
.bv-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:26px}
.bv-mehr{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14.5px;font-weight:600;color:var(--bv-auge);transition:gap .2s}
.bv-mehr:hover{gap:13px}
.bv-buehne{margin:0;min-width:0}
.bv-medium{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--bv-r);background:#000;box-shadow:0 40px 90px -40px rgba(0,0,0,.75)}
.bv-medium video{display:block;width:100%;height:100%;object-fit:cover;background:#000;cursor:pointer}
.bv-unterschrift{display:flex;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;letter-spacing:.03em;color:var(--bv-soft)}
/* Wiedergabeknopf (setzt branche-video.js). Unaufdringlich in der Ecke; gross in der Mitte, solange das
   Video auf eine ausdrueckliche Wiedergabe wartet (reduzierte Bewegung, Autoplay verweigert, angehalten). */
.bv-play{position:absolute;right:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--bv-knopf-rand);background:var(--bv-knopf-grund);color:#fff;cursor:pointer;padding:0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:.78;transition:opacity .25s,transform .25s,background .25s,border-color .25s}
.bv-play:hover,.bv-play:focus-visible{opacity:1;background:rgba(8,11,17,.82);border-color:var(--bv-knopf-akz)}
.bv-play:focus-visible{outline:2px solid var(--bv-knopf-akz);outline-offset:3px}
.bv-play svg{width:16px;height:16px;display:block}
.bv-play[hidden]{display:none}
.bv-play .bv-i-pause{display:none}
.bv-play[data-laeuft="true"] .bv-i-play{display:none}
.bv-play[data-laeuft="true"] .bv-i-pause{display:block}
.bv-medium[data-warten="true"]>.bv-play{right:50%;bottom:50%;transform:translate(50%,50%);width:68px;height:68px;opacity:1;background:rgba(8,11,17,.62);border-color:var(--bv-knopf-akz)}
.bv-medium[data-warten="true"]>.bv-play svg{width:24px;height:24px}
@media (prefers-reduced-motion: reduce){.bv-play,.bv-mehr{transition:none}}

/* ── Varianten: je Seite eine eigene Komposition, Farben aus den Seiten-Tokens ────────────────── */
/* A Handwerk (DachPro Nord): Graphit, Kupfer. Zweispaltiger Kopf, darunter die Buehne ueber die volle Breite. */
.bv--handwerk{--bv-grund:var(--hw-graphit-2,#22272d);--bv-auge:var(--hw-kupfer-hell,#d4915c);--bv-soft:var(--text-soft,#aeb5bc);--bv-r:10px;--bv-knopf-akz:var(--hw-kupfer,#b8733f)}
.bv--handwerk .bv-titel{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-.025em}
.bv--handwerk .bv-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 64px;align-items:end;margin-bottom:44px}
.bv--handwerk .bv-kopf .bv-titel{margin-bottom:0}
.bv--handwerk .bv-buehne{position:relative}
.bv--handwerk .bv-buehne::before{content:'';position:absolute;left:-1px;top:-14px;width:56px;height:2px;background:var(--hw-kupfer,#b8733f)}
.bv--handwerk .bv-unterschrift{border-top:1px solid var(--hw-linie,rgba(255,255,255,.1));padding-top:14px}

/* B Dienstleister (Blankhorn): Nachtblau, Porzellan. Text links, Buehne rechts, leicht angehoben. */
.bv--dienstleister{--bv-grund:var(--dl-nacht,#0f1d33);--bv-auge:var(--dl-blau-hell,#a4bfda);--bv-soft:rgba(244,241,234,.72);--bv-titel:var(--dl-porz,#f4f1ea);--bv-r:18px;--bv-knopf-akz:var(--dl-blau,#5f8cb5)}
.bv--dienstleister .bv-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 64px;align-items:center}
.bv--dienstleister .bv-medium{box-shadow:0 50px 100px -50px rgba(0,0,0,.8),0 0 0 1px rgba(244,241,234,.08)}

/* C Gastronomie (Bodega Marea): Espresso, Terrakotta, Sand. Mittiger Kopf, Buehne in einem warmen Rahmen. */
.bv--gastronomie{--bv-grund:var(--ga-espresso,#2a1c14);--bv-auge:var(--ga-sand,#c9a97e);--bv-soft:var(--ga-hell-soft,rgba(247,239,226,.74));--bv-titel:var(--ga-hell,#f7efe2);--bv-r:6px;--bv-knopf-akz:var(--ga-terra-hell,#d8805f)}
.bv--gastronomie .bv-kopf{max-width:680px;margin:0 auto 44px;text-align:center}
.bv--gastronomie .bv-kopf .bv-auge::before{display:none}
.bv--gastronomie .bv-titel{font-family:var(--ga-serif,'Cormorant Garamond',serif);font-weight:500;font-size:clamp(2.2rem,4.2vw,3.4rem)}
.bv--gastronomie .bv-nutzen{margin:0 auto}
.bv--gastronomie .bv-buehne{max-width:1040px;margin:0 auto;padding:14px;background:var(--ga-espresso-2,#3a281d);border:1px solid rgba(201,169,126,.28);border-radius:10px}
.bv--gastronomie .bv-medium{box-shadow:none}
.bv--gastronomie .bv-unterschrift{justify-content:center;margin-top:12px;color:var(--ga-sand,#c9a97e)}
.bv--gastronomie .bv-links{justify-content:center;margin-top:36px}

/* D Praxen (Physiotherapie Haldenstein): Salbei, Petrol, Warmweiss. Ruhig, weich gerundet, mittig. */
.bv--praxen{--bv-grund:var(--pr-salbei-hell,#e4ece6);--bv-text:var(--pr-text,#26363a);--bv-soft:var(--pr-text-soft,#4b5c60);--bv-auge:var(--pr-petrol-hell,#2d5f69);--bv-titel:var(--pr-petrol,#1f4a52);--bv-r:24px;
  --bv-knopf-grund:rgba(31,74,82,.72);--bv-knopf-rand:rgba(255,255,255,.35);--bv-knopf-akz:#fff}
.bv--praxen .bv-kopf{max-width:640px;margin:0 auto 40px;text-align:center}
.bv--praxen .bv-kopf .bv-auge::before{display:none}
.bv--praxen .bv-titel{font-family:'Fraunces','Cormorant Garamond',serif;font-weight:500}
.bv--praxen .bv-nutzen{margin:0 auto}
.bv--praxen .bv-buehne{max-width:980px;margin:0 auto}
.bv--praxen .bv-medium{box-shadow:var(--pr-schatten,0 28px 64px -34px rgba(31,74,82,.4))}
.bv--praxen .bv-unterschrift{justify-content:center;color:var(--pr-text-muted,#65767a)}
.bv--praxen .bv-links{justify-content:center;margin-top:34px}
.bv--praxen .bv-play:hover,.bv--praxen .bv-play:focus-visible{background:rgba(31,74,82,.9)}

/* E Einzelhandel (Blumenwerft): Dunkelgruen, Papier, Beere. Buehne auf einem Papierbogen, Text daneben. */
.bv--einzelhandel{--bv-grund:var(--eh-grund-2,#122219);--bv-auge:var(--eh-rose,#d9a9a0);--bv-soft:var(--eh-creme-weich,rgba(250,246,239,.72));--bv-titel:var(--eh-creme,#faf6ef);--bv-r:6px;--bv-knopf-akz:var(--eh-rose,#d9a9a0)}
.bv--einzelhandel .bv-inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 64px;align-items:center}
.bv--einzelhandel .bv-buehne{order:-1;padding:16px 16px 12px;background:var(--eh-papier,#f2ebe0);border-radius:8px;box-shadow:var(--eh-schatten,0 30px 70px -32px rgba(0,0,0,.7))}
.bv--einzelhandel .bv-medium{box-shadow:none}
.bv--einzelhandel .bv-unterschrift{margin-top:10px;color:var(--eh-tinte-weich,#574a4d)}
.bv--einzelhandel .bv-titel{font-family:var(--eh-serif,'Cormorant Garamond',serif);font-weight:600}

/* ── Responsive ──────────────────────────────────────────────────────────────────────────────── */
@media(max-width:980px){
  .bv--handwerk .bv-kopf,.bv--dienstleister .bv-inner,.bv--einzelhandel .bv-inner{grid-template-columns:100%;gap:28px}
  .bv--einzelhandel .bv-buehne{order:0}
  .bv--gastronomie .bv-buehne{padding:10px}
}
@media(max-width:760px){
  .bv{padding:80px 0}
  .bv-inner{padding:0 20px}
  .bv-titel{font-size:clamp(1.9rem,7vw,2.4rem)}
  .bv-play{right:10px;bottom:10px;width:38px;height:38px}
  .bv-medium[data-warten="true"]>.bv-play{width:60px;height:60px}
}
@media(max-width:520px){
  .bv-inner{padding:0 16px}
  .bv-links{gap:12px}
  .bv-links>a:not(.bv-mehr){width:100%;justify-content:center}
  .bv-unterschrift{font-size:12px}
}