/* ════════════════════════════════════════════════════════════════════ NERO DNA, das eine Vokabular Entwurf 01.09.2026, erweitert 03.09.2026 um den Glas-und-Strom-Look. WARUM ES SIE GIBT Gemessen am 01.09.2026: es gab ZWEI vollständige Token-Sätze mit je 43 Namen und NULL gemeinsamen Namen. Die Marken-DNA sagt --nero-blue, die Oberfläche sagt --blue-16. Dieselben Werte, zwei Vokabeln. Deshalb sehen 19 Seiten „ähnlich, aber nicht gleich" aus: es lagen zwei Kompasse nebeneinander und beide zeigten fast dasselbe. Diese Datei führt sie zusammen. Die MARKEN-Namen führen, weil sie aus der gelockten Visual-DNA kommen. Die Oberflächen-Namen bleiben als Aliase stehen, damit keine der Seiten bricht. Das ist Absicht und Übergang: neu geschrieben wird mit --nero-*, Bestehendes läuft weiter. STAND 03.09.2026: 20 Dateien in frontend/ laden diese Datei. Deshalb gilt: kein heutiger Name verschwindet, kein heutiger Wert ändert sich. Der neue Look (Abschnitte LEITER, GLAS, STROM, LICHT) liegt als ZUSATZ daneben und wird Seite für Seite eingehängt, jede zuerst als Demo. LOOK 2 (03.09.2026, nach Alwins Blick auf die Demo: „ein paar orange Elemente reinbringen, mehr Impulse, es ist zu stark blau, mach den Hintergrund dunkler"): Leiter dunkler und blaugrau, Licht leiser, Knoten und Impuls-Kopf orange, Funke an der ruhenden Kante, Herzschlag (leise Impulse, solange body.lebt). Alle alten Namen bleiben. Rueckweg: cp nero-dna.css.bak-look2 nero-dna.css Reihenfolge: als ERSTES Stylesheet laden, vor allem anderen. ════════════════════════════════════════════════════════════════════ */ :root { /* ── Farbe. Mono: Blau und Orange. Kein dritter Akzent. ───────────── */ --nero-blue: #4f9dff; --nero-orange: #ff8a3c; --nero-blue-200: #a9cdff; --nero-blue-600: #2f7ae0; --nero-orange-200: #ffc69b; --nero-orange-600: #e56a1c; /* ── Grund. Dunkel, kosmisch, nie reines Weiß. ────────────────────── */ --nero-bg-deep: #070b14; --nero-bg: #0b1120; --nero-bg-raised: #111a2e; /* ── Glas. Drei Stufen, nicht zehn. ───────────────────────────────── */ --nero-glass: rgba(20, 30, 52, .55); --nero-glass-strong: rgba(20, 30, 52, .78); --nero-glass-border: rgba(120, 160, 220, .18); --nero-blur-1: blur(8px) saturate(1.12); --nero-blur-2: blur(14px) saturate(1.12); --nero-blur-3: blur(20px) saturate(1.12); /* ── Text ─────────────────────────────────────────────────────────── */ --nero-text: #e8eefc; --nero-text-muted: #93a4c4; --nero-text-faint: #5d6e8e; /* ── Aurora. Der Grund. Woertlich aus der gelockten Marken-DNA. ───── */ --nero-aurora: radial-gradient(60% 80% at 20% 10%, rgba(79,157,255,.22), transparent 60%), radial-gradient(50% 70% at 85% 25%, rgba(255,138,60,.14), transparent 60%), radial-gradient(70% 90% at 60% 95%, rgba(79,157,255,.10), transparent 65%); /* Vertiefter Grund fuer Eingabefelder: nicht heller als die Kachel, sondern dunkler. Ein Eingabefeld ist ein Loch, kein erhabenes Element. */ --nero-sunk: rgba(7,11,20,.55); /* ── Der Signaturstrich. Blau nach Orange. Die Handschrift. ───────── */ --nero-accent-line: linear-gradient(90deg, #4f9dff 0%, #ff8a3c 100%); /* ── Radius. Vier Stufen plus Pille. ──────────────────────────────── */ --nero-r-xs: 3px; --nero-r: 5px; --nero-r-md: 8px; --nero-r-lg: 14px; --nero-r-pill: 999px; /* ── Schrift ──────────────────────────────────────────────────────── */ --nero-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --nero-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --nero-fs-micro: 9px; --nero-fs-tiny: 10px; --nero-fs-xs: 11px; --nero-fs-sm: 12px; --nero-fs-base: 13px; --nero-fs-md: 15px; --nero-fs-lg: 18px; --nero-fs-xl: 22px; /* ── Abstand. 22 statt 24, weil 22 der real vorkommende Wert ist. ─── */ --nero-sp-1: 4px; --nero-sp-2: 8px; --nero-sp-3: 12px; --nero-sp-4: 16px; --nero-sp-5: 22px; --nero-sp-6: 32px; /* ── Schatten. Cluster-Mediane, keine neuen Werte. ────────────────── */ --nero-sh-1: 0 8px 26px -10px rgba(0,0,0,.80); --nero-sh-2: 0 20px 52px -22px rgba(0,0,0,.80); --nero-sh-3: 0 34px 96px -26px rgba(0,0,0,.82); /* ── Status. Grün und Rot, und zwar NUR als Signal. ──────────────── Kein dritter Akzent: diese zwei färben nie eine Fläche und nie einen Knopf, sie sagen nur gut oder kaputt. Die Marken-Regel lässt genau das zu. Warum sie hierher gehören: var(--good) steht in 55 Dateien, var(--bad) in 51, und die DNA kannte beide nicht. Deshalb hat sich jede Seite ihr eigenes Grün gebaut. In style.css:23 liegt noch ein drittes (--ok: #8fb88a) mit einem einzigen Nutzer. Es wird hier NICHT gleichgesetzt, das wäre eine stille Farbänderung. */ --nero-ok: #5ad6a0; --nero-bad: #ff6b5c; /* ── Glut. Der Schein um ein aktives Element. Nur Blau und Orange. ── Diese drei waren die letzte Lücke: tokens.css kannte sie, die DNA nicht. Solange das so blieb, konnte tokens.css nicht verschwinden, denn dashboard.html sitzt auf --accent-rule-glow. Werte wörtlich übernommen, damit sich beim Umschalten nichts sichtbar ändert. */ --nero-glow-blue: 0 0 0 1px rgba(79,157,255,.16), 0 0 24px -6px rgba(79,157,255,.34); --nero-glow-orange: 0 0 0 1px rgba(255,138,60,.16), 0 0 24px -6px rgba(255,138,60,.34); --nero-glow-line: 0 0 12px -2px rgba(79,157,255,.55); /* ── Bewegung ─────────────────────────────────────────────────────── */ --nero-ease: cubic-bezier(.22, 1, .36, 1); --nero-dur-fast: 160ms; --nero-dur-warp: 560ms; /* ── Takt. Jede Dauer hat hier ihren Namen, nirgends sonst. ───────── Alwin am 01.09.2026: 2,4 Sekunden umlaufend, ruhend 22 Prozent sichtbar. 03.09.2026 dazu: Atmen 2,6 s (wartet), Impuls 900 ms, Drift 60 s. */ --takt-puls: 2.4s; /* ein Umlauf des Segments an der Kante */ --takt-atmen: 2.6s; /* ein Atemzug der wartenden Kante */ --takt-impuls: 900ms; /* ein Impuls läuft einmal den Stromfaden entlang */ --takt-drift: 60s; /* das Hintergrundlicht wandert einmal hin und her */ --takt-faden: 6s; /* der ruhende Stromfaden atmet einmal (45 zu 60 Prozent) */ --nero-puls-runde: var(--takt-puls); --nero-puls-ruhe: .22; /* Look 2: die ruhende Kante traegt am rechten Ende einen kurzen orangen Funken, 3 Prozent der Breite. Die Deckung .22 steckt jetzt im Verlauf selbst, damit der Funke voll leuchten kann, waehrend der Strich leise bleibt. */ --nero-puls-funke: 3%; --nero-puls-ruhe-linie: linear-gradient(90deg, rgba(79,157,255,.22) 0%, rgba(255,138,60,.22) calc(100% - var(--nero-puls-funke) - .6%), rgba(255,138,60,.95) calc(100% - var(--nero-puls-funke)), rgba(255,138,60,.95) 100%); /* ══ LEITER. Vier Stufen Marine, drei Stufen Text, zwei Stufen Linie. ══ 03.09.2026, nach der Referenz (Conceptzilla, „AI Creative Operations"): das Panel ist kühler und heller als --nero-bg, der Grund dahinter bleibt fast schwarz. Der helle Blauverlauf der Referenz kommt NIE als Fläche, nur als Licht (siehe LICHT und die Glas-Kante). Die alten Namen --nero-bg-* bleiben unverändert, sie tragen heute 20 Seiten. */ /* 03.09.2026, Look 2 (Alwin: „zu stark blau, Hintergrund dunkler"): der Grund ist fast schwarz, Ebene und Panel je eine Stufe dunkler und blaugrau statt satt blau. Alt: #060b16, #0b1526, #10203a, #16294a. */ --nero-grund: #030509; /* Körper, tiefster Grund */ --nero-ebene: #080e19; /* Bereich, Leiste, Rinne */ --nero-panel: #111a2c; /* Kachel, Karte, Fenster */ --nero-panel-hoch: #182338; /* Kachel angehoben, Menü, Tooltip */ /* Kennzahl: die eine grosse Zahl einer Kachel. Orange-200, ein Funke, keine Flaeche. Wer eine Zahl hervorhebt, nimmt diese Variable. */ --nero-kennzahl: var(--nero-orange-200); --nero-text-leise: #a3b5d8; /* zweite Zeile, Erklärung */ --nero-text-still: #8398bd; /* Kleingedrucktes, Code-Hinweis; 4,5:1 auch auf panel-hoch */ --nero-linie: rgba(146, 182, 240, .14); /* Trenner, Tabellenlinie */ --nero-linie-hell: rgba(170, 200, 255, .32); /* Fokus, aktive Kante */ /* ══ GLAS. Ein Panel, das Licht durchlässt und an der Kante leuchtet. ══ Innen 1 px heller (die Lichtkante), außen weicher blauer Schein bei 10 Prozent, Schatten nach unten. Berührung hebt es an (siehe .glas.hebt). */ --nero-glas: rgba(13, 21, 38, .66); /* Look 2: alt rgba(16,32,58,.62) */ --nero-glas-hoch: rgba(20, 30, 52, .76); /* Look 2: alt rgba(22,41,74,.72) */ --nero-glas-kante: rgba(190, 215, 255, .16); /* 1 px innen */ /* Angehoben: die Lichtkante traegt einen Hauch Orange. Blau 70 zu Orange 30 in sRGB ergibt rgb(132,151,197); so wirkt die Beruehrung warm, ohne dass Orange eine Flaeche wird. Alt: rgba(200,222,255,.28) und rgba(79,157,255,.18). */ --nero-glas-kante-hoch: rgba(132, 151, 197, .48); --nero-glas-schein: rgba(79, 157, 255, .10); /* außen, ruhend */ --nero-glas-schein-hoch: rgba(132, 151, 197, .22); /* außen, angehoben */ --nero-glas-schatten: inset 0 0 0 1px var(--nero-glas-kante), 0 0 0 1px rgba(79,157,255,.06), 0 0 28px -4px var(--nero-glas-schein), var(--nero-sh-2); --nero-glas-schatten-hoch: inset 0 0 0 1px var(--nero-glas-kante-hoch), 0 0 0 1px rgba(79,157,255,.12), 0 0 36px -2px var(--nero-glas-schein-hoch), var(--nero-sh-3); /* ══ STROM. Der Faden zwischen zwei Elementen und der Impuls darauf. ══ 03.09.2026 (Fix A, nach dem Kritiker-Urteil „0 von 18 Seiten zeigen einen Faden"): der ruhende Faden ist jetzt SICHTBAR. 1,5 px, Blau bei 45 bis 55 Prozent, weicher Schein 3 px bei 25 Prozent, an beiden Enden ein Knoten von 6 px (Blau 70 Prozent), wie im Dribbble-Detail der Referenz. Der Faden atmet langsam (Opacity 45 zu 60, --takt-faden), weil er eine lebende Verbindung zeigt; unter prefers-reduced-motion steht er still. --nero-strom-a ist die Alpha des Fadens; sie wird per @property animiert. */ --nero-strom-dicke: 1.5px; --nero-strom-faden: linear-gradient(90deg, rgba(79,157,255,.45) 0%, rgba(79,157,255,.55) 50%, rgba(79,157,255,.45) 100%); --nero-strom-schein: 0 0 3px 1px rgba(79,157,255,.25); /* Look 2: Knoten und Impuls-Kopf sind Orange, der Faden und der Schweif bleiben Blau. Das ist der Funke am Ende der Leitung. Alt: Knoten rgba(79,157,255,.70), Kopf #dceafe. */ --nero-strom-knoten: rgba(255,138,60,.85); --nero-strom-knoten-schein: 0 0 6px rgba(255,138,60,.50); --nero-impuls-kopf: var(--nero-orange); --nero-impuls-laenge: 44px; /* ══ LICHT. Der Blauverlauf der Referenz, aber nur als Schein. ═══════ */ --nero-licht: radial-gradient(55% 70% at 18% 8%, rgba(79,157,255,.10), transparent 62%), radial-gradient(45% 60% at 84% 22%, rgba(255,198,155,.04), transparent 60%), radial-gradient(60% 80% at 62% 96%, rgba(79,157,255,.06), transparent 64%); /* Das LEBENDE Licht (03.09.2026, Fix A): Nero ist wach, und der Grund hat ein Gefaelle wie die Referenz, rechts oben hell, links unten dunkel. Ein blauer Hof bei 22 Prozent mit Radius 60 Prozent der Breite, dazu ein leiser Blauverlauf nach rechts. Der Orange-Hof bleibt klein und leise (5 Prozent). Gemessen am 03.09.2026 (04_Belege/06_fix/a/pixelbelege.txt): mit 28 Prozent lag --nero-text-still im hellsten Punkt bei 4,16:1, mit 24 Prozent bei 4,47:1 (Chat), beides unter der Grenze 4,5:1. Deshalb 22 Prozent: das Gefälle bleibt (rechts oben rund dreieinhalbmal so hell wie links unten), die Schrift bleibt lesbar. Look 2 (03.09.2026): Blauhof 22 auf 13 Prozent, Verlauf 5 auf 3 Prozent, weil der Grund jetzt fast schwarz ist und Alwin weniger Blau will. Der Orange-Hof ist jetzt Orange-200 bei 4 Prozent: sattes Orange ueber dem fast schwarzen Grund wurde BRAUN (gemessen: rgb(11,9,10)-Schleier, 4,7 Prozent der Login-Seite mit R groesser B). Orange-200 bleibt ueber Schwarz neutral-warm. */ --nero-licht-lebt: radial-gradient(60% 70% at 86% 12%, rgba(79,157,255,.13) 0%, rgba(79,157,255,.05) 45%, transparent 100%), linear-gradient(90deg, transparent 30%, rgba(79,157,255,.03) 100%), radial-gradient(28% 36% at 20% 92%, rgba(255,198,155,.04), transparent 100%); /* ══ Aliase. Die alten Namen zeigen auf die neuen. ═════════════════ Damit bricht keine der 19 Seiten. Neu geschrieben wird mit --nero-*. Diese Schicht darf verschwinden, sobald keine Seite sie mehr braucht. */ --blue-06: rgba(79,157,255,.06); --blue-10: rgba(79,157,255,.10); --blue-16: rgba(79,157,255,.16); --blue-24: rgba(79,157,255,.24); --blue-32: rgba(79,157,255,.32); --blue-42: rgba(79,157,255,.42); --orange-06: rgba(255,138,60,.06); --orange-10: rgba(255,138,60,.10); --orange-16: rgba(255,138,60,.16); --orange-24: rgba(255,138,60,.24); --orange-32: rgba(255,138,60,.32); --orange-42: rgba(255,138,60,.42); --r-xs: var(--nero-r-xs); --r: var(--nero-r); --r-md: var(--nero-r-md); --r-lg: var(--nero-r-lg); --r-pill: var(--nero-r-pill); --glass-1: var(--nero-blur-1); --glass-2: var(--nero-blur-2); --glass-3: var(--nero-blur-3); --sh-1: var(--nero-sh-1); --sh-2: var(--nero-sh-2); --sh-3: var(--nero-sh-3); --fs-micro: var(--nero-fs-micro); --fs-tiny: var(--nero-fs-tiny); --fs-xs: var(--nero-fs-xs); --fs-sm: var(--nero-fs-sm); --fs-base: var(--nero-fs-base); --fs-md: var(--nero-fs-md); --fs-lg: var(--nero-fs-lg); --fs-xl: var(--nero-fs-xl); --sp-1: var(--nero-sp-1); --sp-2: var(--nero-sp-2); --sp-3: var(--nero-sp-3); --sp-4: var(--nero-sp-4); --sp-5: var(--nero-sp-5); --sp-6: var(--nero-sp-6); --accent-rule: var(--nero-accent-line); --glow-blue: var(--nero-glow-blue); --glow-orange: var(--nero-glow-orange); --accent-rule-glow: var(--nero-glow-line); /* --glow-emo hat heute keinen einzigen Nutzer, wandert aber mit, damit tokens.css restlos aufgehen kann. Der Rückfall bleibt drin: --emo-neutral-soft ist keine Marken-Vokabel und wird nirgends gesetzt. */ --glow-emo: 0 0 28px -8px var(--emo-neutral-soft, rgba(79,157,255,.28)); --good: var(--nero-ok); --bad: var(--nero-bad); } /* ════════════════════════════════════════════════════════════════════ DER PULS Alwins Entscheidung vom 01.09.2026: umlaufend, im Ruhezustand bleibt der Strich als feine Linie sichtbar, beim Arbeiten wandert ein helles Segment einmal ringsum in 2,4 Sekunden. Er ist keine Verzierung: er sagt, ob etwas läuft. Ruhend heißt ruhend. Wandern heißt, hier arbeitet gerade wirklich etwas. Deshalb wird die Klasse `.arbeitet` gesetzt, wenn ein Zustand kommt, nie auf Vorrat. Vier Zustände, eine Klasse je Zustand, JS setzt genau eine davon: (keine) ruhend, 22 Prozent Signaturstrich an der Kante .arbeitet Segment wandert, Blau nach Orange, 2,4 s je Umlauf, endlos .fertig EIN Umlauf in Orange, dann nimmt JS die Klasse wieder weg .wartet Kante atmet Orange, 2,6 s, Grundhelligkeit 45 Prozent: hier wartet etwas auf einen Menschen ════════════════════════════════════════════════════════════════════ */ @property --nero-winkel { syntax: ""; initial-value: 0turn; inherits: false; } /* Der ruhende Strich. Liegt IMMER an, das ist die gemeinsame Handschrift. */ .puls-kante { position: relative; border-radius: var(--nero-r-lg); } .puls-kante::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--nero-puls-ruhe-linie); /* Look 2: Strich 22 Prozent, Funke rechts */ opacity: 1; /* Nur der Rand, nicht die Fläche: zwei Masken, deren Differenz der Rahmen ist. */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } /* Das wandernde Segment. Nur wenn wirklich gearbeitet wird. */ .puls-kante.arbeitet::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--nero-winkel), transparent 0turn, transparent .74turn, var(--nero-blue) .86turn, var(--nero-orange) .95turn, transparent 1turn); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: nero-puls-runde var(--nero-puls-runde) linear infinite; } @keyframes nero-puls-runde { to { --nero-winkel: 1turn; } } /* Fertig: EIN Umlauf in Orange, dann ist es vorbei. Kein Dauerleuchten. */ .puls-kante.fertig::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--nero-winkel), transparent 0turn, transparent .74turn, var(--nero-orange) .88turn, transparent 1turn); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: nero-puls-runde var(--nero-puls-runde) linear 1; } /* Wartet: die Kante wird orange und atmet. Kein Umlauf, denn nichts läuft; es liegt etwas vor, das ein Mensch anfassen muss. Grund 45 Prozent, der Atemzug hebt bis 90 und senkt wieder. Dazu ein weicher orangener Schein außen, der mitatmet, damit man es auch aus dem Augenwinkel sieht. */ .puls-kante.wartet::before { background: var(--nero-orange); opacity: .45; animation: nero-puls-atmen var(--takt-atmen) ease-in-out infinite; } .puls-kante.wartet::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 26px -6px rgba(255,138,60,.45); opacity: .45; animation: nero-puls-atmen var(--takt-atmen) ease-in-out infinite; } @keyframes nero-puls-atmen { 0%, 100% { opacity: .45; } 50% { opacity: .90; } } /* Dieselbe Regel für eine Trennlinie: ruhend ein Strich, arbeitend ein Lauf. */ .puls-linie { height: 1px; border: 0; margin: var(--nero-sp-4) 0; background: var(--nero-puls-ruhe-linie); /* Look 2: wie die Kante, Funke rechts */ opacity: 1; } .puls-linie.arbeitet { opacity: 1; background: linear-gradient(90deg, transparent 0%, transparent 30%, var(--nero-blue) 45%, var(--nero-orange) 55%, transparent 70%, transparent 100%); background-size: 300% 100%; animation: nero-puls-lauf var(--nero-puls-runde) linear infinite; } @keyframes nero-puls-lauf { from { background-position: 150% 0; } to { background-position: -150% 0; } } /* ════════════════════════════════════════════════════════════════════ GLAS Das Panel des neuen Looks. Durchscheinend über dem Licht, innen eine 1-px-Lichtkante, außen ein weicher blauer Schein, Schatten nach unten. Ruhe ist Grundzustand. `.hebt` reagiert auf Berührung (Hover, Fokus im Inneren): das Panel hebt sich 2 px, der Schein wird stärker. Nichts bewegt sich von selbst. ════════════════════════════════════════════════════════════════════ */ .glas { position: relative; background: var(--nero-glas); -webkit-backdrop-filter: var(--nero-blur-2); backdrop-filter: var(--nero-blur-2); border-radius: var(--nero-r-lg); box-shadow: var(--nero-glas-schatten); color: var(--nero-text); } .glas.hoch { background: var(--nero-glas-hoch); } .glas.hebt { transition: transform var(--nero-dur-fast) var(--nero-ease), box-shadow var(--nero-dur-fast) var(--nero-ease), background-color var(--nero-dur-fast) var(--nero-ease); } .glas.hebt:hover, .glas.hebt:focus-within { transform: translateY(-2px); background: var(--nero-glas-hoch); box-shadow: var(--nero-glas-schatten-hoch); } /* Glas und Puls zusammen: die Pulskante liegt AUF der Lichtkante, beide teilen den Radius. Die Lichtkante tritt zurück, damit der Strich führt. */ .glas.puls-kante { box-shadow: 0 0 0 1px rgba(79,157,255,.06), 0 0 28px -4px var(--nero-glas-schein), var(--nero-sh-2); } .glas.puls-kante.hebt:hover, .glas.puls-kante.hebt:focus-within { box-shadow: 0 0 0 1px rgba(79,157,255,.12), 0 0 36px -2px var(--nero-glas-schein-hoch), var(--nero-sh-3); } /* ════════════════════════════════════════════════════════════════════ STROM Ein Faden zwischen zwei Elementen, und ein Impuls, der darauf läuft. Der Faden liegt immer da, leise. Der Impuls läuft NUR, wenn `.feuert` gesetzt wird, also wenn wirklich etwas von A nach B gegangen ist: eine Nachricht, ein Auftrag, ein Ergebnis. JS setzt `.feuert` und nimmt es nach --takt-impuls wieder weg; die Klasse räumt sich nicht selbst auf, damit ein zweiter Impuls sauber neu starten kann. Aufbau:
waagerecht
senkrecht Die Länge gibt das Elternelement vor (width bzw. height). ════════════════════════════════════════════════════════════════════ */ @property --nero-strom-a { syntax: ""; initial-value: .5; inherits: false; } .strom { position: relative; height: var(--nero-strom-dicke); width: 100%; border-radius: var(--nero-r-pill); /* Die Alpha steht in --nero-strom-a (ruhend .5, atmend .45 bis .60). Der Rueckfall .5 gilt in Browsern ohne @property; dort atmet nichts. */ background: rgba(79,157,255, var(--nero-strom-a, .5)); box-shadow: var(--nero-strom-schein); overflow: visible; animation: nero-strom-atmen var(--takt-faden) ease-in-out infinite; } /* Die Knoten an beiden Enden: 6 px, Blau 70 Prozent, eigener kleiner Schein. */ .strom::before, .strom::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--nero-strom-knoten); box-shadow: var(--nero-strom-knoten-schein); pointer-events: none; } .strom::before { left: -3px; } .strom::after { right: -3px; } @keyframes nero-strom-atmen { 0%, 100% { --nero-strom-a: .45; } 50% { --nero-strom-a: .60; } } .strom .impuls { position: absolute; top: 50%; left: 0; width: var(--nero-impuls-laenge); height: calc(var(--nero-strom-dicke) + 2px); border-radius: var(--nero-r-pill); transform: translate(-100%, -50%); /* Schweif links, Kopf rechts: der Punkt zieht seinen Schein hinter sich her. */ background: linear-gradient(90deg, transparent 0%, rgba(79,157,255,.0) 10%, rgba(79,157,255,.60) 72%, var(--nero-impuls-kopf) 100%); box-shadow: 0 0 10px -1px rgba(79,157,255,.55), 0 0 4px rgba(255,138,60,.75); opacity: 0; pointer-events: none; } .strom.feuert .impuls { animation: nero-impuls-lauf var(--takt-impuls) cubic-bezier(.45,.05,.55,.95) 1; } @keyframes nero-impuls-lauf { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } } /* Der Herzschlag (Look 2): solange Nero wach ist (body.lebt), schickt puls.js alle 12 s auf jeden Faden einen LEISEN Impuls, Klasse `feuert leise`. Halb so hell wie ein Ereignis-Impuls, derselbe Weg, dieselbe Dauer. Der Ausloeser ist der Zustand „wach", nicht die Uhr allein: ohne .lebt kein Herzschlag. */ .strom.feuert.leise .impuls { animation-name: nero-impuls-lauf-leise; } @keyframes nero-impuls-lauf-leise { 0% { left: 0; opacity: 0; } 8% { opacity: .5; } 90% { opacity: .5; } 100% { left: 100%; opacity: 0; } } .strom.senkrecht { width: var(--nero-strom-dicke); height: 100%; } .strom.senkrecht::before, .strom.senkrecht::after { top: auto; left: 50%; right: auto; margin: 0 0 0 -3px; } .strom.senkrecht::before { top: -3px; } .strom.senkrecht::after { bottom: -3px; } .strom.senkrecht .impuls { top: 0; left: 50%; width: calc(var(--nero-strom-dicke) + 2px); height: var(--nero-impuls-laenge); transform: translate(-50%, -100%); background: linear-gradient(180deg, transparent 0%, rgba(79,157,255,.0) 10%, rgba(79,157,255,.60) 72%, var(--nero-impuls-kopf) 100%); } .strom.senkrecht.feuert .impuls { animation: nero-impuls-fall var(--takt-impuls) cubic-bezier(.45,.05,.55,.95) 1; } @keyframes nero-impuls-fall { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .strom.senkrecht.feuert.leise .impuls { animation-name: nero-impuls-fall-leise; } @keyframes nero-impuls-fall-leise { 0% { top: 0; opacity: 0; } 8% { opacity: .5; } 90% { opacity: .5; } 100% { top: 100%; opacity: 0; } } /* Gebogene Verbindung als SVG. Zwei Pfade übereinander mit derselben Geometrie: der Faden und der Impuls. Beide brauchen pathLength="100", dann ist die Strichlänge in Prozent des Weges und das Timing gilt für jede Kurve gleich, egal wie lang sie ist. `.feuert` kommt auf das oder den Impuls-Pfad. */ .strom-svg { overflow: visible; display: block; } .strom-pfad { fill: none; stroke: var(--nero-blue); stroke-opacity: .5; stroke-width: var(--nero-strom-dicke); stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(79,157,255,.25)); animation: nero-strom-pfad-atmen var(--takt-faden) ease-in-out infinite; } @keyframes nero-strom-pfad-atmen { 0%, 100% { stroke-opacity: .45; } 50% { stroke-opacity: .60; } } /* Die Knoten an den Enden eines SVG-Fadens: */ .strom-knoten { fill: var(--nero-strom-knoten); stroke: none; filter: drop-shadow(0 0 4px rgba(255,138,60,.50)); } /* Eine Schicht fuer Faeden ueber dem Grund, unter den Kacheln. Position und z-index setzt die Seite, die Schicht faengt keine Zeiger. */ .strom-schicht { position: absolute; pointer-events: none; overflow: visible; display: block; } .strom-pfad.impuls { stroke: var(--nero-impuls-kopf); stroke-opacity: 1; animation: none; /* der Impuls atmet nicht, er laeuft nur bei .feuert */ stroke-width: calc(var(--nero-strom-dicke) + 1px); stroke-dasharray: 14 100; /* 14 Prozent Weg leuchten, der Rest ist Lücke */ stroke-dashoffset: 14; /* Start: der Strich liegt ganz vor dem Anfang */ opacity: 0; filter: drop-shadow(0 0 5px rgba(255,138,60,.85)); } .feuert .strom-pfad.impuls, .strom-pfad.impuls.feuert { animation: nero-impuls-pfad var(--takt-impuls) cubic-bezier(.45,.05,.55,.95) 1; } @keyframes nero-impuls-pfad { 0% { stroke-dashoffset: 14; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } } .feuert.leise .strom-pfad.impuls, .strom-pfad.impuls.feuert.leise { animation-name: nero-impuls-pfad-leise; } @keyframes nero-impuls-pfad-leise { 0% { stroke-dashoffset: 14; opacity: 0; } 8% { opacity: .5; } 90% { opacity: .5; } 100% { stroke-dashoffset: -100; opacity: 0; } } /* ════════════════════════════════════════════════════════════════════ FUNKEN (Look 2, 03.09.2026) Orange ist Funke, nie Flaeche. Hier stehen die Stellen, an denen die DNA den Funken selbst setzt, damit keine der Seiten angefasst werden muss: der aktive Nav-Punkt (nav.css faerbt ihn mit dem Signaturverlauf; diese Regel ist eine Stufe spezifischer und gewinnt, egal in welcher Reihenfolge die Dateien laden) und die Kennzahl. ════════════════════════════════════════════════════════════════════ */ .global-nav .global-nav-pill.active::before, .global-nav .global-nav-pill.cur::before { background: var(--nero-orange); box-shadow: 0 0 6px rgba(255,138,60,.60); } .kennzahl { color: var(--nero-kennzahl); } /* ════════════════════════════════════════════════════════════════════ LICHT Der Blauverlauf der Referenz, aber nur als Schein hinter allem. Zwei blaue Höfe (16 und 9 Prozent), ein orangener (6 Prozent). Ohne `.lebt` steht das Licht still. Mit `.lebt` driftet es in 60 s einmal hin und zurück; `.lebt` setzt heute der Nebel im Cockpit, wenn Nero wach ist. Klasse auf . Die Fläche ist 10 Prozent größer als das Fenster, damit beim Driften kein Rand sichtbar wird. ════════════════════════════════════════════════════════════════════ */ /* isolation: isolate macht body zum eigenen Stapel. Ohne das malt body seinen Grund ÜBER das ::before mit z-index -1 und das Licht ist weg (gemessen 03.09.2026: Screenshot war einheitlich schwarz). */ .licht { background-color: var(--nero-grund); isolation: isolate; } .licht::before { content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none; background: var(--nero-licht); will-change: transform; } .licht.lebt::before { background: var(--nero-licht-lebt); animation: nero-licht-drift var(--takt-drift) ease-in-out infinite; } @keyframes nero-licht-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 33% { transform: translate3d(2.5%, -1.5%, 0); } 66% { transform: translate3d(-1.5%, 2%, 0); } } /* ════════════════════════════════════════════════════════════════════ WENIGER BEWEGUNG Wer weniger Bewegung will, bekommt keine. Der Zustand bleibt lesbar: arbeitende Kante heller, wartende Kante orange, Impuls entfällt, Licht steht. Kein Wandern, kein Atmen, kein Driften, kein Anheben. ════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .puls-kante.arbeitet::after, .puls-kante.fertig::after { animation: none; opacity: .55; } .puls-kante.wartet::before, .puls-kante.wartet::after { animation: none; opacity: .6; } .puls-linie.arbeitet { animation: none; background: var(--nero-accent-line); } .strom.feuert .impuls, .strom.senkrecht.feuert .impuls, .feuert .strom-pfad.impuls, .strom-pfad.impuls.feuert, .strom.feuert.leise .impuls, .strom.senkrecht.feuert.leise .impuls, .feuert.leise .strom-pfad.impuls, .strom-pfad.impuls.feuert.leise { animation: none; opacity: 0; } .licht.lebt::before { animation: none; } .strom, .strom-pfad { animation: none; } /* der Faden steht, bleibt aber sichtbar */ .glas.hebt { transition: none; } .glas.hebt:hover, .glas.hebt:focus-within { transform: none; } } /* Ohne @property kann der Winkel nicht wandern. Dann steht der Rahmen heller da, statt gar nichts zu sagen. Nie eine stumme Fläche. */ @supports not (background: conic-gradient(from var(--nero-winkel), red, blue)) { .puls-kante.arbeitet::before { background: var(--nero-accent-line); opacity: .75; } .puls-kante.arbeitet::after { display: none; } }