/*******************************************************
*
    Media Sizes in this file:
    <1024, 1024-1440, >=1440
*
*******************************************************/

*{
  margin: 0;
	padding: 0;
	outline: none;
	border: none;
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;	
}

*:before,
*:after{
	-webkit-box-sizing: border-box;
}

html, body{ 
 width:100%; 
 height:100%;
 margin:0; 
 padding:0; 
 background: #273034 url('/images/background.jpg') fixed;
 vertical-align: top;
 text-align: center;
 font-family: Oswald, Raleway, Calibri, Arial, sans-serif;
 font-size: 18px;
 color: #888;
 z-index:0;
} 

#pagewidth{ 
 width: 75%;
 min-width: 320px;
 height: 100%;   
 text-align: center;  
 margin-left: auto; 
 margin-right: auto; 
 border: 0px solid #888;
}

#header{
 position: fixed;
 width: inherit;
 height: 110px;
 background: #000;
 padding: 20px 0 0 0;
 z-index: 500;
}

#header-left{
 width: 20%;
 padding: 18px 2%;  
 float: left;
}

#header-right{
 width: 80%;
 float: right;
}

#page-logo {
  width:100%; 
  max-width:150px;
}

#title{
 width: 100%;
 margin: 0 0 -5px 0;
 padding: 110px 0 0 0;
 background: #000;
}

#title img {
 border: 0px solid #ffffff;
 width: 100%;
 max-width: 1920px;
 border: 0;
}
          
.news h2 {
  color: #ff9000;
 }
 
 .news h4 {
  color: #ff9000;
 }
 
.news p {
  color: #ff9000;
 }
 
.update {
 border: rgba(255, 255, 255,0.2) 1px solid;
 margin: 0 50px;
 padding: 10px 50px 10px 50px;
}

.update p {
 text-align: center;
}


#eventdate {
	border: rgba(255, 255, 255,0.2) 1px solid;
  background-color: #273034;
}

#eventdate:hover {
	transition: all 0.5s ease-in-out;
	border: rgba(255, 144, 0,1.0) 1px solid;
	background-color: rgba(255, 144, 0,0.2) ;
}

#eventlocation {
	border: rgba(255, 255, 255,0.2) 1px solid;
  background-color: #273034;
}

#eventlocation:hover {
	transition: all 0.5s ease-in-out;
	border: #ff00a2 1px solid;
	background-color: rgba(127, 53, 138,0.2);
}


.content-black{ 
 background-color: #000;
 width: 100%;
 text-align: center; 
 padding: 40px 3% 50px 3%; 
}

.content-dark{ 
 background-color: #273034;
 width: 100%;
 color: #ccc;
 text-align: center; 
 padding: 40px 3% 50px 3%;
}

.content-white{ 
 background-color: #FFF;
 width: 100%;
 color: #273034;
 text-align: center; 
 padding: 40px 3% 50px 3%;
}

.content-transparent{ 
  background-color: #FFFFFF00;
  width: 100%;
  color: #fff;
  text-align: center; 
  padding: 40px 3% 50px 3%;
}


#footer{ 
 bottom:0;
 border-top: solid 1px var(--main-color);
 background-color:#000;
 width:100%;
 height:50px;
 padding: 10px 2% 20px 2%;
 font-size: 0.8em;
}

p	{
	font-family: Raleway;
	line-height: 1.5;
	text-align:center;
	}
	
p.list	{
	font-family: Oswald;
	font-weight: 300;
	line-height: 1.3;
	}

p a	{
	font-family: Oswald, Raleway, Calibri, Arial, sans-serif;
}

a	{
	color: inherit;
	text-decoration: inherit;
	}

  .content-black a {
    color:#FFF; 
  }

  .content-dark a {
    color:#FFF; 
  }

h1 { 
    font-family: Oswald, Raleway, Roboto, sans-serif; 
    font-size:1em;
    font-weight: bold;
    text-align: center;
    padding: 0.3em 0.3em 0.3em 0.3em;
}

h2 {
	font-family: Oswald, Raleway, Roboto, sans-serif; 
    font-size:3.5em;
	font-weight:700; 
	padding:15px; 
	margin:10px 0 20px 0; 
	text-transform: uppercase; 
	text-align:center;
}
 
.content-black h2 {
	color:#FFF; 
}

.content-dark h2 {
	color:#FFF; 
}

.content-white h2 {
	color:#273034; 
}

.content-transparent h2 {
	color:#FFF;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

h3 {
	font-family: Oswald, Raleway, Roboto, sans-serif; 
    font-size: 2em;
	margin: 0.6em 0 0.6em 0; 
	font-weight: 300;	
	color:#fff;
	text-align: center;
}

.content-transparent h3 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

h4 {
	font-family: Oswald, Raleway, Roboto, sans-serif; 
    font-size: 1.4em;
	margin: 1.1em 0 0.6em 0; 
	font-weight: 300;	
	text-align: center;
}

h5 {
  font-family: Raleway, Oswald, Roboto, sans-serif; 
  font-size:1.2em;
  color:#fff;
  padding-bottom:5px;
}


hr		{ height:1px; width: 75%; text-align: center; margin: 30px auto 30px auto; background-color:#ff9000; border:none;}

#intro1 hr {
 height: 1px; 
 width: 90%; 
 text-align: center; 
 margin: 10px auto 10px auto; 
 background-color: rgba(255, 255, 255,0.2); 
 border: none;
}

ul.norm	{ 
	padding-left: 20px; 
	list-style-type: none; 
	text-align:left;
	font-family: Raleway; 
	font-weight: 700;
	line-height: 1.5;
}

span.vvk {
	font-weight: 300;
}

td {
  padding: 10px;
}

div.anchor {
  position:absolute; 
  top:-180px;
}

.menu-item {
	font-family: Raleway; 
}

/*******************************************************
*
    Tabelle für Pakete
*
*******************************************************/

    table {
      width: 100%;
      border-collapse: collapse;

    }

    th, td {
    
    }

    th {
      background-color: #000;
      position: sticky;
      justify-content:center;
      align-items:center;
      top: 110px;
      padding: 0.5em 0 1em 0;
      z-index: 1;
    }

    .content-dark th {
      background-color: #273034; 
    }

    tr.table-head2 th {
      top: 150px;
    }
    
    tr.table-head3 th {
      top: 190px;
    }

@media only screen and (max-width: 1023px) {
	th {
    top: 90px;
  }
  
  tr.table-head1 th {
	  writing-mode: vertical-lr;
	  text-orientation: mixed;
	}

  tr.table-head2 th {
    top: 170px;
  }
  
  tr.table-head3 th {
    top: 210px;
  }
}

/*******************************************************
*
    Fonts
*
*******************************************************/

@font-face {
  font-family: "Oswald";
  src: url("https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs169vsUZiZQ.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Oswald";
  src: url("https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiZQ.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Oswald";
  src: url("https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUZiZQ.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Raleway";
  src: local("Raleway Light"), local("Raleway-Light"), url("https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwIYqWqZPAA.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Raleway";
  src: local("Raleway"), local("Raleway-Regular"), url("https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ITw.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Raleway";
  src: local("Raleway Bold"), local("Raleway-Bold"), url("https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPAA.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Raleway";
  src: local("Raleway ExtraBold"), local("Raleway-ExtraBold"), url("https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwIouWqZPAA.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto";
  src: local("Roboto"), local("Roboto-Regular"), url("https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*******************************************************
*
    Spalten
*
*******************************************************/

div.zweispalten {
  box-sizing: border-box;
  width: 48%;
  margin: 0 2% 20px 0;
  padding: 5px;
  float:left;
 }

div.dreispalten {
  box-sizing: border-box;
  width: 31%;
  margin: 0 2% 20px 0;
  padding: 5px;
  float:left;
 }

 div.vierspalten {
  box-sizing: border-box;
  width: 22%;
  margin: 0 2% 20px 0;
  padding: 5px;
  float:left;
 }

div.grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(300px, 400px)); /* Umbrechen, sobald die Box 300 Pixel Breite hat */
	    grid-column-gap: 80px;
	    grid-row-gap: 30px;
	    justify-content: space-evenly;
	}



/*******************************************************
*
    Title Grid
*
*******************************************************/

	.title-grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Umbrechen, sobald die Box 300 Pixel Breite hat */
	    grid-column-gap: 0px;
	    margin-top:-10px;
	}
	
	

	.title-grid-left {
		text-align: center;
		background: var(--main-color2);
		color: #FFF;
		font-size: 3em;
	}
	
	.title-grid-right {
		text-align: center;
		background: var(--main-color);
		color: #FFF;
		font-size: 3em;
	}
	
	title-grid-right a {
		display:block;
		width:100%;
		height:100%;
	}
	
	.title-grid-right:hover {
  		transition: all 0.5s ease-in-out;
		cursor: pointer;
	}
	
	


/*******************************************************
*
    Responsive Video
*
*******************************************************/

.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
}



/*******************************************************
*
    Clearfix
*
*******************************************************/

 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 content: "."; 
 display: block;
 height: 0; 
 font-size:0;
 clear: both; 
 visibility: hidden;
 }
 
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height: 1%;}
.floatcontainer{display:block;}
/* End Hack */



/*******************************************************
*
    Fotowand
*
*******************************************************/
	
div.fotowand
 {
  /* position relative required to make the whole div clickable */ 
  position:relative;
  width:19%; 
  min-width:200px;
  min-height:200px;
  background-color: #000;
  border: 0px solid #ccc;
  margin:0 5px 30px 0;
  text-align: center;
  float:left;
  }
  
  
div.fotowand:hover{
 border: 1px solid var(--main-color);
}

  
.default-link{
  /* all rules required to make the whole div clickable */ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
  /* this is a fix for IE7-9 */
  background-color:#ffffff;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
  filter: alpha(opacity=0);  
  opacity:0;  
}

.independent-link{
    /* all rules required to make other links to work */ 
    position: relative;
    z-index: 100;
}  
  
div.fotowand-header
 {
  height: 50px;
  background-color: #000;
  padding: 0.5em;
  border: 0px solid #ccc;
  color: #FFF;
  font-size: 1em; 
  font-family: Arial, Helvetica;
  font-weight: bold;
  display: -webkit-flex; /* Safari */
  -webkit-align-items: center; /* Safari 7.0+ */
  display: flex;
  align-items: center;
  justify-content: center;
  }


.fotowand-image {
    height: 190px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.fotowand-image:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

.fotowand-element {
	display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* reset the font property */
}

.fotowand-image img
 {
  border: 0;
  max-width:90%;
  max-height:130px;
  }

div.fotowand-body
 {
  height: 70px;
  background-color: #000;
  margin: 0;
  padding: 5px 0 0 0;
  text-align: center;
  }


@media only screen and (max-width: 1023px) {
div.fotowand
 {
  width:100%;
  }
}  
  


/*******************************************************
*
    Parallax
*
*******************************************************/

.center {
  width: 980px;
  margin: 0 auto;
}
.tx {
  font-family: Oswald, serif;
  font-size: 3em;
  position: absolute;
  top: 35%;
  margin-top: -15px;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
}

.tx-sm {
  font-size: 0.8em;
  border-top-width: 1px;
  border-color: #ff9000;
  border-style: solid none none; 
}

.parallax_section {
  height: 400px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: 100% auto;
  position: relative;
}

.device-ios .parallax_section {
  background-attachment:scroll !important;
}

.parallax_image_zero {
  background-image: url("/images/background/bg0.jpg");

}
.parallax_image_first {
  background-image: url("/images/background/bg1.jpg");
  background-position: center;
}
.parallax_image_second {
  background-image: url("/images/background/bg2.jpg");
  background-position: center;
}
.parallax_image_third {
  background-image: url("/images/background/bg3.jpg");
  background-position: center;
}
.parallax_image_fourth {
  background-image: url("/images/background/bg4.jpg");
  background-position: center;
}
.parallax_image_fifth {
  background-image: url("/images/background/bg5.jpg");
  background-position: center;
}


/*******************************************************
*
    Media <1440px
*
*******************************************************/


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

#pagewidth{ 
 width:100%;
 margin:0;
 border: 0;
} 

#header {
 background: #273034 url('/images/background.jpg') fixed;
}


}

/*******************************************************
*
    Media <1024px
*
*******************************************************/



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

html, body{ 
 font-size: 0.95em;
} 

#pagewidth{ 
 width:100%;
} 

#header{
 height:90px;
}

#header-left,
#header-right{
 width: 100%;
 text-align: center;
 clear:both;
}

#header-left{
		padding-top: 5px;
	}


#header-right{
		padding-bottom: 10px;
		position:absolute;
	}

#title{
 width:100%;
 padding: 90px 0 0 0;
}

.hero-image {
  width:100%;
}

.update {
 margin: 0 5px;
 padding: 10px 10px;
}


div.anchor {
  position:absolute; 
  top:-200px;
}


div.zweispalten
 {
  width: 98%;
 }

div.dreispalten
 {
  width: 48%;
 }
 
div.vierspalten
 {
  width: 31%;
 }
  
}  



/*******************************************************
*
    SVG-Titelbild-Wechsel
*
*******************************************************/
 
  
        /* Gemeinsame Stile für die SVG-Container */
        .svg-container {
            width: 100%; /* Setze die Breite nach Bedarf */
            max-width: 100%; /* Begrenze die maximale Breite auf 100% des Viewports */
            height: auto; /* Auto-Höhe für die Skalierbarkeit */
        }

        /* Stile für kleinere Bildschirme */
        @media (max-width: 1023px) {
            .large-svg {
                display: none; /* Verberge das SVG für größere Bildschirme */
            }
        }

        /* Stile für größere Bildschirme */
        @media (min-width: 1024px) {
            .small-svg {
                display: none; /* Verberge das SVG für kleinere Bildschirme */
            }
        }


/*******************************************************
*
    CTA-Buttons
*
*******************************************************/

        .button-main {
          position: relative;
          background-color: var(--main-color2);
          border: 2px solid var(--main-color2);
          border-radius: 0px;
          font-size: 1em;
          color: #FFFFFF;
          padding: 20px;
          width: 50%;
          text-align: center;
          transition-duration: 0.4s;
          text-decoration: none;
          overflow: hidden;
          cursor: pointer;
        }
        
/* Hover effect */        
        .button-main:hover {
          background-color: #273034;
        }
        
/* Ripple Effect */
        .button-main:after {
          content: "";
          background: #f1f1f1;
          display: block;
          position: absolute;
          padding-top: 300%;
          padding-left: 350%;
          margin-left: -20px !important;
          margin-top: -120%;
          opacity: 0;
          transition: all 0.8s
        }
        
        .button-main:active:after {
          padding: 0;
          margin: 0;
          opacity: 1;
          transition: 0s
        }