/* ========================================================= Sticky-Scroll-Sektion — .wz-pin Eigenständig: keine Imports, keine fremden Klassen. Alle Farben laufen über Variablen MIT Fallback — der Block sieht allein gut aus und übernimmt automatisch die Tokens des Zielprojekts, wenn es welche definiert. ========================================================= */ .wz-pin { /* Diese Werte darfst du überschreiben (auf .wz-pin oder :root) */ --wz-pin-ink: var(--petrol, #2C3238); /* Titel, Schrift */ --wz-pin-muted: var(--petrol-60, #6E7B82); /* Fließtext, Label */ --wz-pin-faint: var(--petrol-25, #B9B4AC); /* inaktive Leiste */ --wz-pin-accent: var(--mint, #74E8AE); /* Strich, aktive Leiste */ --wz-pin-surface: var(--white, #ffffff); /* Grundfläche */ --wz-pin-max: var(--container, 75rem); /* Innenbreite */ --wz-pin-ease: var(--ease, cubic-bezier(.22, .61, .36, 1)); /* Scrollweg pro Eintrag. Kleiner = schnellerer Wechsel. */ --wz-pin-step: 72vh; /* Anzahl der Einträge — setzt das JS aus dem DOM. Der Wert hier greift nur, falls das JS fehlt. */ --wz-pin-count: 4; /* Freiraum rechts für die Fortschrittsleiste */ --wz-pin-ghost-inset: 0px; padding-block: var(--wz-pin-pad, 7rem); color: var(--wz-pin-ink); } /* --------------------------------------------------------- Grundzustand: alles läuft schlicht untereinander. Ohne JS bleibt es genau so — der Block ist dann statisch, aber vollständig lesbar. --------------------------------------------------------- */ .wz-pin__stage { position: relative; } .wz-pin__inner { position: relative; width: 100%; max-width: var(--wz-pin-max); margin-inline: auto; padding-inline: 1rem; } .wz-pin__label { display: flex; align-items: center; gap: .75rem; margin: 0 0 3rem; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wz-pin-muted); } .wz-pin__label::before { content: ''; flex: none; width: 28px; height: 2px; background: var(--wz-pin-accent); } .wz-pin__item { position: relative; } .wz-pin__item + .wz-pin__item { margin-top: 4rem; } /* Große Konturziffer als Wasserzeichen. Bewusst KEIN z-index: -1 — je nach Stapelkontext verschwindet die Ziffer sonst hinter der Sektionsfläche. Stattdessen 0 hier und 1 auf Titel/Text. */ .wz-pin__ghost { position: absolute; top: 50%; right: var(--wz-pin-ghost-inset); transform: translateY(-54%); z-index: 0; font-size: clamp(150px, 21vw, 300px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--wz-pin-ink) 17%, transparent); font-variant-numeric: tabular-nums; pointer-events: none; user-select: none; } .wz-pin__title, .wz-pin__text { position: relative; z-index: 1; } .wz-pin__title { margin: 0 0 1.5rem; font-size: clamp(34px, 5vw, 72px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; } .wz-pin__text { margin: 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; color: var(--wz-pin-muted); max-width: 46ch; } /* Fortschrittsleiste — nur im Live-Modus sichtbar */ .wz-pin__rail { display: none; } /* --------------------------------------------------------- Live-Modus: .is-live setzt das JS auf die Sektion selbst. Kein globaler .js-Marker im nötig. --------------------------------------------------------- */ .wz-pin.is-live { position: relative; padding-block: 0; /* eine Bildschirmhöhe zum Stehenbleiben + Scrollweg je Eintrag */ height: calc(100vh + var(--wz-pin-count) * var(--wz-pin-step)); } .wz-pin.is-live .wz-pin__stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: stretch; overflow: hidden; } /* Der Container zentriert sich selbst — das Label liegt im normalen Fluss darüber. Eine frühere Fassung hängte es an top:-22vh und es rutschte auf niedrigen Fenstern aus dem Bild. */ .wz-pin.is-live .wz-pin__inner { display: flex; flex-direction: column; justify-content: center; padding-block: 6vh; } .wz-pin.is-live .wz-pin__label { margin-bottom: 2.5rem; } /* Alle Einträge in dieselbe Rasterzelle — die Höhe richtet sich nach dem längsten, dadurch springt beim Wechsel nichts. */ .wz-pin.is-live .wz-pin__items { display: grid; } .wz-pin.is-live .wz-pin__item { grid-area: 1 / 1; margin-top: 0; opacity: 0; transform: translateY(36px); transition: opacity .35s var(--wz-pin-ease), transform .35s var(--wz-pin-ease); pointer-events: none; } .wz-pin.is-live .wz-pin__item.is-current { opacity: 1; transform: none; pointer-events: auto; } /* Sichtbarkeits-Fallback: Solange die Steuerung nicht übernommen hat, bleibt der erste Eintrag sichtbar. Ohne das stünde eine leere Fläche da, sobald das JS fehlt, veraltet aus dem Cache kommt oder vorher abbricht — Label und Leiste wären sichtbar, der Inhalt nicht. Nicht entfernen, das ist zweimal real passiert. */ .wz-pin__items:not([data-pin-ready]) .wz-pin__item:first-child { opacity: 1; transform: none; } .wz-pin.is-live .wz-pin__rail { display: flex; flex-direction: column; gap: 1rem; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; } .wz-pin.is-live .wz-pin__rail li { display: flex; align-items: center; gap: .75rem; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--wz-pin-faint); font-variant-numeric: tabular-nums; transition: color .35s var(--wz-pin-ease); } .wz-pin.is-live .wz-pin__rail li::after { content: ''; width: 28px; height: 2px; background: currentColor; transition: width .35s var(--wz-pin-ease); } .wz-pin.is-live .wz-pin__rail li.is-current { color: var(--wz-pin-ink); } .wz-pin.is-live .wz-pin__rail li.is-current::after { width: 52px; background: var(--wz-pin-accent); } /* Solange die Leiste sichtbar ist, weicht das Wasserzeichen ihr aus */ .wz-pin.is-live { --wz-pin-ghost-inset: 7rem; } /* --------------------------------------------------------- Optionale Textur: Verlauf + Punktraster + Farbschein. Weglassen, wenn das Zielprojekt einen eigenen Hintergrund hat. --------------------------------------------------------- */ .wz-pin--texture .wz-pin__stage { overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--wz-pin-accent) 9%, var(--wz-pin-surface)) 0%, var(--wz-pin-surface) 62%); } .wz-pin--texture .wz-pin__stage::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, color-mix(in srgb, var(--wz-pin-ink) 20%, transparent) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 22%, transparent 88%); mask-image: linear-gradient(180deg, #000 0%, #000 22%, transparent 88%); } .wz-pin--texture .wz-pin__stage::after { content: ''; position: absolute; top: -14%; right: -6%; width: 42rem; height: 42rem; border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--wz-pin-accent) 30%, transparent) 0%, color-mix(in srgb, var(--wz-pin-accent) 9%, transparent) 45%, transparent 70%); } .wz-pin--texture .wz-pin__inner { position: relative; z-index: 1; } /* --------------------------------------------------------- Schmale Fenster: Leiste weg, kürzere Schritte --------------------------------------------------------- */ @media (max-width: 991px) { .wz-pin { --wz-pin-pad: 4.5rem; } .wz-pin.is-live { --wz-pin-step: 60vh; --wz-pin-ghost-inset: 0px; /* ohne Leiste kein Freiraum nötig */ } .wz-pin.is-live .wz-pin__rail { display: none; } } @media (max-width: 767px) { .wz-pin { --wz-pin-pad: 3.5rem; } } /* --------------------------------------------------------- Reduzierte Bewegung: JS setzt .is-static, das hebt den Live-Modus wieder auf. --------------------------------------------------------- */ .wz-pin.is-static { height: auto; padding-block: var(--wz-pin-pad, 7rem); } .wz-pin.is-static .wz-pin__stage { position: static; height: auto; display: block; overflow: visible; } .wz-pin.is-static .wz-pin__inner { display: block; padding-block: 0; } .wz-pin.is-static .wz-pin__label { margin-bottom: 3rem; } .wz-pin.is-static .wz-pin__items { display: block; } .wz-pin.is-static .wz-pin__item { opacity: 1; transform: none; transition: none; pointer-events: auto; } .wz-pin.is-static .wz-pin__item + .wz-pin__item { margin-top: 4rem; } .wz-pin.is-static .wz-pin__rail { display: none; }