/* ============================================================
   Die Nacht — Grundfläche der ganzen App (27.08.2026)

   Aris hat am 27.08.2026 nach zwei gebauten Proben Richtung B
   entschieden: „B ist ja so geil!!!!! wir nehmen B!!!"

   WAS SICH GEGENÜBER DEM 27.08. MORGENS GEÄNDERT HAT
   Die erste Nachtfassung ging BLAU nach grün — Rio bei Nacht, mit
   gemaltem Cristo auf Canvas, und sie galt nur für den Lernpfad und
   nur für brasilianisches Portugiesisch. Das war ein halber Umzug:
   jeder Tabwechsel war ein Bruch, härter als eine durchgehend helle
   App es je war.

   Jetzt: GRÜNER Nachtregenwald — dort, wo die Website wirklich steht
   (siehe css/landing.css, --c-night #0f3a1f) — und für ALLE Ansichten
   und ALLE Sprachen. Probe: probes/redo-b.html und redo-b2.html.

   WIE DIESE DATEI ARBEITET
   Nicht durch Überschreiben von Regeln, sondern durch KIPPEN VON
   TOKENS. app.css benutzt an 328 Stellen `var(--paper)`, `var(--ink)`,
   `var(--ring)` — wer diese Token umdefiniert, dreht die ganze App.
   Dazu kam am 27.08. `--flaeche` in base.css: die 43 Stellen, die
   vorher schlicht `background: #fff` sagten, meinten alle dasselbe
   („was über der Grundfläche liegt") und werden hier zu Glas.

   Nur was sich NICHT über Token ausdrücken lässt — Verläufe, Blur,
   Leuchten — steht weiter unten als eigene Regel.

   DIE DREI FLAGGENFARBEN kommen aus dem ORT, nicht aus dem Rechteck:
   Grün ist der Wald, Gold das Licht darin und damit die Handlung,
   Blau bleibt der Nachthimmel in den Szenen. Genau die Rolle, die
   Gold auf der Website schon hat.
   ============================================================ */

.shell.nacht {
  /* ---- Die Nachtpalette. Grün aus css/landing.css, Rest aus
          DESIGN.md „Die Nachtwelt der Landing". ---- */
  --n-zenit:    #071d12;
  --n-wald:     #0f3a1f;   /* landing --c-night */
  --n-horizont: #14442a;
  --n-tief:     #0a2214;
  --n-grund:    #04140c;   /* DESIGN.md night */
  --n-nebel:    #a8c9b8;
  --n-blatt:    #7fc7a1;
  --n-gold:     #f2c200;
  --n-gold-ink: #1a1200;   /* der Text AUF der Handlungsfarbe */
  --n-warm:     #ffe08a;
  --n-linie:    rgba(157, 191, 171, 0.22);
  --n-linie-st: rgba(157, 191, 171, 0.38);
  --n-glas:     rgba(4, 22, 14, 0.62);

  /* Die Tiefenstaffel der Kulisse. Nach HINTEN heller (Luftperspektive) —
     das ist der Unterschied zwischen „Formen übereinander" und Raum. */
  --n-stern:  #eaf2ff;
  --n-mond:   #eef4ff;
  --n-fern:   rgba(27, 86, 54, 0.55);
  --n-mittel: #04140c;
  --n-nah:    #020d07;
  --n-vorn:   #010805;
  --n-licht:  rgba(190, 255, 215, 0.085);

  /* ---- Der Kipp-Punkt: dieselben Token, andere Werte ---- */
  --paper:   #0c2a17;
  --paper-2: #123a22;
  --paper-3: #16472a;
  --ink:     #fbfaf6;
  --ink-2:   #a8c9b8;
  --ink-3:   #7e9c8b;
  --ink-4:   #5d7a69;

  --flaeche: rgba(10, 36, 22, 0.72);

  --ring:        rgba(157, 191, 171, 0.20);
  --ring-strong: rgba(157, 191, 171, 0.34);
  --ring-theme:  color-mix(in srgb, var(--t-from) 42%, transparent);

  /* Auf Dunkel trägt kein grauer Schatten mehr — Tiefe kommt aus
     Schwarz, Erhebung aus Licht. */
  --shadow-soft:  0 1px 2px rgba(0, 0, 0, 0.30), 0 10px 30px rgba(0, 0, 0, 0.34);
  --shadow-float: 0 2px 8px rgba(0, 0, 0, 0.40), 0 28px 70px rgba(0, 0, 0, 0.48);
  --shadow-pop:   0 4px 14px rgba(0, 0, 0, 0.45), 0 40px 90px rgba(0, 0, 0, 0.60);

  /* Die getönte Themenfläche bleibt SPRACHABHÄNGIG (themes.js setzt
     --t-from je Sprache), wird hier aber dunkel statt pastellig. */
  --t-soft: color-mix(in srgb, var(--t-from) 20%, transparent);
  --t-ink:  color-mix(in srgb, var(--t-from) 34%, #fbfaf6);

  /* Die Korrekturbox war auf Papier eine warme FLÄCHE (#fdf3dd). Auf
     Nacht wäre hellgelb ein Fremdkörper — dieselbe Absicht wird hier
     warmes LICHT. DESIGN.md: „bewusst warm, nie wie eine
     Fehlermeldung." Das gilt weiter, nur anders gebaut. */
  --amber-bg:   rgba(255, 224, 138, 0.09);
  --amber-ring: rgba(255, 224, 138, 0.30);
  --amber-ink:  #ffeec2;

  --err:      #ff8097;
  --err-soft: rgba(255, 128, 151, 0.12);

  /* Die drei „soft"-Marken waren pastellige HELLE Flächen — auf Nacht
     leuchtende Flecken. Sie werden zu getönten Schatten. */
  --brand-green-soft:  rgba(127, 199, 161, 0.16);
  --brand-yellow-soft: rgba(255, 224, 138, 0.14);
  --brand-blue-soft:   rgba(107, 165, 214, 0.16);
  /* Die Farbe des Fachs „neu" im Karteikasten. Sie kam bis zum 28.08.2026
     als festes Petrolblau #3b7fb5 aus app.css — Aris: „das blau das bei den
     karten verwendet wird, ist das falsche. nimm bitte das von der flagge."
     Also je Ort aus der Flagge, wie Himmel und Gold auch (Flag-Through-Sky).
     Der Wert hier ist der Rückfall für Orte, die noch keinen eigenen haben. */
  --n-neu:      #3f7fb0;
  --n-neu-tief: #2c6392;
  --brand-green-deep:  #7fc7a1;

  /* ---- Die Grundfläche selbst ---- */
  /* Der Verlauf lief bis zum 27.08. unten in Schwarz aus — genau dort,
     wo die Silhouetten stehen. Eine schwarze Baumreihe auf schwarzem
     Grund ist keine. Jetzt hellt er zum Horizont hin auf (das tut ein
     Nachthimmel auch, er trägt das Streulicht) und wird erst ganz unten
     wieder tief. */
  background:
    linear-gradient(180deg,
      var(--n-zenit)    0%,
      var(--n-wald)    44%,
      var(--n-horizont) 72%,
      var(--n-tief)    92%,
      var(--n-grund)  100%);
  background-attachment: fixed;
  color: var(--ink);
}

.shell.nacht .main { background: transparent; }

/* Die sechs Stellen in app.css, die Weiß in eine Fläche MISCHEN. Als
   Token nicht ausdrückbar (color-mix braucht eine Farbe, keine Rolle),
   deshalb hier von Hand. Auf Nacht hebt nicht Weiß, sondern Blattlicht. */
.shell.nacht .sidebar        { background: rgba(7, 29, 18, 0.42); }
.shell.nacht .mobile-top     { background: linear-gradient(180deg, rgba(7, 29, 18, 0.94) 40%, rgba(7, 29, 18, 0.55) 78%, transparent); }
.shell.nacht .goal-reveal,
.shell.nacht .profile-avatar { background: linear-gradient(160deg, color-mix(in srgb, var(--t-from) 42%, transparent), rgba(4, 20, 12, 0.6)); }
.shell.nacht .profile-avatar { color: var(--ink); box-shadow: inset 0 0 0 1px var(--n-linie-st); }
/* Die Wortkarte blendet unten aus — auf Papier gegen Weiß, hier gegen den Wald. */
.shell.nacht .word-popup.as-sheet .wp-actions { background: linear-gradient(to top, #0c2a17 72%, transparent); }
.shell.nacht .laute-kopf     { background: rgba(157, 191, 171, 0.05); }
.shell.nacht .laute-zeile.spielt { background: color-mix(in srgb, var(--t-from) 22%, transparent); }

/* ---------------------------------------------------- Die Szene */
/* Der Canvas-Weg (ui/worlds.js) ist seit dem 27.08.2026 abgelöst. Die
   drei Regeln für `.world-nacht` standen hier noch als Brücke, bis alle
   acht Sprachen ihren Ort haben — sie haben ihn seit v87, und die Klasse
   wurde von niemandem mehr gesetzt. Geblieben ist nur der Dimmer, den
   dashboard.js über worlds.js noch benutzt. */

/* ---------------------------------------------------- Chrome */

.shell.nacht .mobile-top {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 0;
  box-shadow: none;
}
.shell.nacht .logo-dot {
  background: var(--n-blatt);
  box-shadow: 0 0 12px var(--n-blatt), 0 0 30px rgba(127, 199, 161, 0.5);
}

.shell.nacht .tabbar {
  background: linear-gradient(180deg, transparent, rgba(4, 18, 11, 0.72) 26%, rgba(4, 18, 11, 0.96) 58%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 0;
}
.shell.nacht .tabbar a { color: var(--n-nebel); }
.shell.nacht .tabbar a.active {
  background: color-mix(in srgb, var(--n-gold) 14%, transparent);
  color: var(--n-gold);
}
.shell.nacht .tabbar a.active svg { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--n-gold) 50%, transparent)); }

.shell.nacht .sidebar { border-right: 1px solid var(--n-linie); }
.shell.nacht .nav-item { color: var(--n-nebel); }
.shell.nacht .nav-item:hover { background: rgba(157, 191, 171, 0.08); color: var(--ink); }
.shell.nacht .nav-item.active {
  background: color-mix(in srgb, var(--n-gold) 14%, transparent);
  color: var(--n-gold);
}
.shell.nacht .nav-item.active svg { color: var(--n-gold); }
.shell.nacht .sidebar .lang-switch {
  background: rgba(157, 191, 171, 0.08);
  box-shadow: inset 0 0 0 1px var(--n-linie);
}

/* Kopfzeile rechts: Menü-Knopf und Profilkreis waren weiße Scheiben auf
   der Nacht — die auffälligsten Punkte des Schirms, für die unwichtigsten
   Ziele. */
.shell.nacht .top-avatar,
.shell.nacht .top-more {
  background: rgba(157, 191, 171, 0.10);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--n-linie);
}
.shell.nacht .top-avatar.active,
.shell.nacht .top-more.active {
  background: color-mix(in srgb, var(--n-gold) 16%, transparent);
  color: var(--n-gold);
  box-shadow: inset 0 0 0 1px var(--n-gold);
}

/* ------------------------------------------- Die Handlung ist Gold */
/* Auf Papier war der Hauptknopf ein Verlauf in der Sprachfarbe. Auf
   Nacht ist Gold die Handlung — wie auf der Website. Grün bleibt der
   Ort, Gold bleibt das, was man tun kann. */
.shell.nacht .btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--n-gold) 80%, #ffffff), var(--n-gold));
  color: var(--n-gold-ink);
  font-weight: 700;
  box-shadow: 0 6px 26px color-mix(in srgb, var(--n-gold) 28%, transparent);
}
.shell.nacht .btn-primary:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--n-gold) 62%, #ffffff), color-mix(in srgb, var(--n-gold) 92%, #ffffff));
  box-shadow: 0 8px 32px color-mix(in srgb, var(--n-gold) 38%, transparent);
}
.shell.nacht .btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--n-linie-st);
}
.shell.nacht .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--n-blatt); }

/* Eingaben: der Fokusring wird Gold statt Sprachfarbe — er zeigt, wo
   gehandelt wird. */
.shell.nacht input,
.shell.nacht textarea,
.shell.nacht select { background: rgba(4, 20, 12, 0.5); color: var(--ink); }
.shell.nacht input::placeholder,
.shell.nacht textarea::placeholder { color: var(--ink-3); }
.shell.nacht input:focus,
.shell.nacht textarea:focus {
  box-shadow: 0 0 0 1px var(--n-gold), 0 0 0 4px color-mix(in srgb, var(--n-gold) 14%, transparent);
}

/* Allgemeine Pillen */
.shell.nacht .pill {
  background: rgba(157, 191, 171, 0.10);
  box-shadow: inset 0 0 0 1px var(--n-linie);
  color: var(--ink);
}
.shell.nacht .pill-flag { color: var(--ink); }

/* Die Augenbraue steht auf JEDER Seite genau einmal und trug bisher
   `--t-to`, die TIEFE Sprachfarbe — auf Papier ein sattes Dunkelgrün, auf
   Nacht praktisch unsichtbar. Sie wechselt auf das Blattlicht: dieselbe
   Rolle, dieselbe Sprachbindung über --t-from, nur von der hellen Seite. */
.shell.nacht .eyebrow { color: var(--n-blatt); }
.shell.nacht .eyebrow::before { background: var(--n-blatt); opacity: 0.7; }

/* Dieselbe Falle, zwei Stellen weiter (28.08.2026): der Pflichtkern im
   Einheiten-Blatt und der Kopf der Zwischenabfrage trugen `--t-to` und wären
   auf Nacht blasser gewesen als die WAHL daneben — die Pflicht hätte leiser
   ausgesehen als die Kür. Beide auf das Blattlicht. */
.shell.nacht .ss-fan.ss-kern { border-left-color: var(--n-blatt); }
/* Dieselbe Falle, dritte Stelle: die Erfolgsleiste am Ende eines Gesprächs
   („Auftrag erfüllt", „Grammatik sitzt") trug ihre Überschrift in `--t-to`
   auf `--t-soft` — grün auf grün, praktisch unlesbar. Sie stand seit dem
   26.08. am Ende jedes Gesprächs; seit das Grammatik-Gespräch Pflicht ist,
   steht sie am Ende JEDER Einheit. */
.shell.nacht .md-text b { color: var(--n-blatt); }
.shell.nacht .mission-done { background: color-mix(in srgb, var(--n-blatt) 12%, transparent); }
/* … und die NICHT bestandene Leiste behält ihr Bernstein: die Regel darüber
   ist spezifischer als `.mission-done.mission-offen` und hätte sie sonst
   wieder grün gefärbt — grün für „reicht nicht" wäre das falsche Signal. */
.shell.nacht .mission-done.mission-offen {
  background: color-mix(in srgb, var(--amber-ink) 14%, transparent);
}
.shell.nacht .mission-offen .md-text b { color: var(--amber-ink); }

/* `--t-to` AUF `--t-soft` — das Muster, das auf Papier trägt (tiefes Grün auf
   blassem Grün) und auf Nacht blind macht (dunkel auf dunkel). Es steckte an
   vier weiteren Stellen, alle im Kern-Loop:
     • `.btn-soft`  — der Knopf selbst, 21 Stellen: „Weiter" im Erfolgsschirm
       JEDES Pfad-Schritts (ui/stepdone.js), „Weiter reden" nach einer
       Zwischenabfrage, die Knöpfe im Lektionsabschluss.
     • `.vocab-chip` — die antippbaren Vokabeln unter jeder Tutor-Antwort.
       Das ist der Kern-Loop selbst: reden → Wort antippen → Karte.
   Dieselbe Falle wie bei der Augenbraue weiter oben, nur an Dingen, die man
   drücken soll. (28.08.2026) */
.shell.nacht .btn-soft,
.shell.nacht .vocab-chip { color: var(--n-blatt); }
.shell.nacht .gq-kopf, .shell.nacht .gq-marke { color: var(--n-blatt); }
.shell.nacht .gq-karte { box-shadow: 0 0 0 1.5px var(--n-blatt), var(--shadow-soft); }
.shell.nacht .gq-karte.gq-ok { box-shadow: 0 0 0 1.5px var(--brand-green-deep), var(--shadow-soft); }
.shell.nacht .gq-karte.gq-bad { box-shadow: 0 0 0 1.5px var(--err), var(--shadow-soft); }

/* Die Klangdiagnose markiert Wörter als getroffen / fast / daneben. Die
   drei Flächen waren pastellig hell — auf Nacht drei leuchtende Flecken
   mitten im Satz. Getönt statt hell, Farbe bleibt die Aussage. */
.shell.nacht .sw.off { background: rgba(255, 128, 151, 0.14); }

/* Die Rückmeldung nach einer FALSCHEN Antwort trug ein hartes `#faeaee` —
   als einzige der beiden Rückmeldungen, denn die richtige hängt an
   `--brand-green-soft` und kippt mit dem Thema von selbst. Auf Nacht stand
   damit heller Text auf hellrosa: die Musterlösung, also genau das, wofür
   der Kasten da ist, war nicht zu lesen. Betraf Übung und Prüfung in allen
   acht Sprachen. Gefunden am 28.08.2026 beim Bau der Zwischenabfrage, die
   denselben Kasten benutzt. */
.shell.nacht .exam-feedback.bad { background: rgba(255, 128, 151, 0.14); }
/* Dieselbe Farbe, dieselbe Stelle im Ablauf: die falsch angetippte
   Auswahlmöglichkeit trug `#faeaee` fest verdrahtet. Auf Nacht stand die
   eigene Wahl damit als heller Text auf hellrosa da — man sah, DASS man
   danebenlag, aber nicht mehr, wofür man sich entschieden hatte. */
.shell.nacht .quiz-opt.wrong { background: rgba(255, 128, 151, 0.16); color: var(--ink); }
.shell.nacht .quiz-opt.right { color: var(--ink); }
.shell.nacht .exam-feedback.bad .fb-sol,
.shell.nacht .exam-feedback.bad .fb-de,
.shell.nacht .exam-feedback.bad .fb-why { color: var(--ink-2); }

/* Antippbares Wort — die Signatur-Geste. Gespeichert = Goldpunkt. */
.shell.nacht .word:hover { background: color-mix(in srgb, var(--n-gold) 14%, transparent); }
/* OHNE LEUCHTEN (28.08.2026). Der Goldpunkt bleibt — er ist die Signatur-
   Geste. Sein 6-px-Schein aber lag im Fließtext des Entdecken-Feeds
   vierzehnmal pro Absatz über den Zeilen und las sich als Schmutz auf dem
   Glas, zumal die goldene Unterstreichung dasselbe schon sagt. */
.shell.nacht .word.saved::after { background: var(--n-gold); }

/* ------------------------------------------------- Der Lernpfad */

.shell.nacht .pdoor {
  background: rgba(157, 191, 171, 0.08);
  box-shadow: inset 0 0 0 1px var(--n-linie);
  color: var(--ink);
}
.shell.nacht .pdoor svg { color: var(--n-blatt); }
.shell.nacht .pdoor:hover {
  background: rgba(157, 191, 171, 0.14);
  box-shadow: inset 0 0 0 1px var(--n-gold);
}

/* Das Schild am aktuellen Knoten */
.shell.nacht .pk-schild {
  background: var(--n-glas);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--n-gold) 34%, transparent);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: var(--ink);
}
.shell.nacht .pk-schild span { color: var(--n-gold); }
.shell.nacht .pk-schild b { color: var(--ink); }

.shell.nacht .path-hero { background: none; margin-bottom: 4px; }
.shell.nacht .ph-greet { color: var(--ink); }
.shell.nacht .ph-meta { color: var(--n-nebel); }
.shell.nacht .ph-meta b { color: var(--ink); }
.shell.nacht .ph-schuld { color: var(--n-warm); }
.shell.nacht .ph-bar .progress { background: rgba(157, 191, 171, 0.14); }
.shell.nacht .ph-bar .progress i { background: var(--n-blatt); }
.shell.nacht .ph-bar span { color: var(--n-nebel); }

.shell.nacht .path-switch {
  background: rgba(157, 191, 171, 0.07);
  box-shadow: inset 0 0 0 1px var(--n-linie);
}
.shell.nacht .path-switch button { color: var(--n-nebel); }
.shell.nacht .path-switch button.on {
  background: rgba(157, 191, 171, 0.14);
  color: var(--ink);
  box-shadow: none;
}

/* Ein Knoten ist ein LICHT in der Nacht, kein grauer Kreis. Die Farbe
   sagt weiter das Modul (One-Anchor-Colour Rule), die FORM den Zustand
   — nur leuchtet sie jetzt, statt zu tönen. */
.shell.nacht .pk-chip {
  background: var(--n-glas);
  box-shadow: inset 0 0 0 1px var(--n-linie);
  color: var(--ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.shell.nacht .pk-chip .pc-n { color: var(--n-nebel); }

.shell.nacht .pk-scheibe { background: rgba(10, 34, 20, 0.55); color: var(--ink); }
.shell.nacht .pk-knoten.fertig .pk-scheibe {
  background: radial-gradient(circle at 42% 36%,
    color-mix(in srgb, var(--kf) 82%, #ffffff),
    color-mix(in srgb, var(--kd) 88%, #000000) 72%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--kf) 55%, transparent),
    0 0 22px color-mix(in srgb, var(--kf) 34%, transparent);
  color: #f2fff8;
}
.shell.nacht .pk-knoten.offen .pk-scheibe {
  background: rgba(10, 34, 20, 0.62);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kf) 78%, transparent);
  color: var(--ink);
}
.shell.nacht .pk-knoten.zu .pk-scheibe {
  background: rgba(157, 191, 171, 0.045);
  box-shadow: inset 0 0 0 1px rgba(168, 201, 184, 0.26);
  color: rgba(168, 201, 184, 0.45);
}
/* Der aktuelle Knoten trägt als einziger Gold — er ist die eine
   Handlung auf der Seite.
   AB 27.08.2026 GEFÜLLT STATT GERINGT (Aris: „die aktuelle Lektion
   hervorheben … nicht zu extrem allerdings"). Vorher war er ein dunkler
   Kreis mit goldenem 2px-Ring — auf 390 px ging er zwischen den fertigen
   Knoten unter, die selbst in ihrer Modulfarbe leuchten. Jetzt trägt er
   dieselbe Fläche wie der Hauptknopf im Sockel: dieselbe Handlung, dieselbe
   Farbe. Kein Pulsieren, keine Vergrößerung über 6 % — das wäre extrem.
   Der dunkle Trennring hält das Gold von der Linie darunter frei. */
/* DAS GOLD IST AN DEN RING GEWANDERT (Aris, 28.08.2026: „der kreis mit dem
   fortschritt … sollte in dem gelb sein, während das ding in der mitte wie
   die anderen auch eher grün sein sollte").
   Die Scheibe sieht jetzt aus wie jeder offene Knoten; was sie heraushebt,
   ist der goldene Fortschrittsring darum und ein leiser Schein. Das ist
   auch inhaltlich richtiger: Gold markiert nicht mehr „hier ist ein
   Knopf", sondern zeigt, wie weit diese Einheit steht. */
.shell.nacht .pk-knoten.jetzt .pk-scheibe {
  background: rgba(10, 34, 20, 0.72);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--kf) 78%, transparent),
    0 0 16px color-mix(in srgb, var(--n-gold) 10%, transparent);
  color: var(--ink);
  transform: scale(1.06);
}
.shell.nacht .pk-knoten.jetzt:active .pk-scheibe { transform: scale(.99); }
.shell.nacht .pk-ring { color: var(--n-blatt); }
/* Am aktuellen Knoten ist der Ring GOLD und trägt eine schwach getönte
   Bahn: so ist auch bei null Prozent zu sehen, wo man steht — und wie weit
   es noch ist. Die Bahn liegt als Grundfarbe unter dem Kegelverlauf, der
   im Rest durchsichtig ist. */
.shell.nacht .pk-knoten.jetzt .pk-ring {
  --kf: var(--n-gold);
  background-color: color-mix(in srgb, var(--n-gold) 24%, transparent);
}

/* Stationen stehen AUF der Linie. Die Raute trennt sie von den
   Lernknoten, ohne eine zweite Farbe zu verbrauchen. */
.shell.nacht .pk-station .pk-scheibe {
  background: rgba(12, 42, 23, 0.72);
  box-shadow: inset 0 0 0 1px var(--n-linie-st);
  color: var(--n-nebel);
  border-radius: 13px;
  transform: rotate(45deg);
}
.shell.nacht .pk-station .pk-scheibe > * { transform: rotate(-45deg); }
.shell.nacht .pk-station:hover .pk-scheibe {
  background: rgba(12, 42, 23, 0.9);
  box-shadow: inset 0 0 0 1px var(--n-gold);
  color: var(--n-gold);
}
.shell.nacht .pk-station:active .pk-scheibe { transform: rotate(45deg) scale(.93); }

.shell.nacht .pk-tor {
  background: linear-gradient(180deg, rgba(127, 199, 161, 0.16), rgba(10, 34, 20, 0.5));
  box-shadow: inset 0 0 0 1px var(--n-linie-st);
  color: var(--ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.shell.nacht .pk-tor .pt-lvl { background: rgba(127, 199, 161, 0.18); color: var(--n-blatt); }
.shell.nacht .pk-tor .pt-text b { color: var(--ink); }
.shell.nacht .pk-tor .pt-text span { color: var(--n-nebel); }
.shell.nacht .pk-tor.zu { background: rgba(10, 34, 20, 0.42); }
.shell.nacht .pk-tor.zu .pt-text b { color: var(--n-nebel); }
.shell.nacht .pk-tor.zu .pt-text span { color: rgba(168, 201, 184, 0.55); }
.shell.nacht .pk-tor.pk-jetzt { box-shadow: inset 0 0 0 1.5px var(--n-gold), 0 0 26px color-mix(in srgb, var(--n-gold) 22%, transparent); }

.shell.nacht .pk-schiene i { background: rgba(157, 191, 171, 0.10); }

.shell.nacht .path-liste .les-row,
.shell.nacht .path-liste .pu-row {
  background: rgba(157, 191, 171, 0.05);
  box-shadow: inset 0 0 0 1px var(--n-linie);
  color: var(--ink);
}

/* ------------------------------------------------------- Der Sockel */
/* Die eine Handlung steht unten, wo der Daumen ist — nicht oben, wo sie
   die halbe Bildschirmhöhe kostet. */
.shell.nacht .path-sockel {
  position: sticky;
  /* AUF der Tabbar, nicht 40 px darüber (Aris, 28.08.2026: „der nächste
     lektion button hängt immer noch zu hoch"). `bottom: 0` klebt an der
     INNENkante des Polsters von .main, nicht am Rand des Scrollports.
     Der Wert steht in --main-polster und ist außerhalb des Telefons 0.

     Diese Regel wiederholt die aus app.css vollständig und gewinnt durch
     `.shell.nacht`; wer den Sockel ändert, muss BEIDE Stellen anfassen. */
  bottom: calc(-1 * var(--main-polster));
  z-index: 5;
  margin: 18px calc(-1 * clamp(18px, 4vw, 34px)) 0;
  padding: 14px clamp(18px, 4vw, 34px) 16px;
  background: linear-gradient(180deg, transparent, rgba(4, 18, 11, 0.82) 34%, rgba(4, 18, 11, 0.96) 72%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.shell.nacht .ph-go {
  width: 100%;
  justify-content: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--n-gold) 80%, #ffffff), var(--n-gold));
  color: var(--n-gold-ink);
  font-weight: 700;
  box-shadow: 0 6px 26px color-mix(in srgb, var(--n-gold) 30%, transparent);
}
.shell.nacht .ph-go:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--n-gold) 62%, #ffffff), color-mix(in srgb, var(--n-gold) 92%, #ffffff));
  box-shadow: 0 8px 32px color-mix(in srgb, var(--n-gold) 40%, transparent);
}
@media (min-width: 901px) {
  .shell.nacht .ph-go { width: auto; min-width: 300px; }
  .shell.nacht .path-sockel { text-align: center; }
}

/* ------------------------------------------------------- Das Blatt */
/* Ein weißes Modal über der Nacht ist ein Loch. Modale hängen NICHT unter
   `.shell` — `ui/dom.js:55` hängt sie direkt an den `body`. Sie können
   sich die Token der Hülle also nicht erben, und ein Nachkommen-Selektor
   greift nicht. Deshalb stehen sie hier ohne Hüllen-Bedingung: seit dem
   27.08. gibt es keine helle Fassung mehr, die zu schützen wäre. */
.modal-backdrop { background: rgba(2, 10, 6, 0.62); }
.modal-backdrop .modal {
  background: linear-gradient(180deg, #12341d, #0a2214);
  color: #fbfaf6;
  box-shadow: inset 0 0 0 1px rgba(157, 191, 171, 0.22), 0 40px 90px rgba(0, 0, 0, 0.6);
  --paper:   #0c2a17;
  --paper-2: #123a22;
  --paper-3: #16472a;
  --ink:     #fbfaf6;
  --ink-2:   #a8c9b8;
  --ink-3:   #7e9c8b;
  --ink-4:   #5d7a69;
  --flaeche: rgba(10, 36, 22, 0.72);
  --ring:        rgba(157, 191, 171, 0.20);
  --ring-strong: rgba(157, 191, 171, 0.34);
}


/* ============================================================
   ACHT NÄCHTE STATT EINER (27.08.2026, abends)

   Aris nach dem ersten Blick auf dem Handy: „nicht jede sprache darf
   grün sein. jede sprache braucht ihren eigenen nachthimmel."
   Und ausdrücklich für Griechenland: „dunkelblauer nachthimmel mit
   sternen über dem olivenhain — davon sehe ich nichts."

   Bis dahin stand der Verlauf oben als EINE Regel für alle acht
   Sprachen; unterschieden haben sich nur die Silhouette und die
   Akzentfarbe. Jetzt kippt `data-ort` an der Hülle dieselben Token noch
   einmal — dasselbe Verfahren, mit dem die ganze App von Papier auf
   Nacht umgezogen ist, eine Ebene tiefer.

   DIE FLAGGE KOMMT ÜBER HIMMEL UND LICHT (Aris, 27.08.2026: „landes-
   flaggen sehr stark inkorporieren"). Kein Rechteck, kein Streifenband
   in der Fläche: Brasilien bekommt das Blau der Flagge als Zenit und ihr
   Gelb als Handlungsfarbe, Griechenland das Blau als Himmel und das Weiß
   als Licht, Frankreich das Königsblau, Italien den roten Streif am
   Horizont. Wo eine Sprache keinen Staat hat (Aromunisch), tritt an die
   Stelle der Flagge das, was nur dort zu sehen ist — die Milchstraße.
   Siehe DESIGN.md, „The Flag-Through-Sky Rule".

   Sechs Regler je Ort, nicht zwei:
     Himmel    — fünf Farbstopps von Zenit bis Grund
     Licht     — Schacht / Mond / Sichel / Glut / Dunst / Fluss / Milch
     Sterne    — Anzahl und Ton (js/ui/kulisse.js)
     Tiefe     — fern/mittel/nah/vorn, nach hinten HELLER
     Nebenton  — Nebel und Blattlicht (Text, Augenbraue, Logo-Punkt)
     Handlung  — Gold, nur wo die Flagge eine warme helle Farbe hergibt
   ============================================================ */

/* --- Tijuca · Portugiesisch · Brasilien -------------------------------
   #FFDF00 Gelb als Handlung — der exakte Flaggenwert, den Aris genannt hat;
   das alte #f2c200 war ein Ocker daneben.
   DER ZENIT BLEIBT GRÜN (Aris, 27.08.2026: „bei brasilien bitte das
   dunkelblau oben raus, lass es lieber grün wie davor"). Das Flaggenblau
   #002776 stand einen Nachmittag lang oben und war der einzige Ort, an
   dem die neue Regel gegen den Ort gearbeitet hat: der Tijuca ist ein
   WALD, man steht darin und sieht keinen Himmel. Wo die Flagge und der
   Ort sich widersprechen, gewinnt der Ort — bei Griechenland ist der
   Himmel über dem Hain sichtbar, hier nicht. */
.shell.nacht[data-ort="tijuca"] {
  --n-zenit:    #071d12;
  --n-wald:     #0f3a1f;
  --n-horizont: #14442a;
  --n-tief:     #0a2214;
  --n-grund:    #04140c;
  --n-nebel:    #a8c9b8;
  --n-blatt:    #7fc7a1;
  --n-gold:     #ffdf00;
  --n-gold-ink: #1a1200;
  --n-warm:     #ffe9a3;
  --n-fern:     rgba(30, 82, 54, 0.44);
  --n-mittel:   #04140c;
  --n-nah:      #020d07;
  --n-vorn:     #010805;
  --n-licht:    rgba(190, 255, 215, 0.085);
  /* #002776 — der exakte Wert aus der brasilianischen Flagge, und zwar PUR
     (Aris, 28.08.2026: „mach bei brasilien das flaggenblau bitte, das andere
     feels out of place"). Die vorher aufgehellte Stufe #1d54ad war ein
     Königsblau, das mit keiner Flagge etwas zu tun hatte. Der Verlauf bleibt,
     läuft aber INNERHALB des Flaggenblaus nach unten dunkler. */
  --n-neu:      #002776;
  --n-neu-tief: #001b53;
}

/* --- Dehesa · Spanisch -----------------------------------------------
   Kein Wald, sondern Weide: die Nacht über der Dehesa ist warm, weil der
   Boden die Hitze des Tages hält. Die Lichtquelle liegt deshalb UNTEN am
   Horizont, nicht oben. Rot und Gelb der Flagge stecken in diesem Band. */
.shell.nacht[data-ort="dehesa"] {
  /* Der Verlauf lief bis zum 27.08.2026 abends bei 72 % auf #6b3016 und
     danach wieder ins Dunkle — ein heller Bauch mitten im Bild, also
     derselbe schwebende Balken wie bei Italien. Jetzt monoton: von oben
     nach unten durchgehend wärmer UND durchgehend dunkler. Die Wärme
     selbst kommt aus der Lage `k-glutband`, die unten klebt und eine
     Form hat. */
  --n-zenit:    #150c1a;
  --n-wald:     #241119;
  --n-horizont: #331710;
  --n-tief:     #1c0d07;
  --n-grund:    #100805;
  --n-nebel:    #d9c3ab;
  --n-blatt:    #e8b06a;
  --n-gold:     #f1bf00;
  --n-gold-ink: #2a1800;
  --n-warm:     #ffd08a;
  --n-stern:    #ffe6c2;
  --n-fern:     rgba(96, 56, 38, 0.44);
  --n-mittel:   #150a06;
  --n-nah:      #0a0503;
  --n-vorn:     #060302;
  --n-licht:    rgba(255, 186, 112, 0.16);
  --n-linie:    rgba(217, 195, 171, 0.20);
  --n-linie-st: rgba(217, 195, 171, 0.34);
  --n-glas:     rgba(22, 10, 7, 0.62);
}

/* --- Cipressi · Italienisch -------------------------------------------
   Toskana: hoher klarer Mond, kühleres Grün als Rio — und ein schmaler
   roter Streif am Horizont. Das ist die Flagge, ohne Flagge: Grün unten,
   Weiß als Mondlicht, Rot als Abendrest. */
.shell.nacht[data-ort="cipressi"] {
  --n-zenit:    #05121f;
  --n-wald:     #0b2a24;
  --n-horizont: #17402c;
  --n-tief:     #0a1d14;
  --n-grund:    #050f0a;
  --n-nebel:    #c3d2c4;
  --n-blatt:    #9fd6a8;
  --n-gold:     #f2c200;
  --n-gold-ink: #1a1200;
  --n-warm:     #ffe0a0;
  --n-stern:    #e8f2ea;
  --n-mond:     #f4f5f0;
  --n-fern:     rgba(46, 88, 62, 0.42);
  --n-mittel:   #04120a;
  --n-nah:      #020a06;
  --n-vorn:     #010604;
  --n-licht:    rgba(244, 245, 240, 0.16);
}
/* HIER STAND EIN ROTER ZWISCHENSTOPP (#3a1e1e bei 60 %) als „Rest des
   Abends" — die Idee war, das Rot der Trikolore über den Himmel zu holen.
   Aris am 27.08.2026: „bei spanien und italien schwebt in der mitte wenn
   man scrollt so ein hue(balken), der muss bitte weg."
   Er hat recht, und der Fehler ist prinzipiell: 60 % Höhe ist nicht der
   Horizont, sondern die Bildmitte. Ein Farbstopp, der heller oder wärmer
   ist als das über UND unter ihm, wird dort immer ein Balken — er hat
   nichts, wogegen er liegen könnte. Farbe darf in diesem Verlauf nur
   MONOTON laufen; alles andere gehört in eine Lage mit einer Form
   (k-glutband, k-fluss, k-dunst), nicht in den Himmel selbst.
   Italien trägt sein Rot deshalb gar nicht mehr — Grün am Grund und
   Weiß als Mond müssen reichen. */

/* --- Lavande · Französisch --------------------------------------------
   Das Königsblau der Trikolore als Himmel, ihr Weiß als Mond, und der
   Lavendel färbt das Blattlicht violett. */
.shell.nacht[data-ort="lavande"] {
  --n-zenit:    #00133a;
  --n-wald:     #0d1f4a;
  --n-horizont: #2b2a5e;
  --n-tief:     #12102c;
  --n-grund:    #070614;
  --n-nebel:    #c0c8e2;
  --n-blatt:    #b9a8e6;
  --n-gold:     #f2c200;
  --n-gold-ink: #1a1200;
  --n-warm:     #ffe6b0;
  --n-stern:    #eaf0ff;
  --n-mond:     #ffffff;
  --n-fern:     rgba(74, 78, 122, 0.44);
  --n-mittel:   #0a0a1c;
  --n-nah:      #050510;
  --n-vorn:     #030308;
  --n-licht:    rgba(235, 240, 255, 0.15);
  --n-linie:    rgba(192, 200, 226, 0.20);
  --n-linie-st: rgba(192, 200, 226, 0.34);
  --n-glas:     rgba(8, 8, 26, 0.62);
}

/* --- Downs · Englisch -------------------------------------------------
   England hat nachts keinen klaren Himmel, es hat Bänke. Die Lichtquelle
   ist deshalb DUNST, es gibt kaum Sterne, und alles ist eine halbe
   Stufe blaugrauer als anderswo. */
.shell.nacht[data-ort="downs"] {
  --n-zenit:    #071427;
  --n-wald:     #12293f;
  --n-horizont: #23404c;
  --n-tief:     #0c1a24;
  --n-grund:    #050b12;
  --n-nebel:    #c2cdd6;
  --n-blatt:    #9fc0cf;
  --n-gold:     #f2c200;
  --n-gold-ink: #1a1200;
  --n-warm:     #ffe2ad;
  --n-stern:    #d7e4ee;
  --n-fern:     rgba(62, 92, 102, 0.46);
  --n-mittel:   #08131b;
  --n-nah:      #040a0f;
  --n-vorn:     #020508;
  --n-licht:    rgba(200, 225, 240, 0.13);
  --n-linie:    rgba(194, 205, 214, 0.20);
  --n-linie-st: rgba(194, 205, 214, 0.34);
  --n-glas:     rgba(6, 14, 22, 0.62);
}

/* --- Elaionas · Griechisch --------------------------------------------
   Der Auftrag im Wortlaut: dunkelblauer Nachthimmel mit Sternen über dem
   Olivenhain. Kein Grün, nirgends. Blau und Weiß der Flagge sind Himmel
   und Licht — und weil Griechenland kein Gelb hat, ist die HANDLUNG hier
   weiß statt gold. Das ist keine Ausnahme von der One-Action-Colour
   Rule, sondern ihre konsequente Fassung: eine Farbe für das, was man
   tun kann, und sie kommt aus dem Land. */
.shell.nacht[data-ort="elaionas"] {
  --n-zenit:    #030d22;
  --n-wald:     #0a2450;
  --n-horizont: #124084;
  --n-tief:     #071a34;
  --n-grund:    #030b16;
  --n-nebel:    #bcd0e8;
  --n-blatt:    #ffffff;
  --n-gold:     #f2f7ff;
  --n-gold-ink: #06203f;
  --n-warm:     #dbe8f7;
  --n-stern:    #ffffff;
  --n-mond:     #ffffff;
  --n-fern:     rgba(46, 78, 122, 0.46);
  --n-mittel:   #050f1c;
  --n-nah:      #02070e;
  --n-vorn:     #010409;
  --n-licht:    rgba(255, 255, 255, 0.20);
  --n-linie:    rgba(188, 208, 232, 0.20);
  --n-linie-st: rgba(188, 208, 232, 0.34);
  --n-glas:     rgba(3, 13, 34, 0.62);
}

/* --- Dunav · Serbisch -------------------------------------------------
   Die Modulfarben heißen Šuma, Dunav, Planina — Wald, Fluss, Berg. Der
   Fluss ist hier auch die Lichtquelle: ein waagerechtes helles Band am
   Horizont, in dem sich der Himmel spiegelt. Das Rot der Flagge liegt
   als schmaler Streif darüber. */
.shell.nacht[data-ort="dunav"] {
  --n-zenit:    #04101f;
  --n-wald:     #0a2c52;
  --n-horizont: #17405e;
  --n-tief:     #08131f;
  --n-grund:    #030a12;
  --n-nebel:    #b6c6d6;
  --n-blatt:    #8fb6d4;
  --n-gold:     #f2c200;
  --n-gold-ink: #1a1200;
  --n-warm:     #ffdca0;
  --n-stern:    #d8e4f2;
  --n-fern:     rgba(52, 86, 118, 0.46);
  --n-mittel:   #061019;
  --n-nah:      #03080e;
  --n-vorn:     #010407;
  --n-licht:    rgba(190, 220, 245, 0.22);
  --n-linie:    rgba(182, 198, 214, 0.20);
  --n-linie-st: rgba(182, 198, 214, 0.34);
  --n-glas:     rgba(4, 16, 31, 0.62);
  /* Auch hier lag ein roter Zwischenstopp (#3a1a20 bei 64 %). Derselbe
     Balken wie bei Italien, nur hat Aris ihn dort zuerst gesehen —
     ungefragt mit entfernt, weil es exakt dieselbe Konstruktion ist.
     Serbiens Rot bleibt damit unsichtbar; das Land trägt hier ohnehin
     die Donau als Lichtquelle, und die ist der stärkere Unterschied. */
}

/* --- Pindos · Aromunisch ---------------------------------------------
   Es gibt keine Flagge, an der man sich bedienen könnte, und DESIGN.md
   verbietet ausdrücklich, eine zu erfinden. An ihre Stelle tritt das,
   was man nur im Hochgebirge sieht: die Milchstraße über kaltem Fels. */
.shell.nacht[data-ort="pindos"] {
  --n-zenit:    #04070f;
  --n-wald:     #0b1220;
  --n-horizont: #16202f;
  --n-tief:     #080c14;
  --n-grund:    #03050a;
  --n-nebel:    #c4c8d2;
  --n-blatt:    #a8b4c4;
  --n-gold:     #f2c200;
  --n-gold-ink: #1a1200;
  --n-warm:     #ffe0ae;
  --n-stern:    #eef2ff;
  --n-fern:     rgba(48, 58, 76, 0.46);
  --n-mittel:   #070a12;
  --n-nah:      #030509;
  --n-vorn:     #010305;
  --n-licht:    rgba(214, 224, 255, 0.16);
  --n-linie:    rgba(196, 200, 210, 0.20);
  --n-linie-st: rgba(196, 200, 210, 0.34);
  --n-glas:     rgba(4, 7, 15, 0.62);
}

/* ============================================================
   Die Kulisse (js/ui/kulisse.js) — SVG statt Canvas, 27.08.2026

   Der Wald ist eine RAHMUNG, kein Ausblick: etwas von oben, Unterholz
   von unten, eine Lichtquelle dazwischen. Genau die Probe, die Aris
   gewählt hat (probes/redo-b.html). Ein Panorama zwingt den Blick in die
   Ferne — eine Rahmung legt den Inhalt in einen Raum, und der Inhalt ist
   der Lernpfad.

   Jede Lage holt ihre Farbe über `color` aus den Token oben und malt mit
   `currentColor`. Vorher standen die Farbwerte in kulisse.js — genau das,
   was DESIGN.md unter „Don't Farben inline im JS setzen" verbietet, und
   der Grund, warum acht Orte denselben Wald hatten.
   ============================================================ */
.shell.nacht .kulisse {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity .5s var(--ease-out);
}
/* Auf dem Lernpfad lief die Kulisse mit voller Deckkraft. Solange sie aus
   zwei Kurven bestand, fiel das nicht auf; seit der Hang dazugekommen ist,
   schon (Aris, 28.08.2026: „die deckkraft der berge im hintergrund ist auf
   der hauptseite etwas zu stark"). */
.shell.nacht .kulisse { opacity: 0.78; }
.shell.nacht .kulisse.k-leise { opacity: 0.45; }

/* Auf allen Routen AUSSER dem Lernpfad läuft dieselbe Kulisse, aber
   zurückgenommen: dort steht Text bis an beide Ränder, und die Kulisse
   ist Raum, nicht Bild. Bis zum 27.08.2026 lief sie dort GAR NICHT —
   zehn von elf Seiten sahen in jeder Sprache gleich aus. */
.shell.nacht .kulisse.k-fern { opacity: 0.5; }

.shell.nacht .k-lage { position: absolute; left: 0; right: 0; }
.shell.nacht .k-lage svg { width: 100%; display: block; }

/* ---- Der Himmel ---- */
/* `meet` statt Dehnen: bei `preserveAspectRatio: none` (dem Standard
   dieser Datei) zieht ein 260 hoher Koordinatenraum in einem 520 px hohen
   Träger jeden Stern zum Oval. */
.shell.nacht .k-sterne { top: 0; height: 66%; color: var(--n-stern); }
.shell.nacht .k-sterne svg { height: 100%; }

/* Mond und Sichel. Der Mond ist eine Scheibe mit Hof; die Sichel
   dieselbe Scheibe, aus der ein zweiter Kreis ausgestanzt ist — eine
   gemalte Sichel wird bei 46 px zur Banane. */
.shell.nacht .k-mond { inset: 0; }
.shell.nacht .k-mond span {
  position: absolute;
  border-radius: 50%;
  background: var(--n-mond);
  box-shadow:
    0 0 22px 3px color-mix(in srgb, var(--n-mond) 18%, transparent),
    0 0 64px 16px color-mix(in srgb, var(--n-mond) 7%, transparent);
}
.shell.nacht .k-sichel span {
  box-shadow: 0 0 26px 4px color-mix(in srgb, var(--n-mond) 26%, transparent);
  -webkit-mask-image: radial-gradient(circle at 68% 34%, transparent 0 54%, #000 55%);
  mask-image: radial-gradient(circle at 68% 34%, transparent 0 54%, #000 55%);
}

/* Lichtschächte: sie kommen durch das Blätterdach und geben dem Wald
   seine Tiefe. Weich gezeichnet, sonst sind es Balken. */
.shell.nacht .k-licht { inset: 0; }
.shell.nacht .k-schacht {
  position: absolute;
  top: -12%;
  height: 128%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, var(--n-licht), transparent 68%);
  filter: blur(9px);
}

/* Die Resthitze über der Dehesa: die Lichtquelle liegt UNTEN. */
.shell.nacht .k-glutband {
  inset: 0;
  background: radial-gradient(140% 38% at 50% 96%, var(--n-licht), transparent 74%);
}

/* Englischer Dunst: zwei weiche waagerechte Bänke, keine Quelle. */
.shell.nacht .k-dunst {
  inset: 0;
  background:
    linear-gradient(180deg, transparent 38%, var(--n-licht) 52%, transparent 66%),
    linear-gradient(180deg, transparent 62%, var(--n-licht) 72%, transparent 84%);
  filter: blur(12px);
}

/* Die Donau: ein waagerechtes Band am Horizont, in dem der Himmel steht. */
.shell.nacht .k-fluss {
  bottom: 24%;
  height: 34px;
  background: linear-gradient(180deg, transparent, var(--n-licht) 46%, transparent);
  filter: blur(6px);
}

/* Die Milchstraße über dem Pindos: schräg, breit, ohne Rand. */
.shell.nacht .k-milch {
  top: -20%; left: -20%; right: -20%; height: 90%;
  background: linear-gradient(101deg, transparent 40%, var(--n-licht) 50%, transparent 60%);
  filter: blur(16px);
}

/* ---- Die Tiefenstaffel ---- */
/* Die ferne Kuppe: HELLER als das Nahe, weil nachts der Dunst das
   Streulicht trägt. */
/* Die ferne Kuppe endete bis zum 27.08.2026 abends UNTEN HART: die Lage war
   10 % hoch, die Form füllte sie bis zur Unterkante, und darunter stand der
   viel dunklere Grund. Damit war der Kamm selbst ein Balken quer über dem
   Schirm — dieselbe Sorte, die Aris am Himmel gemeldet hat, nur eine Ebene
   tiefer. Jetzt läuft er nach unten aus. */
.shell.nacht .k-ferne {
  bottom: 20%; height: 18%; color: var(--n-fern);
  -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 34%, transparent 96%);
}
.shell.nacht .k-ferne svg { height: 100%; }

/* HIER STANDEN DIE REGELN FÜR DAS HÄNGENDE (k-haenge) UND DIE STAFFELN
   (k-staffel). Beide Elemente gibt es seit dem 27.08.2026 abends nicht
   mehr — Aris über Lianen, Zweig, Blätterdach und Staffeln zusammen:
   „das sind alles so random sachen die da irgendwo rumhängen, das sieht
   leider nicht gut aus." Siehe den Kopf von js/ui/kulisse.js. */

/* ---- Der besiedelte Hang (28.08.2026) ----
   Die mittlere Tiefe, die zwischen fernem Kamm und Grundlinie fehlte.
   Die MASSE steht in --n-mittel, also zwischen fern und nah — dadurch
   liegt sie räumlich richtig, ohne dass man ihre Kante als Linie liest.
   Das LICHT der Fenster kommt aus --n-warm, derselben Quelle wie die
   Glühwürmchen: eine Siedlung bei Nacht hat dieselbe Farbe wie alles
   andere Warme im Bild, nur eckig und in Reihen.

   Kein Leuchten um die Fenster: bei 96 Rechtecken von 1,4 px wird jeder
   box-shadow zu einem Nebelfleck, und übrig bleibt ein heller Klecks am
   Hang statt einer Stadt. */
.shell.nacht .k-siedlung {
  /* NICHT bottom: 0. Sockel und Tabbar nehmen unten zusammen rund 130 px;
     dort gesetzt stand der ganze Hang dahinter — gezeichnet, aber
     unsichtbar. Dieselbe Falle, die im Kommentar an .k-boden steht.
     Angehoben liegt sein Grat in der unteren Bildmitte, wo er hinter dem
     Weg des Lernpfads noch Raum aufmacht. */
  bottom: 124px; height: 520px; color: var(--n-mittel);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 99%);
}
.shell.nacht .k-siedlung svg { height: 100%; }
.shell.nacht .k-siedlung .k-fenster { fill: var(--n-warm); }

/* Höher als es aussieht: der Sockel mit dem Hauptknopf und die Tabbar
   nehmen unten zusammen rund 130 px. Bei 300 px standen die Zypressen
   vollständig DAHINTER — gezeichnet, aber unsichtbar. */
.shell.nacht .k-boden { bottom: 0; height: 500px; color: var(--n-nah); }
.shell.nacht .k-boden svg { height: 100%; }

/* ---- Glühwürmchen ---- */
/* STILL. Bewegte Punkte im Hintergrund sind genau das, was an der
   gemalten Fassung gestört hat. */
.shell.nacht .k-glut { inset: 0; }
.shell.nacht .k-glut span {
  position: absolute;
  border-radius: 50%;
  background: var(--n-warm);
  box-shadow: 0 0 var(--k-schein, 6px) var(--k-kern, 2px)
    color-mix(in srgb, var(--n-warm) 34%, transparent);
}

/* Der Schleier verdichtet nach UNTEN, wo gelesen wird, und lässt oben
   Luft. Ohne ihn steht Text auf Blattkanten. Er nimmt seine Farbe aus
   dem Grundton des Ortes — auf der spanischen Nacht wäre ein grüner
   Schleier ein Fleck. */
.shell.nacht .kulisse::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--n-grund) 20%, transparent) 0%,
    color-mix(in srgb, var(--n-grund) 5%, transparent) 26%,
    color-mix(in srgb, var(--n-grund) 28%, transparent) 66%,
    color-mix(in srgb, var(--n-grund) 58%, transparent) 100%);
}