/* ------------------------------------------------------------------------------ */
/* Pfad: /assets/css/home.css                                                     */
/* ------------------------------------------------------------------------------ */
.grid-layout { display: grid; width: 100%; gap: 24px; }
.action-grid { grid-template-columns: repeat(3, 1fr); }
.card-main { grid-column: span 2; }
.card-full { grid-column: 1 / -1; }
.card-footer-action { margin-top: auto; padding-top: 15px; }
.btn-auto-width { align-self: flex-start; }
.hero { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; overflow: hidden; width: 100%; min-height: 420px; padding: 60px; border: 1px solid var(--border-color); border-radius: var(--radius-main); background-color: var(--card-bg); box-shadow: var(--shadow-card); text-align: left; }
.hero::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-image: linear-gradient(90deg, var(--card-bg) 25%, rgba(254,254,254,0.85) 55%, rgba(254,254,254,0) 90%), url('/assets/img/home/parts.webp'); background-size: cover; background-position: center right; pointer-events: none; }
html[data-theme="dark"] .hero::before { background-image: linear-gradient(90deg, var(--card-bg) 25%, rgba(20,22,24,0.85) 55%, rgba(20,22,24,0) 90%), url('/assets/img/home/parts.webp'); }
.hero-title, .hero-subtitle, .hero-text, .hero .btn-group { position: relative; z-index: 2; }
.hero-title { margin-bottom: 16px; font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 900; line-height: 1.2; letter-spacing: -0.5px; text-align: left; }
.hero-subtitle { display: block; margin-top: 8px; margin-bottom: 16px; font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 600; color: var(--text-primary); opacity: 0.95; }
.hero-text { max-width: 620px; margin-bottom: 25px; font-size: 1.05rem; font-weight: 500; color: var(--text-secondary); text-align: left; }
.bg-beratung::after { background-image: url('/assets/img/home/beratung.webp'); }
.bg-abholung::after { background-image: url('/assets/img/home/abholung.webp'); }
.bg-vin::after { background-image: url('/assets/img/home/vin.webp'); }
@media (max-width: 950px) { .hero { min-height: auto; padding: 35px 20px; } .hero::before { background-image: linear-gradient(180deg, var(--card-bg) 65%, rgba(254,254,254,0.7) 100%), url('/assets/img/home/parts.webp'); background-position: center; } html[data-theme="dark"] .hero::before { background-image: linear-gradient(180deg, var(--card-bg) 65%, rgba(20,22,24,0.7) 100%), url('/assets/img/home/parts.webp'); background-position: center; } .action-grid { grid-template-columns: 1fr; } .card-main, .card-full { grid-column: span 1; } .card { padding: 22px; scroll-margin-top: 80px; } .btn-group, .hero .btn-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); width: 100%; gap: 10px; } .btn-group .btn-primary { height: 44px; min-height: 44px; padding: 0 12px; font-size: 0.85rem; } }