/* -- CSS Variablen -- */
:root {
	--starkesschwarz: #000000;
	--nachthimmelblau: #001928;
	--dunkelblau: #00273d;
	--technischesblau: #008bd0;
	--frischesblau: #55bbe9;
	--mittelgrau: #cccccc;
	--hellgrau: #efefef;
	--qualitaets-weiss: #ffffff;
	--koralle: #ff9898;
	--pfirsich: #ffac74;
	--orange: #fe9e5d;
	--zitrone: #f6ff8d;
	--zitronelight: #f6f4ca;
	--minze: #b1dbb6;
	--minzelight: #bde5c7;
	--tiefseeblubber: #335264;
}

@font-face {	
    font-family: 'Anicons';
    src: url('../fonts/AniconsGX.ttf');	
    font-weight: normal;
    font-style: normal;
}

/* XLight */
@font-face {
	font-family: 'URWDIN';
	font-display: swap;
	font-style: normal;
	font-weight: 200;
	src: url('../fonts/URW-DIN/XLight/URWDIN-XLight.ttf');
	src: local('URWDIN-XLight'),
		url('../fonts/URW-DIN/XLight/URWDIN-XLight.woff') format('woff');
}

/* Light */
@font-face {
	font-family: 'URWDIN';
	font-display: swap;
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/URW-DIN/Light/URWDIN-Light.ttf');
	src: local('URWDIN-Light'),
		url('../fonts/URW-DIN/Light/URWDIN-Light.woff') format('woff');
}

/* Regular */
@font-face {
	font-family: 'URWDIN';
	font-display: swap;
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/URW-DIN/Regular/URWDIN-Regular.ttf');
	src: local('URWDIN-Regular'),
		url('../fonts/URW-DIN/Regular/URWDIN-Regular.woff') format('woff');
}

/* Medium */
@font-face {
	font-family: 'URWDIN';
	font-display: swap;
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/URW-DIN/Medium/URWDIN-Medium.ttf');
	src: local('URWDIN-Medium'),
		url('../fonts/URW-DIN/Medium/URWDIN-Medium.woff') format('woff');
}

/* Demi */
@font-face {
	font-family: 'URWDIN';
	font-display: swap;
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/URW-DIN/Demi/URWDIN-Demi.ttf');
	src: local('URWDIN-Demi'),
		url('../fonts/URW-DIN/Demi/URWDIN-Demi.woff') format('woff');
}

/* Bold */
@font-face {
	font-family: 'URWDIN';
	font-display: swap;
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/URW-DIN/Bold/URWDIN-Bold.ttf');
	src: local('URWDIN-Bold'),
		url('../fonts/URW-DIN/Bold/URWDIN-Bold.woff') format('woff');
}

* {
	outline: none;
}

html {
	height: 100%;
	width: 100%;
	float: left;
	clear: both;
}

body {
	width: 100%;
	height: 100%;
	float: left;
	clear: both;
    margin: 0;
	padding: 0;
	font-family: 'URWDIN', 'Calibri Light', 'Arial Narrow', 'Calibri', Arial, sans-serif;
    font-size: 15px;
	/*line-height: 1.3em;*/
    color: var(--starkesschwarz);
}

#oben, #header, #inhaltsbereich, #footer {
    float: left;
    clear: both;
    width: 100%;
}

.symbol {
	display: inline-block;
}

.symbol::before {
	content: "\0040";
}

.sprachen {
    position: absolute;
	top: 30px;
	left: 0;
	width: auto;
	font-size: 12px;
	font-weight: 600;
}

.sprachen ul {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sprachen ul li {
	display: inline-block;
	vertical-align: top;
	margin: 0 5px;
	background: none;
	text-transform: uppercase;
	text-align: center;
}

.sprachen ul li a, .sprachen ul li .nolink {
	color: var(--qualitaets-weiss);
	text-decoration: none;
	display: block;
	width: 30px;
	height: 24px;
	line-height: 24px;
	position: relative;
	cursor: pointer;
}

.sprachen ul li .nolink {
	cursor: default;
}

.sprachen ul li.spa_act a {
	background: url(../images/speechbubble_white.png) left top no-repeat;
	background-size: 30px auto;
	display: block;
	width: 30px;
	height: 24px;
	color: var(--starkesschwarz);
}

.sprachen ul li a span, .sprachen ul li .nolink span {
	display: block;
	line-height: 23px;
}

.sprachen ul li .nolink .tooltip {
	display: none;
	white-space: nowrap;
	background: var(--starkesschwarz);
	color: var(--qualitaets-weiss);
	position: absolute;
	left: 60%;
	top: -20px;
	padding: 5px;
	font-size: 11px;
	font-weight: 400;
	line-height: 1em;
	text-transform: none;
}

.sprachen ul li .nolink .tooltip::before {
    content: '';
    display: block;
    position: absolute;
    left: 10px;
    bottom: -5px;
    width: 0px;
    height: 0px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    border-style: solid;
    border-width: 0px 2px 5px 7px;
    border-color: transparent transparent var(--starkesschwarz) transparent;
}

.sprachen ul li .nolink:hover .tooltip {
	display: block;
}

/* -- Sprachen Unterseite -- */
.sub .sprachen ul li a, body[data-scrolled="on"] .sprachen ul li a, .sub .sprachen ul li .nolink, body[data-scrolled="on"] .sprachen ul li .nolink {
	color: var(--starkesschwarz);
	text-decoration: none;
	display: block;
	width: 30px;
	height: 24px;
}

.sub .sprachen ul li.spa_act a, body[data-scrolled="on"] .sprachen ul li.spa_act a {
	background: url(../images/speechbubble_black.png) left top no-repeat;
	background-size: 30px auto;
	display: block;
	width: 30px;
	height: 24px;
	color: var(--qualitaets-weiss);
}

.animation {
	font-variation-settings: "TIME" 1;
    transition: all 0.4s ease;
}

.animation:hover {
   font-variation-settings: "TIME" 100;
}

a {
	color: var(--technischesblau);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a.more {
	background: var(--technischesblau);
	color: var(--qualitaets-weiss);
	text-decoration: none;
	padding: 10px 45px 10px 20px;
	border-radius: 7px;
	display: inline-block;
	margin: 10px 0;
	position: relative;
	text-transform: uppercase;
	transform: scale(1.05, 1);
	letter-spacing: -0.01em;
	transform-origin: 0 0;
    word-spacing: 0.06em;
	font-weight: 400;
	transition: all 0.5s ease;
}

a.more::after {
    content: '';
    display: block;
    background: url(../images/arrow.png) left top no-repeat;
    width: 18px;
    height: 15px;
    position: absolute;
    right: 20px;
    top: 13px;
    background-size: 100% auto;
}

a.more:hover {
	background-color: var(--dunkelblau);
}

p {
	margin: 0 0 10px 0;
}

h1 {
	font-size: 44px;
	margin: 30px 0;
	text-transform: uppercase;
	font-weight: 200;
	line-height: 1.3em;
	transform: scale(1.05, 1);
    letter-spacing: -0.04em;
    transform-origin: 50% 0;
    word-spacing: 0.06em;
	/* text-shadow: 0px 0px 40px rgba(0,0,0,0.75); */
}

#main h1 {	
	font-weight: 400;
}

.page0 h1 + p {
	font-size: 26px;
}

.sub h1 {
	transform-origin: 0 0;
}

.subheadline h1 {
	margin-bottom: 0;
}

h2 {
	font-family: 'URWDIN', Arial, Helvetica, sans-serif;
	font-size: 24px;
	line-height: 1.3em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 1.5em 0;
}

h3 {
	font-family: 'URWDIN', Arial, Helvetica, sans-serif;
	font-size: 20px;
	line-height: 1.3em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 1em 0;
}

.page17 h3 {
	margin: 2em 0 1em;
    float: left;
	clear: both;
    display: block;
    width: 100%;
}

.page17 p {
    float: left;
	clear: both;
    width: 100%;
}

.frame {
    float: left;
    clear: both;
    width: 100%;
}

.frame  img {
	max-width: 100%;
	height: auto;
}

#oben > .rahmen,
#footer > .rahmen {
	width: 96%;
	/*max-width: 1435px;*/
	margin: 0 auto;
	position: relative;
}

.breadcrumbsbox > .rahmen {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
}

.sub #inhaltsbereich > .frame > .rahmen, .sub #inhaltsbereich .tx_cn-multicontent > .rahmen {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
}

#main > #oben, #oben {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 4;
}

.sub #oben, body[data-scrolled="on"] #oben {
	background: var(--qualitaets-weiss);
	transition: all 1s ease;
}

/* -- Logo -- */
#oben .frame-type-textmedia .ce-row img {
	transition: all 1s ease;
	opacity: 0;
}

.sub #oben .frame-type-textmedia .ce-row img, body[data-scrolled] #oben .frame-type-textmedia .ce-row img {
	opacity: 1;
}

#oben .frame-type-textmedia .ce-row:last-child {
	display: none;
}

#oben .frame-type-textmedia .ce-gallery,
#oben .frame-type-textmedia .ce-row {
	margin: 0;
}

/* Unterseite Logo */
.sub #oben .frame-type-textmedia .ce-row:first-child, body[data-scrolled="on"] #oben .frame-type-textmedia .ce-row:first-child {
	display: none;
}

.sub #oben .frame-type-textmedia .ce-row:last-child, body[data-scrolled="on"] #oben .frame-type-textmedia .ce-row:last-child {
	display: block;
}

#oben .frame-type-textmedia .ce-row img {
	transition: all 1s ease;
}

.sub #oben .frame-type-textmedia .ce-row img, body[data-scrolled="on"] #oben .frame-type-textmedia .ce-row img {
	width: 80px;
	height: auto;
}

#oben > .rahmen > .frame {
	width: calc(100% - 200px);
	float: none;
	margin: 0 auto;
}

/* -- Navi -- */
.mob_button {
	position: absolute;
    right: 0;
    top: 15px;
    z-index: 5;
    margin: 0;
    width: 60px;
    height: 60px;
    cursor: pointer;
	display: block; 
	font-family: 'Anicons', sans-serif;
    font-size: 40px;
    color: var(--qualitaets-weiss);
	font-variation-settings: "TIME" 1;
    transition: all 0.4s ease;
}

.sub .mob_button, body[data-scrolled="on"] .mob_button {	
    color: var(--starkesschwarz);
}

.mob_button .act {
	display: none;
}

.mob_button .link {
	display: block;
}

.mob_button.mobnavvisible .link {
	display: none;
}

.mob_button.mobnavvisible .act {
    transition: all 0.4s ease;
	display: block;
	font-variation-settings: "TIME" 100;
}

.mob_button:hover {
	font-variation-settings: "TIME" 100;
}

.mob_button.mobnavvisible:hover .act {
	font-variation-settings: "TIME" 0;
}

.hnavi {
	position: absolute;
	top: 120px;
	right: 0;
	background: var(--dunkelblau);
	color: var(--qualitaets-weiss);
	padding: 40px 40px !important;
	border-radius: 40px;
	width: auto !important;
	list-style: none;
	margin: 0;
	font-size: 34px;
	font-weight: 400;
	text-align: right;
	display: none;
	max-width: 250px;
	z-index: 4;
	overflow: visible !important;
	box-shadow: -10px 10px 40px 0px rgba(0,0,0,0.5);
}

.hnavi::before {	
	content: "";
	display: block;
	position: absolute;
	right: 40px;
	top: -25px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 0 25px 40px;
	border-color: transparent transparent var(--dunkelblau) transparent;
}

.hnavi a {
	color: var(--qualitaets-weiss);
	text-decoration: none;
}

.hnavi li {
	width: auto;
	margin: 0 0 5px 0;
	text-transform: uppercase;
	opacity: 0;
	transition: all 0.5s ease;
	transition-delay: 0.05s;
}

.hnavi.show li {
	opacity: 1;
}

.hnavi > li:first-child > a {
	color: var(--pfirsich);
}

.hnavi > li:nth-child(2) > a {
	color: var(--zitrone);
}

.hnavi > li:last-child > a {
	color: var(--minze);
}

.hnavi li ul {
	font-size: 20px;
	font-weight: 400;
	list-style: none;
	margin: 15px 0 40px 0;
	text-transform: none;
}

.hnavi li ul li {
	text-transform: none;
	max-width: none;
}
/* -- Main -- */
#main {
	min-height: 100vh;
}

#main, #footer {
	float: left;
	clear: both;
	width: 100%;
}

#main > * {
	position: relative;
	z-index: 1;
	color: var(--qualitaets-weiss);
}

#main > #oben > .frame > .rahmen,
#main > #inhaltsbereich > .frame > .rahmen {
	max-width: 1400px;
	width: 90%;
	margin: 0 auto;
}

#main #inhaltsbereich {
	margin: 43vh 0 100px 0;
}

#main > .background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 0;
}

.responsive-video {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-bottom: 55%;
}

.responsive-video video {
	object-fit: cover;
}

.background::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	z-index: 1;
}

/* -- Unterseiten -- */
.sub {
	float: left;
    min-height: 100%;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.sub #oben {
	box-shadow: 0 0 5px var(--mittelgrau);
}

.sub #inhaltsbereich {
	margin-bottom: 184px;
	padding-top: 150px;

}

/* -- Gibt sonst Probleme auf der Listenansicht -> wegen der Karte -- 
.sub #inhaltsbereich {
	padding-top: 80px;
}*/

.sub #inhaltsbereich > .frame:first-child.frame-type-felogin_login {
	padding-top: 80px;
	color: var(--qualitaets-weiss);
}

.frame-type-felogin_login fieldset, .frame-type-felogin_login form[action*="changePassword"] {
	width: 90%;
	float: left;
	padding: 30px 5% 50px;
	color: var(--qualitaets-weiss);
	margin: 10px 0 100px;
	background: var(--frischesblau); 
	position: relative;
	overflow: unset;
	z-index: 1;
	border: 0;
	font-size: 18px;
}

.frame-type-felogin_login form[action*="changePassword"] {
	margin-top: 30px;
}

.frame-type-felogin_login fieldset.eingeloggt {
	margin-bottom: 0;
}

.frame-type-felogin_login fieldset legend, .frame-type-felogin_login form[action*="changePassword"] legend {
	display: inline-block;
	padding: 10px 30px;
    background: var(--technischesblau);
    border-radius: 7px;
    margin-left: -75px;
	text-transform: uppercase;
	font-weight: 500;
	position: relative;
	z-index: 1;
}

.frame-type-felogin_login form[action*="changePassword"] legend {
	float: left;
	margin-top: -50px;
}

.frame-type-felogin_login form[action*="changePassword"] > div {
	float: left;
	clear: both;
	width: 100%;
	margin: 10px 0 0 0;
}

.frame-type-felogin_login form[action*="changePassword"] > input[type="submit"] {
	float: left;
	clear: both;
}

.frame-type-felogin_login fieldset legend::before {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    bottom: -10px;
    width: 0px;
    height: 0px;
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    border-style: solid;
    border-width: 0px 13px 10px 4px;
    border-color: transparent transparent var(--technischesblau) transparent;
}

.frame-type-felogin_login fieldset > a {
	font-size: 16px;
    line-height: 1em;
	margin: 15px 0 0 0;
	padding: 8px 0;
	display: inline-block;
}

.frame-type-felogin_login > .rahmen > h3 {
	display: none;
}

.loginrow {
	float: left;
	clear: both;
	width: 100%;
	margin: 7px 0 0 0;
}

.loginrow label, .frame-type-felogin_login form[action*="recovery"] label, .frame-type-felogin_login form[action*="changePassword"] > div label {
	display: block;
	float: left;
	width: 28%;
	max-width: 110px;
	margin: 0 2% 0 0;
	font-size: 16px;
	line-height: 1em;
}

.frame-type-felogin_login form[action*="recovery"] label, .frame-type-felogin_login form[action*="changePassword"] > div label {
	width: 98%;
	max-width: unset;
}

.eingeloggt .loginrow label {
	width: auto;
	max-width: 100%;
}

.loginrow span {
	font-size: 16px;
	line-height: 1em;
    display: inline-block;
    vertical-align: top;
}

.loginrow input, .frame-type-felogin_login form[action*="recovery"] input, .frame-type-felogin_login form[action*="changePassword"] > div label input {
	display: block;
	float: left;
	width: 68%;
	max-width: 300px;
	border: 0;
	padding: 5px 1%;
	outline: none;
}

.frame-type-felogin_login form[action*="recovery"] label input, .frame-type-felogin_login form[action*="changePassword"] > div label input {
	width: 98%;
	float: none;
	clear: both;
	margin: 10px 0 0 0;
}

.loginrow input:focus {
	box-shadow: 0 0 2px 1px var(--technischesblau);
}

.submitbutton button, .frame-type-felogin_login form[action*="recovery"] input[type="submit"], .frame-type-felogin_login form[action*="changePassword"] > input[type="submit"] {
	position: absolute;
	bottom: -20px;
	right: 40px;
	display: inline-block;
	padding: 10px 30px;
    background: var(--technischesblau);
    border-radius: 7px;
	border: 0;
	font-size: 18px;
	text-transform: uppercase;
	font-family: 'URWDIN', 'Calibri Light', 'Arial Narrow', 'Calibri', Arial, sans-serif;
	font-weight: 500;
	color: var(--qualitaets-weiss);
	outline: none;
	cursor: pointer;
    transition: all 0.5s ease;
}

.submitbutton button::before {
    content: "";
    display: block;
    position: absolute;
    left: 20px;
    top: -10px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 13px 10px 4px;
    border-color: transparent transparent var(--technischesblau) transparent;
    transition: all 0.5s ease;
}

.submitbutton button:hover, .frame-type-felogin_login form[action*="recovery"] input[type="submit"]:hover, .frame-type-felogin_login form[action*="changePassword"] > input[type="submit"]:hover {
    background: var(--dunkelblau);
}

.submitbutton button:hover::before {    
    border-color: transparent transparent var(--dunkelblau) transparent;
}

.meldung {
	font-size: 16px;
    margin: -52px 0 2em -5.6%;
    padding: 45px 5.6% 2em;
    background: rgba(255,255,255,0.15);
    width: 100%;
}

.logincookie p {
	color: var(--orange) !important;
	font-weight: 500 !important;
}

/* -- Breadcrumbs -- */
.breadcrumbsbox {
	width: 100%;
	float: left;
	clear: both;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 80px;
	left: 0;
	text-transform: uppercase;
	z-index: 3;
}

.breadcrumbsbox > .rahmen {
	display: flex;
}

.breadcrumbsbox::before {
	content: '';
	width: 50%;
	height: 6px;
	background: var(--technischesblau);
	position: absolute;
	top: 0;
	left: 0;
}

.breadcrumbsbox::after {
	content: '';
	width: 50%;
	height: 6px;
	background: var(--frischesblau);
	position: absolute;
	top: 0;
	right: 0;
}

.breadcrumbsbox p {
	margin: 0;
}

.startlink {
	white-space: nowrap;
	float: left;
	background: var(--technischesblau);
	padding: 14px 40px 0 0;
	height: 54px;
	position: relative;
}

.startlink::before {
	content: '';
	display: block;
	width: 145px;
	height: 100%;
	background: url(../images/welle-links.png) left top no-repeat;
	position: absolute;
	top: 1px;
	left: -145px;
}

.startlink > .frame {
	margin-left: -20px;
    position: relative;
    z-index: 1;
}

.startlink > .frame .ce-textpic {
	overflow: visible;
}

.startlink a {
	color: var(--qualitaets-weiss);
	text-decoration: none;
	display: block;
	padding: 10px 5px 10px 25px;
	background: url(../images/back.png) left center no-repeat;
	background-size: 16px auto;
}

.breadcrumbs {
	width: calc(100% - 40px);
	float: left;
	background: var(--frischesblau);
	padding: 24px 0 0 40px;
	height: 44px;
	position: relative;
	color: var(--qualitaets-weiss);
}

.breadcrumbs a {
	color: var(--qualitaets-weiss);	
	text-decoration: none;
}

.breadcrumbs::after {
	content: '';
	display: block;
	width: 145px;
	height: 100%;
	background: url(../images/welle-rechts.png) left top no-repeat;
	position: absolute;
	top: 1px;
	right: -145px;
}

.breadcrumbs > span {
	display: inline-block;
	vertical-align: top;
	font-weight: 700;

}

.breadnav {
	display: inline-block;
	vertical-align: top;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadnav li {
	display: inline-block;
	vertical-align: top;
	margin: 0 0 0 20px;
	padding: 0;
	list-style: none;
}

.breadnav li a {
	padding: 0 0 4px 0;
}

.breadnav li a:hover {
	border-bottom: 1px solid var(--qualitaets-weiss);
	padding: 0 0 3px 0;
}

#inhaltsbereich .frame-layout-1 {
	background: var(--nachthimmelblau);
	margin-bottom: 80px;
	position: relative;
}

#inhaltsbereich .frame-layout-1::after {
	content: '';
	width: 100%;
	height: 200px;
	position: absolute;
	background-image: linear-gradient(to left top, var(--qualitaets-weiss) 0%, var(--qualitaets-weiss) 50%, transparent 50.4%);
	bottom: 0;
	left: 0;
}

#inhaltsbereich .frame-layout-2 {
	background: var(--nachthimmelblau);
	margin-top: 120px;
	position: relative;
}

#inhaltsbereich .frame-layout-2::before{
	content: '';
	width: 100%;
	height: 81px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: var(--qualitaets-weiss);

}

#inhaltsbereich .frame-layout-2::after {
	content: '';
	width: 100%;
	height: 220px;
	position: absolute;
	background-image: linear-gradient(to left bottom, var(--qualitaets-weiss) 0%, var(--qualitaets-weiss) 50%, transparent 50.4%);
	top: 80px;
	left: 0;
}

.sub #inhaltsbereich .frame-layout-3 > .rahmen {
	width: 100%;
	margin: 0;
	max-width: none;
}

/* -- Rahmen -- */
.sub #inhaltsbereich > .frame:first-child {
	margin-top: -70px;
}

.page17 .sub #inhaltsbereich > .frame:first-child {
	margin-top: 30px;
}

/*
.sub #inhaltsbereich > .frame.frame-layout-3:first-child {
	margin-top: 0;
}*/

.frame-textkachel {
	position: relative;
	font-size: 34px;
	text-transform: uppercase;
	font-weight: 200;
	padding: 120px 0;
}

.sub #inhaltsbereich .frame-textkachel.frame-layout-2 {
	padding: 0px 0 80px 0;
}

.sub #inhaltsbereich .frame-textkachel.frame-layout-2 .ce-gallery {
	bottom: 80px;
}

.sub #inhaltsbereich .frame-textkachel > .rahmen {
	width: 96%;
	max-width: 1400px;
	margin: 0 auto;
	position: static;
}

.sub #inhaltsbereich .frame-textkachel .ce-textpic {
	width: 100%;
	float: left;
	clear: both;
	margin: 0;
}

.sub #inhaltsbereich .frame-textkachel .ce-bodytext {
	width: 65%;
	float: left;
	padding: 40px 0 40px 80px;
	border-radius: 20px;
	color: var(--qualitaets-weiss);
	margin: 50px 0;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#55bbe9+0,008bd0+100 */
	background: var(--technischesblau); /* Old browsers */
	background: -moz-linear-gradient(left,  var(--frischesblau) 0%, var(--technischesblau) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  var(--frischesblau) 0%,var(--technischesblau) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  var(--frischesblau) 0%,var(--technischesblau) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	position: relative;
	overflow: unset;
	z-index: 1;
}

.sub #inhaltsbereich .frame-textkachel.frame-layout-2 .ce-bodytext {
	margin-bottom: 140px;
}

.page16 .sub #inhaltsbereich .frame-textkachel.frame-layout-2 .ce-bodytext {
	margin-bottom: 90px;
}

.sub #inhaltsbereich .frame-textkachel .ce-bodytext p {
	margin: 0 0 20px 0;
	transform: scale(1.05, 1);
	letter-spacing: -0.01em;
	transform-origin: 0 0;
    word-spacing: 0.06em;
}

.sub #inhaltsbereich .frame-textkachel .ce-bodytext ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sub #inhaltsbereich .frame-textkachel .ce-gallery {
	width: 60%;
	margin: 0;
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
	z-index: 2;
}

.sub #inhaltsbereich .frame-textkachel .ce-gallery.ce-border {
	bottom: auto;
	top: 100px;
}

.sub #inhaltsbereich .frame-textkachel .ce-gallery.ce-border img {
	border: 0;
}

.sub #inhaltsbereich .frame-textkachel .ce-gallery .ce-row,
.sub #inhaltsbereich .frame-textkachel .ce-gallery .ce-column,
.sub #inhaltsbereich .frame-textkachel .ce-gallery .image {
	width: 100%;
	float: left;
	clear: both;
	margin: 0;
}

.sub #inhaltsbereich .frame-textkachel .ce-gallery .image img {
	display: inline-block;
	vertical-align: top;

}

.sub #inhaltsbereich .frame-textkachel a.more {
	background: var(--technischesblau);
	color: var(--qualitaets-weiss);
	text-decoration: none;
	padding: 10px 55px 10px 20px;
	border-radius: 15px;
	display: inline-block;
	margin: 10px 0;
	position: relative;
	font-size: 20px;
	text-transform: uppercase;
	position: absolute;
	bottom: -35px;
	left: 105px;
	transform: scale(1.05, 1);
	letter-spacing: -0.01em;
	transform-origin: 0 0;
    word-spacing: 0.06em;
	font-weight: 500;
}

.sub #inhaltsbereich .frame-textkachel a.more::after {
	content: '';
	display: block;
	background: url(../images/arrow.png) left top no-repeat;
	width: 26px;
	height: 21px;
	position: absolute;
	right: 16px;
    top: 14px;
}

.sub #inhaltsbereich .frame-textkachel .ce-bodytext em {
	font-style: normal;
	font-size: 0.8em;
	line-height: 1.3em;
	display: inline-block;
	margin: 0 0 0 50px;
}

.sub #inhaltsbereich .frame-textkachel .ce-bodytext u {
	text-decoration: none;
	font-size: 1.8em;
	line-height: 1.5em;
}

.sub #inhaltsbereich .frame-rahmen .rahmen {	
	width: 92%;
	padding: 20px 1%;
	box-shadow: inset 0 0 0 1px var(--starkesschwarz);
}

.ce-border img {
    border: 1px solid rgba(0,0,0,0.25);
}

.sub #inhaltsbereich .frame .ce-bodytext ul {
	font-size: 26px;
	line-height: 1.4em;
	font-weight: 300;
	color: var(--starkesschwarz);
	margin: 20px 0;
	padding: 0;
	float: left;
	clear: both;	
}

.sub #inhaltsbereich .frame .ce-bodytext ul li {
	margin: 10px 0 10px 0;
	padding: 5px 0 5px 60px;
	background: url(../images/check-bullet.png) left top no-repeat;
	background-size: auto 1.7em;
	display: block;
	float: left;
	clear: both;
}

.sub #inhaltsbereich .cn_multicontent_teaser {
	font-size: 26px;
	line-height: 1.4em;
	font-weight: 600;
	color: var(--starkesschwarz);
}

.page17 .sub #inhaltsbereich .frame .ce-bodytext ul {
    font-size: 15px;
	font-weight: 400;
    line-height: 1.3em;
    margin: 0 0 20px 10px;
    padding: 0;
	width: calc(100% - 10px);
}

.page17 .sub #inhaltsbereich .frame .ce-bodytext ul li {
	margin: 0 0 5px 0;
	padding: 0 0 0 20px;
	background: url(../images/check-bullet.png) left 1px no-repeat;
	background-size: auto 1em;
}

.frame-sprechblase {
	float: left;
	clear: both;
	width: 100%;
	margin: 50px 0 80px;
}

.frame-sprechblase ol {
	list-style: none;
	margin: 0 0 0 40px;
	padding: 0;
}

.frame-sprechblase ol li {
	margin: 0 0 0.6em 0;
	position: relative;
}

.frame-sprechblase ol li::before {
	content: '\203A';
	position: absolute;
	left: -15px;
	top: 0;
	font-size: 30px;
	font-weight: 300;
}

.sub #inhaltsbereich > .frame-sprechblase > .rahmen {
	width: 84%;
	max-width: 980px;
	padding: 40px 3%;
	border-radius: 20px;
	color: var(--qualitaets-weiss);
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#55bbe9+0,008bd0+100 */
	background: var(--technischesblau); /* Old browsers */
	background: -moz-linear-gradient(left,  var(--frischesblau) 0%, var(--technischesblau) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  var(--frischesblau) 0%,var(--technischesblau) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  var(--frischesblau) 0%,var(--technischesblau) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	position: relative;
	font-size: 17px;
	line-height: 1.3em;
}

.sub #inhaltsbereich .tx-powermail form > h3 {
	color: var(--qualitaets-weiss);
}

.sub #inhaltsbereich .powermail_fieldset {
	width: 90%;
    float: left;
    padding: 30px 5%;
    color: var(--qualitaets-weiss);
    margin: 0 0 40px;
    background: var(--frischesblau);
    position: relative;
    z-index: 1;
    border: 0;
    font-size: 17px;
}

.page16 .sub #inhaltsbereich .powermail_fieldset.nolabel {
	background: none;
	padding: 0;
}

.sub #inhaltsbereich .powermail_legend {
    display: inline-block;
    padding: 10px 30px;
    background: var(--technischesblau);
    border-radius: 7px;
    margin-left: -75px;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
}

.sub #inhaltsbereich .powermail_legend::before {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    bottom: -10px;
    width: 0px;
    height: 0px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    border-style: solid;
    border-width: 0px 13px 10px 4px;
    border-color: transparent transparent var(--technischesblau) transparent;
}

.sub #inhaltsbereich .powermail_fieldwrap {
	float: left;
	clear: both;
	width: 100%;
	margin: 0 0 5px 0;
}

.sub #inhaltsbereich .powermail_label {
    display: block;
    float: left;
    width: 28%;
    margin: 0 2% 0 0;
    font-size: 16px;
    line-height: 1.3em;
    padding: 7px 0;
}

.sub #inhaltsbereich .powermail_field {
    display: block;
    float: left;
    width: 70%;
	position: relative;
}

.sub #inhaltsbereich .powermail_fieldwrap_absenden .powermail_field {
	position: static; 
}

.sub #inhaltsbereich .powermail_fieldwrap.nolabel .powermail_field {
	width: 100%;
}

.sub #inhaltsbereich .powermail_field input, .sub #inhaltsbereich .powermail_field select, .sub #inhaltsbereich .powermail_field textarea {
    font-family: 'URWDIN', 'Calibri Light', 'Arial Narrow', 'Calibri', Arial, sans-serif;
    font-size: 16px;
    color: var(--starkesschwarz);
    background: var(--qualitaets-weiss);
    border: 0;
	width: 98%;
    padding: 5px 1%;
    outline: none;
}

.sub #inhaltsbereich .powermail_fieldwrap_type_submit {
	float: left;
	clear: both;
	padding: 30px 0 0 0;
	position: relative;
}

.sub #inhaltsbereich .powermail_fieldwrap_type_submit .powermail_field .powermail_submit {
    position: absolute;
	right: 0;
	bottom: -55px;
    width: auto;
	display: inline-block;
    padding: 10px 30px;
    background: var(--technischesblau);
    border-radius: 7px;
    border: 0;
    font-size: 18px;
    line-height: 18px;
    text-transform: uppercase;
    font-family: 'URWDIN', 'Calibri Light', 'Arial Narrow', 'Calibri', Arial, sans-serif;
    font-weight: 500;
    color: var(--qualitaets-weiss);
    outline: none;
    cursor: pointer;
	-webkit-appearance: none;
}

.sub #inhaltsbereich .powermail_fieldwrap_type_submit::before {
    content: "";
    display: block;
    position: absolute;
	right: 115px;
    bottom: -18px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 13px 10px 4px;
    border-color: transparent transparent var(--technischesblau) transparent;
}

.en .sub #inhaltsbereich .powermail_fieldwrap_type_submit::before {
	right: 65px;
}

ul.parsley-errors-list,
ul.powermail-errors-list {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--nachthimmelblau);
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 14px;
}

.sub #inhaltsbereich .powermail_field input.parsley-error, .sub #inhaltsbereich .powermail_field select.parsley-error, .sub #inhaltsbereich .powermail_field textarea.parsley-error,
.sub #inhaltsbereich .powermail_field input.powermail_field_error, .sub #inhaltsbereich .powermail_field select.powermail_field_error, .sub #inhaltsbereich .powermail_field textarea.powermail_field_error {
	background: var(--zitronelight);
}

.sub #inhaltsbereich .powermail_field .parsley-error:focus + ul.parsley-errors-list,
.sub #inhaltsbereich .powermail_field .powermail_field_error:focus + ul.powermail-errors-list {
	display: none;
}

.sub #inhaltsbereich .powermail_create {
	width: 90%;
    float: left;
    padding: 30px 5%;
    color: var(--qualitaets-weiss);
    margin: 0 0 40px;
    background: var(--frischesblau);
    position: relative;
    z-index: 1;
    border: 0;
    font-size: 17px;
}

/* -- Footer -- */
#footer {
	background: var(--dunkelblau);
	color: var(--qualitaets-weiss);
	padding: 25px 0;
	position: relative;
	z-index: 1;
	font-size: 15px;
	line-height: 1.4em;
}

.sub #footer {
	position: absolute;
	bottom: 0;
	left: 0;
}

#footer a {
	color: var(--qualitaets-weiss);
	text-decoration: none;
}


#footer h5,
#footer h5 a {
	font-size: 16px;
	color: var(--koralle);
	margin: 0 0 10px;
	font-weight: 600;
	text-transform: uppercase;
}

#footer .frame-type-menu_sitemap_pages.frame-layout-1 h5,
#footer .frame-type-menu_sitemap_pages.frame-layout-1 h5 a {
	color: var(--pfirsich);
}

#footer .frame-type-menu_sitemap_pages.frame-layout-2 h5,
#footer .frame-type-menu_sitemap_pages.frame-layout-2 h5 a {
	color: var(--zitrone);
}

#footer .frame-type-menu_sitemap_pages.frame-layout-3 h5,
#footer .frame-type-menu_sitemap_pages.frame-layout-3 h5 a {
	color: var(--minze);
}

#footer ul {
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footerlinks {
	width: 60%;
	float: left;
}

.footerlinks .tx_cn-multicontent > .rahmen > .tx_cn-columns > div > div {
	max-width: 260px;
}

.footerlinks .tx_cn-multicontent > .rahmen > .tx_cn-columns > div > div > .frame > .rahmen {
	width: calc(100% - 40px);
	padding: 15px 20px;
}


.footerlinks .tx_cn-multicontent > .rahmen > .tx_cn-columns > div > div:first-child > .frame > .rahmen {
	padding-left: 0;
	width: calc(100% - 20px);
}

.footerlinks .tx_cn-multicontent > .rahmen > .tx_cn-columns > div > div:nth-child(2) > .frame > .rahmen {
	/* height: calc(100% - 30px); */
	height: calc(100% - 70px);
	border-left: 1px solid var(--tiefseeblubber);
	border-right: 1px solid var(--tiefseeblubber);
}

.footerlinks .ce-below .ce-gallery {
    margin-top: 5px;
}

.footerlinks .ce-column {
    margin-right: 8px;
}

.quicklinks {
	width: 40%;
	float: right;
	text-align: right;
	margin-top: 15px;
}

.btn-primary,
.btn-default {
    color: var(--qualitaets-weiss);
    background-color: var(--frischesblau);
    border-color: var(--frischesblau);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:disabled,
.btn-primary.hover, .btn-primary.focus, .btn-primary.active, .btn-primary.disabled,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default:disabled,
.btn-default.hover, .btn-default.focus, .btn-default.active, .btn-default.disabled,
.btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active,
.show > .btn-default.dropdown-toggle {
    color: var(--qualitaets-weiss);
    background-color: var(--technischesblau);
    border-color: var(--technischesblau);
}

.btn-secondary[data-target="#cookieman-settings"] {
	display: none;
}

/* --- Favoriten --- */
#favoriten {
    position: absolute;
    right: 80px;
    top: 20px;
    z-index: 5;
    margin: 0;
    width: 85px;
    height: 40px;
    display: block;
    color: var(--qualitaets-weiss);
	border-right: 1px solid var(--qualitaets-weiss);
}

#favoriten .herz {
	font-family: 'Anicons', sans-serif;
    font-size: 40px;
    line-height: 40px;
    color: var(--qualitaets-weiss);
	font-variation-settings: "TIME" 0;
    transition: all 0.4s ease;
	float: left;
}

#favoriten:hover .herz {
	/* font-variation-settings: "TIME" 100; */
    animation-name: herz;
    animation-duration: 1s;
}

@keyframes herz {
    0%   {font-variation-settings: "TIME" 0;}
    50%  {font-variation-settings: "TIME" 100;}
    100% {font-variation-settings: "TIME" 0;}
}

.sub #favoriten, body[data-scrolled="on"] #favoriten, body[data-scrolled="on"] #favoriten .herz, .sub #favoriten .herz {	
    color: var(--starkesschwarz);
}

.sub #favoriten, body[data-scrolled="on"] #favoriten {
	border-right: 1px solid var(--starkesschwarz);
}

.anzahl-favoriten {
	display: inline-block;
	width: 25px;
	height: 20px;
	text-align: center;
	background: url(../images/speechbubble_pfirsich.png) left top no-repeat;
	background-size: 100% auto;
	font-size: 12px;
	line-height: 20px;
	font-weight: 500;
	color: var(--starkesschwarz);
	position: relative;
    top: -5px;
}

/* --- Favoriten --- */