/* ============================================= */
/* TRUST SECTION                                 */
/* ============================================= */
#trust {
    border-bottom: 1px solid var(--border-color);
}

.trust-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei Spalten für Desktop */
    align-items: center;
    gap: var(--space-xl);
}

.trust-logo {
    max-width: 250px;
    margin-bottom: var(--space-md);
}

.trust-content-block h2 {
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    margin-bottom: var(--space-md);
    line-height: 1.3;
}

.social-proof-block {
    display: grid;
    gap: var(--space-md);
}

.social-proof-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--light-color);
    padding: var(--space-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-color);
    transition: all var(--transition-speed) ease;
}

.social-proof-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: var(--primary-color);
}

/* NEU */
.social-proof-card .social-proof-logo {
    flex-shrink: 0;
    height: 100px; /* Vergrößert von 50px */
    width: 100px;  /* Vergrößert von 50px */
    object-fit: contain;
}

.social-proof-text strong {
    color: var(--dark-color);
    font-size: 1.1rem;
    display: block;
}

.social-proof-text span {
    font-size: 0.9rem;
    color: var(--text-color-light);
}

/* Responsive Anpassung für Tablets und Handys */
@media (max-width: 992px) {
    .trust-grid-container {
        grid-template-columns: 1fr; /* WICHTIG: Nur eine Spalte auf Mobilgeräten */
        gap: var(--space-lg);
        text-align: center;
    }

    .trust-logo {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================= */
/* WELCOME SECTION (FINAL VIDEO-ON-HOVER VERSION) */
/* ============================================= */
.welcome-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.feature-card {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    aspect-ratio: 4 / 3;
    transition: all var(--transition-speed) ease;
    cursor: pointer;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.feature-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed) ease;
}

.feature-card:hover video {
    transform: scale(1.05);
}

/* --- Overlay & Text are now always visible --- */
.feature-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    color: var(--light-color);
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    z-index: 2; /* Ensures it's above the video and play icon */
}

.feature-card-overlay h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    color: var(--light-color);
}

/* --- Play icon styling --- */
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.feature-card:hover .play-icon {
    opacity: 0; /* Icon disappears on hover */
}

/* --- Call-to-Action at the bottom --- */
.welcome-cta {
    text-align: center;
    margin-top: var(--space-lg);
    font-size: 1.5rem;
    font-weight: 600;
}
.welcome-cta p {
    color: var(--dark-color);
}
/* ============================================= */
/* STILE FÜR UNTERSEITEN-VORLAGE               */
/* ============================================= */
.page-header {
    background-color: transparent;
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--border-color);
    margin-top: calc(-1 * var(--space-xl));
    margin-bottom: var(--space-lg); /* NEU: Abstand nach unten hinzugefügt */
}

.page-header h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0;
}

.page-content .container {
    max-width: 800px; /* Bessere Lesbarkeit für Text-Seiten */
}

.page-content {
    margin-bottom: var(--space-xl); /* NEU: Fügt einen großen Abstand vor dem Footer hinzu */
}

.cta-button-wrapper {
    text-align: center;
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
}
.cta-button-wrapper .btn-primary {
    display: inline-block;
    width: auto;
}
/* Styling für Benachrichtigungen (z.B. im Anfrageformular) */
.notice {
    padding: var(--space-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-lg);
    font-weight: 500;
    border: 1px solid;
}
.notice.success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}
.notice.error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}
/* ============================================= */
/* HOW IT WORKS SECTION                          */
/* ============================================= */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.step-box {
    text-align: center;
    padding: var(--space-md);
    background-color: var(--light-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    transition: all var(--transition-speed) ease;
}

.step-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.step-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--light-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
    transition: transform var(--transition-speed) ease;
}

.step-box:hover .step-icon-wrapper {
    transform: scale(1.1) translateY(-5px);
}

.step-box h3 {
    font-size: 1.3rem;
    margin-bottom: var(--space-xs);
    color: var(--dark-color);
}

.step-box p {
    color: var(--text-color-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

.section-cta {
    text-align: center;
}

.section-cta .btn-primary {
    width: auto;
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
}

/* Responsive Anpassung */
@media (max-width: 992px) {
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }
}
/* ============================================= */
/* OUR FLEET SECTION                             */
/* ============================================= */
.fleet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.vehicle-card {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: all var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
}

.vehicle-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.vehicle-card-image {
    background-color: var(--grey-bg);
}

.vehicle-card-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 20 / 10;
    object-fit: cover;
}

.vehicle-card-content {
    padding: var(--space-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.vehicle-card-content h3 {
    font-size: 1.3rem;
    color: var(--dark-color);
    margin-bottom: 0;
}

.vehicle-card-content .vehicle-model {
    color: var(--text-color-light);
    font-size: 0.9rem;
    margin-bottom: var(--space-sm);
}

.vehicle-specs {
    display: flex;
    gap: var(--space-md);
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-sm);
    margin-top: auto; /* Schiebt die Specs nach unten */
}

.vehicle-specs span {
    font-weight: 600;
    color: var(--text-color);
}

.vehicle-specs span i {
    margin-right: var(--space-xs);
    color: var(--primary-color);
}

/* Responsive Anpassung */
@media (max-width: 992px) {
    .fleet-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .fleet-grid {
        grid-template-columns: 1fr;
    }
}
/* ============================================= */
/* OUR DRIVERS SECTION                           */
/* ============================================= */
.drivers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.driver-card {
    text-align: center;
}

.driver-card img {
    width: 180px;
    height: 180px;
    border-radius: 50%; /* Macht die Bilder rund */
    object-fit: cover;
    margin-bottom: var(--space-md);
    border: 4px solid var(--light-color);
    box-shadow: var(--shadow-medium);
    transition: all var(--transition-speed) ease;
}

.driver-card:hover img {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.driver-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0;
}

.driver-card p {
    color: var(--text-color-light);
    font-size: 1rem;
}

/* Responsive Anpassung */
@media (max-width: 992px) {
    .drivers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
}

@media (max-width: 576px) {
    .driver-card img {
        width: 150px;
        height: 150px;
    }
}
/* ============================================= */
/* HOTEL TRANSFER SECTION (NEW MODERN DESIGN)    */
/* ============================================= */
.hotel-transfer-grid-modern {
    display: grid;
    grid-template-columns: 1fr; /* On mobile, stack them */
    align-items: center;
    gap: var(--space-xl);
}

@media (min-width: 992px) {
    .hotel-transfer-grid-modern {
        grid-template-columns: 1fr 1fr; /* Side-by-side on desktop */
    }
}

.hotel-image-gallery {
    position: relative;
    width: 100%;
    height: 450px; /* Fixed height for the gallery */
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.hotel-image-gallery .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hotel-image-gallery .slide.active {
    opacity: 1;
}

.hotel-image-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hotel-price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}
/* ============================================= */
/* HOTEL TRANSFER SECTION (PRICE CARDS)          */
/* ============================================= */
.hotel-price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.hotel-price-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--grey-bg);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.hotel-price-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-light);
    border-color: var(--primary-color);
}

.hotel-price-card .hotel-name {
    font-weight: 600;
    color: var(--dark-color);
}

.hotel-price-card .hotel-price {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary-color);
    background-color: var(--light-color);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 20px;
}
/* ============================================= */
/* PACKAGES SECTION (IMPROVED VERSION V2)        */
/* ============================================= */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

/* NEU: Spezifische Regel für Desktop-Ansicht (4 Spalten) */
@media (min-width: 1200px) {
    .packages-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.package-card, .package-item .package-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    min-height: 400px;
    padding: var(--space-md);
    border-radius: var(--border-radius);
    overflow: hidden;
    color: var(--light-color);
    text-decoration: none;
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-light);
    transition: all var(--transition-speed) ease;
}

.package-card::before, .package-item .package-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
    transition: all var(--transition-speed) ease;
}

/* Farb-Overlay für Pastell-Effekt */
.package-card::after, .package-item .package-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark-color); /* Standard-Fallback */
    opacity: 0.2; /* Stärke des Farb-Overlays */
    z-index: 0;
    transition: all var(--transition-speed) ease;
}

.package-card:hover, .package-item:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: var(--shadow-medium);
}
.package-card:hover::before, .package-item:hover .package-header::before {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.2) 100%);
}
.package-card:hover::after, .package-item:hover .package-header::after {
    opacity: 0.1;
}

/* Zuweisung der Pastellfarben für BEIDE Seiten */
.package-card:nth-of-type(8n+1)::after, .package-item:nth-of-type(8n+1) .package-header::after { background-color: #a2d2ff; }
.package-card:nth-of-type(8n+2)::after, .package-item:nth-of-type(8n+2) .package-header::after { background-color: #bde0fe; }
.package-card:nth-of-type(8n+3)::after, .package-item:nth-of-type(8n+3) .package-header::after { background-color: #ffafcc; }
.package-card:nth-of-type(8n+4)::after, .package-item:nth-of-type(8n+4) .package-header::after { background-color: #ffc8dd; }
.package-card:nth-of-type(8n+5)::after, .package-item:nth-of-type(8n+5) .package-header::after { background-color: #cdb4db; }
.package-card:nth-of-type(8n+6)::after, .package-item:nth-of-type(8n+6) .package-header::after { background-color: #d7e3fc; }
.package-card:nth-of-type(8n+7)::after, .package-item:nth-of-type(8n+7) .package-header::after { background-color: #e9edc9; }
.package-card:nth-of-type(8n+8)::after, .package-item:nth-of-type(8n+8) .package-header::after { background-color: #fcf6bd; }


.package-card-content, .package-header-content {
    position: relative;
    z-index: 2;
}

.package-card .package-price, .package-header .package-price {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--light-color);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.package-card h3, .package-header h2 {
    color: var(--light-color);
    font-size: 1.5rem;
    margin-bottom: var(--space-xs);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.package-card p, .package-header-content p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* Responsive Anpassung für die Detailansicht auf der packages.php */
@media (max-width: 992px) {
    .package-details-grid {
        grid-template-columns: 1fr;
    }
    .package-header {
        height: 300px;
    }
}
/* ============================================= */
/* WE ARE PROUD SECTION (BUNTERES DESIGN)        */
/* ============================================= */
#proud {
    /* NEU: Lebendiger Farbverlauf als Hintergrund */
    background: linear-gradient(135deg, #0d6efd, #6f42c1); /* Verlauf von Blau zu Violett */
    text-align: center;
    padding: var(--space-xl) 0; /* Stellt sicher, dass der Padding-Wert hier ist */
}

#proud h2,
#proud p {
    color: var(--light-color);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* Leichter Schatten für Lesbarkeit */
}

#proud .proud-content {
    max-width: 800px;
    margin: 0 auto;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin: var(--space-lg) 0;
}

.stat-number {
    display: block;
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    color: var(--light-color); /* NEU: Helle Farbe für besseren Kontrast */
    line-height: 1;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.25);
}

.stat-label {
    display: block;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: var(--space-xs);
}

@media (max-width: 576px) {
    .stats-grid {
        flex-direction: column;
        gap: var(--space-lg);
    }
}
/* ============================================= */
/* DETAILSEITE: OUR FLEET (VERTIKALES LAYOUT)    */
/* ============================================= */
.page-lead-text {
    font-size: 1.2rem;
    color: var(--text-color-light);
    margin-bottom: var(--space-lg);
    max-width: 700px;
}

.fleet-detail-list .vehicle-detail-card {
    margin-bottom: var(--space-lg);
}

.vehicle-detail-card {
    /* Kein Grid mehr hier, nur ein einfacher Container */
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    overflow: hidden;
}

/* Block 1: Die Bildergalerie */
.vehicle-gallery .main-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9; /* Breites, kinoleinwandartiges Format für das Bild */
    object-fit: cover;
    display: block; /* Entfernt Leerraum */
}
.vehicle-gallery-thumbnails {
    display: flex;
    gap: 5px;
    padding: 5px;
    background-color: var(--grey-bg);
}
.vehicle-gallery-thumbnails img {
    width: calc(50% - 2.5px);
    height: auto;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    opacity: 0.7;
}
.vehicle-gallery-thumbnails img.active,
.vehicle-gallery-thumbnails img:hover {
    border-color: var(--primary-color);
    opacity: 1;
}

/* Block 2: Der gesamte Textinhalt */
.vehicle-detail-content-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Text-Details links, Preis-Aktion rechts */
    gap: var(--space-lg);
    padding: var(--space-lg);
}

.vehicle-main-details .tagline {
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--space-md);
}
.vehicle-main-details h3 {
    margin-top: 0;
    font-size: 1.8rem;
}
.capacity-info { list-style: none; padding: 0; margin: var(--space-md) 0; }
.capacity-info li { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); font-size: 1.1rem; }
.capacity-info i { color: var(--primary-color); font-size: 1.5rem; width: 25px; text-align: center;}

.benefits-list { list-style: none; padding: 0; margin-top: var(--space-md); }
.benefits-list li { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.benefits-list li::before { content: '\f00c'; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #28a745; }

.vehicle-price-action {
    background: var(--grey-bg);
    padding: var(--space-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: var(--border-radius);
}
.vehicle-price-action .price-tag { font-size: 1.1rem; color: var(--text-color-light); }
.vehicle-price-action .price-value { font-size: 2rem; font-weight: 700; color: var(--dark-color); }
.vehicle-price-action .price-note { font-size: 0.8rem; color: var(--text-color-light); margin-bottom: var(--space-md); }
.vehicle-price-action .btn-primary { padding: var(--space-sm); width: 100%;}

.all-inclusive-service {
    background: var(--grey-bg);
    border-radius: var(--border-radius);
    padding: var(--space-lg);
    margin-top: var(--space-xl);
}
.all-inclusive-service ul { padding-left: 20px; }

/* Responsive Anpassung für den Text-Block */
@media (max-width: 768px) {
    .vehicle-detail-content-wrapper {
        grid-template-columns: 1fr; /* Text-Details und Preis untereinander auf dem Handy */
    }
}
/* ============================================= */
/* DETAILSEITE: OUR TEAM (REDESIGN)              */
/* ============================================= */
.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Spalten für Desktop & Tablet */
    gap: var(--space-lg);
}

.team-member-card {
    display: flex; /* NEU: Aktiviert Flexbox für 2-Spalten-Layout */
    align-items: center; /* Zentriert Bild und Text vertikal */
    gap: var(--space-lg);
    background-color: var(--grey-bg);
    padding: var(--space-md);
    border-radius: var(--border-radius);
}

.team-member-card img {
    width: 150px; /* Kleinere, elegantere Größe */
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--light-color);
    box-shadow: var(--shadow-medium);
    flex-shrink: 0; /* Verhindert, dass das Bild schrumpft */
}

.team-member-card h3 {
    font-size: 1.6rem;
    margin-bottom: 5px;
}

.team-member-card p {
    color: var(--text-color-light);
    font-size: 1rem;
    font-style: italic;
    margin-bottom: var(--space-md);
}

/* NEU: Styling für die "Specialties"-Liste */
.specialties-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.specialties-list li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
    font-weight: 500;
}
.specialties-list i {
    color: var(--primary-color);
}

/* Responsive Anpassung für die Team-Seite */
@media (max-width: 992px) {
    .team-grid {
        grid-template-columns: 1fr; /* 1 Spalte auf kleineren Geräten */
    }
}
@media (max-width: 576px) {
    .team-member-card {
        flex-direction: column; /* Bild über dem Text auf Handys */
        text-align: center;
    }
}
/* ============================================= */
/* DETAILSEITE: HOTEL TRANSFERS                  */
/* ============================================= */
.hotel-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.gallery-item {
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    aspect-ratio: 4 / 3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed) ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

/* Wir können die .feature-box von der Startseite wiederverwenden */
.benefits-grid .feature-box {
    background-color: var(--grey-bg);
}

/* Responsive Anpassungen */
@media (max-width: 992px) {
    .hotel-gallery-grid, .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .hotel-gallery-grid, .benefits-grid {
        grid-template-columns: 1fr;
    }
}
/* ============================================= */
/* DETAILSEITE: PACKAGES                         */
/* ============================================= */
.package-item {
    margin-bottom: var(--space-xl);
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    overflow: hidden;
}

.package-header {
    position: relative;
    height: 350px;
    color: var(--light-color);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-lg);
    background-size: cover;
    background-position: center;
}
.package-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 100%);
}
.package-header-content {
    position: relative;
    z-index: 2;
}
.package-header h2 {
    color: var(--light-color);
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.package-header .package-price {
    font-size: 1.5rem;
    font-weight: 700;
}

.package-body {
    padding: var(--space-lg);
}

.package-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    background-color: var(--grey-bg);
    padding: var(--space-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-lg);
    text-align: center;
}
.overview-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: var(--space-xs);
}
.overview-item strong {
    display: block;
    color: var(--dark-color);
}

.package-details-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-xl);
}
.package-details-grid h4 {
    font-size: 1.3rem;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}
.package-details-grid ul {
    list-style: none;
    padding: 0;
}
.package-details-grid ul li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.package-details-grid ul i {
    margin-top: 5px;
    color: #28a745;
}
.package-details-grid .exclusions i {
    color: #dc3545;
}

@media (max-width: 992px) {
    .package-details-grid {
        grid-template-columns: 1fr;
    }
    .package-header {
        height: 300px;
    }
}


/* ============================================= */
/* KONTAKT-SEITE                                 */
/* ============================================= */
.contact-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin: var(--space-lg) 0;
}

@media (min-width: 768px) {
    .contact-layout-grid {
        grid-template-columns: 1fr 2fr;
    }
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-box {
    background: var(--grey-bg);
    padding: var(--space-md);
    border-radius: var(--border-radius);
    text-align: center;
}

.contact-box i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: var(--space-sm);
}

.contact-box h4 {
    margin: 0 0 var(--space-xs) 0;
}

.contact-box p {
    color: var(--text-color-light);
    font-size: 0.9rem;
    margin-bottom: var(--space-sm);
}

.inquiry-form {
    background: var(--light-color);
    padding: var(--space-lg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.map-container {
    margin-top: var(--space-xl);
    text-align: center;
}

.map-container iframe {
    border-radius: var(--border-radius);
}
/* ============================================= */
/* PREIS-SEITE                                   */
/* ============================================= */
.price-table-wrapper {
    overflow-x: auto; /* Sorgt für horizontales Scrollen auf sehr kleinen Bildschirmen */
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden; /* Stellt sicher, dass der border-radius auch für den Inhalt gilt */
    font-size: 0.95rem;
}

.price-table th, 
.price-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.price-table thead th {
    background-color: var(--grey-bg);
    font-size: 0.9rem;
    color: var(--dark-color);
    font-weight: 600;
}

.price-table tbody tr:last-child td {
    border-bottom: none;
}

.price-table tbody tr:hover {
    background-color: var(--grey-bg);
}

.price-table .vehicle-name {
    font-weight: 600;
    color: var(--dark-color);
}

.price-table .vehicle-name small {
    display: block;
    font-weight: 400;
    color: var(--text-color-light);
}

.price-table .price-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-color);
}

.price-table td i {
    margin-right: var(--space-xs);
    color: var(--primary-color);
    width: 20px;
    text-align: center;
}

/* Responsive Anpassung für die Preistabelle */
@media (max-width: 768px) {
    .price-table thead {
        display: none; /* Tabellenkopf auf Mobilgeräten ausblenden */
    }

    .price-table tr {
        display: block;
        margin-bottom: var(--space-md);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        overflow: hidden;
    }

    .price-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: var(--space-sm);
    }

    .price-table td::before {
        content: attr(data-label); /* Holt den Titel aus dem data-Attribut des HTML */
        font-weight: 600;
        text-align: left;
        margin-right: var(--space-md);
        color: var(--dark-color);
    }

    .price-table td:last-child {
         border-bottom: 0;
    }
}

/* ============================================= */
/* FAQ-SEITE                                     */
/* ============================================= */
.faq-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: center;
    text-align: center;
}

.faq-hero-grid img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

.faq-category-title {
    text-align: center;
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-lg);
}

.faq-accordion {
    max-width: 850px;
    margin: 0 auto;
}

.faq-item {
    background-color: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-sm);
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
    overflow: hidden;
}

.faq-item:hover {
    box-shadow: var(--shadow-medium);
    border-color: var(--primary-color);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: var(--space-md);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dark-color);
}

.faq-question .icon {
    font-size: 1.2rem;
    color: var(--primary-color);
    transition: transform 0.3s ease;
    flex-shrink: 0; /* Verhindert, dass das Icon schrumpft */
    margin-left: var(--space-sm);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.faq-answer .content {
    padding: 0 var(--space-md) var(--space-md);
    line-height: 1.8;
    color: var(--text-color);
    font-size: 0.95rem;
}

.faq-answer .content a {
    font-weight: 600;
}

.faq-item.active .faq-answer {
    max-height: 600px; /* Platz für lange Antworten */
}

.faq-item.active .faq-question .icon {
    transform: rotate(45deg);
}

.contact-cta-section {
    background-color: var(--grey-bg);
    padding: var(--space-xl) 0;
    text-align: center;
    margin-top: var(--space-xl);
}

/* ============================================= */
/* INTRO-KARTE (für Preis-Seite etc.)            */
/* ============================================= */
.intro-card {
    background-color: var(--grey-bg);
    padding: var(--space-lg);
    border-radius: var(--border-radius);
    text-align: center;
    margin-bottom: var(--space-lg);
    border: 1px solid var(--border-color);
}

.intro-card h2 {
    color: var(--primary-color);
}

.intro-card p {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-color);
    font-size: 1.1rem;
}

/* Media Queries für Layout-Anpassungen */
@media (min-width: 992px) {
    .faq-hero-grid {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }
}
/* ============================================= */
/* BOOKING FORM STRUCTURE & FIELDSETS            */
/* ============================================= */
.form-section fieldset {
    border: none;
    padding: 0;
    margin: 0 0 var(--space-lg) 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-lg);
}

.form-section fieldset:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-section legend {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: var(--space-md);
}

/* FIX: This positions the toggle switch correctly */
.form-group.has-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-group.has-toggle > span {
    font-weight: 600;
    font-size: 1.1rem;
}
/* ============================================= */
/* DANKE-SEITE (THANK YOU PAGE)                  */
/* ============================================= */
.thank-you-container {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.thank-you-icon {
    font-size: 4rem;
    color: #28a745;
    margin-bottom: 1.5rem;
}

.thank-you-subtitle {
    font-size: 1.2rem;
    color: var(--text-color-light);
    margin-bottom: 2rem;
}

.booking-reference-box {
    background-color: var(--grey-bg);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.booking-reference-box p {
    margin-bottom: 0.5rem;
}

.booking-reference-number {
    font-size: 2.2rem;
    margin: 0 0 1rem 0;
    color: var(--primary-color);
    letter-spacing: 2px;
}

.info-notice {
    font-size: 0.9rem;
    color: var(--text-color-light);
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.info-notice i {
    margin-right: 0.5rem;
}