/* =====================================================
hn-clean — Gebäude- und Glasreinigung GmbH
Stylesheet V3 REFRESH — Reinigungs-Profi
Porzellan / Navy / Aqua / Messing
Ref: DESIGN-SYSTEM-V3.md
===================================================== */
/* =====================================================
1. TOKENS — V3 Porzellan/Navy/Aqua/Messing
===================================================== */
:root {
/* ---- Backgrounds ---- */
--porcelain: #F7F9FB;
--porcelain-2: #F1F5F9;
--mist: #E9EEF3;
--white: #FFFFFF;
/* Legacy-Aliasse (werden sukzessive ausgetauscht) */
--paper: #F7F9FB;
--paper-warm: #F1F5F9;
--sand: #E8F4FA;
--sand-deep: #D6ECF5;
/* ---- Anchor / Text Navy ---- */
--navy: #0F2A44;
--navy-2: #0A1F33;
--navy-3: #05131F;
--navy-85: rgba(15, 42, 68, 0.85);
--navy-70: rgba(15, 42, 68, 0.70);
--navy-50: rgba(15, 42, 68, 0.50);
--navy-30: rgba(15, 42, 68, 0.30);
--navy-15: rgba(15, 42, 68, 0.15);
--navy-08: rgba(15, 42, 68, 0.08);
--navy-04: rgba(15, 42, 68, 0.04);
/* Legacy-Aliasse — mappen auf Navy */
--graphite: #0F2A44;
--graphite-85: rgba(15, 42, 68, 0.85);
--graphite-70: rgba(15, 42, 68, 0.70);
--graphite-50: rgba(15, 42, 68, 0.50);
--graphite-20: rgba(15, 42, 68, 0.18);
--graphite-12: rgba(15, 42, 68, 0.08);
/* ---- Aqua (Primaer-Akzent) ---- */
--aqua: #4FB6D8;
--aqua-deep: #2E96B8;
--aqua-dim: rgba(79, 182, 216, 0.55);
--aqua-soft: #E8F4FA;
--aqua-wash: #D6ECF5;
--aqua-ghost: rgba(79, 182, 216, 0.12);
--aqua-glow: rgba(79, 182, 216, 0.35);
/* ---- Messing (punktuell, max 3 Spots) ---- */
--brass: #E8A93B;
--brass-deep: #C68C22;
--brass-soft: #FBF2DC;
--brass-ghost: rgba(232, 169, 59, 0.14);
--brass-border: rgba(232, 169, 59, 0.55);
/* Legacy Bronze-Aliasse → Aqua für Hover-States, Brass nur wo emotional */
--bronze: #2E96B8; /* war Messing, ist jetzt Aqua-Deep als Hover-Accent */
--bronze-hover: #3A9AB8;
--bronze-deep: #1F7A9A;
--bronze-dim: rgba(79, 182, 216, 0.35);
--bronze-soft: rgba(79, 182, 216, 0.18);
--bronze-ghost: rgba(79, 182, 216, 0.08);
--bronze-wash: #E8F4FA;
--bronze-border: rgba(79, 182, 216, 0.45);
--clay: #E8A93B; /* war Rotton, ist jetzt Messing für Akzente */
/* ---- Text-Stufen ---- */
--text: #0F2A44;
--text-muted: #6B7A8C;
--text-dim: #9AA5B2;
--text-on-dark: #F7F9FB;
--text-on-dark-mut: rgba(247, 249, 251, 0.68);
/* ---- Borders / Hairlines ---- */
--border: #E9EEF3;
--border-dim: rgba(15, 42, 68, 0.08);
--border-strong: rgba(15, 42, 68, 0.18);
--border-on-dark: rgba(247, 249, 251, 0.12);
--hairline: #4FB6D8;
--hairline-soft: rgba(15, 42, 68, 0.12);
--hairline-aqua: rgba(79, 182, 216, 0.45);
/* ---- Status ---- */
--success: #2FA36D;
--success-soft: #E3F3EB;
--warning: #E8A93B;
--error: #C24B4B;
--error-soft: #F7E5E5;
/* ---- Focus ---- */
--focus-ring: #4FB6D8;
--focus-ring-dark: #E8F4FA;
/* ---- Typografie ---- */
--font-headline: "Fraunces", "Fraunces Placeholder", Georgia, "Times New Roman", serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--ff-tabular: "tnum" 1, "lnum" 1, "kern" 1;
--ff-proportional: "pnum" 1, "lnum" 1, "kern" 1, "liga" 1;
/* ---- Fluid Sizes ---- */
--fs-display: clamp(3.5rem, 7.2vw, 6.5rem);
--fs-h1-hero: clamp(3rem, 6.4vw, 5.75rem);
--fs-h1-sub: clamp(2.6rem, 5vw, 4.75rem);
--fs-h1: clamp(2.5rem, 5vw, 4.5rem);
--fs-h2: clamp(2rem, 3.8vw, 3.5rem);
--fs-h3: clamp(1.375rem, 1.9vw, 1.75rem);
--fs-h4: clamp(1.125rem, 1.25vw, 1.25rem);
--fs-number: clamp(2rem, 3.2vw, 3rem);
--fs-stat: clamp(3rem, 5.4vw, 5rem);
--fs-counter: clamp(1.5rem, 2.4vw, 2.25rem);
--fs-eyebrow: 12px;
--fs-body-lead: clamp(1.125rem, 1.25vw, 1.25rem);
--fs-body-lg: 19px;
--fs-body: 17px;
--fs-body-sm: 15px;
--fs-caption: 13px;
--fs-label: 12px;
--fs-tag: 11px;
--fs-button: 15px;
--fs-nav: 15px;
--fs-quote: clamp(1.3rem, 1.7vw, 1.6rem);
--fs-etikett: 11px;
/* ---- Line-Heights ---- */
--lh-display: 1.02;
--lh-hero: 1.05;
--lh-tight: 1.00;
--lh-heading: 1.15;
--lh-sub: 1.35;
--lh-body: 1.65;
--lh-lead: 1.5;
--lh-compact: 1.35;
--lh-flat: 1.0;
/* ---- Letter-Spacing ---- */
--ls-display: -0.025em;
--ls-hero: -0.02em;
--ls-heading: -0.015em;
--ls-sub: -0.01em;
--ls-tight: -0.005em;
--ls-normal: 0;
--ls-body: 0;
--ls-meta: 0.04em;
--ls-button: 0.01em;
--ls-tag: 0.08em;
--ls-label: 0.1em;
--ls-eyebrow: 0.14em;
--ls-etikett: 0.22em;
/* ---- Spacing ---- */
--s-0: 0;
--s-1: 4px;
--s-2: 8px;
--s-3: 16px;
--s-4: 24px;
--s-5: 32px;
--s-6: 40px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 120px;
--s-11: clamp(72px, 7vw, 112px);
--s-12: clamp(64px, 6vw, 104px);
--s-13: 128px;
--section-py: clamp(72px, 7vw, 112px);
--section-py-tight: clamp(56px, 5vw, 80px);
--section-py-mobile: 72px;
/* ---- Layout ---- */
--max-w: 1320px;
--max-w-reading: 760px;
--max-w-narrow: 960px;
--container-max: 1320px;
--grid-gap: 32px;
--grid-gap-desktop: 32px;
--grid-gap-tablet: 24px;
--grid-gap-mobile: 16px;
--page-px-desktop: clamp(32px, 4vw, 64px);
--page-px-tablet: 32px;
--page-px-mobile: 20px;
--nav-h: 80px;
--nav-h-top: 80px;
--nav-h-scrolled: 60px;
--nav-blur: saturate(180%) blur(14px);
/* ---- Radius ---- */
--r-sharp: 2px;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--r-xl: 24px;
--r-pill: 999px;
--radius-sharp: 2px;
--radius-photo: 12px;
--radius-pill: 999px;
/* ---- Shadow-System (Navy-based) ---- */
--shadow-hairline: 0 0 0 1px rgba(15, 42, 68, 0.06);
--shadow-card: 0 1px 2px rgba(15, 42, 68, 0.04),
0 8px 24px rgba(15, 42, 68, 0.06);
--shadow-lift: 0 2px 4px rgba(15, 42, 68, 0.06),
0 16px 48px rgba(15, 42, 68, 0.12);
--shadow-pop: 0 4px 8px rgba(15, 42, 68, 0.08),
0 24px 64px rgba(15, 42, 68, 0.18);
--shadow-nav: 0 1px 0 rgba(15, 42, 68, 0.06),
0 8px 24px rgba(15, 42, 68, 0.04);
--shadow-on-dark: 0 0 48px rgba(79, 182, 216, 0.15);
--shadow-on-dark-lift:0 0 64px rgba(79, 182, 216, 0.22);
--shadow-focus: 0 0 0 3px rgba(79, 182, 216, 0.35);
/* ---- Eases ---- */
--ease-out-1: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out-2: cubic-bezier(0.25, 1, 0.5, 1);
--ease-out-3: cubic-bezier(0.165, 0.84, 0.44, 1);
--ease-in-out-1: cubic-bezier(0.65, 0, 0.35, 1);
--ease-in-out-2: cubic-bezier(0.65, 0, 0.35, 1);
--ease-wipe: cubic-bezier(0.77, 0, 0.18, 1);
/* ---- Durations ---- */
--d-micro: 120ms;
--d-fast: 200ms;
--d-default: 300ms;
--d-slow: 500ms;
--d-reveal: 700ms;
--d-wipe: 900ms;
--d-line-hero: 1100ms;
--d-hero-line: 1100ms;
/* ---- Effects ---- */
--grain-opacity: 0.035;
--overlay-navy: rgba(15, 42, 68, 0.55);
--overlay-navy-deep: rgba(10, 31, 51, 0.72);
--overlay-aqua: rgba(79, 182, 216, 0.18);
--backdrop-blur: blur(20px) saturate(160%);
/* ---- Z-Index ---- */
--z-grain: 40;
--z-bubbles: 50;
--z-content: 60;
--z-nav: 100;
--z-float: 110;
--z-wipe: 200;
--z-cursor: 250;
--z-modal: 300;
}
@media (max-width: 767px) {
:root {
--grain-opacity: 0.024;
--s-11: 96px;
--section-py: var(--section-py-mobile);
--grid-gap: var(--grid-gap-mobile);
}
}
/* =====================================================
2. RESET & BASE
===================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--navy);
background: var(--porcelain);
font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "lnum" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
text-rendering: optimizeLegibility;
}
html {
overflow-x: clip;
max-width: 100vw;
}
body {
margin: 0;
min-height: 100vh;
overflow-x: clip;
max-width: 100vw;
background: var(--porcelain);
color: var(--navy);
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
::selection { background: var(--aqua); color: var(--navy); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* =====================================================
3. TYPO-KLASSEN
===================================================== */
.font-head { font-family: var(--font-headline); }
.font-body { font-family: var(--font-body); }
.h1-hero {
font-family: var(--font-headline);
font-weight: 500;
font-size: var(--fs-h1-hero);
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
font-optical-sizing: auto;
font-variation-settings: "opsz" 144, "SOFT" 100;
color: var(--graphite);
word-spacing: -0.04em;
}
.h1-sub {
font-family: var(--font-headline);
font-weight: 500;
font-size: var(--fs-h1-sub);
line-height: 1.04;
letter-spacing: var(--ls-display);
font-optical-sizing: auto;
font-variation-settings: "opsz" 120;
color: var(--graphite);
word-break: keep-all;
overflow-wrap: normal;
hyphens: manual;
}
.h2 {
font-family: var(--font-headline);
font-weight: 500;
font-size: var(--fs-h2);
line-height: var(--lh-display);
letter-spacing: var(--ls-heading);
font-optical-sizing: auto;
font-variation-settings: "opsz" 96;
color: var(--graphite);
}
.h3 {
font-family: var(--font-headline);
font-weight: 400;
font-size: var(--fs-h3);
line-height: var(--lh-heading);
letter-spacing: var(--ls-tight);
font-variation-settings: "opsz" 48;
color: var(--graphite);
}
.h4 {
font-family: var(--font-headline);
font-weight: 500;
font-size: var(--fs-h4);
line-height: 1.22;
font-variation-settings: "opsz" 36;
color: var(--graphite);
}
.eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-eyebrow);
color: var(--aqua-deep);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
line-height: 1;
display: inline-flex;
align-items: center;
gap: var(--s-2);
}
.eyebrow::before {
content: "";
display: inline-block;
width: 24px;
height: 1px;
background: var(--aqua);
vertical-align: middle;
flex-shrink: 0;
}
/* Zentrierte Eyebrow mit doppelter Linie */
.eyebrow--centered {
display: inline-flex;
gap: var(--s-3);
}
.eyebrow--centered::after {
content: "";
display: inline-block;
width: 24px;
height: 1px;
background: var(--aqua);
vertical-align: middle;
flex-shrink: 0;
}
.lead {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-body-lead);
line-height: var(--lh-lead);
color: var(--graphite-85);
max-width: 56ch;
}
.body-text {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--graphite);
max-width: 62ch;
}
.body-sm { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--graphite-70); }
.caption {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--fs-caption);
letter-spacing: var(--ls-meta);
color: var(--graphite-70);
line-height: 1.3;
}
.tag {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-tag);
letter-spacing: var(--ls-tag);
color: var(--aqua-deep);
text-transform: uppercase;
line-height: 1;
}
.onum { font-feature-settings: "onum" 1, "ss01" 1; }
/* Drop-Cap: Erster Buchstabe in wichtigen Abschnitten */
.has-dropcap::first-letter {
font-family: var(--font-headline);
font-weight: 500;
font-size: 3.4em;
line-height: 0.8;
float: left;
margin: 0.12em 0.12em 0 -0.05em;
color: var(--bronze);
font-variation-settings: "opsz" 72;
}
/* Bronze Akzent auf Zahlen/Jahren */
.num-accent {
font-family: var(--font-headline);
font-weight: 500;
color: var(--bronze);
font-feature-settings: "onum" 1, "ss01" 1;
font-variation-settings: "opsz" 72;
}
/* Gradient-Text (Bronze auf Paper, subtil — für Signature-H2) */
.text-gradient {
background: linear-gradient(105deg, var(--graphite) 0%, var(--graphite) 55%, var(--bronze) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* =====================================================
4. SAUBER-LINIE + WISCHSTRICH (Signatur V3)
Wischstrich ersetzt Bronze-Hairline, Farbe Aqua, mit Schaum-Glow.
===================================================== */
.sauber-line {
display: block;
height: 1px;
background: var(--aqua);
}
.sauber-line--hero,
.sauber-line--section {
width: 96px;
transform: scaleX(0);
transform-origin: left center;
}
.sauber-line--section { width: 64px; }
.sauber-line--eyebrow {
width: 24px;
height: 1px;
background: var(--aqua);
display: inline-block;
vertical-align: middle;
flex: 0 0 24px;
}
.page-wipe {
position: fixed;
top: 50%;
left: 0;
width: 100vw;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--aqua) 15%, var(--aqua) 85%, transparent 100%);
transform: scaleX(0);
transform-origin: left center;
z-index: var(--z-wipe);
pointer-events: none;
box-shadow: 0 0 24px rgba(79, 182, 216, 0.4);
}
.section-rule {
height: 1px;
background: var(--aqua);
width: 96px;
transform: scaleX(0);
transform-origin: left center;
margin: var(--s-7) 0;
}
/* --- Wischstrich (Primary Signature V3) --- */
.wischstrich {
position: relative;
width: 100%;
max-width: 320px;
height: 24px;
overflow: visible;
pointer-events: none;
display: block;
}
.wischstrich::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--aqua) 8%,
var(--aqua) 82%,
transparent 100%
);
transform: translateY(-50%) rotate(-0.6deg) scaleX(0);
transform-origin: left center;
transition: transform var(--d-wipe) var(--ease-wipe);
}
.wischstrich::after {
content: "";
position: absolute;
right: 4%;
top: 50%;
width: 40px;
height: 40px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(79, 182, 216, 0.45) 0%,
rgba(79, 182, 216, 0) 70%);
transform: translateY(-50%) scale(0);
transition: transform var(--d-wipe) var(--ease-wipe) 180ms;
filter: blur(2px);
}
.wischstrich.is-in::before,
.wischstrich[data-wisch].is-in::before {
transform: translateY(-50%) rotate(-0.6deg) scaleX(1);
}
.wischstrich.is-in::after,
.wischstrich[data-wisch].is-in::after {
transform: translateY(-50%) scale(1);
}
.wischstrich--hero {
max-width: 80vw;
height: 32px;
}
.wischstrich--hero::before {
height: 2px;
background: linear-gradient(
90deg,
transparent 0%,
var(--aqua) 6%,
var(--aqua) 76%,
var(--aqua-deep) 90%,
transparent 100%
);
box-shadow: 0 0 12px rgba(79, 182, 216, 0.4);
}
.wischstrich--hero::after {
width: 72px; height: 72px;
background: radial-gradient(circle,
rgba(79, 182, 216, 0.55) 0%,
rgba(79, 182, 216, 0.1) 45%,
transparent 75%);
filter: blur(4px);
}
.wischstrich--divider {
max-width: 100%;
height: 16px;
margin: var(--s-6) 0;
}
.wischstrich--divider::before { height: 1px; }
.wischstrich--divider::after {
width: 24px; height: 24px;
right: 8%;
}
.wischstrich--inline {
display: inline-block;
max-width: 72px;
height: 14px;
vertical-align: middle;
margin-right: var(--s-3);
}
.wischstrich--inline::before { height: 1px; background: var(--aqua); }
.wischstrich--inline::after { display: none; }
/* --- MESSING-SIEGEL (Sekundaer-Signature) --- */
.siegel {
position: relative;
width: 72px; height: 72px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%,
#F5C878 0%,
var(--brass) 45%,
var(--brass-deep) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -2px 4px rgba(138, 92, 40, 0.4),
0 4px 12px rgba(15, 42, 68, 0.15);
display: grid;
place-items: center;
font-family: var(--font-body);
font-weight: 700;
font-size: 10px;
line-height: 1.1;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--navy);
text-align: center;
flex-shrink: 0;
}
.siegel::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
border: 1px solid rgba(15, 42, 68, 0.35);
pointer-events: none;
}
.siegel__text {
position: relative;
z-index: 2;
display: block;
}
.siegel__text strong {
display: block;
font-family: var(--font-headline);
font-weight: 500;
font-size: 14px;
letter-spacing: -0.01em;
text-transform: none;
line-height: 1.1;
}
.siegel--sm { width: 44px; height: 44px; font-size: 8px; }
.siegel--sm::before { inset: 4px; }
.siegel--sm .siegel__text strong { font-size: 11px; }
.siegel--lg { width: 112px; height: 112px; font-size: 11px; }
.siegel--lg::before { inset: 8px; }
.siegel--lg .siegel__text strong { font-size: 18px; }
/* --- BUBBLES (Hero-Drift) --- */
.bubbles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: var(--z-bubbles);
overflow: hidden;
}
.bubble {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%,
rgba(255, 255, 255, 0.6),
rgba(255, 255, 255, 0.08) 60%,
transparent 100%);
filter: blur(1px);
opacity: 0;
will-change: transform, opacity;
animation: bubble-drift 16s ease-in-out infinite;
}
.bubble:nth-child(1) { width: 14px; height: 14px; left: 12%; bottom: -24px; animation-duration: 13s; animation-delay: 0s; }
.bubble:nth-child(2) { width: 22px; height: 22px; left: 28%; bottom: -48px; animation-duration: 17s; animation-delay: 2.2s; }
.bubble:nth-child(3) { width: 10px; height: 10px; left: 42%; bottom: -18px; animation-duration: 12s; animation-delay: 4.4s; }
.bubble:nth-child(4) { width: 18px; height: 18px; left: 64%; bottom: -30px; animation-duration: 19s; animation-delay: 1.1s; }
.bubble:nth-child(5) { width: 8px; height: 8px; left: 78%; bottom: -16px; animation-duration: 14s; animation-delay: 3.3s; }
.bubble:nth-child(6) { width: 26px; height: 26px; left: 86%; bottom: -52px; animation-duration: 21s; animation-delay: 5.5s; }
@keyframes bubble-drift {
0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
10% { opacity: 0.6; }
50% { opacity: 0.55; transform: translate3d(8px, -320px, 0) scale(1); }
90% { opacity: 0.15; }
100% { opacity: 0; transform: translate3d(-12px, -620px, 0) scale(0.8); }
}
/* --- BG-Section Klassen --- */
.bg-porcelain { background: var(--porcelain); color: var(--navy); }
.bg-white { background: var(--white); color: var(--navy); }
.bg-mist { background: var(--mist); color: var(--navy); }
.bg-aqua-soft { background: var(--aqua-soft); color: var(--navy); }
.bg-aqua-wash { background: var(--aqua-wash); color: var(--navy); }
.bg-navy { background: var(--navy); color: var(--text-on-dark); }
.bg-navy-2 { background: var(--navy-2); color: var(--text-on-dark); }
.bg-brass-soft { background: var(--brass-soft); color: var(--navy); }
.bg-navy .h1, .bg-navy .h2, .bg-navy .h3, .bg-navy .h4,
.bg-navy .h1-hero, .bg-navy .h1-sub, .bg-navy .display,
.bg-navy-2 .h1, .bg-navy-2 .h2, .bg-navy-2 .h3, .bg-navy-2 .h4,
.bg-navy-2 .h1-hero, .bg-navy-2 .h1-sub, .bg-navy-2 .display {
color: var(--text-on-dark);
}
.bg-navy .body-text, .bg-navy p, .bg-navy .lead,
.bg-navy-2 .body-text, .bg-navy-2 p, .bg-navy-2 .lead {
color: var(--text-on-dark);
}
.bg-navy .body-sm, .bg-navy .caption,
.bg-navy-2 .body-sm, .bg-navy-2 .caption {
color: var(--text-on-dark-mut);
}
.bg-navy .eyebrow, .bg-navy-2 .eyebrow { color: var(--aqua); }
.bg-navy .eyebrow::before, .bg-navy-2 .eyebrow::before { background: var(--aqua); }
/* =====================================================
5. FILM GRAIN
===================================================== */
.grain {
position: fixed;
inset: 0;
pointer-events: none;
z-index: var(--z-grain);
opacity: var(--grain-opacity);
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.17 0 0 0 0 0.27 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 400px 400px;
}
/* =====================================================
6. CONTAINER & GRID
===================================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--page-px-desktop);
padding-right: var(--page-px-desktop);
}
@media (max-width: 1199px) {
.container { padding-left: var(--page-px-tablet); padding-right: var(--page-px-tablet); }
}
@media (max-width: 767px) {
.container { padding-left: var(--page-px-mobile); padding-right: var(--page-px-mobile); }
}
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap-desktop);
}
@media (max-width: 1199px) { .grid-12 { gap: var(--grid-gap-tablet); } }
@media (max-width: 767px) { .grid-12 { grid-template-columns: 1fr; gap: var(--grid-gap-mobile); } }
/* Section-Rhythmus — deutlich größer */
section {
padding-top: var(--s-11);
padding-bottom: var(--s-11);
}
/* Section Heads */
.section-head {
margin-bottom: var(--s-7);
display: flex;
flex-direction: column;
gap: var(--s-3);
align-items: flex-start;
}
.section-head .eyebrow { margin-bottom: var(--s-1); }
.section-head .h2 { margin-top: 0; max-width: 22ch; }
.section-head .sauber-line--section { margin-top: var(--s-1); }
.section-head .lead { margin-top: var(--s-3); }
.section-head--center {
align-items: center;
text-align: center;
}
.section-head--center .h2,
.section-head--center .lead { max-width: 32ch; }
/* Section-Head Split (Headline links, Lead rechts) */
.section-head--split {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap-desktop);
margin-bottom: var(--s-7);
align-items: end;
}
.section-head--split .head-left { grid-column: 1 / span 7; }
.section-head--split .head-right { grid-column: 9 / span 4; }
.section-head--split .head-left .eyebrow { margin-bottom: var(--s-4); }
.section-head--split .head-left .sauber-line--section { margin-top: var(--s-4); }
.section-head--split .head-right { padding-bottom: 8px; }
@media (max-width: 1199px) {
.section-head--split { grid-template-columns: 1fr; gap: var(--s-6); }
.section-head--split .head-left,
.section-head--split .head-right { grid-column: 1 / -1; }
}
/* =====================================================
7. NAV
===================================================== */
.nav {
position: sticky;
top: 0;
z-index: var(--z-nav);
padding: 20px var(--page-px-desktop);
background: rgba(247, 249, 251, 0.88);
backdrop-filter: var(--nav-blur);
-webkit-backdrop-filter: var(--nav-blur);
border-bottom: 1px solid transparent;
transition: padding var(--d-default) var(--ease-in-out-2),
border-color var(--d-default) var(--ease-in-out-2),
background-color var(--d-default) var(--ease-in-out-2),
box-shadow var(--d-default) var(--ease-in-out-2);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-5);
max-width: var(--container-max);
margin: 0 auto;
}
.nav-logo {
font-family: var(--font-headline);
font-weight: 500;
font-size: 24px;
letter-spacing: -0.015em;
color: var(--graphite);
line-height: 1;
display: inline-flex;
align-items: center;
transition: font-size var(--d-default) var(--ease-in-out-2);
font-variation-settings: "opsz" 48;
}
.logo-dot {
display: inline-block;
width: 6px; height: 6px;
background: var(--aqua);
border-radius: 50%;
margin-left: 6px;
margin-bottom: 2px;
box-shadow: 0 0 8px rgba(79, 182, 216, 0.55);
}
.nav.is-scrolled {
padding: 10px var(--page-px-desktop);
border-bottom-color: var(--border-dim);
background: rgba(247, 249, 251, 0.94);
box-shadow: var(--shadow-nav);
}
.nav.is-scrolled .nav-logo { font-size: 20px; }
.nav-links {
display: flex;
gap: var(--s-6);
align-items: center;
}
.nav-link {
position: relative;
font-size: var(--fs-nav);
font-weight: 500;
letter-spacing: 0.01em;
color: var(--graphite);
padding-bottom: 6px;
line-height: 1;
transition: color var(--d-fast) var(--ease-out-2);
}
.nav-link::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--bronze);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--d-default) var(--ease-out-2);
}
.nav-link:hover { color: var(--bronze); }
.nav-link:hover::after,
.nav-link.is-current::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-cta {
display: flex;
align-items: center;
gap: var(--s-4);
}
.nav-tel {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-size: 14px;
font-weight: 500;
color: var(--graphite);
line-height: 1;
transition: color var(--d-fast);
}
.nav-tel:hover { color: var(--bronze); }
.nav-tel-icon { color: var(--bronze); font-size: 12px; }
.nav-btn {
padding: 12px 22px;
font-size: 14px;
}
.nav-burger {
display: none;
width: 28px; height: 18px;
flex-direction: column;
justify-content: space-between;
padding: 0;
}
.nav-burger span {
display: block;
height: 1.5px;
width: 100%;
background: var(--graphite);
transition: transform var(--d-default) var(--ease-out-2), opacity var(--d-fast);
}
@media (max-width: 1023px) {
.nav-links { display: none; }
.nav-cta .nav-btn { display: none; }
.nav-burger { display: flex; }
}
@media (max-width: 767px) {
.nav-cta .nav-tel { display: none; }
}
/* Mobile Nav Overlay */
.nav-mobile-overlay {
position: fixed;
inset: 0;
z-index: calc(var(--z-nav) + 1);
background: var(--paper);
display: none;
flex-direction: column;
padding: 96px var(--page-px-mobile) 48px;
}
.nav-mobile-overlay.is-open { display: flex; }
.nav-mobile-close {
position: absolute;
top: 24px; right: var(--page-px-mobile);
width: 32px; height: 32px;
color: var(--graphite);
font-size: 28px;
font-family: var(--font-headline);
line-height: 1;
}
.nav-mobile-inner {
display: flex;
flex-direction: column;
gap: var(--s-4);
margin-top: var(--s-6);
padding-top: var(--s-5);
border-top: 1px solid var(--bronze);
}
.nav-mobile-link {
font-family: var(--font-headline);
font-weight: 400;
font-size: 32px;
color: var(--graphite);
line-height: 1.1;
font-variation-settings: "opsz" 48;
}
.nav-mobile-link:hover { color: var(--bronze); }
.nav-mobile-tel {
margin-top: auto;
font-family: var(--font-headline);
font-size: 22px;
color: var(--bronze);
font-variation-settings: "opsz" 48;
padding-top: var(--s-6);
border-top: 1px solid var(--hairline-soft);
}
/* =====================================================
8. BUTTONS — V3 Navy + Aqua Slide
===================================================== */
.btn,
.btn-primary,
.btn-ghost,
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-button);
letter-spacing: var(--ls-button);
line-height: 1;
border-radius: var(--r-pill);
padding: 14px 28px;
cursor: pointer;
text-align: center;
transition: background var(--d-default) var(--ease-out-2),
border-color var(--d-default) var(--ease-out-2),
color var(--d-default) var(--ease-out-2),
transform var(--d-fast) var(--ease-out-2),
box-shadow var(--d-default) var(--ease-out-2);
border: 1.5px solid transparent;
position: relative;
overflow: hidden;
isolation: isolate;
white-space: nowrap;
}
/* PRIMARY — Navy base, Aqua slide-in on hover */
.btn-primary {
background: var(--navy);
color: var(--white);
border-color: var(--navy);
}
.btn-primary::before {
content: "";
position: absolute;
inset: 0;
background: var(--aqua);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--d-default) var(--ease-out-2);
z-index: -1;
}
.btn-primary:hover {
color: var(--navy);
border-color: var(--aqua);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(79, 182, 216, 0.28);
}
.btn-primary:hover::before { transform: scaleX(1); }
.btn-primary:active { transform: translateY(0); background: var(--aqua-deep); }
.btn-primary:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
/* SECONDARY — Transparent, Navy border, fills on hover */
.btn-secondary {
background: transparent;
color: var(--navy);
border: 1.5px solid var(--navy);
}
.btn-secondary:hover {
background: var(--navy);
color: var(--white);
}
/* GHOST — Text + Border (historic ghost-look, jetzt Aqua-Border) */
.btn-ghost {
background: transparent;
color: var(--navy);
border: 1.5px solid var(--navy);
}
.btn-ghost:hover {
background: var(--aqua-soft);
border-color: var(--aqua);
color: var(--navy);
}
.btn-ghost:active { background: var(--aqua-wash); transform: translateY(1px); }
/* CTA XL — für Final-CTA Section */
.btn-cta-xl {
padding: 18px 40px;
font-size: 17px;
}
/* On bg-navy */
.bg-navy .btn-primary,
.bg-navy-2 .btn-primary {
background: var(--aqua);
color: var(--navy);
border-color: var(--aqua);
}
.bg-navy .btn-primary::before,
.bg-navy-2 .btn-primary::before { background: var(--white); }
.bg-navy .btn-primary:hover,
.bg-navy-2 .btn-primary:hover { color: var(--navy); border-color: var(--white); }
.bg-navy .btn-secondary,
.bg-navy-2 .btn-secondary,
.bg-navy .btn-ghost,
.bg-navy-2 .btn-ghost {
color: var(--white);
border-color: var(--text-on-dark);
}
.bg-navy .btn-ghost:hover,
.bg-navy-2 .btn-ghost:hover {
background: var(--aqua);
color: var(--navy);
border-color: var(--aqua);
}
@media (max-width: 767px) {
.btn-primary, .btn-ghost, .btn-secondary { padding: 13px 22px; font-size: 14px; }
}
/* =====================================================
9. TEXT LINKS
===================================================== */
.text-link {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-weight: 500;
font-size: var(--fs-body-sm);
color: var(--navy);
line-height: 1;
position: relative;
padding-bottom: 3px;
transition: color var(--d-fast);
}
.text-link::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--aqua);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--d-default) var(--ease-out-2);
}
.text-link:hover { color: var(--aqua-deep); }
.text-link:hover::after { transform: scaleX(1); }
.text-link span[aria-hidden],
.text-link .arrow {
display: inline-block;
color: var(--aqua);
transition: transform var(--d-default) var(--ease-out-2);
}
.text-link:hover span[aria-hidden],
.text-link:hover .arrow { transform: translateX(4px); }
.text-link--cta { font-weight: 600; color: var(--aqua-deep); }
.text-link--cta::after { transform: scaleX(1); }
/* On dark */
.bg-navy .text-link,
.bg-navy-2 .text-link { color: var(--text-on-dark); }
.bg-navy .text-link::after,
.bg-navy-2 .text-link::after { background: var(--aqua); }
.bg-navy .text-link:hover,
.bg-navy-2 .text-link:hover { color: var(--aqua); }
/* =====================================================
10. PHOTO-FRAMES V3 — Navy Hairline + subtle Shadow
(alte Placeholder-Frame-Klasse neutralisiert — zeigt jetzt nur echte Bilder)
===================================================== */
.placeholder-frame {
position: relative;
border-radius: var(--radius-photo);
overflow: hidden;
border: 1px solid var(--border-dim);
background: var(--mist);
isolation: isolate;
box-shadow: var(--shadow-card);
}
.placeholder-frame > img {
width: 100%; height: 100%; object-fit: cover;
display: block;
}
.placeholder-frame .placeholder-inner,
.placeholder-frame .placeholder-mono,
.placeholder-frame .placeholder-caption,
.placeholder-frame .placeholder-name,
.placeholder-frame .placeholder-note {
display: none !important;
}
/* Photo-Frame Variante neu — echte Bilder */
.photo-frame {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--mist);
box-shadow: var(--shadow-card);
isolation: isolate;
}
.photo-frame img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 800ms var(--ease-out-3);
}
.photo-frame:hover img { transform: scale(1.03); }
.photo-frame--sm { border-radius: var(--r-md); }
.photo-frame--lg { border-radius: var(--r-xl); }
/* Aqua-Hairline-Rand rechts außen für Signature-Framing (auf Wunsch) */
.photo-frame--signature::after {
content: "";
position: absolute;
top: 8%; bottom: 8%; right: -1px;
width: 2px;
background: var(--aqua);
z-index: 4;
opacity: 0.9;
}
/* Bild-Etikett (Homburg · 2026) — Navy/Brass-Signet */
.foto-etikett,
.hero-etikett {
position: absolute;
bottom: 16px; right: 16px;
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-etikett);
color: var(--white);
background: rgba(15, 42, 68, 0.88);
padding: 8px 14px;
border-radius: var(--r-pill);
text-transform: uppercase;
letter-spacing: var(--ls-etikett);
line-height: 1;
z-index: 5;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(79, 182, 216, 0.35);
}
@media (max-width: 767px) {
.foto-etikett, .hero-etikett {
font-size: 10px; padding: 6px 10px;
bottom: 12px; right: 12px;
}
}
/* Bild-Caption (Buchlayout-Stil unter Foto) */
.foto-caption {
font-family: var(--font-headline);
font-style: italic;
font-weight: 400;
font-size: 13px;
color: var(--graphite-70);
line-height: 1.5;
margin-top: var(--s-3);
font-variation-settings: "opsz" 14;
}
/* =====================================================
11. HERO V3 — Full-width Background Image + Navy Tint + Wischstrich + Bubbles
===================================================== */
.hero {
padding-top: clamp(96px, 12vw, 160px);
padding-bottom: var(--s-10);
position: relative;
min-height: auto;
overflow: hidden;
background: var(--porcelain);
}
/* Optional V3 Hero (full-bleed) */
.hero--v3 {
padding-top: 0;
padding-bottom: 0;
min-height: 92vh;
display: flex;
align-items: center;
color: var(--white);
isolation: isolate;
}
.hero--v3 .hero-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero--v3 .hero-bg img {
width: 100%; height: 100%;
object-fit: cover;
object-position: right center;
transform: scale(1.05);
}
.hero--v3 .hero-bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(15, 42, 68, 0.78) 0%, rgba(15, 42, 68, 0.55) 45%, rgba(15, 42, 68, 0.35) 100%),
linear-gradient(180deg, rgba(15, 42, 68, 0.2) 0%, rgba(15, 42, 68, 0.4) 100%);
pointer-events: none;
}
.hero--v3 .container { position: relative; z-index: 2; }
.hero--v3 .h1-hero,
.hero--v3 .hero-eyebrow,
.hero--v3 .hero-lead,
.hero--v3 .hero-trust-bar span { color: var(--white); }
.hero--v3 .hero-eyebrow { color: var(--aqua); }
.hero--v3 .hero-eyebrow::before { background: var(--aqua); }
.hero--v3 .hero-lead { color: rgba(247, 249, 251, 0.88); }
.hero--v3 .hero-trust-bar { border-top-color: rgba(247, 249, 251, 0.15); }
.hero--v3 .hero-trust-bar span { color: rgba(247, 249, 251, 0.82); }
.hero--v3 .hero-trust-bar span.dot { background: var(--aqua); }
.hero--v3 .btn-primary {
background: var(--aqua);
color: var(--navy);
border-color: var(--aqua);
}
.hero--v3 .btn-primary::before { background: var(--white); }
.hero--v3 .btn-primary:hover { color: var(--navy); border-color: var(--white); }
.hero--v3 .btn-ghost {
background: transparent;
color: var(--white);
border-color: rgba(247, 249, 251, 0.6);
}
.hero--v3 .btn-ghost:hover {
background: var(--aqua);
color: var(--navy);
border-color: var(--aqua);
}
.hero--v3 .siegel {
position: absolute;
top: 112px;
right: clamp(32px, 5vw, 96px);
z-index: 3;
}
.hero-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap-desktop);
align-items: center;
position: relative;
z-index: 2;
}
.hero-text {
grid-column: 1 / span 7;
position: relative;
}
.hero--v3 .hero-text {
grid-column: 1 / span 7;
padding: 120px 0 80px;
}
.hero-foto-wrap {
grid-column: 9 / span 4;
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--r-lg);
overflow: hidden;
border: none;
box-shadow: var(--shadow-lift);
background: var(--mist);
}
.hero-foto-wrap.placeholder-frame { overflow: hidden; border: none; background: var(--mist); }
.hero-foto-wrap img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 32%;
}
/* Hide placeholder-frame only if it has NO img child */
.hero-foto-wrap::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(160deg, rgba(79, 182, 216, 0) 55%, rgba(79, 182, 216, 0.18) 100%);
z-index: 2;
}
.hero-eyebrow { margin-bottom: var(--s-6); }
.hero .h1-hero { margin-bottom: var(--s-5); }
.hero .sauber-line--hero,
.hero .wischstrich--hero { margin-bottom: var(--s-6); }
.hero-lead { margin-bottom: var(--s-7); max-width: 52ch; }
.hero-ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero-trust-bar {
display: flex;
justify-content: flex-start;
align-items: center;
gap: var(--s-7);
margin-top: var(--s-10);
padding-top: var(--s-6);
border-top: 1px solid var(--border-dim);
flex-wrap: wrap;
}
.hero-trust-bar span {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
letter-spacing: var(--ls-meta);
line-height: 1;
display: inline-flex;
align-items: center;
gap: var(--s-4);
}
.hero-trust-bar span.dot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--aqua);
gap: 0;
flex-shrink: 0;
}
@media (max-width: 1199px) {
.hero-text { grid-column: 1 / span 6; }
.hero-foto-wrap { grid-column: 7 / span 6; }
.hero--v3 .hero-text { grid-column: 1 / span 10; }
}
@media (max-width: 767px) {
.hero { padding-top: var(--s-7); }
.hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
.hero-text, .hero-foto-wrap { grid-column: 1 / -1; }
.hero-foto-wrap { aspect-ratio: 4 / 5; max-width: 420px; }
.hero--v3 { min-height: 82vh; }
.hero--v3 .hero-text { padding: 80px 0 40px; grid-column: 1 / -1; }
.hero--v3 .siegel { top: 80px; right: 20px; }
.hero-trust-bar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
margin-top: var(--s-8);
}
.hero-trust-bar span.dot { display: none; }
.hero-trust-bar span { gap: 0; }
}
/* =====================================================
12. ZIELGRUPPEN GRID V3 — Cards with Images
===================================================== */
.zielgruppen-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-6) var(--grid-gap-desktop);
}
.zielgruppen-card {
padding: var(--s-6) var(--s-5) var(--s-5);
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-3);
transition: transform var(--d-default) var(--ease-out-2),
box-shadow var(--d-default) var(--ease-out-2),
border-color var(--d-default) var(--ease-out-2);
overflow: hidden;
isolation: isolate;
}
.zielgruppen-card::before {
/* Hover accent bar top */
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--aqua);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--d-default) var(--ease-out-2);
}
.zielgruppen-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lift);
border-color: var(--aqua);
}
.zielgruppen-card:hover::before { transform: scaleX(1); }
.zielgruppen-card__media {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--r-md);
overflow: hidden;
margin-bottom: var(--s-4);
background: var(--mist);
}
.zielgruppen-card__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 800ms var(--ease-out-3);
}
.zielgruppen-card:hover .zielgruppen-card__media img { transform: scale(1.05); }
.zielgruppen-card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 42, 68, 0) 55%, rgba(15, 42, 68, 0.35) 100%);
pointer-events: none;
}
.zielgruppen-card .card-num,
.zielgruppen-card .caption {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
color: var(--navy);
letter-spacing: 0.1em;
font-feature-settings: "tnum" 1, "lnum" 1;
line-height: 1;
text-transform: uppercase;
}
.zielgruppen-card .h3 { margin-top: var(--s-1); color: var(--navy); }
.zielgruppen-card .body-text {
color: var(--text-muted);
max-width: 44ch;
margin-bottom: var(--s-3);
}
.zielgruppen-card .text-link { margin-top: auto; }
/* Optional asymmetry (disabled by default in V3) */
.zielgruppen-grid--asymmetric .zielgruppen-card:nth-child(1),
.zielgruppen-grid--asymmetric .zielgruppen-card:nth-child(4) { transform: translateY(-40px); }
@media (max-width: 1199px) {
.zielgruppen-grid--asymmetric .zielgruppen-card:nth-child(1),
.zielgruppen-grid--asymmetric .zielgruppen-card:nth-child(4) { transform: translateY(-20px); }
}
@media (max-width: 767px) {
.zielgruppen-grid { grid-template-columns: 1fr; gap: var(--s-5); }
.zielgruppen-grid--asymmetric .zielgruppen-card:nth-child(1),
.zielgruppen-grid--asymmetric .zielgruppen-card:nth-child(4) { transform: translateY(0); }
}
/* =====================================================
13. LEISTUNGEN GRID V3 — White Cards, Navy Border-Bottom
===================================================== */
.leistungen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--grid-gap-desktop);
}
.leistung-card {
background: var(--white);
border: 1px solid var(--border);
border-bottom: 2px solid var(--navy);
border-radius: var(--r-lg);
padding: var(--s-6) var(--s-5);
min-height: 380px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
transition: transform var(--d-default) var(--ease-out-2),
box-shadow var(--d-default) var(--ease-out-2),
border-bottom-color var(--d-default) var(--ease-out-2);
box-shadow: var(--shadow-card);
}
.leistung-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
border-bottom-color: var(--aqua);
}
.leistung-card > * { position: relative; z-index: 1; }
.leistung-card__media {
aspect-ratio: 16 / 10;
margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-5)) var(--s-5);
border-radius: 0;
overflow: hidden;
background: var(--mist);
position: relative;
}
.leistung-card__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 800ms var(--ease-out-3);
}
.leistung-card:hover .leistung-card__media img { transform: scale(1.05); }
.leistung-card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 42, 68, 0) 50%, rgba(15, 42, 68, 0.25) 100%);
pointer-events: none;
}
.leistung-card .card-num,
.leistung-card .caption {
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
color: var(--navy);
line-height: 1;
font-feature-settings: "tnum" 1, "lnum" 1;
margin-bottom: var(--s-3);
text-transform: uppercase;
letter-spacing: 0.14em;
display: inline-block;
}
.leistung-card .tag { margin-bottom: var(--s-2); color: var(--aqua-deep); }
.leistung-card .h3 {
margin-bottom: var(--s-3);
transition: color var(--d-default) var(--ease-out-2);
}
.leistung-card:hover .h3 { color: var(--aqua-deep); }
.leistung-card .body-text {
color: var(--text-muted);
margin-bottom: var(--s-5);
flex: 1;
}
.leistung-card .text-link { margin-top: auto; }
.leistung-card--wide { grid-column: span 3; }
.section-cta,
.leistungen-cta-row {
margin-top: var(--s-9);
display: flex;
justify-content: center;
}
@media (max-width: 1199px) {
.leistungen-grid { grid-template-columns: 1fr 1fr; }
.leistung-card--wide { grid-column: span 2; }
}
@media (max-width: 767px) {
.leistungen-grid { grid-template-columns: 1fr; }
.leistung-card { padding: var(--s-5) var(--s-4); min-height: 320px; }
.leistung-card__media {
margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-4)) var(--s-4);
}
.leistung-card--wide { grid-column: span 1; }
.section-cta { justify-content: flex-start; }
}
/* =====================================================
13b. LEISTUNGEN — Magazin-Bänder Variante
===================================================== */
.leistungen--bands { padding-bottom: var(--s-9); }
.leistung-bands {
margin-top: var(--s-8);
display: flex;
flex-direction: column;
}
.leistung-band {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 480px;
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
}
.leistung-band__img {
overflow: hidden;
position: relative;
background: var(--navy-08);
}
.leistung-band__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 6s ease;
}
.leistung-band:hover .leistung-band__img img { transform: scale(1.05); }
.leistung-band__text {
padding: clamp(40px, 5vw, 80px);
display: flex;
flex-direction: column;
justify-content: center;
background: var(--paper);
}
/* Zickzack: ungerade — Bild links, Text rechts; gerade — Text links, Bild rechts */
.leistung-band:nth-child(even) .leistung-band__img { order: 2; }
.leistung-band:nth-child(even) .leistung-band__text { order: 1; }
/* Gerade Bänder dunkel — abwechselnde Stimmung */
.leistung-band:nth-child(even) .leistung-band__text {
background: var(--navy);
color: #fff;
}
.leistung-band:nth-child(even) .leistung-band__num { color: var(--aqua); }
.leistung-band:nth-child(even) p { color: rgba(255, 255, 255, 0.78); }
.leistung-band:nth-child(even) .leistung-band__meta { color: rgba(255, 255, 255, 0.55); }
.leistung-band:nth-child(even) .text-link { color: var(--aqua); }
.leistung-band:nth-child(even):hover h3 { color: var(--aqua); }
.leistung-band__num {
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--aqua-deep);
margin-bottom: var(--s-3);
display: inline-flex;
align-items: center;
gap: 12px;
font-feature-settings: "tnum";
}
.leistung-band__num::before {
content: "";
width: 24px;
height: 1px;
background: currentColor;
}
.leistung-band h3 {
font-family: var(--font-headline);
font-size: clamp(32px, 3.6vw, 48px);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.05;
margin-bottom: var(--s-3);
transition: color 0.3s ease;
}
.leistung-band:hover h3 { color: var(--aqua-deep); }
.leistung-band p {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.7;
max-width: 42ch;
color: var(--navy-70);
margin-bottom: var(--s-4);
}
.leistung-band__meta {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--navy-50);
margin-bottom: var(--s-5);
}
.leistung-band .text-link {
margin-top: auto;
align-self: flex-start;
}
@media (max-width: 900px) {
.leistung-band {
grid-template-columns: 1fr;
min-height: 0;
}
.leistung-band__img,
.leistung-band:nth-child(even) .leistung-band__img {
order: 0;
aspect-ratio: 4 / 3;
}
.leistung-band__text,
.leistung-band:nth-child(even) .leistung-band__text {
order: 1;
padding: var(--s-6) var(--s-4);
}
.leistung-band h3 { font-size: clamp(26px, 6vw, 32px); }
}
/* =====================================================
13c. VIDEO PROOF (Vorher-Nachher Phone Frame)
===================================================== */
.video-proof {
background: linear-gradient(180deg, var(--paper) 0%, var(--sand) 100%);
padding: clamp(64px, 6.5vw, 104px) 0;
position: relative;
overflow: hidden;
}
.video-proof::before {
content: "";
position: absolute;
top: -10%; right: -10%;
width: 50%; aspect-ratio: 1;
background: radial-gradient(circle, var(--aqua-ghost) 0%, transparent 60%);
pointer-events: none;
}
.video-proof__layout {
display: grid;
grid-template-columns: 1fr auto;
gap: clamp(40px, 6vw, 100px);
align-items: center;
position: relative;
z-index: 1;
}
.video-proof__text { max-width: 52ch; }
.video-proof__text .h2 { color: var(--navy); }
.video-proof__text .lead { color: var(--navy-70); }
.video-proof__stats {
margin-top: var(--s-7);
padding-top: var(--s-5);
border-top: 1px solid var(--navy-15);
display: flex;
flex-wrap: wrap;
gap: clamp(24px, 4vw, 56px);
}
.video-proof__stat { display: flex; flex-direction: column; gap: 4px; }
.video-proof__stat-num {
font-family: var(--font-headline);
font-size: clamp(28px, 3vw, 36px);
font-weight: 400;
color: var(--aqua-deep);
letter-spacing: -0.01em;
line-height: 1;
}
.video-proof__stat-label {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--navy-50);
}
/* Phone Frame */
.ba-phone {
position: relative;
width: clamp(260px, 28vw, 340px);
aspect-ratio: 9 / 19;
background: #1a1a1a;
border-radius: 38px;
padding: 12px;
box-shadow:
0 0 0 2px #2a2a2a,
0 30px 80px -20px rgba(15,42,68,0.35),
0 0 0 8px rgba(255,255,255,0.6),
0 0 60px rgba(79,182,216,0.15);
}
.ba-phone::before {
content: "";
position: absolute;
top: 18px; left: 50%;
transform: translateX(-50%);
width: 90px; height: 22px;
background: #1a1a1a;
border-radius: 12px;
z-index: 3;
}
.ba-phone__screen {
position: relative;
width: 100%; height: 100%;
border-radius: 28px;
overflow: hidden;
background: #000;
}
.ba-phone__video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ba-phone__sound {
position: absolute;
top: 16px; right: 16px;
z-index: 4;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(0,0,0,0.55);
color: #fff;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background 0.25s, color 0.25s;
}
.ba-phone__sound:hover {
background: var(--aqua);
color: var(--navy-3);
}
.ba-phone__sound svg { width: 16px; height: 16px; }
.ba-phone__sound-on { display: none; }
.ba-phone__sound.is-unmuted .ba-phone__sound-off { display: none; }
.ba-phone__sound.is-unmuted .ba-phone__sound-on { display: block; }
@media (max-width: 900px) {
.video-proof__layout {
grid-template-columns: 1fr;
gap: 48px;
text-align: center;
}
.video-proof__text { margin: 0 auto; }
.video-proof__stats {
justify-content: center;
}
.ba-phone {
margin: 0 auto;
width: clamp(240px, 70vw, 300px);
}
}
/* =====================================================
14. FAMILIEN STORY (V3 — bg-brass-soft, only warm section)
===================================================== */
.familien-story {
background: var(--brass-soft);
position: relative;
}
.familien-story::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(232,169,59,0.3), transparent);
pointer-events: none;
}
.familien-split {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap-desktop);
align-items: center;
margin-bottom: var(--s-11);
}
.familien-foto {
grid-column: 1 / span 5;
aspect-ratio: 4 / 5;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-lift);
position: relative;
background: var(--porcelain);
}
.familien-foto img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-wipe);
}
.familien-foto:hover img { transform: scale(1.04); }
.familien-foto .siegel {
position: absolute;
bottom: var(--s-4);
right: var(--s-4);
z-index: 2;
}
.familien-text { grid-column: 7 / span 6; }
.familien-text .body-text { margin-top: var(--s-5); font-size: 19px; line-height: 1.65; }
.familien-text .text-link { margin-top: var(--s-6); }
.zahlen-trio {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-8);
padding-top: var(--s-9);
border-top: 1px solid rgba(15,42,68,0.12);
}
.stat {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.stat-num {
font-family: var(--font-headline);
font-weight: 500;
font-size: var(--fs-stat);
color: var(--navy);
line-height: 1;
letter-spacing: var(--ls-display);
font-variation-settings: "opsz" 144;
font-feature-settings: "tnum" 1, "lnum" 1;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: baseline;
}
.stat-num [data-count-to] {
display: inline-block;
font-variant-numeric: tabular-nums;
}
.stat-suffix {
color: var(--aqua-deep);
margin-left: 2px;
font-family: var(--font-headline);
font-weight: 500;
}
.stat-line {
width: 64px; height: 2px;
background: var(--aqua);
transform: scaleX(0);
transform-origin: left center;
margin: var(--s-4) 0 var(--s-3);
border-radius: 2px;
}
.stat-label {
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
color: var(--navy);
opacity: 0.72;
text-transform: uppercase;
letter-spacing: var(--ls-meta);
line-height: 1.3;
}
@media (max-width: 1199px) {
.familien-foto { grid-column: 1 / span 6; }
.familien-text { grid-column: 1 / -1; margin-top: var(--s-7); }
}
@media (max-width: 767px) {
.familien-split { grid-template-columns: 1fr; gap: var(--s-6); margin-bottom: var(--s-9); }
.familien-foto, .familien-text { grid-column: 1 / -1; }
.familien-foto { max-width: 420px; }
.zahlen-trio { grid-template-columns: 1fr; gap: var(--s-7); padding-top: var(--s-7); }
}
/* =====================================================
15. WERTE-SECTION (V3 — bg-mist)
===================================================== */
.werte-section { background: var(--mist); }
.werte-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-9);
}
.wert-kolonne {
display: flex;
flex-direction: column;
gap: var(--s-3);
position: relative;
padding-top: var(--s-6);
border-top: 2px solid var(--aqua);
}
.wert-kolonne .card-num,
.wert-kolonne .caption {
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
color: var(--aqua-deep);
line-height: 1;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
margin-bottom: var(--s-2);
}
.wert-kolonne .h3 { margin-bottom: var(--s-2); color: var(--navy); }
.wert-kolonne .body-text { color: var(--navy); opacity: 0.82; }
@media (max-width: 767px) {
.werte-grid { grid-template-columns: 1fr; gap: var(--s-7); }
}
/* =====================================================
16. QUOTE-SECTION (V3 — Navy full-bleed, testimonial-style)
===================================================== */
.quote-section {
background: var(--navy);
color: var(--porcelain);
padding: clamp(120px, 14vw, 220px) 0;
position: relative;
overflow: hidden;
}
.quote-section::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 20%, rgba(79,182,216,0.18) 0%, transparent 55%),
radial-gradient(circle at 80% 80%, rgba(232,169,59,0.10) 0%, transparent 55%);
pointer-events: none;
}
.quote-inner {
max-width: 1040px;
margin: 0 auto;
padding: 0 var(--page-px-desktop);
text-align: center;
position: relative;
z-index: 1;
}
.quote-mark {
font-family: var(--font-headline);
font-weight: 500;
font-size: 120px;
color: var(--aqua);
line-height: 0.5;
margin-bottom: var(--s-4);
font-variation-settings: "opsz" 144;
opacity: 0.9;
}
.quote-body {
font-family: var(--font-headline);
font-weight: 400;
font-style: italic;
font-size: clamp(2rem, 4.4vw, 4rem);
line-height: 1.22;
letter-spacing: -0.015em;
color: var(--porcelain);
font-variation-settings: "opsz" 120;
margin-bottom: var(--s-7);
}
.quote-signature {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--aqua);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
line-height: 1.3;
display: inline-flex;
align-items: center;
gap: var(--s-3);
}
.quote-signature::before {
content: "";
width: 40px; height: 2px;
background: var(--aqua);
display: inline-block;
}
@media (max-width: 767px) {
.quote-inner { padding: 0 var(--page-px-mobile); }
.quote-mark { font-size: 64px; }
}
/* =====================================================
17. EINSATZ TEASER + DE-MAP
===================================================== */
.einsatz-teaser .einsatz-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap-desktop);
align-items: center;
}
.einsatz-text { grid-column: 1 / span 5; }
.einsatz-map { grid-column: 7 / span 6; position: relative; }
.einsatz-cities {
margin-top: var(--s-4);
font-size: var(--fs-body-sm);
color: var(--graphite-70);
min-height: 1.6em;
font-style: italic;
font-family: var(--font-headline);
font-variation-settings: "opsz" 14;
}
.de-map {
width: 100%;
height: auto;
color: var(--graphite);
}
.de-map .de-bundesland {
fill: none;
stroke: rgba(15,42,68,0.18);
stroke-width: 0.8;
stroke-linejoin: round;
stroke-linecap: round;
transition: fill var(--d-fast) var(--ease-out-2), stroke var(--d-fast) var(--ease-out-2);
}
.de-map .de-bundesland.is-highlight {
stroke: var(--aqua-deep);
stroke-width: 1.4;
fill: rgba(79, 182, 216, 0.14);
}
.de-map .de-bundesland.is-highlight:hover,
.de-map .de-bundesland.is-highlight.is-active {
fill: rgba(79, 182, 216, 0.45);
cursor: pointer;
}
.de-map .de-pin {
fill: var(--aqua-deep);
transform-origin: center center;
}
.de-map .de-pin-ring {
fill: none;
stroke: var(--aqua);
stroke-width: 1.2;
opacity: 0.6;
}
.de-map .de-label {
font-family: var(--font-body);
font-size: 9px;
font-weight: 600;
fill: rgba(15,42,68,0.65);
letter-spacing: 0.05em;
text-transform: uppercase;
pointer-events: none;
}
.de-map .de-label--primary {
fill: var(--aqua-deep);
font-weight: 700;
}
/* ===== Realistic map upgrade ===== */
.einsatz-fakten {
list-style: none;
padding: 0;
margin: var(--s-5) 0 var(--s-5);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
border-top: 1px solid rgba(15, 42, 68, .1);
border-bottom: 1px solid rgba(15, 42, 68, .1);
padding: 18px 0;
}
.einsatz-fakten li {
display: flex;
flex-direction: column;
gap: 2px;
}
.einsatz-fakten li strong {
font-family: var(--font-headline);
font-size: 28px;
font-weight: 400;
letter-spacing: -.02em;
color: var(--navy);
font-variation-settings: "opsz" 36;
font-variant-numeric: oldstyle-nums;
}
.einsatz-fakten li span {
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(15, 42, 68, .6);
font-weight: 500;
}
/* Germany outline */
.de-map .de-outline {
stroke: rgba(15, 42, 68, .25);
stroke-width: 1;
stroke-linejoin: round;
stroke-linecap: round;
}
/* Reach rings (radar pulses) */
.de-map .de-reach-ring {
transform-origin: 94.4px 436.8px;
animation: deReachPulse 4s ease-out infinite;
}
.de-map .de-reach-ring--2 { animation-delay: 1.2s; }
.de-map .de-reach-ring--3 { animation-delay: 2.4s; }
@keyframes deReachPulse {
0% { transform: scale(.6); opacity: 0; }
20% { opacity: 1; }
100% { transform: scale(1.05); opacity: 0; }
}
/* City pins (bundesweit) — fade in on load */
.de-map .de-city circle {
fill: rgba(15, 42, 68, .55);
stroke: #fff;
stroke-width: 1.2;
transform-box: fill-box;
transform-origin: center center;
transition: fill .25s ease, transform .25s ease, stroke-width .25s ease;
}
.de-map .de-city text {
font-family: var(--font-body);
font-size: 9px;
font-weight: 500;
fill: rgba(15, 42, 68, .65);
letter-spacing: .04em;
paint-order: stroke;
stroke: rgba(247, 244, 238, .85);
stroke-width: 2.5;
stroke-linejoin: round;
pointer-events: none;
transition: fill .2s ease;
}
.de-map .de-city {
opacity: 0;
animation: deCityIn .6s ease-out forwards;
animation-delay: var(--d, 0s);
cursor: pointer;
}
.de-map .de-city:hover circle {
fill: var(--brass-deep, #C68C22);
stroke-width: 1.8;
transform: scale(1.5);
}
.de-map .de-city:hover text {
fill: var(--navy);
font-weight: 700;
}
@keyframes deCityIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Major Schwerpunkt pins */
.de-map .de-pin--major {
fill: var(--brass-deep, #C68C22);
stroke: #fff;
stroke-width: 1.5;
transform-box: fill-box;
transform-origin: center center;
filter: drop-shadow(0 1px 2px rgba(15, 42, 68, .25));
transition: transform .25s ease, stroke-width .25s ease;
}
.de-map .de-pin--major:hover {
transform: scale(1.3);
stroke-width: 2;
}
.de-map .de-label--major {
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
fill: var(--navy);
letter-spacing: .04em;
paint-order: stroke;
stroke: rgba(247, 244, 238, .9);
stroke-width: 3;
stroke-linejoin: round;
pointer-events: none;
}
/* HQ Homburg with flag */
.de-map .de-hq-dot {
fill: var(--brass, #E8A93B);
stroke: #fff;
stroke-width: 2;
filter: drop-shadow(0 2px 4px rgba(15, 42, 68, .35));
}
.de-map .de-hq-ring {
fill: none;
stroke: var(--brass, #E8A93B);
stroke-width: 1.5;
transform-origin: 94.4px 436.8px;
animation: deHqPulse 2.4s ease-out infinite;
}
.de-map .de-hq-ring--1 { animation-delay: 0s; }
.de-map .de-hq-ring--2 { animation-delay: .6s; opacity: .6; }
.de-map .de-hq-ring--3 { animation-delay: 1.2s; opacity: .35; }
@keyframes deHqPulse {
0% { transform: scale(.4); opacity: .8; }
100% { transform: scale(1.5); opacity: 0; }
}
.de-map .de-hq-flag {
animation: deFlagDrop .8s cubic-bezier(.2, .9, .2, 1.05) .3s both;
transform-origin: 0 0;
}
@keyframes deFlagDrop {
from { transform: translate(94.4px, 436.8px) translateY(-12px); opacity: 0; }
to { transform: translate(94.4px, 436.8px) translateY(0); opacity: 1; }
}
/* Highlight states (Schwerpunkt) — stronger fill */
.de-map .de-bundesland.is-highlight {
stroke: var(--aqua-deep);
stroke-width: 1.4;
fill: rgba(79, 182, 216, 0.22);
}
.de-map .de-bundesland.is-highlight:hover,
.de-map .de-bundesland.is-highlight.is-active {
fill: rgba(232, 169, 59, 0.42);
stroke: var(--brass-deep);
}
/* Legend */
.de-legend {
margin-top: 18px;
display: flex;
gap: 24px;
flex-wrap: wrap;
font-size: 12px;
color: rgba(15, 42, 68, .7);
}
.de-legend__item {
display: inline-flex;
align-items: center;
gap: 8px;
letter-spacing: .03em;
}
.de-legend__item .dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.de-legend__item--hq .dot {
background: var(--brass, #E8A93B);
box-shadow: 0 0 0 2px rgba(232, 169, 59, .3);
}
.de-legend__item--focus .dot {
background: rgba(79, 182, 216, .3);
border: 1.5px solid var(--aqua-deep);
}
.de-legend__item--reach .dot {
background: rgba(15, 42, 68, .55);
}
@media (max-width: 767px) {
.einsatz-teaser .einsatz-grid { grid-template-columns: 1fr; gap: var(--s-7); }
.einsatz-text, .einsatz-map { grid-column: 1 / -1; }
.einsatz-fakten {
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
padding: 14px 0;
}
.einsatz-fakten li strong { font-size: 22px; }
.einsatz-fakten li span { font-size: 10px; letter-spacing: .08em; }
.de-legend { gap: 14px; font-size: 11px; }
.de-map .de-city text { font-size: 10px; }
.de-map .de-label--major { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
.de-map .de-reach-ring, .de-map .de-hq-ring { animation: none; opacity: .35; }
.de-map .de-hq-flag, .de-map .de-city { animation: none; opacity: 1; }
}
/* =====================================================
18. PROZESS (V3 — Image cards + aqua connectors)
===================================================== */
.prozess-grid {
display: grid;
grid-template-columns: 1fr 60px 1fr 60px 1fr 60px 1fr;
align-items: start;
gap: 0;
}
.prozess-step {
display: flex;
flex-direction: column;
padding-right: var(--s-5);
}
.prozess-step__media {
aspect-ratio: 16 / 10;
border-radius: var(--r-md);
overflow: hidden;
margin-bottom: var(--s-5);
background: var(--mist);
box-shadow: var(--shadow-card);
position: relative;
}
.prozess-step__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.9s var(--ease-wipe);
}
.prozess-step:hover .prozess-step__media img { transform: scale(1.06); }
.prozess-step__media::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 40%;
background: linear-gradient(to bottom, transparent, rgba(15,42,68,0.35));
pointer-events: none;
}
.prozess-step .card-num,
.prozess-step .caption {
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
color: var(--aqua-deep);
line-height: 1;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
margin-bottom: var(--s-3);
}
.prozess-step .h3 { margin-bottom: var(--s-3); font-size: 24px; color: var(--navy); }
.prozess-step .body-text { font-size: 16px; color: var(--navy); opacity: 0.82; }
.process-connector {
height: 2px;
background: var(--aqua);
transform: scaleX(0);
transform-origin: left center;
align-self: center;
margin-top: 28px;
width: 100%;
border-radius: 2px;
box-shadow: 0 0 8px rgba(79,182,216,0.35);
}
@media (max-width: 1199px) {
.prozess-grid {
grid-template-columns: 1fr 40px 1fr;
row-gap: var(--s-7);
}
.process-connector:nth-of-type(4),
.process-connector:nth-of-type(6) { display: none; }
}
@media (max-width: 767px) {
.prozess-grid {
grid-template-columns: 1fr;
gap: var(--s-6);
}
.prozess-step { padding-right: 0; }
.process-connector {
width: 1px; height: 40px;
transform: scaleY(0);
transform-origin: top center;
margin: var(--s-3) auto;
}
}
/* =====================================================
19. TESTIMONIALS (V3 — white cards, navy top-line, aqua accent)
===================================================== */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--grid-gap-desktop);
}
.testimonial-card {
background: var(--white);
padding: var(--s-8) var(--s-7) var(--s-7);
border-radius: var(--r-lg);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-card);
transition: box-shadow var(--d-slow) var(--ease-wipe), transform var(--d-slow) var(--ease-wipe);
position: relative;
}
.testimonial-card:hover {
box-shadow: var(--shadow-lift);
transform: translateY(-4px);
}
.testimonial-card .card-top-line {
width: 48px; height: 2px;
background: var(--aqua);
transform: scaleX(0);
transform-origin: left center;
margin-bottom: var(--s-5);
border-radius: 2px;
}
.testimonial-quote {
font-family: var(--font-headline);
font-weight: 400;
font-style: italic;
font-size: var(--fs-quote);
line-height: 1.4;
color: var(--navy);
font-variation-settings: "opsz" 48;
margin-bottom: var(--s-6);
flex: 1;
}
.testimonial-quote::before {
content: "“";
font-family: var(--font-headline);
font-size: 48px;
color: var(--aqua);
line-height: 0.2;
display: inline-block;
margin-right: 4px;
vertical-align: -8px;
opacity: 0.55;
}
.testimonial-name {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-body-sm);
color: var(--navy);
line-height: 1.3;
}
.testimonial-ctx,
.testimonial-context {
font-size: 14px;
color: var(--navy);
opacity: 0.65;
margin-top: 3px;
}
@media (max-width: 1199px) {
.testimonials-grid { grid-template-columns: 1fr; gap: var(--s-5); }
.testimonial-card { padding: var(--s-6); }
}
/* =====================================================
20. CTA FINAL (V3 — bg-navy, split form+info with siegel)
===================================================== */
.cta-final {
background: var(--navy);
color: var(--porcelain);
position: relative;
overflow: hidden;
}
.cta-final::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--aqua), transparent);
opacity: 0.45;
pointer-events: none;
}
.cta-final .section-head {
text-align: center;
align-items: center;
}
.cta-final .section-head .eyebrow { display: inline-flex; color: var(--aqua); }
.cta-final .section-head .eyebrow::before { background: var(--aqua); }
.cta-final .section-head h2,
.cta-final .section-head .h2 { color: var(--porcelain); }
.cta-final .section-head .lead { margin-left: auto; margin-right: auto; text-align: center; color: rgba(247,249,251,0.78); }
.cta-final-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 0;
margin-top: var(--s-9);
border-top: 1px solid rgba(79,182,216,0.22);
border-bottom: 1px solid rgba(79,182,216,0.22);
}
.cta-col {
padding: var(--s-7) var(--s-6);
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.cta-col:not(:last-child)::after {
content: "";
position: absolute;
right: 0; top: 12%;
height: 76%;
width: 1px;
background: rgba(79,182,216,0.2);
}
.cta-col h3,
.cta-col .h4 {
font-family: var(--font-headline);
font-weight: 500;
font-size: 22px;
margin-bottom: var(--s-2);
font-variation-settings: "opsz" 48;
color: var(--porcelain);
}
.cta-col--tel .cta-tel-big,
.cta-phone {
display: block;
font-family: var(--font-headline);
font-weight: 500;
font-size: 36px;
color: var(--aqua);
line-height: 1;
margin: var(--s-3) 0 var(--s-3);
font-feature-settings: "tnum" 1, "lnum" 1;
font-variant-numeric: tabular-nums;
font-variation-settings: "opsz" 72;
letter-spacing: -0.01em;
transition: color var(--d-fast) var(--ease-out-2);
}
.cta-col--tel .cta-tel-big:hover,
.cta-phone:hover { color: var(--brass); }
.cta-col .body-text,
.cta-col .body-sm { color: rgba(247,249,251,0.82); }
.cta-final .cta-col .text-link {
color: var(--aqua);
}
.cta-final .cta-col .text-link::after {
background: var(--aqua);
}
.cta-address,
.cta-addresszeile {
margin-top: var(--s-7);
text-align: center;
font-size: 13px;
color: rgba(247,249,251,0.6);
letter-spacing: var(--ls-meta);
}
.cta-final .siegel {
position: absolute;
top: var(--s-6);
right: var(--s-7);
z-index: 2;
}
@media (max-width: 1199px) {
.cta-final-grid { grid-template-columns: 1fr; }
.cta-col { padding: var(--s-6) 0; border-bottom: 1px solid var(--hairline-soft); }
.cta-col:last-child { border-bottom: none; }
.cta-col::after { display: none; }
}
/* CTA Compact (Ueber-uns) */
.cta-compact {
background: var(--aqua-soft);
text-align: center;
}
.cta-compact-inner {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-4);
}
.cta-compact .sauber-line--section,
.cta-compact .wischstrich { margin: var(--s-2) auto; }
.cta-compact .hero-ctas { margin-top: var(--s-4); justify-content: center; }
/* =====================================================
21. FORMS
===================================================== */
.hn-form,
.form {
display: flex;
flex-direction: column;
gap: var(--s-5);
}
.form-row,
.form-field {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.form-label {
font-family: var(--font-body);
font-weight: 500;
font-size: 12px;
color: var(--graphite-70);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
line-height: 1;
}
.form-input,
.form-select,
.hn-form input[type="text"],
.hn-form input[type="tel"],
.hn-form input[type="email"],
.hn-form select {
background: var(--paper);
border: none;
border-bottom: 1px solid var(--hairline-soft);
padding: 12px 0;
font-family: var(--font-body);
font-size: var(--fs-body);
color: var(--graphite);
width: 100%;
outline: none;
transition: border-color var(--d-fast) var(--ease-out-2);
border-radius: 0;
appearance: none;
}
.form-input::placeholder { color: var(--graphite-50); }
.form-input:focus,
.form-select:focus,
.hn-form input:focus,
.hn-form select:focus {
border-bottom-color: var(--aqua);
outline: none;
box-shadow: 0 1px 0 var(--aqua);
}
.form-select,
.hn-form select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232E96B8' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0 center;
padding-right: 20px;
}
.form-textarea,
.hn-form textarea {
background: var(--paper);
border: 1px solid var(--hairline-soft);
padding: var(--s-3);
min-height: 140px;
resize: vertical;
font-family: var(--font-body);
font-size: var(--fs-body);
color: var(--graphite);
width: 100%;
outline: none;
transition: border-color var(--d-fast) var(--ease-out-2);
border-radius: var(--radius-sharp);
line-height: 1.5;
}
.form-textarea:focus,
.hn-form textarea:focus {
border-color: var(--aqua);
box-shadow: 0 0 0 3px rgba(79,182,216,0.12);
}
.form-checkbox-row,
.form-check {
display: flex;
align-items: flex-start;
gap: var(--s-3);
font-size: 14px;
color: var(--graphite-85);
line-height: 1.5;
cursor: pointer;
}
.form-checkbox-row input[type="checkbox"],
.form-check input[type="checkbox"] {
appearance: none;
width: 18px; height: 18px;
border: 1px solid var(--hairline-soft);
border-radius: 1px;
background: var(--paper);
cursor: pointer;
flex-shrink: 0;
margin-top: 2px;
position: relative;
transition: background var(--d-fast), border-color var(--d-fast);
}
.form-checkbox-row input[type="checkbox"]:checked,
.form-check input[type="checkbox"]:checked {
background: var(--aqua);
border-color: var(--aqua);
}
.form-checkbox-row input[type="checkbox"]:checked::after,
.form-check input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 4px; top: 1px;
width: 6px; height: 10px;
border: 1.5px solid #fff;
border-top: 0; border-left: 0;
transform: rotate(45deg);
}
.form-submit { align-self: flex-start; margin-top: var(--s-3); }
.hn-form .btn-primary { align-self: flex-start; margin-top: var(--s-3); }
/* Honeypot */
.form-hp {
position: absolute;
left: -9999px; top: -9999px;
width: 1px; height: 1px;
overflow: hidden;
}
/* =====================================================
22. CHIPS & CHIP-NAV (V3 — navy/aqua)
===================================================== */
.chip {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border: 1px solid rgba(15,42,68,0.18);
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
color: var(--navy);
line-height: 1;
background: var(--white);
transition: background var(--d-fast), border-color var(--d-fast), color var(--d-fast), box-shadow var(--d-fast);
cursor: pointer;
white-space: nowrap;
}
.chip:hover {
background: var(--aqua-soft);
border-color: var(--aqua);
color: var(--aqua-deep);
}
.chip.is-active {
background: var(--navy);
color: var(--porcelain);
border-color: var(--navy);
box-shadow: 0 2px 6px rgba(15,42,68,0.18);
}
.chip--leistung {
padding: 10px 18px;
letter-spacing: 0.04em;
}
.chip-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip-nav {
position: sticky;
top: var(--nav-h-scrolled);
z-index: 50;
background: rgba(247,249,251,0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: var(--s-3) 0;
border-bottom: 1px solid rgba(15,42,68,0.08);
}
.chip-nav-inner {
display: flex;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--page-px-desktop);
}
.chip-nav-inner::-webkit-scrollbar { display: none; }
/* Mobile: chip-nav wrappt in 2 Reihen statt horizontalem Scroll */
@media (max-width: 767px) {
.chip-nav {
padding: 14px 0 12px;
border-bottom: 1px solid rgba(15,42,68,0.10);
}
.chip-nav-inner {
flex-wrap: wrap;
overflow-x: visible;
gap: 6px;
padding: 0 var(--page-px-mobile, 20px);
justify-content: center;
}
.chip-nav-inner .chip {
white-space: normal;
text-align: center;
font-size: 11.5px;
padding: 7px 12px;
letter-spacing: 0.02em;
line-height: 1.2;
border-radius: 999px;
flex: 0 1 auto;
max-width: 100%;
}
}
/* =====================================================
23. SUB-HERO (Unterseiten)
===================================================== */
.sub-hero {
padding-top: var(--s-10);
padding-bottom: var(--s-9);
border-bottom: 1px solid var(--hairline-soft);
}
.sub-hero-inner {
display: flex;
flex-direction: column;
gap: var(--s-5);
align-items: flex-start;
}
.sub-hero .h1-sub {
margin-top: var(--s-2);
max-width: 20ch;
}
.sub-hero .sauber-line--hero {
margin-top: var(--s-3);
margin-bottom: var(--s-3);
}
.sub-hero .lead { max-width: 60ch; }
/* =====================================================
24. LEISTUNGS SPREAD (leistungen.html)
===================================================== */
.leistung-spread {
padding-top: clamp(100px, 12vw, 180px);
padding-bottom: clamp(100px, 12vw, 180px);
border-bottom: 1px solid var(--hairline-soft);
}
.leistung-spread:last-of-type { border-bottom: none; }
.leistung-spread .spread-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap-desktop);
align-items: center;
}
.leistung-spread .spread-text { grid-column: 1 / span 6; }
.leistung-spread .spread-foto { grid-column: 8 / span 5; }
.leistung-spread:nth-of-type(even) .spread-text { grid-column: 7 / span 6; order: 2; }
.leistung-spread:nth-of-type(even) .spread-foto { grid-column: 1 / span 5; order: 1; }
.leistung-spread .spread-foto,
.leistung-spread .spread-foto.placeholder-frame {
aspect-ratio: 3 / 4;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-lift);
position: relative;
background: var(--mist);
}
.leistung-spread .spread-foto img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s var(--ease-wipe);
}
.leistung-spread:hover .spread-foto img { transform: scale(1.03); }
.leistung-spread .spread-num,
.leistung-spread .caption.spread-num {
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
color: var(--aqua-deep);
line-height: 1;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
margin-bottom: var(--s-3);
display: block;
}
.leistung-spread .tag { margin-bottom: var(--s-3); display: inline-block; }
.leistung-spread .h2 { margin-bottom: var(--s-4); max-width: 14ch; }
.leistung-spread .sauber-line--section { margin-bottom: var(--s-5); }
.leistung-spread .body-text { margin-bottom: var(--s-4); }
.leistung-spread .spread-umfang {
font-family: var(--font-headline);
font-weight: 500;
font-size: 18px;
margin: var(--s-5) 0 var(--s-3);
color: var(--graphite);
font-variation-settings: "opsz" 36;
}
.leistung-spread .spread-list,
.leistung-spread .bullet-list {
margin: var(--s-3) 0 var(--s-5);
}
.spread-list li,
.bullet-list li {
position: relative;
padding-left: 28px;
margin-bottom: var(--s-2);
line-height: 1.5;
color: var(--graphite);
font-size: 16px;
}
.spread-list li::before,
.bullet-list li::before {
content: "";
position: absolute;
left: 0; top: 11px;
width: 16px; height: 2px;
background: var(--aqua);
border-radius: 2px;
}
.leistung-spread .btn-ghost { margin-top: var(--s-4); }
/* Leistung Kapitel-Anker offset */
.leistung-spread { scroll-margin-top: 140px; }
.stille-rechteck {
background: var(--aqua-soft);
padding: var(--s-10) var(--s-7);
text-align: center;
max-width: 760px;
margin: 0 auto;
border-radius: var(--r-lg);
border: 1px solid rgba(79,182,216,0.28);
}
.stille-rechteck .h3 { margin-bottom: var(--s-3); }
.stille-rechteck .body-text { margin: 0 auto var(--s-5); }
@media (max-width: 767px) {
.leistung-spread .spread-grid { grid-template-columns: 1fr; gap: var(--s-6); }
.leistung-spread .spread-text,
.leistung-spread .spread-foto,
.leistung-spread:nth-of-type(even) .spread-text,
.leistung-spread:nth-of-type(even) .spread-foto { grid-column: 1 / -1; order: 0; }
.leistung-spread:nth-of-type(even) .spread-foto { order: -1; }
.leistung-spread .spread-foto { max-width: 420px; }
.stille-rechteck { padding: var(--s-7) var(--s-4); }
}
/* =====================================================
25. UEBER-UNS TIMELINE
===================================================== */
.timeline-section { position: relative; }
.timeline-wrap {
position: relative;
padding-left: 64px;
max-width: 860px;
}
.timeline-vertical {
position: absolute;
left: 24px; top: 0;
width: 2px;
height: 100%;
background: linear-gradient(to bottom, var(--aqua), var(--aqua-deep));
transform: scaleY(0);
transform-origin: top center;
border-radius: 2px;
box-shadow: 0 0 12px rgba(79,182,216,0.35);
}
.timeline-event {
position: relative;
padding-bottom: var(--s-9);
}
.timeline-event:last-child { padding-bottom: 0; }
.tl-dot {
position: absolute;
left: -46px; top: 16px;
width: 14px; height: 14px;
background: var(--aqua);
border-radius: 50%;
box-shadow: 0 0 0 5px var(--porcelain), 0 0 12px rgba(79,182,216,0.5);
}
.tl-year {
font-family: var(--font-headline);
font-weight: 500;
font-size: 56px;
color: var(--navy);
line-height: 1;
font-variation-settings: "opsz" 96;
font-feature-settings: "tnum" 1, "lnum" 1;
font-variant-numeric: tabular-nums;
display: block;
margin-bottom: var(--s-3);
letter-spacing: -0.02em;
}
.tl-headline { margin-bottom: var(--s-3); }
.tl-content .body-text { max-width: 62ch; }
@media (max-width: 767px) {
.timeline-wrap { padding-left: 40px; }
.timeline-vertical { left: 12px; }
.tl-dot { left: -33px; }
.tl-year { font-size: 40px; }
}
/* =====================================================
26. UEBER-UNS FAMILIE & TEAM (V3)
===================================================== */
.familie-section { background: var(--brass-soft); }
.familie-split {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap-desktop);
align-items: center;
margin-bottom: var(--s-10);
}
.familie-foto {
grid-column: 1 / span 5;
aspect-ratio: 4 / 5;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-lift);
position: relative;
background: var(--porcelain);
}
.familie-foto img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-wipe);
}
.familie-foto:hover img { transform: scale(1.04); }
.familie-foto .siegel {
position: absolute;
bottom: var(--s-4);
right: var(--s-4);
z-index: 2;
}
.familie-text { grid-column: 7 / span 6; }
.familie-text .caption { font-size: 14px; color: var(--navy); font-weight: 700; margin-bottom: var(--s-1); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.familie-text .tag { margin-bottom: var(--s-5); display: inline-block; }
.familie-quote,
.testimonial-quote.familie-quote {
font-size: clamp(1.5rem, 2.2vw, 2rem);
line-height: 1.35;
color: var(--navy);
}
.team-gallery-intro {
margin: var(--s-8) 0 var(--s-6);
max-width: 62ch;
}
.team-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-4);
}
.team-foto {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: transform var(--d-slow) var(--ease-wipe), box-shadow var(--d-slow) var(--ease-wipe);
}
.team-foto:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.team-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-wipe); }
.team-foto:hover img { transform: scale(1.05); }
@media (max-width: 1199px) {
.familie-foto { grid-column: 1 / span 6; }
.familie-text { grid-column: 1 / -1; margin-top: var(--s-7); }
.team-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.familie-split { grid-template-columns: 1fr; gap: var(--s-6); }
.familie-foto, .familie-text { grid-column: 1 / -1; }
.familie-foto { max-width: 420px; }
.team-gallery { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
}
/* Trust-Facts-Line */
.trust-facts .trust-facts-line {
font-family: var(--font-headline);
font-weight: 400;
font-size: clamp(1.125rem, 1.6vw, 1.4rem);
line-height: 1.6;
color: var(--graphite);
max-width: 960px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s-2);
font-variation-settings: "opsz" 48;
}
.trust-facts .trust-facts-line .dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--aqua);
transform: translateY(-4px);
box-shadow: 0 0 6px rgba(79,182,216,0.5);
}
/* =====================================================
27. EINSATZGEBIETE-PAGE
===================================================== */
.einsatz-hero-map {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap-desktop);
align-items: start;
}
.einsatz-hero-map .map-col { grid-column: 1 / span 7; }
.einsatz-hero-map .aside-col { grid-column: 9 / span 4; position: sticky; top: 120px; }
.einsatz-hero-map .aside-col .h3 { margin-bottom: var(--s-3); }
.einsatz-regional {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap-desktop);
align-items: start;
padding: var(--s-10) 0;
border-top: 1px solid var(--hairline-soft);
}
.einsatz-regional:first-of-type { border-top: none; }
.einsatz-regional .region-text { grid-column: 1 / span 7; }
.einsatz-regional .region-chips { grid-column: 9 / span 4; }
.einsatz-regional .body-text { margin-bottom: var(--s-4); }
.einsatz-regional .bullet-list { margin-top: var(--s-4); }
@media (max-width: 1199px) {
.einsatz-hero-map .map-col,
.einsatz-hero-map .aside-col { grid-column: 1 / -1; position: static; }
.einsatz-regional { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-8) 0; }
.einsatz-regional .region-text,
.einsatz-regional .region-chips { grid-column: 1 / -1; }
}
/* =====================================================
28. KONTAKT PAGE (V3)
===================================================== */
.kontakt-drei-wege {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--grid-gap-desktop);
}
.kontakt-karte {
background: var(--white);
padding: var(--s-8) var(--s-7);
border-radius: var(--r-lg);
display: flex;
flex-direction: column;
gap: var(--s-3);
box-shadow: var(--shadow-card);
border-top: 3px solid var(--aqua);
transition: transform var(--d-slow) var(--ease-wipe), box-shadow var(--d-slow) var(--ease-wipe);
}
.kontakt-karte:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
}
.kontakt-karte h3 {
font-family: var(--font-headline);
font-weight: 500;
font-size: 22px;
margin-bottom: var(--s-2);
color: var(--navy);
font-variation-settings: "opsz" 48;
}
.kontakt-karte .kontakt-big {
font-family: var(--font-headline);
font-weight: 500;
font-size: 36px;
color: var(--navy);
line-height: 1;
display: block;
margin: var(--s-3) 0;
font-feature-settings: "tnum" 1, "lnum" 1;
font-variant-numeric: tabular-nums;
font-variation-settings: "opsz" 72;
letter-spacing: -0.01em;
transition: color var(--d-fast);
}
.kontakt-karte .kontakt-big:hover { color: var(--aqua-deep); }
.kontakt-form-wrap {
max-width: 720px;
margin: 0 auto;
}
.kontakt-form-hint {
margin-top: var(--s-4);
font-size: 14px;
color: var(--graphite-70);
text-align: center;
}
.kontakt-adresse {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap-desktop);
}
.kontakt-adresse .adresse-col { grid-column: 1 / span 5; }
.kontakt-adresse .map-col { grid-column: 7 / span 6; }
.adresse-block {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.8;
color: var(--graphite);
white-space: pre-line;
}
.adresse-block strong {
font-family: var(--font-headline);
font-weight: 500;
font-size: 22px;
display: block;
margin-bottom: var(--s-3);
font-variation-settings: "opsz" 48;
}
.kontakt-map-embed {
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
filter: grayscale(0.3) contrast(1.02);
box-shadow: var(--shadow-lift);
}
.kontakt-map-embed iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) {
.kontakt-drei-wege { grid-template-columns: 1fr; gap: var(--s-4); }
.kontakt-adresse { grid-template-columns: 1fr; gap: var(--s-6); }
.kontakt-adresse .adresse-col,
.kontakt-adresse .map-col { grid-column: 1 / -1; }
}
/* =====================================================
29. LEGAL (Impressum / Datenschutz)
===================================================== */
.legal-wrap {
max-width: 720px;
margin: 0 auto;
}
.legal-wrap .sub-hero-inner { gap: var(--s-4); }
.legal-section {
margin-bottom: var(--s-8);
padding-top: var(--s-5);
position: relative;
}
.legal-section::before {
content: "";
display: block;
width: 48px;
height: 2px;
background: var(--aqua);
margin-bottom: var(--s-5);
border-radius: 2px;
}
.legal-section:first-of-type { padding-top: 0; }
.legal-section:first-of-type::before { display: none; }
.legal-section h2 {
font-family: var(--font-headline);
font-weight: 500;
font-size: clamp(1.5rem, 2.2vw, 2rem);
margin-bottom: var(--s-4);
color: var(--graphite);
font-variation-settings: "opsz" 48;
letter-spacing: var(--ls-tight);
}
.legal-section p,
.legal-section li {
font-size: 16px;
line-height: 1.7;
color: var(--graphite);
margin-bottom: var(--s-3);
}
.legal-section ul { padding-left: 20px; }
.legal-section ul li { list-style: disc; }
.legal-section pre {
font-family: var(--font-body);
white-space: pre-line;
font-size: 16px;
color: var(--graphite);
line-height: 1.7;
}
.legal-section a {
color: var(--bronze);
text-decoration: underline;
text-decoration-color: var(--bronze-dim);
text-underline-offset: 3px;
}
.legal-section a:hover { text-decoration-color: var(--aqua); color: var(--aqua-deep); }
/* =====================================================
30. FOOTER (V3 — Navy-Signatur mit Aqua/Brass-Akzent)
===================================================== */
.footer {
background: var(--navy);
color: var(--porcelain);
border-top: 2px solid var(--aqua);
padding: var(--s-11) var(--page-px-desktop) var(--s-7);
position: relative;
overflow: hidden;
}
.footer::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 85% 15%, rgba(232,169,59,0.10) 0%, transparent 55%);
pointer-events: none;
}
.footer-inner,
.footer .container {
max-width: var(--container-max);
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Editorial Wortmarke oben */
.footer-wordmark {
font-family: var(--font-headline);
font-weight: 500;
font-size: clamp(4rem, 10vw, 12rem);
line-height: 0.92;
letter-spacing: -0.04em;
color: var(--porcelain);
font-variation-settings: "opsz" 144;
margin-bottom: var(--s-9);
padding-bottom: var(--s-8);
border-bottom: 1px solid rgba(79,182,216,0.22);
display: flex;
align-items: center;
gap: var(--s-4);
flex-wrap: wrap;
}
.footer-wordmark .brand-logo-img {
height: clamp(70px, 9vw, 110px);
}
.footer-wordmark .footer-wordmark-dot {
display: inline-block;
width: 18px; height: 18px;
background: var(--aqua);
border-radius: 50%;
align-self: center;
box-shadow: 0 0 14px rgba(79,182,216,0.6);
}
.footer-wordmark .footer-wordmark-tagline {
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
color: var(--aqua);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
margin-left: auto;
line-height: 1.4;
max-width: 20ch;
align-self: center;
}
.footer-grid,
.footer-cols {
display: grid;
grid-template-columns: 2fr 1.4fr 1.4fr 1.4fr;
gap: var(--s-7);
margin-bottom: var(--s-9);
}
.footer-col h4,
.footer-col .h4 {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
color: var(--aqua);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
margin-bottom: var(--s-4);
line-height: 1;
padding-bottom: var(--s-3);
border-bottom: 1px solid rgba(79,182,216,0.22);
}
.footer-col ul,
.footer-col .footer-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-col a {
font-size: 15px;
color: rgba(247,249,251,0.82);
position: relative;
display: inline-block;
line-height: 1.5;
transition: color var(--d-fast), transform var(--d-fast);
}
.footer-col a:hover { color: var(--aqua); transform: translateX(3px); }
.footer-col p { font-size: 15px; line-height: 1.6; margin-bottom: var(--s-2); color: rgba(247,249,251,0.82); }
.footer-col .caption { font-size: 12px; color: rgba(247,249,251,0.55); }
.footer-col--trust .body-text {
font-family: var(--font-headline);
font-weight: 400;
font-size: 20px;
line-height: 1.35;
color: var(--porcelain);
margin-bottom: var(--s-4);
font-variation-settings: "opsz" 36;
max-width: 26ch;
}
.footer-address {
font-style: normal;
font-size: 15px;
line-height: 1.55;
margin-bottom: var(--s-3);
color: rgba(247,249,251,0.8);
}
.footer-bottom {
padding-top: var(--s-5);
border-top: 1px solid rgba(79,182,216,0.18);
display: flex;
justify-content: space-between;
gap: var(--s-3);
font-size: 12px;
color: rgba(247,249,251,0.55);
flex-wrap: wrap;
letter-spacing: var(--ls-meta);
}
.footer-bottom a {
color: rgba(247,249,251,0.72);
text-decoration: none;
transition: color var(--d-fast);
}
.footer-bottom a:hover { color: var(--aqua); }
@media (max-width: 1199px) {
.footer-grid,
.footer-cols { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}
@media (max-width: 767px) {
.footer {
padding-left: var(--page-px-mobile);
padding-right: var(--page-px-mobile);
padding-top: var(--s-9);
}
.footer-wordmark { font-size: clamp(3rem, 14vw, 5rem); margin-bottom: var(--s-6); padding-bottom: var(--s-5); flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.footer-wordmark .footer-wordmark-tagline { margin-left: 0; }
.footer-grid,
.footer-cols { grid-template-columns: 1fr; gap: var(--s-5); margin-bottom: var(--s-6); }
.footer-bottom { flex-direction: column; }
}
/* =====================================================
31. WHATSAPP FLOAT (V3 — aqua + glow)
===================================================== */
.whatsapp-float {
position: fixed;
bottom: 24px; right: 24px;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--aqua);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-float);
transition: background var(--d-fast) var(--ease-out-2), transform var(--d-fast) var(--ease-out-2), box-shadow var(--d-fast) var(--ease-out-2);
opacity: 0;
pointer-events: none;
border: none;
box-shadow: 0 6px 20px rgba(79,182,216,0.42), 0 0 0 0 rgba(79,182,216,0.5);
animation: whatsapp-pulse 2.4s ease-in-out infinite;
}
.whatsapp-float:hover {
background: var(--aqua-deep);
transform: scale(1.08);
box-shadow: 0 8px 26px rgba(79,182,216,0.55);
}
.whatsapp-float svg {
width: 26px; height: 26px;
fill: var(--white);
color: var(--white);
}
@keyframes whatsapp-pulse {
0%, 100% { box-shadow: 0 6px 20px rgba(79,182,216,0.42), 0 0 0 0 rgba(79,182,216,0.5); }
50% { box-shadow: 0 6px 20px rgba(79,182,216,0.42), 0 0 0 12px rgba(79,182,216,0); }
}
@media (max-width: 767px) {
.whatsapp-float { width: 56px; height: 56px; bottom: 20px; right: 20px; }
}
/* =====================================================
32. HELPERS & STATES
===================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.is-hidden { display: none; }
[data-reveal] { will-change: transform, opacity; }
.tag-row {
display: inline-flex;
gap: var(--s-2);
flex-wrap: wrap;
margin-bottom: var(--s-3);
}
/* Einsatz Karten Section (region listen) */
.einsatz-bl-section { padding-top: var(--s-10); padding-bottom: var(--s-10); }
/* =====================================================
33. SPLITTEXT (für Hero H1 + Sub-Hero H1)
===================================================== */
.h1-hero .char-wrap,
.h1-sub .char-wrap {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
line-height: var(--lh-tight);
}
.h1-hero .char,
.h1-sub .char {
display: inline-block;
will-change: transform;
line-height: inherit;
}
.h1-hero .char--space,
.h1-sub .char--space { display: inline-block; white-space: pre; }
.h1-hero .word,
.h1-sub .word { display: inline-block; white-space: nowrap; }
/* =====================================================
34. REDUCED MOTION
===================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.sauber-line--hero,
.sauber-line--section,
.stat-line,
.process-connector,
.timeline-vertical,
.testimonial-card .card-top-line,
.section-rule {
transform: scaleX(1) scaleY(1) !important;
}
.page-wipe { display: none; }
.zielgruppen-card:nth-child(1),
.zielgruppen-card:nth-child(4) { transform: translateY(0) !important; }
}
/* =====================================================
35. EDITORIAL V3 — SPREAD CAPTIONS (leistungen)
===================================================== */
.spread-caption {
font-family: var(--font-body);
font-weight: 500;
font-size: 12px;
color: var(--aqua-deep);
line-height: 1.5;
margin-top: var(--s-3);
padding-top: var(--s-2);
border-top: 1px solid rgba(79,182,216,0.25);
letter-spacing: var(--ls-meta);
text-transform: uppercase;
display: block;
max-width: 34ch;
}
.leistung-spread .spread-foto + .spread-caption,
.leistung-spread .spread-foto figcaption.spread-caption {
padding-left: 2px;
padding-right: 2px;
}
.leistung-spread figure.spread-foto {
display: flex;
flex-direction: column;
align-items: stretch;
overflow: visible;
border: none;
border-radius: 0;
aspect-ratio: auto;
}
.leistung-spread figure.spread-foto > img,
.leistung-spread figure.spread-foto > .placeholder-inner {
border-radius: var(--r-lg);
box-shadow: var(--shadow-lift);
aspect-ratio: 3 / 4;
width: 100%;
object-fit: cover;
display: block;
}
.leistung-spread figure.spread-foto.placeholder-frame > .placeholder-inner {
aspect-ratio: 3 / 4;
}
.leistung-spread figure.spread-foto .placeholder-note {
top: auto;
bottom: 56px;
}
/* =====================================================
36. EDITORIAL V3 — SECTION-HEAD VARIANTS
===================================================== */
.section-head {
display: flex;
flex-direction: column;
gap: var(--s-3);
margin-bottom: var(--s-7);
max-width: 56ch;
}
.section-head--centered {
margin-left: auto;
margin-right: auto;
text-align: center;
align-items: center;
}
.section-head--centered .sauber-line--section,
.section-head--centered .wischstrich--divider {
margin-left: auto;
margin-right: auto;
}
.section-head--centered .eyebrow {
justify-content: center;
}
.section-head .eyebrow { margin-bottom: 0; }
.section-head .h2 { margin-bottom: 0; max-width: 24ch; }
.section-head--centered .h2 { max-width: 22ch; }
.section-head .lead { max-width: 52ch; margin-top: var(--s-2); }
.section-head--centered .lead { margin-left: auto; margin-right: auto; }
/* =====================================================
37. EDITORIAL V3 — QUOTE-WRAP ALIAS + RULE
===================================================== */
.quote-wrap {
max-width: 1040px;
margin: 0 auto;
padding: 0 var(--page-px-desktop);
text-align: center;
position: relative;
}
.quote-wrap .quote-mark {
font-family: var(--font-headline);
font-weight: 500;
font-size: clamp(84px, 9vw, 140px);
color: var(--aqua);
line-height: 0.4;
margin-bottom: var(--s-4);
font-variation-settings: "opsz" 144;
display: block;
opacity: 0.9;
}
.quote-wrap .quote-body {
font-family: var(--font-headline);
font-weight: 400;
font-style: italic;
font-size: clamp(2rem, 4.4vw, 4rem);
line-height: 1.22;
letter-spacing: -0.015em;
color: var(--porcelain);
font-variation-settings: "opsz" 120;
margin-bottom: var(--s-7);
max-width: 28ch;
margin-left: auto;
margin-right: auto;
}
.quote-wrap .quote-signature {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--aqua);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
line-height: 1.3;
display: inline-flex;
align-items: center;
gap: var(--s-3);
}
.quote-wrap .quote-signature::before {
content: "";
width: 40px; height: 2px;
background: var(--aqua);
display: inline-block;
border-radius: 2px;
}
.quote-rule {
width: 64px;
height: 2px;
background: var(--aqua);
margin: 0 auto var(--s-5);
display: block;
opacity: 0.9;
border-radius: 2px;
}
.quote-section::after {
content: "";
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(79,182,216,0.4) 30%, rgba(79,182,216,0.4) 70%, transparent 100%);
pointer-events: none;
}
@media (max-width: 767px) {
.quote-wrap { padding: 0 var(--page-px-mobile); }
.quote-wrap .quote-mark { font-size: 64px; }
.quote-wrap .quote-body { font-size: clamp(1.6rem, 5vw, 2.4rem); }
}
/* =====================================================
38. EDITORIAL V3 — FOOTER WORDMARK REFINEMENTS
===================================================== */
.footer-wordmark-text {
display: inline-block;
line-height: 0.92;
letter-spacing: -0.04em;
color: var(--porcelain);
font-variation-settings: "opsz" 144;
}
.footer-wordmark-dot {
display: inline-block;
width: 18px;
height: 18px;
background: var(--aqua);
border-radius: 50%;
flex-shrink: 0;
margin: 0 var(--s-2);
align-self: center;
position: relative;
top: -0.15em;
box-shadow: 0 0 14px rgba(79,182,216,0.55);
}
@media (max-width: 767px) {
.footer-wordmark-dot { width: 12px; height: 12px; margin: var(--s-2) 0; top: 0; }
}
/* =====================================================
39. EDITORIAL V3 — DE-MAP DETAILED VARIANT
===================================================== */
.de-map--detailed {
width: 100%;
max-width: 560px;
height: auto;
display: block;
margin: 0 auto;
}
.de-map--detailed .de-map-fill {
fill: var(--mist);
stroke: rgba(15,42,68,0.18);
stroke-width: 0.5;
transition: fill var(--d-med) var(--ease-out-2);
}
.de-map--detailed .de-map-fill.is-highlight {
fill: var(--aqua-soft);
stroke: var(--aqua-deep);
stroke-width: 1.2;
}
.de-map--detailed .de-map-pin {
fill: var(--aqua-deep);
stroke: var(--white);
stroke-width: 2;
}
.de-map--detailed .de-map-pin-halo {
fill: none;
stroke: var(--aqua);
stroke-width: 1.4;
opacity: 0.45;
animation: de-pin-pulse 3.2s ease-in-out infinite;
}
.de-map--detailed .de-map-city {
fill: var(--navy);
stroke: none;
r: 2.5;
}
.de-map--detailed .de-map-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
fill: rgba(15,42,68,0.7);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.de-map--detailed .de-map-label--homburg {
fill: var(--aqua-deep);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.06em;
}
@keyframes de-pin-pulse {
0%, 100% { r: 6; opacity: 0.35; }
50% { r: 14; opacity: 0; }
}
/* =====================================================
40. EDITORIAL V3 — PLACEHOLDER-FRAME REFINEMENTS
===================================================== */
.placeholder-frame {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--sand) 0%, var(--paper) 100%);
border: 1px solid var(--bronze-border);
border-radius: var(--radius-photo);
isolation: isolate;
}
.placeholder-frame::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7' /%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.28' /%3E%3C/svg%3E");
mix-blend-mode: multiply;
opacity: 0.45;
pointer-events: none;
z-index: 1;
}
.placeholder-frame::after {
content: "";
position: absolute;
right: 18px;
top: 18px;
bottom: 18px;
width: 1px;
background: var(--bronze);
opacity: 0.55;
z-index: 2;
}
.placeholder-inner {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s-4);
width: 100%;
height: 100%;
padding: var(--s-6);
text-align: center;
}
.placeholder-mono {
font-family: var(--font-headline);
font-weight: 500;
font-size: clamp(72px, 14vw, 172px);
line-height: 0.85;
letter-spacing: -0.04em;
color: var(--graphite);
font-variation-settings: "opsz" 144;
font-feature-settings: "ss01" 1;
text-transform: lowercase;
display: block;
position: relative;
}
.placeholder-mono::after {
content: "";
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 48px;
height: 1px;
background: var(--bronze);
}
.placeholder-caption {
font-family: var(--font-body);
font-size: 12px;
color: var(--bronze);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
line-height: 1.4;
margin-top: var(--s-3);
max-width: 28ch;
}
.placeholder-note {
display: none !important;
}
.placeholder-frame:hover::before {
opacity: 0.55;
}
/* Etikett (V3 — Navy pill with aqua border) */
.hero-etikett,
.foto-etikett {
position: absolute;
z-index: 5;
bottom: 22px;
left: 22px;
background: rgba(15,42,68,0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--porcelain);
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
padding: 9px 16px 8px;
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1;
border-radius: var(--radius-pill);
border: 1px solid rgba(79,182,216,0.35);
}
.hero-etikett::before,
.foto-etikett::before {
content: "";
width: 14px;
height: 2px;
background: var(--aqua);
display: inline-block;
border-radius: 2px;
}
/* =====================================================
41. EDITORIAL V3 — TEAM GALLERY PLACEHOLDER
===================================================== */
.team-gallery .team-foto,
.team-gallery .team-foto.placeholder-frame {
aspect-ratio: 4 / 5;
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--shadow-card);
position: relative;
margin-bottom: var(--s-4);
}
.team-gallery .team-foto .placeholder-mono {
font-size: clamp(64px, 10vw, 128px);
}
.team-gallery .team-meta {
padding-top: var(--s-2);
border-top: 2px solid var(--aqua);
}
.team-gallery .team-name {
font-family: var(--font-headline);
font-weight: 500;
font-size: 22px;
color: var(--navy);
line-height: 1.15;
margin-bottom: 4px;
font-variation-settings: "opsz" 36;
}
.team-gallery .team-role {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
color: var(--aqua-deep);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
line-height: 1.4;
}
.team-gallery .team-card {
display: flex;
flex-direction: column;
transition: transform var(--d-med) var(--ease-out-2);
}
.team-gallery .team-card:hover {
transform: translateY(-4px);
}
.team-gallery .team-card:hover .team-foto {
box-shadow: var(--shadow-lift);
}
/* =====================================================
42. EDITORIAL V3 — HERO FOTO WRAP REFINEMENTS
===================================================== */
.hero-foto-wrap {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-lift);
background: var(--mist);
}
.hero-foto-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-foto-wrap.placeholder-frame .placeholder-inner {
aspect-ratio: 4 / 5;
min-height: 100%;
}
.hero-foto-wrap.placeholder-frame .placeholder-mono {
font-size: clamp(96px, 18vw, 220px);
}
/* =====================================================
43. EDITORIAL V3 — FAMILIEN FOTO (ueber-uns)
===================================================== */
.familien-foto {
position: relative;
aspect-ratio: 16 / 10;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-lift);
background: var(--mist);
}
.familien-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.familien-foto.placeholder-frame .placeholder-inner { aspect-ratio: 16 / 10; min-height: 100%; }
.familien-foto.placeholder-frame .placeholder-mono { font-size: clamp(84px, 16vw, 200px); }
/* =====================================================
44. V3 — AQUA/NAVY ACCENTS (legacy bronze-* aliases)
===================================================== */
.has-bronze-rule {
padding-top: var(--s-5);
border-top: 2px solid var(--aqua);
}
.has-bronze-rule--bottom {
padding-bottom: var(--s-5);
border-bottom: 2px solid var(--aqua);
}
.bronze-inline {
color: var(--aqua-deep);
font-style: italic;
font-family: var(--font-headline);
font-weight: 400;
}
.bronze-dash::before {
content: "";
display: inline-block;
width: 14px; height: 2px;
background: var(--aqua);
margin-right: 8px;
vertical-align: 4px;
border-radius: 2px;
}
/* Underline Link Hover (V3 aqua) */
a.bronze-link,
.footer-col a,
.chip-link,
.nav-link {
position: relative;
display: inline-block;
}
a.bronze-link::after,
.footer-col a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background: var(--aqua);
transform: scaleX(0);
transform-origin: right center;
transition: transform var(--d-med) var(--ease-out-2);
border-radius: 2px;
}
a.bronze-link:hover::after,
.footer-col a:hover::after {
transform: scaleX(1);
transform-origin: left center;
}
/* =====================================================
45. EDITORIAL V3 — GRID SUB-SECTIONS
===================================================== */
.region-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-5);
margin-top: var(--s-7);
}
.region-item {
padding: var(--s-5) var(--s-4);
border-top: 2px solid var(--aqua);
background: var(--white);
box-shadow: var(--shadow-card);
border-radius: var(--r-md);
display: flex;
flex-direction: column;
gap: var(--s-2);
position: relative;
transition: background var(--d-med) var(--ease-out-2), box-shadow var(--d-med) var(--ease-out-2), transform var(--d-med) var(--ease-out-2);
}
.region-item::before {
content: counter(region-counter, decimal-leading-zero);
counter-increment: region-counter;
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
color: var(--aqua-deep);
font-variant-numeric: tabular-nums;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
display: block;
margin-bottom: var(--s-2);
}
.region-list { counter-reset: region-counter; }
.region-item h3 {
font-family: var(--font-headline);
font-weight: 500;
font-size: 24px;
color: var(--navy);
line-height: 1.15;
font-variation-settings: "opsz" 48;
margin-bottom: 4px;
}
.region-item .region-meta {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
color: var(--aqua-deep);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
line-height: 1.4;
}
.region-item .region-cities {
font-size: 14px;
color: var(--navy);
opacity: 0.7;
line-height: 1.6;
margin-top: var(--s-2);
}
.region-item:hover {
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
@media (max-width: 767px) {
.region-list { grid-template-columns: 1fr; }
}
/* =====================================================
46. V3 — STAT TRIO REFINED (Navy trust-numbers)
===================================================== */
.zahlen-trio {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-8);
align-items: baseline;
padding: var(--s-6) 0;
border-top: 1px solid rgba(15,42,68,0.12);
border-bottom: 1px solid rgba(15,42,68,0.12);
}
.zahl-item {
display: flex;
flex-direction: column;
gap: var(--s-2);
position: relative;
}
.zahl-item + .zahl-item::before {
content: "";
position: absolute;
left: calc(var(--s-8) * -0.5);
top: 10%;
bottom: 10%;
width: 1px;
background: rgba(15,42,68,0.08);
}
.zahl-value {
font-family: var(--font-headline);
font-weight: 500;
font-size: clamp(3.2rem, 7vw, 6rem);
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--navy);
font-variation-settings: "opsz" 144;
font-feature-settings: "tnum" 1, "lnum" 1;
font-variant-numeric: tabular-nums;
display: flex;
align-items: baseline;
gap: 0.1em;
}
.zahl-value .zahl-suffix {
font-size: 0.4em;
color: var(--aqua-deep);
font-weight: 500;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
.zahl-label {
font-family: var(--font-body);
font-size: 12px;
color: var(--aqua-deep);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
line-height: 1.4;
font-weight: 700;
}
.zahl-sublabel {
font-family: var(--font-body);
font-size: 14px;
color: var(--navy);
opacity: 0.7;
line-height: 1.5;
max-width: 26ch;
}
@media (max-width: 767px) {
.zahlen-trio { grid-template-columns: 1fr; gap: var(--s-6); }
.zahl-item + .zahl-item::before { display: none; }
.zahl-item { padding-top: var(--s-5); border-top: 1px solid var(--hairline-soft); }
.zahl-item:first-child { padding-top: 0; border-top: none; }
}
/* =====================================================
47. V3 — BUTTON ARROW REFINEMENTS (hook into main buttons)
===================================================== */
.btn-primary .arrow,
.btn-ghost .arrow,
.btn-secondary .arrow {
display: inline-block;
transition: transform var(--d-med) var(--ease-out-2);
}
.btn-primary:hover .arrow,
.btn-ghost:hover .arrow,
.btn-secondary:hover .arrow {
transform: translateX(4px);
}
/* =====================================================
48. EDITORIAL V3 — TIMELINE VERTICAL
===================================================== */
.timeline {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-8);
padding-left: var(--s-7);
}
.timeline .timeline-vertical {
position: absolute;
left: var(--s-4);
top: 8px;
bottom: 8px;
width: 2px;
background: linear-gradient(to bottom, var(--aqua), var(--aqua-deep));
transform-origin: top center;
border-radius: 2px;
}
.timeline-item {
position: relative;
padding-left: var(--s-5);
}
.timeline-item::before {
content: "";
position: absolute;
left: calc(var(--s-4) * -1 - 5px);
top: 10px;
width: 12px;
height: 12px;
background: var(--white);
border: 2px solid var(--aqua);
border-radius: 50%;
z-index: 2;
transition: all var(--d-fast);
}
.timeline-item:hover::before {
background: var(--aqua);
box-shadow: 0 0 0 4px rgba(79,182,216,0.22);
}
.timeline-year {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
color: var(--aqua-deep);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
margin-bottom: 4px;
display: block;
}
.timeline-title {
font-family: var(--font-headline);
font-weight: 500;
font-size: 22px;
line-height: 1.2;
color: var(--navy);
font-variation-settings: "opsz" 36;
margin-bottom: var(--s-2);
}
.timeline-body {
font-size: 15px;
line-height: 1.6;
color: var(--navy);
opacity: 0.82;
max-width: 58ch;
}
@media (max-width: 767px) {
.timeline { padding-left: var(--s-5); gap: var(--s-6); }
.timeline-vertical { left: var(--s-3); }
.timeline-item::before { left: calc(var(--s-3) * -1 - 4px); }
}
/* =====================================================
49. EDITORIAL V3 — KONTAKT-GRID REFINED
===================================================== */
.kontakt-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(48px, 6vw, 96px);
align-items: start;
}
.kontakt-info {
display: flex;
flex-direction: column;
gap: var(--s-5);
padding-right: var(--s-5);
}
.kontakt-info-block {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: var(--s-4);
border-top: 1px solid rgba(15,42,68,0.1);
}
.kontakt-info-block:first-of-type {
border-top: 2px solid var(--aqua);
}
.kontakt-info-label {
font-family: var(--font-body);
font-size: 11px;
color: var(--aqua-deep);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
line-height: 1;
font-weight: 700;
}
.kontakt-info-value {
font-family: var(--font-headline);
font-weight: 500;
font-size: 22px;
line-height: 1.3;
color: var(--navy);
font-variation-settings: "opsz" 36;
}
.kontakt-info-value a { color: inherit; position: relative; transition: color var(--d-fast); }
.kontakt-info-value a:hover { color: var(--aqua-deep); }
.kontakt-info-meta {
font-family: var(--font-body);
font-size: 13px;
color: var(--navy);
opacity: 0.7;
line-height: 1.5;
margin-top: 4px;
}
@media (max-width: 1023px) {
.kontakt-grid { grid-template-columns: 1fr; gap: var(--s-8); }
.kontakt-info { padding-right: 0; }
}
/* =====================================================
50. EDITORIAL V3 — FORM REFINEMENTS
===================================================== */
.form-editorial {
display: flex;
flex-direction: column;
gap: var(--s-5);
background: var(--white);
padding: var(--s-7) var(--s-6);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
position: relative;
border-top: 3px solid var(--aqua);
}
.form-editorial::before {
content: "";
position: absolute;
top: -3px;
left: 0;
width: 96px;
height: 3px;
background: linear-gradient(90deg, var(--aqua), var(--aqua-deep));
}
.form-row {
display: grid;
gap: var(--s-5);
grid-template-columns: 1fr 1fr;
}
.form-row--full { grid-template-columns: 1fr; }
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-field label {
font-family: var(--font-body);
font-size: 11px;
color: var(--aqua-deep);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
font-weight: 700;
line-height: 1;
}
.form-field input,
.form-field textarea,
.form-field select {
font-family: var(--font-body);
font-size: 16px;
color: var(--navy);
background: transparent;
border: none;
border-bottom: 1px solid rgba(15,42,68,0.18);
padding: 10px 0 8px;
line-height: 1.4;
transition: border-color var(--d-fast) var(--ease-out-2), box-shadow var(--d-fast);
border-radius: 0;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
outline: none;
border-bottom-color: var(--aqua);
box-shadow: 0 1px 0 var(--aqua);
}
.form-field textarea {
min-height: 120px;
resize: vertical;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: rgba(15,42,68,0.45);
font-family: var(--font-body);
}
.form-meta {
font-family: var(--font-body);
font-size: 13px;
color: var(--navy);
opacity: 0.72;
line-height: 1.5;
padding-top: var(--s-3);
border-top: 1px solid rgba(15,42,68,0.1);
}
.form-actions {
display: flex;
gap: var(--s-4);
align-items: center;
flex-wrap: wrap;
}
@media (max-width: 767px) {
.form-editorial { padding: var(--s-5) var(--s-4); }
.form-row { grid-template-columns: 1fr; gap: var(--s-4); }
}
/* Honeypot (hidden) */
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
/* =====================================================
51. EDITORIAL V3 — ZIELGRUPPEN-CARDS
===================================================== */
.zielgruppen-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-5);
margin-top: var(--s-7);
}
/* .zielgruppen-card already styled in section 12 — kept compatible */
.zielgruppen-card .card-num {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
color: var(--aqua-deep);
line-height: 1;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.zielgruppen-card h3 {
font-family: var(--font-headline);
font-weight: 500;
font-size: 22px;
line-height: 1.2;
color: var(--navy);
font-variation-settings: "opsz" 36;
margin-bottom: var(--s-2);
max-width: 18ch;
}
.zielgruppen-card p {
font-size: 14px;
line-height: 1.55;
color: var(--navy);
opacity: 0.82;
margin-bottom: auto;
}
.zielgruppen-card .card-link {
font-family: var(--font-body);
font-size: 12px;
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
color: var(--aqua-deep);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1;
margin-top: var(--s-4);
transition: color var(--d-fast);
}
.zielgruppen-card .card-link::after {
content: "→";
transition: transform var(--d-med) var(--ease-out-2);
}
.zielgruppen-card:hover .card-link::after { transform: translateX(4px); }
@media (max-width: 1023px) {
.zielgruppen-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.zielgruppen-grid { grid-template-columns: 1fr; gap: var(--s-4); }
.zielgruppen-card { min-height: auto; }
}
/* =====================================================
52. EDITORIAL V3 — TESTIMONIAL-CARD REFINED
===================================================== */
.testimonial-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-5);
margin-top: var(--s-7);
}
.testimonial-grid .testimonial-card {
padding: var(--s-6) var(--s-5);
background: var(--white);
box-shadow: var(--shadow-card);
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-4);
min-height: 280px;
border-radius: var(--r-lg);
overflow: hidden;
transition: box-shadow var(--d-slow) var(--ease-wipe), transform var(--d-slow) var(--ease-wipe);
}
.testimonial-grid .testimonial-card:hover {
box-shadow: var(--shadow-lift);
transform: translateY(-4px);
}
.testimonial-grid .testimonial-card .card-top-line {
position: absolute;
top: 0;
left: 0;
width: 72px;
height: 3px;
background: var(--aqua);
transform-origin: left;
}
.testimonial-card .quote-mark-sm {
font-family: var(--font-headline);
font-weight: 500;
font-size: 48px;
color: var(--aqua);
line-height: 0.4;
font-variation-settings: "opsz" 144;
opacity: 0.7;
}
.testimonial-card .testimonial-body {
font-family: var(--font-headline);
font-weight: 400;
font-style: italic;
font-size: 18px;
line-height: 1.5;
color: var(--navy);
font-variation-settings: "opsz" 36;
flex: 1;
}
.testimonial-card .testimonial-author {
padding-top: var(--s-3);
border-top: 1px solid rgba(15,42,68,0.1);
display: flex;
flex-direction: column;
gap: 4px;
}
.testimonial-card .author-name {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--navy);
}
.testimonial-card .author-role {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
color: var(--aqua-deep);
text-transform: uppercase;
letter-spacing: var(--ls-meta);
}
@media (max-width: 767px) {
.testimonial-grid { grid-template-columns: 1fr; }
.testimonial-card { min-height: auto; padding: var(--s-5) var(--s-4); }
}
/* =====================================================
53. EDITORIAL V3 — TRUST-FACTS BAND
===================================================== */
.trust-facts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 2px solid var(--aqua);
border-bottom: 2px solid var(--aqua);
background: var(--white);
border-radius: var(--r-md);
box-shadow: var(--shadow-card);
}
.trust-fact {
padding: var(--s-5) var(--s-4);
border-right: 1px solid rgba(15,42,68,0.1);
display: flex;
flex-direction: column;
gap: 6px;
}
.trust-fact:last-child { border-right: none; }
.trust-fact-label {
font-family: var(--font-body);
font-size: 11px;
color: var(--aqua-deep);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
font-weight: 700;
line-height: 1;
}
.trust-fact-value {
font-family: var(--font-headline);
font-weight: 500;
font-size: 28px;
line-height: 1.1;
color: var(--navy);
font-variation-settings: "opsz" 48;
font-feature-settings: "tnum" 1, "lnum" 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.trust-fact-meta {
font-family: var(--font-body);
font-size: 12px;
color: var(--navy);
opacity: 0.65;
line-height: 1.4;
}
@media (max-width: 1023px) {
.trust-facts { grid-template-columns: repeat(2, 1fr); }
.trust-fact:nth-child(2) { border-right: none; }
.trust-fact:nth-child(1),
.trust-fact:nth-child(2) { border-bottom: 1px solid var(--hairline-soft); }
}
@media (max-width: 599px) {
.trust-facts { grid-template-columns: 1fr; }
.trust-fact { border-right: none; border-bottom: 1px solid var(--hairline-soft); }
.trust-fact:last-child { border-bottom: none; }
}
/* =====================================================
54. EDITORIAL V3 — LEISTUNG GRID CARDS
===================================================== */
.leistung-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-5);
margin-top: var(--s-7);
}
/* .leistung-card base styles already defined in Section 13 (V3 white card + navy→aqua border-bottom). These remain as late-loaded specifics. */
.leistung-card .card-num {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
color: var(--aqua-deep);
line-height: 1;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
margin-bottom: var(--s-2);
}
.leistung-card h3 {
font-family: var(--font-headline);
font-weight: 500;
font-size: 22px;
line-height: 1.15;
color: var(--navy);
font-variation-settings: "opsz" 36;
max-width: 18ch;
transition: color var(--d-fast) var(--ease-out-2);
}
.leistung-card:hover h3 { color: var(--aqua-deep); }
.leistung-card p {
font-size: 14px;
line-height: 1.6;
color: var(--navy);
opacity: 0.82;
flex: 1;
}
.leistung-card .card-link {
font-family: var(--font-body);
font-size: 12px;
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
color: var(--aqua-deep);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--s-3);
padding-top: var(--s-3);
border-top: 1px solid rgba(15,42,68,0.1);
line-height: 1;
}
.leistung-card .card-link::after {
content: "→";
transition: transform var(--d-med) var(--ease-out-2);
}
.leistung-card:hover .card-link::after { transform: translateX(4px); }
@media (max-width: 1023px) {
.leistung-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
.leistung-grid { grid-template-columns: 1fr; gap: var(--s-3); }
.leistung-card { min-height: auto; }
}
/* =====================================================
55. EDITORIAL V3 — RESPONSIVE FINE-TUNING
===================================================== */
@media (max-width: 1199px) {
.einsatz-teaser .einsatz-grid {
grid-template-columns: 1fr;
gap: var(--s-7);
}
.einsatz-text, .einsatz-map {
grid-column: 1 / -1;
}
.einsatz-map { max-width: 520px; }
}
@media (max-width: 1023px) {
.leistung-spread .spread-grid { grid-template-columns: 1fr; gap: var(--s-6); }
.leistung-spread .spread-text,
.leistung-spread .spread-foto { grid-column: 1 / -1; order: unset !important; }
}
@media (max-width: 767px) {
.section {
padding-top: clamp(88px, 18vw, 140px);
padding-bottom: clamp(88px, 18vw, 140px);
}
.sub-hero { padding-top: var(--s-8); padding-bottom: var(--s-7); }
.placeholder-mono { font-size: clamp(64px, 20vw, 128px); }
.placeholder-note { right: 16px; top: 16px; font-size: 10px; }
.hero-etikett, .foto-etikett { bottom: 14px; left: 14px; padding: 6px 10px 5px; font-size: 10px; }
}
/* =====================================================
56. V3 — SAUBER-LINIE (legacy alias for Wischstrich)
===================================================== */
.sauber-line {
display: block;
height: 2px;
background: var(--aqua);
transform-origin: left center;
transform: scaleX(0);
border-radius: 2px;
}
.sauber-line--hero { width: 96px; margin: var(--s-4) 0; box-shadow: 0 0 8px rgba(79,182,216,0.4); }
.sauber-line--section { width: 48px; margin: var(--s-2) 0 var(--s-3); }
.sauber-line--centered { margin-left: auto; margin-right: auto; transform-origin: center; }
/* =====================================================
57. EDITORIAL V3 — PAGE-WIPE TRANSITION
===================================================== */
.page-wipe {
position: fixed;
inset: 0;
z-index: var(--z-page-wipe);
background: var(--navy);
transform-origin: top center;
transform: scaleY(0);
pointer-events: none;
}
.page-wipe.is-leaving {
transform-origin: bottom center;
}
/* =====================================================
58. EDITORIAL V3 — FILM GRAIN
===================================================== */
.grain {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='11'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23g)' opacity='0.4'/%3E%3C/svg%3E");
mix-blend-mode: multiply;
opacity: 0.06;
}
/* =====================================================
59. EDITORIAL V3 — PROCESS-CONNECTOR
===================================================== */
.process-section { background: var(--paper); }
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-5);
position: relative;
margin-top: var(--s-7);
}
.process-step {
display: flex;
flex-direction: column;
gap: var(--s-3);
padding-top: var(--s-6);
position: relative;
}
.process-step::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--aqua);
border-radius: 2px;
}
.process-step .step-num {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
color: var(--aqua-deep);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.process-step h3 {
font-family: var(--font-headline);
font-weight: 500;
font-size: 20px;
line-height: 1.2;
color: var(--navy);
font-variation-settings: "opsz" 36;
max-width: 16ch;
}
.process-step p {
font-size: 14px;
line-height: 1.55;
color: var(--navy);
opacity: 0.82;
}
@media (max-width: 1023px) {
.process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
.process-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}
/* =====================================================
60. EDITORIAL V3 — CAPTION FAMILY
===================================================== */
.caption,
.caption-italic,
.hero-caption {
font-family: var(--font-body);
font-style: normal;
font-weight: 500;
font-size: 13px;
color: var(--aqua-deep);
line-height: 1.5;
letter-spacing: var(--ls-meta);
}
.caption--mono {
font-family: var(--font-body);
font-style: normal;
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
font-weight: 700;
color: var(--aqua-deep);
font-size: 11px;
}
.caption-block {
padding-top: var(--s-3);
border-top: 1px solid rgba(15,42,68,0.08);
margin-top: var(--s-3);
}
/* =====================================================
61. EDITORIAL V3 — IMAGE PARALLAX WRAPPER
===================================================== */
[data-parallax] {
will-change: transform;
}
.parallax-wrap {
overflow: hidden;
position: relative;
isolation: isolate;
}
.parallax-wrap > img,
.parallax-wrap > .placeholder-inner {
width: 100%;
height: 110%;
object-fit: cover;
display: block;
will-change: transform;
}
/* =====================================================
62. EDITORIAL V3 — PULL-QUOTE INLINE
===================================================== */
.pull-quote {
font-family: var(--font-headline);
font-weight: 400;
font-style: italic;
font-size: clamp(1.4rem, 2.4vw, 2rem);
line-height: 1.35;
color: var(--navy);
font-variation-settings: "opsz" 60;
padding: var(--s-5) 0 var(--s-5) var(--s-5);
border-left: 3px solid var(--aqua);
margin: var(--s-6) 0;
max-width: 48ch;
position: relative;
}
.pull-quote::before {
content: "„";
position: absolute;
top: 0;
left: -8px;
font-size: 48px;
color: var(--aqua);
line-height: 1;
font-family: var(--font-headline);
font-variation-settings: "opsz" 144;
}
.pull-quote cite {
display: block;
font-style: normal;
font-size: 12px;
color: var(--aqua-deep);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
font-family: var(--font-body);
font-weight: 700;
margin-top: var(--s-3);
}
.pull-quote cite::before { content: "— "; }
/* =====================================================
63. EDITORIAL V3 — NAV REFINEMENTS
===================================================== */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-nav);
padding: var(--s-3) var(--page-px-desktop);
background: transparent;
transition: background var(--d-med) var(--ease-out-2),
backdrop-filter var(--d-med) var(--ease-out-2);
}
.nav.is-stuck {
background: rgba(247, 249, 251, 0.92);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid rgba(15,42,68,0.08);
box-shadow: 0 2px 8px rgba(15,42,68,0.04);
}
.nav-inner {
max-width: var(--container-max);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-5);
}
.nav-logo {
font-family: var(--font-headline);
font-weight: 500;
font-size: 20px;
color: var(--navy);
letter-spacing: -0.02em;
display: inline-flex;
align-items: baseline;
gap: 4px;
font-variation-settings: "opsz" 36;
line-height: 1;
}
.nav-logo .logo-dot {
display: inline-block;
width: 8px;
height: 8px;
background: var(--aqua);
border-radius: 50%;
position: relative;
top: -4px;
box-shadow: 0 0 8px rgba(79,182,216,0.55);
}
.nav-links {
display: flex;
gap: var(--s-5);
align-items: center;
}
.nav-link {
font-family: var(--font-body);
font-size: 13px;
color: var(--graphite);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
font-weight: 500;
line-height: 1;
padding: 8px 0;
position: relative;
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: 4px;
width: 100%;
height: 2px;
background: var(--aqua);
transform: scaleX(0);
transform-origin: right center;
transition: transform var(--d-med) var(--ease-out-2);
border-radius: 2px;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
transform: scaleX(1);
transform-origin: left center;
}
.nav-cta {
margin-left: var(--s-3);
}
.nav-burger {
display: none;
width: 44px;
height: 44px;
background: transparent;
border: 1px solid rgba(15,42,68,0.18);
border-radius: var(--r-sm);
position: relative;
cursor: pointer;
transition: border-color var(--d-fast), background var(--d-fast);
}
.nav-burger:hover {
border-color: var(--aqua);
background: var(--aqua-soft);
}
.nav-burger span {
position: absolute;
left: 12px;
right: 12px;
height: 2px;
background: var(--navy);
border-radius: 2px;
transition: background var(--d-fast);
}
.nav-burger:hover span { background: var(--aqua-deep); }
.nav-burger span:nth-child(1) { top: 16px; }
.nav-burger span:nth-child(2) { top: 22px; }
.nav-burger span:nth-child(3) { top: 28px; }
@media (max-width: 1023px) {
.nav { padding: var(--s-3) var(--page-px-mobile); }
.nav-links { display: none; }
.nav-burger { display: block; }
}
/* =====================================================
64. EDITORIAL V3 — NAV OVERLAY (MOBILE)
===================================================== */
.nav-overlay {
position: fixed;
inset: 0;
z-index: calc(var(--z-nav) - 1);
background: var(--navy);
padding: var(--s-10) var(--page-px-mobile);
display: none;
flex-direction: column;
gap: var(--s-3);
clip-path: inset(0 0 100% 0);
overflow: hidden;
}
.nav-overlay::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 80% 20%, rgba(79,182,216,0.18) 0%, transparent 55%);
pointer-events: none;
}
.nav-overlay.is-open {
display: flex;
}
.nav-overlay .nav-link {
font-family: var(--font-headline);
font-weight: 500;
font-size: clamp(2.4rem, 8vw, 4rem);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--porcelain);
text-transform: none;
font-variation-settings: "opsz" 144;
padding: var(--s-3) 0;
border-bottom: 1px solid rgba(79,182,216,0.22);
width: 100%;
position: relative;
z-index: 1;
}
.nav-overlay .nav-link::after { background: var(--aqua); }
.nav-overlay .nav-meta {
margin-top: auto;
font-family: var(--font-body);
font-size: 12px;
color: var(--aqua);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
line-height: 1.6;
position: relative;
z-index: 1;
}
/* =====================================================
65. EDITORIAL V3 — HEADLINE OVERFLOW SAFETY
===================================================== */
.h1-hero,
.h1-sub,
.h2,
.h3 {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
-webkit-hyphens: auto;
}
@media (max-width: 599px) {
.h1-hero { font-size: clamp(2.4rem, 10.5vw, 4rem); line-height: 1.02; letter-spacing: -0.02em; }
.h1-sub {
font-size: clamp(1.85rem, 7.6vw, 2.8rem);
line-height: 1.08;
letter-spacing: -0.01em;
word-break: normal;
overflow-wrap: break-word;
hyphens: auto;
-webkit-hyphens: auto;
max-width: 100%;
}
.h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
.h3 { font-size: clamp(1.3rem, 5vw, 1.7rem); }
.hero-wrap, .sub-hero-inner { overflow: visible; }
.sub-hero { padding-top: var(--s-7); padding-bottom: var(--s-6); }
.sub-hero-inner { gap: var(--s-3); }
.sub-hero .h1-sub { max-width: 100%; }
.sub-hero .lead { font-size: 15px; line-height: 1.55; }
.hero { overflow-x: clip; }
/* Globaler Section-Overflow-Guard (verhindert horizontales Scrollen / Mini-Preview) */
section { overflow-x: clip; max-width: 100vw; }
.container { max-width: 100vw; box-sizing: border-box; }
/* Defensive: Kein Element darf > 100vw werden */
body * { max-width: 100vw; }
img, video { max-width: 100%; height: auto; }
}
@media (max-width: 374px) {
.h1-hero { font-size: clamp(2rem, 11vw, 3rem); }
.h1-sub { font-size: clamp(1.9rem, 9.5vw, 2.8rem); }
}
/* =====================================================
66. V3 — BADGE-ROW (Trust-Leiste unter Hero)
===================================================== */
.badge-row {
background: var(--white);
border-top: 1px solid rgba(15,42,68,0.08);
border-bottom: 1px solid rgba(15,42,68,0.08);
padding: var(--s-5) 0;
position: relative;
}
.badge-row-inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--page-px-desktop);
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--s-5);
align-items: center;
}
.badge-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
position: relative;
transition: transform var(--d-fast) var(--ease-out-2);
}
.badge-item:hover { transform: translateY(-2px); }
.badge-item:not(:last-child)::after {
content: "";
position: absolute;
top: 15%;
right: calc(var(--s-5) * -0.5);
height: 70%;
width: 1px;
background: rgba(15,42,68,0.1);
}
.badge-icon {
width: 32px; height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--aqua-deep);
}
.badge-icon svg { width: 100%; height: 100%; }
.badge-label {
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
color: var(--navy);
letter-spacing: 0.02em;
line-height: 1.3;
max-width: 15ch;
}
.badge-meta {
font-family: var(--font-body);
font-size: 11px;
color: var(--navy);
opacity: 0.6;
letter-spacing: var(--ls-meta);
text-transform: uppercase;
}
@media (max-width: 1199px) {
.badge-row-inner { grid-template-columns: repeat(3, 1fr); gap: var(--s-5) var(--s-4); }
.badge-item:nth-child(3n)::after { display: none; }
}
@media (max-width: 599px) {
.badge-row-inner { grid-template-columns: repeat(2, 1fr); padding: 0 var(--page-px-mobile); }
.badge-item::after { display: none !important; }
.badge-item { gap: 6px; }
}
/* =====================================================
67. V3 — BEFORE / AFTER SLIDER
===================================================== */
.ba-section {
background: var(--navy);
color: var(--porcelain);
position: relative;
overflow: hidden;
}
.ba-section::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 15% 90%, rgba(79,182,216,0.18) 0%, transparent 55%);
pointer-events: none;
}
.ba-section .section-head { color: var(--porcelain); position: relative; z-index: 1; }
.ba-section .section-head h2 { color: var(--porcelain); }
.ba-section .section-head .eyebrow { color: var(--aqua); }
.ba-section .section-head .eyebrow::before { background: var(--aqua); }
.ba-section .section-head .lead { color: rgba(247,249,251,0.78); }
.ba-slider {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
border-radius: var(--r-lg);
overflow: hidden;
user-select: none;
cursor: col-resize;
box-shadow: 0 20px 60px rgba(0,0,0,0.35);
background: var(--navy-2);
margin: var(--s-6) auto 0;
max-width: 1100px;
z-index: 1;
}
.ba-slider img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.ba-slider .ba-after-wrap {
position: absolute;
inset: 0;
clip-path: inset(0 50% 0 0);
will-change: clip-path;
}
.ba-slider .ba-label {
position: absolute;
top: var(--s-4);
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
background: rgba(15,42,68,0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--porcelain);
padding: 8px 14px;
border-radius: var(--radius-pill);
z-index: 3;
pointer-events: none;
border: 1px solid rgba(79,182,216,0.35);
}
.ba-slider .ba-label--before { left: var(--s-4); }
.ba-slider .ba-label--after {
right: var(--s-4);
background: var(--aqua);
color: var(--navy);
border-color: var(--aqua);
}
.ba-slider .ba-handle {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
background: var(--aqua);
transform: translateX(-50%);
z-index: 4;
pointer-events: none;
box-shadow: 0 0 20px rgba(79,182,216,0.5);
}
.ba-slider .ba-handle-grip {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 48px; height: 48px;
border-radius: 50%;
background: var(--aqua);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(15,42,68,0.5), 0 0 0 4px rgba(247,249,251,0.12);
transition: transform var(--d-fast) var(--ease-out-2);
}
.ba-slider:hover .ba-handle-grip { transform: translate(-50%,-50%) scale(1.08); }
.ba-slider .ba-handle-grip::before,
.ba-slider .ba-handle-grip::after {
content: "";
position: absolute;
top: 50%;
width: 0; height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
transform: translateY(-50%);
}
.ba-slider .ba-handle-grip::before {
left: 12px;
border-right: 7px solid var(--navy);
}
.ba-slider .ba-handle-grip::after {
right: 12px;
border-left: 7px solid var(--navy);
}
@media (max-width: 767px) {
.ba-slider { aspect-ratio: 4 / 5; }
.ba-slider .ba-label { font-size: 10px; padding: 6px 10px; }
.ba-slider .ba-handle-grip { width: 40px; height: 40px; }
}
/* =====================================================
68. V3 — GERAETE-SHOWCASE (Scroll Horizontal-Feel)
===================================================== */
.geraete-showcase {
background: var(--porcelain);
padding: var(--s-11) 0;
overflow: hidden;
position: relative;
}
.geraete-showcase .section-head {
max-width: var(--container-max);
margin: 0 auto var(--s-7);
padding: 0 var(--page-px-desktop);
}
.geraete-track {
display: flex;
gap: var(--s-5);
padding: 0 var(--page-px-desktop);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.geraete-track::-webkit-scrollbar { display: none; }
.geraete-card {
flex: 0 0 320px;
background: var(--white);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
scroll-snap-align: start;
transition: transform var(--d-slow) var(--ease-wipe), box-shadow var(--d-slow) var(--ease-wipe);
border-bottom: 3px solid transparent;
}
.geraete-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lift);
border-bottom-color: var(--aqua);
}
.geraete-card__media {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--mist);
position: relative;
}
.geraete-card__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1s var(--ease-wipe);
}
.geraete-card:hover .geraete-card__media img { transform: scale(1.06); }
.geraete-card__body {
padding: var(--s-5) var(--s-5) var(--s-6);
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.geraete-card__meta {
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
color: var(--aqua-deep);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
}
.geraete-card__title {
font-family: var(--font-headline);
font-weight: 500;
font-size: 22px;
color: var(--navy);
line-height: 1.2;
font-variation-settings: "opsz" 36;
}
.geraete-card__desc {
font-family: var(--font-body);
font-size: 14px;
color: var(--navy);
opacity: 0.78;
line-height: 1.55;
margin-top: var(--s-1);
}
.geraete-card__tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
color: var(--navy);
background: var(--aqua-soft);
padding: 6px 10px;
border-radius: var(--radius-pill);
margin-top: var(--s-3);
align-self: flex-start;
letter-spacing: var(--ls-meta);
text-transform: uppercase;
}
.geraete-card__tag::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--aqua-deep);
}
.geraete-hint {
max-width: var(--container-max);
margin: var(--s-5) auto 0;
padding: 0 var(--page-px-desktop);
font-family: var(--font-body);
font-size: 12px;
color: var(--navy);
opacity: 0.55;
letter-spacing: var(--ls-meta);
text-transform: uppercase;
display: flex;
align-items: center;
gap: var(--s-2);
}
.geraete-hint::before {
content: "←";
font-size: 16px;
opacity: 0.8;
}
.geraete-hint::after {
content: "→";
font-size: 16px;
opacity: 0.8;
}
@media (max-width: 767px) {
.geraete-card { flex: 0 0 280px; }
.geraete-track { padding: 0 var(--page-px-mobile); }
.geraete-hint { padding: 0 var(--page-px-mobile); }
}
/* =====================================================
69. V3 — TEAM-MOSAIC (bento-grid mit variablen Höhen)
===================================================== */
.team-mosaic {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 120px;
gap: var(--s-3);
margin-top: var(--s-7);
}
.team-mosaic__item {
position: relative;
overflow: hidden;
border-radius: var(--r-md);
box-shadow: var(--shadow-card);
background: var(--mist);
transition: transform var(--d-slow) var(--ease-wipe), box-shadow var(--d-slow) var(--ease-wipe);
}
.team-mosaic__item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
}
.team-mosaic__item img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-wipe);
}
.team-mosaic__item:hover img { transform: scale(1.05); }
.team-mosaic__item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 55%, rgba(15,42,68,0.75));
pointer-events: none;
opacity: 0;
transition: opacity var(--d-slow);
}
.team-mosaic__item:hover::after { opacity: 1; }
.team-mosaic__caption {
position: absolute;
bottom: var(--s-3);
left: var(--s-3);
right: var(--s-3);
color: var(--porcelain);
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
line-height: 1.3;
z-index: 2;
opacity: 0;
transform: translateY(8px);
transition: opacity var(--d-slow), transform var(--d-slow);
pointer-events: none;
}
.team-mosaic__item:hover .team-mosaic__caption {
opacity: 1;
transform: translateY(0);
}
.team-mosaic__caption small {
display: block;
font-size: 10px;
font-weight: 500;
color: var(--aqua);
letter-spacing: var(--ls-meta);
text-transform: uppercase;
margin-top: 2px;
}
/* Bento layout patterns */
.team-mosaic__item--lead {
grid-column: span 3;
grid-row: span 3;
}
.team-mosaic__item--tall {
grid-column: span 2;
grid-row: span 3;
}
.team-mosaic__item--wide {
grid-column: span 2;
grid-row: span 2;
}
.team-mosaic__item--std {
grid-column: span 1;
grid-row: span 2;
}
.team-mosaic__item--sm {
grid-column: span 2;
grid-row: span 1;
}
@media (max-width: 1023px) {
.team-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 100px; }
.team-mosaic__item--lead { grid-column: span 4; grid-row: span 3; }
.team-mosaic__item--tall { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 599px) {
.team-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
.team-mosaic__item { grid-column: span 1 !important; grid-row: span 1 !important; }
.team-mosaic__item--lead { grid-column: span 2 !important; grid-row: span 2 !important; }
}
/* =====================================================
70. V3 — BADGE TRUST / SIEGEL ICONS (DEKRA, Meister, etc.)
===================================================== */
.badge-trust {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 8px 14px;
background: var(--white);
border: 1px solid rgba(15,42,68,0.14);
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
color: var(--navy);
letter-spacing: var(--ls-meta);
text-transform: uppercase;
transition: all var(--d-fast) var(--ease-out-2);
box-shadow: var(--shadow-card);
}
.badge-trust::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--aqua);
box-shadow: 0 0 6px rgba(79,182,216,0.55);
}
.badge-trust:hover {
border-color: var(--aqua);
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.badge-trust--gold::before {
background: var(--brass);
box-shadow: 0 0 6px rgba(232,169,59,0.55);
}
.badge-row--trust {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
margin-top: var(--s-5);
}
/* =====================================================
71. V3 — CTA-XL (großer Primary Button)
===================================================== */
.btn-cta-xl {
display: inline-flex;
align-items: center;
gap: var(--s-3);
background: var(--aqua);
color: var(--navy);
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
padding: 20px 32px 18px;
border: none;
border-radius: var(--r-md);
cursor: pointer;
line-height: 1;
position: relative;
overflow: hidden;
transition: transform var(--d-fast) var(--ease-out-2), box-shadow var(--d-fast) var(--ease-out-2);
box-shadow: 0 6px 18px rgba(79,182,216,0.45);
}
.btn-cta-xl:hover {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(79,182,216,0.55);
background: var(--aqua-deep);
color: var(--porcelain);
}
/* =====================================================
72. V3 — SECTION ALTERNATION CLASSES (guaranteed)
===================================================== */
.section.bg-navy,
section.bg-navy { background: var(--navy); color: var(--porcelain); }
.section.bg-navy-2,
section.bg-navy-2 { background: var(--navy-2); color: var(--porcelain); }
.section.bg-porcelain,
section.bg-porcelain { background: var(--porcelain); color: var(--navy); }
.section.bg-white,
section.bg-white { background: var(--white); color: var(--navy); }
.section.bg-mist,
section.bg-mist { background: var(--mist); color: var(--navy); }
.section.bg-aqua-soft,
section.bg-aqua-soft { background: var(--aqua-soft); color: var(--navy); }
.section.bg-aqua-wash,
section.bg-aqua-wash { background: var(--aqua-wash); color: var(--navy); }
.section.bg-brass-soft,
section.bg-brass-soft { background: var(--brass-soft); color: var(--navy); }
/* Typography on dark sections */
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4,
.bg-navy-2 h1, .bg-navy-2 h2, .bg-navy-2 h3, .bg-navy-2 h4 {
color: var(--porcelain);
}
.bg-navy .body-text, .bg-navy p,
.bg-navy-2 .body-text, .bg-navy-2 p {
color: rgba(247,249,251,0.82);
}
.bg-navy .eyebrow, .bg-navy-2 .eyebrow { color: var(--aqua); }
.bg-navy .eyebrow::before, .bg-navy-2 .eyebrow::before { background: var(--aqua); }
/* =====================================================
73. V3 — HERO FULL-BLEED + BUBBLES + WISCHSTRICH
===================================================== */
.hero--v3 {
position: relative;
min-height: 92vh;
padding: 0;
display: flex;
align-items: center;
overflow: hidden;
background: var(--navy);
color: var(--porcelain);
}
.hero--v3 .hero-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero--v3 .hero-bg img {
width: 100%; height: 100%;
object-fit: cover;
will-change: transform;
}
.hero--v3 .hero-bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(15,42,68,0.85) 0%, rgba(15,42,68,0.5) 55%, rgba(15,42,68,0.35) 100%),
linear-gradient(to bottom, rgba(15,42,68,0.2) 0%, transparent 30%, rgba(15,42,68,0.45) 100%);
}
.hero--v3 .hero-content {
position: relative;
z-index: 2;
max-width: var(--container-max);
margin: 0 auto;
padding: calc(var(--nav-h) + var(--s-7)) var(--page-px-desktop) var(--s-9);
width: 100%;
}
.hero--v3 .hero-content > .eyebrow { color: var(--aqua); }
.hero--v3 .hero-content > .eyebrow::before { background: var(--aqua); }
.hero--v3 h1, .hero--v3 .h1-hero {
color: var(--porcelain);
max-width: 18ch;
text-shadow: 0 2px 16px rgba(15,42,68,0.25);
}
.hero--v3 .lead {
color: rgba(247,249,251,0.88);
max-width: 52ch;
margin-top: var(--s-4);
}
.hero--v3 .hero-ctas {
margin-top: var(--s-6);
display: flex;
gap: var(--s-3);
flex-wrap: wrap;
}
.hero--v3 .btn-primary {
background: var(--aqua);
color: var(--navy);
border-color: var(--aqua);
box-shadow: 0 6px 18px rgba(79,182,216,0.4);
}
.hero--v3 .btn-primary:hover { background: var(--aqua-deep); color: var(--porcelain); border-color: var(--aqua-deep); }
.hero--v3 .btn-ghost {
border-color: rgba(247,249,251,0.35);
color: var(--porcelain);
}
.hero--v3 .btn-ghost:hover {
border-color: var(--aqua);
color: var(--aqua);
}
.hero--v3 .siegel {
position: absolute;
top: calc(var(--nav-h) + var(--s-4));
right: var(--page-px-desktop);
z-index: 3;
}
/* Bubbles container */
.bubbles {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.bubble {
position: absolute;
bottom: -80px;
border-radius: 50%;
background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.15) 40%, rgba(79,182,216,0.14) 70%, rgba(79,182,216,0) 100%);
border: 1px solid rgba(255,255,255,0.18);
opacity: 0;
will-change: transform, opacity;
animation: bubble-drift linear infinite;
}
.bubble::after {
content: "";
position: absolute;
top: 15%;
left: 22%;
width: 18%;
height: 18%;
border-radius: 50%;
background: rgba(255,255,255,0.6);
filter: blur(1px);
}
.bubble:nth-child(1) { width: 42px; height: 42px; left: 8%; animation-duration: 18s; animation-delay: 0s; }
.bubble:nth-child(2) { width: 28px; height: 28px; left: 22%; animation-duration: 14s; animation-delay: 3s; }
.bubble:nth-child(3) { width: 60px; height: 60px; left: 38%; animation-duration: 22s; animation-delay: 6s; }
.bubble:nth-child(4) { width: 34px; height: 34px; left: 58%; animation-duration: 16s; animation-delay: 1.5s; }
.bubble:nth-child(5) { width: 48px; height: 48px; left: 72%; animation-duration: 20s; animation-delay: 8s; }
.bubble:nth-child(6) { width: 22px; height: 22px; left: 88%; animation-duration: 12s; animation-delay: 4.5s; }
@keyframes bubble-drift {
0% { transform: translateY(0) translateX(0) scale(0.4); opacity: 0; }
10% { opacity: 0.5; }
50% { transform: translateY(-50vh) translateX(12px) scale(0.85); opacity: 0.8; }
90% { opacity: 0.4; }
100% { transform: translateY(-100vh) translateX(-8px) scale(1); opacity: 0; }
}
/* Wischstrich (Squeegee Stroke) */
.wischstrich {
position: relative;
display: block;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--aqua) 10%, var(--aqua) 85%, transparent 100%);
transform: rotate(-0.6deg);
transform-origin: left center;
clip-path: inset(0 100% 0 0);
transition: clip-path var(--d-wipe) var(--ease-wipe);
border-radius: 2px;
}
.wischstrich.is-in { clip-path: inset(0 0% 0 0); }
.wischstrich::after {
content: "";
position: absolute;
top: 50%;
right: 15%;
width: 32px; height: 32px;
transform: translate(50%, -50%);
background: radial-gradient(circle, rgba(79,182,216,0.6) 0%, rgba(79,182,216,0) 70%);
border-radius: 50%;
opacity: 0;
transition: opacity calc(var(--d-wipe) * 0.6) var(--ease-out-2) var(--d-wipe);
pointer-events: none;
}
.wischstrich.is-in::after { opacity: 1; }
.wischstrich--hero { width: min(80vw, 720px); margin: var(--s-5) 0; }
.wischstrich--divider { width: 100%; margin: var(--s-8) 0; opacity: 0.5; }
.wischstrich--inline { width: 96px; margin: var(--s-3) 0; height: 2px; }
/* Messing-Siegel */
.siegel {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px; height: 72px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, #FFDB8A 0%, var(--brass) 55%, var(--brass-deep) 100%);
color: var(--navy);
font-family: var(--font-headline);
font-weight: 500;
font-size: 11px;
text-align: center;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 8px;
box-shadow:
inset 0 1px 2px rgba(255,255,255,0.45),
inset 0 -2px 6px rgba(122,77,15,0.35),
0 4px 14px rgba(232,169,59,0.35);
position: relative;
transform: rotate(-6deg);
}
.siegel::before {
content: "";
position: absolute;
inset: 5px;
border: 1px dashed rgba(15,42,68,0.35);
border-radius: 50%;
pointer-events: none;
}
.siegel--lg { width: 96px; height: 96px; font-size: 12px; }
.siegel--sm { width: 56px; height: 56px; font-size: 10px; padding: 6px; }
.siegel-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.siegel-inner strong {
font-weight: 500;
font-size: 1.1em;
font-variation-settings: "opsz" 48;
}
/* Photo Frame (replaces placeholder) */
.photo-frame {
position: relative;
overflow: hidden;
border-radius: var(--r-lg);
background: var(--mist);
box-shadow: var(--shadow-card);
transition: transform var(--d-slow) var(--ease-wipe), box-shadow var(--d-slow) var(--ease-wipe);
}
.photo-frame:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
}
.photo-frame img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 1.1s var(--ease-wipe);
}
.photo-frame:hover img { transform: scale(1.03); }
.photo-frame--signature {
position: relative;
}
.photo-frame--signature::after {
content: "";
position: absolute;
right: 14px;
top: 14px;
bottom: 14px;
width: 2px;
background: var(--aqua);
opacity: 0.7;
border-radius: 2px;
pointer-events: none;
}
.photo-frame--4-5 { aspect-ratio: 4 / 5; }
.photo-frame--16-10 { aspect-ratio: 16 / 10; }
.photo-frame--3-4 { aspect-ratio: 3 / 4; }
.photo-frame--1-1 { aspect-ratio: 1 / 1; }
@media (max-width: 1023px) {
.hero--v3 { min-height: 82vh; }
.hero--v3 .hero-content { padding-left: var(--page-px-mobile); padding-right: var(--page-px-mobile); }
.hero--v3 .siegel { right: var(--page-px-mobile); }
.siegel { width: 64px; height: 64px; font-size: 10px; }
.siegel--lg { width: 80px; height: 80px; }
}
@media (max-width: 599px) {
.hero--v3 .siegel { display: none; }
.bubble:nth-child(1), .bubble:nth-child(6) { display: none; }
}
/* =====================================================
74. V3 — MEDIA ELEMENTS ON CARDS (leistung + zielgr)
===================================================== */
.leistung-card__media,
.zielgruppen-card__media {
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--mist);
position: relative;
margin: calc(var(--s-6) * -1) calc(var(--s-4) * -1) var(--s-4);
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.zielgruppen-card__media { aspect-ratio: 4 / 3; }
.leistung-card__media img,
.zielgruppen-card__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1s var(--ease-wipe);
}
.leistung-card:hover .leistung-card__media img,
.zielgruppen-card:hover .zielgruppen-card__media img { transform: scale(1.06); }
.leistung-card__media::after,
.zielgruppen-card__media::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 50%;
background: linear-gradient(to bottom, transparent, rgba(15,42,68,0.35));
pointer-events: none;
}
/* =====================================================
75. V3 — UTILITIES FINAL
===================================================== */
.text-aqua { color: var(--aqua-deep) !important; }
.text-navy { color: var(--navy) !important; }
.text-brass { color: var(--brass-deep) !important; }
.u-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
/* =====================================================
76. HERO — VIDEO BANNER (V4)
===================================================== */
.hero.hero--video {
position: relative;
min-height: 88vh;
min-height: 88svh;
max-height: 820px;
width: 100%;
padding: 0;
background: var(--navy-3, #05131F);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
isolation: isolate;
}
.hero-video-wrap {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-video-wrap video.hero-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -59%) scale(1.22);
object-fit: cover;
pointer-events: none;
will-change: transform;
}
.hero-video-tint {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg,
rgba(15,42,68,0.42) 0%,
rgba(15,42,68,0.00) 24%,
rgba(15,42,68,0.00) 55%,
rgba(15,42,68,0.55) 84%,
rgba(15,42,68,0.92) 100%);
pointer-events: none;
}
.hero-video-content {
position: relative;
z-index: 2;
width: 100%;
padding: 0 0 clamp(24px, 4vh, 48px);
}
.hero-wordmark {
width: 100%;
text-align: center;
margin-top: clamp(14px, 2.5vh, 26px);
color: #fff;
pointer-events: none;
padding: 16px 12px 40px;
background: linear-gradient(180deg, rgba(11,26,42,0) 0%, rgba(11,26,42,0.45) 38%, rgba(11,26,42,0.90) 82%, #0b1a2a 100%);
}
.hero-wordmark__name {
display: block;
font-family: var(--font-body);
font-weight: 800;
font-size: clamp(36px, 7vw, 62px);
letter-spacing: 0.16em;
line-height: 1;
text-indent: 0.16em;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 28px rgba(0, 0, 0, 0.65);
}
.hero-wordmark__sub {
display: block;
margin-top: 11px;
font-family: var(--font-body);
font-weight: 600;
font-size: clamp(10px, 1.5vw, 13px);
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 14px rgba(0, 0, 0, 0.6);
}
.hero-video-headline {
position: absolute;
top: clamp(96px, 13vh, 150px);
left: 0;
right: 0;
z-index: 2;
pointer-events: none;
}
.hero-video-headline .container { pointer-events: auto; }
.hero-video-eyebrow {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.82);
margin: 0 0 10px 0;
font-weight: 600;
}
.hero-video-h1 {
font-family: var(--font-display, var(--font-body));
font-size: clamp(20px, 2.4vw, 30px);
line-height: 1.15;
font-weight: 500;
color: #fff;
margin: 0 0 6px 0;
letter-spacing: -0.005em;
text-shadow: 0 1px 10px rgba(0,0,0,0.35);
max-width: 22ch;
}
.hero-video-leadin {
font-family: var(--font-body);
font-size: clamp(13px, 1.05vw, 14.5px);
color: rgba(255,255,255,0.78);
margin: 0;
font-weight: 400;
letter-spacing: 0.01em;
max-width: 32ch;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
@media (max-width: 760px) {
.hero-video-headline {
top: clamp(80px, 11vh, 110px);
max-width: 100vw;
box-sizing: border-box;
}
.hero-video-headline .container {
max-width: 100%;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.hero-video-eyebrow {
font-size: 10px;
margin-bottom: 8px;
max-width: 100%;
overflow-wrap: break-word;
hyphens: auto;
}
.hero-video-h1 {
font-size: clamp(18px, 5.2vw, 24px);
max-width: 100%;
overflow-wrap: break-word;
hyphens: auto;
line-height: 1.2;
}
.hero-video-leadin {
font-size: 12.5px;
max-width: 100%;
overflow-wrap: break-word;
}
}
.hero-video-ctas-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px 32px;
}
.hero-video-ctas {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: flex-start;
}
.btn-primary--on-video {
background: var(--aqua, #4FB6D8);
color: var(--navy, #0F2A44);
border: 1px solid rgba(255,255,255,0.0);
padding: 13px 22px;
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
letter-spacing: var(--ls-button, 0.02em);
border-radius: 2px;
text-decoration: none;
transition: all 280ms var(--ease-wipe, cubic-bezier(.2,.8,.2,1));
box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 14px 36px rgba(15,42,68,0.35);
}
.btn-primary--on-video:hover,
.btn-primary--on-video:focus-visible {
background: var(--white, #FFFFFF);
color: var(--navy, #0F2A44);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0,0,0,0.25), 0 18px 44px rgba(15,42,68,0.5);
}
.btn-ghost--on-video {
background: rgba(15,42,68,0.25);
color: var(--white, #FFFFFF);
border: 1px solid rgba(255,255,255,0.5);
padding: 12px 20px;
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
letter-spacing: var(--ls-button, 0.02em);
border-radius: 2px;
text-decoration: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: all 280ms var(--ease-wipe, cubic-bezier(.2,.8,.2,1));
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-ghost--on-video span { color: var(--aqua, #4FB6D8); font-size: 17px; }
.btn-ghost--on-video:hover,
.btn-ghost--on-video:focus-visible {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.85);
transform: translateY(-1px);
}
.hero-video-trust {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 12px;
color: rgba(255,255,255,0.82);
font-family: var(--font-body);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.hero-video-trust .dot {
width: 3px; height: 3px;
background: rgba(255,255,255,0.4);
border-radius: 50%;
display: inline-block;
}
.hero-video-scroll {
display: none;
}
.hero-video-scroll:hover { color: var(--aqua, #4FB6D8); }
.hero-video-scroll-line {
width: 1px;
height: 44px;
background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0));
animation: hero-video-scroll-line 2.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes hero-video-scroll-line {
0% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
51% { transform: scaleY(1); transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
/* Stacked Buttons im Hero (2-Zeilen: Hauptlabel + Zusatz) */
.btn-stacked {
display: inline-flex !important;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 3px;
line-height: 1.15;
padding: 11px 22px !important;
min-height: 58px;
}
.btn-stacked .btn-stacked-main {
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
letter-spacing: var(--ls-button, 0.02em);
line-height: 1.2;
}
.btn-stacked .btn-stacked-sub {
font-family: var(--font-body);
font-weight: 400;
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.82;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-primary--on-video.btn-stacked .btn-stacked-sub {
color: var(--navy, #0F2A44);
opacity: 0.72;
}
.btn-ghost--on-video.btn-stacked {
padding-top: 10px !important;
padding-bottom: 11px !important;
}
.btn-ghost--on-video.btn-stacked .btn-stacked-main {
font-weight: 600;
font-size: 14.5px;
letter-spacing: 0.03em;
}
.btn-tel-status { color: rgba(255,255,255,0.85); }
.btn-tel-status.is-offline { color: rgba(255,255,255,0.55); }
.live-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #29D07A;
box-shadow: 0 0 0 0 rgba(41, 208, 122, 0.55);
display: inline-block;
position: relative;
animation: live-dot-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.is-offline .live-dot {
background: #D07A3B;
animation: none;
box-shadow: none;
}
@keyframes live-dot-pulse {
0% { box-shadow: 0 0 0 0 rgba(41, 208, 122, 0.55); }
70% { box-shadow: 0 0 0 7px rgba(41, 208, 122, 0); }
100% { box-shadow: 0 0 0 0 rgba(41, 208, 122, 0); }
}
@media (max-width: 767px) {
/* Mobile: Video deckt kompletten Hero (wie Desktop), Content als Overlay */
.hero.hero--video {
min-height: 92vh;
min-height: 92svh;
max-height: none;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: var(--navy-3, #05131F);
overflow: hidden;
}
.hero-video-wrap {
position: absolute;
inset: 0;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%;
aspect-ratio: auto;
overflow: hidden;
background: #05131F;
z-index: 0;
}
.hero-video-wrap video.hero-video {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
object-position: center center;
}
.hero-video-tint {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg,
rgba(5,19,31,0.55) 0%,
rgba(5,19,31,0.20) 30%,
rgba(5,19,31,0.45) 65%,
rgba(5,19,31,0.85) 100%);
pointer-events: none;
}
.hero-video-content {
position: relative;
z-index: 2;
padding: 20px 0 28px;
background: transparent;
}
.hero-video-content::before {
display: none;
}
.hero-video-ctas-wrap {
flex-direction: column;
align-items: stretch;
gap: 12px;
width: 100%;
}
.hero-video-ctas {
flex-direction: column;
width: 100%;
gap: 8px;
min-width: 0;
}
.btn-primary--on-video,
.btn-ghost--on-video {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
justify-content: center;
text-align: center;
}
.btn-stacked {
align-items: center !important;
gap: 2px !important;
padding: 9px 14px !important;
min-height: 52px;
}
.btn-stacked .btn-stacked-main {
font-size: 13.5px;
line-height: 1.15;
}
.btn-stacked .btn-stacked-sub {
display: flex;
font-size: 9.5px;
letter-spacing: 0.06em;
white-space: normal;
justify-content: center;
text-align: center;
line-height: 1.2;
}
.btn-ghost--on-video.btn-stacked {
padding-top: 8px !important;
padding-bottom: 9px !important;
}
.btn-ghost--on-video.btn-stacked .btn-stacked-main {
font-size: 14px;
}
.hero-video-trust {
display: flex;
flex-wrap: wrap;
font-size: 10px;
letter-spacing: 0.08em;
gap: 6px 8px;
justify-content: center;
text-align: center;
padding-top: 8px;
width: 100%;
}
.hero-video-trust .dot { display: none; }
.hero-video-trust span:not(.dot) {
flex: 0 1 auto;
padding: 5px 10px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: rgba(255,255,255,0.92);
font-weight: 500;
white-space: nowrap;
line-height: 1.1;
}
/* Horizontal-Overflow-Schutz auf Mobile: lange Headlines brechen sauber */
.h1, .h2, .h3, h1, h2, h3,
.hero-video-h1, .hero-video-leadin, .hero-video-eyebrow {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;
hyphens: auto;
max-width: 100%;
}
.ueber-intro__head .h2,
.ueber-intro__block .h3,
.ueber-intro__block .body-text {
max-width: 100%;
overflow-wrap: break-word;
hyphens: auto;
}
/* Hero-Video Container: nie über den Viewport hinaus */
.hero-video-headline,
.hero-video-headline .container,
.hero-video-content,
.hero-video-content .container {
max-width: 100vw;
box-sizing: border-box;
}
.hero-video-h1 {
max-width: 100% !important;
}
}
@media (max-width: 420px) {
.hero.hero--video { min-height: 68svh; }
.btn-stacked { min-height: 48px; padding: 8px 12px !important; }
.btn-stacked .btn-stacked-main { font-size: 13px; }
.btn-stacked .btn-stacked-sub { font-size: 9px; }
}
/* =====================================================
iPhone 14 Pro Max & große Phones (414–480px)
Nur Hero auf der Startseite — mehr Atem, größere Type, Safe-Area
===================================================== */
@media (min-width: 414px) and (max-width: 480px) {
.hero.hero--video {
min-height: 94svh;
padding-top: env(safe-area-inset-top, 0);
padding-bottom: env(safe-area-inset-bottom, 0);
}
/* Headline-Block — etwas weiter unten und großzügiger */
.hero-video-headline {
top: clamp(110px, 13vh, 140px);
padding-left: 4px;
padding-right: 4px;
}
.hero-video-headline .container {
padding-left: 26px;
padding-right: 26px;
}
.hero-video-eyebrow {
font-size: 11px;
letter-spacing: 0.22em;
margin-bottom: 12px;
color: rgba(255,255,255,0.92);
}
.hero-video-h1 {
font-size: 28px;
line-height: 1.18;
letter-spacing: -0.012em;
max-width: 90%;
margin-bottom: 10px;
}
.hero-video-leadin {
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,0.86);
max-width: 88%;
}
/* Content-Block unten — mehr Atem & Safe-Area Bottom */
.hero-video-content {
padding: 24px 0 calc(34px + env(safe-area-inset-bottom, 0));
}
.hero-video-content .container {
padding-left: 26px;
padding-right: 26px;
}
.hero-video-ctas-wrap {
gap: 14px;
}
.hero-video-ctas { gap: 10px; }
.btn-stacked {
min-height: 58px;
padding: 11px 18px !important;
border-radius: 4px;
}
.btn-stacked .btn-stacked-main { font-size: 14.5px; }
.btn-stacked .btn-stacked-sub { font-size: 10px; letter-spacing: 0.07em; }
.btn-ghost--on-video.btn-stacked .btn-stacked-main { font-size: 15px; }
/* Trust-Badges großzügiger */
.hero-video-trust {
font-size: 10.5px;
letter-spacing: 0.1em;
gap: 7px 8px;
padding-top: 12px;
}
.hero-video-trust span:not(.dot) {
padding: 6px 12px;
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.22);
}
/* Tint subtil verfeinern für klare Lesbarkeit auf 430px */
.hero-video-tint {
background: linear-gradient(180deg,
rgba(5,19,31,0.50) 0%,
rgba(5,19,31,0.18) 28%,
rgba(5,19,31,0.42) 62%,
rgba(5,19,31,0.88) 100%) !important;
}
/* Scroll-Hinweis dezenter sichtbar */
.hero-video-scroll {
display: flex !important;
flex-direction: column;
align-items: center;
gap: 6px;
position: absolute;
bottom: calc(14px + env(safe-area-inset-bottom, 0));
left: 50%;
transform: translateX(-50%);
z-index: 3;
color: rgba(255,255,255,0.7);
font-family: 'Space Mono', 'IBM Plex Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
pointer-events: none;
opacity: 0.85;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-video-wrap video.hero-video { display: none; }
.hero-video-wrap::before {
content: "";
position: absolute; inset: 0;
background: url("../video/hero-poster.jpg") center/cover no-repeat;
}
.hero-video-scroll-line { animation: none; }
}
/* =====================================================
77. MODERN NAV V4 — Floating Glass Pill
===================================================== */
.nav.nav--modern {
position: fixed;
top: 18px;
left: 50%;
right: auto;
transform: translateX(-50%);
width: calc(100% - 32px);
max-width: 1180px;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
transition: top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: transform, top;
}
.nav.nav--modern .nav-inner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
padding: 10px 10px 10px 22px;
max-width: none;
margin: 0;
background: rgba(247, 249, 251, 0.72);
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(15, 42, 68, 0.08);
border-radius: 999px;
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.6) inset,
0 12px 42px -18px rgba(15, 42, 68, 0.28),
0 2px 10px rgba(15, 42, 68, 0.05);
transition: background 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
padding 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav.nav--modern.is-scrolled {
top: 10px;
}
.nav.nav--modern.is-scrolled .nav-inner {
background: rgba(247, 249, 251, 0.94);
border-color: rgba(15, 42, 68, 0.12);
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.7) inset,
0 10px 30px -12px rgba(15, 42, 68, 0.22),
0 2px 10px rgba(15, 42, 68, 0.06);
}
/* Logo — Mark + Wordmark */
.nav.nav--modern .nav-logo {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 2px 6px 0;
font-family: var(--font-headline);
font-weight: 500;
font-size: 19px;
line-height: 1;
color: var(--navy);
letter-spacing: -0.025em;
font-variation-settings: "opsz" 36;
transition: opacity 0.25s;
}
.nav.nav--modern .nav-logo:hover { opacity: 0.82; }
.nav-logo-mark {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: linear-gradient(135deg, var(--navy) 0%, #1b3d5f 100%);
border-radius: 10px;
box-shadow:
0 2px 6px rgba(15, 42, 68, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.08) inset;
overflow: hidden;
flex-shrink: 0;
}
.nav-logo-mark::before {
content: "";
position: absolute;
left: -20%;
top: -30%;
width: 55%;
height: 220%;
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
transform: rotate(18deg);
animation: nav-mark-shine 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.nav-logo-mark-inner {
width: 11px;
height: 11px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, var(--aqua) 0%, var(--aqua-deep) 100%);
box-shadow: 0 0 12px rgba(79, 182, 216, 0.65);
position: relative;
z-index: 1;
}
@keyframes nav-mark-shine {
0%, 55%, 100% { transform: translateX(0) rotate(18deg); opacity: 0; }
60% { opacity: 1; }
90% { transform: translateX(260%) rotate(18deg); opacity: 0; }
}
.nav.nav--modern .nav-logo .logo-word {
position: relative;
}
.nav.nav--modern .logo-word-dim {
color: var(--aqua-deep);
font-weight: 400;
padding: 0 0.02em;
}
.nav.nav--modern .nav-logo .logo-dot {
display: none;
}
/* Links — centered pills */
.nav.nav--modern .nav-links {
display: flex;
gap: 2px;
align-items: center;
justify-self: center;
padding: 3px;
background: transparent;
border-radius: 999px;
}
.nav.nav--modern .nav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.002em;
text-transform: none;
color: rgba(15, 42, 68, 0.78);
padding: 10px 16px;
line-height: 1;
border-radius: 999px;
transition: color 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
background 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav.nav--modern .nav-link::after { display: none; }
.nav.nav--modern .nav-link:hover {
color: var(--navy);
background: rgba(15, 42, 68, 0.05);
}
.nav.nav--modern .nav-link.is-current,
.nav.nav--modern .nav-link[aria-current="page"] {
color: var(--navy);
background: rgba(79, 182, 216, 0.14);
}
.nav.nav--modern .nav-link.is-current::before,
.nav.nav--modern .nav-link[aria-current="page"]::before {
content: "";
width: 5px;
height: 5px;
background: var(--aqua-deep);
border-radius: 50%;
box-shadow: 0 0 8px rgba(79, 182, 216, 0.55);
position: static;
transform: none;
left: auto; bottom: auto;
display: inline-block;
flex-shrink: 0;
}
/* Right side — CTA group */
.nav.nav--modern .nav-cta {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 0;
justify-self: end;
}
.nav.nav--modern .nav-tel {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 500;
color: var(--graphite);
line-height: 1;
padding: 8px 10px 8px 8px;
border-radius: 999px;
transition: color 0.25s, background 0.25s;
}
.nav.nav--modern .nav-tel:hover {
color: var(--navy);
background: rgba(15, 42, 68, 0.05);
}
.nav.nav--modern .nav-tel-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: linear-gradient(135deg, rgba(79, 182, 216, 0.18), rgba(79, 182, 216, 0.08));
color: var(--aqua-deep);
border-radius: 50%;
font-size: 11px;
border: 1px solid rgba(79, 182, 216, 0.22);
flex-shrink: 0;
}
.nav.nav--modern .nav-btn {
padding: 11px 20px !important;
font-size: 13.5px !important;
min-height: 0;
border-radius: 999px;
line-height: 1;
box-shadow: 0 2px 8px rgba(15, 42, 68, 0.12);
}
/* Burger — animated to X (safe-contained) */
.nav.nav--modern .nav-burger {
display: none;
width: 40px;
height: 40px;
background: rgba(15, 42, 68, 0.04);
border: 1px solid rgba(15, 42, 68, 0.1);
border-radius: 999px;
position: relative;
overflow: hidden;
cursor: pointer;
padding: 0;
transition: border-color 0.25s, background 0.25s;
flex-shrink: 0;
box-sizing: border-box;
}
.nav.nav--modern .nav-burger:hover {
border-color: rgba(79, 182, 216, 0.4);
background: rgba(79, 182, 216, 0.1);
}
.nav.nav--modern .nav-burger span {
display: block;
position: absolute;
left: 50%;
right: auto;
width: 16px;
height: 1.6px;
margin-left: -8px;
background: var(--navy);
border-radius: 2px;
transform-origin: center center;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.2s;
}
.nav.nav--modern .nav-burger span:nth-child(1) { top: 16px; }
.nav.nav--modern .nav-burger span:nth-child(2) { top: 22px; }
.nav.nav--modern .nav-burger[aria-expanded="true"] span:nth-child(1) {
top: 19px;
transform: rotate(45deg);
}
.nav.nav--modern .nav-burger[aria-expanded="true"] span:nth-child(2) {
top: 19px;
transform: rotate(-45deg);
}
/* Responsive */
@media (max-width: 1120px) {
.nav.nav--modern .nav-link { padding: 10px 12px; font-size: 13px; }
}
@media (max-width: 1023px) {
.nav.nav--modern { top: 12px; width: calc(100% - 24px); }
.nav.nav--modern .nav-inner { padding: 8px 8px 8px 18px; gap: 10px; }
.nav.nav--modern .nav-links { display: none; }
.nav.nav--modern .nav-cta .nav-btn { display: none; }
.nav.nav--modern .nav-burger { display: block; }
}
@media (max-width: 640px) {
.nav.nav--modern .nav-cta .nav-tel { display: none; }
.nav.nav--modern .nav-logo { font-size: 17px; gap: 8px; }
.nav-logo-mark { width: 28px; height: 28px; border-radius: 9px; }
.nav-logo-mark-inner { width: 10px; height: 10px; }
}
/* Push page content below fixed pill */
body { padding-top: 0; }
main, .sub-hero, .hero:not(.hero--video) { scroll-margin-top: 100px; }
.hero.hero--video { margin-top: 0; }
/* =====================================================
78. MOBILE NAV V5 — Right-Drawer Glass + Editorial
===================================================== */
.nav-mobile-overlay {
position: fixed;
inset: 0;
z-index: calc(var(--z-nav) + 1);
background: rgba(5, 19, 31, 0);
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
display: block;
pointer-events: none;
visibility: hidden;
transition: background 0.4s ease, backdrop-filter 0.4s ease, visibility 0s linear 0.55s;
}
.nav-mobile-overlay.is-open {
pointer-events: auto;
visibility: visible;
background: rgba(5, 19, 31, 0.55);
-webkit-backdrop-filter: blur(8px) saturate(120%);
backdrop-filter: blur(8px) saturate(120%);
transition: background 0.4s ease, backdrop-filter 0.4s ease, visibility 0s linear 0s;
}
.nav-mobile-overlay::before {
content: "";
position: fixed;
inset: 0;
background:
radial-gradient(circle at 78% 18%, rgba(79, 182, 216, 0.10), transparent 55%),
radial-gradient(circle at 12% 90%, rgba(196, 155, 85, 0.06), transparent 50%);
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease 0.1s;
}
.nav-mobile-overlay.is-open::before { opacity: 1; }
/* Drawer panel — slides from right */
.nav-mobile-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(88vw, 420px);
background: linear-gradient(180deg, #08182A 0%, #0E2840 50%, #0B2038 100%);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateX(100%);
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow:
-2px 0 0 rgba(196, 155, 85, 0.5),
-30px 0 80px rgba(0, 0, 0, 0.5);
z-index: 1;
}
.nav-mobile-overlay.is-open .nav-mobile-drawer { transform: translateX(0); }
.nav-mobile-drawer::before {
content: "";
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 4px);
pointer-events: none;
opacity: 0.8;
z-index: 0;
}
.nav-mobile-drawer::after {
content: "";
position: absolute;
top: -40%; right: -30%;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(79,182,216,0.22), transparent 65%);
pointer-events: none;
z-index: 0;
filter: blur(8px);
}
/* Top bar */
.nav-mobile-top {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px var(--page-px-mobile, 20px) 14px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-logo--mobile {
display: inline-flex;
align-items: center;
gap: 8px;
}
.nav-logo--mobile .brand-logo-img {
height: 36px;
filter: brightness(0) invert(1);
opacity: 0.95;
}
.nav-mobile-close {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
color: var(--porcelain);
display: inline-flex;
align-items: center;
justify-content: center;
position: static;
top: auto; right: auto;
transition: background 0.25s, border-color 0.25s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-mobile-close:hover,
.nav-mobile-close:focus-visible {
background: rgba(196, 155, 85, 0.15);
border-color: rgba(196, 155, 85, 0.45);
transform: rotate(90deg);
outline: none;
}
/* Status row — live availability */
.nav-mobile-status {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
padding: 14px var(--page-px-mobile, 20px) 12px;
font-family: 'Space Mono', 'IBM Plex Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(247, 249, 251, 0.6);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav-mobile-status .live-dot {
width: 7px; height: 7px;
background: #29D07A;
border-radius: 50%;
display: inline-block;
position: relative;
box-shadow: 0 0 0 0 rgba(41, 208, 122, 0.6);
animation: nav-live-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
flex-shrink: 0;
}
@keyframes nav-live-pulse {
0% { box-shadow: 0 0 0 0 rgba(41, 208, 122, 0.55); }
70% { box-shadow: 0 0 0 8px rgba(41, 208, 122, 0); }
100% { box-shadow: 0 0 0 0 rgba(41, 208, 122, 0); }
}
.nav-mobile-status-text { color: rgba(247, 249, 251, 0.85); }
.nav-mobile-status-sep {
color: rgba(247, 249, 251, 0.25);
margin: 0 2px;
}
/* Links */
.nav-mobile-inner {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding: 12px var(--page-px-mobile, 20px) 8px;
border-top: none;
position: relative;
z-index: 2;
overflow-y: auto;
}
.nav-mobile-link {
display: flex;
align-items: center;
gap: 16px;
font-family: var(--font-headline);
font-weight: 400;
font-size: clamp(1.6rem, 7vw, 2.4rem);
line-height: 1.1;
letter-spacing: -0.018em;
color: var(--porcelain);
padding: 16px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-variation-settings: "opsz" 72;
position: relative;
transition: color 0.3s ease, padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-mobile-link:last-child { border-bottom: 0; }
.nav-mobile-link::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 1px;
background: var(--brass, #C9A96E);
transform: translateY(-50%);
transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-mobile-link:hover,
.nav-mobile-link:focus-visible {
color: var(--aqua);
padding-left: 14px;
outline: none;
}
.nav-mobile-link:hover::before,
.nav-mobile-link:focus-visible::before { width: 8px; }
.nav-mobile-link[aria-current="page"] {
color: var(--aqua);
}
.nav-mobile-link[aria-current="page"]::before { width: 8px; }
.nav-mobile-num {
font-family: 'Space Mono', 'IBM Plex Mono', monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
color: rgba(196, 155, 85, 0.5);
line-height: 1;
align-self: center;
flex-shrink: 0;
width: 22px;
transition: color 0.3s;
}
.nav-mobile-link[aria-current="page"] .nav-mobile-num,
.nav-mobile-link:hover .nav-mobile-num { color: var(--brass, #C9A96E); }
.nav-mobile-link::after {
content: "→";
font-family: var(--font-body);
font-size: 18px;
color: var(--aqua);
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.3s, transform 0.3s;
margin-left: auto;
align-self: center;
}
.nav-mobile-link:hover::after,
.nav-mobile-link:focus-visible::after,
.nav-mobile-link[aria-current="page"]::after {
opacity: 1;
transform: translateX(0);
}
/* Footer (phone CTA + meta) */
.nav-mobile-foot {
position: relative;
z-index: 2;
padding: 16px var(--page-px-mobile, 20px) 28px;
display: flex;
flex-direction: column;
gap: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.18));
}
.nav-mobile-tel {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: linear-gradient(135deg, rgba(196, 155, 85, 0.18), rgba(196, 155, 85, 0.06));
border: 1px solid rgba(196, 155, 85, 0.35);
border-radius: 14px;
color: var(--porcelain);
text-transform: none;
letter-spacing: 0;
font-family: var(--font-body);
margin: 0;
transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.nav-mobile-tel:hover,
.nav-mobile-tel:focus-visible {
background: linear-gradient(135deg, rgba(196, 155, 85, 0.28), rgba(196, 155, 85, 0.14));
border-color: rgba(196, 155, 85, 0.65);
transform: translateY(-2px);
outline: none;
}
.nav-mobile-tel-icon {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(196, 155, 85, 0.2);
border: 1px solid rgba(196, 155, 85, 0.4);
border-radius: 50%;
color: var(--brass, #C9A96E);
flex-shrink: 0;
}
.nav-mobile-tel-text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.nav-mobile-tel-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brass, #C9A96E);
line-height: 1;
}
.nav-mobile-tel-num {
font-family: var(--font-headline);
font-size: 22px;
font-weight: 500;
color: var(--porcelain);
line-height: 1.1;
letter-spacing: -0.005em;
font-variation-settings: "opsz" 48;
}
.nav-mobile-meta {
display: flex;
flex-direction: column;
gap: 4px;
font-family: 'Space Mono', 'IBM Plex Mono', monospace;
font-size: 10.5px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(247, 249, 251, 0.45);
padding: 4px 4px 0;
}
.nav-mobile-meta span:first-child { color: rgba(247, 249, 251, 0.7); }
/* Hide old nav-mobile-tel style that was applied via attribute */
.nav-mobile-inner > .nav-mobile-tel { display: none; }
/* Prevent body scroll when menu open */
body:has(.nav-mobile-overlay.is-open) { overflow: hidden; }
/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
.nav-mobile-overlay,
.nav-mobile-drawer { transition: none; }
}
/* =====================================================
69. BRAND LOGO IMAGE (PNG)
===================================================== */
.brand-logo-img {
display: block;
height: 44px;
width: auto;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
}
.nav-logo .brand-logo-img { height: 42px; }
.nav.is-scrolled .brand-logo-img { height: 36px; }
.nav-logo--mobile .brand-logo-img { height: 38px; }
.angebot-bar__logo .brand-logo-img { height: 32px; }
.footer .brand-logo-img,
.footer-brand .brand-logo-img { height: 64px; }
/* Auf dunklen Hintergründen invertieren (Logo ist schwarz) */
.bg-navy .brand-logo-img,
.bg-navy-2 .brand-logo-img,
.bg-navy-3 .brand-logo-img,
.footer .brand-logo-img {
filter: brightness(0) invert(1);
}
@media (max-width: 600px) {
.nav-logo .brand-logo-img { height: 36px; }
.angebot-bar__logo .brand-logo-img { height: 28px; }
}
/* =====================================================
70. ANGEBOT FUNNEL (Multi-Step) — Compact 100vh
===================================================== */
.page-angebot {
background: var(--porcelain);
height: 100vh;
height: 100dvh;
display: grid;
grid-template-rows: auto 3px 1fr auto;
overflow: hidden;
}
/* Top bar */
.angebot-bar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--s-4);
padding: 10px clamp(16px, 3vw, 40px);
background: var(--white);
border-bottom: 1px solid var(--border);
}
.angebot-bar__logo {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--navy);
font-family: var(--font-headline);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.01em;
}
.angebot-bar__logo .logo-word { color: var(--navy); }
.angebot-bar__logo .logo-word-dim { color: var(--aqua); }
.angebot-bar__logo .logo-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--brass);
margin-left: 2px;
}
.angebot-bar__title {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
text-align: center;
}
.angebot-bar__eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--aqua);
}
.angebot-bar__step {
font-family: var(--font-headline);
font-size: 13px;
color: var(--navy);
font-weight: 500;
}
.angebot-bar__close {
width: 34px; height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--border);
color: var(--navy);
text-decoration: none;
background: var(--white);
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.angebot-bar__close:hover {
background: var(--aqua-soft);
border-color: var(--aqua);
transform: rotate(90deg);
}
@media (max-width: 600px) {
.angebot-bar { padding: 8px 14px; }
.angebot-bar__logo { font-size: 15px; }
.angebot-bar__logo .nav-logo-mark { display: none; }
.angebot-bar__eyebrow { display: none; }
.angebot-bar__step { font-size: 12px; }
.angebot-bar__close { width: 32px; height: 32px; }
}
/* Progress bar */
.angebot-progress {
height: 3px;
background: var(--border);
}
.angebot-progress__bar {
height: 100%;
background: linear-gradient(90deg, var(--aqua), var(--aqua-deep));
transition: width .45s cubic-bezier(0.22, 1, 0.36, 1);
width: 20%;
}
/* Main funnel area — fills viewport between bars, scrollable only if absolute necessary */
.angebot-main {
position: relative;
overflow-y: auto;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 2.5vw, 32px) clamp(16px, 3vw, 40px);
}
.angebot-step {
display: none;
width: 100%;
animation: angebotFadeIn .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.angebot-step.is-active { display: block; }
@keyframes angebotFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.angebot-step__inner {
max-width: 1080px;
margin: 0 auto;
}
.angebot-step__inner--narrow { max-width: 660px; }
.angebot-step__num {
font-family: var(--font-headline);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brass);
margin-bottom: 6px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.angebot-step__num::before {
content: "";
width: 22px;
height: 1px;
background: var(--brass);
}
.angebot-step__num--center { display: inline-flex; }
.angebot-step__h {
font-family: var(--font-headline);
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--navy);
margin-bottom: 6px;
}
.angebot-step__lead {
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
max-width: 56ch;
margin-bottom: clamp(16px, 2vw, 22px);
}
.angebot-step--danke { text-align: center; }
.angebot-step--danke .angebot-step__lead { margin-left: auto; margin-right: auto; }
/* Card grids */
.angebot-cards {
display: grid;
gap: 10px;
}
.angebot-cards--7 {
grid-template-columns: repeat(4, 1fr);
}
.angebot-cards--7 .angebot-card:nth-child(5) { grid-column: 1 / span 2; }
.angebot-cards--7 .angebot-card:nth-child(6) { grid-column: 3 / span 1; }
.angebot-cards--7 .angebot-card:nth-child(7) { grid-column: 4 / span 1; }
.angebot-cards--4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1000px) {
.angebot-cards--7 { grid-template-columns: repeat(3, 1fr); }
.angebot-cards--7 .angebot-card:nth-child(n) { grid-column: auto; }
.angebot-cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.angebot-cards--7,
.angebot-cards--4 { grid-template-columns: repeat(2, 1fr); }
}
/* Cards — compact horizontal layout */
.angebot-card {
position: relative;
display: grid;
grid-template-columns: 56px 1fr;
align-items: center;
gap: 12px;
padding: 10px 14px 10px 10px;
background: var(--white);
border: 1.5px solid var(--border);
border-radius: 10px;
text-align: left;
cursor: pointer;
font-family: var(--font-body);
color: var(--navy);
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
overflow: hidden;
width: 100%;
min-height: 76px;
}
.angebot-card:hover {
border-color: var(--aqua);
transform: translateY(-1px);
box-shadow: 0 8px 20px -10px rgba(15, 42, 68, 0.2);
}
.angebot-card.is-selected {
border-color: var(--aqua);
background: var(--aqua-soft);
box-shadow: 0 0 0 1px var(--aqua), 0 8px 20px -10px rgba(79, 182, 216, 0.4);
}
.angebot-card.is-selected::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 18px;
height: 18px;
background: var(--aqua);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 11px;
background-position: center;
background-repeat: no-repeat;
}
.angebot-card__media {
display: block;
width: 56px;
height: 56px;
border-radius: 8px;
overflow: hidden;
background: var(--mist);
flex-shrink: 0;
}
.angebot-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.angebot-card:hover .angebot-card__media img { transform: scale(1.06); }
.angebot-card__num {
display: none;
}
.angebot-card__title {
display: block;
font-family: var(--font-headline);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--navy);
line-height: 1.2;
grid-column: 2;
}
.angebot-card__sub {
display: block;
font-size: 12px;
color: var(--text-muted);
line-height: 1.35;
margin-top: 2px;
grid-column: 2;
}
/* Icon variant — same compact horizontal layout */
.angebot-card--icon {
grid-template-columns: 44px 1fr;
text-align: left;
padding: 10px 14px 10px 10px;
}
.angebot-card__icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--aqua-soft);
color: var(--aqua-deep);
border-radius: 10px;
transition: background .2s ease, color .2s ease;
flex-shrink: 0;
}
.angebot-card__icon svg { width: 22px; height: 22px; }
.angebot-card--icon:hover .angebot-card__icon {
background: var(--aqua);
color: var(--white);
}
.angebot-card--icon.is-selected .angebot-card__icon {
background: var(--aqua);
color: var(--white);
}
/* Notfall-Bypass (Sonderreinigung / Sofort-Termin) */
.angebot-emergency {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
padding: 12px 16px;
margin-bottom: 14px;
background: linear-gradient(135deg, #FFF6E8 0%, #FBF2DC 100%);
border: 1.5px solid var(--brass-border);
border-radius: 10px;
position: relative;
animation: emergencyPulse 2.4s ease-in-out infinite;
}
@keyframes emergencyPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(232, 169, 59, 0.0); }
50% { box-shadow: 0 0 0 6px rgba(232, 169, 59, 0.12); }
}
.angebot-emergency__icon {
width: 38px; height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--brass);
color: var(--white);
border-radius: 50%;
flex-shrink: 0;
}
.angebot-emergency__icon svg { width: 18px; height: 18px; }
.angebot-emergency__text {
display: flex;
flex-direction: column;
gap: 1px;
}
.angebot-emergency__text strong {
font-family: var(--font-headline);
font-size: 14px;
font-weight: 500;
color: var(--navy);
letter-spacing: -0.005em;
}
.angebot-emergency__text span {
font-size: 12px;
color: var(--text-muted);
line-height: 1.35;
}
.angebot-emergency__btn {
padding: 10px 16px !important;
font-size: 13px !important;
white-space: nowrap;
background: var(--brass) !important;
border-color: var(--brass) !important;
color: var(--white) !important;
}
.angebot-emergency__btn:hover {
background: var(--brass-deep) !important;
border-color: var(--brass-deep) !important;
}
.angebot-emergency__btn::before { display: none !important; }
@media (max-width: 600px) {
.angebot-emergency {
grid-template-columns: auto 1fr;
gap: 10px;
padding: 10px 12px;
}
.angebot-emergency__btn {
grid-column: 1 / -1;
justify-self: stretch;
text-align: center;
}
}
/* Preis-Indikator */
.angebot-pricehint {
padding: 12px 16px;
margin-bottom: 14px;
background: linear-gradient(135deg, var(--aqua-soft) 0%, var(--aqua-wash) 100%);
border: 1px solid var(--hairline-aqua);
border-radius: 10px;
position: relative;
}
.angebot-pricehint__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
}
.angebot-pricehint__label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--aqua-deep);
}
.angebot-pricehint__chip {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: rgba(255, 255, 255, 0.7);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--navy);
letter-spacing: 0.02em;
}
.angebot-pricehint__price {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 4px;
}
.angebot-pricehint__price-value {
font-family: var(--font-headline);
font-size: 22px;
font-weight: 500;
color: var(--navy);
letter-spacing: -0.015em;
line-height: 1.05;
}
.angebot-pricehint__note {
font-size: 11px;
color: var(--text-muted);
line-height: 1.4;
margin: 0;
}
@media (max-width: 600px) {
.angebot-pricehint__head { flex-direction: column; align-items: flex-start; gap: 4px; }
.angebot-pricehint__price-value { font-size: 19px; }
}
/* Form — compact */
.angebot-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 12px;
}
.angebot-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.angebot-field--full { grid-column: 1 / -1; }
.angebot-field__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--navy);
}
.angebot-field__optional {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--text-muted);
font-size: 10px;
}
.angebot-field input,
.angebot-field textarea {
width: 100%;
padding: 10px 14px;
font-family: var(--font-body);
font-size: 15px;
color: var(--navy);
background: var(--white);
border: 1.5px solid var(--border);
border-radius: 8px;
transition: border-color .2s ease, box-shadow .2s ease;
resize: vertical;
}
.angebot-field textarea { min-height: 56px; }
.angebot-field input:focus,
.angebot-field textarea:focus {
outline: none;
border-color: var(--aqua);
box-shadow: 0 0 0 3px var(--aqua-ghost);
}
.angebot-field input::placeholder,
.angebot-field textarea::placeholder { color: var(--text-dim); }
.angebot-consent {
grid-column: 1 / -1;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
color: var(--text-muted);
line-height: 1.45;
cursor: pointer;
margin-top: 2px;
}
.angebot-consent input[type="checkbox"] {
width: 16px;
height: 16px;
margin-top: 2px;
accent-color: var(--aqua);
cursor: pointer;
flex-shrink: 0;
}
.angebot-consent a { color: var(--navy); text-decoration: underline; }
.angebot-consent a:hover { color: var(--aqua-deep); }
@media (max-width: 600px) {
.angebot-form { grid-template-columns: 1fr; }
}
/* Footer */
.angebot-foot {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--s-3);
padding: 10px clamp(16px, 3vw, 40px);
background: var(--white);
border-top: 1px solid var(--border);
}
.angebot-foot__back {
padding: 10px 18px;
font-size: 13px;
}
.angebot-foot__back:disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.angebot-foot__next {
padding: 12px 24px;
font-size: 14px;
}
.angebot-foot__next:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.angebot-foot__trust {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
color: var(--text-muted);
font-size: 11px;
letter-spacing: 0.04em;
}
.angebot-foot__trust strong {
color: var(--navy);
font-family: var(--font-headline);
font-weight: 500;
}
.angebot-foot__trust-divider {
width: 1px;
height: 12px;
background: var(--border-strong);
}
@media (max-width: 800px) {
.angebot-foot__trust { display: none; }
.angebot-foot { grid-template-columns: auto 1fr; }
.angebot-foot__next { justify-self: end; }
}
@media (max-width: 480px) {
.angebot-foot { padding: 8px 14px; gap: 10px; }
.angebot-foot__back { padding: 8px 12px; font-size: 12px; }
.angebot-foot__next { padding: 10px 16px; font-size: 13px; }
}
/* Danke */
.angebot-danke__check {
width: 64px;
height: 64px;
margin: 0 auto 14px;
border-radius: 50%;
background: var(--success-soft);
color: var(--success);
display: flex;
align-items: center;
justify-content: center;
animation: angebotCheckPop .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.angebot-danke__check svg {
width: 38px;
height: 38px;
}
.angebot-danke__check svg circle {
stroke-dasharray: 160;
stroke-dashoffset: 160;
animation: angebotCheckCircle .6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.angebot-danke__check svg path {
stroke-dasharray: 50;
stroke-dashoffset: 50;
animation: angebotCheckPath .4s cubic-bezier(0.22, 1, 0.36, 1) .4s forwards;
}
@keyframes angebotCheckPop {
0% { transform: scale(0.8); opacity: 0; }
60% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(1); }
}
@keyframes angebotCheckCircle {
to { stroke-dashoffset: 0; }
}
@keyframes angebotCheckPath {
to { stroke-dashoffset: 0; }
}
.angebot-danke__actions {
margin-top: 18px;
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.angebot-summary {
margin: 16px auto 0;
max-width: 480px;
padding: 16px 20px;
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
text-align: left;
}
.angebot-summary h3 {
font-family: var(--font-headline);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--navy);
margin-bottom: 10px;
}
.angebot-summary dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 16px;
}
.angebot-summary dt {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
align-self: center;
}
.angebot-summary dd {
font-family: var(--font-headline);
font-size: 14px;
color: var(--navy);
}
.angebot-summary__hint {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text-muted);
line-height: 1.45;
}
.angebot-summary__hint strong { color: var(--navy); font-weight: 600; }
.angebot-summary__cta-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.angebot-summary__wa {
border-color: #25D366;
color: #128C40;
}
.angebot-summary__wa:hover {
background: #25D366;
color: #fff;
border-color: #25D366;
}
/* =====================================================
71. VERSPRECHEN TABS — Modern Auto-Rotate Switcher
Tabs left · animated panel right · progress · swipe · keyboard
===================================================== */
.versprechen-tabs {
background: var(--paper, #F7F4EE);
position: relative;
padding: clamp(64px, 6.5vw, 104px) 0;
overflow: hidden;
}
.versprechen-tabs::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(45% 55% at 12% 18%, rgba(79, 182, 216, .07), transparent 60%),
radial-gradient(35% 45% at 92% 88%, rgba(232, 169, 59, .06), transparent 65%);
}
.versprechen-tabs > .container { position: relative; }
.vt-switcher {
display: grid;
grid-template-columns: 360px 1fr;
gap: 32px;
align-items: stretch;
margin-top: var(--s-8, 64px);
}
/* ===== Tabs ===== */
.vt-tabs {
display: flex;
flex-direction: column;
gap: 8px;
}
.vt-tab {
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
align-items: center;
padding: 18px 20px;
background: rgba(255, 255, 255, .55);
border: 1px solid rgba(15, 42, 68, .06);
border-radius: 14px;
text-align: left;
cursor: pointer;
font-family: inherit;
color: var(--navy);
position: relative;
overflow: hidden;
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.vt-tab:hover {
background: #fff;
border-color: rgba(15, 42, 68, .12);
transform: translateY(-1px);
}
.vt-tab.is-active {
background: var(--navy);
border-color: var(--navy);
color: #fff;
}
.vt-tab__icn {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(15, 42, 68, .06);
color: var(--aqua-deep, #2E96B8);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all .25s ease;
}
.vt-tab__icn svg { width: 20px; height: 20px; }
.vt-tab.is-active .vt-tab__icn {
background: rgba(255, 255, 255, .12);
color: var(--brass, #E8A93B);
}
.vt-tab__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vt-tab__lbl {
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 600;
opacity: .55;
}
.vt-tab.is-active .vt-tab__lbl { color: var(--brass, #E8A93B); opacity: 1; }
.vt-tab__title {
font-size: 16px;
font-weight: 600;
letter-spacing: -.005em;
line-height: 1.3;
}
/* Progress bar inside active tab */
.vt-tab::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0%;
background: var(--brass, #E8A93B);
transition: width .15s linear;
}
.vt-tab.is-active.is-running::after {
width: 100%;
transition: width var(--vt-duration, 6000ms) linear;
}
/* ===== Panel ===== */
.vt-panel {
background: #fff;
border-radius: 22px;
border: 1px solid rgba(15, 42, 68, .06);
box-shadow: 0 20px 50px rgba(15, 42, 68, .06);
overflow: hidden;
display: grid;
grid-template-columns: 1.15fr 1fr;
min-height: 480px;
position: relative;
}
.vt-panel__text {
padding: clamp(36px, 4vw, 56px);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
min-height: 100%;
}
/* Slides container — stacked, only active visible */
.vt-slides { position: relative; min-height: 360px; }
.vt-slide {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1);
}
.vt-slide.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.vt-panel__num {
font-family: var(--font-display, 'Fraunces', serif);
font-size: 13px;
font-weight: 500;
color: var(--brass-deep, #C68C22);
letter-spacing: .14em;
text-transform: uppercase;
}
.vt-panel__h {
font-family: var(--font-display, 'Fraunces', serif);
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 400;
letter-spacing: -.015em;
line-height: 1.1;
margin-top: 16px;
color: var(--navy);
}
.vt-panel__p {
margin-top: 20px;
font-size: 16px;
line-height: 1.65;
color: rgba(15, 42, 68, .72);
max-width: 44ch;
}
.vt-panel__list {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
padding: 0;
}
.vt-panel__list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
color: rgba(15, 42, 68, .78);
line-height: 1.45;
}
.vt-panel__list li::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--aqua, #4FB6D8);
margin-top: 8px;
flex-shrink: 0;
}
.vt-panel__link {
margin-top: 28px;
align-self: flex-start;
font-weight: 600;
}
/* ===== Photo ===== */
.vt-panel__photo {
position: relative;
margin: 0;
background: var(--aqua-soft, #E8F4FA);
overflow: hidden;
min-height: 480px;
}
.vt-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.04);
transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform 7s ease-out;
}
.vt-photo.is-active {
opacity: 1;
transform: scale(1);
}
.vt-panel__seal {
position: absolute;
bottom: 18px;
left: 18px;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 10px 14px;
border-radius: 10px;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
color: var(--navy);
z-index: 2;
}
/* ===== Pagination dots (mobile only) ===== */
.vt-dots {
display: none;
gap: 8px;
justify-content: center;
padding: 16px 0 4px;
}
.vt-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(15, 42, 68, .18);
border: none;
padding: 0;
cursor: pointer;
transition: all .25s ease;
}
.vt-dot.is-active {
background: var(--brass, #E8A93B);
transform: scale(1.4);
}
/* ===== Tablet ===== */
@media (max-width: 1024px) {
.vt-switcher { grid-template-columns: 300px 1fr; gap: 24px; }
.vt-panel { min-height: 440px; }
.vt-panel__photo { min-height: 440px; }
}
/* ===== Mobile ===== */
@media (max-width: 768px) {
.vt-switcher {
grid-template-columns: 1fr;
gap: 18px;
margin-top: var(--s-7, 48px);
}
/* Tabs become horizontal scrollable chips */
.vt-tabs {
flex-direction: row;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 4px 24px 6px;
margin: 0 -24px;
}
.vt-tabs::-webkit-scrollbar { display: none; }
.vt-tab {
flex: 0 0 auto;
grid-template-columns: 32px auto;
gap: 10px;
padding: 10px 14px 10px 12px;
border-radius: 100px;
scroll-snap-align: start;
}
.vt-tab__icn { width: 32px; height: 32px; border-radius: 8px; }
.vt-tab__icn svg { width: 16px; height: 16px; }
.vt-tab__lbl { font-size: 10px; }
.vt-tab__title { font-size: 13px; line-height: 1.2; white-space: nowrap; }
.vt-tab::after { display: none; }
/* Panel stacks: photo first, text below */
.vt-panel {
grid-template-columns: 1fr;
min-height: auto;
border-radius: 18px;
}
.vt-panel__photo {
min-height: 280px;
aspect-ratio: 4 / 3;
grid-row: 1;
}
.vt-panel__text {
grid-row: 2;
padding: 28px 24px 32px;
}
.vt-slides { min-height: 320px; }
.vt-panel__h { font-size: clamp(24px, 6vw, 32px); }
.vt-panel__p { font-size: 15px; }
/* Show pagination dots on mobile */
.vt-dots { display: flex; }
/* Mobile progress bar at top of panel */
.vt-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 3px;
width: 0%;
background: var(--brass, #E8A93B);
z-index: 5;
pointer-events: none;
}
.vt-switcher.is-running .vt-panel::before {
width: 100%;
transition: width var(--vt-duration, 6000ms) linear;
}
}
@media (max-width: 480px) {
.vt-panel__photo { min-height: 220px; aspect-ratio: 5 / 4; }
.vt-panel__seal { font-size: 10px; padding: 8px 12px; }
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
.vt-slide, .vt-photo { transition: opacity .2s ease; transform: none !important; }
.vt-tab.is-active.is-running::after,
.vt-switcher.is-running .vt-panel::before { transition: none; }
}
/* ============================================
72. UEBER INTRO — Sticky Photo Reveal (V12)
Foto bleibt sticky, 3 Text-Blocks scrollen vorbei.
Direkt nach Hero. Mobile: Foto kollabiert auf 60vh.
============================================ */
.ueber-intro {
background: var(--paper, #F7F4EE);
padding: 0;
position: relative;
min-height: 300vh;
}
.ueber-intro__pin {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.ueber-intro__grid {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 1280px;
margin: 0 auto;
align-items: stretch;
height: 100vh;
}
.ueber-intro__sticky {
position: relative;
height: 100vh;
display: grid;
place-items: center;
padding: clamp(24px, 4vw, 48px);
background: var(--porcelain, #FAF7F1);
}
.ueber-intro__photo {
position: relative;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
border-radius: 4px;
box-shadow:
0 30px 60px -20px rgba(15, 42, 68, .25),
0 18px 36px -28px rgba(15, 42, 68, .35);
}
.ueber-intro__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ueber-intro__photo-cap {
position: absolute;
left: 24px;
bottom: 24px;
margin: 0;
}
.ueber-intro__photo-tag {
display: inline-block;
font-family: 'Space Mono', 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: #fff;
background: rgba(15, 42, 68, .85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 10px 16px;
border-left: 3px solid var(--brass, #C9A96E);
border-radius: 2px;
}
.ueber-intro__scroll {
padding: clamp(64px, 8vw, 120px) clamp(32px, 5vw, 72px);
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.ueber-intro__blocks {
position: relative;
flex: 1;
display: flex;
align-items: center;
}
.ueber-intro__progress {
display: flex;
gap: 10px;
margin-top: 28px;
}
.ueber-intro__progress span {
width: 32px;
height: 2px;
background: rgba(15, 42, 68, .15);
transition: background .35s ease, width .35s ease;
}
.ueber-intro__progress span.is-active {
background: var(--aqua, #3DB6B0);
width: 48px;
}
.ueber-intro__head {
margin-bottom: 24px;
flex-shrink: 0;
}
.ueber-intro__head .eyebrow {
font-family: 'Space Mono', 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--aqua, #3DB6B0);
margin-bottom: 16px;
}
.ueber-intro__head .h2 {
font-family: var(--font-display, 'Fraunces', serif);
font-size: clamp(32px, 4vw, 56px);
line-height: 1.05;
color: var(--navy, #0F2A44);
letter-spacing: -.015em;
margin-bottom: 0;
}
.ueber-intro__block {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
border-bottom: 0;
opacity: 0;
transform: translateY(20px);
transition: opacity .55s ease, transform .55s ease;
pointer-events: none;
}
.ueber-intro__block.is-active {
opacity: 1;
transform: none;
pointer-events: auto;
}
.ueber-intro__num {
font-family: 'Space Mono', 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--aqua, #3DB6B0);
margin-bottom: 14px;
}
.ueber-intro__block .h3 {
font-family: var(--font-display, 'Fraunces', serif);
font-size: clamp(24px, 2.6vw, 34px);
line-height: 1.18;
color: var(--navy, #0F2A44);
letter-spacing: -.005em;
margin-bottom: 18px;
font-weight: 500;
}
.ueber-intro__block .body-text {
font-size: 17px;
color: rgba(27, 39, 51, .78);
line-height: 1.7;
margin-bottom: 18px;
}
.ueber-intro__block .text-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-weight: 600;
font-size: 15px;
color: var(--navy, #0F2A44);
text-decoration: none;
border-bottom: 1px solid var(--brass, #C9A96E);
padding-bottom: 4px;
transition: gap .2s ease, color .2s ease;
}
.ueber-intro__block .text-link:hover {
gap: 14px;
color: var(--aqua, #3DB6B0);
}
/* Tablet & Mobile — Pin deaktivieren, normale Stapel-Anordnung */
@media (max-width: 960px) {
.ueber-intro {
min-height: 0;
}
.ueber-intro__pin {
position: static;
height: auto;
overflow: visible;
}
.ueber-intro__grid {
grid-template-columns: 1fr;
height: auto;
}
.ueber-intro__sticky {
position: relative;
top: auto;
height: auto;
aspect-ratio: 4 / 3;
padding: 24px;
}
.ueber-intro__photo {
box-shadow: 0 20px 40px -16px rgba(15, 42, 68, .25);
}
.ueber-intro__scroll {
padding: 56px 24px 72px;
height: auto;
overflow: visible;
}
.ueber-intro__blocks {
position: static;
display: block;
}
.ueber-intro__block {
position: static;
padding: 40px 0;
border-bottom: 1px solid rgba(15, 42, 68, .12);
opacity: 1;
transform: none;
pointer-events: auto;
display: block;
}
.ueber-intro__block:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.ueber-intro__progress {
display: none;
}
.ueber-intro__head {
margin-bottom: 8px;
}
}
@media (max-width: 600px) {
.ueber-intro__sticky {
aspect-ratio: 1 / 1;
padding: 16px;
}
.ueber-intro__photo-cap {
left: 16px;
bottom: 16px;
}
.ueber-intro__photo-tag {
font-size: 10px;
padding: 8px 12px;
}
.ueber-intro__scroll {
padding: 40px 20px 56px;
}
.ueber-intro__block .body-text {
font-size: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.ueber-intro__sticky { position: relative; }
}
/* ============================================
73. PRINZIPIEN — Photo Strip + Overlay (V18)
3 Foto-Kacheln · Hover öffnet Caption · cinematic
Mobile: horizontaler Swipe-Stack mit Snap (Apple-Style)
============================================ */
.prinzipien {
background: var(--ink, #1B2733);
color: #fff;
padding: 0;
position: relative;
}
.prinzipien__head {
max-width: 880px;
margin: 0 auto;
text-align: center;
padding: clamp(72px, 9vw, 120px) 32px clamp(48px, 6vw, 80px);
}
.prinzipien__eye {
font-family: 'Space Mono', 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: .4em;
text-transform: uppercase;
color: var(--brass, #C9A96E);
margin-bottom: 18px;
}
.prinzipien__h {
font-family: var(--font-display, 'Fraunces', serif);
font-size: clamp(34px, 5vw, 60px);
line-height: 1.05;
letter-spacing: -.015em;
color: #fff;
margin-bottom: 0;
}
.prinzipien__h em {
font-style: italic;
color: var(--brass, #C9A96E);
}
.prinzipien__strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
min-height: 560px;
}
.prinzipien__tile {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
cursor: pointer;
outline: none;
}
.prinzipien__tile:focus-visible {
outline: 3px solid var(--brass, #C9A96E);
outline-offset: -6px;
}
.prinzipien__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 1s cubic-bezier(.2, .8, .2, 1);
filter: saturate(.92);
z-index: 0;
}
.prinzipien__tile:hover .prinzipien__bg,
.prinzipien__tile:focus-visible .prinzipien__bg {
transform: scale(1.06);
}
.prinzipien__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(15, 42, 68, .05) 0%,
rgba(15, 42, 68, .42) 50%,
rgba(15, 42, 68, .95) 100%
);
transition: background .5s ease;
z-index: 1;
}
.prinzipien__tile:hover .prinzipien__overlay,
.prinzipien__tile:focus-visible .prinzipien__overlay {
background: linear-gradient(
180deg,
rgba(15, 42, 68, .05) 0%,
rgba(15, 42, 68, .3) 40%,
rgba(15, 42, 68, .92) 100%
);
}
.prinzipien__icon {
position: absolute;
top: 32px;
left: 32px;
width: 52px;
height: 52px;
border-radius: 14px;
background: rgba(255, 255, 255, .12);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .25);
display: grid;
place-items: center;
color: var(--brass, #C9A96E);
z-index: 3;
transition: transform .4s ease, background .4s ease, color .4s ease;
}
.prinzipien__icon svg {
width: 26px;
height: 26px;
display: block;
}
.prinzipien__tile:hover .prinzipien__icon,
.prinzipien__tile:focus-visible .prinzipien__icon {
background: var(--brass, #C9A96E);
color: #fff;
transform: rotate(-8deg);
}
.prinzipien__body {
position: relative;
z-index: 2;
padding: 48px 36px;
display: flex;
flex-direction: column;
gap: 12px;
}
.prinzipien__meta {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: 'Space Mono', 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: .3em;
text-transform: uppercase;
opacity: .85;
margin-bottom: 4px;
}
.prinzipien__line {
display: inline-block;
width: 24px;
height: 1px;
background: var(--brass, #C9A96E);
}
.prinzipien__title {
font-family: var(--font-display, 'Fraunces', serif);
font-size: clamp(24px, 2.6vw, 32px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -.01em;
margin: 0;
color: #fff;
}
.prinzipien__text {
font-size: 15px;
line-height: 1.65;
opacity: .92;
margin: 0;
max-width: 380px;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .55s ease, margin .4s ease, opacity .35s ease;
}
.prinzipien__tile:hover .prinzipien__text,
.prinzipien__tile:focus-visible .prinzipien__text {
max-height: 220px;
opacity: .92;
margin-top: 6px;
margin-bottom: 8px;
}
.prinzipien__dots {
display: none;
}
/* ============================================
Mobile: Horizontaler Swipe-Stack (Apple-Style)
============================================ */
@media (max-width: 900px) {
.prinzipien__head {
padding: clamp(56px, 9vw, 80px) 24px 32px;
text-align: left;
}
.prinzipien__strip {
display: flex;
grid-template-columns: none;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0 24px 24px;
gap: 16px;
min-height: auto;
}
.prinzipien__strip::-webkit-scrollbar {
display: none;
}
.prinzipien__tile {
flex: 0 0 82%;
scroll-snap-align: center;
border-radius: 18px;
aspect-ratio: 4 / 5;
min-height: 420px;
box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .5);
}
.prinzipien__overlay {
background: linear-gradient(
180deg,
rgba(15, 42, 68, .1) 0%,
rgba(15, 42, 68, .35) 40%,
rgba(15, 42, 68, .92) 100%
);
}
.prinzipien__icon {
top: 20px;
left: 20px;
width: 44px;
height: 44px;
border-radius: 12px;
}
.prinzipien__icon svg {
width: 22px;
height: 22px;
}
.prinzipien__body {
padding: 28px 24px 32px;
gap: 10px;
}
.prinzipien__title {
font-size: clamp(22px, 5vw, 28px);
}
/* Mobile: Text immer sichtbar, kein Hover */
.prinzipien__text {
max-height: none;
opacity: .92;
overflow: visible;
font-size: 14px;
margin-top: 4px;
}
.prinzipien__dots {
display: flex;
justify-content: center;
gap: 8px;
padding: 8px 24px 56px;
}
.prinzipien__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, .3);
transition: background .3s ease, transform .3s ease;
}
.prinzipien__dot.is-active {
background: var(--brass, #C9A96E);
transform: scale(1.3);
}
}
@media (max-width: 480px) {
.prinzipien__tile {
flex: 0 0 88%;
}
}
@media (prefers-reduced-motion: reduce) {
.prinzipien__bg,
.prinzipien__overlay,
.prinzipien__text,
.prinzipien__icon {
transition: none;
}
}
/* ============================================
74. FAQ — Häufige Fragen
Native + custom Plus/X-Toggle, brass accent
============================================ */
.faq-section {
background: var(--paper, #F7F4EE);
padding: clamp(64px, 6.5vw, 104px) 0;
}
.faq-section .section-head {
margin-bottom: clamp(48px, 6vw, 72px);
}
.faq-list {
max-width: 880px;
margin: 0 auto;
background: #fff;
border-radius: 20px;
box-shadow: 0 30px 60px -30px rgba(15, 42, 68, .15);
border: 1px solid rgba(15, 42, 68, .08);
overflow: hidden;
}
.faq-item {
border-bottom: 1px solid rgba(15, 42, 68, .08);
transition: background .35s ease;
}
.faq-item:last-child {
border-bottom: 0;
}
.faq-item[open] {
background: var(--porcelain, #FAF7F1);
}
.faq-q {
list-style: none;
cursor: pointer;
padding: clamp(20px, 2.4vw, 28px) clamp(24px, 3vw, 36px);
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
transition: color .25s ease;
-webkit-tap-highlight-color: transparent;
}
.faq-q::-webkit-details-marker {
display: none;
}
.faq-q:hover {
color: var(--navy, #0F2A44);
}
.faq-q:focus-visible {
outline: 2px solid var(--brass, #C9A96E);
outline-offset: -4px;
border-radius: 8px;
}
.faq-q-text {
font-family: var(--font-display, 'Fraunces', serif);
font-size: clamp(17px, 1.6vw, 21px);
font-weight: 500;
line-height: 1.35;
color: var(--navy, #0F2A44);
letter-spacing: -.005em;
}
.faq-toggle {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--paper, #F7F4EE);
border: 1px solid rgba(15, 42, 68, .12);
flex-shrink: 0;
transition: background .3s ease, border-color .3s ease, transform .35s ease;
}
.faq-toggle::before,
.faq-toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 1.6px;
background: var(--navy, #0F2A44);
transform: translate(-50%, -50%);
transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .3s ease;
border-radius: 2px;
}
.faq-toggle::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item[open] .faq-toggle {
background: var(--brass, #C9A96E);
border-color: var(--brass, #C9A96E);
transform: rotate(180deg);
}
.faq-item[open] .faq-toggle::before,
.faq-item[open] .faq-toggle::after {
background: #fff;
}
.faq-item[open] .faq-toggle::after {
transform: translate(-50%, -50%) rotate(0deg);
}
.faq-a {
padding: 0 clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 28px);
animation: faqFade .45s ease;
}
@keyframes faqFade {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.faq-a p {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.7;
color: rgba(27, 39, 51, .78);
margin: 0;
max-width: 720px;
}
.faq-cta {
max-width: 880px;
margin: 48px auto 0;
text-align: center;
padding: 32px 24px 0;
border-top: 1px dashed rgba(15, 42, 68, .15);
}
.faq-cta .caption {
font-family: 'Space Mono', 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: .3em;
text-transform: uppercase;
color: rgba(27, 39, 51, .6);
margin-bottom: 12px;
}
.faq-cta .text-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display, 'Fraunces', serif);
font-size: clamp(20px, 2.2vw, 28px);
font-weight: 500;
color: var(--navy, #0F2A44);
text-decoration: none;
border-bottom: 2px solid var(--brass, #C9A96E);
padding-bottom: 6px;
letter-spacing: -.005em;
transition: gap .25s ease, color .25s ease;
}
.faq-cta .text-link:hover {
gap: 18px;
color: var(--aqua, #3DB6B0);
}
@media (max-width: 600px) {
.faq-list {
border-radius: 14px;
margin: 0 8px;
}
.faq-q {
padding: 18px 20px;
gap: 16px;
}
.faq-q-text {
font-size: 16px;
}
.faq-toggle {
width: 32px;
height: 32px;
}
.faq-a {
padding: 0 20px 20px;
}
.faq-a p {
font-size: 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.faq-toggle,
.faq-toggle::before,
.faq-toggle::after,
.faq-item {
transition: none;
}
.faq-a { animation: none; }
}
/* ==========================================================================
75. HOME FUNNEL — Inline 5-Schritt-Funnel auf Navy
Eingebetteter Funnel statt klassischer CTA-Sektion. Weiße Karte auf Navy.
========================================================================== */
.home-funnel {
position: relative;
padding-top: clamp(60px, 6.5vw, 96px);
padding-bottom: clamp(60px, 6.5vw, 96px);
}
.home-funnel .container {
position: relative;
z-index: 2;
}
.home-funnel .section-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.hf-card {
position: relative;
max-width: 1100px;
margin: 0 auto;
background: var(--white);
border-radius: 24px;
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.45),
0 12px 32px -16px rgba(0, 0, 0, 0.35);
overflow: hidden;
display: flex;
flex-direction: column;
color: var(--navy);
}
.hf-card,
.hf-card h1, .hf-card h2, .hf-card h3, .hf-card h4,
.hf-card p, .hf-card span, .hf-card label,
.hf-card .hf-step__h { color: var(--navy); }
.hf-card .hf-step__num { color: var(--brass); }
.hf-card .hf-step__lead { color: var(--text-muted); }
.hf-card .hf-tile__sub { color: var(--text-muted); }
.hf-card .hf-progress__step { color: var(--brass); }
.hf-card .hf-progress__time { color: var(--text-muted); }
.hf-card .hf-pricehint__label { color: var(--aqua-deep, #2C8E89); }
.hf-card .hf-pricehint__note { color: var(--text-muted); }
.hf-card .hf-field__label { color: var(--navy); }
.hf-card .hf-field__optional { color: var(--text-muted); }
.hf-card .hf-consent { color: var(--text-muted); }
.hf-card .hf-trust { color: var(--text-muted); }
.hf-card .hf-trust strong { color: var(--navy); }
.hf-card .hf-summary dt { color: var(--text-muted); }
.hf-card .hf-summary h3 { color: var(--brass); }
.hf-card .hf-summary__hint { color: var(--text-muted); }
/* Progress */
.hf-progress {
padding: clamp(18px, 2.4vw, 26px) clamp(22px, 3vw, 36px) 0;
}
.hf-progress__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.hf-progress__step {
font-family: var(--font-headline);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brass);
}
.hf-progress__time {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
font-family: var(--font-mono, 'Space Mono', monospace);
}
.hf-progress__bar {
position: relative;
height: 3px;
background: var(--mist, #ECE7DD);
border-radius: 999px;
overflow: hidden;
}
.hf-progress__bar > span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--aqua), var(--aqua-deep, #2C8E89));
border-radius: 999px;
transition: width .55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Steps */
.hf-steps {
position: relative;
padding: clamp(22px, 3vw, 36px);
}
.hf-step {
display: none;
width: 100%;
padding: 0;
margin: 0;
animation: hfFadeIn .42s cubic-bezier(0.22, 1, 0.36, 1);
}
.hf-step.is-active { display: block; }
@keyframes hfFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.hf-step__num {
font-family: var(--font-headline);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brass);
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.hf-step__num::before {
content: "";
width: 22px;
height: 1px;
background: var(--brass);
}
.hf-step__num--center {
display: inline-flex;
margin-left: auto;
margin-right: auto;
}
.hf-step__h {
font-family: var(--font-headline);
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--navy);
margin-bottom: 6px;
}
.hf-step__lead {
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
max-width: 56ch;
margin-bottom: clamp(16px, 2vw, 22px);
}
.hf-step--danke { text-align: center; }
.hf-step--danke .hf-step__lead { margin-left: auto; margin-right: auto; }
/* Card grids */
.hf-cards {
display: grid;
gap: 10px;
}
.hf-cards--7 { grid-template-columns: repeat(4, 1fr); }
.hf-cards--7 .hf-tile:nth-child(5) { grid-column: 1 / span 2; }
.hf-cards--7 .hf-tile:nth-child(6) { grid-column: 3 / span 1; }
.hf-cards--7 .hf-tile:nth-child(7) { grid-column: 4 / span 1; }
.hf-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) {
.hf-cards--7 { grid-template-columns: repeat(3, 1fr); }
.hf-cards--7 .hf-tile:nth-child(n) { grid-column: auto; }
.hf-cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.hf-cards--7,
.hf-cards--4 { grid-template-columns: repeat(2, 1fr); }
}
/* Tiles — icon + title + sub */
.hf-tile {
position: relative;
display: grid;
grid-template-columns: 44px 1fr;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--white);
border: 1.5px solid var(--border);
border-radius: 12px;
text-align: left;
cursor: pointer;
font-family: var(--font-body);
color: var(--navy);
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
min-height: 76px;
width: 100%;
}
.hf-tile:hover {
border-color: var(--aqua);
transform: translateY(-1px);
box-shadow: 0 10px 22px -12px rgba(15, 42, 68, 0.22);
}
.hf-tile.is-selected {
border-color: var(--aqua);
background: var(--aqua-soft, #EAF6F4);
box-shadow: 0 0 0 1px var(--aqua), 0 10px 22px -12px rgba(61, 182, 176, 0.4);
}
.hf-tile.is-selected::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 18px;
height: 18px;
background: var(--aqua);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 11px;
background-position: center;
background-repeat: no-repeat;
}
.hf-tile__icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--aqua-soft, #EAF6F4);
color: var(--aqua-deep, #2C8E89);
border-radius: 10px;
flex-shrink: 0;
transition: background .2s ease, color .2s ease;
}
.hf-tile__icon svg { width: 22px; height: 22px; }
.hf-tile:hover .hf-tile__icon,
.hf-tile.is-selected .hf-tile__icon {
background: var(--aqua);
color: var(--white);
}
.hf-tile__title {
display: block;
font-family: var(--font-headline);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--navy);
line-height: 1.2;
}
.hf-tile__sub {
display: block;
font-size: 12px;
color: var(--text-muted);
line-height: 1.35;
margin-top: 2px;
}
/* Price hint */
.hf-pricehint {
display: grid;
gap: 4px;
padding: 14px 16px;
margin-bottom: 16px;
background: linear-gradient(135deg, var(--aqua-soft, #EAF6F4) 0%, var(--aqua-wash, #F4FAF9) 100%);
border: 1px solid var(--hairline-aqua, rgba(61, 182, 176, 0.25));
border-radius: 12px;
}
.hf-pricehint__label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--aqua-deep, #2C8E89);
}
.hf-pricehint__chip {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: rgba(255, 255, 255, 0.75);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--navy);
letter-spacing: 0.02em;
width: max-content;
}
.hf-pricehint__value {
font-family: var(--font-headline);
font-size: 20px;
font-weight: 500;
color: var(--navy);
letter-spacing: -0.015em;
line-height: 1.1;
}
.hf-pricehint__note {
font-size: 11px;
color: var(--text-muted);
line-height: 1.4;
}
/* Form */
.hf-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 14px;
}
.form-hp {
position: absolute !important;
left: -9999px !important;
width: 1px; height: 1px;
overflow: hidden;
}
.hf-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.hf-field--full { grid-column: 1 / -1; }
.hf-field__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--navy);
}
.hf-field__optional {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--text-muted);
font-size: 10px;
}
.hf-field input,
.hf-field textarea {
width: 100%;
padding: 11px 14px;
font-family: var(--font-body);
font-size: 15px;
color: var(--navy);
background: var(--white);
border: 1.5px solid var(--border);
border-radius: 8px;
transition: border-color .2s ease, box-shadow .2s ease;
resize: vertical;
}
.hf-field textarea { min-height: 64px; }
.hf-field input:focus,
.hf-field textarea:focus {
outline: none;
border-color: var(--aqua);
box-shadow: 0 0 0 3px var(--aqua-ghost, rgba(61, 182, 176, 0.18));
}
.hf-field input::placeholder,
.hf-field textarea::placeholder { color: var(--text-dim, #A4ACB6); }
.hf-consent {
grid-column: 1 / -1;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
color: var(--text-muted);
line-height: 1.45;
cursor: pointer;
}
.hf-consent input[type="checkbox"] {
width: 16px;
height: 16px;
margin-top: 2px;
accent-color: var(--aqua);
cursor: pointer;
flex-shrink: 0;
}
.hf-consent a { color: var(--navy); text-decoration: underline; }
.hf-consent a:hover { color: var(--aqua-deep, #2C8E89); }
@media (max-width: 600px) {
.hf-form { grid-template-columns: 1fr; }
}
/* Danke */
.hf-danke {
padding: clamp(20px, 3vw, 32px) 0 clamp(8px, 2vw, 16px);
}
.hf-danke__check {
width: 64px;
height: 64px;
margin: 0 auto 14px;
color: var(--aqua);
}
.hf-danke__check svg { width: 100%; height: 100%; }
.hf-danke__check svg circle { stroke-dasharray: 152; stroke-dashoffset: 152; animation: hfStroke .55s cubic-bezier(0.22, 1, 0.36, 1) forwards .1s; }
.hf-danke__check svg path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: hfStroke .45s cubic-bezier(0.22, 1, 0.36, 1) forwards .55s; }
@keyframes hfStroke { to { stroke-dashoffset: 0; } }
.hf-summary {
margin: 22px auto 0;
max-width: 560px;
text-align: left;
padding: 18px 20px;
background: var(--paper, #F7F4EE);
border: 1px solid var(--border);
border-radius: 12px;
}
.hf-summary h3 {
font-family: var(--font-headline);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--brass);
margin: 0 0 10px;
}
.hf-summary dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 6px 16px;
margin: 0 0 14px;
}
.hf-summary dt {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
.hf-summary dd {
margin: 0;
font-family: var(--font-headline);
font-size: 15px;
color: var(--navy);
}
.hf-summary__hint {
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
margin: 0 0 14px;
}
.hf-summary__cta-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hf-summary__cta-row .btn-primary,
.hf-summary__cta-row .btn-ghost {
flex: 1 1 200px;
text-align: center;
justify-content: center;
}
/* Footer */
.hf-foot {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(12px, 2vw, 20px);
padding: 14px clamp(20px, 3vw, 32px);
background: var(--white);
border-top: 1px solid var(--border);
}
.hf-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
border-radius: 999px;
border: 1.5px solid transparent;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
white-space: nowrap;
}
.hf-btn--ghost {
background: transparent;
color: var(--navy);
border-color: var(--border-strong, #D9D2C2);
padding: 10px 18px;
font-size: 13px;
}
.hf-btn--ghost:hover:not(:disabled) {
border-color: var(--navy);
background: var(--paper, #F7F4EE);
}
.hf-btn--primary {
background: var(--navy);
color: var(--white);
border-color: var(--navy);
padding: 12px 24px;
}
.hf-btn--primary:hover:not(:disabled) {
background: var(--aqua-deep, #2C8E89);
border-color: var(--aqua-deep, #2C8E89);
transform: translateY(-1px);
}
.hf-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.hf-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
color: var(--text-muted);
font-size: 11px;
letter-spacing: 0.04em;
}
.hf-trust strong {
color: var(--navy);
font-family: var(--font-headline);
font-weight: 500;
}
.hf-trust__sep {
width: 1px;
height: 12px;
background: var(--border-strong, #D9D2C2);
}
@media (max-width: 720px) {
.hf-foot {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"trust trust"
"back next";
gap: 12px;
}
.hf-foot > [data-hf-back] { grid-area: back; justify-self: start; }
.hf-foot > [data-hf-next] { grid-area: next; justify-self: end; }
.hf-trust { grid-area: trust; }
}
@media (max-width: 480px) {
.hf-trust { font-size: 10px; gap: 10px; }
}
/* ============================================================
FUNNEL — Mobile Optimization (Phone bis 767px)
Single-Column-Tiles, größere Inputs (kein iOS-Zoom),
stacked Footer, kompaktes Padding, lesbare Typo.
============================================================ */
@media (max-width: 767px) {
.home-funnel {
padding-top: clamp(40px, 8vw, 56px);
padding-bottom: clamp(40px, 8vw, 56px);
}
.home-funnel .container {
padding-left: 16px;
padding-right: 16px;
}
.home-funnel .siegel {
display: flex;
margin: 0 auto 14px;
position: relative;
inset: auto;
}
.home-funnel .section-head { margin-bottom: 24px; }
.hf-card { border-radius: 18px; }
/* Progress */
.hf-progress { padding: 18px 18px 0; }
.hf-progress__head { gap: 10px; margin-bottom: 8px; }
.hf-progress__step { font-size: 10px; letter-spacing: 0.18em; }
.hf-progress__time { font-size: 10px; letter-spacing: 0.14em; }
/* Steps */
.hf-steps { padding: 22px 18px 24px; }
.hf-step__num { font-size: 10px; letter-spacing: 0.18em; gap: 8px; }
.hf-step__num::before { width: 16px; }
.hf-step__h {
font-size: clamp(1.35rem, 5.4vw, 1.7rem);
line-height: 1.15;
margin-bottom: 6px;
}
.hf-step__lead { font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }
/* Tiles — single column für klare Lesbarkeit */
.hf-cards { gap: 8px; }
.hf-cards--7,
.hf-cards--4 { grid-template-columns: 1fr; }
.hf-cards--7 .hf-tile:nth-child(n) { grid-column: auto; }
.hf-tile {
grid-template-columns: 40px 1fr;
gap: 12px;
padding: 12px 14px;
min-height: 64px;
border-radius: 10px;
}
.hf-tile__icon { width: 40px; height: 40px; border-radius: 9px; }
.hf-tile__icon svg { width: 20px; height: 20px; }
.hf-tile__title { font-size: 14.5px; }
.hf-tile__sub { font-size: 11.5px; margin-top: 1px; }
.hf-tile.is-selected::after {
top: 10px;
right: 10px;
width: 16px;
height: 16px;
background-size: 10px;
}
/* Pricehint */
.hf-pricehint { padding: 12px 14px; gap: 6px; margin-bottom: 14px; }
.hf-pricehint__label { font-size: 9.5px; letter-spacing: 0.16em; }
.hf-pricehint__value { font-size: 18px; }
.hf-pricehint__note { font-size: 10.5px; }
.hf-pricehint__chip { font-size: 10.5px; padding: 2px 8px; }
/* Form — 16px Input verhindert iOS-Auto-Zoom */
.hf-form { gap: 10px; grid-template-columns: 1fr; }
.hf-field input,
.hf-field textarea {
font-size: 16px;
padding: 12px 14px;
border-radius: 10px;
}
.hf-field textarea { min-height: 72px; }
.hf-field__label { font-size: 10px; letter-spacing: 0.06em; }
.hf-consent {
font-size: 11.5px;
gap: 9px;
line-height: 1.45;
align-items: flex-start;
}
.hf-consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; }
/* Footer — Buttons in eine volle Zeile, Trust darunter */
.hf-foot {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"back next"
"trust trust";
gap: 10px;
padding: 14px 16px;
}
.hf-foot > [data-hf-back] {
grid-area: back;
justify-self: stretch;
}
.hf-foot > [data-hf-next] {
grid-area: next;
justify-self: stretch;
}
.hf-trust {
grid-area: trust;
flex-wrap: wrap;
gap: 6px 10px;
justify-content: center;
padding-top: 8px;
border-top: 1px dashed rgba(15, 42, 68, 0.1);
font-size: 10.5px;
}
.hf-btn { font-size: 13.5px; }
.hf-btn--ghost {
padding: 12px 16px;
justify-content: center;
min-height: 48px;
}
.hf-btn--primary {
padding: 13px 18px;
justify-content: center;
min-height: 48px;
}
/* Alt-Kontakt + Adresse */
.hf-alt {
font-size: 13px;
line-height: 1.7;
padding: 0 8px;
word-break: break-word;
}
.home-funnel .cta-address {
font-size: 11px;
padding: 0 8px;
line-height: 1.5;
}
/* Danke + Summary */
.hf-danke { padding: 16px 0 8px; }
.hf-danke__check { width: 56px; height: 56px; }
.hf-summary { padding: 12px 14px; margin-top: 12px; }
.hf-summary h3 { font-size: 12px; }
.hf-summary dl { gap: 6px 10px; }
.hf-summary dt { font-size: 11px; }
.hf-summary dd { font-size: 13.5px; }
.hf-summary__cta-row { flex-direction: column; gap: 8px; }
.hf-summary__cta-row .btn-primary,
.hf-summary__cta-row .btn-ghost { width: 100%; justify-content: center; }
}
@media (max-width: 380px) {
.home-funnel .container { padding-left: 12px; padding-right: 12px; }
.hf-progress { padding: 14px 14px 0; }
.hf-steps { padding: 18px 14px 20px; }
.hf-foot { padding: 12px 14px; }
.hf-step__h { font-size: 1.25rem; }
.hf-step__lead { font-size: 13px; }
.hf-tile {
padding: 10px 12px;
min-height: 60px;
grid-template-columns: 36px 1fr;
gap: 10px;
}
.hf-tile__icon { width: 36px; height: 36px; }
.hf-tile__icon svg { width: 18px; height: 18px; }
.hf-tile__title { font-size: 13.5px; }
.hf-tile__sub { font-size: 11px; }
.hf-trust__sep { display: none; }
.hf-trust { gap: 4px 10px; font-size: 10px; }
.hf-btn { font-size: 13px; }
.hf-btn--primary { padding: 12px 14px; }
.hf-btn--ghost { padding: 11px 14px; }
}
/* Alt-Kontakt + Adresse */
.hf-alt {
text-align: center;
margin: clamp(20px, 3vw, 28px) auto 6px;
font-size: 14px;
color: rgba(255, 255, 255, 0.78);
line-height: 1.6;
}
.hf-alt a {
color: var(--white);
font-weight: 500;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
transition: border-color .2s ease, color .2s ease;
}
.hf-alt a:hover {
border-color: var(--aqua);
color: var(--aqua);
}
.home-funnel .cta-address {
text-align: center;
color: rgba(255, 255, 255, 0.5);
margin-top: 8px;
font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
.hf-step,
.hf-progress__bar > span,
.hf-tile,
.hf-btn--primary { animation: none; transition: none; }
.hf-danke__check svg circle,
.hf-danke__check svg path { animation: none; stroke-dashoffset: 0; }
}
/* ===== HOME-FUNNEL — BARE VARIANT (no navy bg, no card shadow) ===== */
.home-funnel--bare { background: transparent; }
.home-funnel--bare .container { max-width: var(--container-max, 1200px); }
.home-funnel--bare .section-head .eyebrow,
.home-funnel--bare .section-head .h2,
.home-funnel--bare .section-head .lead { color: var(--navy); }
.home-funnel--bare .section-head .eyebrow::before { background: var(--brass); }
.hf-card--bare {
background: transparent;
box-shadow: none;
border-radius: 0;
overflow: visible;
max-width: 1100px;
}
.hf-card--bare .hf-progress__bar { background: rgba(15, 42, 68, 0.08); }
.hf-card--bare .hf-foot {
background: transparent;
border-top: 1px solid var(--border-strong, #E5E0D2);
}
/* ============================================================
76. PROZESS — Stepper-Variante (V12)
Kompakter Horizontal-Stepper + ein Body-Panel das wechselt.
Mobile: Stepper verkleinert, Body wird vertikal (Foto oben).
============================================================ */
.prozess--stepper { background: var(--paper); }
.prozess--stepper .h2 em { font-style: italic; color: var(--brass); font-weight: 400; }
.ps-stepper {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: start;
gap: 0;
margin: 28px auto 32px;
max-width: 760px;
}
.ps-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
cursor: pointer;
text-align: center;
background: transparent;
border: 0;
padding: 6px 4px;
font: inherit;
color: inherit;
}
.ps-step__circle {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--white);
border: 2px solid var(--border-strong);
display: grid;
place-items: center;
font-family: var(--serif);
font-style: italic;
font-size: 20px;
color: var(--text-muted);
transition: all .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ps-step__lbl {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-muted);
transition: color .3s ease;
}
.ps-step[aria-selected="true"] .ps-step__circle {
border-color: var(--brass);
background: var(--brass);
color: #fff;
box-shadow: 0 0 0 6px rgba(201, 169, 110, 0.15);
}
.ps-step[aria-selected="true"] .ps-step__lbl { color: var(--navy); }
.ps-step.is-done .ps-step__circle {
border-color: var(--brass);
color: var(--brass);
background: var(--white);
}
.ps-step.is-done .ps-step__lbl { color: var(--navy); }
.ps-step:hover:not([aria-selected="true"]) .ps-step__circle {
border-color: var(--brass);
color: var(--brass);
}
.ps-step__line {
height: 1px;
background: var(--border-strong);
width: 100%;
min-width: 32px;
margin-top: 30px;
position: relative;
}
.ps-step__line.is-done::before {
content: "";
position: absolute;
inset: 0;
background: var(--brass);
}
.ps-body {
display: grid;
grid-template-columns: 5fr 6fr;
gap: 0;
align-items: stretch;
background: var(--white);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 24px 48px -32px rgba(15, 42, 68, 0.18);
animation: psFade .42s cubic-bezier(0.22, 1, 0.36, 1);
}
.ps-body__photo {
aspect-ratio: 4/3;
background: var(--border);
overflow: hidden;
}
.ps-body__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ps-body__txt {
padding: 32px clamp(24px, 3vw, 36px);
display: flex;
flex-direction: column;
justify-content: center;
}
.ps-body__eye {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--brass);
margin: 0 0 10px;
}
.ps-body__h {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(22px, 2.8vw, 30px);
line-height: 1.12;
letter-spacing: -.01em;
color: var(--navy);
margin: 0 0 12px;
}
.ps-body__h em { font-style: italic; color: var(--brass); font-weight: 400; }
.ps-body__t {
margin: 0 0 18px;
color: var(--text-muted);
font-size: 15px;
line-height: 1.6;
max-width: 44ch;
}
.ps-body__inline-link {
color: var(--aqua);
text-decoration: none;
border-bottom: 1px solid currentColor;
font-weight: 600;
transition: color .2s ease, border-color .2s ease;
}
.ps-body__inline-link:hover {
color: var(--navy);
}
.ps-body__cta {
display: inline-flex;
align-self: flex-start;
width: fit-content;
align-items: center;
gap: 8px;
padding: 10px 16px;
margin: 0 0 22px;
background: var(--navy);
color: #fff;
font-family: var(--sans, var(--font-body));
font-size: 13px;
font-weight: 600;
letter-spacing: .03em;
text-decoration: none;
border-radius: 4px;
transition: background .2s ease, transform .2s ease;
}
.ps-body__cta:hover {
background: var(--brass);
transform: translateX(2px);
}
.ps-body__cta svg {
flex-shrink: 0;
}
.ps-body__row {
display: flex;
flex-wrap: wrap;
gap: 18px 22px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-muted);
padding-top: 14px;
border-top: 1px dashed var(--border-strong);
}
.ps-body__row span {
display: flex;
flex-direction: column;
gap: 2px;
}
.ps-body__row strong {
color: var(--navy);
font-weight: 700;
font-family: var(--serif);
font-style: italic;
font-size: 18px;
letter-spacing: 0;
text-transform: none;
}
@keyframes psFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
.ps-stepper {
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 0;
margin: 22px 0 24px;
}
.ps-step__circle { width: 40px; height: 40px; font-size: 16px; }
.ps-step__line { margin-top: 26px; min-width: 16px; }
.ps-step__lbl { font-size: 9.5px; letter-spacing: .12em; }
.ps-body { grid-template-columns: 1fr; }
.ps-body__photo { aspect-ratio: 5/3; }
.ps-body__txt { padding: 22px 20px 24px; }
.ps-body__h { font-size: 20px; }
.ps-body__t { font-size: 14px; }
.ps-body__row { gap: 14px 18px; }
.ps-body__row strong { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.ps-body { animation: none; }
.ps-step__circle, .ps-step__lbl, .ps-step__line { transition: none; }
}
/* ============================================================
77. HERO-DRIP — Tropfen-Vorhang (Hero → Über uns)
Aqua-Linie mit unregelmäßigen Tropfen, die in die "Leinwand"
der Über-uns-Sektion hinabfließen. Künstlerischer Übergang.
============================================================ */
.hero-drip {
position: relative;
width: 100%;
height: 105px;
background: var(--paper, #F7F4EE);
overflow: hidden;
pointer-events: none;
isolation: isolate;
}
.hero-drip__line {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--aqua, #3DB6B0);
z-index: 3;
}
.hero-drip__drop {
position: absolute;
top: 0;
left: var(--x);
width: 3px;
height: var(--h);
background: linear-gradient(
to bottom,
var(--aqua, #3DB6B0) 0%,
var(--aqua, #3DB6B0) 75%,
color-mix(in srgb, var(--aqua, #3DB6B0) 70%, var(--navy, #0F2A44)) 100%
);
border-radius: 0 0 1.5px 1.5px;
z-index: 2;
opacity: 0.9;
transform: translateX(-50%);
animation: hero-drip-grow 1.6s cubic-bezier(.4, 0, .2, 1) both;
}
.hero-drip__drop::after {
content: "";
position: absolute;
bottom: -3px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background: var(--aqua, #3DB6B0);
border-radius: 50%;
}
.hero-drip__drop--thin {
width: 2px;
opacity: 0.72;
}
.hero-drip__drop--thin::after {
width: 4px;
height: 4px;
}
.hero-drip__drop--wide {
width: 4px;
}
.hero-drip__drop--wide::after {
width: 8px;
height: 8px;
}
.hero-drip__drop--navy {
background: linear-gradient(
to bottom,
var(--aqua, #3DB6B0) 0%,
var(--navy, #0F2A44) 100%
);
opacity: 0.65;
}
.hero-drip__drop--navy::after {
background: var(--navy, #0F2A44);
}
.hero-drip__drop--streak {
border-radius: 0 0 1px 1px;
opacity: 0.55;
}
.hero-drip__drop--streak::after {
display: none;
}
/* Stagger animation per drop für organisches "Tropfen" */
.hero-drip__drop:nth-child(2) { animation-delay: 0ms; }
.hero-drip__drop:nth-child(3) { animation-delay: 80ms; }
.hero-drip__drop:nth-child(4) { animation-delay: 200ms; }
.hero-drip__drop:nth-child(5) { animation-delay: 320ms; }
.hero-drip__drop:nth-child(6) { animation-delay: 60ms; }
.hero-drip__drop:nth-child(7) { animation-delay: 240ms; }
.hero-drip__drop:nth-child(8) { animation-delay: 100ms; }
.hero-drip__drop:nth-child(9) { animation-delay: 360ms; }
.hero-drip__drop:nth-child(10) { animation-delay: 180ms; }
.hero-drip__drop:nth-child(11) { animation-delay: 280ms; }
.hero-drip__drop:nth-child(12) { animation-delay: 40ms; }
.hero-drip__drop:nth-child(13) { animation-delay: 220ms; }
.hero-drip__drop:nth-child(14) { animation-delay: 140ms; }
.hero-drip__drop:nth-child(15) { animation-delay: 380ms; }
.hero-drip__drop:nth-child(16) { animation-delay: 100ms; }
.hero-drip__drop:nth-child(17) { animation-delay: 260ms; }
.hero-drip__drop:nth-child(18) { animation-delay: 160ms; }
.hero-drip__drop:nth-child(19) { animation-delay: 340ms; }
.hero-drip__drop:nth-child(20) { animation-delay: 200ms; }
.hero-drip__drop:nth-child(21) { animation-delay: 60ms; }
.hero-drip__drop:nth-child(22) { animation-delay: 300ms; }
.hero-drip__drop:nth-child(23) { animation-delay: 120ms; }
.hero-drip__drop:nth-child(24) { animation-delay: 240ms; }
.hero-drip__drop:nth-child(25) { animation-delay: 80ms; }
@keyframes hero-drip-grow {
0% {
height: 0;
opacity: 0;
}
100% {
height: var(--h);
opacity: var(--end-op, 0.9);
}
}
@media (max-width: 768px) {
.hero-drip {
height: 75px;
}
.hero-drip__drop {
height: calc(var(--h) * 0.7);
}
.hero-drip__drop--mobile-hide {
display: none;
}
@keyframes hero-drip-grow {
0% {
height: 0;
opacity: 0;
}
100% {
height: calc(var(--h) * 0.7);
opacity: var(--end-op, 0.9);
}
}
}
@media (prefers-reduced-motion: reduce) {
.hero-drip__drop {
animation: none;
}
}
/* ===========================================================
STANDORT-SECTION (kontakt.html – Map + NAP)
=========================================================== */
.standort-section {
padding: clamp(72px, 9vw, 120px) 0 clamp(96px, 11vw, 144px);
background: var(--paper);
position: relative;
}
.standort-section .container { max-width: 1240px; }
.standort-section .section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.standort-layout {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: clamp(24px, 3vw, 40px);
align-items: stretch;
}
@media (max-width: 960px) {
.standort-layout { grid-template-columns: 1fr; }
}
/* ---------- Map widget ---------- */
.standort-map {
background: #fff;
border: 1px solid var(--border-strong, #E5E0D2);
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 30px 60px -40px rgba(15, 42, 68, 0.18);
}
.standort-map__tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border-strong, #E5E0D2);
background: var(--porcelain, #FAF8F3);
}
.standort-map__tab {
flex: 1;
background: transparent;
border: 0;
padding: 18px 20px;
display: flex;
align-items: baseline;
gap: 10px;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
color: rgba(15, 42, 68, 0.55);
text-align: left;
border-bottom: 2px solid transparent;
transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
position: relative;
}
.standort-map__tab + .standort-map__tab {
border-left: 1px solid var(--border-strong, #E5E0D2);
}
.standort-map__tab:hover { color: var(--navy); }
.standort-map__tab.is-active {
color: var(--navy);
background: #fff;
border-bottom-color: var(--brass);
}
.standort-map__tab-num {
font-family: 'Fraunces', serif;
font-size: 0.78rem;
letter-spacing: 0.12em;
color: var(--brass);
font-weight: 500;
}
.standort-map__tab-label {
font-weight: 500;
letter-spacing: 0.01em;
}
.standort-map__frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 11;
background: #e8e3d6;
overflow: hidden;
}
@media (max-width: 600px) {
.standort-map__frame { aspect-ratio: 4 / 3; }
}
.standort-map__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
filter: saturate(0.95) contrast(1.02);
}
.standort-map__legend {
position: absolute;
left: 18px;
bottom: 18px;
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 10px 14px;
border-radius: 4px;
border: 1px solid var(--border-strong, #E5E0D2);
font-family: 'Inter', sans-serif;
font-size: 0.84rem;
color: var(--navy);
letter-spacing: 0.01em;
pointer-events: none;
box-shadow: 0 10px 30px -15px rgba(15, 42, 68, 0.25);
max-width: calc(100% - 36px);
}
.standort-map__legend-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--brass);
box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.22);
flex-shrink: 0;
}
.standort-map__cities {
padding: 22px 24px 24px;
border-top: 1px solid var(--border-strong, #E5E0D2);
background: #fff;
}
.standort-map__cities-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(15, 42, 68, 0.55);
margin: 0 0 14px;
}
.standort-map__chips {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.standort-map__chips li { margin: 0; }
.standort-map__chips a {
display: inline-flex;
align-items: center;
padding: 7px 12px;
border: 1px solid var(--border-strong, #E5E0D2);
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
color: var(--navy);
text-decoration: none;
letter-spacing: 0.01em;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
background: var(--porcelain, #FAF8F3);
}
.standort-map__chips a:hover {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
/* ---------- Info column ---------- */
.standort-info {
display: flex;
flex-direction: column;
gap: clamp(16px, 2vw, 24px);
}
.standort-card {
background: #fff;
border: 1px solid var(--border-strong, #E5E0D2);
border-radius: 6px;
padding: clamp(24px, 3vw, 36px);
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
box-shadow: 0 20px 50px -40px rgba(15, 42, 68, 0.2);
}
.standort-card--alt {
background: var(--navy);
color: #fff;
border-color: transparent;
}
.standort-card--alt .standort-card__num { color: var(--brass); }
.standort-card--alt .h4 { color: #fff; }
.standort-card__num {
font-family: 'Fraunces', serif;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brass);
margin: 0;
font-weight: 500;
}
.standort-card .h4 {
margin: 0;
font-family: 'Fraunces', serif;
font-size: clamp(1.35rem, 1.8vw, 1.6rem);
font-weight: 500;
letter-spacing: -0.01em;
color: var(--navy);
}
.standort-card__addr {
font-style: normal;
font-family: 'Inter', sans-serif;
font-size: 0.96rem;
line-height: 1.6;
color: var(--navy);
margin: 0;
}
.standort-card__contact {
list-style: none;
margin: 6px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
border-top: 1px solid var(--border-strong, #E5E0D2);
padding-top: 14px;
}
.standort-card__contact li {
display: grid;
grid-template-columns: 92px 1fr;
gap: 10px;
align-items: baseline;
font-family: 'Inter', sans-serif;
font-size: 0.94rem;
}
.standort-card__lbl {
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(15, 42, 68, 0.55);
}
.standort-card__contact a {
color: var(--navy);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
word-break: break-word;
}
.standort-card__contact a:hover { border-bottom-color: var(--brass); }
.standort-card__cta {
margin-top: 8px;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 22px;
background: var(--navy);
color: #fff;
text-decoration: none;
font-family: 'Inter', sans-serif;
font-size: 0.92rem;
letter-spacing: 0.04em;
border-radius: 2px;
transition: background 0.25s ease, transform 0.25s ease;
}
.standort-card__cta svg { transition: transform 0.25s ease; }
.standort-card__cta:hover { background: #163758; }
.standort-card__cta:hover svg { transform: translateX(3px); }
.standort-hours {
list-style: none;
margin: 6px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.standort-hours li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
}
.standort-hours li:last-child { border-bottom: 0; }
.standort-hours strong {
font-weight: 500;
color: #fff;
font-variant-numeric: tabular-nums;
}
.standort-card__legal {
margin-top: 14px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 0.78rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.01em;
}
@media (max-width: 600px) {
.standort-map__tab { padding: 14px 14px; font-size: 0.88rem; }
.standort-map__cities { padding: 18px 18px 20px; }
.standort-card__contact li {
grid-template-columns: 1fr;
gap: 2px;
}
}
/* =====================================================
A11y — Skip Link
===================================================== */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 10000;
padding: 12px 20px;
background: var(--navy, #0F2A44);
color: #fff;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 6px 0;
font-size: 0.95rem;
}
.skip-link:focus,
.skip-link:focus-visible {
left: 0;
outline: 3px solid var(--brass, #C9A96E);
outline-offset: 2px;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}