/* CSS Document */
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

audio, canvas, video {display:block; *zoom:1; margin:40px 0;}
audio:not([controls]) {display:none}
[hidden]{display:none}

* {scroll-behavior:smooth;}
html {height:100vh; min-height:100%; width:100%; font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
html, body {padding:0; margin:0; background:#000;}
html, body, button, input, select, textarea, table {font-family:'Montserrat', Arial, sans-serif; font-size:16px; line-height:24px; font-weight:400; color:#fff;}
html, body, div, iframe, video, img, p, ul, ol, li, table {position:relative; display:block; box-sizing:border-box;}

/* Firefox */
* {scrollbar-width:thin; scrollbar-color:#a02891 #fff;}

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {width:8px; height:8px;}
*::-webkit-scrollbar-track {width:8px; background:#fff; border-radius:8px;}
*::-webkit-scrollbar-thumb {background-color:#a02891; border-radius:8px;}

*, *::before, *::after {box-sizing:border-box;outline:none;}
a, a:focus, a:hover, a:active{outline:none;}

table {padding:0; width:100%; height:auto; display:block;}
td {padding:0 20px 10px 0; vertical-align:top;}
select {padding:4px; border:1px solid #abc; border-radius:3px;}
input {padding:4px 8px; width:100%; height:auto; border:1px solid #abc; border-radius:3px;}
textarea {padding:4px 8px; margin:0; width:100%; height:120px; min-height:120px; border:1px solid #abc; border-radius:3px; resize:vertical;}
select, input, textarea {font-family:'Montserrat', Arial, sans-serif; font-size:14px; line-height:24px; font-weight:400;}
input.honey {visibility:hidden; display:none;}
p, ul, ol, table, input, select {margin:0 0 24px;}
strong {font-weight:600;}

body {background-image:url(../images/background.jpg); background-position:center center; background-attachment:fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.kontakt {padding:120px 0; background-image:url(../images/contact_bg.jpg); background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.dark {background:rgba(0,0,0,0.5);}

.header {position:fixed; padding:0; margin:0; width:100%; height:80px; background:rgba(0,0,0,0.85); z-index:800;}
.content {width:92%; max-width:1400px; height:auto; padding:60px 0; margin:0 auto;}
.footer {padding:24px 4% 22px; margin:0; text-align:center; background:#000; font-size:12px;}
.partner {width:100%; padding:40px 4%; margin:0; color:#000; text-align:center;
background-image: linear-gradient(90deg, rgba(255,522,255,0) 0, rgba(255,522,255,0.4) 50%, rgba(255,522,255,0) 100%);}

.halb {width:48%; padding:0; margin:0 4% 0 0; float:left; display:inline-block;}
.drittel {width:32%; padding:0; margin:0 2% 0 0; float:left; display:inline-block;}
.last {margin-right:0;}
.clear {clear:both;}

.left {float:left; margin:0 20px 20px 0; }
.right {float:right; margin:0 0 20px 20px; }
.center {margin-left:auto; margin-right:auto; text-align:center;}

.danke {position:absolute; top:0; left:0; width:100%; height:auto; padding:40px 2% 10px; margin:0 auto;
background:rgba(192,40,145,0.95); font-size:36px; line-height:48px; color:#fff; text-align:center; z-index:1001; display:none;}

.cook {position:fixed; top:0; left:0; width:100%; height:auto; padding:30px 2% 20px; margin:0 auto;
background:rgba(0,0,0,0.9); font-size:20px; line-height:30px; color:#fff; text-align:center; z-index:1000; display:none;}

iframe {width:100% !important; height:152px; padding:0; margin:0 0 24px;}
.yaframe {width:100% !important; height:500px; padding:0; margin:0 0 24px;}

iframe.video {height:592px; padding:0; margin:0; clear:both;}
video {width:100%; margin-bottom:24px;}
.videodiv {width:100%; height:0; padding-bottom:56.25%;}
.videoframe {position:absolute; top:0; left:0; width:100%; height:100%;}


img {padding:0; margin:0 auto; max-width:100%;}
.logo {width:100%; max-width:560px; margin:120px 0 80px;}
.banner {padding:0; margin:0; width:100%; height:auto; display:block;}
.partner img {margin-top:20px; border:20px solid rgba(255,255,255,0.5);}
.dis900 {display:none;}

.button {padding:12px 20px; margin-top:24px; margin-bottom:24px; width:max-content; height:auto; font-size:16px; line-height:24px; font-weight:600;
display:inline-block; border:0 none; border-radius:3px; background:#a02891; color:#fff; cursor:pointer;}
.button:hover {background:#a02891; color:#fff;}

a:link, a:visited {color:inherit; text-decoration:none;}
a:hover, a:active {color:#a02891; text-decoration:none;}

.header ul {position:absolute; top:20px; right:2%; padding:0; margin:0; list-style:none; float:right; display:block;} 
.header ul li {padding:0; margin:0; list-style:none; display:inline-block;}
.header ul li a {height:40px; margin:0; padding:20px; line-height:40px; font-weight:600;}

ul.subscribe {padding:30px 0 0; margin:0; list-style:none; font-size:20px; line-height:32px;}
ul.subscribe li {padding:0; margin:0; height:70px; list-style:none; display:block; clear:both;} 
ul.subscribe li img {padding:0; margin:-15px 30px 0 0; width:60px; float:left;} 
ul.subscribe li a {opacity:0.8;} 
ul.subscribe li a:hover, ul.subscribe li a:active {color:#fff; opacity:1;}

.totop {position:fixed; bottom:10px; right:10px; width:3px; height:3px; padding:12px 19px 22px 16px; margin:0; 
text-align:center; border-radius:50%; background:#a02891; z-index:100; opacity:0.5; 
 filter:alpha(opacity=50);}
.totop:hover {opacity:0.8;
 filter:alpha(opacity=80);}
.totop i:before, .totop i:after {content:""; position:absolute; background-color:#fff; width:3px; height:9px;}
.totop i:before {
 -ms-transform:translate(-2px, 0) rotate(45deg);
 -webkit-transform:translate(-2px, 0) rotate(45deg);
 transform:translate(-2px, 0) rotate(45deg);
}
.totop i:after {
 -ms-transform:translate(2px, 0) rotate(-45deg);
 -webkit-transform:translate(2px, 0) rotate(-45deg);
 transform:translate(2px, 0) rotate(-45deg);
}

h1, h2, h3, h4, h5 {font-weight:400; font-style:normal; margin:0;}
h1 {font-size:32px; line-height:36px; padding:80px 0;}
h2 {font-size:48px; line-height:56px; padding:24px 0;}
h4 {font-size:28px; line-height:36px; padding:24px 0 12px;}
h5 {font-size:20px; line-height:32px; padding:0 0 24px;}

h3 {position:relative; font-size:30px; line-height:36px; font-weight:600; padding:10px 20px; margin:0; box-sizing:border-box; border-radius:3px; 
background:rgba(160,40,145,0.5);}
ul.accord li.accor:hover h3 {background:rgba(160,40,145,0.7);}

/*///////////////////// ACCORDEON /////////////////////////*/

.transition, ul.accord h4, ul.accord p, ul.accord iframe, ul.accord li.accor i:before, ul.accord li.accor i:after {transition:all 0.25s ease-in-out;}
.flipIn, ul.accord h3, ul.accord li.accor {animation:flipdown 0.5s ease both;}
.no-select, ul.accord h3 {
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
ul.accord li h4, ul.accord li p, ul.accord li iframe {position:relative; overflow:hidden; transform:translate(0, 0); z-index:2;}
ul.accord {list-style:none; perspective:900; padding:0; margin:0;}
ul.accord li.accor {position:relative; padding:0; margin:48px 0 0;}
ul.accord li.accor:nth-of-type(1) {animation-delay:0.5s;}
ul.accord li.accor:nth-of-type(2) {animation-delay:0.75s;}
ul.accord li.accor:nth-of-type(3) {animation-delay:1s;}
ul.accord li.accor i {position:absolute; top:24px; right:20px; transform:translate(-6px, 0);}
ul.accord li.accor i:before, ul.accord li.accor i:after {content:""; position:absolute; background-color:#fff; width:3px; height:9px;}
ul.accord li.accor i:before {
  -ms-transform:translate(-2px, 0) rotate(45deg); /* IE 9 */
  -webkit-transform:translate(-2px, 0) rotate(45deg); /* Chrome, Safari, Opera */
  transform:translate(-2px, 0) rotate(45deg);
}
ul.accord li.accor i:after {
  -ms-transform:translate(2px, 0) rotate(-45deg);
  -webkit-transform:translate(2px, 0) rotate(-45deg);
  transform:translate(2px, 0) rotate(-45deg);
}
ul.accord li.accor input[type=checkbox] {position:absolute; top:0; right:0; width:100%; height:100%; box-sizing:border-box; padding:0; margin:0; z-index:1; opacity:0; cursor:pointer;}
ul.accord li.accor input[type=checkbox]:checked ~ h4, 
ul.accord li.accor input[type=checkbox]:checked ~ p,
ul.accord li.accor input[type=checkbox]:checked ~ iframe {margin:0; max-height:0; opacity:0; transform:translate(0, 50%); display:none;}
ul.accord li.accor input[type=checkbox]:checked ~ i:before {
  -ms-transform:translate(2px, 0) rotate(45deg);
  -webkit-transform:translate(2px, 0) rotate(45deg);
  transform:translate(2px, 0) rotate(45deg);
}
ul.accord li.accor input[type=checkbox]:checked ~ i:after {
  -ms-transform:translate(-2px, 0) rotate(-45deg);
  -webkit-transform:translate(-2px, 0) rotate(-45deg);
  transform:translate(-2px, 0) rotate(-45deg);
}
ul.accord li.accor input[type=checkbox]:checked ~ h3.weiter {display:block; margin:0 0 24px;}

@keyframes flipdown {
  0% {
    opacity:0;
    transform-origin:top center;
	-ms-transform: rotateX(-90deg);
	-webkit-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
  }
  5% {
    opacity:1;
  }
  80% {
    -ms-transform:rotateX(8deg);
	-webkit-transform:rotateX(8deg);
	transform:rotateX(8deg);
  }
  83% {
    -ms-transform:rotateX(6deg);
	-webkit-transform:rotateX(6deg);
	transform:rotateX(6deg);
  }
  92% {
    -ms-transform:rotateX(-3deg);
	-webkit-transform:rotateX(-3deg);
	transform:rotateX(-3deg);
  }
  100% {
    -ms-transform-origin:top center;
    -webkit-transform:rotateX(0deg);
	transform:rotateX(0deg);
	transform:rotateX(0deg);
  }
}

/*///////////// RESPONSIVE /////////////*/

@media screen and (min-width:681px) {
body {background-image:url(../images/background_mini.jpg);}
}
@media screen and (min-width:901px) {
body {background-image:url(../images/background_big.jpg);}
}
@media screen and (max-width:1100px) {
.header {height:60px;}
.header ul {top:10px;} 
.logo {width:100%; max-width:460px; margin:80px 0 40px;}
h1 {font-size:36px; line-height:42px; padding:60px 0 40px 0;}
h2 {font-size:36px; line-height:42px; padding:24px 0;}
h3 {font-size:24px; line-height:30px;}
}
@media screen and (max-width:900px) {
body {font-size:14px;}
h4 {font-size:20px;}
.halb {float:none; width:70%; margin-right:0;}
.partner {background-image: linear-gradient(90deg, rgba(255,522,255,0.2) 0, rgba(255,522,255,0.4) 50%, rgba(255,522,255,0.2) 100%);}
.kontakt {background-image:url(../images/contact_background_900.jpg); background-position:center bottom;}
}
@media screen and (max-width:680px) {
.dis900 {display:block;}
.nodis, h2 br, h5 br  {display:none;}
.left, .right {float:none;}
.halb {float:none; width:100%; margin-right:0;}
.partner {background-image:none; background:rgba(255,522,255,0.33);}
p, ul, ol, h1, h2, h3, h4 {
-moz-hyphens:auto;
-o-hyphens:auto;
-webkit-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
-moz-hyphenate-limit-chars:auto 5;
-o-hyphenate-limit-chars:auto 5;
-webkit-hyphenate-limit-chars:auto 5;
-ms-hyphenate-limit-chars:auto 5;
hyphenate-limit-chars:auto 5;
-moz-hyphenate-limit-lines:2;
-o-hyphenate-limit-lines:2;
-webkit-hyphenate-limit-lines:2;
-ms-hyphenate-limit-lines:2;
hyphenate-limit-lines:2;
}
.nohyp, a.button, .navi ul {
-moz-hyphens:none;
-o-hyphens:none;
-webkit-hyphens:none;
-ms-hyphens:none;
hyphens:none;}
}
@media screen and (max-width:330px) {
.drittel {float:none; width:100%; margin-right:0;}
}