/* ═══════════════════════════════════════════════════════════════════════════
   FOMO — Club Events Wien
   Schriften lokal eingebunden: keine externe Verbindung, kein Opt-in-Banner.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Archivo Black";src:url("../fonts/archivo-black.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/serif-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* Markenfarben, aus den Logos und dem Plakat abgenommen */
  --rot:#e5301a;            /* FOMO-Rot, die Leitfarbe */
  --rot-hell:#ff4a2b;       /* Hover und Leuchten */
  --rot-tief:#a81f0e;
  --rot-text:#c42512;        /* kleiner roter Text auf Papier: 5,1:1 */
  --rot-knopf:#d82a14;       /* Weiss auf rotem Knopf: 4,9:1 */
  /* ⚠ EIGENE Fehlerfarbe. NICHT --rot oder --rot-hell verwenden: die
     werden vom Genre-Farbwechsel ueberschrieben, und bei Hip Hop waeren
     die Fehlermeldungen dann GRUEN. Genau das ist schon passiert. */
  --fehler:#ff5a3c;
  --schwarz:#050505;        /* die Renderings stehen auf reinem Schwarz */
  --schwarz-2:#0e0e0e;
  --schwarz-3:#161616;
  --papier:#f2efea;         /* Plakat-Weiss, fuer invertierte Flaechen */
  --gruen:#8dbe4f;          /* Chamaeleon-Gruen, sparsam als Zweitakzent */
  --weiss:#f4f2f0;
  --grau:#8c8782;
  --grau-2:#7d7871;          /* 4,7:1 auf Schwarz — vorher 2,6:1, zu blass */
  --rand:#1f1d1c;
  --anzeige:"Archivo Black",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --kopf-h:68px;
  --rhythmus:clamp(64px,9vw,140px);
  --seite:clamp(20px,5vw,80px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--schwarz);color:var(--weiss);
  font-family:var(--text);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--anzeige);font-weight:400;
  letter-spacing:-.03em;line-height:.92;text-transform:uppercase}
em{font-family:var(--serif);font-style:italic;text-transform:none;
  letter-spacing:-.01em;color:var(--rot)}
img{max-width:100%;display:block}
::selection{background:var(--rot);color:var(--schwarz)}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--rot);
  color:var(--schwarz);padding:12px 20px;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--rot);outline-offset:3px;border-radius:2px}

/* ───────────────────────────────────────────────────────────────── Kopf */
.kopf{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--kopf-h);
  display:flex;align-items:center;gap:clamp(16px,4vw,48px);
  padding:0 var(--seite);
  background:color-mix(in srgb,var(--schwarz) 72%,transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
.kopf.gescrollt{border-bottom-color:var(--rand);
  background:color-mix(in srgb,var(--schwarz) 92%,transparent)}
.wortmarke{display:flex;align-items:center;color:var(--weiss);flex:0 0 auto}
.wortmarke svg{height:17px;width:auto;display:block;transition:color .25s}
.wortmarke:hover svg{color:var(--rot)}
.kopf-nav{display:flex;gap:28px;margin-left:auto;font-size:14px;
  font-weight:500;letter-spacing:.02em}
.kopf-nav a{color:var(--grau);transition:color .2s;position:relative}
.kopf-nav a:hover{color:var(--weiss)}
.kopf-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;
  height:1px;background:var(--rot);transition:right .25s}
.kopf-nav a:hover::after{right:0}

/* ──────────────────────────────────────────── Call-to-Action (genau einer) */
.cta{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--rot-knopf);color:#fff;
  font-family:var(--text);font-weight:600;font-size:14px;letter-spacing:.01em;
  padding:11px 20px;border-radius:999px;
  transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .25s,background .2s;
  will-change:transform;
}
.cta svg{width:15px;height:15px;transition:transform .22s}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 32px -8px color-mix(in srgb,var(--rot) 55%,transparent)}
.cta:hover svg{transform:translateX(3px)}
.cta:active{transform:translateY(0)}
.cta--kopf{flex:0 0 auto}
.cta--mobil{display:none}

/* ───────────────────────────────────────────────────────────────── Hero */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--kopf-h) var(--seite) clamp(40px,7vh,90px);
  overflow:hidden;
}
.hero-3d{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,var(--schwarz) 1%,color-mix(in srgb,var(--schwarz) 80%,transparent) 30%,transparent 66%),
    linear-gradient(to right,var(--schwarz) 4%,color-mix(in srgb,var(--schwarz) 90%,transparent) 40%,color-mix(in srgb,var(--schwarz) 30%,transparent) 78%);
}
.hero-inhalt{position:relative;z-index:2;max-width:min(760px,100%)}
/* Eigenes Scrim nur hinter dem Text — macht die Lesbarkeit unabhaengig
   davon, wie hell das Maskottchen oder die Atmosphaere gerade sind. */
.hero-inhalt::before{
  content:"";position:absolute;z-index:-1;
  inset:-44px -140px -44px calc(var(--seite) * -1);
  background:radial-gradient(72% 100% at 16% 50%,
    color-mix(in srgb,var(--schwarz) 90%,transparent) 0%,
    color-mix(in srgb,var(--schwarz) 60%,transparent) 44%,
    transparent 80%);
  pointer-events:none;
}

.hero-marke{
  margin:0 0 22px;font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rot);
}
.hero-titel{font-size:clamp(42px,8.4vw,108px);margin:0}
.hero-titel .zeile{display:block;overflow:hidden}
.hero-titel .zeile>span{display:block}
.hero-text{
  margin:26px 0 0;max-width:46ch;font-size:clamp(16px,1.6vw,19px);
  color:var(--grau);line-height:1.62;
}

/* ─────────────────────────────── Naechstes Event: Teaser mit Countdown */
.naechstes{
  margin-top:clamp(28px,4vh,44px);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,32px);
  padding:20px clamp(20px,3vw,28px);
  background:color-mix(in srgb,var(--schwarz-2) 86%,transparent);
  border:1px solid var(--rand);border-radius:16px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.naechstes-label{font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grau-2);display:block;margin-bottom:5px}
.naechstes-titel{font-family:var(--anzeige);font-size:clamp(17px,2vw,22px);
  letter-spacing:-.02em;text-transform:uppercase;line-height:1.1}
.naechstes-meta{font-size:13px;color:var(--grau);margin-top:5px}
.countdown{display:flex;gap:14px;margin-left:auto}
.countdown-teil{text-align:center;min-width:46px}
.countdown-zahl{font-family:var(--anzeige);font-size:clamp(22px,2.6vw,30px);
  color:var(--rot);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  display:block;line-height:1}
.countdown-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grau-2);margin-top:5px;display:block}

.hero-unten{position:absolute;left:var(--seite);bottom:18px;z-index:2;
  display:flex;align-items:center;gap:12px}
.scroll-hinweis{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grau-2)}
.scroll-linie{width:46px;height:1px;background:
  linear-gradient(to right,var(--grau-2),transparent);position:relative;overflow:hidden}
.scroll-linie::after{content:"";position:absolute;inset:0;width:40%;
  background:var(--rot);animation:wandern 2.4s cubic-bezier(.6,0,.4,1) infinite}
@keyframes wandern{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}

/* ──────────────────────────────────────────────────────── Sektionen */
section{padding:var(--rhythmus) var(--seite)}
.sektion-kopf{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;padding-bottom:28px;margin-bottom:clamp(28px,4vw,48px);
  border-bottom:1px solid var(--rand)}
.sektion-kopf h2{font-size:clamp(34px,6.4vw,78px)}
.sektion-zahl{margin:0;font-size:13px;color:var(--grau-2);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ─────────────────────────────────────────────── Events: die Geldsektion */
.event-liste{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:14px}
.event{
  position:relative;display:grid;align-items:center;gap:clamp(14px,2.5vw,32px);
  grid-template-columns:116px minmax(0,1fr) auto;
  padding:clamp(20px,2.6vw,30px);
  background:var(--schwarz-2);border:1px solid var(--rand);border-radius:18px;
  transition:border-color .28s,background .28s,transform .28s cubic-bezier(.2,.9,.2,1);
}
.event:hover{border-color:color-mix(in srgb,var(--rot) 48%,transparent);
  background:var(--schwarz-3);transform:translateY(-3px)}
.event--aus{opacity:.46}
.event--aus:hover{transform:none;border-color:var(--rand);background:var(--schwarz-2)}

.event-datum{text-align:center;border-right:1px solid var(--rand);
  padding-right:clamp(12px,2vw,24px)}
.event-tag{font-family:var(--anzeige);font-size:clamp(32px,4vw,46px);
  line-height:.9;letter-spacing:-.04em;display:block}
.event-monat{font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rot);margin-top:7px;display:block}
.event-wtag{font-size:11px;color:var(--grau-2);margin-top:3px;display:block}

.event-haupt{min-width:0}
.event-titel{font-family:var(--anzeige);font-size:clamp(19px,2.3vw,27px);
  letter-spacing:-.025em;text-transform:uppercase;line-height:1.08}
.event-lineup{margin:9px 0 0;font-size:14px;color:var(--weiss);
  display:flex;flex-wrap:wrap;gap:6px 0}
.event-lineup span:not(:last-child)::after{content:"·";color:var(--grau-2);
  margin:0 8px}
.event-ort{margin:7px 0 0;font-size:13px;color:var(--grau)}
.event-marken{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
.marke{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;border:1px solid var(--rand);color:var(--grau)}
.marke--platzhalter{border-color:var(--gruen);color:var(--gruen)}
.marke--genre{border-color:color-mix(in srgb,var(--rot) 32%,transparent);
  color:var(--rot)}

.event-preis{text-align:right;white-space:nowrap}
.event-preis-vvk{font-family:var(--anzeige);font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-.03em;display:block;line-height:1}
.event-preis-label{font-size:11px;color:var(--grau-2);margin-top:6px;display:block}
.event-aktion{white-space:nowrap}
.event-aus-text{font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gruen);border:1px solid var(--gruen);
  padding:11px 18px;border-radius:999px;display:inline-block}
.event-bald-text{font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau-2);border:1px solid var(--rand);
  padding:11px 18px;border-radius:999px;display:inline-block}

.event-hinweis{margin:clamp(26px,3vw,38px) 0 0;font-size:14px;color:var(--grau-2);
  max-width:52ch}

/* ─────────────────────────────────────────────────────────────── Vibe */
.vibe-raster{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.vibe-feld{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:var(--schwarz-2);border:1px dashed var(--rand);
  display:grid;place-items:center;text-align:center;padding:24px}
.vibe-feld:nth-child(2){aspect-ratio:4/3}
.vibe-feld p{margin:0;font-size:13px;color:var(--grau-2);line-height:1.5}
.vibe-feld strong{display:block;font-family:var(--anzeige);font-size:13px;
  letter-spacing:.04em;color:var(--gruen);margin-bottom:8px;text-transform:uppercase}

/* ─────────────────────────────────────────────────────────────── Info */
.info-liste{margin:0;display:grid;gap:0 clamp(24px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.info-zeile{display:grid;grid-template-columns:minmax(96px,1fr) 2.2fr;gap:20px;
  padding:19px 0;border-bottom:1px solid var(--rand)}
.info-zeile dt{font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--rot);margin:0}
.info-zeile dd{margin:0;font-size:15px;color:var(--grau);line-height:1.55}

/* ───────────────────────────────────────────────────────────────── Fuss */
.fuss{padding:clamp(44px,6vw,72px) var(--seite) 36px;border-top:1px solid var(--rand);
  display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.fuss-marke{font-family:var(--anzeige);font-size:clamp(40px,8vw,96px);
  letter-spacing:-.045em;line-height:.8;color:var(--schwarz-3);
  -webkit-text-stroke:1px var(--rand)}
.fuss-nav{display:flex;flex-wrap:wrap;gap:22px;margin-left:auto;font-size:14px}
.fuss-nav a{color:var(--grau);transition:color .2s}
.fuss-nav a:hover{color:var(--rot)}
.fuss-klein{margin:0;font-size:12px;color:var(--grau-2);width:100%}

/* ─────────────────────────────────────── Einblenden: EINMAL beim Laden */
[data-reveal]{opacity:0;transform:translateY(22px)}
.geladen [data-reveal]{animation:auf .9s cubic-bezier(.17,.84,.26,1) forwards}
.geladen [data-reveal="1"]{animation-delay:.08s}
.geladen [data-reveal="2"]{animation-delay:.18s}
.geladen [data-reveal="3"]{animation-delay:.28s}
.geladen [data-reveal="4"]{animation-delay:.46s}
.geladen [data-reveal="5"]{animation-delay:.60s}
@keyframes auf{to{opacity:1;transform:none}}

/* Scroll-gesteuert per CSS, kein JS-Listener */
@supports (animation-timeline:view()){
  .event,.vibe-feld,.info-zeile{
    animation:hoch .7s cubic-bezier(.17,.84,.26,1) both;
    animation-timeline:view();animation-range:entry 0% entry 42%;
  }
  @keyframes hoch{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
}

/* ─────────────────────────────────────────────────────────── Mobil */
@media (max-width:860px){
  .kopf-nav{display:none}
  .event{grid-template-columns:76px minmax(0,1fr);row-gap:18px}
  .event-datum{padding-right:14px}
  .event-aktion{grid-column:1/-1}
  .event-aktion .cta,.event-aus-text,.event-bald-text{width:100%;justify-content:center;text-align:center}
  .countdown{margin-left:0;width:100%}
  .naechstes{flex-direction:column;align-items:flex-start}
}
@media (max-width:620px){
  body{padding-bottom:76px}
  .cta--kopf{display:none}
  .cta--mobil{
    display:flex;position:fixed;left:14px;right:14px;bottom:14px;z-index:100;
    justify-content:center;align-items:baseline;gap:10px;padding:16px;
    font-size:15px;border-radius:14px;
    box-shadow:0 14px 40px -10px color-mix(in srgb,var(--rot) 45%,transparent);
  }
  .cta--mobil strong{font-weight:600;opacity:.62;font-size:13px}
  .hero-unten{display:none}
}

/* ──────────────────────────────── Weniger Bewegung respektieren */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  .scroll-linie::after{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Markenspezifisch: Maskottchen, Secret-Angle, Zustaende ohne Inhalt
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────── Chamaeleon im Hero */
/* ⚠️ KEIN filter:drop-shadow() auf diesem Bild.
   Safari (macOS 13) rendert das Element bei grossen Weichzeichnungsradien
   (hier 60px/90px auf einem 658x1400-PNG mit Alpha) GAR NICHT mehr —
   opacity, visibility und das Rechteck melden dabei alles als korrekt.
   Der Schein kommt darum als eigene Ebene DAHINTER, nicht als Filter. */
.maskottchen{
  position:absolute;pointer-events:none;
  right:clamp(-30px,3vw,90px);bottom:0;
  height:min(92vh,880px);width:auto;max-width:none;
  opacity:0;transform:translateY(26px) scale(.985);
}
.geladen .maskottchen{
  animation:mask-auf 1.25s cubic-bezier(.17,.84,.26,1) .32s forwards;
}
@keyframes mask-auf{to{opacity:1;transform:none}}
/* Ebenen, an genau einer Stelle festgelegt:
   0 = WebGL-Atmosphaere · 1 = Scrim darueber · 2 = Maskottchen · 3 = Text.
   Das Scrim daempft nur das 3D, NICHT das Maskottchen — sonst verschwindet es. */
.hero-3d{z-index:0}
.hero-scrim{z-index:1}
.maskottchen-schein{z-index:1}
.maskottchen{z-index:2}

/* Der Schein hinter dem Maskottchen — ersetzt den nicht nutzbaren Filter */
.maskottchen-schein{
  position:absolute;pointer-events:none;
  right:-4%;bottom:-8%;width:46%;height:86%;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(229,48,26,.30) 0%, rgba(229,48,26,.13) 38%, transparent 72%);
  opacity:0;
}
.geladen .maskottchen-schein{
  animation:schein-auf 1.6s cubic-bezier(.17,.84,.26,1) .3s forwards;
}
@keyframes schein-auf{to{opacity:1}}
@media (max-width:760px){.maskottchen-schein{display:none}}
.hero-inhalt{z-index:3}
.hero-unten{z-index:3}

@media (max-width:1180px){
  .maskottchen{height:min(66vh,560px);right:-8vw;opacity:.42}
  .geladen .maskottchen{animation-name:mask-auf-blass}
  @keyframes mask-auf-blass{to{opacity:.42;transform:none}}
}
@media (max-width:760px){
  .maskottchen{height:46vh;right:-14vw;opacity:.26}
  .geladen .maskottchen{animation-name:mask-auf-schwach}
  @keyframes mask-auf-schwach{to{opacity:.26;transform:none}}
}

/* ───────────────────────────────────────── Ohne WebGL: ruhiger Verlauf */
.kein-3d .hero{
  background:
    radial-gradient(120% 90% at 78% 18%,color-mix(in srgb,var(--rot) 20%,transparent),transparent 62%),
    radial-gradient(90% 70% at 10% 80%,color-mix(in srgb,var(--rot-tief) 22%,transparent),transparent 58%),
    var(--schwarz);
}

/* ───────────────────────────────────────── Secret-Angle */
.marke--geheim{
  border-color:color-mix(in srgb,var(--gruen) 46%,transparent);
  color:var(--gruen);
}
.event-unter{
  margin:8px 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(16px,1.9vw,21px);color:var(--rot-hell);line-height:1.2;
}

/* ───────────────────────────────────────── Zustaende: Inhalt fehlt noch */
.event-preis-offen,.event-leer,.fuss-offen{color:var(--grau-2)}
.event-preis-offen{font-size:13px}
.event-leer{
  padding:34px;border:1px dashed var(--rand);border-radius:18px;
  text-align:center;font-size:15px;list-style:none;
}
.fuss-offen{font-size:14px;opacity:.55}
.countdown-laeuft{
  font-family:var(--anzeige);font-size:15px;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--rot);
}
.naechstes-text{min-width:0}

/* ───────────────────────────────────────── Rot leuchtet, nicht nur faerbt */
.cta{box-shadow:0 0 0 0 transparent}
.cta:hover{
  background:var(--rot-hell);
  box-shadow:0 12px 36px -8px color-mix(in srgb,var(--rot) 62%,transparent);
}
.cta,.cta--mobil{color:#fff}
.wortmarke svg{color:var(--rot)}
.wortmarke:hover svg{color:var(--rot-hell)}
::selection{background:var(--rot);color:#fff}

/* Die Fussmarke als Umriss, wie das 3D-Logo */
.fuss-marke{
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--rot) 38%,transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIE FAHNDUNGSTAFEL — die Startseite.
   Papier statt Schwarz, schwarze Versalien, duenne Rahmen mit Eckmarken.
   Uebernimmt die Bildsprache des FOMO-Plakats (Mugshot mit Messlatte).
   Alles darunter bleibt dunkel — der Bruch ist beabsichtigt.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --papier-2:#e7e3db;
  --tinte:#111010;
  --tinte-2:#55504a;
  --linie:rgba(17,16,16,.22);
}

.tafel{
  /* Feste Bildschirmhoehe: die Tafel ist ein Plakat, kein scrollender Block.
     Mit min-height wuerde das Bild die Zeile aufblaehen und ueberlaufen. */
  position:relative;height:100svh;min-height:540px;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding:calc(var(--kopf-h) + clamp(18px,3vh,34px)) clamp(26px,5vw,74px) clamp(22px,3.5vh,40px);
  background:var(--papier);color:var(--tinte);overflow:hidden;
}
.tafel-grund{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
/* Nur die Inhaltsbloecke anheben — NICHT die absolut gesetzten Elemente
   (Messlatte, Rahmen, Scrollhinweis), sonst verlieren die ihre Position. */
.tafel>.tafel-kopf,.tafel>.tafel-mitte,.tafel>.tafel-fuss{position:relative;z-index:2}

/* Rahmen mit Eckmarken */
.tafel-rahmen{
  position:absolute;z-index:1;pointer-events:none;
  inset:calc(var(--kopf-h) + 10px) clamp(14px,2.6vw,36px) 12px;
  border:1px solid var(--linie);
}
.tafel-rahmen span{position:absolute;width:9px;height:9px;border:1px solid var(--tinte);
  background:var(--papier)}
.tafel-rahmen span:nth-child(1){left:-5px;top:-5px}
.tafel-rahmen span:nth-child(2){right:-5px;top:-5px}
.tafel-rahmen span:nth-child(3){left:-5px;bottom:-5px}
.tafel-rahmen span:nth-child(4){right:-5px;bottom:-5px}

/* ── Kopf: Wortmarke und Eckdaten */
.tafel-kopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(18px,4vw,60px);flex-wrap:wrap}
.tafel-wortmarke{
  font-family:var(--anzeige);font-size:clamp(54px,11.5vw,168px);line-height:.78;
  letter-spacing:-.045em;color:var(--rot);margin:0;
}
.tafel-claim{
  margin:clamp(6px,1vh,14px) 0 0;font-size:clamp(13px,1.5vw,18px);
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinte);font-weight:500;
}
.tafel-claim em{color:var(--rot-text);letter-spacing:0}
.tafel-eckdaten{margin:0;display:flex;gap:clamp(14px,2.4vw,38px);align-items:flex-start;
  text-align:right;flex-wrap:wrap}
.tafel-eckdaten div{min-width:0}
.tafel-eckdaten dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinte-2);margin:0 0 5px}
.tafel-eckdaten dd{margin:0;font-family:var(--anzeige);font-size:clamp(15px,2vw,24px);
  letter-spacing:-.02em;text-transform:uppercase;line-height:1}

/* ── Messlatte links und rechts */
.latte{position:absolute;z-index:1;top:34%;bottom:17%;width:clamp(44px,7vw,96px);
  display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.latte--links{left:clamp(16px,3.2vw,44px)}
.latte--rechts{right:clamp(16px,3.2vw,44px)}
.latte i{display:flex;align-items:center;gap:8px;font-style:normal;
  font-size:11px;font-variant-numeric:tabular-nums;color:var(--tinte-2);letter-spacing:.04em}
.latte--rechts i{flex-direction:row-reverse}
.latte i::after{content:"";flex:1;height:1px;background:var(--linie)}

/* ── Die Fahndung selbst */
/* Die Hoehe muss an der Gitterzeile haengen, sonst ist sie unbestimmt und
   height:100% am Bild loest ins Leere auf (Bild wird winzig).
   align-self:stretch gibt der Figur die volle Zeilenhoehe,
   justify-self:center laesst die Breite auf das Bild zusammenschrumpfen —
   nur so deckt sich der Rahmen der Figur mit dem Bild, und nur dann sitzt
   die Schildflaeche in Prozent an der richtigen Stelle. */
/* Mitte: Frage oben, darunter die Buehne mit Datum und Maskottchen.
   Die Hoehe muss an der Gitterzeile haengen (align-self:stretch), sonst
   ist sie unbestimmt und height:100% am Bild loest ins Leere auf. */
.tafel-mitte{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;
  padding:clamp(4px,1vh,14px) 0;overflow:hidden;justify-items:center}

.tafel-frage{
  margin:0 0 clamp(4px,1vh,12px);text-align:center;
  font-size:clamp(11px,1.4vw,17px);letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--tinte-2);
}
.tafel-frage b{color:var(--rot-text);font-weight:600}

.tafel-buehne{position:relative;align-self:stretch;justify-self:center;
  display:flex;align-items:flex-end;justify-content:center;min-height:0}

/* Das Datum als Plakattypo HINTER dem Maskottchen */
.tafel-datum{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--anzeige);font-size:clamp(58px,13vw,190px);line-height:.82;
  letter-spacing:-.05em;white-space:nowrap;color:var(--tinte);
  opacity:.11;pointer-events:none;user-select:none;
}
.fahndung-bild{position:relative;height:100%;width:auto;max-width:100%;
  object-fit:contain;display:block;filter:none}
/* Die Farbvariante liegt deckungsgleich darueber und wird eingeblendet.
   left/transform zentrieren sie ueber dem Originalbild. */
.fahndung-bild--farbe{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  opacity:0;transition:opacity 1.4s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.fahndung-bild--farbe.sichtbar{opacity:1}

/* Der Farbwechsel soll gleiten, nicht springen. CSS-Variablen selbst lassen
   sich nicht animieren — darum die Eigenschaften, die sie benutzen. */
.tafel-wortmarke,.tafel-claim em,.tafel-frage b,.cta,.wortmarke svg,
.event-monat,.event-unter,.info-zeile dt,.countdown-zahl,.hero-marke,
.marke--genre,.event-preis-vvk{
  transition:color 1.4s cubic-bezier(.4,0,.2,1),
             background-color 1.4s cubic-bezier(.4,0,.2,1),
             border-color 1.4s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion:reduce){
  .fahndung-bild--farbe{transition:none}
  .tafel-wortmarke,.tafel-claim em,.tafel-frage b,.cta,.wortmarke svg,
  .event-monat,.event-unter,.info-zeile dt,.countdown-zahl,.hero-marke,
  .marke--genre,.event-preis-vvk{transition:none}
}

/* ── Fuss der Tafel */
.tafel-fuss{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.tafel-ort{font-size:clamp(12px,1.4vw,16px);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinte);line-height:1.6}
.tafel-ort b{display:block;font-family:var(--anzeige);font-weight:400;
  font-size:clamp(14px,1.8vw,21px);letter-spacing:-.01em}
.cta--tafel{background:var(--tinte);color:var(--papier);padding:15px 26px;font-size:15px}
.cta--tafel:hover{background:var(--rot);color:#fff;
  box-shadow:0 12px 34px -10px rgba(17,16,16,.5)}
.tafel-scroll{position:absolute;left:50%;bottom:clamp(14px,2.4vh,26px);transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinte-2)}
.tafel-scroll svg{width:11px;height:18px}
.geladen .tafel-scroll svg{animation:tippen 2.2s ease-in-out infinite}
@keyframes tippen{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ── Kopfleiste auf hellem Grund */
.kopf--hell{background:color-mix(in srgb,var(--papier) 80%,transparent);
  border-bottom-color:transparent}
.kopf--hell .wortmarke svg{color:var(--rot)}
.kopf--hell .kopf-nav a{color:var(--tinte-2)}
.kopf--hell .kopf-nav a:hover{color:var(--tinte)}
.kopf--hell.gescrollt{background:color-mix(in srgb,var(--schwarz) 92%,transparent);
  border-bottom-color:var(--rand)}
.kopf--hell.gescrollt .kopf-nav a{color:var(--grau)}
.kopf--hell.gescrollt .kopf-nav a:hover{color:var(--weiss)}

@media (max-width:860px){
  .latte{display:none}
  .tafel-eckdaten{width:100%;text-align:left;justify-content:flex-start}
  .tafel-kopf{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .geladen .tafel-scroll svg{animation:none}
}

/* Abendkassa statt Ticketknopf */
.event-kassa{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rot);border:1px solid color-mix(in srgb,var(--rot) 46%,transparent);
  padding:11px 18px;border-radius:999px;display:inline-block;white-space:nowrap;
}
.tafel-club{text-decoration:none;color:inherit}
.tafel-club:hover b{color:var(--rot)}

/* Merken und Teilen — die beiden Handlungen, die ohne Verkauf zaehlen */
.event-hilfen{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.hilfe{
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:1px solid var(--rand);color:var(--grau);
  font-family:var(--text);font-size:12px;font-weight:500;letter-spacing:.04em;
  padding:8px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s;
}
.hilfe svg{width:14px;height:14px;flex:0 0 auto}
.hilfe:hover{color:var(--weiss);border-color:var(--rot);
  background:color-mix(in srgb,var(--rot) 10%,transparent)}
.hilfe:active{transform:translateY(1px)}
@media (max-width:860px){
  .event-hilfen{width:100%}
  .hilfe{flex:1;justify-content:center}
}

/* Anfahrt — gehoert zur Information, nicht zum Verkauf */
.anfahrt{
  margin-top:clamp(26px,3.5vw,44px);
  display:flex;align-items:center;gap:clamp(14px,3vw,30px);flex-wrap:wrap;
  padding:clamp(20px,2.6vw,28px);
  background:var(--schwarz-2);border:1px solid var(--rand);border-radius:18px;
}
.anfahrt-label{font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grau-2)}
.anfahrt-ort{font-size:14px;color:var(--grau);line-height:1.5;min-width:0}
.anfahrt-ort b{display:block;font-family:var(--anzeige);font-weight:400;
  font-size:clamp(16px,2vw,21px);letter-spacing:-.02em;color:var(--weiss);
  text-transform:uppercase}
.anfahrt .cta{margin-left:auto}
.vibe-feld--bild{border:1px solid var(--rand);border-style:solid;padding:0}
.vibe-feld--bild img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:620px){.anfahrt .cta{margin-left:0;width:100%;justify-content:center}}

/* ═══════════════════════════════════════════════════════════════════════════
   GÄSTELISTE — die einzige Stelle, an der die Seite etwas entgegennimmt.
   Kein Ticket, keine Zahlung: nur ein Name und eine Zahl.
   ═══════════════════════════════════════════════════════════════════════════ */
.gaeste-raster{
  display:grid;gap:clamp(26px,4vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  align-items:start;
}
.gaeste-lead{margin:0 0 20px;font-size:clamp(17px,2vw,22px);line-height:1.5;
  color:var(--weiss);max-width:36ch}
.gaeste-lead b{color:var(--rot);font-weight:600}
.gaeste-punkte{margin:0;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:12px}
.gaeste-punkte li{position:relative;padding-left:22px;font-size:14px;
  color:var(--grau);line-height:1.55}
.gaeste-punkte li::before{content:"";position:absolute;left:0;top:9px;
  width:7px;height:7px;border-radius:50%;background:var(--rot);opacity:.7}

.gaeste-form{
  display:flex;flex-direction:column;gap:18px;
  padding:clamp(22px,3vw,34px);
  background:var(--schwarz-2);border:1px solid var(--rand);border-radius:20px;
}
.feld{display:flex;flex-direction:column;gap:8px}
.feld label{font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grau-2)}
.feld label span{color:var(--grau-2);opacity:.6;letter-spacing:.08em}
/* Alle Feldarten erfassen. Vorher fehlte type=email und stand als
   weisser Browser-Kasten zwischen den dunklen Feldern. */
.feld input{
  background:var(--schwarz);border:1px solid var(--rand);border-radius:11px;
  color:var(--weiss);font-family:var(--text);font-size:16px;  /* 16px: iOS zoomt sonst */
  padding:14px 16px;width:100%;
  transition:border-color .2s,background .2s;
}
.feld input::placeholder{color:var(--grau-2)}
.feld input:focus{outline:none;border-color:var(--rot);
  background:color-mix(in srgb,var(--rot) 6%,var(--schwarz))}
.feld input[aria-invalid="true"]{border-color:var(--fehler)}
.feld-fehler{font-size:12px;color:var(--fehler);min-height:0}
.feld-fehler:empty{display:none}
.feld-hinweis{font-size:12px;color:var(--grau-2)}

/* Zähler statt Zahlenfeld — auf dem Handy viel schneller zu bedienen */
.zaehler{display:flex;align-items:stretch;gap:8px}
/* ⚠ Die Breite MUSS wichtiger sein als .feld input{width:100%} darueber,
   sonst dehnt sich das Zahlenfeld und schiebt das Plus aus der Karte. */
.zaehler{display:flex;align-items:stretch;gap:8px}
.zaehler input.zaehler-zahl{text-align:center;width:72px;min-width:0;flex:0 0 72px;
  -moz-appearance:textfield;font-family:var(--anzeige);font-size:20px}
.zaehler input::-webkit-outer-spin-button,
.zaehler input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.zaehler-knopf{
  width:50px;flex:0 0 auto;background:var(--schwarz);color:var(--weiss);
  border:1px solid var(--rand);border-radius:11px;cursor:pointer;
  font-size:22px;line-height:1;font-family:var(--text);
  transition:border-color .2s,color .2s,background .2s;
}
.zaehler-knopf:hover:not(:disabled){border-color:var(--rot);color:var(--rot)}
.zaehler-knopf:disabled{opacity:.3;cursor:not-allowed}

.koeder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.zustimmung{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:13px;color:var(--grau);line-height:1.5}
.zustimmung input{margin:2px 0 0;accent-color:var(--rot);width:17px;height:17px;
  flex:0 0 auto;cursor:pointer}

.cta--gaeste{justify-content:center;padding:16px 24px;font-size:15px;margin-top:4px}
.cta--gaeste:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.gaeste-status{margin:0;font-size:14px;line-height:1.5;min-height:0}
.gaeste-status:empty{display:none}
.gaeste-status.ok{color:var(--gruen)}
.gaeste-status.fehler{color:var(--fehler)}
.gaeste-status.warte{color:var(--grau)}

/* Nach dem Eintragen: Formular weg, Bestätigung da */
.gaeste-fertig{
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  padding:clamp(26px,3.5vw,40px);
  background:var(--schwarz-2);border:1px solid color-mix(in srgb,var(--gruen) 40%,transparent);
  border-radius:20px;
}
.gaeste-fertig h3{font-family:var(--anzeige);font-size:clamp(20px,2.6vw,30px);
  letter-spacing:-.02em;text-transform:uppercase;color:var(--gruen);margin:0}
.gaeste-fertig p{margin:0;font-size:15px;color:var(--grau);line-height:1.6}

/* Vorname und Nachname nebeneinander, auf dem Handy untereinander */
.feld-paar{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:520px){.feld-paar{grid-template-columns:1fr}}


/* Ohne JavaScript: die harten Fakten, gut lesbar, ohne Gestaltungsanspruch.
   Alle Inhalte stecken sonst im Datenblock und blieben unsichtbar. */
.ohne-js{
  position:relative;z-index:200;
  display:flex;flex-direction:column;gap:7px;
  padding:20px clamp(20px,5vw,80px);
  background:var(--rot-knopf);color:#fff;
  font-size:15px;line-height:1.5;
}
.ohne-js b{font-family:var(--anzeige);font-size:19px;letter-spacing:-.02em;
  text-transform:uppercase}

/* Die toten Regeln aus dem Hero-Umbau (.hero-*, .naechstes-*, .event-preis-*)
   stehen bewusst noch drin: sie kosten 3 KB, und ein automatisches Entfernen
   hat das Stylesheet schon einmal zerlegt. Von Hand, mit Ruhe, oder gar nicht. */


/* ═══════════════════════════════════════════════════════════════════════════
   MOBIL — Korrekturen zur Tafel.
   ⚠ Dieser Block MUSS am Ende der Datei stehen: die Tafel-Regeln weiter oben
   wuerden ihn sonst ueberschreiben. Genau daran ist die Adresse beim ersten
   Versuch unsichtbar geblieben.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:620px){
  /* Die feste Leiste unten deckt den Knopf auf der Tafel ab — beide
     gleichzeitig sind zwei Aufforderungen fuer dieselbe Sache. */
  .cta--tafel{display:none}
  .tafel-scroll{display:none}
  .tafel-fuss{justify-content:flex-start}
  /* Platz schaffen, damit die Adresse nicht unter der Leiste verschwindet.
     "Wo" ist eine der drei Angaben, wegen derer die Seite existiert. */
  .tafel{padding-bottom:calc(78px + clamp(12px,2vh,22px))}
  /* Der Kopf stapelt sich auf dem Handy und wird hoch — das Bild muss
     entsprechend schrumpfen duerfen, sonst wird der Fuss abgeschnitten. */
  .tafel-mitte{padding:6px 0}
}


/* ═══ Anker: die feste Kopfleiste schneidet sonst jede Überschrift an ═══ */
section[id]{scroll-margin-top:calc(var(--kopf-h) + 18px)}

/* ═══ Formular: nichts darf aus der Karte laufen ═══ */
.gaeste-form{min-width:0}
.gaeste-form .feld,.gaeste-form .feld-paar{min-width:0}
.zaehler-knopf{flex:0 0 50px}

/* ═══ Mobil: die feste Leiste lag über dem Absenden-Knopf ═══ */
@media (max-width:620px){
  /* Luft unter dem Formular, damit der eigene Knopf nicht von der
     Dauerleiste verdeckt wird — man soll nicht scrollen muessen, um den
     Knopf zu erreichen, den man gerade druecken will. */
  .gaeste-form{padding-bottom:calc(22px + 78px)}
  /* Im Formular ist die Dauerleiste ueberfluessig: der richtige Knopf
     steht direkt davor. Zwei rote Knoepfe uebereinander verwirren nur. */
  #gaesteliste:target ~ .cta--mobil{display:none}
}

/* Erklärzeile unter der Secret-Frage — leer bleibt sie unsichtbar */
.tafel-erklaerung{
  margin:6px 0 0;text-align:center;max-width:46ch;
  font-size:clamp(12px,1.3vw,15px);line-height:1.5;color:var(--tinte-2);
}
.tafel-erklaerung:empty{display:none}
.marke--preis{border-color:var(--weiss);color:var(--weiss)}
.hilfe--fertig{color:var(--gruen);border-color:var(--gruen)}

/* ═══ Rechtstexte: lesbar, ohne Gestaltungsehrgeiz ═══ */
.rechtstext{padding-top:calc(var(--kopf-h) + var(--rhythmus))}
.rechtstext .info-liste{grid-template-columns:1fr;max-width:72ch}
.rechtstext .info-zeile{grid-template-columns:minmax(150px,1fr) 2.4fr}
.rechtstext a{color:var(--rot);text-decoration:underline;text-underline-offset:3px}
.rechtstext a:hover{color:var(--rot-hell)}
.rechtstext-zurueck{margin-top:clamp(30px,4vw,48px);font-size:15px}
@media (max-width:620px){
  .rechtstext .info-zeile{grid-template-columns:1fr;gap:6px}
}

/* ═══ Hero: der Knopf lief bei mittlerer Breite in "Alle Termine" ═══ */
@media (max-width:1100px){
  /* Beides nebeneinander geht sich nicht aus. Der Hinweis ist Dekoration,
     der Knopf nicht — also weicht der Hinweis. */
  .tafel-scroll{display:none}
}
.tafel-fuss{position:relative;z-index:3}

/* ═══════════════════════════════════════════════════════════════════════════
   FUSSZEILE — das Maskottchen sitzt auf der Wortmarke, wie im 3D-Logo.
   ═══════════════════════════════════════════════════════════════════════════ */
.fuss-marke-block{position:relative;display:inline-block;line-height:0}
.fuss-chamaeleon{
  position:absolute;z-index:2;pointer-events:none;
  left:-4%;bottom:52%;width:46%;height:auto;max-width:none;
  opacity:0;transform:translateY(14px) rotate(-2deg);
}
/* Einmal beim Hereinscrollen, nicht in Dauerschleife */
@supports (animation-timeline:view()){
  .fuss-chamaeleon{
    animation:chamaeleon-rauf .9s cubic-bezier(.17,.84,.26,1) both;
    animation-timeline:view();animation-range:entry 0% entry 60%;
  }
}
@supports not (animation-timeline:view()){
  .geladen .fuss-chamaeleon{opacity:1;transform:none}
}
@keyframes chamaeleon-rauf{to{opacity:1;transform:none}}

/* Die Wortmarke bekommt mehr Gewicht, damit das Tier etwas zum Sitzen hat */
.fuss-marke{
  position:relative;z-index:1;
  -webkit-text-stroke:2px color-mix(in srgb,var(--rot) 52%,transparent);
}
.fuss{align-items:flex-end}

@media (max-width:620px){
  .fuss-chamaeleon{width:40%;left:-2%;bottom:58%}
}
@media (prefers-reduced-motion:reduce){
  .fuss-chamaeleon{opacity:1;transform:none;animation:none}
}