/* ============================================================= VINCERO – Design System Typografie: Bricolage Grotesque (display) + Plus Jakarta Sans (body) ============================================================= */ /* ─── FONTS (selbst gehostet, DSGVO: keine Verbindung zu Google) ─ */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/bricolage-grotesque-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/bricolage-grotesque-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/plus-jakarta-sans-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ─── TOKENS ─────────────────────────────────────────────── */ :root { /* Farben */ --c-bg: #F3F0EA; --c-navy: #14213D; --c-navy-deep: #0E1827; --c-gold: #C9A24B; --c-gold-hover: #D9B45A; --c-gold-text: #85681F; /* aus --c-gold abgedunkelt: Text-Gold auf hellen Flächen (4.6:1 auf #F3F0EA) */ --c-text: #1A1A1A; --c-muted: #5C5852; --c-light: #F3F0EA; --c-card: #FFFFFF; --c-border: rgba(26, 26, 26, 0.08); --c-gold-dim: rgba(201, 162, 75, 0.12); /* Typografie */ --f-display: 'Bricolage Grotesque', system-ui, sans-serif; --f-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* Typoskala */ --t-xs: 0.75rem; /* 12 */ --t-sm: 0.875rem; /* 14 */ --t-base: 1rem; /* 16 */ --t-lg: 1.125rem; /* 18 */ --t-xl: 1.375rem; /* 22 */ --t-2xl: 1.875rem; /* 30 */ --t-3xl: clamp(2.25rem, 4.8vw, 3.5rem); --t-hero: clamp(2.125rem, 5vw, 3.75rem); /* Spacing (4/8-Raster) */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; /* Layout */ --max-w: 1200px; --max-w-narrow: 680px; --sec-pad: clamp(var(--s-20), 10vw, var(--s-32)); --gutter: clamp(var(--s-6), 5vw, var(--s-12)); /* Radius */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; /* Schatten */ --shadow-card: 0 1px 4px rgba(20,33,61,.05), 0 4px 16px rgba(20,33,61,.07); --shadow-card-hover: 0 2px 8px rgba(20,33,61,.09), 0 8px 28px rgba(20,33,61,.13); /* Übergänge */ --tr-fast: 150ms ease; --tr-base: 250ms ease; /* Z-Ebenen */ --z-base: 0; --z-hero-mesh: 0; /* WebGL canvas – unterste Ebene im Hero */ --z-hero-svg: 1; /* SVG-Linien über dem Canvas */ --z-hero: 2; /* Textinhalt über allem */ --z-header: 100; /* Ergänzter Spacing-Schritt */ --s-14: 3.5rem; } /* ─── RESET ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } body { font-family: var(--f-body); font-size: var(--t-base); line-height: 1.65; color: var(--c-text); background-color: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } address { font-style: normal; } /* ─── SKIP LINK ──────────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: var(--s-4); background: var(--c-gold); color: var(--c-navy); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; z-index: 9999; } .skip-link:focus { top: var(--s-4); } /* ─── GOLD ACCENT INLINE ─────────────────────────────────── */ em.text-gold { font-style: normal; color: var(--c-gold); } /* Auf hellen Sections: abgedunkeltes Text-Gold (Kontrast) */ .section-light .headline-display em.text-gold { color: var(--c-gold-text); } /* ─── STATS STRIP ────────────────────────────────────────── */ .stats-strip { background: #FFFFFF; border-top: 1px solid rgba(201, 162, 75, 0.15); border-bottom: 1px solid rgba(201, 162, 75, 0.15); padding-block: var(--s-10); } /* Mobil: kompaktes 2×2-Raster statt 4er-Stapel */ .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-4); } @media (min-width: 640px) { .stats-row { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 0; } } .stat-item { display: flex; flex-direction: column; gap: var(--s-1); text-align: center; flex: 1; padding-inline: var(--s-4); } .stat-number { font-family: var(--f-display); font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; letter-spacing: -0.025em; color: var(--c-navy); line-height: 1.1; } .stat-label { font-size: var(--t-sm); color: var(--c-muted); line-height: 1.4; margin-top: var(--s-1); } .stat-divider { display: none; } @media (min-width: 640px) { .stat-divider { display: block; width: 1px; height: 3rem; background: rgba(201, 162, 75, 0.25); flex-shrink: 0; } } /* ─── LAYOUT HELPERS ─────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); } /* narrow inner wrapper – used inside .container */ .container-narrow { max-width: var(--max-w-narrow); margin-inline: 0; /* left-aligned on light sections */ } .section-problem .container-narrow { margin-inline: auto; text-align: center; } /* ─── BUTTONS ────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font-family: var(--f-body); font-size: var(--t-base); font-weight: 600; letter-spacing: 0.01em; line-height: 1; padding: var(--s-4) var(--s-8); border-radius: 9999px; /* Shape-Lock: alle CTAs sind Pills */ border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; min-height: 48px; -webkit-tap-highlight-color: transparent; transition: background-color var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast); } .btn:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; } /* Pill CTA – used in header */ .btn-header { background-color: var(--c-navy); color: var(--c-light); border-color: var(--c-navy); border-radius: 9999px; font-size: var(--t-sm); min-height: 38px; padding: var(--s-2) var(--s-5); white-space: nowrap; } .btn-header:hover { background-color: var(--c-gold); border-color: var(--c-gold); color: var(--c-navy); transform: none; box-shadow: none; } /* Scrolled: CTA wird Gold */ .site-header.is-scrolled .btn-header { background-color: var(--c-gold); border-color: var(--c-gold); color: var(--c-navy); } .site-header.is-scrolled .btn-header:hover { background-color: var(--c-gold-hover); border-color: var(--c-gold-hover); } /* Gold – primary CTA */ .btn-gold { background-color: var(--c-gold); color: var(--c-navy); border-color: var(--c-gold); } .btn-gold:hover { background-color: var(--c-gold-hover); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201,162,75,.35); } .btn-gold:active { transform: translateY(0); } /* Outline – secondary CTA on light bg */ .btn-outline { background-color: transparent; color: var(--c-navy); border-color: var(--c-navy); } .btn-outline:hover { background-color: var(--c-navy); color: var(--c-light); } /* Outline – secondary CTA on dark/navy backgrounds */ .btn-outline-light { background-color: transparent; color: var(--c-light); border-color: rgba(243, 240, 234, 0.45); } .btn-outline-light:hover { background-color: var(--c-light); color: var(--c-navy); border-color: var(--c-light); } /* ─── SHARED TYPOGRAPHY ──────────────────────────────────── */ .headline-display { font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.022em; color: var(--c-text); margin-bottom: var(--s-8); } .headline-light { color: var(--c-light); } .headline-mid { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--c-text); margin-bottom: var(--s-4); } .eyebrow { font-family: var(--f-body); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-text); margin-bottom: var(--s-4); } .body-text { font-size: var(--t-lg); line-height: 1.78; color: var(--c-text); max-width: 60ch; } .body-text--muted { color: var(--c-muted); } .body-text--light { color: rgba(243,240,234,.82); } /* ─── SCROLL FADE-IN ─────────────────────────────────────── */ .fade-in { opacity: 0; transform: translateY(22px) scale(0.97); transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--reveal-delay, 0ms); } .fade-in.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .fade-in { opacity: 1; transform: none; transition: none; } } /* ============================================================= HEADER ============================================================= */ .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header); display: flex; justify-content: center; padding-block-start: var(--s-4); padding-inline: var(--gutter); pointer-events: none; transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms cubic-bezier(0.16, 1, 0.3, 1); } /* Im Kontaktbereich ausblenden: der Pill-CTA würde sonst den identischen Formular-CTA überlappen (Doppel-CTA-Kollision) */ .site-header.is-suppressed { transform: translateY(-120%); opacity: 0; } .site-header.is-suppressed .header-pill { pointer-events: none; } .header-pill { display: flex; align-items: center; gap: var(--s-4); max-width: 960px; width: 100%; background: rgba(243, 240, 234, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 9999px; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); box-shadow: 0 2px 8px rgba(20, 33, 61, .10), 0 8px 32px rgba(20, 33, 61, .12); border: 1px solid rgba(243, 240, 234, .55); pointer-events: auto; transition: background-color var(--tr-base), box-shadow var(--tr-base); } .site-header.is-scrolled .header-pill { background: rgba(20, 33, 61, 0.96); box-shadow: 0 2px 8px rgba(0, 0, 0, .18), 0 8px 32px rgba(0, 0, 0, .22); } /* Logo-Farbe auf cremem Pill-Hintergrund */ .header-pill .logo-rest { color: var(--c-navy); } .site-header.is-scrolled .header-pill .logo-rest { color: var(--c-light); } /* Nav-Links */ .header-nav { display: flex; align-items: center; gap: var(--s-6); flex: 1; justify-content: center; } .nav-link { position: relative; font-family: var(--f-body); font-size: var(--t-sm); font-weight: 500; color: var(--c-navy); letter-spacing: 0.01em; white-space: nowrap; transition: color var(--tr-fast); } .nav-link:hover { color: var(--c-gold-text); } .nav-link:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 2px; } /* Scroll-Spy: Gold-Unterstrich slidet unter dem aktiven Abschnitt ein */ .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 1px; background: var(--c-gold); transform: scaleX(0); transform-origin: left center; transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); } .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); } .site-header.is-scrolled .nav-link { color: rgba(243, 240, 234, .82); } .site-header.is-scrolled .nav-link:hover { color: var(--c-gold); } @media (max-width: 767px) { .header-nav { display: none; } } /* ─── BURGER + MOBILE NAV (Pill-Stil) ─────────────────────── */ .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0 10px; background: none; border: none; cursor: pointer; border-radius: 9999px; -webkit-tap-highlight-color: transparent; } .nav-burger:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; } .nav-burger-line { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--c-navy); transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); } .site-header.is-scrolled .nav-burger-line { background: var(--c-light); } .nav-burger.is-open .nav-burger-line:first-child { transform: translateY(4px) rotate(45deg); } .nav-burger.is-open .nav-burger-line:last-child { transform: translateY(-4px) rotate(-45deg); } .mobile-nav { position: fixed; z-index: calc(var(--z-header) - 1); left: var(--gutter); right: var(--gutter); top: 76px; display: none; flex-direction: column; gap: var(--s-1); padding: var(--s-4); background: var(--c-navy); border-radius: 24px; box-shadow: 0 4px 12px rgba(20, 33, 61, .18), 0 16px 48px rgba(20, 33, 61, .28); opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: top center; pointer-events: none; transition: opacity 250ms cubic-bezier(0.16, 1, 0.3, 1), transform 250ms cubic-bezier(0.16, 1, 0.3, 1); } .mobile-nav.is-open { opacity: 1; transform: none; pointer-events: auto; } .mobile-nav-link { padding: var(--s-3) var(--s-4); font-family: var(--f-body); font-size: var(--t-base); font-weight: 600; color: rgba(243, 240, 234, .88); text-decoration: none; border-radius: 12px; transition: background-color var(--tr-fast), color var(--tr-fast); } .mobile-nav-link:hover { background: rgba(255, 255, 255, .06); color: var(--c-light); } .mobile-nav-link:active { background: rgba(255, 255, 255, .10); } .mobile-nav-link:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -2px; } .mobile-nav-cta { margin-top: var(--s-2); background: var(--c-gold); color: var(--c-navy); text-align: center; border-radius: 9999px; } .mobile-nav-cta:hover { background: var(--c-gold-hover); color: var(--c-navy); } .mobile-nav-cta:active { background: var(--c-gold-hover); } @media (max-width: 767px) { .nav-burger { display: inline-flex; } .mobile-nav { display: flex; } /* CTA wandert ins Menü → Pill bleibt schlank (Logo + Burger) */ .header-pill .btn-header { display: none; } /* Pill kompakter: weniger Padding, dezenterer Schatten (Plan 5.3) */ .header-pill { padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); box-shadow: 0 1px 4px rgba(20, 33, 61, .08), 0 6px 20px rgba(20, 33, 61, .12); } } /* Logo / Wordmark */ .logo, .footer-logo { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1; text-decoration: none; transition: opacity var(--tr-fast); } .logo:hover { opacity: .85; } .logo:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 4px; border-radius: 2px; } .logo-v { color: var(--c-gold); } .logo-rest { color: var(--c-light); } /* ============================================================= HERO – Scroll-Scrubbing Video ============================================================= */ /* Scroll-Raum für das Sticky-Pinning. 320vh: Video-Scrub bleibt spürbar, ohne den Weg zum Inhalt zu strecken. */ .hero-wrapper { height: 320vh; } @media (max-width: 768px) { .hero-wrapper { height: 100dvh; } } /* Sticky Container */ .section-hero { position: sticky; top: 0; height: 100dvh; overflow: hidden; background-color: var(--c-navy); transform-origin: center center; } /* Video – Full Cover */ #hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Links dunkler, rechts transparent → Laptop-Video sichtbar */ .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to right, rgba(14, 24, 39, 0.92) 0%, rgba(14, 24, 39, 0.78) 30%, rgba(14, 24, 39, 0.25) 62%, transparent 82% ), linear-gradient( to top, rgba(14, 24, 39, 0.35) 0%, transparent 30% ); } @media (max-width: 768px) { .hero-overlay { background: rgba(14, 24, 39, 0.72); } } /* Content-Ebene */ .hero-content { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; padding-top: 96px; /* Freiraum zur fixen Header-Pill */ padding-bottom: var(--s-8); } /* Textblock – max ~50% Breite, linksbündig. 700px statt 580px: die längere Zweizeiler-Headline ("Damit Ihr Betrieb da auftaucht, wo Ihre Kunden suchen.") brauchte bei 580px vier statt zwei Zeilen und schob den Block auf 647px Höhe — bei Laptop-Fensterhöhen unter ~810px kollidierte das mit der Header-Pill. */ .hero-text { max-width: 700px; text-align: left; } /* Sicherheitsnetz für flache Fenster (Laptop-Vollbild, kein Ultrawide) */ @media (max-height: 720px) { :root { --t-hero: clamp(2rem, 4vw, 2.75rem); } .hero-subline { margin-bottom: var(--s-6); } .hero-actions { margin-bottom: var(--s-4); } } @media (max-width: 768px) { .hero-text { max-width: 100%; } } .hero-eyebrow { color: rgba(201, 162, 75, 0.85); margin-bottom: var(--s-4); } .hero-headline { font-family: var(--f-display); font-size: var(--t-hero); font-weight: 700; line-height: 1.1; letter-spacing: -0.035em; color: var(--c-light); margin-bottom: var(--s-6); } .hero-subline { font-size: var(--t-lg); line-height: 1.72; color: rgba(243, 240, 234, 0.78); margin-bottom: var(--s-10); max-width: 48ch; } .hero-content .btn-gold { border-radius: 9999px; padding-inline: var(--s-10); } .hero-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); } @media (max-width: 480px) { .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; } } .hero-trust { font-size: var(--t-sm); color: rgba(243, 240, 234, 0.55); } /* ============================================================= SHARED SECTION BASE Radial-gradient glows adapted from background-components pattern. Light sections: soft gold glow (opacity .07, multiply blend). Navy sections: warm center glow for perceived depth. ============================================================= */ .section-light { position: relative; padding-block: var(--sec-pad); background: radial-gradient(circle at 50% 40%, rgba(201, 162, 75, 0.07) 0%, transparent 68%), var(--c-bg); } .section-navy { position: relative; isolation: isolate; padding-block: var(--sec-pad); background: radial-gradient(circle at 50% 38%, rgba(201, 162, 75, 0.09) 0%, transparent 60%), var(--c-navy); } /* Floating navy tile — dark card that hovers on the cream page */ .navy-tile { position: relative; isolation: isolate; border-radius: 28px; padding: var(--sec-pad) var(--s-12); overflow: hidden; background: radial-gradient(circle at 50% 38%, rgba(201, 162, 75, 0.09) 0%, transparent 60%), var(--c-navy); box-shadow: 0 2px 4px rgba(20,33,61,.06), 0 8px 24px rgba(20,33,61,.14), 0 28px 64px rgba(20,33,61,.18), 0 56px 96px rgba(20,33,61,.10); } @media (max-width: 767px) { .navy-tile { border-radius: 18px; padding: var(--sec-pad) var(--s-6); } } /* ============================================================= PROBLEM-SPIEGEL – Leitkachel + Suchergebnis-Mockup ============================================================= */ .section-problem .headline-display { margin-bottom: var(--s-12); max-width: 18ch; } .problem-layout { display: grid; grid-template-columns: 1fr; gap: var(--s-8); align-items: start; } @media (min-width: 900px) { .problem-layout { grid-template-columns: 1.05fr 0.95fr; } } .problem-stack { display: flex; flex-direction: column; gap: var(--s-4); } .problem-stack-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); } .problem-card { background: var(--c-card); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-3); transition: box-shadow 300ms ease, transform 300ms ease; } .problem-stack-row .problem-card { padding: var(--s-6); } .problem-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } .problem-card-lead { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--c-text); } .problem-card-text { font-size: var(--t-base); line-height: 1.65; color: var(--c-muted); } /* Erste Kachel: die zentrale Aussage der Sektion, dunkel abgesetzt */ .problem-card--lead { background: var(--c-navy); box-shadow: 0 2px 4px rgba(20,33,61,.06), 0 8px 24px rgba(20,33,61,.14), 0 24px 56px rgba(20,33,61,.16); } .problem-card--lead .problem-card-lead { font-size: var(--t-xl); color: var(--c-light); } .problem-card--lead .problem-card-text { color: rgba(243, 240, 234, 0.68); } .problem-card--lead:hover { box-shadow: 0 4px 8px rgba(20,33,61,.08), 0 12px 32px rgba(20,33,61,.18), 0 32px 72px rgba(20,33,61,.20); } /* Suchergebnis-Mockup: schematischer Nachbau, kein Google-Branding. Baut auf der bestehenden Browser-Mock-Sprache auf (.browser-mock, .browser-bar, .dot) — eigene Content-Klassen (.serp-*), damit die Referenz-Mockups unberührt bleiben. */ .problem-serp .browser-mock { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3); } .serp-content { background: #1C2840; padding: var(--s-6) var(--s-5) var(--s-8); display: flex; flex-direction: column; gap: var(--s-3); } .serp-query { font-family: var(--f-display); font-size: var(--t-base); font-weight: 600; color: rgba(243, 240, 234, 0.85); padding-bottom: var(--s-3); margin-bottom: var(--s-1); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .serp-row { display: flex; align-items: center; gap: var(--s-3); } .serp-rank { flex-shrink: 0; width: 1.4em; font-family: var(--f-display); font-size: var(--t-sm); font-weight: 600; color: rgba(243, 240, 234, 0.35); } .serp-bar { height: 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); } .serp-star { flex-shrink: 0; margin-left: auto; font-size: 12px; line-height: 1; color: rgba(201, 162, 75, 0.55); } .serp-ellipsis { padding-block: 2px; text-align: center; font-size: var(--t-sm); color: rgba(255, 255, 255, 0.25); } .serp-divider { margin-block: var(--s-1); padding-block: var(--s-2); border-top: 1px dashed rgba(255, 255, 255, 0.14); border-bottom: 1px dashed rgba(255, 255, 255, 0.14); text-align: center; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); } .serp-row--own { margin-top: var(--s-1); padding: var(--s-3); border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(201, 162, 75, 0.4); } .serp-row--own .serp-rank { color: rgba(243, 240, 234, 0.5); } .serp-own-label { font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(243, 240, 234, 0.6); } /* ============================================================= SELBSTTEST – dunkle schwebende Karte (.navy-tile) ============================================================= */ .selbsttest-tile { max-width: var(--max-w); margin-inline: auto; } .selbsttest-tile .eyebrow { color: rgba(201, 162, 75, 0.85); } .selbsttest-tile .headline-display { margin-bottom: var(--s-5); max-width: 30ch; } .selbsttest-tile .body-text--light { max-width: 60ch; } .selbsttest-transition { margin-top: var(--s-5); font-weight: 500; } .selbsttest-list { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); margin-bottom: var(--s-8); max-width: 60ch; } .selbsttest-list li { position: relative; padding-left: var(--s-6); font-size: var(--t-base); line-height: 1.6; color: rgba(243, 240, 234, 0.82); } .selbsttest-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-gold); } .selbsttest-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-6); } @media (max-width: 480px) { .selbsttest-actions { flex-direction: column; align-items: stretch; } .selbsttest-actions .btn { width: 100%; } } .selbsttest-note { font-size: var(--t-sm); color: rgba(243, 240, 234, 0.55); margin-top: var(--s-2); } .selbsttest-note-link { color: rgba(243, 240, 234, 0.75); text-decoration: underline; text-underline-offset: 2px; transition: color var(--tr-fast); } .selbsttest-note-link:hover { color: var(--c-gold); } /* ============================================================= UMDEUTUNG – ruhige Textsektion ============================================================= */ .section-umdeutung .headline-display { max-width: 20ch; margin-bottom: var(--s-8); } .umdeutung-text { display: flex; flex-direction: column; gap: var(--s-5); max-width: 64ch; } /* Kontrast-Grafik: "einmal gebaut" (statisch, ein Balken) gegen "läuft weiter" (Gold, fortlaufende Reihe). Labels/Captions sind wörtlich aus dem Fließtext darüber gezogen, keine neuen Aussagen. */ .umdeutung-contrast { margin-top: var(--s-10); display: grid; grid-template-columns: 1fr; gap: var(--s-5); max-width: 860px; } @media (min-width: 768px) { .umdeutung-contrast { grid-template-columns: 0.8fr 1.2fr; } } .contrast-col { padding: var(--s-6) var(--s-8); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: var(--s-4); } .contrast-col--static { background: rgba(20, 33, 61, 0.03); border: 1px solid var(--c-border); } .contrast-col--running { background: var(--c-card); box-shadow: var(--shadow-card); } .contrast-label { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .contrast-col--static .contrast-label { color: var(--c-muted); } .contrast-col--running .contrast-label { color: var(--c-gold-text); } .contrast-bars { display: flex; align-items: center; gap: 6px; min-height: 10px; } .contrast-bar { height: 10px; border-radius: 3px; flex-shrink: 0; } .contrast-bar--static { width: 64px; background: rgba(20, 33, 61, 0.16); } .contrast-bars--running .contrast-bar { width: 16px; background: var(--c-gold); } .contrast-arrow { margin-left: 2px; color: var(--c-gold); font-size: var(--t-lg); line-height: 1; } .contrast-caption { font-size: var(--t-sm); color: var(--c-muted); } .contrast-col--running .contrast-caption { color: var(--c-text); } /* Fortlaufende Reihe baut sich beim Erscheinen der Sektion auf, ein Balken nach dem anderen — visualisiert "läuft weiter". */ .contrast-bars--running .contrast-bar { opacity: 0; transform: scaleX(0); transform-origin: left center; transition: opacity 350ms ease, transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1); } .umdeutung-contrast.is-visible .contrast-bars--running .contrast-bar { opacity: 1; transform: none; } .umdeutung-contrast.is-visible .contrast-bars--running .contrast-bar:nth-child(1) { transition-delay: 60ms; } .umdeutung-contrast.is-visible .contrast-bars--running .contrast-bar:nth-child(2) { transition-delay: 110ms; } .umdeutung-contrast.is-visible .contrast-bars--running .contrast-bar:nth-child(3) { transition-delay: 160ms; } .umdeutung-contrast.is-visible .contrast-bars--running .contrast-bar:nth-child(4) { transition-delay: 210ms; } .umdeutung-contrast.is-visible .contrast-bars--running .contrast-bar:nth-child(5) { transition-delay: 260ms; } .umdeutung-contrast.is-visible .contrast-bars--running .contrast-bar:nth-child(6) { transition-delay: 310ms; } .umdeutung-contrast.is-visible .contrast-bars--running .contrast-bar:nth-child(7) { transition-delay: 360ms; } .umdeutung-contrast.is-visible .contrast-bars--running .contrast-bar:nth-child(8) { transition-delay: 410ms; } .contrast-arrow { opacity: 0; transition: opacity 300ms ease; transition-delay: 460ms; } .umdeutung-contrast.is-visible .contrast-arrow { opacity: 1; } /* ============================================================= LÖSUNG – Service Grid ============================================================= */ .section-loesung { padding-block: var(--sec-pad); } .section-loesung .headline-display { margin-bottom: var(--s-4); } .section-loesung .eyebrow { margin-bottom: var(--s-3); } .section-loesung > .container > .body-text { margin-bottom: var(--s-4); } /* ── SERVICE LIST: card grid ───────────────────────────────── */ .service-list { margin-top: var(--s-12); display: flex; flex-direction: column; gap: var(--s-3); } /* Drei-Karten-Variante (Mechanismus): Icon oben, Titel, Text */ .service-list--cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } @media (max-width: 767px) { .service-list--cols { grid-template-columns: 1fr; } } .service-item { display: grid; grid-template-columns: 3.5rem 1fr 52px; gap: var(--s-6); align-items: center; padding: var(--s-6) var(--s-8); background: var(--c-card); border-radius: var(--r-md); box-shadow: var(--shadow-card); transition: background 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1); cursor: default; } .service-list--cols .service-item { grid-template-columns: 1fr; align-items: start; gap: var(--s-4); } .service-item:hover { background: rgba(255,255,255,0.95); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } .si-body { display: flex; flex-direction: column; gap: var(--s-1); } .si-title { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--c-text); line-height: 1.25; transition: color 300ms cubic-bezier(0.16, 1, 0.3, 1); } .service-item:hover .si-title { color: var(--c-navy); } .si-text { font-size: var(--t-base); line-height: 1.65; color: var(--c-muted); margin-top: var(--s-1); } @media (max-width: 639px) { .service-item { grid-template-columns: 2.5rem 1fr; padding: var(--s-5) var(--s-6); } .si-title { font-size: var(--t-lg); } } /* ── PAKET-KLAMMER ──────────────────────────────────────────── Gold-Linie über den drei Karten, unterbrochen vom Label. Zeigt sichtbar, was der Fließtext sagt: "Einzeln bringt Ihnen keiner davon viel. Zusammen…" — nur ab Tablet, im 1-Spalten-Stapel trägt sie nichts. */ .paket-bracket { display: none; align-items: center; gap: var(--s-3); margin-top: var(--s-8); margin-bottom: var(--s-5); } @media (min-width: 768px) { .paket-bracket { display: flex; } } .paket-bracket-line { position: relative; flex: 1; height: 1px; background: rgba(201, 162, 75, 0.4); } .paket-bracket-line:first-child::before, .paket-bracket-line:last-child::after { content: ''; position: absolute; top: 0; width: 1px; height: 8px; background: rgba(201, 162, 75, 0.4); } .paket-bracket-line:first-child::before { left: 0; } .paket-bracket-line:last-child::after { right: 0; } .paket-bracket-label { flex-shrink: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-gold-text); } /* ── MINI-VORSCHAUEN — ersetzen das abstrakte Icon je Karte ──── */ .si-preview { width: 100%; border-radius: var(--r-sm); overflow: hidden; background: #1C2840; margin-bottom: var(--s-2); } .si-preview .preview-dots { display: flex; gap: 4px; padding: var(--s-2) var(--s-3); background: rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .si-preview .preview-dots .dot { width: 6px; height: 6px; } /* Website: Mini-Browser mit zwei Textzeilen + Gold-Button-Balken */ .si-preview--site { display: flex; flex-direction: column; } .si-preview--site .preview-line { height: 6px; border-radius: 2px; margin: 0 var(--s-3); } .si-preview--site .preview-line--title { margin-top: var(--s-3); width: 55%; background: rgba(255,255,255,.55); } .si-preview--site .preview-line--text { margin-top: var(--s-2); width: 75%; background: rgba(255,255,255,.20); } .si-preview--site .preview-line--btn { margin-top: var(--s-3); margin-bottom: var(--s-3); width: 64px; height: 14px; border-radius: 4px; background: rgba(201, 162, 75, 0.75); } /* Google-Profil: Name, Sternenreihe (bewusst ohne Zahl), Zeiten-Balken, Anruf-Pill */ .si-preview--profile { padding: var(--s-4) var(--s-4) var(--s-5); } .preview-profile-name { font-family: var(--f-display); font-size: var(--t-sm); font-weight: 600; color: rgba(243, 240, 234, 0.85); } .preview-stars { margin-top: var(--s-1); font-size: 12px; letter-spacing: 2px; color: rgba(201, 162, 75, 0.55); } .preview-stars--lg { font-size: 16px; letter-spacing: 3px; } .si-preview--profile .preview-line--time { margin-top: var(--s-3); width: 50%; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); } .preview-pill { display: inline-block; margin-top: var(--s-3); padding: 4px var(--s-3); border-radius: 9999px; background: rgba(201, 162, 75, 0.16); color: rgba(201, 162, 75, 0.85); font-size: var(--t-xs); font-weight: 600; } /* Bewertungen: große Sternenreihe + zwei Zitat-Balken */ .si-preview--reviews { padding: var(--s-5) var(--s-4); } .si-preview--reviews .preview-line { height: 6px; border-radius: 2px; margin-top: var(--s-2); background: rgba(255, 255, 255, 0.20); width: 85%; } .si-preview--reviews .preview-line--quote-short { width: 55%; } .mechanismus-note { margin-top: var(--s-12); padding-top: var(--s-8); border-top: 1px solid var(--c-border); font-size: var(--t-lg); line-height: 1.78; color: var(--c-muted); max-width: 70ch; } /* ============================================================= ABLAUF – 3 Schritte ============================================================= */ .section-ablauf .headline-display { margin-bottom: var(--s-12); } .steps-grid { display: flex; flex-direction: column; gap: var(--s-16); } .step { display: grid; grid-template-columns: 1fr; gap: var(--s-8); align-items: center; } @media (min-width: 768px) { .step { grid-template-columns: 1fr 1fr; gap: var(--s-16); transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } /* Schritt 2: Bild links, Text rechts */ .step:nth-child(2) .step-img-wrap { order: -1; } .step.is-visible:hover { transform: translateY(-3px) !important; transition-duration: 280ms; } } /* Horizontales Slide-In (ersetzt Rotation) */ @media (min-width: 768px) { .step:not(.is-visible):nth-child(odd) { transform: translateX(-28px) translateY(12px); } .step:not(.is-visible):nth-child(even) { transform: translateX(28px) translateY(12px); } } .step-text-col { display: flex; flex-direction: column; gap: var(--s-4); } /* Badge + Titel in einer Zeile: weniger vertikale Leere in der Textspalte */ .step-head { display: flex; align-items: center; gap: var(--s-4); } .step-head .step-title { margin-bottom: 0; } .step-img-wrap { border-radius: 24px; overflow: hidden; background: var(--c-navy); box-shadow: 0 2px 4px rgba(20,33,61,.06), 0 8px 24px rgba(20,33,61,.14), 0 28px 64px rgba(20,33,61,.18), 0 56px 96px rgba(20,33,61,.10); } .step-img-wrap img { width: 100%; /* height:auto zwingend, sonst wirkt das height-Attribut als Fixhöhe */ height: auto; display: block; } @media (max-width: 767px) { .step-img-wrap { border-radius: 18px; } } .step-badge-row { display: flex; align-items: center; gap: var(--s-3); } .step-time { padding: 3px var(--s-3); border-radius: 999px; background: rgba(201, 162, 75, 0.14); color: var(--c-gold-text); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em; } /* Gold circle badge */ .step-badge { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(20, 33, 61, 0.35); background: rgba(20, 33, 61, 0.05); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: var(--t-base); font-weight: 600; color: var(--c-navy); flex-shrink: 0; position: relative; z-index: 1; user-select: none; } .step-body { } .step-title { font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.025em; color: var(--c-text); margin-bottom: var(--s-2); } .step-text { font-size: var(--t-lg); line-height: 1.72; color: var(--c-muted); max-width: 46ch; } /* ============================================================= REFERENZ – 3-tile portfolio grid ============================================================= */ .section-referenz { padding-block: var(--sec-pad); } .section-referenz .eyebrow { margin-bottom: var(--s-3); } .section-referenz .headline-display { margin-bottom: var(--s-12); } /* 2 Spalten: Projekte nebeneinander, CTA als volle Bar darunter */ .referenz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); align-items: stretch; } .referenz-card--cta { grid-column: 1 / -1; } /* Testimonial: volle Breite, zwischen den Projekt-Karten und der CTA-Bar */ .referenz-testi { grid-column: 1 / -1; } @media (max-width: 700px) { .referenz-grid { grid-template-columns: 1fr; } } .referenz-card { background: var(--c-card); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: box-shadow 300ms ease, transform 300ms ease; } .referenz-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } .referenz-card-mock { flex: 1; display: flex; align-items: center; padding: var(--s-4) var(--s-5); } .referenz-card-mock .browser-mock { width: 100%; } .referenz-card-info { padding: var(--s-5) var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-1); } .referenz-card-name { font-family: var(--f-display); font-size: var(--t-base); font-weight: 600; color: var(--c-text); letter-spacing: -0.01em; margin-top: var(--s-2); } .referenz-card-desc { font-size: var(--t-sm); color: var(--c-muted); } .referenz-card-note { font-size: var(--t-sm); line-height: 1.6; color: var(--c-muted); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--c-border); } /* Deaktivierte Link-Zeile für Projekte, die noch nicht gehostet sind */ .referenz-link--soon { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--t-sm); color: var(--c-muted); cursor: default; pointer-events: none; } .referenz-link-tag { padding: 2px var(--s-3); border-radius: 999px; background: rgba(201,162,75,0.14); color: var(--c-gold); font-size: var(--t-xs); font-weight: 500; } /* Badge (overrides old styles for grid context) */ .referenz-card .referenz-badge { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-navy); } /* CTA card — zurückhaltende, cremefarbene Bar (nicht die volle Navy-Fläche von früher: soll die beiden echten Referenzen darüber nicht überstrahlen) */ .referenz-card--cta { background: var(--c-card); border: 1px solid rgba(20, 33, 61, 0.14); text-decoration: none; cursor: pointer; transition: background 250ms ease, border-color 250ms ease, box-shadow 300ms ease, transform 300ms ease; } .referenz-card--cta:hover { background: rgba(20, 33, 61, 0.03); border-color: rgba(20, 33, 61, 0.22); } .referenz-card--cta:hover .referenz-cta-icon { background: rgba(201,162,75,0.28); transform: translateX(4px); } .referenz-cta-inner { display: flex; flex-direction: row; align-items: center; gap: var(--s-5); padding: var(--s-6) var(--s-8); } .referenz-cta-text { display: flex; flex-direction: column; gap: var(--s-1); } .referenz-cta-icon { width: 48px; height: 48px; flex-shrink: 0; background: rgba(201,162,75,0.14); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--c-gold); transition: background 250ms ease, transform 250ms cubic-bezier(0.16, 1, 0.3, 1); } .referenz-cta-title { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; color: var(--c-text); letter-spacing: -0.02em; line-height: 1.2; } .referenz-cta-sub { font-size: var(--t-sm); color: var(--c-muted); } /* Browser mockup */ .referenz-preview { display: flex; flex-direction: column; gap: var(--s-4); } .browser-mock { border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3); } /* Override shadow when mock sits on a light card */ .referenz-card-mock .browser-mock { box-shadow: 0 0 0 1px rgba(20,33,61,.10), 0 8px 24px rgba(20,33,61,.14), 0 2px 6px rgba(20,33,61,.06); } .browser-bar { display: flex; align-items: center; gap: var(--s-3); background: rgba(255,255,255,.06); padding: var(--s-3) var(--s-4); border-bottom: 1px solid rgba(255,255,255,.06); } .browser-dots { display: flex; gap: 5px; flex-shrink: 0; } .dot { width: 10px; height: 10px; border-radius: 50%; } .dot-red { background: #FF5F57; } .dot-yellow { background: #FFBD2E; } .dot-green { background: #28C840; } .browser-url { flex: 1; font-family: var(--f-body); font-size: 0.7rem; color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); border-radius: 3px; padding: 3px var(--s-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Gemeinsames Grundformat für beide Referenz-Frames (UniProjekt-Wireframe und ScheibMedia-Screenshot) — exaktes Seitenverhältnis des Screenshots, damit beide Karten immer dieselbe Rahmengröße haben. Wireframe-Inhalt wird zentriert, falls er die Fläche nicht exakt ausfüllt. */ .browser-content { position: relative; background: #1C2840; padding: var(--s-5); display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); aspect-ratio: 1400 / 666; overflow: hidden; } /* Echter Screenshot statt Wireframe-Mock (ScheibMedia-Karte) — kein Crop, keine Letterbox-Balken, füllt die Fläche exakt aus. */ .browser-content--photo { padding: 0; } .browser-content--photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Kurzer Lade-Moment beim ersten Erscheinen der Referenz-Frames: Spinner deckt den Content-Bereich ab und blendet aus, sobald die Karte zum ersten Mal ins Bild scrollt (an .is-visible gekoppelt, dadurch automatisch einmalig — kein eigener Scroll-/Timer-Code). */ .referenz-preview-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #1C2840; opacity: 1; transition: opacity 300ms ease; z-index: 2; } .loader-spinner { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.15); border-top-color: var(--c-gold); animation: fx-spin 0.7s linear infinite; } @keyframes fx-spin { to { transform: rotate(360deg); } } html.js .referenz-card--real.is-visible .referenz-preview-loader { transition-delay: 500ms; opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .referenz-preview-loader { transition: none; opacity: 0; } .loader-spinner { animation: none; } } .mock-nav { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--s-3); border-bottom: 1px solid rgba(255,255,255,.06); } .mock-logo { width: 60px; height: 10px; background: rgba(201,162,75,.5); border-radius: 2px; } .mock-nav-links { display: flex; gap: var(--s-2); } .mock-pill { width: 28px; height: 6px; background: rgba(255,255,255,.12); border-radius: 3px; } .mock-hero-block { display: flex; flex-direction: column; gap: var(--s-2); padding-block: var(--s-4); } .mock-line { border-radius: 3px; height: 8px; } .mock-line--title { height: 14px; background: rgba(255,255,255,.65); width: 80%; } .mock-line--title.mock-line--short { width: 55%; background: rgba(255,255,255,.5); } .mock-line--btn { height: 22px; background: rgba(201,162,75,.7); width: 110px; border-radius: 4px; margin-top: var(--s-2); } .referenz-badge { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: rgba(243,240,234,.5); } .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-gold); opacity: .7; flex-shrink: 0; } .badge-label { color: var(--c-gold-text); font-weight: 500; } .badge-sep { opacity: .4; } .badge-name { opacity: .7; } /* ============================================================= VERGLEICH – Zeilen-Raster statt , role="table" für a11y ============================================================= */ .section-vergleich .headline-display { margin-bottom: var(--s-10); max-width: 26ch; } .vergleich { background: var(--c-card); border-radius: var(--r-md); box-shadow: var(--shadow-card); overflow: hidden; } .vergleich-row { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); } .v-corner, .v-col-title, .v-label, .v-cell { padding: var(--s-4) var(--s-5); } .v-corner, .v-col-title:not(.v-col-title--own) { border-bottom: 1px solid var(--c-border); } .v-label, .v-cell:not(.v-cell--own) { border-bottom: 1px solid var(--c-border); } .vergleich-row:last-child .v-label, .vergleich-row:last-child .v-cell:not(.v-cell--own) { border-bottom: none; } .v-col-title { font-family: var(--f-display); font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.01em; color: var(--c-muted); text-align: center; display: flex; align-items: center; justify-content: center; } .v-label { font-size: var(--t-base); font-weight: 500; color: var(--c-text); display: flex; align-items: center; } .v-cell { font-size: var(--t-base); color: var(--c-muted); text-align: center; display: flex; align-items: center; justify-content: center; } /* Vincero-Spalte: durchgehende Navy-Fläche, keine Zeilenlinien queren sie */ .v-col-title--own, .v-cell--own { background: var(--c-navy); color: rgba(243, 240, 234, 0.92); font-weight: 600; } .v-col-title--own { border-radius: var(--r-md) var(--r-md) 0 0; } .vergleich-row:last-child .v-cell--own { border-radius: 0 0 var(--r-md) var(--r-md); } /* Mobil: Label über volle Breite, drei Werte darunter mit Mini-Caption */ @media (max-width: 899px) { .vergleich-row { grid-template-columns: repeat(3, 1fr); } .vergleich-row--head { display: none; } .v-label { grid-column: 1 / -1; padding-bottom: var(--s-2); border-bottom: none; font-weight: 600; } .v-cell { flex-direction: column; align-items: center; gap: 2px; padding-top: 0; } .v-cell::before { content: attr(data-col); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); opacity: 0.65; } .v-cell--own::before { color: rgba(243, 240, 234, 0.65); } .v-col-title--own, .vergleich-row:last-child .v-cell--own { border-radius: 0; } } /* ============================================================= PREIS UND OWNERSHIP – zweite .navy-tile ============================================================= */ .preis-tile { max-width: var(--max-w); margin-inline: auto; } .preis-tile .eyebrow { color: rgba(201, 162, 75, 0.85); } .preis-tile .headline-display { margin-bottom: var(--s-8); } .preis-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin-bottom: var(--s-8); } @media (min-width: 768px) { .preis-grid { grid-template-columns: 1fr 1fr; } } .preis-card { background: var(--c-card); border-radius: var(--r-lg); padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-2); } .preis-label { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-text); } .preis-title { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--c-text); margin-bottom: var(--s-1); } .preis-text { font-size: var(--t-base); line-height: 1.68; color: var(--c-muted); } .preis-note { margin-bottom: var(--s-8); } .preis-ownership { padding-top: var(--s-8); border-top: 1px solid rgba(243, 240, 234, 0.14); font-size: var(--t-base); line-height: 1.7; color: rgba(243, 240, 234, 0.72); max-width: 70ch; } /* ============================================================= TESTIMONIAL – volle Breite innerhalb von .referenz-grid ============================================================= */ .testi-featured { background: var(--c-card); border: 1px solid rgba(201, 162, 75, 0.22); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: var(--s-10) var(--s-12); display: flex; flex-direction: column; gap: var(--s-6); } .testi-quote-mark { font-family: var(--f-display); font-size: 5rem; line-height: 0.7; color: var(--c-gold); opacity: 0.60; user-select: none; } .testi-blockquote { font-family: var(--f-display); font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 400; line-height: 1.65; color: var(--c-text); flex: 1; } .testi-cite { display: flex; flex-direction: column; gap: var(--s-1); font-style: normal; border-top: 1px solid rgba(201, 162, 75, 0.18); padding-top: var(--s-6); } .testi-name { font-family: var(--f-display); font-weight: 600; font-size: var(--t-base); color: var(--c-gold-text); letter-spacing: -0.01em; } .testi-role { font-size: var(--t-sm); color: var(--c-muted); } /* ============================================================= FAQ – Accordion ============================================================= */ .section-faq { padding-block: var(--sec-pad); } .faq-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--s-16); align-items: start; } .faq-intro { position: sticky; top: calc(80px + var(--s-10)); } .faq-intro .headline-display { margin-bottom: 0; } @media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; gap: var(--s-10); } .faq-intro { position: static; } } .faq-list { display: flex; flex-direction: column; } .faq-item { border-bottom: 1px solid var(--c-border); } .faq-item:first-child { border-top: 1px solid var(--c-border); } .faq-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); width: 100%; padding-block: var(--s-6); background: none; border: none; cursor: pointer; text-align: left; font-family: var(--f-display); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; color: var(--c-text); -webkit-tap-highlight-color: transparent; transition: color var(--tr-fast); } .faq-trigger:hover { color: var(--c-navy); } .faq-trigger:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; border-radius: 2px; } .faq-icon { flex-shrink: 0; color: var(--c-navy); transition: transform var(--tr-base); } .faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(180deg); } /* Sanftes Auf-/Zuklappen: grid-rows 0fr→1fr (animierbar, ohne feste Höhe) */ .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms cubic-bezier(0.16, 1, 0.3, 1); } .faq-item.is-open .faq-answer { grid-template-rows: 1fr; } .faq-answer p { overflow: hidden; min-height: 0; padding-bottom: 0; transition: padding-bottom 320ms cubic-bezier(0.16, 1, 0.3, 1); font-size: var(--t-base); line-height: 1.78; color: var(--c-muted); max-width: 65ch; } .faq-item.is-open .faq-answer p { padding-bottom: var(--s-6); } @media (prefers-reduced-motion: reduce) { .faq-answer, .faq-answer p { transition: none; } } /* ============================================================= ÜBER MICH ============================================================= */ .section-ueber-mich { padding-block: var(--sec-pad); } .ueber-mich-split { display: grid; grid-template-columns: 1fr; gap: var(--s-12); align-items: center; } @media (min-width: 768px) { .ueber-mich-split { grid-template-columns: 55fr 45fr; gap: var(--s-16); } } .ueber-mich-text .body-text { max-width: none; } .ueber-mich-text .body-text + .body-text { margin-top: var(--s-5); } .ueber-mich-punch { font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--c-navy); margin-bottom: var(--s-6); } .portrait-wrap { border-radius: 28px; overflow: hidden; background: var(--c-navy); box-shadow: 0 2px 4px rgba(20,33,61,.06), 0 8px 24px rgba(20,33,61,.14), 0 28px 64px rgba(20,33,61,.18), 0 56px 96px rgba(20,33,61,.10); } .portrait-wrap img { width: 100%; /* height:auto zwingend: das height-Attribut (CLS-Fix) würde sonst als Fixhöhe wirken und das Bild verzerren */ height: auto; display: block; } @media (max-width: 767px) { .portrait-wrap { border-radius: 18px; max-height: 360px; } .portrait-wrap img { height: 360px; object-fit: cover; object-position: center top; } } /* ============================================================= KONTAKT / CTA ============================================================= */ /* Personal intro card */ .kontakt-hero { display: flex; align-items: center; gap: var(--s-8); background: var(--c-navy); border-radius: var(--r-xl); padding: var(--s-10) var(--s-12); margin-bottom: var(--s-16); flex-wrap: wrap; } .kontakt-hero-photo { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid rgba(201,162,75,0.35); box-shadow: 0 0 0 6px rgba(201,162,75,0.10); } .kontakt-hero-photo img { width: 100%; height: 100%; object-fit: cover; /* Gesicht mittig im Kreis: das Foto hat oben viel Headroom */ object-position: center 28%; } .kontakt-hero-text { flex: 1; min-width: 240px; } .kontakt-hero-text .headline-display { color: var(--c-light); font-size: var(--t-2xl); margin-bottom: var(--s-3); } /* Auf der Navy-Karte gilt das helle Brand-Gold (wie der Button daneben), nicht der abgedunkelte Text-Gold-Kontrastton der hellen Section */ .kontakt-hero .headline-display em.text-gold { color: var(--c-gold); } .kontakt-hero-text .body-text { color: rgba(243,240,234,0.72); font-size: var(--t-base); font-style: italic; max-width: none; } .kontakt-hero-btn { flex-shrink: 0; } @media (max-width: 640px) { .kontakt-hero { flex-direction: column; align-items: flex-start; padding: var(--s-8); } .kontakt-hero-btn { width: 100%; } } .kontakt-note { font-size: var(--t-sm); margin-top: var(--s-6); max-width: 42ch; } .kontakt-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-16); } @media (min-width: 768px) { .kontakt-grid { grid-template-columns: 1fr 1fr; gap: var(--s-20); align-items: start; } } .kontakt-left .headline-mid { margin-bottom: var(--s-4); } .kontakt-left .kontakt-note { margin-bottom: var(--s-6); } .kontakt-direct { display: flex; flex-direction: column; gap: var(--s-3); } .kontakt-link { display: inline-flex; align-items: center; gap: var(--s-3); color: rgba(243,240,234,.72); font-size: var(--t-base); font-weight: 500; min-height: 44px; transition: color var(--tr-fast); } .kontakt-link:hover { color: var(--c-gold); } .kontakt-link:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 2px; } .kontakt-link svg { flex-shrink: 0; } /* Cal.com-Embed — eigener Scrollbereich statt unbegrenzt wachsender Karte: der Inline-Embed sizet sich selbst auf volle Inhaltshöhe (Kalendergrid + komplette Slot-Liste eines Tages), das kann weit über 2000px werden. max-height + overflow-y fangen das in einer Karte auf, die zur restlichen Kartensprache der Seite passt. */ .cal-embed-wrap { width: 100%; max-height: 720px; overflow-x: hidden; overflow-y: auto; border-radius: var(--r-md); box-shadow: var(--shadow-card); } #cal-inline-embed { width: 100%; min-height: 640px; } .kontakt-closing { margin-top: var(--s-16); text-align: center; font-size: var(--t-sm); color: var(--c-muted); } .kontakt-closing-link { color: var(--c-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; transition: color var(--tr-fast); } .kontakt-closing-link:hover { color: var(--c-gold-text); } /* ============================================================= FOOTER ============================================================= */ .site-footer { background: radial-gradient(circle at 50% 30%, rgba(201, 162, 75, 0.06) 0%, transparent 60%), var(--c-navy-deep); padding-block: var(--sec-pad); } .footer-brand { margin-bottom: var(--s-8); } .footer-logo { font-size: 1.75rem; font-weight: 600; letter-spacing: 0.12em; display: block; margin-bottom: var(--s-2); } .footer-tagline { font-size: var(--t-sm); color: rgba(243,240,234,.4); } .footer-divider { height: 1px; background-color: rgba(243,240,234,.08); margin-block: var(--s-8); } .footer-columns { display: grid; grid-template-columns: 1fr; gap: var(--s-10); } @media (min-width: 768px) { .footer-columns { grid-template-columns: 1fr 1fr; } } .footer-col-title { font-family: var(--f-body); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(243,240,234,.75); margin-bottom: var(--s-4); } .footer-address, .footer-note { font-size: var(--t-sm); line-height: 1.85; color: rgba(243,240,234,.45); } .footer-address { margin-bottom: var(--s-4); } .footer-address a, .footer-note a { color: rgba(243,240,234,.45); transition: color var(--tr-fast); } .footer-address a:hover, .footer-note a:hover { color: var(--c-gold); } .footer-copy { margin-top: var(--s-10); font-size: var(--t-xs); color: rgba(243,240,234,.28); } /* Footer-Link-Liste (Impressum · Datenschutz · Cookie-Einstellungen) */ .footer-legal-list { display: flex; flex-direction: column; gap: var(--s-2); } .footer-legal-list a, .footer-legal-btn { font-size: var(--t-sm); line-height: 1.85; color: rgba(243,240,234,.45); transition: color var(--tr-fast); } .footer-legal-list a:hover, .footer-legal-btn:hover { color: var(--c-gold); } .footer-legal-btn { background: none; border: none; padding: 0; font-family: var(--f-body); text-align: left; cursor: pointer; } .footer-legal-btn:focus-visible, .footer-legal-list a:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 2px; } /* ============================================================= IMPRESSUM / DATENSCHUTZ — schlanke Unterseiten ============================================================= */ .section-legal { padding-top: calc(var(--sec-pad) + var(--s-16)); } .section-legal .headline-display { margin-bottom: var(--s-10); max-width: none; } .legal-content .headline-mid { margin-top: var(--s-10); margin-bottom: var(--s-4); } .legal-content .headline-mid:first-child { margin-top: 0; } .legal-content .body-text { max-width: 68ch; } .legal-content .body-text + .body-text { margin-top: var(--s-4); } .legal-content .body-text + .headline-mid, .legal-content .legal-list + .headline-mid { margin-top: var(--s-10); } .legal-list { display: flex; flex-direction: column; gap: var(--s-2); max-width: 68ch; margin-block: var(--s-4); } .legal-list li { position: relative; padding-left: var(--s-6); font-size: var(--t-lg); line-height: 1.6; color: var(--c-text); } .legal-list li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-gold); } .legal-back { margin-top: var(--s-16); } .legal-back a { font-weight: 600; color: var(--c-navy); text-decoration: underline; text-underline-offset: 2px; transition: color var(--tr-fast); } .legal-back a:hover { color: var(--c-gold-text); } .legal-back a:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 2px; } /* ============================================================= COOKIE-BANNER (consent.js) ============================================================= */ .cookie-banner { position: fixed; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: 200; max-width: 720px; margin-inline: auto; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 30%, rgba(201, 162, 75, 0.09) 0%, transparent 60%), var(--c-navy); box-shadow: 0 2px 4px rgba(20,33,61,.06), 0 8px 24px rgba(20,33,61,.14), 0 28px 64px rgba(20,33,61,.18); padding: var(--s-6) var(--s-8); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px); transition: opacity 280ms ease, transform 280ms ease, visibility 0s linear 280ms; } .cookie-banner.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 280ms ease, transform 280ms ease; } .cookie-banner-inner { display: flex; flex-direction: column; gap: var(--s-5); } @media (min-width: 640px) { .cookie-banner-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-8); } } .cookie-banner-title { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 600; color: var(--c-light); margin-bottom: var(--s-2); } .cookie-banner-desc { font-size: var(--t-sm); line-height: 1.6; color: rgba(243, 240, 234, 0.72); max-width: 46ch; } .cookie-banner-desc a { color: rgba(243, 240, 234, 0.9); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner-desc a:hover { color: var(--c-gold); } .cookie-banner-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; flex-shrink: 0; } .cookie-banner-actions .btn { flex: 1 1 auto; white-space: nowrap; } @media (min-width: 640px) { .cookie-banner-actions .btn { flex: none; } } @media (max-width: 480px) { .cookie-banner { padding: var(--s-5) var(--s-6); } } /* Cal.com-Gate: Ersatzkarte, solange keine Einwilligung vorliegt */ .cal-consent-gate { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-5); min-height: 320px; padding: var(--s-8); background: var(--c-card); } .cal-consent-gate .body-text { max-width: 42ch; } /* ============================================================= 404-SEITE ============================================================= */ .section-error { min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--sec-pad) + var(--s-16)); } /* Mobil nicht vertikal zentrieren: sonst landet der CTA-Button auf halber Viewport-Höhe genau dort, wo der Cookie-Banner beim ersten Besuch liegt. */ @media (max-width: 767px) { .section-error { min-height: auto; align-items: flex-start; padding-bottom: var(--s-16); } } .error-404 { max-width: 60ch; margin-inline: auto; text-align: center; } .error-404 .headline-display { margin-block: var(--s-4) var(--s-5); } .error-404 .body-text { margin-inline: auto; } .error-404-actions { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); margin-top: var(--s-8); } .error-404-phone { font-size: var(--t-sm); color: var(--c-muted); text-decoration: underline; text-underline-offset: 2px; transition: color var(--tr-fast); } .error-404-phone:hover { color: var(--c-gold-text); } .error-404-phone:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 2px; } /* ============================================================= RESPONSIVE REFINEMENTS ============================================================= */ /* Desktop */ @media (min-width: 1024px) { .section-ablauf .steps-grid { gap: var(--s-12); } } /* Large desktop: prevent overstretch */ @media (min-width: 1440px) { :root { --gutter: var(--s-16); } } /* ============================================================= GRAIN / FILM-TEXTURE OVERLAY Der EINZIGE Grain-Layer der Seite (ein fixed-Pseudo-Element). Niedrige Opacity: Körnung als Struktur spürbar, nie sichtbar. ============================================================= */ body::after { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 300px 300px; background-repeat: repeat; } @media (prefers-reduced-motion: reduce) { body::after { display: none; } } /* ============================================================= BORDER GLOW ============================================================= */ .border-glow-card { --edge-proximity: 0; --cursor-angle: 45deg; --edge-sensitivity: 30; --color-sensitivity: calc(var(--edge-sensitivity) + 20); --border-radius: 24px; --glow-padding: 40px; --cone-spread: 25; --fill-opacity: 0.5; position: relative; border-radius: var(--border-radius); isolation: isolate; transform: translate3d(0, 0, 0.01px); overflow: visible; border: 1px solid rgb(255 255 255 / 12%); } .border-glow-card::before, .border-glow-card::after, .border-glow-card > .edge-light { content: ""; position: absolute; inset: 0; border-radius: inherit; transition: opacity 0.25s ease-out; z-index: -1; } .border-glow-card:not(:hover)::before, .border-glow-card:not(:hover)::after, .border-glow-card:not(:hover) > .edge-light { opacity: 0; transition: opacity 0.75s ease-in-out; } /* colored mesh-gradient border */ .border-glow-card::before { border: 1px solid transparent; background: linear-gradient(var(--card-bg, #14213D) 0 100%) padding-box, linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box, var(--gradient-one, radial-gradient(at 80% 55%, #C9A24B 0px, transparent 50%)) border-box, var(--gradient-two, radial-gradient(at 69% 34%, #14213D 0px, transparent 50%)) border-box, var(--gradient-three, radial-gradient(at 8% 6%, #F3F0EA 0px, transparent 50%)) border-box, var(--gradient-four, radial-gradient(at 41% 38%, #C9A24B 0px, transparent 50%)) border-box, var(--gradient-five, radial-gradient(at 86% 85%, #14213D 0px, transparent 50%)) border-box, var(--gradient-six, radial-gradient(at 82% 18%, #F3F0EA 0px, transparent 50%)) border-box, var(--gradient-seven, radial-gradient(at 51% 4%, #14213D 0px, transparent 50%)) border-box, var(--gradient-base, linear-gradient(#C9A24B 0 100%)) border-box; opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))); mask-image: radial-gradient( ellipse 80% 80% at calc(var(--cursor-x, 50%) * 1%) calc(var(--cursor-y, 50%) * 1%), black 0%, transparent 100% ); } /* colored mesh-gradient background fill near edges */ .border-glow-card::after { border: 1px solid transparent; background: var(--gradient-one, radial-gradient(at 80% 55%, #C9A24B 0px, transparent 50%)) padding-box, var(--gradient-two, radial-gradient(at 69% 34%, #14213D 0px, transparent 50%)) padding-box, var(--gradient-three, radial-gradient(at 8% 6%, #F3F0EA 0px, transparent 50%)) padding-box, var(--gradient-four, radial-gradient(at 41% 38%, #C9A24B 0px, transparent 50%)) padding-box, var(--gradient-five, radial-gradient(at 86% 85%, #14213D 0px, transparent 50%)) padding-box, var(--gradient-six, radial-gradient(at 82% 18%, #F3F0EA 0px, transparent 50%)) padding-box, var(--gradient-seven, radial-gradient(at 51% 4%, #14213D 0px, transparent 50%)) padding-box, var(--gradient-base, linear-gradient(#C9A24B 0 100%)) padding-box; mask-image: radial-gradient( ellipse 100% 100% at calc(var(--cursor-x, 50%) * 1%) calc(var(--cursor-y, 50%) * 1%), black 0%, transparent 70% ); opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))); mix-blend-mode: soft-light; } /* outer glow layer */ .border-glow-card > .edge-light { inset: calc(var(--glow-padding) * -1); pointer-events: none; z-index: 1; mask-image: radial-gradient( ellipse 70% 70% at calc(var(--cursor-x, 50%) * 1%) calc(var(--cursor-y, 50%) * 1%), black 0%, transparent 100% ); opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity))); mix-blend-mode: plus-lighter; } .border-glow-card > .edge-light::before { content: ""; position: absolute; inset: var(--glow-padding); border-radius: inherit; box-shadow: inset 0 0 0 1px var(--glow-color, hsl(38deg 54% 54% / 100%)), inset 0 0 1px 0 var(--glow-color-60, hsl(38deg 54% 54% / 60%)), inset 0 0 3px 0 var(--glow-color-50, hsl(38deg 54% 54% / 50%)), inset 0 0 6px 0 var(--glow-color-40, hsl(38deg 54% 54% / 40%)), inset 0 0 15px 0 var(--glow-color-30, hsl(38deg 54% 54% / 30%)), inset 0 0 25px 2px var(--glow-color-20, hsl(38deg 54% 54% / 20%)), inset 0 0 50px 2px var(--glow-color-10, hsl(38deg 54% 54% / 10%)), 0 0 1px 0 var(--glow-color-60, hsl(38deg 54% 54% / 60%)), 0 0 3px 0 var(--glow-color-50, hsl(38deg 54% 54% / 50%)), 0 0 6px 0 var(--glow-color-40, hsl(38deg 54% 54% / 40%)), 0 0 15px 0 var(--glow-color-30, hsl(38deg 54% 54% / 30%)), 0 0 25px 2px var(--glow-color-20, hsl(38deg 54% 54% / 20%)), 0 0 50px 2px var(--glow-color-10, hsl(38deg 54% 54% / 10%)); } .border-glow-inner { display: flex; flex-direction: column; position: relative; overflow: visible; z-index: 1; } .portrait-wrap.border-glow-card { --border-radius: 28px; } .portrait-wrap.border-glow-card > .border-glow-inner { overflow: hidden; border-radius: var(--border-radius); } /* Referenz section on light bg — badge text */ .section-referenz .referenz-badge { color: var(--c-navy); } /* Kontakt section on light bg — links */ .section-kontakt .kontakt-link { color: var(--c-navy); } /* ── GRAINIENT: reveal WebGL canvas through light-bg elements ── */ .grainient-active .section-light { background: radial-gradient(circle at 50% 40%, rgba(201, 162, 75, 0.07) 0%, transparent 68%); } .grainient-active .stats-strip { background: transparent; } /* ============================================================= EFFEKTE — Scroll-, Load- und Hover-Inszenierung Alle Initialzustände sind an html.js gebunden: ohne JS bleibt die Seite vollständig sichtbar. prefers-reduced-motion wird global über den Block am Dateianfang neutralisiert. ============================================================= */ /* Intro-Delays skalieren mobil kürzer */ :root { --fx-scale: 1; } @media (max-width: 767px) { :root { --fx-scale: 0.6; } } /* ── SMOOTH SCROLL ──────────────────────────────────────────── JS-Lerp übernimmt das Wheel; natives smooth würde jedes scrollTo() zusätzlich glätten → aus. */ html.has-smooth-scroll { scroll-behavior: auto; } /* ── ZEILEN-REVEAL (Headlines) ─────────────────────────────── JS zerlegt Headlines in .line-mask > .line-inner. Padding- Trick verhindert, dass Unterlängen (g, y) geclippt werden. */ .has-lines .line-mask { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; } .has-lines .line-inner { display: block; transform: translateY(115%); transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); } .has-lines.is-visible .line-inner { transform: none; transition-delay: calc(var(--reveal-delay, 0ms) + var(--line-index, 0) * 90ms); } /* Standard-Fade der Headline neutralisieren — die Masken übernehmen */ .headline-display.has-lines { opacity: 1; transform: none; transition: none; } /* ── HERO-LOAD-CHOREOGRAFIE ────────────────────────────────── html.js versteckt, html.is-loaded startet die Sequenz. Keyframes mit backwards-Fill statt transition-delay, damit spätere Zustandswechsel (is-scrolled, is-suppressed) keine verschleppten Delays erben. */ html.js:not(.is-loaded) .site-header, html.js:not(.is-loaded) .hero-eyebrow, html.js:not(.is-loaded) .hero-subline, html.js:not(.is-loaded) .hero-actions, html.js:not(.is-loaded) .hero-trust, html.js:not(.is-loaded) #hero-video { opacity: 0; } html.js.is-loaded .site-header { animation: fx-drop-in 700ms cubic-bezier(0.16, 1, 0.3, 1) calc(200ms * var(--fx-scale)) backwards; } html.js.is-loaded .hero-eyebrow { animation: fx-rise-in 800ms cubic-bezier(0.16, 1, 0.3, 1) calc(330ms * var(--fx-scale)) backwards; } html.js.is-loaded .hero-subline { animation: fx-rise-in 800ms cubic-bezier(0.16, 1, 0.3, 1) calc(850ms * var(--fx-scale)) backwards; } html.js.is-loaded .hero-actions { animation: fx-rise-in 800ms cubic-bezier(0.16, 1, 0.3, 1) calc(980ms * var(--fx-scale)) backwards; } html.js.is-loaded .hero-trust { animation: fx-rise-in 800ms cubic-bezier(0.16, 1, 0.3, 1) calc(1080ms * var(--fx-scale)) backwards; } html.js.is-loaded #hero-video { animation: fx-video-in 1400ms ease-out backwards; } /* Headline-Zeilen: getriggert durch is-loaded statt is-visible */ .hero-headline.has-lines .line-inner { transition-duration: 950ms; } html.is-loaded .hero-headline.has-lines .line-inner { transform: none; transition-delay: calc((420ms + var(--line-index, 0) * 130ms) * var(--fx-scale)); } @keyframes fx-drop-in { from { opacity: 0; transform: translateY(-24px); } } @keyframes fx-rise-in { from { opacity: 0; transform: translateY(18px); } } @keyframes fx-video-in { from { opacity: 0; transform: scale(1.06); } } /* ── GOLD-SHIMMER ──────────────────────────────────────────── Einmaliger Glanz-Durchlauf über die beiden Gold-Wörter. Endzustand = ruhiges var(--c-gold) via background-clip. */ html.js.is-loaded .hero-headline em.text-gold, html.js .kontakt-hero.is-visible .headline-display em.text-gold { background-image: linear-gradient(105deg, var(--c-gold) 42%, #F2E5BC 50%, var(--c-gold) 58%); background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html.js.is-loaded .hero-headline em.text-gold { animation: fx-gold-shimmer 1300ms ease-in-out calc(1500ms * var(--fx-scale)) both; } html.js .kontakt-hero.is-visible .headline-display em.text-gold { animation: fx-gold-shimmer 1300ms ease-in-out 900ms both; } @keyframes fx-gold-shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } } /* ── LEISTUNGS-GRID SPOTLIGHT ──────────────────────────────── JS setzt --mx/--my pro Karte; Lichtschein + Gold-Kante folgen dem Cursor über das ganze Grid. */ @media (hover: hover) and (pointer: fine) { .spotlight-item { position: relative; } .spotlight-item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 350ms ease; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 162, 75, 0.10), transparent 65%); } /* Gold-Kante: Ring-Maske lässt nur den Rand durch */ .spotlight-item::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid transparent; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 162, 75, 0.55), transparent 70%) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity 350ms ease; } .spotlight-grid.is-lit .spotlight-item::after, .spotlight-grid.is-lit .spotlight-item::before { opacity: 1; } } /* ── FOTO-REVEALS + HOVER-ZOOM ─────────────────────────────── Bilder zoomen beim Erscheinen aus 1.10 in die Maske; ein gemeinsamer transform-Übergang deckt Reveal und Hover ab. */ html.js .step-img-wrap img, html.js .portrait-wrap img, html.js .kontakt-hero-photo img { transform: scale(1.10); transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1); } html.js .step.is-visible .step-img-wrap img, html.js .portrait-wrap.is-visible img, html.js .kontakt-hero.is-visible .kontakt-hero-photo img { transform: none; } @media (hover: hover) and (pointer: fine) { html.js .step.is-visible .step-img-wrap:hover img, html.js .portrait-wrap.is-visible:hover img { transform: scale(1.035); transition-duration: 700ms; } } /* ── REFERENZ BAUT SICH SELBST ─────────────────────────────── Das Browser-Mockup der UniProjekt-Karte setzt sich beim Scroll-Reveal Element für Element zusammen. */ html.js .referenz-card--real .browser-dots .dot { transform: scale(0); transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1); } html.js .referenz-card--real .browser-url { opacity: 0; transform: translateY(4px); transition: opacity 450ms ease, transform 450ms cubic-bezier(0.16, 1, 0.3, 1); } html.js .referenz-card--real .mock-logo, html.js .referenz-card--real .mock-pill, html.js .referenz-card--real .mock-line { transform: scaleX(0); transform-origin: left center; transition: transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1); } html.js .referenz-card--real.is-visible .browser-dots .dot, html.js .referenz-card--real.is-visible .mock-logo, html.js .referenz-card--real.is-visible .mock-pill, html.js .referenz-card--real.is-visible .mock-line { transform: none; } html.js .referenz-card--real.is-visible .browser-url { opacity: 1; transform: none; } /* Bau-Reihenfolge: Dots → URL → Logo → Nav-Pills → Hero-Zeilen (Delays greifen nur beim Einblenden; Spinner deckt diese Phase ab und blendet erst kurz vor den Hero-Zeilen aus, siehe .referenz-preview-loader) */ html.js .referenz-card--real.is-visible .dot-red { transition-delay: 150ms; } html.js .referenz-card--real.is-visible .dot-yellow { transition-delay: 210ms; } html.js .referenz-card--real.is-visible .dot-green { transition-delay: 270ms; } html.js .referenz-card--real.is-visible .browser-url { transition-delay: 350ms; } html.js .referenz-card--real.is-visible .mock-logo { transition-delay: 450ms; } html.js .referenz-card--real.is-visible .mock-pill:nth-child(1) { transition-delay: 530ms; } html.js .referenz-card--real.is-visible .mock-pill:nth-child(2) { transition-delay: 590ms; } html.js .referenz-card--real.is-visible .mock-pill:nth-child(3) { transition-delay: 650ms; } html.js .referenz-card--real.is-visible .mock-hero-block .mock-line:nth-child(1) { transition-delay: 750ms; } html.js .referenz-card--real.is-visible .mock-hero-block .mock-line:nth-child(2) { transition-delay: 850ms; } html.js .referenz-card--real.is-visible .mock-hero-block .mock-line:nth-child(3) { transition-delay: 950ms; } /* ── KONTAKT-FINALE ────────────────────────────────────────── Die Navy-Karte fährt als Abschluss-Moment auf. */ html.js .kontakt-hero.fade-in { transform: translateY(36px) scale(0.965); transition-duration: 1000ms; } html.js .kontakt-hero.fade-in.is-visible { opacity: 1; transform: none; } /* ── STATS-STRIP STAGGER ───────────────────────────────────── Kennzahlen unter dem Hero erscheinen nacheinander, die Zahlen setzen mit einem kleinen Scale-Settle auf. */ html.js .stats-strip .stat-item { opacity: 0; transform: translateY(16px); transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1), transform 650ms cubic-bezier(0.16, 1, 0.3, 1); } html.js .stats-strip .stat-number { transform: scale(1.05); transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); } html.js .stats-strip .stat-divider { opacity: 0; transition: opacity 600ms ease; } html.js .stats-strip.is-visible .stat-item { opacity: 1; transform: none; } html.js .stats-strip.is-visible .stat-number { transform: none; } html.js .stats-strip.is-visible .stat-divider { opacity: 1; transition-delay: 500ms; } /* Reihenfolge der Kacheln (Kinder: Item/Divider im Wechsel) */ html.js .stats-strip.is-visible .stat-item:nth-child(3), html.js .stats-strip.is-visible .stat-item:nth-child(3) .stat-number { transition-delay: 110ms; } html.js .stats-strip.is-visible .stat-item:nth-child(5), html.js .stats-strip.is-visible .stat-item:nth-child(5) .stat-number { transition-delay: 220ms; } html.js .stats-strip.is-visible .stat-item:nth-child(7), html.js .stats-strip.is-visible .stat-item:nth-child(7) .stat-number { transition-delay: 330ms; } /* ── FAQ-FEINSCHLIFF ───────────────────────────────────────── Frage rückt beim Hover leicht nach rechts, Farbe geht Richtung Text-Gold. */ @media (hover: hover) { .faq-trigger > span { transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); } .faq-trigger:hover > span, .faq-trigger:focus-visible > span { transform: translateX(6px); } .faq-trigger:hover { color: var(--c-gold-text); } } /* ── NAV-GLEITER ───────────────────────────────────────────── Eine Gold-Linie gleitet zum aktiven/gehoverten Link; die statischen Per-Link-Unterstriche übernimmt sie komplett. */ .header-nav { position: relative; } .nav-indicator { position: absolute; top: 0; left: 0; width: 100px; /* Referenzbreite — JS skaliert per scaleX */ height: 2px; border-radius: 1px; background: var(--c-gold); transform-origin: left center; opacity: 0; pointer-events: none; transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 250ms ease; } .header-nav.has-indicator .nav-link::after { content: none; }