/* Nachklang, Welt: „Sieben Gramm Kümmel“. Linolschnitt wie auf dem Cover: Safran, Pflaume, ein roter Ring. */
@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");
  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");
  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 {
  --safran: #e8a542; --hell: #f4c46a; --pflaume: #3b1c27; --rot: #a3301f;
  --serif: "Garamond NK", Garamond, "Times New Roman", serif; --k: 1;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--safran); color: var(--pflaume); 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: #3b1c27; --nk-leiste-spur: rgba(59, 28, 39, .24); --nk-leiste-grund: rgba(244, 196, 106, .62);
  --nk-leiste-knopf: #3b1c27; --nk-leiste-knopf-farbe: #f4c46a; --nk-leiste-schrift: "Garamond NK", Garamond, serif; --nk-leiste-hoehe: 3px;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--pflaume); 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; }

/* der Titel über dem Mörser, zweizeilig wie auf dem Cover */
.titel {
  position: fixed; z-index: 2; left: 0; right: 0; top: max(56px, calc(6.5vh + 8px)); margin: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  color: var(--pflaume); font-weight: 560; letter-spacing: -.01em; line-height: .92; text-align: center;
  font-size: clamp(44px, min(8.4vw, 11.5vh), 128px);
  opacity: 0; transition: opacity 2.4s linear;
}
.titel span { display: block; }
.titel.an { opacity: 1; }
@media (max-aspect-ratio: 3/4) { .titel { font-size: clamp(40px, 12.6vw, 96px); top: max(64px, 8vh); } }

.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(16px * var(--k)) calc(20px * var(--k)); flex-wrap: wrap; transition: opacity .9s linear;
}
.plakat__text { margin: 0; padding: .35em .9em; border-radius: 999px; background: rgba(244, 196, 106, .86); font: 600 calc(18px * var(--k))/1.3 var(--serif); }
.los {
  border: 0; border-radius: 999px; padding: calc(12px * var(--k)) calc(34px * var(--k)) calc(14px * var(--k)); cursor: pointer;
  background: var(--pflaume); color: var(--hell); font: 600 calc(22px * var(--k))/1 var(--serif); letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(59, 28, 39, .28); transition: transform .15s;
}
.los:hover { transform: translateY(-2px); }
body:not([data-phase="warten"]) .plakat { opacity: 0; 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(59, 28, 39, .86);
}
.standpunkte button {
  border: 0; border-radius: 999px; padding: calc(7px * var(--k)) calc(16px * var(--k)) calc(9px * var(--k)); cursor: pointer; background: none; color: var(--hell);
  font: 600 calc(16px * var(--k))/1 var(--serif); white-space: nowrap;
}
.standpunkte button[aria-pressed="true"] { background: var(--hell); color: var(--pflaume); }
.standpunkte button:hover { background: rgba(244, 196, 106, .18); }
.standpunkte button[aria-pressed="true"]:hover { background: var(--hell); }
.hinweis {
  position: fixed; z-index: 4; left: 50%; bottom: calc(74px * var(--k)); translate: -50% 0; margin: 0; max-width: calc(100vw - 32px); width: max-content;
  padding: 8px 16px 9px; border-radius: 999px; background: var(--pflaume); color: var(--hell); 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: der Titel steht wieder oben, darunter ein Weg zurück */
.ende { position: fixed; z-index: 3; left: 0; right: 0; bottom: calc(84px * 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(12px * var(--k)) calc(28px * var(--k)) calc(14px * var(--k));
  text-decoration: none; background: var(--hell); color: var(--pflaume); font: 600 calc(20px * var(--k))/1 var(--serif);
  border: 2px solid var(--pflaume); box-shadow: 0 6px 18px rgba(59, 28, 39, .3);
}

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

@media (max-width: 560px) {
  .standpunkte button { padding: 7px 13px 9px; font-size: 15px; }
  .hinweis { bottom: 118px; font-size: 15px; }
  .plakat__text { font-size: 16px; }
  .plakat { padding-bottom: 26px; }
}

/* Info-Fenster (ⓘ in der Leiste): ein Handabzug im Linolschnitt wie das Cover, Safranpapier und Druckfarbe
   Pflaume, der Titel in Garamond. Hinter „Kümmel“ liegen sieben Kümmelkörner, hell mit dunkler Kontur wie
   die Körner auf dem Cover (zwei gedrehte Flächen, damit sie nicht in Reih und Glied liegen). */
body {
  --nk-info-grund: #f4c46a; --nk-info-farbe: #3b1c27; --nk-info-leise: #5c3038; --nk-info-linie: rgba(59, 28, 39, .13);
  --nk-info-akzent: #92291a; --nk-info-schrift: "Garamond NK", Garamond, "Times New Roman", serif; --nk-info-schleier: rgba(59, 28, 39, .42);
  --nk-info-titel-groesse: 52px; --nk-info-titel-zeilen: 2; --nk-info-titel-gewicht: 560; --nk-info-einzug: 40px;
}
.nk-info__kopf { position: relative; }
.nk-info__kopf::before, .nk-info__kopf::after { content: ""; position: absolute; pointer-events: none; }
.nk-info__kopf::before {
  left: 194px; top: 57px; width: 72px; height: 50px; transform: rotate(-28deg);
  background:
    radial-gradient(ellipse 1.3px 6.4px at 11px 15px, #f8d995 82%, transparent 100%),
    radial-gradient(ellipse 2.6px 8.2px at 11px 15px, #3b1c27 84%, transparent 100%),
    radial-gradient(ellipse 6.4px 1.3px at 35px 10px, #f8d995 82%, transparent 100%),
    radial-gradient(ellipse 8.2px 2.6px at 35px 10px, #3b1c27 84%, transparent 100%),
    radial-gradient(ellipse 1.3px 6.4px at 31px 37px, #f8d995 82%, transparent 100%),
    radial-gradient(ellipse 2.6px 8.2px at 31px 37px, #3b1c27 84%, transparent 100%),
    radial-gradient(ellipse 6.4px 1.3px at 60px 31px, #f8d995 82%, transparent 100%),
    radial-gradient(ellipse 8.2px 2.6px at 60px 31px, #3b1c27 84%, transparent 100%);
}
.nk-info__kopf::after {
  left: 250px; top: 44px; width: 62px; height: 52px; transform: rotate(32deg);
  background:
    radial-gradient(ellipse 1.3px 6.4px at 13px 31px, #f8d995 82%, transparent 100%),
    radial-gradient(ellipse 2.6px 8.2px at 13px 31px, #3b1c27 84%, transparent 100%),
    radial-gradient(ellipse 6.4px 1.3px at 37px 13px, #f8d995 82%, transparent 100%),
    radial-gradient(ellipse 8.2px 2.6px at 37px 13px, #3b1c27 84%, transparent 100%),
    radial-gradient(ellipse 1.3px 6.4px at 50px 39px, #f8d995 82%, transparent 100%),
    radial-gradient(ellipse 2.6px 8.2px at 50px 39px, #3b1c27 84%, transparent 100%);
}