/* Stil „Nachtlicht" (angelehnt an die edu-campus-Anzeige „Zukunft sichern?"):
   schwarzer Grund mit feinem Lichtschimmer, leuchtende weiße Rahmen, helles Logo,
   dunkelblaue Knöpfe mit Leuchtkante. Aktiv, wenn <html class="nacht"> gesetzt ist. */

html.nacht {
  --nacht: #04060b;
  --leucht: rgba(170, 200, 255, 0.85);
  --leucht-weit: rgba(0,74,173, 0.35);
  --knopf-nacht: #1f2d57;
}

/* Grund: fast schwarz, blauer Schimmer von oben, feine Lichtpunkte */
html.nacht .held--dunkel,
html.nacht .abschnitt--dunkel,
html.nacht .aufruf {
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(60, 100, 230, 0.28), transparent 70%),
    radial-gradient(600px 300px at 85% 110%, rgba(40, 80, 200, 0.18), transparent 70%),
    var(--nacht);
  color: #c9d2e3;
}
html.nacht .held--dunkel::before,
html.nacht .abschnitt--dunkel::before,
html.nacht .aufruf::before {
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 14%, rgba(180,205,255,.6), transparent 60%),
    radial-gradient(1px 1px at 63% 41%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 78% 18%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 57%, rgba(180,205,255,.45), transparent 60%),
    radial-gradient(1px 1px at 36% 88%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 94% 86%, rgba(255,255,255,.35), transparent 60%);
  background-size: 480px 320px;
  opacity: .9;
}
html.nacht .aufruf { position: relative; overflow: hidden; }
html.nacht .aufruf::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
html.nacht .aufruf > * { position: relative; }

/* Überschriften mit leichtem Glühen */
html.nacht .held--dunkel h1,
html.nacht .abschnitt--dunkel h2,
html.nacht .aufruf h2 { text-shadow: 0 0 28px rgba(140, 180, 255, 0.35); }
html.nacht .held--dunkel .betont,
html.nacht .abschnitt--dunkel .betont { color: #004aad; }

/* Leuchtende Rahmen um die „Bildschirme" im Dunkeln */
html.nacht .sim,
html.nacht .bildschirm,
html.nacht .held--dunkel .fakten,
html.nacht .abschnitt--dunkel .karte {
  border: 2px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 10px var(--leucht), 0 0 42px var(--leucht-weit), inset 0 0 18px rgba(120, 160, 255, 0.18);
  background-color: rgba(6, 10, 20, 0.72);
}
html.nacht .held--dunkel .fakten > div { background: transparent; border-color: rgba(255,255,255,.14); }
html.nacht .held--dunkel .fakten { border-right: 0; border-bottom: 0; }

/* Fotos im Dunkeln: Leuchtkante statt blauem Block-Schatten */
html.nacht .held--dunkel .collage .foto-gross,
html.nacht .abschnitt--dunkel .foto img {
  box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 12px var(--leucht), 0 0 46px var(--leucht-weit);
}
html.nacht .held--dunkel .collage .foto-klein { border-color: #fff; box-shadow: 0 0 14px var(--leucht), 0 0 40px var(--leucht-weit); }
html.nacht .held--dunkel .schild { background: rgba(6,10,20,.92); color: #fff; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 0 12px var(--leucht), 0 0 36px var(--leucht-weit); }
html.nacht .held--dunkel .schild span { color: #b8c4da; }
html.nacht .held--dunkel .schild i { background: var(--knopf-nacht); }

/* Knöpfe im Dunkeln: dunkelblau mit heller Leuchtkante, wie „hier klicken →" */
html.nacht :is(.held--dunkel, .abschnitt--dunkel, .aufruf) .knopf--weiss,
html.nacht :is(.held--dunkel, .abschnitt--dunkel, .aufruf) .knopf:not(.knopf--geist) {
  background: var(--knopf-nacht); color: #fff; border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 0 10px var(--leucht), 0 0 30px var(--leucht-weit);
}
html.nacht :is(.held--dunkel, .abschnitt--dunkel, .aufruf) .knopf:not(.knopf--geist):hover {
  background: #2a3c74; color: #fff; transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(200, 220, 255, .95), 0 0 46px rgba(90, 140, 255, .5);
}
html.nacht :is(.held--dunkel, .abschnitt--dunkel, .aufruf) .knopf--geist { box-shadow: none; border-color: rgba(255,255,255,.4); }

/* Abschluss-Band als leuchtender Kasten in der Mitte (wie die Anzeige) */
html.nacht .aufruf .innen {
  grid-template-columns: 1fr !important; justify-items: center; text-align: center;
  max-width: 760px; margin: clamp(48px, 7vw, 88px) auto; padding: clamp(32px, 5vw, 52px) clamp(20px, 4vw, 48px);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 12px var(--leucht), 0 0 60px var(--leucht-weit), inset 0 0 26px rgba(120, 160, 255, 0.22);
  background: rgba(6, 10, 20, 0.55);
}
html.nacht .aufruf h2 { text-transform: uppercase; letter-spacing: 0.01em; }
html.nacht .aufruf p { margin-inline: auto; color: #dfe6f3; font-size: 1.1rem; }
html.nacht .aufruf .marke { color: #004aad; }

/* Kopf- und Fußzeile dunkel mit hellem, leicht leuchtendem Logo */
html.nacht .kopfzeile { background: rgba(4, 6, 11, 0.94); border-bottom-color: rgba(255,255,255,.1); }
html.nacht .kopfzeile .logo img { content: url("../img/logo-hell.png"); filter: drop-shadow(0 0 6px rgba(170, 200, 255, 0.55)); }
html.nacht .navi a, html.nacht .navi button, html.nacht .kopf-aktion .anmelden { color: #e6ecf7; }
html.nacht .navi a:hover, html.nacht .navi button:hover, html.nacht .navi [aria-current="page"] { color: #004aad; }
html.nacht .navi [aria-current="page"] { box-shadow: inset 0 -3px 0 #004aad; }
html.nacht .kopf-aktion .knopf { background: var(--knopf-nacht); border-color: rgba(255,255,255,.9); box-shadow: 0 0 10px var(--leucht), 0 0 26px var(--leucht-weit); }
html.nacht .menue-knopf { background: var(--knopf-nacht); box-shadow: 0 0 10px var(--leucht); }
html.nacht .krumen { background: #04060b; border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
html.nacht .fusszeile { background: #04060b; }
html.nacht .fusszeile .logo-hell { background: transparent; padding: 0; }
html.nacht .fusszeile .logo-hell img { content: url("../img/logo-hell.png"); filter: drop-shadow(0 0 6px rgba(170, 200, 255, 0.5)); }
html.nacht .schublade { background: #04060b; }
html.nacht .schublade-kopf img { content: url("../img/logo-hell.png"); background: transparent; }

/* Knopf hell/dunkel in der Kopfzeile */
.stil-knopf { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; background: transparent; color: var(--tinte); border: 2px solid var(--tinte); cursor: pointer; box-shadow: 2px 2px 0 var(--schatten-farbe); transition: transform 120ms, box-shadow 120ms; }
.stil-knopf:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--schatten-farbe); }
.stil-knopf svg { width: 20px; height: 20px; }
.stil-knopf .ic-sonne { display: none; }
html.nacht .stil-knopf { color: #fff; border-color: rgba(255,255,255,.9); box-shadow: 0 0 10px var(--leucht); }
html.nacht .stil-knopf .ic-sonne { display: block; }
html.nacht .stil-knopf .ic-mond { display: none; }
.kopfzeile .innen > .stil-knopf { margin-left: auto; }
.kopfzeile .innen > .stil-knopf + .menue-knopf { margin-left: 0; }
@media (min-width: 1100px) { .kopfzeile .innen > .stil-knopf { margin-left: 4px; order: 3; } .kopf-aktion { order: 2; } }

/* Aufklappmenüs im Kopf */
html.nacht .navi .unter { background: #071a36; border-color: rgba(255,255,255,.14); box-shadow: 2px 2px 0 var(--schatten-farbe); }
html.nacht .navi .unter a { color: #e8eef8; }
html.nacht .navi .unter a:hover, html.nacht .navi .unter a:focus-visible { background: rgba(255,255,255,.08); color: #fff; }
html.nacht .navi .unter .unter-kopf { color: #004aad; }
html.nacht .krumen a { color: #004aad; }