/* ==========================================================================
   TENSION WINTER — Edition-Theme. Lädt NACH /v2/shared/tension.css.
   Feld: Beton (Basis) · Creme (Typo + Akzent) · Schwarz (Bänder)
   Typo: Archivo Black (Display, brutal) · Lato (funktional)
   Quelle der Bildsprache: /assets/editions/winter/header.jpg (Liquid auf Beton)
   ========================================================================== */

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonts/archivo-black.woff2') format('woff2');
}

:root {
  --menu-accent: var(--cream); --menu-accent-op: 1;   /* Menü in der Editionsfarbe */
  --cream: #f6efa2;
  --cream-light: #fdf8c6;
  --concrete: #383838;
  --concrete-mid: #2A2A2A;
  --concrete-deep: #1A1A1A;
  --bg-deep: #121212;
  --ink: #121212;
  --text-warm: #F2F0E4;

  /* System-Akzent auf Creme umtönen — färbt Ticker, Ziffern, FAQ, Rail mit */
  --coral: #f6efa2;
  --coral-light: #fdf8c6;
  --edition-accent: #f6efa2;

  --font-display: 'Archivo Black', 'Lato', system-ui, sans-serif;
  --line: rgba(246,239,162,0.20);
}

/* Archivo Black bringt sein Gewicht mit — keine synthetische Fettung */
.statement, .sec__num, .specs__value, .day__num, .day__name, .day__date, .nw__name,
.linemarq__name, .ticker__item, .page-hero__title, .stub__name,
.camp-row__name, .camp-row__price, .modal__name, .modal__fact-value,
.footer__event-name, .hero__date, .hero__title, .faq__q,
.benefits-list li, .tier__people, .tier__price, .loc-card__name, .scroll-index a {
  font-weight: 400;
  font-synthesis: none;
}

::selection { background: var(--cream); color: var(--concrete-deep); }
html, body { background: var(--bg-deep); }

/* ============ Felder ============ */
.sec {
  background: var(--concrete);
  color: var(--cream);
  --line: rgba(246,239,162,0.20);
}
.sec + .sec, .sec + .ticker + .sec { border-top: 1px solid var(--line); }

.sec--deep, .sec--ink {
  background: var(--concrete-deep);
  color: var(--cream);
  --line: rgba(246,239,162,0.16);
}
.sec--cream, .sec--coral {
  background: var(--cream);
  color: var(--concrete-deep);
  --line: rgba(18,18,18,0.28);
}
.sec--cream .sec__num, .sec--coral .sec__num { color: var(--concrete-deep); opacity: 0.7; }
.sec--cream .sec__label, .sec--coral .sec__label,
.sec--cream .sec__meta, .sec--coral .sec__meta { opacity: 0.7; }
.sec--cream .statement, .sec--coral .statement { color: var(--concrete-deep); }
.sec--cream .sec__link, .sec--coral .sec__link { color: var(--concrete-deep); }
.sec--deep .statement, .sec--ink .statement { color: var(--cream); }
.sec__num { color: var(--cream); opacity: 0.7; }

/* Key-Visual als Feldhintergrund statt Sommer-Liquid */
.sec--liquid, .sec--spline {
  background: linear-gradient(rgba(26,26,26,0.72), rgba(26,26,26,0.88)),
              url('/assets/editions/winter/header.jpg') center / cover no-repeat;
  color: var(--cream);
}
.spline-bg { background: url('/assets/editions/winter/header.jpg') center / cover no-repeat; }
.spline-bg::after { background: rgba(26,26,26,0.72); }
.spline-veil { background: radial-gradient(circle 240px at center, rgba(26,26,26,0.05) 0px, rgba(26,26,26,0.72) 320px); }

/* ============ Typo: härter, enger, blockhaft ============ */
/* Archivo Black läuft deutlich breiter als Lato — Displaystufen entsprechend zurück */
.statement {
  font-size: clamp(2.25rem, 5vw, 4.75rem);
  letter-spacing: -0.025em;
  line-height: 0.95;   /* Archivo Black + Umlaute brauchen Luft in der Zeile */
}
.statement--md { font-size: clamp(2rem, 4.2vw, 4rem); }
.page-hero__title { letter-spacing: -0.03em; line-height: 0.92; }
.sec__label, .sec__meta, .specs__label { letter-spacing: 0.42em; }

/* ============ Buttons: 2px Kante, Creme-Flut ============ */
.sec__cta, .hero__btn, .tier-row__btn, .cta-bar__btn { border-width: 2px; }
.sec__cta, .hero__btn, .tier-row__btn, .cta-bar__btn { --btn-flood: var(--cream); }
.sec__cta:hover, .hero__btn:hover, .tier-row__btn:hover, .cta-bar__btn:hover { color: var(--concrete-deep); }
.sec--cream .sec__cta, .sec--coral .sec__cta { --btn-flood: var(--concrete-deep); }
.sec--cream .sec__cta:hover, .sec--coral .sec__cta:hover { color: var(--cream); }
.sec--deep .sec__cta, .sec--ink .sec__cta { color: var(--cream); }
.sec--deep .sec__cta, .sec--ink .sec__cta { --btn-flood: var(--cream); }
.sec--deep .sec__cta:hover, .sec--ink .sec__cta:hover { color: var(--concrete-deep); }

/* ============ Bänder ============ */
.ticker, .linemarq {
  background: var(--concrete-deep);
  color: var(--cream);
  border-top: 1px solid rgba(246,239,162,0.3);
  border-bottom: 1px solid rgba(246,239,162,0.3);
}
.ticketband { background: var(--cream); color: var(--concrete-deep); border-color: rgba(18,18,18,0.35); }
.ticketband .ticker__item, .ticketband .ticker__item::before { color: var(--concrete-deep); }
.ticketband:hover { background: var(--concrete-deep); }
.ticketband:hover .ticker__item, .ticketband:hover .ticker__item::before { color: var(--cream); }
.linemarq__name { color: var(--cream); }

/* ============ Tage: Betonblöcke statt Poster-Ziffern ============ */
/* Winter läuft über zwei Nächte — Raster entsprechend halbiert */
.daystats__grid { grid-template-columns: repeat(2, 1fr); }
.day {
  border-left: 1px solid var(--line);
  background: var(--concrete-deep);   /* deckend: steht auf dem Hintergrundbild */
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.day:first-child { border-left: 0; }
.day:hover { background: var(--cream); color: var(--concrete-deep); }
.day__num { color: var(--cream); letter-spacing: -0.06em; }
.day:hover .day__num { color: var(--concrete-deep); }
.day__times-row span:last-child { color: var(--cream); }
.day:hover .day__times-row span:last-child { color: var(--concrete-deep); }
.day:hover .day__times-row:first-child { border-top-color: rgba(18,18,18,0.28); }

/* ============ Namewall: Creme-Block-Invert ============ */
.nw__name { padding: 0.04em 0.16em; letter-spacing: -0.02em; }
.nw:hover .nw__name, .nw:focus-visible .nw__name { background: var(--cream); color: var(--concrete-deep); }
.nw__pic { filter: grayscale(1) contrast(1.15) brightness(0.85); mix-blend-mode: normal; }
.nw:hover .nw__pic { filter: grayscale(0) contrast(1); }

/* Lineup: Zusatzzeile unter der Namewall */
.lineup-more {
  display: flex; align-items: baseline; justify-content: center; gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.lineup-more__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: -0.01em; text-transform: uppercase; line-height: 1;
  opacity: 0.75;
}
.lineup-more__meta {
  font-size: 0.6875rem; letter-spacing: 0.4em; text-transform: uppercase; font-weight: 900;
  opacity: 0.55;
}

/* Die Creme-Flut fährt in 0.35s ein — die Textfarbe darf ihr nicht vorauseilen,
   sonst steht kurz dunkler Text auf dunklem Grund. Hin mit Verzögerung, zurück sofort. */
.camp-row { transition: color 0.18s var(--ease), transform 0.14s var(--ease); }
.camp-row:hover { transition: color 0.18s var(--ease) 0.17s, transform 0.14s var(--ease); color: var(--concrete-deep); }

/* Artists-Zeilen als Buttons: Systemoptik, aber echtes Klickziel */
.camp-row--btn {
  width: 100%;
  font-family: inherit; text-align: left; color: inherit;
  background: transparent;
  border: 0; border-top: 1px solid var(--line);
  cursor: pointer;
}
.camp-row--btn:focus-visible { outline: 2px solid var(--cream); outline-offset: -2px; }
.camp-row--btn .camp-row__hint { transition: opacity 0.35s var(--ease); }
.camp-row--btn:hover .camp-row__hint { opacity: 0.85; }

/* Presspic-Platzhalter, bis die echten Bilder da sind */
.presspic {
  width: 100%; height: 100%;
  background: #262626 url('/assets/editions/winter/header.jpg') center / cover no-repeat;
  display: flex; align-items: flex-end;
  padding: 1.25rem;
}
.presspic span {
  font-size: 0.625rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 900;
  color: var(--cream); opacity: 0.65;
}

/* Artists-Zeilen ohne Ziel: gleiche Optik, aber kein Klick-Signal.
   Ohne die Creme-Flut darf auch die Hover-Textfarbe nicht auf Ink kippen —
   sonst steht dunkler Text auf dunklem Grund. */
.camp-row--static { cursor: default; }
.camp-row--static::before { content: none; }
.camp-row--static:hover { color: inherit; }
.camp-row--more { opacity: 0.6; }
.camp-row__price { letter-spacing: 0.3em; font-size: 0.6875rem; font-family: var(--font-body); font-weight: 900; text-transform: uppercase; }

/* Headliner im Tagesblock */
.day__headliners { border-top-color: var(--line); letter-spacing: 0.02em; }
/* Artists fahren wie die Zeiten erst beim Hover ein; auf Touch sind sie immer sichtbar */
.day__headliners { opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.35s var(--ease), border-color 0.35s var(--ease); }
.day:hover .day__headliners, .day:focus-within .day__headliners { opacity: 1; transform: none; }
.day:hover .day__times { transition-delay: 0.06s; }
@media (hover: none) { .day__headliners { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .day__headliners { transition: none; } }
.day:hover .day__headliners { border-top-color: rgba(18,18,18,0.28); }

/* Lineup-Platzhalter, solange keine Namen bestätigt sind */
.tba {
  border: 2px solid var(--line);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem);
  text-align: center;
  margin-top: 3rem;
}
.tba__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 0.88; letter-spacing: -0.03em; text-transform: uppercase;
  color: var(--cream);
}
.tba__meta {
  margin-top: 1.25rem;
  font-size: 0.6875rem; letter-spacing: 0.4em; text-transform: uppercase; font-weight: 900;
  opacity: 0.6;
}

/* Sekundärlinks: das System färbt sie in Ink (für Papier gedacht). Auf
   Beton und dem Lineup-Feld wäre das dunkel auf dunkel — Creme ist Standard,
   nur die Creme-Sektion kippt auf Beton zurück. */
.sec__link { color: var(--cream); opacity: 0.78; }
.sec__link:hover { opacity: 1; }
.sec__meta { opacity: 0.7; }

/* ============ Specs / Location ============ */
.specs__label { color: var(--cream); opacity: 0.65; }
.sec--cream .specs__label, .sec--coral .specs__label { color: var(--concrete-deep); opacity: 0.7; }
.specs__value { letter-spacing: 0.01em; }

/* ============ Tickets ============
   Hover wie die Tagesblöcke auf der Winter-Seite: die Karte kippt der Maus
   nach (data-tilt, tension.js) und die Fläche blendet in die Gegenfarbe. */
.stub { border-width: 2px; }
@media (hover: none) { .stubs { perspective: 1000px; } }
.stub:nth-child(4n+1), .stub:nth-child(4n+2),
.stub:nth-child(4n+3), .stub:nth-child(4n+4) { transform: none; }
.stub--coral, .stub--deep { background: var(--cream); color: var(--concrete-deep); border-color: var(--concrete-deep); }
.stub--ink { background: var(--concrete-deep); color: var(--cream); border-color: var(--cream); }
.stub--paper { background: transparent; color: var(--cream); border-color: var(--cream); }
.stub { transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.14s var(--ease); }
.stub:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .stub:hover { box-shadow: none; }
  .stub:not([data-tilt]):hover { transform: none; }
  .stub--ink:hover, .stub--paper:hover { background: var(--cream); color: var(--concrete-deep); border-color: var(--cream); }
  .stub--coral:hover, .stub--deep:hover { background: var(--concrete-deep); color: var(--cream); border-color: var(--concrete-deep); }
}
@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none !important; }
}

/* ============ Newsletter ============
   Eigener Block vor dem Footer auf allen Winter-Seiten. Statement links,
   Satz und Button rechts, unten bündig. */
.newsletter__inner {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: end;
}
.newsletter__body .sec__lead { margin-bottom: 2rem; }
.newsletter__body .sec__cta { margin-top: 0; }
@media (max-width: 820px) { .newsletter__inner { grid-template-columns: 1fr; } }

/* ============ FAQ ============ */
.faq__q::after { color: var(--cream); }
.faq__q:hover { color: var(--cream-light); }
.faq__q:focus-visible { outline: 2px solid var(--cream); }
.faq__a a { color: var(--cream); }
.faq__a a:hover { color: var(--cream-light); }
.sec--cream .faq__q::after, .sec--coral .faq__q::after { color: var(--concrete-deep); }
.sec--cream .faq__a a, .sec--coral .faq__a a { color: var(--concrete-deep); }

/* ============ Chrome ============ */
/* Der Header ist Marken-Chrome, kein Teil des Editionsfeldes: überall die
   dunkle Leiste mit weisser Wortmarke. Nur die Kante beim Scrollen nimmt
   die Editionsfarbe auf. */
.header.scrolled { border-bottom-color: rgba(246,239,162,0.35); }
.footer { background: var(--bg-deep); }
.modal__panel { background: var(--concrete-mid); }
.modal__name { color: var(--cream); }
.modal__link { border-color: rgba(246,239,162,0.35); }
.modal__fact-value { color: var(--cream); }
.modal__badge--day { color: var(--cream); border-color: var(--cream); }
.modal__link:hover { border-color: var(--cream); color: var(--cream); }
.modal__close:hover { border-color: var(--cream); color: var(--cream); }
.scroll-index a.is-active { color: var(--cream); }
.scroll-index__label { color: var(--cream); }

/* ============ Beton-Kante: Rasterlinien am Sektionsrand ============ */
.sec--grid::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 25% 100%;
  opacity: 0.5;
}

/* ============ Mobile: zwei Tage passen nebeneinander ============ */
@media (max-width: 720px) {
  .daystats__grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    margin: 0; padding: 0; overflow: visible;
  }
  .day { flex: none; padding: 1.5rem 0.75rem; }
  .day__num { font-size: clamp(3.5rem, 18vw, 5rem); }
  .tba { padding: 2.5rem 1.25rem; }
}

/* ============ Touch: Winter-Hover ebenfalls entschärfen ============
   Die Regeln hier laden nach tension.css und müssen ihre eigene
   (hover: none)-Ausnahme mitbringen. */
@media (hover: none) {
  .day:hover { background: var(--concrete-deep); color: inherit; }
  .day:hover .day__num { color: var(--cream); }
  .day:hover .day__times-row span:last-child { color: var(--cream); }
  .camp-row--btn:hover { color: inherit; }
  .nw:hover .nw__name { background: none; color: inherit; }
  .stub--ink:hover { background: var(--concrete-deep); color: var(--cream); }
  .stub--paper:hover { background: transparent; color: var(--cream); }
  .stub--coral:hover, .stub--deep:hover { background: var(--cream); color: var(--concrete-deep); }
}

/* ============ Newsletter-Formular im Winter-Block ============
   Grundformen stehen in tension.css (.nl-*); hier nur, was der Creme-Block braucht. */
.newsletter .nl-check input { accent-color: var(--concrete-deep); }
button.sec__cta { font: inherit; background: none; cursor: pointer; align-self: flex-start; margin-top: 0.4rem; }
button.sec__cta[disabled] { opacity: 0.5; cursor: progress; }


/* ============ Lineup A–Z: ein Name pro Zeile ============ */
.namewall--list { flex-direction: column; flex-wrap: nowrap; gap: 0.35rem; }

/* ============ Lineup-Laufband unter dem Hero etwas schneller ============ */
.linemarq__track { animation-duration: 55s; }   /* vorher 70s */

/* ============ Tageskacheln: gleiche Zeilen in beiden Kacheln ============
   Subgrid: Tag, Datum, Monat, Acts und Zeiten stehen in FR und SA auf
   derselben Höhe, auch wenn ein Abend mehr Namen hat. */
@supports (grid-template-rows: subgrid) {
  .daystats__grid { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .day { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0.75rem; justify-items: center; align-content: start; }
  .day__headliners { align-self: start; }
}