/* css/pages/references.css - Styles spezifisch für "Unser Autopark" Seite (ehemals Referenzen) */

.references-hero-section {
    padding: 60px 0 80px 0; /* Oben 60px, Unten 80px Padding für einen weicheren Übergang */
    padding-top: calc(var(--main-header-height-desktop) + 10px);
    color: var(--primary-color);
    text-align: center;
    
    /* NEU: Der Verlauf startet jetzt hier in der oberen Sektion und läuft nach unten durch */
    background: linear-gradient(to bottom, var(--mid-bg-color) 0%, #1a1a1a 100%);
}

.references-hero-section h1 {
    font-size: 3em;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.references-hero-section .lead-text {
    font-size: 1.2em;
    max-width: 800px;
    margin: 0 auto;
    color: var(--text-color-dark);
}

/* Die Sektion für das Widget hat jetzt einen transparenten Hintergrund */
.autopark-iframe-section {
    background-color: transparent; /* WICHTIG: Damit der Verlauf von oben durchscheint */
    padding-bottom: 60px; /* Etwas Abstand am Ende der Seite */
}

/* KORRIGIERT: Der Wrapper wird stark vereinfacht, um das Scrollen zu ermöglichen */
.iframe-wrapper {
    /* Alle alten Eigenschaften (height, overflow, shadow etc.) werden entfernt. */
    /* Dies behebt das Scroll-Problem und entfernt den Kasten-Effekt. */
    max-width: 100%;
}

/* Das ist eine alte Regel für den iFrame und wird nicht mehr benötigt. */
/* Sie kann gelöscht oder zur Sicherheit belassen werden. */
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive Anpassungen für Autopark-Seite */
@media (max-width: 992px) {
    .references-hero-section {
        padding-top: calc(var(--main-header-height-md) + 10px);
    }
    .references-hero-section h1 {
        font-size: 2.8em;
    }
    .references-hero-section .lead-text {
        font-size: 1.1em;
    }
}

@media (max-width: 768px) {
    .references-hero-section {
        padding-top: calc(var(--main-header-height-sm) + 10px);
    }
    .references-hero-section h1 {
        font-size: 2.5em;
    }
    .references-hero-section .lead-text {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .references-hero-section h1 {
        font-size: 2em;
    }
}