/* ===================================================================
   SCHNACK Hauptseite — base.css
   Reset · Fonts · Design-Tokens · Colorways · Typografie · Helpers
   Geteilt von Homepage und (künftig) allen Unterseiten.
   =================================================================== */

/* ── Fonts (Söhne, selbst gehostet) ─────────────────────────────── */
@font-face {
  font-family: 'Sohne';
  src: url('../assets/fonts/WOFF2/soehne-leicht.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sohne';
  src: url('../assets/fonts/WOFF2/soehne-halbfett.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sohne';
  src: url('../assets/fonts/WOFF2/soehne-kraftig.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sohne Schmal';
  src: url('../assets/fonts/WOFF2/soehne-schmal-extrafett.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }

/* ── Marken-Konstanten (colorway-unabhängig) ────────────────────── */
:root {
  --font-body:    'Sohne', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Sohne Schmal', 'Arial Narrow', sans-serif;

  --cream:  #F6E9CE;   /* helle Flächen (Kalender, Karten) */
  --ink:    #1A1410;   /* Text auf hellen Flächen */

  /* volle Markenpalette (für Akzente verfügbar) */
  --c-dunkelgruen: #016450;
  --c-gelb:        #ECF74F;
  --c-dunkelblau:  #1F3365;
  --c-hellblau:    #9BF3E2;
  --c-dunkelrot:   #7E0D09;
  --c-hellrot:     #F52424;
  --c-orange:      #F64823;
  --c-rose:        #FFD0D0;
  --c-lila:        #E754F7;
  --c-darklila:    #7700AA;

  --maxw:  1180px;
  --nav-h: 70px;

  /* Wird je Colorway überschrieben (Defaults = rot) */
  --bg:      #7E0D09;
  --bg-deep: #5C0906;
  --display: #F52424;
  --text:    #F7E0D2;
  --accent:  #ECF74F;
  --on-accent: #2A0605;
  --hero-fg: #F52424;   /* Key-Visual-Text + Buttons: helle Highlight-Farbe des Colorways */
  --hero-ink: #2A0605;  /* dunkle Schrift auf hero-fg-Flächen (Ticket-Button) */
  --ink-cw:  #7E0D09;   /* dunkler Colorway-Ton für Text/Chips auf hellen Flächen (Kalender) */
}

/* ── Colorways ──────────────────────────────────────────────────── */
/* Rot: Marken-Hellrot bleibt, aber tieferer BG → Headlines kontrastreicher (statt rot-auf-rot-Matsch). */
[data-colorway="rot"] {
  --bg: #520705; --bg-deep: #380503;
  --display: #F52424; --text: #FBDFD3; --accent: #F52424; --on-accent: #2A0605;
  --hero-fg: #F52424; --hero-ink: #2A0605; --ink-cw: #520705;
}
[data-colorway="blau"] {
  --bg: #1F3365; --bg-deep: #16244A;
  --display: #9BF3E2; --text: #E6F6FF; --accent: #9BF3E2; --on-accent: #122046;
  --hero-fg: #9BF3E2; --hero-ink: #122046; --ink-cw: #1F3365;
}
[data-colorway="gruen"] {
  --bg: #016450; --bg-deep: #014537;
  --display: #ECF74F; --text: #EAF7D6; --accent: #ECF74F; --on-accent: #06251D;
  --hero-fg: #ECF74F; --hero-ink: #06251D; --ink-cw: #014537;
}
/* Orange: sauberes, sattes Orange (kein Braun-Matsch) + Creme-Highlight,
   Lime nur noch als Akzent-Pop → klar unterscheidbar von gruen. */
[data-colorway="orange"] {
  --bg: #F52424; --bg-deep: #C21717;
  --display: #FFF3DF; --text: #FFF3DF; --accent: #FFF3DF; --on-accent: #3A0606;
  --hero-fg: #FFF3DF; --hero-ink: #3A0606; --ink-cw: #B01515;
}
/* Invertierter Grün-Colorway: helles Gelbgrün als BG, Dunkelgrün für Typo/Highlights */
[data-colorway="grueninv"] {
  --bg: #E9F73B; --bg-deep: #D6E82A;
  --display: #015C49; --text: #06352A; --accent: #015C49; --on-accent: #E9F73B;
  --hero-fg: #E9F73B; --hero-ink: #013F32; --ink-cw: #015C49;
}
/* Pride-Colorway: NICHT in der Zufallsauswahl, kommt nur beim aktiven Wechseln (+ Konfetti).
   Unabhängig von der CI, neutraler dunkler Grund, Regenbogen-Akzente via Sonderregeln. */
[data-colorway="pride"] {
  --bg: #171624; --bg-deep: #100F1B;
  --display: #FFFFFF; --text: #F2F1F8; --accent: #FF5FA2; --on-accent: #171624;
  --hero-fg: #FFFFFF; --hero-ink: #171624; --ink-cw: #7700AA;
}

/* ── Base ───────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
html { overflow-x: clip; } /* kappt horizontalen Overflow der angewinkelten Marquees ohne Scroll-Container-Nebenwirkung */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.5s ease, color 0.5s ease;
}
::selection { background: var(--display); color: var(--bg); }
a { color: inherit; }

/* Weiche Übergänge beim Colorway-Wechsel (Switcher) */
.site-nav, .section--deep, .section--light, .hl, .hl .w, .btn, .btn-ticket .bt-label,
.btn-ticket .bt-stub, .show-card, .marquee, .voucher, .contact-card, .site-footer, .cw-switch,
.hero-label, .hero-lead, .eyebrow, .section-intro {
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, fill 0.5s ease;
}

section[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }

/* ── Typografie-Helfer ──────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: 0.005em;
  color: var(--display);
}
.eyebrow {
  font-weight: 600; font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--display); opacity: 0.85;
}
strong, b { font-weight: 600; color: var(--display); }

/* ── Layout-Helfer ──────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; width: 100%; }
/* visually-hidden (echter H1-Text für SEO/Screenreader, visuell ersetzt durchs SVG-Lockup) */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.section { padding: clamp(56px, 9vw, 110px) 0; }
.section--deep { background: var(--bg-deep); }
.section--light { background: var(--cream); color: var(--ink); }
.section--light .eyebrow,
.section--light .display { color: var(--ink); }

.section-head { max-width: 880px; margin-bottom: clamp(30px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .hl { align-items: center; }
.section-head--center .section-intro { margin-inline: auto; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.4rem, 8.5vw, 4.6rem); line-height: 0.9; color: var(--display);
}
.section--light .section-title { color: var(--ink); }
.section-title .pop { color: var(--accent); }
.section-intro { font-size: clamp(1.05rem, 2.5vw, 1.25rem); margin-top: 18px; max-width: 640px; opacity: 0.92; }

/* ── Reveal (JS togglet .is-in) — leicht schräg & versetzt einblenden ── */
[data-reveal] { opacity: 0; transform: translateY(36px) rotate(-1.5deg); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2,0.7,0.2,1); }
[data-reveal]:nth-of-type(even) { transform: translateY(36px) rotate(1.5deg); }
.is-in[data-reveal], [data-reveal].is-in { opacity: 1; transform: none; }

/* ── Custom Cursor ──────────────────────────────────────────────── */
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--display); box-shadow: 0 0 0 1.5px var(--bg);
  pointer-events: none; z-index: 9999; opacity: 0;
}
html.has-cursor, html.has-cursor * { cursor: none !important; }

/* ── Klick-Wörter ───────────────────────────────────────────────── */
.click-word {
  position: fixed; z-index: 9998; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 4vw, 1.9rem); text-transform: uppercase; color: var(--display);
  pointer-events: none; user-select: none; white-space: nowrap; will-change: transform, opacity;
}

/* ── Funkel-Partikel (Klick-Effekt, in Pride bunt) ──────────────── */
.sparkle {
  position: fixed; z-index: 9998; pointer-events: none; user-select: none;
  font-size: 1rem; line-height: 1; will-change: transform, opacity;
  text-shadow: 0 0 8px currentColor;
}

/* ── Flieg-Wörter (beim Colorway-Wechsel über den Screen) ────────── */
.fly-word {
  position: fixed; z-index: 9990; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 6rem); text-transform: uppercase; color: var(--display);
  pointer-events: none; user-select: none; white-space: nowrap; will-change: transform, opacity;
  text-shadow: 0 4px 24px color-mix(in srgb, var(--bg) 55%, transparent);
}

/* ── Colorway-Wipe (Übergang beim Farbwechsel) ──────────────────── */
.cw-wipe { position: fixed; border-radius: 50%; pointer-events: none; z-index: 9985; will-change: transform, opacity; }

/* ── Konfetti (z.B. bei Pride-Aktivierung) ──────────────────────── */
.confetti-bit { position: fixed; z-index: 9997; width: 11px; height: 11px; border-radius: 2px; pointer-events: none; will-change: transform, opacity; }

/* ── Reduced Motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-reveal], [data-reveal]:nth-of-type(even) { opacity: 1 !important; transform: none !important; }
}