/* Genever · „Pergament & Kupfer“ (Plan §7)
   Maßeinheit --u = 1 Design-Pixel bei 1024 × 768; skaliert mit der kleineren Achse.
   Kontrast (gemessen): Anthrazit/Pergament 13,4:1 · Pergament/Nacht 15,0:1 ·
   Kupfer/Pergament 3,12:1 → Kupfer nur für Display ≥ 48 px und Linien. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces hat keinen Pfeil: Inter-Tight-Pfeil unter derselben Familie */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/inter-tight-arrows.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+2190, U+2192;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-arrows.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+2190, U+2192;
}

:root {
  --parchment: #F2E8D5;
  --night: #1A1410;
  --ink: #231F20;
  --copper: #B87333;
  --juniper: #2F623B;
  --cask: #6C5843;
  --paper: #FBF7EE; /* Polaroid-Rand */
  --liquid: #D8C6A3; /* Flüssigkeit in Grafiken */
  --land: #E6D9BF; /* Nachbarländer auf der Karte */
  --copper-deep: #7A4A1F; /* Kontur markierter Regionen */

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-text: "Inter Tight", -apple-system, "Helvetica Neue", sans-serif;

  --u: min(calc(100vw / 1024), calc(100dvh / 768));
  --pad-x: calc(64 * var(--u) + env(safe-area-inset-left));
  --pad-top: calc(84 * var(--u) + env(safe-area-inset-top));
  --pad-bottom: calc(56 * var(--u) + env(safe-area-inset-bottom));

  --fs-chrome: max(14px, calc(15 * var(--u)));
  --fs-kicker: max(16px, calc(18 * var(--u)));
  --fs-body: max(28px, calc(34 * var(--u)));
  --fs-claim: max(48px, calc(60 * var(--u)));
  --fs-title: max(48px, calc(80 * var(--u)));
  --fs-year: max(96px, calc(196 * var(--u)));
  --fs-opener: max(96px, calc(176 * var(--u)));

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-enter: 250ms;
  --t-exit: 150ms;
  --t-count: 600ms;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--parchment);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.3;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

/* Pergament-Korn: 4,5 % Deckkraft, fest, ohne Pointer */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: url("img/korn.png") repeat;
  background-size: 160px 160px;
  opacity: 0.045;
  mix-blend-mode: multiply;
}

p, h1, h2, ol, ul, figure { margin: 0; padding: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Chrome: Kopfzeile + Fortschritt ─────────────────────────────── */
.chrome {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: calc(24 * var(--u));
  padding: calc(28 * var(--u) + env(safe-area-inset-top)) var(--pad-x) 0;
  font-size: var(--fs-chrome);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  pointer-events: none;
}
.chrome__part { flex: 1; }
.chrome__hint {
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
}
body[data-tone="dark"] .chrome { color: var(--parchment); }

.progress {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 4;
  height: calc(5px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.progress__bar {
  height: 5px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-enter) var(--ease-out);
}

/* ── Tipp-Zonen ──────────────────────────────────────────────────── */
.zones {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.zone {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}
.zone:focus { outline: none; }
.zone:focus-visible { box-shadow: inset 0 0 0 4px var(--copper); }

/* ── Bühne + Folien ──────────────────────────────────────────────── */
.deck {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: calc(56 * var(--u));
  align-items: center;
  opacity: 0;
  visibility: hidden;
  content-visibility: hidden; /* inaktive Folien kosten kein Layout */
  transition: opacity var(--t-exit) var(--ease-out), visibility 0s linear var(--t-exit);
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  content-visibility: visible;
  transition: opacity var(--t-enter) var(--ease-out), visibility 0s;
}
/* Erster Aufbau ohne Animation: das Deck steht, bevor das Publikum da ist */
.is-booting *, .is-booting *::before, .is-booting *::after { transition: none !important; }
.slide--solo { grid-template-columns: minmax(0, 1fr); }
.slide--physics { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.slide--dark { color: var(--parchment); background: var(--night); }

.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(20 * var(--u));
  min-width: 0;
}

.kicker {
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 520;
  font-variation-settings: "opsz" 144;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.body {
  max-width: 24ch;
  font-size: var(--fs-body);
  font-weight: 450;
  line-height: 1.3;
  text-wrap: pretty;
}
.slide--solo .body { max-width: 34ch; }

/* Jahreszahl: die eine laute Geste */
.title--year {
  font-size: var(--fs-year);
  font-weight: 560;
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--copper);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.title--year .sep { color: var(--cask); font-weight: 300; padding-inline: 0.12em; }
.title--year.is-long { display: flex; flex-direction: column; font-size: max(72px, calc(150 * var(--u))); }
.title--year.is-long .sep { display: none; }
.title--year.is-words { white-space: normal; color: var(--ink); font-size: max(64px, calc(112 * var(--u))); }

.rule {
  width: calc(180 * var(--u));
  height: max(3px, calc(4 * var(--u)));
  background: var(--copper);
  transform-origin: left center;
}

/* ── Medien ──────────────────────────────────────────────────────── */
.media {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media picture { display: contents; }
.media img,
.media svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
.media svg { height: 100%; }

.caption-credit {
  position: absolute;
  right: var(--pad-x);
  bottom: calc(18 * var(--u) + env(safe-area-inset-bottom));
  font-size: max(13px, calc(13 * var(--u)));
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* Platzhalter: bewusst sichtbar */
.placeholder {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-content: center;
  gap: calc(10 * var(--u));
  padding: calc(28 * var(--u));
  text-align: center;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--cask) 10%, transparent) 0 2px, transparent 2px 14px);
  border: 2px dashed var(--cask);
  font-size: max(18px, calc(20 * var(--u)));
  line-height: 1.3;
}
.placeholder strong {
  font-size: var(--fs-kicker);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.polaroid {
  width: min(100%, calc(400 * var(--u)));
  padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(64 * var(--u));
  background: var(--paper);
  rotate: -2.5deg;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--ink) 45%, transparent);
}
.polaroid--right { rotate: 3deg; }
.polaroid .placeholder { aspect-ratio: 1; border: 0; }
.polaroid img { aspect-ratio: 1; object-fit: cover; max-height: none; }

/* Druck auf Pergament: Papierweiß ist im Bild schon Pergament */
.print img { filter: none; }

/* ── Opener (dunkel) ─────────────────────────────────────────────── */
.slide--dark {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: calc(20 * var(--u));
}
.slide--dark .media { grid-area: 1 / 2 / 2 / 3; align-self: stretch; }
.slide--dark .text { grid-area: 2 / 1 / 3 / 3; align-self: end; gap: calc(14 * var(--u)); position: relative; z-index: 1; }
.title--opener {
  font-size: var(--fs-opener);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 0.9;
  color: var(--parchment);
}
.slide--dark .body { max-width: none; color: var(--parchment); }
.slide--dark .kicker { color: var(--parchment); }
.title--hero { font-size: max(88px, calc(164 * var(--u))); letter-spacing: 0.03em; }

.route .water { fill: color-mix(in srgb, var(--cask) 55%, transparent); }
.route .street { fill: none; stroke: color-mix(in srgb, var(--parchment) 10%, transparent); stroke-width: 2; }
.route .route-line { fill: none; stroke: var(--copper); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.route .route-ghost { fill: none; stroke: color-mix(in srgb, var(--copper) 35%, transparent); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.route .stop circle { fill: var(--night); stroke: var(--copper); stroke-width: 4; r: 16px; }
.route .stop.is-reached circle { fill: var(--copper); }
.route .stop-lbl { font: 700 20px var(--font-text); fill: var(--parchment); text-anchor: middle; dominant-baseline: central; }
.route .lbl { font: 600 40px var(--font-text); fill: var(--parchment); }
.route .lbl.is-current { fill: var(--copper); }
.route .wipe { transform-box: fill-box; transform-origin: left center; }
.slide--dark .caption-credit { color: var(--parchment); }

/* Eigene Grafiken + EU-Karte (SVG inline; Größen in viewBox-Einheiten) */
.media--svg .lbl { font: 600 32px var(--font-text); fill: var(--ink); }
.media--svg .lbl-s { font: 500 26px var(--font-text); fill: var(--ink); }
.media--svg .ink { fill: none; stroke: var(--ink); stroke-width: 3; }
.media--svg .ink-thin { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0.55; }
.media--svg .diag { fill: none; stroke: var(--cask); stroke-width: 2.5; stroke-dasharray: 8 8; }
.media--svg .curve { fill: none; stroke: var(--copper); stroke-width: 7; stroke-linecap: round; }
.media--svg .guide { fill: none; stroke: var(--juniper); stroke-width: 3; stroke-dasharray: 4 6; }
.media--svg .dot { fill: var(--copper); }
.media--svg .dot-green { fill: var(--juniper); }
.media--svg .liquid { fill: var(--liquid); }
.media--svg .glass { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.media--svg .dim { fill: none; stroke: var(--copper); stroke-width: 3; }
.media--svg .mark { stroke: var(--copper); stroke-width: 5; }
.media--svg .land { fill: var(--land); stroke: var(--cask); stroke-width: 1; }
.media--svg .protected { fill: var(--copper); stroke: var(--copper-deep); stroke-width: 1.2; }
.media--svg .border { fill: none; stroke: var(--cask); stroke-width: 0.8; }
.media--svg .city { fill: var(--ink); }
.media--svg .lbl.lbl-city { font-size: 28px; }
.media--svg [data-region] { font-size: 34px; }

/* ── Quiz ────────────────────────────────────────────────────────── */
.title--quiz { font-size: max(40px, calc(48 * var(--u))); font-weight: 480; }
.claim {
  position: relative;
  max-width: 19ch;
  font-family: var(--font-display);
  font-size: var(--fs-claim);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  line-height: 1.08;
  text-wrap: balance;
}
.claim__strike {
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 50%;
  height: max(4px, calc(6 * var(--u)));
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left center;
  rotate: -9deg;
}
.claim__text { transition: opacity var(--t-enter) var(--ease-out); }
.is-revealed .claim__text { opacity: 0.5; }
.verdict { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.verdict__word {
  font-family: var(--font-display);
  font-size: max(64px, calc(96 * var(--u)));
  font-weight: 600;
  font-variation-settings: "opsz" 144;
  line-height: 0.95;
  color: var(--copper);
}
.rules { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.rules li {
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-claim);
  font-variation-settings: "opsz" 72;
  line-height: 1.1;
}

.facts {
  border-collapse: collapse;
  font-size: max(28px, calc(28 * var(--u)));
  line-height: 1.15;
  font-variant-numeric: lining-nums;
}
.facts th, .facts td { text-align: left; padding: calc(10 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u)) 0; }
.facts thead th { font-family: var(--font-display); font-size: max(30px, calc(36 * var(--u))); font-weight: 600; }
.facts thead th:nth-child(2) { color: var(--juniper); }
.facts thead th:nth-child(n+3) { color: var(--cask); }
.facts tbody th { font-weight: 600; }
.facts tbody tr { border-top: 2px solid color-mix(in srgb, var(--cask) 45%, transparent); }

.slide--quiz-table { grid-template-columns: minmax(0, 1fr); align-content: center; }
.slide--quiz-table .text { gap: calc(14 * var(--u)); }
.slide--quiz-table .claim { font-size: max(48px, calc(48 * var(--u))); max-width: none; }
.slide--quiz-table .claim { width: fit-content; }
.slide--quiz-table .claim__strike { rotate: -1.5deg; }
.slide--quiz-table .verdict { flex-direction: row; align-items: baseline; gap: calc(20 * var(--u)); flex-wrap: wrap; }
.slide--quiz-table .verdict__word { font-size: max(56px, calc(64 * var(--u))); }
.facts { display: none; }
.is-revealed .facts { display: table; }

/* ── Prozess: Schritte + Treppe ──────────────────────────────────── */
.steps { display: flex; flex-direction: column; gap: calc(14 * var(--u)); counter-reset: step; }
.steps li {
  list-style: none;
  counter-increment: step;
  display: grid;
  grid-template-columns: calc(48 * var(--u)) 1fr;
  align-items: baseline;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.2;
}
.steps li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-size: max(30px, calc(40 * var(--u)));
  font-weight: 600;
  color: var(--copper);
  font-variant-numeric: lining-nums;
}

.stair {
  display: flex;
  flex-direction: column-reverse;
  font-family: var(--font-display);
  font-size: max(56px, calc(76 * var(--u)));
  font-weight: 560;
  font-variation-settings: "opsz" 144;
  line-height: 1;
  color: var(--copper);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.stair span:nth-child(2) { margin-left: 1.35em; }
.stair span:nth-child(3) { margin-left: 2.7em; }

.end-title { font-size: max(96px, calc(176 * var(--u))); color: var(--copper); }
.credits {
  columns: 2;
  column-gap: calc(40 * var(--u));
  font-size: max(28px, calc(28 * var(--u)));
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.credits li { list-style: none; break-inside: avoid; }
.credits b { color: var(--cask); font-weight: 600; }

.noscript { padding: 10vh 8vw; }

/* ── Hochformat: stapeln ─────────────────────────────────────────── */
@media (orientation: portrait) {
  :root {
    --u: min(calc(100vw / 768), calc(100dvh / 1024));
    --pad-top: calc(96 * var(--u) + env(safe-area-inset-top));
  }
  .slide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: calc(40 * var(--u));
    align-items: start;
  }
  .slide--solo,
  .slide--quiz-table { grid-template-rows: minmax(0, 1fr); align-content: center; align-items: center; }
  .body { max-width: 30ch; }
  .slide--dark { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .slide--dark .media { grid-area: 1 / 1 / 2 / 2; }
  .slide--dark .text { grid-area: 2 / 1 / 3 / 2; align-self: end; }
  .title--opener { font-size: min(var(--fs-opener), 14.5vw); }
  .title--hero { font-size: min(var(--fs-opener), 13.5vw); }
  .media { align-items: flex-start; }
}

/* ── Motion (nur transform / opacity / filter) ───────────────────── */
.rise { opacity: 0; transform: translateY(calc(14 * var(--u))); filter: blur(3px); }
.is-active .rise {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity var(--t-enter) var(--ease-out) var(--d, 0ms),
    transform var(--t-enter) var(--ease-out) var(--d, 0ms),
    filter var(--t-enter) var(--ease-out) var(--d, 0ms);
}
/* Verlassene Folie setzt erst zurück, wenn sie unsichtbar ist */
.slide:not(.is-active) .rise,
.slide:not(.is-active) .rule,
.slide:not(.is-active) .print img,
.slide:not(.is-active) .claim__strike { transition: none 0s linear var(--t-exit); }

.rule { transform: scaleX(0); }
.is-active .rule { transform: scaleX(1); transition: transform var(--t-count) var(--ease-out) 60ms; }

.print img { opacity: 0; filter: sepia(0.7) contrast(0.6) brightness(1.06); }
.is-active .print img {
  opacity: 1;
  filter: sepia(0) contrast(1) brightness(1);
  transition: opacity 500ms var(--ease-out) 120ms, filter 700ms var(--ease-out) 120ms;
}

.verdict { opacity: 0; transform: translateY(calc(14 * var(--u))); }
.is-revealed .verdict {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-enter) var(--ease-out) 220ms, transform var(--t-enter) var(--ease-out) 220ms;
}
.is-revealed .claim__strike { transform: scaleX(1); transition: transform 360ms var(--ease-out); }

.route .wipe { transform: scaleX(var(--from, 0)); }
.is-active .route .wipe { transform: scaleX(var(--to, 1)); transition: transform 900ms var(--ease-in-out) 200ms; }
.route .stop { opacity: 0.55; }
.route .stop.is-reached { opacity: 1; }
.route .stop.is-current { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.9); }
.is-active .route .stop.is-current { opacity: 1; transform: none; transition: opacity 200ms var(--ease-out) 1000ms, transform 200ms var(--ease-out) 1000ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}