/* Erstellt die lokale Verbindung zur Schriftart */
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/great-vibes-v21-latin-regular.woff2') format('woff2'); 
}

/*  Wendet die Schreibschrift auf die Hauptüberschrift im Header an */
.header-content h1 {
  font-family: 'Great Vibes', cursive;
}


/* Grundaufbau der Seite */
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', Arial, sans-serif; 
    background-color: #EBF0ED; 
    color: #2D3748; 
}

#wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 95%;            
    max-width: 1300px;     
    min-height: 800px;
    background-color: #FFFFFF; 	
    box-shadow: 0 10px 30px rgba(46, 90, 68, 0.08); 
    border-radius: 0 0 12px 12px; 
    overflow: hidden;
}

/* Header & Hintergrundbild */
#header {
    width: 100%;
    height: auto;          /* Flexibel auf kleinen Bildschirmen */
    min-height: 140px;     
    position: relative;
    background-color: #2E5A44; 
}

.header-bg {
    display: block;
    width: 100%;
    height: 140px;         
    object-fit: cover;     
    opacity: 0.85; 
}

/* Container für die Elemente im Header */
.header-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px;          
    background: transparent;
    pointer-events: none;  
    z-index: 2;            
}

/* Logo ganz nach links setzen */
.logo {
    position: absolute;
    top: 10px;             
    left: 20px;            
    transform: none;       
    height: 55px;          
    width: auto;
    display: block;
    pointer-events: auto;  
    transition: transform 0.3s ease, height 0.3s ease, top 0.3s ease, left 0.3s ease; 
}

.logo:hover {
    animation: wippen 0.6s ease-in-out infinite; 
}

@keyframes wippen {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-4deg); }  
    75%  { transform: rotate(4deg); }   
    100% { transform: rotate(0deg); }   
}

/* Der normale Zustand der Überschrift (Standard für Handys) */
.header-content h1 {
    position: absolute;
    top: 65%;               
    left: 50%;
    transform: translate(-50%, -50%); 
    margin: 0;
    text-align: center;
    pointer-events: auto;  
    color: white; 
    width: 100%;
    max-width: 90%;         
    font-family: 'Great Vibes', cursive; 
    font-size: 19px;        
    letter-spacing: 0.5px; 
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); 
    white-space: normal; 
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease; 
}

/* Der Zustand der Überschrift beim Hovern (Allgemein) */
.header-content h1:hover {
    color: #59df1b;
    cursor: pointer; 
    text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8); 
    transform: translate(-50%, -55%); 
}

/* Vorbereitung für die unsichtbare Linie unter dem Text */
.header-content h1::after {
    content: '';
    display: block;
    width: 0; 
    height: 2px; 
    background: #59df1b; 
    margin: 8px auto 0 auto; 
    transition: width 0.9s ease; 
}

/* Aktiviert die Linie von der Mitte aus */
.header-content h1:hover::after {
    width: 75%; 
}

/* ==========================================
   NAVIGATIONS-MENÜ (Standard für Handys/Tablets: Untereinander gestapelt)
   ========================================== */
#menu {
    background-color: #468261;
    width: 100%;
    position: relative;    
    z-index: 10;           
}

#menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Menüpunkte untereinander auf kleinen Bildschirmen */
}

#menu li {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Feine Trennlinie auf dem Handy */
}

#menu a {
    display: block;
    color: white;
    padding: 14px 20px;     /* Minimal kompakter auf dem Handy */
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer; 
    transition: background-color 0.3s, color 0.3s; 
}

#menu a:hover {
    color: #000000 !important;          
    background-color: #2ECC71 !important; 
    border-color: #27AE60 !important;     
    cursor: pointer;              
}

#menu a.active {
    color: #FFFFFF !important;
    background-color: #2E5A44 !important;
    border-color: #1E3D2F !important;
}


/* ==================================================================
   MEDIENABFRAGE: AB HIER GELTEN DIE ANPASSUNGEN FÜR GROSSE BILDSCHIRME
   ================================================================== */
@media (min-width: 768px) {
    #header {
        height: 140px;     /* Erzwingt die feste Höhe wieder auf dem PC */
    }

    .logo {
        top: 25px;
        left: 40px;
        height: 90px;
    }

    .header-content h1 {
        top: 55%;           
        font-size: 25px; 
        max-width: 80%;     
        white-space: nowrap; 
    }
    
    .header-content h1:hover {
        transform: translate(-50%, -55%); 
    }

    /* Schaltet das Menü auf großen Bildschirmen wieder nebeneinander */
    #menu ul {
        flex-direction: row; 
    }

    #menu li {
        flex: 1;
        min-width: 120px; 
        border-bottom: none; /* Entfernt die Handy-Trennlinie auf dem Desktop */
    }
}



/* Hauptteil (Inhalt) */
#hauptteil {
    box-sizing: border-box; 
    width: 100%; 
    min-height: 750px;      
    background-color: #FFFFFF;
    padding: 50px 40px;          
    color: #2D3748;
}

/* Footer (Passend zum Menü in Salbeigrün) */
#footer {
    width: 100%;
    height: 60px;
    background-color: #468261;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 14px;
}

#footer p {
    margin: 0;
    font-weight: bold;
}

/* Layout für die Kontaktseite (Zwei-Spalten-System) */
.kontakt-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 30px;
}

.kontakt-formular {
    flex: 2;
    min-width: 300px;
    background-color: #F1F5F9; /* Angenehmes Hellgrau */
    padding: 25px;
    border-radius: 8px;
    color: #2D3748;
}

.kontakt-info {
    flex: 1;
    min-width: 250px;
    background-color: #F8FAFC; /* Ganz softes Hintergrund-Weiß/Grau */
    padding: 25px;
    border-radius: 8px;
    border-left: 5px solid #2E5A44; /* Waldgrüner Zierstreifen */
    color: #2D3748;
}

.kontakt-info h3 {
    margin-top: 0;
    color: #2E5A44; /* Waldgrün */
}

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 8px;
    font-weight: bold;
}

.form-group input, 
.form-group textarea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14px;
    color: black;
}

.form-group input:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: #2E5A44; /* Grüner Rahmen beim Reinblicken */
    box-shadow: 0 0 0 3px rgba(46, 90, 68, 0.1);
}

.form-checkbox {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.form-checkbox input {
    margin-top: 4px;
    cursor: pointer;
}

.submit-btn {
    background-color: #D97746; /* Warmes Abend-Orange */
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.submit-btn:hover {
    background-color: #2E5A44; /* Wird grün beim Drüberfahren */
    transform: translateY(-2px);
}

/* Styling für den Google Maps Link */
.maps-link {
    display: inline-block;
    color: #D97746; /* Orange */
    font-weight: bold;
    text-decoration: none;
    margin-top: 5px;
    padding: 5px 0;
    transition: color 0.2s;
}

.maps-link:hover {
    color: #2E5A44; 
    text-decoration: underline; 
}

/* Styling für die Startseite */
.welcome-section {
     /* Fügt 30 Pixel Abstand zwischen Menü und der Überschrift hinzu */
    padding-top: 30px !important; 
    margin-bottom: 50px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.welcome-section h2 {
    font-size: 36px;
    font-family: 'Great Vibes', cursive; /* Idyllische Schreibschrift */
    color: #D97746; 
    margin-top: 0;
    margin-bottom: 15px;
}

.welcome-section p {
    font-size: 16px;
    line-height: 1.7;
    color: #4A5568;
}

/* Raster-Layout für die Spalten */
.startseite-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.info-box, .news-box {
    flex: 1;
    min-width: 300px;
    background-color: #F8FAFC; 
    padding: 30px;
    border-radius: 12px; 
    border-left: 5px solid #2E5A44; /* Waldgrüner Zierstreifen links */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.info-box h3, .news-box h3 {
    margin-top: 0;
    color: #2E5A44;
    font-size: 20px;
    font-weight: 700;
    border-bottom: 2px solid #E2E8F0;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.info-box ul {
    padding-left: 20px;
}

.info-box li {
    margin-bottom: 12px;
    line-height: 1.6;
    color: #4A5568;
}

/* Termine-Bereich */
.news-item {
    margin-bottom: 20px;
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 15px;
}

.news-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.news-item .date {
    display: inline-block;
    background-color: #EBF0ED; /* Dezenter grüner Hintergrund */
    color: #2E5A44; /* Grüner Text */
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 5px;
}

.news-item p {
    margin: 5px 0 0 0;
    line-height: 1.5;
    color: #4A5568;
}

/* Layout für die Freie-Gärten-Seite */
.garten-liste {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Die Garten-Karte */
.garten-card {
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);

     /* Erzwingt eine feste Lücke von 30 Pixeln zwischen Bild und Text */
    gap: 30px !important; 
}

/* Status-Schild oben auf der Karte */
.garten-status.frei {
    background-color: #D97746; /* Aufmerksamkeitsstarkes Abend-Orange */
    color: white;
    padding: 6px 18px;
    font-weight: bold;
    font-size: 14px;
    align-self: flex-start;
    border-bottom-right-radius: 12px;
}

/* Der rechte Textbereich darf flexibel nach unten wachsen */
.garten-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    /* ANPASSUNG: Oben/Unten/Rechts bleibt 15px, aber nach LINKS zum Bild erhöhen wir auf 30px */
    padding: 15px 15px 15px 30px !important; 
}


.garten-details h3 {
    margin-top: 0;
    font-size: 24px;
    color: #2E5A44;
}

/* Tabelle für die harten Fakten */
.garten-table {
    width: 100%;
    max-width: 500px;
    margin: 20px 0;
    border-collapse: collapse;
}

.garten-table td {
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid #E2E8F0; /* Sauberer, heller Strich */
    color: #4A5568;
}

/* Button zur Kontaktaufnahme */
.garten-btn {
    display: inline-block;
    background-color: #D97746; /* Warmes Abend-Orange */
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.2s, transform 0.2s;
    margin-top: 10px;
}

.garten-btn:hover {
    background-color: #2E5A44; 
    transform: translateY(-2px);
}

/* Info-Box für die Warteliste */
.garten-info-box {
    background-color: #F8FAFC;
    padding: 25px;
    border-radius: 12px;
    border-left: 5px solid #2E5A44;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.garten-info-box h3 {
    margin-top: 0;
    color: #2E5A44;
}

/* Layout-Änderung für die Garten-Karte mit Bild */
@media (min-width: 768px) {
    .garten-card {
        flex-direction: row; 
    }
    .garten-bild-container {
        width: 350px; 
        min-height: 100%;
    }
    .garten-card .garten-status.frei {
        border-bottom-right-radius: 12px !important;
    }
}

.garten-bild-container {
    position: relative;
    background-color: #E2E8F0; 
}

/* Sorgt dafür, dass das große Foto sich nicht verzieht und einen Rahmen erhält */
.garten-foto {
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
    
    /* NEU: Derselbe schmale, dunkelgraue Rahmen wie bei den kleinen Bildern */
    border: 2px solid #555555 !important;
    
    /* Sorgt dafür, dass der Rahmen das Bild nicht verschiebt */
    box-sizing: border-box !important;
    
    /* Passt die Ecken an die Rundung der Garten-Karte an */
    border-radius: 4px; 
}


.garten-card .garten-status.frei {
    position: absolute;
    top: 0;
    left: 0;
    border-bottom-right-radius: 12px;
}

/* Styling für die Über-Uns-Seite */
.intro-text {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #4A5568;
}

.ueber-uns-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.ueber-uns-text {
    flex: 2;
    min-width: 300px;
}

.ueber-uns-text h3 {
    color: #2E5A44;
    margin-top: 0;
}

.ueber-uns-fakten {
    flex: 1;
    min-width: 250px;
    background-color: #F8FAFC;
    padding: 25px;
    border-radius: 12px;
    border-top: 5px solid #2E5A44; /* Grüner Streifen oben */
    align-self: flex-start;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.ueber-uns-fakten h3 {
    margin-top: 0;
    color: #2E5A44;
}

.fakten-liste {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.fakten-liste li {
    padding: 12px 0;
    border-bottom: 1px solid #E2E8F0;
    color: #4A5568;
}

.fakten-liste li:last-child {
    border-bottom: none;
}

/* Styling für Rechtstexte (Impressum) */
.legal-text h3 {
    color: #2E5A44;
    margin-top: 30px;
    font-size: 20px;
}

.legal-text p {
    line-height: 1.6;
    font-size: 15px;
    color: #4A5568;
}

/* Footer-Link Styling */
.footer-link {
    color: #FFE6D5;
    text-decoration: none;
    margin-left: 10px;
    font-weight: bold;
    transition: color 0.2s;
}

.footer-link:hover {
    text-decoration: underline;
    color: #FFFFFF;
}

/* ==========================================
   LAYOUT UND SLIDESHOW FÜR DOKUMENTE.HTML
   ========================================== */
.dokumente-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 30px;
    align-items: flex-start;
}

.dokumente-links, .slideshow-container {
    flex: 1;
    min-width: 300px; 
}

/* Styling für die PDF-Buttons */
.doc-btn {
    display: block;
    background-color: #F1F5F9; /* Sanfter, heller Button */
    color: #2D3748;
    padding: 15px 20px;
    margin-bottom: 15px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    border-left: 5px solid #468261; /* Salbeigrüner Akzent-Strich */
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.doc-btn:hover {
    background-color: #468261; /* Wird salbeigrün */
    color: white;
    transform: translateX(5px); 
}

/* ==========================================
   5. BILDER-SLIDESHOW (AKTIV)
   ========================================== */
.slideshow-rahmen {
    position: relative;
    width: 100%;
    height: 350px; 
    border: 8px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 1px 8px rgba(0, 0, 0, 0.1);
    border-radius: 12px; 
    overflow: hidden; 
    background-color: #222;
}

.slide-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    opacity: 0;
    animation: gartenSlideshow 64s infinite ease-in-out; 
}

.slide-img:nth-child(1) { animation-delay: 0s; }
.slide-img:nth-child(2) { animation-delay: 8s; }
.slide-img:nth-child(3) { animation-delay: 16s; }
.slide-img:nth-child(4) { animation-delay: 24s; }
.slide-img:nth-child(5) { animation-delay: 32s; }
.slide-img:nth-child(6) { animation-delay: 40s; }
.slide-img:nth-child(7) { animation-delay: 48s; }
.slide-img:nth-child(8) { animation-delay: 56s; }

@keyframes gartenSlideshow {
    0% { opacity: 0; }
    3.125% { opacity: 1; }
    12.5% { opacity: 1; }
    15.625% { opacity: 0; }
    100% { opacity: 0; }
}

/* ==========================================
   LAYOUT FÜR VERMIETUNG.HTML
   ========================================== */

/* Container, der die zwei Mietobjekte nebeneinander platziert */
.vermietung-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
}

/* Die einzelnen Miet-Karten */
.miet-objekt {
    flex: 1;
    min-width: 320px; 
    background-color: #F8FAFC; /* Heller Box-Hintergrund */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    border-bottom: 4px solid #2E5A44; /* Waldgrüner Abschlussstrich */
    transition: transform 0.3s ease;
}

.miet-objekt:hover {
    transform: translateY(-5px); 
}

/* Bildbereich in der Karte */
.miet-bild-wrap {
    position: relative;
    width: 100%;
    height: 220px;
}

.miet-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Das Preisschild auf dem Bild */
.miet-preis {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: #D97746; /* Warmes Abend-Orange */
    color: white;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Textbereich in der Karte */
.miet-text {
    padding: 25px;
    color: #2D3748;
}

.miet-text h3 {
    margin-top: 0;
    color: #2E5A44; /* Waldgrün */
    font-size: 22px;
    border-bottom: 2px solid #E2E8F0; /* Sauberer, heller Strich */
    padding-bottom: 10px;
}

/* Die Ausstattungsliste */
.miet-details {
    list-style-type: none;
    padding: 0;
    margin: 15px 0 0 0;
}

.miet-details li {
    padding: 8px 0;
    border-bottom: 1px dashed #E2E8F0; /* Helles Grau für Unterbrechung */
    font-size: 14px;
    color: #4A5568;
}

.miet-details li:last-child {
    border-bottom: none;
}

/* ==========================================
   ERWEITERUNG: BILDERGALERIE FÜR VERMIETUNG
   ========================================== */
.galerie-titel {
    margin-top: 50px;
    margin-bottom: 20px;
    font-size: 22px;
    color: #2E5A44; /* Waldgrün */
    border-bottom: 2px solid #E2E8F0;
    padding-bottom: 10px;
}

/* Erstellt ein flexibles 4-Spalten-Raster */
.miet-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Einzelne Bildkarte in der Galerie */
.galerie-item {
    position: relative;
    background-color: #E2E8F0;
    border: 4px solid white;
    border-radius: 8px; /* Modern abgerundete Rahmen */
    overflow: hidden;
    height: 160px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease;
}

.galerie-item:hover {
    transform: scale(1.03); 
}

.galerie-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Einblendbarer Text beim Drüberfahren (Hover) mit der Maus */
.galerie-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(35, 68, 51, 0.9); /* Dunkles Waldgrün mit Transparenz */
    color: white;
    font-size: 13px;
    text-align: center;
    padding: 10px 0;
    transform: translateY(100%);
    transition: transform 0.2s ease;
}

/* Zeigt die Beschriftung beim Hovern an */
.galerie-item:hover .galerie-caption {
    transform: translateY(0);
}

/* ==========================================================================
   ERWEITERUNG: INTERAKTIVE ELEMENTE & EFFEKTE (ÜBER UNS)
   ========================================================================== */

.galerie-item:hover .galerie-caption {
    transform: translateY(0); 
}

/* Das Bild der Vereinslaube im Normalzustand */
.vereinslaube-img {
    display: block;
    max-width: 100%;       
    height: auto; 
    border-radius: 12px;    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    transition: opacity 0.5s ease, max-height 0.5s ease, margin-top 0.5s ease;
}

/* Wenn man über die h2 hovert, wird das Bild weiter unten eingeblendet */
#hauptteil .welcome-section h2:hover ~ .ueber-uns-grid .vereinslaube-img,
#hauptteil h2:hover ~ .ueber-uns-grid .vereinslaube-img {
    opacity: 1;
    max-height: 450px;     
    margin-top: 20px;      
}

/* Macht die h2 deutlich als interaktives Element spürbar */
#hauptteil h2 {
    cursor: pointer;
    display: inline-block; 
    transition: color 0.3s ease;
}

/* Die h2 färbt sich beim Hovern im warmen Abend-Orange */
#hauptteil h2:hover {
    color: #D97746; 
}

/* ==========================================
   NAVIGATIONS-MENÜ (Mit ovalen Rahmen & Burger)
   ========================================== */
#menu {
    background-color: #468261;
    width: 100%;
    position: relative;    
    z-index: 10;           
}

/* Der Burger-Button (Standardmäßig auf dem Handy sichtbar) */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 15px 20px; 
}

/* Die 3 Striche des Burgers */
.menu-toggle span {
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* CSS-Animation zum "X" */
.menu-toggle.open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.menu-toggle.open span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Die Menüleiste auf dem Handy (Standardmäßig geschlossen) */
#menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; 
    max-height: 0;           
    overflow: hidden;        
    transition: max-height 0.4s ease-in-out; 
}

#menu ul.show {
    max-height: 500px; /* VORHER: 350px -> Erhöht, damit alle Menüpunkte komplett reinpassen */
    padding: 10px 0;   
}


#menu li {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 5px 20px; /* Gibt den ovalen Rahmen Platz zum Atmen auf dem Handy */
}

/* Das Design für die klickbaren Links mit OVALEM RAHMEN */
#menu a {
    display: block;
    color: white;
    padding: 12px 20px;     
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer; 
    border: 2px solid transparent; /* Unsichtbarer Start-Rahmen (verhindert Ruckeln) */
    border-radius: 50px;           /* Macht den Rahmen perfekt OVAL */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s; 
}

/* EFFEKT: LEUCHTEND HELLGRÜNER HOVER FÜR MENÜ */
#menu a:hover {
    color: #000000 !important;          
    background-color: #2ECC71 !important; 
    border-color: #27AE60 !important; /* Grüner Rahmen beim Hovern */
}

/* WICHTIG: Die aktuell aktive Seite im eleganten Waldgrün mit dunklem Rahmen */
#menu a.active {
    color: #FFFFFF !important;
    background-color: #2E5A44 !important;
    border-color: #1E3D2F !important; /* Eleganter, dunkler Rahmen für den aktiven Link */
}

/* ==================================================================
   MEDIENABFRAGE: AB HIER GELTEN DIE ANPASSUNGEN FÜR GROSSE BILDSCHIRME
   ================================================================== */
@media (min-width: 768px) {
    #header {
        height: 140px;     
    }

    .logo {
        top: 25px;
        left: 40px;
        height: 90px;
    }

    .header-content h1 {
        top: 55%;           
        font-size: 25px; 
        max-width: 80%;     
        white-space: nowrap; 
    }
    
    .header-content h1:hover {
        transform: translate(-50%, -55%); 
    }

    /* Auf dem Desktop wird der Burger-Button versteckt */
    .menu-toggle {
        display: none;
    }

    /* Das Menü nebeneinander anzeigen */
    #menu ul {
        display: flex;
        flex-direction: row; 
        max-height: none; 
        overflow: visible;
        padding: 10px 20px; /* Abstand oben/unten für die Rahmen auf dem PC */
    }

    #menu li {
        flex: 1;
        min-width: 120px; 
        padding: 0 5px; /* Seitlicher Abstand zwischen den ovalen Buttons */
    }
}


/* ==========================================================================
   ALTERNATIVES KARTEN-GRID (FREIE GÄRTEN)
   ========================================================================== */

.garten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px;
    margin-top: 30px;
}

.garten-karte {
    background-color: #F8FAFC; /* Heller Box-Hintergrund */
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.garten-karte:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(46, 90, 68, 0.1);
}

.garten-img {
    width: 100%;
    height: 200px;
    object-fit: cover; 
}

.garten-info {
    padding: 25px !important;
    color: #2D3748;
}

.garten-info h3 {
    margin-top: 0;
    color: #2E5A44; /* Waldgrün */
    font-size: 20px;
    border-bottom: 2px solid #D97746; /* Warme orangefarbene Zierlinie */
    padding-bottom: 8px;
}

.garten-details {
    list-style: none;
    padding: 0;
    padding-left: 5px !important;
    margin: 15px 0;
    margin-top: 10px !important;
}

.garten-details li {
    padding: 8px 0;
    font-size: 14px;
    color: #4A5568;
    border-bottom: 1px dashed #E2E8F0;
}

.garten-details li:last-child {
    border-bottom: none;
}

/* ==========================================================================
   BUTTON-GRUPPE UND KLAPP-GALERIE (.garten-card)
   ========================================================================== */

/* Setzt die Knöpfe ordentlich nebeneinander unter die Tabelle */
.garten-btn-group {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    align-items: flex-start !important; /* Verhindert, dass sich Knöpfe in die Länge ziehen */
}

/* Gestaltet den Galerie-Knopf passend zu Buttons */
.garten-galerie-wrapper {
    flex: 1;
    display: block;
}

/* Entfernt den Standard-Pfeil des Browsers */
.garten-galerie-wrapper summary::-webkit-details-marker { display: none; }
.garten-galerie-wrapper summary { list-style: none; }

.garten-btn.btn-bilder {
    background-color: #7F8C8D; /* Elegantes, neutrales Grau */
    color: white !important;
    padding: 12px 10px;
    text-align: center;
    font-weight: bold;
    border-radius: 6px; /* Modern abgerundete Ecken */
    text-decoration: none;
    display: block;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

/* Wechselt beim Drüberfahren zu warmen Abend-Orange */
.garten-btn.btn-bilder:hover {
    background-color: #D97746; /* Harmonisches Akzent-Orange */
    color: white !important;
}

/* Die ausklappende Bilderbox */
/* --- OPTIMIERUNG DER BILDERGALERIE & ZOOM-EFFEKT --- */

/* Erlaubt den Vorschaubildern, in die nächste Zeile zu springen */
.galerie-bilder {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap; /* WICHTIG: Verhindert das Schrumpfen, Bilder brechen nun ab Reihe 2 um */
    gap: 10px;       /* Gleichmäßiger Abstand zwischen allen Bildern */
}

/* Definition der Vorschaubilder mit sanftem Übergang */
.galerie-thumb {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out; /* Macht die Vergrößerung flüssig */
}

/* Hover-Effekt: Wird leicht größer, wenn man mit der Maus drüberfährt */
.galerie-thumb:hover {
    transform: scale(1.08); /* Erhöht die Größe um 8% beim Drüberfahren */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Klick-Effekt: Wird deutlich größer, solange man die Maustaste gedrückt hält */
.galerie-thumb:active {
    transform: scale(3.0); /* Verweilt beim Klicken auf der 3-fachen Größe */
    position: relative;
    z-index: 10;           /* Schiebt das vergrößerte Bild in den Vordergrund */
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}


/* ==========================================
   EFFEKT: LEUCHTEND HELLGRÜNER HOVER FÜR MENÜ
   ========================================== */
#menu a:hover {
    color: #000000 !important;          
    background-color: #51d72c !important; 
    border-color: #27AE60 !important;     
    cursor: pointer;              
}

/* WICHTIG: Die aktuell aktive Seite bleibt im eleganten Waldgrün */
#menu a.active {
    color: #FFFFFF !important;
    background-color: #2E5A44 !important;
    border-color: #1E3D2F !important;
}

/* ======================================================= */
/* CODE FÜR DIE FOTOGALERIE                           */
/* ======================================================= */

.galerie-sektion {
    margin-bottom: 30px;
}

.galerie-titel {
    font-size: 1.4rem;
    color: #2e7d32; /* Passendes Vereins-Grün */
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

/* Das Raster-Layout für die Bilder */
.galerie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px; /* Abstand zwischen den Bildern */
}

/* Die einzelne Bilder-Karte */
.galerie-kachel {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover-Effekt: Bild hebt sich leicht an */
.galerie-kachel:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Bild-Einstellungen */
.galerie-kachel img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Schneidet die Bilder sauber im Rechteck zu */
    display: block;
}

/* Beschreibungstext unter dem Bild */
.bild-beschreibung {
    padding: 12px;
    font-size: 0.95rem;
    text-align: center;
    color: #444444;
    font-weight: 500;
    border-top: 1px solid #f0f0f0;
}

/* --- ANPASSUNG FÜR DEN GROSSEN ZOOM-FAKTOR (3.5) --- */

.garten-card {
    display: flex !important;
    flex-direction: row; 
    align-items: flex-start !important; 
    margin-bottom: 30px;
    background-color: #f9f9f9; 
    border-radius: 8px;
    /* overflow: hidden; <-- DIESE ZEILE ENTFERNEN ODER AUSKOMMENTIEREN */
    overflow: visible !important; /* Erlaubt es Bildern, aus der Karte herauszuragen */
}

.galerie-thumb {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 4px;
    cursor: pointer;
    position: relative; 
    z-index: 1;
    transition: transform 0.2s ease-in-out; 

    /* Ein schmaler, dunkelgrauer Rahmen */
    border: 1px solid #555555 !important; 
    
    /* Sorgt dafür, dass der Rahmen die Bildgröße nicht verändert */
    box-sizing: border-box !important; 
}


/* Hover-Effekt bleibt minimal */
.galerie-thumb:hover {
    transform: scale(1.08); 
    z-index: 5; /* Schiebt das Bild leicht nach vorne */
}

/* Klick-Effekt mit Faktor */
.galerie-thumb:active {
    transform: scale(4.5) !important; /* Erhöht auf 4,5-fache Größe */
    position: relative;
    z-index: 9999 !important; /* Zwingt das Bild vor ALLE anderen Texte und Tabellen */
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    border-radius: 2px; /* Verhindert unschöne Ecken beim starken Zoomen */
}
/* --- STATUS-BANNER FÜR VERGEBENE GÄRTEN --- */

/* Gemeinsame Basisregeln für alle Status-Banner */
.garten-status {
    display: flex !important;
    align-items: center !important;   /* Zentriert den Text vertikal */
    justify-content: center !important; /* Zentriert den Text horizontal */
    text-align: center !important;    /* Richtet den Text mittig aus */
    font-weight: bold !important;     /* Macht die Schrift dauerhaft fett */
}

/* Gelb/Orange für reservierte Gärten */
.garten-status.reserviert {
    background-color: #f39c12 !important; 
    color: #1a1a1a !important; /* Dunkle Schrift für optimalen Kontrast */
}

/* Rot für verkaufte/vergebene Gärten */
.garten-status.verkauft {
    background-color: #c0392b !important; 
    color: #ffffff !important; /* Weiße Schrift bildet perfekten Kontrast auf Rot */
}

/* Leichte Transparenz für die gesamte Karte im passiven Zustand */
.garten-card.passiv {
    opacity: 0.65;
    transition: opacity 0.3s;
}

.garten-card.passiv:hover {
    opacity: 1;
}

/* ==================================================================
   OPTIMIERUNG FÜR DIE GARTEN-KARTEN (Handy & Desktop)
   ================================================================== */

/* Die gesamte Karte flexibel machen */
.garten-card {
    display: flex;
    flex-direction: column;   /* Auf dem Handy alles untereinander */
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

/* Bild-Container auf dem Handy kompakt halten */
.garten-bild-container {
    width: 100%;
    max-width: 100%;          
    position: relative;
    display: flex;
    flex-direction: column;   /* Stapelt Foto und Status-Balken */
    gap: 8px;                 /* Erzeugt einen sicheren Abstand zwischen ZWEI Status-Texten, falls beide im HTML stehen */
    padding: 10px;            /* Schafft einen schönen Rahmen um das Bild */
    box-sizing: border-box;
    background: #F7FAFC;      /* Leicht grauer Hintergrund für den Bildbereich */
}

/* Das Gartenfoto auf dem Handy begrenzen, damit es nicht riesig wird */
.garten-foto {
    width: 100%;
    max-height: 220px;        /* Verhindert, dass das Bild das Handy komplett ausfüllt */
    object-fit: cover;        /* Schneidet das Bild sauber zu, anstatt es zu quetschen */
    border-radius: 6px;
}

/* Der Status-Balken ("Sofort frei", "Reserviert" etc.) */
.garten-status {
    position: relative !important; /* Erzwingt, dass der Text UNTER dem Bild bleibt */
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    display: block;
    padding: 8px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    color: white;
    margin: 0;                /* Löscht alte Abstände */
}

/* Farben für die Stati */
.garten-status.frei {
    background-color: #2E5A44 !important; /* Waldgrün */
}
.garten-status.reserviert {
    background-color: #E67E22 !important; /* Orange */
}
.garten-status.verkauft,
.garten-status.vergeben {
    background-color: #D9534F !important; /* Rot */
}

/* Die Detail-Box (Text & Tabelle) bekommt auf dem Handy Luft */
.garten-details {
    padding: 15px;
    box-sizing: border-box;
}

/* ==================================================================
   DESKTOP-ANPASSUNGEN (Ab 768px Breite)
   Hier wird das Bild links und der Text rechts daneben angezeigt
   ================================================================== */
@media (min-width: 768px) {
    .garten-card {
        flex-direction: row;  /* Bild links, Text rechts */
        align-items: stretch;
    }

    .garten-bild-container {
        width: 35%;           /* Bildbereich nimmt ca. ein Drittel ein */
        max-width: 350px;
        padding: 0;           /* Auf dem Desktop randlos am Kartenrand */
        display: block;       /* Deaktiviert die Handy-Stapelung */
    }

    .garten-foto {
        width: 100%;
        height: 100%;         /* Nutzt die volle Höhe der Karte */
        max-height: none;
        border-radius: 6px 0 0 6px; /* Nur links abgerundet */
    }

    .garten-status {
        position: absolute !important; /* Schwebt wieder elegant im Bild */
        top: 15px !important;
        left: 15px !important;
        width: auto !important;
        display: inline-block;
        padding: 6px 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Falls ein zweiter Status aktiv ist, wird er auf dem Desktop darunter versetzt */
    .garten-status + .garten-status {
        top: 50px !important; 
    }

    .garten-details {
        width: 65%;           /* Textbereich nutzt den Rest */
        padding: 25px;
    }
}

/* ==========================================
   HOVER-EFFEKT FÜR DIE GARTEN-VORSCHAUBILDER
   ========================================== */

/* Der normale Zustand der kleinen Vorschaubilder */
.galerie-thumb {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    position: relative;
    z-index: 1; /* Standard-Ebene */
}

/* Der Zustand, wenn die Maus über dem Bild schwebt (Hover) */
.galerie-thumb:hover {
    transform: scale(1.9); /* Vergrößert das Bild  */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Fügt einen schicken Schatten hinzu */
    border-color: #2E5A44; /* Optional: Ändert den Rand zu Ihrem Vereins-Grün (falls ein Rand existiert) */
    z-index: 5; /* Schiebt das vergrößerte Bild über die Nachbarbilder, damit es nichts abschneidet */
}

.keine-gaerten-box {
    background-color: #f9f9f9;
    border-left: 5px solid #4CAF50; /* Ein grüner Akzentstreifen passend zum Garten-Thema */
    padding: 20px;
    margin: 20px 0;
    border-radius: 4px;
    line-height: 1.6;
}


/* Bewerbungsformular */
.formular-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.form-gruppe {
    margin-bottom: 15px;
}

.form-gruppe label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-gruppe input[type="text"],
.form-gruppe input[type="email"],
.form-gruppe input[type="tel"],
.form-gruppe input[type="number"],
.form-gruppe select,
.form-gruppe textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Verhindert, dass Felder über den Rand rutschen */
    font-family: inherit;
}

.datenschutz-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.datenschutz-check input {
    margin-top: 4px;
}

.datenschutz-check label {
    font-weight: normal;
    font-size: 0.9em;
}

.form-group input[type="number"],
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: inherit;
}

/* Abstand für alle Hauptüberschriften nach oben vergrößern */
#hauptteil h2 {
    margin-top: 40px !important;
}

/* ==========================================================================
   VORSTANDSBEREICH STYLING
   ========================================================================== */

/* Zentriert die Überschrift und den Einleitungstext */
.vorstand-einleitung {
    margin-top: 50px;
    margin-bottom: 40px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 25px;
    text-align: center;
}

/* Verhindert, dass der Einleitungstext auf großen Bildschirmen zu lang und unleserlich wird */
.vorstand-einleitung p {
    max-width: 700px;
    margin: 10px auto 0 auto;
    font-size: 1.05rem;
    line-height: 1.5;
}

/* Grundstruktur für das Raster */
.vorstand-grid {
    display: grid;
    gap: 30px;
    margin-bottom: 40px;
}

/* Die 3 Haupt-Vorsitzenden */
.haupt-vorstand {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Die 5 erweiterten Mitglieder */
.erweiterter-vorstand {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Die einzelnen Personen-Karten */
.vorstand-card {
    text-align: center;
    padding: 10px;
}

/* Große, runde Bilder mit leichtem Schwarz-Weiß-Effekt */
.vorstand-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    filter: grayscale(20%);
    transition: all 0.3s ease;
}

/* Farbiger Kreis-Platzhalter für Vorstände ohne Bild */
.vorstand-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 15px auto; /* Zentriert den Kreis wie das Bild */
    
    /* Hintergrundfarbe und Textfarbe */
    background-color: #a5d6a7; /* Ein dezentes, helles Garten-Grün */
    color: #1b5e20;            /* Dunkelgrüner Text für guten Kontrast */
    
    /* Text im Kreis perfekt zentrieren */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Text-Styling */
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    
    /* Gleiche flüssige Animation wie bei den Bildern */
    transition: all 0.3s ease;
}

/* Hover-Effekt: Kreis verhält sich genau wie die echten Bilder */
.vorstand-card:hover .vorstand-placeholder {
    transform: scale(1.05);
    background-color: #81c784; /* Wird beim Hovern leicht dunkler/kräftiger */
}


/* Wenn man mit der Maus über eine Karte fährt, wird das Bild farbig und zoomt leicht */
.vorstand-card:hover .vorstand-img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* Styling für die Namen */
.vorstand-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
}

/* Allgemeine Formatierung der Rollen */
.vorstand-rolle {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
    color: #2e7d32; /* Standardfarbe Hauptvorstand: Grün */
}

/* Farbliche Akzente für die verschiedenen Aufgabenbereiche */
.vorstand-rolle.fachberater { 
    color: #e65100; /* Orange */
}
.vorstand-rolle.oeffentlichkeit { 
    color: #006064; /* Petrol */
}
.vorstand-rolle.bau { 
    color: #5d4037; /* Braun */
}

/* ==========================================================================
   DROPDOWN-BUTTON FÜR AUFNAHMEANTRAG
   ========================================================================== */

/* Der Haupt-Container */
.doc-dropdown {
    position: relative;
    display: inline-block;
    width: 100%; /* Passt sich der Breite der anderen Buttons an */
    margin-bottom: 10px;
}


.doc-dropdown .dropdown-toggle {
    width: 100%;
    cursor: pointer;
    text-align: left;
}

/* Die versteckte Box mit den beiden Optionen */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 100%;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.15);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    z-index: 10;
    box-sizing: border-box;
}

/* Styling für die einzelnen Links innerhalb des Dropdowns */
.dropdown-content a {
    color: #333333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.95rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

/* Entfernt den Rahmen beim letzten Link */
.dropdown-content a:last-child {
    border-bottom: none;
}

/* Farbe ändert sich beim Drüberfahren (Hover) */
.dropdown-content a:hover {
    background-color: #f5f5f5;
    color: #2e7d32; /* Nutzt dein Garten-Grün */
}

/* Zeigt das Menü an, wenn man mit der Maus über den Button fährt */
.doc-dropdown:hover .dropdown-content {
    display: block;
}