/* Nachklang, Welt: „Gegenüber“. Flieder, Violett, Bernstein und Creme wie auf dem Cover. */
@font-face {
  font-family: "Garamond NK"; font-style: normal; font-display: swap; font-weight: 400 800;
  src: url(/assets/fonts/eb-garamond-latin-ext-wght-normal.woff2) format("woff2-variations"), url(/assets/fonts/eb-garamond-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: "Garamond NK"; font-style: normal; font-display: swap; font-weight: 400 800;
  src: url(/assets/fonts/eb-garamond-latin-wght-normal.woff2) format("woff2-variations"), url(/assets/fonts/eb-garamond-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 {
  --nacht: #1d1a2c; --dunkel: #2e2940; --lavendel: #9b8fae; --flieder: #cfc5da; --bernstein: #f2b563; --creme: #f4e8d4;
  --serif: "Garamond NK", Georgia, "Times New Roman", serif; --k: 1;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--dunkel); color: var(--creme); font-family: var(--serif);
  -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: #f4e8d4; --nk-leiste-spur: rgba(244, 232, 212, .26); --nk-leiste-grund: rgba(29, 26, 44, .46);
  --nk-leiste-knopf: #f2b563; --nk-leiste-knopf-farbe: #231d31; --nk-leiste-schrift: "Garamond NK", Georgia, serif; --nk-leiste-hoehe: 3px;
}
/* Druckkorn wie auf dem Cover */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* die Ecken dunkeln ein wenig nach, wie beim Blick aus einem Fenster */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 48%, rgba(20, 16, 32, 0) 55%, rgba(20, 16, 32, .42) 100%);
}
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; }

/* durch das Opernglas: zwei Kreise, der Rest schwarz; die Schärfe setzt das Skript */
.glas { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: #07060b; }
.glas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Plakat: der Titel quer über dem Hof, darunter Zeile und Knopf */
.plakat {
  position: fixed; z-index: 3; inset: 0; padding: 0 16px calc(34px * var(--k));
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; transition: opacity .9s linear;
  pointer-events: none;
}
.plakat > * { pointer-events: auto; }
.plakat__titel {
  position: absolute; left: 0; right: 0; top: 41%; translate: 0 -50%; margin: 0; padding: 0 12px;
  color: var(--creme); font-weight: 760; letter-spacing: -.012em; line-height: .9;
  font-size: min(calc(150px * var(--k)), 15.5vw, 19vh);
  text-shadow: 0 2px 26px rgba(29, 26, 44, .55);
}
.plakat__zeile { display: flex; align-items: center; justify-content: center; gap: calc(22px * var(--k)); flex-wrap: wrap; }
.plakat__text { margin: 0; font: 500 calc(19px * var(--k))/1.35 var(--serif); color: var(--flieder); text-shadow: 0 1px 12px rgba(29, 26, 44, .8); }
.los {
  border: 0; border-radius: 999px; padding: calc(12px * var(--k)) calc(32px * var(--k)) calc(14px * var(--k)); cursor: pointer;
  background: var(--bernstein); color: #231d31; font: 700 calc(21px * var(--k))/1 var(--serif); letter-spacing: .01em;
  box-shadow: 0 0 0 1px rgba(255, 236, 200, .35), 0 8px 30px rgba(242, 181, 99, .35);
  transition: transform .15s, box-shadow .15s;
}
.los:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 236, 200, .5), 0 10px 36px rgba(242, 181, 99, .5); }
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(29, 26, 44, .7);
}
.standpunkte button {
  border: 0; border-radius: 999px; padding: calc(8px * var(--k)) calc(17px * var(--k)) calc(9px * var(--k)); cursor: pointer; background: none; color: var(--flieder);
  font: 600 calc(16px * var(--k))/1 var(--serif); white-space: nowrap;
}
.standpunkte button[aria-pressed="true"] { background: var(--creme); color: #231d31; }
.standpunkte button:hover { background: rgba(207, 197, 218, .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: 8px 17px 9px; border-radius: 999px; background: var(--creme); color: #231d31; text-align: center;
  font: 600 calc(16px * var(--k))/1.3 var(--serif); opacity: 0; transition: opacity .6s linear; pointer-events: none;
}
.hinweis.an { opacity: 1; }

/* Ende */
.ende {
  position: fixed; z-index: 3; left: 0; right: 0; top: calc(86px * var(--k)); padding: 0 16px; display: flex; flex-direction: column; align-items: center;
  text-align: center; pointer-events: none; animation: ende 3s linear both;
}
.ende > * { pointer-events: auto; }
@keyframes ende { from { opacity: 0; } to { opacity: 1; } }
.ende__titel {
  margin: 0; color: var(--creme); font-weight: 760; letter-spacing: -.01em; line-height: .95; font-size: min(calc(96px * var(--k)), 14vw);
  text-shadow: 0 2px 24px rgba(29, 26, 44, .6);
}
.ende__weg {
  display: inline-block; margin-top: calc(20px * var(--k)); border-radius: 999px; padding: calc(12px * var(--k)) calc(28px * var(--k)) calc(13px * var(--k));
  text-decoration: none; background: var(--bernstein); color: #231d31; font: 700 calc(19px * var(--k))/1 var(--serif);
  box-shadow: 0 8px 30px rgba(242, 181, 99, .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(--nacht); color: var(--creme);
  font: 500 17px/1.4 var(--serif);
}
.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 9px; font-size: 15px; }
  .hinweis { bottom: 124px; }
  .plakat { padding-bottom: 28px; }
  .plakat__titel { top: 36%; }
  .plakat__text { font-size: 16.5px; }
}

/* Info-Fenster (ⓘ in der Leiste): Violett und Creme wie der Hof in der Dämmerung, die Garamond der Welt,
   Punkte und Link in Bernstein. Von oben rechts fällt warmes Fensterlicht herein, wie Margots Licht
   über den Hof. */
body {
  --nk-info-grund: #2e2940; --nk-info-farbe: #f4e8d4; --nk-info-leise: #cfc5da; --nk-info-linie: rgba(244, 232, 212, .14);
  --nk-info-akzent: #f2b563; --nk-info-schrift: "Garamond NK", Georgia, "Times New Roman", serif; --nk-info-schleier: rgba(20, 16, 32, .45);
  --nk-info-titel-groesse: 68px; --nk-info-titel-zeilen: 3; --nk-info-titel-max: 17vw; --nk-info-titel-gewicht: 760;
  --nk-info-muster: radial-gradient(360px 280px at calc(100% - 8px) 24px, rgba(242, 181, 99, .2), rgba(242, 181, 99, .07) 55%, rgba(242, 181, 99, 0) 100%);
}