/* ─────────────────────────────────────────────────────────────
   bewegung.css  –  Autowelt Trier
   Einheitliche, dezente Bewegung nach Vorbild von finddeinteil
   (eine Bewegungskurve, kurze Dauern), dazu Handy-Menü, Handy-
   Leiste (Anrufen + WhatsApp) und der getönte Fahrzeugbestand.

   Wird nach css/site-2026.css geladen. Gehört zu js/bewegung.js.
   Grundsätze:
   - Nur transform/opacity werden animiert.
   - Versteckt wird erst, wenn js/bewegung.js "aw-bewegung" am
     <html> gesetzt hat. Ohne JavaScript ist alles normal sichtbar.
   - "Bewegung reduzieren": keine Klasse "aw-bewegung", alles steht
     sofort; Hover hebt nicht an.
   ───────────────────────────────────────────────────────────── */

:root {
    --aw-kurve: cubic-bezier(0.22, 1, 0.36, 1);
    --aw-dauer: 0.35s;
}

/* ── 1) Überschrift auf der Startseite: nie breiter als das Handy ──── */

/* Das Raster des Startbereichs wuchs bisher auf die Breite des
   längsten Worts ("Gebrauchtwagen") – am Handy ca. 437 px statt 390 px,
   rechts abgeschnitten. minmax(0, 1fr) hält es auf Bildschirmbreite. */
.s26-hero { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 560px) {
    .s26-h1 { font-size: min(42px, 9.4vw); }
}

/* ── 2) Handy-Menü (Hamburger) ─────────────────────────────────────── */

.aw-menue-knopf { display: none; order: 99; }   /* immer ganz rechts, auch wenn lang.js den Sprachknopf später anhängt */

@media (max-width: 960px) {
    html.aw-menue nav .nav-links,
    html.aw-menue .s26-home nav .nav-links {
        display: flex !important;
        position: fixed; left: 0; right: 0; top: var(--aw-nav-unten, 69px);
        flex-direction: column; align-items: stretch; gap: 2px !important;
        padding: 10px 16px 18px; margin: 0;
        background: rgba(10, 18, 34, 0.97);
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
        opacity: 0; transform: translateY(-8px);
        visibility: hidden; pointer-events: none;
        transition: opacity 0.22s var(--aw-kurve), transform 0.22s var(--aw-kurve), visibility 0s linear 0.22s;
    }
    html.aw-menue nav.aw-offen .nav-links {
        opacity: 1; transform: none; visibility: visible; pointer-events: auto;
        transition: opacity 0.22s var(--aw-kurve), transform 0.22s var(--aw-kurve), visibility 0s;
    }
    html.aw-menue nav .nav-links li,
    html.aw-menue nav .nav-links li:not(:last-child) { display: block !important; }
    html.aw-menue nav .nav-links a {
        display: block; padding: 14px 12px !important; font-size: 1rem !important;
        letter-spacing: 0.04em; border: 0 !important; border-radius: 10px;
    }
    html.aw-menue nav .nav-links a::after { display: none; }
    html.aw-menue nav .nav-links .nav-contact-btn { margin-top: 8px; text-align: center; }

    html.aw-menue .aw-menue-knopf {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; margin-left: 8px; padding: 0;
        background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px;
        color: #f2f5fa; cursor: pointer;
    }
    .aw-menue-knopf span { position: relative; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: background 0.2s; }
    .aw-menue-knopf span::before,
    .aw-menue-knopf span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.25s var(--aw-kurve); }
    .aw-menue-knopf span::before { transform: translateY(-6px); }
    .aw-menue-knopf span::after  { transform: translateY(6px); }
    nav.aw-offen .aw-menue-knopf span { background: transparent; }
    nav.aw-offen .aw-menue-knopf span::before { transform: rotate(45deg); }
    nav.aw-offen .aw-menue-knopf span::after  { transform: rotate(-45deg); }

    /* Sprachknopf und Hamburger rechts nebeneinander */
    html.aw-menue nav .lang-toggle { margin-left: auto; }
    html.aw-menue nav { gap: 0; }
    html.aw-menue nav .nav-logo { margin-right: auto; }
}

/* ── 3) Handy-Leiste unten: Anrufen + WhatsApp ────────────────────── */

.aw-leiste { display: none; }

@media (max-width: 960px) {
    .aw-leiste {
        position: fixed; left: 12px; right: 12px; z-index: 8100;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px;
        border-radius: 20px;
        background: rgba(15, 26, 48, 0.86);
        border: 1px solid rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
        font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    }
    .aw-leiste a {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        min-height: 48px; border-radius: 14px;
        font-size: 15px; font-weight: 700; text-decoration: none;
        transition: transform 0.16s var(--aw-kurve);
    }
    .aw-leiste a:active { transform: scale(0.97); }
    .aw-leiste svg { width: 18px; height: 18px; flex: none; }
    .aw-leiste .aw-anrufen { background: #ffb547; color: #1c1303; }
    .aw-leiste .aw-whatsapp { background: #25D366; color: #06290f; }

    /* Platz unter dem Seitenende, damit die Leiste nichts verdeckt */
    html.aw-leiste-an body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    /* Der runde WhatsApp-Knopf wäre doppelt – am Handy übernimmt die Leiste */
    html.aw-leiste-an .wa-float { display: none !important; }
    html.aw-leiste-an #ckBanner { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media print { .aw-leiste, .aw-menue-knopf { display: none !important; } }

/* ── 4) Fahrzeugkarten: sanft anheben, Bild leicht zoomen ─────────── */

.car-card,
.s26-car {
    transition: transform var(--aw-dauer) var(--aw-kurve),
                box-shadow var(--aw-dauer) var(--aw-kurve),
                border-color var(--aw-dauer) var(--aw-kurve) !important;
}
.car-photo,
.car-photo-item img,
.s26-car .s26-img img { transition: transform 0.6s var(--aw-kurve) !important; }

@media (hover: hover) and (pointer: fine) {
    .car-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(13, 27, 42, 0.14); }
    .car-card:hover .car-photo,
    .car-card:hover .car-photo-item img,
    .s26-car:hover .s26-img img { transform: scale(1.04); }
    .s26-car:hover { transform: translateY(-4px); }
}

/* Gleiten beim Laden/Reinscrollen nacheinander (js/bewegung.js setzt
   --aw-warte und .aw-da). Die alte Kachel-Animation (.reveal) aus
   fahrzeuge.html wird hier ersetzt. */
/* Neue Karten starten verborgen (ohne Aufblitzen); sobald js/bewegung.js
   sie übernimmt oder der alte Beobachter "reveal" entfernt, sind sie da. */
html.aw-bewegung .car-card.reveal { animation: none; opacity: 0; }
html.aw-bewegung .aw-gleiten:not(.aw-da) { opacity: 0; transform: translateY(14px); }
html.aw-bewegung .aw-gleiten {
    transition: opacity 0.4s var(--aw-kurve) var(--aw-warte, 0ms),
                transform 0.4s var(--aw-kurve) var(--aw-warte, 0ms),
                box-shadow var(--aw-dauer) var(--aw-kurve),
                border-color var(--aw-dauer) var(--aw-kurve) !important;
}
/* Nach dem Einblenden wieder ohne Verzögerung, damit Hover sofort reagiert */
html.aw-bewegung .aw-gleiten.aw-fertig { transition: transform var(--aw-dauer) var(--aw-kurve), box-shadow var(--aw-dauer) var(--aw-kurve), border-color var(--aw-dauer) var(--aw-kurve) !important; }

/* Startseite: gleiche Kurve, kürzer und kleiner als bisher (900 ms / 28 px) */
.s26-reveal { transition: opacity 0.5s var(--aw-kurve), transform 0.5s var(--aw-kurve); transition-delay: calc(var(--i, 0) * 60ms); }
.js .s26-reveal:not(.seen) { transform: translateY(14px); }

/* Diashow: 4,5 s pro Bild (js/site-2026.js, DAUER), Pause bei Hover */
.s26-dots button.on::after { animation-duration: 4.5s; }
.s26-hero.s26-pause .s26-dots button.on::after,
.s26-hero.s26-pause .s26-slide.on img { animation-play-state: paused; }

/* ── 5) Fahrzeuge-Seite: getönt statt grellweiß, dunkles Band oben ── */

body.aw-bestand { background: #eef1f6; }

body.aw-bestand .page-header {
    background: radial-gradient(120% 140% at 85% 0%, #1d3766 0%, #0f1a30 45%, #0a1222 100%);
    border-bottom: 0;
    padding-top: 8.5rem;
    animation: none;
}
body.aw-bestand .page-title { color: #f2f5fa; font-family: 'Archivo', 'Inter', sans-serif; font-stretch: 112%; font-weight: 800; }
body.aw-bestand .section-eyebrow { color: #ffb547; }
body.aw-bestand .section-eyebrow::before { background: #ffb547; }
body.aw-bestand .count-badge {
    color: #f2f5fa; background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18); border-radius: 999px;
}

body.aw-bestand .filter-section { background: transparent; border-bottom: 0; padding-bottom: 0; }
body.aw-bestand .filter-inner {
    background: #ffffff; border: 1px solid #dfe4ec; border-radius: 18px;
    padding: 1.75rem 2rem; box-shadow: 0 2px 10px rgba(13, 27, 42, 0.05);
}
body.aw-bestand .filter-results { background: #f2f5fa; }
body.aw-bestand .cars-section { background: transparent; }
body.aw-bestand .car-card { border-color: #dfe4ec; }

@media (max-width: 820px) {
    body.aw-bestand .page-header { padding-top: 7.5rem; }
    body.aw-bestand .filter-section { padding: 1.25rem 1rem 0; }
    body.aw-bestand .filter-inner { padding: 1.25rem; }
    body.aw-bestand .cars-section { padding-inline: 1rem; }
}

/* ── 6) Bewegung reduzieren ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .aw-gleiten, .car-card.reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
    .car-card:hover, .s26-car:hover { transform: none !important; }
    .car-card:hover .car-photo,
    .car-card:hover .car-photo-item img,
    .s26-car:hover .s26-img img { transform: none !important; }
    html.aw-menue nav .nav-links, .aw-menue-knopf span::before, .aw-menue-knopf span::after { transition: none !important; }
}

/* Kontakt-Knopf im Menü: dunkle Schrift auf Orange (vorher überschrieb
   die allgemeine Link-Farbe aus site-2026.css sie mit Hellgrau) */
nav .nav-links a.nav-contact-btn { color: #1c1303 !important; }