/* ---------- ABOUT PAGE ---------- */ /* H1: Lazy-Load-Animation (analog .intro auf Photo-Seite) Block fährt von leicht unten ein, line-height shrinkt von größer auf Endwert */ .about-headline { animation: about-headline-in 3s cubic-bezier(0.05, 0.95, 0.15, 1) 1.2s both; } .is-loading .about-headline { animation: none; } @keyframes about-headline-in { 0% { line-height: 60px; transform: translateY(15px); } 100% { line-height: 50px; transform: translateY(0); } } /* Each word fades in individually, staggered top to bottom via JS */ .about-headline { visibility: hidden; } .about-headline.line-ready { visibility: visible; } .about-headline .line { display: inline; opacity: 0; transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1); } .about-headline .line.is-visible { opacity: 1; } /* After initial load, remove keyframe animation */ .is-loaded .about-headline { animation: none; } /* ---------- LAZY-LOAD REVEAL (rein CSS, is-loading-gesteuert) ---------- Overline-Pill + Absätze faden gestaffelt von oben nach unten ein — dieselbe bewährte Mechanik wie die About-Overline-Pill, komplett ohne JS. Der Text ist via .is-loading verborgen (der startet mit dieser Klasse); sobald die Seite sie entfernt, läuft der Fade. Kein Observer, kein Timing, keine JS↔CSS- Koordination → kein Zufallsfaktor. */ /* Ziel-Zustand + Transition */ .about-content .about-section .overline, .about-content .about-section p { opacity: 1; transform: translateY(0); transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } /* Während des Ladens verborgen (ohne Transition, damit kein Sprung entsteht) */ .is-loading .about-content .about-section .overline, .is-loading .about-content .about-section p { opacity: 0; transform: translateY(8px); transition: none; } /* Staffelung oben → unten, nur beim initialen Laden (Delays fallen weg, sobald body.is-loaded gesetzt ist). Overline führt, Absätze folgen minimal versetzt. Abschnitte 1–10 abgedeckt; alles darüber fadet ohne Extra-Delay sauber ein. Alle Werte < 2.8s (= Zeitpunkt von is-loaded), damit keiner abgeschnitten wird. */ body:not(.is-loaded) .about-content .about-section:nth-child(1) .overline { transition-delay: 1.10s; } body:not(.is-loaded) .about-content .about-section:nth-child(1) p { transition-delay: 1.19s; } body:not(.is-loaded) .about-content .about-section:nth-child(2) .overline { transition-delay: 1.24s; } body:not(.is-loaded) .about-content .about-section:nth-child(2) p { transition-delay: 1.33s; } body:not(.is-loaded) .about-content .about-section:nth-child(3) .overline { transition-delay: 1.38s; } body:not(.is-loaded) .about-content .about-section:nth-child(3) p { transition-delay: 1.47s; } body:not(.is-loaded) .about-content .about-section:nth-child(4) .overline { transition-delay: 1.52s; } body:not(.is-loaded) .about-content .about-section:nth-child(4) p { transition-delay: 1.61s; } body:not(.is-loaded) .about-content .about-section:nth-child(5) .overline { transition-delay: 1.66s; } body:not(.is-loaded) .about-content .about-section:nth-child(5) p { transition-delay: 1.75s; } body:not(.is-loaded) .about-content .about-section:nth-child(6) .overline { transition-delay: 1.80s; } body:not(.is-loaded) .about-content .about-section:nth-child(6) p { transition-delay: 1.89s; } body:not(.is-loaded) .about-content .about-section:nth-child(7) .overline { transition-delay: 1.94s; } body:not(.is-loaded) .about-content .about-section:nth-child(7) p { transition-delay: 2.03s; } body:not(.is-loaded) .about-content .about-section:nth-child(8) .overline { transition-delay: 2.08s; } body:not(.is-loaded) .about-content .about-section:nth-child(8) p { transition-delay: 2.17s; } body:not(.is-loaded) .about-content .about-section:nth-child(9) .overline { transition-delay: 2.22s; } body:not(.is-loaded) .about-content .about-section:nth-child(9) p { transition-delay: 2.31s; } body:not(.is-loaded) .about-content .about-section:nth-child(10) .overline { transition-delay: 2.36s; } body:not(.is-loaded) .about-content .about-section:nth-child(10) p { transition-delay: 2.45s; } /* H1: gleiche horizontale Position & Breite wie .intro auf Photo-Seite Vertikal: 100px Abstand zum Footer (bottom-anchored) Footer sitzt bei bottom:16px → H1 bottom: 16 + 160 = 176px */ .about-headline { position: absolute; bottom: 176px; left: var(--margin-x); width: calc((100vw - 2 * var(--margin-x) - 2 * var(--gutter)) / 3); z-index: 10; margin: 0; font-family: var(--font-head); font-weight: 300; font-style: normal; font-size: 50px; line-height: 50px; letter-spacing: -0.055em; color: var(--ink); } /* Content-Spalte rechts (Spalte 3) Container reicht bis oben & unten an Viewport, damit Text beim Scrollen oben unter Contact-Button und unten unter Footer einfach aus dem Sichtbereich verschwindet. */ .about-content { position: absolute; top: 0; bottom: 0; right: var(--margin-x); width: calc( ((100vw - 2 * var(--margin-x) - 2 * var(--gutter)) / 3) * 2 + var(--gutter) ); overflow-y: auto; font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 17px; color: var(--ink); scrollbar-width: none; /* Initiale Position: Text startet auf Höhe der Menü-Oberkante */ padding-top: 127px; /* Unten Platz, damit letzter Absatz deutlich über dem Blur-Bereich endet */ padding-bottom: 180px; } .about-content::-webkit-scrollbar { display: none; } .about-section + .about-section { margin-top: 28px; } .about-section p { margin: 0 0 12px; } .about-section p:last-child { margin-bottom: 0; } /* Overline-Pill: 1:1 Contact-Button Default-Maße, gefüllt in --accent, Border --accent, Textfarbe --bg */ .overline { display: inline-flex; align-items: center; justify-content: flex-start; height: 21px; padding-top: 2px; padding-right: 4px; padding-bottom: 0; padding-left: 4px; border: 1px solid var(--accent); border-radius: 999px; font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: -0.02em; color: var(--bg); background: var(--accent); margin-bottom: 10px; } /* About-Layout responsive */ /* Footer-Blur-Overlay: Echter Verlauf der Blur-Stärke durch mehrere gestapelte Layer mit unterschiedlichen Blur-Werten. H1 (z-index 10) liegt darüber und wird nicht geblurrt. */ .footer-blur { position: fixed; left: 0; right: 0; bottom: 0; height: 85px; z-index: 9; pointer-events: none; display: none; } .footer-blur.has-overflow { display: block; } /* Hintergrundfarb-Verlauf über dem Blur (0% transparent oben → 100% deckend unten) */ .footer-blur__fade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, var(--bg) 100%); z-index: 1; } .footer-blur__layer { position: absolute; inset: 0; } /* Layer 1 – sehr schwach, fängt ganz oben an */ .footer-blur__layer--1 { backdrop-filter: blur(0.5px); -webkit-backdrop-filter: blur(0.5px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 100%); } /* Layer 2 – mittlere Stärke, beginnt im oberen Drittel */ .footer-blur__layer--2 { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, transparent 15%, #000 45%, #000 100%); mask-image: linear-gradient(to bottom, transparent 15%, #000 45%, #000 100%); } /* Layer 3 – etwas weniger als Contact-Button, ab Mitte des Verlaufs */ .footer-blur__layer--3 { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(to bottom, transparent 35%, #000 60%, #000 100%); mask-image: linear-gradient(to bottom, transparent 35%, #000 60%, #000 100%); } /* ---------- /ABOUT PAGE ---------- */ /* ---------- MOBILE ---------- */ @media (max-width: 768px) { :root { --margin-x: 12px; --gutter: 12px; } .menu { top: auto; bottom: 14px; left: var(--margin-x); } .site-footer { grid-template-columns: 1fr; bottom: 14px; } .footer-cluster--1, .footer-cluster--2 { display: none; } .footer-cluster--3 { grid-column: 1; display: block; text-align: right; } .footer-cluster--3 .copy { display: block; text-align: right; white-space: nowrap; } .test-text { display: none; } .footer-blur { height: 150px; } /* About: Mobile (≤768px) – Menü bricht nach unten um, H1 und Content brechen ebenfalls um: H1 oben, Content darunter, beide statisch positioniert H1: gleiche Position & Breite wie .intro auf Photo-Seite mobile */ .about-headline { position: relative; bottom: auto; left: 0; margin-left: var(--margin-x) !important; margin-right: var(--margin-x) !important; margin-top: 120px; width: auto; font-size: 41px; line-height: 42px; animation-name: about-headline-in-mobile; } @keyframes about-headline-in-mobile { 0% { line-height: 50px; transform: translateY(15px); } 100% { line-height: 42px; transform: translateY(0); } } /* Content rückt unter die H1, volle Breite */ .about-content { position: relative; top: auto; bottom: auto; right: auto; width: auto; margin-left: var(--margin-x) !important; margin-right: var(--margin-x) !important; overflow: visible; margin-top: 50px; margin-bottom: 180px; padding-top: 0; padding-bottom: 0; } } /* ---------- DEBUG: scroll test column ---------- */ .debug-scroll { position: absolute; top: 0; bottom: 0; left: calc(var(--margin-x) + ((100% - var(--margin-x)*2 - var(--gutter)*2) / 3 + var(--gutter)) * 2); width: calc((100% - var(--margin-x)*2 - var(--gutter)*2) / 3); overflow-y: auto; padding: 60px 0 60px; font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 15px; color: var(--ink); } .debug-scroll p { margin: 0 0 12px; }