/* Die epische Musik zu Der Herr der Ringe – Das Konzert
   Built from the user's flat design (980 px wide). Background bands (img/bands/*.webp) have every text,
   button, portrait and video removed; those are live HTML. Desktop (>= 900 px): the design 1:1, scaled
   to the window (--z). Phones/tablets: stacked layout, the gold frame as a thin border on both sides. */

@font-face { font-family: "Axiforma"; font-weight: 400; font-display: swap; src: url(fonts/Axiforma-Regular.woff2) format("woff2"); }
@font-face { font-family: "Axiforma"; font-weight: 800; font-display: swap; src: url(fonts/Axiforma-ExtraBold.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-semi-condensed-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Tungsten"; font-weight: 700; font-display: swap; src: url(fonts/Tungsten-Bold.woff2) format("woff2"); }

:root {
  --base: #050604;
  --text: #ffffff;
  --yellow: #fffe98;                     /* the pale gold-yellow of the design's texts */
  --pale: #dcf2cc;                       /* "by …" under the song titles */
  --sans: "Axiforma", "Figtree", "Montserrat", system-ui, sans-serif;
  --condensed: "Tungsten", "Oswald", "Arial Narrow", sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--base); color: var(--text); font-family: var(--sans); line-height: 1.35; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, p, blockquote { margin: 0; }

.poster { position: relative; width: 100%; overflow: hidden; background: var(--base); }
.band { position: relative; isolation: isolate; }
.band > .plate { position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.band > * { position: relative; z-index: 1; }
.band > .plate { z-index: -1; }
.yellow { color: var(--yellow); }

/* ================================================================ phones and tablets (< 900 px) */
/* gold frame as a thin border down both sides (transparent gold tile over the page, see tools/make_lotr_assets.py) */
.frame-l, .frame-r { position: absolute; z-index: 5; top: 0; bottom: 0; width: 4.6vw; max-width: 30px; background-repeat: repeat-y; background-size: 100% auto; pointer-events: none; }
.frame-l { left: 0; } .frame-r { right: 0; }
/* soft joins between separately zoomed pictures */
.band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none; height: 12vw; max-height: 100px; }
.band::before { top: 0; background: linear-gradient(var(--seam-t, var(--base)), transparent); }
.band::after { bottom: 0; background: linear-gradient(transparent, var(--seam-b, var(--base))); }
.b-hero::before { display: none; }
.b-hero, .b-songs, .b-einsp, .b-tickets { --seam-t: #1b3512; --seam-b: #1b3512; }
.b-tickets { --seam-b: #0b0b07; }
.b-hero, .b-eye, .b-stage, .b-screens, .b-saruman { padding: 0; }

/* picture bands: the centre of the artwork, full width (the gold frame at the sides is cut away) */
.b-hero { height: 102.9vw; }  .b-hero > .plate { object-position: 50% 0; }
.b-eye { height: 48.5vw; }  .b-stage { height: 57.4vw; }  .b-screens { height: 55.9vw; }
.b-saruman { height: 70.6vw; }

.b-songs { padding: 4vw 6vw 9vw; }
.songs { text-align: center; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.75); }
.songs-head { font-family: var(--condensed); font-weight: 700; color: var(--yellow); font-size: 1.2rem; line-height: 1; margin-bottom: 8px; }
.song-row { display: contents; }
.songs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.songs-head { grid-column: 1 / -1; }
.songs li { display: grid; justify-items: center; }
.songs strong { font-family: var(--condensed); font-weight: 700; font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1; letter-spacing: .01em; }
.songs li span { font-family: var(--condensed); font-weight: 700; color: var(--pale); font-size: clamp(.9rem, 3.8vw, 1.1rem); line-height: 1; margin-top: 2px; }

.b-einsp { padding: 6vw 6vw 8vw; display: grid; justify-items: center; text-align: center; }
.quote { color: var(--yellow); font-weight: 800; text-transform: uppercase; font-size: clamp(1.05rem, 5vw, 1.4rem); line-height: 1.15; max-width: 22em; text-wrap: balance; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.e-head { margin-top: 9vw; color: var(--yellow); font-weight: 400; text-transform: uppercase; font-size: clamp(.9rem, 3.9vw, 1.05rem); letter-spacing: .02em; }
.einsps { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; margin-top: 4vw; width: 100%; max-width: 520px; }
.einsp { display: grid; align-content: start; justify-items: center; text-transform: uppercase; }
.e-pic { width: 40vw; max-width: 210px; }
.einsp strong { margin-top: 2vw; font-family: var(--condensed); font-weight: 700; font-size: clamp(1.25rem, 5.6vw, 1.7rem); line-height: 1; }
.e-role { color: var(--yellow); font-weight: 800; font-size: clamp(.95rem, 4vw, 1.15rem); line-height: 1.1; margin-top: 3px; }
.e-from { font-size: clamp(.62rem, 2.6vw, .78rem); line-height: 1.2; }

.b-tickets { padding: 6vw 0 8vw; text-align: center; }
.dateline {
  padding: 0 7vw; text-align: center; text-transform: uppercase; font-family: var(--condensed); font-weight: 700;
  font-size: clamp(2rem, 9.6vw, 3.2rem); line-height: 1.02; text-wrap: balance; text-shadow: 2px 3px 4px rgba(0, 0, 0, .8);
}
.dateline.is-empty { padding: 0; }
.dateline .nb, .cta-when .nb { white-space: nowrap; }
.cta-when { text-wrap: balance; }
.notice { margin: 12px 16px 0; padding: 12px 16px; text-align: center; background: #b23a2a; border-radius: 8px; font-weight: 800; }
.songs-text { margin: 6vw auto 0; padding: 0 8vw; color: var(--yellow); font-weight: 800; text-transform: uppercase; font-size: clamp(.95rem, 4.4vw, 1.2rem); line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,.7); }

.b-guests { padding: 6vw 6vw 10vw; text-align: center; --seam-t: #0b0505; --seam-b: #0b0505; }
.g-head { font-weight: 800; text-transform: uppercase; font-size: clamp(1.15rem, 5.2vw, 1.5rem); line-height: 1.15; }
.g-intro { margin-top: 3vw; font-size: clamp(.78rem, 3.3vw, .9rem); line-height: 1.3; }
.g-intro br, .songs-text br, .venues p br, .quote br { display: none; }
.guests { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw 2vw; margin-top: 6vw; }
.guest { display: grid; align-content: start; justify-items: center; text-transform: uppercase; }
.g-pic { position: relative; width: 44vw; max-width: 230px; transform: translateX(7.7%); }   /* the circle sits left in the picture */
.guest strong { margin-top: -3vw; font-family: var(--condensed); font-weight: 700; font-size: clamp(1.1rem, 4.8vw, 1.35rem); line-height: 1; }
.g-role { color: var(--yellow); font-family: "Barlow Semi Condensed", var(--sans); font-weight: 600; font-size: clamp(.8rem, 3.4vw, .95rem); line-height: 1.1; margin-top: 2px; }

.b-venues { padding: 6vw 7vw 10vw; display: grid; justify-items: center; gap: 6vw; text-align: center; }
.v-head { color: var(--yellow); font-weight: 800; text-transform: uppercase; font-size: clamp(1.2rem, 5.4vw, 1.6rem); }
.venues { order: 3; font-size: clamp(.82rem, 3.6vw, .95rem); line-height: 1.3; max-width: 24rem; text-shadow: 0 1px 6px #000; }
.venues p { margin-bottom: 1.1em; }
.venues b { font-weight: 800; }
.v-wide { order: 2; position: relative; width: 100%; max-width: 520px; aspect-ratio: 238 / 135.2; }

.b-tickets2 { padding: 4vw 0 6vw; }
.b-audience { padding: 6vw 8vw 10vw; }
.a-head { text-align: center; font-weight: 400; font-size: clamp(1.4rem, 6.4vw, 2rem); line-height: 1.2; margin-bottom: 7vw; text-shadow: 0 2px 10px #000; }
.clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9vw 11vw; max-width: 420px; margin: 0 auto; padding: 0 3vw; }
@media (min-width: 600px) { .clips { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 820px; gap: 5vw; } }
.clip blockquote { margin-top: 4.4vw; text-align: center; font-size: clamp(.72rem, 3vw, .86rem); line-height: 1.25; text-shadow: 0 1px 6px #000; }
.v-tall { position: relative; width: 100%; aspect-ratio: 133.7 / 234; }

.b-closing { padding-top: 102vw; }
.b-closing > .plate { object-position: 50% 0; }
.b-closing::after { height: 40%; max-height: none; background: linear-gradient(transparent, var(--base) 85%); }
.foot { display: grid; gap: 12px; justify-items: center; text-align: center; color: #b9b39a; font-size: .72rem; padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.socials { display: flex; justify-content: center; gap: 18px; }
.socials a { display: block; width: 44px; }
.socials img { width: 100%; height: auto; }

/* ---------- videos: preview picture + play button in the copper frame; the video plays full screen */
.video {
  -webkit-appearance: none; appearance: none; font: inherit; color: inherit;
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  background: #0a0603; cursor: pointer; overflow: hidden;
}
.video .poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s ease; }
.video:hover .poster-img, .video:focus-visible .poster-img { transform: scale(1.03); filter: brightness(1.1); }
.video:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.v-frame { position: absolute; z-index: 2; pointer-events: none; max-width: none; }
.v-wide .v-frame { left: -6.05%; top: -10.65%; width: 111.34%; height: 119.97%; }
.v-tall .v-frame { left: -11.22%; top: -6.28%; width: 121.17%; height: 112.69%; }
.play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 24%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35); transition: transform .2s ease;
}
.v-tall .play { width: 42%; }
.play svg { width: 48%; margin-left: 9%; fill: #2a1a0c; }
.video:hover .play { transform: translate(-50%, -50%) scale(1.06); }
.video-soon {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); white-space: nowrap; z-index: 3;
  padding: 3px 9px; border-radius: 99px; font-size: .7rem; background: rgba(10, 6, 3, .85);
}
.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.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; }
.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;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- the gold ticket button (same as The Music of Hans Zimmer) */
.cta {
  position: relative; z-index: 3; display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: 7vw max(7vw, env(safe-area-inset-right, 0px)) 2vw max(7vw, 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: 64px; padding: 0 30px; border-radius: 999px; text-decoration: none; color: #15110a;
  font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: clamp(1.05rem, 4.6vw, 1.45rem); letter-spacing: .03em;
  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 > span { padding-top: .12em; }
.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-top: 4px; font-weight: 800; font-size: 1rem; text-shadow: 0 2px 10px #000; }
.cta-perk { max-width: 32rem; font-size: .95rem; color: #ffe9a8; text-shadow: 0 2px 10px #000; }
.cta-few { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; background: #c2352a; color: #fff; padding: 5px 12px; border-radius: 999px; }
.cta-when { font-family: var(--condensed); font-weight: 700; text-transform: uppercase; font-size: clamp(1.4rem, 6vw, 2rem); letter-spacing: .01em; line-height: 1; text-shadow: 2px 3px 4px rgba(0,0,0,.8); }
@media (prefers-reduced-motion: reduce) { .cta-btn { animation: none; transition: none; } }

/* ---------- sticky ticket bar (city pages) */
.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(8, 10, 5, .94); border-top: 1px solid rgba(216, 180, 90, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  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)); }
.mb-when { display: block; min-width: 0; flex: 1 1 auto; font-size: clamp(.9rem, 2.4vw, 1rem); font-weight: 800; line-height: 1.3; }
.mb-date, .mb-city { display: block; }
.mb-venue { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; color: #ece6cf; }
.mb-btn { flex: none; white-space: nowrap; background: linear-gradient(180deg, #fff1bf 0%, #f6d77a 38%, #e2ad3d 72%, #c98f26 100%); color: #15110a; font-weight: 800; text-transform: uppercase; text-decoration: none; padding: 12px 22px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .mobile-bar { transition: none; } }

/* ================================================================ desktop: the design 1:1 (>= 900 px) */
@media (min-width: 900px) {
  .poster { width: 980px; zoom: var(--z, 1); }
  .frame-l, .frame-r, .band::before, .band::after { display: none; }
  .band { padding: 0; }
  .band > * { position: absolute; }
  .band > .plate { object-fit: fill; }
  .b-hero { height: 700px; } .b-songs { height: 330px; } .b-einsp { height: 420px; display: block; } .b-tickets { height: 392px; }
  .b-eye { height: 330px; } .b-guests { height: 680px; } .b-stage { height: 390px; } .b-venues { height: 290px; display: block; }
  .b-screens { height: 380px; } .b-tickets2 { height: 228px; } .b-saruman { height: 480px; } .b-audience { height: 420px; }
  .b-closing { height: 737.4px; padding: 0; }

  /* songs over the orchestra (caps: "MIT" 735, titles 766.6 / 840.5, by-lines 806.5 / 880.5) */
  .songs { display: block; left: 0; right: 0; top: 33px; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
  .songs-head { font-size: 18.6px; margin: 0 0 10.5px; letter-spacing: .02em; }
  .song-row { display: flex; justify-content: center; gap: 0 27px; height: 74px; }
  .songs li { position: relative; display: block; text-align: center; }
  .songs li + li::before { content: "•"; position: absolute; left: -19px; top: 0; font-family: var(--condensed); font-weight: 700; font-size: 39.9px; line-height: 1; }
  .songs strong { display: block; font-size: 39.9px; letter-spacing: .005em; white-space: nowrap; }
  .songs li span { display: block; margin-top: 2.1px; font-size: 18.4px; white-space: nowrap; }

  /* quote, "Mit Einspielungen von", the two portraits with names */
  .quote { left: 0; right: 0; top: 10.4px; margin: 0 auto; max-width: none; width: 540px; font-size: 24.4px; line-height: 27.4px; text-shadow: none; }
  .e-head { left: 0; right: 0; top: 113px; margin: 0; font-size: 19.3px; line-height: 19.3px; letter-spacing: .015em; }
  .einsps { display: block; left: 0; top: 0; width: 980px; max-width: none; margin: 0; }
  .einsp { position: absolute; top: 147.5px; width: 260px; }
  .einsp:nth-child(1) { left: 233.5px; } .einsp:nth-child(2) { left: 471.5px; }
  .e-pic { width: 192px; max-width: none; }
  .einsp strong { margin-top: 3px; font-size: 35.6px; white-space: nowrap; }
  .e-role { margin-top: 1.7px; font-size: 20.3px; line-height: 20.3px; }
  .e-from { margin-top: 0; font-size: 13.3px; line-height: 13.3px; }

  /* date line, button in the middle of the old ticket boxes, the yellow text under them */
  /* the old ticket boxes are gone: date line and button sit in the middle of the free space */
  /* city pages: the date line sits right above the button, on one or two lines, inside the gold frame */
  .dateline { left: 0; right: 0; top: auto; bottom: 286px; padding: 0 150px; font-size: 44px; line-height: 46px; }
  .dateline.is-empty { top: 0; bottom: auto; }
  .dateline .venue:not(.is-wrap) { white-space: nowrap; }
  .b-tickets .cta { left: 0; right: 0; top: 122px; padding: 0; }
  .is-master .b-tickets .cta { top: 24px; }
  .is-master .b-tickets { height: 270px; background: #0b0b07; }
  .is-master .b-tickets > .plate { object-fit: cover; object-position: 50% 0; -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent); }
  .is-master .songs-text { top: 158px; }
  .cta-btn { width: 460px; min-height: 76px; font-size: 24px; }
  .songs-text { left: 0; right: 0; top: 286.2px; margin: 0; padding: 0; font-size: 19.8px; line-height: 24.6px; text-shadow: none; }

  /* guests: three rows of fire portraits */
  .g-head { left: 0; right: 0; top: 18.4px; font-size: 25.7px; line-height: 25.7px; }
  .g-intro { left: 0; right: 0; top: 64.6px; margin: 0; font-size: 12.8px; line-height: 14.3px; }
  .g-intro br, .songs-text br, .venues p br, .quote br { display: inline; }
  .guests { display: block; left: 0; top: 0; width: 980px; margin: 0; }
  .guest { position: absolute; width: 194px; }
  .guest:nth-child(1) { left: 177.5px; top: 98.5px; } .guest:nth-child(2) { left: 330.5px; top: 98.5px; }
  .guest:nth-child(3) { left: 481.5px; top: 98.5px; } .guest:nth-child(4) { left: 630.5px; top: 98.5px; }
  .guest:nth-child(5) { left: 224.5px; top: 282.5px; } .guest:nth-child(6) { left: 403.5px; top: 284.5px; }
  .guest:nth-child(7) { left: 570.5px; top: 282.5px; }
  .guest:nth-child(8) { left: 225.5px; top: 467.5px; } .guest:nth-child(9) { left: 404.5px; top: 467.5px; }
  .guest:nth-child(10) { left: 571.5px; top: 468.5px; }
  .g-pic { width: 194px; max-width: none; height: 174px; transform: none; }
  .guest strong { margin-top: -15.5px; font-size: 18px; white-space: nowrap; }
  .guest strong, .g-role { position: relative; left: -13px; }       /* centred under the big circle (the picture is wider to the right) */
  .g-role { margin-top: 0; font-size: 13.3px; line-height: 10.6px; white-space: nowrap; }

  /* "Geniale Musik", venues, trailer */
  .v-head { left: 0; right: 0; top: 15.2px; font-size: 25.7px; line-height: 25.7px; }
  .venues { left: 226px; top: 79px; width: 242px; max-width: none; font-size: 9.7px; line-height: 11.85px; text-shadow: none; }
  .venues p { margin-bottom: 11.85px; }
  .v-wide { left: 501px; top: 115.8px; width: 238px; height: 135.2px; max-width: none; aspect-ratio: auto; }

  .b-tickets2 .cta { left: 0; right: 0; top: 60px; padding: 0; }

  /* audience: four interviews */
  .a-head { left: 0; right: 0; top: 16px; margin: 0; font-size: 28.4px; line-height: 34px; text-shadow: none; }
  .clips { display: block; left: 0; top: 0; width: 980px; height: 420px; max-width: none; margin: 0; padding: 0; }
  .clip { position: absolute; top: 80px; width: 133.7px; }
  .clip:nth-child(1) { left: 177.6px; } .clip:nth-child(2) { left: 341.3px; } .clip:nth-child(3) { left: 505px; } .clip:nth-child(4) { left: 668.7px; }
  .v-tall { height: 234px; aspect-ratio: auto; }
  .clip blockquote { position: absolute; top: 266.2px; left: 50%; width: 150px; margin: 0 0 0 -75px; font-size: 11.4px; line-height: 12.9px; text-shadow: 0 1px 4px #000; }

  .b-closing > .plate { height: 100%; }
  .foot { position: absolute; left: 0; right: 0; bottom: 18px; padding: 0; gap: 10px; font-size: 10px; color: #ddd6bd; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
  .socials { gap: 20px; }
  .socials a { width: 39.2px; }
  .notice { left: 200px; right: 200px; top: 96px; }

  .mobile-bar { justify-content: center; gap: 28px; padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 30px rgba(0,0,0,.45); }
  .mb-when { display: flex; align-items: baseline; flex: 0 1 auto; font-size: 1.05rem; font-weight: 400; color: #ece6cf; }
  .mb-date, .mb-city, .mb-venue { display: inline; font: inherit; color: inherit; }
  .mb-city { font-weight: 800; color: #fff; }
  .mb-date::after, .mb-city::after { content: "·"; display: inline-block; margin: 0 .5em; transform: translateY(-.3em); font-weight: 800; color: rgba(236, 230, 207, .7); }
  .mb-venue { max-width: 34vw; }
  body.has-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}


/* social icons above "Was sagt das Publikum?" */
.a-socials { margin: 0 0 5vw; }
@media (min-width: 900px) {
  .a-socials { left: 0; right: 0; top: 14px; margin: 0; }
  .b-audience { height: 472px; }
  .b-audience > .plate { object-fit: cover; object-position: 50% 100%; }
  .a-head { top: 68px; }
  .clip { top: 132px; }
}


/* desktop: one continuous gold frame down both sides, as in the design (transparent filigree over the page;
   the picture bands no longer carry their own frame). Starts below the hero, which keeps its arch. */
@media (min-width: 900px) {
  .poster .frame-l, .poster .frame-r { display: block; top: 700px; width: 150px; max-width: none; z-index: 6; background-size: 150px 722px; }
}

@media (min-width: 900px) {
  /* soft start of the Eye of Sauron photo (no hard line under the ticket section) */
  .b-eye { background: #0b0b07; }
  .b-eye > .plate { -webkit-mask-image: linear-gradient(transparent, #000 24px); mask-image: linear-gradient(transparent, #000 24px); }
}