:root {
    --bg-color: #f4f7f6; /* Etwas weicheres Grau für edleren Look */
    --card-bg: #ffffff;
    --text-main: #1a1a1a;
    --text-muted: #636e72;
    --accent: #2d3436;
    --shadow: 0 20px 40px rgba(0,0,0,0.06);
    --border-radius-lg: 30px;
    --border-radius-sm: 16px;
    /* Dein neues, leichtes Blau-Thema */
    --menu-bg: #ffffff;
    --menu-accent: #3498db;          /* Ein klares, professionelles Blau */
    --menu-accent-soft: #f0f7ff;     /* Sehr helles Blau für Hover-Hintergrund */
    --menu-text: #2c3e50;            /* Dunkles Anthrazit für bessere Lesbarkeit */
    --menu-shadow: rgba(0, 0, 0, 0.06);
    --menu-shadow-hover: rgba(52, 152, 219, 0.15);
    --accent-blue: #3498db;         /* Dein Blau */
    --light-blue: #f4f9fd;          /* Sehr dezentes Blau für Hintergrund */
    --border-color: #e2e8f0;        /* Feine Linie */
    --text-color: #334155;          /* Edles Anthrazit */
}

/* --- WETTER WIDGET HEADER --- */
.container {
    position: relative; /* Anker für das absolute Wetter-Widget */
}

/* --- Daten aktuallisieren --- */
/* Modernes Refresh-Design passend zum Wolfsbau */
.refresh-container-modern {
    margin-top: 20px;
    padding: 20px;
    background: #ffffff;
    border-radius: var(--border-radius-sm);
    border: 1px solid #edf2f4;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.refresh-info-badge {
    display: flex;
    gap: 15px;
    background: rgba(9, 132, 227, 0.05); /* Zartes Blau passend zur Intro-Box */
    padding: 12px 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    text-align: left;
    align-items: flex-start;
}

.info-icon {
    font-size: 1.2rem;
}

.info-content strong {
    display: block;
    font-size: 0.85rem;
    color: #0984e3;
}

.info-content p {
    margin: 2px 0 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.refresh-main {
    text-align: center;
}

/* Button-Styling basierend auf deiner .btn Klasse */
.btn-refresh {
    padding: 10px 25px !important;
    font-size: 0.9rem !important;
    background: var(--accent) !important; /* Dunkler Wolfsbau-Look */
    margin-top: 5px;
}

@media (max-width: 600px) {
    .refresh-container-modern {
        padding: 15px;
    }
}



/* --- MODERN BACK TO TOP BUTTON (Zentriert am Content) --- */
/* --- Gemeinsame Positionierung für beide Floating Buttons --- */
.back-to-top, .back-to-stay {
    position: fixed;
    right: 32px; /* Standard für Mobile */
    z-index: 1000;
}

/* Desktop-Ausrichtung: Beide Buttons am Rand des 650px Containers ausrichten */
@media (min-width: 850px) {
    .back-to-top, .back-to-stay {
        right: auto;
        left: calc(50% + 345px); /* Zentriert + halbe Containerbreite + Abstand */
    }
}

/* --- Spezifische Styles für den Haus-Button --- */
.back-to-stay {
    display: none; /* Wird per JS eingeblendet */
    bottom: 95px;  /* Höherer Abstand, damit er ÜBER dem Pfeil schwebt */
    border: none;
    background-color: var(--accent-blue);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: all 0.3s ease;
    align-items: center;
    justify-content: center;
}

.back-to-stay:hover {
    background-color: #2980b9;
    transform: scale(1.1);
}

/* --- Spezifische Styles für den Top-Button (angepasst) --- */
.back-to-top {
    bottom: 35px; /* Fester Abstand unten */
}

.back-to-top a {
    background-color: #ffffff; /* Wieder weiß */
    color: var(--accent);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.back-to-top a:hover {
    background-color: var(--light-blue);
    transform: scale(1.1);
}

/* SVG Größe im Top-Button korrigieren */
.back-to-top svg {
    width: 24px;
    height: 24px;
}

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 0; /* Padding wird über Container gesteuert */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 650px;
    margin: 60px auto;
    background: var(--card-bg);
    padding: 50px 60px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
}

/* Header & Logo */
.header-center { 
    text-align: center; 
    margin-bottom: 20px; 
}

.logo { 
    width: 100%;
    max-width: 380px; /* Präsent auf Desktop */
    height: auto;
    margin: 0 auto 15px auto; /* Zentriert und weniger Platz nach unten */
    display: block;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.02);
}

/* Optimierung für Mobilgeräte (Handys) */
@media (max-width: 600px) {
    .logo {
        max-width: 220px; /* Deutlich kleiner auf dem Handy spart massiv Platz */
        margin-bottom: 10px; /* Noch engerer Abstand zum Grußtext */
    }
}


/* Die Warn-Box für den Schlüssel */
.warning-box {
    background: rgba(231, 76, 60, 0.1);
    border-left: 6px solid #e74c3c;
	border-right: 6px solid #e74c3c;
    padding: 20px; /* Desktop-Abstand */
    border-radius: 12px;
    margin: 20px 0;
    color: #c0392b;
}

.warning-box h3 {
    margin-top: 0;
    color: #c0392b;
    font-size: 1.2rem;
}

/* Mobile Optimierung */
@media (max-width: 600px) {
    .warning-box {
        padding: 12px; /* Weniger Innenabstand auf dem Handy */
        margin: 15px 0;
        border-left-width: 6px; /* Etwas schmalerer Balken */
    }
    
    .warning-box h3 {
        font-size: 1.05rem; /* Überschrift schrumpft mit */
        margin-bottom: 8px;
    }
    
    .warning-box p {
        font-size: 0.95rem; /* Text wird etwas kleiner */
        line-height: 1.4;
    }
}

/* Container für Input + Icon - jetzt sauber zentriert */
.input-wrapper, 
.btn {
    position: relative;
    display: block;
    margin: 5px auto; /* 'auto' links/rechts zentriert den Block */
    width: 100%;
    max-width: 320px; /* Breite an dein restliches Design anpassen */
}

/* Sicherstellen, dass das Input-Feld die volle Breite des Wrappers nutzt */
.input-field {
    width: 100%;
    max-width: none !important;
    box-sizing: border-box; /* WICHTIG: Padding wird nicht zur Breite addiert */
    padding-right: 40px !important; /* Platz rechts für das Fragezeichen lassen */
    margin-bottom: 0; /* Margin wird jetzt vom Wrapper übernommen */
}

/* Das Icon im Feld */
.field-info {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: #eee; /* Dezentere Farbe */
    color: #777;
    border-radius: 50%;
    font-size: 14px;
    line-height: 22px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    border: 1px solid #ccc;
    z-index: 2;
}

/* Tooltip - schick & über dem Feld */
.tooltip-box {
    display: none;
    position: absolute;
    bottom: 130%; 
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    background: #333;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    z-index: 100;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    text-align: left; /* Text im Tooltip linksbündig für bessere Lesbarkeit */
}

.tooltip-box.active {
    display: block;
}

/* Kleiner Pfeil nach unten */
.tooltip-box::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(44, 62, 80, 0.95) transparent transparent transparent;
}

.error-text {
    color: #e74c3c;
    font-size: 0.8rem;
    margin-bottom: 10px;
}




/* --- h1: Die Begrüßung (Einzeiler) --- */
h1 {
    font-size: clamp(1rem, 5vw, 2.2rem); 
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-main);
    text-align: center;
    margin-bottom: 40px;
    white-space: nowrap;
    overflow: hidden;
}

/* --- h2: Die Struktur --- */
h2 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-main);
    margin-top: 50px; /* Viel Platz im freien Fluss */
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    display: block;
    text-align: left;
    width: 100%; /* Sicherstellen, dass es die volle Breite nutzt */
}

/* Spezialregel: Wenn h2 das erste Kind in einer Box ist, kein Abstand nach oben */
.highlight-card h2:first-child,
.checkout-box h2:first-child,
.intro-box h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

/* --- h3: Die feine Gliederung (Hausregeln) --- */
h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin-top: 25px;
    margin-bottom: 8px;
}

/* Mobile Korrekturen */
@media (max-width: 600px) {
    h2 { font-size: 1.15rem; margin-top: 35px; }
    h3 { font-size: 1rem; }
}

/* Formulare & Buttons */
.key-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.input-field {
    width: 100%;
    max-width: 320px;
    padding: 16px;
    border: 2px solid #f0f0f0;
    border-radius: 14px;
    background: #fdfdfd;
    font-size: 1.1rem;
    text-align: center;
    transition: all 0.25s ease;
}

.input-field:focus {
    outline: none;
    border-color: var(--text-main);
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.btn {
    background: var(--text-main);
    color: white;
    padding: 16px 45px;
    border: none;
    border-radius: 14px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn:hover { 
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    filter: brightness(1.2);
}


/* Styling für die Anreise-Liste */
.arrival-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 1.5rem;
}

.arrival-step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

/* Wir nutzen deinen --accent für die Kreise */
.arrival-number {
    background: var(--accent);
    color: white;
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 2px;
}

.arrival-text {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Mobil-Optimierung: Text etwas kleiner */
@media (max-width: 600px) {
    .arrival-text { font-size: 0.9rem; }
    .arrival-list { gap: 1rem; }
}




/* Inhalts-Styles */
.intro-box {
    background: #f9f9fb;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: var(--border-radius-sm);
    margin-bottom: 35px;
    border-left: 6px solid #dfe6e9;
    font-size: 1.05rem;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 40px;
    margin-bottom: 20px;
}

.step-circle {
    background: var(--text-main);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.step-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.image-gallery img, .image-gallery embed {
    width: 100%;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.highlight-card {
    background: #fff;
    border: 1px solid #edf2f4;
    padding: 30px;
    border-radius: var(--border-radius-sm);
    margin: 30px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

/* Checkout Box Redesign */
.checkout-box {
    background: #fdfdfd; /* Heller Hintergrund statt Schwarz */
    color: var(--text-main); /* Dunkler Text für Lesbarkeit */
    padding: 40px;
    border: 2px solid #edf2f4;
    border-radius: var(--border-radius-sm);
    margin-top: 50px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.review-card {
    background: #f0f7ff;
    border-left: 6px solid #0984e3;
    padding: 20px;
    border-radius: 12px;
    margin-top: 25px;
}

/* Kompakter Sprachumschalter oben rechts */
/* iOS Style Segmented Control für Sprachen */
.lang-switch-wrapper {
    position: absolute;
    top: 25px;
    left: 25px;  /* Abstand von links */
    right: 25px; /* Abstand von rechts */
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Schiebt Wolf nach links und Sprachen nach rechts */
}

/* Die feste Breite beim lang-toggle entfernen oder beibehalten */
.lang-toggle {
    display: flex;
    background: #efefef;
    padding: 2px;
    border-radius: 20px;
    width: 120px; /* Bleibt bei der festen Breite für den iOS-Look */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* Mobile Optimierung */
@media (max-width: 600px) {
    .lang-switch-wrapper {
        top: 15px;
        left: 15px;
        right: 15px;
    }
}

.lang-segment {
    flex: 1;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 0;
    text-decoration: none;
    color: #8e8e93; /* Inaktive Farbe */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s ease;
    border-radius: 18px;
}

/* Der aktive "Knopf" */
.lang-segment.active {
    background: #ffffff;
    color: #000000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.lang-segment:not(.active):hover {
    color: #333;
}



.wolf-trigger {
    background: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-size: 1.2rem;
    transition: transform 0.2s ease;
    border: 1px solid #eee;
}

.wolf-trigger:hover {
    transform: scale(1.1);
}


/* Der neue Wrapper für die Login-Seite */
.wolf-trigger-wrapper {
    position: absolute;
    top: 25px;   /* Gleicher Abstand wie oben */
    left: 25px;  /* Gleicher Abstand von links, wie der Switcher von rechts hat */
    z-index: 100;
}

/* Wir nutzen die bereits existierende .wolf-trigger Klasse für das Design */
.wolf-trigger {
    background: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-size: 1.2rem;
    transition: transform 0.2s ease;
    border: 1px solid #eee;
}

/* Mobile Korrektur für die Symmetrie */
@media (max-width: 600px) {
    .wolf-trigger-wrapper {
        top: 15px;
        left: 15px;
    }
}


/* Das verdunkelnde Overlay */
/* Das Overlay (Hintergrund) */
.host-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Nutzt die gesamte Viewport-Breite */
    height: 100vh; /* Nutzt die gesamte Viewport-Höhe */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 9999;
    display: block; /* Wir nutzen kein Flexbox hier, um Sprünge zu vermeiden */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.host-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Die eigentliche Karte als Popup */
.host-card-popup {
    background: white;
    position: absolute;
    top: 50%; /* Mitte von oben */
    left: 50%; /* Mitte von links */
    
    /* Das ist der Magic-Fix gegen das Verschieben: */
    /* Wir schieben sie um die eigene Hälfte zurück und fügen die Animation hinzu */
    transform: translate(-50%, -40%); 
    
    width: calc(100% - 40px); /* 20px Rand links/rechts */
    max-width: 380px;
    padding: 30px 20px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    box-sizing: border-box;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Wenn sichtbar, schieben wir sie exakt in die Mitte */
.host-overlay.visible .host-card-popup {
    transform: translate(-50%, -50%);
}

.close-host {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-muted);
}

/* Bild innerhalb des Popups */
.host-img {
    /* Dynamische Breite: Nutzt den Platz bis max. 280px, passt sich auf kleinen Handys aber an */
    width: 80%;
    max-width: 500px; 
    
    /* Automatische Höhe: Das Bild behält seine natürlichen Proportionen */
    height: auto;
    
    /* Verhindert Verzerrung, falls doch mal eine feste Höhe ins Spiel kommt */
    object-fit: cover;
    
    /* Abgerundete Ecken passend zum restlichen Design */
    border-radius: 16px;
    margin-bottom: 15px;
    border: 3px solid #eee;
    
    /* Optional: Ein leichter Schatten lässt das Bild plastischer wirken */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}


.host-details {
    margin: 15px 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: normal;
}


/* --- MINIMALISTISCHER, ZENTRIERTER PREMIUM FOOTER --- */
.site-footer {
    margin-top: 40px;
    padding: 25px 0 15px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05); /* Sehr dezente Trennlinie innerhalb des Containers */
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px; /* Perfekter Abstand zwischen den Elementen */
}

/* Bis zum Hovern: Alle Textelemente absolut identisch formatieren */
.footer-item, 
.footer-link, 
.footer-email {
    color: var(--text-muted);
    font-weight: 400;
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 0.25s ease, color 0.25s ease;
    display: inline-block;
}

/* Garantiert: Kein Zeilenumbruch für die Adresse auf allen Geräten */
.footer-address {
    white-space: nowrap;
}

/* Interaktive Elemente bekommen den Hand-Zeiger */
.footer-link, 
.footer-email {
    position: relative;
    cursor: pointer;
}

/* Hover-Zustand für Link & E-Mail (wird elegant deutlicher) */
.footer-link:hover, 
.footer-email:hover {
    opacity: 1;
    color: var(--text-main);
}

/* Die identische, animierte Unterlinie für URL UND E-Mail */
.footer-link::after,
.footer-email::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--accent-blue); /* Nutzt dein Theme-Blau */
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.footer-link:hover::after,
.footer-email:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Die kleinen Trennpunkte */
.footer-sep {
    color: var(--text-muted);
    opacity: 0.35;
    user-select: none;
}

/* Click-to-Copy Toast-Meldung ("Kopiert!") */
.footer-email-box {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.copy-toast {
    position: absolute;
    bottom: 145%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: #2d3436;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.copy-toast::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: #2d3436 transparent transparent transparent;
}

.copy-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Mobil-Optimierung: Wird es zu eng, stapeln sich die Zeilen zentriert, 
   aber die Adresse bleibt strikt in einer Zeile stehen */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        gap: 6px;
    }
    .footer-sep {
        display: none; /* Trennpunkte verbergen, wenn untereinander gestapelt */
    }
}



/* Quick-Menü Container */
.quick-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px 0;
    margin-bottom: 10px;
    margin-top: -10px;
}

/* Responsive: 2x2 auf Handys */
@media (max-width: 600px) {
    .quick-menu {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Ganz schmal: untereinander */
@media (max-width: 350px) {
    .quick-menu {
        grid-template-columns: 1fr;
    }
}

.menu-item {
    display: flex;
    align-items: center;      /* Icon und Text auf einer Linie */
    justify-content: center;
    padding: 8px 12px;        /* Weniger vertikaler Platz -> flacher */
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;      /* Etwas weniger rund für den "flacheren" Look */
    text-decoration: none;
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04); /* Ganz dezenter Schatten */
}

/* Der Icon-Abstand */
.menu-item span {
    margin-right: 8px;        /* Platz zwischen Emoji und Text */
    font-size: 1.1rem;
    display: inline-block;
}

/* Hover-Effekt: Schlank & Blau */
.menu-item:hover {
    background: var(--light-blue);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    transform: translateY(-1px); /* Nur ein minimaler Lift */
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.1);
}

.menu-item:active {
    transform: translateY(0);
}


/* Scroll-Offset damit Überschriften nicht verdeckt werden */
h2, .step-header, .anchor-section {
    scroll-margin-top: 30px;
}

html {
    scroll-behavior: smooth;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}


/* Sanftes Scrollen für das gesamte Dokument */
html {
    scroll-behavior: smooth;
}

/* Damit die Anker-Links nicht direkt am oberen Rand kleben */
.anchor-section {
    scroll-margin-top: 20px;
}



@media (max-width: 600px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {
    .footer-section a {
        margin: 5px 8px;
    }
}



hr { border: 0; border-top: 1px solid #eee; margin: 15px 0; }

/* --- MOBILE OPTIMIERUNG --- */
@media (max-width: 600px) {
    body {
        background-color: var(--card-bg); /* Weißer Hintergrund für nahtlosen Look */
    }

    .container {
        margin: 0;
        padding: 30px 20px; /* Genug Platz für Text, aber keine Platzverschwendung */
        max-width: 100%;
        border-radius: 0;
        box-shadow: none; /* Schatten am Handy wirkt oft "dreckig" bei Randlos-Optik */
    }

    .logo {
        max-width: 260px; /* Auf dem Handy etwas moderater */
    }

p, .intro-box, .highlight-card, .checkout-box p {
        font-size: 0.92rem; 
        line-height: 1.5;
    }

    /* Speziell für die Hausregeln-Überschrift in der Card */
    .highlight-card h2 {
        font-size: 1.15rem;
        margin-bottom: 10px;
    }

    .step-header {
        margin-top: 30px;
    }

.step-circle {
        width: 30px; /* Minimal kleinerer Kreis, passend zur kleineren Schrift */
        height: 30px;
        font-size: 0.85rem;
    }

.step-title {
        font-size: 1.05rem; /* Etwas kleiner, damit es meistens einzeilig bleibt */
        font-weight: 700;
    }

    .image-gallery {
        grid-template-columns: 1fr;
    }

    .btn {
        width: 100%;
        box-sizing: border-box;
        padding: 18px;
    }

    .checkout-box {
        border-radius: 0; /* Checkout Box geht am Handy über die volle Breite */
        margin-left: -20px;
        margin-right: -20px;
    }
}


small {
    display: inline-block; /* Erlaubt bessere Kontrolle über Abstände */
    font-size: 0.82rem;    /* Etwas kleiner als Standard */
    line-height: 1.3;      /* Engerer Zeilenabstand für kompakte Optik */
    font-weight: 400;
}


/* Die Karten-Vorschau Box */
.map-preview-link {
    display: block;
    position: relative;
    margin-top: 15px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #ddd;
    line-height: 0; /* Verhindert hässliche Abstände unter dem Bild */
}

.map-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.map-thumbnail {
    width: 100%;
    height: 150px; /* Feste Höhe für die Vorschau auf Mobilgeräten */
    object-fit: cover; /* Schneidet das Bild sauber zu */
    transition: transform 0.4s ease;
}


.image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-overlay:target {
    visibility: visible;
    opacity: 1;
}

/* Der Bereich im Hintergrund, der auch schließt */
.overlay-close-area {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: zoom-out;
}

/* DAS "X": Der Schließen-Button oben rechts */
.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    z-index: 10001; /* Liegt über dem Bild */
    transition: background 0.2s;
}

.close-button:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Das Bild selbst */
.overlay-image {
    position: relative; /* Wichtig für Z-Index Layering */
    max-width: 95%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 40px rgba(0,0,0,0.8);
}

/* Mobile Korrektur für den Button */
@media (max-width: 600px) {
    .close-button {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        background: rgba(0, 0, 0, 0.5); /* Am Handy dunklerer Background für Kontrast */
        border: 1px solid rgba(255,255,255,0.3);
    }
}

/* Container für die Adresse */
/* Address Container Styling */
.address-container {
    background: #f8f9fa;
    border: 1px solid #edf2f4;
    border-radius: 12px;
    padding: 15px;
    margin: 20px 0;
    width: 100%;
    box-sizing: border-box;
}

.address-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.address-info {
    flex-grow: 1;
    min-width: 0; /* Verhindert Overflow bei langen Texten */
}

.address-text {
    margin-left: 0px;
    font-size: small;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.address-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.address-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.gmaps-btn {
    background: #0984e3;
    color: white;
    padding: 0 12px;
}

.copy-btn {
    background: #0984e3;
    color: white;
    width: 38px;
}

.address-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}


.guest-time-box {
        margin-top: 15px; 
        padding: 18px; 
        background: #f8fafc; 
        border: 1px dashed #cbd5e1; 
        border-radius: 16px; 
        text-align: left;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    }
    .guest-time-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    .guest-time-input {
        width: 85px;
        text-align: center;
        padding: 6px;
        border: 2px solid #3498db;
        border-radius: 10px;
        font-weight: bold;
        color: #3498db;
        background: white;
        font-size: 1rem;
    }
    .guest-range-slider {
        -webkit-appearance: none;
        width: 100%;
        height: 6px;
        background: #dfe6e9;
        margin: 15px 0;
        border-radius: 3px;
        outline: none;
    }
    .guest-range-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #2d3436;
        border: 3px solid white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        cursor: pointer;
    }
    .guest-submit-btn {
        width: 100%;
        padding: 14px;
        background: #2d3436;
        color: white;
        border: none;
        border-radius: 12px;
        font-weight: bold;
        cursor: pointer;
        font-size: 0.95rem;
        transition: background 0.2s;
    }
    .guest-submit-btn:hover {
        background: #4a5568;
    }



/* Mobil-Optimierung */
@media (max-width: 600px) {
    .address-body {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .address-text {
        white-space: normal; /* Erlaubt Umbruch auf dem Handy falls nötig */
        font-size: 0.9rem;
    }
    
    .address-actions {
        width: 100%;
    }
    
    .gmaps-btn {
        flex-grow: 1; /* GMaps Button wird breit auf dem Handy */
    }
}

/* Verhindert, dass die Überschrift das Menü nach unten drückt */
#hausregeln {
    
}

#hausregeln h2 {
    margin-bottom: 0 !important; 
}


/* Das horizontale Quick-Menü (Desktop) */
#rules-quick-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap !important; /* Icons bleiben auf Desktop starr in einer Reihe */
    gap: 8px;
    
    /* HIER GEÄNDERT: Kompakteres Padding (oben/unten 5px statt 15px) */
    padding: 5px 0 !important; 
    
    /* HIER GEÄNDERT: Engere Abstände (10px nach oben, 12px nach unten statt 25px) */
    margin: 10px auto 12px auto !important; 
}

/* Die einzelnen Icon-Buttons (Desktop) */
#rules-quick-menu a {
    min-width: 50px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #ffffff !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: 12px !important;
    font-size: 1.4rem !important;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover-Effekt für die Regeln-Icons */
#rules-quick-menu a:hover {
    background: var(--light-blue, #f4f9fd) !important;
    border-color: var(--accent-blue, #3498db) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(52, 152, 219, 0.12) !important;
}

/* --- MOBILE OPTIMIERUNG --- */
@media (max-width: 600px) {

    /* Das scrollbare Menüband selbst */
    #rules-quick-menu {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        
        /* HIER GEÄNDERT: Mobil ebenfalls flacher halten (oben/unten 5px statt 15px) */
        padding: 5px 5px !important; 
        gap: 10px;
        scrollbar-width: none; /* Versteckt Scrollbar Firefox */
        overflow-y: visible !important; /* Verhindert das vertikale Abschneiden der Buttons */
    }
    
    #rules-quick-menu::-webkit-scrollbar {
        display: none; /* Versteckt Scrollbar Chrome/Safari */
    }
    
    /* Die einzelnen Icon-Buttons: PERFEKT QUADRATISCH & FIX ZENTRIERT */
    #rules-quick-menu a {
        flex-shrink: 0;
        min-width: 46px !important;
        width: 46px !important;  /* Erzwingt exakte Quadratform */
        height: 46px !important; /* Erzwingt exakte Quadratform */
        padding: 0 !important;   /* Innenabstand raus, damit Flexbox mittig ausrichtet */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important; 
        -webkit-tap-highlight-color: transparent;
        outline: none !important;
    }
    
    /* ZUSÄTZLICHER FIX FÜR DEN TEXT OBEN DRÜBER: 
       Verhindert, dass der Absatz zu weit nach unten drückt */
    #hausregeln > div:first-child p {
        margin-bottom: 5px !important;
    }
}


/* Die einzelnen Regel-Abschnitte */
.rule-item {
    display: flex;       /* Aktiviert das Spalten-Layout */
    align-items: flex-start; /* Icon und Text oben bündig */
    gap: 12px;           /* Der feste Abstand zwischen Icon und Text */
    margin: 0;
    line-height: 1.5;    /* Angenehme Zeilenhöhe */    
    padding: 20px 10px;
    border-bottom: 3px dotted #dfe6e9;
    scroll-margin-top: 20px; /* Abstand beim Hinspringen */
}

.rule-item:nth-of-type(even) {
    background: rgba(0, 0, 0, 0.02);
}

.rule-item:first-of-type {
    border-top: none;
    /* WICHTIG: Übernimmt die oberen Rundungen (12px), da es jetzt oben liegt */
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    
    /* Da das erste Element im PHP-Code ungerade (1. Element) ist, 
       erhält es standardmäßig keinen Hintergrund. Damit der Farbverlauf der 
       Guide-Box perfekt fortgesetzt wird, erzwingen wir hier das helle Grau: */
    background: rgba(0, 0, 0, 0.02) !important;
}

/* Perfekter Abschluss unten */
.rule-item:last-of-type {
    border-bottom: none;
    border-bottom-left-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
}

/* Die kleinen Icon-Badges vor den Regeln */
.rule-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;     /* Feste Breite */
    height: 34px;        /* Feste Höhe */
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    font-size: 1.1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    flex-shrink: 0;      /* Verhindert, dass das Icon schmaler wird */
    margin-top: 2px;     /* Feinjustierung, damit es perfekt zur ersten Textzeile passt */
}

/* Optional: Ein ganz zarter blauer Schimmer für die Icons */
.rule-item:hover .rule-icon {
    border-color: var(--accent-blue);
    background: var(--light-blue);
    transition: all 0.3s ease;
}

/* Mobil-Optimierung für mehr Platz */
@media (max-width: 480px) {
    .rule-item {
        gap: 8px;      /* Kleinerer Abstand Icon/Text */
        padding: 15px 5px;
    }
    
    .rule-icon {
        min-width: 30px; /* Icon-Badge etwas kleiner mobil */
        height: 30px;
        font-size: 1rem;
    }
}

/* Der Textbereich daneben */
.rule-content {
    flex: 1;             /* Nutzt den restlichen Platz */
    font-size: 0.95rem;
}



.time-badge-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 25px auto; /* Zentriert und sorgt für Abstand oben/unten */
    padding: 10px 24px;
    background-color: var(--light-blue); /* Das dezente Blau aus deiner CSS */
    color: var(--accent-blue);           /* Dein Primärblau für die Schrift */
    border: 1px solid #e2e8f0;           /* Feine Linie passend zum Rest */
    border-radius: var(--border-radius-sm); /* Nutzt deine 16px Rundung */
    font-size: 1.2rem;
    font-weight: 600;
    width: fit-content;                  /* Badge passt sich dem Inhalt an */
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.08); /* Sehr dezenter Schatten */
}

/* Optimierung für Mobilgeräte */
@media (max-width: 600px) {
    .time-badge-modern {
        font-size: 1.1rem;
        padding: 8px 18px;
        margin: 20px auto;
    }
}