/* CSS Document */
@charset "utf-8";
@font-face {font-family:'Port Lligat Sans'; font-style:normal; font-weight:400; src:url(../fonts/PortLligatSans-Regular.ttf) format('woff2');}
@font-face {font-family:'Berkshire Swash'; font-style:normal; font-weight:400; src:url(../fonts/BerkshireSwash-Regular.ttf) format('woff2');}
@font-face {font-family:'Oswald'; font-style:normal; font-weight:400; src:url(../fonts/Oswald-Regular.ttf) format('woff2');}

html {scroll-behavior:smooth;}
html body *:focus {outline:none;}
a {outline:none; text-decoration:none; color:#49c;}
html, body {padding:0; margin:0;}
div, img {position:relative; width:100%; height:auto; display:block; box-sizing:border-box;}
img {border-radius:2px;}

body, button {font-family:"Port Lligat Sans", Helvetica, sans-serif; font-weight:400; font-size:16px; line-height:22px; color:#445;}
h1, h2, h3, h4 {font-family:'Berkshire Swash', cursive; font-weight:400; padding:0; color:#49c; opacity:0.8; clear:both;}
h1 {font-size:36px; line-height:42px; margin:0 0 22px;}
h2 {font-size:30px; line-height:38px; margin:22px 0;}
h3, h4 {font-size:24px; line-height:30px; margin:12px 0 22px;}
h5, h6 {font-family:Oswald, sans-serif; color:#49c; font-size:18px; line-height:24px; padding:0; margin:0 0 22px; font-weight:normal;}
h5 {text-transform:uppercase;}
p, table {margin:0 0 22px;}
.uhrzeit {width:120px;}
strong {font-family:Oswald, sans-serif; font-weight:400;}

.site {width:100%; min-height:100%; background-image:linear-gradient(#9df, #dcf 40%, #fd6 80%, #fff2f8);}

.header {width:100%; max-width:940px; margin:0 auto; padding:10px 0 0;}
.toptel {position:absolute; top:16px; left:0; text-align:center; width:96%; max-width:590px; display:none;}
.topadress {position:absolute; top:26px; right:2%; text-align:right; color:#49c; width:max-content; display:none;}
.topadress h6 {margin:0 0 4px;}

.main {width:100%; max-width:940px; margin:0 auto; padding:0; z-index:200;}
.logo {width:100%; height:auto; max-width:600px;}
.navigation {background:rgba(85,170,221,.3); border-radius:2px; margin:0 0 18px; padding:0; text-align:center;}
.navigation ul {padding:0; margin:0 auto; list-style-type:none; text-align:center;}
.navigation ul li {position:relative; display:inline-block; margin:0; padding:0; font-family:Oswald, Helvetica, sans-serif; 
	font-size:16px; line-height:22px; text-transform:uppercase;}
.navigation ul li a {display:block; height:auto; padding:8px 12px; margin:0; color:#fff;}
.navigation ul li.active a {color:#49c;}

.content {width:75%; padding:40px; margin:0; background:rgba(255,255,255,0.7); border-radius:2px; z-index:201 !important;}
.butterfly {position:absolute; top:12px; left:-36px; display:block; width:36px; height:60px; margin:0; background:url(../images/butterfly.gif); z-index:188;}
.widget {position:absolute; top:0; right:0; width:24.7%; padding:30px 20px 20px; margin:0; z-index:100; background:rgba(255,255,255,0.4); border-radius:2px;}

.footer {padding:20px 4%; margin:0; color:#fff; text-align:center; font-family: Oswald, Helvetica, sans-serif; font-size:14px; letter-spacing:0.03em;
	background-image:linear-gradient(#eccaa3, #f585a4);}
.footer a {color:#fff;}

.drittel {float:left; width:32%; margin:0 2% 22px 0;}
.last {margin-right:0;}
.clear {clear:both;}

.love {position:absolute; bottom:40px; left:50%; background-image:url(../images/love.png); width:160px; height:80px; margin-left:-80px; 
background-repeat:no-repeat; background-position:center center; z-index:2;}
.zoe {background-image:url(../images/zoe.png); background-repeat:repeat-x; background-position:center bottom;
position:relative; width:100%; height:440px; margin:0; padding:0; display:block; z-index:1;}
.aerostat {position:fixed; bottom:240px; right:6%; background-image:url(../images/aerostat.png); width:120px; height:120px;
background-repeat:no-repeat; background-position:center center; z-index:210; opacity:0.5;}
.aerostat:hover {opacity:1;}

/*//////////////// ANIMATION /////////////////////*/

.skyflowers1, .skyflowers2, .ubbles-1, .bubbles-2 {position:absolute; top:0; left:0; width:100%; height:100%; 
 background-attachment:fixed; background-color:transparent; background-repeat:repeat; zoom:1;}
.bubbles-1, .bubbles-2 {background-image:url(../images/bubbles.png); background-size:400px auto;}
.bubbles-1 {background-position:0px 0px;}
.bubbles-2 {background-position:80px 80px;}
.golddragon {background-image:url(../images/golddragon.png); background-repeat:no-repeat; background-position:0px 1000px;
position:absolute; top:0; left:0; width:100%; height:100%; z-index:4;}
.waterdragon {background-image:url(../images/waterdragon.png); background-repeat:no-repeat; background-position:800px 1600px;
position:absolute; top:0; left:0; width:100%; height:100%; z-index:3;}

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

@media only screen and (max-width:1600px) {
.zoe {background-image:url(../images/mini/zoe.png); height:240px;}
.love {bottom:20px; background-image:url(../images/mini/love.png); width:80px; height:40px; margin-left:-40px;}
.aerostat {background-image:url(../images/mini/aerostat.png); width:60px; height:60px; right:2%;}
}
@media only screen and (max-width:1000px) {
.toptel, .topadress {display:block;}
.nodis {display:none;}
.header, .main {max-width:100%; padding:0;}
.content {width:100%;}
.widget {position:relative; top:2px; right:0; width:100%;}
.content, .widget {padding:40px 4%;}
.aerostat {position:fixed; bottom:220px; opacity:0.3;}
}
@media only screen and (max-width: 919px) {
.navigation {margin:0; padding:8px 0;}
.navigation ul li a {padding:4px 8px;}
.navigation ul li {text-transform:none; letter-spacing:0.03em;}
}
@media only screen and (max-width: 739px) {
.topadress {display:none;}
}
@media only screen and (max-width: 539px) {
.toptel {top:7px;}
.toptel h6 {font-size:14px;}
}
@media only screen and (max-width:399px) {
.drittel {width:100%; margin:0 0 20px 0;}
.minnodis {display:none;}
h1, h2 {font-size:26px; line-height:30px;}
}
@media only screen and (max-width:359px) {
.toptel {top:1px;}
}
@media only screen and (max-width:259px) {