@font-face{ font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/archivo-black.woff2') format('woff2'); } @font-face{ font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/instrument-serif-regular.woff2') format('woff2'); } @font-face{ font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url('assets/fonts/instrument-serif-italic.woff2') format('woff2'); } @font-face{ font-family:'Caveat'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/caveat-600.woff2') format('woff2'); } :root{ --bg: rgb(49,9,17); --cream: #f2e9dd; --gold: #c98a3a; --gold-soft: rgba(201,138,58,0.35); } *{margin:0;padding:0;box-sizing:border-box;} html,body{height:100%;background:var(--bg);} /* Horizontalen Ueberhang am Wurzelelement kappen — NICHT an . `overflow` (auch `clip`) an macht Safari/iPad zum Scroll-Container und bricht dort jedes `position:sticky` im Inhalt (Bilder-Scroll-Hero „funktioniert am Handy, tot auf iPad/MacBook"). An ist sticky sicher. */ html{ overflow-x:hidden; } /* Kein globales scroll-snap: kollidiert mit dem transform-Pin von ScrollStack (Judder / Grey-Bar / „springt"). Snap nur lokal wo gebraucht (Reviews mobil). */ body{ font-family:'Archivo Black', Impact, sans-serif; } img{max-width:100%;} /* ---------- Card Nav ---------- */ /* Vanilla + GSAP port of React Bits' CardNav (MIT). */ .card-nav-container{ position:fixed; top:2em; left:50%; transform:translateX(-50%); width:90%; max-width:760px; z-index:100; box-sizing:border-box; } /* Echtes Liquid Glass (adaptiert von 21st.dev @suraj-xd/liquid-glass): fast farbloser Glaskörper — der Effekt kommt aus backdrop-filter (Blur + Sättigung + Brechung), der scharfen Lichtkante und dem Specular-Sheen, NICHT aus einer weißen Füllung. Vordergrund + Mikro-Tönung folgen dem Section-Hintergrund (JS setzt .is-light / Default = auf dunkel). */ .card-nav{ --nav-fg: var(--cream); --nav-tint-1: rgba(255,255,255,0.10); --nav-tint-2: rgba(255,255,255,0.02); --nav-border: rgba(255,255,255,0.42); --nav-edge: rgba(255,255,255,0.55); display:block; height:60px; background:linear-gradient(180deg, var(--nav-tint-1), var(--nav-tint-2)); backdrop-filter:blur(16px) saturate(1.7) brightness(1.12) contrast(1.04); -webkit-backdrop-filter:blur(16px) saturate(1.7) brightness(1.12) contrast(1.04); border:1px solid var(--nav-border); border-radius:16px; box-shadow: 0 14px 40px rgba(20,4,7,0.16), inset 0 1px 0 var(--nav-edge), inset 0 -16px 26px -18px rgba(255,255,255,0.14); position:relative; overflow:hidden; will-change:height; transition:background 0.45s ease, border-color 0.45s ease; } .card-nav.is-light{ --nav-fg: var(--bg); --nav-tint-1: rgba(255,255,255,0.22); --nav-tint-2: rgba(255,255,255,0.06); --nav-border: rgba(255,255,255,0.7); --nav-edge: rgba(255,255,255,0.85); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .card-nav{ background:rgba(242,233,221,0.9); } .card-nav.is-light{ background:rgba(242,233,221,0.95); } } .card-nav__sheen{ position:absolute; top:0; left:0; right:0; height:60px; border-radius:inherit; pointer-events:none; z-index:1; background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,0.6) 48%, transparent 60%); background-size:240% 100%; mix-blend-mode:screen; opacity:0.7; animation:navSheen 7.5s ease-in-out infinite; } @keyframes navSheen{ 0%{ background-position:140% 0; } 55%,100%{ background-position:-40% 0; } } @media (prefers-reduced-motion: reduce){ .card-nav__sheen{ animation:none; opacity:0.3; } } .card-nav-actions{ display:flex; align-items:center; gap:0.5rem; } .lang-toggle{ border:1px solid color-mix(in srgb, var(--nav-fg, var(--cream)) 42%, transparent); background:color-mix(in srgb, var(--nav-fg, var(--cream)) 10%, transparent); color:var(--nav-fg, var(--cream)); border-radius:9px; height:70%; min-width:2.4rem; padding:0 0.55rem; font-family:'Archivo Black', Impact, sans-serif; font-size:0.72rem; letter-spacing:0.06em; cursor:pointer; transition:background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .lang-toggle:hover, .lang-toggle:focus-visible{ background:var(--gold); color:var(--bg); border-color:var(--gold); } .lang-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; } /* Zweisprachig: nur die aktive Sprache zeigen. */ :root:not([data-lang="en"]) .i18n-en{ display:none !important; } :root[data-lang="en"] .i18n-de{ display:none !important; } /* Nur fuer Screenreader/Crawler — visuell entfernt, kein Layout-Effekt. Traegt die semantische Ueberschrift dort, wo das Design keine sichtbare H1 vorsieht (SEO-Ebene, keine gestalterische Aenderung). */ .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .card-nav-top{ position:absolute; top:0; left:0; right:0; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0.5rem 0.5rem 0.5rem 1.2rem; z-index:2; } .hamburger-menu{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; gap:6px; } .hamburger-line{ width:24px; height:2px; background-color:var(--nav-fg, var(--cream)); transition:transform 0.25s ease, opacity 0.2s ease, background-color 0.4s ease; transform-origin:50% 50%; } .hamburger-menu.is-open .hamburger-line:first-child{ transform:translateY(4px) rotate(45deg); } .hamburger-menu.is-open .hamburger-line:last-child{ transform:translateY(-4px) rotate(-45deg); } .logo-container{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } /* Leiste oben: „NOVEX" bleibt als Wort lesbar, aber das erste N ist das NOVEX-Monogramm — wie ein Buchstabe behandelt (gleiche Cap-Höhe, gleiche Grundlinie). Farbe folgt currentColor → wechselt mit dem Nav-Theme (creme auf dunkel, dunkel auf hell), inkl. Übergang. */ .logo{ font-family:'Archivo Black', Impact, sans-serif; font-size:1.05rem; letter-spacing:0.02em; color:var(--nav-fg, var(--cream)); text-decoration:none; text-shadow:0 1px 8px rgba(0,0,0,0.18); transition:color 0.4s ease; white-space:nowrap; } /* Inline-SVG (kein externes Bild, keine Maske) → kann nicht 404en, färbt sich über fill:currentColor mit dem Nav-Theme. */ .logo__n{ display:inline-block; width:0.9em; height:0.9em; /* Glyph = 78,7% der Box, 9% Luft unten → visuell so hoch wie die OVEX-Versalien, sitzt auf der Grundlinie */ vertical-align:-0.08em; margin-right:0.03em; overflow:visible; fill:currentColor; /* Kein filter:drop-shadow() hier — Safari verrechnet die Filter-Region mit dem negativen scale() der inneren -Matrix und rendert das Monogramm dann verzerrt. Der text-shadow auf .logo traegt die Tiefe. */ } .logo__n path{ fill:currentColor; } .card-nav-cta-button{ background-color:var(--bg); color:var(--cream); border:none; border-radius:9px; padding:0 1.1rem; height:70%; display:inline-flex; align-items:center; font-family:'Archivo Black', Impact, sans-serif; font-size:0.78rem; letter-spacing:0.03em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background-color 0.3s ease; } .card-nav-cta-button:hover{ background-color:var(--gold); } .card-nav-content{ position:absolute; left:0; right:0; top:60px; bottom:0; padding:0.5rem; display:flex; align-items:stretch; gap:10px; visibility:hidden; pointer-events:none; } .card-nav.is-open .card-nav-content{ visibility:visible; pointer-events:auto; } .nav-card{ flex:1 1 0; min-width:0; border-radius:10px; position:relative; display:flex; flex-direction:column; padding:14px 16px; gap:8px; background:var(--bg); color:var(--cream); } .nav-card:nth-child(2){ background:var(--gold); color:var(--bg); } .nav-card-label{ font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-size:1.2rem; } .nav-card-links{ margin-top:auto; display:flex; flex-direction:column; gap:4px; } .nav-card-link{ display:inline-flex; align-items:center; gap:0.42em; font-family:'Archivo Black', Impact, sans-serif; font-size:0.78rem; letter-spacing:0.01em; text-transform:uppercase; text-decoration:none; color:inherit; transition:opacity 0.3s ease; } /* Pfeil als Masken-Icon (currentColor) — kein Unicode ↗ mehr, das iOS als blaues Emoji rendert. */ .nav-card-link::before{ content:""; flex:0 0 auto; width:0.72em; height:0.72em; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 16 L16.5 7.5 M9.5 7 H17 V14.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 16 L16.5 7.5 M9.5 7 H17 V14.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } .nav-card-link:hover{ opacity:0.7; } .nav-card-link[aria-current="page"]{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; } .nav-card:nth-child(2) .nav-card-link[aria-current="page"]{ color:var(--bg); } @media (max-width: 780px){ .card-nav-container{ top:1.2em; } /* Hochkant: Karten stapeln in natürlicher Höhe, kein 50/50-Split — sonst quetscht die vierzeilige „Seite"-Karte und ragt unter „Rechtliches". */ .card-nav-content{ flex-direction:column; overflow-y:auto; } .nav-card{ flex:0 0 auto; min-height:0; } .nav-card-links{ margin-top:8px; } /* Hochkant: DE wandert direkt neben die Hamburger-Striche, damit die Leiste nicht zwischen NOVEX und ANFRAGE gequetscht wird. */ .card-nav-top .lang-toggle{ position:absolute; left:calc(1.2rem + 24px + 0.7rem); top:50%; transform:translateY(-50%); height:1.9rem; } .card-nav-actions{ gap:0; } } /* ---------- Specular Button ---------- */ /* React Bits' actual SpecularButton (MIT) — real WebGL shader via `ogl`, loaded as an ES module (see the module script near the end of index.html). No CSS approximation this time; this is the genuine component, re-tinted to NOVEX tokens via its own colour props. */ .specular-button{ position:relative; display:inline-flex; align-items:center; justify-content:center; margin-top:2.4rem; border:none; border-radius:999px; padding:1.05rem 2.3rem; font-family:'Archivo Black', Impact, sans-serif; font-size:0.85rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--cream); background:rgba(242,233,221,0.06); backdrop-filter:blur(6px); cursor:pointer; transition:transform 0.15s ease; } .specular-button:hover{ transform:translateY(-1px); } .specular-button:active{ transform:scale(0.97); } .specular-button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; } .specular-button__fx{ position:absolute; inset:-20px; pointer-events:none; z-index:1; } .specular-button__fx canvas{ display:block; width:100%; height:100%; } .specular-button__label{ position:relative; z-index:2; } @media (max-width: 780px){ .specular-button{ margin-top:1.6rem; padding:0.9rem 1.8rem; font-size:0.75rem; } } .hero__content{ position:relative; z-index:2; padding-left:4.5%; max-width:72%; } .hero{ position:relative; width:100%; height:100vh; min-height:640px; background: var(--bg); overflow:hidden; display:flex; align-items:center; } .hero__statue{ position:absolute; top:0; right:0; height:100%; width:30%; background-image:url('assets/statue.jpg'); background-size:cover; background-position:center right; background-repeat:no-repeat; } .hero__fade{ position:absolute; top:0; left:0; height:100%; width:30%; right:0; margin-left:auto; background: linear-gradient(to right, var(--bg) 0%, rgba(49,9,17,0) 30%); pointer-events:none; } .hero__headline{ font-family:'Archivo Black', Impact, sans-serif; font-weight:900; color:var(--cream); text-transform:uppercase; font-size:clamp(2.6rem, 10.6vw, 13rem); line-height:0.92; letter-spacing:-0.01em; } @media (max-width: 780px){ /* Hochkant: Gesicht der Statue trägt die obere Bildhälfte, Headline + Button sitzen unten links in der Ecke über einem Lesbarkeits-Verlauf. */ .hero{ align-items:flex-end; padding-top:0; padding-bottom:9vh; } .hero__statue{ width:100%; opacity:0.62; background-position:50% 22%; } .hero__fade{ width:100%; right:auto; margin-left:0; background:linear-gradient( 180deg, rgba(49,9,17,0.04) 0%, rgba(49,9,17,0.04) 32%, rgba(49,9,17,0.5) 54%, rgba(49,9,17,0.88) 76%, var(--bg) 100%); } .hero__content{ max-width:100%; padding-left:7%; padding-right:7%; } .hero__headline{ font-size:clamp(2.4rem, 11.5vw, 4rem); } } /* ---------- Section transition: hero (dark) -> gallery (cream) ---------- */ .hero__transition{ position:relative; height:22vh; min-height:150px; width:100%; background:linear-gradient(to bottom, var(--bg) 0%, var(--cream) 100%); overflow:hidden; } .hero__transition::before{ content:''; position:absolute; inset:0; background: radial-gradient(60% 90% at 18% 100%, var(--gold-soft) 0%, rgba(201,138,58,0) 60%), radial-gradient(50% 80% at 85% 100%, rgba(242,233,221,0.4) 0%, rgba(242,233,221,0) 65%); mix-blend-mode:soft-light; pointer-events:none; } /* Curved Loop — vanilla port of React Bits' CurvedLoop (MIT, SVG textPath + rAF). A SIBLING of .hero__transition, not a child — it must sit ON TOP of the transition band, unclipped by that band's own overflow:hidden (that was the earlier "glitches off-screen" bug: the parent's clip was cutting the curve). Pulled up with a negative margin so it visually overlaps the lower part of the gradient band. */ .curved-loop-jacket{ position:relative; z-index:10; /* über dem Hero→Gallery-Übergang */ width:100%; height:13vh; min-height:84px; margin-top:-12vh; display:flex; align-items:center; justify-content:center; overflow-x:clip; /* horizontaler Überhang wird geschnitten → kein Viewport-Spill */ overflow-y:visible; /* Kurve darf vertikal überstehen */ cursor:grab; pointer-events:none; } .curved-loop-jacket.is-dragging{ cursor:grabbing; } .curved-loop-svg{ width:100%; height:220%; overflow:visible; display:block; fill:var(--cream); font-family:'Archivo Black', Impact, sans-serif; font-weight:900; text-transform:uppercase; line-height:1; font-size:clamp(1.7rem, 3.8vw, 3.1rem); letter-spacing:0.01em; -webkit-text-stroke:1.4px var(--cream); user-select:none; -webkit-user-select:none; } @media (prefers-reduced-motion: reduce){ .curved-loop-jacket{ cursor:auto; } } @media (max-width: 780px){ /* Hochkant: das SVG skaliert auf die schmale Viewport-Breite herunter (viewBox 1440) — deshalb muss die User-Space-Schrift deutlich größer sein, damit "VERTRAUT VON VIELEN" lesbar bleibt. */ .curved-loop-jacket{ height:11vh; min-height:78px; margin-top:-10vh; } .curved-loop-svg{ font-size:6rem; -webkit-text-stroke-width:2.2px; } } /* ---------- Selected work: TextPressure heading + Scroll Stack ---------- */ /* Scroll Stack = vanilla port of React Bits' ScrollStack (MIT) — driven by native window scroll + rAF instead of Lenis, consistent with the rest of this site's motion code. Heading = a vanilla per-character "pressure" effect (scale grows near the pointer) adapted from React Bits' TextPressure — that component drives font-variation-settings on a variable font, but this site's display face (Archivo Black) has no variable axes, so the interaction is reproduced with a per-character transform:scale instead. */ .stack-section{ position:relative; background:var(--cream); padding:10vh 0 14vh; overflow:hidden; } .stack-heading{ position:relative; z-index:2; margin:0 auto 6vh; text-align:center; font-family:'Archivo Black', Impact, sans-serif; font-weight:900; text-transform:uppercase; color:var(--bg); font-size:clamp(1.8rem, 6vw, 5rem); line-height:1; letter-spacing:-0.01em; } .stack-heading span{ display:inline-block; transition:transform 0.12s ease-out; } /* Dancing-letters hover on the section title (concept adapted from 21st.dev's "Dancing Letters": per-character staggered bounce on hover). Reuses the same per-character spans the pointer-pressure script already builds. */ .stack-heading:hover span{ animation:dance 0.6s ease-in-out; animation-delay:calc(var(--i, 0) * 0.035s); } @keyframes dance{ 0%, 100%{ transform:translateY(0) rotate(0deg); } 35%{ transform:translateY(-0.35em) rotate(-4deg); } 65%{ transform:translateY(0.05em) rotate(3deg); } } /* Dancing Letters (Archetyp 21st.dev @chamaac/dancing-letters): jeder Buchstabe des Creativity-Titels spielt bei Hover/Tap eine eigene Feder-Animation. Spans/Trigger kommen aus main.js. */ .dl-word{ display:inline-block; white-space:nowrap; /* Wort bleibt zusammen, obwohl jeder Buchstabe inline-block ist */ } .dl{ display:inline-block; will-change:transform; } .dl.is-dancing{ animation:dlPop var(--dl-dur, 0.6s) cubic-bezier(.34,1.56,.64,1); } @keyframes dlPop{ 0% { transform:translate(0,0) rotate(0) scale(1); } 35% { transform:translate(var(--dl-dx, 0), var(--dl-dy, -0.3em)) rotate(var(--dl-dr, -8deg)) scale(1.16); } 70% { transform:translate(calc(var(--dl-dx, 0) * -0.3), 0.05em) rotate(calc(var(--dl-dr, -8deg) * -0.4)) scale(0.96); } 100% { transform:translate(0,0) rotate(0) scale(1); } } @media (prefers-reduced-motion: reduce){ .dl.is-dancing{ animation:none; } } .stack-figure{ position:absolute; z-index:1; opacity:0.85; mix-blend-mode:multiply; pointer-events:none; } .stack-figure img{ display:block; width:100%; height:auto; } .stack-figure--tigers{ left:3vw; bottom:4vh; width:13vw; } .stack-figure--pegasus{ right:3vw; top:2vh; width:11vw; } @media (max-width: 900px){ /* Hochkant: Figuren bleiben als kleine Eck-Akzente sichtbar. */ /* Hochkant: Sektion unten verlängern, damit der Karten-Pin ganz ausläuft, bevor die Tiger-Figur kommt — sonst überdeckt die letzte Karte sie. */ .stack-section{ padding-bottom:22vh; } .stack-figure{ opacity:0.65; } .stack-figure--tigers{ left:-5vw; bottom:2.5vh; width:23vw; } .stack-figure--pegasus{ right:1vw; top:1vh; width:16vw; } } @media (max-width: 520px){ .stack-figure--tigers{ width:30vw; } .stack-figure--pegasus{ width:18vw; } } /* Scroll Stack = vanilla port of React Bits' ScrollStack (MIT). Original- Effekt (transform-Pin: translateY + scale). Stoppt am sauberen Endframe (siehe main.js, `pinEnd`) und wird über eine eigene rAF-Glättung flüssiger (Ziel/Ist-Lerp, kein Frame-Snap). */ .scroll-stack-inner{ position:relative; z-index:2; max-width:1100px; margin:0 auto; padding:0 6vw; } .scroll-stack-card{ display:block; position:relative; height:64vh; min-height:360px; width:100%; margin-bottom:100px; border-radius:32px; overflow:hidden; background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:0 30px 60px -20px rgba(20,4,7,0.4); transform-origin:top center; will-change:transform; backface-visibility:hidden; } .scroll-stack-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,4,7,0.75) 0%, rgba(20,4,7,0.14) 42%, rgba(20,4,7,0) 62%); } .scroll-stack-card:last-child{ margin-bottom:0; } .scroll-stack-card__title{ position:absolute; left:2rem; right:2rem; bottom:2rem; z-index:2; color:var(--cream); text-transform:uppercase; font-size:clamp(1.1rem, 2.4vw, 1.8rem); letter-spacing:0.01em; } .scroll-stack-end{ width:100%; height:1px; } @media (max-width: 780px){ .scroll-stack-card{ height:46vh; min-height:280px; margin-bottom:56px; border-radius:20px; } } /* ---------- Grove: generativer Baum ---------- */ /* Eigene Canvas-2D-Interpretation des Archetyps von 21st.dev/threeui „generative-tree" (Quelle Pro-gated): rekursiver Ast-Baum, wächst beim Scroll-in, Sienna→Gold über die Tiefe, sanfte Zeiger-Böe, treibende Motes. Kein geschützter Shader-Code — Layout/Belichtung/Bewegung übernommen. */ .grove{ position:relative; background:var(--bg); min-height:78vh; display:flex; align-items:flex-end; justify-content:center; padding:10vh 6vw 8vh; overflow:hidden; } .grove__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; } .grove::before{ /* Dämmerungshimmel: Ansatz-Creme → Bordeaux */ content:''; position:absolute; top:0; left:0; right:0; height:22vh; background:linear-gradient(180deg, var(--cream) 0%, rgba(49,9,17,0) 100%); z-index:1; pointer-events:none; } .grove__line{ position:relative; z-index:2; max-width:26ch; text-align:center; color:var(--cream); font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-size:clamp(1.3rem, 3vw, 2.1rem); line-height:1.32; text-shadow:0 2px 24px rgba(0,0,0,0.55); } .grove.is-visible .handwrite__underline path{ stroke-dashoffset:0; } /* ---------- Discover: Flowing Menu ---------- */ /* Vanilla + GSAP port of React Bits' FlowingMenu (MIT). */ .discover{ background:var(--bg); padding:10vh 0 2vh; } .discover__eyebrow{ font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-size:1.15rem; color:var(--gold); text-align:center; margin-bottom:4vh; } .menu-wrap{ width:100%; height:56vh; min-height:320px; overflow:hidden; } .menu{ display:flex; flex-direction:column; height:100%; list-style:none; } .menu__item{ flex:1; position:relative; overflow:hidden; text-align:center; border-top:1px solid rgba(242,233,221,0.18); } .menu__item:first-child{ border-top:none; } .menu__item-link{ display:flex; align-items:center; justify-content:center; height:100%; position:relative; z-index:1; cursor:pointer; text-transform:uppercase; text-decoration:none; white-space:nowrap; font-family:'Archivo Black', Impact, sans-serif; font-weight:900; font-size:clamp(1.4rem, 5vw, 3.2rem); color:var(--cream); } .marquee{ position:absolute; top:0; left:0; overflow:hidden; width:100%; height:100%; pointer-events:none; transform:translate3d(0,101%,0); } .marquee__inner-wrap{ height:100%; width:100%; overflow:hidden; } .marquee__inner{ display:flex; align-items:center; position:relative; height:100%; width:fit-content; will-change:transform; background:var(--gold); } .marquee__part{ display:flex; align-items:center; flex-shrink:0; } .marquee__part span{ white-space:nowrap; text-transform:uppercase; font-family:'Archivo Black', Impact, sans-serif; font-weight:900; font-size:clamp(1.4rem, 5vw, 3.2rem); line-height:1; padding:0 1.2vw; color:var(--bg); } .marquee__img{ width:180px; height:8vh; min-height:56px; margin:0 1.6vw; border-radius:999px; background-size:cover; background-position:center; } @media (max-width: 780px){ .menu-wrap{ height:auto; } /* min-height auf den Link, nicht aufs item — sonst sitzt der Text oben statt mittig im Balken (item hat keine feste Höhe, height:100% = auto). */ .menu__item{ min-height:0; } .menu__item-link{ font-size:1.5rem; min-height:96px; } .marquee__img{ width:110px; height:6vh; min-height:44px; } } /* ---------- Ansatz (editorial statement) ---------- */ .ansatz{ position:relative; background:var(--cream); padding:14vh 8vw 16vh; overflow:hidden; } .ansatz__eyebrow{ font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-size:1.15rem; color:var(--gold); margin-bottom:1.6rem; } .ansatz__quote{ max-width:20ch; font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-weight:400; color:var(--bg); font-size:clamp(1.9rem, 4.4vw, 3.6rem); line-height:1.16; letter-spacing:-0.005em; } .ansatz__quote .reveal-line{ display:block; overflow:hidden; } .ansatz__quote .reveal-line span{ display:inline-block; transform:translateY(110%); transition:transform 0.9s cubic-bezier(.16,1,.3,1); transition-delay:var(--d, 0s); } .ansatz.is-visible .ansatz__quote .reveal-line span{ transform:translateY(0); } .ansatz__body{ margin-top:6.5rem; max-width:52ch; margin-left:auto; font-family:Georgia, 'Times New Roman', serif; font-size:1.05rem; line-height:1.7; color:rgba(49,9,17,0.82); } /* "sichtbares" + Löwe sind eine Einheit: der Löwe hängt unter dem Wort, die Mähne überlappt es leicht — liegt aber hinter dem Text. */ .ansatz__vis{ position:relative; z-index:1; font-style:inherit; white-space:nowrap; } .ansatz__ornament{ position:absolute; left:50%; top:-0.12em; width:8.4em; max-width:none; transform:translateX(-50%); opacity:0.9; z-index:-1; pointer-events:none; } /* Handwriting-Text-Komponente (Archetyp 21st.dev @davailospirasto/handwriting-text): Caveat-Wort in voller Gold-Füllung, wischt links→rechts ein wie beim Schreiben; wechselt das Wort. Robust — kein SVG-Messen. */ .hw{ margin:1.4rem 0 2.8rem; min-height:clamp(3.2rem, 9vw, 6.5rem); } .hw__word{ display:inline-block; font-family:'Caveat', cursive; font-weight:600; font-size:clamp(3rem, 9vw, 6rem); line-height:1; color:var(--gold); -webkit-clip-path:inset(0 100% 0 0); clip-path:inset(0 100% 0 0); } .hw__word.is-writing{ animation:hwReveal 1.05s cubic-bezier(.5,0,.3,1) forwards; } @keyframes hwReveal{ to{ -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); } } @media (prefers-reduced-motion: reduce){ .hw__word{ -webkit-clip-path:none; clip-path:none; } .hw__word.is-writing{ animation:none; } } /* Handwriting accent (concept adapted from 21st.dev's "Handwriting Text": a script word with a hand-drawn underline that draws itself on scroll). */ .handwrite{ position:relative; display:inline-block; font-family:'Caveat', cursive; font-weight:600; color:var(--gold); font-size:1.35em; padding:0 0.1em; } .handwrite__underline{ position:absolute; left:-2%; bottom:-0.28em; width:104%; height:0.5em; overflow:visible; } .handwrite__underline path{ fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; stroke-dasharray:260; stroke-dashoffset:260; transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1) 0.3s; } .ansatz.is-visible .handwrite__underline path{ stroke-dashoffset:0; } @media (max-width: 780px){ .ansatz{ padding:10vh 6vw 18vh; } .ansatz__body{ margin-left:0; } /* Hochkant: Löwe bleibt sichtbar, nur kleiner — hängt weiter unter dem Wort. */ .ansatz__ornament{ width:5.6em; top:-0.05em; } } /* ---------- Kontakt / CTA ---------- */ .kontakt{ position:relative; background:var(--bg); color:var(--cream); padding:16vh 8vw; text-align:center; overflow:hidden; } .kontakt::before{ content:''; position:absolute; inset:0; background:radial-gradient(65% 90% at 50% 0%, rgba(201,138,58,0.16) 0%, rgba(201,138,58,0) 60%); pointer-events:none; } .kontakt__eyebrow{ position:relative; font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-size:1.15rem; color:var(--gold); margin-bottom:1.4rem; } .kontakt__headline{ position:relative; font-family:'Archivo Black', Impact, sans-serif; text-transform:uppercase; font-size:clamp(2rem, 6vw, 4.6rem); line-height:1.02; letter-spacing:-0.01em; max-width:16ch; margin:0 auto; } .kontakt__cta{ position:relative; display:inline-flex; align-items:center; gap:0.6rem; margin-top:3rem; padding:1.05rem 2.2rem; border:1px solid rgba(242,233,221,0.4); border-radius:999px; color:var(--cream); text-decoration:none; font-family:'Archivo Black', Impact, sans-serif; font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; transition:background 0.35s ease, color 0.35s ease, border-color 0.35s ease; } .kontakt__cta:hover, .kontakt__cta:focus-visible{ background:var(--gold); border-color:var(--gold); color:var(--bg); } .kontakt__cta:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; } .kontakt__cta-wrap{ position:relative; display:inline-block; margin-top:3rem; } .kontakt__cta--book{ margin-top:0; background:var(--gold); border-color:var(--gold); color:var(--bg); padding:1.15rem 2.6rem; font-size:0.95rem; } .kontakt__cta--book:hover, .kontakt__cta--book:focus-visible{ background:transparent; color:var(--cream); } /* Scribble arrow (concept from kaix.framer.website's hand-drawn arrow pointing at its CTA) — draws itself on scroll-into-view via stroke-dashoffset, same technique as the handwriting underline above. */ .kontakt__scribble{ position:absolute; right:calc(100% + 0.5rem); bottom:-2.2rem; width:9rem; height:5.2rem; transform:scaleX(-1); } .kontakt__scribble path{ fill:none; stroke:var(--cream); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } .kontakt__scribble path:first-child{ stroke-dasharray:150; stroke-dashoffset:150; transition:stroke-dashoffset 0.9s cubic-bezier(.16,1,.3,1) 0.2s; } .kontakt__scribble-head{ stroke-dasharray:40; stroke-dashoffset:40; transition:stroke-dashoffset 0.4s ease 1.05s; } .kontakt.is-visible .kontakt__scribble path:first-child{ stroke-dashoffset:0; } .kontakt.is-visible .kontakt__scribble-head{ stroke-dashoffset:0; } .kontakt__mail{ position:relative; display:block; margin-top:3vh; color:rgba(242,233,221,0.6); font-family:Georgia, 'Times New Roman', serif; font-size:0.95rem; text-decoration:none; } .kontakt__mail:hover{ color:var(--cream); } @media (max-width: 780px){ .kontakt__scribble{ display:none; } } /* ---------- Let's Talk (kaix.framer.website 1:1, Hintergrund im Rot der Seite) ---------- */ /* Riesen-Wortmark doppelt mit vertikalem Echo + Licht-Bloom oben, Portrait- Cutout mittig, Script „(book a call)" + Scribble-Pfeil unten links. Layout/Belichtung/Rhythmus von kaix übernommen, kein geschütztes Asset. */ .lettalk{ position:relative; width:100%; margin-top:7vh; padding-bottom:13vh; isolation:isolate; } .lettalk__bloom{ position:absolute; top:-3vh; left:50%; width:78%; height:20vh; transform:translateX(-50%); background:radial-gradient(60% 100% at 50% 0%, rgba(242,233,221,0.5) 0%, rgba(242,233,221,0) 72%); filter:blur(8px); pointer-events:none; z-index:0; } .lettalk__stack{ position:relative; width:100%; text-align:center; line-height:0.8; } .lettalk__word{ position:relative; z-index:2; display:block; font-family:'Archivo Black', Impact, sans-serif; text-transform:uppercase; color:var(--cream); font-size:clamp(3rem, 15.5vw, 12.5rem); letter-spacing:-0.02em; } .lettalk__word--ghost{ position:absolute; left:0; right:0; top:-0.14em; z-index:1; color:rgba(242,233,221,0.30); filter:blur(3px); } .lettalk__portrait{ position:absolute; top:50%; left:50%; width:min(280px, 34vw); aspect-ratio:1 / 1.12; transform:translate(-50%, -46%) rotate(-4deg); border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -18px rgba(0,0,0,0.55); z-index:3; filter:grayscale(1) contrast(1.05); } .lettalk__portrait img{ width:100%; height:100%; object-fit:cover; display:block; } /* === EXPERIMENT: lettalk-peek — Revert-Wort: „peek raus" =================== Beim Hover/Tap über dem Portrait wird das Bild an der Zeiger-Stelle leicht durchscheinend, sodass „LET'S TALK" darunter durchblitzt. --peek (0..1) wird von main.js geglättet gesetzt; bei --peek:0 ist die Maske voll opak (Effekt aus). Zum Rückbau: diesen Block + den JS-Block (gleicher Marker) löschen, sonst nichts. */ .lettalk__portrait{ --mx:50%; --my:50%; --peek:0; -webkit-mask-image:radial-gradient(circle 130px at var(--mx) var(--my), rgba(0,0,0, calc(1 - 0.5 * var(--peek))) 0%, rgba(0,0,0, calc(1 - 0.5 * var(--peek))) 14%, #000 58%); mask-image:radial-gradient(circle 130px at var(--mx) var(--my), rgba(0,0,0, calc(1 - 0.5 * var(--peek))) 0%, rgba(0,0,0, calc(1 - 0.5 * var(--peek))) 14%, #000 58%); } @media (max-width: 780px){ .lettalk__portrait{ -webkit-mask-image:radial-gradient(circle 22vw at var(--mx) var(--my), rgba(0,0,0, calc(1 - 0.5 * var(--peek))) 0%, rgba(0,0,0, calc(1 - 0.5 * var(--peek))) 14%, #000 58%); mask-image:radial-gradient(circle 22vw at var(--mx) var(--my), rgba(0,0,0, calc(1 - 0.5 * var(--peek))) 0%, rgba(0,0,0, calc(1 - 0.5 * var(--peek))) 14%, #000 58%); } } /* === /EXPERIMENT lettalk-peek ============================================ */ .lettalk__book{ position:absolute; left:4vw; bottom:2vh; z-index:4; color:var(--cream); text-decoration:none; font-family:'Caveat', cursive; font-weight:600; font-size:clamp(1.15rem, 2.6vw, 1.85rem); } .lettalk__book:hover, .lettalk__book:focus-visible{ color:var(--gold); } .lettalk__arrow{ position:absolute; left:calc(4vw + 9.5rem); bottom:3vh; width:70px; height:74px; overflow:visible; z-index:4; } .lettalk__arrow path{ fill:none; stroke:var(--cream); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:150; stroke-dashoffset:150; transition:stroke-dashoffset 0.9s cubic-bezier(.16,1,.3,1) 0.25s; } .kontakt.is-visible .lettalk__arrow path{ stroke-dashoffset:0; } @media (max-width: 780px){ /* Hochkant: Cutout kleiner + etwas tiefer, damit „LET'S TALK" durchscheint. */ .lettalk__portrait{ width:34vw; transform:translate(-50%, -34%) rotate(-4deg); } .lettalk__arrow{ left:calc(4vw + 7rem); width:52px; height:56px; } } /* ---------- Reviews (gerotierte Karten — Phils bevorzugte Fassung) ---------- */ /* Zitate sind Phils eigene — keine erfundenen Namen/Fotos. */ .reviews{ position:relative; background:var(--cream); padding:14vh 6vw 18vh; overflow:hidden; } .reviews__figure{ position:absolute; left:clamp(-24px, -1vw, 0px); bottom:0; width:clamp(150px, 18vw, 280px); height:auto; z-index:1; pointer-events:none; user-select:none; } @media (max-width: 820px){ /* Hochkant: König bleibt sichtbar, unten links — komplett im Bild wie in der Quer-Version, nicht am Rand abgeschnitten. */ .reviews__figure{ width:38vw; left:0; opacity:0.85; } } .reviews__eyebrow{ text-align:center; font-family:'Instrument Serif', Georgia, serif; font-style:italic; color:var(--gold); font-size:1.15rem; margin-bottom:6vh; } .reviews__stack{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.6rem; max-width:1200px; margin:0 auto; } .reviews__card{ position:relative; flex:1 1 300px; max-width:360px; background:#fff; border-radius:20px; padding:2rem 1.8rem 1.8rem; box-shadow:0 24px 50px -20px rgba(20,4,7,0.25); transform:rotate(var(--r, 0deg)); } .reviews__stack .reviews__card:nth-child(1){ --r:-2deg; } .reviews__stack .reviews__card:nth-child(2){ --r:1.5deg; } .reviews__stack .reviews__card:nth-child(3){ --r:-1deg; } .reviews__stack .reviews__card:nth-child(4){ --r:2deg; } .reviews__stack .reviews__card:nth-child(5){ --r:-1.5deg; } .reviews__mark{ display:block; font-family:'Archivo Black', Impact, sans-serif; font-size:2.4rem; color:var(--gold); line-height:1; margin-bottom:0.6rem; } .reviews__card p{ font-family:Georgia, 'Times New Roman', serif; color:var(--bg); font-size:1rem; line-height:1.55; } @media (max-width: 720px){ .reviews__stack{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; padding:1rem 4vw 1.4rem; margin:0 -6vw; gap:1rem; } .reviews__card{ flex:0 0 82vw; scroll-snap-align:center; transform:rotate(0deg) !important; } } /* ---------- Ending (interlinea.framer.website 1:1) ---------- */ /* Warm-graue Körnungs-Fläche, zwei freigestellte „Erschaffung Adams"-Hände full-bleed unten, Footer-Inhalt darüber: Mail links, Link-Spalten rechts, Fußzeile mit © + Bild-Credits. Ersetzt .closing + .footer. */ .ending{ position:relative; background:#e9e6df; color:var(--bg); padding:12vh 7vw 34vh; overflow:hidden; isolation:isolate; /* Beige-Boden: deckt jeden Sub-Pixel-Spalt / Overscroll unter dem Footer mit derselben Farbe ab, statt den dunklen html-Hintergrund zu zeigen. box-shadow wird von overflow:hidden nicht beschnitten. */ box-shadow:0 50vh 0 0 #e9e6df; } .ending::before{ content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity:0.06; mix-blend-mode:multiply; pointer-events:none; z-index:0; } .ending__inner{ position:relative; z-index:2; max-width:1200px; margin:0 auto; /* Kopf-Freiraum für den sitzenden Mann — er ragt über die Mail-Zeile hinaus und .ending hat overflow:hidden. */ padding-top:clamp(2.5rem, 6vw, 5rem); display:flex; flex-wrap:wrap; justify-content:space-between; gap:6vh 3rem; opacity:0; transform:translateY(24px); transition:opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1); } .ending.is-visible .ending__inner{ opacity:1; transform:none; } /* Der Mann am Rechner sitzt auf der Mail-Zeile — der Text ist sein Stuhl. Figur + Mail teilen sich EINE font-size, damit sie in jeder Ausrichtung als ein Ganzes zusammen skalieren (Breite/Offsets in % bzw. em davon). */ .ending__contact{ position:relative; display:inline-block; align-self:flex-start; font-size:clamp(1.5rem, 4.4vw, 3rem); } .ending__figure{ position:absolute; left:-1.5em; top:-1.95em; bottom:auto; width:37%; height:auto; z-index:3; pointer-events:none; user-select:none; } .ending__mail{ display:inline-block; position:relative; z-index:2; color:var(--bg); text-decoration:none; font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-size:1em; line-height:1.15; } .ending__mail:hover, .ending__mail:focus-visible{ color:var(--gold); } .ending__nav{ display:flex; gap:3rem 4rem; flex-wrap:wrap; } .ending__col{ display:flex; flex-direction:column; gap:0.5rem; } .ending__col a{ color:var(--bg); text-decoration:none; font-family:'Instrument Serif', Georgia, serif; font-size:clamp(1.1rem, 2.1vw, 1.55rem); line-height:1.3; transition:color 0.25s ease; } .ending__col a:hover, .ending__col a:focus-visible, .ending__col a[aria-current="page"]{ color:var(--gold); } .ending__hands{ position:absolute; left:50%; bottom:0; width:min(1700px, 168%); transform:translateX(-50%); z-index:1; pointer-events:none; filter:grayscale(0.35) drop-shadow(0 24px 44px rgba(20,4,7,0.28)); } .ending__hands img{ display:block; width:100%; height:auto; } .ending__bar{ position:relative; z-index:2; max-width:1200px; margin:10vh auto 0; padding-top:3vh; border-top:1px solid rgba(49,9,17,0.18); display:flex; flex-wrap:wrap; gap:0.8rem 2rem; justify-content:space-between; align-items:baseline; font-family:Georgia, 'Times New Roman', serif; font-size:0.78rem; color:rgba(49,9,17,0.6); } .ending__credits{ max-width:62ch; font-size:0.7rem; opacity:0.8; } @media (max-width: 780px){ .ending{ padding:12vh 7vw 24vh; } .ending__hands{ width:210%; } .ending__bar{ flex-direction:column; } } @media (prefers-reduced-motion: reduce){ .ansatz__quote .reveal-line span{ transition:none !important; transform:none !important; opacity:1 !important; } .ending__inner{ transition:none !important; transform:none !important; opacity:1 !important; } .stack-heading span{ transition:none !important; animation:none !important; } .handwrite__underline path, .kontakt__scribble path, .kontakt__scribble-head, .lettalk__arrow path{ transition:none !important; stroke-dashoffset:0 !important; } } /* ---------- Modern Hero (Vanilla-Port 21st.dev @uniquesonu/modern-hero) ---------- */ /* 1:1 zum Original: Center-Bild ist sticky (h-screen), geht per clip-path von einem zentrierten Fenster zum Full-Bleed auf, zoomt von 170% auf 100% heraus und blendet danach aus. Vier eigene Bilder scrollen im Parallax darüber hinweg und verblassen/verkleinern sich am Ende. Unten ein weicher schwarzer Übergang (h-96, from-transparent to-bg). Danach folgt die nächste Sektion (Schwein + zwei Bilderreihen). Nativer Scroll + rAF, kein Lenis. */ .ss-hero{ position:relative; width:100%; height:calc(var(--ss-len, 1800px) + 100vh); background:var(--bg); /* Fläche hinter dem noch kleinen Fenster (wie bg-zinc-950) */ isolation:isolate; } .ss-hero__center{ position:sticky; top:0; height:100vh; width:100%; z-index:0; overflow:hidden; clip-path:polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%); will-change:clip-path, opacity; } /* Eigene Ebene fuers Bild: background-size:cover -> fuellt jedes Seitenverhaeltnis randlos (nie frei oben/unten). JS zoomt via transform:scale von 1.7 auf 1.0. */ .ss-hero__center-img{ position:absolute; inset:0; background-image:var(--ss-img); background-position:center; background-repeat:no-repeat; background-size:cover; transform:scale(1.7); transform-origin:center; will-change:transform; } @media (orientation:portrait){ .ss-hero__center-img{ background-image:var(--ss-img-portrait, var(--ss-img)); } } .ss-hero__parallax{ position:relative; z-index:1; margin:0 auto; max-width:64rem; /* max-w-5xl */ padding:200px 1rem 0; /* pt-[200px] px-4 */ } .ss-hero__pimg{ display:block; aspect-ratio:16 / 10; object-fit:cover; box-shadow:0 24px 60px -30px rgba(0,0,0,0.5); will-change:transform, opacity; } .ss-hero__pimg + .ss-hero__pimg{ margin-top:9vh; } .ss-hero__pimg--1{ width:33.333%; } /* w-1/3 */ .ss-hero__pimg--2{ width:66.666%; margin-left:auto; margin-right:auto; } /* w-2/3 mx-auto */ .ss-hero__pimg--3{ width:33.333%; margin-left:auto; } /* w-1/3 ml-auto */ .ss-hero__pimg--4{ width:41.666%; margin-left:6rem; } /* w-5/12 ml-24 */ .ss-hero__fade{ position:absolute; left:0; right:0; bottom:0; height:24rem; /* h-96 */ z-index:2; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--bg) 100%); } /* Kicker: kurzer Satz über dem Fenster, blendet beim Runterscrollen aus (opacity + Anhebung, gesteuert in main.js über den Reveal-Fortschritt). position:absolute -> kein Einfluss auf die Parallax-/offsetTop-Rechnung. */ .ss-hero__kicker{ position:absolute; top:0; left:0; width:100%; height:100vh; z-index:1; display:flex; align-items:center; justify-content:center; padding:0 8vw; text-align:center; pointer-events:none; will-change:opacity, transform; } /* weicher dunkler Schein hinter dem Kicker -> Text bleibt auf hellem wie dunklem Center-Bild lesbar; verblendet als Kind mit dem Kicker */ .ss-hero__kicker::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:min(92%, 58rem); height:15rem; background:radial-gradient(ellipse at center, rgba(14,11,11,0.6) 0%, rgba(14,11,11,0) 72%); pointer-events:none; } .ss-hero__kicker-line{ position:relative; margin:0; font-family:'Instrument Serif', Georgia, serif; font-weight:400; font-size:clamp(1.5rem, 3.6vw, 2.6rem); line-height:1.25; color:#f4efe6; text-shadow:0 2px 24px rgba(0,0,0,0.65); } .ss-hero__kicker .handwrite__underline path{ stroke-dashoffset:0; } /* kein .is-visible-Parent -> direkt gezeichnet */ /* Prozess-Schritte: liegen wie der Kicker fix im Viewport (JS folgt dem Scroll), erscheinen nacheinander und bleiben stehen, bis das Center-Bild wegblendet. */ .ss-hero__steps{ position:absolute; top:0; left:0; width:100%; height:100vh; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:0 8vw; text-align:center; pointer-events:none; will-change:transform; } .ss-hero__steps::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:min(94%, 54rem); height:19rem; background:radial-gradient(ellipse at center, rgba(14,11,11,0.66) 0%, rgba(14,11,11,0) 72%); pointer-events:none; } .ss-hero__step{ position:relative; margin:0; font-family:'Instrument Serif', Georgia, serif; font-weight:400; font-size:clamp(1.15rem, 2.7vw, 1.9rem); line-height:1.32; color:#f4efe6; text-shadow:0 2px 20px rgba(0,0,0,0.72); opacity:0; transform:translateY(14px); will-change:opacity, transform; } .ss-hero__step + .ss-hero__step{ margin-top:0.9rem; } /* kleiner Loop-Clip ("Umfallen") ueber dem Gold-Wort; blendet mit dem Text weg */ .ss-hero__vid{ position:absolute; left:100%; /* rechts neben dem Wort "Umfallen", in den freien Raum */ bottom:100%; margin-left:0.35em; margin-bottom:0.2em; width:clamp(80px, 9vw, 120px); aspect-ratio:420 / 272; object-fit:cover; border-radius:6px; box-shadow:0 12px 32px -14px rgba(0,0,0,0.65); pointer-events:none; transition:opacity .6s ease; } .ss-hero__vid.is-done{ opacity:0; } /* einmal gelaufen -> selbst wegblenden */ @media (max-width: 560px){ /* schmale Screens: an die rechte Wortkante haengen (Grossteil rechts davon), damit das Detail nicht ueber den Viewport-Rand laeuft */ .ss-hero__vid{ left:auto; right:0; margin-left:0; margin-bottom:0.5em; transform:translateX(48%); width:clamp(56px, 15vw, 74px); } } @media (prefers-reduced-motion: reduce){ .ss-hero__vid{ display:none; } } @media (max-width: 780px){ .ss-hero{ --ss-len:1300px; } .ss-hero__parallax{ padding-top:208px; } .ss-hero__pimg--1, .ss-hero__pimg--3{ width:48%; } .ss-hero__pimg--2{ width:84%; } .ss-hero__pimg--4{ width:58%; margin-left:2rem; } .ss-hero__pimg + .ss-hero__pimg{ margin-top:6vh; } .ss-hero__step{ font-size:clamp(1.05rem, 4.6vw, 1.5rem); } .ss-hero__step + .ss-hero__step{ margin-top:0.7rem; } } @media (prefers-reduced-motion: reduce){ .ss-hero{ height:100vh; } .ss-hero__center{ position:relative; clip-path:none; } .ss-hero__center-img{ transform:none; } .ss-hero__parallax, .ss-hero__fade, .ss-hero__steps{ display:none; } } /* ---------- Hochformat-Sperre (nur Handy quer) ---------- */ /* Wird das Handy quer gedreht, deckt ein Vollbild-Hinweis die Seite ab, bis zurückgedreht wird. Reines CSS über body::after → gilt auf jeder Seite, ohne Markup. iPad-Querformat (Höhe > 540px) ist nicht betroffen. */ body::after{ content:"Bitte dreh dein Gerät zurück ins Hochformat."; position:fixed; inset:0; z-index:2147483000; display:none; align-items:center; justify-content:center; padding:10vw; text-align:center; background:var(--bg, #310911); color:var(--cream, #f2e9dd); font-family:'Archivo Black', Impact, sans-serif; font-size:clamp(1rem, 4.4vw, 1.5rem); line-height:1.45; letter-spacing:0.01em; } @media (orientation: landscape) and (max-height: 540px) and (pointer: coarse){ body::after{ display:flex; } }