/* Startseite mit Hintergrundfilm */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.film{position:fixed;inset:0;overflow:hidden;background:var(--flaeche)}
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* leichter Verlauf unten, damit die weiße Schrift auf jedem Filmbild lesbar bleibt */
.film-abdunklung{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 50% 64%,rgba(0,0,0,.55),rgba(0,0,0,.3) 70%),linear-gradient(to top,rgba(0,0,0,.35),rgba(0,0,0,0) 30%)}
/* Logo als Einheit: Unterkante der Schrift auf 82,8 % der Fensterhöhe */
.film{--w:min(36.4vw,67.2vh);--textunten:17.2%}
/* Logo mit neuem, breiterem Untertitel: Faktor 1,4061 hält Ø TO 4 und Firmenname in der bisherigen Größe */
.film-logo{position:absolute;left:50%;bottom:var(--textunten);transform:translateX(-50%);width:calc(var(--w) * 1.4061);height:auto;display:block}

.film-fuss{
  position:absolute;left:0;right:0;bottom:calc(clamp(1.25rem,4vh,3rem) + env(safe-area-inset-bottom));
  display:flex;align-items:baseline;justify-content:center;gap:clamp(1.25rem,2.4vw,3rem);
  padding:0 clamp(1rem,3vw,3rem);color:#fff;
}
/* Unterzeile */
.film-adresse{font-size:clamp(.72rem,.864vw,.96rem);letter-spacing:.04em;white-space:nowrap;text-transform:uppercase;line-height:1.4;text-align:center}
.film-adresse span{white-space:nowrap}
.film-adresse span+span{margin-left:.9em}
/* Kontakt: doppelt so groß wie die Unterzeile */
.film-kontakt{font-size:clamp(1.2rem,1.44vw,1.6rem);letter-spacing:.08em;text-transform:uppercase;color:#fff;line-height:1;white-space:nowrap;transition:opacity .2s}
.film-kontakt:hover{opacity:.75}

@media (max-width:1100px){
  /* Adresszeile steht hier zweizeilig gestapelt: Text knapp darüber setzen */
  .film{--textunten:calc(clamp(1.25rem,4vh,3rem) + 9rem)}
  .film-fuss{flex-direction:column;align-items:center;gap:1.1rem}
  .film-adresse{white-space:normal}
  .film-adresse span{display:block}
  .film-adresse span+span{margin-left:0}
}
@media (max-width:700px){
  .film{--w:58.8vw}
  .film-adresse{font-size:.744rem;line-height:1.6}
  .film-kontakt{font-size:1.24rem}
}

/* Kontakt + Lautsprecher */
.film-nav{display:flex;align-items:center;gap:clamp(.9rem,1.2vw,1.4rem)}
.film-ton{appearance:none;background:none;border:0;padding:.35em;margin:-.35em;cursor:pointer;color:#fff;opacity:.75;line-height:0;transition:opacity .2s}
.film-ton:hover,.film-ton:focus-visible{opacity:1}
.film-ton:focus-visible{outline:1px solid #fff;outline-offset:2px}
.film-ton svg{width:clamp(1.25rem,1.5vw,1.7rem);height:auto;display:block;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.film-ton .aus{display:none}
.film-ton.ist-aus .an{display:none}
.film-ton.ist-aus .aus{display:inline}

/* Einladung zur Musik: mittig über dem Logo, verschwindet nach dem ersten Klick */
.film{--logo-oben:calc(100% - var(--textunten) - var(--w) * 1.4061 * .4117)}
.film-einladung{
  position:absolute;left:50%;top:calc(var(--logo-oben) / 2);transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:.6em;
  appearance:none;background:none;border:0;padding:.6em .9em;cursor:pointer;
  font-family:var(--font);font-weight:300;color:#fff;
  font-size:clamp(1.1rem,1.6vw,1.9rem);letter-spacing:.06em;white-space:nowrap;
  opacity:.92;transition:opacity .6s ease, visibility .6s;
}
.film-einladung:hover{opacity:1}
.film-einladung:focus-visible{outline:1px solid #fff;outline-offset:2px}
.film-einladung svg{width:1.15em;height:auto;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.film-einladung.weg{opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:700px){ .film-einladung{font-size:1.05rem} }

/* Schallwellen: bauen sich nacheinander auf und wachsen dabei aus dem Lautsprecher heraus */
.film-einladung svg{width:1.3em;overflow:visible}
.film-einladung .welle{transform-box:view-box;transform-origin:12px 12px;opacity:0;animation:welle 2.8s ease-out infinite}
.film-einladung .w2{animation-delay:.3s}
.film-einladung .w3{animation-delay:.6s}
@keyframes welle{
  0%{opacity:0;transform:scale(.55)}
  18%{opacity:1}
  55%{opacity:1;transform:scale(1.5)}
  85%,100%{opacity:0;transform:scale(2)}
}
@media (prefers-reduced-motion:reduce){
  .film-einladung .welle{animation:none;opacity:1;transform:none}
}