/* ==========================================================================
   Joey's Comedy Club – Designsystem „Dashboard“ (Variante H, gewählt am 20.10.2026; seit 21.10.2026 H3 „Bühne“, siehe Ende)
   Aufbau nach der Finpath-Referenz: App-Leiste mit Pill-Navigation, Orientierungszeile, Karten mit Eck-Button,
   markierte nächste Show, verbundene Kreis-Werte, schwebende Pill-Leiste auf dem Handy.
   Hell: helles Grau, weiße deckende Karten, dunkle Schrift, JCC-Blau als einzige Akzentfarbe, Fotos schwarz-weiß.
   Glas (nach Apples Liquid Glass) nur für Navigation, Handy-Leiste, Menü, Werkzeuge oben und die erste Karte.
   Hintergrund: weiche Lichtverläufe in JCC-Blau (nach Velox/Arounda).
   Markenfarben: Block marke:start (wird aus brand-kit/quelle/design-tokens.json übernommen)
   ========================================================================== */

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Farben – Bestand (Marke) */
  /* marke:start – aus brand-kit/quelle/design-tokens.json, nicht hier bearbeiten */
  --blue: #84b0da;
  --lilac: #c8a0c6;
  --cream: #f8e9dd;
  --cream-sticker: #ffeadc;
  --black: #000000;
  --taupe: #a39382;
  /* marke:end */

  /* Helle Palette. Achtung Namen: --ink ist die helle Grundfläche, --white die dunkle Vordergrundfarbe
     (Schrift, dunkle Buttons) – so bleiben alle Regeln darunter gültig. */
  --ink: #f1f1f2;        /* Grundfläche */
  --card: #ffffff;       /* Karten */
  --raise: #efeff1;      /* Elemente in Karten: Chips, Kreise */
  --raise-2: #e4e4e7;    /* aktiv / Hover */
  --row: #f6f6f7;        /* Kacheln in Karten */
  --row-2: #ebebee;      /* Hover der Kacheln */
  --tile-line: rgba(11, 11, 12, 0.06);
  --hover-line: rgba(11, 11, 12, 0.24);
  --white: #0b0b0c;      /* Vordergrund */
  --blue-hi: #a6c8e8;
  --signal: #f19c84;

  --text: var(--white);
  --text-2: rgba(11, 11, 12, 0.7);
  --text-3: rgba(11, 11, 12, 0.62);   /* ≥ 4,5 : 1 auf Weiß und Grundfläche (WCAG AA) */
  --line: rgba(11, 11, 12, 0.07);
  --line-2: rgba(11, 11, 12, 0.12);
  --line-3: rgba(11, 11, 12, 0.22);
  --fill: rgba(11, 11, 12, 0.05);
  --accent: #3f6f9c;     /* JCC-Blau als Text auf Hell (Kontrast) */
  --focus: #3f6f9c;

  /* Glas-Ebene */
  --mx-glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.52));
  --mx-glass-edge: rgba(255, 255, 255, 0.85);
  --mx-glass-hl: #ffffff;
  --mx-glass-shadow: 0 20px 44px -24px rgba(20, 30, 50, 0.3), 0 0 90px -30px rgba(132, 176, 218, 0.55);
  --mx-tile-bg: rgba(255, 255, 255, 0.74);
  --mx-text-2: rgba(11, 11, 12, 0.74);
  --mx-bar-bg: rgba(246, 246, 248, 0.5);
  --mx-bar-bg-scrolled: rgba(246, 246, 248, 0.74);
  --mx-edge: rgba(241, 241, 242, 0.9);
  --mx-chip-bg: rgba(255, 255, 255, 0.55);
  --mx-chip-hover: rgba(255, 255, 255, 0.9);
  --mx-tab-active: #ffffff;
  --mx-tab-active-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.14);
  --mx-island-bg: rgba(255, 255, 255, 0.62);
  --mx-menu-bg: rgba(241, 241, 242, 0.74);
  --mx-solid: #ffffff;

  /* Hintergrund-Verläufe */
  --au-beam: rgba(132, 176, 218, 0.5);
  --au-beam-2: rgba(255, 255, 255, 0.85);
  --au-glow: rgba(132, 176, 218, 0.55);
  --au-glow-2: rgba(132, 176, 218, 0.32);
  --au-grid: rgba(11, 11, 12, 0.05);
  --au-card-tint: rgba(132, 176, 218, 0.2);

  /* Typo: eine Schrift (Urbanist) wie in der Referenz */
  --font-sans: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Bewegung (Emil Kowalski: ease-out für alles, was erscheint; nur transform und opacity) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-1: 0.16s;
  --dur-2: 0.24s;

  /* Formen */
  --r-card: clamp(22px, 2vw, 28px);
  --r-row: 18px;
  --r-sm: 14px;

  /* Raster */
  --container: 1400px;
  --gutter: clamp(16px, 2.6vw, 36px);
  --gap: clamp(12px, 1.2vw, 16px);
  --pad: clamp(18px, 1.7vw, 24px);

  /* Ebenen */
  --z-nav: 40;
  --z-island: 45;
  --z-menu: 50;
  --z-curtain: 55;
  --z-skip: 70;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; background: var(--ink); scrollbar-gutter: stable; } /* stable: Platz für die Scrollleiste bleibt, auch wenn das Menü das Scrollen sperrt – sonst springt die Seite seitlich */
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p a, .prose a, .muted a, .faq__a a, .fine a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(132, 176, 218, 0.7);
  transition: text-decoration-color var(--dur-1) ease, color var(--dur-1) ease;
}
p a:hover, .prose a:hover, .muted a:hover, .faq__a a:hover, .fine a:hover { color: var(--blue); text-decoration-color: currentColor; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
main { display: block; outline: none; }
em { font-style: normal; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--blue); color: var(--ink); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: var(--z-skip); padding: 0.75rem 1.25rem; border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; text-decoration: none; transition: top var(--dur-2) var(--ease-out); }
.skip-link:focus { top: 1rem; }
.nowrap { white-space: nowrap; }

.muted { color: var(--text-2); }
.small { font-size: 0.9375rem; }
/* hidden gilt immer – auch bei Bausteinen mit eigenem display (Chips, Hinweise). Das Menü steuert seine Übergänge selbst. */
[hidden]:not(.menu) { display: none !important; }
.fine { font-size: 0.875rem; color: var(--text-3); display: flex; align-items: flex-start; gap: 0.5rem; }
.fine svg { flex: none; margin-top: 0.15rem; }
.stack > * + * { margin-top: 0.85rem; }

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
.t-h3 { font-weight: 500; font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem); line-height: 1.2; letter-spacing: -0.01em; }
.t-lead { font-weight: 400; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem); line-height: 1.5; color: var(--text); text-wrap: pretty; }
.t-label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-3); line-height: 1.4; }

/* --------------------------------------------------------------------------
   Pills, Chips, Badges
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
  text-decoration: none;
}
.pill svg { color: var(--text-2); flex: none; }
.pill__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--blue); flex: none; }
.pill--link { transition: background-color var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.pill--link:hover { background: var(--raise); box-shadow: inset 0 0 0 1px var(--line-3); }
.pill-row, .chip-row, .btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.btn-row--center { justify-content: center; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-2);
  background: var(--raise);
  white-space: nowrap;
}
.chip--city { color: var(--text); }
.chip--soft { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.chip--count { color: var(--text); }
.chip--link {
  min-height: 2.5rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.875rem;
  color: var(--text-2);
  white-space: normal;
  text-decoration: none;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.chip--link:hover { background: var(--raise); color: var(--text); }
.badge { display: inline-flex; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--signal); color: var(--ink); }
.badge--verschoben { background: var(--raise-2); color: var(--text); }

/* --------------------------------------------------------------------------
   Buttons (Pill mit Kreis-Icon) und runde Icon-Buttons
   -------------------------------------------------------------------------- */
.btn {
  --h: 3.25rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--h);
  padding: 0.3rem 0.3rem 0.3rem 1.35rem;
  border: 0;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) ease, box-shadow var(--dur-2) ease, color var(--dur-2) ease;
}
.btn__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--h) - 0.6rem);
  height: calc(var(--h) - 0.6rem);
  border-radius: 50%;
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) ease;
}
.btn:hover .btn__icon { transform: translate(2px, -2px); }
.btn:active { transform: scale(0.97); }
/* Hauptaktion: heller Button (neutral wie die Referenz, maximaler Kontrast) */
.btn--primary { background: var(--white); color: var(--ink); }
.btn--primary .btn__icon { background: var(--ink); color: var(--white); }
.btn--primary:hover { background: #e6e6e6; }
.btn--ghost { background: var(--raise); color: var(--text); }
.btn--ghost .btn__icon { background: var(--fill); }
.btn--ghost:hover { background: var(--raise-2); }
.btn--outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-3); }
.btn--outline .btn__icon { background: var(--fill); }
.btn--outline:hover { background: var(--fill); }
.btn--sm { --h: 2.75rem; padding-left: 1.1rem; font-size: 0.9375rem; gap: 0.6rem; }
.btn--block { display: flex; width: 100%; }
.btn.is-disabled {
  cursor: not-allowed;
  color: var(--text-3);
  background: repeating-linear-gradient(-45deg, var(--fill) 0 6px, transparent 6px 12px);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn.is-disabled .btn__icon { background: var(--fill); color: var(--text-3); }
.btn.is-disabled:hover .btn__icon, .btn.is-disabled:active { transform: none; }
.btn-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0.5rem; }
.btn-pair .btn { justify-content: space-between; }

.round, .corner, .menu-toggle {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
  text-decoration: none;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}
.corner { width: 3rem; height: 3rem; }
.round:hover, .corner:hover { background: var(--white); color: var(--ink); box-shadow: none; }
.round:active, .corner:active, .menu-toggle:active { transform: scale(0.95); }
.corner svg { transition: transform var(--dur-2) var(--ease-out); }
.corner:hover svg { transform: translate(2px, -2px); }
.link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; font-size: 0.9375rem; color: var(--text); text-decoration: none; }
.link-arrow svg { transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   App-Leiste (oben): Logo · Pill-Navigation · Aktionen
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  padding-top: env(safe-area-inset-top);
  background: rgba(10, 10, 10, 0.84);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  transition: box-shadow var(--dur-2) ease;
}
.topbar.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.topbar__in { display: flex; align-items: center; gap: 0.6rem; min-height: 4.25rem; }
.topbar__logo { display: block; margin-right: auto; padding: 0.15rem; border-radius: 12px; }
.logo { width: auto; height: 2.6rem; }
.tabs { display: none; }
.tabs ul { display: flex; gap: 0.1rem; padding: 0.3rem; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.tab {
  display: block;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.tab:hover { color: var(--text); }
.tab[aria-current="page"] { color: var(--text); background: var(--raise-2); }
.topbar__actions { display: flex; align-items: center; gap: 0.5rem; }
.topbar__social { display: none; }
.menu-toggle { position: relative; }
.menu-toggle__bar { position: absolute; left: 50%; top: 50%; width: 1.05rem; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform var(--dur-2) var(--ease-out); }
.menu-toggle__bar:first-child { transform: translate(-50%, -4px); }
.menu-toggle__bar:last-child { transform: translate(-50%, 3px); }
.is-menu-open .menu-toggle { background: var(--white); color: var(--ink); box-shadow: none; }
.is-menu-open .menu-toggle__bar:first-child { transform: translate(-50%, -0.5px) rotate(45deg); }
.is-menu-open .menu-toggle__bar:last-child { transform: translate(-50%, -0.5px) rotate(-45deg); }

/* Vollbild-Menü (Handy und Tablet) */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  overflow-y: auto;
  background: rgba(10, 10, 10, 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}
.menu[hidden] { display: block; }
.is-menu-open .menu { opacity: 1; visibility: visible; transition: opacity 0.32s ease, visibility 0s; }
.is-menu-open .topbar { z-index: calc(var(--z-menu) + 1); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu__inner { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 6rem 0 calc(2rem + env(safe-area-inset-bottom)); }
.menu__links li { overflow: hidden; }
.menu__links a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.3rem 0;
  font-weight: 400;
  font-size: clamp(2rem, 8.5vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--text-2);
  transform: translateY(40%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, color var(--dur-1) ease;
}
.menu__links a:hover, .menu__links a[aria-current="page"] { color: var(--text); }
.menu__links a[aria-current="page"] .menu__num { color: var(--blue); }
.menu__num { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; color: var(--text-3); }
.is-menu-open .menu__links a { transform: none; opacity: 1; }
.is-menu-open .menu__links li:nth-child(2) a { transition-delay: 0.04s; }
.is-menu-open .menu__links li:nth-child(3) a { transition-delay: 0.08s; }
.is-menu-open .menu__links li:nth-child(4) a { transition-delay: 0.12s; }
.is-menu-open .menu__links li:nth-child(5) a { transition-delay: 0.16s; }
.is-menu-open .menu__links li:nth-child(6) a { transition-delay: 0.2s; }
.menu__foot { display: grid; gap: 1.25rem; }
.menu__next { display: grid; gap: 0.4rem; justify-items: start; max-width: 26rem; padding: 1.1rem 1.25rem; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; }
.menu__next strong { font-size: 1.25rem; font-weight: 500; }
.menu__next span:last-child { color: var(--text-2); font-size: 0.9375rem; }
.menu__social { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.9375rem; color: var(--text-2); }
.menu__social a { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.menu__social a:hover { color: var(--text); }
.is-menu-open, .is-menu-open body { overflow: hidden; }

/* --------------------------------------------------------------------------
   Mobile Pill-Leiste (unten) – aktiver Punkt in der Akzentfarbe wie in der Referenz
   -------------------------------------------------------------------------- */
.island {
  position: fixed;
  left: 50%;
  bottom: max(0.85rem, env(safe-area-inset-bottom));
  z-index: var(--z-island);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
  transform: translateX(-50%);
  transition: transform 0.35s var(--ease-out), opacity var(--dur-2) ease;
}
.island__primary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0 1.3rem 0 1.05rem;
  border-radius: 999px;
  background: var(--blue);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: transform var(--dur-1) var(--ease-out);
}
.island__primary:active { transform: scale(0.97); }
.island.is-away { transform: translate3d(-50%, calc(100% + 2rem), 0); opacity: 0; pointer-events: none; }
.island__label { display: grid; line-height: 1.1; }
.island__sub { font-size: 0.75rem; font-weight: 600; opacity: 0.72; }
.island__circle {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--raise);
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.island__circle[aria-current="page"] { background: var(--white); color: var(--ink); }
.island :focus-visible { outline-color: var(--white); }
.is-menu-open .island { transform: translate(-50%, 140%); opacity: 0; }
body.has-island { padding-bottom: 5.25rem; }

/* --------------------------------------------------------------------------
   Orientierungszeile (in der Referenz: „← Hello, Steven“ + Werkzeuge rechts)
   -------------------------------------------------------------------------- */
.shell { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-head { display: grid; gap: 0.6rem; padding: clamp(0.75rem, 2vw, 1.75rem) 0 clamp(1rem, 2vw, 1.5rem); }
.page-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.page-head__main { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.page-head__back { align-self: center; }
.page-head__title { display: grid; gap: 0.25rem; min-width: 0; }
.page-head__kicker { font-size: 0.875rem; font-weight: 500; color: var(--text-3); line-height: 1.4; }
.page-head__h { font-weight: 400; font-size: clamp(1.85rem, 1.3rem + 2vw, 2.75rem); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.page-head__side { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.page-head__lead { max-width: 30rem; color: var(--text-2); font-size: 1.0625rem; line-height: 1.5; }
.page-head__lead--wide { max-width: 44rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem); color: var(--text); }
.breadcrumb { font-size: 0.875rem; color: var(--text-3); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--line-3); }
.breadcrumb a { text-decoration: none; color: var(--text-2); }
.breadcrumb a:hover { color: var(--text); }
.notice { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1.1rem; border-radius: var(--r-row); background: rgba(241, 156, 132, 0.1); box-shadow: inset 0 0 0 1px rgba(241, 156, 132, 0.4); }
.notice svg { flex: none; color: var(--signal); margin-top: 0.15rem; }

/* --------------------------------------------------------------------------
   Dashboard-Raster und Karten
   -------------------------------------------------------------------------- */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.dash > * { min-width: 0; }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: var(--pad);
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(252, 252, 252, 0.1), inset 0 1px 0 rgba(252, 252, 252, 0.05);
}
.card__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem 1rem; }
.card__heading { display: grid; gap: 0.2rem; flex: 1 1 12rem; min-width: 0; padding-top: 0.35rem; }
.card__title { font-weight: 400; font-size: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.card__head > .corner { order: 2; margin-top: -0.25rem; margin-right: -0.25rem; }
.card__tools { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: auto; padding: 0 0.25rem; }
.card__end { margin-top: auto; }
.card--dark { background: var(--card); }

/* Terminliste (zentrales Modul) – Zeilen dunkler als die Karte, nächste Show in JCC-Blau */
.shows-card { container: shows / inline-size; }
.show-list { display: grid; gap: 0.4rem; }
.show-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem 1rem;
  padding: 0.7rem;
  border-radius: var(--r-row);
  background: var(--row);
  box-shadow: inset 0 0 0 1px var(--tile-line);
  transition: background-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.show-row:hover { background: var(--row-2); box-shadow: inset 0 0 0 1px var(--hover-line); }
.show-row:hover .date-block { background: #3a3a3a; }
.show-row:focus-within { box-shadow: inset 0 0 0 1px var(--hover-line); }
.date-block {
  display: grid;
  justify-items: center;
  align-content: center;
  width: 4rem;
  min-height: 4.5rem;
  padding: 0.4rem 0;
  border-radius: 16px;
  background: var(--raise);
  color: var(--text);
  line-height: 1;
  transition: background-color var(--dur-1) ease;
  font-variant-numeric: tabular-nums;
}
.date-block__wd { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.date-block__day { margin: 0.28rem 0 0.2rem; font-size: 1.75rem; font-weight: 400; letter-spacing: -0.04em; }
.date-block__mon { font-size: 0.8125rem; font-weight: 500; color: var(--text-2); }
.show-row__main { min-width: 0; display: grid; gap: 0.25rem; }
.show-row__top { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.show-row__title { font-size: 1.0625rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.show-row__title a { text-decoration: none; }
.show-row__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.show-row__meta { font-size: 0.9rem; color: var(--text-2); }
.show-row__end { position: relative; z-index: 1; grid-column: 2 / -1; display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; }
.show-row__price { padding-left: 0.3rem; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
@container shows (min-width: 34rem) {
  .show-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.1rem; }
  .show-row__end { grid-column: auto; justify-content: flex-end; gap: 1rem; }
}
.show-row--featured { background: var(--blue); color: var(--ink); box-shadow: none; }
.show-row--featured:hover { background: var(--blue-hi); box-shadow: 0 0 0 3px rgba(132, 176, 218, 0.28); }
.show-row--featured .date-block, .show-row--featured:hover .date-block { background: var(--ink); color: var(--white); }
.show-row--featured .date-block__wd { color: rgba(252, 252, 252, 0.62); }
.show-row--featured .date-block__mon { color: rgba(252, 252, 252, 0.78); }
.show-row--featured .chip { color: var(--ink); background: rgba(10, 10, 10, 0.1); }
.show-row--featured .chip--count { background: var(--ink); color: var(--white); }
.show-row--featured .show-row__meta { color: rgba(10, 10, 10, 0.72); }
.show-row--featured .btn--primary { background: var(--ink); color: var(--white); }
.show-row--featured .btn--primary .btn__icon { background: var(--blue); color: var(--ink); }
.show-row--featured .btn--primary:hover { background: #222; }
.show-row--featured :focus-visible { outline-color: var(--ink); }
.show-row--featured .btn.is-disabled { color: rgba(10, 10, 10, 0.62); box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.25); background: repeating-linear-gradient(-45deg, rgba(10, 10, 10, 0.08) 0 6px, transparent 6px 12px); }
.show-row:not(.show-row--featured) .chip--count { display: none; }
@media (min-width: 1100px) {
  .show-list--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 0.5rem; }
  .shows-card .show-list--grid .show-row { grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 1rem; padding: 0.8rem; }
  .shows-card .show-list--grid .show-row__end { grid-column: 2 / -1; justify-content: flex-start; }
}

/* Filter (Segmented Control – in der Referenz EUR/USD) */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 0.15rem; padding: 0.2rem; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.segmented button { min-height: 2.4rem; padding: 0 0.95rem; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-size: 0.9375rem; font-weight: 500; transition: background-color var(--dur-2) ease, color var(--dur-2) ease; }
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] { background: var(--raise-2); color: var(--text); }

/* Leerer Zustand: schraffierte Fläche wie die „offenen“ Bereiche der Referenz */
.empty { display: grid; justify-items: center; gap: 0.85rem; padding: 2rem 1.25rem; border-radius: var(--r-row); background: repeating-linear-gradient(-45deg, var(--fill) 0 7px, transparent 7px 14px), var(--row); box-shadow: inset 0 0 0 1px var(--line); text-align: center; color: var(--text-2); }
.empty__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--raise); color: var(--text); }
[data-city].is-filtered, .is-past-client { display: none !important; }
/* Was main.js beim Laden einblendet, hat seinen Platz von Anfang an (sonst rutscht der Inhalt darunter nach, CLS):
   „Show teilen“ und der Countdown „In X Tagen“ stehen unsichtbar bereit, bis das Skript sie freigibt */
.js [data-share][hidden] { display: flex; visibility: hidden; }
.js .show-row--featured .chip--count[data-countdown][hidden], .js .page-head .chip--count[data-countdown][hidden] { display: inline-flex; visibility: hidden; }
.is-syncing .show-row, .is-syncing .island, .is-syncing .btn { transition: none !important; }

/* Große Zahl + verbundene Kreise (in der Referenz: Total Balance) */
.summary { display: grid; gap: 0.3rem; }
.big-num { font-weight: 500; font-size: clamp(2.75rem, 2.2rem + 2vw, 3.75rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.big-num__dec { font-size: 0.62em; font-weight: 400; letter-spacing: -0.02em; color: var(--text-3); }
.big-num__pre { font-size: 0.42em; font-weight: 400; letter-spacing: 0; color: var(--text-3); margin-right: 0.15em; }
.orbs { position: relative; display: flex; align-items: center; justify-content: center; padding: 0.35rem 0; }
.orbs::before { content: ""; position: absolute; left: 16%; right: 16%; top: 50%; height: 38%; transform: translateY(-50%); border-radius: 999px; background: linear-gradient(90deg, rgba(132, 176, 218, 0.06), rgba(132, 176, 218, 0.42), rgba(132, 176, 218, 0.06)); }
.orb { position: relative; display: grid; place-content: center; gap: 0.1rem; width: clamp(5rem, 30%, 6.25rem); aspect-ratio: 1; margin: 0 -0.4rem; border-radius: 50%; text-align: center; background: radial-gradient(circle at 50% 30%, #2c2c2c, var(--raise) 70%); box-shadow: inset 0 0 0 1px var(--line); }
.orb strong { font-size: 1.2rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.orb span { font-size: 0.75rem; color: var(--text-3); }
.orb--hi { z-index: 1; width: clamp(6rem, 36%, 7.5rem); background: radial-gradient(circle at 50% 30%, var(--blue-hi), var(--blue) 72%); color: var(--ink); box-shadow: 0 0 40px -8px rgba(132, 176, 218, 0.55); }
.orb--hi span { color: rgba(10, 10, 10, 0.68); }
.orb--hi strong { font-size: 1.5rem; }
.tickets-card .btn-pair { margin-top: auto; }
.ticket__price { color: var(--text-2); font-size: 0.9375rem; }
.ticket__price strong { color: var(--text); font-weight: 500; }
.facts-line { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.facts-line li { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--raise); font-size: 0.8125rem; color: var(--text-2); }
.facts-line svg { color: var(--blue); flex: none; }
.ticket__actions { display: grid; gap: 0.6rem; }
.checks { display: grid; gap: 0.5rem; }
.checks li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--text-2); font-size: 0.9375rem; }
.checks svg { flex: none; margin-top: 0.1rem; color: var(--blue); }
.ticket-info .btn-row { margin-top: auto; }

/* Ticket-Hilfe: getrennt nach Kaufweg (online bei EVENTIM.Light / bei uns vor Ort) */
.help-card { container: help / inline-size; }
.support { display: grid; gap: 0.5rem; }
.support__item { display: grid; gap: 0.6rem; align-content: start; justify-items: start; padding: 1rem 1.1rem 1.1rem; border-radius: var(--r-row); background: var(--row); box-shadow: inset 0 0 0 1px var(--tile-line); }
.support__title { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; }
.support__item .muted { font-size: 0.9375rem; }
.support__item .btn-row { margin-top: auto; padding-top: 0.25rem; }
@container help (min-width: 36rem) { .support { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hilfe (in der Referenz: KI-Assistent mit Vorschlägen und Eingabefeld) */
.help__intro { display: grid; justify-items: center; gap: 0.7rem; text-align: center; padding: 0.5rem 0 0.25rem; }
.help__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--raise); color: var(--blue); }
.help__q { font-size: 1.15rem; font-weight: 400; letter-spacing: -0.01em; }
.help__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.ask { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3.5rem; margin-top: auto; padding: 0.4rem 0.4rem 0.4rem 1.1rem; border-radius: var(--r-row); background: var(--row); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-3); text-decoration: none; transition: box-shadow var(--dur-2) ease, color var(--dur-2) ease; }
.ask:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-3); }
.ask__btn { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--raise); color: var(--text); transition: transform var(--dur-2) var(--ease-out); }
.ask:hover .ask__btn { transform: translate(2px, -2px); }

/* Showkonzept (in der Referenz: Cashflow – große Zahl, Pill-Tabs, Balken mit einer Markierung) */
.principle { display: grid; gap: 0.9rem; justify-items: start; }
.claim { font-weight: 500; font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem); line-height: 1; letter-spacing: -0.04em; }
.claim__sub { color: var(--text-3); font-weight: 400; }
.principle .muted { max-width: 34rem; }
.steps { display: grid; gap: 0.4rem; }
.step { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.85rem 1rem 0.9rem 0.85rem; border-radius: var(--r-row); background: var(--row); box-shadow: inset 0 0 0 1px var(--tile-line); }
.step__icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--raise); color: var(--text); }
.step__title { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; }
.step p { margin-top: 0.15rem; font-size: 0.9375rem; color: var(--text-2); }
.step--hi .step__icon { background: var(--blue); color: var(--ink); }
.step--hi { box-shadow: inset 0 0 0 1px rgba(132, 176, 218, 0.45); }
@media (min-width: 768px) {
  .steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: auto; }
  .steps--row .step { flex-direction: column; gap: 0.75rem; padding: 1rem; }
}

/* Locations-Zeilen (in der Referenz: Transaktionen mit rundem Avatar) */
.places-card { container: places / inline-size; }
.places { display: grid; gap: 0.4rem; }
.place {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 0.6rem 0.7rem 0.6rem 0.5rem;
  border-radius: var(--r-row);
  background: var(--row);
  box-shadow: inset 0 0 0 1px var(--tile-line);
  text-decoration: none;
  transition: background-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.place:hover { background: var(--row-2); box-shadow: inset 0 0 0 1px var(--hover-line); }
.place:hover .place__avatar { background: #3a3a3a; }
.place__avatar { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--raise); color: var(--text); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; transition: background-color var(--dur-1) ease; }
.place__text { display: grid; gap: 0.1rem; min-width: 0; }
.place__text strong { font-weight: 500; }
.place__text span { font-size: 0.875rem; color: var(--text-2); }
.place__text .place__pitch { color: var(--text-3); }
.place__dates { grid-column: 2 / 3; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.place__go { grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--text-3); transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) ease; }
.place:hover .place__go { transform: translateX(2px); color: var(--text); }
@container places (max-width: 25rem) { .place__text .place__pitch { display: none; } }
@container places (min-width: 30rem) {
  .place { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .place__dates { grid-column: 3; grid-row: 1; justify-content: flex-end; }
  .place__go { grid-column: 4; grid-row: 1; }
}

/* Fotos: Schwarz-Weiß, damit die Fläche ruhig bleibt */
picture img { filter: grayscale(1) contrast(1.06) brightness(0.92); }
.host-card__media picture, .host-card__media img, .story__media picture, .story__media img, .crowd__media picture, .crowd__media img,
.host-big__media picture, .host-big__media img, .photo-card picture, .photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Host */
.host-card { container: host / inline-size; }
.host-card__body { display: grid; gap: 1rem; flex: 1; }
.host-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-row); overflow: hidden; background: var(--row); }
@container host (min-width: 26rem) {
  .host-card__body { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: stretch; }
  .host-card__media { aspect-ratio: auto; min-height: 15rem; }
  .host-card__text { align-content: end; }
}
.host-card__text { display: grid; gap: 0.35rem; }
.host-card__text p { font-size: 0.9375rem; }
.host-card__award { display: inline-flex; align-items: center; gap: 0.45rem; width: fit-content; margin-top: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: var(--raise); font-size: 0.875rem; font-weight: 500; }
.host-card__award svg { color: var(--blue); }

/* Schon bei uns auf der Bühne */
.crowd-card { container: crowd / inline-size; }
.crowd { display: grid; gap: 1rem; flex: 1; }
.crowd__media { position: relative; min-height: 13rem; border-radius: var(--r-row); overflow: hidden; background: var(--row); }
/* Handy: Foto mit Felix Lobrecht und dem Joey's-Schild quadratisch – beide groß im Bild statt winzig im Querformat */
@container crowd (max-width: 37.99rem) { .crowd__media[data-fx-still] { aspect-ratio: 1 / 1; min-height: 0; } }
.crowd__caption { position: absolute; left: 0.75rem; top: 0.75rem; /* oben: unten links steht im Foto das Joey's-Schild */ max-width: calc(100% - 1.5rem); padding: 0.45rem 0.9rem; border-radius: 999px; background: rgba(10, 10, 10, 0.78); color: var(--text); font-size: 0.875rem; font-weight: 500; }
.crowd__text { display: grid; gap: 1rem; align-content: end; }
.names { display: grid; gap: 0.15rem; }
.names li { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; }
@container crowd (min-width: 38rem) {
  .crowd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Foto-Karte (Showseite) */
.photo-card { min-height: 18rem; padding: 0; overflow: hidden; background: var(--row); }
.photo-card__caption { position: absolute; left: 0.85rem; bottom: 0.85rem; }
.photo-card__caption .pill { background: rgba(10, 10, 10, 0.78); white-space: normal; }

/* Host-Zeile (Showseite) */
.host-row { display: flex; align-items: center; gap: 0.9rem; margin-top: auto; padding: 0.7rem; border-radius: var(--r-row); background: var(--row); box-shadow: inset 0 0 0 1px var(--tile-line); }
.host-row picture { position: relative; flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; overflow: hidden; }
.host-row img { width: 100%; height: 100%; object-fit: cover; }
.host-row div { display: grid; gap: 0.05rem; }
.host-row .muted { font-size: 0.875rem; }
.desc-rest { margin-top: 0.85rem; }
.desc-rest p, .stack p { color: var(--text-2); }

/* Location & Anfahrt */
.row-icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--raise); color: var(--text); }
.venue__address { display: flex; gap: 0.8rem; align-items: center; line-height: 1.45; }
.transit { display: grid; gap: 0.4rem; }
.transit li { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.7rem 0.9rem 0.75rem 0.7rem; border-radius: var(--r-row); background: var(--row); box-shadow: inset 0 0 0 1px var(--tile-line); }
.transit div { display: grid; gap: 0.1rem; padding-top: 0.1rem; }
.transit strong { font-weight: 500; }
.transit span { color: var(--text-2); font-size: 0.9375rem; }

/* Stadtseiten */
.story__media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-row); overflow: hidden; background: var(--row); }
.city-switch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem 1rem; align-items: center; text-decoration: none; }
.city-switch .t-label { grid-column: 1 / -1; }
.city-switch__name { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); font-weight: 400; line-height: 1; letter-spacing: -0.04em; }
.city-switch__dates { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.city-switch .corner { grid-column: 2; grid-row: 2 / 4; }
.city-switch { transition: box-shadow var(--dur-1) ease, background-color var(--dur-1) ease; }
.city-switch:hover { background: #1f1f1f; box-shadow: inset 0 0 0 1px var(--hover-line); }
.city-switch:hover .corner { background: var(--white); color: var(--ink); box-shadow: none; }
.city-switch:hover .corner svg { transform: translate(2px, -2px); }

/* Über uns */
.concepts { display: grid; gap: 0.4rem; }
.concept { display: grid; gap: 0.55rem; align-content: start; padding: 1.25rem; border-radius: var(--r-row); background: var(--row); box-shadow: inset 0 0 0 1px var(--tile-line); }
.concept p { color: var(--text-2); font-size: 0.975rem; }
.concept__num { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--text-3); }
.concept--hi { box-shadow: inset 0 0 0 1px rgba(132, 176, 218, 0.45); }
.concept--hi .concept__num { color: var(--accent); } /* JCC-Blau als Text auf Hell: #3F6F9C (Kontrast ≥ 4,5 : 1) */
.host-big { display: grid; gap: 1.25rem; }
.host-big__media { position: relative; aspect-ratio: 4 / 5; max-height: 34rem; border-radius: var(--r-row); overflow: hidden; background: var(--row); }
.host-big__text { display: grid; gap: 1.1rem; align-content: start; }
.timeline { display: grid; gap: 0.4rem; }
.tl { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 0.9rem; padding: 0.8rem 0.9rem 0.85rem 0.8rem; border-radius: var(--r-row); background: var(--row); box-shadow: inset 0 0 0 1px var(--tile-line); }
.tl__year { display: grid; place-items: center; height: 2.25rem; border-radius: 999px; background: var(--raise); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }
.tl__title { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; }
.tl p { margin-top: 0.15rem; font-size: 0.9375rem; }
.koop .btn-row { margin-top: auto; }

/* Kontakt */
.contact__big { font-size: clamp(1.35rem, 0.95rem + 1.8vw, 2.3rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.15; overflow-wrap: anywhere; text-decoration: none; }
.contact__big:hover, a.contact__mid:hover { color: var(--blue); }
.contact__mid { font-size: 1.2rem; font-weight: 400; text-decoration: none; overflow-wrap: anywhere; }
.form__core { display: grid; gap: 1.25rem; justify-items: start; }
.form__grid { display: grid; gap: 1rem; width: 100%; }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.875rem; font-weight: 500; color: var(--text-2); }
.field input, .field textarea { width: 100%; min-height: 3.1rem; padding: 0.85rem 1rem; border: 0; border-radius: var(--r-sm); background: var(--row); color: var(--text); font: inherit; box-shadow: inset 0 0 0 1px var(--line-2); }
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px rgba(132, 176, 218, 0.22); }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; color: var(--text-2); }
.check input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--blue); }

/* FAQ */
.faq__item + .faq__item { border-top: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0.25rem; cursor: pointer; list-style: none; border-radius: 10px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
.faq__icon { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), background-color var(--dur-2) ease; }
.faq__item[open]:not(.is-closing) .faq__icon { transform: rotate(45deg); background: var(--blue); color: var(--ink); box-shadow: none; }
.faq__item summary:hover .faq__icon { background: var(--white); color: var(--ink); box-shadow: none; }
.faq__item summary:hover .faq__q { color: var(--white); }
.faq__item[open] summary:hover .faq__icon { background: var(--blue-hi); }
.faq__a { padding: 0 3rem 1.15rem 0.25rem; color: var(--text-2); }
.faq__a p + p { margin-top: 0.75rem; }

/* Rechtstexte, 404 */
.prose-card { padding: clamp(1.25rem, 3.5vw, 2.75rem); }
.prose { max-width: 46rem; color: var(--text-2); }
.prose h2 { margin: 2.25rem 0 0.6rem; font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--text); }
.prose h2:first-child { margin-top: 0; }
.prose p + p { margin-top: 0.85rem; }
.lead-note { padding: 1.1rem 1.25rem; border-radius: var(--r-row); background: var(--row); color: var(--text); }
.nf { align-items: flex-start; gap: 1.5rem; padding: clamp(1.5rem, 4vw, 3rem); }
.nf__code { font-size: clamp(6rem, 3rem + 12vw, 12rem); font-weight: 200; line-height: 0.85; letter-spacing: -0.05em; color: var(--text-3); }
.nf .t-lead { max-width: 34rem; color: var(--text-2); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.footer-card { padding: clamp(1.75rem, 5vw, 4rem); border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
/* Footer in drei Ebenen: Abschluss-Zeile mit Ticket-Link · Logo und Links in klaren Gruppen · Rechtliches */
.footer__intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; padding-bottom: clamp(1.75rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.footer__claim { color: var(--text); font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.75rem); font-weight: 600; line-height: 1; letter-spacing: -0.045em; }
.footer__main { display: grid; gap: 2.5rem; padding-top: clamp(1.75rem, 4vw, 3rem); }
.footer__brand { display: grid; gap: 1rem; justify-items: start; align-content: start; max-width: 22rem; }
.footer__brand p { color: var(--text-2); line-height: 1.6; }
.footer__logo .logo--footer { height: 4.5rem; } /* spezifischer als .logo in den Breakpoints, sonst wird es dort kleiner */
.footer__logo { display: block; padding: 0.25rem 0; border-radius: 10px; }
.footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 2.25rem 1.75rem; } /* so viele Spalten, wie ohne Umbruch passen: Handy 1, Tablet 2, ab ~900px 3 */
.footer__heading { margin-bottom: 1rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.footer__nav ul { display: grid; gap: 1rem; }
.footer__nav li { display: flex; } /* Links mit Symbol stehen sonst ein paar Pixel höher als reine Textlinks */
.footer__nav a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-2); text-decoration: none; font-size: 1rem; line-height: 1.35; transition: color var(--dur-1) ease; }
.footer__nav a:hover { color: var(--text); }
.footer__nav a svg { flex: none; } /* Symbol nicht zusammendrücken, wenn der Text lang ist */
@media (max-width: 639px) { .footer__nav ul { gap: 0.9rem; } }
@media (min-width: 1100px) { .footer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 3rem; } }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--text-3); }
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { color: var(--text); }
/* Größere Klickflächen für kleine Textlinks (Brotkrümel, Footer) – ohne optische Änderung, mindestens 24 px hoch */
.breadcrumb a, .footer__nav ul a, .footer__bottom a { position: relative; }
.breadcrumb a::after, .footer__nav ul a::after, .footer__bottom a::after { content: ""; position: absolute; inset: -4px -3px; }

/* --------------------------------------------------------------------------
   Theatereingang: roter Samtvorhang öffnet sich langsam über dem Dashboard (beim Betreten der Website, siehe motion-init.js)
   -------------------------------------------------------------------------- */
.curtain { display: none; }
.curtain-on .curtain {
  display: block;
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  pointer-events: none; /* Inhalte und Ticketbuttons bleiben sofort klickbar */
  overflow: hidden;
  animation: curtain-failsafe 0.4s ease-out 1.9s forwards; /* falls GSAP nicht startet */
}
@keyframes curtain-failsafe { to { opacity: 0; visibility: hidden; } }
.curtain__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.38), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.55)),
    repeating-linear-gradient(90deg, #45060e 0, #780e1b 1.3rem, #9a1626 1.9rem, #560810 3.2rem);
  will-change: transform;
}
.curtain__panel--l { left: 0; transform-origin: 0 50%; box-shadow: inset -24px 0 36px -20px rgba(0, 0, 0, 0.6); }
.curtain__panel--r { right: 0; transform-origin: 100% 50%; box-shadow: inset 24px 0 36px -20px rgba(0, 0, 0, 0.6); }
.curtain__valance {
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(2.75rem, 7vh, 4.5rem);
  background: linear-gradient(180deg, #2a0409, #5c0a14 70%, #6c0c18);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
  will-change: transform;
}
.curtain__light { position: absolute; inset: 0; opacity: 0; background: radial-gradient(50% 55% at 50% 0%, rgba(255, 220, 180, 0.28), rgba(255, 200, 150, 0.06) 45%, transparent 72%); }

/* --------------------------------------------------------------------------
   Bewegung: Startzustände nur, wenn JS + Bewegung erlaubt (Termin- und Ticketkarten sind ausgenommen)
   -------------------------------------------------------------------------- */
.motion [data-reveal]:not(.is-shown) { opacity: 0; transform: translate3d(0, 24px, 0); } /* weich: 24 px, 0,75–0,95 s expo.out (main.js) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .cta-long { display: none; }
}
@media (max-width: 479px) {
  .logo { height: 2.35rem; }
}
@media (min-width: 640px) {
  .card__tools { order: 1; flex: 0 1 auto; margin-left: auto; }
  .card__head > .corner { order: 2; }
  .topbar__social { display: inline-grid; }
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
  .concepts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablet: 6 Spalten */
@media (min-width: 768px) {
  .dash { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dash > * { grid-column: 1 / -1; }
  .dash--event .area-ticket { grid-column: 1 / 4; }
  .dash--event .area-photo { grid-column: 4 / -1; }
  .dash--contact .area-press { grid-column: 1 / 4; }
  .dash--contact .area-tickets { grid-column: 4 / -1; }
  .host-big { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

/* Desktop: 12 Spalten, Navigation als Pill-Leiste in der App-Leiste */
@media (min-width: 1100px) {
  .tabs { display: block; }
  .topbar__logo { margin-right: 0; }
  .topbar__in { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 4.75rem; }
  .topbar__actions { justify-self: end; }
  .menu-toggle { display: none; }
  .island { display: none; }
  body.has-island { padding-bottom: 0; }
  .logo { height: 2.85rem; }

  .dash { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  /* Startseite: Termine für sich | (Laufband) | So läuft der Abend · Locations | Host · Bühne | Ticket-Hilfe
     Zeilen ergeben sich aus der Reihenfolge im HTML – so passt es mit und ohne Laufband */
  .dash--home .area-shows { grid-column: 1 / -1; }
  .dash--home .area-marquee { grid-column: 1 / -1; }
  .dash--home .area-format { grid-column: 1 / 8; }
  .dash--home .area-orte { grid-column: 8 / -1; }
  .dash--home .area-host { grid-column: 1 / 6; }
  .dash--home .area-crowd { grid-column: 6 / -1; }
  .dash--home .area-help { grid-column: 1 / -1; }
  /* Shows */
  .dash--shows .area-shows { grid-column: 1 / -1; grid-row: 1; }
  .dash--shows .area-faq { grid-column: 1 / 8; grid-row: 2; }
  .dash--shows .area-help { grid-column: 8 / -1; grid-row: 2; }
  .dash--shows .area-orte { grid-column: 1 / -1; grid-row: 3; }
  /* Showseite */
  .dash--event .area-ticket { grid-column: 1 / 6; grid-row: 1; }
  .dash--event .area-photo { grid-column: 6 / -1; grid-row: 1; }
  .dash--event .area-about { grid-column: 1 / 8; grid-row: 2; }
  .dash--event .area-venue { grid-column: 8 / -1; grid-row: 2 / 4; }
  .dash--event .area-more { grid-column: 1 / 8; grid-row: 3; }
  .dash--event .area-help { grid-column: 1 / -1; grid-row: 4; }
  /* Stadtseiten */
  .dash--city .area-shows { grid-column: 1 / 8; grid-row: 1; }
  .dash--city .area-story { grid-column: 8 / -1; grid-row: 1 / 3; }
  .dash--city .area-venue { grid-column: 1 / 8; grid-row: 2; }
  .dash--city .area-switch { grid-column: 1 / -1; grid-row: 3; }
  .story .story__media { flex: 1 1 18rem; aspect-ratio: auto; min-height: 18rem; }
  /* Über uns */
  .dash--about .area-host { grid-column: 1 / 8; }
  .dash--about .area-stations { grid-column: 8 / -1; }
  /* Kontakt */
  .dash--contact .area-mail { grid-column: 1 / 8; }
  .dash--contact .area-press { grid-column: 8 / -1; }
  .dash--contact .area-tickets { grid-column: 1 / 8; }
  .dash--contact .area-social { grid-column: 8 / -1; }
  .host-big { grid-template-columns: minmax(0, 1fr); }
  .host-big__media { aspect-ratio: 16 / 10; }
}
@media (min-width: 1280px) {
  .host-big { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .host-big__media { aspect-ratio: 4 / 5; }
}

@media (hover: none) {
  .btn:hover .btn__icon, .corner:hover svg, .place:hover .place__go, .ask:hover .ask__btn { transform: none; }
}

/* --------------------------------------------------------------------------
   Helles Erscheinungsbild: Feinabstimmung (Schrift auf Blau dunkel, Hover-Töne, Bildunterschriften)
   -------------------------------------------------------------------------- */
::selection { background: var(--blue); color: #0b0b0c; }
.card { box-shadow: 0 0 0 1px rgba(11, 11, 12, 0.06), 0 10px 30px -18px rgba(11, 11, 12, 0.18); }
.footer-card { box-shadow: 0 0 0 1px rgba(11, 11, 12, 0.06); }
.topbar { background: rgba(241, 241, 242, 0.86); }
.menu { background: rgba(241, 241, 242, 0.97); }
.island { background: rgba(255, 255, 255, 0.94); box-shadow: 0 0 0 1px rgba(11, 11, 12, 0.08), 0 18px 40px -16px rgba(11, 11, 12, 0.3); }
.island :focus-visible { outline-color: #0b0b0c; }

/* Schrift auf blauen Flächen bleibt dunkel */
.island__primary, .orb--hi, .orb--hi strong, .step--hi .step__icon, .faq__item[open] .faq__icon, .badge,
.show-row--featured, .show-row--featured .chip, .show-row--featured .show-row__title a { color: #0b0b0c; }
.show-row--featured .date-block, .show-row--featured:hover .date-block { background: #0b0b0c; color: #fcfcfc; }
.show-row--featured .chip--count { background: #0b0b0c; color: #fcfcfc; }
.show-row--featured .btn--primary { background: #0b0b0c; color: #fcfcfc; }
.show-row--featured .btn--primary .btn__icon { background: var(--blue); color: #0b0b0c; }
.show-row--featured .btn--primary:hover { background: #2a2a2c; }
.show-row--featured :focus-visible { outline-color: #0b0b0c; }

.btn--primary:hover { background: #2a2a2c; }
.show-row:hover .date-block, .place:hover .place__avatar { background: #dcdce0; }
.city-switch:hover { background: #f7f7f8; }
.orb:not(.orb--hi) { background: radial-gradient(circle at 50% 30%, #ffffff, var(--raise) 70%); }
.photo-card__caption .pill, .crowd__caption { background: rgba(255, 255, 255, 0.92); color: #0b0b0c; }
p a:hover, .prose a:hover, .muted a:hover, .faq__a a:hover, .fine a:hover, .contact__big:hover, a.contact__mid:hover { color: var(--accent); }
.help__icon, .checks svg, .host-card__award svg { color: var(--accent); }
.facts-line svg { color: var(--accent); }

/* --------------------------------------------------------------------------
   Glas-Ebene (nach Apples Liquid Glass): App-Leiste, Pill-Navigation, Handy-Leiste, Menü, Werkzeuge der
   Orientierungszeile und die erste Karte der Seite (Termine bzw. Ticket). Alle übrigen Karten bleiben deckend.
   -------------------------------------------------------------------------- */
body { position: relative; background: transparent; } /* Verläufe werden an der Seitenbreite abgeschnitten */
html { overflow-x: clip; }
/* Erste Karte als Glas – Zeilen darin bleiben fast deckend, Text etwas kräftiger (Vibrancy) */
.dash--home .area-shows, .dash--shows .area-shows, .dash--city .area-shows, .dash--event .area-ticket {
  background: var(--mx-glass-bg);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  box-shadow: inset 0 0 0 1px var(--mx-glass-edge), inset 0 1px 0 var(--mx-glass-hl), var(--mx-glass-shadow);
}
:is(.dash--home .area-shows, .dash--shows .area-shows, .dash--city .area-shows) .show-row:not(.show-row--featured):not(:hover) { background: var(--mx-tile-bg); }
:is(.dash--home .area-shows, .dash--shows .area-shows, .dash--city .area-shows, .dash--event .area-ticket) :is(.t-label, .fine, .show-row__meta, .ticket__price) { color: var(--mx-text-2); }
:is(.dash--home .area-shows, .dash--shows .area-shows, .dash--city .area-shows, .dash--event .area-ticket) .card__title { font-weight: 500; }

/* App-Leiste als Glas, Inhalte laufen darunter durch; statt harter Linie ein weicher Übergang am Rand */
.topbar { background: var(--mx-bar-bg); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.topbar.is-scrolled { background: var(--mx-bar-bg-scrolled); box-shadow: none; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none; background: linear-gradient(180deg, var(--mx-edge), transparent); opacity: 0; transition: opacity var(--dur-2) ease; }
.topbar.is-scrolled::after { opacity: 1; }
.tabs ul { background: var(--mx-chip-bg); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: inset 0 0 0 1px var(--mx-glass-edge), inset 0 1px 0 var(--mx-glass-hl); }
.tab[aria-current="page"] { background: var(--mx-tab-active); box-shadow: var(--mx-tab-active-shadow); }

/* Kleine Glas-Bedienelemente über dem Bühnenstreifen (leichteres Material für interaktive Elemente) */
.topbar .round, .menu-toggle, .page-head .round, .page-head .pill, .page-head .chip, .page-head .btn--ghost {
  background: var(--mx-chip-bg);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 0 0 1px var(--mx-glass-edge), inset 0 1px 0 var(--mx-glass-hl);
}
.topbar .round:hover, .page-head .round:hover { background: var(--white); color: var(--ink); box-shadow: none; }
.page-head .pill--link:hover { background: var(--mx-chip-hover); }

/* Handy-Leiste und Menü */
.island {
  background: var(--mx-island-bg);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--mx-glass-edge), inset 0 1px 0 var(--mx-glass-hl), var(--mx-glass-shadow);
}
.island__circle { background: var(--mx-chip-bg); }
.menu { background: var(--mx-menu-bg); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); }

/* Barrierefreiheit: weniger Transparenz bzw. mehr Kontrast → deckende Flächen */
@media (prefers-reduced-transparency: reduce) {
  .topbar, .island, .menu, .tabs ul,
  .dash--home .area-shows, .dash--shows .area-shows, .dash--city .area-shows, .dash--event .area-ticket,
  .topbar .round, .menu-toggle, .page-head .round, .page-head .pill, .page-head .chip, .page-head .btn--ghost {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mx-solid);
  }
}
@media (prefers-contrast: more) {
  .dash--home .area-shows, .dash--shows .area-shows, .dash--city .area-shows, .dash--event .area-ticket, .island, .tabs ul {
    background: var(--mx-solid); box-shadow: inset 0 0 0 1px var(--line-3);
  }
}

/* --------------------------------------------------------------------------
   Hintergrund-Verläufe in JCC-Blau (nach Velox/Arounda): Leuchten über die ganze Seite, Lichtbahnen und feines
   Raster oben, ein Hauch Farbe in den Karten. Nur Verläufe, keine Filter – damit es flüssig bleibt.
   -------------------------------------------------------------------------- */
body::before, body::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
body::before {
  top: 0;
  bottom: 0;
  background:
    radial-gradient(55% 900px at 0% 0%, var(--au-glow), transparent 70%),
    radial-gradient(45% 800px at 100% 32%, var(--au-glow-2), transparent 70%),
    radial-gradient(50% 900px at 8% 70%, var(--au-glow-2), transparent 70%),
    radial-gradient(45% 700px at 92% 100%, var(--au-glow), transparent 70%);
}
body::after {
  top: 0;
  height: 1100px;
  background:
    linear-gradient(116deg, transparent 4%, var(--au-beam) 13%, transparent 21%, var(--au-beam-2) 26%, transparent 33%, var(--au-beam-2) 50%, transparent 58%),
    linear-gradient(var(--au-grid) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, var(--au-grid) 1px, transparent 1px) 0 0 / 72px 72px;
  -webkit-mask-image: radial-gradient(120% 95% at 18% 0%, #000 28%, transparent 76%);
  mask-image: radial-gradient(120% 95% at 18% 0%, #000 28%, transparent 76%);
}
.dash > .card:not(.photo-card):not(.area-shows):not(.area-ticket), .footer-card {
  background-image: linear-gradient(150deg, var(--au-card-tint), transparent 45%);
}
.show-row--featured { box-shadow: 0 16px 40px -18px rgba(132, 176, 218, 0.75); }
@media (prefers-contrast: more) {
  body::before, body::after { display: none; }
}

/* --------------------------------------------------------------------------
   Feinschliff (Animations-Check, übernommen am 21.10.2026)
   -------------------------------------------------------------------------- */
/* Häufige Fragen klappen weich auf und zu: Höhe und Antwort animiert main.js (Web Animations, in allen Browsern gleich) */

/* Druck-Feedback für Filter, Chips, Pill-Links, Termin-Zeilen und Locations */
.segmented button, .chip--link, .pill--link { transition: transform 160ms var(--ease-out), background-color var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.segmented button:active, .chip--link:active, .pill--link:active { transform: scale(0.97); }
.show-row, .place { transition: transform 160ms var(--ease-out), background-color var(--dur-1) ease, box-shadow var(--dur-1) ease; }
.show-row:active:not(:has(.btn:active)), .place:active { transform: scale(0.99); }

/* „Link kopiert“: neuer Text taucht aus einer leichten Unschärfe auf */
[data-share] .btn__label { transition: opacity 200ms var(--ease-out), filter 200ms var(--ease-out); }
[data-share] .btn__label.is-swapping { opacity: 0.5; filter: blur(2px); transition: none; }

/* --------------------------------------------------------------------------
   Verspielte Effekte (static/js/effekte.js) – an/aus in content/site.json → "effekte".
   Startzustände greifen erst, wenn effekte.js läuft (html.fx-ready) und der Effekt an ist (data-fx).
   Bei „Bewegung reduzieren“ läuft effekte.js nicht: alles steht dann ruhig und vollständig da.
   -------------------------------------------------------------------------- */
/* Laufband (Startseite, zwischen Terminen und Showkonzept) */
.marquee { position: relative; overflow: hidden; padding: 0.9rem 0 0.9rem 1.6rem; border-radius: var(--r-card); background: var(--white); color: var(--ink); }
.marquee__track { display: flex; width: max-content; } /* zwei gleiche Gruppen: −50 % ergibt eine nahtlose Schleife */
.marquee__group { display: flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem; white-space: nowrap; font-size: clamp(1.1rem, 1rem + 0.8vw, 1.6rem); font-weight: 500; letter-spacing: -0.02em; }
.marquee__star { color: var(--blue); font-size: 0.8em; }

/* Wörter bzw. Buchstaben steigen aus einer unsichtbaren Kante auf (Claim, 404-Überschrift) */
.fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.fx-piece { display: inline-block; transition: transform 0.7s var(--ease-out), opacity 0.5s ease; transition-delay: calc(var(--i, 0) * var(--fx-step, 80ms)); }
.fx-ready .fx-split:not(.is-in) .fx-piece { transform: translateY(110%); }
.fx-ready .fx-split--chars:not(.is-in) .fx-piece { opacity: 0; }
.fx-split--chars { --fx-step: 24ms; }

/* So läuft der Abend: Schritte kommen nacheinander, der aktuelle wird beim Scrollen blau */
.step { --d: calc(var(--i, 0) * 120ms); transition: opacity 0.7s ease var(--d), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--d), box-shadow 0.45s ease; }
.step__icon { transition: background-color 0.45s ease, color 0.45s ease; }
.fx-ready[data-fx~="schritte"] .steps:not(.is-in) > .step { opacity: 0; transform: translateY(24px) rotate(-1.5deg); }

/* Fotos öffnen sich von unten nach oben wie ein Vorhang; darin leichte Parallaxe (Skript).
   Das Bildfenster fährt hoch, das Foto darin gegenläufig – es bleibt stehen. Zwei Verschiebungen statt clip-path:
   das rechnet die Grafikkarte, auch in Safari ruckelfrei. */
.fx-photo picture { overflow: hidden; transition: translate 1.15s cubic-bezier(0.22, 1, 0.36, 1); }
.fx-photo picture img { transition: translate 1.15s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.fx-ready .fx-photo:not(.is-in) picture { translate: 0 100%; }
.fx-ready .fx-photo:not(.is-in) picture img { translate: 0 -100%; }

/* Lichtstreif zieht einmal über die nächste Show */
.fx-ready[data-fx~="lichtstreif"] .show-row--featured { overflow: hidden; isolation: isolate; }
.fx-sweep { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.fx-sweep i { position: absolute; top: -20%; bottom: -20%; left: 0; width: 35%; transform: translateX(-160%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); }

/* Über uns: Linie zieht sich beim Scrollen durch die Stationen */
.timeline { position: relative; }
.tl__year { position: relative; z-index: 1; }
.fx-line { position: absolute; left: calc(2.925rem - 1px); width: 2px; border-radius: 2px; background: var(--line-2); pointer-events: none; }
.fx-line i { position: absolute; inset: 0; border-radius: inherit; background: var(--blue); transform-origin: 50% 0; transform: scaleY(0); }
.tl__year { transition: background-color 0.45s ease, color 0.45s ease; }
.tl__year.is-on { background: var(--blue); color: #0b0b0c; }

/* Lesefortschritt (Rechtliches) */
.fx-progress { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-nav) + 1); height: 3px; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* Lichtkegel folgt der Maus (Startseite: So läuft der Abend) */
.fx-spot-host { isolation: isolate; }
.fx-spot { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
  background: radial-gradient(280px circle at var(--x, 50%) var(--y, 30%), rgba(132, 176, 218, 0.34), transparent 70%); }
@media (hover: hover) and (pointer: fine) { .fx-spot-host:hover .fx-spot { opacity: 1; } }

/* Konfetti nach dem Teilen */
.fx-confetti { position: fixed; z-index: var(--z-menu); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; pointer-events: none; }

/* Hintergrund-Licht wird zum Seitenende hin stärker (Startseite) */
.fx-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(75% 60% at 50% 105%, rgba(132, 176, 218, 0.42), transparent 72%); }

@media (prefers-reduced-motion: reduce) {
  .show-row:active, .place:active, .segmented button:active, .chip--link:active, .pill--link:active { transform: none; }
}

/* ==========================================================================
   H3 „Bühne“ – übernommen am 21.10.2026 (Antwort auf die UX-Bewertung):
   1 ein klarer Schwerpunkt: dunkle Bühne mit großer Überschrift, darin die Termine bzw. die Ticketkarte
   2 weniger Dashboard, mehr Live-Event: Termine als Eintrittskarten, Inhalte ohne Kartenrahmen, Laufband in JCC-Blau
   3 weniger Doppelungen (kein Zähler oben, kein Start-Reiter, „Tickets“ statt „Shows & Tickets“, keine Ticket-Hilfe auf der Startseite)
   4 mehr Ruhe zwischen den Bereichen   5 Handy ohne schwebende Leiste (wird nicht mehr ausgegeben)
   Vorherige Fassung H: website/varianten/archiv/vor-H3/
   ========================================================================== */

/* ---------------------------------------------------------------- Weniger Rahmen, mehr Luft (aus H2 „Ruhiger“)
   Kacheln heben sich über die Fläche ab, eine Kante erst beim Darüberfahren */
.show-row, .place, .step, .transit li, .support__item, .concept, .tl, .host-row,
:is(.dash--home .area-shows, .dash--shows .area-shows, .dash--city .area-shows) .show-row:not(.show-row--featured):not(:hover) { box-shadow: none; }
.show-row:hover, .place:hover { box-shadow: inset 0 0 0 1px var(--hover-line); }
.step--hi { box-shadow: inset 0 0 0 1px rgba(132, 176, 218, 0.45); }
/* Hintergrund: Lichtverläufe bleiben, das feine Raster entfällt */
body::after {
  background: linear-gradient(116deg, transparent 4%, var(--au-beam) 13%, transparent 21%, var(--au-beam-2) 26%, transparent 33%, var(--au-beam-2) 50%, transparent 58%);
}
/* Showseite: Hinweise als ruhige Textzeile statt drei Chips */
.facts-line { gap: 0; color: var(--text-2); font-size: 0.875rem; }
.facts-line li { padding: 0; background: none; }
.facts-line li + li::before { content: "·"; margin: 0 0.45rem; color: var(--text-3); }
.facts-line svg { display: none; }
.card { gap: 1.25rem; padding: clamp(18px, 2vw, 28px); }

/* ---------------------------------------------------------------- 1 Bühne: Kopf + Termine als eine dunkle Fläche */
.page-head--home {
  --bild: url("../img/photos/publikum-lacht-1600.jpg"); /* gewählt am 21.10.2026; AVIF und Handy-Größe siehe unten */
  --bild-pos: 50% 70%;
  position: relative;
  isolation: isolate;
  gap: 0.9rem;
  margin-top: 0.75rem;
  padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.25rem, 4.5vw, 3.75rem) clamp(1.25rem, 2.4vw, 2rem); /* kompakt: erste Tickets auf dem Laptop im ersten Bildschirm */
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: #0b0b0c;
  box-shadow: 0 2px 0 #0b0b0c; /* keine helle Haarlinie an der Nahtstelle zur Terminliste */
  color: #fcfcfc;
}
/* Bühnenbild: auf dem Handy kleinere Datei, wo möglich AVIF (5–6× kleiner als JPEG) – ältere Browser nehmen das JPEG */
@media (max-width: 767px) { .page-head--home { --bild: url("../img/photos/publikum-lacht-1200.jpg"); } }
.page-head.has-bild { --bild: var(--bild-l); }
@media (max-width: 767px) { .page-head.has-bild { --bild: var(--bild-m); } }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .page-head--home { --bild: image-set(url("../img/photos/publikum-lacht-1600.avif") type("image/avif"), url("../img/photos/publikum-lacht-1600.jpg") type("image/jpeg")); }
  .page-head.has-bild { --bild: var(--bild-l2); }
  @media (max-width: 767px) {
    .page-head--home { --bild: image-set(url("../img/photos/publikum-lacht-1200.avif") type("image/avif"), url("../img/photos/publikum-lacht-1200.jpg") type("image/jpeg")); }
    .page-head.has-bild { --bild: var(--bild-m2); }
  }
}
.page-head--home::before, .page-head--home::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
/* Foto hell und gut erkennbar (schwarz-weiß wie alle Fotos); abgedunkelt wird nur dort, wo Text steht */
.page-head--home::before { background: var(--bild) var(--bild-pos) / cover no-repeat; filter: grayscale(1) contrast(1.08) brightness(1.08); }
.page-head--home::after {
  background:
    radial-gradient(50% 80% at 85% -10%, rgba(132, 176, 218, 0.3), transparent 62%),
    linear-gradient(90deg, rgba(11, 11, 12, 0.88) 0%, rgba(11, 11, 12, 0.62) 34%, rgba(11, 11, 12, 0.08) 68%, transparent),
    linear-gradient(0deg, #0b0b0c 0%, rgba(11, 11, 12, 0.55) 22%, transparent 48%);
}
@media (max-width: 767px) { /* Handy: Foto oben frei sichtbar, Text darunter auf dunklem Verlauf */
  .page-head--home { padding-top: 42vw; }
  .page-head--home::before { background-size: 100% auto; background-position: 50% 0; -webkit-mask-image: linear-gradient(180deg, #000 28%, transparent 52%); mask-image: linear-gradient(180deg, #000 28%, transparent 52%); }
  .page-head--home::after { background: radial-gradient(70% 30% at 85% 0%, rgba(132, 176, 218, 0.28), transparent 70%), linear-gradient(180deg, transparent 18%, rgba(11, 11, 12, 0.72) 40%, #0b0b0c 56%); }
}
.page-head--home .page-head__kicker { color: rgba(252, 252, 252, 0.68); letter-spacing: 0.02em; }
.page-head--home .page-head__h { max-width: 17ch; font-size: clamp(2.5rem, 1.3rem + 4vw, 5.25rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.05em; color: #fcfcfc; }
.page-head--home .page-head__lead--wide { max-width: 34rem; color: rgba(252, 252, 252, 0.8); }

:is(.dash--home, .dash--shows, .dash--city) .area-shows {
  margin-top: -1px;
  padding-top: 0.25rem;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: #0b0b0c !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  color: #fcfcfc;
}
:is(.dash--home, .dash--shows, .dash--city) .area-shows .card__title { color: #fcfcfc; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem); }
:is(.dash--home, .dash--shows, .dash--city) .area-shows .card__head .t-label { display: none; } /* „3 Shows im Vorverkauf“ – die Liste zeigt es ja */
:is(.dash--home, .dash--shows, .dash--city) .area-shows .corner { color: #fcfcfc; background: rgba(252, 252, 252, 0.08); box-shadow: inset 0 0 0 1px rgba(252, 252, 252, 0.18); }
:is(.dash--home, .dash--shows, .dash--city) .area-shows .corner:hover { background: #fcfcfc; color: #0b0b0c; }
:is(.dash--home, .dash--shows, .dash--city) .area-shows .card__foot, :is(.dash--home, .dash--shows, .dash--city) .area-shows .card__foot :is(p, a, span, .fine) { color: rgba(252, 252, 252, 0.72) !important; }
:is(.dash--home, .dash--shows, .dash--city) .area-shows .card__foot svg { color: var(--blue); }

/* ---------------------------------------------------------------- 2 Termine als Eintrittskarten (überall) */
.show-row {
  --nx: 5.25rem; /* Abriss-Kante hinter dem Datum */
  -webkit-mask: radial-gradient(circle 9px at var(--nx) 0, #0000 97%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 9px at var(--nx) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 9px at var(--nx) 0, #0000 97%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 9px at var(--nx) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  background-image: repeating-linear-gradient(to bottom, rgba(11, 11, 12, 0.2) 0 6px, transparent 6px 12px) !important;
  background-size: 1.5px calc(100% - 26px) !important;
  background-position: var(--nx) 13px !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}
.date-block { background: transparent !important; }
.show-row--featured .date-block, .show-row--featured:hover .date-block { background: transparent !important; color: #0b0b0c !important; }
.show-row--featured .date-block__wd, .show-row--featured .date-block__mon { color: rgba(11, 11, 12, 0.66) !important; }
.date-block__day { font-size: 2.1rem; font-weight: 500; }

/* Laufband in JCC-Blau – wie ein Festival-Bändchen zwischen Bühne und Inhalt */
.marquee { background: var(--blue); color: #0b0b0c; }
.marquee__star { color: #fcfcfc; }

/* ---------------------------------------------------------------- 2 + 4 Inhalte ohne Kartenrahmen, mehr Luft */
.dash--home { row-gap: clamp(2.5rem, 6vw, 4.75rem); column-gap: clamp(1.5rem, 4vw, 4rem); }
.dash--home .area-shows + .area-marquee { margin-top: calc(clamp(2.5rem, 6vw, 4.75rem) * -0.55); }
.dash--home > .card:not(.area-shows) {
  padding: 0;
  background: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none !important;
}
.dash--home > .card:not(.area-shows) .card__head > .corner { display: none; }
.dash--home > .card:not(.area-shows) .card__title { font-size: clamp(2rem, 1.35rem + 2vw, 3.1rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.04em; }
.dash--home :is(.step, .place) { background: #ffffff; box-shadow: 0 1px 0 rgba(11, 11, 12, 0.04), 0 14px 34px -22px rgba(11, 11, 12, 0.35) !important; }
.dash--home .step--hi { box-shadow: inset 0 0 0 1.5px var(--blue), 0 14px 34px -22px rgba(11, 11, 12, 0.35) !important; }
.dash--home .claim { font-size: clamp(2.6rem, 1.6rem + 3vw, 4.25rem); }
/* Lichtkegel ohne Kante: ohne Kartenrahmen läuft das Licht weich über den Abschnitt hinaus aus */
.dash--home .area-format .fx-spot { inset: -16rem; border-radius: 0; background: radial-gradient(300px circle at var(--x, 50%) var(--y, 30%), rgba(132, 176, 218, 0.3), rgba(132, 176, 218, 0.1) 45%, transparent 72%); }

/* ---------------------------------------------------------------- Unterseiten: dieselbe Bühne, kleiner
   Oben eine dunkle Fläche mit großer Überschrift; der wichtigste Block hängt direkt darunter
   (Shows und Stadtseiten: Terminliste, Showseite: Ticketkarte mit dem Foto der Location als Bühnenbild). */
.page-head:not(.page-head--home) {
  position: relative;
  isolation: isolate;
  gap: 0.9rem;
  margin-top: 0.75rem;
  padding: clamp(1.25rem, 3.5vw, 2.75rem) clamp(1.25rem, 4vw, 3.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: var(--r-card);
  background: #0b0b0c;
  color: #fcfcfc;
}
.page-head:not(.page-head--home)::before, .page-head:not(.page-head--home)::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.page-head:not(.page-head--home)::before { background: var(--bild, none) var(--bild-pos, 50% 50%) / cover no-repeat; filter: grayscale(1) contrast(1.08) brightness(1.05); }
.page-head:not(.page-head--home)::after {
  background:
    radial-gradient(45% 120% at 88% -20%, rgba(132, 176, 218, 0.38), transparent 62%),
    radial-gradient(35% 90% at 10% -20%, rgba(255, 230, 200, 0.12), transparent 60%);
}
.page-head.has-bild::after {
  background:
    radial-gradient(50% 80% at 85% -10%, rgba(132, 176, 218, 0.3), transparent 62%),
    linear-gradient(90deg, rgba(11, 11, 12, 0.9) 0%, rgba(11, 11, 12, 0.66) 36%, rgba(11, 11, 12, 0.1) 72%, transparent),
    linear-gradient(0deg, #0b0b0c 0%, rgba(11, 11, 12, 0.5) 24%, transparent 50%);
}
.page-head.has-bild { padding-top: clamp(2rem, 6vw, 5rem); padding-bottom: clamp(1.75rem, 4vw, 3rem); }
.page-head:not(.page-head--home) .page-head__h { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.25rem); font-weight: 600; line-height: 0.98; letter-spacing: -0.045em; color: #fcfcfc; }
.page-head:not(.page-head--home) .page-head__kicker { color: rgba(252, 252, 252, 0.68); }
.page-head:not(.page-head--home) .page-head__lead { color: rgba(252, 252, 252, 0.8); }
.page-head:not(.page-head--home) .breadcrumb, .page-head:not(.page-head--home) .breadcrumb li + li::before { color: rgba(252, 252, 252, 0.5); }
.page-head:not(.page-head--home) .breadcrumb a { color: rgba(252, 252, 252, 0.78); }
.page-head:not(.page-head--home) .breadcrumb a:hover { color: #fcfcfc; }
.page-head:not(.page-head--home) :is(.round, .pill, .chip, .btn--ghost) {
  background: rgba(252, 252, 252, 0.1) !important; color: #fcfcfc !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: inset 0 0 0 1px rgba(252, 252, 252, 0.2) !important;
}
.page-head:not(.page-head--home) :is(.round, .pill--link):hover { background: #fcfcfc !important; color: #0b0b0c !important; }
.page-head:not(.page-head--home) .chip--count { background: var(--blue) !important; color: #0b0b0c !important; box-shadow: none !important; }
.page-head:not(.page-head--home) .notice { background: rgba(241, 156, 132, 0.16); box-shadow: inset 0 0 0 1px rgba(241, 156, 132, 0.5); color: #fcfcfc; }
.page-head:not(.page-head--home) .notice a { color: #fcfcfc; }
@media (max-width: 767px) { /* Handy: Bühnenbild oben frei, Text darunter */
  .page-head.has-bild { padding-top: 46vw; }
  .page-head.has-bild::before { background-size: 100% auto; background-position: 50% 0; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 62%); mask-image: linear-gradient(180deg, #000 30%, transparent 62%); }
  .page-head.has-bild::after { background: radial-gradient(70% 30% at 85% 0%, rgba(132, 176, 218, 0.28), transparent 70%), linear-gradient(180deg, transparent 20%, rgba(11, 11, 12, 0.72) 44%, #0b0b0c 62%); }
}

/* Ohne angehängten Block: Luft bis zum ersten Abschnitt */
:is(.page-about, .page-contact, .page-legal, .page-404) .page-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

/* Bühne und erster Block als eine Fläche */
:is(.page-shows, .page-city, .page-event) .page-head { border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: 0 2px 0 #0b0b0c; }
:is(.dash--shows, .dash--city) .area-shows { padding-top: 0.25rem; }
.dash--shows .segmented, .dash--city .segmented { box-shadow: inset 0 0 0 1px rgba(252, 252, 252, 0.2); }
:is(.dash--shows, .dash--city) .area-shows .segmented button { color: rgba(252, 252, 252, 0.75); }
:is(.dash--shows, .dash--city) .area-shows .segmented button:hover { color: #fcfcfc; }
:is(.dash--shows, .dash--city) .area-shows .segmented button[aria-pressed="true"] { background: #fcfcfc; color: #0b0b0c; }
:is(.dash--shows, .dash--city) .area-shows .empty { background: rgba(252, 252, 252, 0.06); color: rgba(252, 252, 252, 0.8); box-shadow: inset 0 0 0 1px rgba(252, 252, 252, 0.16); }

/* Showseite: Ticketkarte dunkel unter der Bühne; das Foto der Location ist das Bühnenbild (style-Attribut vom Generator) */
.dash--event .area-ticket {
  margin-top: -1px;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: #0b0b0c !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  color: #fcfcfc;
}
.dash--event .area-ticket .card__title { color: #fcfcfc; }
.dash--event .area-ticket :is(.ticket__price, .fine, .fine span, .facts-line, .facts-line li) { color: rgba(252, 252, 252, 0.74) !important; }
.dash--event .area-ticket .ticket__price strong { color: #fcfcfc; }
.dash--event .area-ticket .facts-line li + li::before { color: rgba(252, 252, 252, 0.45); } /* Trennpunkte auf der dunklen Karte sichtbar */
.dash--event .area-ticket .orb:not(.orb--hi) { background: rgba(252, 252, 252, 0.08); color: #fcfcfc; box-shadow: inset 0 0 0 1px rgba(252, 252, 252, 0.18); }
.dash--event .area-ticket .orb:not(.orb--hi) span { color: rgba(252, 252, 252, 0.62); }
.dash--event .area-ticket .btn--primary { background: var(--blue); color: #0b0b0c; }
.dash--event .area-ticket .btn--primary .btn__icon { background: #0b0b0c; color: var(--blue); }
.dash--event .area-ticket .btn--primary:hover { background: var(--blue-hi); }
.dash--event .area-ticket .btn--ghost { background: transparent; color: #fcfcfc; box-shadow: inset 0 0 0 1px rgba(252, 252, 252, 0.24); }
.dash--event .area-ticket .btn--ghost .btn__icon { background: rgba(252, 252, 252, 0.1); }
.dash--event .area-ticket .btn.is-disabled { color: rgba(252, 252, 252, 0.7); box-shadow: inset 0 0 0 1px rgba(252, 252, 252, 0.25); background: repeating-linear-gradient(-45deg, rgba(252, 252, 252, 0.08) 0 6px, transparent 6px 12px); }
.dash--event .area-ticket .corner { color: #fcfcfc; background: rgba(252, 252, 252, 0.08); box-shadow: inset 0 0 0 1px rgba(252, 252, 252, 0.18); }
.dash--event .area-ticket .corner:hover { background: #fcfcfc; color: #0b0b0c; }
@media (min-width: 768px) {
  .dash--event .area-ticket { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); column-gap: clamp(1.5rem, 4vw, 3.5rem); row-gap: 0.9rem; align-items: start; }
  .dash--event .area-ticket > .card__head { grid-column: 1 / -1; }
  .dash--event .area-ticket > .orbs { grid-column: 1; grid-row: 2 / span 4; align-self: center; justify-self: start; width: min(100%, 26rem); padding-left: 0.4rem; }
  .dash--event .area-ticket > :not(.card__head):not(.orbs) { grid-column: 2; }
}

/* Stadtseiten: Termine über die ganze Breite, darunter Geschichte und Anfahrt */
@media (min-width: 1100px) {
  .dash--city .area-shows { grid-column: 1 / -1; grid-row: 1; }
  .dash--city .area-story { grid-column: 1 / 8; grid-row: 2; }
  .dash--city .area-venue { grid-column: 8 / -1; grid-row: 2; }
  .dash--city .area-switch { grid-column: 1 / -1; grid-row: 3; }
}

/* Inhalte auf allen Unterseiten ohne Kartenrahmen, mehr Luft; Kacheln heben sich weiß ab */
.dash:not(.dash--home) { row-gap: clamp(2.5rem, 6vw, 4.75rem); column-gap: clamp(1.5rem, 4vw, 4rem); }
.dash:is(.dash--shows, .dash--city, .dash--event) > .card:first-child { margin-top: -1px; }
.dash:not(.dash--home) > .card:not(:first-child):not(.ticket-card):not(.photo-card):not(.prose-card):not(.help-card):not(.koop):not(.city-switch):not(.nf),
.dash:is(.dash--about, .dash--contact) > .card:first-child:not(.koop) {
  padding: 0;
  background: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none !important;
}
.dash:not(.dash--home) > .card:not(:first-child):not(.ticket-card):not(.photo-card):not(.prose-card):not(.help-card):not(.koop):not(.city-switch):not(.nf) .card__head > .corner,
.dash:is(.dash--about, .dash--contact) > .card:first-child .card__head > .corner { display: none; }
.dash:not(.dash--home) > .card:not(:first-child):not(.help-card) .card__title,
.dash:is(.dash--about, .dash--contact) > .card:first-child .card__title { font-size: clamp(2rem, 1.35rem + 2vw, 3.1rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.04em; }
.dash:not(.dash--home) :is(.place, .concept, .tl, .transit li, .host-row, .support__item) { background: #ffffff; box-shadow: 0 1px 0 rgba(11, 11, 12, 0.04), 0 14px 34px -22px rgba(11, 11, 12, 0.35) !important; }
.dash:not(.dash--home) .help-card .card__title { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem); }

/* Dunkle Bühnen-Karten für Aufrufe: Kooperation, andere Stadt, 404 */
:is(.koop, .city-switch, .nf) { background: #0b0b0c !important; color: #fcfcfc; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
:is(.koop, .city-switch, .nf) :is(.card__title, .city-switch__name, .t-lead) { color: #fcfcfc; }
:is(.koop, .city-switch, .nf) :is(.muted, .t-label, .nf__code) { color: rgba(252, 252, 252, 0.68); }
:is(.koop, .city-switch) .corner { color: #fcfcfc; background: rgba(252, 252, 252, 0.08); box-shadow: inset 0 0 0 1px rgba(252, 252, 252, 0.18); }
.city-switch:hover { background: #1a1a1c !important; }
.city-switch:hover .corner { background: #fcfcfc; color: #0b0b0c; }
:is(.koop, .nf) .btn--primary { background: var(--blue); color: #0b0b0c; }
:is(.koop, .nf) .btn--primary .btn__icon { background: #0b0b0c; color: var(--blue); }
:is(.koop, .nf) .btn--outline { color: #fcfcfc; box-shadow: inset 0 0 0 1px rgba(252, 252, 252, 0.3); background: transparent; }
.city-switch .chip { background: rgba(252, 252, 252, 0.1); color: #fcfcfc; }

/* ---------------------------------------------------------------- Kopfleiste auf der Startseite erst nach etwas Scrollen
   (über dem großen Bühnenbild bleibt sie weg; main.js blendet sie ab 140 px ein, mit Tastatur sofort) */
.js .page-home .topbar { position: fixed; left: 0; right: 0; top: 0; transform: translateY(-110%); opacity: 0; pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, box-shadow var(--dur-2) ease; }
.js .page-home .topbar:is(.is-shown, :focus-within),
.js.is-menu-open .page-home .topbar { transform: none; opacity: 1; pointer-events: auto; }

@media (prefers-contrast: more) {
  .page-head--home::before { display: none; }
}

/* ==========================================================================
   Terminübersicht nach Monaten (übernommen am 21.10.2026, vorher Testvariante H4)
   Monatsüberschrift über jeder Gruppe (components.show_rows), darunter die Shows chronologisch von links nach rechts:
   3 je Reihe auf dem Desktop, 2 auf dem Tablet, 1 auf dem Handy (nach der Breite der Terminkarte). Alle Karten gleich hell,
   die nächste Show trägt nur das Badge „Als Nächstes“; das Ticket-Design (Kanten, gestrichelte Linie) bleibt.
   ========================================================================== */
/* ---------------------------------------------------------------- Raster und Monatsgruppen */
.shows-card .show-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0.75rem;
}
@container shows (min-width: 36rem) { .shows-card .show-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container shows (min-width: 58rem) { .shows-card .show-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Monatsüberschrift: volle Breite, deutlich mehr Abstand nach oben als zwischen den Karten */
.show-month { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 0.9rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: 0 0.15rem 0.1rem; }
.show-month:first-child { margin-top: 0.25rem; }
.show-month[hidden] { display: none; }
.show-month__title { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.show-month__rule { flex: 1; align-self: center; height: 1px; background: currentColor; opacity: 0.18; }
.show-month__count { font-size: 0.875rem; font-weight: 500; opacity: 0.62; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------- Eintrittskarte: alle gleich hell, gleich aufgebaut */
.shows-card .show-list .show-row,
.shows-card .show-list .show-row.show-row--featured {
  --nx: 6rem; /* Abriss-Kante: Innenabstand 1rem + Datum 4.5rem + halber Spaltenabstand */
  grid-template-columns: 4.5rem minmax(0, 1fr) !important;
  grid-template-rows: 1fr auto;
  column-gap: 1rem;
  row-gap: 1.2rem;
  align-content: stretch;
  padding: 1.25rem 1.2rem 1.2rem 1rem !important;
  background-color: #f7f7f8 !important;
  color: #0b0b0c !important;
  transition: transform 0.28s var(--ease-out), background-color 0.2s ease;
}
.shows-card .show-list .show-row.show-row--featured { background-image: repeating-linear-gradient(to bottom, rgba(11, 11, 12, 0.2) 0 6px, transparent 6px 12px) !important; }
.dash--event .area-more .show-list .show-row, .dash--event .area-more .show-list .show-row.show-row--featured { background-color: #ffffff !important; }

/* Datum links: Wochentag, großer Tag, Monat – überall gleich (auch bei der nächsten Show) */
.shows-card .show-row .date-block { grid-row: 1 / -1; align-self: center; width: 4.5rem; min-height: 0; padding: 0; background: transparent !important; color: #0b0b0c !important; }
.shows-card .show-row .date-block__wd { color: rgba(11, 11, 12, 0.56) !important; font-size: 0.75rem; letter-spacing: 0.1em; }
.shows-card .show-row .date-block__day { font-size: 2.5rem; font-weight: 500; line-height: 1; margin: 0.3rem 0 0.25rem; letter-spacing: -0.05em; }
.shows-card .show-row .date-block__mon { color: rgba(11, 11, 12, 0.66) !important; font-size: 0.8125rem; }

/* Rechts: Stadt · Venue · Einlass/Beginn, darunter der Button */
.shows-card .show-row .show-row__main { align-content: start; gap: 0.35rem; }
.shows-card .show-row .show-row__top { gap: 0.45rem; min-height: 1.5rem; }
/* Stadt als ruhige Zeile mit Punkt statt Chip */
.shows-card .show-row .chip--city { padding: 0; background: none !important; box-shadow: none !important; color: rgba(11, 11, 12, 0.62) !important;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.shows-card .show-row .chip--city { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 0; }
.shows-card .show-row .chip--city::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; opacity: 0.55; }
/* Venue als Titel */
.shows-card .show-row .show-row__title { font-size: 1.125rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.shows-card .show-row .show-row__title a { color: #0b0b0c !important; }
/* Einlass und Beginn als zwei klare Werte */
.show-times { display: flex; flex-wrap: wrap; gap: 0.15rem 1.1rem; margin-top: 0.55rem; }
.show-times__item { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.show-times__label { font-size: 0.8125rem; color: rgba(11, 11, 12, 0.56); }
.show-times__value { font-size: 1rem; font-weight: 500; color: rgba(11, 11, 12, 0.86); font-variant-numeric: tabular-nums; }
.show-times__unit { font-size: 0.875rem; color: rgba(11, 11, 12, 0.6); }

/* Badge „Als Nächstes“ – dezent, ersetzt die farbige Karte; Countdown steht klein daneben */
.show-next { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem 0.2rem 0.5rem; border-radius: 999px;
  background: rgba(132, 176, 218, 0.24); color: #1d3f5f; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; }
.show-next::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #3f6f9c; }
.shows-card .show-row .chip--count { padding: 0; background: none !important; box-shadow: none !important; color: rgba(11, 11, 12, 0.62) !important; font-size: 0.75rem; font-weight: 500; }

/* „Tickets kaufen“: in jeder Karte gleich – volle Breite unten, dunkel, Pfeil im hellen Kreis */
.shows-card .show-row .show-row__end { grid-column: 2 / -1 !important; grid-row: 2; align-self: end; justify-content: stretch !important; }
.shows-card .show-row .show-row__end .btn { flex: 1; justify-content: space-between; min-height: 2.9rem; padding-left: 1.15rem;
  background: #0b0b0c !important; color: #fcfcfc !important; transition: background-color 0.2s ease, transform 0.16s var(--ease-out); }
.shows-card .show-row .show-row__end .btn .btn__icon { background: #fcfcfc !important; color: #0b0b0c !important; transition: background-color 0.2s ease, transform 0.25s var(--ease-out); }
.shows-card .show-row .show-row__end .btn.is-disabled { background: repeating-linear-gradient(-45deg, rgba(11, 11, 12, 0.06) 0 6px, transparent 6px 12px) !important; color: rgba(11, 11, 12, 0.62) !important; box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.2) !important; }

/* ---------------------------------------------------------------- Zustände: ruhig und hochwertig */
@media (hover: hover) and (pointer: fine) {
  .shows-card .show-list .show-row:hover { transform: translateY(-3px); background-color: #ffffff !important; }
  .is-scrolling .shows-card .show-list .show-row:hover { transform: none; } /* nicht beim Vorbeiscrollen anheben (main.js) */
  .shows-card .show-list .show-row:hover .date-block__day { color: #3f6f9c; }
  .shows-card .show-row .show-row__end .btn:hover { background: #2a2a2c !important; }
  .shows-card .show-row .show-row__end .btn:hover .btn__icon { background: var(--blue) !important; transform: translate(2px, -2px); }
}
.date-block__day { transition: color 0.2s ease; }
/* Tastatur: deutlicher Ring um die ganze Karte */
.shows-card .show-list .show-row:focus-within { box-shadow: inset 0 0 0 2px var(--blue) !important; }
.shows-card .show-list .show-row:active:not(:has(.btn:active)) { transform: translateY(-1px) scale(0.995); }

@media (prefers-reduced-motion: reduce) {
  .shows-card .show-list .show-row:hover { transform: none; }
}

/* Handy: schmaleres Datum, damit Einlass und Beginn in eine Zeile passen */
@container shows (max-width: 30rem) {
  .shows-card .show-list .show-row,
  .shows-card .show-list .show-row.show-row--featured { --nx: 5.15rem; grid-template-columns: 3.65rem minmax(0, 1fr) !important; column-gap: 1rem; padding: 1rem 0.95rem 1rem 0.9rem !important; }
  .shows-card .show-row .date-block { width: 3.65rem; }
  .shows-card .show-row .date-block__day { font-size: 2.15rem; }
  .show-times { column-gap: 0.85rem; }
  .show-times__unit { display: none; }
}

/* Badge nur an der nächsten buchbaren Show (main.js verschiebt die Markierung, wenn eine Show vorbei ist) */
.show-row:not(.show-row--featured) .show-next { display: none; }
/* Lichtstreif über der nächsten Show: auf der hellen Karte in zartem JCC-Blau */
.fx-sweep i { background: linear-gradient(90deg, transparent, rgba(132, 176, 218, 0.38), transparent); }

/* ==========================================================================
   Feinschliff 22.10.2026 – Hierarchie und Atmosphäre (kein Redesign)
   Kleine Etiketten über Überschriften (Eyebrow), Host als große Foto-Text-Komposition, Bühne bildbetont, Footer ruhiger
   ========================================================================== */
/* Kleine Etiketten: Großbuchstaben, gesperrt – Überschriften darunter wirken dadurch größer, Texte bleiben ruhig */
.page-head__kicker, .card__heading > .t-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; width: fit-content; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(11, 11, 12, 0.06);
  color: var(--text-2); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; }
.eyebrow--dark { background: rgba(252, 252, 252, 0.1); color: rgba(252, 252, 252, 0.78); }
.muted, .step p, .tl p, .concept p { line-height: 1.6; }

/* Startseite: Host und Bühne über die ganze Breite – nach den Terminen mehr Abwechslung als Kachel neben Kachel */
@media (min-width: 1100px) { .dash--home .area-host, .dash--home .area-crowd { grid-column: 1 / -1; } }

/* Host: großes Foto im Doppelrahmen, daneben Name groß und kurzer Text */
.feature { display: grid; gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; }
@media (min-width: 768px) { .feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.feature__media { padding: 6px; border-radius: calc(var(--r-card) + 6px); background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(11, 11, 12, 0.06), 0 40px 80px -50px rgba(11, 11, 12, 0.5); }
.feature__frame { position: relative; aspect-ratio: 4 / 5; max-height: 38rem; width: 100%; border-radius: var(--r-card); overflow: hidden; background: var(--row); }
@media (min-width: 768px) and (max-width: 1099px) { .feature__frame { aspect-ratio: 3 / 4; } }
.feature__frame picture, .feature__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__text { display: grid; gap: 1.1rem; justify-items: start; max-width: 32rem; }
.feature__title { font-size: clamp(3rem, 1.6rem + 4.4vw, 6rem); font-weight: 600; line-height: 0.92; letter-spacing: -0.055em; }
.feature__text .t-lead { color: var(--text); }
.feature__text .host-card__award { margin-top: 0; }

/* Bühne: dunkle Fläche, Foto rechts (Felix Lobrecht mit dem Joey's-Schild), die Namen groß davor */
.dash--home > .card.stage-feature {
  position: relative; isolation: isolate; display: grid; align-content: end; gap: 0; min-height: clamp(26rem, 42vw, 36rem);
  padding: 0; border-radius: var(--r-card); overflow: hidden; background: #0b0b0c !important; color: #fcfcfc;
}
.stage-feature__media.crowd__media { position: absolute; inset: 0 0 0 40%; z-index: -1; min-height: 0; margin: 0; border-radius: 0; background: #0b0b0c;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); } /* Foto läuft links weich aus – keine Kante */
.stage-feature::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(11, 11, 12, 0.55), transparent 40%); }
.stage-feature .crowd__caption { left: auto; right: 1rem; top: 1rem; z-index: 1; }
.stage-feature__text { position: relative; z-index: 1; display: grid; gap: 1.2rem; justify-items: start; max-width: min(44%, 36rem); padding: clamp(1.75rem, 4vw, 3.5rem); }
.stage-feature .names { gap: 0.2rem; }
.stage-feature .names li { font-size: clamp(2rem, 1.2rem + 2vw, 3.1rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.04em; color: #fcfcfc; white-space: nowrap; }
.stage-feature .names__aka { font-size: 0.42em; font-weight: 500; letter-spacing: 0.02em; color: rgba(252, 252, 252, 0.62); vertical-align: 0.35em; white-space: nowrap; }
.stage-feature .names li.names__more { margin-top: 0.4rem; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem); font-weight: 400; letter-spacing: -0.01em; color: rgba(252, 252, 252, 0.62); }
.stage-feature .muted { color: rgba(252, 252, 252, 0.7); }
.stage-feature .link-arrow { color: #fcfcfc; }
@media (max-width: 767px) { /* Handy: Foto oben quadratisch, Text darunter */
  .dash--home > .card.stage-feature { min-height: 0; align-content: start; }
  .stage-feature__media.crowd__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 1 / 1; -webkit-mask-image: none; mask-image: none; }
  .stage-feature .crowd__caption { left: 1rem; right: auto; }
  .stage-feature .names li { white-space: normal; }
  .stage-feature::before { display: none; }
  .stage-feature__text { max-width: none; padding: 1.5rem 1.25rem 1.75rem; }
}


/* ==========================================================================
   Stadtseiten: Bühne mit Bild (22.10.2026)
   Links das Stadt-Foto mit Spielort, Adresse und Anfahrt, rechts die Tickets untereinander. So bleibt die dunkle Fläche
   gefüllt, egal ob eine oder sechs Shows anstehen. Breite Spalte: Ticket quer (Datum · Ort und Zeiten · Button).
   ========================================================================== */
.stage-split { display: grid; gap: 1rem; }
.stage-split__list { container: shows / inline-size; min-width: 0; display: grid; align-content: start; }
.stage-split .show-list { grid-template-columns: minmax(0, 1fr) !important; }
.stage-split__media { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--r-row); overflow: hidden; background: #1a1a1b; isolation: isolate; }
.stage-split__media picture, .stage-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-split__media img { filter: grayscale(1) contrast(1.16) brightness(0.98); } /* auf Schwarz etwas mehr Kontrast, sonst wirkt der Bühnennebel grau */
.stage-split__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 11, 12, 0.9), rgba(11, 11, 12, 0.35) 45%, transparent 75%); }
.stage-split__info { position: absolute; inset: auto 0 0; z-index: 1; display: grid; gap: 0.2rem; padding: clamp(1rem, 2.5vw, 1.5rem); color: #fcfcfc; }
.stage-split__venue { font-size: clamp(1.2rem, 1rem + 0.9vw, 1.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.stage-split__addr { font-size: 0.9375rem; color: rgba(252, 252, 252, 0.78); }
.stage-split__info .link-arrow { justify-self: start; min-height: 1.75rem; margin-top: 0.45rem; color: #fcfcfc; }
.stage-split__info .link-arrow svg { transition: transform 0.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .stage-split__info .link-arrow:hover svg { transform: translateX(3px); } }
/* Handy: flacher Bildstreifen, Ort und Anfahrt darunter statt über dem Foto */
@media (max-width: 639px) {
  .stage-split__media { aspect-ratio: auto; overflow: visible; background: none; }
  .stage-split__media picture { position: relative; display: block; aspect-ratio: 2 / 1; border-radius: var(--r-row); overflow: hidden; background: #1a1a1b; }
  .stage-split__media::after { display: none; }
  .stage-split__info { position: static; padding: 0.85rem 0.15rem 0.25rem; }
  .stage-split__info .link-arrow { margin-top: 0.35rem; }
}
@media (min-width: 640px) { .stage-split__media { aspect-ratio: 21 / 9; } }
@media (min-width: 1100px) {
  .stage-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
  /* Bild so hoch wie die Terminliste, bei vielen Shows bleibt es beim Scrollen stehen */
  .stage-split__media { position: sticky; top: 5.5rem; aspect-ratio: auto; height: min(100%, calc(100vh - 7rem)); min-height: 22rem; }
  .stage-split .show-month:first-child { margin-top: 0; }
}
@media (min-width: 1280px) { .stage-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@container shows (min-width: 34rem) {
  .stage-split .show-list .show-row,
  .stage-split .show-list .show-row.show-row--featured { grid-template-columns: 4.5rem minmax(0, 1fr) auto !important; grid-template-rows: auto; align-items: center; padding: 1.1rem 1.2rem 1.1rem 1rem !important; }
  .stage-split .show-row .show-row__end { grid-column: 3 !important; grid-row: 1; align-self: center; }
  .stage-split .show-row .show-row__end .btn { flex: none; min-width: 12.5rem; }
}

/* ==========================================================================
   Handy wie eine App (22.10.2026)
   Tab-Leiste unten (Start · Shows · Krefeld · Düsseldorf · Mehr), Kopfleiste weicht beim Runterscrollen,
   kompakte Ticketzeilen, Details zum Aufklappen, schlanker Footer, weiche Übergänge zwischen den Seiten.
   Gilt bis 767 px; Tablet und Desktop bleiben unverändert.
   ========================================================================== */
.tabbar, .m-more__btn, .m-all { display: none; }
.show-row .t-short { display: none; }

@media (max-width: 767px) {
  a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  body { padding-bottom: calc(5.4rem + env(safe-area-inset-bottom)); }

  /* ---------------------------------------------------------------- Tab-Leiste */
  .tabbar {
    position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(0.6rem + env(safe-area-inset-bottom)); z-index: calc(var(--z-menu) + 2);
    display: block; border-radius: 999px; background: rgba(16, 16, 18, 0.86);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    box-shadow: inset 0 0 0 1px rgba(252, 252, 252, 0.09), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  }
  .tabbar ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.15rem; padding: 0.3rem; }
  .tabbar__item {
    display: grid; justify-items: center; align-content: center; gap: 0.15rem; width: 100%; min-height: 3.35rem; padding: 0.3rem 0;
    border: 0; border-radius: 999px; background: transparent; color: rgba(252, 252, 252, 0.64); font: inherit;
    font-size: 0.6875rem; font-weight: 500; line-height: 1.1; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; user-select: none;
    transition: color 0.2s ease, background-color 0.28s ease, transform 0.16s var(--ease-out);
  }
  .tabbar__item svg { width: 22px; height: 22px; }
  .tabbar__item[aria-current="page"], .tabbar__more.is-current, .tabbar__more[aria-expanded="true"] { background: #fcfcfc; color: #0b0b0c; }
  .is-menu-open .tabbar__item[aria-current="page"]:not(.tabbar__more) { background: transparent; color: rgba(252, 252, 252, 0.64); }
  .tabbar__item:active { transform: scale(0.94); }
  .tabbar__item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

  /* Menü = „Mehr“: Städte und Shows stehen schon in der Tab-Leiste */
  .menu-toggle { display: none; }
  .menu__links li:nth-child(-n + 4) { display: none; }
  .menu__num { display: none; }
  .menu__inner { justify-content: flex-start; gap: 2.25rem; padding-bottom: calc(6.75rem + env(safe-area-inset-bottom)); } /* „Mehr“: alles oben beisammen statt auseinandergezogen */
  .menu__links a { color: var(--text); }
  html.is-menu-open { overflow: hidden; }

  /* Kopfleiste weicht beim Runterscrollen und kommt beim Hochscrollen wieder (main.js) */
  .topbar { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow var(--dur-2) ease; }
  .topbar.is-tucked:not(:focus-within),
  .js .page-home .topbar.is-shown.is-tucked:not(:focus-within) { transform: translateY(-110%); }

  /* ---------------------------------------------------------------- Weniger auf dem Handy */
  .marquee,                                   /* Laufband: Deko, auf dem Handy nur Bewegung */
  .dash--shows .area-orte,                    /* Locations: stehen in der Tab-Leiste */
  .area-about .desc-rest,                     /* Showseite: zweiter Absatz */
  .venue-card > p.muted,                      /* Beschreibung der Location */
  .story .stack,                              /* Stadtseite: Geschichte – der Leitsatz bleibt */
  .page-city .page-head .round,               /* Anfahrt-Knopf oben: steht jetzt am Foto */
  .show-list .is-extra,                       /* „Weitere Shows“: nur die nächsten drei … */
  .area-more .show-month__count { display: none !important; }
  .m-all { display: block; margin-top: 0.5rem; }    /* … darunter „Alle Shows ansehen“ */

  /* ---------------------------------------------------------------- Eingeklappte Bereiche */
  .js .m-more:not(.is-open) { display: none; }
  .js .m-more__btn {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; min-height: 3.1rem;
    padding: 0.75rem 1rem 0.75rem 1.1rem; border: 0; border-radius: var(--r-row); background: #ffffff; color: var(--text);
    font: inherit; font-size: 1rem; font-weight: 500; text-align: left; cursor: pointer;
    box-shadow: 0 1px 0 rgba(11, 11, 12, 0.04), 0 14px 34px -22px rgba(11, 11, 12, 0.35);
    transition: transform 0.16s var(--ease-out);
  }
  .js .m-more__btn:active { transform: scale(0.98); }
  .m-more__btn svg { flex: none; transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1); }
  .m-more__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  .js .m-more__btn--link { justify-content: flex-start; gap: 0.35rem; width: auto; min-height: 2.75rem; padding: 0; background: none; box-shadow: none; color: var(--text); }
  .venue__more { display: grid; gap: 0.75rem; }

  /* ---------------------------------------------------------------- Ticket-Hilfe: Titel und Knöpfe, kein Fließtext */
  .support__item { padding: 0.95rem 1rem 1rem; gap: 0.5rem; }
  .support__item .row-icon, .support__item > .muted { display: none; }
  .support__item .btn-row { padding-top: 0.1rem; }

  /* ---------------------------------------------------------------- Fotos etwas flacher */
  .feature__frame, .host-big__media { aspect-ratio: 4 / 3; }

  /* ---------------------------------------------------------------- Über uns: Showkonzept zum Wischen */
  .concepts {
    grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; gap: 0.6rem;
    margin-inline: calc(-1 * var(--gutter)); padding: 0.25rem var(--gutter) 1.25rem; scroll-padding-inline: var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .concepts::-webkit-scrollbar { display: none; }
  .concept { scroll-snap-align: start; }

  /* ---------------------------------------------------------------- Footer: Schlusssatz, Social, Kontakt, Rechtliches */
  .footer-card { padding: 1.6rem 1.25rem 1.25rem; }
  .footer__intro { padding-bottom: 1.25rem; }
  .footer__claim { font-size: 2rem; }
  .footer__intro .btn, .footer__brand, .footer__group:first-child { display: none; }
  .footer__main { padding-top: 1.25rem; gap: 1.25rem; }
  .footer__nav { gap: 1.25rem; }
  .footer__heading { margin-bottom: 0.6rem; }
  .footer__nav ul { display: flex; flex-wrap: wrap; gap: 0.45rem; }
  .footer__nav a { min-height: 2.5rem; padding: 0 0.95rem; border-radius: 999px; background: #ffffff; color: var(--text);
    font-size: 0.9375rem; box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.08); transition: transform 0.16s var(--ease-out); }
  .footer__nav a:active { transform: scale(0.97); }
  .footer__bottom { margin-top: 1.25rem; padding-top: 1rem; }
}

/* ---------------------------------------------------------------- Kompakte Ticketzeile (schmale Liste)
   Titel „Stadt · kurzer Ort“ statt Stadt-Zeile + langer Location; Countdown entfällt, „Als Nächstes“ bleibt */
@container shows (max-width: 30rem) {
  .shows-card .show-row .t-full { display: none; }
  .shows-card .show-row .t-short { display: inline; }
  .shows-card .show-row .t-sub { display: block; margin-top: 0.15rem; font-size: 0.875rem; font-weight: 400; letter-spacing: 0; color: rgba(11, 11, 12, 0.6); }
  .shows-card .show-row .t-dot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* nur für Screenreader */
  .shows-card .show-row .chip--city, .shows-card .show-row .chip--count { display: none !important; }
  .shows-card .show-row:not(.show-row--featured):not(.has-status) .show-row__top { display: none; }
  .shows-card .show-row .show-row__top { min-height: 0; }
  .shows-card .show-list .show-row,
  .shows-card .show-list .show-row.show-row--featured { row-gap: 0.85rem; padding: 0.95rem 0.95rem 0.95rem 0.9rem !important; }
  .shows-card .show-row .show-times { margin-top: 0.35rem; }
  .shows-card .show-row .show-row__end .btn { min-height: 2.75rem; }
}

/* ---------------------------------------------------------------- Weiche Übergänge zwischen den Seiten (Handy)
   Browser mit View Transitions (Chrome, Safari 18.2+) blenden die neue Seite weich ein; Tab-Leiste und Kopfleiste stehen still */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .tabbar { view-transition-name: tabbar; }
  .topbar { view-transition-name: topbar; }
  ::view-transition-old(root) { animation: 160ms ease-out both jcc-vt-out; }
  ::view-transition-new(root) { animation: 300ms cubic-bezier(0.22, 1, 0.36, 1) both jcc-vt-in; }
}
@keyframes jcc-vt-out { to { opacity: 0; } }
@keyframes jcc-vt-in { from { opacity: 0; transform: translateY(10px); } }