/* 
############################################
	Reset Vorlage nach W3C
############################################
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body{
	line-height: 1;
}
ol, ul{
	list-style: none;
}
blockquote, q{
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{
	content: '';
	content: none;
}
:focus{
	outline: 0;
}
ins{
	text-decoration: none;
}
del{
	text-decoration: line-through;
}
table{
	border-collapse: collapse;
	border-spacing: 0;
}
strong{
	font-weight:bold;
}
p{
	margin: 1.85em 0;	
}
button,input,select,textarea{
	font: inherit;
}div.success {
    background-color: #85C058;
    color: #666666;
}
div.error {
    background-color: #C30E21;
    color: #FFFFFF;
}
div.success, div.error {
    padding: .5em .5em .5em .66em;
    margin-bottom: .2em;
	clear: both;
}
form, form div {
	position: relative;
}
form fieldset {
	margin-bottom: 1em;
}
form legend {
	font-size: 1.5em;
	margin: 0 0 .33em;
}
form.row > *,
form .row > * {
	margin-bottom: 0;
}
form .short {
	width: 31.33%;
	float: left;
}
form .medium {
	float: right;
	width: 64.67%;
}
form input, form select, form textarea {
	background: #fff;
	border: 1px solid #ddd;
	color: #262d33;
	line-height: 1.75;
	margin-bottom: 1rem;
	padding: .66em .5em .25em;
	width: 100%;
}
form input[type="checkbox"], form input[type="radio"] {
	margin-bottom: initial;
	padding: initial;
	width: auto;
}
main form input:hover,
main form input:focus,
main form textarea:hover,
main form textarea:focus {
	border-color: #999;
}
main form select:hover,
main form select:focus {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' height='20px' width='25px'> <text x='0' y='15' fill='%23333' font-family='icomoon' font-size='16'>&%23x2335;</text> </svg>");
	border-color: #999;
}
main form input[type="checkbox"],
main form input[type="radio"] {
	margin: 0 5px 0 0;
	width: auto;
}
main form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff no-repeat right center;
	background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' height='20px' width='25px'> <text x='0' y='15' fill='%23666' font-family='icomoon' font-size='16'>&%23x2335;</text> </svg>");
	text-indent: 0.01px;
	text-overflow: "";
	padding: 6px;	
}

form label {
	clear: both;
	display: block;
	position: relative;
}
form label span.lbl {
	background: #fff;
	color: #555;
	padding: 0 .2em;
	pointer-events: none;
	position: absolute;
	left: .33em;
	transition: .2s;
}
form label :placeholder-shown + span.lbl,
form label select:invalid + span.lbl {
	color: #888;
	font-size: 1em;
	top: .4rem;
}
form label.lbl-chk,
form label input + span.lbl,
form label textarea + span.lbl,
form label select + span.lbl,
form label input:focus + span.lbl,
form label textarea:focus + span.lbl {
	display: inline-block;
	font-size: 0.8em;
	top: -.75em;
	white-space: nowrap;
}
form span.lbl[class*=" icon-"]::before{
	padding-right: .2em;
}

form textarea {
	height: calc(10em + 4px); /* Höhe von drei Input */
}
main form input::-webkit-input-placeholder,
main form textarea::-webkit-input-placeholder {
	color: transparent;
}
main form input::-ms-input-placeholder,
main form textarea::-ms-input-placeholder {
	color: transparent;
}
main form input::-moz-placeholder,
main form textarea::-moz-input-placeholder {
	color: transparent;
}
main form input::placeholder,
main form textarea::placeholder {
	color: transparent;
}
form label.lbl-chk {
	display: block;
	font-size: 0.8em;
	font-weight: 400;
	line-height: 1.25;
	margin-bottom: .5rem;
	min-height: 2em;
	padding-left: 2.6em;
	position: relative;
	text-shadow: 0 0 5px #fff;
	white-space: normal;
	width: auto;
}
form label.lbl-chk input {
	height: auto;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}
form label.lbl-chk .icon {
	font-size: 2.3em;
	height: 0.9em;
	line-height: 0;
	opacity: 1;
	position: absolute;
	left: 0;
	top: 0;
}
.lbl-chk .icon svg {
	fill:none;
	stroke-width:40;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke:#173557;
	vertical-align: middle;
}
.lbl-chk .icon svg .tick {
	opacity: 0;
	stroke:#173557;
	stroke-dasharray: 0% 590%;
	stroke-dashoffset: 0%;
	transition: stroke-dasharray .6s, stroke-dashoffset .6s, opacity .1s .5s;
}
.lbl-chk .icon svg .box {
	fill:#fff;
	stroke:#999;
	transition: stroke .2s;
}
.lbl-chk input:checked ~ .icon svg .tick {
	opacity: 1;
	stroke-dasharray: 100% 590%;
	stroke-dashoffset: -320%;
	transition: stroke-dasharray 1s cubic-bezier(0,.85,.5,.8), stroke-dashoffset .6s, opacity 0s;
}
.lbl-chk input:checked ~ .icon svg .box {
	stroke: #173557;
	transition: stroke .3s .3s;
}
form small.help {
	clear: both;
	display: block;
	line-height: 0.5;
	padding-bottom: 1em;
	text-align: right;
}
form div.pruefziffer {
	align-self: flex-end;
}
form div.pruefziffer input {
	margin-bottom: 0;
}
form div.send {
	text-align: right;
}/*
	Fonts
*/

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot');
  src:  url('fonts/icomoon.eot#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf') format('truetype'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/lato/lato-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/lato/lato-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('fonts/lato/lato-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/lato/lato-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/*
	Slide-in Animationen
*/

@keyframes slideInFromLeft {
	0% {
		transform: translateX(-10rem);
		opacity: 0;
	}
	50% {
		transform: translateX(-10rem);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slideInFromBottom {
	0% {
		transform: translateY(3rem);
		opacity: 0;
	}
	50% {
		transform: translateY(3rem) scale(.95);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}


/*
	Allgemeine Einstellungen
*/

*, *::before, *::after {
	box-sizing: border-box;
}
:root {
	font-size: 16px;
}
body {
	background: none #fff;
	color: #00355b;
	font-family: Lato, Arial, icomoon, sans-serif;
	line-height: 1.85;
	overflow-x: hidden;
}
body.loading, body.loading a {
	cursor: progress !important;
}
html.nav-open body { overflow: hidden; }

a {
	color: #009fe3;
	text-decoration: none;
}
a:hover, a:focus {
	text-decoration: underline;
}
a.mailto[data-server]::after {
	content: '@'attr(data-server);
}
.clear{ clear: both; }
img, svg {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}
.lazy img, img.lazy {
	min-width: 1px;
	min-height: 1px;
}
ul.nav li {
	display: inline-block;
}
ul.nav a {
	color: currentcolor;
	text-decoration: none;
}

body > header {
	padding: 1rem;
	padding: 0 calc(max(1rem, 50% - 750px));
}
body > .breadcrumb,
body > nav,
.banner .inner,
main > *,
main > .banner .text,
.startseite main .kontakt > *,
footer {
	padding: 1rem;
	padding: 0 calc(max(1rem, 50% - 570px));
}
main > .banner,
.startseite main .kontakt {
	padding: 0;
}
.textblock.schmal {
	padding-left: calc(max(1rem, 50% - 450px));
	padding-right: calc(max(1rem, 50% - 450px));
}
.textblock.breit {
	padding-left: calc(max(1rem, 50% - 690px));
	padding-right: calc(max(1rem, 50% - 690px));
}
body main > * {
	padding-top: 2rem;
	padding-bottom: 2rem;
}
main > h1,
main > h2,
main > h3 {
	margin: 0 15px;
	padding: 0;
}

/* BUTTONS */
button, .button {
	background: #009fe3;
	border: 2px solid transparent;
	border-radius: .3em;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: 1.2rem;
	line-height: 1.5;
	padding: .25rem 1.5rem;
	position: relative;
	text-decoration: none;
	transition: filter .3s;
}
button:not(.mobile):hover, .button:not(.mobile):hover,
button:not(.mobile):active, .button:not(.mobile):active {
	filter: brightness(1.2);
}
button:not(.mobile):focus, .button:not(.mobile):focus {
	filter: brightness(0.8) contrast(1.5);
}
button.ghost, .button.ghost {
	background: transparent;
	border: 2px solid currentcolor;
	color: #282b32;
}
button.fw::after, .button.fw::after {
	content: '\232a';
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1;
	vertical-align: middle;
}
button.bw::before, .button.bw::before {
	content: '\2329';
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1;
	vertical-align: middle;
}


/* GRID-LAYOUT */
.row {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	margin: 0 -1rem;
}
.row .row {
	margin: 0 -.5rem;
}
.row:after {
	content: '';
	clear: both;
	display: block;
}
.row > * {
	padding: 0 1em;
	margin-bottom: 1em;
}
.row .row > * {
	padding: 0 .5em;
}
.row.boxed > *[class^="col-"] {
	border: 0 none;
	margin: 0;
	padding: 20px 30px;
	position: relative;
}
.row.boxed > *[class^="col-"]::before {
	border: 2px solid #e6e6e6;
	content: '';
	position: absolute;
	top: 5px;
	right: 1rem;
	bottom: .33rem;
	left: 1rem;
	pointer-events: none;
}
*[class^="col-"] {
	flex: 0 0 auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	width: 100%;
}


/*
	--------------------------------------
	 Einstellungen für alle Displaygrößen
	--------------------------------------
*/

h1, h2, h3 {
	font-weight: 400;
	line-height: 1.2;
	margin: 0.6em 0;
}
h1, .startseite h2 { font-size: calc(clamp(1.6em, 4vw, 2em)); }
h2 { font-size: calc(clamp(1.4em, 3.5vw, 1.85em)); }
h3 { font-size: calc(clamp(1.2em, 3vw, 1.75em)); }
h1 small,
h2 small,
h3 small {
	display: block;
	font-size: .92em;
	font-weight: 400;
	text-transform: none;
}

.social {
	font-size: 0;
}
.social a {
	margin: 0 .3rem;
	text-decoration: none;
}
.social a::before {
	box-shadow: 0 0 0 2px #fff;
	border-radius: .2em;
	display: inline-block;
	font-size: 1.5rem;
	padding: .15em;
	text-align: center;
	width: 1.4em;
}

body > header {
	background: #00355b;
	color: #fff;
	display: flex;
		align-items: center;
		justify-content: space-between;
	text-align: center;
	z-index: 19;
}
body > header a {
	color: currentcolor;
}
body > header .right {
    display: flex;
		align-items: center;
	flex-grow: 1;
}
body > header .social {
	flex-grow: 1;
}

.lang-nav { float: right; height: 24px; position: relative; z-index: 10; }
.lang-nav li { background: #fff; }
.lang-nav:not(:hover) li:not(:first-child) { display: none; }
.lang-nav li img { width: 32px; height: 20px; }
.main-nav {
	color: #fff;
	font-weight: bold;
	top: 0;
	z-index: 20;
}
.main-nav .nav button:hover,
.main-nav .nav button:focus {
	filter: none;
}
.main-nav .nav a {
	display: block;
}

/* BREADCRUMB */
body div.breadcrumb {
	font-size: 0.93em;
	padding-top: 1rem;
	padding-bottom: 1rem;
	text-align: left;
}
.breadcrumb a {
	color: currentcolor;
	margin-right: 10px;
	text-decoration: none;
}
.breadcrumb a:not(:first-child)::before {
	content: '»  ';
}

/* SLIDER */
.banner {
	position: relative;
}
.banner .slick-track {
	display: flex;
}
.banner .slide {
	float: none;
	height: auto;
	position: relative;
	width: 100vw;
}
.banner .image {
	background: #000;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.banner .image img {
	height: 100%;
	width: 100vw;
	object-fit: cover;
}
.banner .inner {
	display: flex;
		align-items: flex-end;
	min-height: 32vw;
	padding-top: 5em;
	position: relative;
	z-index: 2;
}
.banner .text {
	position: relative;
	z-index: 5;
}
.banner .inner .text {
	background: rgba(255, 255, 255, .85);
	flex-grow: 1;
	padding: 0 1em;
	text-align: center;
}
.js .banner .text {
	visibility: hidden;
}
.js .banner .slick-slide .text {
}
.js .banner .slick-current .text {
	visibility: visible;
	animation: 2s ease-out 0s 1 slideInFromLeft;
}
.banner .title {
	font-size: calc(clamp(1.7em, 7vw, 3.3em));
	font-weight: bold;
	line-height: 1.2;
	margin-top: .25em;
	text-transform: uppercase;
}
.banner .desc {
	font-size: calc(clamp(1.4em, 5vw, 2.2em));
	line-height: 1.2;
	transition: .2s;
}
.banner .desc strong {
	font-size: 1.2em;
}
.banner .desc p:first-child {
	margin-top: 0;
}
.banner .desc p:last-child {
	margin-bottom: .5em;
}
body > .banner .button {
	font-size: 1.5rem;
}
.banner .button small {
	font-size: 1rem;
}
.banner .slick-dots {
	line-height: 1.3;
	position: absolute;
	bottom: 10%;
	right: 5%;
}
.banner .slick-dots button {
	background: #00355b;
	border-radius: 50%;
	box-shadow: 0 0 5px rgba(255,255,255,0.5);
	font-size: 0;
	height: 20px;
	padding: 0;
	width: 20px;
}
.banner .slick-dots .slick-active button {
	background: #34ccff;
}
.banner a.scrolldown {
	color: #fff;
	font-size: 100px;
	line-height: 0;
	text-decoration: none !important;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.5em;
	width: 100%;
	text-align: center;
}


/* CONTENT */
body > main {
	position: relative;
	z-index: 4;
}
main a[name] {
	position: relative;
	top: -80px;
}
.textblock ul {
	line-height: 2.3;
	margin: 1em 0;
}
.textblock ul li {
	display: inline-block;
	line-height: 1.2;
	padding-left: 2em;
	position: relative;
	width: 100%;
}
.textblock ul li::before {
	content: '\2714';
	color: #009fe3;
	font-size: 1.7em;
	line-height: 1.3;
	padding-right: .5em;
	padding-top: .2em;
	position: absolute;
	top: -.4em;
	left: 0;
}
.textblock .txt-img-wrap > * {
	position: relative;
}
.textblock .txt-img-wrap a {
	display: block;
}
.textblock .txt-img-wrap .caption {
	background: #e51f1c;
	color: #fff;
	font-weight: 400;
	opacity: .6;
	padding: 0 0.5em;
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 0;
	transition: opacity .33s;
}
.textblock .txt-img-wrap > div:hover .caption {
	opacity: 1;
}
.textblock.banner .slide::before {
	content: '';
	background: radial-gradient(ellipse at 0 0, #ffff, #fff0 70%);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 130%;
	z-index: 4;
}
.textblock.banner img {
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.textblock.banner .text {
	font-size: 1.3em;
	line-height: 1.5;
	padding-top: 3em;
	padding-bottom: 3em;
}
.textblock.banner .text > * {
	max-width: 29em;
}
.textblock.banner h2 {
	font-size: calc(clamp(1.7rem, 4vw, 2.2rem));
	text-transform: uppercase;
}
.textblock.banner p {
	margin: 1.5em 0;
}

.oeffnungszeiten span:first-child {
	display: inline-block;
	width: 8em;
	max-width: 50%;
}

.cards {
	display: flex;
		flex-wrap: wrap;
	margin: -0.5rem;
}
.cards .card {
	border-radius: .5rem;
	box-shadow: 0 0 .5rem rgba(0,0,0,0.2);
	display: flex;
		flex-direction: column;
	flex: 1 0 15rem;
	-webkit-hyphens: auto;
	hyphens: auto;
	margin: .5rem;
	overflow: hidden;
}
.cards .card > * {
	width: 100%;
}
.cards .txt {
	flex-grow: 1;
	padding: 2rem 1rem;
}
.cards .fw {
	background: #00355b;
	color: #fff;
	font-size: .75em;
	font-weight: 700;
	padding: .5rem 1rem;
	margin: 1em 0 0;
	text-transform: uppercase;
}
.cards .fw::after {
	content: '\25b6';
	font-size: 1.25em;
	font-weight: 400;
	padding-left: 1em;
}
a.card {
	color: currentcolor;
	text-decoration: none;
}

.js main > * > * {
	visibility: hidden;
}
.js main > * > *.in-view {
	animation: 1.5s ease-out -.75s 1 slideInFromBottom;
	visibility: visible;
}


/* FOOTER */
body > footer {
	background-color: #00355b;
	color: #fff;
	display: flex;
		align-items: flex-end;
		flex-wrap: wrap;
		justify-content: space-between;
	overflow: hidden;
	padding-top: 1em;
}
body > footer .kontaktdaten {
	background: #fff;
	border-radius: .3em .3em;
	color: #00355b;
	margin: auto;
	padding: 2em 1.5em 3em;
}
body > footer .kontaktdaten img {
	margin-bottom: 1em;
}
body > footer .kontaktdaten .adresse {
	display: inline-block;
	line-height: 1.5;
}
body > footer .kontaktdaten strong {
	line-height: 2;
}
body > footer a {
	color: currentcolor;
	text-decoration: none;
}
body > footer .links {
	flex-grow: 1;
	text-align: center;
}
body > footer .links > * {
	display: inline-block;
	margin: 2rem .5rem;
}
body > footer .links > .social {
	margin-top: 0;
}
body > footer .meta a {
	display: inline-block;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 1.3;
	margin: 0 .33em;
}


/* Kontakt */
.kontakt .pflichtinfo {
	display: block;
	font-size: 0.8rem;
	font-weight: 400;
	padding: 0.6em 0;
}
form div.send {
	text-align: right;
}

/* Youtube */
.embed-yt {
	color: #333;
	font-size: .93em;
	text-align: center;
	position: relative;
}
.embed-yt .overlay {
	background: #fffa;
	margin: 0 auto;
	max-width: 850px;
	padding: 1em 2em 2em;
	position: absolute;
		left: 0;
		right: 0;
		top: 50%;
	transform: translateY(-50%);
}


/* Startseite */
.startseite .willkommen {
	background: #f1f2ed;
	margin: 7em 0 6em;
	margin-top: calc(min(10vw, 7em));
	margin-bottom: calc(min(8vw, 6em));
	padding-top: 0;
	padding-bottom: 0;
}
.startseite .willkommen > * {
	background: #fffc;
}
.startseite .willkommen .img {
	margin: 0;
	position: relative;
}
.startseite .willkommen .img img {
	height: 115%;
	object-fit: contain;
	position: absolute;
		bottom: 0;
		left: -10%
}
.startseite .willkommen .txt {
	margin-bottom: 1.5em;
	max-width: 40em;
}
.startseite .dienstleistungen .card {
	position: relative;
}
.startseite .dienstleistungen .flyout {
	background: #fff;
	overflow: hidden;
	padding: 0 1em;
	position: absolute;
		top: 50%;
		bottom: 50%;
		left: 0;
	transition: .2s;
	width: 100%;
}
.startseite .dienstleistungen .card:hover .flyout {
	top: 0;
	bottom: 2.75em;
	padding: 1em;
}
.startseite main .banner {
	margin-top: calc(min(15vw, 11em));
	margin-bottom: calc(min(13vw, 9em));
}
.startseite .kontakt h2 {
	text-align: center;
}
.startseite .kontakt > div {
	background: #f1f2ed;
	margin-top: 2em;
	padding-top: 3em;
	padding-bottom: 2em;
}
.startseite .textblock.kontakt .form {
	margin-bottom: 3em;
}
.startseite #gmap_canvas {
	height: 265px;
}


/* Unterseiten */
body:not(.startseite) main > .textblock {
	background: #f1f2ed;
	margin: min(11vh, 8em) 0 0;
}
body:not(.startseite) main > .textblock.bild_text,
body:not(.startseite) main > .textblock.text_bild {
	padding-top: 0;
	padding-bottom: 0;
}
body:not(.startseite) main > .textblock.bild_text > .row > *,
body:not(.startseite) main > .textblock.text_bild > .row > * {
	margin: 0;
	padding: 0 2em;
}
body:not(.startseite) main > .textblock.bild_text .img,
body:not(.startseite) main > .textblock.text_bild .img {
	position: relative;
}
body:not(.startseite) main > .textblock.bild_text .img img,
body:not(.startseite) main > .textblock.text_bild .img img {
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body:not(.startseite) main > .textblock.bild_text .txt {
	background: #fbfbfb;
}


/* Unternehmen - Produktpartner */
body.unternehmen .textblock .txt-img-wrap {
	margin: 0 -0.5em;
}
body.unternehmen .textblock .txt-img-wrap > * {
	display: flex;
		align-items: center;
	margin: 0;
	max-width: 50%;
	padding: .5em;
}
body.unternehmen .textblock .txt-img-wrap a {
	background: #fff;
	display: flex;
	padding-bottom: 100%;
	pointer-events: none;
	position: relative;
	width: 100%;
}
body.unternehmen .textblock .txt-img-wrap img {
	object-fit: contain;
	padding: .5em;
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: 100%;
}

/* Unternehmen - Standorte */
body.unternehmen .textblock.karte.breit {
	padding: 0;
}


/* Karriere */
.karriere .textblock.erfolg {
	background: #9fa;
}
.karriere .row.boxed > *[class^="col-"],
.karriere .row > .box {
	border: 0 none;
	margin: 0;
	padding: 20px 30px;
	position: relative;
}
.karriere .row.boxed > *[class^="col-"]::before,
.karriere .row > .box::before {
	border: 2px solid #e6e6e6;
	content: '';
	position: absolute;
	top: 5px;
	right: 15px;
	bottom: 5px;
	left: 15px;
	pointer-events: none;
}
.karriere form .error-msg { color: red; display: none; padding: 15px; }
.karriere form .error-msg::before { display: none; }
.karriere form .invalid { box-shadow: 0 0 5px red; }
.karriere form .invalid .error-msg { display: block; }
.karriere form .boxed input { position: absolute; visibility: hidden; }
.karriere form .row > input:not([type="checkbox"]) + label { background: #fff; font-size: 0.9rem; cursor: pointer; opacity: 1; position: relative; }
.karriere form > label:hover::before { border-color: #999; }
.karriere form > input:checked + label { color: #054e5e; }
.karriere form > input:checked + label::before { border-color: #054e5e; }
.karriere form > input:invalid { box-shadow: none; }
.karriere form input[type="checkbox"] + label::after,
.karriere form input[type="radio"] + label::after { font-size: 30px; position: absolute; right: 25px; top: 20px; font-weight: 400; line-height: 1; }
.karriere form input[type="checkbox"] + label::after { content: '\2610'; }
.karriere form input[type="checkbox"]:checked + label::after { content: '\2611'; }
.karriere form input[type="radio"] + label::after { content: '\29be'; }
.karriere form input[type="radio"]:checked + label::after { content: '\29bf'; }
.karriere form .boxed label { padding-right: 60px; }
.karriere form .file-upload { margin-bottom: 2em; position: relative; }
.karriere form input[type="file"] { position: absolute; top: 0; opacity: 0; width: 1px; }
.karriere .uploadButtonsContainer.modern + label.button.ghost {
	display: none;
}


/* Map */
#gmap_canvas {
	height: 800px;
	margin-top: 0;
	max-height: 90vh;
}
#gmap_canvas.cookie-not-set {
	border: 1px solid #999;
	color: #666;
	display: flex;
		align-items: center;
	font-size: .85em;
	line-height: 1.4;
	padding: 1rem;
}
#gmap_canvas.cookie-not-set > * {
	max-width: 850px;
	margin: 0 auto;
}
#gmap_canvas.cookie-not-set p {
	margin-top: 0;
}
.osm {
	display: inline-block;
	position: relative;
}
.osm .copyright {
	background: #fff;
	background: #fffd;
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 100%;
}


/* Impressum */
.impressum .os {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.impressum .os > * {
	flex: 1 1 auto;
}
.impressum .os .anschrift {
	margin: 2em 2em 2em 0;
}


/* Sitemap */
.sitemap main ul ul {
	margin-left: .75em;
}


/*
	-----------------------------------------
	 Einstellungen für Displaygrößen < 500px
	-----------------------------------------
*/

.col-1, .col-1-5 {
	width: 50%;
}

header .logo img {
	height: 45px;
}

.main-nav .btn-toggle-menu {
	background: transparent none;
	border: 0 none;
	cursor: pointer;
	padding: 8px;
	text-align: center;
}
.main-nav .btn-toggle-menu::after {
	display: none; /* hover-Effekt ausschalten */
}
.main-nav .btn-toggle-menu svg {
	width: 45px;
}
.main-nav .btn-toggle-menu rect {
	fill: #fff;
	transform-origin: 25px 25px;
	transition: .4s;
}
.main-nav .btn-toggle-menu.active rect#top {
	transform: rotate(45deg) translateY(14px);
}
.main-nav .btn-toggle-menu.active rect#middle {
	opacity: 0;
}
.main-nav .btn-toggle-menu.active rect#bottom {
	transform: rotate(-45deg) translateY(-14px);
}
.main-nav .nav li {
	display: block;
	position: relative;
}
.main-nav .nav a {
	padding: 1rem 0;
}
.main-nav .nav a.active {
	font-weight: bold;
}
.main-nav .nav ul {
	max-height: 0;
	overflow: hidden;
	left: 0;
}

/* Navigation ausblenden beim runterscrollen - Klassen werden per JS gesetzt */
@media screen and (max-height: 500px) {
	body > header.small,
	.main-nav {
		transition: .2s;
	}
	body > header.small.hidden,
	body > header.hidden + nav {
		top: -60px;
	}
}


@media screen and (max-width: 499px) {
	.sm1 { width: 25%; }
	.sm2 { width: 50%; }
	.sm3 { width: 75%; }
}
@media screen and (min-width: 500px) {
	.md1 { width: 25%; }
	.md2 { width: 50%; }
	.sm1 { width: 25%; }
	.sm2 { width: 50%; }
	.sm3 { width: 75%; }

	body > footer {
		flex-wrap: nowrap;
	}
	body > footer .kontaktdaten {
		border-radius: .3em .3em 0 0;
		margin: 0;
		min-width: 17em;
	}
	body > footer .links {
		text-align: right;
	}
	body > footer .links > * {
		margin-left: 1rem;
		margin-right: 0;
	}
	body > footer .social a {
		margin: 0 0 0 .6rem;
	}
	body > footer .nav,
	body > footer .meta li {
		display: block;
	}
	body > footer .meta a {
		margin: 0 0 0 .75em;
	}
}

@media screen and (min-width: 650px) {
	.col-1 { width: 16.66%; }
	.col-1-5 { width: 25%; }
	.col-2 { width: 33.33%; }
	.col-3, .col-4, .col-5, .col-2-5 { width: 50%; }
	
	.md1 { width: 16.66%; }
	.md2 { width: 33.33%; }
	.md3 { width: 50%; }
	.md4 { width: 66.66%; }
	.md5 { width: 83.33%; }
	.md6 { width: 100%; }
	
	button, .button {
		padding: 0 1.5rem;
	}
	
	.cards .card {
		flex-basis: 18em;
	}

	body > footer .nav,
	body > footer .meta li {
		display: inline-block;
	}
}

@media (min-width: 800px) {
	.mobile {
		display: none;
	}
	
	.col-1 { width: 8.33%; }
	.col-2 { width: 16.66%; }
	.col-3, .col-1-4 { width: 25%; }
	.col-4 { width: 33.33%; }
	.col-5 { width: 41.66%; }
	.col-6 { width: 50%; }
	.col-7 { width: 58.33%; }
	.col-8 { width: 66.66%; }
	.col-9 { width: 75%; }
	.col-10 { width: 83.33%; }
	.col-11 { width: 91.66%; }
	.col-1-5 { width: 20%; }
	.col-2-5 { width: 40%; }
	.col-3-5 { width: 60%; }
	.col-4-5 { width: 80%; }

	body > header {
		align-items: stretch;
		padding-top: 2rem;
		padding-bottom: 2rem;
		text-align: right;
	}
	header .logo {
		max-width: 25%;
	}
	header .logo img {
		height: 5em;
	}
	body > header .right {
		align-items: stretch;
		flex-direction: column;
		justify-content: space-between;
	}
	.main-nav {
		font-size: calc(min(1.6em, 2.6vw));
		line-height: 1;
		position: sticky;
	}
	.main-nav .nav > li {
		display: inline-block;
		margin-left: 4.5%;
	}
	.main-nav .nav a {
		padding: 0;
	}
	.main-nav .nav li:hover > a,
	.main-nav .nav a.active {
		color: #009ee3;
	}
	.main-nav .nav ul {
		border-radius: 5px;
		color: #fff;
		font-size: .6em;
		padding-top: 0;
		position: absolute;
			top: 100%;
		text-align: left;
		transition: 0.2s;
		width: 300px;
	}
	.main-nav .nav ul::before {
		content: '';
		border: .75em solid;
		border-color: transparent transparent #009ee3;
		height: 0;
		overflow: hidden;
		position: absolute;
			top: 0;
			left: 1em;
		transition: 0.2s;
	}
	.main-nav .nav li:hover ul {
		max-height: 300px;
		padding-top: 1.45em;
	}
	.main-nav .nav li:hover ul::before {
		height: 1em;
	}
	.main-nav .nav ul li:first-child a {
		border-radius: 5px 5px 0 0;
	}
	.main-nav .nav ul a {
		background: #009ee3;
		font-weight: 400;
		padding: .66em 1em;
	}
	.main-nav .nav ul li:not(:last-child) a {
		border-bottom: 1px solid #fff;
	}
	.main-nav .nav ul a:hover,
	.main-nav .nav ul a.active {
		background: #00355b;
		box-shadow: 0 0 0 1px #009ee3 inset;
		color: #fff;
		font-weight: 400;
	}
	
	.startseite .textblock.kontakt .form {
		margin-bottom: 0;
		order: 1;
	}
	.startseite .kontakt .pruefziffer {
		flex-grow: 1;
		width: auto;
	}
	.startseite .kontakt div.send {
		width: 10em;
	}
}

@media (max-width: 799px) {
	.desktop {
		display: none;
	}
	
	body > header {
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
		height: 60px;
		padding-right: 0;
		position: sticky;
		top: 0;
	}
	.main-nav {
		height: 60px;
		padding: 0;
		width: 60px;
	}
	.main-nav > ul.nav {
		background-color: rgba(0,53,91,0.95);
		display: block;
		font-size: .1em;
		height: 0;
		opacity: 0.97;
		overflow: hidden;
		padding-top: 0;
		position: fixed;
		top: 60px;
		left: 0;
		right: 0;
		-webkit-transition: .4s;
		transition: .4s;
	}
	.nav-open .main-nav > ul.nav {
		font-size: 1em;
		height: calc(100% - 60px);
		overflow: auto;
		padding-top: 10vh;
	}
	.nav-open .main-nav > ul.nav::after {
		content: '';
		height: 1px;
		width: 1px;
		position: absolute;
		bottom: -2px;
	}
	/*.main-nav > ul.nav::after {
		content: '';
		background: url(logo.svg) no-repeat center bottom;
		background-size: contain;
		opacity: 0.1;
		position: absolute;
		top: calc(100% - 55px);
		height: 100px;
		left: 10px;
		right: 10px;
		z-index: 1;
	}*/
	.main-nav .nav > li {
		border: 0 none;
		display: list-item;
		float: none;
		font-size: 1.5em;
		margin: 0;
		padding: 0;
		width: 100%;
		z-index: 2;
	}
	.main-nav ul.nav li button.mobile {
		background: transparent;
		border: 0;
		font-size: 1em;
		padding: .5em 0;
		position: absolute;
		top: 0;
		right: 0;
		width: 4.5rem;
	}
	.main-nav .nav a {
		padding: .5em 0;
	}
	.main-nav ul.nav a.active,
	.main-nav ul.nav a:hover {
		background: rgba(255, 255, 255, 0.3);
	}
	.main-nav .nav ul {
		background: rgba(255,255,255,0.2);
		font-size: .3em;
		text-align: center;
		transition: font-size .4s, max-height .8s cubic-bezier(0, 1, 0, 1) -.3s;
		top: 0;
		width: auto;
	}
	.main-nav .nav li.open ul {
		font-size: .85em;
		max-height: 9999px;
		transition: font-size .4s, max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s;
	}
	.main-nav ul.nav ul a {
		color: #fff;
		font-size: 0.9em;
	}
}

/*
	Plugins
*/

/* Icomoon-Icons */
[class^="icon-"]::before, [class*=" icon-"]::before {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	line-height: 1;
	speak: none;
	text-transform: none;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-location:before {
	content: "\1f4cd";
}
.icon-mail:before {
	content: "\1f4e7";
}
.icon-message:before {
	content: "\1f5e9";
}
.icon-mobile:before {
	content: "\1f4f1";
}
.icon-phone:before {
	content: "\1f57b";
}
.icon-user:before {
	content: "\1f464";
}
.icon-facebook:before {
	content: "\e901";
}
.icon-instagram:before {
	content: "\e902";
}
.icon-pinterest:before {
	content: "\e905";
}
.icon-twitter:before {
	content: "\e904";
}
.icon-whatsapp:before {
	content: "\e900";
}
.icon-xing:before {
	content: "\e903";
}
.icon-youtube:before {
	content: "\e906";
}

/* Cookie-Hinweis */
.cookie-hinweis {
	background-color: rgba(0,0,0,0.9);
	box-shadow: 0 0 10px 0 #000;
	color: #fff;
	padding: 1rem;
	font-size: 0.85em;
	position: sticky;
	position: -webkit-sticky;
	bottom: 0;
	max-height: 13em;
	text-align: center;
	transition: background .2s 0s, max-height .4s 1s, padding .4s 1s, opacity .4s 1s;
	z-index: 99999;
}
.cookie-hinweis .buttons {
	display: block;
	margin-top: 1em;
}
.cookie-hinweis button,
.cookie-hinweis .button {
	font-size: 1.1rem;
	margin: 0 3px;
	width: 6.6em;
}
.cookie-hinweis.hidden {
	background: #00355b;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0;
}


/* Overlay */
input#cbxHideOverlay {
	display: none;
}
input#cbxHideOverlay:checked + .overlay {
	display: none;
}
body > .overlay {
	background: rgba(0,0,0,0.9);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99;
}
body > .overlay > .content {
	background: #fff;
	padding: 1em 2em 2em;
	position: absolute;
	left: 50%;
	top: 50%;
	max-height: 90%;
	max-width: 1330px;
	width: 95%;
	overflow: auto;
	transform: translate(-50%, -50%);
}
body > .overlay .btn-close {
	background: #c00;
	color: #fff;
	cursor: pointer;
	font-size: 2em;
	line-height: 1.5;
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
	width: 1.5em;
}
.unternehmen .dein-unabhaengiger-finanzberater img {
	object-fit: contain !important;	
}