/* Bild-Heros (Owner 14.10.2026): gemeinsame Grundlage. Module: assets/bildhero/kNN/. Namensraum .bdb */
.bdb{position:relative;isolation:isolate;overflow:hidden;background:var(--bdb-grund,#161616);color:var(--bdb-text,#f5f5f5)}
.bdb__in{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);min-height:clamp(520px,72vh,760px);max-width:none}
.bdb__bild{position:relative;grid-column:1/-1;grid-row:1;overflow:hidden}
.bdb__bild > svg,.bdb__bild > canvas,.bdb__foto,.bdb__poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.bdb__bildquelle{position:absolute;inset:0;display:block}
.bdb__poster{object-fit:cover;object-position:var(--bdb-fokus,70% 50%)}
.bdb__illu{position:absolute;inset:0}
.bdb__foto{object-fit:cover;object-position:var(--bdb-fokus,70% 50%)}
.bdb__text{position:relative;z-index:3;grid-column:1/2;grid-row:1;align-self:center;padding:clamp(32px,5vw,72px) var(--bd-gut,24px) clamp(32px,5vw,72px) max(var(--bd-gut,24px),calc((100vw - var(--bd-wrap,1280px)) / 2 + var(--bd-gut,24px)))}
.bdb__text::before{content:"";position:absolute;inset:0 -30% 0 -100vw;z-index:-1;background:var(--bdb-schleier,linear-gradient(90deg,rgba(14,14,14,.86) 0%,rgba(14,14,14,.74) 62%,rgba(14,14,14,0) 100%))}
/* Hell-Variante (Text dunkel auf hellem Bild) */
.bdb--hell{--bdb-grund:#f2f2f2;--bdb-text:#1D1D1B;--bdb-schleier:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.82) 62%,rgba(255,255,255,0) 100%)}
/* Lesefläche: vorhandene Seitenklassen neutralisieren */
.bdb__text .bd-hubkopf__txt,.bdb__text .bd-lskopf__txt{display:grid;gap:16px;justify-items:start;max-width:min(620px,100%);min-width:0} /* 24.10.: Textblock nie breiter als die Spalte (fit-content-Breite eines Grid-Items lief sonst auf die Min-Content-Breite der H1) */
.bdb__text h1{color:inherit!important;margin:0}
.bdb__text p{color:inherit;max-width:58ch}
.bdb:not(.bdb--hell) .bdb__text a:not(.wp-block-button__link){color:#fff}
.bdb:not(.bdb--hell) .bdb__text .bd-tlink a,.bdb:not(.bdb--hell) .bdb__text .bd-aktionen p a{color:#fff}
/* Pause und Hinweis */
.bdb__pause{position:absolute;z-index:5;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.55);background:rgba(20,20,20,.62);color:#fff;font:600 14px/1 var(--bd-font-sans,Helvetica,Arial,sans-serif);cursor:pointer}
.bdb--hell .bdb__pause{border-color:rgba(0,0,0,.35);background:rgba(255,255,255,.8);color:#1D1D1B}
.bdb__pause:focus-visible{outline:3px solid #E30613;outline-offset:2px}
.bdb__hinweis{position:absolute;z-index:4;right:16px;top:12px;font:700 11px/1 var(--bd-font-sans,Helvetica,Arial,sans-serif);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;background:rgba(255,255,255,.86);color:#1D1D1B}
.bdb--foto .bdb__illu{display:none}
.bdb--foto .bdb__hinweis{display:none}
/* Foto-Modus: ruhiger Zoom + Lichtkante, wenn ein Beitragsbild gesetzt ist */
.bdb--foto .bdb__foto{animation:none}
/* 24.10.: Zoom auf dem Pseudo-Element der Bildquelle – das <img> bleibt in seiner Box (keine Überbreite im DOM), gleiche Datei aus dem Cache */
.bdb--foto .bdb__bildquelle{position:absolute;inset:0;display:block}
.bdb--foto .bdb__bildquelle::after{content:"";position:absolute;inset:0;background:var(--bdb-src-d) var(--bdb-fokus,70% 50%)/cover no-repeat;animation:bdb-zoom 18s var(--bd-ease,ease) both;transform-origin:50% 50%}
@media (max-width:899px){.bdb--foto .bdb__bildquelle::after{background-image:var(--bdb-src-m,var(--bdb-src-d))}}
.bdb--foto .bdb__bild::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,238,200,.18) 50%,transparent 60%) 0 0/250% 100% no-repeat;animation:bdb-licht 9s ease-in-out 1.2s infinite}
@keyframes bdb-zoom{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes bdb-licht{0%{background-position:120% 0}55%,100%{background-position:-60% 0}}
.bdb.is-pausiert *,.bdb.is-pausiert *::after,.bdb.is-pausiert .bdb__bild::after,.bdb.is-pausiert .bdb__bildquelle::after{animation-play-state:paused!important}
/* Bildfeld-Modus (Bild im rechten Kopffeld statt ganzer Hero) */
.bdb--feld{background:transparent;color:inherit;aspect-ratio:3/2;min-height:220px}
.bdb--feld .bdb__in{display:block;min-height:0;height:100%}
.bdb--feld .bdb__bild{position:absolute;inset:0}
/* Mobil: Bild oben, Text darunter */
@media (max-width:899px){
  .bdb:not(.bdb--feld) .bdb__in{grid-template-columns:minmax(0,1fr);min-height:0} /* 24.10.: 1fr = minmax(auto,1fr) ließ die Spalte auf die Min-Content-Breite der Knopfzeile wachsen (321 px bei 320 px) */
  .bdb:not(.bdb--feld) .bdb__bild{grid-row:1;aspect-ratio:var(--bdb-mobil-format,4/5);max-height:62vh;width:100%}
  .bdb:not(.bdb--feld) .bdb__text{grid-column:1;grid-row:2;padding:28px var(--bd-gut,16px) 36px}
  .bdb:not(.bdb--feld) .bdb__text::before{inset:0;background:var(--bdb-grund,#161616)}
  .bdb__pause{bottom:auto;top:calc(min(62vh,125vw) - 60px)}
}
@media (prefers-reduced-motion:reduce){.bdb *,.bdb .bdb__bild::after,.bdb .bdb__foto,.bdb .bdb__bildquelle::after{animation:none!important;transition:none!important}}

/* Größen je Rolle (Owner-Briefing: keine einheitlichen Hero-Größen) */
.bdb--kompakt .bdb__in{min-height:clamp(420px,56vh,600px)}
.bdb--platz{position:relative;margin:clamp(24px,3vw,40px) 0;aspect-ratio:var(--bdb-platz-format,16/9);min-height:240px;background:#161616}
.bdb--platz .bdb__in{display:block;min-height:0;height:100%}
.bdb--platz .bdb__bild{position:absolute;inset:0}
.bdb--platz .bdb__text{display:none}
@media (max-width:899px){.bdb--platz{aspect-ratio:var(--bdb-platz-format-m,4/5)}.bdb--platz .bdb__pause{top:auto;bottom:12px}}
/* Ohne JavaScript: Poster bleibt sichtbar, Pause-Knopf unnötig */
.bdb:not(.bdb--js) .bdb__pause{display:none}
/* Lesefläche außerhalb von .bd-sec: Schriftrollen der Seite übernehmen */
.bdb__lesen{display:grid;gap:16px;justify-items:start;max-width:640px}
.bdb__lesen .bd-hubkopf__txt,.bdb__lesen .bd-lskopf__txt{display:grid;gap:16px;justify-items:start}
.bdb__text h1{font-family:var(--bd-font-serif,Georgia,serif);font-weight:400;font-size:clamp(38px,5vw,76px);line-height:.98;letter-spacing:-.024em;overflow-wrap:break-word;hyphens:manual}
.bdb--kompakt .bdb__text h1{font-size:clamp(34px,4.2vw,64px)}
.bdb__text h2,.bdb__text h3{font-family:var(--bd-font-sans);font-weight:700}
.bdb__text .bd-label{display:flex;align-items:center;gap:12px;font:700 12.5px/1.3 var(--bd-font-sans);letter-spacing:.14em;text-transform:uppercase}
.bdb__text .bd-aktionen{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.bdb--feld .bdb__text,.bdb--platz .bdb__text{display:none}
.bdb__text .bdh2__copy,.bdb__text .bdh-dk__panel,.bdb__text .bd-h3__text{all:unset;display:grid;gap:16px}
.bdb__lesen > *{grid-column:auto!important;width:auto;max-width:100%}
/* Pause-Knopf dezent (Owner-Eindruck: Bewegung ist Beiwerk, nicht Bedienelement) */
.bdb__pause{min-height:36px;padding:0 12px;font-size:12.5px;font-weight:600;letter-spacing:.02em;border-color:rgba(255,255,255,.35);background:rgba(20,20,20,.42);opacity:.82;transition:opacity .2s}
.bdb__pause:hover,.bdb__pause:focus-visible{opacity:1}
.bdb__pause::before{content:"";width:8px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.bdb__pause[data-zustand="pause"]::before{width:0;height:0;border:0;border-left:9px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
@media (pointer:coarse){.bdb__pause{min-height:44px}}
/* Kleine Bildflächen (feld/platz): Hinweis und Pause kompakt, Pause nur als Symbol (Name bleibt per aria-label/Text für Screenreader) */
.bdb--feld .bdb__hinweis,.bdb--platz .bdb__hinweis{top:8px;right:8px;font-size:9.5px;padding:3px 6px;opacity:.85}
.bdb--feld .bdb__pause,.bdb--platz .bdb__pause{right:8px;bottom:8px;width:36px;min-height:36px;padding:0;justify-content:center;font-size:0;gap:0}
@media (pointer:coarse){.bdb--feld .bdb__pause,.bdb--platz .bdb__pause{width:44px;min-height:44px}}
/* Technik-Review 14.10.: Pause-Knopf kontraststark (≥ 4,5:1 auf jedem Bildgrund), im Bildfeld auch mobil sichtbar */
.bdb .bdb__pause{background:rgba(18,18,18,.82);border-color:rgba(255,255,255,.5);color:#fff;opacity:1}
.bdb--hell .bdb__pause{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.35);color:#1D1D1B}
@media (max-width:899px){.bdb--feld .bdb__pause,.bdb--platz .bdb__pause{top:auto;bottom:8px}}

/* 25.10. DEC-BD-1062: Kennzeichnung KI-gestützter Produktvisualisierungen (dezent, unten links, verlinkt auf Bildnachweis) */
.bdb__ki{position:absolute;z-index:4;left:12px;bottom:12px;font:500 11px/1 var(--bd-font-sans,Helvetica,Arial,sans-serif);letter-spacing:.04em;padding:5px 8px;background:rgba(20,20,20,.72);color:#fff;text-decoration:none;border-radius:2px}
.bdb__ki:hover,.bdb__ki:focus-visible{background:#1D1D1B;outline:2px solid #fff;outline-offset:1px}
.bdb--hell .bdb__ki{background:rgba(255,255,255,.85);color:#1D1D1B}
.bdb--hell .bdb__ki:hover,.bdb--hell .bdb__ki:focus-visible{background:#fff;outline-color:#1D1D1B}
@media (max-width:899px){.bdb__ki{bottom:auto;top:10px;left:10px}}
/* Owner 28.10.2026: Foto-Heros ohne „Animation anhalten“. WCAG 2.2.2 ohne Knopf: Bewegung endet nach höchstens 5 s (Zoom 4,5 s einmal, Lichtstreif einmal 0,6–4,4 s), danach Standbild */
.bdb--foto .bdb__pause{display:none!important}
.bdb--foto .bdb__bildquelle::after{animation-duration:4.5s}
.bdb--foto .bdb__bild::after{animation:bdb-licht 3.8s ease-in-out .6s 1 both}