@charset "utf-8";
@font-face {font-family:'Roboto'; src:url('../fonts/Roboto-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face {font-family:'Roboto'; src:url('../fonts/Roboto-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap;}
html {scroll-behavior:smooth;}
html,body{margin:0;padding:0;height:100vh;min-height:100%;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
html,body,button,input,select,textarea{font-family:'Roboto', Arial, sans-serif; font-size:16px; line-height:24px; font-weight:400; color:#636567}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,main,summary{display:block;}
audio,canvas,video{display:block;*zoom:1;}
audio:not([controls]){display:none}
[hidden]{display:none}

body span[class ^= "skype_pnh_print_container"] {display:inline !important;}
body span.skype_pnh_container {display:none !important;}

.solar {color:#6ae8ff; background:rgba(106,232,255,1);}
.silver {color:#939597; background:rgba(147,149,151,0.3);}
.light {background:#f5fafa;}

img {position:relative; padding:0; margin:0 auto; max-width:100%; display:block; box-sizing:border-box;}
.sozicon {width:40px; display:inline-block; margin:0 20px;}

*, *::before, *::after {box-sizing:border-box;}
a {color:inherit; text-decoration:none;}
a:focus{outline:none;}
a:hover,a:active{text-decoration:none; outline:0;}

p, li, table {margin-bottom:24px;}
hr {widt:100%; height:1px; border:0 none; margin-bottom:48px; border-top:1px solid #6ae8ff; clear:both;}
strong {font-weight:700;}
em {font-style:italic;}
.oldprise {text-decoration:line-through; color:#ccc; font-size:75%;}
.newprise {color:#eb2;}

h1, h2, h3, h4, h5, h6 {font-weight:400; clear:both;}
h1 {font-size:35px; line-height:42px; padding:60px 4%; margin:0; color:#fff; display:block; box-sizing:border-box; text-align:center;
background:#6ae8ff; background-image: linear-gradient(#033f63, #6ae8ff);}
h2 {font-size:38px; line-height:42px; padding:0; margin:24px auto; text-align:center; color:#033f63;}
h3 {font-size:24px; line-height:30px; padding:0; margin:24px auto; text-align:center; color:#033f63;}
h4 {font-size:24px; line-height:32px; padding:0; margin:24px 0;}
h5 {font-size:28px; line-height:32px; padding:0; margin:24px 0; font-weight:700; color:#6ae8ff; text-align:center;}
h6 {font-size:24px; line-height:30px; padding:24px; margin:0;}

.ani1, .ani2 {margin:6px 0 6px 16%; padding:0; font-size:24px; line-height:30px; text-alignn:left; background:rgba(0,30,60,0.8); color:#fff;
display:inline-block; box-sizing:border-box;}

.ani1 {animation:insert1 3s;}
@keyframes insert1 {
  0% {transform: translate(-140%);}
 10% {transform: translate(-140%);}
 60% {transform: translate(0);}
100% {transform: translate(0);}
}
.ani2 {animation:insert2 3s;}
@keyframes insert2 {
  0% {transform: translate(-140%);}
 40% {transform: translate(-140%);}
100% {transform: translate(0);}
}

.bigtext {font-size:150%;}
.minitext {font-size:75%; text-transform:none;}

.topheader {position:relative; width:100%; padding:3px 2% 6px; margin:0; min-height:33px; display:block; box-sizing:border-box;
background:#6ae8ff; color:#fff; font-weight:700; z-index:900;}
.topheader a {color:inherit;}

.toplogo {position:relative; padding:0 0 0 30px; margin:0; color:#fff; background:url(../images/solar.svg) top left no-repeat; 
float:left; display:inline-block; box-sizing:border-box;}
.topcontact {position:relative; padding:0; margin:0; float:right; display:block; box-sizing:border-box;}
.topcontact span {padding-left:30px; margin-left:20px; display:inline-block;}
.toptel {background:url(../images/tel.svg) top left no-repeat;}
.topmail {background:url(../images/mail.svg) top left no-repeat;}
.topadress {background:url(../images/pointer.svg) top left no-repeat;}

.navi {position:absolute; top:33px; width:100%; height:auto; margin:0; display:block; box-sizing:border-box; text-align:right; z-index:1001;
border-bottom:1px solid rgba(106,232,255,0.15); background:rgba(255,255,255,0.8);}
.logo {position:absolute; top:-33px; left:4%; padding:24px 30px 30px; background:#fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); z-index:600;}
.logo img {position:relative; margin:0 auto; max-width:177px; height:auto;}

.navi ul {position:relative; margin:0; padding:0; text-align:right; text-transform:uppercase; color:#939597; font-weight:700; 
display:block; box-sizing:border-box;}
.navi ul li {position:relative; margin:0 auto; padding:0; list-style-type:none; width:auto; display:inline-block; box-sizing:border-box;}
.navi ul li a {position:relative; padding:48px 5px 22px; margin:0 15px; display:block; box-sizing:border-box; }
.navi ul li a:hover, .navi ul li.active a {color:#4ac8df;}

.startbanner {position:relative; width:100%; padding:0; margin:0; display:block; box-sizing:border-box; clear:both;}
.starttext {position:absolute; bottom:80px; left:0; display:block; box-sizing:border-box; clear:both;}

.banner {position:relative; width:100%; padding:0; margin:0; text-align:center; display:block; box-sizing:border-box; clear:both; overflow:hidden;}
.bannertext {position:absolute; bottom:80px; left:0; width:100%; margin:0; padding:0; text-align:center; display:block; box-sizing:border-box; clear:both;}

.main {position:relative; width:100%; max-width:1000px; padding:80px 4%; margin:0 auto; display:block; box-sizing:border-box;}
.bigmain {position:relative; width:100%; max-width:1400px; padding:60px 4%; margin:0 auto; display:block; box-sizing:border-box;}
.contact {position:relative; width:100%; padding:1px 4% 60px; margin:0 auto; display:block; box-sizing:border-box; text-align:center;}

.left {float:left; display:block;}
.right {float:right; display:block;}
.center {text-align:center;}
.clear {clear:both; text-align:center;}
.dis {display:none;}

.halb {position:relative; width:46%; margin:0 8% 0 0; padding:0; display:block; box-sizing:border-box; vertical-align:top; float:left;}
.drittel {position:relative; width:32%; margin:0 2% 0 0; padding:0; display:block; box-sizing:border-box; float:left;}
.viertel {position:relative; width:24%; height:auto; margin:0 auto; padding:20px; text-align:center; vertical-align:top; 
display:inline-block; box-sizing:border-box;}
.last {margin-right:0;}

.drittbox, .fullbox {position:relative; margin:0 auto; padding:20px; text-align:center; vertical-align:top; display:inline-block; box-sizing:border-box;}
.drittbox {width:33.33%; min-height:280px; float:left;}
.fullbox {width:100%;}

.danke {position:absolute; top:0; left:0; width:100%; height:auto; padding:30px 2% 20px; margin:0 auto; box-sizing:border-box; 
background:rgba(255,255,255,0.9); color:#334; font-size:32px; line-height:42px; 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; box-sizing:border-box; 
background:rgba(33,33,44,0.9); font-size:20px; line-height:30px; color:#ccc; text-align:center; z-index:1000; display:none;
}

.footer, .bottom {position:relative; width:100%; height:auto; margin:0; display:block; box-sizing:border-box; text-align:center;}
.footer p, .bottom p {margin:0 auto;}
.footer {padding:32px 4%; font-size:14px; background:#9fb4bb; color:#eee;}
.footer a {color:#eee;}
.bottom {padding:20px 4%; font-size:12px; line-height:20px; background:#111; color:#567;}
.bottom a {color:#567;}

iframe {width:100%; height:500px; padding:0; margin:0; display:block; clear:both;}
video {width:100%; display:block; margin-bottom:24px;}
.videodiv {position:relative; width:100%; height:0; padding-bottom:56.25%; display:block; box-sizing:border-box;}
.videoframe {position:absolute; top:0; left:0; width:100%; height:100%;}

.totop {position:fixed; bottom:10px; right:10px; width:3px; height:3px; padding:12px 19px 22px 16px; margin:0; 
text-align:center; border-radius:50%; border:3px solid #334; background:rgba(255,255,255,0.5); z-index:900; opacity:0.2; 
 filter: alpha(opacity=20);}
.totop:hover {opacity:0.4;
 filter: alpha(opacity=40);}
.totop i:before, .totop i:after {content:""; position:absolute; background-color:#334; 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);
}

form {position:relative; margin:24px 0 0; padding:0; display:block;}
select {height:24px; border:0; padding:0 10px 2px; margin-bottom:12px;}
textarea, input.zeile {width:100%; padding:8px 15px; margin:0 auto 12px; color:#334; background:#fff; border:1px solid #f0f5f5; border-radius:6px;
font-weight:400; font-size:16px; line-height:22px; display:inline-block; box-sizing:border-box;}
textarea {height:auto; min-height:200px; resize:vertical;}
input.zeile {height:45px;}
.zeile:focus::-webkit-input-placeholder {color:transparent;}
.zeile:focus::-moz-placeholder {color:transparent;}
.zeile:-moz-placeholder {color:transparent;}
textarea:focus::-webkit-input-placeholder {color:transparent;}
textarea:focus::-moz-placeholder {color:transparent;}
textarea:-moz-placeholder {color:transparent;}
input.honey {visibility:hidden; display:none;}

.button {position:relative; width:auto; max-width:300px; height:auto; display:inline-block; padding:12px 24px; margin:20px auto; cursor:pointer;
font-size:18px; line-height:24px; font-weight:700; text-align:center; background:#6ae8ff; color:#fff; text-decoration:none; border:0 none; border-radius:24px;}
.button:hover {background:#4ad8ef; color:#fff; text-decoration:none;}

.lecker {background:#eb2;}
.lecker:hover {background:#ec2;}

/*///////////////////// IMAGE LIGHTBOX /////////////////////////*/

#imagelightbox {
position:fixed; z-index:202; cursor:pointer;
-ms-touch-action: none; touch-action: none;
-webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, .3 ); /* 50 */
box-shadow: 0 0 10px rgba( 0, 0, 0, .3 ); /* 50 */
}
#imagelightbox-overlay {
background-color:#fff; background-color:rgba(255,255,255,.9);
position:fixed; z-index:201; top:0; right:0; bottom:0; left:0;
}
#imagelightbox-loading, #imagelightbox-loading div {border-radius:50%;}
#imagelightbox-loading {
width: 2.5em; /* 40 */
height: 2.5em; /* 40 */
background-color:#939597;
position:fixed; z-index:203; top:50%; left:50%; 
padding:0.625em; /* 10 */
margin: -1.25em 0 0 -1.25em; /* 20 */
}
#imagelightbox-loading div {
width: 1.25em; /* 20 */
height: 1.25em; /* 20 */
background-color: #fff;
-webkit-animation: imagelightbox-loading .5s ease infinite;
animation: imagelightbox-loading .5s ease infinite;
}
@-webkit-keyframes imagelightbox-loading {
from { opacity: .5;	-webkit-transform: scale( .75 ); }
50%	 { opacity: 1;	-webkit-transform: scale( 1 ); }
to	 { opacity: .5;	-webkit-transform: scale( .75 ); }
}
@keyframes imagelightbox-loading {
from { opacity: .5;	transform: scale( .75 ); }
50%	 { opacity: 1;	transform: scale( 1 ); }
to	 { opacity: .5;	transform: scale( .75 ); }
}

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

@media screen and (orientation: landscape) {}
@media screen and (orientation: portrait) {}

@media screen and (max-width: 1260px) {
.navi ul {font-size:14px;}
h1 br {display:none;}
.ani1, .ani2 {margin:6px 0 6px 8%;}
.starttext {bottom:40px;}
}

@media screen and (max-width: 1000px) {
.navi ul {font-size:13px;}
.navi ul li ul {line-height:18px;}
.starttext {bottom:40px;}
}

@media screen and (max-width: 900px) {
.logo {left:2%; padding:14px 20px 20px;}
.logo img {max-width:107px;}
.navi ul li a {padding:22px 5px 8px; margin:0 10px;}
.navi ul li ul li a, .navi ul li.active ul li a, .navi ul li ul li:first-child a, .navi ul li ul li:last-child a {padding-left:15px; padding-right:0;}
.navi ul li ul {top:50px;}
.topcontact span { margin-left:10px;}
.drittel, .viertel {width:100%; height:auto; margin:0 auto; float:none;}
.main {padding:30px 4%;}
.bigmain {padding:30px 4%;}
.contact {padding-bottom:40px;}
h1 {font-size:30px; line-height:36px;}
h2 {font-size:24px; line-height:30px;}
h3 {font-size:22px; line-height:28px;}
h6 {font-size:19px; line-height:24px; padding:12px;}
.ani1, .ani2 {margin:4px 0 4px 4%;}
.starttext {bottom:20px;}
p, ul, ol, h1, h2, h3, h4, h5, h6 {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.nohyp, a.button, .navi ul {
-moz-hyphens: none;
-o-hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;}
}

@media screen and (max-width: 800px) {
.drittbox {width:100%; min-height:auto; float:none;}
.portrait {margin:0 auto 20px; width:80%; max-width:400px; float:none;}
h1 {font-size:26px; line-height:32px;}
h6 {font-size:16px; line-height:18px; }
}

@media screen and (max-width: 720px) {
.logo {display:none;}
.toplogo {display:block;}
.navi ul {text-align:center;}
.navi ul li ul {text-align:left;}
.navi ul li a {padding:8px 2px 8px; margin:0 10px;}
.dis {display:block;}
.halb {width:100%; height:auto; margin:0 auto; float:none;}
.galerie img {width:48%; margin:0 auto; display:inline-block; box-sizing:border-box;}
h2 br, h3 br, .nodis {display:none;}
.navi ul li.nodis {display:none;}
.topcontact span.nodis {display:none;}
}

@media screen and (max-width: 360px) {
.topcontact, .starttext {display:none;}
}