/* ===========================================================
   Mikrohaus Wachau
   style.css
   Version 1.0
=========================================================== */


/* ---------- RESET ---------- */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;
    font-size:18px;
    line-height:1.8;

    color:#2B2B2B;

    background:#F8F6F2;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}


/* ---------- VARIABLES ---------- */

:root{

    --primary:#2b2b2b;

    --secondary:#6f7567;

    --gold:#b99857;

    --background:#f8f6f2;

    --white:#ffffff;

    --shadow:

        0 25px 60px rgba(0,0,0,.08);

    --radius:18px;

    --transition:.35s;

}


/* ---------- TYPOGRAPHY ---------- */

h1,
h2,
h3{

    font-family:"Cormorant Garamond",serif;

    font-weight:600;

    letter-spacing:.02em;

    color:var(--primary);

}

h1{

    font-size:clamp(52px,7vw,92px);

    line-height:1;

    margin-bottom:30px;

}

h2{

    font-size:clamp(38px,4vw,58px);

    margin-bottom:35px;

}

h3{

    font-size:28px;

}

p{

    margin-bottom:22px;

    color:#555;

}


/* ---------- CONTAINER ---------- */

.container{

    width:min(1280px,92%);

    margin:0 auto;

}


/* ---------- LINKS ---------- */

a{

    text-decoration:none;

    transition:.3s;

    color:inherit;

}


/* ---------- BUTTONS ---------- */

.button-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        18px
        42px;

    border-radius:999px;

    background:var(--gold);

    color:white;

    font-weight:600;

    transition:.35s;

}

.button-primary:hover{

    transform:translateY(-3px);

    box-shadow:

        0 20px 40px rgba(0,0,0,.15);

}

.button-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        18px
        42px;

    border-radius:999px;

    border:2px solid white;

    color:white;

    backdrop-filter:blur(12px);

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

    transition:.35s;

}

.button-secondary:hover{

    background:white;

    color:#222;

}


/* ---------- HEADER ---------- */

.header{

    padding:0;    
    background:rgba(35,35,35,.28);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(255,255,255,.12);

    transition:.35s;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    transition:.35s;

}

.header .container{

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

    padding:12px 0;
}

.logo{

    display:flex;

    flex-direction:column;

    color:white;

    font-size:48px;

}

.logo span{

    font-family:"Cormorant Garamond";

    font-size:38px;

}

.logo small{

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:12px;

}


/* ---------- NAVIGATION ---------- */

.navigation ul{

    display:flex;

    list-style:none;

    gap:38px;

    align-items:center;

}

.navigation a{

    color:white;

    font-weight:500;

    position:relative;

}

.navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:white;

    transition:.3s;

}

.navigation a:hover::after{

    width:100%;

}

.airbnb-link{

    padding:

        12px
        26px;

    border-radius:999px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.25);

}


/* ---------- HERO ---------- */

.hero{

    position:relative;

    min-height:92vh;

    padding-top:110px;

    overflow:hidden;

}

.hero-image{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 58%;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.45),

        rgba(0,0,0,.30),

        rgba(0,0,0,.55)

    );

}

.hero-content{

    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:center;

    min-height:92vh;

    max-width:900px;

    padding:40px 0 80px 80px;

    color:white;

}

.hero-content h1{

    color:white;

}

.hero-content p{

    color:rgba(255,255,255,.92);

    font-size:21px;

}

.eyebrow{

    text-transform:uppercase;

    letter-spacing:6px;

    font-size:14px;

    margin-bottom:25px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

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

.hero-features{

    margin:40px 0;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.hero-features div{

    color:white;

    font-size:18px;

    font-weight:500;

    text-shadow:0 2px 10px rgba(0,0,0,.35);

}
/* ===========================================================
   SECTION SPACING
=========================================================== */

section{

    padding:140px 0;

}

.section-label{

    display:inline-block;

    color:var(--gold);

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:13px;

    margin-bottom:18px;

    font-weight:600;

}


/* ===========================================================
   HIGHLIGHTS
=========================================================== */

.highlights{

    background:white;

}

.highlights .container{

    display:grid;

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

    gap:35px;

}

.highlights article{

    background:white;

    border-radius:var(--radius);

    padding:45px;

    box-shadow:var(--shadow);

    text-align:center;

    transition:var(--transition);

}

.highlights article:hover{

    transform:translateY(-10px);

}

.highlights svg{

    width:62px;

    height:62px;

    fill:var(--gold);

    margin-bottom:28px;

}


/* ===========================================================
   SPLIT LAYOUT
=========================================================== */

.split-layout,
.reverse-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.reverse-layout .image-column{

    order:1;

}

.reverse-layout .text-column{

    order:2;

}

.image-column{

    overflow:hidden;

    border-radius:22px;

    box-shadow:var(--shadow);

}

.image-column img{

    width:100%;

    display:block;

    transition:.8s;

}

.image-column:hover img{

    transform:scale(1.05);

}


/* ===========================================================
   FEATURE LIST
=========================================================== */

.feature-list{

    list-style:none;

    margin-top:35px;

}

.feature-list li{

    padding:14px 0;

    border-bottom:1px solid #ececec;

    color:#555;

}


/* ===========================================================
   GALLERY
=========================================================== */

.gallery{

    background:white;

}

.gallery-header{

    text-align:center;

    margin-bottom:70px;

}

.gallery-grid{

    columns:3 320px;

    column-gap:22px;

}

.gallery-item{

    display:block;

    margin-bottom:22px;

    break-inside:avoid;

    overflow:hidden;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.gallery-item img{

    width:100%;

    display:block;

    transition:.7s;

}

.gallery-item:hover img{

    transform:scale(1.06);

}


/* ===========================================================
   REGION
=========================================================== */

.region{

    background:var(--background);

}


/* ===========================================================
   CONTACT
=========================================================== */

.contact{

    background:white;

}

.contact-grid{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:90px;

    align-items:start;

}

.contact-box{

    margin-top:35px;

    padding:30px;

    border-left:4px solid var(--gold);

    background:#faf8f5;

}

.contact-form{

    background:white;

    padding:60px;

    border-radius:24px;

    box-shadow:var(--shadow);

}


/* ===========================================================
   FORM
=========================================================== */

.form-group{

    display:flex;

    flex-direction:column;

    margin-bottom:28px;

}

.form-group label{

    margin-bottom:10px;

    font-weight:600;

    color:#555;

}

input,
select,
textarea{

    width:100%;

    padding:18px;

    border-radius:14px;

    border:1px solid #dddddd;

    background:white;

    font-size:16px;

    transition:.3s;

    font-family:inherit;

}

textarea{

    resize:vertical;

    min-height:180px;

}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:

        0 0 0 4px rgba(185,152,87,.15);

}

.date-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:22px;

}

.full-width{

    width:100%;

}

.honeypot{

    display:none;

}

/* ===========================================================
   WEITERE UNTERKUNFT
=========================================================== */

.other-house{

    background:#ffffff;

}

.other-house .image-column{

    border-radius:24px;

    overflow:hidden;

}

.other-house img{

    width:100%;

    display:block;

}

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

footer{

    background:#1f1f1f;

    color:#d8d8d8;

    padding:90px 0;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

}

footer h3{

    color:white;

    margin-bottom:20px;

}

footer ul{

    list-style:none;

}

footer li{

    margin-bottom:12px;

}

footer a{

    color:#d8d8d8;

}

footer a:hover{

    color:white;

}


/* ===========================================================
   LIGHTBOX
=========================================================== */

.lightbox{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    z-index:99999;

}

.lightbox img{

    max-width:90%;

    max-height:90%;

    border-radius:12px;

}

.lightbox button{

    position:absolute;

    background:none;

    border:none;

    color:white;

    font-size:42px;

    cursor:pointer;

}

.lightbox-close{

    top:35px;

    right:45px;

}

.lightbox-prev{

    left:35px;

    top:50%;

    transform:translateY(-50%);

}

.lightbox-next{

    right:35px;

    top:50%;

    transform:translateY(-50%);

}


/* ===========================================================
   SCROLL TOP
=========================================================== */

.scroll-top{

    position:fixed;

    right:35px;

    bottom:35px;

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:var(--gold);

    color:white;

    cursor:pointer;

    opacity:0;

    pointer-events:none;

    transition:.35s;

    box-shadow:var(--shadow);

}

.scroll-top.visible{

    opacity:1;

    pointer-events:auto;

}


/* ===========================================================
   ANIMATION
=========================================================== */

.fade{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.fade.visible{

    opacity:1;

    transform:none;

}

/* ===========================================================
   LAGE / KARTE
=========================================================== */

.location{

    padding:110px 0;

    background:#f7f5f1;

}

.location-header{

    max-width:720px;

    margin:0 auto 50px;

    text-align:center;

}

.location-header h2{

    margin-bottom:25px;

}

.location-header p{

    font-size:18px;

    line-height:1.8;

}

.location-map{

    width:100%;

    height:520px;

    overflow:hidden;

    border-radius:4px;

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

}

.location-map iframe{

    width:100%;

    height:100%;

    border:0;

    display:block;

}

.location-note{

    margin:18px 0 0;

    text-align:center;

    font-size:14px;

    color:#777;

}

/* ===========================================================
   AUSSTATTUNG
=========================================================== */

.amenities{

    padding:110px 0;

    background:#ffffff;

}


.amenities-header{

    max-width:720px;

    margin:0 auto 60px;

    text-align:center;

}


.amenities-header h2{

    margin-bottom:22px;

}


.amenities-header p{

    font-size:18px;

    line-height:1.8;

    color:#666;

}


.amenities-grid{

    display:grid;

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

    gap:60px 80px;

}


.amenity-category{

    border-top:1px solid #ddd;

    padding-top:28px;

}


.amenity-category > h3{

    margin:0 0 25px;

    font-family:"Cormorant Garamond",serif;

    font-size:30px;

    font-weight:600;

    color:var(--primary);

}


.amenity-list{

    display:flex;

    flex-direction:column;

}


.amenity{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:16px 0;

    background:transparent;

}


.amenity-icon{

    flex:0 0 34px;

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(201,152,87,.35);

    border-radius:50%;

}


.amenity-icon span{

    color:var(--gold);

    font-size:16px;

    line-height:1;

}


.amenity strong{

    display:block;

    margin:0 0 3px;

    font-family:"Cormorant Garamond",serif;

    font-size:21px;

    font-weight:600;

    color:var(--primary);

}


.amenity p{

    margin:0;

    font-size:14px;

    line-height:1.5;

    color:#777;

}

/* ===========================================================
   GÄSTEBEWERTUNGEN
=========================================================== */

.reviews{

    padding:100px 0;

    background:#f7f5f1;

    text-align:center;

}


.reviews-content{

    max-width:600px;

    margin:0 auto;

}


.reviews-stars{

    margin:25px 0 10px;

    color:var(--gold);

    font-size:27px;

    letter-spacing:7px;

}


.reviews-score{

    font-family:"Cormorant Garamond",serif;

    font-size:64px;

    line-height:1;

    font-weight:600;

    color:var(--primary);

}


.reviews-score span{

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

    font-size:22px;

    font-weight:400;

    color:#777;

}


.reviews-content > p{

    margin:18px 0 25px;

    font-size:17px;

    color:#666;

}


.reviews-link{

    display:inline-block;

    font-size:14px;

    font-weight:500;

    color:var(--primary);

    text-decoration:underline;

    text-underline-offset:4px;

}

/* ==========================================================
   VERFÜGBARKEITSKALENDER
========================================================== */

.availability-calendar {

    margin-bottom: 42px;

    padding: 30px;

    background: rgba(247,245,241,.72);

    border: 1px solid rgba(60,50,40,.10);

    box-shadow: 0 8px 30px rgba(0,0,0,.04);

}


/* ----------------------------------------------------------
   KOPF
---------------------------------------------------------- */

.calendar-header {

    display: grid;

    grid-template-columns: 46px 1fr 46px;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

}


.calendar-header h3 {

    margin: 0;

    text-align: center;

    font-family: "Cormorant Garamond", serif;

    font-size: 30px;

    line-height: 1.1;

    font-weight: 600;

    color: #39332e;

}


.calendar-nav {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 1px solid rgba(60,50,40,.12);

    border-radius: 50%;

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

    color: #51463d;

    cursor: pointer;

    font-size: 27px;

    line-height: 1;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.calendar-nav:hover {

    background: #fff;

    border-color: rgba(60,50,40,.25);

    transform: scale(1.04);

}


/* ----------------------------------------------------------
   WOCHENTAGE
---------------------------------------------------------- */

.calendar-weekdays {

    display: grid;

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

    gap: 6px;

    margin-bottom: 7px;

}


.calendar-weekdays span {

    text-align: center;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: #8a8178;

}


/* ----------------------------------------------------------
   TAGE
---------------------------------------------------------- */

.calendar-days {

    display: grid;

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

    gap: 6px;

}


.calendar-day {

    position: relative;

    aspect-ratio: 1;

    min-width: 0;

    padding: 0;

    border: 1px solid transparent;

    border-radius: 8px;

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

    color: #403a35;

    cursor: pointer;

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

    font-size: 14px;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;

}


.calendar-day:hover:not(:disabled) {

    border-color: #927b67;

    background: #fff;

    transform: translateY(-1px);

}


/* ----------------------------------------------------------
   LEERE FELDER
---------------------------------------------------------- */

.calendar-day.empty {

    background: transparent;

    border-color: transparent;

    cursor: default;

}


/* ----------------------------------------------------------
   VERGANGENHEIT
---------------------------------------------------------- */

.calendar-day.past {

    color: #c2bdb8;

    background: rgba(230,227,222,.55);

    cursor: default;

}


/* ----------------------------------------------------------
   NICHT VERFÜGBAR
---------------------------------------------------------- */

.calendar-day.unavailable {

    color: #aaa39d;

    background:
        repeating-linear-gradient(
            135deg,
            #e2ded8 0,
            #e2ded8 5px,
            #d9d4ce 5px,
            #d9d4ce 7px
        );

    cursor: not-allowed;

}


/*
   Dezentes Symbol für gesperrte Tage
*/

.calendar-day.unavailable::after {

    content: "";

    position: absolute;

    left: 25%;

    right: 25%;

    top: 50%;

    height: 1px;

    background: rgba(100,90,80,.45);

    transform: rotate(-35deg);

}


/* ----------------------------------------------------------
   ZEITRAUM
---------------------------------------------------------- */

.calendar-day.in-range {

    background: #e9dfd4;

    border-radius: 0;

}


/* ----------------------------------------------------------
   AUSGEWÄHLT
---------------------------------------------------------- */

.calendar-day.selected {

    background: #8b725d;

    border-color: #8b725d;

    color: white;

    font-weight: 600;

    border-radius: 50%;

    z-index: 2;

}


.calendar-day.selected:hover {

    background: #8b725d;

    border-color: #8b725d;

    transform: none;

}


/* ----------------------------------------------------------
   HEUTIGER TAG
---------------------------------------------------------- */

/*
   Das JavaScript bekommt dafür später noch
   eine kleine Erweiterung.
*/

.calendar-day.today {

    box-shadow:
        inset 0 0 0 2px #8b725d;

}


/* ----------------------------------------------------------
   LEGENDE
---------------------------------------------------------- */

.calendar-legend {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 24px;

    padding-top: 18px;

    border-top: 1px solid rgba(60,50,40,.08);

    font-size: 12px;

    color: #766e66;

}


.calendar-legend > div {

    display: flex;

    align-items: center;

    gap: 7px;

}


.legend-dot {

    display: inline-block;

    width: 11px;

    height: 11px;

    flex: 0 0 11px;

    border-radius: 50%;

}


.legend-dot.available {

    background: white;

    border: 1px solid #aaa29a;

}


.legend-dot.unavailable {

    background: #ddd8d1;

}


.legend-dot.selected {

    background: #8b725d;

}


/* ----------------------------------------------------------
   HINWEIS
---------------------------------------------------------- */

.calendar-message {

    margin: 18px 0 0;

    font-size: 13px;

    line-height: 1.6;

    color: #766e66;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .availability-calendar {

        padding: 20px 14px;

        margin-bottom: 32px;

    }


    .calendar-header {

        grid-template-columns: 40px 1fr 40px;

        gap: 6px;

        margin-bottom: 20px;

    }


    .calendar-header h3 {

        font-size: 26px;

    }


    .calendar-nav {

        width: 40px;

        height: 40px;

        font-size: 24px;

    }


    .calendar-days {

        gap: 4px;

    }


    .calendar-weekdays {

        gap: 4px;

    }


    .calendar-day {

        border-radius: 6px;

        font-size: 13px;

    }


    .calendar-day.selected {

        border-radius: 50%;

    }


    .calendar-legend {

        gap: 12px;

        font-size: 11px;

    }

}