/* =========================================
   GRID LAYOUT (Bleibt unverändert - funktioniert ja gut)
   ========================================= */
.car-tiles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.car-tiles-grid__side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.car-tiles-grid__side-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

/* =========================================
   TILES & ASPECT RATIOS
   ========================================= */
.car-tile {
    position: relative;
    overflow: hidden;
    background: #000;
    width: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.car-tile--large {
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
}

.car-tile--wide {
    aspect-ratio: 2 / 1;
    height: auto;
    flex-grow: 1;
}

.car-tile--small {
    aspect-ratio: 1 / 1;
    height: auto;
}

/* =========================================
   BILD & OVERLAY (HIER IST DIE ÄNDERUNG)
   ========================================= */
.car-tile__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 0.5s ease;
    z-index: 0;
}

.car-tile__bg--noimg {
    background: #222;
}

/*
   DER HARTE 50% SCHATTEN (RECHTS)
   Trick: Wir nutzen background-size: 50% 100%
   und positionieren es rechts ("right top").
   Dadurch bleibt die linke Seite komplett leer (kein Schatten).
*/
/*.car-tile__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background-image: linear-gradient(
            to top,
            rgba(0,0,0,0.95) 0%,   !* Ganz unten dunkel *!
            rgba(0,0,0,0.5) 15%,   !* Nimmt schnell ab *!
            transparent 30%        !* Ab 30% der Höhe ist der Schatten weg *!
    );

    !* Die Geometrie: Nur rechte Hälfte, volle Höhe (damit der Verlauf berechnet werden kann) *!
    background-size: 50% 100%;
    background-position: right bottom;
    background-repeat: no-repeat;
}*/

/* =========================================
   INHALTE
   Da der Schatten rechts ist, sieht der Text rechtsbündig
   oder auf der rechten Seite oft besser aus.
   Ich lasse ihn aber über die volle Breite,
   damit lange Titel Platz haben.
   ========================================= */
.car-tile__tags {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.car-tile__tag {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--theme-palette-color-2);
    color: #000;
    border: none;
    letter-spacing: 0.5px;
    display: inline-block;
}

.car-tile__content {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    width: auto;
    z-index: 10;
    pointer-events: none;
    /* Optional: Text rechtsbündig machen, da dort der Schatten ist?
       Falls gewünscht: text-align: right; hinzufügen. */
}

.car-tile__title {
    margin: 0;
    color: #ffffff;
    line-height: 1.15;
    font-weight: 700;
    /* Text-Shadow hilft, falls der Text in den hellen linken Bereich ragt */
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* Schriftgrößen */
.car-tile--large .car-tile__title { font-size: 32px; }
.car-tile--wide  .car-tile__title { font-size: 24px; }
.car-tile--small .car-tile__title { font-size: 18px; }

/* Hover Effekte */
.car-tile:hover .car-tile__bg { transform: scale(1.05); }
.car-tile:hover .car-tile__title { color: var(--theme-palette-color-2); }


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1200px) {
    .car-tile--large .car-tile__title { font-size: 26px; }
    .car-tile--wide  .car-tile__title { font-size: 20px; }
    .car-tile__content { left: 20px; right: 20px; bottom: 20px; }
}

@media (max-width: 900px) {
    .car-tiles-grid { grid-template-columns: 1fr; }

    /* Mobile: Harte Kante entfernen oder beibehalten?
       Ich lasse sie hier drin, damit das Design konsistent ist. */

    .car-tile--large { aspect-ratio: unset; min-height: 450px; }
    .car-tile--wide  { aspect-ratio: unset; min-height: 280px; }

    .car-tiles-grid__side-bottom { grid-template-columns: 1fr 1fr; }
    .car-tile--small { aspect-ratio: 1 / 1; }
}

@media (max-width: 600px) {
    .car-tiles-grid__side-bottom { grid-template-columns: 1fr; }
    .car-tile--large { min-height: 360px; }
    .car-tile--wide  { min-height: 240px; }
    .car-tile--small { aspect-ratio: unset; min-height: 240px; }

    .car-tile--large .car-tile__title { font-size: 22px; }
    .car-tile--wide  .car-tile__title { font-size: 18px; }
    .car-tile--small .car-tile__title { font-size: 18px; }
}