/* ============================================================ Eigene Styles, die nicht über Tailwind-Utilities abgedeckt sind. (Tailwind-Konfiguration steht im der index.html) BREAKPOINT-SYSTEM (projektweit einheitlich): max-width: 640px → Phone max-width: 900px → Tablet (= Hamburger-/Nav-Grenze) max-width: 1200px → Desktop-Feintuning Komplementäre min/max-Paare nutzen 899px (max) / 900px (min), um Doppeltreffer auf exakt 900px zu vermeiden. ============================================================ */ /* Basis-Reset: ersetzt das Tailwind-Preflight, das nicht mehr geladen wird. Ohne diese Zeile behält der den Browser-Standardmargin von 8px, der als weißer Rand rund um randlose Sektionen (z. B. die Hero) sichtbar wird. */ html, body { margin: 0; padding: 0; } .font-serif { font-family: "Inter", sans-serif; } /* Trust-Block Icons (alt) */ .trust-icon { display: block; width: 64px; height: 64px; object-fit: contain; mix-blend-mode: multiply; } /* ============================================================ Trust Block Neu – Desktop Section ============================================================ */ .trust-karten-bg { background-color: #F8FAFB; } .trust-neue-card { background: #FFFFFF; border: 1px solid rgba(24,48,84,0.08); border-radius: 12px; box-shadow: 0 2px 16px rgba(0, 8, 30, 0.06); transition: transform 0.28s ease, box-shadow 0.28s ease; } .trust-neue-card:hover { transform: translateY(-3px); box-shadow: 0 8px 36px rgba(24, 48, 84, 0.12); } /* ============================================================ Leistungen / Trust-Section – Haus-Zelle (linke Spalte unten) ============================================================ */ /* Haus-Zelle: füllt via flex-1 die restliche Höhe der linken Spalte */ .leistungen-haus-zone { position: relative; overflow: hidden; min-height: 220px; } /* Hausbild: füllt Zelle vollständig */ .leistungen-haus-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: 1; display: block; } /* Oben: weicher Übergang vom Section-Bg ins Hausbild */ .leistungen-haus-fade { position: absolute; top: 0; left: 0; right: 0; height: 56px; background: linear-gradient(to bottom, #F5F7FA 10%, rgba(245,247,250,0) 100%); pointer-events: none; z-index: 2; } /* Rechts: weicher Übergang Hausbild → Kartenbereich */ .leistungen-haus-fade-r { position: absolute; top: 0; bottom: 0; right: 0; width: 56px; background: linear-gradient(to right, rgba(245,247,250,0), #F5F7FA); pointer-events: none; z-index: 2; } /* ============================================================ Trust-Block rechte Seite – helle Premium-Karten ============================================================ */ .trust-navy-card { background: #FFFFFF; border-radius: 12px; padding: 28px 24px 24px; border: 1px solid rgba(217, 222, 231, 0.7); box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03); transition: transform 0.28s ease, box-shadow 0.28s ease; position: relative; } .trust-navy-card:hover { transform: translateY(-4px); box-shadow: 0 10px 36px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.05); border-color: #C8D4E8; } /* Icon-Box: kleines Navy-Quadrat */ .trust-navy-icon-box { width: 50px; height: 50px; background: #183054; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.28s ease; } .trust-navy-card:hover .trust-navy-icon-box { background: #1E2F51; } .trust-navy-icon { font-size: 22px !important; color: rgba(255, 255, 255, 0.88); line-height: 1; flex-shrink: 0; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } .trust-navy-num { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: rgba(217, 222, 231, 0.70); font-family: "Inter", sans-serif; user-select: none; } .trust-navy-title { font-size: 15.5px; font-weight: 700; color: #0F172A; line-height: 1.25; letter-spacing: -0.01em; margin: 0; } .trust-navy-body { font-size: 14.5px; color: #5C6B82; line-height: 1.70; margin: 0; } .trust-navy-rule { margin-top: 18px; width: 28px; height: 1.5px; background: rgba(24, 48, 84, 0.18); flex-shrink: 0; } .trust-neue-cta { border-bottom: 1.5px solid #183054; padding-bottom: 5px; transition: opacity 0.2s ease; } .trust-neue-cta:hover { opacity: 0.65; } /* Material Symbols Standard-Einstellung */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Glaseffekt-Panel */ .glass-panel { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Schwebe-Animation */ .animate-float { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } /* Scroll-Reveal */ .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .reveal.active { opacity: 1; transform: translateY(0); } /* ============================================================ Ablauf / Prozess-Timeline – Premium Light Theme 5.0 ============================================================ */ /* Architektur-Illustration: rechts positioniert, sehr dezent */ .ablauf-bg-image { position: absolute; right: 0; top: 0; width: 64%; height: 100%; background: url('../images/ablauf-bg.png') right center / cover no-repeat; opacity: 0.88; pointer-events: none; z-index: 0; } /* Weißer Verlauf: schützt Headline links */ .ablauf-bg-fade { position: absolute; left: 0; top: 0; width: 52%; height: 100%; background: linear-gradient(to right, #F8FAFB 48%, rgba(248,250,251,0) 100%); pointer-events: none; z-index: 0; } .ablauf-inner { max-width: 1280px; margin: 0 auto; padding: 0 64px; position: relative; z-index: 1; } /* --- Zweispaltig: Text links | Stage rechts --- */ .ablauf-layout { display: grid; /* 0.30fr links → mehr Raum für den Kartenbereich rechts */ grid-template-columns: minmax(200px, 0.30fr) 1fr; gap: clamp(24px, 3.5vw, 52px); align-items: center; margin-bottom: 0; } /* Linke Textspalte */ .ablauf-left { position: relative; z-index: 1; } /* Rechte Kachelspalte (Stage + Popup-Spacer) */ .ablauf-right { position: relative; min-width: 0; /* Nochmals nach unten versetzt → Karten sitzen mittig zur linken Headline */ padding-top: clamp(72px, 7vw, 100px); } /* --- Header (jetzt in linker Spalte, kein bottom-margin mehr) --- */ .ablauf-header { max-width: 520px; margin-bottom: 68px; } .ablauf-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #183054; opacity: 0.58; margin: 0 0 22px 0; display: flex; align-items: center; gap: 16px; } .ablauf-eyebrow::before { content: ''; display: block; width: 28px; height: 1.5px; background: #183054; opacity: 0.5; flex-shrink: 0; } .ablauf-headline { font-size: clamp(42px, 4.5vw, 64px); line-height: 1.04; letter-spacing: -0.03em; color: #0F172A; margin: 0 0 22px 0; } .ablauf-header-rule { width: 40px; height: 2.5px; background: #183054; margin: 0 0 22px 0; border-radius: 2px; } .ablauf-subtext { font-size: 16px; line-height: 1.80; color: #3D5278; margin: 0; } /* --- Stage: fixed height, SVG behind cards --- */ .ablauf-stage { position: relative; height: 300px; overflow: visible; margin-bottom: 0; } .ablauf-svg { position: absolute; top: 0; left: 0; width: 100%; height: 300px; pointer-events: none; z-index: 0; overflow: visible; } /* Ghost-Track: leicht sichtbarer Leitfaden */ .ablauf-path-track { stroke: rgba(24,48,84,0.14); stroke-width: 2; fill: none; } /* Animierte Fülllinie: deutlich sichtbar, navy */ .ablauf-path-fill { stroke: rgba(24,48,84,0.62); stroke-width: 3; fill: none; stroke-linecap: round; transition: stroke-dashoffset 2.4s cubic-bezier(0.4, 0, 0.2, 1); } /* --- Phases flex row --- */ .ablauf-phases { display: flex; align-items: flex-start; height: 300px; position: relative; z-index: 1; } .ablauf-phase { flex: 1; min-width: 0; padding: 0 6px; /* reduziert von 12px → mehr effektive Kartenbreite */ cursor: pointer; outline: none; position: relative; } /* Aktive Phase über Nachbarn legen */ .ablauf-phase.is-active { z-index: 20; } /* --- Premium-Kachel: weiß, einheitliche Proportionen --- */ .ablauf-card { background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 10px; padding: 22px 12px 18px; /* leicht kompakter, aber konsistenter */ display: flex; flex-direction: column; align-items: center; text-align: center; /* min-height stellt sicher dass ALLE Karten gleich hoch erscheinen */ min-height: 156px; box-shadow: 0 1px 3px rgba(24,48,84,0.05), 0 4px 20px rgba(24,48,84,0.07); transition: transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.30s ease, border-color 0.30s ease, background 0.30s ease; will-change: transform; position: relative; overflow: visible; } .ablauf-phase:hover .ablauf-card, .ablauf-phase:focus .ablauf-card { border-color: #C8D4E8; box-shadow: 0 2px 8px rgba(24,48,84,0.07), 0 8px 28px rgba(24,48,84,0.11); } .ablauf-phase.is-active .ablauf-card { transform: translateY(-8px); background: radial-gradient(ellipse at 18% 22%, rgba(255, 255, 255, 0.10) 0%, transparent 48%), linear-gradient(145deg, #1E2F51 0%, #183054 50%, #0F172A 100%); border-color: #183054; box-shadow: 0 8px 24px rgba(24,48,84,0.22), 0 20px 56px rgba(24,48,84,0.28); } /* --- Nummern-Badge --- */ .ablauf-badge { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(24,48,84,0.22); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: rgba(24,48,84,0.55); margin-bottom: 14px; flex-shrink: 0; transition: border-color 0.30s ease, color 0.30s ease, background 0.30s ease; } .ablauf-phase.is-active .ablauf-badge { border-color: rgba(255,255,255,0.38); color: rgba(255,255,255,0.88); background: rgba(255,255,255,0.08); } /* --- Icon (Outline-Stil) --- */ .ablauf-card-icon { font-size: 28px !important; color: #183054; opacity: 0.65; margin-bottom: 12px; flex-shrink: 0; line-height: 1; transition: color 0.30s ease, opacity 0.30s ease; } .ablauf-phase.is-active .ablauf-card-icon { color: #ffffff; opacity: 0.90; } /* --- Phasen-Titel --- */ .ablauf-name { font-size: 11.5px; /* leicht kleiner → verhindert 3+ Zeilen-Umbruch */ font-weight: 700; line-height: 1.40; color: #0F172A; letter-spacing: 0.005em; margin: 0; min-width: 0; width: 100%; transition: color 0.30s ease; } .ablauf-phase.is-active .ablauf-name { color: #ffffff; } /* --- Detail-Popup: direkt unter der aktiven Kachel --- */ .ablauf-popup { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px); /* 172px: etwas breiter als 155px → weniger unschöne Umbrüche */ width: 172px; background: #FFFFFF; border: 1.5px solid #E2E8F0; border-top: 3px solid #183054; border-radius: 0 0 10px 10px; box-shadow: 0 4px 16px rgba(24,48,84,0.08), 0 12px 44px rgba(24,48,84,0.13); padding: 14px 16px 16px; opacity: 0; pointer-events: none; transition: opacity 0.26s ease, transform 0.26s ease; z-index: 30; /* KRITISCH: .ablauf-card erbt text-align:center — hier explizit links */ text-align: left; } .ablauf-phase.is-active .ablauf-popup { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .ablauf-popup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .ablauf-popup li { font-size: 11.5px; font-weight: 500; color: #3D5278; line-height: 1.40; /* flex: Icon links (feste Breite), Text füllt Rest */ display: flex; align-items: flex-start; gap: 0; /* text-align:left hier ebenfalls setzen, damit raw text nodes linksbündig sind */ text-align: left; } /* Kleines Icon links neben jedem Detailpunkt — feste Breite erzeugt einheitliche Textspalte */ .ablauf-popup-icon { font-size: 14px !important; color: #183054; opacity: 0.55; flex-shrink: 0; /* Feste Breite für konsistente Textachse über alle Listenpunkte */ width: 22px; display: inline-flex; justify-content: center; margin-right: 8px; margin-top: 1px; line-height: 1; } /* --- Popup-Platzhalter: kein Layout-Sprung; schlankere Höhe --- */ .ablauf-popup-spacer { height: 130px; display: flex; align-items: flex-end; justify-content: flex-end; padding-bottom: 14px; } /* UX-Hinweis "Klicken Sie auf eine Phase..." */ .ablauf-hint { font-size: 12px; color: rgba(24,48,84,0.38); letter-spacing: 0.01em; margin: 0; user-select: none; } /* --- Benefit-Leiste (volle Breite, sauber zentriert) --- */ .ablauf-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid rgba(24,48,84,0.12); padding-top: 44px; margin-top: 40px; text-align: center; } .ablauf-strip-item { padding: 0 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; } /* Premium Navy-Kreis um das Icon */ .ablauf-strip-icon-wrap { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(ellipse at 30% 28%, rgba(255, 255, 255, 0.10) 0%, transparent 52%), linear-gradient(145deg, #1E2F51 0%, #183054 100%); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; flex-shrink: 0; box-shadow: 0 4px 14px rgba(24, 48, 84, 0.22); } .ablauf-strip-icon { font-size: 22px !important; color: #FFFFFF; opacity: 0.88; } .ablauf-strip-label { font-size: 14px; font-weight: 700; color: #0F172A; margin: 0; letter-spacing: 0.01em; } .ablauf-strip-desc { font-size: 14.5px; color: rgba(24,48,84,0.55); margin: 0; line-height: 1.55; } /* --- Responsive: ablauf-layout --- */ @media (max-width: 900px) { .ablauf-layout { grid-template-columns: 1fr; gap: 40px; } .ablauf-left { max-width: 560px; } .ablauf-strip { grid-template-columns: repeat(2, 1fr); gap: 32px 0; } /* --- Timeline mobil: vertikale Liste statt horizontaler SVG-Kurve --- */ .ablauf-right { padding-top: 0; } .ablauf-stage { height: auto; margin-bottom: 0; } .ablauf-svg { display: none; } .ablauf-phases { flex-direction: column; align-items: stretch; height: auto; gap: 14px; } /* margin-top ist inline gesetzt (Zickzack-Versatz) → !important nötig */ .ablauf-phase { margin-top: 0 !important; padding: 0; } .ablauf-card { min-height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 0 14px; padding: 18px 20px; } .ablauf-badge { margin-bottom: 0; } .ablauf-card-icon { margin-bottom: 0; } .ablauf-name { width: auto; flex: 1; min-width: 0; font-size: 14px; } /* Hover-/Aktiv-Effekt auf Mobile komplett deaktivieren – auf dem Handy macht Hover keinen Sinn und beim Tap (focus) schob translateX das Popup aus dem Bild. Karten bleiben im normalen (hellen) Zustand, Detailpunkte ohnehin dauerhaft sichtbar. */ .ablauf-phase.is-active .ablauf-card { transform: none; background: #FFFFFF; border-color: #E2E8F0; box-shadow: 0 1px 3px rgba(24,48,84,0.05), 0 4px 20px rgba(24,48,84,0.07); } .ablauf-phase.is-active .ablauf-badge { border-color: rgba(24,48,84,0.22); color: rgba(24,48,84,0.55); background: transparent; } .ablauf-phase.is-active .ablauf-card-icon { color: #183054; opacity: 0.65; } .ablauf-phase.is-active .ablauf-name { color: #0F172A; } .ablauf-phase.is-active .ablauf-popup { transform: none; } /* Detailpunkte dauerhaft inline anzeigen statt absolut/hover-Popup */ .ablauf-popup { position: static; opacity: 1; pointer-events: auto; transform: none; width: 100%; flex-basis: 100%; border: none; border-top: 1px solid #E2E8F0; border-radius: 0; box-shadow: none; padding: 14px 0 0; margin-top: 14px; } .ablauf-popup-spacer { display: none; } } @media (max-width: 640px) { .ablauf-strip { grid-template-columns: 1fr 1fr; gap: 28px 0; } .ablauf-strip-item { padding: 0 8px; } } /* ============================================================ Leistungsblock (unter Ablauf) ============================================================ */ .leist-inner { max-width: 1280px; margin: 0 auto; padding: 0 64px; } .leist-card { background: #FFFFFF; border: 1.5px solid #E8EDF5; border-radius: 12px; padding: 28px 24px 24px; box-shadow: 0 2px 12px rgba(24,48,84,0.05); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .leist-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(24,48,84,0.10); border-color: #C8D4E8; } .leist-card-featured { background: #183054; border: 1.5px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 32px 28px 28px; box-shadow: 0 4px 24px rgba(0,8,30,0.16), 0 12px 48px rgba(0,8,30,0.12); transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease; } .leist-card-featured:hover { transform: translateY(-4px); background: #1E2F51; box-shadow: 0 8px 40px rgba(0,8,30,0.22), 0 20px 60px rgba(0,8,30,0.16); } .leist-icon { font-size: 26px !important; color: #183054; opacity: 0.55; line-height: 1; flex-shrink: 0; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 28; } .leist-icon-featured { font-size: 26px !important; color: rgba(255,255,255,0.75); line-height: 1; flex-shrink: 0; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 28; } .leist-title { font-size: 16px; font-weight: 700; color: #0F172A; line-height: 1.35; letter-spacing: -0.01em; margin: 0; } .leist-title-featured { font-size: 22px; font-weight: 700; color: #FFFFFF; line-height: 1.22; letter-spacing: -0.02em; margin: 0; } .leist-body { font-size: 15px; color: #5C6B82; line-height: 1.65; margin: 0; } .leist-body-featured { font-size: 15px; color: rgba(255,255,255,0.72); line-height: 1.70; margin: 0; } .leist-rule { width: 28px; height: 1.5px; background: rgba(24,48,84,0.14); flex-shrink: 0; } .leist-rule-featured { width: 28px; height: 1.5px; background: rgba(255,255,255,0.18); flex-shrink: 0; } @media (max-width: 900px) { .leist-inner { padding: 0 40px; } } @media (max-width: 640px) { .leist-inner { padding: 0 20px; } } /* ============================================================ Bauprozess Placeholder Section ============================================================ */ .bauprozess-placeholder-section { background: #F5F7FA; padding: 96px 24px; } .bauprozess-placeholder-container { max-width: 1240px; margin: 0 auto; } .bauprozess-placeholder-image { display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto; border-radius: 24px; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10); } @media (max-width: 640px) { .bauprozess-placeholder-section { padding: 64px 16px; } .bauprozess-placeholder-image { border-radius: 16px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10); } } /* ============================================================ Referenzen Section – Editorial Portfolio Style ============================================================ */ .ref-card { background: #FFFFFF; border-radius: 20px; overflow: hidden; position: relative; /* needed for ::after navy line */ box-shadow: 0 4px 24px rgba(24, 48, 84, 0.07), 0 1px 4px rgba(24, 48, 84, 0.04); transition: box-shadow 0.30s ease, transform 0.30s ease; } /* Clickable card variant (whole card links to the Referenzen page) */ a.ref-card { display: block; text-decoration: none; color: inherit; cursor: pointer; } a.ref-card:hover .ref-card-arrow { opacity: 1; } /* Navy bottom accent line — the design signature from the reference */ .ref-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #183054; pointer-events: none; } .ref-card:hover { box-shadow: 0 12px 48px rgba(24, 48, 84, 0.13), 0 2px 8px rgba(24, 48, 84, 0.06); transform: translateY(-3px); } .ref-card-img { overflow: hidden; position: relative; flex-shrink: 0; } .ref-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.72s ease; } .ref-card:hover .ref-card-img img { transform: scale(1.04); } /* Hover-Slideshow: zusätzliche, übereinander gestapelte Bilder einer Kategorie. Beim Hovern blenden sie nacheinander per Crossfade ein (Steuerung in main.js). Der bestehende Zoom (scale auf .ref-card-img img) wirkt weiterhin auf alle. */ .ref-card-img .ref-ss-img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease, transform 0.72s ease; } .ref-card-img .ref-ss-img.is-active { opacity: 1; } .ref-card-body { padding: 20px 24px 26px; /* extra bottom so navy line doesn't sit on text */ } /* Tag: Navy pill (reference style) */ .ref-tag { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #FFFFFF; background: #183054; border-radius: 999px; padding: 3px 10px; margin-bottom: 11px; } /* Row: title + sub on left, minimal arrow on right */ .ref-card-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .ref-card-arrow { flex-shrink: 0; color: #183054; opacity: 0.80; display: flex; align-items: center; margin-bottom: 2px; } .ref-title { font-size: 17px; font-weight: 700; color: #0F172A; line-height: 1.28; letter-spacing: -0.01em; margin: 0 0 5px; } .ref-sub { font-size: 14px; color: #7C8BA0; margin: 0; line-height: 1.4; } .ref-inner { max-width: 1280px; margin: 0 auto; padding: 0 64px; } @media (max-width: 900px) { .ref-inner { padding: 0 40px; } } @media (max-width: 640px) { .ref-inner { padding: 0 20px; } } /* ============================================================ Über Uns Section ============================================================ */ .ub-inner { max-width: 1280px; margin: 0 auto; padding: 0 64px; } .ub-left-card { background: linear-gradient(148deg, #183054 0%, #172B4D 55%, #1A2F50 100%); border-radius: 16px; padding: 44px 40px 40px; box-shadow: 0 12px 48px rgba(0, 8, 30, 0.20), 0 2px 8px rgba(0, 8, 30, 0.10); min-height: 520px; } .ub-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; line-height: 1; } .ub-headline { font-size: clamp(26px, 2.5vw, 38px); font-weight: 700; color: #FFFFFF; line-height: 1.20; letter-spacing: -0.025em; margin: 0 0 24px; } .ub-separator { width: 40px; height: 1.5px; background: rgba(255, 255, 255, 0.20); margin-bottom: 20px; } .ub-body { font-size: 16px; color: rgba(255, 255, 255, 0.72); line-height: 1.78; margin: 0; } .ub-btn { display: inline-flex; align-items: center; gap: 10px; background: #FFFFFF; color: #183054; font-size: 14px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 14px 24px; border-radius: 8px; text-decoration: none; transition: background 0.25s ease, transform 0.22s ease, box-shadow 0.25s ease; } .ub-btn:hover { background: #F0F4FC; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 8, 30, 0.12); } .ub-right { padding-left: 12px; } .ub-sketch-wrap { width: 100%; height: 190px; overflow: hidden; border-radius: 10px; margin-bottom: 18px; background: #F5F7FA; } .ub-sketch-img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; mix-blend-mode: multiply; opacity: 0.92; } .ub-team-eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: rgba(24, 48, 84, 0.45); text-transform: uppercase; margin-bottom: 5px; } .ub-team-sub { font-size: 18px; font-weight: 700; color: #0F172A; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 14px; } .ub-team-card { background: #FFFFFF; border: 1.5px solid #E8EDF5; border-radius: 12px; padding: 18px 16px; display: flex; align-items: center; gap: 13px; box-shadow: 0 2px 10px rgba(24, 48, 84, 0.05); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .ub-team-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(24, 48, 84, 0.10); border-color: #C8D4E8; } .ub-team-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: rgba(24, 48, 84, 0.07); border: 1.5px solid #D9DEE7; box-shadow: 0 1px 5px rgba(24, 48, 84, 0.10); } .ub-team-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 8%; display: block; } .ub-team-name { font-size: 13.5px; font-weight: 700; color: #0F172A; letter-spacing: -0.01em; margin: 0 0 2px; line-height: 1.25; } .ub-team-role { font-size: 11.5px; color: #7C8BA0; margin: 0; line-height: 1.3; } /* Trust strip */ .ub-trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid rgba(24, 48, 84, 0.08); margin-top: 72px; padding: 52px 0 72px; gap: 0; } .ub-trust-item { padding: 0 32px; display: flex; align-items: flex-start; gap: 15px; border-right: 1.5px solid rgba(24, 48, 84, 0.08); } .ub-trust-item:first-child { padding-left: 0; } .ub-trust-item:last-child { border-right: none; } .ub-trust-icon-wrap { width: 40px; height: 40px; border-radius: 50%; background: rgba(24, 48, 84, 0.07); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .ub-trust-icon-wrap .material-symbols-outlined { font-size: 19px !important; color: #183054; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } .ub-trust-title { font-size: 15px; font-weight: 700; color: #0F172A; letter-spacing: -0.01em; margin: 0 0 4px; line-height: 1.25; } .ub-trust-body { font-size: 14px; color: #7C8BA0; line-height: 1.55; margin: 0; } @media (max-width: 900px) { .ub-inner { padding: 0 40px; } .ub-right { padding-left: 0; margin-top: 20px; } .ub-trust-strip { grid-template-columns: repeat(2, 1fr); } .ub-trust-item:nth-child(2) { border-right: none; } .ub-trust-item:nth-child(3) { border-right: 1.5px solid rgba(24,48,84,0.08); border-top: 1.5px solid rgba(24,48,84,0.08); padding-top: 28px; } .ub-trust-item:nth-child(4) { border-right: none; border-top: 1.5px solid rgba(24,48,84,0.08); padding-top: 28px; } } @media (max-width: 640px) { .ub-inner { padding: 0 20px; } .ub-left-card { padding: 32px 24px; min-height: auto; } .ub-trust-strip { grid-template-columns: 1fr; gap: 0; } .ub-trust-item { border-right: none !important; border-top: 1.5px solid rgba(24,48,84,0.08); padding: 20px 0; } .ub-trust-item:first-child { border-top: none; padding-top: 0; } } /* ============================================================ Partner-Strip / Logo-Ticker ============================================================ */ .partner-strip { background: #FFFFFF; border-top: 1px solid rgba(24, 48, 84, 0.06); border-bottom: 1px solid rgba(24, 48, 84, 0.06); padding: 40px 0 46px; } .partner-strip__eyebrow-wrap { max-width: 1280px; margin: 0 auto; padding: 0 64px; margin-bottom: 34px; } .partner-strip__eyebrow { display: flex; align-items: center; justify-content: center; gap: 20px; } .partner-strip__eyebrow-line { flex: 1; max-width: 90px; height: 1px; background: rgba(24, 48, 84, 0.14); } .partner-strip__eyebrow-text { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: rgba(24, 48, 84, 0.42); text-transform: uppercase; white-space: nowrap; } /* Marquee – volle Breite, Fade-Maske an den Rändern */ .partner-strip__marquee { overflow: hidden; -webkit-mask-image: linear-gradient( to right, transparent 0%, black 7%, black 93%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, black 7%, black 93%, transparent 100% ); } .partner-strip__track { display: flex; align-items: center; width: max-content; animation: partnerMarquee 34s linear infinite; } /* Hover auf dem Marquee-Wrapper pausiert die Animation */ .partner-strip__marquee:hover .partner-strip__track { animation-play-state: paused; } .partner-strip__logo-group { display: flex; align-items: center; flex-shrink: 0; } .partner-strip__logo-item { padding: 6px 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .partner-strip__logo-item img { height: 40px; width: auto; max-width: 175px; object-fit: contain; display: block; filter: grayscale(12%) opacity(0.76); transition: filter 0.32s ease, transform 0.28s ease; will-change: transform; } .partner-strip__logo-item:hover img { filter: grayscale(0%) opacity(1); transform: scale(1.04) translateY(-2px); } @keyframes partnerMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Barrierefreiheit: reduzierte Bewegung */ @media (prefers-reduced-motion: reduce) { .partner-strip__track { animation: none; } } @media (max-width: 900px) { .partner-strip__eyebrow-wrap { padding: 0 40px; } .partner-strip__logo-item { padding: 6px 38px; } .partner-strip__logo-item img { height: 34px; max-width: 145px; } } @media (max-width: 640px) { .partner-strip { padding: 28px 0 32px; } .partner-strip__eyebrow-wrap { padding: 0 20px; margin-bottom: 22px; } .partner-strip__logo-item { padding: 4px 26px; } .partner-strip__logo-item img { height: 26px; max-width: 105px; } .partner-strip__track { animation-duration: 26s; } .partner-strip__marquee { -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); } } /* ============================================================ About Feature – Über uns (volle Breite, schräge Navy-Kante) ============================================================ */ .about-feature { background: #F8FAFC; overflow: hidden; } /* ── TOP: linkes Navy-Panel + rechter Team-Bereich ─── */ .about-feature__top { display: flex; align-items: stretch; min-height: 620px; } /* LEFT: Navy-Panel mit diagonaler rechter Kante */ .about-feature__intro { flex: 0 0 50%; background: radial-gradient(ellipse at 22% 18%, rgba(255, 255, 255, 0.07) 0%, transparent 46%), linear-gradient(158deg, #1E2F51 0%, #183054 48%, #0F172A 100%); clip-path: polygon(0 0, 76% 0, 100% 100%, 0 100%); z-index: 2; position: relative; display: flex; flex-direction: column; padding: 72px 56px 68px 72px; } .about-feature__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.42); text-transform: uppercase; margin-bottom: 14px; display: block; } .about-feature__sep { width: 36px; height: 1.5px; background: rgba(255, 255, 255, 0.22); margin-bottom: 28px; flex-shrink: 0; } .about-feature__headline { font-family: "Inter", sans-serif; font-size: clamp(34px, 3.0vw, 48px); font-weight: 700; color: #FFFFFF; line-height: 1.16; letter-spacing: -0.03em; margin: 0 0 24px; max-width: 380px; } .about-feature__body { font-size: 16px; color: rgba(255, 255, 255, 0.72); line-height: 1.82; margin: 0 0 36px; max-width: 340px; } .about-feature__cta { margin-top: auto; display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; background: #FFFFFF; color: #183054; font-size: 14px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 14px 24px; border-radius: 8px; text-decoration: none; transition: background 0.25s ease, transform 0.22s ease, box-shadow 0.25s ease; } .about-feature__cta:hover { background: #F0F4FC; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 8, 30, 0.14); } /* RIGHT: heller Team-Bereich — jetzt mit zentrierter Portrait-Reihe */ .about-feature__team-area { flex: 1; background: #F8FAFC; margin-left: -9%; z-index: 1; position: relative; display: flex; flex-direction: column; justify-content: center; /* vertikal zentriert (war: flex-end) */ padding: 56px 64px 56px 16%; } /* Hausbild Hintergrund – rechts oben, dezent und groß */ .about-feature__house-bg { position: absolute; top: 0; right: 0; width: 72%; height: 62%; pointer-events: none; z-index: 0; overflow: hidden; } .about-feature__house-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: 0.50; mix-blend-mode: multiply; display: block; } /* Team-Header */ .about-feature__team-header { position: relative; z-index: 1; margin-bottom: 20px; } .about-feature__team-eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: rgba(24, 48, 84, 0.42); text-transform: uppercase; margin-bottom: 10px; } .about-feature__team-line { width: 32px; height: 1.5px; background: rgba(24, 48, 84, 0.18); margin-bottom: 12px; } .about-feature__team-sub { font-size: 20px; font-weight: 700; color: #0F172A; letter-spacing: -0.025em; line-height: 1.22; margin: 0; } /* Kurze Vertrauens-Subline unter der Team-Headline: erklärt die persönliche Begleitung, dezent gehalten – kein neues Layout. */ .about-feature__team-note { font-size: 14px; line-height: 1.6; color: #5C6B82; margin: 8px 0 0; max-width: 440px; } /* 4 Personen als freie Portrait-Reihe — kein Kachel-Look */ .about-feature__persons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; z-index: 1; margin-bottom: clamp(36px, 4vw, 52px); } .about-feature__person { position: relative; text-align: center; padding: 0 clamp(10px, 1.2vw, 20px); } /* Dezente vertikale Trennlinie zwischen den Personen */ .about-feature__person:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 16px; height: 160px; width: 1px; background: #D9DEE7; opacity: 0.80; } .about-feature__person-avatar { width: clamp(88px, 7vw, 120px); height: clamp(88px, 7vw, 120px); border-radius: 50%; overflow: hidden; margin: 0 auto 18px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10); background: rgba(24, 48, 84, 0.05); flex-shrink: 0; } .about-feature__person-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 8%; display: block; } .about-feature__person-name { font-size: 14px; font-weight: 700; color: #0F172A; letter-spacing: -0.01em; margin: 0 0 6px; line-height: 1.25; } .about-feature__person-role { font-size: 12px; color: rgba(15, 23, 42, 0.50); line-height: 1.48; margin: 0; /* Reserviert Platz für zwei Zeilen, damit einzeilige Rollen (z. B. „Kundenberater“) die nachfolgende Linie nicht nach oben verschieben — alle vier Linien bleiben so auf gleicher Höhe, unabhängig von der Zeilenanzahl der Rolle. */ min-height: 2.96em; } /* Kleine Strichlinie pro Person — dezentes Design-Merkmal */ .about-feature__person-line { display: block; width: 32px; height: 2px; background: #183054; opacity: 0.42; margin: 22px auto 0; border-radius: 999px; } /* ── Team-Video-Player ──────────────────────────────── */ .about-feature__video-wrap { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 36px rgba(24, 48, 84, 0.16), 0 2px 8px rgba(24, 48, 84, 0.08); margin: 0 0 32px; aspect-ratio: 16 / 9; background: #0F172A; z-index: 1; } .about-feature__video { width: 100%; height: 100%; object-fit: cover; display: block; } .af-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.28); border: none; cursor: pointer; transition: background 0.2s ease; padding: 0; } .af-play-btn:hover { background: rgba(15, 23, 42, 0.40); } .af-play-btn__circle { width: 76px; height: 76px; border-radius: 50%; background: #E6830A; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 28px rgba(230, 131, 10, 0.45); transition: transform 0.2s ease, box-shadow 0.2s ease; padding-left: 5px; } .af-play-btn:hover .af-play-btn__circle { transform: scale(1.10); box-shadow: 0 6px 36px rgba(230, 131, 10, 0.58); } .about-feature__video-wrap.is-playing .af-play-btn { display: none; } /* Claim: Pill mit horizontalen Linien links/rechts */ .about-feature__claim { display: flex; align-items: center; position: relative; z-index: 1; width: 100%; } .about-feature__claim::before, .about-feature__claim::after { content: ''; flex: 1; height: 1px; background: #D9DEE7; } .about-feature__claim p { margin: 0; padding: 9px 26px; border: 1px solid rgba(217, 222, 231, 0.90); border-radius: 999px; color: #183054; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; background: #FFFFFF; white-space: nowrap; flex-shrink: 0; } /* ── WERTE-LEISTE ─────────────────────────────────── */ .about-feature__values { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(24, 48, 84, 0.08); padding: 48px 72px 60px; background: #FFFFFF; gap: 0; } .about-feature__value-item { padding: 0 36px; display: flex; align-items: flex-start; gap: 16px; border-right: 1px solid rgba(24, 48, 84, 0.08); } .about-feature__value-item:first-child { padding-left: 0; } .about-feature__value-item:last-child { border-right: none; } .about-feature__value-icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(24, 48, 84, 0.07); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .about-feature__value-icon .material-symbols-outlined { font-size: 19px !important; color: #183054; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } .about-feature__value-title { font-size: 15px; font-weight: 700; color: #0F172A; letter-spacing: -0.01em; margin: 0 0 4px; line-height: 1.25; } .about-feature__value-body { font-size: 14px; color: #7C8BA0; line-height: 1.55; margin: 0; } /* ── RESPONSIVE ───────────────────────────────────── */ @media (max-width: 1200px) { .about-feature__intro { padding: 60px 40px 56px 56px; } .about-feature__team-area { padding: 48px 48px 52px 14%; } .about-feature__cards { gap: 10px; } .about-feature__card { padding: 22px 14px 18px; border-radius: 20px; } .about-feature__card-portrait { width: 72px; height: 72px; } .about-feature__values { padding: 40px 56px 52px; } .about-feature__value-item { padding: 0 24px; } } @media (max-width: 900px) { .about-feature__top { flex-direction: column; min-height: auto; } .about-feature__intro { flex: none; clip-path: none; padding: 52px 48px 52px; } .about-feature__team-area { margin-left: 0; padding: 48px 40px 52px; justify-content: flex-start; } .about-feature__house-bg { width: 50%; } .about-feature__cards { grid-template-columns: repeat(2, 1fr); } .about-feature__values { grid-template-columns: repeat(2, 1fr); padding: 36px 40px 48px; } .about-feature__value-item:nth-child(2) { border-right: none; } .about-feature__value-item:nth-child(3) { border-right: 1px solid rgba(24,48,84,0.08); border-top: 1px solid rgba(24,48,84,0.08); padding-top: 28px; } .about-feature__value-item:nth-child(4) { border-right: none; border-top: 1px solid rgba(24,48,84,0.08); padding-top: 28px; } } @media (max-width: 640px) { .about-feature__intro { padding: 44px 24px; } .about-feature__headline { font-size: 32px; } .about-feature__cards { grid-template-columns: 1fr 1fr; gap: 10px; } .about-feature__card { padding: 20px 12px 16px; border-radius: 18px; min-height: 200px; } .about-feature__card-portrait { width: 64px; height: 64px; } .about-feature__team-area { padding: 40px 24px 44px; } .about-feature__cta { align-self: center; margin-top: 36px; padding: 16px 30px; font-size: 12px; } /* zentriert + größer, mit Abstand zum Text (margin-top:auto greift mobil nicht) */ /* Team-Video mobil */ .about-feature__video-wrap { margin: 0 0 28px; } /* Play-Button etwas kleiner auf Mobile */ .af-play-btn__circle { width: 60px; height: 60px; } /* Claim-Pill: nowrap deaktivieren bei schmalen Screens */ .about-feature__claim p { white-space: normal; text-align: center; padding: 8px 18px; font-size: 9px; } .about-feature__values { grid-template-columns: 1fr; padding: 24px 24px 36px; } .about-feature__value-item { border-right: none !important; border-top: 1px solid rgba(24,48,84,0.08); padding: 16px 0; } .about-feature__value-item:first-child { border-top: none; padding-top: 0; } } /* ============================================================ Services Discovery Section (.sds__) ============================================================ */ /* Mirrored: image + cards left | navy text right Diagonal mirrors about-feature__intro exactly: intro right edge: 41% at top → 50% at bottom (50%-wide, clip 82%) sds left edge: 59% at top → 50% at bottom (50%-wide, clip 18%) */ .sds { position: relative; overflow: hidden; /* Grid replaces absolute layout so right panel grows with content */ display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(480px, 0.9fr); align-items: stretch; min-height: clamp(660px, 52vw, 800px); background: linear-gradient(135deg, #183054 0%, #10294A 100%); } /* ── Left IMAGE panel ─────────────────────────────────────── */ .sds__left { position: relative; /* grid item — no longer absolute */ z-index: 1; overflow: hidden; min-height: clamp(660px, 52vw, 800px); } .sds__left img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } /* Fade right edge into navy */ .sds__left::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to right, transparent 42%, rgba(16, 41, 74, 0.28) 62%, rgba(16, 41, 74, 0.65) 82%, rgba(16, 41, 74, 0.88) 100% ); pointer-events: none; } /* no blueprint on image panel */ .sds__left::before { display: none; } /* Top decorative rule */ .sds__top-rule { display: block; width: 32px; height: 1.5px; background: rgba(255, 255, 255, 0.35); margin-bottom: 20px; position: relative; z-index: 1; } .sds__eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: 0.20em; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; margin: 0 0 28px; line-height: 1.6; position: relative; z-index: 1; } .sds__headline { font-family: "Inter", sans-serif; font-size: clamp(44px, 4.4vw, 68px); font-weight: 700; color: #FFFFFF; line-height: 1.05; letter-spacing: -0.035em; margin: 0 0 24px; /* No hard max-width — let the panel padding control line length */ max-width: 520px; word-break: normal; overflow-wrap: normal; hyphens: none; position: relative; z-index: 1; } .sds__body { font-size: 16px; color: rgba(255, 255, 255, 0.72); line-height: 1.70; max-width: 460px; margin: 0 0 44px; position: relative; z-index: 1; } /* Three trust mini-items — horizontal row with wrapping safety */ .sds__trust { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 16px 0; margin-bottom: 36px; position: relative; z-index: 1; } .sds__trust-item { display: flex; align-items: flex-start; gap: 12px; padding: 0 28px 0 0; margin-right: 28px; border-right: 1px solid rgba(255, 255, 255, 0.13); } .sds__trust-item:last-child { border-right: none; padding-right: 0; margin-right: 0; } .sds__trust-icon { width: 32px; height: 32px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.10); margin-top: 2px; } .sds__trust-icon .material-symbols-outlined { font-size: 15px !important; color: rgba(255, 255, 255, 0.70); font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } .sds__trust-text { font-size: 12px; color: rgba(255, 255, 255, 0.55); line-height: 1.55; } .sds__trust-text strong { display: block; color: rgba(255, 255, 255, 0.88); font-weight: 600; font-size: 12.5px; margin-bottom: 1px; } /* Bottom tagline with leading rule */ .sds__tagline { display: flex; align-items: center; gap: 14px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.32); text-transform: uppercase; position: relative; z-index: 1; margin-top: 8px; /* extra breathing room above section bottom */ } .sds__tagline::before { content: ''; display: block; width: 28px; height: 1.5px; background: rgba(255, 255, 255, 0.22); flex-shrink: 0; } /* ── Right NAVY content panel ─────────────────────────────── */ /* Grid item — clip-path keeps diagonal left edge. padding-left must exceed 18% of this column's width to clear the diagonal. At a ~560px column: 18% = 101px → use clamp(120px, 10vw, 160px) as safe minimum. */ .sds__right { position: relative; /* grid item — no longer absolute */ z-index: 2; background: linear-gradient(158deg, #183054 0%, #102645 100%); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); display: flex; flex-direction: column; justify-content: center; /* Left padding clears diagonal; right padding stays modest */ padding: clamp(64px, 6vw, 96px) clamp(40px, 4vw, 68px) clamp(64px, 6vw, 96px) clamp(128px, 10vw, 168px); } /* Very subtle blueprint house silhouette on navy panel */ .sds__right::before { content: ''; position: absolute; inset: 0; background-repeat: no-repeat; background-position: 38% 50%; background-size: 760px auto; opacity: 0.07; pointer-events: none; z-index: 0; } /* ── Two floating CTA cards — over the LEFT image area ─────── */ .sds__cards { position: absolute; z-index: 10; left: 5%; top: 50%; transform: translateY(-50%); display: flex; gap: 20px; align-items: flex-start; } .sds__card { background: #FFFFFF; border-radius: 26px; padding: 40px 32px 36px; width: clamp(260px, 18vw, 330px); min-height: 480px; display: flex; flex-direction: column; align-items: flex-start; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22), 0 6px 20px rgba(15, 23, 42, 0.10); border: 1px solid rgba(217, 222, 231, 0.55); transition: transform 0.30s ease, box-shadow 0.30s ease; cursor: pointer; } .sds__card:hover { transform: translateY(-8px); box-shadow: 0 36px 88px rgba(15, 23, 42, 0.28), 0 8px 28px rgba(15, 23, 42, 0.12); } /* Large icon circle at top of card */ .sds__card-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(24, 48, 84, 0.07); display: flex; align-items: center; justify-content: center; margin-bottom: 28px; flex-shrink: 0; } .sds__card-icon .material-symbols-outlined { font-size: 30px !important; color: #183054; font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 40; } .sds__card-label { font-size: 9px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(24, 48, 84, 0.40); margin: 0 0 12px; } .sds__card-title { font-family: "Inter", sans-serif; font-size: clamp(20px, 1.6vw, 26px); font-weight: 700; color: #0F172A; letter-spacing: -0.025em; line-height: 1.18; margin: 0 0 0; } /* Horizontal divider under headline */ .sds__card-rule { width: 100%; height: 1px; background: rgba(24, 48, 84, 0.09); margin: 18px 0 20px; flex-shrink: 0; } .sds__card-desc { font-size: 15px; color: #7C8BA0; line-height: 1.65; margin: 0; flex: 1; } .sds__card-arrow { width: 52px; height: 52px; border-radius: 50%; background: #183054; display: flex; align-items: center; justify-content: center; margin-top: 28px; flex-shrink: 0; transition: background 0.24s ease, transform 0.26s ease; text-decoration: none; } .sds__card:hover .sds__card-arrow { background: #0F172A; transform: translateX(4px) translateY(-2px); } .sds__card-arrow svg { width: 17px; height: 11px; flex-shrink: 0; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 1200px) { .sds { grid-template-columns: minmax(0, 1.2fr) minmax(440px, 0.85fr); } .sds__card { width: clamp(210px, 15.5vw, 264px); min-height: 440px; padding: 32px 26px 28px; } .sds__cards { gap: 14px; left: 3%; } .sds__right { padding: clamp(56px, 5vw, 80px) clamp(32px, 3vw, 52px) clamp(56px, 5vw, 80px) clamp(110px, 9vw, 150px); } .sds__trust-item { padding-right: 16px; margin-right: 16px; } .sds__headline { font-size: clamp(38px, 3.8vw, 58px); } } @media (max-width: 900px) { /* Stack: image → cards → text */ .sds { display: flex; flex-direction: column; min-height: auto; } .sds__left { width: 100%; height: 340px; min-height: auto; } .sds__left::after { background: linear-gradient(to bottom, transparent 50%, rgba(16,41,74,0.65) 100%); } .sds__right { width: 100%; clip-path: none; padding: 72px 8vw 52px; order: 2; } .sds__cards { position: relative; left: auto; top: auto; transform: none; flex-direction: row; flex-wrap: wrap; padding: 0 8vw 56px; background: #102645; justify-content: center; gap: 18px; order: 1; } .sds__card { flex: 1; min-width: 220px; max-width: 340px; min-height: auto; } .sds__trust-item { border-right: none; padding-right: 0; margin-right: 0; } .sds__headline { max-width: 100%; font-size: clamp(36px, 5vw, 52px); } .sds__body { max-width: 100%; } } @media (max-width: 640px) { .sds__left { height: 260px; } .sds__right { padding: 56px 6vw 48px; } .sds__cards { flex-direction: column; padding: 0 6vw 48px; align-items: stretch; } .sds__card { width: 100%; max-width: 100%; min-height: auto; } .sds__headline { font-size: clamp(36px, 8vw, 48px); } .sds__card-icon { width: 60px; height: 60px; margin-bottom: 20px; } .sds__card-title { font-size: 20px; } } /* ============================================================ Sicherheit Section (.sib__) Layout: light bg | diagonal navy right | 2×2 cards over navy ============================================================ */ .sib { position: relative; overflow: hidden; background: #F5F7FA; min-height: 680px; } /* Diagonal navy background shape width 60%, right:0 → panel left at 40% of section clip(14% 0…) → visible left: 40%+8.4%=48.4% at top, 40% at bottom */ .sib__bg { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; z-index: 0; background: radial-gradient(ellipse at 75% 18%, rgba(255, 255, 255, 0.07) 0%, transparent 48%), linear-gradient(158deg, #1E2F51 0%, #183054 48%, #0F172A 100%); clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); } /* Detailed architectural elevation blueprint inside navy area */ .sib__bg::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 560' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='55' y1='500' x2='850' y2='500' stroke-width='1.2'/%3E%3Crect x='95' y='490' width='710' height='14' stroke-width='0.7'/%3E%3Crect x='110' y='290' width='680' height='210' stroke-width='1.1'/%3E%3Crect x='110' y='138' width='680' height='152' stroke-width='1.1'/%3E%3Cpolyline points='85,138 450,32 815,138' stroke-width='1.2'/%3E%3Cline x1='85' y1='138' x2='815' y2='138' stroke-width='1.0'/%3E%3Crect x='598' y='54' width='38' height='106' stroke-width='0.8'/%3E%3Cline x1='590' y1='62' x2='644' y2='62' stroke-width='0.7'/%3E%3Cline x1='450' y1='32' x2='450' y2='138' stroke-width='0.7' stroke-dasharray='5,4'/%3E%3Cline x1='190' y1='138' x2='330' y2='78' stroke-width='0.5'/%3E%3Cline x1='310' y1='138' x2='430' y2='85' stroke-width='0.5'/%3E%3Cline x1='590' y1='138' x2='470' y2='85' stroke-width='0.5'/%3E%3Cline x1='710' y1='138' x2='570' y2='78' stroke-width='0.5'/%3E%3Crect x='132' y='320' width='112' height='138' stroke-width='0.9'/%3E%3Crect x='140' y='328' width='96' height='122' stroke-width='0.6'/%3E%3Cline x1='188' y1='320' x2='188' y2='458' stroke-width='0.6'/%3E%3Cline x1='132' y1='388' x2='244' y2='388' stroke-width='0.6'/%3E%3Crect x='266' y='320' width='112' height='138' stroke-width='0.9'/%3E%3Crect x='274' y='328' width='96' height='122' stroke-width='0.6'/%3E%3Cline x1='322' y1='320' x2='322' y2='458' stroke-width='0.6'/%3E%3Cline x1='266' y1='388' x2='378' y2='388' stroke-width='0.6'/%3E%3Crect x='400' y='348' width='100' height='152' stroke-width='1.0'/%3E%3Crect x='407' y='355' width='86' height='140' stroke-width='0.6'/%3E%3Cpath d='M400,500 A100,100 0 0,1 500,400' stroke-width='0.6'/%3E%3Crect x='522' y='320' width='112' height='138' stroke-width='0.9'/%3E%3Crect x='530' y='328' width='96' height='122' stroke-width='0.6'/%3E%3Cline x1='578' y1='320' x2='578' y2='458' stroke-width='0.6'/%3E%3Cline x1='522' y1='388' x2='634' y2='388' stroke-width='0.6'/%3E%3Crect x='656' y='320' width='112' height='138' stroke-width='0.9'/%3E%3Crect x='664' y='328' width='96' height='122' stroke-width='0.6'/%3E%3Cline x1='712' y1='320' x2='712' y2='458' stroke-width='0.6'/%3E%3Cline x1='656' y1='388' x2='768' y2='388' stroke-width='0.6'/%3E%3Crect x='145' y='162' width='108' height='98' stroke-width='0.9'/%3E%3Crect x='153' y='170' width='92' height='82' stroke-width='0.6'/%3E%3Cline x1='199' y1='162' x2='199' y2='260' stroke-width='0.6'/%3E%3Cline x1='145' y1='210' x2='253' y2='210' stroke-width='0.6'/%3E%3Crect x='337' y='158' width='226' height='102' stroke-width='0.9'/%3E%3Crect x='345' y='166' width='210' height='86' stroke-width='0.6'/%3E%3Cline x1='450' y1='158' x2='450' y2='260' stroke-width='0.6'/%3E%3Cline x1='337' y1='210' x2='563' y2='210' stroke-width='0.6'/%3E%3Crect x='647' y='162' width='108' height='98' stroke-width='0.9'/%3E%3Crect x='655' y='170' width='92' height='82' stroke-width='0.6'/%3E%3Cline x1='701' y1='162' x2='701' y2='260' stroke-width='0.6'/%3E%3Cline x1='647' y1='210' x2='755' y2='210' stroke-width='0.6'/%3E%3Cline x1='110' y1='528' x2='790' y2='528' stroke-width='0.7'/%3E%3Cline x1='110' y1='522' x2='110' y2='535' stroke-width='0.7'/%3E%3Cline x1='790' y1='522' x2='790' y2='535' stroke-width='0.7'/%3E%3Cline x1='110' y1='500' x2='110' y2='531' stroke-width='0.5' stroke-dasharray='3,3'/%3E%3Cline x1='790' y1='500' x2='790' y2='531' stroke-width='0.5' stroke-dasharray='3,3'/%3E%3Cline x1='55' y1='138' x2='104' y2='138' stroke-width='0.7' stroke-dasharray='4,3'/%3E%3Cline x1='55' y1='290' x2='104' y2='290' stroke-width='0.7' stroke-dasharray='4,3'/%3E%3Cline x1='60' y1='138' x2='60' y2='500' stroke-width='0.6'/%3E%3Cline x1='54' y1='138' x2='66' y2='138' stroke-width='0.9'/%3E%3Cline x1='54' y1='290' x2='66' y2='290' stroke-width='0.9'/%3E%3Cline x1='54' y1='500' x2='66' y2='500' stroke-width='0.9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50% 50%; background-size: 720px auto; opacity: 0.085; pointer-events: none; } /* Inner flex layout */ .sib__inner { position: relative; z-index: 1; display: flex; align-items: stretch; min-height: 680px; } /* ── Left text column ─────────────────────────────────────── */ .sib__text { flex: 0 0 40%; display: flex; flex-direction: column; justify-content: center; padding: 80px 5% 80px 9vw; } .sib__eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.20em; color: rgba(24, 48, 84, 0.50); text-transform: uppercase; margin: 0 0 12px; } .sib__eyebrow-rule { width: 36px; height: 1.5px; background: rgba(24, 48, 84, 0.22); margin-bottom: 28px; } .sib__headline { font-family: "Inter", sans-serif; font-size: clamp(36px, 3.0vw, 50px); font-weight: 700; color: #0F172A; line-height: 1.10; letter-spacing: -0.03em; margin: 0 0 22px; } .sib__body { font-size: 16px; color: #5C6B82; line-height: 1.72; margin: 0 0 36px; max-width: 340px; } .sib__btn { display: inline-flex; align-items: center; gap: 12px; background: #183054; color: #FFFFFF; font-size: 14px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; padding: 15px 28px; border-radius: 6px; width: fit-content; box-shadow: 0 4px 18px rgba(24, 48, 84, 0.20); transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; } .sib__btn:hover { background: #0F172A; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(24, 48, 84, 0.28); } .sib__btn svg { flex-shrink: 0; } /* ── Right 2×2 cards grid ─────────────────────────────────── */ .sib__cards { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 64px 9vw 64px 4%; align-content: center; } /* Individual card */ .sib__card { background: #FFFFFF; border-radius: 24px; padding: 32px 28px 28px; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.80) inset, 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.09), 0 24px 64px rgba(15, 23, 42, 0.10), 0 44px 80px rgba(15, 23, 42, 0.05); border: 1px solid rgba(217, 222, 231, 0.50); transition: transform 0.28s ease, box-shadow 0.28s ease; cursor: default; } .sib__card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.80) inset, 0 4px 8px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.12), 0 32px 80px rgba(15, 23, 42, 0.12), 0 52px 96px rgba(15, 23, 42, 0.07); } /* Icon + number header row */ .sib__card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; } /* Navy icon badge */ .sib__card-icon { width: 48px; height: 48px; border-radius: 13px; background: #183054; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(24, 48, 84, 0.28); } .sib__card-icon .material-symbols-outlined { font-size: 22px !important; color: rgba(255, 255, 255, 0.90); font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } /* Large decorative number */ .sib__card-num { font-family: "Inter", sans-serif; font-size: 56px; font-weight: 700; line-height: 0.85; color: rgba(217, 222, 231, 0.60); letter-spacing: -0.04em; } .sib__card-title { font-family: "Inter", sans-serif; font-size: 18px; font-weight: 700; color: #0F172A; letter-spacing: -0.02em; line-height: 1.22; margin: 0 0 10px; } .sib__card-body { font-size: 15px; color: #5C6B82; line-height: 1.68; margin: 0; flex: 1; } /* Bottom decorative rule */ .sib__card-rule { width: 36px; height: 1.5px; background: rgba(24, 48, 84, 0.16); margin-top: 20px; flex-shrink: 0; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 1200px) { .sib__text { padding-left: 6vw; flex: 0 0 38%; } .sib__cards { padding-right: 6vw; gap: 14px; } .sib__card { padding: 24px 22px 20px; } .sib__card-num { font-size: 50px; } } @media (max-width: 900px) { .sib { min-height: auto; } .sib__inner { flex-direction: column; min-height: auto; } .sib__bg { width: 100%; height: 62%; top: auto; bottom: 0; clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%); } .sib__text { flex: none; padding: 72px 8vw 48px; } .sib__cards { grid-template-columns: repeat(2, 1fr); padding: 0 8vw 72px; gap: 16px; } .sib__body { max-width: 100%; } .sib__headline { font-size: clamp(32px, 4vw, 46px); } } @media (max-width: 640px) { .sib__text { padding: 56px 6vw 36px; } .sib__cards { grid-template-columns: 1fr; padding: 0 6vw 56px; } .sib__card-num { font-size: 44px; } .sib__bg { height: 78%; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); } } /* ============================================================ Trust Section (.ts__) Layout: white upper zone with ghosted images navy lower zone with 4 alternating light/dark cards ============================================================ */ /* ── Section wrapper ──────────────────────────────────────── */ .ts { position: relative; background: #FFFFFF; /* ensures clipped navy area reveals white, not body bg */ } /* ── Upper: white zone ────────────────────────────────────── */ .ts__upper { position: relative; background: #FFFFFF; overflow: hidden; padding: 92px 5% 88px; text-align: center; } /* Left: ghosted architectural floor plan. Das neue Motiv trägt seinen Schwerpunkt bereits links im Bild und läuft selbst sanft ins Weiß aus – keine Drehung/Spiegelung mehr nötig. WICHTIG: "background-size: cover" füllt die Box exakt bis zum oberen/unteren Rand – die reale Bildkante (leicht abweichender Off-White-Ton) liegt also direkt auf dem Box-Rand. Eine zu große Verlaufsmaske erreicht dort nicht 0 % Deckkraft, wodurch genau diese Kante als feine Linie sichtbar wird. Fix: Die Ellipse ist bewusst klein/zentriert genug gewählt, dass ihr "100 %"-Radius den oberen und unteren Rand der Box bereits überschreitet (vertikaler Radius 42 % bei Zentrum 50 % → Randabstand 50 % > 42 %) – an Ober- und Unterkante ist die Maske dadurch garantiert vollständig transparent, die Bildkante verschwindet vollständig, und der Plan bleibt in der Bildmitte klar sichtbar. */ .ts__house-bg { position: absolute; left: 0; top: 0; width: 46%; height: 100%; background-image: url('/images/technische-architekturzeichnung.png'); background-size: cover; background-position: left center; opacity: 0.8; -webkit-mask-image: radial-gradient(ellipse 66% 42% at 27% 50%, black 0%, rgba(0,0,0,0.6) 42%, rgba(0,0,0,0.18) 70%, transparent 100%); mask-image: radial-gradient(ellipse 66% 42% at 27% 50%, black 0%, rgba(0,0,0,0.6) 42%, rgba(0,0,0,0.18) 70%, transparent 100%); pointer-events: none; } /* Right: architectural floor plan / blueprint */ .ts__plan-bg { position: absolute; right: 0; top: 0; width: 46%; height: 100%; background-image: url('/images/haus-sketch.png'); background-size: auto 88%; background-repeat: no-repeat; background-position: right top; opacity: 1; -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.65) 35%, rgba(0,0,0,0.22) 65%, transparent 100%); mask-image: linear-gradient(to left, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.65) 35%, rgba(0,0,0,0.22) 65%, transparent 100%); pointer-events: none; } /* Centered content wrapper */ .ts__upper-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } /* Eyebrow label */ .ts__eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(24, 48, 84, 0.55); margin: 0 0 14px; } /* Rule below eyebrow */ .ts__rule { width: 38px; height: 1.5px; background: rgba(24, 48, 84, 0.18); margin: 0 auto 34px; } /* Main display headline */ .ts__headline { font-family: "Inter", sans-serif; font-size: clamp(38px, 4.4vw, 68px); font-weight: 700; color: #0F172A; line-height: 1.06; letter-spacing: -0.03em; text-align: center; margin: 0 0 28px; } /* Body paragraph */ .ts__body { font-size: 16px; color: rgba(15, 23, 42, 0.70); line-height: 1.78; text-align: center; max-width: 600px; margin: 0 auto 40px; } /* CTA link – clean, underlined */ .ts__cta { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #183054; text-decoration: none; border-bottom: 1px solid rgba(24, 48, 84, 0.28); padding-bottom: 5px; transition: border-color 0.22s ease, gap 0.22s ease, color 0.22s ease; } .ts__cta:hover { border-color: #183054; gap: 14px; color: #0F172A; } /* ── Lower: navy zone ─────────────────────────────────────── */ .ts__navy { position: relative; background: radial-gradient(ellipse at 14% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 52%), linear-gradient(155deg, #1E2F51 0%, #183054 50%, #0F172A 100%); /* Single architectural peak at top center */ clip-path: polygon(0 18%, 50% 5%, 100% 18%, 100% 100%, 0 100%); padding-top: 108px; padding-bottom: 92px; } /* Subtle blueprint texture inside navy */ .ts__navy::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 560' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='55' y1='500' x2='850' y2='500' stroke-width='1.2'/%3E%3Crect x='95' y='490' width='710' height='14' stroke-width='0.7'/%3E%3Crect x='110' y='290' width='680' height='210' stroke-width='1.1'/%3E%3Crect x='110' y='138' width='680' height='152' stroke-width='1.1'/%3E%3Cpolyline points='85,138 450,32 815,138' stroke-width='1.2'/%3E%3Cline x1='85' y1='138' x2='815' y2='138' stroke-width='1.0'/%3E%3Crect x='598' y='54' width='38' height='106' stroke-width='0.8'/%3E%3Cline x1='590' y1='62' x2='644' y2='62' stroke-width='0.7'/%3E%3Cline x1='450' y1='32' x2='450' y2='138' stroke-width='0.7' stroke-dasharray='5,4'/%3E%3Cline x1='190' y1='138' x2='330' y2='78' stroke-width='0.5'/%3E%3Cline x1='310' y1='138' x2='430' y2='85' stroke-width='0.5'/%3E%3Cline x1='590' y1='138' x2='470' y2='85' stroke-width='0.5'/%3E%3Cline x1='710' y1='138' x2='570' y2='78' stroke-width='0.5'/%3E%3Crect x='132' y='320' width='112' height='138' stroke-width='0.9'/%3E%3Crect x='140' y='328' width='96' height='122' stroke-width='0.6'/%3E%3Cline x1='188' y1='320' x2='188' y2='458' stroke-width='0.6'/%3E%3Cline x1='132' y1='388' x2='244' y2='388' stroke-width='0.6'/%3E%3Crect x='266' y='320' width='112' height='138' stroke-width='0.9'/%3E%3Crect x='274' y='328' width='96' height='122' stroke-width='0.6'/%3E%3Cline x1='322' y1='320' x2='322' y2='458' stroke-width='0.6'/%3E%3Cline x1='266' y1='388' x2='378' y2='388' stroke-width='0.6'/%3E%3Crect x='400' y='348' width='100' height='152' stroke-width='1.0'/%3E%3Crect x='407' y='355' width='86' height='140' stroke-width='0.6'/%3E%3Cpath d='M400,500 A100,100 0 0,1 500,400' stroke-width='0.6'/%3E%3Crect x='522' y='320' width='112' height='138' stroke-width='0.9'/%3E%3Crect x='530' y='328' width='96' height='122' stroke-width='0.6'/%3E%3Cline x1='578' y1='320' x2='578' y2='458' stroke-width='0.6'/%3E%3Cline x1='522' y1='388' x2='634' y2='388' stroke-width='0.6'/%3E%3Crect x='656' y='320' width='112' height='138' stroke-width='0.9'/%3E%3Crect x='664' y='328' width='96' height='122' stroke-width='0.6'/%3E%3Cline x1='712' y1='320' x2='712' y2='458' stroke-width='0.6'/%3E%3Cline x1='656' y1='388' x2='768' y2='388' stroke-width='0.6'/%3E%3Crect x='145' y='162' width='108' height='98' stroke-width='0.9'/%3E%3Crect x='153' y='170' width='92' height='82' stroke-width='0.6'/%3E%3Cline x1='199' y1='162' x2='199' y2='260' stroke-width='0.6'/%3E%3Cline x1='145' y1='210' x2='253' y2='210' stroke-width='0.6'/%3E%3Crect x='337' y='158' width='226' height='102' stroke-width='0.9'/%3E%3Crect x='345' y='166' width='210' height='86' stroke-width='0.6'/%3E%3Cline x1='450' y1='158' x2='450' y2='260' stroke-width='0.6'/%3E%3Cline x1='337' y1='210' x2='563' y2='210' stroke-width='0.6'/%3E%3Crect x='647' y='162' width='108' height='98' stroke-width='0.9'/%3E%3Crect x='655' y='170' width='92' height='82' stroke-width='0.6'/%3E%3Cline x1='701' y1='162' x2='701' y2='260' stroke-width='0.6'/%3E%3Cline x1='647' y1='210' x2='755' y2='210' stroke-width='0.6'/%3E%3Cline x1='110' y1='528' x2='790' y2='528' stroke-width='0.7'/%3E%3Cline x1='110' y1='522' x2='110' y2='535' stroke-width='0.7'/%3E%3Cline x1='790' y1='522' x2='790' y2='535' stroke-width='0.7'/%3E%3Cline x1='110' y1='500' x2='110' y2='531' stroke-width='0.5' stroke-dasharray='3,3'/%3E%3Cline x1='790' y1='500' x2='790' y2='531' stroke-width='0.5' stroke-dasharray='3,3'/%3E%3Cline x1='55' y1='138' x2='104' y2='138' stroke-width='0.7' stroke-dasharray='4,3'/%3E%3Cline x1='55' y1='290' x2='104' y2='290' stroke-width='0.7' stroke-dasharray='4,3'/%3E%3Cline x1='60' y1='138' x2='60' y2='500' stroke-width='0.6'/%3E%3Cline x1='54' y1='138' x2='66' y2='138' stroke-width='0.9'/%3E%3Cline x1='54' y1='290' x2='66' y2='290' stroke-width='0.9'/%3E%3Cline x1='54' y1='500' x2='66' y2='500' stroke-width='0.9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center 40%; background-size: 840px auto; opacity: 0.07; pointer-events: none; } /* ── Cards grid ───────────────────────────────────────────── */ .ts__cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; max-width: 1360px; margin: 0 auto; padding: 0 56px; } /* ── Base card ────────────────────────────────────────────── */ .ts__card { position: relative; min-height: 350px; border-radius: 24px; padding: 38px 32px 36px; display: flex; flex-direction: column; overflow: hidden; transition: transform 0.30s ease, box-shadow 0.30s ease; cursor: default; } .ts__card:hover { transform: translateY(-5px); } /* ── Light card (01 + 03) ─────────────────────────────────── */ .ts__card--light { background: #FFFFFF; border: 1px solid rgba(217, 222, 231, 0.65); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.90) inset, 0 4px 8px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.09), 0 28px 72px rgba(15, 23, 42, 0.10); } .ts__card--light:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.90) inset, 0 6px 14px rgba(15, 23, 42, 0.06), 0 18px 48px rgba(15, 23, 42, 0.12), 0 40px 90px rgba(15, 23, 42, 0.12); } /* ── Dark card (02 + 04) ──────────────────────────────────── */ .ts__card--dark { background: radial-gradient(ellipse at 14% 16%, rgba(255, 255, 255, 0.08) 0%, transparent 42%), linear-gradient(145deg, #1E2F51 0%, #183054 52%, #0F172A 100%); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 4px 8px rgba(15, 23, 42, 0.14), 0 12px 32px rgba(15, 23, 42, 0.16), 0 28px 72px rgba(15, 23, 42, 0.20); } .ts__card--dark:hover { box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18), 0 18px 48px rgba(15, 23, 42, 0.22), 0 40px 90px rgba(15, 23, 42, 0.24); } /* Header row: icon left + number right */ .ts__card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; } /* Icon badge */ .ts__card-icon { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ts__card--light .ts__card-icon { background: #183054; box-shadow: 0 4px 14px rgba(24, 48, 84, 0.26); } .ts__card--dark .ts__card-icon { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); } .ts__card-icon .material-symbols-outlined { font-size: 22px !important; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } .ts__card--light .ts__card-icon .material-symbols-outlined { color: rgba(255,255,255,0.90); } .ts__card--dark .ts__card-icon .material-symbols-outlined { color: rgba(255,255,255,0.80); } /* Decorative number */ .ts__card-num { font-family: "Inter", sans-serif; font-size: 54px; font-weight: 700; line-height: 0.88; letter-spacing: -0.04em; } .ts__card--light .ts__card-num { color: rgba(217, 222, 231, 0.55); } .ts__card--dark .ts__card-num { color: rgba(255, 255, 255, 0.16); } /* Card title */ .ts__card-title { font-family: "Inter", sans-serif; font-size: 19px; font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; margin: 0 0 12px; } .ts__card--light .ts__card-title { color: #0F172A; } .ts__card--dark .ts__card-title { color: #FFFFFF; } /* Card body */ .ts__card-body { font-size: 15px; line-height: 1.72; flex: 1; margin: 0 0 24px; } .ts__card--light .ts__card-body { color: #5C6B82; } .ts__card--dark .ts__card-body { color: rgba(255, 255, 255, 0.66); } /* Arrow indicator */ .ts__card-arrow { margin-top: auto; } .ts__card--light .ts__card-arrow { color: rgba(24, 48, 84, 0.32); } .ts__card--dark .ts__card-arrow { color: rgba(255, 255, 255, 0.38); } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 1200px) { .ts__cards { gap: 16px; padding: 0 32px; } .ts__card { padding: 32px 26px 30px; min-height: 320px; } .ts__card-num { font-size: 48px; } } @media (max-width: 900px) { .ts__cards { grid-template-columns: repeat(2, 1fr); } .ts__navy { clip-path: polygon(0 10%, 50% 2%, 100% 10%, 100% 100%, 0 100%); padding-top: 72px; } .ts__headline { font-size: clamp(40px, 5.5vw, 64px); } } @media (max-width: 640px) { .ts__upper { padding: 64px 6vw 72px; } .ts__cards { grid-template-columns: 1fr; padding: 0 20px; gap: 14px; } .ts__card { min-height: auto; padding: 30px 26px 28px; } .ts__navy { clip-path: polygon(0 5%, 50% 0%, 100% 5%, 100% 100%, 0 100%); padding-top: 52px; padding-bottom: 60px; } .ts__headline { font-size: clamp(36px, 9vw, 52px); } .ts__body { font-size: 15px; } .ts__house-bg { width: 60%; opacity: 0.12; } .ts__plan-bg { opacity: 0.16; } } /* ============================================================ FAQ SECTION (.fq__) ============================================================ */ .fq { position: relative; background: #F5F7FA; overflow: hidden; padding: 108px 5% 96px; } /* ── Background images ─────────────────────────────────────── */ .fq__sketch-bg { position: absolute; left: 0; top: 0; width: 36%; height: 100%; background-image: url('/images/haus-sketch.png'); background-size: auto 82%; background-repeat: no-repeat; background-position: left top; opacity: 1; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.10) 50%, transparent 100%); mask-image: linear-gradient(to right, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.10) 50%, transparent 100%); pointer-events: none; } .fq__house-bg { position: absolute; right: 0; top: 0; width: 38%; height: 100%; background-image: url('/images/haus.png'); background-size: cover; background-position: center center; opacity: 0.09; filter: grayscale(60%) brightness(1.1) saturate(0.2); -webkit-mask-image: linear-gradient(to left, black 0%, rgba(0,0,0,0.60) 40%, rgba(0,0,0,0.15) 75%, transparent 100%); mask-image: linear-gradient(to left, black 0%, rgba(0,0,0,0.60) 40%, rgba(0,0,0,0.15) 75%, transparent 100%); pointer-events: none; } /* ── Header ────────────────────────────────────────────────── */ .fq__header { position: relative; z-index: 1; text-align: center; max-width: 680px; margin: 0 auto 64px; } .fq__eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: #183054; opacity: 0.55; text-transform: uppercase; margin: 0 0 18px; } .fq__rule { width: 40px; height: 2px; background: #183054; opacity: 0.25; margin: 0 auto 22px; } .fq__headline { font-family: "Inter", sans-serif; font-size: clamp(36px, 4vw, 62px); font-weight: 700; color: #0F172A; line-height: 1.07; letter-spacing: -0.03em; margin: 0 0 22px; } .fq__intro { font-size: 16px; line-height: 1.75; color: rgba(15, 23, 42, 0.55); max-width: 520px; margin: 0 auto; } /* ── Grid ──────────────────────────────────────────────────── */ .fq__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1360px; margin: 0 auto; align-items: start; } /* ── Statische Navy Feature-Karte (Bauzeit) ────────────────── */ .fq__feature { grid-column: 1 / span 3; grid-row: 1; background: radial-gradient(ellipse at 14% 18%, rgba(255, 255, 255, 0.08) 0%, transparent 42%), linear-gradient(145deg, #1E2F51 0%, #183054 52%, #0F2240 100%); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 18px; padding: 48px 52px; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.22), 0 16px 48px rgba(15, 23, 42, 0.18); display: flex; flex-direction: column; /* Höhe für die längste Antwort reserviert, damit der Wechsel der FAQ keinen Layout-Shift in der Reihe auslöst. */ min-height: 400px; } /* Inhalts-Wrapper für den weichen Fade-Wechsel beim FAQ-Wechsel */ .fq__feat-content { display: flex; flex-direction: column; flex: 1 1 auto; transition: opacity 0.22s ease, transform 0.22s ease; } .fq__feat-content.is-swapping { opacity: 0; transform: translateY(8px); } .fq__feat-icon { font-size: 34px !important; font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 40; color: rgba(255, 255, 255, 0.68); margin-bottom: 20px; flex-shrink: 0; } .fq__feat-q { font-family: "Inter", sans-serif; font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; color: #FFFFFF; line-height: 1.22; letter-spacing: -0.02em; margin: 0 0 24px; } .fq__feat-rule { width: 36px; height: 1px; background: rgba(255, 255, 255, 0.22); margin-bottom: 22px; flex-shrink: 0; } .fq__feat-a { font-size: 15px; line-height: 1.82; color: rgba(255, 255, 255, 0.68); margin: 0; flex: 1; } .fq__feat-a strong { color: rgba(255, 255, 255, 0.92); font-weight: 600; } /* ── Accordion-Karten (weiße Karten mit aufklappbarer Antwort) ── */ .fq__card { background: #FFFFFF; border: 1px solid rgba(217, 222, 231, 0.70); border-radius: 14px; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.07); overflow: hidden; transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease; } .fq__card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.10), 0 16px 40px rgba(15, 23, 42, 0.09); } .fq__card.is-open { border-color: rgba(24, 48, 84, 0.28); box-shadow: 0 4px 16px rgba(24, 48, 84, 0.10), 0 16px 48px rgba(15, 23, 42, 0.10); transform: none; } /* ── Aktiver Zustand: gewählte Auswahlkarte (zeigt in der blauen Karte) ── */ .fq__card.is-active { border-color: rgba(24, 48, 84, 0.45); background: linear-gradient(180deg, #F5F8FD 0%, #FFFFFF 100%); box-shadow: 0 6px 18px rgba(24, 48, 84, 0.12), 0 16px 44px rgba(15, 23, 42, 0.10); transform: none; } .fq__card.is-active:hover { transform: none; /* aktive Karte bleibt ruhig stehen */ } .fq__card.is-active .fq__t-icon { opacity: 1; } .fq__card.is-active .fq__t-q { color: #183054; } .fq__card.is-active .fq__t-ind { opacity: 0.95; color: #183054; } /* Große Karte (Preisgarantie) – rechts oben, col 4, row 1 */ .fq__card--large { grid-column: 4 / span 1; grid-row: 1; min-height: 260px; align-self: stretch; /* schließt unten bündig mit Feature-Karte ab */ } /* Dauerhaft sichtbare Karte – kein Accordion, kein Klick */ .fq__t-header { padding: 28px 24px 20px; display: flex; align-items: flex-start; gap: 12px; } .fq__card--always-open { cursor: default; } .fq__card--always-open:hover { transform: none; box-shadow: 0 2px 6px rgba(15,23,42,0.04), 0 6px 20px rgba(15,23,42,0.07); } .fq__card--always-open .fq__body { max-height: none; opacity: 1; padding: 0 24px 28px; } /* ── Toggle-Button ─────────────────────────────────────────── */ .fq__toggle { width: 100%; border: none; background: transparent; padding: 24px 20px; /* einheitliches Padding für alle kleinen Karten */ display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; outline: none; min-height: 72px; /* Mindesthöhe sichert konsistente untere Kartenzeile */ box-sizing: border-box; } .fq__card--large .fq__toggle { padding: 28px 24px; align-items: flex-start; min-height: auto; } .fq__toggle:focus-visible { outline: 3px solid rgba(24, 48, 84, 0.35); outline-offset: -3px; border-radius: 13px; } .fq__t-icon { font-size: 18px !important; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; color: #183054; opacity: 0.50; flex-shrink: 0; transition: opacity 0.22s ease; margin-top: 1px; } .fq__card.is-open .fq__t-icon { opacity: 1; } .fq__t-q { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: #0F172A; line-height: 1.38; flex: 1; } .fq__card--large .fq__t-q { font-size: 14px; } .fq__t-ind { font-size: 20px !important; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; color: #183054; opacity: 0.40; flex-shrink: 0; transition: transform 0.30s ease, opacity 0.22s ease; } .fq__card.is-open .fq__t-ind { transform: rotate(45deg); opacity: 0.80; } /* ── Antwort-Body (Accordion) ──────────────────────────────── */ .fq__body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.38s ease, opacity 0.28s ease; padding: 0 20px; } .fq__card--large .fq__body { padding: 0 24px; } .fq__card.is-open .fq__body { max-height: 360px; opacity: 1; padding-bottom: 24px; } .fq__answer { font-size: 15px; line-height: 1.78; color: rgba(15, 23, 42, 0.60); margin: 0; padding-top: 14px; border-top: 1px solid rgba(217, 222, 231, 0.55); } .fq__answer strong { color: #0F172A; font-weight: 600; } /* ── Bottom CTA ────────────────────────────────────────────── */ .fq__bottom { position: relative; z-index: 1; display: flex; align-items: center; gap: 32px; max-width: 1360px; margin: 64px auto 0; } .fq__bottom-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(24, 48, 84, 0.18), transparent); } .fq__bottom-center { display: flex; flex-direction: column; align-items: center; gap: 14px; flex-shrink: 0; } .fq__bottom-label { font-size: 10px; font-weight: 700; letter-spacing: 0.20em; color: #183054; opacity: 0.42; text-transform: uppercase; margin: 0; } .fq__bottom-cta { display: inline-flex; align-items: center; gap: 10px; background: #183054; color: #FFFFFF; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 14px 28px; border-radius: 8px; transition: background 0.2s ease, transform 0.2s ease; } .fq__bottom-cta:hover { background: #1E2F51; transform: translateY(-1px); } .fq__bottom-cta .material-symbols-outlined { font-size: 16px !important; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 1200px) { .fq__grid { gap: 16px; } .fq__feature { padding: 40px 40px; } } @media (max-width: 900px) { .fq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fq__feature { grid-column: 1 / span 2; min-height: auto; } .fq__card--large { grid-column: 1 / span 2; grid-row: 2; min-height: auto; } } @media (max-width: 640px) { .fq { padding: 72px 5% 72px; } .fq__grid { grid-template-columns: 1fr; gap: 12px; } .fq__feature { grid-column: 1; padding: 28px 24px; } .fq__card--large { grid-column: 1; grid-row: auto; } .fq__bottom { gap: 20px; margin-top: 48px; justify-content: center; } /* ohne Linien sonst linksbündig */ .fq__bottom-center { width: 100%; } .fq__bottom-line { display: none; } .fq__bottom-cta { padding: 16px 32px; font-size: 13px; } /* größere Tap-Fläche */ } @media (prefers-reduced-motion: reduce) { .fq__card { transition: none; } .fq__body { transition: none; } .fq__t-ind { transition: none; } .fq__feat-content { transition: none; } .fq__bottom-cta { transition: none; } } /* ============================================================ BEFORE/AFTER CTA SECTION (.baf__) ============================================================ */ .baf { background: #FFFFFF; padding: 120px 5% 128px; border-top: 1px solid rgba(217, 222, 231, 0.55); } .baf__inner { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } /* ── Text-Spalte ────────────────────────────────────────────── */ .baf__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: #183054; opacity: 0.55; text-transform: uppercase; margin: 0 0 18px; } .baf__rule { width: 40px; height: 2px; background: #183054; opacity: 0.20; margin: 0 0 24px; } .baf__headline { font-family: "Inter", sans-serif; font-size: clamp(38px, 4vw, 62px); font-weight: 700; color: #0F172A; line-height: 1.07; letter-spacing: -0.03em; margin: 0 0 28px; } .baf__sub { font-size: 16px; line-height: 1.78; color: rgba(15, 23, 42, 0.55); max-width: 420px; margin: 0 0 44px; } .baf__buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 24px; } .baf__btn { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; text-decoration: none; padding: 16px 30px; border-radius: 9px; transition: background 0.22s ease, transform 0.20s ease, border-color 0.22s ease, color 0.22s ease; } .baf__btn .material-symbols-outlined { font-size: 16px !important; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; } .baf__btn--primary { background: #183054; color: #FFFFFF; border: 2px solid #183054; } .baf__btn--primary:hover { background: #1E2F51; border-color: #1E2F51; transform: translateY(-1px); } .baf__btn--secondary { background: transparent; color: #183054; border: 2px solid rgba(24, 48, 84, 0.32); } .baf__btn--secondary:hover { border-color: #183054; background: rgba(24, 48, 84, 0.04); transform: translateY(-1px); } .baf__trust { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(15, 23, 42, 0.38); letter-spacing: 0.05em; margin: 0; } .baf__trust-icon { font-size: 14px !important; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; color: #183054; opacity: 0.45; } /* ── Slider ─────────────────────────────────────────────────── */ .baf__visual { position: relative; } .baf__slider { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 32px rgba(15, 23, 42, 0.14), 0 28px 80px rgba(15, 23, 42, 0.11); aspect-ratio: 3 / 4; cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: none; --baf-pos: 50%; } .baf__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; pointer-events: none; } .baf__img--before { z-index: 1; clip-path: inset(0 calc(100% - var(--baf-pos)) 0 0); } .baf__divider { position: absolute; top: 0; bottom: 0; left: var(--baf-pos); transform: translateX(-50%); z-index: 2; width: 2px; background: rgba(255, 255, 255, 0.90); box-shadow: 0 0 10px rgba(0, 0, 0, 0.18); display: flex; align-items: center; justify-content: center; pointer-events: none; } .baf__handle { width: 48px; height: 48px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 16px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(24, 48, 84, 0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .baf__handle-arrows { width: 22px; height: 22px; display: block; } .baf__label { position: absolute; top: 18px; z-index: 3; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 11px; border-radius: 4px; pointer-events: none; } .baf__label--left { left: 14px; background: rgba(15, 23, 42, 0.52); color: #FFFFFF; backdrop-filter: blur(4px); } .baf__label--right { right: 14px; background: rgba(255, 255, 255, 0.88); color: #183054; backdrop-filter: blur(4px); } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 900px) { .baf__inner { grid-template-columns: 1fr; gap: 52px; } .baf__sub { max-width: 100%; } .baf__slider { aspect-ratio: 4 / 3; } } @media (max-width: 640px) { .baf { padding: 80px 5% 100px; } .baf__inner { gap: 40px; } .baf__slider { aspect-ratio: 3 / 4; border-radius: 14px; } .baf__btn { justify-content: center; width: 100%; } .baf__handle { width: 52px; height: 52px; } } @media (prefers-reduced-motion: reduce) { .baf__btn { transition: none; } } /* ============================================================ CTA BEFORE/AFTER SECTION (.cba__) ============================================================ */ .cba { background: #F5F7FA; padding: clamp(80px, 8vw, 120px) 0; overflow: hidden; position: relative; } .cba__inner { width: min(1320px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(20px, 3vw, 48px); position: relative; } /* ── Navy-Kachel (Pfeilform) ─────────────────────────────────── */ .cba__card { background: linear-gradient(135deg, #183054 0%, #1E2F51 100%); color: #FFFFFF; border-radius: 32px; /* Padding-right ~24% hält Text sicher innerhalb der 84%-Clip-Grenze */ padding: clamp(44px, 5vw, 68px) 24% clamp(44px, 5vw, 68px) clamp(44px, 5vw, 60px); box-shadow: 0 20px 64px rgba(15, 23, 42, 0.24), 0 4px 18px rgba(15, 23, 42, 0.18); position: relative; z-index: 3; clip-path: polygon(0 0, 84% 0, 100% 50%, 84% 100%, 0 100%); } .cba__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.20em; color: rgba(245, 247, 250, 0.68); text-transform: uppercase; margin: 0 0 14px; } .cba__card-rule { width: 34px; height: 1.5px; background: rgba(255, 255, 255, 0.26); margin: 0 0 22px; } .cba__headline { font-family: "Inter", sans-serif; font-size: clamp(32px, 3.4vw, 52px); font-weight: 700; color: #FFFFFF; line-height: 1.10; letter-spacing: -0.025em; margin: 0 0 20px; } .cba__sub { font-size: 14.5px; line-height: 1.78; color: rgba(245, 247, 250, 0.80); margin: 0 0 36px; } .cba__actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; } .cba__btn { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; text-decoration: none; padding: 14px 26px; border-radius: 9px; transition: background 0.22s ease, transform 0.20s ease, box-shadow 0.22s ease, border-color 0.22s ease; white-space: nowrap; align-self: flex-start; } .cba__btn .material-symbols-outlined { font-size: 15px !important; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; } .cba__btn--light { background: #FFFFFF; color: #183054; border: 2px solid transparent; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.14); } .cba__btn--light:hover { background: #F5F7FA; transform: translateY(-1px); box-shadow: 0 4px 18px rgba(15, 23, 42, 0.20); } .cba__btn--ghost { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, 0.50); } .cba__btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.80); transform: translateY(-1px); } .cba__trust { display: flex; align-items: center; gap: 7px; font-size: 11px; color: rgba(245, 247, 250, 0.58); letter-spacing: 0.04em; margin: 0; } .cba__trust-icon { font-size: 13px !important; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; color: rgba(255, 255, 255, 0.50); } /* ── Visual + Slider ──────────────────────────────────────────── */ .cba__visual { position: relative; z-index: 2; } .cba__slider { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12), 0 24px 72px rgba(15, 23, 42, 0.12); aspect-ratio: 3 / 4; cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: none; --cba-pos: 50%; } .cba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; pointer-events: none; } .cba__img--before { z-index: 1; clip-path: inset(0 calc(100% - var(--cba-pos)) 0 0); } .cba__divider { position: absolute; top: 0; bottom: 0; left: var(--cba-pos); transform: translateX(-50%); z-index: 2; width: 2px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 12px rgba(0, 0, 0, 0.20); display: flex; align-items: center; justify-content: center; pointer-events: none; } .cba__handle { width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 14px rgba(15, 23, 42, 0.24), 0 0 0 1px rgba(24, 48, 84, 0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cba__handle-svg { width: 22px; height: 22px; display: block; } .cba__label { position: absolute; top: 16px; z-index: 3; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 12px; border-radius: 5px; pointer-events: none; } .cba__label--left { left: 14px; background: rgba(245, 247, 250, 0.94); color: #183054; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .cba__label--right { right: 14px; background: #183054; color: #FFFFFF; } /* ── Floating Info Card ───────────────────────────────────────── */ .cba__info-card { position: absolute; bottom: 32px; left: -24px; z-index: 10; background: #FFFFFF; border-radius: 16px; padding: 16px 20px 16px 16px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12), 0 14px 48px rgba(15, 23, 42, 0.10); display: flex; align-items: flex-start; gap: 14px; min-width: 226px; } .cba__info-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(24, 48, 84, 0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cba__info-icon .material-symbols-outlined { font-size: 17px !important; color: #183054; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } .cba__info-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .cba__info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; } .cba__info-row dt { font-size: 9.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(15, 23, 42, 0.42); white-space: nowrap; flex-shrink: 0; } .cba__info-row dd { font-size: 11.5px; font-weight: 600; color: #0F172A; margin: 0; white-space: nowrap; text-align: right; } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 1200px) { .cba__inner { grid-template-columns: 1fr; width: min(680px, calc(100% - 40px)); } .cba__card { clip-path: none; border-radius: 28px; padding-right: clamp(44px, 7%, 60px); } .cba__btn { align-self: auto; } .cba__slider { aspect-ratio: 4 / 3; } .cba__info-card { left: 16px; } } @media (max-width: 640px) { .cba { padding: 72px 0 88px; } .cba__inner { width: calc(100% - 32px); } .cba__card { border-radius: 22px; padding: 36px 28px; } .cba__slider { aspect-ratio: 4 / 3; border-radius: 14px; } .cba__btn { align-self: stretch; justify-content: center; } .cba__handle { width: 50px; height: 50px; } .cba__info-card { position: static; margin-top: 16px; min-width: auto; width: 100%; } } @media (prefers-reduced-motion: reduce) { .cba__btn { transition: none; } } /* ============================================================ FINAL CTA SECTION (.final-cta__) Referenz: Navy-Kachel links (Pfeilform) + Slider rechts + schwebende Infokarte ============================================================ */ .final-cta { background: #F5F7FA; padding: clamp(60px, 5vw, 96px) 0 clamp(80px, 6vw, 110px); overflow: hidden; position: relative; } .final-cta__inner { width: min(1360px, calc(100% - 40px)); margin: 0 auto; display: grid; /* gap: 0 so card and slider connect visually — equal columns for visual balance */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0; position: relative; } /* ── Navy copy card ──────────────────────────────────────────── */ .final-cta__copy-card { position: relative; z-index: 4; /* height synced with slider so both heroes share the same visual frame */ min-height: 660px; height: clamp(660px, 46vw, 730px); background: radial-gradient(ellipse at 16% 18%, rgba(255, 255, 255, 0.07) 0%, transparent 44%), linear-gradient(140deg, #1E2F51 0%, #183054 46%, #0F172A 100%); border-radius: 40px; box-shadow: 0 28px 80px rgba(15, 23, 42, 0.26), 0 8px 24px rgba(15, 23, 42, 0.18); /* Chevron right-edge: arrow pointing right at 50% height */ clip-path: polygon(0 0, 84% 0, 100% 50%, 84% 100%, 0 100%); display: flex; align-items: center; } /* Inner wrapper: bounded so content stays within clip zone */ .final-cta__copy-inner { width: 100%; /* right padding 16% → content stays within 84% visible clip zone, while giving headline and buttons more horizontal room */ padding: clamp(52px, 4.5vw, 72px) 16% clamp(52px, 4.5vw, 72px) clamp(48px, 4.5vw, 64px); } .final-cta__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: rgba(245, 247, 250, 0.72); text-transform: uppercase; margin: 0 0 14px; } .final-cta__eyebrow-line { width: 44px; height: 1.5px; background: rgba(255, 255, 255, 0.24); margin: 0 0 28px; } .final-cta__headline { font-family: "Inter", sans-serif; font-size: clamp(40px, 4.2vw, 64px); font-weight: 700; color: #FFFFFF; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 22px; } .final-cta__text { font-size: 16px; line-height: 1.72; color: rgba(245, 247, 250, 0.84); margin: 0 0 40px; max-width: 400px; } .final-cta__actions { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; /* max-width keeps buttons inside clip zone — widened for premium look */ max-width: 380px; } .final-cta__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; font-size: 14px; font-weight: 700; letter-spacing: 0.09em; text-decoration: none; padding: 18px 24px; border-radius: 12px; transition: background 0.22s ease, transform 0.20s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .final-cta__btn .material-symbols-outlined { font-size: 16px !important; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; flex-shrink: 0; } .final-cta__btn--primary { background: #d97706; color: #ffffff; border: 2px solid transparent; box-shadow: 0 4px 16px rgba(180, 83, 9, 0.32); } .final-cta__btn--primary:hover { background: #b45309; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(180, 83, 9, 0.42); } .final-cta__btn--secondary { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, 0.50); } .final-cta__btn--secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.78); transform: translateY(-1px); } .final-cta__trust { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(245, 247, 250, 0.60); letter-spacing: 0.04em; } .final-cta__trust-icon { font-size: 14px !important; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; color: rgba(255, 255, 255, 0.44); } /* ── Visual area (right column) ──────────────────────────────── */ .final-cta__visual { position: relative; z-index: 2; } /* slider-wrap: relative parent for info card absolute positioning */ .final-cta__slider-wrap { position: relative; } /* ── Slider ───────────────────────────────────────────────────── */ .final-cta__slider { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12), 0 28px 80px rgba(15, 23, 42, 0.14); /* explicit height synced with navy card — eliminates turm-like 3:4 ratio */ height: clamp(640px, 46vw, 730px); cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: none; --slider-pos: 50%; } .final-cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; pointer-events: none; -webkit-user-drag: none; } .final-cta__img--before { z-index: 1; clip-path: inset(0 calc(100% - var(--slider-pos)) 0 0); } .final-cta__divider { position: absolute; top: 0; bottom: 0; left: var(--slider-pos); transform: translateX(-50%); z-index: 2; width: 2px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 12px rgba(0, 0, 0, 0.18); display: flex; align-items: center; justify-content: center; pointer-events: none; } .final-cta__handle { width: 46px; height: 46px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 14px rgba(15, 23, 42, 0.24), 0 0 0 1px rgba(24, 48, 84, 0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .final-cta__slider-label { position: absolute; top: 20px; z-index: 3; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 13px; border-radius: 5px; pointer-events: none; } .final-cta__slider-label--left { left: 20px; background: rgba(245, 247, 250, 0.94); color: #183054; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .final-cta__slider-label--right { right: 20px; background: #183054; color: #FFFFFF; } /* ── Info Card ────────────────────────────────────────────────── */ .final-cta__info-card { position: absolute; /* 24% from bottom: card sits in lower-center zone, connecting card and slider */ bottom: 24%; left: -32px; z-index: 6; background: #FFFFFF; border-radius: 20px; padding: 18px 22px 18px 18px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12), 0 16px 48px rgba(15, 23, 42, 0.10); display: flex; align-items: flex-start; gap: 14px; min-width: 244px; } .final-cta__info-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(24, 48, 84, 0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .final-cta__info-icon .material-symbols-outlined { font-size: 17px !important; color: #183054; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } .final-cta__info-data { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .final-cta__info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .final-cta__info-row dt { font-size: 9.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(15, 23, 42, 0.40); white-space: nowrap; flex-shrink: 0; } .final-cta__info-row dd { font-size: 11.5px; font-weight: 600; color: #0F172A; margin: 0; text-align: right; } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 900px) { .final-cta__inner { grid-template-columns: 1fr; width: min(680px, calc(100% - 40px)); gap: 36px; } .final-cta__copy-card { clip-path: none; border-radius: 32px; min-height: auto; max-width: 100%; } .final-cta__copy-inner { padding: clamp(44px, 5vw, 60px); min-width: 0; } .final-cta__text { max-width: none; overflow-wrap: break-word; } .final-cta__actions { max-width: none; } /* Padding wieder innerhalb der 100%-Breite halten, sonst ragt der Button (width:100% + 24px Padding) rechts über den Kartenrand und wird abgeschnitten */ .final-cta__btn { box-sizing: border-box; } /* height:auto ist entscheidend – die feste clamp()-Höhe der Basis-Regel schlägt sonst aspect-ratio, wodurch der Slider ~640px hoch bei schmaler Breite blieb und object-fit:cover das Bild stark abschnitt. */ .final-cta__slider { height: auto; aspect-ratio: 4 / 3; } .final-cta__info-card { position: static; margin-top: 20px; min-width: auto; } } @media (max-width: 640px) { .final-cta { padding: 64px 0 80px; } .final-cta__inner { width: calc(100% - 32px); gap: 28px; } .final-cta__copy-card { border-radius: 24px; } .final-cta__copy-inner { padding: 36px 28px; } .final-cta__headline { font-size: clamp(32px, 8vw, 44px); } .final-cta__btn { padding: 16px 20px; } .final-cta__slider { aspect-ratio: 4 / 3; border-radius: 16px; } .final-cta__handle { width: 50px; height: 50px; } .final-cta__info-card { margin-top: 16px; } } @media (prefers-reduced-motion: reduce) { .final-cta__btn { transition: none; } } /* ============================================================ EXPLORE SECTION (.expl__) "Mehr entdecken, was möglich ist." Desktop: grid — image left | navy right with diagonal edge The diagonal is the visual mirror of the about-feature section below. ============================================================ */ .expl { position: relative; /* Absolute-positioned children — section height controlled by min-height */ min-height: clamp(680px, 52vw, 800px); overflow: hidden; background: #183054; } /* ── Image side (absolutely fills left portion) ───────────── */ .expl__media { position: absolute; top: 0; left: 0; bottom: 0; width: 64%; overflow: hidden; } .expl__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } /* Directional overlay: darker at right edge to blend into navy diagonal */ .expl__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(15, 23, 42, 0.18) 0%, rgba(15, 23, 42, 0.28) 52%, rgba(24, 48, 84, 0.62) 100% ); pointer-events: none; z-index: 1; } /* ── Navy panel (right, absolutely positioned, diagonal left edge) ─── */ /* Option B from analysis: absolute position with correct panel-relative padding. Old version was right in form, wrong only in padding calculation (26% of SECTION width instead of panel width — giving only 216px content area). Now: padding-left is sized relative to THIS panel (54% wide), not the section. Diagonal math at 1440px: Panel: right 0, width 54% = 778px, starts at 662px from section-left. clip 22% of 778px = 171px removed at top. Visible left at top: 662 + 171 = 833px. Visible left at bottom: 662px (full panel, overlaps image by ~100px at bottom). Horizontal diagonal span: 171px — clearly architectural, ~70% wider than the subtle 101px of the previous grid+margin approach. */ .expl__navy { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; z-index: 2; background: radial-gradient(ellipse at 72% 18%, rgba(255, 255, 255, 0.07) 0%, transparent 46%), linear-gradient(158deg, #1E2F51 0%, #183054 48%, #0F172A 100%); color: #FFFFFF; display: flex; align-items: center; /* 26% clip → span 202px over ~748px height → 15.1° About-feature is 15.6° → difference only 0.5°, visually equivalent */ clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%); } /* padding-left must exceed 26% of panel (26% × 778 = 202px). Use clamp(210px, 14.5vw, 248px) → 209px at 1440px — clears diagonal. Content: 778 − 210 − 68 = 500px. */ .expl__navy-inner { width: 100%; padding: clamp(64px, 6vw, 96px) clamp(44px, 4.5vw, 68px) clamp(64px, 6vw, 96px) clamp(210px, 14.5vw, 248px); } .expl__rule { display: block; width: 32px; height: 1.5px; background: rgba(255, 255, 255, 0.28); margin-bottom: 20px; } .expl__eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: 0.20em; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; margin: 0 0 28px; line-height: 1.6; } /* Headline: max 56px so "Mehr entdecken," fits in the 500px content area created by the 26% clip (needed to match about-feature's 15.6° diagonal angle). */ .expl__headline { font-family: "Inter", sans-serif; font-size: clamp(44px, 3.9vw, 56px); font-weight: 700; color: #FFFFFF; line-height: 1.05; letter-spacing: -0.035em; margin: 0 0 24px; max-width: 560px; word-break: normal; overflow-wrap: normal; hyphens: none; } .expl__body { font-size: 16px; color: rgba(255, 255, 255, 0.72); line-height: 1.70; max-width: 480px; margin: 0 0 32px; } /* CTA button — same visual logic as about-feature's „Mehr über uns entdecken" */ .expl__cta { display: inline-flex; align-items: center; gap: 10px; background: #FFFFFF; color: #183054; font-size: 14px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; padding: 14px 22px; border-radius: 9px; margin-bottom: 44px; transition: background 0.22s ease, transform 0.20s ease; } .expl__cta:hover { background: #F5F7FA; transform: translateY(-1px); } .expl__cta .material-symbols-outlined { font-size: 15px !important; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; } /* ── Three feature items — horizontal grid ───────────────── */ .expl__features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; max-width: 560px; margin-bottom: 36px; } .expl__feature { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding-right: 8px; border-right: 1px solid rgba(255, 255, 255, 0.13); } .expl__feature:last-child { border-right: none; padding-right: 0; } .expl__feature-icon { width: 28px; height: 28px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.10); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .expl__feature-icon .material-symbols-outlined { font-size: 14px !important; color: rgba(255, 255, 255, 0.78); font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } .expl__feature-text { font-size: 11px; color: rgba(255, 255, 255, 0.62); line-height: 1.45; min-width: 0; } .expl__feature-text strong { display: block; color: rgba(255, 255, 255, 0.94); font-weight: 700; font-size: 11px; letter-spacing: -0.01em; margin-bottom: 2px; white-space: nowrap; } .expl__tagline { display: flex; align-items: center; gap: 14px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.28); text-transform: uppercase; } .expl__tagline::before { content: ''; display: block; width: 26px; height: 1.5px; background: rgba(255, 255, 255, 0.18); flex-shrink: 0; } /* ── Floating entry cards (absolutely positioned over image on desktop) ─── */ .expl__cards { position: absolute; z-index: 10; left: clamp(48px, 5vw, 88px); top: 50%; transform: translateY(-50%); display: flex; gap: clamp(16px, 1.8vw, 24px); align-items: stretch; } .expl__card { background: #FFFFFF; border-radius: 26px; padding: 44px 36px 36px; width: clamp(280px, 19.5vw, 348px); min-height: auto; display: flex; flex-direction: column; align-items: flex-start; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22), 0 6px 20px rgba(15, 23, 42, 0.10); border: 1px solid rgba(217, 222, 231, 0.45); /* Scroll-Reveal Startzustand (wird via .expl.active aufgelöst) */ opacity: 0; transform: translateY(26px); transition: opacity 0.55s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .expl.active .expl__card { opacity: 1; transform: translateY(0); } .expl__card:hover { transform: translateY(-6px); box-shadow: 0 36px 88px rgba(15, 23, 42, 0.26), 0 8px 28px rgba(15, 23, 42, 0.12); } /* ── Sekundärkarte: bewusst zurückhaltender ─────────────────── */ .expl__card--secondary { box-shadow: 0 16px 48px rgba(15, 23, 42, 0.15), 0 4px 14px rgba(15, 23, 42, 0.07); } .expl.active .expl__card--secondary { transition-delay: 0.04s; } .expl__card--secondary:hover { transform: translateY(-5px); box-shadow: 0 28px 70px rgba(15, 23, 42, 0.20), 0 7px 22px rgba(15, 23, 42, 0.10); } /* ── Hauptkarte: empfohlener Einstieg, ruhig & hochwertig ───── */ .expl__card--primary { position: relative; /* kräftigere dunkelblaue Border + weicher Navy-Shadow, dennoch nicht aggressiv */ border: 1.75px solid rgba(12, 31, 63, 0.6); /* Startzustand der Reveal-Animation für die Hauptkarte */ transform: translateY(26px) scale(0.985); box-shadow: 0 26px 64px rgba(12, 31, 63, 0.22), 0 8px 20px rgba(12, 31, 63, 0.12), 0 0 0 5px rgba(12, 31, 63, 0.07); } .expl.active .expl__card--primary { opacity: 1; /* nahezu auf gemeinsamer Grundlinie – nur ein Hauch Priorität */ transform: translateY(-4px) scale(1); transition-delay: 0.12s; } .expl__card--primary:hover { transform: translateY(-9px) scale(1); border-color: rgba(12, 31, 63, 0.78); box-shadow: 0 36px 84px rgba(12, 31, 63, 0.26), 0 12px 30px rgba(12, 31, 63, 0.16), 0 0 0 5px rgba(12, 31, 63, 0.10); } /* ── Badge ──────────────────────────────────────────────────── */ .expl__card-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 5.5px 12px 5.5px 10px; background: #d97706; color: #FFFFFF; font-size: 9px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; border-radius: 100px; white-space: nowrap; box-shadow: 0 3px 10px rgba(180, 83, 9, 0.32); } .expl__card-badge .material-symbols-outlined { font-size: 12px !important; color: rgba(255, 255, 255, 0.85); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; } /* ── CTA-Buttons (gemeinsame Basis für beide Cards) ─────────── */ .expl__card-cta { margin-top: 18px; align-self: center; /* zentriert im ansonsten linksbündigen Card-Flow */ height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 28px; /* Auto-Breite: Button umschließt den Text mit Pill-Polsterung */ font-size: 14px; font-weight: 700; letter-spacing: 0.005em; white-space: nowrap; border-radius: 100px; /* Pill – konsistent mit den übrigen Buttons der Seite */ text-decoration: none; flex-shrink: 0; transition: background 0.22s ease, transform 0.24s ease, box-shadow 0.24s ease, border-color 0.22s ease; } .expl__card-cta-arrow { display: inline-block; transition: transform 0.24s ease; } /* Primär: Orange/Amber-CTA — hebt den Quiz-Pfad hervor */ .expl__card--primary .expl__card-cta { color: #FFFFFF; background: #d97706; box-shadow: 0 2px 8px rgba(180, 83, 9, 0.22); } .expl__card--primary:hover .expl__card-cta { background: #b45309; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(180, 83, 9, 0.30); } .expl__card--primary:hover .expl__card-cta-arrow { transform: translateX(4px); } /* Sekundär (Ghost): hell, ruhig, mit dunkler Schrift */ .expl__card-cta--ghost { color: #183054; background: #FFFFFF; border: 1.5px solid rgba(24, 48, 84, 0.16); } .expl__card--secondary:hover .expl__card-cta--ghost { background: #F4F7FB; border-color: rgba(24, 48, 84, 0.30); transform: translateY(-1px); } .expl__card--secondary:hover .expl__card-cta-arrow { transform: translateX(4px); } /* einmaliger, subtiler Orange-Pulse beim Einscrollen (nur Hauptkarte) */ @keyframes explCtaPulse { 0% { box-shadow: 0 5px 16px rgba(180, 83, 9, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 0 rgba(217, 119, 6, 0.30); } 40% { box-shadow: 0 5px 16px rgba(180, 83, 9, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 7px rgba(217, 119, 6, 0.14); } 100% { box-shadow: 0 5px 16px rgba(180, 83, 9, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 14px rgba(217, 119, 6, 0); } } .expl.active .expl__card--primary .expl__card-cta { animation: explCtaPulse 1.25s ease-out 0.65s 1; } .expl__card-hint { margin: 11px 0 0; width: 100%; text-align: center; font-size: 11px; line-height: 1.4; color: rgba(124, 139, 160, 0.95); } .expl__card-icon { width: 68px; height: 68px; border-radius: 50%; background: rgba(24, 48, 84, 0.07); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; flex-shrink: 0; } .expl__card-icon .material-symbols-outlined { font-size: 28px !important; color: #183054; font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 40; } .expl__card-label { font-size: 9px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(24, 48, 84, 0.40); margin: 0 0 10px; } .expl__card-title { font-family: "Inter", sans-serif; font-size: clamp(19px, 1.5vw, 24px); font-weight: 700; color: #0F172A; letter-spacing: -0.022em; line-height: 1.18; margin: 0; } .expl__card-rule { width: 100%; height: 1px; background: rgba(24, 48, 84, 0.09); margin: 16px 0 18px; flex-shrink: 0; } .expl__card-desc { font-size: 15px; color: #7C8BA0; line-height: 1.65; margin: 0; flex-grow: 1; } .expl__card-btn { width: 50px; height: 50px; border-radius: 50%; background: #183054; display: flex; align-items: center; justify-content: center; margin-top: 24px; flex-shrink: 0; text-decoration: none; transition: background 0.22s ease, transform 0.24s ease; } .expl__card:hover .expl__card-btn { background: #0F172A; transform: translateX(3px) translateY(-2px); } .expl__card-btn svg { width: 17px; height: 11px; flex-shrink: 0; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 1200px) { /* At 1200px: panel 52% = 624px, height ≈ 624px. Matching about-feature 15.6°: span = 624×tan(15.6°) = 174px → 28% of 624 = 175px. pad_left must exceed 175px: clamp(180px, 15vw, 216px) = 180px at 1200px. */ .expl__navy { width: 52%; clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); } .expl__navy-inner { padding: clamp(52px, 5vw, 76px) clamp(36px, 3.5vw, 52px) clamp(52px, 5vw, 76px) clamp(180px, 15vw, 216px); } .expl__card { width: clamp(236px, 17vw, 290px); min-height: auto; padding: 38px 30px 32px; } .expl__headline { font-size: clamp(36px, 3.6vw, 52px); } } @media (max-width: 1100px) { /* Stack: image top → cards middle → navy bottom. Reset all absolute positioning so elements flow naturally. Umschaltpunkt liegt bei 1100px (nicht 900px): im Bereich 900–1100px überlappten die absolut positionierten Karten sonst das Navy-Panel und verdeckten die Überschrift „Mehr entdecken". Ab 1100px passt das Overlay. */ .expl { min-height: auto; } .expl__media { position: relative; /* out of absolute, back in flow */ left: auto; top: auto; bottom: auto; width: 100%; height: 340px; } .expl__media::after { background: linear-gradient(to bottom, transparent 40%, rgba(16, 41, 74, 0.72) 100%); } /* Cards: from absolute overlay to relative block between image and navy */ .expl__cards { position: relative; left: auto; top: auto; transform: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 18px; padding: 32px 6vw 48px; background: #102645; z-index: auto; } .expl__card { flex: 1; min-width: 240px; max-width: 360px; min-height: auto; box-sizing: border-box; } /* Hauptkarte gestapelt: Hervorhebung behalten, aber ohne Versatz/Skalierung damit die Spalte sauber ausgerichtet bleibt */ .expl__card--primary { transform: translateY(26px); } .expl.active .expl__card--primary { transform: translateY(0); } .expl__card--primary:hover { transform: translateY(-6px) scale(1); } .expl__card--secondary:hover { transform: translateY(-6px); } .expl__navy { position: relative; /* out of absolute, back in flow */ top: auto; right: auto; bottom: auto; width: 100%; clip-path: none; /* no diagonal when stacked */ } .expl__navy-inner { padding: 64px 8vw 56px; } .expl__headline { font-size: clamp(36px, 5.5vw, 54px); max-width: 100%; } .expl__body { max-width: 100%; } .expl__features { max-width: 100%; } .expl__cta { width: auto; } } @media (max-width: 640px) { .expl__media { height: 270px; } /* padding-top schafft Luft für den Badge, der -12px über die Karte ragt (sonst sitzt die Karte optisch "angeschnitten" direkt am Bildrand) */ .expl__cards { flex-direction: column; padding: 32px 5vw 40px; align-items: stretch; } .expl__card { width: 100%; max-width: 100%; min-height: auto; } .expl__navy-inner { padding: 48px 5vw 44px; } .expl__headline { font-size: clamp(34px, 8vw, 46px); } .expl__card-icon { width: 60px; height: 60px; margin-bottom: 20px; } .expl__card-title { font-size: 20px; } .expl__features { grid-template-columns: 1fr; gap: 15px; } .expl__feature { border-right: none; padding-right: 0; } .expl__cta { justify-content: center; width: 100%; } } @media (prefers-reduced-motion: reduce) { .expl__card { transition: none; opacity: 1; transform: none; } .expl__card--primary { transform: none; } .expl.active .expl__card, .expl.active .expl__card--primary { transform: none; } .expl__card-btn { transition: none; } .expl__card-cta { transition: none; animation: none; } .expl__card-cta-arrow { transition: none; } .expl.active .expl__card--primary .expl__card-cta { animation: none; } .expl__cta { transition: none; } } /* ============================================================ HAUSAUFBAU SCROLL-SCRUB VIDEO (.hbsv__) Track: 550vh scrollbar → Sticky: 100vh pinned viewport ============================================================ */ /* Outer section: kein Margin/Padding, Hintergrund = ablauf-Background (#F8FAFB) verhindert sichtbare Farbkante am Übergang */ /* ============================================================ Hero Scroll-Scrub Video (.hs) ============================================================ */ section.hs { display: block; margin: 0; padding: 0; } /* Scroll-Track: gibt genug Höhe zum Durchscrubben des Videos. 250vh = ~2,5 Bildschirmhöhen Scroll für 10 s Video — snappy statt zäh. */ .hs__track { height: 250vh; position: relative; } /* Sticky-Bühne: haftet oben, 100vh hoch */ .hs__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; } /* Vollflächiges Video */ .hs__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; pointer-events: none; } /* Gradient-Vignette: stärker links für Premium-Lesbarkeit + subtiler Boden-Verlauf */ .hs__vignette { position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(8, 15, 34, 0.88) 0%, rgba(8, 15, 34, 0.70) 22%, rgba(8, 15, 34, 0.44) 44%, rgba(8, 15, 34, 0.18) 62%, rgba(8, 15, 34, 0.06) 76%, transparent 90% ), linear-gradient( to top, rgba(8, 15, 34, 0.32) 0%, transparent 26% ); pointer-events: none; z-index: 1; } /* Unterer Übergang zur nächsten Section */ .hs__sticky::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to top, rgba(255,255,255,0.18) 0%, transparent 100%); pointer-events: none; z-index: 2; } /* Text-Overlay: im unteren Drittel links verankert — editorial / architektonisch. display:grid + überlappende .hs__phase-Zellen ermöglicht weiches Überblenden der drei Story-Phasen, ohne die Positionierung zu verändern. */ .hs__content { position: absolute; left: clamp(56px, 8vw, 130px); bottom: clamp(80px, 11vh, 140px); z-index: 3; width: clamp(380px, 48vw, 600px); max-width: calc(100% - 96px); display: grid; align-items: start; } /* Story-Phasen: liegen übereinander in derselben Grid-Zelle — gleiche Position, gleiche Breite, gleiches Layout für alle 3 Phasen. Weicher, "cinematischer" Crossfade mit dezentem Y-Shift (Expo-Out-Kurve statt linearem Ease, dadurch ruhiger Anfang + sanftes Ausklingen, kein hartes Ein-/Ausblenden). */ .hs__phase { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; opacity: 0; transform: translateY(14px); transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .hs__phase.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0.16s; } /* Szenen-Nummer — sehr dezent, gehört zur editorial-Hierarchie */ .hs__scene-num { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.32); margin: 0 0 18px; } /* Eyebrow — ruhiges Premium-Label über der Headline */ .hs__eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); margin: 0 0 22px; } .hs__eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: rgba(255, 255, 255, 0.50); flex-shrink: 0; } /* Headline — dominant, editorial, Premium-Architekturgefühl */ .hs__headline { font-family: "Inter", sans-serif; font-size: clamp(40px, 5.6vw, 76px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; color: #FFFFFF; margin: 0 0 22px; } /* Subtext — lesbarer, mehr Kontrast, elegante Zeilenlänge */ .hs__sub { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.68; color: rgba(255, 255, 255, 0.78); margin: 0 0 38px; max-width: 480px; } /* CTA-Zeile: starkes Primärpaar, hochwertig und prominent */ .hs__actions { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; margin-bottom: 44px; } /* Primärer Button: Pill-Form, groß, klar, hochwertig */ .hs__btn-primary { display: inline-flex; align-items: center; justify-content: center; background: #FFFFFF; color: #183054; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; padding: 15px 36px; border-radius: 999px; /* Transparenter Rand in gleicher Stärke wie der Sekundär-Button → beide Buttons sind exakt gleich hoch (kein 3px-Versatz durch den Border). */ border: 1.5px solid transparent; box-shadow: 0 4px 24px rgba(8, 15, 34, 0.32); transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; white-space: nowrap; } .hs__btn-primary:hover { background: #EEF2F7; box-shadow: 0 8px 30px rgba(8, 15, 34, 0.38); transform: translateY(-1px); } /* Quiz-Haupt-CTA auf Slide 1: Amber-Akzent als primärer Lead-Pfad */ .hs__btn-primary--quiz { background: #d97706; color: #ffffff; box-shadow: 0 4px 20px rgba(180, 83, 9, 0.34); } .hs__btn-primary--quiz:hover { background: #b45309; box-shadow: 0 8px 28px rgba(180, 83, 9, 0.42); } /* Sekundärer Button: identische Optik zum Primär-Button (weiß mit blauer Schrift). Bildet das gleichwertige zweite CTA neben "Projekt unverbindlich besprechen" (Quiz-Einstieg). */ .hs__btn-secondary { display: inline-flex; align-items: center; justify-content: center; background: #FFFFFF; color: #183054; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; padding: 15px 36px; border-radius: 999px; border: 1.5px solid transparent; box-shadow: 0 4px 24px rgba(8, 15, 34, 0.32); transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; white-space: nowrap; } .hs__btn-secondary:hover { background: #EEF2F7; box-shadow: 0 8px 30px rgba(8, 15, 34, 0.38); transform: translateY(-1px); } /* Zwei-Button-Hero (Phase 1 + 3, erkannt über den Sekundär-Button): Ab Tablet/Desktop beide Buttons exakt gleich breit und gleich hoch. inline-grid + zwei 1fr-Spalten setzt beide auf die Breite des längeren Buttons (Text bleibt zentriert). Auf dem Handy (<=640px) greift die bestehende Spalten-/Stapel-Logik, daher hier auf >=641px begrenzt. */ @media (min-width: 641px) { .hs__actions:has(.hs__btn-secondary) { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; } } /* Sekundärer CTA: ruhiger Textlink, jetzt präsenter und lesbarer */ .hs__btn-ghost { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.82); font-size: 15px; font-weight: 500; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, 0.28); transition: gap 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .hs__btn-ghost:hover { gap: 13px; color: rgba(255, 255, 255, 0.98); border-color: rgba(255, 255, 255, 0.55); } /* Microcopy direkt unter den CTAs: dezente Risiko-Entlastung (kostenlos, unverbindlich, Antwortzeit). Klein und ruhig, soll die Buttons nicht überstrahlen. Sitzt zwischen Actions und Trust-Liste. */ .hs__microcopy { margin: -28px 0 30px; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); max-width: 480px; } /* Trust-Hinweise — keine Dashboard-Tags, sondern dezente, editorial wirkende Vertrauenspunkte: kleine Punkt-Markierung + zurückhaltende Mikrotypografie, großzügiger Abstand, gestaffeltes Einblenden statt allem auf einmal. */ .hs__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; list-style: none; margin: 0; padding: 0; } .hs__trust li { position: relative; display: inline-flex; align-items: center; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); opacity: 0; transform: translateY(8px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .hs__trust li::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.44); flex-shrink: 0; } .hs__phase.is-active .hs__trust li { opacity: 1; transform: translateY(0); } .hs__phase.is-active .hs__trust li:nth-child(1) { transition-delay: 0.40s; } .hs__phase.is-active .hs__trust li:nth-child(2) { transition-delay: 0.54s; } .hs__phase.is-active .hs__trust li:nth-child(3) { transition-delay: 0.68s; } /* Scroll-Hinweis: zentriert unterhalb des Textblocks, lädt zum Weiterscrollen ein. Liegt außerhalb von .hs__content, daher eigene Positionierung + eigener z-index. */ .hs__scroll { position: absolute; left: 50%; bottom: clamp(28px, 4.5vh, 46px); transform: translateX(-50%); z-index: 3; display: block; text-decoration: none; -webkit-tap-highlight-color: transparent; } .hs__scroll-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 20px 16px; border-radius: 999px; background: rgba(15, 23, 42, 0.34); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 0.3s ease, border-color 0.3s ease; animation: hsScrollFloat 2.6s ease-in-out infinite; } .hs__scroll:hover .hs__scroll-inner { background: rgba(15, 23, 42, 0.5); border-color: rgba(255, 255, 255, 0.3); } .hs__scroll-label { font-size: 10px; font-weight: 600; letter-spacing: 0.32em; text-indent: 0.32em; /* optischer Ausgleich für Letter-Spacing */ text-transform: uppercase; color: rgba(255, 255, 255, 0.8); } .hs__scroll-line { position: relative; width: 1px; height: 26px; background: rgba(255, 255, 255, 0.22); overflow: hidden; border-radius: 1px; } .hs__scroll-line::before { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, #ffffff 50%, transparent); animation: hsScrollLine 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes hsScrollFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @keyframes hsScrollLine { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } } /* ── Responsive ─────────────────────────────────────────────── */ /* Tablet */ @media (max-width: 900px) { .hs__track { height: 300vh; } .hs__content { width: clamp(360px, 62vw, 520px); } .hs__headline { font-size: clamp(38px, 5.2vw, 62px); } .hs__sub { font-size: clamp(15px, 1.6vw, 16px); } } /* Mobile (Phone): kein Scrub, kein Video → statisches Poster + EIN Textblock (Phase 0). Die nicht handy-optimierten Videos werden hier komplett weggelassen. */ @media (max-width: 640px) { .hs__track { height: auto; } .hs__sticky { position: relative; top: auto; height: 100svh; min-height: 600px; background-color: #0a1f44; background-image: url("../Heropage-poster.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Video aus, Poster übernimmt den Hintergrund */ .hs__video { display: none; } /* Nur Phase 0 zeigen — ein klarer, statischer Textblock */ .hs__phase[data-phase="1"], .hs__phase[data-phase="2"] { display: none; } .hs__phase[data-phase="0"] { opacity: 1; transform: none; } /* Szenen-Zähler "01 / 03" ergibt ohne Phasenwechsel keinen Sinn */ .hs__scene-num { display: none; } .hs__content { left: 20px; right: 20px; bottom: clamp(60px, 10vh, 100px); width: auto; max-width: 100%; text-align: center; } /* Mobile: ganzer Hero zentriert – Text mittig, Buttons untereinander */ .hs__phase { align-items: center; } .hs__trust { justify-content: center; } .hs__headline { font-size: clamp(34px, 9vw, 50px); line-height: 1.1; letter-spacing: -0.025em; } .hs__sub { max-width: 100%; font-size: 15px; margin-bottom: 28px; } .hs__actions { flex-direction: column; align-items: center; margin-bottom: 28px; gap: 12px; } /* Lange CTA-Labels (z.B. "Welches Bauvorhaben passt zu Ihnen?") dürfen auf zwei Zeilen umbrechen statt den Button als sehr breite, dominante Pille über die volle Breite zu zwingen (weiterhin gleicher Text/Link/Reihenfolge) */ .hs__btn-primary { font-size: 13.5px; padding: 13px 26px; white-space: normal; text-align: center; line-height: 1.3; width: 100%; max-width: 300px; box-sizing: border-box; } .hs__btn-secondary { font-size: 13.5px; padding: 13px 26px; white-space: normal; text-align: center; line-height: 1.3; width: 100%; max-width: 300px; box-sizing: border-box; } .hs__btn-ghost { font-size: 13.5px; } .hs__microcopy { margin: -14px 0 24px; text-align: center; max-width: 100%; font-size: 12px; } /* Vereinfachung auf Mobile: max. 2 dezente Trust-Hinweise je Phase */ .hs__trust li:nth-child(n + 3) { display: none; } .hs__vignette { background: linear-gradient(180deg, rgba(8,15,34,0.70) 0%, rgba(8,15,34,0.44) 55%, rgba(8,15,34,0.22) 100%), linear-gradient(to top, rgba(8,15,34,0.36) 0%, transparent 28%); } .hs__sticky::after { display: none; } /* Scroll-Hinweis: kompakter, dichter am unteren Rand */ .hs__scroll { bottom: 14px; } .hs__scroll-inner { padding: 10px 16px 12px; gap: 7px; } .hs__scroll-label { font-size: 9px; letter-spacing: 0.26em; text-indent: 0.26em; } .hs__scroll-line { height: 18px; } } /* Niedrige Viewports (z. B. Smartphone quer): Scroll-Hinweis ausblenden, damit er sich nicht mit dem Textblock überschneidet */ @media (max-height: 500px) { .hs__scroll { display: none; } } /* Reduced-motion */ @media (prefers-reduced-motion: reduce) { .hs__btn-primary, .hs__btn-ghost { transition: none; } /* Phasenwechsel bleibt erhalten (Inhalt ändert sich), aber ohne Fade/Y-Shift */ .hs__phase, .hs__trust li { transition: none; } .hs__scroll-inner { animation: none; } .hs__scroll-line::before { animation: none; opacity: 0.45; top: 0; height: 100%; } } /* ============================================================ */ section.hbsv { display: block; margin: 0; padding: 0; background: #F8FAFB; } .hbsv__track { height: 500vh; position: relative; margin: 0; padding: 0; } .hbsv__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; /* Sehr dezente Top-Fade: NUR 64px, Farbe = ablauf-Hintergrund → transparent Kein blauer Schleier — nur nahtloser Übergang am oberen Rand */ } /* Oberer Übergang: weißer Verlauf überspannt die Sektionsgrenze nahtlos. Kein Blau, kein Navy — nur ein kurzer Weiß-Fade der die Kante auflöst. */ .hbsv__sticky::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 180px; background: linear-gradient( to bottom, #ffffff 0%, rgba(255, 255, 255, 0.92) 30%, rgba(255, 255, 255, 0.55) 65%, rgba(255, 255, 255, 0) 100% ); pointer-events: none; z-index: 3; } /* Vollflächiges Video */ .hbsv__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; pointer-events: none; } /* Overlay: oben lesbar, unten Fade in Richtung der nächsten Navy-Section */ .hbsv__overlay { display: none; /* Overlay komplett entfernt — Video wirkt klar und unverfälscht */ } /* Text: untere linke Ecke */ .hbsv__content { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: clamp(40px, 5vw, 80px) clamp(40px, 6vw, 96px) clamp(60px, 8vw, 130px); max-width: 820px; } .hbsv__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(245, 247, 250, 0.70); margin: 0 0 16px; display: flex; align-items: center; gap: 14px; } .hbsv__eyebrow::before { content: ''; display: block; width: 28px; height: 1.5px; background: rgba(255, 255, 255, 0.50); flex-shrink: 0; } .hbsv__headline { font-family: "Inter", sans-serif; font-size: clamp(34px, 4.2vw, 60px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; color: #FFFFFF; margin: 0 0 18px; } .hbsv__sub { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.72; color: rgba(245, 247, 250, 0.78); margin: 0 0 32px; max-width: 520px; } .hbsv__hint { font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(245, 247, 250, 0.52); display: inline-flex; align-items: center; gap: 8px; margin: 0; animation: hbsv-pulse 2.2s ease-in-out infinite; transition: opacity 0.5s ease; } .hbsv__hint-icon { font-size: 16px !important; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; } @keyframes hbsv-pulse { 0%, 100% { opacity: 0.52; transform: translateY(0); } 50% { opacity: 0.90; transform: translateY(5px); } } /* Fortschrittsbalken */ .hbsv__progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.14); z-index: 3; } .hbsv__progress-fill { height: 100%; width: 0%; background: rgba(255, 255, 255, 0.65); border-radius: 0 2px 2px 0; } /* Scroll-Hinweis: zentriert über dem Fortschrittsbalken, dunkles Glas auf dem hellen Auftaktbild der Sektion. Blendet sanft aus, sobald der Scroll-Scrub beginnt (.is-hidden, via JS bei Fortschritt > ~3 %). */ .hbsv__scroll { position: absolute; left: 50%; bottom: clamp(28px, 4.5vh, 46px); transform: translateX(-50%); z-index: 5; display: block; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: opacity 0.6s ease; } .hbsv__scroll.is-hidden { opacity: 0; pointer-events: none; } .hbsv__scroll-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 20px 16px; border-radius: 999px; background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 0.3s ease, border-color 0.3s ease; animation: hsScrollFloat 2.6s ease-in-out infinite; } .hbsv__scroll:hover .hbsv__scroll-inner { background: rgba(15, 23, 42, 0.7); border-color: rgba(255, 255, 255, 0.3); } .hbsv__scroll-label { font-size: 10px; font-weight: 600; letter-spacing: 0.32em; text-indent: 0.32em; /* optischer Ausgleich für Letter-Spacing */ text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } .hbsv__scroll-line { position: relative; width: 1px; height: 26px; background: rgba(255, 255, 255, 0.25); overflow: hidden; border-radius: 1px; } .hbsv__scroll-line::before { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, #ffffff 50%, transparent); animation: hsScrollLine 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; } /* ── Responsive ───────────────────────────────────────────── */ /* Tablet: scroll-scrub bleibt aktiv, aber etwas kürzer */ @media (max-width: 900px) { .hbsv__track { height: 260vh; } .hbsv__content { padding: 32px 40px 80px; } } /* Phone: Hausaufbau-Scroll-Sektion komplett ausblenden. Der Scroll-Scrub-Effekt kommt nur auf iPad/Tablet/Desktop gut zur Geltung; die nicht handy-optimierten Videos lohnen sich auf dem Phone nicht. */ @media (max-width: 640px) { section.hbsv { display: none; } .hbsv__track { height: auto; /* JS schaltet Scrub ab, Track braucht keine Extra-Höhe */ } .hbsv__sticky { position: relative; top: auto; height: 75vh; min-height: 460px; } .hbsv__content { padding: 28px 24px 56px; max-width: 100%; } .hbsv__hint { display: none; } /* Scroll-Hinweis: kompakter, dichter am unteren Rand */ .hbsv__scroll { bottom: 14px; } .hbsv__scroll-inner { padding: 10px 16px 12px; gap: 7px; } .hbsv__scroll-label { font-size: 9px; letter-spacing: 0.26em; text-indent: 0.26em; } .hbsv__scroll-line { height: 18px; } } /* Niedrige Viewports (z. B. Smartphone quer): Scroll-Hinweis ausblenden */ @media (max-height: 500px) { .hbsv__scroll { display: none; } } /* Reduced motion: kein Scrub, kein Bounce */ @media (prefers-reduced-motion: reduce) { .hbsv__hint { animation: none; } .hbsv__progress-fill { transition: none; } .hbsv__scroll-inner { animation: none; } .hbsv__scroll-line::before { animation: none; opacity: 0.45; top: 0; height: 100%; } } /* ── Phasen-Karte: Bodenlight (sticky::after) ─────────────── */ /* Dezentes Bodenlight: verstärkt das Gefühl von Weißfläche unter dem Haus */ .hbsv__sticky::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 38vh; background: linear-gradient( to top, rgba(248, 250, 251, 0.30) 0%, rgba(248, 250, 251, 0.10) 48%, transparent 100% ); pointer-events: none; z-index: 2; /* unter Progress-Bar (z:3) und Kachel (z:8) */ } .hbsv__phase-card { position: absolute; left: clamp(24px, 4.5vw, 72px); bottom: clamp(48px, 7.5vh, 92px); z-index: 8; width: clamp(300px, 30vw, 432px); padding: clamp(26px, 2.6vw, 40px) clamp(24px, 2.4vw, 40px); border-radius: 12px; background: radial-gradient(ellipse at 22% 22%, rgba(255,255,255,0.08) 0%, transparent 56%), linear-gradient(150deg, #1E2F51 0%, #183054 55%, #0F172A 100%); box-shadow: 0 12px 44px rgba(15, 23, 42, 0.44), 0 3px 10px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.10); /* Startzustand: unsichtbar, leicht nach unten versetzt */ opacity: 0; transform: translateY(18px); transition: opacity 0.58s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.58s cubic-bezier(0.22, 0.61, 0.36, 1); } .hbsv__phase-card.is-visible { opacity: 1; transform: translateY(0); } /* ── Stepper: Zähler + vier Phasen-Punkte ─────────────────── */ .hbsv__phase-stepper { margin: 0 0 20px; } .hbsv__phase-count { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245, 247, 250, 0.55); margin: 0 0 12px; } .hbsv__phase-count #hbsvPhaseNum { color: #FFFFFF; } .hbsv__phase-steps { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .hbsv__phase-step { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } /* Verbindungslinie zwischen den Steps */ .hbsv__phase-step:not(:last-child)::after { content: ''; width: clamp(14px, 2vw, 32px); height: 1.5px; background: rgba(255, 255, 255, 0.18); } .hbsv__phase-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease; } /* Bereits durchlaufene Phasen: halb-hell. Aktive Phase: weiß + Glow. */ .hbsv__phase-step.is-done .hbsv__phase-dot { background: rgba(255, 255, 255, 0.60); } .hbsv__phase-step.is-active .hbsv__phase-dot { background: #FFFFFF; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14); transform: scale(1.08); } /* ── Gestapelte Phasen-Texte (Crossfade, kein Höhensprung) ── */ /* Grid-Stacking: alle Phasen teilen sich dieselbe Zelle → Stack ist so hoch wie die längste Phase, der Wechsel passiert per Opacity-Crossfade. */ .hbsv__phase-stack { display: grid; } .hbsv__phase { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } .hbsv__phase.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .hbsv__phase-title { font-family: "Inter", sans-serif; font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: #FFFFFF; margin: 0 0 14px; } .hbsv__phase-text { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.7; color: rgba(245, 247, 250, 0.78); margin: 0; } /* ── CTA-Buttons: nur sichtbar wenn letzte Phase aktiv ────── */ .hbsv__phase-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } .hbsv__phase-card[data-phase="4"] .hbsv__phase-cta { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Button: weißes Vollfeld auf Navy — entspricht dem Website-Button-System */ .hbsv__cta-btn { display: inline-flex; align-items: center; gap: 10px; background: #FFFFFF; color: #183054; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 14px 28px; border-radius: 10px; box-shadow: 0 2px 8px rgba(15,23,42,0.18); transition: background 0.22s ease, box-shadow 0.22s ease; cursor: pointer; } .hbsv__cta-btn:hover { background: #EEF2F7; box-shadow: 0 4px 18px rgba(15,23,42,0.26); } /* Quiz-CTA: Amber-Akzent – führt zum Haustyp-Quiz (wichtigster Lead-Pfad) */ .hbsv__cta-btn--ghost { background: #d97706; color: #ffffff; border: none; box-shadow: 0 4px 14px rgba(180, 83, 9, 0.32); } .hbsv__cta-btn--ghost:hover { background: #b45309; border: none; box-shadow: 0 6px 20px rgba(180, 83, 9, 0.42); } .hbsv__cta-btn-arrow { display: inline-block; transition: transform 0.20s ease; } .hbsv__cta-btn:hover .hbsv__cta-btn-arrow { transform: translateX(3px); } /* Tablet */ @media (max-width: 900px) { .hbsv__phase-card { width: clamp(260px, 42vw, 380px); padding: 28px; bottom: clamp(36px, 5vh, 64px); } .hbsv__phase-title { font-size: clamp(22px, 3.4vw, 30px); } } /* Mobile: kein Scrub-Scroll → Karte statisch, alle Phasen als Liste, Buttons dauerhaft sichtbar. Stepper entfällt (keine Phasen-Progression). */ @media (max-width: 640px) { .hbsv__phase-card { left: 16px; right: 16px; width: auto; bottom: 28px; padding: 24px 20px; opacity: 1; transform: none; } .hbsv__phase-stepper { display: none; } /* Grid-Stacking aufheben: Phasen untereinander als Liste */ .hbsv__phase-stack { display: block; } .hbsv__phase { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; } .hbsv__phase + .hbsv__phase { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .hbsv__phase-title { font-size: clamp(19px, 5vw, 24px); } /* Buttons auf Mobile immer sichtbar (unabhängig von data-phase) */ .hbsv__phase-cta { opacity: 1; transform: none; pointer-events: auto; } .hbsv__sticky::after { display: none; } } /* ============================================================================= TAILWIND-ERSATZ — index.html (Startseite) Scoped utility-replacements für alle Stellen in index.html, die bisher cdn.tailwindcss.com benötigten. NICHT für andere Seiten nutzen. ============================================================================= */ /* Body-Klassen (bg-surface, text-on-surface, font-body-md, overflow-x-hidden) */ body[data-page="home"] { background-color: #f8f9fa; color: #191c1d; font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; } /* ── Referenzen-Sektion: Display ── */ .ref-inner .flex { display: flex; } .ref-inner .inline-flex { display: inline-flex; } .ref-inner .grid { display: grid; } /* ── Referenzen-Sektion: Flexbox ── */ .ref-inner .flex-wrap { flex-wrap: wrap; } .ref-inner .flex-col { flex-direction: column; } .ref-inner .flex-shrink-0 { flex-shrink: 0; } /* ── Referenzen-Sektion: Alignment ── */ .ref-inner .items-center { align-items: center; } .ref-inner .items-end { align-items: flex-end; } .ref-inner .justify-between { justify-content: space-between; } /* ── Referenzen-Sektion: Gap ── */ .ref-inner .gap-3 { gap: 0.75rem; } .ref-inner .gap-4 { gap: 1rem; } .ref-inner .gap-5 { gap: 1.25rem; } .ref-inner .gap-8 { gap: 2rem; } /* ── Referenzen-Sektion: Margin ── */ .ref-inner .mb-6 { margin-bottom: 1.5rem; } .ref-inner .mb-16 { margin-bottom: 4rem; } .ref-inner .mt-5 { margin-top: 1.25rem; } /* ── Referenzen-Sektion: Sizing ── */ .ref-inner .w-px { width: 1px; } .ref-inner .h-10 { height: 2.5rem; } .ref-inner .w-fit { width: fit-content; } /* ── Referenzen-Sektion: Grid ── */ .ref-inner .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } /* ── Referenzen-Sektion: Typography ── */ .ref-inner .uppercase { text-transform: uppercase; } .ref-inner .leading-none { line-height: 1; } /* ── Referenzen-Sektion: Responsive (site breakpoints: md=900px, lg=1200px) ── */ @media (min-width: 900px) { .ref-inner .md\:flex-row { flex-direction: row; } .ref-inner .md\:w-\[55\%\] { width: 55%; } } @media (min-width: 1200px) { .ref-inner .lg\:grid-cols-\[57\%_1fr\] { grid-template-columns: 57% 1fr; } }