/* ══ DER LADEBILDSCHIRM (18.08.2026) ═════════════════════════════════════ Beim ersten Öffnen braucht die Startseite einen Moment: zwei Schriften, das Circuit-Netz (WebGL2, Graph je Station) und ein halbes Dutzend Module. Bis dahin stand eine HALBFERTIGE Bühne da — Titel ohne Sperrung, schwarzer Canvas, Knöpfe im Systemfont. Der Lader deckt genau dieses Fenster ab und verschwindet, sobald die Bühne wirklich steht. Er ist bewusst KEIN eigenes Stück Gestaltung: dieselbe Palette aus :root, dieselbe gesperrte Lichtschrift wie der Titel, dieselbe Haarlinie wie überall. Kein Kreisel, kein Prozentzähler, kein hüpfendes Logo — die drei Dinge, die eine Wartezeit LÄNGER wirken lassen, weil sie den Blick auf die Wartezeit lenken statt auf das, was gleich kommt. ── WER IHN WEGNIMMT ──────────────────────────────────────────────────── engine/lade/lade.mjs. Dort stehen auch die drei Auslöser und der Deckel. Dieses Blatt kennt nur zwei Zustände: da (`#lade`) und gehend (`#lade.weg`). ── DIE REISSLEINE ────────────────────────────────────────────────────── `lade-notaus` unten ist kein Effekt, sondern eine Sicherung: Kommt lade.mjs nie an (Modul-Fehler, abgebrochener Download), räumt die Animation den Lader nach 3,6 s selbst weg. Im Normalfall ist das Element da längst entfernt und die Animation nie zu sehen — sie darf deshalb ruhig hart sein. Ohne sie wäre ein ausgefallenes Modul eine schwarze Fläche ohne Ausweg. ──────────────────────────────────────────────────────────────────────── */ /* Ohne JS gibt es ihn NICHT: dann lädt kein Modul, es gibt nichts zu überbrücken, und niemand würde ihn je wegnehmen. `html.js` setzt das Inline-Skript im Kopf, also noch vor dem — der Lader blitzt damit auch bei abgeschaltetem JS nie auf. */ html:not(.js) #lade { display: none; } #lade { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: clamp(18px, 3.4svh, 30px); padding: 0 24px; /* Safe-Area: der Lader deckt das ganze Fenster, sein INHALT soll aber nicht unter Notch oder Home-Indikator geraten. */ padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); background: var(--void, #050506); /* Kein `transition` in der Ruhelage: der Lader steht im ersten Bild da und soll nicht auch noch hereinkommen. */ will-change: opacity; } /* ── Der Schriftzug: wie der Titel, nur klein ───────────────────────── `text-indent` gleicht die Sperrung des LETZTEN Zeichens wieder aus — ohne sie stünde die Zeile um .34em nach links versetzt (dieselbe Rechnung wie bei #titel). */ .lade-marke { font: 500 1.1rem/1 'Clash Display', 'Space Grotesk', system-ui, sans-serif; letter-spacing: .34em; text-indent: .34em; color: var(--ink, #f4f4f7); white-space: nowrap; } /* ── Die Haarlinie mit dem Lichtlauf ────────────────────────────────── Unbestimmt (indeterminate) und mit Absicht: es gibt hier keinen ehrlichen Fortschritt zu zeigen — drei Auslöser, von denen zwei nichts über ihren Stand sagen. Ein erfundener Balken, der bei 80 % stehen bleibt, ist schlimmer als gar keine Zahl. Der Lauf ist 30 % breit und läuft über die volle Breite plus einmal sich selbst, damit er an beiden Enden sauber verschwindet. */ .lade-linie { position: relative; width: min(280px, 62vw); height: 1px; background: var(--linie, rgba(255, 255, 255, .13)); overflow: hidden; } .lade-linie span { position: absolute; inset: 0 auto 0 0; width: 30%; background: linear-gradient(90deg, transparent, var(--ink, #f4f4f7), transparent); animation: lade-lauf 1.35s cubic-bezier(.5, 0, .5, 1) infinite; } @keyframes lade-lauf { 0% { transform: translateX(-100%); } 100% { transform: translateX(333.34%); } /* 100 % der Linie / 30 % Breite */ } .lade-wort { margin: 0; font: 400 .62rem/1 'Space Mono', ui-monospace, monospace; letter-spacing: .28em; text-indent: .28em; color: var(--ink-dim, #a9a9b3); } /* ── Der Abgang ─────────────────────────────────────────────────────── Deckkraft nach 0 und ein Hauch Vergrößerung: der Lader tritt nach VORNE aus dem Bild, statt zu verblassen — dieselbe Richtung, aus der der Titel dahinter kommt. `pointer-events: none` vom ersten Bild des Abgangs an, sonst schluckt eine halbdurchsichtige Fläche noch Klicks. Die Bühne dahinter beginnt bei der Hälfte (0,275 s) mit ihrem Auftritt — die Zahl steht in lade.mjs, die Dauer hier. */ #lade.weg { opacity: 0; scale: 1.02; pointer-events: none; transition: opacity .55s var(--ease, cubic-bezier(.16, .9, .24, 1)), scale .55s var(--ease, cubic-bezier(.16, .9, .24, 1)); } /* Reißleine — siehe Kopf. Fängt nur den Fall „lade.mjs kam nie an". */ #lade { animation: lade-notaus .4s linear 3.6s forwards; } @keyframes lade-notaus { to { opacity: 0; visibility: hidden; pointer-events: none; } } /* ── Bewegungsreduktion: nur der Schriftzug, und kürzer ─────────────── Kein Lichtlauf (eine Dauerschleife ist genau das, was hier abbestellt wurde), keine Vergrößerung, halbe Abgangszeit. Die Linie bleibt als ruhiger Strich stehen — sie trägt die Komposition. */ @media (prefers-reduced-motion: reduce) { .lade-linie span { display: none; } #lade.weg { scale: none; transition-duration: .2s; } } /* Handy: derselbe Lader, nur enger gesetzt. Er gilt für ALLE Breiten — engine/mobil/ fasst ihn nicht an. */ @media (max-width: 420px) { .lade-marke { font-size: .92rem; letter-spacing: .28em; text-indent: .28em; } .lade-wort { font-size: .58rem; } }