/* ============================================================================
SALEH MOTORCARS · TRUST CORPORATE
Driven by ui-ux-pro-max: pattern "Trust & Authority + Conversion".
Style: Conversion-Optimized minimalism. Single primary CTA per section.
Palette: Automotive/Car-Dealership preset.
Type: Lexend (display) + Source Sans 3 (body) + JetBrains Mono (data).
============================================================================ */
:root {
/* Semantic tokens, mirroring the recommended automotive palette */
--primary: #0F172A;
--primary-soft: #1E293B;
--on-primary: #FFFFFF;
--secondary: #334155;
--accent: #C8102E; /* Saleh's brand red */
--accent-deep: #8E0820;
--on-accent: #FFFFFF;
--background: #F8FAFC;
--surface: #FFFFFF;
--foreground: #0F172A;
--muted: #E9EDF1;
--muted-strong: #CBD5E1;
--muted-fg: #64748B;
--border: #E2E8F0;
--border-strong: #CBD5E1;
--ring: rgba(15,23,42,.12);
--success: #16A34A;
--serif: 'Lexend', system-ui, -apple-system, sans-serif;
--sans: 'Source Sans 3', system-ui, -apple-system, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 14px;
--shadow-sm: 0 1px 2px 0 rgba(15,23,42,.05);
--shadow: 0 1px 3px 0 rgba(15,23,42,.08), 0 1px 2px -1px rgba(15,23,42,.06);
--shadow-md: 0 4px 8px -2px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04);
--shadow-lg: 0 12px 24px -8px rgba(15,23,42,.10), 0 4px 10px -4px rgba(15,23,42,.06);
--shadow-xl: 0 24px 48px -16px rgba(15,23,42,.18);
--gutter: clamp(20px, 4vw, 56px);
--rhythm: clamp(64px, 8vw, 120px);
--t: 180ms cubic-bezier(.4,0,.2,1);
--t-q: 120ms cubic-bezier(.4,0,.2,1);
}
/* ─── Foundation reset ──────────────────────────────────────────────────── */
html, body { background: var(--background); color: var(--foreground); }
body, body.atelier {
font-family: var(--sans);
font-feature-settings: 'tnum', 'kern';
font-size: 16px;
line-height: 1.55;
background: var(--background);
background-image: none;
letter-spacing: 0;
}
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
a { color: var(--primary); text-decoration: none; transition: color var(--t-q); }
a:hover { color: var(--accent); }
h1, h2, h3, h4, h5, h6,
.atelier-h1, .atelier-h2, .hero-h1, .kap-h2, .wiz-q, .err-num, .err-h1, .hero-h1-state {
font-family: var(--serif);
font-weight: 600;
color: var(--foreground);
letter-spacing: -0.02em;
text-transform: none;
text-shadow: none;
}
p, li, span, label, input, select, textarea, button, dd, dt, summary, blockquote {
font-family: var(--sans);
}
em, i { font-style: italic; }
strong, b { font-weight: 700; }
/* Kill the old legacy hero / atelier ornament classes */
.hero { display: none !important; }
.hero-foot, .hero-foot .ast, .hero-light, .hero-star { all: unset; }
/* ─── TAPE — thin top status bar ────────────────────────────────────────── */
.tape {
background: var(--primary);
color: rgba(255,255,255,.85);
border: 0;
height: 30px;
font-family: var(--mono);
position: relative;
display: flex;
align-items: center;
padding: 0 var(--gutter);
}
.tape::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 0 3px rgba(22,163,74,.20);
animation: salehLive 2.6s ease-in-out infinite;
flex-shrink: 0;
}
.tape::after { display: none; }
.tape-mark { display: none; }
.tape-text { color: rgba(255,255,255,.85); margin-left: 10px; }
.tape-line {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255,255,255,.85);
font-weight: 500;
}
@keyframes salehLive {
0%, 100% { box-shadow: 0 0 0 3px rgba(22,163,74,.20); }
50% { box-shadow: 0 0 0 6px rgba(22,163,74,.05); }
}
/* ─── NAV — corporate trust ─────────────────────────────────────────────── */
/* NAV — dark, matching the hero. Logo shown at full size; the PNG already
contains the SALEH MOTORCARS wordmark, so we don't add another via CSS. */
.nav {
background: var(--primary);
border-bottom: 1px solid rgba(255,255,255,.06);
padding: 8px var(--gutter);
position: sticky;
top: 0;
z-index: 80;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 24px;
}
.brand-nav {
display: inline-flex; align-items: center; gap: 12px;
text-decoration: none;
min-width: 0;
/* Reset the solid black box the base template draws around the wordmark */
background: transparent;
width: auto;
height: auto;
overflow: visible;
padding: 0;
border: 0;
}
.brand-logo {
height: 88px;
width: auto;
flex-shrink: 0;
background: transparent;
object-fit: contain;
border-radius: 0;
padding: 0;
box-shadow: none;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
display: block;
}
/* The logo PNG itself is the brand mark — don't append another wordmark */
.brand-nav::after { content: none; }
@media (max-width: 880px) {
/* Float the nav over the hero. It's fixed so it stays reachable, but
auto-hides while scrolling down (so it doesn't loom over the form)
and slides back in the moment the user scrolls up. main.js toggles
.is-hidden / .is-floating on scroll. */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
gap: 10px;
padding: 4px 14px;
padding-top: calc(4px + env(safe-area-inset-top, 0px));
background: transparent;
border-bottom: 0;
transition: transform 0.25s ease, background-color 0.25s ease, backdrop-filter 0.25s ease;
will-change: transform;
}
.nav.is-hidden { transform: translateY(-100%); }
.nav.is-floating {
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.brand-logo { height: 52px; }
/* Tape is decorative + redundant with the drawer/footer location list */
.tape { display: none; }
/* Hero now starts at the top of the viewport — give it room to clear the
floating nav so the eyebrow chip doesn't ghost behind the logo */
.atelier-statement { padding-top: clamp(96px, 14vw, 120px); }
}
@media (max-width: 420px) {
.nav { padding: 4px 12px; padding-top: calc(4px + env(safe-area-inset-top, 0px)); }
.brand-logo { height: 44px; }
}
/* Nav links on the dark bar — light grey text, accent on hover */
.nav-links a {
color: rgba(255,255,255,.72);
}
.nav-links a:hover { color: #fff; }
.nav-links a::after { background: var(--accent); }
.nav-dropdown-trigger { color: rgba(255,255,255,.72); }
/* Dropdown popup stays light (it's a floating panel, not part of nav surface) */
.nav-dropdown-menu {
background: var(--surface);
border: 1px solid var(--border);
}
/* Phone CTA (desktop only). Hidden on tablet & below. */
.nav-cta {
background: var(--accent);
color: #fff;
box-shadow: 0 8px 22px -8px rgba(200,16,46,.55);
}
.nav-cta:hover {
background: var(--accent-deep);
box-shadow: 0 12px 28px -10px rgba(200,16,46,.65);
}
@media (max-width: 880px) {
.nav-cta { display: none !important; }
.nav { grid-template-columns: auto 1fr auto; }
}
/* Burger (mobile only) — white bars on the dark bar */
.nav-burger {
display: none;
width: 38px; height: 38px;
align-items: center;
justify-content: center;
flex-direction: column;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.16);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--t);
padding: 0;
gap: 4px;
}
@media (max-width: 420px) {
.nav-burger { width: 36px; height: 36px; }
}
.nav-burger:hover { border-color: var(--accent); background: rgba(255,255,255,.10); }
.nav-burger span {
display: block;
width: 18px; height: 1.5px;
background: #fff;
margin: 0;
transition: all var(--t);
border-radius: 1px;
}
@media (max-width: 880px) {
.nav-burger { display: inline-flex; }
.nav-links { display: none; }
}
/* Tape sits ABOVE the dark nav — keep it visually distinct via thinner profile */
.tape { background: var(--graphite, #0a0d1a); }
.nav-links { gap: 28px; align-items: center; }
.nav-links a {
font-family: var(--sans);
font-size: 14.5px;
font-weight: 500;
letter-spacing: 0;
color: var(--muted-fg);
padding: 8px 0;
position: relative;
text-transform: none;
}
.nav-links a:hover { color: var(--foreground); }
.nav-links a::after { display: none; }
.nav-dropdown-trigger {
font-family: var(--sans);
font-size: 14.5px;
font-weight: 500;
color: var(--muted-fg);
}
.nav-dropdown-menu {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 6px;
margin-top: 8px;
}
.nav-dropdown-menu a {
font-family: var(--sans);
font-size: 14.5px;
font-weight: 500;
padding: 9px 14px;
color: var(--foreground);
border-radius: var(--radius-sm);
display: block;
}
.nav-dropdown-menu a:hover { background: var(--muted); color: var(--accent); }
.nav-cta {
background: var(--accent);
color: #fff;
border: 0;
border-radius: var(--radius);
padding: 10px 18px;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
transition: background var(--t), transform var(--t), box-shadow var(--t);
box-shadow: var(--shadow);
}
.nav-cta:hover {
background: var(--accent-deep);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.nav-cta::after { content: ""; }
/* ─── HERO (atelier-statement) — Trust positioning ──────────────────────── */
.atelier-statement {
position: relative;
padding: clamp(72px, 9vw, 130px) var(--gutter) clamp(56px, 7vw, 100px);
background-color: var(--primary);
color: var(--on-primary);
overflow: hidden;
isolation: isolate;
}
/* Photo layer — sits behind the text, slightly desaturated for tone control */
.atelier-statement::before {
content: "";
position: absolute; inset: 0;
background-image: url("/assets/hero-bg.jpg");
background-size: cover;
background-position: center 55%;
background-repeat: no-repeat;
filter: saturate(.85) contrast(1.05);
z-index: -2;
}
/* Overlay layer — darker on the left (where the headline sits), softer on the right.
Vignettes top + bottom so the photo bleeds into the chrome cleanly. */
.atelier-statement::after {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(60% 45% at 0% 0%, rgba(200,16,46,.22), transparent 70%),
radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.2px),
linear-gradient(96deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.78) 38%, rgba(15,23,42,.52) 65%, rgba(15,23,42,.35) 100%),
linear-gradient(180deg, rgba(15,23,42,.55) 0%, transparent 18%, transparent 72%, rgba(15,23,42,.85) 100%);
background-size: 100% 100%, 28px 28px, 100% 100%, 100% 100%;
background-repeat: no-repeat, repeat, no-repeat, no-repeat;
pointer-events: none;
z-index: -1;
}
@media (max-width: 1080px) {
/* Mobile/tablet: lighter overlay so the cars actually show.
Heavier at the very top behind the eyebrow chip + headline (for contrast),
opens up through the middle so the car lineup is visible,
darkens again at the bottom for smooth handoff to the wizard form. */
.atelier-statement::after {
background-image:
radial-gradient(60% 45% at 0% 0%, rgba(200,16,46,.20), transparent 70%),
radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.2px),
linear-gradient(180deg,
rgba(15,23,42,.78) 0%,
rgba(15,23,42,.55) 22%,
rgba(15,23,42,.30) 50%,
rgba(15,23,42,.55) 78%,
rgba(15,23,42,.85) 100%);
background-size: 100% 100%, 28px 28px, 100% 100%;
}
/* Bring the cars up into the visible portion of the hero (behind the headline) */
.atelier-statement::before {
background-position: center 45%;
filter: saturate(.9) contrast(1.1) brightness(1.05);
}
}
@media (max-width: 560px) {
/* Phone: cars sit slightly higher so they peek out behind the typewriter line */
.atelier-statement::before {
background-position: center 40%;
filter: saturate(.9) contrast(1.15) brightness(1.1);
}
}
.atelier-statement-rule { display: none; }
.atelier-statement-inner {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Two-column hero: text on left, wizard panel on right */
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
gap: clamp(36px, 5vw, 80px);
align-items: start;
}
@media (max-width: 1080px) {
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
.hero-form { max-width: 720px; }
}
.hero-text { min-width: 0; }
.hero-form { min-width: 0; position: relative; }
@media (min-width: 1081px) {
.hero-form { position: sticky; top: 96px; }
}
.atelier-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
margin-bottom: clamp(28px, 4vw, 44px);
padding: 6px 14px 6px 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 99px;
backdrop-filter: blur(8px);
}
.atelier-eyebrow-num {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
background: var(--accent);
border-radius: 50%;
font-family: var(--sans);
font-style: normal;
font-size: 10px;
font-weight: 700;
color: #fff;
letter-spacing: 0;
}
.atelier-eyebrow-num::before { content: "✓"; }
.atelier-eyebrow-num { font-size: 0; }
.atelier-eyebrow-num::before {
font-size: 11px;
line-height: 1;
}
.atelier-eyebrow-text {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255,255,255,.78);
padding: 0;
}
.atelier-eyebrow-text::before { display: none; }
.atelier-h1 {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(40px, 5.6vw, 78px);
line-height: 1.02;
letter-spacing: -0.028em;
color: #fff;
margin: 0 0 clamp(14px, 1.8vw, 22px);
max-width: 18ch;
display: block;
}
.atelier-h1 .hero-h1-row { display: block; }
.atelier-h1 em {
font-style: normal;
color: var(--accent);
font-weight: 700;
letter-spacing: -0.024em;
font-variation-settings: normal;
white-space: nowrap;
}
/* Typewriter line — secondary headline beneath the H1 */
.atelier-h1-typewriter-line {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.2;
color: rgba(255,255,255,.86);
margin: 0 0 clamp(22px, 3vw, 34px);
letter-spacing: -0.018em;
}
.hero-typewriter-prefix {
font-family: var(--serif);
font-weight: 400;
color: rgba(255,255,255,.55);
margin-right: 6px;
font-style: italic;
}
/* Typewriter rotating word — secondary line under the H1 */
.hero-typewriter {
display: inline-block;
color: var(--accent);
font-family: var(--serif);
font-weight: 700;
font-style: normal;
font-variation-settings: normal;
min-width: 0.5ch;
letter-spacing: -0.018em;
will-change: contents;
}
.hero-cursor {
display: inline-block;
width: 3px;
height: 0.85em;
background: var(--accent);
vertical-align: -0.06em;
margin-left: 4px;
border-radius: 1px;
box-shadow: 0 0 12px rgba(200,16,46,.55);
animation: heroCursorBlink 1.05s steps(2, start) infinite;
}
@keyframes heroCursorBlink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-cursor { animation: none; opacity: 1; }
}
/* Sub-headline — calm reassurance under the H1 */
.atelier-h1-subline {
font-family: var(--sans);
font-weight: 400;
font-size: clamp(15px, 1.3vw, 19px);
line-height: 1.6;
color: rgba(255,255,255,.78);
margin: 0 0 clamp(28px, 4vw, 44px);
max-width: 52ch;
letter-spacing: 0;
}
.atelier-h1-subline strong {
font-family: var(--sans);
font-weight: 600;
color: #fff;
}
/* Legacy faint subline classes (still referenced by state.html) — kept as a fallback */
.atelier-h1 .hero-light, .atelier-h1-faint {
display: block;
font-family: var(--sans);
font-weight: 400;
font-size: clamp(15px, 1.3vw, 19px);
line-height: 1.6;
color: rgba(255,255,255,.78);
margin-top: 16px;
letter-spacing: 0;
}
/* When the rotating word is long (e.g. "Unfallauto"), allow row to break on small screens */
@media (max-width: 520px) {
.atelier-h1 .hero-h1-row { white-space: normal; }
}
/* Legacy two-column statement-foot — no longer used in new hero, kept for safety */
.atelier-statement-foot { display: none; }
.atelier-statement-body {
font-family: var(--sans);
font-weight: 400;
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.65;
color: rgba(255,255,255,.80);
max-width: 52ch;
letter-spacing: 0;
font-variation-settings: normal;
}
.atelier-statement-body strong {
font-family: var(--sans);
font-weight: 700;
font-style: normal;
color: #fff;
font-variation-settings: normal;
}
.atelier-statement-body .ast {
display: inline;
padding: 0;
background: transparent !important;
color: var(--accent) !important;
font-family: var(--sans);
font-weight: 700;
font-size: 1em;
margin-right: 2px;
}
.atelier-spec {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
margin: 0; padding: 0;
border: 0;
}
.atelier-spec.atelier-spec-2col {
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid rgba(255,255,255,.10);
border-radius: var(--radius);
background: rgba(255,255,255,.03);
overflow: hidden;
}
.atelier-spec.atelier-spec-2col > div {
padding: 16px 20px !important;
border-right: 1px solid rgba(255,255,255,.10) !important;
}
.atelier-spec.atelier-spec-2col > div:last-child { border-right: 0 !important; }
@media (max-width: 520px) {
.atelier-spec.atelier-spec-2col { grid-template-columns: 1fr; }
.atelier-spec.atelier-spec-2col > div {
border-right: 0 !important;
border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.atelier-spec.atelier-spec-2col > div:last-child { border-bottom: 0 !important; }
}
.atelier-spec > div {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0;
border: 0 !important;
}
.atelier-spec > div:nth-child(odd),
.atelier-spec > div:nth-child(even) { padding: 0; border: 0 !important; }
.atelier-spec dt {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
font-weight: 500;
}
.atelier-spec dd {
font-family: var(--serif);
font-weight: 500;
font-size: 16px;
letter-spacing: -0.008em;
color: #fff;
margin: 0;
font-variation-settings: normal;
}
.atelier-cta { display: none; } /* primary CTA now lives inside the wizard */
/* Secondary CTA — phone link below the spec card */
.hero-secondary-cta { margin-top: clamp(20px, 2.6vw, 28px); }
.hero-phone {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 14px 20px 14px 16px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.12);
border-radius: var(--radius);
color: #fff;
text-decoration: none;
transition: background var(--t), border-color var(--t), transform var(--t);
}
.hero-phone:hover {
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.22);
transform: translateY(-1px);
color: #fff;
}
.hero-phone-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
background: rgba(200,16,46,.16);
border: 1px solid rgba(200,16,46,.35);
border-radius: var(--radius-sm);
color: var(--accent);
font-size: 17px;
flex-shrink: 0;
}
.hero-phone-text { display: flex; flex-direction: column; gap: 2px; }
.hero-phone-num {
font-family: var(--serif);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.01em;
color: #fff;
}
.hero-phone-hint {
font-family: var(--sans);
font-size: 12px;
font-weight: 400;
color: rgba(255,255,255,.60);
letter-spacing: 0;
}
/* ─── Universal Section Scaffold ────────────────────────────────────────── */
.atelier-section, .kap {
position: relative;
padding: var(--rhythm) var(--gutter);
background: var(--background);
border-top: 1px solid var(--border);
}
.atelier-section::before, .kap::before { display: none; }
.kap-dark, .atelier-section.is-dark {
background: var(--primary);
color: rgba(255,255,255,.85);
border-top: 0;
}
.atelier-section-head, .kap-head {
max-width: 1100px;
margin: 0 auto clamp(40px, 5vw, 64px);
}
.atelier-eyebrow-text {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-fg);
font-weight: 500;
padding: 0;
}
.atelier-eyebrow-text::before { display: none; }
.atelier-section .atelier-eyebrow,
.kap .label-tag, .kap .tag-inv {
display: inline-flex; align-items: center; gap: 10px;
background: transparent;
border: 0;
padding: 0;
margin-bottom: 20px;
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-fg);
font-weight: 500;
position: relative;
border-radius: 0;
}
.atelier-section .atelier-eyebrow::before,
.kap .label-tag::before, .kap .tag-inv::before {
content: "";
display: inline-block;
width: 24px; height: 2px;
background: var(--accent);
border-radius: 2px;
}
.kap-dark .tag-inv, .kap-dark .label-tag {
color: rgba(255,255,255,.65);
}
.atelier-h2, .kap-h2 {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(32px, 4.6vw, 56px);
line-height: 1.08;
letter-spacing: -0.025em;
color: inherit;
max-width: 22ch;
text-transform: none;
}
.atelier-h2 em, .kap-h2 em, .kap-h2 .hl {
font-style: normal;
color: var(--accent);
font-weight: 700;
font-variation-settings: normal;
}
.kap-dark .kap-h2 { color: #fff; }
.atelier-lede, .kap-sub {
font-family: var(--sans);
font-weight: 400;
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.55;
color: var(--muted-fg);
margin-top: 16px;
max-width: 60ch;
letter-spacing: 0;
font-variation-settings: normal;
}
.kap-dark .kap-sub { color: rgba(255,255,255,.72); }
/* ─── WIZARD (atelier-section-wizard) ───────────────────────────────────── */
.atelier-section-wizard {
background: var(--background);
padding: var(--rhythm) var(--gutter);
border-top: 1px solid var(--border);
}
.atelier-section-wizard .atelier-section-head {
max-width: 1100px; margin: 0 auto clamp(28px, 4vw, 40px);
}
.wizard {
max-width: 720px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: clamp(28px, 4vw, 48px);
position: relative;
}
.wizard::before { display: none; }
.instrument {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
margin: 0 0 28px;
background: linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.02));
border: 1px solid var(--border);
border-radius: var(--radius);
position: relative;
color: var(--foreground);
box-shadow: none;
}
.instrument-icon {
width: 32px; height: 32px;
color: var(--accent);
flex-shrink: 0;
}
.instrument-icon line { animation: instrumentTick 4s linear infinite; transform-origin: 22px 25px; }
@keyframes instrumentTick { to { transform: rotate(360deg); } }
.instrument-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.instrument-eyebrow {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--muted-fg);
font-weight: 500;
}
.instrument-headline {
font-family: var(--serif);
font-weight: 600;
font-style: normal;
font-size: 15.5px;
letter-spacing: -0.01em;
color: var(--foreground);
font-variation-settings: normal;
}
.instrument-pip {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--success);
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(22,163,74,.18);
animation: salehLive 2.6s ease-in-out infinite;
}
.wiz-header { border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 24px; }
.wiz-step {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-fg);
font-weight: 500;
}
.wiz-dots span {
background: var(--muted-strong);
width: 7px; height: 7px;
border-radius: 50%;
transition: all var(--t);
}
.wiz-dots span.on {
background: var(--accent);
transform: scale(1.3);
box-shadow: 0 0 0 4px rgba(200,16,46,.16);
}
.wiz-q {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(22px, 2.6vw, 30px);
line-height: 1.18;
letter-spacing: -0.018em;
color: var(--foreground);
margin-bottom: 8px;
text-transform: none;
}
.wiz-help { color: var(--muted-fg); font-size: 15px; }
.wiz-fine { color: var(--muted-fg); font-size: 13px; line-height: 1.55; margin-top: 12px; }
.field span {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--foreground);
margin-bottom: 6px;
}
.field input, .field select, .field textarea {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
font-family: var(--sans);
font-size: 15px;
color: var(--foreground);
height: 48px;
transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.field textarea { height: auto; min-height: 96px; padding: 12px 14px; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: 0;
border-color: var(--accent);
background: var(--surface);
box-shadow: 0 0 0 3px rgba(200,16,46,.14);
}
/* Condition cards — wizard step 3. The markup is
The base CSS styles `.cond span`, so we override the span. */
.cond {
position: relative;
cursor: pointer;
display: block;
background: transparent;
border: 0;
padding: 0;
}
.cond input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.cond span {
display: block;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 18px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--muted-fg);
transition: all var(--t);
box-shadow: var(--shadow-sm);
}
.cond span b {
display: block;
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
font-style: normal;
color: var(--foreground);
letter-spacing: -0.012em;
margin-bottom: 4px;
font-variation-settings: normal;
text-transform: none;
}
.cond span i {
display: block;
font-family: var(--sans);
font-style: normal;
font-size: 13px;
font-weight: 400;
color: var(--muted-fg);
letter-spacing: 0;
text-transform: none;
}
.cond:hover span {
border-color: var(--border-strong);
box-shadow: var(--shadow);
transform: translateY(-1px);
}
.cond input:checked + span {
background: rgba(200,16,46,.04);
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow);
}
.cond input:checked + span b { color: var(--accent); }
.cond input:focus-visible + span {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.cond-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 520px) { .cond-grid { grid-template-columns: 1fr; } }
/* Wizard step 1 state grid — no Wappen images. Compact text chips with a
red dot prefix; the brand red signals "served area" without the amateur
placeholder shields. */
.states-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}
.state img { display: none !important; }
.state a {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--foreground);
font-family: var(--sans);
font-weight: 600;
font-size: 15px;
letter-spacing: -0.005em;
text-decoration: none;
text-transform: none;
transition: all var(--t);
font-variation-settings: normal;
position: relative;
box-shadow: var(--shadow-sm);
}
.state a::before {
content: "";
display: inline-flex;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px rgba(200,16,46,.16);
flex-shrink: 0;
}
.state a:hover {
border-color: var(--accent);
box-shadow: var(--shadow);
color: var(--foreground);
transform: translateY(-1px);
}
.state a:hover::before {
box-shadow: 0 0 0 4px rgba(200,16,46,.22), 0 0 10px rgba(200,16,46,.4);
}
.wiz-coverage-h {
font-family: var(--sans);
font-weight: 500;
font-size: 13px;
letter-spacing: 0;
text-transform: none;
color: var(--muted-fg);
margin: 18px 0 10px;
}
/* ─── BUTTONS — unified system ──────────────────────────────────────────── */
.wiz-cta, .nav-cta, .err-cta-primary, .sticky-cta a, .sticky-cta button,
.btn, .btn-block-yellow, .btn-block-white,
button.wiz-cta, a.wiz-cta {
background: var(--accent);
color: #fff;
border: 0;
border-radius: var(--radius);
padding: 14px 24px;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
transition: background var(--t), transform var(--t), box-shadow var(--t);
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
cursor: pointer;
box-shadow: 0 8px 20px -8px rgba(200,16,46,.40);
min-height: 48px;
white-space: nowrap;
}
.wiz-cta:hover, .nav-cta:hover, .err-cta-primary:hover, .sticky-cta a:hover,
.btn:hover, .btn-block-yellow:hover, .btn-block-white:hover {
background: var(--accent-deep);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 14px 28px -10px rgba(200,16,46,.50);
}
.wiz-cta::after, .err-cta-primary::after {
content: "→"; font-family: var(--sans); font-size: 16px; line-height: 1; font-weight: 500;
}
.btn-block-white {
background: var(--surface);
color: var(--foreground);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.btn-block-white:hover {
background: var(--muted); color: var(--foreground);
border-color: var(--border-strong);
box-shadow: var(--shadow);
}
.wiz-back, .err-cta-secondary {
background: var(--surface);
color: var(--foreground);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 20px;
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
min-height: 48px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.wiz-back::before { content: "←"; font-size: 16px; line-height: 1; font-weight: 500; color: var(--muted-fg); }
.wiz-back:hover, .err-cta-secondary:hover {
border-color: var(--border-strong);
background: var(--muted);
color: var(--foreground);
}
.wiz-back:hover::before { color: var(--foreground); }
.wiz-call {
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius);
padding: 12px 20px;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
margin-top: 14px;
min-height: 48px;
}
.wiz-call:hover { background: var(--accent); color: #fff; }
/* ─── Wizard phone footer — same card, separated by divider ─────────────── */
.wiz-phone-card {
margin-top: clamp(22px, 2.8vw, 30px);
padding-top: clamp(18px, 2.4vw, 26px);
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 10px;
}
.wiz-phone-divider { display: none; }
.wiz-phone-label {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-fg);
}
.wiz-phone-link {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
color: var(--foreground);
transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.wiz-phone-link:hover {
background: var(--surface);
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.wiz-phone-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--accent);
color: #fff;
flex-shrink: 0;
box-shadow: 0 6px 14px -4px rgba(200,16,46,.45);
}
.wiz-phone-icon svg { width: 18px; height: 18px; display: block; }
.wiz-phone-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.wiz-phone-num {
font-family: var(--serif);
font-weight: 700;
font-size: 19px;
letter-spacing: -0.01em;
color: var(--foreground);
line-height: 1.1;
}
.wiz-phone-hint {
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
color: var(--muted-fg);
line-height: 1.3;
}
@media (max-width: 420px) {
.wiz-phone-link { padding: 12px 14px; gap: 12px; }
.wiz-phone-icon { width: 38px; height: 38px; }
.wiz-phone-num { font-size: 17px; }
.wiz-phone-hint { font-size: 12px; }
}
/* ─── Compact wizard on phones — fit all step-2 fields in one viewport ──── */
@media (max-width: 540px) {
.atelier-section-wizard { padding: 18px var(--gutter) 24px; }
.atelier-section-wizard .atelier-section-head { margin-bottom: 16px; }
.wizard { padding: 18px 16px; border-radius: var(--radius); }
.wiz-header { padding-bottom: 10px; margin-bottom: 14px; }
.wiz-panel { gap: 10px; }
.wiz-q { font-size: 20px; line-height: 1.18; margin-bottom: 2px; }
.wiz-help { font-size: 13px; line-height: 1.45; }
.wiz-fine { font-size: 11.5px; margin-top: 8px; }
/* Step 1 — instrument card */
.instrument { padding: 10px 12px; margin: 0 0 12px; gap: 10px; }
.instrument-icon { width: 26px; height: 26px; }
.instrument-headline { font-size: 14px; }
.instrument-eyebrow { font-size: 9.5px; }
/* Field controls — shorter and lighter so 6 fit on screen */
.field { gap: 4px; }
.field span { font-size: 12px; margin-bottom: 2px; }
.field input, .field select, .field textarea {
height: 40px;
padding: 6px 12px;
font-size: 14px;
border-radius: var(--radius-sm);
}
.field textarea { min-height: 64px; padding: 8px 12px; }
.grid-2 { gap: 8px; }
/* Condition cards — denser on phone */
.cond span { padding: 10px 12px; }
.cond span b { font-size: 14px; margin-bottom: 2px; }
.cond span i { font-size: 12px; }
.cond-grid { gap: 8px; }
/* CTA + back row */
.wiz-cta { padding: 12px 18px; font-size: 14px; min-height: 46px; }
.wiz-back { padding: 10px 14px; font-size: 13px; min-height: 46px; }
.wiz-row { gap: 8px; }
/* Phone footer card inside the wizard */
.wiz-phone-card { margin-top: 16px; padding-top: 14px; gap: 8px; }
}
/* ─── TRUST STRIPE — proof signals ──────────────────────────────────────── */
.stripe {
background: var(--surface);
color: var(--foreground);
padding: clamp(24px, 3vw, 36px) var(--gutter);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(20px, 3vw, 40px);
border: 0;
border-bottom: 1px solid var(--border);
align-items: center;
}
@media (max-width: 720px) { .stripe { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; } }
.stripe > div {
display: flex; flex-direction: column; gap: 4px;
text-align: left;
position: relative;
}
.stripe > div:not(:first-child)::before {
content: ""; position: absolute;
left: clamp(-20px, -2vw, -12px); top: 8px; bottom: 8px; width: 1px;
background: var(--border);
}
@media (max-width: 720px) { .stripe > div::before { display: none !important; } }
.stripe b {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(22px, 2.4vw, 30px);
color: var(--foreground);
letter-spacing: -0.018em;
text-transform: none;
font-variation-settings: normal;
}
.stripe span {
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--muted-fg);
}
/* ─── VEHICLES — 4 category silhouette cards ────────────────────────────── */
#fahrzeuge.kap { background: var(--background); padding: var(--rhythm) var(--gutter); }
#fahrzeuge .kap-head { max-width: 1180px; margin: 0 auto clamp(40px, 5vw, 64px); }
#fahrzeuge .kap-h2 em { color: var(--accent); font-style: normal; font-weight: 700; }
.fz-grid {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
@media (max-width: 1080px) { .fz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fz-grid { grid-template-columns: 1fr; gap: 14px; } }
.fz-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 32px 28px 28px 32px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: var(--shadow-sm);
transition: transform var(--t), border-color var(--t), box-shadow var(--t);
isolation: isolate;
overflow: hidden;
min-height: 280px;
}
/* Left vertical accent stripe — editorial chapter mark */
.fz-card::before {
content: "";
position: absolute;
inset: 24px auto 24px 0;
width: 3px;
background: var(--accent);
transform: scaleY(.2);
transform-origin: center top;
transition: transform 420ms cubic-bezier(.4,0,.2,1);
}
.fz-card:hover {
transform: translateY(-3px);
border-color: var(--border-strong);
box-shadow: var(--shadow-lg);
}
.fz-card:hover::before { transform: scaleY(1); }
/* Chapter number — monospace, small, mutes the section header pattern (02.01, 02.02…) */
.fz-chapter {
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--muted-fg);
display: inline-block;
margin-bottom: 4px;
transition: color var(--t);
}
.fz-card:hover .fz-chapter { color: var(--accent); }
.fz-title {
font-family: var(--serif);
font-weight: 600;
font-size: 24px;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--foreground);
margin: 0 0 6px;
}
.fz-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.fz-list li {
font-family: var(--sans);
font-size: 14.5px;
font-weight: 500;
color: var(--secondary);
padding-left: 18px;
position: relative;
line-height: 1.4;
}
.fz-list li::before {
content: "";
position: absolute;
left: 0; top: .55em;
width: 8px; height: 1.5px;
background: var(--accent);
border-radius: 2px;
}
.fz-note {
margin: 4px 0 0;
padding-top: 14px;
border-top: 1px solid var(--border);
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
color: var(--muted-fg);
line-height: 1.45;
letter-spacing: 0;
}
/* ─ Defekt card — inverted, conversion-critical ─────────────────────────── */
.fz-card-defekt {
background: var(--primary);
border-color: var(--primary);
color: var(--on-primary);
background-image:
radial-gradient(80% 50% at 100% 0%, rgba(200,16,46,.22), transparent 70%),
linear-gradient(180deg, var(--primary) 0%, var(--primary-soft) 100%);
}
.fz-card-defekt::before {
transform: scaleY(1);
background: var(--accent);
}
.fz-card-defekt .fz-chapter { color: rgba(255,255,255,.5); }
.fz-card-defekt:hover .fz-chapter { color: var(--accent); }
.fz-card-defekt:hover {
border-color: var(--accent);
box-shadow: 0 18px 36px -12px rgba(200,16,46,.35), 0 6px 14px -6px rgba(0,0,0,.4);
}
.fz-card-defekt .fz-icon { color: var(--accent); opacity: 1; }
.fz-card-defekt:hover .fz-icon { color: #fff; }
.fz-card-defekt .fz-title { color: #fff; }
.fz-card-defekt .fz-list li { color: rgba(255,255,255,.85); }
.fz-card-defekt .fz-list li::before { background: var(--accent); }
.fz-card-defekt .fz-note {
color: rgba(255,255,255,.7);
border-top-color: rgba(255,255,255,.15);
}
.fz-badge {
position: absolute;
top: 16px; right: 16px;
padding: 4px 10px;
background: var(--accent);
color: #fff;
font-family: var(--sans);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 99px;
z-index: 1;
box-shadow: 0 4px 10px -3px rgba(200,16,46,.45);
}
/* ─ Section-foot CTA ────────────────────────────────────────────────────── */
.fz-foot {
max-width: 1180px;
margin: clamp(32px, 4vw, 48px) auto 0;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.fz-foot-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
background: var(--primary);
color: #fff;
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
border-radius: var(--radius);
box-shadow: var(--shadow-md);
transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.fz-foot-cta:hover {
background: var(--accent);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 14px 28px -10px rgba(200,16,46,.5);
}
.fz-foot-cta svg { transition: transform var(--t); }
.fz-foot-cta:hover svg { transform: translateX(4px); }
.fz-foot-note {
font-family: var(--sans);
font-size: 13.5px;
color: var(--muted-fg);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.fz-card, .fz-card::before, .fz-icon, .fz-foot-cta, .fz-foot-cta svg { transition: none; }
}
/* ─── HOW-IT-WORKS — 4 step process ─────────────────────────────────────── */
#ablauf.kap.kap-dark {
background: var(--primary);
color: var(--on-primary);
padding: var(--rhythm) var(--gutter);
position: relative;
border-top: 0;
}
#ablauf .kap-head { max-width: 1100px; margin: 0 auto clamp(40px, 5vw, 64px); color: var(--on-primary); }
#ablauf .tag-inv { color: rgba(255,255,255,.65); }
#ablauf .tag-inv::before { background: var(--accent); }
#ablauf .kap-h2 { color: #fff; }
#ablauf .kap-h2 em { color: var(--accent); }
#ablauf .kap-sub { color: rgba(255,255,255,.72); max-width: 56ch; }
.ablauf {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
list-style: none;
padding: 0;
border: 0;
counter-reset: ablauf-step;
}
.ablauf-step {
position: relative;
display: flex;
flex-direction: column;
padding-right: 8px;
}
/* Rail: number + connector line on the top edge */
.ablauf-rail {
position: relative;
height: 56px;
display: flex;
align-items: center;
margin-bottom: 18px;
}
.ablauf-num {
font-family: var(--mono);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.16em;
line-height: 1;
color: rgba(255,255,255,.55);
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.03);
flex-shrink: 0;
z-index: 1;
transition: color var(--t), border-color var(--t), background var(--t), transform var(--t);
}
/* Connector — dashed line stretching to the next step */
.ablauf-connector {
flex: 1;
height: 1.5px;
background-image: linear-gradient(90deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px);
background-size: 12px 1.5px;
background-repeat: repeat-x;
margin-left: 14px;
transform-origin: left center;
}
/* Last step: no trailing connector */
.ablauf-step:last-child .ablauf-connector { display: none; }
/* Card content sits below the rail */
.ablauf-card {
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.10);
border-radius: var(--radius-lg);
padding: 24px 22px 22px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 200px;
transition: background var(--t), border-color var(--t), transform var(--t);
position: relative;
isolation: isolate;
}
.ablauf-step:hover .ablauf-card {
background: rgba(255,255,255,.06);
border-color: rgba(200,16,46,.45);
transform: translateY(-3px);
}
.ablauf-step:hover .ablauf-num {
color: #fff;
border-color: var(--accent);
background: var(--accent);
}
/* Time anchor — the hero metric */
.ablauf-time {
display: flex;
flex-direction: column;
gap: 2px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,.12);
margin-bottom: 4px;
}
.ablauf-time-value {
font-family: var(--mono);
font-weight: 600;
font-size: 28px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.ablauf-time-label {
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
}
.ablauf .ablauf-title,
.ablauf h3.ablauf-title {
font-family: var(--serif);
font-weight: 600;
font-size: 20px;
line-height: 1.2;
letter-spacing: -0.018em;
color: #fff;
margin: 0;
text-transform: none;
}
.ablauf .ablauf-body,
.ablauf p.ablauf-body {
font-family: var(--sans);
font-size: 14.5px;
font-weight: 400;
line-height: 1.55;
color: rgba(255,255,255,.78);
margin: 0;
padding-top: 0;
text-transform: none;
letter-spacing: 0;
}
/* Last step "VOR ORT" gets a slight emphasis — the payoff card */
.ablauf-step:last-child .ablauf-card {
background: linear-gradient(180deg, rgba(200,16,46,.10) 0%, rgba(255,255,255,.035) 60%);
border-color: rgba(200,16,46,.35);
}
.ablauf-step:last-child .ablauf-num {
border-color: var(--accent);
color: #fff;
background: rgba(200,16,46,.18);
}
/* Tablet: 2x2 grid — restore connectors between row 1 items, hide between row breaks */
@media (max-width: 1024px) {
.ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 32px; }
.ablauf-step:nth-child(2) .ablauf-connector { display: none; }
}
/* Mobile: single column with vertical connector line on the left */
@media (max-width: 560px) {
.ablauf { grid-template-columns: 1fr; gap: 0; }
.ablauf-step {
display: grid;
grid-template-columns: 56px 1fr;
gap: 16px;
padding: 0 0 28px 0;
}
.ablauf-rail {
flex-direction: column;
align-items: center;
height: auto;
margin-bottom: 0;
align-self: stretch;
}
.ablauf-connector {
width: 1.5px;
height: 100%;
margin: 8px 0 0;
background-image: linear-gradient(180deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px);
background-size: 1.5px 12px;
}
.ablauf-step:last-child .ablauf-connector { display: none; }
.ablauf-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ablauf-card, .ablauf-num { transition: none; }
}
/* ─── COVERAGE — dark slate panel with atmospheric Austria map ──────────── */
#coverage.kap.kap-dark {
background: var(--primary);
color: var(--on-primary);
padding: var(--rhythm) var(--gutter);
position: relative;
overflow: hidden;
border-top: 0;
}
#coverage.kap.kap-dark::after {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(60% 50% at 30% 50%, rgba(200,16,46,.10), transparent 70%);
pointer-events: none;
}
#coverage .kap-head {
max-width: 1100px;
margin: 0 auto clamp(40px, 5vw, 64px);
position: relative;
z-index: 1;
}
#coverage .tag-inv {
color: rgba(255,255,255,.65);
}
#coverage .tag-inv::before { background: var(--accent); }
#coverage .kap-h2 { color: #fff; }
#coverage .kap-h2 em { color: var(--accent); }
.coverage {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: clamp(28px, 5vw, 72px);
align-items: center;
position: relative;
z-index: 1;
}
@media (max-width: 880px) {
.coverage { grid-template-columns: 1fr; }
.coverage-map { order: 2; }
.bundes-list { order: 1; }
}
.coverage-map { display: block; order: 2; }
.bundes-list { order: 1; }
.map-stage { position: relative; }
.austria-svg {
background: transparent;
filter: drop-shadow(0 24px 60px rgba(0,0,0,.55));
width: 100%;
height: auto;
}
.austria-svg > rect:first-of-type { fill: transparent !important; }
.austria-svg defs pattern path { stroke: rgba(255,255,255,.04); }
/* Strip the SVG's via CSS. 6 dimmed ghost states, 3 red glowing. */
.at-bundes path {
fill: rgba(255,255,255,.05);
stroke: rgba(255,255,255,.18);
stroke-width: 0.6;
transition: fill 250ms ease, filter 250ms ease, opacity 250ms ease;
}
.at-bundes a path {
fill: var(--accent);
stroke: rgba(255,255,255,.4);
stroke-width: 0.8;
filter:
drop-shadow(0 0 4px rgba(200,16,46,.55))
drop-shadow(0 0 16px rgba(200,16,46,.30));
}
.at-bundes a:hover path,
.at-bundes a:focus path {
fill: var(--accent);
filter:
drop-shadow(0 0 4px rgba(200,16,46,.95))
drop-shadow(0 0 18px rgba(200,16,46,.70))
drop-shadow(0 0 36px rgba(200,16,46,.40));
}
.compass circle { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.18); stroke-width: 0.5; }
.compass text { fill: #fff; }
.compass path { fill: var(--accent); }
/* (map-caption stats were removed — minimalist map now) */
/* Bundes list — dark glass cards next to the map */
.bundes-list {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0;
border: 1px solid rgba(255,255,255,.10);
border-radius: var(--radius-lg);
overflow: hidden;
background: rgba(255,255,255,.03);
backdrop-filter: blur(8px);
box-shadow: 0 24px 60px -28px rgba(0,0,0,.5);
}
.bundes-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 22px;
border-bottom: 1px solid rgba(255,255,255,.08);
background: transparent;
transition: background var(--t);
}
.bundes-list li:last-child { border-bottom: 0; }
.bundes-list li:hover { background: rgba(255,255,255,.04); }
.bundes-list b {
font-family: var(--serif);
font-weight: 600;
font-size: 18px;
color: #fff;
letter-spacing: -0.012em;
text-transform: none;
font-variation-settings: normal;
}
.bundes-list span {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0;
color: var(--accent);
text-transform: none;
padding: 4px 12px;
background: rgba(200,16,46,.14);
border: 1px solid rgba(200,16,46,.30);
border-radius: 99px;
}
.bundes-list span::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px rgba(200,16,46,.65);
}
/* ─── WHY-US — single column trust + checklist ──────────────────────────── */
/* ─── WARUM WIR — 3-way comparison table ────────────────────────────────── */
#warum.kap { background: var(--background); padding: var(--rhythm) var(--gutter); }
#warum .kap-head { max-width: 1180px; margin: 0 auto clamp(36px, 4vw, 52px); }
#warum .kap-h2 em { color: var(--accent); font-style: normal; font-weight: 700; }
.compare-wrap {
max-width: 1180px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
position: relative;
}
.compare-table {
width: 100%;
border-collapse: collapse;
font-family: var(--sans);
}
/* Column headers */
.compare-table thead th {
padding: 22px 18px 18px;
text-align: left;
vertical-align: bottom;
background: var(--muted);
border-bottom: 1px solid var(--border);
font-weight: 400;
}
.compare-th-rowlabel { background: var(--muted); width: 26%; }
.compare-th { width: 24.66%; }
.compare-col-name {
display: block;
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
letter-spacing: -0.01em;
color: var(--foreground);
line-height: 1.2;
}
.compare-col-sub {
display: block;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted-fg);
margin-top: 3px;
}
/* Saleh column header — accent (specificity bumped to beat `.compare-table thead th`) */
.compare-table thead th.compare-th-hi {
background: linear-gradient(180deg, var(--primary) 0%, var(--primary-soft) 100%);
position: relative;
}
.compare-table thead th.compare-th-hi::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--accent);
}
.compare-table thead th.compare-th-hi .compare-col-name { color: #fff; }
.compare-table thead th.compare-th-hi .compare-col-sub { color: rgba(255,255,255,.7); }
/* Body cells */
.compare-table tbody tr { border-bottom: 1px solid var(--border); }
.compare-table tbody tr:last-child { border-bottom: 0; }
.compare-table tbody tr:nth-child(even) td:not(.compare-cell-hi),
.compare-table tbody tr:nth-child(even) .compare-row-label { background: var(--muted); }
.compare-row-label {
padding: 18px 22px;
text-align: left;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
color: var(--foreground);
letter-spacing: 0;
background: var(--surface);
text-transform: none;
}
.compare-cell {
padding: 18px 18px;
font-family: var(--sans);
font-size: 14.5px;
font-weight: 400;
vertical-align: middle;
}
.compare-cell-neg {
color: var(--muted-fg);
font-weight: 400;
}
/* Saleh winning cells — full column highlight, white text on dark navy */
.compare-cell-hi {
background: var(--primary);
color: #fff;
font-weight: 600;
position: relative;
display: table-cell;
}
.compare-table tbody tr:nth-child(even) .compare-cell-hi {
background: var(--primary-soft);
}
.compare-cell-hi > span { vertical-align: middle; }
.compare-check {
display: inline-block;
width: 16px;
height: 16px;
color: var(--accent);
margin-right: 8px;
vertical-align: middle;
flex-shrink: 0;
}
/* Trust line below table */
.compare-trust {
max-width: 1180px;
margin: clamp(24px, 3vw, 36px) auto 0;
text-align: center;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--muted-fg);
}
/* CTA below */
.compare-foot {
max-width: 1180px;
margin: clamp(20px, 3vw, 32px) auto 0;
display: flex;
justify-content: center;
}
/* Horizontal scroll on small screens — table stays as-is, can scroll if needed */
@media (max-width: 880px) {
.compare-wrap { overflow-x: auto; }
.compare-table { min-width: 720px; }
.compare-row-label { font-size: 13.5px; padding: 14px 16px; }
.compare-cell { font-size: 13.5px; padding: 14px 14px; }
.compare-col-name { font-size: 14.5px; }
.compare-col-sub { font-size: 10.5px; }
}
/* Mobile (<=560): stacked card layout — each row becomes its own block */
@media (max-width: 560px) {
.compare-wrap {
overflow: visible;
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
.compare-table,
.compare-table thead,
.compare-table tbody,
.compare-table tr,
.compare-table th,
.compare-table td {
display: block;
width: auto;
min-width: 0;
}
.compare-table thead { display: none; }
.compare-table tbody tr {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 16px 18px 12px;
margin-bottom: 12px;
box-shadow: var(--shadow-sm);
}
.compare-table tbody tr:nth-child(even) td:not(.compare-cell-hi),
.compare-table tbody tr:nth-child(even) .compare-row-label { background: transparent; }
.compare-table th.compare-row-label {
background: transparent;
padding: 0 0 12px;
font-size: 15px;
font-weight: 700;
border-bottom: 1px solid var(--border);
margin-bottom: 8px;
color: var(--foreground);
}
/* Each value cell becomes a label-left / value-right flex row */
.compare-table td.compare-cell {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 8px 0;
font-size: 13.5px;
background: transparent;
color: var(--foreground);
}
.compare-table td.compare-cell::before {
content: attr(data-col);
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted-fg);
flex-shrink: 0;
}
.compare-table td.compare-cell-neg { color: var(--secondary); font-weight: 500; }
.compare-table td.compare-cell-hi {
background: var(--primary);
color: #fff;
margin: 8px -10px 0;
padding: 12px 12px;
border-radius: var(--radius);
font-weight: 600;
}
.compare-table td.compare-cell-hi::before {
color: rgba(255,255,255,.7);
}
.compare-table td.compare-cell-hi > span { color: #fff; }
.compare-table td.compare-cell-hi .compare-check { color: var(--accent); }
}
/* ─── REVIEWS — single tight card ───────────────────────────────────────── */
#bewertungen.kap { background: var(--background); padding: var(--rhythm) var(--gutter); }
#bewertungen .kap-head { max-width: 1100px; margin: 0 auto clamp(28px, 4vw, 48px); }
.reviews {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
border: 0;
}
.review {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow-sm);
position: relative;
transition: all var(--t);
}
.review:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.review-stars {
font-family: var(--sans);
color: var(--accent);
letter-spacing: 0.08em;
font-size: 14px;
margin-bottom: 14px;
}
.review blockquote {
font-family: var(--serif);
font-weight: 400;
font-style: normal;
font-size: 16px;
line-height: 1.55;
letter-spacing: -0.005em;
color: var(--foreground);
margin: 0 0 18px;
font-variation-settings: normal;
}
.review blockquote::before { display: none; }
.review footer {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--muted-fg);
border: 0;
padding: 0;
}
.review footer b { color: var(--foreground); font-weight: 600; }
/* ─── BRANDS STRIP — auto-scrolling wordmark marquee ────────────────────── */
.brands-strip {
background: var(--primary);
background-image:
linear-gradient(180deg, var(--primary) 0%, var(--primary-soft) 100%);
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
padding: clamp(28px, 4vw, 44px) 0;
overflow: hidden;
position: relative;
}
.brands-strip-headline {
text-align: center;
font-family: var(--sans);
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(255,255,255,.65);
margin: 0 var(--gutter) clamp(20px, 2.5vw, 28px);
}
.brands-strip-headline strong {
color: #fff;
font-weight: 700;
}
.brands-strip-rail {
display: flex;
width: max-content;
animation: brands-scroll 38s linear infinite;
}
.brands-strip:hover .brands-strip-rail { animation-play-state: paused; }
.brands-strip-track {
list-style: none;
margin: 0;
padding: 0 24px 0 0;
display: flex;
align-items: center;
flex-shrink: 0;
}
.brands-strip-track li {
padding: 0 clamp(28px, 3.6vw, 56px);
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
font-family: var(--sans);
font-size: 16px;
font-weight: 500;
color: rgba(255,255,255,.55);
}
.brands-strip-track li img {
width: auto;
height: clamp(40px, 4.4vw, 60px);
max-width: clamp(80px, 9vw, 140px);
display: block;
object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
transition: transform 240ms ease, filter 240ms ease;
}
.brands-strip-track li:hover img {
transform: translateY(-2px) scale(1.04);
filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
/* Edge fade — softens entry/exit of the scroll */
.brands-strip::before,
.brands-strip::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: clamp(40px, 6vw, 96px);
pointer-events: none;
z-index: 2;
}
.brands-strip::before {
left: 0;
background: linear-gradient(90deg, var(--primary), transparent);
}
.brands-strip::after {
right: 0;
background: linear-gradient(270deg, var(--primary), transparent);
}
@keyframes brands-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.brands-strip-rail { animation: none; }
.brands-strip-track { flex-wrap: wrap; justify-content: center; }
.brands-strip-track + .brands-strip-track { display: none; }
}
/* ─── Mobile drawer — dark trust-corporate styling ──────────────────────── */
.nav-drawer {
background: var(--primary);
background-image:
radial-gradient(60% 40% at 0% 0%, rgba(200,16,46,.12), transparent 70%),
linear-gradient(180deg, var(--primary) 0%, var(--primary-soft) 100%);
color: #fff;
border-bottom: 0;
/* Clear the tape (~28px) + shrunken nav (~60–72px) + breathing room */
padding: clamp(110px, 14vh, 140px) 24px 24px;
top: 0;
bottom: 0;
height: 100dvh;
max-height: 100dvh;
display: none;
flex-direction: column;
gap: 18px;
overflow-y: auto;
z-index: 70;
}
.nav-drawer.open { display: flex; }
.nav-drawer-links {
display: flex;
flex-direction: column;
gap: 0;
flex: 0 0 auto;
}
.nav-drawer-links a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 4px;
border-bottom: 1px solid rgba(255,255,255,.10);
font-family: var(--serif);
font-weight: 600;
font-size: 19px;
letter-spacing: -0.012em;
color: #fff;
text-decoration: none;
background: transparent;
text-transform: none;
transition: color var(--t), padding-left var(--t);
}
.nav-drawer-links a:hover,
.nav-drawer-links a:focus-visible {
color: var(--accent);
padding-left: 10px;
}
.nav-drawer-links > a:last-of-type { border-bottom: 1px solid rgba(255,255,255,.10); }
/* Right-side arrow indicator on top-level links (direct children of .nav-drawer-links) */
.nav-drawer-links > a::after {
content: "→";
font-family: var(--mono);
font-size: 18px;
font-weight: 500;
color: rgba(255,255,255,.30);
transition: color var(--t), transform var(--t);
}
.nav-drawer-links > a:hover::after {
color: var(--accent);
transform: translateX(4px);
}
/* Standorte dropdown — collapsible details */
.nav-drawer .drawer-states {
border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav-drawer .drawer-states summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 4px;
font-family: var(--serif);
font-weight: 600;
font-size: 19px;
letter-spacing: -0.012em;
color: #fff;
background: transparent;
text-transform: none;
border-bottom: 0;
}
.nav-drawer .drawer-states summary::-webkit-details-marker { display: none; }
.nav-drawer .drawer-states summary::after {
content: "+";
font-family: var(--mono);
font-size: 24px;
font-weight: 400;
line-height: 1;
color: rgba(255,255,255,.45);
transition: transform var(--t), color var(--t);
transform-origin: center;
}
.nav-drawer .drawer-states[open] summary::after {
content: "−";
color: var(--accent);
}
.nav-drawer .drawer-states a {
font-family: var(--sans);
font-weight: 500;
font-size: 16px;
letter-spacing: 0;
padding: 14px 4px 14px 22px;
color: rgba(255,255,255,.75);
border-bottom: 0;
position: relative;
}
.nav-drawer .drawer-states a::after { content: none; }
.nav-drawer .drawer-states a::before {
content: "";
position: absolute;
left: 4px;
top: 50%;
width: 10px;
height: 1px;
background: rgba(255,255,255,.30);
transform: translateY(-50%);
}
.nav-drawer .drawer-states a:hover {
color: #fff;
padding-left: 28px;
}
.nav-drawer .drawer-states a:hover::before { background: var(--accent); }
/* ── Call CTA pinned at the bottom of the drawer ─────────────────────────── */
.drawer-call {
margin-top: 28px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: var(--accent);
color: #fff !important;
text-decoration: none;
border-radius: var(--radius);
box-shadow: 0 16px 32px -12px rgba(200,16,46,.55);
transition: background var(--t), transform var(--t), box-shadow var(--t);
flex-shrink: 0;
}
.drawer-call:hover,
.drawer-call:focus-visible {
background: var(--accent-deep);
transform: translateY(-1px);
box-shadow: 0 22px 40px -12px rgba(200,16,46,.7);
padding-left: 18px;
}
.drawer-call-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255,255,255,.16);
color: #fff;
flex-shrink: 0;
}
.drawer-call-icon svg { width: 20px; height: 20px; display: block; }
.drawer-call-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.drawer-call-num {
font-family: var(--serif);
font-weight: 700;
font-size: 19px;
letter-spacing: -0.01em;
color: #fff;
line-height: 1.1;
}
.drawer-call-hint {
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
color: rgba(255,255,255,.85);
line-height: 1.3;
}
@media (max-width: 420px) {
.nav-drawer { padding-left: 22px; padding-right: 22px; }
.nav-drawer-links a,
.nav-drawer .drawer-states summary { font-size: 18px; padding-top: 16px; padding-bottom: 16px; }
.nav-drawer .drawer-states a { font-size: 15.5px; }
.drawer-call-num { font-size: 18px; }
.drawer-call-icon { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
.nav-drawer a, .nav-drawer a::after,
.nav-drawer .drawer-states summary::after,
.nav-drawer .drawer-states a, .nav-drawer .drawer-states a::before { transition: none; }
}
/* ─── EXPORT — editorial route manifest ─────────────────────────────────── */
#export.kap.kap-dark {
background: var(--primary);
background-image:
radial-gradient(70% 50% at 100% 0%, rgba(200,16,46,.10), transparent 70%),
linear-gradient(180deg, var(--primary) 0%, var(--primary-soft) 100%);
color: var(--on-primary);
padding: var(--rhythm) var(--gutter);
position: relative;
overflow: hidden;
}
#export .kap-head { max-width: 1180px; margin: 0 auto clamp(36px, 4vw, 56px); }
#export .tag-inv { color: rgba(255,255,255,.65); }
#export .tag-inv::before { background: var(--accent); }
#export .kap-h2 { color: #fff; max-width: 22ch; }
#export .kap-h2 em { color: var(--accent); font-style: normal; font-weight: 700; }
#export .kap-sub { color: rgba(255,255,255,.78); max-width: 56ch; font-size: 17px; line-height: 1.55; }
.export-spread {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: clamp(40px, 5vw, 88px);
align-items: start;
}
@media (max-width: 1024px) { .export-spread { grid-template-columns: 1fr; gap: 48px; } }
/* ── LEFT: manifesto + differentiators + CTA ─────────────────────────────── */
.export-body {
font-family: var(--sans);
font-size: 15.5px;
font-weight: 400;
line-height: 1.65;
color: rgba(255,255,255,.82);
margin: 0 0 28px;
max-width: 48ch;
}
.export-diff {
list-style: none;
padding: 0;
margin: 0 0 32px;
display: flex;
flex-direction: column;
gap: 14px;
border-top: 1px solid rgba(255,255,255,.10);
padding-top: 22px;
}
.export-diff li {
display: flex;
align-items: flex-start;
gap: 14px;
color: #fff;
font-family: var(--sans);
font-size: 14.5px;
font-weight: 500;
line-height: 1.45;
}
.export-diff-tick {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--accent);
margin-top: 1px;
}
.export-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
background: var(--accent);
color: #fff;
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
border-radius: var(--radius);
box-shadow: 0 14px 28px -10px rgba(200,16,46,.5);
transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.export-cta:hover {
background: var(--accent-deep);
transform: translateY(-1px);
box-shadow: 0 18px 36px -10px rgba(200,16,46,.6);
}
.export-cta svg { transition: transform var(--t); }
.export-cta:hover svg { transform: translateX(4px); }
/* ── RIGHT: typographic route list ───────────────────────────────────────── */
.export-right {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--radius-lg);
padding: 26px 4px 26px 30px;
position: relative;
box-shadow: 0 24px 60px -28px rgba(0,0,0,.5);
}
.export-routes-head {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0 26px 18px 0;
border-bottom: 1px solid rgba(255,255,255,.10);
margin-bottom: 10px;
gap: 18px;
flex-wrap: wrap;
}
.export-routes-eyebrow {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
}
.export-routes-stat {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
.export-routes {
list-style: none;
padding: 0;
margin: 0;
}
.export-routes > li { list-style: none; }
.route {
display: grid;
grid-template-columns: 42px 1fr 22px;
align-items: center;
gap: 16px;
padding: 14px 26px 14px 0;
border-bottom: 1px solid rgba(255,255,255,.07);
transition: background var(--t), padding var(--t);
position: relative;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.route:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.route:last-child { border-bottom: 0; }
.route::before {
content: "";
position: absolute;
left: -30px;
top: 0; bottom: 0;
width: 2px;
background: var(--accent);
transform: scaleY(0);
transform-origin: center;
transition: transform var(--t);
}
.route:hover {
background: linear-gradient(90deg, rgba(200,16,46,.08), transparent 80%);
padding-left: 12px;
}
.route:hover::before { transform: scaleY(1); }
.route-code {
font-family: var(--mono);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.10em;
color: var(--accent);
text-align: center;
padding: 5px 0;
border: 1px solid rgba(200,16,46,.40);
border-radius: 4px;
background: rgba(200,16,46,.08);
transition: background var(--t), color var(--t);
}
.route:hover .route-code { background: var(--accent); color: #fff; }
.route-name {
font-family: var(--serif);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.01em;
color: #fff;
line-height: 1.2;
min-width: 0;
}
.route-arrow {
width: 18px;
height: 18px;
color: rgba(255,255,255,.30);
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--t), transform var(--t), color var(--t);
justify-self: end;
}
.route:hover .route-arrow {
opacity: 1;
transform: translateX(0);
color: var(--accent);
}
/* Tablet/mobile tweaks */
@media (max-width: 720px) {
.export-right { padding: 22px 4px 18px 22px; }
.export-routes-head { padding-right: 18px; }
.route { grid-template-columns: 38px 1fr 18px; gap: 12px; padding: 12px 18px 12px 0; }
.route-name { font-size: 15.5px; }
.route-code { font-size: 10.5px; }
.route:hover { padding-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.route, .route-arrow, .export-cta, .export-cta svg, .route::before, .route-code { transition: none; }
}
/* ─── FAQ — clean accordion list ────────────────────────────────────────── */
#faq.kap { background: var(--surface); padding: var(--rhythm) var(--gutter); }
#faq .kap-head { max-width: 1100px; margin: 0 auto clamp(28px, 4vw, 40px); }
.faq-list, .faq {
max-width: 880px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--border);
}
.faq-item, details.faq-item {
padding: 0;
border: 0;
border-bottom: 1px solid var(--border);
background: transparent;
border-radius: 0;
}
.faq-item summary, details.faq-item summary {
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 22px 0;
font-family: var(--serif);
font-weight: 500;
font-size: 16.5px;
letter-spacing: -0.012em;
color: var(--foreground);
text-transform: none;
font-variation-settings: normal;
transition: color var(--t);
}
.faq-item summary:hover, details.faq-item summary:hover { color: var(--accent); }
.faq-item summary::after, details.faq-item summary::after {
content: "";
width: 28px; height: 28px;
border: 1px solid var(--border);
border-radius: 50%;
background: var(--surface) url("data:image/svg+xml;utf8,") no-repeat center;
flex-shrink: 0;
transition: transform var(--t), background-color var(--t);
}
details.faq-item[open] summary::after {
background-image: url("data:image/svg+xml;utf8,");
background-color: rgba(200,16,46,.08);
border-color: var(--accent);
}
.faq-item p, details.faq-item p {
font-family: var(--sans);
font-weight: 400;
font-size: 15px;
line-height: 1.65;
color: var(--muted-fg);
margin: 0 0 22px;
letter-spacing: 0;
font-variation-settings: normal;
max-width: 64ch;
}
/* ─── FINAL CTA — calm, single primary path ─────────────────────────────── */
.finalcta {
background: var(--primary);
color: var(--on-primary);
padding: var(--rhythm) var(--gutter);
border: 0;
position: relative;
overflow: hidden;
}
.finalcta::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(60% 50% at 50% 0%, rgba(200,16,46,.18), transparent 70%);
pointer-events: none;
}
.finalcta-inner {
max-width: 880px; margin: 0 auto;
text-align: center;
position: relative;
}
.finalcta .label-tag {
display: inline-flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.78);
border-radius: 99px;
padding: 6px 14px;
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0 auto 24px;
text-align: center;
}
.finalcta .label-tag::before { display: none; }
.finalcta .kap-h2 {
color: #fff;
margin: 0 auto 18px;
max-width: 22ch;
text-shadow: none;
}
.finalcta .kap-h2 em { color: var(--accent); }
.finalcta .kap-sub {
color: rgba(255,255,255,.75);
margin: 0 auto 36px;
font-size: clamp(16px, 1.3vw, 19px);
max-width: 56ch;
}
.finalcta-actions {
display: flex; gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* ─── STICKY CTA ────────────────────────────────────────────────────────── */
.sticky-cta {
background: var(--surface);
border: 0;
border-top: 1px solid var(--border);
box-shadow: var(--shadow-lg);
padding: 10px 12px;
gap: 8px;
}
.sticky-cta a, .sticky-cta button {
background: var(--accent);
color: #fff;
border: 0;
border-right: 0;
border-radius: var(--radius);
padding: 10px 8px;
font-family: var(--sans);
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
min-height: 46px;
gap: 6px;
flex: 1 1 0;
min-width: 0;
}
.sticky-cta .sticky-icon { width: 17px; height: 17px; }
.sticky-cta a[href^="https://wa.me"] { background: var(--success); }
.sticky-cta a[href^="https://wa.me"]:hover { background: #1ea355; }
/* Bewerten pill — override the base yellow/black so the icon + label read white */
.sticky-cta .sticky-form { background: var(--primary); color: #fff; }
.sticky-cta .sticky-form:hover { background: var(--primary-soft, #1f2a44); }
.sticky-cta a:hover { background: var(--accent-deep); transform: translateY(-1px); }
@media (max-width: 380px) {
.sticky-cta { padding: 8px 10px; gap: 6px; }
.sticky-cta a, .sticky-cta button { font-size: 12.5px; padding: 8px 6px; gap: 5px; min-height: 44px; }
.sticky-cta .sticky-icon { width: 15px; height: 15px; }
}
/* ─── FOOTER — corporate ────────────────────────────────────────────────── */
.foot {
background: var(--primary);
color: rgba(255,255,255,.85);
padding: clamp(64px, 8vw, 110px) var(--gutter) clamp(32px, 4vw, 48px);
position: relative;
}
.foot::before { display: none; }
.footer-states { max-width: 1100px; margin: 0 auto; }
.footer-states-label, .foot-mute, .err-states-label {
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: rgba(255,255,255,.55);
}
.footer-states-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0;
margin-top: 14px;
list-style: none; padding: 0;
border-top: 1px solid rgba(255,255,255,.10);
}
.footer-states-list li {
border-bottom: 1px solid rgba(255,255,255,.10);
}
.footer-states-list a {
display: block; padding: 16px 0;
font-family: var(--serif);
font-weight: 500;
font-size: 17px;
color: rgba(255,255,255,.85);
letter-spacing: -0.01em;
text-decoration: none;
text-transform: none;
transition: all var(--t);
font-variation-settings: normal;
}
.footer-states-list a:hover { color: var(--accent); padding-left: 6px; }
.foot-grid {
max-width: 1100px; margin: 48px auto 32px;
display: grid;
grid-template-columns: 1.3fr repeat(3, 1fr);
gap: clamp(28px, 4vw, 48px);
}
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.brand-foot { background: transparent; padding: 0; margin: 0 0 14px; }
.brand-foot-logo {
width: auto;
height: 56px;
object-fit: contain;
transform: none;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.foot-tag {
font-family: var(--sans);
font-weight: 400;
font-style: normal;
font-size: 15.5px;
line-height: 1.55;
margin-top: 14px;
color: rgba(255,255,255,.78);
max-width: 32ch;
font-variation-settings: normal;
}
.foot h4 {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
margin-bottom: 14px;
padding-bottom: 0;
}
.foot h4::after { display: none; }
.foot p, .foot a {
font-family: var(--sans);
font-size: 14px;
line-height: 1.7;
color: rgba(255,255,255,.78);
}
.foot a:hover { color: var(--accent); }
.foot-social { display: flex; gap: 10px; margin-top: 14px; list-style: none; padding: 0; }
.foot-social a {
display: inline-flex; width: 36px; height: 36px;
align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,.16);
border-radius: var(--radius-sm);
transition: all var(--t);
}
.foot-social a:hover { border-color: var(--accent); color: var(--accent); background: rgba(200,16,46,.10); }
.foot-social svg { width: 15px; height: 15px; }
.foot-bottom {
max-width: 1100px; margin: 0 auto;
border-top: 1px solid rgba(255,255,255,.10);
padding-top: 22px;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.06em;
text-transform: none;
color: rgba(255,255,255,.50);
}
/* ─── 404 ───────────────────────────────────────────────────────────────── */
.err-page {
background: var(--background);
padding: var(--rhythm) var(--gutter);
}
.err-num {
font-family: var(--serif);
font-weight: 800;
font-size: clamp(120px, 18vw, 220px);
line-height: 0.9;
color: var(--accent);
letter-spacing: -0.05em;
margin: 12px 0;
text-transform: none;
font-style: normal;
font-variation-settings: normal;
}
.err-h1 {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(28px, 4vw, 48px);
line-height: 1.08;
letter-spacing: -0.02em;
margin-bottom: 18px;
text-transform: none;
}
.err-text { font-size: 16px; color: var(--muted-fg); max-width: 56ch; }
.err-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.err-eyebrow {
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--muted-fg);
font-weight: 500;
}
.err-states-label { margin-top: 40px; }
.err-states { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; list-style: none; padding: 0; }
.err-states a {
display: inline-flex;
padding: 8px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--sans);
font-weight: 500;
font-size: 14px;
color: var(--foreground);
text-decoration: none;
transition: all var(--t);
font-variation-settings: normal;
}
.err-states a:hover { border-color: var(--accent); color: var(--accent); background: rgba(200,16,46,.04); }
/* ─── LEGAL pages ───────────────────────────────────────────────────────── */
.legal { background: var(--surface); padding: var(--rhythm) var(--gutter); min-height: 70vh; }
.legal-inner { max-width: 720px; margin: 0 auto; }
.legal-back {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--muted-fg);
margin-bottom: 32px;
text-decoration: none;
}
.legal-back::before { content: "←"; color: var(--accent); font-weight: 600; }
.legal h1 {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(34px, 4.5vw, 56px);
line-height: 1.08;
letter-spacing: -0.022em;
margin-bottom: 32px;
text-transform: none;
}
.legal h2,
.legal-grid h2 {
font-family: var(--serif);
font-weight: 600;
font-size: 21px;
line-height: 1.25;
letter-spacing: -0.012em;
margin: 0 0 14px;
padding: 0;
color: var(--foreground);
background: transparent;
text-transform: none;
display: block;
}
.legal p, .legal li {
font-family: var(--sans);
font-size: 15.5px;
line-height: 1.7;
color: var(--foreground);
}
.legal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .legal-grid { grid-template-columns: 1fr; } }
.legal a { color: var(--accent); border-bottom: 1px solid currentColor; }
/* ─── COOKIE banner ─────────────────────────────────────────────────────── */
.cookie-banner, .cookies, [role="dialog"][aria-label*="ookie"] {
background: var(--surface);
color: var(--foreground);
border-top: 2px solid var(--accent);
font-family: var(--sans);
box-shadow: var(--shadow-lg);
}
.cookie-banner button {
font-family: var(--sans);
border-radius: var(--radius);
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
/* ─── STATE PAGE hero ───────────────────────────────────────────────────── */
.hero-h1-state {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(40px, 7vw, 96px);
line-height: 1.02;
letter-spacing: -0.028em;
color: var(--foreground);
text-transform: none;
}
.hero-h1-state .h1-state {
font-style: normal;
color: var(--accent);
font-weight: 700;
font-variation-settings: normal;
}
.hero-h1-state .h1-pre {
font-family: var(--serif);
font-weight: 300;
color: var(--muted-fg);
}
/* ─── Defensive overrides ───────────────────────────────────────────────── */
[style*="background:#FFEC00"], [style*="background: #FFEC00"] {
background: var(--accent) !important;
color: #fff !important;
}
[style*="color:#FFEC00"], [style*="color: #FFEC00"] {
color: var(--accent) !important;
}