/* wla.css — eigene Bausteine, unabhaengig von den CSS-Modulen des Spenders */

/* --- Dauerhafter WhatsApp-Knopf (PLAN Abschnitt 4) -----------------------
   Haengt wla/wa-knopf.js nach der Hydration ein (Ansage 12.09.2026); steht
   weder im Server-HTML noch im Payload. */
.wla-wa {
  position: fixed;
  right: var(--wla-rand);
  bottom: calc(var(--wla-rand) + env(safe-area-inset-bottom, 0px));   /* Safe-Area unten (Punkt 10) */
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.35em;
  border-radius: var(--wla-radius);
  background: var(--wla-whatsapp);
  color: #04231a;
  font: 600 clamp(13px, 11px + 0.3vw, 16px)/1 var(--font-twk), system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s var(--wla-ease-out),
              background-color 0.25s var(--wla-ease-out);
}

.wla-wa:hover,
.wla-wa:focus-visible { background: var(--wla-whatsapp-tief); color: #fff; transform: translateY(-2px); }

/* Sichtbarer Tastaturfokus (Regelbuch-Mindeststandard) */
.wla-wa:focus-visible { outline: 3px solid var(--wla-schrift); outline-offset: 3px; }

.wla-wa svg { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

/* Auf schmalen Geraeten nur das Zeichen — spart Platz, bleibt erreichbar */
@media (max-width: 480px) {
  .wla-wa { padding: 0.9em; }
  .wla-wa .wla-wa-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

@media (prefers-reduced-motion: reduce) {
  .wla-wa { transition: none; }
  .wla-wa:hover, .wla-wa:focus-visible { transform: none; }
}

@media print { .wla-wa { display: none; } }
/* Punkt 10: ueber dem Footer-Ende faehrt der Knopf aus dem Bild (wa-knopf.js) */
.wla-wa.wla-wa--weg { transform: translateY(calc(100% + var(--wla-rand) + env(safe-area-inset-bottom, 0px))); pointer-events: none; }
.wla-wa.wla-wa--weg:hover, .wla-wa.wla-wa--weg:focus-visible { transform: translateY(calc(100% + var(--wla-rand) + env(safe-area-inset-bottom, 0px))); }

/* --- Ticketshop (StageDates), einwilligungspflichtig nach W6 ------------- */
.wla-shop {
  max-width: 1088px;
  margin: clamp(48px, 8vw, 112px) auto;
  padding: 0 var(--wla-rand);
  color: var(--wla-schrift);
}

.wla-shop-kopf { margin-bottom: 24px; }

.wla-shop-titel {
  font: 600 clamp(24px, 18px + 1.2vw, 40px)/1.15 var(--font-twk), system-ui, sans-serif;
  margin: 0 0 0.4em;
}

.wla-shop-text { margin: 0; font: 400 clamp(15px, 14px + 0.2vw, 18px)/1.55 var(--font-twk), system-ui, sans-serif; max-width: 560px; color: var(--wla-schrift-2); line-height: 1.55; }

/* Geladen: der Platzhalter wird zur schlichten Huelle, sonst staucht
   `place-content: center` den Rahmen auf Inhaltsbreite (gemessen: 300 px). */
/* King, 4. Runde: "der obere Rand beim iframe bitte entfernen" -- die
   abgerundete Ecke oben schnitt sichtbar in den (hellen) Anbieter-Inhalt,
   wirkte wie ein Rand-/Ladefehler statt Gestaltung. */

/* --- Wortmarke im Header ------------------------------------------------
   Der Rahmen der Basis war 137x21 (Verhaeltnis 6,55) mit object-fit: fill.
   Das WLA-Zeichen hat 1023x614 (1,67) und wuerde darin breitgezogen.
   Deshalb eigener Rahmen und `contain`. */
[class*="Header_header_center_logo"] {
  width: clamp(52px, 4vw, 68px) !important;
  aspect-ratio: 1023 / 614;
  height: auto !important;
}
[class*="Header_header_center_logo"] img {
  object-fit: contain !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --- Events -------------------------------------------------------------
   Asymmetrisch: der Flyer traegt die Sektion, der Text sitzt daneben. */
.wla-events {
  max-width: 1088px;
  margin: clamp(48px, 8vw, 112px) auto clamp(24px, 4vw, 48px);
  padding: 0 var(--wla-rand);
  color: var(--wla-schrift);
}

.wla-events-kopf { margin-bottom: clamp(20px, 3vw, 36px); }

.wla-events-titel {
  font: 600 clamp(24px, 18px + 1.2vw, 40px)/1.15 var(--font-twk), system-ui, sans-serif;
  margin: 0 0 0.35em;
}

.wla-events-lead {
  margin: 0; max-width: 560px; color: var(--wla-schrift-2);
  font: 400 clamp(15px, 14px + 0.2vw, 18px)/1.55 var(--font-twk), system-ui, sans-serif;
}

.wla-event {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  border-top: 1px solid var(--wla-linie);
  padding-top: clamp(20px, 3vw, 36px);
}

.wla-event-bild {
  margin: 0; border-radius: 16px; overflow: hidden;
  background: rgba(255, 253, 226, 0.05);
  aspect-ratio: 1 / 1;
}
.wla-event-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

.wla-event-datum {
  display: block;
  font: 600 clamp(13px, 12px + 0.2vw, 15px)/1 var(--font-twk), system-ui, sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wla-schrift-2); margin-bottom: 0.7em;
}

.wla-event-name {
  font: 600 clamp(28px, 20px + 2vw, 56px)/1.05 var(--font-twk), system-ui, sans-serif;
  margin: 0 0 0.4em;
}

.wla-event-liste { list-style: none; margin: 0 0 clamp(20px, 3vw, 32px); padding: 0; }
.wla-event-liste li {
  display: flex; gap: 1em; padding: 0.55em 0;
  border-bottom: 1px solid var(--wla-linie);
  font: 400 clamp(15px, 14px + 0.2vw, 17px)/1.4 var(--font-twk), system-ui, sans-serif;
}
.wla-event-liste dt, .wla-event-liste .k {
  flex: 0 0 8.5em; color: var(--wla-schrift-3);
}

.wla-event-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }

.wla-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.9em 1.6em; border-radius: var(--wla-radius);
  font: 600 16px/1 var(--font-twk), system-ui, sans-serif; text-decoration: none;
  border: 1px solid var(--wla-schrift);
  background: var(--wla-schrift); color: var(--wla-grund);
  transition: background-color 0.25s var(--wla-ease-out), color 0.25s var(--wla-ease-out);
}
.wla-knopf:hover { background: transparent; color: var(--wla-schrift); }
.wla-knopf:focus-visible { outline: 3px solid var(--wla-schrift); outline-offset: 3px; }

.wla-knopf--zweit { background: transparent; color: var(--wla-schrift); }
.wla-knopf--zweit:hover { background: var(--wla-schrift); color: var(--wla-grund); }

@media (max-width: 720px) {
  .wla-event { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .wla-knopf { transition: none; } }

/* --- Spender-Showcase stilllegen -----------------------------------------
   Die Sektion bringt eine angeheftete Scroll-Mechanik mit, die den Aufbau
   ab Sektion 3 blockiert (sieben Ursachen ausgeschlossen, siehe
   _plan/BEFUND-SCROLL-UND-BILDER.md). Sie wird durch die eigene Galerie
   ersetzt und deshalb vollstaendig entfernt. */
/* #showcase display:none — zurueckgenommen 03.09.: Showcase traegt den Event-Flyer */

/* --- Showcase: eigenes Event-Bild -----------------------------------------
   Der grosse Bild-Slider der Basis (Showcase_showcase_thumbnailsDom) rendert
   bei uns nie (haengt vermutlich an total-items>1, unser Event ist ein
   Einzelstueck) — nur der winzige 42x24px-Slider-Indikator bleibt uebrig,
   der Titel-Text steht dann allein im Raum. hervorheben.js setzt dieses
   Bild eigenstaendig daneben, wie im Original (grosses Bild neben Text,
   kein Ueberlapp). */
.wla-feature-bild {
  position: absolute; top: 50%; right: var(--wla-rand); transform: translateY(-50%);
  width: min(40vw, 480px); aspect-ratio: 16/10; border-radius: 4px; overflow: hidden;
  z-index: 5; opacity: 0; transition: opacity .8s var(--wla-ease-out);
}
.wla-feature-bild.ist-da { opacity: 1; }
.wla-feature-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .wla-feature-bild { top: auto; bottom: 10%; right: var(--wla-rand); left: var(--wla-rand);
    transform: none; width: auto; }
}

/* --- Galerie: Aftermovies ------------------------------------------------
   Dunkler Grund, damit der Verlauf durchkommt — anders als die cremeweisse
   Spender-Sektion, die hier vorher sass. */
.wla-galerie {
  background: var(--wla-grund);
  color: var(--wla-schrift);
  padding: clamp(64px, 10vw, 140px) 0;
}

.wla-galerie-innen { max-width: 1088px; margin: 0 auto; padding: 0 var(--wla-rand); }

.wla-galerie-kopf { margin-bottom: clamp(28px, 4vw, 52px); max-width: 560px; }

.wla-galerie-titel {
  font: 600 clamp(24px, 18px + 1.2vw, 40px)/1.15 var(--font-twk), system-ui, sans-serif;
  margin: 0 0 0.35em;
}

.wla-galerie-lead {
  margin: 0; color: var(--wla-schrift-2);
  font: 400 clamp(15px, 14px + 0.2vw, 18px)/1.55 var(--font-twk), system-ui, sans-serif;
}

/* Asymmetrisch: die erste Kachel nimmt zwei Spalten, danach ruhiges Raster. */
.wla-galerie-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}
.wla-galerie-raster > :first-child { grid-column: 1 / -1; }

.wla-film {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 253, 226, 0.05);
  border: 1px solid var(--wla-linie);
  display: flex;
  align-items: flex-end;
  padding: clamp(14px, 2vw, 24px);
}

.wla-film video, .wla-film img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.wla-film-text { position: relative; z-index: 1; }

.wla-film-datum {
  display: block;
  font: 600 clamp(12px, 11px + 0.2vw, 14px)/1 var(--font-twk), system-ui, sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wla-schrift-3); margin-bottom: 0.55em;
}

.wla-film-name {
  margin: 0;
  font: 600 clamp(17px, 14px + 0.7vw, 26px)/1.2 var(--font-twk), system-ui, sans-serif;
}

/* Offener Platz: sichtbar als Platz, nicht als Fehler */
.wla-film[data-offen] { display: grid; place-content: center; text-align: center; }
.wla-film[data-offen] .wla-film-text { color: var(--wla-schrift-3); }
.wla-film[data-offen] .wla-film-name { font-weight: 400; }

@media (max-width: 720px) {
  .wla-galerie-raster { grid-template-columns: 1fr; }
  .wla-galerie-raster > :first-child { grid-column: auto; }
}

/* --- Durchgehender Verlaufs-Hintergrund ---------------------------------
   Vorher lag je Sektion ein eigenes Bild — an den Sektionsgrenzen entstand
   dadurch eine harte Kante. Jetzt eine einzige feste Flaeche hinter der
   ganzen Seite, die langsam wandert: keine Naht, und sie bewegt sich.
   Kein `position` auf den Sektionen, das hatte den Hero-Titel verschoben. */
/* (Standbild-Verlauf body::before/after entfernt 05.09. -- ersetzt durch die Basis-Hintergrundebenen mit eigenen Clips) */

/* Die Sektionen werden durchsichtig, damit die Flaeche durchscheint.
   Cremefarbene Sektionen der Basis behalten ihren hellen Grund. */
/* (entfernt 05.09.) */


/* --- Event-Karte im Bühnen-Layout ---------------------------------------
   Grosses Bild mittig, Titel darueberliegend, Angaben rechts. Klick auf das
   Bild fuehrt zum Ticketshop. Asymmetrisch: der Titel bricht bewusst ueber
   die linke Bildkante hinaus. */
.wla-buehne {
  max-width: 1400px;
  margin: clamp(48px, 8vw, 120px) auto clamp(24px, 4vw, 48px);
  padding: 0 var(--wla-rand);
  color: var(--wla-schrift);
}

.wla-buehne-kopf { max-width: 560px; margin-bottom: clamp(24px, 4vw, 48px); }
.wla-buehne-titel { font: 600 clamp(24px, 18px + 1.2vw, 40px)/1.15 var(--font-twk), system-ui, sans-serif; margin: 0 0 .35em; }
.wla-buehne-lead { margin: 0; color: var(--wla-schrift-2);
  font: 400 clamp(15px, 14px + .2vw, 18px)/1.55 var(--font-twk), system-ui, sans-serif; }

.wla-buehne-reihe { position: relative; display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px); align-items: center; }

.wla-buehne-bild { position: relative; display: block; margin: 0;
  border-radius: 4px; overflow: hidden; background: rgba(255,253,226,.05);
  aspect-ratio: 1 / 1; text-decoration: none; }
.wla-buehne-bild img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Der Titel liegt ueber dem Bild und ragt nach links darueber hinaus */
.wla-buehne-name {
  position: absolute; left: clamp(-40px, -3vw, 0px); top: 50%;
  transform: translateY(-50%); z-index: 2; margin: 0; max-width: 12ch;
  font: 700 clamp(34px, 20px + 3.4vw, 82px)/.98 var(--font-twk), system-ui, sans-serif;
  letter-spacing: -.02em; color: var(--wla-schrift);
  text-shadow: 0 2px 40px rgba(5,18,54,.65);
  pointer-events: none;
}

.wla-buehne-hinweis {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(12px, 2vw, 22px);
  background: linear-gradient(to top, rgba(5,18,54,.85), transparent);
  font: 600 clamp(13px, 12px + .2vw, 15px)/1 var(--font-twk), system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s var(--wla-ease-out);
}
.wla-buehne-bild:hover .wla-buehne-hinweis,
.wla-buehne-bild:focus-visible .wla-buehne-hinweis { opacity: 1; }
.wla-buehne-bild:focus-visible { outline: 3px solid var(--wla-schrift); outline-offset: 4px; }

.wla-buehne-angaben { list-style: none; margin: 0; padding: 0;
  font: 400 clamp(15px, 14px + .2vw, 18px)/1.5 var(--font-twk), system-ui, sans-serif; }
.wla-buehne-angaben li { padding: .45em 0; }
.wla-buehne-angaben .k { display: block; color: var(--wla-schrift-3);
  font-size: .82em; letter-spacing: .06em; text-transform: uppercase; }

.wla-buehne-knoepfe { display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(20px, 3vw, 32px); }

@media (max-width: 900px) {
  .wla-buehne-reihe { grid-template-columns: 1fr; }
  .wla-buehne-name { position: static; transform: none; margin: 0 0 .3em; max-width: none;
    text-shadow: none; }
  .wla-buehne-bild { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) { .wla-buehne-hinweis { transition: none; } }


/* Cookie-Leiste der Basis: kein Tracking mehr vorhanden, daher keine Abfrage */
.consent-banner-wrapper { display: none !important; }

/* Video-Rahmen der Basis (BackgroundTransition): ohne Video bleibt sonst seine creme Flaeche stehen */
/* (entfernt 05.09.: Basis-Sektionsfarben creme/hellblau/dunkelblau wieder aktiv) */

/* WebGL-Bildflaechen der Basis (ScrollRig) aus: ohne echte Medien zeichnen sie nur Platzhalter und eine verirrte Flaeche oben links */
/* #ScrollRig-canvas { display: none !important; } — zurueckgenommen 03.09., Rig traegt den Smooth Scroll */

/* Basis-Hover-Vorschau im Hero-Titel (ResizeOverlay_gifImg): zeichnet ohne
   echtes GIF/Video eine dunkle 167x167px-Flaeche mitten im Titeltext, kurz
   sichtbar waehrend der Hydration — genau das vom King gemeldete "Medien
   laden nicht richtig". Ohne Datenquelle aus, wie das WebGL-ScrollRig oben. */
[class*="ResizeOverlay_gifImg"] { display: none !important; }

/* Footer-Slogan-Rotator und Hero-Wortwechsler: die frueheren !important-
   Sperren (gestapelte Woerter) sind entfernt (05.09.) -- Ursache war der
   React-Hydration-Mismatch (#418), der die Basis-Animationen nach dem
   Client-Neuaufbau doppelt startete. Statik ist jetzt hydration-sauber,
   die Basis-Animationen laufen wieder original. */

/* Hintergrund-Ebene (hintergrund.js): vier Schleifen, je Sektion eine, weiche Ueberblendung */
/* (#wla-hintergrund entfernt 05.09.) */

/* Entwickler-Raster der Basis (GridDebugger): 14 sichtbare Overlay-Spalten in Produktion -- aus. */
[class*="GridDebugger_"] { display: none !important; }

/* Loader: sichtbar wie im Mirror. Er ist der Ausloeser der Reveals --
   siehe CLAUDE.md, "Entschieden, nicht wieder aufmachen" (12.09.2026). */

/* (Menue-Toggle der statischen Seiten entfernt 13.09.2026 -- alle Seiten laufen auf der Shell.) */
/* Basis-Schriftgroesse der Menu-Navigation (bis zu 16rem/256px) ist fuer sehr
   grosse Bildschirme gedacht und laeuft bei uns ohne die GSAP-Anpassung der
   Basis aus dem sichtbaren Bereich -- fuer unseren einfachen CSS-Toggle auf
   eine Groesse begrenzt, die bei jeder Fensterbreite lesbar bleibt. */
/* King, 4. Runde: "das Menue ist bei VIP & Reservierung viel besser
   aufgebaut... uebernimm das fuer ALLE Seiten." Bisher hatten die 4
   hydrierten Seiten (Home, Events, je DE/SQ) die native, sehr viel groessere
   Basis-Schriftgroesse (bis 16rem/256px, fuer die eigene GSAP-Feinanpassung
   der Basis gedacht, die wir nicht mitbauen) -- dasselbe Element, dieselbe
   Klasse, aber ohne die Anpassung wirkte es auf jeder Seite anders. Eine
   einzige Regel jetzt ausnahmslos ueberall, kein zweites Menue-System mehr. */
/* px statt rem: die hydrierten Seiten setzen html{font-size} selbst
   fluid/gestaucht (auf der Startseite z.B. 10px statt der ueblichen 16px),
   die statischen Seiten erzwingen dagegen 16px -- derselbe rem-Wert ergab
   dadurch auf jeder Seite eine andere echte Groesse. */
/* Sechs Eintraege (fuenf plus Sprachwechsel, 13.09.2026): die Groesse muss
   auch in der Hoehe passen, sonst schiebt sich der letzte Eintrag in den
   Info-Block (gemessen 1440x900). Deshalb zusaetzlich an der Viewport-Hoehe
   begrenzt. */
[class*="Menu_menu_nav__"] { font-size: clamp(34px, min(9vw, 8.5vh), 112px) !important; gap: .25em !important; }

/* ===== King-Feedback 11.09., 2. Runde ===== */

/* Menue: doppelte CTA-Zeile "Schreib uns oder jetzt reservieren" im
   geoeffneten Menue weg (King: "schreib uns oder jetztreservieren auf dem
   menu weg") -- die Mailadresse direkt darunter bleibt stehen. */
[class*="Menu_menu_info__"] > [class*="Menu_menu_info_label__"]:first-child { display: none !important; }
/* Die zweite Label-Zeile im Info-Block traegt seit 13.09.2026 die Rechtslinks
   (O12, § 5 DDG) und bleibt sichtbar -- deshalb :first-child oben. */

/* (Presse-Sektion und ihre Ebene wieder aktiv, 13.09.2026: Sektion 7 traegt jetzt
   sechs Eintraege aus dem Payload -- _werkzeug/home_inhalte.py.) */


/* Startseite: eigener Ticket-Block direkt unter Event-Highlights
   (wla/ticket-einbau.js) -- kompaktes Fenster statt voller Breite
   (King: "einfach ein kleines Fenster"). */
#wla-tickets-start.wla-shop-kompakt {
  max-width: 34rem;
  background: var(--wla-grund, #051236) !important;
  color: var(--wla-schrift, #fffde2);
  border-radius: 20px;
  padding: clamp(24px, 5vw, 48px) var(--wla-rand) clamp(32px, 6vw, 56px);
  position: relative;
  z-index: 5;
}
#wla-tickets-start.wla-shop-kompakt .wla-shop-text { color: var(--wla-schrift-2, rgba(255,253,226,.6)); }

/* Der "Play"-Knopf mitten im Hero-Titel (Basis-Feature: kleines Vorschau-
   Video im Wort "Music") zeigt bei uns nur unser Logo statt kuratiertem
   Basis-Content -- wirkt dadurch wie ein kaputter/verirrter Button statt
   Gestaltung (King, 3. Runde: "hab 'n Play Button... im Hintergrund ist es
   scheiße"). Ohne echtes Vorschau-Material bringt der Knopf keinen Mehrwert
   -- aus. */
[class*="Hero_hero_content_title_mediaBox__"] { display: none !important; }

/* Der echte Flyer ist quadratisch (1600x1600) -- die Basis-Box fuer die
   Event-Highlights-Karte ist aber im Seitenverhaeltnis 520/406 gebaut
   (fuer ihre eigenen, nicht-quadratischen Projektbilder). Mit object-fit:
   cover schnitt das oben UND unten je rund 60px vom Flyer ab (King, 11.09.,
   3. Runde: "Bild wieder was ganz Aehnliches", "nichts soll fehlen"). Eigene
   quadratische Box, dann deckt cover exakt 1:1 ohne jeden Beschnitt. */
.styles_image__LBdm0 { aspect-ratio: 1 / 1 !important; }

/* Event-Highlights laeuft auf der Creme-Flaeche der Basis (#fffde2).
   Hier steht bewusst KEINE Regel dazu -- siehe CLAUDE.md, "Entschieden,
   nicht wieder aufmachen". */

/* Kontakt/Reservierung (statische Seiten): der echte Footer traegt einen
   zweiten, inhaltsgleichen "Kontakt"+Mail-Block in seiner top_left-Region
   zusaetzlich zur bottom_left-Region -- bei uns fehlt die Medienabfrage,
   die den einen oder anderen je Breite ausblendet, beide lagen auf 375px
   sichtbar uebereinander (King, Screen 5: "da liegt einfach Text
   aufeinander"). bottom_left deckt denselben Inhalt zuverlaessig ab. */
[class*="Footer_footer_container_top_left_contact__"] { display: none !important; }

/* (Ueber-uns-Ausblendung entfernt 13.09.2026: die Seite laeuft wieder, Punkt 2.) */

/* (body.wla-statisch-Regeln entfernt 13.09.2026 -- keine statischen Seiten mehr.) */

/* Autoplay der Hintergrund-Videos auf echten iOS-Geraeten (King, 3. Runde:
   Play-Button/Video startet nicht). In jedem eigenen Test (headless
   Chromium+WebKit) laeuft es an -- betrifft vermutlich Energiesparmodus
   (iOS drosselt Video-Autoplay dort bewusst zum Akku sparen) oder eine
   Blob-URL, die zu spaet gesetzt wird. wla/video-fix.js versucht aktiv
   .play() und nutzt die erste Beruehrung der Seite als zusaetzlichen
   Ausloeser -- fixt keine echte Systemsperre, faengt aber die Faelle ab,
   wo das reine autoplay-Attribut nicht reicht. */

/* Nachtrag 11.09., 5. Runde: eigene Opacity-Steuerung auf dem Hero-Titel
   (Versuch, die Basis-Einblendung sichtbarer zu machen) wieder entfernt --
   griff in den Scroll-eigenen Opacity-/Glow-Zustand der Basis ein (King:
   "der Glow von der Schrift, wenn du hoch scrollst, geht auch wieder
   nicht"). Der Hero-Titel bleibt unangetastet bei der Basis-Steuerung. */

/* King, 6. Runde: beim ersten Wortwechsel im Hero (NIGHTS -> EVENTS)
   ueberlagern sich kurz mehrere Woerter zu Buchstabensalat. Gefunden: alle
   Woerter liegen per Basis-CSS in derselben Grid-Zelle uebereinander
   (`.featuredWords{display:grid}`), die Basis blendet Nicht-Erste-Kinder
   selbst per `:not(:first-of-type){opacity:0}` aus -- ohne !important,
   eine spaetere Inline-Zuweisung (die Basis-eigene Animation) gewinnt
   dagegen immer und hebelt genau das kurz aus. Dieselbe, vom Original
   selbst beabsichtigte Regel -- nur mit !important verstaerkt, damit sie
   sich tatsaechlich durchsetzt. */
[class*="Hero_hero_content_title_featuredWords__"] > :not(:first-of-type) {
  opacity: 0 !important;
  filter: blur(10px) !important;
}

/* Loader-Farben (Ansage 13.09.2026, Freigabe des Kings am Abend): Nachtblau
   statt Creme, Creme statt Dunkelblau fuer Begruessung, Zaehler und Linie.
   Mechanik (Zaehler, Ein-/Ausblendung, Maske) bleibt Bundle. */
[class*="PageLoader_pageLoader__"] { background: #1e070c !important; }   /* A69 (15.09.2026): Weinrot statt Nachtblau */
[class*="PageLoader_pageLoader_hello__"],
[class*="PageLoader_pageLoader_percentage__"] { color: #fffde2 !important; }
[class*="PageLoader_pageLoader_progress_bar__"] { background: #fffde2 !important; }

/* ===== Punkt 2 (13.09.2026): Textseiten und Reservierung auf der Shell =====
   Die Seiten laufen auf den Basis-Vorlagen Brief (/reservierung) und
   Work-Detail (Textseiten) INNERHALB der Startseiten-Shell (BackgroundTransition-
   Ebenen, Footer). Beide Vorlagen bringen eine deckende Grundfarbe mit, die
   im Mirror die Seite fuellt -- bei uns liegt dahinter die Hintergrund-Ebene
   der Startseite. Farbe ist WLA-Sache: durchsichtig, Mechanik unveraendert. */
.BriefPage_brief__YLiDJ { background: transparent; }
.WorkDetailPage_workDetailPage__ffweG { background-color: transparent; }

/* Honeypot der Reservierungsanfrage (Ansage 13.09.: unsichtbar). Das Feld
   "Firma" ist ein normales Feld der Vorlage (Klasse hp am Eingabefeld);
   Menschen sehen es nicht, Formular-Bots fuellen es. */
.BriefPage_brief__YLiDJ .field:has(> .hp) { display: none; }

/* --- King 15.09.2026 (A62-A65) ------------------------------------------ */
/* A63: Ticket-Knopf im Hero (bundle-patches.py, Link aus hero.primary.wla_tickets_link).
   Blendet nach dem Loader mit derselben Unschaerfe ein wie die Hero-Worte. */
.wla-hero-tickets {
  position: absolute; left: 50%; top: calc(100% + 3.2rem); transform: translateX(-50%);
  display: inline-flex; align-items: center; padding: 1.4rem 2.6rem; border-radius: 999px;
  background: var(--brand-yellow, #fffde2); color: var(--brand-dark-blue, #051236);
  font: 600 1.5rem/1 var(--font-twk), system-ui, sans-serif; letter-spacing: -.02em;
  text-decoration: none; white-space: nowrap; opacity: 0; z-index: 3;
}
body.is-ready .wla-hero-tickets { animation: wla-hero-tickets-ein 1.4s cubic-bezier(.25, 1, .5, 1) 1.2s both; }
@keyframes wla-hero-tickets-ein { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }
.wla-hero-tickets:focus-visible { outline: 2px solid var(--brand-yellow, #fffde2); outline-offset: 4px; }
@media (min-width: 1200px) { .wla-hero-tickets { top: calc(100% + 4.8rem); padding: 1.6rem 3.2rem; font-size: 1.8rem; } }
@media (prefers-reduced-motion: reduce) { body.is-ready .wla-hero-tickets { animation: none; opacity: 1; } }

/* A62: Ticket-Block auf der Startseite (zwischen Event-Highlights und Unsere Geschichte) und auf /events.
   Feste Hoehe, der Shop scrollt im Rahmen: die Seite waechst nach der ScrollTrigger-Berechnung nicht
   (O16; mobil rechnet die Vorlage bei Hoehenaenderungen nicht neu). */
.wla-shop--start, .wla-shop--raster { position: relative; z-index: 2; margin: 0 auto; padding-block: clamp(96px, 14vh, 160px); scroll-margin-top: 0; }
/* Startseite: eigene dunkle Flaeche ueber die volle Breite -- beim Ankommen blendet die Creme-Ebene von
   Event-Highlights noch aus, die helle Kopfzeile waere darauf unsichtbar (gemessen 15.09.). */
.wla-shop--start { max-width: none; background: var(--brand-dark-blue, #051236); padding-inline: max(var(--wla-rand, 16px), calc((100% - 1088px) / 2)); }
.wla-shop--raster { padding-block: clamp(48px, 8vh, 96px) clamp(96px, 14vh, 160px); }
/* A70 (15.09.2026): volle Hoehe per StageDates-Modul (setzt die Hoehe inline), kein eigener Scrollbereich; waehrend
   Lenis scrollt, nimmt der Rahmen keine Rad-Ereignisse an -- die Seite laeuft ueber ihn hinweg. */
.wla-shop-feld { border-radius: 20px; overflow: hidden; }
.wla-shop-feld iframe { display: block; width: 100%; height: 500px; border: 0; }
html.lenis-scrolling .wla-shop iframe { pointer-events: none; }

/* A65 Desktop: Club-Video im Logo-Slot neben dem aktiven Namen */
.Collaborations_collaborations_content_logos_item__c_zvB video { display: block; width: 23.7rem; height: 23.7rem; object-fit: cover; }
/* A65 Mobil/Tablet: Clubs als We-are-on-Liste, Video neben dem Namen */
.Collaborations_collaborations__ZmUpq .Presses_presses_list__Uei03 { padding: 0 var(--padding-x); margin-top: 4rem; }
.Collaborations_collaborations__ZmUpq .Presses_presses_item_thumbnail__8fJDD { width: 7.2rem; height: 7.2rem; }
@media (min-width: 768px) { .Collaborations_collaborations__ZmUpq .Presses_presses_item_thumbnail__8fJDD { width: 9.6rem; height: 9.6rem; } }
.Presses_presses_item_thumbnail__8fJDD video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: auto; transition: transform 1.2s var(--easeOutQuart); }
.Presses_presses_item_thumbnail__8fJDD video::-webkit-media-controls-start-playback-button,
.Collaborations_collaborations_content_logos_item__c_zvB video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

/* A64: mobil kein Event als volle Flaeche. Die Detailvorlage zeichnet das Bild auf der WebGL-Buehne
   (#ScrollRig-canvas, randlos); object-fit greift dort nicht, ein kleinerer Buehnen-Rahmen verzerrt die
   Szene (gemessen 15.09.). Die ganze Buehne wird skaliert: das Event steht als Karte mit Rand im Bild. */
@media (max-width: 1199px) {
  body:has([class*='WorkDetailPage_workDetailPage__']) #ScrollRig-canvas { transform: scale(.8) !important; transform-origin: 50% 40%; }
}

/* --- King 15.09.2026, zweite Runde (A66-A74) ----------------------------- */
/* A69: kein Dunkelblau als Hauptfarbe, Wahl des Kings Weinrot. Die Vorlage fuehrt ihr Dunkelblau als eine Variable
   (Seite, Menue, Events, Detail- und Textseiten, Ebenen team/presses, Knoepfe) -- hier zentral umgestellt. */
:root { --brand-dark-blue: #1e070c; --wla-grund: #1e070c; }

/* A66: Event-Highlights mit einem Event. Die Vorlage macht die Sektion total-items x 100svh hoch; bei einem Event ist
   sie so hoch wie der klebende Inhalt und haelt nie still -- Bild und Sektion waren nur im Vorbeiscrollen ganz zu sehen.
   Mindestens zwei Bildschirmhoehen: das Event steht eine Hoehe lang ganz im Bild (gemessen Draft 6aa8872b). */
@media (min-width: 1200px) { .Showcase_showcase__7o16T { height: calc(max(var(--total-items), 2) * 100svh) !important; } }

/* A68: Aftermovies nicht mehr hellblau (Vorlage #d2e4f4) -- warmes Sand-Rosé zum Weinrot */
.BackgroundTransition_backgroundTransition_videoWrapper__awards__JFVaZ { background-color: #efe0d6 !important; }

/* A73: Hero-Zeile DE | SQ als Sprachwechsel, Schrift wie FALs VN | CN | FR */
.wla-sprache { color: inherit; text-decoration: none; }
/* jeder Eintrag steckt in eigenem Link -- FALs first/last-of-type-Abstaende an den Links nachbilden */
.Hero_hero_content_languages__2uoNl > .wla-sprache:first-of-type .line-mask { padding-left: .2rem; margin-left: -.2rem; padding-right: var(--gap); margin-right: 0; }
.Hero_hero_content_languages__2uoNl > .wla-sprache:last-of-type .line-mask { padding-right: .2rem; margin-right: -.2rem; padding-left: var(--gap); margin-left: 0; }

/* A72: Ticket-Knopf im ersten Bild der Events-Seite -- unten mittig ueber dem Raster, blendet ein wie der Hero-Knopf */
.wla-events-tickets { top: auto; bottom: clamp(9rem, 12vh, 14rem); position: absolute; }
@media (max-width: 1199px) { .wla-events-tickets { position: fixed; bottom: calc(2.4rem + env(safe-area-inset-bottom, 0px)); } }

/* Endscan A76: Ueberschrift nur fuer Screenreader und Suchmaschinen (Events-Seite ohne sichtbaren Titel) */
.wla-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* A77 (King 15.09.2026: "immernoch dunkelblau"): Papierfarbe der Brief-Vorlage (Reservierung) stand fest auf
   --brand-navy:#051236 im Vorlagen-CSS -- Weinrot wie A69. */
[class*="BriefPage_brief__"] { --brand-navy: #1e070c !important; }

/* A79 (King 15.09.2026: "auf handy ... abgeschnitten"): die mobile Bildleiste zeigt den ganzen Flyer
   (wla_mobile_thumbnail). contain statt cover, damit auch ein nicht-quadratischer Flyer in der
   1:1-Box vollstaendig bleibt; beim quadratischen Flyer deckungsgleich. */
.styles_image__LBdm0 img { object-fit: contain !important; }

/* A78 (King 15.09.2026: Sprachwechsel ueber das Menue "vorallem bei handy"): auf Textseiten (Detail-Vorlage
   ohne Medien, Info-Panel offen, O11) liegt das Panel mobil mit z-index 10000 ueber Header und Menue -- Logo und
   Menue-Knopf waren unsichtbar, das Schliessen-X lag genau auf dem Menue-Knopf (gemessen 15.09., /kontakt/ 390 px).
   Nur Textseiten (keine Medien-Indikatoren): Header und Menue ueber dem Panel, X aus (Schliessen zeigt dort eine leere Seite). */
@media (max-width: 767px) {
  body:has([class*="WorkDetailPage_workDetailPage__"]):not(:has([class*="SliderIndicator_sliderIndicator_list_item"])) .Header_header__W3r_v { z-index: 10002 !important; }
  body:has([class*="WorkDetailPage_workDetailPage__"]):not(:has([class*="SliderIndicator_sliderIndicator_list_item"])) .Menu_menu__K8jw6 { z-index: 10001 !important; }
  body:has([class*="WorkDetailPage_workDetailPage__"]):not(:has([class*="SliderIndicator_sliderIndicator_list_item"])) .ProjectInfo_hideProjectInfoButton__pIlqD { display: none !important; }
}

/* A87 (King 16.09.2026): Standbild statt Video, wenn das Geraet Autoplay sperrt (iOS-Stromsparmodus).
   Das Video wird ausgeblendet -- damit verschwindet auch der Play-Knopf, den iOS darueberlegt. */
.wla-standbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
video[data-wla-standbild] { display: none !important; }   /* nicht an der html-Klasse haengen: React setzt die
   Klassen des html-Elements bei der Hydration neu (gemessen 16.09.2026); das Video traegt die Markierung selbst. */

/* A89 (King 16.09.2026: "Impressum und Datenschutz sehr schlecht geloest mit diesem kleinen Fenster da rechts ...
   einfach einen Textblock auf den Seiten, mit Footer und demselben Header wie immer, Hintergrund abdunkeln").
   Die Textseiten laufen auf der Detail-Vorlage (O11); deren Info-Panel war ein schmales Overlay. Nur auf
   Textseiten (keine Medien-Indikatoren) wird daraus ein normaler, mittiger Textblock im Seitenfluss:
   Header wie immer, Footer darunter, Grund abgedunkelt, Schrift in Creme. Verdraengt O11. */
body:has([class*="WorkDetailPage_workDetailPage__"]):not(:has([class*="SliderIndicator_sliderIndicator_list_item"])) [class*="WorkDetailPage_workDetailPage__"] { height: auto !important; min-height: 100svh; overflow: visible !important; }
body:has([class*="WorkDetailPage_workDetailPage__"]):not(:has([class*="SliderIndicator_sliderIndicator_list_item"])) [class*="ProjectInfo_projectInfo__"] { position: static !important; height: auto !important; z-index: auto !important; pointer-events: auto !important; }
body:has([class*="WorkDetailPage_workDetailPage__"]):not(:has([class*="SliderIndicator_sliderIndicator_list_item"])) [class*="ProjectInfo_projectInfo_overlay__"] { display: none !important; }
body:has([class*="WorkDetailPage_workDetailPage__"]):not(:has([class*="SliderIndicator_sliderIndicator_list_item"])) [class*="ProjectInfo_projectInfo_content__"] {
  position: static !important; transform: none !important; height: auto !important; overflow: visible !important;
  width: min(1088px, 92vw) !important; max-width: none !important; margin: 0 auto clamp(64px, 10vh, 120px) !important;
  padding: clamp(104px, 14vh, 180px) clamp(20px, 4vw, 56px) clamp(40px, 7vh, 80px) !important;
  background: rgba(30, 7, 12, 0.82) !important; color: var(--brand-yellow, #fffde2) !important;
  border-radius: 18px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body:has([class*="WorkDetailPage_workDetailPage__"]):not(:has([class*="SliderIndicator_sliderIndicator_list_item"])) [class*="ProjectInfo_projectInfo_content__"] * { color: inherit !important; }
body:has([class*="WorkDetailPage_workDetailPage__"]):not(:has([class*="SliderIndicator_sliderIndicator_list_item"])) [class*="ProjectInfo_projectInfo_content_name__"] { margin-bottom: clamp(24px, 4vh, 48px); }
body:has([class*="WorkDetailPage_workDetailPage__"]):not(:has([class*="SliderIndicator_sliderIndicator_list_item"])) [class*="ProjectInfo_hideProjectInfoButton__"],
body:has([class*="WorkDetailPage_workDetailPage__"]):not(:has([class*="SliderIndicator_sliderIndicator_list_item"])) [class*="WorkDetailPage_workDetailPage_projectInfoButton__"] { display: none !important; }

/* A90 (King 16.09.2026, Screenshot Menue im Stromsparmodus): ohne Video traegt das Menue die Cremeflaeche
   selbst, damit es auch bei stockender Animation nie halb dunkel steht. */
html[data-wla-kein-video] [class*="Menu_menu__"] { background-color: var(--brand-yellow, #fffde2) !important; }

/* A91 (King 16.09.2026: "der Abstand zwischen dem vorgestellten Event und dem Ticket ist viel zu gross ...
   Die Leute muessen direkt das Event sehen und dann direkt darunter das Ticket"): die Events-Seite der Vorlage
   ist genau eine Bildschirmhoehe hoch und scrollt innen -- danach begann der Ticket-Block. Bei einem Event
   waechst die Seite jetzt mit ihrem Inhalt, der Ticket-Block folgt unmittelbar. */
body:has(.wla-shop--raster) [class*="WorkPage_page__"] { height: auto !important; min-height: 0 !important; overflow-y: visible !important; }
body:has(.wla-shop--raster) [class*="WorkPage_page_content__"] { min-height: 0 !important; padding-bottom: clamp(24px, 4vh, 56px) !important; }
.wla-shop--raster { margin-top: 0 !important; padding-top: clamp(16px, 3vh, 40px) !important; }
/* Karte ohne Ziel: kein Zeigefinger, kein Hover-Versprechen. */
a.ProjectList_card__PiGCk:not([href]) { cursor: default; }

/* A91 Nachtrag (16.09.2026, gemessen auf Draft 6aa9d8a9): die Luecke kam nicht von der Seitenhoehe, sondern vom
   Raster-Container (min-height: eine Bildschirmhoehe) und 160-200 px Innenabstand unten. Bei einem Event steht
   der Ticket-Block danach direkt unter der Karte. */
body:has(.wla-shop--raster) [class*="ProjectList_container__"] { min-height: 0 !important; height: auto !important; }
body:has(.wla-shop--raster) [class*="ProjectList_list__"] { padding-bottom: clamp(20px, 4vh, 56px) !important;
  height: auto !important; min-height: 0 !important; }   /* am Desktop hielt diese Box die Bildschirmhoehe (gemessen 16.09.) */
body:has(.wla-shop--raster) [class*="WorkPage_page_content_visual__"] { min-height: 0 !important; }

/* A91 Nachtrag 2 (16.09.2026, gemessen): im Raster-Container liegen Liste und WebGL-Platzhalter in derselben
   Gitterzelle -- der Platzhalter hielt am Desktop die Bildschirmhoehe und damit die Zeile. */
body:has(.wla-shop--raster) [class*="ProjectList_list_canvasPlaceholder__"] { height: auto !important; min-height: 0 !important; }

/* A91 Nachtrag 3 (16.09.2026, gemessen): die Kette endete bei WorkPage_page_content_visual -- dort war nur die
   Mindesthoehe geloest, die Hoehe selbst hielt die Bildschirmhoehe und streckte Container, Liste und Platzhalter. */
body:has(.wla-shop--raster) [class*="WorkPage_page_content_visual__"] { height: auto !important; }

/* A91 Nachtrag 4 zurueckgenommen (16.09.2026): Filterliste und Infospalte auf Hoehe auto zu setzen brach am Desktop
   die Buehne (Karte oben abgeschnitten, Filter mitten im Bild, gemessen und im Screenshot gesehen). Stattdessen
   rueckt der Ticket-Block am Desktop naeher an das Event -- die untere Haelfte der Buehne ist dort leer. */
@media (min-width: 1200px) {
  body:has(.wla-shop--raster) .wla-shop--raster { margin-top: min(-22vh, -180px) !important; }
}