/* ============================================================
   Atelier Obskur, Bausteine
   Jede Klasse ist in Elementor unter Erweitert, CSS-Klassen eintragbar.
   Klassen mit Praefix ao- gestalten, Attribute data-k steuern die Effekte.
   ============================================================ */

/* ------------------------------------------------------------
   1. Grundlagen
   ------------------------------------------------------------ */

/* Hello Elementor setzt das bereits, der eigene Satz macht die Bausteine
   aber auch ausserhalb des Themes berechenbar, etwa in einer Vorschau. */
body.ao, body.ao *, body.ao *::before, body.ao *::after { box-sizing: border-box; }

body.ao {
  background: var(--ao-tinte);
  color: var(--ao-pergament);
  font-family: var(--ao-schrift-text);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .25vw, 1.09rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.ao a { color: var(--ao-akzent-hell); text-decoration: none; }
body.ao a:hover { color: var(--ao-pink-glanz); }
body.ao a.ao-ticket, body.ao a.ao-ticket:hover { color: #2A0A18; }
body.ao a.ao-ticket--gold, body.ao a.ao-ticket--gold:hover { color: #1A1206; }
body.ao ::selection { background: var(--ao-ochsenblut); color: var(--ao-pergament); }

body.ao h1, body.ao h2, body.ao h3, body.ao h4, body.ao h5, body.ao h6 {
  font-family: var(--ao-schrift-haus);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.04;
  margin: 0;
}

body.ao :focus-visible {
  outline: 2px solid var(--ao-akzent-hell);
  outline-offset: 3px;
}

/* Knoepfe der Bausteine von den globalen Elementor-Knopfstilen
   befreien. Das Kit faerbt sonst jedes <button> pink. Die Regeln der
   Bausteine selbst stehen mit body.ao davor und gewinnen. */
html body.ao :where(.ao-auge, .ao-sammlung, .ao-stern, .ao-foehn, .ao-tafel__zu, .ao-tafel__reset, .ao-tuer__griff, .ao-floors__nav button),
html body.ao :where(.ao-auge, .ao-sammlung, .ao-stern, .ao-foehn, .ao-tafel__zu, .ao-tafel__reset, .ao-tuer__griff, .ao-floors__nav button):is(:hover, :focus) {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; color: inherit; font: inherit; text-transform: none;
  letter-spacing: inherit; min-height: 0;
}

/* Lesebreite und Bogen, falls ohne Elementor-Container gearbeitet wird */
.ao-bogen  { max-width: var(--ao-bogen); margin-inline: auto; padding-inline: var(--ao-gasse); }
.ao-schmal { max-width: var(--ao-schmal); }

/* Nebentext, zum Beispiel Ort unter dem Datum */
.ao-nebentext { color: var(--ao-nebel); }

/* Kleine Auszeichnung ueber einer Ueberschrift, mit Strich davor */
.ao-marke {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--ao-schrift-daten);
  font-size: .76rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ao-akzent);
}
.ao-marke::before {
  content: ""; width: 2.6rem; height: 1px;
  background: linear-gradient(to right, transparent, var(--ao-akzent));
}

/* Zweite Zeile einer Ueberschrift, ruhiger gesetzt */
.ao-zweite { display: block; color: var(--ao-nebel); }

/* ------------------------------------------------------------
   2. Dauerhafte Ebenen ueber der Seite
   ------------------------------------------------------------ */

.ao-korn {
  position: fixed; inset: -20%; z-index: var(--ao-z-korn);
  pointer-events: none; opacity: .55; mix-blend-mode: overlay;
  background-size: 180px 180px;
  animation: ao-korn .9s steps(3) infinite;
}
@keyframes ao-korn {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-4%, 3%); }
  50%  { transform: translate(3%, -4%); }
  75%  { transform: translate(-3%, -2%); }
  100% { transform: translate(0, 0); }
}

.ao-laser {
  position: fixed; inset: 0; z-index: var(--ao-z-laser);
  pointer-events: none; mix-blend-mode: screen; opacity: 0;
  transition: opacity 1s ease;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(214, 63, 134, .22), transparent 70%),
    radial-gradient(60% 50% at 85% 0%, rgba(90, 200, 255, .18), transparent 70%);
}
.ao-laser.ist-an { opacity: 1; }

.ao-warp {
  position: fixed; inset: 0; z-index: var(--ao-z-warp);
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #0d1440, #020208 70%);
}

.ao-fx {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: var(--ao-z-fx); pointer-events: none; mix-blend-mode: screen;
}

/* ------------------------------------------------------------
   3. Ladevorhang
   ------------------------------------------------------------ */

.ao-intro {
  position: fixed; inset: 0; z-index: var(--ao-z-intro);
  display: grid; place-items: center; overflow: hidden;
  background: var(--ao-tiefer);
}
.ao-intro__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
}
.ao-intro__schleier {
  position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 50%, rgba(9, 6, 8, .3), rgba(5, 3, 4, .96) 75%);
}
.ao-intro__zeile {
  position: absolute; top: clamp(1.4rem, 5vw, 3rem); left: 0; right: 0;
  text-align: center; font-family: var(--ao-schrift-daten);
  font-size: .74rem; letter-spacing: .32em; color: var(--ao-nebel);
}
.ao-intro__text { position: relative; text-align: center; padding-inline: var(--ao-gasse); }
.ao-intro__text p {
  font-family: var(--ao-schrift-haus);
  font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  color: var(--ao-pergament); margin: 0 0 1.8rem;
}
.ao-intro__gleis {
  width: min(22rem, 70vw); height: 2px; margin-inline: auto;
  background: var(--ao-rand-zart); overflow: hidden;
}
.ao-intro__balken {
  height: 100%; background: linear-gradient(to right, var(--ao-akzent-tief), var(--ao-akzent-hell));
  transform: scaleX(0); transform-origin: left;
}
.ao-intro__zahl {
  display: block; margin-top: .9rem;
  font-family: var(--ao-schrift-daten); font-size: .82rem;
  letter-spacing: .3em; color: var(--ao-akzent);
}
.ao-intro__blitz {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff, rgba(255, 220, 160, .7) 40%, transparent 70%);
}

/* ------------------------------------------------------------
   4. Kopfzeile, Auge, Sammlung, Fluestern
   ------------------------------------------------------------ */

.ao-kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--ao-z-kopf);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 10px var(--ao-gasse); pointer-events: none;
  background: linear-gradient(to bottom, rgba(9, 6, 8, .85), rgba(9, 6, 8, 0));
}
.ao-kopf > * { pointer-events: auto; }
.ao-kopf__marke {
  justify-self: start; display: flex; align-items: center; gap: 10px;
  font-family: var(--ao-schrift-daten); font-size: .74rem;
  letter-spacing: .26em; color: var(--ao-nebel);
}
.ao-kopf__marke span:first-child { color: var(--ao-akzent); }

/* Das wachende Auge */
body.ao .ao-auge {
  justify-self: center; display: block; padding: 0; border: 0;
  background: none; cursor: pointer;
  width: clamp(76px, 9vw, 124px);
  filter: drop-shadow(0 0 18px rgba(201, 162, 39, .35));
}
body.ao .ao-auge svg { display: block; width: 100%; height: auto; }
.ao-auge__pupille { transition: transform .34s var(--ao-weich); }
.ao-auge__kern    { transition: transform .9s ease; transform-origin: 60px 35px; }
.ao-auge__spirale { opacity: 0; transform-origin: 60px 35px; }
.ao-auge__lid     { transform-origin: 50% 0; transform: scaleY(0); }

/* Zaehler der gefundenen Kuriositaeten */
body.ao .ao-sammlung {
  justify-self: end; display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .85rem; border: 1px solid var(--ao-rand);
  background: rgba(9, 6, 8, .6); cursor: pointer;
  font-family: var(--ao-schrift-daten); font-size: .74rem;
  letter-spacing: .18em; color: var(--ao-nebel);
  transition: border-color var(--ao-schnell) ease, color var(--ao-schnell) ease;
}
body.ao .ao-sammlung:hover { border-color: var(--ao-akzent); color: var(--ao-akzent-hell); }
.ao-sammlung__stern { color: var(--ao-akzent); }

/* Das Fluestern des Auges */
.ao-fluestern {
  position: fixed; top: calc(clamp(76px, 9vw, 124px) * .72 + 1.6rem);
  left: 50%; transform: translate(-50%, -8px);
  z-index: calc(var(--ao-z-kopf) - 1);
  max-width: min(26rem, 82vw); text-align: center; margin: 0;
  font-family: var(--ao-schrift-haus); font-size: 1.15rem;
  color: var(--ao-akzent-hell); opacity: 0; pointer-events: none;
  text-shadow: 0 0 20px rgba(9, 6, 8, .95);
  transition: opacity .4s ease, transform .4s ease;
}
.ao-fluestern.ist-da { opacity: 1; transform: translate(-50%, 0); }

/* Tafel der Sammlung */
.ao-tafel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(24rem, 90vw);
  z-index: calc(var(--ao-z-kopf) + 1);
  background: var(--ao-tiefer); border-left: 1px solid var(--ao-rand);
  padding: 1.6rem var(--ao-gasse); overflow-y: auto;
  transform: translateX(101%); transition: transform .5s var(--ao-hart);
}
.ao-tafel.ist-offen { transform: none; }
.ao-tafel__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ao-tafel__titel { font-family: var(--ao-schrift-daten); font-size: .74rem; letter-spacing: .26em; color: var(--ao-akzent); }
body.ao .ao-tafel__zu { background: none; border: 0; color: var(--ao-nebel); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.ao-tafel__gleis { height: 2px; background: var(--ao-rand-zart); margin: 1rem 0 1.6rem; }
.ao-tafel__balken { height: 100%; background: var(--ao-akzent); transition: width .6s var(--ao-weich); }
.ao-tafel__liste { list-style: none; margin: 0; padding: 0; }
.ao-tafel__liste li {
  display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .8rem;
  align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--ao-rand-zart);
}
.ao-tafel__num { font-family: var(--ao-schrift-daten); font-size: .74rem; color: var(--ao-schleier); }
.ao-tafel__name { display: block; }
.ao-tafel__wink { display: block; font-size: .84rem; color: var(--ao-nebel); margin-top: .15rem; }
body.ao .ao-tafel__reset {
  margin-top: 1.4rem; background: none; border: 1px solid var(--ao-rand);
  color: var(--ao-nebel); font-family: var(--ao-schrift-text);
  font-size: .78rem; letter-spacing: .16em; padding: .6rem 1.1rem; cursor: pointer;
}

/* ------------------------------------------------------------
   5. Buehne, der Kopfbereich einer Eventseite
   ------------------------------------------------------------ */

.ao-buehne {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* unten Platz fuer den Hinweis "herein" und die Ticketleiste */
  padding: 0 var(--ao-seite) clamp(5.5rem, 4rem + 6vw, 8rem);
}
.ao-buehne__bild { position: absolute; inset: -8% 0; background: #000; will-change: transform; }
.ao-buehne__bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .74; transform: scale(1.06); filter: saturate(1.05) contrast(1.04);
}
.ao-buehne__nebel { position: absolute; inset: 0; width: 100%; height: 100%; }
.ao-buehne__schleier {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 70% 18%, rgba(214, 63, 134, .24), transparent 60%),
    linear-gradient(to top, var(--ao-tinte) 4%, rgba(9, 6, 8, .86) 32%, rgba(9, 6, 8, .18) 72%, rgba(9, 6, 8, .5));
}
.ao-buehne__inhalt { position: relative; z-index: 2; max-width: 46rem; }

.ao-titel {
  /* Der Boden ist bewusst niedrig, damit lange Worte wie Kuriositaeten
     am Handy in einer Zeile bleiben und die Buehne nicht ueberlaufen. */
  font-size: clamp(2.1rem, 1rem + 7.2vw, 7.6rem);
  line-height: .92; color: var(--ao-pergament);
  text-shadow: 0 0 44px rgba(9, 6, 8, .9);
}
.ao-titel > span { display: block; }
.ao-titel [data-l] { display: inline-block; }
.ao-titel em { font-style: normal; color: var(--ao-akzent-hell); }

/* Wechselndes Wort in der Zeile unter dem Titel */
.ao-wechsel { display: inline-block; color: var(--ao-akzent-hell); min-width: 6ch; }

.ao-termin {
  margin: 1.5rem 0 0;
  font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); letter-spacing: .02em;
}
.ao-termin span { display: block; color: var(--ao-nebel); font-size: .92em; }

.ao-fakten {
  margin: 1.2rem 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  font-family: var(--ao-schrift-daten);
  font-size: .78rem; letter-spacing: .14em; color: var(--ao-nebel);
}
.ao-fakten b { font-weight: 400; color: var(--ao-akzent); display: inline-block; }

.ao-herein {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + .9rem);
  transform: translateX(-50%); z-index: 3; text-align: center;
  font-family: var(--ao-schrift-daten); font-size: .7rem;
  letter-spacing: .3em; color: var(--ao-nebel);
}
.ao-herein::after {
  content: ""; display: block; width: 1px; height: 34px; margin: .6rem auto 0;
  background: linear-gradient(to bottom, var(--ao-akzent), transparent);
  transform-origin: top; animation: ao-sinken 2.4s ease-in-out infinite;
}
@keyframes ao-sinken {
  0%, 100% { transform: scaleY(.25); opacity: .3; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ------------------------------------------------------------
   6. Anriss, Woerter hellen beim Scrollen auf
   ------------------------------------------------------------ */

.ao-anriss {
  font-family: var(--ao-schrift-haus);
  font-size: clamp(1.3rem, 1rem + 1.8vw, 2.6rem);
  line-height: 1.4; max-width: 30ch; margin: 0;
}
.ao-anriss [data-w] { display: inline-block; opacity: .13; transition: opacity .25s linear; }
.ao-anriss em { font-style: normal; color: var(--ao-akzent-hell); }

/* ------------------------------------------------------------
   7. Harter Schnitt, vollflaechiges Bild mit Zitat
   ------------------------------------------------------------ */

.ao-schnitt { position: relative; height: clamp(40svh, 52vw, 78svh); overflow: hidden; }
.ao-schnitt img { width: 100%; height: 120%; object-fit: cover; display: block; opacity: .9; }
.ao-schnitt__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--ao-tinte), transparent 22%, transparent 76%, var(--ao-tinte));
}
.ao-schnitt__zitat {
  position: absolute; left: var(--ao-seite); bottom: clamp(1.4rem, 5vw, 3.4rem); z-index: 2;
  margin: 0; max-width: 22ch;
  font-family: var(--ao-schrift-haus);
  font-size: clamp(1.4rem, 1rem + 2.2vw, 2.8rem);
  color: var(--ao-pergament); text-shadow: 0 0 30px rgba(9, 6, 8, .9);
}

/* ------------------------------------------------------------
   8. Floors, drei Raeume im gestapelten Scrollbereich
   ------------------------------------------------------------ */

.ao-floors { position: relative; height: calc(var(--ao-floors-zahl, 3) * 100svh); }
.ao-floors__fest { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.ao-floors__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .18s steps(2, end);
}
.ao-floors__fx { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.ao-floors__blitz { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; pointer-events: none; }
.ao-floors__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9, 6, 8, .94) 6%, rgba(9, 6, 8, .4) 44%, rgba(9, 6, 8, .72));
}
.ao-floors__inhalt {
  position: absolute; inset: auto 0 0 0;
  /* unten Platz fuer die Ticketleiste, sonst liegt der Zeitplan darunter */
  padding: 0 var(--ao-gasse) clamp(5.5rem, 4rem + 5vw, 7.5rem);
  max-width: var(--ao-bogen); margin-inline: auto;
}
/* Alle drei Raeume liegen im selben Rasterfeld uebereinander.
   Dadurch ist der Block so hoch wie der groesste Raum und nichts rutscht. */
.ao-floors__raeume { display: grid; }
.ao-floors__raum {
  grid-area: 1 / 1; align-self: end;
  opacity: 0; visibility: hidden; max-width: 34rem;
  transition: opacity .18s steps(2, end);
}
.ao-floors__name { font-size: clamp(2.2rem, 1.4rem + 3vw, 4.4rem); }

/* Bild im Raum, nur in der gestapelten Ansicht sichtbar */
.ao-floors__raumbild { display: none; }

/* Gestapelt: setzt das Skript, wenn ein Raum nicht auf den Bildschirm
   passt. Dann liegen die Floors untereinander, jeder mit eigenem Bild. */
.ao-floors--gestapelt { height: auto; padding-block: clamp(3rem, 8vw, 5rem); }
.ao-floors--gestapelt .ao-floors__fest { position: relative; height: auto; overflow: visible; }
.ao-floors--gestapelt .ao-floors__bild,
.ao-floors--gestapelt .ao-floors__fx,
.ao-floors--gestapelt .ao-floors__blitz,
.ao-floors--gestapelt .ao-floors__schleier,
.ao-floors--gestapelt .ao-floors__nav { display: none; }
.ao-floors--gestapelt .ao-floors__inhalt { position: relative; inset: auto; padding-bottom: 0 !important; }
.ao-floors--gestapelt .ao-floors__raeume { display: grid; gap: clamp(2.6rem, 7vw, 4rem); }
.ao-floors--gestapelt .ao-floors__raum {
  grid-area: auto; opacity: 1 !important; visibility: visible !important;
  pointer-events: auto !important; clip-path: none !important; max-width: none;
}
.ao-floors--gestapelt .ao-floors__raumbild {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  margin-bottom: 1.2rem; opacity: .85;
}
.ao-floors__genre {
  font-family: var(--ao-schrift-daten); font-size: .76rem;
  letter-spacing: .24em; color: var(--ao-akzent); margin: .4rem 0 1rem;
}
.ao-floors__nav { display: flex; gap: 1.6rem; margin-bottom: 1.6rem; }
body.ao .ao-floors__nav button {
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: .3rem 0; cursor: pointer;
  font-family: var(--ao-schrift-daten); font-size: .78rem;
  letter-spacing: .2em; color: rgba(237, 225, 203, .5);
  transition: color var(--ao-schnell) ease, border-color var(--ao-schnell) ease;
}

/* Zeitplan eines Floors */
.ao-zeiten { list-style: none; margin: 1.4rem 0 0; padding: 0; border-top: 1px solid var(--ao-rand); }
.ao-zeiten li {
  display: grid; grid-template-columns: 5.2rem 1fr; gap: 1rem; align-items: baseline;
  padding: .66rem 0; border-bottom: 1px solid var(--ao-rand-zart);
}
.ao-zeiten time { font-family: var(--ao-schrift-daten); font-size: .95rem; color: var(--ao-akzent); }
.ao-zeiten b { font-weight: 400; }
.ao-zeiten small { display: block; color: var(--ao-nebel); font-size: .78rem; letter-spacing: .1em; margin-top: .1rem; }

/* Platzhalter, wenn der Zeitplan noch fehlt */
.ao-offen {
  margin: 1.4rem 0 0; padding: 1rem 1.2rem;
  border: 1px dashed var(--ao-rand); color: var(--ao-nebel);
  font-family: var(--ao-schrift-haus); font-size: 1.2rem;
}

/* ------------------------------------------------------------
   9. Karten, Kuriositaeten abseits der Floors
   ------------------------------------------------------------ */

.ao-karten {
  display: grid; gap: 1px; background: var(--ao-rand-zart);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.ao-karte { position: relative; background: var(--ao-tinte); overflow: hidden; }
.ao-karte__bild { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #000; }
.ao-karte__bild img,
.ao-karte__bild video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .8; transition: opacity .35s ease, transform .6s var(--ao-weich);
}
.ao-karte__bild video { opacity: 0; }
.ao-karte__text { padding: 1rem 1.2rem 1.4rem; }
.ao-karte__text h3 { font-size: 1.4rem; margin-bottom: .3rem; }
.ao-karte__text p { margin: 0; font-size: .94rem; color: var(--ao-nebel); }

/* Die Tuer des Kleiderschranks, zwei Fluegel.
   Die Karte behaelt ihren normalen Aufbau aus Bild und Text, damit sie
   genauso hoch ist wie ihre Nachbarn. Tuer und Portal liegen nur ueber
   dem Bildbereich. */
.ao-tuer .ao-karte__bild { perspective: 1400px; }
.ao-tuer__fluegel {
  position: absolute; top: 0; bottom: 0; z-index: 2; overflow: hidden;
  background: var(--ao-tinte); backface-visibility: hidden;
  transition: transform 1.1s var(--ao-hart);
}
.ao-tuer__fluegel--links  { left: 0;  right: 50%; transform-origin: left center; }
.ao-tuer__fluegel--rechts { left: 50%; right: 0;  transform-origin: right center; }
.ao-tuer__fluegel img {
  position: absolute; top: 0; width: 200%; height: 100%;
  object-fit: cover; opacity: 1;
}
.ao-tuer__fluegel--links  img { left: 0; }
.ao-tuer__fluegel--rechts img { right: 0; }
body.ao .ao-tuer__griff {
  position: absolute; top: 50%; right: .7rem;
  width: 14px; height: 34px; margin-top: -17px;
  border: 0; padding: 0; border-radius: 7px; cursor: pointer; z-index: 3;
  background: linear-gradient(180deg, var(--ao-akzent-hell), var(--ao-akzent-tief));
  animation: ao-glimmen 3.4s ease-in-out infinite;
}
@keyframes ao-glimmen {
  0%, 100% { box-shadow: 0 0 10px rgba(201, 162, 39, .4); }
  50%      { box-shadow: 0 0 22px rgba(232, 204, 106, .85); }
}
.ao-tuer__portal {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  text-align: center; padding: 1.2rem; pointer-events: none;
  background:
    radial-gradient(1.6px 1.6px at 20% 30%, var(--ao-pergament), transparent),
    radial-gradient(1.4px 1.4px at 70% 20%, var(--ao-gold-hell), transparent),
    radial-gradient(1.8px 1.8px at 40% 70%, var(--ao-pergament), transparent),
    radial-gradient(1.2px 1.2px at 85% 60%, var(--ao-pink), transparent),
    radial-gradient(90% 70% at 50% 50%, #1A1030, #070509);
}
.ao-tuer__portal p { margin: 0 0 1rem; font-family: var(--ao-schrift-haus); color: var(--ao-akzent-hell); }

/* Knopf fuer den Discofoen */
body.ao .ao-foehn {
  display: inline-flex; align-items: center; gap: .8rem; margin-top: 2rem;
  background: none; border: 1px solid var(--ao-rand); cursor: pointer;
  font-family: var(--ao-schrift-daten); font-size: .76rem;
  letter-spacing: .2em; color: var(--ao-nebel); padding: .7rem 1.3rem;
  transition: color var(--ao-schnell) ease, border-color var(--ao-schnell) ease;
}
body.ao .ao-foehn:hover { color: var(--ao-akzent-hell); border-color: var(--ao-akzent); }
.ao-foehn__fluegel { display: inline-block; }

/* ------------------------------------------------------------
   10. Programm, Performances und Workshops
   ------------------------------------------------------------ */

.ao-programm { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 62rem) { .ao-programm { grid-template-columns: 1fr 1fr; } }
.ao-programm__block { border-top: 1px solid var(--ao-rand); padding-top: 1.3rem; }
.ao-programm__block h3 { font-size: 1.8rem; margin-bottom: .9rem; }
.ao-bildpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ao-rand-zart); margin-bottom: 1.3rem; }
.ao-bildpaar img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; opacity: .78; }

/* ------------------------------------------------------------
   11. Galerie hinter beschlagenem Glas
   ------------------------------------------------------------ */

.ao-galerie { position: relative; }
.ao-galerie__raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ao-rand-zart); }
@media (min-width: 48rem) { .ao-galerie__raster { grid-template-columns: repeat(3, 1fr); } }
.ao-galerie__raster figure { margin: 0; overflow: hidden; background: #000; }
.ao-galerie__raster img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; opacity: .85; }
.ao-galerie__glas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y; }
.ao-galerie__wink {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: none; transition: opacity .6s ease;
  font-family: var(--ao-schrift-haus); font-size: 1.3rem;
  color: var(--ao-pergament); text-shadow: 0 0 24px rgba(9, 6, 8, .9);
}

/* ------------------------------------------------------------
   12. Dresscode und Pforte
   ------------------------------------------------------------ */

.ao-kleid { display: grid; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; }
@media (min-width: 62rem) { .ao-kleid { grid-template-columns: 1fr 1fr; } }
.ao-kleid__bild { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: #000; }
.ao-kleid__bild img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .82; }
.ao-kleid__bild figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .9rem;
  font-family: var(--ao-schrift-daten); font-size: .72rem;
  letter-spacing: .2em; color: var(--ao-akzent-hell);
  background: linear-gradient(to top, rgba(9, 6, 8, .92), transparent);
}

/* So viele Spalten wie Angaben, keine leere Zelle bei nur zwei */
.ao-pforte {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
  margin: clamp(2rem, 5vw, 3.4rem) 0 0;
  border: 1px solid var(--ao-rand);
}
.ao-pforte > div { background: var(--ao-tinte); padding: 1.1rem 1rem 1.3rem; }
.ao-pforte > div + div { border-left: 1px solid var(--ao-rand-zart); }
.ao-pforte dt { font-family: var(--ao-schrift-daten); font-size: .72rem; letter-spacing: .22em; color: var(--ao-nebel); margin-bottom: .4rem; }
.ao-pforte dd { margin: 0; font-family: var(--ao-schrift-haus); font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); line-height: 1; color: var(--ao-akzent); }
.ao-pforte dd small { display: block; font-family: var(--ao-schrift-text); font-size: .76rem; letter-spacing: .1em; color: var(--ao-nebel); margin-top: .5rem; }

/* ------------------------------------------------------------
   13. Hausregeln
   ------------------------------------------------------------ */

.ao-regeln { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ao-rand); max-width: 34rem; }
.ao-regeln li { padding: .7rem 0; border-bottom: 1px solid var(--ao-rand-zart); color: var(--ao-nebel); }
.ao-regeln b { color: var(--ao-pergament); font-weight: 400; }

/* ------------------------------------------------------------
   14. Ticketleiste
   ------------------------------------------------------------ */

.ao-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ao-z-leiste);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--ao-seite) calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(9, 6, 8, .97), rgba(9, 6, 8, .82));
  border-top: 1px solid var(--ao-rand);
  transform: translateY(120%); transition: transform .4s var(--ao-weich);
}
.ao-leiste__info { margin: 0; font-family: var(--ao-schrift-daten); font-size: .76rem; letter-spacing: .1em; color: var(--ao-nebel); line-height: 1.4; }
.ao-leiste__info b { display: block; font-family: var(--ao-schrift-haus); font-size: 1.2rem; letter-spacing: .02em; color: var(--ao-pergament); font-weight: 400; }

/* Ticketknopf, Metallic */
.ao-ticket {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .6rem;
  border: 0; border-radius: 2px; cursor: pointer; text-decoration: none;
  padding: .85rem 1.7rem; color: #2A0A18; font-weight: 500;
  font-family: var(--ao-schrift-text); font-size: 1rem; letter-spacing: .06em;
  background: linear-gradient(115deg, var(--ao-pink-tief) 0%, var(--ao-pink) 35%, var(--ao-pink-glanz) 50%, var(--ao-pink) 65%, var(--ao-pink-dunkel) 100%);
  background-size: 220% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 16px rgba(214, 63, 134, .4);
  animation: ao-glanz 6s ease-in-out infinite;
  transition: box-shadow var(--ao-schnell) ease;
}
@keyframes ao-glanz {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
.ao-ticket:hover, .ao-ticket:focus-visible {
  color: #2A0A18;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 30px rgba(214, 63, 134, .65);
}
.ao-ticket--gold {
  color: #1A1206;
  background: linear-gradient(115deg, var(--ao-ochsenblut) 0%, var(--ao-gold) 35%, var(--ao-gold-blass) 50%, var(--ao-gold) 65%, #6E5A14 100%);
  background-size: 220% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 16px rgba(201, 162, 39, .4);
}
.ao-ticket.ist-aus {
  background: none; border: 1px solid var(--ao-rand); color: var(--ao-nebel);
  box-shadow: none; animation: none; cursor: default;
}

/* ------------------------------------------------------------
   15. Fuss
   ------------------------------------------------------------ */

.ao-fuss {
  border-top: 1px solid var(--ao-rand); text-align: center;
  padding: 3rem var(--ao-gasse) 7rem;
  font-family: var(--ao-schrift-daten); font-size: .78rem;
  letter-spacing: .1em; color: var(--ao-nebel);
}
body.ao .ao-stern {
  display: inline-block; background: none; border: 0; cursor: pointer;
  font-family: var(--ao-schrift-haus); font-size: 1.6rem;
  color: var(--ao-akzent); margin-bottom: .8rem;
}

/* ------------------------------------------------------------
   16. Auftritte beim Scrollen
   data-r  weiches Aufziehen, Zahl als Verzoegerungsstufe
   data-ri harter Bildschnitt von unten nach oben
   ------------------------------------------------------------ */

[data-ri] { overflow: hidden; }

/* ------------------------------------------------------------
   17. Ruhige Darstellung
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  body.ao *,
  body.ao *::before,
  body.ao *::after { animation: none !important; transition: none !important; }
  .ao-korn { animation: none; }
  .ao-intro { display: none; }
  .ao-anriss [data-w] { opacity: 1; }
  .ao-floors { height: auto; }
  .ao-floors__fest { position: relative; height: auto; }
  .ao-floors__raum { position: relative; opacity: 1; visibility: visible; margin-bottom: 2.4rem; }
  .ao-floors__bild { position: relative; opacity: 1; height: 50svh; }
  .ao-galerie__glas { display: none; }
}

/* ------------------------------------------------------------
   18. Zeichen der Reihe
   Ein Element mit der Klasse ao-zeichen zeigt das Zeichen der
   aktuellen Reihe in der Akzentfarbe. Aufzaehlungen bekommen es
   automatisch vor jeden Punkt: im Fliesstext des Plugins, in
   Elementor-Textwidgets, im Beitragsinhalt und in Listen mit der
   Klasse ao-liste.
   ------------------------------------------------------------ */

.ao-zeichen {
  display: inline-block; width: .9em; height: .9em; vertical-align: -.06em;
  background: currentColor;
  -webkit-mask: var(--ao-zeichen-bild) center / contain no-repeat;
          mask: var(--ao-zeichen-bild) center / contain no-repeat;
}
.ao-kopf__marke .ao-zeichen,
.ao-sammlung__stern.ao-zeichen,
body.ao .ao-stern.ao-zeichen,
.ao-foehn__fluegel.ao-zeichen { color: var(--ao-akzent); }
body.ao .ao-stern.ao-zeichen { width: 1.6rem; height: 1.6rem; padding: 0; background: currentColor; }

.ao-text ul,
ul.ao-liste,
body.ao .elementor-widget-text-editor ul,
body.ao .elementor-widget-theme-post-content ul {
  list-style: none; padding-left: 0;
}
.ao-text ul > li,
ul.ao-liste > li,
body.ao .elementor-widget-text-editor ul > li,
body.ao .elementor-widget-theme-post-content ul > li {
  position: relative; padding-left: 1.9em; margin: .5em 0;
}
.ao-text ul > li::before,
ul.ao-liste > li::before,
body.ao .elementor-widget-text-editor ul > li::before,
body.ao .elementor-widget-theme-post-content ul > li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 1.05em; height: 1.05em;
  background: var(--ao-akzent);
  -webkit-mask: var(--ao-zeichen-bild) center / contain no-repeat;
          mask: var(--ao-zeichen-bild) center / contain no-repeat;
}

/* Hausregeln: Zeichen vor jeder Regel, Linien bleiben */
.ao-regeln.ao-liste > li { margin: 0; padding: .7rem 0 .7rem 2em; }
.ao-regeln.ao-liste > li::before { top: 1.02rem; }

/* Fakten unter dem Titel: Zeichen statt Abstand allein */
.ao-fakten li { display: inline-flex; align-items: center; gap: .55rem; }
.ao-fakten li::before {
  content: ""; width: .85em; height: .85em; flex: 0 0 auto;
  background: var(--ao-akzent);
  -webkit-mask: var(--ao-zeichen-bild) center / contain no-repeat;
          mask: var(--ao-zeichen-bild) center / contain no-repeat;
}

/* ------------------------------------------------------------
   19. Eventseite aus dem Plugin
   ------------------------------------------------------------ */

.ao-abschnitt { padding-block: clamp(3.4rem, 9vw, 7rem); }
.ao-abschnitt--anriss + .ao-abschnitt--text { padding-top: 0; }
.ao-abschnitt h2 { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4rem); }
.ao-abschnitt .ao-karten,
.ao-abschnitt .ao-programm,
.ao-abschnitt .ao-galerie,
.ao-abschnitt .ao-termine { margin-top: 2.4rem; }
.ao-abschnitt .ao-regeln,
.ao-abschnitt .ao-archiv { margin-top: 1.6rem; }
body.ao .ao-abschnitt .ao-foehn { margin-top: 2rem; }
.ao-kleid h2 + p { margin-top: 1.2rem; }

.ao-buehne__zeile { font-family: var(--ao-schrift-haus); font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); margin: 1.2rem 0 0; }
.ao-buehne__logo { display: inline-block; margin-bottom: 1.2rem; }
.ao-buehne__logo img { display: block; width: auto; height: auto; max-height: clamp(64px, 9vw, 120px); max-width: min(70vw, 420px); }
.ao-buehne .ao-termin a { color: inherit; border-bottom: 1px solid var(--ao-rand); }

.ao-vorbei {
  display: inline-block; margin: 1.4rem 0 0; padding: .5rem .9rem;
  border: 1px solid var(--ao-akzent); color: var(--ao-akzent-hell);
  font-family: var(--ao-schrift-daten); font-size: .78rem; letter-spacing: .14em;
}

/* Fliesstext einer Veranstaltung */
.ao-text { max-width: var(--ao-schmal); font-size: clamp(1.02rem, .98rem + .3vw, 1.14rem); }
.ao-text p { margin: 0 0 1.1em; }
.ao-text h2, .ao-text h3, .ao-text h4 { margin: 2.2rem 0 .9rem; color: var(--ao-akzent-hell); }
.ao-text h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); }
.ao-text h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
.ao-text ul { margin: 0 0 1.4em; }
.ao-text__insta {
  margin-top: 2.2rem !important; font-family: var(--ao-schrift-daten);
  font-size: .76rem; letter-spacing: .16em; color: var(--ao-nebel); text-transform: uppercase;
}
.ao-text__insta a { text-transform: none; letter-spacing: .06em; }

/* ------------------------------------------------------------
   20. Terminkarten und Reihenseite
   ------------------------------------------------------------ */

.ao-termine {
  display: grid; gap: 1px; background: var(--ao-rand-zart);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
body.ao a.ao-termin-karte { display: block; background: var(--ao-tinte); color: var(--ao-pergament); }
.ao-termin-karte__bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ao-samt); }
.ao-termin-karte__bild img {
  width: 100%; height: 100%; object-fit: cover; display: block; opacity: .78;
  transition: opacity var(--ao-mittel) ease, transform var(--ao-lang) var(--ao-weich);
}
.ao-termin-karte:hover .ao-termin-karte__bild img,
.ao-termin-karte:focus-visible .ao-termin-karte__bild img { opacity: 1; transform: scale(1.04); }
.ao-termin-karte__text { padding: 1rem 1.2rem 1.4rem; }
.ao-termin-karte__datum {
  margin: 0 0 .4rem; font-family: var(--ao-schrift-daten);
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ao-akzent);
}
.ao-termin-karte h3 { font-size: 1.6rem; margin-bottom: .5rem; }
.ao-termin-karte__meta {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem;
  font-family: var(--ao-schrift-daten); font-size: .72rem; letter-spacing: .1em; color: var(--ao-nebel);
}
.ao-termin-karte__meta .ao-zeichen { color: var(--ao-akzent); }
.ao-termin-karte__ort::before { content: "\00B7"; margin-right: .55rem; }
.ao-termin-karte.ist-vorbei { opacity: .5; }
.ao-termine__leer { color: var(--ao-nebel); font-family: var(--ao-schrift-haus); font-size: 1.3rem; }

.ao-reihenkopf { padding: clamp(7rem, 16vw, 11rem) 0 clamp(1rem, 3vw, 2rem); text-align: center; }
.ao-reihenkopf .ao-marke { justify-content: center; }
.ao-reihenkopf__logo { margin: 1.4rem 0 0 !important; }
.ao-reihenkopf__logo img { display: inline-block; width: auto; height: auto; max-height: clamp(110px, 18vw, 230px); max-width: 100%; }
.ao-reihenkopf__titel { margin-top: 1.2rem !important; font-size: clamp(3rem, 1.4rem + 6.4vw, 7.4rem); color: var(--ao-akzent-hell); }
.ao-reihenkopf__text { max-width: var(--ao-schmal); margin: 1.6rem auto 0; color: var(--ao-nebel); font-size: 1.12rem; }
.ao-reihenkopf .ao-text__insta { margin-top: 1.4rem !important; }

.ao-archiv > li { border-bottom: 1px solid var(--ao-rand-zart); padding-block: .6rem; margin: 0; }
.ao-archiv > li::before { top: .95rem; }
body.ao .ao-archiv a { color: var(--ao-pergament); display: flex; gap: 1rem; flex-wrap: wrap; }
.ao-archiv time { font-family: var(--ao-schrift-daten); font-size: .8rem; letter-spacing: .12em; color: var(--ao-akzent); min-width: 11rem; }

@media (max-width: 40rem) {
  .ao-buehne { padding-bottom: 7.4rem; }
  .ao-kopf__marke span + span { display: none; }
}
.ao-kopf__marke .ao-zeichen { width: 1.1em; height: 1.1em; }
.ao-schnitt__zitat { line-height: 1.08; }

/* ------------------------------------------------------------
   21. Schrift der Reihe
   Hat eine Reihe eine eigene Schrift, setzt das Plugin am body die
   Klasse ao-schrift-reihe und die Variable --ao-schrift-reihe. Sie
   gilt nur fuer H1 und H2, alles andere bleibt in Deckhouse.
   !important, damit auch Elementor-Ueberschriften mit globaler
   Typografie folgen.
   ------------------------------------------------------------ */

body.ao-schrift-reihe h1,
body.ao-schrift-reihe h2 { font-family: var(--ao-schrift-reihe, var(--ao-schrift-haus)) !important; }


/* Karten- und Terminraster: Linien an den Karten statt Hintergrund im
   Zwischenraum. Sonst leuchtet eine unvollstaendige letzte Reihe als
   Flaeche auf. */
.ao-karten,
.ao-termine {
  background: none; gap: 0;
  border-top: 1px solid var(--ao-rand-zart); border-left: 1px solid var(--ao-rand-zart);
}
.ao-karten > .ao-karte,
.ao-termine > .ao-termin-karte {
  border-right: 1px solid var(--ao-rand-zart); border-bottom: 1px solid var(--ao-rand-zart);
}

/* ------------------------------------------------------------
   22. Mobil: eine Kante, wenig Umbrueche
   Alles beginnt an derselben Linie (--ao-gasse, rund 1,3rem).
   Laufweiten der Versalzeilen sind enger, damit Marke, Fakten und
   Genres auf eine Zeile passen.
   ------------------------------------------------------------ */

.ao-fakten li { white-space: nowrap; }
.ao-zeiten li.ohne-zeit { grid-template-columns: 1fr; }
.ao-termin__ort { display: block; }
.ao-termin__ort span { display: inline; font-size: 1em; color: inherit; }

@media (max-width: 40rem) {
  .ao-marke { letter-spacing: .2em; gap: .55rem; }
  .ao-marke::before { width: 1.4rem; }
  .ao-fakten { gap: .45rem 1rem; letter-spacing: .08em; font-size: .74rem; }
  .ao-floors__genre { letter-spacing: .12em; }
  /* Floor-Reiter in einer Zeile, bei vielen Floors seitlich wischbar */
  .ao-floors__nav {
    gap: 1.1rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-right: calc(-1 * var(--ao-gasse)); padding-right: var(--ao-gasse);
  }
  .ao-floors__nav::-webkit-scrollbar { display: none; }
  body.ao .ao-floors__nav button { letter-spacing: .12em; white-space: nowrap; flex: 0 0 auto; }
  .ao-buehne__zeile { font-size: 1rem; }
  .ao-termin { font-size: 1.05rem; }
  .ao-termin__ort .ao-termin__komma { display: none; }
  .ao-termin__ort .ao-termin__adresse { display: block; }
  .ao-zeiten li { grid-template-columns: 4.2rem 1fr; gap: .8rem; }
  .ao-zeiten li.ohne-zeit { grid-template-columns: 1fr; }

  /* Ticketleiste: Titel einzeilig, Countdown kurz, Knopf kompakter */
  .ao-leiste { gap: .8rem; }
  .ao-leiste__info { min-width: 0; font-size: .7rem; letter-spacing: .06em; }
  .ao-leiste__info b { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ao-leiste__info span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.ao .ao-ticket { padding: .75rem 1.1rem; font-size: .95rem; }
}


/* ------------------------------------------------------------
   23. Header und Footer an der Seitenkante ausrichten
   Elementor-Container auf "Volle Breite", Innenabstand links und
   rechts 0, CSS-Klasse "ao-rand". Dann beginnt der Inhalt genau an
   derselben Kante wie die Seite: 1440er Box auf dem Desktop, rund
   1,3rem Rand mobil.
   ------------------------------------------------------------ */

body.ao .ao-rand { padding-left: var(--ao-seite) !important; padding-right: var(--ao-seite) !important; }