/* ═══════════════════════════════════════════
DESIGN TOKENS — Cream / Dark / Forest Green
Referenz: struck.de Ästhetik
DSGVO-Hinweis:
· Schriften werden lokal eingebunden via fonts/fonts.css
· Keine Verbindung zu externen Servern (Google, Adobe etc.)
· Alle Animationen sind rein CSS-seitig, keine externen Abhängigkeiten
═══════════════════════════════════════════ */
:root {
/* ── Farben ────────────────────────────────────── */
--cream: #EDEBE3;
--cream-2: #E4E2DA;
--cream-3: #FAF9F6; /* Input-Hintergrund / "noch wärmer als cream" */
--dark: #0D0D0B;
--dark-2: #141410;
--dark-3: #1B1B17;
--green: #1B5C38;
--green-hover: #166634; /* Solider Hover-Tone für btn--green */
--green-mid: #3DA86A; /* Mid-Tone: italic em auf dunklem Grund, satter als Mint */
--green-light: #5EC487; /* Italic-Highlights auf dunklem Grund */
--green-light-2:#6FCF97; /* Akzent für receipt total, hero italic */
--green-dim: rgba(27,92,56,0.14);
--green-border: rgba(27,92,56,0.28);
--green-glow: rgba(27,92,56,0.22);
/* ── Text ──────────────────────────────────────── */
--text-on-dark: #F4F1EB;
--muted-on-dark: #8A8A78;
--text-on-cream: #1A1916;
--muted-on-cream: #6A6A5A;
--border-on-dark: rgba(255,255,255,0.07);
--border-on-cream:rgba(0,0,0,0.10);
/* ── Typo ──────────────────────────────────────── */
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Figtree', sans-serif;
/* Aliases für Legacy-Modal-Code (NICHT entfernen, wird im
.ms-* Modal verwendet bevor wir die Klassen vereinheitlichen) */
--ink: var(--text-on-cream);
--ff-display: var(--font-display);
--ff-body: var(--font-body);
/* ── Spacing ───────────────────────────────────── */
--section-py: clamp(72px, 9vw, 120px);
--container: 1280px;
--gap: clamp(32px, 5vw, 64px);
--nav-h: 68px;
/* ── Radii (3 Hauptgrößen + Pill) ──────────────── */
--r-sm: 10px;
--r-md: 16px;
--r-lg: 22px;
--r-pill: 100px;
/* ── Easing ────────────────────────────────────── */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ═══════════════════════════════════════════
RESET
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.55; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--green); color: #fff; }
/* ═══════════════════════════════════════════
THEME LAYERS
═══════════════════════════════════════════ */
.theme-dark {
background: var(--dark);
color: var(--text-on-dark);
}
.theme-cream {
background: var(--cream);
color: var(--text-on-cream);
}
/* ═══════════════════════════════════════════
LAYOUT
═══════════════════════════════════════════ */
.container {
width: min(var(--container), 100%);
margin-inline: auto;
padding-inline: clamp(20px, 5vw, 56px);
}
/* ═══════════════════════════════════════════
TYPOGRAPHY
═══════════════════════════════════════════ */
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
line-height: 1.08;
letter-spacing: -0.02em;
}
h1 { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 800; }
h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; font-family: var(--font-body); letter-spacing: 0; }
h5 { font-size: 0.72rem; font-weight: 600; font-family: var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
/* Italic-em-Highlight in Headings:
Cream-Sections: dunkles Marken-Grün
Dark-Sections: Mid-Tone-Grün (satt, lesbar, ohne blass zu wirken) */
h1 em, h2 em { font-style: italic; color: var(--green); }
.theme-dark h1 em,
.theme-dark h2 em { color: var(--green-mid); }
/* ═══════════════════════════════════════════
SECTION LABELS & TITLES
═══════════════════════════════════════════ */
.sec-eyebrow, .eyebrow {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 16px;
}
.sec-eyebrow--light, .theme-dark .sec-eyebrow { color: var(--green-light); }
.sec-eyebrow span, .eyebrow span {
display: block;
width: 24px;
height: 1px;
background: currentColor;
opacity: 0.6;
}
.sec-title {
font-size: clamp(2.2rem, 4.5vw, 3.4rem);
font-weight: 700;
margin-bottom: 20px;
}
.sec-title--light { color: var(--text-on-dark); }
.sec-title--light em { color: var(--green-mid); font-style: italic; }
.sec-sub {
color: var(--muted-on-cream);
max-width: 560px;
font-size: 1.05rem;
margin-bottom: 48px;
margin-inline: auto; /* FIX: zentriert den Block unter zentriertem Heading */
}
.sec-sub--light { color: var(--muted-on-dark); }
/* ═══════════════════════════════════════════
SCROLL REVEAL
═══════════════════════════════════════════ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--delay { transition-delay: 0.11s; }
.reveal--delay-1 { transition-delay: 0.09s; }
.reveal--delay-2 { transition-delay: 0.18s; }
.reveal--delay-3 { transition-delay: 0.27s; }
.reveal--delay-4 { transition-delay: 0.36s; }
/* ═══════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 500;
border-radius: 100px;
padding: 13px 26px;
transition: transform 0.2s var(--ease-out), box-shadow 0.2s, opacity 0.2s;
white-space: nowrap;
line-height: 1;
}
.btn:active { transform: scale(0.97); }
.btn--green {
background: var(--green);
color: #fff;
box-shadow: 0 4px 20px var(--green-glow);
}
.btn--green:hover {
background: var(--green-hover);
transform: translateY(-1px);
box-shadow: 0 8px 28px var(--green-glow);
}
.btn--full { width: 100%; justify-content: center; }
.btn--ghost-light {
color: rgba(244,241,235,0.85);
border: 1px solid rgba(255,255,255,0.18);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.06); }
.btn--ghost-dark {
color: var(--text-on-cream);
border: 1px solid var(--border-on-cream);
}
.btn--ghost-dark:hover { background: rgba(0,0,0,0.05); }
/* ═══════════════════════════════════════════
NAV — mit Slide-Down-Einlauf-Animation
═══════════════════════════════════════════ */
@keyframes navDropDown {
from {
opacity: 0;
transform: translateY(-100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
height: var(--nav-h);
background: rgba(13,13,11,0.68);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
border-bottom: 1px solid var(--border-on-dark);
transition: background 0.3s;
animation: navDropDown 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.nav.at-cream {
background: rgba(237,235,227,0.72);
border-bottom-color: var(--border-on-cream);
}
.nav__inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav__logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
color: var(--text-on-dark);
transition: opacity 0.2s;
}
.nav.at-cream .nav__logo { color: var(--text-on-cream); }
.nav__logo:hover { opacity: 0.75; }
.nav__logo strong { font-weight: 600; }
.nav__logo-mark { flex-shrink: 0; color: var(--green); }
.nav__logo-img {
display: block;
height: 44px;
width: auto;
max-width: none;
flex-shrink: 0;
object-fit: contain;
}
.nav__links {
display: flex;
align-items: center;
gap: 28px;
}
.nav__links a {
font-size: 0.875rem;
font-weight: 400;
color: var(--muted-on-dark);
transition: color 0.2s;
}
.nav.at-cream .nav__links a { color: var(--muted-on-cream); }
.nav__links a:hover { color: var(--text-on-dark); }
.nav.at-cream .nav__links a:hover { color: var(--text-on-cream); }
.nav__links .btn--green { color: #fff !important; }
.nav__burger {
display: none;
flex-direction: column;
gap: 5px;
padding: 6px;
}
.nav__burger span {
display: block;
width: 20px; height: 1.5px;
background: var(--text-on-dark);
border-radius: 2px;
transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.nav.at-cream .nav__burger span { background: var(--text-on-cream); }
.nav__burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav__mobile {
display: none;
flex-direction: column;
gap: 20px;
padding: 28px clamp(20px, 5vw, 56px) 32px;
background: var(--dark-2);
border-top: 1px solid var(--border-on-dark);
}
.nav__mobile a {
font-size: 1rem;
color: var(--muted-on-dark);
transition: color 0.2s;
}
.nav__mobile a:hover { color: var(--text-on-dark); }
.nav__mobile .btn--green { align-self: flex-start; }
.nav__mobile.open { display: flex; }
/* ═══════════════════════════════════════════
HERO — EINLAUF-ANIMATIONEN (Apple-Qualität)
═══════════════════════════════════════════ */
/* Slide von links — Überschriften */
@keyframes heroSlideLeft {
from { opacity: 0; transform: translateX(-52px); }
to { opacity: 1; transform: translateX(0); }
}
/* Fade von unten — CTA-Buttons & Proof-Row */
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow-anim { animation: heroSlideLeft 0.8s cubic-bezier(0.16,1,0.3,1) 0.30s both; }
.hero-title-anim { animation: heroSlideLeft 0.9s cubic-bezier(0.16,1,0.3,1) 0.45s both; }
.hero-sub-anim { animation: heroSlideLeft 0.8s cubic-bezier(0.16,1,0.3,1) 0.60s both; }
.hero-btns-anim { animation: heroFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.75s both; }
.hero-proof-anim { animation: heroFadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.88s both; }
.hero-stats-anim { animation: heroFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.55s both; }
/* Barrierefreiheit: Animationen deaktivieren wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
.nav,
.hero-eyebrow-anim, .hero-title-anim, .hero-sub-anim,
.hero-btns-anim, .hero-proof-anim, .hero-stats-anim {
animation: none;
opacity: 1;
transform: none;
}
}
/* ═══════════════════════════════════════════
HERO
═══════════════════════════════════════════ */
.hero {
position: relative;
min-height: 100svh;
padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 96px));
padding-bottom: var(--section-py);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ── Vollbild-Hintergrundbild mit All-Seiten-Fade ─── */
.hero__bg-layer {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
/* Fallback-Glow falls Bild nicht lädt — verleiht dem Hero
trotzdem etwas Tiefe (subtiler grüner Radial-Highlight) */
background:
radial-gradient(ellipse 70% 55% at 65% 40%,
rgba(27, 92, 56, 0.18) 0%,
rgba(27, 92, 56, 0.06) 40%,
transparent 70%),
var(--dark);
}
.hero__bg-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
display: block;
opacity: 0.62;
/* Sättigung etwas senken, Bild fügt sich besser ins dunkle Design ein */
filter: saturate(0.85) contrast(1.05);
}
/* Wenn das Bild via onerror entfernt wurde, ist der Fallback-Glow
(oben im .hero__bg-layer als Background gesetzt) sichtbar */
.hero__bg-layer--no-img {
background:
radial-gradient(ellipse 65% 50% at 60% 35%,
rgba(27, 92, 56, 0.28) 0%,
rgba(27, 92, 56, 0.10) 40%,
transparent 70%),
var(--dark);
}
/* Fades an allen 4 Seiten ins Dunkle — moderater, damit das
Bild in der Mitte spürbar bleibt und nicht zugedeckt wird */
.hero__bg-fade {
position: absolute;
inset: 0;
background:
linear-gradient(to right, var(--dark) 0%, rgba(13,13,11,0) 28%),
linear-gradient(to left, var(--dark) 0%, rgba(13,13,11,0) 28%),
linear-gradient(to bottom, var(--dark) 0%, rgba(13,13,11,0) 22%),
linear-gradient(to top, rgba(13,13,11,0.85) 0%, rgba(13,13,11,0) 32%);
pointer-events: none;
}
/* Grünes Grid-Muster über dem Bild */
.hero__bg-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(27, 92, 56, 0.11) 1px, transparent 1px),
linear-gradient(to right, rgba(27, 92, 56, 0.11) 1px, transparent 1px);
background-size: 44px 44px;
pointer-events: none;
/* Grid an den Rändern ebenfalls ausfaden */
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
}
/* Subtile Film-Grain-Textur via SVG-Filter */
.hero__noise {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
background-size: 200px 200px;
opacity: 0.6;
}
.hero__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: center;
flex: 1;
}
h1.hero-h1, .hero h1 {
margin: 18px 0 22px;
}
.hero__sub {
color: var(--muted-on-dark);
font-size: clamp(1rem, 1.5vw, 1.1rem);
max-width: 480px;
line-height: 1.65;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 32px;
}
/* ═══════════════════════════════════════════
HERO — NEUE STATS-KARTE (Punkt 2)
Premium, editorial — kein AI-Look
═══════════════════════════════════════════ */
.hero__stats-card {
position: relative;
background: rgba(11, 11, 9, 0.72);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 22px;
overflow: hidden;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow:
0 0 0 1px rgba(255,255,255,0.04) inset,
0 32px 80px rgba(0,0,0,0.4);
}
/* Grüne Akzentlinie oben links */
.hero__stats-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(
to right,
var(--green-light) 0%,
rgba(94,196,135,0.3) 40%,
transparent 65%
);
}
/* Sehr subtiles grünes Leuchten in der Mitte der Karte */
.hero__stats-card::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 200px; height: 200px;
background: radial-gradient(
circle,
rgba(27, 92, 56, 0.1) 0%,
transparent 70%
);
pointer-events: none;
}
.hsc__label {
display: flex;
align-items: center;
gap: 8px;
padding: 20px 24px 0;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(94, 196, 135, 0.65);
}
/* 2×2 Grid für die Kennzahlen */
.hsc__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(255, 255, 255, 0.05);
margin: 16px 0 0;
}
.hsc__item {
background: rgba(13, 13, 11, 0.6);
padding: 28px 28px 24px;
display: flex;
flex-direction: column;
gap: 10px;
transition: background 0.3s;
}
.hsc__item:hover {
background: rgba(27, 92, 56, 0.06);
}
.hsc__value {
display: flex;
align-items: baseline;
gap: 2px;
line-height: 1;
}
.hsc__num {
font-family: var(--font-display);
font-size: clamp(2.4rem, 4vw, 3.4rem);
font-weight: 800;
color: var(--text-on-dark);
letter-spacing: -0.03em;
line-height: 1;
}
.hsc__suf {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.2vw, 1.9rem);
font-weight: 700;
color: var(--green-light);
letter-spacing: -0.02em;
line-height: 1;
}
.hsc__lbl {
font-size: 0.7rem;
color: var(--muted-on-dark);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
}
.hsc__footer {
display: flex;
align-items: center;
gap: 7px;
padding: 14px 24px 18px;
font-size: 0.68rem;
color: rgba(138, 138, 120, 0.6);
letter-spacing: 0.03em;
border-top: 1px solid rgba(255,255,255,0.05);
}
.hsc__footer svg { color: rgba(94,196,135,0.5); flex-shrink: 0; }
/* Scroll line */
.hero__scroll-line {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
}
.hero__scroll-line span {
display: block;
width: 1px;
height: 44px;
background: linear-gradient(to bottom, rgba(94,196,135,0.7), transparent);
animation: scrollDown 2.2s ease-in-out infinite;
}
@keyframes scrollDown {
0%,100% { opacity:0; transform: scaleY(0); transform-origin: top; }
50% { opacity:1; transform: scaleY(1); transform-origin: top; }
}
/* ═══════════════════════════════════════════
WAVE TRANSITION (Hero → Cream)
Nur an diesem einen Übergang – kein Gimmick,
sondern eine saubere organische Grenze.
═══════════════════════════════════════════ */
.section-wave {
display: block;
background: var(--dark); /* obere Hälfte: Hero-Farbe */
line-height: 0;
font-size: 0;
margin-top: -2px; /* lückenloser Anschluss ans Hero */
margin-bottom: -2px;
position: relative;
z-index: 1;
}
.section-wave svg {
display: block;
width: 100%;
height: auto;
}
/* ═══════════════════════════════════════════
PROBLEM SECTION
═══════════════════════════════════════════ */
.section-problem {
padding: var(--section-py) 0;
}
.problem-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin: 48px 0 40px;
}
.p-card {
background: var(--cream-2);
border: 1px solid var(--border-on-cream);
border-radius: 16px;
padding: clamp(24px, 3vw, 36px);
}
.p-card__icon {
width: 40px; height: 40px;
background: var(--green-dim);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: var(--green);
margin-bottom: 18px;
}
.p-card h3 { margin-bottom: 8px; font-size: 1.05rem; }
.p-card p { font-size: 0.875rem; color: var(--muted-on-cream); }
.problem__cta { text-align: center; }
/* ═══════════════════════════════════════════
WAS IST SECTION
(Layout via .was__header + .was__process — siehe weiter unten)
═══════════════════════════════════════════ */
.section-was { padding: var(--section-py) 0; }
/* ═══════════════════════════════════════════
ABLAUF
═══════════════════════════════════════════ */
.section-ablauf { padding: var(--section-py) 0; }
.ablauf__layout {
display: grid;
grid-template-columns: 1fr 0.9fr;
gap: var(--gap);
align-items: start;
margin-top: 56px;
}
.steps { display: flex; flex-direction: column; }
.step {
display: grid;
grid-template-columns: 52px 1fr;
gap: 16px;
}
.step__mark {
display: flex;
flex-direction: column;
align-items: center;
}
.step__mark > span {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--green-dim);
border: 1px solid var(--green-border);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 700;
color: var(--green);
flex-shrink: 0;
transition: background 0.3s, border-color 0.3s;
}
.step.is-visible .step__mark > span {
background: var(--green);
border-color: var(--green);
color: #fff;
}
.step__line {
flex: 1;
width: 1px;
background: var(--border-on-cream);
margin: 6px 0;
min-height: 28px;
}
.step__body { padding-bottom: 32px; }
.step__body h3 { margin-bottom: 6px; font-size: 1.05rem; }
.step__body p { font-size: 0.875rem; color: var(--muted-on-cream); }
/* Cost card */
.cost-card {
background: var(--dark);
border-radius: 18px;
padding: clamp(28px, 3.5vw, 44px);
position: sticky;
top: calc(var(--nav-h) + 24px);
}
.cost-card__label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-on-dark);
margin-bottom: 24px;
}
.cost-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--border-on-dark);
font-size: 0.875rem;
}
.cost-row span { color: var(--muted-on-dark); }
.cost-row strong { color: var(--green-light); font-weight: 600; }
.cost-row--total strong { color: var(--text-on-dark); }
.cost-divider { height: 1px; background: var(--border-on-dark); margin: 8px 0; }
.cost-card .btn--green { margin-top: 24px; }
.risk-box {
flex: 1;
background: var(--cream-2);
border: 1px solid var(--border-on-cream);
border-radius: 20px;
padding: clamp(28px, 3.5vw, 40px);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.risk-box::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #C0392B, #e05a4a);
border-radius: 20px 20px 0 0;
}
.risk-box__head {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.78rem;
font-weight: 700;
color: #C0392B;
margin-bottom: 24px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.risk-box__head svg { flex-shrink: 0; }
.risk-box__sub {
font-size: 0.85rem;
color: var(--muted-on-cream);
margin-bottom: 20px;
line-height: 1.6;
}
.risk-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 0;
flex: 1;
}
.risk-list li {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.875rem;
color: var(--text-on-cream);
background: rgba(192,57,43,0.05);
border: 1px solid rgba(192,57,43,0.12);
border-radius: 10px;
padding: 12px 16px;
font-weight: 500;
}
.risk-list li::before {
content: '✕';
color: #C0392B;
font-size: 0.65rem;
flex-shrink: 0;
font-weight: 900;
width: 20px;
height: 20px;
background: rgba(192,57,43,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 20px;
}
.risk-sol {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.85rem;
font-weight: 600;
color: var(--green);
background: var(--green-dim);
border: 1px solid var(--green-border);
border-radius: 12px;
padding: 16px 18px;
line-height: 1.5;
margin-top: 20px;
}
.risk-sol svg { flex-shrink: 0; margin-top: 1px; }
/* ═══════════════════════════════════════════
TRUST
═══════════════════════════════════════════ */
.section-trust { padding: var(--section-py) 0; }
.trust__layout {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--gap);
align-items: stretch;
}
.trust__left h2 { margin-top: 20px; }
.ti {
display: flex;
gap: 18px;
align-items: flex-start;
padding: 22px 0;
border-bottom: 1px solid var(--border-on-dark);
}
.ti:first-child { padding-top: 0; border-top: 1px solid var(--border-on-dark); }
.ti__icon {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--green-dim);
border: 1px solid rgba(94,196,135,0.2);
display: flex; align-items: center; justify-content: center;
color: var(--green-light);
flex-shrink: 0;
}
.ti h4 { margin-bottom: 4px; color: var(--text-on-dark); }
.ti p { font-size: 0.845rem; color: var(--muted-on-dark); line-height: 1.5; }
/* ═══════════════════════════════════════════
STÄDTE
═══════════════════════════════════════════ */
.section-cities { padding: var(--section-py) 0; text-align: center; }
.cities-cloud {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 12px;
}
.cities-cloud span {
background: var(--cream-2);
border: 1px solid var(--border-on-cream);
border-radius: 100px;
padding: 7px 16px;
font-size: 0.85rem;
color: var(--muted-on-cream);
transition: color 0.2s, border-color 0.2s;
}
.cities-cloud span:hover { color: var(--text-on-cream); border-color: rgba(0,0,0,0.2); }
.c-plus {
color: var(--green) !important;
border-color: var(--green-border) !important;
background: var(--green-dim) !important;
font-weight: 500;
}
/* ═══════════════════════════════════════════
FAQ
═══════════════════════════════════════════ */
.section-faq { padding: var(--section-py) 0; }
.faq__layout {
display: grid;
grid-template-columns: 1fr 1.8fr;
gap: var(--gap);
align-items: stretch;
}
.faq__left h2 { margin-bottom: 20px; }
.faq__left p { color: var(--muted-on-cream); font-size: 0.9rem; margin-bottom: 28px; }
.faq__list {
border-top: 1px solid var(--border-on-cream);
}
.faq-item { border-bottom: 1px solid var(--border-on-cream); }
.faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 0;
text-align: left;
font-size: 0.92rem;
font-weight: 500;
color: var(--text-on-cream);
transition: color 0.2s;
}
.faq-q:hover { color: var(--green); }
.faq-arrow {
flex-shrink: 0;
color: var(--muted-on-cream);
transition: transform 0.35s var(--ease-out), color 0.2s;
}
.faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--green); }
.faq-item.open .faq-q { color: var(--green); }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s var(--ease-out);
}
.faq-item.open .faq-a { max-height: 240px; }
.faq-a p {
padding-bottom: 20px;
font-size: 0.875rem;
color: var(--muted-on-cream);
line-height: 1.65;
}
/* ── FAQ Theme-Dark-Overrides ─────────────────────────────────
FAQ-Section in dunklem Look — Borders, Question-Color,
Hover-States und Open-States invertiert. */
.section-faq.theme-dark .faq__left p {
color: var(--muted-on-dark);
}
.section-faq.theme-dark .faq__list {
border-top-color: var(--border-on-dark);
}
.section-faq.theme-dark .faq-item {
border-bottom-color: var(--border-on-dark);
}
.section-faq.theme-dark .faq-q {
color: var(--text-on-dark);
}
.section-faq.theme-dark .faq-q:hover {
color: var(--green-light);
}
.section-faq.theme-dark .faq-arrow {
color: var(--muted-on-dark);
}
.section-faq.theme-dark .faq-item.open .faq-arrow,
.section-faq.theme-dark .faq-item.open .faq-q {
color: var(--green-light);
}
.section-faq.theme-dark .faq-a p {
color: var(--muted-on-dark);
}
/* Subtiles Grid-Pattern wie andere dunkle Sections */
.section-faq.theme-dark {
position: relative;
overflow: hidden;
}
.section-faq.theme-dark::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(27, 92, 56, 0.08) 1px, transparent 1px),
linear-gradient(to right, rgba(27, 92, 56, 0.08) 1px, transparent 1px);
background-size: 44px 44px;
pointer-events: none;
mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 25%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 25%, transparent 80%);
z-index: 0;
}
.section-faq.theme-dark > .container {
position: relative;
z-index: 1;
}
/* ═══════════════════════════════════════════
CTA SECTION
═══════════════════════════════════════════ */
.section-cta { padding: var(--section-py) 0; }
.cta-card {
position: relative;
background: var(--dark);
border-radius: 24px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.cta-card__bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 36px 36px;
pointer-events: none;
}
.cta-card__left {
position: relative;
padding: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 56px);
border-right: 1px solid var(--border-on-dark);
}
.cta-card__left h2 { margin-bottom: 20px; color: var(--text-on-dark); }
.cta-card__left h2 em { color: var(--green-light); font-style: italic; }
.cta-card__left p { color: var(--muted-on-dark); font-size: 0.92rem; margin-bottom: 28px; }
.cta-proof { display: flex; flex-direction: column; gap: 8px; }
.cta-proof span {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.8rem;
color: var(--muted-on-dark);
}
.cta-proof svg { color: var(--green-light); }
.cta-card__right {
position: relative;
padding: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 56px);
display: flex;
flex-direction: column;
gap: 14px;
}
/* CTA Panel (ersetzt altes Formular) */
.cta-card__cta-panel {
display: flex;
flex-direction: column;
gap: 18px;
/* Vorher: height:100% + justify-content:center — das hat den
darunter folgenden Location-Block weggedrückt. Jetzt: nur
Auto-Höhe, sodass Location-Block sichtbar wird. */
}
.cta-card__cta-text {
font-size: 1rem;
color: var(--muted-on-dark);
line-height: 1.6;
}
.cta-card__cta-note {
font-size: 0.78rem;
color: var(--muted-on-dark);
text-align: center;
opacity: 0.7;
letter-spacing: 0.02em;
}
/* ═══════════════════════════════════════════
FOOTER
═══════════════════════════════════════════ */
.footer { position: relative; overflow: hidden; }
.footer__inner {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--gap);
align-items: start;
padding-top: clamp(48px, 6vw, 80px);
padding-bottom: clamp(48px, 6vw, 80px);
}
.footer__brand .nav__logo { margin-bottom: 14px; }
.footer__brand p { font-size: 0.8rem; color: var(--muted-on-dark); line-height: 1.6; }
.footer__nav { display: flex; gap: 48px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col h5 { color: var(--muted-on-dark); margin-bottom: 2px; }
.footer__col a { font-size: 0.875rem; color: var(--muted-on-dark); transition: color 0.2s; }
.footer__col a:hover { color: var(--text-on-dark); }
.footer__wm {
position: absolute;
bottom: -16px; right: -8px;
font-family: var(--font-display);
font-size: clamp(80px, 14vw, 160px);
font-weight: 800;
color: rgba(255,255,255,0.02);
line-height: 1;
pointer-events: none;
user-select: none;
letter-spacing: -0.04em;
}
.footer__bottom {
border-top: 1px solid var(--border-on-dark);
padding: 22px 0 32px;
display: flex;
flex-direction: column;
gap: 4px;
}
.footer__bottom p { font-size: 0.775rem; color: var(--muted-on-dark); opacity: 0.65; }
/* ═══════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
/* Hero: 2-spaltig bis 1024, dann einspaltzig – max-width entfernt für Stats-Karte */
.hero__inner {
grid-template-columns: 1fr;
gap: 36px;
max-width: 640px;
margin-inline: auto;
}
/* Stats-Karte auf Tablet etwas kompakter */
.hsc__item { padding: 22px 22px 18px; }
.hsc__num { font-size: clamp(2rem, 5vw, 2.8rem); }
.hsc__suf { font-size: clamp(1.2rem, 3vw, 1.5rem); }
.ablauf__layout { grid-template-columns: 1fr; }
.cost-card { position: static; }
.kosten__layout { grid-template-columns: 1fr; }
.trust__layout { grid-template-columns: 1fr; }
.faq__layout { grid-template-columns: 1fr; }
.cta-card { grid-template-columns: 1fr; }
.cta-card__left { border-right: none; border-bottom: 1px solid var(--border-on-dark); }
.fz-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.nav__links { display: none; }
.nav__burger { display: flex; }
.problem-grid { grid-template-columns: 1fr; }
.fz-grid { grid-template-columns: 1fr 1fr; }
.footer__inner { grid-template-columns: 1fr; }
.footer__nav { flex-wrap: wrap; gap: 32px; }
.hero__scroll-line { display: none; }
/* Hero: innerer Container volle Breite auf Mobile */
.hero__inner { max-width: 100%; padding-inline: 0; }
/* Hintergrund-Fades auf Mobile: links/rechts stärker */
.hero__bg-fade {
background:
linear-gradient(to right, var(--dark) 0%, rgba(13,13,11,0) 60%),
linear-gradient(to left, var(--dark) 0%, rgba(13,13,11,0) 60%),
linear-gradient(to bottom, var(--dark) 0%, rgba(13,13,11,0) 22%),
linear-gradient(to top, rgba(13,13,11,0.95) 0%, rgba(13,13,11,0) 35%);
}
/* Stats-Karte: 2×2 bleibt, aber kleiner */
.hsc__item { padding: 20px 18px 16px; }
.hsc__num { font-size: 2.2rem; }
.hsc__suf { font-size: 1.3rem; }
.hsc__lbl { font-size: 0.65rem; }
.hsc__label { padding: 16px 18px 0; font-size: 0.6rem; }
.hsc__footer { padding: 12px 18px 14px; font-size: 0.62rem; }
}
@media (max-width: 480px) {
.fz-grid { grid-template-columns: 1fr; }
.ablauf__layout { gap: 40px; }
}
/* ═══════════════════════════════════════════
IMAGE PLACEHOLDERS
═══════════════════════════════════════════ */
.img-ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
border-radius: 16px;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 400;
text-align: center;
letter-spacing: 0.02em;
/* Cream theme default */
background: #D8D6CE;
color: #8A8A7A;
border: 1.5px dashed #B8B6AE;
}
/* On dark sections */
.theme-dark .img-ph {
background: #1E1E1A;
color: #5A5A4A;
border-color: #2E2E28;
}
.img-ph svg { opacity: 0.5; }
/* Sizes */
.img-ph--hero { aspect-ratio: 4/3; width: 100%; border-radius: 18px; }
.img-ph--landscape{ aspect-ratio: 16/9; width: 100%; }
.img-ph--portrait { aspect-ratio: 3/4; width: 100%; }
.img-ph--fz { aspect-ratio: 4/3; width: 100%; border-radius: 12px; }
/* ═══════════════════════════════════════════
HERO — UPDATED LAYOUT (benefits list + visual)
═══════════════════════════════════════════ */
.hero__benefits {
display: flex;
flex-direction: column;
gap: 12px;
margin: 24px 0 0;
}
.hero__benefits li {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 0.875rem;
color: var(--muted-on-dark);
line-height: 1.4;
}
.hero__benefits svg { color: var(--green-light); flex-shrink: 0; margin-top: 2px; }
/* ─── Hero Visual wrapper ─── */
.hero__visual {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
/* ═══════════════════════════════════════════
TRUST TOP SECTION
Vollbild-Layout: kein Container,
linke Spalte = Text (max-width-begrenzt),
rechte Spalte = Bild füllt gesamte Seite bis Rand
═══════════════════════════════════════════ */
.section-trust-top {
/* kein padding-top/bottom – das erledigt trust-top__left */
overflow: hidden;
}
/* Outer grid – 2 gleiche Spalten, volle Breite, Mindesthöhe */
.trust-top__grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch; /* beide Spalten gleich hoch → Bild füllt exakt */
min-height: clamp(520px, 70vh, 760px);
}
/* Linke Spalte: innerer Content mit Container-Logik */
.trust-top__left {
display: flex;
flex-direction: column;
justify-content: center;
padding-top: var(--section-py);
padding-bottom: var(--section-py);
/* Container-Padding links: passt sich an 1280px max-width an */
padding-left: max(clamp(20px, 5vw, 56px), calc((100vw - 1280px) / 2 + clamp(20px, 5vw, 56px)));
padding-right: clamp(40px, 5vw, 80px);
}
.trust-top__left h2 { margin-bottom: 20px; }
.trust-top__left p {
color: var(--muted-on-cream);
font-size: 0.925rem;
line-height: 1.65;
}
/* Rechte Spalte – Bild full-bleed, Liste absolut zentriert */
.trust-top__right {
position: relative;
/* Kein flex nötig – Liste ist absolut positioniert */
}
/* Das Bild füllt den kompletten rechten Bereich */
.trust-top__img-fill {
position: absolute;
inset: 0;
}
.trust-top__img-fill .img-ph {
width: 100%;
height: 100%;
border-radius: 0;
border: none;
}
/*
Fade: NUR von links (nahtloser Übergang zur linken Spalte).
Oben/unten: ganz subtil – das Bild soll sichtbar bleiben.
22% → 0% damit das tatsächliche Foto noch durchkommt.
*/
.trust-top__img-fade {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(to right, var(--cream) 0%, rgba(237,235,227,0.15) 22%),
linear-gradient(to bottom, rgba(237,235,227,0.6) 0%, rgba(237,235,227,0) 18%),
linear-gradient(to top, rgba(237,235,227,0.6) 0%, rgba(237,235,227,0) 18%);
}
/*
Trust-Liste: absolut, vertikal UND horizontal zentriert –
exakt auf Augenhöhe mit der linken Spalten-Mitte.
Glassmorphism-Karte, sauber und zurückhaltend.
*/
.trust-top__right .trust-list {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: clamp(24px, 6%, 56px);
right: clamp(24px, 6%, 56px);
z-index: 1;
display: flex;
flex-direction: column;
gap: 0;
background: rgba(237, 235, 227, 0.82);
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
border: 1px solid rgba(28, 28, 26, 0.09);
border-radius: 16px;
padding: 4px 22px;
box-shadow: 0 8px 32px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}
.trust-top__right .trust-list li {
display: flex;
align-items: center;
gap: 11px;
font-size: 0.88rem;
font-weight: 400;
color: var(--text-on-cream);
line-height: 1.45;
padding: 12px 0;
border-bottom: 1px solid rgba(28,28,26,0.08);
}
.trust-top__right .trust-list li:last-child { border-bottom: none; }
.trust-top__right .trust-list li:first-child { padding-top: 14px; }
.trust-top__right .trust-list svg {
color: var(--green);
flex-shrink: 0;
}
/* ═══════════════════════════════════════════
SCHROTTAUTO ABHOLEN SECTION
═══════════════════════════════════════════ */
.section-abholen { padding: var(--section-py) 0; }
.abholen__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap);
align-items: stretch;
}
.abholen__text h2 { margin-bottom: 20px; }
.abholen__text p { color: var(--muted-on-cream); font-size: 0.925rem; margin-bottom: 12px;
line-height: 1.65;
}
.abholen__text .btn { margin-top: 24px; }
/* Shared check list */
.check-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 4px;
}
.check-list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.875rem;
color: var(--muted-on-cream);
}
.check-list li::before {
content: '';
display: inline-block;
width: 18px; height: 18px;
flex-shrink: 0;
background-color: var(--green);
border-radius: 50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: 11px 11px;
background-repeat: no-repeat;
background-position: center;
}
/* Dark list (for dark sections) */
.dark-list {
display: flex;
flex-direction: column;
gap: 14px;
margin: 16px 0 24px;
list-style: none;
padding: 0;
}
.dark-list li {
display: flex;
align-items: center;
gap: 14px;
font-size: 0.95rem;
color: var(--text-on-dark);
line-height: 1.5;
}
/* Check-Mark in dezent grünem Tinted-Square */
.dark-list li::before {
content: '';
width: 24px;
height: 24px;
border-radius: 7px;
background:
var(--green-dim)
url("data:image/svg+xml;utf8,")
center / 14px 14px no-repeat;
border: 1px solid var(--green-border);
flex-shrink: 0;
}
/* ═══════════════════════════════════════════
ABLAUF — DARK THEME OVERRIDES
═══════════════════════════════════════════ */
/* Steps on dark bg need color override */
.section-ablauf .step__line { background: var(--border-on-dark); }
.section-ablauf .step__body h3 { color: var(--text-on-dark); }
.section-ablauf .step__body p { color: var(--muted-on-dark); }
.ablauf__note {
text-align: center;
color: var(--muted-on-dark);
font-size: 0.875rem;
margin-top: 48px;
font-style: italic;
}
/* ═══════════════════════════════════════════
FAHRZEUGE — CREAM THEME OVERRIDES
═══════════════════════════════════════════ */
.section-fz { padding: var(--section-py) 0; }
.fz-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 32px;
}
.fz-tile {
background: var(--cream-2);
border: 1px solid var(--border-on-cream);
border-radius: 14px;
padding: 24px 20px;
transition: border-color 0.2s, transform 0.2s;
}
.fz-tile:hover {
border-color: var(--green-border);
transform: translateY(-2px);
}
.fz-tile__icon {
width: 44px; height: 44px;
background: var(--green-dim);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: var(--green);
margin-bottom: 14px;
}
.fz-tile h3 { font-size: 0.95rem; margin-bottom: 6px; }
.fz-tile p { font-size: 0.82rem; color: var(--muted-on-cream); line-height: 1.5; }
.fz-images {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 24px;
}
.fz-note {
text-align: center;
color: var(--muted-on-cream);
font-size: 0.875rem;
font-style: italic;
}
/* ═══════════════════════════════════════════
KOSTEN — DARK THEME
═══════════════════════════════════════════ */
.section-kosten { padding: var(--section-py) 0; }
.kosten__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap);
align-items: stretch;
margin-top: 12px;
}
.kosten__left h2 { margin-bottom: 20px; }
.kosten__left p { color: var(--muted-on-dark); font-size: 0.925rem; margin-bottom: 12px;
line-height: 1.65;
}
.kosten__left .btn { margin-top: 24px; }
/* Risk box adapted to dark */
.section-kosten .risk-box {
background: rgba(255,255,255,0.04);
border-color: var(--border-on-dark);
}
.section-kosten .risk-box::before {
background: linear-gradient(90deg, #F87171, #ef5350);
}
.section-kosten .risk-box__head {
color: #F87171;
}
.section-kosten .risk-box__sub {
color: var(--muted-on-dark);
}
.section-kosten .risk-list li {
color: var(--muted-on-dark);
background: rgba(248,113,113,0.06);
border-color: rgba(248,113,113,0.15);
}
.section-kosten .risk-list li::before {
color: #F87171;
background: rgba(248,113,113,0.12);
}
/* ═══════════════════════════════════════════
RESTWERT SECTION (NEU)
═══════════════════════════════════════════ */
.section-restwert { padding: var(--section-py) 0; }
.restwert__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap);
align-items: stretch;
}
.restwert__text h2 { margin-bottom: 20px; }
.restwert__text p { color: var(--muted-on-cream); font-size: 0.925rem; margin-bottom: 12px;
line-height: 1.65;
}
.restwert__conclusion {
font-size: 0.875rem;
font-weight: 600;
color: var(--green) !important;
margin: 16px 0 24px !important;
}
.check-list--dark li { color: var(--text-on-cream); }
/* ═══════════════════════════════════════════
CITIES — DARK THEME
═══════════════════════════════════════════ */
.section-cities { padding: var(--section-py) 0; text-align: center; }
.cities-cloud--dark span {
background: var(--dark-2);
border: 1px solid var(--border-on-dark);
color: var(--muted-on-dark);
}
.cities-cloud--dark span:hover { color: var(--text-on-dark); border-color: rgba(255,255,255,0.15); }
.cities-cloud--dark .c-plus {
color: var(--green-light) !important;
border-color: rgba(94,196,135,0.2) !important;
background: rgba(94,196,135,0.08) !important;
}
/* ═══════════════════════════════════════════
RESPONSIVE ADDITIONS
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
.trust-top__grid { grid-template-columns: 1fr; min-height: auto; }
.trust-top__left { padding: clamp(40px,7vw,72px) clamp(20px,5vw,56px); }
.trust-top__right {
min-height: 380px;
}
.trust-top__right .trust-list {
left: 16px;
right: 16px;
padding: 4px 16px;
}
.trust-top__right .trust-list li { font-size: 0.825rem; }
.abholen__inner { grid-template-columns: 1fr; }
.restwert__inner { grid-template-columns: 1fr; }
.fz-grid { grid-template-columns: repeat(2, 1fr); }
.fz-images { grid-template-columns: repeat(2, 1fr); }
.img-ph--portrait { aspect-ratio: 16/9; min-height: 240px; }
}
@media (max-width: 768px) {
.fz-grid { grid-template-columns: 1fr; }
.fz-images { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════
TEAM / ANSPRECHPARTNER SECTION
═══════════════════════════════════════════ */
.section-team { padding: var(--section-py) 0; }
.section-team .sec-title { text-align: center; }
.team-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
max-width: 880px;
margin: 48px auto 0;
}
/* ── Card Shell ─────────────────────────────────────────────────
Editorial contact card. Kein Foto-Slot mehr — die Identität
trägt das Initialen-Monogramm (Playfair italic). Linker
dunkelgrüner Stripe als Marken-Marker, immer sichtbare
Action-Buttons (touch-friendly, kein Hover-Overlay).
─────────────────────────────────────────────────────────────── */
.team-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--cream-3);
border: 1px solid var(--border-on-cream);
border-radius: var(--r-lg);
padding: 36px 32px 28px 40px;
overflow: hidden;
transition:
transform 0.35s var(--ease-out),
box-shadow 0.35s var(--ease-out),
border-color 0.35s;
}
.team-card:hover {
transform: translateY(-4px);
border-color: var(--green);
box-shadow: 0 18px 40px -16px rgba(27, 92, 56, 0.32);
}
/* Linker grüner Stripe */
.team-card__stripe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 5px;
background: var(--green);
border-radius: var(--r-lg) 0 0 var(--r-lg);
}
/* ── Head: Monogram + Meta ─────────────────────────────────── */
.team-card__head {
display: flex;
align-items: center;
gap: 22px;
margin-bottom: 28px;
}
.team-card__monogram {
position: relative;
width: 76px;
height: 76px;
flex-shrink: 0;
display: grid;
place-items: center;
}
/* Dot-grid Background im Monogramm (Schmidt&Co-Pattern) */
.team-card__monogram-bg {
position: absolute;
inset: 0;
border-radius: var(--r-md);
background:
radial-gradient(circle, rgba(27,92,56,0.32) 1px, transparent 1.4px) 0 0 / 8px 8px,
linear-gradient(135deg, var(--green) 0%, #134127 100%);
background-blend-mode: overlay, normal;
}
.team-card__monogram-letters {
position: relative;
z-index: 1;
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 1.95rem;
letter-spacing: -0.02em;
color: var(--cream);
line-height: 1;
user-select: none;
}
/* Bei drei Buchstaben (HRB) etwas kleiner damit's reinpasst */
.team-card__monogram-letters:not(:empty)[data-len="3"],
.team-card .team-card__monogram-letters {
font-size: clamp(1.35rem, 2.4vw, 1.95rem);
}
.team-card__meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.team-card__role {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--green);
}
.team-card__name {
font-family: var(--font-display);
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 700;
line-height: 1.15;
color: var(--text-on-cream);
margin: 4px 0 4px;
}
.team-card__dept {
font-size: 0.85rem;
color: var(--muted-on-cream);
line-height: 1.4;
}
/* ── Contact List ──────────────────────────────────────────── */
.team-card__contact {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: flex;
flex-direction: column;
gap: 14px;
border-top: 1px solid var(--border-on-cream);
padding-top: 22px;
}
.team-card__contact li {
display: flex;
flex-direction: column;
gap: 2px;
}
.team-card__label {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-on-cream);
}
.team-card__contact a,
.team-card__hours {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 500;
color: var(--text-on-cream);
letter-spacing: -0.005em;
text-decoration: none;
transition: color 0.2s;
}
.team-card__contact a:hover {
color: var(--green);
}
/* ── Action Pills ──────────────────────────────────────────── */
.team-card__actions {
display: flex;
gap: 10px;
margin-top: auto;
}
.team-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 600;
border-radius: var(--r-pill);
padding: 12px 18px;
text-decoration: none;
transition:
transform 0.2s var(--ease-out),
background 0.2s,
box-shadow 0.2s;
white-space: nowrap;
}
.team-btn:active { transform: scale(0.97); }
.team-btn--call {
background: var(--green);
color: #fff;
box-shadow: 0 4px 14px var(--green-glow);
}
.team-btn--call:hover {
background: var(--green-hover);
transform: translateY(-1px);
box-shadow: 0 8px 22px var(--green-glow);
}
.team-btn--wa {
background: #fff;
color: var(--text-on-cream);
border: 1px solid var(--border-on-cream);
}
.team-btn--wa:hover {
border-color: #25D366;
color: #1FAB55;
transform: translateY(-1px);
}
.team-btn--wa svg { color: #25D366; }
/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 720px) {
.team-grid {
grid-template-columns: 1fr;
max-width: 480px;
gap: 20px;
}
.team-card {
padding: 28px 24px 24px 32px;
}
.team-card__head {
gap: 18px;
margin-bottom: 22px;
}
.team-card__monogram {
width: 64px;
height: 64px;
}
.team-card__monogram-letters {
font-size: 1.7rem;
}
}
@media (max-width: 380px) {
.team-card__actions {
flex-direction: column;
}
}
/* ═══════════════════════════════════════════
FIX 1 — HERO: H1 kleiner, kompakt, passt in viewport
═══════════════════════════════════════════ */
.hero h1 {
font-size: clamp(2.4rem, 5vw, 4rem);
margin: 14px 0 16px;
line-height: 1.08;
}
/* Hero min-height reduziert: content soll in 100svh passen */
.hero {
min-height: 100svh;
padding-top: calc(var(--nav-h) + clamp(40px, 5vw, 64px));
padding-bottom: clamp(48px, 6vw, 80px);
}
.hero__sub {
font-size: clamp(0.9rem, 1.3vw, 1rem);
max-width: 440px;
}
.hero__actions { margin-top: 24px; }
/* Kompakte Proof-Row (3 Checkmarks horizontal) */
.hero__proof-row {
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
margin-top: 20px;
}
.hero__proof-row span {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
color: var(--muted-on-dark);
}
.hero__proof-row svg { color: var(--green-light); flex-shrink: 0; }
/* ═══════════════════════════════════════════
FIX 2 — VORTEILE SECTION (nach Hero)
═══════════════════════════════════════════ */
.section-vorteile { padding: clamp(64px, 8vw, 108px) 0; }
.vorteile__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap);
align-items: center; /* vertikal zentriert – nicht mehr stretch */
}
/* Linke Spalte: starke Headline + Subtitle */
.vorteile__text h2 {
font-size: clamp(2.4rem, 4.2vw, 3.6rem); /* größer, selbstbewusster */
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.025em;
margin-top: 16px;
color: var(--text-on-cream);
}
.vorteile__text h2 em { color: var(--green); font-style: italic; }
.vorteile__sub {
margin-top: 20px;
font-size: 1rem;
line-height: 1.7;
color: var(--muted-on-cream);
max-width: 400px;
}
.vorteile__sub strong { color: var(--text-on-cream); font-weight: 600; }
/* Rechte Spalte: Liste + CTA-Button */
.vorteile__right {
display: flex;
flex-direction: column;
gap: 0;
}
.vorteile__list {
display: flex;
flex-direction: column;
gap: 0;
}
.vorteile__list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.9rem;
color: var(--text-on-cream);
line-height: 1.45;
padding: 11px 0;
border-bottom: 1px solid var(--border-on-cream);
}
.vorteile__list li:first-child { border-top: 1px solid var(--border-on-cream); }
.vorteile__list svg { color: var(--green); flex-shrink: 0; margin-top: 2px; }
/* CTA direkt unter der Liste, linksbündig */
.vorteile__cta {
margin-top: 28px;
text-align: left;
}
/* ═══════════════════════════════════════════
FIX 3 — SEC-SUB: explizit zentriert in allen Sections
═══════════════════════════════════════════ */
.section-fz .sec-sub,
.section-cities .sec-sub,
.section-abholen .sec-sub { text-align: center; }
/* ═══════════════════════════════════════════
FIX 4 — ABLAUF SCHRITTE: Circles konsistent auf Dark-BG
Problem: step__mark > span zeigt keine Ziffer richtig,
da is-visible-Klasse per JS kommt aber initial unsichtbar
═══════════════════════════════════════════ */
.section-ablauf .step__mark > span {
/* Immer sichtbar — grüner Ring, weiße Ziffer */
background: transparent;
border: 2px solid rgba(94, 196, 135, 0.5);
color: var(--green-light);
font-size: 0.85rem;
font-weight: 700;
}
.section-ablauf .step.is-visible .step__mark > span {
background: var(--green);
border-color: var(--green);
color: #fff;
box-shadow: 0 0 0 4px rgba(27, 92, 56, 0.25);
}
/* Verbindungslinie zwischen Steps */
.section-ablauf .step__line {
background: linear-gradient(to bottom, rgba(94,196,135,0.3), rgba(94,196,135,0.08));
width: 2px;
}
/* ═══════════════════════════════════════════
FIX 5 — STÄDTE PILLS: alle gleich hoch, mittig ausgerichtet
═══════════════════════════════════════════ */
.cities-cloud,
.cities-cloud--dark {
align-items: center; /* gleiche Höhe in flex-wrap */
}
.cities-cloud span,
.cities-cloud--dark span {
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 16px;
line-height: 1;
}
/* ═══════════════════════════════════════════
FIX 6 — FAHRZEUGE GRID: Karten gleich groß, auf einer Höhe
═══════════════════════════════════════════ */
.fz-grid {
align-items: stretch; /* alle Karten gleich hoch */
}
.fz-tile {
display: flex;
flex-direction: column;
height: 100%; /* streckt sich auf Grid-Row-Höhe */
}
.fz-tile p { flex: 1; } /* Text füllt verbleibenden Raum */
/* ═══════════════════════════════════════════
FIX 7 — KOSTEN SECTION: risk-box auf Dark-BG korrekte Farben
"Grund:" war zu blass (var(--muted-on-dark) mit opacity)
═══════════════════════════════════════════ */
.section-kosten .kosten__left p strong {
color: var(--green-light);
}
.section-kosten .dark-list li {
color: rgba(244, 241, 235, 0.75);
}
.section-kosten .dark-list li::before {
background: rgba(94, 196, 135, 0.6);
}
/* ═══════════════════════════════════════════
FIX 8 — RESPONSIVE: Vorteile & hero proof-row
═══════════════════════════════════════════ */
@media (max-width: 768px) {
.vorteile__inner { grid-template-columns: 1fr; }
.hero__proof-row { flex-direction: column; gap: 6px; }
}
/* ═══════════════════════════════════════════
FIX 9 — HERO SCROLL-LINE: z-index über bg-layer
═══════════════════════════════════════════ */
.hero__scroll-line {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
/* ═══════════════════════════════════════════
FIX 10 — SEHR KLEINE BILDSCHIRME: Stats-Karte
═══════════════════════════════════════════ */
@media (max-width: 420px) {
.hsc__num { font-size: 1.9rem; }
.hsc__suf { font-size: 1.1rem; }
.hsc__item { padding: 16px 14px 14px; gap: 8px; }
.hsc__grid { margin-top: 12px; }
/* Hintergrund-Bild auf sehr kleinen Screens: Bildmitte anpassen */
.hero__bg-img { object-position: 60% 30%; }
/* Hero-Text kompakter */
.hero h1 { font-size: 2rem; }
.hero__actions { flex-direction: column; gap: 10px; }
.hero__actions .btn { width: 100%; justify-content: center; }
}
/* ═══════════════════════════════════════════
FIX 11 — HERO CONTENT: z-index sicherstellen
═══════════════════════════════════════════ */
.hero__content {
position: relative;
z-index: 2;
}
.hero__visual {
position: relative;
z-index: 2;
}
/* ═══════════════════════════════════════════════════════
4-STUFIGES KONTAKT-MODAL — autoverwertung-hrb.de
═══════════════════════════════════════════════════════ */
/* Overlay */
.ms-overlay {
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(10, 12, 10, 0.72);
backdrop-filter: blur(4px);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0;
opacity: 0;
transition: opacity 0.28s ease;
}
.ms-overlay.is-open {
opacity: 1;
}
.ms-overlay[hidden] {
display: none !important;
}
@media (min-width: 600px) {
.ms-overlay {
align-items: center;
padding: 24px 16px;
}
}
/* Modal box */
.ms-modal {
background: #fff;
width: 100%;
max-width: 580px;
max-height: 92dvh;
overflow-y: auto;
border-radius: 20px 20px 0 0;
display: flex;
flex-direction: column;
transform: translateY(40px);
transition: transform 0.32s cubic-bezier(0.34, 1.44, 0.64, 1);
position: relative;
overscroll-behavior: contain;
}
.ms-overlay.is-open .ms-modal {
transform: translateY(0);
}
@media (min-width: 600px) {
.ms-modal {
border-radius: 20px;
max-height: 88vh;
}
}
/* Header */
.ms-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px 14px;
border-bottom: 1px solid #f0ede6;
position: sticky;
top: 0;
background: #fff;
z-index: 2;
}
.ms-header__left {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
font-weight: 700;
color: var(--ink);
font-family: var(--ff-display);
}
.ms-close {
width: 36px; height: 36px;
border-radius: 50%;
border: none;
background: #f4f2ed;
color: #777;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s, color 0.15s;
}
.ms-close:hover { background: #e8e4dc; color: var(--ink); }
/* Progress bar */
.ms-progress {
height: 3px;
background: #f0ede6;
position: sticky;
top: 56px;
z-index: 2;
}
.ms-progress__bar {
height: 100%;
background: var(--green);
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
width: 25%;
}
/* Step indicators */
.ms-steps {
display: flex;
gap: 0;
padding: 14px 20px 0;
border-bottom: 1px solid #f0ede6;
}
.ms-step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
font-size: 0.65rem;
font-weight: 600;
color: #bbb;
text-transform: uppercase;
letter-spacing: 0.06em;
padding-bottom: 12px;
border-bottom: 2px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.ms-step span {
width: 22px; height: 22px;
border-radius: 50%;
background: #e8e4dc;
color: #aaa;
font-size: 0.72rem;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s, color 0.2s;
}
.ms-step.active {
color: var(--green);
border-bottom-color: var(--green);
}
.ms-step.active span {
background: var(--green);
color: #fff;
}
.ms-step.done {
color: #5a5753;
}
.ms-step.done span {
background: #d4eed9;
color: var(--green);
}
/* Panes */
.ms-pane {
display: none;
padding: 24px 20px;
flex-direction: column;
gap: 18px;
animation: msSlideIn 0.28s ease;
}
.ms-pane.active {
display: flex;
}
@keyframes msSlideIn {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
.ms-pane--back-anim {
animation: msSlideInBack 0.28s ease;
}
@keyframes msSlideInBack {
from { opacity: 0; transform: translateX(-24px); }
to { opacity: 1; transform: translateX(0); }
}
.ms-pane__title {
font-family: var(--ff-display);
font-size: 1.25rem;
font-weight: 700;
color: var(--ink);
margin: 0 0 2px;
}
.ms-pane__sub {
font-size: 0.82rem;
color: #777;
margin: -10px 0 0;
line-height: 1.5;
}
/* Form groups */
.ms-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.ms-fg {
display: flex;
flex-direction: column;
gap: 6px;
}
.ms-fg--sm { max-width: 120px; }
.ms-fg--hidden { display: none !important; }
.ms-fg label {
font-size: 0.75rem;
font-weight: 600;
color: #5a5753;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ms-fg input[type="text"],
.ms-fg input[type="number"],
.ms-fg input[type="tel"],
.ms-fg input[type="email"],
.ms-fg input[type="date"],
.ms-fg textarea {
border: 1.5px solid #e0dbd1;
border-radius: 10px;
padding: 11px 14px;
font-size: 0.9rem;
font-family: var(--ff-body);
color: var(--ink);
background: #faf9f6;
transition: border-color 0.15s, box-shadow 0.15s;
outline: none;
width: 100%;
box-sizing: border-box;
}
.ms-fg input:focus,
.ms-fg textarea:focus {
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(27, 120, 60, 0.1);
background: #fff;
}
.ms-fg input.invalid,
.ms-fg textarea.invalid {
border-color: #C0392B;
box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}
.ms-fg textarea { resize: vertical; min-height: 80px; }
/* Pills */
.ms-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ms-pills--sm .ms-pill {
font-size: 0.78rem;
padding: 7px 12px;
}
.ms-pill {
border: 1.5px solid #e0dbd1;
border-radius: 99px;
padding: 8px 16px;
font-size: 0.83rem;
font-weight: 500;
color: #5a5753;
background: #faf9f6;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
white-space: nowrap;
}
.ms-pill:hover {
border-color: var(--green);
color: var(--green);
background: #f2faf4;
}
.ms-pill.active {
border-color: var(--green);
background: var(--green);
color: #fff;
font-weight: 600;
}
/* Checkboxes */
.ms-checks {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ms-check {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--ink);
cursor: pointer;
padding: 8px 14px;
border: 1.5px solid #e0dbd1;
border-radius: 8px;
background: #faf9f6;
transition: border-color 0.15s;
}
.ms-check:hover { border-color: var(--green); }
.ms-check input { accent-color: var(--green); }
.ms-check:has(input:checked) {
border-color: var(--green);
background: #f2faf4;
}
/* Radio cards */
.ms-radio-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.ms-radio {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1.5px solid #e0dbd1;
border-radius: 12px;
background: #faf9f6;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.ms-radio:hover { border-color: var(--green); }
.ms-radio:has(input:checked) {
border-color: var(--green);
background: #f2faf4;
}
.ms-radio input[type="radio"] { display: none; }
.ms-radio__box {
width: 20px; height: 20px;
border-radius: 50%;
border: 2px solid #ccc;
flex-shrink: 0;
position: relative;
transition: border-color 0.15s;
}
.ms-radio:has(input:checked) .ms-radio__box {
border-color: var(--green);
}
.ms-radio:has(input:checked) .ms-radio__box::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--green);
}
.ms-radio div strong {
display: block;
font-size: 0.88rem;
font-weight: 600;
color: var(--ink);
}
.ms-radio div small {
display: block;
font-size: 0.75rem;
color: #888;
margin-top: 2px;
}
/* File upload */
.ms-upload {
border: 2px dashed #d5d0c6;
border-radius: 12px;
padding: 20px;
text-align: center;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: #888;
font-size: 0.82rem;
transition: border-color 0.15s, background 0.15s;
position: relative;
}
.ms-upload:hover, .ms-upload.dragover {
border-color: var(--green);
background: #f2faf4;
}
.ms-upload input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.ms-upload__preview {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.ms-upload__thumb {
width: 64px; height: 64px;
border-radius: 8px;
object-fit: cover;
border: 1.5px solid #e0dbd1;
}
.ms-upload__dsgvo {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: 8px;
font-size: 0.72rem;
color: var(--muted-on-cream, #6A6A5A);
line-height: 1.5;
}
.ms-upload__dsgvo svg {
flex-shrink: 0;
margin-top: 2px;
opacity: 0.7;
}
.ms-upload__dsgvo a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
/* Summary */
.ms-summary {
background: #f4f2ed;
border-radius: 12px;
padding: 14px 16px;
margin-top: 4px;
}
.ms-summary__title {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #888;
margin-bottom: 8px;
}
.ms-summary__body {
font-size: 0.82rem;
color: #555;
line-height: 1.7;
}
.ms-summary__body strong { color: var(--ink); }
/* Consent */
.ms-consent-wrap { margin-top: 4px; }
.ms-consent {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 0.78rem;
color: #666;
line-height: 1.5;
}
.ms-consent__box {
width: 18px; height: 18px;
border: 1.5px solid #ccc;
border-radius: 4px;
flex-shrink: 0;
margin-top: 1px;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.15s, background 0.15s;
}
.ms-consent input { display: none; }
.ms-consent:has(input:checked) .ms-consent__box {
border-color: var(--green);
background: var(--green);
}
.ms-consent:has(input:checked) .ms-consent__box::after {
content: '';
display: block;
width: 10px; height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translateY(-1px);
}
.ms-consent.invalid .ms-consent__box { border-color: #C0392B; }
.ms-consent a { color: var(--green); }
/* Trust row */
.ms-trust-row {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
font-size: 0.72rem;
color: #888;
margin-top: -4px;
}
.ms-trust-row span {
display: flex;
align-items: center;
gap: 5px;
}
.ms-trust-row svg { color: var(--green); flex-shrink: 0; }
/* Error */
.ms-error {
background: #fdf1ef;
border: 1px solid #f5c6bc;
border-radius: 8px;
padding: 10px 14px;
font-size: 0.8rem;
color: #c0392b;
line-height: 1.5;
}
/* req star */
.req { color: var(--green); }
/* Footer */
.ms-footer {
position: sticky;
bottom: 0;
background: #fff;
border-top: 1px solid #f0ede6;
padding: 14px 20px;
display: flex;
gap: 12px;
align-items: center;
z-index: 2;
}
.ms-btn {
border: none;
border-radius: 10px;
padding: 12px 22px;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.18s, transform 0.12s;
}
.ms-btn:active { transform: scale(0.97); }
.ms-btn--back {
background: #f4f2ed;
color: #5a5753;
margin-right: auto;
}
.ms-btn--back:hover { background: #e8e4dc; }
.ms-btn--next {
background: var(--green);
color: #fff;
margin-left: auto;
}
.ms-btn--next:hover { background: #166634; }
.ms-btn--submit {
background: var(--green);
color: #fff;
margin-left: auto;
font-size: 0.88rem;
}
.ms-btn--submit:hover { background: #166634; }
.ms-btn--submit:disabled {
opacity: 0.65;
cursor: not-allowed;
}
/* Success pane */
.ms-pane--success.active {
align-items: center;
text-align: center;
padding: 40px 24px;
gap: 14px;
}
.ms-success { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ms-success__icon {
width: 72px; height: 72px;
border-radius: 50%;
background: var(--green);
display: flex; align-items: center; justify-content: center;
color: #fff;
animation: msPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes msPop {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.ms-success h3 {
font-family: var(--ff-display);
font-size: 1.4rem;
color: var(--ink);
margin: 0;
}
.ms-success p { font-size: 0.88rem; color: #555; line-height: 1.65; margin: 0; max-width: 340px; }
.ms-success__sub { font-size: 0.75rem !important; color: #aaa !important; }
/* Mobile tweaks */
@media (max-width: 480px) {
.ms-row { grid-template-columns: 1fr; }
.ms-fg--sm { max-width: 100%; }
.ms-steps { padding: 10px 14px 0; }
.ms-step { font-size: 0; gap: 0; padding-bottom: 10px; }
.ms-step span { font-size: 0.72rem; }
.ms-pane { padding: 18px 16px; }
.ms-footer { padding: 12px 16px; }
}
/* ═══════════════════════════════════════════════════════════════
MOBILE RESPONSIVE — KOMPLETTER FIX
Getestet für: 320px–480px (iPhone SE, 13 mini)
480px–768px (größere Handys, kleine Tablets)
═══════════════════════════════════════════════════════════════ */
/* ── GLOBALE MOBILE BASIS ─────────────────────────────────────── */
@media (max-width: 768px) {
:root {
--section-py: clamp(48px, 10vw, 72px);
--nav-h: 60px;
}
/* Alle Sections: genug Padding */
.container {
padding-inline: 20px;
}
/* Buttons: full width auf Mobile wenn gestapelt */
.hero__actions .btn {
width: 100%;
justify-content: center;
text-align: center;
}
/* Überschriften: kleiner auf Mobile */
h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.sec-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
}
/* ── HERO ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.hero {
min-height: auto;
padding-top: calc(var(--nav-h) + 32px);
padding-bottom: 48px;
}
.hero__inner {
grid-template-columns: 1fr;
gap: 32px;
max-width: 100%;
}
.hero h1 {
font-size: clamp(2rem, 7.5vw, 2.6rem);
margin: 12px 0 14px;
line-height: 1.1;
}
.hero__sub {
font-size: 0.95rem;
max-width: 100%;
}
.hero__actions {
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
.hero__actions .btn {
width: 100%;
justify-content: center;
font-size: 0.9rem;
padding: 14px 20px;
}
.hero__proof-row {
flex-direction: column;
gap: 6px;
margin-top: 16px;
}
/* Hero Visual: Bild-Placeholder kleiner */
.img-ph--hero { aspect-ratio: 16/9; border-radius: 12px; }
}
/* ── VORTEILE SECTION ─────────────────────────────────────────── */
@media (max-width: 768px) {
.vorteile__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.vorteile__text h2 {
font-size: clamp(2rem, 7vw, 2.6rem);
margin-top: 8px;
}
.vorteile__sub { max-width: 100%; }
.vorteile__list li { font-size: 0.875rem; }
.vorteile__cta .btn {
width: 100%;
justify-content: center;
}
}
/* ── TRUST TOP ────────────────────────────────────────────────── */
@media (max-width: 768px) {
.trust-top__grid { grid-template-columns: 1fr; min-height: auto; }
.trust-top__left {
padding: clamp(40px, 8vw, 64px) 20px clamp(32px, 6vw, 48px);
}
.trust-top__right {
min-height: 360px;
}
.trust-top__right .trust-list {
left: 16px;
right: 16px;
padding: 4px 16px;
}
.trust-top__right .trust-list li { font-size: 0.825rem; }
}
/* ── SCHROTTAUTO ABHOLEN ──────────────────────────────────────── */
@media (max-width: 768px) {
.abholen__inner {
grid-template-columns: 1fr;
gap: 28px;
}
.abholen__img { order: -1; }
.img-ph--landscape {
aspect-ratio: 16/9;
border-radius: 12px;
}
.abholen__text h2 { margin-bottom: 14px; }
.abholen__text p { font-size: 0.925rem;
line-height: 1.65;
}
.abholen__text .btn {
width: 100%;
justify-content: center;
margin-top: 24px;
}
.check-list li { font-size: 0.875rem; }
}
/* ── ABLAUF ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
.ablauf__layout {
grid-template-columns: 1fr;
gap: 36px;
margin-top: 36px;
}
.step {
grid-template-columns: 44px 1fr;
gap: 12px;
}
.step__mark > span {
width: 36px; height: 36px;
font-size: 0.8rem;
}
.step__body { padding-bottom: 24px; }
.step__body h3 { font-size: 1rem; }
.step__body p { font-size: 0.85rem; }
/* Cost Card: kompakter */
.cost-card {
padding: 24px 20px;
border-radius: 14px;
}
.cost-card .btn--full {
font-size: 0.9rem;
padding: 13px 18px;
}
.cost-row {
font-size: 0.875rem;
padding: 10px 0;
}
}
/* ── FAHRZEUGE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
.fz-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 32px;
}
.fz-tile {
padding: 18px 14px;
border-radius: 12px;
}
.fz-tile__icon {
width: 36px; height: 36px;
border-radius: 8px;
margin-bottom: 10px;
}
.fz-tile__icon svg { width: 18px; height: 18px; }
.fz-tile h3 { font-size: 0.875rem; margin-bottom: 4px; }
.fz-tile p { font-size: 0.78rem; }
/* Fahrzeug-Bilder: nur 1 spaltig */
.fz-images {
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 16px;
}
.img-ph--fz { aspect-ratio: 16/9; }
}
@media (max-width: 400px) {
.fz-grid { grid-template-columns: 1fr; }
}
/* ── KOSTENLOS SECTION ────────────────────────────────────────── */
@media (max-width: 768px) {
.kosten__layout {
grid-template-columns: 1fr;
gap: 28px;
margin-top: 8px;
}
.kosten__left h2 { margin-bottom: 14px; }
.kosten__left p { font-size: 0.925rem;
line-height: 1.65;
}
.kosten__left .btn {
width: 100%;
justify-content: center;
margin-top: 24px;
}
.dark-list li { font-size: 0.875rem; }
.risk-box {
padding: 24px 20px;
border-radius: 16px;
}
.risk-list li { font-size: 0.83rem; padding: 10px 14px; }
.risk-sol { font-size: 0.82rem; padding: 13px 15px; margin-top: 16px; }
}
/* ── RESTWERT SECTION ─────────────────────────────────────────── */
@media (max-width: 768px) {
.restwert__inner {
grid-template-columns: 1fr;
gap: 28px;
}
.restwert__img { order: -1; }
.restwert__text h2 { margin-bottom: 14px; }
.restwert__text p { font-size: 0.925rem;
line-height: 1.65;
}
.restwert__text .btn {
width: 100%;
justify-content: center;
margin-top: 24px;
}
}
/* ── STÄDTE ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
.cities-cloud,
.cities-cloud--dark {
gap: 7px;
}
.cities-cloud span,
.cities-cloud--dark span {
font-size: 0.8rem;
height: 32px;
padding: 0 13px;
}
}
/* ── ANSPRECHPARTNER / TEAM (Mobile-Regeln direkt in der
Komponente oben — kein separater Block hier mehr nötig.) ── */
@media (max-width: 420px) {
.team-grid {
grid-template-columns: 1fr;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
}
/* ── FAQ ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.faq__layout {
grid-template-columns: 1fr;
gap: 24px;
}
.faq__left h2 { font-size: clamp(1.6rem, 6vw, 2rem); }
.faq__left p { font-size: 0.875rem; }
.faq__left .btn {
width: 100%;
justify-content: center;
}
.faq-q {
font-size: 0.875rem;
padding: 16px 0;
gap: 12px;
}
.faq-a p { font-size: 0.85rem; }
}
/* ── CTA SECTION ──────────────────────────────────────────────── */
@media (max-width: 768px) {
.cta-card {
grid-template-columns: 1fr;
border-radius: 16px;
}
.cta-card__left {
padding: 32px 24px;
border-right: none;
border-bottom: 1px solid var(--border-on-dark);
}
.cta-card__left h2 {
font-size: clamp(1.5rem, 5.5vw, 2rem);
}
.cta-card__right {
padding: 28px 24px;
}
.cta-card__cta-text { font-size: 0.9rem; }
.btn--full {
font-size: 0.9rem;
padding: 14px 20px;
}
.cta-proof span { font-size: 0.8rem; }
}
/* ── FOOTER ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
.footer__inner {
grid-template-columns: 1fr;
gap: 32px;
padding-top: 40px;
padding-bottom: 32px;
}
.footer__nav {
flex-direction: column;
gap: 24px;
}
.footer__col { gap: 8px; }
.footer__col a { font-size: 0.875rem; }
.footer__brand p { font-size: 0.82rem; }
.footer__wm {
font-size: clamp(60px, 18vw, 100px);
bottom: -8px;
right: -4px;
}
.footer__bottom {
padding: 16px 0 24px;
gap: 3px;
}
.footer__bottom p { font-size: 0.75rem; }
}
/* ── MODAL / KONTAKTFORMULAR ──────────────────────────────────── */
@media (max-width: 480px) {
.ms-modal {
border-radius: 18px 18px 0 0;
max-height: 94dvh;
}
.ms-header {
padding: 14px 16px 12px;
}
.ms-header__left { font-size: 0.85rem; }
.ms-steps {
padding: 10px 14px 0;
gap: 0;
}
/* Schritt-Labels ausblenden, nur Zahlen */
.ms-step {
font-size: 0;
padding-bottom: 8px;
gap: 3px;
}
.ms-step span { font-size: 0.72rem; }
.ms-pane {
padding: 16px 16px;
gap: 14px;
}
.ms-pane__title { font-size: 1.1rem; }
.ms-pane__sub { font-size: 0.8rem; margin-top: -6px; }
.ms-row { grid-template-columns: 1fr; gap: 10px; }
.ms-fg--sm { max-width: 100%; }
.ms-fg label { font-size: 0.72rem; }
.ms-fg input[type="text"],
.ms-fg input[type="number"],
.ms-fg input[type="tel"],
.ms-fg input[type="email"],
.ms-fg input[type="date"],
.ms-fg textarea {
font-size: 16px; /* WICHTIG: verhindert iOS Auto-Zoom! */
padding: 11px 13px;
border-radius: 9px;
}
.ms-pill {
font-size: 0.8rem;
padding: 8px 13px;
}
.ms-pills { gap: 7px; }
.ms-radio {
padding: 12px 14px;
border-radius: 10px;
gap: 12px;
}
.ms-radio div strong { font-size: 0.85rem; }
.ms-radio div small { font-size: 0.72rem; }
.ms-check {
font-size: 0.82rem;
padding: 7px 12px;
border-radius: 7px;
}
.ms-upload { padding: 16px; }
.ms-upload span { font-size: 0.8rem; }
.ms-upload__thumb { width: 52px; height: 52px; }
.ms-summary { padding: 12px 14px; border-radius: 10px; }
.ms-summary__body { font-size: 0.8rem; }
.ms-consent { font-size: 0.76rem; }
.ms-trust-row { font-size: 0.7rem; gap: 8px 14px; }
.ms-footer {
padding: 12px 16px;
gap: 10px;
}
.ms-btn {
font-size: 0.85rem;
padding: 11px 18px;
border-radius: 9px;
}
.ms-btn--submit { font-size: 0.85rem; }
.ms-success__icon { width: 60px; height: 60px; }
.ms-success h3 { font-size: 1.2rem; }
.ms-success p { font-size: 0.85rem; }
}
/* ── KLEINE HANDYS (320px iPhone SE) ─────────────────────────── */
@media (max-width: 360px) {
.container { padding-inline: 16px; }
.hero h1 { font-size: 1.85rem; }
.hero__actions .btn {
font-size: 0.85rem;
padding: 12px 16px;
}
.hsc__num { font-size: 1.75rem; }
.hsc__suf { font-size: 1rem; }
.hsc__item { padding: 14px 12px 12px; }
.fz-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: 1fr; max-width: 280px; }
.ms-btn { padding: 10px 14px; font-size: 0.82rem; }
}
/* ── TOUCH: Hover-Effekte deaktivieren ────────────────────────── */
@media (hover: none) {
/* Fahrzeug-Karten: kein Hover transform */
.fz-tile:hover { transform: none; }
/* Buttons: kein translateY */
.btn--green:hover { transform: none; opacity: 1; }
/* Team-Karte: kein Glow-Hover (wird per always-visible ersetzt) */
.team-card:hover {
transform: none;
box-shadow: none;
border-color: var(--border-on-cream);
}
}
/* ── iOS-SPEZIFISCH ───────────────────────────────────────────── */
/* Verhindert horizontales Scrollen durch negative margins etc. */
html, body { overflow-x: hidden; max-width: 100%; }
/* Safe Area Insets für iPhone mit Notch */
@supports (padding: env(safe-area-inset-bottom)) {
.ms-footer {
padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.nav {
padding-top: env(safe-area-inset-top);
height: calc(var(--nav-h) + env(safe-area-inset-top));
}
}
/* ═══════════════════════════════════════════════════════════════
╔═══════════════════════════════════════════════════════════╗
║ REDESIGN — Dark grid, Process steps, CTA, Pickup-Card, ║
║ Animated list. Append-only, no conflicts with existing. ║
╚═══════════════════════════════════════════════════════════╝
═══════════════════════════════════════════════════════════════ */
/* ── 1) GRID BACKGROUND auf allen dark sections ──────────────── */
.theme-dark {
position: relative;
isolation: isolate;
}
.theme-dark::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(237, 235, 227, 0.085) 1px, transparent 1px),
linear-gradient(to bottom, rgba(237, 235, 227, 0.085) 1px, transparent 1px);
background-size: 64px 64px;
background-position: center center;
/* 4-Seiten-Fade via Mask */
mask-image: radial-gradient(ellipse 78% 70% at center, #000 25%, transparent 92%);
-webkit-mask-image: radial-gradient(ellipse 78% 70% at center, #000 25%, transparent 92%);
pointer-events: none;
z-index: -1;
opacity: 0.9;
}
/* Damit innerer Container sicher über dem Grid liegt.
WICHTIG: NUR .container — sonst überschreiben wir position:absolute
auf Hero-Hintergrund-Layern und sie landen im Flex-Flow! */
.theme-dark > .container {
position: relative;
z-index: 1;
}
/* Mobile: kleineres Grid */
@media (max-width: 768px) {
.theme-dark::before {
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 90% 80% at center, #000 15%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse 90% 80% at center, #000 15%, transparent 95%);
}
}
/* ── 3) STÄRKERES CTA ───────────────────────────────────────── */
.cta-block {
margin-top: 28px;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.btn--lg {
padding: 16px 28px;
font-size: 0.96rem;
font-weight: 600;
}
.btn--lg svg {
transition: transform 0.25s var(--ease-out);
}
.btn--lg:hover svg {
transform: translateX(3px);
}
.cta-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: var(--muted-on-dark);
letter-spacing: 0.02em;
line-height: 1.4;
}
.cta-meta svg {
color: var(--green-light);
flex-shrink: 0;
}
/* ── 4) RESPONSIVE für CTA ──────────────────────────────────── */
@media (max-width: 768px) {
.cta-block {
flex-direction: column;
align-items: flex-start;
gap: 14px;
margin-top: 24px;
}
.btn--lg {
width: 100%;
justify-content: center;
padding: 15px 24px;
}
.cta-meta { font-size: 0.76rem; }
}
/* ── 5) ANIMATED LIST entfernt — ständig laufende Item-Highlights
lenken vom Lesefluss ab. Liste rendert jetzt als ruhige
check-list (siehe oben). ─────────────────────────────────── */
/* ── 6) PICKUP CARD — ersetzt den image-placeholder ──────────── */
.abholen__visual {
display: flex;
flex-direction: column;
gap: 18px;
align-self: stretch;
}
.pickup-card {
position: relative;
background: #FFFFFF;
border-radius: 18px;
padding: 32px 28px 28px;
overflow: hidden;
flex: 1;
min-height: 340px;
display: grid;
place-items: center;
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.04),
0 10px 30px -10px rgba(27, 92, 56, 0.18),
0 30px 60px -30px rgba(0, 0, 0, 0.12);
isolation: isolate;
}
/* Dot-Pattern als Hintergrund */
.pickup-card__pattern {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(27, 92, 56, 0.10) 1px, transparent 1.4px);
background-size: 22px 22px;
background-position: 0 0;
mask-image: radial-gradient(ellipse 90% 90% at center, #000 30%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse 90% 90% at center, #000 30%, transparent 95%);
pointer-events: none;
z-index: 0;
}
/* Echtes Hintergrundbild (bild-3.jpg) — unter Pattern, über weißer Karte.
Datei einfach als /bild-3.jpg im Root oder Pfad anpassen. */
.pickup-card__bg-image {
position: absolute;
inset: 0;
background-image: url('Bild-3.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.28;
filter: saturate(0.85) contrast(0.95);
pointer-events: none;
z-index: 0;
/* Fade an Rändern, damit es sich sauber in die Card einfügt */
mask-image: radial-gradient(ellipse 92% 92% at center, #000 45%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 92% 92% at center, #000 45%, transparent 100%);
}
/* Deutschlandkarte im Hintergrund, sehr dezent */
.pickup-card__map {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 1;
pointer-events: none;
opacity: 0.85;
}
.pickup-card__map svg {
width: 78%;
max-width: 280px;
height: 100%;
max-height: 360px;
}
/* Pulsierende Pickup-Punkte — bewusst langsam, kein Aufmerksamkeitsfresser */
.pickup-dot__pulse {
transform-origin: center;
transform-box: fill-box;
animation: dotPulse 4s var(--ease-out) infinite;
animation-delay: var(--d, 0s);
}
@keyframes dotPulse {
0% { transform: scale(0.6); opacity: 0.7; }
60% { transform: scale(1.6); opacity: 0; }
100% { transform: scale(1.6); opacity: 0; }
}
/* Tow-Truck-Illustration zentriert oben drauf */
.pickup-card__truck {
position: relative;
z-index: 2;
width: 100%;
max-width: 320px;
padding: 0 8px;
filter: drop-shadow(0 6px 14px rgba(27, 92, 56, 0.12));
}
.pickup-card__truck svg {
width: 100%;
height: auto;
}
.pickup-card__truck svg [stroke-dasharray] {
animation: roadMove 1.8s linear infinite;
}
@keyframes roadMove {
to { stroke-dashoffset: -18; }
}
/* Floating Chip rechts oben */
.pickup-card__chip {
position: absolute;
top: 20px;
right: 20px;
z-index: 3;
display: flex;
align-items: baseline;
gap: 8px;
padding: 10px 14px;
background: var(--green);
color: #FFFFFF;
border-radius: 100px;
box-shadow:
0 6px 18px rgba(27, 92, 56, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
font-family: var(--font-display);
font-style: italic;
}
.pickup-card__chip-num {
font-size: 1.4rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
}
.pickup-card__chip-num small {
font-size: 0.7rem;
margin-left: 1px;
opacity: 0.85;
}
.pickup-card__chip-label {
font-family: var(--font-body);
font-style: normal;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.92;
}
/* Stat-Reihe unter dem Card */
.pickup-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.pickup-stats li {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 12px;
background: #FFFFFF;
border-radius: 12px;
font-size: 0.82rem;
font-weight: 500;
color: var(--text-on-cream);
letter-spacing: -0.005em;
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.03),
0 6px 18px -8px rgba(0, 0, 0, 0.08);
transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.pickup-stats li:hover {
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.03),
0 10px 22px -8px rgba(27, 92, 56, 0.18);
}
.pickup-stats li svg {
color: var(--green);
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.pickup-dot__pulse,
.pickup-card__truck svg [stroke-dasharray] { animation: none; }
}
/* ── 6b) RESPONSIVE für Pickup-Card ──────────────────────────── */
@media (max-width: 768px) {
.abholen__visual { order: -1; gap: 14px; }
.pickup-card {
min-height: 280px;
padding: 28px 20px 24px;
border-radius: 14px;
}
.pickup-card__map svg { width: 88%; max-height: 280px; }
.pickup-card__truck { max-width: 260px; }
.pickup-card__chip {
top: 14px;
right: 14px;
padding: 8px 12px;
}
.pickup-card__chip-num { font-size: 1.15rem; }
.pickup-card__chip-num small { font-size: 0.62rem; }
.pickup-card__chip-label { font-size: 0.64rem; }
.pickup-stats {
grid-template-columns: 1fr;
gap: 8px;
}
.pickup-stats li {
justify-content: flex-start;
padding: 12px 16px;
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.pickup-card { min-height: 240px; padding: 24px 16px 20px; }
.pickup-card__truck { max-width: 220px; }
}
/* ═══════════════════════════════════════════════════════════════
╔═══════════════════════════════════════════════════════════╗
║ AUTO ENTSORGEN — HORIZONTAL STRIP LAYOUT ║
║ Header oben (2-col), Process-Strip (4 cards, links→rechts)║
║ Mobile: fällt auf vertikalen Image-1-Style zurück. ║
╚═══════════════════════════════════════════════════════════╝
═══════════════════════════════════════════════════════════════ */
/* HEADER — Titel links, Detail+CTA rechts */
.was__header {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(40px, 5vw, 80px);
margin-bottom: clamp(56px, 7vw, 88px);
align-items: start;
}
.was__intro h2 {
margin-bottom: 0;
font-size: clamp(2.4rem, 4.6vw, 3.6rem);
line-height: 1.06;
max-width: 12ch;
}
.was__detail {
display: flex;
flex-direction: column;
gap: 18px;
padding-top: 6px;
}
.was__detail > p {
color: var(--muted-on-dark);
font-size: 0.94rem;
line-height: 1.65;
margin: 0;
}
.was__detail > .dark-list {
margin: 4px 0 2px;
}
.was__detail > .cta-block {
margin-top: 12px;
}
@media (max-width: 900px) {
.was__header {
grid-template-columns: 1fr;
gap: 28px;
margin-bottom: 56px;
}
.was__intro h2 { max-width: none; }
.was__detail { padding-top: 0; }
}
/* ── PROCESS STRIP — horizontal flow ─────────────────────────── */
.was__process {
position: relative;
}
.proc-strip__label {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 36px;
color: var(--green-light);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.proc-strip__rule {
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, rgba(94,196,135,0.30), transparent);
}
.proc-strip__eyebrow {
flex-shrink: 0;
padding: 0 4px;
}
.proc-strip {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
align-items: start;
}
/* Horizontale Rail — verbindet die Icon-Zentren */
.proc-strip::before {
content: '';
position: absolute;
top: 32px; /* center der Icon-Squares (64/2 = 32) */
left: calc(((100% - 28px*3) / 4) / 2); /* Mitte der ersten Spalte */
right: calc(((100% - 28px*3) / 4) / 2); /* Mitte der letzten Spalte */
height: 1px;
background: linear-gradient(
to right,
transparent,
rgba(94,196,135,0.35) 5%,
rgba(94,196,135,0.35) 95%,
transparent
);
z-index: 0;
pointer-events: none;
}
/* Kleine Konnektor-Punkte (Chevrons) zwischen den Karten */
.proc-strip::after {
content: '';
position: absolute;
top: 27px;
left: 0;
right: 0;
height: 11px;
background-image:
radial-gradient(circle at 37.5% 50%, rgba(94,196,135,0.6) 0 2px, transparent 2.5px),
radial-gradient(circle at 50% 50%, rgba(94,196,135,0.6) 0 2px, transparent 2.5px),
radial-gradient(circle at 62.5% 50%, rgba(94,196,135,0.6) 0 2px, transparent 2.5px);
background-repeat: no-repeat;
z-index: 0;
pointer-events: none;
}
/* ── Einzelne Karte im Strip — vertikal (Icon oben, Body unten) ── */
.proc-card {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 18px;
padding: 0 2px;
transition: transform 0.3s var(--ease-out);
}
.proc-card:hover {
transform: translateY(-4px);
}
.proc-card__icon {
width: 64px;
height: 64px;
border-radius: 16px;
display: grid;
place-items: center;
position: relative;
flex-shrink: 0;
background: linear-gradient(135deg, rgba(94,196,135,0.18), rgba(94,196,135,0.06));
border: 1px solid rgba(94,196,135,0.30);
color: var(--green-light);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
0 6px 20px rgba(0,0,0,0.30);
transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
/* Heller Hintergrund-Pad damit die Rail hinter dem Icon nicht durchscheint */
}
.proc-card__icon::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 22px;
background: radial-gradient(circle at center, var(--dark) 30%, transparent 70%);
z-index: -1;
pointer-events: none;
}
.proc-card__icon::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), transparent 60%);
pointer-events: none;
}
.proc-card:hover .proc-card__icon {
transform: rotate(-3deg) scale(1.05);
}
/* Tonale Varianten (gleich wie proc-step) */
.proc-card__icon[data-tone="lime"] { background: linear-gradient(135deg, rgba(150,220,130,0.22), rgba(94,196,135,0.08)); border-color: rgba(150,220,130,0.40); color: #A8DD8A; }
.proc-card__icon[data-tone="green"] { background: linear-gradient(135deg, rgba(94,196,135,0.25), rgba(94,196,135,0.08)); border-color: rgba(94,196,135,0.40); color: var(--green-light); }
.proc-card__icon[data-tone="forest"] { background: linear-gradient(135deg, rgba(27,92,56,0.46), rgba(27,92,56,0.16)); border-color: rgba(94,196,135,0.38); color: var(--green-light-2); }
.proc-card__icon[data-tone="amber"] { background: linear-gradient(135deg, rgba(216,168,88,0.24), rgba(216,168,88,0.08)); border-color: rgba(216,168,88,0.45); color: #E0B96B; }
.proc-card__body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.proc-card__num {
font-family: var(--font-display);
font-size: 0.78rem;
font-style: italic;
font-weight: 500;
color: rgba(94,196,135,0.7);
letter-spacing: 0.04em;
line-height: 1;
}
.proc-card h4 {
margin: 0;
font-family: var(--font-body);
font-size: 1.02rem;
font-weight: 600;
color: var(--text-on-dark);
letter-spacing: -0.005em;
line-height: 1.3;
}
.proc-card p {
margin: 4px 0 0;
font-size: 0.86rem;
color: var(--muted-on-dark);
line-height: 1.55;
}
/* ── Tablet: 2x2 Grid, Rail aus ───────────────────────────────── */
@media (max-width: 1023px) {
.proc-strip {
grid-template-columns: repeat(2, 1fr);
gap: 36px 32px;
}
.proc-strip::before,
.proc-strip::after {
display: none;
}
}
/* ── Mobile: fällt auf vertikalen Stack zurück (Image-1-Style) ── */
@media (max-width: 640px) {
.proc-strip__label { margin-bottom: 24px; }
.proc-strip {
grid-template-columns: 1fr;
gap: 0;
padding-left: 2px;
}
/* Vertikale Rail wieder anzeigen */
.proc-strip::before {
display: block;
top: 56px;
bottom: 56px;
left: 31px;
right: auto;
width: 1px;
height: auto;
background: linear-gradient(
to bottom,
transparent,
rgba(94,196,135,0.35) 8%,
rgba(94,196,135,0.35) 92%,
transparent
);
}
/* Karten horizontal: Icon links, Body rechts */
.proc-card {
flex-direction: row;
align-items: flex-start;
gap: 22px;
padding: 16px 2px;
}
.proc-card__icon { width: 60px; height: 60px; border-radius: 14px; }
.proc-card__icon::before { inset: -5px; border-radius: 19px; }
.proc-card h4 { font-size: 0.96rem; }
.proc-card p { font-size: 0.84rem; }
.proc-card:hover { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
.proc-card,
.proc-card:hover,
.proc-card__icon,
.proc-card:hover .proc-card__icon {
transform: none;
transition: none;
}
}
/* ═══════════════════════════════════════════════════════════════
╔═══════════════════════════════════════════════════════════╗
║ ABLAUF — Editorial Approach ║
║ Großzahlen als visueller Anker, Receipt-Style Cost-Panel ║
║ Bewusst KEIN Icon-Square-Recycle, kein Pill-Stack. ║
╚═══════════════════════════════════════════════════════════╝
═══════════════════════════════════════════════════════════════ */
.ablauf__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(48px, 6vw, 96px);
align-items: start;
margin-top: clamp(48px, 6vw, 72px);
}
/* ── Editorial Numbered Flow ─────────────────────────────────── */
.flow-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.flow-row {
display: grid;
grid-template-columns: clamp(54px, 4.5vw, 72px) 1fr;
gap: clamp(16px, 2vw, 24px);
align-items: baseline;
padding: clamp(18px, 2.4vw, 26px) 0;
border-top: 1px solid rgba(94, 196, 135, 0.10);
position: relative;
}
.flow-row:first-child { border-top: 0; padding-top: 8px; }
.flow-row:last-child { padding-bottom: 8px; }
/* Die Großzahl — als visueller Anker, aber weniger dominant
damit die rechte Cost-Card im Layout-Gleichgewicht bleibt */
.flow-row__num {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(1.6rem, 2.6vw, 2.4rem);
line-height: 0.9;
color: rgba(94, 196, 135, 0.85);
letter-spacing: -0.04em;
text-align: right;
display: block;
transition: color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
font-feature-settings: "lnum" 1; /* Lining numerals, falls verfügbar */
}
.flow-row:hover .flow-row__num {
color: #A8DD8A;
transform: translateX(-3px);
}
.flow-row__content {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 4px; /* Optisches Baseline-Tuning gegen Großzahl */
min-width: 0;
}
.flow-row__content h4 {
margin: 0;
font-family: var(--font-body);
font-size: clamp(1rem, 1.25vw, 1.1rem);
font-weight: 600;
color: var(--text-on-dark);
letter-spacing: -0.005em;
line-height: 1.3;
}
.flow-row__content p {
margin: 0;
font-size: 0.88rem;
color: var(--muted-on-dark);
line-height: 1.6;
max-width: 50ch;
}
/* ── Receipt-Style Cost-Panel ────────────────────────────────── */
.ablauf__card {
position: sticky;
top: calc(var(--nav-h, 80px) + 24px);
}
.receipt {
--receipt-surface: #131311;
position: relative;
background: var(--receipt-surface);
border: 1px solid rgba(237, 235, 227, 0.08);
padding: clamp(28px, 3vw, 40px) clamp(24px, 2.5vw, 36px);
display: flex;
flex-direction: column;
gap: 24px;
}
/* Charakterstärke: leichte "abgerissene" Ränder oben/unten via SVG-Pattern.
Klassische Receipt-Optik ohne kitschig zu werden. */
.receipt::before,
.receipt::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 8px;
background-image: linear-gradient(135deg, transparent 50%, var(--receipt-surface) 50%),
linear-gradient(45deg, transparent 50%, var(--receipt-surface) 50%);
background-size: 12px 8px;
background-position: 0 0, 6px 0;
background-repeat: repeat-x;
}
.receipt::before { top: -7px; transform: rotate(180deg); }
.receipt::after { bottom: -7px; }
.receipt__eyebrow {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(94, 196, 135, 0.8);
}
.receipt__headline {
margin: -8px 0 0;
font-family: var(--font-display);
font-size: clamp(1.7rem, 2.6vw, 2.2rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--text-on-dark);
}
.receipt__headline em {
font-style: italic;
color: var(--green-light);
font-weight: 700;
}
/* Dotted Leaders zwischen Label und Wert — klassischer Print-Move */
.receipt__list {
margin: 4px 0 0;
padding: 16px 0 0;
border-top: 1px solid rgba(237, 235, 227, 0.10);
display: flex;
flex-direction: column;
gap: 6px;
}
.receipt__row {
display: flex;
align-items: baseline;
gap: 0;
position: relative;
font-size: 0.92rem;
line-height: 1.6;
}
.receipt__row dt {
color: var(--muted-on-dark);
font-weight: 400;
background: var(--receipt-surface);
padding-right: 8px;
position: relative;
z-index: 1;
}
.receipt__row dd {
margin: 0 0 0 auto;
color: var(--text-on-dark);
font-weight: 500;
background: var(--receipt-surface);
padding-left: 8px;
position: relative;
z-index: 1;
}
/* Die gepunkteten Leader laufen DAHINTER */
.receipt__row::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0.4em;
border-bottom: 1px dotted rgba(237, 235, 227, 0.22);
z-index: 0;
}
/* Total-Block — der Zinger */
.receipt__total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 18px 0 4px;
border-top: 1px solid rgba(94, 196, 135, 0.25);
}
.receipt__total-label {
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(237, 235, 227, 0.7);
}
.receipt__total-value {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(2rem, 3vw, 2.6rem);
font-weight: 700;
color: var(--green-light-2);
letter-spacing: -0.02em;
line-height: 1;
}
.receipt__cta {
margin-top: 4px;
padding: 15px 24px;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.005em;
/* Bewusst KEIN Glow, KEINE Pulse. Restraint. */
}
.receipt__fine {
margin: -8px 0 0;
text-align: center;
font-size: 0.75rem;
letter-spacing: 0.04em;
color: rgba(237, 235, 227, 0.45);
}
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 960px) {
.ablauf__layout {
grid-template-columns: 1fr;
gap: 48px;
}
.ablauf__card { position: static; }
}
@media (max-width: 640px) {
.flow-row {
grid-template-columns: 72px 1fr;
gap: 16px;
padding: 22px 0;
}
.flow-row__num { font-size: clamp(2rem, 9vw, 2.6rem); }
.flow-row__content h4 { font-size: 1.02rem; }
.flow-row__content p { font-size: 0.88rem; }
.receipt { padding: 26px 22px; gap: 20px; }
.receipt__total-value { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
.flow-row__num,
.flow-row:hover .flow-row__num { transform: none; transition: color 0.2s; }
}
/* ═══════════════════════════════════════════════════════════════
FAHRZEUGE — Clean Banded Layout
3 Karten / Bild-Band / 3 Karten / Bild-Band
═══════════════════════════════════════════════════════════════ */
.fz-rows {
display: flex;
flex-direction: column;
gap: clamp(16px, 1.8vw, 24px);
margin-bottom: clamp(28px, 3vw, 36px);
}
.fz-row--cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(12px, 1.2vw, 16px);
}
/* Bild-Band: volle Breite, ruhiger Anker zwischen den Reihen */
.img-ph--band {
width: 100%;
min-height: clamp(180px, 22vw, 280px);
border-radius: 14px;
}
/* ── Fahrzeug-Bild-Bänder ────────────────────────────────────────
Ersetzt die alten img-ph--band Placeholder mit echten Bildern.
Beide Bänder = einzelnes Vollbreiten-Bild, exakt wie die Original-
Placeholder. Höhe matched die alte clamp(180px, 22vw, 280px).
─────────────────────────────────────────────────────────────── */
.fz-band {
width: 100%;
margin: 0;
display: block;
}
.fz-band__img {
margin: 0;
width: 100%;
height: clamp(180px, 22vw, 280px);
border-radius: 14px;
overflow: hidden;
background: var(--cream-2);
border: 1px solid var(--border-on-cream);
position: relative;
}
/* Legacy-Alias (falls noch irgendwo verwendet); identisch zur Basis */
.fz-band__img--full {
height: clamp(180px, 22vw, 280px);
}
.fz-band__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s var(--ease-out);
}
.fz-band__img:hover img {
transform: scale(1.03);
}
/* Fallback wenn Bild via onerror nicht lädt — Placeholder-Look */
.fz-band__img--error {
background:
repeating-linear-gradient(45deg,
var(--cream-2),
var(--cream-2) 12px,
var(--cream-3) 12px,
var(--cream-3) 24px);
display: grid;
place-items: center;
}
.fz-band__img--error img {
display: none;
}
.fz-band__img--error::after {
content: 'Bild folgt';
color: var(--muted-on-cream);
font-size: 0.85rem;
letter-spacing: 0.06em;
}
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
.fz-row--cards { grid-template-columns: repeat(2, 1fr); }
.fz-band__img,
.fz-band__img--full { height: clamp(160px, 30vw, 220px); }
}
@media (max-width: 560px) {
.fz-row--cards { grid-template-columns: 1fr; }
.fz-band__img,
.fz-band__img--full { height: 160px; }
}
/* ═══════════════════════════════════════════════════════════════
RISKS — Document/Clause Aesthetic
Komplett anderer Move als flow-list / receipt: dokumenthaft,
mit § Paragraph-Mark, Aktenzeichen, Stempel, Tabellen-Klauseln.
Sachlich-amtlich, nicht italic-editorial.
═══════════════════════════════════════════════════════════════ */
.clause {
--clause-rule: rgba(237, 235, 227, 0.14);
--clause-accent: rgba(94, 196, 135, 0.85);
position: relative;
padding: clamp(28px, 3vw, 40px);
background:
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 31px,
rgba(237, 235, 227, 0.025) 31px,
rgba(237, 235, 227, 0.025) 32px
),
#0F0F0D;
border-left: 1px solid var(--clause-accent);
border-top: 1px solid var(--clause-rule);
border-right: 1px solid var(--clause-rule);
border-bottom: 1px solid var(--clause-rule);
}
/* Header: § Mark + Aktenzeichen */
.clause__header {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: clamp(20px, 2.5vw, 28px);
border-bottom: 1px solid var(--clause-rule);
}
.clause__mark {
font-family: 'Times New Roman', Georgia, serif;
font-size: clamp(2.6rem, 4vw, 3.6rem);
font-weight: 400;
color: var(--clause-accent);
line-height: 0.8;
letter-spacing: -0.03em;
align-self: center;
}
.clause__id {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.clause__id-label {
font-family: 'SF Mono', 'Menlo', Consolas, monospace;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-on-dark);
line-height: 1;
}
.clause__id-value {
font-family: 'SF Mono', 'Menlo', Consolas, monospace;
font-size: 0.85rem;
font-weight: 500;
color: var(--text-on-dark);
letter-spacing: 0.01em;
line-height: 1.3;
}
/* Titel */
.clause__title {
margin: clamp(18px, 2vw, 24px) 0 clamp(20px, 2.5vw, 28px);
font-family: var(--font-display);
font-size: clamp(1.4rem, 2vw, 1.75rem);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--text-on-dark);
max-width: 28ch;
}
/* Klauseln-Tabelle */
.clause__table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
margin: 0;
}
.clause__table tr {
border-top: 1px solid var(--clause-rule);
}
.clause__table tr:first-child { border-top: 0; }
.clause__table th {
width: clamp(58px, 7vw, 78px);
vertical-align: baseline;
padding: 16px 18px 16px 0;
text-align: left;
font-family: 'SF Mono', 'Menlo', Consolas, monospace;
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--clause-accent);
font-feature-settings: "tnum" 1;
line-height: 1.5;
white-space: nowrap;
}
.clause__table td {
vertical-align: baseline;
padding: 16px 0;
font-size: 0.88rem;
line-height: 1.6;
color: var(--muted-on-dark);
hyphens: auto;
}
.clause__table td strong {
display: inline;
color: var(--text-on-dark);
font-weight: 600;
letter-spacing: -0.005em;
margin-right: 2px;
}
/* Footer: Stempel + Closing */
.clause__footer {
display: grid;
grid-template-columns: auto 1fr;
column-gap: clamp(20px, 2.5vw, 32px);
align-items: center;
margin-top: clamp(24px, 3vw, 32px);
padding-top: clamp(20px, 2.5vw, 28px);
border-top: 1px solid var(--clause-rule);
}
/* Echter Stempel-Look: rotiert, abgenutzt, mit doppeltem Border */
.clause__stamp {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
width: clamp(76px, 9vw, 96px);
height: clamp(76px, 9vw, 96px);
padding: 8px;
border: 1.5px solid rgba(94, 196, 135, 0.55);
outline: 1px solid rgba(94, 196, 135, 0.55);
outline-offset: 3px;
border-radius: 50%;
color: rgba(94, 196, 135, 0.85);
font-family: 'SF Mono', 'Menlo', Consolas, monospace;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: center;
line-height: 1.2;
transform: rotate(-8deg);
/* Leichter "abgegriffen"-Effekt: Opacity-Variation */
opacity: 0.9;
user-select: none;
flex-shrink: 0;
}
.clause__stamp > span:first-child {
font-size: clamp(0.7rem, 0.9vw, 0.78rem);
font-weight: 600;
}
.clause__stamp > span:last-child {
font-size: 0.55rem;
opacity: 0.85;
margin-top: 2px;
}
.clause__note {
margin: 0;
font-size: 0.86rem;
line-height: 1.6;
color: var(--text-on-dark);
max-width: 38ch;
}
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
.clause { padding: 22px 20px; }
.clause__mark { font-size: 2.2rem; }
.clause__title { font-size: 1.25rem; }
.clause__table th {
width: 52px;
padding-right: 12px;
font-size: 0.7rem;
}
.clause__table td { font-size: 0.85rem; }
.clause__footer {
grid-template-columns: 1fr;
row-gap: 18px;
justify-items: start;
}
.clause__stamp {
width: 72px;
height: 72px;
transform: rotate(-6deg);
}
}
@media (prefers-reduced-motion: reduce) {
.clause__stamp { transform: none; }
}
/* ═══════════════════════════════════════════════════════════════
╔═══════════════════════════════════════════════════════════╗
║ RESPONSIVE AUDIT & FIXES — finaler Pass über alle ║
║ neuen Komponenten. Reihenfolge: alphabetisch nach BP. ║
╚═══════════════════════════════════════════════════════════╝
═══════════════════════════════════════════════════════════════ */
/* ── TABLET (1024px abwärts) ─────────────────────────────────── */
@media (max-width: 1024px) {
/* Auto entsorgen: Grid auf 2x2 schon gemacht, aber Header ist noch 2-Spalter */
.was__header {
grid-template-columns: 1fr;
gap: 28px;
margin-bottom: 48px;
}
.was__intro h2 { max-width: none; }
.was__detail { padding-top: 0; }
/* Auto entsorgen Strip: Konnektor-Punkte explizit aus (sind in 2x2 sinnlos) */
.proc-strip::before,
.proc-strip::after { display: none; }
/* Pickup-Card SVG-Map nicht zu klein */
.pickup-card { min-height: 320px; }
}
/* ── TABLET PORTRAIT / LARGE PHONE (768px abwärts) ───────────── */
@media (max-width: 768px) {
/* Risks: Stempel wird zu groß im Footer-Grid */
.clause__stamp {
width: 80px;
height: 80px;
}
.clause__stamp > span:first-child {
font-size: 0.72rem;
}
/* Ablauf Cost-Receipt: zigzag edges sind auf 768px noch ok */
}
/* ── PHONE (640px abwärts) ───────────────────────────────────── */
@media (max-width: 640px) {
/* AUTO ENTSORGEN — proc-card schon vertical-stacked, aber CTA-Block aufpassen */
.cta-block {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.btn--lg {
width: 100%;
justify-content: center;
padding: 15px 22px;
}
.cta-meta {
justify-content: center;
text-align: center;
font-size: 0.74rem;
}
/* ABLAUF — Flow-Numbers + Receipt: Receipt vorher etwas eng */
.receipt {
padding: 24px 18px;
}
.receipt::before,
.receipt::after {
/* Auf Mobile die zigzag-edges entfernen — wirken hier zu spielerisch
und mit padding-Reduktion fehlt Platz */
display: none;
}
.receipt {
/* stattdessen sauberer Rahmen */
border-radius: 0;
border-top: 1px solid rgba(94, 196, 135, 0.25);
border-bottom: 1px solid rgba(94, 196, 135, 0.25);
}
/* Dotted-leaders können auf schmaler Spalte hässlich wrappen — fix */
.receipt__row {
flex-wrap: wrap;
gap: 2px 8px;
}
.receipt__row dt {
flex: 1 1 auto;
}
.receipt__row dd {
flex: 0 0 auto;
}
.receipt__row::after {
/* Bei Wrap kann die Leader-Linie nicht mehr exakt liegen */
display: none;
}
/* RISKS Clause — Tabellen-Layout besonders fragil auf schmaler Spalte */
.clause {
/* Volle Breite weil der Container schon padding hat */
padding: 24px 18px;
}
.clause__header {
gap: 12px;
padding-bottom: 20px;
}
.clause__mark {
font-size: 2rem;
line-height: 1;
}
.clause__id-label { font-size: 0.6rem; }
.clause__id-value { font-size: 0.78rem; }
.clause__title {
font-size: 1.15rem;
margin: 16px 0 18px;
}
/* Tabellen-Cells: th wird auf zu schmalem Screen zu eng → über td stapeln */
.clause__table th {
width: 48px;
padding: 14px 10px 14px 0;
font-size: 0.68rem;
}
.clause__table td {
padding: 14px 0;
font-size: 0.84rem;
word-break: break-word;
}
/* FAHRZEUGE — Band-Bilder werden via .fz-band__img gesteuert (oben);
hier keine zusätzlichen Overrides nötig. */
/* PICKUP CARD — Chip kollidiert mit oben rechts wenn schmal */
.pickup-card__chip {
top: 12px;
right: 12px;
padding: 6px 10px;
gap: 6px;
}
.pickup-card__chip-num { font-size: 1rem; }
.pickup-card__chip-num small { font-size: 0.58rem; }
.pickup-card__chip-label {
/* Auf sehr schmalen Screens (≤360px) Label verstecken — Number reicht */
font-size: 0.6rem;
letter-spacing: 0.04em;
}
}
/* ── SMALL PHONE (380px abwärts — iPhone SE, kleine Androids) ── */
@media (max-width: 380px) {
/* AUTO ENTSORGEN proc-card auf wirklich engem Screen */
.proc-card {
gap: 16px;
padding: 14px 0;
}
.proc-card__icon { width: 52px; height: 52px; border-radius: 12px; }
.proc-card__icon::before { inset: -4px; border-radius: 16px; }
.proc-card__icon svg { width: 20px; height: 20px; }
.proc-card h4 { font-size: 0.92rem; }
.proc-card p { font-size: 0.8rem; }
/* ABLAUF flow-row analog */
.flow-row {
grid-template-columns: 56px 1fr;
gap: 12px;
padding: 18px 0;
}
.flow-row__num {
font-size: 1.8rem;
}
.flow-row__content h4 { font-size: 0.95rem; }
.flow-row__content p { font-size: 0.82rem; }
/* RISKS — Stempel wird wirklich klein, oder weglassen wenn zu eng */
.clause__stamp {
width: 68px;
height: 68px;
outline-offset: 2px;
}
.clause__stamp > span:first-child { font-size: 0.66rem; }
.clause__stamp > span:last-child { font-size: 0.5rem; }
.clause__footer {
column-gap: 16px;
}
.clause__note { font-size: 0.82rem; }
/* PICKUP CARD Chip Label verstecken ab hier */
.pickup-card__chip-label { display: none; }
/* PICKUP STATS — gap reduzieren */
.pickup-stats li {
padding: 10px 12px;
font-size: 0.82rem;
}
}
/* ── TOUCH DEVICES — Hover-Effekte deaktivieren ──────────────── */
/* Verhindert "Stuck Hover" auf Touch-Geräten wo der Hover-State
nach dem Tap hängen bleibt bis irgendwo anders getapt wird */
@media (hover: none) {
.proc-card:hover,
.proc-card:hover .proc-card__icon,
.flow-row:hover .flow-row__num,
.pickup-stats li:hover {
transform: none;
}
.btn--lg:hover svg {
transform: none;
}
}
/* ═══════════════════════════════════════════════════════════════
A11Y + FOOTER ADDITIONS (Audit-Fixes)
═══════════════════════════════════════════════════════════════ */
/* ── Skip-to-Content Link ────────────────────────────────────── */
/* Visible only when focused via Tab. Standard A11Y-Pattern. */
.skip-link {
position: absolute;
top: -100px;
left: 16px;
z-index: 10000;
padding: 12px 20px;
background: var(--green);
color: #fff;
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
transition: top 0.18s var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
top: 16px;
outline: 2px solid #fff;
outline-offset: 2px;
}
/* ── Footer Tagline ──────────────────────────────────────── */
.footer__tagline {
margin: 0;
font-size: 0.82rem;
line-height: 1.55;
color: var(--muted-on-dark);
}
/* ── Footer Contact (NAP-Block, designte Items) ──────────
Statt Plain-Text-Stack: jedes Item hat Icon-Square + Label +
Wert. Telefon/E-Mail sind klickbar als komplette Karte mit
subtilem Hover-Highlight. */
.footer__contact {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 10px;
font-style: normal;
}
.footer__contact-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--border-on-dark);
border-radius: var(--r-md);
color: var(--text-on-dark);
text-decoration: none;
transition: border-color 0.2s var(--ease-out), background 0.2s, transform 0.2s;
}
.footer__contact-item--link:hover,
.footer__contact-item--link:focus-visible {
background: rgba(94, 196, 135, 0.06);
border-color: var(--green-border);
transform: translateX(2px);
outline: none;
}
.footer__contact-icon {
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--green-dim);
border: 1px solid var(--green-border);
display: grid;
place-items: center;
flex-shrink: 0;
color: var(--green-light);
}
/* Explizit auf SVG — currentColor vererbt von span je nach Browser
inkonsistent. Mit direktem Selektor garantiert sichtbar. */
.footer__contact-icon svg {
stroke: var(--green-light);
color: var(--green-light);
display: block;
}
.footer__contact-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.footer__contact-label {
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted-on-dark);
line-height: 1.2;
}
.footer__contact-text > span:last-child {
font-size: 0.88rem;
font-weight: 500;
color: var(--text-on-dark);
line-height: 1.35;
/* Lange E-Mail nicht über die Spalten-Grenze schießen lassen */
word-break: break-word;
}
/* Hero Wrapper transparent machen.
Klasse hero__bg-img liegt jetzt direkt auf dem ![]()
drin (siehe HTML),
damit object-fit/opacity/object-position aus dem Original-Block greifen. */
.hero__bg-layer > picture {
display: block;
width: 100%;
height: 100%;
}
/* ═══════════════════════════════════════════════════════════════
STADT — Städteseiten Styles (Editorial Landing Pages)
────────────────────────────────────────────────────────────────
Sections in Reihenfolge:
1. .stadt-hero — dunkler Hero mit Breadcrumb + H1 + Lead
2. .stadt-intro — Cream-Section: Story + Facts-List
3. .stadt-coverage — Cream-Section: Stadtteile + Umland (Tags)
4. .stadt-faq — Dark-Section: lokale FAQ (Details/Summary)
5. .stadt-related — Dark-Section: andere Städte (Cities-Cloud)
6. .stadt-cta — Cream-Section: Closing Call-to-Action
═══════════════════════════════════════════════════════════════ */
/* ─── 1. HERO ─────────────────────────────────────────────────── */
.stadt-hero {
padding: calc(var(--nav-h) + clamp(64px, 9vw, 110px)) 0 clamp(64px, 9vw, 110px);
position: relative;
overflow: hidden;
}
/* Subtiles grünes Grid im Hintergrund (wie Hauptseite-Hero) */
.stadt-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(27, 92, 56, 0.09) 1px, transparent 1px),
linear-gradient(to right, rgba(27, 92, 56, 0.09) 1px, transparent 1px);
background-size: 44px 44px;
pointer-events: none;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
z-index: 0;
}
.stadt-hero > .container {
position: relative;
z-index: 1;
}
.stadt-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: clamp(28px, 3.5vw, 44px);
font-size: 0.82rem;
color: var(--muted-on-dark);
}
.stadt-breadcrumb a {
color: var(--muted-on-dark);
text-decoration: none;
transition: color 0.2s var(--ease-out);
}
.stadt-breadcrumb a:hover {
color: var(--green-light);
}
.stadt-breadcrumb span[aria-current="page"] {
color: var(--text-on-dark);
font-weight: 500;
}
.stadt-h1 {
margin: 16px 0 28px;
font-family: var(--font-display);
font-size: clamp(2.4rem, 5.5vw, 4.2rem);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.025em;
color: var(--text-on-dark);
max-width: 22ch;
}
.stadt-h1 em {
font-style: italic;
color: var(--green-light);
font-weight: 700;
}
.stadt-lead {
margin: 0 0 36px;
font-size: clamp(1rem, 1.2vw, 1.12rem);
line-height: 1.7;
color: var(--muted-on-dark);
max-width: 60ch;
}
.stadt-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
/* ─── 2. INTRO ────────────────────────────────────────────────── */
.stadt-intro {
padding: clamp(72px, 9vw, 120px) 0;
}
.stadt-intro__layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: start;
}
.stadt-intro__copy .sec-eyebrow {
justify-content: flex-start;
text-align: left;
}
.stadt-intro__copy .sec-title {
text-align: left;
margin: 16px 0 24px;
max-width: 22ch;
}
.stadt-intro__text {
font-size: clamp(1rem, 1.15vw, 1.08rem);
line-height: 1.75;
color: var(--muted-on-cream);
margin: 0;
max-width: 56ch;
}
/* Facts-Liste rechts mit Check-Icons (gleiche Sprache wie .dark-list) */
.stadt-facts-list {
list-style: none;
margin: 0;
padding: 32px;
background: var(--cream-3);
border: 1px solid var(--border-on-cream);
border-radius: var(--r-lg);
display: flex;
flex-direction: column;
gap: 16px;
}
.stadt-facts-list li {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 0.96rem;
line-height: 1.55;
color: var(--text-on-cream);
}
.stadt-facts-list__icon {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 8px;
background: var(--green-dim);
border: 1px solid var(--green-border);
color: var(--green);
flex-shrink: 0;
margin-top: 1px;
}
/* ─── 3. COVERAGE (Stadtteile + Umland) ───────────────────────── */
.stadt-coverage {
padding: clamp(60px, 8vw, 100px) 0;
background: var(--cream-2);
}
.stadt-coverage .sec-eyebrow,
.stadt-coverage .sec-title {
text-align: center;
}
.stadt-coverage .sec-sub {
text-align: center;
max-width: 64ch;
margin: 16px auto clamp(40px, 5vw, 56px);
}
.stadt-coverage__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 3vw, 40px);
max-width: 920px;
margin: 0 auto;
}
.stadt-coverage__card {
background: var(--cream-3);
border: 1px solid var(--border-on-cream);
border-radius: var(--r-lg);
padding: clamp(28px, 3.5vw, 40px);
}
.stadt-coverage__card h3 {
margin: 0 0 22px;
font-family: var(--font-display);
font-size: clamp(1.15rem, 1.5vw, 1.35rem);
font-weight: 700;
color: var(--text-on-cream);
letter-spacing: -0.01em;
}
/* Tag-Pills (Stadtteile/Umland) */
.tag-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-list li {
display: inline-flex;
align-items: center;
padding: 7px 14px;
background: #fff;
border: 1px solid var(--border-on-cream);
border-radius: var(--r-pill);
font-size: 0.85rem;
color: var(--text-on-cream);
letter-spacing: 0;
}
.tag-list__more {
border-style: dashed !important;
color: var(--muted-on-cream) !important;
font-style: italic;
}
/* ─── 4. FAQ ──────────────────────────────────────────────────── */
.stadt-faq {
padding: clamp(72px, 9vw, 120px) 0;
}
.stadt-faq .sec-eyebrow,
.stadt-faq .sec-title {
text-align: center;
}
.stadt-faq__list {
max-width: 780px;
margin: clamp(40px, 5vw, 56px) auto 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.stadt-faq__item {
border: 1px solid var(--border-on-dark);
border-radius: var(--r-md);
background: var(--dark-2);
overflow: hidden;
transition: border-color 0.25s var(--ease-out);
}
.stadt-faq__item[open] {
border-color: var(--green-border);
}
.stadt-faq__item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 26px;
font-family: var(--font-body);
font-size: clamp(0.98rem, 1.15vw, 1.05rem);
font-weight: 500;
color: var(--text-on-dark);
line-height: 1.4;
transition: color 0.2s;
}
.stadt-faq__item summary::-webkit-details-marker { display: none; }
.stadt-faq__item summary:hover { color: var(--green-light); }
.stadt-faq__chev {
flex-shrink: 0;
color: var(--muted-on-dark);
transition: transform 0.3s var(--ease-out), color 0.2s;
}
.stadt-faq__item[open] .stadt-faq__chev {
transform: rotate(180deg);
color: var(--green-light);
}
.stadt-faq__item p {
margin: 0;
padding: 0 26px 24px;
font-size: 0.96rem;
line-height: 1.7;
color: var(--muted-on-dark);
max-width: 70ch;
}
/* ─── 5. RELATED CITIES ───────────────────────────────────────── */
.stadt-related {
padding: clamp(60px, 8vw, 100px) 0;
border-top: 1px solid var(--border-on-dark);
}
.stadt-related .sec-eyebrow,
.stadt-related .sec-title {
text-align: center;
}
.stadt-related .cities-cloud--dark {
margin-top: clamp(32px, 4vw, 48px);
justify-content: center;
}
.stadt-related .cities-cloud--dark a {
color: var(--text-on-dark);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.stadt-related .cities-cloud--dark a:hover {
color: var(--green-light);
border-bottom-color: rgba(94, 196, 135, 0.6);
}
/* ─── 6. CLOSING CTA ──────────────────────────────────────────── */
.stadt-cta {
padding: clamp(60px, 8vw, 100px) 0;
}
.stadt-cta__card {
background: var(--dark);
color: var(--text-on-dark);
border-radius: var(--r-lg);
padding: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 64px);
text-align: center;
max-width: 880px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.stadt-cta__card::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle, rgba(94,196,135,0.18) 1.2px, transparent 1.6px);
background-size: 18px 18px;
background-position: 0 0;
opacity: 0.4;
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 75%);
pointer-events: none;
}
.stadt-cta__card > * {
position: relative;
z-index: 1;
}
.stadt-cta__card .sec-eyebrow {
color: var(--green-light);
justify-content: center;
margin-bottom: 14px;
}
.stadt-cta__card h2 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--text-on-dark);
margin: 0 0 18px;
max-width: 22ch;
margin-left: auto;
margin-right: auto;
}
.stadt-cta__card h2 em {
color: var(--green-light);
font-style: italic;
}
.stadt-cta__text {
font-size: 1rem;
line-height: 1.7;
color: var(--muted-on-dark);
margin: 0 auto 32px;
max-width: 56ch;
}
.stadt-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
/* btn--ghost-dark Variante für Closing CTA */
.btn--ghost-dark {
background: transparent;
color: var(--text-on-dark);
border: 1px solid rgba(255,255,255,0.18);
transition: border-color 0.2s, background 0.2s;
}
.btn--ghost-dark:hover {
border-color: var(--green-light);
background: rgba(94,196,135,0.06);
}
/* ─── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 900px) {
.stadt-intro__layout {
grid-template-columns: 1fr;
gap: 36px;
}
}
@media (max-width: 720px) {
.stadt-coverage__grid {
grid-template-columns: 1fr;
}
.stadt-hero__actions {
flex-direction: column;
align-items: stretch;
}
.stadt-hero__actions .btn {
justify-content: center;
}
.stadt-faq__item summary {
padding: 18px 20px;
font-size: 0.95rem;
}
.stadt-faq__item p {
padding: 0 20px 20px;
}
.stadt-cta__actions {
flex-direction: column;
align-items: stretch;
}
.stadt-cta__actions .btn {
justify-content: center;
}
}
/* ═══════════════════════════════════════════════════════════════
CITIES-CLOUD — Links statt Spans (16 Landeshauptstädte)
Erbt vom Basis-Style, ergänzt Anchor-spezifische Affordances.
═══════════════════════════════════════════════════════════════ */
/* Cream-Theme */
.cities-cloud a {
display: inline-block;
padding: 8px 18px;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 100px;
font-size: 0.88rem;
font-weight: 500;
color: var(--muted-on-cream);
text-decoration: none;
transition: color 0.2s var(--ease-out),
border-color 0.2s var(--ease-out),
background-color 0.2s var(--ease-out),
transform 0.2s var(--ease-out);
}
.cities-cloud a:hover,
.cities-cloud a:focus-visible {
color: var(--green);
border-color: var(--green);
background-color: rgba(27, 92, 56, 0.04);
transform: translateY(-1px);
}
.cities-cloud a:focus-visible {
outline: 2px solid var(--green);
outline-offset: 2px;
}
/* Dark-Theme (Hauptseite + Städteseiten cross-links) */
.cities-cloud--dark a {
color: var(--muted-on-dark, rgba(244,241,235,0.6));
border-color: rgba(255,255,255,0.08);
}
.cities-cloud--dark a:hover,
.cities-cloud--dark a:focus-visible {
color: var(--text-on-dark, #f4f1eb);
border-color: rgba(94, 196, 135, 0.5);
background-color: rgba(94, 196, 135, 0.06);
}
/* ═══════════════════════════════════════════════════════════════
LEGAL PAGES — Impressum / Datenschutz / AGB
Vorher als