/* =====================================================================
   Bayer Druck GmbH – Hero NEU B „Makro: Veredelung“ (Neukonzept 28.10.2026, ENTWURF)
   Seite /etiketten-fuer-wein-spirituosen-bier/ (WP 144). Ersetzt „Das Schaufenster“ (archiviert).
   Eigener Namensraum .bdhB – keine globalen Selektoren. Heller neutraler Grund, Lesefläche weiß,
   HKS 14 nur als Signal. Klassen der Lesefläche (bdhB__panel, __leseflaeche, __services, __h1, __lead,
   __actions) und der Bedienung unverändert.
   Desktop: Bühne liegt hinter der ganzen Sektion, Lesefläche links (≈ 46 %).
   Mobil/Hochformat: Lesefläche oben, Film darunter (eigene Fläche, 420 px hoch).
   ===================================================================== */
.bdhB{
  --bdhB-red:#E30613; --bdhB-ink:#1D1D1B; --bdhB-ink2:#2B2B2A;
  --bdhB-paper:#FFFFFF; --bdhB-table:#E3E3E1; --bdhB-mute:#555555;
  --bdhB-serif:Charter,"Bitstream Charter","Iowan Old Style","Source Serif 4",Georgia,serif;
  --bdhB-sans:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",system-ui,sans-serif;
  --bdhB-wrap:1280px; --bdhB-gut:clamp(16px,2.4vw,32px);
  --bdhB-offset:105px;               /* Seitenkopf (Blocksy + Brotkrumen) */
  --bdhB-film-m:420px;               /* Filmhöhe mobil */
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  min-height:clamp(560px, calc(100vh - var(--bdhB-offset)), 940px);
  min-height:clamp(560px, calc(100svh - var(--bdhB-offset)), 940px);
  background:var(--bdhB-table); color:var(--bdhB-ink);
  font-family:var(--bdhB-sans); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.bdhB *,.bdhB *::before,.bdhB *::after{box-sizing:border-box}

/* Film: Poster (ohne JS) und Canvas */
.bdhB__stage{position:absolute; inset:0; z-index:0; background:var(--bdhB-table)}
.bdhB__poster,.bdhB__poster img{display:block; width:100%; height:100%}
.bdhB__poster img{object-fit:cover; object-position:75% 100%}
.bdhB__canvas{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .45s ease}
.bdhB--live .bdhB__canvas{opacity:1}
/* Poster (= Endbild) bleibt unter dem Canvas stehen: keine leere Fläche beim Laden, weicher Übergang zum Film */
.bdhB__config{display:none}

/* Lesefläche links: weißer Bogen, ≈ 46 % Breite */
.bdhB__inner{position:relative; z-index:1; flex:1 1 auto; display:flex; flex-direction:column; align-items:flex-start;
  padding-top:clamp(20px,4.5vh,52px); padding-bottom:96px; pointer-events:none}
.bdhB__panel{position:relative; pointer-events:auto; background:var(--bdhB-paper);
  padding:clamp(24px,2.4vw,36px) clamp(28px,3vw,44px) clamp(24px,2.4vw,34px) max(var(--bdhB-gut), calc((100% - var(--bdhB-wrap)) / 2 + var(--bdhB-gut)));
  width:42%; max-width:min(100%, calc((100% - var(--bdhB-wrap)) / 2 + 600px));
  min-width:min(100%, 420px);   /* 01.11.2026: schmaler (vorher 46 %); 42 % hält den Anfrageknopf im ersten Bild */
  box-shadow:0 0 0 1px rgba(29,29,27,.16), 0 2px 4px rgba(29,29,27,.07), 0 24px 48px -26px rgba(29,29,27,.38)}
.bdhB__panel > *{margin-block:0}
.bdhB__services{display:flex; align-items:center; gap:12px; margin:0 0 clamp(12px,1.3vw,18px) !important;
  font:700 12.5px/1.3 var(--bdhB-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--bdhB-ink)}
.bdhB__h1{margin:0; font-family:var(--bdhB-serif); font-weight:400; font-size:clamp(38px,3.7vw,56px); line-height:1.0; letter-spacing:-.022em; max-width:9.6em; color:var(--bdhB-ink)}
.bdhB__sub{margin-top:clamp(10px,1.1vw,16px) !important; font-family:var(--bdhB-serif); font-weight:400; font-size:clamp(20px,1.65vw,25px); line-height:1.2; letter-spacing:-.01em; color:var(--bdhB-ink)}
.bdhB__lead{margin-top:clamp(14px,1.4vw,20px) !important; font:400 clamp(16px,1.15vw,17px)/1.45 var(--bdhB-sans); color:var(--bdhB-ink2); max-width:36em}
.bdhB .bd-hero__welten a strong{font-size:clamp(22px,1.8vw,27px)}
.bdhB .bd-hero__welten a{padding-top:10px; padding-bottom:11px}
.bdhB .bd-hero__welten{margin-top:clamp(16px,1.6vw,22px) !important}
.bdhB .wp-block-buttons{margin-top:clamp(16px,1.6vw,22px) !important}
.bdhB .bd-btn .wp-block-button__link:focus-visible{box-shadow:0 0 0 6px var(--bdhB-paper)}

/* Bedienung: Pause/Abspielen mit sichtbarer Beschriftung (unten rechts, bd-heroctrl) */
.bdhB .bd-heroctrl{z-index:3}
.bdhB__toggle{height:44px; padding:0 14px 0 12px; display:inline-grid; grid-template-columns:14px auto; align-items:center; column-gap:10px;
  border:1px solid rgba(255,255,255,.6); border-radius:0; cursor:pointer; background:var(--bdhB-ink); color:var(--bdhB-paper);
  font:600 14px/1 var(--bdhB-sans); letter-spacing:.01em}
.bdhB__toggle::before{content:""; width:12px; height:14px;
  background:linear-gradient(currentColor,currentColor) left/4px 100% no-repeat, linear-gradient(currentColor,currentColor) right/4px 100% no-repeat}
.bdhB__toggle[data-state="paused"]::before{width:0; height:0; background:none; border-style:solid; border-width:7px 0 7px 12px; border-color:transparent transparent transparent currentColor}
.bdhB__toggle:hover{border-color:var(--bdhB-red)}
.bdhB__toggle:focus-visible{outline:3px solid var(--bdhB-paper); outline-offset:2px; box-shadow:0 0 0 5px var(--bdhB-ink)}
.bdhB__toggle[hidden]{display:none}

/* Mobil / Hochformat: Lesefläche oben, Film darunter (eigene Fläche) */
@media (max-width:819px), (orientation:portrait) and (max-width:1100px){
  .bdhB{min-height:0}
  .bdhB__inner{padding:0; align-items:stretch}
  .bdhB__panel{width:auto; max-width:none; min-width:0; padding:22px var(--bdhB-gut) 24px;
    box-shadow:0 1px 0 rgba(29,29,27,.16), 0 8px 18px -10px rgba(29,29,27,.3)}
  .bdhB__h1{font-size:clamp(34px,9.4vw,52px); max-width:none}
  .bdhB__sub{font-size:clamp(20px,5vw,28px)}
  .bdhB__spacer{flex:0 0 auto; height:var(--bdhB-film-m)}
  .bdhB__stage{top:auto; bottom:0; height:var(--bdhB-film-m)}
  .bdhB__poster img{object-position:50% 50%}
  .bdhB .bd-heroctrl{bottom:12px}
}
@media (max-width:519px){
  .bdhB .bd-hero__welten a strong{font-size:23px}
  .bdhB .wp-block-buttons,.bdhB .bd-btn,.bdhB .bd-btn .wp-block-button__link{width:100%}
  .bdhB__toggle{padding:0 10px; font-size:13px}
}
@media (forced-colors:active){ .bdhB__toggle{border:2px solid ButtonText} }
@media (prefers-reduced-motion:reduce){ .bdhB *{transition:none !important} }

/* 01.11.2026 (URL 01, Freigabe A): Mobil/Hochformat – Film direkt unter der Überschrift, Anfrageknopf direkt darunter,
   Einleitung danach. Lesefläche wird per display:contents in das Raster der Sektion aufgelöst. */
@media (max-width:819px), (orientation:portrait) and (max-width:1100px){
  .bdhB{display:grid; grid-template-columns:100%; grid-template-areas:"srv" "h1" "film" "act" "lead"; background:var(--bdhB-paper)}
  .bdhB__inner,.bdhB__panel,.bdhB__leseflaeche{display:contents}
  .bdhB__spacer{display:none}
  .bdhB__services{grid-area:srv; padding:20px var(--bdhB-gut) 0 !important; margin:0 0 10px !important}
  .bdhB__h1{grid-area:h1; padding:0 var(--bdhB-gut) 18px}
  .bdhB__stage{grid-area:film; position:relative; inset:auto; height:auto; aspect-ratio:4 / 3; max-height:460px; width:100%}
  .bdhB .bd-heroctrl{grid-area:film}
  .bdhB__actions{grid-area:act; padding:18px var(--bdhB-gut) 0}
  .bdhB__lead{grid-area:lead; padding:0 var(--bdhB-gut) 26px}
}