/* The Music of Hans Zimmer & Others
   Layout: one centred column of space artwork. Each band has its own background image that
   fades into the next at top and bottom, so the page reads as one continuous poster.
   Everything with words in it (dates, prices, names, quotes) is live text. */
:root {
  --space: #060823;        /* base colour all images fade into */
  --text: #ffffff;
  --muted: #c3c6e6;
  --glow: #8fb4ff;         /* blue stage light */
  --violet: #b46cff;       /* neon ring */
  --pink: #ff4fd8;         /* neon box */
  --gold-1: #f6e3a1; --gold-2: #d9b45a; --gold-3: #b88a2e;
  --silver-1: #f4f5f7; --silver-2: #c9ccd2; --silver-3: #9a9ea8;
  --panel-ink: #111111;
  --font-display: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Figtree", "Montserrat", "Segoe UI", system-ui, sans-serif;
  --col: 980px;
  --fade: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); font-family: var(--font-body); line-height: 1.45;
  background: url("img/stars.png") repeat, var(--space);
}
a { color: var(--glow); }
a:focus-visible, input:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gutter, .tagline, .dateline, .panels, .presenters, .titles, .venues, .audience, .dates, .foot {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.poster { max-width: var(--col); margin: 0 auto; background: var(--space); overflow: hidden; }

/* ---------- bands with fading background images ---------- */
.band { position: relative; isolation: isolate; }
.band > .bg, .band > .hero > .bg {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  -webkit-mask-image: var(--fade); mask-image: var(--fade);
}
.band-1 > .hero > .bg {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
}
.band-3 > .bg { height: 70%; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(28px, 6vw, 64px); }
.tagline {
  margin: 0 auto; max-width: 30em; text-align: center; text-transform: uppercase;
  font-weight: 400; font-size: clamp(.8rem, 2.6vw, 1.5rem); letter-spacing: .3em; line-height: 1.35;
  text-wrap: balance;
}
.logo-wrap { width: min(80%, 760px); margin: clamp(14px, 3vw, 30px) auto 0; position: relative; z-index: 2; }
.logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 24px rgba(143, 180, 255, .35)); }
.stage { position: relative; margin-top: clamp(-90px, -9vw, -30px); }
.stage-layer { display: block; width: 100%; height: auto; }
.stage-layer + .stage-layer { position: absolute; inset: 0; }
.stage-atmo { animation: haze 7s ease-in-out infinite alternate; }
@keyframes haze { from { opacity: .55; } to { opacity: 1; } }

.badge-ring {
  position: absolute; top: -4%; z-index: 3;
  width: clamp(78px, 19vw, 178px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  border: clamp(2px, .5vw, 4px) solid #fff;
  box-shadow: 0 0 14px #fff, 0 0 34px var(--violet), inset 0 0 22px var(--violet);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: .9;
  font-size: clamp(.95rem, 3.3vw, 2rem); text-shadow: 0 0 10px rgba(180, 108, 255, .9);
}
.badge-left { left: 7%; transform: rotate(-24deg); font-size: clamp(.78rem, 2.6vw, 1.6rem); }
.badge-right { right: 7%; transform: rotate(18deg); }
.badge-right span:nth-child(2), .badge-right span:nth-child(4) { font-size: 1.35em; }
.guest {
  position: absolute; left: 0; right: 0; top: 47%; z-index: 3; margin: 0;
  text-align: center; text-transform: uppercase; font-weight: 700;
  font-size: clamp(.68rem, 2.2vw, 1.3rem); letter-spacing: .04em; line-height: 1.5;
  text-shadow: 0 2px 10px #000, 0 0 18px rgba(0, 0, 0, .8);
}
.guest span { display: block; }

/* ---------- date line ---------- */
.dateline {
  position: relative; z-index: 2; margin: clamp(-34px, -2.6vw, -10px) 0 0;
  padding-top: 0; padding-bottom: clamp(18px, 3vw, 30px);
  text-align: center; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.1rem, 7.6vw, 4.6rem); line-height: 1; letter-spacing: .02em;
  text-shadow: 0 0 22px rgba(143, 180, 255, .6); text-wrap: balance;
}
.notice { margin: 0 16px 16px; padding: 12px 16px; text-align: center; background: #b23a2a; border-radius: 8px; font-weight: 700; }

/* ---------- ticket panels ---------- */
.panels {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 4vw, 48px);
  max-width: 820px; margin: 0 auto; padding-top: clamp(24px, 5vw, 56px); padding-bottom: 40px; align-items: start;
  scroll-margin-top: 12px;
}
.panel {
  display: grid; justify-items: center; gap: 6px; text-align: center; text-decoration: none;
  color: var(--panel-ink); border-radius: 14px; padding: clamp(16px, 3vw, 26px) clamp(12px, 3vw, 28px);
  box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .2s, box-shadow .2s;
}
a.panel:hover { transform: translateY(-3px); box-shadow: 0 16px 50px rgba(0,0,0,.55), 0 0 30px rgba(246, 227, 161, .25); }
.panel-gold { background: linear-gradient(160deg, var(--gold-1), var(--gold-2) 45%, var(--gold-1) 70%, var(--gold-3)); }
.panel-silver { background: linear-gradient(160deg, var(--silver-1), var(--silver-2) 45%, var(--silver-1) 70%, var(--silver-3)); margin-top: clamp(12px, 3vw, 28px); }
.panel-head { font-weight: 700; font-size: clamp(1.25rem, 3.6vw, 2rem); line-height: 1.05; text-transform: uppercase; }
.panel-sub { font-size: clamp(.7rem, 1.4vw, .8rem); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.panel-cta { font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.25rem); text-transform: uppercase; margin: 6px 0 8px; }
.panel ul { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: clamp(7px, 1.4vw, 12px); }
.panel li {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px;
  padding: 6px clamp(10px, 2vw, 18px); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(0,0,0,.08));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.kat { font-size: clamp(.68rem, 1.3vw, .75rem); font-weight: 700; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.price { font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.2rem); font-variant-numeric: tabular-nums; text-align: center; }
.panel-perk { font-size: clamp(.72rem, 1.4vw, .82rem); font-weight: 700; text-transform: uppercase; line-height: 1.25; margin-top: 8px; }
.panel.is-off { cursor: default; }
.panel.is-off .panel-cta { opacity: .55; }

/* ---------- presenters ---------- */
.kicker {
  margin: 0 0 clamp(16px, 3vw, 28px); text-align: center; text-transform: uppercase;
  font-weight: 400; font-size: clamp(.95rem, 2.6vw, 1.45rem); letter-spacing: .12em;
}
.presenters { padding-top: 10px; padding-bottom: 10px; }
.presenters ul {
  list-style: none; margin: 0 auto; padding: 0; max-width: 960px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(18px, 3vw, 28px) clamp(8px, 1.4vw, 14px);
}
.presenter { width: clamp(104px, 13.6vw, 138px); display: grid; justify-items: center; text-align: center; gap: 1px; }
.ring {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; padding: 4px; margin-bottom: 8px;
  background: conic-gradient(from 210deg, var(--glow), var(--violet), #ff6fd8, var(--glow));
  box-shadow: 0 0 18px rgba(180, 108, 255, .7), 0 0 40px rgba(143, 180, 255, .35);
}
.face { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.presenter strong { font-weight: 700; font-size: clamp(.8rem, 1.5vw, .92rem); line-height: 1.2; }
.presenter .role { font-weight: 700; font-size: clamp(.78rem, 1.4vw, .88rem); }
.presenter .film { font-size: clamp(.7rem, 1.2vw, .76rem); color: var(--muted); line-height: 1.3; }

/* ---------- film titles ---------- */
.titles {
  position: relative; z-index: 2; margin: 0; padding-top: clamp(26px, 5vw, 44px); padding-bottom: 0;
  text-align: center; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.05rem, 3.6vw, 2.15rem); line-height: 1.2; text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0,0,0,.8);
}
.titles .dot { margin: 0 .15em; }
.titles small { font-size: .62em; }

/* ---------- orchestra photo ---------- */
.orchestra { position: relative; margin-top: clamp(-50px, -4.5vw, -18px); }
.orchestra .art {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 78%, transparent 100%);
}
.presented-by {
  position: absolute; left: 0; right: 0; bottom: 6%; margin: 0; text-align: center;
  text-transform: uppercase; font-weight: 700; font-size: clamp(.8rem, 2.4vw, 1.4rem); letter-spacing: .03em;
  text-shadow: 0 2px 12px #000;
}

/* ---------- venues ---------- */
.venues {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center;
  max-width: 900px; margin: 0 auto; padding-top: 10px; padding-bottom: clamp(30px, 6vw, 60px);
}
.venues-text { text-align: center; }
.venues-intro { margin: 0 0 16px; font-weight: 700; font-size: clamp(.9rem, 1.8vw, 1.05rem); line-height: 1.4; }
.venues ul { list-style: none; margin: 0; padding: 0; font-size: clamp(.9rem, 1.8vw, 1.02rem); line-height: 1.6; }
.venues b { font-weight: 700; }
.neon-box {
  padding: clamp(20px, 4vw, 40px); border-radius: 4px;
  border: 3px solid #ffd2f6;
  box-shadow: 0 0 10px var(--pink), 0 0 30px var(--pink), 0 0 60px rgba(120, 90, 255, .6), inset 0 0 26px var(--pink);
  background: radial-gradient(circle at 50% 50%, rgba(80, 40, 160, .5), rgba(6, 8, 35, .9));
}

/* ---------- audience ---------- */
.audience { padding-bottom: 10px; }
.audience ul.quotes {
  list-style: none; margin: 0 auto; padding: 0; max-width: 900px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 26px);
}
.quote {
  aspect-ratio: 289 / 420; display: grid; place-items: center; padding: 16% 12%;
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
}
.quote blockquote { margin: 0; text-align: center; font-size: clamp(.9rem, 1.7vw, 1.05rem); line-height: 1.4; }

/* ---------- videos (preview image + play button; video loads on click) ---------- */
.trailer { padding: clamp(18px, 3vw, 34px) 0 0; }
.video {
  -webkit-appearance: none; appearance: none; font: inherit;
  position: relative; display: block; width: 100%; margin: 0 auto; padding: 0; border: 0; cursor: pointer;
  background: #05061c; overflow: hidden; border-radius: 14px; color: inherit;
  box-shadow: 0 0 0 1px rgba(143,180,255,.35), 0 10px 40px rgba(0,0,0,.45);
}
.video-wide { aspect-ratio: 16 / 9; max-width: 900px; }
.video-tall { aspect-ratio: 9 / 16; }
.video picture, .video .poster-img, .video iframe, .video video {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block;
}
.video .poster-img { transition: transform .5s ease, filter .3s ease; }
.video:hover .poster-img, .video:focus-visible .poster-img { transform: scale(1.03); filter: brightness(1.08); }
.video:focus-visible { outline: 3px solid var(--gold, #e7c98e); outline-offset: 3px; }
.play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(54px, 8vw, 84px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: rgba(8, 10, 40, .55); border: 2px solid rgba(255,255,255,.85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 0 24px rgba(201,162,94,.55);
}
.video-tall .play { width: clamp(44px, 6vw, 60px); }
.play svg { width: 44%; fill: #fff; margin-left: 8%; }
.video:hover .play { background: rgba(201,162,94,.85); border-color: #fff; }
.audience-videos {
  list-style: none; margin: 0 auto clamp(18px, 3vw, 30px); padding: 0; max-width: 900px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 26px);
}
.video-soon {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); white-space: nowrap;
  padding: 4px 10px; border-radius: 99px; font-size: .78rem; background: rgba(6,8,35,.85);
}

/* ---------- closing ---------- */
.closing .art { display: block; width: 100%; height: auto; margin-top: clamp(10px, 3vw, 30px); }
.foot { position: relative; text-align: center; padding-top: 0; padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: .85rem; display: grid; gap: 12px; justify-items: center; }
.socials { display: flex; gap: 18px; justify-content: center; margin-top: clamp(-70px, -6vw, -30px); }
.socials img { display: block; width: 44px; height: 44px; }
.legal { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.legal a { color: var(--text); }
.disclaimer { margin: 0; max-width: 44rem; }

/* ---------- date list on the master page ----------
   Compact: search on top, the next 6 dates as one-line rows, the rest behind "Alle Termine anzeigen". */
.dates { max-width: 640px; margin: 0 auto; padding-bottom: 10px; position: relative; z-index: 2; }
.dates-label { display: block; text-align: center; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.dates input {
  width: 100%; min-height: 52px; padding: 0 20px; font: inherit; font-size: 1rem; color: var(--text);
  background: rgba(6, 8, 35, .75); border: 1px solid rgba(143,180,255,.55); border-radius: 999px;
}
.dates input::placeholder { color: var(--muted); }
.dates ul { list-style: none; margin: 12px 0 0; padding: 0; border-radius: 14px; overflow: hidden;
  background: rgba(6, 8, 35, .78); box-shadow: inset 0 0 0 1px rgba(143,180,255,.25); }
.dates ul.is-collapsed [data-more] { display: none; }
.date-row {
  display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) auto auto; align-items: center; gap: 0 12px;
  min-height: 52px; padding: 8px 16px; color: var(--text); text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.07);
}
.dates li:first-child .date-row { border-top: 0; }
.date-row:hover, .date-row:focus-visible { background: rgba(143,180,255,.14); }
.date-row .d { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.date-row .d b { color: var(--text); font-weight: 700; }
.date-row .c { font-weight: 700; font-size: 1.02rem; line-height: 1.2; min-width: 0; }
.date-row .v { grid-column: 2; color: var(--muted); font-size: .8rem; line-height: 1.25; min-width: 0; }
.date-row .go { grid-column: 4; grid-row: 1 / span 2; font-size: 1.6rem; line-height: 1; color: var(--gold-2); }
.badge { grid-column: 3; grid-row: 1 / span 2; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; }
.badge-few, .badge-pp { background: #b23a2a; color: #fff; }
.badge-sold { background: #fff; color: #111; }
.more-btn {
  display: block; margin: 12px auto 0; padding: 12px 22px; min-height: 46px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .95rem; color: var(--text);
  background: transparent; border: 1px solid rgba(143,180,255,.55); border-radius: 999px;
}
.more-btn:hover { background: rgba(143,180,255,.12); }
.empty { color: var(--muted); text-align: center; margin: 12px 0 0; }

/* ---------- phones ---------- */
.mobile-bar { display: none; }
@media (max-width: 640px) {
  .venues { grid-template-columns: minmax(0, 1fr); }
  .neon-box { width: min(78%, 320px); margin: 0 auto; order: -1; }
  .audience ul.quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
  .audience-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
  .trailer .video-wide { aspect-ratio: 9 / 16; max-width: min(80vw, 310px); }
  .mobile-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: rgba(6, 8, 35, .94); border-top: 1px solid rgba(143,180,255,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .mb-when { font-size: .85rem; font-weight: 700; line-height: 1.3; min-width: 0; }
  .mb-btn { background: linear-gradient(160deg, var(--gold-1), var(--gold-2)); color: var(--panel-ink); font-weight: 700; text-transform: uppercase; text-decoration: none; padding: 12px 24px; border-radius: 999px; }
  .mobile-bar { transform: translateY(110%); transition: transform .3s ease; }
  body.bar-visible .mobile-bar { transform: none; }
  body.has-bar { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  @media (prefers-reduced-motion: reduce) { .mobile-bar { transition: none; } }
}
@media (max-width: 440px) {
  .panels { grid-template-columns: minmax(0, 1fr); max-width: 360px; }
  .panel-silver { margin-top: 0; }
}

/* ---------- legal pages (Impressum, Datenschutz) ---------- */
.site-head { padding: 16px; text-align: center; }
.site-head .brand { color: var(--text); font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; text-transform: uppercase; text-decoration: none; }
.site-head nav { display: none; }
.section { padding: 40px 16px; }
.wrap { max-width: 46rem; margin: 0 auto; }
.label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--glow); }
.section h2 { font-family: var(--font-display); font-size: 3rem; text-transform: uppercase; margin: 8px 0 16px; }
.site-foot { padding: 24px 16px 40px; color: var(--muted); font-size: .85rem; }
.site-foot .foot-links { display: flex; gap: 20px; }
.site-foot a { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .panel { transition: none; }
  .stage-atmo { animation: none; }
}

/* ---------- the one ticket button ----------
   Gold on blue/purple = complementary colour, the strongest contrast on this page.
   At least 64px tall (well above the 44-48px minimum tap size), full width on phones,
   one clear action verb, price and perk directly under it, repeated after each content block. */
.cta {
  position: relative; z-index: 3; display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: clamp(18px, 4vw, 36px) max(16px, env(safe-area-inset-right, 0px)) clamp(26px, 5vw, 48px) max(16px, env(safe-area-inset-left, 0px));
  scroll-margin-top: 16px;
}
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  width: min(100%, 520px); min-height: clamp(64px, 9vw, 84px); padding: 0 34px;
  border-radius: 999px; text-decoration: none; color: #15110a;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.15rem, 3.2vw, 1.6rem); letter-spacing: .04em;
  background: linear-gradient(180deg, #fff1bf 0%, #f6d77a 38%, #e2ad3d 72%, #c98f26 100%);
  box-shadow:
    0 0 0 2px rgba(255, 241, 191, .9),
    0 0 26px rgba(255, 196, 80, .75),
    0 0 70px rgba(255, 170, 60, .45),
    0 14px 30px rgba(0, 0, 0, .5),
    inset 0 -4px 0 rgba(120, 70, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .8);
  animation: cta-glow 2.8s ease-in-out infinite;
  transition: transform .15s ease, filter .15s ease;
}
.cta-btn:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.06); }
.cta-btn:active { transform: translateY(1px) scale(.99); }
.cta-btn:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.cta-arrow { width: 1.2em; height: 1.2em; flex: none; transition: transform .15s ease; }
.cta-btn:hover .cta-arrow { transform: translateX(4px); }
.cta-btn.is-off { animation: none; cursor: default; color: #3b3424; filter: saturate(.4) brightness(.85); }
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,241,191,.9), 0 0 22px rgba(255,196,80,.6), 0 0 56px rgba(255,170,60,.35), 0 14px 30px rgba(0,0,0,.5), inset 0 -4px 0 rgba(120,70,0,.35), inset 0 2px 0 rgba(255,255,255,.8); }
  50%      { box-shadow: 0 0 0 2px rgba(255,241,191,1), 0 0 34px rgba(255,196,80,.9), 0 0 90px rgba(255,170,60,.6), 0 14px 30px rgba(0,0,0,.5), inset 0 -4px 0 rgba(120,70,0,.35), inset 0 2px 0 rgba(255,255,255,.8); }
}
.cta-note { margin: 4px 0 0; font-weight: 700; font-size: clamp(.95rem, 2vw, 1.1rem); text-shadow: 0 2px 10px #000; }
.cta-perk { margin: 0; max-width: 32rem; font-size: clamp(.85rem, 1.8vw, .98rem); color: #ffe9a8; text-shadow: 0 2px 10px #000; }
.cta-few { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; background: #c2352a; color: #fff; padding: 5px 12px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .cta-btn { animation: none; transition: none; } }

/* nearest-date search */
.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1 1 auto; min-width: 0; }
.near-btn {
  flex: none; min-height: 52px; padding: 0 18px; cursor: pointer; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: .9rem; color: var(--text);
  background: rgba(143,180,255,.16); border: 1px solid rgba(143,180,255,.55);
}
.near-btn:hover { background: rgba(143,180,255,.28); }
.near-btn:disabled { opacity: .6; cursor: default; }
.near-note { margin: 12px 4px 0; text-align: center; font-weight: 700; color: var(--gold-1); }
.date-row .km { grid-column: 3; grid-row: 1 / span 2; font-size: .78rem; font-weight: 700; color: var(--gold-1); white-space: nowrap; }
.dates-credit { margin: 10px 0 0; text-align: center; font-size: .7rem; color: var(--muted); opacity: .7; }
@media (max-width: 400px) { .near-btn { padding: 0 14px; font-size: .82rem; } }

/* =====================================================================
   Match to the user's poster design (2026-11-05). Reference width 980px:
   above that the whole poster is scaled to the window (--z set in <head>),
   so laptops and big screens see exactly the same composition, edge to edge.
   ===================================================================== */
@media (min-width: 981px) {
  .poster { max-width: 980px; zoom: var(--z, 1); }
}

/* hero */
.logo-wrap { width: min(50%, 490px); margin-top: clamp(10px, 3.2vw, 32px); }
.hero { padding-top: clamp(28px, 9vw, 92px); }
.stage { margin-top: clamp(-40px, -3.2vw, -12px); }
.badge-ring { top: 4%; width: clamp(70px, 16.4vw, 160px); font-size: clamp(.8rem, 2.9vw, 1.75rem); line-height: .92; }
.badge-left { left: 17%; transform: rotate(-30deg); font-size: clamp(.8rem, 2.9vw, 1.75rem); }
.badge-right { right: 17.5%; transform: rotate(16deg); }
.guest { top: 46%; font-size: clamp(.66rem, 2.05vw, 1.25rem); }
.dateline {
  margin-top: clamp(-30px, -2.4vw, -8px);
  font-size: clamp(1.45rem, 3.9vw, 2.35rem); letter-spacing: .01em;
  text-shadow: 0 0 18px rgba(143, 180, 255, .55), 0 2px 8px rgba(0,0,0,.6);
}

/* presenters */
.kicker { font-size: clamp(.85rem, 1.75vw, 1.05rem); letter-spacing: .14em; margin-bottom: clamp(12px, 2vw, 20px); }
.presenters ul { max-width: 740px; gap: clamp(14px, 2vw, 20px) clamp(6px, .9vw, 9px); }
.presenter { width: clamp(84px, 11.5vw, 112px); }
.ring { padding: 3px; margin-bottom: 6px; }
.presenter strong { font-size: clamp(.74rem, 1.3vw, .8rem); }
.presenter .role { font-size: clamp(.72rem, 1.3vw, .78rem); }
.presenter .film { font-size: clamp(.62rem, 1vw, .62rem); line-height: 1.25; }

/* film titles: four lines over the top of the orchestra photo */
.titles { font-weight: 800; font-size: clamp(1rem, 3.25vw, 2rem); line-height: 1.1; padding-top: clamp(14px, 2.2vw, 22px); }
@media (min-width: 700px) { .titles .tl { display: block; } .titles .tl + .dot { display: none; } .titles small { display: inline; } }
.cta + .titles { padding-top: 0; }
.orchestra { margin-top: clamp(-70px, -7vw, -24px); }
.orchestra + .presenters { padding-top: clamp(10px, 2vw, 20px); }
@media (min-width: 700px) {
  .orchestra .art { aspect-ratio: 980 / 400; object-fit: cover; object-position: 50% 62%; }
}
.presented-by { bottom: 4%; font-size: clamp(.8rem, 2.1vw, 1.3rem); }

/* venues + trailer in the neon box */
.band-3 { overflow: hidden; }
.band-3 > .bg { height: 100%; transform: scale(-1.35, 1.35); transform-origin: 50% 100%; object-position: center bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 26%, #000 36%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, transparent 26%, #000 36%, #000 100%); }
.venues { grid-template-columns: minmax(0, 190px) minmax(0, 345px); justify-content: center; gap: clamp(16px, 2.4vw, 24px); max-width: none; padding-bottom: clamp(24px, 4vw, 40px); }
.neon-box.has-video { padding: 0; border-width: 3px; border-color: #e9e4ff; border-radius: 2px;
  box-shadow: 0 0 8px #fff, 0 0 18px var(--violet), 0 0 40px rgba(120, 90, 255, .7), inset 0 0 14px var(--violet); }
.neon-box .video { border-radius: 0; box-shadow: none; max-width: none; }
@media (min-width: 641px) {
  .venues-intro { font-size: .72rem; line-height: 1.3; margin-bottom: 10px; }
  .venues ul { font-size: .68rem; line-height: 1.38; }
}

/* audience: video inside the blue frame, quote underneath */
.audience .kicker { font-weight: 700; letter-spacing: .01em; font-size: clamp(1rem, 2.15vw, 1.3rem); }
.acards {
  list-style: none; margin: 0 auto; padding: 0; max-width: 530px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 3vw, 30px);
}
.acard { display: grid; gap: 8px; align-content: start; }
/* The blue frame keeps its shape with a padding-based height (works in every browser, Safari included);
   the video sits absolutely inside the frame's window, so no percentage heights are needed. */
.acard-frame {
  position: relative; height: 0; padding: 0 0 194.8%; overflow: hidden; align-self: start;
  background-size: 100% 100%; background-repeat: no-repeat;
}
.acard-frame .video-tall {
  position: absolute; left: 5.2%; right: 5.2%; top: 10.7%; bottom: 9.2%;   /* measured on frame.webp: video edges meet the neon lines */
  width: auto; height: auto; margin: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none;
}
.acard-frame .play { width: clamp(30px, 3.4vw, 34px); background: rgba(255,255,255,.92); border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.acard-frame .play svg { fill: #111; }
.acard blockquote { margin: 0; text-align: center; font-size: clamp(.78rem, 1.1vw, .66rem); line-height: 1.3; color: #fff; }
@media (min-width: 641px) { .acard blockquote { font-size: .66rem; } }
.video-soon { font-size: .62rem; padding: 3px 8px; bottom: 8px; }

/* ending: astronaut on the space background, social icons on the planet */
.closing .art { margin-top: 0; }
.socials { margin-top: clamp(-110px, -10.5vw, -40px); position: relative; z-index: 2; gap: clamp(12px, 1.8vw, 18px); }
.socials img { width: clamp(34px, 4vw, 38px); height: auto; }
.foot { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); font-size: .72rem; gap: 8px; }

@media (max-width: 640px) {
  .logo-wrap { width: 74%; }
  .badge-ring { top: -6%; width: 86px; font-size: .82rem; }
  .badge-left { left: 3%; font-size: .78rem; }
  .badge-right { right: 3%; }
  .acards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 340px; gap: 18px 16px; }
  .acard blockquote { font-size: .82rem; }
  .acard-frame .play { width: 40px; }
  .neon-box.has-video { width: 100%; }
  .venues { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin: 0 auto; }
}

/* (band-2 no longer sits above band-3: the gold button's glow may overflow upwards, see below) */
.closing { position: relative; isolation: isolate; }
.closing-bg {
  position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; width: 100%; height: 140%;
  object-fit: cover; object-position: center 40%; transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 35%, #000 88%, transparent 100%);
}
.audience, .venues { position: relative; z-index: 2; }

/* hero stage = the real concert photo, full width, fading into the space art above and below */
.stage-layer.stage-photo, .stage > .stage-layer:first-child {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 14%, #000 32%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 14%, #000 32%, #000 84%, transparent 100%);
}
.guest { top: 59%; }

/* main page: no date line, so the gold button sits on the dark lower edge of the stage photo */
.is-master .dateline { padding-bottom: 0; margin-top: 0; height: 0; overflow: hidden; }
.is-master .band-2 > .cta:first-of-type { margin-top: clamp(-30px, -2.2vw, -10px); padding-top: 0; }

/* ---------- hero as one artwork (the user's poster design) ---------- */
.hero.hero-art { padding: 0; position: relative; }
.hero-art-img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 93%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 93%, transparent 100%);
}
.hero-art .guest { top: 68.5%; }
.hero-art + .dateline { margin-top: clamp(-60px, -6vw, -16px); }
.is-master .hero-art + .dateline { margin-top: 0; }
/* phones: zoom into the artwork so the title reads bigger (edges are cropped) */
@media (max-width: 640px) {
  .hero-art-frame { width: 128%; margin-left: -14%; }
  .hero.hero-art { overflow: hidden; }
}

/* ---------- text sizes after review (6 Nov) ---------- */
/* perk line: selling argument, bold */
.cta-perk { font-weight: 700; font-size: clamp(.95rem, 1.9vw, 1.1rem); }
/* venue list and intro inside the neon box */
.venues-intro { font-size: clamp(.95rem, 1.9vw, 1.15rem); }
.venues ul { font-size: clamp(.92rem, 1.8vw, 1.12rem); }
@media (min-width: 641px) {
  .venues-intro { font-size: .82rem; line-height: 1.35; }
  .venues ul { font-size: .8rem; line-height: 1.5; }
}
/* audience quotes */
.audience blockquote { font-size: clamp(.9rem, 1.6vw, 1rem); }
@media (min-width: 641px) { .audience blockquote { font-size: .78rem; line-height: 1.35; } }
/* presenters */
.presenter strong { font-size: clamp(.84rem, 1.5vw, .92rem); }
.presenter .role { font-size: clamp(.82rem, 1.4vw, .88rem); }
.presenter .film { font-size: clamp(.72rem, 1.1vw, .72rem); }
/* sticky bar on phones */
.mb-when { font-size: clamp(.9rem, 2.4vw, 1rem); }
@media (max-width: 640px) {
  .guest { font-size: .76rem; }
  .cta-note { font-size: 1rem; }
}

/* text over the artwork (tagline and badge texts are HTML, the rings are in the picture) */
.hero-art-frame { position: relative; }
.hero-art .guest { position: absolute; }
.art-tagline {
  position: absolute; left: 10%; right: 10%; top: 12.4%; transform: translateY(-50%); z-index: 3;
  max-width: none; font-size: clamp(.62rem, 2.4vw, 1.45rem); letter-spacing: .28em; line-height: 1.4;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.badge-text {
  position: absolute; z-index: 3; width: 15%; aspect-ratio: 1; display: grid; place-content: center; text-align: center;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: .9;
  color: #fff; text-shadow: 0 0 5px rgba(0,0,0,.95), 0 2px 4px rgba(0,0,0,.85), 0 0 14px rgba(180, 108, 255, .8);
}
.badge-text span { display: block; }
.badge-text.badge-left { left: 25%; top: 56.1%; transform: translate(-50%, -50%) rotate(-24deg); font-size: clamp(.62rem, 2.55vw, 1.55rem); }
.badge-text.badge-right { left: 74%; top: 54.84%; transform: translate(-50%, -50%) rotate(14deg); font-size: clamp(.7rem, 2.8vw, 1.7rem); }
.badge-text.badge-right span:nth-child(2), .badge-text.badge-right span:nth-child(4) { font-size: 1.35em; }
.badge-text.badge-left span:nth-child(1), .badge-text.badge-left span:nth-child(3) { font-size: 1.22em; }
.badge-text.badge-left span:nth-child(2) { letter-spacing: -.01em; }
@media (max-width: 640px) {
  .art-tagline { font-size: 2.45vw; }
  .badge-text.badge-left { font-size: 2.7vw; }
  .badge-text.badge-right { font-size: 3vw; }
  .hero-art .guest { font-size: 2.6vw; }
}

/* full-screen video overlay */
.video-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .96);
  display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.video-overlay video, .video-overlay iframe {
  width: min(100%, 177.78vh); max-height: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; display: block;
}
.video-overlay video[data-vertical], .video-overlay.is-vertical video, .video-overlay.is-vertical iframe { width: min(100%, 56.25vh); aspect-ratio: 9 / 16; }
.video-close {
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.5); color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
body.video-open { overflow: hidden; }

.cta-when { margin: 0 0 4px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 3vw, 1.6rem); letter-spacing: .02em; text-shadow: 0 0 14px rgba(143,180,255,.5), 0 2px 8px rgba(0,0,0,.6); }

/* the gold button's glow must not be cut off at the top of the last band
   (the band's background image is masked, so letting it overflow is harmless; .poster clips the sides) */
.band-3 { overflow: visible; }
/* astronaut picture melts into the dark footer instead of ending with a hard edge */
.closing .art {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
}
.foot { margin-top: clamp(-40px, -4vw, -16px); }

/* Soft seams between the sections, drawn as gradients on top of the background pictures.
   They don't depend on mask support, so every browser gets the same smooth transition. */
.band-2::after, .band-3::before, .closing::after, .hero.hero-art::after {
  content: ""; position: absolute; left: 0; right: 0; pointer-events: none;
}
.band-2::after {
  bottom: 0; height: clamp(160px, 24vw, 300px); z-index: -1;
  background: linear-gradient(to bottom, rgba(6, 8, 35, 0) 0, rgba(6, 8, 35, .6) 55%, var(--space) 100%);
}
.band-3::before {
  top: 0; height: clamp(200px, 30vw, 380px); z-index: 0;
  background: linear-gradient(to bottom, var(--space) 0, rgba(6, 8, 35, .6) 45%, rgba(6, 8, 35, 0) 100%);
}
.closing::after {
  bottom: 0; height: 28%; z-index: 1;
  background: linear-gradient(to bottom, rgba(6, 8, 35, 0) 0, var(--space) 100%);
}
.hero.hero-art::after {
  bottom: 0; height: 9%; z-index: 2;
  background: linear-gradient(to bottom, rgba(6, 8, 35, 0) 0, var(--space) 100%);
}

/* presenter cards: same row heights on every card, so names, roles and film lines line up */
.presenter { min-width: 0; grid-template-rows: auto minmax(2.45em, auto) minmax(2.5em, auto) minmax(2.6em, auto); align-content: start; }
.presenter strong, .presenter .role { hyphens: manual; }
.presenter strong { align-self: end; display: block; }
.presenter .role, .presenter .film { align-self: start; }

/* The gold button's glow spreads over the seam into the section above (nothing sits on top of it).
   The last band's enlarged background picture is clipped to the band with clip-path (in its own,
   unscaled coordinates: 35 % above and 17.5 % on each side are cut away), so it can never overlap
   the presenters, whether or not the browser applies the mask. */
.band-3 { overflow: visible; }
.band-3 > .bg { clip-path: inset(25.93% 12.963% 0 12.963%); }

/* sticky bar on phones: line 1 = date · time · city (may wrap), line 2 = venue (cut with … if very long);
   the button never wraps */
.mb-when { display: block; min-width: 0; flex: 1 1 auto; }
.mb-date, .mb-city { display: block; }
.mb-venue { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; color: #e9e6ff; }
.mb-btn { flex: none; white-space: nowrap; }

/* ---------- sticky ticket bar on tablets and desktops ----------
   Same bar as on phones, but as one line and only after the visitor has scrolled past the first
   gold button (hero.js adds .bar-visible to <body>); it slides in from the bottom. */
@media (min-width: 641px) {
  .mobile-bar {
    display: flex; justify-content: center; align-items: center; gap: 28px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
    padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(6, 8, 35, .92); border-top: 1px solid rgba(143,180,255,.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
    transform: translateY(110%); transition: transform .35s ease;
  }
  body.bar-visible .mobile-bar { transform: none; }
  /* one line, one size: date · city · venue (city bold, the rest regular) */
  .mb-when { display: flex; align-items: baseline; gap: 0; flex: 0 1 auto; font-size: 1.05rem; font-weight: 400; line-height: 1.3; color: #e9e6ff; }
  .mb-date, .mb-city, .mb-venue { display: inline; font: inherit; color: inherit; }
  .mb-city { font-weight: 700; color: #fff; }
  .mb-date::after, .mb-city::after { content: "\00a0·\00a0"; font-weight: 400; color: rgba(233, 230, 255, .7); }
  .mb-venue { max-width: 34vw; }
  .mb-btn {
    background: linear-gradient(180deg, #fff1bf 0%, #f6d77a 38%, #e2ad3d 72%, #c98f26 100%); color: #15110a;
    font-weight: 700; text-transform: uppercase; text-decoration: none; letter-spacing: .04em;
    padding: 13px 30px; border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255, 241, 191, .9), 0 0 22px rgba(255, 196, 80, .6), 0 8px 20px rgba(0, 0, 0, .5);
  }
  .mb-btn:hover { filter: brightness(1.06); }
  body.has-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 641px) and (prefers-reduced-motion: reduce) { .mobile-bar { transition: none; } }

/* loading ring while a video is being fetched (preview only) */
.video-overlay.is-loading::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; border: 4px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: spin 1s linear infinite; z-index: 1;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* "Mit dem Hollywood Film Orchestra" and "Unsere Stargäste aus den Filmen": one size, one weight */
.presented-by, .presenters .kicker { font-weight: 700; letter-spacing: .06em; font-size: clamp(.95rem, 2.2vw, 1.3rem); text-shadow: 0 2px 12px #000; }