/*
 * Preloader: das drehende Logo-Netz über der ganzen Seite, bis Schriften und Bilder geladen sind.
 * Bewusst eine eigene kleine Datei im Head, damit er vor allen anderen Styles sichtbar ist.
 * Ohne JavaScript wird die Klasse html.has-preloader nie gesetzt, der Preloader bleibt dann ausgeblendet.
 * Fällt das Hauptskript aus, blendet er sich nach 8 Sekunden selbst aus.
 */
html { scrollbar-gutter: stable; }
html.has-preloader { overflow: hidden; }
.preloader {
  position: fixed; inset: 0; z-index: 1000; display: none; place-items: center;
  background: #111; color: #2dffb4;
  transition: transform .9s cubic-bezier(.77, 0, .18, 1), visibility 0s .9s;
}
html.has-preloader .preloader { display: grid; animation: preloader-failsafe 0s 8s forwards; }
.preloader.is-leaving { transform: translateY(-100%); visibility: hidden; }
.preloader-mark { width: clamp(5rem, 14vw, 8rem); height: auto; animation: preloader-spin 2.4s cubic-bezier(.65, 0, .35, 1) infinite; transition: opacity .35s, scale .6s; }
.preloader-mark circle:nth-of-type(2) { transform-origin: 50px 50px; animation: preloader-pulse 1.2s ease-in-out infinite; }
.preloader.is-leaving .preloader-mark { opacity: 0; scale: .6; }
.preloader-label { position: absolute; bottom: 12vh; margin: 0; font: 400 .8rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; color: #a6a6a6; }
/* Erscheinungsbilder: data-theme setzt display-init.js vor dem ersten Zeichnen. Farben wie in Assets/Css/tokens.css,
   die Tokens selbst stehen hier noch nicht zur Verfügung. */
:root[data-theme="light"] .preloader { background: #fafbf8; color: #007a4c; }
:root[data-theme="light"] .preloader-label { color: #3a4240; }
:root[data-theme="contrast"] .preloader { background: #000; color: #ffe600; }
:root[data-theme="contrast"] .preloader-label { color: #fff; }
@keyframes preloader-spin { to { rotate: 360deg; } }
@keyframes preloader-pulse { 50% { transform: scale(1.7); } }
@keyframes preloader-failsafe { to { visibility: hidden; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .preloader-mark, .preloader-mark circle:nth-of-type(2) { animation: none; }
  .preloader { transition: opacity .3s; }
  .preloader.is-leaving { transform: none; opacity: 0; }
}