@import "fonts.css";

/************************ 
    VARIABLES 
*************************/

:root{
    --main-color: #9c2b56;
    --bright-color: white;
    --hover-color: #008000;
    --btn-bg: #9c2b56e6;
    --btn-bg-hover: #9c2b56;
    --p-color: rgb(85, 85, 85);
    --p-color-light: rgba(85, 85, 85,0.8);
    --glas:rgba(255, 255, 255, 0.4);
    --rundgang-btn:rgba(255, 255, 255, 0.6);

    --shadow-nav: 0 0 10px rgba(0, 0, 0,.25);
    --shadow-items: 0 5px 20px rgba(0, 0, 0,.2);
    --shadow-section: 0 0 10px rgba(0, 0, 0,.4);
    --shadow-btn: 2px 2px 5px rgba(0,0,0,.25);


    --blur: blur(10px);
    --transition: .3s ease-in-out;
    --hover-size:scale(.9);
    --hover-size-grow:scale(1.1);

    --border-radius10: 10px;
    --border-radius20: 20px;
    --border-radius-btn: 2em;

    --center: 0 auto 0 auto;
}

/*******************************
    GENERAL
 *******************************/

html{
    overflow: hidden;
}

body{
    margin:0;
    padding:0;
    box-sizing: border-box;
    background-color: #FFF;
    font-family: 'Roboto', serif;
    font-size: 1em;
    overflow: hidden;
}

/******************************
    INTERACTION 
 ******************************/

.hide {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.nocopy {
    pointer-events: none;

}

/******************************
    ANIMATION
 ******************************/

.transition-hover{
    transition: var(--transition);
    -webkit-transition: var(--transition);
}

.stern{
    animation: rotate 15s infinite linear;
    transform-origin: center;
    transform-box: fill-box;
    fill: white;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }

}

/****************************
    POSITIONING & STYLING
 ****************************/

#ausflugsziele{
    scroll-snap-type: none;
}

.sec-pic-container{
    height:50vh;
    /* max-height:600px; */
    overflow:hidden;
    position:relative;
}

.sec-pic-container video{
    position: absolute;
    /* top: 100px; */
}

.sec-pic{
    z-index: -1;
    position: absolute;
    min-width: 100%;
}

@media(min-aspect-ratio: 9/16){
    .sec-pic video{
        width: 100%;
        height: auto;
    }
}

@media(max-aspect-ratio: 16/9){
    .sec-pic video{
        width: 100%;
        height: auto;
    }
}

.width100{
    width:100%;
}

.height100{
    height:100%;
}

.height100vh{
    height:100vh;
}

.uppercase{
    text-transform: uppercase;
}

.flex{
    display:flex;
}

.align-items-c{
    align-items: center;
}

.text-align-c{
    text-align: center;
}

.text-align-l{
    text-align: end;
}

.centering{
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.list-none{
    list-style: none;
}

.accentuate{
    font-family: 'Roboto', serif;
    font-weight: 500;
    color: var(--main-color);
}

/* Shadows ***********************/

.shadow-sec{
    box-shadow: var(--shadow-section);
}

.shadow-nav{
    box-shadow: var(--shadow-nav);
}

.shadow-items{
    box-shadow: var(--shadow-items);
}

.shadow-sec-pic{
    box-shadow: var(--shadow-section);
}

.shadow-btn{
    box-shadow: var(--shadow-btn);
}

/* Items ***************************/

section hr{
    width:300px;
    margin:50px auto 30px auto;
    height:3px;
    background-color: var(--main-color);
    border:none;
}

a{
    text-decoration: none;
    color: var(--p-color);
}

a:hover{
    color:var(--hover-color);
}

button{
    cursor: pointer;
    border:none;
}

button:hover{
    box-shadow: var(--shadow-btn);
}

p{
    font-family: 'Roboto Light', serif;
    font-weight: 300;
    font-size: 1.2em;
    text-align: justify;
    max-width:1000px;
    margin:50px auto 50px auto;
    padding:0 20px 0 20px;
    color: var(--p-color);
}

h1{
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 2em;
    text-transform: uppercase;
    color: var(--main-color);
    text-align: center;
    margin:50px 0 0 0;
}

h2{
    font-weight: 700;
    text-transform: uppercase;
    color: var(--p-color);
    letter-spacing: .5rem;
    text-align: center;
}

h3{
    font-weight: 600;
    font-size: 1.2em;
    text-transform: uppercase;
    color: var(--p-color);
    text-align: center;
}

h4{
    text-transform: uppercase;
    color: var(--p-color);
    text-align: center;
}

h5{
    text-transform: uppercase;
    color: var(--p-color);
    text-align: center;
}

table{
    font-family: 'Roboto', serif;
    font-weight: 300;
    font-size: 1.2em;
}

.behandlungen{
    font-size: 1em;
    color: var(--p-color);
    margin: 0 auto;
    width: 90%;
}

.ul-text-align{
    text-align: left;
    color: var(--p-color);
    font-size: .85em;
    font-weight: 300;
}

/************************************************************************************************************
 FLOAT BUTTONS
 ************************************************************************************************************/

.float-btn a{
    z-index:1000;
    position:fixed;
    display:flex;
    background-color: var(--hover-color);
    opacity: .8;
    border:none;
    border-radius: 50%;
    width:80px;
    height:80px;
    font-size: .85em;
    color:var(--bright-color);
    justify-content: center;
    align-items: center;
}

.float-btn a:hover{
    opacity: 1;
    transform: scale(1.1);
}


/*************************************************************************************************************
 RUNDGANG SECTION
 *************************************************************************************************************/

.rundgang{
    position: relative;
    overflow-x: hidden;

}

.rundgang iframe {
    width:100%;
    height:100vh;
    border:none;
}

.down-arrow{
    display: none;
}

/* Bereiche **************************************/

.areas {
    flex-direction: row;
    position: absolute;
    top:50px;
    left:40px;
}

.areas a{
    margin-right: 30px;
    font-size: .75em;
    border-radius: var(--border-radius-btn);
    width:170px;
    padding:.25rem 0 .25rem 0;
    background-color: var(--rundgang-btn);
    color:var(--main-color);
    text-align: center;
}

.areas a:hover{
    background-color: var(--bright-color);
    box-shadow: var(--shadow-btn);
    color: var(--hover-color);
    cursor: pointer;
}

.areas a:focus{
    background-color: var(--bright-color);
    box-shadow: var(--shadow-items);
}

.areas a{
    color: var(--main-color);
}

.area-drop{
    position:absolute;
    background-color: var(--rundgang-btn);
    box-shadow: var(--shadow-items);
    border-radius:var(--border-radius10);
    overflow: hidden;
    display: none;
}

.area-li{
    color: var(--main-color);
    font-size: .8em;
    font-weight: 300;
    padding:10px 0 10px 0;
    list-style: none;
}

.area-rooms{
    width:150px;
    top:80px;
    left:50px;
}

.area-rooms a{
    display: flex;
    justify-content: center;
}

.area-culinary{
    width:150px;
    top:80px;
    left:250px;
}

.area-culinary a{
    display: flex;
    justify-content: center;
}

.area-wellness{
    width:150px;
    top:80px;
    left:450px;
}

.area-wellness a{
    display: flex;
    justify-content: center;
}

.area-landhaus{
    text-align: center;
    width:150px;
    top:80px;
    left:650px;
}

.area-landhaus a{
    display: flex;
    justify-content: center;
}

.area-rooms a:hover{
    background-color: var(--bright-color);
    font-weight: 500;
}

.area-culinary a:hover{
    background-color: var(--bright-color);
    font-weight: 500;
}

.area-wellness a:hover{
    background-color: var(--bright-color);
    font-weight: 500;
}

.area-landhaus a:hover{
    background-color: var(--bright-color);
    font-weight: 500;
}

/* TOGGLE ON / OFF DROPDOWNS***********************/

.drop-show {
    display:block;
    animation: opacity var(--transition) forwards; 
}


@keyframes opacity {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

/***************************************************************************************************************** 
    MOBILE PAD
*****************************************************************************************************************/

@media screen and (max-width:1400px){
    
    .sec-pic-container{
        height: 600px;
    }

    .vid-sec-pic{
        position:absolute;
        transform: translate(-50%,-50%);
        top:50%;
        left:50%;
        height:100%;
    }

    .logo img,svg{
        z-index: 1;
        width:60%;
        position: absolute;
    }

 
    /* Navigation ******************/

    nav{
        height:80px;
        overflow: hidden;
    }

    .nav-logo{
        position: absolute;
        top:15px;
        width:100px;
        margin-left: 20px;

    }

    .nav-items{
        flex-direction: column;
        align-items: center;
        min-width:100vw;
        padding:0;
        z-index: 999;
        position: absolute;
        height:230px;
        top: 80px;
    }

    .nav-items a{
        margin-left: 0;
        padding-top: 10px;
        font-size: .9em;
    }


    .sm-icons{
        z-index: 1000;
        position: absolute;
        top:280px;
        right:20px;
    }

    .burger{
        position: absolute;
        display: block;
        top:13px;
        right:15px;
        cursor: pointer;
    }

    .burger:hover{
        color:var(--hover-color);
    }

    .fa-times{
        position: absolute;
        display: none;
        color: var(--main-color);
        font-size: 1.5em;
        top:30px;
        right:30px;
        cursor: pointer;
    }

    .fa-times:hover {
        color:var(--hover-color);
    }

    /* Rundgang Section *************/

    .down-arrow{
        display: block;
    }

    .fa-arrow-alt-circle-down{
        position: absolute;
        top:100px;
        right:28px;
        color: var(--bright-color);
        font-size: 2em;
        cursor: pointer;
    }
    
    .fa-arrow-alt-circle-down:hover{
        color: var(--hover-color);
    }

    .areas {
        flex-direction: column;
        left:20px;
        top:100px;
    }

    .areas a{
        margin-bottom: 10px;
        font-size: .6em;
        border-radius: var(--border-radius-btn);
        width:100px;
        padding:.30rem 0 .30rem 0;
        background-color: var(--rundgang-btn);
        color:var(--main-color);
    }

    .area-rooms{
        width:120px;
        left:130px;
        top:100px;
    }

    .area-rooms a{
        font-size: .8em;
        padding:5px 0 5px 0;
    }

    .area-culinary{
        width:100px;
        left:130px;
        top:130px;
    }

    .area-culinary a{
        font-size: .8em;
        padding:5px 0 5px 0;
    }

    .area-wellness{
        width:100px;
        left:130px;
        top:162px;
    }

    .area-wellness a{
        font-size: .8em;
        padding:5px 0 5px 0;
    }

    .area-landhaus{
        width:120px;
        left:130px;
        top:195px;
    }

    .area-landhaus a{
        font-size: .8em;
        padding:5px 0 5px 0;
    }

}

/*************************************************************************************************************
    MOBILE PHONE
*************************************************************************************************************/

@media screen and (max-width:500px){

    .sec-pic-container{
        height: 350px;
    }

    .vid-sec-pic{
        position:absolute;
        transform: translate(-50%,-50%);
        top:50%;
        left:50%;
        height:auto;
    }


    /* Rundgang Section *************/

    .fa-arrow-alt-circle-down{
        display: block;
        position: absolute;
        top:100px;
        right:28px;
        color: var(--bright-color);
        font-size: 2em;
        cursor: pointer;
    }
    
    .fa-arrow-alt-circle-down:hover{
        color: var(--hover-color);
    }

    .areas {
        left:10px;
        top:90px;
    }

    .areas a{
        margin-bottom: 10px;
        font-size: .5em;
        border-radius: var(--border-radius-btn);
        width:80px;
        padding:.30rem 0 .30rem 0;
        background-color: var(--rundgang-btn);
        color:var(--main-color);
    }

    .area-rooms{
        width:120px;
        left:100px;
        top:90px;
    }

    .area-rooms a{
        font-size: .6em;
        padding:5px 0 5px 0;
    }

    .area-culinary{
        width:80px;
        left:100px;
        top:120px;
    }

    .area-culinary a{
        font-size: .6em;
        padding:5px 0 5px 0;
    }

    .area-wellness{
        width:80px;
        left:100px;
        top:150px;
    }

    .area-wellness a{
        font-size: .6em;
        padding:5px 0 5px 0;
    }

    .area-landhaus{
        width:120px;
        left:100px;
        top:180px;
    }

    .area-landhaus a{
        font-size: .6em;
        padding:5px 0 5px 0;
    }
}