/* Nachklang: Info-Fenster der Welten, <dialog id="nk-info" class="nk-info">.
   Der Server setzt es direkt nach <body> (src/lib/weltInfo.js), die Leiste zeigt
   dafür das ⓘ. Auf breiten Schirmen ein Blatt am rechten Rand, auf schmalen eines
   von unten. Alle Abstände folgen einer Zeile (--nk-info-zeile), damit Text auch
   auf liniertem Grund sauber sitzt. Jede Welt kleidet es über Variablen ein:
     --nk-info-grund          Hintergrund des Blatts
     --nk-info-farbe          Schrift
     --nk-info-leise          Nebentext: Eckdaten, Überschriften, Rollen
     --nk-info-linie          feine Flächen und Linien (Knopf beim Überfahren)
     --nk-info-akzent         Links und Punkte
     --nk-info-schrift        Schriftfamilie, sonst die der Leiste
     --nk-info-titel-groesse, --nk-info-titel-breite, --nk-info-titel-gewicht
     --nk-info-titel-zeilen   Höhe des Titels in Zeilen, --nk-info-titel-max Obergrenze auf dem Handy
     --nk-info-einzug         Abstand des Texts vom linken Rand
     --nk-info-muster         Hintergrundbilder, laufen mit dem Text mit
     --nk-info-muster-lage    deren background-position
     --nk-info-schleier       Abdunklung der Welt dahinter */
.nk-info {
  --zeile: var(--nk-info-zeile, 28px);
  --grund: var(--nk-info-grund, #17191e);
  --farbe: var(--nk-info-farbe, #eeebe5);
  --leise: var(--nk-info-leise, rgba(238, 235, 229, .68));
  --linie: var(--nk-info-linie, rgba(238, 235, 229, .14));
  --akzent: var(--nk-info-akzent, #eeebe5);
  position: fixed; inset: 12px 12px 12px auto; z-index: 60; box-sizing: border-box;
  width: min(460px, calc(100vw - 24px)); height: auto; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: 18px; overflow: hidden; contain: paint;
  background: var(--grund); color: var(--farbe);
  font-family: var(--nk-info-schrift, var(--nk-leiste-schrift, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
  font-size: 16px; line-height: var(--zeile); font-weight: 400; letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: antialiased; user-select: text; -webkit-user-select: text;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .34), 0 2px 8px rgba(0, 0, 0, .12);
}
.nk-info *, .nk-info *::before, .nk-info *::after { box-sizing: border-box; }
.nk-info[open] { display: flex; flex-direction: column; animation: nk-info-ein .34s cubic-bezier(.2, .7, .2, 1) both; }
.nk-info::backdrop { background: var(--nk-info-schleier, rgba(8, 8, 10, .42)); animation: nk-info-schleier .34s linear both; }
@keyframes nk-info-ein { from { opacity: 0; transform: translateX(32px); } }
@keyframes nk-info-schleier { from { opacity: 0; } }

.nk-info__zu-form { margin: 0; }
.nk-info__zu {
  position: absolute; top: 12px; right: 12px; z-index: 1; width: 36px; height: 36px; margin: 0; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle closest-side, var(--grund) 64%, transparent); color: var(--farbe); transition: box-shadow .15s;
}
/* weicher Hof in der Blattfarbe: gescrollter Text verschwindet unter dem ✕, Randmotive bleiben ganz */
.nk-info__zu:hover { box-shadow: inset 0 0 0 18px var(--linie); }
.nk-info__zu:focus-visible, .nk-info a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.nk-info__zu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.nk-info__inhalt {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: calc(var(--zeile) * 2) 40px calc(var(--zeile) * 2) var(--nk-info-einzug, 36px);
  background-image: var(--nk-info-muster, none); background-position: var(--nk-info-muster-lage, 0 0);
  background-attachment: local; scrollbar-width: thin; scrollbar-color: var(--linie) transparent;
}
.nk-info__kopf { margin: 0; padding: 0; }
.nk-info__titel {
  margin: 0; padding: 0; color: inherit; font: inherit;
  font-size: var(--nk-info-titel-groesse, 40px); line-height: calc(var(--zeile) * var(--nk-info-titel-zeilen, 2));
  font-weight: var(--nk-info-titel-gewicht, 750); font-stretch: var(--nk-info-titel-breite, 100%);
  letter-spacing: -.01em; overflow-wrap: break-word; text-wrap: balance;
}
.nk-info__eckdaten { margin: 0; color: var(--leise); font-size: 14px; }
.nk-info__text { margin: var(--zeile) 0 0; font-size: 17px; text-wrap: pretty; }
.nk-info__teil { margin: var(--zeile) 0 0; padding: 0; }
.nk-info__ueber { margin: 0; padding: 0; color: var(--leise); font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.nk-info__figuren { margin: 0; padding: 0; }
.nk-info__figuren dt { margin: 0; font-weight: 700; }
.nk-info__figuren dd { margin: 0; color: var(--leise); text-wrap: pretty; }
.nk-info__wissen, .nk-info__links { margin: 0; padding: 0; list-style: none; }
.nk-info__wissen li { position: relative; margin: 0; padding: 0 0 0 20px; text-wrap: pretty; }
.nk-info__wissen li + li { margin-top: var(--zeile); }
.nk-info__wissen li::before {
  content: ""; position: absolute; left: 1px; top: calc(var(--zeile) / 2 - 3px);
  width: 6px; height: 6px; border-radius: 50%; background: var(--akzent);
}
.nk-info__links li { margin: 0; padding: 0; }
.nk-info a {
  color: var(--akzent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  cursor: pointer; pointer-events: auto;
}
.nk-info a:hover { text-decoration-thickness: 2px; }

@media (max-width: 600px) {
  .nk-info { inset: auto 0 0 0; width: 100%; max-height: 88dvh; border-radius: 18px 18px 0 0; }
  .nk-info[open] { animation-name: nk-info-hoch; }
  .nk-info__inhalt { padding: calc(var(--zeile) * 2) 24px calc(var(--zeile) * 2 + env(safe-area-inset-bottom)) var(--nk-info-einzug, 24px); }
  .nk-info__titel { font-size: min(var(--nk-info-titel-groesse, 40px), var(--nk-info-titel-max, 13vw)); }
}
@keyframes nk-info-hoch { from { opacity: 0; transform: translateY(48px); } }