/* ============================================================ BASE.CSS — Das 5. Element v2 Reset · Design-Tokens · Fonts · Utilities ============================================================ */ /* ------------------------------------------------------------ Google Fonts werden in jedem HTML- via geladen (mit preconnect + display=swap) — kein @import nötig, @import würde einen blocking CSS-Chain erzeugen. ------------------------------------------------------------ */ /* ============================================================ DESIGN-TOKENS ============================================================ */ :root { /* ---------------------------------------------------------- Farben ---------------------------------------------------------- */ --bg: #080808; --surface: #0f0f0f; --surface-2: #161616; --border: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.12); --pink: #ff0066; --pink-soft: rgba(255, 0, 102, 0.15); --pink-border: rgba(255, 0, 102, 0.3); --ticker-bg: #ff0066; /* Ticker: volle pink Fläche */ --white: #ffffff; --white-dim: rgba(255, 255, 255, 0.55); --white-ghost: rgba(255, 255, 255, 0.08); /* ---------------------------------------------------------- Typografie ---------------------------------------------------------- */ --font-display: 'Bebas Neue', Impact, sans-serif; --font-body: 'Barlow Condensed', Arial Narrow, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Schriftgrößen */ --fs-hero: clamp(80px, 16vw, 200px); /* Massive Headlines */ --fs-h1: clamp(56px, 10vw, 140px); --fs-h2: clamp(36px, 5vw, 72px); --fs-h3: clamp(24px, 3vw, 40px); --fs-body: 16px; --fs-body-sm:14px; --fs-label: 11px; --fs-mono: 13px; --fs-ticker: 10px; /* ---------------------------------------------------------- Spacing ---------------------------------------------------------- */ --space-xs: 8px; --space-sm: 16px; --space-md: 32px; --space-lg: 64px; --space-xl: 120px; --space-2xl: 200px; /* ---------------------------------------------------------- Layout ---------------------------------------------------------- */ --container-max: 1440px; --container-pad: clamp(20px, 5vw, 80px); --container-pad-mob: 20px; /* Header-Höhen (für body-padding-top) */ --ticker-height: 18px; --nav-height: 52px; --header-total: calc(var(--ticker-height) + var(--nav-height)); /* ---------------------------------------------------------- Transitions ---------------------------------------------------------- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* Expo out — snappy */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-std: cubic-bezier(0.25, 0.46, 0.45, 0.94); --dur-fast: 0.15s; --dur-mid: 0.35s; --dur-slow: 0.7s; --dur-reveal: 0.8s; /* ---------------------------------------------------------- Z-Index ---------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-overlay: 20; --z-ticker: 40; --z-nav: 50; --z-cursor: 999; } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust:100%; text-size-adjust: 100%; /* Scroll-Offset damit Anker-Links nicht unter Ticker + Nav enden */ scroll-padding-top: calc(var(--ticker-height) + var(--nav-height)); } body { background-color: var(--bg); color: var(--white); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Typografischer Basis-Reset */ h1, h2, h3, h4, h5, h6 { font-weight: inherit; line-height: 1; /* Statement-Überschriften: kein Wort-Trenner, kein Silbentrennungs-Bug */ word-break: keep-all; hyphens: none; overflow-wrap: normal; } p { max-width: 68ch; line-height: 1.6; } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; height: auto; } ul, ol { list-style: none; } button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; -webkit-appearance: none; appearance: none; } button { cursor: pointer; } svg { display: block; } /* Reduced-Motion */ @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; } } /* ============================================================ TYPOGRAFIE — Klassen ============================================================ */ /* Display: Bebas Neue — massive Schlagzeilen */ .display { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; color: var(--white); word-break: keep-all; hyphens: none; } .display--hero { font-size: var(--fs-hero); } /* Statement-Headlines — kein Wortumbruch */ .statement { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; color: var(--white); word-break: keep-all; /* Bug-Fix: kein "ZU R"-Umbruch */ hyphens: none; overflow-wrap: normal; } /* Body-Text */ .body-text { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 300; color: var(--white-dim); line-height: 1.65; } /* Mono — Labels, Preise, Zeiten */ .mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.05em; } /* Label (uppercase Mono) */ .label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--white-dim); } /* Section-Eyebrow */ .eyebrow { display: block; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.25em; text-transform: uppercase; color: var(--pink); margin-bottom: var(--space-sm); } /* Logo-Mark inline in Headlines — ersetzt das Unicode-Zeichen "⑤", das in Bebas Neue je nach Browser/Fallback-Font stark überskaliert dargestellt wird. Weiß eingefärbt via filter (Quelldatei ist pink). */ .title-mark { display: inline-block; height: 0.7em; width: auto; vertical-align: -0.06em; margin-right: 0.12em; filter: brightness(0) invert(1); } /* ============================================================ LAYOUT ============================================================ */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* Section-Basis-Padding */ .section { padding-block: var(--space-xl); } .section--surface { background-color: var(--color-surface); background-color: var(--surface); } .section--surface-2 { background-color: var(--surface-2); } /* ============================================================ BILD-UTILITIES ============================================================ */ .img-cover { display: block; width: 100%; height: 100%; object-fit: cover; } /* Bildausschnitt-Utilities */ .img-pos-top { object-position: center top; } .img-pos-center { object-position: center center; } .img-pos-bottom { object-position: center bottom; } .img-wrap { position: relative; overflow: hidden; } /* Zoom-Hover auf Container */ .img-zoom img, .img-zoom .img-cover { transition: transform var(--dur-slow) var(--ease); } .img-zoom:hover img, .img-zoom:hover .img-cover { transform: scale(1.04); } /* Clip-Path Shapes — diagonale Bildausschnitte */ .clip-right { clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); } .clip-left { clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); } .clip-bottom { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); } .clip-top { clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); } /* ============================================================ OVERLAYS ============================================================ */ .overlay { position: absolute; inset: 0; pointer-events: none; } .overlay--dark { background: rgba(8, 8, 8, 0.65); } .overlay--light { background: rgba(0, 0, 0, 0.2); } .overlay--strong { background: rgba(8, 8, 8, 0.8); } .overlay--gradient-bottom { background: linear-gradient( to top, rgba(8, 8, 8, 0.95) 0%, rgba(8, 8, 8, 0.5) 40%, transparent 100% ); } .overlay--gradient-left { background: linear-gradient( to right, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.55) 50%, transparent 100% ); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 14px 32px; min-height: 44px; /* Apple HIG Touch-Target-Minimum */ font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; white-space: nowrap; word-break: keep-all; transition: background-color var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease); } /* Primary / Filled — Pink filled */ .btn--primary, .btn--filled { background-color: var(--pink); border-color: var(--pink); color: var(--white); } .btn--primary:hover, .btn--filled:hover { background-color: #cc0055; border-color: #cc0055; } /* Outlined — pink border */ .btn--outline { background-color: transparent; border-color: var(--pink); color: var(--white); } .btn--outline:hover { background-color: var(--pink); } /* Ghost — weiße Border */ .btn--ghost { background-color: transparent; border-color: var(--border-strong); color: var(--white); } .btn--ghost:hover { border-color: var(--white); } /* Arrow-Suffix */ .btn-arrow::after { content: '→'; font-family: var(--font-body); font-size: 1em; transition: transform var(--dur-fast) var(--ease); } .btn-arrow:hover::after { transform: translateX(4px); } /* ============================================================ SCROLL-REVEAL ANIMATIONEN (per IntersectionObserver in main.js aktiviert) ============================================================ */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); } .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); } .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); } .reveal.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: translate(0, 0); } /* Stagger-Delays für Gruppen */ .reveal-group > *:nth-child(1) { transition-delay: 0.00s; } .reveal-group > *:nth-child(2) { transition-delay: 0.08s; } .reveal-group > *:nth-child(3) { transition-delay: 0.16s; } .reveal-group > *:nth-child(4) { transition-delay: 0.24s; } .reveal-group > *:nth-child(5) { transition-delay: 0.32s; } .reveal-group > *:nth-child(6) { transition-delay: 0.40s; } /* Kinetic-Text: Buchstaben einzeln */ .kinetic-text .char { display: inline-block; white-space: pre; /* Leerzeichen erhalten */ word-break: keep-all; hyphens: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); opacity: 0; transform: translateY(60%); } .kinetic-text.is-visible .char { opacity: 1; transform: translateY(0); } /* Reduzierte Bewegung: sofort einblenden */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; } .kinetic-text .char { opacity: 1; transform: none; transition: none; } } /* ============================================================ CUSTOM CURSOR ============================================================ */ /* System-Cursor verstecken (Desktop only) */ @media (hover: hover) { body, a, button, [role="button"] { cursor: none; } } .cursor { width: 12px; height: 12px; background: var(--pink); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; mix-blend-mode: difference; z-index: var(--z-cursor); transform: translate(-50%, -50%); transition: transform 0.1s var(--ease); will-change: transform; } /* Hover-States werden per JS als Klassen gesetzt */ .cursor.is-hover-link { transform: translate(-50%, -50%) scale(3); } .cursor.is-hover-img { transform: translate(-50%, -50%) scale(2); opacity: 0.5; } .cursor.is-hidden { opacity: 0; } /* Cursor nur auf Desktop mit Hover-Fähigkeit */ @media (hover: none) { .cursor { display: none; } } /* ============================================================ DEKORATIVE ELEMENTE ============================================================ */ /* Ghost-Text — riesige Zahl "5" als Hintergrund-Deko */ .ghost-text { font-family: var(--font-display); font-size: clamp(300px, 50vw, 600px); line-height: 1; color: var(--white); opacity: 0.03; pointer-events: none; user-select: none; letter-spacing: -0.02em; white-space: nowrap; } @media (max-width: 768px) { .ghost-text { font-size: clamp(160px, 45vw, 300px); opacity: 0.04; } .section { padding-block: var(--space-lg); /* 120px → 64px auf Mobile */ } } /* Horizontale Scroll-Leiste */ .scroll-progress { position: fixed; top: calc(var(--ticker-height) + (var(--nav-height) / 2) - 1px); left: 0; width: 0%; height: 2px; background-color: var(--pink); z-index: calc(var(--z-nav) + 1); transition: width 0.1s linear; pointer-events: none; } /* ============================================================ BADGES ============================================================ */ .badge { display: inline-block; padding: 4px 10px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.15em; text-transform: uppercase; border: 1px solid currentColor; } .badge--pink { color: var(--pink); border-color: var(--pink-border); background-color: var(--pink-soft); } .badge--white { color: var(--white); border-color: var(--border-strong); } /* ============================================================ TRENNLINIEN ============================================================ */ .divider { border: none; border-top: 1px solid var(--border); margin: 0; } .divider--pink { border-top-color: var(--pink-border); } /* ============================================================ SPACING UTILITIES ============================================================ */ .mt-xs { margin-top: var(--space-xs); } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mb-xs { margin-bottom: var(--space-xs); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .gap-xs { gap: var(--space-xs); } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } /* ============================================================ ACCESSIBILITY ============================================================ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } /* ============================================================ SELECTION & SCROLLBAR ============================================================ */ ::selection { background-color: var(--pink-soft); color: var(--white); } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--pink); } /* ============================================================ FLEX / GRID SHORTCUTS ============================================================ */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .text-center { text-align: center; } .uppercase { text-transform: uppercase; } .overflow-hidden { overflow: hidden; } .pointer-none { pointer-events: none; } .no-select { user-select: none; } .w-full { width: 100%; } .h-full { height: 100%; }