/* ========================================================= really. – Onepager 1. Tokens 2. Base 3. Components 4. Sections 5. Responsive (≤1100px tablet, ≤767px mobile) ========================================================= */ /* ---------- Fonts (self-hosted, variable) ---------- */ @font-face { font-family: "Bricolage Grotesque"; src: url("../assets/fonts/bricolage-grotesque-var.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "DM Sans"; src: url("../assets/fonts/dm-sans-var.woff2") format("woff2-variations"); font-weight: 100 1000; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } /* ---------- 1. Tokens ---------- */ /* Dark theme: the whole neutral scale is inverted (light page → dark page). --accent-ink stays the original dark teal for the few surfaces that are still light after the flip (the "ink" boxes: rendite, footer). New --accent-bright is its opposite, a light teal for text on the now-dark page/cards. --ink-fixed never flips: it's the dark text used directly on the accent teal, and on the always-white photo-overlay play button. */ :root { /* Brand */ --accent: #38B6A9; /* really teal – change here, updates everywhere */ --accent-soft: #14322E; /* icon chip background */ --accent-ink: #146E65; /* dark teal for text/icons on the light "ink" boxes (rendite, footer) */ --accent-bright: #6FE3D4; /* light teal for text/icons on the dark page/cards */ --ink-fixed: #0E1414; /* constant dark text for use directly on the accent teal */ /* Neutrals */ --ink: #F3F6F5; --bg: #0E1414; --surface: #171F1D; --text-muted: #A9B6B3; --text-muted-2: #C4CFCC; --text-subtle: #95A3A0; --line: #26302E; --line-strong: #34403E; --line-table: #2C3634; /* Light surfaces (used on the "ink" boxes: rendite, footer) */ --dark-muted: #4A5654; --dark-footnote: #61706D; --dark-bar: #A6B7B3; --dark-line: #E1E7E5; --dark-border: #D6DEDC; /* Type */ --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "DM Sans", system-ui, sans-serif; /* Layout */ --page-max: 1440px; --gutter-frame: 40px; /* side space for full-bleed blocks (hero image, dark/teal panels) */ --gutter-content: 80px; /* side space for regular content */ --section-gap: 120px; /* Radii */ --r-xl: 40px; --r-lg: 32px; --r-md: 28px; --r-sm: 24px; --r-pill: 999px; /* Header height (used for anchor offsets) */ --header-h: 96px; } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } h1, h2, h3, p { margin: 0; } a { color: inherit; text-decoration: none; } section[id] { scroll-margin-top: calc(var(--header-h) + 8px); } .icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .m-only { display: none; } :focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; border-radius: 8px; } .skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 20px; background: var(--ink); color: var(--bg); border-radius: var(--r-pill); } .skip-link:focus { top: 16px; } /* Hidden until GSAP animates them in (only when .motion is set in ) */ .motion [data-split], .motion [data-hero-pill], .motion [data-hero-fade], .motion [data-hero-card], .motion [data-hero-media] { visibility: hidden; } /* ---------- 3. Components ---------- */ /* Logo */ .logo { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: -1px; color: var(--ink); } .logo__img { display: block; height: 1em; width: auto; } .logo__dot { display: inline-block; width: 10px; height: 10px; margin-left: 3px; border-radius: 50%; background: var(--accent); } .logo:hover .logo__dot { animation: dot-hop 0.6s cubic-bezier(.34, 1.56, .64, 1); } @keyframes dot-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-9px) scale(1.1); } 100% { transform: translateY(0); } } .logo--xl { font-size: 56px; letter-spacing: -2px; color: var(--bg); } .logo--xl .logo__dot { width: 16px; height: 16px; margin-left: 4px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 60px; padding: 0 32px; border: none; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 17px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background-color .2s, box-shadow .25s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: scale(.97); } .btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; } .btn--dark { background: var(--ink); color: var(--bg); } .btn--dark:hover { box-shadow: 0 10px 24px -10px rgba(14, 20, 20, .5); } .btn--light { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); padding: 0 28px; } .btn--light .icon { stroke-width: 2; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); } .btn--light:hover .icon { transform: translateY(3px); } .btn--accent { background: var(--accent); color: var(--ink-fixed); } .btn--accent:hover { box-shadow: 0 10px 24px -10px rgba(14, 20, 20, .5); } .quiz .btn--accent { background: var(--ink-fixed); color: var(--accent); } /* Nav chip button with round arrow */ .btn-chip { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 15px; font-weight: 600; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); } .btn-chip:active { transform: scale(.97); } .btn-chip__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; } .btn-chip__icon .icon, .btn-big__icon .icon { stroke-width: 2; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); } .btn-chip:hover .icon, .btn-big:hover .icon { transform: rotate(45deg); } /* Big CTA button */ .btn-big { display: inline-flex; align-items: center; gap: 14px; height: 68px; padding: 0 10px 0 36px; margin-top: 12px; background: var(--ink); color: var(--bg); border-radius: var(--r-pill); font-size: 18px; font-weight: 600; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; } .btn-big:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(14, 20, 20, .55); } .btn-big:active { transform: scale(.97); } .btn-big__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--ink-fixed); display: flex; align-items: center; justify-content: center; } /* Eyebrow labels */ .eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; } .eyebrow--accent { color: var(--accent-bright); } .eyebrow--dark { color: var(--accent-bright); } /* Headings */ .h2 { font-family: var(--font-display); font-weight: 600; font-size: 64px; line-height: 1.02; letter-spacing: -2.5px; } .section { padding: var(--section-gap) var(--gutter-content) 0; max-width: var(--page-max); margin: 0 auto; } .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; } .section-head__text { max-width: 380px; font-size: 17px; line-height: 1.55; color: var(--text-muted); } /* ---------- 4. Sections ---------- */ /* Header / sticky nav */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); padding: 0 var(--gutter-frame); display: flex; align-items: center; transition: padding .4s ease; } .site-header__inner { width: 100%; max-width: var(--page-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-radius: var(--r-pill); transition: max-width .5s cubic-bezier(.22, 1, .36, 1), padding .5s cubic-bezier(.22, 1, .36, 1), background-color .4s, box-shadow .4s, border-color .4s; border: 1px solid transparent; } /* Scrolled state: compact pill with blur */ .site-header.is-scrolled .site-header__inner { max-width: 1120px; padding: 6px 6px 6px 24px; background: rgba(14, 20, 20, .72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(38, 48, 46, .9); box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .5); } .site-header.is-scrolled .logo { font-size: 26px; } .site-header.is-scrolled .nav-pill { background: transparent; border-color: transparent; } .site-header.is-scrolled .btn-chip { background: var(--ink); color: var(--bg); border-color: var(--ink); } .site-header.is-scrolled .btn-chip__icon { background: var(--accent); color: var(--ink-fixed); } .logo { transition: font-size .4s ease; } .nav-pill { display: flex; gap: 4px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); transition: background-color .4s, border-color .4s; } .nav-pill__link { padding: 10px 20px; border-radius: var(--r-pill); font-size: 15px; font-weight: 500; transition: background-color .2s, color .2s; } .nav-pill__link:hover { background: var(--bg); } .nav-pill__link.is-active { background: var(--ink); color: var(--bg); } .menu-btn { display: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; } .menu-btn .icon { stroke-width: 2; } .menu-btn .icon--close { display: none; } .menu-btn[aria-expanded="true"] .icon--open { display: none; } .menu-btn[aria-expanded="true"] .icon--close { display: block; } .mobile-menu { position: absolute; top: calc(100% - 4px); left: 12px; right: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 24px 48px -24px rgba(14, 20, 20, .35); display: flex; flex-direction: column; gap: 4px; } .mobile-menu[hidden] { display: none; } .mobile-menu a:not(.btn) { padding: 14px 16px; border-radius: 14px; font-size: 17px; font-weight: 500; } .mobile-menu a:not(.btn):hover { background: var(--bg); } .mobile-menu .btn { margin-top: 8px; height: 56px; font-size: 16px; } /* Hero */ .hero { position: relative; z-index: 0; max-width: var(--page-max); margin: 0 auto; padding: 56px var(--gutter-frame) 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero__grid { position: absolute; top: 0; left: 50%; width: 100vw; height: 100vh; transform: translateX(-50%); z-index: -2; pointer-events: none; } .hero__grid-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 50% 32%, rgba(56, 182, 169, .38), transparent 70%); filter: blur(60px); opacity: 0; } .hero__grid-pattern { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(243, 246, 245, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(243, 246, 245, .07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 32%, black 0%, transparent 75%); mask-image: radial-gradient(ellipse 55% 50% at 50% 32%, black 0%, transparent 75%); opacity: 0; } @media (prefers-reduced-motion: no-preference) { /* The grid itself only ever fades in — it never moves. */ .hero__grid-pattern { animation: heroGridPatternIn 1.6s cubic-bezier(.22, 1, .36, 1) 1s both; } /* The glow eases in slower and settles past its resting level, like a light source behind the grid warming up and illuminating it. */ .hero__grid-glow { animation: heroGridGlowIn 2.6s cubic-bezier(.22, 1, .36, 1) 1s both; } } @media (prefers-reduced-motion: reduce) { .hero__grid-pattern, .hero__grid-glow { animation: heroGridInStatic .6s ease 1s both; } } @keyframes heroGridPatternIn { from { opacity: 0; } to { opacity: .85; } } @keyframes heroGridGlowIn { 0% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: .7; } } @keyframes heroGridInStatic { from { opacity: 0; } to { opacity: .8; } } .hero__houses { position: absolute; top: 0; left: 50%; width: 100vw; height: 100vh; transform: translateX(-50%); overflow: hidden; pointer-events: none; z-index: -1; } .header-house { position: absolute; top: var(--y, 50%); left: var(--x, 50%); width: var(--size, 60px); opacity: var(--opacity, .08); transform: translate(-50%, -50%) rotate(var(--rotate, 0deg)) translateY(var(--parallax, 0px)); will-change: transform; } .header-house img { display: block; width: 100%; height: auto; } .hero__title { margin-top: 32px; font-family: "Poppins", var(--font-display); font-weight: 700; font-size: clamp(50px, 7.2vw, 104px); line-height: 1.25; letter-spacing: -0.038em; } /* line-height is kept generous so the SplitText mask never clips the "g" descender — pull the second line closer visually instead, with a transform (doesn't touch the mask box, so nothing gets clipped). */ .hero__title-line2 { display: inline-block; transform: translateY(-0.14em); } .hero__pill-wrap { margin-top: 14px; } .hero__pill { display: inline-block; transform: rotate(-2deg); padding: 4px 28px 12px; background: var(--accent); border-radius: var(--r-md); font-family: var(--font-display); font-weight: 700; font-size: clamp(50px, 6.67vw, 96px); line-height: 1; letter-spacing: -0.031em; color: var(--ink-fixed); } .hero__lead { margin-top: 36px; max-width: 620px; font-size: 20px; line-height: 1.55; color: var(--text-muted); } .hero__actions { margin-top: 36px; display: flex; gap: 12px; } .hero__video-title { margin-top: 96px; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.5px; } .hero__video-wrap { position: relative; margin-top: 32px; width: 100%; } .hero__video-glow { position: absolute; inset: -24px; background: var(--accent); opacity: .4; border-radius: 48px; filter: blur(45px); z-index: -1; pointer-events: none; } .hero__video-embed { position: relative; padding-top: 56.25%; border-radius: 36px; overflow: hidden; background: var(--surface); } .hero__video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Benefits */ .benefits .h2 { font-size: 56px; line-height: 1.05; letter-spacing: -2px; max-width: 640px; } .benefits__grid { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .benefit { min-height: 300px; padding: 32px; background: var(--surface); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 16px; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s; } .benefit:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(14, 20, 20, .25); } .icon-chip { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-bright); display: flex; align-items: center; justify-content: center; transition: background-color .3s, color .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); } .benefit:hover .icon-chip { background: var(--accent); color: var(--ink-fixed); transform: rotate(-6deg) scale(1.06); } .benefit__num { font-size: 13px; font-weight: 600; letter-spacing: 1px; color: var(--text-subtle); } .benefit__title { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.5px; } .benefit__text { font-size: 16px; line-height: 1.55; color: var(--text-muted); } /* Rendite */ .rendite-wrap { max-width: var(--page-max); margin: 0 auto; padding: var(--section-gap) var(--gutter-frame) 0; } .rendite { background: var(--ink); color: var(--bg); border-radius: var(--r-xl); padding: 88px 80px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; } .rendite__intro { display: flex; flex-direction: column; gap: 24px; } .rendite__eyebrow { color: var(--accent-ink); } .rendite__title { font-family: "Poppins", var(--font-display); font-weight: 700; } .rendite__amazing { font-family: var(--font-display); font-weight: 600; font-size: 34px; letter-spacing: -1px; color: var(--accent-ink); } .rendite__cta { align-self: flex-start; margin-top: 12px; } .rendite__chart { display: flex; flex-direction: column; gap: 28px; } .rendite__meta { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--dark-muted); } .rendite__legend { display: flex; align-items: center; gap: 8px; } .rendite__dash { width: 14px; border-top: 2px dashed var(--dark-muted); } .bars { position: relative; display: flex; flex-direction: column; gap: 22px; } /* Dashed line = € 60'000 paid in (60'000 / 194'745 ≈ 30.8%) */ .bars__marker { position: absolute; left: 30.8%; top: -8px; bottom: -8px; border-left: 2px dashed rgba(14, 20, 20, .35); z-index: 1; pointer-events: none; } .bar { display: flex; flex-direction: column; gap: 10px; } .bar__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; } .bar__label { font-weight: 600; } .bar__value { font-family: var(--font-display); font-weight: 600; font-size: 22px; font-variant-numeric: tabular-nums; } .bar--main .bar__value { color: var(--accent-ink); } .bar__track { height: 56px; } .bar__fill { height: 100%; width: var(--w); background: var(--dark-bar); border-radius: 14px; } .bar--main .bar__fill { background: var(--accent); } .rendite__footnote { padding-top: 20px; border-top: 1px solid var(--dark-line); font-size: 13px; line-height: 1.7; color: var(--dark-footnote); } /* Projekte Galerie (coverflow) */ .gallery-section { padding-top: 140px; text-align: center; } .gallery-section__eyebrow { display: block; } .coverflow { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .coverflow__stage { position: relative; width: 100%; height: clamp(300px, 31vw, 454px); overflow: hidden; } .coverflow__track { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; } .coverflow__slide { position: absolute; top: 50%; left: 50%; width: clamp(374px, 41vw, 578px); aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; box-shadow: 0 30px 60px -30px rgba(14, 20, 20, .35); transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .6s ease, filter .6s ease; will-change: transform, opacity, filter; } .coverflow__slide[data-active="true"] { cursor: default; } .coverflow__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .coverflow__controls { display: flex; gap: 12px; } .coverflow__btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; transition: background-color .2s, border-color .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1); } .coverflow__btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink-fixed); transform: translateY(-2px); } .coverflow__btn--prev .icon { transform: rotate(180deg); } /* Zwei Wege (Kaufen-Verkaufen / Portfolio aufbauen) */ .ways-section { padding-top: 140px; text-align: center; } .ways-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .ways-head .h2 { max-width: 760px; } .ways__grid { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; text-align: left; } .way-card { position: relative; overflow: hidden; padding: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 16px; /* The hover lift uses the standalone `translate` property (not `transform`) so it never fights the GSAP scroll-in tween, which animates `transform`. */ transition: translate .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s; } .way-card:hover { translate: 0 -4px; box-shadow: 0 20px 40px -24px rgba(14, 20, 20, .45); } .way-card__num { position: absolute; top: -0.2em; right: 8px; font-family: var(--font-display); font-weight: 700; font-size: 220px; line-height: 1; color: var(--ink); opacity: .05; z-index: 0; pointer-events: none; user-select: none; } .way-card__title, .way-card__sub, .way-card__text, .way-card__cta { position: relative; z-index: 1; } .way-card__title { font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: -0.5px; color: var(--accent-bright); } .way-card__sub { font-family: var(--font-display); font-weight: 600; font-size: 18px; } .way-card__text { font-size: 16px; line-height: 1.6; color: var(--text-muted); flex-grow: 1; } .way-card__cta { align-self: flex-start; margin-top: 8px; } /* Testimonials */ .testimonials { padding-top: 140px; } .testimonials__grid { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .video-card { display: flex; flex-direction: column; gap: 20px; padding: 12px 12px 24px; background: var(--surface); border: none; border-radius: var(--r-lg); width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s; } .video-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(14, 20, 20, .25); } .video-card__media { position: relative; height: 340px; border-radius: var(--r-sm); overflow: hidden; } .video-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); } .video-card:hover .video-card__media img { transform: scale(1.04); } .video-card__play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink-fixed); display: flex; align-items: center; justify-content: center; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); } .video-card:hover .video-card__play { transform: scale(1.12); } .video-card__time { position: absolute; right: 16px; bottom: 16px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(14, 20, 20, .75); color: #fff; font-size: 14px; font-weight: 600; } .video-card__foot { padding: 0 12px; display: flex; justify-content: space-between; align-items: center; } .video-card__title { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.5px; } .video-card__more { font-size: 15px; font-weight: 600; color: var(--accent-bright); } /* Video lightbox (Kundenstimmen) */ .video-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; } .video-lightbox[hidden] { display: none; } .video-lightbox__backdrop { position: absolute; inset: 0; background: rgba(14, 20, 20, .85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .video-lightbox__panel { position: relative; width: 100%; max-width: 960px; } .video-lightbox__close { position: absolute; top: -52px; right: 0; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; } .video-lightbox__close:hover { background: var(--line-strong); } .video-lightbox__embed { position: relative; padding-top: 56.25%; border-radius: 24px; overflow: hidden; background: var(--surface); } .video-lightbox__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Lead-Quiz (multi-step form) */ .quiz-wrap { max-width: var(--page-max); margin: 0 auto; padding: 140px var(--gutter-frame) 40px; display: flex; justify-content: center; } .quiz { position: relative; width: 100%; max-width: 760px; background: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-xl); padding: 64px; overflow: hidden; color: var(--ink-fixed); } .quiz__bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(14, 20, 20, .18); } .quiz__bar-fill { height: 100%; width: 100%; background: var(--ink-fixed); transform: scaleX(.06); transform-origin: left; transition: transform .4s ease; } .quiz__panel { margin-top: 16px; } .quiz__step { display: none; flex-direction: column; gap: 24px; } .quiz__step.is-active { display: flex; } @media (prefers-reduced-motion: no-preference) { .quiz__step.is-active { animation: quizStepIn .5s cubic-bezier(.22, 1, .36, 1); } } @keyframes quizStepIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .quiz__q { display: flex; align-items: flex-start; gap: 14px; font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.3; } .quiz__num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: var(--ink-fixed); color: var(--accent); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .quiz__hint { margin-top: -12px; font-size: 15px; color: var(--text-muted); } .quiz .quiz__hint { color: rgba(14, 20, 20, .78); } .quiz__choices { display: flex; flex-direction: column; gap: 10px; } .quiz__choices--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .quiz__choice { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-family: var(--font-body); font-size: 16px; font-weight: 500; text-align: left; color: var(--ink); cursor: pointer; transition: border-color .2s, background-color .2s; } .quiz__choice:hover { border-color: var(--ink-fixed); } .quiz__choice.is-selected { border-color: var(--ink-fixed); background: var(--accent-soft); color: var(--accent-bright); } .quiz__key { flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .quiz__choice.is-selected .quiz__key { border-color: var(--ink-fixed); color: var(--accent-bright); } .quiz__error { font-size: 14px; color: #F0897A; } .quiz .quiz__error { color: #7A1F0E; } .quiz__fields { display: flex; flex-direction: column; gap: 20px; } .quiz__field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-muted); } .quiz .quiz__field { color: rgba(14, 20, 20, .78); } .quiz__field input, .quiz__field textarea { padding: 14px 16px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink); font-family: var(--font-body); font-size: 16px; resize: vertical; } .quiz__field input:focus, .quiz__field textarea:focus { outline: none; border-color: var(--accent); } .quiz__field input.has-error, .quiz__field textarea.has-error { border-color: #F0897A; } .quiz__phone { display: flex; gap: 8px; } .quiz__phone input { flex: 1; min-width: 0; } .quiz__phone-prefix { flex-shrink: 0; width: 96px; padding: 14px 10px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink); font-family: var(--font-body); font-size: 16px; cursor: pointer; } .quiz__phone-prefix:focus { outline: none; border-color: var(--accent); } .quiz__ok { align-self: flex-start; margin-top: 8px; } .quiz__statement-title { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.3; } .quiz__statement-text { font-size: 16px; line-height: 1.6; color: rgba(14, 20, 20, .78); } .kontakt-form-wrap .quiz__statement-text { color: var(--text-muted); } .quiz__step--end { text-align: center; align-items: center; } /* Kontakt page */ .page-header { text-align: center; } .page-header__lead { margin: 20px auto 0; max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--text-muted); } .kontakt-grid { margin-top: 64px; display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 24px; align-items: stretch; } .kontakt-info { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 48px 40px; display: flex; flex-direction: column; gap: 32px; text-align: left; } .kontakt-info__logo { align-self: flex-start; height: 40px; width: auto; } .kontakt-info__block { display: flex; flex-direction: column; gap: 8px; } .kontakt-info__label { font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-bright); } .kontakt-info__text { font-size: 17px; line-height: 1.6; color: var(--text-muted); } .kontakt-info__text a { color: var(--ink); transition: color .2s; } .kontakt-info__text a:hover { color: var(--accent-bright); } .kontakt-map { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); min-height: 320px; } .kontakt-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(92%) hue-rotate(180deg) brightness(0.95) contrast(0.9); } .kontakt-form-wrap { margin-top: 40px; padding-bottom: 90px; text-align: center; } .kontakt-form-wrap .h2 { margin-bottom: 48px; } .kontakt-form { max-width: 640px; margin: 0 auto; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 48px; display: flex; flex-direction: column; gap: 20px; } .kontakt-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .kontakt-form__submit { align-self: flex-start; } .kontakt-form__success { display: none; text-align: center; } .kontakt-form.is-sent > .quiz__field, .kontakt-form.is-sent .kontakt-form__row, .kontakt-form.is-sent .kontakt-form__submit { display: none; } .kontakt-form.is-sent .kontakt-form__success { display: block; } /* Impressum / Datenschutz */ .legal-wrap { padding-top: 24px; padding-bottom: 90px; } .legal { max-width: 720px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 48px; } .legal-section { display: flex; flex-direction: column; gap: 12px; } .legal-heading { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 600; font-size: 22px; } .legal-heading__num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--ink-fixed); font-family: var(--font-body); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .legal .kontakt-info__text { font-size: 16px; } /* Footer */ .footer { max-width: calc(var(--page-max) - 2 * var(--gutter-frame)); margin: 0 var(--gutter-frame) 40px; background: var(--ink); color: var(--bg); border-radius: var(--r-xl); padding: 64px 80px; display: flex; justify-content: space-between; align-items: flex-start; } @media (min-width: 1440px) { .footer { margin-left: auto; margin-right: auto; } } .footer__brand { display: flex; flex-direction: column; gap: 20px; } .footer__address { font-size: 16px; line-height: 1.7; color: var(--dark-muted); } .footer__social { display: flex; gap: 10px; } .social-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--dark-border); display: flex; align-items: center; justify-content: center; transition: background-color .2s, border-color .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1); } .social-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink-fixed); transform: translateY(-2px); } .footer__nav { display: flex; flex-direction: column; gap: 14px; min-width: 240px; } .footer__nav-title { font-size: 14px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dark-muted); } .footer__nav a { font-size: 17px; transition: color .2s; } .footer__nav a:hover { color: var(--accent-ink); } /* ---------- 5. Responsive ---------- */ /* Tablet */ @media (max-width: 1100px) { :root { --gutter-content: 40px; --section-gap: 100px; } .nav-pill__link { padding: 10px 14px; } .benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .benefit { min-height: 0; } .rendite { grid-template-columns: 1fr; gap: 56px; padding: 64px 48px; } .h2 { font-size: 52px; letter-spacing: -2px; } .footer { padding: 56px 48px; } } @media (max-width: 900px) { .nav-pill { display: none; } } /* Mobile */ @media (max-width: 767px) { :root { --header-h: 72px; --section-gap: 80px; --gutter-content: 16px; --gutter-frame: 12px; } .d-only { display: none !important; } .m-only { display: inline; } /* Header */ .site-header { padding: 0 16px; } .site-header .logo { font-size: 26px; } .logo__dot { width: 8px; height: 8px; margin-left: 2px; } .btn-chip { display: none; } .menu-btn { display: flex; } .site-header.is-scrolled { padding: 0 8px; } .site-header.is-scrolled .site-header__inner { padding: 4px 4px 4px 16px; } .site-header.is-scrolled .logo { font-size: 24px; } /* Hero */ .hero { padding: 28px 16px 0; align-items: flex-start; text-align: left; } .hero__title { width: 100%; margin-top: 24px; font-size: 50px; line-height: 1.25; letter-spacing: -2px; text-align: center; } .hero__pill-wrap { width: 100%; margin-top: 7px; text-align: center; } .hero__pill { padding: 2px 18px 8px; border-radius: 18px; font-size: 50px; letter-spacing: -1.5px; } .hero__lead { margin-top: 24px; font-size: 17px; } .hero__actions { margin-top: 24px; width: 100%; flex-direction: column; gap: 10px; } .hero__actions .btn { width: 100%; height: 56px; font-size: 16px; } .hero__video-title { margin-top: 56px; font-size: 26px; } .hero__video-wrap { margin-top: 20px; } .hero__video-embed { border-radius: var(--r-md); } /* Headings */ .h2, .benefits .h2 { font-size: 38px; line-height: 1.05; letter-spacing: -1.5px; } /* Benefits */ .benefits__grid { margin-top: 28px; grid-template-columns: 1fr; gap: 12px; } .benefit { padding: 24px; border-radius: var(--r-sm); display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; row-gap: 6px; align-content: start; } .benefit .icon-chip { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 14px; } .benefit .icon-chip .icon { width: 22px; height: 22px; } .benefit__num { display: none; } .benefit__title { font-size: 20px; letter-spacing: 0; } .benefit__text { font-size: 15px; line-height: 1.5; } /* Rendite: flatten both columns into one ordered stack */ .rendite { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 40px 24px; border-radius: var(--r-lg); } .rendite__intro, .rendite__chart { display: contents; } .rendite__eyebrow { order: 1; font-size: 13px; } .rendite__title { order: 2; font-size: 40px; letter-spacing: -1.5px; } .rendite__meta { order: 3; display: block; font-size: 13px; } .rendite__legend { display: inline; } .bars { order: 4; gap: 18px; } .bars__marker { display: none; } .rendite__amazing { order: 5; margin-top: 8px; font-size: 28px; letter-spacing: -0.5px; } .rendite__cta { order: 6; align-self: stretch; margin-top: 0; height: 56px; font-size: 16px; } .rendite__footnote { order: 7; padding-top: 16px; font-size: 12px; line-height: 1.6; } .bar { gap: 8px; } .bar__head { font-size: 15px; } .bar__value { font-family: var(--font-body); font-size: 15px; } .bar__track { height: 40px; } .bar__fill { border-radius: 12px; } /* Zwei Wege: stack the cards, shrink the background numeral */ .ways-section { padding-top: 80px; } .ways__grid { margin-top: 24px; grid-template-columns: 1fr; gap: 16px; } .way-card { padding: 28px; border-radius: var(--r-sm); } .way-card__num { font-size: 140px; } .way-card__title { font-size: 26px; } /* Testimonials */ .testimonials { padding-top: 80px; } .testimonials__grid { margin-top: 24px; grid-template-columns: 1fr; gap: 12px; } .video-card { gap: 14px; padding: 8px 8px 18px; border-radius: var(--r-sm); } .video-card__media { height: 200px; border-radius: 18px; } .video-card__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .video-card__play .icon { width: 22px; height: 22px; } .video-card__time { right: 10px; bottom: 10px; padding: 4px 10px; font-size: 13px; } .video-card__foot { padding: 0 10px; } .video-card__title { font-size: 20px; letter-spacing: 0; } /* Lead-Quiz */ .quiz-wrap { padding: 80px 12px 12px; } .quiz { padding: 32px 24px; border-radius: var(--r-lg); } .quiz__q { font-size: 21px; } .quiz__statement-title { font-size: 22px; } .quiz__choices--grid { grid-template-columns: 1fr; } .quiz__ok { align-self: stretch; text-align: center; justify-content: center; } /* Kontakt page */ .kontakt-grid { grid-template-columns: 1fr; margin-top: 40px; } .kontakt-info { padding: 32px 24px; border-radius: var(--r-sm); } .kontakt-map { min-height: 260px; border-radius: var(--r-sm); } .kontakt-form-wrap { margin-top: 60px; padding-bottom: 60px; } .kontakt-form { padding: 28px 20px; border-radius: var(--r-lg); } .kontakt-form__row { grid-template-columns: 1fr; gap: 20px; } .kontakt-form__submit { align-self: stretch; text-align: center; justify-content: center; } /* Footer */ .footer { margin: 0 12px 12px; padding: 40px 24px; border-radius: var(--r-lg); flex-direction: column; gap: 28px; } .footer__brand { display: contents; } .logo--xl { font-size: 44px; letter-spacing: -1.5px; } .logo--xl .logo__dot { width: 12px; height: 12px; margin-left: 3px; } .footer__address { font-size: 15px; } .footer__nav { order: 1; flex-direction: row; gap: 24px; min-width: 0; } .footer__nav a { font-size: 16px; } .footer__social { order: 2; } }