/* ============================================================
   AMBITION – Event-Landingpage
   Design-Tokens aus Figma "Onepager" (1728px Desktop)
   ============================================================ */

/* ── Webfonts (lokal, kein CDN – DSGVO) ──────────────────────
   Display-Schrift im Design ist "Messe Univers" – laut Messe-Frankfurt-Markenportal
   (markenportal.messefrankfurt.com → Typografie) NICHT mehr erhältlich und für
   digitale Anwendungen offiziell durch ROBOTO ersetzt ("In digitalen Anwendungen
   wird die Schrift Roboto statt Messe Univers verwendet."). Roboto ist lizenzfrei
   (Apache 2.0) und liegt hier lokal als Variable Font (Latin). */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Italic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Fließtext läuft ebenfalls in Roboto (Entscheidung 22.07.2026: durchgängig
   Messe-Digital-CI statt Open Sans aus dem Figma – nur --font-body tauschen,
   falls das je zurückgedreht werden soll). */

:root {
  /* Farben – aus Figma "Onepager" (Node 2020:111, 1728px) */
  --color-bg:        #101010;   /* Seitenhintergrund (Cod Gray) */
  --color-surface:   #1d1d19;   /* Karten & Flächen */
  --color-line:      rgb(255 255 255 / .1);
  --color-text:      #fafdff;   /* Headlines, Nav (Alice Blue) */
  --color-text-soft: #ebebeb;   /* Fließtext (Gallery) */
  --color-muted:     #a3a3a3;
  --color-accent:    #ff2c55;   /* Brand-Pink */
  --color-accent-2:  #a172f7;   /* Brand-Violett */
  --gradient-accent: linear-gradient(103deg, var(--color-accent) 5%, var(--color-accent-2) 90%);   /* Pink→Violett: Text-Akzente */
  --gradient-button: linear-gradient(90deg, var(--color-accent-2) 0%, var(--color-accent) 100%);   /* Violett→Pink: CTA-Flächen */
  --color-live:      #a6f000;   /* Live-Zustand (Stroke im Programm) */

  /* Typografie – lokale Webfonts, siehe assets/fonts/ (kein CDN).
     Digital-CI der Messe Frankfurt: Roboto ersetzt Messe Univers offiziell. */
  --font-display: "Roboto", "Segoe UI", Arial, sans-serif;
  --font-body:    "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --max: 1330px;
  --max-wide: 1520px;
  --radius: 10px;
  --header-h: 105px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--color-accent); color: #000;
  padding: .6rem 1rem; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ── Header ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(0 0 0 / .75);
  backdrop-filter: blur(6px);
}
.site-header__inner {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-inline: clamp(1.25rem, 9.26vw, 160px); /* 160px = Figma-Seitenrand @1728 */
}
.site-header__brand { display: inline-flex; align-items: center; text-decoration: none; }
.site-header__logo { height: 35px; width: auto; display: block; }
.site-header__nav { display: flex; align-items: center; gap: clamp(1.25rem, 3.7vw, 64px); }
.site-header__nav a {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(1rem, 1.4vw, 24px); line-height: 1.4;
  text-decoration: none; color: var(--color-text);
}
.site-header__nav a:hover { color: var(--color-accent); }
.site-header__nav a.is-active {
  background: var(--gradient-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Zusatz-Link "messe frankfurt" (Figma V2: grau, nicht kursiv, Body-Font) */
.site-header__nav .site-header__extra {
  font-family: var(--font-body); font-weight: 400; font-style: normal;
  font-size: clamp(.9rem, 1vw, 17px); color: #878d91;
}
.site-header__nav .site-header__extra:hover { color: var(--color-text); }

@media (max-width: 900px) {
  .site-header__nav { display: none; } /* mobil: Hamburger-Menü (Figma Mobile 2250:14) */
}

/* ── Buttons ── */
.button {
  display: inline-block;
  background: var(--color-accent); color: #fff;
  font-weight: 700; text-decoration: none;
  padding: .8rem 1.6rem; border-radius: 999px;
  border: 2px solid var(--color-accent);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 30px color-mix(in srgb, var(--color-accent) 45%, transparent); }
.button--big { font-size: 1.1rem; padding: 1rem 2.2rem; }
.button--small { font-size: .85rem; padding: .5rem 1.1rem; }
.button--ghost { background: transparent; color: var(--color-text); border-color: var(--color-line); }
.button--ghost:hover { border-color: var(--color-accent); box-shadow: none; }
/* Gradient-Rechteck (Figma-Primär-CTA: scharfe Kanten, Violett→Pink) */
.button--gradient {
  background: var(--gradient-button); border: 0; border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: .03em;
}
/* Hover = Verlaufs-Flip (siehe ::before-Regeln bei .button--pill) */
/* Dunkler Button mit Gradient-Rand (CTA2) */
.button--outline-gradient {
  border: 2px solid transparent; border-radius: 12px; color: #fff;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    var(--gradient-accent) border-box;
}
/* Hover: Fläche füllt sich mit dem Verlauf (Pin-Feedback CTA2) */
.button--outline-gradient:hover, .button--outline-gradient:focus-visible {
  background:
    var(--gradient-accent) padding-box,
    var(--gradient-accent) border-box;
}
/* Kleiner Gradient-CTA (Figma-Komponente 2264:51: 10px-Radius, 11×21 Padding, 16px, +3% Tracking) */
.button--pill {
  background: var(--gradient-button); border: 0; border-radius: 10px;
  color: #fff; font-family: var(--font-display); font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: .03em;
  font-size: 1rem; padding: 11px 21px;
}
/* Social-CTA: Maße der Figma-Komponente 2264:51 (11×21 Padding, Radius 10, 16px) */
.button--gradient { border-radius: 10px; padding: 11px 21px; font-size: 1rem; letter-spacing: .03em; }

/* Hover für Gradient-Buttons (Figma 2264:51 + 2264:82): Verlaufsrichtung dreht um.
   Gradients sind nicht animierbar → gegenläufiger Verlauf als ::before, per Opacity überblendet. */
.button--pill, .button--gradient, .button--gradient-h { position: relative; z-index: 0; overflow: hidden; }
.button--pill::before, .button--gradient::before, .button--gradient-h::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  opacity: 0; transition: opacity .25s ease;
}
.button--pill::before, .button--gradient::before { background: var(--gradient-accent); }   /* Basis Violett→Pink, Hover Pink→Violett */
.button--gradient-h::before { background: var(--gradient-button); }                        /* Basis Pink→Violett, Hover Violett→Pink */
.button--pill:hover::before, .button--pill:focus-visible::before,
.button--gradient:hover::before, .button--gradient:focus-visible::before,
.button--gradient-h:hover::before, .button--gradient-h:focus-visible::before { opacity: 1; }

/* ── Hero ── */
.hero {
  position: relative;
  min-height: min(100svh, 1117px);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  overflow: hidden; text-align: center;
  padding: 0 clamp(1rem, 9.7vw, 169px) clamp(2.5rem, 6vw, 96px); /* 169px/96px ~ Figma */
}
.hero__media, .hero__media img, .hero__media video, .hero__slider img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Motive sind wieder badge-frei (KI-Hinweis kommt als .ai-badge-Layer),
   deshalb normaler mittiger Zuschnitt. */
/* KI-Hinweis als Overlay – pro Bild im Panel schaltbar (Feld "kihinweis") */
.ai-badge {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  font-family: var(--font-display); font-weight: 700; font-size: .75rem;
  letter-spacing: .04em; color: rgb(255 255 255 / .92);
  background: rgb(10 10 12 / .62); border-radius: 8px; padding: .35rem .7rem;
  pointer-events: none; white-space: nowrap;
}
.anfahrt__mediawrap { position: relative; display: inline-block; max-width: 560px; width: 100%; }
.hero__slider img { opacity: 0; transition: opacity .8s ease; }
.hero__slider img.is-active { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / .03) 45%, rgb(16 16 16 / .35) 100%); /* Figma V2: hellerer Auslauf */
}
.hero__content {
  position: relative; z-index: 1; width: 100%; max-width: 1390px;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1.25rem, 2.4vw, 34px);
}
.hero__panel {
  width: 100%;
  /* Kundenwunsch 10.08.: durchlässiger, damit der Astronaut dahinter sichtbar
     bleibt (vorher .6 Deckung + 7.5px Blur) */
  background: rgb(29 29 25 / .42);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-radius: var(--radius);
  box-shadow: 0 4px 4px rgb(0 0 0 / .25);
  padding: clamp(1.75rem, 3vw, 45px) clamp(1.5rem, 4.5vw, 65px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1rem, 2.2vw, 32px);
}
.hero__headline {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  text-transform: uppercase; color: #fff;
  font-size: clamp(1.7rem, 3.2vw, 55px); line-height: 1.4; /* Figma-Größe – passt mit Roboto einzeilig (gemessen) */
  margin: 0;
}
.hero__nownext {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  color: #fff; font-size: clamp(1rem, 1.6vw, 24px); margin: 0;
}
.hero__nownext strong {
  background: var(--gradient-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Countdown (im Hero) ── */
.countdown[hidden] { display: none; } /* display:flex überstimmt sonst das hidden-Attribut */
.countdown {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(1rem, 2.2vw, 32px);
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  color: #fff; font-variant-numeric: tabular-nums;
}
.countdown__unit { display: flex; flex-direction: column; align-items: center; line-height: 1.4; }
/* Eventtag-Modus: Countdown zählt auf den nächsten Programmpunkt, "Tage" entfällt
   (Tage-Einheit + folgender Trenner ausgeblendet, main.js setzt die Klasse) */
.countdown--no-days .countdown__unit--days,
.countdown--no-days .countdown__unit--days + .countdown__sep { display: none; }
/* Programmzeilen im Hero (ersetzen den Countdown ab Messebeginn):
   Label-Spalte groß mit Uhrzeit darunter, Punkte linksbündig daneben,
   jede Zeile einzeln verlinkt (Hover unterstreicht nur den eigenen Punkt) */
.nownext__grid {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 1.1rem 1.4rem; /* Zeilen-Gap = Abstand ZWISCHEN den Gruppen, sonst nichts */
  align-items: start; text-align: left;
}
.nownext__label {
  font-weight: 900; font-size: clamp(1.2rem, 2.1vw, 32px);
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  text-align: left; line-height: 1.15;
}
.nownext__uhr { display: block; font-size: clamp(1rem, 1.5vw, 22px); color: #fff; }
/* Punkte-Stapel: einheitlicher Abstand unabhängig von der Labelhöhe;
   padding-top richtet die erste Zeile optisch an der großen Labelzeile aus */
.nownext__punkte { display: grid; gap: .45rem; justify-items: start; padding-top: .3rem; }
.nownext__punkt { color: inherit; text-decoration: none; text-align: left; }
.nownext__punkt:hover strong { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  /* mobil einspaltig: Label als Zwischenüberschrift, Uhrzeit in derselben Zeile */
  .nownext__grid { grid-template-columns: 1fr; gap: .45rem; }
  .nownext__label:empty { display: none; }
  .nownext__label + .nownext__punkte { padding-top: 0; }
  .nownext__punkte + .nownext__label { margin-top: 1rem; }
  .nownext__uhr { display: inline; margin-left: .5rem; }
}
.countdown__num { font-size: clamp(2rem, 3.3vw, 48px); }
.countdown__label { font-size: clamp(1rem, 1.8vw, 26px); }
.countdown__label-short { display: none; } /* Kurzform (T/Std/Min/Sek) nur mobil – Figma Mobile */
/* Slash = Original-Glyphe aus Figma (Textknoten 2250:37 als SVG exportiert) */
.countdown__sep {
  align-self: center;
  aspect-ratio: 16 / 25;
  height: clamp(2.6rem, 4.3vw, 74px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 25' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='1.591' y1='-0.275' x2='16.554' y2='2.578' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF2C55'/%3E%3Cstop offset='1' stop-color='%23A172F7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M15.233 0L4.653 24.381H0L10.58 0H15.233Z' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat;
  font-size: 0; color: transparent;
}

/* ── Sektionen ── */
.section { position: relative; padding: 6rem 1.25rem; overflow: hidden; }
.section__inner { max-width: var(--max); margin-inline: auto; position: relative; }
.section__inner--wide { max-width: var(--max-wide); }
.section__inner--text { max-width: 44rem; }
.section__inner--split {
  display: grid; gap: 3rem; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.section__title {
  font-family: var(--font-display);
  font-weight: 900; font-style: italic;
  font-size: clamp(2rem, 4.4vw, 64px);
  line-height: 1.05; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--color-text);
  margin: 0 0 1.2rem;
}
.section__title--small { font-size: clamp(1.6rem, 3vw, 40px); }
.section__lead { color: var(--color-text-soft); max-width: 46rem; margin: 0 0 2rem; }

/* Eyebrow (kleine Zeile mit Gradient-Strich – Figma) */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; letter-spacing: 0; text-transform: uppercase; /* Figma: 630 Bold 16px, ls 0 */
  margin: 0 0 1.1rem;
  background: var(--gradient-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow__line { width: 34px; height: 3px; border-radius: 2px; background: var(--gradient-accent); flex: none; }
.eyebrow--mobile { display: none; } /* Sektions-Eyebrows (Anreise/Social Media/Help/Highlights) zeigt nur das Mobile-Design */

.glow {
  position: absolute; width: 880px; height: 880px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 65%);
  top: 50%; left: -300px; transform: translateY(-50%);
  pointer-events: none;
}
.glow--right { left: auto; right: -300px; }

/* ── Tickets ── */
/* Figma V2: Sektion auf Surface-Fläche mit Violett-/Pink-Glows, Karten dunkler (#101010) */
.tickets {
  background:
    radial-gradient(46% 60% at 10% 10%, rgb(161 114 247 / .22), transparent 70%),
    radial-gradient(60% 75% at 50% 108%, rgb(255 44 85 / .18), transparent 72%),
    var(--color-surface);
}
.tickets .glow { display: none; }
.tickets__grid {
  display: grid; column-gap: clamp(2rem, 4vw, 72px);
  row-gap: clamp(1.75rem, 4.5vw, 80px); /* Abstand Headline → Karten/Video */
  grid-template-columns: 42fr 58fr;
  grid-template-rows: auto auto; align-items: start;
}
.tickets__head { grid-column: 1 / -1; grid-row: 1; } /* Headline läuft über beide Spalten (Figma V2) */
.tickets__main { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; }
.tickets__aside { grid-column: 2; grid-row: 2; } /* auf Höhe der Info-Karten, oben rechts bleibt frei (Figma) */
/* Figma hat hier -4px auf 64px (= -.0625em), das gilt aber für die schmale
   "Messe Univers". Roboto verschluckt damit die Wortzwischenräume
   ("JETZTTICKETS"), deshalb nur leicht verdichtet. */
.tickets__headline { margin: 0; letter-spacing: -.015em; }
.tickets__cards { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; width: 100%; }

.info-card {
  display: flex; align-items: center; gap: 1.1rem; width: 100%;
  background: var(--color-bg);
  border: 1px solid rgb(255 255 255 / .05);
  border-radius: 14px; padding: 1.25rem 1.4rem;
}
.info-card__icon {
  flex: none; width: 54px; height: 54px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
  background: #1c1c1c; border: 1px solid rgb(255 255 255 / .06);
}
.info-card__icon svg { width: 24px; height: 24px; }
.info-card__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.info-card__label { font-family: var(--font-display); font-weight: 700; font-size: .875rem; letter-spacing: 0; text-transform: uppercase; color: var(--color-muted); } /* Figma: 630 Bold 14px */
.info-card__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.5rem); line-height: 1.2; color: #fff; }
.info-card__note { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--color-muted); }
/* Optionaler Link auf einer Infokarte (Ort → Google Maps). Erbt das Spaltenlayout
   von .info-card__body, damit die Karte optisch unverändert bleibt; erst bei
   Hover/Fokus wird die Klickbarkeit sichtbar. */
.info-card__link {
  display: flex; flex-direction: column; gap: .15rem; min-width: 0;
  color: inherit; text-decoration: none;
  border-radius: 6px; transition: color .2s ease;
}
.info-card__link:hover .info-card__value,
.info-card__link:focus-visible .info-card__value { text-decoration: underline; text-underline-offset: 3px; }
.info-card__link:hover .info-card__note { color: #fff; }
.info-card__link:focus-visible { outline: 2px solid var(--color-accent, #ff2c55); outline-offset: 3px; }

.button--block { display: block; width: 100%; text-align: center; }
/* horizontaler Gradient (Pink→Violett), abgerundet – Tickets-CTA */
.button--gradient-h {
  background: var(--gradient-accent); border: 0; border-radius: 15px; /* Figma-Komponente 2264:82 */
  color: #fff; font-family: var(--font-display); font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: .08em; /* Figma: ls 1.2px bei 15px */
  padding: 1.5rem 1rem; font-size: .95rem; white-space: nowrap; /* einzeilig wie in der Komponente (530×84) */
  box-shadow: 0 12px 16px rgb(255 44 85 / .27); /* Schattenwert aus der Komponente */
}
.tickets__main .button--block { margin-bottom: 1rem; }

.tickets__note { font-size: .9rem; color: var(--color-muted); margin: 1rem 0 0; }
.tickets__note a { color: #fff; text-decoration: underline; }

/* Highlights-Videokarte */
.tickets__aside { display: flex; flex-direction: column; gap: clamp(1.5rem, 2.2vw, 2rem); }
.highlights {
  position: relative; display: block; border-radius: 15px; overflow: hidden;
  aspect-ratio: 16 / 9; text-decoration: none; color: #fff; /* Figma V2: flachere Videokarte */
}
.highlights__media { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
a.highlights:hover .highlights__media, a.highlights:focus-visible .highlights__media,
.highlights:has(.highlights__trigger:hover) .highlights__media,
.highlights:has(.highlights__trigger:focus-visible) .highlights__media { transform: scale(1.03); }
.highlights__play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; display: grid; place-items: center; pointer-events: none; }
.highlights__play svg { width: 74px; height: 74px; }
.highlights__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: .15rem;
  padding: 1.5rem 1.6rem;
  background: linear-gradient(0deg, rgb(0 0 0 / .65), transparent);
}
/* Zwei-Klick-Consent für das eingebettete Video (Briefing Punkt 17) */
.highlights__trigger { position: absolute; inset: 0; width: 100%; background: none; border: 0; cursor: pointer; }
.highlights__consent {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  padding: 1.5rem; text-align: center;
  background: rgb(16 16 16 / .92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.highlights__consent p { margin: 0; max-width: 34rem; color: var(--color-text-soft); font-size: .9rem; }
.highlights__consent-actions { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.highlights__iframe { display: block; width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }

.highlights__kicker { font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); }
.highlights__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.1; color: #fff; }

/* Kennzahlen (Figma V2: dünne vertikale Trenner zwischen den Werten) */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0; }
.stats__item + .stats__item { border-left: 1px solid var(--color-line); padding-left: 1.5rem; }
.stats__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 2.6vw, 40px); line-height: 1; color: #fff; margin: 0; }
.stats__label { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin: .5rem 0 0; }

/* ── Pfeil-Motiv (↗) ── */
/* Original-Pfad aus Figma (80×58); Statement/CTA2-Icon inkl. Gradient-Quadrat
   liegt als fertiges SVG unter assets/img/ambition-mark.svg */
.arrow { display: inline-block; width: 1em; height: auto; aspect-ratio: 80 / 58; }
.statement__mark { display: block; width: 80px; height: auto; margin: 0 auto 2.5rem; }
.arrow-mark { display: block; width: 80px; height: auto; }
.arrow--front { color: #fff; }

/* ── Statement ── */
/* Breiter Magenta/Violett-Wash wie im Figma (V2) – zwei überlagerte Radialverläufe */
.statement {
  text-align: center;
  padding-block: clamp(6rem, 10vw, 9.5rem);
  background:
    radial-gradient(48% 75% at 42% 50%, rgb(255 44 85 / .13), transparent 70%),
    radial-gradient(80% 120% at 55% 45%, rgb(74 36 69 / .85), transparent 78%);
}
.statement__inner { display: flex; flex-direction: column; align-items: center; max-width: 66rem; } /* Pin: Textbreite wie Figma (~1050px) */
.statement__text {
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: clamp(1.25rem, 2vw, 28px); line-height: 1.4;
  color: var(--color-text); max-width: 62rem; margin: 0;
}

/* ── Programm ── */
.programm__title { text-align: center; }
.programm__lead { text-align: center; font-style: italic; font-weight: 700; margin: 1rem auto clamp(2rem, 4vw, 3.5rem); max-width: 40rem; font-size: .9375rem; } /* Figma: 631 Bold Italic 15px */

/* Figma V2: 5 Tabs über die volle Breite verteilt */
.tabs__list {
  display: flex; align-items: stretch; justify-content: flex-start;
  gap: 0; margin: 0 0 2.5rem;
}
.tabs__tab {
  position: relative; z-index: 0; flex: 1 1 0;
  background: none; border: 0; color: var(--color-text);
  font-family: var(--font-display); font-weight: 400; font-style: italic; /* Figma: inaktiv Regular Italic 20px */
  font-size: clamp(1rem, 1.3vw, 20px); cursor: pointer;
  padding: .7rem 1rem; border-radius: 0; /* Desktop: eckige Pill (Figma) */
  transition: color .25s ease, font-weight .25s ease;
}
/* Gradient-Fläche des aktiven Tabs als ::after einblenden – Verläufe selbst sind
   nicht animierbar, deshalb Opacity-Crossfade statt hartem Umschalten. */
.tabs__tab::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--gradient-accent); opacity: 0;
  transition: opacity .25s ease;
}
.tabs__tab[aria-selected="true"]::after { opacity: 1; }
.tabs__tab[aria-selected="true"] { font-weight: 800; color: #fff; } /* Figma: aktiv ExtraBold Italic */
.tabs__tab + .tabs__tab::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: rgb(255 255 255 / .25);
  transition: opacity .25s ease;
}
.tabs__tab[aria-selected="true"]::before,
.tabs__tab[aria-selected="true"] + .tabs__tab::before { opacity: 0; }
.tabs__tab:hover:not([aria-selected="true"]) { color: var(--color-accent); }

/* Panelwechsel: Inhalt sanft einblenden statt hart umschalten */
.tabs__panel { animation: tab-in .28s ease both; }
@keyframes tab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.schedule { list-style: none; margin: 0; padding: 0; }
/* Tage, deren Programm noch nicht feststeht */
.schedule__empty {
  font-family: var(--font-body); font-style: italic; font-weight: 700;
  color: var(--color-muted); margin: 0; padding: 1.6rem 0;
  border-top: 1px solid var(--color-line);
}
/* Bühnen-Gruppen mit Überschrift (Kundenwunsch 31.07.) – gleiche Größe wie die
   Sektionstitel à la "UNSERE CONTENT PARTNER" (Black Italic ~40px), sonst gehen
   sie zwischen den Programmpunkten unter */
.schedule-group { margin-top: clamp(2.25rem, 4vw, 3.5rem); }
.schedule-group__title {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(1.6rem, 2.4vw, 40px); letter-spacing: .02em; text-transform: uppercase;
  color: #fff; margin: 0 0 .35rem;
}
.schedule-group__title .schedule__pin { width: clamp(22px, 2vw, 30px); height: clamp(22px, 2vw, 30px); }
/* Bühnen-Filter über den Tages-Tabs – gleiche Formensprache wie die
   Tages-Tab-Pills (mobil) bzw. der aktive Tab: 10px-Radius, Display-Font,
   aktiv = Gradient-Fläche */
.schedule-filter { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.5rem 0 .5rem; }
.schedule-filter__chip {
  font-family: var(--font-display); font-weight: 700; font-size: .875rem;
  color: var(--color-text); background: #1a1a1a; cursor: pointer;
  border: 1px solid rgb(255 255 255 / .16); border-radius: 10px;
  padding: .6rem 1.25rem;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.schedule-filter__chip:hover:not(.is-active) { color: var(--color-accent); }
.schedule-filter__chip.is-active {
  color: #fff; font-weight: 800; font-style: italic; /* wie aktiver Tages-Tab (ExtraBold Italic) */
  border-color: transparent; background: var(--gradient-accent);
}
.schedule__item { position: relative; padding: 1.6rem 0; }
.schedule__item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gradient-accent); opacity: .55;
}
.schedule__meta { display: flex; align-items: center; gap: 1.5rem; margin: 0 0 .55rem; flex-wrap: wrap; }
.schedule__time { font-family: var(--font-display); font-weight: 700; font-size: 1rem; background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.schedule__stage { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; }
.schedule__pin { width: 18px; height: 18px; color: #fff; flex: none; }
.schedule__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.45rem); letter-spacing: .03em; color: #fff; margin: 0 0 .5rem; } /* Figma: 630 Bold 23px, ls 0.69 */
.schedule__desc { font-family: var(--font-body); font-style: italic; font-weight: 700; color: var(--color-text-soft); margin: 0 0 .25rem; font-size: 1rem; max-width: 74rem; } /* Figma: 631 Bold Italic 16px */
.schedule__speaker { font-family: var(--font-body); font-style: italic; font-weight: 700; color: var(--color-text-soft); margin: 0; font-size: 1rem; }
.schedule__badge {
  display: inline-block; font-family: var(--font-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .15rem .6rem; border-radius: 999px;
}
/* Zeitzustände (Komfortvariante) */
.schedule__item.is-past { opacity: .4; }
.schedule__item.is-live .schedule__title { color: var(--color-accent); }
.schedule__item.is-live .schedule__badge { background: var(--color-accent); color: #fff; }
.schedule__item.is-next .schedule__badge { background: var(--color-accent-2); color: #000; }

/* ── WhatsApp ── */
/* Figma V2: kompaktes, mittig gesetztes Paar aus Textblock + kleiner QR-Karte */
.whatsapp { background: var(--color-surface); } /* Figma V2: Surface-Fläche wie Partner */
.whatsapp__grid { display: flex; align-items: flex-start; justify-content: center; gap: clamp(2rem, 4vw, 4.5rem); flex-wrap: wrap; }
.whatsapp__text { align-self: flex-start; flex: 0 1 340px; }
.whatsapp__title { text-transform: none; margin-bottom: 1.3rem; font-size: clamp(1.7rem, 2.4vw, 36px); font-weight: 700; line-height: 1.2; } /* Figma: 631 Bold Italic 36px */
.whatsapp__lead { color: var(--color-text-soft); font-family: var(--font-body); font-weight: 700; font-size: .9375rem; max-width: 22rem; margin: 0; } /* Figma: 630 Bold 15px */
.whatsapp__cta { margin: 1.5rem 0 0; } /* CTA zum Kanal (Kundenwunsch 24.08.) */
/* QR-Karte: Chrome (Rahmen, Sprechblase, "Scan me!") = Original-SVG aus Figma
   (assets/img/qr-card-chrome.svg, Node 2255:483); QR liegt als austauschbares
   Bild absolut auf der weißen Fläche (Position/Größe in % der 137×177-Karte). */
.qr-card { margin: 0; flex: none; position: relative; width: 132px; }
.qr-card__link { display: block; text-decoration: none; }
.qr-card__chrome { display: block; width: 100%; height: auto; }
.qr-card__qr { position: absolute; left: 10.9%; top: 8.5%; width: 78.2%; height: auto; }

/* ── Partner ── */
/* Band bleibt DUNKEL (Kundenklarstellung 31.07.): Logos in der Weiß-Variante,
   nur die farbigen Elemente farbig (Eintracht-Wappen rot, SPTG-Bogen blau/gelb) –
   1:1 aus Figma-Frame 2215:423 exportiert. */
.partner { background: radial-gradient(52% 90% at 45% 120%, rgb(255 44 85 / .14), transparent 72%), var(--color-surface); }
.partner__head { text-align: center; margin-inline: auto; }
.partner__title { text-align: center; font-size: clamp(1.6rem, 2.4vw, 40px); } /* Figma: 831 Black Italic 40px */
.partner__lead { text-align: center; font-style: italic; margin: 1rem auto clamp(2rem, 4vw, 3rem); max-width: 52rem; }
.marquee { overflow: hidden; padding: 1rem 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track {
  /* 03.09.: Die Spur sprang nach jedem Durchlauf um einen halben Logo-Abstand.
     Grund: Bei n Items erzeugt `gap` nur n-1 Abstaende, die Animation schiebt aber
     um -50% der Gesamtbreite. Eine Haelfte ist damit um gap/2 breiter als die
     Verschiebung (gemessen: 2086px statt 2052px = 34px Versatz).
     Das padding-right ergaenzt den fehlenden Abstand hinter dem letzten Item,
     dadurch sind Gesamtbreite/2 und Haelftenbreite exakt gleich. */
  --marquee-gap: clamp(3rem, 6vw, 6rem);
  display: flex; gap: var(--marquee-gap); align-items: center;
  list-style: none; margin: 0; padding: 0 var(--marquee-gap) 0 0;
  width: max-content;
  animation: marquee var(--marquee-duration, 70s) linear infinite; /* Dauer setzt partner.php nach Logoanzahl */
  will-change: transform; /* eigene Compositing-Ebene gegen Ruckeln */
}
.marquee__item { display: flex; align-items: center; }
/* Pausieren nur bei echtem Hover (Desktop) bzw. sichtbarem Tastaturfokus.
   :focus-within stand mobil dauerhaft an: der angetippte Link behält den Fokus,
   ein "Hover-Ende" gibt es auf Touch nicht -> Band blieb nach Klick stehen. */
/* Pause-Logik liegt im JS (pointerType-Erkennung): CSS-:hover klebte auf
   Android nach dem Tippen (emuliertes Hover + teils falsches hover:hover),
   Details in main.js beim Marquee-Block. */
.marquee img { height: 64px; width: auto; } /* Logogröße nach Figma V2 */
/* SPTG: geliefertes Farb-Logo mit blauer Schrift, ohne Kachel (Kundenwunsch);
   leicht größer als die 64px-Basis, damit die blaue Schrift lesbar bleibt */
.marquee img[src*="partner-stiftung"] { height: 76px; }
.marquee a { display: inline-flex; transition: transform .2s ease; }
.marquee a:hover { transform: scale(1.05); }
.marquee__name { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 1.4rem; color: var(--color-text); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding-right: 0; }
  .marquee { mask-image: none; }
  .marquee__item[aria-hidden="true"] { display: none; } /* Duplikat nur für Lauf-Effekt */
}

/* ── CTA2 ── */
/* Figma V2: Titel oben, großes Pfeil-Wasserzeichen darunter, Magenta-Wash */
.cta2 { position: relative; overflow: hidden; text-align: center;
  padding: clamp(4.5rem, 6vw, 6.5rem) 1.25rem clamp(12rem, 22vw, 22rem);
  background:
    radial-gradient(45% 65% at 38% 42%, rgb(255 44 85 / .12), transparent 70%),
    radial-gradient(80% 110% at 50% 48%, rgb(74 36 69 / .8), transparent 80%); }
.cta2__mark {
  position: absolute; left: 50%; top: 56%; transform: translate(-50%, -30%);
  width: min(48vw, 620px); aspect-ratio: 80 / 58; color: #cfc4cf;
  opacity: .14; pointer-events: none; z-index: 0;
}
.cta2__mark .arrow { width: 100%; }
.cta2__mark-mobile { display: none; } /* Icon-Variante mit Gradient-Quadrat: nur mobil (Figma) */
.cta2__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 72rem; } /* Titel einzeilig (Figma) */
.cta2__title { text-transform: none; text-align: center; letter-spacing: 0; margin-bottom: clamp(2rem, 4vw, 3.5rem); } /* Figma: 64px, ls 0 – passt mit Roboto einzeilig */
.cta2 .button { font-size: clamp(1.05rem, 1.5vw, 1.5rem); font-weight: 700; padding: .85rem 2rem; } /* Figma: 631 Bold Italic */
.cta2__lead { text-align: center; margin-inline: auto; }

/* ── Anfahrt ── */
/* Figma V2: Bild oben rechts bündig mit dem Titel, schmale Textspalte */
.anfahrt__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 72px); align-items: start; }
.anfahrt__lead { margin: 0 0 clamp(1.5rem, 3vw, 2.2rem); }
.anfahrt__lead p { color: var(--color-text-soft); font-style: italic; margin: 0 0 1rem; max-width: 22rem; font-size: 1rem; } /* Figma: Italic 16px */
.anfahrt__lead p:last-child { margin-bottom: 0; }
/* Route + Ticket nebeneinander, auf schmalen Viewports untereinander */
.anfahrt__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.anfahrt__media { border-radius: 10px; width: 100%; max-width: 560px; aspect-ratio: 552 / 320; object-fit: cover; }

/* Generischer Fade-Slider (Anfahrt; Hero hat eigene Variante) – Wechsel alle 5 s via main.js */
.img-slider { position: relative; overflow: hidden; }
.img-slider img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .8s ease;
}
.img-slider img.is-active { opacity: 1; }
.anfahrt__accordion { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
/* Kleinere Pill (Anfahrt "Mehr Infos" – Figma V2) */
.button--pill-sm { font-size: .78rem; padding: 8px 17px; }

/* ── Akkordeon (offene Zeilen, geteilt Anfahrt + FAQ) ── */
.accordion { display: block; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.accordion__item { position: relative; background: none; border: 0; border-radius: 0; }
.accordion__item summary {
  position: relative; /* Bezug für die +/−-Balken (sonst zentrieren sie sich am offenen Item) */
  display: flex; align-items: center; gap: 1rem;
  cursor: pointer; list-style: none;
  padding: 1.1rem 2.5rem 1.1rem 2.1rem; /* links Platz fürs Icon (Desktop), Figma V2 */
  font-family: var(--font-display); font-weight: 700; font-style: normal; /* Figma V2: Messe Univers 630 Bold, aufrecht */
  font-size: 1rem; color: #fff;
}
.accordion__item summary::-webkit-details-marker { display: none; }
/* +/− nach Figma (Node 2251:213: 16×16, 2px-Balken mit Verlauf, abgerundet).
   Zwei einzelne Balken statt Hintergrundbild – so lässt sich der senkrechte
   Balken beim Öffnen weganimieren (+ wird zu −). */
.accordion__item summary::before,
.accordion__item summary::after {
  content: ""; position: absolute; left: 0; top: 50%;   /* Desktop: Icon links (Figma) */
  width: 16px; height: 2px; border-radius: 1px; margin-top: -1px;
  background: var(--gradient-accent);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.accordion__item summary::after { transform: rotate(90deg); }          /* senkrechter Balken */
.accordion__item[open] summary::after { transform: rotate(0deg); opacity: 0; } /* dreht ein und blendet aus → − */
.accordion__item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gradient-accent); opacity: .5;
}
.accordion__content { padding: 0 0 1.35rem 2.1rem; color: var(--color-text-soft); font-style: italic; } /* Figma V2: kursive Antworten */
/* Aufklappen sanft statt sprunghaft. Moderne Browser können <details> direkt
   animieren (::details-content); ältere zeigen es weiterhin sofort – ohne Nachteil. */
.accordion__item[open] .accordion__content { animation: acc-in .28s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@supports selector(details::details-content) {
  .accordion__item::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .3s cubic-bezier(.4, 0, .2, 1), content-visibility .3s allow-discrete;
  }
  .accordion__item[open]::details-content { block-size: auto; }
}
.accordion__content strong { font-weight: 800; } /* Design nutzt ExtraBold für die Einstiege ("Mit dem Taxi …") */
.accordion__content p { margin: 0 0 .8rem; }
.accordion__content p:last-child { margin-bottom: 0; }

/* ── Social ── */
.social__grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(2rem, 4vw, 72px); align-items: start; } /* Karten bündig mit Titel (Figma V2) */
/* Instagram- + TikTok-CTA untereinander (Kundenwunsch 31.07.) */
.social__ctas { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.social__sub { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 1rem; color: var(--color-text); margin: 0 0 1.4rem; } /* Figma: ExtraBold Italic 16px */
.social__lead { color: var(--color-text-soft); font-style: italic; margin: 0 0 2rem; max-width: 30rem; }
.social__posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
/* Instagram-Post-Karte: nur das abgerundete Bild – der Post-Rahmen (Kopf/Aktionen)
   steckt bereits in den Bildern aus dem Figma (Pin 26.07., kein nachgebautes Chrome) */
.insta-card a { display: block; border-radius: 10px; overflow: hidden; text-decoration: none; transition: transform .2s ease; }
.insta-card a:hover, .insta-card a:focus-visible { transform: translateY(-4px); }
.insta-card img { display: block; width: 100%; height: auto; }
.social__consent {
  border: 1px dashed var(--color-line); border-radius: var(--radius);
  padding: 2.5rem; text-align: center; color: var(--color-muted);
}

/* ── FAQ ── */
.section__inner--narrow { max-width: 1160px; } /* V2-Inhaltsbreite für Programm/Anfahrt/Social/FAQ */
.faq__title { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ── Footer ── */
.footer-arrow { display: flex; justify-content: center; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.footer-arrow .arrow { color: #fff; }

.footer-strip { overflow: hidden; background: var(--gradient-accent); padding: .75rem 0; }
.footer-strip__track { display: flex; align-items: center; gap: 1.5rem; width: max-content; animation: marquee 32s linear infinite; }
.footer-strip__item, .footer-strip__star { font-family: var(--font-display); font-weight: 900; font-style: italic; color: #fff; white-space: nowrap; }
.footer-strip__item { font-size: 1rem; letter-spacing: .01em; } /* Figma: 831 Black Italic 16px */
.footer-strip__star { font-style: normal; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .footer-strip__track { animation: none; } }

.site-footer { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); }
.site-footer__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 2rem;
  padding-inline: clamp(1.25rem, 9.26vw, 160px);
}
.site-footer__nav, .site-footer__legal { display: flex; flex-direction: column; gap: .85rem; }
.site-footer__legal { align-items: flex-end; }
.site-footer__nav a, .site-footer__legal a {
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  color: var(--color-text); text-decoration: none;
}
.site-footer__nav a { text-transform: uppercase; letter-spacing: .04em; }
.site-footer__nav a:hover, .site-footer__legal a:hover { color: var(--color-accent); }
.site-footer__center { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.site-footer__social { display: flex; gap: 1.5rem; }
/* Figma V2: Icon im dunklen Kreis */
.site-footer__social a {
  color: var(--color-text); display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: #1c1c1c;
  transition: color .2s ease, transform .2s ease;
}
.site-footer__social a:hover { color: var(--color-accent); transform: translateY(-2px); }
.site-footer__social svg { width: 22px; height: 22px; }
.site-footer__divider { width: 1px; height: 42px; background: rgb(255 255 255 / .3); }
.site-footer__copy { font-family: var(--font-body); font-weight: 700; font-size: .95rem; color: var(--color-text); margin: 0; text-align: center; }

/* ── Cookie-/Consent-Banner (first-party, lädt Marketing-Pixel erst nach Opt-in) ── */
.consent-banner {
  position: fixed; inset: auto 0 0 0; z-index: 90; /* über Header (50) */
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: rgb(10 10 10 / .97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -18px 40px rgb(0 0 0 / .45);
}
.consent-banner__inner { max-width: 46rem; margin-inline: auto; }
.consent-banner__title {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 1.05rem; color: var(--color-text); margin: 0 0 .4rem;
}
.consent-banner__text { font-size: .875rem; line-height: 1.55; color: var(--color-text-soft); margin: 0 0 1rem; }
.consent-banner__text a { color: #fff; }
/* Kategorie-Auswahl: Statistik / Marketing / Externe Medien (Kundenvorgabe 28.07.) */
.consent-banner__cats { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .55rem; }
.consent-banner__cat label { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; }
.consent-banner__cat input { margin-top: .2rem; width: 16px; height: 16px; accent-color: var(--color-accent, #ff2c55); flex: none; }
.consent-banner__cat strong { display: block; font-size: .875rem; color: #fff; }
.consent-banner__cat small { display: block; font-size: .8rem; line-height: 1.45; color: var(--color-muted); }
.consent-banner__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
/* gleichwertige Buttons – kein Nudging; beide mit 10px-Radius (kein Pill-Ghost) */
.consent-banner__actions .button { font-size: .9rem; border-radius: 10px; padding: 11px 21px; }
/* Gleiches Styling wie die Rechtslinks daneben (Datenschutz/Impressum) –
   Kundenwunsch 28.07.; bleibt semantisch ein Button, nur die Optik ist Link */
.site-footer__consent {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  color: var(--color-text); text-decoration: none;
}
.site-footer__consent:hover { color: var(--color-accent); }

/* ============================================================
   RESPONSIVE / MOBILE  (bis 375px, nach bestem Ermessen)
   ------------------------------------------------------------
   Abgeglichen mit Figma Mobile "Onepager Version 2" (Node 2250:14, 430px):
   Hero als Banner + Inhalt darunter, Countdown-Kurzlabels, Tab-Pills,
   Sektions-Eyebrows nur mobil, gestapelter Footer mit Instagram-Kreis.
   Breakpoints: 900 (Menü) · 820 (2-Spalter stapeln) · 700 (Hero-Banner) · 560/380 (Feintuning)
   ============================================================ */

/* ── Mobiles Menü (Hamburger via native <details>) ── */
/* Kein position:relative hier – das Panel soll sich am (sticky) .site-header
   ausrichten, nicht am schmalen Button, damit es volle Breite bekommt. */
.nav-toggle { display: none; } /* Desktop: verborgen, Inline-Nav sichtbar */
.nav-toggle__button {
  list-style: none; cursor: pointer;
  width: 44px; height: 44px;                 /* 44px Touch-Target (WCAG 2.5.5) */
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
}
.nav-toggle__button::-webkit-details-marker { display: none; }
/* Burger-Icon nach Figma 2250:25: Balken 24×2px, abgerundet,
   mittlerer Balken kürzer (18px) und rechtsbündig */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; display: block; width: 24px; height: 2px; border-radius: 2px;
  background: var(--color-text);
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
.nav-toggle__bars { position: relative; width: 18px; margin-left: 6px; } /* rechtsbündig unter den 24px-Balken */
.nav-toggle__bars::before { position: absolute; right: 0; top: -7px; }
.nav-toggle__bars::after  { position: absolute; right: 0; top: 7px; }
.nav-toggle[open] .nav-toggle__bars { background: transparent; }          /* + → × */
.nav-toggle[open] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[open] .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle__panel {
  position: absolute; top: 100%; right: 0; left: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding: .25rem clamp(1.25rem, 9.26vw, 160px) 1.1rem;   /* Seitenrand wie Header */
  background: rgb(0 0 0 / .95); backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 18px 40px rgb(0 0 0 / .45);
}
.nav-toggle__panel a {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 1.15rem; color: var(--color-text); text-decoration: none;
  padding: .85rem 0; border-bottom: 1px solid var(--color-line);
}
.nav-toggle__panel a:last-child { border-bottom: 0; }
.nav-toggle__panel a:hover,
.nav-toggle__panel a:focus-visible { color: var(--color-accent); }

@media (max-width: 900px) {
  .nav-toggle { display: block; } /* Inline-Nav ist ab hier bereits ausgeblendet (siehe oben) */
}

/* ── Ab 820px: zweispaltige Sektionen stapeln (nach Figma Mobile 2250:14, 430px) ── */
@media (max-width: 820px) {
  :root { --header-h: 72px; } /* kompakter Header (Figma Mobile) */
  .site-header__logo { height: 28px; }

  /* Sektions-Eyebrows zeigt nur das Mobile-Design */
  .eyebrow--mobile { display: inline-flex; }

  /* Figma Mobile: 24px Seitenrand, ~48px Sektions-Innenabstand */
  .section { padding: 3rem 1.5rem; }

  /* Tickets – Headline → Info-Karten+CTA → Video+Kennzahlen */
  .tickets__grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .tickets__head,
  .tickets__main,
  .tickets__aside { grid-column: 1; grid-row: auto; min-width: 0; } /* min-width verhindert Overflow durch nowrap-CTA */
  .tickets__headline { font-size: 1.75rem; letter-spacing: 0; } /* Figma Mobile: 28/34, ls 0 */
  .tickets__cards { gap: 1.5rem; margin-bottom: 1.5rem; }
  .info-card { padding: 1.4rem 1.5rem; }
  .info-card__label { font-size: .75rem; }      /* Figma Mobile: 12px */
  .info-card__value { font-size: 1.125rem; }    /* Figma Mobile: 18px */
  .info-card__note  { font-size: .8125rem; }
  /* CTA bleibt einzeilig (Figma: 64px hoch, 13px @430) – Schrift skaliert mit dem Viewport */
  .button--gradient-h { font-size: clamp(.66rem, 3.05vw, .8125rem); letter-spacing: .04em; padding: 1.5rem .5rem; }
  .stats { gap: 1rem; text-align: center; }
  .stats__item + .stats__item { padding-left: 1rem; }
  .stats__value { font-size: 1.75rem; }         /* Figma Mobile: 28px */
  .stats__label { font-size: .75rem; }          /* Figma Mobile: 12px */

  /* Statement – mehr Luft (Figma: Icon 80px, steckt komplett im SVG-Asset).
     .section.statement: gewinnt gegen die .section-Paddings der späteren Breakpoints. */
  .section.statement { padding-block: 6.5rem 7.5rem; }
  .statement__mark { margin-bottom: 2.75rem; }
  .statement__text { font-size: 1.25rem; }      /* Figma Mobile: 20/28 */

  /* Programm – Titel/Lead linksbündig, Tabs als Pills mit feinem Rand (Figma Mobile) */
  .programm__title, .programm__lead { text-align: left; }
  .programm__lead { margin: .75rem 0 2rem; font-size: .875rem; }
  .tabs__list { flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }
  .tabs__tab {
    flex: 0 0 auto; background: #1a1a1a; border-radius: 10px; padding: .6rem 1.25rem;
    border: 1px solid rgb(255 255 255 / .16);
    font-style: normal; font-weight: 700; font-size: .875rem; /* Figma Mobile: 630 Bold 14, aufrecht */
  }
  .tabs__tab[aria-selected="true"] { border-color: transparent; }
  .tabs__tab + .tabs__tab::before { display: none; }
  /* Schedule-Zeile: Zeit links, Bühne rechts – kompaktere Pitches wie im Figma */
  .schedule__item { padding: 1.25rem 0; }
  .schedule__meta { justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
  .schedule__time, .schedule__stage { font-size: .875rem; }
  .schedule__title { font-size: 1.25rem; letter-spacing: 0; } /* Figma Mobile: 20px */
  .schedule__desc, .schedule__speaker { font-size: .875rem; }
  .schedule-group__title { font-size: 1.5rem; } /* mobil zwischen Sektionstitel (1.75) und Punkt-Titel (1.25) */

  /* Anfahrt – Text über Karte, danach Bild (Figma Mobile: Titel 40px, Lead aufrecht Bold) */
  .anfahrt__grid { grid-template-columns: 1fr; }
  .anfahrt .section__title { font-size: 2.5rem; }
  .anfahrt__lead p { font-style: normal; font-weight: 700; max-width: none; }
  .button--pill-sm { font-size: .9375rem; padding: 11px 24px; } /* Figma Mobile: 149×42 */
  .anfahrt__media { aspect-ratio: 8 / 5; max-width: none; }     /* Figma Mobile: 382×239 */
  .anfahrt__accordion { margin-top: 2rem; }

  /* Akkordeon (Anfahrt + FAQ): +/− rechts, Antwort ohne Einzug;
     Trennlinien behalten den Verlauf (wie Desktop – Korrektur 26.07.) */
  .accordion__item summary { padding-left: 0; padding-right: 2.5rem; }
  .accordion__item summary::before,
  .accordion__item summary::after { left: auto; right: 0; }
  .accordion__content { padding-left: 0; font-size: .875rem; font-weight: 700; } /* Figma Mobile: 631 Bold Italic 14/22 */

  /* Social – Titel → 3 kleine Karten nebeneinander → Button (Figma Mobile); Lead entfällt */
  .social__grid { grid-template-columns: 1fr; row-gap: 0; }
  .social__text { display: contents; } /* Kinder werden Grid-Items → Button lässt sich hinter die Karten sortieren */
  .social__lead { display: none; }
  .social .section__title { font-size: 1.75rem; margin-bottom: .4rem; } /* Figma Mobile: 28/34 */
  .social__sub { font-style: normal; font-weight: 700; margin: 0 0 2rem; } /* Figma Mobile: Bold Condensed, aufrecht */
  .social__ctas { order: 1; justify-self: start; margin-top: 2rem; } /* Buttons hinter die Karten (display:contents am Elternteil) */
  /* minmax(0,1fr): Karten dürfen unter ihre min-content-Breite schrumpfen */
  .social__posts { gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insta-card a { min-width: 0; }

  /* Partner (Figma Mobile: 18px-Titel, große Logos im Laufband) */
  .partner__title { font-size: 1.125rem; margin-bottom: 1.6rem; }
  .marquee img { height: 64px; } /* Figma Mobile: Logos ~80px hoch, Laufband bleibt */

  /* CTA2 wie Statement: Original-Icon (SVG-Asset) statt Wasserzeichen, große Outline-Gradient-Schaltfläche */
  .section.cta2 { padding: 6.5rem 1.5rem 7rem; }
  .cta2__mark { display: none; } /* Desktop-Wasserzeichen mobil aus */
  .cta2__mark-mobile { display: block; width: 80px; height: auto; margin: 0 auto 2.75rem; }
  .cta2__title { font-size: 2rem; line-height: 1.25; margin-bottom: 3.5rem; } /* Figma Mobile: 32/40 */
  .cta2 .button { width: 100%; max-width: 382px; font-size: 1.75rem; line-height: 1.3; padding: 1rem 1.25rem; border-radius: 20px; } /* Figma Mobile: 359×103, 28px */

  /* WhatsApp – zentriert, QR-Karte in Figma-Größe (137px) */
  .whatsapp__grid { text-align: center; }
  .whatsapp__title { font-size: clamp(1.9rem, 8vw, 2.25rem); line-height: 1.1; text-wrap: balance; } /* Figma Mobile: 36/100% */
  .whatsapp__lead { margin-inline: auto; }
  .whatsapp__cta { margin-top: 1.7rem; }
  .qr-card { margin-inline: auto; width: 140px; }

  /* FAQ – Titel linksbündig mit Eyebrow (Figma Mobile) */
  .faq__title { text-align: left; }

  /* Brand-Pfeil vor dem Footer: mobil in Figma-Größe (80×58) */
  .footer-arrow .arrow-mark { width: 80px; }

  /* Footer – gestapelt & zentriert, Figma-Mobile-Typo (Nav 18px Black aufrecht, Legal 13px) */
  .site-footer { padding: 2.5rem 0 3rem; }
  .site-footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 2.5rem; }
  .site-footer__nav, .site-footer__legal { align-items: center; }
  .site-footer__nav { gap: 1.2rem; }
  .site-footer__nav a { font-size: 1.125rem; font-weight: 900; letter-spacing: .055em; }
  .site-footer__legal { gap: .75rem; }
  .site-footer__legal a, .site-footer__consent { font-size: .8125rem; letter-spacing: .04em; }
  .site-footer__copy { font-size: 1rem; }
  .site-footer__center { gap: 2.25rem; }
  .site-footer__center .site-footer__divider { order: -1; width: 60px; height: 1px; }
}

/* ── Ab 700px: Hero als Banner + Inhalt darunter (Figma Mobile) ── */
@media (max-width: 700px) {
  .hero {
    min-height: 0; padding: 0 0 1.5rem;
    justify-content: flex-start;
  }
  .hero__media { position: relative; inset: auto; height: clamp(230px, 65vw, 300px); } /* Figma: 278px @430 */
  .hero__scrim { display: none; }
  .hero__content { padding: 0 1.25rem; }
  .hero__panel {
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none; border-radius: 0;
    padding: 1.25rem 0 0; gap: 1.25rem;
  }
  .hero__headline { font-size: 1.5rem; line-height: 1.25; } /* Figma Mobile: 24/30 */
  .hero__cta { width: 100%; text-align: center; margin-top: .5rem; }

  /* Countdown: Zahl + Kurz-Label nebeneinander (00 T / 00 Std …) – Figma: 28px/14px */
  .countdown { gap: .7rem; }
  .countdown__unit { flex-direction: row; align-items: baseline; gap: .3rem; }
  .countdown__num { font-size: 1.75rem; }
  .countdown__label { font-size: .875rem; color: var(--color-muted); }
  .countdown__label-long { display: none; }
  .countdown__label-short { display: inline; }
  .countdown__sep { height: 2.1rem; }
}

/* ── Ab 560px: Feintuning fürs Smartphone ── */
@media (max-width: 560px) {
  .highlights__overlay { padding: 1.1rem 1.15rem; }
}

/* ── Ab 380px: sehr kleine Geräte ── */
@media (max-width: 380px) {
  .section { padding: 2.5rem 1.15rem; }
  .site-header__inner { gap: 1rem; }
  .info-card__icon { width: 46px; height: 46px; }
  .countdown { gap: .5rem; }
  .countdown__num { font-size: 1.5rem; }
  .countdown__sep { height: 1.8rem; }
}