/* ===========================================================
   mobile.css
   Mikrohaus Wachau
=========================================================== */


/* -----------------------------------------------------------
   1200px
------------------------------------------------------------*/

@media (max-width:1200px){

.container{

    width:94%;

}

.split-layout,
.reverse-layout{

    gap:60px;

}

.contact-grid{

    grid-template-columns:350px 1fr;

}

.hero-content{

    max-width:620px;

}

}


/* -----------------------------------------------------------
   992px
------------------------------------------------------------*/

@media (max-width:992px){

.header .container{

    padding:20px 0;

}

.navigation ul{

    gap:22px;

}

.hero-content{

    padding-top:180px;

}

.hero-content h1{

    font-size:58px;

}

.highlights .container{

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

}

.split-layout,
.reverse-layout{

    grid-template-columns:1fr;

}

.reverse-layout .image-column,
.reverse-layout .text-column{

    order:initial;

}

.image-column{

    margin-bottom:40px;

}

.contact-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr 1fr;

}

.gallery-grid{

    columns:2 260px;

}

}

/* -----------------------------------------------------------
   768px
------------------------------------------------------------*/

@media (max-width:768px){

body{

    font-size:17px;

}

section{

    padding:90px 0;

}

.hero-features{

    align-items:center;

    text-align:center;

}

.hero-features div{

    font-size:16px;

}

.header{

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

    backdrop-filter:blur(18px);

}

.header .container{

    flex-direction:column;

    gap:25px;

}

.navigation ul{

    flex-wrap:wrap;

    justify-content:center;

    gap:16px;

}

.logo{

    align-items:center;

}

.hero{

    min-height:900px;

}

.hero-content{

    padding-top:160px;

    text-align:center;

    max-width:100%;

}

.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

.hero-content h1{

    font-size:46px;

}

.button-primary,
.button-secondary{

    width:100%;

    max-width:340px;

}

.highlights .container{

    grid-template-columns:1fr;

}

.highlights article{

    padding:35px;

}

.gallery-grid{

    columns:2 180px;

}

.contact-form{

    padding:40px;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.date-grid{

    grid-template-columns:1fr;

}

}

/* -----------------------------------------------------------
   576px
------------------------------------------------------------*/

@media (max-width:576px){

body{

    font-size:16px;

}

.container{

    width:92%;

}

.hero{

    min-height:820px;

}

.hero-content{

    padding-top:140px;

}

.hero-content h1{

    font-size:38px;

    line-height:1.05;

}

.hero-content p{

    font-size:18px;

}

.eyebrow{

    letter-spacing:3px;

    font-size:12px;

}

.navigation{

    width:100%;

}

.navigation ul{

    flex-direction:column;

    gap:10px;

}

.airbnb-link{

    width:100%;

    text-align:center;

}

.gallery-grid{

    columns:1;

}

.contact-form{

    padding:28px;

}

.contact-box{

    padding:22px;

}

input,
textarea,
select{

    font-size:16px;

}

.footer-grid{

    gap:35px;

}

.scroll-top{

    right:18px;

    bottom:18px;

}

.lightbox img{

    max-width:96%;

    max-height:82%;

}

.lightbox-prev,
.lightbox-next{

    display:none;

}

}

/* -----------------------------------------------------------
   380px
------------------------------------------------------------*/

@media (max-width:380px){

.hero-content h1{

    font-size:32px;

}

.hero-content p{

    font-size:16px;

}

.button-primary,
.button-secondary{

    padding:15px 26px;

}

.logo span{

    font-size:30px;

}

.logo small{

    font-size:10px;

}

.contact-form{

    padding:22px;

}

}

/* ===========================================================
   AUSSTATTUNG – MOBILE
=========================================================== */

.amenities{

    padding:75px 0;

}


.amenities-header{

    margin-bottom:40px;

}


.amenities-header p{

    font-size:16px;

}


.amenities-grid{

    grid-template-columns:1fr;

}


.amenity{

    padding:28px 24px;

}


.amenity-icon{

    flex:0 0 36px;

    width:36px;

    height:36px;

}


.amenity-icon svg{

    width:25px;

    height:25px;

}


.amenity h3{

    font-size:23px;

}

.amenities{

    padding:75px 0;

}


.amenities-grid{

    grid-template-columns:1fr;

    gap:45px;

}


.amenity-category{

    padding-top:22px;

}


.amenity-category > h3{

    font-size:27px;

    margin-bottom:18px;

}


.amenity{

    padding:13px 0;

}


.amenity-icon{

    flex:0 0 32px;

    width:32px;

    height:32px;

}


.amenity strong{

    font-size:20px;

}


.amenity p{

    font-size:14px;

}

/* ===========================================================
   GÄSTEBEWERTUNGEN – MOBILE
=========================================================== */

.reviews{

    padding:75px 0;

}


.reviews-stars{

    font-size:23px;

    letter-spacing:5px;

}


.reviews-score{

    font-size:56px;

}