/*

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

Hueber.de CSS 2015

Stylesheets für Hueber.de

Version: 	3.8
Datum: 		04.04.2024

Erfordert: -

Hinweise:  -

Historie:	

3.8 (04.04.2024)	- Listeneinträge überarbeitet
					- Container-Queries statt Media-Queries wo möglich
					- Diverse Optimierungen

3.75 (25.04.2023)	- .titlearea und .cpnheader stärker abgestimmt
					- Bereinigungen

3.7 (13.04.2023)	- Formular-Reset-Formatierungen entfernt

3.6 (06.04.2023)	- Breadcrumb und Header-Aufbau aktualisiert

3.5 (30.03.2023)	- Seiten, Artikel und Bilder überarbeitet

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

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

*/


/* 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;

	--tag-font-size: .8em;
	--medium-font-size: .95em;
	--small-font-size: .85em;

	--headline-line-height: 1.2em;

	--body-margin-top: 1.25em;
	--body-margin-bottom: 1.25em;

	--article-margin-top: 2.5em;
	--article-margin-bottom: 2.5em;

	--header-margin-top: 1.5em;
	--header-margin-bottom: 1em;

	--p-line-height: 1.6;
	--p-margin-top: 1.25em;
	--p-margin-bottom: 1.25em;

	--narrow-line-height: 1.3;

	--small-margin-top: .625em;
	--small-margin-bottom: .625em;

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

	--large-bg-text-indent-vertical: calc(var(--bg-text-indent-vertical) * 1.5);
	--large-bg-text-indent-horizontal: calc(var(--bg-text-indent-horizontal) * 1.5);

	--extralarge-bg-text-indent-vertical: calc(var(--bg-text-indent-vertical) * 2);
	--extralarge-bg-text-indent-horizontal: calc(var(--bg-text-indent-horizontal) * 2);

	/* Seitenbereiche */

	--pg-content-max-width: 1152px;
	--pg-content-min-width: 360px;
	--pg-content-width: 96%;

	--pg-content-margin-left-width: auto;
	--pg-content-margin-right-width: auto;

	--pg-header-height: 56px;
	--pg-header-padding-horizontal: 8px;
	--pg-header-padding-vertical: 8px;

	--pg-searchbox-width: 240px;
	--pg-searchbox-height: 56px;

	--pg-navigation-width: clamp(190px, 22%, 240px);
	--pg-navigation-horizontal-margin: var(--large-column-gap);

	/* Weitere Formen und Maße */

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

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

	--extrasmall-column-gap: calc(var(--medium-column-gap) / 2);
	--extrasmall-row-gap: calc(var(--extrasmall-column-gap) * 1.25);

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

	--large-column-gap: calc(var(--medium-column-gap) * 1.5);
	--large-row-gap: calc(var(--large-column-gap) * 1.25);

	--narrow-column-gap: var(--medium-line-width);
	--narrow-row-gap: calc(var(--narrow-column-gap) * 1.25);

	--round-button-border-radius: 9999px;
	--extralarge-border-radius: 1.5em;
	--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-small: 0 1px 6px 1px;
	--boxshadow-dim-soft-medium: 0 1px 10px 1px;

	/* 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: #757575;
	--extralight-content-color: #bbb;
	--ultralight-content-color: #efefef;

	--inv-bg-content-color: white;

	--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(33, 100, 154);
	/* --confirmation-color: rgb(25, 147, 32); */
	--warning-color: rgb(255, 174, 0);
	--light-warning-color: rgb(255, 238, 129);

	--text-color: var(--darkmedium-content-color);

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

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

	--error-color: rgb(182, 39, 4);
	--error-bg-color: rgb(255, 245, 242);

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

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

	--page-bg-color: #fcfcfb;
	--body-bg-color: transparent;
	--article-bg-color: transparent;

	--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(230, 230, 230);
	--medium-bg-color: rgba(236, 236, 236);
	--mediumlight-bg-color: rgb(239, 239, 239);
	--light-bg-color: rgb(242, 242, 242);
	--extralight-bg-color: rgb(250, 250, 250);

	--inv-bg-color: rgb(34, 34, 34);
	--inv-medium-bg-color: rgb(24, 24, 24);
	--inv-light-bg-color: rgb(14, 14, 14);

	--titlearea-bg-color: transparent;

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

	--dark-overlay-bg-color: rgba(255, 255, 255, .95);
	--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, .9);

	--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);

	/* 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-small: var(--boxshadow-dim-soft-small) var(--boxshadow-light-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: 568px)
{
	:root
	{
		--bg-text-indent-vertical: 1.3em;
		--bg-text-indent-horizontal: 1.5em;
	
		--large-bg-text-indent-vertical: calc(var(--bg-text-indent-vertical) * 2);
		--large-bg-text-indent-horizontal: calc(var(--bg-text-indent-horizontal) * 2);
	}
}

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

*
{
	box-sizing: border-box;
}

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

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

iframe
{
	border: 0;
}

h1,
h2,
h3,
h4
{
	margin-bottom: var(--header-margin-bottom);
	margin-top: var(--header-margin-top);
}

:is(h1, h2, h3, h4):has( + .subhead)
{
	margin-bottom: 0;
}

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

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

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

h1,
h2,
h3,
h4
{
	line-height: var(--headline-line-height);
}

h1
{
	font-weight: bold;
}

h2,
h3,
h4
{
	font-weight: 600;
}

@media (max-width: 567px)
{
	h1, h2
	{
		font-size: 1.35em;
	}

	h3
	{
		font-size: 1.1em;
	}

	h4
	{
		font-size: 1em;
	}
}

@media (min-width: 568px)
{
	h1
	{
		font-size: 2em;
	}

	.body:is(.hascolumns, .threecolumns, .fourcolumns) > .content:not(.static) h1,
	.body:is(.cols-lnl, .cols-lm) > .body:nth-of-type(0n + 1) h1,
	.body.cols-lnl > .body:nth-of-type(0n + 3) h1
	{
		font-size: 1.5rem;
	}

	h2
	{
		font-size: 1.5em;
	}

	.body:is(.hascolumns, .threecolumns, .fourcolumns) > .content:not(.static) h2,
	.body:is(.cols-lnl, .cols-lm) > .body:nth-of-type(0n + 1) h2,
	.body.cols-lnl > .body:nth-of-type(0n + 3) h2
	{
		font-size: 1.3rem;
	}

	h3
	{
		font-size: 1.2rem;
	}

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

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

	/* .body:is(.hascolumns, .threecolumns, .fourcolumns) > .content:not(.static) h4,
	.body:is(.cols-lnl, .cols-lm) > .body:nth-of-type(0n + 1) h4,
	.body.cols-lnl > .body:nth-of-type(0n + 3) h4
	{
		font-size: 1em;
	} */

	h5,
	h6
	{
		display: none !important;
	}
}

.pagecontent,
.pagecontent :is(p, ol, ul)
{
	color: var(--text-color);
}

table
{
	font-size: inherit;
}

img
{
	display: inline-block;
	height: auto;
	max-width: 100%;
	width: auto;
}

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

/* Links */

/* .link:not(.anchor):not(.artikel):not(.imagelink):not(.navi):not(.topofpage)::after, */
.link:not(.anchor):not(.artikel):not(.navi):not(.topofpage)::after,
.internallink.anchor::before,
.internallink.topofpage::before
{
	font-family: var(--symbol-font);
	font-style: normal;
	font-weight: normal;
}

.link:not(.anchor):not(.artikel):not(.imagelink):not(.navi):not(.topofpage)::after
{
	content: "\A0\F0082";
	left: 0;
	position: relative;
	transition: left .3s ease;
}

body:not(.touch) .link:not(.anchor):not(.artikel):not(.inactive):not(.imagelink):not(.navi):not(.topofpage):hover::after
{
	left: .2em;
}

.internallink.anchor:not(.artikel):not(.imagelink)::before
{
	color: #666;
	content: "\F00F2\A0";
}

.internallink.topofpage:not(.artikel):not(.imagelink)::before 
{
	color: #666;
	content: "\F00E2\A0";
}

/* Allgemeines */

.bottomline 
{
	border-bottom: 1px solid var(--light-line-color);
	padding-bottom: 1em;
}

.topline 
{
	border-top: 1px solid var(--light-line-color);
	padding-top: 1em;
}

.float
{
	display: block;
}

@container (width < 350px)
{
	.float
	{
		margin: 0 0 var(--p-margin-top) 0;
	}
}

@container (width > 349px)
{
	.floatleft
	{
		float: inline-start;
	}

	.floatright
	{
		float: inline-end;
	}
}

@container (width > 349px) and (width < 501px)
{
	.floatleft
	{
		margin: 0 var(--small-column-gap) var(--small-row-gap) 0;
	}

	.floatright
	{
		margin: 0 0 var(--small-row-gap) var(--small-column-gap);
	}
}

@container (width > 500px) 
{
	.floatleft
	{
		margin: 0 var(--medium-column-gap) var(--small-row-gap) 0;
	}

	.floatright
	{
		margin: 0 0 var(--small-row-gap) var(--medium-column-gap);
	}
}

.centered
{
	clear: both;
	display: block;
	text-align: center;
}

:is(.centered, .leftblock):not(:first-child)
{
	margin-top: var(--small-row-gap);
}

:is(.centered, .leftblock):not(:last-child)
{
	margin-bottom: var(--small-row-gap);
}

.uppercase
{
	letter-spacing: .05em;
	text-transform: uppercase;
}

.displaynone
{
	display: none !important;
}

/* Clear */

.clear
{
	clear: both;
}

.tabnavi > ul,
.bottomline,
.topteaser,
.clearatend,
.clearfix
{
	display: flow-root;
}

/* Scrollable Table */

.tscr
{
	margin: 0 0 1em;
	overflow-y: auto;
	width: 100%;
}

.tscr::-webkit-scrollbar 
{
	-webkit-appearance: none;
	height: 14px;
	width: 14px;
}

.tscr::-webkit-scrollbar-thumb 
{
	background-color: rgba(0, 0, 0, .3);
	border: 3px solid #fff;
	border-radius: 8px;
}

/* Container Queries */

.container,
.body,
.artikel,
.form ul
{
	container-type: inline-size;
}

/* Header in Bodies, Artikeln und Listen */

header:has( > :is(h1, h2, h3, h4))
{
	--header-margin-top: 0;
}

.body.news article header:has( > :is(h1, h2, h3, h4))
{
	--header-margin-top: 1em;
}

.kategorie
{
	color: var(--headline-cat-color);
	display: block;
	font-weight: normal;
	line-height: var(--headline-line-height);
	padding-bottom: .35em;
}

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

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

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

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

.kategorie:not(:last-child)::after
{
	content: " ";
}

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

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

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

.subhead
{
	color: var(--headline-color);
	margin-bottom: var(--header-margin-bottom) !important;
	margin-top: calc(var(--p-margin-top) / 2) !important;
}

/* Artikel */

.artikel
{
	margin-bottom: var(--article-margin-bottom);
	margin-top: var(--article-margin-top);
	background-color: var(--article-bg-color);
	container-name: in-parent in-artikel;
}

.artikel.bgimage
{
	background-repeat: no-repeat;
}

.body > .content > .artikel:first-child
{
	margin-top: 0;
}

.body > .content > .artikel:last-child,
.body > .liste > .artikel:has(+ .listnavibox)
{
	margin-bottom: 0;
}

.body.grid > .content > .artikel
{
	margin-bottom: 0;
	margin-top: 0;
}

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

.artikel.articlestartimage .image.centered:first-of-type
{
	margin-top: 0 !important;
}

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

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

.artikel :is(ol, p, .p, td, th):first-child,
.artikel:not(.html):not(.interactionsbox) ul:not(.fsection):first-child
{
	margin-top: 0;
}

.artikel :is(ol, p, .p, td, th):last-child,
.artikel:not(.html):not(.interactionsbox) ul:not(.fsection):last-child
{
	margin-bottom: 0;
}

:is(ol, p, .p, td, th).small,
.artikel:not(.html):not(.interactionsbox) ul.small
{
	font-size: var(--small-font-size);
}

.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 > .textarea + .refarea,
.artikel > .textarea > .refarea:not(:first-child),
.artikel > :is(.contentarea, header, .textarea) + .refarea,
.artikel > :is(.contentarea, header, .textarea) > .textarea > .refarea:not(:first-child)
{
	margin-top: var(--p-margin-top);
}

/* Artikel mit erweitertem Text */

.artikel.hideextendedtext .textarea .langtext,
.artikel.hidelistentries > .refarea li:nth-child(n+4)
{
	display: none;
}

.artikel:is(.hideextendedtext, .hidelistentries) .extendedtextbt
{
	margin-top: calc(var(--p-margin-top) / 2);
}

.artikel:not(.hideextendedtext):not(.hidelistentries):not(:has( .artikel.hideextendedtext)) .extendedtextbt
{
	display: none;
}

/* Sonderformatierungen Artikel */

@container (width > 567px)
{
	.artikel.floatleft1
	{
		float: left;
		margin-right: 2%;
		padding-bottom: 1px;
	}

	.artikel:is(.floatright, .floatright1)
	{
		float: right;
		margin-left: 2%;
		padding-bottom: 1px;
	}

	.artikel:is(.floatleft1, .floatright1) 
	{
		width: 48%;
	}
}

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

.body.intro .artikel:not(.tomargin):not(.sticker),
.artikel.bodyintro 
{
	font-size: 1.2em;
	--p-line-height: 1.6em;
	--article-margin-bottom: 2.5em !important;
	--article-margin-top: 3.5em !important;
}

.body.intro .artikel:not(.tomargin):not(.sticker):first-child,
.artikel.bodyintro:first-child
{
	--article-margin-top: 0 !important;
}

.body.intro .artikel:not(.tomargin):not(.sticker):last-child,
.artikel.bodyintro:last-child
{
	--article-margin-bottom: 0 !important;
}

@media (min-width: 420px)
{
	.body.intro .artikel:not(.tomargin):not(.sticker):not(:has( .image.float.floatright)) .contentarea,
	.artikel.bodyintro:not(:has( .image.float.floatright)) .contentarea
	{
		padding-right: 10%;
	}
}

/* Präsentationskacheln */

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

/* Aktuelles-Meldungen */

.body.news > .content > .artikel
{
	border-top: var(--light-line-width) solid var(--navigation-active-color);
}

.body.news > .content > .artikel:not(.hasimage.articlestartimage)
{
	padding-top: var(--bg-text-indent-vertical);
}

.body.news > .content > .artikel header
{
	--header-margin-top: 0;
}

.body.news > .content > .artikel.articlestartimage :is(.image, .imagelink).centered:first-of-type
{
	margin-top: 0 !important;
}

.body.news > .content > .artikel.articlestartimage img,
.body.news > .content > .artikel :is(.image, .imagelink).leftblock img
{
	width: 100%;
}

@container (width > 349px)
{
	.body.news > .content > .artikel :is(.image, .imagelink).float
	{
		max-width: 150px;
		width: 40%;
	}
}

.body.news > .content > .artikel:not(.large) .contentarea > :is(.image, .imagelink) + .textarea
{
	margin-top: 1em;
}

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

.body.news > .content > .artikel .imagelink:not(.productcover) .imagearea
{
	border-radius: var(--medium-border-radius);
	display: inherit;
	height: unset;
	position: relative;
	overflow: hidden;
	width: unset;
}

.body.news > .content > .artikel .imagelink:not(.productcover).portrait .imagearea
{
	padding-top: 130%;
}

.body.news > .content > .artikel .imagelink:not(.productcover).square .imagearea
{
	padding-top: 100%;
}

.body.news > .content > .artikel .imagelink:not(.productcover).landscape .imagearea
{
	padding-top: 56.25%;
}


.body.news > .content > .artikel.hasimage.articlestartimage .imagelink:not(.productcover) .imagearea
{
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.body.news > .content > .artikel .imagelink:not(.productcover) .imagearea > img
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* Shop-Button-Artikel */

.artikel.shoplink:not(:last-child)
{
	--p-margin-bottom: 3.5em;
}

/* Listeneinträge */

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

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

/* Neu im LWS Listeneinträge */

.body.lwsnews ul.content.textliste li
{
	column-gap: .8em;
	display: grid;
	padding: .75em 0;
}

@container (width > 567px) 
{
	.body.lwsnews ul.content.textliste li
	{
		align-items: baseline;
		grid-template-columns: minmax(9em, max-content) auto;
	}
}

.body.lwsnews ul.content.textliste li .onlinedate
{
	color: var(--mediumlight-content-color);
	font-size: .8em;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* HTML-Head/Body usw. */

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

/* Hinweis zur Verwendung von Cookies */

#cookienotice
{
	background-color: #666;
	bottom: 0;
	color: white;
	display: block;
	font-weight: bold;
	line-height: var(--p-line-height);
	opacity: 1;
	padding: 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;
	gap: 1em;
	justify-content: center;
	margin: 0 auto;
	max-width: 1280px;
}

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

	#cookienotice .uibutton
	{
		width: 100%;
	}
}

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

#cookienotice > p > .uibutton
{
	flex: 1 0 auto;
}

/* Anker in Body */

:is(.artikel.listentryanchors .refarea, .body.listentryanchors) > .liste
{
	display: flex;
	column-gap: 3em;
	flex-flow: row wrap;
}

/* Prominente Links */

:is(.artikel.morelinkbutton, .body.morelinkbutton .content .artikel) .textarea > .refarea,
:is(.artikel.listentrieslinkbutton, .body.listentrieslinkbutton .content .artikel) .refarea > .liste
{
	display: grid;
	row-gap: var(--p-margin-top);
}

.artikel.listentrieslinkbutton .refarea > .liste:first-child,
.body.listentrieslinkbutton .content .artikel .refarea > .liste:first-child
{
	margin-top: 0;
}

:is(.artikel.morelinkbutton, .body.morelinkbutton .content .artikel) .textarea > .refarea .link,
:is(.artikel.listentrieslinkbutton, .body.listentrieslinkbutton .content .artikel) .refarea > .liste .link
{
	background-color: transparent;
	border: var(--light-line-width) solid var(--navigation-active-color);
	border-radius: var(--small-border-radius);
	display: revert;
	justify-self: start;
	margin-top: 0;
	padding-bottom: calc(var(--uibutton-vertical-padding) - .4em);
	padding-left: calc(var(--uibutton-horizontal-padding) - .4em);
	padding-right: calc(var(--uibutton-horizontal-padding) - .4em);
	padding-top: calc(var(--uibutton-vertical-padding) - .4em);
}

:is(.artikel.morelinkbutton.centerbuttons, .body.morelinkbutton.centerbuttons .content .artikel) .textarea > .refarea .link,
:is(.artikel.listentrieslinkbutton.centerbuttons, .body.listentrieslinkbutton.centerbuttons .content .artikel) .refarea > .liste .link
{
	justify-self: center;
}

:is(.artikel.morelinkbutton.rightbuttons, .body.morelinkbutton.rightbuttons .content .artikel) .textarea > .refarea .link,
:is(.artikel.listentrieslinkbutton.rightbuttons, .body.listentrieslinkbutton.rightbuttons .content .artikel) .refarea > .liste .link
{
	justify-self: end;
}

:is(.artikel.morelinkbutton.stretchedbuttons, .body.morelinkbutton.stretchedbuttons .content .artikel) .textarea > .refarea .link,
:is(.artikel.listentrieslinkbutton.stretchedbuttons, .body.listentrieslinkbutton.stretchedbuttons .content .artikel) .refarea > .liste .link
{
	justify-self: stretch;
	text-align: center;
}

@container (width < 420px)
{
	:is(.artikel.morelinkbutton, .body.morelinkbutton .content .artikel) .textarea > .refarea .link,
	:is(.artikel.listentrieslinkbutton, .body.listentrieslinkbutton .content .artikel) .refarea > .liste .link
	{
		justify-self: stretch;
		text-align: center;
	}
}

.body a:not(.button):not(.uibutton),
.artikel > * .link,
ul.liste li.haslink > a span:is(.titel, .untertitel)
{
	color: var(--a-link-color);
}

.body.slider .artikel > * a,
.artikel.haslink > a,
ul.liste li.haslink > a,
.body a.invisible
{
	color: inherit !important;
}

:is(.artikel.morelinkbutton, .body.morelinkbutton .content .artikel) .textarea > .refarea .link,
:is(.artikel.morelinkbutton, .body.morelinkbutton .content .artikel) .textarea > .refarea .link > :is(a, a:active, a:visited),
:is(.artikel.listentrieslinkbutton, .body.listentrieslinkbutton .content .artikel) .refarea > .liste .link,
:is(.artikel.listentrieslinkbutton, .body.listentrieslinkbutton .content .artikel) .refarea > .liste .link > :is(a, a:active, a:visited),
:is(.artikel.listentrieslinkbutton, .body.listentrieslinkbutton .content .artikel) .refarea > .liste .link > :is(a, a:active, a:visited) span.titel
{
	color: var(--navigation-active-color) !important;
}

/* Seite */

#pagecontent
{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin-bottom: 0;
	margin-top: 0;
	position: relative;
}

body:is(.wide, .dashboard)
{
	--pg-content-max-width: 1440px;
}

/* Bereiche */

.pgcontentwidth
{
	margin-left: var(--pg-content-margin-left-width);
	margin-right: var(--pg-content-margin-right-width);
	max-width: var(--pg-content-max-width);
	min-width: var(--pg-content-min-width);
	width: var(--pg-content-width);
}

#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: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
	background-color: rgba(0, 0, 0, .35);
}

body:not(.navi):not(.drawer.modal) #layer
{
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	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:is(.drawer, .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);
	opacity: 1;
	order: 1;
	overflow-y: scroll;
	position: fixed;
	top: calc(50vh + var(--pg-header-height));
	z-index: 200000;
}

@media (max-width: 567px)
{
	#drawer
	{
		bottom: 8px;
		left: 8px;
		max-width: calc(100% - 1rem);
		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;
}

/* 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 var(--light-line-color);
		border-top: 1px solid var(--light-line-color);
		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;
}

.form.aupdate button[value="aupdatesubmit"],
.form.adelete button[value="adeleteconf"]
{
	font-weight: bold;
}

.form.aupdate button[value="adelete"],
.form.adelete button[value="adeleteconf"]
{
	--uibutton-color: var(--error-color);
	--uibutton-border-color: var(--error-color);
}

.form.aupdate button[value="adelete"]
{
	margin-right: auto;
	order: -1;
}

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

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

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

/* Kopfzeile */

#globalbody,
#globalheader,
#toplevelnavi
{
	flex: 0 0 100%;
	min-width: var(--pg-content-min-width);
}

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

#globalbody > .body
{
	background-color: var(--light-warning-color);
	border-radius: var(--medium-border-radius);
	margin: var(--body-margin-top) 0;
	padding: var(--bg-text-indent-vertical) var(--bg-text-indent-horizontal);
}

#globalbody .textarea > :is(p, ol, ul):first-child
{
	margin-top: 0;
}

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

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

/* 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: blur(20px) saturate(150%);
		backdrop-filter: blur(20px) saturate(150%);
		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;
		gap: 2em;
	}

	#servicenavi li
	{
		padding: 0;
	}

	#servicenavi li.wui::before
	{
		color: var(--light-content-color);
		font-size: 1.2em;
		padding-right: .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: 1.6em;
	}

	.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-size: 1.25em;
		font-style: normal;
		font-weight: normal;
	}
	
	.breadcrumb > ul > li > *
	{
		color: inherit;
		text-decoration: none;
		z-index: 2;
	}

	#breadcrumb
	{
		align-items: center;
		display: flex;
		flex: 2 1 calc(100% - var(--pg-searchbox-width));
		height: 3em;
		overflow: hidden;
		margin-bottom: 1rem;
		padding-bottom: .2rem;
		padding-top: .2rem;
	}

	body:not(.fe) #breadcrumb > ul
	{
		overflow: hidden;
	}

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

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

	body .breadcrumb > ul li:not(:last-child)::after
	{
		box-shadow: .7px -.7px .4px #777;
	} 
	
	body:not(.touch) .breadcrumb > ul:first-of-type > li:hover,
	body:not(.touch) .breadcrumb > ul li:not(:first-child):hover::before,
	body:not(.touch) .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);
	padding-right: 40px;
	width: 100%
}

.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;
		margin-bottom: 1rem;
		/* padding-bottom: .2rem;
		padding-top: .2rem; */
	}

	body:not(.nobreadcrumb) #searchboxcontainer
	{
		flex: 0 0 var(--pg-searchbox-width);
	}

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

/* Dropdown-Menüs */

div.dropdown
{
	background-color: var(--overlay-bg-color);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
	border: 1px solid rgb(204, 204, 204);
	border-bottom-left-radius: var(--medium-border-radius);
	border-bottom-right-radius: var(--medium-border-radius);
	box-shadow: var(--boxshadow-medium);
	line-height: 1.3;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 1000;
}

/* Suchen-Feld Drop Down */

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

	.qs div.dropdown:not(.active)
	{
		display: none;
	}

	.sitesearchbox.fixed > form
	{
		flex: 0 0 var(--pg-searchbox-width);
		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 > .qs div.dropdown
	{
		max-width: 50vw;
		right: 0;
		width: auto;
	}
}

.qs div.dropdown
{
	--article-margin-top: 0;
	--article-margin-bottom: 0;

	border-top-left-radius: var(--medium-border-radius);
	border-top-right-radius: var(--medium-border-radius);
	border: 0;
	overflow-y: scroll;
}

.sitesearchbox > .qs div.dropdown
{
	max-height: calc(95vh - 72px);
	right: -8px;
	top: 118%;
	width: calc(100% + 16px);
}

.sitesearchbox.fixed > .qs div.dropdown
{
	max-height: calc(95vh - 40px);
}

.searchview.qs div.dropdown
{
	left: 0;
	top: calc(100% - .5rem);
}

.qs div.dropdown .qsrubr
{
	--text-color: var(--mediumlight-content-color);

	align-items: center;
	cursor: pointer;
	display: grid;
	grid-template-columns: [dropdownctrl] 12px [text] auto;
	gap: .5em;
	margin-bottom: 0;
	margin-top: 0;
	padding: .4em .6em;
}


.qs div.dropdown .qsrubr::before
{
	font-family: var(--symbol-font);
	font-size: .85em;
	font-style: normal;
	font-weight: normal;
}

.qs div.dropdown .qsrubr.hidden::before
{
	content: "\F0033";
}

.qs div.dropdown .qsrubr:not(.hidden)::before
{
	content: "\F0013";
}

.qs div.dropdown .qsrubr:first-of-type
{
	padding-top: .4em;
}

.qs div.dropdown .qsrubr:not(:first-of-type)
{
	border-top: var(--thinline);
	/* margin-top: .5em; */
}

.qs div.dropdown .qsrubr .badge
{
	background-color: var(--navigation-active-color);
	color: white;
	font-size: .85em;
	padding: .08rem .4rem .1rem .4rem;
}

.qs div.dropdown ul
{
	list-style-type: none;
	margin: 0 !important;
	padding: 0 0 1px 0 !important;
}

.sitesearchbox > form div.dropdown .qsfixedfnc
{
	/* --text-color: white; */

	background-color: var(--bg-color);
	border-radius: .3em;
	bottom: 0;
	margin: .3em !important;
	padding: 0 0 1px 0;
	position: sticky;
}

.qs div.dropdown ul > li
{
	margin-bottom: 0 !important;
	margin-top: 0 !important;
	padding: 1px;
}

.qs div.dropdown ul > li:not(:first-child):not(.moreitems)
{
	border-top: var(--thin-line-width) dotted var(--light-line-color);
	margin-top: 1px;
}

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

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

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

.qs div.dropdown ul > li.moreitems > span
{
	border: var(--thin-line-width) solid var(--medium-line-color);
	border-radius: var(--round-button-border-radius);
	color: var(--light-content-color);
	cursor: pointer;
	display: inline-block;
	height: 16px;
	line-height: 1.1;
	width: 16px;
}

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

.qs div.dropdown ul:not(.qsfixedfnc) > li a
{
	align-items: center;
	display: grid;
	grid-template-columns: [text] auto [nextview] 20px;
	gap: .8em;
}

.qs div.dropdown ul:not(.qsfixedfnc) > li.hascover a
{
	grid-template-columns: [image] 50px [text] auto [nextview] 20px;
}

.qs div.dropdown ul:not(.qsfixedfnc) > li:not(.moreitems):not(.nolink) a::after
{
	content: '\F0067';
	grid-column: nextview;
	font-family: var(--symbol-font) !important;
	font-size: .9em;
	font-style: normal;
	font-weight: normal;
	text-align: right;
}

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

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

.qs div.dropdown ul > li a span.text
{
	font-style: inherit;
	grid-column: text;
	grid-row: 1;
}

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

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

.sitesearchbox > form div.dropdown .qsfixedfnc > li a
{
	--a-link-color: white;

	font-weight: bold;
}

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

@media (min-width: 1024px)
{
	.qs div.dropdown
	{
		font-size: 1.1em;
		min-width: 28em;
	}

	.qs div.dropdown .qsrubr
	{
		padding: .6em 1em;
	}

	.qs div.dropdown .qsrubr:first-of-type
	{
		padding-top: .7em;
	}
	
	.qs .qsrubr:not(:first-of-type)
	{
		margin-top: .5em;
	}

	.qs div.dropdown ul > li.moreitems > span
	{
		font-size: 1.1em;
		height: 20px;
		line-height: 1.3;
		width: 20px;
	}

	.sitesearchbox > form div.dropdown .qsfixedfnc
	{
		margin-top: 1.3em;
	}

	.qs div.dropdown ul > li a,
	.qs div.dropdown ul > li.nolink
	{
		padding: .6em 1em;
	}

	.qs div.dropdown ul > li.hascover a
	{
		grid-template-columns: [image] 64px [text] auto [nextview] 20px;
		gap: 1em;
	}
}

/* Infoheader */

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

body.fulltlnav #toplevelnavi
{
	margin-bottom: 3rem;
}

body.fulltlnav #toplevelnavi,
body.fulltlnav :not(#toplevelnavi) + #navi + #content
{
	margin-top: .8rem;
}

body:not(.fulltlnav) #toplevelnavi
{
	border-bottom: var(--thinline);
	margin-bottom: 2.5rem;
}

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

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

#infoheader
{
	background-position-x: left;
	background-position-y: bottom !important;
	background-repeat: no-repeat;
	background-size: contain;
	height: 90px;
	margin-bottom: 8px;
}

@media (min-width: 768px)
{
	#infoheader
	{	
		width: calc(var(--pg-navigation-width) + var(--pg-navigation-horizontal-margin));
	}
}

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

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

#navibar
{
	bottom: 0;
	position: absolute;
	right: 0;
}

#navibar > ul
{
	align-items: end;
	column-gap: 4.5em;
	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
{
	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 */

#navi a
{
	color: var(--mediumdark-content-color);
}

@media (max-width: 767px)
{
	#navi 
	{
		align-items: stretch;
		align-content: start;
		background-color: var(--overlay-bg-color);
		-webkit-backdrop-filter: blur(20px) saturate(150%);
		backdrop-filter: blur(20px) saturate(150%);
		box-shadow: var(--boxshadow-medium);
		display: grid;
		grid-template-columns: auto 56px;
		justify-content: stretch;
		left: -420px;
		height: 100%;
		max-width: 414px;
		min-width: 320px;
		overflow-y: scroll;
		position: fixed;
		top: 0;
		transition: left .2s ease-out;
		z-index: 150500;
	}
	
	body.navi #navi
	{
		left: 0;
	}

	#navi :is(h1, h2, h3, h4)
	{
		border-bottom: 1px solid var(--light-line-color);
		margin-bottom: 0 !important;
		margin-top: 0 !important;
		padding: .6rem .4rem;
	}

	#navi > :is(ul, div.servicenavi)
	{
		grid-column: 1 / -1;
	}

	#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 transparent;
		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 > :is(.breadcrumb.global.mobileonly, div.servicenavi)
	{
		font-size: .85em;
		padding-left: 8px;
	}

	#navi > :is(.breadcrumb.global.mobileonly, #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: column nowrap;
		list-style: none;
		padding: 0;
	}

	#navi > div.servicenavi > ul > li:not(.hasswitch)
	{
		padding: .5em .5em .5em 2em;
	}

	#navi > div.servicenavi > ul > li:not(.hasswitch)::before
	{
		right: calc(100% - 1.8em);
		position: absolute;
	}

	#navi > div.servicenavi > ul > li.wui.ui-help::before
	{
		right: calc(100% - 2.4em);
	}

	#navi > div.servicenavi > ul > li.hasswitch
	{
		text-align: right;
	}
}

@media (max-width: 461px)
{
	#navi > #closebtcontainer
	{
		padding: 8px;
	}
}

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

	#navi #naviclosebutton
	{
		display: none;
	}
}

@media (min-width: 768px)
{
	#navi
	{
		/* clear: both;
		float: left;
		margin-right: var(--pg-navigation-horizontal-margin); */
		order: 10;
	}

	#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-bottom: .2em;
		margin-left: 1em;
	}
	
	#navi > ul > li ul > li
	{
		margin-top: 1.1em
	}

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

#navi
{
	width: var(--pg-navigation-width);
}

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

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

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

#navi li > span
{
	color: var(--extralight-content-color);
}

#navi li.hassubmenu > span
{
	color: var(--medium-content-color);
}

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

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

#navi :is(.buttonlink, .shoplink) > a
{
	background-color: var(--uibutton-bg-color);
	border: 1px solid var(--uibutton-border-color);
	color: var(--uibutton-color);
	display: inline-block;
	padding: .5rem .6rem .4rem .6rem;
}

#navi :is(.buttonlink, .shoplink) > a::after
{
	color: var(--uibutton-color) !important;
	content: "\A0\F0062" !important;
	font-family: var(--symbol-font);
	font-style: normal;
	font-weight: normal;
}

@media (min-width: 768px)
{
	#navi :is(.buttonlink, .shoplink) > a
	{
		border-radius: .4rem;
	}
}

body:not(.touch) #navi :is(.buttonlink, .shoplink):not(.inactive):not(.selected):hover > a
{
	color: var(--uibutton-color);
}

/* Content */

#content
{
	font-size: 1.1em;
}

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

@media (min-width: 768px)
{
	#navibar,
	#navi:not(.weakmobileonly) + #content,
	body.emptynavicolumn :not(#navi):not(.weakmobileonly) + #content,
	body.accessdenied #pagecontent > #content.body
	{
		/* float: right; */
		width: calc(100% - var(--pg-navigation-width) - var(--pg-navigation-horizontal-margin));
	}

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



/* Sektionen */

.body
{
	container-name: in-parent in-body;
	margin-bottom: var(--body-margin-bottom);
	margin-top: var(--body-margin-top);
	width: 100%;
}

.body.titlearea,
.body + .body.hasheader:not(.hasimageheader),
.body:has(article.artikel.bodyintro)
{
	margin-top: calc(var(--body-margin-top) * 3);
	margin-bottom: calc(var(--body-margin-bottom) * 3);
}

.body#content,
.body > .body:first-child
{
	margin-top: 0 !important;
}

.body#content,
.body > .body:last-child
{
	margin-bottom: 0 !important;
}

.body.switchcontroller:not(.extendedmarginbottom)
{
	margin-bottom: 0 !important;
}

.body.switchcontroller:not(.extendedmargintop)
{
	margin-top: 0 !important;
}

body.accessdenied #pagecontent > #toplevelnavi,
body.accessdenied nav,
body.accessdenied #pagecontent > #content.body
{
	background-color: #dcdcdc;
}

body.accessdenied #pagecontent > #toplevelnavi
{
	height: 110px;
}

body.accessdenied nav 
{
	display: block;
	height: 340px;
}

body.accessdenied #pagecontent > #content.body
{
	height: 380px;
}

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

/* */

.body p.hitsval
{
	text-align: left;
}

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

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

/* Body-Layout */

.body:is(.cols-nn, .cols-lm, .cols-ml, .cols-mn, .cols-fm-ml, .cols-fm-lm, .cols-lnl)
{
	display: grid;
	gap: 4rem;
	grid-template-rows: auto;
}

@media (min-width: 568px)
{
	.body:is(.cols-nn, .cols-lm, .cols-ml, .cols-mn, .cols-fm-ml, .cols-fm-lm, .cols-lnl) > .body
	{
		margin-top: 0 !important;
	}

	.body.cols-nn
	{
		grid-template-columns: 1fr 1fr;
	}

	.body.cols-lnl,
	.body.cols-lm,
	.body.cols-fm-lm
	{
		grid-template-columns: 1fr 2fr;
	}

	.body.cols-ml,
	.body.cols-mn,
	.body.cols-fm-lm
	{
		grid-template-columns: 2fr 1fr;
	}
}

@media (min-width: 768px)
{
	.body.cols-lnl
	{
		grid-template-columns: 1fr 2fr 1fr;
	}

	.body.cols-lm,
	.body.cols-fm-lm
	{
		grid-template-columns: 1fr 3fr;
	}

	.body.cols-ml,
	.body.cols-fm-lm
	{
		grid-template-columns: 3fr 1fr;
	}

	.body.cols-mn
	{
		grid-template-columns: 4fr 2fr;
	}
}

/* LWS-Intro mit modifizierter Spaltenverteilung */

@media (max-width: 567px)
{
	body.introscreen .body.cols-lnl
	{
		grid-template-areas: "main" "news" "products";
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	body.introscreen .body.cols-lnl
	{
		grid-template-columns: 2fr 1fr;
		grid-template-areas: "main products" "news products";
	}
}

@media (max-width: 767px)
{
	body.introscreen .body.cols-lnl > .body:nth-of-type(0n + 1)
	{
		grid-area: news;
	}

	body.introscreen .body.cols-lnl > .body:nth-of-type(0n + 2)
	{
		grid-area: main;
	}

	body.introscreen .body.cols-lnl > .body:nth-of-type(0n + 3)
	{
		grid-area: products;
	}
}

.relative
{
	position: relative;
}

/* One Pager */

body.op .body
{
	position: relative;
}

body.op:not(.fullwidth) :not(#globalbody).body:not(.grid):not(.fullwidth) > .content
{
	margin-left: auto;
	margin-right: auto;
	max-width: calc(var(--pg-content-max-width) - 84px);
}

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

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

body.op :not(#globalbody).body.vh.half
{
	min-height: 50vh;
}

body.op :not(#globalbody).body.vh.twothird
{
	min-height: 67vh;
}

body.op :not(#globalbody).body.vh.fourfifth
{
	min-height: 80vh;
}

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

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

body.op :not(#globalbody).body.contentflexbox.centeredcontent > .content
{
	justify-content: center;
}

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

body.op :not(#globalbody).body > .content,
body.op :not(#globalbody).body.textarea > *
{
	margin-left: auto;
	margin-right: auto;
	max-width: var(--pg-content-max-width);
}

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

body.op :not(#globalbody)ol
{
	text-align: left;
}

body.op :not(#globalbody)ol li
{
	margin-top: .6rem;
}

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

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

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

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

body.op :not(#globalbody).body:not(.grid) .artikel:last-child
{
	margin-bottom: 0;
} */

body.op :not(#globalbody).body .artikel > :is(.contentarea, .refarea)
{
	margin-left: auto;
	margin-right: auto;
	max-width: 960px;
}

#scrollindicator
{
	--text-color: white;

	bottom: .8rem;
	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 :not(#globalbody).body.textarea:first-of-type
	{
		padding: 1rem 1.5rem;
	}

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

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

	body.op :not(#globalbody).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 var(--light-line-color);
	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;
}

/* Listenrahmen vorläufig */

.border.border1
{
	border: var(--hairline);
	border-top-left-radius: var(--medium-border-radius);
	border-top-right-radius: var(--medium-border-radius);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

body:not(.fe) .border.border1
{
	overflow: hidden;
}

.border.border2 > :first-child
{
	border-top: var(--hairline);
	border-top-left-radius: var(--medium-border-radius);
	border-top-right-radius: var(--medium-border-radius);
}

body:not(.fe) .border.border2 > :first-child
{
	overflow: hidden;
}

.border.border2 > *
{
	border-left: var(--hairline);
	border-right: var(--hairline);
}

.border.border2 > :not(span):not(.fe):last-of-type
{
	border-bottom: var(--hairline);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Liste (alternativ für Events und Jobbörse) */

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

.listview.divlist.mediumborder
{
	padding: .4em;
}

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

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

@container (width > 639px)
{
	.listview.divlist.twocolumns
	{
		grid-template-columns: repeat(2, minmax(25%, 1fr));
		/* 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;
	z-index: 10;
}

@container (width > 639px)
{
	.listview.divlist > .row.labelrow
	{
		font-size: .8em;
		padding: 1.5em 2em 1em 2em;
	}
}

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

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

@container (width < 640px)
{
	.listview.divlist > .row.listitem:first-child,
	.listview.divlist > .row.labelrow + .row.listitem
	{
		border-top-left-radius: .5em;
		border-top-right-radius: .5em;
	}

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

@container (width > 639px)
{
	.listview.divlist > .row.listitem:first-child,
	.listview.divlist > .row.labelrow + .row.listitem
	{
		border-top-left-radius: .5em;
	}

	.listview.divlist > .row.listitem:nth-child(2),
	.listview.divlist > .row.labelrow + .row.listitem + .row.listitem
	{
		border-top-right-radius: .5em;
	}

	.listview.divlist > .row.listitem:nth-last-child(2)
	{
		border-bottom-left-radius: .5em;
	}

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

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

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

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

.listview.divlist > .row.listitem > :first-child > *
{
	flex: 0 0 min-content;
}

.listview.divlist > .row.listitem > :first-child > .uibutton
{
	align-self: end;
	font-size: 1.2em;
	justify-content: end;
	padding-right: 0;
}

/* Eventliste */

.listview.divlist.eventlist > .row.listitem.event div.infosticker .tag.webinar
{
	background-color: var(--error-bg-color);
	border-color: var(--error-bg-color);
	color: var(--error-color);
}

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

	.listview.divlist.eventlist > .row.listitem > :first-child > span.uibutton
	{
		align-self: center;
	}
}

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

@media (min-width: 1024px)
{
	.listview.divlist.eventlist > .row.listitem > :first-child
	{
		gap: 4em;
		padding: 2.5em 1em 2.5em 3em;
	}
}

/* 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 .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.infosticker
{
	background-color: white;
	border-radius: .8em;
	box-shadow: var(--boxshadow-soft-medium);
	overflow: hidden;
}

div.infosticker,
div.infosticker > div.datetime
{
	display: flex;
}

div.infosticker > div.place .city
{
	font-weight: bold;
}

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

div.infosticker > div.datetime > div.date:not(.small)
{
	font-size: 1.4em;
}

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

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

div.infosticker > div.type
{
	margin-bottom: .6em;
	margin-top: .4em;
}

@media (max-width: 567px)
{
	div.infosticker
	{
		padding: .3em .8em;
		text-align: center;
	}

	div.infosticker > div:is(.place, .datetime, .type)
	{
		flex: 0 0 100%;
	}

	div.infosticker,
	div.infosticker > div.datetime
	{
		align-items: baseline;
		column-gap: .4em;
		flex-flow: row wrap;
	}

	div.infosticker > div.place
	{
		color: var(--navigation-active-color);
	}

	div.infosticker > div.place::after
	{
		content: " |";
	}

	div.infosticker > div.datetime
	{
		justify-content: center;
	}
}

@media (min-width: 568px)
{
	div.infosticker,
	div.infosticker > div.datetime
	{
		align-items: stretch;
		flex-flow: column;
		text-align: center;
	}

	div.infosticker > div.datetime
	{
		padding: .5em;
	}

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

	div.infosticker > div.place
	{
		background-color: var(--navigation-active-color);
		color: white;
		padding: .3em;
	}

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

	.listview.divlist.eventlist > .row.listitem.event div.infosticker
	{
		flex: 0 0 8.5em;
	}

	.listview.divlist.eventlist > .row.listitem.event div.event
	{
		flex: 1 1 auto;
	}
}

@media (min-width: 1024px)
{
	div.infosticker > div.datetime
	{
		padding: .8em;
	}

	.listview.divlist.eventlist > .row.listitem.event div.infosticker
	{
		flex: 0 0 9em;
	}
}

.listview.divlist.eventlist > .row.listitem.event div.badges
{
	margin-bottom: 1em;
}

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

.listview.divlist.eventlist > .row.listitem.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: var(--tag-font-size);
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
}

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

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

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


/* Temporär: Navigation oben */

.body.navigationbar
{
	margin-bottom: .5rem;
	margin-top: 1rem;
}

.navigationbar .artikel
{
	align-items: center;
	display: grid !important;
	grid-template-columns: 1fr [left] 3fr [middle] 1fr [right];
	justify-content: space-between;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	max-width: var(--pg-content-max-width);
	min-height: 30px;
	padding: .8em 0;
}

.navigationbar.twocols .artikel
{
	grid-template-columns: 1fr [left] 1fr [right];
}

.navigationbar:not(.twocols) .artikel
{
	grid-template-columns: 1fr [left] 3fr [middle] 1fr [right];
}

@container (width < 568px)
{
	.navigationbar
	{
		font-size: .8em;
	}

	.navigationbar .artikel
	{
		padding: .6em .4em;
	}

	.navigationbar .artikel > p:first-child > .uibutton.back span
	{
		display: none;
	}
}

.navigationbar .artikel > p
{
	align-items: center;
	display: flex !important;
	flex-flow: row nowrap;
	flex: 1 1 auto;
	gap: .8em 1.2em;
	margin-top: 0;
}

.navigationbar .artikel > p:first-of-type
{
	justify-content: start;
}

.navigationbar .artikel > p:not(:only-of-type):last-of-type
{
	justify-content: end;
}

.navigationbar .artikel > p:not(:first-of-type):not(:last-of-type)
{
	justify-content: center;
}

/* 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 var(--light-line-color); 
	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;
	bottom: 0;
	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 .bx-slider
{
	list-style: none;
	margin: 0;
	padding: 0;
}

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

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

.body.slider .bx-controls a
{
	background: var(--uibutton-bg-color);
	border-color: var(--uibutton-border-color);
	color: var(--uibutton-color);
}

.body.slider .bx-controls .bx-controls-direction a
{
	font-family: var(--symbol-font);
	font-size: 1.5em;
	font-style: normal;
	font-weight: normal;
	height: 32px;
	margin-top: -16px;
	outline: 0;
	position: absolute;
	top: 50%;
	width: 32px;
	z-index: 1100;
}

.body.slider .bx-controls .bx-prev
{
	left: 10px;
}

.body.slider .bx-controls .bx-prev::before
{
	content: '\F0050';
}

.body.slider .bx-controls .bx-next
{
	right: 10px;
}

.body.slider .bx-controls .bx-next::before
{
	content: '\F0060';
}

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

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

.body.slider .bx-controls .bx-pager a
{
	border-radius: var(--round-button-border-radius);
	border-style: solid;
	border-width: 1px;
	display: block;
	text-indent: -10000px;
	z-index: 1100;
}

.body.slider .bx-controls .bx-pager a.active
{
	background: var(--uibutton-selected-bg-color);
	border-color: var(--uibutton-selected-border-color);
	color: var(--uibutton-selected-color);
}

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

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

.body.helpview
{
	display: grid;
	grid-template-columns: auto;
}

.body.helpview > div.searchview
{
	padding-top: 1rem;
	position: relative;
	z-index: 100;
}

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

.body.helpview > div.searchview input[type="search"]
{
	border-right: 0;
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
}

.body.helpview > div.searchview input[type="search"] ~ button#action_search
{
	border: var(--input-border);
	background-color: #c4c4c4;
	border-bottom-right-radius: var(--round-button-border-radius);
	border-top-right-radius: var(--round-button-border-radius);
	padding-left: 10px;
	padding-right: 10px;
}

.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 > :is(h2, h3, h4)
{
	margin-top: 0 !important;
}

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

/* 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.drawer header > .headarea > .head
{
	align-items: baseline;
	cursor: pointer;
	display: flex;
	gap: .5em;
}

.body.helpview div.main > .artikel.faqentries.drawer header > .headarea > .head::before
{
	border: 1px solid black;
	border-radius: 9999px;
	bottom: .2em;
	font-family: var(--symbol-font);
	font-size: .7em;
	font-style: normal;
	font-weight: normal;
	height: 1.2em;
	line-height: 1.2;
	position: relative;
	text-align: center;
	width: 1.2em;
}

.body.helpview div.main > .artikel.faqentries.drawer:not(.opened) header > .headarea > .head::before
{
	content: "\F0032";
}
	
.body.helpview div.main > .artikel.faqentries.drawer.opened header > .headarea > .head::before
{
	content: "\F0012";
}

.body.helpview div.main > .artikel.faqentries header > .headarea > .head .badge
{
	font-weight: normal;
}

.body.helpview div.main > .artikel.faq .refarea
{
	margin-top: calc(var(--body-margin-top) * 2);
}

.body.helpview div.main > .artikel:is(.faq, .faqentries) ul.liste > li.anchor,
.body.helpview div.main > .artikel.faqentries.refarea > ul > li:not(.file)
{
	display: block;
}

.body.helpview div.main > .artikel:is(.faq, .faqentries) ul.liste > li.anchor,
.body.helpview div.main > .artikel.results ul.liste > li,
.body.helpview div.main > .artikel.faqentries.refarea > ul > li:not(.file)
{
	padding-left: 2.5em;
	position: relative;
}

.body.helpview div.main > .artikel:is(.faq, .faqentries) ul.liste > li.anchor,
.body.helpview div.main > .artikel.results ul.liste > li,
.body.helpview div.main > .artikel.faqentries.refarea > ul > li:not(.file),
.body.helpview div.main > .artikel:is(.latestarticles, .results) ul.liste > li
{
	padding-bottom: var(--extrasmall-row-gap);
	padding-top: var(--extrasmall-row-gap);
}

.body.helpview div.main > .artikel:is(.faq, .faqentries) ul.liste > li.anchor,
.body.helpview div.main > .artikel:is(.latestarticles, .results) ul.liste > li
{
	border-top: var(--thin-line-width) dashed var(--light-line-color);
}

.body.helpview div.main > .artikel.faqentries ul.liste > li.anchor.active
{
	background-color: var(--light-bg-color);
}

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

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

.body.helpview.faq div.main > .artikel.faq ul.liste > li.anchor::before
{
	content: "\F0062";
}

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

.body.helpview div.main > .artikel.faqentries ul.liste > li.anchor:hover::before,
.body.helpview div.main > .artikel.faqentries ul.liste > li.anchor.active::before
{
	color: white;
	font-size: .9em;
}

.body.helpview div.main > .artikel.faqentries ul.liste > li.anchor:hover::before
{
	background-color: var(--sym-color);
	border: 1px solid var(--sym-color);
}

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

.body.helpview div.main > .artikel.faqentries ul.liste > li.anchor.active .link:not(.anchor)::after
{
	content: "";
}

.body.helpview div.main > .artikel:is(.latestarticles, .results) li
{
	display: flex;
	flex-flow: row wrap;
	gap: .5em;
}

.body.helpview div.main > .artikel:is(.latestarticles, .results) li > a
{
	flex: 1 1 100%;
}

.body.helpview div.main > .artikel:is(.latestarticles, .results) .tagarea
{
	display: block;
}

.body.helpview div.main > .artikel.faq .datearea :is(.tag, .taglabel),
.body.helpview div.main > .artikel:is(.latestarticles, .results) li .tagarea :is(.tag, .taglabel)
{
	border: 1px solid var(--light-content-color);
	padding: .15rem .35rem;
}

.body.helpview div.main > .artikel:is(.latestarticles, .results) li .tagarea:not(.info) .tag
{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.body.helpview div.main > .artikel:is(.latestarticles, .results) li .tagarea.info .tag
{
	border-top-left-radius: var(--small-border-radius);
	border-bottom-left-radius: var(--small-border-radius);
}
.body.helpview div.main > .artikel.faq .datearea .tag,
.body.helpview div.main > .artikel:is(.latestarticles, .results) li .tagarea .tag
{
	border-top-right-radius: var(--small-border-radius);
	border-bottom-right-radius: var(--small-border-radius);
}

@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
	{
		grid-template-columns: 25% auto;
	}

	.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: var(--thin-line-width) solid #777; */
		margin: 2rem auto;
		max-width: 800px;
		padding: 2rem;
	}
}

/* Body mit seitlichem Filter */

@media (min-width: 768px)
{
	.body.aside
	{
		align-items: start;
		column-gap: var(--pg-navigation-horizontal-margin);
		display: grid;
		grid-template-columns: var(--pg-navigation-width) auto;
		grid-template-rows: auto auto;
	}

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

	.body.aside > .artikel.interactionsbox
	{
		--article-margin-bottom: 0;
		--article-margin-top: 0;

		grid-column: 1;
		grid-row: 1 / -1;
		padding: var(--bg-text-indent-vertical) var(--bg-text-indent-horizontal);
	}

	.body.aside > .artikel.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 > :is(.content, .contentarea)
{
	display: grid;
}

.grid > :is(.content, .contentarea) > *
{
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

@container (width > 449px) 
{
	.grid > :is(.content:not(.static), .contentarea)
	{
		align-items: stretch;
	}

	.grid > .content:not(.static) > .listnavibox
	{
		grid-column: 1 / -1;
	}

	.grid:not(.disablelarge) > .content:not(.static) > .large
	{
		grid-column: 1 / -1;
	}

	.grid > .content:not(.static) > *.wideflex
	{
		grid-column-end: span 2
	}
}

@container (width > 567px) 
{
	.grid.twocolumns > :is(.content:not(.static), .contentarea),
	.grid:not(.twocolumns):not(.fourcolumns) > :is(.content:not(.static), .contentarea),
	.grid.fourcolumns > :is(.content:not(.static), .contentarea)
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

@container (width < 640px) 
{
	.grid > :is(.content:not(.static), .contentarea)
	{
		column-gap: var(--small-column-gap);
		row-gap: var(--small-column-gap);
	}
}

@container (width > 639px)
{
	.grid > :is(.content:not(.static), .contentarea)
	{
		column-gap: var(--medium-column-gap);
		row-gap: var(--medium-row-gap);
	}

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

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

@container (width > 639px) and (width < 960px)
{
	.grid.fourcolumns > :is(.content:not(.static), .contentarea)
	{
		grid-template-columns: repeat(3, 1fr);
	}
}

@container (width > 959px) 
{
	.grid.fourcolumns > :is(.content:not(.static), .contentarea)
	{
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Fußzeile */

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

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

#globalfooter ul
{
	display: flex;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

#fnotice
{
	grid-area: notice;
}

#socialmedia
{
	align-items: center;
	column-gap: var(--small-column-gap);
	display: grid;
	grid-area: social;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: min-content min-content;
}

#socialmedia > p
{
	grid-column: 1 / -1;
	grid-row: 1;
	margin-top: 0;
}

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

@media (max-width: 567px)
{
	#globalfooter
	{
		gap: var(--small-column-gap);
		grid-template-areas: "social" "notice";
	}

	#globalfooter ul
	{
		flex-flow: column nowrap;
	}

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

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

@media (min-width: 568px)
{
	#globalfooter
	{
		gap: var(--medium-column-gap);
		grid-template-areas: "notice social";
		grid-template-columns: 3fr auto;
	}

	#globalfooter ul
	{
		flex-flow: row wrap;
	}

	#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%;
	}
}

/* Notification Center */

#notificationcenter
{
	bottom: 3vw; 
	display: flex;
	flex-flow: column nowrap;
	justify-content: end;
	min-width: 400px; 
	pointer-events: none; 
	position: fixed; 
	right: 3vw; 
	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(--light-bg-color);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
	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;
}

/* Tags und Badges */

.badges,
.tagarea,
.tags
{
	display: flex;
	flex-flow: row wrap;
	gap: .3em;
	line-height: normal !important;
}

.taglabel
{
	background-color: var(--light-content-color);
	border-top-left-radius: var(--small-border-radius);
	border-bottom-left-radius: var(--small-border-radius);
	color: white;
}

.tag
{
	background-color: white;
	border-color: var(--light-content-color);
	border-radius: var(--large-border-radius);
	color: var(--light-content-color);
}

.taglabel,
.tag
{
	border-style: solid;
	border-width: 1px;
	box-decoration-break: clone;
	font-size: var(--tag-font-size);
	font-weight: normal;
	letter-spacing: normal;
	padding: .15rem .35rem;
	text-decoration: none;
	text-transform: none;
}

.taglabel + .tag
{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.tag.invisible
{
	border-color: var(--extralight-content-color);
	border-style: dotted;
	color: var(--extralight-content-color);
}

.tag.date,
.tag.onlinedate
{
	background: transparent;
	border: none;
	padding: 0;
}

.tag.onlinedate::before
{
	content: "\0031";
	font-family: var(--symbol-font) !important;
	font-size: 1.25em;
	font-style: normal;
	font-weight: normal;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	padding-right: .35em;
}

.tag.keyword
{
	background-color: #ddd;
	border-color: #ddd;
	color: #555;
}

.tag.or
{
	border-color: #9bc59c;
}

.tag.not
{
	border-color: #c56973;
}

.tag.clickable
{
	cursor: pointer;
}

.tag.clickable:hover,
.tag.clickable:active,
.willbetarget
{
	border-color: var(--confirmation-color);
	outline: 1px solid var(--confirmation-color);
}

.tag.clickable:active
{
	background-color: var(--confirmation-color);
	color: white;
}

*[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: var(--small-font-size);
	font-weight: bold;
	min-height: 12px;
	position: absolute;
	right: -3px;
	text-align: center;
	top: -3px;
	min-width: 12px;
}

*[data-badge]:not([data-badge=""])::after
{
	padding: .3em .5em;
}

.badge
{
	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
{
	font-size: var(--tag-font-size);
}

.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
{
	color: white;
}

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

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

.badge.notice
{
	background-color: var(--warning-color);
	color: rgba(0, 0, 0, .7);
}

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

.headarea .badge
{
	font-family: var(--body-font);
	font-size: min(.9em, 12px);
}


/* Datums- und Stichwortgruppen */

.datearea
{
	display: none;
}

.datearea,
.tagarea
{
	margin-bottom: var(--p-margin-bottom);
	margin-top: var(--p-margin-top);
}

.body .artikel.showdatearea .datearea,
.body.showdatearea .artikel .datearea,
.body .liste.showdatearea li .datearea,
.body.showdatearea .liste li .datearea,
.showonlinedates .content:not(.static) .datearea
{
	display: revert;
}


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

.listnavibox
{
	text-align: center;
}

.listnavibox:not(.top):not(:has(+ .content))
{
	margin-top: var(--p-margin-top);
}

.listnavibox:has(+ .content)
{
	margin-bottom: var(--p-margin-bottom);
}

.listnavibox ul.hits
{
	display: flex;
	flex-flow: row nowrap;
	font-family: var(--symbol-font);
	font-size: 21px;
	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: 5px 5px;
}

.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:is(.iframe, .youtube) iframe
{
	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 var(--light-line-color);
	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: Bildzoom-Artikel */

.pagedescr .image
{
	height: 180px;
	margin-top: 1em;
	max-width: auto !important;
	min-width: auto !important;
	position: relative;
	width: auto !important;
}

.pagedescr .image img
{
	height: 100%;
	width: auto !important;
}

.pagedescr div.image::before
{
	background-color: rgba(0, 0, 0, .3);
	border-radius: var(--small-border-radius);
	bottom: 10px;
	color: white !important;
	content: "\F0152";
	font-family: var(--symbol-font);
	font-size: 30px;
	font-style: normal;
	font-weight: normal;
	padding: 0 .2em;
	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 .image:not(.thumbnail) .imagearea img.productcover
{
	max-width: 220px;
	width: 80%;
}

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

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

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

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

article#mediaplayer
{
	background-color: var(--light-bg-color);
	border-radius: var(--medium-border-radius);
	box-shadow: var(--boxshadow-soft-medium);
	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-height: 95vh;
	max-width: 1024px;
	width: 90%;
}

article#mediaplayer .close
{
	position: absolute;
	right: 1em;
	top: 1.5em;
}

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 :is(audio, video, iframe), 
article.hotspotvideo video
{
	margin: 0 auto;
}

article#mediaplayer :is(video, iframe)
{
	border: var(--thinline);
}

article#mediaplayer video
{
	background-color: black;
}

article#mediaplayer iframe
{
	height: 100%;
	position: absolute;
	right: 2em;
	top: 0;
}

/* 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;
	opacity: 1;
	position: absolute;
	width: 60px;
	z-index: 10;
	transform: translate(-50%, -50%) scale(1);
	transition: all .2s ease;
}

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

article.hotspots .infobutton.active
{
	transform: translate(-50%, -53%) scale(1.3);
}

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% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
	18% { transform: translate(-50%, -50%) scale(1.3); }
	38% { transform: translate(-50%, -50%) scale(.8); }
	56% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
	75% { transform: translate(-50%, -50%) scale(1); }
	100% { transform: translate(-50%, -50%) scale(1); }
}

article.hotspots .infobutton:is(.video, .embed) 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])::after
{
	box-shadow: -1px 1px 1px 0 var(--boxshadow-light-color);
	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])::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])::after
{
	background-color: white;
}

article.hotspots .overlay[data-show-on-open]
{
	background-color: var(--light-bg-color);
	border-radius: var(--medium-border-radius);
}

article.hotspots .overlay:not([data-show-on-open])
{
	box-shadow: var(--boxshadow-soft-medium);
}

article.hotspots .overlay.active .closebutton
{
	font-size: .7em;
	position: absolute;
	right: 0;
	top: 0;
}

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

article.hotspots .overlay .artikel.overlaycontent 
{
	--article-margin-bottom: 0;
	--article-margin-top: 0;

	padding: 1em 1.5em; 
}

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

article.hotspots .artikel.overlaycontent header + .textarea > p:first-child
{
	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-radius: var(--small-border-radius);
	border-spacing: 0 1px;
	margin: 0 auto;
	overflow: hidden;
	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 .player.audio,
article.video.html5video .player.video
{
	width: inherit;
}

.video.youtube .iframecont
{
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	max-width: 1280px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.video.youtube .iframecont:has( iframe[data-src])
{
	cursor: pointer;
}

.video.youtube .iframecont iframe[data-src] + .youtubenotice
{
	--text-color: white;
	--a-link-color: white;

	background-color: rgba(0, 0, 0, .6);
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
}

.video.youtube .iframecont iframe[data-src] + .youtubenotice p:first-child::before
{
	color: white;
	content: "\F0173";
	display: block;
	font-family: var(--symbol-font) !important;
	font-size: 2em;
	font-style: normal;
	font-weight: normal;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	margin-bottom: .2em;
}

.video.youtube .iframecont iframe:not([data-src]) + .youtubenotice
{
	display: none;
}
	
.video.youtube .iframecont iframe[data-src] + .youtubenotice > p
{
	left: 1em;
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
}	

@container (width > 439px) 
{
	.video.youtube .iframecont iframe[data-src] + .youtubenotice
	{
		padding-left: 4em;
		padding-right: 4em;
	}

	.video.youtube .iframecont iframe[data-src] + .youtubenotice p:first-child::before
	{
		font-size: 2.5em;
		margin-bottom: .8em;
	}
}

.video.youtube .iframecont iframe[data-src]
{
	pointer-events: none;
}

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: Presse-Waschzettel-Liste */

.artikel.titling .refarea li
{
	border-top: 1px solid var(--extralight-line-color);
	margin-top: calc(var(--p-margin-top) / 2) !important;
	padding-top: calc(var(--p-margin-top) / 2);
}

.artikel.titling .refarea li > a
{
	padding-bottom: calc(var(--p-margin-top) / 2);
	padding-top: calc(var(--p-margin-top) / 2);
}

/* 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(.refarea)
{
	border-radius: var(--medium-border-radius);
	box-shadow: var(--boxshadow-soft-small);
	padding: 1.5em;
}

.artikel:is(.faq, .faqentries) header:first-of-type
{
	--header-margin-top: 0;
}

.artikel.faq header .head
{
	font-weight: bold;
}

.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 */

.jobentry .artikel
{
	flex-flow: row wrap !important;
	align-items: stretch !important;
	gap: var(--medium-row-gap) !important;
	justify-content: space-between !important;
	margin-bottom: 0;
	margin-top: 0;
}

.jobentry .artikel .tags,
.jobentry .artikel header,
.jobentry .artikel .publishinginfo
{
	flex: 0 0 100% !important;
	margin-bottom: 0;
	margin-top: 0;
}

.jobentry .artikel .leftcol
{
	flex: 1 1 50% !important;
}

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

.jobentry .artikel .rightcol
{
	flex: 0 1 35% !important;
}

.jobentry .artikel .leftcol .userinput > *:first-child,
.jobentry .artikel .rightcol h4:first-of-type
{
	margin-top: 0 !important;
}

/* Visitenkarten */

.artikel.vcard
{
	box-shadow: var(--boxshadow-soft-medium);
	column-gap: var(--small-column-gap);
	display: grid;
	/* grid-template-rows: 1fr auto auto; */
	grid-template-columns: clamp(110px, 30%, 200px) 1fr 1fr;
	padding: var(--bg-text-indent-vertical) var(--bg-text-indent-horizontal);
	row-gap: var(--small-row-gap);
}

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

.artikel.vcard header
{
	--header-margin-bottom: 0;
	--header-margin-top: 0;

	grid-area: header;
}

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

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

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

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

	.body:is(.hascolumns) > .content .artikel.vcard
	{
		grid-template-areas: 
			"header header header"
			"contact contact contact"
			"text text text";
	}

	.body:is(.hascolumns) > .content .artikel.vcard.hasimage
	{
		grid-template-areas: 
			"image header header"
			"image contact contact"
			"image text text";
	}
}

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

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

	.body:is(.hascolumns) > .content .artikel.vcard
	{
		grid-template-areas: 
			"header header header"
			"contact contact contact"
			"text text text";
	}

	.body:is(.hascolumns) > .content .artikel.vcard.hasimage
	{
		grid-template-areas: 
			"image header header"
			"image contact contact"
			"image text 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: 0;
}

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

/* Abstände */

.margintop:not(.body)
{
	margin-top: var(--p-margin-top) !important;
}

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

.body.margintop, 
.body.extendedmargintop
{
	margin-top: calc(var(--body-margin-top) * 3);
}

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

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

.extendedmarginbottom:not(.body)
{
	margin-bottom: calc(2 * var(--p-margin-top)) !important;
}

.body.marginbottom, 
.body.extendedmarginbottom
{
	margin-bottom: calc(var(--body-margin-bottom) * 3);
}

.nomarginbottom
{
	margin-bottom: 0 !important;
	padding-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
{
	--text-color: #fff;
	--a-link-color: #fff;

	background: var(--navigation-active-color);
	padding: .4em .8em;
}

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

/* Float nicht zusammen mit Container Queries möglich! */

.body .sticker:not(.large) ~ *
{
	container-type: normal;
}

@media (min-width: 568px)
{
	.sticker:not(.large)
	{
		float: right;
		margin-bottom: var(--medium-row-gap);
		margin-left: var(--medium-column-gap);
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	.sticker:not(.large)
	{
		width: 50%;
	}
}

@media (min-width: 768px)
{
	.sticker:not(.large)
	{
		width: 35%;
	}
}

.sticker a:not(.button):not(.invisible)
{
	font-weight: bold;
}

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

@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
{
	border-radius: var(--medium-border-radius);
	padding: var(--bg-text-indent-vertical) var(--bg-text-indent-horizontal);
}

.artikel.topteaser
{
	--article-bg-color: var(--light-bg-color);
}

.artikel.topteaser header
{
	--header-margin-top: 0;
}

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

.body.news .topteaser
{
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

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

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

/* Infobox z.B. in LWS Konzeptionen */

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

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

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

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

/* Listen */

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

:is(ol, ul).liste.content
{
	margin-top: 0;
}

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

ul.liste > li
{
	padding: calc(var(--p-margin-bottom) * 1.5) 0;
}

ul.liste.eng > li
{
	padding: calc(var(--p-margin-bottom) * .75) 0;
}

ul.liste.content > li:not(.link):not(:last-of-type)
{
	border-bottom: var(--light-line-width) dotted var(--extralight-line-color);
}

.body.grid > ul.liste.content > li
{
	border-bottom: none;
}

ul.liste > li.mediaplayer
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

:not(.grid) > ul.liste:not(.textliste) > li.legacyhead > :first-child
{
	font-weight: bold;
}

:not(.grid) > ul.liste:not(.textliste) > li.legacyhead
{
	padding-bottom: 0;
}

ul.liste:not(.textliste) > li:not(.link):not(.legacyhead) > :first-child
{
	display: grid;
	gap: var(--small-margin-top);
}

:not(.grid) > ul.liste:not(.textliste) > li:not(.link):not(.legacyhead) > :first-child
{
	grid-template-columns: 2.5em auto;
	grid-template-rows: auto;
}

:not(.grid) > ul.liste:not(.textliste) > li:not(.link):not(.legacyhead) > :first-child:has(.tagarea)
{
	grid-template-rows: auto auto;
}

/* .body.grid > ul.liste > li:not(.link) > :first-child
{
	flex-direction: column;
} */

/* .body.grid > ul.liste > li > :first-child > :not(.thumbnail) > *:not(.tags):not(.cmsfrontend):not(.datearea)
{
	display: block;
	text-align: center;
} */

ul.liste > li :is(.datearea, .tagarea)
{
	margin-bottom: 0;
	margin-top: 0;
}

ul.liste:not(.textliste) > li .textarea
{
	align-items: baseline;
	align-self: center;
	display: flex;
	flex-flow: row wrap;
	gap: .2em .5em;
}

ul.liste:not(.textliste) > li .textarea .text
{
	flex: 1 1 100%;
}

ul.liste > li:not(.link) .textarea .titel
{
	font-weight: bold;
}

ul.liste > li.link .textarea
{
	display: inline;
}

ul.liste > li:not(.hasthumbnail) .thumbnail span,
.body:not(.grid) > ul.liste .thumbnail span
{
	display: none;
}

:not(.grid) > ul.liste > li:not(.link) > :first-child .thumbnail
{
	background-position: left center;
	background-repeat: no-repeat;
	content: "";
	display: block;
	flex: 0 0 auto;
	margin: 0 !important;
}

:not(.body):not(.grid) > ul.liste > li > :first-child .thumbnail
{
	align-self: start;
}

:not(.grid) > ul.liste.eng > li > :first-child .thumbnail
{
	height: 4em;
	width: 4em;
}

:not(.grid) > ul.liste:not(.eng) > li > :first-child .thumbnail
{
	align-self: center;
	grid-column: 1;
	grid-row: 1 / -1;
	height: 3.5em;
	width: 2.5em;
}

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

.body.grid > ul.liste.content > li > :first-child > .thumbnail
{
	display: block;
}

ul.liste > li.link
{
	padding: 1em 0 0 0;
}

ul.liste > li.link > a > :is(.textarea, .tagarea)
{
	display: inline;
}

ul.liste > li.link > a > .textarea
{
	margin-right: .5em;
}

.artikel .refarea > ul.liste > li.link
{
	/* padding-top: var(--p-margin-top); */
	padding-top: 0;
}

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

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

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

.liste > .file .thumbnail
{
	background-image: url(/assets/images/generic-dwlicon.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}

.liste > .file.video .thumbnail
{
	background-image: url(/assets/images/video-dwlicon.svg);
}

.liste > .file.aac .thumbnail
{
	background-image: url(/assets/images/aac-dwlicon.png);
}

.liste > .file.app .thumbnail
{
	background-image: url(/assets/images/app-dwlicon.png);
}

.liste > .file.csv .thumbnail
{
	background-image: url(/assets/images/csv-dwlicon.svg);
}

.liste > .file.doc .thumbnail,
.liste > .file.docx .thumbnail
{
	background-image: url(/assets/images/doc-dwlicon.svg);
}

.liste > .file.dmg .thumbnail
{
	background-image: url(/assets/images/dmg-dwlicon.svg);
}

.liste > .file.eps .thumbnail
{
	background-image: url(/assets/images/eps-dwlicon.svg);	
}

.liste > .file.exe .thumbnail
{
	background-image: url(/assets/images/exe-dwlicon.svg);	
}

.liste > .file.jpg .thumbnail,
.liste > .file.jpeg .thumbnail
{
	background-image: url(/assets/images/jpg-dwlicon.svg);	
}

.liste > .file.mp3 .thumbnail
{
	background-image: url(/assets/images/mp3-dwlicon.svg);
}

.liste > .file.mp4 .thumbnail
{
	background-image: url(/assets/images/mp4-dwlicon.svg);
}

.liste > .file.pdf .thumbnail
{
	background-image: url(/assets/images/pdf-dwlicon.svg);
}

.liste > .file.rtf .thumbnail
{
	background-image: url(/assets/images/rtf-dwlicon.png);
}

.liste > .file.protectedfile .thumbnail,
.liste > .file.protected .thumbnail
{
	background-image: url(/assets/images/prt-dwlicon.png);
}

.liste > .file.tif .thumbnail.noimage,
.liste > .file.tiff .thumbnail.noimage
{
	background-image: url(/assets/images/tif-dwlicon.svg);	
}

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

.liste > .zip .thumbnail.noimage
{
	background-image: url(/assets/images/zip-dwlicon.svg);
}

.grid .liste > .file .thumbnail.loaded
{
	background-image: none;
}

:not(.grid) > .liste > .file .thumbnail span
{
	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;
}



.body.grid > ul.liste.content > li.video .thumbnail
{
	max-width: 260px;
}

.body.grid > ul.liste.content > li.video .thumbnail.loaded img
{
	border: var(--thinline);
	box-shadow: none;
}

.body.grid > ul.liste.content > li.video .thumbnail.loaded::after
{
	color: white;
	content: "\26";
	display: inline-block;
	font-family: "Hueber WebUI Symbols";
	font-size: 56px;
	font-style: normal;
	font-weight: normal;
	left: 50%;
	position: absolute;
	/* text-shadow: 0 0 4px rgba(0, 0, 0, .7); */
	text-shadow: 0 0 24px rgba(0, 0, 0, .4), 0 0 6px rgba(0, 0, 0, .7);
	top: 50%;
	transform: translate(-50%,-50%);
}

ul.liste > li:not(.link) .tags
{
	margin-bottom: .3em;
	margin-top: .3em;
}

.body.grid > ul.liste > li:not(.link) :is(.textarea, .titel, .untertitel, .tagarea, .tags)
{
	justify-content: center;
}

ul.liste > li:not(.link) .loginrequired
{
	flex: 0 0 100%;
}

/* ul.liste > li .untertitel::before
{
	content: ", ";
}

.body.grid > ul.liste.content > li .untertitel::before
{
	content: "";
} */

.artikel.productpresentation header .fileinfo,
ul.liste > li .fileinfo,
ul.liste > li .loginrequired
{
	font-size: .85em;
}

.artikel.productpresentation header .fileinfo::before,
ul.liste > li .fileinfo::before
{
	content: " (";
}

.artikel.productpresentation header .fileinfo::after,
ul.liste > li .fileinfo::after
{
	content: ")";
}

.body.grid > ul.liste.content > li .fileinfo > .filedescr
{
	display: inline;
}

ul.liste > li .fileinfo > span:not(:last-child)::after
{
	content: " • ";
}

ul.liste > li.mediaplayer
{
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: stretch;
}

ul.liste > li.mediaplayer :first-child
{
	flex: 1 1 auto;
}

ul.liste > li.mediaplayer .mediaplayerbt
{
	border: 1px solid #3259b2;
	border-radius: var(--medium-border-radius);
	flex: 0 0 auto;
}

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

/* Reiternavigation */

.tabnavi
{
	border-bottom: var(--light-line-width) solid var(--light-line-color);
	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;
}

.tabcontainer
{
	border-bottom: var(--light-line-width) solid var(--light-line-color);
	border-left: var(--light-line-width) solid var(--light-line-color);
	border-right: var(--light-line-width) solid var(--light-line-color);
	padding: var(--large-bg-text-indent-vertical) var(--large-bg-text-indent-horizontal);
}

/* Bilder */

.image
{
	max-width: 100%;
	position: relative;
}

@container (width < 350px) 
{
	:is(.image, .imagelink, .video):is(.portrait, .productcover):not(.circle).float
	{
		margin-left: auto;
		margin-right: auto;
		max-width: 200px;
		min-width: 100px;
		/* width: 50%; */
	}
}

@container (width > 349px) 
{
	:is(.image, .imagelink, .video):not(.productcover):not(.portrait).float,
	:is(.image, .imagelink, .video).circle.float
	{
		max-width: 280px;
		min-width: 100px;
		/* width: 60%; */
	}

	:is(.image, .imagelink, .video):is(.portrait, .productcover):not(.circle).float
	{
		max-width: 200px;
		min-width: 100px;
		/* width: 40%; */
	}

	.artikel.imageportraitphoto .image
	{
		max-width: 175px;
		min-width: 100px;
		/* width: 30%; */
	}
}

.image .imagearea
{
	line-height: .1;
}

.image:not(.thumbnail) .imagearea
{
	display: inline;
	height: fit-content;
	max-width: inherit;
	text-align: center;
	width: fit-content;
}

:is(.body.imgaspr .artikel, .artikel.imgaspr) .image .imagearea
{
	height: unset;
	display: inherit;
	position: relative;
	overflow: hidden;
	width: unset;
}

:is(.body.imgaspr.aspr1-1 .artikel, .artikel.imgaspr.aspr1-1) .image .imagearea
{
	padding-top: 100%;
}

:is(.body.imgaspr.aspr4-3 .artikel, .artikel.imgaspr.aspr4-3) .image .imagearea
{
	padding-top: 75%;
}

:is(.body.imgaspr.aspr3-2 .artikel, .artikel.imgaspr.aspr3-2) .image .imagearea
{
	padding-top: 66.67%;
}

:is(.body.imgaspr.aspr3-1 .artikel, .artikel.imgaspr.aspr3-1) .image .imagearea
{
	padding-top: 33.33%;
}

:is(.body.imgaspr.aspr16-9 .artikel, .artikel.imgaspr.aspr16-9) .image .imagearea
{
	padding-top: 56.25%;
}

:is(.body.imgaspr.aspr235-100 .artikel, .artikel.imgaspr.aspr235-100) .image .imagearea
{
	padding-top: 42.5%;
}

:is(.image, .imagelink).float .imagearea img:not(.productcover)
{
	width: 100%;
}

:is(.body.imgaspr .artikel, .artikel.imgaspr) .image:not(.image2):not(.image3) .imagearea > img
{
	position: absolute;
	top: 50%;
	transform: translate(-50%);
}

:is(
	.body.imgaspr.imgautosize .artikel, 
	.body.imgaspr .artikel.imgautosize, 
	.artikel.imgaspr.imgautosize
) .image:not(.image2):not(.image3) .imagearea img
{
	height: 100%;
	width: unset;
}

:is(
	.body.imgaspr.imgasprleft .artikel, 
	.body.imgaspr .artikel.imgasprleft, 
	.artikel.imgaspr.imgasprleft
) .image:not(.image2):not(.image3) .imagearea img
{
	left: 0;
}

:is(
	.body.imgaspr.imgasprcenterleft .artikel, 
	.body.imgaspr .artikel.imgasprcenterleft, 
	.artikel.imgaspr.imgasprcenterleft
) .image:not(.image2):not(.image3) .imagearea img
{
	left: 25%;
}

:is(
	.body.imgaspr.imgasprcenterright .artikel, 
	.body.imgaspr .artikel.imgasprcenterright, 
	.artikel.imgaspr.imgasprcenterright
) .image:not(.image2):not(.image3) .imagearea img
{
	right: 25%;
}

:is(
	.body.imgaspr.imgasprright .artikel, 
	.body.imgaspr .artikel.imgasprright, 
	.artikel.imgaspr.imgasprright
) .image:not(.image2):not(.image3) .imagearea img
{
	right: 0;
}

:is(
	.body.imgaspr .artikel, 
	.artikel.imgaspr
) .image:not(.image2):not(.image3) .imagearea img
{
	position: absolute;
	top: 50%;
	transform: translate(-50%);
}

:is(
	.artikel.imgaspr.imgasprupper.imgasprleft, 
	.artikel.imgaspr.imgasprupper.imgasprcenterleft, 
	.artikel.imgaspr.imgasprupper.imgasprcenterright,
	.artikel.imgaspr.imgasprupper.imgasprright
) .imag:not(.image2):not(.image3) .imagearea img
{
	transform: translateY(-35%);
}

.artikel.imgaspr.imgasprlower:is(
	.imgasprleft, 
	.imgasprcenterleft, 
	.imgasprcenterright,
	.imgasprright
) .image:not(.image2):not(.image3) .imagearea img
{
	transform: translateY(-65%);
}

.body.imgaspr:not(.imgasprleft):not(.imgasprcenterleft):not(.imgasprcenterright):not(.imgasprright) .artikel:not(.imgasprleft):not(.imgasprcenterleft):not(.imgasprcenterright):not(.imgasprright) .image:not(.image2):not(.image3) .imagearea img,
.artikel.imgaspr:not(.imgasprleft):not(.imgasprcenterleft):not(.imgasprcenterright):not(.imgasprright) .image:not(.image2):not(.image3) .imagearea > img
{
	left: 50%;
	transform: translate(-50%, -50%);
}

.artikel.imgaspr.imgasprupper:not(.imgasprleft):not(.imgasprcenterleft):not(.imgasprcenterright):not(.imgasprright) .image:not(.image2):not(.image3) .imagearea > img
{
	transform: translate(-50%, -35%);
}

.artikel.imgaspr.imgasprlower:not(.imgasprleft):not(.imgasprcenterleft):not(.imgasprcenterright):not(.imgasprright) .image:not(.image2):not(.image3) .imagearea > img
{
	transform: translate(-50%, -65%);
}

.image .buttonarea
{
	margin-top: 1em;
	text-align: left;
}

.produkt
{
	display: block;
}

.image .label
{
	color: var(--medium-content-color);
	font-size: var(--medium-font-size);
	line-height: var(--narrow-line-height);
	margin-top: .5em;
	width: 90%;
}

.image .label.redbox
{
	background-color: #dd232b;
	color: white;
	padding: .5em;
}

.image .label.bluebox
{
	background-color: #4e75a9;
	color: white;
	padding: .5em;
}

.image .label.greenbox
{
	background-color: #64b22b;
	color: white;
	padding: .5em;
}

.image .label.topright
{
	position: absolute;
	right: 0;
	top: 10%;
}

.image .label.toprightrotated
{
	position: absolute;
	right: -2%;
	top: -2%;
	transform: rotate(7deg);
}

.image .label.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 img
{
	width: 120px !important;
}

@container (width > 349px) 
{
	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;
	}
}

/* */

.artikel.circle .image,
.image.circle
{
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	max-width: none;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.artikel.circle .image:not(.float),
.image.circle:not(.float)
{
	padding-top: 100%;
}

.artikel.circle .image > :first-child,
.image.circle > :first-child
{
	/* background-color: white; */
	bottom: 0;
	display: block;
	height: auto;
	max-width: none;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: auto;
}

.artikel.circle .image > :first-child > img,
.image.circle > :first-child > img
{
	height: auto;
	left: 50%;
	object-fit: cover;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: 100%;
}

.artikel.circle .image > :first-child > img.landscape,
.image.circle > :first-child > img.landscape
{
	height: 100%;
	width: auto;
}

/* Bild als Thumbnail */

.thumbnail
{
	position: relative;
}

.thumbnail
{
	margin: 0 auto 1em auto;
}

.thumbnail,
.thumbnail iframe
{
	width: 90%;
}

.thumbnail.large
{
	width: 100%;
}

span.thumbnail
{
	display: block;
}

.thumbnail::before
{
	content: "";
	display: block;
}

.thumbnail::before
{
	padding-top: 80%;
}

.thumbnail.large::before
{
	padding-top: 100%;
}

.liste .thumbnail::before
{
	padding-top: 65%;
}

.thumbnail > :first-child
{
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.thumbnail > :first-child > img
{
	left: 50%;
	max-height: 100%;
	max-width: 100%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.thumbnail iframe
{
	margin: 0 auto;
	max-height: 100%;
	max-width: 100%;
}

/* Image-stack */

.imagestack,
.bilderfaecher
{
	width: 100%;
}

@container (width > 349px)
{
	.imagestack.float,
	.bilderfaecher.float
	{
		max-width: 55%;
	}
}

.imagestack > .contentarea,
.bilderfaecher > .contentarea
{
	display: flex;
	height: 300px;
	justify-content: space-between;
	max-height: 300px;
	width: 100%;
}

.imagestack > .contentarea > .image,
.bilderfaecher > .contentarea > .image
{
	flex: 0 0 auto;
	height: 100%;
	position: relative;
	top: 0;
}

.imagestack:not(.reversestack) > .contentarea > .image:first-child,
.bilderfaecher.reversestack > .contentarea > .image:first-child
{
	z-index: 6;
}

.imagestack:not(.reversestack) > .contentarea > .image:nth-child(n+2),
.bilderfaecher.reversestack > .contentarea > .image:nth-child(n+2)
{
	z-index: 5;
}

.imagestack:not(.reversestack) > .contentarea > .image:nth-child(n+3),
.bilderfaecher.reversestack > .contentarea > .image:nth-child(n+3)
{
	z-index: 4;
}

.imagestack:not(.reversestack) > .contentarea > .image:nth-child(n+4),
.bilderfaecher.reversestack > .contentarea > .image:nth-child(n+4)
{
	z-index: 3;
}

.imagestack:not(.reversestack) > .contentarea > .image:nth-child(n+5),
.bilderfaecher.reversestack > .contentarea > .image:nth-child(n+5)
{
	z-index: 2;
}

.imagestack:not(.reversestack) > .contentarea > .image:nth-child(n+6),
.bilderfaecher.reversestack > .contentarea > .image:nth-child(n+6)
{
	z-index: 1;
}

.imagestack > .contentarea > .image img,
.bilderfaecher > .contentarea > .image img
{
	height: 100% !important;
	max-width: none !important;
	position: absolute;
	right: 0;
	width: auto !important;
}

.imagestack > .contentarea > .image:first-child img,
.bilderfaecher > .contentarea > .image:first-child img
{
	left: 0;
	position: relative;
	right: auto;
}

/* Switches */

.switch
{
	background-color: rgba(255, 255, 255, .9);
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 1.5em;
	display: inline-flex;
	font-size: .75em;
	margin-bottom: .1em;
	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);
}

/* 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
{
	background-color: white;
	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);
	font-weight: normal;
}

.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"] > :is(div, p).copyrightnote,
.titlearea > .copyrightnote
{
	bottom: .5rem;
	position: absolute;
	right: .5rem;
}

/* Sonderformate: Tabellen */

.et .status
{
	white-space: nowrap;
}

/* 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;
	}

	.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
{
	--article-bg-color: var(--mhv-logo-bg-color);
	--headline-cat-color: white;
	--headline-color: white;
	--a-link-color: white;
	padding: 0;
}

#kijupromo .contentarea
{
	padding-top: 80px;
	padding-bottom: .5em;
	padding-left: .6em;
	padding-right: .6em;
}

/* 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);
}

@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-y: top;
	background-position-x: center;
	background-size: cover;
	position: relative;
}

#toplevelnavi .titlearea
{
	border-bottom: none;
	border-top-left-radius: var(--medium-border-radius);
	border-top-right-radius: var(--medium-border-radius);
	overflow: hidden;
}

.titlearea.middle
{
	background-position-y: center;
}

.titlearea.left
{
	background-position-x: left;
}

.titlearea.right
{
	background-position-x: right;
}

.titlearea.flex
{
	display: flex;
	flex-flow: row nowrap;
}

.titlearea.titlearealws
{
	padding-bottom: 10%;
}

.titlearea:not(.flex) > *
{
	position: absolute;
}

.titlearea.hasimageheader > header
{
	overflow: hidden;
	text-indent: -10000px;
}

.titlearea:not(.cpnheadern):not(.headertop):not(.headerbottom) > header
{
	bottom: 48%;
	transform: translateY(50%);
}

.titlearea:not(.cpnheadern).headertop > header
{
	top: 3%;
}

.titlearea:not(.cpnheadern).headerbottom > header
{
	bottom: 4%;
}

.titlearea:not(.cpnheadern) > header,
.titlearea:not(.cpnheadern) > header > *
{
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

@media (max-width: 567px)
{
	.titlearea.titlearea7x1
	{
		padding-bottom: 40%;
	}

	.titlearea.titlearea1024x200
	{
		padding-bottom: 40%;
	}

	.titlearea.titlearea4x1
	{
		/* padding-bottom: 33.33%; */
		padding-bottom: 50%;
	}

	.titlearea.titlearea1024x340
	{
		padding-bottom: 65%;
	}
}

@media (max-width: 419px)
{
	.titlearea:not(.cpnheadern).headerhalf.headerright > header
	{
		max-width: 55%;
		padding: 0 4% !important;
		right: 0;
	}

	.titlearea:not(.cpnheadern).headertwothirds.headerright > header
	{
		max-width: 80%;
		padding: 0 4% !important;
		right: 0;
	}
}

@media (min-width: 420px) and (max-width: 567px)
{
	.titlearea:not(.cpnheadern).headerhalf.headerright > header
	{
		max-width: 50%;
		padding: 0 4% !important;
		right: 0;
	}

	.titlearea:not(.cpnheadern).headertwothirds.headerright > header
	{
		max-width: 70%;
		padding: 0 4% !important;
		right: 0;
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	.titlearea.titlearea7x1
	{
		padding-bottom: 23%;
	}

	.titlearea.titlearea1024x200
	{
		padding-bottom: 26%;
	}

	.titlearea.titlearea4x1
	{
		/* padding-bottom: 28.57%; */
		padding-bottom: 33.33%;
	}

	.titlearea.titlearea1024x340
	{
		padding-bottom: 40%;
	}

	.titlearea:not(.cpnheadern).headerhalf.headerright > header
	{
		left: 50%;
		max-width: 50%;
		padding: 0 4% !important;
	}

	.titlearea:not(.cpnheadern).headertwothirds.headerright > header
	{
		left: 33%;
		max-width: 67%;
		padding: 0 4% !important;
	}
}

@media (min-width: 768px)
{
	.titlearea.titlearea7x1
	{
		padding-bottom: 14.32%;
	}

	.titlearea.titlearea1024x200
	{
		padding-bottom: 19.53%;
	}

	.titlearea.titlearea4x1
	{
		padding-bottom: 25%;
	}

	.titlearea.titlearea1024x340
	{
		padding-bottom: 33.2%;
	}

	.titlearea:not(.cpnheadern).headerhalf.headerright > header
	{
		left: 50%;
		max-width: 50%;
		padding: 0 3% !important;
	}

	.titlearea:not(.cpnheadern).headertwothirds.headerright > header
	{
		left: 34%;
		max-width: 66%;
		padding: 0 3% !important;
	}
}

#infoheader .copyrightnote, 
#toplevelnavi .titlearea ~ .copyrightnote 
{
	display: block;
	padding-top: .1em;
	text-align: right;
}

/* 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 
	headw30 
	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;
	text-shadow: 0 0 12px var(--dark-text-shadow-color), 0 0 6px var(--medium-text-shadow-color), 0 0 1px var(--light-text-shadow-color);
	-webkit-text-stroke: var(--header-text-stroke-width) var(--header-text-stroke-color);
}

:is(.cpnheadern.headwoshadow, .cpnheadern .artikel.headwoshadow) header
{
	text-shadow: none;
}

:is(.cpnheadern.headreddot, .cpnheadern .artikel.headreddot) header::before
{
	content: "";
	background-color: #e40230;
	border-radius: var(--round-button-border-radius);
	display: block;
	padding-top: 40%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 40%;
	z-index: -1;
}

@media (max-width: 567px)
{
	.cpnheadern header
	{
		max-width: 87%;
	}

	:is(.cpnheadern.headreddot, .cpnheadern .artikel.headreddot) header
	{
		max-width: 71%;
	}

	/* :is(.cpnheadern.headreddot.headw80, .cpnheadern .artikel.headreddot.headw80) header::before
	{
		padding-top: 30%;
		width: 30%;
	}

	:is(.cpnheadern.headreddot.headw60, .cpnheadern .artikel.headreddot.headw60) header::before
	{
		padding-top: 35%;
		width: 35%;
	}

	:is(.cpnheadern.headreddot.headw30, .cpnheadern .artikel.headreddot.headw30) header::before
	{
		padding-top: 60%;
		width: 60%;
	} */
}

@media (min-width: 568px)
{
	:is(.cpnheadern.headreddot.headw80, .cpnheadern .artikel.headreddot.headw80) header::before
	{
		padding-top: 12.5%;
		width: 12.5%;
	}

	:is(.cpnheadern.headreddot.headw60, .cpnheadern .artikel.headreddot.headw60) header::before
	{
		padding-top: 15%;
		width: 15%;
	}

	:is(.cpnheadern.headreddot.headw30, .cpnheadern .artikel.headreddot.headw30) header::before
	{
		padding-top: 70%;
		width: 70%;
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	.cpnheadern .artikel.headwfixed:not(.headw100):not(.headw80):not(.headw60):not(.headw40):not(.headw30) header,
	:is(.cpnheadern.headw60.headwfixed, .cpnheadern .artikel.headw60.headwfixed) header
	{
		width: 62.5%;
	}
	
	:is(.cpnheadern.headw100.headwfixed, .cpnheadern .artikel.headw100.headwfixed) header
	{
		width: 95%;
	}
	
	:is(.cpnheadern.headw80.headwfixed, .cpnheadern .artikel.headw80.headwfixed) header
	{
		width: 77.5%;
	}
	
	:is(.cpnheadern.headw40.headwfixed, .cpnheadern .artikel.headw40.headwfixed) header
	{
		width: 47.5%;
	}
	
	:is(.cpnheadern.headw30.headwfixed, .cpnheadern .artikel.headw30.headwfixed) header
	{
		width: 35%;
	}

	.cpnheadern .artikel:not(.headw100):not(.headw80):not(.headw60):not(.headw40):not(.headw30):not(.headwfixed) header,
	:is(.cpnheadern.headw60:not(.headwfixed), .cpnheadern .artikel.headw60:not(.headwfixed)) header
	{
		max-width: 62.5%;
	}
		
	:is(.cpnheadern.headw100:not(.headwfixed), .cpnheadern .artikel.headw100:not(.headwfixed)) header
	{
		max-width: 95%;
	}

	:is(.cpnheadern.headw80:not(.headwfixed), .cpnheadern .artikel.headw80:not(.headwfixed)) header
	{
		max-width: 77.5%;
	}
	
	:is(.cpnheadern.headw40:not(.headwfixed), .cpnheadern .artikel.headw40:not(.headwfixed)) header
	{
		max-width: 47.5%;
	}
	
	:is(.cpnheadern.headw30:not(.headwfixed), .cpnheadern .artikel.headw30:not(.headwfixed)) header
	{
		max-width: 35%;
	}
}

@media (min-width: 768px)
{
	.cpnheadern.headw60.headwfixed header,
	.cpnheadern .artikel.headwfixed:not(.headw100):not(.headw80):not(.headw60):not(.headw40):not(.headw30) 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%;
	}
	
	:is(.cpnheadern.headw30.headwfixed, .cpnheadern .artikel.headw30.headwfixed) header
	{
		width: 30%;
	}

	.cpnheadern.headw60:not(.headwfixed) header,
	.cpnheadern .artikel:not(.headw100):not(.headw80):not(.headw60):not(.headw40):not(.headw30):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%;
	}
	
	:is(.cpnheadern.headw30:not(.headwfixed), .cpnheadern .artikel.headw30:not(.headwfixed)) header
	{
		max-width: 30%;
	}
}

.cpnheadern header
{
	left: 3%;
}

:is(.cpnheadern.headreddot, .cpnheadern .artikel.headreddot) header
{
	left: 15%;
}

@media (max-width: 567px)
{
	:is(.cpnheadern.headreddot, .cpnheadern .artikel.headreddot) header
	{
		left: 21%;
	}
}

@media (min-width: 568px)
{
	/* headleft */

	:is(.cpnheadern.headcenter, .cpnheadern .artikel.headcenter) header
	{
		left: 50%;
		max-width: 90%;
		text-align: center;
		transform: translateX(-50%);
	}

	:is(.cpnheadern.headcenter.headmiddle, .cpnheadern .artikel.headcenter.headmiddle) header
	{
		transform: translate(-50%, -50%);
	}

	:is(.cpnheadern.headright, .cpnheadern .artikel.headright) header
	{
		left: auto;
		right: 4%;
	}
}

.cpnheadern header
{
	bottom: 8%;
}

:is(.cpnheadern.headmiddle, .cpnheadern .artikel.headmiddle) header
{
	bottom: auto;
	top: 50%;
	transform: translateY(-50%);
}

:is(.cpnheadern.headupper, .cpnheadern .artikel.headupper) header
{
	bottom: auto;
	top: 10%;
}

@media (min-width: 568px) 
{
	/* .headlower */

	.cpnheadern header
	{
		bottom: 10%;
	}

	.cpnheadern.headlowermiddle header,
	.cpnheadern .artikel.headlowermiddle header
	{
		bottom: 21%;
	}

	.cpnheadern.headmiddle header,
	.cpnheadern .artikel.headmiddle header
	{
		bottom: auto;
		top: 49%;
		transform: translateY(-50%);
	}

	.cpnheadern.headuppermiddle header,
	.cpnheadern .artikel.headuppermiddle header
	{
		bottom: auto;
		top: 26%;
	}

	.cpnheadern.headupper header,
	.cpnheadern .artikel.headupper header
	{
		bottom: auto;
		top: 12%;
	}
}

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

/* .headfw800 */

.cpnheadern header > .headarea,
.cpnheadern header > .headarea > :is(.kategorie, .head)
{
	font-weight: bold !important;
}

.cpnheadern.headfw400 header > .headarea,
.cpnheadern .artikel.headfw400 header > .headarea,
.cpnheadern.headfw400 header > .headarea > :is(.kategorie, .head),
.cpnheadern .artikel.headfw400 header > .headarea > :is(.kategorie, .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;
}

/* .headl */

.cpnheadern header > .headarea > .kategorie,
.cpnheadern 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.headsl header > .headarea > .kategorie,
.cpnheadern .artikel.headsl header > .headarea > .kategorie
{
	font-size: .7em !important;
}

.cpnheadern.headsl header > .headarea > .kategorie.lwstitle,
.cpnheadern .artikel.headsl header > .headarea > .kategorie.lwstitle
{
	font-size: .55em !important;
	font-weight: normal !important;
	letter-spacing: .1em;
	padding-bottom: .3em !important;
	text-transform: uppercase;
}

.cpnheadern.headsl header > .headarea > .head,
.cpnheadern .artikel.headsl header > .headarea > .head
{
	font-size: 1em !important;
}

@media (max-width: 567px)
{
	.cpnheadern header > .headarea
	{
		line-height: 1 !important;
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	.cpnheadern header > .headarea
	{
		font-size: 2.1em !important;
		line-height: 1.05 !important;
	}
}

@media (min-width: 568px)
{
	.cpnheadern.headls header > .headarea > .head,
	.cpnheadern .artikel.headls header > .headarea > .head
	{
		font-size: .7em !important;
	}
}

@media (min-width: 768px)
{
	.cpnheadern header > .headarea
	{
		font-size: 2.8em !important;
		line-height: 1 !important;
	}
}

/* LWS-Standard-Header */

#lwshead
{
	border-bottom-color: var(--bg-color);
	border-bottom-style: solid;
	border-bottom-width: 1px;
	position: relative;
}

#lwshead header
{
	max-width: 50%;
	position: absolute;
	width: 380px;
}

/* Content Drawer */

.body.contentdrawer > .content > .artikel:not(:first-child)
{
	--article-margin-top: var(--p-margin-top);
}

.body.contentdrawer > .content > .artikel:not(:last-child)
{
	--article-margin-bottom: var(--p-margin-bottom);
}

.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.haendesym > .contentarea > header::before
{
	background-image: url(/shared/images/contentdrawer/haendesym.svg);
}

.body.contentdrawer > .content > .artikel.unihutsym > .contentarea > header::before
{
	background-image: url(/shared/images/contentdrawer/unihutsym.svg);
}

.body.contentdrawer > .content > .artikel.eurosym > .contentarea > header::before
{
	background-image: url(/shared/images/contentdrawer/eurosym.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.smartphonesym > .contentarea > header::before
{
	background-image: url(/shared/images/contentdrawer/smartphonesym.svg);
}

.body.contentdrawer > .content > .artikel.audiosym > .contentarea > header::before
{
	background-image: url(/shared/images/contentdrawer/audiosym.svg);
}

.body.contentdrawer > .content > .artikel.flexsym > .contentarea > header::before
{
	background-image: url(/shared/images/contentdrawer/flexsym.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 > :is(h1, h2, h3, h4)
{
	font-weight: normal;
}

.body.contentdrawer .content > .artikel > .contentarea > header > .headarea
{
	flex: 1 1 auto;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

.body.contentdrawer .content > .artikel > .contentarea > .textarea > p:first-child
{
	margin-top: 0 !important;		/* Animation verbessern */
}

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

/* Newsletter-Hinweis */

.dsgvo label,
.dsgvo .drawer
{
	font-size: .8em;
}

.dsgvo.container
{
	padding: 2px !important;
}

.dsgvo.drawer
{
	display: block;
	max-height: 100vh;
	overflow: hidden;
	padding-top: .5em;
	transition: max-height 1s ease; 
}

body.js .dsgvo.drawer.close
{
	max-height: 0;
}

/* Kampagnen-Jumplist */

.cpnjumplist > .content > .artikel
{
	--article-bg-color: transparent;

	border-radius: var(--medium-border-radius);
	padding: var(--bg-text-indent-vertical) var(--bg-text-indent-horizontal);
	content: "";
	clear: both;
	display: grid;
	grid-template-areas: "image" "contentarea";
	/* grid-template-rows: auto auto; */
	justify-items: center;
	padding: 0;
	overflow: hidden;
}

.cpnjumplist.border > .content > .artikel
{
	border: var(--hairline);
}

.cpnjumplist:not(.border) > .content > .artikel
{
	box-shadow: var(--boxshadow-soft-medium);
}

.cpnjumplist > .content > .artikel header
{
	margin-top: 0;
}

.cpnjumplist > .content > .artikel .contentarea
{
	align-items: center;
	display: grid;
	grid-area: contentarea;
	padding: calc(var(--bg-text-indent-vertical) * 2) calc(var(--bg-text-indent-horizontal) * 2);
}

.cpnjumplist > .content > .artikel .image
{
	align-items: center;
	display: grid;
	grid-area: image;
	height: 100%;
	justify-items: center;
	width: 100%;
}

.cpnjumplist > .content > .artikel .image:not(.thumbnail):has( .image.productcover)
{
	height: 100%;
	width: 100%;
}

.cpnjumplist > .content > .artikel:not(.containimage) .image img:not(.productcover)
{
	object-fit: cover;
	object-position: center;
	height: fit-content;
	width: auto;
}

.cpnjumplist > .content > .artikel :is(.imagelink.productcover .image, .image.productcover)
{
	background-color: var(--light-bg-color);
	padding: 1.5em 1em;
}

.cpnjumplist > .content > .artikel .image .copyrightnote
{
	bottom: .5em;
	position: absolute;
	right: .5em;
	text-align: right;
}

@media (min-width: 568px) and (max-width: 767px)
{
	.cpnjumplist:not(.hascolumns) > .content > .artikel
	{
		align-items: stretch;
		grid-template-areas: "contentarea image";
		grid-template-columns: 3fr 1fr;
	}
}

@media (min-width: 768px)
{
	.cpnjumplist > .content > .artikel
	{
		/* align-items: center; */
		grid-template-areas: "contentarea image";
	}
}

@media (min-width: 768px) and (max-width: 1023px)
{
	.cpnjumplist.hascolumns > .content > .artikel
	{
		grid-template-columns: 2fr 1fr;
	}

	.cpnjumplist:not(.hascolumns) > .content > .artikel
	{
		grid-template-columns: 3fr 1fr;
	}
}

@media (min-width: 1024px)
{
	.cpnjumplist.hascolumns > .content > .artikel
	{
		grid-template-columns: 3fr 1fr;
	}

	.cpnjumplist:not(.hascolumns) > .content > .artikel
	{
		grid-template-columns: 4fr 1fr;
	}
}

/* Produktliste temporär */

.product.listitem
{
	--article-margin-top: 1em;
	--article-margin-bottom: 1em;
	align-items: center;
	display: flex;
	gap: 1em;
	flex-flow: row nowrap;
}

.product.listitem:not(:last-child)
{
	padding-bottom: 1em;
	border-bottom: var(--hairline);
}

.product.listitem > .imagearea
{
	flex: 0 1 clamp(80px, 15%, 150px);
	padding: 1em;
}