/* General body styling */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa; /* Fallback background color */
    margin: 0;
    padding: 0;
    /* Das Hintergrundbild wird hier definiert und fixiert! */
    background-image: url('../img/background.jpg'); /* Dein Hintergrundbild */
    background-size: cover; /* Bild deckt den Bereich ab */
    background-position: center; /* Bild zentrieren */
    background-repeat: no-repeat;
    background-attachment: fixed; /* Das Bild bleibt beim Scrollen fixiert! */
}

/* Hero section for the homepage (der erste Bildschirmabschnitt) */
.hero-section {
    position: relative;
    width: 100%;
    /* Volle Viewport-Höhe für den sichtbaren Bereich des Hero-Inhalts */
    height: 100vh;
    margin-top: 15vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgb(255, 255, 255) !important;
    /* Overlay für bessere Textlesbarkeit im Hero-Bereich */
    background-color: transparent; /* Semi-transparenter schwarzer Overlay */
    
}

/* Content within the hero section (Text und Überschrift) */
.hero-content {
    padding: 20px;
    max-width: 800px;
    margin-bottom: 20vh; /* Experimentiere mit diesem Wert */
}

/* Anpassung der Überschrift im Hero-Bereich */
.hero-content h1 {
    font-size: 3.3rem !important; /* Standard für Desktop, größer als Bootstrap display-1 */
    /* !important verwenden, falls Bootstrap display-1 zu stark ist */
    /* font-size: 5rem !important; */
    font-weight: bold  ;
}

/* Anpassung des Lead-Textes im Hero-Bereich */
.hero-content p.lead {
    font-size: 1.75rem !important; /* Standard für Desktop, größer als Bootstrap lead */
    /* !important verwenden, falls Bootstrap lead zu stark ist */
    /* font-size: 1.75rem !important; */
    margin-top: 30vh;
    font-weight: 400;
}


/* --- Responsive Anpassungen (Mobile-first Ansatz) --- */

/* Anpassungen für kleinere Bildschirme (max-width: 767.98px ist der Bootstrap 'sm' Breakpoint) */
@media (max-width: 767.98px) {
    /* Startseite: Titel kleiner machen auf Handys */
    .hero-content h1 {
        font-size: 3rem; /* Kleinere Schriftgröße für den Haupttitel auf Mobilgeräten */
    }

    /* Startseite: Lead-Text etwas kleiner machen */
    .hero-content p.lead {
        font-size: 1.25rem; /* Kleinere Schriftgröße für den Lead-Text auf Mobilgeräten */
    }

    /* ... Rest des Media Queries ... */
}

/* Anpassungen für noch kleinere Bildschirme (optional, z.B. iPhone SE) */
@media (max-width: 400px) {
    .hero-content h1 {
        font-size: 2.25rem; /* Noch kleiner für sehr kleine Bildschirme */
    }
}

/* Section for content that will scroll over the fixed background */
.content-section-scrollable {
    position: relative; /* Wichtig, damit es über dem body-Hintergrund liegt */
    /* *** HIER IST DIE WICHTIGE ÄNDERUNG *** */
    /* Semi-transparenter Hintergrund für den scrollenden Inhalt */
    background-color: transparent !important; /* Weiß mit 85% Deckkraft */
    /* Oder für einen dunkleren, semi-transparenten Overlay */
    /* background-color: rgba(0, 0, 0, 0.6); */
    z-index: 1; /* Stellt sicher, dass dieser Inhalt ÜBER dem fixierten body-Hintergrund liegt */
    padding: 60px 0; /* Standard Padding */
}


/* Custom card styling for the links */
.custom-card {
    width: 280px !important; /* Feste Breite für die Karten */
    height: 180px; /* Feste Höhe für die Karten */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Inhalt vertikal zentrieren */
    align-items: center; /* Inhalt horizontal zentrieren */
    text-decoration: none;
    color: rgb(74, 74, 74);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    text-align: center; /* Text innerhalb der Karte zentrieren */
    padding: 15px; /* Etwas Innenabstand für den Text */
    box-sizing: border-box; /* Stellt sicher, dass Padding und Border zur Breite/Höhe gehören */
    background-color: rgb(252, 206, 214);
}

/* Hover effect for custom cards */
.custom-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4) !important;
}

/* Ensure card links are clickable across the whole card */
.card-link {
    text-decoration: none;
    color: inherit;
}


/* Styles for subsequent pages (not the homepage hero section) */
/* Diese Klasse ist jetzt mehr generisch für andere Seiten */
.content-section {
    padding: 60px 0;
}

.content-section h1 {
    color: white;
}

/* Google Maps iframe styling */
.map-container {
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    position: relative;
    height: 0;
    margin-bottom: 20px;
}

.map-container iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border: 0;
}

/* General spacing for sections */
section {
    padding: 40px 0;
}

/* --- Responsive Anpassungen (Mobile-first Ansatz) --- */

/* Anpassungen für kleinere Bildschirme (max-width: 767.98px ist der Bootstrap 'sm' Breakpoint) */
@media (max-width: 767.98px) {
    /* Startseite: Titel kleiner machen auf Handys */
    .hero-content h1 {
        font-size: 2.5rem; /* Kleinere Schriftgröße für den Haupttitel */
    }

    /* Startseite: Lead-Text etwas kleiner machen */
    .hero-content p.lead {
        font-size: 1rem; /* Kleinere Schriftgröße für den Lead-Text */
    }

    /* Startseite: Karten können auf Handys die volle Breite einnehmen, da sie flex-column sind */
    .custom-card {
        width: 100%; /* Karten nehmen die volle Breite ihres Containers ein */
        max-width: 300px; /* Optional: Maximale Breite für sehr große Handys */
        margin-bottom: 20px; /* Etwas Abstand zwischen den Karten */
    }

    /* Tagesablauf und Gästebuch: Padding reduzieren */
    .content-section, .content-section-scrollable { /* Beide Klassen anpassen */
        padding: 30px 0; /* Weniger vertikales Padding auf Handys */
    }

    /* Footer: Textgröße anpassen, falls nötig */
    footer p {
        font-size: 0.8rem;
    }
}

/* Anpassungen für noch kleinere Bildschirme (optional, z.B. iPhone SE) */
@media (max-width: 400px) {
    .hero-content h1 {
        font-size: 2rem;
    }
}


/* Styling für den Header der Unterseiten (daily_schedule.html, guest_book.html) */
.page-header {
    background-color: rgb(252, 206, 214) !important; /* Dein gewünschtes Pink */
    color: rgb(74, 74, 74) !important; /* Die gewünschte graue Schriftfarbe */
}

/* Stelle sicher, dass Links im Header auch die richtige Farbe haben */
.page-header a {
    color: rgb(74, 74, 74) !important; /* Farbe für Links im Header */
    border-color: rgb(74, 74, 74) !important; /* Randfarbe für Buttons, falls vorhanden */
}

/* Optional: Anpassung des Zurück-Buttons */
.page-header .btn-light {
    background-color: rgb(255, 255, 255) !important; /* Leicht transparenter weißer Button */
    color: rgb(74, 74, 74) !important; /* Graue Schrift im Button */
    border-color: rgb(74, 74, 74) !important;
}

.page-header .btn-light:hover {
    background-color: rgb(252, 227, 231) !important;
    color: #333333 !important;
}

/* --- Styles für die Anmeldeseite --- */

/* Karten für das Anmeldeformular */
.guest-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Lösch-Button für die Person */
.delete-guest-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background: transparent;
    color: #dc3545;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
}

.delete-guest-btn:hover {
    opacity: 1;
}

/* Styling für Checkboxen und Textfelder */
.form-label {
    font-weight: 500;
}

.form-check-label {
    margin-left: 5px;
}

/* WhatsApp Button Style */
.btn-whatsapp {
    display: inline-block;
    width: 100%;
    background-color: #25D366;
    color: white !important; /* !important stellt sicher, dass Links nicht blau werden */
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: none;
}

.btn-whatsapp:hover {
    background-color: #128C7E; /* Dunkleres WhatsApp-Grün */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: translateY(-2px); /* Button hebt sich leicht an */
}

.btn-whatsapp i {
    font-size: 1.2rem;
    vertical-align: middle;
}