/* ============================================================
start-layering.css — Startseite W33 START (r11, 27.09.2026)
Nur für web/index.html. Hero-Tiefe (S1) und Laufband (S2) stehen inline
im Block #w33-start-kritisch; hier alles unterhalb des ersten Bildschirms.
Regeln (Brief START S8): jede Bewegung nur unter
prefers-reduced-motion: no-preference; Grundzustand immer sichtbar
(HAUS_INSPO K6-1); Dauer-Bewegung nur, solange das Element im Bild
ist (.is-sicht aus start-layering.js); Scroll-Kopplung nur unter
@supports (animation-timeline: view()); keine Rotation im Endzustand.
Farben nur aus Tokens. Muster sind eigene Nachbauten ohne Abhängigkeit:
Magic UI (MIT), Aceternity UI, Haikei, Skiper UI, shadcn/ui, motion.dev.
W33 START-2 („All-Out“, 27.09.2026): jede Sektion bekommt Grund (Verlauf +
Haikei-Form + Korn), Tiefe und Bewegung. Budget (Brief A-Grenzen): Dauer-
Animationen im Ruhezustand ≤ 12; alles außerhalb des Hero läuft nur mit
.is-sicht (IntersectionObserver), auch die scroll-gekoppelten; Reduced
Motion = 0 laufende Animationen, Endzustände sichtbar.
============================================================ */
/* ---- 0 · Reveal (Blur Fade) -------------------------------------------
Quelle: Magic UI blur-fade.tsx:38–62 → übernommen: 400 ms, blur 6 px,
Hub ≤ 8 px, „easeOut“ (hier --ease-drift). Abweichung: Grundzustand
sichtbar; die Animation startet erst mit .is-in (motion.dev inView-
Semantik als IntersectionObserver in start-layering.js). */
@media (prefers-reduced-motion: no-preference) {
.w13-rv.is-in { animation: sl-blur var(--dur-fade, 400ms) var(--ease-drift) both; animation-delay: calc(min(var(--i, 0), 5) * 50ms); } /* START-2 A9: Staffel ≤ 5 × 50 ms */
}
@keyframes sl-blur {
from { opacity: 0; transform: translateY(8px); filter: blur(6px); }
}
/* ---- S3 · Was DripBack übernimmt: Bento + Border Beam -----------------
Quelle: Magic UI bento-grid.tsx:22–31 → übernommen: Raster mit einer
Doppelkarte. Karte 01 = 2 Spalten × 2 Zeilen ab 901 px. */
@media (min-width: 601px) and (max-width: 900px) {
.w13-grid3.sl-bento3 > :first-child { grid-column: 1 / -1; }
}
/* Nachbesserung 1: Doppelkarte nur breit, nicht hoch (gleiche Reihe = gleiche Höhe wie die Nachbarn). */
@media (min-width: 901px) {
.w13-grid3.sl-bento3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}
/* Karte 01 füllt die Doppelhöhe mit der Stimm-Welle (Deko, aria-hidden) statt mit Leerraum. */
.sl-welle {
display: block; width: 100%; flex: 1 1 88px; min-height: 88px; max-height: 280px; height: auto;
margin: var(--space-3) 0 var(--space-2); fill: var(--lyr-accent);
}
@media (max-width: 600px) { .sl-welle { display: none; } } /* einspaltig: Karte bleibt ≤ 1,3 × Nachbarn */
/* Quelle: Magic UI border-beam.tsx:67–104 → übernommen: Lichtquadrat
(Verlauf nach links, Akzent → transparent) läuft per offset-path
rect(0 auto auto 0 round) über einen auf den Rand maskierten Rahmen,
6 s linear, nur diese eine Karte. Maske wie shine-border.tsx:48–51.
Fallback (kein offset-path) und Reduced Motion: ruhender Rahmen. */
.sl-strahl {
position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
background: color-mix(in srgb, var(--accent) 38%, transparent);
-webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
}
.sl-strahl i { display: none; }
@supports (offset-path: rect(0 auto auto 0)) {
@media (prefers-reduced-motion: no-preference) {
.sl-strahl { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sl-strahl i {
display: block; position: absolute; width: 96px; aspect-ratio: 1;
background: linear-gradient(to left, var(--accent-small), var(--accent), transparent);
offset-path: rect(0 auto auto 0 round 96px); offset-distance: 0%;
}
[data-sl-sicht].is-sicht > .sl-strahl i { animation: sl-strahl 6s linear infinite; }
}
}
@keyframes sl-strahl { to { offset-distance: 100%; } }
/* ---- S4 · Server-Montage (Motor: hero-scrub.js, unverändert) ----------
Karte = figure[data-build-seq]; Medium [data-build-media] mit ![]()
(Poster f0001, Reduced Motion f0216) +