/* =====================================================================
   Bayer Druck GmbH – Hero NEU A „Der Bogen“ (ENTWURF, CI-Anpassung 28.10.2026: heller neutraler Grund, kein Hinweis „Illustration“)
   Namensraum .bdhA – keine globalen Selektoren. Tokens aus child-theme style.css (:root --bd-*),
   mit Rückfallwerten, damit die Komponente auch allein lauffähig ist.
   Desktop: Bühne liegt hinter der ganzen Sektion, Lesefläche links (≈ 46 %).
   Mobil (≤ 819 px): Lesefläche oben, Film darunter als eigener Ausschnitt (≈ 390 × 420).
   ===================================================================== */
.bdhA{
  --bdhA-offset:104px;
  --bdhA-red:var(--bd-red,#E30613); --bdhA-ink:var(--bd-ink,#1D1D1B); --bdhA-paper:var(--bd-paper,#fff);
  --bdhA-table:#E4E4E2;
  --bdhA-gut:var(--bd-gut,clamp(16px,2.4vw,32px)); --bdhA-wrap:var(--bd-wrap,1280px);
  position:relative; isolation:isolate; overflow:hidden; display:block;
  min-height:clamp(560px, calc(100vh - var(--bdhA-offset)), 940px);
  min-height:clamp(560px, calc(100svh - var(--bdhA-offset)), 940px);
  background:var(--bdhA-table); color:var(--bdhA-ink);
}
.bdhA *,.bdhA *::before,.bdhA *::after{box-sizing:border-box}

/* Filmfläche */
.bdhA__stage{position:absolute; inset:0; z-index:0; background:var(--bdhA-table)}
.bdhA__poster,.bdhA__poster img{display:block; width:100%; height:100%}
.bdhA__poster img{object-fit:cover; object-position:70% 50%}
.bdhA__canvas{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0}
.bdhA--live .bdhA__canvas{opacity:1}
.bdhA--live .bdhA__poster{visibility:hidden}

/* Lesefläche: weißer Bogen links, randabfallend */
.bdhA__inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start;
  padding-top:clamp(28px,6.5vh,76px); padding-bottom:110px; pointer-events:none}
.bdhA__panel{position:relative; pointer-events:auto; background:var(--bdhA-paper);
  width:46%; min-width:min(100%,440px);
  padding:clamp(28px,3.4vw,48px) clamp(28px,3vw,48px) clamp(30px,3.4vw,46px) max(var(--bdhA-gut), calc((100% - var(--bdhA-wrap)) / 2 + var(--bdhA-gut)));
  box-shadow:0 0 0 1px rgba(29,29,27,.18), 0 2px 4px rgba(29,29,27,.08), 0 24px 48px -26px rgba(29,29,27,.4)}
.bdhA__panel > *{margin-block:0}
.bdhA__services{display:flex; align-items:center; gap:12px; margin:0 0 clamp(14px,1.6vw,22px) !important;
  font:700 12.5px/1.3 var(--bd-font-sans,Helvetica,Arial,sans-serif); letter-spacing:.14em; text-transform:uppercase}
.bdhA__services::before{content:""; flex:0 0 15px; height:15px; border:1.5px solid var(--bdhA-red); border-radius:50%;
  background:linear-gradient(var(--bdhA-red),var(--bdhA-red)) center/1.5px 100% no-repeat, linear-gradient(var(--bdhA-red),var(--bdhA-red)) center/100% 1.5px no-repeat}
.bdhA__h1{font-family:var(--bd-font-serif,Georgia,serif); font-weight:400; font-size:clamp(40px,4.3vw,68px); line-height:1; letter-spacing:-.022em; max-width:9.6em; color:var(--bdhA-ink)}
.bdhA__sub{margin-top:clamp(10px,1.1vw,16px) !important; font:400 clamp(21px,1.9vw,28px)/1.2 var(--bd-font-serif,Georgia,serif); letter-spacing:-.01em}
.bdhA__lead{margin-top:clamp(14px,1.4vw,20px) !important; font:400 clamp(17px,1.3vw,19px)/1.45 var(--bd-font-sans,Helvetica,Arial,sans-serif); color:var(--bd-ink-2,#2B2B2A); max-width:34em}
.bdhA .bd-hero__welten{margin-top:clamp(18px,2vw,28px) !important}
.bdhA .wp-block-buttons{display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:clamp(18px,2vw,26px) !important}

/* Bedienung: unten rechts wie auf der Website (bd-heroctrl) */
.bdhA__ctrl{position:absolute; z-index:3; right:max(14px, calc((100% - var(--bdhA-wrap)) / 2 + var(--bdhA-gut))); bottom:16px}
.bdhA__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(--bdhA-ink); color:#fff; cursor:pointer; font:600 14px/1 var(--bd-font-sans,Helvetica,Arial,sans-serif); letter-spacing:.01em}
.bdhA__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}
.bdhA__toggle[data-state="paused"]::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}
.bdhA__toggle:hover{border-color:var(--bdhA-red)}
.bdhA__toggle:focus-visible{outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 5px var(--bdhA-ink)}
.bdhA__toggle[hidden]{display:none}
.bdhA__config{display:none}

/* ---------- Mobil: eigene Komposition ---------- */
@media (max-width:819px){
  .bdhA{min-height:0; display:flex; flex-direction:column; background:var(--bdhA-paper)}
  .bdhA__inner{order:1; padding:0}
  .bdhA__panel{width:100%; min-width:0; box-shadow:none; padding:20px var(--bdhA-gut) 26px}
  .bdhA__stage{position:relative; order:2; inset:auto; height:min(108vw,460px)}
  .bdhA__ctrl{left:auto; right:12px; bottom:12px}
  .bdhA__toggle{font-size:13px; padding:0 10px}
    .bdhA .bd-hero__welten a strong{font-size:23px}
  .bdhA .wp-block-buttons,.bdhA .bd-btn,.bdhA .bd-btn .wp-block-button__link{width:100%}
  .bdhA__h1{font-size:clamp(34px,9.4vw,44px)}
  .bdhA__lead{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.bdhA *{transition:none !important}}