/* Reset & Grundstile */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* Ermöglicht sanftes Scrollen zu Ankern */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Moderne, gut lesbare Schriftart */
    line-height: 1.6;
    color: #333;
    background-color: #fdfdfd; /* Leicht gebrochenes Weiß */
}

/* Optional: Verhindert Scrollen des Hintergrunds, wenn Menü offen ist */
/*
body.no-scroll {
    overflow: hidden;
}
*/

/* Container für zentrierten Inhalt */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.site-header {
    background-color: #FDECD1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky; /* Fixiert den Header beim Scrollen */
    top: 0;
    z-index: 1000;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* flex-wrap: wrap; wird durch Burger-Menü weniger relevant, kann aber bleiben */
    min-height: 50px; /* Mindesthöhe für Header, um Platz zu garantieren */
    position: relative; /* Wichtig für absolute Positionierung des Menüs */
}

.logo a {
    text-decoration: none;
    display: inline-block; /* Wichtig für Bild-Styling */
}

.logo-image {
    max-height: 60px; /* Maximale Höhe für das Logo festlegen */
    width: auto;      /* Breite automatisch anpassen */
    display: block;   /* Verhindert unerwünschte Abstände unter dem Bild */
    padding: 5px 0; /* Etwas vertikaler Abstand */
}

/* Desktop Navigation Styles */
.main-navigation {
    /* Nimmt auf Desktop den restlichen Platz */
}

.main-navigation ul#main-nav-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* Navi umbrechen lassen auf größeren Screens */
    justify-content: flex-end; /* Navi rechtsbündig auf Desktop */
    gap: 15px 20px; /* Vertikaler und horizontaler Abstand */
    padding: 5px 0;
    margin: 0; /* Wichtig, um Default-Margin zu entfernen */
}

.main-navigation a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 5px 0; /* Vertikales Padding für Klickfläche */
    display: block; /* Stellt sicher, dass Padding angewendet wird */
}

.main-navigation a:hover,
.main-navigation a:focus {
    color: #7aa060; /* Hellerer Grünton für Hover */
}

/* --- Burger Menü Styling --- */

/* Burger Button Grundstil (standardmäßig versteckt) */
.burger-icon {
    display: none; /* Auf großen Screens versteckt */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: auto; /* Schiebt den Button nach rechts, wenn .main-navigation keinen Platz mehr hat */
    z-index: 1100; /* Muss über dem Menü liegen */
    order: 3; /* Stellt sicher, dass es nach dem Logo und der Navi kommt (falls Navi umbricht) */
}

/* Die drei Linien des Burgers */
.burger-icon span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #4a6a34; /* Hauptfarbe */
    margin: 5px 0;
    border-radius: 1px; /* Leicht abgerundete Ecken */
    transition: all 0.3s ease-in-out;
}

/* Style für das geöffnete Menü (Kreuz-Icon) - Optional */
#burger-menu-button[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#burger-menu-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
#burger-menu-button[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* Hero Sektion (Banner) */
#hero {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/585309495.webp') no-repeat center center/cover;
    min-height: 50vh; /* Mindesthöhe statt fester Höhe */
    padding: 40px 20px; /* Padding für Inhalt */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

.hero-content h1 {
    font-size: 2.8em;
    margin-bottom: 0.5em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-content p {
    font-size: 1.2em;
    margin-bottom: 1.5em;
}

/* Buttons */
.button {
    display: inline-block;
    background-color: #4a6a34; /* Haupt-Grün */
    color: #fff !important; /* Wichtig zum Überschreiben */
    padding: 12px 25px;
    margin-top: 20px; /* Reduziert für konsistenteren Abstand */
    text-decoration: none !important; /* Wichtig zum Überschreiben */
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none; /* Sicherstellen, dass kein Rand vorhanden ist */
    cursor: pointer;
}

.button:hover,
.button:focus {
    background-color: #7aa060; /* Helleres Grün bei Hover */
    transform: translateY(-2px); /* Leichter Anhebe-Effekt */
    color: #fff !important;
    text-decoration: none !important;
}

/* Allgemeine Content Sektionen */
.content-section {
    padding: 60px 0;
    text-align: center; /* Zentriert Texte in Sektionen */
}

.content-section h2 {
    font-size: 2.5em;
    margin-bottom: 30px;
    color: #4a6a34;
}

.content-section p {
    max-width: 700px; /* Begrenzt die Breite von Absätzen für bessere Lesbarkeit */
    margin: 0 auto 20px auto;
    line-height: 1.7;
}

.content-section ul:not(.booking-options ul):not(#main-nav-list) { /* Spezifität erhöhen, um nicht die Buchungsliste oder Navi zu treffen */
    list-style: disc;
    text-align: left;
    max-width: 600px;
    margin: 20px auto;
    padding-left: 40px;
}

.content-section ul:not(.booking-options ul):not(#main-nav-list) li {
    margin-bottom: 10px;
}

.section-image {
    max-width: 80%; /* Bilder nicht ganz so breit machen auf Desktop */
    height: auto;
    border-radius: 8px;
    margin: 30px auto;
    display: block;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Sektionen mit alternativem Hintergrund */
.alt-bg {
    background-color: #f4f7f2; /* Sehr heller Grünton/Grauton */
}

/* Grid für Features (z.B. Zimmer, Umgebung) */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Responsive Spalten, etwas breiter */
    gap: 30px;
    margin-top: 40px;
    text-align: left; /* Text innerhalb der Items linksbündig */
}

.feature-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Sorgt dafür, dass Boxen im Grid gleich hoch sind */
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

.feature-item img {
    width: 100%;
    height: 220px; /* Höhe der Bilder angepasst */
    object-fit: cover;
    display: block;
}

.feature-item-content {
    padding: 20px;
    flex-grow: 1; /* Nimmt restlichen Platz ein */
    display: flex;
    flex-direction: column;
}

.feature-item h3 {
    font-size: 1.4em;
    color: #4a6a34;
    margin-bottom: 10px;
}

.feature-item p {
    margin: 0 0 15px 0;
    font-size: 0.95em;
    flex-grow: 1; /* Lässt den Text wachsen, um Platz zu füllen */
}

/* Kontakt Sektion Layout */
.kontakt-details {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    text-align: left;
    justify-content: space-between;
    margin-top: 30px;
}

.kontakt-details > div {
    flex-basis: calc(50% - 20px);
    min-width: 280px;
}

.kontakt-details h3 {
    font-size: 1.5em;
    color: #4a6a34;
    margin-bottom: 10px;
}

.kontakt-details p {
    margin-bottom: 15px;
    max-width: none;
}

.kontakt-details a {
    color: #4a6a34;
    text-decoration: none;
}
.kontakt-details a:hover {
    text-decoration: underline;
}

.map-placeholder {
    background-color: #e0e0e0;
    min-height: 350px; /* Höhe an iframe angepasst */
    border-radius: 8px;
    overflow: hidden;
}
.map-placeholder iframe {
    display: block; /* Verhindert Leerraum unter iframe */
}

/* Footer */
.site-footer {
    background-color: #333;
    color: #ccc;
    padding: 30px 0;
    text-align: center;
    margin-top: 40px;
}

.site-footer p {
    margin-bottom: 10px;
}

.site-footer a {
    color: #eee;
    text-decoration: none;
    margin: 0 10px;
}

.site-footer a:hover,
.site-footer a:focus {
    text-decoration: underline;
}

/* --- Styling für Buchungsoptionen --- */
.booking-options {
    margin-top: 60px;
    padding: 30px 0;
    text-align: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.booking-options h3 {
    font-size: 1.8em;
    color: #4a6a34;
    margin-bottom: 40px;
}

.booking-options ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px; /* Etwas mehr Abstand */
}

.booking-options li {
    flex: 1 1 280px;
    max-width: 350px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px 20px; /* Mehr vertikales Padding */
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 300px; /* Angepasste Mindesthöhe für Boxen */
    justify-content: space-between; /* Verteilt Icon, div und note */
}

.booking-options li:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.booking-options .icon {
    font-size: 2.8em; /* Leicht vergrößert */
    color: #4a6a34;
    margin-bottom: 20px; /* Mehr Abstand nach Icon */
    margin-top: 0;
    flex-shrink: 0; /* Verhindert Schrumpfen des Icons */
}

/* Container für Titel, Button, Notiz */
.booking-options li div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-grow: 1; /* Lässt diesen Bereich wachsen */
    justify-content: center; /* Zentriert Inhalt vertikal im verbleibenden Raum */
}

.booking-options strong {
    display: block;
    font-size: 1.2em;
    color: #333;
    margin-bottom: 15px; /* Abstand zum Button */
    flex-shrink: 0;
    text-wrap: nowrap
}

/* KORRIGIERTER Button-Stil für Buchungsoptionen */
.booking-options .booking-button {
    background-color: #0071c2; /* Einheitliches Blau */
    color: #fff !important;
    padding: 10px 25px; /* Angepasstes Padding */
    border-radius: 5px;
    text-decoration: none !important;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    text-align: center;
    margin-top: 0; /* Entfernt, da div-Flexbox steuert */
    margin-bottom: 15px; /* Abstand zur Notiz */
    min-width: 200px; /* Behält Mindestbreite */
    max-width: 90%; /* Verhindert Überbreite */
    flex-shrink: 0; /* Verhindert Schrumpfen */

    /* NEU: Feste Mindesthöhe und Flexbox zum Zentrieren */
    min-height: 70px; /* Genug Platz für 2 Zeilen + Padding */
    display: flex; /* Aktiviert Flexbox für Button-Inhalt */
    align-items: center; /* Zentriert Text vertikal */
    justify-content: center; /* Zentriert Text horizontal */
    line-height: 1.3; /* Ggf. Zeilenhöhe anpassen */
}

.booking-options .booking-button:hover,
.booking-options .booking-button:focus {
    background-color: #005a9c;
    transform: translateY(-2px);
    text-decoration: none !important;
    color: #fff !important;
    outline: none;
}

.booking-note {
    display: block;
    font-size: 0.9em;
    color: #777;
    margin-top: auto; /* Schiebt Notiz nach unten, wenn Platz ist */
    line-height: 1.4;
    padding: 0 10px; /* Etwas seitlicher Einzug */
    flex-shrink: 0;
}

/* --- Responsive Anpassungen --- */

@media (max-width: 992px) {
    .feature-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Kleinere Basis für Tablets */
    }
    /* Eventuell muss der Breakpoint für das Burger-Menü hier schon starten, falls die Navi vorher umbricht */
    /* Bsp: @media (max-width: 992px) { .burger-icon { display: block; } ... } */
}

/* --- BREAKPOINT FÜR BURGER MENÜ (z.B. 768px oder wenn die Navi umbricht) --- */
@media (max-width: 768px) {

    /* Header Container anpassen */
    .site-header .container {
        /* Behält flex, aber erzwingt Row und Space-Between */
        flex-wrap: nowrap; /* Verhindert Umbruch von Logo und Burger */
        justify-content: space-between;
        align-items: center;
        /* padding-bottom: 0; nicht mehr nötig */
    }

    .logo-image {
        max-height: 50px;
        margin-bottom: 0; /* Kein unterer Abstand mehr */
    }

    /* Burger Button sichtbar machen */
    .burger-icon {
        display: block;
    }

    /* Hauptnavigation Bereich (Wrapper) */
    .main-navigation {
        /* Nimmt keinen Platz im normalen Flow ein, da Menü absolut positioniert wird */
        order: 3; /* Kommt nach Logo und Burger im Quellcode, aber CSS steuert Position */
        width: 100%; /* Wichtig für absolute Positionierung der UL */
        position: static; /* Der Wrapper selbst ist statisch */
    }

    /* Navigationsliste für Mobile */
    .main-navigation ul#main-nav-list {
        display: none; /* Standardmäßig versteckt */
        position: absolute;
        top: 100%; /* Direkt unter dem Header */
        left: 0;
        right: 0; /* Nimmt volle Breite ein */
        width: 100%;
        background-color: #FDECD1; /* Hintergrundfarbe wie Header */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        flex-direction: column;
        padding: 10px 0; /* Innenabstand oben/unten */
        margin: 0;
        z-index: 1050;
        border-top: 1px solid #ddd; /* Trennlinie */
        gap: 0; /* Kein Gap mehr zwischen den Elementen */
        align-items: stretch; /* Elemente strecken sich auf volle Breite */
    }

    /* Sichtbare Navigationsliste (wenn Burger geklickt) */
    .main-navigation ul#main-nav-list.nav-active {
        display: flex; /* Macht die Liste sichtbar und als Flex-Spalte */
    }

    /* Listenelemente im mobilen Menü */
    .main-navigation ul#main-nav-list li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #e0dbc
    ; /* Trennlinien zwischen Links */
        margin: 0; /* Kein Außenabstand */
    }
    .main-navigation ul#main-nav-list li:last-child {
        border-bottom: none;
    }

    /* Links im mobilen Menü */
    .main-navigation ul#main-nav-list a {
        display: block; /* Macht den gesamten Bereich klickbar */
        padding: 15px 20px;
        color: #4a6a34; /* Haupt-Grün */
        font-weight: bold;
        transition: background-color 0.2s ease;
        width: 100%; /* Stellt sicher, dass der Link die volle Breite einnimmt */
    }

    .main-navigation ul#main-nav-list a:hover,
    .main-navigation ul#main-nav-list a:focus {
        background-color: #e8d9bf; /* Leichter Hover-Effekt */
        color: #3a542a; /* Dunkleres Grün */
    }

    /* Hero Sektion Anpassungen */
    #hero {
        min-height: 40vh;
    }
    .hero-content h1 {
        font-size: 2em;
    }
    .hero-content p {
        font-size: 1.1em;
    }

    /* Allgemeine Content Sektionen Anpassungen */
    .content-section h2 {
        font-size: 2em;
    }
    .section-image {
        max-width: 95%;
    }

    /* Kontakt Anpassungen */
    .kontakt-details {
        flex-direction: column;
        gap: 30px; /* Abstand reduzieren */
    }
    .kontakt-details > div {
        flex-basis: 100%;
    }

    /* Buchungsoptionen Responsive */
    .booking-options ul {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
    .booking-options li {
        flex-basis: auto;
        width: 90%;
        max-width: 400px;
        min-height: auto; /* Mindesthöhe aufheben */
        padding: 25px 15px;
    }
    .booking-options h3 {
        font-size: 1.6em;
        margin-bottom: 30px;
    }
    .booking-options .icon {
        font-size: 2.5em; /* Icons können groß bleiben */
        margin-bottom: 15px;
    }
    .booking-options .booking-button {
        min-width: 180px;
        padding: 10px 20px;
        min-height: 60px; /* Höhe mobil ggf. anpassen */
    }

    /* Generischer Button */
    .button {
        padding: 10px 20px;
        font-size: 0.95em;
    }
}

/* --- KLEINERE BILDSCHIRME (Handys) --- */
@media (max-width: 480px) {
    .logo-image {
        max-height: 45px;
    }

    /* Mobile Nav Links ggf. anpassen */
    .main-navigation ul#main-nav-list a {
        font-size: 0.95em; /* Etwas kleiner */
        padding: 12px 15px; /* Weniger Padding */
    }

    .hero-content h1 {
        font-size: 1.8em;
    }
    .hero-content p {
        font-size: 1em;
    }

    /* Generischer Button */
    .button {
        padding: 10px 18px;
        font-size: 0.9em;
    }

    .content-section {
        padding: 40px 0;
    }
    .content-section h2 {
        font-size: 1.8em;
    }

    /* Grid wird einspaltig */
    .feature-grid {
        grid-template-columns: 1fr;
    }
    .feature-item img {
        height: 200px;
    }

    /* Buchungsoptionen Responsive */
    .booking-options h3 {
        font-size: 1.5em;
    }
    .booking-options li {
        width: 95%;
        padding: 20px 15px;
    }
    .booking-options strong {
        font-size: 1.1em;
    }
    .booking-options .booking-button {
        width: 90%; /* Button fast volle Breite */
        min-width: unset;
        padding: 12px 15px;
        min-height: auto; /* Höhe automatisch anpassen lassen */
    }
    .booking-note {
        font-size: 0.85em;
    }
}