/* Nachklang, Welt: „47 Sekunden“. Nachtblau, Creme, Koralle und Senf wie auf dem Cover. */
@font-face {
  font-family: "Archivo NK"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(/assets/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations"), url(/assets/fonts/archivo-latin-ext-wdth-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: "Archivo NK"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(/assets/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"), url(/assets/fonts/archivo-latin-wdth-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 {
  --navy: #12334d; --tief: #0b2032; --creme: #f8ebcd; --koralle: #ef8667; --senf: #f0ae18;
  --sans: "Archivo NK", Arial, sans-serif; --k: 1;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--navy); 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: #f8ebcd; --nk-leiste-spur: rgba(248, 235, 205, .26); --nk-leiste-grund: rgba(11, 32, 50, .55);
  --nk-leiste-knopf: #f8ebcd; --nk-leiste-knopf-farbe: #12334d; --nk-leiste-schrift: "Archivo NK", Arial, sans-serif; --nk-leiste-hoehe: 3px;
}
/* Papierkorn wie auf dem Cover, fest auf dem Schirm */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--creme); 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; }
body.z-ziel .raum { cursor: pointer; }

/* Plakat: der Titel steht im Lichtfleck (im Raum gezeichnet), hier nur Zeile und Knopf */
.plakat {
  position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 calc(28px * var(--k)) calc(30px * var(--k));
  display: flex; flex-direction: column; align-items: center; text-align: center; transition: opacity .9s linear; pointer-events: none;
}
.plakat > * { pointer-events: auto; }
.plakat__zeile { display: flex; align-items: center; justify-content: center; gap: calc(18px * var(--k)); flex-wrap: wrap; animation: auftauchen 1.2s linear both; }
@keyframes auftauchen { from { opacity: 0; } to { opacity: 1; } }
.plakat__text { margin: 0; font: 600 calc(17px * var(--k))/1.35 var(--sans); color: var(--creme); }
.los {
  border: 0; border-radius: 999px; padding: calc(14px * var(--k)) calc(34px * var(--k)); cursor: pointer;
  background: var(--koralle); color: var(--navy); font: 820 calc(19px * var(--k))/1 var(--sans); font-stretch: 96%; letter-spacing: .005em;
  box-shadow: 0 5px 0 rgba(6, 18, 30, .45);
  transition: transform .15s, box-shadow .15s;
}
.los:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(6, 18, 30, .45); }
.plakat__bald {
  margin: 0; border-radius: 999px; padding: calc(13px * var(--k)) calc(26px * var(--k));
  background: rgba(248, 235, 205, .12); color: var(--creme); font: 760 calc(18px * var(--k))/1 var(--sans);
}
body:not([data-phase="warten"]) .plakat { opacity: 0; pointer-events: none; }
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(11, 32, 50, .78);
}
.standpunkte button {
  border: 0; border-radius: 999px; padding: calc(8px * var(--k)) calc(16px * var(--k)); cursor: pointer; background: none; color: var(--creme);
  font: 700 calc(14px * var(--k))/1 var(--sans); white-space: nowrap;
}
.standpunkte button[aria-pressed="true"] { background: var(--creme); color: var(--navy); }
.standpunkte button:hover { background: rgba(248, 235, 205, .14); }
.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(--navy); text-align: center;
  font: 650 calc(14px * var(--k))/1.35 var(--sans); opacity: 0; transition: opacity .6s linear; pointer-events: none;
}
.hinweis.an { opacity: 1; }

/* Ende: der Titel steht wieder im Licht, darunter nur der Weg zurück */
.ende {
  position: fixed; z-index: 3; left: 0; right: 0; bottom: calc(78px * var(--k)); padding: 0 16px; display: flex; flex-direction: column; align-items: center;
  text-align: center; pointer-events: none; animation: auftauchen 3s linear both;
}
.ende > * { pointer-events: auto; }
.ende__weg {
  display: inline-block; border-radius: 999px; padding: calc(13px * var(--k)) calc(28px * var(--k));
  text-decoration: none; background: var(--creme); color: var(--navy); font: 800 calc(17px * var(--k))/1 var(--sans);
  box-shadow: 0 5px 0 rgba(6, 18, 30, .45);
}
.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 13px; font-size: 13px; }
  .hinweis { bottom: 70px; }
  .plakat { padding-bottom: 26px; }
  .plakat__text { font-size: 14px; }
}

/* Info-Fenster (ⓘ in der Leiste): die Wand des Zimmers in Nachtblau, Schrift in Creme, Links in Koralle wie der
   Tisch. Der Titel steht im Lichtfleck wie auf dem Cover, daneben die schmale Scheibe mit dem Querholz des Fensters. */
body {
  --nk-info-grund: #12334d; --nk-info-farbe: #f8ebcd; --nk-info-leise: rgba(248, 235, 205, .7); --nk-info-linie: rgba(248, 235, 205, .16);
  --nk-info-akzent: #ef8667; --nk-info-schrift: "Archivo NK", Arial, sans-serif; --nk-info-schleier: rgba(6, 18, 30, .5);
  --nk-info-titel-groesse: 56px; --nk-info-titel-zeilen: 2; --nk-info-titel-max: 12vw; --nk-info-titel-gewicht: 850;
}
.nk-info__titel {
  position: relative; isolation: isolate; width: min-content; padding: var(--zeile) .5em calc(var(--zeile) * 2) .32em;
  color: var(--navy); letter-spacing: -.012em;
}
.nk-info__titel::before, .nk-info__titel::after { content: ""; position: absolute; top: 0; bottom: 0; }
.nk-info__titel::before { z-index: -1; left: 0; right: 0; background: var(--creme); clip-path: polygon(0 7%, 100% 2%, 100% 100%, 0 84%); }
.nk-info__titel::after {
  left: calc(100% + .24em); width: .8em; clip-path: polygon(0 1.6%, 100% 0, 100% 100%, 0 97%);
  background: linear-gradient(var(--creme) 0 56%, transparent 56% 62%, var(--creme) 62%);
}