/* 
	optik-haus.de
*/





:root {
	--farbe-marke: #B0BD21;
	--farbe-marke-hell: #E3E7AE;
	--farbe-marke-dunkel-bfsg: #929c1b;  /*  dunkelgrün auf weiß  */
	--inhalt-breite: 1200px;
	--topbar-hoehe:              150px;
	--topbar-hoehe-small:        100px;
	--topbar-hoehe-mobil:        120px;
	--topbar-hoehe-mobil-small:   90px;

}


@font-face { font-family: 'Source Sans 3'; src: url(/files/_tmpl/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf);}

.w3-content {
	width: 100%;
	max-width: var(--inhalt-breite);
}

.w3-container:after, .w3-container:before {
	display: none;
}
.w3-input {
	border: none !important;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
	scroll-padding-top: var(--topbar-hoehe-mobil);
}
 

body {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 1.5;
}

h1 {
	font-size: 56px;
	font-size: 3.5rem;
	font-weight: 500;
}

h2 {
	font-size: 42px;
	font-size: 2.25rem;
	text-transform: uppercase;
	font-weight: 700;
}

.fette-schrift h2 {
	font-size: 100px;
	font-size: 6.25rem;
	font-weight: 700;
}

h3 {
	font-size: 36px;
	font-size: 2.25rem;
	text-transform: uppercase;
	font-weight: 600;
}

h4 {
	font-size: 28px;
	font-size: 1.75rem;
	text-transform: uppercase;
	font-weight: 500;
}
@media screen and (max-width: 549px) {
	h1 { font-size: 32px; font-size: 2rem; }
	h2 { font-size: 28px; font-size: 1.75rem; }
	.fette-schrift h2 { font-size: 48px; font-size: 3rem; }
	.mod_newslist h2 { font-size: 24px; font-size: 1.5rem; }
	h3 { font-size: 24px; font-size: 1.5rem; }
	h4 { font-size: 20px; font-size: 1.25rem; }
}
@media screen and (min-width: 550px) and (max-width: 767px) {
	h1 { font-size: 40px; font-size: 2.5rem; }
	h2 { font-size: 32px; font-size: 2rem; }
	.fette-schrift h2 { font-size: 48px; font-size: 3rem; }
	h3 { font-size: 28px; font-size: 1.75rem; }
	h4 { font-size: 22px; font-size: 1.325rem; }
}
	

#wrapper .mod_article .article_bg {
	z-index: -1;
}

button,
.button a {
	background-color: var(--farbe-marke);
	color: #000000;
	padding: 10px 30px;
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	border: 1px solid var(--farbe-marke);
	transition: all 0.3s;
	cursor: pointer;
}

button:hover,
.button a:hover {
	background-color: #ffffff;
	color: #555555;;
}

.zentriert {
	text-align: center;
}

.mod_article.hero {
	height: 800px;
}
.mod_article.hero text {
	align-content: center;
	position: center;
	color: #ffffff;
}

.mod_article.hero h1{
	color: #ffffff;
	text-shadow: 0 0 10px #000000;
}

.mod_article.hero h1:first-line{
	font-size: 80px;
	font-size: 5rem;
	font-weight: 700;
	text-transform: uppercase;
}
@media screen and (max-width: 549px) {
	.mod_article.hero h1:first-line{
		font-size: 48px;
		font-size: 3rem;
	}
}
@media screen and (min-width: 550px) and (max-width: 767px) {
	.mod_article.hero h1:first-line{
		font-size: 54px;
		font-size: 3.375rem;
	}
}

.mod_article.hero h2{
	color: #ffffff;
	text-shadow: 0 0 10px #000000;
	line-height: 1;
}

.mod_article.hero p{
	color: #ffffff;
	text-shadow: 0 0 10px #000000;
}



.feature-circle {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
   /* äußerer silberner Ring */
  box-shadow:
    0 0 0 6px #cfcfcf,        /* Silberring */
    0 12px 25px rgba(0,0,0,.35);
  padding: 50px; /* Dicke des silbernen Randes */
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;

   /* grüner Innenkreis */
  background: var(--farbe-marke);

  color: #000000;
  line-height: 1.25;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 20px;
}

.circle-bridge{
  margin-top: -220px;  /* zieht in den oberen BG rein */
  margin-bottom: -225px; /* zieht in den unteren BG rein */
  position: relative;
  z-index: 5;
}

@media screen and (max-width: 549px) {
	.circle-bridge{
	  margin-top: -60px;  /* zieht in den oberen BG rein */
	  margin-bottom: -60px; /* zieht in den unteren BG rein */
	}
}
@media screen and (min-width: 550px) and (max-width: 991px) {
	.circle-bridge{
	  margin-top: -60px;  /* zieht in den oberen BG rein */
	  margin-bottom: -60px; /* zieht in den unteren BG rein */
	}
	.circle-bridge + .container-hero {
		height: auto;
	}
}
@media screen and (min-width: 992px) and (max-width: 1100px) {
	.circle-bridge{
	  margin-top: -120px;  /* zieht in den oberen BG rein */
	  margin-bottom: -120px; /* zieht in den unteren BG rein */
	}
}
@media screen and (min-width: 1101px) {
	.circle-bridge{
		margin-top: 0;
		margin-bottom: 0;
		overflow: visible;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 0;
	}
	.circle-row {
		position: absolute;
		top: 0;
		bottom: auto;
		top: -225px;
		right: 0;
		left: 0;
	}
	.circle-bridge + .container-hero {
		height: auto;
	}
	.circle-bridge + .container-hero .content-hero {
		position: relative;
		padding-top: 225px;
	}
}

.circle-row {
	position: static;
	transform:none; 
}



.feature-box {
  background: rgba(120, 120, 120, 0.65); /* Transparenz */
  color: #ffffff;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  height: 100%;
}

.feature-box-container {
	column-gap: 5px;
}

/* Hover-Effekt */
.feature-box:hover {
	background-color: var(--farbe-marke);
}
.feature-box:hover p {
	color: #000000;
	text-shadow: none;
}

.footer-box {
  background: var(--farbe-marke-hell); /* Transparenz */
  color: #000000;
  height: 300px;
  padding: 30px;
}


.container-hero {
  background-size: cover;
  background-position: center;
  height: 400px;
  position: relative;
}

.content-hero {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
@media screen and (max-width: 991px) {
	.container-hero {
	  height: auto !important;
	}
	.content-hero {
	  position: relative !important;
	}
}
.container-center {
/*
  background-image: url("bild.jpg");
  background-size: cover;
  background-position: center;
  height: 400px;
*/
  display: flex;
  align-items: center;
  justify-content: center;
}


.image-box {
  position: relative;
  overflow: hidden;
}

.image-box img {
  display: block;
  width: 100%;
  transition: filter 0.3s ease;
}

/* Überschrift versteckt */
.image-box h3 {
  position: absolute;
  inset: 0;                 /* füllt den Container */
  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  font-size: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;     /* Hover bleibt aktiv */
}

/* Hover-Effekt */
.image-box:hover img {
  filter: brightness(70%);
}

.image-box:hover h3 {
  opacity: 1;
}

.image-box img {
  transition: filter 0.3s ease, transform 0.3s ease;
}

@media screen and (max-width: 549px) {
	.image-box img {
		filter: brightness(70%);
		transform: scale(1.05);
	}
	.image-box img {
		filter: brightness(70%);
	}

	.image-box h3 {
		opacity: 1;
	}
	.image-box img {
		transition: filter 0.3s ease, transform 0.3s ease;
	}
	.image-box img {
	  filter: brightness(70%);
	  transform: scale(1.05);
	}
}

.circle-box {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid #999;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  position: relative;
  padding: 2rem;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Überschrift sichtbar */
.circle-box h3 {
  color: var(--farbe-marke-dunkel-bfsg);
  font-weight: 700;
  justify-content: center;
  margin: 0;
  transition: opacity 0.3s ease;
}

/* Beschreibung versteckt */
.circle-box p {
  position: relative;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #000;
}

/* Hover-Zustand */
.circle-box:hover {
  background: var(--farbe-marke);       /* dein Grün */
  border-color: var(--farbe-marke);
}

/* H3 ausblenden */
.circle-box:hover h3 {
  opacity: 0;
}

/* Text einblenden */
.circle-box:hover p {
  opacity: 1;
}
@media screen and (max-width: 767px) {
	.circle-box {
	  background: var(--farbe-marke);
	  border-color: var(--farbe-marke);
	}
	.circle-box h3 {
		color: #ffffff;
		margin-bottom: 15px;
		opacity: 1;
	}
	.circle-box p {
	  opacity: 1;
	}
}


.quote-box {
  background: var(--farbe-marke);
  padding: 4rem 3rem 2.5rem;
  max-width: 520px;
  height: 100%;

  position: relative;
  color: #111;
}

/* großes Anführungszeichen */
.quote-box::before {
  content: "\f10e";              /* Unicode für fa-quote-right */
  font-family: "Font Awesome 7 Free";
  font-weight: 900;              /* SOLID */
  
  position: absolute;
  top: 1.6rem;
  left: 2rem;

  font-size: 3.5rem;
  color: #111;
  opacity: 0.9;
}

/* erster Absatz = Zitat */
.quote-box p:first-of-type {
  margin-top: 2.2rem;
  line-height: 1.35;
}

/* letzter Absatz = Autor */
.quote-box p:last-of-type {
  margin-top: 2.2rem;
}

/* Sterne */
.quote-box p:last-of-type::after {
  content: "★★★★★";
  font-size: 32px;
  font-size: 2rem;
  display: block;
  letter-spacing: 0.15rem;
}


.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }

.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.mb-64 { margin-bottom: 64px; }


.m-0 { margin: 0 !important; } .m-1 { margin: 15px !important; } .m-2 { margin: 30px !important; } .m-3 { margin: 45px !important; } .m-4 { margin: 60px !important; } .m-5 { margin: 75px !important; }
.m-t-0 { margin-top: 0 !important; } .m-t-1 { margin-top: 15px !important; } .m-t-2 { margin-top: 30px !important; } .m-t-3 { margin-top: 45px !important; } .m-t-4 { margin-top: 60px !important; } .m-t-5 { margin-top: 75px !important; }

.m-b-0 { margin-bottom: 0 !important; } .m-b-1 { margin-bottom: 15px !important; } .m-b-2 { margin-bottom: 30px !important; } .m-b-3 { margin-bottom: 45px !important; } .m-b-4 { margin-bottom: 60px !important; } .m-b-5 { margin-bottom: 75px !important; }

.p-0 { margin: 0 !important; } .p-1 { margin: 15px !important; } .p-2 { margin: 30px !important; } .p-3 { margin: 45px !important; } .p-4 { margin: 60px !important; } .p-5 { margin: 75px !important; }
.p-t-0 { padding-top: 0 !important; } .p-t-1 { padding-top: 15px !important; } .p-t-2 { padding-top: 30px !important; } .p-t-3 { padding-top: 45px !important; } .p-t-4 { padding-top: 60px !important; } .p-t-5 { padding-top: 75px !important; }

.p-b-0 { padding-bottom: 0 !important; } .p-b-1 { padding-bottom: 15px !important; } .p-b-2 { padding-bottom: 30px !important; } .p-b-3 { padding-bottom: 45px !important; } .p-b-4 { padding-bottom: 60px !important; } .p-b-5 { padding-bottom: 75px !important; }

.p-l-0 { padding-left: 0 !important; } .p-l-1 { padding-left: 15px !important; } .p-l-2 { padding-left: 30px !important; } .p-l-3 { padding-left: 45px !important; } .p-l-4 { padding-left: 60px !important; } .p-r-5 { padding-left: 75px !important; }

.p-r-0 { padding-right: 0 !important; } .p-r-1 { padding-right: 15px !important; } .p-r-2 { padding-right: 30px !important; } .p-r-3 { padding-right: 45px !important; } .p-r-4 { padding-right: 60px !important; } .p-r-5 { padding-right: 75px !important; }

.m-l-0 { margin-top: 0 !important; } .m-l-1 { margin-top: 15px !important; } .m-l-2 { margin-top: 30px !important; } .m-l-3 { margin-top: 45px !important; } .m-l-4 { margin-top: 60px !important; } .m-l-5 { margin-top: 75px !important; }

.m-r-0 { margin-bottom: 0 !important; } .m-r-1 { margin-bottom: 15px !important; } .m-r-2 { margin-bottom: 30px !important; } .m-r-3 { margin-bottom: 45px !important; } .m-r-4 { margin-bottom: 60px !important; } .m-r-5 { margin-bottom: 75px !important; }



.bg-weiss {
	background-color: #ffffff;
}

/* Contao Bild-Element: Container als Bezugspunkt */
.ce_image figure,
.content-image figure {
  position: relative;
  display: inline-block; /* oder block, je nach Layout */
  margin: 0;
}

/* Bild darf keine Lücke unten haben */
.ce_image img,
.content-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Untertitel als Balken AUF dem Bild */
.ce_image figcaption,
.content-image figcaption {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 0;

  background: rgba(0, 0, 0, 0.55); /* grauer/ dunkler Balken */
  color: #ffffff;

  padding: 0.75rem 1rem;
  font-size: 28px;
  font-size: 1.75rem;
  text-transform: uppercase;
  font-weight: 600;
}


.news-headline h2 {
	color: var(--farbe-marke-dunkel-bfsg);
}

.mod_newslist .layout_latest figure {
	float: left;
	margin-right: 50px;
}
.mod_newsreader .ce_text .image_container.float_above {
	margin-bottom: 30px;
}
@media screen and (max-width: 549px) {
	.mod_newslist .layout_latest figure {
		margin-right: 0;
	}
}

/*  ==========  topbar  ==========  */

#topbar {
	position: fixed;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	height: var(--topbar-hoehe);
	padding: 0;
	z-index:999;
	background-color: rgba(255,255,255,0.95);
	transition: all 0.5s;
	border-bottom: 1px solid #ffffff;
	box-shadow: 1px 1px 2px rgba(51,51,51,.2);
}

#topbar.small {
	height: var(--topbar-hoehe-small);
	background-color: rgba(255,255,255,0.95);
}
#topbar > .inside {
	height: 100%;
/*	padding: 0px 16px;  */
}

@media screen and (min-width: 1350px) {
	#topbar:not(.large) {
	}
}
@media screen and (min-width: 993px) and (max-width: 1350px) {
	#topbar:not(.large) {
		height: 140px;
		padding: 0;
	}
	#topbar.large {
		height: 140px;
	}
	#topbar.small {
		height: 90px;
		padding-top: 0;
		padding-bottom: 0;
	}
}
#topbar:hover {
	background-color: rgba(255,255,255,1);
	transition: all 0.5s;
}
#topbar .w3-top {
	position: relative;
}
#topbar > .inside > .w3-top {
	height: 100%;
}
@media screen and (max-width: 992px) {
	#topbar {
		height: var(--topbar-hoehe-mobil);
	}
	#topbar.small {
		height: var(--topbar-hoehe-mobil-small);
		background-color: #ffffff;
	}
	#topbar.small > .inside {
		padding-top: 0;
		padding-bottom: 0;
	}
}
/*
@media screen and (max-width: 600px) {
	#topbar {
		height: var(--topbar-hoehe-mobil) !important;
	}
	#topbar.small {
		height: var(--topbar-hoehe-mobil-small) !important;
	}
}
*/

#topbar.small .w3-bar .w3-bar-item {
	padding: 8px 12px 4px 12px;
}

/*  ==========  /topbar  ==========  */

/*  ==========  Logo  ==========  */

#topbar .logo {
	width: 200px;
	height: 100%;
	padding: 5px 0 5px 0;
}
#topbar.small .logo {
	padding: 5px 0 5px 0;
	transition: all 0.5s;
}

#myLogo {
	position: relative;
	display: inline-block;
	height: 100%;
	transition: all 0.5s;
}

#topbar.small #myLogo {
	padding: 0;
}
#myLogo img {
	height: 100%;
	width: auto;
	transition: all 0.5s;
}
@media screen and (min-width: 601px) and (max-width: 1280px) {
}
@media screen and (max-width: 600px) {
	#myLogo {
		transition: all 0.5s;
/*
		position: absolute;
		top: 5px;
		height: calc(var(--topbar-hoehe-mobil) - 10px);
		left: 15px;
*/
	}
	#topbar.small #myLogo {
		height: 100%;
		top: 0;
		left: 0;
		padding: 0;
	}
	#myLogo img {
		height: 100%;
		width: auto;
		max-width: 250px;
	}

}

/*  ==========  /Logo  ==========  */

/*  ==========  Navigation  ==========  */

#myNavbar {
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	width: calc(100% - 250px);
	background-color: transparent;
	overflow: visible;
	transition: all 0.5s;
/*	text-transform: uppercase;  */
}
@media screen and (min-width: 993px) and (max-width: 1280px) {
	#myNavbar {
		width: calc(100vw - 250px);
	}
	#topbar.small #myNavbar {
		width: calc(100vw - 230px);
	}
}
@media screen and (max-width: 992px) {
	#myNavbar {
		top: 0;
		bottom: auto;
	}
}
#myNavbar .mod_navigation.w3-bar-item {
	margin: 0;
	padding: 0;
}
.mod_navigation ul, 
.mod_customnav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.w3-top .mod_navigation ul {
	float: right;
}

#myNavbar li {
	float: left;
	margin: 0;
	padding: 3px;
}
@media screen and (min-width: 993px) and (max-width: 1280px) {
	#myNavbar .w3-button {
		padding: 0 16px;
	}
}

/*
#myNavbar ul.level_1 > li {
	position: relative;
}
*/
#myNavbar ul.level_1 > li > a:hover{
	color: var(--farbe-menu-level1-hover-text) !important;
}
#myNavbar ul.level_1 > li > strong {
	cursor: default;
	color: var(--farbe-marke) !important;
	background-color: inherit !important;
}
#myNavbar ul.level_2 {
	position: absolute;
	background-color: var(--farbe-menu-level2-bg);
	color: var(--farbe-menu-level2-text);
	height: auto;
	max-height: 0;
	padding: 0;
	transition: all 0.3s 0s;
	overflow: hidden;
	min-width: 200px;
	box-shadow: 2px 2px 4px #aaaaaa;
	position: absolute;
	top: 39px;
	display: flex;
	flex-wrap: wrap;
	text-transform: none;
	width: auto;
	max-width: 300px;
/*	left: 0;     Megamenu  */
/*	width: 100%;     Megamenu  */
}
#myNavbar ul.level_2 li {
	display: block;
	float: none;
	width: 100%;
/*	width: 20%;     Megamenu  */
}
#myNavbar li:hover ul.level_2 {
	height: auto;
	max-height: 800px;
	padding: 30px 0;
/*	transition: all 0.7s 0.3s;  */
}
#myNavbar ul.level_2 li  .w3-bar-item {
	float: none;
	padding: 12px 25px;
}
#myNavbar ul.level_2 li .w3-button {
	text-align: left;
	display: block;
}
#myNavbar ul.level_2 li  .w3-button:hover {
	color: var(--farbe-menu-level2-hover-text) !important;
	background-color: var(--farbe-menu-level2-hover-bg) !important;
}
#myNavbar ul.level_1 li > strong.active, 
#myNavbar ul.level_1 li > a.trail {
	color: var(--farbe-marke-dunkel-bfsg) !important;
	font-weight: bold;
}

/*
	SmallMenu ...
*/

.menu-button {
	position: absolute;
	top: 0;
	right: 0;
	transition: all 0.3s;
}
@media screen and (min-width: 993px) and (max-width: 1350px) {
	#myNavbar.large .menu-button {
		top: auto;
		bottom: 40px;
	}
	#myNavbar.small .menu-button {
		top: auto;
		bottom: 0;
	}
}
@media screen and (max-width: 992px) {
	#myNavbar .menu-button {
/*		right: 10px;  */
		right: 0;
		top: 35px;
		transition: all 0.3s;
	}
	#topbar.small #myNavbar .menu-button {
		top: 25px;
	}
	#myNavbar .menu-button:hover {
		background-color: transparent !important;
	}
}
@media screen and (min-width: 550px) and (max-width: 767px) {
	#myNavbar .menu-button {
		top: 50px;
	}
}


#myNavbar button i::before {	
	transition: all 0.3s;
}
#myNavbar button.active i::before {
	content: "\f00d";
}
#navSmallMenu {
	position: absolute;
	top: 120px;
	right: -100vw;
	width: calc(100vw - 32px);
	max-width: 320px;
	height: auto;
	transition: left 0.5s;
	display: block;
	border-right: 1px solid #cccccc;
	background-color: #ffffff;
	text-transform: uppercase;
	overflow: auto;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	transition: all 0.5s;
}
#navSmallMenu::-webkit-scrollbar {
	display: none;
}
#navSmallMenu.w3-white {
	color: #ffffff !important;
	background-color: var(--farbe-marke) !important;
}
@media (max-width: 600px) {
	#navSmallMenu {
		top: var(--topbar-hoehe-mobil);
		padding-top: 0;
	}
	#topbar.small #navSmallMenu {
		top: var(--topbar-hoehe-mobil-small);
		padding-top: 0;
	}
	#topbar.small .menu-button {
		
	}
	#topbar.small .w3-padding-large {
		padding-top: 6px;
		padding-bottom: 6px;
	}
	#topbar.small .w3-xxlarge {
		font-size: 32px !important;
	}
}
#navSmallMenu.w3-hide {
	display: block !important;
}
#navSmallMenu.w3-show {
	right: 0;
	transition: all 0.5s;
	box-shadow: 1px 5px 5px #666666;
	max-height: calc(100vh - 120px);
}
@media (max-width:600px) {
	#navSmallMenu.w3-show {
		max-height: calc(100vh - var(--topbar-hoehe-mobil));
		overflow: scroll;
	}
	#topbar.small  #navSmallMenu.w3-show {
		max-height: calc(100vh - var(--topbar-hoehe-mobil-small));
	}
}
#navSmallMenu .w3-bar-block .w3-bar-item {
	padding: 12px 16px 12px 36px;
}
.w3-top #navSmallMenu .mod_navigation ul {
	float: left;
	width: 100%;
}
#navSmallMenu li {
	border-bottom: 1px solid #cccccc;
}
#navSmallMenu li > a:hover {
	background-color: rgba(255,255,255,0.4) !important;
}
#navSmallMenu li:first-child {
	border-top: 1px solid #cccccc;
}
#navSmallMenu li.active strong {
	cursor: default;
}
#navSmallMenu ul.level_1 > li {
	display: block;
}
#navSmallMenu ul.level_2 {
	display: block;
	background-color: transparent;
	position: relative;
	top: auto;
}
#navSmallMenu ul.level_2 li .w3-bar-item {
	padding: 8px 16px 8px 56px;
	font-size: 0.875rem;
}
#navSmallMenu ul li .w3-bar-item {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

@media screen and (max-width: 992px) {
	.navtop {
		font-size: 1rem;
	}
}

.meta {
    position: absolute;
    top: 0;
    right: 15px;
    text-transform: uppercase;
    color: #000000;
	transition: all 0.3s;
	padding-top: 5px;
	font-size: 16px;
	font-size: 1rem;
}
.meta ul li {
	display: inline-block;
	margin-left: 10px;
}

.meta ul li a {
	line-height: 1;
    background-color: var(--farbe-marke);
}
.meta .w3-btn, .meta .w3-button {
	padding: 5px 10px;
}
@media screen and (max-width: 549px) {
	.meta .w3-button {
		font-size: 16px;
		font-size: 1rem;
		padding: 5px 10px;
		line-height: 1;
	}
}
@media screen and (min-width: 768px)  and (max-width: 992px) {
	.meta {
		right: 120px;
	}
}
@media screen and (min-width: 550px)  and (max-width: 767px) {
	.meta ul li a {
		max-width: 158px;
		text-wrap: auto;
	}
}
@media screen and (max-width: 549px) {
	.meta {
		top: var(--topbar-hoehe-mobil);
		left: 0;
		width: 100%;
		padding: 15px;
		transition: top 0.7s;
	}
	#topbar.small .meta {
/*		display: none;  */
		top: -300px;
	}
	.meta ul {
		text-align: center;
	}
	.meta ul li {
		margin: 10px;
	}
	.meta .w3-button {
		white-space: normal;
	}
}


.back-to-top {
	position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 9999;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--farbe-marke);
    color: #000000;
    border-radius: 999px;
    border: 3px solid #ffffff;
    text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transform: translateY (o.5rem);
	transition: all 0.3s;
}

.back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY (0);
}	

.back-to-top i {
	transition: all 0.3s;
}

.back-to-top:hover i {
	font-size: 1.2em;
}


.back-to-top:hover {
	width: 4.5rem;
	height: 4.5rem;
}

/*  ==========  /Navigation  ==========  */



.swiper-button-next, .swiper-button-prev {
	background-color: var(--farbe-marke);
	color: #ffffff;
	height: 50px;
	width: 50px;
	border-radius: 50px;
	border: 3px solid #ffffff;
	padding: 10px;
}
.swiper-button-next svg, .swiper-button-prev svg {
	stroke: #000000;
	stroke-width: 2px;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	bottom: -45px;
    left: 0;
    top: auto;
    width: 100%;
}

.swiper-pagination-bullet-active {
	background-color: var(--farbe-marke-dunkel-bfsg);
}


.swiper-pagination-bullet {
	height: 15px;
	width: 15px;
}

.swiper {
	overflow: visible;
}

figure {
	margin: 0;
}

form {
	font-size: 18px;
	font-size: 1.125rem;
}

fieldset {
	padding: 15px 30px 30px 30px;
}
@media screen and (max-width: 549px) {
	fieldset {
		padding: 15px 15px 30px 15px;
	}
}

textarea {
	width: 100%;
}

textarea, input.text {
	background-color: #f4f4f4;
	border: 1px solid var(--farbe-marke-hell);
	padding: 0 5px;
}

.radio_container label {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid var(--farbe-marke);
  border-radius: 6px;
  cursor: pointer;
  background-color: var(--farbe-marke-hell);
  color: #333;
  transition: all 0.2s ease;
}
.radio_container label:hover {
  background-color: var(--farbe-marke);
  border-color: #ffffff;
}

.radio_container input[type="radio"] {
  display: none;
}

.radio_container input[type="radio"]:checked + label {
  background-color: var(--farbe-marke);
  border-color: #ffffff;
  color: #fff;
}

fieldset.radio {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;  
}

.mod_mp_form_steps ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.mod_mp_form_steps li {
	margin: 0;
	display: inline-block;
}
.mod_mp_form_steps li a {
	display: block;
	padding: 4px 12px;
	margin: 0;
	background-color: #eeeeee;
}
.mod_mp_form_steps li strong {
	display: block;
	padding: 4px 12px;
	margin: 0;
	font-weight: normal;
}


.mod_mp_form_steps li.current {
	background-color: var(--farbe-marke);
}

.mod_mp_form_steps li.current strong {
	font-weight: bold;
}

.mod_mp_form_steps li.accessible {
	background-color: var(--farbe-marke-hell);
}


.mod_mp_form_steps li.accessible a {
	text-decoration: none;
	font-weight: normal;
	transition: all 0.3s;
}


.mod_mp_form_steps li.accessible a:hover {
	background-color: var(--farbe-marke);
}

.widget {
	display: block;
	break-inside: avoid;
	margin-bottom: 15px;
}
.widget-radio.termin-art .werte {
	columns: 2;
}

.widget-radio.termin-art label {
	width: 100%;
	margin: 10px 0;
}

.radio_container.mitarbeiter .werte {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.widget-radio.mitarbeiter .werte span {
	padding: 0 10px;
}
.widget-radio.mitarbeiter label {
	margin: 10px 0;
	padding-left: 30px;
	padding-right: 30px;
}

.widget-text label {
	display: block;
}
.widget-text input.text {
	width: 100%;
	max-width: 400px;
}

fieldset legend {
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--farbe-marke);
}

.widget-pagebreak {
	display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.daten {
	columns: 2;
	margin: 10px;
}


:focus {
	outline: 3px solid #cccccc !important;
}

.skip-link {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
/* Sobald per Tastatur fokussiert: sichtbar machen */
.skip-link:focus,
.skip-link:active {
  clip: auto;
  height: auto;
  width: auto;
  margin: 0;
  overflow: visible;
  position: fixed;
  top: 1rem;
  left: 1rem;
  padding: .75rem 1rem;
  z-index: 10000;
  white-space: normal;
}