/* --- DAY'N'NIGHT SALZBURG - PREMIUM DARK & GOLD DESIGN --- */
/* 1. Grund-Setup & Schriftarten */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@300;400;600&display=swap');
 :root {
     --bg-page: #0d0d0d;
     --bg-card: #161616;
     --gold: #c5a059;
     --gold-dark: #a68544;
     --text-white: #ffffff;
     --text-muted: #b3b3b3;
     --transition: all 0.3s ease;
}

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 body {
     font-family: 'Poppins', sans-serif;
     background-color: var(--bg-page);
     color: var(--text-white);
     line-height: 1.6;
     overflow-x: hidden;
}
 html {
     scroll-behavior: smooth;
}
 html, body {
     width: 100%;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
    /* Verhindert das seitliche Scrollen komplett */
     position: relative;
}
/* 2. Header & Navigation */
 .main-header {
     background-color: #000000;
     border-bottom: 2px solid var(--gold);
     position: sticky;
     top: 0;
     z-index: 1000;
     padding: 10px 0;
}
/* Styling für den neuen Slogan im Header */
 .header-tagline {
     text-align: center;
     flex: 1;
}
 .gold-text {
     color: #c5a059;
     font-family: 'Playfair Display', serif;
     font-size: 1.2rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 2px;
     display: block;
}
 .lang-dropdown {
     position: relative;
     display: inline-block;
     margin-left: 15px;
}
 .dropbtn {
     background: transparent;
     color: #c5a059;
     padding: 5px 10px;
     font-size: 0.9rem;
     border: 1px solid #c5a059;
     border-radius: 4px;
     cursor: pointer;
     font-weight: 600;
}
 .dropdown-content {
     display: none;
     position: absolute;
     right: 0;
     background-color: #111;
     min-width: 120px;
     box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.5);
     z-index: 10001;
     border-radius: 4px;
}
 .dropdown-content a {
     color: white;
     padding: 10px 15px;
     text-decoration: none;
     display: block;
     font-size: 0.85rem;
     gap: 10px;
}
 .dropdown-content a:hover {
     background-color: #c5a059;
     color: black;
}
 .lang-dropdown:hover .dropdown-content {
     display: block;
}
/* Hilfsklasse für die Anordnung */
 .header-contact-group {
     display: flex;
     gap: 20px;
}
 .mobile-slogan {
     display: none;
     font-size: 0.7rem;
     color: #c5a059;
}
 .header-container {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 20px;
}
 .header-logo img {
     height: 170px;
     width: auto;
     display: block;
}
 .header-contact-item a {
     text-decoration: none;
     color: var(--text-white);
     display: flex;
     flex-direction: column;
     align-items: center;
     transition: var(--transition);
}
 .header-contact-item .icon {
     font-size: 1.5rem;
     color: var(--gold);
     margin-bottom: 2px;
}
 .header-contact-item .contact-text {
     font-size: 0.85rem;
     font-weight: 600;
}
 .header-contact-item a:hover {
     color: var(--gold);
}
/* --- Container --- */
 .day-night-divider {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     margin: 15px auto 10px auto;
     width: 95%;
     max-width: 750px;
     position: relative;
}
/* --- Linien mit Glow + Verlauf --- */
 .divider-line {
     flex: 1;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(197,160,89,0.2), #c5a059, rgba(197,160,89,0.2), transparent );
     position: relative;
}
/* zusätzlicher Blur-Glow auf Linie */
 .divider-line::after {
     content: "";
     position: absolute;
     inset: 0;
     background: inherit;
     filter: blur(6px);
     opacity: 0.6;
}
/* --- Icon Container --- */
 .divider-icon-container {
     width: 90px;
     height: 45px;
     color: #c5a059;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     position: relative;
}
/* pulsierender Glow hinter dem Icon */
 .divider-icon-container::before {
     content: "";
     position: absolute;
     width: 120%;
     height: 120%;
     background: radial-gradient(circle, rgba(197,160,89,0.35), transparent 70%);
     animation: pulseGlow 3s infinite ease-in-out;
     z-index: 0;
}
/* --- SVG Icon --- */
 .luxury-svg {
     width: 100%;
     height: 100%;
     position: relative;
     z-index: 1;
     transition: all 0.6s ease;
     filter: drop-shadow(0 0 6px rgba(197,160,89,0.5));
}
/* Hover-Effekt */
 .day-night-divider:hover .luxury-svg {
     transform: scale(1.12) rotate(2deg);
     filter: drop-shadow(0 0 14px rgba(197,160,89,0.9));
}
/* Mond besser sichtbar */
 .luxury-svg path {
     opacity: 1;
     filter: drop-shadow(0 0 6px rgba(0,0,0,0.4));
}
/* Pulsierende Animation für Glow */
 @keyframes pulseGlow {
     0%, 100% {
         transform: scale(1);
         opacity: 0.5;
    }
     50% {
         transform: scale(1.15);
         opacity: 0.9;
    }
}
/* --- Mobile --- */
 @media (max-width: 480px) {
     .day-night-divider {
         gap: 18px;
         margin: 30px auto;
    }
     .divider-icon-container {
         width: 65px;
         height: 32px;
    }
}
/* 3. Hero / Home Image */
 .home-image-container {
     width: 100%;
     background-color: #000;
}
 .pure-home-img {
     width: 100%;
     height: 60vh;
     object-fit: cover;
     filter: brightness(0.6);
}
/* 4. Allgemeiner Sektions-Style */
 section {
     padding: 80px 20px;
}
 .container {
     max-width: 1200px;
     margin: 0 auto;
}
 h2 {
     font-family: 'Playfair Display', serif;
     font-size: 2.5rem;
     color: var(--gold);
     margin-bottom: 20px;
     text-align: center;
}
 .gold-subtitle {
     display: block;
     text-align: center;
     color: var(--gold);
     text-transform: uppercase;
     letter-spacing: 3px;
     font-size: 0.9rem;
     margin-bottom: 10px;
}
 .tour-name {
     color: white;
}
/* 5. About Us - Komplett überarbeitet */
 .about-us {
     text-align: center;
     padding: 100px 20px;
     background: #050505;
}
 .about-container {
     max-width: 850px;
     margin: 0 auto;
     position: relative;
}
 .about-content p {
     margin-bottom: 25px;
     color: var(--gray);
     font-size: 1.1rem;
     line-height: 1.8;
}
/* Features Bereich */
 .about-features {
     display: flex;
     justify-content: center;
     gap: 60px;
     margin-top: 50px;
     flex-wrap: wrap;
}
 .feature {
     text-align: center;
     transition: 0.3s;
}
/* Icon */
 .feature-icon {
     font-size: 2rem;
     color: var(--gold);
     display: block;
     margin-bottom: 15px;
     transition: 0.8s ease;
}
/* Hover */
 .feature:hover {
     transform: translateY(-5px);
}
 .feature:hover .feature-icon {
     transform: rotate(360deg);
     color: #fff;
     filter: drop-shadow(0 0 10px var(--gold));
}
/* Text */
 .feature p {
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-size: 0.85rem;
     color: var(--white);
}
/* MOBILE FIX */
 @media (max-width: 768px) {
     .about-features {
         display: grid;
        /* 🔥 switch zu grid */
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
         max-width: 400px;
         margin: 50px auto 0;
    }
     .feature {
         background: #111;
         padding: 12px;
         border-radius: 10px;
    }
     .feature:nth-child(5) {
         grid-column: 1 / -1;
         justify-self: center;
         width: 60%;
    }
}
/* Optional: Damit der Text und die Features schön getrennt sind */
 .about-content {
     margin-bottom: 10px;
}
 .about-features {
     margin-top: 20px;
}
/* Container für die Auto Animation */
 .fleet-animation-container {
     width: 100%;
     height: 60px;
     position: relative;
     margin: 30px auto 10px;
     overflow: hidden;
}
/* Die dezente Straßenlinie (golden, gestrichelt) */
 .road-line {
     position: absolute;
     bottom: 5px;
     left: 0;
     width: 100%;
     height: 2px;
     background: repeating-linear-gradient(to right, var(--gold) 0, var(--gold) 15px, transparent 15px, transparent 30px);
     opacity: 0.3;
}
/* Der Container für das Auto  */
 .gliding-car {
     position: absolute;
     bottom: 0;
     width: 80px;
     height: auto;
     left: -100px;
     animation: carDrive 12s infinite ease-in-out;
     opacity: 0.8;
     filter: drop-shadow(0 2px 5px rgba(229, 193, 126, 0.4));
}
/* Das SVG selbst */
 .car-svg {
     width: 100%;
     height: auto;
}
 .car-body {
     fill: #ffffff;
}
 .car-wheel {
     fill: var(--gold);
}
/* Definition der Fahr-Animation */
 @keyframes carDrive {
     0% {
         left: -100px;
    }
     10% {
         left: 5%;
    }
     40% {
         left: 45%;
    }
     60% {
         left: 55%;
    }
     90% {
         left: 95%;
    }
     100% {
         left: 100%;
    }
}
/* Mobile Anpassung: Auto etwas kleiner, Fahrt etwas schneller */
 @media (max-width: 600px) {
     .fleet-animation-container {
         height: 40px;
    }
     .gliding-car {
         width: 60px;
         animation-duration: 9s;
    }
}
 .booking-steps {
     background-color: #050505;
}
 .steps-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 25px;
     margin-top: 40px;
}
 .step-card {
     background: var(--bg-card);
     padding: 40px 30px;
     border-radius: 15px;
     border-bottom: 3px solid transparent;
     transition: var(--transition);
}
 .step-card:hover {
     border-bottom: 3px solid var(--gold);
     transform: translateY(-5px);
}
 .step-number {
     font-family: 'Playfair Display', serif;
     font-size: 3rem;
     color: var(--gold);
     opacity: 0.3;
     font-weight: bold;
}
/* Der Toggle-Switch  */
 .switch-container {
     position: relative;
     display: inline-block;
     width: 50px;
     height: 26px;
}
 .switch-container input {
     opacity: 0;
     width: 0;
     height: 0;
}
 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #222;
     transition: .3s;
     border-radius: 34px;
     border: 2px solid #444;
}
/* Der bewegliche Punkt */
 .slider:before {
     position: absolute;
     content: "";
     height: 18px;
     width: 18px;
     left: 4px;
     bottom: 2px;
     background-color: #888;
     transition: .3s;
     border-radius: 50%;
}
/* ZUSTAND: AKTIVIERT */
 input:checked+.slider {
     background-color: var(--gold);
     border-color: var(--gold);
}
 input:checked+.slider:before {
     transform: translateX(22px);
     background-color: #000;
}
/* Zusätzlicher Effekt für den Text daneben */
 input:checked~.switch-label {
     color: var(--gold);
     font-weight: bold;
}
/* Erfolgsmeldung nach dem Absenden */
 #success-message {
     background: #c5a059;
     color: black;
     padding: 30px;
     border-radius: 10px;
     margin-bottom: 20px;
     text-align: center;
}
 #success-message h3 {
     margin-top: 0;
     font-size: 1.5rem;
}
/* Fahrzeug-Vorschau Text */
 #selected-car-display {
     color: #c5a059;
     font-weight: bold;
}
/* --- BUCHUNGSFORMULAR --- */
 .form-container {
     max-width: 800px;
     margin: 0 auto;
     background: var(--bg-card);
     padding: 40px;
     border-radius: 20px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
 .form-row {
     display: flex;
     gap: 20px;
     margin-bottom: 20px;
}
 .input-group {
     flex: 1;
     display: flex;
     flex-direction: column;
     text-align: left;
}
 .input-group label {
     color: var(--gold);
     font-size: 0.85rem;
     font-weight: 600;
     margin-bottom: 8px;
     text-transform: uppercase;
}
/* Einheitliches Design für alle Felder */
 .input-group input, .select-field, .additional-textarea {
     width: 100%;
     background: #1a1a1a;
     border: 1px solid #333;
     color: #fff;
     padding: 15px;
     border-radius: 8px;
     font-family: inherit;
     transition: border-color 0.3s;
}
 .input-group input:focus, .select-field:focus, .additional-textarea:focus {
     border-color: var(--gold);
     outline: none;
}
/*  für das Dropdown (Pfeil) */
 .select-field {
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23c5a059' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 15px center;
}
/* Extras & Switches */
 .extras-container {
     margin-top: 25px;
}
 .option-item {
     margin-bottom: 18px;
}
 .option-flex {
     display: flex;
     align-items: center;
     gap: 15px;
}
 .info-box-expand {
     display: none;
     padding: 15px;
     background: rgba(197, 160, 89, 0.08);
     border: 1px dashed var(--gold);
     border-radius: 8px;
     margin-top: 12px;
}
/* Der Button */
 .btn-submit {
     width: 100%;
     padding: 18px;
     background: var(--gold);
     border: none;
     color: #000;
     font-weight: bold;
     font-size: 1.1rem;
     cursor: pointer;
     border-radius: 8px;
     transition: 0.3s;
     margin-top: 20px;
}
 .btn-submit:hover {
     background: var(--gold-dark);
     transform: translateY(-2px);
}
 .switch-label {
     font-size: 0.95rem;
     color: #fff;
     cursor: pointer;
}
/* Zeile für Kindersitz-Details */
 .child-seat-row {
     display: flex;
     gap: 15px;
}
/* Fehlermeldung */
 #error-log {
     color: #ff4d4d;
     margin-top: 15px;
     font-size: 0.9rem;
     text-align: center;
}
/* --- Responsive Anpassung für Handys --- */
 @media (max-width: 600px) {
     .child-seat-row {
         flex-direction: column;
    }
}
 .return-trip-option {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
     margin: 25px 0;
     padding: 12px;
     border: 1px solid transparent;
     transition: 0.3s;
}
/* Optional: Ein leichter Gold-Rahmen um die ganze Option, wenn aktiv */
 .return-trip-option:has(input:checked) {
     border: 1px solid rgba(197, 160, 89, 0.3);
     border-radius: 10px;
     background: rgba(197, 160, 89, 0.05);
}

/* 2. PASSWORT SPERRE (PREMIUM DESIGN) */
 #password-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle, #1a1a1a 0%, #000000 100%);
     z-index: 999999;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 20px;
}
 .password-box {
     background: rgba(22, 22, 22, 0.9);
     border: 1px solid var(--gold);
     padding: 50px 40px;
     border-radius: 20px;
     box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
     text-align: center;
     max-width: 400px;
     width: 100%;
     backdrop-filter: blur(10px);
}
 .password-box h1 {
     color: var(--gold);
     font-family: 'Playfair Display', serif;
     font-size: 2rem;
     margin-bottom: 10px;
     letter-spacing: 2px;
}
 .password-box input {
     width: 100%;
     padding: 15px;
     background: #0d0d0d;
     border: 1px solid #333;
     color: #fff;
     border-radius: 8px;
     text-align: center;
     outline: none;
     transition: 0.3s;
}
 .password-box input:focus {
     border-color: var(--gold);
}
 .password-box button {
     width: 100%;
     margin-top: 20px;
     padding: 15px;
     background: var(--gold);
     color: #000;
     border: none;
     border-radius: 8px;
     font-weight: bold;
     cursor: pointer;
     text-transform: uppercase;
     transition: 0.3s;
}
 .password-box button:hover {
     background: var(--gold-dark);
}
/* 4. TOUR AKKORDEON (FIXED) */
 .tour-details-wrapper {
     background: #111;
     border: 1px solid rgba(197, 160, 89, 0.2);
     border-radius: 12px;
     margin-bottom: 30px;
     overflow: hidden;
}
 .tour-details-wrapper[open] {
     border-color: var(--gold);
}
 .tour-summary {
     padding: 25px 30px;
     list-style: none;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 20px;
}
 .tour-summary::-webkit-details-marker {
     display: none;
}
 .tour-summary h2 {
     font-family: 'Playfair Display', serif;
     color: var(--gold);
     margin: 0;
     font-size: 1.8rem;
}
 .tour-open-btn {
     background: var(--gold);
     color: #000;
     padding: 10px 25px;
     border-radius: 50px;
     font-weight: bold;
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 150px;
     justify-content: center;
}
/* Plus dreht sich zum X/Minus, Text bleibt gerade */
 .tour-open-btn .icon {
     display: inline-block;
     transition: transform 0.4s ease;
     font-size: 1.3rem;
}
 .tour-details-wrapper[open] .tour-open-btn .icon {
     transform: rotate(45deg);
}
 .tour-details-wrapper[open] .tour-open-btn {
     background: #fff;
}
/* Tour Fehlermeldung */
 .error-message-box {
     background: rgba(255, 68, 68, 0.1);
     color: #ff4444;
     padding: 12px;
     border-radius: 5px;
     border-left: 4px solid #ff4444;
     margin-bottom: 15px;
     font-size: 0.9rem;
     text-align: left;
}
/* Modal Styling */
 .modal-overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.85);
     z-index: 10001;
     align-items: center;
     justify-content: center;
}
 .modal-content {
     background: #1a1a1a;
     border: 2px solid var(--gold);
     padding: 30px;
     border-radius: 15px;
     text-align: center;
     max-width: 400px;
}
 .modal-icon {
     font-size: 50px;
     margin-bottom: 15px;
}
 .btn-submit-modal {
     background: var(--gold);
     color: black;
     border: none;
     padding: 10px 30px;
     margin-top: 20px;
     cursor: pointer;
     font-weight: bold;
     border-radius: 5px;
}
/* 6. BUCHUNGSFORMULAR */
 .form-container {
     max-width: 800px;
     margin: 0 auto;
     background: var(--bg-card);
     padding: 40px;
     border-radius: 20px;
     border: 1px solid #222;
}
 .form-row {
     display: flex;
     gap: 20px;
     margin-bottom: 20px;
}
 .input-group {
     flex: 1;
     display: flex;
     flex-direction: column;
}
 .input-group label {
     color: var(--gold);
     font-size: 0.8rem;
     margin-bottom: 8px;
     text-transform: uppercase;
}
 input, select, textarea {
     padding: 15px;
     background: #1a1a1a;
     border: 1px solid #333;
     color: #fff;
     border-radius: 8px;
     outline: none;
}
 input:focus {
     border-color: var(--gold);
}
/* 7. SWITCHES */
 .switch-container {
     width: 50px;
     height: 26px;
     position: relative;
     display: inline-block;
     flex-shrink: 0;
}
 .switch-container input {
     opacity: 0;
     width: 0;
     height: 0;
}
 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #222;
     border-radius: 34px;
     transition: 0.3s;
}
 .slider:before {
     position: absolute;
     content: "";
     height: 18px;
     width: 18px;
     left: 4px;
     bottom: 4px;
     background-color: #888;
     border-radius: 50%;
     transition: 0.3s;
}
 input:checked+.slider {
     background-color: var(--gold);
}
 input:checked+.slider:before {
     transform: translateX(24px);
     background-color: #000;
}
/* 8. MOBILE OPTIMIERUNG */
 @media (max-width: 600px) {
     .form-row {
         flex-direction: column;
    }
     .tour-summary {
         padding: 20px;
         flex-direction: column;
         align-items: flex-start;
         gap: 15px;
    }
     .tour-summary h2 {
         font-size: 1.3rem;
    }
     .tour-open-btn {
         width: 100%;
         padding: 12px 20px;
         font-size: 0.9rem;
         justify-content: space-between;
    }
}
 .tour-route-text {
     display: block;
     text-align: center;
     margin: 0 auto 40px auto;
     font-style: italic;
     color: var(--gold);
     letter-spacing: 0.5px;
}
 .section-label {
     display: block;
     color: var(--white);
     text-transform: uppercase;
     font-size: 0.9rem;
     margin-bottom: 15px;
     letter-spacing: 1px;
}
/* Container für die Touren-Überschrift */
 .tours-title-section {
     text-align: center;
     padding: 80px 20px 40px;
}
/* Die HauptüberschriftTour h1 */
 .tours-title-section h1 {
     font-size: 3.5rem;
     color: var(--gold);
     font-family: 'Playfair Display', serif;
    /* Wirkt luxuriös */
     margin-bottom: 40px;
     letter-spacing: 1px;
     position: relative;
     display: inline-block;
}
/* Goldener Akzent unter dem Text */
 .tours-title-section h1::after {
     content: '';
     display: block;
     width: 60%;
     height: 3px;
     background: var(--gold);
     margin: 10px auto 0;
     border-radius: 2px;
}
/* Subtitle-Text darüber */
 .tours-title-section .subtitle {
     display: block;
     color: var(--gold);
     text-transform: uppercase;
     letter-spacing: 4px;
     font-size: 0.9rem;
     font-weight: 600;
     margin-bottom: 10px;
}
/* Mobile Optimierung */
 @media (max-width: 768px) {
     .tours-title-section h1 {
         font-size: 2.5rem;
    }
     .tours-title-section {
         padding: 50px 15px 30px;
    }
}
/* Fahrzeug Auswahl als Buttons */
 .tour-vehicle-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 15px;
}
 .vehicle-option {
     cursor: pointer;
}
 .vehicle-option input {
     display: none;
}
 .vehicle-content {
     background: #111;
     border: 1px solid #333;
     padding: 20px;
     border-radius: 10px;
     text-align: center;
     transition: 0.3s;
}
 .vehicle-option input:checked+.vehicle-content {
     border-color: var(--gold);
     background: rgba(197, 160, 89, 0.1);
     box-shadow: 0 0 10px rgba(197, 160, 89, 0.2);
}
 .vehicle-content .car-name {
     display: block;
     color: var(--gray);
     font-size: 0.8rem;
     margin-bottom: 5px;
}
 .vehicle-content .car-price {
     display: block;
     color: var(--gold);
     font-size: 1.4rem;
     font-weight: bold;
}
 textarea {
     width: 100%;
     padding: 15px;
     background: #1a1a1a;
     border: 1px solid #333;
     color: white;
     border-radius: 8px;
     font-family: inherit;
     resize: vertical;
}
 textarea:focus {
     border-color: var(--gold);
     outline: none;
}
/* Container für die Preistrennung */
 .price-container {
     display: flex;
     justify-content: space-between;
     gap: 10px;
     margin: 20px 0;
     border-top: 1px solid rgba(229, 193, 126, 0.2);
     padding-top: 15px;
}
 .price-box {
     flex: 1;
     display: flex;
     flex-direction: column;
     padding: 10px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.05);
}
/* Stadt-Fixpreis hervorheben */
 .price-box.city {
     border: 1px solid var(--gold);
     background: rgba(229, 193, 126, 0.05);
}
 .price-box .label {
     font-size: 0.75rem;
     text-transform: uppercase;
     color: #888;
     letter-spacing: 0.5px;
     margin-bottom: 5px;
}
 .price-box .value {
     font-size: 1.1rem;
     font-weight: bold;
     color: var(--gold);
}
 .price-box.distance .value {
     color: #fff;
     font-size: 1rem;
}
/* Mobile Optimierung */
 @media (max-width: 400px) {
     .price-container {
         flex-direction: column;
    }
}
 .featured-badge {
     position: absolute;
     top: 10px;
     left: 10px;
     background: var(--gold);
     color: #000;
     padding: 4px 12px;
     font-size: 0.8rem;
     font-weight: bold;
     border-radius: 4px;
}
/* 7. Fleet Selection */
 .fleet-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 30px;
     margin-top: 40px;
}
 .fleet-card {
     background: var(--bg-card);
     border-radius: 20px;
     overflow: hidden;
     border: 1px solid #222;
     transition: var(--transition);
}
 .fleet-card:hover {
     border-color: var(--gold);
}
 .fleet-img img {
     width: 100%;
     height: 220px;
     object-fit: cover;
}
 .fleet-info {
     padding: 25px;
     text-align: left;
}
 .fleet-details {
     list-style: none;
     margin: 20px 0;
}
 .fleet-details li {
     margin-bottom: 8px;
     font-size: 0.9rem;
     color: var(--text-muted);
}
 .price-disclaimer {
     text-align: center;
     font-size: 0.85rem;
     color: var(--text-muted);
     margin-top: 30px;
     opacity: 0.7;
     font-style: italic;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
}
 .btn-select {
     width: 100%;
     padding: 15px;
     background: transparent;
     border: 2px solid var(--gold);
     color: var(--gold);
     font-weight: bold;
     cursor: pointer;
     transition: var(--transition);
}
 .btn-select:hover, .fleet-card.selected .btn-select {
     background: var(--gold);
     color: #000;
}
/* 8. Booking Form */
 .booking-form-area {
     background-color: #050505;
}

 .form-group {
     display: flex;
     gap: 20px;
     margin-bottom: 20px;
}
 input, select, textarea {
     flex: 1;
     padding: 15px;
     background: #222;
     border: 1px solid #333;
     color: #fff;
     border-radius: 8px;
     font-family: inherit;
}
 input:focus {
     border-color: var(--gold);
     outline: none;
}
 .child-seat-wrapper label {
     justify-content: flex-start !important;
}
/* Das Icon (Kalender/Pfeil) ganz rechts weiß färben */
 input[type="datetime-local"]::-webkit-calendar-picker-indicator {
     filter: invert(100%) sepia(0%) border-radius(0%) saturate(0%) hue-rotate(0deg) brightness(200%) contrast(100%);
     opacity: 1;
     cursor: pointer;
     padding: 5px;
}
 input[type="datetime-local"] {
     color-scheme: dark;
     color: #ffffff;
}
/* Erzwungene Anpassung für das Datumsfeld auf Mobilgeräten */
 input[type="datetime-local"] {
     width: 100% !important;
     box-sizing: border-box;
     -webkit-appearance: none;
     appearance: none;
     min-width: 0;
     display: block;
}
/* Tour Stopps Styling */
 .tour-stops-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     margin: 30px auto 40px;
     max-width: 1000px;
}
 .tour-stop-item {
     display: flex;
     align-items: flex-start;
     gap: 15px;
     background: rgba(255, 255, 255, 0.05);
     padding: 15px;
     border-radius: 10px;
     border-left: 3px solid var(--gold);
     transition: transform 0.3s ease;
}
 .tour-stop-item:hover {
     transform: translateY(-5px);
     background: rgba(229, 193, 126, 0.1);
}
 .stop-icon {
     font-size: 1.5rem;
}
 .stop-info strong {
     display: block;
     color: var(--gold);
     font-size: 1rem;
     margin-bottom: 4px;
}
 .stop-info span {
     font-size: 0.85rem;
     color: #ccc;
}
/* Anpassungen für das Formular in der Tour-Sektion */
 .tour-inputs {
     margin-top: 30px;
}
 .tour-success-msg {
     display: none;
     color: var(--gold);
     margin-top: 20px;
     text-align: center;
     font-weight: bold;
     padding: 15px;
     border: 1px solid var(--gold);
     border-radius: 8px;
}
 .tour-steps-list {
     max-width: 600px;
     margin: 50px auto;
     position: relative;
     padding: 0;
}
 .tour-steps-list::before {
     content: '';
     position: absolute;
     left: 50%;
     top: 0;
     bottom: 0;
     width: 2px;
     background: linear-gradient(to bottom, transparent, var(--gold), transparent);
     transform: translateX(-50%);
     opacity: 0.3;
}
/* Einzelner Stopp als Block untereinander */
 .tour-step {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     margin-bottom: 40px;
     position: relative;
     z-index: 1;
}
/* Die Nummer mittig platziert */
 .step-num {
     width: 40px;
     height: 40px;
     background: #1a1a1a;
     border: 2px solid var(--gold);
     color: var(--gold);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     margin-bottom: 15px;
     flex-shrink: 0;
     box-shadow: 0 0 15px rgba(229, 193, 126, 0.4);
}
/* Beschreibungstext zentriert */
 .step-desc {
     max-width: 100%;
}
 .step-desc strong {
     display: block;
     color: var(--gold);
     font-size: 1.2rem;
     margin-bottom: 8px;
     font-family: 'Playfair Display', serif;
}
 .step-desc p {
     color: #ccc;
     font-size: 1rem;
     margin: 0;
     line-height: 1.5;
}
/* Kleiner Bonus: Hover Effekt */
 .tour-step:hover .step-num {
     background: var(--gold);
     color: #000;
     transform: scale(1.1);
     transition: all 0.3s ease;
}
 .custom-tour-note {
     max-width: 700px;
     margin: 40px auto;
     background: rgba(229, 193, 126, 0.05);
     border: 1px dashed var(--gold);
     border-radius: 15px;
     padding: 25px;
     display: flex;
     align-items: center;
     gap: 20px;
     text-align: left;
}
 .custom-icon {
     font-size: 2rem;
     filter: drop-shadow(0 0 5px var(--gold));
}
 .custom-text h3 {
     color: var(--gold);
     margin: 0 0 5px 0;
     font-size: 1.2rem;
}
 .custom-text p {
     color: #ccc;
     font-size: 0.95rem;
     margin: 0;
     line-height: 1.5;
}
/* Mobil-Optimierung */
 @media (max-width: 600px) {
     .custom-tour-note {
         flex-direction: column;
         text-align: center;
         padding: 20px;
    }
}
/* Mobile Anpassung */
 @media (max-width: 768px) {
     .tour-stops-container {
         grid-template-columns: 1fr;
    }
}
/* Mobile Optimierung: Felder untereinander auf dem Handy */
 @media (max-width: 600px) {
     .form-row {
         flex-direction: column;
         gap: 15px;
    }
}
 .btn-submit {
     width: 100%;
     padding: 20px;
     background: var(--gold);
     border: none;
     color: #000;
     font-weight: bold;
     font-size: 1.1rem;
     cursor: pointer;
     border-radius: 8px;
     transition: var(--transition);
     margin-top: 20px;
}
 .btn-submit:hover {
     background: var(--gold-dark);
}
/* 9. Fragen - Erweitert für Akkordeon-Funktion */
 .faq-section {
     padding: 80px 20px;
     background: #0a0a0a;
}
 .faq-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 40px;
     text-align: left;
}
/* Das Item bleibt in deinem Style, wird aber interaktiv */
 .faq-item {
     background: #111;
     border-left: 3px solid var(--gold);
     border-radius: 5px;
     transition: 0.3s;
     height: fit-content;
}
/* Der klickbare Bereich */
 .faq-item summary {
     padding: 25px;
     list-style: none;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     outline: none;
}
/* Entfernt den Standard-Pfeil in Chrome/Safari */
 .faq-item summary::-webkit-details-marker {
     display: none;
}
 .faq-item h3 {
     color: var(--gold);
     font-size: 1.1rem;
     margin: 0;
}
/* Die Antwort-Box (faq-content) */
 .faq-content {
     padding: 0 25px 25px 25px;
     transition: 0.3s;
}
 .faq-item p {
     color: var(--gray);
     font-size: 0.95rem;
     line-height: 1.6;
     margin: 0;
}
/* Hover-Effekt aus deinem Code */
 .faq-item:hover {
     background: #161616;
     transform: translateY(-5px);
}
/* Das seitliche Plus/Minus Icon */
 .faq-icon {
     position: relative;
     width: 16px;
     height: 16px;
}
 .faq-icon::before, .faq-icon::after {
     content: '';
     position: absolute;
     background: var(--gold);
     transition: 0.3s;
}
/* Horizontaler Balken */
 .faq-icon::before {
     width: 100%;
     height: 2px;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
}
/* Vertikaler Balken (macht das Plus) */
 .faq-icon::after {
     width: 2px;
     height: 100%;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
}
/* Verwandelt Plus in Minus wenn offen */
 .faq-item[open] .faq-icon::after {
     transform: translateX(-50%) rotate(90deg);
     opacity: 0;
}
/* Animation beim Öffnen */
 .faq-item[open] .faq-content {
     animation: fadeIn 0.4s ease-out;
}
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-5px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
/* Der Bereich für "Noch Fragen?" */
 .faq-footer {
     margin-top: 60px;
     text-align: center;
     padding: 40px;
     border-top: 1px solid #222;
}
 .faq-footer p {
     font-size: 1.2rem;
     margin-bottom: 20px;
}
 .btn-email-contact {
     display: inline-block;
     color: var(--gold);
     text-decoration: none;
     border: 1px solid var(--gold);
     padding: 12px 30px;
     border-radius: 5px;
     font-weight: bold;
     transition: 0.3s;
}
 .btn-email-contact:hover {
     background: var(--gold);
     color: #000;
}
/* 9. Testimonials */
 .testimonial-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 40px;
}
 .testimonial-card {
     background: var(--bg-card);
     padding: 30px;
     border-radius: 15px;
     text-align: left;
}
 .stars {
     color: var(--gold);
     margin-bottom: 15px;
}
 .client-info {
     margin-top: 20px;
     border-top: 1px solid #333;
     padding-top: 15px;
}
 .client-info strong {
     display: block;
     color: var(--gold);
}
/* 10. Footer */
 .main-footer {
     background-color: #000000;
     padding: 80px 20px 30px;
     border-top: 3px solid var(--gold);
}
 .footer-container {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 2fr 1fr 1.5fr;
     gap: 60px;
}
 .footer-logo {
     height: 70px;
     margin-bottom: 20px;
}
 .footer-col h4 {
     color: var(--gold);
     font-family: 'Playfair Display', serif;
     margin-bottom: 25px;
     font-size: 1.3rem;
}
 .footer-col ul {
     list-style: none;
}
 .footer-col ul li {
     margin-bottom: 12px;
}
 .footer-col ul li a {
     color: var(--text-muted);
     text-decoration: none;
     transition: var(--transition);
}
 .footer-col ul li a:hover {
     color: var(--gold);
     padding-left: 5px;
}
 .social-links {
     display: flex;
     gap: 15px;
     margin-top: 20px;
}
 .social-links a {
     color: #000;
     background: var(--gold);
     width: 35px;
     height: 35px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     text-decoration: none;
     font-weight: bold;
     font-size: 0.8rem;
}
/* Für die Kontakt-Links im Footer oder Header */
 .contact a {
     color: #c5a059;
     text-decoration: none;
     transition: 0.3s;
}
 .contact a:hover {
     color: #ffffff;
     text-decoration: underline;
}
 .footer-bottom {
     text-align: center;
     margin-top: 60px;
     padding-top: 30px;
     border-top: 1px solid #222;
     color: #555;
     font-size: 0.85rem;
}
/* --- 11. VOLLE RESPONSIVE OPTIMIERUNG (Handy, Tablet, Desktop) --- */
/* Für Tablets (unter 1024px) */
 @media (max-width: 1024px) {
     .container {
         padding: 0 30px;
    }
     .footer-container {
         grid-template-columns: 1fr 1fr;
         gap: 40px;
    }
}
/* Für Smartphones (unter 768px) */
 @media (max-width: 768px) {
     input[type="text"], input[type="tel"], input[type="email"], input[type="datetime-local"], input[type="number"], select, textarea {
         font-size: 16px !important;
    }
    /* Header kompakter machen */
     .header-container {
         padding: 10px;
         flex-direction: row;
         justify-content: space-between;
    }
     .header-logo img {
         height: 120px;
    }
     .header-contact-group {
         gap: 10px;
    }
     .header-contact-item .contact-text {
         display: none;
    }
     .header-contact-item .icon {
         font-size: 1.8rem;
    }
    /* Hero Bild Höhe anpassen */
     .pure-home-img {
         height: 40vh;
    }
    /* Texte anpassen */
     h2 {
         font-size: 1.8rem;
         padding: 0 10px;
    }
     .gold-subtitle {
         font-size: 0.75rem;
         letter-spacing: 2px;
    }
    /* Flotte & FAQ untereinander */
     .fleet-grid {
         display: grid;
         grid-template-columns: 1fr !important;
         gap: 20px;
    }
     .fleet-card {
         width: 100%;
         max-width: 380px;
         margin: 0 auto;
    }
     .fleet-card {
         max-width: 400px;
         margin: 0 auto;
    }
    /* Formular-Optimierung */
     .form-container {
         padding: 25px 20px;
         width: 100%;
    }
     .form-row {
         flex-direction: column;
         gap: 15px;
    }
     .input-group {
         width: 100%;
    }
    /* Inputs sauber */
     .input-group input, .input-group select, .input-group textarea {
         padding: 14px;
         font-size: 0.95rem;
    }
    /* Tour-Fahrzeugwahl-Buttons (Handy-freundlich) */
     .tour-vehicle-grid {
         grid-template-columns: 1fr;
    }
     .vehicle-content {
         padding: 15px;
    }
     .vehicle-content .car-price {
         font-size: 1.2rem;
    }
    /* Hin- und Rückfahrt Toggle mittig lassen */
     .return-trip-option {
         flex-direction: row;
         justify-content: center;
    }
    /*kinder*/
     .child-seat-wrapper span {
         font-size: 0.85rem;
    }
    /* Footer auf Handy alles untereinander */
     .footer-container {
         grid-template-columns: 1fr;
         text-align: center;
    }
     .footer-col {
         align-items: center;
    }
     .social-links {
         justify-content: center;
    }
}
/* Für sehr kleine Handys (unter 480px) */
 @media (max-width: 480px) {
     section {
         padding: 50px 15px;
    }
     .btn-submit {
         padding: 15px;
         font-size: 1rem;
    }
     .header-logo img {
         height: 90px;
    }
}