/* ==========================================================================
   CROSSWATERS GmbH — stylesheet (plain CSS, no build step)
   Sizes, colours and breakpoints follow the previous TYPO3 site 1:1.
   Colours only via the variables in :root.
   ========================================================================== */

:root {
	--c-white: #fff;
	--c-white-75: rgba(255, 255, 255, 0.75);
	--c-white-80: rgba(255, 255, 255, 0.8);
	--c-black: #000;
	--c-black-30: rgba(0, 0, 0, 0.3);
	--c-black-50: rgba(0, 0, 0, 0.5);
	--c-black-65: rgba(0, 0, 0, 0.65);
	--c-black-90: rgba(0, 0, 0, 0.9);
	--c-black-0: rgba(0, 0, 0, 0);
	--c-slide-bg: #111;

	--c-petrol: #00566b;          /* page background, mobile menu */
	--c-petrol-hover: #279eb2;    /* active menu item, lines in the mobile menu */
	--c-cyan: #09dcff;            /* Links */
	--c-grey: #706f6f;            /* main menu */
	--c-button: #4a9db2;          /* home page buttons */

	--c-box-dunkleres-blau: rgba(0, 86, 107, 0.8);
	--c-box-dunkel-blau: rgba(1, 93, 112, 0.8);
	--c-box-hell-blau: rgba(26, 180, 205, 0.9);

	--font: "Poppins", Arial, Verdana, sans-serif;
}

/* Poppins, self-hosted (used weights only) */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/poppins-v6-latin-regular.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/poppins-v6-latin-500.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/poppins-v6-latin-700.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, em, img, strong,
b, i, ol, ul, li, table, tbody, tr, th, td, figure, header, footer, nav, main, picture, button {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: 0; }
img { border: none; }
main, figure, header, footer, nav { display: block; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html, body { height: 100%; }
body {
	position: relative;
	font: 16px var(--font);
	line-height: 28px;
	color: var(--c-white);
	background-color: var(--c-petrol);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

h1, h2, h3, h4, h5, h6 {
	font: 18px var(--font);
	line-height: 120%;
	color: var(--c-white);
	font-weight: bold;
	padding: 10px 0 0;
	text-transform: uppercase;
}
h1 { font-size: 40px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 20px; text-transform: none; }
h5 { font-size: 18px; text-transform: none; }
h1, h2, h3, h4, h5 {
	padding-top: 20px;
	margin-top: 15px;
	position: relative;
	margin-bottom: 30px;
}
:is(h1, h2, h3, h4) + :is(h1, h2, h3, h4), h4 + h5 { padding-top: 0; }
:is(h1, h2, h3, h4, h5) + p { margin-top: 30px; }
:is(h1, h2, h3, h4, h5)::after {
	content: " ";
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 60px;
	height: 1px;
	background: var(--c-white-75);
	display: block;
}

p { padding: 10px 0 5px; }
a { text-decoration: none; color: var(--c-cyan); }
a:hover { text-decoration: underline; }
.cont a { overflow-wrap: break-word; } /* safety net for long URLs/e-mail addresses */
hr {
	background: transparent;
	border: 0 solid var(--c-white);
	height: 0;
	padding: 0;
	margin: 20px 0;
	border-bottom: 1px solid var(--c-white);
}
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }

/* Text styles */
.Button {
	display: inline-block;
	background: var(--c-cyan);
	color: var(--c-white);
	padding: 0 20px;
	line-height: 40px;
	border-radius: 20px;
}
.Button:hover { background: var(--c-petrol); color: var(--c-white); text-decoration: none; }
.GrosserText { font-size: 24px; }

/* Icon links (phone, mobile, mail, vCard, address, Instagram, LinkedIn, PDF) */
.Telefon, .Mobil, .Mail, .Vcard, .Adresse, .Instagram, .Linkedin, .pdf {
	color: var(--c-white);
	padding-left: 35px;
	line-height: 25px;
	height: 25px;
	font-size: 14px;
	display: inline-block;
	margin-bottom: 4px;
	transition: color 0.2s ease;
	background: url("../img/ui/tel.png") no-repeat left top;
}
.Instagram, .Linkedin { font-size: 0; }
.Mobil { background-image: url("../img/ui/mobil.png"); }
.Mail { background-image: url("../img/ui/mail.png"); }
.Vcard { background-image: url("../img/ui/vcard.png"); }
.Adresse { background-image: url("../img/ui/steuerrad.png"); }
.pdf { background-image: url("../img/ui/pdf.png"); }
.Instagram { background-image: url("../img/ui/instagram.png"); }
.Linkedin { background-image: url("../img/ui/linkedin.png"); }
.Adresse.Adresse-gross { font-size: 20px; }
a.Telefon:hover, a.Mobil:hover, a.Mail:hover, a.Vcard:hover, a.Adresse:hover,
a.Linkedin:hover, a.Instagram:hover, a.pdf:hover {
	color: var(--c-cyan);
	background-position: left bottom;
	text-decoration: none;
}

/* Lists */
.allcont ul { margin: 5px 0 10px 0; }
.allcont ul li {
	list-style-type: none;
	padding: 3px 0 3px 24px;
	background: url("../img/ui/bullet.svg") 1px 3px no-repeat;
	background-size: 14px auto;
	line-height: 1.3;
	margin-bottom: 14px;
}
.allcont ol { margin: 5px 0 10px 18px; }
.allcont ol li { list-style-type: decimal; padding: 3px 0; }

/* Tables */
.allcont table { margin: 10px 0 5px; }
.allcont table tr td { padding: 5px 10px 5px 0; }

/* --------------------------------------------------------------------------
   Page skeleton
   -------------------------------------------------------------------------- */
#site { position: relative; overflow: visible; }
.is-home #site { height: 100%; contain: paint; } /* clips like the former overflow:hidden (buttons flying in) */

.inner {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	position: relative;
}

/* Subpage background image (fixed) */
.background {
	position: fixed;
	inset: 0;
}
.background picture, .background img {
	display: block;
	width: 100%;
	height: 100%;
}
.background img { object-fit: cover; object-position: center center; }

/* Loading overlay (as before: opaque for 1 s, then fades out) */
.overlay-loader {
	position: fixed;
	inset: 0;
	z-index: 1000;
	animation: loaderHide 0.4s ease 2s forwards;
}
.overlay-loader .loader-background {
	position: absolute;
	inset: 0;
	background-color: var(--c-black-90);
	animation: fadeOut 2.5s ease-out 1s 1 forwards;
}
@keyframes loaderHide { to { opacity: 0; visibility: hidden; } }

/* Home page: slideshow */
.slideshow {
	position: fixed;
	inset: 0;
	overflow: hidden;
	z-index: -999;
}
.slide {
	position: fixed;
	inset: 0;
	display: none;
	background: var(--c-slide-bg);
	z-index: -30;
}
.slide.is-next { display: block; opacity: 0; }
.slide.is-prev { display: block; z-index: -20; }
.slide.is-active { display: block; z-index: -10; opacity: 1; }
.slide.is-fading { transition: opacity 2s linear; }
.slide picture, .slide img { display: block; width: 100%; height: 100%; }
.slide img { object-fit: cover; object-position: center center; }

/* --------------------------------------------------------------------------
   Subpage header
   -------------------------------------------------------------------------- */
.head {
	position: fixed;
	width: 960px;
	padding: 20px 25px 13px;
	height: 100px;
	z-index: 500;
	background: var(--c-white-80);
	top: 50px;
	left: 50%;
	margin-left: -505px;
}
.head .inner { z-index: 100; }

#logo {
	background: url("../img/ui/logo-quer.png") no-repeat left top;
	background-size: 350px 94px;
	width: 350px;
	height: 94px;
	float: left;
	margin-left: -7px;
}
#logo a { display: block; width: 100%; height: 100%; }
#logo a span { display: none; }

.nav {
	display: block;
	margin-top: 37px;
	margin-bottom: 40px;
	float: right;
}
.nav li { position: relative; }
.nav li:hover > a, .nav li.over > a, .nav li.act > a { text-decoration: none; }
.nav a { display: block; font-weight: 500; }
.nav > ul::after { content: ""; display: block; clear: both; }
.nav > ul > li { float: left; display: inline; }
.nav > ul > li > a {
	color: var(--c-grey);
	font-size: 18px;
	line-height: 44px;
	display: inline-block;
	margin: 0 15px;
	text-transform: uppercase;
	padding: 0 0 32px 0;
}
.nav > ul > li:last-child > a { margin-right: 0; }
.nav > ul > li.act > a { color: var(--c-petrol-hover); }

/* Dropdown */
.subNav {
	display: none;
	position: absolute;
	z-index: 100;
	left: 0;
	top: 76px;
}
.head.sticky .subNav { top: 65px; }
.nav li:hover > .subNav, .nav li.over > .subNav { display: block; }
.subNav .subNav { left: 100%; top: 0; }
.nav > ul > li:last-child > .subNav { left: auto; right: 0; }
.subNav > li + li { border-top: 1px solid transparent; }
.subNav a {
	padding: 5px 20px;
	color: var(--c-white);
	background: var(--c-black-30);
	white-space: nowrap;
	width: 100%;
}
.subNav li:hover > a, .subNav li.over > a, .subNav > li.act > a { color: var(--c-cyan); }

/* Mobile menu (hamburger + sliding menu) */
.open_nav { display: none; }
.nav2 {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	background: var(--c-petrol);
	height: 100dvh;
	padding: 170px 0 0;
	width: 320px;
}
.nav2 .nav li:hover > .subNav, .nav2 .nav li.over > .subNav { display: none; }
.nav2 .nav li.open > .subNav { display: block; }
.has-sub.open .showSub { transform: rotate(180deg); }

/* Hamburger */
.hamburger {
	width: auto;
	padding: 0;
	display: inline-block;
	cursor: pointer;
	transition: opacity 0.15s linear, filter 0.15s linear;
	font: inherit;
	line-height: 0;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible;
}
.hamburger-box {
	width: 35px;
	height: 24px;
	display: inline-block;
	position: relative;
}
.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	width: 30px;
	height: 2px;
	background-color: var(--c-white);
	border-radius: 4px;
	position: absolute;
	transition: transform 0.15s ease;
}
.hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; }
.hamburger-inner::before { top: -10px; }
.hamburger-inner::after { bottom: -10px; }
.hamburger--spin .hamburger-inner {
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in; }
.hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin.is-active .hamburger-inner {
	transform: rotate(225deg);
	transition-delay: 0.14s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out; }
.hamburger--spin.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }
.is-active .hamburger-inner, .is-active .hamburger-inner::before, .is-active .hamburger-inner::after { background-color: var(--c-white); }

/* --------------------------------------------------------------------------
   Home page: large logo, buttons, hamburger always visible
   -------------------------------------------------------------------------- */
.is-home .head {
	height: auto;
	top: 28%;
	width: 960px;
	margin: 0 auto;
	position: absolute;
	left: 50%;
	margin-left: -480px;
	background: transparent;
	padding: 260px 30px 30px;
	transform: translateY(-50%);
}
.is-home #logo.logo_gross {
	background: url("../img/ui/logo-b2.png") no-repeat left top;
	width: 367px;
	height: 342px;
	margin: 0 auto 50px;
	float: none;
}
.is-home .head .nav { float: none; margin-top: 50px; }
.is-home .head .nav > ul { text-align: center; }
.is-home .head .nav > ul > li { display: inline-block; float: none; }
.is-home .head .nav > ul > li > a {
	font-weight: normal;
	padding: 0 20px;
	border: 1px solid var(--c-white);
	color: var(--c-white);
	margin: 0 5px;
	background: var(--c-button);
}
.is-home .head .nav > ul > li:hover > a { border-bottom: 1px solid var(--c-white); }
.is-home .head .nav > ul > li { animation: fadeInUpBig 1s 3s both; }
.is-home .head .nav > ul > li:nth-child(1) { animation-delay: 2s; }
.is-home .head .nav > ul > li:nth-child(2) { animation-delay: 2.5s; }

.is-home .open_nav {
	display: inline-block;
	position: absolute;
	right: 40px;
	top: 40px;
	border: 1px solid var(--c-white);
	padding: 10px 5px 0 10px;
	color: var(--c-white);
	z-index: 99999;
}
.is-home .nav2 { z-index: 9999; }
.is-home .nav2 .nav { float: none; margin-top: 50px; }
.is-home .nav2 .nav a { font-weight: normal; }
.is-home .nav2 .nav > ul { text-align: center; }
.is-home .nav2 .nav > ul > li {
	float: none;
	display: block;
	border-bottom: 1px solid var(--c-petrol-hover);
	margin: 0;
	padding: 20px 0 0;
}
.is-home .nav2 .nav > ul > li > a {
	color: var(--c-white);
	font-size: 18px;
	width: 100%;
	padding: 0 0 15px 0;
	margin: 0;
	border: none;
	background: none;
}
.is-home .nav2 .nav > ul > li:hover { background: var(--c-petrol-hover); }
.is-home .nav2 .nav > ul > li:hover > a { border-bottom: 1px solid var(--c-white); }
.is-home .nav2 .nav .showSub {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;
	cursor: pointer;
	width: 16px;
	height: 10px;
	padding: 30px;
	background: url("../img/ui/nav-arrow.png") no-repeat center center;
}
.is-home .nav2 .subNav { position: relative; top: 0; }
.is-home .nav2 .subNav a { padding: 5px 0; }

/* --------------------------------------------------------------------------
   Content area
   -------------------------------------------------------------------------- */
.allcont {
	padding: 270px 0 140px 0;
	margin-top: 20px;
}
.cont > .item, .gridwrapper > .item {
	width: 100%;
	max-width: 1010px;
	margin: 0 auto;
	position: relative;
}

/* Spacing between elements (values as on the old site) */
.item.mt-30 { margin-top: 30px; }
.item.mt-35 { margin-top: 35px; }
.item.mt-40 { margin-top: 40px; }
.item.mt-50 { margin-top: 50px; }
.item.mt-80 { margin-top: 80px; }
.item.mb-30 { margin-bottom: 30px; }
.item.mb-40 { margin-bottom: 40px; }
.item.mb-50 { margin-bottom: 50px; }
.item.mb-80 { margin-bottom: 80px; }

/* Columns */
.gridrow::after { content: ""; display: block; clear: both; }
.gridrow .col { float: left; display: block; min-height: 1px; }
.gridrow .col + .col { margin-left: 4%; }
.box50 .col { width: 48%; }
.box33 .col { width: 30.6%; }
.box33-66 .col1 { width: 32%; }
.box33-66 .col2 { width: 64%; }
.box66-33 .col1 { width: 64%; }
.box66-33 .col2 { width: 32%; }

/* Coloured boxes */
.item.bcolor {
	padding: 40px 40px 35px;
	box-sizing: border-box;
}
.box33 .item.bcolor { padding: 30px 30px 25px; }
.item.bcolor.dunkleres_blau { background-color: var(--c-box-dunkleres-blau); }
.item.bcolor.dunkel_blau { background-color: var(--c-box-dunkel-blau); }
.item.bcolor.hell_blau { background-color: var(--c-box-hell-blau); }
.item.bcolor.hell_blau a { color: var(--c-cyan); }
/* Directions link (Contact) stays white as on the live site, also in the light blue box; hover cyan */
.item.bcolor a.Adresse.Adresse-gross { color: var(--c-white); }
.item.bcolor a.Adresse.Adresse-gross:hover { color: var(--c-cyan); }

/* Text with image */
.textpic { overflow: hidden; }
.textpic-image { display: table; margin: 10px 0; }
.textpic-image img { display: block; border: none; }
.textpic-intext-right .textpic-imagewrap { float: right; margin-left: 30px; }
.textpic-above-center .textpic-imagewrap { overflow: hidden; }
.textpic-above-center .textpic-image { margin-left: auto; margin-right: auto; }
.textpic-border .textpic-image img { border: 1px solid var(--c-white); }

/* Sitemap */
.csc-sitemap > ul > li { font-weight: 500; }
.csc-sitemap > ul > li > ul > li { font-size: 14px; font-weight: 400; }
.csc-sitemap a { color: var(--c-white); }

/* YouTube with consent */
.iframewrap iframe { border: 0; }
.loadiframebtn {
	width: 100%;
	font: 16px var(--font);
	color: var(--c-black);
	padding: 5px;
	border: none;
	border-radius: 0;
	background: var(--c-white);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Lightbox */
.lightbox-dialog {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: 90vw;
	max-height: 90vh;
	overflow: visible;
}
.lightbox-dialog::backdrop { background: var(--c-black-65); }
.lightbox-dialog img { display: block; max-width: 90vw; max-height: 90vh; width: auto; height: auto; }
.lightbox-close {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 30px;
	height: 30px;
	border: 2px solid var(--c-white);
	border-radius: 50%;
	background: var(--c-black);
	color: var(--c-white);
	font: bold 20px/24px var(--font);
	text-align: center;
	cursor: pointer;
	box-shadow: 0 0 4px var(--c-black-65);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot {
	color: var(--c-white);
	text-shadow: 1px 1px 4px var(--c-black-65);
	position: relative;
	height: 70px;
	margin-top: 0;
	text-align: center;
	font-size: 14px;
	width: 100%;
	line-height: 70px;
	background: linear-gradient(to bottom, var(--c-black-0) 0%, var(--c-black-0) 13%, var(--c-black-50) 100%);
}
.is-home .foot { margin-top: -70px; }
.foot a { color: var(--c-white); padding: 0 20px; }
.foot p { display: inline-block; line-height: 1.2em; padding: 0; }
.copy, .footnav, .webdesign { display: inline; }
.copy { padding: 0 20px; }
.linkToTop {
	position: absolute;
	left: 50%;
	top: -20px;
	line-height: 14px;
	transform: translateX(-50%);
	width: 22px;
	height: 10px;
	background: url("../img/ui/totop.png") no-repeat center center;
	cursor: pointer;
}
.linkToTop span { display: none; }

/* --------------------------------------------------------------------------
   Animations (as before, excerpt from animate.css)
   -------------------------------------------------------------------------- */
.animated { animation-duration: 1s; animation-fill-mode: both; }
.fadeInUp { animation-name: fadeInUp; }
.zoomIn { animation-name: zoomIn; }
.d05 { animation-delay: 0.5s; }
.d10 { animation-delay: 1s; }
.d15 { animation-delay: 1.5s; }
@keyframes fadeInUp {
	from { opacity: 0; transform: translate3d(0, 100%, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes fadeInUpBig {
	from { opacity: 0; transform: translate3d(0, 2000px, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes zoomIn {
	from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
	50% { opacity: 1; }
}
@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Responsive (breakpoints as on the old site)
   -------------------------------------------------------------------------- */
/* 1068–1079 px: the home header box (960 + 2 × 30 px, centred 30 px right of the middle) would
   stick out of the viewport on the right. Narrower side padding with the same content box keeps
   logo and buttons in place; wider viewports render exactly as before. */
@media (min-width: 1068px) and (max-width: 1079px) {
	.is-home .head { padding-left: 24px; padding-right: 24px; margin-left: -474px; }
}

@media (max-width: 1067px) {
	.head {
		width: 90vw;
		max-width: 90vw;
		left: 50%;
		transform: translateX(-50%);
		margin-left: 0;
	}
	.is-home .head {
		max-width: 90vw;
		width: 90vw;
		margin-left: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.gridwrapper > .item { max-width: 93vw; height: auto; }
	.gridrow .col { float: none; }
	.box33-66 .col2 { width: 100%; height: auto; margin: 40px auto; }
	.gridrow .col + .col { margin-left: 0; }
	.box33-66 .col1, .box66-33 .col1, .box33 .col, .box50 .col { width: 100%; }
	.gridrow .col.hide-mobile { display: none; }
	.item.bcolor { height: auto; margin-top: 30px; }
}

@media (max-width: 1040px) {
	.allcont { padding: 170px 0 140px 0; margin: 0; }
	.head .inner > .nav { display: none; }
	.head { padding: 20px 25px; top: 30px; }
	.nav { float: none; }

	.is-sub .open_nav {
		display: inline-block;
		position: fixed;
		right: 75px;
		top: 75px;
		border: 1px solid var(--c-petrol);
		padding: 10px 5px 0 10px;
		z-index: 99999;
	}
	.is-sub .open_nav.active {
		right: 20px;
		top: 20px;
		border: 1px solid var(--c-white);
	}
	.is-home .head { padding: 0; }

	.nav2 {
		z-index: 999;
		position: fixed;
		top: -20px;
		right: 0;
		min-height: 100dvh;
		height: 100%;
		padding: 170px 0 0;
		width: 320px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.is-home .nav2 { position: absolute; top: 0; }
	.nav2 .nav > ul > li {
		display: block;
		float: none;
		text-align: center;
		border-bottom: 1px solid var(--c-petrol-hover);
		margin: 0;
		padding: 20px 0 0;
	}
	.nav2 .nav > ul > li > a {
		color: var(--c-white);
		background: transparent;
		width: 100%;
		padding: 0 0 15px 0;
		margin: 0;
		font-size: 18px;
	}
	.nav2 .nav li { display: block; }
	.nav2 .subNav { width: 100%; position: relative; top: 0; }
	.nav2 .subNav a { padding: 5px 0; }
	.nav2 .nav .showSub {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 10;
		cursor: pointer;
		width: 16px;
		height: 10px;
		padding: 30px;
		background: url("../img/ui/nav-arrow.png") no-repeat center center;
	}
	.nav2 .nav > ul > li.over, .nav2 .nav > ul > li:hover { background: var(--c-petrol-hover); }
	.nav2 .nav > ul > li:hover > a, .nav2 .nav > ul > li.over > a { border-bottom: 1px solid var(--c-white); }
	.nav > ul > li.act > a { color: var(--c-white); }
	.subNav a { color: var(--c-white); background: var(--c-petrol); }
	.subNav > li.act > a { color: var(--c-white); background: var(--c-petrol-hover); }

	.is-sub .hamburger--spin .hamburger-inner,
	.is-sub .hamburger--spin .hamburger-inner::before,
	.is-sub .hamburger--spin .hamburger-inner::after { background-color: var(--c-petrol); }
	.is-sub .hamburger--spin.is-active .hamburger-inner,
	.is-sub .hamburger--spin.is-active .hamburger-inner::before,
	.is-sub .hamburger--spin.is-active .hamburger-inner::after { background-color: var(--c-white); }

	.foot {
		font-size: 12px;
		background: linear-gradient(to bottom, var(--c-black-0) 0%, var(--c-black-0) 13%, var(--c-black) 100%);
	}
}

@media (max-width: 700px) {
	#logo {
		width: 230px;
		height: 60px;
		background-size: 230px 60px;
		margin-top: 14px;
	}
	.nav2 { width: 100%; }
	.is-home .head {
		position: relative;
		max-width: 90vw;
		width: 90vw;
		margin: auto;
		margin-top: 150px;
		top: auto;
		left: auto;
		transform: none;
	}
	.is-home .foot {
		margin-top: -80px;
		height: auto;
		line-height: 40px;
	}
	.foot { height: auto; line-height: 40px; padding-bottom: 20px; }
	.foot a { padding: 0 6px; }
	.copy { display: block; }

	h1 { font-size: 35px; }
	h2 { font-size: 30px; }
	h3 { font-size: 25px; }
	.iframewrap iframe { height: 100%; }
	.is-sub .nav2 .nav .showSub { right: 53px; }
	.nav { padding-bottom: 150px; }
}

@media (max-width: 500px) {
	#logo { margin-top: 10px; }
	.is-home #logo.logo_gross {
		width: 240px;
		height: 224px;
		background-size: cover;
	}
	.is-home .head .nav > ul > li { margin-top: 20px; }
	.nav > ul > li > a,
	.is-home .head .nav > ul > li > a {
		padding: 0 12px;
		margin: 0 5px;
		font-size: 13px;
		line-height: 36px;
	}
	.is-home .open_nav { right: 20px; top: 20px; }
	.nav2 { padding: 110px 0 0; }
	.is-home .nav2 { padding: 70px 0 0; }
	.is-home .head { margin-top: 130px; }
	.item.bcolor { padding: 20px 17px; }
	.allcont table { margin: 10px 0 5px; font-size: 14px; }
	.allcont table tr td { padding: 5px 2px 2px 0; }
	.contenttable.stack-mobile { table-layout: fixed; }
	.contenttable.stack-mobile tr td { display: block; }
}

@media (max-width: 400px) {
	.is-sub .open_nav { right: 15px; top: 78px; }
	.is-sub .open_nav.active { right: 15px; top: 68px; }
	h1, h2 { font-size: 25px; }
	.head .inner, .foot .inner { font-size: 13px; }
	#logo {
		width: 250px;
		height: 67px;
		background-size: 250px 67px;
		margin-top: 17px;
	}
	.background.bg-pos-200 img { object-position: -200px center; }
	.background.bg-pos-100 img { object-position: -100px center; }
}

@media (max-width: 360px) {
	.head .inner, .foot .inner { font-size: 12px; }
	.text-13-xs { font-size: 13px; }
	.copy, .footnav, .webdesign { display: inline-block; }
}

@media (min-resolution: 1.5dppx) {
	#logo { background-image: url("../img/ui/logo-quer2x.png"); }
	.Instagram { background-image: url("../img/ui/instagram2x.png"); background-size: 22px auto; }
	.Linkedin { background-image: url("../img/ui/linkedin2x.png"); background-size: 22px auto; }
	.Adresse { background-image: url("../img/ui/steuerrad2x.png"); background-size: 22px auto; }
	.Mobil { background-image: url("../img/ui/mobil2x.png"); background-size: 22px auto; }
	.Mail { background-image: url("../img/ui/mail2x.png"); background-size: 22px auto; }
	.Vcard { background-image: url("../img/ui/vcard2x.png"); background-size: 22px auto; }
	.pdf { background-image: url("../img/ui/pdf2x.png"); background-size: 22px auto; }
	.Telefon { background-image: url("../img/ui/tel2x.png"); background-size: 22px auto; }
	.nav2 .nav .showSub, .is-home .nav2 .nav .showSub { background-image: url("../img/ui/nav-arrow2x.png"); background-size: 16px auto; }
	.linkToTop { background-image: url("../img/ui/totop2x.png"); background-size: 22px auto; }
}