/*ZeitungsLayout 2 Spalten
.2rows {
  width: 100%;
  column-count: 2; 
  column-gap: 2em;
}*/
/* Accordion */
.aco {border:1px #ccc solid;border-radius:4px;margin-bottom:8px}
.initial-open {display:block}
dt {background:#ddd;font-weight:bold;padding:10px 15px;border-radius:4px;margin:7px 0 0 0}
dt.open {background:#000}
dt a, dt a:hover {text-decoration:none}
dd {display:none}
dd {padding:20px 15px 15px 15px;border-right:1px #ccc solid;border-bottom:1px #ccc solid;border-left:1px #ccc solid;border-radius:4px;margin-top:-5px}

/*Abstand unten oder oben 50px*/
.abstand_unten {
    display:block;height:50px
    }
/*BesucherKommentare*/
input.bkFormEMail,input.bkFormSpamProtectionCalcResult,textarea.bkFormKommentar{
    width: 300px;
    color: #000000; 
}
.bkSuccessful {
  font-weight: bold;
  color: #FFFFFF;    
}
.bkError {
  font-weight: bold;
  color: #DB0000;        
}
.bkDatum {
    float:left;
    padding-left: 10px;
    padding-right: 10px;
    color: #FFFFFF;
}
.bkName {
    float:left;
    padding-right: 10px;
    padding-left: 10px;
    font-weight: bold;
    color: #FFFFFF;   
}
.bkKommentar {
    clear:both;
    padding-left: 20px;
    padding-bottom: 20px;
}
.bksubmit {
    /* Facebook Button Style */
            background-color: #4267b2;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            font-family: sans-serif;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease;
            /*position: absolute;*/ /* Absolute Positionierung innerhalb des #map-Containers */
            /*top: 410px;*/ /* Abstand vom oberen Rand der Karte */
            /*left: 10px;*/ /* Abstand vom linken Rand der Karte */
            z-index: 10; /*Stellt sicher, dass der Button über der Karte liegt*/
}
.bksubmit:hover {
            background-color: #364e92;
}
/*Fonts*/
@font-face { 
    font-family: 'Syncopate';
    src:    url('../fonts/Syncopate-Regular.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    }

@font-face { 
    font-family: 'Syncopate-Bold';
    src:    url('../fonts/Syncopate-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    }

body, html {
    font-size: 18px;
    width: 100%;
    font-family: "Trebuchet MS", sans-serif;
    padding: 0;
    margin: 0;
    background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    }

/* allgemein */
a {
    color:#000;
    text-decoration: underline;
    }

a:hover  {
    color:#fff;
    text-decoration:none;
    font-style:normal;
    }

footer p {
    color: #000;
    }

/* überschriften */
header h1 {
    font-size: 5.556em;
    color: #fff;
    opacity: 0.7;
    margin-bottom: 0;
    text-align: center;
    text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
    }

header h2 {
    font-size: 2.222em;
    color: #fff;
    opacity: 0.7;
    text-align: right;
    text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
    }

h1, h2, h3 {
    font-family: 'Syncopate-Bold', sans-serif;
    }

h1 {
    font-size: 1.8em;
    }

h2 {
    font-size: 1.4em;
    }

h3 {
    font-size: 1.1em;
    }

/* layout syntax */
.bbbox {
    position:relative;
    float: right;
    z-index:1;
    width:300px;
    padding:20px;
    margin:20px;
    background:#fff;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    }

.bbbox h3 {
    position:relative;
    padding:10px 30px;
    margin:0 -30px 20px;
    font-weight:bold;
    text-align:center;
    color:#fff;
    background:#000;
    text-shadow:0 1px 1px rgba(0,0,0,0.2);
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);
    box-shadow:0 1px 1px rgba(0,0,0,0.2);
    zoom:1;
    }

.bbbox h3:before,
.bbbox h3:after {
    content:"";
    position:absolute;
    z-index:-1;
    top:100%;
    left:0;
    border-width:0 10px 10px 0;
    border-style:solid;
    border-color:transparent #ddd;
    }

.bbbox h3:after {
    left:auto;
    right:0;
    border-width:0 0 10px 10px;
    }

/* scrollbar */
::-webkit-scrollbar {
    width: 1.111em;
    }

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0.278em grey; 
    background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
    }
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #075085; 
    border-radius: 0.556em;
    }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #f6f6f5; 
    }

/* ----------- mozilo syntax ------------- */
hr {
    border:none;
    border-top: .063em #000 dotted;
    max-width: 100%;
	margin: .625em 0;
    }	

.leftcontentimage {
    float:left;
    }

.rightcontentimage {
    float: right;
    }

.alignleft {
    text-align: left;
    }

.aligncenter {
    text-align: center;
    }

.alignright {
    text-align: right;
    }

.alignjustify {
    text-align: justify;
    }

.highlight {
    padding: .059em;
    background: #dd0000;
    color: #fff;
    }

.unorderedlist, .orderedlist {
    padding-left: 1.471em;
    }

/* ----------- tabelle ------------- */
table.contenttable {
    width: 100%;
    height: auto;
    border: .059em solid #000;
    border-collapse: collapse;
    padding: .294em;
    }

th.contenttable {
    border: .059em solid #000;
    text-align: center;
    padding: .294em;
    background: #fff;
    color: #000;
    }

th.contenttable a {
    color: #000;
    }

th.contenttable a:hover {
    text-decoration: none;
    }

td.contenttable1, td.contenttable2{
    border: .059em solid #000;
    text-align: center;
    padding: .294em;
    }

/* sitemap */
.sitemap {
    padding: 0 0 .588em 0.778em;
    }

.sitemap h2 {
    margin: 1.176em .882em .588em 0;
    padding-bottom: .118em;
    border-bottom: .059em #000 dotted;
    }

.sitemap li {
    padding-bottom: .294em;
    }

.sitemap a {
    text-decoration: none;
    }

/* bilder */
img {
    border:none;
	max-width:100%;
	vertical-align:top;
    }

.contentimage {
    display:inline-block;
	max-width:100%;
    -webkit-box-shadow: 0.412em 0.412em 0.294em 0em rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0.412em 0.412em 0.294em 0em rgba(50, 50, 50, 0.75);
    box-shadow:         0.412em 0.412em 0.294em 0em rgba(50, 50, 50, 0.75);
    }

span.imagesubtitle {
    display: block;
	font-size: .706em;
	color: #000;
	line-height: .824em;
	text-align: center;
    }

img.leftcontentimage {
    max-width: 14.706em;
    }

span.leftcontentimage {
    float:left;
	max-width: 14.706em;
	margin: .235em .588em .588em 0;
    }

img.rightcontentimage {
    max-width: 14.706em;
    }

span.rightcontentimage {
    float:right;
	max-width: 14.706em;
	margin: .235em 0 .588em .588em;
    }

/* seite */
#wrap {
    display: flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
    flex-direction:column;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    }

header {
    width: 100%;
    min-height: 22.222em;
    padding: 0.833em;
    background-image: url("../grafiken/header.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	overflow: hidden;
	border-radius: 0 0 85% 85% / 30%;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    }

#main {
    display: flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
    flex-direction:row;
    width: 100%;
    padding: 0;
    }

aside {
    width: 25%;
    padding: 0;
    text-align: left;
    }

section {
    width: 75%;
    padding: 0.833em;
    min-height: 22.222em;
    }

footer {
    display: flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
    flex-direction:column;
    width: 100%;
    }

#footertop {
    display: flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
    flex-direction:row;
    justify-content: space-around;
    width: 100%;
    padding: 0.833em;
    background-color: #fff;
    text-align: center;
    -webkit-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
    }

#footertop-a {
    width: 30%;
    }

#footertop-b {
    width: 30%;
    }

#footertop-c {
    width: 30%;
    }

#footertop ul {
    list-style:none;
    margin:0;
    padding:0;
}

#footertop h3 {
    border-bottom:dotted 0.056em #000;
}

#footerbot {
    width: 100%;
    padding: 0.556em;
    min-height: 2.222em;
    text-align: center;
    -webkit-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
    }

#footerbot a {
    text-decoration: none;
    }

/* wellen */
.waves {
    position:relative;
    width: 100%;
    height:15vh;
    margin-bottom:-0.389em; /*Fix for safari gap*/
    min-height:5.556em;
    max-height:8.333em;
    }

/* wellen animation */
.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;
    }

@keyframes move-forever {
    0% 
    {
    
    transform: translate3d(-5em,0,0);
    }
    
    100% 
    {
        
    transform: translate3d(4.722em,0,0);
    }
}
/* Schrumpfen für mobile */
@media (max-width: 768px) {
.waves {
    height: 2.222em;
    min-height: 2.222em;
    }
}
/* Animation ende */


/* mainmenu */
input#responsive-nav, label.responsive-nav-label {
    display: none;
    }

#mainmenu {
	}
				
ul.mainmenu {
	}
		
li.mainmenu {
    display:block;
	width:100%;
	margin:0;
	}

li.mainmenu a {
    text-decoration:none;
	}
					
a.menu {
    display:block;
	color:#000;
	font-weight:normal;
	text-decoration:none;
	padding: 0.278em 0 0.278em 0.556em;
	border-bottom: 0.056em #000 dotted;
	}
		
a.menu:hover {
	color:#fff;
	}
		
a.menuactive {
	display:block;
	font-weight:bold;
    color: #fff;
	text-decoration:none;
	padding: 0.278em 0 0.278em 0.556em;
	border-bottom: 0.056em #000 dotted;
    }
		
a.menuactive:hover {
    color:#ccc;
    }

/* pfeil */
nav > ul > li > a::after,
nav > ul > li > ul > li > a::after {
    content: ' →';
    transition: 0.5s;
    opacity: 0;
    }
    
nav > ul > li > a:hover::after,
nav > ul > li > ul > li > a:hover::after {
    content: ' →';
    transition: 0.5s;
    opacity: 1;
    }

/* submenu */

ul.submenu {
    margin: 0em;
	padding: 0em;
	}

li.submenu {
	margin: 0em;
	padding: 0em;
	list-style-type:none;
	}
		
a.submenu { 
	display: block;
	color: #000;
	padding: 0.167em 0 0.167em 1.389em;
    }
		
a.submenu:hover {
	color: #fff;
    }
			
a.submenuactive {
    display: block;
    color: #fff;
	padding: 0.167em 0 0.167em 0;
	margin-left: 1.389em;
    border-bottom: 0.056em #000 dotted;
	}
		
a.submenuactive:hover {
    color:#eee;
	}

/* Detailmenu */
ul.detailmenu {
    margin:0 0 0.556em 0;
	padding:0;
    }

li.detailmenu {
	width:100%;
	margin:0;
	padding:0;
    list-style-type:none;
    }

li.detailmenu a {
    text-decoration:none;
    color: #000;
	}

/* Media Querry */
/* max-width 1200px */
@media only screen and (max-width: 1200px) {
header h1 {
    font-size: 4.556em;
    }

header h2 {
    font-size: 1.91em;
    }
}
/* max-width 920px */
@media only screen and (max-width: 920px) {
header h1 {
    font-size: 3.806em;
    }

header h2 {
    font-size: 1.597em;
    }
    
    #main, #footertop {
        flex-direction: column;
    }
    
    aside, section, #footertop-a, #footertop-b, #footertop-c {
        width: 100%;
    }
    
label.responsive-nav-label {
    position: relative;
    display: block;
    padding: 1.38em;
    background: transparent;
    cursor: pointer;
    color: #000;
    }
    
label.responsive-nav-label span {
    margin-right: .588em;  
    }
    
.line { 
    position: absolute; 
    left: 0.556em;
    height: 0.222em;  
    background: #000; border-radius: 0.111em;
    display: block; 
    transition: 1s; 
    transform-origin: center; 
    }

.line:nth-child(1) { 
    top: 0.667em;
    width: 3.056em;
    }
    
.line:nth-child(2) { 
    top: 1.333em;
    width: 2.778em;
    }
    
.line:nth-child(3) { 
    top: 2em;
    width: 2.5em;
    }
    
#responsive-nav:checked + .responsive-nav-label .line:nth-child(1){
    transform: translateY(12px) rotate(-45deg);
    width: 3.056em;
    }

#responsive-nav:checked + .responsive-nav-label .line:nth-child(2){
    opacity:0;
    width: 55px;
    }

#responsive-nav:checked + .responsive-nav-label .line:nth-child(3){
    transform: translateY(-12px) rotate(45deg);
    width: 3.056em;
    }
    
nav {
    position: absolute;
    top: -9999px;
    text-align: left;
    min-width: 8.889em;
    z-index: 1;
    }
    
input#responsive-nav[type=checkbox]:checked ~ nav {
    position: relative;
    top: 0;
    }
    
nav > ul {
    padding-left: 0;
    background: transparent;
    }
    
nav ul a {
    width: 100%;
    color: #000;
    height: auto;
    background: transparent;
    }
    
nav > ul, nav > ul > li {
    float: none;
    }
    
nav > ul > li > ul {
    visibility: visible;
    opacity: 1;
    transition: none;
    }
    
nav > ul > li > ul, nav > ul > li:hover > ul {
    position: relative;
    }
    
nav > ul > li > ul > li:hover > ul {
    position: relative;
    left: 0;
    }
    
nav ul > li > ul > li a {
    width: 100%;
    color: #000;
    background: transparent;
    }
    
    nav ul > li > ul > li a {
        
    }
    
nav ul > li > ul > li:last-child a {
    }
    
nav > ul > li {
    display: block;
    }
    
nav > ul {
    display: block;
    }
    
nav ul li ul {
    display:block;
    }
}

/* max-width 760px */
@media only screen and (max-width: 760px) {
header h1 {
    font-size: 3.313em;
    }

header h2 {
    font-size: 1.375em;
    }
}
    
    /* max-width 650px */
@media only screen and (max-width: 650px) {
header {
    min-height: 19.444em;
    }
    
header h1 {
    font-size: 2.778em;
    }

header h2 {
    font-size: 1em;
    }
    
    aside, section, footer {
        font-size: 16px;
    }
}
    
    /* max-width 550px */
@media only screen and (max-width: 550px) {
header {
    min-height: 16.667em;
    }
    
header h1 {
    font-size: 2em;
    }
    
h1 {
    font-size: 1.2em;
    }

h2 {
    font-size: 1.1em;
    }

h3 {
    font-size: 1em;
    }
}

/* max-width 420px */
@media only screen and (max-width: 420px) {
header {
    min-height: 13.889em;
    }
    
header h1 {
    font-size: 1.5em;
    }
    
header h2 {
    font-size: .6em;
    }
}