body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
/**
 * Contao Open Source CMS
 *
 * Copyright (c) 2005-2016 Leo Feyer
 *
 * @license LGPL-3.0+
 */

/**
 * Make the wrapping container 960 pixel wide
 */
#footer .inside,
#header .inside,
.mod_article.wrap .inner,
.mod_article.wrap-inna .inna,
.mod_article#headerbild .inna{
        width:1332px;
        margin:0 auto;
}

/**
 * Set the default margin of the grid columns
 */
*[class*="grid"] {
        float:left;
        margin-left:20px;
        margin-right:20px;
        display:inline;
}

/**
 * Add a default margin to all content elements, so they align with the floatet
 * ones (otherwise you would have to add "grid12" to every element)
 */
.mod_article *[class*="ce_"],.mod_article *[class*="mod_"] {
        margin-left:20px;
        margin-right:20px;
}

/**
 * Handle news and event reader modules which are added via content element and
 * contain content elements themselves (see #5331)
 */
.mod_article .mod_newsreader,.mod_article .mod_eventreader {
        margin-left:0;
        margin-right:0;
}
/*
.mod_article *[class*="layout_"] > *,
.mod_article *[class*="event_"] > * {
        margin-left:10px;
        margin-right:10px;
}
*/


/**
 * Remove the margin from floated articles, because the margin is already
 * applied to its content elements (see above)
 */
.mod_article.grid1,.mod_article.grid2,.mod_article.grid3,.mod_article.grid4,.mod_article.grid5,.mod_article.grid6,
.mod_article.grid7,.mod_article.grid8,.mod_article.grid9,.mod_article.grid10,.mod_article.grid11,.mod_article.grid12 {
        margin-left:0;
        margin-right:0;
}

/**
 * Automatically clear the floats in the main column, so you do not have to add
 * a clearing div to each article
 */
#main .inside {
        overflow:hidden;
}

/**
* Grid column widths
*/
.grid1  { width:71px;  }
.grid2  { width:182px; }
.grid3  { width:293px; }
.grid4  { width:404px; }
.grid5  { width:515px; }
.grid6  { width:626px; }
.grid7  { width:737px; }
.grid8  { width:848px; }
.grid9  { width:959px; }
.grid10 { width:1070px; }
.grid11 { width:1181px; }
.grid12 { width:1292px; }

.blase.grid2{ min-height:182px; }
.blase.grid3{ min-height:293px; }
.blase.grid4{ min-height:404px; }
.blase.grid5{ min-height:515px; }
.blase.grid6{ min-height:626px; }
.blase.grid7{ min-height:737px; }
.blase.grid8{ min-height:848px; }


		.offset1  { margin-left:131px  !important; }
		.offset2  { margin-left:242px !important; }
		.offset3  { margin-left:353px !important; }
		.offset4  { margin-left:464px !important; }
		.offset5  { margin-left:575px !important; }
		.offset6  { margin-left:686px !important; }
		.offset7  { margin-left:797px !important; }
		.offset8  { margin-left:908px !important; }
		.offset9  { margin-left:1019px !important; }
		.offset10 { margin-left:1130px !important; }
		.offset11 { margin-left:1241px !important; }

.grid12_0 {
         margin: 0 !important;
         width: 100%;
}


@media (min-width:990px) and (max-width:1352px)
{
	
	
	*[class*="grid"] {
        float:left;
        margin-left:10px;
        margin-right:10px;
        display:inline;
	}
	.mod_article *[class*="ce_"],.mod_article *[class*="mod_"] {
        margin-left:10px;
        margin-right:10px;
	}

	
	
	
        /**
         * Reduce the overall width
         */
		 
#footer .inside,
#header .inside,
.mod_article.wrap .inner,
.mod_article.wrap-inna .inna,
.mod_article#headerbild .inna{
                width:960px;
        }




         /**
          * Grid column widths
          */
         .grid1  { width:60px;  }
		.grid2  { width:140px; }
		.grid3  { width:220px; }
		.grid4  { width:300px; }
		.grid5  { width:380px; }
		.grid6  { width:460px; }
		.grid7  { width:540px; }
		.grid8  { width:620px; }
		.grid9  { width:700px; }
		.grid10 { width:780px; }
		.grid11 { width:860px; }
		.grid12 { width:940px; }
		
.blase.grid2{ min-height:140px; }
.blase.grid3{ min-height:220px; }
.blase.grid4{ min-height:300px; }
.blase.grid5{ min-height:380px; }
.blase.grid6{ min-height:460px; }
.blase.grid7{ min-height:540px; }
.blase.grid8{ min-height:620px; }
	
.grid10_0 { width:800px; margin:0 !important; border:0 !important; box-shadow:none !important; margin-bottom:15px !important; padding-top:0px !important; }
		 
		 .offset1  { margin-left:90px  !important; }
		.offset2  { margin-left:170px !important; }
		.offset3  { margin-left:250px !important; }
		.offset4  { margin-left:330px !important; }
		.offset5  { margin-left:410px !important; }
		.offset6  { margin-left:490px !important; }
		.offset7  { margin-left:570px !important; }
		.offset8  { margin-left:650px !important; }
		.offset9  { margin-left:730px !important; }
		.offset10 { margin-left:810px !important; }
		.offset11 { margin-left:890px !important; }
		.offset12 { margin-left:970px !important; }


}

/**
 * Reduce the overall width and the width of the grid columns if the screen
 * width is less than 980px (e.g. on a portrait tablet)
 */
@media (min-width:768px) and (max-width:989px)
{


	*[class*="grid"] {
        float:left;
        margin-left:10px;
        margin-right:10px;
        display:inline;
	}
	.mod_article *[class*="ce_"],.mod_article *[class*="mod_"] {
        margin-left:10px;
        margin-right:10px;
	}
	
	
        /**
         * Remove the overall width
         */

#footer .inside,
#header .inside,
.mod_article.wrap .inner,
.mod_article.wrap-inna .inna,
.mod_article#headerbild .inna{
                width:auto;
        }

        /**
         * Show all columns underneath each other
         */
        *[class*="grid"] {
                float:none !important;
                display:block !important;
                width:auto !important;
				margin-left:20px;
				margin-right:20px;
				margin-top:20px !important;
        }
		.mod_article *[class*="ce_"],.mod_article *[class*="mod_"] {
				margin-left:20px;
				margin-right:20px;
		}
        *[class*="offset"] {
                margin-left:20px !important;
        }
		.mod_article *[class*="layout_"] > *,.mod_article *[class*="event_"] > * {
				margin-left:20px;
				margin-right:20px;
		}



/*	
	*[class*="grid"] {
        float:left;
        margin-left:10px;
        margin-right:10px;
        display:inline;
	}
	.mod_article *[class*="ce_"],.mod_article *[class*="mod_"] {
        margin-left:10px;
        margin-right:10px;
	}		

#footer .inside,
#header .inside,
.mod_article.wrap .inner,
.mod_article.wrap-inna .inna,
.mod_article#headerbild .inna{
                width:744px;
        }


        .grid1  { width:42px;  }
		.grid2  { width:104px; }
		.grid3  { width:166px; }
		.grid4  { width:228px; }
		.grid5  { width:290px; }
		.grid6  { width:352px; }
		.grid7  { width:414px; }
		.grid8  { width:476px; }
		.grid9  { width:538px; }
		.grid10 { width:600px; }
		.grid11 { width:662px; }
		.grid12 { width:724px; }
		
.grid10_0 { width:620px; margin:0 !important; border:0 !important; box-shadow:none !important; margin-bottom:15px !important; padding-top:0px !important; }
		
		.offset1  { margin-left:72px  !important; }
		.offset2  { margin-left:134px !important; }
		.offset3  { margin-left:196px !important; }
		.offset4  { margin-left:258px !important; }
		.offset5  { margin-left:320px !important; }
		.offset6  { margin-left:382px !important; }
		.offset7  { margin-left:444px !important; }
		.offset8  { margin-left:506px !important; }
		.offset9  { margin-left:568px !important; }
		.offset10 { margin-left:630px !important; }
		.offset11 { margin-left:692px !important; }
		.offset12 { margin-left:754px !important; }
		
*/
		
}

/**
 * Remove all floats and fixed widths if the screen width is less than 768
 * pixel (e.g. on a mobile phone)
 */
@media (max-width:767px)
{
	
	
	*[class*="grid"] {
        float:left;
        margin-left:10px;
        margin-right:10px;
        display:inline;
	}
	.mod_article *[class*="ce_"],.mod_article *[class*="mod_"] {
        margin-left:10px;
        margin-right:10px;
	}
	
	
        /**
         * Remove the overall width
         */

#footer .inside,
#header .inside,
.mod_article.wrap .inner,
.mod_article.wrap-inna .inna,
.mod_article#headerbild .inna{
                width:auto;
        }

        /**
         * Show all columns underneath each other
         */
        *[class*="grid"] {
                float:none !important;
                display:block !important;
                width:auto !important;
				margin-left:20px;
				margin-right:20px;
        }
		.mod_article *[class*="ce_"],.mod_article *[class*="mod_"] {
				margin-left:20px;
				margin-right:20px;
		}
        *[class*="offset"] {
                margin-left:20px !important;
        }
		.mod_article *[class*="layout_"] > *,.mod_article *[class*="event_"] > * {
				margin-left:20px;
				margin-right:20px;
		}
}

.sf-menu {
        float: right;
        /* margin-bottom: 1em;     */
}
.mod_customnav.aktuelles .sf-menu{
	float:right;
}
.sf-menu ul {
        min-width: 6em; /* allow long menu items to determine submenu width */
        *width: 6em; /* no auto sub width for IE7, see white-space comment below */
		padding:6px 0px 6px 10px;
		margin-left:-10px;
}
.sf-menu a {
        display:block;
        padding: 8px 12px 4px 12px;
        text-decoration: none;
        zoom: 1; /* IE7 */
}
.sf-menu span.active,
.sf-menu span.submenu,
.sf-menu span.trail,
.sf-menu span.current,
.sf-menu strong.active,
.sf-menu strong.submenu,
.sf-menu strong.trail,
.sf-menu strong.current {
        display:block;
        padding: 8px 12px 4px 12px;
        text-decoration: none;
        zoom: 1; /* IE7 */
}
.sf-menu a.last,
.sf-menu span.last,
.sf-menu strong.last{
	padding: 8px 0px 4px 12px;
}
.sf-menu a {

}
.sf-menu li {
	display:inline-block;
    white-space: nowrap; /* no need for Supersubs plugin */
    *white-space: normal; /* ...unless you support IE7 (let it wrap) */
}
.sf-menu li.active span.active {
    display: block;
}
.sf-menu ul li {
	float:none;
	display:block;
	text-align:left;
}
.sf-menu ul ul li {

}
.sf-menu li:hover,
.sf-menu li.sfHover {
        /* only transition out, not in */
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
        padding-right: 2.5em !important;
        *padding-right: 1em !important; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 1em;
        margin-top: -3px;
        height: 0;
        width: 0;
        /* order of following 3 rules important for fallbacks to work */
        border: 5px solid transparent;
        border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
        border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
        border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
        margin-top: -5px;
        margin-right: -3px;
        border-color: transparent;
        border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
        border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
        border-left-color: white;
}

/* Custom */
#hauptnavigation{
	overflow:visible;
}

/* ESSENTIAL STYLES */
.sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sf-menu li {
    position: relative;
}
.sf-menu ul {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    z-index: 99;
}
.sf-menu > li {
    float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
    display: block;
}

.sf-menu a {
    display: block;
    position: relative;
}
.sf-menu ul ul {
    top: 0;
    left: 100%;
}
/*

Farben:

Dunkelgrau: #717272
Hellgraun: #dedede

Orange: #F6BA52
Dunkelgrün: #27938E
Hellgrün: #65B3AE


Verlauf: #95C1F4 ... #26938E

#95C1F4 (149,193,244)

*/

html, body{
         height:100%;
         font-family: 'Open Sans';
         color:#eeeeee;
         font-size:18px;
         line-height:26px;
         font-weight:400;
		 background:transparent;		 
}

/* Html Elemente */
h1, h2, h3, h4,
h1 a, h2 a, h3 a, h4 a{
	margin-top:.5em;
	margin-bottom:6px;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover{

}
h1{
	font-size:32px;
	line-height:36px;
	text-transform:uppercase;
	color:#27938E;
}
h2{
	font-size:28px;
	line-height:32px;
	text-transform:uppercase;
	color:#27938E;
}
h3{
	font-size:24px;
	line-height:28px;
	text-transform:uppercase;
	color:#27938E;
}
.event h3{
	font-size:20px;
	line-height:24px;
}
h4{
	font-size:18px;
	line-height:22px;
	text-transform:uppercase;
	color:#27938E;
}

.glow {
  animation: glow 1s ease-in-out infinite alternate;
}
.orangeglow {
  animation: orangeglow 1s ease-in-out infinite alternate;
}
.greenglow {
  animation: greenglow 1s ease-in-out infinite alternate;
}


img{
	vertical-align:middle;
}

strong{
	font-weight:600;
}



a:link,
a:visited,
a:hover,
a:active,
a:focus,
div{
         outline: 0px;
}
a{
	color:#fff;
	text-decoration:none;
}
a:hover,
a:focus{
	color:#F6BA52;
}
a.btn{
	display:inline-block;
	min-width:100px;
	text-align:center;
	text-transform:uppercase;
	color:#27938E;
	border:1px solid #27938E;
	box-sizing:border-box;
	font-size:14px;
	font-weight:700;
	line-height:30px;
	margin-top:10px;
	padding: 0 10px 0 10px;
	transition:all .5s;
	border-radius:15px;
}
a.btn:hover{
	color:#fff;
	border:1px solid #fff;
}
/*
.cta a.btn{
	color:#F6BA52;
	border:1px solid #F6BA52;
}
.cta a.btn:hover{
	color:#F6BA52;
	border:1px solid #F6BA52;
	background:#fff;
}
*/

hr{
         border:0;
         color: #40394B;
         background: #40394B;
         height: 1px;
         margin: 20px 0px 30px 0px;
}

/*
#main .mod_article .ce_text ul{
	padding-left:20px;
	list-style-type:disc;
}
*/
/*
.mod_article.wrap .inner{
	display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
*/

/* Allgemeine Formate */
.left{float:left;}
.right{float:right;}
.textleft{text-align:left;}
.textright{text-align:right;}
.textcenter{text-align:center;}




#header{
	background:#fff;
}

#container{
	min-height:70vh;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#95c1f4+0,26938e+100 */
	background: #95c1f4; /* Old browsers */
	background: -moz-linear-gradient(top,  #95c1f4 0%, #26938e 500px); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #95c1f4 0%,#26938e 500px); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #95c1f4 0%,#26938e 500px); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95c1f4', endColorstr='#26938e',GradientType=0 ); /* IE6-9 */	
}
.bubbles #container{
	background: transparent
}
#background{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
#header a{
	color:#27938E;
}
#header a:hover{
	color:#F6BA52;
}
#main{
	padding: 0 0 100px 0;
}
#footer{
	text-transform:uppercase;
	font-size:14px;
    line-height:22px;
	padding: 20px 0 20px 0;
	background:#26938E;
}
#footer a{
	color:#fff;
	text-decoration:none;
}
#footer a:hover{
	color:#F6BA52;
}
#footer .mod_customnav li{
	display:inline-block;
	padding: 0 20px 0 20px;
}
.mod_article{
	padding:0px 0 80px 0;
}

body.fisch #main{
	background:url(../../files/assets/images/fisch.svg) no-repeat right -500px bottom 40px transparent;
	background-size: 500px auto;
	padding-bottom:240px;
	animation-name: schwimmfisch;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes schwimmfisch {
  0%   {background-position: right -500px bottom 40px;}
  100% {background-position: left -500px bottom 40px;}
}

body.fischblasen #main{
	background:url(../../files/assets/images/fisch-mit-blasen.svg) no-repeat right 10% bottom 40px transparent;
	background-size: 800px auto;
	padding-bottom:440px;
}
body.muschelblasen #main{
	background:url(../../files/assets/images/muschel-mit-blasen.svg) no-repeat right 10% bottom 40px transparent;
	background-size: 700px auto;
	padding-bottom:440px;
}
.empty{ display:none; }



/* Animation Waves */

#waves-con{
	background:#fff;
}
.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}
.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:80px;
    min-height:80px;
  }
}

/* Module */
.orange,
.orange *{
	color:#F6BA52;
}

#logo{
	padding:20px 0 20px 0;
}
#logo img{
	width:260px;
	height:auto;
}

#hauptnavigation{
	padding:10px 0 10px 0;
	text-transform:uppercase;
	font-weight:500;
	color:#F6BA52;
}
#hauptnavigation strong{
	font-weight:500;
}

.blase{
	margin: 20px 0 20px 0;
	display:flex;
	flex-wrap:nowrap;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	transition:all 2s;
}
.blase:hover{
	transform:scale(1.05);
}
.blase > *{
	padding: 0px 50px 0 50px;
}

.ce_image.blase{
	opacity: .6;
}
.ce_image.blase:hover{
	opacity: .9;
}
.ce_image.blase:hover h2{
	opacity: .9;
}
.ce_image.blase img{
	border-radius:50%;
}
.ce_text.blase,
.layout_list.blase{
	text-align:center;
	background:url("../../files/assets/images/blase.svg") no-repeat center transparent;
	background-size: 98% 98%;
}


.margintop20{ margin-top:20px; }
.margintop40{ margin-top:40px; }
.margintop60{ margin-top:60px; }
.margintop80{ margin-top:80px; }
.margintop100{ margin-top:100px; }
.margintop120{ margin-top:120px; }
.margintop140{ margin-top:140px; }
.margintop160{ margin-top:160px; }
.margintop180{ margin-top:180px; }
.margintop200{ margin-top:200px; }

.margintop-20{ margin-top:-20px; }
.margintop-40{ margin-top:-40px; }
.margintop-60{ margin-top:-60px; }
.margintop-80{ margin-top:-80px; }
.margintop-100{ margin-top:-100px; }
.margintop-120{ margin-top:-120px; }
.margintop-140{ margin-top:-140px; }
.margintop-160{ margin-top:-160px; }
.margintop-180{ margin-top:-180px; }
.margintop-200{ margin-top:-200px; }

/* Layout */

.ce_form{
	position:relative;
	background:url(../../files/assets/images/muschel.png) no-repeat center top transparent;
	background-size: 100% auto;
	padding: 70px 140px 140px 60px;
	box-sizing:border-box;
	overflow:visible;
	margin-top:80px;
}
.ce_form h2{
	text-align:center;
}
.ce_form .widget-text,
.ce_form .widget-textarea{
	padding: 0 20px 0 20px;
}
.ce_form .widget-checkbox{
	padding: 0 30px 0 30px;
	text-align:center;
}
.ce_form .required,
.ce_form .datenschutz{
	font-size:12px;
	line-height:normal;
}
.ce_form .widget-submit{
	text-align:center;
	margin: 20px 0 20px 0;
}
.ce_form .widget-explanation.kontakt{
	text-align:center;
	margin: 80px 0 20px 0;
	color:#707070;
	padding: 0 20px 0 90px;
}
.ce_form .widget-explanation.kontakt a{
	color:#707070;
}
.ce_form .widget-explanation.kontakt a:hover{
	color:#fff;
}
.ce_form:before{
	content:"";
	position:absolute;
	top:0px;
	left:-130px;
	width:150px;
	height:100%;
	background:url(../../files/assets/images/seegras-01.svg) no-repeat center bottom transparent;
}
.ce_form:after{
	content:"";
	position:absolute;
	top:0px;
	right:-200px;
	width:240px;
	height:100%;
	background:url(../../files/assets/images/seegras-02.svg) no-repeat center bottom transparent;
}

.event h2,
.event h2 a{
	color:#27938E;
}
.event h2 a:hover{
	color:#F6BA52;
}

/* Animationen */
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 0px #fff, 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 0 6px #fff;
  }
  
  to {
    text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 0 6px #fff, 0 0 7px #fff, 0 0 8px #fff;
  }
}
@-webkit-keyframes orangeglow {
  from {
    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 0 6px #fff, 0 0 7px #fff;
  }
  
  to {
    text-shadow: 0 0 2px #fff, 0 0 3px #ff4da6, 0 0 4px #F6BA52, 0 0 5px #F6BA52, 0 0 6px #F6BA52, 0 0 7px #F6BA52, 0 0 8px #F6BA52;
  }
}
@-webkit-keyframes greenglow {
  from {
    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 0 6px #fff, 0 0 7px #fff;
  }
  
  to {
    text-shadow: 0 0 2px #fff, 0 0 3px #65B3AE, 0 0 4px #65B3AE, 0 0 5px #65B3AE, 0 0 6px #65B3AE, 0 0 7px #65B3AE, 0 0 8px #65B3AE;
  }
}

.ce_text.recht *{
	color:#fff;
}
/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../../files/assets/fonts/open-sans-v35-latin-300.eot'); /* IE9 Compat Modes */
  src: url('../../files/assets/fonts/open-sans-v35-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../files/assets/fonts/open-sans-v35-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../files/assets/fonts/open-sans-v35-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../../files/assets/fonts/open-sans-v35-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../files/assets/fonts/open-sans-v35-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../../files/assets/fonts/open-sans-v35-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../../files/assets/fonts/open-sans-v35-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../files/assets/fonts/open-sans-v35-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../files/assets/fonts/open-sans-v35-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../../files/assets/fonts/open-sans-v35-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../files/assets/fonts/open-sans-v35-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../../files/assets/fonts/open-sans-v35-latin-500.eot'); /* IE9 Compat Modes */
  src: url('../../files/assets/fonts/open-sans-v35-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../files/assets/fonts/open-sans-v35-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../files/assets/fonts/open-sans-v35-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../../files/assets/fonts/open-sans-v35-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../files/assets/fonts/open-sans-v35-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../../files/assets/fonts/open-sans-v35-latin-600.eot'); /* IE9 Compat Modes */
  src: url('../../files/assets/fonts/open-sans-v35-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../files/assets/fonts/open-sans-v35-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../files/assets/fonts/open-sans-v35-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../../files/assets/fonts/open-sans-v35-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../files/assets/fonts/open-sans-v35-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../../files/assets/fonts/open-sans-v35-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../../files/assets/fonts/open-sans-v35-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../files/assets/fonts/open-sans-v35-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../files/assets/fonts/open-sans-v35-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../../files/assets/fonts/open-sans-v35-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../files/assets/fonts/open-sans-v35-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../../files/assets/fonts/open-sans-v35-latin-800.eot'); /* IE9 Compat Modes */
  src: url('../../files/assets/fonts/open-sans-v35-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../files/assets/fonts/open-sans-v35-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../files/assets/fonts/open-sans-v35-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../../files/assets/fonts/open-sans-v35-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../files/assets/fonts/open-sans-v35-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/*!
 * This file is part of Contao.
 *
 * (c) Leo Feyer
 *
 * @license LGPL-3.0-or-later
 */

/**
 * Since fieldset borders are removed in the reset style sheet, adjust the
 * legends accordingly
 */
legend {
	width:100%;
	display:block;
	font-weight:bold;
	border:0;
}

/**
 * Text fields and textareas
 */
input[type="text"],input[type="password"],input[type="date"],input[type="datetime"],input[type="email"],
input[type="number"],input[type="search"],input[type="tel"],input[type="time"],input[type="url"],input:not([type]),textarea {
	width:100%;
	display:inline-block;
	padding:3px 6px;
	background:rgba(255,255,255,.6);
	border:0;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-transition:all .15s linear;
	-webkit-transition:all .15s linear;
	-o-transition:all .15s linear;
	transition:all .15s linear;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input[type="text"]:focus,input[type="password"]:focus,input[type="date"]:focus,input[type="datetime"]:focus,input[type="email"]:focus,
input[type="number"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="time"]:focus,input[type="url"]:focus,input:not([type]):focus,textarea:focus {
	outline:0;
	background:#fcfcfc;
	border-color:#bbb;
}

/**
 * Fix some width and height settings
 */
input[type="file"] {
	cursor:pointer;
}
select,input[type="file"] {
	display:block;
}
form button,input[type="file"],input[type="image"],input[type="submit"],input[type="reset"],input[type="button"],input[type="radio"],input[type="checkbox"] {
	width:auto;
}
textarea,select[multiple],select[size] {
	height:auto;
}

/**
 * Checkboxes and radio buttons
 */
input[type="radio"],input[type="checkbox"] {
	margin:0 3px 0 0;
}
input[type="radio"],input[type="checkbox"],label {
	vertical-align:middle;
}

/**
 * Handle disabled and read-only
 */
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly] {
	cursor:not-allowed;
	background:#eee;
}
input[type="radio"][disabled],input[type="checkbox"][disabled],input[type="radio"][readonly],input[type="checkbox"][readonly] {
	background:transparent;
}

/**
 * Buttons
 */
form button,input[type="submit"],.button {
	display:inline-block;
	padding:6px 20px 6px 20px;
	margin-bottom:0;
	text-align:center;
	vertical-align:middle;
	color:#707070;
	cursor:pointer;
	border:0;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	background:rgba(255,255,255,.6);
	transition:all .4s;
}
form button:hover,input[type="submit"]:hover,.button:hover {
	background:rgba(255,255,255,1);
}
form button:active,input[type="submit"]:active,.button:active {
	background:rgba(255,255,255,1);;
}

/**
 * Blue buttons
 */
form button.blue,input[type="submit"].blue,.button.blue {
	background-color:#2f96b4;
	background-image:-moz-linear-gradient(top, #5bc0de, #2f96b4);
	background-image:-webkit-linear-gradient(top, #5bc0de, #2f96b4);
	background-image:-ms-linear-gradient(top, #5bc0de, #2f96b4);
	background-image:-o-linear-gradient(top, #5bc0de, #2f96b4);
	background-image:linear-gradient(to bottom, #5bc0de, #2f96b4);
	border-color:#2f96b4;
	color:#fff;
}
form button.blue:active,input[type="submit"].blue:active,.button.blue:active {
	background-color:#2e95b3;
}

/**
 * Green buttons
 */
form button.green,input[type="submit"].green,.button.green {
	background-color:#51a351;
	background-image:-moz-linear-gradient(top, #62c462, #51a351);
	background-image:-webkit-linear-gradient(top, #62c462, #51a351);
	background-image:-ms-linear-gradient(top, #62c462, #51a351);
	background-image:-o-linear-gradient(top, #62c462, #51a351);
	background-image:linear-gradient(to bottom, #62c462, #51a351);
	border-color:#51a351;
	color:#fff;
}
form button.green:active,input[type="submit"].green:active,.button.green:active {
	background-color:#4f9f4f;
}

/**
 * Orange buttons
 */
form button.orange,input[type="submit"].orange,.button.orange {
	background-color:#f89406;
	background-image:-moz-linear-gradient(top, #fbb450, #f89406);
	background-image:-webkit-linear-gradient(top, #fbb450, #f89406);
	background-image:-ms-linear-gradient(top, #fbb450, #f89406);
	background-image:-o-linear-gradient(top, #fbb450, #f89406);
	background-image:linear-gradient(to bottom, #fbb450, #f89406);
	border-color:#f89406;
	color:#fff;
}
form button.orange:active,input[type="submit"].orange:active,.button.orange:active {
	background-color:#f28f04;
}

/**
 * Red buttons
 */
form button.red,input[type="submit"].red,.button.red {
	background-color:#bd362f;
	background-image:-moz-linear-gradient(top, #ee5f5b, #bd362f);
	background-image:-webkit-linear-gradient(top, #ee5f5b, #bd362f);
	background-image:-ms-linear-gradient(top, #ee5f5b, #bd362f);
	background-image:-o-linear-gradient(top, #ee5f5b, #bd362f);
	background-image:linear-gradient(to bottom, #ee5f5b, #bd362f);
	border-color:#bd362f;
	color:#fff;
}
form button.red:active,input[type="submit"].red:active,.button.red:active {
	background-color:#be322b;
}

/**
 * Basic form layout
 */
.widget {
	margin-bottom:6px;
}
.widget > label {
	display:block;
	margin-bottom:6px;
	font-weight:bold;
}

/**
 * Inline form layout
 */
.inline-form .widget {
	display:inline-block;
	margin-bottom:0;
	vertical-align:middle;
}

/**
 * Horizontal form layout
 */
.horizontal-form .widget:after {
	content:"";
	display:table;
	clear:both;
}
.horizontal-form .widget > label {
	width:20%;
	float:left;
	padding:3px 2% 0 0;
	text-align:right;
}
.horizontal-form .widget > input,.horizontal-form .widget > textarea {
	width:78%;
	float:left;
}
.horizontal-form .widget > fieldset {
	margin-left:20%;
}




@media (min-width:990px) and (max-width:1352px)
{
	html, body{
         font-size:16px !important;
         line-height:24px !important;	 
	}	
	h1{
		font-size:28px !important;
		line-height:32px !important;
	}
	h2{
		font-size:24px !important;
		line-height:28px !important;
	}
	h3{
		font-size:20px !important;
		line-height:24px !important;
	}
	h4{
		font-size:18px !important;
		line-height:22px !important;
	}	
	.blase > *{
		padding: 0px 40px 0 40px !important;
	}

	body.fischblasen #main{
		background:url(../../files/assets/images/fisch-mit-blasen.svg) no-repeat right 10% bottom 40px transparent;
		background-size: 600px auto !important;
		padding-bottom:340px !important;
	}
	body.muschelblasen #main{
		background:url(../../files/assets/images/muschel-mit-blasen.svg) no-repeat right 10% bottom 40px transparent;
		background-size: 500px auto !important;
		padding-bottom:340px !important;
	}

	.ce_form{
		position:relative;
		background:url(../../files/assets/images/muschel.png) no-repeat center top transparent;
		background-size: 100% auto;
		padding: 30px 100px 140px 50px !important;
		box-sizing:border-box;
		overflow:visible;
		margin-top:80px;
	}
	.ce_form h2{
		font-size:22px !important;
		line-height:26px !important;
	}

}

/**
 * Reduce the overall width and the width of the grid columns if the screen
 * width is less than 980px (e.g. on a portrait tablet)
 */
@media (min-width:768px) and (max-width:989px)
{

.blase{
	margin: 20px 0 20px 0;
	display: flex;
	flex-wrap:nowrap;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	transition:all 2s;
	padding: 40px 0 40px 0;
}
.ce_text.blase,
.layout_list.blase{
	text-align:center;
	background:rgba(255,255,255,.3) !important;
	background-size: 98% 98%;
	border-radius:160px;
	min-height:1px !important;
}
div.clear{ display:none !important; }

	body.fischblasen #main{
		background:url(../../files/assets/images/fisch-mit-blasen.svg) no-repeat right 10% bottom 40px transparent;
		background-size: 600px auto !important;
		padding-bottom:340px !important;
	}
	body.muschelblasen #main{
		background:url(../../files/assets/images/muschel-mit-blasen.svg) no-repeat right 10% bottom 40px transparent;
		background-size: 500px auto !important;
		padding-bottom:340px !important;
	}
	.ce_form{
		position:relative;
		background:url(../../files/assets/images/muschel.png) no-repeat left 20px top transparent !important;
		background-size: 100% auto !important;
		padding: 100px 100px 140px 50px !important;
		box-sizing:border-box;
		overflow:visible;
		margin-top:80px;
	}
	.ce_form .widget-explanation.kontakt{
		margin:40px 0 20px 0 !important;
		padding:0 20px 0 20px !important;
	}

}

/**
 * Remove all floats and fixed widths if the screen width is less than 768
 * pixel (e.g. on a mobile phone)
 */
@media (max-width:989px)
{
	#hauptnavigation{
		margin-left:0px !important;
		margin-right:0px !important;
		text-align:center !important;
	}
	.sf-menu,
	.sf-menu > li{
		float:none !important;
	}
	#logo{
		text-align:center;
	}
	*[class*="margintop"]{
		margin-top:0px !important;
	}

.blase{
	margin: 20px 0 20px 0;
	display: flex;
	flex-wrap:nowrap;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	transition:all 2s;
	padding: 40px 0 40px 0;
	box-sizing:border-box !important;
}
.blase > *{
	padding: 0px 35px 0 35px !important;
}
.ce_text.blase{
	text-align:center;
	background:rgba(255,255,255,.3) !important;
	background-size: 98% 98%;
	border-radius:160px;
	min-height:1px !important;
	width:auto !important;
}
.blase.grid5{
	min-height:1px !important;
}
.ce_image.blase{
	opacity:1 !important;
}
.layout_list.blase{
	text-align:center;
	background:transparent !important;
	background-size: 98% 98%;
	border-radius:160px;
	min-height:1px !important;
	width:auto !important;
	margin-left:0px !important;
	margin-right:0px !important;
	padding:0 !important;
}
.layout_list.blase .inn{
	background:rgba(255,255,255,.3) !important;
	background-size: 98% 98% !important;
	border-radius:160px;
	margin-left:20px !important;
	margin-right:20px !important;
	padding:40px 0 40px 0;
}
div.clear{ display:none !important; }

	body.fischblasen #main{
		background:url(../../files/assets/images/fisch-mit-blasen.svg) no-repeat right 20% bottom 40px transparent;
		background-size: 90% auto !important;
		padding-bottom:140px !important;
	}
	body.muschelblasen #main{
		background:url(../../files/assets/images/muschel-mit-blasen.svg) no-repeat right 20% bottom 40px transparent;
		background-size: 90% auto !important;
		padding-bottom:140px !important;
	}
	.ce_form{
		position:relative;
		background:url(../../files/assets/images/muschel.png) no-repeat left -20px top transparent !important;
		background-size: 130% auto !important;
		padding: 60px 40px 140px 40px !important;
		box-sizing:border-box;
		overflow:visible;
		margin-top:80px;
		margin-left:0px !important;
		margin-right:0px !important;
	}
	.ce_form .widget-explanation.kontakt{
		margin:40px 0 20px 0 !important;
		padding:0 20px 0 20px !important;
	}
	.ce_form .widget-explanation.kontakt,
	.ce_form .widget-explanation.kontakt a{
		color:#fff;
	}
	.mod_article *[class*="layout_"] > *{
		margin-left:0px !important;
		margin-right:0px !important;
	}
	.sf-menu a.last, .sf-menu span.last, .sf-menu strong.last{
		padding:8px 12px 8px 12px !important;
	}

.sf-menu ul {
        min-width: 4em !important;
        *width: 4em !important;
		width:100%;
		max-width:100%;
}
.sf-menu a,
.sf-menu span.active,
.sf-menu span.submenu,
.sf-menu span.trail,
.sf-menu span.current,
.sf-menu strong.active,
.sf-menu strong.submenu,
.sf-menu strong.trail,
.sf-menu strong.current {
        padding-top: 4px !important;
		padding-bottom: 2px !important;
}
	

}