/* ===========================
   RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#f7f5f1;
    color:#333;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

/* ===========================
/* ===========================
   NAVIGATION
=========================== */

/* ===========================
   NAVIGATION
=========================== */

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:90px;

    display:flex;
    align-items:center;

    padding:8px 22px;
    box-sizing:border-box;

    background:rgba(18,34,24,.72);
    backdrop-filter:blur(12px);

    z-index:999;
}


/* LOGO + HEIDEHAUS */

.logo{
    display:flex;
    align-items:center;
    gap:14px;

    flex:0 0 370px;

    margin:0;
    padding:0;
}

.logo img{
    width:65px;
    height:60px;
    min-width:65px;

    object-fit:contain;
    display:block;
}

.logo-text{
    white-space:nowrap;
}

.logo-text h2{
    margin:0;

    color:white;

    font-family:'Cormorant Garamond', serif;
    font-size:30px;
    line-height:1;
}

.logo-text p{
    margin:5px 0 0;

    color:#d5b67d;

    font-family:'Inter', sans-serif;
    font-size:13px;
    letter-spacing:4px;
    line-height:1;
}


/* NAVIGATION */

.menu{
    flex:1;

    display:flex;
    justify-content:center;
    align-items:center;

    gap:14px;

    margin:0;
    padding:0;

    min-width:0;
}

.menu a{
    color:white;

    font-family:'Inter', sans-serif;
    font-size:14px;
    font-weight:500;

    white-space:nowrap;

    transition:.3s;
}

.menu a:hover{
    color:#d5b67d;
}


/* BUCHUNGSBUTTON */

.navbar > .btn{
    flex:0 0 auto;

    margin-left:18px;

    padding:14px 22px;

    white-space:nowrap;

    font-size:14px;
}

/* ===========================
   BUTTONS
=========================== */

.btn{

    background:#b89258;

    color:white;

    padding:15px 30px;

    border-radius:10px;

    transition:.3s;

}

.btn:hover{

    background:#d2b47a;

}

.btn-outline{

    border:2px solid white;

    color:white;

    padding:15px 30px;

    border-radius:10px;

    margin-left:15px;

}

.btn-outline:hover{

    background:white;

    color:#264733;

}

/* ===========================
   HERO
=========================== */

.hero{

    min-height:100vh;

    background:

  linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.30)),

   url("Vorderansicht.jpeg");

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:white;

}

.hero-content{

    max-width:900px;

}

.hero h4{

    letter-spacing:8px;

    margin-bottom:20px;

    color:#d5b67d;

}

.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:110px;

    margin-bottom:20px;

}

.hero p{

    font-size:30px;

    margin-bottom:45px;

}

.hero-buttons{

    margin-top:25px;

}
/* ===========================
WELCOME
=========================== */

.welcome{

padding:120px 8%;

background:#F7F5F1;

}

.container{
    max-width:1300px;
    margin:auto;
}

.welcome-text{
    text-align:center;
    max-width:1100px;
    margin:0 auto;
}

.welcome-text span{

    color:#B89258;

    letter-spacing:5px;

    font-size:16px;

    font-weight:600;

}

.welcome-text h2{

font-family:'Cormorant Garamond',serif;

font-size:58px;

margin:20px 0;

color:#264733;

}

.welcome-text p{
    max-width:950px;
    margin:0 auto 45px;
    font-size:20px;
    line-height:1.9;
    color:#666;
}

.facts{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.fact{

background:white;

padding:30px;

border-radius:18px;

text-align:center;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.fact h3{

font-family:'Cormorant Garamond',serif;

font-size:38px;

color:#264733;

margin-bottom:8px;

}
/* ===========================
   ROOMS
=========================== */

.rooms{

    padding:120px 4%;

    background:white;

}

.section-title{
    text-align:center;
    max-width:800px;
    margin:auto auto 25px;
}

.section-title span{

    color:#B89258;

    letter-spacing:4px;

    font-size:14px;

    font-weight:600;

}

.section-title h2{

    font-family:'Cormorant Garamond',serif;

    font-size:58px;

    color:#264733;

    margin:18px 0;

}

.section-title p{

    color:#666;

    font-size:20px;

}

.room-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

.room-card{
    background:white;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
    transition:.3s;
    min-width:0;
}

.room-card:hover{

    transform:translateY(-10px);

}

.room-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}

.room-content{
    padding:22px 14px 28px;
    text-align:center;
}

.room-content h3{
    font-family:'Cormorant Garamond',serif;
    font-size:25px;
    color:#264733;
    margin:0 0 15px;
    line-height:1.2;
    white-space:nowrap;
    text-align:center;
}

.room-content p{
    color:#666;
    line-height:1.7;
    margin:0;
    overflow-wrap:break-word;
    word-break:normal;
}
/* ===========================
   RESTAURANT
=========================== */

.restaurant{

    padding:120px 8%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    background:#F7F5F1;

}

.restaurant-image img{
    width:100%;
    max-height:450px;
    object-fit:cover;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.restaurant-text span{

    color:#B89258;

    letter-spacing:4px;

    font-weight:600;

}

.restaurant-text h2{

    font-family:'Cormorant Garamond',serif;

    font-size:60px;

    color:#264733;

    margin:20px 0;

}

.restaurant-text p{

    font-size:20px;

    line-height:1.9;

    color:#666;

    margin-bottom:40px;

}

@media(max-width:900px){

.restaurant{

grid-template-columns:1fr;

}

.restaurant-text{

order:2;

}

}
/* ===========================
   KEGELBAHNEN
=========================== */

.bowling{

    padding:120px 8%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    background:white;

}

.bowling-image img{

    width:100%;

    border-radius:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.bowling-text span{

    color:#B89258;

    letter-spacing:4px;

    font-size:14px;

    font-weight:600;

}

.bowling-text h2{

    font-family:'Cormorant Garamond',serif;

    font-size:58px;

    color:#264733;

    margin:20px 0;

}

.bowling-text p{

    font-size:20px;

    color:#666;

    line-height:1.9;

    margin-bottom:35px;

}

.bowling-info{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.bowling-info div{

    background:#F7F5F1;

    padding:18px;

    border-radius:12px;

    font-weight:600;

}
/* ===========================
   FEIERN
=========================== */

.events{

    padding:120px 8%;

    background:#F7F5F1;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.events-image img{

    width:100%;
    height:400px;
    object-fit:cover;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.12);

}
.events-text span{

    color:#B89258;

    letter-spacing:4px;

    font-size:14px;

    font-weight:600;

}

.events-text h2{

    font-family:'Cormorant Garamond',serif;

    font-size:58px;

    color:#264733;

    margin:20px 0;

}

.events-text p{

    color:#666;

    font-size:20px;

    line-height:1.9;

    margin-bottom:35px;

}

.event-boxes{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:35px;

}

.event-boxes div{

    background:white;

    padding:18px;

    border-radius:12px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    font-weight:600;

}
/* ===========================
   GALERIE
=========================== */

/* ===========================
   GALERIE SLIDER
=========================== */

.gallery {
    padding: 120px 8%;
    background: white;
}

.gallery-slider {
    position: relative;
    max-width: 1100px;
    margin: 50px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-slides {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
}

.gallery-slide {
    display: none;
    width: 100%;
}

.gallery-slide.active {
    display: block;
}

.gallery-slide img,
.gallery-slide video {
    display: block;
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,.12);
}

.gallery-prev,
.gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 68px;
    height: 68px;

    border: none;
    border-radius: 50%;

    background: #264733;
    color: white;

    font-size: 42px;
    line-height: 1;

    cursor: pointer;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .3s;
}

.gallery-prev {
    left: -35px;
}

.gallery-next {
    right: -35px;
}

.gallery-prev:hover,
.gallery-next:hover {
    background: #B89258;
    transform: translateY(-50%) scale(1.05);
}

.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.gallery-dot {
    width: 9px;
    height: 9px;
    padding: 0;

    border: none;
    border-radius: 50%;

    background: #ccc;
    cursor: pointer;
}

.gallery-dot.active {
    background: #B89258;
}

@media (max-width: 900px) {

    .gallery {
        padding: 90px 5%;
    }

    .gallery-slide img,
    .gallery-slide video {
        height: 450px;
    }

    .gallery-prev {
        left: 10px;
    }

    .gallery-next {
        right: 10px;
    }

}

@media (max-width: 600px) {

    .gallery-slide img,
    .gallery-slide video {
        height: 350px;
    }

    .gallery-prev,
    .gallery-next {
        width: 50px;
        height: 50px;
        font-size: 30px;
    }

}
/* ===========================
   GALERIE MOBILE
=========================== */

@media(max-width:900px){

    .gallery{
        padding:80px 5%;
    }

    .gallery-slider{
        gap:10px;
    }

    .gallery-slide img,
    .gallery-slide video{
        height:400px;
    }

    .gallery-prev,
    .gallery-next{
        flex:0 0 45px;

        width:45px;
        height:45px;

        font-size:30px;
    }

}
/* ===========================
ANREISE
=========================== */

.arrival{

padding:120px 8%;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

background:#F7F5F1;

}

.arrival span{

color:#B89258;

letter-spacing:4px;

font-weight:600;

}

.arrival h2{

font-size:58px;

font-family:'Cormorant Garamond',serif;

color:#264733;

margin:20px 0;

}

.arrival p{

font-size:19px;

line-height:1.8;

color:#666;

}

.arrival-box{

background:white;

padding:25px;

border-radius:16px;

margin-top:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.arrival-box h3{

margin-bottom:12px;

color:#264733;

}

.arrival iframe{

width:100%;

height:550px;

border:0;

border-radius:20px;

box-shadow:0 20px 50px rgba(0,0,0,.12);

}
/* ===========================
KONTAKT
=========================== */

.contact{

padding:120px 8%;

background:white;

}

.contact-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin:60px 0;

}

.contact-card{

background:#F7F5F1;

padding:30px;

border-radius:18px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.contact-card h3{

margin-bottom:15px;

color:#264733;

}

.contact-form{

display:flex;

flex-direction:column;

gap:20px;

max-width:900px;

margin:auto;

}

.contact-form input,
.contact-form textarea{

padding:18px;

border:1px solid #ddd;

border-radius:12px;

font-size:16px;

font-family:inherit;

}

.contact-form textarea{

height:180px;

resize:none;

}

footer{

background:#1F3326;

color:white;

padding:70px 20px;

text-align:center;

}

.footer-content h2{

font-family:'Cormorant Garamond',serif;

font-size:44px;

margin-bottom:15px;

}
/* ===========================
ÖFFNUNGSZEITEN
=========================== */

.opening-hours{

    margin-top:90px;

    background:#F7F5F1;

    padding:60px;

    border-radius:25px;

}

.opening-hours span{

    color:#B89258;

    letter-spacing:4px;

    font-weight:600;

}

.opening-hours h2{

    font-family:'Cormorant Garamond',serif;

    font-size:54px;

    color:#264733;

    margin:15px 0 40px;

}

.opening-hours table{

    width:100%;

    border-collapse:collapse;

}

.opening-hours td{

    padding:18px 0;

    border-bottom:1px solid #ddd;

    font-size:19px;

}

.opening-hours td:first-child{

    font-weight:700;

    color:#264733;

    width:220px;

}
/* ===========================
KONTAKT BUTTONS
=========================== */

.contact-actions{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    margin-top:70px;

}

.action-btn{

    background:#264733;

    color:white;

    padding:28px;

    border-radius:18px;

    text-align:center;

    font-size:20px;

    font-weight:600;

    transition:.3s;

}

.action-btn:hover{

    background:#B89258;

    transform:translateY(-5px);

}
/* ===========================
FOOTER
=========================== */

.footer{

    background:#1F3326;

    color:white;

    padding:80px 8% 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:60px;

    margin-bottom:50px;

}

.footer h2{

    font-family:'Cormorant Garamond',serif;

    font-size:46px;

    margin-bottom:20px;

}

.footer h3{

    margin-bottom:20px;

    color:#D6B173;

}

.footer p{

    line-height:1.9;

}

.footer a{

    color:white;

    transition:.3s;

}

.footer a:hover{

    color:#D6B173;

}

.copyright{

    text-align:center;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.15);

    color:#bbb;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 992px){

.navbar{

    padding:20px 30px;
    flex-wrap:wrap;

}

.menu{

    display:none;

}

.hero h1{

    font-size:70px;

}

.hero p{

    font-size:24px;

}

.container,
.restaurant,
.bowling,
.events,
.arrival{

    grid-template-columns:1fr;
    gap:50px;

}
.room-grid{ 
    grid-template-columns:repeat(2,1fr); 
}

.gallery-grid, 
.contact-grid, 
.footer-grid, 
.contact-actions{ 

    grid-template-columns:1fr; 

}
.gallery-grid,
.contact-grid,
.footer-grid,
.contact-actions{

    grid-template-columns:1fr;

}

.section-title h2,
.welcome-text h2,
.restaurant-text h2,
.bowling-text h2,
.events-text h2,
.arrival h2,
.opening-hours h2{

    font-size:42px;

}

.hero-buttons{

    display:flex;
    flex-direction:column;
    gap:15px;

}

.btn-outline{

    margin-left:0;

}

.opening-hours{

    padding:35px;

}

.opening-hours td{

    display:block;
    width:100%;
    padding:10px 0;

}

.footer{

    text-align:center;

}

}
.rooms,
.restaurant,
.bowling,
.events,
.gallery,
.arrival,
.contact{
    scroll-margin-top:120px;
}
/* ===========================
   IMPRESSUM & DATENSCHUTZ
=========================== */

.legal-page{

    padding:180px 8% 100px;

    background:#F7F5F1;

    min-height:100vh;

}

.legal-page .container{

    display:block !important;
    max-width:900px;
    margin:0 auto;
    background:white;
    padding:60px;
    border-radius:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);

}
.legal-page h1,
.legal-page h2,
.legal-page p{

    text-align:left;

}

.legal-page h1{

    font-family:'Cormorant Garamond',serif;

    font-size:60px;

    color:#264733;

    margin-bottom:40px;

}

.legal-page h2{

    margin-top:30px;
    margin-bottom:10px;
    color:#B89258;
    font-size:28px;

}

.legal-page p{

    margin-bottom:20px;
    line-height:1.8;

}

.legal-page a{

    color:#264733;

    font-weight:600;

}

.legal-page a:hover{

    color:#B89258;

}
/* ===========================
   ZURÜCK-BUTTON
=========================== */

.back-button{

    max-width:1000px;
    margin:20px auto 0;
    padding:0;

}


.back-button a{

    background:#264733;
    color:#fff;
    padding:14px 28px;
    border-radius:50px;
    font-size:16px;
    font-weight:600;
    text-decoration:none;

}
/* ==========================================
   MOBILE NAVIGATION
========================================== */

.menu-toggle{
    display:none;
    font-size:32px;
    color:white;
    cursor:pointer;
}

@media (max-width:900px){

    .navbar{
        padding:18px 20px;
        position:fixed;
    }

    .menu-toggle{
        display:block;
    }

    .navbar .btn{
        display:none;
    }

    .menu{
        position:absolute;
        top:100%;
        left:0;

        width:100%;

        display:none;
        flex-direction:column;
        align-items:center;

        background:#264733;

        padding:25px 0;

        gap:20px;
    }

    .menu.active{
        display:flex;
    }

    .menu a{
        color:white;
        font-size:18px;
    }


}
/* ===========================
   AKTUELLES
=========================== */

.news{

    padding:120px 8%;
    background:#F7F5F1;
    text-align:center;

}

.news-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin:60px 0;

}

.news-card{
    background:white;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.3s;
    text-align:center;
    display:flex;
    flex-direction:column;
    min-height:380px;
}

.news-card:hover{
    transform:translateY(-8px);
}

.news-card img{
    width:100%;
    height:210px;
    object-fit:cover;
    display:block;
}

.news-card h3{
    color:#B89258;
    margin:22px 0 0;
    font-size:18px;
}

.news-card h4{
    font-family:'Cormorant Garamond',serif;
    font-size:30px;
    color:#264733;
    margin:10px 0;
}

.news-card p{
    padding:0 20px 20px;
    color:#666;
    line-height:1.6;
    margin:0;
}
.news-card .btn{
    display:inline-block;
    align-self:center;
    width:auto;
    margin:5px 20px 20px;
    padding:12px 25px;
}

@media(max-width:992px){

.news-grid{

grid-template-columns:1fr;

}

}
/* ===========================
AKTUELLES VORSCHAU
=========================== */

.news-preview{

    padding:100px 8%;
    background:#F7F5F1;
    text-align:center;

}

.preview-box{

    max-width:700px;
    margin:40px auto 0;
    background:white;
    padding:45px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.preview-box p{

    font-size:20px;
    margin:18px 0;
    color:#555;

}

.preview-box .btn{

    margin-top:30px;
    display:inline-block;

}
/* ===========================
AKTUELLES VORSCHAU
=========================== */

.news-preview{

    padding:100px 8%;
    background:#F7F5F1;
    text-align:center;

}

.preview-box{

    max-width:750px;
    margin:40px auto 0;
    background:white;
    padding:45px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.preview-box p{

    font-size:20px;
    margin:18px 0;
    color:#555;

}

.preview-box .btn{

    display:inline-block;
    margin-top:30px;

}
.news-highlight{
    max-width:900px;
    margin:40px auto;
    background:#264733;
    color:white;
    padding:40px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.news-highlight span{
    display:inline-block;
    background:#D5B67D;
    color:#264733;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:20px;
}

.news-highlight h3{
    color:white;
    font-size:42px;
    margin:20px 0;
    font-family:'Cormorant Garamond', serif;
}

.news-highlight p{
    color:white;
    font-size:20px;
    line-height:1.7;
    max-width:700px;
    margin:0 auto;
}

/* ===========================
   NAVBAR BEIM SCROLLEN
=========================== */

.navbar.scrolled{
    height:80px;
    padding:8px 35px;

    background:rgba(38,71,51,.95);
    backdrop-filter:blur(18px);
    box-shadow:0 8px 25px rgba(0,0,0,.18);

    transition:all .35s ease;
}

.navbar.scrolled .menu{

    gap:20px;

}

/* =========================
   SPEISEKARTE
========================= */

.speisekarte-hinweis{
    text-align:center;
    margin:70px auto 30px;
    padding:35px 20px;
    max-width:800px;
}

.speisekarte-hinweis h3{
    font-family:'Cormorant Garamond', serif;
    font-size:32px;
    color:#264733;
    margin:0 0 10px;
}

.speisekarte-hinweis p{
    color:#666;
    font-size:17px;
    line-height:1.6;
    margin:0 0 20px;
}

.speisekarte-hinweis .btn{
    display:inline-block;
    padding:13px 30px;
}
.zurück-btn{
    margin-left:20px;
}
.gallery-title{
    text-align:center;
    margin-bottom:50px;
}

.gallery-title span{
    color:#B89258;
    letter-spacing:5px;
    font-weight:bold;
}

.gallery-title h2{
    font-family:'Cormorant Garamond',serif;
    font-size:52px;
    color:#264733;
    margin:15px 0;
}

.gallery-title p{
    color:#666;
    font-size:18px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.gallery-item{
    overflow:hidden;
    border-radius:20px;
    background:white;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.gallery-item img,
.gallery-item video{
    width:100%;
    height:280px;
    display:block;
    object-fit:cover;
}

.gallery-item img{
    transition:transform .4s ease;
}

.gallery-item:hover img{
    transform:scale(1.04);
}

.gallery-item video{
    object-fit:cover;
}
/* Beerdigungskaffee */

#beerdigung{
    padding:100px 8%;
    background:#f8f6f2;
}

.beerdigung-content{
    display:flex;
    align-items:center;
    gap:70px;
    max-width:1400px;
    margin:0 auto;
}

.beerdigung-image{
    flex:1;
}

.beerdigung-image img{
    width:100%;
    max-height:450px;
    object-fit:cover;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.beerdigung-text{
    flex:1;
}

.beerdigung-text span{
    color:#B89258;
    letter-spacing:5px;
    font-weight:bold;
}

.beerdigung-text h2{
    font-family:'Cormorant Garamond',serif;
    font-size:52px;
    color:#264733;
    margin:15px 0 25px;
}

.beerdigung-text p{
    color:#666;
    line-height:1.8;
    font-size:17px;
    margin-bottom:15px;
}

.beerdigung-video{
    max-width:900px;
    margin:70px auto 0;
    text-align:center;
}

.beerdigung-video h3{
    font-family:'Cormorant Garamond',serif;
    color:#264733;
    font-size:32px;
    margin-bottom:25px;
}

.beerdigung-video video{
    width:100%;
    max-width:800px;
    max-height:450px;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}
.back-to-top{
    position:fixed;
    right:30px;
    bottom:30px;

    width:50px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#B89258;
    color:white;

    border-radius:50%;
    text-decoration:none;

    font-size:24px;
    font-weight:bold;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

    z-index:1000;

    transition:.3s;
}

.back-to-top:hover{
    transform:translateY(-5px);
}
@media (max-width:600px){

    .room-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .room-card img{
        height:260px;
    }

    .room-content h3{
        font-size:32px;
    }

}
/* ===========================
   FINAL NAVIGATION FIX
=========================== */

.navbar{
    height:90px;
    padding:8px 22px;
    box-sizing:border-box;
}

/* Logo-Bereich */

.navbar .logo{
    display:flex;
    align-items:center;
    gap:14px;

    width:360px;
    min-width:360px;
    flex-shrink:0;

    margin-left:0;
    padding:0;
}

.navbar .logo img{
    width:65px !important;
    height:60px !important;
    min-width:65px;

    object-fit:contain;
    flex-shrink:0;
}

.navbar .logo-text{
    display:flex;
    flex-direction:column;
    justify-content:center;

    white-space:nowrap;
}

.navbar .logo-text h2{
    margin:0 !important;

    color:white;

    font-family:'Cormorant Garamond', serif;

    font-size:30px !important;
    line-height:1 !important;
}

.navbar .logo-text p{
    margin:5px 0 0 !important;

    color:#d5b67d;

    font-family:'Inter', sans-serif;

    font-size:13px !important;
    letter-spacing:4px !important;
    line-height:1 !important;
}


/* Navigation */

.navbar .menu{
    flex:1;

    display:flex;
    justify-content:center;
    align-items:center;

    gap:7px;

    margin:0;
    padding:0;

    min-width:0;
}

.navbar .menu a{
    color:white;

    font-family:'Inter', sans-serif;

    font-size:14px !important;
    font-weight:500;

    white-space:nowrap;
}


/* Buchungsbutton */

.navbar > .btn{
    flex:0 0 auto;

    margin-left:18px;

    padding:14px 22px;

    white-space:nowrap;

    font-size:14px !important;
}/* ===========================
   SPRACHWECHSEL
=========================== */

.language-switch{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    height:42px;
    padding:0 12px;

    margin-left:18px;
    margin-right:14px;

    border:1px solid rgba(255,255,255,.35);
    border-radius:10px;

    white-space:nowrap;
    flex-shrink:0;
}

.language-switch a{
    color:white;
    text-decoration:none;

    font-size:13px;
    font-weight:600;

    padding:5px 4px;

    transition:.3s;
}

.language-switch a:hover{
    color:#d5b67d;
}

.language-switch a.active{
    color:#d5b67d;
}

.language-switch span{
    color:rgba(255,255,255,.4);
}
/* Sprachschalter beim Scrollen ausblenden */
.navbar.scrolled .language-switch {
    display: none;
}
/* ==========================================
   MOBILE VERSION – FINAL
   ========================================== */

@media (max-width: 700px){

    /* =========================
       GRUNDLAGE
    ========================= */

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    /* =========================
       NAVIGATION
    ========================= */

    .navbar,
    .navbar.scrolled{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:72px;

        padding:8px 15px;

        display:flex;
        align-items:center;
        justify-content:space-between;

        background:rgba(18,34,24,.95);
        backdrop-filter:blur(12px);

        box-shadow:0 5px 20px rgba(0,0,0,.15);
    }

    /* Logo */

    .navbar .logo{
        width:auto;
        min-width:0;
        flex:1;

        display:flex;
        align-items:center;

        gap:8px;
        margin:0;
        padding:0;
    }

    .navbar .logo img{
        width:48px !important;
        height:48px !important;
        min-width:48px;

        object-fit:contain;
    }

    .navbar .logo-text{
        display:flex;
        flex-direction:column;
        justify-content:center;

        white-space:nowrap;
    }

    .navbar .logo-text h2{
        font-size:23px !important;
        line-height:1 !important;
    }

    .navbar .logo-text p{
        font-size:9px !important;
        letter-spacing:2.5px !important;

        margin-top:4px !important;
    }

    /* Hamburger */

    .menu-toggle{
        display:flex;

        width:44px;
        height:44px;

        align-items:center;
        justify-content:center;

        color:white;
        font-size:29px;

        cursor:pointer;

        flex-shrink:0;
    }

    /* Desktop-Navigation ausblenden */

    .navbar .menu{
        display:none;

        position:absolute;

        top:72px;
        left:0;

        width:100%;

        padding:20px 0 25px;

        margin:0;

        flex-direction:column;
        align-items:center;

        gap:0;

        background:#264733;

        box-shadow:0 12px 25px rgba(0,0,0,.2);
    }

    .navbar .menu.active{
        display:flex;
    }

    .navbar .menu li{
        width:100%;
        text-align:center;
    }

    .navbar .menu a{
        display:block;

        width:100%;

        padding:12px 20px;

        font-size:16px !important;
    }

    /* Zimmer buchen auf Mobile verstecken */

    .navbar > .btn{
        display:none !important;
    }

    /* Sprachumschalter */

    .language-switch{
        display:none;
    }

    .navbar.scrolled .language-switch{
        display:none;
    }


    /* =========================
       HERO
    ========================= */

    .hero{
        min-height:100svh;

        padding:90px 20px 50px;

        background-position:center center;
    }

    .hero-content{
        width:100%;
        max-width:100%;
    }

    .hero h4{
        font-size:11px;
        letter-spacing:4px;

        margin-bottom:15px;
    }

    .hero h1{
        font-size:58px;
        line-height:.95;

        margin-bottom:18px;
    }

    .hero p{
        font-size:21px;
        line-height:1.4;

        margin-bottom:30px;
    }

    .hero-buttons{
        width:100%;

        display:flex;
        flex-direction:column;
        align-items:center;

        gap:12px;
    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline{
        width:90%;
        max-width:320px;

        margin:0;

        text-align:center;

        padding:14px 20px;
    }


    /* =========================
       ALLGEMEINE SECTIONS
    ========================= */

    .welcome,
    .rooms,
    .restaurant,
    .bowling,
    .events,
    .gallery,
    .arrival,
    .contact,
    #beerdigung,
    .news,
    .news-preview{

        padding:80px 20px;
    }

    .section-title{
        width:100%;
        max-width:100%;
    }

    .section-title h2,
    .welcome-text h2,
    .restaurant-text h2,
    .bowling-text h2,
    .events-text h2,
    .arrival h2,
    .opening-hours h2{

        font-size:40px;
        line-height:1.05;
    }

    .section-title p{
        font-size:17px;
        line-height:1.7;
    }


    /* =========================
       WILLKOMMEN
    ========================= */

    .welcome-text p{
        font-size:17px;
        line-height:1.8;
    }

    .facts{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .fact{
        padding:22px 12px;
    }

    .fact h3{
        font-size:32px;
    }


    /* =========================
       ZIMMER
    ========================= */

    .room-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .room-card img{
        height:240px;
    }

    .room-content{
        padding:20px 15px 25px;
    }

    .room-content h3{
        font-size:29px;
        white-space:normal;
    }


    /* =========================
       RESTAURANT
    ========================= */

    .restaurant,
    .bowling,
    .events,
    .arrival{

        grid-template-columns:1fr;
        gap:35px;
    }

    .restaurant-text,
    .bowling-text,
    .events-text{
        order:1;
    }

    .restaurant-image,
    .bowling-image,
    .events-image{
        order:2;
    }

    .restaurant-text p,
    .bowling-text p,
    .events-text p,
    .arrival p{
        font-size:17px;
        line-height:1.8;
    }


    /* =========================
       KEGELBAHNEN
    ========================= */

    .bowling-info{
        grid-template-columns:1fr;
        gap:12px;
    }

    .bowling-info div{
        padding:15px;
    }


    /* =========================
       FEIERN
    ========================= */

    .events-image img{
        height:280px;
    }

    .event-boxes{
        grid-template-columns:1fr;
        gap:12px;
    }

    .event-boxes div{
        padding:15px;
    }


    /* =========================
       BEERDIGUNGSKAFFEE
    ========================= */

    .beerdigung-content{
        flex-direction:column;
        gap:35px;
    }

    .beerdigung-image,
    .beerdigung-text{
        width:100%;
    }

    .beerdigung-text h2{
        font-size:40px;
        line-height:1.05;
    }

    .beerdigung-text p{
        font-size:17px;
        line-height:1.8;
    }

    .beerdigung-video{
        width:100%;
        margin-top:50px;
    }

    .beerdigung-video h3{
        font-size:29px;
    }

    .beerdigung-video video{
        width:100%;
        max-height:420px;
    }


    /* =========================
       GALERIE SLIDER
    ========================= */

    .gallery{
        padding:80px 15px;
    }

    .gallery-slider{
        width:100%;
        max-width:100%;

        margin-top:35px;
    }

    .gallery-slides{
        width:100%;

        border-radius:16px;
    }

    .gallery-slide img,
    .gallery-slide video{

        width:100%;
        height:400px;

        object-fit:cover;

        border-radius:16px;
    }

    .gallery-prev,
    .gallery-next{

        width:44px;
        height:44px;

        font-size:28px;

        z-index:20;
    }

    .gallery-prev{
        left:8px;
    }

    .gallery-next{
        right:8px;
    }

    .gallery-dots{
        margin-top:18px;
        gap:6px;
    }


    /* =========================
       ANREISE
    ========================= */

    .arrival-box{
        padding:20px;
    }

    .arrival iframe{
        height:350px;
    }


    /* =========================
       KONTAKT
    ========================= */

    .contact-grid{
        grid-template-columns:1fr;

        gap:15px;

        margin:40px 0;
    }

    .contact-card{
        padding:22px;
    }

    .contact-actions{
        grid-template-columns:1fr;

        gap:15px;

        margin-top:45px;
    }

    .action-btn{
        padding:20px;

        font-size:17px;
    }


    /* =========================
       ÖFFNUNGSZEITEN
    ========================= */

    .opening-hours{
        margin-top:50px;
        padding:25px 20px;
        border-radius:18px;
    }

    .opening-hours h2{
        margin-bottom:25px;
    }

    .opening-hours td{
        display:table-cell;

        width:auto;

        padding:12px 0;

        font-size:16px;
    }

    .opening-hours td:first-child{
        width:40%;
    }


    /* =========================
       SPEISEKARTE
    ========================= */

    .speisekarte-hinweis{
        margin:45px auto 20px;

        padding:25px 10px;
    }

    .speisekarte-hinweis h3{
        font-size:30px;
    }

    .speisekarte-hinweis p{
        font-size:16px;
    }

    .speisekarte-hinweis .btn{
        display:block;

        width:100%;
        max-width:300px;

        margin:10px auto;
    }


    /* =========================
       AKTUELLES
    ========================= */

    .news{
        padding:100px 15px 60px;
    }

    .news-grid{
        grid-template-columns:1fr;

        gap:20px;

        margin:40px 0;
    }

    .news-card{
        min-height:0;
    }

    .news-card img{
        height:220px;
    }

    .news-card h4{
        font-size:28px;
    }

    .news-card p{
        font-size:16px;
    }


    /* =========================
       AKTUELLES VORSCHAU
    ========================= */

    .news-preview{
        padding:70px 20px;
    }

    .preview-box{
        padding:25px 20px;
    }

    .preview-box p{
        font-size:17px;
    }

    .news-highlight{
        padding:30px 20px;
    }

    .news-highlight h3{
        font-size:34px;
    }


    /* =========================
       FOOTER
    ========================= */

    .footer{
        padding:60px 20px 25px;
    }

    .footer-grid{
        grid-template-columns:1fr;

        gap:35px;

        margin-bottom:35px;
    }

    .footer h2{
        font-size:40px;
    }


    /* =========================
       LEGAL
    ========================= */

    .legal-page{
        padding:120px 15px 60px;
    }

    .legal-page .container{
        padding:30px 20px;
        border-radius:18px;
    }

    .legal-page h1{
        font-size:42px;
    }


    /* =========================
       ZURÜCK NACH OBEN
    ========================= */

    .back-to-top{
        width:44px;
        height:44px;

        right:15px;
        bottom:15px;

        font-size:21px;
    }

}


/* ==========================================
   SEHR KLEINE HANDYS
========================================== */

@media (max-width:380px){

    .navbar .logo img{
        width:42px !important;
        height:42px !important;
        min-width:42px;
    }

    .navbar .logo-text h2{
        font-size:20px !important;
    }

    .navbar .logo-text p{
        font-size:8px !important;
        letter-spacing:2px !important;
    }

    .hero h1{
        font-size:48px;
    }

    .hero p{
        font-size:18px;
    }

    .section-title h2,
    .welcome-text h2,
    .restaurant-text h2,
    .bowling-text h2,
    .events-text h2,
    .arrival h2{
        font-size:34px;
    }

    .gallery-slide img,
    .gallery-slide video{
        height:330px;
    }

}/* ==========================================
   WEBVERSION - NAVIGATION FINAL
========================================== */

@media (min-width: 901px){

    .navbar{
        height:90px;
        width:100%;
        padding:8px 22px;

        display:flex;
        align-items:center;

        background:rgba(18,34,24,.90);
        backdrop-filter:blur(12px);

        box-sizing:border-box;
    }

    /* LOGO */

    .navbar .logo{
        flex:0 0 350px;
        width:350px;
        min-width:350px;

        display:flex;
        align-items:center;

        gap:14px;

        margin:0;
        padding:0;
    }

    .navbar .logo img{
        width:65px !important;
        height:60px !important;
        min-width:65px;

        object-fit:contain;
        display:block;
    }

    .navbar .logo-text{
        display:flex;
        flex-direction:column;
        justify-content:center;

        white-space:nowrap;
    }

    .navbar .logo-text h2{
        margin:0 !important;

        font-family:'Cormorant Garamond', serif;
        font-size:30px !important;
        line-height:1;

        color:white;
    }

    .navbar .logo-text p{
        margin:5px 0 0 !important;

        font-family:'Inter', sans-serif;
        font-size:13px !important;
        letter-spacing:4px !important;
        line-height:1;

        color:#d5b67d;
    }


    /* MENÜ */

    .navbar .menu{
        flex:1;
        min-width:0;

        display:flex;
        align-items:center;
        justify-content:center;

        gap:11px;

        margin:0;
        padding:0;
    }

    .navbar .menu li{
        list-style:none;
        flex-shrink:0;
    }

    .navbar .menu a{
        display:block;

        color:white;

        font-family:'Inter', sans-serif;
        font-size:14px !important;
        font-weight:500;

        white-space:nowrap;

        text-decoration:none;

        transition:.3s;
    }

    .navbar .menu a:hover{
        color:#d5b67d;
    }


    /* SPRACHWECHSEL */

    .navbar .language-switch{
        flex:0 0 auto;

        display:flex;
        align-items:center;
        justify-content:center;

        gap:5px;

        height:38px;

        margin-left:12px;
        padding:0 10px;

        border:1px solid rgba(255,255,255,.35);
        border-radius:9px;

        white-space:nowrap;
    }

    .navbar .language-switch a{
        color:white;

        font-size:13px;
        font-weight:600;

        text-decoration:none;
    }

    .navbar .language-switch a.active{
        color:#d5b67d;
    }

    .navbar .language-switch span{
        color:rgba(255,255,255,.4);
    }

}/* ==========================================
   MOBILE VERSION – FINAL
========================================== */

@media (max-width: 900px){

    /* NAVIGATION */

    .navbar{
        height:75px;
        padding:8px 15px;
        position:fixed;
        top:0;
        left:0;
        width:100%;
    }

    .navbar .logo{
        width:auto;
        min-width:0;
        flex:1;
        gap:8px;
    }

    .navbar .logo img{
        width:48px !important;
        height:48px !important;
        min-width:48px;
    }

    .navbar .logo-text h2{
        font-size:24px !important;
    }

    .navbar .logo-text p{
        font-size:9px !important;
        letter-spacing:3px !important;
        margin-top:4px !important;
    }

    /* Hamburger */

    .menu-toggle{
        display:block;
        font-size:30px;
        line-height:1;
        margin-left:auto;
        cursor:pointer;
    }

    /* Sprachschalter */

    .language-switch{
        margin-left:10px;
        margin-right:0;
        height:38px;
        padding:0 8px;
    }

    .language-switch a{
        font-size:12px;
    }

    /* Desktop-Navigation verstecken */

    .navbar .menu{
        display:none;
        position:absolute;
        top:75px;
        left:0;
        width:100%;

        flex-direction:column;
        align-items:center;

        background:#264733;

        padding:25px 20px;
        gap:18px;

        box-shadow:0 10px 25px rgba(0,0,0,.2);
    }

    .navbar .menu.active{
        display:flex;
    }

    .navbar .menu a{
        font-size:17px !important;
    }

    /* Zimmer buchen im Menü ausblenden */

    .navbar > .btn{
        display:none;
    }


    /* HERO */

    .hero{
        min-height:100svh;
        padding:75px 20px 40px;
        background-position:center;
    }

    .hero-content{
        width:100%;
        max-width:100%;
        padding:0 10px;
    }

    .hero h4{
        font-size:14px;
        letter-spacing:5px;
        margin-bottom:15px;
    }

    .hero h1{
        font-size:58px;
        line-height:1;
        margin-bottom:18px;
    }

    .hero p{
        font-size:22px;
        line-height:1.4;
        margin-bottom:30px;
    }

    .hero-buttons{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:15px;
    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline{
        width:100%;
        max-width:280px;
        margin:0;
        text-align:center;
    }


    /* ALLGEMEINE ABSCHNITTE */

    .welcome,
    .rooms,
    .restaurant,
    .bowling,
    .events,
    .gallery,
    .arrival,
    .contact,
    #beerdigung,
    .news,
    .news-preview{
        padding:80px 20px;
    }


    /* ÜBERSCHRIFTEN */

    .section-title h2,
    .welcome-text h2,
    .restaurant-text h2,
    .bowling-text h2,
    .events-text h2,
    .arrival h2,
    .opening-hours h2{
        font-size:42px;
        line-height:1.1;
    }

    .section-title p{
        font-size:17px;
        line-height:1.7;
    }


    /* WILLKOMMEN */

    .welcome-text p{
        font-size:17px;
        line-height:1.8;
    }

    .facts{
        grid-template-columns:1fr 1fr;
        gap:15px;
    }

    .fact{
        padding:22px 12px;
    }


    /* ZIMMER */

    .room-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .room-card img{
        height:250px;
    }

    .room-content h3{
        font-size:30px;
        white-space:normal;
    }


    /* RESTAURANT */

    .restaurant,
    .bowling,
    .events,
    .arrival{
        grid-template-columns:1fr;
        gap:40px;
    }

    .restaurant-text{
        order:1;
    }

    .restaurant-image{
        order:2;
    }

    .restaurant-text p,
    .bowling-text p,
    .events-text p,
    .arrival p{
        font-size:17px;
        line-height:1.8;
    }


    /* KEGELBAHNEN */

    .bowling-info{
        grid-template-columns:1fr;
        gap:12px;
    }


    /* FEIERN */

    .events-image img{
        height:300px;
    }

    .event-boxes{
        grid-template-columns:1fr;
        gap:12px;
    }


    /* BEERDIGUNGSKAFFEE */

    .beerdigung-content{
        flex-direction:column;
        gap:35px;
    }

    .beerdigung-image,
    .beerdigung-text{
        width:100%;
    }

    .beerdigung-text h2{
        font-size:42px;
        line-height:1.1;
    }

    .beerdigung-text p{
        font-size:17px;
    }

    .beerdigung-video{
        margin-top:50px;
    }

    .beerdigung-video video{
        width:100%;
        height:auto;
    }


    /* GALERIE */

    .gallery-slider{
        margin-top:35px;
    }

    .gallery-slide img,
    .gallery-slide video{
        height:400px;
        object-fit:cover;
    }

    .gallery-prev,
    .gallery-next{
        width:45px;
        height:45px;
        font-size:30px;
    }

    .gallery-prev{
        left:8px;
    }

    .gallery-next{
        right:8px;
    }


    /* ANREISE */

    .arrival iframe{
        height:400px;
    }

    .arrival-box{
        padding:20px;
    }


    /* KONTAKT */

    .contact-grid{
        grid-template-columns:1fr;
        gap:18px;
        margin:40px 0;
    }

    .contact-actions{
        grid-template-columns:1fr;
        gap:15px;
        margin-top:45px;
    }

    .action-btn{
        padding:22px;
        font-size:18px;
    }


    /* ÖFFNUNGSZEITEN */

    .opening-hours{
        margin-top:60px;
        padding:30px 20px;
    }

    .opening-hours td{
        display:block;
        width:100%;
        padding:10px 0;
    }

    .opening-hours td:first-child{
        width:100%;
        padding-bottom:3px;
    }


    /* AKTUELLES */

    .news-grid{
        grid-template-columns:1fr;
        gap:25px;
        margin:40px 0;
    }

    .news-card{
        min-height:auto;
    }

    .news-card img{
        height:230px;
    }

    .news-card h4{
        font-size:30px;
    }


    /* SPEISEKARTE */

    .speisekarte-hinweis{
        padding:25px 10px;
        margin:50px auto 20px;
    }


    /* FOOTER */

    .footer{
        padding:60px 20px 25px;
        text-align:center;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .footer h2{
        font-size:40px;
    }


    /* NACH OBEN BUTTON */

    .back-to-top{
        width:45px;
        height:45px;
        right:15px;
        bottom:15px;
        font-size:22px;
    }

}


/* ==========================================
   KLEINE HANDYS
========================================== */

@media (max-width:600px){

    .navbar{
        height:68px;
    }

    .navbar .menu{
        top:68px;
    }

    .navbar .logo img{
        width:42px !important;
        height:42px !important;
        min-width:42px;
    }

    .navbar .logo-text h2{
        font-size:21px !important;
    }

    .navbar .logo-text p{
        font-size:8px !important;
        letter-spacing:2px !important;
    }

    .language-switch{
        height:34px;
        padding:0 6px;
    }

    .hero{
        padding-top:68px;
    }

    .hero h1{
        font-size:48px;
    }

    .hero h4{
        font-size:12px;
        letter-spacing:4px;
    }

    .hero p{
        font-size:19px;
    }

    .section-title h2,
    .welcome-text h2,
    .restaurant-text h2,
    .bowling-text h2,
    .events-text h2,
    .arrival h2,
    .opening-hours h2{
        font-size:36px;
    }

    .facts{
        grid-template-columns:1fr;
    }

    .gallery-slide img,
    .gallery-slide video{
        height:350px;
    }

    .gallery-prev,
    .gallery-next{
        width:40px;
        height:40px;
        font-size:26px;
    }

}/* ==========================================
   SPRACHWECHSEL MOBILE
========================================== */

@media (max-width: 900px){

    .navbar .language-switch{
        display:flex !important;

        align-items:center;
        justify-content:center;

        height:34px;

        margin:0 8px 0 5px;
        padding:0 7px;

        gap:4px;

        border:1px solid rgba(255,255,255,.35);
        border-radius:8px;

        flex-shrink:0;
    }

    .navbar .language-switch a{
        display:inline-block;

        color:white;

        font-size:12px !important;
        font-weight:600;

        padding:4px 3px;
    }

    .navbar .language-switch a.active{
        color:#d5b67d;
    }

    .navbar .language-switch span{
        color:rgba(255,255,255,.45);
    }

    /* Auch beim Scrollen sichtbar lassen */

    .navbar.scrolled .language-switch{
        display:flex !important;
    }

}