@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Raleway:wght@300;400;500&display=swap');

@font-face {
    font-family: 'Bonn Caps Medium';
        src: url('Bonn Caps Medium/Bonn Caps Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap; }


/* ==========================================
   RESET & BASIS-KONFIGURATION
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    margin: 0 !important;   /* Fix: Erzwingt null Abstand */
    padding: 0 !important;  /* Fix: Erzwingt null Abstand */
    background-color: #ffffff;
}

/* Falls du für die reine Intro-Page das Scrollen verbieten willst, 
   nutze diese Klasse im HTML der Intro-Page: <body class="intro-layout"> */
.intro-layout {
    overflow: hidden;
}

/* ==========================================
   INTRO PAGE (FULLSCREEN OVERLAY)
   ========================================== */
.intro-container {
    width: 100%;
    height: 100vh; /* Zwingt den Container exakt auf Fullscreen-Höhe */
    height: 100dvh; /* Moderner Fix für mobile Browser (verhindert Balken durch die URL-Leiste) */
    margin: 0;
    padding: 0;
    background: url('images/villa-rosa_starter.jpg') no-repeat center center; 
    background-size: cover;
    
    /* Perfekte Zentrierung für das Logo (Flexbox-Symmetrie) */
    display: flex;
    justify-content: center;
    align-items: center;
    
    position: relative;
    overflow: hidden; /* Schneidet eventuelle Überhänge radikal ab */
}

/* Sorgt dafür, dass der Link um das Logo herum keine ungewollten Abstände erzeugt */
.logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border: none;
    outline: none;
}

.logo {
    width: 600px !important;    /* Deine Wunschbreite für große Bildschirme */
    max-width: 85vw !important;  /* Verhindert, dass das Logo auf Handys den Bildschirm sprengt */
    height: auto !important;
    display: block !important;
}

.logo-link:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

/* Stellt sicher, dass das Hamburger-System auf dem Desktop unsichtbar bleibt */
.menu-toggle-checkbox,
.hamburger-button {
    display: none;
}


/* ==========================================
   GLOBALE TYPOGRAFIE: ÜBERSCHRIFTEN (H1 - H6)
   ========================================== */

/* --- H1: Große Haupttitel --- */
h1 {
    font-family: 'Bonn Caps Medium', 'Bonn Caps', 'Montserrat', sans-serif;
    font-size: 50px;
    line-height: 70px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    margin-bottom: 30px;
}

/* --- H2: Sektionsüberschriften (ANREISE, KONTAKT, etc.) --- */
h2 {
    font-family: 'Bonn Caps Medium', 'Bonn Caps', 'Montserrat', sans-serif;
    font-size: 42px;
    line-height: 62px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 500;
    text-align: left;
}

/* --- H3: Kleinere Sektionsüberschriften --- */
h3 {
    font-family: 'Bonn Caps Medium', 'Bonn Caps', 'Montserrat', sans-serif;
    font-size: 35px;
    line-height: 52px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 500;
    text-align: left;
}

/* --- H4: Feine Zwischenüberschriften (Schriftart: Raleway) --- */
h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 26px;
    line-height: 42px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    text-align: left;
}

/* --- H5: Kleine Akzente / Label (Schriftart: primary = Montserrat) --- */
h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    line-height: 1.6em;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
}

/* --- H6: Kleinste Überschriften-Ebene (Schriftart: primary = Montserrat) --- */
h6 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
}


body, p {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #666666;
    line-height: 1.8;
    letter-spacing: 0.07em;
}

.intro-text {
    font-family: 'Raleway', sans-serif;   
    font-size: 16px;
    font-style: italic;
    text-align: center;
    color: #666666;
    max-width: 1000px;
    margin: 0 auto 40px auto;
    line-height: 1.7;
}

/* ==========================================
   FIXED HEADER SYSTEM
   ========================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px; /* Deine definierte Header-Höhe */
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}

/* Linker Bereich: Logo */
.header-left {
    display: flex;
    align-items: center;
}

.header-logo {
    height: 110px;
    width: auto;
    display: block;
}

/* Mittlerer Bereich: Menü + Flagge */
.header-center {
    display: flex;
    align-items: center;
    gap: 30px;
}

.main-nav {
    display: flex;
    gap: 35px; /* Abstand zwischen den einzelnen Menüpunkten */
    list-style: none;
}

.main-nav a {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px; /* Zurück auf deine Wunschgröße */
    text-transform: uppercase;
    color: #232323; /* Deine Wunschfarbe */
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease-in-out;
    letter-spacing: 0.1em; /* Semikolon korrigiert */
}

.main-nav a:hover {
    color: #999999; }

/* Flagge Styling */
.lang-switch img {
    width: 20px;
    height: auto;
    display: block;
    transition: transform 0.2s ease;
}

.lang-switch:hover img {
    transform: scale(1.1);
}

/* Rechter Bereich: Social Buttons */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.social-icon img {
    width: 35px;
    height: auto;
    display: block;
    transition: opacity 0.2s ease;
}

.social-icon:hover img {
    opacity: 0.7;
}

/* Verhindert das Verdecken von Content unter dem Header */
body {
    padding-top: 120px; 
}

/* ==========================================
   FULL SCREEN STARTBILD & CONTENT SCROLL
   ========================================== */
.hero-section {
    width: 100%;
    height: calc(100vh - 120px); /* Dynamisch angepasst an die 120px Headerhöhe */
    background: url('images/villa-rosa_starter.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed; /* Parallax-Effekt aktiv */
}

.content-wrapper {
    background-color: #ffffff;
    position: relative;
    z-index: 10;
}

.content-section-fixed {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}



/* ==========================================
   ALLGEMEINE SEKTIONS-ABSTÄNDE
   ========================================== */
.section-promo, 
.section-standard {
    padding: 80px 0; /* Jede Sektion hat strikt 80px Abstand oben und unten */
}

/* Da die Sektionen nun das Padding haben, setzen wir das Padding der inneren Boxen zurück */
.section-promo .content-section-fixed,
.section-standard .content-section-fixed {
    padding-top: 0;
    padding-bottom: 0;
}

/* ==========================================
   SONDERANGEBOTE (PROMO BOX)
   ========================================== */
.promo-box {
    background-color: #eeeeee;
    padding: 40px;
    text-align: center;
}

/* Spezifische H2 nur in dieser Promo-Box */
.promo-box h2 {
    color: #555555;
    text-align: center;
    margin-bottom: 20px;
}

/* Spezifischer Fließtext nur in dieser Promo-Box */
.promo-box .promo-highlight {
    font-family: "Secondary", sans-serif;
    font-size: 16px; /* 16 Punkt */
    font-weight: bold;
    text-align: center;
    color: #333333;
    max-width: 800px;
    margin: 0 auto;
}


/* ==========================================
       PROMO-BOX 2ER-GALERIE (WEISSER RAHMEN)
       ========================================== */
    .promo-image-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten nebeneinander */
        gap: 20px;
        max-width: 900px;
        margin: 30px auto 0 auto;              /* Zentriert die Galerie in der Box */
    }

    .promo-gallery-item {
        background-color: #ffffff;             /* Der weiße Rahmen */
        padding: 8px;                          /* Dicke des weißen Rahmens */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Edler, dezenter Schatten */
        aspect-ratio: 3 / 4;                 /* Schönes, harmonisches Querformat */
        overflow: hidden;
    }

    .promo-gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Mobil-Anpassung: Auf Handys untereinander stapeln */
    @media (max-width: 768px) {
        .promo-image-grid {
            grid-template-columns: 1fr !important;
        }
    }

/* ==========================================
   50/50 SPALTEN LAYOUT (Zentriert)
   ========================================== */
.split-50-50 {
    display: flex;
    gap: 50px;
    align-items: start; /* Zentriert beide Spalten weiterhin vertikal zueinander */
}

.column-text, 
.column-image {
    flex: 1;
    width: 50%;
}

.column-text {
    text-align: center; /* Zentriert den gesamten Text in der Spalte */
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert die Linien (hr), falls Flex-Eigenschaften greifen */
}

/* Linien zentrieren und Abstand anpassen */
.short-line {
    border: none;
    border-top: 1px solid #555555;
    width: 90%;
    margin: 25px auto; /* 'auto' sorgt dafür, dass die Linie horizontal zentriert wird */
}

.column-text .italic-text {
    font-style: italic;
}

/* Rechte Spalte: Bild */
.column-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}



/* ==========================================
   3-SPALTEN LAYOUT 
   ========================================== */

/* Die Sektion bekommt auch wieder die standardmäßigen 80px Abstand */
.section-triple {
    padding: 80px 0;
}

.section-triple .content-section-fixed {
    padding-top: 0;
    padding-bottom: 0;
}

/* Das Grid-System für die 3 gleichen Spalten */
.grid-3-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 exakt gleich große Spalten */
    gap: 20px;                             /* Fester Abstand von 20px zwischen den Spalten */
    align-items: start;                   /* Zentriert die Inhalte (z.B. den Text) vertikal */
}

/* Styling für die Text-Spalte (optional linksbündig oder zentriert – aktuell linksbündig passend zu H3) */
.column-triple-text h3 {
    margin-bottom: 20px;
}

/* Styling für die Bild-Spalten */
.column-triple-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}


/* ==========================================
   FULLSCREEN WECHSEL-SEKTIONEN (1/3 zu 2/3)
   ========================================== */

.section-split-fullscreen {
    width: 100%;
    padding-top: 80px;
}

/* --- HINTERGRUNDFARBEN (Varianten) --- */

/* Variante 1: Das ursprüngliche Grau */
.bg-gray-dark {
    background-color: #e1e1e1;
}

/* Variante 2: Das Salbei-Grün/Grau */
.bg-sage {
    background-color: #cdd2cd;
}

/* Variante 3: Reines Weiß */
.bg-white {
    background-color: #ffffff;
}

/* Variante 4: Warmes Sand/Beige */
.bg-sand {
    background-color: #f3ece5;
}


.split-container {
    width: 100%;
    min-height: 100vh; /* Volle Bildschirmhöhe */
    display: flex;
    align-items: start; /* Zentriert Inhalte vertikal */
}


.split-container.reverse {
    flex-direction: row-reverse;
}

/* 1/3 Spalte für den Text */
.split-col-text {
    flex: 1;
    width: 33.333%;
    padding: 60px; /* Großzügiger Innenabstand, damit der Text edel atmet */
}

.split-col-text h2 {
    margin-bottom: 25px;
}

/* 2/3 Spalte für die Galerie */
.split-col-gallery {
    flex: 2;
    width: 66.666%;
    padding: 40px; /* Minimaler Abstand zum Bildschirmrand */
}


/* ==========================================
   QUADRATISCHE 6ER-GALERIE 
   ========================================== */
.image-grid-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.gallery-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Perfekte Quadrate */
    overflow: hidden;
    cursor: pointer; /* Zeigt den Klick-Finger */
}

.lightbox-trigger {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.gallery-item:hover .lightbox-trigger {
    transform: scale(1.04);
    filter: brightness(0.9);
}


/* ==========================================
   BUCHEN BUTTON 
   ========================================== */
.btn-booking {
    display: block;          
    width: 100%;             
    background-color: #333333; 
    color: #e1e1e1;           
    text-align: center;      
    padding: 15px 20px;      
    margin-top: 30px;        
    text-decoration: none;   
    
    /* Typografie passend zum Rest der Seite */
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    
    transition: background-color 0.3s ease; /* Weicher Übergang beim Hovern */
    cursor: pointer;
}

/* Hover-Effekt (Onmouse) */
.btn-booking:hover {
    background-color: #777777; 
    color: #e1e1e1;           
}



/* ==========================================
   CSS FÜR DAS LIGHTBOX OVERLAY
   ========================================== */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Dunkler, eleganter Hintergrund */
    z-index: 2000; /* Höher als der Header (1000) */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Unsichtbar im Normalzustand */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Wird per JavaScript aktiviert */
.lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Das maximierte Bild */
#lightbox-img {
    max-width: 85vw;
    max-height: 85vh;
    object-fit: contain;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

/* Schließen-Button (X) */
.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #ffffff;
    font-size: 50px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
}

.lightbox-close:hover {
    color: #d5d5d5;
}


/* ==========================================
   3 SPALTEN (Bild / Text / Bild)
   ========================================== */
.section-row-blocks {
    padding: 80px 0; 
}

.section-row-blocks2 {
    padding: 10px 0 50px 0; 
}

/* Das Grid für die 3 exakt gleichen Spalten */
.row-block-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten, jeweils 1 Teil vom Ganzen */
    gap: 10px;                             /* Abstand zwischen den Boxen */
    align-items: stretch;                  /* Zwingt Text und Bilder auf exakt gleiche Höhe */
}

/* Styling für die Text-Box in der Mitte */
.row-block-grid .block-text {
    background-color: #ffffff; 
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;        /* Zentriert den Text horizontal */
}

.row-block-grid .block-text h3 {
    margin-bottom: 15px;
    text-align: left;
}

/* Styling für die Bild-Boxen links und rechts */
.row-block-grid .block-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;         /* Schneidet das Bild sauber passend zu */
}



/* ==========================================
   INFO-PAGE: 50% HERO SECTION
   ========================================== */
.hero-section-half {
    width: 100%;
    height: calc(60vh - 120px); /* Exakt 50% der Viewport-Höhe minus Header-Höhe */
    background: url('images/info.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed; /* Parallax-Effekt bleibt aktiv */
}

/* ==========================================
   INFO-PAGE: INHALTS-SEKTION (ANPASSUNG)
   ========================================== */

.section-info-intro .content-section-fixed,
.section-info-highlight .content-section-fixed,
.section-info-simple .content-section-fixed {
    padding-top: 0;
    padding-bottom: 0;
}

.section-info-intro {
    padding: 60px 0 20px 0; /* Schöner Abstand nach oben zum Header, kompakter nach unten */
    background-color: #ffffff;
}

/* Abstand von der H2 zum Spalten-Layout */
.section-info-intro h2 {
    margin-bottom: 50px;
    text-align: center;
}

/* Das 50/50 Layout für die Info-Seite */
.split-50-50-info {
    display: flex;
    gap: 50px;           /* Abstand zwischen Bild und Text */
    align-items: center;  /* Richtet Bild und Text oben bündig aus */
    padding-top: 20px;
}

.column-info-img, 
.column-info-text {
    flex: 1;
    width: 50%;
}

.split-50-50-info.align-top {
    align-items: flex-start; /* Richtet Text und Google Maps exakt am oberen Rand aus */
}

/* Bild-Styling */
.column-info-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Text-Styling */
.column-info-text p {
    margin-bottom: 20px;
}
.column-info-text p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   INFO-PAGE: HIGHLIGHT SEKTION (GRAU & GRÜN)
   ========================================== */
.section-info-highlight {
    padding: 60px 0; /* Einheitlicher, sauberer Abstand von 30px über und unter den Boxen */
    background-color: #ffffff;
}

/* Die eigentliche Box im Inneren der 1200px (Grau) */
.section-info-highlight .highlight-box {
    background-color: #e1e1e1; 
    padding: 60px 80px; /* Leicht kompakteres Innen-Padding für einen cleaneren Look */      
    text-align: left;        
}

/* Die eigentliche Box im Inneren der 1200px (dunkelgrau) */
.section-info-highlight .highlight-box4 {
    background-color: #cccccc; 
    padding: 60px 80px; /* Leicht kompakteres Innen-Padding für einen cleaneren Look */      
    text-align: left;        
}


/* Die eigentliche Box im Inneren der 1200px (v2 - Grün) */
.section-info-highlight .highlight-box2 {
    background-color: #cdd2cd; 
    padding: 60px 80px;       
    text-align: left;
}

/* Die eigentliche Box im Inneren der 1200px (v3 - sand) */
.section-info-highlight .highlight-box3 {
    background-color: #f3ece5; 
    padding: 60px 80px;       
    text-align: left;
}

/* Abstand nach unten für die H2 in den Boxen */
.section-info-highlight h2 {
    margin-bottom: 25px;      
    text-align: left;         
}

/* Text-Styling für das Highlight */
.section-info-highlight .highlight-box p,
.section-info-highlight .highlight-box2 p {
    font-family: 'Montserrat', sans-serif;
    color: #333333;
    margin: 0;
    padding-top: 10px;        
    text-align: left;
}


/* ==========================================
   INFO-PAGE: SIMPLE SEKTION MIT LISTE
   ========================================== */
.section-info-simple {
    padding: 60px 0; /* Harmonisiert mit den Highlight-Boxen */
    background-color: #ffffff;
}

/* Abstand von der H2 zum Text */
.section-info-simple h2 {
    margin-bottom: 25px;
}

/* Abstand vom Text zur Liste */
.section-info-simple p {
    margin-bottom: 20px;
}

/* Styling für die Aufzählungsliste */
.section-info-simple ul {
    padding-left: 20px;        
    list-style-type: disc;     
}

/* Kompakter Abstand zwischen den einzelnen Listenpunkten */
.section-info-simple li {
    font-family: "Secondary", sans-serif;
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
    letter-spacing: 0.07em;
    margin-bottom: 8px;        
}

.section-info-simple li:last-child {
    margin-bottom: 0;
}



/* ==========================================
   INFO-PAGE: 75/25 SPLIT SEKTION
   ========================================== */

/* Setzt auch hier das störende, globale 80px-Padding zurück */
.section-info-split-75-25 .content-section-fixed {
    padding-top: 0;
    padding-bottom: 0;
}

.section-info-split-75-25 {
    padding: 50px 0;           /* Angenehmer, sauberer Abstand nach oben/unten */
    background-color: #ffffff;
}

.split-75-25 {
    display: flex;
    gap: 50px;                 /* Abstand zwischen Text und Bild */
    align-items: center;       /* Richtet das Bild vertikal mittig zum Text aus */
}

/* 3/4 Spalte (Text) */
.column-75 {
    width: 65%;
}

.column-75 h2 {
    margin-bottom: 25px;
    text-align: left;          /* Bleibt im Fluss linksbündig */
}

.column-75 p {
    margin-bottom: 20px;
}
.column-75 p:last-child {
    margin-bottom: 0;
}

/* 1/4 Spalte (Bild) */
.column-25 {
    width: 35%;
}

.column-25 img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 2px;        /* Minimal abgerundete Kanten für einen soften Look, falls gewünscht */
}


/* ==========================================
   BUTTON: SAND-TON (ECKIG & FLAT)
   ========================================== */
.btn-sand-flat {
    display: inline-block;
    background-color: #f3ece5;   
    color: #000000;               /* Schwarzer Text */
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;              /* Gleiche edle Schriftgröße wie im Footer */
    font-weight: 500;
    letter-spacing: 0.1em;        /* Leicht gesperrt für einen exklusiveren Look */
    text-transform: uppercase;    /* Großbuchstaben */
    text-decoration: none;
    padding: 15px 35px;           /* Großzügiges Padding für eine schöne Button-Fläche */
    border: 1px solid #f3ece5;    /* Unsichtbarer Rand, der beim Hover wichtig wird */
    border-radius: 0 !important;  /* Absolut eckig, garantiert keine Rundungen */
    transition: all 0.3s ease;    /* Sanfter Übergang für den Mouse-Over-Effekt */
    cursor: pointer;
    margin-top: 20px;             /* Abstand nach oben hin zu Absätzen */
}

/* Der schöne Mouse-Over-Effekt (Hover) */
.btn-sand-flat:hover {
    background-color: #dcc5ae;    /* Wechselt zu einem edlen Dunkelgrau/Anthrazit */
    border-color: #dcc5ae;
}



/* ==========================================
   BUTTONS: NEBENEINANDER (GRAU-EDITION)
   ========================================== */

/* Der Container sorgt für die Anordnung und den Abstand zwischen den Buttons */
.button-row-container {
    display: flex;
    gap: 20px;            /* Der gewünschte Abstand zwischen den beiden Buttons */
    margin-top: 30px;     /* Abstand zum Text darüber */
}

/* Die neuen grauen Buttons */
.btn-grey-flat {
    display: inline-block;
    background-color: #8b8b8b;    /* Deine gewünschte Hintergrundfarbe */
    color: #ffffff;               /* Weißer Text */
    border: 1px solid #8b8b8b;    /* Weißer Rahmen */
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;    /* Großbuchstaben */
    text-decoration: none;
    padding: 15px 35px;           /* Großzügiges Padding */
    border-radius: 0 !important;  /* Absolut eckig */
    transition: all 0.3s ease;    /* Sanfter Übergang beim Hover */
    cursor: pointer;
    text-align: center;
}

/* Der Mouse-Over-Effekt (Hover) */
.btn-grey-flat:hover {
    background-color: #6e6e6e;    /* Dunkleres Grau beim Drüberfahren */
    color: #ffffff;               /* Bleibt weißer Text */
    border-color: #ffffff;        /* Bleibt weißer Rahmen */
}




/* ==========================================
   BUTTON: KONTAKT (RUNDE KANTEN)
   ========================================== */
.btn-contact-round {
    display: inline-block;
    background-color: #848991;    /* Deine gewünschte Hintergrundfarbe */
    color: #ffffff;               /* Weißer Text */
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;              /* Einheitliche, edle Größe */
    font-weight: 500;
    letter-spacing: 0.1em;        /* Leicht gesperrt für den edlen Look */
    text-transform: uppercase;    /* Großbuchstaben */
    text-decoration: none;
    padding: 15px 35px;           /* Angenehme Button-Fläche */
    border: 1px solid #848991;    /* Rahmen in Hintergrundfarbe für sauberen Übergang */
    border-radius: 50px;          /* Perfekt runde Kanten ("Pill-Shape") */
    transition: all 0.3s ease;    /* Sanfter Mouse-Over-Effekt */
    cursor: pointer;
    margin-top: 25px;             /* Abstand zum Text darüber */
    text-align: center;
}

/* Der gewünschte Mouse-Over-Effekt (Hover) */
.btn-contact-round:hover {
    background-color: #6d7278;    /* Deine gewünschte Hover-Farbe */
    border-color: #6d7278;        /* Rahmen zieht farblich mit */
    color: #ffffff;               /* Text bleibt weiß */
}


/* ==========================================
   KONTAKT-PAGE: SPEZIFISCHES LAYOUT & BUTTON
   ========================================== */

/* Setzt das globale 80px-Padding nur für diese Sektion zurück */
.section-contact-page .content-section-fixed {
    padding-top: 0;
    padding-bottom: 0;
    align-items: start; 
}

/* Die Sektion selbst bekommt 60px nach oben und großzügige 120px nach unten zum Footer */
.section-contact-page {
    padding: 60px 0 120px 0; 
    background-color: #ffffff;
}

/* Abstand der H2 Überschrift */
.section-contact-page h2 {
    margin-bottom: 50px;
    text-align: center;
}


a {
    text-decoration: none;
    color: #333333;
}

/* Optional: Nur im normalen Fließtext (z.B. bei der E-Mail-Adresse) 
   wird der Link beim Drüberfahren elegant unterstrichen */
.column-info-text p a:hover {
    text-decoration: underline;
}

/* --- Der neue abgerundete Kontakt-Button --- */
.btn-contact-round {
    display: inline-block;
    background-color: #848991;    /* Deine gewünschte Hintergrundfarbe */
    color: #ffffff;               /* Weißer Text */
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;    /* Großbuchstaben */
    padding: 15px 35px;           /* Schöne, breite Klickfläche */
    border: 1px solid #848991;    
    border-radius: 50px;          /* Perfekt runde Kanten (Pill-Form) */
    transition: all 0.3s ease;    /* Sanfter Übergang beim Hover */
    cursor: pointer;
    margin-top: 25px;             /* Abstand zum Text darüber */
}

/* Mouse-Over-Effekt (Hover) */
.btn-contact-round:hover {
    background-color: #6d7278;    /* Deine gewünschte Hover-Farbe */
    border-color: #6d7278;
    color: #ffffff;
}





/* ==========================================
   SITE FOOTER STYLING (FULLWIDTH)
   ========================================== */
.site-footer {
    background-color: #333333;
    color: #ffffff;
    padding: 50px 60px; /* 60px Padding links/rechts für den Fullwidth-Look */
    font-size: 14px;
    width: 100%;
}

/* Das Grid nutzt nun die volle Breite minus das Padding des Footers */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 gleich große Spalten */
    gap: 40px;
    align-items: start;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

/* --- Spalte 1: Logo --- */
.footer-logo-wrap {
    align-items: flex-start; /* Linksbuendig auf großen Screens */
}

.footer-logo {
    max-width: 160px;
    height: auto;
    display: block;
}

/* --- Spalte 2: Adresse (Alles in reinem Weiß) --- */
.footer-address {
    color: #ffffff;
}

.footer-address strong {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 10px;
    color: #ffffff;
}

.footer-address p {
    color: #ffffff;
    line-height: 1.6;
}

.footer-address a {
    color: #ffffff; /* E-Mail-Link jetzt auch strikt weiß */
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-address a:hover {
    color: #d0d0d0; /* Dezenter Hover-Effekt bleibt beim Drüberfahren */
}

/* --- Spalte 3: Buttons (Rechtsbündig ausgerichtet) --- */
.footer-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Schiebt die Buttons an den rechten Rand ihrer Spalte */
}

/* Die restlichen Styles für die Buttons bleiben genau gleich wie vorhin: */
.footer-buttons .btn-footer-outline,
.footer-buttons .btn-footer-solid {
    display: block;
    width: 240px;
    text-align: center;
    padding: 12px 10px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Button 1: Anfrage */
.btn-footer-outline {
    background-color: #333333;
    color: #ffffff;
    border: 1px solid #ffffff;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.btn-footer-outline:hover {
    color: #d0d0d0;
    border-color: #d0d0d0;
}

/* Button 2: Bestpreisgarantie (Kompaktere Laufweite) */
.btn-footer-solid {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #ffffff;
    letter-spacing: -0.02em; /* Reduzierte Laufweite, damit es perfekt in eine Zeile passt */
}

.btn-footer-solid:hover {
    background-color: #d0d0d0;
    border-color: #d0d0d0;
    color: #333333;
}

/* --- Spalte 4: Rechtliche Links (Kompakt) --- */
.footer-links a {
    color: #ffffff;
    text-align: right;
    text-decoration: none;
    display: block;
    margin-bottom: 8px; /* Weniger Abstand zwischen den Zeilen */
    line-height: 1.3;     /* Geringere Zeilenhöhe für kompakten Look */
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #d0d0d0;
}



/* ==========================================
   ANREISE-PAGE: SLIDESHOW & CONTENT
   ========================================== */

/* Container für die Slideshow: Nimmt genau die Resthöhe unter dem Header ein */
.arrival-slideshow-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 120px); /* 100% Sichtfeld minus die 120px Header-Höhe */
    overflow: hidden;
    background-color: #000000;
}

/* Basis-Stil für die Slides */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fadeSlideshow 12s infinite ease-in-out; /* 12 Sekunden Gesamtschleife */
}

/* Bild 1 startet sofort sichtbar */
.slide-1 {
    animation-delay: 0s;
}

/* Bild 2 startet zeitversetzt */
.slide-2 {
    animation-delay: 5s; /* Wechselt nach der Hälfte der Gesamtzeit */
}

/* Die CSS-Animation für das langsame, weiche Hin- und Herblenden (Crossfade) */
@keyframes fadeSlideshow {
    0% { opacity: 0; }
    8% { opacity: 1; }   /* Nach 1 Sekunde voll da */
    42% { opacity: 1; }  /* Bleibt sichtbar */
    50% { opacity: 0; }  /* Blendet sanft aus */
    100% { opacity: 0; }
}

/* --- Inhalts-Sektion --- */
.section-arrival-content .content-section-fixed {
    padding-top: 0;
    padding-bottom: 0;
}

.section-arrival-content {
    padding: 80px 0 120px 0; /* Schön viel Platz nach oben und unten zum Footer */
    background-color: #ffffff;
}

.section-arrival-content h2 {
    margin-bottom: 50px;
    text-align: center;
}

/* Der Map-Wrapper sorgt für ein sauberes eckiges Finish der Google Map */
.map-wrapper {
    width: 100%;
    height: 450px;
    box-shadow: 0 0 1px rgba(0,0,0,0.1); /* Minimaler weicher Rahmen-Schatten */
}
.map-wrapper iframe {
    display: block;
    width: 100%;
    height: 100%;
}



/* ==========================================
   ONLINE BUCHEN PAGE
   ========================================== */

.section-booking-page {
    padding: 60px 0 120px 0; /* Angenehmer Abstand zum Header und großzügig nach unten zum Footer */
    background-color: #ffffff;
}

/* Der fixierte Container begrenzt auf Wunschbreite 1200px */
.booking-container-fixed {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* Sicherheitsabstand für kleinere Bildschirme */
}

/* Zentriert die H1 auf dieser Seite und gibt ihr Abstand zum Kalender */
.booking-container-fixed h1 {
    text-align: center;
    margin-bottom: 60px;
}

/* Wrapper für das externe Skript, falls Styling-Anpassungen nötig sind */
.booking-widget-wrapper {
    width: 100%;
    min-height: 600px; /* Verhindert ein "Springen" der Seite beim Laden des externen Kalenders */
}


/* --- Infobox auf der Buchungsseite --- */
.booking-info-box {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto 0 auto; /* 60px Abstand nach oben zum Kalender, zentriert */
    background-color: #e6e6e6;
    padding: 50px; /* Perfekte 50px-Einrückung umlaufend für den gesamten Inhalt */
}

.booking-info-box h2 {
    text-align: left; /* Überschrift bleibt in der Box linksbündig */
    margin-bottom: 20px; /* Abstand zum darunterliegenden Text */
}

.booking-info-box p {
    margin: 0; /* Setzt Standardabstände zurück, damit das 50px-Padding exakt wirkt */
}


/* ====================================================================
   DESKTOP HEADER-ABSTAND REPARATUR (FÜR ALLE SEITEN)
   ==================================================================== */
main, .content-wrapper {
    padding-top: 120px !important; /* Zwingt JEDES Haupt-Element auf dem Desktop unter das Menü */
}


/* ====================================================================
   RESPONSIVE ANPASSUNGEN (TABLETS - max-width: 992px)
   ==================================================================== */
@media (max-width: 992px) {
    /* Fullscreen-Splitting aufheben */
    .split-container, 
    .split-container.reverse {
        flex-direction: column !important; 
        min-height: auto !important;
        padding: 60px 20px !important; 
    }

    .split-col-text, 
    .split-col-gallery {
        width: 100% !important;
        padding: 0 !important;
    }

    .split-col-text {
        margin-bottom: 40px !important;
        text-align: center !important; 
        order: 1 !important; 
    }
    
    .split-col-gallery {
        order: 2 !important; 
    }
    
    .split-col-text h2 {
        text-align: center !important;
    }

    /* 3-Spalten-Layout (Komm herein...) auf 1 Spalte umbrechen */
    .grid-3-columns {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* Footer auf Tablets (2x2 Grid) */
    .site-footer {
        padding: 60px 40px !important;
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px 30px !important;
    }
}

/* ====================================================================
   RESPONSIVE ANPASSUNGEN (SMARTPHONES - max-width: 768px)
   ==================================================================== */
@media (max-width: 768px) {

    /* --- INDEX-SEITE MOBIL-CONTAINER --- */
    .intro-container {
        height: 100vh !important;
        height: 100dvh !important;
        width: 100vw !important;
        position: fixed !important;
        top: 0;
        left: 0;
    }

    /* --- APARTMENTS-SEITE HERO-BILD FIX --- */
    .hero-section {
        height: 45vh !important;                  /* Schöne, kompakte Höhe auf Handys */
        min-height: 280px !important;
        background-attachment: scroll !important; /* WICHTIGER FIX: Deaktiviert Parallax auf iOS (kein Riesen-Zoom mehr!) */
        background-size: cover !important;
        background-position: center center !important;
    }

    /* Schafft Platz für den gestapelten mobilen Header */
    body {
        padding-top: 240px !important; 
    }

    /* --- MOBIL-HEADER & MENÜ-REPAIR (KEIN RECHTS-OVERFLOW) --- */
    .site-header {
        position: fixed !important;
        height: auto !important;           /* Wächst flexibel mit den gestapelten Elementen */
        flex-direction: column !important; /* Logo oben, Menü darunter */
        padding: 15px 10px !important;
        gap: 12px !important;
    }

    .header-left {
        width: 100% !important;
        justify-content: center !important;
    }

    .header-logo {
        height: 60px !important; /* Etwas kompakter auf Handys */
        width: auto !important;
    }

    .header-center {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }

    /* Menü-Links untereinander stapeln, damit nichts rechts raussteht */
    .main-nav {
        flex-direction: column !important; 
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .main-nav a {
        font-size: 12px !important;
        white-space: normal !important; /* WICHTIG: Erlaubt Textumbruch, falls ein Display extrem schmal ist */
        letter-spacing: 0.1em !important;
        padding: 3px 0 !important;
        text-align: center !important;
    }

    .lang-switch {
        margin: 0 !important;
        padding-top: 2px !important;
    }

    /* Versteckt die Social-Buttons im mobilen Header für einen minimalistischen Look */
    .header-right {
        display: none !important; 
    }

    /* --- STUBE-GRID (3 SPALTEN UNTEREINANDER) --- */
    .row-block-grid {
        grid-template-columns: 1fr !important; /* Schaltet strikt auf 1 Spalte um */
        gap: 25px !important;
    }

    .row-block-grid .block-text {
        text-align: center !important;
        align-items: center !important;
        padding: 20px 10px !important;
    }
    
    .row-block-grid .block-text h3 {
        text-align: center !important;
    }

    .row-block-grid .block-img img {
        height: 260px !important; /* Verhindert endlose Verzerrung der Stuben-Bilder */
    }
    .promo-box h2 {
        font-size: 25px !important;       /* Etwas kompakter auf Handys */
        letter-spacing: 1.5px !important; /* Reduziert den großen Buchstabenabstand */
    }
}

/* ====================================================================
   RESPONSIVE ANPASSUNGEN (MINI-SMARTPHONES - max-width: 576px)
   ==================================================================== */
@media (max-width: 576px) {
    .site-footer {
        padding: 40px 20px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important; /* Footer komplett untereinander */
        text-align: center !important;
        gap: 35px !important;
    }
    
    .footer-col {
        align-items: center !important; 
    }

    .footer-links a {
        text-align: center !important; /* Rechtliche Links zentrieren */
    }
    
    .footer-buttons {
        align-items: center !important; /* Buttons zentrieren */
    }
}

/* ====================================================================
   RESPONSIVE ANPASSUNGEN (SMARTPHONES - max-width: 768px)
   ==================================================================== */
@media (max-width: 768px) {

    /* --- INDEX-SEITE MOBIL-CONTAINER --- */
    .intro-container {
        height: 100vh !important;
        height: 100dvh !important;
        width: 100vw !important;
        position: fixed !important;
        top: 0;
        left: 0;
    }

    /* --- APARTMENTS-SEITE HERO-BILD FIX --- */
    .hero-section {
        height: 45vh !important;
        min-height: 280px !important;
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    /* Kompakterer Abstand oben, da das Menü jetzt eingeklappt ist */
    body {
        padding-top: 100px !important; 
    }

    /* --- AD 2: HEADER & LOGO VERGRÖSSERN --- */
    .site-header {
        position: fixed !important;
        height: 80px !important;           /* Feste, schlanke Höhe im geschlossenen Zustand */
        flex-direction: row !important;    /* Logo und Hamburger nebeneinander */
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 20px !important;
        z-index: 9999 !important;
    }

    .header-left {
        width: auto !important;
        justify-content: flex-start !important;
    }

    .header-logo {
        height: 55px !important;          /* Ad 2: Schön groß und lesbar auf dem Smartphone */
        width: auto !important;
    }
/* --- AD 1: PURE CSS HAMBURGER SYSTEM (SICHTBAR) --- */
    /* Versteckt die technische Checkbox mobil */
    .menu-toggle-checkbox {
        display: none !important;
    }

/* Der Klick-Bereich für den Hamburger – Jetzt bombenfest rechts fixiert! */
    .hamburger-button {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 30px !important;
        height: 21px !important;
        cursor: pointer !important;
        z-index: 10001 !important;
        background: transparent !important;
        
        /* HIER IST DIE RETTUNG: Absolut oben rechts positionieren */
        position: absolute !important;
        right: 20px !important;
        top: 29px !important; /* Richtet den Button perfekt mittig zur Logo-Höhe aus */
    }

    /* Hier werden die 3 Striche gezeichnet */
    .hamburger-button span {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        background-color: #1a1a1a !important;
        border-radius: 2px !important;
        transition: all 0.3s ease-in-out !important;
    }

    /* Animiert die Hamburger-Striche zu einem "X" bei Klick (bleibt am Platz!) */
    .menu-toggle-checkbox:checked + .hamburger-button span:nth-child(1) {
        transform: translateY(9px) rotate(45deg) !important;
    }
    .menu-toggle-checkbox:checked + .hamburger-button span:nth-child(2) {
        opacity: 0 !important;
    }
    .menu-toggle-checkbox:checked + .hamburger-button span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg) !important;
    }

    /* Das eigentliche Menü-Center standardmäßig verstecken */
    .header-center {
        position: fixed !important;
        top: 80px;
        left: 0;
        width: 100vw !important;
        height: 0 !important;             
        background-color: rgba(255, 255, 255, 0.98) !important;
        flex-direction: column !important;
        overflow: hidden !important;
        transition: height 0.35s ease-in-out !important;
        box-shadow: 0 10px 15px rgba(0,0,0,0.05);
        gap: 20px !important;
        padding: 0 20px !important;
    }

    .main-nav {
        flex-direction: column !important; 
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    .main-nav a {
        font-size: 14px !important;        
        white-space: nowrap !important; 
        letter-spacing: 0.1em !important;
        padding: 5px 0 !important;
    }

    .lang-switch {
        margin: 10px 0 20px 0 !important;
    }

    /* Setzt die Social-Buttons mobil elegant ganz unten ins geöffnete Menü */
    .header-right {
        display: none !important; /* Standardmäßig im geschlossenen Zustand unsichtbar */
        justify-content: center !important;
        gap: 20px !important;
        width: 100% !important;
        margin-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* MAGIE: Sobald das Menü geöffnet wird, blenden wir die Buttons weich ein */
    .menu-toggle-checkbox:checked ~ .header-right {
        display: flex !important;
    }

    /* Sorgt dafür, dass die Bild-Icons auf dem Handy eine schöne, tastbare Größe haben */
    .header-right .social-icon img {
        width: 24px !important;
        height: auto !important;
    }

/* MAGIE: Wenn die Checkbox aktiv (geklickt) ist, öffne das Menü sanft */
    .menu-toggle-checkbox:checked ~ .header-center {
        height: auto !important;          /* Lässt das Menü aufklappen */
        overflow: visible !important;     /* Macht die Menüpunkte sichtbar! */
        display: flex !important;         /* Aktiviert das Flexbox-Layout für die Links */
        padding-top: 20px !important;
        padding-bottom: 30px !important;
    }


    /* --- AD 3: "ÜBER UNS" SECTION UMREIHEN (BILD OBEN, TEXT UNTEN) --- */
    .split-50-50 {
        display: flex !important;
        flex-direction: column !important; /* Schaltet das Grid auf eine vertikale Flex-Box um */
    }

    .column-image {
        order: 1 !important;               /* Ad 3: Das Bild erzwingt die erste Position ganz oben */
        width: 100% !important;
        margin-bottom: 25px !important;
    }

    .column-text {
        order: 2 !important;               /* Ad 3: Der Text rutscht automatisch sauber darunter */
        width: 100% !important;
        text-align: center !important;
    }

    /* --- AD 4: BILDERGALERIEN AUF 2 SPALTEN ÄNDERN --- */
    .image-grid-6 {
        grid-template-columns: repeat(2, 1fr) !important; /* Ad 4: Genau 2 Bilder nebeneinander */
        gap: 12px !important;                             /* Schöner, harmonischer Abstand */
    }

    /* --- STUBE-GRID (3 SPALTEN UNTEREINANDER) --- */
    .row-block-grid {
        grid-template-columns: 1fr !important; 
        gap: 25px !important;
    }

    .row-block-grid .block-text {
        text-align: center !important;
        align-items: center !important;
        padding: 20px 10px !important;
    }
    
    .row-block-grid .block-text h3 {
        text-align: center !important;
    }

    .row-block-grid .block-img img {
        height: 260px !important; 
    }

/* Wunsch 1: Halbe Hero-Section perfekt für Mobilbildschirme optimieren */
    .hero-section-half {
        width: 100vw !important;
        max-width: 100% !important;
        height: 35vh !important;       /* Angenehme, kompaktere Höhe auf dem Smartphone */
        min-height: 220px !important;
        background-attachment: scroll !important; /* Verhindert Ruckeln beim Scrollen auf iOS */
        background-size: cover !important;
        background-position: center center !important;
    }

/* Wunsch 2: Info-Splits mobil untereinander statt nebeneinander */
    .split-50-50-info {
        display: flex !important;
        flex-direction: column !important; /* Schaltet von nebeneinander auf untereinander um */
        gap: 20px !important;              /* Schöner Abstand zwischen Bild und Text */
        width: 100% !important;
    }

    .split-50-50-info .column-text,
    .split-50-50-info .column-image {
        width: 100% !important;            /* Nutzt die volle Bildschirmbreite aus */
        text-align: center !important;     /* Zentriert den Text für bessere mobile Lesbarkeit */
    }

    /* Wunsch 3: Verhindert das Herausragen von Text in der Highlight-Box */
    .highlight-box {
        width: 100% !important;
        padding: 30px 20px !important;    /* Etwas kompakterer Innenabstand auf Handys */
    }

    .highlight-box h2 {
        font-size: 24px !important;       /* Kleinere, sichere Schriftgröße für Mobilgeräte */
        line-height: 1.3 !important;
        word-wrap: break-word !important; /* Sicherheitshalber: Erlaubt automatischen Umbruch bei extrem langen Wörtern */
        hyphens: auto !important;         /* Aktiviert automatische Silbentrennung, falls nötig */
        text-align: center !important;
    }

    /* --- OPTIMIERUNG DER ABSTÄNDE (PADDING & INFOSPLITS) --- */
    
    /* 1. Viel kompakterer Abstand für Bild-Container in den Info-Splits (auch Intro) */
    .column-info-img {
        padding: 5px !important;       /* Reduziert den riesigen Freiraum um die Bilder drastisch */
        margin-bottom: 10px !important;
    }

    .column-info-img img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* 2. 75/25 Sektion mobil sauber untereinander anordnen */
    .split-75-25 {
        display: flex !important;
        flex-direction: column !important; /* Schaltet von nebeneinander auf untereinander um */
        gap: 20px !important;
    }

    .split-75-25 .column-text,
    .split-75-25 .column-sidebar {
        width: 100% !important;            /* Nutzt die volle Breite */
        text-align: center !important;     /* Macht Texte mobil harmonischer lesbar */
    }

    /* 3. h2 in der highlight-box3 bändigen & Padding reduzieren */
    .highlight-box3 {
        width: 100% !important;
        padding: 25px 15px !important;    /* Viel weniger Platzverschwendung auf Handys */
    }

    .highlight-box3 h2 {
        font-size: 24px !important;       /* Schützt vor dem Herausragen aus dem Bildschirm */
        line-height: 1.3 !important;
        word-wrap: break-word !important; /* Erzwingt Umbruch bei ultralangen Wörtern */
        hyphens: auto !important;         /* Silbentrennung als Fangnetz */
        text-align: center !important;
    }

    /* 4. Mehr Atemnot-Schutz für die simple Info-Section (Abstand zum Screen-Rand) */
    .section-info-simple {
        padding: 40px 20px !important;    /* Vergrößert den Abstand nach links und rechts zum Displayrand */
    }

    .section-info-simple .content-section-fixed {
        padding: 0 10px !important;
    }

    /* 5. Button-Reihen untereinander stapeln */
    .button-row-container {
        display: flex !important;
        flex-direction: column !important; /* Buttons untereinander statt gequetscht nebeneinander */
        gap: 15px !important;              /* Angenehmer Abstand, damit man sich nicht verklickt */
        width: 100% !important;
        align-items: center !important;    /* Zentriert die Buttons auf dem Bildschirm */
    }

    .button-row-container .btn-grey-flat {
        width: 100% !important;            /* Macht die Buttons vollflächig tippbar (bessere Ergonomie) */
        max-width: 320px !important;       /* Verhindert, dass sie auf großen Handys zu lang gezogen werden */
        text-align: center !important;
    }


/* --- ZUSÄTZLICHE PADDING-REDUZIERUNG FÜR BILDER & SPALTEN --- */

    /* 1. Kompakteres Padding für alle 50-50 Info-Spalten */
    .split-50-50-info {
        padding: 5px 0 !important;         /* Entfernt riesige Abstände oben und unten */
    }

    .split-50-50-info .column-text {
        padding: 15px 10px !important;     /* Hält den Text lesbar, klaut aber keinen Platz */
    }

    /* 2. Fix für die 75-25 Sektion (Blick auf Alt-Böckstein vergrößern) */
    .section-info-split-75-25 {
        padding: 20px 10px !important;     /* Schlankerer Außenabstand der gesamten Sektion */
    }

    .section-info-split-75-25 .content-section-fixed {
        padding: 0 !important;
    }

    /* Holt das Maximum aus der 25%-Bildspalte heraus */
    .column-25 {
        width: 100% !important;            /* Macht die Spalte mobil vollflächig */
        padding: 5px !important;           /* Minimiert das Padding, damit das Bild wachsen kann */
        margin-top: 15px !important;       /* Ein kleiner, sauberer Abstand zum Text darüber */
    }

    .column-25 img {
        width: 100% !important;            /* Zwingt das Bild, die komplette Breite zu nutzen */
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 2px !important;     /* Falls du abgerundete Ecken nutzt, bleibt das konsistent */
    }

    /* Falls die Textspalte daneben (75%) auch noch zu viel Platz raubt: */
    .column-75 {
        width: 100% !important;
        padding: 10px !important;
    }

    /* ====================================================================
       REPARIERTER FIX-BLOCK (FÜR INFORMATIONEN & ANREISE)
       ==================================================================== */

    /* --- SPECIFIC FIX FOR INTRO-SECTION (FRAU IM SCHNEE) --- */
    .section-info-intro {
        padding: 30px 10px !important;
    }

    .section-info-intro .content-section-fixed {
        padding: 0 !important;
    }

    .section-info-intro .column-info-img {
        padding: 5px !important;
        margin-top: 15px !important;
        width: 100% !important;
    }

    .section-info-intro .column-info-img img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .section-info-intro .column-info-text {
        padding: 15px 15px !important;
        text-align: center !important;
        width: 100% !important;
    }


    /* --- SPECIFIC FIXES FOR ANREISE-PAGE --- */
    
    /* Slider-Bilder & Container perfekt auf volle Bildschirmbreite */
    .slider-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto 20px auto !important;
        overflow: hidden !important;
    }

    .slider-container img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Split-Boxen auf volle Breite und untereinander */
    .section-anreise-split .split-50-50,
    .section-anreise-simple .split-50-50 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 10px 0 !important;
    }

    /* Alle Textspalten mobil schön zentrieren (Verhindert das Linkskleben) */
    .section-anreise-split .column-text,
    .section-anreise-simple .column-text,
    .section-anreise-simple .column-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 15px !important;  
        text-align: center !important;   
    }

    /* Listen und h2 auf Anreise zentrieren */
    .section-anreise-split h2,
    .section-anreise-simple h2,
    .section-anreise-simple ul {
        text-align: center !important;
        list-style-position: inside !important; 
    }

/* ====================================================================
       FINALER FIX FÜR DIE ANREISE-SEITE (EXAKTE KLASSEN-ANPASSUNG)
       ==================================================================== */

    /* 1. Verhindert radikal, dass irgendetwas nach rechts ausbricht */
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important; 
    }

    /* 2. DIE SLIDESHOW: Holt die Diashow in den sichtbaren Smartphone-Bildschirm */
    .arrival-slideshow-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 35vh !important;       /* Eine kompakte, schöne Höhe für Handydisplays */
        min-height: 250px !important;
        margin: 0 !important;
        padding: 0 !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Zwingt die Hintergrundbilder in der Slideshow, mobil vollflächig reinzupassen */
    .arrival-slideshow-container .slide {
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important; /* Verhindert Ruckeln auf iPhones */
    }

    /* 3. DER CONTENT-RETTER: Befreit den Inhalt aus dem starren Desktop-Käfig */
    .section-arrival-content {
        padding: 30px 0 !important;    /* Angenehmer Abstand nach oben und unten */
        width: 100% !important;
        max-width: 100% !important;
    }

    .section-arrival-content .content-section-fixed {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;    /* Der goldene Sicherheitsabstand (Padding) zum linken und rechten Displayrand! */
        box-sizing: border-box !important;
    }

    /* Stapelt alle Split-Boxen auf der Anreise-Seite sauber untereinander */
    .section-arrival-content .split-50-50 {
        display: flex !important;
        flex-direction: column !important; /* Untereinander statt gequetscht nebeneinander */
        width: 100% !important;
        gap: 25px !important;              /* Schöner Luftraum zwischen den Blöcken */
    }

    /* Zentriert die Textspalten und Seiteninhalte für perfekte mobile Lesbarkeit */
    .section-arrival-content .column-text,
    .section-arrival-content .column-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;             /* Löscht Desktop-Paddings, die das Ganze verzerren */
        text-align: center !important;     /* Verhindert das Linkskleben optisch komplett */
    }

    /* Richtet auch die Anreise-Überschriften und Listen sauber mittig aus */
    .section-arrival-content h2,
    .section-arrival-content h3,
    .section-arrival-content ul {
        text-align: center !important;
        list-style-position: inside !important; /* Setzt Aufzählungspunkte nach innen, damit sie mitzentrieren */
    }

/* ====================================================================
       FINALE ANPASSUNG FÜR DIE ANREISE-INHALTE
       ==================================================================== */

    /* 1. Stapelt die Info-Spalten sauber untereinander */
    .section-arrival-content .split-50-50-info {
        display: flex !important;
        flex-direction: column !important; 
        width: 100% !important;
        gap: 20px !important;              
    }

    /* 2. TEXT-FIX: Macht den Text linksbündig für optimale Lesbarkeit */
    .section-arrival-content .column-info-text,
    .section-arrival-content .column-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 15px !important;    /* Hält den Sicherheitsabstand zum Displayrand */
        text-align: left !important;       /* ÄNDERUNG: Macht den Fließtext linksbündig */
        box-sizing: border-box !important;
    }

    /* Sorgt dafür, dass auch Absätze und Listen linksbündig stehen */
    .section-arrival-content .column-info-text p,
    .section-arrival-content .column-info-text ul {
        text-align: left !important;
        list-style-position: outside !important; /* Setzt Aufzählungspunkte nach außen */
        padding-left: 20px !important;           /* Schafft Platz für die Bulletpoints */
    }

    /* Überschriften lassen wir für die Optik mobil gern zentriert, falls gewünscht - sonst hier entkommentieren: */
    /* .section-arrival-content h2, .section-arrival-content h3 { text-align: left !important; } */


    /* 3. GOOGLE MAPS FIX: Bringt die Karte auf absolute Bildschirmbreite */
    
    /* Entfernt Ränder der Spalte, in der die Map sitzt */
    .section-arrival-content .column-info-img {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;             /* Killt jegliches Padding links/rechts */
        margin: 25px 0 0 0 !important;     /* Nur Abstand nach oben zum Text */
    }

    /* Der Wrapper um das Iframe dehnt sich voll aus */
    .section-arrival-content .map-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Das Iframe selbst füllt das Display komplett */
    .section-arrival-content .map-wrapper iframe {
        width: 100% !important;
        display: block !important;
        height: 400px !important;          /* Angenehmere, kompakte Höhe fürs Smartphone */
        border: 0 !important;
    }

    /* ====================================================================
       SPEZIFISCHE OPTIMIERUNGEN FÜR DIE KONTAKT-SEITE
       ==================================================================== */

    /* 1. Reduziert das wuchtige Padding der gesamten Sektion drastisch */
    .section-contact-page {
        padding: 25px 0 !important; /* Wenig Abstand nach oben/unten statt dem Desktop-Riesenabstand */
        width: 100% !important;
    }

    /* 2. Stapelt die Kontaktspalten (z.B. Text & Kontaktformular/Bild) untereinander */
    .section-contact-page .split-50-50-info {
        display: flex !important;
        flex-direction: column !important; /* Vertikal stapeln */
        width: 100% !important;
        gap: 20px !important;              /* Harmonischer Luftraum zwischen den Blöcken */
    }

    /* 3. Setzt die Spaltenbreite auf 100% und optimiert das Padding für Ränder */
    .section-contact-page .column-info-text,
    .section-contact-page .column-info-img,
    .section-contact-page .column-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 15px !important;    /* Perfekter, schlanker Sicherheitsabstand zum Displayrand */
        box-sizing: border-box !important;
        text-align: left !important;       /* Hält den Text klassisch linksbündig lesbar */
    }

    /* Falls ein Bild oder Formular in der Image-Spalte sitzt, soll es vollflächig wirken */
    .section-contact-page .column-info-img img,
    .section-contact-page .column-info-img form {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Richtet Absätze und Listen auf der Kontaktseite sauber aus */
    .section-contact-page p,
    .section-contact-page ul {
        text-align: left !important;
        margin-bottom: 15px !important;
    }

/* ====================================================================
       FINALE ANPASSUNG FÜR DIE ONLINE-BUCHEN SEITE (KEIN UMBRUCH)
       ==================================================================== */

    /* Die Infobox bekommt mobil mehr Platz nach außen, um innen Breite zu gewinnen */
    .booking-info-box {
        padding: 12px 10px !important;    /* Weniger Padding links/rechts gibt dem Text mehr Raum */
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Zwingt die Überschrift, am Stück zu bleiben */
    .booking-info-box h2 {
        font-size: 20px !important;       /* Minimal verkleinert, damit das Wort in eine Zeile passt */
        line-height: 1.3 !important;
        text-align: left !important;
        width: 100% !important;
        
        /* Verhindert jegliche automatische Trennung oder erzwungene Umbrüche */
        hyphens: none !important;         
        word-wrap: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;   /* Erlaubt normalen Umbruch beim Leerzeichen (nach dem &), aber nicht im Wort */
    }

    /* ====================================================================
       FINALE ANPASSUNG FÜR RECHTLICHE SEITEN (STORNO & DATENSCHUTZ)
       ==================================================================== */

    /* Optimiert den äußeren Abstand der rechtlichen Textseiten mobil */
    .section-info-simple {
        padding: 25px 0 !important;       /* Kompakter Abstand nach oben/unten */
        width: 100% !important;
    }

    /* Sorgt dafür, dass der Textinhalt Ränder zum Bildschirmrand einhält */
    .section-info-simple .content-section-fixed {
        padding: 0 15px !important;       /* Eleganter Sicherheitsabstand links/rechts */
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Zwingt die riesigen h1-Überschriften in eine lesbare Größe ohne Umbruch-Zwang */
    .section-info-simple h1 {
        font-size: 20px !important;       /* Harmonische Größe für die Hauptüberschrift */
        line-height: 1.3 !important;
        text-align: left !important;      /* Schön linksbündig passend zum Text */
        width: 100% !important;
        margin-bottom: 20px !important;
        
        /* Verhindert unschöne Trennungen mitten im Wort */
        hyphens: none !important;         
        word-wrap: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;   /* Erlaubt natürlichen Umbruch bei Leerzeichen */
    }

    /* Richtet den Fließtext auf diesen Seiten sauber aus */
    .section-info-simple p,
    .section-info-simple br {
        text-align: left !important;
    }

    /* ====================================================================
       GLOBALER MENÜ-ÜBERLAGERUNGS-FIX (RESTORE TOP PADDING FOR FIXED HEADER)
       ==================================================================== */

    /* 1. Datenschutz, Stornobedingungen & Online-Buchen */
    .section-info-simple {
        padding-top: 120px !important;   /* Holt die 120px Abstand fürs Menü zurück */
        padding-bottom: 25px !important; /* Behält den kompakten Abstand nach unten */
    }

    /* 2. Kontaktseite */
    .section-contact-page {
        padding-top: 120px !important;   /* Schützt die Überschrift "KONTAKT" vor dem Menü */
        padding-bottom: 25px !important;
    }

    /* 3. Informationen-Seite (Der erste Block mit der Frau im Schnee) */
    .section-info-intro {
        padding-top: 120px !important;   /* Schützt den Intro-Text vor dem Menü */
        padding-bottom: 30px !important;
    }

    /* 4. Anreise-Seite (Slider / Slideshow ganz oben) */
    .slider-container,
    .arrival-slideshow-container {
        margin-top: 90px !important;     /* Schiebt den gesamten Slider sauber unter das mobile Menü */
    }

    /* Zwingt den Hauptcontainer aller Seiten, perfekt unter dem mobilen Menü zu starten */
    main.content-wrapper {
        padding-top: 155px !important;   /* Schafft genug Platz für das hohe mobile Menü */
    }

    /* Bereinigt die doppelten Padding-Fixes, damit die Sektionen wieder harmonisch wirken */
    .section-contact-page,
    .section-info-simple,
    .section-info-intro {
        padding-top: 10px !important;    /* Verhindert riesige Lücken, da der wrapper jetzt den Abstand hält */
        padding-bottom: 30px !important;
    }

    /* Sorgt dafür, dass der Slider auf der Anreiseseite ebenfalls den Abstand einhält */
    .slider-container,
    .arrival-slideshow-container {
        margin-top: 10px !important;     /* Da der content-wrapper jetzt schiebt, reicht hier ein Minimalabstand */
    }

}