@font-face { font-family: "fontregular"; src: url("../fonts/roboto-light-webfont.eot"); src: url("../fonts/roboto-light-webfont.eot?#iefix")
 format("embedded-opentype"),
 url("../fonts/roboto-light-webfont.woff2") format("woff2"),
 url("../fonts/roboto-light-webfont.woff") format("woff"),
 url("../fonts/roboto-light-webfont.ttf") format("truetype"),
 url("../fonts/roboto-light-webfont.svg#robotolight") format("svg"); font-weight: normal; font-style: normal; } 

@font-face { font-family: "fontitalic"; src: url("../fonts/roboto-lightitalic-webfont.eot"); src: url("../fonts/roboto-lightitalic-webfont.eot?#iefix")
 format("embedded-opentype"),
 url("../fonts/roboto-lightitalic-webfont.woff2") format("woff2"),
 url("../fonts/roboto-lightitalic-webfont.woff") format("woff"),
 url("../fonts/roboto-lightitalic-webfont.ttf") format("truetype"),
 url("../fonts/roboto-lightitalic-webfont.svg#robotolight_italic")
 format("svg"); font-weight: normal; font-style: normal; } 

@font-face { font-family: "fontbold"; src: url("../fonts/roboto-bold-webfont.eot"); src: url("../fonts/roboto-bold-webfont.eot?#iefix")
 format("embedded-opentype"),
 url("../fonts/roboto-bold-webfont.woff2") format("woff2"),
 url("../fonts/roboto-bold-webfont.woff") format("woff"),
 url("../fonts/roboto-bold-webfont.ttf") format("truetype"),
 url("../fonts/roboto-bold-webfont.svg#robotobold") format("svg"); font-weight: normal; font-style: normal; } 

@font-face { font-family: "fontbolditalic"; src: url("../fonts/roboto-bolditalic-webfont.eot"); src: url("../fonts/roboto-bolditalic-webfont.eot?#iefix")
 format("embedded-opentype"),
 url("../fonts/roboto-bolditalic-webfont.woff2") format("woff2"),
 url("../fonts/roboto-bolditalic-webfont.woff") format("woff"),
 url("../fonts/roboto-bolditalic-webfont.ttf") format("truetype"),
 url("../fonts/roboto-bolditalic-webfont.svg#robotobold_italic")
 format("svg"); font-weight: normal; font-style: normal; } 

@font-face { font-family: "fontlight"; src: url("../fonts/roboto-thin-webfont.eot"); src: url("../fonts/roboto-thin-webfont.eot?#iefix")
 format("embedded-opentype"),
 url("../fonts/roboto-thin-webfont.woff2") format("woff2"),
 url("../fonts/roboto-thin-webfont.woff") format("woff"),
 url("../fonts/roboto-thin-webfont.ttf") format("truetype"),
 url("../fonts/roboto-thin-webfont.svg#robotothin") format("svg"); font-weight: normal; font-style: normal; } 

@font-face { font-family: "fontmonospace"; src: url("../fonts/firamonoot-regular-webfont.eot"); src: url("../fonts/firamonoot-regular-webfont.eot?#iefix")
 format("embedded-opentype"),
 url("../fonts/firamonoot-regular-webfont.woff2") format("woff2"),
 url("../fonts/firamonoot-regular-webfont.woff") format("woff"),
 url("../fonts/firamonoot-regular-webfont.ttf") format("truetype"),
 url("../fonts/firamonoot-regular-webfont.svg#fira_mono_otregular")
 format("svg"); font-weight: normal; font-style: normal; } 

@font-face { font-family: "fonttitle"; src: url("../fonts/Lato-Black.eot"); src: url("../fonts/Lato-Black.eot?#iefix") format("embedded-opentype"),
 url("../fonts/Lato-Black.woff2") format("woff2"),
 url("../fonts/Lato-Black.woff") format("woff"),
 url("../fonts/Lato-Black.ttf") format("truetype"),
 url("../fonts/Lato-Black.svg#robotobold") format("svg"); font-weight: normal; font-style: normal; } 

* { margin: 0px; padding: 0px; box-sizing: border-box; } 

body { font-family: fontregular, Tahoma, Verdana, sans-serif; background-color: #eee8f0; color: #556; font-size: 1em; } 

pre.text { font-family: fontmonospace, monospace; line-height: 17px; font-size: 0.7em; text-shadow: none; color: #eef; background-color: #556; padding: 10px; margin-top: 2px; margin-bottom: 4px; border: 1px solid #61605b; overflow: auto; } 

acronym { border-bottom: 1px dotted #556; cursor: help; } 

fieldset { border: 1px solid #ccd; padding: 1em; } 

fieldset legend { padding-left: 0.5em; padding-right: 0.5em; } 

caption,
th { text-align: left; } 

address { font-family: fontregular, sans-serif; font-style: normal; color: #99a; } 

hr { background-color: #556; color: #556; height: 1px; border: #556; margin-top: 1em; margin-bottom: 1em; } 

th { vertical-align: top; } 

.teasing { font-family: fontregular, sans-serif; font-size: 11px; color: #f1f1f1; vertical-align: bottom; text-align: right; padding: 5px; height: 100px; } 

.tbl { border: 1px solid #556; border-collapse: collapse; margin-bottom: 1em; width: 100%; } 

.tbltitle { font-family: fonttitle, sans-serif; font-size: 1.3em; color: #556; padding: 3px; text-align: left; } 

.tblsubtitle { font-family: fonttitle, sans-serif; font-size: 1em; color: #556; padding: 3px; text-align: left; } 

.tblcolumntitle { font-family: fontregular, sans-serif; color: #f8f5fa; font-size: 1em; padding: 3px; border: 1px solid #556; background-color: #556; text-align: left; } 

.tblcolumntitle .link { color: #f8f5fa; padding-right: 10px; background: transparent url(../graphics/css_link_symbol_white.gif) no-repeat
 100% 8px; } 

.tbltext { font-size: 0.9em; border: 1px solid #556; padding: 3px; } 

.title { font-family: fonttitle, sans-serif; font-size: 1.8em; margin-top: 0.5em; margin-bottom: 0.5em; } 

.subtitle { font-family: fonttitle, sans-serif; font-size: 1.3em; margin-top: 0.5em; margin-bottom: 0.5em; } 

.text { font-size: 1em; color: #556; line-height: 1.5em; margin-bottom: 1em; }

.form { font-family: fontregular, sans-serif; border: 1px solid #efebf2; background-color: #fff; color: #556; font-size: 1em; padding-top: 0.2em; padding-bottom: 0.2em; margin-right: 5px; box-sizing: border-box; outline: none; } 

.form_btn { font-family: fontregular, Tahoma, Verdana, sans-serif; font-size: 1em; height: 30px; border: 1px solid #efebf2; background-color: #efebf2; color: #556; padding-left: 5px; padding-right: 5px; } 

.form:focus { background-color: #fff; } 

.form_radio,
.form_checkbox { margin-right: 5px; } 

.form_select { height: 30px; } 

.form_select optgroup { font-family: inherit; } 

.error ul { list-style: none; list-style-type: none; } 

.error ul li { padding-left: 20px; background: url(../graphics/ico_error.gif) no-repeat; margin-bottom: 10px; } 

.warn { border: 5px solid #556; background-color: #efebf2; margin-top: 10px; margin-bottom: 10px; color: #889; } 

.warn ul { list-style: none; list-style-type: none; } 

.warn ul li { padding-left: 20px; background: url(../graphics/icon_warning.png) no-repeat; margin-bottom: 10px; } 

.svgicon { fill: #556; } 

.bold { font-weight: bold; } 

.italic { font-style: italic; } 

.underline { text-decoration: underline; } 

.link { color: #556; padding-right: 10px; background: transparent url(../graphics/css_link_symbol.gif) no-repeat 100%
 8px; } 

ul.text,
.text ul { list-style: none; list-style-type: none; margin-top: 10px; } 

ul.text li,
.text ul li { padding-left: 1.2em; background: url(../graphics/bullet.gif) no-repeat 4px 4px; margin-bottom: 8px; margin-left: 1em; } 

ol.text,
.text ol { margin-top: 8px; } 

ol.text li,
.text ol li { margin-bottom: 8px; margin-left: 2.3em; } 

p.text { margin-bottom: 10px; } 

.image_right { margin-left: 10px; margin-bottom: 10px; } 

.image_left { margin-right: 10px; margin-bottom: 10px; } 

.pagenavigator,
.link_btn { display: inline-block; background-color: #efebf2; color: #889; line-height: 1.5em; font-size: 1em; padding: 3px; padding-left: 1em; padding-right: 1em; text-decoration: none; border: 1px solid #efebf2; margin-right: 0.3em; margin-bottom: 0.3em; } 

.pagenavigator:hover,
.link_btn:hover { text-decoration: none; background-color: #556; color: #eef; } 

.pagenavigator_active { background-color: #99a; color: #eef; } 

.warning { color: #556; font-size: 1em; border: 4px solid #556; padding: 5px; padding-left: 100px; margin-top: 10px; margin-bottom: 10px; background: #dad3e0 url(../graphics/bg_warning.png) no-repeat 10px 10px; } 

.warning .link { color: #b65b14; text-decoration: underline; } 

.definitionlist { margin-bottom: 1em; } 

.term { font-family: fontbold, sans-serif; color: #556; margin-bottom: 0.5em; padding-left:16px; } 

.definition { margin-bottom: 1em; color: #5a5a5a; } 

.term:hover { cursor: pointer; text-decoration: underline; } 

.term_closed { background: url(../graphics/ico_node_closed.gif) no-repeat 0px 50%; } 

.term_open { background: url(../graphics/ico_node_open.gif) no-repeat 0px 50%; } 

@media (min-width: 320px){
 .head { position: fixed; top: 0px; width: 100%; height: 40px; background-color: #556; z-index: 10; } 

 .head .logo { position: absolute; top: 9px; left: 10px; } 

 .head #mobile { position: absolute; display: block; right: 0px; top: 0px; width: 40px; height: 40px; } 

 .teaser { display: block; position: relative; width: 100%; height: 100px; margin-top: 40px; background: url(../graphics/teaser_static2dynamic.jpg) no-repeat center; background-size: cover; } 

 .teaser > div { font-size: 0.7em; padding: 3em 1em; text-align: right; color: rgba(240, 240, 255, 0.7); text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8); } 

 .desktop,
 .head #topmenu { display: none; } 

 #mobilemenu { position: fixed; top: 40px; width: 100%; display: none; z-index: 5; } 

 #mobilemenu ul { background-color: rgba(85, 85, 102, 0.9); } 

 #mobilemenu ul li a { display: block; padding-left: 0.3em; font-size: 1.1em; text-decoration: none; line-height: 2.5em; border-bottom: 1px dotted #fff; } 

 .menu_active { color: #fff; } 

 .menu_inactive { color: #fff; } 

 .main { width: 100%; height: auto; background-color: #f8f5fa; padding-bottom: 3em; margin-top: 40px; } 

 .content { position: relative; height: auto; margin: 0.5em; } 

 .news_teaser { position: relative; display: flex; flex-direction: column; margin-top: 2px; width: 100%; color: #889; font-size: 0.9em; text-decoration: none; } 

 .news_teaser_entry { display: block; flex: 0 0 100%; height: auto; text-decoration: none; background: #efebf2; color: #889; font-size: 0.9em; transition: all ease-in-out 0.2s; margin-bottom: 1px; } 

 .news_teaser_entry > div { margin: 0.5em 1em; } 

 .footer { position: relative; width: 100%; font-size: 0.9em; color: #99a; } 

 .footer > div { display: flex; flex-direction: column; width: 100%; padding-bottom: 5em; font-size: 0.9em; color: #99a; } 

 .footer > div > div:not(:last-child) a { display: block; font-size: 1em; color: #99a; text-decoration: none; padding: 0.5em 0.5em; border-bottom: 1px dotted #556; } 

 .footer address { font-size: 1em; text-align: center; margin-top: 1em; } 

 .footer > div > div:last-child { font-size: 0.8em; text-align: center; margin-top: 1em; } 

 .footer > div > div:last-child a { display: inline-block; text-decoration: none; } 
 }

@media (min-width: 700px) { } 

@media (min-width: 1000px){
 .head { position: fixed; top: 0px; width: 100%; height: 50px; background-color: #556; z-index: 1; } 

 .head > div { position: relative; width: 950px; height: auto; margin-left: auto; margin-right: auto; } 

 .head .logo { position: absolute; top: 13px; left: 0px; } 

 .head #mobile { display: none; } 

 .main { width: 100%; height: auto; background-color: #f8f5fa; padding-bottom: 3em; } 

 .main > div { position: relative; width: 950px; height: auto; margin-left: auto; margin-right: auto; } 

 .teaser { display: block; position: relative; width: 100%; height: 200px; margin-top: 50px; background: url(../graphics/teaser_static2dynamic.jpg) no-repeat center; background-size: cover; } 

 .teaser > div { font-size: 1.3em; padding: 3em; text-align: right; color: rgba(240, 240, 255, 0.7); text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8); } 

 .head #topmenu { display: block; position: absolute; right: 0px; height: auto; width: 850px; text-align: right; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition: opacity 0.5s; display: none; } 

 .head #topmenu ul { list-style: none; list-style-type: none; } 

 .head #topmenu ul li { float: right; } 

 .head #topmenu ul li a { display: block; font-family: fontbold; font-size: 1em; padding-left: 1em; line-height: 50px; text-decoration: none; } 

 .head #topmenu ul li a:hover { color: #fff; } 

 .topmenu_start,
 .topmenu_right,
 .topmenu_end { border: 1px solid transparent; } 

 .topmenu_active { color: #eef; } 

 .topmenu_inactive { color: #eef; } 

 .desktop { display: block; position: relative; width: 100%; height: auto; background: #efebf2; } 

 .desktop .menu { display: table-cell; background-color: #f8f5fa; } 

 .desktop .menu ul { list-style: none; list-style-type: none; background-color: none; display: flex; margin-top: 2px; } 

 .desktop .menu ul li { flex: 1 1 auto; } 

 .desktop .menu ul li a { display: block; padding: 0.3em 1.3em; line-height: inherit; font-family: fontbold, Tahoma, Verdana, sans-serif; background: #efebf2; font-size: 1em; text-decoration: none; margin-right: 2px; } 

 .desktop .menu ul li a:hover { background-color: #556; color: #f8f5fa; } 

 .menu_start,
 .menu_right,
 .menu_end { border: 1px solid transparent; } 

 .menu_active { color: #556; } 

 .menu_inactive { color: #556; } 

 .services ul { list-style: none; list-style-type: none; } 

 .services ul li { float: left; } 

 .services ul li a { display: block; font-family: fontregular, Tahoma, Verdana, sans-serif; background: #efebf2; font-size: 1em; padding: 0.3em; padding-left: 1.3em; padding-right: 1.3em; text-decoration: none; margin-right: 2px; } 

 .services ul li a:hover { background-color: #556; color: #f8f5fa; } 

 .service_start,
 .service_right,
 .service_end { border: 1px solid transparent; } 

 .service_active { color: #556; } 

 .service_inactive { color: #556; } 

 .news_teaser { position: relative; display: flex; flex-direction: row; margin-top: 2px; } 

 .news_teaser_entry { display: block; flex: 0 0 25%; height: auto; text-decoration: none; background: #efebf2; color: #889; font-size: 0.9em; transition: all ease-in-out 0.2s; } 

 .news_teaser_entry:hover { background-color: #556; color: #efebf2; transform: scale(1.05); z-index: 2; } 

 .news_teaser_entry:hover svg { fill: #efebf2; } 

 .news_teaser_entry > div { margin: 1em; } 

 .content { position: relative; width: 100%; height: auto; } 

 .footer { position: relative; width: 950px; padding-top: 1em; padding-bottom: 5em; color: #99a; margin-left: auto; margin-right: auto; } 

 .footer > div { display: flex; flex-direction: row; align-content: stretch; width: 100%; margin: 0 auto 0 auto; } 

 .footer > div > div { flex: 0 0 25%; padding-top: 3px; } 

 .footer > div > div:last-child { font-size: 0.8em; text-align: right; margin: 0; } 

 .footer > div > div:not(:last-child) a { border: none; padding: 0; } 

 .footer a { color: #99a; text-decoration: none; padding: 0; } 

 .footer address { font-size: 0.8em; text-align: left; margin: 0; } 
 }