/* Hero-Film groß ansehen + Personenkarte versetzt (Victor, 21.10.2026):
   „das Video sollte größer werden, wenn wir das anklicken“ und die Victor-Karte
   „woanders hinsetzen, weil das da ein bisschen stört, wenn man mit der Maus darüber geht“.
   Ergänzt herofilm-hero-3a7388ccb32c.css; Knopf und Dialog entstehen erst per JS,
   ohne JS bleibt der Film wie bisher im Hero abspielbar.
   Korrektur nach QA 21.10.2026: Vorschau über der Fortschrittsleiste des Leistungsstapels,
   Karte im Raster nach dem Film (einspaltig darunter), Knopf mobil nur als Symbol. */

/* ---- Personenkarte: eigenes Rasterelement des Hero, im DOM direkt nach der Filmspalte ---- */
/* Einspaltig (unter 900 px) steht sie damit unter dem Film, Tab-Reihenfolge = Lesereihenfolge. */
.hero--werk > a.person-karte{position:relative;left:auto;bottom:auto;z-index:3;display:inline-flex;gap:10px;justify-self:center;align-self:start;margin:0;padding:6px 18px 6px 6px;text-align:left;transition:box-shadow 200ms ease,transform 200ms ease,z-index 0s linear 340ms}
.hero--werk > a.person-karte > img{width:44px;height:44px}
/* Stapelkontexte: Weder .hero noch .hero__wort, main oder #leistungen bilden einen; Karte (z 3)
   und .kann-fortschritt (sticky, z 6) liegen beide im Wurzelkontext. Nur solange die Vorschau
   offen ist, kommt die Karte auf 20: über die Leiste (6, Abstand für spätere kleine Anhebungen),
   unter Anrufknopf und Menü (90) und Seitenkopf (100); der Film-Dialog liegt in der obersten
   Ebene. Das Absenken wartet, bis die Vorschau ausgeblendet ist (220/320 ms), damit sie beim
   Schließen nicht unter die Leiste rutscht. */
.hero--werk > a.person-karte:hover,
.hero--werk > a.person-karte:focus-visible,
.hero--werk > a.person-karte:focus-within{z-index:20;transition:box-shadow 200ms ease,transform 200ms ease,z-index 0s}
/* Die große Vorschau öffnet nach unten, nicht über Handlungsaufruf und Bewertung. */
.hero--werk > a.person-karte .person-karte__gross{top:calc(100% + 12px);bottom:auto;transform-origin:30px 0;transform:translateY(-10px) scale(.96)}
.hero--werk > a.person-karte .person-karte__gross::after{top:auto;bottom:100%;height:14px}
.hero--werk > a.person-karte:hover .person-karte__gross,
.hero--werk > a.person-karte:focus-visible .person-karte__gross{transform:none}
/* Karte ganz unter dem festen Kopf (Klasse aus herofilm-gross.js): Vorschau zu, Karte zurück auf 3.
   Nur dann kann der Leistungsstapel angedockt sein; seine Leiste bleibt so immer oben. */
.hero--werk > a.person-karte.person-karte--verdeckt{z-index:3}
.hero--werk > a.person-karte.person-karte--verdeckt .person-karte__gross{opacity:0;pointer-events:none}
/* Zweispaltig: Karte links unter dem Text, Film über beide Zeilen. align-content hält beide
   Zeilen zusammen (wie vorher die eine Zeile), row-gap 0 + margin-top wie zuvor im Textfluss. */
@media (min-width:900px){
  .hero--werk{grid-template-rows:auto auto;row-gap:0;align-content:center}
  .hero--werk > .hero__wort{grid-column:1;grid-row:1}
  .hero--werk > .herofilm-spalte{grid-column:2;grid-row:1 / span 2}
  .hero--werk > a.person-karte{grid-column:1;grid-row:2;justify-self:start;margin-top:18px}
}
/* Unter 980 px steht unter der Karte kein freier Platz für die Vorschau. */
@media (max-width:979px){
  .hero--werk > a.person-karte .person-karte__gross{display:none}
}

/* ---- Knopf „Groß ansehen“ am Film ---- */
.herofilm{position:relative}
.herofilm__gross{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 14px 6px 11px;border:1.5px solid #19191C;border-radius:999px;background:rgba(255,255,255,.95);color:#19191C;font:inherit;font-size:14px;font-weight:650;line-height:1;cursor:pointer;box-shadow:2px 3px 0 #eae7ff;transition:transform 160ms ease,box-shadow 160ms ease}
.herofilm__gross svg{display:block;width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.herofilm__gross:hover{transform:translateY(-1px);box-shadow:3px 4px 0 #eae7ff}
.herofilm__gross:focus-visible{outline:3px solid #12636a;outline-offset:3px}
@media (pointer:coarse){.herofilm__gross{min-height:40px}}
/* Schmal: nur das Symbol (Name per aria-label „Film groß ansehen“), oben mittig. Links oben steht
   im Standbild die acessio.de-Marke, rechts unten schwebt dauerhaft der Anrufknopf (.anruf) und
   reicht im ersten Bildschirm bis an die rechte obere Filmecke. Oben mittig ist das Standbild
   bis 27 % der Höhe leer; 6 + 36 px passen ab 320 px Breite darüber. Trefferfläche 44 px. */
@media (max-width:599px){
  .herofilm__gross{top:6px;right:auto;left:calc(50% - 18px);box-sizing:border-box;width:36px;height:36px;min-height:0;padding:0;justify-content:center;gap:0}
  .herofilm__gross > span{display:none}
  .herofilm__gross svg{width:16px;height:16px}
  .herofilm__gross::after{content:"";position:absolute;inset:-4px;border-radius:50%}
}

/* Platzhalter, solange der Film im großen Fenster läuft: hält die Höhe, kein Springen. */
.herofilm__platz{display:block;width:100%;aspect-ratio:16/9;background:#F3F1F0 center/cover no-repeat;border:1.5px solid #19191C;border-radius:18px 22px 17px 20px;box-shadow:6px 7px 0 #eae7ff}
@media (max-width:900px){.herofilm__platz{box-shadow:4px 5px 0 #eae7ff}}

/* ---- Großes Fenster (natives <dialog>, showModal) ---- */
html.herofilm-offen{overflow:hidden}
/* Nur bei klassischer Bildlaufleiste: Rinne halten (kein Springen) und dunkel füllen, weil
   ::backdrop die Rinne nicht abdeckt. */
html.herofilm-rinne{scrollbar-gutter:stable;background:#202023}
.herofilm-gross{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden;overscroll-behavior:contain}
.herofilm-gross[open]{display:grid;place-items:center}
.herofilm-gross::backdrop{background:rgba(14,14,17,.92)}
.herofilm-gross__buehne{width:min(92vw,calc((100vh - 144px) * 16 / 9))}
@supports (height:100dvh){.herofilm-gross__buehne{width:min(92vw,calc((100dvh - 144px) * 16 / 9))}}
.herofilm-gross__buehne video{display:block;width:100%;height:auto;max-width:none;aspect-ratio:16/9;margin:0;border:0;border-radius:14px;background:#000;box-shadow:0 30px 90px -30px rgba(0,0,0,.7)}
.herofilm-gross__buehne video:focus-visible{outline:3px solid #22C7D6;outline-offset:4px}
.herofilm-gross__zu{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px 8px 14px;border:0;border-radius:999px;background:#fff;color:#19191C;font:inherit;font-size:15px;font-weight:650;line-height:1;cursor:pointer;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.herofilm-gross__zu svg{display:block;width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.herofilm-gross__zu:hover{background:#F3F1F0}
.herofilm-gross__zu:focus-visible{outline:3px solid #22C7D6;outline-offset:3px}
/* Telefon hoch oder quer: Film nutzt die ganze Fläche, ohne Vollbild zu erzwingen. */
@media (max-width:767px),(max-height:500px){
  .herofilm-gross__buehne{width:min(100vw,calc(100vh * 16 / 9))}
  @supports (height:100dvh){.herofilm-gross__buehne{width:min(100vw,calc(100dvh * 16 / 9))}}
  .herofilm-gross__buehne video{border-radius:0;box-shadow:none}
  .herofilm-gross__zu{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));padding:8px 14px 8px 12px;font-size:14px;background:rgba(255,255,255,.94)}
}
@media (prefers-reduced-motion:no-preference){
  .herofilm-gross[open] .herofilm-gross__buehne{animation:herofilm-auf 240ms cubic-bezier(.2,.8,.2,1)}
  .herofilm-gross[open]::backdrop{animation:herofilm-dunkel 200ms ease-out}
}
@keyframes herofilm-auf{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes herofilm-dunkel{from{opacity:0}to{opacity:1}}