/*  @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,400;1,600&display=swap'); */
        html {
            font-family: 'Lora', serif;
        }
        
      /*  @import url('https://fonts.googleapis.com/css2?family=Lora&display=swap'); */
  
@font-face {
  font-family: 'Lora-Regular';
  src:  url('resources/Lora-Regular.ttf') format('ttf');
}       

@font-face {
  font-family: 'Lora-Italic';
  src:  url('resources/Lora-Italic.ttf') format('ttf');
}



      body {
            padding: 0;
            margin: 0;
            font-family: 'Lora-Regular', serif;
            max-width: 100vw; overflow-x: hidden;}


	body i {
		font-family: 'Lora-Italic';
	}
 
    section:not(.section--autoHeight) {
            min-width: 100vw;
            min-height: 80vh;
            max-height: 80vh;
            max-width: 100vw;
            position: relative;
            background-color: transparent;
            border-top: 2px solid white;
            overflow: hidden;
            
        }

        .section--autoHeight {
            min-width: 100vw;
            min-height: 80vh;
       
            max-width: 100vw;
            position: relative;
            background-color: transparent;
            border-top: 2px solid white;
            overflow: hidden;  
        }
        
        #description {position: absolute;z-index: 9998; padding: 8px; text-shadow: 0 0 1px black;left: 0; display: none}
        
        article {
            min-width: 22.22vw;
            max-width: 22.22vw;
            padding-top: 2.5vh;
            padding-left: 2.5vw;
            padding-right: 8.5vw;
            min-height: 80vh;
            background-color: transparent;
            left: 0;
            float: left;
            overflow: scroll;
        
        }
    


.star {max-width: 18px; max-height: 20px;top: -15px; background-color: transparent; float: revert; border: none;}


        .medium {
            /*min-width: 55.78vw;*/
            max-width: 55.78vw;
        }
        
        .large {
            min-width: 75.78vw;
            max-width: 55.78vw;
        }
        
        .bye {
            
            right: 40px;
            position: absolute;
            padding-bottom: 10vh;
            font-size: 2em;
            color: white;
        }
        
        .startpage {
            margin-top: 149px;
            min-height: 80vh;
        }
        
        .endpage {
            min-height: 100vh;
            background-color: orange
        }
        
        h1,
        h2,
        h3 {
            padding: 0;
            margin: 0;
            
            color: #625858;
           
        }

.big {font-size: 4em!important;white-space: nowrap;text-indent: -60px; padding-left: 70px}

        
         .contact_headline{color: white}
        
        .instagram{height: 30px; width: 30px; border: none;right: 10px;padding: 100px; position: absolute;animation: pulse 1s 3;animation-delay: 3s}
        
        
        h2,
        h3 {
            color: orange
        }
        
        h3 {
            font-style: italic;
            font-size: 0.8em
        }
        
        p {
            color: black;
            font-style: normal;
            line-height: 1.3em;
             
            font-size: 0.8em
        }
.disclaimer{position: absolute;
bottom: 0;
padding-left: 55px;
text-indent: -7px;color: orange;}

        .space {margin-top: 80px}
        a {
            text-decoration: none;
            color: #625858;
            font-family: arial, sans-serif;
            font-size: 1em
        }

        
        a:visited{color: #625858}
         a:hover{color: #625858}
        
        a.mail{color: white; font-family: 'lora'}
      


#home_02 {   
background-position: center;
background-size: 100%;
background-repeat: no-repeat; 
display: block;}

#home_03{
display: block;
    background-image: url(bilder/sonnenhaus_02.JPG);
    background-position: center; background-repeat: no-repeat;background-size: cover
}
#home_01 {overflow: visible!important}
        
        a:hover {
            color: coral;
        }

.hyperlink {color: orange!important; font-family: 'lora' , 'serif' }
.whitelink {border-bottom: none; color: white!important; padding-bottom: 3px}
.smallstar{max-width: 18px;top: 4px;left: -2px}
.logo {max-width: 200px; margin-left: -20px}

.logo_img {max-width: 80px; padding-right:6px;background-color: transparent; border-left: none!important}

.claim {padding-top: 5px;padding-left: 85px; text-indent: -18px;font-size: 1.5em!important;    color: #625858;
                font-family: 'Lora', serif;
            font-style: italic!important;
            font-size: 1em}

        h1 {
            font-size: 2.5em;
            font-style: italic;
            line-height: 0.95em;
            padding-top: 20px;
            
        }

h2 { font-size: 2.1em!important; font-weight: 600; line-height: }
        
        h2 {
            
            font-size: 1.3em;
            font-style: italic;
        }

h3{text-indent: -10px;}
        
        p {
            font-size: 0.8em;
        }
        .white {color: white;}
        
        
        
        nav {
            z-index: 9999;
            float: right;
            width: auto;
            padding-top: 1.0em;
            padding-left: 66px;
            position: absolute;
            bottom: 18px;
            left: 3.7vw;
        }
        
        .close {
            visibility: hidden;
        }
        
          .cookie_close {
        }
        
        
        
        .fact {background-image: url(sprites/hook.svg); background-size: 40px; background-repeat: no-repeat;background-position: 0% 40%; font-size: 1.2em; font-weight: 400; font-style: italic; max-width: 200px; float: none; padding: 20px; padding-left: 60px; min-height: 60px; margin-left: -40px;color: white;}
.no {background-image: url(sprites/no.svg);}

.price {background-image: url(sprites/two_persons.svg); background-size: 40px; background-repeat: no-repeat;background-position: 0% 40%; font-size: 1.2em; font-weight: 400; font-style: italic; max-width: 200px; float: none; padding: 20px; padding-left: 60px; min-height: 60px; margin-left: -40px;color: orange;}
        
        .cleaning {background-image: url(sprites/cleaning.svg)}
        
        .additional {background-image: url(sprites/add_persons.svg)}
        
        .three_nights {background-image: url(sprites/night.svg)} 
        
        .two_persons_one_night {background-image: url(sprites/two_persons_night.svg); background-size: 60px;}
        
        .two_persons_one_week {background-image: url(sprites/two_persons_week.svg); background-size: 60px;}

        
        .gegend_img{display: none; width: 100%;padding-bottom: 30px;margin-left: -10px}
        
        close_sprite {
            display: none;
        }
        
        .visible {
            display: block!important;
        }
        
        .invisible {
            display: none!important;
        }
        
        .stoerer_invisible {
          animation: leftaway 1s ease forwards 1!important;
        }
        
        @keyframes leftaway {
            
            0%{margin-left: -5px}
            
            100%{margin-left: -400px}
            
        }
        
        
        
        .open_sprite {
            display: block
        }
        
        li {
            font-size: 0.8em;
            float: left;
            list-style: none;
            padding-right: 20px;
            font-style: normal;
            color: crimson
        }
        
      
      
        
        #slider_info_left, #slider_info_right{position: absolute;z-index: 9999;margin-left: 11vw; left: 50vw; top: 50%;font-style: italic; font-weight: 400;background-color: orange;padding: 20px; border-radius: 50px;margin-top: -13px; animation: pulse 6s ease infinite;border: 1px solid white}

        
                #slider_info_left,#slider_info_right,{position: absolute;z-index: 9999;left: 63vw; top: 50%;font-style: italic; font-weight: 400;background-color: orange;padding: 20px; border-radius: 50px;margin-top: -13px}
        
    #slider_info_right:hover{background-color: coral}
        
         .arrow_sprite {  width: 32px;
                position: absolute;
                left: 50%;
                margin-left: -15px;
                border-left: 0;
                margin-top: 4px;
             }
        
        
#cookies {width: 80vw;padding-left: 5vw; padding-right: 15vw; padding-top: 5vh; position: fixed; height: 20vh; z-index: 999999999999; bottom: 0;background-color: white;}
        #slider_info_left {margin-left: -50px; transform: rotate(180deg);left: 5vw; }
        
        
        @keyframes pulse {
            
            
            0%{transform: scale(1.0);}
            50% {transform: scale(1.1)}
            
        }
        
        input {
            max-width: 180px;
            height: 20px
        }
        
        input[type=submit] {
            border-radius: 2px;
            border: 0;
            width: 80px;
            height: 25px;
            background: #fff;
            font-family: 'arial';
            /* Old browsers */
            background: -moz-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
            /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #f4f4f4), color-stop(100%, #ededed));
            /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
            /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
            /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
            /* IE10+ */
            background: linear-gradient(to bottom, #f4f4f4 1%, #ededed 100%);
            /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#ededed', GradientType=0);
            /* IE6-9 */
        }
        
        label {
            color: white;
            min-width: 400px;
            font-family: 'Lora', serif;
            font-style: italic;
            font-size: 0.8em
        }
        
        header {
            background-color: white;
            height: 180px;
            width: 83vw;
            padding-left: 2vw;
            padding-right: 15vw;
            position: absolute;
            z-index: 999;
            top: 0;
            border-bottom: solid 1px black;
        }
            #price_section{max-height: none;min-height: auto}
        
        #home {
           /* background-image: url(bilder/wohnzimmer.jpg);*/
            background-position: center;
            background-size: cover;
        }
        
        #home {min-height: 100vh;max-height: none;}
        
        #home_02 {
            background-position: center;
            background-size: cover;
        }
        
        .daten {background-color: orange;}
        
        ul {position: absolute; top: 70px}
        
       
        
        #raueme {
            background-image: url(bilder/slide_01.jpg);
            background-position: center;
            background-size: cover;
            animation: slide 10s ease;
        }
        
        #raeume{padding-left: 60px}
        
        #gegend {
            background-image: url(bilder/gegend.jpeg);
            background-position: center;
            background-size: cover;
        }
        
        #buchen {background-color: orange; display: block}
        
        #price {max-height: 50vh!important;min-height: 50vh!important;}
        
        .black {color: black!important}
        
        #start {
            background-image: url(bilder/sonnenhaus.JPG);
            background-size: cover;
            background-position: 0% 30%
        }
        /*min-width = 66.66 mal anzahl der bilder */
        
        #stoerer {
            padding: 4px;
            color: white;
            font-family: 'Lora', serif;
            margin-top: -20px;
            font-size: 2em;
            font-style: italic;
            animation: swutsch 2s ease 1;
            background-color: orange;
            padding-left: 70px;
            animation-delay: 20s;
            padding-right: 18px;
            border-radius: 8px;
            margin-left: -5px;
            margin-top: -5px;
            border: white 1px solid;
                
                
        }
       
        
        
        #stoerer {
            position: fixed;
            z-index: 9999;
            height: 50px;
            bottom: 50px;
            right: 0;
        }
        
        @keyframes swutsch {
            0% {
                transform: rotate(0deg)
            }
            50% {
                transform: rotate(-3deg)
            }
            75% {
                transform: rotate(3deg)
            }
        }
        
        img {
            width: 66.66vw;
            float: left;
            position: relative;
            border-left: 0.25vw white solid
        }
 .gegend_bild_small{display: none; }

#gegend_text {}
#slider {max-width: 54.66vw;}

@media (max-width:1024px){
    
    h2 {font-size: 1.7em!important}
.big {font-size: 3.6em!important;}
    section {padding-bottom: 50px!important}
}

        
@media (max-width: 992px) {section {max-height:none;min-height: 0;}.daten{padding-bottom: 15vh}#slider{min-width:none;max-width: 40vw} #slider_section{max-height: 120vh;}#slider_info_right{left: 50vw;margin-left:-4vw}
    #price{max-height: none!important;}
#gegend{min-width: 55.78vw}
    #home {min-height: auto}
    #home_01 {max-width: 40.66vw;max-height: none; min-height: auto;padding-bottom: 20vh; }
    #home_02{display: none}#home_03{display: none}
    
    #buchen_extra {display:none }
    header {padding-left: 3vw;padding-right: 14vw}
    nav {padding-left: 0vw}
    .gegend_bild{display: block; max-width: 50vw!important;min-width:21vw!important; margin-top: 120px}
}
        
        @media (max-width: 1200px) {}
        
        @media (max-width: 768px) {
            
            .gegend_bild{display: none;}
                       .gegend_bild_small{display: block;max-height: 33vh!important;min-height: 33vh!important; min-width: 100vw;}
            
             #price {max-height: none!important;min-height: auto!important;}

            section {
                max-height: none;
                min-height: auto;
               
            }
            article {
                min-width: 39vw;
                max-width: 39vw;
            }
             #raeume{padding-left: 2.5vw; max-width: 80vw; min-width: 80vw;}
            #slider {max-width: 100vw;min-width: 100vw;}
            #home {max-height: none!important}
            #home_start {min-width: 80vw;max-width: 80vw; max-height: none;min-height:initial;}
            #slider {min-height: initial}
            
            

        }


        


        @media (max-width: 992px) {
            
            .claim {font-size: 1.2em!important; text-indent: -15px}
            .logo_img {padding-right: 20px}
            #facts {margin-top: 50px}
            
            .fact {max-width: 88%;min-height: none}
            
            .hyperlink {border-bottom: none;}
            .smallstar {top:0px!important}
            
            .disclaimer {position: relative;}
            
            .big{font-size: 2.2em!important; }
            
            #home_01 {max-height: none; min-height: auto!important; padding-bottom: 50px;}
            
            .gegend_bild_small{display: block!important;min-height: 40vh;}
            #slider_section{max-height: 100vh;border: none;}
                    #price {max-height: none!important;min-height: auto!important;}
            
                 #raeume{padding-left: 2.5vw; min-height: 26vh}
            
            .price {background-color: transparent}
            
            #slider_info_right{
                right: 3px;
                left:auto;

margin-top: 160px!important;top:auto;
           opacity: 0.5;}
            
                    .space {margin-top: 100em;position: absolute}
            
                     .contact_headline{color: #625858;}
            
            
            ul {position: relative;top: 0;padding-top: none;}
            
            .daten {min-height: auto;max-height: none; overflow: visible;margin-top: -36px;}
           
              #slider_info{left: 45vw;display: none}
            
            #kontakt{background-color: white;color: orange!important}
    
            
            .instagram {width: 30px;height: 30px;padding-top: 82px;right: 20px; padding-right: 0 }
            
            
            
            #buchen_extra {display: none}
            #buchen {min-height: 100vh;}
              .gegend_img{display: block; min-width: 100vw}
            #home{display: block}
            .daten {padding-bottom: 0;}
            #gegend {display: none}
            section {
              
                overflow: visible;
            }
            .endpage {
                min-height: auto;
                background-color: orange;
                background-color: transparent;
border: none;
}
            
            #stoerer {
                width: 80px;
                bottom: 0;
                font-size: 1em;
                padding-left: 20px;
                font-weight: 600!important
            }
            .bye {
                bottom: 20px;
                padding: 0;
                position: absolute;
                right: 20px
            }
            #start {
                background-position: 70% 50%
            }
            header {
                height: 130px;
                border: none
            }
            article {
                min-width: 95vw!important;
                max-width: 95vw!important;
                padding-left: 2.5vw;padding-right: 2.5vw;
                max-height:none;  min-height: auto;
            }
      
            
            h1 {font-size: 2em}
            h2,
            h3 {
                font-size: 1em
            }
            h3 {  
            font-weight: 400;
            font-style: italic;
            color: orange;}
            
 
            
                    h2 {font-size: 1.5em;}
            
            nav {
                min-width: 100%;
                position: absolute;
                left: 0;
                top: 130px;
                margin: 0;
                padding: 0;
                background-color:rgba(0, 0, 0, 0.6);
                min-height: 50px;
                overflow: hidden;
            }
            .open {
                /*animation: open forwards 1s ease;*/  height: 408px
            }
            .blinds {
                animation: blinds forwards 1s ease;
            }
            li {
                width: 100%;
                height: 37px;
                background-color: orange;
                left: 0;
                padding-left: 16px;
                padding-top: 13px;
                border-top: 1px white solid;
                font-size: 1em;
                font-style: italic;
                font-weight: 400;
            }
            p {
                font-size: 1em
            }
            @keyframes teaser {
                0% {
                    transform: rotate(0deg);
                    height: 50px
                }
                5% {
                    transform: rotate(3deg);
                    height: 70px
                }
                10% {
                    transform: rotate(0deg);
                    height: 50px
                }
            }
            .close {
                visibility: visible;
                animation: none!important
            }
            .close_sprite {
                width: 32px;
                position: absolute;
                left: 50%;
                margin-left: -25px;
                border-left: 0;
                margin-top: 12px;
                display: none;
            }
            
            
            .open_sprite {
                width: 32px;
                position: absolute;
                left: 50%;
                margin-left: -25px;
                border-left: 0;
                margin-top: 12px;
                display: block;
            }
           
            @keyframes rotate {
                0% {
                    transform: rotate(0deg)
                }
                100% {
                    transform: rotate(360deg)
                }
            }
            @keyframes open {
                0% {
                    height: 0px;
               background-color:rgba(0, 0, 0, 0.6);

                }
                
                33%{background-color:rgba(0, 0, 0, 0.0);}
                
                66%{background-color:rgba(0, 0, 0, 0.6);}
                100% {
                    height: 408px
                }
            }
            @keyframes blinds {
                0% {
                    transform: rotatex(0deg)
                }
                100% {
                    transform: rotatex(360deg)
                }
            }
        }
@media(max-width:600px){   h1 {
                font-size: 1em
            }
.star {max-width: 20px; max-height: 20px;top: -15px; background-color: transparent; float: revert; border: none;}
}


@media (max-width: 450px) { .big{font-size: 1.8em!important}#slider_info_right{margin-top: 122px!important;}}


@media (max-width: 350px) {
    p{font-size: 0.9em!important}
    
    h3{font-size: 0.9em!important}
    
    #slider_info_right {right: 7px;
left: auto;
margin-top: 85px!important;
top: auto;
opacity: 0.5;}
    
 .star {max-width: 10px; max-height: 10px;top: -15px; background-color: transparent; float: revert; border: none;padding: 0px}
    h2 {font-size: 1.0em!important; line-height: 1em}
    
    .big{font-size: 1.5em!important}
    
}