/* ============================================
   NACHKLANG — kleines Wahrnehmungs-Erlebnis (Nachklang 2.0)
   Eigenstaendige Seite (Aufruf per QR-Code nach Kursen),
   deshalb wie die Kampagnenseiten mit eigener CSS-Datei
   statt /assets/style.css. Nutzt assets/fonts.css und
   assets/tokens.css (muessen im <head> VOR dieser Datei
   geladen werden) sowie assets/sheet.css fuer das Anmelde-Sheet.

   Aufbau: fuenf Vollbild-Karten mit Scroll-Snap, ohne Vorschaltbildschirm.
     K1 Sehen · K2 Beruehren · K3 Innehalten (Stille) · K4 Hoeren · K5 Gehen (hell, Terminbox)
   Das Geraet wird im <head> erkannt (Klassen nk-m-handy, nk-m-desktop, nk-m-tablet auf <html>);
   die Textvarianten heissen .nk-v-handy, .nk-v-desktop, .nk-v-tablet. Ohne JavaScript sind alle
   Karten und beide Hauptvarianten sichtbar (Fail-open): Das Verstecken und die Vollbild-Hoehe
   gelten nur mit der Klasse .nk-js auf <html>.

   Farb-Dramaturgie: von fast schwarz (K1) ueber warm (K2) zurueck in die Stille (K3, fast
   schwarz) und warm (K4) bis hell (K5). Die Hintergruende stehen als --nk-bg-k1 bis --nk-bg-k5,
   die Textrollen als --nk-* je Karte. Kontraste (WCAG, selbst gerechnet):
   - Text #e8e0d4 auf den dunklen Karten: 11,5:1 bis 15,1:1
   - Gold #d4a54a (Links, Akzent) auf den dunklen Karten: 6,7:1 bis 8,8:1
   - Button dunkel: Schrift #14110b auf Gold, ueber 8:1
   - Button hell: Schrift #fefefc auf Honig-Ocker #855A12 = 6,0:1
   - Text #1a1a1a und Link-Unterstreichung #4F7A2A (4,8:1) auf #fbf8f1
   - Gold nie als Text auf hellem Grund (nur 2,1:1)
   ============================================ */

:root {
  --nk-bg-k1: #0a0a08;
  --nk-bg-k2: #1a1610;
  --nk-bg-k3: #0c0a07;
  --nk-bg-k4: #2a2218;
  --nk-bg-k5: #fbf8f1;

  --nk-text-dunkel: #e8e0d4;
  --nk-text-hell: #1a1a1a;
  --nk-muted-dunkel: #b9ae9d;
  --nk-muted-hell: #666a6d;
  --nk-gold: #d4a54a;
  --nk-gold-hover: #e6bd6a;
  --nk-gold-schrift: #14110b;
  --nk-ocker: #855A12;
  --nk-ocker-hover: #6E4A0E;
  --nk-strich: #B8893A;
  --nk-link-hell: #4F7A2A;
  --nk-linie-dunkel: rgba(232, 224, 212, 0.2);
  --nk-linie-hell: #e7e3d8;

  /* Rollen (Standard: helle Karte, K5) */
  --nk-bg: var(--nk-bg-k5);
  --nk-head: var(--nk-text-hell);
  --nk-text: var(--nk-text-hell);
  --nk-muted: var(--nk-muted-hell);
  --nk-link: var(--nk-text-hell);
  --nk-ul: var(--nk-link-hell);
  --nk-akzent: var(--nk-link-hell);
  --nk-linie: var(--nk-linie-hell);
  --nk-fokus: var(--nk-ocker);
  --nk-btn: var(--nk-ocker);
  --nk-btn-hover: var(--nk-ocker-hover);
  --nk-btn-text: #fefefc;

  --nk-gutter: clamp(24px, 6vw, 40px);
  --nk-measure: 34rem;
  --nk-fade: 1400ms;
}

/* ---------- Karten: Hintergrund und dunkle Rollen ---------- */

.nk-k1, .nk-k2, .nk-k3, .nk-k4 {
  --nk-head: var(--nk-text-dunkel);
  --nk-text: var(--nk-text-dunkel);
  --nk-muted: var(--nk-muted-dunkel);
  --nk-link: var(--nk-gold);
  --nk-ul: var(--nk-gold);
  --nk-akzent: var(--nk-gold);
  --nk-linie: var(--nk-linie-dunkel);
  --nk-fokus: var(--nk-gold);
  --nk-btn: var(--nk-gold);
  --nk-btn-hover: var(--nk-gold-hover);
  --nk-btn-text: var(--nk-gold-schrift);
  color: var(--nk-text);
}
.nk-k1 { --nk-bg: var(--nk-bg-k1); }
.nk-k2 { --nk-bg: var(--nk-bg-k2); }
.nk-k3 { --nk-bg: var(--nk-bg-k3); }
.nk-k4 { --nk-bg: var(--nk-bg-k4); }
.nk-k5 { --nk-bg: var(--nk-bg-k5); }
.nk-k1, .nk-k2, .nk-k3, .nk-k4, .nk-k5 { background: var(--nk-bg); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--nk-bg-k1);
  color: var(--nk-text-hell);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.65;
}

a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--nk-strich); color: #fff; }

h1, h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--nk-head);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 9vw, 60px); }
h2 { font-size: clamp(27px, 6vw, 38px); }

.nk-text p {
  font-size: clamp(19px, 5vw, 22px);
  color: var(--nk-text);
  margin-bottom: 14px;
}
.nk-text p:last-child { margin-bottom: 0; }
.nk-text h1 + p, .nk-text h2 + p { margin-top: 24px; }
.nk-text a {
  color: var(--nk-link);
  text-decoration: underline;
  text-decoration-color: var(--nk-ul);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
@media (hover: hover) {
  .nk-text a:hover { text-decoration-thickness: 3px; }
}
.nk-text a:focus-visible {
  outline: 2px solid var(--nk-fokus);
  outline-offset: 3px;
  border-radius: 2px;
}

.nk-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nk-akzent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}
.nk-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--nk-strich);
  display: inline-block;
}

/* Hinweis zwischen den Textvarianten (nur ohne JavaScript sichtbar) */
.nk-text p.nk-oder { font-size: 16px; color: var(--nk-muted); font-style: italic; }

/* ---------- Button ---------- */

.nk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  background: var(--nk-btn);
  color: var(--nk-btn-text);
  cursor: pointer;
  text-decoration: none;
  transition: background 280ms ease;
}
.nk-text a.nk-btn { color: var(--nk-btn-text); text-decoration: none; }
@media (hover: hover) {
  .nk-btn:hover { background: var(--nk-btn-hover); }
}
.nk-btn:focus-visible,
.nk-text a.nk-btn:focus-visible {
  outline: 2px solid var(--nk-fokus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--nk-bg);
}

/* ---------- Karten (ohne JavaScript normale Bloecke) ---------- */

.nk-karte {
  padding: clamp(48px, 10vh, 96px) var(--nk-gutter);
  position: relative;
}
.nk-karte-inner {
  max-width: var(--nk-measure);
  margin: 0 auto;
}

/* K2: die vier Zeilen der Wahrnehmungsfrage */
.nk-text p.nk-tz {
  font-family: var(--font-serif);
  font-size: clamp(22px, 5.5vw, 28px);
  line-height: 1.3;
  color: var(--nk-head);
  margin-bottom: 18px;
}
.nk-text p.nk-tz:last-child { margin-bottom: 0; }

/* K3: ein einziger Satz. Kein Pfeil, keine Animation, nur Leerraum. Playfair kursiv, 3rem mobil bis 5,5rem Desktop */
.nk-moment {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--nk-head);
}
.nk-k3 .nk-karte-inner { max-width: 44rem; }

/* K4: Text mit Fade und leise Rueckkehr */
.nk-text p.nk-noch {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 5.5vw, 28px);
  color: var(--nk-head);
  margin-top: 28px;
}

/* ---------- K5: Uebergang (helle Schlusskarte) ---------- */

.nk-uebergang-inner {
  max-width: var(--nk-measure);
  margin: 0 auto;
}
.nk-uebergang h2 { margin-bottom: 22px; }
.nk-termin {
  border-top: 1px solid var(--nk-linie);
  border-bottom: 1px solid var(--nk-linie);
  padding: 22px 0;
  margin: 26px 0 8px;
}
.nk-termin-zeile {
  font-family: var(--font-serif);
  font-size: clamp(20px, 5vw, 24px);
  color: var(--nk-head);
  line-height: 1.35;
  margin-bottom: 4px;
}
.nk-text p.nk-termin-zeile { margin-bottom: 4px; font-size: clamp(20px, 5vw, 24px); color: var(--nk-head); }
.nk-text p.nk-termin-zeile--ruhig { font-size: 17px; color: var(--nk-text); font-family: var(--font-sans); }
.nk-termin .nk-btn { margin-top: 18px; }
.nk-links { margin-top: 28px; }
.nk-text .nk-links p { font-size: 17px; margin: 0; }
.nk-pfeil { color: var(--nk-akzent); }
/* P.S. unter dem Brief: eigener Absatz mit deutlichem Abstand, etwas kleiner als der Terminbox-Text, keine Ueberschrift */
.nk-ps { margin-top: clamp(44px, 9vh, 72px); }
.nk-text .nk-ps p { font-size: calc(clamp(19px, 5vw, 22px) * 0.85); color: var(--nk-text); }

/* ============================================
   Mit JavaScript (Klasse .nk-js auf <html>, im <head> gesetzt)
   ============================================ */

/* Textvarianten: nur die des erkannten Geraets. Ohne JavaScript stehen Handy- und Desktop-Variante
   (mit Trenner) da, die reine Tablet-Variante bleibt dann ausgeblendet. */
.nk-v-tablet:not(.nk-v-desktop) { display: none; }
.nk-js .nk-oder { display: none; }
.nk-js .nk-v { display: none; }
.nk-js.nk-m-handy .nk-v-handy,
.nk-js.nk-m-desktop .nk-v-desktop,
.nk-js.nk-m-tablet .nk-v-tablet { display: block; }

/* Vollbild-Karten mit Scroll-Snap (stop: always, damit keine Karte uebersprungen wird) */
html.nk-js { scroll-snap-type: y mandatory; }
.nk-js .nk-karte {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.nk-js .nk-karte-inner { width: 100%; }
.nk-js .nk-uebergang { text-align: left; }
.nk-js .nk-uebergang-inner { width: 100%; }
.nk-js .footer--minimal { scroll-snap-align: end; }

/* Handy: Text fuellt die Breite, 24px seitlich. Tablet und Desktop: schmale Spalte. */
.nk-js.nk-m-handy .nk-karte { padding-left: 24px; padding-right: 24px; }
.nk-js.nk-m-handy .nk-karte-inner { max-width: none; }
.nk-js.nk-m-tablet .nk-karte-inner { max-width: 560px; }
.nk-js.nk-m-desktop .nk-karte-inner { max-width: 480px; }
.nk-js .nk-k3 .nk-karte-inner { max-width: 44rem; }

/* Einblenden von Elementen innerhalb einer Karte; der Platz bleibt reserviert */
.nk-js .nk-wait {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--nk-fade) ease, transform var(--nk-fade) ease, visibility 0s linear var(--nk-fade);
}
.nk-js .nk-wait.nk-da {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--nk-fade) ease, transform var(--nk-fade) ease, visibility 0s linear 0s;
}

/* K1: Wort fuer Wort. Mit Skript bleiben Ueberschrift und Satz fuer Vorleseprogramme im Text,
   sichtbar sind einzelne grosse Worte auf der Buehne. Der Rest erscheint danach an derselben Stelle. */
.nk-kin-buehne { display: none; }
.nk-kin-rest { margin-top: 14px; }
.nk-js .nk-kin-an .nk-kin-feld { display: grid; }
.nk-js .nk-kin-an .nk-kin-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nk-js .nk-kin-an .nk-kin-buehne {
  display: grid;
  grid-area: 1 / 1;
  place-items: center;
  align-self: stretch;
  min-height: 9rem;
}
.nk-js .nk-kin-an .nk-kin-rest { grid-area: 1 / 1; margin-top: 0; }
.nk-kin-wort {
  grid-area: 1 / 1;
  font-family: var(--font-sans);
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 300;
  line-height: 1.1;
  text-align: center;
  color: var(--nk-head);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.nk-kin-wort.nk-an { opacity: 1; }

/* K4: Text und Rueckkehr liegen uebereinander. Nach etwa 20 Sekunden blendet der Text sanft aus (3 s),
   die leise Zeile "Du liest noch immer." erscheint erst bei der naechsten Beruehrung oder dem naechsten Scrollen. */
.nk-js .nk-k4-feld { display: grid; align-items: center; }
.nk-js .nk-k4-feld > * { grid-area: 1 / 1; }
.nk-k4-text { transition: opacity 3s ease; }
.nk-js .nk-k4-text.nk-aus { opacity: 0; }
.nk-js .nk-text p.nk-noch { margin: 0; text-align: center; justify-self: center; }

/* Umschalter "Ich bin am Handy / am Bildschirm": klein am Rand, nie die erste Interaktion.
   Auf K3 (Stille) und K5 (Schluss) ist er ausgeblendet (Klasse nk-ui-aus auf <html>). Das Skript setzt ihn ein. */
.nk-umschalter {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  min-height: 44px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--nk-muted-dunkel);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 600ms ease, color 200ms ease;
}
@media (hover: hover) {
  .nk-umschalter:hover { color: var(--nk-gold); }
}
.nk-umschalter:focus-visible { outline: 2px solid var(--nk-gold); outline-offset: 2px; border-radius: 4px; }
html.nk-ui-aus .nk-umschalter {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}

@media (prefers-reduced-motion: reduce) {
  .nk-js .nk-wait,
  .nk-js .nk-wait.nk-da { transform: none; transition-duration: 300ms; }
  .nk-kin-wort { transition-duration: 1ms; }
  .nk-k4-text { transition-duration: 300ms; }
  .nk-umschalter { transition-duration: 1ms; }
}

/* ---------- Fusszeile (schlank wie auf den Kampagnenseiten) ---------- */

.footer--minimal {
  border-top: 1px solid var(--nk-linie-hell);
  padding: 32px var(--nk-gutter);
  background: var(--nk-bg-k5);
  text-align: center;
}
.footer--minimal a { color: #666a6d; transition: color 200ms ease; }
.footer--minimal a:hover { color: var(--nk-ocker); }
.footer--minimal a:focus-visible { outline: 2px solid var(--nk-ocker); outline-offset: 3px; border-radius: 2px; box-shadow: 0 0 0 3px var(--nk-bg-k5); }
.footer--minimal p { font-size: 13px; color: #666a6d; letter-spacing: 0.03em; }