Jetzt Probefahrt sichern – unverbindlich & kostenlos

#probefahrt{ –brand:#132531; /* Primär – Deep Navy */ –brand-mid:#6e8591; /* sekundärer Akzent */ –brand-light:#9fb3b3; /* heller Akzent */ –surface:#fafafa; /* Kartenfläche */ –ink:#132531; /* Text */ –muted:#6e8591; /* Sekundärtext */ –ring:rgba(159,179,179,.45); /* Focus-Ring aus #9fb3b3 */ –radius:5px; –shadow-md:0 10px 24px rgba(19,37,49,.15); –shadow-lg:0 18px 44px rgba(19,37,49,.22); color:var(–ink); } /* Grid-Layout (ersetzt Float-Layout) */ #probefahrt.rowpf{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; align-items:stretch; } /* Karten-Optik für Spalten */ #probefahrt .column{ padding:24px; border-radius:var(–radius); background: radial-gradient(120% 120% at 100% 0%, rgba(159,179,179,.18), transparent 60%), radial-gradient(120% 120% at 0% 100%, rgba(110,133,145,.14), transparent 55%), var(–surface) !important; /* überschreibt evtl. vorhandene Inline-BGs */ border:1px solid rgba(110,133,145,.22); box-shadow:var(–shadow-md); position:relative; overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; } /* Headline + Icon */ #probefahrt h2{ margin:2px 0 8px; font-size:clamp(18px, 2.1vw, 22px); line-height:1.2; letter-spacing:-.2px; display:flex; align-items:center; gap:12px; } #probefahrt h2 i{ display:inline-grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border-radius:5px; background:linear-gradient(180deg, var(–brand-light), var(–brand-mid)); color:#fff; box-shadow:0 6px 16px rgba(19,37,49,.18); font-size:16px; } /* Copy */ #probefahrt p{ margin:0; color:var(–muted); } /* Step-Nummer (Badge oben rechts) */ #probefahrt .column::after{ position:absolute; right:14px; top:12px; background:#e8eff1; color:var(–brand); border:1px solid rgba(110,133,145,.35); font-weight:800; font-size:12px; letter-spacing:.04em; padding:6px 10px; border-radius:999px; content:attr(data-step); } /* Interaktion */ #probefahrt .column:hover{ transform:translateY(-4px); box-shadow:var(–shadow-lg); border-color:rgba(110,133,145,.35); } #probefahrt .column:focus-within{ box-shadow:0 0 0 4px var(–ring), var(–shadow-md); } /* Responsive: 3 → 2 → 1 Spalten */ @media (max-width: 960px){ #probefahrt.rowpf{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width: 620px){ #probefahrt.rowpf{ grid-template-columns:1fr; } } /* Respektiere „Reduce motion“ */ @media (prefers-reduced-motion: reduce){ #probefahrt .column{ transition:none } }