@font-face {
    font-family: 'Kanit-Thin';
        src: url('design/fonts/Kanit-Thin.ttf');
        src: url('design/fonts/Kanit-Thin.ttf') format ('truetype')
        font-weight: normal;
    	font-style: normal;
}

@font-face {
    font-family: 'Kanit-Regular';
        src: url('design/fonts/Kanit-Regular.ttf');
        src: url('design/fonts/Kanit-Regular.ttf') format ('truetype')
        font-weight: normal;
    	font-style: normal;
}


/* Setup --------------------------------------------- */
a { color: #00e; }
a:visited { color: #0a89c5; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:link{color: #0a89c5; text-decoration: none;}
body {background-color: silver; font-family: 'Kanit-Thin', Futura, Trebuchet MS, Arial, sans-serif; font-style: normal; }
h1 {font-weight:lighter;margin-bottom:0.5em;margin-top:1em;font-size:1.8em; color:black;line-height: 1.25em; font-family:'Kanit-Regular';}
h2, h2 span {font-weight:lighter;margin-bottom:0.5em;margin-top:0;font-size:1.3em; line-height: 1.25em; color: #0a89c5; font-family:'Kanit-Regular';}
h3 {font-weight:lighter;margin-bottom:0.5em;margin-top:0;font-size:1.15em;line-height: 1.25em; color:black; font-family:'Kanit-Regular'}
h4 {font-weight:normal;margin-bottom:.25em;margin-top:0;font-size:1em;line-height: 1.25em; color:black;}
#content_right h1 {margin-bottom:0;}
pre {font-family:monospace,serif;font-size:1em;white-space:pre;white-space:pre-wrap;word-wrap:break-word;margin:0;padding:0}
code {font:inherit;font-family:monospace,serif;font-size:1em;margin:0;padding:0}
p{ font-family:'Kanit-Thin'; margin-bottom: 0.5em; margin-top: 0.25em; color:black;}
em{font-style: italic;}
strong{ font-family:'Kanit-Regular'; }
hr{background-color: #515151; height: 2px; width: 100%; border: 0px solid; margin: 0.25em 0;}

body{max-width:100%; overflow-x:hidden; background-color: white; background-attachment:fixed; background-size: cover;}

/* Struktur ------------------------------------------ */
.logo{width:150px; background-color:white; display:inline-block; vertical-align:top; margin-right:5px;}
.dummy{background-color: transparent; min-height:1px;}
#logo_right{margin-right:0; margin-left:5px;}
#navi_wrapper{max-width: 900px; background-color: white; position: relative; margin-left: auto; margin-right: auto;}

#navi a { color: white; }
#navi a:visited { color: white; }
#navi a:hover { color: white; }
#navi a:focus { outline: none; }

.termin_datum {background-color: rgba(0,0,0,0.6); color:white; border-radius:2px; position:relative; left: -5px; display:inline-block;}
.termin_text h3 {margin:5px 0;}
.termin_datum h3 {margin:5px;}
.termin_text {font-size:90%;}

.termine_kurz {font-size: 120%; line-height:120%;}
.termine_kurz span {font-weight:bold;}
.termine_kurz a {display:block;}
.termine_kurz li {margin-bottom: 0.5em;}


.storyAuthor, .storyLink {font-size: 75%;}
.kat {font-size: 75%; float:right; background-color: rgba(0,0,0,0.6); color:white; border-radius:2px; padding:5px; line-height:1em;}

/*Einspaltiges Template*/

#content_single_column {width:100%; padding-right:1%;}

/**/
#navi_inner ul {text-align:right;}

#navi_inner li {
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    list-style: none inside !important; position:relative;}
#navi_inner ul ul {display:none; position: absolute; background-color:transparent; left:0; margin-left:0; z-index:2; width:200px; margin-top:21%; text-align:left;}

#navi_inner ul li:hover > ul {display:block;}
#navi_inner ul li ul li {padding-left: 0.3em; padding-right: 0.3em; padding-top:0; padding-bottom:0; top:5px; position:relative; display:block; background-color:#7c8284;
    }

#navi_inner ul li.current ul li > a{white-space: nowrap; padding: 0.1em 0; display:inline-block; border-top: 1px solid #0a89c5 !important; border-bottom: none; width:100%; color:white; font-size:100%;}


#navi_inner ul li ul li ul { position:absolute; top:0; left: 100%;}
#navi_inner ul li ul li ul li{ top:0 }


#navi_inner ul li ul li a { white-space: nowrap; padding: 0.1em 0; display:inline-block; border-top: 1px solid #0a89c5; width:100%; color:white; font-size:100%;}
#navi_inner ul li ul li:first-child > a {border-top: 2px solid transparent;}


#navi_inner ul li ul li:hover {}

#navi_inner ul > li:hover > a{color:white;}
#navi_inner ul li ul li:hover a{color: white !important;}

#navi_inner a,#navi_inner a:hover,#navi_inner a:focus{color:white; text-decoration:none;}
#navi_inner ul li a:visited:hover{color: white;}
#navi_inner ul li ul li a:visited{color: white;}
#navi_inner ul li.current > a{color: white !important; border-bottom: 8px solid #0a89c5; padding-bottom: 1.2em;}


/**/

#navi li {display:inline-block; padding:5px 1.5%; padding-bottom: 4.5%;}
#navi_wrapper_wrapper{width:100%;}

#footer_navi {float:right; font-size:120%;}
#footer_navi li {display:inline; padding-right:0.5em;}
#footer_navi li a {text-decoration:none;}

/* Mobile Menu ####################################################################################*/

#mobile_wrapper{display: inline; text-align:center; overflow:hidden; float: right; margin-right: 2em;}
#mobile_schriftzug_wrapper{display:inline-block; width:78%;}
.mobile_icon{width:40px; height:45px; display:inline-block; float:left;}
#mobile_navi_inner{display:none; text-align: left; overflow: hidden; position: absolute; top:115px; max-width:100%; background-color: #242524; z-index: 1; padding-bottom: 1em; font-size: 2em; left:0;}
#hamburger_line_wrapper{ width:100%; height:100%; padding-top:3px;}
.hamburger_line{position:relative; left: 7.5px;	height:4px;	top:10px; margin-bottom:3px; width: 25px; background-color: white; display:block; border-radius:2px;}
#mobile_schriftzug{background-image:url("design/images/Schriftzug.png"); width:230px; background-size: 100% auto; height:40px; background-repeat:no-repeat; display:inline-block; background-position:center;}
#mobile_logo img, #mobile_logo{max-width:40px; max-height: 40px;}
#mobile_logo{display:inline-block; float:right; margin-right: 1em;}
#mobile_navi_inner ul {display: block; overflow: hidden;}

#mobile_navi_inner ul li {text-align: center; border: none; width: 100%; padding: 0.5em 0 0.5em 0; border-bottom: 1px solid #0a89c5}
#mobile_navi_inner ul li:last-child{border: none;}
#mobile_navi_inner ul li.current a{ color: #0a89c5;}
#mobile_navi_inner ul li ul{display: block;}
#mobile_navi_inner ul li ul li{width: 100%; border: none;}
#mobile_navi_inner ul li ul li{width: 100%;}
#mobile_navi_inner ul li a{font-family: 'Kanit-Regular';}
#mobile_navi_inner ul li ul li a{font-family: 'Kanit-Thin'; font-size: 0.8em;}
#mobile_navi_inner ul li.current ul li a{color: white;}
#mobile_navi_inner ul li ul li.current{ background-color: #0a89c5;}


/* Mobile Menu END ################################################################################*/

#container,#navi_container{margin-left: auto; margin-right: auto; width: 100%;  background-color: white;}


#header_wrapper{width:100%; background-color:#242524; height: 115px;}
#header_inner{width:100%; max-width: 900px; margin-left:auto; margin-right:auto;}
#logo{width:22.22%; padding: 25px 0 15px 0; float:left;}
#logo img{width:100%;}
#foot_mobil{width:150px; margin: 0 auto;}
#foot_mobil img{width:100%;}
#navi{float:right; width:75%; padding-top: 5.7%;}
#content_wrapper{width:100%; display:inline-block;}

#content_left hr{background-color: #7c8284; height: 1px; border: 0px solid; position:relative;}

#content_wrapper {background-color:white;}
#navi_inner{font-size:1.2em; font-family:'Kanit-Regular';}
#navi_inner a{text-decoration:none !important;}
.content_inner{background-color: white; min-height: 200px; position:relative; display:inline-block; vertical-align:top; white-space:normal; line-break: strict; padding-top:1em;}
#breadcrumb{  color:white; float:left; font-size:90%; padding-top:1em; }
#breadcrumb a{text-decoration:none;}
#breadcrumb span a{color: white;}

#footer_inner{background-color: white;}
#mobilemenu{display: none;}
#back-to-top { position:fixed; bottom:0px; right:50px;	cursor:pointer;	padding:10px; background:#FFB100; border-top-left-radius:5px; border-top-right-radius:5px; color:white;	z-index: 99; opacity: 0.3 }
#back-to-top:hover{opacity: 1;}
/* Elemente ------------------------------------------ */
.clear { clear:both; float:none; }
.umflossen_r { float:right; }
.umflossen_l { float:left; }
.abstand_r { margin-right: 3%; }
.abstand_l { margin-left: 3%; }
.abstand_o { margin-top:5em; }
.abstand_u { margin-bottom:2em; }


.ganz {width: 100%;}
.halb { padding:0; width: 48.5%;}
.zweidrittel { padding:0; width: 62.66%; }
.drittel { padding:0; width: 31.33%; }
.viertel { padding:0; width: 22.75%; }
.trennlinie{ padding: 5px 0; margin:0; }
.imageWrapper{width: 100%; max-width: 900px; margin: 0 auto 0 auto;}

.content_inner ul {margin-left: 1em; margin-bottom: 1em;}
.content_inner ol {padding-left:0em; margin-left:1em; margin-bottom: 1em;}
.content_inner ul li{ list-style: disc outside !important; color: black; font-family:'Kanit-Thin';}
.content_inner ol li{ list-style: decimal outside !important; color: black; font-family:'Kanit-Thin';}

.element_text{max-width:900px; margin: 0 auto 0 auto; margin-bottom: 2em;}


#content_left .systemColumn {font-size: 130%; line-height:130%;}
.systemColumn{margin-top: -0.8em;}

/* helper -------------------------------------------- */

.hidden { display: none !important; visibility: hidden; }
.clear {float: none; clear: both;}


/* #Media Queries -------------------------------------------- */

/* Smaller than standard 900 (devices and browsers) */
@media only screen and (max-width: 900px) {
    body{font-size: 90%;}
    #content_wrapper  {width:100%;}
    #navi_inner {display: none;}
    #logo{margin-left: 2em; width: 200px;}
    .element_text{padding-left:2em; padding-right:2em;}
    .leistungenRow_1,.leistungenRow_1{width: 89%;}
    .leistungenIcon_1,.leistungenIcon_2,.leistungenIcon_3,.leistungenIcon_4,.leistungenIcon_5{width: 25%;}
    .leistungenIcon_2{margin-left: 12.5%;}
    .leistungenIcon_4{margin-left: 15%;}
    .leistungenIcon_5{margin-right: 15%;}
    .textInBild_textContainer{padding-left: 4em;}
    #navi{width: 25%;}

}


@media only screen and (max-width: 695px) {
    body{font-size: 72%;}
}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
  .textInBild_textContainer h1{font-size:180%; margin-bottom: 0;}
  #logo{width:40%;}
  .systemImage.halb{width:100%;}
  .systemImage.drittel{width:100%;}


}