/* Allgemeine Farben */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #d9d396; /*  */
    color: #333333; /* Dunkles Grau für Text */
}

header {
    text-align: center;
    padding: 2rem;
    background-color: #FFAB40;
    color: #fff; /* Weißer Text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

header h1 {
    font-size: 2.5rem;
}

header p {
    font-size: 1.2rem;
}


/* Galerie */
.gallery {
    text-align: center;
    padding: 2rem;
}

.gallery h2 {
    font-size: 1.8rem;
    color: #FF4081; /* Leuchtendes Pink für den Spruch */
    font-weight: bold;
    margin: 0;
    padding: 1rem;
    text-align: center;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.gallery-grid img {
    width: 100%;
    height: 400px; /* Einheitliche Höhe */
    object-fit: contain; /* Passt das Bild ein, ohne es zu verzerren */
    background-color: #d9d396; /* Optional: Hintergrundfarbe für leere Bereiche */
    border: 5px solid #FF4081; /* Leuchtendes Pink */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, border-color 0.3s;
}

.gallery-grid img:hover {
    transform: scale(1.05);
    transform: scale(1.05);
    border-color: #FFAB40; /* Wechsel zu Orange bei Hover */
}


.abschluss-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.abschluss-grid img {
    width: 100%;
    height: 400px; /* Einheitliche Höhe */
    object-fit: contain; /* Passt das Bild ein, ohne es zu verzerren */
    background-color: #d9d396; /* Optional: Hintergrundfarbe für leere Bereiche */
    border-radius: 8px;
    transition: transform 0.3s, border-color 0.3s;
}

.abschluss-grid img:hover {
    transform: scale(1.05);
    transform: scale(1.05);
    border-color: #FFAB40; /* Wechsel zu Orange bei Hover */
}

footer {
    text-align: center;
    padding: 1rem;
    background-color: #f08080;
    color: #fff;
    margin-top: 2rem;
}


/* Spruch über Bild */
.quote-section {
    background-color: #E1F5FE; /* Sanftes Blau für den Hintergrund */
    margin: 2rem 0;
    text-align: center;
}

.quote-container {
    display: flex;
    flex-direction: column; /* Text oben, Bild unten */
    align-items: center;
    gap: 1rem; /* Abstand zwischen Text und Bild */
}

.quote-text {
    font-size: 2.8rem;
    color: #160be1; /* Leuchtendes Pink für den Spruch */
    font-weight: bold;
    margin: 0;
    padding: 1rem;
    text-align: center;
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeIn 1.5s ease-out forwards; /* Spruch kommt zuerst */
}

.quote-container img {
    width: 100%; /* Passt sich an die Breite des Containers an */
    max-width: 400px; /* Maximale Breite, z. B. 800px */
    height: auto; /* Beibehaltung der Proportionen */
    border-radius: 10px; /* Optional: Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatteneffekt */
    margin: 2rem 0;
}

.quote-container img:hover {
    transform: scale(1.05); /* Leicht vergrößern */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Stärkere Schatten */
    margin: 2rem 0;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Campingplatz Card */
.campingplatz {
    display: flex;
    justify-content: center; /* Card zentrieren */
    padding: 2rem 1rem; /* Abstand zur Umgebung */
    background-color: #d9d396; /* Gleiche Hintergrundfarbe wie die Seite */
}

.campingplatz-card {
    background-color: #FFAB40; /* Helles Orange */
    color: #fff; /* Weißer Text */
    padding: 1.5rem;
    border-radius: 12px; /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatteneffekt */
    max-width: 600px; /* Maximale Breite */
    text-align: center; /* Zentrierter Text */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation */
}

.campingplatz-card:hover {
    transform: scale(1.05); /* Leichtes Vergrößern beim Hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Stärkerer Schatten */
}

.campingplatz-text {
    font-size: 1.2rem;
    line-height: 1.5;
    margin: 0;
}

.campingplatz-text a {
    color: #6a2452; /* Gelbliches Weiß für Links */
    font-weight: bold;
    text-decoration: none; /* Kein Unterstrich */
    border-bottom: 2px solid transparent; /* Für den Hover-Effekt */
    transition: color 0.3s, border-bottom 0.3s;
}

.campingplatz-text a:hover {
    color: #FFD740; /* Helles Gelb bei Hover */
    border-bottom: 2px solid #FFD740; /* Unterstrich bei Hover */
}
.campingplatz-card img {
    padding-top: 1em;
    width: 50%;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Adresse */
.campingplatz-address {
    font-size: 1rem;
    margin: 1rem 0 0; /* Abstand über der Adresse */
    color: #FFFDE7; /* Gelblicher Text */
    font-style: italic; /* Optionale Kursivschrift */
    line-height: 1.5;
}
/* FORMULAR */
.guest-form {
    background-color: #F3E5F5; /* Helles Lila für einen freundlichen Hintergrund */
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.guest-form-container {
    max-width: 600px;
    margin: 0 auto;
}

.guest-form h2 {
    text-align: center;
    color: #6A1B9A; /* Dunkles Lila */
    margin-bottom: 1.5rem;
}

.guest-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #4A148C; /* Dunkles Lila */
}

.guest-form input[type="text"],
.guest-form input[type="number"],
.guest-form input[type="date"] {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid #B39DDB; /* Helles Lila */
    border-radius: 8px;
    box-sizing: border-box;
}

.guest-form fieldset {
    margin-bottom: 1rem;
    border: 1px solid #B39DDB;
    padding: 1rem;
    border-radius: 8px;
}

.guest-form fieldset legend {
    font-weight: bold;
    color: #4A148C;
}

.guest-form button {
    display: block;
    width: 100%;
    padding: 0.8rem;
    background-color: #6A1B9A;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.guest-form button:hover {
    background-color: #4A148C;
}
textarea {
    width: 95%; /* Textfeld über die gesamte Breite des Containers */
    max-width: 800px; /* Maximale Breite */
    height: 120px; /* Feste Höhe, z. B. 120px */
    padding: 10px; /* Innenabstand */
    margin-bottom: 10px;
    border: 1px solid #ccc; /* Grauer Rand */
    border-radius: 8px; /* Abgerundete Ecken */
    resize: vertical; /* Benutzer kann die Höhe ändern, nicht die Breite */
    font-size: 1rem; /* Angenehme Schriftgröße */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

.activities {
    border: 2px solid #0288D1; /* Kräftiges Blau für den Rahmen */
    border-radius: 8px; /* Abgerundete Ecken */
    padding: 1rem; /* Abstand innerhalb des Feldes */
    margin-bottom: 1.5rem; /* Abstand nach unten */
    background-color: #E1F5FE; /* Sanftes Blau für den Hintergrund */
}

.activities legend {
    font-size: 1.15rem; /* Größere Schrift für die Überschrift */
    font-weight: bold;
    color: #629079; /* Dunkelblau */
    padding: 0 0.5rem; /* Platz um die Überschrift */
}

.checkbox-item {
    margin-bottom: 0.8rem; /* Abstand zwischen den Checkboxen */
}

.checkbox-item label {
    font-size: 1rem;
    color: #333; /* Dunkles Grau für den Text */
}

.checkbox-item input[type="checkbox"] {
    margin-right: 0.5rem; /* Abstand zwischen Checkbox und Text */
}

/* TIMELINE */

/* Allgemeiner Stil für die Timeline */
  .timeline {
            background-color: #E1F5FE; /* Sanftes Blau für den Hintergrund */
            padding: 2rem 1rem;
            margin-left: auto; /* Zentriert die Timeline */
            margin-right: auto; /* Zentriert die Timeline */
            overflow-x: hidden; /* Verhindert horizontalen Überlauf */
        }

        .timeline-title {
            text-align: center;
            font-size: 2rem;
            color: #0277BD; /* Dunkelblau für die Überschrift */
            margin-bottom: 1rem;
        }

        /* Container für den Ablaufplan */
        .timeline-container {
            display: flex;
            flex-direction: column;  /* Damit die Items untereinander angeordnet werden */
            align-items: stretch;    /* Stellt sicher, dass der Inhalt den Container vollständig ausfüllt */
            max-width: 800px; /* Maximale Breite der Timeline */
            margin-left: auto; /* Zentriert den Container horizontal */
            margin-right: auto; /* Zentriert den Container horizontal */
            width: 100%; /* Sorgt dafür, dass der Container die volle Breite des Eltern-Elements verwendet */
        }

        /* Stil für jeden Timeline-Eintrag */
        .timeline-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-right: 1em;
            margin-bottom: 1rem;
            background-color: #0288D1; /* Kräftiges Blau */
            color: white;
            padding: 0.8rem;
            border-radius: 8px;
            word-wrap: break-word; /* Umbricht lange Wörter, falls nötig */
            gap: 1rem; /* Abstand zwischen Uhrzeit und Event-Text */
            flex-direction: column; /* Für die Galerie: Items untereinander */
            align-items: stretch; /* Für die Galerie: volle Breite nutzen */
        }

        .timeline-detail {
            width: 100%;
        }

        .timeline-detail > h3,
        .timeline-detail > p {
            margin-bottom: 20px;
            color: white;
            font-size: 1.1rem;
        }

        /* Grid-Container für die Thumbnails */
        .thumbnail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .timeline-thumbnail {
            margin-top: 1rem; /* Abstand zum Event-Text */
            text-align: center; /* Vorschaubild zentrieren */
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .timeline-thumbnail:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.3);
        }

        .thumbnail {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
            border: 2px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
        }

        .timeline-thumbnail:hover .thumbnail {
            transform: scale(1.05);
        }

        .lightbox-trigger {
            display: block;
            text-decoration: none;
        }

        /* Lightbox Overlay */
        .lightbox-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .lightbox-overlay img {
            max-width: 90%;
            max-height: 90%;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        }

        .lightbox-overlay .lightbox-close {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 2rem;
            color: white;
            cursor: pointer;
            z-index: 1001;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .timeline {
                padding: 1rem;
            }
            
            .thumbnail-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 10px;
            }
            
            .thumbnail {
                height: 150px;
            }
        }

        @media (max-width: 480px) {
            .thumbnail-grid {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }
            
            .thumbnail {
                height: 120px;
            }
        }

/* Ausflugtipps */
/* Allgemeines Styling für die Sektion */
.ausflugtipps {
    background-color: #F1F8E9; /* Sanftes Grün für den Hintergrund */
    padding: 2rem 1rem;
    text-align: center;
}

.ausflugtipps-title {
    font-size: 2rem;
    color: #558B2F; /* Dunkler Grünton */
    margin-bottom: 2rem;
}

/* Container für die Ausflugskarten */
.ausflugtipps-container {
    display: flex;
    flex-wrap: wrap; /* Ermöglicht Umbruch für kleinere Bildschirme */
    justify-content: center;
    gap: 1.5rem; /* Abstand zwischen den Karten */
}

/* Einzelne Ausflugskarten */
.ausflug-card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 300px; /* Maximale Breite einer Karte */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ausflug-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Bild in der Karte */
.ausflug-image {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Schneidet das Bild passend zu */
}

/* Inhalt der Karte */
.ausflug-content {
    padding: 1rem;
    text-align: left;
}

.ausflug-title {
    font-size: 1.25rem;
    color: #33691E; /* Dunkler Grünton */
    margin-bottom: 0.5rem;
}

.ausflug-description {
    font-size: 1rem;
    color: #4E342E; /* Dezentes Braun */
    margin-bottom: 1rem;
}

.ausflug-link {
    display: inline-block;
    text-decoration: none;
    color: white;
    background-color: #689F38; /* Kräftiger Grünton */
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.ausflug-link:hover {
    background-color: #33691E; /* Dunkleres Grün beim Hover */
}

/* Responsive Design */
@media (max-width: 768px) {
    .ausflug-card {
        max-width: 100%; /* Karten nehmen die volle Breite ein */
    }
}

/* UNTERKÜNFTE */
.unterkunftstipps {
    background-color: #FFF3E0; /* Sanftes Orange */
    padding: 2rem 1rem;
    text-align: center;
}

.unterkunft-title {
    font-size: 2rem;
    color: #E65100; /* Dunkler Orange-Ton */
    margin-bottom: 2rem;
}
.unterkunft-subtitle {
    font-size: 1.5rem;
    color: #c50aa3; /* Dunkler Orange-Ton */
    margin-bottom: 2rem;
}

.unterkunft-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.unterkunft-card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 300px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.unterkunft-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.unterkunft-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.unterkunft-content {
    padding: 1rem;
    text-align: left;
}

.unterkunft-name {
    font-size: 1.25rem;
    color: #BF360C; /* Kräftiger Orange-Ton */
    margin-bottom: 0.5rem;
}

.unterkunft-description {
    font-size: 1rem;
    color: #4E342E; /* Dezentes Braun */
    margin-bottom: 1rem;
}

.unterkunft-link {
    display: inline-block;
    text-decoration: none;
    color: white;
    background-color: #F57C00; /* Kräftiges Orange */
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.unterkunft-link:hover {
    background-color: #BF360C; /* Dunkler Orange-Ton */
}

/* Platzplan */
.platzkarte {
    background-color: #9be8c4; /* Sanftes Blau */
    padding: 2rem 1rem;
    text-align: center;
}

.platzkarte-title {
    font-size: 2rem;
    color: #0288D1; /* Kräftiger Blau-Ton */
    margin-bottom: 1.5rem;
}

.platzkarte-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.platzkarte-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.platzkarte-description {
    font-size: 1rem;
    color: #455A64; /* Dezentes Grau-Blau */
}

.platzkarte-description a {
    color: #0277BD; /* Blau für den Link */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.platzkarte-description a:hover {
    color: #01579B; /* Dunkler Blau-Ton */
}

#formResponse {
    font-size: 1.2em;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    display: none; /* Anfangs versteckt */
}

#formResponse.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#formResponse.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.error {
    color: red;
    margin-top: 10px;
    font-weight: bold;
}
.fussweg {
    color: #d6d7ce;
    font-size: 0.8em;
}
.vertical-video {
  max-height: 80vh;
  width: auto;
  display: block;
  margin: 0 auto;
}