@charset "UTF-8";
/* =====================================================================
   Farben:  blau  #0175be   gelb  #f9b218
            grau  #efefef   Text  #393939
   ===================================================================== */

/* Webfont ---------------------------------------------------------------
   Nur woff2/woff – deckt alle aktuellen Browser ab. */
@font-face {
	font-family: 'Bai Jamjuree';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../webfonts/bai-jamjuree-v4-latin-regular.woff2') format('woff2'),
	     url('../webfonts/bai-jamjuree-v4-latin-regular.woff') format('woff');
}
@font-face {
	font-family: 'Bai Jamjuree';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../webfonts/bai-jamjuree-v4-latin-italic.woff2') format('woff2'),
	     url('../webfonts/bai-jamjuree-v4-latin-italic.woff') format('woff');
}
@font-face {
	font-family: 'Bai Jamjuree';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../webfonts/bai-jamjuree-v4-latin-600.woff2') format('woff2'),
	     url('../webfonts/bai-jamjuree-v4-latin-600.woff') format('woff');
}

/* Reset ------------------------------------------------------------------ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strong, sub, sup, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav,
output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote::before, blockquote::after, q::before, q::after {
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {
	box-sizing: border-box;
}
div, header, footer, main, nav, aside, section, article {
	position: relative;
	min-width: 0;
}
button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: inherit;
	cursor: pointer;
}
img {
	max-width: 100%;
}
strong {
	font-weight: 600;
}
em {
	font-style: italic;
}

/* Grundlayout ------------------------------------------------------------ */
html {
	height: 101%;
}
body {
	height: 100.1%;
	font-family: 'Bai Jamjuree', Verdana, Arial, Helvetica, sans-serif;
	font-size: 101.1%;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	background-color: #fff;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Hinweise im webEdition-Bearbeitungsmodus */
.anweisung {
	color: red;
	font-size: 10px;
}
.hinweis-editmode {
	font-size: 10px;
	color: red;
}

#sonderinfo {
	position: relative;
	top: 35px;
	left: 0;
	display: block;
	width: 100%;
	padding: 10px;
	text-align: center;
	background: red;
	color: #fff;
	z-index: 1000;
}
#sonderinfo p {
	margin: 0 !important;
	font-size: 1rem;
	line-height: 120%;
	color: #fff !important;
}
#navigation {
	position: relative;
	width: 100%;
	background-color: #0175be;
	color: #fff;
}
#header {
	position: fixed;
	top: 0;
	display: block;
	width: 100%;
	height: auto;
	padding: 0;
	background-color: #efefef;
	box-shadow: 0 0 5px #999;
	z-index: 1500;
}
.inhalte {
	position: relative;
	margin-top: 0;
	padding-top: 40px;
	padding-bottom: 0;
}
#header2 {
	margin-top: 0;
	padding-top: 60px;
	padding-bottom: 0;
}
.titel1 {
	padding-top: 5px;
	padding-bottom: 15px;
}
/* bisher Inline-Styles in den Vorlagen */
.inhalte.titel1 {
	height: auto;
	padding-bottom: 1%;
}
.himmel-abstand {
	height: 100px;
}
.inhalte.galerieband {
	padding: 30px;
}
.zeile.zeile-breit {
	padding-top: 30px;
	padding-bottom: 50px;
}
#header2 .rahmen {
	width: 960px;
	padding-top: 30px;
	padding-bottom: 30px;
}
.main, .aside {
	margin-bottom: 50px;
}
#fuss {
	position: relative;
	margin-top: 0;
	padding-top: 15px;
	padding-bottom: 20px;
	color: #000;
	background-color: #fff;
}
#fuss.fuss-linie {
	border-bottom: 1px solid #ddd;
}

/* zwei Spalten */
.spblock {
	width: 100%;
	margin-bottom: 50px;
}
.sp1-2, .sp2-2 {
	float: left;
	width: 48%;
	margin-right: 4%;
}
.sp2-2 {
	margin-right: 0;
}

/* Textformatierungen ----------------------------------------------------- */
h1 {
	margin-left: 0;
	font-size: 1.5em;
	font-weight: 600;
	text-transform: uppercase;
	color: #f9b218;
}
.box h1 {
	margin-bottom: 40px;
}
h2 {
	margin-top: 1.6em;
	margin-bottom: 0.8em;
	font-size: 1.2em;
	font-weight: 600;
	line-height: 140%;
	letter-spacing: 1px;
	color: #0175be;
}
h2:first-child, .inhalte h2:first-child, .inhalte h2.first {
	margin-top: 0;
}
h3 {
	margin-top: 0.8em;
	margin-bottom: 0;
	font-size: 0.95em;
	font-weight: 500;
	line-height: 150%;
	color: #000;
}
p, .inhalte p, #header2 p {
	margin-bottom: 0.8em;
	font-size: 0.95em;
	line-height: 180%;
	color: #393939;
}

.produktnavi p {
line-height: 120%;
}
.inhalte .aside p {
	line-height: 150% !important;
}
#header2 p {
	letter-spacing: 1px;
	line-height: 130%;
}
.box p {
	line-height: 180% !important;
}
a, .inhalte a {
	color: #666;
	text-decoration: underline;
}
.inhalte a:hover, .inhalte a:active, .inhalte a:visited {
	color: #000;
	text-decoration: underline;
}
.inhalte ul {
	margin-bottom: 0.85em;
	padding-left: 17px;
	list-style-type: square;
}
.inhalte li {
	margin-bottom: 0.8em;
	font-size: 0.95em;
	line-height: 180%;
	color: #393939;
}
a.telresp {
	text-decoration: none;
}
p.trigger {
	cursor: pointer;
}

/* Sonderformate ---------------------------------------------------------- */
#header2 .kopfbild {
	margin-left: -25px;
	padding-bottom: 10px;
	background-color: #fff;
}
#header2 .kopfbild img {
	width: 100%;
	max-width: 1300px;
	height: auto;
}
#logo {
	position: relative;
	width: 100%;
	max-width: 320px;
	padding: 0;
	border: 0;
	background-color: #fff;
}
#logo img {
	width: 100%;
	height: auto;
}
.box {
	position: relative;
	width: 80%;
	padding-top: 0 !important;
	padding-bottom: 30px !important;
}
.box img {
	width: 100%;
	height: auto;
}
.inhalte .illu {
	position: relative;
	margin-top: 0;
	margin-bottom: 40px;
}
.illu img {
	display: inline-block;
	width: 46%;
	height: auto;
	margin-right: 2%;
	margin-bottom: 2%;
	padding: 5px;
	border: 1px solid #f9b218;
	background-color: #fff;
}
#header2 img {
	width: 100%;
	border: 0;
}
.boxrechts img {
	width: 100%;
	height: auto;
	border: 0;
	background-color: #fff;
}
.owl-carousel img {
	height: auto;
	border: 5px solid #fff;
	text-align: center;
}
ul.owl-carousel {
	position: relative;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
ul.owl-carousel li {
	margin-left: 2%;
	margin-right: 2%;
}
img.kopfbild {
	background-color: #efefef;
}
.grau {
	background-color: #efefef;
}
.blau {
	margin-bottom: 0;
	background-color: #0175be;
	color: #fff;
}
.gelb {
	background-color: #f9b218;
}
.himmel {
	background-image: url(../images/hg3.jpg);
	background-position: left center;
	background-repeat: repeat-x;
	background-size: cover;
	box-shadow: inset 0 0 5px #333;
	z-index: 500;
}

ul.produkte {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul.produkte li {
	display: inline-block;
	width: 22%;
	min-width: 200px;
	margin-right: 2%;
	vertical-align: top;
}
ul.produkte li img {
	width: 100%;
	height: auto;
	padding: 0;
}
ul.produkte li p {
	width: 100%;
	padding: 5px;
	line-height: 110%;
	background-color: #fff;
}
ul.produkte li a {
	display: block;
	width: 100%;
	text-decoration: none;
}

.inhalte div.lieferant {
	margin-bottom: 20px;
}
.inhalte p.lieferant {
	margin-bottom: 30px;
	line-height: 125%;
	text-align: center;
}
.inhalte p.lieferant a {
	display: block;
	width: 96%;
	padding: 5px;
	font-weight: 500;
	text-decoration: none;
	background-color: #0175be;
	color: #fff;
}
.inhalte p.lieferant a:hover {
	background-color: #f9b218;
	color: #fff;
}
.inhalte p.lieferantlogo {
	display: block;
	width: 96%;
	padding: 10px 1%;
	line-height: 100%;
	text-align: center;
	text-decoration: none;
	background-color: #fff;
}
.inhalte p.button a {
	display: inline-block;
	padding: 10px 20px;
	color: #fff;
	background-color: #0175be;
	text-decoration: none;
}
.inhalte p.button a:hover {
	color: #fff;
	background-color: #f9b218;
	text-decoration: none;
}
.inhalte img.markenlogo {
	width: 70%;
	height: auto;
	text-align: center;
}
img.fb_footer {
	width: 20px;
	height: 20px;
	margin-top: 4px;
}
#fb_rand {
	position: fixed;
	top: 5px;
	right: 5px;
	z-index: 2200;
}
#fb_rand img {
	width: 20px;
	height: 20px;
	border: 0;
}

.inhalte ul.team {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.inhalte ul.team li {
	display: inline-block;
	width: 22%;
	margin-right: 2%;
	font-size: 0.75em;
}
.inhalte ul.team img {
	width: 100%;
	height: auto;
	border: 4px solid #fff;
}

img.pdficon {
	width: auto;
	height: 20px;
	padding-right: 5px;
	border: 0;
	vertical-align: middle;
	color: red;
}

/* Produkt-Menü (Akkordeon im festen Kopf) -------------------------------- */
.akkordeon .trigger {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 5px 65px 5px 5px;
	font-size: 1em;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: 2px;
	text-align: left;
	color: #fff;
	background-color: #0175be;
	cursor: pointer;
}
.akkordeon .trigger span {
	position: absolute;
	top: 5px;
	right: 5px;
	display: block;
	width: 25px;
	height: 25px;
	overflow: hidden;
	text-indent: -800em;
	background: url(../images/plus.png) no-repeat right top;
	z-index: 800;
}
.akkordeon .trigger_active span {
	background-image: url(../images/minus.png);
}
.toggle_container {
	position: absolute;
	top: 33px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	background-color: #efefef;
	box-shadow: 0 0 5px #666;
	z-index: 800;
}
/* Produkt-Menü ist von Anfang an zu (kein Aufblitzen beim Laden) */
.js .toggle_container:not(.offen) {
	display: none;
}
ul.produktnavi {
	margin: 0 auto;
	padding: 2%;
	text-align: center;
}
ul.produktnavi li {
	display: inline-block;
	width: 12%;
	min-width: 140px;
	margin: 0 1% 1%;
	vertical-align: top;
	border: 5px solid #efefef;
}
ul.produktnavi li:hover, ul.produktnavi li:focus-within {
	background-color: #fff;
	border: 5px solid #fff;
	box-shadow: 0 0 5px #999;
}
ul.produktnavi img {
	width: 100%;
	height: auto;
	border: 5px solid #fff;
}
ul.produktnavi li:hover img, ul.produktnavi li:focus-within img {
	border: 0;
}
ul.produktnavi p {
	font-size: 0.8rem;
}
ul.produktnavi a {
	text-decoration: none;
	color: #0175be;
}

/* Hauptnavigation -------------------------------------------------------- */
.toggleMenu {
	display: none;
	width: 100%;
	height: 35px;
	font-size: 12px;
	font-weight: bold;
	line-height: 35px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
	background-color: #0175be;
}
.toggleMenu button {
	display: block;
	width: 100%;
	height: 35px;
	font-weight: bold;
	line-height: 35px;
	text-align: left;
	text-decoration: none;
	color: #fff;
}
.toggleMenu span {
	position: absolute;
	top: 6px;
	right: 5px;
	display: block;
	width: 25px;
	height: 25px;
	overflow: hidden;
	text-indent: -800em;
	background: url(../images/navi.png) no-repeat right top;
	z-index: 800;
}
.nav {
	position: relative;
	margin-top: 60px;
	list-style: none;
}
.nav::before, .nav::after {
	content: " ";
	display: table;
}
.nav::after {
	clear: both;
}
.nav ul {
	width: auto;
	list-style: none;
}
.nav a {
	display: block;
	margin-bottom: 5px;
	padding-left: 10px;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
	color: #f9b218;
	background-color: #efefef;
}
.nav a:hover {
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background-color: #f9b218;
}
.nav a.active, .nav a.aktiv {
	font-weight: 600;
	text-decoration: none;
	color: #0175be;
}
.nav a.active:hover {
	color: #fff;
}
.nav li {
	position: relative;
}
.nav > li > a {
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
}
.nav li ul {
	position: absolute;
	left: -9999px;
	background-color: #006600;
}
.nav > li.hover > ul {
	left: 0;
}
.nav li li.hover ul {
	top: 0;
	left: 100%;
}
.nav li li a {
	position: relative;
	display: block;
	margin: 0;
	padding: 8px 20px;
	font-size: 0.8rem;
	line-height: 140%;
	text-transform: none;
	color: #fff;
	background-color: #006600;
	z-index: 1000;
}
.nav li li a:hover {
	font-weight: 300;
	color: #000;
	background-color: #ddd;
}
.nav li li li a {
	background: #fff;
	z-index: 2000;
}

/* Subnavi ---------------------------------------------------------------- */
ul#subnavi {
	position: relative;
	margin: 0;
	padding: 0.35em 0 0;
	list-style-type: none;
}
ul#subnavi li a {
	display: block;
	padding-top: 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid #fff;
	font-size: 0.85rem;
	font-weight: normal;
	text-decoration: none;
	text-transform: uppercase;
	color: #000;
}
ul#subnavi li a:hover, ul#subnavi li a:active {
	color: #999;
	text-decoration: none;
}
ul#subnavi li a.aktiv {
	font-weight: bold;
	text-decoration: none;
	color: #ffa000;
}
ul#subnavi li a.first {
	padding-left: 0;
}
ul#subnavi li a.last {
	padding-right: 0;
	border: 0;
}

/* Metanavi --------------------------------------------------------------- */
ul#metanavi {
	position: relative;
	height: 40px;
	margin: 0;
	padding: 0;
	line-height: 40px;
	list-style-type: none;
	z-index: 200;
}
ul#metanavi li {
	display: inline;
	margin: 0;
	padding: 0;
}
ul#metanavi li a {
	float: left;
	display: block;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 0.8rem;
	font-weight: normal;
	text-decoration: none;
	color: #fff;
}
ul#metanavi li a:hover, ul#metanavi li a:active {
	color: #999;
	text-decoration: none;
}
ul#metanavi li a.aktiv {
	font-weight: bold;
	text-decoration: none;
	color: #ffa000;
}
ul#metanavi li a.first {
	padding-left: 0;
}
ul#metanavi li a.last {
	padding-right: 0;
}

/* Fußbereich ------------------------------------------------------------- */
#fuss p {
	margin-bottom: 0.85em;
	font-size: 0.8em;
	line-height: 1.5em;
	color: #393939;
}
ul#fussnavi {
	position: relative;
	margin: 0 0 0 40px;
	padding: 0;
	list-style-type: none;
	text-align: left;
}
ul#fussnavi li {
	margin: 0;
	padding: 0;
	text-align: left;
}
ul#fussnavi li a {
	display: block;
	padding-left: 12px;
	padding-right: 12px;
	font-size: 0.8em;
	line-height: 1.5em;
	text-decoration: none;
	color: #000;
}
ul#fussnavi li a:hover, ul#fussnavi li a:active {
	color: #999;
	text-decoration: none;
}
ul#fussnavi li a.aktiv {
	font-weight: bold;
	text-decoration: none;
	color: #ffa000;
}
ul#fussnavi li a.first {
	padding-left: 0;
}
ul#fussnavi li a.last {
	padding-right: 0;
}

/* Sonderinfo ------------------------------------------------------------- */
.sonderinfoblock {
	position: relative;
	display: block;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 2%;
	column-count: 2;
	column-gap: 4em;
	text-align: left;
	background-color: #efefef;
}
.sonderinfoblock h2, .sonderinfoblock h2:first-child, .sonderinfoblock h3 {
	margin-top: 20px;
	break-before: all;
}
.inhalte.sonderinfoblock p, .inhalte.sonderinfoblock li {
	margin: 0;
	font-size: 0.8em;
	line-height: 150%;
	color: #666;
	orphans: 2;
	widows: 2;
}
.sonderinfo {
	margin-top: 20px;
}
.sonderinfo:first-child {
	margin-top: 0;
}
.sonderinfoblock ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.sonderinfoblock li {
	display: inline;
	padding-left: 5px;
	padding-right: 5px;
	border-right: 1px solid #ddd;
}
.sonderinfoblock li:first-child {
	padding-left: 0;
}

/* Kennzeichnung externer Links ------------------------------------------ */
.exlink {
	position: relative;
	top: 0;
	left: 0;
}
a.exlink span {
	display: none;
}
a.exlink:hover span {
	position: absolute;
	top: 25px;
	left: 0;
	display: block;
	margin: 0;
	padding: 5px;
	border: 1px solid #fff666;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #000;
	background-color: #fff7d7;
	z-index: 100;
}
a.exlink:hover {
	border: 0;
	font-weight: normal;
	text-decoration: none;
	color: #000;
	z-index: 200;
}

/* Clearfix --------------------------------------------------------------- */
.clearfix::before, .clearfix::after {
	content: "";
	display: table;
}
.clearfix::after {
	clear: both;
}
.clearfix {
	display: block;
}

/* Grid-System ------------------------------------------------------------ */
.zeile {
	position: relative;
	width: 980px;
	max-width: 100%;
	min-width: 768px;
	margin: 0 auto;
	text-align: left;
}
.zeile .zeile {
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0 -15px;
}
.zeile::before, .zeile::after {
	content: "";
	display: table;
}
.zeile::after {
	clear: both;
}
.spalte, .spalten {
	position: relative;
	float: left;
	min-height: 1px;
	padding: 0 15px;
}
[class*="spalte"] + [class*="spalte"]:last-child {
	float: right;
}
[class*="spalte"] + [class*="spalte"].end {
	float: left;
}
.zeile .eins    { width: 8.33%; }
.zeile .zwei    { width: 16.66%; }
.zeile .drei    { width: 25%; }
.zeile .vier    { width: 33.33%; }
.zeile .fuenf   { width: 41.66%; }
.zeile .sechs   { width: 50%; }
.zeile .sieben  { width: 58.33%; }
.zeile .acht    { width: 66.66%; }
.zeile .neun    { width: 75%; }
.zeile .zehn    { width: 83.33%; }
.zeile .elf     { width: 91.66%; }
.zeile .zwoelf  { width: 100%; }

/* Formular --------------------------------------------------------------- */
label {
	display: block;
	float: left;
	width: 30%;
	height: 30px;
	padding-right: 20px;
	text-align: left;
}
.formular p {
	margin-bottom: 1em;
}
.formular .pflichthinweis {
	clear: left;
}
.form, .form3 {
	display: inline;
	width: 70%;
	height: 30px;
	margin: 0;
	border: 1px solid #f9b218;
	font-weight: bold;
	text-align: left;
	color: #000;
	background: #fff;
}
.form2 {
	padding: 5px 10px;
	border: 1px solid #0175be;
	font-size: 0.8em;
	color: #fff;
	background-color: #0175be;
	cursor: pointer;
}
.form3 {
	height: 120px;
}

/* =====================================================================
   Barrierearmut
   ===================================================================== */

/* nur für Screenreader sichtbar */
.visuell-versteckt {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Sprunglink – erscheint nur bei Tastaturfokus */
.sprunglink {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px 15px;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background-color: #0175be;
	text-decoration: none;
	z-index: 3000;
	transform: translateY(-120%);
}
.sprunglink:focus {
	transform: none;
	color: #fff;
}

/* sichtbarer Fokus nur bei Tastaturbedienung */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #0175be;
	outline-offset: 2px;
}
.blau a:focus-visible,
.blau button:focus-visible,
.akkordeon .trigger:focus-visible,
.toggleMenu button:focus-visible {
	outline-color: #f9b218;
}
.toggleMenu button:focus-visible {
	outline-offset: -3px;
}

/* Sprungziele nicht unter dem festen Kopf verstecken */
:target, #inhalt {
	scroll-margin-top: 45px;
}
#inhalt:focus {
	outline: 0;
}

/* =====================================================================
   Kopf-Slider Startseite (Ersatz für bxSlider, Modus „fade“)
   ===================================================================== */
.bx-wrapper {
	position: relative;
	touch-action: pan-y;
}
.bx-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.bx-wrapper img {
	display: block;
	max-width: 100%;
}
/* Bild wie das Kopfbild der Folgeseiten (ohne Versatz/Innenabstand der Spalte) */
#header2 .bx-wrapper img.kopfbild {
	margin: 0;
	padding: 0;
}
ul.bxslider {
	margin: 0;
	padding: 0;
	list-style: none;
}
.js ul.bxslider {
	display: grid;
	grid-template-columns: 100%;
}
.js ul.bxslider::before,
.js ul.bxslider::after,
.js .owl-carousel::before,
.js .owl-carousel::after {
	display: none;
}
.js ul.bxslider > li {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s, visibility 0s 0.5s;
}
.js ul.bxslider > li.aktiv {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s;
	z-index: 1;
}
/* Pfeile vertikal mittig zum Bild */
.bx-wrapper .bx-controls,
.bx-wrapper .bx-controls-direction {
	position: static;
}
.bx-wrapper .bx-controls-direction button {
	position: absolute;
	top: 50%;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	z-index: 10;
}
/* Pfeile: Nachbau der bxSlider-Grafik als SVG (kein externes Bild nötig) */
.bx-wrapper .bx-controls-direction button {
	opacity: 0.8;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 32px 32px;
}
.bx-wrapper .bx-controls-direction button:hover,
.bx-wrapper .bx-controls-direction button:focus-visible {
	opacity: 0.95;
}
.bx-wrapper .bx-prev {
	left: 10px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="15.5" cy="15.5" r="15.5" fill="%23676767"/><polyline points="18,8.6 11.5,15.5 18,22.4" fill="none" stroke="%23bfbfbf" stroke-width="4.4" stroke-linecap="butt" stroke-linejoin="miter"/></svg>');
}
.bx-wrapper .bx-next {
	right: 10px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="15.5" cy="15.5" r="15.5" fill="%23676767"/><polyline points="13,8.6 19.5,15.5 13,22.4" fill="none" stroke="%23bfbfbf" stroke-width="4.4" stroke-linecap="butt" stroke-linejoin="miter"/></svg>');
}
/* Pause-Schalter: nur bei Tastaturfokus sichtbar */
.bx-wrapper .bx-pause {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 5px 10px;
	font-size: 0.8rem;
	color: #fff;
	background: #0175be;
	z-index: 10000;
}
.bx-wrapper .bx-pause:not(:focus-visible),
.owl-karussell .owl-pause:not(:focus-visible) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* =====================================================================
   Bildkarussell (Ersatz für Owl Carousel)
   Anzahl sichtbarer Bilder: --karussell-anzahl
   ===================================================================== */
.owl-carousel {
	--karussell-anzahl: 3;
}
.js .owl-carousel,
.owl-carousel.karussell {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.owl-carousel.karussell::-webkit-scrollbar {
	display: none;
}
.js .owl-carousel > *,
.owl-carousel.karussell > * {
	flex: 0 0 calc(100% / var(--karussell-anzahl));
	scroll-snap-align: start;
}
.js ul.owl-carousel > li,
ul.owl-carousel.karussell > li {
	margin-left: 0;
	margin-right: 0;
	padding-left: calc(2% / var(--karussell-anzahl));
	padding-right: calc(2% / var(--karussell-anzahl));
}
.owl-carousel .item p {
	margin-top: 0.5em;
}
/* nur zwei weiße Pfeile links und rechts, vertikal mittig */
.owl-karussell {
	position: relative;
}
.owl-karussell .owl-prev,
.owl-karussell .owl-next {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 56px;
	margin-top: -28px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 40px;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
	opacity: 0.9;
	z-index: 10;
}
.owl-karussell .owl-prev {
	left: -40px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 40"><polyline points="19,3 3,20 19,37" fill="none" stroke="%23fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.owl-karussell .owl-next {
	right: -40px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 40"><polyline points="3,3 19,20 3,37" fill="none" stroke="%23fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.owl-karussell .owl-prev:hover,
.owl-karussell .owl-next:hover,
.owl-karussell .owl-prev:focus-visible,
.owl-karussell .owl-next:focus-visible {
	opacity: 1;
	outline-color: #f9b218;
}
.owl-karussell [hidden] {
	display: none;
}
.owl-karussell .owl-pause {
	position: absolute;
	top: 0;
	left: 0;
	padding: 5px 10px;
	font-size: 0.8rem;
	color: #fff;
	background: #0175be;
	z-index: 10;
}

/* =====================================================================
   Lightbox (Ersatz für Fancybox) – natives <dialog>
   ===================================================================== */
.lightbox {
	max-width: calc(100vw - 60px);
	max-height: calc(100vh - 60px);
	margin: auto;
	padding: 0;
	border: 0;
	overflow: visible;
	color: #444;
	background: transparent;
	text-align: center;
}
.lightbox img {
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.lightbox::backdrop {
	background: rgba(0, 0, 0, 0.75);
}
.lightbox img {
	display: block;
	max-width: calc(100vw - 60px);
	max-height: calc(100vh - 100px);
	width: auto;
	height: auto;
	margin: 0 auto;
}
.lightbox iframe {
	display: block;
	width: min(1000px, calc(100vw - 60px));
	height: calc(100vh - 100px);
	border: 0;
	background: #fff;
}
.lightbox-titel {
	position: absolute;
	left: 50%;
	bottom: -35px;
	padding: 2px 20px;
	border-radius: 15px;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	text-shadow: 0 1px 2px #222;
	transform: translateX(-50%);
}
.lightbox-titel:empty {
	display: none;
}
.lightbox-zaehler {
	opacity: 0.75;
	font-weight: normal;
}
.lightbox-zu,
.lightbox-zurueck,
.lightbox-weiter {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.lightbox-zu {
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	border: 2px solid #fff;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	background: #333;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
	z-index: 2;
}
.lightbox-zurueck,
.lightbox-weiter {
	top: 0;
	bottom: 0;
	width: 40%;
	font-size: 40px;
	opacity: 0;
	transition: opacity 0.2s;
	text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.lightbox-zurueck {
	left: 0;
	justify-content: flex-start;
	padding-left: 15px;
}
.lightbox-weiter {
	right: 0;
	justify-content: flex-end;
	padding-right: 15px;
}
.lightbox-zurueck:hover,
.lightbox-weiter:hover,
.lightbox-zurueck:focus-visible,
.lightbox-weiter:focus-visible {
	opacity: 1;
}
.lightbox-zurueck[hidden],
.lightbox-weiter[hidden] {
	display: none;
}
.lightbox-extern {
	display: block;
	margin-top: 8px;
	font-size: 0.8rem;
}
html.lightbox-offen {
	overflow: hidden;
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (min-width: 961px) {
	/* Unterpunkte auch per Tastatur öffnen */
	.nav > li:focus-within > ul {
		left: 0;
	}
}

@media (min-width: 1100px) {
	body {
		font-size: 100.1%;
	}
}
@media (min-width: 1500px) {
	body {
		font-size: 110.1%;
	}
	.zeile {
		width: 70%;
	}
}
@media (min-width: 1800px) {
	body {
		font-size: 115.1%;
	}
}
@media (min-width: 2300px) {
	body {
		font-size: 130.1%;
	}
	.nav {
		height: 250%;
		line-height: 250%;
	}
}

@media (max-width: 980px) {
	ul#fussnavi {
		margin-top: 20px;
		text-align: left;
	}
}

@media (max-width: 960px) {
	/* Grid */
	.zeile {
		width: auto;
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
	}
	.spalte, .spalten {
		width: 100% !important;
		float: none;
	}
	[class*="spalte"] + [class*="spalte"]:last-child {
		float: none;
	}
	.spalte::before, .spalten::before, .spalte::after, .spalten::after {
		content: "";
		display: table;
	}
	.spalte::after, .spalten::after {
		clear: both;
	}

	/* Hauptnavigation mobil */
	.nav {
		position: relative;
		margin-top: 0;
	}
	.active {
		display: block;
	}
	.nav > li > .parent {
		background-position: 95% 50%;
	}
	.nav li li .parent {
		background-image: url(../images/navi.png);
		background-repeat: no-repeat;
		background-position: 95% 50%;
	}
	.nav ul {
		display: block;
		width: 100%;
	}
	.nav li a {
		margin-left: 0;
		color: #000;
		background-color: #ddd;
	}
	.nav li a:hover {
		font-weight: bold;
		color: #000;
		background-color: #f9b218;
	}
	.nav > li.hover > ul, .nav li li.hover ul {
		position: static;
		width: 97.5%;
		margin-left: 2.5%;
		background-color: #ddd;
	}
	/* Menü-Schalter (nur mit JavaScript) */
	.js .toggleMenu {
		display: inline-block;
	}
	.js .nav:not(.offen) {
		display: none;
	}

	/* Layout */
	#header {
		position: relative;
	}
	#header2 {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	/* Himmel-Streifen (Abstandshalter) mobil ausblenden – nicht das Galerieband */
	.inhalte.himmel:not(.galerieband) {
		display: none;
	}
	.titel1 {
		padding-top: 15px;
	}
	.main {
		margin-bottom: 20px;
	}
	.sp1-2, .sp2-2 {
		float: none;
		width: 100%;
		margin-right: 0;
	}

	/* Text */
	h1 {
		font-size: 1.6em;
		padding-bottom: 20px;
	}
	h2 {
		margin-top: 1.8em;
		margin-bottom: 0;
		font-weight: 600;
	}
	p, #header2 p {
		color: #000;
	}

	/* Sonderformate */
	#header2 .kopfbild {
		margin-left: 0;
	}
	#logo {
		max-width: 200px;
	}
	.box {
		width: 100%;
		padding-bottom: 40px !important;
	}
	.illu {
		margin-top: 40px;
	}
	.illu img {
		padding: 0;
	}
	#header2 img {
		height: auto;
	}
	ul.produkte li {
		width: 46%;
		min-width: 120px;
	}
	.inhalte ul.team li {
		width: 46%;
	}
	#sonderinfo {
		top: 0;
	}
	.sonderinfoblock {
		margin-top: 20px;
		margin-bottom: 20px;
		padding: 3%;
		column-count: 1;
		column-gap: normal;
		font-size: 90%;
	}
	.sonderinfoblock h2, .sonderinfoblock h3 {
		color: #999;
	}

	/* Fußbereich */
	#fuss p {
		color: #000;
	}
	ul#fussnavi {
		margin-left: 0;
	}
	ul#fussnavi li a {
		padding: 5px 0;
		font-size: 0.8rem;
	}

	/* Formular */
	label {
		height: 25px;
	}
	.form {
		height: 20px;
		border: 0;
		border-bottom: 1px solid #000;
	}
	.form2 {
		padding: 2px;
		border: 1px solid #000;
		font-family: Arial, Verdana, sans-serif;
		font-size: 14px;
		background-color: #000;
	}
	.form3 {
		border: 1px solid #000;
	}
}

@media (max-width: 880px) {
	#fb_rand {
		display: none;
	}
}

/* Bilder im Karussell nebeneinander – wie bisherige Owl-Einstellung
   items: 3, itemsDesktop: [1199,6], itemsDesktopSmall: [979,3],
   Owl-Standard itemsTablet: [768,2], itemsMobile: [479,1].
   Hinweis: 980–1199 px zeigt laut alter Einstellung 6 Bilder;
   für 3 Bilder dort einfach die 6 durch 3 ersetzen. */
@media (max-width: 1199px) {
	.owl-carousel {
		--karussell-anzahl: 6;
	}
}
@media (max-width: 979px) {
	.owl-carousel {
		--karussell-anzahl: 3;
	}
}
@media (max-width: 768px) {
	.owl-carousel {
		--karussell-anzahl: 2;
	}
}
@media (max-width: 479px) {
	.owl-carousel {
		--karussell-anzahl: 1;
	}
}

/* =====================================================================
   Schnellkontakt – fixierte Leiste unten (alle Bildschirmgrößen)
   ===================================================================== */
/* Platz am Seitenende, damit die Leiste nichts verdeckt */
body::after {
	content: "";
	display: block;
	height: calc(32px + env(safe-area-inset-bottom, 0px));
}
.kontaktleiste {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background-color: #0175be;
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.25);
	z-index: 1400;
}
.kontaktleiste a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 0 25px;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.2;
	text-decoration: none;
	color: #fff;
}
.kontaktleiste a + a {
	border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.kontaktleiste a:hover {
	background-color: #015f99;
	color: #fff;
}
.kontaktleiste a:focus-visible {
	outline-color: #f9b218;
	outline-offset: -4px;
}
.kontaktleiste a::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	background: no-repeat center / contain;
}
.kontaktleiste a.kontaktleiste-telefon::before {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z"/></svg>');
}
.kontaktleiste a.kontaktleiste-mail::before {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M3 5h18c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1V6c0-.6.4-1 1-1zm1 2.2V17h16V7.2l-8 5.3-8-5.3zM5.4 7l6.6 4.4L18.6 7H5.4z"/></svg>');
}
.kontaktleiste-kurz {
	display: none;
}
@media (max-width: 960px) {
	body::after {
		height: calc(52px + env(safe-area-inset-bottom, 0px));
	}
	.kontaktleiste a {
		flex: 1 1 50%;
		min-height: 52px;
		padding: 0 10px;
		font-size: 1rem;
	}
	.kontaktleiste a::before {
		width: 20px;
		height: 20px;
	}
	/* mobil kurz „E-Mail“, die Adresse bleibt für Screenreader erhalten */
	.kontaktleiste-lang {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.kontaktleiste-kurz {
		display: inline;
	}
}
@media print {
	.kontaktleiste,
	body::after {
		display: none;
	}
}

/* Bewegung reduzieren, wenn im System eingestellt */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}