/* ==========================================================================
   Variante 2: ein Bild in voller Breite, Glas-Navigation darüber,
   weiche Pinsel-Übergänge oben und unten. Ergänzt style.css.
   ========================================================================== */

.v2 {
  --nav-h: 160px;                      /* Höhe der Navigation auf Weiß (per JS gemessen) */
  --edge-h: clamp(28px, 3.6vw, 60px);  /* sanfter Pinsel-Übergang oben */
}

/* ---------- Navigation: auf Weiß über dem Bild (Stil der Startseite) ---------- */
.v2 .nav { padding-bottom: var(--space-5); }
/* Logo links, Menü mittig, Tickets rechts */
.v2 .brand { justify-self: start; display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.v2 .brand__word {
  display: flex; flex-direction: column;
  font-family: "Junge", Georgia, serif; font-weight: 400;
  font-size: calc(1.6rem + 2px); line-height: 0.95; letter-spacing: 0.02em;
  color: #000;
}
.v2 .nav__center { justify-self: center; }
/* Menüpunkt „Winter Gathering“: kleiner Mond und „Neu!“-Spotlight */
.v2 .menu__link { white-space: nowrap; }
.menu__moon { flex: none; color: var(--color-night); transform: rotate(-12deg); }
.menu__badge {
  position: relative;
  padding: 3px 8px 4px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: var(--color-ember);
  animation: badge-glow 2.4s var(--ease-out) infinite;
}
@keyframes badge-glow {
  0%   { box-shadow: 0 0 0 0 rgba(230, 118, 25, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(230, 118, 25, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 118, 25, 0); }
}
@media (prefers-reduced-motion: reduce) { .menu__badge { animation: none; } }

/* Winter Gathering beim Hover: Nachtblau, darin rieselt sanft Schnee.
   Weiße Punkte in verschiedenen Größen auf zwei Ebenen: große langsam,
   kleine etwas schneller. Die Animation läuft nur, solange man darüber ist. */
.menu__link--winter { position: relative; isolation: isolate; }
.menu__link--winter::before,
.menu__link--winter::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
  animation: snow-fall 7s linear infinite paused;
}
.menu__link--winter::before { /* Nachtblau + größere Punkte */
  background:
    radial-gradient(circle at 8px 6px,   rgba(255, 255, 255, 0.95) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 20px 33px, rgba(255, 255, 255, 0.9)  0 2px,   transparent 2.6px),
    var(--color-night);
  background-size: 44px 40px, 44px 40px, auto;
  background-repeat: repeat, repeat, no-repeat;
}
.menu__link--winter::after { /* kleine Punkte, etwas schneller */
  background:
    radial-gradient(circle at 5px 4px,   rgba(255, 255, 255, 0.7)  0 0.7px, transparent 1.2px),
    radial-gradient(circle at 21px 17px, rgba(255, 255, 255, 0.55) 0 0.9px, transparent 1.4px);
  background-size: 34px 28px;
  animation-name: snow-fall-small; animation-duration: 4.6s;
}
.menu__link--winter:is(:hover, :focus-visible) { background: transparent; color: #fff; }
.menu__link--winter:is(:hover, :focus-visible)::before,
.menu__link--winter:is(:hover, :focus-visible)::after { opacity: 1; animation-play-state: running; }
.menu__link--winter .menu__moon { transition: color 0.5s var(--ease-out); }
.menu__link--winter:is(:hover, :focus-visible) .menu__moon { color: var(--color-moon); }
/* Eine Kachelhöhe pro Durchlauf, dadurch nahtlos; die Seitwärtsbewegung schaukelt sacht */
@keyframes snow-fall {
  0%   { background-position: 0 -40px, 0 -40px, 0 0; }
  50%  { background-position: 2px -20px, -1.5px -20px, 0 0; }
  100% { background-position: 0 0, 0 0, 0 0; }
}
@keyframes snow-fall-small {
  0%   { background-position: 0 -28px; }
  50%  { background-position: -1.5px -14px; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .menu__link--winter::before, .menu__link--winter::after { animation: none; }
}
/* Handy-Menü: über die volle Breite, unten mit Pinselkante wie die Bühne, Tickets-Button darin */
.menu__cta, .menu__edge { display: none; }
/* schmale Desktop-Breiten: Menü etwas kompakter, damit es nicht in den Schriftzug läuft */
@media (min-width: 961px) and (max-width: 1180px) {
  .v2 .nav:not(.legal-nav) { grid-template-columns: auto 1fr auto; column-gap: var(--space-4); } /* Menü mittig im freien Platz zwischen Logo und Tickets */
  .v2 .menu__link { padding-inline: var(--space-3); }
}
@media (max-width: 960px) {
  .v2 .nav__left.nav__center { position: static; }
  /* Tickets stehen jetzt im aufgeklappten Menü: oben rechts weg, Menü-Button rückt an ihre Stelle */
  .v2 .nav:not(.legal-nav) .nav__right { display: none; }
  .v2 .nav:not(.legal-nav) .nav__center { grid-column: 3; justify-self: end; }
  .v2 .nav__center .menu {
    top: 100%; left: 0; right: 0; width: auto; min-width: 0; gap: var(--space-1);
    padding: var(--space-2) var(--gutter) var(--space-6);
    border-radius: 0; box-shadow: none; background: var(--page-bg);
  }
  .v2 .menu__link { height: 52px; padding-inline: var(--space-4); font-size: 1.125rem; }
  .v2 .menu__cta { display: inline-flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); padding-left: var(--space-8); font-size: var(--text-base); }
  .menu__edge { display: block; position: absolute; top: calc(100% - 1px); left: 0; width: 100%; height: var(--edge-h); pointer-events: none; }
  .menu__edge rect, .menu__edge g { fill: var(--page-bg); stroke: var(--page-bg); }
}
.v2 .brand__logo { box-shadow: none; }

/* ---------- Bühne: ein Bild, 100 % breit, fast 100 % hoch ---------- */
.stage {
  position: relative; isolation: isolate;
  width: 100%;
  min-height: max(620px, calc(100svh - var(--nav-h))); /* wächst mit, wenn der Inhalt mehr Platz braucht */
  display: flex; align-items: center; /* Inhalt mit gleichem Abstand oben und unten */
  color: #fff; background: var(--color-ink);
  overflow: hidden;
}
.stage__edge { position: absolute; z-index: 1; top: -1px; left: 0; width: 100%; height: var(--edge-h); pointer-events: none; }
.stage__edge--bottom { top: auto; bottom: -1px; transform: scaleY(-1); }
.stage__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(30, 27, 22, 0.7) 0%, rgba(30, 27, 22, 0.25) 50%, rgba(30, 27, 22, 0) 75%),
    linear-gradient(rgba(30, 27, 22, 0.3), rgba(30, 27, 22, 0.3));
}

.stage__inner {
  width: 100%; max-width: var(--page-max); margin-inline: auto;
  display: flex; justify-content: center;
  padding: calc(var(--edge-h) + var(--space-10)) clamp(24px, 4vw, 64px); /* oben und unten gleich */
}

.stage__main { max-width: 920px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.stage__main .tile__actions { justify-content: center; }
.stage__title {
  font-size: clamp(calc(2.6rem - 3px), calc(5.4vw - 3px), calc(5.6rem - 3px)); font-weight: 700;
  line-height: 0.92; letter-spacing: -0.04em;
  max-width: 16ch; text-wrap: balance; margin-bottom: var(--space-6);
}
.stage__intro {
  font-size: calc(var(--text-base) + 4px); line-height: 1.5;
  max-width: 44ch; color: rgba(255, 255, 255, 0.92); margin-bottom: var(--space-8);
}
/* Termin über der Headline, mit Textmarker-Pinselstrich dahinter */
.stage__date { margin-bottom: var(--space-5); }
.stage__date span {
  position: relative; isolation: isolate; display: inline-block;
  padding: 6px 20px 7px 16px;
  font-size: calc(1.25rem + 2px); font-weight: 700; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums; color: var(--color-ink);
}
@media (max-width: 560px) {
  .stage__date span { font-size: 16.5px; letter-spacing: 0; padding: 5px 14px 6px 12px; white-space: nowrap; }
}
.stage__date span::before {
  content: ""; position: absolute; inset: -2px -6px -3px -8px; z-index: -1;
  background: url("../img/textmarker.svg?v=2") center / 100% 100% no-repeat;
  transform: rotate(-1.2deg);
}

/* Winter-Unterseite: Bild statt Video, Pre-Headline darf umbrechen */
.stage--winter .stage__media { object-position: 50% 50%; }
.stage--winter .stage__title { text-transform: uppercase; max-width: 12ch; }
.stage--winter .stage__intro { text-wrap: balance; }
.stage__snow { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } /* kurzer Schneeschauer beim Laden */

/* Winter-Unterseite „Was dich erwartet“: Fließtext links, Ablauf als Zeitstrahl rechts */
.wg-day { padding: clamp(56px, 8vw, 120px) var(--gutter) clamp(24px, 4vw, 56px); }
.wg-day__inner {
  max-width: var(--box-max); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start;
}
.wg-day__title { margin-bottom: clamp(24px, 3vw, 40px); }
.wg-day__text p { font-size: 1.0625rem; line-height: 1.7; }
.wg-day__text p + p { margin-top: var(--space-4); }
.wg-day__text .wg-day__lead { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.45; font-weight: 500; }
.wg-day__text .wg-day__sign { margin-top: var(--space-6); font-family: var(--font-accent); font-size: calc(1.5rem - 5px); font-style: italic; color: #D06A12; }
.wg-day__text .wg-day__signers { margin-top: var(--space-1); color: var(--color-ink-2); } /* Größe wie der Fließtext */

.wg-flow {
  position: relative; padding: clamp(28px, 3vw, 40px);
  border-radius: var(--radius-tile); background: rgba(234, 150, 56, 0.12);
}
.wg-flow__title { margin: 0 0 var(--space-6); font-family: var(--font-accent); font-weight: 400; font-size: 1.375rem; letter-spacing: 0.02em; }
.wg-flow__list { list-style: none; margin: 0; padding: 0; }
.wg-step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); padding-bottom: var(--space-6); }
.wg-step:last-child { padding-bottom: 0; }
/* Verbindungslinie zwischen den Stationen, mit runden Enden */
.wg-step:not(:last-child)::before {
  content: ""; position: absolute; left: 23px; top: 52px; bottom: 4px; width: 2px; border-radius: 2px;
  background: rgba(30, 27, 22, 0.18);
}
.wg-step--fire::before { background: repeating-linear-gradient(to bottom, rgba(30, 27, 22, 0.25) 0 4px, transparent 4px 9px) !important; } /* Festessen ist optional: gestrichelt */
.wg-step__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--page-bg); color: var(--color-ink);
}
.wg-step--fire .wg-step__icon { background: #FBBB48; }
.wg-step--optional .wg-step__icon { background: transparent; border: 2px dashed rgba(30, 27, 22, 0.3); }
.wg-step__body { padding-top: 4px; }
.wg-step__title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.wg-step__tag {
  display: inline-block; margin-left: var(--space-2); padding: 2px 8px; vertical-align: 2px;
  border-radius: var(--radius-pill); background: rgba(255, 252, 249, 0.8);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-2);
}
.wg-step__text { margin-top: 2px; font-size: 0.9375rem; line-height: 1.5; color: var(--color-ink-2); }
/* Zeitplan: als „mystisches Geheimnis“ verschwommen, mit Schleier und Funkeln darüber */
.wg-plan { padding: clamp(56px, 8vw, 112px) var(--gutter) clamp(24px, 4vw, 56px); }
.wg-plan__inner { max-width: var(--box-max); margin-inline: auto; text-align: center; }
.wg-plan__title { margin-bottom: var(--space-5); }
.wg-plan__hint { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-2); max-width: 60ch; margin-inline: auto; font-size: 1.0625rem; line-height: 1.55; text-align: left; }
.wg-plan__hint svg { flex: none; margin-top: 3px; color: var(--color-ember); }
/* Karte im Nachtbild: sobald assets/img/zeitplan-winter.jpg existiert, hier url("../img/zeitplan-winter.jpg") center / cover ergänzen */
.wg-plan__card {
  position: relative; overflow: hidden; margin-top: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-tile); color: #F3EFE8;
  background: #1D2226;
}
.wg-plan__sheet {
  padding: clamp(28px, 4vw, 56px) clamp(16px, 5vw, 72px) clamp(32px, 5vw, 64px);
  filter: blur(6px); user-select: none; pointer-events: none;
}
.wg-plan__sheet-title { margin: 0 0 var(--space-6); font-family: var(--font-accent); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; }
.wg-plan__grid {
  display: grid; grid-template-columns: 0.8fr repeat(4, 1fr);
  border: 1.5px solid rgba(243, 239, 232, 0.55); background: rgba(22, 30, 30, 0.55);
}
.wg-plan__cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 92px; padding: var(--space-3) var(--space-2);
  border: 0.75px solid rgba(243, 239, 232, 0.45); font-size: 0.9375rem; line-height: 1.3; letter-spacing: 0.02em;
}
.wg-plan__cell--head { min-height: 72px; font-size: 1.0625rem; }
.wg-plan__cell--time { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.wg-plan__sub { font-size: 0.75rem; opacity: 0.85; }
.wg-plan__host { margin-top: 4px; font-family: var(--font-accent); font-style: italic; color: #E9A15A; }
.wg-plan__veil {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  background: radial-gradient(ellipse at center, rgba(20, 24, 28, 0.55) 0%, rgba(20, 24, 28, 0.15) 60%, rgba(20, 24, 28, 0) 85%);
}
.wg-plan__spark { color: #F3D9A8; animation: wg-twinkle 2.8s var(--ease-out) infinite; }
.wg-plan__secret { margin: 0; font-family: var(--font-accent); font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: 0.04em; color: #fff; }
@keyframes wg-twinkle {
  0%, 100% { transform: scale(0.85) rotate(0deg); opacity: 0.7; }
  50%      { transform: scale(1.1) rotate(45deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .wg-plan__spark { animation: none; } }
@media (max-width: 640px) {
  .wg-plan__cell { min-height: 72px; padding: var(--space-2) 4px; font-size: 0.6875rem; }
  .wg-plan__cell--head, .wg-plan__cell--time { font-size: 0.75rem; }
  .wg-plan__sub { display: none; }
}
.wg-plan__cta { margin-top: clamp(40px, 5vw, 64px); }

/* Winter-Seite: alle Orange-Akzente in dunklem Mitternachtsblau */
.winter-page .wg-flow { background: var(--color-night); color: var(--color-moon); }
.winter-page .wg-step__icon { background: var(--color-night-2); color: var(--color-moon); }
.winter-page .wg-step--fire .wg-step__icon { background: var(--color-moon); color: var(--color-night); }
.winter-page .wg-step--optional .wg-step__icon { background: transparent; border-color: rgba(247, 241, 220, 0.4); }
.winter-page .wg-step:not(:last-child)::before { background: rgba(247, 241, 220, 0.25); }
.winter-page .wg-step--fire::before { background: repeating-linear-gradient(to bottom, rgba(247, 241, 220, 0.35) 0 4px, transparent 4px 9px) !important; }
.winter-page .wg-step__text { color: rgba(247, 241, 220, 0.72); }
.winter-page .wg-step__tag { background: var(--color-night-2); color: var(--color-moon); }
.winter-page .wg-day__text .wg-day__sign { color: var(--color-night); }
.winter-page .wg-plan__hint svg { color: var(--color-night); }
.winter-page .wg-plan__host { color: #B9C6E4; }
.winter-page .footer__heart { color: var(--color-night); }
.winter-page :is(.footer__credit a, .footer__links a:hover) { text-decoration-color: var(--color-night); }
@media (min-width: 901px) { .wg-flow { position: sticky; top: var(--space-6); } } /* Ablauf bleibt beim Lesen im Blick */
@media (max-width: 900px) { .wg-day__inner { grid-template-columns: minmax(0, 1fr); } }
.stage__pre span { padding-inline: 28px 32px; font-weight: 400; line-height: 1.3; } /* breit in einer Zeile, Strich wächst mit; bricht erst um, wenn der Platz fehlt */
@media (max-width: 560px) { .stage__pre span { white-space: normal; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .stage { height: auto; min-height: calc(100svh - var(--nav-h)); }
}
@media (max-width: 560px) {
  .v2 { --nav-h: 140px; }
  .v2 .brand { --logo: 46px; gap: var(--space-2); }
  .v2 .brand__word { font-size: calc(1.05rem + 2px); letter-spacing: 0; }
  /* Menü-Button nur als Icon, damit der Schriftzug Platz hat */
  .v2 .menu-toggle { width: var(--btn-h); padding: 0; justify-content: center; }
  .v2 .menu-toggle [data-menu-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stage__inner { padding-inline: var(--space-5); }
}

/* ==========================================================================
   Popup „Winter Soul Gathering“: Es wird Nacht, der Mond geht auf.
   ========================================================================== */
.night {
  --night-bg: var(--color-night); /* Nachtblau, voll deckend */
  --night-inset: 10px;   /* Abstand zum Fensterrand */
  --close-size: 40px;
  --close-gap: 20px;     /* Abstand des X zur Popup-Ecke */
  /* Ecke läuft parallel zur Rundung des X: Radius des X + sein Abstand zur Ecke */
  --night-radius: calc(var(--close-size) / 2 + var(--close-gap));
  position: fixed; inset: var(--night-inset);
  width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  border-radius: var(--night-radius);
  clip-path: inset(0 round var(--night-radius)); /* schneidet auch Bild, Sterne und Schleier rund ab */
  color: #fff; background: var(--night-bg); /* Endzustand; die Animation blendet von transparent ein */
  overflow-y: auto; overscroll-behavior: contain;
}
.night::backdrop { background: rgba(15, 29, 58, 0.35); }
.night[open] { animation: night-fall 1.8s var(--ease-out) both; }
.night.is-closing { background-color: var(--night-bg); animation: night-lift .6s var(--ease-out) both; }
html.night-open { overflow: hidden; }

@keyframes night-fall {
  from { background-color: rgba(15, 29, 58, 0); }
  to   { background-color: var(--night-bg); }
}
@keyframes night-lift { to { opacity: 0; } }

/* Sterne */
.night__sky { position: fixed; inset: 0; pointer-events: none; }
.star {
  position: absolute; left: var(--x); top: var(--y);
  width: 3px; height: 3px; border-radius: 50%; background: var(--color-moon);
  opacity: 0; animation: star-in 1.2s ease-out var(--d) forwards, twinkle 4s ease-in-out calc(var(--d) + 1.2s) infinite;
}
@keyframes star-in { to { opacity: .8; } }
@keyframes twinkle { 50% { opacity: .35; } }

/* Schließen */
.night__close {
  position: fixed; z-index: 2;
  top: calc(var(--night-inset) + var(--close-gap)); right: calc(var(--night-inset) + var(--close-gap));
  display: grid; place-items: center; width: var(--close-size); height: var(--close-size);
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: background-color var(--dur-base) var(--ease-out);
}
.night__close:hover { background: rgba(255, 255, 255, 0.24); }
.night__close:focus-visible { outline: 2px solid var(--color-moon); outline-offset: 3px; }

/* Inhalt */
.night__content {
  position: relative; z-index: 1; isolation: isolate;
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: clamp(48px, 10vh, 120px) var(--gutter) var(--space-16); text-align: center;
}

/* Mond */
.moon { position: relative; width: 96px; height: 96px; margin-bottom: var(--space-5);
  animation: moon-rise 2.4s cubic-bezier(.16,1,.3,1) .7s both; }
.moon__svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.moon__glow {
  position: absolute; inset: -70%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 241, 220, 0.32), rgba(247, 241, 220, 0.08) 55%, transparent);
  opacity: 0; animation: moon-glow 2.6s ease-out 2s forwards;
}
@keyframes moon-rise { from { transform: translateY(140px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes moon-glow { to { opacity: 1; } }

.night__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(calc(2.2rem - 4px), calc(5.6vw - 4px), calc(4.6rem - 4px)); line-height: 1.02;
  letter-spacing: 0.04em; text-transform: uppercase; text-wrap: balance;
  margin-bottom: var(--space-6);
}
.night__date {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: 20px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-moon); margin-bottom: var(--space-5); text-wrap: balance;
}
.night__date time { font-weight: var(--weight-semi); }
.night__spark { flex: none; width: 14px; height: 14px; opacity: .8; }

/* Bild als Hintergrund, läuft nach oben ins Nachtblau aus */
.night__bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 60%;
  pointer-events: none;
}
.night__content::before { /* Nachtblau über dem Bild, damit der Text lesbar bleibt */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(15, 29, 58, 0.65), rgba(15, 29, 58, 0) 75%),
    rgba(15, 29, 58, 0.58);
}
.night__text { max-width: 52ch; color: rgba(255, 255, 255, 0.9); }
.night__cta { margin-top: var(--space-8); }
.btn--moon { background: var(--color-moon); color: var(--color-night); }
.btn--moon:hover { background: #fff; }

.night[open] .night__date  { animation: rise-in 1s var(--ease-out) 2.4s both; }
.night[open] .night__title { animation: rise-in 1s var(--ease-out) 2.7s both; }
.night[open] .night__text  { animation: rise-in 1s var(--ease-out) 3.1s both; }
.night[open] .night__cta   { animation: rise-in 1s var(--ease-out) 3.4s both; }
.night[open] .night__bg    { animation: bg-in 2.4s ease-out 2.2s both; }
@keyframes bg-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }

@media (max-width: 560px) {
  .night__date { font-size: 16px; letter-spacing: 0.1em; gap: var(--space-2); }
  .night__cta { white-space: normal; height: auto; min-height: var(--btn-h-lg); padding-block: var(--space-3); text-align: center; line-height: 1.25; }
  .moon { width: 76px; height: 76px; margin-bottom: var(--space-5); }
  .night { --close-gap: 12px; } /* Radius passt sich mit an */
}
@media (prefers-reduced-motion: reduce) {
  .night[open] { background-color: var(--night-bg); }
  .star { opacity: .8; }
  .moon__glow { opacity: 1; }
}

/* ==========================================================================
   Über das Festival: Überschrift, Fotos im Fächer vor einer Welle, Text.
   ========================================================================== */
.v2 {
  --page-bg: #FFFCF9;      /* Hintergrund der Seite */
  --about-bg: var(--page-bg);
  --box-max: 1200px;       /* ab der Sektion unter dem Hero: schmaler, „boxed“ */
  background: var(--page-bg);
}
.stage__edge rect, .stage__edge g { fill: var(--page-bg); stroke: var(--page-bg); }
.stage__edge--bottom rect, .stage__edge--bottom g { fill: var(--about-bg); stroke: var(--about-bg); }

.about {
  position: relative; overflow: hidden; background: var(--about-bg);
  padding: clamp(48px, 7vw, 112px) var(--gutter) clamp(72px, 10vw, 160px);
}
.about__inner { max-width: var(--box-max); margin-inline: auto; text-align: center; }

/* Überschrift: „Über das“ klein, „SOUL Festival“ groß */
.about__title, .section-title {
  text-transform: uppercase; hyphens: manual; /* lange Wörter brechen nur an gesetzten ­-Stellen */
  font-size: clamp(calc(2.2rem + 10px), calc(4.4vw + 10px), calc(4rem + 10px)); font-weight: 700;
  line-height: 0.95; letter-spacing: -0.03em;
  margin: 0 0 clamp(40px, 5vw, 72px);
}
.about__kicker, .section-kicker {
  display: block; margin-bottom: var(--space-3);
  font-size: calc(1.1875rem + 4px); font-weight: var(--weight-medium);
  line-height: 1.4; letter-spacing: 0.04em; color: #000;
}

/* Welle: über die ganze Fensterbreite, blasses Orange, wechselnde Stärke */
.about__stage { position: relative; }
.about__wave {
  position: absolute; z-index: 0; left: 50%; top: 50%;
  width: 100vw; height: 135%; transform: translate(-50%, -50%);
  fill: rgba(234, 150, 56, 0.26); pointer-events: none;
}

/* Drei Fotos im Fächer: Mitte gerade und vorn, außen tiefer und gedreht */
.fan { position: relative; z-index: 1; aspect-ratio: 1200 / 440; }
.fan__card {
  --x: 0%; --y: 0%; --r: 0deg;
  position: absolute; left: 38%; top: 0; width: 24%; margin: 0;
  padding: clamp(5px, 0.8vw, 11px); background: #fff; border-radius: 4px;
  box-shadow: 0 22px 40px -18px rgba(80, 40, 10, 0.4), 0 2px 6px rgba(80, 40, 10, 0.08);
  transform: translate(var(--x), var(--y)) rotate(var(--r));
}
.fan__card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.fan__card--1 { --x: -79%; --y: 7%; --r: -8deg; z-index: 1; } /* --x in Kartenbreiten, damit nur transform animiert */
.fan__card--2 { z-index: 2; }
.fan__card--3 { --x: 79%;  --y: 7%; --r: 8deg;  z-index: 1; }

.about__copy {
  position: relative; z-index: 1;
  max-width: 62ch; margin: clamp(40px, 5vw, 80px) auto 0;
  font-size: 1.1875rem; line-height: 1.75; color: var(--color-ink);
  text-align: justify; hyphens: auto; /* Blocksatz, Trennung hält die Wortabstände ruhig */
}
.about__copy p + p { margin-top: 1.1em; }
.about__closing { font-weight: 600; }

/* Handy: Fotos größer, enger übereinander */
@media (max-width: 640px) {
  .fan { aspect-ratio: 1 / 0.56; }
  .fan__card { width: 33.6%; left: 33.2%; }
  .fan__card--1 { --x: -62%; --y: 10%; --r: -9deg; }
  .fan__card--3 { --x: 62%;  --y: 10%; --r: 9deg; }
}
@media (max-width: 640px) {
  .about__copy { font-size: 1.0625rem; }
  .about__kicker, .section-kicker { font-size: calc(1.0625rem + 4px); }
}

/* ==========================================================================
   Programm: Tabs für die drei Tage, darunter die Zeitblöcke.
   Rituale und Pausen als durchgehende Bänder, Workshops als Karten.
   ========================================================================== */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.program {
  --program-bg: #FBBB48;
  --hill-h: clamp(48px, 7vw, 120px);
  /* Papierkorn: feine, warme Sprenkel wie auf bedrucktem Papier */
  --program-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.24 0 0 0 0 0.04 0 0 0 0.8 -0.36'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: relative; background: var(--program-bg);
  margin-top: var(--hill-h);
  padding: clamp(24px, 4vw, 56px) var(--gutter) clamp(72px, 10vw, 140px);
}
/* Oberkante als sanfter, runder Hügel statt gerader Kante */
.program::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--hill-h);
  background: var(--program-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V42C260 14 620 0 900 0c300 0 540 14 700 60v40z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V42C260 14 620 0 900 0c300 0 540 14 700 60v40z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* Was dich erwartet: Bild links, rechts Titel und helle Karte */
.offers {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px);
  margin: clamp(64px, 8vw, 112px) 0 clamp(40px, 5vw, 64px);
}
.offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); }
.offer__img {
  display: block; width: 100%; height: 100%; min-height: 220px;
  object-fit: cover; border-radius: 22px;
}
.offer__body { display: flex; flex-direction: column; gap: var(--space-4); }
.offer__title { font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.offer__card {
  flex: 1; display: flex; align-items: center;
  padding: var(--space-5) var(--space-6); border-radius: 22px;
  background: rgba(255, 252, 249, 0.72); box-shadow: 0 0 0 1px rgba(30, 27, 22, 0.06);
  font-size: 1.0625rem; line-height: 1.6;
}
.program__outro { max-width: 78ch; font-size: 1.125rem; line-height: 1.7; }

@media (max-width: 960px) { .offers { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .offer { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .offer__body { gap: var(--space-3); }
  .offer__title { font-size: 1.3rem; }
  .offer__img { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .offer__card { padding: var(--space-4) var(--space-5); }
  .program__outro { font-size: 1.0625rem; }
}

/* Papierkorn als eine Schicht über Hügel und Fläche, damit am Übergang keine Naht entsteht */
.program::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 0; right: 0; top: calc(var(--hill-h) * -1); bottom: 0;
  background: var(--program-grain) 0 0 / 220px 220px;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V42C260 14 620 0 900 0c300 0 540 14 700 60v40z'/%3E%3C/svg%3E") top / 100% var(--hill-h) no-repeat,
    linear-gradient(#000, #000) bottom / 100% calc(100% - var(--hill-h) + 6px) no-repeat;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V42C260 14 620 0 900 0c300 0 540 14 700 60v40z'/%3E%3C/svg%3E") top / 100% var(--hill-h) no-repeat,
    linear-gradient(#000, #000) bottom / 100% calc(100% - var(--hill-h) + 6px) no-repeat;
}
.program__inner { position: relative; z-index: 1; }

/* Unten: Pinselkante in den Seitenhintergrund (wie am Hero) */
.program { padding-bottom: calc(clamp(72px, 10vw, 140px) + var(--edge-h)); }
.program__edge { z-index: 1; } /* über dem Korn, damit die Kante sauber hell bleibt */

/* Hinweis: Programm 2027 steht noch nicht */
.program__info {
  display: flex; align-items: flex-start; gap: var(--space-3);
  max-width: 560px; margin-bottom: var(--space-8);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-card);
  background: rgba(255, 252, 249, 0.72); box-shadow: 0 0 0 1px rgba(30, 27, 22, 0.06);
}
.program__info svg { flex: none; margin-top: 2px; color: var(--color-ember); }
.program__info p { font-size: var(--text-sm); line-height: 1.5; }
.program__info strong { display: block; font-size: 1rem; }
.program__inner { max-width: var(--box-max); margin-inline: auto; }
.program .section-title { margin-bottom: clamp(28px, 3.5vw, 44px); }

.program__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.program__tabs {
  display: inline-flex; gap: var(--space-1); padding: var(--space-1);
  border-radius: var(--radius-pill); background: rgba(255, 252, 249, 0.55);
}
.program__tab {
  height: 44px; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--color-ink-2); background: transparent; cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.program__tab span { font-weight: 700; color: var(--color-ink); transition: color var(--dur-base) var(--ease-out); }
.program__tab:hover { background: rgba(255, 252, 249, 0.7); }
.program__tab[aria-selected="true"] { background: var(--color-ink); color: rgba(255, 252, 249, 0.75); }
.program__tab[aria-selected="true"] span { color: var(--page-bg); }
.program__tab:focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px; }
.program__note { font-size: var(--text-sm); color: rgba(30, 27, 22, 0.75); }
.program__star, .session__star { color: var(--color-ember); font-weight: 700; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.band, .slot { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; }
.band { padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); }
.band--ritual { background: var(--color-ember); color: #fff; }
.band--pause  { background: rgba(255, 252, 249, 0.45); }
.band__time { font-size: var(--text-sm); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.band__label { font-size: 1.125rem; font-weight: 700; }
.band--pause .band__label { font-weight: var(--weight-medium); }

.slot { align-items: start; padding: var(--space-3) 0 var(--space-3) var(--space-5); }
.slot__time { padding-top: var(--space-3); font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.slot__time span { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: rgba(30, 27, 22, 0.7); }
.slot__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--space-3);
}
.session {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--space-4); border-radius: var(--radius-card);
  background: #fff; box-shadow: 0 0 0 1px rgba(30, 27, 22, 0.06), 0 6px 16px -12px rgba(80, 40, 10, 0.25);
}
.session__place {
  display: flex; justify-content: space-between; gap: var(--space-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #A85F17;
}
.session__until { letter-spacing: 0.02em; text-transform: none; font-weight: var(--weight-medium); color: var(--color-ink-2); }
.session__title { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.session__host { font-size: var(--text-sm); color: var(--color-ink-2); }

/* Tageswechsel: neuer Tag blendet weich ein */
.program__day.is-entering { animation: day-in 0.8s var(--ease-reveal) both; }
@keyframes day-in { from { opacity: 0; translate: 0 8px; } }

@media (max-width: 700px) {
  .program__tabs { display: flex; width: 100%; }
  .program__tab { flex: 1; height: auto; padding: var(--space-2) var(--space-2); display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
  .band { grid-template-columns: 96px minmax(0, 1fr); padding: var(--space-3) var(--space-4); }
  .slot { grid-template-columns: minmax(0, 1fr); padding: var(--space-3) 0; }
  .slot__time { padding: 0 0 var(--space-2) var(--space-4); }
  .slot__time span { display: inline; margin-left: 2px; }
  .slot__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--space-2); }
  .session { padding: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { .program__day.is-entering { animation: none; } }

/* ==========================================================================
   Tickets
   ========================================================================== */
.tickets { padding: clamp(48px, 7vw, 112px) var(--gutter) clamp(72px, 10vw, 140px); }
.tickets__inner { max-width: var(--box-max); margin-inline: auto; }
.tickets .section-title { margin-bottom: clamp(32px, 4vw, 56px); }

.ticket-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.ticket {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--space-4) var(--space-4) var(--space-6);
  border-radius: var(--radius-tile); background: rgba(234, 150, 56, 0.14);
}
.ticket--featured { background: #FBBB48; } /* Wochenende: hervorgehoben in der Programm-Farbe */
.ticket__img { width: 100%; aspect-ratio: 16 / 10; margin-bottom: var(--space-6); border-radius: calc(var(--radius-tile) - var(--space-4) + 4px); background: #fff; }
.ticket__img { display: none; } /* weiße Bild-Platzhalter vorerst ausgeblendet – entfernen, sobald echte Bilder drin sind */
.ticket__title { font-size: 1.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.ticket__time { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: rgba(30, 27, 22, 0.7); font-variant-numeric: tabular-nums; }
.ticket__extra { margin-top: var(--space-3); padding: 4px 12px; border-radius: var(--radius-pill); background: rgba(255, 252, 249, 0.7); font-size: var(--text-sm); font-weight: 700; }
.ticket__text { margin: var(--space-5) 0 var(--space-6); padding-inline: var(--space-2); font-size: 1rem; line-height: 1.6; }
.ticket__price { margin-top: auto; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
.ticket__cta { margin-top: var(--space-4); width: 100%; padding-inline: var(--space-5); }

.tickets__family {
  max-width: 82ch; margin-top: clamp(40px, 5vw, 64px);
  font-size: 1.0625rem; line-height: 1.7;
}
.tickets__hint { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-5); }
.tickets__hint svg { flex: none; margin-top: 4px; color: var(--color-ember); }
.tickets__hint a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 640px) { .tickets__hint, .tickets__small { display: block; text-align: center; } .tickets__hint svg { display: block; margin: 0 auto var(--space-2); } } /* Symbol über dem Satz, Satz bleibt ein Fließtext */
.tickets__small { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-2); }

@media (max-width: 1100px) { .ticket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .ticket-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Stimmen: Foto über die ganze Breite, hell überblendet, Pinselkanten
   oben und unten wie am Hero, darauf drei Zitate.
   ========================================================================== */
.voices {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--edge-h) + clamp(56px, 7vw, 104px)) var(--gutter);
}
.voices__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.voices::after { /* helle Überblendung, damit die Zitate ruhig lesbar sind */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255, 252, 249, 0.58);
}
.voices .stage__edge { z-index: 0; }
.voices__inner { position: relative; z-index: 1; max-width: var(--box-max); margin-inline: auto; }
.voices__title {
  text-align: center; margin-bottom: clamp(32px, 4vw, 56px);
  font-size: clamp(2.2rem, 4.4vw, 4rem); /* 10 px kleiner als die übrigen Überschriften */
}
.voices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); align-items: stretch; }
.voice {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-5); /* Anführungszeichen oben, in allen Karten auf gleicher Höhe */
  margin: 0; padding: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
  border-radius: var(--radius-tile); background: rgba(255, 252, 249, 0.9);
  box-shadow: 0 18px 40px -28px rgba(80, 40, 10, 0.35);
  text-align: center;
}
.voice__mark { color: var(--color-ember); }
.voice blockquote { margin: 0; font-size: 1.0625rem; font-weight: 300; line-height: 1.2; }
@media (max-width: 900px) { .voices__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }

/* ==========================================================================
   Raumhalter:innen: gleiche Farbfläche wie das Programm (Hügel, Korn,
   Pinselkante), aber in Bernstein und mittig gesetzt.
   ========================================================================== */
.hosts {
  --program-bg: #EA9638;
  /* gleiches Korn wie im Programm, Sprenkel etwas dunkler, damit es auf dem Orange gleich stark wirkt */
  --program-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.28 0 0 0 0 0.13 0 0 0 0 0.02 0 0 0 0.95 -0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hosts {
  padding-top: clamp(32px, 4vw, 57px);                           /* Überschrift näher an die Hügelkante (−40 %) */
  margin-top: calc(var(--hill-h) + clamp(40px, 5vw, 80px));    /* mehr Luft zu den Stimmen darüber */
}
.hosts__inner { text-align: center; }
.hosts__title { max-width: 18ch; margin-inline: auto; margin-bottom: clamp(24px, 3vw, 36px); }
.hosts__intro { max-width: 60ch; margin-inline: auto; font-size: 1.1875rem; line-height: 1.65; }
@media (max-width: 640px) { .hosts__intro { font-size: 1.0625rem; } }

/* Raumhalter:innen: runde Porträts, Name, Angebot, Links als Symbole */
.hosts__grid {
  list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: clamp(40px, 5vw, 64px) clamp(16px, 2.4vw, 32px);
}
.host { display: flex; flex-direction: column; align-items: center; text-align: center; }
.host__img {
  display: block; width: min(100%, 190px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  margin-bottom: 32px; /* sichtbarer Abstand zum Namen ~30 % kleiner als vorher (~48px) */
}
.host picture { display: contents; }
.host__name { margin: 0; line-height: 1.15; font-size: calc(1.375rem + 5px); font-weight: 500; letter-spacing: -0.01em; }
.host__offer { margin-top: var(--space-2); max-width: 24ch; font-size: 1rem; line-height: 1.5; }
.host__links { display: flex; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); } /* unten in der Karte: alle Symbole einer Reihe auf gleicher Höhe */
.host__link {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--color-ink); background: rgba(255, 252, 249, 0.5);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.host__link:hover { background: var(--color-ink); color: var(--page-bg); }
.host__link:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
/* Großer schwarzer Button unter den Raumhalter:innen; Hover hell, weil der Hintergrund schon orange ist */
.hosts__cta-wrap { margin-top: clamp(56px, 7vw, 96px); }
.btn--xl { height: 72px; padding-inline: clamp(40px, 5vw, 64px); font-size: 1.25rem; } /* großer Ticket-Button unter Raumhalter:innen und FAQ */
.hosts__cta:hover { background: var(--page-bg); color: var(--color-ink); }
.hosts__cta:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }
@media (max-width: 520px) {
  .hosts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10) var(--space-4); }
  .host__img { width: min(100%, 140px); }
  .host__name { font-size: calc(1.15rem + 5px); }
  .host__offer { font-size: 0.9375rem; }
}

/* Anreise & Unterbringung: drei ruhige Karten im Stil der Tickets */
.travel { padding: clamp(48px, 7vw, 112px) var(--gutter) clamp(72px, 10vw, 140px); }
.travel__inner { max-width: var(--box-max); margin-inline: auto; }
.travel__title { margin-bottom: clamp(32px, 4vw, 56px); }
.travel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.travel__card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--radius-tile); background: rgba(234, 150, 56, 0.14);
}
.travel__icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-5);
  border-radius: 50%; background: rgba(255, 252, 249, 0.7); color: var(--color-ink);
}
.travel__name { margin: 0; font-size: 1.6rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.travel__text { margin-top: var(--space-3); font-size: 1.0625rem; line-height: 1.65; }
.travel__note { margin-top: var(--space-4); font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-2); }
@media (max-width: 860px) { .travel__grid { grid-template-columns: minmax(0, 1fr); } }

/* FAQ: Fragen untereinander über die volle Breite, aufklappbar */
.faq { padding: clamp(24px, 3vw, 48px) var(--gutter) clamp(72px, 10vw, 140px); }
.faq { position: relative; overflow: hidden; }
.faq__inner { position: relative; z-index: 1; max-width: var(--box-max); margin-inline: auto; }
/* Fragezeichen: blasses Orange, linksbündig, über die ganze Sektionshöhe, hinter den Fragen */
.faq__mark {
  position: absolute; z-index: 0; top: 2%; bottom: 2%; left: max(var(--gutter), calc((100% - var(--box-max)) / 2 - 4vw));
  height: 96%; width: auto; color: rgba(234, 150, 56, 0.16);
  transform: rotate(-7deg); transform-origin: 30% 60%; pointer-events: none;
}
.faq__title { margin-bottom: clamp(32px, 4vw, 56px); }
/* Trennlinien als Pseudo-Elemente, damit sie runde Enden haben */
.faq__list { position: relative; }
.faq__item { position: relative; }
.faq__list::before, .faq__item::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: rgba(30, 27, 22, 0.16);
}
.faq__list::before { top: 0; }
.faq__item::after { bottom: 0; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: clamp(20px, 2.4vw, 30px) 0; cursor: pointer; list-style: none;
  font-size: clamp(1.1875rem, 1.6vw, 1.5rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em;
  transition: color var(--dur-base) var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: #B85A0E; }
.faq__q:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; border-radius: 4px; }
.faq__chevron {
  flex: none; box-sizing: content-box; padding: 10px; border-radius: 50%;
  background: rgba(234, 150, 56, 0.18); transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); background: #FBBB48; }
.faq__a { max-width: 75ch; padding-bottom: clamp(24px, 2.6vw, 36px); font-size: 1.0625rem; line-height: 1.7; }
.faq__a p + p, .faq__a p + ul { margin-top: var(--space-4); }
.faq__a a { color: inherit; text-underline-offset: 3px; }
.faq__times { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.faq__aside { display: block; font-size: var(--text-sm); color: var(--color-ink-2); }
/* weiches Aufklappen, wo der Browser es kann */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content { height: 0; overflow: clip; transition: height var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete; }
  .faq__item[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) { .faq__item::details-content { transition: none; } }
.faq__cta-wrap { margin-top: clamp(48px, 6vw, 80px); text-align: center; }

/* Kontakt-Frage: nur auf der Startseite, groß und mittig über dem Footer */
.contact { padding: clamp(56px, 8vw, 120px) var(--gutter) 0; text-align: center; }
.contact__title { margin: 0; font-size: clamp(2.25rem, 5.4vw, 4.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
.contact__mail {
  display: inline-block; margin-top: var(--space-1);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem); color: #D06A12; /* kräftigeres Orange: 3,5:1, reicht für große Schrift */
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px;
  transition: color var(--dur-base) var(--ease-out);
}
.contact__mail:hover { color: var(--color-ink); }
/* Footer: Copyright und Rechtliches */
.footer { padding: clamp(64px, 9vw, 128px) var(--gutter) var(--space-8); }
.footer__inner { max-width: var(--box-max); margin-inline: auto; }
.footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.footer__copy { margin: 0; font-size: 1rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); }
.footer__links a { font-size: 1rem; color: var(--color-ink); text-decoration: none; text-underline-offset: 4px; }
.footer__links a:hover, .footer__links a[aria-current] { text-decoration: underline; text-decoration-color: #EA9638; }
@media (max-width: 640px) {
  .footer__bar { flex-direction: column-reverse; text-align: center; }
  .footer__links { justify-content: center; gap: var(--space-2) var(--space-6); }
}
.footer__credit { margin: var(--space-6) 0 0; text-align: center; font-size: calc(var(--text-sm) - 2px); font-weight: 300; color: var(--color-ink-2); }
.footer__heart { display: inline-block; vertical-align: -2px; color: #EA9638; }
.footer__credit a { color: var(--color-ink); text-decoration-color: #EA9638; text-underline-offset: 3px; }

/* Unterseiten Impressum, Datenschutz, AGB */
.legal-nav { grid-template-columns: 1fr auto; }
.legal-back { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink); text-decoration: none; }
.legal-back:hover { text-decoration: underline; text-decoration-color: #EA9638; text-underline-offset: 4px; }
.legal { padding: clamp(32px, 5vw, 72px) var(--gutter) 0; }
.legal__inner { max-width: 72ch; margin-inline: auto; font-size: 1.0625rem; line-height: 1.7; }
.legal__title { margin-bottom: clamp(24px, 3vw, 40px); }
.legal--blank { min-height: 40vh; } /* leere Unterseiten: Footer nicht direkt unter der Überschrift */
/* Ticket-Shop (Sommer): Überschrift, Hinweis, darunter das Ticket-Tailor-Widget */
.shop__inner { max-width: var(--box-max); margin-inline: auto; text-align: center; }
.shop__title { margin-bottom: var(--space-5); }
.shop__hint { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-2); font-size: 1.0625rem; line-height: 1.5; }
.shop__hint svg { flex: none; margin-top: 3px; color: var(--color-ember); }
.shop__widget { margin-top: clamp(28px, 4vw, 48px); min-height: 480px; }
/* Bild oben: von der Navigation bis kurz hinter den Widget-Anfang, unten mit Halbmond-Kante (gespiegelte Hügelkante der RaumhalterInnen) */
.shop { padding-top: 0; --moon-h: clamp(48px, 7vw, 120px); --widget-overlap: clamp(90px, 10vw, 150px); }
.shop__top {
  position: relative; isolation: isolate; margin-inline: calc(var(--gutter) * -1);
  padding: clamp(48px, 6vw, 88px) var(--gutter) calc(var(--widget-overlap) + var(--moon-h) * 0.6);
  text-align: center; color: #fff;
}
.shop__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(30, 20, 8, 0.55), rgba(30, 20, 8, 0.35)), url("../img/festival-gemeinschaft-2026.jpg") center 40% / cover no-repeat;
  background-image: linear-gradient(rgba(30, 20, 8, 0.55), rgba(30, 20, 8, 0.35)), image-set(url("../img/festival-gemeinschaft-2026.avif") type("image/avif"), url("../img/festival-gemeinschaft-2026.jpg") type("image/jpeg"));
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0V58C260 86 620 100 900 100c300 0 540-14 700-60V0z'/%3E%3C/svg%3E") bottom / 100% var(--moon-h) no-repeat,
    linear-gradient(#000, #000) top / 100% calc(100% - var(--moon-h) + 6px) no-repeat;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0V58C260 86 620 100 900 100c300 0 540-14 700-60V0z'/%3E%3C/svg%3E") bottom / 100% var(--moon-h) no-repeat,
    linear-gradient(#000, #000) top / 100% calc(100% - var(--moon-h) + 6px) no-repeat;
}
.shop__head .shop__title { color: #fff; text-shadow: 0 2px 24px rgba(36, 20, 6, 0.35); }
.shop__head .shop__hint svg { color: #FBBB48; }
.shop .shop__inner { position: relative; margin-top: calc(var(--widget-overlap) * -1); }
.shop .shop__widget { margin-top: 0; }
/* Winter-Tickets: gleicher Aufbau, Bild aus dem Winter-Hero, Schleier in Mitternachtsblau */
.shop--winter .shop__bg { background-image: linear-gradient(rgba(15, 29, 58, 0.55), rgba(15, 29, 58, 0.35)), url("../img/winter-gutshaus.jpg"); background-position: center 45%; }
.shop--winter .shop__head .shop__title { text-shadow: 0 2px 24px rgba(15, 29, 58, 0.4); }
.shop--winter .shop__head .shop__hint svg { color: var(--color-moon); }
.legal__meta { color: var(--color-ink-2); }
.legal h2 { margin: clamp(36px, 4vw, 52px) 0 var(--space-3); font-size: 1.5rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.legal h3 { margin: var(--space-6) 0 var(--space-2); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: var(--space-3); }
.legal ul { margin: var(--space-3) 0 0; padding-left: 1.2em; }
.legal li + li { margin-top: var(--space-1); }
.legal a { color: inherit; text-decoration-color: #EA9638; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ==========================================================================
   Reveal: Inhalte erscheinen beim Scrollen weich (einblenden und leicht
   aufsteigen, nur opacity und translate, damit nichts ruckelt).
   Einheitlich für die ganze Seite: einfach
   data-reveal an ein Element setzen. Gleichzeitig sichtbare Elemente
   erscheinen nacheinander (--reveal-delay setzt das Skript).
   ========================================================================== */
.v2 { --ease-reveal: cubic-bezier(0.33, 1, 0.68, 1); } /* sanft ausklingend */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] {
    opacity: 0; translate: 0 24px;
    transition:
      opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0ms),
      translate 1.6s var(--ease-reveal) var(--reveal-delay, 0ms);
  }
  .js-reveal [data-reveal].is-revealed { opacity: 1; translate: none; }
  /* Navigation kommt von oben herein */
  .js-reveal [data-reveal="down"] { translate: 0 -14px; }

  /* Pinselstrich hinter dem Datum zeichnet sich nach dem Text von links nach rechts */
  .js-reveal .stage__date span::before {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.4s var(--ease-reveal) calc(var(--reveal-delay, 0ms) + 500ms);
  }
  .js-reveal .stage__date.is-revealed span::before { clip-path: inset(0 -10% 0 0); }

  /* Fächer: Fotos liegen erst gestapelt in der Mitte und fächern dann auf */
  .js-reveal .fan[data-reveal] { opacity: 1; translate: none; }
  .js-reveal .fan__card {
    transition:
      transform 1.8s var(--ease-reveal) var(--card-delay, 0ms),
      opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1) var(--card-delay, 0ms);
  }
  .js-reveal .fan:not(.is-revealed) .fan__card { --x: 0%; --y: 10%; --r: 0deg; opacity: 0; }
  .js-reveal .fan__card--1, .js-reveal .fan__card--3 { --card-delay: 150ms; }
}

/* ==========================================================================
   Cookie-Banner (assets/js/consent.js): schlicht, unten am Bildrand
   ========================================================================== */
.consent {
  position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 1000;
  width: min(760px, calc(100% - 20px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-6);
  padding: var(--space-4) var(--space-6);
  background: var(--page-bg); color: var(--color-ink);
  border: 1px solid rgba(26, 23, 20, 0.1); border-radius: 20px; box-shadow: 0 12px 40px rgba(26, 23, 20, 0.16);
  transform: translate(-50%, calc(100% + 20px)); transition: transform 0.3s ease;
}
.consent.is-visible { transform: translate(-50%, 0); }
.consent[hidden] { display: none; }
.consent__text { margin: 0; max-width: 72ch; font-size: 0.9375rem; line-height: 1.5; }
.consent__text a { color: inherit; text-decoration-color: #EA9638; text-underline-offset: 3px; }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.consent .consent__btn { height: 48px; padding-inline: var(--space-6); font-size: 0.9375rem; font-weight: 500; }
.consent__btn--ghost { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.consent__btn--ghost:hover { background: var(--color-ink); color: var(--color-bg); }
.consent .consent__btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
@media (max-width: 640px) {
  .consent { justify-content: stretch; padding: var(--space-4); }
  .consent__actions { width: 100%; }
  .consent__actions .consent__btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }
.footer__consent { padding: 0; border: 0; background: none; font: inherit; font-size: 1rem; color: var(--color-ink); cursor: pointer; text-underline-offset: 4px; }
.footer__consent:hover { text-decoration: underline; text-decoration-color: #EA9638; }
.winter-page .footer__consent:hover { text-decoration-color: var(--color-night); }
.notfound__cta { margin-top: var(--space-8); }
.legal__consent { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: #EA9638; text-underline-offset: 3px; }
html.night-open .menu__badge { animation-play-state: paused; } /* Seiten-Animationen warten, bis das Winter-Popup zu ist */