/* ============================================================= Portfolio — Design System & Styles Static HTML/CSS/JS · editorial-minimal · premium motion Organized: Tokens → Reset/Base → Layout → Nav → Hero → Work → About → Contact → Footer → Case Study → Cursor → Motion utilities → Responsive → Reduced motion ============================================================= */ /* ---------- Fonts (Google Fonts loaded in ) ---------- */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* Color — editorial off-white / near-black + one warm accent */ --bg: #f4f2ec; --bg-2: #ebe8e0; /* subtle alternate section */ --fg: #14130f; --muted: #6b675d; /* meta / secondary text */ --border: #d6d2c6; --accent: #fd601a; /* warm orange-red, used sparingly */ --accent-ink:#b53c18; --on-dark: #f4f2ec; /* Dark surface (used for contact / footer feature panels) */ --ink: #14130f; --ink-2: #1d1b16; /* Typography */ --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; /* Fluid type scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0625rem; --text-lg: clamp(1.15rem, 1.4vw, 1.4rem); --text-xl: clamp(1.5rem, 2.2vw, 2rem); --text-2xl: clamp(2rem, 3.4vw, 3rem); --text-3xl: clamp(2.6rem, 5.2vw, 4.5rem); --text-hero: clamp(2.8rem, 7vw, 7.5rem); /* Spacing scale (8px base) */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; --sp-8: 9rem; --sp-9: 12rem; /* Layout */ --maxw: 1320px; --maxw-prose: 64ch; --gutter: clamp(1.25rem, 5vw, 5rem); /* Radii & shadows */ --radius: 14px; --radius-lg: 24px; --shadow: 0 1px 2px rgba(20,19,15,.04), 0 12px 32px -12px rgba(20,19,15,.18); --shadow-lg: 0 2px 4px rgba(20,19,15,.05), 0 30px 60px -24px rgba(20,19,15,.30); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-base: 320ms; --dur-slow: 620ms; --nav-h: 76px; } /* ============================================================ 2. RESET / BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; /* JS adds .lenis to when smooth scroll is active; then this is overridden */ } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul { list-style: none; padding: 0; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; } p { text-wrap: pretty; } ::selection { background: var(--accent); color: var(--on-dark); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ============================================================ 3. LAYOUT HELPERS ============================================================ */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(4rem, 10vw, var(--sp-8)); } .section--tight { padding-block: clamp(3rem, 6vw, var(--sp-6)); } .bg-alt { background: var(--bg-2); } .eyebrow { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 0.6em; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--muted); display: none; } .lead { font-size: var(--text-lg); color: var(--muted); max-width: 52ch; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.95em 1.5em; border-radius: 100px; font-weight: 500; font-size: var(--text-sm); letter-spacing: 0.02em; border: 1px solid var(--fg); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } /* Pfeil-Icon (echtes SVG, kein Emoji) — skaliert per em mit der Textgröße */ .arrow { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; } .btn .arrow { transition: transform var(--dur-base) var(--ease-out); } .btn:hover { background: var(--fg); color: var(--bg); } .btn:hover .arrow { transform: translate(3px, -3px); } .btn--accent { background: var(--accent); color: var(--on-dark); border-color: var(--accent); } .btn--accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-dark); } .btn--ghost { border-color: var(--border); } /* Zurück-Button: gleicher Outlined-Stil/Hover wie .btn, Pfeil zeigt & bewegt sich nach links */ .btn--back { margin-bottom: var(--sp-3); } .btn--back:hover .arrow { transform: translate(-3px, -3px); } /* Animated underline link */ .ul-link { position: relative; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur-base) var(--ease-out); padding-bottom: 2px; } .ul-link:hover, .ul-link:focus-visible { background-size: 100% 1.5px; } /* ============================================================ 4. NAV ============================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; transition: background var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out); border-bottom: 1px solid transparent; } .nav__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; } .nav.scrolled { height: 64px; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--border); } .brand { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.5em; } .brand__home { color: var(--muted); font-weight: 500; } .brand__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; } .nav__menu { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); } .nav__link { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .nav__toggle { display: none; } /* Mobile menu */ .nav__panel { position: fixed; inset: 0; z-index: 99; background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); transform: translateY(-100%); transition: transform var(--dur-slow) var(--ease-in-out); visibility: hidden; } .nav__panel.open { transform: translateY(0); visibility: visible; } .nav__panel a { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 600; letter-spacing: -0.02em; padding-block: 0.2em; border-bottom: 1px solid var(--border); } /* ============================================================ 5. HERO ============================================================ */ .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav-h); position: relative; } .hero__title, .hero__intro, .hero__meta { position: relative; z-index: 1; } .hero__intro { font-size: var(--text-lg); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; margin-bottom: var(--sp-4); } .hero__intro b { color: var(--fg); font-weight: 600; } .hero__title { font-size: var(--text-hero); letter-spacing: -0.04em; line-height: 0.98; max-width: 16ch; } .hero__title .accent { color: var(--accent); } /* Floatende Coin-Buttons (dekorativ) */ .hero__coins { position: absolute; inset: 0; z-index: 0; /* hinter Titel/Meta (z-index:1) */ pointer-events: none; /* fängt keine Klicks/Hover ab */ } .hero__coin { position: absolute; animation: coinFloat 6s var(--ease-in-out) infinite; will-change: transform; } .hero__coin img { display: block; height: auto; will-change: transform; } /* Größe je Coin getrennt (SVGs sind intrinsisch verschieden) */ .hero__coin--back { top: 36%; right: 26%; animation-duration: 5.6s; } .hero__coin--back img { width: clamp(54px, 6vw, 82px); } .hero__coin--plus { top: 62%; right: 12%; animation-duration: 6.8s; animation-delay: -1.4s; } .hero__coin--plus img { width: clamp(52px, 5vw, 72px); } @keyframes coinFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .hero__meta { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); padding-top: var(--sp-3); } .hero__status { display: inline-flex; align-items: center; gap: 0.6em; font-size: var(--text-sm); color: var(--muted); } .pulse { width: 9px; height: 9px; border-radius: 50%; background: #2ecf6b; position: relative; } .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2ecf6b; animation: pulse 2s var(--ease-out) infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3.2); opacity: 0; } } .scroll-cue { position: absolute; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 0.6em; } .scroll-cue .line { width: 1px; height: 42px; background: linear-gradient(var(--muted), transparent); animation: cue 1.8s var(--ease-in-out) infinite; transform-origin: top; } @keyframes cue { 0%,100% { transform: scaleY(.4); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } } /* Hero line reveal (split into masked lines) */ .line-mask { overflow: hidden; display: block; padding-bottom: 0.12em; margin-bottom: -0.12em; } .line-inner { display: block; } /* ============================================================ 6. SELECTED WORK ============================================================ */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); } .section-head h2 { font-size: var(--text-2xl); } .section-head .count { font-size: var(--text-sm); color: var(--muted); } /* Featured project blocks */ .feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--border); } .feature:nth-child(even) .feature__media { order: 2; } .feature__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; } .feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } /* Full-bleed mockup: match container ratio to the image so nothing is cropped */ .feature__media--full { aspect-ratio: 4871 / 4398; } .feature__media--full img { object-fit: contain; } .feature:hover .feature__media img { transform: scale(1.04); } .feature__index { font-family: var(--font-display); font-size: var(--text-sm); color: var(--accent); font-weight: 600; letter-spacing: 0.05em; } .feature__title { font-size: var(--text-2xl); margin-block: 0.2em 0.3em; overflow-wrap: break-word; hyphens: auto; } .feature__desc { color: var(--muted); max-width: 42ch; margin-bottom: var(--sp-3); } .feature__tags { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: var(--sp-4); } .tag { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 100px; padding: 0.4em 0.9em; } .feature__stats { display: flex; gap: var(--sp-5); margin-bottom: var(--sp-4); } .stat .n { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; display: block; } .stat .l { font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; } /* Editorial index (smaller projects, hover preview) */ .index { border-top: 1px solid var(--border); margin-top: var(--sp-6); } .index__row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--sp-3); padding-block: clamp(1.2rem, 2.5vw, 1.8rem); border-bottom: 1px solid var(--border); position: relative; transition: color var(--dur-base) var(--ease-out); } .index__row .num { font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; } .index__row .name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; } .index__row .cat { font-size: var(--text-sm); color: var(--muted); } .index__row .year { font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; } .index__row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); transition: width var(--dur-slow) var(--ease-out); } @media (hover: hover) { .index__row:hover { color: var(--accent); } .index__row:hover .cat, .index__row:hover .year, .index__row:hover .num { color: var(--accent); } .index__row:hover::after { width: 100%; } } /* Cursor-following hover preview */ .hover-preview { position: fixed; top: 0; left: 0; width: 280px; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; pointer-events: none; z-index: 90; opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); box-shadow: var(--shadow-lg); will-change: transform, opacity; } .hover-preview.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .hover-preview img { width: 100%; height: 100%; object-fit: cover; } /* ============================================================ 7. ABOUT ============================================================ */ .about { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; } .about__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--shadow); position: sticky; top: calc(var(--nav-h) + var(--sp-3)); } .about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1.3); transform-origin: center 28%; } .about__body h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-bottom: var(--sp-3); max-width: 18ch; } .about__body p { color: var(--fg); margin-bottom: var(--sp-3); max-width: 54ch; } .about__body p.muted { color: var(--muted); } .about__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); } .about__list h4 { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4em; } .about__list li { font-size: var(--text-sm); padding-block: 0.2em; } /* Marquee */ .marquee { border-block: 1px solid var(--border); padding-block: var(--sp-3); overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: inline-flex; gap: var(--sp-4); animation: marquee 28s linear infinite; } .marquee__track span { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: var(--sp-4); } .marquee__track span::after { content: "✳"; color: var(--accent); font-size: 0.7em; } @keyframes marquee { to { transform: translateX(-50%); } } /* ============================================================ 8. CONTACT (dark panel) ============================================================ */ .contact { background: var(--ink); color: var(--on-dark); border-radius: var(--radius-lg); padding: clamp(2.5rem, 8vw, 7rem) var(--gutter); text-align: center; } .contact .eyebrow { color: rgba(244,242,236,.6); } .contact .eyebrow::before { background: rgba(244,242,236,.5); } .contact h2 { font-size: var(--text-3xl); margin-block: var(--sp-2) var(--sp-4); } .contact a.mail { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em; color: var(--accent); display: inline-block; } .contact .links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-5); } .contact .links a { color: rgba(244,242,236,.75); font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase; } .contact .links a:hover { color: var(--on-dark); } /* ============================================================ 9. FOOTER ============================================================ */ .footer { padding-block: var(--sp-5); border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--text-sm); color: var(--muted); } .footer .to-top { display: inline-flex; align-items: center; gap: 0.5em; } /* ============================================================ 10. CASE STUDY ============================================================ */ .cs-hero { padding-top: calc(var(--nav-h) + var(--sp-6)); } .cs-hero .eyebrow { margin-bottom: var(--sp-3); } .cs-hero h1 { font-size: var(--text-3xl); max-width: 18ch; letter-spacing: -0.035em; } .cs-hero .lead { margin-top: var(--sp-3); } .cs-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-6); border-top: 1px solid var(--border); padding-top: var(--sp-4); } .cs-overview h4 { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5em; } .cs-overview p { font-size: var(--text-sm); } .cs-figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); margin-block: var(--sp-5); aspect-ratio: 16/9; } .cs-figure.tall { aspect-ratio: 4/3; } .cs-figure img { width: 100%; height: 100%; object-fit: cover; } .cs-figure figcaption, .cap { font-size: var(--text-sm); color: var(--muted); margin-top: 0.8em; } .cs-block { display: grid; grid-template-columns: 0.4fr 0.6fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: start; } .cs-block h2 { font-size: var(--text-2xl); } .cs-block .body p { margin-bottom: var(--sp-3); max-width: var(--maxw-prose); } .cs-block .body p.muted { color: var(--muted); } .cs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); } .cs-card { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3); background: var(--bg); } .cs-card h4 { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.8em; } .cs-card ul li { font-size: var(--text-sm); padding-block: 0.3em; padding-left: 1.2em; position: relative; color: var(--muted); } .cs-card ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* Numbered process steps */ .process { counter-reset: step; } .process__item { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 3rem); padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--border); } .process__num { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; } .process__item h3 { font-size: var(--text-xl); margin-bottom: var(--sp-2); } .process__item p { color: var(--muted); max-width: 56ch; margin-bottom: var(--sp-3); } .process__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16/10; margin-top: var(--sp-2); } .process__media img { width: 100%; height: 100%; object-fit: cover; } /* Outcome stats band */ .outcome { background: var(--ink); color: var(--on-dark); border-radius: var(--radius-lg); padding: clamp(2.5rem, 6vw, 5rem) var(--gutter); } .outcome h2 { font-size: var(--text-2xl); margin-bottom: var(--sp-5); } .outcome__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .outcome__stat .n { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; color: var(--accent); display: block; letter-spacing: -0.03em; } .outcome__stat .l { font-size: var(--text-sm); color: rgba(244,242,236,.7); margin-top: 0.4em; } /* Next project */ .next-project { display: grid; gap: var(--sp-2); padding-block: var(--sp-7); text-align: center; border-top: 1px solid var(--border); min-width: 0; } .next-project a { min-width: 0; } .next-project .eyebrow { justify-content: center; } .next-project .eyebrow::before { display: none; } .next-project a { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.03em; } .next-project a:hover { color: var(--accent); } /* ============================================================ 11. CUSTOM CURSOR ============================================================ */ .cursor-dot, .cursor-ring { display: none; position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; } body.has-cursor .cursor-dot, body.has-cursor .cursor-ring { display: block; } .cursor-dot { width: 7px; height: 7px; background: #fff; transform: translate(-50%, -50%); } .cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.7); transform: translate(-50%, -50%); transition: width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .cursor-ring.hover { width: 64px; height: 64px; background: rgba(255,255,255,.12); border-color: transparent; } body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; } /* ============================================================ 12. MOTION UTILITIES ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } [data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } [data-stagger].is-visible > * { opacity: 1; transform: none; } /* Page transition overlay */ .page-transition { position: fixed; inset: 0; z-index: 9998; background: var(--ink); transform: scaleY(0); transform-origin: bottom; pointer-events: none; } /* ============================================================ 13. RESPONSIVE ============================================================ */ @media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature:nth-child(even) .feature__media { order: 0; } .about { grid-template-columns: 1fr; } .about__photo { position: relative; top: auto; max-width: 420px; } .cs-block { grid-template-columns: 1fr; } .cs-block h2 { position: relative; top: auto; } .cs-overview { grid-template-columns: repeat(2, 1fr); } .cs-cards { grid-template-columns: 1fr; } .outcome__grid { grid-template-columns: 1fr; gap: var(--sp-3); } .index__row { grid-template-columns: auto 1fr auto; } .index__row .cat { display: none; } } @media (max-width: 640px) { .nav__menu { display: none; } .nav__toggle { display: inline-flex; flex-direction: column; gap: 5px; padding: 8px; } .nav__toggle span { width: 26px; height: 2px; background: var(--fg); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base); } .nav__toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle.open span:nth-child(2) { opacity: 0; } .nav__toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .hero__intro { font-size: var(--text-base); } /* Coins nach oben in den Leerraum zwischen Nav und Titel */ .hero__coin--back { top: calc(var(--nav-h) + 2%); right: auto; left: 8%; } .hero__coin--back img { width: clamp(42px, 13vw, 58px); } .hero__coin--plus { top: calc(var(--nav-h) + 6%); right: 10%; } .hero__coin--plus img { width: clamp(56px, 16vw, 74px); } .feature__stats { gap: var(--sp-4); } .about__list { grid-template-columns: 1fr; } .process__item { grid-template-columns: 1fr; gap: var(--sp-2); } .cs-overview { grid-template-columns: 1fr 1fr; } .footer { flex-direction: column; } } /* ============================================================ 14. REDUCED MOTION (non-negotiable) ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal, [data-stagger] > * { opacity: 1 !important; transform: none !important; } .scroll-cue, .pulse::after, .marquee__track { animation: none !important; } }