/* ===== Logo-Film im Hero: das Turmhaus durch die Epochen (1.11.2026) =====
   Ablauf: Film spielt einmal, 5 s Standbild, dann wieder das ursprüngliche Logo
   mit Knopf „Animiertes Logo abspielen“ (v042). */
.hero:has(.logo-wechsel) { transition:padding-top 1.2s ease; }
.hero:has(.logo-film:not([hidden])) { padding-top:3.2rem; }
/* weiche Überblendung: Film und Logo liegen übereinander, Höhe gleitet mit */
.logo-wechsel { display:grid; transition:height 1.2s ease-in-out; }
.logo-wechsel.laeuft { overflow:hidden; }
.logo-wechsel > * { grid-area:1/1; align-self:start; width:100%; transition:opacity 1.2s ease-in-out; }
.logo-wechsel > .aus { opacity:0; }
.logo-ruhe .hero-logo { animation:none; }
.logo-film { max-width:600px; margin:0 auto 1.8rem; position:relative; }
.logo-film video { display:block; width:100%; height:auto; aspect-ratio:3/2;
  border-radius:12px; background:#ECE8DD;
  box-shadow:0 14px 36px var(--schatten), 0 0 0 1px var(--linie); }
.logo-film figcaption { margin-top:0.7rem; font-size:0.8rem; line-height:1.45;
  color:var(--text-weich); letter-spacing:0.02em; }
.logo-film-knopf { position:absolute; right:14px; top:14px; display:flex; align-items:center;
  gap:0.4rem; padding:0.45rem 0.9rem 0.45rem 0.7rem; border-radius:2rem; cursor:pointer;
  font:600 0.78rem/1 var(--sans); letter-spacing:0.03em; color:var(--weiss);
  background:rgba(45,62,47,0.78); border:0; transition:background .25s ease; }
.logo-film-knopf:hover, .logo-film-knopf:focus-visible { background:var(--text); }
.logo-film-knopf svg { width:16px; height:16px; fill:currentColor; }
.logo-film-knopf[hidden] { display:none; }
/* Ruhezustand = ursprüngliches Logo */
.logo-ruhe .hero-logo { margin-bottom:0.5rem; }
.logo-nochmal { display:inline-flex; align-items:center; gap:0.35rem; margin:0 auto 1.3rem;
  padding:0.35rem 0.8rem 0.35rem 0.6rem; border-radius:2rem; cursor:pointer;
  font:600 0.74rem/1 var(--sans); letter-spacing:0.03em; color:var(--akzent-tief);
  background:transparent; border:1px solid var(--linie);
  transition:background .25s ease, color .25s ease, border-color .25s ease; }
.logo-nochmal:hover, .logo-nochmal:focus-visible { background:var(--text); color:var(--weiss); border-color:var(--text); }
.logo-nochmal svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:600px) {
  .hero:has(.logo-film:not([hidden])) { padding-top:2rem; }
  .logo-film { margin-bottom:1.5rem; }
  .logo-film video { border-radius:8px; }
  .logo-film-knopf { right:8px; top:8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero:has(.logo-wechsel), .logo-wechsel, .logo-wechsel > * { transition:none; }
}