/*

********************************************************************************

Hueber.de CSS 2015

Stylesheets für Hueber.de

Version: 	3.01
Datum: 		01.07.2022

Erfordert: -

Hinweise:  -

Historie:	

3.01 (01.07.2022)	- UI-Button verbessert
					- Abstände bei Elementen im Grid verbessert
					- Hotspot-Buch überarbeitet
					- Contentdrawer überarbeitet
					- .flexbox-Klasse entfernt

3.0 (06.05.2022)	- Variablenstruktur überarbeitet

2.9 (09.06.2021)	- Abstände von Elementen überarbeitet
					- CSS-Variablen
					- Veraltete Regeln mit Browser-Präfixen entfernt
					- Verhalten der .emptynavicolumn-Klasse korrigiert,
					  wenn doch eine Navigation vorhanden ist

2.86 (10.09.2019) - Grid-Anzeige statt Flexbox für Anzeigegitter 
					(.flexbox CSS-Name bleibt zunächst bestehen)
				  - Veraltete Stile entfernt
				  - Webinar-Hervorhebung
				  - Breadcrumb überarbeitet
				  - Externe Site Links in Navigation optimiert

2.85 (18.07.2019) - Hueber WebUI Symbols Font und Symbole hinzugefügt

2.81 (08.03.2019) - Alte Body-Formatierungen in Legacy-Bereich überführt

2.8 (06.02.2019)  - Abstände von Headlines und Absätzen angepasst
				  - Code-Optimierungen für z.B. Formular-Eingabefelder
				  - Benachrichtigungszentrale hinzugefügt

2.7 (30.11.2018)  - Reihenfolge der Body-Elemente mittels Flex-Order umsortieren
				  - Dropdown-Stilvorlagen

2.6 (15.10.2018)  - Body-Formatierungen richten sich zukünftig nach den
					Einstellungen des übergeordneten Elements (z.B. .cols-lnl)

2.51 (27.09.2018) - Dashboards können bis zu 1280px breit sein

2.5 (05.09.2018)  - Erweiterung der Flexbox-Anzeige auf Bodys mit Listeneinträgen
					(Grid-Ansicht)
				  - Mobile Optimierungen

2.0 (26.03.2018)  - Zusammenlegung der verschiedenen Seiten-Templates und
					Optimierung der Header-Ausgabe mit Mobilnavigation

1.8 (23.09.2016)  - Div. Optimierungen und Hueber Forward Sans vorbereitet

1.7 (04.07.2016)  - Hotspot-Buch Version 2.5

1.6 (01.03.2016)  - Breadcrumb und Footer zu Flex geändert

1.3 (10.11.2015)  - Zielgruppen- und Startseiten-CSS in zg.css ausgelagert

1.2 (27.10.2015)  - Stile für Suche vorbereitet
				  - diverse Korrekturen

1.1 (07.05.2015)  - rem für body, #content und .kategorie eingeführt
					(em Fallback für Nicht-CSS3-Browser)
				  - Headline-Stile vollständig überarbeitet und redundante
					Angaben entfernt

1.02 (04.05.2015) - Body-Abstände auf normale Artikel-Abstände
					reduziert

1.01 (31.03.2015) - div. zusätzliche Stile

1.0 (23.03.2015)  - Abstände von h1-h4-Elementen vereinheitlicht
				  - h1-h4, p, ul, ol, table dunklere Textfarbe

0.3 (19.12.2014)  - LWS-spezifische Stile in lws.css ausgelagert

0.2 (05.12.2014)  - Service-Navigation vereinfacht

0.1 (14.11.2014)  - Alpha-Version

********************************************************************************

*/


/* Grundeinstellungen */

:root
{
	--mhv-sym-bg-color: transparent;
	--mhv-sym-border-color: #999;
	--mhv-sym-color: #999;

	/* Texte */

	--html-font-size: 16px;
	--body-font-size: .8rem;

	--headline-line-height: 1.2;

	--header-margin-top: 2em;
	--header-margin-bottom: 1.25em;

	--p-line-height: 1.5;
	--p-margin-top: 1.25em;
	--p-margin-bottom: 0em;

	--bg-text-indent-vertical: .8em;
	--bg-text-indent-horizontal: .9em;

	/* Formen und Maße */

	--medium-column-gap: 2.5em;
	--medium-row-gap: var(--medium-column-gap);

	--small-column-gap: calc(var(--medium-column-gap) / 2);
	--small-row-gap: var(--small-column-gap);

	--thin-line-width: .5px;
	--light-line-width: 1px;
	--medium-line-width: 2px;
	--thick-line-width: 4px;

	--round-button-border-radius: 9999px;
	--large-border-radius: 1em;
	--medium-border-radius: .5em;
	--small-border-radius: .2em;
	--squarish-button-border-radius: 6px;

	--boxshadow-dim-small: 0 .1em .2em;
	--boxshadow-dim-medium: 0 .15em .5em;
	--boxshadow-dim-large: 0 .2em 1.2em;

	--boxshadow-dim-soft-medium: 0 1px 10px 1px;

	--pg-header-height: 56px;
	--pg-searchbox-height: 56px;

	/* Farben */

	--mhv-logo-bg-color: #e0002f;

	--dark-content-color: #111;
	--darkmedium-content-color: #222;
	--mediumdark-content-color: #444;
	--medium-content-color: #555;
	--mediumlight-content-color: #666;
	--light-content-color: #9a9a9a;

	--dark-line-color: rgba(0, 0, 0, .75);
	--medium-line-color: rgba(0, 0, 0, .5);
	--mediumlight-line-color: rgba(0, 0, 0, .3);
	--light-line-color: rgba(0, 0, 0, .2);
	--extralight-line-color: rgba(0, 0, 0, .12);

	--active-color: rgb(224, 0, 47);
	--selected-color: rgb(224, 0, 47);
	--confirmation-color: rgb(25, 147, 32);
	--warning-color: rgb(255, 174, 0);
	--light-warning-color: rgb(255, 238, 129);

	--text-color: #444;

	--main-headline-color: var(--mediumdark-content-color);
	--headline-color: var(--darkmedium-content-color);
	--headline-cat-color: var(--mediumlight-content-color);

	--a-link-color: rgb(34, 60, 105);

	--error-color: #b62704;
	--error-bg-color: #fff1ed;

	--eurref-bg-color-rgbvalues: 11, 68, 187;
	--eurref-bg-color: rgb(var(--eurref-bg-color-rgbvalues));

	--highlight-color: var(--mhv-logo-bg-color);

	--navigation-main-color: var(--light-content-color);
	--navigation-color: var(--medium-content-color);
	--navigation-active-color: var(--dark-content-color);

	--breadcrumb-color: var(--medium-content-color);

	--dark-text-shadow-color:  rgba(0, 0, 0, 1);
	--medium-text-shadow-color: rgba(0, 0, 0, .6);
	--light-text-shadow-color: rgba(0, 0, 0, .3);

	--line-color: var(--light-line-color);

	--bg-color: rgba(0, 0, 0, .07);
	--medium-bg-color: rgba(0, 0, 0, .06);
	--light-bg-color: rgb(242, 242, 242);

	--titlearea-bg-color: transparent;

	--fixed-content-bg-color: white;

	--dark-overlay-bg-color: white;
	--medium-overlay-bg-color: rgba(255, 255, 255, .7);
	--light-overlay-bg-color: rgba(255, 255, 255, .5);

	--overlay-bg-color: rgba(255, 255, 255, .95);

	--cpnheader-header-text-shadow: none;

	--breadcrumb-bg-color: var(--light-bg-color);

	--article-table-bg-color: var(--medium-content-color);
	--article-table-thead-bg-color: var(--medium-overlay-bg-color);
	--article-table-td-bg-color: var(--overlay-bg-color);

	--article-table-labelrow-color: var(--dark-content-color);
	--article-table-labelrow-bg-color: var(--medium-overlay-bg-color);

	--sym-bg-color: var(--mhv-sym-bg-color);
	--sym-border-color: var(--mhv-sym-border-color);
	--sym-color: var(--mhv-sym-color);

	--outline-color: rgba(173, 187, 219, .6);
	--outline2-color: rgba(255, 149, 4, .9);

	--boxshadow-color: rgba(48, 48, 48, .65);
	--boxshadow-light-color: rgba(0, 0, 0, .1);

	/* Linien und Rahmen */

	--hairline: var(--thin-line-width) solid var(--line-color);
	--thinline: var(--light-line-width) solid var(--line-color);

	--input-hairlineborder: var(--thin-line-width) solid var(--input-border-color);
	--input-border: var(--light-line-width) solid var(--input-border-color);
	--input-transparent-border: var(--light-line-width) solid transparent;

	/* Schatten */

	--boxshadow-small: var(--boxshadow-dim-small) var(--boxshadow-color);
	--boxshadow-medium: var(--boxshadow-dim-medium) var(--boxshadow-color);
	--boxshadow-large: var(--boxshadow-dim-large) var(--boxshadow-color);

	--boxshadow-soft-medium: var(--boxshadow-dim-soft-medium) var(--boxshadow-light-color);

	/* Filter */

	--medium-blurred-overlay-bg-filter: blur(20px) saturate(150%);
	--light-blurred-overlay-bg-filter: blur(10px) saturate(140%);
}

@media (min-width: 768px)
{
	:root
	{
		--pg-header-height: 80px;
	}
}

*
{
	box-sizing: border-box;
}

html
{
	font-size: var(--html-font-size);
	height: 100%;
	width: 100%
}

body 
{
	background-color: white;
	font-family: var(--body-font);
	font-size: var(--body-font-size);
	margin: 0; 
	padding: 0;
	-webkit-text-size-adjust: none;
	width: 100%;
}

h1:not(.headarea),
h2:not(.headarea),
h3:not(.headarea),
h4:not(.headarea),
h1.headarea > .head,
h2.headarea > .head,
h3.headarea > .head,
h4.headarea > .head
{
	font-family: var(--headline-font);
}

h1:not(.headarea),
h2:not(.headarea),
h3:not(.headarea),
h1.headarea > .head,
h2.headarea > .head,
h3.headarea > .head
{
	color: var(--headline-color);
}

h4:not(.headarea),
h4.headarea > .head
{
	color: var(--text-color);
}

h1,
h2,
h3
{
	font-weight: 300;
	line-height: var(--headline-line-height);
}

h1
{
	font-size: 2em;
}

h2
{
	font-size: 1.7em;
}

h3
{
	font-size: 1.25rem;
}

h4
{
	font-weight: bold;
	font-size: 1.1rem;
}

h5,
h6
{
	display: none !important;
}

table
{
	font-size: inherit;
}

img
{
	max-width: 100%;
}

a
{
	color: inherit;
	text-decoration: none;
}

:focus,
body:not(.sbc) .searchhighlight
{
	outline-color: var(--outline-color);
	outline-offset: 2px;
	outline-style: solid;
	outline-width: 3px;
}

[contenteditable]:focus {
	outline-color: transparent;
	outline-style: solid;
	outline-width: 0px;
}

body:not(.sbc) .searchhighlight
{
	animation: highlightpulse 2.5s ease-out infinite;
}

@keyframes highlightpulse 
{ 
	50% 
	{ 
		outline-color: var(--outline-color); 
	}
}





/* Artikel */

.artikel
{
	width: 100%;
}

.body .artikel:not(:first-of-type)
{
	margin-top: var(--p-margin-top);
}

.body .artikel.interactionsbox:first-of-type,
.body:not(.liste) .artikel:first-of-type,
.body.grid > .content > .artikel:not(.interactionsbox)
{
	margin-top: 0;
}

.body:not(.grid):not(.news) > .content > .artikel.topteaser + .artikel,
.body:not(.grid):not(.news) > .content > .artikel + .artikel.topteaser
{
	margin-top: var(--p-margin-top);
}

.artikel > .contentarea
{
	width: 100%;
}



#content h1,
#content h2,
#content h3,
#content h4
{
	margin-bottom: 0;
	margin-top: 0;
}

.artikel h1:not(.headarea),
.artikel h2:not(.headarea),
.artikel h3:not(.headarea),
.artikel h4:not(.headarea)
{
	margin-top: var(--header-margin-top) !important;
}

.artikel ol,
.artikel p,
.artikel td,
.artikel th,
.artikel:not(.html):not(.interactionsbox) ul
{
	line-height: var(--p-line-height);
	margin-bottom: var(--p-margin-bottom);
	margin-top: var(--p-margin-top);
}

/* .artikel ol + ol,
.artikel ol + p,
.artikel:not(.html):not(.interactionsbox) ol + ul,
.artikel p + ol,
.artikel p + p,
.artikel:not(.html):not(.interactionsbox) p + ul,
.artikel ul + ol,
.artikel ul + p,
.artikel:not(.html):not(.interactionsbox) ul + ul,
.artikel .p + ol,
.artikel .p + p,
.artikel .p + ul,
.artikel * + .p
{
	margin-top: var(--p-margin-top);
} */

.artikel ol, 
.artikel:not(.html) ul:not(.liste):not(.hits) 
{
	padding-left: 1.4em;
}

.artikel ul > li > ul {
	list-style-image: none !important;
	margin-top: 0 !important;
}



.artikel > .contentarea + .refarea,
.artikel > .contentarea > .refarea:not(:first-child),
.artikel > a + .refarea,
.artikel > a > .contentarea > .refarea:not(:first-child)
{
	margin-top: var(--p-margin-top);
}


/* Spezielle Artikel */
/* Introtext am Beginn einer Seite (eines Bodys) */

.body.intro .artikel,
.artikel.bodyintro 
{
	font-size: 1.2em;
	--p-line-height: 1.6;
	--p-margin-bottom: 2em;
	width: 90%;
	min-width: 300px;
}

/* Präsentationskacheln */

.body.grid.highlight.productpresentation .content .artikel
{
	border-top: none;
	box-shadow: var(--boxshadow-soft-medium);
	padding: var(--bg-text-indent-vertical) var(--bg-text-indent-vertical);
}

/* Aktuelles-Meldungen (Raster- und Listenansicht) */

.body.news > .content > .artikel
{
	border-top: var(--thinline);
}

.body.news:not(.liste) > .content > .artikel
{
	padding-top: var(--p-margin-top) !important;
}

.body.news.liste > .content > .artikel
{
	border-top: var(--thinline);
	padding-top: .1em;
}

.body.news > .content > .artikel > .contentarea
{
	display: flex !important;
	flex-flow: row wrap;
	justify-content: space-between;
}

#content .body.news:not(.liste) > .content > .artikel header
{
	margin-top: inherit;
}

.body.news:not(.liste) > .content > .artikel > .contentarea > header
{
	flex: 0 0 100%;
	order: 1;
}

.body.news.liste > .content > .artikel > .contentarea > header
{
	flex: 0 0 82%;
	order: 2;
}

.body.news:not(.liste) > .content > .artikel > .contentarea:not(.topimage) > .imgarea
{
	flex: 0 1 33%;
	order: 3;
}

.body.news.liste > .content > .artikel > .contentarea > .imgarea
{
	flex: 0 1 15%;
	order: 1;
}

.body.news.liste > .content > .artikel > .contentarea > .imgarea > .image
{
	position: relative;
	overflow: hidden;
	width: 100%;
}

.body.news.liste > .content > .artikel > .contentarea > .imgarea > .image::before
{
	content: "";
	display: block;
	padding-top: 100%;
}

.body.news.liste > .content > .artikel > .contentarea > .imgarea > .image > .imagearea
{
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	text-align: left;
	top: 0;
}

.body.news.liste > .content > .artikel > .contentarea > .imgarea > .image > .imagearea img
{
	left: 0;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: auto !important;
}

.body.news.liste > .content > .artikel > .contentarea > .imgarea > .image > .imagearea img.landscape
{
	max-height: 100%;
	max-width: none;
}

.body.news.liste > .content > .artikel > .contentarea > .imgarea > .image > .imagearea img.portrait,
.body.news.liste > .content > .artikel > .contentarea > .imgarea > .image > .imagearea img:not(.landscape):not(.portrait)
{
	max-height: none;
	max-width: 100%;
}

.body.news:not(.liste) > .content > .artikel > .contentarea > .textarea
{
	order: 2;
}

.body.news.liste > .content > .artikel > .contentarea > .textarea
{
	order: 3;
	padding-left: 18%;
}

.body.news:not(.liste) > .content > .artikel > .contentarea:not(.topimage) > .imgarea + .textarea
{
	flex: 0 1 61%;
	order: 2;
}

.body.news > .content > .artikel:not(.large) > .contentarea.topimage > .imgarea
{
	flex: 0 0 100%;
}

.body.news > .content > .artikel:not(.large) > .contentarea.topimage > .imgarea img
{
	width: 100%;
}

.body.news > .content > .artikel:not(.large) > .contentarea.topimage > .imgarea + .textarea
{
	margin-top: 1em;
}

.body.news > .content > .artikel > .contentarea > .textarea > p:first-child
{
	margin-top: 0;
}

.body.news:not(.liste) > .content > .artikel > .contentarea.leftimage > header,
.body.news:not(.liste) > .content > .artikel > .contentarea.topimage > header
{
	order: 1;
}

.body.news:not(.liste) > .content > .artikel > .contentarea.leftimage > .imgarea,
.body.news:not(.liste) > .content > .artikel > .contentarea.topimage > .imgarea
{
	order: 2;
}

.body.news:not(.liste) > .content > .artikel > .contentarea.leftimage > .textarea,
.body.news:not(.liste) > .content > .artikel > .contentarea.topimage > .textarea
{
	order: 3;
}

.body.news:not(.liste) > .content > .artikel.large > .contentarea > .imgarea
{
	flex: 0 1 47%;
	order: 1;
}

.body.news:not(.liste) > .content > .artikel.large > .contentarea > .imgarea + .combinedarea
{
	flex: 0 1 47%;
	order: 2;
}



/* Listeneinträge */

.liste .text ol,
.liste .text p,
.liste .text ul
{
	line-height: var(--p-line-height);
	margin-bottom: 0;
	margin-top: 0;
}

.liste .text ol,
.liste .text p,
.liste .text .p,
.liste .text ul
{
	margin-top: var(--p-margin-top);
}







/* HTML-Head/Body usw. */

body.dashboard
{
	background-color: var(--bg-color);
}

/* Hinweis zur Verwendung von Cookies */

#cookienotice
{
	background-color: #888;
	bottom: 0;
	color: white;
	display: block;
	font-weight: bold;
	line-height: var(--p-line-height);
	opacity: 1;
	padding: .5em 1em .2em 1em;
	position: fixed;
	text-align: center;
	transition: bottom 1.5s ease, opacity .5s ease;
	width: 100%;
	z-index: 999998;
}

#cookienotice.dismissed
{
	bottom: -100%;
	opacity: 0;
	pointer-events: none;
}

#cookienotice ~ #pagecontent #globalfooter
{
	margin-bottom: 5rem;
}

#cookienotice > p
{
	align-items: center;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 1280px;
}

@media (max-width: 567px)
{
	#cookienotice > p
	{
		flex-flow: row wrap;
	}
}

#cookienotice > p > :first-child
{
	flex: 1 1 auto;
	text-align: left;
}

#cookienotice > p > :not(:first-child)
{
	flex: 0 0 auto;
	margin-left: .5em;
}

/* Seite */

#pagecontent
{
	color: var(--text-color);
	display: flex;
	flex-flow: row wrap;
	margin: 0 auto;
	max-width: 1024px;
	min-width: 320px;
	position: relative;
	width: 96%;
}

body.wide #pagecontent,
body.dashboard #pagecontent
{
	max-width: 1440px !important;
}

/* Bereiche */

#content
{
	order: 15;
	width: 100%;
}

/* Overlay zum Abdecken der Seite z.B. bei Navi oder Dialogen */

#layer
{
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: .4s opacity ease, .4s background-color ease;
	z-index: 100000;
}

body.navi #layer,
body.drawer.modal #layer
{
	-webkit-backdrop-filter: var(--medium-overlay-bg-filter);
	backdrop-filter: var(--medium-overlay-bg-filter);
	background-color: rgba(0, 0, 0, .35);
}

body:not(.navi):not(.drawer.modal) #layer
{
	-webkit-backdrop-filter: var(--light-blurred-overlay-bg-filter);
	backdrop-filter: var(--light-blurred-overlay-bg-filter);
	background-color: rgba(0, 0, 0, .1);
	/* background-color: rgba(255, 255, 255, .6); */
}

@media (min-width: 768px)
{
	body:not(.drawer):not(.layer) #layer
	{
		opacity: 0;
		pointer-events: none;
	}
}

@media (max-width: 767px)
{
	body:not(.navi):not(.drawer):not(.layer) #layer
	{
		opacity: 0;
		pointer-events: none;
	}

	body.navi #layer
	{
		cursor: pointer;
		opacity: 1;
	}
}

body.drawer #layer,
body.layer #layer
{
	opacity: 1;
}

body.drawer:not(.modal) #layer,
body.layer #layer
{
	cursor: pointer;
}

/* Dialogboxen */

#drawer
{
	background-color: var(--overlay-bg-color);
	border-radius: var(--large-border-radius);
	order: 1;
	overflow-y: scroll;
	top: calc(50vh + var(--pg-header-height));
	position: fixed;
	z-index: 200000;
}

@media (max-width: 567px)
{
	#drawer
	{
		bottom: 8px;
		left: 8px;
		min-width: 304px;
		padding: .5rem;
		right: 8px;
		top: var(--pg-header-height);
	}
}

@media (min-width: 568px)
{
	#drawer
	{
		box-shadow: var(--boxshadow-large);
		left: 50vw;
		top: calc((100vh + var(--pg-header-height))/2);
		transform: translate(-50%, -50%);
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	#drawer
	{
		max-height: calc(96vh - var(--pg-header-height));
		max-width: 98vw;
		padding: 1rem;
		top: calc((100vh + var(--pg-header-height))/2);
		width: 90%;
	}
}

@media (min-width: 768px)
{
	#drawer
	{
		max-height: 96vh;
		max-width: 832px;
		padding: 2rem;
		top: 50vh;
		width: 80%;
	}
}

body:not(.drawer) #drawer
{
	opacity: 0;
	pointer-events: none;
}

body.drawer #drawer
{
	opacity: 1;
}

/* TO-DO: Dialogboxen in #drawer integrieren */
/* Dialogbox */

.dialogbox
{
	background-color: white;
	box-shadow: var(--boxshadow-medium), 0 0 3em #999;
	margin: 2em auto;
	max-width: 630px;
	padding: 1em 1.4em;
	width: 80%;
}

@media (max-width: 567px) 
{
	.dialogbox
	{
		background-color: transparent;
		border-bottom: 1px solid #bbb;
		border-top: 1px solid #bbb;
		box-shadow: none;
		margin: 3em auto;
		max-width: none;
		padding: 0 0 1em 0;
		width: 100%;
	}

	body.dashboard #login > .dialogbox
	{
		border: 0;
		margin: .5rem auto !important;
	}
}

#login li.buttonbar
{
	padding-bottom: 0;
}

#login li.warning
{
	margin-top: .9em !important;
}

.form li.warning > :first-child
{
	border: 1px solid var(--line-color);
	border-radius: var(--medium-border-radius);
	display: inline-block;
	line-height: 1.3;
	padding: .2em .6em;
}

.form li.warning.hueberinteraktiv > :first-child
{
	background-color: var(--error-color);
	border-color: var(--error-color);
	color: white !important;
}

.form li.warning > :first-child:before
{
	content: "\F0175";
	font-family: var(--symbol-font);
	font-style: normal;
	font-size: 1.4em;
	font-weight: normal;
	padding-right: .3em;
}

.form li.warning:not(.hueberinteraktiv) > :first-child:before
{
	color: var(--error-color) !important;
}

/* Kopf- und Fußzeile, Infoheader (Top Level Navi) und Navigation */

#servicenavi > ul,
#navibar > ul,
#globalfooter > ul
{
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/* body:not(.sbc) #infoheader a,
#drawer a,
#servicenavi a,
#navibar a,
#navi a,
#content a,
#globalfooter a
{
	color: inherit;
	text-decoration: none;
} */

#servicenavi a:hover,
#globalfooter a:hover
{
	color: #666;
}

/* Kopfzeile */

#globalbody,
#globalheader,
#toplevelnavi
{
	flex: 0 0 100%;
	min-width: 320px;
}

#globalbody
{
	border-bottom: var(--hairline);
	border-top: var(--hairline);
	padding: .3rem 0;
}

#globalbody > .body
{
	background-color: var(--light-warning-color);
	padding: .3rem;
}

#globalbody .contentarea > p:first-child,
#globalbody .contentarea > ol:first-child,
#globalbody .contentarea > ul:first-child
{
	margin-top: 0;
}

@media (max-width: 419px)
{
	#globalbody
	{
		font-size: .85em;
	}
}

@media (max-width: 767px)
{
	#globalbody
	{
		margin: .3rem 0;
		order: 2;
	}
}

@media (min-width: 768px)
{
	#globalbody
	{
		margin: .3rem 0;
	}
}

/* Global Header */

#globalheader
{
	align-items: start;
	display: grid;
	min-height: var(--pg-header-height);
}

img#hueberlogo
{
	background-color: var(--mhv-logo-bg-color);
	background-image: url(/assets/images/hueberdesignettrans.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
	height: 34px;
	width: 120px;
}

@media (max-width: 767px)
{
	#globalheader,
	body.sbc #globalheader + #breadcrumb + #searchboxcontainer
	{
		padding: 8px;
	}

	#globalheader,
	#globalheader ~ #searchboxcontainer
	{
		background-color: var(--overlay-bg-color);
		-webkit-backdrop-filter: var(--medium-blurred-overlay-bg-filter);
		backdrop-filter: var(--medium-blurred-overlay-bg-filter);
		grid-template-columns: 140px auto 40px;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 80000;
	}

	#globalheader .uibutton > i.wui
	{
		font-size: 2em;
	}

	#menubt,
	#opensearchbt
	{
		height: 38px;
		justify-self: end;
		width: 38px;
	}

	#opensearchbt
	{
		opacity: 1;
		transition: opacity .4s ease;

	}

	#opensearchbt.active
	{
		opacity: 0;
		pointer-events: none;
	}

	#globalheader > #searchboxcontainer
	{
		grid-column: span 3;
		justify-self: stretch;
	}


	#globalheader ~ #searchboxcontainer
	{
		top: var(--pg-header-height);
	}
}

@media (min-width: 768px)
{
	#globalheader
	{
		grid-template-columns: 140px auto;
		grid-template-rows: 50% 50%;
	}

	body.nobreadcrumb #globalheader
	{
		border-bottom: var(--hairline);
	}

	#servicenavi
	{
		color: var(--navigation-main-color);
		justify-self: end;
		margin: .7rem 0;
	}

	#servicenavi ul
	{
		align-items: center;
		display: flex;
	}

	#servicenavi li
	{
		padding: 0;
	}

	#servicenavi li:first-child
	{
		margin-left: 0;
	}

	#servicenavi li:not(:first-child)
	{
		margin-left: 2em;
	}

	#globalheader > #searchboxcontainer
	{
		align-self: end;
		grid-column-end: -1;
		justify-self: end;
	}
}

.breadcrumb
{
	color: var(--breadcrumb-color);
	justify-content: space-between;
	overflow: hidden;
}

.breadcrumb > ul:first-of-type
{
	align-items: center;
	display: flex;
}

.breadcrumb > ul
{
	/* line-height: 1.1em; */
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.breadcrumb > ul:first-of-type
{
	flex: 0 2 auto;
}

@media (max-width: 767px)
{
	.breadcrumb > ul:first-of-type
	{
		display: block;
		margin: 0.5em 0;
		padding: 0;
	}

	.breadcrumb:not(.global) ul > li
	{
		line-height: 1.5;
	}

	.breadcrumb > ul:first-of-type > li
	{
		display: inline-block !important;
		align-items: center;
		flex: 0 2 auto;
		padding: .5em .25em .5em 0;
	}

	.breadcrumb > ul li:not(:last-child)
	{
		background: transparent;
	}

	.breadcrumb > ul li:not(:first-child)::before
	{
		content: "\F0083";
		font-family: var(--symbol-font);
		font-style: normal;
		font-size: 1.5em;
		font-weight: normal;
		padding-right: .3em;
	}

	.breadcrumb > ul li:first-child
	{
		flex: 0 0 auto;
	}

	.breadcrumb:not(.global) > ul li.active
	{
		color: var(--navigation-active-color);
	}

	.breadcrumb a
	{
		color: inherit;
		text-decoration: none;
	}
}

@media (min-width: 768px)
{
	.breadcrumb,
	.breadcrumb > ul,
	.breadcrumb > ul > li
	{
		height: 2.8em;
	}

	.breadcrumb:not(.global)
	{
		border: var(--hairline);
	}

	.breadcrumb > ul:first-of-type > li
	{
		display: flex !important;
		align-items: center;
		flex: 0 2 auto;
		position: relative;
	}

	.breadcrumb > ul > li
	{
		padding-left: .5em;
		margin-right: 1.5em;
	}	

	.breadcrumb > ul li:first-child
	{
		flex: 0 0 auto;
	}
	
	#breadcrumb > ul li:first-child a.bcghome > span:first-child
	{
		display: none;
	}
	
	#breadcrumb > ul li:first-child a.bcghome::before
	{
		content: "\0039";
		display: inline-block;
		font-family: var(--symbol-font);
		font-style: normal;
		font-weight: normal;
	}
	
	.breadcrumb > ul > li > *
	{
		color: inherit;
		text-decoration: none;
		z-index: 2;
	}

	#breadcrumb,
	#breadcrumb + #searchboxcontainer
	{
		border-bottom: var(--hairline);
		border-top: var(--hairline);
	}

	#breadcrumb
	{
		align-items: center;
		display: flex;
		flex: 2 1 calc(100% - 240px);
		height: 3.5em;
		overflow: hidden;
		padding-bottom: .2rem;
		padding-top: .2rem;
	}

	#breadcrumb > ul
	{
		overflow: hidden;
	}

	.breadcrumb > ul > li:first-child
	{
		padding-left: .5em;
	}
	
	body:not(.sbc) .breadcrumb > ul li:not(:first-child)::before
	{
		background-color: white;
		content: "";
		display: block;
		height: 60px;
		position: absolute;
		left: -20px;
		width: 20px;
		z-index: 0;
	}

	body:not(.sbc) .breadcrumb > ul li::after
	{
		background-color: white;
		content: "";
		display: block;
		height: 40px;
		position: absolute;
		right: -1.1em;
		transform: rotate(45deg) skew(12deg, 12deg);
		width: 40px;
		z-index: 1;
	} 

	body:not(.sbc) .breadcrumb > ul li:not(:last-child)::after
	{
		box-shadow: 1.2px -1.2px .4px #ccc;
	} 
	
	body:not(.touch) .breadcrumb > ul:first-of-type > li:hover,
	body:not(.touch):not(.sbc) .breadcrumb > ul li:not(:first-child):hover::before,
	body:not(.touch):not(.sbc) .breadcrumb > ul li:hover::after
	{
		background-color: #e8e8e8;
	}
	
	.breadcrumb a
	{
		padding-bottom: 1.6em;
		padding-top: 1.6em;
	}

	.breadcrumb a.bcghome
	{
		padding-left: .2em;
		padding-right: .2em;
	}
}

/* Suchen-Feld */

.sitesearchbox
{
	align-items: center;
	display: flex;
	flex-flow: row wrap;
}

.sitesearchbox > form
{
	align-content: stretch;
	align-items: center;
	display: flex;
	flex: 0 0 100%;
	margin-bottom: 0;
	position: relative;
}

.sitesearchbox > form input[type="search"]
{
	border: var(--input-hairlineborder);
	width: calc(100% - 32px);
}

.sitesearchbox > form button[name="submitbt"]
{
	flex: 0 0 auto;
}

@media (max-width: 767px)
{
	#searchboxcontainer
	{
		flex: 1 1 100%;
		height: var(--pg-searchbox-height);
		transition: max-height .8s ease, padding .8s ease;
	}

	body.sbc #searchboxcontainer
	{
		max-height: var(--pg-searchbox-height);
		overflow: visible;
		padding: 8px;
	}

	body:not(.sbc) #searchboxcontainer
	{
		max-height: 0;
		overflow: hidden;
		padding: 0;
	}

	body #searchboxcontainer .sitesearch
	{
		transition: opacity .4s ease-out .8s;
	}

	body:not(.sbc) #searchboxcontainer .sitesearch
	{
		opacity: 0;
	}

	body.sbc #searchboxcontainer .sitesearch
	{
		opacity: 1;
	}
}

@media (min-width: 768px)
{
	#searchboxcontainer
	{
		align-content: stretch;
		/* padding-bottom: .2rem;
		padding-top: .2rem; */
	}

	body:not(.nobreadcrumb) #searchboxcontainer
	{
		flex: 0 0 240px;
	}

	body.nobreadcrumb #searchboxcontainer
	{
		margin-bottom: 18px;
		margin-top: 9px;
		width: 280px;
	}
}

/* Suchen-Feld Drop Down */

@media (min-width: 768px)
{
	#searchboxcontainer.fixed
	{
		background: transparent;
		border-bottom: 0 !important;
		border-top: 0 !important;
		max-width: 1024px !important;
		min-width: 320px;
		position: fixed;
		top: 8px;
		width: 96% !important;
		z-index: 90000;
	}

	.sitesearchbox > form div.dropdown:not(.active)
	{
		display: none;
	}

	.sitesearchbox.fixed > form
	{
		flex: 0 0 240px;
		margin-left: auto;
		background-color: rgba(255, 255, 255, .9);
		border-radius: var(--large-border-radius);
		box-shadow: 0 0 5px 2px rgba(255, 255, 255, .9);
	}

	body.nobreadcrumb .sitesearchbox.fixed > form
	{
		flex: 0 0 280px;
	}
}

.sitesearchbox > form div.dropdown
{
	background-color: var(--overlay-bg-color);
	border-radius: 0 0 var(--medium-border-radius) var(--medium-border-radius);
	border: 0;
	max-height: calc(95vh - 40px);
	overflow-y: scroll;
	top: 110%;
	width: 100%;
}

.sitesearchbox > form div.dropdown p.qsrubr
{
	background-color: #898989;
	color: white;
	cursor: pointer;
	margin-bottom: 0;
	margin-top: 0;
	padding: .3em .6em;
}

.sitesearchbox > form div.dropdown p.qsrubr:first-of-type
{
	padding: .4em .6em .3em .6em;
}

.sitesearchbox > form div.dropdown p.qsrubr:not(:first-of-type)
{
	margin-top: .3em;
}

.sitesearchbox > form div.dropdown p.qsrubr .badge,
.sitesearchbox > form div.dropdown p.qsrubr .notification
{
	background-color: white;
	padding: .08rem .4rem .1rem .4rem;
}

.sitesearchbox > form div.dropdown ul
{
	list-style-type: none;
	margin: 0;
	padding: 0 0 1px 0;
}

.sitesearchbox > form div.dropdown ul.qsfixedfnc
{
	background-color: var(--bg-color);
	border-top: .5px solid #999;
	margin: 0;
	padding: 0 0 1px 0;
}

.sitesearchbox > form div.dropdown ul > li
{
	padding: 1px;
}

.sitesearchbox > form div.dropdown ul > li:not(:last-child)
{
	border-bottom: .5px dotted #bbb;
	margin-bottom: 1px;
}

.sitesearchbox > form div.dropdown p.hidden + ul,
.sitesearchbox > form div.dropdown p:not(.open) + ul > li:not(.moreitems):nth-child(1n+6),
.sitesearchbox > form div.dropdown p.open + ul > li.moreitems
{
	display: none;
}

.sitesearchbox > form div.dropdown ul > li.nolink
{
	font-size: .85em;
	padding: .3em .6em;
}

.sitesearchbox > form div.dropdown ul > li.moreitems
{
	font-weight: bold;
	text-align: center;
}

.sitesearchbox > form div.dropdown ul > li.moreitems > span
{
	background-color: #777;
	border-radius: var(--round-button-border-radius);
	color: white;
	cursor: pointer;
	display: inline-block;
	height: 16px;
	line-height: 1.3;
	width: 16px;
}

.sitesearchbox > form div.dropdown ul > li a
{
	color: inherit;
	display: inline-block;
	padding: .4em .6em;
	text-decoration: none;
	width: 100%;
}

.sitesearchbox > form div.dropdown ul > li.hascover a
{
	display: grid;
	grid-template-columns: [image] 56px [text] auto;
	gap: .8em;

}

.sitesearchbox > form div.dropdown ul > li a span
{
	display: block;
}

.sitesearchbox > form div.dropdown ul > li a span.image
{
	grid-column: image;
	grid-row: 1;
}

.sitesearchbox > form div.dropdown ul > li a span.text
{
	align-self: center;
	font-style: inherit;
	grid-column: text;
	grid-row: 1;
}

.sitesearchbox > form div.dropdown ul > li a span.title
{
	font-style: inherit;
}

.sitesearchbox > form div.dropdown ul > li a span.descr
{
	font-size: .85em;
}

.sitesearchbox > form div.dropdown ul.qsfixedfnc > li a
{
	color: #555;
	font-weight: bold;
}

.sitesearchbox > form div.dropdown ul > li a:hover
{
	background-color: #ddd;
	cursor: pointer;
}

/* Infoheader */

#toplevelnavi
{
	clear: both;
	color: var(--navigation-color);
	order: 5;
	position: relative;
}

body.legacy #toplevelnavi
{
	margin-bottom: 2em; 
	margin-top: 1em;
}

body:not(.sbc) #toplevelnavi
{
	margin-top: .5rem;
	min-height: 132px;
}

#toplevelnavi #lwssymbol
{
	pointer-events: none;
}

#infoheader
{
	background-position: left top;
	background-repeat: no-repeat;
	background-size: contain;
	height: 120px;
	width: 26%;
}

#infoheader img[src*="bug.gif"]
{
	height: 100%;
	width: 100%;
}

body:not(.sbc) #infoheader p
{
	left: -100%;
	margin: 0;
	position: absolute;
	text-indent: -10000px;
}

#navibar
{
	border-bottom: var(--hairline);
	bottom: 2.5rem;
	position: absolute;
	right: 0;
	width: 73%;
}

#navibar > ul
{
	align-items: end;
	display: flex;
	flex-flow: row wrap;
	font-family: var(--headline-font);
	font-size: 1.42rem;
}

#navibar > ul > li
{
	padding-bottom: .27rem;
	padding-top: .18rem;
}

#navibar > ul > li:not(:last-child)
{
	margin-right: 4.5rem;
}

#navibar > ul > li
{
	border-bottom: 3px solid transparent;
}

#breadcrumb > ul li:last-child,
.breadcrumb:not(.global) > ul li.active,
.introscreen #navibar > ul > li#tointrobt,
.infosection #navibar > ul > li#toinfobt,
.lehrensection #navibar > ul > li#tolehrenbt,
.lernensection #navibar > ul > li#tolernenbt,
.mediatheksection #navibar > ul > li#tomediathekbt,
#navibar > ul > li.active
{
	color: var(--navigation-active-color);
}

.introscreen #navibar > ul > li#tointrobt,
.infosection #navibar > ul > li#toinfobt,
.lehrensection #navibar > ul > li#tolehrenbt,
.lernensection #navibar > ul > li#tolernenbt,
.mediatheksection #navibar > ul > li#tomediathekbt,
#navibar > ul > li.active
{
	border-bottom-color: var(--navigation-active-color);
}

#navibar > ul > li:not(.static):not(.sixcmspage)
{
	transition: color .3s, border-bottom-color .2s; 
}

#navibar > ul > li:not(.static):not(.sixcmspage):hover
{
	color: #555;
	border-bottom-color: #a9a9a9;
}

#navibar > ul > li:not(.static):not(.sixcmspage) > a
{
	display: inline-block;
	transition: all .2s; 
}

body:not(.touch) #navibar > ul > li:not(.static):not(.sixcmspage):hover > a
{
	transform: scale(1.02) translateY(-.08em);
}

/* Navigation links */

@media (max-width: 767px)
{
	#navi 
	{
		align-items: stretch;
		align-content: start;
		background-color: var(--overlay-bg-color);
		-webkit-backdrop-filter: var(--medium-blurred-overlay-bg-filter);
		backdrop-filter: var(--medium-blurred-overlay-bg-filter);
		box-shadow: var(--boxshadow-medium);
		color: #555;
		display: flex;
		flex-flow: row wrap;
		justify-content: start;
		left: -420px;
		height: 100%;
		max-width: 414px;
		min-width: 320px;
		overflow-y: scroll;
		position: fixed;
		top: 0;
		transition: left .2s ease-out;
		width: 100%;
		z-index: 150500;
	}
	
	body.navi #navi
	{
		left: 0;
	}

	#navi h1,
	#navi h2,
	#navi h3,
	#navi h4
	{
		border-bottom: 1px solid #bbb;
		margin-bottom: 0 !important;
		margin-top: 0 !important;
		padding: .6rem .4rem;
	}

	#navi > ul,
	#navi > div.servicenavi
	{
		flex: 1 1 100%;
	}

	#navi > ul li
	{
		border-bottom: 1px solid white;
		margin-bottom: 0 !important;
		margin-top: 0 !important;
		padding: 0;
	}

	#navi > ul > li[data-subids]:not(.open) > a::after
	{
		color: #999;
		content: '\F0031';
		font-family: var(--symbol-font);
		font-style: normal;
		font-weight: normal;
		float: right;
		padding-right: .4rem;
	}

	#navi > ul li:last-child
	{
		border-bottom: none;
	}

	#navi > ul > li > ul
	{
		border-left: 16px solid rgba(255, 255, 255, .6);
		margin-left: 0;
	}

	#navi > ul > li > ul li > ul
	{
		margin-left: 16px;
	}

	#navi > ul li > *:not(ul):not(.switch):not(.cmsfrontend)
	{
		display: inline-block;
		padding: .7rem .4rem;
		width: calc(100% - .8rem);
	}

	#navi > ul li > *:not(ul):not(.switch):not(.cmsfrontend):not(:first-child)
	{
		padding-top: 0;
	}

	#navi > ul li > .switch
	{
		display: inline-block;
		margin: .5rem .3rem;
	}

	#navi > ul ul > li
	{
		border-bottom: none;
		color: #333;
		border-top: 1px solid white;
		padding-left: 0 !important;
	}

	#navi.help
	{
		float: none;
		width: 100%;
	}

	#navi.help > ul > li
	{
		margin-bottom: .4em;
	}

	#navi:not(.weakmobileonly) + #content 
	{
		background-color: white;
		float: none;
		position: static;
		width: 100%;
	}

	#navi > .breadcrumb.global.mobileonly,
	#navi > div.servicenavi
	{
		font-size: .85em;
		padding-left: 8px;
	}

	#navi > .breadcrumb.global.mobileonly,
	#navi > #closebtcontainer
	{
		background-color: var(--light-bg-color) !important;
		border-bottom: var(--thinline);
	}

	#navi > div.servicenavi
	{
		padding-right: 8px;
	}

	#navi > ul + div.servicenavi
	{
		border-top: var(--thinline);
	}

	#navi > div.servicenavi > ul
	{
		display: flex;
		flex-flow: row wrap;
		list-style: none;
		padding: 0;
	}

	#navi > div.servicenavi > ul > li
	{
		padding: .5em .5em .5em 0;
	}

	#navi > div.servicenavi > ul > li:not(:last-child)::after
	{
		content: "|";
		margin-left: .5em;
	}
}

@media (max-width: 461px)
{
	#navi > .breadcrumb.global.mobileonly
	{
		flex: 0 1 calc(100% - 44px);
	}

	#navi > #closebtcontainer
	{
		flex: 0 0 28px;
		padding: 8px;
	}
}

@media (min-width: 462px) and (max-width: 767px)
{
	#navi > .breadcrumb.global.mobileonly
	{
		flex: 1 1 auto;
	}

	#navi > #closebtcontainer
	{
		display: none;
	}
}

@media (min-width: 768px)
{
	#navi
	{
		clear: both;
		float: left;
		margin-right: 4%;
		order: 10;
		width: 23%;
	}

	#navi > ul
	{
		font-size: 1rem;
		margin-top: 0;
	}
	
	#navi li:not(.inactive):not(.selected) > a
	{
		display: inline-block;
	}

	#navi > ul > li 
	{
		margin-bottom: 1.4em
	}
	
	#navi > ul > li ul
	{
		font-size: .9em;
		margin-left: 1em;
	}
	
	#navi > ul > li ul > li
	{
		margin-top: 1.2em
	}

	#navi > #closebtcontainer
	{
		display: none;
	}
}

#navi.help
{
	margin-right: 0;
	width: auto;
}

#navi > ul,
#navi > ul ul
{
	color: #444;
	list-style: none;
	padding: 0;
}

@media screen and (min-width: 768px)
{
	#navi li
	{
		display: list-item !important;
	}
}

#navi li > span
{
	color: #bbb;
}

#navi li.selected
{
	color: var(--navigation-active-color);
}

#navi li:not(.selected) > a
{
	/* display: inline-block; */
	transition: all .2s; 
	width: 100%;		/* Needed to scale content correctly in FF */ 
}

body:not(.touch) #navi li:not(.selected):hover > a
{
	color: #111;
	transform: translateX(.08em);
}

#navi li.externalsite > a::after
{
	color: #777;
	content: "\A0\006c";
	font-family: var(--symbol-font);
	font-style: normal;
	font-weight: normal;
}

/* Content */

#content
{
	font-size: 1.1em;
	font-size: .9rem;
}

body.nonavicolumn:not(.splash):not(.dashboard) #content
{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

@media (min-width: 768px)
{
	#navi:not(.weakmobileonly) + #content,
	body.emptynavicolumn :not(#navi):not(.weakmobileonly) + #content
	{
		float: right;
		width: 73%;
	}

	body.emptynavicolumn :not(#navi) + #content,
	body.emptynavicolumn #navi.weakmobileonly + #content
	{
		margin-left: 27%;
	}
}

#content a:not(.button):not(.uibutton),
#content .artikel > * .internallink,
#content .artikel > * .externallink,
#drawer a:not(.button):not(.uibutton)
{
	color: var(--a-link-color);
}

#content .body.slider .artikel > * a,
#content .artikel.haslink > a
{
	color: inherit;
}

#content a.invisible
{
	color: inherit !important;
}

/* Header in Bodys, Artikeln und Listen */

#content .body > header,
#content .body .artikel header
{
	margin-bottom: var(--header-margin-bottom);
	margin-top: var(--header-margin-top);
}

#content .body:first-child > header,
#content .body:first-child > .content:first-child > .artikel:first-child header,
#content .artikel .image + .contentarea > header
{
	margin-top: 0;
}

@media (min-width: 420px)
{
	body.cols-lm #content .body:nth-of-type(0n + 2) > header,
	.body.cols-lm > .body:nth-of-type(0n + 2) > header,
	body.cols-lnl #content .body:nth-of-type(0n + 2) > header,
	.body.cols-lnl > .body:nth-of-type(0n + 2) > header,
	body.cols-lnl #content .body:nth-of-type(0n + 3) > header,
	.body.cols-lnl > .body:nth-of-type(0n + 3) > header
	{
		margin-top: 0;
	}
}

@media (min-width: 576px)
{
	body.cols-nn #content > .body:nth-of-type(0n+2) > header,
	.body.cols-nn > .body:nth-of-type(0n+2) > header,
	body.cols-ml #content > .body:nth-of-type(0n+1) > header,
	.body.cols-ml > .body:nth-of-type(0n+1) > header,
	body.cols-fm-ml #content > .body:nth-of-type(0n+2) > header,
	.body.cols-fm-ml > .body:nth-of-type(0n+2) > header,
	body.cols-ml #content > .body:nth-of-type(0n+2) > header,
	.body.cols-ml > .body:nth-of-type(0n+2) > header,
	body.cols-fm-ml #content > .body:nth-of-type(0n+3) > header,
	.body.cols-fm-ml > .body:nth-of-type(0n+3) > header
	{
		margin-top: 0;
	}
}

.body ul.liste + header
{
	margin-top: var(--header-margin-top);
}







.body.dynamic > .content > .artikel:last-of-type + ul.liste
{
	padding-top: .8em;
}





body.cols-lnl #content > .body:nth-of-type(0n + 1) h1,
.body.cols-lnl > .body:nth-of-type(0n + 1) h1,
body.cols-lm #content > .body:nth-of-type(0n + 1) h3,
.body.cols-lm > .body:nth-of-type(0n + 1) h1,
body.cols-lnl #content > .body:nth-of-type(0n + 3) h1,
.body.cols-lnl > .body:nth-of-type(0n + 3) h1
{
	font-size: 1.5rem;
}

body.cols-lnl #content > .body:nth-of-type(0n + 1) h2,
.body.cols-lnl > .body:nth-of-type(0n + 1) h2,
body.cols-lm #content > .body:nth-of-type(0n + 1) h2,
.body.cols-lm > .body:nth-of-type(0n + 1) h2,
body.cols-lnl #content > .body:nth-of-type(0n + 3) h2,
.body.cols-lnl > .body:nth-of-type(0n + 3) h2
{
	font-size: 1.25rem;
}

body.cols-lnl #content > .body:nth-of-type(0n + 1) h3,
.body.cols-lnl > .body:nth-of-type(0n + 1) h3,
body.cols-lm #content > .body:nth-of-type(0n + 1) h3,
.body.cols-lm > .body:nth-of-type(0n + 1) h3,
body.cols-lnl #content > .body:nth-of-type(0n + 3) h3,
.body.cols-lnl > .body:nth-of-type(0n + 3) h3
{
	font-size: 1.1rem;
}

body.cols-lnl #content > .body:nth-of-type(0n + 1) h4,
.body.cols-lnl > .body:nth-of-type(0n + 1) h4,
body.cols-lm #content > .body:nth-of-type(0n + 1) h4,
.body.cols-lm > .body:nth-of-type(0n + 1) h4,
body.cols-lnl #content > .body:nth-of-type(0n + 3) h4,
.body.cols-lnl > .body:nth-of-type(0n + 3) h4
{
	font-size: 1em;
}

#drawer .headarea
{
	margin-bottom: 1rem;
	margin-top: 0;
}

.kategorie
{
	color: var(--headline-cat-color);
	display: block;
	/* font-size: .75rem; */
	font-weight: normal;
	padding-bottom: .35em;
}

h1 > .kategorie
{
	font-size: .5em;
}

h2 > .kategorie
{
	font-size: .588em;
}

h3 > .kategorie
{
	font-size: .7em;
}

h4 > .kategorie
{
	font-size: .75em;
}

.kategorie::after
{
	content: " ";
}

header > .kategorie + div.image
{
	margin-top: 0;
}

h1 .head,
h2 .head,
h3 .head,
h4 .head
{
	display: block;
}

h1 .head
{
	letter-spacing: -.01em;
}

.subhead
{
	color: var(--headline-color);
	margin-bottom: 0 !important;
	margin-top: .5em !important;
}

/* Sektionen */

.body
{
	width: 100%;
}

.body:not(.op):not(.switchcontroller):not(:first-child):not(:only-child)
{
	margin-top: var(--p-margin-top);
}

.body.dynamic .ptagsnotice
{
	/* margin-top: .5em; */
	text-align: right;
}

/* Spalten-Layout */
/* TO-DO: Von Flexbox auf Grid umstellen */

@media (min-width: 420px)
{
	body.cols-nn #content,
	.body.cols-nn,
	body.cols-lm #content,
	.body.cols-lm,
	body.cols-ml #content,
	.body.cols-ml,
	body.cols-fm-ml #content,
	.body.cols-fm-ml,
	body.cols-lnl #content,
	.body.cols-lnl
	{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
}

@media (max-width: 567px)
{
	body.cols-lnl #content > .body:nth-of-type(0n + 2),
	body.cols-lm #content > .body:nth-of-type(0n + 2)
	{
		margin-top: 0 !important;
		order: 1;
	}

	body.cols-lnl #content > .body:nth-of-type(0n + 1),
	body.cols-lm #content > .body:nth-of-type(0n + 1)
	{
		margin-top: 2em !important;
		order: 2;
	}

	body.cols-lnl #content > .body:nth-of-type(0n + 3),
	body.dashboard #content > .body:first-of-type
	{
		margin-top: 1rem;
	}

	body.cols-lnl #content > .body:nth-of-type(0n + 3)
	{
		order: 3;
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	body.cols-lnl #content > .body:nth-of-type(0n + 2),
	body.cols-lm #content > .body:nth-of-type(0n + 2)
	{
		margin-top: 0 !important;
		order: 1;
	}

	body.cols-lnl #content > .body:nth-of-type(0n + 2):not(:last-of-type),
	body.cols-lm #content > .body:nth-of-type(0n + 2):not(:last-of-type)
	{
		width: 63%;
	}

	body.cols-lnl #content > .body:nth-of-type(0n + 1),
	body.cols-lm #content > .body:nth-of-type(0n + 1)
	{
		margin-top: 2em !important;
		order: 3;
	}

	body.cols-lnl #content > .body:nth-of-type(0n + 3),
	body.dashboard #content > .body:first-of-type
	{
		margin-top: 1rem;
	}

	body.cols-lnl #content > .body:nth-of-type(0n + 3)
	{
		order: 2;
		width: 30.1%;
	}
}

@media (min-width: 568px)
{
	body.cols-nn #content > .body,
	.body.cols-nn > .body
	{
		width: 43%;
	}

	body.cols-nn #content > .body:nth-of-type(0n+2),
	.body.cols-nn > .body:nth-of-type(0n+2)
	{
		margin-left: 14%;
	}

	body.cols-ml #content > .body:nth-of-type(0n+1),
	.body.cols-ml > .body:nth-of-type(0n+1),
	body.cols-fm-ml #content > .body:nth-of-type(0n+2),
	.body.cols-fm-ml > .body:nth-of-type(0n+2)
	{
		width: 63%;
	}

	body.cols-ml #content > .body:nth-of-type(0n+2),
	.body.cols-ml > .body:nth-of-type(0n+2),
	body.cols-fm-ml #content > .body:nth-of-type(0n+3),
	.body.cols-fm-ml > .body:nth-of-type(0n+3)
	{
		margin-top: 0 !important;
		width: 30.1%;
	}
}

@media (min-width: 768px)
{
	body.cols-lnl #content > .body:nth-of-type(0n+1),
	.body.cols-lnl > .body:nth-of-type(0n+1),
	body.cols-lm #content > .body:nth-of-type(0n+1),
	.body.cols-lm > .body:nth-of-type(0n+1)
	{
		width: 22%;
	}

	body.cols-lnl #content > .body:nth-of-type(0n+2),
	.body.cols-lnl > .body:nth-of-type(0n+2)
	{
		width:	46%;
	}

	body.cols-lm #content > .body:nth-of-type(0n+2),
	.body.cols-lm > .body:nth-of-type(0n+2)
	{
		width:	73%;
	}

	body.cols-lnl #content > .body:nth-of-type(0n+3),
	.body.cols-lnl > .body:nth-of-type(0n+3)
	{
		width: 22%;
	}
}

.relative
{
	position: relative;
}

/* One Pager */

body.op #content .body
{
	position: relative;
}

body.op.extendedmargintop #content .body
{
	margin-top: 3rem;
}

body.op.extendedmargintop #content .body:first-child,
body.op.extendedmargintop #content .body.grid
{
	margin-top: 2rem;
}

body.op:not(.fullwidth) #content .body:not(.grid):not(.fullwidth) > .content
{
	margin-left: auto;
	margin-right: auto;
	max-width: 960px;
}

body.op #content .body.vh
{
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
}

body.op #content .body.vh:not(.half):not(.twothird):not(.fourfifth)
{
	min-height: 100vh;
}

body.op #content .body.vh.half
{
	min-height: 50vh;
}

body.op #content .body.vh.twothird
{
	min-height: 67vh;
}

body.op #content .body.vh.fourfifth
{
	min-height: 80vh;
}

body.op #content .body.contentflexbox > .content
{
	display: flex;
	flex-flow: column nowrap;
	/* height: 100%; */
	min-height: 100%;
	padding-bottom: 2rem;
	padding-top: 2rem;
}

body.op #content .body.contentflexbox.evenlyspacedcontent > .content
{
	justify-content: space-evenly;
}

body.op #content .body.contentflexbox.centeredcontent > .content
{
	justify-content: center;
}

body.op #content .body.vh[style*="background-image"]
{
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

body.op #content .body > .content,
body.op #content .body.textarea > *
{
	margin-left: auto;
	margin-right: auto;
	max-width: 1024px;
}

body.op:not(.leftalign) #content .body > header,
body.op:not(.leftalign) #content .body:not(.leftalign) .artikel:not(.leftalign) header,
body.op:not(.leftalign) #content .body:not(.leftalign) .artikel:not(.leftalign)
{
	text-align: center;
}

body.op #content ol
{
	text-align: left;
}

body.op #content ol li
{
	margin-top: .6rem;
}

body.op #content .body.grid:not(.leftalign) > .content
{
	text-align: center;
}

body.op #content .body.grid > .content article.leftalign
{
	text-align: left;
}

body.op #content .body.grid:not(.leftalign) > .content article.artikel .image > .imagearea
{
	margin-left: auto;
	margin-right: auto;
}

body.op #content .body:not(.grid) .artikel:first-child
{
	margin-top: 0;
}

.body.op .artikel > .contentarea
{
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
}

#scrollindicator
{
	bottom: .8rem;
	color: white;
	font-size: 36px;
	left: 50%;
	pointer-events: none;
	position: absolute;
	text-align: center;
	text-shadow: 0 0 3px black;
	transform: translateX(-50%);
}

#scrollindicator p
{
	animation-duration: 6s;
	animation-name: scrollindicator;
	animation-fill-mode: both;
	animation-iteration-count: 10;
	animation-delay: 1s;
	transform-origin: center bottom;
}

@keyframes scrollindicator 
{
	0%, 4%, 10.6%, 16%, 20% {
		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		transform: translateZ(0)
	}

	8%, 8.6% {
		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		transform: translate3d(0, -30px, 0)
	}

	14% {
		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		transform: translate3d(0, -15px, 0)
	}

	18% {
		transform: translate3d(0, -4px, 0)
	}
}

#scrollindicator p i.wui.uil-scrolldown
{
	pointer-events: all;
}

@media (min-width: 568px) and (max-width: 767px)
{
	body.op #content .body.textarea:first-of-type
	{
		padding: 1rem 1.5rem;
	}

	body.op #content .body.textarea:not(:first-of-type)
	{
		padding: 0 1.5rem 1rem 1.5rem;
	}
}

@media (min-width: 768px)
{
	body.op #content .body.textarea:first-of-type
	{
		padding: 3rem 4rem;
	}

	body.op #content .body.textarea:not(:first-of-type)
	{
		padding: 0 4rem 3rem 4rem;
	}
}

/* Dashboard */

body.dashboard #content > .body:first-of-type
{
	background-color: white;
	border: 1px solid #bbb;
	border-radius: var(--medium-border-radius);
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin-top: 2rem;
}

body.dashboard #content > .body:first-of-type > header h1.headarea
{
	margin-bottom: .6rem;
}

body.dashboard #content > .body:first-of-type > *:not(.cmsfrontend)
{
	flex: 0 0 calc(100% - 3rem);
	margin-bottom: 0;
}

body.dashboard #content > .body:first-of-type > header
{
	padding: 1rem 1.5rem 0 1.5rem;
}

body.dashboard #content > .body:first-of-type > .content
{
	padding: 0 1.5rem 1rem 1.5rem;
}

body.dashboard #content > .body:first-of-type > .body
{
	border-top: 1px dotted #ccc;
	padding: 1rem 1.5rem;
}

/* Veranstaltungsübersicht */

.listview.divlist
{
	background-color: var(--light-bg-color);
	border-radius: .75em;
	display: grid;
	column-gap: 1px;
	padding: .5em;
	row-gap: 1px;
}

.listview.divlist.mediumgap
{
	column-gap: .4em;
	row-gap: .4em;
}

.listview.divlist.largegap
{
	column-gap: .8em;
	row-gap: .8em;
}

@media (min-width: 568px)
{
	.listview.divlist.twocolumns
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

.listview.divlist > .row.labelrow
{
	background-color: var(--light-bg-color); /* for sticky position */
	font-size: .75em;
	letter-spacing: .1em;
	padding: 1em 2em .5em 2em;
	position: sticky;
	text-transform: uppercase;
	top: 0;
}

.listview.divlist > .row.labelrow:first-child
{
	margin-top: -.5em;
}

.listview.divlist > .row.listitem
{
	background-color: var(--fixed-content-bg-color);
	position: relative;
}

.listview.divlist > .row.listitem > :first-child
{
	align-items: start;
	display: flex;
}

.listview.divlist > .row.listitem > :first-child > span.uibutton
{
	align-self: end;
	font-size: 1.2em;
}

.listview.divlist > .row.listitem > :first-child
{
	flex-flow: row nowrap;
	gap: 1em;
	padding: .8em .8em 1.2em .8em;
}

div.listview.divlist > .row.listitem:first-child,
div.listview.divlist > .row.labelrow + .row.listitem
{
	border-top-left-radius: .5em;
	border-top-right-radius: .5em;
}

div.listview.divlist > .row.listitem:last-child
{
	border-bottom-left-radius: .5em;
	border-bottom-right-radius: .5em;
}

div.listview.divlist > .row.listitem form
{
	margin-top: 0 !important;
}

div.listview.divlist > .row.listitem > a
{
	color: inherit !important;
}

/* Eventliste */

@media (max-width: 567px)
{
	.listview.divlist.eventlist > .row.listitem > :first-child
	{
		flex-flow: column nowrap;
		gap: 1.5em;
		padding: 1em 1em 1.5em 1em;
	}
}

@media (min-width: 568px)
{
	.listview.divlist.eventlist > .row.listitem > :first-child
	{
		flex-flow: row nowrap;
		gap: 2em;
		padding: 2em 1em 2em 2em;
	}
}

/* Jobbörse-Liste */

.listview.divlist.joblist > .row.listitem > :first-child
{
	align-items: start;
	flex-flow: column nowrap;
	height: 100%;
}

.listview.divlist.joblist > .row.listitem div.job
{
	flex: 2 2 auto;
}

@media (max-width: 567px)
{
	.listview.divlist.joblist > .row.listitem > :first-child
	{
		gap: 1.5em;
		padding: 1em 1em .5em 1em;
	}
}

@media (min-width: 568px)
{
	.listview.divlist.joblist > .row.listitem > :first-child
	{
		gap: 2em;
		padding: 2em 2em 1.5em 2em;
	}
}

.listview.divlist.joblist > .row.listitem .tag
{
	background-color: white;
	border-color: grey;
	border-radius: 1.2em;
	color: grey;
	font-size: .7em;
	padding: .2em .8em;
}

.listview.divlist.joblist > .row.listitem .head
{
	display: block;
	font-family: var(--headline-font);
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.2;
}

.listview.divlist.joblist > .row.listitem .headprefix + .head
{
	padding-top: 1em;
}

/* Datum und Uhrzeit */

div.datetime
{
	background-color: white;
	border-radius: .8em;
	box-shadow: var(--boxshadow-soft-medium);
	display: inline-flex;
}

div.datetime > div.weekday
{
	font-size: .75em;
	letter-spacing: .1em;
	text-transform: uppercase;
}

div.datetime > div.date
{
	font-size: 1.4em;
}

div.datetime > div.date:not(.rel)
{
	font-weight: bold;
}

div.datetime > div.time
{
	font-size: .75em;
}

div.datetime > div.place .tag.webinar
{
	background-color: var(--error-bg-color);
	border-color: var(--error-bg-color);
	color: var(--error-color);
}

div.datetime > div.place .city
{
	color: var(--navigation-active-color);
	font-weight: bold;
}

@media (max-width: 567px)
{
	div.datetime
	{
		align-items: baseline;
		flex-flow: row wrap;
		column-gap: .4em;
		padding: .3em .8em;
	}

	div.eventlist > .row.listitem div.datetime
	{
		width: 100%;
	}

	div.datetime > div.place
	{
		border-top: var(--thin-line-width) solid var(--light-line-color);
		padding-bottom: .2em;
		padding-top: .1em;
		width: 100%;
	}
}

@media (min-width: 568px)
{
	div.datetime
	{
		align-items: center;
		flex-flow: column;
		text-align: center;
		padding: .5em;
	}

	div.datetime > div.time
	{
		margin-bottom: .4em;
		margin-top: .4em;
	}

	div.eventlist > .row.listitem > :first-child
	{
		flex: 0 0 6rem;
	}

	div.eventlist > .row.listitem div.datetime
	{
		flex: 1 1 9em;
	}
	
	div.eventlist > .row.listitem div.event
	{
		flex: 1 1 calc(100% - 9rem);
	}
}

div.eventlist > .row.listitem div.event div.badges
{
	font-size: .75em;
	margin-bottom: 1em;
}

div.eventlist > .row.listitem div.event div.head
{
	display: block;
	font-family: var(--headline-font);
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.2;
	/* max-width: 30rem; */
}

div.eventlist > .row.listitem div.event a.moreindicator
{
	background-color: var(--light-bg-color);
	border: none;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	bottom: 0;
	display: inline-flex;
	font-size: .75em;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
}

div.eventlist > .row.listitem div.event a.moreindicator.opened
{
	display: none;
}

div.eventlist > .row.listitem > div.refarea,
div.eventlist > .row.listitem > div.tagarea
{
	flex: 1 1 auto;
}

div.eventlist > .row.listitem > div.refarea div.eventsignup
{
	text-align: center;
}

div.eventlist > .row.listitem > div.refarea div.eventsignup p.signupstatus
{
	font-size: .75em;
	font-style: italic;
}

form > div.eventsignup.grid > div.content
{
	column-gap: var(--medium-column-gap);
	row-gap: var(--medium-row-gap);
}

/* form > div.eventsignup > div.content > article.large:nth-child(2)
{
	padding: 0 2em;
} */

form > div.eventsignup > div.content > article:not(.large):nth-child(2)
{
	padding: 0 2em 2em 2em;
}

form > div.eventsignup > div.content > article:not(.large):nth-child(3)
{
	background-color: var(--light-bg-color);
	padding: 2em;
}

ul.subevents li > span:first-child
{
	grid-column: 1 / -1;
}

ul.subevents li:not(:last-child)
{
	border-bottom: var(--thinline);
	margin-top: .7em !important;
	padding-bottom: .6em !important;
}

ul.subevents li label span.time,
ul.subevents li label span.eventtitle,
ul.subevents li label span.speaker,
ul.subevents li label span.badges,
ul.subevents li label span.descr
{
	display: block;
}

ul.subevents li label span.eventtitle
{
	font-weight: bold;
}

div.eventspeakers
{
	background-color: var(--light-bg-color);
	margin-bottom: 2em;
	margin-top: 4em !important;
	padding: 0 2em 2em 2em;
}

div.eventspeakers.grid > .content
{
	column-gap: var(--medium-column-gap);
}

div.eventspeakers.grid > .content > .artikel
{
	margin-top: var(--p-margin-top) !important;
}

div.eventspeakers .image
{
	margin-bottom: var(--p-line-height);
	max-width: 160px;
}

form > div.eventsignup .moreindicator
{
	display: none !important;
}

@media (min-width: 568px)
{

	div.eventlist > .row.listitem > div.refarea div.eventsignup
	{
		max-width: 25%;
	}
}

div.eventlist > .row.listitem > div.refarea div.eventsignup a.internal
{
	--uibutton-color: var(--confirmation-color);
	--uibutton-border-color: var(--confirmation-color);

	--uibutton-hover-color: white;
	--uibutton-hover-bg-color: var(--confirmation-color);
	--uibutton-hover-bordercolor: var(--confirmation-color);

	--uibutton-active-bordercolor: var(--confirmation-color);

	font-weight: bold;
}

#signupeventsettings div.image
{
	margin: 0 auto 2em auto;
	max-width: 240px;
	text-align: center;
	width: 80%;
}

#signupeventsettings div.description.p:not(:first-child)
{	
	margin-top: 4em;
}

#signuppersonaldata .artikel.externalsignup
{
	font-size: 1.2em;
}

/* Präsentation (Hotspot-Book) */

body.js .nojswarning
{
	display: none;
}

.body.hotspotbook .pagesarea > *.containerbox
{
	flex: 1 1 auto;
}

.body.hotspotbook .pagesarea > *:not(.containerbox)
{
	flex: 0 0 auto;
}

.body.hotspotbook 
{
	position: relative;
}

.body.hotspotbook article.listnavibox.top
{
	margin-bottom: 1em;
}

.body.hotspotbook .tocarea, 
.body.hotspotbook .pagesarea 
{
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.body.hotspotbook .pagesarea .backbt,
.body.hotspotbook .pagesarea .forwardbt
{
	flex: 0 0 auto;
}

.body.hotspotbook .pagesarea .backbt
{
	margin-right: 1em;
}

.body.hotspotbook .pagesarea .forwardbt
{
	margin-left: 1em;
}

.body.hotspotbook .backbt,
.body.hotspotbook .forwardbt
{
	cursor: pointer;
	width: 30px;
}

.body.hotspotbook .tocarea,
.body.hotspotbook .mobiletocarea 
{
	border-bottom: 1px solid #bbb; 
	margin-bottom: 1em;
}

.body.hotspotbook .tocarea 
{
	position: relative;
	width: 100%;
}

.body.hotspotbook .tocarea .containerbox 
{
	height: 96px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: calc(100% - 80px);
}

.body.hotspotbook .tocarea .containerbox ul.toc 
{
	align-items: end;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	transition: left .6s ease;
}

.body.hotspotbook .tocarea .containerbox ul.toc > li 
{
	border-bottom: 2px solid transparent;
	color: #555;
	cursor: pointer;
	min-width: 92px;
	padding: 0 .3em .6em .3em;
	text-align: center;
}

.body.hotspotbook .tocarea .containerbox ul.toc > li.selected 
{
	border-bottom-color: var(--navigation-active-color);
}

.body.hotspotbook .tocarea .containerbox ul.toc > li.selected .toclabel
{
	font-weight: bold;
}

.body.hotspotbook .tocarea .containerbox ul.toc > li .image 
{
	border: var(--hairline); 
	/* max-height: 80px; */
}

.body.hotspotbook .mobiletocarea form
{
	margin-bottom: 1em;
}

.body.hotspotbook .containerbox 
{
	clear: both;
	margin: 0 auto;
	position: relative;
}

.body.hotspotbook .containerbox .innerbox 
{
	position: relative;
	width: 100%;
}

/* Slider */

.body.slider div.bx-wrapper
{
	position: relative;
}

.body.slider ul.bx-slider
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.body.slider ul.bx-slider
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.body.slider ul.bx-slider li .imagearea img
{
	display: revert;
}

.body.slider div.bx-controls
{
	padding-bottom: .5rem;
	padding-top: .2rem;
}

.body.slider div.bx-controls div.bx-pager
{
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	list-style: none;
	margin: 0 auto;
	padding-left: 0;
}

.body.slider div.bx-controls div.bx-pager div.bx-pager-item
{
	flex: 0 0 auto;
	margin: 0 .1rem;
}

.body.slider div.bx-controls div.bx-pager div.bx-pager-item a
{
	background: rgba(90, 90, 90, .7);
	border: 1px solid transparent;
	border-radius: var(--round-button-border-radius);
	display: block;
	/* outline: 0; */
	text-indent: -10000px;
	z-index: 1100;
}

.body.slider div.bx-controls div.bx-pager div.bx-pager-item a.active
{
	background: white;
	border: 1px solid rgba(90, 90, 90, .7);
}

@media (max-width: 767px)
{
	.body.slider div.bx-controls div.bx-pager div.bx-pager-item a
	{
		height: .8rem;
		margin: 0 .3rem;
		width: .8rem;
	}
}

@media (min-width: 768px)
{
	.body.slider div.bx-controls div.bx-pager div.bx-pager-item a
	{
		height: .6rem;
		margin: 0 .2rem;
		width: .6rem;
	}
}
	
/* Help View */

.body.helpview
{
	border-top: var(--thinline);
	display: grid;
	grid-template-columns: auto;
	margin-top: 2rem;
}

.body.helpview > div.searchview
{
	padding-top: 1rem;
}

.body.helpview > div.searchview > ul > li
{
	display: flex;
}

.body.helpview > div.interactions
{
	margin-top: 0;
	padding-top: 1rem;
}

.body.helpview > div.interactions nav li > a
{
	color: inherit !important;
}

.body.helpview > div.interactions form select[name="rubrid"]
{
	width: 100%;
}

.body.helpview div > .artikel:first-child,
.body.helpview div > .artikel:first-child > header > h2,
.body.helpview div > .artikel:first-child> header > h3,
.body.helpview div > .artikel:first-child> header > h4
{
	margin-top: 0 !important;
}

.body.helpview div.main
{
	position: relative;
}

.body.helpview div.main > .artikel.latestarticles ul.liste > li
{
	padding: .8em 0 !important;
}

/* Hack, da die Liste noch nicht optimal für Formulare ausgerichtet ist */

.body.helpview div.main > .artikel.faq > .refarea > ul
{
	padding-left: 0;
}

.form .body.helpview div.main ul.liste > li.file 
{
	background-position: left center !important;
	padding: .8em 0 .8em 4em !important;
}

.body.helpview div.main > .artikel.faqentries ul.liste > li.internallink.anchor,
.body.helpview div.main > .artikel.results ul.liste > li,
.body.helpview div.main > .artikel.faq > .refarea > ul > li:not(.file)
{
	display: block;
	margin-top: 1em !important;
	padding: 0 0 0 2em;
	position: relative;
}

.body.helpview div.main > .artikel.faqentries ul.liste > li.internallink::before,
.body.helpview div.main > .artikel.results ul.liste > li::before,
.body.helpview div.main > .artikel.faq > .refarea > ul > li:not(.file)::before
{
	background-color: var(--sym-bg-color);
	border: 1px solid var(--sym-border-color);
	border-radius: var(--round-button-border-radius);
	color: var(--sym-color);
	font-family: var(--symbol-font);
	font-style: normal;
	font-weight: normal;
	height: 1.4em;
	left: 0;
	position: absolute;
	width: 1.4em;
	text-align: center;
}

.body.helpview.faq div.main > .artikel.faqentries ul.liste > li.internallink::before,
.body.helpview.faq div.main > .artikel.results ul.liste > li::before
{
	content: "\55";
}

.body.helpview:not(.faq) div.main > .artikel.faqentries ul.liste > li.internallink::before,
.body.helpview:not(.faq) div.main > .artikel.results ul.liste > li::before,
.body.helpview div.main > .artikel.faq > .refarea > ul > li:not(.file)::before
{
	content: "\F00F2";
}

.body.helpview div.main > .artikel.faqentries ul.liste > li.internallink.active::before
{
	background-color: var(--selected-color);
	border: 1px solid var(--selected-color);
	color: white;
}

@media (min-width: 1024px)
{
	.body.helpview > div.searchview
	{
		padding-bottom: 1.5rem;
		padding-top: 1.5rem;
	}

	.body.helpview > div.interactions
	{
		padding-right: 1.5rem;
	}
	
	.body.helpview > div.interactions,
	.body.helpview > div.main
	{
		padding-top: 1.5rem;
	}

	.body.helpview > div.main
	{
		padding-left: 1.5rem;
	}
}

@media (min-width: 768px) and (max-width: 1023px)
{
	.body.helpview > div.searchview
	{
		padding-bottom: 1rem;
	}
	
	.body.helpview > div.interactions
	{
		padding-right: 1rem;
	}
	
	.body.helpview > div.main
	{
		padding-left: 1rem;
		padding-top: 1rem;
	}
}

@media (min-width: 768px)
{
	.body.helpview
	{
		border-top: var(--hairline);
		grid-template-columns: 25% auto;
		margin-top: 2rem;
	}

	.body.helpview > div.intro,
	.body.helpview > div.searchview
	{
		grid-column: 1 / span 2;
	}

	.body.helpview > div.searchview
	{
		border-bottom: var(--hairline);
	}
		
	.body.helpview > div.interactions
	{
		align-self: stretch;
		border-right: var(--hairline);
		grid-column: 1;
	}

	.body.helpview > div.interactions form select[name="rubrid"]
	{
		display: none;
	}

	.body.helpview > div.main:first-child
	{
		grid-column: 1 / span 2;
	}

	.body.helpview > div.interactions + div.main
	{
		grid-column: 2;
	}

	.body.helpview > .artikel.faqentries,
	.body.helpview > .artikel.faq
	{
		grid-column: 1 / span 2;
	}
}

@media (max-width: 767px)
{
	.body.helpview
	{
		grid-row-gap: 1.5rem;
	}

	.body.helpview > div.interactions > nav
	{
		display: none;
	}
}

/* Error Page */

body.error .body:first-of-type h1
{
	font-size: 2rem;
}

@media (min-width: 768px)
{
	body.error .body:first-of-type
	{
		border: .5px solid #777;
		margin: 2rem auto;
		max-width: 640px;
		padding: 2rem;
	}
}

/* Suche */

/* Parameter Select Area (für Such- bzw. Filter-Formulare o.ä.) */

.interactionsbox,
.parameterbox,
.parameterselectbox,
.searchbox 
{
	position: relative;
}

.interactionsbox
{
	clear: both;
}

.parameterbox,
.parameterselectbox,
.searchbox 
{
	background-color: var(--light-bg-color);
	border-radius: var(--medium-border-radius);
	margin: 0 auto var(--p-margin-top) auto;
	padding: var(--bg-text-indent-vertical) var(--bg-text-indent-horizontal) !important;
}

article.interactionsbox form
{
	margin: 0;
}

.body.invisibleinteractionsbox article.interactionsbox .searchbox
{
	background-color: transparent;
	padding: 0;
}

.resultbox
{
	border-bottom: 1px solid #dfdfdf;
	border-left: 1px solid #dfdfdf;
	border-right: 1px solid #dfdfdf;
	padding: .8em;
}

.interactionsbox .uibutton.resetform
{
	border-radius: var(--round-button-border-radius);
	min-height: 1.3rem;
	min-width: 1.3rem;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%) scale(1);
	z-index: 100;
}

.interactionsbox .uibutton.resetform:active
{
	transform: translateY(-50%) scale(.95);
}

.interactionsbox .uibutton.resetform i.wui
{
	font-size: 1rem;
	line-height: 1;
}

.body.grid p.hitsval
{
	grid-column: 1 / -1;
}

/* Body mit seitlichem Filter */

@media (min-width: 768px)
{
	.body.aside
	{
		align-items: start;
		column-gap: 3%;
		display: grid;
		grid-template-columns: 24% 73%;
		grid-template-rows: auto auto;
	}

	.body.aside > header
	{
		grid-column: 2;
		grid-row: 1;
	}

	.body.aside > article.interactionsbox
	{
		grid-column: 1;
		grid-row: 1 / -1
	}

	.body.aside > article.interactionsbox li > div > span
	{
		display: block;
	}

	.body.aside > div.content
	{
		grid-column: 2;
		grid-row: 2;
	}

	.body.aside > ul.content
	{
		grid-column: 2;
		grid-row: 3;
		margin-top: 0;
	}
}

/* Grid */

.grid .content
{
	display: grid;
}

@media (min-width: 420px)
{
	.grid > .content
	{
		align-items: stretch;
	}

	.grid > .content > .listnavibox
	{
		grid-column: 1 / -1;
	}

	.grid > .content > .artikel.large,
	.grid > .content > li.large
	{
		grid-column: 1 / -1;
	}

	.grid > .content > *.wideflex
	{
		grid-column-end: span 2
	}
}

@media (max-width: 767px)
{
	.grid .content
	{
		column-gap: var(--small-column-gap);
		row-gap: var(--small-column-gap);
	}
}

@media (min-width: 568px)
{
	.grid.twocolumns > .content,
	.grid:not(.twocolumns):not(.fourcolumns) > .content,
	.grid.fourcolumns > .content
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px)
{
	.grid .content
	{
		column-gap: var(--medium-column-gap);
		row-gap: var(--medium-row-gap);
	}

	.body.grid.highlight.productpresentation > .content
	{
		column-gap: var(--small-column-gap);
		row-gap: var(--small-row-gap);
	}

	.grid:not(.twocolumns):not(.fourcolumns) > .content
	{
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 768px) and (max-width: 1023px)
{
	.grid.fourcolumns > .content
	{
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px)
{
	.grid.fourcolumns > .content
	{
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Fußzeile */

#globalfooter,
#globalfooter ul
{
	display: flex;
}

#globalfooter
{
	border-top: var(--thinline);
	clear: both;
	color: var(--navigation-main-color);
	justify-content: space-between;
	margin-top: 4em;
	order: 20;
	padding-bottom: 2em;
	padding-top: 1em;
}

body.dashboard #globalfooter
{
	border-top: 0;
}

#socialmedia
{
	display: flex;
	flex-flow: row nowrap;
	margin-left: 1rem;
}

#socialmedia img
{
	max-width: none;
	width: 16px;
}

@media (max-width: 567px)
{
	#globalfooter ul,
	#globalfooter #socialmedia
	{
		flex-flow: column nowrap;
	}

	#socialmedia > *:not(:first-child)
	{
		margin-top: 8px;
	}

	#globalfooter ul li
	{
		padding-bottom: .6em;
	}
}

@media (min-width: 568px)
{
	#globalfooter ul
	{
		flex-flow: row wrap;
	}

	#socialmedia
	{
		justify-content: end;
	}

	#socialmedia > *:not(:first-child)
	{
		margin-left: 11px;
	}

	#globalfooter ul li
	{
		padding-bottom: .4em;
	}

	#globalfooter ul li:not(:last-child)
	{
		padding-right: .8em;
	}

	#globalfooter ul li:not(:last-child)::after
	{
		content: "\a0\a0\a0|";
	}
}

@media (min-width: 568px)
{
	#globalfooter
	{
		width: 100%;
	}

	/* body:not(.dashboard):not(.op):not(.nonavicolumn) #globalfooter
	{
		margin-left: 27%;
		width: 73%;
	} */
}

/* Notification Center */

#notificationcenter
{
	bottom: 5vw; 
	display: flex;
	flex-flow: column nowrap;
	justify-content: end;
	min-width: 400px; 
	pointer-events: none; 
	position: fixed; 
	right: 5vw; 
	top: 80px;
	width: 30%; 
	z-index: 300000;
}

#notificationcenter .artikelcontainer
{
	max-height: 100%;
	overflow: visible;
	transition: max-height 3.5s ease-out;
}

#notificationcenter .artikelcontainer.prep,
#notificationcenter .artikelcontainer.done
{
	max-height: 0;
}

#notificationcenter .artikelcontainer.done
{
	transition: max-height 2s ease .6s;
}

#notificationcenter .artikel
{
	background: var(--bg-color);
	-webkit-backdrop-filter: var(--medium-blurred-overlay-bg-filter);
	backdrop-filter: var(--medium-blurred-overlay-bg-filter);
	border-radius: var(--medium-border-radius);
	box-shadow: var(--boxshadow-large);
	color: inherit;
	cursor: pointer;
	font-size: .95em;
	margin: 1rem 0 0 0;
	max-height: 100%;
	opacity: 1;
	overflow: hidden;
	padding: .8rem 1rem;
	pointer-events: auto;
	text-align: left;
	transform: translate(0%);
	transition: opacity 1s ease-out, transform 1s ease;
	white-space: normal;
	width: 100%;
}

body.drawer.modal #notificationcenter .artikel:not(.success):not(.important):not(.notice)
{
	background: var(--overlay-bg-color);
}

#notificationcenter .artikel.success,
#notificationcenter .artikel.important
{
	color: white;
}

#notificationcenter .artikel.success
{
	background: var(--confirmation-color);
}

#notificationcenter .artikel.notice
{
	background: var(--warning-color);
}

#notificationcenter .artikel.important
{
	background: var(--highlight-color);
}

#notificationcenter .artikel::before
{
	background: rgba(0, 0, 0, .25) url(/assets/images/whiteclosebt.svg) center no-repeat;
	background-size: 14px;
	border-radius: var(--squarish-button-border-radius);
	content: "";
	float: right;
	height: 18px;
	opacity: .6;
	position: relative;
	right: -5px;
	top: -2px;
	width: 18px;
}

#notificationcenter .artikel:hover::before
{
	opacity: .8;
}

#notificationcenter .artikel :first-child
{
	margin-top: 0 !important;
}

#notificationcenter .artikel a
{
	color: inherit !important;
	font-weight: bold;
	text-decoration: none;
}

#notificationcenter .artikel a.helplink
{
	display: block;
}

#notificationcenter .artikel a.helplink i.wui
{
	font-size: 1.1em;
}

#notificationcenter .artikelcontainer.prep > .artikel,
#notificationcenter .artikelcontainer.done > .artikel
{
	opacity: 0;
	pointer-events: none;
}

#notificationcenter .artikelcontainer.prep > .artikel
{
	transform: translate(0, 25%);
}

#notificationcenter .artikelcontainer.done > .artikel
{
	transform: translate(50%, 0);
	transition: opacity .5s ease, transform .5s ease-out;
}

/* Benachrichtigungen und Badges */

*[data-badge]
{
	position: relative;
}

*[data-badge]::after
{
	background-color: var(--highlight-color);
	border-radius: var(--round-button-border-radius);
	color: white;
	content: attr(data-badge);
	display: block;
	font-size: 9px;
	font-weight: bold;
	height: 11px;
	position: absolute;
	right: -3px;
	text-align: center;
	top: -3px;
	min-width: 11px;
}

*[data-badge]:not([data-badge=""])::after
{
	padding: 0 2px 1px 2px;
}

.badge,
.notification
{
	background-color: rgba(204, 204, 204, .8);
	border-radius: var(--large-border-radius);
	color: black;
	line-height: 1.2;
	margin-left: .3em;
	margin-right: .3em;
	padding: .1rem .55rem .15rem .55rem;
}

.badges > .badge:first-child
{
	margin-left: 0;
}

.badges > .badge:last-child
{
	margin-right: 0;
}

.badge
{
	position: relative;
	text-align: center;
	white-space: nowrap;
}

.badge.approved,
.badge.new,
.badge.important,
.badge.notice
{
	color: white;
}

.badge.new,
.badge.important
{
	background-color: var(--highlight-color);
}

.badge.new
{
	font-weight: bold;
}

.badge.notice
{
	background-color: var(--warning-color);
}

.badge.approved
{
	background-color: var(--confirmation-color);
}

.notification
{
	display: inline-block;
	font-size: .75em;
}

.headarea .badge
{
	font-family: var(--body-font);
	font-size: .9rem;
}





/* Datums- und Stichwortgruppen */

.datearea
{
	display: none;
}

.artikel .datearea,
.artikel > .tagarea
{
	margin-top: 1em;
}

.body .artikel.showdatearea .datearea,
.body.showdatearea .artikel .datearea,
.body .liste.showdatearea li .datearea,
.body.showdatearea .liste li .datearea,
.showonlinedates .content .datearea
{
	display: block;
}

/* Spezielle Buttons */

.extendedtextbt
{
	background: var(--light-content-color);
	border: none;
	border-radius: var(--small-border-radius);
	color: white !important;
	cursor: pointer;
	font-size: .8em;
	padding: .2em .5em .1em .5em;
}





/* Mediathek-Formular, Responsebox und Listen-Navigation */

.listnavibox
{
	text-align: center;
}

.listnavibox:not(.top)
{
	padding-top: 2em;
}

.listnavibox ul.hits
{
	display: flex;
	flex-flow: row nowrap;
	font-family: var(--symbol-font);
	font-size: 19px;
	font-style: normal;
	font-weight: normal;
	justify-content: center;
	line-height: normal;
	list-style: none;
	margin: 0 auto;
	padding-left: 0;
}

.listnavibox ul.hits > li
{
	border-bottom: 0 !important;
	color: #777;
	flex: 0 0 auto;
}

.listnavibox ul.hits > li:not(.connector):not(.disabled)
{
	cursor: pointer;
}

.listnavibox ul.hits > li.prev.disabled,
.listnavibox ul.hits > li.next.disabled
{
	opacity: .2;
}

.listnavibox ul.hits > li:not(.disabled) a::before,
.listnavibox ul.hits > li.disabled::before,
.listnavibox ul.hits > li.connector::before
{
	display: inline-block;
	padding: 6px 4px;
}

.listnavibox ul.hits > li.prev:not(.disabled) a::before,
.listnavibox ul.hits > li.prev.disabled::before
{
	content: '\F0050';
}

.listnavibox ul.hits > li.next:not(.disabled) a::before,
.listnavibox ul.hits > li.next.disabled::before
{
	content: '\F0060';
}

.listnavibox ul.hits > li.dot:not(.active) a::before
{
	content: '\F00B2';
}

.listnavibox ul.hits > li.dot.active a::before
{
	content: '\F00C2';
}

.listnavibox ul.hits > li.connector::before
{
	content: '\F00D2';
}

/* Artikel-Typ: iFrame-Content */

article.iframe
{
	margin-top: 0;
}

article.iframe iframe
{
	border: 0;
	width: 100%;
}

/* Artikel-Typ: Livebook */

article.livebook 
{
	float: left;
	margin-right: 2%;
	width: 48%;
}

article.livebook div.imagearea 
{
	margin-bottom: 0.4em;
}

article.livebook div.image
{
	border: 1px solid #bbb;
	box-shadow: var(--boxshadow-small);
	display: inline-block;
	margin: 0.7em auto !important;
	overflow: hidden;
	position: relative;
}

article.livebook div.image
{
	max-width: 99%;
}

article.livebook div.image img
{
	display: block;
	left: 1%;
	max-width: 98%;
	position: relative;
}

article.livebook div.image .zoomicon 
{
	bottom: 10px;
	height: 50px;
	position: absolute;
	right: 10px;
	width: 50px;
}

article.livebook div.image div.leftborder,
article.livebook div.image div.rightborder 
{
	display: inline-block; 
	position: absolute;
	width: 2%;
}

article.livebook div.image div.leftborder 
{
	background: url(/assets/images/buchvorlage1.png) repeat-y; 
	left: 0;
}

article.livebook div.image div.rightborder 
{
	background: url(/assets/images/buchvorlage3.png) repeat-y; 
	right: 0;
}

article.livebook div.image div.centershadow 
{
	background: url(/assets/images/buchvorlage2.png) repeat-y;
	left: 45%;
	position: absolute; 
	top: 0; 
	width: 10%;
}

/* Artikel-Typ: Seiten-Miniatur (ALT) */

.pagedescr
{
	border-top: 1px dotted #aaa;
	float: left;
	margin: 1.5em 2% 0 0;
	width: 48%;
}

.pagedescr.large
{
	float: none;
	margin-right: 0;
	width: 100%;
}

.pagedescr div.fondarea
{
	background-color: #fcfcfc;
	padding: 0.2em 0.6em 0.5em 0.6em;
}

.pagedescr div.image
{
	border: 1px solid #ccc;
	display: inline-block;
	margin: 0.7em auto !important;
	max-width: 98%;
	overflow: hidden;
	position: relative;
}

.pagedescr div.image img
{
	display: block;
	max-width: 100%;
}

.pagedescr div.image .zoomicon
{
	bottom: 10px;
	color: grey !important;
	font-size: 40px;
	position: absolute;
	right: 10px;
}

/* Artikel-Typ: Produktpräsentation */

.body.grid.highlight .productpresentation
{
	border-top: var(--thinline);
	padding-top: .9em;
}

.body.grid.highlight .productpresentation[data-badge]:not([data-badge=""])::after
{
	font-size: .9em;
	height: auto;
	padding: .2em .5em;
	right: -.5em;
	top: -.5em;
}

.body.grid.highlight .productpresentation header:first-of-type
{
	margin-top: 0 !important;
}

.body.grid.highlight .productpresentation .image + .contentarea header:first-of-type
{
	margin-top: 1em !important;
}

.body.grid.highlight .productpresentation .kategorie + .image
{
	margin-bottom: .5em !important;
	margin-top: .5em !important;
}

.productpresentation img.productcover
{
	max-width: 220px;
	width: 80%;
}

.body.media .productpresentation 
{
	display: flex;
	flex-flow: row nowrap;
	margin-top: 3em;
}

.body.media.grid .productpresentation
{
	flex-flow: column nowrap;
	text-align: center;
}

.body.media:not(.grid) .productpresentation .contentarea
{
	flex: 1 1 200px;
}

.body.media:not(.grid) .productpresentation .image .thumbnail
{
	max-width: 160px;
}

.body.media:not(.grid) .productpresentation .image .thumbnail::before
{
	padding-top: 120%;
}

.body.media.grid .productpresentation .image .thumbnail
{
	margin: 0 auto 1em auto;
}

.body.media.grid .productpresentation .image .thumbnail::before
{
	padding-top: 100%;
}

.body.media.grid .productpresentation .image .thumbnail > span
{
	text-align: center;
}

.body.media.grid .productpresentation .image .thumbnail > span > img
{
	left: 50%;
	transform: translate(-50%,-50%);
}

.body.media .productpresentation .statusicon
{
	height: 26px; 
	left: -10px; 
	position: absolute; 
	top: -10px; 
	width: 26px;
}

.body.media.grid .productpresentation .statusicon
{
	left: 50px;
}

.body.media .productpresentation header .headarea 
{
	margin-top: 0 !important;
}

.body.media.grid .productpresentation header .headarea .head .info
{
	display: block;
}

/* Artikel-Typ (virtuell): Hotspot-Video */

article#mediaplayer
{
	background-color: #f4f4f4;
	left: 15%;
	order: 55;
	pointer-events: auto;
	position: fixed;
	text-align: center;
	top: 50vh;
	transform: translateY(-50%);
	width: 70%;
	z-index: 100;
}

article#mediaplayer .contentarea
{
	margin: 2em auto;
	max-width: 1024px;
	width: 90%;
}

article.hotspotvideo 
{
	background-color: #f4f4f4;
	left: 5%;
	padding: 1.5em;
	pointer-events: auto;
	position: absolute;
	text-align: center;
	top: 160px;
	width: 85%;
	z-index: 100;
}

article#mediaplayer audio, 
article#mediaplayer video, 
article.hotspotvideo video
{
	margin: 0 auto;
	max-width: 100%;
	width: inherit;
}

/* Artikel-Typ: Hotspot-Buchseite */

article.hotspots 
{
	left: 0;
	margin-top: 0 !important;
	opacity: 0;
	pointer-events: none;
	top: 0;
	width: 100%;
}

article.hotspots:first-child
{
	position: relative;
}

article.hotspots:not(:first-child)
{
	position: absolute;
}

article.hotspots.active
{
	opacity: 1;
	pointer-events: all;
}

article.hotspots .imagearea
{
	position: relative;
}

article.hotspots div.image
{
	box-shadow: var(--boxshadow-medium);
	display: inline-block;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: relative;
	width: 63%;
}

article.hotspots div.image img
{
	vertical-align: middle;
}

article.hotspots div.image canvas.pdfjscontainer
{
	max-width: 100%;
}

article.hotspots div.image.initial
{
	opacity: 1;
	pointer-events: auto;
}

article.hotspots div.image.fadeup
{
	animation: fadeup .3s ease-out;
	opacity: 1;
	pointer-events: auto;
}

article.hotspots div.image.fadedown
{
	animation: fadedown .3s ease-out;
	opacity: 1;
	pointer-events: auto;
}

@keyframes fadeup
{
	0% { opacity: 0; transform: scale(.92,.92); }
	75% { transform: scale(1,1); }
	100% { opacity: 1; }
}

@keyframes fadedown
{
	0% { opacity: 0; transform: scale(1.1,1.1); }
	75% { transform: scale(1,1); }
	100% { opacity: 1; }
}

article.hotspots .infobutton
{
	cursor: pointer;
	height: 60px;
	position: absolute;
	width: 60px;
	z-index: 10;
	transform: translate(-50%, -50%);
}

article.hotspots.active .infobutton
{
	animation: pulsate 2.2s ease-in-out 1 .01s;
}

article.hotspots .infobutton div
{
	background-color: var(--navigation-active-color);
	/* background-color: #d80035; */
	background-position: -5px;
	background-repeat: no-repeat;
	background-size: 40px;
	border-radius: var(--round-button-border-radius);
	box-shadow: 0 0 8px 4px white;
	height: 30px;
	margin: 15px;
	width: 30px;
}

@keyframes pulsate 
{
	0% { transform: translate(-50%, -50%) scale(0); }
	18% { transform: translate(-50%, -50%) scale(1.3); }
	38% { transform: translate(-50%, -50%) scale(.8); }
	56% { transform: translate(-50%, -50%) scale(1.1); }
	75% { transform: translate(-50%, -50%) scale(1); }
	100% { transform: translate(-50%, -50%) scale(1); }
}

article.hotspots .infobutton.video div
{
	background-image: url(/assets/images/videospotbt.png);
}

article.hotspots .infobutton.audio div
{
	background-image: url(/assets/images/audiospotbt.png);
}

article.hotspots .infobutton.text div
{
	background-image: url(/assets/images/hotspotbt.png);
}

article.hotspots .overlay 
{
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 20px;
	transition: opacity .7s ease, right 1s ease;
	width: 35%;
	z-index: 10;
}

article.hotspots .overlay.active
{
	opacity: 1;
	pointer-events: auto;
	right: 0;
	transition: opacity .3s ease, right .6s ease;
	z-index: 20;
}

article.hotspots .overlay:not([data-show-on-open]):not(.video)::after
{
	box-shadow: -1px 1px 1px 0 rgba(178, 178, 178, .6);
	content: "";
	display: block;
	height: 24px;
	left: -20px;
	position: absolute;
	top: 50%;
	transform: rotate(45deg) translateY(-50%);
	width: 24px;
	z-index: -1;
}

article.hotspots .overlay:not([data-show-on-open]),
article.hotspots .overlay:not([data-show-on-open]):not(.video)::after
{
	background-color: white;
}

article.hotspots .overlay[data-show-on-open]
{
	top: 0;
}

article.hotspots .overlay:not([data-show-on-open])
{
	border-radius: var(--medium-border-radius);
	transform: translateY(-50%);
}

article.hotspots .overlay:not([data-show-on-open]),
article.hotspots .overlay:not([data-show-on-open]):not(.video)::after
{
	background-color: white;
}

article.hotspots .overlay:not([data-show-on-open]):not(.video)
{
	box-shadow: 0 0 2px rgb(128, 128, 128);
}

article#mediaplayer .closebutton,
article.hotspots .overlay.active .closebutton
{
	cursor: pointer;
	height: 20px;
	position: absolute;
	right: 4px;
	top: 4px;
	width: 20px;
}

article.hotspots .overlay[data-show-on-open] .closebutton,
article.hotspots .overlay:not(.active) .closebutton
{
	cursor: auto;
	display: none;
	pointer-events: none;
}

article.hotspots .artikel.overlaycontent 
{
	margin-top: 0 !important;
	padding: .8em; 
	width: calc(100% - 1.6em);
}

article.hotspots .artikel.overlaycontent header
{
	margin-top: 0 !important;
}

article.hotspots .artikel.overlaycontent audio
{
	width: 100%;
}

/* Artikel-Typ: Tabelle */

article.table table
{
	background-color: var(--article-table-bg-color);
	border-spacing: 0 1px;
	margin: 0 auto;
	width: 100%;
}

article.table p + table
{
	margin-top: 1em;
}

article.table tr
{
	text-align: left;
	vertical-align: top;
}

article.table thead > tr, 
article.table tr.head > th
{
	background-color: var(--article-table-thead-bg-color);
}

article.table tbody > tr 
{
	background-color: var(--article-table-td-bg-color);
}

article.table th
{
	color: var(--text-color);
	font-weight: bolder;
}

article.table th, 
article.table td
{
	padding: var(--bg-text-indent-vertical) var(--bg-text-indent-horizontal);
}

article.table th > p:first-child, 
article.table td > p:first-child
{
	margin-top: 0;
}

/* Artikel-Typ: Tabelle für Kooperationspartner */

article#kooperationspartner.table tr > td:first-of-type img 
{
	max-width: 75%;
}

/* Artikel-Typ: Audio, Video, Youtube-Video */

article.audio.html5audio audio,
article.video.html5video video
{
	width: inherit;
}

article.video.youtube .iframecont
{
	max-width: 800px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

article.video.youtube :not(header) + .iframecont,
article.video.youtube .iframecont + *
{
	margin-top: var(--p-margin-top);
}

article.audio.html5audio audio,
article.video.html5video video
{
	max-width: 100%;
}

article.video.youtube .iframecont > iframe
{
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/* Artikel-Typ: FAQ-Jumpliste, FAQ-Eintrag */

.artikel.faqentries
{
	border-bottom: 0;
}

.artikel.faq
{
	margin-bottom: 2.8rem;
}

div.helpview > .artikel.faq
{
	margin-bottom: 1.3rem;
}

.artikel.faq:not(:first-child)
{
	border-top: var(--thinline);
	padding-top: 1.5rem;
}

.artikel.faq .image
{
	border: 1px solid #ccc;
}

.artikel.faq ol
{
	padding-left: 2.4em;
	padding-right: 3em;
}

.artikel.faq ol li
{
	margin-top: .5em;
}

/* Artikel-Typ: Suchtreffer */

/* Artikel-Typ: App Store Button */

article.appstorelink
{
	text-align: left;
}

article.appstorelink img.apple
{
	margin-bottom: 22px;
	margin-top: 23px;
	width: 200px;
}

article.appstorelink img.google
{
	margin: 20px 0;
	width: 200px;
}

/* Artikel-Typ: Jobbörse */

article.jobentry
{
	display: flex !important;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: space-between;
}

article.jobentry header,
article.jobentry .publishinginfo
{
	flex: 0 0 100%;
	width: inherit;
}

article.jobentry .textinfo
{
	flex: 0 1 60%;
	width: inherit;
}

article.jobentry .textinfo .userinput
{
	line-height: var(--p-line-height);
	margin-bottom: 0;
	margin-top: 1em;
}

article.jobentry .divinfo
{
	flex: 0 1 35%;
	width: inherit;
}

/* Visitenkarten */

.artikel.vcard
{
	box-shadow: var(--boxshadow-soft-medium);
	column-gap: var(--medium-column-gap);
	display: grid;
	grid-template-rows: 1fr auto auto;
	grid-template-columns: 1fr 2fr 2fr;
	padding: var(--bg-text-indent-vertical) var(--bg-text-indent-vertical);
	row-gap: var(--small-row-gap);
}

.artikel.vcard .imagearea
{
	grid-area: image;
}

.artikel.vcard header
{
	grid-area: header;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

.artikel.vcard .contactarea
{
	grid-area: contact;
}

.artikel.vcard .textarea
{
	grid-area: text;
}

@media (max-width: 767px)
{
	.artikel.vcard
	{
		grid-template-areas: 
			"image header header"
			"image contact contact"
			"image text text";
	}

	.artikel.vcard.noimage
	{
		grid-template-areas: 
			"header header header"
			"contact contact contact"
			"text text text";
	}
}

@media (min-width: 768px)
{
	.artikel.vcard
	{
		grid-template-areas: 
			"image header header"
			"image contact text"
			"image contact text";
	}

	.artikel.vcard.noimage
	{
		grid-template-areas: 
			"header header header"
			"contact contact text"
			"contact contact text";
	}
}

.artikel.vcard > .imagearea img
{
	width: 100%;
}

/* Artikel mit Haken-Liste */

.artikel.ticklist .contentarea ul
{
	list-style: none;
	margin-bottom: 0;
	padding-left: 0 !important;
}

.artikel.ticklist .contentarea ul > li
{
	padding: 1.2rem 0 1rem 3rem;
	position: relative;
}

.artikel.ticklist .contentarea ul > li::before,
.artikel.ticklist .contentarea ul > li::after
{
	color: rgb(29, 131, 12);
	display: inline-block;
	font-family: var(--symbol-font);
	font-size: 36px;
	font-style: normal;
	font-weight: normal;
	position: absolute;
}

.artikel.ticklist .contentarea ul > li::before
{
	content: "\F0143";
	left: 0;
	top: 4px;
}

.artikel.ticklist .contentarea ul > li::after
{
	content: "\F0112";
	left: 6px;
	top: 0;
}

/* Abstände */

.margintop
{
	margin-top: var(--p-margin-top) !important;
}
.extendedmargintop
{
	margin-top: calc(2 * var(--p-margin-top)) !important;
}

.nomargintop,
.nopaddingtop 
{
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.marginbottom
{
	margin-bottom: var(--p-margin-top) !important;
}

.nomarginbottom
{
	margin-bottom: 0 !important;
}

/* Weitere Sonderformate */

.quotation 
{
	margin: 3em 3em 3em auto;
	width: 70%;
}

.quotation .contentarea
{
	font-size: 1.05em;
	font-style: italic;
	letter-spacing: .03em;
}

.sticker
{
	background: rgb(224, 0, 47);
	color: #fff !important;
	padding: .4em .8em;
}

.sticker.large
{
	width: calc(100% - 1.6em);
}

.sticker:not(.large)
{
	float: right;
	margin-bottom: .5em;
	margin-left: 1em;
	width: 35%;
}

.sticker a:not(.button):not(.invisible)
{
	color: #fff !important;
}

.sticker > .contentarea > p:first-child,
.topteaser > .contentarea > p:first-child
{
	margin-top: 0;
}

.bottomline 
{
	border-bottom: 1px solid #bbb;
	padding-bottom: 1em;
}

.topline 
{
	border-top: 1px solid #bbb;
	padding-top: 1em;
}

@media (min-width: 568px)
{
	article.floatleft1
	{
		float: left;
		margin-right: 2%;
		padding-bottom: 1px;
	}

	article.floatright,
	article.floatright1 
	{
		float: right;
		margin-left: 2%;
		padding-bottom: 1px;
	}

	article.floatleft1,
	article.floatright1 
	{
		width: 48%;
	}
}

@media (min-width: 568px)
{
	.tomargin
	{
		margin-bottom: 1em;
		max-width: 40%;
		width: auto;
	}

	.tomargin.left
	{
		float: left;
		margin-right: 1em;
	}

	.tomargin.right
	{
		float: right;
		margin-left: 1em;
	}
}

.topteaser
{
	background-color: var(--light-bg-color) !important;
	padding: var(--bg-text-indent-vertical) var(--bg-text-indent-horizontal) !important;
}

#globalbody .topteaser
{
	background-color: transparent !important;
}

.body.news .topteaser
{
	border-bottom-left-radius: .3rem;
	border-bottom-right-radius: .3rem;
}

.body:not(.news) .topteaser
{
	border-radius: var(--small-border-radius);
}

#content .body .topteaser header
{
	/* margin-bottom: inherit; */
	margin-top: inherit;
}

.topteaser .contentarea > h2.displaynone + p,
.topteaser .contentarea > h2.displaynone + ol,
.topteaser .contentarea > h2.displaynone + ul:not(.liste)
{
	margin-top: 0;
}

.topteaser.table table
{
	background-color: var(--light-bg-color);
}

@media screen and (min-width: 420px)
{
	.topteaser.floatleft1,
	.topteaser.floatright1
	{
		width: 46%;
	}
}

.translucent	
{
	background-color: var(--overlay-bg-color);
	padding: 1%;
}

.artikel.translucent > .contentarea > header > .headarea
{
	margin-top: .2em !important;
}

/* Artikel: Hinweis auf aktualisierte Ausgabe mit neuem LWS */

.artikel.updatedservicenotice
{
	border: 1px solid var(--highlight-color);
	border-left-width: 7px;
	border-radius: var(--small-border-radius);
	padding: .8em 2em .8em 1.5em;
}

.artikel.updatedservicenotice::after
{
	content: "";
	clear: both;
	display: table;
}

.artikel.updatedservicenotice > .contentarea > header > h2
{
	font-weight: bold;
}

.artikel.updatedservicenotice > .contentarea > .image.productcover
{
	float: right !important;
	margin: .5em 0 1em 2.5em !important;
}

.artikel.updatedservicenotice > .contentarea > .image img.productcover
{
	max-width: 150px;
	transform: rotate(3deg);
}

.livebook.large
{
	float: none;
	margin-right: 0;
	width: 100%;
}

.table.infobox table
{
	background-color: white;
}

.table.infobox table tbody > tr
{
	background-color: #f4f4f4;
}

.table.infobox table th
{
	font-weight: normal;
}

.artikel .displaydownloadlink
{
	border-left: 6px solid #ccc;
	padding: .5em;
}

/* Listen */

ol.liste,
ul.liste
{
	margin-bottom: 0;
	margin-top: var(--p-margin-top);
	margin-left:0;
	margin-right:0;
	width: 100%;
}

ul.liste
{
	line-height: var(--p-line-height);
	list-style: none !important;
	padding-left: 0;
}

ul.liste > li
{
	background-position: left center;
	background-repeat: no-repeat;
	margin: 0 !important;
}

ul.liste.eng > li
{
	padding: .5em 0 .5em 4em;
}

ul.liste:not(.eng) > li
{
	padding: 1em 0 1em 3.5em;
}

.body.grid > ul.liste.content > li
{
	background-color: transparent;
	padding: 1em 0;
	text-align: center;
}

.body.grid > ul.liste.content > li > *:not(.tag):not(.cmsfrontend):not(.datearea),
.body.grid > ul.liste.content > li > a > *
{
	display: block;
	text-align: center;
}

ul.liste > li.internallink,
ul.liste > li.externallink
{
	padding: 1em 0 0 0;
}

.artikel .refarea > ul.liste > li.internallink,
.artikel .refarea > ul.liste > li.externallink
{
	padding-top: var(--p-margin-top);
}

ul.list.vocab > li
{
	padding-left: 0;
}

ul.liste.vocab > li.internallink::before,
ul.liste.vocab > li.internallink::after
{
	background-color: transparent;
	display: none;
}

ul.liste > li.internallink article.artikel
{
	margin-left: 18px;
}

:not(.body):not(.grid) > ul.liste > li.file
.body.grid > ul.liste.content > li.file .thumbnail
{
	background-image: url(/assets/images/generic-dwlicon.svg);
}

/* .body.grid > ul.liste.content > li.file
{
	background-image: none !important;
} */

ul.liste > li.file
{
	background-size: 36px;
}

.body.grid > ul.liste > li.file,
.body.grid > ul.liste.content > li.file.thumbnailloaded .thumbnail
{
	background-image: none !important;
}

ul.liste > li.video,
.body.grid > ul.liste.content > li.video .thumbnail
{
	background-image: url(/assets/images/video-dwlicon.svg);
}

ul.liste > li.aac,
.body.grid > ul.liste.content > li.aac .thumbnail
{
	background-image: url(/assets/images/aac-dwlicon.png);
}

ul.liste > li.app,
.body.grid > ul.liste.content > li.app .thumbnail
{
	background-image: url(/assets/images/app-dwlicon.png);
}

ul.liste > li.csv,
.body.grid > ul.liste.content > li.csv .thumbnail
{
	background-image: url(/assets/images/csv-dwlicon.svg);
}

ul.liste > li.doc,
ul.liste > li.docx,
.body.grid > ul.liste.content > li.doc .thumbnail,
.body.grid > ul.liste.content > li.docx .thumbnail
{
	background-image: url(/assets/images/doc-dwlicon.svg);
}

ul.liste > li.dmg,
.body.grid > ul.liste.content > li.dmg .thumbnail
{
	background-image: url(/assets/images/dmg-dwlicon.svg);
}

ul.liste > li.eps,
.body.grid > ul.liste.content > li.eps .thumbnail
{
	background-image: url(/assets/images/eps-dwlicon.svg);	
}

ul.liste > li.exe,
.body.grid > ul.liste.content > li.exe .thumbnail
{
	background-image: url(/assets/images/exe-dwlicon.svg);	
}

ul.liste > li.jpg,
ul.liste > li.jpeg,
.body.grid > ul.liste.content > li.jpg .thumbnail,
.body.grid > ul.liste.content > li.jpeg .thumbnail
{
	background-image: url(/assets/images/jpg-dwlicon.svg);	
}

ul.liste > li.mp3,
.body.grid > ul.liste.content > li.mp3 .thumbnail
{
	background-image: url(/assets/images/mp3-dwlicon.svg);
}

ul.liste > li.mp4,
.body.grid > ul.liste.content > li.mp4 .thumbnail
{
	background-image: url(/assets/images/mp4-dwlicon.svg);
}

ul.liste > li.pdf,
.body.grid > ul.liste.content > li.pdf .thumbnail
{
	background-image: url(/assets/images/pdf-dwlicon.svg);
}

ul.liste > li.rtf,
.body.grid > ul.liste.content > li.rtf .thumbnail
{
	background-image: url(/assets/images/rtf-dwlicon.png);
}

ul.liste > li.protected,
.body.grid > ul.liste.content > li.protected .thumbnail
{
	background-image: url(/assets/images/prt-dwlicon.png);
}

ul.liste > li.tif,
ul.liste > li.tiff,
.body.grid > ul.liste.content > li.tif .thumbnail.noimage,
.body.grid > ul.liste.content > li.tiff .thumbnail.noimage
{
	background-image: url(/assets/images/tif-dwlicon.svg);	
}

ul.liste > li.xls,
ul.liste > li.xlsx,
.body.grid > ul.liste.content > li.xls .thumbnail.noimage,
.body.grid > ul.liste.content > li.xlsx .thumbnail.noimage
{
	background-image: url(/assets/images/xls-dwlicon.svg);
}

ul.liste > li.zip,
.body.grid > ul.liste.content > li.zip .thumbnail.noimage
{
	background-image: url(/assets/images/zip-dwlicon.svg);
}

ul.liste > li .thumbnail
{
	display: none;
}

.artikel.productpresentation .imagearea .thumbnail > span > img
{
	width: auto;
}

.artikel.productpresentation .imagearea .thumbnail.noimage,
.body.grid > ul.liste.content > li.file .thumbnail
{
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 64px;
	max-width: 160px;
}

ul.liste > li > .untertitel::before
{
	content: ", ";
}

.body.grid > ul.liste.content > li > .untertitel::before
{
	content: "";
}

.artikel.productpresentation header .info,
ul.liste > li .info,
ul.liste > li .loginrequired
{
	font-size: .85em;
}

.artikel.productpresentation header .info::before,
ul.liste > li .info::before
{
	content: " (";
}

.artikel.productpresentation header .info::after,
ul.liste > li .info::after
{
	content: ")";
}

ul.liste > li .info > .filedescr
{
	display: none;
}

.body.grid > ul.liste.content > li .info > .filedescr
{
	display: inline;
}

ul.liste > li .info > span:not(:last-child)::after
{
	content: ", ";
}

ul.liste > li .mediaplayerbt > img,
ul.liste > li .mediadownloadbt > img
{
	vertical-align: middle;
	width: 30px;
}

ul.liste > li .mediaplayerbt
{
	margin-left: 1em;
}

ul.liste > li .mediadownloadbt
{
	margin-left: .3em;
}

ul.liste > li > div.text > p:first-child
{
	margin-top: 0;
}

/* Hervorhebungen */

.dropdown
{
	background-color: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: var(--medium-blurred-overlay-bg-filter);
	backdrop-filter: var(--medium-blurred-overlay-bg-filter);
	border: 1px solid rgb(204, 204, 204);
	border-bottom-left-radius: .3rem;
	border-bottom-right-radius: .3rem;
	box-shadow: var(--boxshadow-medium);
	line-height: 1.2;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	z-index: 1000;
}

/* Reiternavigation */

.tabnavi
{
	border-bottom: var(--light-line-width) solid #bbb;
	margin-bottom: 1em;
	margin-top: 2em;
	width: 100%;
}

.tabnavi ul
{
	display: flex;
	flex-flow: row wrap;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.tabnavi ul li
{
	background-color: var(--bg-color);
	border-top-left-radius: .3em;
	border-top-right-radius: .3em;
	flex: 0 0 auto;
	margin: .1em .1em 0 0;
	padding: .6em .7em .6em .7em !important;
}

.form .tabnavi ul li
{
	margin-top: 0 !important;
	width: auto;
}

.tabnavi ul li.active,
.tabnavi ul li:hover:not(.active)
{
	background-color: var(--navigation-active-color);
	color: white;
}

.tabnavi ul li a
{
	color: inherit !important;
	text-decoration: none;
}

/* Bilder */

.image
{
	/* line-height: .1; */
	max-width: 100%;
	position: relative;
}

.image .imagearea
{
	display: inline;
	height: -moz-fit-content;
	height: fit-content;
	max-width: inherit;
	width: -moz-fit-content;
	width: fit-content;
}

.body.imgaspr .artikel .image .imagearea,
.artikel.imgaspr .image .imagearea
{
	height: unset;
	display: inherit;
	position: relative;
	overflow: hidden;
	width: unset;
}

.body.imgaspr.aspr1-1 .artikel .image .imagearea,
.artikel.imgaspr.aspr1-1 .image .imagearea
{
	padding-top: 100%;
}

.body.imgaspr.aspr4-3 .artikel .image .imagearea,
.artikel.imgaspr.aspr4-3 .image .imagearea
{
	padding-top: 75%;
}

.body.imgaspr.aspr3-2 .artikel .image .imagearea,
.artikel.imgaspr.aspr3-2 .image .imagearea
{
	padding-top: 66.67%;
}

.body.imgaspr.aspr3-1 .artikel .image .imagearea,
.artikel.imgaspr.aspr3-1 .image .imagearea
{
	padding-top: 33.33%;
}

.body.imgaspr.aspr16-9 .artikel .image .imagearea,
.artikel.imgaspr.aspr16-9 .image .imagearea
{
	padding-top: 56.25%;
}

.body.imgaspr.aspr235-100 .artikel .image .imagearea,
.artikel.imgaspr.aspr235-100 .image .imagearea
{
	padding-top: 42.5%;
}

.body.imgaspr .artikel .image .imagearea img,
.artikel.imgaspr .image .imagearea > img
{
	position: absolute;
	top: 50%;
	transform: translate(-50%);
}

.body.imgaspr.imgautosize .artikel .image .imagearea img,
.body.imgaspr .artikel.imgautosize .image .imagearea img,
.artikel.imgaspr.imgautosize .image .imagearea > img
{
	max-height: 100%;
	width: unset;
}

.body.imgaspr.imgasprleft .artikel .image .imagearea img,
.body.imgaspr .artikel.imgasprleft .image .imagearea img,
.artikel.imgaspr.imgasprleft .image .imagearea > img
{
	left: 0;
}

.body.imgaspr.imgasprright .artikel .image .imagearea img,
.body.imgaspr .artikel.imgasprright .image .imagearea img,
.artikel.imgaspr.imgasprright .image .imagearea > img
{
	right: 0;
}

.body.imgaspr .artikel .image .imagearea img,
.artikel.imgaspr .image .imagearea > img
{
	position: absolute;
	top: 50%;
	transform: translate(-50%);
}

.artikel.imgaspr.imgasprupper.imgasprleft .image .imagearea > img,
.artikel.imgaspr.imgasprupper.imgasprright .image .imagearea > img
{
	transform: translateY(-35%);
}

.artikel.imgaspr.imgasprlower.imgasprleft .image .imagearea > img,
.artikel.imgaspr.imgasprlower.imgasprright .image .imagearea > img
{
	transform: translateY(-65%);
}

.body.imgaspr:not(.imgasprleft):not(.imgasprright) .artikel:not(.imgasprleft):not(.imgasprright) .image .imagearea img,
.artikel.imgaspr:not(.imgasprleft):not(.imgasprright) .image .imagearea > img
{
	left: 50%;
	transform: translate(-50%, -50%);
}

.artikel.imgaspr.imgasprupper:not(.imgasprleft):not(.imgasprright) .image .imagearea > img
{
	transform: translate(-50%, -35%);
}

.artikel.imgaspr.imgasprlower:not(.imgasprleft):not(.imgasprright) .image .imagearea > img
{
	transform: translate(-50%, -65%);
}

.image .buttonarea
{
	margin-top: 1em;
	text-align: left;
}

.produkt
{
	display: block;
}

.image .imagelabel
{
	color: #666;
	font-size: .95em;
	line-height: var(--p-line-height);
	margin-top: .5em;
}

.image .imagelabel.redbox
{
	background-color: #dd232b;
	color: white;
	padding: .5em;
}

.image .imagelabel.bluebox
{
	background-color: #4e75a9;
	color: white;
	padding: .5em;
}

.image .imagelabel.greenbox
{
	background-color: #64b22b;
	color: white;
	padding: .5em;
}

.image .imagelabel.topright
{
	position: absolute;
	right: 0;
	top: 10%;
}

.image .imagelabel.toprightrotated
{
	position: absolute;
	right: -2%;
	top: -2%;
	transform: rotate(7deg);
}

.image .imagelabel.bottomright
{
	position: absolute;
	right: 0;
	bottom: 10%;
}

.mediumimage .image
{
	max-width: 190px !important;
	width: 35% !important;
}

.smallimage .image
{
	max-width: 150px !important;
	width: 20% !important;
}

.productcoversize50percent img.productcover
{
	max-width: 50%;
}

.reduceproductcoversize img.productcover
{
	max-width: 75%;
}

.imageborder .mediacont,
.imageborder .imagearea img,
.image.imageborder .imagearea 
{
	border: var(--thin-line-width) solid var(--dark-line-color);
}

.imageappicon .imagearea,
.image.imageappicon .imagearea
{
	box-shadow: var(--boxshadow-small);
	border-radius: 16%;
	display: inline-block;
	line-height: .1;
	overflow: hidden;
}

.imageshadow img,
.image.shoplink img,
img.productcover,
.artikel.productcover img,
ul.liste > li.file .thumbnail img
{
	box-shadow: var(--boxshadow-medium);
}

.imagenoshadow .image.shoplink img
{
	box-shadow: none !important;
}

.imagepolaroid img
{
	background-color: white;
	padding: .6em .6em 1.2em .6em;
	box-shadow: var(--boxshadow-small);
}

.imgintroappicon > .image
{
	margin-bottom: var(--p-margin-top);
	width: 18%;
}

.imgfaqlinktohueberinteraktiv .image
{
	width: 60px;
	min-width: 60px !important;
}

@media (min-width: 420px) 
{
	:not(article).floatleft
	{
		float: left !important;
	}

	:not(article).floatright
	{
		float: right !important;
	}

	.floatleft.image.productcover,
	.floatright.image.productcover
	{
		max-width: 200px;
		min-width: 100px;
		/* width: 30%; */
	}

	.floatleft.image:not(.productcover),
	.floatright.image:not(.productcover)
	{
		max-width: 280px;
		min-width: 100px;
		/* width: 60%; */
	}

	article.video .floatcont.floatright,
	video.floatright
	{
		margin-bottom: 1em !important;
		margin-left: 2em !important;
	}

	article.video .floatcont.floatright
	{
		width: 55% !important;
	}

	video.floatright
	{
		max-width: 55% !important;
	}
}

@media (max-width: 419px)
{
	*:not(article).floatleft,
	*:not(article).floatright
	{
		margin: 0 0 var(--p-margin-top) 0;
	}
}

@media (min-width: 420px) and (max-width: 567px)
{
	*:not(article).floatleft
	{
		margin: 0 var(--p-margin-top) .5rem 0;
	}

	*:not(article).floatright
	{
		margin: 0 0 .5rem var(--p-margin-top);
	}
}

@media (min-width: 568px)
{
	*:not(article).floatleft
	{
		margin: 0 var(--p-margin-top) var(--p-margin-top) 0;
	}

	*:not(article).floatright
	{
		margin: 0 0 var(--p-margin-top) var(--p-margin-top);
	}
}

/* Bild als Thumbnail */

.imgharmonizer,
.thumbnail
{
	position: relative;
}

.thumbnail
{
	margin: 0 auto 1em auto;
}

.thumbnail,
.thumbnail iframe
{
	max-width: 160px;
	width: 90%;
}

span.imgharmonizer,
span.thumbnail
{
	display: block;
}

.imgharmonizer::before,
.thumbnail::before
{
	content: "";
	display: block;
}

.imgharmonizer::before
{
	padding-top: 100%;
}

.thumbnail::before
{
	padding-top: 80%;
}

.imgharmonizer > :first-child,
.thumbnail > :first-child
{
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.imgharmonizer > :first-child > img,
.thumbnail > :first-child > img
{
	left: 50%;
	max-height: 100%;
	max-width: 100%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* Bilder-Fächer */

.bilderfaecher
{
	width: 100%;
}

.bilderfaecher.floatleft,
.bilderfaecher.floatright
{
	max-width: 55%;
}

.bilderfaecher > .contentarea
{
	display: inline-block;
	max-height: 340px;
	position: relative;
	width: 100%;
}

.bilderfaecher .image
{
	max-height: 100%;
	max-width: intrinsic;
	position: absolute;
	text-align: center;
	top: 0;
}

.bilderfaecher .image:first-child
{
	text-align: left;
}

.bilderfaecher .image:last-child
{
	text-align: right;
}

.bilderfaecher img
{
	height: 100% !important;
	max-width: none !important;
	width: auto !important;
}

/* Switches */

.switch
{
	background-color: rgba(255, 255, 255, .9);
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 1.5em;
	display: inline-flex;
	overflow: hidden;
	padding: 0 !important;
}

.switch > a
{
	color: inherit !important;
	display: inline-block;
	min-height: .4rem;
	min-width: .4rem;
	padding: calc(.3em - 1px) .5em;
	text-decoration: none !important;
}

.switch > a:not(.active)
{
	color: rgba(255, 255, 255, .8);
}

.switch > a.active
{
	background-color: var(--navigation-main-color);
	box-shadow: var(--boxshadow-small);
	color: white !important;
}

#globalheader .switch > a.active
{
	background-color: rgb(224, 0, 47);
}

/* Tags */

.taglabel
{
	border-top-left-radius: var(--small-border-radius);
	border-bottom-left-radius: var(--small-border-radius);
}

.tag
{
	background-color: #aaa;
	border-color: #aaa;
	border-radius: var(--small-border-radius);
	color: white;
}

.taglabel,
.tag
{
	border-style: solid;
	border-width: 1px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	font-size: .8rem;
	font-weight: normal;
	letter-spacing: .1em;
	padding: .05em .2em;
	text-decoration: none;
	text-transform: uppercase;
}

.taglabel + .tag
{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.tag.invisible
{
	display: none;
}

.tag.invisible.frontend
{
	display: revert;
}

.tag.invisible.frontend,
.taglabel
{
	background-color: white;
	border-color: #bbb;
	color: #bbb;
}

.tag.date
{
	background-color: white;
	color: #bbb;
}

.tag.keyword
{
	background-color: #ddd;
	border-color: #ddd;
	color: #555;
}

.tag.frontend
{
	background-color: #999;
	border-color: #999;
	color: white;
	font-size: .8rem;
}

.tag.or.frontend
{
	background-color: #9bc59c;
	border-color: #9bc59c;
}

.tag.not.frontend
{
	background-color: #c56973;
	border-color: #c56973;
}

.tag.clickable
{
	cursor: pointer;
}

.tag.clickable:hover
{
	background-color: #888;
}

.tag.clickable:active
{
	background-color: rgb(224, 0, 47);
	border-color: rgb(224, 0, 47);
}

/* Links */

.externallink::after, 
.internallink:not(.anchor):not(.topofpage)::after,
.internallink.anchor::before,
.internallink.topofpage::before
{
	font-family: var(--symbol-font);
	font-style: normal;
	font-weight: normal;
}

.externallink::after, 
.internallink:not(.anchor):not(.topofpage)::after
{
	content: "\A0\F0082";
	left: 0;
	position: relative;
	transition: left .3s ease;
}

body:not(.touch) .externallink:not(.inactive):hover::after, 
body:not(.touch) .internallink:not(.inactive):not(.anchor):not(.topofpage):hover::after
{
	left: .2em;
}

.internallink.anchor::before
{
	color: #666;
	content: "\F00F2\A0";
}

.internallink.topofpage::before 
{
	color: #666;
	content: "\F00E2\A0";
}

/* Load Animation */

.loadanim 
{
	margin: 60px auto 30px auto;
	text-align: center;
	width: 90px;
}

.loadanim > div 
{
	animation: loadanimdelay .6s infinite ease-in-out both;
	background-color: #ccc;
	border-radius: var(--round-button-border-radius);
	display: inline-block;
	height: 18px;
	width: 18px;
}

.loadanim .loaddot1 
{
	animation-delay: -.36s;
}

.loadanim .loaddot2 
{
	animation-delay: -.24s;
}

.loadanim .loaddot3 
{
	animation-delay: -.12s;
}

@keyframes loadanimdelay 
{
	0%, 80%, 100% { 
		transform: scale(0);
	} 
	40% { 
		transform: scale(.7);
	}
}

/* weitere Textformatierung und -auszeichnungen */

span.title
{
	font-style: italic;
}

span.hero
{
	font-weight: bolder;
	font-style: inherit !important;
}

span.keyboardk
{
	border: 1px solid grey;
	border-radius: var(--small-border-radius);
	color: grey;
	display: inline-block;
	font-size: .75em;
	letter-spacing: .01em;
	line-height: var(--p-line-height);
	margin: 0 .15em;
	padding: .1em .35em 0 .35em;
	position: relative;
	top: -.1em;
	white-space: nowrap;
}

.keyboarduserinput,
.screenmsg
{
	font-family: monospace;
}

.keyboarduserinput
{
	font-size: .9em;
}

p.keyboarduserinput,
div.keyboarduserinput,
span.keyboarduserinput
{
	background-color: var(--light-bg-color);
	border-radius: var(--small-border-radius);
	padding: .2em .4em;
}

span.keyboarduserinput
{
	display: inline-block;

}

div.screenmsg,
p.screenmsg
{
	padding: 1em 5em 1em 4em;
}

.copyrightnote,
.legalnotice ol,
.legalnotice p,
.legalnotice ul
{
	font-size: .7rem;
}

.copyrightnote
{
	color: var(--navigation-main-color);
}

.artikel .copyrightnote,
.image .copyrightnote
{
	text-align: right;
}

.image .copyrightnote
{
	line-height: 1;
}

.artikel div.contentarea + div.copyrightnote
{
	margin-top: .5em;
}

.body.news:not(.liste) > .content > .artikel.large .imgarea .copyrightnote
{
	text-align: left;
}

.body[style*="background-image"] > div.copyrightnote
{
	bottom: .5rem;
	position: absolute;
	right: .5rem;
}

.clear
{
	clear: both;
}

.centered
{
	clear: both;
	display: block;
	margin: var(--p-margin-top) auto;
}

.artikel > .image.centered:first-child,
.artikel > a > .image.centered:first-child
{
	margin-top: 0;	
}

.leftblock
{
	margin-bottom: var(--p-margin-top);
}

.uppercase
{
	letter-spacing: .05em;
	text-transform: uppercase;
}

.displaynone
{
	display: none !important;
}

/* Sonderformate: Tabellen */

.et .status
{
	white-space: nowrap;
}

/* Clearfix */

.tabnavi > ul::after,
article.bottomline::after,
.body:not(.news):not(.liste) article.topteaser .contentarea::after, 
.clearatend::after,
.clearfix::after
{
	content: "";
	clear: both;
	display: table;
}

/* Responsive Design */

@media (min-width: 1440px) 
{
	body.dashboard #content > .body:first-of-type > .body:nth-child(odd)
	{
		border-right: 1px dotted #ccc;
		flex: 1 0 calc(50% - 3rem - 1px);
	}

	body.dashboard #content > .body:first-of-type > .body:nth-child(even)
	{
		flex: 1 0 calc(50% - 3rem);
	}
}

@media (min-width: 1024px) 
{
	.normalonly
	{
		display: none !important;
	}

	.widescreenonly
	{
		display: block !important;
	}
}

@media (max-width: 1023px) 
{
	.widescreenonly
	{
		display: none !important;
	}

	article img.image
	{
		height: auto !important;
		max-width: 100%;
	}

	article#mediaplayer
	{
		left: 10%;
		width: 80%;
	}
}

@media (min-width: 768px) and (max-width: 1023px) 
{
	.normalonly
	{
		display: block !important;
	}
}

@media (min-width: 768px)
{
	.singlecolumnmodeonly
	{
		display: none !important;
	}

	.mobileonly
	{
		display: none !important;
	}

	.weakmobileonly
	{
		display: none;
	}
}

@media (max-width: 767px) 
{
	.notinsinglecolumnmode
	{
		display: none !important;
	}

	.normalonly
	{
		display: none !important;
	}

	.notonmobile
	{
		display: none !important;
	}

	#pagecontent 
	{
		margin: 0;
		overflow-x: hidden;
		padding-top: 0;
		transition: padding-top .8s ease;
		width: 100%;
	}

	body.sbc #pagecontent 
	{
		padding-top: calc(var(--pg-header-height) + var(--pg-searchbox-height));
	}

	body:not(.sbc) #pagecontent
	{
		padding-top: var(--pg-header-height);
	}

	#globalbody,
	#toplevelnavi,
	#content,
	#globalfooter
	{
		padding-left: 8px;
		padding-right: 8px;
	}

	#globalbody
	{
		flex: 0 0 100%;
	}

	#globalfooter
	{
		width: 100%;
	}

	#infoheader
	{
		background-position: left center !important;
		background-size: auto 100% !important;
		height: 70px !important;
		width: 100%;
	}

	#navibar
	{
		margin-top: .5em;
		position: static;
		right: auto;
		width: auto;
	}

	#navibar > ul
	{
		font-size: 1.4em;
	}

	.body
	{
		width: 100%;
	}

	body.dashboard #content > .body:first-of-type > .body 
	{
		flex: 0 0 calc(100% - 2rem);
		padding: .6rem 1rem;
	}

	#notificationcenter
	{
		bottom: 70px; 
		left: 5%;
		min-width: auto;
		right: 5%; 
		top: 80px;
		width: auto;
	}

	article.pagedescr,
	article.livebook
	{
		float: none;
		margin-right: 0;
		width: 100%;
	}

	article#mediaplayer
	{
		left: 5%;
		width: 90%;
	}

	/* etracker Opt Out Breite */

	#et-opt-out
	{
		width: auto !important;
	}
}

@media (min-width: 568px) and (max-width: 1023px) 
{
	article.livebook 
	{
		margin-right: 1%;
		width: 49%;
	}

	article.livebook div.image div.leftborder,
	article.livebook div.image div.rightborder 
	{
		display: none; 
	}
}

@media (max-width: 567px) 
{
	body,
	#content 
	{
		/* font-size: 1rem; */
		font-size: 1.05rem;
	}

	#navibar ul
	{
		font-size: 1.25em;
	}

	#navibar ul li:not(.sixcmspage)
	{
		margin-right: 3em;
	}

	#content > .body:not(:first-child)
	{
		margin-top: 2em;
	}

	article.hotspots div.image
	{
		width: 100%;
	}

	article.hotspots .overlay 
	{
		left: -2em !important;
		width: calc(100% + 4em) !important;
	}

	article.hotspots .overlay[data-show-on-open].active 
	{
		display: none;
	}

	article.hotspots .overlay:not([data-show-on-open]):not(.video).active::after
	{
		content: none;
	}

	article.hotspots .overlay.active .closebutton
	{
		height: 30px;
		width: 30px;
	}

	article.livebook 
	{
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100%;
	}

	article#mediaplayer
	{
		left: 1%;
		width: 98%;
	}

	.body.grid > ul.liste.content > li.file .thumbnail
	{
		max-width: 130px;
	}

	.body.grid > ul.liste.content > li.file .thumbnail::before
	{
		padding-top: 75%;
	}

	.quotation 
	{
		margin: 2em auto;
		width: inherit;
	}
}

@media (min-width: 420px) 
{
	.mobileportraitonly
	{
		display: none !important;
	}
}

@media (max-width: 419px) 
{
	.notonmobileportrait
	{
		display: none !important;
	}

	#navibar ul
	{
		font-size: 1.0em;
	}

	.body.news:not(.liste) > .content > .artikel.large > .contentarea > .imgarea
	{
		flex: 0 1 100%;
	}

	.body.news:not(.liste) > .content > .artikel.large > .contentarea > .imgarea + .combinedarea
	{
		flex: 0 1 100%;
		margin-top: 1em;
	}

	.productpresentation img.productcover
	{
		max-width: 100%;
		width: auto;
	}
}

@media (max-width: 374px) 
{
	#navibar ul li:not(.sixcmspage)
	{
		margin-right: 2em;
	}

	.productpresentation img.productcover
	{
		max-width: 50%;
		width: auto;
	}
}

/* Aktionen */

#kijupromo
{
	background-color: var(--highlight-color);
	padding: 0;
}

#kijupromo .contentarea
{
	padding-top: 80px;
	padding-bottom: .5em;
	padding-left: .6em;
	padding-right: .6em;
}

#kijupromo .contentarea .kategorie,
#kijupromo .contentarea h2,
#kijupromo .contentarea a
{
	color: white !important;
}

/* Legacy */

.widelwssplashscr {
	height: 550px; 
	position: relative; 
	width: 1024px;
}

.flexilwsheader,
.mobilelwsheader,
.widelwsheader,
.lwsheader
{
	background-color: white;
	position: relative;
	width: 100%;
}

.flexilwsheader,
.widelwsheader,
.lwsheader
{
	box-shadow: var(--boxshadow-medium);
}

table.layouttable 
{
	height: auto !important;
	border-collapse: collapse;
	line-height: 0;
	width: 100%;
}

table.layouttable tr th,
table.layouttable tr td
{
	height: auto !important;
	line-height: 0;
	padding: 0;
}

table.layouttable tr td img
{
	height: auto !important;
}

@media (max-width: 767px) 
{
	.flexilwsheader,
	.widelwsheader,
	.lwsheader
	{
		box-shadow: none;
	}

	.body
	{
		width: 100%;
	}
}

/* Work in Progress */

.titlearea
{
	background-color: var(--titlearea-bg-color);
	background-position: top center;
	background-size: cover;
	position: relative;
}

.titlearea.middle
{
	background-position: center;
}

.titlearea.flex
{
	display: flex;
	flex-flow: row nowrap;
}

.titlearea.titlearealws
{
	padding-bottom: 10%;
}

.titlearea:not(.flex) > *
{
	position: absolute;
}

.titlearea:not(.headertop):not(.headerbottom) > header
{
	bottom: 48%;
	transform: translateY(50%);
}

.titlearea.headertop > header
{
	top: 3%;
}

.titlearea.headerbottom > header
{
	bottom: 4%;
}

.titlearea > header,
.titlearea > header > *
{
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

@media (max-width: 567px)
{
	.titlearea.titlearea1024x200
	{
		padding-bottom: 40%;
	}

	.titlearea.titlearea1024x340
	{
		padding-bottom: 65%;
	}
}

@media (max-width: 419px)
{
	.titlearea.headerhalf.headerright > header
	{
		max-width: 55%;
		padding: 0 4% !important;
		right: 0;
	}

	.titlearea.headertwothirds.headerright > header
	{
		max-width: 80%;
		padding: 0 4% !important;
		right: 0;
	}
}

@media (min-width: 420px) and (max-width: 567px)
{
	.titlearea.headerhalf.headerright > header
	{
		max-width: 50%;
		padding: 0 4% !important;
		right: 0;
	}

	.titlearea.headertwothirds.headerright > header
	{
		max-width: 70%;
		padding: 0 4% !important;
		right: 0;
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	.titlearea.titlearea1024x200
	{
		padding-bottom: 26%;
	}

	.titlearea.titlearea1024x340
	{
		padding-bottom: 40%;
	}

	.titlearea.headerhalf.headerright > header
	{
		left: 50%;
		max-width: 50%;
		padding: 0 4% !important;
	}

	.titlearea.headertwothirds.headerright > header
	{
		left: 33%;
		max-width: 67%;
		padding: 0 4% !important;
	}
}

@media (min-width: 768px)
{
	.titlearea.titlearea1024x200
	{
		padding-bottom: 19.53%;
	}

	.titlearea.titlearea1024x340
	{
		padding-bottom: 33.2%;
	}

	.titlearea.headerhalf.headerright > header
	{
		left: 50%;
		max-width: 50%;
		padding: 0 3% !important;
	}

	.titlearea.headertwothirds.headerright > header
	{
		left: 34%;
		max-width: 66%;
		padding: 0 3% !important;
	}
}

/* TO-DO: Alten Kampagnen-Header cpnheader mit Slider-Header cpnheadern zusammenführen */
/* Slider Texte */

/* headl headm headls headsl headwoshadow headleft headcenter headright headupper headmiddle headlower headw80 headw60 headw40 headwfixed */

.cpnheadern
{
	--mhv-slider-header-color: white;

	--header-color: var(--mhv-slider-header-color);
	--headline-cat-color: var(--mhv-slider-header-color);
	--headline-color: var(--mhv-slider-header-color);

	--a-link-color: var(--mhv-slider-header-color);

	--header-text-stroke-color: transparent;
	--header-text-stroke-width: 0;
}

.cpnheadern header
{
	background-color: transparent !important;
	display: inline-block;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
	position: absolute;
	-webkit-text-stroke: var(--header-text-stroke-width) var(--header-text-stroke-color);
}

.cpnheadern:not(.headwoshadow) > header,
.cpnheadern:not(.headwoshadow) .artikel:not(.headwoshadow) header
{
	text-shadow: 0 0 1px var(--dark-text-shadow-color), 0 0 6px var(--medium-text-shadow-color), 0 0 12px var(--light-text-shadow-color);
}

@media (max-width: 419px)
{
	.cpnheadern header,
	.cpnheadern .artikel header
	{
		width: 87%;
	}
}

@media (min-width: 420px) and (max-width: 567px)
{
	.cpnheadern.headw60 header,
	.cpnheadern .artikel:not(.headw100):not(.headw80):not(.headw60):not(.headw40) header,
	.cpnheadern .artikel.headw60 header
	{
		width: 72.5%;
	}
	
	.cpnheadern.headw100 header,
	.cpnheadern .artikel.headw100 header
	{
		width: 95%;
	}
	
	.cpnheadern.headw80 header,
	.cpnheadern .artikel.headw80 header
	{
		width: 85%;
	}
	
	.cpnheadern.headw40 header,
	.cpnheadern .artikel.headw40 header
	{
		width: 70%;
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	.cpnheadern.headw60.headwfixed header,
	.cpnheadern .artikel.headwfixed:not(.headw100):not(.headw80):not(.headw60):not(.headw40) header,
	.cpnheadern .artikel.headw60.headwfixed header
	{
		width: 62.5%;
	}
	
	.cpnheadern.headw100.headwfixed header,
	.cpnheadern .artikel.headw100.headwfixed header
	{
		width: 95%;
	}
	
	.cpnheadern.headw80.headwfixed header,
	.cpnheadern .artikel.headw80.headwfixed header
	{
		width: 77.5%;
	}
	
	.cpnheadern.headw40.headwfixed header,
	.cpnheadern .artikel.headw40.headwfixed header
	{
		width: 47.5%;
	}

	.cpnheadern.headw60:not(.headwfixed) header,
	.cpnheadern .artikel:not(.headw100):not(.headw80):not(.headw60):not(.headw40):not(.headwfixed) header,
	.cpnheadern .artikel.headw60:not(.headwfixed) header
	{
		max-width: 62.5%;
	}
		
	.cpnheadern.headw100:not(.headwfixed) header,
	.cpnheadern .artikel.headw100:not(.headwfixed) header
	{
		max-width: 95%;
	}

	.cpnheadern.headw80:not(.headwfixed) header,
	.cpnheadern .artikel.headw80:not(.headwfixed) header
	{
		max-width: 77.5%;
	}
	
	.cpnheadern.headw40:not(.headwfixed) header,
	.cpnheadern .artikel.headw40:not(.headwfixed) header
	{
		max-width: 47.5%;
	}
}

@media (min-width: 768px)
{
	.cpnheadern.headw60.headwfixed header,
	.cpnheadern .artikel.headwfixed:not(.headw100):not(.headw80):not(.headw60):not(.headw40) header,
	.cpnheadern .artikel.headw60.headwfixed header
	{
		width: 60%;
	}
	
	.cpnheadern.headw100.headwfixed header,
	.cpnheadern .artikel.headw100.headwfixed header
	{
		width: 95%;
	}
	
	.cpnheadern.headw80.headwfixed header,
	.cpnheadern .artikel.headw80.headwfixed header
	{
		width: 75%;
	}
	
	.cpnheadern.headw40.headwfixed header,
	.cpnheadern .artikel.headw40.headwfixed header
	{
		width: 45%;
	}

	.cpnheadern.headw60:not(.headwfixed) header,
	.cpnheadern .artikel:not(.headw100):not(.headw80):not(.headw60):not(.headw40):not(.headwfixed) header,
	.cpnheadern .artikel.headw60:not(.headwfixed) header
	{
		max-width: 60%;
	}
	
	.cpnheadern.headw100:not(.headwfixed) header,
	.cpnheadern .artikel.headw100:not(.headwfixed) header
	{
		max-width: 95%;
	}

	.cpnheadern.headw80:not(.headwfixed) header,
	.cpnheadern .artikel.headw80:not(.headwfixed) header
	{
		max-width: 75%;
	}
	
	.cpnheadern.headw40:not(.headwfixed) header,
	.cpnheadern .artikel.headw40:not(.headwfixed) header
	{
		max-width: 45%;
	}
}

@media (max-width: 419px)
{
	.cpnheadern header,
	.cpnheadern .artikel header
	{
		left: 3%;
	}
}

@media (min-width: 420px)
{
	.cpnheadern.headleft header,
	.cpnheadern .artikel:not(.headleft):not(.headcenter):not(.headright) header,
	.cpnheadern .artikel.headleft header
	{
		left: 3%;
	}

	.cpnheadern.headcenter header,
	.cpnheadern .artikel.headcenter header
	{
		left: 50%;
		max-width: 80%;
		text-align: center;
		transform: translateX(-50%);
	}

	.cpnheadern.headcenter.headmiddle header,
	.cpnheadern .artikel.headcenter.headmiddle header
	{
		transform: translate(-50%, -50%);
	}

	.cpnheadern.headright header,
	.cpnheadern .artikel.headright header
	{
		left: auto;
		right: 4%;
	}
}

.cpnheadern .artikel header
{
	bottom: 10%;
}

.cpnheadern.headupper header,
.cpnheadern .artikel.headupper header
{
	top: 10%;
}

@media (min-width: 420px) 
{
	.cpnheadern.headlower header,
	.cpnheadern .artikel:not(.headupper):not(.headmiddle):not(.headlower) header,
	.cpnheadern .artikel.headlower header
	{
		bottom: 10%;
	}

	.cpnheadern.headupper header,
	.cpnheadern .artikel.headupper header
	{
		bottom: auto;
		top: 12%;
	}

	.cpnheadern.headmiddle header,
	.cpnheadern .artikel.headmiddle header
	{
		bottom: auto;
		top: 49%;
		transform: translateY(-50%);
	}
}

.cpnheadern header > .headarea,
.cpnheadern header > .headarea > .kategorie,
.cpnheadern header > .headarea > .head
{
	display: block;
	font-family: var(--headline-font) !important;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
	padding-bottom: 0 !important;
	padding-top: 0 !important;
}

.cpnheadern:not(.headfw400) header > .headarea,
.cpnheadern .artikel:not(.headfw400) header > .headarea,
.cpnheadern:not(.headfw400) header > .headarea > .kategorie,
.cpnheadern .artikel:not(.headfw400) header > .headarea > .kategorie,
.cpnheadern:not(.headfw400) header > .headarea > .head,
.cpnheadern .artikel:not(.headfw400) header > .headarea > .head
{
	font-weight: bold !important;
}

.cpnheadern.headfw400 header > .headarea,
.cpnheadern .artikel.headfw400 header > .headarea,
.cpnheadern.headfw400 header > .headarea > .kategorie,
.cpnheadern .artikel.headfw400 header > .headarea > .kategorie,
.cpnheadern.headfw400 header > .headarea > .head,
.cpnheadern .artikel.headfw400 header > .headarea > .head
{
	font-weight: normal !important;
}

.cpnheadern:not(.headm):not(.headl):not(.headsl) header> .headarea > .kategorie + .head,
.cpnheadern .artikel:not(.headm):not(.headl):not(.headsl) header> .headarea > .kategorie + .head
{
	margin-top: .15em !important;
}

.cpnheadern.cpnheadern.headw100 header > .headarea > .kategorie,
.cpnheadern.headl header > .headarea > .head,
.cpnheadern .artikel:not(.headm):not(.headls):not(.headsl) header > .headarea > .kategorie,
.cpnheadern .artikel:not(.headm):not(.headls):not(.headsl) header > .headarea > .head,
.cpnheadern .artikel.headl header > .headarea > .kategorie,
.cpnheadern .artikel.headl header > .headarea > .head
{
	font-size: 1em !important;
}

.cpnheadern.headm header > .headarea > .kategorie,
.cpnheadern.headm header > .headarea > .head,
.cpnheadern .artikel.headm header > .headarea > .kategorie,
.cpnheadern .artikel.headm header > .headarea > .head
{
	font-size: .85em !important;
}

.cpnheadern.headls header > .headarea > .kategorie,
.cpnheadern .artikel.headls header > .headarea > .kategorie
{
	font-size: 1em !important;
}

.cpnheadern.headls header > .headarea > .head,
.cpnheadern .artikel.headls header > .headarea > .head
{
	font-size: .7em !important;
}

.cpnheadern.headsl header > .headarea > .kategorie,
.cpnheadern .artikel.headsl header > .headarea > .kategorie
{
	font-size: .7em !important;
}

.cpnheadern.headsl header > .headarea > .head,
.cpnheadern .artikel.headsl header > .headarea > .head
{
	font-size: 1em !important;
}

@media (max-width: 567px)
{
	.cpnheadern header > .headarea
	{
		font-size: 1.75rem !important;
		line-height: 1.1 !important;
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	.cpnheadern header > .headarea
	{
		font-size: 1.9rem !important;
		line-height: 1.05 !important;
	}
}

@media (min-width: 768px)
{
	.cpnheadern header > .headarea
	{
		font-size: 2.4rem !important;
		line-height: 1 !important;
	}
}

/* ALT ! */

.cpnheader > header > .headarea
{
	line-height: 1 !important;
	text-shadow: var(--cpnheader-header-text-shadow);
}

.cpnheader > header > .headarea,
.cpnheader > header > .headarea > .head
{
	font-weight: bold !important;
}

@media (max-width: 419px)
{
	.cpnheader > header > .headarea
	{
		font-size: 1.55rem !important;
	}
}

@media (min-width: 420px) and (max-width: 567px)
{
	.cpnheader > header > .headarea
	{
		font-size: 1.7rem !important;
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	.cpnheader > header > .headarea
	{
		font-size: 1.9rem !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px)
{
	.cpnheader > header > .headarea
	{
		font-size: 2.1rem !important;
	}
}

@media (min-width: 1024px)
{
	.cpnheader > header > .headarea
	{
		font-size: 2.4rem !important;
	}
}

.cpnheader > header > .headarea > .kategorie
{
	font-family: var(--headline-font) !important;
	font-weight: bold !important;
	margin-bottom: .2em !important;
	margin-top: 0 !important;
	padding-bottom: 0 !important;
	padding-top: 0 !important;
}

.cpnheader:not(.altheadersizes) > header > .headarea > .kategorie
{
	font-size: 1em !important;
}

.cpnheader.altheadersizes > header > .headarea > .kategorie
{
	font-size: 1.15em !important;
}



/* Content Drawer */

.body.contentdrawer > .content > .artikel:not(:first-child)
{
	margin-top: var(--p-margin-top);
}

.body.contentdrawer > .content > .artikel > .contentarea > .textarea
{
	margin-top: var(--p-margin-top);
	padding-bottom: 1em;
}

.body.contentdrawer > .content > .artikel > .contentarea > header
{
	--headline-color: var(--uibutton-color);
	--headline-cat-color: var(--uibutton-color);
	align-items: center;
	background-color: var(--uibutton-bg-color);
	border: var(--light-line-width) solid var(--uibutton-border-color);
	border-radius: var(--small-border-radius);
	cursor: pointer;
	color: var(--headline-color);
	display: flex;
	flex-flow: row nowrap;
	margin-top: 0 !important;
	padding: .8em .7em;
}

.body.contentdrawer > .content > .artikel > .contentarea > header::before,
.body.contentdrawer > .content > .artikel > .contentarea > header::after
{
	display: inline-block;
}

.body.contentdrawer > .content > .artikel > .contentarea > header::before
{
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	content: "";
	height: 2.2em;
	margin-right: .5em;
	width: 2.2em;
}

.body.contentdrawer > .content > .artikel.choicesym > .contentarea > header::before
{
	background-image: url(/shared/images/contentdrawer/choicesym.svg);
}

.body.contentdrawer > .content > .artikel.monitorsym > .contentarea > header::before
{
	background-image: url(/shared/images/contentdrawer/monitorsym.svg);
}

.body.contentdrawer > .content > .artikel.masksym > .contentarea > header::before
{
	background-image: url(/shared/images/contentdrawer/masksym.svg);
}

.body.contentdrawer > .content > .artikel.videosym > .contentarea > header::before
{
	background-image: url(/shared/images/contentdrawer/videosym.svg);
}

.body.contentdrawer > .content > .artikel.personssym > .contentarea > header::before
{
	background-image: url(/shared/images/contentdrawer/personssym.svg);
}

.body.contentdrawer > .content > .artikel.rewardsym > .contentarea > header::before
{
	background-image: url(/shared/images/contentdrawer/rewardsym.svg);
}

.body.contentdrawer > .content > .artikel.openbooksym > .contentarea > header::before
{
	background-image: url(/shared/images/contentdrawer/openbooksym.svg);
}

.body.contentdrawer > .content > .artikel > .contentarea > header::after
{
	font-family: var(--symbol-font);
	font-size: 1.2em;
	font-style: normal;
	font-weight: normal;
	margin-left: .5em;
}

.body.contentdrawer > .content > .artikel.opened > .contentarea > header::after
{
	content: "\F0011";
}

.body.contentdrawer > .content > .artikel:not(.opened) > .contentarea > header::after
{
	content: "\F0031";
}

.body.contentdrawer .content > .artikel > .contentarea > header > .headarea
{
	flex: 1 1 auto;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

.body.contentdrawer .content > .artikel > .contentarea .internallink::before
{
	content: "\F0062\A0";
	font-family: var(--symbol-font);
	font-size: 1.2em;
	font-style: normal;
	font-weight: normal;
}

.body.contentdrawer .content > .artikel > .contentarea .internallink::after,
.body.contentdrawer .content > .artikel > .contentarea .internallink:hover::after
{
	content: unset;
}


/* Kampagnen-Jumplist */

.cpnjumplist > .content > .artikel
{
	background-color: transparent;
	border: var(--thinline);
	padding: .8rem 1rem .7rem 1rem;
	content: "";
	clear: both;
	display: table;
}

@media (max-width: 419px)
{
	.cpnjumplist > .content > .artikel .contentarea > .image.floatright > .imagearea
	{
		margin: 0 auto 1rem auto !important;
	}
}

@media (min-width: 420px)
{
	.cpnjumplist > .content > .artikel .contentarea > .image.floatright
	{
		margin: .5rem 0 .5rem 3rem !important;
		width: 180px !important;
	}
}




.body.grid.highlight.productpresentation.edidt .artikel header
{
	margin-top: 0;
}

.body.grid.highlight.productpresentation.edidt .artikel .refarea a
{
	background-color: rgb(156, 215, 252);
	border: 1px solid rgb(156, 215, 252);
	border-radius: var(--small-border-radius);
	color: white !important;
	display: block;
	padding: .5em 1em;
	font-weight: bold;
}