/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: bold;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v17-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v17-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}    



*::-webkit-scrollbar {
  width: 11px;
}
* {
  scrollbar-width: thin;
  scrollbar-color: #009FE3 #205064;
}
*::-webkit-scrollbar-track {
  background: #205064; 
  border-radius:6px; 
}
*::-webkit-scrollbar-thumb {
  background-color: #009FE3;
  border-radius: 6px;
  border: 3px solid #009FE3;
}

  body, html {
    overflow: hidden;
    font-family: Open Sans;
    font-size: 20px;
    margin: 0;
    padding: 0;
    height: 100%;
  }

  ul{}
  ul li{}
  ul.nostyle ul {padding: 10px 20px;}
  ul.nostyle ul li{padding: 5px 0;}

  #svgholder {
    display: none;
  }
  .legal {
    font-size: 0.6em
  }
  .counter, #agenda, #referenten {
    cursor: pointer
  }
  #background {
    width: 100%;
    height: 70%;
  }

  .autohidemessage{position:fixed;top:50%;left:50%;z-index: 10000;width:600px;padding:50px;background:#fff; transform:translate(-50%,-50%);border:2px solid #1e5064; border-radius:7px; display:none }
/*
  .clicker{position:absolute;cursor:pointer; transition:all .25s;box-shadow: 0 0 30px rgb(0 0 0 / 0.5);height:100px; width:100px; border-radius: 10px; background:#009FE3; color:#fff;border:2px solid #fff;display:flex; justify-content: center;align-items:center;}
  .clicker svg{width:80%; height:80%; color:#fff; transition: color .5s}
  .clicker:hover{background:#33c3ff;box-shadow: 0 0 30px rgb(255 255 255 / 0.5);}
  .clicker:hover svg{width:80%; height:80%; color:#000;}
  #counter{top:50%;left:20%;}
*/
  .clickerholder{position:absolute;}

  .clicker{position:absolute;cursor:pointer; transition:all .5s; width:8vh; height:8vh;display:flex; justify-content: center;align-items:center;will-change:transform}
  .clicker svg{position:relative;z-index:10;width:50%; height:50%; color:#1e5064; transition: all .5s; will-change: transform, color}
  .clicker:after{animation: pulse 1.2s ease-in-out 0.3s infinite both;}
  .clicker:before{animation: pulse 1.2s ease-in-out infinite both;}
  .clicker:after,.clicker:before{content:"";position:absolute;top:50%;left:50%;width:50%;height:50%; border:2px solid #1e5064; border-radius: 100%; transform:translate(-50%, -50%); transition:all .5s; will-change:transform, border-color}
  .clicker:hover{transform:scale(1.5)}
  .clicker:hover:after,.clicker:hover:before{border-color:#009FE3; }
  .clicker:hover svg{color:#009FE3;}
  #counter{top:58%;left:32%;}

  @-webkit-keyframes pulse {
    0% {
      transform:translate(-50%, -50%) scale(0.8);
      opacity:1;
    }

    100%{
      transform:translate(-50%, -50%) scale(1.8);
      opacity:0;
    }
  }

  #agenda.clickerholder .clicker{top:-4vh;left:-4vh}
  #referenten.clickerholder .clicker{top:15%;right:-4vh}
  #referenten2.clickerholder .clicker{top:-4vh;left:-4vh}

  #cookidarium, #solarium, #aquarium {height:25vh; width:13vh; position:absolute;top:1vh;/*background:rgba(0,255,0,0.2)*/}
  #cookidarium, #solarium, #aquarium{
    height: calc((483 / 3870 * 100vw));
    width: calc((257 / 3870 * 100vw));
    top: calc( (513 / 3870 * 100vw) + ((100vh - (100vw / (3870 / 2900)))/2) );
  }
  #weinkeller{
		height: calc((546 / 3870 * 100vw));
		width: calc((463 / 3870 * 100vw));
		top: calc( (1276 / 3870 * 100vw) + ((100vh - (100vw / (3870 / 2900)))/2) );
		right:calc(838/3870*100vw);
  }

  #aquarium{right:calc(1217/3870*100vw)}
  #solarium{right:calc(711/3870*100vw)}
  
  #cookidarium.clickerholder .clicker,
  #solarium.clickerholder .clicker,
  #aquarium.clickerholder .clicker{top:3vh;left:-4vh}

  #weinkeller.clickerholder .clicker{top:4vh;right:-6vh}

  .overlay{    
    transition: 1s all ;
    box-shadow: 0 0 30px rgb(0 0 0 / 0.5);
    position: fixed;
    background: #555555;
    color: #fff;
    padding: 50px 0 0;
    text-align: center;
    top: 50%;
    left: 50%;
    width: 1000px;
    max-width: 90vw;
    transform: translate(-50%, -50%) translateY(-500px);
    box-sizing: border-box;
    border-radius: 7px;
    z-index:-1;
    opacity:0;
  }
  .overlay.invers{
    background: #fff;
    color: #000;
  }
  .overlay.open{
    opacity: 1;
    z-index: 1000;
    transition: 1s all 0.5s;
    transform: translate(-50%, -50%);
  }

  .overlay .close{position:absolute; top:0;right:0; height:40px; width:40px;transform:translate(50%,-50%);cursor:pointer;z-index:20}
  .overlay .close svg{width:100%;height:100%; color:#1e5064; transform:rotate(45deg); transition:color 0.25s}
  .overlay .close:hover svg{color:#009FE3;}

  .overlay .inner{
   
    height: 100%;
    max-height: calc(90vh - 200px);
    overflow: hidden auto;
    padding: 20px 90px 0;
    margin: 0 10px 50px;
  }
  .overlay.withtabs{
    padding:100px 0 0;
  }
  .overlay.withsponsors{
    padding:0;
  }

  .overlay .tabs{display:flex;position:absolute;top:0;left:0;right:0; z-index:10;}
  .overlay .tab {
    transition: background 0.5s;
    width: 50%;
    background: #009FE3;
    font-size: 18px;
    padding: 15px 20px;
    box-sizing: border-box
  }
  .overlay .tab.inactive {
    cursor: pointer;
    background: #205064;
  }
  .overlay .tab.inactive:hover {
    background: #33c3ff;
  }
  .overlay .tab.login {
    left: auto;
    right: 0
  }
  .overlay .footnote {margin-top: 30px;font-size: 14px;}
  #overlay_agenda .clickerholder{position:relative;}
  #overlay_agenda a{color:#009FE3;text-decoration: none;overflow: hidden;display: inline-block;padding-left: 12px;transition: all .25s ease-out;}
  #overlay_agenda a::after{content:"▸"; position:absolute;left:0;transition: all .25s ease-out;}
  #overlay_agenda a::before {
     content: "";
     position: absolute;
     z-index: -1;
     top: 0;
     left: 11px;
     transform: translateY(100%);
     width: 100%;
     height: 100%;
     background: #009FE3;
     transition: all .25s ease-out;
  }

  #overlay_agenda a:hover {
     color: #fff;
     padding: 10px 10px 10px 22px;
     margin: -10px -10px -10px 0;
  }
  #overlay_agenda a:hover::before {
     transform: translateY(0);
     left: 0;
  }
#overlay_agenda a:hover::after{left:10px}

  #shaddow {
    z-index: -1;
    opacity: 0;
    transition: 1s opacity;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cccccc66;
  }

  #page.blurred #shaddow{
    opacity: 1;
    z-index: 100;
    transition: 1s opacity 0.5s;
  }

/*
  #referenten {
    transition: 1s all;
    width: 10%;
    height: auto;
    position: absolute;
    bottom: 10%;
    left: 35%;
    transform: translateX(-100%) perspective(500px) rotateY(20deg)
  }
  #agenda {
    transition: 1s all;
    width: 10%;
    height: auto;
    position: absolute;
    bottom: 10%;
    right: 35%;
    transform: translateX(100%) perspective(500px) rotateY(-20deg)
  }
  #agenda.open {
    transform: translateX(50%) scale(3);
    right: 50%;
    bottom: 0;
    z-index: 1000
  }
  #referenten.open {
    transform: translateX(-50%) scale(3);
    left: 50%;
    bottom: 0;
    z-index: 1000
  }
*/

  #agenda{position:absolute;bottom:30%;right:45%; height:28vh;width:7.43vh;background-position:center;background-size: cover; background-repeat:no-repeat}
  .webp #agenda{background-image:url("../img/agenda.webp");}
  .no-webp #agenda{background-image: url("../img/agenda.png");}

  #referenten{position:absolute;bottom:-2%;left:10%; height:40vh;width:27.87vh;background-position:center;background-size: cover; background-repeat:no-repeat}
  .webp #referenten{background-image:url("../img/referenten.png");}
  .no-webp #referenten{background-image: url("../img/referenten.png");}

  #referenten2{position:absolute;bottom:-2%;right:10%; height:40vh;width:27.87vh;background-position:center;background-size: cover; background-repeat:no-repeat}
  .webp #referenten2{background-image:url("../img/referenten2.webp");}
  .no-webp #referenten2{background-image: url("../img/referenten2.png");}

.referent-date{font-weight:bold; color:#1E5064;}
  #overlay_referenten p,
  #overlay_agenda p{font-size:16px;}
  #page {
    transition: filter 1.5s, transform 1.5s;
    height: 100%;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;    
  }
  .webp #page{background-image: url("../img/background4x3.webp");}
  .no-webp #page{background-image: url("../img/background4x3.jpg");}

  /*#page:before{content:"4:3";position:absolute; top:10px;left:10px;font-size:20px;}*/
 

	#overlay_referenten .grid .width-30 img {width:100%; height:auto;}

	.sponsors_line.grid{
    padding: 0;
		border-bottom: 1px solid #ffffff;
		margin: 0 90px 0;
    width: auto;
    padding: 10px;
	}
	.invers .sponsors_line.grid{border-bottom: 1px solid #AAAAAA}

	.sponsors_line > .grid {margin:10px;width:calc(100% - 20px);}
	.sponsors_line .width-30.grid{
    align-items: flex-end;
    margin: 0;
    width: 30%;
	}
	.sponsors_line .width-70.grid{
		flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
		margin: 0;
    width: 70%;
	}
	.sponsors_line svg{
		flex: 1 1 auto;
		width:auto;
    height: auto;
    margin: 0 2%;
	}

  @media (min-aspect-ratio: 14/9) and (max-aspect-ratio: 16/9) {
    .webp #page{background-image: url("../img/background16x10.webp");}
    .no-webp #page{background-image: url("../img/background16x10.jpg");}
    #referenten{bottom:-5%}
    #referenten2{bottom:-5%}
    /*#page:before{content:"16:10";}*/
    #cookidarium, #solarium, #aquarium{
      height: calc((483 / 4640 * 100vw));
      width: calc((257 / 4640 * 100vw));
      top: calc( (513 / 4640 * 100vw) + ((100vh - (100vw / (4640 / 2900)))/2) );
    }
    #weinkeller{
      height: calc((546 / 4640 * 100vw));
      width: calc((463 / 4640 * 100vw));
      top: calc( (1276 / 4640 * 100vw) + ((100vh - (100vw / (4640 / 2900)))/2) );
			right:calc(1222/4640*100vw);
    }
    #aquarium{right:calc(1601/4640*100vw)}
    #solarium{right:calc(1097/4640*100vw)}
  }

  @media (min-aspect-ratio: 16/9) and (max-aspect-ratio: 21/9) {
    .webp #page{background-image: url("../img/background16x9.webp");}
    .no-webp #page{background-image: url("../img/background16x9.jpg");}
    #referenten{bottom:-4%; left:15%}
    #referenten2{bottom:-4%}
    /*#page:before{content:"16:9";}*/
    #cookidarium, #solarium, #aquarium{
      height: calc((483 / 5120 * 100vw));
      width: calc((257 / 5120 * 100vw));
      top: calc( (513 / 5120 * 100vw) + ((100vh - (100vw / (5120 / 2900)))/2) );
    }
    #weinkeller{
      height: calc((546 / 5120 * 100vw));
      width: calc((463 / 5120 * 100vw));
      top: calc( (1276 / 5120 * 100vw) + ((100vh - (100vw / (5120 / 2900)))/2) );
			right:calc(1464/5120*100vw);
    }
    #aquarium{right:calc(1840/5120*100vw)}
    #solarium{right:calc(1338/5120*100vw)}
  }

  @media (min-aspect-ratio: 21/9) {
    .webp #page{background-image: url("../img/background21x9.webp");}
    .no-webp #page{background-image: url("../img/background21x9.jpg");}
    #referenten{bottom:1%; left:20%}
    #referenten2{bottom:-5%;right:20%}
    #agenda{bottom:20%; right:40%; height:35vh;width:9.29vh;}
    /*#page:before{content:"21:9";}*/
    #cookidarium, #solarium, #aquarium{
      height: calc((483 / 5120 * 100vw));
      width: calc((257 / 5120 * 100vw));
      top: calc( (162 / 5120 * 100vw) + ((100vh - (100vw / (5120 / 2200)))/2) );
    }
    #weinkeller{
      height: calc((546 / 5120 * 100vw));
      width: calc((463 / 5120 * 100vw));
      top: calc( (918 / 5120 * 100vw) + ((100vh - (100vw / (5120 / 2200)))/2) );
			right:calc(1464/5120*100vw);
    }
    
    #aquarium{right:calc(1840/5120*100vw)}
    #solarium{right:calc(1337/5120*100vw)}
  }


  #page.blurred {
    filter: blur(5px);
  }
  #page.counter{
    transform:scale(2) translate(20%,-5.25%); 
  }
  #page.agenda{
    transform:scale(2) translate(-4%,-10%); 
  }
  #page.weinkeller{
    transform:scale(2) translate(-10%,-5%); 
  }
  #page.referenten{
    transform:scale(2) translate(-20%,-11.25%); 
  }
  #page.aquarium{
    transform:scale(2) translate(-5%,25%); 
  }
  #page.solarium{
    transform:scale(2) translate(-15%,25%); 
  }

/*
  #formholder {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: 1s all;
  }
  #formholder .shaddow {
    transition: 1s all;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cccccc66;
  }
*/
  a {
    color: inherit;
  }
/*
  #form {
    transition: 1s all ;
    box-shadow: 0 0 30px rgb(0 0 0 / 0.5);
    position: fixed;
    background: rgb(85 85 85 / 87%);
    color: #fff;
    padding: 100px 0 0;
    text-align: center;
    top: 50%;
    left: 50%;
    width: 1000px;
    max-width: 90vw;
    transform: translate(-50%, -100%);
    box-sizing: border-box;
    border-radius: 7px;
    overflow: hidden;
  }
*/
/*
  #formholder.open {
    opacity: 1;
    z-index: 1000;
    transition: 1s all 0.5s;
  }
  #formholder.open #form {
    transform: translate(-50%, -50%);
    transition: 1s all 0.5s;
  }
*/
  .headline {
    font-size: 44px;
    font-weight: bold;
  }
  .subline {
    font-size: 32px;
  }
  .danke{display:none;}
  input.functional {
    position: absolute;
    top: -100%;
    left: -100%;
    visibility: hidden;
  }
  .field{position:relative;}
  .field:after{position:absolute;top:50%;right:10px;transform:translateY(-50%); width:30px;height:30px;background:none;transition:background 0.5s}
  .error::after{content:""; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 240 240"><circle cx="120" cy="120" r="100" fill="%23fff"/><path fill="%23b90000" d="M120 0a120.1 120.1 0 000 240 120.1 120.1 0 000-240zm42.4 141.2a15 15 0 01-21.2 21.2L120 141.2l-21.2 21.2a15 15 0 01-21.2 0 15 15 0 010-21.2L98.8 120 77.6 98.8a15 15 0 0121.2-21.2L120 98.8l21.2-21.2a15 15 0 0121.2 0 15 15 0 010 21.2L141.2 120l21.2 21.2z"/></svg>');}
  .valid:after{content:"";background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 240 240"><circle cx="120" cy="120" r="100" fill="%23fff"/><path fill="%23005f00" d="M120 0a120.1 120.1 0 000 240 120.1 120.1 0 000-240zm57.4 98.8l-61.8 61.8a15 15 0 01-21.2 0l-31.8-31.8a15 15 0 0121.2-21.2l21.2 21.2 51.2-51.2a15 15 0 0121.2 0 15 15 0 010 21.2z"/></svg>');}
  input[type=text], input[type=password], input[type=email], input[type=submit], .button {
    padding: 15px;
    border-radius: 7px;
    font-size: 18px;
    border:0;
  }
  input[type=text], input[type=password], input[type=email]{
    padding: 15px 45px 15px 15px;
  }
  input[type=submit], .button {
    background: #009FE3;
    color: #fff;
    text-align: center !important;
    cursor: pointer
  }
  input[type=checkbox] {
    padding: 15px;
    border-radius: 7px;
    font-size: 20px;
    border: 0px;
  }
  .grid > * {
    margin: 10px;
    box-sizing: border-box;
    width: calc(100% - 20px);
    text-align: left
  }
  .grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin: 0 auto;
  }
  form .grid{width:80%}
  .grid .field {
    width: calc(50% - 20px);
    margin: 10px;
  }
  .grid .field input {
    width: 100%;
    box-sizing: border-box;
  }
  .grid input[type=checkbox] {
    width: 20px;
    margin: 10px
  }
  .grid *.width-20 {
    width: calc(20% - 20px)
  }
  .grid *.width-25 {
    width: calc(25% - 20px)
  }
  .grid *.width-30 {
    width: calc(30% - 20px)
  }
  .grid *.width-50 {
    width: calc(50% - 20px)
  }
  .grid *.width-70 {
    width: calc(70% - 20px)
  }
  .grid *.width-75 {
    width: calc(75% - 20px)
  }
  .grid *.width-80 {
    width: calc(80% - 20px)
  }
  .grid *.width-100 {
    width: calc(100% - 20px)
  }
  .grid label {
    cursor: pointer
  }
/*
  form {
    height: 100%;
    max-height: calc(90vh - 200px);
    overflow: hidden auto;
    padding: 0px 90px 50px;
    margin: 0 10px 50px;
  }
*/
  .button.back {
    background: #205064
  }
  .pageholder {
    margin: 0 -20px;
    overflow: hidden;
  }
  .pageholder_inner {
    display: flex;
    flex-wrap: nowrap;
    /*width: 200%;*/
    transition: 1s transform ease-in-out;
  }
  .pageholder_inner .page {
    width: 100%;
		padding: 0 20px;
		flex: 100% 0 0;
    box-sizing: border-box;
  }
  #pagechooser:checked + .pageholder .pageholder_inner {
    transform: translateX(-100%)
  }

.pagechooser_navi{   
	display: flex;
  justify-content: center;
	flex-wrap: nowrap;
  margin: 20px 0 0;
  border-bottom: 2px solid #fff;
	position:relative;
	z-index:10;
}
.overlay.invers .pagechooser_navi {
    border-bottom: 2px solid #707070;
}
.pagechooser_navi .pagechooser {
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
}

.pagechooser_navi .pagechooser.active {
    color: #009FE3;
}
.pagechooser_navi .pagechooser.active:before,
.pagechooser_navi .pagechooser.active:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.pagechooser_navi	.pagechooser.active:before {
    border-color: rgba(255, 10, 10, 0);
    border-top-color: #fff;
    border-width: 18px;
    margin-left: -18px;
}
.overlay.invers .pagechooser_navi	.pagechooser.active:before {
    border-top-color: #707070;
}

.pagechooser_navi .pagechooser.active:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #555;
    border-width: 15px;
    margin-left: -15px;
}
.overlay.invers .pagechooser_navi .pagechooser.active:after {
    border-top-color: #ffffff;
}

  #form #weinprobe-form-ja {
    display: none;
  }
  hr {
    width: 100%;
    border: 0;
    background: #fff;
    height: 5px;
    margin: 10px;
    border-radius: 7px;
  }
.invers hr{background:#AAAAAA;}
  .grid p {
    margin: 10px;
    text-align: left
  }
  .grid picture {
    margin: 10px 0;
  }
  input[type="radio"].custom, input[type="checkbox"].custom {
    position: absolute;
    width: 0 !important;
    top: -1000px;
    visibility: hidden;
  }
  input[type="radio"].custom + label, input[type="checkbox"].custom + label {
    position: relative;
    padding-left: 30px;
  }
  input[type="radio"].custom + label:before, input[type="checkbox"].custom + label:before {
    position: absolute;
    left: 0;
    top: 5px;
    content: "";
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 5px;
  }
  input[type="radio"].custom:checked + label:after, input[type="checkbox"].custom:checked + label:after {
    position: absolute;
    left: 3px;
    top: 8px;
    content: "";
    width: 12px;
    height: 12px;
    background: #009FE3;
    border-radius: 5px;
  }
  input[type="radio"].custom + label:before, input[type="radio"].custom + label:after {
    border-radius: 20px;
  }
  .form{display:none;}
  #form-registrierung {
    display: block;
  }

ul.nostyle{list-style:none;margin:0;padding:0;}
ul.nostyle li{padding:20px 0;}
table.datatable{border-top:5px solid #fff; font-size:16px;}
.invers table.datatable{border-top:5px solid #707070;}
.invers .page table.datatable{border:none;}
table.datatable td{text-align: left; vertical-align: top; padding:30px 25px; border-bottom:1px solid #fff;}
.invers table.datatable td{ border-bottom:1px solid #707070;}
table.datatable tr{cursor: pointer;}
table.datatable tr:hover{background:#1E506436;}


	@media screen and (max-width: 500px) and (orientation: portrait) {
    body,html{overflow:hidden !important;}
    #page{background:none;}
    .overlay .inner{padding: 0px 20px 0;}
    #page, .overlay{display:none;}
    #smartphone{display:block;opacity:1; z-index:1000;transform:none; top:0;left:0;width:100vw;height:100vh; border-radius:0;max-width: none}
    #smartphone .inner{max-height:calc(100vh - 100px)}
  }
	@media screen and (max-height: 500px) and (orientation: landscape){
    body,html{overflow:hidden !important;}
    #page{background:none;}
    .overlay .inner{padding: 0px 20px 0;}
    #page, .overlay{display:none;}
    #smartphone{display:block;opacity:1; z-index:1000;transform:none; top:0;left:0;width:100vw;height:100vh; border-radius:0;max-width: none}
    #smartphone .inner{max-height:calc(100vh - 100px)}    
  }