@font-face {
    font-family: 'Roboto-Light';
    src: url('../fonts/Roboto-Light.eot');
    src: url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Light.woff') format('woff'),
        url('../fonts/Roboto-Light.ttf') format('truetype'),
        url('../fonts/Roboto-Light.svg#Roboto-Light') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: 'Roboto-Black';
    src: url('../fonts/Roboto-Black.eot');
    src: url('../fonts/Roboto-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Black.woff') format('woff'),
        url('../fonts/Roboto-Black.ttf') format('truetype'),
        url('../fonts/Roboto-Black.svg#Roboto-Black') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

/*allgemeines*/

* {
	margin: 0px;
	padding: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    scroll-behavior: smooth;
}


:root {
	--highlight:#5d6d96;
	--text: #100e06;
    --lightback: #f0f0f0;
}

img {
	max-width: 100%;/*  alle img responsive;max. die Breite, die des Fotos selbst hat --- */
	height: auto;
    margin-bottom: 36px;
}

header, nav, main, article, section, footer, img{
	display:block;
}

body{
    font-family: 'Roboto-Light', sans-serif;
	font-size:1rem;
	line-height:30px;
	font-weight: normal;
    color:var(--text);
}

h1, h2, h3 {
  font-family: Georgia, "serif";
  margin-bottom: 30px;
  font-size: 20px;
  text-transform: uppercase;
  position: relative;
}



p,a, a:visited{
	font-size:16px;
	  -webkit-hyphens:auto;
       -ms-hyphens:auto;
           hyphens:auto;
    color:inherit;
}

p{
    margin-bottom:30px;
}

header{
	height: 530px;
}

main ul {
  list-style: none;
}

main li{
	padding-bottom:5px;
}
strong {
    font-family: 'Roboto-Black';
    font-weight: normal;
}



/*classen und ids*/
.button, .button:visited {
  padding: 10px;
  border: 1px solid var(--highlight);
  background-color: var(--highlight);
  color: #fff;
  font-family: 'Roboto-Black';
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.button:hover, .button:focus, .button:active {
  border: 1px solid var(--text);
  background-color: #fff;
  color: var(--text);
  -webkit-filter: drop-shadow(1px 1px 2px #000);
          filter: drop-shadow(1px 1px 2px #000);
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;

}
.check{
	  max-width: 450px;
	  background-color: #fff;
}

.check li::before {
  content: "⨯";
  font-size: 22px;
  color: var(--highlight);
  display: inline-block;
  height: 22px;
  width: 22px;
  line-height: 22px;
  margin-right: 5px;
  text-align: center;
}

.check li:nth-of-type(2n+1) {
  background-color: var(--lightback);
}

.contentwrapper, .contentwrapper_schmal, .contentwrapper_nav{
    max-width:1400px;
    margin-left:auto;
	margin-right: auto;
    padding:80px 10px;
}

.contentwrapper_schmal{
    max-width:1000px;
	text-align: center;
}


.clearfix:after{
	content:"";
	display:block;
	clear:both;
}

.col{
	-webkit-column-count: 2;
	   -moz-column-count: 2;
	        column-count: 2;
	-webkit-column-gap: 0;
	   -moz-column-gap: 0;
	        column-gap: 0;
}

.col img{
	margin:0;
}

.ersteswort{
    font-family: 'Roboto-Black';
}

.geflext{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-direction:row;
          flex-direction:row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;	
}

.highlight{
	background-color:var(--highlight);
	color:#fff;
}

.links{
	text-align:left;
}

.header_punkte{
	background-position: center center;
	background-repeat: no-repeat;
	background-size:cover; 
}

.teaser_img{
	overflow: hidden;
}

.viertel, .dreiviertel, .halb, .full, .drittel, .zweidrittel{
	-ms-flex-preferred-size:100%;
	    flex-basis:100%;
	margin-bottom: 30px;
}

#aktuelles img{
	height: 60px;
	width: auto;
	margin:0 auto;
}

#aktuelles p{
    font-family: 'Roboto-Black';
	text-align: center;
	margin-top: 30px;
	margin-bottom: 0;
}

#hamburg{
	background-image: url("../img/slider_hamburg.webp");
}

#zillertal{
	background-image: url("../img/slider_berge.webp");
}
/*slider*/

#slider, .wrap, .slide-content{
    margin:0;
    padding:0;
    width:100%;
    height:530px;
    overflow-x:hidden;
}

.wrap {
	position:relative;
}


.slide{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: all 0s;
    -o-transition: all 0s;
    transition: all 0s;
}

.slide1{
	background-image: url('../img/slider_berge.webp');
}

.slide2{
	background-image: url('../img/slider_hamburg.webp');
}

.slide-content{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.slide-content a{
    font-size: 20px;
	font-family: 'Roboto-Black';
	letter-spacing: 2px;
	text-decoration: none;
	text-transform: uppercase;
    color:var(--text);
    background-color:#fff;
    padding:10px 20px;
}

.dir-control {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -30px;
  z-index: 5;
  display: inline-block;
  width: 50px;
  height: 50px;
}

.fa {
  display:inline-block;
   line-height: 50px;
   background-color:rgba(0,0,0, .3);
   width:50px;
   height:56px;
   color:white;
   text-align: center;
   vertical-align: bottom;
}

#dir-control-left{
    left:0;
    margin-left:30px;
}

#dir-control-right{
    right:0;
    margin-right:30px;
}

.slider-active{
    visibility:hidden;
    opacity:0;
}

.slide.slide-is-active{
    visibility:visible;
    opacity: 1;
}

.slide-transition{
    transition: all .5s ease-in-out;
}


/*slide in*/

.module {
  position: relative;
}
 
.come-in {
  -webkit-transform: translateY(150px);
      -ms-transform: translateY(150px);
          transform: translateY(150px);
  -webkit-animation: come-in 0.8s ease forwards;
          animation: come-in 0.8s ease forwards;
}

.come-in:nth-child(odd) {
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
}

.already-visible {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-animation: none;
          animation: none;
}

@-webkit-keyframes come-in {
  to { -webkit-transform: translatex(0); transform: translatex(0); }
}
@keyframes come-in {
  to { -webkit-transform: translatex(0); transform: translatex(0); }
}


/*gallery*/


/*scrolltotop*/
#myBtn {
  display: none;
  position: fixed;
  top: calc((100% - 20px)/2);
  right: 0;
  z-index: 99;
  font-size: inherit;
  border: 0;
  background-color: var(--highlight);
  color: #fff;
  cursor: pointer;
  padding: 15px;
}

#myBtn:hover {
  background-color:var(--text);
}


/*navigation*/
nav {
  text-align: center;
  background-color: var(--text);
 /* filter: drop-shadow(0 1px 1px #eaeaea);*/
  padding: 10px;
}


nav a, nav a:visited{
	text-decoration:none;
	font-family: 'Roboto-Black';
	color:#fff;
	font-size:14px;
	text-transform: uppercase;
	line-height: 14px;
}

nav a:hover{
	opacity: 0.8;
}

#mobilemenue a{
 text-align: center;
}

#menue{
	list-style:none;
	position: fixed;
	top:0;
}

#menue, #close{
	display: none;
}

#mobilemenue img {
  width: 15px;
  height: auto;
  margin: 0;
  display: inline;
}

#logo{
	position: fixed;
	left:10%;
	top:5px;
}

#logo img{
	height: 40px;
	width: auto;
	margin:0;
}

#topnav {
 /* filter: drop-shadow(0 1px 1px #eaeaea);*/
  position: fixed;
  width: 100%;
  z-index: 500;
  top:0;
}

#topnav:target #close{
	display: inline-block;
}

#topnav:target #menue {
  display: block;
  position: absolute;
  top: 50px;
  left: 0;
  background-color:var(--text);
  z-index: 500;
  padding:0 10px;
  width:100%;
}

#topnav:target #burger{
	display:none;
}



/*tablet*/

@media screen and (min-width: 480px){
  
 /*classe und ids*/   

}


@media screen and (min-width: 600px){
  

  /*classe und ids*/  


.col {
  column-count: 4;
} 
	
.halb, .viertel, .dreiviertel, .drittel, .zweidrittel{
	-ms-flex-preferred-size:49%;
	    flex-basis:49%;
}
   
}  


/*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*//*desktop*/

@media screen and (min-width: 900px) {
	
	
	
.drittel{
	-ms-flex-preferred-size:32%;
	    flex-basis:32%;	
}
	
.zweidrittel{
	-ms-flex-preferred-size:65%;
	    flex-basis:65%;	
}
	
/*navigation*/	
	
	
#mobilemenue{
  display: none;
}
	
#topnav{
		height: 50px;
}
	
#menue{
	display: block;
    width: 100%;
    text-align: center;
	margin-top: 10px;
}
	
#menue li{
  display:inline-block;
}
	
nav a::after {
    content: "";
    width: 2px;
    background-color: #fff;
    height: 14px;
    display: inline-block;
    margin: 0 10px;
  }	
	
 nav li:last-of-type a::after, nav #logo:after{
    content: "";
    width: 0;
    background-color: #fff;
    height: 14px;
    display: inline-block;
    margin: 0 10px;
}	
	
nav #logo:after{
    content:none;
}	

}
	


@media screen and (min-width: 1000px){
	
    
 /*classes und ids*/

 /*navigation*/   
    
    
        

} 

@media screen and (min-width: 1200px){

	
/*classen ids*/	
.dreiviertel{
	-ms-flex-preferred-size:74%;
	    flex-basis:74%;
} 	
	
.viertel{
		-ms-flex-preferred-size:23%;
		    flex-basis:23%;
}	
	
/*formular*/    
    
  
    
}