/* Selbst gehostete Schrift Manrope (SIL Open Font License) – Variable Font, kein externes CDN */
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin-ext.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* =========================================================
Team Flamingo – Stylesheet
Eigenständiges Design, framework-frei
Markenfarbwelt: Flamingo Pink / Coral Orange / Navy
========================================================= */
/* ---------- Design Tokens ----------
EINE Farbquelle für die GESAMTE Website (Hauptseiten + Preisrechner).
Neutralpalette = nüchterne Rechner-Optik (weiß/hellgrau, klare Linien);
die Marke (Pink/Coral/Navy) bleibt als Akzent. */
:root {
/* === Team Flamingo Markenfarben === */
--color-primary: #BE123C; /* Marken-Rot – CTAs, Buttons, Links, aktive Auswahl */
--color-primary-dark: #9F1239; /* Button-Hover / Pressed */
--color-secondary: #0F8A5F; /* Grün – Erfolg / Verfügbarkeit / erledigte Schritte */
--color-secondary-dark: #0C6E4A;
--color-dark: #0B1F33; /* Tiefes Nachtblau – Header, Footer, Hero, dunkle Flächen */
--color-dark-soft: #163B5C; /* Stahlblau – sekundäre dunkle Flächen */
--color-bg: #F1F5F9; /* getönter Seitenhintergrund (Slate-100) – Cards heben sich klar ab */
--color-bg-soft: #EDF0F4; /* Formularfelder (Hauptseiten) */
--color-surface: #FFFFFF; /* Cards, Weißraum */
--color-border: #CBD5E1; /* sichtbare Standard-Rahmen (Slate-300) */
--color-border-strong: #94A3B8; /* stärkere Rahmen: Inputs, wählbare Karten, Hover (Slate-400) */
--color-text: #0F172A; /* Slate-900 – Überschriften / Haupttext, klarer Kontrast */
--color-muted: #64748B; /* Slate-500 – Hilfstexte / Icons */
--color-price: #14263A; /* Nachtblau – Preise/Preisbox (kein Orange; Rot bleibt Aktionen vorbehalten) */
--color-accent: #0F8A5F; /* Grün – positive Hinweise / Verfügbarkeit */
--color-warn: #B42318; /* Rot – Warnungen/Fehler („passt nicht", ungültig) */
--color-wa: #25D366; /* WhatsApp-Grün */
/* === Interne Rollen-Aliase (Layout) === */
--c-bg: var(--color-dark);
--c-bg-2: var(--color-dark-soft);
--c-surface: var(--color-surface);
--c-surface-2: var(--color-bg); /* getönte Sektionen (Flamingo) */
--c-field: var(--color-bg-soft); /* Formularfelder (neutral) */
--c-ink: var(--color-text);
--c-ink-soft: var(--color-muted);
--c-line: var(--color-border);
--c-brand: var(--color-primary); /* Pink: Links, aktive Zustände, Icons */
--c-brand-dk: var(--color-primary-dark);
--c-success: var(--color-accent); /* Türkis */
--c-wa: var(--color-wa);
/* Typo */
--font: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
/* Maße */
--container: 1180px;
--radius: 16px;
--radius-sm: 10px;
/* flache Schatten (nüchterne Rechner-Optik, kein Glow) */
--shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 6px 18px rgba(16, 24, 40, 0.06);
--shadow-lg: 0 10px 30px rgba(16, 24, 40, 0.10);
--shadow-pink: 0 1px 3px rgba(16, 24, 40, 0.10);
--gap: clamp(1rem, 3vw, 2rem);
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-anchor: none verhindert, dass der Browser beim Ein-/Ausklappen der
TopBar die Scrollposition nachkorrigiert (sonst „zittert" der Smart-Header). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-anchor: none; }
body {
margin: 0;
font-family: var(--font);
color: var(--c-ink);
background: var(--c-surface);
line-height: 1.65;
font-size: 17px;
text-wrap: pretty; /* verhindert einzelne Restwörter (Schusterjungen) im Fließtext – vererbt sich global */
}
img { max-width: 100%; display: block; }
a { color: var(--c-brand); text-decoration: none; }
a:hover { color: var(--c-brand-dk); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; /* gleichmäßige, ausgewogene Zeilenumbrüche in Überschriften */ }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; }
/* ---------- Layout-Helfer ---------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2rem);
}
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
/* Anker-Sprünge dürfen nicht unter dem Sticky-Header (~81px) landen */
.section[id] { scroll-margin-top: 96px; }
.section--tint { background: var(--c-surface-2); }
.section__head { max-width: 720px; margin: 0 auto clamp(2rem, 5vw, 3rem); text-align: center; }
.section__head--left { margin-inline: 0; text-align: left; max-width: none; }
.section__head--wide { max-width: 1040px; }
.section__title.section__title--sm { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
/* Überschrift auf Desktop einzeilig halten; auf Mobile darf sie umbrechen */
@media (min-width: 768px) { .section__title--nowrap { white-space: nowrap; } }
.eyebrow {
display: inline-block;
font-size: .8rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-primary);
background: rgba(190, 18, 60, .1);
padding: .35rem .8rem;
border-radius: 999px;
margin-bottom: 1rem;
}
.section__title { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.section__lead { color: var(--c-ink-soft); font-size: 1.08rem; text-wrap: balance; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
font-weight: 700;
font-size: 1rem;
padding: .9rem 1.5rem;
border-radius: 999px;
border: 2px solid transparent;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/* Primär = Flamingo Pink */
.btn--primary { background: var(--color-primary); color: #fff; box-shadow: none; }
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; box-shadow: none; }
/* Sekundär = Coral Orange */
.btn--secondary { background: var(--color-secondary); color: var(--color-dark); box-shadow: none; }
.btn--secondary:hover { background: var(--color-secondary-dark); color: #fff; }
/* WhatsApp = Grün */
.btn--wa { background: var(--color-wa); color: #04340f; }
.btn--wa:hover { background: #1ebe5b; color: #04340f; }
/* Anruf auf dunklem Grund */
.btn--call { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--call:hover { background: rgba(255,255,255,.12); color: #fff; }
/* Heller Outline-Button */
.btn--ghost { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-line); }
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn--block { width: 100%; }
.btn .ico { width: 1.15em; height: 1.15em; }
/* ---------- Header / Nav ---------- */
/* Dunkler Grund am ganzen Header – so scheint beim Ein-/Ausklappen der TopBar
nie der weiße Seiteninhalt durch, und es bleibt keine weiße Kante über der Navbar. */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-dark); }
/* Header über die VOLLE Bildschirmbreite (nicht im 1180px-Container):
Marke ganz links, CTA ganz rechts – nur etwas Rand-Padding zum Bildschirmrand. */
.site-header .container { max-width: none; padding-inline: clamp(1rem, 3vw, 2.5rem); }
/* TopBar (Typ 3): dunkler Info-Streifen über der Hauptnavigation.
Klappt beim Runterscrollen ein, beim Hochscrollen wieder aus
(Klasse .nav-collapsed wird in main.js gesetzt). Nur Höhe animieren –
keine Opacity-Blende (die würde den weißen Hintergrund durchscheinen lassen). */
.topbar {
background: var(--color-dark); color: rgba(255,255,255,.72); font-size: .85rem;
border-bottom: 1px solid rgba(255,255,255,.10);
max-height: 56px; overflow: hidden;
transition: max-height .3s ease;
}
.site-header.nav-collapsed .topbar { max-height: 0; border-bottom-width: 0; }
.topbar__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .3rem 1.25rem; min-height: 38px; padding-block: .25rem; }
.topbar__item { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.82); font-weight: 500; text-decoration: none; }
.topbar__item svg { width: 15px; height: 15px; flex: 0 0 auto; }
a.topbar__item:hover { color: #fff; text-decoration: underline; }
/* Hauptnavigation (Typ 3): dunkler Balken, durch Trennlinie von der TopBar abgesetzt */
.navbar { background: var(--color-dark); border-bottom: 1px solid rgba(255,255,255,.10); }
/* Volle Breite: 3-Spalten-Grid – Marke links, Menü ECHT mittig, Preisrechner rechts */
.nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
min-height: 72px;
}
.nav > .brand { justify-self: start; }
.brand { display: flex; align-items: center; gap: .65rem; font-weight: 800; font-size: 1.25rem; color: var(--c-ink); letter-spacing: -.03em; }
.brand:hover { color: var(--c-ink); }
.brand__name b { color: var(--color-primary); }
.nav__links { display: flex; align-items: center; gap: .35rem; list-style: none; justify-self: center; }
.nav__links a {
display: block;
padding: .55rem .85rem;
border-radius: 8px;
color: var(--c-ink);
font-weight: 600;
font-size: .98rem;
}
.nav__links a:hover { background: var(--c-surface-2); color: var(--color-primary); }
.nav__links a.is-active { color: var(--color-primary); background: rgba(190, 18, 60,.08); }
.nav__cta { display: flex; align-items: center; gap: .5rem; justify-self: end; }
/* Kompaktere CTA-Buttons in der Navbar – kleiner als die globalen .btn */
.nav__cta .btn { padding: .5rem 1.05rem; font-size: .9rem; border-width: 1.5px; }
.nav__cta .btn .ico { width: 1.05em; height: 1.05em; }
.nav__toggle {
display: none;
background: none; border: none; cursor: pointer;
width: 44px; height: 44px;
border-radius: 10px;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
content: ""; display: block; position: relative;
width: 24px; height: 2.5px; background: var(--c-ink); border-radius: 2px;
margin-inline: auto;
transition: transform .25s ease, opacity .2s ease;
}
.nav__toggle span::before { position: absolute; top: -7px; }
.nav__toggle span::after { position: absolute; top: 7px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: rotate(45deg) translate(5px, 5px); }
.nav.is-open .nav__toggle span::after { transform: rotate(-45deg) translate(5px, -5px); }
/* ---------- Hero ---------- */
.hero {
position: relative;
color: #fff;
background:
radial-gradient(1200px 600px at 82% -10%, rgba(15, 138, 95,.30), transparent 60%),
radial-gradient(900px 520px at 0% 100%, rgba(190, 18, 60,.42), transparent 55%),
linear-gradient(160deg, var(--color-dark) 0%, var(--color-dark-soft) 100%);
overflow: hidden;
}
.hero::after {
content: "";
position: absolute; inset: 0;
background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 60px);
pointer-events: none;
}
.hero__inner {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 52fr 48fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
padding-block: clamp(3rem, 8vw, 6rem);
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(15, 138, 95,.6);} 70% { box-shadow: 0 0 0 10px rgba(15, 138, 95,0);} 100% { box-shadow: 0 0 0 0 rgba(15, 138, 95,0);} }
.hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); margin-bottom: .6rem; }
.hero__sub { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: rgba(255,255,255,.85); max-width: 38ch; margin-bottom: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__meta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1.4rem; color: rgba(255,255,255,.8); font-size: .92rem; }
.hero__meta b { color: #fff; font-size: 1.4rem; display: block; }
/* Hero links: Trustpunkte mit kleinen Icons */
.hero-trust { list-style: none; margin: 1.6rem 0 2rem; padding: 0; display: grid; gap: .7rem; }
.hero-trust li { display: flex; align-items: center; gap: .65rem; font-size: .98rem; color: var(--color-text); font-weight: 500; }
.hero-trust__ico {
width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px;
display: grid; place-items: center;
background: rgba(190, 18, 60,.1); color: var(--color-primary-dark);
}
.hero-trust__ico svg { width: 17px; height: 17px; }
/* Hero rechts: hochwertige Start/Ziel-Card (echtes Preis-Tool) */
.hero__visual { position: relative; z-index: 1; }
.hero-form {
width: 100%;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 18px;
box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05), 0 24px 48px -14px rgba(16,24,40,.20);
padding: clamp(1.6rem, 3.2vw, 2.3rem);
}
.hero-form__title { font-size: 1.25rem; font-weight: 700; color: var(--color-dark); letter-spacing: -.02em; margin: 0 0 .3rem; line-height: 1.2; }
.hero-form__text { font-size: .9rem; color: var(--color-muted); margin: 0 0 1.3rem; line-height: 1.45; }
.hero-form__field { margin-bottom: 1rem; }
.hero-form__field label { display: block; font-size: .82rem; font-weight: 600; color: var(--color-text); margin-bottom: .4rem; }
.hero-form__field input {
width: 100%; height: 52px; padding: 0 .95rem;
border: 1.5px solid var(--color-border-strong); border-radius: 11px;
background: var(--color-bg-soft); color: var(--color-text);
font-size: 1rem; font-family: inherit;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.hero-form__field input::placeholder { color: #9aa3af; }
.hero-form__field input:hover { border-color: #c2cad6; }
.hero-form__field input:focus { outline: none; border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 3px rgba(190, 18, 60,.15); }
.hero-form__field input.is-invalid { border-color: #dc2626; background: #fff; }
/* Orts-Pin im Eingabefeld: Abholort = pink, Zielort = coral (von → nach) */
.hero-combo .hero-combo__ico { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; z-index: 1; }
.hero-combo__ico--from { color: var(--color-primary); }
.hero-combo__ico--to { color: var(--color-secondary-dark); }
.hero-combo input { padding-left: 2.6rem; }
.hero-form__error { color: #dc2626; font-size: .85rem; font-weight: 600; margin: 0 0 .8rem; }
.hero-form__submit { height: 54px; font-size: 1.05rem; font-weight: 700; margin-top: .4rem; box-shadow: none; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.hero-form__submit:hover { transform: translateY(-1px); }
.hero-form .btn:disabled { opacity: .65; cursor: default; pointer-events: none; transform: none; }
.hero-form__trust { font-size: .8rem; color: var(--color-muted); text-align: center; margin: .9rem 0 0; line-height: 1.5; }
/* ---------- Trust-Badges ---------- */
.trust { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.trust__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
padding-block: 1.6rem;
}
.trust__item { display: flex; align-items: center; gap: .8rem; font-weight: 600; }
.trust__item .ico {
width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
display: grid; place-items: center;
background: rgba(190, 18, 60,.1); color: var(--color-primary);
}
.trust__item .ico svg { width: 22px; height: 22px; }
.trust__item small { display: block; font-weight: 500; color: var(--c-ink-soft); font-size: .82rem; }
/* ---------- Card-Grids ---------- */
.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.card {
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--radius);
padding: 1.6rem;
box-shadow: var(--shadow);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(190, 18, 60,.35); }
.card__ico {
width: 52px; height: 52px; border-radius: 14px;
display: grid; place-items: center; margin-bottom: 1rem;
background: linear-gradient(135deg, rgba(190, 18, 60,.14), rgba(15, 138, 95,.16));
color: var(--color-primary);
}
.card__ico svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.2rem; }
.card p { color: var(--c-ink-soft); margin-bottom: 0; }
.card__link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; margin-top: 1rem; color: var(--color-primary); }
.card__link:hover { color: var(--color-primary-dark); }
/* ---------- Ablauf / Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.step {
position: relative;
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.09);
border-radius: var(--lz-radius);
padding: 2.9rem 1.7rem 1.9rem; /* oben Platz für den halb überstehenden Kreis */
text-align: center; /* Titel + Text mittig, passend zum zentrierten Kreis */
transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.step:hover {
transform: translateY(-6px);
border-color: rgba(190, 18, 60,.4);
background: rgba(255,255,255,.06);
box-shadow: 0 22px 44px rgba(0,0,0,.28);
}
.step__num {
/* Kreis, mittig auf der oberen Kante – halb über dem Rand, halb im Kasten */
position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2;
width: 52px; height: 52px; border-radius: 50%;
display: grid; place-items: center; font-weight: 800; font-size: 1.3rem;
color: #fff; background: var(--color-primary-dark);
box-shadow: var(--shadow-pink);
}
.step h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.step p { color: var(--c-ink-soft); margin-bottom: 0; text-wrap: balance; }
/* Verbindungslinie zwischen den Schritten entfernt – wirkte verrutscht/unsauber */
.step:not(:last-child)::before { content: none; }
/* ---------- Vorteile (split) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.feature-list { list-style: none; display: grid; gap: 1.1rem; }
.feature-list li { display: flex; gap: .9rem; align-items: flex-start; }
.feature-list .chk {
flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
background: rgba(15, 138, 95,.12); color: var(--color-accent);
display: grid; place-items: center; margin-top: 2px;
}
.feature-list .chk svg { width: 16px; height: 16px; }
.feature-list strong { display: block; }
.feature-list span { color: var(--c-ink-soft); }
.visual-box {
border-radius: var(--radius);
min-height: 340px;
background:
radial-gradient(600px 320px at 100% 0%, rgba(190, 18, 60,.35), transparent 60%),
radial-gradient(500px 300px at 0% 100%, rgba(15, 138, 95,.25), transparent 60%),
linear-gradient(160deg, var(--color-dark-soft), var(--color-dark));
box-shadow: var(--shadow-lg);
position: relative; overflow: hidden;
color: #fff;
padding: 2rem;
display: flex; flex-direction: column; justify-content: flex-end;
}
.visual-box::before {
content: ""; position: absolute; inset: 0;
background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 50px);
}
.visual-box__stat { position: relative; }
.visual-box__stat b { font-size: 2.6rem; display: block; color: var(--color-secondary); }
.visual-box__stat p { margin: 0; color: rgba(255,255,255,.85); }
.visual-box__stat p + p { margin: .8rem 0 0; font-size: .8rem; color: rgba(255,255,255,.55); }
/* ---------- Fahrzeug-Sektion: 5 Karten, responsive ---------- */
.vehicles {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: clamp(.9rem, 2vw, 1.3rem);
margin-top: clamp(1.6rem, 4vw, 2.4rem);
}
.vehicle-card {
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden;
box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 22px rgba(16,24,40,.06);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vehicle-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 14px rgba(16,24,40,.08), 0 18px 40px rgba(16,24,40,.10);
border-color: var(--color-border-strong);
}
/* gleiche Bildhöhe für alle Karten, freigestellte PNGs ohne Beschnitt */
.vehicle-card__media {
height: 150px; display: grid; place-items: center; padding: 1rem;
background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border);
}
.vehicle-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.vehicle-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.1rem 1.2rem; gap: .55rem; }
.vehicle-card__name { font-size: 1.15rem; font-weight: 700; color: var(--color-dark); margin: 0; letter-spacing: -.02em; }
.vehicle-card__desc { font-size: .9rem; color: var(--color-muted); margin: 0; line-height: 1.5; }
.vehicle-card__specs { margin: .35rem 0 .2rem; display: grid; gap: .5rem; }
.vehicle-card__specs > div { display: grid; gap: .1rem; }
.vehicle-card__specs dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary-dark); margin: 0; }
.vehicle-card__specs dd { margin: 0; font-size: .88rem; color: var(--color-text); }
.vehicle-card__cta { margin-top: auto; }
@media (max-width: 1100px) { .vehicles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .vehicles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .vehicles { grid-template-columns: 1fr; } }
/* ---------- CTA-Band ---------- */
.cta-band {
background:
radial-gradient(800px 420px at 100% 0%, rgba(190, 18, 60,.38), transparent 60%),
radial-gradient(600px 360px at 0% 100%, rgba(15, 138, 95,.25), transparent 60%),
linear-gradient(135deg, var(--color-dark-soft), var(--color-dark));
color: #fff;
border-radius: var(--radius);
padding: clamp(2rem, 5vw, 3.5rem);
text-align: center;
box-shadow: var(--shadow-lg);
}
.cta-band h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.cta-band p { color: rgba(255,255,255,.85); max-width: 50ch; margin-inline: auto; margin-bottom: 1.8rem; }
.cta-band .hero__cta { justify-content: center; }
/* ---------- Kontakt-Karten ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.contact-card {
text-align: center;
padding: 2rem 1.5rem;
border-radius: var(--radius);
border: 1px solid var(--c-line);
background: var(--c-surface);
box-shadow: var(--shadow);
}
.contact-card .ico {
width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 1rem;
display: grid; place-items: center; color: #fff;
}
.contact-card .ico--phone { background: var(--color-primary); }
.contact-card .ico--wa { background: linear-gradient(135deg, #25d366, #128c4b); }
.contact-card .ico--mail { background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark)); }
.contact-card .ico svg { width: 26px; height: 26px; }
.contact-card h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.contact-card p { color: var(--c-ink-soft); }
.contact-card a.big { font-size: 1.25rem; font-weight: 800; color: var(--c-ink); }
.contact-card a.big:hover { color: var(--color-primary); }
/* ---------- Formular ---------- */
.form-wrap {
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: clamp(1.4rem, 4vw, 2.6rem);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.3rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: .92rem; }
.field label .req { color: #dc2626; }
.field input, .field select, .field textarea {
font: inherit; font-size: 1rem;
padding: .8rem .9rem;
border: 1.5px solid var(--c-line);
border-radius: var(--radius-sm);
background: var(--c-field);
color: var(--c-ink);
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--color-primary); background: #fff;
box-shadow: 0 0 0 4px rgba(190, 18, 60,.14);
}
.field input:invalid:not(:placeholder-shown) { border-color: #f0a5a5; }
.field .hint { font-size: .8rem; color: var(--c-ink-soft); }
.field .err { font-size: .82rem; color: #dc2626; font-weight: 600; display: none; }
.field.has-error .err { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #dc2626; }
.form-foot { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; color: var(--c-ink-soft); }
.consent input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--color-primary); }
.form-success {
display: none;
text-align: center;
padding: 2.5rem 1.5rem;
}
.form-success.is-visible { display: block; animation: pop .35s ease; }
@keyframes pop { from { opacity: 0; transform: scale(.96);} to { opacity: 1; transform: scale(1);} }
.form-success .badge {
width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 1.2rem;
display: grid; place-items: center;
background: rgba(15, 138, 95,.14); color: var(--color-accent);
}
.form-success .badge svg { width: 40px; height: 40px; }
.form-success h3 { font-size: 1.6rem; }
.summary {
text-align: left; margin: 1.5rem auto 0; max-width: 480px;
background: var(--c-surface-2); border: 1px solid var(--c-line);
border-radius: var(--radius-sm); padding: 1.2rem 1.4rem;
}
.summary dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0; }
.summary dt { font-weight: 700; color: var(--c-ink-soft); }
.summary dd { margin: 0; }
/* =========================================================
PREISRECHNER
========================================================= */
.calc { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
.calc__form { display: grid; gap: 1.8rem; }
.calc-group {
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--radius);
padding: 1.4rem clamp(1.1rem, 3vw, 1.6rem);
box-shadow: var(--shadow);
}
.calc-group__title { display: flex; align-items: center; gap: .65rem; font-size: 1.1rem; font-weight: 700; margin: 0 0 1.1rem; }
.calc-group__title:focus { outline: none; } /* programmatischer Fokus beim Schrittwechsel – kein sichtbarer Rahmen nötig */
.calc-group__title .n {
width: 27px; height: 27px; border-radius: 50%; flex: 0 0 auto;
background: var(--color-primary); color: #fff;
display: grid; place-items: center; font-size: .85rem; font-weight: 800;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.calc-group__sep { height: 1px; border: 0; background: var(--c-line); margin: 1.6rem 0 0; }
/* Packstücke (mehrere, dynamisch) */
#packstueck-list { display: grid; gap: 1rem; }
.packstueck { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.1rem clamp(.9rem, 2.5vw, 1.25rem); background: var(--c-surface); }
.packstueck + .packstueck { margin-top: 0; }
.packstueck__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.packstueck__title { font-weight: 800; font-size: .95rem; }
.packstueck__remove {
appearance: none; border: 1px solid var(--c-line); background: transparent;
color: var(--c-ink-soft); font: inherit; font-size: .82rem; font-weight: 600;
padding: .3rem .7rem; border-radius: 999px; cursor: pointer;
}
.packstueck__remove:hover, .packstueck__remove:focus-visible { color: var(--color-primary); border-color: var(--color-primary); background: rgba(190, 18, 60,.08); }
.packstueck-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1rem; }
.btn-add-piece {
display: inline-flex; align-items: center; gap: .45rem;
appearance: none; background: transparent; border: 1px dashed var(--color-primary);
color: var(--color-primary); font: inherit; font-weight: 700; font-size: .9rem;
padding: .55rem 1rem; border-radius: 999px; cursor: pointer;
}
.btn-add-piece svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-add-piece:hover, .btn-add-piece:focus-visible { background: rgba(190, 18, 60,.1); }
.packstueck-total { margin: 0; font-size: .9rem; color: var(--c-ink-soft); }
.packstueck-total b { color: var(--c-ink); }
/* Auswahl-Cards (Service, Fahrzeug, Zusatzleistungen) */
.option-cards { display: grid; gap: .7rem; }
.option-cards--2 { grid-template-columns: repeat(2, 1fr); }
.option-cards--3 { grid-template-columns: repeat(3, 1fr); }
.option-card { position: relative; display: block; cursor: pointer; }
.option-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-card__inner {
height: 100%;
border: 2px solid var(--c-line);
border-radius: 14px;
padding: .95rem 1.05rem;
background: var(--c-surface);
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
display: flex; flex-direction: column; gap: .25rem;
}
.option-card:hover .option-card__inner { border-color: rgba(190, 18, 60,.45); }
.option-card:has(input:checked) .option-card__inner {
border-color: var(--color-primary);
background: var(--color-bg);
box-shadow: 0 0 0 4px rgba(190, 18, 60,.12);
}
.option-card:has(input:focus-visible) .option-card__inner { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.option-card__inner h4 { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.option-card__inner .desc { font-size: .82rem; color: var(--c-ink-soft); }
.option-card__price { font-weight: 800; color: var(--color-price); font-size: .92rem; }
.option-card .v-ico { width: 30px; height: 30px; color: var(--color-primary); flex: 0 0 auto; }
.option-card .v-ico svg { width: 30px; height: 30px; }
/* Checkbox-Indikator für Zusatzleistungen */
.option-card--check .option-card__inner { flex-direction: row; align-items: center; gap: .8rem; }
.option-card__check {
width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
border: 2px solid var(--c-line); background: #fff;
display: grid; place-items: center; color: #fff;
transition: background .15s ease, border-color .15s ease;
}
.option-card__check svg { width: 15px; height: 15px; opacity: 0; transition: opacity .15s ease; }
.option-card:has(input:checked) .option-card__check { background: var(--color-primary); border-color: var(--color-primary); }
.option-card:has(input:checked) .option-card__check svg { opacity: 1; }
.option-card__check-body { flex: 1; }
/* "Empfohlen"-Badge auf Fahrzeug-Card */
.veh-badge {
position: absolute; top: -10px; right: 12px; z-index: 2;
background: var(--color-secondary); color: var(--color-dark);
font-size: .68rem; font-weight: 800; letter-spacing: .03em;
padding: .22rem .6rem; border-radius: 999px;
box-shadow: var(--shadow);
display: none;
}
.option-card.is-recommended .veh-badge { display: inline-block; }
/* Ergebnis-Box */
.result { position: sticky; top: 80px; min-width: 0; }
.result-card {
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: 20px;
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.result-card__head {
background:
radial-gradient(400px 200px at 100% 0%, rgba(190, 18, 60,.4), transparent 60%),
linear-gradient(135deg, var(--color-dark-soft), var(--color-dark));
color: #fff;
padding: 1.2rem 1.4rem;
}
.result-card__head h3 { margin: 0; font-size: 1.15rem; }
.result-card__head p { margin: .2rem 0 0; font-size: .85rem; color: rgba(255,255,255,.7); }
.result-card__body { padding: 1.2rem 1.3rem 1.3rem; }
/* Kompakte Fakten-Kacheln: Fahrzeug + Entfernung nebeneinander */
.result-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .9rem; }
.result-fact {
display: flex; gap: .55rem; align-items: center; min-width: 0;
background: var(--color-bg);
border: 1px solid var(--c-line);
border-radius: 12px;
padding: .6rem .7rem;
}
.result-fact .f-ico { width: 26px; height: 26px; color: var(--color-primary); flex: 0 0 auto; }
.result-fact .f-ico svg { width: 26px; height: 26px; display: block; }
.result-fact > div { min-width: 0; }
.result-fact strong { display: block; font-size: .88rem; line-height: 1.3; }
.result-fact small { color: var(--c-ink-soft); font-size: .74rem; }
.result-breakdown { display: grid; gap: .5rem; }
.result-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .94rem; color: var(--c-ink-soft); }
.result-row > span:last-child { color: var(--c-ink); font-weight: 600; white-space: nowrap; }
.result-total { border-top: 2px dashed var(--c-line); margin-top: .8rem; padding-top: 1rem; }
.result-total .label { display: block; font-size: .9rem; color: var(--c-ink-soft); margin-bottom: .1rem; }
.price-amount { font-size: clamp(2.4rem, 7vw, 3.3rem); font-weight: 800; color: var(--color-primary); line-height: 1; letter-spacing: -.02em; }
.price-amount.is-text { font-size: 1.3rem; line-height: 1.4; }
.price-amount small { font-size: 1rem; font-weight: 700; color: var(--c-ink-soft); }
.price-net { font-size: .85rem; color: var(--c-ink-soft); margin-top: .35rem; }
.result-actions { display: grid; gap: .6rem; margin-top: 1rem; }
/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: .8rem; }
.faq__item {
border: 1px solid var(--c-line);
border-radius: var(--radius-sm);
background: var(--c-surface);
overflow: hidden;
}
.faq__q {
width: 100%; text-align: left; cursor: pointer;
background: none; border: none; font: inherit; font-weight: 700; font-size: 1.05rem;
padding: 1.1rem 1.3rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
color: var(--c-ink);
}
.faq__q .plus { flex: 0 0 auto; width: 24px; height: 24px; position: relative; transition: transform .25s ease; }
.faq__q .plus::before, .faq__q .plus::after { content: ""; position: absolute; background: var(--color-primary); border-radius: 2px; }
.faq__q .plus::before { top: 11px; left: 2px; right: 2px; height: 2px; }
.faq__q .plus::after { left: 11px; top: 2px; bottom: 2px; width: 2px; transition: transform .25s ease; }
.faq__item.is-open .faq__q .plus::after { transform: scaleY(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq__a p { padding: 0 1.3rem 1.2rem; color: var(--c-ink-soft); margin: 0; }
/* ---------- Page-Header (Subseiten) ---------- */
.page-hero {
color: #fff;
background: var(--color-dark);
padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.page-hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
.page-hero p { color: rgba(255,255,255,.85); max-width: 60ch; font-size: 1.1rem; margin-bottom: 0; }
.breadcrumb { font-size: .88rem; color: rgba(255,255,255,.65); margin-bottom: 1rem; }
.breadcrumb a { color: rgba(255,255,255,.85); }
/* Page-Hero mit Bild rechts (z. B. Kontakt: Flamingo-Maskottchen) */
.page-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.page-hero__media { display: flex; justify-content: center; }
/* Flamingo-Maskottchen mit Sprechblase am Schnabel */
.page-hero__media .flamingo { position: relative; width: 100%; max-width: 360px; }
.page-hero__media .flamingo img { display: block; width: 100%; height: auto; }
.flamingo__bubble {
position: absolute; top: -14%; left: 64%; z-index: 2;
width: max-content; max-width: 200px; text-align: left;
background: var(--color-primary-dark); color: #fff;
font-weight: 700; font-size: .9rem; line-height: 1.3;
padding: .7rem 1rem; border-radius: 18px;
box-shadow: 0 8px 20px rgba(11,31,51,.20);
}
/* Sprechblasen-Pfeil Richtung Flamingo */
.flamingo__bubble::after {
content: ""; position: absolute; left: 22px; bottom: -10px;
width: 0; height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 12px solid var(--color-primary-dark);
}
@media (min-width: 768px) {
.page-hero--split .page-hero__grid { grid-template-columns: 1.5fr 1fr; }
.page-hero--split .page-hero__media { justify-content: flex-end; }
}
/* ---------- Werte / Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap); text-align: center; }
.stat b { font-size: clamp(2rem, 5vw, 2.8rem); color: var(--color-primary); display: block; line-height: 1; }
.stat span { color: var(--c-ink-soft); font-weight: 600; }
.values { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.value h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; }
.value h3 .ico { width: 36px; height: 36px; border-radius: 10px; background: rgba(190, 18, 60,.1); color: var(--color-primary); display: grid; place-items: center; flex: 0 0 auto; }
.value p { color: var(--c-ink-soft); }
/* ---------- Footer ---------- */
.site-footer { background: var(--color-dark); color: rgba(255,255,255,.78); padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
.site-footer h4 { color: #fff; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: var(--color-secondary); }
.footer-links { list-style: none; display: grid; gap: .55rem; }
.footer-about .brand { color: #fff; margin-bottom: 1rem; }
.footer-about p { font-size: .95rem; color: rgba(255,255,255,.7); }
.footer-contact li { display: flex; gap: .6rem; align-items: center; margin-bottom: .55rem; font-size: .95rem; }
.footer-contact .ico { color: var(--color-secondary); flex: 0 0 auto; }
.footer-contact .ico svg { width: 18px; height: 18px; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.12);
margin-top: 2.2rem; padding-top: 1.4rem;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
font-size: .85rem; color: rgba(255,255,255,.55);
}
.footer-bottom a { color: rgba(255,255,255,.7); }
.footer-credit { text-align: center; flex: 1 1 auto; }
/* ---------- Floating Aktionen ---------- */
.fab {
position: fixed; right: 16px; bottom: 16px; z-index: 60;
display: flex; flex-direction: column; gap: .6rem;
}
.fab a {
width: 56px; height: 56px; border-radius: 50%;
display: grid; place-items: center; color: #fff;
box-shadow: var(--shadow-lg);
transition: transform .15s ease;
}
.fab a:hover { transform: scale(1.06); color: #fff; }
.fab a svg { width: 26px; height: 26px; }
.fab__wa { background: var(--color-wa); }
/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.muted { color: var(--c-ink-soft); }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }
/* =========================================================
PREISRECHNER-WIZARD (6 Schritte) – expressversand-kosten-preisrechner/calc/
========================================================= */
.calc__main { min-width: 0; }
/* Stepper */
.stepper { display: flex; list-style: none; margin: 0 0 clamp(1.6rem, 4vw, 2.4rem); padding: 0; }
.stepper__item { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.stepper__item:not(:first-child)::before {
content: ""; position: absolute; top: 19px; right: 50%; width: 100%; height: 3px;
background: var(--c-line); border-radius: 2px; z-index: 0;
}
.stepper__item.is-done::before, .stepper__item.is-active::before { background: var(--color-secondary); }
.stepper__dot {
position: relative; z-index: 1;
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center; font-weight: 800; font-size: .95rem;
background: #fff; border: 2px solid var(--c-line); color: var(--c-ink-soft);
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.stepper__dot svg { width: 18px; height: 18px; }
.stepper__item.is-active .stepper__dot { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: var(--shadow-pink); }
.stepper__item.is-done .stepper__dot { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-dark); }
.stepper__label { font-size: .82rem; font-weight: 700; color: var(--c-ink-soft); max-width: 13ch; }
.stepper__item.is-active .stepper__label { color: var(--color-primary); }
.stepper__item.is-clickable { cursor: pointer; }
.stepper__item.is-clickable:hover .stepper__dot { border-color: var(--color-primary); }
/* Wizard-Schritte */
.wstep { display: none; }
.wstep.is-active { display: grid; gap: 1.2rem; animation: pop .3s ease; }
.wstep__nav { display: flex; justify-content: space-between; gap: 1rem; }
.wstep__nav--end { justify-content: flex-end; }
.btn--lg { padding: 1.05rem 1.8rem; font-size: 1.05rem; }
/* Kontext-Hinweis (bekannter Ort in Schritt 3/4) */
.ctx-note {
background: var(--color-bg); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
padding: .8rem 1rem; font-size: .9rem; color: var(--c-ink-soft);
display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}
.ctx-note b { color: var(--c-ink); }
/* Fahrzeug-Cards */
.veh-list { display: grid; gap: .9rem; }
.veh-card { position: relative; display: block; cursor: pointer; }
.veh-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.veh-card__inner {
border: 2px solid var(--c-line); border-radius: 16px;
padding: 1.1rem 1.2rem; background: #fff;
display: grid; gap: .7rem;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.veh-card:not(.is-disabled):hover .veh-card__inner { border-color: rgba(190, 18, 60,.5); }
.veh-card:has(input:checked) .veh-card__inner { border-color: var(--color-primary); background: var(--color-bg); box-shadow: 0 0 0 4px rgba(190, 18, 60,.12); }
.veh-card:has(input:focus-visible) .veh-card__inner { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.veh-card__head { display: flex; align-items: center; gap: 1.1rem; }
.veh-card__headmain { display: flex; flex-direction: column; gap: .55rem; min-width: 0; flex: 1 1 auto; }
.veh-card__titlerow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.veh-card__icon { width: 170px; max-width: 38%; aspect-ratio: 17 / 11; color: var(--color-primary); flex: 0 0 auto; }
.veh-card__icon svg, .veh-card__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.veh-card__title { font-weight: 800; font-size: 1.18rem; line-height: 1.2; }
.veh-card__price { font-weight: 800; font-size: 1.35rem; color: var(--color-primary); white-space: nowrap; line-height: 1.1; }
.veh-card__price small { display: block; font-weight: 600; font-size: .74rem; color: var(--c-ink-soft); white-space: normal; margin-top: .15rem; }
.veh-card__specs { display: flex; flex-wrap: wrap; gap: .55rem; }
.veh-spec { display: inline-flex; flex-direction: column; gap: .12rem; background: var(--color-bg-soft); border: 1px solid var(--c-line); border-radius: 10px; padding: .5rem .8rem; min-width: 0; }
.veh-spec__k { font-size: .67rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--c-ink-soft); }
.veh-spec__v { font-size: .96rem; font-weight: 700; color: var(--c-ink); }
.veh-card__hints { list-style: none; display: grid; gap: .42rem; font-size: .86rem; color: var(--c-ink-soft); margin: 0; line-height: 1.4; }
.veh-card__hints li { display: flex; gap: .5rem; align-items: flex-start; }
.veh-card__hints svg { width: 15px; height: 15px; color: var(--color-accent); flex: 0 0 auto; margin-top: 2px; }
.veh-card.is-disabled { cursor: not-allowed; }
.veh-card.is-disabled .veh-card__inner { background: var(--color-bg-soft); border-style: dashed; opacity: .75; }
.veh-card__reason { font-size: .8rem; font-weight: 700; color: var(--color-price); display: flex; gap: .4rem; align-items: center; }
.veh-card__reason svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* "kein Fahrzeug passt" */
.veh-none { border: 2px dashed var(--color-secondary); border-radius: 16px; background: #fff5f2; padding: 1.2rem 1.3rem; }
.veh-none h4 { margin: 0 0 .3rem; color: var(--color-secondary-dark); }
.veh-none p { margin: 0; font-size: .9rem; color: var(--c-ink-soft); }
.addon-empty { font-size: .9rem; color: var(--c-ink-soft); padding: .3rem 0; margin: 0; }
.form-error { color: #dc2626; font-weight: 600; font-size: .85rem; margin: .6rem 0 0; display: none; }
/* Übersicht-Datenblöcke */
.sum-block { padding: .85rem 0; border-bottom: 1px solid var(--c-line); }
.sum-block:first-child { padding-top: 0; }
.sum-block__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sum-block__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; color: var(--c-ink-soft); }
.sum-edit { font-size: .76rem; font-weight: 700; color: var(--color-primary); background: none; border: none; cursor: pointer; padding: 0; }
.sum-edit:hover { color: var(--color-primary-dark); text-decoration: underline; }
.sum-block__value { font-size: .92rem; color: var(--c-ink); margin-top: .25rem; line-height: 1.5; }
.sum-block__value .empty { color: var(--c-ink-soft); font-style: italic; }
/* Einklappbare Bereiche der Ergebnisbox (Preisaufstellung / Ihre Angaben) */
.result-details { border: 1px solid var(--c-line); border-radius: 12px; margin-top: .6rem; overflow: hidden; }
.result-details summary {
list-style: none; cursor: pointer; user-select: none;
display: flex; justify-content: space-between; align-items: center; gap: .6rem;
padding: .65rem .85rem; font-size: .85rem; font-weight: 700; color: var(--c-ink-soft);
}
.result-details summary::-webkit-details-marker { display: none; }
.result-details summary:hover { color: var(--c-ink); }
.result-details summary .chev { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .25s ease; }
.result-details[open] summary .chev { transform: rotate(180deg); }
.result-details__body { padding: .15rem .85rem .85rem; }
.result-details .sum-block:last-child { border-bottom: 0; padding-bottom: .15rem; }
/* Prominente Preisbox (Gesamtpreis) – steht jetzt ganz oben in der Box */
.price-box {
margin-top: 0; border-radius: 16px; padding: 1.2rem 1.3rem; text-align: center; color: #fff;
background: var(--color-price);
box-shadow: var(--shadow);
}
.price-box .label { font-size: .85rem; font-weight: 600; opacity: .92; margin-bottom: .2rem; }
.price-box .price-amount { color: #fff; }
.price-box .vat-hint { font-size: .78rem; color: rgba(255,255,255,.85); margin-top: .3rem; }
/* Wizard mobil */
@media (max-width: 760px) {
.stepper__label { display: none; }
.stepper__dot { width: 34px; height: 34px; font-size: .85rem; }
.stepper__item:not(:first-child)::before { top: 16px; }
.wstep__nav { flex-direction: column-reverse; }
.wstep__nav .btn { width: 100%; }
.veh-card__head { flex-wrap: wrap; gap: .85rem; }
.veh-card__icon { width: 132px; max-width: 44%; }
/* Hero-CTAs sauber untereinander, volle Breite */
.hero__cta { flex-direction: column; align-items: stretch; }
.hero__cta .btn { width: 100%; justify-content: center; }
}
/* =========================================================
Responsive
========================================================= */
@media (max-width: 980px) {
/* Hero stapelt: erst Text, dann die Start/Ziel-Card darunter (Card bleibt sichtbar) */
.hero__inner { grid-template-columns: 1fr; }
.hero__visual { justify-items: stretch; margin-top: .5rem; }
.hero-form { max-width: 520px; }
.grid--4, .trust__grid, .steps, .contact-grid, .stats, .values { grid-template-columns: repeat(2, 1fr); }
.step:not(:last-child)::before { display: none; }
.footer-grid { grid-template-columns: 1fr 1fr; }
/* Preisrechner: Ergebnis unter das Formular */
.calc { grid-template-columns: 1fr; }
.result { position: static; }
}
@media (max-width: 760px) {
body { font-size: 16px; }
.nav { display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; }
/* TopBar mobil: Info-Items weglassen, Telefon + WhatsApp zentriert */
.topbar__item--info { display: none; }
.topbar__inner { justify-content: center; gap: 1.5rem; }
.nav__links {
position: absolute; top: 68px; left: 0; right: 0;
flex-direction: column; align-items: stretch;
background: var(--color-dark); border-bottom: 1px solid rgba(255,255,255,.10);
padding: .8rem 1rem 1.2rem; gap: .2rem;
box-shadow: var(--shadow);
display: none;
margin: 0; /* Desktop-Abstände im mobilen Dropdown zurücksetzen */
}
.nav.is-open .nav__links { display: flex; }
.nav__links a { padding: .8rem 1rem; }
.nav__toggle { display: block; }
.nav__cta { display: none; }
.nav.is-open .nav__cta {
position: static; display: flex; flex-direction: column;
width: 100%; padding: 0 1rem 1rem; gap: .5rem;
background: var(--color-dark);
}
.nav.is-open .nav__cta .btn { width: 100%; justify-content: center; }
.grid--3, .grid--2, .grid--4,
.trust__grid, .steps, .split,
.contact-grid, .stats, .values, .form-grid,
.footer-grid { grid-template-columns: 1fr; }
.hero__cta .btn, .cta-band .btn { flex: 1 1 100%; }
.summary dl { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; }
/* Preisrechner mobil */
.field-row { grid-template-columns: 1fr; }
.option-cards--2, .option-cards--3 { grid-template-columns: 1fr; }
.result-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; }
}
/* =========================================================
EXPRESSVERSAND-PREISRECHNER
– Landingpage-Bausteine + 6-Schritt-Wizard (App-Look)
========================================================= */
/* ---------- Kompakter App-Header (Rechner-Seite) ---------- */
.calc-header {
position: sticky; top: 0; z-index: 50;
background: var(--color-dark);
border-bottom: 1px solid rgba(255,255,255,.12);
}
.calc-header .nav { min-height: 64px; }
.calc-header .brand, .calc-header .brand:hover { color: #fff; }
.calc-contact { display: flex; align-items: center; gap: .55rem; }
.calc-contact a {
display: inline-flex; align-items: center; gap: .45rem;
padding: .55rem .9rem; border-radius: 999px;
font-weight: 700; font-size: .92rem;
border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.calc-contact a svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.calc-contact .cc-line { color: #fff; border-color: rgba(255,255,255,.28); }
.calc-contact .cc-line:hover { background: rgba(255,255,255,.12); color: #fff; }
.calc-contact .cc-back { color: rgba(255,255,255,.8); border-color: transparent; padding-inline: .5rem; }
.calc-contact .cc-back:hover { color: #fff; }
@media (max-width: 880px) {
.calc-contact .lbl { display: none; }
.calc-contact a { padding: .6rem; }
.calc-contact .cc-back { display: none; }
}
/* schmaler Intro-Streifen oberhalb des Wizards */
.calc-intro { background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); padding-block: clamp(1.4rem, 4vw, 2.2rem); }
.calc-intro h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: .35rem; }
.calc-intro p { color: var(--c-ink-soft); margin: 0; max-width: 65ch; }
.calc-intro .breadcrumb { color: var(--c-ink-soft); margin-bottom: .7rem; }
.calc-intro .breadcrumb a { color: var(--color-primary); }
/* ---------- Landing: Vorteilskacheln ---------- */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.benefit {
display: flex; gap: 1rem; align-items: flex-start;
background: var(--c-surface); border: 1px solid var(--c-line);
border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(190, 18, 60,.35); }
.benefit__ico {
width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
display: grid; place-items: center; color: var(--color-primary);
background: linear-gradient(135deg, rgba(190, 18, 60,.14), rgba(15, 138, 95,.16));
}
.benefit__ico svg { width: 24px; height: 24px; }
.benefit h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.benefit p { color: var(--c-ink-soft); margin: 0; font-size: .95rem; }
/* ---------- Landing: Fahrzeugklassen-Karten ---------- */
.vclass-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.vclass-card {
display: flex; flex-direction: column;
background: var(--c-surface); border: 1px solid var(--c-line);
border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vclass-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(190, 18, 60,.35); }
.vclass-card__top {
display: flex; align-items: center; gap: .9rem;
padding: 1.2rem 1.4rem; color: #fff;
background: linear-gradient(135deg, var(--color-dark-soft), var(--color-dark));
}
.vclass-card__top svg { width: 58px; height: 38px; flex: 0 0 auto; }
.vclass-card__top h3 { margin: 0; font-size: 1.25rem; color: #fff; }
.vclass-card__top .einsatz { display: block; font-size: .82rem; color: rgba(255,255,255,.7); font-weight: 500; margin-top: .15rem; }
.vclass-card__body { padding: 1.2rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.vclass-spec { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; color: var(--c-ink-soft); border-bottom: 1px dashed var(--c-line); padding-bottom: .5rem; }
.vclass-spec b { color: var(--c-ink); font-weight: 700; }
.vclass-price { margin-top: .4rem; }
.vclass-price .ab { font-size: .82rem; color: var(--c-ink-soft); display: block; }
.vclass-price .amount { font-size: 1.9rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.vclass-price .amount small { font-size: .85rem; font-weight: 700; color: var(--c-ink-soft); }
.vclass-card__cta { margin-top: auto; padding-top: 1rem; }
/* ---------- Landing: Ablauf mit 5 Schritten ---------- */
.steps--5 { grid-template-columns: repeat(5, 1fr); }
/* ---------- Wizard: Status-Pill auf Fahrzeug-Cards ---------- */
.veh-card__status {
margin-left: auto; align-self: center;
font-size: .72rem; font-weight: 800; letter-spacing: .02em;
padding: .2rem .6rem; border-radius: 999px; white-space: nowrap;
}
.veh-card__status.is-ok { background: rgba(15, 138, 95,.16); color: #0C6E4A; }
.veh-card__status.is-rec { background: var(--color-secondary-dark); color: #fff; }
.veh-card__status.is-no { background: rgba(220,38,38,.1); color: #B91C1C; }
.veh-card__tightnote { display: block; font-size: .8rem; line-height: 1.4; color: #B45309; margin: .15rem 0 .5rem; }
/* ---------- Wizard: Zwischenstopp ---------- */
.stop-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: start; margin-top: 1rem; }
.stop-row .field { margin: 0; }
.btn--icon {
flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border-radius: var(--radius-sm);
background: var(--c-surface); border: 1.5px solid var(--c-line); color: var(--c-ink-soft);
display: inline-grid; place-items: center; cursor: pointer; align-self: end;
}
.btn--icon:hover { border-color: #dc2626; color: #dc2626; }
.btn--icon svg { width: 18px; height: 18px; }
.link-add {
display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
background: none; border: none; cursor: pointer; padding: 0;
font: inherit; font-weight: 700; font-size: .92rem; color: var(--color-primary);
}
.link-add:hover { color: var(--color-primary-dark); }
.link-add svg { width: 18px; height: 18px; }
/* ---------- Wizard: kompakte Distanz-Notiz ---------- */
.dist-note {
margin-top: 1rem; display: flex; align-items: center; gap: .6rem;
background: rgba(15, 138, 95,.08); border: 1px solid rgba(15, 138, 95,.25);
border-radius: var(--radius-sm); padding: .7rem .9rem; font-size: .9rem; color: var(--c-ink);
}
.dist-note svg { width: 20px; height: 20px; color: var(--color-accent); flex: 0 0 auto; }
.dist-note b { color: #0F766E; }
/* ---------- Wizard: Schritt-Beschreibung ---------- */
.wstep__desc { margin: -.4rem 0 1.1rem; font-size: .92rem; color: var(--c-ink-soft); }
.field-subhead { font-weight: 800; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary); margin: 1.4rem 0 .7rem; }
.field-subhead:first-of-type { margin-top: .2rem; }
.quick-actions { display: flex; justify-content: flex-end; margin-top: .55rem; }
.btn-quick {
display: inline-flex; align-items: center; gap: .4rem;
background: rgba(190, 18, 60,.07); border: 1px solid rgba(190, 18, 60,.32);
border-radius: 999px; padding: .4rem .85rem;
font: inherit; font-size: .8rem; font-weight: 600; color: var(--color-primary);
cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.btn-quick svg { width: 15px; height: 15px; flex: 0 0 auto; }
.btn-quick:hover, .btn-quick:focus-visible { background: rgba(190, 18, 60,.13); border-color: var(--color-primary); }
.btn-quick:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.field-note { display: block; margin-top: .45rem; font-size: .8rem; color: var(--c-ink-soft); }
.time-range select:disabled { opacity: .55; cursor: not-allowed; background-image: none; }
.field-row--3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .field-row--3 { grid-template-columns: 1fr; } }
.done-badge { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(15, 138, 95,.14); color: var(--color-accent); margin: 0 auto 1.2rem; }
.done-badge svg { width: 40px; height: 40px; }
/* Optionen-Icons */
.opt-ico { width: 26px; height: 26px; color: var(--color-primary); flex: 0 0 auto; }
.opt-ico svg { width: 26px; height: 26px; }
.option-card--opt .option-card__inner { align-items: center; }
.option-card--opt .option-card__check-body { display: flex; align-items: center; gap: .7rem; }
/* Zusammenfassung-Hinweis */
.sum-disclaimer {
background: var(--color-bg); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
padding: .85rem 1rem; font-size: .85rem; color: var(--c-ink-soft); margin: 0 0 1.3rem;
display: flex; gap: .55rem; align-items: flex-start;
}
.sum-disclaimer svg { width: 18px; height: 18px; color: var(--color-secondary); flex: 0 0 auto; margin-top: 2px; }
/* Erfolgs-/Bestätigungsanzeige nach Absenden */
#calc-done { display: none; }
#calc-done.is-visible { display: block; }
/* ---------- Responsive: neue Bausteine ---------- */
@media (max-width: 980px) {
.benefit-grid, .vclass-grid { grid-template-columns: repeat(2, 1fr); }
.steps--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.benefit-grid, .vclass-grid, .steps--5 { grid-template-columns: 1fr; }
.calc-header .nav { gap: .5rem; flex-wrap: nowrap; }
.veh-card__status { margin-left: 0; }
}
/* ---------- Skip-Link (Tastatur: zum Inhalt springen) ---------- */
.skip-link:focus {
position: fixed; top: .75rem; left: .75rem; z-index: 1000;
width: auto; height: auto; margin: 0; padding: .65rem 1.1rem;
clip: auto; overflow: visible; white-space: normal;
background: var(--color-dark); color: #fff; border-radius: 10px;
font-weight: 700; box-shadow: var(--shadow-lg); outline: 2px solid #fff;
}
.card .muted { font-size: .95rem; }
/* Klickbare Stepper-Schritte als echte Buttons (Tastaturbedienung) */
.stepper__btn {
display: flex; flex-direction: column; align-items: center; gap: .5rem;
background: none; border: none; cursor: pointer; padding: 0; margin: 0;
font: inherit; color: inherit; width: 100%;
}
.stepper__btn:focus-visible { outline: none; }
.stepper__btn:focus-visible .stepper__dot { outline: 3px solid var(--color-primary); outline-offset: 3px; }
/* =========================================================
PREISRECHNER-KOMPONENTEN (gescopet auf .pr-land / .pr-calc)
Die Farbwerte sind KEINE eigene Palette mehr: alle --pr-*-Variablen
verweisen auf die globalen Design-Tokens in :root – die ganze Website
(Hauptseiten + Rechner) teilt sich damit eine einzige Farbquelle.
Dieser Block enthält nur noch Komponenten-Styling der Rechner-Seiten
(kleinere Radien, kompaktere Abstände).
========================================================= */
.pr-land, .pr-calc {
--pr-line: var(--color-border); /* sichtbare Rahmen (Slate-300) */
--pr-field: #FFFFFF; /* Formularfelder weiß (mit klarem Rahmen) */
--pr-field-line: var(--color-border-strong); /* Feldrahmen sichtbar (Slate-400) */
--pr-tint: var(--color-bg); /* getönte Flächen / Tabellenkopf */
--pr-ink: var(--color-text);
--pr-ink-soft: #4B5A6B; /* dunkleres Slate – auf hellem Grund klar lesbar (statt zu hellem Graublau) */
--pr-radius: 10px;
--pr-radius-sm: 8px;
--pr-shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.05);
--pr-shadow-card: var(--shadow);
--pr-accent: var(--color-primary);
--pr-accent-dk: var(--color-primary-dark);
--pr-value: var(--color-secondary); /* Grün – Status / erledigte Schritte */
--pr-value-dk: var(--color-secondary-dark);
--pr-price: var(--color-price); /* Nachtblau – Preistext auf Weiß & Preisbox-Grund (weiße Schrift) */
--pr-navy: var(--color-dark);
--pr-warn: var(--color-warn); /* Rot – Warnungen/Fehler */
}
.pr-land { background: #fff; }
.pr-calc { background: var(--pr-tint); } /* Rechner: helle Grundfläche, Cards weiß */
/* ---------- Buttons: flach, kleiner Radius, kein Glow ---------- */
.pr-land .btn, .pr-calc .btn {
border-radius: var(--pr-radius); box-shadow: none; font-weight: 700; font-size: .98rem;
padding: .8rem 1.3rem; border-width: 1.5px;
}
.pr-land .btn:active, .pr-calc .btn:active { transform: none; }
.pr-land .btn--lg, .pr-calc .btn--lg { padding: .95rem 1.6rem; font-size: 1.02rem; }
.pr-land .btn--primary, .pr-calc .btn--primary { background: var(--pr-accent); border-color: var(--pr-accent); color: #fff; box-shadow: none; }
.pr-land .btn--primary:hover, .pr-calc .btn--primary:hover { background: var(--pr-accent-dk); border-color: var(--pr-accent-dk); box-shadow: none; }
.pr-land .btn--ghost, .pr-calc .btn--ghost { background: #fff; border-color: var(--pr-field-line); color: var(--pr-ink); }
.pr-land .btn--ghost:hover, .pr-calc .btn--ghost:hover { border-color: var(--pr-accent); color: var(--pr-accent); }
/* Einheitliche Fokus-Ringe für neue interaktive Elemente (Tastaturbedienung) */
.pr-land .btn:focus-visible, .pr-calc .btn:focus-visible,
.pr-topbar__link:focus-visible, .pr-tariff__cta:focus-visible,
.pr-calcbox__body:focus-visible { outline: 2px solid var(--pr-accent); outline-offset: 2px; }
/* =========================================================
LANDINGPAGE (.pr-land)
========================================================= */
/* ---------- Topbar: WhatsApp · Telefon · E-Mail ---------- */
.pr-topbar { background: var(--pr-navy); color: rgba(255,255,255,.72); font-size: .85rem; }
.pr-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 42px; padding-block: .3rem; }
.pr-topbar__claim { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.pr-topbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pr-value); animation: pulse 2s infinite; }
.pr-topbar__links { display: flex; align-items: center; gap: .3rem; }
.pr-topbar__link { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.82); padding: .35rem .6rem; border-radius: 7px; font-weight: 600; }
.pr-topbar__link svg { width: 16px; height: 16px; flex: 0 0 auto; }
.pr-topbar__link:hover { color: #fff; background: rgba(255,255,255,.1); }
.pr-topbar__chat { color: rgba(255,255,255,.82); }
.pr-topbar__chat svg { color: var(--color-wa); }
.pr-topbar__chat:hover { background: rgba(255,255,255,.1); color: #fff; }
/* ---------- Hero / Einstieg ---------- */
.pr-hero { background: #fff; border-bottom: 1px solid var(--pr-line); padding-block: clamp(1.8rem, 4vw, 3rem) clamp(1.6rem, 4vw, 2.4rem); }
.pr-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.pr-eyebrow { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pr-accent); margin-bottom: .7rem; }
.pr-hero__text h1 { font-size: clamp(1.7rem, 3.6vw, 2.55rem); color: var(--pr-ink); margin-bottom: .5rem; }
.pr-hero__lead { color: var(--pr-ink-soft); font-size: 1.05rem; max-width: 48ch; margin-bottom: 1.1rem; }
.pr-usp { list-style: none; display: grid; gap: .55rem; margin: 0 0 1.4rem; }
.pr-usp li { display: flex; gap: .6rem; align-items: flex-start; font-size: .97rem; color: var(--pr-ink); }
.pr-usp__ico { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; background: rgba(190, 18, 60,.1); color: var(--pr-accent); display: grid; place-items: center; margin-top: 1px; }
.pr-usp__ico svg { width: 13px; height: 13px; }
.pr-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
/* ---------- Rechner-Einstiegsbox (Mini-Rechner-Optik) ---------- */
.pr-calcbox { background: #fff; border: 1px solid var(--pr-line); border-radius: 14px; box-shadow: var(--pr-shadow-card); overflow: hidden; }
.pr-calcbox__head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; background: var(--pr-navy); color: #fff; }
.pr-calcbox__ico { width: 40px; height: 40px; border-radius: 9px; background: rgba(255,255,255,.12); display: grid; place-items: center; flex: 0 0 auto; }
.pr-calcbox__ico svg { width: 22px; height: 22px; }
.pr-calcbox__head strong { display: block; font-size: 1.05rem; }
.pr-calcbox__head small { color: rgba(255,255,255,.7); font-size: .82rem; }
/* Body ist EIN Link (Vorschau-Launcher) – keine echten Eingaben, daher gehen keine Daten verloren */
.pr-calcbox__body { padding: 1.1rem 1.2rem 1.2rem; display: grid; gap: .75rem; color: inherit; text-decoration: none; }
.pr-calcbox__body:hover .pr-calcbox__go { background: var(--pr-accent-dk); border-color: var(--pr-accent-dk); }
.pr-mini-field { display: grid; gap: .3rem; }
.pr-mini-label { font-size: .8rem; font-weight: 700; color: var(--pr-ink-soft); }
.pr-mini-input { display: flex; align-items: center; gap: .5rem; border: 1.5px solid var(--pr-field-line); background: var(--pr-field); border-radius: var(--pr-radius-sm); padding: .62rem .7rem; min-height: 44px; }
.pr-mini-input svg { width: 16px; height: 16px; color: var(--pr-ink-soft); flex: 0 0 auto; }
.pr-mini-input .ph { font-size: .95rem; color: #98a2b3; }
.pr-mini-input input, .pr-mini-input select { border: none; background: transparent; font: inherit; font-size: .95rem; width: 100%; color: var(--pr-ink); padding: 0; }
.pr-mini-input input:focus, .pr-mini-input select:focus { outline: none; }
.pr-mini-input:focus-within { border-color: var(--pr-accent); background: #fff; box-shadow: 0 0 0 3px rgba(190, 18, 60,.12); }
.pr-mini-input--select { padding-right: .4rem; }
.pr-mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.pr-calcbox__go { margin-top: .15rem; }
.pr-calcbox__note { font-size: .78rem; color: var(--pr-ink-soft); margin: 0; padding: 0 1.2rem 1.15rem; line-height: 1.5; }
/* ---------- Fakten-Streifen ---------- */
.pr-factbar { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: clamp(1.4rem, 3vw, 2rem) 0 0; background: var(--pr-line); border: 1px solid var(--pr-line); border-radius: 12px; overflow: hidden; }
.pr-factbar li { background: #fff; padding: .9rem 1rem; text-align: center; }
.pr-factbar b { display: block; font-size: 1.25rem; color: var(--pr-ink); font-weight: 800; }
.pr-factbar span { font-size: .82rem; color: var(--pr-ink-soft); }
/* ---------- Sektionen ---------- */
.pr-section { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.pr-section--tint { background: var(--pr-tint); border-block: 1px solid var(--pr-line); }
.pr-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: clamp(1.2rem, 3vw, 1.8rem); flex-wrap: wrap; }
.pr-section__head h2 { font-size: clamp(1.4rem, 3vw, 2rem); color: var(--pr-ink); margin: 0; }
.pr-section__note { color: var(--pr-ink-soft); font-size: .9rem; max-width: 44ch; margin: 0; }
/* ---------- Fahrzeugklassen als Tarif-Tabelle ---------- */
.pr-tariff { border: 1px solid var(--pr-line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--pr-shadow); }
.pr-tariff__row { display: grid; grid-template-columns: 1.15fr 1.25fr .8fr 1.7fr .75fr auto; gap: 1rem; align-items: center; padding: .85rem 1.2rem; border-top: 1px solid var(--pr-line); font-size: .92rem; color: var(--pr-ink-soft); }
.pr-tariff__row:first-child { border-top: none; }
.pr-tariff__row--head { background: var(--pr-tint); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-ink-soft); }
.pr-tariff__row:not(.pr-tariff__row--head):hover { background: #fcfdff; }
.pr-tariff__name { display: flex; align-items: center; gap: .7rem; color: var(--pr-ink); }
.pr-tariff__name b { font-size: 1rem; font-weight: 800; }
.pr-tariff__ico { width: 92px; height: 58px; color: var(--pr-accent); flex: 0 0 auto; object-fit: contain; }
.pr-tariff__price { font-weight: 800; color: var(--pr-price); font-size: 1.02rem; white-space: nowrap; }
.pr-tariff__cta { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .85rem; color: var(--pr-accent); white-space: nowrap; padding: .42rem .8rem; border: 1.5px solid var(--pr-field-line); border-radius: 8px; }
.pr-tariff__cta:hover { border-color: var(--pr-accent); background: rgba(190, 18, 60,.06); color: var(--pr-accent-dk); }
.pr-tariff__foot { margin: 1rem 0 0; font-size: .9rem; color: var(--pr-ink-soft); }
.pr-tariff__foot a { font-weight: 700; color: var(--pr-accent); }
/* ---------- Ablauf (kompakt) ---------- */
.pr-flow { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.pr-flow li { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--pr-line); border-radius: 10px; padding: .7rem 1rem; font-weight: 700; font-size: .92rem; color: var(--pr-ink); flex: 1 1 0; min-width: 158px; }
.pr-flow__n { width: 26px; height: 26px; border-radius: 50%; background: var(--pr-value); color: var(--pr-navy); display: grid; place-items: center; font-size: .85rem; font-weight: 800; flex: 0 0 auto; }
/* ---------- Trust + FAQ (kompakt, unten) ---------- */
.pr-faqgrid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.pr-trust h2, .pr-faq h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--pr-ink); margin-bottom: 1rem; }
.pr-trust__list { list-style: none; display: grid; gap: .9rem; margin: 0 0 1.3rem; }
.pr-trust__list li { display: flex; gap: .7rem; align-items: flex-start; }
.pr-trust__ico { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: rgba(190, 18, 60,.1); color: var(--pr-accent); display: grid; place-items: center; margin-top: 2px; }
.pr-trust__ico svg { width: 14px; height: 14px; }
.pr-trust__list strong { display: block; color: var(--pr-ink); }
.pr-trust__list span { color: var(--pr-ink-soft); font-size: .92rem; }
.pr-faq .faq { margin: 0; }
/* ---------- Landing responsive ---------- */
@media (max-width: 980px) {
.pr-hero__grid { grid-template-columns: 1fr; }
.pr-faqgrid { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
.pr-tariff__row--head { display: none; }
.pr-tariff__row { grid-template-columns: 1fr; gap: .35rem; padding: 1rem 1.1rem 1.1rem; }
.pr-tariff__name { margin-bottom: .35rem; }
.pr-tariff__row span[data-th] { display: flex; justify-content: space-between; gap: 1rem; }
.pr-tariff__row span[data-th]::before { content: attr(data-th); font-weight: 700; color: var(--pr-ink-soft); }
.pr-tariff__cta { justify-content: center; margin-top: .6rem; padding: .65rem; }
}
@media (max-width: 860px) {
.pr-topbar__claim { display: none; }
.pr-topbar__inner { justify-content: center; }
}
@media (max-width: 600px) {
.pr-factbar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.pr-topbar__link:not(.pr-topbar__chat) .lbl { display: none; }
}
/* =========================================================
CALC-SEITE (.pr-calc)
========================================================= */
/* Kontaktleiste: WhatsApp-Button (Coral-Akzent) */
.pr-calc .calc-contact .cc-chat { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.pr-calc .calc-contact .cc-chat svg { color: var(--color-wa); }
.pr-calc .calc-contact .cc-chat:hover { background: rgba(255,255,255,.12); color: #fff; }
/* Intro-Streifen kompakt & weiß */
.pr-calc .calc-intro { background: #fff; border-bottom: 1px solid var(--pr-line); padding-block: clamp(1rem, 2.5vw, 1.5rem); }
.pr-calc .calc-intro h1 { font-size: clamp(1.3rem, 3vw, 1.85rem); color: var(--pr-ink); margin-bottom: .2rem; }
.pr-calc .calc-intro p { font-size: .9rem; color: var(--pr-ink-soft); }
.pr-calc .calc-intro .breadcrumb { margin-bottom: .4rem; font-size: .82rem; }
/* Fortschritt: oranger, kompakter, seriöser Stepper */
.pr-calc .stepper__dot { width: 34px; height: 34px; font-size: .9rem; border: 2px solid var(--pr-field-line); background: #fff; color: var(--pr-ink-soft); box-shadow: none; }
.pr-calc .stepper__item:not(:first-child)::before { top: 17px; height: 2px; background: var(--pr-field-line); }
.pr-calc .stepper__item.is-done .stepper__dot { background: var(--pr-value); border-color: var(--pr-value); color: #fff; box-shadow: none; }
.pr-calc .stepper__item.is-active .stepper__dot { background: var(--pr-accent); border-color: var(--pr-accent); color: #fff; box-shadow: none; }
.pr-calc .stepper__item.is-done::before,
.pr-calc .stepper__item.is-active::before { background: var(--pr-value); }
.pr-calc .stepper__label { font-size: .8rem; color: var(--pr-ink-soft); }
.pr-calc .stepper__item.is-active .stepper__label { color: var(--pr-accent); }
/* Formular-Container: sachliche Karten, flache Schatten */
.pr-calc .calc-group { border: 1px solid var(--pr-line); border-radius: 12px; box-shadow: var(--pr-shadow); padding: clamp(1.2rem, 3vw, 1.6rem); }
.pr-calc .calc-group__title { font-size: 1.05rem; }
/* Grüne Nummern-Kreise in den Abschnitts-Überschriften entfernt (Nummerierung steht oben im Stepper) */
.pr-calc .calc-group__title .n { display: none; }
/* Abschnitts-Subheads neutral & klar (Pink ist Aktionen vorbehalten) */
.pr-calc .field-subhead { color: var(--pr-ink); font-size: .8rem; letter-spacing: .05em; }
.pr-calc .calc-group__sep { background: var(--pr-line); }
.pr-calc .field-note { color: var(--pr-ink-soft); }
.pr-calc .wstep.is-active { animation: wstepIn .32s ease; }
/* Felder: hellgrau, dezenter Rahmen, kompakt */
.pr-calc .field label { font-size: .85rem; color: var(--pr-ink); }
.pr-calc .field input, .pr-calc .field select, .pr-calc .field textarea {
background: var(--pr-field); border: 1.5px solid var(--pr-field-line); border-radius: var(--pr-radius-sm);
padding: .7rem .8rem; font-size: .97rem;
}
.pr-calc .field input:focus, .pr-calc .field select:focus, .pr-calc .field textarea:focus {
border-color: var(--pr-accent); background: #fff; box-shadow: 0 0 0 3px rgba(190, 18, 60,.12);
}
/* Auswahl-/Optionskarten: sachlich. Aktiv = dezente Akzent-Border + leichter Hintergrund;
der Indikator ist die pinke Checkbox (siehe option-card__check), nicht ein grell pinker Rahmen. */
.pr-calc .option-card__inner { border: 1.5px solid var(--pr-field-line); border-radius: var(--pr-radius-sm); padding: .7rem .85rem; }
.pr-calc .option-card:has(input:checked) .option-card__inner { border-color: rgba(190, 18, 60,.42); background: rgba(190, 18, 60,.04); box-shadow: none; }
.pr-calc .option-card__price { color: var(--pr-price); }
/* Zusatzservices kompakt: Titel links, Preis rechts, kleiner grauer Hilfetext darunter */
.pr-calc .option-card--check .option-card__check-body h4 { width: 100%; justify-content: space-between; gap: .8rem; font-size: .95rem; }
.pr-calc .option-card--check .option-card__check-body .desc { font-size: .8rem; margin-top: .1rem; display: block; }
.pr-calc .option-card--check .option-card__inner { gap: .7rem; padding: .7rem .8rem; align-items: flex-start; }
.pr-calc .option-card--check .option-card__check { margin-top: .1rem; }
.pr-calc .option-card .opt-price { color: var(--pr-price); font-size: .9rem; margin-left: 0; }
/* Fahrzeugauswahl: kompakt & vergleichbar (tabellarisch) */
.pr-calc .veh-list { gap: .85rem; }
.pr-calc .veh-card__inner { border: 1.5px solid var(--pr-field-line); border-radius: 14px; padding: 1.15rem 1.25rem; gap: .95rem; }
.pr-calc .veh-card:not(.is-disabled):hover .veh-card__inner { border-color: rgba(190, 18, 60,.5); }
.pr-calc .veh-card:has(input:checked) .veh-card__inner { border-color: var(--pr-accent); background: rgba(190, 18, 60,.05); box-shadow: none; }
.pr-calc .veh-card__icon { color: var(--pr-ink-soft); }
.pr-calc .veh-card:has(input:checked) .veh-card__icon { color: var(--pr-accent); }
.pr-calc .veh-card__price { color: var(--pr-price); }
.pr-calc .veh-card__status.is-rec { background: var(--color-secondary-dark); color: #fff; }
.pr-calc .veh-card.is-disabled .veh-card__inner { background: var(--pr-field); }
/* Ergebnis-/Übersichtsbox: Frachttarif-Optik */
.pr-calc .result-card { border: 1px solid var(--pr-line); border-radius: 12px; box-shadow: var(--pr-shadow-card); }
.pr-calc .result-card__head { background: var(--pr-navy); color: #fff; padding: 1rem 1.2rem; }
.pr-calc .result-card__head h3 { font-size: 1.05rem; }
.pr-calc .result-fact { background: var(--pr-tint); border-color: var(--pr-line); }
.pr-calc .result-fact .f-ico { color: var(--pr-accent); }
.pr-calc .result-details { border-color: var(--pr-line); background: #fff; }
.pr-calc .result-details summary { color: var(--pr-ink-soft); }
.pr-calc .result-details summary:hover, .pr-calc .result-details[open] summary { color: var(--pr-ink); }
.pr-calc .sum-edit { color: var(--pr-accent); }
/* Preisbox „kräftig mit Verlauf": Gradient-Panel mit Glanz, große Summe (Count-up via JS).
Text-Shadow sichert die Lesbarkeit der weißen Schrift über dem Verlauf (AA). */
.pr-calc .price-box {
background: var(--pr-navy);
box-shadow: 0 8px 22px rgba(11,31,51,.20);
border-radius: 16px;
border-top: 3px solid var(--pr-accent); /* Coral-Akzentlinie */
padding: 1.35rem 1.3rem;
position: relative;
overflow: hidden;
}
.pr-calc .price-box > * { position: relative; }
.pr-calc .price-box .label { opacity: 1; font-weight: 700; letter-spacing: .01em; color: #fff; }
.pr-calc .price-box .vat-hint { color: #B8C4D0; }
.price-box .vat-hint--brutto { font-weight: 800; font-size: .98rem; color: #fff; margin-top: .35rem; }
/* Vorläufiger Schätzpreis-Hinweis: heller Pill auf der Akzentfläche, klar als „voraussichtlich" erkennbar */
.price-box .price-estimate {
margin-top: .5rem; display: flex; gap: .4rem; align-items: flex-start;
font-weight: 600; line-height: 1.35;
background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.30);
border-radius: 10px; padding: .45rem .6rem;
}
.price-box .price-estimate[hidden] { display: none; } /* display:flex überschreibt sonst [hidden] */
.pr-calc .price-box .price-amount {
font-size: clamp(2.7rem, 8vw, 3.6rem);
text-shadow: 0 2px 8px rgba(0,0,0,.20);
font-variant-numeric: tabular-nums;
transition: transform .25s ease;
}
.pr-calc .price-box.is-bumping .price-amount { transform: scale(1.04); }
.pr-calc .price-box .price-amount.is-text { font-size: 1.35rem; line-height: 1.4; padding-block: .5rem; }
/* Validierungs-Fehlerzustand wieder herstellen (rote Border gewinnt über Feld-Override) */
.pr-calc .field.has-error input,
.pr-calc .field.has-error select,
.pr-calc .field.has-error textarea { border-color: #dc2626; }
/* Honeypot-Feld (Spam-Schutz): für Menschen unsichtbar */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* ---------- Modern-Politur (Fortschritt · Felder · Karten · Ergebnis) ---------- */
/* Fortschritt: Verlaufs-Fortschritt zwischen den Schritten + Glow/Scale am aktiven Punkt */
.pr-calc .stepper__dot { transition: transform .25s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease; }
.pr-calc .stepper__item.is-done::before,
.pr-calc .stepper__item.is-active::before { background: var(--pr-value); }
.pr-calc .stepper__item.is-active .stepper__dot { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(190, 18, 60,.22); }
/* Felder: größere Touch-Flächen, runder, weichere Fokus-Effekte */
.pr-calc .field input, .pr-calc .field select, .pr-calc .field textarea {
border-radius: 10px; padding: .82rem .95rem; min-height: 46px;
transition: border-color .15s ease, box-shadow .2s ease, background .15s ease;
}
.pr-calc .field input:focus, .pr-calc .field select:focus, .pr-calc .field textarea:focus {
border-color: var(--pr-accent); background: #fff; box-shadow: 0 0 0 4px rgba(190, 18, 60,.15);
}
/* Auswahl-/Fahrzeugkarten: runder + sanfter Hover-Lift */
.pr-calc .option-card__inner { border-radius: 12px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.pr-calc .option-card:hover .option-card__inner { transform: translateY(-1px); }
.pr-calc .veh-card__inner { border-radius: 16px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.pr-calc .veh-card:not(.is-disabled):hover .veh-card__inner { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16,24,40,.08); }
.pr-calc .veh-card:has(input:checked) .veh-card__inner { box-shadow: none; }
/* Container & Ergebnisbox: modernere Tiefe */
.pr-calc .calc-group { border-radius: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.05), 0 10px 26px rgba(16,24,40,.05); }
.pr-calc .calc-group__title .n { box-shadow: none; }
.pr-calc .result-card { border-radius: 16px; box-shadow: 0 1px 3px rgba(16,24,40,.06), 0 18px 44px rgba(16,24,40,.09); }
.pr-calc .result-card__head { background: linear-gradient(135deg, #163B5C 0%, #0B1F33 100%); }
/* Calc responsive */
@media (max-width: 760px) {
.pr-calc .stepper__dot { width: 30px; height: 30px; }
.pr-calc .stepper__item:not(:first-child)::before { top: 15px; }
}
/* =========================================================
LOGIZAI-STIL · GLOBAL (ganze Website)
Layout/Typo/Komponenten im Stil von logizai.webflow.io,
aber mit der Team-Flamingo-Farbwelt: Akzent = Pink,
dunkle Sektionen = Navy, getönte Flächen = Pink-Tint.
Greift über die geteilten Klassen auf allen Seiten.
========================================================= */
/* ---------- Schrift: Manrope (global) ---------- */
:root {
--font: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--lz-dark: #0B1F33; /* einheitliches Marken-Navy für alle dunklen Flächen */
--lz-card-dark: #163B5C; /* Karten auf dunklem Grund */
--lz-radius: 22px; /* großzügige Rundungen */
}
body { letter-spacing: -.011em; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.03em; }
/* ---------- Typo-Skala: groß & fett ---------- */
.hero h1 { font-size: clamp(2.7rem, 6vw, 4.6rem); font-weight: 700; line-height: 1.03; letter-spacing: -.035em; }
.section__title { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 700; letter-spacing: -.035em; }
.page-hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.9rem); font-weight: 700; letter-spacing: -.035em; }
.section__lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.eyebrow {
font-size: .8rem; letter-spacing: .14em; border-radius: 999px;
background: rgba(190, 18, 60,.1); color: var(--color-primary);
}
/* ---------- Buttons: moderne Rundrechtecke ---------- */
.btn { border-radius: 12px; font-weight: 600; padding: .95rem 1.6rem; }
/* Primär-Button: dunkleres Marken-Pink für lesbaren weißen Text (Kontrast statt #BE123C) */
.btn--primary { background: var(--color-primary-dark); color: #fff; box-shadow: none; }
.btn--primary:hover { background: #9F1239; box-shadow: none; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.06rem; }
/* ---------- Header Typ 3: dunkle Hauptnavigation ---------- */
.navbar .nav { min-height: 68px; }
.nav__links a { font-weight: 600; }
/* Marke „Team Flamingo" weiß, „Team" bleibt pink (.brand__name b global) */
.navbar .brand, .navbar .brand:hover { color: #fff; }
.navbar .nav__links a { color: rgba(255,255,255,.82); }
.navbar .nav__links a:hover { background: rgba(255,255,255,.10); color: #fff; }
.navbar .nav__links a.is-active { color: var(--color-primary); background: rgba(190, 18, 60,.16); }
/* Hamburger-Icon (mobil) weiß */
.navbar .nav__toggle span,
.navbar .nav__toggle span::before,
.navbar .nav__toggle span::after { background: #fff; }
/* ---------- HERO (Startseite): hell, großer Text + Rundpanel ---------- */
/* Hero-Hintergrund vorerst komplett schlicht: kein Verlauf, kein Gittermuster */
.hero {
background: #fff;
color: var(--color-text);
}
.hero::after { content: none; }
.hero__inner { padding-block: clamp(2.25rem, 5vw, 4rem); } /* etwas kompakter */
.hero--compact .hero__inner { padding-block: clamp(1.5rem, 3.5vw, 2.8rem); } /* Seiten-Hero noch kompakter */
.hero h1 { color: var(--color-dark); margin-bottom: 1rem; }
.hero__sub { color: #5b616b; max-width: 46ch; }
.hero__visual { display: grid; place-items: center; }
/* Kleiner Anruf-Hinweis unter den CTAs (statt drittem Button) */
.hero__call { margin-top: .9rem; font-size: .92rem; color: var(--color-muted); }
.hero__call a { color: var(--color-text); font-weight: 700; text-decoration: none; }
.hero__call a:hover { color: var(--color-primary-dark); text-decoration: underline; }
/* Hero mit Foto-Hintergrund (z. B. Transport): dunkles Overlay links -> Text bleibt lesbar.
Bild wird per CSS-Variable --hero-photo aus der jeweiligen Seite gesetzt. */
/* Hintergrundbild + Overlay werden inline am Element gesetzt (siehe Hero.astro),
hier nur die Textfarben für gute Lesbarkeit auf dem dunklen Overlay. */
.hero--photo { color: #fff; }
.hero--photo h1 { color: #fff; }
.hero--photo .hero__sub { color: rgba(255,255,255,.9); }
.hero--photo .hero-trust li { color: rgba(255,255,255,.92); }
.hero--photo .hero-trust__ico { background: rgba(255,255,255,.16); color: #fff; }
.hero--photo .hero__call { color: rgba(255,255,255,.82); }
.hero--photo .hero__call a { color: #fff; }
/* ---------- Sektionen: großzügiger + dunkle Variante ---------- */
.section { padding-block: clamp(3.6rem, 8vw, 6.5rem); }
.section--tint { background: var(--color-bg); }
.section--dark { background: var(--lz-dark); color: #fff; position: relative; overflow: hidden; }
/* Farbverläufe (Glow) im dunklen Abschnitt entfernt – flaches Dunkel */
.section--dark::before { content: none; }
.section--dark > .container { position: relative; z-index: 1; }
.section--dark .section__title { color: #fff; }
.section--dark .section__lead { color: rgba(255,255,255,.72); }
.section--dark .eyebrow { background: rgba(190, 18, 60,.18); color: #FFB3BB; }
/* ---------- Karten: runder, weiche Tiefe, Hover-Lift ---------- */
.card {
border-radius: var(--lz-radius); padding: 2rem 1.9rem;
box-shadow: 0 1px 3px rgba(11,31,51,.05), 0 14px 34px rgba(11,31,51,.06);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(11,31,51,.14); border-color: rgba(190, 18, 60,.3); }
.card__ico { width: 58px; height: 58px; border-radius: 18px; }
.card__ico svg { width: 28px; height: 28px; }
.card h3 { font-size: 1.3rem; }
.section--dark .card { background: var(--lz-card-dark); border-color: rgba(255,255,255,.08); color: #fff; }
.section--dark .card h3 { color: #fff; }
.section--dark .card p { color: rgba(255,255,255,.66); }
.section--dark .card__ico { background: rgba(190, 18, 60,.16); color: #FFB3BB; }
/* ---------- Steps ---------- */
.step__num { border-radius: 50%; width: 56px; height: 56px; box-shadow: none; }
.section--dark .step h3 { color: #fff; }
.section--dark .step p { color: rgba(255,255,255,.66); }
.section--dark .step:not(:last-child)::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 8px, transparent 8px 16px); }
/* ---------- feature-list / split / visual-box ---------- */
.feature-list .chk { border-radius: 12px; width: 32px; height: 32px; }
.visual-box { border-radius: var(--lz-radius); }
/* ---------- Trust-Streifen ---------- */
.trust__item .ico { border-radius: 16px; }
/* ---------- CTA-Band: bold, modern ---------- */
.cta-band {
border-radius: 28px; padding: clamp(2.5rem, 6vw, 4.5rem);
background: var(--color-dark); /* keine Farbverläufe im Hintergrund – flaches Dunkel */
box-shadow: 0 30px 70px rgba(11,31,51,.25);
}
.cta-band h2 { font-size: clamp(2rem, 5vw, 3rem); }
.cta-band .btn--call { color: #fff; border-color: rgba(255,255,255,.5); }
/* ---------- Page-Hero (Subseiten) ---------- */
.page-hero {
background: var(--color-dark); /* keine Farbverläufe – flaches Dunkel */
padding-block: clamp(3rem, 7vw, 5rem);
}
/* Heller Page-Hero (Kontakt): kompletter Bereich weiß, dunkle Schrift,
Flamingo blendet ein (kein weißes Panel mehr nötig). */
.page-hero--light { background: #fff; color: var(--c-ink); }
.page-hero--light h1 { color: var(--color-dark); }
.page-hero--light p { color: var(--c-ink-soft); }
.page-hero--light .breadcrumb { color: var(--color-muted); }
.page-hero--light .breadcrumb a { color: var(--color-text); }
.page-hero--light .page-hero__media img { background: transparent; padding: 0; box-shadow: none; }
/* ---------- Kontakt-/Stat-/Value-Karten ---------- */
.contact-card, .form-wrap { border-radius: var(--lz-radius); }
.contact-card { transition: transform .2s ease, box-shadow .2s ease; }
.contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.contact-card .ico { border-radius: 18px; }
.value h3 .ico { border-radius: 12px; }
/* ---------- FAQ ---------- */
.faq__item { border-radius: 16px; }
.faq__q { font-weight: 600; }
/* ---------- Footer: moderner ---------- */
.site-footer { background: var(--lz-dark); padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem; }
.site-footer h4 { letter-spacing: .1em; }
/* ---------- Footer-Social-Reihe (optional, falls vorhanden) ---------- */
.footer-social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.footer-social a {
width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.1);
transition: background .15s ease, color .15s ease, transform .15s ease;
}
.footer-social a:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
.card:hover, .vehicle-card:hover, .contact-card:hover { transform: none; }
}
/* ---------- Logizai-Angleichung der Preisrechner-Seiten ---------- */
/* Rundere, erhabenere Elemente + größere Headline, damit Preisrechner-Landing
und Rechner zum globalen Logizai-Look passen (Funktion/Logik unberührt). */
.pr-land .btn, .pr-calc .btn { border-radius: 12px; }
.pr-land .pr-hero__text h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -.035em; }
.pr-land .pr-section__head h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.03em; }
.pr-land .pr-calcbox { border-radius: 22px; box-shadow: 0 24px 54px rgba(11,31,51,.12); }
.pr-land .pr-calcbox__head { border-radius: 22px 22px 0 0; }
.pr-land .pr-tariff { border-radius: 20px; box-shadow: 0 14px 34px rgba(11,31,51,.07); }
.pr-land .pr-factbar { border-radius: 18px; }
.pr-land .pr-flow li { border-radius: 14px; box-shadow: 0 6px 16px rgba(11,31,51,.05); }
.pr-land .pr-flow__n { box-shadow: none; }
.pr-land .faq__item { border-radius: 16px; }
.pr-land .pr-trust__ico { border-radius: 13px; }
.pr-calc .calc-group { border-radius: 18px; }
.pr-calc .result-card { border-radius: 20px; }
.pr-calc .calc-intro h1 { letter-spacing: -.03em; }
/* Calc-Wizard: kompaktes Sektions-Padding (globales .section-Padding nicht durchschlagen lassen) */
.pr-calc .section { padding-block: clamp(1.4rem, 3.5vw, 2.4rem); }
/* Primär-Buttons der Preisrechner-Seiten ebenfalls auf den kontraststärkeren Pink-Ton */
.pr-land .btn--primary, .pr-calc .btn--primary { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.pr-land .btn--primary:hover, .pr-calc .btn--primary:hover { background: #9F1239; border-color: #9F1239; }
/* Dunkle Sektionen: Kennzahlen-Beschriftung & Hinweistext lesbar halten */
.section--dark .stat span { color: rgba(255,255,255,.72); }
.section--dark .muted { color: rgba(255,255,255,.6); }
/* Schritt-Wechsel: neue Felder sanft einblenden (nach „Weiter"/„Zurück") */
@keyframes wstepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ---------- PLZ/Ort-Combobox (Autocomplete) ---------- */
.plz-combo { position: relative; }
.plz-combo__list {
position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
margin: 0; padding: .35rem; list-style: none;
background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
box-shadow: 0 16px 38px rgba(16,24,40,.16); max-height: 264px; overflow: auto;
}
.plz-combo__list[hidden] { display: none; }
.plz-combo__opt { display: flex; gap: .55rem; align-items: baseline; padding: .55rem .7rem; border-radius: 8px; cursor: pointer; font-size: .95rem; }
.plz-combo__opt b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); }
.plz-combo__opt span { color: var(--color-muted); }
.plz-combo__opt.is-active, .plz-combo__opt:hover { background: rgba(190, 18, 60,.1); }
.plz-combo__empty { padding: .55rem .7rem; color: var(--color-muted); font-size: .9rem; }
/* Landing-Schnellrechner: Dropdown darf aus der Box ragen */
.pr-land .pr-calcbox { overflow: visible; }
.pr-mini-input.plz-combo { position: relative; }
.pr-mini-input.plz-combo .plz-combo__list { top: calc(100% + 8px); }
/* Zeit-Bereich (von/bis) in den Termin-Feldern des Rechners */
.pr-calc .time-range { display: flex; align-items: center; gap: .5rem; }
.pr-calc .time-range input, .pr-calc .time-range select { flex: 1 1 0; min-width: 0; }
.pr-calc .time-range span { color: var(--pr-ink-soft); font-size: .9rem; flex: 0 0 auto; }
/* ---------- Wochenend-/Feiertags-Hinweis am Abholdatum ---------- */
.day-note {
margin-top: 1rem;
display: flex; gap: .7rem; align-items: flex-start;
background: linear-gradient(135deg, #FFF1EC, #FFF8F5);
border: 1.5px solid rgba(232, 95, 63, .35);
border-left: 4px solid #0F8A5F;
border-radius: 12px;
padding: .9rem 1.05rem;
font-size: .95rem; line-height: 1.5; color: var(--c-ink);
animation: pop .3s ease;
}
.day-note[hidden] { display: none; }
.day-note svg { width: 22px; height: 22px; color: #0C6E4A; flex: 0 0 auto; margin-top: 2px; }
.day-note b { color: var(--color-price); }
/* ---------- Datums-/Zeitfelder: größer & eleganter (Markenakzente) ---------- */
.pr-calc .field input[type="date"] {
cursor: pointer;
accent-color: var(--color-primary); color-scheme: light;
}
.pr-calc .field input[type="date"]:hover { border-color: var(--color-primary); }
.pr-calc .field input[type="date"]::-webkit-calendar-picker-indicator {
width: 26px; height: 26px; cursor: pointer; opacity: 1; border-radius: 6px;
background: url('data:image/svg+xml;utf8,') center/22px 22px no-repeat;
transition: transform .15s ease;
}
.pr-calc .field input[type="date"]:hover::-webkit-calendar-picker-indicator { transform: scale(1.08); }
.pr-calc .time-range select { cursor: pointer; }
/* ---------- Eigener Dropdown-Kalender (tf-dp) ---------- */
/* Desktop (feiner Zeiger): nativen Indikator verstecken, Icon aufs Feld zeichnen */
@media (pointer: fine) {
.pr-calc .field input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.pr-calc .field input[type="date"] {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;
padding-right: 44px;
}
}
.tf-dp-host { position: relative; }
.tf-dp {
position: absolute; left: 0; z-index: 70;
width: 352px; max-width: min(94vw, 372px);
background: #fff; border: 1px solid var(--color-border);
border-radius: 18px; padding: 1rem;
box-shadow: 0 10px 24px rgba(11,31,51,.10), 0 28px 60px rgba(11,31,51,.18);
animation: pop .22s ease;
}
.tf-dp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .65rem; }
.tf-dp__head strong { font-size: 1.1rem; letter-spacing: -.01em; }
.tf-dp__nav {
width: 40px; height: 40px; border-radius: 11px; border: 1.5px solid var(--color-border);
background: #fff; cursor: pointer; font-size: 1.45rem; line-height: 1; color: var(--c-ink);
display: grid; place-items: center; padding-bottom: 3px;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tf-dp__nav:hover { border-color: var(--color-primary); color: var(--color-primary); background: rgba(190, 18, 60,.06); }
.tf-dp__wdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.tf-dp__wdays span { text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); padding: .35rem 0; }
.tf-dp__wdays span.is-we { color: #0C6E4A; }
.tf-dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.tf-dp__day {
position: relative; height: 44px; border: none; background: none; border-radius: 11px;
font: inherit; font-size: 1rem; font-weight: 600; color: var(--c-ink);
display: grid; place-items: center;
transition: background .12s ease, color .12s ease;
}
button.tf-dp__day { cursor: pointer; }
button.tf-dp__day:hover { background: rgba(190, 18, 60,.12); color: var(--color-primary-dark); }
.tf-dp__day.is-special { background: #FFF1EC; }
.tf-dp__day.is-special::after {
content: ""; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
width: 5px; height: 5px; border-radius: 50%; background: #0F8A5F;
}
button.tf-dp__day.is-special:hover { background: #FFE3D8; color: var(--color-price); }
.tf-dp__day.is-today { box-shadow: inset 0 0 0 2px rgba(190, 18, 60,.55); }
.tf-dp__day.is-selected { background: var(--color-primary); color: #fff; }
.tf-dp__day.is-selected::after { background: #fff; }
.tf-dp__day.is-disabled { opacity: .3; }
.tf-dp__legend {
display: flex; align-items: center; gap: .5rem; margin-top: .75rem; padding-top: .75rem;
border-top: 1px dashed var(--color-border); font-size: .82rem; color: var(--c-ink-soft);
}
.tf-dp__legend .dot { width: 7px; height: 7px; border-radius: 50%; background: #0F8A5F; flex: 0 0 auto; }
/* ---------- Einheitliche Feldhöhe im Rechner ----------
Alle einzeiligen Eingaben (Text, PLZ/Ort, Datum, Land- und
Zeit-Dropdowns) exakt gleich hoch – Textareas bleiben mehrzeilig. */
.pr-calc .field input:not([type="checkbox"]):not([type="radio"]),
.pr-calc .field select,
.pr-calc .time-range input,
.pr-calc .time-range select {
height: 48px; min-height: 48px;
padding-top: 0; padding-bottom: 0;
font-size: .97rem; line-height: 1.2;
}
/* ---------- Versicherungskosten-Anzeige (Fracht-Schritt) ---------- */
.vers-cost {
display: flex; align-items: center;
height: 48px; padding: 0 .95rem;
background: #FFF7FA;
border: 1.5px dashed rgba(190, 18, 60, .45);
border-radius: 10px;
font-size: .97rem; font-weight: 700; color: var(--color-primary-dark);
}
/* ---------- Übersicht in der Sidebar + Preis-Disclaimer ---------- */
.result-overview .sum-block:first-child { padding-top: 0; }
.result-overview .sum-block:last-child { border-bottom: 0; }
.price-disclaimer { font-size: .76rem; color: var(--c-ink-soft); line-height: 1.55; margin: .6rem 0 0; }
.result-notes { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--color-border); }
.result-notes__label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; color: var(--c-ink-soft); margin-bottom: .3rem; }
.result-notes .price-disclaimer { margin: 0; }
.sum-block__value .sum-sub { color: var(--c-ink-soft); font-size: .82rem; }
/* ---------- Sidebar-Struktur: CTA oben, Karte, Distanz, Preis-Footer ---------- */
.pr-calc .calc { grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); } /* Übersicht ≈ 34 % */
/* Mobil: Übersicht unter das Formular – überschreibt gezielt den 2-Spalten-Grid
der Rechner-Seite (sonst gewinnt die spezifischere .pr-calc-Regel über die
generische .calc{1fr}-Media-Query, und die Übersicht ragt seitlich heraus). */
@media (max-width: 980px) {
.pr-calc .calc { grid-template-columns: 1fr; }
.pr-calc .result { position: static; }
}
.result-cta { margin-bottom: .9rem; }
.result-title { text-align: center; font-size: 1.2rem; margin: .2rem 0 1rem; }
.result-divider { height: 1px; background: var(--color-border); margin: .9rem 0; }
.result-dist { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .92rem; color: var(--c-ink-soft); }
.result-dist b { color: var(--c-ink); font-size: 1rem; text-align: right; }
.result-foot { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
/* =========================================================
POLISH v2 · ruhigere Oberfläche, Checkout-Übersicht, Hierarchie
========================================================= */
/* Übersicht rechts: Optionszeilen im Checkout-Stil (Label links, Preis rechts) */
.sum-opt { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .16rem 0; font-size: .9rem; color: var(--c-ink-soft); }
.sum-opt > b { color: var(--c-ink); font-weight: 700; white-space: nowrap; }
.sum-opt .sum-sub { font-size: .76rem; }
.sum-note { font-size: .82rem; color: var(--c-ink-soft); margin-top: .4rem; line-height: 1.5; }
/* Mehr Weißraum, dezente Trennlinien, ruhige „Bearbeiten"-Links */
.pr-calc .sum-block { border-color: var(--pr-line); padding: .9rem 0; }
.pr-calc .sum-block__value { line-height: 1.55; }
.pr-calc .sum-edit { color: var(--pr-ink-soft); font-weight: 600; }
.pr-calc .sum-edit:hover { color: var(--pr-accent); }
.pr-calc .result-title { text-align: left; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: .1rem 0 1rem; }
.pr-calc .result-divider { background: var(--pr-line); margin: 1rem 0; }
.pr-calc .result-dist { font-size: .86rem; }
.pr-calc .result-dist b { font-size: .95rem; }
.pr-calc .result-foot { border-top-color: var(--pr-line); }
.pr-calc .result-notes { border-top-color: var(--pr-line); }
/* Sekundäre Aktionen (WhatsApp/Telefon/E-Mail): erreichbar, aber dezenter als der Pink-CTA */
.pr-calc .result-actions { gap: .5rem; }
.pr-calc .result-actions .btn { font-size: .92rem; padding: .74rem 1rem; }
/* Mehr Luft zwischen den Formularabschnitten; Maße als zusammengehörige Gruppe */
.pr-calc .wstep.is-active { gap: 1.35rem; }
.pr-calc #fracht-dims { gap: .6rem; }
/* Pflicht-Sternchen dezenter */
.pr-calc .field label .req { color: var(--pr-ink-soft); font-weight: 600; }
/* Hilfetexte ruhig & lesbar */
.pr-calc .hint, .pr-calc .field .hint { font-size: .82rem; color: var(--pr-ink-soft); line-height: 1.5; }
.pr-calc .wstep__desc { font-size: .9rem; color: var(--pr-ink-soft); }
/* ---------- Auffällige Sicherheits-Warnungen (Abwahl von Schutzleistungen) ---------- */
.day-note--danger {
background: linear-gradient(135deg, #FEF2F2, #FFF5F2);
border-color: rgba(220, 38, 38, .55);
border-left: 5px solid #DC2626;
box-shadow: 0 6px 18px rgba(220, 38, 38, .14);
animation: pop .3s ease, danger-pulse 1.4s ease-in-out 2 .3s;
}
.day-note--danger svg { color: #DC2626; }
.day-note--danger b { color: #B91C1C; }
.day-note--danger .gut { color: #0F766E; }
.day-note--danger .storno-tab { display: block; margin-top: .6rem; padding: .55rem .7rem; background: #fff; border: 1px solid rgba(220, 38, 38, .25); border-radius: 8px; }
@keyframes danger-pulse {
0%, 100% { box-shadow: 0 6px 18px rgba(220, 38, 38, .14); }
50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, .18), 0 6px 22px rgba(220, 38, 38, .28); }
}
/* ---------- Storno-Vergleich (Stornoschutz) – klar & sachlich ---------- */
.storno-compare {
margin-top: 1rem; background: #fff;
border: 1.5px solid var(--color-border); border-radius: 14px;
padding: 1.1rem; box-shadow: var(--shadow);
animation: pop .3s ease;
}
.storno-compare[hidden] { display: none; }
.storno-compare__head { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .9rem; }
.storno-compare__head svg { width: 22px; height: 22px; color: #D97706; flex: 0 0 auto; margin-top: 2px; }
.storno-compare__head b { font-size: 1.02rem; }
.storno-compare__head span { color: var(--c-ink-soft); font-size: .9rem; line-height: 1.5; }
.storno-grid {
display: grid; grid-template-columns: 1.25fr 1fr 1fr;
border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden;
font-size: .88rem;
}
.storno-grid > div { padding: .65rem .7rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; justify-content: center; }
.storno-grid > div:nth-child(-n+3) { border-top: 0; }
.storno-grid__corner { background: #fff; }
.storno-grid__col { font-weight: 800; text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; line-height: 1.35; }
.col-ohne, .cell-ohne { background: #FEF2F2; }
.col-mit, .cell-mit { background: #F0FDF4; }
.col-ohne, .cell-ohne { color: #B91C1C; }
.col-mit, .cell-mit { color: #15803D; }
.cell-ohne, .cell-mit { align-items: center; font-weight: 800; font-size: 1.02rem; }
.storno-grid__label { background: #fff; color: var(--c-ink); font-weight: 700; line-height: 1.35; }
.storno-grid__label small { color: var(--c-ink-soft); font-weight: 500; font-size: .76rem; }
.storno-compare__save { margin: .85rem 0; text-align: center; font-size: .92rem; color: var(--c-ink); }
.storno-compare__save b { color: #15803D; }
/* ---------- Fahrzeugkarten: Kurztext + Detail-Spalten ---------- */
.veh-card__text { margin: 0; font-size: .92rem; color: var(--c-ink-soft); line-height: 1.6; }
.veh-card__details { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; padding-top: .95rem; border-top: 1px solid var(--c-line); }
.veh-card__detail > b {
display: block; font-size: .74rem; font-weight: 800;
text-transform: uppercase; letter-spacing: .06em;
color: var(--c-ink); margin-bottom: .5rem;
}
@media (max-width: 600px) { .veh-card__details { grid-template-columns: 1fr; } }
/* ---------- Frachtart-Auswahl (Sendungsschritt) ---------- */
.fracht-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .2rem; }
/* Kundentyp-Auswahl (Firma/Privat): zweispaltig, nutzt die fracht-card-Optik */
.kundentyp-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: .2rem; }
@media (max-width: 420px) { .kundentyp-types { grid-template-columns: 1fr; } }
/* Rechnungsadresse übernehmen (wie Abholung / wie Zustellung / Andere): dreispaltig */
.rechnung-quelle { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .2rem; }
@media (max-width: 560px) { .rechnung-quelle { grid-template-columns: 1fr; } }
.fracht-card { position: relative; cursor: pointer; }
.fracht-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fracht-card__inner {
height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
text-align: center;
border: 1.5px solid var(--pr-field-line, var(--c-line)); border-radius: 12px;
padding: .95rem .7rem; background: #fff;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
.fracht-card__ico { width: 30px; height: 30px; color: var(--c-ink-soft); }
.fracht-card__ico svg { width: 100%; height: 100%; display: block; }
.fracht-card__label { font-weight: 700; font-size: .9rem; line-height: 1.25; color: var(--c-ink); }
.fracht-card:hover .fracht-card__inner { border-color: var(--pr-ink-soft); }
/* Aktive Karte: dezente Akzent-Border + sehr leichter Hintergrund, KEIN Glow */
.fracht-card:has(input:checked) .fracht-card__inner { border-color: var(--color-primary); background: rgba(190, 18, 60,.045); box-shadow: none; }
.fracht-card:has(input:checked) .fracht-card__ico { color: var(--color-primary); }
.fracht-card:has(input:focus-visible) .fracht-card__inner { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Kleiner Check-Indikator oben rechts (Auswahl nicht nur über Farbe erkennbar) */
.fracht-card::after {
content: ""; position: absolute; top: 8px; right: 8px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/11px no-repeat;
opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease;
}
.fracht-card:has(input:checked)::after { opacity: 1; transform: scale(1); }
/* Kundentyp-/Quelle-Karten: Icon + Label nebeneinander (wirkt wie ein Segment-Schalter) */
.kundentyp-types .fracht-card__inner,
.rechnung-quelle .fracht-card__inner { flex-direction: row; gap: .55rem; padding: .85rem .9rem; }
.kundentyp-types .fracht-card__ico,
.rechnung-quelle .fracht-card__ico { width: 24px; height: 24px; flex: 0 0 auto; }
.kundentyp-types .fracht-card__label,
.rechnung-quelle .fracht-card__label { font-size: .95rem; }
.rechnung-quelle .fracht-card__label { font-size: .88rem; }
/* Servicelevel: drei gleich große Karten nebeneinander, Zuschlag als eigene Zeile */
.servicelevel-types { grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.servicelevel-types .fracht-card { height: 100%; }
.servicelevel-types .fracht-card__inner {
flex-direction: column; align-items: flex-start; justify-content: flex-start;
text-align: left; gap: .3rem; padding: 1rem .95rem 0.9rem;
}
.servicelevel-types .fracht-card__ico { width: 26px; height: 26px; color: var(--pr-ink-soft); margin-bottom: .2rem; }
.servicelevel-types .fracht-card__ico--accent { color: var(--color-primary); }
.servicelevel-types .fracht-card__label { font-size: .98rem; }
.servicelevel-types .sl-card__desc { font-size: .82rem; line-height: 1.35; color: var(--pr-ink-soft); }
/* margin-top:auto schiebt die Preiszeile an den unteren Rand (alle Karten gleich hoch) */
.servicelevel-types .sl-card__price {
margin-top: auto; align-self: stretch; padding-top: .6rem;
border-top: 1px solid var(--pr-line); font-weight: 800; font-size: .85rem;
}
.servicelevel-types .sl-card__price--add { color: var(--pr-price); } /* Zuschlag: sachliches Nachtblau */
.servicelevel-types .sl-card__price--free { color: var(--color-secondary); } /* Kein Zuschlag: positives Grün */
@media (max-width: 880px) { .servicelevel-types { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .servicelevel-types { grid-template-columns: 1fr; } }
/* Auto-Servicelevel: Karten sind reine Anzeige (folgen der Abholzeit), nicht klickbar */
.servicelevel-types--auto .fracht-card { cursor: default; }
.servicelevel-types--auto .fracht-card:hover .fracht-card__inner { border-color: var(--pr-field-line); }
/* Fahrzeug-Vorauswahl in Schritt 1 (kompakte Zeilen, teilt Auswahl mit Schritt 3) */
.veh-step1 { display: grid; gap: .6rem; }
.veh-pre {
position: relative; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: .85rem;
border: 1.5px solid var(--pr-field-line); border-radius: 12px; padding: .65rem .85rem; background: #fff; cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.veh-pre input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.veh-pre__ico { width: 64px; flex: 0 0 auto; display: grid; }
.veh-pre__ico img { width: 100%; height: auto; display: block; border-radius: 6px; }
.veh-pre__ico svg { width: 100%; height: auto; color: var(--pr-ink-soft); }
.veh-pre__main { min-width: 0; }
.veh-pre__name { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-weight: 700; font-size: .95rem; color: var(--pr-ink); }
.veh-pre__meta { display: block; font-size: .8rem; color: var(--pr-ink-soft); margin-top: .15rem; }
.veh-pre__price { font-weight: 800; font-size: .92rem; color: var(--pr-price); white-space: nowrap; }
.veh-pre:hover { border-color: var(--pr-ink-soft); }
.veh-pre.is-selected { border-color: var(--color-primary); background: rgba(190, 18, 60,.045); }
.veh-pre.is-disabled { background: var(--color-bg); border-style: dashed; cursor: not-allowed; }
.veh-pre.is-disabled .veh-pre__name, .veh-pre.is-disabled .veh-pre__meta, .veh-pre.is-disabled .veh-pre__price { color: var(--pr-ink-soft); }
.veh-pre__status { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.veh-pre__status.is-sel { color: var(--color-primary); }
.veh-pre__status.is-no { color: #B45309; }
.veh-pre__status svg { width: 13px; height: 13px; }
.veh-pre:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.fracht-infobox {
background: var(--color-bg-soft); border: 1px solid var(--c-line);
border-left: 3px solid var(--color-primary); border-radius: 10px;
padding: .8rem .95rem; margin: .9rem 0 0;
font-size: .88rem; color: var(--c-ink); line-height: 1.55;
}
.fracht-infobox[hidden] { display: none; }
.opt-price { font-weight: 700; color: var(--color-primary); font-size: .82rem; white-space: nowrap; margin-left: .35rem; }
.opt-price--soft { color: var(--c-ink-soft); font-weight: 600; }
/* Frachtart „Sonstige": selbst auszufüllende Felder dezent als „bitte eintragen" markieren,
solange leer – ruhig (gestrichelte neutrale Border), NICHT rot. Rot bleibt echten Fehlern vorbehalten. */
.fracht-selfinput .field input:placeholder-shown,
.field.fracht-selfinput input:placeholder-shown {
border-style: dashed;
border-color: var(--pr-field-line);
background: var(--pr-tint);
}
.fracht-selfinput .field:has(input:placeholder-shown) > label::after,
.field.fracht-selfinput:has(input:placeholder-shown) > label::after {
content: "selbst eintragen";
margin-left: .45rem;
color: var(--pr-ink-soft);
font-size: .7rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
/* Sobald ausgefüllt oder bei echtem Fehler: normale bzw. Fehler-Optik gewinnt */
.fracht-selfinput .field.has-error input,
.field.fracht-selfinput.has-error input { border-style: solid; }
@media (max-width: 760px) { .fracht-types { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .fracht-types { grid-template-columns: 1fr; } }
/* ---------- AGB-Volltext (Kontaktseite) ---------- */
.agb-prose { max-width: 880px; }
.agb-prose h3 { margin: 2.2rem 0 .7rem; font-size: 1.18rem; scroll-margin-top: 96px; }
.agb-prose p { font-size: .95rem; line-height: 1.7; color: var(--c-ink); margin-bottom: .9rem; }
.agb-prose ul { margin: 0 0 .9rem; padding-left: 1.35rem; display: grid; gap: .35rem; }
.agb-prose li { font-size: .95rem; line-height: 1.6; color: var(--c-ink); }
.agb-prose h4 { margin: 1.7rem 0 .55rem; font-size: 1.05rem; scroll-margin-top: 96px; }
.agb-prose h5 { margin: 1.25rem 0 .45rem; font-size: .98rem; line-height: 1.2; letter-spacing: -.02em; scroll-margin-top: 96px; }
/* ---------- Cookie-Consent-Banner ---------- */
.consent-banner {
position: fixed;
inset: auto 0 0 0;
z-index: 1200;
padding: 1rem;
display: flex;
justify-content: center;
pointer-events: none;
}
.consent-banner__box {
pointer-events: auto;
width: 100%;
max-width: 680px;
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 1.4rem 1.5rem;
}
.consent-banner__title { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; margin-bottom: .45rem; }
.consent-banner__text { color: var(--c-ink-soft); font-size: .92rem; line-height: 1.55; margin: 0 0 1rem; }
/* Link muss auch ohne Farbsehen erkennbar sein (WCAG 1.4.1/1.4.3) */
.consent-banner__text a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }
.consent-banner__text a:hover { color: var(--c-brand-dk); }
.consent-banner__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.consent-banner__actions .btn { flex: 1 1 0; padding: .75rem 1.2rem; font-size: .95rem; }
.consent-banner__toggle {
background: none; border: none; padding: 0; margin-top: .7rem;
font: inherit; font-size: .85rem; font-weight: 600; color: var(--c-ink-soft);
text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.consent-banner__toggle:hover { color: var(--c-ink); }
.consent-banner__custom { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--c-line); display: grid; gap: .6rem; }
.consent-banner__custom[hidden] { display: none; }
.consent-banner__opt { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--c-ink); }
.consent-banner__opt input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.consent-banner__opt--static { color: var(--c-ink-soft); }
.consent-banner__custom .btn { justify-self: start; padding: .6rem 1.1rem; font-size: .9rem; }
/* ---------- Ehrliche Trust-Elemente (junges Unternehmen) ---------- */
/* Text-Kacheln im Stats-Band – statt Kennzahlen */
.stats--trust .stat b { font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.3; margin-bottom: .4rem; }
.stats--trust .stat span { font-weight: 500; }
/* Checklisten-Karten der "Warum Team Flamingo"-Sektion */
.trust-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; max-width: 920px; margin-inline: auto; }
.trust-point {
display: flex; align-items: center; gap: .8rem;
background: var(--c-surface); border: 1px solid var(--c-line);
border-radius: var(--radius-sm); padding: .95rem 1.15rem; font-weight: 600;
}
.trust-point .chk {
flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
background: rgba(15, 138, 95,.12); color: var(--color-accent);
display: grid; place-items: center;
}
.trust-point .chk svg { width: 16px; height: 16px; }
@media (max-width: 700px) { .trust-points { grid-template-columns: 1fr; } }
/* Abstrakte Trust-Karte mit Routenlinie – statt Stock- oder Fake-Bildern */
.trust-visual { position: relative; }
.trust-visual__route { width: 100%; max-width: 340px; height: 84px; margin-bottom: 1.1rem; display: block; }
.trust-visual__title { font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 .4rem; color: #fff; }
.trust-visual__sub { margin: 0 0 1.25rem; color: rgba(255,255,255,.78); font-size: .95rem; }
.trust-visual__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.trust-visual__chip {
display: inline-flex; align-items: center; gap: .45rem;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
border-radius: 999px; padding: .38rem .8rem;
font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.92);
}
.trust-visual__chip svg { width: 14px; height: 14px; color: var(--color-secondary); }
/* Kleingedrucktes unter Preis-Aussagen */
.fineprint { font-size: .9rem; color: var(--c-ink-soft); }
@media (max-width: 560px) {
.consent-banner { padding: .6rem; }
.consent-banner__box { padding: 1.1rem 1.15rem; }
.consent-banner__actions { flex-direction: column; }
}
/* =========================================================
PREISRECHNER – Mobile: Sticky-Preisleiste + Übersicht als Bottom-Sheet
Desktop unverändert (sticky Sidebar rechts). Erst <= 980px aktiv:
die rechte .result-Sidebar wird zum ausklappbaren Sheet, eine feste
Leiste am unteren Rand zeigt dauerhaft Preis + Haupt-Aktion.
========================================================= */
/* Greifer/Kopf des Sheets + Sticky-Leiste sind auf Desktop ausgeblendet */
.result__sheethead { display: none; }
.mbar { display: none; }
.pr-sheet-backdrop { display: none; }
@media (max-width: 980px) {
/* --- Sticky-Leiste unten: Preis links, CTA rechts --- */
.pr-calc .mbar {
display: flex; align-items: stretch; gap: .6rem;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
padding: .55rem .8rem calc(.55rem + env(safe-area-inset-bottom, 0px));
background: rgba(255,255,255,.96);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-top: 1px solid var(--pr-line);
box-shadow: 0 -6px 22px rgba(16,24,40,.1);
transform: translateY(0); transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.pr-calc .mbar.is-gone { display: none; }
/* Sheet offen -> Leiste nach unten ausblenden (Sheet hat eigene Aktionen) */
.pr-calc.pr-sheet-open .mbar { transform: translateY(110%); }
.mbar__summary {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
background: none; border: 0; padding: .2rem .25rem; cursor: pointer; text-align: left;
}
.mbar__price { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.mbar__label { font-size: .68rem; color: var(--pr-ink-soft); letter-spacing: .01em; }
.mbar__amount { font-size: 1.18rem; font-weight: 800; color: var(--pr-price); white-space: nowrap; }
.mbar__hint {
display: inline-flex; align-items: center; gap: .2rem;
font-size: .72rem; font-weight: 700; color: var(--pr-accent);
}
.mbar__chev { width: 15px; height: 15px; transition: transform .25s ease; }
.pr-calc.pr-sheet-open .mbar__chev { transform: rotate(180deg); }
.mbar__cta { flex: 0 0 auto; align-self: center; padding: .82rem 1.25rem; font-size: .98rem; white-space: nowrap; }
/* --- Rechte Sidebar wird zum Bottom-Sheet --- */
.pr-calc .result {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
margin: 0; padding: .35rem 1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
background: var(--pr-tint);
border-top-left-radius: 20px; border-top-right-radius: 20px;
box-shadow: 0 -16px 44px rgba(16,24,40,.26);
transform: translateY(110%); transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.pr-calc.pr-sheet-open .result { transform: translateY(0); }
/* Sheet-Kopf: Greifer + Titel + Schließen */
.pr-calc .result__sheethead {
display: flex; align-items: center; gap: .6rem;
position: sticky; top: 0; z-index: 1;
margin: 0 -1rem .4rem; padding: .55rem 1rem .55rem;
background: var(--pr-tint);
}
.result__grabber {
position: absolute; top: .4rem; left: 50%; transform: translateX(-50%);
width: 38px; height: 4px; border-radius: 999px; background: #C9D2DE;
}
.result__sheettitle { font-weight: 700; font-size: 1rem; color: var(--pr-ink); margin-top: .35rem; }
.result__close {
margin-left: auto; margin-top: .35rem; width: 34px; height: 34px; flex: 0 0 auto;
display: grid; place-items: center; border-radius: 9px;
background: #fff; border: 1px solid var(--pr-line); color: var(--pr-ink-soft); cursor: pointer;
}
.result__close:hover { color: var(--pr-ink); border-color: var(--pr-field-line); }
.result__close svg { width: 18px; height: 18px; }
/* --- Abdunkelung hinter dem Sheet --- */
.pr-calc .pr-sheet-backdrop {
display: block; position: fixed; inset: 0; z-index: 75;
background: rgba(11,31,51,.5);
opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.pr-calc.pr-sheet-open .pr-sheet-backdrop { opacity: 1; visibility: visible; }
.pr-calc.pr-sheet-open { overflow: hidden; }
/* Platz für die feste Leiste, damit der Footer frei bleibt */
.pr-calc .site-footer { padding-bottom: 76px; }
}
@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
.pr-calc .result, .pr-calc .mbar { transition: none; }
}
/* =========================================================
PREISRECHNER – Fahrzeugschritt (Schritt 3)
Kompakte Entscheidungskarten: Empfehlung zuerst, Details auf Klick.
========================================================= */
.veh-card { cursor: default; }
.veh-card__pick { display: block; cursor: pointer; }
.veh-card.is-disabled .veh-card__pick { cursor: not-allowed; }
/* kompakter: kleineres Icon, ruhigere Typo */
.pr-calc .veh-card__icon { width: 84px; max-width: 26%; color: var(--pr-ink-soft); }
.pr-calc .veh-card:has(input:checked) .veh-card__icon { color: var(--pr-accent); }
.pr-calc .veh-card__title { font-size: 1.06rem; }
.pr-calc .veh-card__price { font-size: 1.15rem; }
.pr-calc .veh-card .veh-card__inner { padding: 1.05rem 1.15rem; gap: .65rem; }
/* Kurz-Badges für schnellen Vergleich */
.veh-card__badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.veh-chip {
display: inline-flex; align-items: center; line-height: 1.1;
font-size: .75rem; font-weight: 600; color: var(--pr-ink-soft);
background: var(--pr-tint); border: 1px solid var(--pr-line);
border-radius: 999px; padding: .26rem .62rem;
}
/* Beschreibung auf max. 2 Zeilen begrenzen */
.pr-calc .veh-card__text {
font-size: .85rem; line-height: 1.45; margin: 0; color: var(--pr-ink-soft);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* „Auswählen"-Pille (sekundär); gewählt = gefüllt */
.veh-card__select {
justify-self: start; display: inline-flex; align-items: center; gap: .4rem;
font-size: .85rem; font-weight: 700; color: var(--pr-accent);
border: 1.5px solid var(--pr-accent); border-radius: 8px; padding: .42rem .9rem;
}
.veh-card__select svg { width: 15px; height: 15px; }
.pr-calc .veh-card:has(input:checked) .veh-card__select { background: var(--pr-accent); color: #fff; border-color: var(--pr-accent); }
/* Status „Knapp" + Empfehlungs-Rahmen */
.veh-card__status.is-tight { background: rgba(217,119,6,.14); color: #B45309; }
.pr-calc .veh-card.is-rec .veh-card__inner { border-color: rgba(190, 18, 60,.4); }
/* Nicht-passend: gedämpft + konkreter Grund als Liste */
.pr-calc .veh-card.is-disabled .veh-card__inner { background: var(--pr-tint); border-style: dashed; opacity: 1; }
.veh-card__reason { align-items: flex-start; color: #B45309; }
.veh-card__reason b { display: block; margin-bottom: .15rem; }
.veh-card__reason ul { margin: 0; padding-left: 1.05rem; font-weight: 600; }
/* einklappbare Detailliste (Beladung / Geeignet für) */
.veh-card__more { margin-top: .15rem; }
.veh-card__more > summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
font-size: .82rem; font-weight: 700; color: var(--pr-ink-soft); padding: .5rem .2rem;
}
.veh-card__more > summary::-webkit-details-marker { display: none; }
.veh-card__more > summary::after { content: "▾"; font-size: .85em; }
.veh-card__more[open] > summary::after { content: "▴"; }
.veh-card__more > summary:hover { color: var(--pr-accent); }
.pr-calc .veh-card__details { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.2rem; padding: .55rem .2rem .4rem; border-top: 0; }
@media (max-width: 600px) { .pr-calc .veh-card__details { grid-template-columns: 1fr; } }
/* Gruppen-Überschriften (Empfehlung / weitere / nicht passend) */
.veh-group { margin-top: 1.1rem; }
.veh-group__title {
font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
color: var(--pr-ink-soft); margin: 0 0 .55rem;
}
.veh-group--unfit { border: 1px solid var(--pr-line); border-radius: 12px; background: var(--pr-tint); padding: 0 .9rem; }
.veh-group--unfit > summary {
list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem;
font-size: .85rem; font-weight: 700; color: var(--pr-ink-soft); padding: .8rem .1rem;
}
.veh-group--unfit > summary::-webkit-details-marker { display: none; }
.veh-group--unfit > summary::after { content: "▾"; margin-left: auto; }
.veh-group--unfit[open] > summary::after { content: "▴"; }
.veh-group--unfit .veh-list { padding-bottom: .85rem; }
/* Hinweis „Maße/Gewicht fehlen" + Invalidierungs-Warnung */
.veh-hint, .veh-invalid {
display: flex; gap: .7rem; align-items: flex-start;
border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1.1rem; font-size: .9rem; line-height: 1.5;
}
.veh-hint { background: var(--pr-tint); border: 1px solid var(--pr-line); color: var(--pr-ink); }
.veh-hint svg { width: 20px; height: 20px; color: var(--pr-ink-soft); flex: 0 0 auto; margin-top: 1px; }
.veh-invalid { background: #FFF7ED; border: 1px solid #FED7AA; color: #7C2D12; }
.veh-invalid svg { width: 20px; height: 20px; color: var(--color-warn); flex: 0 0 auto; margin-top: 1px; }
.veh-invalid b { display: block; margin-bottom: .15rem; }
.veh-invalid p { margin: 0 0 .6rem; font-size: .86rem; }
.pr-calc .btn--sm { padding: .5rem 1rem; font-size: .9rem; }
/* display:flex/grid darf das [hidden]-Attribut nicht aushebeln (sonst immer sichtbar) */
.veh-hint[hidden], .veh-invalid[hidden], .veh-group[hidden], .veh-group--unfit[hidden] { display: none; }
/* =========================================================
PREISRECHNER-LANDING – Abschnitt „Neutrale Zustellung"
Optionale Leistung erklärt: kurzer Einstieg, Vorteile, Details auf Klick.
========================================================= */
.pr-neutral {
border: 1px solid var(--pr-line); border-radius: 16px; background: #fff;
box-shadow: var(--pr-shadow-card);
padding: clamp(1.4rem, 3vw, 2.1rem);
display: grid; gap: 1.3rem; max-width: 940px;
}
.pr-neutral__intro { display: flex; gap: 1.1rem; align-items: flex-start; }
.pr-neutral__ico {
flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px;
display: grid; place-items: center;
background: rgba(190, 18, 60,.1); color: var(--pr-accent);
}
.pr-neutral__ico svg { width: 27px; height: 27px; }
.pr-neutral__intro p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--pr-ink); max-width: 64ch; }
.pr-neutral__benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.4rem; }
.pr-neutral__benefits li { display: flex; gap: .7rem; align-items: center; font-size: .96rem; color: var(--pr-ink); }
.pr-neutral__chk {
flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
display: grid; place-items: center;
background: rgba(15, 138, 95,.12); color: var(--color-accent);
}
.pr-neutral__chk svg { width: 15px; height: 15px; }
.pr-neutral__more { border-top: 1px solid var(--pr-line); padding-top: 1.1rem; }
.pr-neutral__more > summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
font-size: .94rem; font-weight: 700; color: var(--pr-accent);
}
.pr-neutral__more > summary::-webkit-details-marker { display: none; }
.pr-neutral__more > summary::after { content: "▾"; font-size: .85em; transition: transform .2s ease; }
.pr-neutral__more[open] > summary::after { content: "▴"; }
.pr-neutral__more > summary:hover { color: var(--pr-accent-dk); }
.pr-neutral__more p { margin: .7rem 0 0; font-size: .94rem; line-height: 1.65; color: var(--pr-ink-soft); max-width: 64ch; }
.pr-neutral__cta { margin-top: .1rem; }
.pr-neutral__cta .btn { display: inline-flex; }
@media (max-width: 640px) {
.pr-neutral__benefits { grid-template-columns: 1fr; }
.pr-neutral__intro { gap: .85rem; }
.pr-neutral__ico { width: 44px; height: 44px; }
.pr-neutral__ico svg { width: 23px; height: 23px; }
}
/* ============================================================
HUB-STARTSEITE: Hero mit Service-Slider + Bausteine
============================================================ */
/* WhatsApp-Button in der Navigation (kompakt) */
.nav__wa { gap: .4rem; padding-inline: .95rem; }
.nav__wa .ico { width: 1.05em; height: 1.05em; }
@media (max-width: 1240px) { .nav__wa span { display: none; } .nav__wa { padding-inline: .7rem; } }
/* Full-Bleed-Hero (nach Foxstack „HeroFullBleedProjects"):
großes Bild im Hintergrund (wechselt je Leistung), Headline + Subline + CTA
oben, wechselnde Caption + nummerierte Leistungs-Boxen unten. */
.fbhero { position: relative; isolation: isolate; overflow: hidden; background: var(--color-dark); }
.fbhero__bg { position: absolute; inset: 0; z-index: 0; }
.fbhero__img {
position: absolute; inset: 0;
background-size: cover; background-position: center;
opacity: 0; transition: opacity .7s ease;
}
.fbhero__img.is-active { opacity: 1; }
/* Scrim: oben + unten abgedunkelt, damit Text auf jedem Bild lesbar bleibt */
.fbhero::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to bottom,
rgba(8,11,22,.78) 0%, rgba(8,11,22,.34) 26%,
rgba(8,11,22,.40) 56%, rgba(8,11,22,.92) 100%);
}
.fbhero__inner {
position: relative; z-index: 2;
min-height: clamp(600px, 88vh, 880px);
display: flex; flex-direction: column;
padding-block: clamp(2.5rem, 6vw, 4.5rem);
color: #fff;
}
/* Kopf: Headline + Subline */
.fbhero__head { flex: 1 1 auto; }
.fbhero__title { font-size: clamp(2.3rem, 6vw, 4.4rem); font-weight: 800; line-height: 1.03; letter-spacing: -.03em; color: #fff; margin: 0 0 1.1rem; max-width: 18ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.42), 0 1px 2px rgba(0,0,0,.28); }
.fbhero__sub { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: rgba(255,255,255,.9); max-width: 46ch; margin: 0 0 1.6rem; line-height: 1.55; text-shadow: 0 1px 16px rgba(0,0,0,.45); }
/* Unten: wechselnde Caption + nummerierte Boxen */
.fbhero__bottom { flex: 0 0 auto; margin-top: clamp(2rem, 5vw, 3.5rem); }
.fbhero__captions { position: relative; min-height: clamp(9rem, 13vw, 11rem); margin-bottom: 1.4rem; }
.fbhero__cap { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .4s ease; display: flex; flex-direction: column; gap: .3rem; }
/* aktive Caption gleitet sichtbar ein, damit der Wechsel klar auffällt */
.fbhero__cap.is-active { opacity: 1; pointer-events: auto; position: relative; animation: fbheroCapIn .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fbheroCapIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.fbhero__cap-eyebrow { font-size: .84rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary); }
.fbhero__cap-title { font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.fbhero__cap-text { margin: .15rem 0 0; max-width: 48ch; color: rgba(255,255,255,.86); font-size: clamp(.96rem, 1.4vw, 1.08rem); line-height: 1.5; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.fbhero__cap-text strong { color: #fff; font-weight: 700; } /* Schlüsselbegriff dicker hervorgehoben */
.fbhero__cap-link { color: #fff; font-weight: 600; font-size: 1.02rem; text-decoration: none; align-self: flex-start; margin-top: .55rem; border-bottom: 1px solid rgba(255,255,255,.45); transition: border-color .15s ease; }
.fbhero__cap-link:hover { border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .fbhero__cap.is-active { animation: none; } }
.fbhero__nav { display: flex; align-items: stretch; justify-content: space-between; gap: 1.2rem; }
.fbhero__projects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; flex: 1 1 auto; }
.fbhero__proj {
position: relative; /* Anker fuer den transluzenten Ghost-Index */
width: 100%; height: 100%; text-align: left; cursor: pointer; font: inherit; color: #fff;
display: flex; align-items: center; gap: .85rem;
padding: 1.05rem 1.2rem; border-radius: 14px;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
backdrop-filter: blur(6px);
transition: background .15s ease, border-color .15s ease;
}
.fbhero__proj:hover { background: rgba(255,255,255,.15); }
.fbhero__proj.is-active { background: rgba(255,255,255,.94); border-color: transparent; color: var(--color-dark); }
/* Index-Ziffer: steht im Flex-Fluss links vom Icon, dank align-items:center
vertikal mittig. flex:0 0 auto -> behaelt ihre Breite. */
.fbhero__num {
position: relative; z-index: 1; flex: 0 0 auto;
font-size: 2rem; font-weight: 800; line-height: 1;
letter-spacing: -.02em; font-variant-numeric: tabular-nums;
opacity: .15; pointer-events: none;
transition: opacity .15s ease, color .15s ease;
}
.fbhero__proj.is-active .fbhero__num { color: var(--color-primary); opacity: .22; }
.fbhero__proj-ico { position: relative; z-index: 1; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.fbhero__proj.is-active .fbhero__proj-ico { background: rgba(190, 18, 60,.14); color: var(--color-primary-dark); }
.fbhero__proj-ico svg { width: 22px; height: 22px; }
.fbhero__proj-text { position: relative; z-index: 1; display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.fbhero__proj-text b { font-size: 1.04rem; text-transform: uppercase; letter-spacing: .04em; }
.fbhero__proj-text small { font-size: .82rem; opacity: .72; }
/* Service-Karten: Subzeile */
.card__sub { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .03em; color: var(--color-primary-dark); text-transform: uppercase; margin: -.15rem 0 .55rem; }
@media (max-width: 640px) {
.fbhero__projects { grid-template-columns: 1fr; }
}
/* ============================================================
ÜBER-UNS – persönliche Inhaber-Karte + reduzierte Prinzipien
============================================================ */
.owner-card {
align-self: center; /* nicht auf volle Hero-Höhe strecken */
width: 100%; max-width: 380px; text-align: left;
background: var(--color-surface);
border: 1px solid var(--c-line); border-radius: 20px;
box-shadow: 0 24px 60px -22px rgba(11,31,51,.5);
padding: 1.2rem 1.2rem 1.35rem; overflow: hidden;
}
.owner-card__photo {
aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 1.05rem; border-radius: 14px;
background: linear-gradient(160deg, #eef2f7, #dfe6ee);
}
.owner-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.owner-card__placeholder {
height: 100%; display: grid; place-content: center; justify-items: center; gap: .55rem;
color: var(--color-muted); border: 1px dashed var(--color-border-strong); border-radius: inherit;
}
.owner-card__placeholder svg { width: 48px; height: 48px; opacity: .5; }
.owner-card__placeholder span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* Textfarben explizit – sonst gewinnt `.page-hero p` (weiss) auf der weissen Karte */
.owner-card .owner-card__name { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.15; color: var(--color-text); }
.owner-card .owner-card__role { margin: .15rem 0 0; font-size: .92rem; font-weight: 600; color: var(--color-primary); }
.owner-card .owner-card__loc { margin: .55rem 0 0; display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; color: var(--c-ink-soft); }
.owner-card__loc svg { width: 15px; height: 15px; flex: 0 0 auto; }
.owner-card .owner-card__quote {
margin: 1rem 0 1.25rem; padding-left: .95rem; border-left: 3px solid var(--color-primary);
font-size: .98rem; line-height: 1.55; color: var(--c-ink);
}
.owner-card__actions { display: flex; gap: .6rem; }
.owner-card__actions .btn { flex: 1 1 0; padding-inline: .85rem; }
/* Prinzipien-Panel (3) – verbunden, kleine Inline-Icons statt schwebender Kacheln */
.principles {
display: grid; grid-template-columns: 1fr; margin-top: 1.75rem;
background: var(--color-surface); border: 1px solid var(--c-line);
border-radius: var(--radius); overflow: hidden;
}
.principle { padding: 1.4rem 1.5rem; }
.principle + .principle { border-top: 1px solid var(--c-line); }
.principle__head { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.principle__ico { width: 21px; height: 21px; color: var(--color-primary); flex: 0 0 auto; }
.principle h3 { margin: 0; font-size: 1.08rem; }
.principle p { margin: 0; color: var(--c-ink-soft); }
@media (min-width: 760px) {
.principles { grid-template-columns: repeat(3, 1fr); }
.principle + .principle { border-top: 0; border-left: 1px solid var(--c-line); }
}
/* „So arbeiten wir" – aufgeräumte 2-Spalten-Liste, keine Template-Nummern */
.workway { display: grid; grid-template-columns: 1fr; column-gap: 3rem; margin-top: 1rem; }
@media (min-width: 760px) { .workway { grid-template-columns: 1fr 1fr; } }
.workway__item { padding: 1.15rem 0; border-top: 1px solid var(--c-line); }
.workway__item h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.workway__item p { margin: 0; color: var(--c-ink-soft); }
/* Abschluss-Band: kleiner Standort-Hinweis unter den Buttons */
.cta-band__note { margin: 1.1rem 0 0; font-size: .85rem; color: rgba(255,255,255,.62); }
/* Über-uns Hero: reiner Text, zentriert (kein Personen-Card) */
.about-intro { max-width: 720px; margin: 0 auto; text-align: left; }
.about-intro p { text-align: left; }
.about-intro .about-intro__sign { margin-top: 1.4rem; font-weight: 700; color: var(--color-primary); }
/* Team / Mannschaft – Foto + Name + Rolle zentriert, gerundete Quadrate (KEINE Kreise) */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.75rem, 5vw, 3.5rem); margin-top: 2rem; }
.team-member { width: 190px; margin: 0; text-align: center; }
.team-member__photo {
width: 160px; height: 160px; margin: 0 auto 1rem; border-radius: 22px; overflow: hidden;
background: linear-gradient(160deg, #eef2f7, #dfe6ee); border: 1px solid var(--c-line);
}
.team-member__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-member__ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--color-muted); }
.team-member__ph svg { width: 50px; height: 50px; opacity: .5; }
.team-member__name { margin: 0; font-size: 1.05rem; font-weight: 700; }
.team-member__role { margin: .2rem 0 0; font-size: .85rem; color: var(--c-ink-soft); }