/* Nachklang, Welt: „Siebenundzwanzig“. Regenblau, Nebelgrün, Nachtblau wie auf dem Cover. */
@font-face { font-family: "EB Garamond NK"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/eb-garamond-latin-wght-normal.woff2) format("woff2-variations"), url(/assets/fonts/eb-garamond-latin-wght-normal.woff2) format("woff2"); }
@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"); }
:root { --nacht: #1b2a3b; --nebel: #c8d8de; --regen: #9fbccb; --blatt: #5d7a55; --sans: "Archivo NK", Arial, sans-serif; --serif: "EB Garamond NK", Georgia, serif; --k: 1; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #9fbccb; color: var(--nacht); 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;
  --nk-leiste-farbe: #1b2a3b; --nk-leiste-spur: rgba(27, 42, 59, .22); --nk-leiste-grund: rgba(232, 240, 243, .45);
  --nk-leiste-knopf: #1b2a3b; --nk-leiste-knopf-farbe: #e8f0f3; --nk-leiste-schrift: "Archivo NK", Arial, sans-serif; --nk-leiste-hoehe: 3px;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--nacht); 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: crosshair; outline: none; }

/* der Titel: Lage und Größe setzt das Skript, damit er im Himmel steht wie auf dem Cover */
.himmelstitel {
  position: fixed; z-index: 2; left: 0; top: 0; margin: 0; white-space: nowrap; pointer-events: none;
  color: var(--nacht); font-family: var(--serif); font-weight: 560; letter-spacing: .005em; line-height: 1;
  opacity: 0; transition: opacity 2.4s linear; transform-origin: 0 0;
}
.himmelstitel.an { opacity: 1; }

.plakat {
  position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 16px calc(30px * var(--k));
  display: flex; align-items: center; justify-content: center; gap: calc(18px * var(--k)); flex-wrap: wrap; transition: opacity .9s linear;
}
.plakat__text { margin: 0; padding: .4em .9em; border-radius: 999px; background: rgba(232, 240, 243, .82); font: 600 calc(16px * var(--k))/1.35 var(--sans); }
.los {
  border: 0; border-radius: 999px; padding: calc(14px * var(--k)) calc(34px * var(--k)); cursor: pointer;
  background: var(--nacht); color: #eef4f6; font: 700 calc(19px * var(--k))/1 var(--sans); letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(27, 42, 59, .3); transition: transform .15s;
}
.los:hover { transform: translateY(-2px); }
body:not([data-phase="warten"]) .plakat { opacity: 0; pointer-events: none; }

.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(27, 42, 59, .78);
}
.standpunkte button {
  border: 0; border-radius: 999px; padding: calc(8px * var(--k)) calc(15px * var(--k)); cursor: pointer; background: none; color: #e8f0f3;
  font: 700 calc(14px * var(--k))/1 var(--sans); white-space: nowrap;
}
.standpunkte button[aria-pressed="true"] { background: #e8f0f3; color: var(--nacht); }
.standpunkte button:hover { background: rgba(232, 240, 243, .16); }
.standpunkte button[aria-pressed="true"]:hover { background: #e8f0f3; }
.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(--nacht); color: #eef4f6; 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 { position: fixed; z-index: 3; left: 0; right: 0; bottom: calc(92px * var(--k)); display: flex; justify-content: center; pointer-events: none; animation: ende 3s linear both; }
.ende > * { pointer-events: auto; }
@keyframes ende { from { opacity: 0; } to { opacity: 1; } }
.ende__weg {
  display: inline-block; border-radius: 999px; padding: calc(13px * var(--k)) calc(28px * var(--k)); text-decoration: none;
  background: var(--nacht); color: #eef4f6; font: 700 calc(17px * var(--k))/1 var(--sans); box-shadow: 0 6px 18px rgba(27, 42, 59, .3);
}
.ohne-gl, .ohne-js { position: fixed; inset: auto 16px 16px; z-index: 20; margin: 0; padding: 16px 18px; border-radius: 12px; background: var(--nacht); color: #eef4f6; font: 600 15px/1.4 var(--sans); }
.ohne-gl p { margin: 0; }
.ohne-gl .ende__weg { margin-top: 12px; background: #eef4f6; color: var(--nacht); box-shadow: none; }
.ohne-js a { color: #eef4f6; }
@media (max-width: 560px) {
  .standpunkte button { padding: 8px 12px; font-size: 13px; }
  .hinweis { bottom: 124px; }
  .plakat__text { font-size: 14px; }
}

/* Info-Fenster (ⓘ in der Leiste): ein Blatt in Fensterlicht und Nebel, Schrift nachtblau wie der Titel auf dem Cover;
   oben ein Streifen Regenhimmel, in dem der Titel steht. */
body {
  --nk-info-grund: #e3ebee; --nk-info-farbe: #1b2a3b; --nk-info-leise: #3d5063; --nk-info-linie: rgba(27, 42, 59, .1);
  --nk-info-akzent: #1b2a3b; --nk-info-schrift: "Archivo NK", Arial, sans-serif; --nk-info-schleier: rgba(27, 42, 59, .34);
  --nk-info-titel-groesse: 50px; --nk-info-titel-zeilen: 2; --nk-info-titel-max: 11.5vw; --nk-info-titel-gewicht: 560;
  --nk-info-muster: linear-gradient(to bottom, rgba(227, 235, 238, 0), #e3ebee 168px),
    repeating-linear-gradient(96deg, transparent 0 23px, rgba(255, 255, 255, .3) 23px 24px), linear-gradient(#9fbccb, #9fbccb);
}
.nk-info__inhalt { background-size: 100% 168px; background-repeat: no-repeat; }
.nk-info__titel { font-family: "EB Garamond NK", Georgia, serif; letter-spacing: .005em; }