/* ============================================================
   Emauto Homepage Enhancement — dieCar-inspirierter Design-Polish
   ------------------------------------------------------------
   Nicht-destruktive Schicht: wird NACH Blocs all.css + style.css
   geladen. Alle Regeln sind auf Homepage-Sektions-IDs gescoped,
   damit andere Seiten unberührt bleiben. Überschreibt KEIN Markup.
   Rückgängig machbar: Enqueue-Zeile in functions/enqueue-styles.php
   entfernen → alles wie vorher.
   ============================================================ */

/* --- 1) Premium-Typografie für Section-Headlines ------------- */
#fahrzeugbestand h2,
#how-it-works h2,
#warum-an-uns h2,
#ankauf h2,
#noch-fragen h2,
#map h2 {
    font-family: 'GothicA1-Bold', 'GothicA1-SemiBold', sans-serif;
    letter-spacing: -0.6px;
    line-height: 1.14;
}
#how-it-works h2,
#warum-an-uns h2 {
    font-size: 34px;
}
@media (max-width: 768px) {
    #how-it-works h2,
    #warum-an-uns h2 { font-size: 26px; }
}

/* --- 2) "So funktioniert's": 3 Schritte als Karten ----------- */
/* Nur vertikales Padding/Radius/Shadow — KEIN horizontales Margin,
   damit das Bootstrap-Grid (col-lg-2 / offset-lg-3) intakt bleibt. */
#how-it-works .col-lg-2 {
    background: #ffffff;
    border: 1px solid #ececf0;
    border-radius: 18px;
    padding: 28px 20px 24px;
    margin-top: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: transform .2s ease, box-shadow .2s ease;
}
#how-it-works .col-lg-2:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.08);
}
#how-it-works .col-lg-2 h6 {
    font-family: 'GothicA1-SemiBold', sans-serif;
    font-size: 17px;
    letter-spacing: -0.2px;
}

/* --- 3) "Warum an uns": Bild-Karten mit Hover --------------- */
#warum-an-uns .col-md-4 img {
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    transition: transform .28s ease, box-shadow .28s ease;
}
#warum-an-uns .col-md-4:hover img {
    transform: scale(1.015);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
#warum-an-uns h3 {
    font-family: 'GothicA1-SemiBold', sans-serif;
    letter-spacing: -0.3px;
    font-size: 22px;
}

/* --- 4) Buttons: dieCar-Pill-Stil (Homepage-scope) ---------- */
#noch-fragen .btn,
#fahrzeugbestand .btn {
    border-radius: 40px !important;
    padding: 14px 32px !important;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin: 8px 6px 0 !important;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
#noch-fragen .btn:hover,
#fahrzeugbestand .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

/* --- 5) "Ankauf": luftigere Checklisten -------------------- */
#ankauf h6 {
    line-height: 2 !important;
    letter-spacing: 0.2px;
}

/* --- 6) Sektions-Rhythmus (etwas mehr Luft) ---------------- */
#warum-an-uns .bloc-md,
#fahrzeugbestand .bloc-md {
    padding-top: 56px;
    padding-bottom: 56px;
}

/* ============================================================
   7) FAHRZEUG-CAROUSEL (wird per the_content-Filter in
      functions.php auf der Homepage eingefügt)
   ============================================================ */
#fahrzeugbestand { background:#f7f8fa; padding:56px 16px; }
#fahrzeugbestand .emauto-fb-inner { max-width:1200px; margin:0 auto; }
#fahrzeugbestand .emauto-fb-head {
    display:flex; justify-content:space-between; align-items:flex-end;
    flex-wrap:wrap; gap:16px; margin-bottom:24px;
}
#fahrzeugbestand .emauto-fb-title {
    margin:0; font-family:'GothicA1-Bold','GothicA1-SemiBold',sans-serif;
    font-size:34px; line-height:1.12; font-weight:800; color:#1b1b21; letter-spacing:-0.6px;
}
#fahrzeugbestand .emauto-fb-sub { margin:8px 0 0; color:#6a6a6a; font-size:15px; max-width:540px; }
#fahrzeugbestand .emauto-fb-cta {
    display:inline-flex; align-items:center; gap:8px; background:#1b1b21; color:#fff;
    padding:13px 26px; border-radius:40px; font-weight:600; font-size:15px;
    text-decoration:none; white-space:nowrap; transition:background .2s, transform .15s;
}
#fahrzeugbestand .emauto-fb-cta:hover { background:#333; color:#fff; transform:translateX(2px); }
#fahrzeugbestand .emauto-fahrzeug-carousel { position:relative; }
#fahrzeugbestand .emauto-fahrzeug-carousel .mobiwp-newest-headline { display:none; }
#fahrzeugbestand .emauto-fahrzeug-carousel .mobiwp { margin:0; }
#fahrzeugbestand .emauto-fahrzeug-carousel .mobiwp-grid {
    display:flex !important; gap:18px; overflow-x:auto;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:4px 2px 20px; scrollbar-width:thin; grid-template-columns:none !important;
}
#fahrzeugbestand .emauto-fahrzeug-carousel .mobiwp-grid::-webkit-scrollbar { height:6px; }
#fahrzeugbestand .emauto-fahrzeug-carousel .mobiwp-grid::-webkit-scrollbar-thumb { background:#ccc; border-radius:3px; }
#fahrzeugbestand .emauto-fahrzeug-carousel .mobiwp-griditem { flex:0 0 300px; max-width:300px; scroll-snap-align:start; }
#fahrzeugbestand .emauto-fb-cta-mobile { display:none; }
@media (min-width:769px){
    #fahrzeugbestand .emauto-fahrzeug-carousel::after {
        content:""; position:absolute; top:0; right:0; bottom:20px; width:60px;
        pointer-events:none; background:linear-gradient(to right, rgba(247,248,250,0), #f7f8fa);
    }
}
@media (max-width:768px){
    #fahrzeugbestand { padding:40px 0; }
    #fahrzeugbestand .emauto-fb-inner { padding:0 12px; }
    #fahrzeugbestand .emauto-fb-head .emauto-fb-cta { display:none; }
    #fahrzeugbestand .emauto-fb-title { font-size:26px; }
    #fahrzeugbestand .emauto-fahrzeug-carousel .mobiwp-griditem { flex:0 0 82vw; max-width:82vw; }
    #fahrzeugbestand .emauto-fb-cta-mobile {
        display:flex; justify-content:center; align-items:center; gap:8px; margin:16px 4px 0;
        background:#1b1b21; color:#fff; padding:15px; border-radius:12px; font-weight:600;
        text-decoration:none; font-size:15px;
    }
}