/* =====================================================================
   Bayer Druck – Integration der Hero-Filme 01/02/03 in Blocksy + Gutenberg (ENTWURF – Gate G12 ausstehend)
   Die Film-Dateien (assets/hero/0X/hero.css|js) sind unverändert aus 06_DESIGN_SYSTEM/HERO_KONZEPTE übernommen.
   Diese Datei regelt nur: volle Breite im Inhaltsbereich, Abstände der Gutenberg-Blöcke in der Lesefläche,
   Kopfhöhe (Blocksy 84 px + Entwurfszeile), sichtbar beschriftete Bedienung (Pause), Hinweis „Illustration“.
   Vorlage: TEST_HYBRID V3 (proto.css §7, Stand bc43174). Lädt nur auf Seiten mit Film.
   ===================================================================== */

/* volle Breite im Blocksy-Inhaltsbereich, keine Fluss-Abstände */
.bd-page .entry-content > .bd-heroanim{width:100vw;max-width:100vw;margin:0 calc(50% - 50vw)}
.bd-heroanim :where(.wp-block-group,.wp-block-buttons,.wp-block-button) > *,.bd-heroanim :where(h1,p,ul,ol){margin-block:0}
.bd-heroanim .wp-block-buttons{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.bd-heroanim .bd-tlink{margin:0}

/* Bedienung mit sichtbarer Beschriftung (Pause = sichtbare Bewegungsabschaltung) */
.bd-heroctrl{position:absolute;z-index:3;right:max(14px,calc((100% - var(--bd-wrap)) / 2 + var(--bd-gut)));bottom:14px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.bd-heroctrl [hidden]{display:none !important}
.bd-heronote{position:absolute;z-index:2;top:12px;right:max(14px,calc((100% - var(--bd-wrap)) / 2 + var(--bd-gut)));margin:0;white-space:nowrap;font:500 12px/1.3 var(--bd-font-sans);color:#d9d9d9;background:#161616;padding:3px 8px}

/* ---------- Film 01 „Druckküche“ – Startseite ---------- */
.bdh-dk.bd-heroanim{--bdh-offset:112px}
@media (max-width:1023px){.bdh-dk.bd-heroanim{--bdh-offset:118px}}
.bdh-dk .bdh-dk__panel{display:block}
.bdh-dk .bdh-dk__services{font-size:12.5px}
.bdh-dk .bdh-dk__h1{font-family:var(--bd-font-serif);font-weight:400;color:var(--bd-ink)}
.bdh-dk .bdh-dk__sub{font-family:var(--bd-font-serif)}
.bdh-dk .bd-hero1__sub{margin-top:clamp(14px,1.4vw,20px);font:400 clamp(17px,1.3vw,19px)/1.45 var(--bd-font-sans);color:var(--bd-ink-2);max-width:34em}
.bdh-dk .bd-hero__welten{margin-top:clamp(18px,2vw,28px)}
.bdh-dk .wp-block-buttons{margin-top:clamp(18px,2vw,26px)}
.bdh-dk .bd-btn .wp-block-button__link:focus-visible{box-shadow:0 0 0 6px var(--bd-paper)}
.bd-heroctrl .bdh-dk__toggle{position:static;width:auto;height:44px;padding:0 14px 0 12px;display:inline-grid;align-items:center;justify-items:start;column-gap:10px;font:600 14px/1 var(--bd-font-sans);letter-spacing:.01em}
.bd-heroctrl .bdh-dk__toggle{grid-template-columns:14px auto}
.bd-heroctrl .bdh-dk__toggle::before{grid-area:1/1;margin-left:0}
.bd-heroctrl .bdh-dk__vh{grid-area:1/2;position:static !important;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:nowrap}
@media (max-width:819px),(orientation:portrait) and (max-width:1100px){
  .bdh-dk .bdh-dk__panel{padding-top:20px;padding-bottom:22px}
  .bdh-dk .bdh-dk__spacer{min-height:300px}
  .bdh-dk .bd-heronote{top:auto;bottom:66px;right:auto;left:var(--bd-gut);white-space:normal;max-width:calc(100% - 2 * var(--bd-gut))}
}
@media (max-width:519px){
  .bdh-dk .bd-hero1__sub{font-size:17px}
  .bdh-dk .bdh-dk__h1{font-size:clamp(34px,9.4vw,44px)}
  .bdh-dk .bd-hero__welten a strong{font-size:23px}
  .bdh-dk .wp-block-buttons,.bdh-dk .bd-btn,.bdh-dk .bd-btn .wp-block-button__link{width:100%}
  .bdh-dk .bd-heroctrl{left:var(--bd-gut);right:var(--bd-gut)}
  .bd-heroctrl .bdh-dk__toggle{padding:0 10px;font-size:13px}
}
@media (max-width:374px){
  .bdh-dk .bd-hero__welten a strong{font-size:20px}
  .bdh-dk .bd-heronote{bottom:118px}
}

/* ---------- Film 02 „Papier wird Welt“ – Getränke ---------- */
.bdh2.bd-heroanim{--bdh2-offset:112px}
.bdh2 .bdh2__copy{display:grid}
.bdh2 .bdh2__h1{color:var(--bd-ink)}
.bdh2 .bdh2__sub{color:var(--bd-ink-2)}
.bdh2 .bdh2__actions .wp-block-buttons{margin:0}
.bdh2 .bd-heroctrl{right:var(--bdh2-gut);bottom:var(--bdh2-gut)}
.bd-heroctrl .bdh2__toggle{position:static;width:auto;gap:8px;padding:0 12px}
.bd-heroctrl .bdh2__toggle::after{content:attr(aria-label);font:600 13px/1 var(--bd-font-sans);letter-spacing:.01em}
.bdh2[data-bdh2="static"] .bd-heroctrl,.bdh2[data-bdh2="fallback"] .bd-heroctrl{display:none}
.bdh2 .bd-heronote{color:#333;background:rgba(255,255,255,.9)}
@media (max-width:899px),(max-aspect-ratio:4/5){
  .bdh2 .bd-heronote{top:auto;bottom:66px;right:auto;left:var(--bdh2-gut);white-space:normal;max-width:calc(100% - 2 * var(--bdh2-gut))}
}

/* ---------- Film 03 „Präzision hat eine Handschrift“ – Veredelung ---------- */
.bd-h3.bd-heroanim{--bd-h3-offset:112px}
.bd-h3 .bd-h3__text > *{margin-block:0}
.bd-h3 .bd-h3__h1{color:var(--bd-ink)}
.bd-h3 .bd-h3__stmt{margin-top:clamp(10px,1.6vh,16px);font:400 clamp(21px,1.9vw,28px)/1.2 var(--bd-font-serif);letter-spacing:-.01em;color:var(--bd-ink)}
.bd-h3 .bd-h3__sub{max-width:36ch}
.bd-h3 .bd-h3__actions{margin-top:clamp(24px,4vh,40px)}
.bd-h3 .bd-heronote{top:12px;right:16px;color:#d9d9d9;background:#161616}
@media (max-width:899px){.bd-h3 .bd-heronote{white-space:normal;max-width:calc(100% - 32px);left:16px;right:auto}}
@media (max-width:479px){.bd-h3 .bd-btn,.bd-h3 .bd-btn .wp-block-button__link,.bd-h3 .wp-block-buttons{width:100%}}

/* reduzierte Bewegung: Filme zeigen selbst ihr Standbild; hier nur Übergänge aus */
@media (prefers-reduced-motion:reduce){.bd-heroanim *{transition:none !important}}

/* Einbindung als Seitenkopf (Textrunde 4): mehrzeilige H1 ohne hängenden Einzug, Lead und Buttons bündig */
.bd-heroanim--02 .bdh2__h1{padding-left:0;text-indent:0}
.bd-heroanim--02 .bdh2__sub,.bd-heroanim--02 .bdh2__actions{padding-left:0}

/* Hero-Neubau 13.10.2026: generische Lesefläche für die neuen Filme (Spezifität 0 – Film-CSS hat Vorrang) */
:where(.bdhA,.bdhB,.bdhc) :where([class*="__panel"],[class*="__leseflaeche"]) > *{margin-block:0}
:where(.bdhA,.bdhB,.bdhc) :where([class*="__services"]){display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin:0 0 clamp(14px,1.6vw,22px);font:700 12px/1.3 var(--bd-font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--bd-ink)}
:where(.bdhA,.bdhB,.bdhc) :where([class*="__services"]) :where([class*="__sep"],[class*="__dot"]){color:var(--bd-mute);font-weight:400}
:where(.bdhA,.bdhB,.bdhc) :where([class*="__pk"]){flex:0 0 15px;width:15px;height:15px;color:var(--bd-red)}
:where(.bdhA,.bdhB,.bdhc) :where([class*="__h1"]){margin:0;font-family:var(--bd-font-serif);font-weight:400;color:var(--bd-ink)}
:where(.bdhA,.bdhB,.bdhc) :where([class*="__sub"]){margin-top:clamp(10px,1.1vw,16px);font:400 clamp(21px,1.9vw,28px)/1.2 var(--bd-font-serif);letter-spacing:-.01em;color:var(--bd-ink)}
:where(.bdhA,.bdhB,.bdhc) :where([class*="__lead"]){margin-top:clamp(14px,1.4vw,20px);font:400 clamp(17px,1.3vw,19px)/1.45 var(--bd-font-sans);color:var(--bd-ink-2);max-width:34em}
:where(.bdhA,.bdhB,.bdhc) :where([class*="__actions"]){display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(22px,2.4vw,34px)}
:where(.bdhA,.bdhB,.bdhc) :where([class*="__actions"]) .wp-block-buttons{margin:0}
:where(.bdhA,.bdhB,.bdhc) .bd-hero__welten{margin-top:clamp(18px,2vw,28px)}
/* Hero-Neubau N-07: Bühne nie höher als der sichtbare Bereich unter dem Kopf (Pause-Taste bleibt im ersten Bildschirm) */
@media (min-width:1024px){:where(.bdhA,.bdhB,.bdhc).bd-heroanim{max-height:calc(100vh - var(--bd-hdr-h,84px) - 22px);min-height:600px;overflow:hidden}}

/* Fix 04.11.2026 (M-014/M-046, PRUEFUNG_FILME_PHARMA_DRUCKSACHEN_0411 §1): Pausetaste der Filmseiten im ersten Bildschirm.
   Desktop: Taste bleibt unten rechts, rückt aber höchstens so weit hoch, dass sie 14/16 px über der Falz endet
   (Kopf der Filmseite = Kopfzeile --bd-hdr-h + Brotkrume ≈ 40 px). Ohne Überlänge des Films unverändert.
   Mobil: Taste an der Oberkante der Filmfläche (Druckküche: --bdh-film-top setzt hero.js; Film A: Bühne ist die letzte Fläche, Höhe min(108vw,460px)). */
.bd-film-seite .bd-heroctrl{bottom:max(14px,calc(100% + var(--bd-hdr-h,122px) + 40px + 14px - 100vh))}
.bd-film-seite .bdhA__ctrl{bottom:max(16px,calc(100% + var(--bd-hdr-h,122px) + 40px + 16px - 100vh))}
/* Owner 04.11.2026 (Abstand zum Logo): Die Logo-Signatur der Druckküche steht in der Bedienzeile links neben der ursprünglichen Tastenlage (unten 14 px).
   Muss die Taste für den ersten Bildschirm angehoben werden, steigt sie um eine ganze Zeile: mindestens 76 px (= 14 px + 44 px Taste + 18 px Abstand,
   gleich dem waagerechten Abstand Logo–Taste) – nie mehr knapp schräg über dem Logo. Passt der Film ganz in den Bildschirm, bleibt die Bedienzeile unverändert. */
.bdh-dk.bd-film-seite .bd-heroctrl{bottom:max(14px,calc(100% + var(--bd-hdr-h,122px) + 40px + 14px - 100vh),min(76px,max(0px,calc((100% + var(--bd-hdr-h,122px) + 40px - 100vh) * 1000))))}
@media (max-width:819px),(orientation:portrait) and (max-width:1100px){
  .bdh-dk.bd-film-seite .bd-heroctrl{top:calc(var(--bdh-film-top,0px) + 12px);bottom:auto}
}
@media (max-width:819px){
  .bdhA.bd-film-seite .bdhA__ctrl{top:auto;bottom:calc(min(108vw,460px) - 56px)}
}