/* =====================================================================
   DREHMOMENT CSS-BUCKET 03: LAYOUT & GRID SYSTEM (MOBILE-FIRST)
   ===================================================================== */

/* Reset & Global Box Model */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    background-color: var(--primary-dark);
}

body {
    background-color: var(--primary-dark);
    overflow-x: hidden;
}

/* 1200px Container Gesetz */
.container--v2 {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem; /* Etwas Puffer für mobile Bildschirme */
}

@media (min-width: 768px) {
    .container--v2 {
        padding: 0 2rem;
    }
}

/* Section Spacing - Clean Industrial Rhythm */
section {
    padding: 5rem 0;
    position: relative;
}

@media (min-width: 768px) {
    section {
        padding: 8rem 0;
    }
}

/* ---------------------------------------------------------------------
   GRID SYSTEM (MOBILE-FIRST)
   --------------------------------------------------------------------- */

/* Symmetrisches 3-Spalten Grid (für 6 Reparaturkacheln) */
.grid-3-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .grid-3-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-3-cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Symmetrisches 4-Spalten Grid (für 8 Reparaturkacheln) */
.grid-4-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .grid-4-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-4-cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .grid-4-cols {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Split-Layout (2 Spalten für Fuhrpark, Über Uns und Kontakt) */
.split-layout,
.split-layout-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .split-layout {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    
    /* Über uns Split: 1.2fr links (Text) zu 0.8fr rechts (Bild) */
    .split-layout-v2 {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 5rem;
    }
}

/* ---------------------------------------------------------------------
   BENTO GRID (AHW ZUSATZLEISTUNGEN)
   --------------------------------------------------------------------- */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Fuhrpark belegt die gesamte Breite auf Tablet */
    .fleet-card {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 350px); /* 2 Reihen für Asymmetrie */
    }
    
    .fleet-card {
        grid-column: span 2;
        grid-row: span 2;
    }
    
    .trade-card {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .brokerage-card {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .detailing-card {
        grid-column: span 2;
        grid-row: span 1;
    }
    
    .sales-card {
        grid-column: span 4; /* Volle Breite für das Karussell */
        grid-row: auto; /* Höhe wird durch Inhalt bestimmt */
        min-height: 450px;
    }
}

/* Image Aspect Ratio Wrapper (Die goldene Bilder-Regel) */
.image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--card-border);
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-smooth);
}