/* stylesheet.css */

/* --- CSS Variables --- */
:root {
    --anthrazit: #36454F;
    /* Charcoal */
    --graphit: #4A5A6A;
    /* Dark Slate Gray - Contrast > 7:1 for BITV AAA */
    --weiss: #FFFFFF;
    /* White */
    --backstein: #B22222;
    /* Brick Red */
    --rot: #FF0000;
    /* Red */
    --gruen: #4CAF50;
    /* Green */
    --blau: #007bff;
    /* Bootstrap Primary Blue */
    --seidengrau: #F5F5F5;
    /* White Smoke */
    --seidengrau-orig: #D3D3D3;
    /* Light Grey */
    --stammeiche: #706060;
    /* Added from old style.css */

    /* Heights for fixed elements - Adjust these values based on actual rendered height */
    --header-height-val: 9rem;
    /* Beispiel: Höhe des Headers, bitte anpassen! */
    --nav-height-desktop-val: 4rem;
    /* Geschätzte Höhe der Desktop-Navigation */
    --nav-height-mobile-val: 3.5rem;
    /* Geschätzte Höhe der Mobile-Navigation */
    --urgent-message-height-val: 2rem;
    /* Geschätzte Höhe der dringenden Nachricht */
    /* Fügen Sie hier weitere Variablen aus Ihrem Designsystem hinzu */
}

/* --- Accessibility Focus Styles --- */
*:focus-visible {
    outline: 3px solid var(--backstein);
    outline-offset: 2px;
}

/* --- General Body Styling --- */
/* --- General Body Styling --- */
body {
    font-family: 'Open Sans', sans-serif;
    /* Beispielschriftart, passen Sie diese an */
    margin: 0;
    /* Entfernt den Standard-Body-Rand */
    background-color: var(--seidengrau);
    /* Hintergrundfarbe aus Variable */
    color: var(--graphit);
    /* Standardtextfarbe aus Variable */
    line-height: 1.6;
    /* Verbessert die Lesbarkeit */
    /* padding-top must account for Header + Nav + Urgent Message because all are fixed */
    padding-top: calc(var(--header-height-val) + var(--nav-height-desktop-val) + var(--urgent-message-height-val));
}

/* --- Header (Fixed at Top) --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height-val);
    display: flex;
    align-items: center;
    color: var(--seidengrau);
    padding: 2rem;
    background-color: var(--anthrazit);
    /* Dark background for contrast */
    z-index: 1000;
    /* Stack above content */
    box-sizing: border-box;
}

header .logo {
    /* Styles for the logo container */
    /* background-color: var(--seidengrau); */
    /* Example background, remove if not needed */
    /* padding: 0.5rem; */
    /* Example Padding */
    margin-right: 1rem;
    /* Space between logo and text */
}

header .logo img {
    height: 80px;
    /* Example height, adjust */
    max-width: 150px;
    /* Max width for the image */
    height: auto;
    /* Maintain aspect ratio */
    /* Filter to make logo white (works best on solid color logos) */
    filter: brightness(0) invert(1);
}

.header-text {
    text-align: right;
    flex-grow: 1;
    max-width: 70%;
    /* Limit width of text container */
}

/* --- Skip Link --- */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--backstein);
    color: white;
    padding: 8px;
    z-index: 2000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

header .site-title,
header .site-subtitle {
    margin: 0;
    hyphens: auto;
    /* Allow hyphenation */
}

header .site-title {
    font-weight: bold;
    font-family: 'Playfair Display', serif;
    /* More distinctive font */
    font-size: 3rem;
    /* Larger font size */
    color: var(--seidengrau-orig);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

header .site-subtitle {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--seidengrau-orig);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* --- Navigation (Fixed below Header) --- */
nav {
    position: fixed;
    top: var(--header-height-val);
    /* Direkt am oberen Rand fixiert, da Header nicht mehr fixed ist */
    /* Starts directly below the header */
    left: 0;
    width: 100%;
    background-color: var(--anthrazit);
    text-align: center;
    padding: 1rem 0;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* --- Mobile Sticky Button --- */
.mobile-sticky-btn {
    display: none;
    /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--blau);
    color: var(--weiss);
    text-align: center;
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    z-index: 9999;
    /* High Z-index to ensure visibility */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.mobile-sticky-btn:hover {
    background-color: var(--anthrazit);
    color: var(--weiss);
}

.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .mobile-sticky-btn {
        display: block !important;
        /* Force show on mobile */
    }

    /* Add padding to body to prevent button from covering content */
    body {
        padding-bottom: 4rem;
    }

    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }

    /* Ensure Header Text fits */
    .header-text {
        text-align: right;
    }

    .site-title {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    /* Ensure sticky button is absolutely visible */
    .mobile-sticky-btn {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0;
        width: 100%;
        z-index: 2147483647;
        /* Max z-index */
    }
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

nav li {
    margin: 0 1.5rem;
}

nav a {
    color: var(--weiss);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    font-size: 1.2rem;
}

nav a:hover {
    background-color: var(--stammeiche);
}

nav a.active {
    background-color: var(--backstein);
    color: var(--weiss);
    border-bottom: 2px solid var(--weiss);
}

/* Font Awesome Icon in Personalbereich Link */
nav a .fas {
    margin-right: 0.5em;
}

/* Personalbereich Link Styles */
nav .personal-bereich-link {
    font-size: 0.9em;
    color: var(--weiss);
    text-decoration: none;
    border: 1px solid var(--weiss);
    padding: 8px 12px;
    border-radius: 3px;
    margin-left: auto;
    /* Pushes the link to the right */
}

.personal-bereich-link i {
    font-size: 1.2em;
}

nav #language-select {
    margin-left: 1rem;
    /* Space between the personal area link and the language selector */
    font-size: 1em;
    /* Font size for the language selector */
    color: var(--anthrazit);
    border: 1px solid var(--weiss);

    padding: 8px 12px;
    border-radius: 3px;
    cursor: pointer;
}

/* --- Mobile Menu Toggle Button --- */
.mobile-menu-toggle {
    display: none;
    /* Standardmäßig auf Desktop ausgeblendet */
    background: none;
    border: none;
    color: var(--weiss);
    cursor: pointer;
    padding: 0.5rem;
    /* Tappable area */
    z-index: 1000;
    /* Stellt sicher, dass der Button über dem Dropdown liegt, falls das ul später gestyled wird */
}

.mobile-menu-toggle .hamburger-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--weiss);
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* Animation für das "X" Icon, wenn Menü offen ist (JS fügt .active Klasse zum Button hinzu) */
.mobile-menu-toggle.active .hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-bar:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- Urgent Message (Fixed below Navigation) --- */
#urgent-message {
    position: fixed;
    top: calc(var(--header-height-val) + var(--nav-height-desktop-val));
    /* Direkt unter der fixierten Navigation */
    /* Starts directly below the desktop navigation */
    left: 0;
    width: 100%;
    background-color: #fdd;
    border: 1px solid #faa;
    color: #a00;
    padding: 0.5rem 1rem;
    height: var(--urgent-message-height-val);
    text-align: center;
    z-index: 998;
    box-sizing: border-box;
    margin-bottom: 0;
}

/* --- General Layout & Structure --- */

/* Container for centered content */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Padding for sections */
.section-padding {
    padding: 4rem 0;
}

.section-padding-light {
    padding: 4rem 0;
    background-color: #f9f9f9;
}

/* Main content area */
main {
    padding: 2rem;
    max-width: 1200px;
    /* Angepasst, um dem .container mehr Raum zu geben */
    margin: 0 auto;
}

h1,
h2,
h3 {
    color: var(--stammeiche);
}

p {
    line-height: 1.6;
    margin-bottom: 1em;
    color: var(--anthrazit);
}

/* Text-Zentrierung */
.text-center {
    text-align: center;
}


/* --- Startseite (index2.php) Styles --- */

/* Hero Section */
.hero {
    position: relative;
    text-align: center;
    color: white;
    overflow: hidden;
    /* Ensure hero takes up space but image covers it */
}

.hero-image-container {
    width: 100%;
    height: 60vh;
    /* Default height for desktop */
    min-height: 400px;
    overflow: hidden;
    position: relative;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* This makes the image cover the container without distortion */
    object-position: center;
    display: block;
    border-radius: 8px;
    opacity: 0.8;
    /* Example opacity */
}

.hero-content {
    flex: 1 0 300px;
    /* Minimum width for text content */
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        /* Stack image and text */
        padding: 1rem;
        min-height: auto;
    }

    .hero-image-container {
        max-width: 100%;
        /* Full width on mobile */
        margin-right: 0;
        margin-bottom: 1rem;
        height: auto;
    }

    .hero-image {
        max-height: 40vh;
        /* Limit height on mobile */
    }

    .hero-content {
        flex: auto;
        width: 100%;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 2rem;
    }
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    text-align: center;
}

.feature-item i {
    color: var(--backstein);
    margin-bottom: 1rem;
}

.feature-item h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* --- Galerie (fotos.php) Styles --- */

/* Allgemeine H1 Styles für Hauptseiten (außer Hero) */
.ausstattung-section h1,
.gallery-section h1,
.location-page-section h1,
.contact-page-section h1,
.reservation-page-section h1,
.guest-start-section h1,
.guest-overview-section h1,
.pin-input-section h1,
.feedback-page-section h1,
.impressum-page-section h1,
.faq-page-section h1 {
    color: var(--stammeiche);
    margin-bottom: 1.5rem;
    text-align: center;
    border-bottom: 2px solid var(--backstein);
    padding-bottom: 0.5rem;
}

/* Galerie Grid */
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Responsive columns */
    gap: 2rem;
    /* Consistent gap */
    padding: 1rem 0;
}

/* Individual gallery item (figure) */
.bild {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--weiss);
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

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

.bild a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.bild img {
    display: block;
    width: 100%;
    height: 180px;
    /* Fixed height for thumbnails */
    object-fit: cover;
    border-bottom: 1px solid #eee;
}

.bild figcaption {
    padding: 0.75rem 1rem;
    font-size: 0.9em;
    text-align: center;
    background-color: #f9f9f9;
    color: var(--anthrazit);
}

/* --- Modal (for Image Enlargement) Styles --- */
.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80vh;
}

.modal-caption {
    margin: 15px auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    font-size: 1.2em;
}

.close-modal-btn,
.prev-modal-btn,
.next-modal-btn {
    position: absolute;
    color: white;
    font-size: 35px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    user-select: none;
}

.close-modal-btn {
    top: 15px;
    right: 35px;
}

.prev-modal-btn,
.next-modal-btn {
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
}

.prev-modal-btn {
    left: 10px;
}

.next-modal-btn {
    right: 10px;
}

.close-modal-btn:hover,
.close-modal-btn:focus,
.prev-modal-btn:hover,
.prev-modal-btn:focus,
.next-modal-btn:hover,
.next-modal-btn:focus {
    color: #bbb;
    text-decoration: none;
}

.modal-content,
.modal-caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

body.modal-open {
    overflow: hidden;
}


/* --- Ausstattung (ausstattung.php) Styles --- */

/* Loading message */
#loading-ausstattung {
    text-align: center;
    font-style: italic;
    color: var(--graphit);
    padding: 2rem 0;
}

/* Main container for equipment sections */
#ausstattung-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Individual equipment section (e.g., Küche, Bad) */
#ausstattung-container section {
    border-radius: 8px;
    padding: 1.5rem;
    background-color: var(--weiss);
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#ausstattung-container section:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Headings for equipment sections */
#ausstattung-container h2 {
    color: var(--stammeiche);
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.5em;
    border-bottom: 2px solid var(--backstein);
    padding-bottom: 0.5rem;
}

/* Icon before heading (if added via JS) */
#ausstattung-container h2 i {
    margin-right: 0.75em;
    color: var(--backstein);
}

/* List of equipment items */
#ausstattung-container ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 0;
}

#ausstattung-container li {
    margin-bottom: 0.8rem;
    line-height: 1.5;
    color: var(--anthrazit);
}

/* Highlighted equipment items */
#ausstattung-container li.highlight {
    font-weight: bold;
    color: var(--backstein);
}


/* --- Standort (standort.php) Styles --- */

/* Individual content sections on the location page */
.location-content-section {
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background-color: var(--weiss);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.location-content-section h2 {
    color: var(--stammeiche);
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.4em;
}

.location-content-section p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

.location-content-section ul {
    color: var(--anthrazit);
    list-style: disc;
    padding-left: 20px;
}

.location-content-section li {
    margin-bottom: 0.5rem;
}


/* --- Kontakt (kontakt.php) Styles --- */

/* Adjustment for the .contact-info block to match .location-content-section blocks */
.contact-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two columns for desktop */
    gap: 2rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background-color: var(--weiss);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.person h2 {
    color: var(--stammeiche);
    margin-bottom: 0.5rem;
    font-size: 1.3em;
}

.person dl {
    color: var(--anthrazit);
    list-style: none;
    padding: 0;
    margin: 0;
}

.person dt {
    color: var(--anthrazit);
    font-weight: bold;
    margin-top: 0.8rem;
    /* Space above the term */
}

.person dd {
    color: var(--anthrazit);
    margin-left: 0;
    /* Remove default dd margin */
    margin-bottom: 0.5rem;
    /* Space below the description */
    padding-left: 1.5em;
    /* Indent description */
    position: relative;
    /* Needed for absolute positioning of icons if desired */
}

.person dd a {
    color: var(--anthrazit);
    text-decoration: none;
    transition: color 0.3s ease;
}

.person dd a:hover {
    color: var(--backstein);
}

.person dd i {
    margin-right: 0.5em;
    /* Space between icon and text */
    /* Optional: Position icon absolutely */
    /*
    position: absolute;
    left: 0;
    top: 0.2em;
    */
}


/* Container for general contact options (email, phone, reservation link) */
.contact-options {
    text-align: center;
    margin-bottom: 2.5rem;
    font-size: 1.1em;
    line-height: 1.8;
}

.contact-options a {
    color: var(--backstein);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.contact-options a:hover {
    color: var(--stammeiche);
    text-decoration: underline;
}

.contact-options i {
    margin-right: 0.5em;
}

/* Container for the callback form (if activated) */
.callback-form-section {
    max-width: 500px;
    margin: 0 auto 2.5rem auto;
    padding: 1.5rem;
    background-color: var(--weiss);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.callback-form-section h2 {
    color: var(--stammeiche);
    margin-top: 0;
    margin-bottom: 1.5rem;
    text-align: center;
}


/* --- Form Styles (General, used on Kontakt and Reservierung) --- */
fieldset.form-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Erzeugt zwei gleich breite Spalten für die direkten Kind-Elemente */
    gap: 5px;
    margin-bottom: 1rem;
    align-items: start;
}

fieldset.form-group label {
    text-align: left;
    display: block;
    margin-bottom: 0.5rem;
}

fieldset.form-group input[type="text"],
fieldset.form-group input[type="email"],
fieldset.form-group input[type="date"],
fieldset.form-group input[type="tel"],
fieldset.form-group select,
fieldset.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    /* Include padding and border in element's total width */
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

fieldset.form-group input[type="number"][readonly] {
    background-color: var(--seidengrau);
    border: none;
    color: var(--graphit);
    font-weight: normal;
    text-align: center;
    width: 50px;
    /* Example fixed width */
}

fieldset.form-group input[type="number"][readonly]:hover {
    cursor: default;
}

/* Style for required fields label */
fieldset.form-group label:has(+ input:required):after,
fieldset.form-group label:has(+ select:required):after,
fieldset.form-group label:has(+ textarea:required):after {
    content: ' *';
    vertical-align: super;
    font-size: small;
    color: var(--rot);
}

fieldset.form-group .hint {
    font-size: 0.9rem;
    color: var(--anthrazit);
    grid-column: 1 / -1;
    /* Hint spans all columns */
}

fieldset.form-group label[for="nachricht"] {
    grid-column: 1 / -1;
    /* Textarea label spans all columns */
    text-align: left;
}

fieldset.form-group textarea {
    grid-column: 1 / -1;
    /* Textarea spans all columns */
    min-height: 100px;
    /* Minimum height for textarea */
    resize: vertical;
    /* Allow vertical resizing */
}

fieldset.form-group p {
    width: 100%;
    grid-column: 1 / -1;
    color: var(--rot);
}


input:required:focus,
select:required:focus,
textarea:required:focus {
    outline: none;
    box-shadow: 0 0 5px var(--rot);
}

/* Styles for price display (from Reservierung) */
.preis-input-container {
    /* This might need review based on the final Reservierung form structure */
    display: inline-block;
    vertical-align: center;
}

.preis-input-container input[type="text"] {
    background-color: var(--seidengrau);
    border: none;
    color: var(--graphit);
    font-weight: normal;
    text-align: right;
    width: 100%;
    height: 100%;
}

.preis-input-container label {
    font-weight: normal;
    text-align: right;
    font-size: small;
}

.preis-input-container input[type="text"]:hover {
    cursor: default;
}

/* --- Buttons (General) --- */
button[type="submit"],
.button-primary,
.button-secondary,
.anfragen-button {
    display: inline-block;
    padding: 0.8em 1.5em;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    border: none;
    cursor: pointer;
}

.button-primary,
.anfragen-button {
    background-color: var(--backstein);
    color: var(--weiss);
}

.button-secondary {
    background-color: var(--graphit);
    color: var(--weiss);
}

button[type="submit"]:hover,
.button-primary:hover,
.button-secondary:hover,
.anfragen-button:hover {
    background-color: color-mix(in srgb, var(--backstein) 85%, black);
    /* Default hover effect */
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.button-secondary:hover {
    background-color: color-mix(in srgb, var(--graphit) 85%, black);
}

.button-large {
    font-size: 1.2em;
    padding: 1em 2em;
}


/* --- Footer --- */
footer {
    background-color: var(--anthrazit);
    color: var(--weiss);
    padding: 1rem;
    text-align: center;
    margin-top: 4rem;
}

footer a {
    color: var(--weiss);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}


/* --- Responsive Adjustments --- */

/* Mobile Header */
@media (max-width: 768px) {
    header {
        position: static;
        /* Header ist nicht mehr fixiert */
        top: auto;
        /* Reset top */
        left: auto;
        /* Reset left */
        width: auto;
        /* Breite passt sich dem Inhalt/Container an */
        z-index: auto;
        /* Reset z-index */
        padding: 0.5rem;
    }

    header .logo img {
        max-width: 100px;
    }

    .header-text h1 {
        font-size: 1.8rem;
        word-wrap: break-word;
    }

    /* Mobile Navigation */
    nav {
        display: flex;
        justify-content: space-between;
        /* Positioniert den Toggle-Button rechts */
        align-items: center;
        padding: 0.5rem 1rem;
        /* Angepasstes Padding für die mobile Navigationsleiste */
        position: relative;
        /* Wichtig für die absolute Positionierung des Dropdown-Menüs */
        top: auto;
        /* Navigation ist nicht mehr fixiert */
        left: auto;
        /* Reset left */
        width: auto;
        /* Breite passt sich an */
        z-index: auto;
        /* Reset z-index */
        box-shadow: none;
        /* Schatten von der Navigationsleiste entfernen */
    }

    .mobile-menu-toggle {
        display: block;
        /* Hamburger-Button auf Mobile anzeigen */
        font-size: 1.8rem;
        /* Größe des Hamburger-Icons anpassen */
    }

    nav ul#main-nav-ul {
        /* Spezifischer Selektor für die Hauptnavigation */
        display: none;
        /* Standardmäßig ausgeblendet */
        position: absolute;
        top: 100%;
        /* Direkt unter der Navigationsleiste positionieren */
        left: 0;
        width: 100%;
        background-color: var(--anthrazit);
        /* Hintergrund wie die Navigationsleiste */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        /* Schatten für den Dropdown-Effekt */
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        z-index: 995;
        /* Unter der Navigationsleiste (999), aber über der Urgent Message (998) */
        flex-direction: column;
        align-items: stretch;
    }

    nav ul#main-nav-ul.is-open {
        /* Klasse, die per JS zum Anzeigen gesetzt wird */
        display: flex;
    }

    nav ul#main-nav-ul li {
        margin: 0.5rem 0;
        width: 100%;
        /* Listenelemente nehmen volle Breite ein */
    }

    nav ul#main-nav-ul a {
        padding: 0.8rem 1.5rem;
        /* Mehr Padding für bessere Klickbarkeit */
        font-size: 1rem;
        text-align: left;
        /* Text linksbündig für Dropdown-Items */
        display: block;
        /* Link nimmt volle Breite des li ein */
        border-bottom: 1px solid var(--graphit);
        /* Trennlinie zwischen den Links */
        width: 100%;
        box-sizing: border-box;
    }

    nav ul#main-nav-ul li:last-child a {
        border-bottom: none;
        /* Keine Trennlinie für das letzte Element */
    }

    /* Reset für den "Persönlichen Bereich"-Link im mobilen Menü */
    nav ul#main-nav-ul .personal-bereich-link {
        margin-left: 0;
        /* Entfernt den automatischen linken Rand */
        /* Optional: Weitere Anpassungen, um ihn wie andere Menüpunkte aussehen zu lassen */
        /* border: none; */
        /* background-color: transparent; */
    }

    /* Mobile Body Padding */
    body {
        padding-top: 0;
    }

    /* Mobile Urgent Message */
    #urgent-message {
        position: static;
        /* Dringende Nachricht ist nicht mehr fixiert */
        top: auto;
        /* Reset top */
        left: auto;
        /* Reset left */
        width: auto;
        /* Breite passt sich an */
        z-index: auto;
        /* Reset z-index */
        margin-top: 1rem;
    }

    /* Mobile Hero */
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1rem;
    }

    .hero-image-container {
        padding-right: 0;
        margin-bottom: 2rem;
    }

    .hero-image {
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    /* Mobile Contact Info Grid */
    .contact-info {
        grid-template-columns: 1fr;
        /* Single column on smaller screens */
    }

    /* Mobile Form Layout (if needed) */
    fieldset.form-group {
        grid-template-columns: 1fr;
        /* Stack labels and inputs */
    }

    fieldset.form-group label {
        margin-bottom: 0.2rem;
    }
}


/* --- Other Styles (from old style.css, kept for other pages) --- */

/* Disclaimer */
.disclaimer {
    font-size: 0.9rem;
    color: var(--graphit);
    margin: 1rem;
}

/* Honeypot (for forms) */
.honeypot {
    display: none;
}

/* Feedback Form (if used elsewhere) */
.feedback-form {
    max-width: 400px;
    margin: 0 auto;
}

/* Styling für die Sterne-Bewertungen */
.rating {
    display: flex;
    /* Ermöglicht einfache Ausrichtung und Abstand */
    flex-direction: row-reverse;
    /* Kehrt die Reihenfolge der Sterne um für den Hover-Effekt */
    justify-content: flex-start;
    /* Richtet Sterne linksbündig aus */
    gap: 2px;
    /* Kleiner Abstand zwischen den Sternen */
    margin-bottom: 10px;
    /* Abstand zum Kommentarfeld */
}

.rating input[type="radio"] {
    display: none;
    /* Versteckt die Radio-Buttons */
}

.rating label {
    font-size: 2em;
    /* Größe der Sterne anpassen - WICHTIG! */
    color: #ccc;
    /* Farbe für nicht ausgewählte Sterne (hellgrau) - WICHTIG! */
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    /* Sanfter Farbübergang */
    padding: 0 0.1em;
    /* Etwas Abstand, falls die Sterne zu nah aneinander sind */
}

/* Dies ist der entscheidende Teil für die Sichtbarkeit der Sterne */
.rating label:before {
    content: '\2606';
    /* Leerer Stern (☆) - WICHTIG! */
    display: inline-block;
    /* Stellt sicher, dass das Pseudoelement Platz einnimmt */
}

/* Visuelles Feedback beim Hovern und Auswählen */
.rating label:hover:before,
.rating label:hover~label:before,
/* Sterne links vom gehoverten Stern */
.rating input[type="radio"]:checked~label:before {
    content: '\2605';
    /* Gefüllter Stern (★) - WICHTIG! */
    color: #ffc107;
    /* Goldene Farbe für ausgewählte/gehoverte Sterne */
}

/* Zusätzliche Stile, die du bereits haben solltest */
.rating-prompt {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 5px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.comment textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-height: 60px;
    box-sizing: border-box;
}

.comment {
    margin-bottom: 20px;
}

.comment textarea {
    width: 100%;
    height: 100px;
    resize: none;
}

.input-2 {
    display: grid;
    grid-template-columns: minmax(20%, 40%) auto;
    word-wrap: break-word;
}

/* Price Hint Box (from Reservierung) */
.preis-hinweis-box {
    background-color: var(--seidengrau);
    padding: 20px;
    border-radius: 5px;
    margin-top: 20px;
    text-align: center;
}

/* Public Dates Table (if used elsewhere) */
#public-dates {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

#public-dates th,
#public-dates td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

#public-dates th {
    background-color: #f2f2f2;
}

#public-dates tbody tr:hover {
    background-color: #f5f5f5;
}

#day {
    padding-left: 5px;
    font-size: small;
}

/* Accordion (if used elsewhere) */
.akkordeon h3 {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.akkordeon h3:hover {
    background-color: var(--backstein);
    color: var(--weiss);
}

.akkordeon-content {
    display: none;
    padding: 10px;
    border: 1px solid var(--anthrazit);
    background-color: var(--seidengrau);
}

.akkordeon-content.active {
    display: block;
}

.akkordeon h3 .arrow {
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.akkordeon-content.hidden+h3 .arrow {
    transform: rotate(0deg);
}

.akkordeon-content.active+h3 .arrow {
    transform: rotate(90deg);
}

/* Custom Select (if used elsewhere) */
.custom-select {
    position: relative;
    display: inline-block;
    width: 150px;
}

.custom-select select {
    appearance: none;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    width: 100%;
}

.custom-select i {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
}

/* Cookie Banner */
#cookie-banner {
    background-color: #444;
    color: #fff !important;
    padding: 15px;
    text-align: center;
    font-size: 14px;
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 15px;
    text-align: center;
    z-index: 1000;
    /* Position and z-index are set inline in header.php */
}

#cookie-banner a {
    color: var(--weiss);
    text-decoration: underline;
}

#cookie-banner p {
    color: var(--weiss);
}

#cookie-banner a:visited {
    color: var(--weiss);
    text-decoration: underline;
}

#accept-cookies {
    background-color: #00f;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-left: 15px;
}

.hidden {
    display: none;
}

/* --- Reservierung (reservierung.php) Styles --- */

/* Die H1 wird bereits durch die allgemeine Regel .reservation-page-section h1 gestylt */


/* Disclaimer-Hinweis auf der Reservierungsseite */
.reservation-page-section .disclaimer {
    background-color: #fff3cd;
    /* Heller Gelbton */
    color: #664d03;
    /* Dunklerer Text für Kontrast */
    border: 1px solid #ffecb5;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 2rem;
    font-size: 0.95em;
}


/* Akkordeon auf der Reservierungsseite */
.reservation-page-section .akkordeon {
    margin-bottom: 2rem;
    /* Abstand zum Formular */
}

/* Spezifische Stile für das Nachrichtenfeld der Verfügbarkeit */
#msgVerfuegbarkeit {
    grid-column: 1 / -1;
    /* Spannt über beide Spalten im form-group Grid */
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    /* Etwas mehr Abstand nach unten */
    font-weight: bold;
    min-height: 1.5em;
    /* Verhindert Springen des Layouts, wenn Text erscheint/verschwindet */
}

/* Anpassung für die Datenschutz-Checkbox-Gruppe */
.form-group.datenschutz-gruppe {
    /* Eigene Klasse für diese spezielle Gruppe */
    grid-template-columns: auto 1fr;
    /* Checkbox nimmt auto-Breite, Label den Rest */
    align-items: center;
    /* Vertikal zentrieren */
}

.form-group.datenschutz-gruppe input[type="checkbox"] {
    width: auto;
    /* Standardbreite für Checkboxen */
    margin-right: 0.5em;
}

.form-group.datenschutz-gruppe label.checkbox-label {
    margin-bottom: 0;
    /* Entfernt Standard-Margin für bessere Ausrichtung */
}

/* Sende-Button im Reservierungsformular */
#reservierung_form button[type="submit"] {
    display: block;
    margin: 2rem auto 0;
    /* Zentriert den Button und gibt Abstand nach oben */
}

/* Legenden in Fieldsets auf der Reservierungsseite hervorheben */
.reservation-page-section fieldset.form-group legend {
    font-weight: bold;
    font-size: 1.2em;
    color: var(--stammeiche);
    padding: 0 0.3em;
    /* Etwas seitlicher Abstand */
    margin-bottom: 0.8rem;
}

/* Container auf der Bestätigungsseite für einheitliches Aussehen */
.confirmation-page-section .container {
    padding: 2rem;
    /* Innenabstand für den Inhaltsblock */
    background-color: var(--weiss);
    /* Weißer Hintergrund */
    border-radius: 8px;
    /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Leichter Schatten */
}

/* Button auf der Bestätigungsseite */
.confirmation-page-section .button-primary {
    margin-top: 2rem;
    /* Abstand nach oben */
}

/* Löschungsinfo */
.loeschung {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 0.95em;
    color: var(--graphit);
}

.loeschung b {
    color: var(--backstein);
    /* Akzentfarbe für das Datum */
}

/* Downloads Sektion */
.downloads {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 1rem;
    /* Abstand zwischen den Download-Links */
    margin-bottom: 2rem;
}

.downloadlink {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    /* Innenabstand */
    background-color: var(--anthrazit);
    color: var(--weiss);
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    font-size: 0.9em;
    /* Schriftgröße */
}

.downloadlink i {
    margin-right: 0.5em;
    /* Abstand zwischen Icon und Text */
}

.downloadlink:hover {
    background-color: var(--graphit);
}

.downloadlink .bold {
    font-weight: bold;
    margin-left: 0.25em;
    /* Abstand vor dem fettgedruckten Text */
}

/* Buchungsübersicht Tabelle */
.guest-overview-section table {
    /* Spezifischer Selektor für Tabellen in diesem Bereich */
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 2rem;
    border: 1px solid #ddd;
    /* Rahmen um die gesamte Tabelle */
    border-radius: 8px;
    overflow: hidden;
    /* Stellt sicher, dass abgerundete Ecken sichtbar sind */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.guest-overview-section th,
.guest-overview-section td {
    border: 1px solid #ddd;
    padding: 10px;
    /* Etwas mehr Padding */
    text-align: left;
}

.guest-overview-section th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.guest-overview-section tbody tr:nth-child(even) {
    background-color: #f9f9f9;
    /* Leichter Hintergrund für jede zweite Zeile */
}

.guest-overview-section tbody tr:hover {
    background-color: #f5f5f5;
}

/* Widget Container */
.widget-container {
    display: grid;
    /* Grid statt Flexbox für bessere Kontrolle */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    /* Responsive Spalten für Widgets */
    gap: 2rem;
    /* Abstand zwischen Widgets */
    margin-top: 2rem;
    /* Abstand zur Tabelle */
}

/* Einzelnes Widget */
.widget {
    padding: 1.5rem;
    background-color: var(--weiss);
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Überschriften innerhalb von Widgets */
.widget h3 {
    color: var(--stammeiche);
    margin-top: 0;
    margin-bottom: 1.5rem;
    text-align: left;
    /* Überschriften linksbündig in Widgets */
    border-bottom: 1px solid #eee;
    /* Leichte Trennlinie */
    padding-bottom: 0.5rem;
}

/* Formulare innerhalb von Widgets */
.widget form {
    margin: 0;
    /* Entfernt den Standard-Formular-Rand */
    padding: 0;
    /* Entfernt den Standard-Formular-Padding */
    border: none;
    /* Entfernt den Standard-Formular-Rahmen */
    box-shadow: none;
    /* Entfernt den Standard-Formular-Schatten */
}

/* Spezifische Anpassung für den Submit-Button im Profil-Formular */
.widget form input[type="submit"][name="update_profil"] {
    /* Kann spezifische Stile erhalten, falls abweichend vom allgemeinen Button-Stil */
    background-color: var(--gruen);
    /* Beispiel: Grüner Button für Aktualisierung */
    color: var(--weiss);
}

.widget form input[type="submit"][name="update_profil"]:hover {
    background-color: color-mix(in srgb, var(--gruen) 85%, black);
}

/* Spezifische Anpassung für den Submit-Button im Buchungsformular */
.widget form input[type="submit"][value="Anfrage senden"] {
    /* Kann spezifische Stile erhalten, falls abweichend vom allgemeinen Button-Stil */
    background-color: var(--backstein);
    /* Beispiel: Roter Button für Anfrage */
    color: var(--weiss);
}

.widget form input[type="submit"][value="Anfrage senden"]:hover {
    background-color: color-mix(in srgb, var(--backstein) 85%, black);
}

/* Definitionsliste für Gastdaten in der Übersicht */
.guest-data-list {
    margin-top: 1rem;
}

.guest-data-list dt {
    font-weight: bold;
    color: var(--stammeiche);
    margin-top: 0.8em;
    font-size: 0.95em;
}

.guest-data-list dd {
    margin-left: 0;
    margin-bottom: 0.5em;
    padding-left: 1em;
    /* Leichte Einrückung */
}

/* Responsive Anpassungen für Gästebereich */
@media (max-width: 768px) {
    .widget-container {
        grid-template-columns: 1fr;
        /* Widgets untereinander auf kleinen Bildschirmen */
    }

    .widget {
        min-width: auto;
        /* Mindestbreite entfernen */
        margin: 10px 0;
        /* Abstand anpassen */
    }
}

/* Formular für die PIN-Eingabe */
.pin-input-section .pin-form {
    max-width: 300px;
    /* Maximale Breite für das Formular */
    margin: 2rem auto;
    /* Zentriert das Formular und gibt Abstand */
    padding: 1.5rem;
    background-color: var(--weiss);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    /* Flexbox für Label, Input und Button */
    flex-direction: column;
    /* Elemente untereinander */
    gap: 1rem;
    /* Abstand zwischen den Elementen */
    align-items: center;
    /* Elemente horizontal zentrieren */
}

/* Disclaimer auf der Feedback-Seite */
.feedback-page-section .disclaimer {
    /* Kann spezifische Stile erhalten, falls abweichend vom Reservierungs-Disclaimer */
    /* background-color: #...; */
    /* color: #...; */
    /* border: 1px solid #...; */
    /* padding: 1rem; */
    /* border-radius: 4px; */
    margin-bottom: 2rem;
    /* font-size: 0.95em; */
}

/* Feedback Formular Container */
.feedback-page-section form#feedback_form {
    max-width: 700px;
    /* Maximale Breite für das Formular */
    margin: 0 auto;
    /* Zentriert das Formular */
}

.impressum-content {
    padding: 1.5rem;
    background-color: var(--weiss);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    line-height: 1.7;
}

.impressum-content h2 {
    color: var(--stammeiche);
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    font-size: 1.4em;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.3rem;
}

.impressum-content h3 {
    color: var(--stammeiche);
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.2em;
}

.impressum-content ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 1rem;
}

.impressum-content p {
    margin-bottom: 1rem;
}

.impressum-content a {
    color: var(--backstein);
    text-decoration: none;
}

.impressum-content a:hover {
    text-decoration: underline;
}

.faq-page-section .faq-section {
    /* Themengruppe */
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background-color: var(--weiss);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.faq-page-section .faq-section h2 {
    /* Themenüberschrift */
    color: var(--stammeiche);
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.6em;
    /* Etwas größer für Themengruppen */
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
}

.faq-item {
    border-bottom: 1px solid #eee;
    /* Dezenter Trenner zwischen Fragen */
    padding: 1rem 0;
}

.faq-item:last-child {
    border-bottom: none;
    /* Kein Trenner für das letzte Element in einer Gruppe */
}

.faq-question {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Pfeil nach rechts schieben */
}

.faq-question h3 {
    /* Frage selbst */
    margin: 0;
    flex-grow: 1;
    font-size: 1.1em;
    color: var(--graphit);
    /* Etwas hellere Farbe für die Frage */
}

.faq-question::after {
    /* Pfeil-Icon */
    content: "\f078";
    /* Pfeil nach unten (Font Awesome) */
    font-family: "Font Awesome 6 Free";
    /* Sicherstellen, dass die korrekte FA Version verwendet wird */
    font-weight: 900;
    margin-left: 1rem;
    /* Mehr Abstand zum Text */
    transition: transform 0.3s ease;
    color: var(--backstein);
    /* Akzentfarbe für den Pfeil */
}

.faq-item.open .faq-question::after {
    transform: rotate(180deg);
    /* Pfeil nach oben, wenn geöffnet */
}

.faq-answer {
    display: none;
    margin-top: 1rem;
    /* Mehr Abstand zur Frage */
    padding-left: 1.5rem;
    /* Einrückung für die Antwort */
    line-height: 1.7;
    color: var(--graphit);
}

.faq-item.open .faq-answer {
    display: block;
}

/* Add this to your stylesheet.css file */

/* Styling for the "Unsere letzten Fragen" fieldset */
.last-questions-fieldset {
    margin-top: 30px;
    /* Add space above the fieldset */
    margin-bottom: 30px;
    /* Add space below the fieldset */
    padding: 20px;
    /* Add padding inside the fieldset */
    border: 1px solid var(--grau);
    /* Add a subtle border */
    border-radius: 8px;
    /* Rounded corners */
    background-color: var(--hellgrau);
    /* Light background color */
}

/* Styling for the legend within the fieldset */
.last-questions-fieldset legend {
    font-size: 1.2em;
    /* Slightly larger font for the legend */
    font-weight: bold;
    padding: 0 10px;
    /* Padding around the legend text */
    color: var(--anthrazit);
    /* Match text color to your theme */
}

/* Styling for labels within the fieldset */
.last-questions-fieldset label {
    display: block;
    /* Ensure labels are on their own line */
    margin-bottom: 8px;
    /* Space below each label */
    font-weight: bold;
    /* Make labels bold */
    color: var(--anthrazit);
    /* Match text color */
}

/* Styling for inputs and select within the fieldset */
.last-questions-fieldset input[type="text"],
.last-questions-fieldset select {
    width: 100%;
    /* Make inputs and select fill the container width */
    padding: 10px;
    margin-bottom: 20px;
    /* Space below each input/select */
    border: 1px solid var(--grau);
    /* Subtle border for inputs */
    border-radius: 5px;
    /* Rounded corners for inputs */
    box-sizing: border-box;
    /* Include padding and border in the element's total width */
    font-size: 1em;
}

/* Specific style for the readonly buchungsnummer input */
.last-questions-fieldset input[type="text"][readonly] {
    background-color: var(--mittelgrau);
    /* Different background for readonly */
    cursor: not-allowed;
    /* Indicate it's not editable */
    color: var(--anthrazit);
}

/* Adjust margin for the last input/select in the fieldset if needed */
.last-questions-fieldset input[type="text"]:last-of-type,
.last-questions-fieldset select:last-of-type {
    margin-bottom: 10px;
    /* Less space after the last element before the button */
}

.gaeste-meinungen {
    background-color: #f8f9fa;
    /* Heller Hintergrund */
    padding: 40px 20px;
    text-align: center;
}

.gaeste-meinungen h2 {
    margin-bottom: 20px;
}

#gaeste-kommentar {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.sternebewertung {
    color: #ffc107;
    /* Goldene Sterne */
    font-size: 1.5em;
    margin-bottom: 10px;
}

.kommentartext {
    font-style: italic;
    font-size: 1.1em;
    color: #555;
}

.gaeste-meinungen .datum {
    font-size: 0.9em;
    color: #999;
}