/* =====================================================================
   Gold or Water? – Onepager
   Look: A24-Masthead (Serif, Linien, Meta-Zeilen) + Plakat-Typo (Archivo Black Italic, Rot)
   ===================================================================== */

:root {
  --bg: #efeeec;
  --bg-2: #dcd8d4;
  --ink: #111;
  --ink-2: #555;
  --rule: #9b9894;
  --red: #f0140a;
  --gold: #c9a227;
  --water: #4a90c2;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --pad: clamp(16px, 3vw, 40px);
  --max: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 clamp(17px, 1.35vw, 21px)/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
em, .ital { font-style: italic; }

/* ---------- Flagge hinter dem Masthead: volle Breite, Höhe folgt dem Seitenverhältnis der Flagge ---------- */
.top { position: relative; overflow: hidden; }
.topflag { position: absolute; inset: 0 0 auto; z-index: 0; pointer-events: none; }
.topflag img { width: 100%; height: auto; }
.masthead { position: relative; z-index: 1; }
.masthead .w.on-flag { background: #fff; }

/* ---------- Trennlinien (Haarlinien wie die Meta-Zeilen unter der Überschrift) ---------- */
.lines { max-width: var(--max); margin: clamp(30px, 5vw, 60px) auto; padding: 0 var(--pad); }
.lines span { display: block; border-top: 1px solid var(--rule); }
.lines span + span { margin-top: 28px; }
.lines--inset { padding: 0; }
.live > .lines:first-child { margin-top: 0; }

/* ---------- Masthead ---------- */
.masthead { padding: 0 var(--pad); max-width: var(--max); margin: 0 auto; text-align: center; }

.topnav {
  display: flex; justify-content: center; align-items: center; gap: 28px;
  padding: 14px 0; font-size: 13px;
}
.topnav a { text-decoration: none; color: var(--ink-2); }
.topnav a:hover { color: var(--ink); }
.topnav__logo { font-weight: 900; font-style: italic; color: var(--ink) !important; letter-spacing: -.02em; }

.kicker { font-size: 11px; font-weight: 800; font-style: italic; line-height: 1.3; margin: 18px 0 30px; }

.display { margin: 0; display: flex; flex-direction: column; align-items: center; }
.display__small { font: 900 italic clamp(22px, 2.6vw, 38px)/1 var(--sans); letter-spacing: -.01em; margin-bottom: clamp(30px, 6vw, 90px); }
.display__main {
  font: 900 italic clamp(34px, 9.5vw, 150px)/.95 var(--sans);
  letter-spacing: -.035em;
  margin: 0;
}
.display__serif {
  font: 400 italic clamp(40px, 7.5vw, 120px)/1.05 var(--serif);
  letter-spacing: -.01em;
  margin-top: .05em;
}

.meta { margin: clamp(30px, 5vw, 60px) 0 0; border-top: 1px solid var(--rule); font-size: 13px; }
.meta__row { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--rule); padding: 5px 0; }
.meta dt { font: 500 9px/1.8 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.meta dd { margin: 0; text-align: right; }

.status::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #aaa; margin-right: 6px; vertical-align: 1px;
}
.status.is-live::before { background: #19b34a; box-shadow: 0 0 0 3px rgba(25,179,74,.18); }
.status.is-offline::before { background: var(--red); }

.cta { display: flex; justify-content: center; gap: 8px; margin: clamp(60px, 10vw, 140px) 0 0; position: relative; z-index: 2; }
.cta__btn {
  font: 400 clamp(16px, 1.7vw, 24px)/1 var(--serif); text-transform: uppercase; letter-spacing: .01em;
  text-decoration: none; padding: 8px 2px 6px;
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
}
.cta__btn:hover { background: var(--ink); color: var(--bg); }

/* ---------- Hero ---------- */
.hero { position: relative; margin-top: -18px; overflow: hidden; }
.hero__img {
  clip-path: polygon(0 12%, 6% 9%, 14% 10%, 20% 4%, 70% 4%, 78% 7%, 88% 6%, 94% 9%, 100% 8%, 100% 100%, 0 100%);
}
.hero__img img { width: 100%; height: clamp(360px, 62vw, 900px); object-fit: cover; object-position: 50% 30%; filter: grayscale(.15) contrast(1.02); }
.hero__word {
  position: absolute; color: #fff; text-transform: uppercase;
  font: 400 clamp(32px, 7vw, 108px)/1 var(--serif); letter-spacing: -.01em;
  mix-blend-mode: difference; pointer-events: none;
}
.hero__word--1 { left: 30%; top: 18%; }
.hero__word--2 { left: 66%; top: 34%; }
.hero__word--3 { left: 4%;  top: 52%; }
.hero__word--4 { right: 6%; top: 70%; font-style: italic; }
.hero__word--5 { left: 34%; top: 84%; font-style: italic; }

/* ---------- Prose ---------- */
main { background: var(--bg-2); }
.prose {
  max-width: var(--max); margin: 0 auto; padding: clamp(50px, 8vw, 120px) var(--pad);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(20px, 5vw, 80px);
}
.prose--tight { padding-top: clamp(30px, 4vw, 60px); padding-left: 0; padding-right: 0; }
.prose__aside { font-size: .8em; color: var(--ink-2); }
.prose__aside p { position: sticky; top: 24px; }
.prose__body { max-width: 860px; }
.lead { font: 900 italic clamp(22px, 2.2vw, 32px)/1.25 var(--sans); letter-spacing: -.01em; margin-bottom: 1.4em; }
.h-small { font: 800 1em/1.3 var(--sans); margin: 2em 0 .4em; }
.h-tiny { font: 800 italic 11px/1 var(--sans); text-align: center; margin: 0 0 18px; }
.numbered { padding-left: 1.4em; margin: 0; }
.numbered li { margin-bottom: .8em; }

.terms { margin: 1.4em 0; border-top: 1px solid var(--rule); }
.terms__row { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.terms dt { font: 900 italic 1em/1.4 var(--sans); }
.terms dd { margin: 0; }

.formula { font-size: .9em; border-left: 3px solid var(--ink); padding-left: 14px; }
.formula span { font-weight: 800; }
.note { font-size: .8em; color: var(--ink-2); }

/* ---------- aber! ---------- */
.aber { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(60px, 9vw, 140px); }
.aber__word { font: 900 italic clamp(70px, 13vw, 210px)/.9 var(--sans); letter-spacing: -.04em; margin: 0 0 .15em; }
.aber__quote { margin: 0; max-width: 1150px; font: 900 italic clamp(22px, 2.5vw, 38px)/1.3 var(--sans); letter-spacing: -.01em; }

/* ---------- Installation ---------- */
.installation { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(40px, 6vw, 80px); text-align: center; }
.installation .prose { text-align: left; }
.rules { display: grid; gap: clamp(40px, 6vw, 90px); margin-bottom: clamp(50px, 7vw, 100px); }
.rules span { display: block; border-top: 1px solid var(--rule); }
.serif-title { font: 400 italic clamp(38px, 5vw, 76px)/1 var(--serif); margin: 0 0 .1em; }
.display__main--section { font-size: clamp(48px, 9vw, 140px); }

/* ---------- Live ---------- */
.live { max-width: var(--max); margin: 0 auto; padding: clamp(20px, 3vw, 40px) var(--pad) clamp(60px, 8vw, 120px); }
.live__intro { font-size: .85em; max-width: 900px; }
.live__intro strong { font-weight: 900; font-style: italic; }
.live__intro em { font-family: var(--serif); font-size: 1.15em; }
.live__intro a { text-underline-offset: 3px; }

.figures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad); margin: clamp(20px, 4vw, 60px) 0 clamp(16px, 2vw, 30px); }
.figure__label { font-size: .85em; min-height: 2.9em; margin-bottom: .2em; }
.figure__label strong { font-weight: 900; font-style: italic; }
.figure__label em { font-family: var(--serif); font-size: 1.15em; }
.explain { font: italic 400 1.05em/1.35 var(--serif); color: var(--ink-2); max-width: 1000px; margin: 0 0 clamp(16px, 2vw, 28px); min-height: 1.4em; }
.figure__value { font: 900 italic clamp(64px, 11vw, 180px)/.9 var(--sans); letter-spacing: -.04em; margin: 0; font-variant-numeric: tabular-nums; }

/* Bühne / Webcam */
.stage {
  position: relative; aspect-ratio: var(--stage-ratio, 2508 / 1658); background: #222; overflow: hidden;
  color: var(--red); isolation: isolate; container-type: inline-size;
}
/* Hochformat: so hoch wie der Bildschirm erlaubt, mittig; Overlay untereinander, Größen relativ zur Bühne */
.stage--portrait { width: min(100%, calc((100svh - 40px) * var(--stage-ratio))); margin-inline: auto; }
.stage--portrait .stage__country { left: 6%; top: 4%; font-size: 8.5cqw; }
.stage--portrait .stage__fig { top: auto; }
.stage--portrait .stage__fig--water { left: 6%; top: 17%; }
.stage--portrait .stage__fig--gold { right: 6%; top: 47%; }
.stage--portrait .stage__label { font-size: 4.4cqw; }
.stage--portrait .stage__value { font-size: 32cqw; }
.stage--portrait .stage__queue { padding: 7cqw; }
.stage--portrait .queue li { font-size: max(13px, 3.6cqw); }
.stage__media, .stage__img, .stage__embed, .stage__video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stage__img, .stage__video { object-fit: cover; background: #000; }
.stage__video[hidden] { display: none; }
.stage__overlay, .stage__queue { position: absolute; inset: 0; transition: opacity .45s ease, transform .45s ease; }

.stage__country {
  position: absolute; left: 4%; top: 5%; margin: 0;
  font: 900 italic clamp(22px, 3.6vw, 56px)/1 var(--sans); letter-spacing: -.02em;
  display: flex; align-items: center; gap: .35em;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.flag-mini { height: .8em; width: auto; box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.flag-mini:not([src]) { display: none; }

.stage__fig { position: absolute; top: 36%; }
.stage__fig--water { left: 4%; }
.stage__fig--gold  { right: 3%; text-align: right; }
.stage__label { font: 900 italic clamp(13px, 2vw, 32px)/1 var(--sans); margin: 0 0 .1em; }
.stage__value { font: 900 clamp(80px, 17vw, 300px)/.85 var(--sans); letter-spacing: -.05em; margin: 0; font-variant-numeric: tabular-nums; }

.stage__queue {
  opacity: 0; transform: translateY(12px); pointer-events: none;
  background: rgba(10,10,10,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; padding: clamp(18px, 4vw, 56px); overflow: auto;
}
.stage[data-view="queue"] .stage__overlay { opacity: 0; transform: translateY(-12px); }
.stage[data-view="queue"] .stage__queue { opacity: 1; transform: none; pointer-events: auto; }
.stage__queue-title { font: 400 italic clamp(28px, 3.5vw, 54px)/1 var(--serif); margin: 0 0 .6em; }

.queue { list-style: none; margin: 0; padding: 0; counter-reset: q; max-width: 900px; }
.queue li {
  display: grid; grid-template-columns: 2.4em 1.6em 1fr auto; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.2); font-size: clamp(14px, 1.4vw, 19px);
}
.queue li img { width: 1.5em; height: auto; }
.queue__pos { font: 900 italic 1em var(--sans); opacity: .6; }
.queue__name { font-weight: 800; }
.queue__meta { font-size: .8em; opacity: .7; white-space: nowrap; }
.queue li.is-playing .queue__pos { color: var(--red); opacity: 1; }
.queue li.is-mine { background: rgba(240,20,10,.22); box-shadow: -10px 0 0 rgba(240,20,10,.22), 10px 0 0 rgba(240,20,10,.22); }
.queue__tag { font-size: .7em; text-transform: uppercase; letter-spacing: .08em; padding: 2px 6px; border: 1px solid currentColor; border-radius: 2px; margin-left: 8px; opacity: .8; }
.queue__hint { margin-top: 1em; font-size: .85em; opacity: .8; }

.stage__live {
  position: absolute; left: 4%; bottom: 6%; color: #fff; font: 800 11px/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.45); padding: 6px 9px; border-radius: 2px;
}
.stage__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: blink 1.4s infinite; }
.stage.is-offline .stage__live i { animation: none; background: #888; }
@keyframes blink { 50% { opacity: .2; } }

.stage__toggle {
  position: absolute; right: 2.5%; bottom: 5%; z-index: 3;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--ink); display: grid; place-items: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.3); transition: transform .2s;
}
.stage__toggle:hover { transform: scale(1.07); }
.stage__toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.stage[data-view="queue"] .stage__toggle { background: var(--red); color: #fff; }

.stage__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.2); }
.stage__progress i { display: block; height: 100%; width: 0; background: var(--red); transition: width 1s linear; }

/* Rangliste + Flaggenfeld */
.pick { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr); gap: var(--pad); margin-top: clamp(30px, 4vw, 60px); align-items: start; }
.ranking { font-size: .78em; }
.ranking ol { margin: 0; padding-left: 1.4em; }
.ranking li { padding: 2px 0; }
.ranking li button { all: unset; cursor: pointer; }
.ranking li button:hover { text-decoration: underline; }
.ranking__src { margin-top: 1em; color: var(--ink-2); font-size: .85em; }

.flagfield__label { font-size: .85em; margin-bottom: .4em; }
.flagfield__label strong { font-weight: 900; font-style: italic; }
.flagfield__label em { font-family: var(--serif); font-size: 1.15em; }
.flagfield {
  position: relative;
}
.flagfield__flag {
  aspect-ratio: 3 / 2; background: #ccc center / cover no-repeat;
  transition: background-image .4s;
}
.chooser {
  position: absolute; left: 50%; top: calc(50% + 1em); transform: translate(-50%, -50%);
  width: min(560px, 86%); background: #fff; padding: clamp(18px, 3vw, 40px);
  box-shadow: 0 20px 60px rgba(0,0,0,.25); font-size: 15px;
}
.chooser__title { margin: 0 0 14px; }
.chooser__search {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15); font-weight: 800;
}
.chooser__search span { color: #999; font-weight: 400; font-size: 13px; }
.chooser__search input { flex: 1; border: 0; outline: 0; font: 800 16px var(--sans); background: transparent; min-width: 0; }
.chooser__list { list-style: none; margin: 12px 0 0; padding: 0; max-height: 220px; overflow: auto; border-top: 1px solid #eee; }
.chooser__list li button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 6px; border-bottom: 1px solid #eee;
}
.chooser__list li button:hover, .chooser__list li button:focus-visible { background: #f4f2ef; }
.chooser__list li button[aria-selected="true"] { background: var(--ink); color: #fff; }
.chooser__list img { width: 26px; height: auto; box-shadow: 0 0 0 1px #ddd; }
.chooser__list .pct { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.chooser__submit {
  margin-top: 14px; width: 100%; padding: 13px; cursor: pointer;
  font: 400 20px/1 var(--serif); text-transform: uppercase; letter-spacing: .02em;
  background: transparent; color: var(--ink); border: 0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
}
.chooser__submit:not(:disabled):hover { background: var(--ink); color: #fff; }
.chooser__submit:disabled { opacity: .35; cursor: default; }
.chooser__msg { margin: 10px 0 0; min-height: 1.3em; font-size: 13px; }
.chooser__msg.is-error { color: var(--red); }

/* ---------- Skala + Footer ---------- */
.scale { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(50px, 6vw, 90px); font-size: 12px; }
.scale strong { font-weight: 900; font-style: italic; }
.scale__sub, .scale li { font-family: var(--serif); font-size: 14px; }
.scale ul { margin: 0; padding-left: 1em; }

.footer { max-width: var(--max); margin: 0 auto; padding: 30px var(--pad) 40px; font-size: 11px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 30px; align-items: end; }
.footer p { margin: 0; max-width: 760px; }
.footer__logo { font: 900 italic 22px/1 var(--sans); color: var(--ink); white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .prose { grid-template-columns: 1fr; }
  .prose__aside p { position: static; }
  .terms__row { grid-template-columns: 1fr; gap: 2px; }
  .pick { grid-template-columns: 1fr; }
  .ranking { order: 2; }
  .flagfield__flag { aspect-ratio: 1 / 1.1; }
  .stage:not(.stage--portrait) { aspect-ratio: 4 / 3.4; }
  .stage__fig { top: 42%; }
  .footer { flex-direction: column; align-items: start; }
}
@media (max-width: 600px) {
  /* Zwei Werte nebeneinander (bis „100%“) müssen in die Bühnenbreite passen */
  .stage__value { font-size: 11vw; }
  .stage__label { font-size: 11px; }
}
@media (max-width: 520px) {
  .chooser { position: relative; left: auto; top: auto; transform: none; width: auto; margin: -40% 12px 0; }
  .stage__toggle { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}