/* Nachklang, Welt: „Zu Viel“. Pflaume, Rosé und Creme wie im Siebdruck des Covers, dazu ein einziges Lindgrün. */
@font-face {
  font-family: "Manrope NK"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/assets/fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations"), url(/assets/fonts/manrope-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope NK"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/assets/fonts/manrope-latin-wght-normal.woff2) format("woff2-variations"), url(/assets/fonts/manrope-latin-wght-normal.woff2) format("woff2");
  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;
}
:root {
  --pflaume: #361725; --tief: #240b18; --creme: #f7e0cf; --hellrose: #e4b3a9; --rose: #cc8787; --altrose: #986265; --linde: #cfe13a;
  --sans: "Manrope NK", Arial, sans-serif; --k: 1;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--pflaume); color: var(--creme); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; touch-action: none;
  /* Leiste und ✕ (aus /assets/welt/leiste.js) teilen sich die Farben */
  --nk-leiste-farbe: #f7e0cf; --nk-leiste-spur: rgba(247, 224, 207, .24); --nk-leiste-grund: rgba(36, 11, 24, .62);
  --nk-leiste-knopf: #cfe13a; --nk-leiste-knopf-farbe: #240b18; --nk-leiste-schrift: "Manrope NK", Arial, sans-serif; --nk-leiste-hoehe: 3px;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--linde); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.raum { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; outline: none; }
body.z-zieht .raum { cursor: grabbing; }

/* Titel wie auf dem Cover: zwei Zeilen, linksbündig, mitten in der leeren Mitte */
.plakat__titel, .ende__titel {
  margin: 0; color: var(--creme); font-weight: 800; letter-spacing: -.02em; line-height: .96; text-align: left;
  font-size: min(calc(118px * var(--k)), 21vw, 17vh);
  text-shadow: 0 0 .5em rgba(36, 11, 24, .9), 0 0 .12em rgba(36, 11, 24, .8);
}
.plakat__titel span, .ende__titel span { display: block; }

.plakat {
  position: fixed; z-index: 3; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .9s linear;
}
.plakat::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(150px * var(--k)); pointer-events: none;
  background: linear-gradient(to top, rgba(36, 11, 24, .9), rgba(36, 11, 24, .55) 55%, rgba(36, 11, 24, 0));
}
.plakat__zeile {
  position: fixed; z-index: 1; left: 50%; bottom: calc(32px * var(--k)); translate: -50% 0; width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; justify-content: center; gap: calc(20px * var(--k)); flex-wrap: wrap; pointer-events: auto;
}
.plakat__text { margin: 0; font: 600 calc(16px * var(--k))/1.35 var(--sans); color: var(--hellrose); text-align: center; }
.los {
  border: 0; border-radius: 999px; padding: calc(14px * var(--k)) calc(32px * var(--k)); cursor: pointer;
  background: var(--linde); color: var(--tief); font: 800 calc(18px * var(--k))/1 var(--sans); letter-spacing: .01em;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
  transition: transform .15s, box-shadow .15s;
}
.los:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, .3); }
body:not([data-phase="warten"]) .plakat { opacity: 0; }
body:not([data-phase="warten"]) .plakat * { pointer-events: none; }

/* Standpunkte */
.standpunkte {
  position: fixed; z-index: 3; left: 50%; bottom: calc(16px * var(--k)); translate: -50% 0; display: flex; gap: calc(6px * var(--k));
  padding: 5px; border-radius: 999px; background: rgba(36, 11, 24, .8);
}
.standpunkte button {
  border: 0; border-radius: 999px; padding: calc(8px * var(--k)) calc(15px * var(--k)); cursor: pointer; background: none; color: var(--hellrose);
  font: 700 calc(14px * var(--k))/1 var(--sans); white-space: nowrap;
}
.standpunkte button[aria-pressed="true"] { background: var(--creme); color: var(--tief); }
.standpunkte button:hover { background: rgba(228, 179, 169, .16); }
.standpunkte button[aria-pressed="true"]:hover { background: var(--creme); }
.hinweis {
  position: fixed; z-index: 4; left: 50%; bottom: calc(76px * var(--k)); translate: -50% 0; margin: 0; max-width: calc(100vw - 32px); width: max-content;
  padding: 9px 16px; border-radius: 999px; background: var(--creme); color: var(--tief); text-align: center;
  font: 700 calc(14px * var(--k))/1.35 var(--sans); opacity: 0; transition: opacity .6s linear; pointer-events: none;
}
.hinweis.an { opacity: 1; }

/* Ende: der Titel kehrt in die Mitte zurück, darunter der eine Weg */
.ende {
  position: fixed; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; animation: ende 3s linear both;
}
.ende > * { pointer-events: auto; }
@keyframes ende { from { opacity: 0; } to { opacity: 1; } }
.ende__titel { font-size: min(calc(96px * var(--k)), 17vw, 14vh); }
.ende__weg {
  display: inline-block; margin-top: calc(26px * var(--k)); border-radius: 999px; padding: calc(13px * var(--k)) calc(28px * var(--k));
  text-decoration: none; background: var(--creme); color: var(--tief); font: 800 calc(17px * var(--k))/1 var(--sans);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
}
.ende__weg:hover { transform: translateY(-2px); }

.ohne-gl, .ohne-js {
  position: fixed; inset: auto 16px 16px; z-index: 20; margin: 0; padding: 16px 18px; border-radius: 12px; background: var(--tief); color: var(--creme);
  font: 600 15px/1.4 var(--sans);
}
.ohne-gl p { margin: 0; }
.ohne-gl .ende__weg { margin-top: 12px; box-shadow: none; }
.ohne-js a { color: var(--creme); }

@media (max-width: 560px) {
  .standpunkte button { padding: 8px 11px; font-size: 13px; }
  .hinweis { bottom: 70px; }
  .plakat__zeile { flex-direction: column; gap: 14px; bottom: 28px; }
  .plakat__text { font-size: 14px; }
  .plakat::after { height: 190px; }
}

/* Info-Fenster (ⓘ in der Leiste): Pflaume, Creme und Rosé wie im Siebdruck des Covers, das Lindgrün
   für Punkte und Link. Oben rechts zieht ein Band aus fünf Federlinien um den Titel, wie die Bänder
   um die leere Mitte. */
body {
  --nk-info-grund: #361725; --nk-info-farbe: #f7e0cf; --nk-info-leise: #e4b3a9; --nk-info-linie: rgba(247, 224, 207, .14);
  --nk-info-akzent: #cfe13a; --nk-info-schrift: "Manrope NK", Arial, sans-serif; --nk-info-schleier: rgba(36, 11, 24, .5);
  --nk-info-titel-groesse: 76px; --nk-info-titel-zeilen: 3; --nk-info-titel-max: 19vw; --nk-info-titel-gewicht: 800;
  --nk-info-muster: radial-gradient(circle at calc(100% + 40px) -60px, transparent 150px, rgba(204, 135, 135, .8) 150.6px 151.6px,
    transparent 152.2px 156px, rgba(204, 135, 135, .8) 156.6px 157.6px, transparent 158.2px 162px, rgba(204, 135, 135, .8) 162.6px 163.6px,
    transparent 164.2px 168px, rgba(204, 135, 135, .8) 168.6px 169.6px, transparent 170.2px 174px, rgba(204, 135, 135, .8) 174.6px 175.6px,
    transparent 176.2px);
}