/* Nachklang, Welt: „Zwölf Minuten“. Beton, Vitrinenrot, Schwarz und die Monoschrift vom Cover. */
@font-face {
  font-family: "JBM NK"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/assets/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yK0BNntkaToggR7BYZbNPx7cwhsk.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: "JBM NK"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/assets/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yK0BNntkaToggR7BYZbNPxDcwg.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 {
  --schwarz: #0e0e0d; --beton: #8a847d; --rot: #a3121a; --rot-hell: #bf1a22; --papier: #dcd6cc;
  --mono: "JBM NK", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #1a1918; color: var(--papier); font-family: var(--mono);
  -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) */
  --nk-leiste-farbe: #dcd6cc; --nk-leiste-spur: rgba(220, 214, 204, .24); --nk-leiste-grund: rgba(14, 14, 13, .58);
  --nk-leiste-knopf: #a3121a; --nk-leiste-knopf-farbe: #f3eee6; --nk-leiste-schrift: "JBM NK", ui-monospace, monospace; --nk-leiste-hoehe: 3px;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--rot-hell); 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; }

.blende { position: fixed; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; transition: opacity .7s linear; }
.blende.an { opacity: 1; }

/* das schwarze Band unten wie auf dem Cover */
.band {
  position: fixed; z-index: 3; left: 0; right: 0; bottom: 0;
  min-height: clamp(150px, 25vh, 330px);
  padding: clamp(16px, 3.4vh, 38px) clamp(18px, 5.6vw, 84px) calc(clamp(16px, 3.4vh, 36px) + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap;
  background-color: var(--schwarz);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86 0 0 0 0 .84 0 0 0 0 .8 0 0 0 .55 -.33'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
  transition: transform 1.3s cubic-bezier(.6, 0, .2, 1), opacity 1.3s linear;
}
body[data-phase="sitzung"] .band:not(.an) { transform: translateY(104%); opacity: 0; pointer-events: none; }
.band__titel {
  margin: 0; display: grid; color: var(--papier); font-family: var(--mono); font-weight: 540;
  font-size: clamp(40px, 9vh, 112px); line-height: .96; letter-spacing: .005em;
}
.band__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(10px, 1.6vh, 16px); padding-bottom: .35em; }
.band__text { margin: 0; font: 400 clamp(13px, 1.85vh, 17px)/1.4 var(--mono); color: rgba(220, 214, 204, .74); letter-spacing: .01em; }
.los, .weg {
  display: inline-block; border: 0; border-radius: 2px; cursor: pointer; text-decoration: none;
  padding: clamp(12px, 1.8vh, 16px) clamp(24px, 2.6vw, 36px);
  background: var(--rot); color: #f3eee6; font: 600 clamp(16px, 2.2vh, 20px)/1 var(--mono); letter-spacing: .07em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 10px 26px rgba(0, 0, 0, .35);
  transition: background .2s linear, transform .15s;
}
.los:hover, .weg:hover { background: var(--rot-hell); transform: translateY(-1px); }
body[data-phase="danach"] .band__text, body.ende-an .band__text, body.ende-an .los, body[data-phase="danach"] .los { display: none; }

/* Standpunkte */
.standpunkte {
  position: fixed; z-index: 3; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); translate: -50% 0; display: flex; gap: 4px;
  padding: 4px; border-radius: 3px; background: rgba(14, 14, 13, .74); box-shadow: inset 0 0 0 1px rgba(220, 214, 204, .1);
  transition: opacity .8s linear;
}
body.ende-an .standpunkte { opacity: 0; pointer-events: none; }
.standpunkte button {
  border: 0; border-radius: 2px; padding: 9px 14px; cursor: pointer; background: none; color: var(--papier);
  font: 500 13px/1 var(--mono); letter-spacing: .05em; white-space: nowrap;
}
.standpunkte button[aria-pressed="true"] { background: var(--rot); color: #f3eee6; }
.standpunkte button:hover { background: rgba(220, 214, 204, .12); }
.standpunkte button[aria-pressed="true"]:hover { background: var(--rot-hell); }
.hinweis {
  position: fixed; z-index: 4; left: 50%; bottom: calc(70px + env(safe-area-inset-bottom)); translate: -50% 0; margin: 0; max-width: calc(100vw - 32px); width: max-content;
  padding: 9px 14px; border-radius: 3px; background: rgba(14, 14, 13, .82); color: var(--papier); text-align: center;
  font: 400 13px/1.4 var(--mono); opacity: 0; transition: opacity .6s linear; pointer-events: none;
}
.hinweis.an { opacity: 1; }

.ohne-gl, .ohne-js {
  position: fixed; inset: auto 16px 16px; z-index: 20; margin: 0; padding: 16px 18px; border-radius: 3px; background: var(--schwarz); color: var(--papier);
  font: 400 15px/1.45 var(--mono);
}
.ohne-gl p { margin: 0 0 12px; }
.ohne-js a { color: var(--papier); }

/* Hochformat: das Band wird höher, alles steht links untereinander */
@media (max-aspect-ratio: 9/10) {
  .band { min-height: 34vh; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
  .band__titel { font-size: clamp(44px, 14.5vw, 86px); }
  .band__rechts { align-items: flex-start; padding-bottom: 0; }
  .standpunkte button { padding: 9px 11px; font-size: 12px; }
}
@media (max-width: 380px) {
  .standpunkte button { padding: 8px 9px; letter-spacing: .02em; }
}

/* Info-Fenster (ⓘ in der Leiste): das schwarze Band vom Cover als Blatt, Monoschrift in Hellgrau, Punkte
   im Vitrinenrot; oben rechts die vier roten Punkte auf feinen Linien wie auf dem Cover. */
body {
  --nk-info-grund: #0e0e0d; --nk-info-farbe: #dcd6cc; --nk-info-leise: #a39e96; --nk-info-linie: rgba(220, 214, 204, .14);
  --nk-info-akzent: #bf1a22; --nk-info-schrift: "JBM NK", ui-monospace, monospace; --nk-info-schleier: rgba(14, 14, 13, .45);
  --nk-info-titel-groesse: 50px; --nk-info-titel-zeilen: 2; --nk-info-titel-max: 12.5vw; --nk-info-titel-gewicht: 540;
  --nk-info-muster:
    radial-gradient(circle at 22px 22px, #bf1a22 0 4px, transparent 4.6px), radial-gradient(circle at 58px 22px, #bf1a22 0 4px, transparent 4.6px),
    radial-gradient(circle at 22px 58px, #bf1a22 0 4px, transparent 4.6px), radial-gradient(circle at 58px 58px, #bf1a22 0 4px, transparent 4.6px),
    linear-gradient(to bottom, transparent 21.5px, rgba(220, 214, 204, .22) 21.5px 22.5px, transparent 22.5px 57.5px, rgba(220, 214, 204, .22) 57.5px 58.5px, transparent 58.5px),
    linear-gradient(to right, transparent 21.5px, rgba(220, 214, 204, .22) 21.5px 22.5px, transparent 22.5px 57.5px, rgba(220, 214, 204, .22) 57.5px 58.5px, transparent 58.5px);
  --nk-info-muster-lage: calc(100% - 40px) 64px;
}
.nk-info__inhalt { background-size: 80px 80px; background-repeat: no-repeat; }
.nk-info__titel { width: min-content; }
/* die Monoschrift läuft breit und groß: optisch an die übrigen Blätter angleichen, das Zeilenraster bleibt */
.nk-info { font-size: 15px; } .nk-info__text { font-size: 16px; }