/* =====================================================================
   Bayer Druck GmbH – Hero NEU D „Intro: Logo aus laufenden Filmsequenzen“ (ENTWURF)
   Namensraum .bdhD – keine globalen Selektoren. Tokens aus child-theme style.css (:root --bd-*) mit Rückfallwerten.
   Desktop (≥ 1024 px): Film bildfüllend hinter der Sektion (Endlogo rechts, Mitte bei 66 %), Lesefläche links ≤ 40 %.
   Mobil (< 1024 px): Film oben (4 : 5, Logo mittig), Lesefläche darunter.
   ===================================================================== */
.bdhD{
  --bdhD-offset:104px;
  --bdhD-red:var(--bd-red,#E30613); --bdhD-ink:var(--bd-ink,#1D1D1B); --bdhD-paper:var(--bd-paper,#fff);
  --bdhD-gut:var(--bd-gut,clamp(16px,2.4vw,32px)); --bdhD-wrap:var(--bd-wrap,1280px);
  position:relative; isolation:isolate; overflow:hidden; display:block;
  /* Höhe nie größer als 16 : 9 der Breite → Film wird nur oben/unten beschnitten, Endlogo bleibt rechts der Lesefläche */
  height:clamp(560px, min(calc(100vh - var(--bdhD-offset)), 56.25vw), 940px);
  height:clamp(560px, min(calc(100svh - var(--bdhD-offset)), 56.25vw), 940px);
  background:#fff; color:var(--bdhD-ink);
}
.bdhD *,.bdhD *::before,.bdhD *::after{box-sizing:border-box}

/* Filmfläche: Poster → Video → Endbild liegen deckungsgleich übereinander */
.bdhD__stage{position:absolute; inset:0; z-index:0; background:#fff}
.bdhD__poster,.bdhD__ende,.bdhD__video{position:absolute; inset:0; width:100%; height:100%; display:block; margin:0}
/* 24.10. LCP: Poster 1 px größer als das Video, damit das Posterbild (früh geladen) das LCP-Element bleibt und nicht der erste Videoframe (Messung: Video war 195 px² größer → LCP 2,2–4,6 s statt 1,4 s) */
.bdhD__poster{inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px)}
.bdhD__poster img,.bdhD__ende img{display:block; width:100%; height:100%; object-fit:cover; object-position:100% 50%}
.bdhD__video{object-fit:cover; object-position:100% 50%; background:transparent; opacity:0; pointer-events:none}
.bdhD__ende{display:none}
/* ohne JS: Endbild statt Poster */
.bdhD:not(.bdhD--js) .bdhD__ende{display:block}
.bdhD:not(.bdhD--js) .bdhD__video{display:none}
/* mit JS */
.bdhD--laeuft .bdhD__video{opacity:1}
.bdhD--laeuft .bdhD__poster{visibility:hidden}
.bdhD--ende .bdhD__ende{display:block}
.bdhD--ende .bdhD__poster{visibility:hidden}

/* Lesefläche links: weißer Bogen, höchstens 40 % der Breite (Endlogo beginnt bei ≈ 42 %) */
.bdhD__inner{position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; pointer-events:none}
.bdhD__panel{position:relative; pointer-events:auto; background:var(--bdhD-paper);
  width:min(40%, calc((100% - var(--bdhD-wrap)) / 2 + 560px)); min-width:0;
  padding:clamp(24px,2.8vw,44px) clamp(22px,2.4vw,40px) clamp(26px,3vw,42px) max(var(--bdhD-gut), calc((100% - var(--bdhD-wrap)) / 2 + var(--bdhD-gut)));
  box-shadow:0 0 0 1px rgba(0,0,0,.08), 4px 8px 14px rgba(0,0,0,.18), 0 30px 60px -24px rgba(0,0,0,.45)}
.bdhD__panel > *,.bdhD__leseflaeche > *{margin-block:0}
.bdhD__services{display:flex; align-items:center; gap:12px; margin:0 0 clamp(12px,1.4vw,20px) !important;
  font:700 12.5px/1.3 var(--bd-font-sans,Helvetica,Arial,sans-serif); letter-spacing:.14em; text-transform:uppercase}
.bdhD__services::before{content:""; flex:0 0 15px; height:15px; border:1.5px solid var(--bdhD-red); border-radius:50%;
  background:linear-gradient(var(--bdhD-red),var(--bdhD-red)) center/1.5px 100% no-repeat, linear-gradient(var(--bdhD-red),var(--bdhD-red)) center/100% 1.5px no-repeat}
.bdhD__h1{font-family:var(--bd-font-serif,Georgia,serif); font-weight:400; font-size:clamp(36px,3.7vw,62px); line-height:1.02; letter-spacing:-.022em; color:var(--bdhD-ink); overflow-wrap:break-word; hyphens:manual}
.bdhD__sub{margin-top:clamp(8px,1vw,14px) !important; font:400 clamp(20px,1.7vw,27px)/1.2 var(--bd-font-serif,Georgia,serif); letter-spacing:-.01em}
.bdhD__lead{margin-top:clamp(12px,1.3vw,18px) !important; font:400 clamp(16px,1.15vw,18px)/1.45 var(--bd-font-sans,Helvetica,Arial,sans-serif); color:var(--bd-ink-2,#2B2B2A); max-width:34em}
.bdhD .bd-hero__welten{margin-top:clamp(14px,1.6vw,24px) !important}
.bdhD .wp-block-buttons{display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:clamp(16px,1.8vw,24px) !important}

/* Bedienung unten rechts */
.bdhD__ctrl{position:absolute; z-index:3; right:max(14px, calc((100% - var(--bdhD-wrap)) / 2 + var(--bdhD-gut))); bottom:16px}
.bdhD__toggle{display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 14px 0 12px; border:1px solid rgba(255,255,255,.55); border-radius:0;
  background:var(--bdhD-ink); color:#fff; cursor:pointer; font:600 14px/1 var(--bd-font-sans,Helvetica,Arial,sans-serif); letter-spacing:.01em}
.bdhD__toggle::before{content:""; flex:0 0 12px; height:14px;
  background:linear-gradient(currentColor,currentColor) left/4px 100% no-repeat, linear-gradient(currentColor,currentColor) right/4px 100% no-repeat}
.bdhD__toggle[data-state="paused"]::before,.bdhD__toggle[data-state="ended"]::before{flex-basis:13px; width:0; height:0; background:none; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent currentColor}
.bdhD__toggle:hover{border-color:var(--bdhD-red)}
.bdhD__toggle:focus-visible{outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 5px var(--bdhD-ink)}
.bdhD__toggle[hidden]{display:none}
.bdhD__note{position:absolute; z-index:2; top:12px; right:max(14px, calc((100% - var(--bdhD-wrap)) / 2 + var(--bdhD-gut))); margin:0;
  font:500 12px/1.3 var(--bd-font-sans,Helvetica,Arial,sans-serif); color:#d9d9d9; background:#161616; padding:3px 8px; white-space:nowrap}
.bdhD__config{display:none}

/* ---------- Mobil / Tablet hochkant: Film oben, Lesefläche darunter ---------- */
@media (max-width:1023px){
  .bdhD{height:auto; display:flex; flex-direction:column; background:var(--bdhD-paper)}
  .bdhD__stage{position:relative; inset:auto; order:1; width:100%; aspect-ratio:4 / 5; max-height:78svh}
  .bdhD__poster img,.bdhD__ende img,.bdhD__video{object-position:50% 50%}
  .bdhD__inner{order:2; height:auto; display:block}
  .bdhD__panel{width:100%; box-shadow:none; padding:22px var(--bdhD-gut) 28px}
  .bdhD__ctrl{bottom:auto; top:calc(min(125vw, 78svh) - 56px); right:12px}
  .bdhD__toggle{font-size:13px; padding:0 10px}
  .bdhD__note{top:12px; right:auto; left:12px}
  .bdhD .wp-block-buttons,.bdhD .bd-btn,.bdhD .bd-btn .wp-block-button__link{width:100%}
  .bdhD__h1{font-size:clamp(32px,8.6vw,44px)}
  .bdhD__lead{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.bdhD *{transition:none !important}}

/* ---------- Owner 17.10. (Abnahme): Desktop 50 : 50 – links Lesefläche, rechts Film im quadratischen Feld; Höhe = halbe Breite, begrenzt durch Bildschirmhöhe ---------- */
@media (min-width:1024px){
  .bdhD{height:clamp(560px, min(50vw, calc(100vh - var(--bdhD-offset))), 940px); height:clamp(560px, min(50vw, calc(100svh - var(--bdhD-offset))), 940px)}
  .bdhD__stage{inset:0 0 0 50%; width:50%}
  .bdhD__poster img,.bdhD__ende img,.bdhD__video{object-position:85% 50%}
  .bdhD__inner{width:50%}
  .bdhD__panel{width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; box-shadow:none;
    padding-left:max(var(--bdhD-gut), calc((100vw - var(--bdhD-wrap)) / 2 + var(--bdhD-gut))); padding-right:clamp(28px,3vw,56px)}
  .bdhD__lead{max-width:36em}
}