/*
	abtf.eu
*/

:root {

	--farbe-marke:             #A61232;
	--farbe-marke:             #B82837;  /*  rgb(184,40,55)  */
	--farbe-grau-dunkel:       #58595B;  /*  rgb(88,89,91)  */
	--farbe-grau-hell:         #f4f4f4;
	--farbe-grau:              #cccccc;
	--farbe-hellgrau:       	#ccccd2;
	--farbe-ganzhellgrau:       #f2f2f2;
	--farbe-anthrazit:         #2E2E2E;

	--farbe-text-standard:     var(--farbe-anthrazit);

	--farbe-menu-level1-text:         var(--farbe-anthrazit);
	--farbe-menu-level1-bg:           #ffffff;
	--farbe-menu-level1-hover-text:   var(--farbe-marke);
	--farbe-menu-level1-hover-bg:     var(--farbe-grau-hell);
	--farbe-menu-level2-text:         var(--farbe-anthrazit);
	--farbe-menu-level2-bg:           #ffffff;
	--farbe-menu-level2-hover-text:   var(--farbe-marke);
	--farbe-menu-level2-hover-bg:     var(--farbe-grau-hell);


	--farbe-footer:            var(--farbe-anthrazit);
	--farbe-footer-text:       #ffffff;
	--farbe-footer-border:     var(--farbe-marke);
	
	--inhaltsbreite:            1200px;
	--topbar-hoehe:              150px;
	--topbar-hoehe-small:         90px;
	--topbar-hoehe-mobil:        100px;
	--topbar-hoehe-mobil-small:   90px;

	--farbe-button:                var(--farbe-marke);
	--farbe-button-text:           #ffffff;
	--farbe-button-border:         var(--farbe-marke);
	--farbe-button-hover:          var(--farbe-grau-hell);
	--farbe-button-text-hover:     var(--farbe-text-standard);
	--farbe-button-border-hover:   var(--farbe-marke);

	--farbe-flip-card-front-bg:   var(--farbe-marke);
	--farbe-flip-card-front-text: #ffffff;
	--farbe-flip-card-back-bg:    #ffffff;
	--farbe-flip-card-back-text:  var(--farbe-grau-dunkel);
}

@font-face {
  font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url(/files/_tmpl/fonts/Roboto-Regular.ttf);
}
@font-face {
  font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url(/files/_tmpl/fonts/Roboto-Bold.ttf);
}
@font-face {
  font-family: Roboto; font-style: italic; font-weight: 400; font-display: swap; src: url(/files/_tmpl/fonts/Roboto-Italic.ttf);
}

.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; }

/*  ==========  w3css Korrekturen  ==========  */

figure { margin: 0 0 15px 0; }
h1, h2, h3, h4, h5, h6 { margin: 15px 0; }
.w3-content { max-width: var(--inhaltsbreite); }
.w3-container::before { display: none; }
.w3-image img { width: 100%; height: 100%; object-fit: contain; }
.w3-btn, .w3-button { white-space: normal; line-height: 1.25; }

/*  ==========  /w3css Korrekturen  ==========  */


html {
	font-size: 100%;
	box-sizing: border-box;
	scroll-behavior: smooth;
}
body {
	font-family: Roboto, sans-serif;
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 1.5;
}
@media screen and (max-width: 549px) {
	body {
		font-size: 16px;
		font-size: 1rem;
	}
}
p { margin-bottom: 15px;
}
.trenner > hr {
	border-top: 1px solid #ccc;
	margin: 45px auto 30px auto;
	width: 50%;
}

#main ul {
	list-style-type: disc;
	padding: 0 0 0 16px;
}

.inhalt-breit {
	padding: 0 15px;
	width: 100%;
	max-width: none;
}
.inhalt-eng {
	position: relative;
	padding: 0 15px;
	margin: 0 auto;
	width: 100%;
	max-width: var(--inhaltsbreite);
}
.zentriert { text-align: center; }
.passend img { width: 100%; height: 100%; object-fit: cover; }

#container {
	margin-top: var(--topbar-hoehe);
}
@media screen and (max-width: 993px) {
	#container {
		margin-top: var(--topbar-hoehe-mobil);
	}
}

h1 {
/*	font-size: 40px;
	font-size: 2.5rem;  */
	font-size: 48px;
	font-size: 3rem;
	color: var(--farbe-marke);
}
h2 { color: var(--farbe-marke); font-size: 30px; font-size: 1.875rem; }
h3 { font-size: 24px; font-size: 1.5rem; font-weight: bold; }
@media screen and (max-width: 549px) {
	h1 { font-size: 36px; font-size: 2.25rem; }
	h2 { color: var(--farbe-marke); font-size: 24px; font-size: 1.5rem; }
	h3 { font-size: 20px; font-size: 1.25rem; font-weight: bold; }
}

.bg-rot {
	background-color: var(--farbe-marke);
	color: #ffffff;
}

.bg-grau {
	background-color: var(--farbe-grau-dunkel);
	color: #ffffff;
}
.bg-ganzhellgrau {
	background-color: var(--farbe-ganzhellgrau);
}


#main .mod_article.bg-hellgrau {
	max-width: none;
	padding: 0;
	background-color: var(--farbe-grau-hell);
}
@media screen and (min-width: 600px) {
	.zweispaltig {
		columns: 2;
	}
}

#main a {
	color: var(--farbe-marke);
}
#main .content-hyperlink.button a, 
#main p.more a,
#main p.back a,
#main form button.submit {
	background-color: var(--farbe-button);
	color: var(--farbe-button-text);
	border: 1px solid var(--farbe-button-border);
	text-decoration: none;
	display: inline-block;
	padding: 7px 30px;
	width: auto;
	margin: 15px 0;
	transition: all 0.3s;
	cursor: pointer;
	border-radius: 15px 0 0 0;
}
#main .content-hyperlink.button a:hover, 
#main p.more a:hover,
#main p.back a:hover,
#main form button.submit:hover {
	background-color: var(--farbe-button-hover);
	color: var(--farbe-button-text-hover);
	border: 1px solid var(--farbe-button-border-hover);
}
figcaption {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 2px 8px;
	background-color: rgba(0,0,0,0.5);
	color: #ffffff;
	font-size: 16px;
	font-size: 1rem;
}


/*  ==========  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.85);
	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.9);
}
#topbar > .inside {
	height: 100%;
	padding: 0px 16px;
}

#topbar .logo {
	width: 300px;
	height: 100%;
	padding: 15px 0 15px 0;
	box-sizing: border-box;
}
#topbar.small .logo {
	padding: 5px 0 5px 0;
	transition: all 0.5s;
}


@media screen and (min-width: 1350px) {
	#topbar:not(.large) {
	}
}
@media screen and (min-width: 994px) and (max-width: 1350px) {
	#topbar:not(.large) {
		height: var(--topbar-hoehe);
		padding: 0;
	}
	#topbar.large {
		height: var(--topbar-hoehe);
	}
	#topbar.small {
		height:  var(--topbar-hoehe-mobil);
		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: 993px) {
	#topbar {
		height: var(--topbar-hoehe-mobil) !important;
	}
	#topbar.small {
		height: 70px;
		background-color: rgba(255,255,255,0.9);
	}
	#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;
	}
}
#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 screen and (max-width:549px) {
	#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));
	}
}


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

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

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

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


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

nav a {
	text-decoration: none;
}


#myNavbar {
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	width: calc(100vw - 362px);
	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 - 360px);
	}
	#topbar.small #myNavbar {
		width: calc(100vw - 240px);
	}
}
@media screen and (max-width: 992px) {
	#myNavbar {
		top: 0;
		bottom: auto;
	}
}
/*
@media screen and (max-width: 600px) {
	#myNavbar {
		top: 0;
		bottom: auto;
	}
}
*/

#nav-button {
	position: absolute;
	top: 45px;
	right: 0;
	padding: 10px 15px;
}

#navSmallMenu {
	background-color: var(--farbe-marke-gelb);
	color: var(--farbe-marke-blau);
	position: absolute;
	top: 120px;
	right: -100vw;
	width: calc(100vw - 32px);
	max-width: 320px;
	height: auto;
	display: block;
	border-right: 1px solid #cccccc;
	text-transform: uppercase;
	overflow: auto;
/*	z-index: 999;  */
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	transition: all 0.5s;
}
#navSmallMenu::-webkit-scrollbar {
	display: none;
}
#navSmallMenu a {
	color: var(--farbe-marke-blau) !important;
}
@media screen and (max-width: 549px) {
	#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 screen and (max-width:549px) {
	#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;
}
#navSmallMenu ul.level_3 {
	display: none;
}

@media screen and (max-width: 939px) {
/*	.navtop {
		font-size: 1rem;
	}  */
	#navSmallMenu nav.mod_changelanguage {
		display: block;
		text-align: right;
	}
	#navSmallMenu nav.mod_changelanguage ul {
		padding-right: 12px;
	}
	#navSmallMenu .mod_changelanguage ul.level_1 > li {
		display: inline-block;
		border: none;
	}
	nav.mod_changelanguage ul li.active strong, 
	nav.mod_changelanguage ul li a {
		border: none;
		display: inline-block;
		padding: 8px 10px;
		vertical-align: middle;
		overflow: hidden;
		text-decoration: none;
		color: inherit;
		background-color: inherit;
		text-align: center;
		cursor: pointer;
		white-space: nowrap;
	}
}



#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;
}
.w3-top .mod_navigation ul.level_1 {
	text-align: right;
}

#myNavbar li {
	display: inline-block;
	margin: 0;
	padding: 0;
}
@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: 1200px;
	padding: 15px 0;
/*	transition: all 0.7s 0.3s;  */
}
#myNavbar li:hover ul.level_3 {
	float: none;
}
#myNavbar ul.level_2 li  .w3-bar-item {
	float: none;
	padding: 12px 25px;
}
#myNavbar ul.level_3 li  .w3-bar-item {
	padding: 7px 25px 7px 50px;
	font-size: 0.8em;
}
#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) !important;
	font-weight: bold;
}
#myNavbar ul.level_2 li a {
	color: var(--farbe-menu-level2-text);
	background-color: var(--farbe-menu-level2-bg);
}
#myNavbar ul.level_2 li a:hover {
	color: var(--farbe-menu-level2-hover-text);
	background-color: var(--farbe-menu-level2-hover-bg);
}

#myNavbar .submenu.partner ul.level_2 {
	width: auto !important;
	max-width: 500px;
	left: auto;
	right: 30px;
}
#myNavbar .submenu.partner ul.level_2 > li.submenu > a, 
#myNavbar .submenu.partner ul.level_2 > li.submenu > strong {
	font-weight: bold;
}
#myNavbar .submenu.partner ul.level_3 {
	columns: 2;
	column-gap: 0;
}
#myNavbar .submenu.partner ul.level_3 li .w3-bar-item {
	padding: 7px 25px;
}


.mod_changelanguage {
	position: absolute;
	top: 10px;
	right: 10px;
}
.mod_changelanguage ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.mod_changelanguage ul li {
	list-style-type: none;
	float: left;
	margin: 0;
	padding: 0;
	text-transform: lowercase;
}
.mod_changelanguage ul li::before {
	display: inline-block;
	content: '|';
	padding-right: 4px;
}
.mod_changelanguage ul li:first-child::before {
	display: none;
}
.mod_changelanguage ul li strong.active {
	font-weight: bold;
	color: var(--farbe-marke);
	padding: 2px 5px;
}
.mod_changelanguage ul li a {
	padding: 2px 5px;
	transition: all 0.5s;
}
.mod_changelanguage ul li a:hover {
	background-color: var(--farbe-grau);
}


#main ul { list-style-type: disc; padding-left: 25px; }
#main ul ul { list-style-type: square; }
#main ul ul ul { list-style-type: '\2b25\0020';; }
#main ul ul ul ul { list-style-type: '\2b26\0020'; }
#main ul li::marker { font-size: 1.5em; line-height: 1; }
#main ul ul ul li::marker { font-size: 1em;; }
#main ul ul ul ul li::marker { font-size: 1em; }


/*  ========== Footer  ==========  */

#footer {
	background-color: var(--farbe-footer);
	color: var(--farbe-footer-text);
	border-top: 5px solid var(--farbe-footer-border);
	font-size: 16px;
	font-size: 1rem;
}
#footer .firmenname p:first-child {
	font-size: 1.4em;
	line-height: 1.2;
}


#footer .mod_customnav ul {
	text-align: right;
}
#footer .mod_customnav li {
	display: inline-block;
}
#footer .mod_customnav li::before {
	display: inline-block;
	content: '|';
	padding-right: 5px;
	padding-left: 3px;
}
#footer .mod_customnav li:first-child::before {
	display: none;
}
#footer .mod_customnav .w3-button {
	padding: 0;
	background-color: transparent;
}
#footer .mod_customnav .w3-button:hover {
	color: var(--farbe-marke-hell-1) !important;
	background-color: transparent;
}
#footer .mod_customnav .w3-hover-theme:hover {
	color: var(--farbe-marke-hell-1) !important;
	background-color: transparent !important;
}


#footer a {
	color: var(--farbe-text-standard-link);
	text-decoration: underline;
	transition: all 0.5s;
	display: inline-block;
}
#footer a:hover {
	color: #ffffff !important;
	text-decoration: underline !important;
	background-color: var(--farbe-text-standard-link-hover-bg);
/*	opacity: 0.75;  */
}
#footer a:hover img {
	filter: brightness(150%);
}

#footer a.btn-top {
  position: fixed;
  display: block;
  text-align: center;
  right: 45px;
  bottom: 45px;
  width: 45px;
  height: 45px;
  background-color: var(--farbe-marke) !important;
  color: #ffffff !important;
  text-decoration: none;
  rotate: 90deg;
  font-size: 36px;
  line-height: 1;
  padding: 0 10px 7px 10px;
}
#footer a.btn-top:hover {
	text-decoration: none !important;
	padding: 0 10px 7px 5px;
}

#footer .logos-sm {
	text-align: center;
}
#footer .logos-sm a {
	display: inline-block;
	padding: 0;
	background-color: transparent;
	transition: all 0.2s;
}
#footer .logos-sm a:hover {
	background-color: var(--farbe-marke);
}
#footer .logos-sm a img {
	filter: brightness(75%);
	transition: all 0.5s;
}
#footer .logos-sm a:hover img {
	filter: brightness(150%);
	transition: all 0.5s;
}

/*  ========== /Footer  ==========  */

/*  ==========  Hero  ==========  */

#main .mod_article.hero, 
#main .mod_article.hero-slider {
	position: relative;
	padding: 0;
	max-width: none;
}
#main .mod_article.hero figure, 
#main .mod_article.hero-slider figure {
	position: relative;
	margin: 0;
}
#main .mod_article.hero:not(.keine-bogen) figure::after, 
#main .mod_article.hero-slider:not(.keine-bogen) figure::after {
	position: absolute;
	top: -40%;
	left: 15%;
	right: 0;
	bottom: 0;
	display: block;
	content: '';
	overflow: hidden;
	background-image: url(/files/_tmpl/img/Doppel-Woosh-haltransparent.png);
	background-size: contain;
	background-repeat: no-repeat;
}
body.home #container .mod_article.hero figure, 
body.home #container .mod_article.hero-slider figure {
	height: calc(100vh - 200px) !important;
/*	height: 100vh !important;  */
}

.hero .content-text img, 
.hero .content-image img, 
.hero .content-swiper img, 
.hero-slider .content-text img, 
.hero-slider .content-image img, 
.hero-slider .content-swiper img {
	width: 100%;
	height: auto;
}
.hero .content-text.media--left figure, 
.hero-slider .content-text.media--left figure {
	margin-right: 0;
}

.hero .content-text .rte, 
.hero-slider .content-text {
	position: absolute;
/*	background-color: hsla(0,0%,100%,.65);  */
/*	background: var(--farbe-marke-transparent);  */
	background-image: url(/files/_tmpl/img/farbverlauf-weiss.png);
	background-size: cover;
	background-repeat: no-repeat;
	color: #ffffff;
	padding: 60px 50px 30px 50px;
	display: flex;
	flex-direction: column;
	justify-content: start;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	height: 100%;
	width: 35%;
	box-sizing: border-box;
}
.hero .content-text .rte::before, 
.hero-slider .content-text::before {
	content: '';
/*	background-image: url(/files/_tmpl_hk/img/Hake_Flaeche_weiss_Transparent-2.svg);  */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 2px center;
	position: absolute;
	top: 0;
	left: -35%;
	height: 100%;
	width: 35%;
}
.hero .content-text .rte, 
.hero-slider .content-text .rte {
	color: var(--farbe-text-standard);
}
.hero .content-text .rte h1, 
.hero .content-text .rte h2 {
	color: var(--farbe-text-headline);
	font-size: 52px;
	font-size: 3.25rem;
	line-height: 1.2;
	margin-bottom: 30px;
}
.hero-slider .content-text .rte h1, 
.hero-slider .content-text .rte h2 {
	color: var(--farbe-text-headline);
	font-size: 36px;
	font-size: 2.25rem;
	line-height: 1.2;
	margin-bottom: 30px;
}
.hero .content-text .rte h1, 
.hero-slider .content-text .rte h1 {
	color: var(--farbe-marke);
	font-weight: 700;
	font-style: italic;
}
.hero.kompetenzen.content-text .rte h1 {
	line-height: 1.1;
}
.hero.kompetenzen.content-text .rte h1:first-line {
	font-size: 0.5em;
}
.hero .content-text .rte h2, 
.hero-slider .content-text .rte h2 {
	color: var(--farbe-text-headline);
	font-size: 32px;
	font-size: 2rem;
	line-height: 1.2;
	margin-bottom: 30px;
}
.hero .content-text .rte p, 
.hero-slider .content-text .rte p {
	margin-bottom: 15px;
	font-size: 28px;
	font-size: 1.75rem;
	text-transform: uppercase;
}
.hero .content-text .rte a, 
.hero-slider .content-text .rte a {
	background-color: var(--farbe-button);
	color: var(--farbe-button-text) !important;
	border: 1px solid var(--farbe-button-border);
	text-decoration: none !important;
	font-size: 18px;
	font-size: 1.125rem;
	padding: 7px 25px;
	margin-top: 15px;
	display: inline-block;
	transition: all 0.3s;
}
.hero .content-text .rte p a:hover, 
.hero-slider .content-text .rte p a:hover {
	background-color: var(--farbe-button-hover);
	color: var(--farbe-button-text-hover) !important;
	border: 1px solid var(--farbe-button-border-hover);
}

.platzhalter::after {
	position: absolute;
	bottom: 150px;
	left: 30px;
	display: inline-block;
	content: 'PLATZHALTER';
	font-size: 32px;
	font-weight: bold;
	background-color: #ffff00;
	padding: 0 15px;
	rotate: -20deg;
	
}
@media screen and (min-width: 994px) and (max-width: 1099px) {
	.hero .content-text .rte, .hero-slider .content-text {
		width: 40%;
		padding: 25px 20px 15px 20px;
	}
	.hero .content-text .rte h1, 
	.hero .content-text .rte h2 {
		font-size: 44px;
		font-size: 2.75rem;
	}
}
@media screen and (min-width: 768px) and (max-width: 993px) {
	.hero .content-text .rte, .hero-slider .content-text {
		width: 40%;
		padding: 25px 20px 15px 20px;
	}
	.hero .content-text .rte h1, 
	.hero .content-text .rte h2 {
		font-size: 40px;
		font-size: 2.5rem;
	}
}
@media screen and (min-width: 550px) and (max-width: 767px) {
	.hero .content-text .rte, .hero-slider .content-text {
		width: 40%;
		padding: 25px 20px 45px 20px;
	}
	.hero .content-text .rte h1, 
	.hero .content-text .rte h2 {
		font-size: 36px;
		font-size: 2.25rem;
	}
}
@media screen and (min-width: 0) and (max-width: 549px) {
	.hero .content-text .rte, .hero-slider .content-text {
		position: relative;
		width: 100%;
		padding: 0 15px 0 15px;
	}
	.hero .content-text .rte h1, 
	.hero .content-text .rte h2 {
		font-size: 32px;
		font-size: 2rem;
	}
}



.hero-3 {
	background-color: #aaaaaa;
	background-image: url(/files/_tmpl/img/farbverlauf-weiss.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.hero-3 .row {
	column-gap: 0;
}
.hero-3 .content-image figure, 
.hero-3 .content-player figure {
	margin: 0;
}
.hero-3 img, 
.hero-3 video {
	width: 100%;
	height: auto;
	display: block;
}
.hero-3 .content-text {
	height: 100%;
	padding: 45px;
	display: flex;
	flex-direction: row;
	align-items: end;
}
.hero-3 .content-text .rte h1 {
	color: var(--farbe-marke);
	font-size: 36px;
	font-size: 2.25rem;
	font-weight: 700;
	font-style: italic;
	line-height: 1.2;
	margin-bottom: 30px;
}
.hero-3 .content-text .rte h2 {
	color: var(--farbe-text-headline);
	font-size: 28px;
	font-size: 1.75rem;
	line-height: 1.2;
	margin-bottom: 30px;
}
body.home .hero-3 .content-text .rte h1, 
body.home .hero-3 .content-text .rte h2 {
	color: var(--farbe-marke);
	font-size: 28px;
	font-size: 1.75rem;
	line-height: 1.2;
	margin-bottom: 30px;
}
body.home .hero-3 .content-text .rte h1:first-line {
	font-size: 36px;
	font-size: 2.25rem;
}




/*  ==========  /Hero  ==========  */

/*  ==========  Teaserbox  ==========  */

.content-text.bigbutton {
	position: relative;
	aspect-ratio: 7 / 5;
	overflow: hidden;
	border-radius: 30px 0 0 0;
}
.content-text.bigbutton .rte a::before {
	position: absolute;
	top: -20%;
	left: 2%;
	right: 0;
	bottom: 0;
	display: block;
	content: '';
	overflow: hidden;
	background-image: url(/files/_tmpl/img/Doppel-Woosh-haltransparent.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.content-text.bigbutton .rte a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 30px;
	background-color: rgba(0,0,0,0.4);
	color: #ffffff !important;
	font-weight: bold;
	text-shadow: 0 0 5px #000;
	display: flex;
	flex-direction: column;
	justify-content: end;
	text-decoration: none;
	transition: all 0.3s;
	line-height: 1.2;
}
.content-text.bigbutton .rte a:hover {
	background-color: rgba(166,18,50,0.8);
}
.content-text.bigbutton figure {
	margin: 0;
	height: 100%;
}
.content-text.bigbutton figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media screen and (max-width: 549px) {
	.content-text.bigbutton .rte a {
		padding: 15px;
		font-size: 1.25rem;
	}
}

/*  ==========  /Teaserbox  ==========  */

/*  ==========  Teaserbox 2  ==========  */

.content-text.box {
	position: relative;
	aspect-ratio: 7 / 5;
	overflow: hidden;
	border-radius: 30px 0 0 0;
}
.content-text.box .rte a::before {
	position: absolute;
	top: 0;
	left: 2%;
	right: 0;
	bottom: 0;
	display: block;
	content: '';
	overflow: hidden;
	background-color: #ffffff;
	background-size: contain;
	background-repeat: no-repeat;
}
.content-text.box .rte a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 30px;
	background-color: rgba(0,0,0,0.4);
	color: #fff;
	text-shadow: 0 0 5px #000;
	display: flex;
	flex-direction: column;
	justify-content: end;
	text-decoration: none;
	transition: all 0.3s;
	line-height: 1.2;
}
.content-text.box. rte a:hover {
	background-color: rgba(166,18,50,0.8);
}

/*  ==========  /Teaserbox  ==========  */


/*  ==========  Formulare  ==========  */

form .widget {
	padding: 5px 0;
}
form .widget-textarea {
	display: flex;
	flex-direction: row;
	align-items: start;
	gap: 4px;
}
form .widget-text label, 
form .widget-textarea label, 
form .widget-select label {
	display: inline-block;
	width: 250px;
}
form fieldset {
	border: 1px solid var(--farbe-grau);
	background-color: var(--farbe-grau-hell);
	margin-bottom: 15px;
}
form fieldset legend {
	color: var(--farbe-marke);
	font-size: 1.4em;
	padding: 0 10px;
}
input.text,
textarea {
	width: 100%;
	max-width: 560px;
}

/*  ==========  /Formulare  ==========  */


body.partnerprofil h1 {
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.2;
}
body.partnerprofil h1::first-line {
	font-size: 40px;
	font-size: 2.5rem;
}
body.partnerprofil h1, 
body.partnerprofil h1 + .rte > p {
	margin-bottom: 0;
}


/*  ==========  Portrait-Box  ==========  */

.portrait-box {
	position: relative;
	background-color: var(--farbe-grau-hell);
	border-radius: 30px 0 0 0;
	height: 100%;
	overflow: hidden;
}
.bg-hellgrau .portrait-box {
	background-color: #ffffff;
}
.portrait-box, 
.portrait-box.media--right {
	display: grid;
	grid-template-columns: 33% 67%;
	border: 1px solid var(--farbe-grau);
}
.portrait-box.media--right {
	grid-template-columns: 67% 33%;
}
.portrait-box.media--left figure {
	margin: 0;
	grid-column: 1 / 2;
}
.portrait-box.media--right figure {
	margin: 0;
	grid-column: 2 / 3;
}
.portrait-box figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.portrait-box .rte,
.portrait-box.media--left .rte {
	grid-column: 2 / 3;
	padding: 15px 15px 65px 15px;
}
.portrait-box.media--right .rte {
	grid-column: 1 / 2;
}
.portrait-box .rte h2 {
	font-size: 24px;
	font-size: 1.5rem;
}
.portrait-box .rte p {
	margin-bottom: 0;
}
.portrait-box .rte p:last-child a {
	position: absolute;
	bottom: 15px;
	display: inline-block;
	padding: 5px 15px;
	margin-top: 15px;
	background-color: var(--farbe-marke);
	border: 1px solid var(--farbe-marke);
	color: #ffffff !important;
	font-size: 0.8em;
	text-decoration: none;
	border-radius: 15px 0 0 0;
	transition: all 0.3s;
}
.portrait-box .rte p:last-child a:hover {
	background-color: var(--farbe-grau-hell) !important;
	color: var(--farbe-marke) !important;
}

/*  ==========  /Portrait-Box  ==========  */

/*  ==========  Events  ==========  */

.mod_eventlist.veranstaltungen {
	columns: 2;
}
.mod_eventlist.veranstaltungen .layout_upcoming {
	margin-bottom: 30px;
}
.mod_eventlist.veranstaltungen .layout_upcoming time {
	display: block;
}
.mod_eventlist.veranstaltungen .layout_upcoming h3 {
	display: block;
	font-size: 24px;
	font-size: 1.5rem;
	margin-top: 0;
}

/*  ==========  /Events  ==========  */

/*  ==========  News  ==========  */

.mod_newslist .layout_latest {
	position: relative;
	border: 1px solid var(--farbe-grau);
	border-radius: 30px 0 0 0;
	background-color: var(--farbe-grau-hell);
	padding: 0 15px 60px 15px;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.mod_newslist .layout_latest p.more {
	position: absolute;
	top: auto;
	left: 15px;
	bottom: 0;
	margin: 0;
}
.mod_newslist .layout_latest figure {
	margin: 0 -15px;
}
.mod_newslist .layout_latest figure::after {
	position: absolute;
	top: -5%;
	left: 5%;
	right: auto;
	bottom: auto;
	width: 200px;
	height: 150px;
	display: block;
	content: '';
	overflow: hidden;
	background-image: url(/files/_tmpl/img/Doppel-Woosh-haltransparent.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.mod_newslist h2 {
	display: block;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.25;
}
.mod_newslist h2 a {
	text-decoration: none;
}
.mod_newslist h2 a:hover {
	text-decoration: underline;
}
.mod_newslist .layout_latest img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}


.mod_newsreader h2.subheadline {
	color: var(--farbe-text-standard);
}
.mod_newsreader figure {
	margin: 0 0 15px 0;
}
.mod_newsreader img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*  ==========  /News  ==========  */

.linkbox {
	border: 1px solid var(--farbe-grau);
	background-color: var(--farbe-grau-hell);
	padding: 15px;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
}
.linkbox p {
	margin-bottom: 0;
}


.content-text.kontaktdaten  p:last-child a {
	display: inline-block;
	padding: 5px 15px;
	background-color: var(--farbe-marke);
	color: #ffffff !important;
	font-size: 16px;
	font-size: 1rem;
	border: 1px solid var(--farbe-marke);
	border-radius: 15px 0 0 0;
	text-decoration: none;
	transition: all 0.3s;
}
.content-text.kontaktdaten p:last-child a:hover {
	background-color: var(--farbe-grau-hell);
	color: var(--farbe-marke) !important;
}

.content-text.casestudy {
	position: relative;
	background-color: var(--farbe-grau-hell);
	border: 1px solid var(--farbe-grau);
	border-radius: 30px 0 0 0;
	padding: 15px 30px 65px 30px;
	height: 100%;
}
.bg-hellgrau .content-text.casestudy {
	background-color: #ffffff;
}
.content-text.casestudy p {
	margin: 0;
}
.content-text.casestudy p:last-child a {
	position: absolute;
	bottom: 15px;
	display: inline-block;
	padding: 5px 15px;
	background-color: var(--farbe-marke);
	color: #ffffff !important;
	font-size: 16px;
	font-size: 1rem;
	border: 1px solid var(--farbe-marke);
	border-radius: 15px 0 0 0;
	text-decoration: none;
	transition: all 0.3s;
}
.content-text.casestudy p:last-child a:hover {
	background-color: var(--farbe-grau-hell);
	color: var(--farbe-marke) !important;
}





.handorgel__header__button {
	position: relative;
	font-size: 24px;
	font-size: 1.5rem;
	padding-left: 48px;
}
.handorgel__header__button::before {
	display: block;
	position: absolute;
	top: 16px;
	left: 16px;
	width: 32px;
	height: 32px;
	content: '+';
	font-size: 32px;
}
.handorgel__header--open .handorgel__header__button::before {
	content: '\2013';
}



/*
.bg-hellgrau .handorgel__header__button {
	background-color: transparent;
}
*/



/*  ==========  Flipcard 2026 ==========  */

/* ===== Flipcard Basis ===== */
.flipcard{
  position: relative;         /* für den floating Button */
	height: 100%;
  perspective: 1000px;
}

/* Der „Dreh-Kern“ */
.flipcard__inner{
  display: grid;              /* wichtig: Höhe = max(Front, Back) */
	height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

/* Front & Back liegen im selben Grid-Feld übereinander */
.flipcard__face{
  grid-area: 1 / 1;
  padding: 1.25rem;

  /* Reserve, damit Text nicht unter den Icon-Button läuft */
  padding-bottom: 3.75rem;

  border-radius: 5px;
  border: 1px solid var(--farbe-marke);
  box-shadow: 0 5px 15px rgba(0,0,0,.12);
  backface-visibility: hidden;
  display: grid;
}
.flipcard__face h3,
.flipcard__face h4 {
	font-weight: bold;
}


/* Rückseite um 180° drehen */
.flipcard__face--back{
  transform: rotateY(180deg);
}

/* Auto-Flip bei Hover (nur Maus) + sticky Flip via Klasse */
/*
.flipcard:hover .flipcard__inner,
.flipcard.is-flipped .flipcard__inner{
  transform: rotateY(180deg);
}
*/
/* Rückseite anzeigen: entweder Preview (Hover/Focus) oder manuell (Button) */
.flipcard.is-preview .flipcard__inner,
.flipcard.is-flipped .flipcard__inner{
  transform: rotateY(180deg);
}
/* Extra-Sicherheit: Button in 3D immer oben */
.flipcard__toggle{
  transform: translateZ(2px);
}

/* ===== Icon-Button (floating, unten rechts) ===== */
.flipcard__toggle{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 10;

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

  width: 42px;
  height: 42px;
  border-radius: 999px;

  border: 1px solid currentColor;
  background: var(--farbe-marke);
  color: #ffffff;
  cursor: pointer;
}

/* Fokus sichtbar lassen */
.flipcard__toggle:focus-visible{
  outline: 3px solid var(--farbe-gruen);
  outline-offset: 3px;
}
.flipcard__toggle[aria-expanded="true"]:focus-visible{
  outline: 3px solid var(--farbe-gruen);
  outline-offset: 3px;
}

/* Screenreader-only Text */
.visually-hidden{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce){
  .flipcard__inner{ transition: none; }
  .flipcard__face--back{ display: none; transform: none; }

  /* wenn per Button umgeschaltet */
  .flipcard.is-flipped .flipcard__face--back{ display: block; }

  /* Button im Flow statt overlay (oft angenehmer) */
  .flipcard__face{
    padding-bottom: 1.25rem;
    padding-right: 1.25rem;
  }
  .flipcard__toggle{
    position: static;
    margin-top: .75rem;
  }
}
.content-text.iconbox {
	position: relative;
	margin-top: 15px;
	margin-bottom: 15px;
/*
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto;
*/
	padding: 25px;
	height: 100%;
	border: 1px solid var(--farbe-gruen);
	background-color: var(--farbe-grau);
}
/*
	Bootstrap 4 Breakpoints
	xs     <  576px
	sm     >= 576px
	md     >= 768px
	lg     >= 992px
	xl     >= 1200px
*/

.flipcard__face--front {
	grid-template-rows: 66% 34%;
}
.flipcard h2 {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 18px;
	font-size: 1.125rem;
	font-weight: 300;
	text-align: center;
	text-transform: none;
	margin: 0;
}
.flipcard .rte {
	font-size: 18px;
	font-size: 1.125rem;
	text-align: center;
	margin: 0;
	line-height: 1.25;
	height: 100%;
	display: flex;
	grid-area: 2 / 1 / span 1 / span 1;
	flex-direction: column;
	justify-content: center;
}
.flipcard .flipcard__face--back .rte {
	grid-area: 1 / 1 / span 1 / span 1;
}
.flipcard .rte p {
	margin: 0;
}
.flipcard figure {
	grid-area: 1 / 1 / span 1 / span 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 30px 15px;
	margin: 0;
}
.flipcard  figure img {
	height: 100px;
	opacity: 1;
	max-height: none;
	width: auto;
	max-width: none;
}
@media screen and (min-width: 601px) and (max-width: 991px) {
	.flipcard h2 {
		font-size: 20px;
	}
	.flipcard p {
		font-size: 16px;
	}
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.flipcard__face--front {
		hyphens: auto;
	}
}

/*  ==========  /Flipcard 2026  ==========  */





/*  ==========  Druckereinstellungen  ==========  */

@media print {
	#myNavbar, 
	.mod_customnav, 
	.mod_navigation {
		display: none !important;
	}
}

/*  ==========  Druckereinstellungen  ==========  */




.mod_image_copyright_list {
	font-size: 16px;
	font-size: 1rem;
}
.mod_image_copyright_list > div > div {
	width: calc(20% - 1em);
}
@media screen and (max-width: 549px) {
	.mod_image_copyright_list {
		font-size: 14px;
		font-size: 0.875rem;
	}
	.mod_image_copyright_list > div > div {
		width: calc(33% - 1em);
	}
}