). [data-cw-cue]
aus assets/cool-website.css setzt nur opacity:0 — ohne eigene Positionierung
würden mehrere Geschwister- im normalen Blockfluss untereinander aufgereiht
werden (eine unsichtbare Box beansprucht trotzdem ihre Höhe). Deshalb hier
position:absolute auf jede Zeile, alle exakt übereinandergelegt; .cw-copy--lead
(unverändert aus der Engine) bleibt der positionierende Elternrahmen.
Scope bewusst eng auf .cw-copy--lead .cw-copy__line gehalten — .cw-copy--lead
kommt aktuell nur genau einmal im ganzen Projekt vor (Akt 1).
2026-09-30 (Nachschlag): Nutzer fand die Sätze zu klein/unauffällig und wollte
eine "premium" Position etwas höher. Schriftgröße auf display-Font + große
clamp() angehoben (Größenordnung an .count-block__num / Sektions-Headlines
angelehnt statt der bisherigen sehr kleinen Fließtext-Größe), engere
Zeilenhöhe für Headline-Charakter. Position: .cw-copy--lead selbst kommt aus
der Engine-CSS (assets/cool-website.css, bottom: clamp(3rem,12vh,9rem)) — hier
bewusst NICHT die Engine-Datei angefasst, sondern in site.css (das lädt danach
und darf Engine-Defaults überschreiben, wie an anderer Stelle in dieser Datei
bereits mit !important gehandhabt) einen höheren bottom-Wert erzwungen. Sicher,
da .cw-copy--lead projektweit nur an dieser einen Stelle verwendet wird. */
.cw-copy--lead {
bottom: clamp(7rem, 24vh, 16rem) !important;
}
.cw-copy--lead .cw-copy__line {
position: absolute;
inset-inline: 0;
bottom: 0;
margin: 0;
font-family: var(--cw-font-display);
font-weight: 600;
font-size: clamp(1.7rem, 4vw, 2.9rem);
line-height: 1.22;
letter-spacing: -0.01em;
color: var(--cw-ink);
max-width: 34ch;
}
/* ---------- Home: Portfolio-Rail (Akt 3, pan) ---------- */
/* min-width guarantees .rail's natural content width always exceeds the
viewport (over = scrollWidth - vw > 0 in cool-website.js), so the pan
transform activates on any monitor size — fixed-width flex children
(flex: 0 0 auto) mean any shortfall becomes automatic trailing runway
instead of collapsing the pan on wide/fullscreen screens. */
.rail {
align-items: center;
gap: clamp(1.4rem, 3vw, 2.4rem);
height: 100%;
padding-inline: var(--cw-gutter);
min-width: 130vw;
}
.rail__lead { flex: 0 0 auto; max-width: 20rem; }
.rail__lead h2 {
font-family: var(--cw-font-display);
font-size: clamp(1.5rem, 3.2vw, 2.1rem);
margin: .8rem 0;
}
.rail__lead p { margin: 0; color: var(--cw-ink-soft); font-size: .96rem; line-height: 1.55; }
.rail .item {
position: relative;
flex: 0 0 auto;
width: clamp(270px, 24vw, 460px);
background: var(--cw-surface);
border: 1px solid rgba(245,245,245,.07);
border-radius: 18px;
padding: 1.7rem 1.5rem;
box-shadow: var(--cw-e2), var(--cw-edge);
transition: transform .25s var(--cw-ease-out), box-shadow .25s var(--cw-ease-out);
}
.rail .item:hover {
transform: translateY(-3px);
box-shadow: var(--cw-e3), var(--cw-edge);
}
@media (prefers-reduced-motion: reduce) {
.rail .item { transition: none; }
.rail .item:hover { transform: none; }
}
.rail .item h3 {
font-family: var(--cw-font-display);
font-size: 1.08rem;
margin: .5rem 0;
color: var(--cw-ink);
}
.rail .item p { margin: 0; color: var(--cw-ink-soft); font-size: .92rem; line-height: 1.5; }
.rail .item .tag-row { margin-top: .9rem; }
/* Shine-Border: rein additive Lichtspur, die einmal pro Zyklus um den
Kartenrand läuft — zusätzliche Ebene über dem bestehenden 1px-Border,
verändert weder :hover-Transform noch :hover-Shadow oben. --cw-border-angle
wird via @property registriert, damit nur der Gradient-Winkel animiert
(nicht das Element selbst rotiert) — so bleibt der Lichtring exakt an den
abgerundeten Ecken der Card ausgerichtet, egal bei welchem Winkel. */
@property --cw-border-angle {
syntax: "";
inherits: false;
initial-value: 0deg;
}
:root { --cw-border-angle: 0deg; } /* Fallback für Browser ohne @property-Support: statischer Ring statt Animation */
.rail .item::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
padding: 1px;
background: conic-gradient(
from var(--cw-border-angle),
transparent 0%,
transparent 80%,
color-mix(in oklab, var(--cw-accent) 55%, transparent) 86%,
#C08AFF 90%,
#F5A35C 94%,
transparent 100%
);
-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;
pointer-events: none;
animation: cw-shine-rotate 7s linear infinite;
}
.rail .item > * { position: relative; z-index: 1; }
@keyframes cw-shine-rotate {
to { --cw-border-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.rail .item::before {
animation: none;
background: color-mix(in oklab, var(--cw-accent) 18%, transparent);
}
}
/* 2026-09-30: Touch-Gate, analog zu [data-cw-tilt]/[data-cw-magnet]/
[data-cw-spotlight] in cool-website.css, die bereits auf
(hover: hover) and (pointer: fine) beschränkt sind. Diese Animation
rotiert einen @property-Winkel innerhalb eines conic-gradient — das kann
der Browser nicht compositen, jeder Frame ist ein echtes Repaint von 4
Elementen. Ohne dieses Gate lief sie unconditional ab dem ersten Paint,
auch während Akt 1 (Video-Scrub, bereits der teuerste Akt der Seite) —
das war der Hauptgrund für das gemeldete "ruckelt auf dem Handy, auch
die ersten Seiten". Gleicher Fallback wie im reduced-motion-Block oben. */
@media (hover: none), (pointer: coarse) {
.rail .item::before {
animation: none;
background: color-mix(in oklab, var(--cw-accent) 18%, transparent);
}
/* Akt 1 (Home, scrub-Sektion): auf dem Handy soll ein Swipe maximal einen
der 4 Sätze weiterbewegen, nicht mehrere auf einmal überspringen. Die
Engine (cool-website.js) bleibt unangetastet — sie liest ohnehin nur
scrollY pro Frame, egal wodurch der Scroll entsteht. Stattdessen: vier
unsichtbare 1px-Marker (.cw-snap-mark, siehe index.html) an der
Scroll-Position jedes Satz-Plateaus, plus natives CSS scroll-snap.
scroll-snap-stop: always ist hier der entscheidende Teil — ohne das
würde ein harter Fling trotzdem zwei Marker auf einmal überspringen und
beim nächstgelegenen landen; mit "always" MUSS der Browser an jedem
Marker nacheinander anhalten. Nur Touch/coarse-Pointer, damit Maus/
Trackpad-Scrollen auf Desktop exakt wie bisher frei durchläuft.
2026-09-30 (Nachschlag): "mandatory" hat nach dem letzten Marker (Satz 4)
zum bekannten Scroll-Snap-Trap-Verhalten geführt — der Browser wollte
die Scroll-Endposition IMMER exakt auf den nächstgelegenen Marker
zwingen, und da nach Satz 4 kein weiterer Marker kommt, blieb er dort
hängen statt in Akt 2 weiterzuscrollen. "proximity" snapt nur, wenn die
Ruheposition ohnehin schon nah an einem Marker liegt, erzwingt es aber
nie — der "kein Überspringen"-Effekt bleibt trotzdem erhalten, weil
scroll-snap-stop:always unabhängig vom Container-Typ wirkt. Zusätzlich
bekommt der letzte Marker (Satz 4) gar kein "always" mehr, damit danach
garantiert nichts mehr blockiert.
2026-09-30 (Nachschlag 2): Trotzdem gemeldet: "extrem ruckelig, stopt
nicht sauber". Ursache: html hat global scroll-behavior:smooth (siehe
cool-website.css), und scroll-snap-type + scroll-behavior:smooth auf
demselben Container heißt, der Browser animiert das Einrasten am Marker
NOCH EINMAL per CSS obendrauf auf die bereits laufende native Touch-
Momentum-Bewegung — zwei überlagerte Bewegungssysteme statt eines, was
sich als Nachruckeln statt einem glatten Stopp zeigt (trifft am Ende
trotzdem den richtigen Satz, siehe scroll-snap-align/-stop oben, nur
über einen wackligen Zwischenschritt). Fix: scroll-behavior auf Touch
zurück auf "auto" — exakt dasselbe Muster, das cool-website.css bereits
für prefers-reduced-motion nutzt, hier nur für die Touch-Bedingung.
Geprüft: keine In-Page-#anchor-Links im Projekt, und die einzige
scrollIntoView-Nutzung (cool-website.js, Fokus-Handling) erzwingt
bereits explizit behavior:'instant' — unabhängig von dieser Property.
2026-10-01 (Nachschlag 3): Auf einem zweiten Testgerät gemeldet: "stoppt
der nicht mal" bei einem kräftigen Flick, Scrollen wirkt sehr schnell —
anders als das Ruckel-Problem oben betrifft das NICHT das Video, sondern
den nativen Snap selbst. scroll-snap-stop:always soll laut Spec auch bei
proximity jeden Marker zwingend anhalten, aber WebKit/Safari-Mobile hat
dafür bekannte Inkonsistenzen, vor allem bei sehr kleiner Snap-Area (der
Marker war bislang 1x1px). Gegenmaßnahme, nur CSS, kein Engine-Edit:
Snap-Area pro Marker vergrößern (8vh statt 1px), damit der Browser mehr
Fläche hat, um den Snap überhaupt als "nah genug" zu erkennen. Bewusst
KEIN scroll-padding auf html gesetzt — das würde den tatsächlichen
Snap-Landepunkt relativ zum Viewport verschieben und damit die bereits
bestätigt korrekte Satz-Landeposition (top-Werte der Marker) verändern;
scroll-snap-align:start bleibt unverändert am oberen Rand des Markers
verankert, die zusätzliche Höhe erweitert nur den "Einzugsbereich" nach
unten, zwischen diesem und dem nächsten Marker liegen weiterhin 15vh+
Luft (siehe top-Werte unten), also keine Überlappung. */
html { scroll-snap-type: y proximity; scroll-behavior: auto; }
.cw-snap-mark {
position: absolute;
left: 0;
width: 1px;
height: 8vh;
pointer-events: none;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.cw-snap-mark--last { scroll-snap-stop: normal; }
}
/* ---------- Home: pinned Signature-Moment (Akt 4) ---------- */
/* Analog zu .close (Akt 5): Text + Count-Block bleiben während des gesamten
Pins vertikal zentriert und unbewegt — nur die Zahl selbst ändert sich.
Kein eigenes height hier: das Element trägt bereits .cw-stage (JS-gesetzt),
das height:100vh/100svh vorgibt. Ein height:100% hier würde das dank
gleicher Selector-Spezifität und späterem Stylesheet-Load überschreiben
und den Sticky-Pin sprengen — die Stage wurde dadurch so hoch wie die
gesamte Pin-Spanne (180vh statt 100vh), der Text saß erst weit unten im
riesigen Flex-Container und erschien nur schemenhaft nach mehrfachem
Scrollen. Gilt für jede .cw-stage-Sektion mit data-cw-act="pin" (z.B. auch .close). */
.signature {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.2rem;
text-align: center;
padding-inline: var(--cw-gutter);
}
.signature .lede { margin: 0; max-width: 46ch; }
.signature .count-block {
justify-content: center;
margin-top: .2rem;
}
/* ---------- Home: pinned Closing-CTA (Akt 5) ---------- */
/* Kein eigenes height hier — derselbe Grund wie bei .signature:
.cw-stage (JS-gesetzt) gibt bereits height:100vh/100svh vor, ein
height:100% hier würde das überschreiben und den Sticky-Pin sprengen.
.close__inner füllt via flex:1 trotzdem die volle Stage-Höhe. */
.close {
display: flex;
flex-direction: column;
}
.close__inner {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.4rem;
text-align: center;
padding-inline: var(--cw-gutter);
}
.close__inner h2 {
font-family: var(--cw-font-display);
font-size: clamp(2rem, 5vw, 3.2rem);
line-height: 1.12;
margin: 0;
max-width: 20ch;
color: var(--cw-ink);
}
.close__inner .lede { margin: 0; max-width: 46ch; }
.close .cta {
display: inline-block;
font-family: var(--cw-font-text);
font-weight: 600;
font-size: 1.05rem;
color: var(--cw-accent-ink);
background: var(--cw-accent-btn); /* Kontrast-Fix, siehe :root-Kommentar */
border-radius: 999px;
padding: .95rem 2.1rem;
text-decoration: none;
}
/* ---------- Home: Closing-CTA Trace-Faden (Akt 5) ---------- */
/* Fasst die drei in Akt 2 (.stat-row) bereits gezeigten Erfahrungswerte am
Schluss noch einmal leise zusammen — keine neuen Zahlen, keine Konkurrenz
zur Headline. Sitzt oberhalb von .close__inner, daher eigenes
padding-inline statt Vererbung von .close__inner. Die Engine faded
[data-cw-cue] nur über opacity (kein height-Collapse, siehe cool-website.js),
d.h. der reservierte Platz bleibt nach dem Ausblenden bestehen und
.close__inner rückt für den Rest des Pins nicht nach — bewusst in Kauf
genommen statt eigenem JS-Hook nur für dieses Detail. */
.close__trace {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem .9rem;
padding-inline: var(--cw-gutter);
margin-bottom: 1.6rem;
font-family: var(--cw-font-text);
font-size: .78rem;
letter-spacing: .02em;
color: var(--cw-ink-soft);
}
.close__trace-sep {
opacity: .4;
}