/* ===================================================================
   SCHNACK Hauptseite — components.css
   Nav · Switcher · Buttons · Hero · Marquee · Sektionen · Kalender · Footer
   =================================================================== */

/* ── Pattern-Hintergründe (Switcher tauscht das Bild) ───────────── */
.pat { background-repeat: no-repeat; background-position: center; background-size: cover; }
[data-colorway="rot"]    .pat-pfeil { background-image: url('../assets/patterns/pfeil-rot.svg'); }
[data-colorway="blau"]   .pat-pfeil { background-image: url('../assets/patterns/pfeil-blau.svg'); }
[data-colorway="gruen"]  .pat-pfeil { background-image: url('../assets/patterns/pfeil-gruen.svg'); }
[data-colorway="orange"] .pat-pfeil { background-image: url('../assets/patterns/pfeil-orange.svg'); }
[data-colorway="grueninv"] .pat-pfeil { background-image: url('../assets/patterns/pfeil-grueninv.svg'); }

[data-colorway="rot"]    .pat-gezackt { background-image: url('../assets/patterns/gezackt-rot.svg'); }
[data-colorway="blau"]   .pat-gezackt { background-image: url('../assets/patterns/gezackt-blau.svg'); }
[data-colorway="gruen"]  .pat-gezackt { background-image: url('../assets/patterns/gezackt-gruen.svg'); }
[data-colorway="orange"] .pat-gezackt { background-image: url('../assets/patterns/gezackt-orange.svg'); }
[data-colorway="grueninv"] .pat-gezackt { background-image: url('../assets/patterns/gezackt-grueninv.svg'); }

[data-colorway="rot"]    .pat-linien { background-image: url('../assets/patterns/linien-rot.svg'); }
[data-colorway="blau"]   .pat-linien { background-image: url('../assets/patterns/linien-blau.svg'); }
[data-colorway="gruen"]  .pat-linien { background-image: url('../assets/patterns/linien-gruen.svg'); }
[data-colorway="orange"] .pat-linien { background-image: url('../assets/patterns/linien-orange.svg'); }
[data-colorway="grueninv"] .pat-linien { background-image: url('../assets/patterns/linien-grueninv.svg'); }

/* Hellrot-Colorway (Key „orange"): eigenes Vorhang-Pattern (Rot-Radial) an ALLEN Pattern-Stellen */
[data-colorway="orange"] .pat-pfeil,
[data-colorway="orange"] .pat-gezackt,
[data-colorway="orange"] .pat-linien { background-image: url('../assets/patterns/vorhang-hellrot.png'); }
[data-colorway="orange"] .section-pattern { opacity: 0.25; }
[data-colorway="orange"] .voucher .pat { opacity: 0.25; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  padding: 14px 24px; border: 2px solid var(--display); border-radius: 4px; /* an Ticketshop-Button (4px) angeglichen */
  background: transparent; color: var(--display); cursor: pointer;
  transition: transform 0.2s, background 0.2s, color 0.2s;
}
.btn:hover { transform: rotate(-1.5deg) scale(1.04); }
.btn--solid { background: var(--display); color: var(--on-accent); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--lg { font-size: 1.05rem; padding: 18px 32px; }
/* Auf hellen Sektionen (Social Proof) Buttons einheitlich dunkel — sonst je Colorway unlesbar */
.section--light .btn { color: var(--ink); border-color: var(--ink); }
.section--light .btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.section--light .btn--solid { background: var(--ink); color: var(--cream); }
.section--light .btn--solid:hover { background: #000; border-color: #000; }

/* Ticket-Stub-Button (aus Buttons_Header-Inspo) — Stub reißt beim Hover ab */
.btn-ticket {
  display: inline-flex; align-items: stretch; text-decoration: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; letter-spacing: 0.03em;
  color: var(--on-accent); border: none; overflow: visible; transition: transform 0.2s;
}
.btn-ticket:hover { transform: rotate(-1.5deg); }
.btn-ticket .bt-label {
  padding: 11px 16px; white-space: nowrap; display: flex; align-items: center;
  background: var(--display); border-radius: 4px 0 0 4px;
}
.btn-ticket .bt-stub {
  display: flex; align-items: center; justify-content: center; padding: 0 13px;
  background: var(--display); border-radius: 0 4px 4px 0;
  border-left: 2px dashed color-mix(in srgb, var(--on-accent) 45%, transparent);
  transform-origin: left center; transition: transform 0.32s cubic-bezier(.34,1.56,.64,1), opacity 0.32s ease;
}
.btn-ticket:hover .bt-stub { transform: translate(9px, -8px) rotate(13deg); opacity: 0.92; }
.btn-ticket .bt-stub svg { width: 22px; height: 22px; }
.btn-ticket--lg .bt-label { font-size: 1.05rem; padding: 14px 22px; }
@media (prefers-reduced-motion: reduce) { .btn-ticket:hover .bt-stub { transform: none; } }

/* ── Nav ────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; background: var(--bg);
  border-bottom: 1.5px solid color-mix(in srgb, var(--display) 50%, transparent);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
/* Homepage (body.has-hero): Nav über dem Hero clean/transparent — Hintergrund faded
   erst ein, sobald man über den Marquee hinausscrollt (.site-nav--solid via JS). */
body.has-hero .site-nav { background: transparent; border-bottom-color: transparent; }
body.has-hero .site-nav--solid { background: var(--bg); border-bottom-color: color-mix(in srgb, var(--display) 50%, transparent); }
/* Ghost-Zustand: helle Vordergrundfarben, damit über dem dunklen Video alles lesbar bleibt
   (auch grueninv, dessen --display dunkel ist). */
body.has-hero .site-nav:not(.site-nav--solid) .nav-menu a { color: #FCEFE0; opacity: 0.9; }
body.has-hero .site-nav:not(.site-nav--solid) .nav-menu a:hover { color: #fff; opacity: 1; }
body.has-hero .site-nav:not(.site-nav--solid) .cw-switch { color: #fff; }
body.has-hero .site-nav:not(.site-nav--solid) .nav-burger span { background: #fff; }
/* Mobil: bei GEÖFFNETEM Burger-Menü Kopfzeile vollflächig in Colorway-BG + Texte in Colorway-Farben
   (sonst über dem Hero hell-auf-hell unlesbar, z.B. grueninv). Gleiche Spezifität wie die Ghost-Regeln,
   steht danach → gewinnt, solange .menu-open gesetzt ist (via initNav). */
body.has-hero .site-nav.menu-open { background: var(--bg); border-bottom-color: color-mix(in srgb, var(--display) 50%, transparent); }
body.has-hero .site-nav.menu-open .nav-menu a { color: var(--text); opacity: 0.92; }
body.has-hero .site-nav.menu-open .nav-menu a:hover { color: var(--display); opacity: 1; }
body.has-hero .site-nav.menu-open .cw-switch { color: var(--display); }
body.has-hero .site-nav.menu-open .nav-burger span { background: var(--display); }
/* Mobile: Kopfzeile sofort farbig gefüllt (NICHT transparent über dem Hero) — nur Mobile/Burger-Nav */
@media (max-width: 880px) {
  body.has-hero .site-nav { background: var(--bg); border-bottom-color: color-mix(in srgb, var(--display) 50%, transparent); }
  body.has-hero .site-nav:not(.site-nav--solid) .nav-menu a { color: var(--text); opacity: 0.85; }
  body.has-hero .site-nav:not(.site-nav--solid) .nav-menu a:hover { color: var(--display); opacity: 1; }
  body.has-hero .site-nav:not(.site-nav--solid) .cw-switch { color: var(--display); }
  body.has-hero .site-nav:not(.site-nav--solid) .nav-burger span { background: var(--display); }
}

.nav-logo { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.nav-logo .logo-badge { width: 46px; height: 46px; transform: rotate(var(--scroll-rot, 0deg)); transition: transform 0.2s ease-out, background-color 0.5s ease; }
.nav-logo:hover .logo-badge { transform: rotate(calc(var(--scroll-rot, 0deg) - 6deg)) scale(1.06); }

.nav-menu { list-style: none; display: flex; align-items: center; gap: 26px; }
.nav-menu a {
  position: relative; font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.01em;
  color: var(--text); text-decoration: none; opacity: 0.85; white-space: nowrap;
  transition: color 0.2s, opacity 0.2s, transform 0.25s cubic-bezier(.2,.7,.2,1);
}
/* Hover: Unterstrich wächst von links + sanfter Lift */
.nav-menu a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2.5px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
}
.nav-menu a:hover { opacity: 1; color: var(--display); transform: translateY(-2px); }
.nav-menu a:hover::after { transform: scaleX(1); }
@media (max-width: 880px) { .nav-menu a::after { display: none; } }

.nav-right { display: flex; align-items: center; gap: 12px; margin-left: 22px; }

/* Switcher-Button (Würfel, Icon-only) */
/* Würfel-Switcher: rahmenlos, nur das Icon (neues Würfel-SVG als Maske → Colorway-Farbe) */
.cw-switch {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: none; color: var(--display);
  width: 42px; height: 42px; padding: 0;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), color 0.2s;
}
.cw-switch:hover { transform: rotate(-12deg) scale(1.14); }
.cw-switch:active { transform: rotate(-14deg) scale(0.95); }
.cw-dice {
  width: 30px; height: 30px; display: block; background-color: currentColor;
  -webkit-mask: url('../assets/icons/dice.svg') center / contain no-repeat;
          mask: url('../assets/icons/dice.svg') center / contain no-repeat;
}

/* Burger */
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 8px; background: none; border: none; cursor: pointer; }
.nav-burger span { display: block; height: 2.5px; width: 100%; background: var(--display); border-radius: 2px; transition: transform 0.25s, opacity 0.2s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-burger { display: flex; }
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; align-items: stretch;
    background: var(--bg); border-bottom: 1.5px solid var(--display);
    padding: 4px 20px 16px; transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }
  .nav-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-menu li { border-top: 1px solid color-mix(in srgb, var(--display) 18%, transparent); }
  .nav-menu a { display: block; padding: 15px 2px; font-size: 1rem; }
  .nav-cta-label-full { display: none; }
}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: safe center; padding: calc(var(--nav-h) + 54px) 0 64px; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.92; transition: opacity 0.5s; }
.hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); backface-visibility: hidden; } /* eigene GPU-Schicht → Video-Decoding rastert das überlappende obere Marquee nicht neu (kein Ruckeln) */
.hero::after { /* Clean: gleichmäßige dezente Abdunklung statt Colorway-Verlauf, nur für Textkontrast */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,6,5,0.55) 0%, rgba(8,6,5,0.48) 45%, rgba(8,6,5,0.68) 100%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero-label { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hero-fg); opacity: 0.92; margin-bottom: 22px; text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.hero-headline {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(3rem, 13vw, 9.5rem); line-height: 0.82; color: var(--display);
  transform: rotate(-2deg); transform-origin: left center; margin-bottom: 30px;
  text-shadow: 0 4px 30px color-mix(in srgb, var(--bg) 60%, transparent);
}
.hero-headline .line { display: block; }
.hero-headline .l1 { font-size: 0.46em; letter-spacing: 0.01em; }
.hero-headline .l2 { font-size: 1em; }
.hero-headline .l3 { font-size: 0.62em; margin-left: 0.25em; color: var(--accent); }
.hero-headline .char { display: inline-block; }
.hero-lead { font-weight: 600; font-size: clamp(1.1rem, 3.2vw, 1.45rem); line-height: 1.3; max-width: 620px; margin-top: clamp(6px, 1.6vw, 18px); margin-bottom: 10px; color: var(--hero-fg); text-shadow: 0 1px 16px rgba(0,0,0,0.5); }
.hero-sub { font-weight: 300; font-size: clamp(0.95rem, 2.4vw, 1.1rem); line-height: 1.5; max-width: 560px; margin-bottom: clamp(20px, 3vw, 28px); color: var(--hero-fg); opacity: 0.9; text-shadow: 0 1px 14px rgba(0,0,0,0.5); }
.hero-sub strong { font-weight: 600; color: var(--hero-fg); }
/* Rechtlicher Sternchen-Hinweis: sichtbar/in Nähe, aber dezent */
.hero-star { font-size: 0.55em; vertical-align: super; line-height: 0; }
/* Rechtlicher Hinweis: dezent am unteren Hero-Rand, knapp über dem Marquee */
.hero-foot { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
  font-weight: 300; font-size: 0.72rem; line-height: 1.3; opacity: 0.6; color: var(--hero-fg);
  text-align: center; padding: 0 20px; margin: 0; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* ── Intro-Band unter dem Marquee (Willkommen + Google-Badge) ──── */
.intro-band { padding: clamp(40px, 6.5vw, 80px) 0; text-align: center; }
.intro-lead { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.4rem, 4vw, 2.25rem); line-height: 1.2; color: var(--display); max-width: 820px; margin: 0 auto 14px; }
.intro-lead .hero-star { font-size: 0.5em; vertical-align: super; opacity: 0.85; }
/* Headline-Grafik „Deutschlands Comedy Club Nr.1" (eigene SVG): Rahmen = Highlight, Typo = CW-Hintergrund */
.intro-headline { margin: 0 auto 18px; max-width: 820px; }
.intro-welcome { display: block; font-family: var(--font-body); font-weight: 600; font-size: clamp(1.1rem, 2.8vw, 1.6rem); line-height: 1.2; color: var(--display); margin-bottom: 12px; }
.dccn { display: block; width: min(100%, 600px); margin: 0 auto; }
.dccn svg { display: block; width: 100%; height: auto; }
.dccn svg path { fill: var(--bg); transition: fill 0.4s ease; }                  /* Typo = Hintergrundfarbe des Colorways */
.dccn svg path:nth-child(-n+4) { fill: var(--display); transition: fill 0.4s ease; } /* die 4 Block-Pfade = Highlightfarbe (Rahmen) */
.intro-sub { font-weight: 300; font-size: clamp(1.05rem, 2.6vw, 1.35rem); line-height: 1.45; max-width: 640px; margin: 0 auto 24px; opacity: 0.92; }
@media (min-width: 900px) { .intro-sub { max-width: none; } .intro-sub-2 { white-space: nowrap; } } /* ganzer 2. Satz auf einer Zeile (Desktop) */
@media (min-width: 1000px) { .section-intro--oneline { max-width: none; } .section-intro--oneline .si-line { white-space: nowrap; } } /* Locations-Satz auf einer Zeile (Desktop) */
.intro-badge { margin: 0 auto 16px; }
.intro-badge a { display: inline-block; }
.intro-badge img { height: 60px; width: auto; display: block; transition: transform 0.2s; }
.intro-badge a:hover img { transform: scale(1.04) rotate(-1.5deg); }
/* Google-Bewertungs-Badge als designtes SVG (Google_3000.svg, scharf bei jeder Größe) */
.gbadge-img { display: block; width: auto; border-radius: 13px; }
.intro-badge a:hover .gbadge-img, .proof-badge a:hover .gbadge-img { transform: scale(1.04) rotate(-1.5deg); }
.intro-foot { font-weight: 300; font-size: 0.72rem; line-height: 1.4; opacity: 0.5; max-width: 600px; margin: 6px auto 0; }
/* Hero: alles zentriert */
.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-inner .hero-actions { justify-content: center; }

/* Headline-Block: Headline (SVG) + schwebendes SCHNACK-Logo oben rechts (wie im Kombi-SVG) */
.hero-head { position: relative; width: min(100%, 720px); margin: 0 auto clamp(16px, 2.4vw, 32px); }
/* Hero-Headline als SVG (ohne Logo), per Maske in der Highlight-Farbe eingefärbt */
.hero-lockup {
  display: block; position: relative; width: min(100%, 680px); aspect-ratio: 6477 / 3295; margin: 0 auto clamp(38px, 5.5vw, 54px);
  -webkit-mask: url('../assets/img/headline-lockup.svg') center / contain no-repeat;
          mask: url('../assets/img/headline-lockup.svg') center / contain no-repeat;
  background-color: var(--hero-fg);
  filter: drop-shadow(0 6px 22px rgba(0,0,0,0.42));
  transition: background-color 0.5s ease; will-change: transform;
}
/* SCHNACK-Logo separat, eigenständig animiert, oben rechts überlappend (Position wie im Kombi-SVG) */
.hero-mark {
  position: absolute; top: -12%; right: -1%; width: 26%; aspect-ratio: 1 / 1; margin: 0; z-index: 2;
  -webkit-mask: url('../assets/logos/wortmarke-weiss.svg') center / contain no-repeat;
          mask: url('../assets/logos/wortmarke-weiss.svg') center / contain no-repeat;
  background-color: var(--hero-fg);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4));
  transition: background-color 0.5s ease; will-change: transform;
}
[data-colorway="pride"] .hero-mark { background: linear-gradient(135deg, #E40303, #FF8C00 22%, #FFED00 42%, #008026 62%, #004DFF 82%, #750787); }

/* ── Logo-Badge (Nav/Footer): Rundmarke auf farbiger Scheibe, analog Microsites ──
   Scheibe = Highlight-Farbe des Colorways (--display), Schrift = --on-accent (immer lesbar).
   Wortmarke per CSS-Maske eingefärbt → trifft jede Colorway inkl. Pride automatisch. */
.logo-badge {
  position: relative; display: block; border-radius: 50%;
  background: var(--display);
  transition: background-color 0.5s ease, transform 0.25s ease;
}
.logo-badge::after {
  content: ''; position: absolute; inset: 13%;
  -webkit-mask: url('../assets/logos/wortmarke-weiss.svg') center / contain no-repeat;
          mask: url('../assets/logos/wortmarke-weiss.svg') center / contain no-repeat;
  background-color: var(--on-accent); transition: background-color 0.5s ease;
}
.hero-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hero-fg); opacity: 0.8; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.hero-cue span { display: block; text-align: center; font-size: 1.4rem; margin-top: 2px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* Hero-Buttons in der Highlight-Farbe (über dem abgedunkelten Video lesbar) */
.hero .btn { border-color: var(--hero-fg); color: var(--hero-fg); }
.hero .btn-ticket { color: var(--hero-ink); }
.hero .btn-ticket .bt-label, .hero .btn-ticket .bt-stub { background: var(--hero-fg); }
.hero .btn-ticket .bt-stub { border-left-color: color-mix(in srgb, var(--hero-ink) 45%, transparent); }
/* Hellrot-Colorway: primärer Hero-CTA in Marken-Hellrot statt Creme */
[data-colorway="orange"] .hero .btn-ticket { color: #FFF3DF; }
[data-colorway="orange"] .hero .btn-ticket .bt-label, [data-colorway="orange"] .hero .btn-ticket .bt-stub { background: #F52424; }
[data-colorway="orange"] .hero .btn-ticket .bt-stub { border-left-color: rgba(255,243,223,0.45); }

/* ── Marquee ────────────────────────────────────────────────────── */
.marquee { background: var(--display); color: var(--bg); overflow: hidden; padding: 13px 0; white-space: nowrap; }
/* Angewinkelte Marquees = diagonale Banderolen; breiter als Viewport + z-index, damit keine Lücken entstehen (body hat overflow-x:hidden) */
.marquee--tilt1, .marquee--tilt2 { position: relative; z-index: 3; width: 112vw; margin-left: -6vw; margin-top: -34px; margin-bottom: -34px; }
.marquee--tilt1 { transform: rotate(-1.6deg) translateZ(0); } /* translateZ(0): eigener GPU-Layer trotz Rotation → Scroll des Kindes komponiert flüssig */
.marquee--tilt2 { transform: rotate(2.6deg) translateZ(0); }
.marquee--tilt2 .marquee-track { animation-direction: reverse; } /* unteres Marquee läuft gegenläufig (von links nach rechts) */
/* Mobile: Marquees deutlich langsamer + mehr Abstand zu Headline („Willkommen bei") und Rechtstext */
@media (max-width: 768px) {
  .marquee .marquee-track { animation-duration: 52s; } /* höhere Spezifität, schlägt das spätere animation-Shorthand */
  .intro-band { padding-top: 100px; padding-bottom: 100px; }
}
.marquee-track { display: inline-flex; backface-visibility: hidden; animation: marquee-scroll 24s linear infinite; } /* kein will-change → iOS recycelt den Layer nicht „nach gewisser Zeit" (Ruckeln) */
@keyframes marquee-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } /* 3D-Transform → GPU-Kompositing, flüssiger (v.a. Mobile) */
.marquee span { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.2rem, 4vw, 1.9rem);
  text-transform: uppercase; letter-spacing: 0.03em; padding-right: 0.7em; }

/* ── CTA-Band ───────────────────────────────────────────────────── */
.cta-band { position: relative; text-align: center; padding: clamp(48px, 8vw, 88px) 0; overflow: hidden; }
.cta-band .pat { position: absolute; inset: 0; opacity: 0.16; z-index: 0; }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 7vw, 3.6rem); line-height: 0.92; color: var(--display); margin-bottom: 26px; }

/* ── Shows (nächste Events) — Banner 1210×450, an Microsites orientiert ── */
/* Pattern wandert hierher (vom Hero) als dezenter Hintergrund */
.section-pattern { position: absolute; inset: 0; overflow: hidden; opacity: 0.13; z-index: 0; pointer-events: none; }
/* langsam rotierender Pattern-Layer; Größe = Section-Diagonale (per JS), damit beim Drehen keine Ecken-Lücken entstehen */
.pat-spin { position: absolute; top: 50%; left: 50%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%); animation: pat-spin-cw 180s linear infinite; }
.pat-spin--ccw { animation-name: pat-spin-ccw; }
@keyframes pat-spin-cw { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes pat-spin-ccw { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .pat-spin { animation: none; } }
@media (max-width: 768px) { .pat-spin { animation: none; } }
#shows .wrap, #info .wrap, #locations .wrap, #academy .wrap { position: relative; z-index: 1; }
.shows-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px)  { .shows-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .shows-grid { grid-template-columns: repeat(3, 1fr); } }
.show-card {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit;
  background: color-mix(in srgb, var(--display) 8%, var(--bg-deep)); border-radius: 8px;
  border: 1.5px solid color-mix(in srgb, var(--display) 20%, transparent);
  transition: transform 0.25s, border-color 0.25s, background 0.25s;
}
.show-card:hover { transform: rotate(-0.5deg) scale(1.015); border-color: var(--display); }
/* Vivenu-Banner sind 1210×450 — exaktes Ratio, nichts anschneiden */
.show-card .show-img { width: 100%; aspect-ratio: 1210 / 450; object-fit: cover; display: block; }
.show-card .show-body { padding: 14px 18px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.show-card .show-date { font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.show-card .show-location { font-size: 1rem; font-weight: 600; line-height: 1.25; color: var(--text); }
.show-card .show-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, var(--display) 18%, transparent); }
.show-card .show-footer .btn { padding: 9px 15px; font-size: 0.78rem; } /* kompakter Ticket-Button → Footer niedriger */
.show-card .show-price { font-weight: 600; }
.shows-foot { margin-top: 26px; text-align: center; }

/* ── Kalender ───────────────────────────────────────────────────── */
.cal-card { background: #fff; color: var(--ink); border-radius: 14px; padding: clamp(18px, 3vw, 32px); box-shadow: 0 20px 60px rgba(0,0,0,0.22); }
.cal-intro { max-width: 620px; margin-bottom: 22px; font-size: 0.98rem; line-height: 1.55; }
.cal-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 0.88; color: var(--ink-cw); margin-bottom: 18px; }
.cal-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; }
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-nav button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink-cw); background: transparent; color: var(--ink-cw); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, background 0.2s, color 0.2s; }
.cal-nav button:hover { transform: scale(1.1); background: var(--ink-cw); color: var(--cream); }
.cal-month { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.4rem; min-width: 200px; }
.cal-cities { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.cal-chip { font-weight: 600; font-size: 0.78rem; letter-spacing: 0.03em; padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent); background: transparent; color: var(--ink); cursor: pointer; transition: background 0.2s, color 0.2s; }
.cal-chip:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.cal-chip.active { background: var(--ink-cw); color: var(--cream); border-color: var(--ink-cw); }

/* Desktop-Grid */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; padding: 6px 0; }
.cal-cell { min-height: 96px; background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cal-cell.empty { background: transparent; }
.cal-cell.today { outline: 2px solid var(--ink-cw); }
.cal-daynum { font-weight: 600; font-size: 0.8rem; opacity: 0.7; }
.cal-event { display: block; font-size: 0.68rem; font-weight: 600; line-height: 1.15; padding: 4px 6px; border-radius: 4px; background: var(--ink-cw); color: #fff; text-decoration: none; overflow: hidden; }
.cal-event .ce-time { opacity: 0.85; font-weight: 700; }
.cal-event .ce-title { font-weight: 700; }
.cal-event .ce-city { font-weight: 700; opacity: 0.8; white-space: nowrap; }
/* Hover-Tooltip im Kalender (Titel + Zeit + Location + Kurzbeschreibung) */
.cal-tip {
  position: fixed; z-index: 9700; transform: translate(-50%, -100%);
  max-width: 280px; background: #161210; color: #fff; padding: 11px 13px; border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5); pointer-events: none; opacity: 0; transition: opacity 0.15s ease;
  font-family: var(--font-body);
}
.cal-tip.show { opacity: 1; }
.cal-tip strong { display: block; font-size: 0.92rem; line-height: 1.2; margin-bottom: 4px; }
.cal-tip .cal-tip-meta { font-size: 0.74rem; opacity: 0.72; margin-bottom: 6px; }
.cal-tip p { font-size: 0.8rem; line-height: 1.4; opacity: 0.9; margin: 0; }
.cal-tip::after { content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #161210; }
.cal-event:hover { filter: brightness(1.1); }

/* Mobile-Agenda */
.cal-agenda { display: none; flex-direction: column; gap: 2px; }
.cal-agenda-day { display: flex; gap: 14px; padding: 12px 4px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.cal-agenda-date { flex: 0 0 52px; text-align: center; }
.cal-agenda-date .ad-day { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.cal-agenda-date .ad-dow { font-size: 0.7rem; text-transform: uppercase; opacity: 0.6; }
.cal-agenda-events { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cal-agenda-event { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 6px; background: var(--ink-cw); color: #fff; text-decoration: none; }
.cal-empty { padding: 30px 0; text-align: center; opacity: 0.6; font-style: italic; }
.cal-hidden { display: none; }
.cal-more { display: block; margin: 14px auto 0; padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--ink-cw); background: transparent; color: var(--ink-cw); font-family: var(--font-body); font-weight: 600; font-size: 0.82rem; cursor: pointer; transition: background 0.2s, color 0.2s; }
.cal-more:hover { background: var(--ink-cw); color: var(--cream); }

@media (max-width: 720px) {
  .cal-grid, .cal-dow-row { display: none; }
  .cal-agenda { display: flex; }
  .cal-cities { margin-left: 0; }
}

/* ── Bildstrecke ────────────────────────────────────────────────── */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: center; }
.photo-tile { overflow: hidden; border-radius: 6px; aspect-ratio: 3/4; }
.photo-tile:nth-child(1) { transform: rotate(-3deg); }
.photo-tile:nth-child(2) { transform: rotate(1.5deg) scale(1.04); aspect-ratio: 3/3.4; }
.photo-tile:nth-child(3) { transform: rotate(2.5deg); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.photo-tile:hover { transform: rotate(0) scale(1.02); }
@media (max-width: 640px) { .photo-strip { grid-template-columns: 1fr 1fr; } .photo-tile:nth-child(3){ grid-column: span 2; aspect-ratio: 16/9; } }

/* ── Infotext ───────────────────────────────────────────────────── */
/* „Comedy boomt." größer setzen — besseres Verhältnis zum Fließtext darunter */
#info .hl { --hl-base: clamp(3.6rem, 12.5vw, 8.6rem); margin-left: clamp(-3.6rem, -3.8vw, -0.4rem); } /* größer + nach links versetzt, „C" ragt über den Fließtext */
#info .hl .w1 { --w-shift: 0; } /* „Comedy" beginnt an der linken Kante → C ragt links über */
@media (max-width: 640px) { #info .hl { margin-left: 0; align-items: center; text-align: center; } } /* Mobile: Comedy-boomt-Headline mittig */
#kalender .hl { --hl-base: clamp(3.24rem, 10.8vw, 6.85rem); } /* „Alle Termine" ~20% größer */
.prose { max-width: 720px; }
.prose p { font-size: clamp(1.1rem, 2.6vw, 1.35rem); line-height: 1.6; margin-bottom: 20px; }
/* Comedy-boomt-Fließtext: einzeiliger Abstand + ~5% kleiner */
#info .prose p { font-size: clamp(0.94rem, 2.05vw, 1.12rem); line-height: 1.4; margin-bottom: 16px; }
#info .prose .lead-line { color: inherit; display: block; margin-bottom: 0.5em; } /* erster Satz: eigene Zeile + Abstand, Söhne-Halbfett, Textfarbe behalten */

/* Bild-Collage statt Einzelfoto (Comedy boomt) — Scrapbook, leicht schräg */
.info-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Grid-Items sind jetzt <picture> (wegen WebP) → Positions-/Rotations-Regeln aufs <picture>, nicht aufs <img> */
.info-photos picture { display: block; transition: transform 0.35s ease; }
.info-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28); }
.info-photos picture:nth-child(1) { aspect-ratio: 3/4; transform: rotate(-2.2deg); }
.info-photos picture:nth-child(2) { aspect-ratio: 3/4; margin-top: 22px; transform: rotate(1.8deg); }
.info-photos picture:nth-child(3) { grid-column: span 2; aspect-ratio: 16/9; transform: rotate(-1deg); }
.info-photos picture:hover { transform: rotate(0deg) scale(1.03); }

/* ── Locations: stilisierte Karten + City-Switcher ──────────────── */
.city-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto clamp(22px, 4vw, 38px); }
.city-chip {
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em;
  padding: 9px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--text);
  border: 1.5px solid color-mix(in srgb, var(--display) 40%, transparent);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.city-chip:hover { transform: translateY(-2px); border-color: var(--display); }
.city-chip.is-active { background: var(--display); color: var(--on-accent); border-color: var(--display); }
.city-maps { --map-water: color-mix(in srgb, #000 34%, var(--bg-deep)); max-width: 1000px; margin: 0 auto; }
.city-map { display: none; }
.city-map.is-active { display: block; animation: cityfade 0.4s ease; }
@keyframes cityfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.city-map svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.map-water { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: 4px; fill: var(--display); opacity: 0.26; text-transform: uppercase; }
.map-district { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 2.5px; fill: var(--text); opacity: 0.42; text-transform: uppercase; }
.map-dot { fill: var(--display); stroke: var(--bg-deep); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform 0.25s; }
.map-ring { fill: var(--display); opacity: 0.4; transform-box: fill-box; transform-origin: center; animation: map-pulse 2.4s ease-out infinite; }
.map-marker:nth-of-type(2) .map-ring { animation-delay: 0.4s; }
.map-marker:nth-of-type(3) .map-ring { animation-delay: 0.8s; }
.map-marker:nth-of-type(4) .map-ring { animation-delay: 1.2s; }
.map-marker:nth-of-type(5) .map-ring { animation-delay: 1.6s; }
.map-marker:nth-of-type(6) .map-ring { animation-delay: 2.0s; }
.map-marker:nth-of-type(7) .map-ring { animation-delay: 2.4s; }
@keyframes map-pulse { 0% { transform: scale(1); opacity: 0.4; } 70% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } }
.map-label { font-family: var(--font-body); font-weight: 600; font-size: 14px; fill: var(--text); transition: fill 0.2s; }
.map-marker { cursor: pointer; }
.map-marker:hover .map-dot { transform: scale(1.5); }
.map-marker:hover .map-label { fill: var(--display); }
@media (max-width: 767px) {
  .map-dot { transform: scale(1.7); }
  .map-label { font-size: 22px; }
  .map-water { font-size: 28px; }
  .map-district { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .map-ring { animation: none; } }

/* ── Social Proof ───────────────────────────────────────────────── */
.proof-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.proof-head--center { justify-content: center; text-align: center; }
.proof-badge { text-align: center; margin-bottom: 32px; }
.proof-badge img { display: inline-block; height: 64px; width: auto; transition: transform 0.2s; }
#stimmen .hl[data-words="3"] .w3 { --w-pull: 0.14em; } /* mehr Abstand „bestbewertete" ↔ „Comedy" */
/* Reviews als Slider: 3 sichtbar, Rest per Nav-Buttons scrollen */
.reviews-slider { position: relative; }
#stimmen .reviews-grid { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 6px 2px; }
#stimmen .reviews-grid::-webkit-scrollbar { display: none; }
#stimmen .reviews-grid .review { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
@media (max-width: 760px) { #stimmen .reviews-grid .review { flex: 0 0 84%; } }
.reviews-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--display); color: var(--on-accent); font-size: 1.6rem; line-height: 1; padding-bottom: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.22); transition: transform 0.2s, opacity 0.2s; }
.reviews-nav:hover { transform: translateY(-50%) scale(1.1); }
.reviews-prev { left: -10px; }
.reviews-next { right: -10px; }
.reviews-nav:disabled { opacity: 0; pointer-events: none; }
.reviews-nav[hidden] { display: none; }
.reviews-foot { text-align: center; margin-top: 30px; }
.proof-score { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 11vw, 5rem); line-height: 1; color: var(--ink); }
.proof-stars { color: #E6A817; font-size: 1.6rem; letter-spacing: 2px; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.review { background: #fff; color: var(--ink); border-radius: 8px; padding: 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.review .r-stars { color: #E6A817; margin-bottom: 8px; }
.review .r-text { font-size: 0.95rem; line-height: 1.5; }
.review .r-author { margin-top: 12px; font-weight: 600; font-size: 0.85rem; opacity: 0.7; }

/* ── Gutschein ──────────────────────────────────────────────────── */
.voucher { position: relative; overflow: hidden; border-radius: 14px; padding: clamp(32px, 6vw, 64px); background: var(--bg-deep); border: 2px dashed var(--display);
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 820px) { .voucher { grid-template-columns: 1.25fr 1fr; } }
.voucher .pat { position: absolute; inset: 0; opacity: 0.12; z-index: 0; }
.voucher-inner { position: relative; z-index: 1; max-width: 560px; }
.voucher-ticket { position: relative; z-index: 1; width: 100%; max-width: 380px; justify-self: center; transform: rotate(-6deg); filter: drop-shadow(0 18px 32px rgba(0,0,0,0.45)); transition: transform 0.35s ease; }
.voucher-ticket:hover { transform: rotate(-2deg) scale(1.04); }

/* ── Firmenfeier-Teaser ─────────────────────────────────────────── */
.ff-teaser { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 860px) { .ff-teaser { grid-template-columns: 1.2fr 1fr; } }
/* Comedy-boomt: Textspalte ~5% schmaler + mehr Abstand zu den Fotos (nur #info, nicht der Firmenfeier-Teaser) */
@media (min-width: 860px) { #info .ff-teaser { grid-template-columns: 0.86fr 1fr; gap: 56px; align-items: start; } } /* Textspalte ~1/5 schmaler (Desktop), dadurch länger */
.ff-media { border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; transform: rotate(-1.5deg); }
.ff-media img { width: 100%; height: 100%; object-fit: cover; }
#ueber .ff-media { aspect-ratio: 3 / 2; } /* Team-Foto (3:2) nicht seitlich anschneiden */
.ueber-figure { margin: 0; }
.ueber-caption { margin-top: 11px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0.7; text-align: center; }
.contact-link { display: inline-flex; align-items: center; gap: 8px; }
.contact-ico { width: 18px; height: 18px; flex: 0 0 auto; }

/* ── FAQ (zentriert) ────────────────────────────────────────────── */
.faq-list { max-width: 760px; margin-inline: auto; }
@media (min-width: 860px) { .faq-list { max-width: 1100px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; } } /* Desktop: 2 Spalten (6 / 5) */
.faq-item { border-top: 1.5px solid color-mix(in srgb, var(--display) 22%, transparent); }
.faq-item:last-child { border-bottom: 1.5px solid color-mix(in srgb, var(--display) 22%, transparent); }
.faq-q { width: 100%; text-align: left; background: none; border: none; color: var(--display); cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  padding: 22px 40px 22px 0; position: relative; }
.faq-q::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; transition: transform 0.25s; }
.faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.faq-item.open .faq-a { max-height: 600px; } /* schmalere 2-Spalten → Antworten brauchen mehr Höhe */
.faq-item--tall.open .faq-a { max-height: 1100px; } /* lange Antwort (Altersbeschränkung) nicht abschneiden */
.faq-a p { padding: 0 0 22px; opacity: 0.9; line-height: 1.6; max-width: 680px; }

/* ── Über uns & Kontakt ─────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 820px) { .about-grid { grid-template-columns: 1.4fr 1fr; } }
.contact-card { background: var(--bg-deep); border-radius: 10px; padding: 28px; border: 1.5px solid color-mix(in srgb, var(--display) 22%, transparent); }
.contact-card a { color: var(--display); font-weight: 600; }

/* ── SCHNACKademy / Nachwuchs ───────────────────────────────────── */
.academy { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2.5vw, 28px); align-items: center; } /* Text + Logo näher zusammen */
@media (min-width: 820px) { .academy { grid-template-columns: 1.25fr 0.75fr; } }
.academy-head {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.1rem, 6vw, 4rem); line-height: 0.92; letter-spacing: -0.01em;
  color: var(--display); margin-bottom: 22px;
}
.academy-lead { font-weight: 300; font-size: clamp(1.15rem, 2.8vw, 1.55rem); line-height: 1.35; max-width: 30ch; margin-bottom: 16px; }
.academy-discord { font-weight: 600; font-size: clamp(1rem, 2.3vw, 1.18rem); line-height: 1.4; margin-bottom: 26px; }
.academy-discord strong { color: var(--display); }
.academy-sub { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.5rem, 4.2vw, 2.4rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--display); margin: -8px 0 18px; } /* „Beweis es!" — Söhne-Halbfett-Antwort auf die Display-Frage */
[data-colorway="blau"] .academy-sub, [data-colorway="rot"] .academy-sub { color: #fff; } /* „Beweis es!" weiß bei Blau + Rot */
.academy-media { display: flex; justify-content: center; }
.academy-logo {
  display: block; width: 100%; max-width: 320px; aspect-ratio: 900 / 1000;
  -webkit-mask: url('../assets/img/schnackademy.png') center / contain no-repeat;
          mask: url('../assets/img/schnackademy.png') center / contain no-repeat;
  background-color: var(--display);
  transform: rotate(-2deg); transition: background-color 0.5s ease, transform 0.35s ease;
}
.academy-logo:hover { transform: rotate(0deg) scale(1.03); }
[data-colorway="pride"] .academy-logo { background: linear-gradient(140deg, #E40303, #FF8C00 22%, #FFED00 42%, #008026 62%, #004DFF 82%, #750787); }

/* ── Headline-System: Wörter versetzt zueinander (Brand Guide) ──── */
.hl-wrap { overflow-x: clip; }
.hl {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: 0.82; letter-spacing: -0.015em; color: var(--display); max-width: 100%;
  --hl-base: clamp(2.7rem, 9vw, 5.7rem); --hl-shift: 1;
}
.hl .w {
  display: block; width: fit-content; max-width: 100%;
  margin-left: calc(var(--w-shift, 0em) * var(--hl-shift));
  font-size: calc(var(--hl-base) * var(--w-scale, 1));
  transform: rotate(var(--w-rot, 0deg)); transform-origin: left center;
  padding-top: 0.08em; margin-top: var(--w-pull, 0em);
}
.hl .w .char { display: inline-block; }
.hl .w.accent { color: var(--accent); }
.hl[data-words="3"] .w1 { --w-shift: 0.22em; --w-scale: 0.50; --w-rot: -5deg; }
.hl[data-words="3"] .w2 { --w-shift: 0em; --w-scale: 1.06; --w-rot: 1deg; --w-pull: -0.07em; }
.hl[data-words="3"] .w3 { --w-shift: 0.92em; --w-scale: 0.66; --w-rot: -3.5deg; --w-pull: -0.05em; }
.hl[data-words="2"] .w1 { --w-shift: 0.14em; --w-scale: 0.58; --w-rot: -5deg; }
.hl[data-words="2"] .w2 { --w-shift: 0.55em; --w-scale: 1.08; --w-rot: 1.5deg; --w-pull: -0.05em; }
/* 4 Wortgruppen (Hero: klein–GROSS–klein–GROSS) — etwas luftiger, damit die kleinen
   Zeilen nicht in die großen rutschen */
.hl[data-words="4"] { line-height: 1.0; }
.hl[data-words="4"] .w1 { --w-shift: 0.16em; --w-scale: 0.42; --w-rot: -4deg; --w-pull: 0em; }
.hl[data-words="4"] .w2 { --w-shift: 0em;    --w-scale: 0.82; --w-rot: 1deg;  --w-pull: -0.05em; }
.hl[data-words="4"] .w3 { --w-shift: 0.34em; --w-scale: 0.42; --w-rot: -3deg; --w-pull: 0.02em; }
.hl[data-words="4"] .w4 { --w-shift: 0.52em; --w-scale: 0.82; --w-rot: 2deg;  --w-pull: -0.04em; }
.hl--hero { --hl-base: clamp(2.8rem, 11vw, 8rem); color: var(--hero-fg); text-shadow: 0 2px 18px rgba(0,0,0,0.42); }
.hl--hero .w.accent { color: inherit; } /* Key Visual einfarbig in der Highlight-Farbe */
.section--light .hl, .section--light .hl .w.accent { color: var(--ink); }

/* Pride: volles Regenbogenmuster PRO WORT (echte Flaggenfarben), jedes Wort rot→lila.
   Hero wird in pride NICHT in Buchstaben gesplittet (siehe main.js) → der Verlauf greift sauber. */
[data-colorway="pride"] .hl .w,
[data-colorway="pride"] .hl .w.accent {
  background-image: linear-gradient(95deg, #E40303, #FF8C00 22%, #FFED00 42%, #008026 62%, #004DFF 82%, #750787);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Creme-Sektion (Social Proof): solide dunkel (Regenbogen wäre auf Creme teils unsichtbar) */
[data-colorway="pride"] .section--light .hl .w,
[data-colorway="pride"] .section--light .hl .w.accent {
  background: none; -webkit-text-fill-color: var(--ink); color: var(--ink);
}
[data-colorway="pride"] .marquee { background: linear-gradient(90deg, #E40303, #FF8C00, #FFED00, #008026, #004DFF, #750787); }
[data-colorway="pride"] .marquee span { color: #fff; }

/* ── Eigenes Cookie-Banner (consent.js); nutzt --bg/--text/--display → Kontrast in allen Colorways ── */
.cookie-banner {
  position: fixed; left: 50%; bottom: clamp(12px, 3vw, 28px); z-index: 9990;
  width: min(92vw, 560px); transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--bg); color: var(--text);
  border: 2px solid var(--display); border-radius: 16px;
  padding: clamp(18px, 3vw, 26px); box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease;
}
.cookie-banner.is-in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.cookie-banner[hidden] { display: none; }
.cookie-hinweis { display: block; height: clamp(28px, 6vw, 38px); width: clamp(62px, 13.3vw, 84px); margin-bottom: -2px; } /* Breite explizit (=Höhe×2.216), sonst zieht inline-SVG auf 100% */
.cookie-hinweis path { fill: var(--display); } /* einfarbige „COOKIES"-Grafik in der Colorway-Farbe */
.cookie-text { font-weight: 300; font-size: 0.95rem; line-height: 1.5; margin: 0; }
.cookie-text a { color: var(--display); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.cookie-actions .btn { padding: 11px 22px; }
@media (max-width: 480px) { .cookie-actions .btn { flex: 1 1 auto; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: opacity 0.3s ease; } }
[data-colorway="pride"] .hero-cue { color: #FF5FA2; }
/* Pride: Logo in echten Pride-Flaggenfarben — Badge-Scheibe + schwebende Hero-Wortmarke */
[data-colorway="pride"] .logo-badge { background: linear-gradient(135deg, #E40303, #FF8C00 24%, #FFED00 44%, #008026 64%, #004DFF 84%, #750787); }
/* Pride-Lockup: echte Flaggenfarben + leichterer Schatten (kein matschiger dunkler Halo) */
[data-colorway="pride"] .hero-lockup {
  background: linear-gradient(120deg, #E40303, #FF8C00 20%, #FFED00 40%, #008026 60%, #004DFF 80%, #750787);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.28));
}
@media (max-width: 640px) {
  .hl { --hl-shift: 0.5; }
  .hl .w { --w-rot: 0deg; }
  .hl[data-words="3"] .w1, .hl[data-words="3"] .w3 { --w-rot: -1.5deg; }
  .hl[data-words="2"] .w1 { --w-rot: -1.5deg; }
  .hl[data-words="2"] .w2 { --w-rot: 0.5deg; }
  .hl[data-words="4"] .w1, .hl[data-words="4"] .w3 { --w-rot: -1.5deg; }
  .hl[data-words="4"] .w2, .hl[data-words="4"] .w4 { --w-rot: 0.5deg; }
}

/* ── Trailer-Video ──────────────────────────────────────────────── */
.trailer { position: relative; max-width: 980px; margin: 0 auto; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; background: var(--bg-deep); transform: rotate(-0.8deg); }
.trailer video { width: 100%; height: 100%; object-fit: cover; display: block; }
.trailer-sound {
  position: absolute; bottom: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  background: var(--cream); color: var(--ink); border: none; border-radius: 999px; padding: 9px 15px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: transform 0.2s;
}
.trailer-sound:hover { transform: scale(1.06) rotate(-2deg); }
#galerie .trailer { margin-bottom: clamp(30px, 5vw, 52px); }

/* ── Sticker / Doodles (mitscrollend) ───────────────────────────── */
.sticker { position: absolute; z-index: 3; pointer-events: none; font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; color: var(--accent); opacity: 0.85; will-change: transform;
  font-size: clamp(1.4rem, 4vw, 2.6rem); }
.sticker svg { width: 100%; height: 100%; }
.hero .sticker { color: #FFF6EA; text-shadow: 0 1px 12px rgba(0,0,0,0.4); } /* hell über dem Video */
section { position: relative; }

/* ── Comedians / Acts (Freisteller-Lineup) ──────────────────────── */
.acts-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(6px, 2vw, 20px); margin-top: 10px; }
.act { flex: 0 0 auto; width: clamp(132px, 15vw, 188px); text-decoration: none; text-align: center; transition: transform 0.35s ease; }
.act:nth-child(odd)  { transform: translateY(10px) rotate(-2deg); }
.act:nth-child(even) { transform: translateY(-6px) rotate(1.5deg); }
.act:nth-child(3n)   { transform: translateY(2px) rotate(-1deg); }
.act:hover { transform: translateY(-12px) rotate(0deg) scale(1.05); z-index: 3; }
.act-img { width: 100%; height: clamp(220px, 26vw, 330px); object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,0.42)); }
.act-name { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.02rem; line-height: 0.95; color: var(--display); margin-top: 12px; }
.act-handle { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; opacity: 0.7; margin-top: 3px; }
@media (max-width: 560px) { .act { width: 45%; } }

/* ── Galerie „Eindrücke" — freies Scrapbook, am Desktop ziehbar & sticky ── */
.gallery-head { transform: rotate(-3.5deg); margin-bottom: clamp(16px, 2.6vw, 28px); }
.gallery-head .hl { --hl-base: clamp(1.9rem, 4.6vw, 3.2rem); }
#galerie .gallery-head .hl .w { --w-rot: -5deg; } /* „GALERIE" leicht schräg (Reveal überschreibt Container-Transform, daher am Wort) */
.gallery-hint { text-align: center; font-size: 0.82rem; letter-spacing: 0.02em; opacity: 0.55; margin: 16px 0 2px; }
#galerie { position: relative; }
/* Video oben, darunter eine ruhige Auto-Slideshow (Crossfade), Fotos leicht angeschrägt */
#galerie .trailer { max-width: 880px; }
.gallery-slideshow { position: relative; width: min(100%, 880px); margin: 0 auto; aspect-ratio: 3 / 2; }
.gallery-slideshow .slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.9s ease; }
.gallery-slideshow .slide.is-active { opacity: 1; pointer-events: auto; }
.gallery-slideshow .slide img { width: 95%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: center 28%; border-radius: 10px; display: block; cursor: zoom-in; } /* alle gleich groß (3:2); Crop nach oben versetzt, damit Köpfe nicht angeschnitten werden */
.gallery-slideshow .slide:nth-child(odd) img { transform: rotate(-1.8deg); }
.gallery-slideshow .slide:nth-child(even) img { transform: rotate(1.6deg); }
/* Prev/Next-Buttons zum manuellen Sliden */
.gallery-slideshow .slide-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg-deep) 70%, transparent); color: var(--hero-fg);
  font-family: var(--font-body); font-size: 1.9rem; line-height: 1; padding: 0 0 3px;
  transition: background 0.2s, transform 0.2s, color 0.2s;
}
.gallery-slideshow .slide-prev { left: 10px; }
.gallery-slideshow .slide-next { right: 10px; }
.gallery-slideshow .slide-nav:hover { background: var(--display); color: var(--on-accent); transform: translateY(-50%) scale(1.1); }
.gallery-slideshow .slide-nav:active { transform: translateY(-50%) scale(0.95); }

/* Lach-Wörter: schweben NUR in den Rändern außerhalb der Frames (Desktop), gsap-Float + Inertia-Drag */
.g-words { position: absolute; top: 0; bottom: 0; width: clamp(130px, calc((100% - 900px) / 2), 300px); pointer-events: none; z-index: 4; }
.g-words--l { left: 0; }
.g-words--r { right: 0; }
.g-words .g-word { pointer-events: auto; }
.g-words--l .g-word { left: var(--gx, 12px); } /* von Außenkante; --gx mittel-groß = mittig im Gutter */
.g-words--r .g-word { right: var(--gx, 12px); }
.g-word {
  position: absolute; top: var(--y); margin: 0;
  transform: rotate(var(--r, 0deg)); transform-origin: center;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: var(--ws, 2rem); line-height: 0.9; letter-spacing: -0.01em; color: var(--display);
  white-space: nowrap; cursor: grab; touch-action: none; opacity: 0.5;
  -webkit-user-select: none; user-select: none;
}
.g-word.dragging { cursor: grabbing; opacity: 0.85; z-index: 6; }
/* schmale Viewports: keine echten Seitenränder → Rand-Wörter ausblenden */
@media (max-width: 1240px) { .g-words { display: none; } }

/* ── Lightbox ───────────────────────────────────────────────────── */
.lightbox { position: fixed; inset: 0; z-index: 9600; background: rgba(8,6,5,0.93); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-width: min(94vw, 1300px); max-height: 86vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.lightbox-hint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; opacity: 0.5; }

/* ── Kontaktformular (Netlify Forms) ────────────────────────────── */
.contact-form { display: grid; gap: 12px; margin-top: 16px; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 13px 15px; border-radius: 6px; font-family: var(--font-body); font-size: 1rem;
  border: 1.5px solid color-mix(in srgb, var(--display) 32%, transparent);
  background: color-mix(in srgb, var(--display) 7%, transparent); color: var(--text);
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--display); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: color-mix(in srgb, var(--text) 50%, transparent); }
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form .hp { position: absolute; left: -9999px; }
.form-success { display: none; padding: 16px 0; font-weight: 600; color: var(--display); }
.form-captcha-hint { font-size: 0.85rem; font-weight: 600; color: var(--display); margin: 8px 0 0; }
.contact-form.sent { display: none; }
.contact-form.sent + .form-success { display: block; }

/* ── Legal-Seiten (Impressum / Datenschutz) ─────────────────────── */
.legal-page { padding: calc(var(--nav-h) + 48px) 0 80px; }
.legal-content { max-width: 760px; }
.legal-content h1 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 8vw, 3.6rem); color: var(--display); margin-bottom: 26px; line-height: 0.9; }
.legal-content h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; color: var(--display); margin: 30px 0 10px; }
.legal-content h3 { font-weight: 600; font-size: 1.02rem; margin: 18px 0 6px; }
.legal-content h4 { font-weight: 600; font-size: 0.95rem; opacity: 0.95; margin: 14px 0 4px; }
.legal-content p, .legal-content li { opacity: 0.9; line-height: 1.65; margin-bottom: 10px; }
.legal-content ul { padding-left: 20px; margin-bottom: 10px; }
.legal-content a { color: var(--display); font-weight: 600; }
.legal-note { margin-top: 8px; padding: 14px 16px; border-radius: 8px; border: 1.5px dashed color-mix(in srgb, var(--display) 40%, transparent); font-size: 0.9rem; opacity: 0.85; }

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer { background: var(--bg-deep); padding: 56px 0 40px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; margin-bottom: 36px; }
.site-footer .nav-logo .logo-badge { width: 60px; height: 60px; }
.footer-col h4 { font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--display); margin-bottom: 14px; }
.footer-col a { display: block; text-decoration: none; opacity: 0.82; padding: 5px 0; font-size: 0.95rem; transition: opacity 0.2s; }
.footer-col a:hover { opacity: 1; color: var(--display); }
.footer-bottom { border-top: 1px solid color-mix(in srgb, var(--display) 18%, transparent); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 0.82rem; opacity: 0.7; }

/* ── Cookieskript-Banner an die SCHNACK-Optik angleichen (Feinschliff sonst im Cookieskript-Dashboard) ── */
#cookiescript_injected, #cookiescript_injected_fullwidth, #cookiescript_injected_wrapper {
  font-family: var(--font-body) !important;
  background: #17120F !important; color: #FFF3DF !important;
  border: 1.5px solid rgba(245, 36, 36, 0.45) !important; border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
}
#cookiescript_injected #cookiescript_description, #cookiescript_injected #cookiescript_header,
#cookiescript_injected p, #cookiescript_injected span, #cookiescript_injected a, #cookiescript_injected div { color: #FFF3DF !important; }
#cookiescript_injected #cookiescript_header { font-family: var(--font-display) !important; text-transform: uppercase !important; letter-spacing: 0.01em !important; }
#cookiescript_injected #cookiescript_accept, #cookiescript_injected #cookiescript_save, #cookiescript_injected #cookiescript_acceptselected {
  background: #F52424 !important; color: #FFF3DF !important; border: none !important; border-radius: 999px !important; font-weight: 600 !important;
}
#cookiescript_injected #cookiescript_reject, #cookiescript_injected #cookiescript_manage {
  background: transparent !important; color: #FFF3DF !important; border: 1.5px solid rgba(255, 243, 223, 0.5) !important; border-radius: 999px !important; font-weight: 600 !important;
}
#cookiescript_injected .cookiescript_checkbox_label .cookiescript_active,
#cookiescript_injected .cookiescript_active { background: #F52424 !important; }
#cookiescript_badge { filter: saturate(1.1); }