body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Quicksand', sans-serif;
    color: #000;
}

/* Hintergrundbild mit Overlay */
.startseite {
    background: url('hintergrund2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* WICHTIG: Bild bleibt beim Scrollen stehen */
    min-height: 100dvh; /*mobile Gerät*/
    display: flex;
}

/* Textgruppe unten links */
.titel-gruppe {
    position: absolute;
    bottom: 10%;
    left: 6%;
    text-shadow: 2px 2px 4px #000000b3;
}

.titel-gruppe h1 { font-size: 6rem; margin: 0; 
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}
.titel-gruppe h2 { font-size: 2.5rem; margin: 5px 0; font-weight: normal;color: white; }
.titel-gruppe p { font-size: 2.8rem; margin: 10px 0;color: white; }

/* Button-Liste rechts untereinander */
.button-liste-ecke {
    position: absolute;
    bottom: 10%;
    right: 6%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end;
}

.menu-btn {
    background-color: #f0ed93d0; /* gelbgrau von Flyer */
    color: rgb(0, 0, 0);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 15px 40px;
    font-size: 1.1rem;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease; /* Weicher Übergang */
    min-width: 300px;
    text-align: center;
}

/* Slide-Effekt nach links beim Hover */
.menu-btn:hover {
    background-color: rgba(198, 195, 110, 0.971);
    transform: translateX(-15px); /* Slide nach links */
    box-shadow: -5px 5px 15px rgba(0,0,0,0.3);
}

/* MODALE (Fenster) */
.modal {
    display: none; 
    overflow-y: auto;
    position: fixed; 
    z-index: 2000;                                   
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.2) ;                   
    justify-content: center; 
    align-items: center;
}

/* SPEZIELL: Das Standort-Modal muss ALLES überlagern */
#modal-standort {
    z-index: 99999 !important; 
}

#modal-standort .modal-content {
    z-index: 100000 !important;
    box-shadow: 0 5px 30px rgba(0,0,0,0.5);
}

/* Standard-Stil für alle Modale (Kontakt, Preise, Termin) bleibt klein */
.modal-content {
    background: rgba(198, 195, 118, 0.65); /*Kasten bei online termin außenrum*/
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 30px; 
    border-radius: 15px;
    max-width: 500px;
    width: 90%; 
    position: relative; 
    border: 1px solid #c6c376;
    /* WICHTIG FÜR MOBIL: */
    max-height: 85vh;    /* Nimmt max. 85% der Bildschirmhöhe ein */
    overflow-y: auto;    /* Macht den Inhalt scrollbar, wenn er zu lang ist */
    
    /* Verhindert "Bouncing" Effekte auf iOS */
    -webkit-overflow-scrolling: touch; 
}

.close { position: absolute; top: 10px; right: 20px; font-size: 24px; cursor: pointer; }

.action-btn {
    display: block; width: 100%; margin: 10px 0; padding: 12px;
    background:  #c6c376; /*Standorte die zur Auswahl stehen bei online termin*/
    color: black; 
    border: 1px solid #c6c376; 
    border-radius: 10px; 
    cursor: pointer;
}

/* Impressum unten Mitte */
.impressum-footer {
    position: fixed; 
    bottom: 15px; 
    width: 100%; 
    text-align: center;
}

.impressum-footer a {
    color: rgba(255, 255, 255, 0.5); 
    text-decoration: none; 
    font-size: 0.8rem;
}
/* Design für die Buchungsseite (booking.html) */
.booking-page {
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('hintergrund2.png') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.booking-container {
    background: rgba(198, 195, 118, 0.75); /* Dein gewünschtes Transparent-Gelb */
    backdrop-filter: blur(10px);
    padding: 20px;            /* Von 40px auf 20px reduziert, spart viel Platz oben/unten */
    border-radius: 20px;
    max-width: 800px;
    text-align: center;
    color: black !important;
    width: 90%;

    /* Begrenzt die Gesamthöhe des Containers */
    max-height: 90vh; 
    display: flex;
    flex-direction: column;
}    

.slots-grid {
    color: black ;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;               /* Lücken etwas verkleinert */
    margin-top: 15px;
    color: #000000 ;
    /* Macht nur das Gitter scrollbar, wenn es zu lang wird */
    overflow-y: auto;
    padding-right: 5px;      /* Platz für den Scrollbalken */
}

.slots-grid div, .slots-grid button {
    background: #c6c376; 
    color: black ;
    border: 1px solid rgba(0,0,0,0);
    padding: 15px 5px;
    border-radius: 10px;
    font-weight: bold;
    text-align: center;
}

/* NUR für das Ablauf-Fenster: 70% des Bildschirms einnehmen */
.modal-content.modal-breit {
    width: 70vw !important;      /* 70% der Bildschirmbreite */
    max-width: 1200px !important; /* Begrenzung für extrem breite Monitore */
    padding: 40px !important;    /* Mehr Innenabstand für die Optik */
    text-align: left;            /* Text linksbündig für bessere Lesbarkeit */
    
}

/*Styling für den Text innerhalb des Ablauf-Fensters */
.ablauf-text p {
   width: 95vw !important; /* Deutlich breiter für bessere Lesbarkeit */
    margin-bottom: 40px;
    line-height: 1.6;
    font-size: 1.2rem;
    color: black;
}

.ablauf-text strong {
    color: black;
    font-weight: 900;
    display: inline; /* Bleibt in der Zeile vor dem Doppelpunkt */
}

/* Fix für das Impressum auf jeder Seite */
.impressum-footer {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 999;
}
/* --- WEBVERSION (Groß & Präsent) --- */
.menu-btn {
    width: 280px !important; /* Große Buttons am PC */
    padding: 15px 25px !important;
}









/* Nur für das Impressum und den Datenschutz */
.legal-modal {
    width: 95% !important;     /* Fast volle Breite auf dem Handy */
    max-width: 900px !important; /* Großzügige Breite am PC */
    height: 85vh !important;    /* Nutzt fast die ganze Bildschirmhöhe */
    max-height: 800px;         /* Aber nicht unendlich hoch am PC */
    overflow-y: auto;          /* WICHTIG: Erlaubt das Scrollen im Fenster */
    padding: 40px 20px;        /* Mehr Platz oben/unten für die Lesbarkeit */
    z-index: 1001;
}

/* Den Text darin linksbündig und sauber formatiert */
.legal-modal h2, .legal-modal h3 {
    margin-top: 20px;
    border-bottom: 1px solid #ccc;
}

.legal-modal p {
    text-align: left;
    line-height: 1.6;
    font-size: 0.95rem;
}










/* --- MOBILE VERSION --- */
@media (max-width: 600px) {
    /* 1. Hintergrund & Layout */
    .startseite {
        flex-direction: column;
        justify-content: flex-start; /* Inhalt oben starten */
        align-items: center;
        padding: 20px;
        background-attachment: fixed; /* Besser für mobile Performance */
        min-height: 100vh;
        min-height: 100dvh;
        position: fixed;
    }

    /* 2. Titel auf Handy (Zentriert oder rechtsbündig) */
    .titel-gruppe {
        position: relative; /* Nicht mehr absolut auf Handy */
        left: 0;
        bottom: 0;
        margin: 40px 0;
        max-width: 100%;
        text-align: center; /* Auf dem Handy ist zentriert oft lesbarer */
        text-shadow: 1px 1px 3px #000;
    }

    .titel-gruppe h1 { font-size: 2.5rem; }
    .titel-gruppe h2 { font-size: 1.4rem; }
    .titel-gruppe p { font-size: 1.5rem; }

    /* 3. Modale (KEIN ZOOMEN MEHR) */
    .modal-content {
        width: 90% !important;     /* Nutzt die volle Breite vom Handy */
        max-width: 90vw !important; /* Verhindert das Rausragen */
        padding: 20px !important;
        font-size: 1rem !important;
        box-sizing: border-box;     /* Wichtig: Padding wird nicht zur Breite addiert */
    }
    .modal-content ul {
        padding-left: 0 !important;
        margin-left: 0 !important;
        list-style-type: none; /* Entfernt die Punkte, falls vorhanden */
    }

    /* Speziell für das Ablauf-Modal auf Handy */
    .modal-content.modal-breit {
        width: 90% !important;
        max-width: 90vw !important;
        /* Verhindert Einzug bei allen Absätzen und Texten */
        .modal-content p, 
        .modal-content li, 
        .modal-content div {
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-indent: 0 !important; /* Verhindert das Einrücken der ersten Zeile */
        text-align: left !important;
    }}

    /* 4. Buttons auf Handy */
    .button-liste-ecke {
        position: relative;
        right: 0;
        bottom: 0;
        width: 100%;
        align-items: center;
        gap: 12px;
        margin-bottom: 50px; /* Platz für Impressum lassen */
    }

    .menu-btn {
        min-width: 260px !important; /* Buttons schmaler für Handy */
        width: 80% !important;
        font-size: 1.2rem !important;
        padding: 12px !important;
    }
.booking-container {
    background: rgba(198, 195, 118, 0.75); /* Dein gewünschtes Transparent-Gelb */
    width: 93% !important;     /* Nutzt die volle Breite vom Handy */
        max-width: 95vw !important; /* Verhindert das Rausragen */
        padding: 10px !important;
        font-size: 1rem !important;
        box-sizing: border-box;
        position: fixed;
        color: #000;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}    
.slots-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow-y: none;
    padding-right: 5px; 
    color: #000;
    flex-grow: 1;          /* Nutzt den restlichen Platz im Container aus */
    

}




.legal-modal {

    width: 85% !important;     /* Nutzt die volle Breite vom Handy */
        max-width: 90vw !important; /* Verhindert das Rausragen */
        padding: 20px !important;
        font-size: 1rem !important;
        box-sizing: border-box; 
    height: 85vh !important;    /* Nutzt fast die ganze Bildschirmhöhe */
    max-height: 800px;         /* Aber nicht unendlich hoch am PC */
    overflow-y: auto;          /* WICHTIG: Erlaubt das Scrollen im Fenster */
    padding: 10px;        /* Mehr Platz oben/unten für die Lesbarkeit */
    z-index: 1001;
}
.back-btn-small {
    background-color: #f0ed93d0;
    color: black;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
    border-radius: 30px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    
    /* WICHTIG: Die Kombination für "nur so groß wie der Text" */
    display: inline-block !important; 
    width: auto !important;           
    min-width: 0 !important;          
    max-width: fit-content !important;
    padding: 8px 10px !important;

    /* Zentrierung im Container */
    margin: 10px auto 20px auto !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    /* Sicherstellen, dass er ganz oben liegt und klickbar ist */
    position: relative;
    z-index: 9999 !important;
    transition: all 0.3s ease;
}






}

/* Spezielles Styling für den Zurück-Button auf der Buchungsseite */
.back-btn-small {
    background-color: #f0ed93d0;
    color: black;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
    border-radius: 30px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    
    /* WICHTIG: Die Kombination für "nur so groß wie der Text" */
    display: inline-block !important; 
    width: auto !important;           
    min-width: 0 !important;          
    max-width: fit-content !important;
    padding: 8px 20px !important;

    /* Zentrierung im Container */
    margin: 40px auto 20px auto !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    /* Sicherstellen, dass er ganz oben liegt und klickbar ist */
    position: relative;
    z-index: 9999 !important;
    transition: all 0.3s ease;
}

/* KORREKTUR: Hover darf kein display: block enthalten! */
.back-btn-small:hover {
    background-color: rgba(198, 195, 110, 0.971);
    /* Nutze scale statt translateX/block, um die Größe beizubehalten */
    transform: translateX(-50%) scale(1.05); 
    
    /* Diese Werte müssen klein bleiben */
    width: auto !important;
    min-width: 0 !important;
}
a {
    color: black;
}


/* Verringert die blauen Abstände gezielt in der Terminübersicht */
.booking-container h2 {
    margin-bottom: 5px !important; /* Abstand unter der Hauptüberschrift */
}

.booking-container p {
    margin-top: 2px !important;    /* Abstand über den Texten */
    margin-bottom: 2px !important; /* Abstand unter den Texten */
    line-height: 1.1;              /* Zeilenabstand enger machen */
}

/* Der Bereich mit den Telefonnummern */
.booking-container a {
    display: inline-block;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Abstand vor der Datumszeile (z.B. Termine am 17. August...) */
.booking-container #status-meldung {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
}



#status-meldung, 
#status-meldung a, 
#status-meldung b, 
.booking-container p {
    color: #000000 !important; /* Absolutes Schwarz */
    opacity: 1 !important;      /* Keine Transparenz */
}

#status-meldung a {
    text-decoration: underline;
    font-weight: bold;
}

/* Styling für belegte Slots */
.slots-grid .belegt {
    background-color: #555555 !important; /* Dunkelgrau */
    color: #888888 !important;            /* Graue Schrift */
    cursor: not-allowed !important;
    opacity: 0.6;
}