/* ========================================================================== That's it. Marketing - Recruiting-Landingpage style.css -------------------------------------------------------------------------- PASS 1: Fundament + Header + Hero + Footer auf das echte Marken- Designsystem (--ti-* Tokens) umgestellt. Sektionen 2-9 bekommen hier nur einen neutralen Uebergangs-Style (Brand-Typo, alternierende Flaechen) - ihr Feinschliff folgt in Pass 2. Aufbau: 1. Design-Tokens (:root, --ti-*) 2. Reset / Basis 3. Typografie 4. Layout: Container / Sektionen 5. Buttons / Badges 6. Header (sticky) + Scroll-Progress 7. Hero 8. Floating-CTA (mobil) 9. Inhalts-Sektionen (Sektionen 2-9, neutraler Uebergangs-Style) 10. Footer 11. Reveal-Animationen (Progressive Enhancement) 12. Breakpoints (min-width: 480 / 768 / 1024 / 1280) 13. prefers-reduced-motion Mobil-zuerst. BEM-artige Klassennamen. ========================================================================== */ /* ========================================================================== 1. DESIGN-TOKENS Uebernommen aus dem offiziellen Branding Guide (--ti-* Namensraum). Fonts werden aktuell ueber Google Fonts geladen (siehe -Kommentar- TODO: vor Go-Live self-hosten wegen DSGVO). ========================================================================== */ :root { /* -------- Brand Core -------- */ --ti-black: #0E0E0E; --ti-ink: #1A1A1A; --ti-gold: #DC9832; --ti-paper: #FFFFFF; --ti-off-white: #FAFAF8; /* -------- Neutrals -------- */ --ti-n-900: #0E0E0E; --ti-n-800: #1A1A1A; --ti-n-700: #2B2B2B; --ti-n-600: #4A4A4A; --ti-n-500: #6E6E6E; --ti-n-400: #9A9A9A; --ti-n-300: #C8C8C8; --ti-n-200: #E5E5E3; --ti-n-100: #F2F2EF; --ti-n-050: #FAFAF8; /* -------- Semantische Vordergrund-/Hintergrundfarben (hell) -------- */ --ti-bg: var(--ti-paper); --ti-bg-alt: var(--ti-n-100); --ti-fg: var(--ti-n-900); --ti-fg-2: var(--ti-n-600); --ti-fg-3: var(--ti-n-500); --ti-fg-muted: var(--ti-n-400); --ti-line: var(--ti-n-200); --ti-accent: var(--ti-gold); /* -------- Semantische Statusfarben -------- */ --ti-success: #2F8F5F; --ti-warning: #DC9832; --ti-danger: #C4382C; --ti-info: #2B6CB0; /* -------- Type-Familien -------- */ --ti-display: "League Spartan", "Helvetica Neue", Arial, sans-serif; --ti-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif; --ti-label: "Barlow Condensed", "Montserrat", "Helvetica Neue", Arial, sans-serif; --ti-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* -------- Type-Skala -------- */ --ti-fs-display-xl: clamp(2.5rem, 4rem + 3vw, 6rem); /* Hero: bewusst gedeckelt auf ~96px, nicht 128px */ --ti-fs-display-l: clamp(2.75rem, 6vw, 5.5rem); --ti-fs-display-m: clamp(2.25rem, 4.2vw, 4rem); --ti-fs-h1: clamp(2rem, 3.4vw, 3rem); --ti-fs-h2: clamp(1.625rem, 2.6vw, 2.25rem); --ti-fs-h3: 1.375rem; --ti-fs-h4: 1.125rem; --ti-fs-body-l: 1.125rem; --ti-fs-body: 1rem; --ti-fs-body-s: 0.875rem; --ti-fs-caption: 0.75rem; --ti-fs-label: 0.75rem; /* -------- Spacing (4px-Raster) -------- */ --ti-s-1: 0.25rem; /* 4px */ --ti-s-2: 0.5rem; /* 8px */ --ti-s-3: 0.75rem; /* 12px */ --ti-s-4: 1rem; /* 16px */ --ti-s-5: 1.5rem; /* 24px */ --ti-s-6: 2rem; /* 32px */ --ti-s-7: 3rem; /* 48px */ --ti-s-8: 4rem; /* 64px */ --ti-s-9: 6rem; /* 96px */ --ti-s-10: 8rem; /* 128px */ /* -------- Radien (Marke ist scharf; das Logo-Quadrat ist ein Rechteck) -------- */ --ti-r-0: 0px; --ti-r-1: 2px; --ti-r-2: 4px; --ti-r-3: 8px; --ti-r-pill: 999px; /* -------- Schatten -------- */ --ti-shadow-1: 0 1px 2px rgba(14, 14, 14, .06), 0 1px 1px rgba(14, 14, 14, .04); --ti-shadow-2: 0 4px 12px rgba(14, 14, 14, .08), 0 1px 2px rgba(14, 14, 14, .06); --ti-shadow-3: 0 12px 32px rgba(14, 14, 14, .12), 0 2px 6px rgba(14, 14, 14, .06); --ti-shadow-gold: 0 6px 18px rgba(220, 152, 50, .32); /* -------- Motion -------- */ --ti-ease-standard: cubic-bezier(.2, .7, .2, 1); --ti-ease-entrance: cubic-bezier(.16, .84, .3, 1); --ti-dur-fast: 120ms; --ti-dur-base: 200ms; --ti-dur-slow: 360ms; /* -------- Signatur-Winkel (Flag-Cuts) -------- */ --ti-angle: 18deg; --ti-clip-flag-right: polygon(0 0, 100% 0, calc(100% - 72px) 100%, 0 100%); --ti-clip-flag-left: polygon(72px 0, 100% 0, 100% 100%, 0 100%); /* -------- Layout (seitenspezifisch, kein Brand-Token) -------- */ --container-max: 1200px; --section-py: clamp(3rem, 8vw, 6rem); /* -------- Header-Hoehen (Scroll-Offset / Verdichtung ohne Layout-Shift) -------- */ --header-h: 4.75rem; --header-h-scrolled: 3.75rem; /* -------- Floating-CTA-Hoehe (fuer body-Ausgleich mobil) -------- */ --floating-cta-h: 4.5rem; /* -------- Semantische z-index-Skala (statt 999/9999) -------- */ --z-base: 0; --z-scene: 1; --z-content: 2; --z-floating: 90; --z-header: 100; --z-progress: 110; } /* ========================================================================== 2. RESET / BASIS ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Verhindert, dass Anker-Ziele hinter dem Sticky-Header verschwinden. */ scroll-padding-top: var(--header-h); } body { margin: 0; font-family: var(--ti-sans); font-size: var(--ti-fs-body); line-height: 1.6; font-weight: 400; color: var(--ti-fg); background-color: var(--ti-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Kein horizontales Scrollen durch dekorative Overflows. */ overflow-x: hidden; /* Platz fuer den fixierten mobilen Floating-CTA (siehe Abschnitt 8). */ padding-bottom: calc(var(--floating-cta-h) + env(safe-area-inset-bottom)); } img, picture, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } /* Sichtbarer, konsistenter Fokus-Ring (Barrierefreiheit). */ :focus-visible { outline: 3px solid var(--ti-gold); outline-offset: 3px; border-radius: var(--ti-r-1); } :focus { outline-color: var(--ti-gold); } /* ========================================================================== 3. TYPOGRAFIE Globale Element-Regeln entsprechen dem Branding Guide 1:1 - dadurch erhalten auch die unveraenderten Sektionen 2-9 automatisch die richtige Marken-Typo, ohne dass ihr HTML angefasst werden muss. ========================================================================== */ h1, h2 { font-family: var(--ti-display); font-weight: 900; margin: 0 0 var(--ti-s-4); color: var(--ti-fg); text-wrap: balance; } h1 { font-size: var(--ti-fs-h1); line-height: 1.04; letter-spacing: -0.015em; } h2 { font-size: var(--ti-fs-h2); line-height: 1.08; letter-spacing: -0.01em; } h3, h4 { font-family: var(--ti-sans); font-weight: 700; margin: 0 0 var(--ti-s-3); color: var(--ti-fg); text-wrap: balance; } h3 { font-size: var(--ti-fs-h3); line-height: 1.25; } h4 { font-size: var(--ti-fs-h4); line-height: 1.3; } p { margin: 0 0 var(--ti-s-4); max-width: 65ch; text-wrap: pretty; } strong { font-weight: 700; color: var(--ti-fg); } small, .text-small { font-size: var(--ti-fs-body-s); } .u-gold { color: var(--ti-gold); } /* Tracked Label/Eyebrow-Stil (sparsam einsetzen, siehe Impeccable-Regeln). */ .ti-label { font-family: var(--ti-label); font-weight: 500; font-size: var(--ti-fs-label); letter-spacing: 0.3em; text-transform: uppercase; } /* Der orangene quadratische Punkt: Markensignatur. Schliesst die Wortmarke, signiert Ueberschriften, akzentuiert CTAs. CSS-Quadrat, kein Zeichen. */ .dot-mark { display: inline-block; width: 0.42em; height: 0.42em; background: var(--ti-gold); margin-left: 0.08em; transform: translateY(-0.02em); vertical-align: baseline; flex: 0 0 auto; } /* ========================================================================== 4. LAYOUT: CONTAINER / SEKTIONEN ========================================================================== */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--ti-s-5); width: 100%; } .section { padding-block: var(--section-py); background-color: var(--ti-bg); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== 5. BUTTONS / BADGES Label-Stil (Barlow Condensed, gesperrt, uppercase), scharfe Ecken. Primaerer CTA: Gold-Flaeche + Gold-Glow. Der Quadrat-Punkt schiebt sich als Mikro-Interaktion beim Hover in den Button. ========================================================================== */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--ti-s-2); padding: var(--ti-s-3) var(--ti-s-5); font-family: var(--ti-label); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.22em; line-height: 1; text-transform: uppercase; text-align: center; border: 2px solid transparent; border-radius: var(--ti-r-1); cursor: pointer; transition: transform var(--ti-dur-base) var(--ti-ease-standard), box-shadow var(--ti-dur-base) var(--ti-ease-standard), background-color var(--ti-dur-base) var(--ti-ease-standard); } /* Der kleine Quadrat-Punkt innerhalb des Buttons: unsichtbar/breite 0 im Ruhezustand, schiebt sich bei Hover/Fokus sichtbar ein. */ .btn__dot { display: inline-block; width: 0; height: 0.55em; background: currentColor; opacity: 0; flex: 0 0 auto; transition: width var(--ti-dur-base) var(--ti-ease-standard), opacity var(--ti-dur-base) var(--ti-ease-standard); } /* Primaerer CTA: dunkler Text auf Gold-Flaeche. Gold NIE als Fliesstext. */ .btn--cta { background-color: var(--ti-gold); color: var(--ti-black); box-shadow: var(--ti-shadow-gold); } .btn--cta .btn__dot { background-color: var(--ti-black); } .btn--cta:hover, .btn--cta:focus-visible { transform: translateY(-2px) scale(1.015); box-shadow: 0 10px 28px rgba(220, 152, 50, .42); } .btn--cta:hover .btn__dot, .btn--cta:focus-visible .btn__dot { width: 0.55em; opacity: 1; } .btn--cta:active { transform: translateY(0) scale(1); } /* Fokus-Ring auf Gold-Flaeche: Standard-Gold-Outline waere unsichtbar, daher ein zweifarbiger Ring (Papier + Schwarz), der auf jedem Hintergrund (hell oder dunkel/Hero) sichtbar bleibt. */ .btn--cta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ti-paper), 0 0 0 6px var(--ti-black), var(--ti-shadow-gold); } /* Ghost-Button: transparente Flaeche, dunkle Kontur. Fuer sekundaere Aktionen auf hellem Grund. */ .btn--ghost { background-color: transparent; color: var(--ti-fg); border-color: var(--ti-fg); } .btn--ghost:hover, .btn--ghost:focus-visible { background-color: var(--ti-fg); color: var(--ti-paper); } /* Dunkler Button: Schwarze Flaeche, weisser Text. Fuer Kontexte auf Papier. */ .btn--dark { background-color: var(--ti-black); color: var(--ti-paper); } .btn--dark:hover, .btn--dark:focus-visible { background-color: var(--ti-n-800); } /* Badge/Pill (kleine Statuslabels) - Pillenform ist ausschliesslich hierfuer reserviert, niemals fuer Buttons. */ .badge { display: inline-flex; align-items: center; padding: var(--ti-s-1) var(--ti-s-3); font-family: var(--ti-label); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.25em; text-transform: uppercase; border-radius: var(--ti-r-pill); background-color: var(--ti-n-100); color: var(--ti-fg); } /* ========================================================================== 6. HEADER (sticky, verdichtet bei Scroll ohne Layout-Shift) ========================================================================== */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background-color: rgba(255, 255, 255, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: background-color var(--ti-dur-base) var(--ti-ease-standard), border-color var(--ti-dur-base) var(--ti-ease-standard), box-shadow var(--ti-dur-base) var(--ti-ease-standard); } .site-header.is-scrolled { background-color: rgba(255, 255, 255, 0.97); border-bottom-color: var(--ti-line); box-shadow: var(--ti-shadow-1); } /* Duenne goldene Scroll-Fortschrittsleiste am oberen Rand. */ .scroll-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background-color: transparent; z-index: var(--z-progress); pointer-events: none; } .scroll-progress__fill { height: 100%; width: 0%; background-color: var(--ti-gold); transform-origin: left; } /* Ohne JS bleibt die Leiste unsichtbar (0 Breite) statt fehlerhaft zu wirken. */ .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ti-s-4); min-height: var(--header-h); padding-block: var(--ti-s-3); transition: min-height var(--ti-dur-base) var(--ti-ease-standard), padding-block var(--ti-dur-base) var(--ti-ease-standard); } .site-header.is-scrolled .site-header__inner { min-height: var(--header-h-scrolled); padding-block: var(--ti-s-2); } .site-header__logo { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--ti-s-2); white-space: nowrap; } .site-header__logo-word { font-family: var(--ti-display); font-weight: 900; font-size: clamp(1.05rem, 2.2vw, 1.35rem); letter-spacing: -0.01em; line-height: 1; color: var(--ti-fg); } .site-header__logo-sub { font-family: var(--ti-label); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ti-fg-2); } .site-header__nav { display: flex; align-items: center; } /* Header-CTA auf sehr kleinen Screens ausblenden: dort uebernimmt der Hero-CTA im Fluss und spaeter der schwebende Bottom-CTA. */ .site-header__cta { display: none; padding: var(--ti-s-3) var(--ti-s-4); } /* ========================================================================== 7. HERO Showpiece: schwarzer Grund, gestaffelte Headline-Animation beim First Load, dezente Parallax-Markenszene (Punktfeld + Flag-Cut-Flaeche). ========================================================================== */ .hero { position: relative; overflow: hidden; isolation: isolate; background-color: var(--ti-black); color: var(--ti-paper); padding-block: clamp(4.5rem, 12vw, 8rem) clamp(3.5rem, 9vw, 6rem); } /* --- Dekorative Markenszene (Punktfeld + Flag-Cut) --- */ .hero__scene { position: absolute; inset: 0; z-index: var(--z-scene); pointer-events: none; overflow: hidden; } .hero__flag { position: absolute; top: -15%; right: -10%; width: 62%; height: 130%; background-color: rgba(220, 152, 50, 0.07); clip-path: var(--ti-clip-flag-right); will-change: transform; } .hero__dots { position: absolute; top: 0; right: 0; width: 68%; height: 100%; opacity: 0.85; will-change: transform; } .hero__dots rect { fill: var(--ti-gold); } .hero__inner { position: relative; z-index: var(--z-content); display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .hero__title { font-family: var(--ti-display); font-weight: 900; font-size: var(--ti-fs-display-xl); line-height: 0.96; letter-spacing: -0.02em; text-wrap: balance; max-width: 15ch; margin: 0 0 var(--ti-s-5); color: var(--ti-paper); } .hero__title .dot-mark { width: 0.34em; height: 0.34em; } /* Wort-fuer-Wort-Stagger beim First Load. Ohne JS oder bei reduzierter Bewegung bleiben die Woerter direkt sichtbar (kein Verstecken hinter einer JS-Klasse), siehe js/main.js und Abschnitt 13. */ .hero__word { display: inline-block; } html.js .hero--animate-in .hero__word { opacity: 0; transform: translateY(18px); } html.js .hero--animate-in.hero--animated .hero__word { opacity: 1; transform: none; transition: opacity var(--ti-dur-slow) var(--ti-ease-entrance), transform var(--ti-dur-slow) var(--ti-ease-entrance); } html.js .hero--animate-in.hero--animated .hero__word:nth-child(1) { transition-delay: 0ms; } html.js .hero--animate-in.hero--animated .hero__word:nth-child(2) { transition-delay: 70ms; } html.js .hero--animate-in.hero--animated .hero__word:nth-child(3) { transition-delay: 140ms; } html.js .hero--animate-in.hero--animated .hero__word:nth-child(4) { transition-delay: 210ms; } html.js .hero--animate-in.hero--animated .hero__word:nth-child(5) { transition-delay: 280ms; } /* Der Quadrat-Punkt pulst einmalig, sobald die Headline eingeblendet ist. */ html.js .hero--animate-in.hero--animated .hero__word:last-child .dot-mark { animation: tiDotPulse 640ms var(--ti-ease-entrance) 620ms both; } @keyframes tiDotPulse { 0% { transform: translateY(-0.02em) scale(1); } 45% { transform: translateY(-0.02em) scale(1.65); box-shadow: 0 0 0 6px rgba(220, 152, 50, .28); } 100% { transform: translateY(-0.02em) scale(1); box-shadow: none; } } .hero__subtitle { color: rgba(255, 255, 255, 0.78); font-size: var(--ti-fs-body-l); max-width: 55ch; margin-bottom: var(--ti-s-6); } .hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ti-s-4); margin-bottom: var(--ti-s-6); } .hero__cta { width: 100%; cursor: pointer; } .hero__secondary-link { display: inline-flex; align-items: center; gap: var(--ti-s-2); font-family: var(--ti-label); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); padding-block: var(--ti-s-2); border-bottom: 1px solid rgba(255, 255, 255, 0.32); transition: color var(--ti-dur-base) var(--ti-ease-standard), border-color var(--ti-dur-base) var(--ti-ease-standard); } .hero__secondary-arrow { display: inline-block; transition: transform var(--ti-dur-base) var(--ti-ease-standard); } .hero__secondary-link:hover, .hero__secondary-link:focus-visible { color: var(--ti-gold); border-color: var(--ti-gold); } .hero__secondary-link:hover .hero__secondary-arrow, .hero__secondary-link:focus-visible .hero__secondary-arrow { transform: translateX(3px); } .hero__trust { margin-top: var(--ti-s-2); } .hero__trust-kpi, .hero__trust-logos { font-size: var(--ti-fs-body-s); color: rgba(255, 255, 255, 0.68); margin: 0; max-width: 55ch; } .hero__trust-kpi strong { color: var(--ti-gold); font-weight: 700; } /* ========================================================================== 8. FLOATING-CTA (mobil, schwebende Bottom-Bar) ========================================================================== */ .floating-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-floating); padding: var(--ti-s-3) 0; padding-bottom: calc(var(--ti-s-3) + env(safe-area-inset-bottom)); background-color: var(--ti-black); border-top: 2px solid var(--ti-gold); box-shadow: 0 -8px 24px rgba(14, 14, 14, .35); /* Startzustand: ausgeblendet, ausserhalb des Viewports. Wird per JS (Klasse .is-visible) eingeblendet, sobald der Hero-CTA weggescrollt ist. */ transform: translateY(110%); opacity: 0; visibility: hidden; transition: transform 260ms var(--ti-ease-standard), opacity 260ms var(--ti-ease-standard), visibility 260ms var(--ti-ease-standard); } .floating-cta.is-visible { transform: translateY(0); opacity: 1; visibility: visible; } .floating-cta__inner { display: flex; } .floating-cta__btn { width: 100%; border-radius: var(--ti-r-1); } /* ========================================================================== 9. INHALTS-SEKTIONEN (Sektionen 2-9) Neutraler Uebergangs-Style: alternierende Papier-/Off-White-Flaechen, Brand-Typo, zurueckhaltende Karten ohne Farbverlauf oder Seitenkanten- Akzent. Der inhaltliche Feinschliff folgt in Pass 2 - hier geht es nur darum, dass die Seite zwischen Hero und Footer nicht bricht. ========================================================================== */ .section--alt { background-color: var(--ti-bg-alt); border-block: 1px solid var(--ti-line); } .section__head { max-width: 65ch; margin-bottom: var(--ti-s-8); } .section__intro { color: var(--ti-fg-2); margin-bottom: 0; } /* --- Problem: grosse typografische Aussage + Fakten-Leiste (bewusst KEIN Karten-Grid - eigene Art-Direction je Sektion) --- */ .problem__statement { font-family: var(--ti-display); font-weight: 900; font-size: var(--ti-fs-display-m); line-height: 1.04; letter-spacing: -0.015em; max-width: 17ch; margin-bottom: var(--ti-s-6); color: var(--ti-fg); } .problem__lead { font-size: var(--ti-fs-body-l); color: var(--ti-fg-2); max-width: 58ch; margin-bottom: var(--ti-s-8); } .problem__facts { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ti-line); } .problem__fact { padding-block: var(--ti-s-5); border-bottom: 1px solid var(--ti-line); } .problem__fact-value { font-family: var(--ti-display); font-weight: 900; font-size: 1.375rem; line-height: 1.1; margin-bottom: var(--ti-s-2); } .problem__fact-text { color: var(--ti-fg-2); margin-bottom: 0; max-width: 44ch; } /* Choreografie-Variation: dezent gestaffelt statt alle Fakten gleichzeitig. */ .problem__fact:nth-child(2) { transition-delay: 90ms; } .problem__fact:nth-child(3) { transition-delay: 180ms; } /* --- Vergleich alt vs. neu (Loesung): interaktiver Umschalter. Ohne .is-interactive (kein JS / reduced-motion) bleiben beide Panels nebeneinander/statisch sichtbar (siehe Breakpoints). Mit JS (und ohne reduced-motion) ueberlagern sich die Panels im selben Grid-Bereich und werden per Umschalter gewechselt (Crossfade). --- */ .compare__switch { display: none; gap: var(--ti-s-3); margin-bottom: var(--ti-s-6); flex-wrap: wrap; } .compare.is-interactive .compare__switch { display: flex; } .compare__switch-btn { display: flex; flex-direction: column; gap: 0.15em; padding: var(--ti-s-3) var(--ti-s-5); font-family: var(--ti-sans); font-weight: 700; font-size: 0.9375rem; text-align: left; color: var(--ti-fg-2); background-color: var(--ti-paper); border: 2px solid var(--ti-line); border-radius: var(--ti-r-1); cursor: pointer; transition: background-color var(--ti-dur-base) var(--ti-ease-standard), color var(--ti-dur-base) var(--ti-ease-standard), border-color var(--ti-dur-base) var(--ti-ease-standard); } .compare__switch-btn span { font-family: var(--ti-label); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.65; } .compare__switch-btn[aria-pressed="true"] { background-color: var(--ti-black); color: var(--ti-paper); border-color: var(--ti-black); } .compare__switch-btn[data-panel="new"][aria-pressed="true"] { background-color: var(--ti-gold); color: var(--ti-black); border-color: var(--ti-gold); } .compare__panels { display: grid; grid-template-columns: 1fr; gap: var(--ti-s-5); } .compare.is-interactive .compare__panels { grid-template-columns: 1fr; grid-template-areas: "panel"; } .compare.is-interactive .compare__col { grid-area: panel; transition: opacity var(--ti-dur-slow) var(--ti-ease-standard), transform var(--ti-dur-slow) var(--ti-ease-standard); } .compare.is-interactive .compare__col:not(.is-active) { opacity: 0; transform: translateX(14px); pointer-events: none; } .compare__col { border: 1px solid var(--ti-line); border-radius: var(--ti-r-2); padding: var(--ti-s-6); background-color: var(--ti-bg-alt); } .compare__col--new { background-color: var(--ti-black); color: var(--ti-paper); } .compare__label { font-weight: 700; color: var(--ti-fg-2); margin-bottom: var(--ti-s-4); } .compare__col--new .compare__label { color: rgba(255, 255, 255, 0.7); } .compare__label--accent { color: var(--ti-gold); } .compare__list li { position: relative; padding-left: var(--ti-s-6); margin-bottom: var(--ti-s-3); color: var(--ti-fg-2); } .compare__col--new .compare__list li { color: rgba(255, 255, 255, 0.82); } .compare__list li:last-child { margin-bottom: 0; } .compare__list li::before { content: "\00d7"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--ti-fg-3); } .compare__list--check li::before { content: "\2713"; color: var(--ti-gold); } /* --- Schritte (So funktioniert es): Sequenz mit gezeichneter Linie. Die Linie liegt in einem eigenen .reveal-Container (data-reveal-type ="line"), der vom bestehenden Reveal-Observer/Timeout-Fallback erfasst wird, visuell aber per scaleY statt opacity/translateY animiert - dadurch bleibt der robuste .reveal-Mechanismus unangetastet. --- */ .steps-wrap { position: relative; max-width: 46rem; } .steps__line { position: absolute; left: 1.25rem; top: 1.25rem; bottom: 1.25rem; width: 2px; background-color: var(--ti-line); overflow: hidden; } .steps__line-fill { position: absolute; inset: 0; background-color: var(--ti-gold); transform: scaleY(0); transform-origin: top; } html.js [data-reveal-type="line"].reveal { opacity: 1; transform: none; } html.js [data-reveal-type="line"].reveal .steps__line-fill { transition: transform 900ms var(--ti-ease-entrance) 120ms; } html.js [data-reveal-type="line"].reveal.is-visible .steps__line-fill { transform: scaleY(1); } .steps { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--ti-s-7); counter-reset: steps; } .steps__item { display: flex; gap: var(--ti-s-5); align-items: flex-start; } .steps__item:nth-child(2) { transition-delay: 80ms; } .steps__item:nth-child(3) { transition-delay: 160ms; } .steps__item:nth-child(4) { transition-delay: 240ms; } .steps__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--ti-r-1); background-color: var(--ti-black); color: var(--ti-gold); font-family: var(--ti-display); font-weight: 900; font-size: 1.125rem; line-height: 1; position: relative; z-index: 2; } .steps__body { padding-top: 0.4rem; } .steps__title { margin-bottom: var(--ti-s-2); } .steps__text { color: var(--ti-fg-2); margin-bottom: 0; max-width: 50ch; } /* --- Warum wir: alternierende Zeilen mit Flag-Cut-Element (Brand- Signatur-Winkel statt Karten-Grid - eigene Art-Direction). --- */ .reasons { display: flex; flex-direction: column; gap: var(--ti-s-8); } .reasons__row { display: grid; grid-template-columns: 1fr; gap: var(--ti-s-5); align-items: center; } .reasons__row:nth-child(2) { transition-delay: 60ms; } .reasons__row:nth-child(3) { transition-delay: 120ms; } .reasons__figure { min-height: 128px; display: flex; align-items: center; padding: var(--ti-s-5) var(--ti-s-8) var(--ti-s-5) var(--ti-s-5); background-color: var(--ti-n-100); clip-path: var(--ti-clip-flag-right); } .reasons__figure-label { font-family: var(--ti-label); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; font-size: 0.8125rem; color: var(--ti-fg-2); } .reasons__text h3 { margin-bottom: var(--ti-s-2); } .reasons__text p { color: var(--ti-fg-2); margin-bottom: 0; max-width: 56ch; } /* --- Kennzahlen (Ergebnisse) --- */ .stat-grid { display: grid; grid-template-columns: 1fr; gap: var(--ti-s-5); margin-bottom: var(--ti-s-8); } .stat { text-align: center; background-color: var(--ti-paper); border: 1px solid var(--ti-line); border-radius: var(--ti-r-2); padding: var(--ti-s-6); } .stat:nth-child(2) { transition-delay: 90ms; } .stat:nth-child(3) { transition-delay: 180ms; } .stat__value { display: block; font-family: var(--ti-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; line-height: 1; color: var(--ti-gold); margin-bottom: var(--ti-s-3); font-variant-numeric: tabular-nums; } .stat__label { display: block; color: var(--ti-fg-2); font-size: var(--ti-fs-body-s); } .stat__note { display: block; margin-top: var(--ti-s-3); color: var(--ti-fg-3); font-size: 0.6875rem; font-style: italic; } /* --- Kundenstimmen (Ergebnisse) --- */ .quote-grid { display: grid; grid-template-columns: 1fr; gap: var(--ti-s-5); } .quote { margin: 0; background-color: var(--ti-paper); border: 1px solid var(--ti-line); border-radius: var(--ti-r-2); padding: var(--ti-s-6); } .quote__text { font-style: normal; margin-bottom: var(--ti-s-4); } .quote__author { color: var(--ti-fg-2); font-size: var(--ti-fs-body-s); font-weight: 600; } /* --- Angebot: Checkliste + Panel (Zwei-Spalten-Split statt Karten-Grid) --- */ .offer { display: grid; grid-template-columns: 1fr; gap: var(--ti-s-7); align-items: start; } .offer__eyebrow { font-family: var(--ti-label); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.75rem; color: var(--ti-fg-3); margin-bottom: var(--ti-s-5); } .offer__checklist li { position: relative; padding-left: var(--ti-s-6); margin-bottom: var(--ti-s-4); color: var(--ti-fg-2); font-size: var(--ti-fs-body-l); } .offer__checklist li:last-child { margin-bottom: 0; } .offer__checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--ti-gold); } .offer__panel { background-color: var(--ti-off-white); border: 1px solid var(--ti-line); border-radius: var(--ti-r-2); padding: var(--ti-s-7) var(--ti-s-6); } .offer__panel-meta { display: block; font-family: var(--ti-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.75rem; color: var(--ti-fg-3); margin-bottom: var(--ti-s-3); } .offer__panel-title { margin-bottom: var(--ti-s-3); } .offer__panel-text { color: var(--ti-fg-2); margin-bottom: var(--ti-s-6); } .offer__panel-btn { width: 100%; } /* --- FAQ-Accordion (nativ via details/summary, ohne JS bedienbar) --- */ .faq { display: grid; gap: var(--ti-s-4); max-width: 800px; } .faq__item { background-color: var(--ti-paper); border: 1px solid var(--ti-line); border-radius: var(--ti-r-2); overflow: hidden; } .faq__question { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--ti-s-5); padding: var(--ti-s-5) var(--ti-s-6); font-family: var(--ti-sans); font-weight: 700; font-size: var(--ti-fs-body-l); color: var(--ti-fg); } .faq__question::-webkit-details-marker { display: none; } /* Rotierender +/- Indikator: zwei Balken, der vertikale rotiert bei [open] um 90 Grad auf den horizontalen - visuell "+" -> "-". */ .faq__icon { position: relative; flex: 0 0 auto; width: 1rem; height: 1rem; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background-color: var(--ti-gold); } .faq__icon::before { width: 100%; height: 2px; transform: translate(-50%, -50%); } .faq__icon::after { width: 2px; height: 100%; transform: translate(-50%, -50%); transition: transform var(--ti-dur-base) var(--ti-ease-standard); } .faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); } /* Oeffnen-Animation rein per CSS (grid-template-rows 0fr -> 1fr), damit sie auch ohne JS funktioniert. Das author-CSS "display:grid" ueberschreibt die UA-Regel "details:not([open]) > *:not(summary){display:none}". */ .faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ti-dur-slow) var(--ti-ease-standard); } .faq__item[open] .faq__answer { grid-template-rows: 1fr; } .faq__answer-inner { overflow: hidden; min-height: 0; } .faq__answer-inner p { padding: var(--ti-s-1) var(--ti-s-6) var(--ti-s-5); color: var(--ti-fg-2); margin: 0; } /* --- Abschluss-CTA --- */ .final-cta { position: relative; text-align: center; background-color: var(--ti-black); color: var(--ti-paper); } .final-cta__inner { display: flex; flex-direction: column; align-items: center; } .final-cta__title { max-width: 22ch; color: var(--ti-paper); } .final-cta__text { color: rgba(255, 255, 255, 0.75); max-width: 55ch; margin-bottom: var(--ti-s-6); } .final-cta__btn { width: 100%; } /* ========================================================================== 10. FOOTER Schwarzer Grund, weisse Wortmarke, Abschluss-Panel im Brand-Ton, Kontakt-/Rechtliches-Spalten, Copyright-Zeile. ========================================================================== */ .site-footer { background-color: var(--ti-black); color: var(--ti-paper); padding-block: var(--ti-s-9) var(--ti-s-6); /* Duenne Trennkante zum ebenfalls schwarzen Abschluss-CTA (Sektion 9): macht die schwarze Klammer Hero...Abschluss-CTA/Footer als bewusste Komposition lesbar statt als zusammengelaufene Flaeche. */ border-top: 1px solid rgba(255, 255, 255, 0.12); } /* Abschluss-Panel im Brand-Ton, direkt oberhalb der Kontaktspalten. */ .site-footer__panel { position: relative; overflow: hidden; background-color: var(--ti-n-800); padding: var(--ti-s-7) var(--ti-s-6); margin-bottom: var(--ti-s-9); border-radius: var(--ti-r-2); } .site-footer__panel-dot { position: absolute; top: var(--ti-s-5); right: var(--ti-s-5); width: 2.5rem; height: 2.5rem; background-color: var(--ti-gold); } .site-footer__panel-title { font-family: var(--ti-display); font-weight: 900; font-size: clamp(1.5rem, 3.6vw, 2.25rem); line-height: 1.05; letter-spacing: -0.015em; max-width: 18ch; color: var(--ti-paper); margin: 0 0 var(--ti-s-5); } .site-footer__panel .btn--cta { position: relative; z-index: 1; } .site-footer__inner { display: grid; grid-template-columns: 1fr; gap: var(--ti-s-8); } .site-footer__brand { display: flex; flex-direction: column; gap: var(--ti-s-3); } .site-footer__logo { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--ti-s-2); margin: 0; } .site-footer__logo-word { font-family: var(--ti-display); font-weight: 900; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--ti-paper); line-height: 1; } .site-footer__logo-sub { font-family: var(--ti-label); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } .site-footer__tagline { color: rgba(255, 255, 255, 0.68); font-size: var(--ti-fs-body-s); max-width: 42ch; margin: 0; } .site-footer__heading { font-family: var(--ti-label); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin: 0 0 var(--ti-s-3); } .site-footer__address { font-style: normal; color: rgba(255, 255, 255, 0.78); font-size: var(--ti-fs-body-s); } .site-footer__address p { margin: 0 0 var(--ti-s-2); max-width: none; } .site-footer__address p:last-child { margin-bottom: 0; } .site-footer__address a { color: rgba(255, 255, 255, 0.78); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.3); } .site-footer__address a:hover, .site-footer__address a:focus-visible { color: var(--ti-gold); text-decoration-color: var(--ti-gold); } .site-footer__social { display: flex; flex-wrap: wrap; gap: var(--ti-s-4); margin-top: var(--ti-s-4); } .site-footer__social a { color: rgba(255, 255, 255, 0.78); font-size: var(--ti-fs-body-s); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.3); } .site-footer__social a:hover, .site-footer__social a:focus-visible { color: var(--ti-gold); text-decoration-color: var(--ti-gold); } .site-footer__legal-list { display: flex; flex-direction: column; gap: var(--ti-s-2); } .site-footer__legal-list a { color: rgba(255, 255, 255, 0.78); font-size: var(--ti-fs-body-s); } .site-footer__legal-list a:hover, .site-footer__legal-list a:focus-visible { color: var(--ti-gold); text-decoration: underline; text-underline-offset: 3px; } .site-footer__bottom { margin-top: var(--ti-s-8); padding-top: var(--ti-s-5); border-top: 1px solid rgba(255, 255, 255, 0.14); } .site-footer__copyright { color: rgba(255, 255, 255, 0.55); font-size: var(--ti-fs-caption); margin: 0; } /* ========================================================================== 11. REVEAL-ANIMATIONEN (Progressive Enhancement) Startzustand nur setzen, wenn JS aktiv ist (html.js). Ohne JS bleibt alles sofort sichtbar. js/main.js schaltet zusaetzlich einen Sicherheits- Fallback (Timeout), falls der IntersectionObserver nie feuert. ========================================================================== */ html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ti-ease-standard), transform 500ms var(--ti-ease-standard); will-change: opacity, transform; } html.js .reveal.is-visible { opacity: 1; transform: none; } /* ========================================================================== 12. BREAKPOINTS (min-width, mobil-zuerst) ========================================================================== */ /* --- >= 480px: kleine Phones quer / grosse Phones --- */ @media (min-width: 480px) { .hero__cta { width: auto; } .hero__actions { flex-direction: row; align-items: center; } } /* --- >= 768px: Tablets --- */ @media (min-width: 768px) { body { font-size: 1.0625rem; /* Floating-CTA ist ab hier ausgeblendet, Ausgleichs-Padding entfaellt. */ padding-bottom: 0; } .site-header__cta { display: inline-flex; } .floating-cta { display: none; } .stat-grid { grid-template-columns: repeat(2, 1fr); } .compare__panels { grid-template-columns: repeat(2, 1fr); } .quote-grid { grid-template-columns: repeat(2, 1fr); } .offer { grid-template-columns: 1fr 1fr; } .reasons__row { grid-template-columns: 1fr 1.4fr; gap: var(--ti-s-7); } .reasons__row:nth-child(even) { direction: rtl; } .reasons__row:nth-child(even) > * { direction: ltr; } .reasons__row:nth-child(even) .reasons__figure { clip-path: var(--ti-clip-flag-left); padding: var(--ti-s-5) var(--ti-s-5) var(--ti-s-5) var(--ti-s-8); } .problem__facts { grid-template-columns: repeat(3, 1fr); } .problem__fact { border-bottom: none; border-right: 1px solid var(--ti-line); padding: var(--ti-s-5) var(--ti-s-6); } .problem__fact:first-child { padding-left: 0; } .problem__fact:last-child { border-right: none; padding-right: 0; } .final-cta__btn { width: auto; } .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; gap: var(--ti-s-6); } .site-footer__bottom { grid-column: 1 / -1; } .site-footer__panel { padding: var(--ti-s-8); } } /* --- >= 1024px: kleiner Desktop --- */ @media (min-width: 1024px) { .hero { padding-block: clamp(5rem, 10vw, 9rem) clamp(4rem, 9vw, 7rem); } .stat-grid { grid-template-columns: repeat(3, 1fr); } } /* --- >= 1280px: grosser Desktop --- */ @media (min-width: 1280px) { .hero__title { max-width: 17ch; } } /* ========================================================================== 13. prefers-reduced-motion Bewegungen/Transitions praktisch abschalten, Reveal- und Hero-Elemente sofort sichtbar. Smooth-Scroll deaktivieren. Parallax wird zusaetzlich in js/main.js per matchMedia-Guard gar nicht erst gestartet. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.js .reveal { opacity: 1; transform: none; } html.js .hero--animate-in .hero__word, html.js .hero--animate-in.hero--animated .hero__word { opacity: 1; transform: none; } .floating-cta { transition: none; } .scroll-progress__fill { transition: none; } .hero__flag, .hero__dots { transform: none !important; } }