/* Dunkelmodus für die 2D-Seite (#normal auf der Startseite) und alle Unterseiten.
   Startet wie das Gerät eingestellt ist, der Schalter im Menü wechselt. Der weiße 3D-Raum bleibt weiß. */
html[data-farbe="dunkel"] .normal,
html[data-farbe="dunkel"] body.unterseite{
  --paper:#15161a; --void:#0e0f12; --ink:#eceef2; --muted:#a3a8b3; --line:#30333c; --signal:#8c98ff; --text2:#c3c7d0;
  color-scheme:dark; background:var(--paper); color:var(--ink);
}
html[data-farbe="dunkel"] body.unterseite .kopf{background:var(--paper)}
/* schwarzes Logo hell machen */
html[data-farbe="dunkel"] .nlogo img,html[data-farbe="dunkel"] .logo img{filter:invert(1)}
/* Bilder etwas zurücknehmen, damit sie nicht blenden */
html[data-farbe="dunkel"] .normal main img:not([src$=".svg"]),html[data-farbe="dunkel"] body.unterseite main img:not([src$=".svg"]){filter:brightness(.92)}

/* Schalter */
.farbschalter{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;line-height:0}
.farbschalter:hover{border-color:var(--signal);color:var(--signal)}
.farbschalter svg{width:16px;height:16px}
.farbschalter .sonne{display:none}
html[data-farbe="dunkel"] .farbschalter .mond{display:none}
html[data-farbe="dunkel"] .farbschalter .sonne{display:block}

/* Hinweise an Lupe, roter Pille und Schalter im Menü: kleiner Strich, Erklärung schräg rechts darunter
   (statt title, das der Mauszeiger verdeckt). Ohne Platz rechts setzt das Skript .links, dann geht es nach links.
   content erst beim Zeigen, sonst verbreitert der unsichtbare Hinweis die Seite. */
[data-tipp]{position:relative}
[data-tipp]::before,[data-tipp]::after{position:absolute;top:100%;pointer-events:none;z-index:20;animation:tippEin .15s .15s both}
[data-tipp]::before{left:50%;width:20px;height:1px;background:var(--ink);transform-origin:0 0;transform:translateY(3px) rotate(45deg)}
[data-tipp]::after{left:calc(50% + 13px);top:calc(100% + 16px);background:var(--ink);color:var(--paper);font:11.5px/1.3 var(--f-mono);letter-spacing:0;padding:6px 9px;border-radius:2px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.18)}
[data-tipp].links::before{left:auto;right:50%;transform-origin:100% 0;transform:translateY(3px) rotate(-45deg)}
[data-tipp].links::after{left:auto;right:calc(50% + 13px)}
@media (hover:hover){[data-tipp]:hover::before{content:""}[data-tipp]:hover::after{content:attr(data-tipp)}}
[data-tipp]:focus-visible::before{content:""}
[data-tipp]:focus-visible::after{content:attr(data-tipp)}
@keyframes tippEin{from{opacity:0}}