/* * MODERN-STYLE.CSS (Version 13)
 *
 * ÄNDERUNGEN:
 * - [FIX] 'display: flex' von .modern-grid > .modern-col ENTFERNT.
 * Dies behebt das "Weißer Platz"-Problem auf Desktop/Mobil.
 * - [FIX] Hamburger-Menü (.navPanelToggle)
 * wird jetzt in einer Media Query korrekt angezeigt.
 */

/* === 1. GLOBALE STILE & ÜBERSCHREIBUNGEN === */

:root {
    --color-primary-dark: #005a34;  /* Dunkles Waldgrün */
    --color-primary-light: #e6f2e9; /* Helles Mint */
    --color-accent: #f39c12;       /* Heller, warmer Orangeton (CTA) */
    --color-accent-hover: #e67e22;   /* Dunkleres Orange (Hover) */
    --color-text: #333333;
    --color-text-light: #555555;
    --color-bg: #fdfdfa;           /* Sehr helles Beige/Off-white */
    --color-border: #e0e0e0;       /* Heller Rand für Formulare */
    --border-radius-lg: 16px;
    --border-radius-md: 10px;
    --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.1);
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.7;
    font-size: 16px;
}

.container {
    max-width: 1200px;
}

#main-wrapper {
    background: transparent;
    padding: 3rem 0;
}

/* === 2. HEADER & BANNER === */

#header-wrapper {
    background: var(--color-primary-dark);
}

#header-wrapper #banner {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

#header-wrapper #banner h2 {
    color: #ffffff;
}
#header-wrapper #banner p {
    color: rgba(255, 255, 255, 0.8);
}

#header h1 a {
    color: #ffffff;
}
#header h1 a:hover {
    color: rgba(255, 255, 255, 0.8);
}

#header nav > ul > li > a {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.2s ease-in-out;
}

#header nav > ul > li > a:hover {
    color: var(--color-accent) !important;
}

#header nav > ul > li.current_page_item a {
    color: #ffffff;
}

/* --- [FIX FÜR MOBIL-MENÜ] --- */
/* Zeigt den Hamburger-Button nur auf mobilen Geräten an */
@media (max-width: 767px) {
    .navPanelToggle {
        display: block !important;
        color: #ffffff !important;
        opacity: 0.8 !important;
        top: 0 !important;
        right: 0 !important;
        position: absolute !important;
        z-index: 10001 !important; /* Über dem Header */
        height: 4em !important;
        width: 4em !important;
        line-height: 4em !important;
        text-align: center;
    }
    .navPanelToggle:hover {
        opacity: 1 !important;
    }
}
/* --- ENDE FIX FÜR MOBIL-MENÜ --- */


/* === 3. TYPOGRAFIE === */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--color-primary-dark);
}

header.modern-heading h2 {
    font-size: 2.8rem;
    text-align: center;
    color: var(--color-primary-dark);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary-light);
    display: inline-block;
}
header.modern-heading {
    text-align: center;
    margin-bottom: 1rem;
}

header.modern-heading p {
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-text-light);
    margin-bottom: 2rem;
}

/* === 4. MODERNES FLEXBOX-GRID FÜR INHALT === */

.modern-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1.25rem;
}

.modern-col {
    padding: 1.25rem;
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 768px) {
    .modern-col-6 {
        width: 50%;
    }
    .modern-col-8 {
        width: 66.666%;
    }
    .modern-col-4 {
         width: 33.333%;
    }
    .modern-col-10 {
        width: 83.333%;
    }
    .modern-col-offset-1 {
        margin-left: 8.333%;
    }
    .modern-col-offset-2 {
        margin-left: 16.666%;
    }
}

@media (min-width: 992px) {
    .modern-col-12 {
        width: 100%;
    }
    /* Stellt sicher, dass 4er-Spalten auf Desktops 33% sind */
    .modern-col-4 {
        width: 33.333%;
    }
}


/* === 5. MODERNER KARTEN-STIL === */

.modern-card {
    background: #ffffff;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-medium);
    padding: 2rem;
    /* --- [FIX FÜR LEERRAUM] --- */
    /* 'height: 100%' wurde ENTFERNT.
       Karten haben jetzt eine Auto-Höhe. */
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border-top: 4px solid var(--color-primary-dark);
    width: 100%; /* Stellt sicher, dass Karte die Spalte füllt */
}

.modern-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* [FIX FÜR LEERRAUM]
   'display: flex' von der Spalte entfernt. */
/*
@media (min-width: 768px) {
    .modern-grid > .modern-col {
        display: flex;
    }
}
*/

.modern-card header {
    padding: 0;
    margin-bottom: 1rem;
}

.modern-card header h3 {
    font-size: 1.6rem;
    color: var(--color-primary-dark);
    margin: 0;
}

.modern-card header p {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin: 0.25rem 0 0 0;
}

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

.modern-card ul {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.modern-card li {
    margin-bottom: 0.5rem;
}

.modern-card footer {
    margin-top: auto; /* Schiebt den Footer immer nach unten */
    padding-top: 1.5rem;
}

/* === 6. BILDER & BUTTONS === */

.image.featured {
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.button {
    background: var(--color-accent);
    color: #ffffff !important; /* Wichtig für Links */
    border: none;
    border-radius: var(--border-radius-md);
    padding: 0.85rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block; /* Wichtig für <a> Tags */
    text-decoration: none;
}

.button:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    color: #ffffff !important;
}

.button.alt {
    background: transparent;
    color: var(--color-primary-dark) !important;
    border: 2px solid var(--color-primary-dark);
}

.button.alt:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-light);
}

.actions li .button {
    width: 100%;
    text-align: center;
}

@media (min-width: 768px) {
    .actions li .button {
        width: auto;
    }
}

/* === 7. GOOGLE MAPS & FOOTER BASIS === */

iframe[src*="http://googleusercontent.com/maps/google.com/0"] {
    border-radius: var(--border-radius-md);
    width: 100%;
    height: 400px;
}

#footer-wrapper {
    background: var(--color-primary-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: 4rem 0;
}

#footer-wrapper h2,
#footer-wrapper h3,
#footer-wrapper h4,
#footer-wrapper h5,
#footer-wrapper h6 {
    color: #ffffff;
}

#footer-wrapper a {
    color: rgba(255, 255, 255, 0.9);
}

#footer-wrapper a:hover {
    color: var(--color-accent);
}

#footer-wrapper .icon {
    color: rgba(255, 255, 255, 0.9);
}

#copyright {
    color: rgba(255, 255, 255, 0.6);
    border-top-color: rgba(255, 255, 255, 0.2);
}

#copyright a {
    color: rgba(255, 255, 255, 0.7);
}

#copyright a:hover {
    color: #ffffff;
}


/* === 8. FOOTER CONTENT (Version 10 Fix) === */

/* Spalten-Layout für Footer (ersetzt .8u, .4u) */
#footer .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

#footer .container > .row:first-of-type {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

#footer .container > .row:nth-of-type(2) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

#footer .container > .row:nth-of-type(3) {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 2rem;
    margin-top: 1rem;
}

@media (min-width: 992px) {
    #footer .container {
        grid-template-columns: 2fr 1fr;
        grid-template-areas:
            "dates    info"
            "subgrid  info"
            "copyright copyright";
    }

    #footer .container > .row:first-of-type {
        grid-area: dates;
        display: block;
    }
    #footer .container > .row:first-of-type > .4u {
        grid-area: info;
        margin-top: 0;
    }
    #footer .container > .row:nth-of-type(2) {
        grid-area: subgrid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    #footer .container > .row:nth-of-type(3) {
        grid-area: copyright;
    }

    #footer .container .4u {
        display: flex; /* Sorgt für Flex-Verhalten in .4u Spalten */
    }
}

/* "Karten"-Look für die Footer-Sektionen */
#footer .4u > section,
#footer .8u > section {
    background: rgba(0, 0, 0, 0.1);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Sorgt dafür, dass der Footer der Sektion unten bleibt */
#footer .4u > section footer,
#footer .8u > section footer {
    margin-top: auto;
}


/* Camp-Terminliste (Fix für Pfeile) */
#footer ul.dates {
    list-style: none;
    padding: 0;
}

#footer ul.dates li {
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    min-height: 50px;
}
#footer ul.dates li:first-child { padding-top: 0; }
#footer ul.dates li:last-child { border-bottom: none; }

#footer span.date {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

#footer span.date strong {
    color: var(--color-accent);
    font-weight: 700;
}

#footer ul.dates h3 {
    margin: 0 0 0 100px;
    align-self: center;
}
#footer ul.dates h3 a {
    color: #ffffff;
    font-size: 1.3rem;
    line-height: 1.3;
}
#footer ul.dates h3 a:hover { color: var(--color-accent); }

#footer ul.dates ol {
    margin: 0.5rem 0 0 100px;
    padding-left: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    width: auto;
}
#footer ul.dates ol li {
    padding: 0.25rem 0;
    border: 0;
    display: list-item;
}

@media (max-width: 480px) {
    #footer ul.dates h3 {
        margin-left: 80px;
    }
    #footer ul.dates ol {
        margin-left: 80px;
    }
}

/* Mailchimp Formular */
#mc_embed_signup {
    background: transparent !important;
    font-family: inherit !important;
    padding: 0 !important;
}
#mc_embed_signup label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}
#mc_embed_signup input.email {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius-md);
    color: #ffffff;
    height: auto;
    padding: 0.85rem;
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
}
#mc_embed_signup input.email::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
#mc_embed_signup .clear {
    margin-top: 0.5rem;
}
#mc_embed_signup .button {
    width: 100%;
    background: var(--color-accent);
    color: #ffffff !important;
}
#mc_embed_signup .button:hover {
    background: var(--color-accent-hover);
}


/* Kontakt- & Social-Listen (Fix für Überlappung V10) */
#footer ul.contact,
#footer ul.social {
    list-style: none;
    padding: 0;
}

#footer ul.contact li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#footer ul.contact li:last-child { border-bottom: none; }

#footer ul.contact h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
    display: block;
}

#footer ul.contact p {
    line-height: 1.6;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    word-wrap: break-word;
    display: block;
}

#footer ul.contact p a[href^="tel:"] {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    word-break: break-all;
}
#footer ul.contact p a[href^="tel:"]:hover {
    color: var(--color-accent) !important;
}

#footer ul.social {
    text-align: left;
}
#footer ul.social li {
    display: inline-block;
    margin-right: 0.5rem;
}


/* === 9. STILE FÜR BUCHUNG.PHP & SIDEBAR === */

.form-section {
    background: #ffffff;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    padding: 2rem;
    margin-bottom: 2rem;
}

.form-section header h3 {
    font-size: 1.8rem;
    color: var(--color-primary-dark);
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary-light);
}

.form-section label {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}
.form-section p, .form-section small {
    color: var(--color-text-light);
    margin-bottom: 1rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: #fdfdfa;
    color: var(--color-text);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 2px var(--color-primary-light);
    outline: none;
}

textarea {
    line-height: 1.6;
}

.form-check {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}
.form-check label {
    display: inline-block;
    margin: 0 0 0 0.5rem;
    font-weight: normal;
    color: var(--color-text-light);
}
.form-check input[type="radio"],
.form-check input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
}


.info-box-green {
    background: var(--color-primary-light);
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    margin: 1.5rem 0 0 0;
    color: var(--color-primary-dark);
}
.info-box-gray {
    background: #f4f4f4;
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    margin: 1rem 0 0 0;
}

.info-box-gray h3, .info-box-green h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem;
    color: var(--color-primary-dark);
}
.info-box-gray p, .info-box-green p {
    margin: 0;
    font-weight: 600;
}
.info-box-gray strong, .info-box-green strong {
    color: var(--color-primary-dark);
    font-size: 1.2rem;
}


/* === 10. STILE FÜR sidebartermine_include.php === */

.modern-sidebar-termine header h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}
.modern-sidebar-termine p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

ul.sidebar-termin-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.sidebar-termin-liste li {
    padding: 1rem 0;
    border-top: 1px solid var(--color-primary-light);
    margin: 0;
}

ul.sidebar-termin-liste li:first-child {
    border-top: none;
    padding-top: 0;
}

ul.sidebar-termin-liste li a {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary-dark);
    display: block;
    margin-bottom: 0.25rem;
    text-decoration: none;
}
ul.sidebar-termin-liste li a:hover {
    color: var(--color-accent);
}

ul.sidebar-termin-liste li strong {
    font-weight: normal;
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.5rem;
}
.status-badge.status-buchbar {
    background-color: var(--color-primary-dark);
}
.status-badge.status-fast-voll {
    background-color: var(--color-accent);
    color: #fff;
}
.status-badge.status-ausgebucht {
    background-color: #95a5a6; /* Grau */
}
.status-badge.status-info {
    background-color: #3498db; /* Blau */
}
/*
===================================================================
   FIX: Lesbarkeit des mobilen Menüs (navPanel)
===================================================================
*/

#navPanel {
    /* Ein dunkler, grüner Hintergrund, passend zur Seite */
    background-color: #21610B !important;

    /* Entfernt das helle Hintergrundbild, das die Lesbarkeit stört */
    background-image: none !important;
}

#navPanel .link {
    /* === STILE FÜR LESBARKEIT === */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-style: normal !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;

    /* === FIX FÜR ZEILENUMBRUCH === */

    /* Erlaubt dem Link, höher als 44px zu werden */
    height: auto !important;

    /* Setzt eine normale Zeilenhöhe für 2 Zeilen */
    line-height: 1.6em !important;

    /* Fügt oben/unten Polsterung hinzu für mehr Platz */
    padding: 0.75em 1em !important;
}

/* Macht den ersten Link auch weiß (falls er als '.depth-0' gestylt ist) */
#navPanel .depth-0 {
    color: #ffffff !important;
}

/* Ändert die Farbe, wenn man auf einen Link tippt/hovert */
#navPanel .link:hover {
    color: #04B45F !important; /* Helles Akzent-Grün */
}
/*
===================================================================
   Stil für das Datum im Navigations-Menü
===================================================================
*/
.nav-date {
    font-weight: 400; /* Dünner als der Haupttitel */
    font-size: 0.9em; /* Etwas kleiner */
    opacity: 0.85;    /* Etwas heller/transparenter */
}
/* === 11. MOBILE RESPONSIVE ANPASSUNGEN === */

@media (max-width: 767px) {

    /* Reduziert das Padding in den Haupt-Karten,
       um gequetschten Text zu verhindern */
    .modern-card {
      /* Oben/Unten 1.5rem, aber Links/Rechts 2rem (oder 2.25rem) */
      padding: 1.5rem 2.25rem;
    }

    /* Reduziert auch das Padding in den Footer-Karten */
    #footer .4u > section,
    #footer .8u > section {
        padding: 1.5rem;
    }

    /* Optional: Verkleinert die Schriftgröße der Überschriften in den Karten */
    .modern-card header h3 {
        font-size: 1.4rem;
    }

    /* Optional: Verkleinert die Hauptüberschriften auf Mobilgeräten */
    header.modern-heading h2 {
        font-size: 2rem;
    }
}
/* === MOBILE FIX FÜR ABGESCHNITTENE CARDS === */

/* Grundlegendes Problem: Die .modern-col Klassen haben negative margins
   vom .modern-grid, die auf kleinen Bildschirmen zu Überlauf führen */

@media (max-width: 767px) {

    /* Entfernt die negativen Margins vom Grid auf Mobile */
    .modern-grid {
        margin: 0;
    }

    /* Reduziert das Padding der Spalten deutlich */
    .modern-col {
        padding: 0.75rem;
    }

    /* Stellt sicher, dass alle Spalten 100% Breite haben */
    .modern-col,
    .modern-col-4,
    .modern-col-6,
    .modern-col-8,
    .modern-col-10,
    .modern-col-12 {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Verhindert horizontales Scrollen */
    body,
    #page-wrapper,
    #main-wrapper,
    .container {
        overflow-x: hidden;
    }

    /* Stellt sicher, dass der Container nie breiter als der Viewport ist */
    .container {
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Reduziert das Padding in den Cards */
    .modern-card {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }

    /* Kleinere Überschriften auf Mobile */
    .modern-card header h3 {
        font-size: 1.3rem;
    }

    header.modern-heading h2 {
        font-size: 1.8rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    header.modern-heading p {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Stellt sicher, dass Bilder nicht überlaufen */
    .modern-card .image.featured img,
    .image img {
        max-width: 100%;
        height: auto;
    }

    /* Google Maps responsive */
    iframe[src*="google.com/maps"] {
        width: 100% !important;
        height: 300px !important;
    }
}

/* Zusätzlicher Fix für sehr kleine Displays (iPhone SE, etc.) */
@media (max-width: 375px) {
    .modern-grid {
        margin: 0 -0.5rem;
    }

    .modern-col {
        padding: 0.5rem;
    }

    .modern-card {
        padding: 1rem;
    }
}

/* === FIX FÜR GALERIE-SEITE (impressionen2017.php) === */

@media (max-width: 767px) {

    /* Verhindert Überlauf beim Galerie-Container */
    #all-images-grid {
        padding: 5px;
        margin-top: 10px;
    }

    /* Optimiert die Bildgruppen */
    .image-group {
        margin-bottom: 15px;
    }

    /* Gruppenkopf responsive */
    .group-header {
        padding: 8px;
        flex-wrap: wrap;
    }

    .group-header h3 {
        font-size: 1rem;
        flex: 1 1 auto;
        min-width: 0; /* Erlaubt Text-Umbruch */
    }

    /* Teaser-Bild kleiner auf Mobile */
    .group-teaser-image {
        width: 60px;
        height: 60px;
        margin-left: 10px;
        flex-shrink: 0;
    }

    /* Versteckte Bilder-Container */
    .group-images-hidden {
        padding: 8px;
    }

    /* Optimiert das Grid für Mobile */
    .image-group-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 6px;
    }

    /* Grid-Items responsive */
    .grid-item img {
        height: 90px;
    }

    /* Video-Container responsive */
    .video-container {
        margin-bottom: 1rem;
    }

    /* Stellt sicher, dass die Offset-Spalte auf Mobile keine Offset hat */
    .modern-col-offset-1 {
        margin-left: 0 !important;
    }

    .modern-col-10 {
        width: 100% !important;
    }
}

/* Extra-kleiner Fix für sehr schmale Displays */
@media (max-width: 375px) {
    .image-group-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 5px;
    }

    .grid-item img {
        height: 80px;
    }

    .group-teaser-image {
        width: 50px;
        height: 50px;
    }
}