/* ===================================
   VILLA NIKOLAS Luxury Mediterranean Style 
=================================== */ :root{
    --gold:#c9ab6f; --gold-light:#ead29c; --cream:#faf8f4; --sand:#f3efe7; 
    --white:#ffffff; --dark:#222222; --grey:#666666; --shadow:
        0 15px 40px rgba(0,0,0,.08); } /* ==========================
   RESET ========================== */ *{
    margin:0; padding:0; box-sizing:border-box; } html{ 
    scroll-behavior:smooth;
} body{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
    sans-serif; background:var(--cream); color:var(--dark); 
    line-height:1.8;
} /* ==========================
   TYPOGRAPHY ========================== */ h1, h2, h3{
    font-family: "Cormorant Garamond", serif; font-weight:600; 
    color:var(--gold); letter-spacing:1px;
    text-shadow:
        0 1px 0 #fff,
        0 2px 8px rgba(198,168,106,.25);
} h1{
    font-size:5rem; line-height:1.1; } h2{ font-size:3rem; 
    margin-bottom:20px;
} h3{
    font-size:2rem; } p{ color:var(--grey); } /* 
==========================
   HEADER ========================== */ header{
    position:fixed; top:0; left:0; width:100%; display:flex; 
    justify-content:space-between; align-items:center; padding:25px 60px; 
    background:rgba(255,255,255,.94); backdrop-filter:blur(12px); 
    border-bottom: 1px solid rgba(0,0,0,.05); z-index:9999;
} .logo{
    font-family:"Cormorant Garamond", serif;
    font-size:42px;
    font-weight:700;
    letter-spacing:4px;

    color:var(--gold);

    text-shadow:
        0 1px 0 #fff,
        0 2px 12px rgba(198,168,106,.25);
} nav{
    display:flex; gap:35px; } nav a{ text-decoration:none; color:#555; 
    text-transform:uppercase; letter-spacing:2px; font-size:14px; 
    transition:.3s;
} nav a:hover{
    color:var(--gold); } 

/* ==========================
   HERO ========================== */ .hero{
    height:100vh;
    min-height:750px;

    background:
        linear-gradient(
            rgba(15,15,15,.45),
            rgba(15,15,15,.35)
        ),
        url("../images/hero.jpg");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

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

    text-align:center;

    position:relative;
}

.hero::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(201,171,111,.12),
            transparent 70%
        );

    pointer-events:none;
}

.hero h1{
    font-size:5rem;
}

.hero p{
    color:#fff;
    font-size:1.5rem;
    margin-bottom:35px;
} /* 
==========================
   BUTTONS ========================== */ .button{
    display:inline-block; padding:18px 36px; border-radius:10px; 
    text-decoration:none; color:white; font-weight:600; background: 
    linear-gradient(
        135deg, var(--gold), var(--gold-light)
    ); box-shadow:
        0 10px 25px rgba(184,155,94,.35);
    transition:.3s; } .button:hover{ transform: translateY(-3px); } /* 
==========================
   CONTENT ========================== */ .admin-wrapper{
    width:95%;
    max-width:1800px;
    margin:40px auto;
} 
.welcome p{
    max-width:900px; margin:auto; font-size:1.1rem; } /* 
==========================
   HIGHLIGHTS ========================== */ .highlights{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    align-items:start;
}

.card{

    height:fit-content;

    background:white;

    border-radius:28px;

    overflow:hidden;
} .card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );
}
.card:hover{

    transform:
        translateY(-10px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.12);
} .card h3{

    font-size:2rem;

    margin-bottom:20px;
} /* 
==========================
   PAGE HEADER ========================== */ .page-header{
    padding-top:180px; padding-bottom:80px; text-align:center; } 
.page-header h1::after{
    content:""; display:block; width:90px; height:2px; 
    background:var(--gold); margin:20px auto 0;
} /* ==========================
   GALLERY ========================== */ .gallery-grid{

    display:grid;

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

    Margin-bottom:60px;

    gap:22px;

}

@media (max-width:1100px){

    .gallery-grid{

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

@media (max-width:700px){

    .gallery-grid{

        grid-template-columns:1fr;
    }
}

.gallery-grid a{
    display:block;
    text-decoration:none;
}

.gallery-image{
    display:block;
    width:100%;
    height:300px;

    object-fit:cover;

    border-radius:24px;

    background:#fff;

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

    transition:all .4s ease;
}

.gallery-image:hover{
    transform:
        translateY(-8px);

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

.placeholder{
    height:300px;

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

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            #f8f4ea,
            #eee4cf
        );

    border:2px solid rgba(201,171,111,.25);

    color:var(--gold);

    font-family:"Cormorant Garamond", serif;
    font-size:2rem;

    box-shadow:var(--shadow);
} /* ==========================
   PRICE CARD ========================== */ .price-card{
    width:350px; margin:50px auto; padding:50px; background:white; 
    border-radius:24px; box-shadow:var(--shadow); text-align:center;
} /* ==========================
   CONTACT ========================== */ /* ==========================
   CALENDAR ========================== */ .calendar-placeholder{
    width:90%; max-width:1100px; height:600px; margin:40px auto 120px; 
    background:white; border-radius:24px; box-shadow:var(--shadow); 
    display:flex; justify-content:center; align-items:center; color:#888;
} /* ==========================
   FOOTER ========================== */ footer{
    color:#888; background:white; text-align:center; padding:50px; border-top: 1px 
    solid rgba(0,0,0,.06);
} footer p{
    color:#888; } /* ==========================
   MOBILE ========================== */ @media(max-width:900px){
    header{
        flex-direction:column; gap:15px; padding:20px;
    } nav{
        flex-wrap:wrap; justify-content:center; gap:15px;
    }  } 
/* LIGHTBOX */

#lightbox{
    display:none;

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.92);

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

    z-index:99999;
}

#lightbox-image{

    max-width:90%;
    max-height:90vh;

    border-radius:18px;

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

#close-lightbox{

    position:absolute;

    top:30px;
    right:40px;

    color:white;

    font-size:50px;

    cursor:pointer;
}

.calendar-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;

    max-width:900px;
    margin:0 auto 40px;
}

.calendar-nav a{
    text-decoration:none;
    color:var(--gold);
    font-weight:600;
}

.calendar-nav-disabled{
    color:#ccc;
    font-weight:600;
    cursor:not-allowed;
    user-select:none;
}

.calendar-nav strong{
    font-size:1.5rem;
    color:var(--gold);
}

.calendar-day{
    min-height:110px;

    display:flex;
    flex-direction:column;

    padding:12px;

    border-radius:14px;

    transition:.25s ease;

    position:relative;
    overflow:hidden;

}

.calendar-day:hover{
    transform:translateY(-3px);

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

.day-number{
    font-size:1.5rem;
    font-weight:700;
}

.day-status{
    margin-top:10px;

    font-size:.9rem;
    font-weight:600;

    text-transform:none;
    letter-spacing:1px;
}

.free{
    background:#c8f0cc;
    border:2px solid #4caf50;
    color:#1b5e20;
}

.occupied{
    background:#ffcaca;
    border:2px solid #e53935;
    color:#8b0000;
}

.free .day-status{
    color:#1b5e20;
}

.occupied .day-status{
    color:#b71c1c;
}

.today{
    border:4px solid var(--gold) !important;

    box-shadow:
        0 0 0 5px rgba(201,171,111,.35),
        0 10px 25px rgba(0,0,0,.10);

    transform:scale(1.05);

    position:relative;
    z-index:5;
}

.calendar-legend{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:45px;
    margin:35px 0 50px;
}

.legend-item{
    display:flex;
    align-items:center;
    gap:16px;
}

.legend-day{

    position:relative;

    width:50px;
    height:50px;

    border-radius:12px;

    background:#fff;

    overflow:hidden;

    box-sizing:border-box;

    font-size:13px;
}

.legend-free{

    border:3px solid #43a047;

}

.legend-price{

    position:absolute;

    left:10px;
    bottom:10px;

    font-size:12px;
    font-weight:700;

    color:#1f6d28;
}

.legend-booked{

    border:3px solid #e53935;

}

.legend-booked-text{

    position:absolute;

    left:10px;
    bottom:10px;

    color:#b71c1c;

    font-size:12px;
    font-weight:700;
}

.legend-arrival{

    border:3px solid #43a047;

}

.legend-arrival::before{

    content:"";

    position:absolute;

    top:-2px;
    right:-2px;

    width:50%;
    height:calc(100% + 4px);

    border-top:8px solid #4a90e2;
    border-right:8px solid #4a90e2;
    border-bottom:8px solid #4a90e2;

    border-radius:0 14px 14px 0;

    pointer-events:none;
}

.legend-arrival-text{

    position:absolute;

    left:10px;
    bottom:10px;

    color:#1d5ec5;

    font-size:12px;
    font-weight:700;
}

.legend-departure{

    border:3px solid #43a047;

}

.legend-departure::before{

    content:"";

    position:absolute;

    top:-2px;
    left:-2px;

    width:50%;
    height:calc(100% + 4px);

    border-top:8px solid #4a90e2;
    border-left:8px solid #4a90e2;
    border-bottom:8px solid #4a90e2;

    border-radius:14px 0 0 14px;

    pointer-events:none;
}

.legend-departure-text{

    position:absolute;

    left:10px;
    bottom:10px;

    color:#ef6c00;

    font-size:12px;
    font-weight:700;
}

.arrival{
    color:#4a90e2;
}

.departure{
    color:#4a90e2;
}

.arrival .day-status{
    color:#1565c0;
}

.departure .day-status{
    color:#ef6c00;
}

.booking-table{
    width:100%;
    margin:30px 0;

    margin:30px auto;

    border-collapse:collapse;

    background:#fff;

    box-shadow:var(--shadow);

    border-radius:18px;

    overflow:hidden;
    
    table-layout:auto;
}

.booking-table th{
    background:var(--gold);

    color:white;

    padding:15px;

    text-align:left;
}

.booking-table td{
    padding:20px;

    border-bottom:1px solid #eee;
    vertical-align:top;
}

.booking-table tr:last-child td{
    border-bottom:none;
}

.booking-table td:last-child{
    white-space:nowrap;
}

.delete-button{
    display:inline-block;

    padding:8px 14px;

    border-radius:8px;

    text-decoration:none;

    background:#d32f2f;
    color:white;

    font-weight:600;

    transition:.25s;
}

.delete-button:hover{
    background:#b71c1c;
}

.error-message{
    max-width:800px;

    margin:25px auto;

    padding:18px 25px;

    background:#fff3cd;

    color:#856404;

    border:2px solid #ffe082;

    border-radius:12px;

    font-weight:600;

    text-align:center;
}

.success-message{
    max-width:800px;

    margin:25px auto;

    padding:18px 25px;

    background:#e8f5e9;

    color:#1b5e20;

    border:2px solid #81c784;

    border-radius:12px;

    font-weight:600;

    text-align:center;
}

.admin-calendar{
    width:100%;
    height:1000px;

    border:none;
    border-radius:24px;

    background:white;

    box-shadow:var(--shadow);

    margin-bottom:50px;
}



.arrival{
    position:relative;
}

.arrival::after{
    content:"";

    position:absolute;

    top:-2px;
    right:-2px;

    width:50%;
    height:calc(100% + 4px);

    border-top:8px solid #4a90e2;
    border-right:8px solid #4a90e2;
    border-bottom:8px solid #4a90e2;

    border-radius:0 14px 14px 0;

    pointer-events:none;
}

.departure{
    position:relative;
}

.departure::before{
    content:"";

    position:absolute;

    top:-2px;
    left:-2px;

    width:50%;
    height:calc(100% + 4px);

    border-top:8px solid #4a90e2;
    border-left:8px solid #4a90e2;
    border-bottom:8px solid #4a90e2;

    border-radius:14px 0 0 14px;

    pointer-events:none;
}

.day-number,
.day-status{
    position:relative;
    z-index:2;
}
/* ==========================
   CONTACT GRID
========================== */

.contact-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

    margin-bottom:25px;
}

.contact-form{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

.contact-form input,
.contact-form textarea{
    width:100%;

    padding:20px;

    border:1px solid #ddd;

    border-radius:14px;

    font-size:18px;

    background:#fff;

    box-shadow:
        0 8px 20px rgba(0,0,0,.05);
}

.contact-form textarea{
    min-height:220px;

    margin-bottom:25px;
}

.contact-form .button{
    width:100%;
}
.selected-range{
    background:#d8c18d !important;
    border:3px solid var(--gold) !important;
}

.selected-start{
    background:#d9ecff !important;
    border:3px solid #2d7ff9 !important;
}

.selected-end{
    background:#d9ecff !important;
    border:3px solid #2d7ff9 !important;
}

.selected-range{
    background:#f5ead0 !important;
    border:2px solid var(--gold) !important;
}

.past{
    opacity:.35;
    pointer-events:none;
}

#booking-selection{
    text-align:center;
    margin-top:40px;
}

#selected-range{
    font-size:1.2rem;
    margin-bottom:20px;
    font-weight:600;
}

#selection-reset a{
    color:#c9ab6f;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

#selection-reset a:hover{
    opacity:.7;
}

.day-price,
.day-status{

    margin-top:8px;

    font-size:14px;

    font-weight:600;

    color:#c9ab6f;

}

.price-box{
    background:#f7f1e3;
    border:2px solid #c9ab6f;
    border-radius:12px;
    padding:20px;
    margin:25px 0;
    text-align:center;
    font-size:22px;
}

.price-box strong{
    color:#c9ab6f;
    font-size:28px;
}

.message-column{
    min-width:450px;
    max-width:650px;
    line-height:1.8;
    white-space:normal;
}

.admin-calendar{
    width:100%;
    height:950px;
    border:none;
    border-radius:15px;
    margin-top:20px;
}

.booking-table{
    width:100%;
    border-collapse:collapse;
}

.booking-table th,
.booking-table td{
    padding:12px;
    border:1px solid #ddd;
    vertical-align:top;
}

.booking-table th{
    background:#c9ab6f;
    color:white;
}

.booking-card{

    border:1px solid #ddd;

    border-radius:12px;

    padding:20px;

    margin:20px 0;

    background:white;

}

.booking-info{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:15px;

    margin-bottom:20px;

}

.booking-text{

    margin-top:15px;

    padding:15px;

    background:#fafafa;

    border-left:4px solid #b89b5e;

    white-space:pre-wrap;

    line-height:1.6;

}

.month-block{

    margin:20px 0;

}

details{

    margin-bottom:15px;

}

summary{

    cursor:pointer;

    font-weight:bold;

    padding:12px;

    background:#f2f2f2;

    border-radius:8px;

}

.action-buttons{

    margin-top:20px;

}

.action-buttons a{

    margin-right:15px;

}

.year-block{
    margin-bottom:25px;
}

.year-block summary,
.month-block summary{

    cursor:pointer;
    font-size:22px;
    font-weight:bold;

    padding:15px 20px;

    background:#f7f2e8;

    border-radius:10px;

    margin-bottom:15px;
}

.month-block{
    margin:20px 0;
}

.booking-card{

    background:white;

    border:1px solid #e5e5e5;

    border-left:6px solid #b89b5e;

    border-radius:15px;

    padding:25px;

    margin:20px 0;

    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.booking-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;
}

.booking-name{

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

.booking-source{

    background:#b89b5e;

    color:white;

    padding:6px 12px;

    border-radius:20px;

    font-size:14px;
}

.booking-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

    margin-bottom:20px;
}

/* ==========================
   GÄSTEBUCH EINLADUNG
========================== */

.guestbook-invitation{

    max-width:900px;

    margin:60px auto;

    padding:50px;

    background:
        linear-gradient(
            135deg,
            #faf8f4,
            #f3efe7
        );

    border-radius:24px;

    border-left:6px solid #c9ab6f;

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

    text-align:center;
}

.guestbook-invitation h2{

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:2.8rem;

    color:#c9ab6f;

    margin-bottom:30px;
}

.guestbook-invitation p{

    font-size:1.15rem;

    line-height:2;

    color:#555;

    margin-bottom:25px;
}

.guestbook-highlight{

    font-size:1.25rem;

    font-weight:600;

    color:#b89b5e;

    font-style:italic;
}

@media (max-width: 768px){

    .guestbook-invitation{

        margin:30px 15px;

        padding:30px 25px;
    }

    .guestbook-invitation h2{

        font-size:2.1rem;
    }

    .guestbook-invitation p{

        font-size:1rem;

        line-height:1.8;
    }

    .guestbook-highlight{

        font-size:1.1rem;
    }

}

.card details{
    height:100%;
}

.card summary{
    list-style:none;
    cursor:pointer;

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

    gap:15px;

    padding:30px;

    font-family:"Cormorant Garamond", serif;
    font-size:2rem;

    color:var(--gold);
}

.card summary::-webkit-details-marker{
    display:none;
}

.card summary::after{

    content:"+";

    width:40px;
    height:40px;

    flex-shrink:0;

    border-radius:50%;

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

    background:var(--gold);

    color:white;

    font-size:28px;
}

.card details[open] summary::after{

    content:"−";
}

.card details[open] summary::after{

    content:"–";
}

.card ul{
    margin-top:20px;
    padding-left:20px;
}

.card li{
    margin-bottom:12px;
    line-height:1.8;
}

.map-section{
    max-width:1400px;
    margin:80px auto;
    padding:0 10%;
}

.map-section details{
    background:white;
    padding:40px;
    border-radius:24px;
    box-shadow:var(--shadow);
}

.map-section summary{
    cursor:pointer;
    list-style:none;
}

.map-section{

    max-width:1400px;

    margin:120px auto;

    padding:0 10%;
}

.map-section details{

    background:white;

    padding:50px;

    border-radius:30px;

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

.map-section summary{

    font-size:2.2rem;

    font-family:"Cormorant Garamond", serif;

    color:var(--gold);

    cursor:pointer;
}

.map-section iframe{

    width:100%;

    height:550px;

    margin-top:35px;

    border:none;

    border-radius:30px;

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

    overflow:hidden;
}

@media(max-width:768px){

    .map-section iframe{
        height:350px;
    }

}

.card details div{

    padding-top:20px;

    border-top:1px solid rgba(201,171,111,.2);

    margin-top:10px;
}

.card ul{

    margin-top:20px;

    padding-left:20px;
}

.card li{

    margin-bottom:14px;

    color:#555;

    line-height:1.9;
}

.card-heading{

    flex:1;

    font-size:2rem;

    line-height:1.2;

    color:var(--gold);

    font-family:"Cormorant Garamond", serif;
}

.card-icon{

    font-size:2rem;

    flex-shrink:0;
}

.card-content{

    padding:0 30px 30px;

    border-top:
        1px solid rgba(201,171,111,.15);
}

.card-content p{

    margin-top:20px;

    font-size:1rem;

    color:#555;

    line-height:1.8;
}

.card-content ul{

    margin-top:20px;

    padding-left:20px;
}

.card-content li{

    margin-bottom:12px;

    line-height:1.7;

    color:#555;
}

.impressions{
    max-width:1400px;
    margin:100px auto;
    padding:0 8%;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:40px;
}

.impression-card{
    background:white;
    border-radius:30px;
    overflow:hidden;

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

    transition:.3s;
}

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

.impression-card img{
    width:100%;
    height:250px;

    object-fit:cover;
}

.impression-content{
    padding:30px;
}

.impression-content p{
    margin-top:15px;
}

.guestbook-preview{
    max-width:1400px;
    margin:120px auto;
    padding:0 8%;
}

.reviews-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;

    margin-top:50px;
}

.review-card{
    background:white;

    padding:35px;

    border-radius:25px;

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

.stars{
    color:#c9ab6f;

    font-size:24px;

    margin-bottom:20px;
}

.review-card strong{
    display:block;

    margin-top:20px;
}

.review-card span{
    color:#777;
}

.center-button{
    text-align:center;

    margin-top:50px;
}

.hero-button{

    display:inline-block;

    padding:16px 34px;

    border-radius:40px;

    background:rgba(255,255,255,.88);

    color:var(--gold);

    text-decoration:none;

    font-weight:600;

    transition:.3s;
}

.hero-button:hover{

    transform:translateY(-2px);

    background:white;
}

.villa-overview{

    max-width:1400px;

    margin:100px auto;

    padding:0 5%;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:30px;
}

.overview-item{

    text-align:center;

    padding:35px;

    background:white;

    border-radius:24px;

    box-shadow:var(--shadow);
}

.overview-item span{

    font-size:3rem;

    display:block;

    margin-bottom:20px;
}

.home-gallery-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(300px,1fr));

    gap:25px;
}

.home-gallery-grid img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:20px;
}

.guest-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(300px,1fr));

    gap:25px;
}

.guest-card{

    background:white;

    padding:35px;

    border-radius:24px;

    box-shadow:var(--shadow);
}

.availability-preview{

    text-align:center;

    padding:100px 20px;
}

.section-header{

    text-align:center;

    max-width:900px;

    margin:0 auto 50px auto;

    padding:0 20px;
}

.section-header h2{

    font-family:'Cormorant Garamond',serif;
    font-size:3rem;

    color:#c4a15a;

    margin-bottom:20px;
}

.section-header p{

    font-size:1.15rem;

    line-height:1.9;

    color:#666;
}

.villa-features{

    max-width:1400px;

    margin:80px auto 120px;

    padding:0 5%;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:30px;
}

.feature-card{

    background:white;

    border-radius:24px;

    padding:40px 30px;

    text-align:center;

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

    transition:.3s ease;
}

.feature-card:hover{

    transform:translateY(-6px);

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

.feature-icon{

    font-size:3rem;

    margin-bottom:25px;
}

.feature-card h3{

    font-size:1.45rem;

    color:var(--gold);

    margin-bottom:15px;
}

.feature-card p{

    color:#666;

    line-height:1.8;
}

/* ==========================
   INTERAKTIVE KARTE
========================== */

#villa-map {
    height: 650px;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.map-section{

    max-width:1400px;

    margin:120px auto;

    padding:0 5%;
}

.section-heading{

    text-align:center;

    margin-bottom:40px;
}

.section-heading p{

    max-width:700px;

    margin:15px auto 0;
}

@media(max-width:768px){

    #villa-map{

        height:450px;
    }
}

.map-legend {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px 25px;
    justify-content: center;
    font-size: 0.95rem;
    color: #666;
}

.map-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.custom-marker {

    background: transparent;
    border: none;

    font-size: 2rem;

    text-align: center;
    line-height: 40px;

    filter:
        drop-shadow(0 3px 6px rgba(0,0,0,0.30));

}

.leaflet-marker-icon {
    filter:
        drop-shadow(0 3px 6px rgba(0,0,0,0.35));
}

.villa-marker-icon {
    filter:
        drop-shadow(0 0 10px rgba(201,171,111,.85))
        drop-shadow(0 4px 10px rgba(0,0,0,.35));

    z-index:1000 !important;
}

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

.footer{

    background:#ffffff;

    border-top:1px solid rgba(0,0,0,.08);

    margin-top:100px;
}

.footer-content{

    max-width:1400px;

    margin:0 auto;

    padding:60px 40px;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:50px;
}

.footer-column h4{

    font-family:"Cormorant Garamond", serif;

    font-size:1.6rem;

    color:var(--gold);

    margin-bottom:20px;
}

.footer-column p{

    color:#666;

    line-height:1.9;
}

.footer-column a{

    display:block;

    text-decoration:none;

    color:#666;

    margin-bottom:10px;

    transition:.25s;
}

.footer-column a:hover{

    color:var(--gold);
}

.footer-bottom{

    text-align:center;

    padding:25px;

    border-top:1px solid rgba(0,0,0,.05);

    color:#888;

    font-size:.95rem;
}

@media(max-width:768px){

    .footer-content{

        text-align:center;

        gap:35px;
    }
}

/* ==========================
   RECHTLICHE SEITEN
========================== */

.legal-content{

    max-width:1200px;

    margin:0 auto 120px;

    padding:0 20px;
}

.legal-card{

    background:white;

    padding:60px;

    border-radius:30px;

    box-shadow:var(--shadow);
}

.legal-card h2{

    margin-top:40px;

    margin-bottom:15px;

    font-size:2rem;
}

.legal-card h2:first-child{

    margin-top:0;
}

.legal-card p{

    margin-bottom:18px;

    line-height:1.9;
}

.legal-card ul{

    margin:20px 0 20px 25px;
}

.legal-card li{

    margin-bottom:10px;
}

@media(max-width:768px){

    .legal-card{

        padding:30px;
    }
}

.villa-header-image{

max-width:1400px;
margin:40px auto;

}

.villa-header-image img{

width:100%;
height:500px;

object-fit:cover;

border-radius:20px;

display:block;

}
.villa-content{

    max-width:900px;
    margin:0 auto 50px auto;

    text-align:center;

}

.villa-content h2{

    font-family:'Cormorant Garamond',serif;
    font-size:3rem;

    color:#c4a15a;

    margin-bottom:20px;

}

.villa-content p{

    font-size:1.15rem;
    line-height:1.9;

    color:#666;

    max-width:800px;

    margin:0 auto 30px auto;

}

.villa-facts{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:14px;

}

.villa-facts span{

    position:relative;

    background:var(--white);

    border:1px solid rgba(201,171,111,.35);

    padding:12px 26px;

    border-radius:40px;

    color:var(--dark);

    font-family:'Cormorant Garamond',serif;
    font-size:1.05rem;
    letter-spacing:.3px;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

    transition:.3s;
}

.villa-facts span::before{

    content:"◆";

    color:var(--gold);

    font-size:.6rem;

    margin-right:10px;

    vertical-align:middle;
}

.villa-facts span:hover{

    border-color:var(--gold);

    box-shadow:0 10px 26px rgba(201,171,111,.18);

    transform:translateY(-2px);
}

/* ==========================
   CTA BEREICH
========================== */

.villa-cta{

    text-align:center;

    max-width:900px;

    margin:120px auto;

    padding:0 20px;
}

.villa-cta h2{

    margin-bottom:25px;
}

.villa-cta p{

    max-width:700px;

    margin:0 auto 40px auto;

    line-height:1.8;
}

.villa-cta .hero-buttons{

    justify-content:center;
}

/* ======================================================
   BUCHUNGSABLAUF
====================================================== */

.booking-steps{

    max-width:800px;
    margin:45px auto 60px;
    padding:0 30px;
    text-align:center;

}

.booking-steps h2{

    font-family:'Cormorant Garamond',serif;
    font-size:58px;
    color:var(--gold);
    margin-bottom:18px;

}

.booking-intro{

    max-width:760px;
    margin:0 auto 60px;
    font-size:21px;
    color:#666;
    line-height:1.8;

}

.booking-steps-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;

}

.booking-step{

    background:#fff;
    border-radius:24px;
    padding:45px 35px;
    box-shadow:0 12px 35px rgba(0,0,0,.06);

}

.step-number{

    width:70px;
    height:70px;
    border-radius:50%;
    margin:0 auto 25px;

    background:linear-gradient(135deg,#d9b96d,#b8944f);

    color:white;

    font-size:34px;
    font-weight:700;

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

}

.booking-step h3{

    font-family:'Cormorant Garamond',serif;
    font-size:1.8rem;
    color:var(--gold);
    margin-bottom:18px;

}

.booking-step p{

    font-size:1rem;
    color:#666;
    line-height:1.7;

}

@media(max-width:900px){

.booking-steps-grid{

grid-template-columns:1fr;

}

.calendar-note {
    max-width: 900px;
    margin: 40px auto 50px;
    padding: 18px 28px;
    text-align: center;
    background: #f8f5ef;
    border: 1px solid rgba(200,170,110,.35);
    border-radius: 14px;
    color: #555;
    font-size: 1rem;
    line-height: 1.8;
}

.calendar-note strong {
    color: var(--gold);
    font-weight: 600;
}

.calendar-note-extra {
    margin-top: 14px;
    text-align: center;
}

}

.availability-scale{
    transform: scale(.9);
    transform-origin: top center;
    margin-bottom:-120px;
}

.calendar-container{
    max-width:1100px;
    margin:180px auto 120px;
}

.gallery{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(180px,1fr));

    gap:20px;

}

.gallery-item img{

    width:100%;

    height:150px;

    object-fit:cover;

}

.gallery-item{

    background:white;

    border:2px solid #ddd;

    border-radius:10px;

    overflow:hidden;

    cursor:move;

}

.image-actions{

    padding:12px;

    text-align:center;

}

.delete-link{

    color:#d10000;

    text-decoration:none;

}

.dragging{

    opacity:.45;

}

/* ==========================
   MOBILE OPTIMIERUNG (Smartphones)
   Gebündelte Anpassungen für Hero, Überschriften,
   Navigation und Footer auf kleinen Bildschirmen.
========================== */

@media(max-width:600px){

    /* Hero: moderate Höhe, damit das Foto nicht extrem seitlich
       beschnitten wird (bei sehr hohem, schmalem Bildschirm
       schneidet "cover" sonst viel vom Bildinhalt weg) */
    .hero{
        height:70vh;
        min-height:480px;
        max-height:650px;
        background-position:center 55%;
    }

    .hero h1{
        font-size:2.1rem;
        line-height:1.2;
        padding:0 15px;
    }

    .hero p{
        font-size:.95rem;
        padding:0 20px;
    }

    /* Impressum/Datenschutz: Zwischenüberschriften verkleinern,
       damit lange Begriffe wie "Universalschlichtungsstelle"
       nicht über den Bildschirmrand hinauslaufen */
    .legal-card{
        padding:22px 18px;
    }

    .legal-card h2{
        font-size:1.35rem;
        line-height:1.3;
        word-break:break-word;
        margin-top:30px;
        margin-bottom:12px;
    }

    /* Überschriften allgemein kleiner auf Mobilgeräten */
    h1{
        font-size:1.9rem;
    }

    h2{
        font-size:1.5rem;
    }

    h3{
        font-size:1.2rem;
    }

    .page-header h1{
        font-size:2.1rem;
        line-height:1.2;
    }

    .page-header p{
        font-size:1rem;
        line-height:1.6;
        padding:0 20px;
    }

    .section-header h2{
        font-size:2.1rem;
        line-height:1.2;
    }

    .section-header p{
        font-size:1rem;
        line-height:1.6;
    }

    .villa-content h2{
        font-size:2.1rem;
        line-height:1.2;
    }

    .villa-content p{
        font-size:1rem;
        line-height:1.6;
    }

    .calendar-title{
        font-size:1.9rem;
    }

    .calendar-legend{
        gap:14px 20px;
        margin:15px 0 25px;
    }

    .legend-item{
        gap:8px;
    }

    .legend-day{
        width:28px;
        height:28px;
        border-radius:7px;
    }

    .legend-item span{
        font-size:13px;
    }

    .booking-steps{
        padding:0 15px;
        margin:25px auto 40px;
    }

    .booking-steps h2{
        font-size:1.9rem;
        margin-bottom:12px;
    }

    .booking-intro{
        font-size:.95rem;
        line-height:1.6;
        margin-bottom:30px;
    }

    .booking-step{
        padding:28px 22px;
        border-radius:16px;
    }

    .step-number{
        width:50px;
        height:50px;
        font-size:22px;
        margin-bottom:15px;
    }

    .booking-step h3{
        font-size:1.3rem;
        margin-bottom:10px;
    }

    .booking-step p{
        font-size:.9rem;
    }

    /* Startseite: Eindrucks-Kacheln - ursprüngliche Kachel-Optik
       bleibt erhalten, nur der Außenabstand wird leicht reduziert */
    .impressions{
        padding:0 16px;
        margin:50px auto;
        gap:25px;
        grid-template-columns:1fr;
    }

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

    .contact-form{
        padding:0 10px;
    }

    .contact-grid{
        gap:12px;
    }

    .contact-form input,
    .contact-form textarea{
        padding:14px;
        font-size:15px;
        border-radius:10px;
    }

    .contact-form textarea{
        min-height:150px;
    }

    /* Navigation: kompakter, weniger Platzverbrauch */
    header{
        padding:14px 16px;
    }

    .logo{
        font-size:26px;
        letter-spacing:2px;
    }

    nav{
        gap:12px;
    }

    nav a{
        font-size:11px;
        letter-spacing:1px;
    }

    /* Footer: deutlich kompakter */
    .footer{
        margin-top:50px;
    }

    .footer-content{
        padding:35px 20px;
        gap:25px;
    }

    .footer-column h4{
        font-size:1.3rem;
        margin-bottom:12px;
    }

    .footer-bottom{
        padding:15px;
        font-size:.8rem;
    }

}