/*

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

Hueber.de CSS 2015

Stylesheets für Hueber.de

Version:   2.86
Datum:     10.09.2019

Erfordert: -

Hinweise:  -

Historie:	

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

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

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

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

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

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

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

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

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

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

1.7 (04.07.2016)  - Hotspot-Buch Version 2.5

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

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

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

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

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

1.01 (31.03.2015) - div. zusätzliche Stile

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

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

0.2 (05.12.2014)  - Service-Navigation vereinfacht

0.1 (14.11.2014)  - Alpha-Version

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

*/


/* Grundeinstellungen */

@font-face 
{
    font-family: 'Hueber Forward Sans';
	src: url('../fonts/forwardsans-thin-webfont.eot'),
	     url('../fonts/forwardsans-thin-webfont.woff2') format('woff2'),
         url('../fonts/forwardsans-thin-webfont.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face 
{
    font-family: 'Hueber Forward Sans';
	src: url('../fonts/forwardsans-light-webfont.eot'),
	     url('../fonts/forwardsans-light-webfont.woff2') format('woff2'),
         url('../fonts/forwardsans-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face 
{
    font-family: 'Hueber Forward Sans';
	src: url('../fonts/forwardsans-regular-webfont.eot'),
	     url('../fonts/forwardsans-regular-webfont.woff2') format('woff2'),
         url('../fonts/forwardsans-regular-webfont.woff') format('woff');
    font-weight: normal; /* 500 */
    font-style: normal;
}

@font-face 
{
    font-family: 'Hueber Forward Sans';
	src: url('../fonts/forwardsans-bold-webfont.eot'),
	     url('../fonts/forwardsans-bold-webfont.woff2') format('woff2'),
         url('../fonts/forwardsans-bold-webfont.woff') format('woff');
    font-weight: bold; /* 700 */
    font-style: normal;
}

@font-face 
{
    font-family: 'Hueber WebUI Symbols';
	src: url('../fonts/hueberwebuisymbols-webfont.eot'),
	     url('../fonts/hueberwebuisymbols-webfont.woff2') format('woff2'),
         url('../fonts/hueberwebuisymbols-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root
{
	--mhv-body-font: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
	--mhv-headline-font: "Hueber Forward Sans", Helvetica, Arial, Verdana, sans-serif;
	--mhv-symbol-font: "Hueber WebUI Symbols";

	--mhv-logo-bg-color: #e0002f;
	--mhv-highlight-color: #e0002f;
	--mhv-a-link-color: #245dc1;

	--mhv-active-color: rgb(224, 0, 47);
	--mhv-selected-color: rgb(224, 0, 47);
	--mhv-confirmation-color: rgb(25, 147, 32);
	--mhv-warning-color: #ffdc00;
	--mhv-lighter-warning-color: rgb(255, 238, 129);
	--mhv-error-color: #b62704;

	--mhv-navigation-active-color: #222;

	--mhv-line-color: #ccc;
	--mhv-input-border-color: rgba(0, 0, 0, .3);
	--mhv-disabled-input-border-color: rgba(0, 0, 0, .15);
	--mhv-input-hover-border-color: rgba(0, 0, 0, .5);

	--mhv-bg-color: #efefef;
	--mhv-light-bg-color: #f4f4f4;
	--mhv-overlay-bg-color: rgba(255, 255, 255, .95);
	--mhv-error-bg-color: #fff1ed;

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

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

	--mhv-boxshadow-color: rgba(48, 48, 48, .65);

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

	--body-font: var(--mhv-body-font);
	--headline-font: var(--mhv-headline-font);
	--symbol-font: var(--mhv-symbol-font);

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

	--active-color: var(--mhv-active-color);
	--selected-color: var(--mhv-selected-color);
	--confirmation-color: var(--mhv-confirmation-color);
	--warning-color: var(--mhv-warning-color);
	--lighter-warning-color: var(--mhv-lighter-warning-color);
	--error-color: var(--mhv-error-color);

	--navigation-active-color: var(--mhv-navigation-active-color);

	--line-color: var(--mhv-line-color);
	--input-border-color: var(--mhv-input-border-color);
	--disabled-input-border-color: var(--mhv-disabled-input-border-color);
	--input-hover-border-color: var(--mhv-input-hover-border-color);

	--bg-color: var(--mhv-bg-color);
	--light-bg-color: var(--mhv-light-bg-color);
	--overlay-bg-color: var(--mhv-overlay-bg-color);
	--error-bg-color: var(--mhv-error-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: var(--mhv-outline-color);
	--boxshadow-color: var(--mhv-boxshadow-color);

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

	--pg-header-height: 40px;

	--hairline: .5px solid var(--line-color);
	--thinline: 1px solid var(--line-color);

	--input-hairlineborder: .5px solid var(--input-border-color);
	--input-border: 1px solid var(--input-border-color);
	--input-transparent-border: 1px solid transparent;

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

/* @media only screen and (min-width: 420px)
{
	:root
	{
		--pg-header-height: 48px;
	}
} */

@media only screen and (min-width: 768px)
{
	:root
	{
		--pg-header-height: 64px;
	}
}

html
{
	font-size: 16px;
	height: 100%;
	width: 100%
}

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

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

h1,
h2,
h3
{
	font-weight: 300;
	line-height: 1.2;
}

h2,
h3,
h4
{
	color: #333;
}

h1
{
	font-size: 1.58rem;
}

h2
{
	font-size: 1.35rem;
}

h3
{
	font-size: 1.22rem;
}

h4
{
	font-weight: bold;
	font-size: 1.08em;
}

h5,
h6
{
	display: none !important;
}

table
{
	font-size: inherit;
}

img
{
	max-width: 100%;
}

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

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

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

/* Formularfelder */

input[type="date"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="email"], 
input[type="month"], 
input[type="number"], 
input[type="password"], 
input[type="search"], 
input[type="tel"], 
input[type="text"], 
input[type="time"], 
input[type="url"], 
input[type="week"],
select,
textarea
{
	border: var(--input-border);
	font-family: var(--body-font);
	font-size: .9rem;
	text-align: left;
}

input[type="date"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="email"], 
input[type="month"], 
input[type="number"], 
input[type="password"], 
input[type="tel"], 
input[type="text"], 
input[type="time"], 
input[type="url"], 
input[type="week"],
textarea
{
	border-radius: .2em;
	padding: .1rem .5rem;
}

input[type="date"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="email"], 
input[type="month"], 
input[type="number"], 
input[type="password"], 
input[type="search"], 
input[type="tel"], 
input[type="text"], 
input[type="time"], 
input[type="url"], 
input[type="week"],
select,
select[size="0"], 
select[size="1"]
{
	height: 2.2em;
}

input[type="search"] 
{
	border-radius: 1.4rem;
	padding: .2rem .6rem;
}

input[type="search"] ~ button[name="submitbt"]
{
	background: transparent;
	border: 0;
	height: 24px;
	margin: 6px 6px 6px 2px;
	min-width: auto;
	padding: 0;
	width: 24px;
}

input[type="checkbox"] + label,
input[type="radio"] + label
{
	padding-left: .3em;
}

select 
{
	border-radius: .2em;
	padding: .1rem 1.1rem .1rem .2rem;
}

select, select[size="0"], select[size="1"]
{
	-moz-appearance: none;
	-webkit-appearance: none;
	background-image: url(/assets/images/openselectbt.svg);
	background-position: right center;
	background-repeat: no-repeat;
	padding: 0 1.4em 0 .6em;
}

select::-ms-expand 
{
	display: none;
}

a.button,
button,
input[type="submit"]
{
	border-radius: .95rem;
	box-shadow: none;
	color: #444 !important;
	cursor: pointer;
	display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-align-items: center;
	align-items: center;
	font-size: .75rem;
	font-weight: bolder;
	-webkit-justify-content: center;
	justify-content: center;
	line-height: 1em;
	position: relative;
	text-decoration: none;
	text-shadow: 0 1px 1px white;
	vertical-align: top;
	width: auto;
}

a.button:not(.icon):not(.invisible),
button:not(.icon):not(.invisible),
input[type="submit"]:not(.icon):not(.invisible)
{
	min-width: 50px;
	padding: .3rem 1.5rem;
}

a.button
{
	height: 1.12rem;
}

a.button.icon,
button,
input[type="submit"]
{
	height: 1.85rem;
	padding: 0;
}

a.button.invisible
{
	height: 1.75rem;
	padding: 0;
}

a.button.icon,
button.icon,
input[type="submit"].icon
{
	box-sizing: border-box;
	width: 1.85rem;
}

a.button:not(.invisible),
button:not(.invisible),
input[type="submit"]:not(.invisible)
{
	background: rgba(255, 255, 255, .85);
	border: var(--input-border);
}

a.button.invisible,
button.invisible,
input[type="submit"].invisible
{
	background: transparent;
	border: var(--input-transparent-border);
	padding: 0 .2em;
}

a.button:not(.invisible)[disabled],
button:not(.invisible)[disabled],
input[type="submit"]:not(.invisible)[disabled]
{
	background: rgba(255, 255, 255, .2);
	border-color: var(--disabled-input-border-color);
	box-shadow: none;
	color: #bbb !important;
	text-decoration: none;
}

a.button:not(.invisible):hover:not([disabled]),
button:not(.invisible):hover:not([disabled]),
input[type="submit"]:not(.invisible):hover:not([disabled])
{
	background: rgba(255, 255, 255, .85);
	border-color: var(--input-hover-border-color);
	box-shadow: none;
	color: inherit;
	text-decoration: none;
}

a.button:not(.invisible):active:not([disabled]),
button:not(.invisible):active:not([disabled]),
input[type="submit"]:not(.invisible):active:not([disabled])
{
	-webkit-backdrop-filter: brightness(85%);
	backdrop-filter: brightness(85%);
	border-color: var(--input-hover-border-color);
	box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.35);
}

a.button,
a.button > *,
button,
button > *,
input[type="submit"],
input[type="submit"] > *
{
	-webkit-transition: transform .1s ease-in-out;
	transition: transform .1s ease-in-out;
	-webkit-transform: scale(1);
	transform: scale(1);
}

a.button:active:not([disabled]),
a.button:active:not([disabled]) > *,
button:active:not([disabled]),
button:active:not([disabled]) > *,
input[type="submit"]:active:not([disabled]),
input[type="submit"]:active:not([disabled]) > *
{
	-webkit-transform: scale(.95);
	transform: scale(.95);
}

a.button.invisible:active:not([disabled]),
button.invisible:active:not([disabled]),
input[type="submit"].invisible:active:not([disabled])
{
	border-color: transparent;
	box-shadow: none;
}

a.button > *:not(:first-child),
button > *:not(:first-child),
input[type="submit"] > *:not(:first-child)
{
	padding-left: .4em;
}

a.button > img,
button > img,
button.submitbt > img,
input[type="submit"].submitbt > img
{
	height: 23px;
	max-width: none;
	padding: 0;
	width: 23px;
}

a.button, 
button, 
input[type="submit"]
{
	text-shadow: none;
}

/* body.dark a.button, 
body.dark button, 
body.dark input[type="submit"]
{
	color: #ccc !important;
}

@media (prefers-color-scheme: dark) 
{
	body a.button, 
	body button, 
	body input[type="submit"]
	{
		color: #ccc !important;
	}	
} */

a.button i.wui, 
button i.wui,
a.button.wui::before, 
button.wui::before
{
	font-size: 22px;
}

a.button:not(.labeled) i.wui, 
button:not(.labeled) i.wui,
a.button.wui::before, 
button.wui::before
{
	line-height: 24px;
}

a.button.additem,
a.button.additem:hover,
button.additem,
button.additem:hover,
input[type="submit"].additem,
input[type="submit"].additem:hover
{
	background-color: rgb(29, 131, 12);
	border-color: rgb(29, 131, 12);
}

.button + .button,
.button + button,
button + .button,
button + button,
button + input,
input + button,
input + .button
{
	margin-left: 1rem;
}

/* UI Symbols (ALPHA) */
/* .uib => bold, .uir = regular, .uil = light, .uit = thin */

.wui
{
	font-family: var(--symbol-font) !important;
	font-style: normal;
	font-weight: normal;
}

.uib-hamburger::before
{
	content: "\F0000";
}

.btmenu.active .uib-hamburger::before
{
	content: "\F0011";
}

.uir-hamburger::before
{
	content: "\F0001";
}

.btmenu.active .uir-hamburger::before
{
	content: "\F0012";
}

.uil-hamburger::before
{
	content: "\F0002";
}

.uit-hamburger::before
{
	content: "\F0003";
}

.uib-close::before
{
	content: "\F0010";
}

.uir-close::before
{
	content: "\F0011";
}

.uil-close::before
{
	content: "\F0012";
}

.uit-close::before
{
	content: "\F0013";
}

.uib-search::before
{
	content: "\F0020";
}

.uir-search::before
{
	content: "\F0021";
}

.uil-search::before
{
	content: "\F0022";
}

.uit-search::before
{
	content: "\F0023";
}

.uib-plus::before
{
	content: "\F0030";
}

.uir-plus::before
{
	content: "\F0031";
}

.uil-plus::before
{
	content: "\F0032";
}

.uit-plus::before
{
	content: "\F0033";
}

.uib-settings::before
{
	content: "\F0040";
}

.uil-settings::before
{
	content: "\F0042";
}

.uit-settings::before
{
	content: "\F0043";
}

.uib-leftarrow::before
{
	content: "\F0050";
}

.uil-leftarrow::before
{
	content: "\F0052";
}

.uit-leftarrow::before
{
	content: "\F0053";
}

.uib-rightarrow::before
{
	content: "\F0060";
}

.uil-rightarrow::before
{
	content: "\F0062";
}

.uit-rightarrow::before
{
	content: "\F0063";
}

.uil-previous::before
{
	content: "\F0072";
}

.uit-previous::before
{
	content: "\F0073";
}

.uil-next::before
{
	content: "\F0082";
}

.uit-next::before
{
	content: "\F0083";
}

.uil-scrolldown::before
{
	content: "\F0092";
}

.uib-centerdotoutline::before
{
	content: "\F00B0";
}

.uir-centerdotoutline::before
{
	content: "\F00B1";
}

.uil-centerdotoutline::before
{
	content: "\F00B2";
}

.uit-centerdotoutline::before
{
	content: "\F00B3";
}

.uib-centerdot::before
{
	content: "\F00C0";
}

.uir-centerdot::before
{
	content: "\F00C1";
}

.uil-centerdot::before
{
	content: "\F00C2";
}

.uit-centerdot::before
{
	content: "\F00C3";
}

.uil-triplecenterdot::before
{
	content: "\F00D2";
}

.uit-triplecenterdot::before
{
	content: "\F00D3";
}

.uil-uparrow2::before
{
	content: "\F00E2";
}

.uil-downarrow2::before
{
	content: "\F00F2";
}

.uib-tick::before
{
	content: "\F0110";
}

.uil-tick::before
{
	content: "\F0112";
}

.uir-zoomin::before
{
	content: "\F0151";
}

.uir-zoomout::before
{
	content: "\F0161";
}

.uil-attentiontriangle::before
{
	content: "\F0172";
}


/* UI Symbols (ALPHA) */
/* various syms, single font weight */

.ui-adduser::before
{
	content: "\0070";
}

.ui-attentiontriangle::before
{
	content: "\F0174";
}

.ui-audioplayer::before
{
	content: "\004E";
}

.ui-bookshelf::before
{
	content: "\004C";
}

.ui-calendar::before
{
	content: "\0031";
}

.ui-clockfivetotwelve::before
{
	content: "\0033";
}

.ui-clocktentotwelve::before
{
	content: "\0034";
}

.ui-copytoclipboard::before
{
	content: "\002F";
}

.ui-document::before
{
	content: "\0029";
}

.ui-downloaddocument::before
{
	content: "\002A";
}

.ui-envelope::before
{
	content: "\006B";
}

.ui-externalsite::before
{
	content: "\006C";
}

.ui-hand::before
{
	content: "\005F";
}

.ui-help::before
{
	content: "\0053";
}

.ui-handpointing::before
{
	content: "\007D";
}

.ui-highlighter::before
{
	content: "\0024";
}

.ui-home::before
{
	content: "\0039";
}

.ui-hueberlogo::before
{
	content: "\0046\0048";
}

.ui-hueberlogo2::before
{
	content: "\0068";
}

.ui-lock::before
{
	content: "\005b";
}

.ui-login::before
{
	content: "\0050";
}

.ui-logout::before
{
	content: "\0051";
}

.ui-macosx::before
{
	content: "\004d";
}

.ui-mousepointer::before
{
	content: "\0060";
}

.ui-mousepointerblack::before
{
	content: "\007E";
}

.ui-nosign2::before
{
	content: "\0071";
}

.ui-offline::before
{
	content: "\0028";
}

.ui-openenvelope::before
{
	content: "\004B";
}

.ui-pencil::before
{
	content: "\0023";
}

.ui-register::before
{
	content: "\0070";
}

.ui-shoppingcart::before
{
	content: "\0022";
}

.ui-shoppingcart2::before
{
	content: "\0021";
}

.ui-speechbubble::before
{
	content: "\0076";
}

.ui-speechbubblequestionmark::before
{
	content: "\0055";
}

.ui-speechbubbleexclamationmark::before
{
	content: "\0057";
}

.ui-speechbubbleexclamationmark2::before
{
	content: "\0056";
}

.ui-sync::before
{
	content: "\0030";
}

.ui-trashcan::before
{
	content: "\0064";
}

.ui-user::before
{
	content: "\0075";
}

.ui-videoplayer::before
{
	content: "\0026";
}

.ui-videocall::before
{
	content: "\0025";
}

.ui-videoplayer::before
{
	content: "\0026";
}

.ui-wififull::before
{
	content: "\002C";
}

.ui-windows10::before
{
	content: "\0077";
}

/* HTML-Head/Body usw. */

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

/* Freischwebende Buttons (Kontakt und Seitenanfang) */

#contactformbt,
#topofpagebt
{
	background: rgba(119, 119, 119, .3);
	border-radius: 99rem;
	bottom: 70px;
	color: white;
	cursor: pointer;
	font-size: 20px;
	height: 30px;
	line-height: 1.1;
	order: 50;
	position: fixed;
	text-align: center;
	-webkit-transition: opacity 1.5s ease;
	transition: opacity 1.5s ease;
	width: 30px;
	z-index: 99999;
}

#contactformbt
{
	right: 20px;
}

#topofpagebt
{
	opacity: 0;
	pointer-events: none;
	right: 60px;
}

#contactformbt::after,
#topofpagebt::after
{
	display: inline-block;
	font-family: var(--symbol-font);
	font-style: normal;
	font-weight: normal;
	padding-top: 4px;
}

#contactformbt::after
{
	content: "k";
}

#topofpagebt::after
{
	content: "\F00E2";
}

body.pgtoparea #topofpagebt
{
	opacity: 1;
	pointer-events: auto;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}

/* Hinweis zur Verwendung von Cookies */

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

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

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

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

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

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

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

/* Seite */

#pagecontent
{
	color: #444;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	margin: 0 auto;
	max-width: 1024px;
	min-width: 320px;
	position: relative;
	width: 96%;
}

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

#pagetopareabg
{
	align-items: stretch;
	display: flex;
	flex-flow: row wrap;
	order: 5;
	position: relative;
	width: 100%;
}

@media only screen and (max-width: 767px)
{
	#pagetopareabg::after
	{
		content: "";
		display: block;
		height: var(--pg-header-height);
		width: 100%;
	}
}

/* Bereiche */

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

body:not(.drawer):not(.layer) #layer
{
	display: none;
}

body.drawer #layer,
body.layer #layer
{
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
	background-color: rgba(0, 0, 0, .4);
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 100000;
}

/* Drawer für Formulare */

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

@media only screen and (max-width: 567px)
{
	#drawer
	{
		bottom: 0;
		left: 0;
		padding: .5rem;
		right: 0;
		top: var(--pg-header-height);
	}
}

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

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

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

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

body.drawer #drawer
{
	opacity: 1;
}

#drawerclosebutton
{
	background-color: white;
	border-radius: 50%;
	box-shadow: var(--boxshadow-large);
	cursor: pointer;
	font-family: var(--symbol-font);
	height: 32px;
	line-height: 32px;
	position: fixed;
	text-align: center;
	width: 32px;
	z-index: 200500;
}

#drawerclosebutton::after
{
	content: "\F0011";
}

body:not(.drawer) #drawerclosebutton
{
	display: none;
}

@media only screen and (max-width: 567px)
{
	#drawerclosebutton
	{
		display: none;
	}
}

@media only screen and (min-width: 568px) and (max-width: 767px)
{
	#drawerclosebutton
	{
		right: 1rem;
		top: calc(1rem + var(--pg-header-height));
	}
}

@media only screen and (min-width: 768px)
{
	#drawerclosebutton
	{
		right: 3rem;
		top: 2.5rem;
	}
}

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

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

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

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

/* Kopfzeile */

#globalbody,
#globalheader,
#toplevelnavi
{
	box-sizing: border-box;
	flex: 0 0 100%;
}

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

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

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

#globalheader
{
	height: var(--pg-header-height);
	line-height: 1;
	position: relative;
}

#globalheader.nobreadcrumb
{
	height: calc(var(--pg-header-height) + 24px);
}

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

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

	#globalheader
	{
		order: 1;
	}
}

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

	/* #globalheader
	{
		border-bottom: var(--hairline);
	} */
}

#globalheader a#hueberlogo
{
	font-family: var(--symbol-font);
	font-style: normal;
	font-weight: normal;
	left: 0;
	position: relative;
	text-decoration: none;
}

/* #globalheader a#hueberlogo::before
{
	color: white;
	content: "G";
}

#globalheader a#hueberlogo::after
{
	color: var(--logo-bg-color);
	content: "h";
} */

#globalheader a#hueberlogo::after
{
	color: var(--logo-bg-color);
	content: "Ó";
}

@media only screen and (max-width: 767px)
{
	#globalheader a#hueberlogo
	{
		font-size: 32px;
		top: .25rem;
	}
}

@media only screen and (min-width: 768px)
{
	#globalheader a#hueberlogo
	{
		font-size: 44px;
		top: 1rem;
	}
}

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

.zg #globalheader img#hueberlogo
{
	background-image: url(/assets/images/hueberdesplashsignet.svg);
	background-repeat: no-repeat;
	background-size: auto;
	height: 78px;
	width: 169px;
}

#globalheader img#menubt, 
#globalheader a#menubt.nonavi,
#globalheader img#opensearchbt, 
#globalheader a#opensearchbt, 
#globalheader img#pageheaderdropdownbt 
{
	display: none;
}

@media only screen and (min-width: 768px)
{
	#globalheader a#menubt 
	{
		display: none;
	}
}

#globalheader a#menubt.nonavi 
{
	display: none;
}

#servicenavi
{
	color: #9b9b9b;
	float: right;
	margin-top: .7em;
}

a#hueberlogo ~ #servicenavi
{
	margin-top: 2.25em;
}

.zg #servicenavi
{
	margin-top: 1em;
}

#servicenavi ul
{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex
}

#servicenavi li
{
	margin-left: 1.5em;
	padding: .3em 0 .2em .8em;
}

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

#servicenavi li.hasswitch
{
	padding-top: 0;
}

#servicenavi li > a.active
{
	color: #777;
	font-weight: bold;
}

#mobileservicenavi
{
	display: none;
}

/* Breadcrumb-Navi */

#breadcrumb
{
	flex: 1 1 calc(100% - 240px);
	order: 3;
}

.breadcrumb
{
	color: #666;
	clear: both;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	overflow: hidden;
}

.breadcrumb.global
{
	background-color: var(--light-bg-color);
}

.breadcrumb.global,
.breadcrumb.global > ul > li
{
	height: 3.6em;
}

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

.breadcrumb > ul:first-of-type

{
	align-items: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

.breadcrumb:not(.global),
.breadcrumb:not(.global) > ul > li
{
	height: 2.8em;
}

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

.breadcrumb.global > ul
{
	overflow: hidden;
}

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

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

.breadcrumb > ul:first-of-type > li
{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	-webkit-flex: 0 2 auto;
	flex: 0 2 auto;
	position: relative;
}

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

.breadcrumb.global > ul li:first-child a.bcghome > span:first-child
{
	display: none;
}

.breadcrumb.global > ul li:first-child a.bcghome::before
{
	content: "\0039";
	display: inline-block;
	font-family: var(--symbol-font);
	font-style: normal;
	font-weight: normal;
}

.breadcrumb > ul > li > *
{
	color: inherit;
	text-decoration: none;
	z-index: 2;
}

@media only screen and (min-width: 768px)
{
	.breadcrumb > ul > li:first-child
	{
		padding-left: 1em;
	}
	
	body:not(.search) .breadcrumb > ul li:not(:first-child)::before
	{
		background-color: white;
		content: "";
		display: block;
		height: 60px;
		position: absolute;
		left: -20px;
		width: 20px;
		z-index: 0;
	}
	
	body:not(.search) .breadcrumb.global > ul li:not(:first-child)::before
	{
		background-color: var(--light-bg-color);
	}

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

	body:not(.search) .breadcrumb > ul li:not(:last-child)::after
	{
		box-shadow: 1.2px -1.2px .4px #ccc;
	} 
	
	body:not(.touch) .breadcrumb > ul:first-of-type > li:hover,
	body:not(.touch):not(.search) .breadcrumb > ul li:not(:first-child):hover::before,
	body:not(.touch):not(.search) .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 */

#searchboxcontainer
{
	align-content: stretch;
	align-items: center;
	background-color: var(--light-bg-color);
	display: flex;
	flex: 1 0 240px;
	flex-flow: row wrap;
	order: 4;
}

#searchboxcontainer > form
{
	align-content: stretch;
	align-items: center;
	display: flex;
	flex: 0 0 100%;
	margin-bottom: 0;
	position: relative;
	width: 240px;
}

#globalheader + #searchboxcontainer > form
{
	width: 280px;
}

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

#searchboxcontainer > form button[name="submitbt"]
{
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
}

#globalheader + #searchboxcontainer > form input[type="search"]
{
	font-size: 1.1em;
}

#searchboxcontainer > form div.dropdown
{
	background-color: var(--overlay-bg-color);
	/* border: var(--input-color); */
	border-radius: 0 0 .5rem .5rem;
	border: 0;
	box-sizing: border-box;
	top: 110%;
	width: 100%;
}

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

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

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

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

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

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

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

#searchboxcontainer > form div.dropdown ul > li
{
	padding: 1px
}

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

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

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

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

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

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

/* Infoheader */

#toplevelnavi
{
	clear: both;
	color: #666;
	order: 5;
	position: relative;
}

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

body:not(.search) #toplevelnavi
{
	min-height: 120px;
}

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

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

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

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

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

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

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

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

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

.breadcrumb.global > 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)
{
	-webkit-transition: color .3s, border-bottom-color .2s; 
	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;
	-webkit-transition: all .2s; 
	transition: all .2s; 
}

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

/* Navigation links */

#navi
{
	clear: both;
	float: left;
	margin-right: 4%;
	order: 10;
	width: 23%;
}

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

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

#navi > ul
{
	font-size: 1rem;
}

#navi > ul > li 
{
	margin-bottom: 1.4em
}

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

#navi > ul > li ul > li
{
	margin-top: 1.2em
}

#navi li.inactive
{
	color: #bbb;
}

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

#navi li:not(.inactive):not(.selected) > a
{
	display: inline-block;
	-webkit-transition: all .2s; 
	transition: all .2s; 
}

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

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

/* Content */

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

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

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

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

/* Sektionen */

.body
{
	box-sizing: border-box;
	margin-bottom: 1em;
	width: 100%;
}

.body:last-child,
.body:only-child
{
	margin-bottom: 0;
}

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

.body > article + .body,
.body > ul + .body
{
	margin-top: 1em;
}

.body.onecol
{
	clear: both;
}

/* Spalten-Layout */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.relative
{
	position: relative;
}

#login.body
{
	margin: 0 !important;
	width: 100% !important;
}

/* One Pager */

body.op #content .body
{
	margin-bottom: 0;
	position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	body.op .body .artikel
	{
		font-size: 1.1em;
	}
}

/* Dashboard */

body.dashboard #content > .body:first-of-type
{
	background-color: white;
	border: 1px solid #bbb;
	border-radius: .4rem;
	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;
}

/* News (Aktuelles-Meldungen) */

.body.news:not(.liste) > .content > *
{
	box-sizing: border-box;
}

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

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

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

.body.hotspotbook 
{
	position: relative;
}

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

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

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

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

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

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

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

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

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

.body.hotspotbook .tocarea .containerbox ul.toc 
{
	align-items: bottom;
	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 img.image 
{
	border: 1px solid #ddd; 
	max-height: 80px;
}

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

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

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

/* Slider */

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

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

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

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

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

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

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

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

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

/* Help View */

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

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

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

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

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

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

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

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

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

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

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

.body.helpview div.main > .artikel.faqentries ul.liste > li.internallink.anchor::before,
.body.helpview div.main > .artikel.results ul.liste > li::before,
.body.helpview div.main > .artikel.faq > .refarea > ul > li::before
{
	background-color: var(--sym-bg-color);
	border: 1px solid var(--sym-border-color);
	border-radius: 50%;
	color: var(--sym-color);
	content: "\F00F2";
	height: 1.4em;
	left: 0;
	position: absolute;
	width: 1.4em;
	text-align: center;
}

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

.body.helpview div.main > .artikel.results ul.liste > li::before,
.body.helpview div.main > .artikel.faq > .refarea > ul > li::before
{
	content: "\55";
	font-family: var(--symbol-font);
	font-style: normal;
	font-weight: normal;
}

@media only screen and (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 only screen and (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 only screen and (min-width: 768px)
{
	.body.helpview
	{
		border-top: var(--hairline);
		grid-template-columns: 25% auto;
		margin-top: 2rem;
	}

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

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

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

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

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

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

@media only screen and (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 only screen and (min-width: 768px)
{
	body.error .body:first-of-type
	{
		border: .5px solid #777;
		margin: 2rem auto;
		max-width: 640px;
		padding: 2rem;
	}
}

/* Suche */

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

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

.parameterbox,
.parameterselectbox,
.searchbox 
{
	background-color: #f4f4f4;
	box-sizing: border-box;
	margin: 1em auto 0 auto;
	padding: .4em .3em;
}

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

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

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

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

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

/* Grid */

@media only screen and (min-width: 420px)
{
	.grid > .content
	{
		align-items: stretch;
		column-gap: 1rem;
		display: grid;
		row-gap: 1rem;
	}

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

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

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

@media only screen and (min-width: 420px) and (max-width: 767px)
{
	.body.news.grid .content
	{
		column-gap: 1.8rem;
		row-gap: 1.2rem;
	}

	.form li.grid > .content
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

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

@media only screen and (min-width: 768px)
{
	.body.news.grid .content
	{
		column-gap: 2.5rem;
		row-gap: 1.5rem;
	}

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

	.form li.grid > .content
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

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

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

/* Fußzeile */

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

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

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

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

#socialmedia img
{
	max-width: none;
	width: 20px;
}
@media only screen and (max-width: 567px)
{
	#globalfooter ul,
	#globalfooter #socialmedia
	{
		flex-flow: column nowrap;
	}

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

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

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

	#socialmedia
	{
		justify-content: flex-end;
	}

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

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

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

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

@media only screen and (min-width: 568px)
{
	#globalfooter
	{
		margin-left: 27%;
		width: 73%;
	}

	body.dashboard #globalfooter,
	body.nonavicolumn:not(.op) #globalfooter
	{
		margin-left: 0;
		width: 100%;
	}
}

/* Notification Center */

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

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

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

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

#notificationcenter .artikel
{
	background: var(--bg-color);
	/* -webkit-backdrop-filter: blur(25px) saturate(150%);
	backdrop-filter: blur(25px) saturate(150%); */
	border-radius: .5em;
	box-shadow: var(--boxshadow-large);
	box-sizing: border-box;
	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%);
	-webkit-transition: opacity 1s ease, transform 1s ease-out;
	transition: opacity 1s ease, transform 1s ease-out;
	white-space: normal;
	width: 100%;
}

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

#notificationcenter .artikel.success
{
	background: rgb(29, 131, 12);
}

#notificationcenter .artikel.notice
{
	background: #ffdc00;
}

#notificationcenter .artikel.important
{
	background: #d4002c;
}

#notificationcenter .artikel::before
{
	background: rgba(0, 0, 0, .25) url(/assets/images/whiteclosebt.svg) center no-repeat;
	background-size: 14px;
	border-radius: 9px;
	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);
	-webkit-transition: opacity .5s ease, transform .5s ease-out;
	transition: opacity .5s ease, transform .5s ease-out;
}

/* Benachrichtigungen und Badges */

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

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

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

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

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

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

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

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

.badge.notice
{
	background-color: #ffdc00;
}

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

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

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

/* Headlines in Sektionen, Artikeln und Listen */

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

#content h1
{
	margin-top: 2rem;
}

#content header > h1:not(:last-child),
#content .body.grid > header > h1
{
	margin-bottom: 0 !important;
}

#content :not(header) > h1,
#content header > h1:last-child
{
	margin-bottom: .6rem;
}

#content h2,
#content h3,
#content h4
{
	margin-top: 1.1rem;
}

#content header h2:not(:last-child),
#content header h3:not(:last-child),
#content header h4:not(:last-child)
{
	margin-bottom: 0;
}

#content :not(header) h2,
#content :not(header) h3,
#content :not(header) h4,
#content header h2:last-child,
#content header h3:last-child,
#content header h4:last-child
{
	margin-bottom: .5rem;
}

.body > header:first-child > .headarea,
.body:not(.grid):not(.news) > .content > header.displaynone:first-child + .artikel:not(.topteaser) > .contentarea > header > .headarea,
.body:not(.grid):not(.news) > .content > .artikel:not(.topteaser):first-child > .contentarea > header > .headarea
{
	margin-top: .6rem !important;
}

#content .artikel.topline .contentarea > header > h2,
#content .artikel.topline .contentarea > header > h3,
#content .artikel.topline .contentarea > header > h4
{
	margin-top: 0rem;
}

.body:not(.grid):not(.news) > .content > .artikel:first-child
{
	margin-top: 0 !important;
}

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

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

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

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

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

.kategorie
{
	color: #777;
	display: block;
	font-size: .75rem;
	font-weight: normal;
	padding-bottom: .35rem;
}

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

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

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

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

.subhead
{
	color: #444;
	line-height: 1.5em;
	margin-bottom: .8rem !important;
	margin-top: .6em;
}

/* Absätze und Listen */

#content header + p,
#content header + ol,
#content header + ul,
#content h1 + p,
#content h1 + ol,
#content h1 + ul,
#content h2 + p,
#content h2 + ol,
#content h2 + ul,
#content h3 + p,
#content h3 + ol,
#content h3 + ul,
#content h4 + p,
#content h4 + ol,
#content h4 + ul
{
	margin-top: .4em;
}

.artikel ol,
.artikel p,
.artikel td,
.artikel th,
.artikel:not(.html):not(.interactionsbox) ul,
.liste .text ol,
.liste .text p,
.liste .text ul
{
	line-height: 1.5em;
	margin-bottom: 0;
	margin-top: 1em;
}

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

.artikel,
ol.liste,
ul.liste
{
	margin-top: 1em;
	width: 100%;
}

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

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

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

.body > .artikel:not(.showdatearea) .datearea,
.body:not(.showdatearea) > .content .artikel:not(.showdatearea) .datearea
{
	display: none;
}

.showonlinedates .listentry .datearea
{
	display: block;
}

.artikel .extendedtextbt
{
	background: #bbb;
	border: none;
	border-radius: 4px;
	color: white !important;
	cursor: pointer;
	font-size: .8em;
	padding: .2em .5em .1em .5em;
}

/* Artikel in News-Seiten (normales und Listenansicht) */

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

.body.news.liste > .content > .artikel
{
	border-top: 1px solid #ddd;
	box-sizing: border-box;
	padding-top: .1em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.listnavibox
{
	text-align: center;
}

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

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

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

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

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

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

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

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

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

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

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

.interactionsbox
{
	clear: both;
}

/* Artikel-Typ: iFrame-Content */

article.iframe
{
	margin-top: 0;
}

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

/* Artikel-Typ: Livebook */

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

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

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

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

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

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

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

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

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

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

/* Artikel-Typ: Präsentation */

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

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

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

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

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

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

/* Artikel-Typ: Produktpräsentation */

.body.highlight.grid .productpresentation
{
	margin-top: 2em;
	border-top: 1px solid #ccc;
	padding-top: .1em;
}

.body.highlight.grid .productpresentation .bild
{
	margin-top: 1em;
}

.body.highlight.grid .productpresentation .kategorie + .bild
{
	margin-top: .2em;
}

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

.body.media .productpresentation 
{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
/* 	-webkit-justify-content: space-between;
	justify-content: space-between;
 */	margin-top: 3em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Artikel-Typ: Hotspot-Buchseite */

article.hotspots 
{
	left: 0;
	margin-top: 0 !important;
	position: relative;
	top: 0;
	width: 100%;
}

article.hotspots .imagearea
{
	position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Artikel-Typ: Tabelle */

article.table table
{
	background-color: #ddd;
	border-spacing: 0 1px;
	margin: 0 auto;
	width: 100%;
}

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

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

article.table thead > tr, 
article.table tr.head > th
{
	background-color: #f4f4f4;
}

article.table tbody > tr 
{
    background-color: white;
}

article.table th
{
	color: #555;
	font-weight: bolder;
}

article.table th, 
article.table td
{
	padding: 0.5em 0.3em;
}

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

/* Artikel-Typ: Tabelle (Ausprägung für Veranstaltungen) */

/* article.table.eventlist table tr.labelrow
{
	display: none;
} */

article.table.eventlist span.tagarea::before
{
	content: "\A0";
}

article.table.eventlist span.tagarea > span.tag[data-keyword=webinar]
{
	background-color: var(--highlight-color);
	border-color: var(--highlight-color);
}

article.table.eventlist ul.subeventlist
{
	list-style: none;
	margin-top: .5rem;
	padding-left: 0 !important;
}

article.table.eventlist ul.subeventlist > li,
article.table.eventlist ul.subeventlist > li > ul > li
{
	border-top: 1px solid #ddd;
	margin-top: .5rem;
}

article.table.eventlist ul.subeventlist > li header h4,
article.table.eventlist ul.subeventlist > li > ul > li header h4
{
	margin-top: .5rem !important;
}

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

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

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

article.video.youtube p + .iframecont
{
	margin-top: 1em;
}

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

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

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

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

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

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

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

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

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

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

/* Artikel-Typ: Suchtreffer */

/* Artikel-Typ: App Store Button */

article.appstorelink
{
	text-align: left;
}

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

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

/* Artikel-Typ: Jobbörse */

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

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

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

article.jobentry .textinfo .userinput
{
	line-height: 1.5em;
	margin-bottom: 0;
	margin-top: 1em;
}

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

/* Artikel mit Haken-Liste */

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

.artikel.ticklist .contentarea * + ul
{
	margin-top: 1rem !important;
}

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

.artikel.ticklist .contentarea ul > li:last-child
{
	padding: .2rem 0 .2rem 3rem;
}

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

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

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

/* Weitere Sonderformate */

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

.extendedmargintop
{
	margin-top: 3em !important;
}

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

.marginbottom
{
	margin-bottom: 2em !important;
}

.margintop
{
	margin-top: 1em !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.topteaser
{
	background-color: var(--light-bg-color);
	box-sizing: border-box;
	padding-bottom: .5em;
	padding-left: .6em;
	padding-right: .6em;
}

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

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

.body.news .topteaser > .contentarea
{
	padding-top: .9em;
}

.body:not(.news) .topteaser
{
	border-radius: .3rem;
	padding-top: .2em;
}

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

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

.topteaser.floatleft1,
.topteaser.floatright1
{
	width: 46%;
}

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

.article.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: .3rem;
	box-sizing: border-box;
	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
{
	float: right !important;
	margin: .1em 0 1em 2.5em !important;
	transform: rotate(3deg);
}

.artikel.updatedservicenotice > .contentarea > .image .productcover
{
	max-width: 150px;
}

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

.table.infobox
{
	margin-bottom: 2.5em;
	margin-top: 2.5em;
}

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

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

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

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

/* Listen */

ul.liste
{
	line-height: 1.5em;
	list-style: none !important;
	margin: 0;
	/* margin: 0 !important; */	/* HACK */
	padding-left: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.artikel.productpresentation .imagearea .thumbnail.noimage,
.body.grid > ul.liste.content > li.file .thumbnail
{
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 64px;
	max-width: 160px;
}

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

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

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

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

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

ul.liste > li .info > .filedescr
{
	display: none;
}

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

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

ul.liste > li .mediaplayerbt > img,
ul.liste > li .mediadownloadbt > img
{
	vertical-align: middle;
	width: 30px;
}

ul.liste > li .mediaplayerbt
{
	margin-left: 1em;
}

ul.liste > li .mediadownloadbt
{
	margin-left: .3em;
}

ul.liste > li > div.text > p:first-child
{
	margin-top: 0;
}

.body > ul.liste:not(.content) > li:not(.showdatearea) .datearea,
.body:not(.showdatearea) > ul.liste.content > li:not(.showdatearea) .datearea
{
	display: none;
}

/* Veranstaltungen, Events */

.eventlist td .badge,
#eventform .badge
{
	align-items: center;
	background-color: transparent;
	border-radius: 0;
	color: #444;
	display: inline-flex;
	font-weight: bold;
	font-size: .7rem;
	margin: 0;
	padding: 0;
	text-align: left;
	white-space: normal;
}

.eventlist td .badge::before,
#eventform .badge::before
{
	content: "\F0174";
	font-family: var(--symbol-font);
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	padding: 0 .2em 0 0;
}

.eventlist td .badge.notice::before,
#eventform .badge.notice::before
{
	color: #ffcd00;
}

.eventlist tr.fullybooked .subeventlist .badge.notice
{
	display: none;
}

.eventlist td .badge.important::before,
#eventform .badge.important::before
{
	color: var(--highlight-color);
}

/* Formulare */

.formintro + form
{
	margin-top: 1rem;
}

.form
{
	line-height: 1.5;
	position: relative;
}

.form ul
{
	list-style: none;
	list-style-position: outside;
	margin: 0;
	padding: 0 !important;
	position: relative;
	zoom: 1;
}

.form li
{
	box-sizing: border-box;
	width: 100%;
}

.form li.flexbox > .content,
.form li.grid > .content,
.form li.grid > .group
{
	display: grid;
}

@media only screen and (max-width: 419px)
{
	.form li.flexbox > .content,
	.form li.grid > .content,
	.form li.grid > .group
	{
		grid-template-columns: 100%;
	}
}

@media only screen and (min-width: 420px) and (max-width: 567px)
{
	.form li.flexbox > .content,
	.form li.grid > .content,
	.form li.grid > .group
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (min-width: 568px)
{
	.form li.flexbox > .content,
	.form li.grid > .content,
	.form li.grid > .group
	{
		grid-template-columns: repeat(3, 1fr);
	}
}

.form.lightui li:not(.separator):not(.buttonbar)
{
	padding: .1em 0;
}

.form:not(.lightui) li:not(.separator):not(.buttonbar)
{
	padding: .3em .4em;
	background-color: #f4f4f4;
}

.form li.floatingcontent
{
	min-height: contain-floats;
}

.form li.floatingcontent
{
  content: "";
  clear: both;
  display: table;
}

.form li.floatingcontent > *
{
	float: left;
	margin: .2rem 1rem .2rem 0;
}

.form .separator
{
	border-top: 1px solid #999;
}

.form.lightui .separator
{
	margin-top: 1.2em;
	padding: .4em .4em 0 0;
}

.form.lightui ul.separator
{
	padding-top: .4em !important;
}

.form:not(.lightui) .separator
{
	background-color: #eee;
	padding: .4em;
}

.form li.buttonbar,
.form li.buttonbar2
{
	text-align: right;
}

.form li.buttonbar
{
	padding: .8em 0 1em 0;
}

.form ul.liste > li.file
{
	background-position: 1.7em .5em;
	padding: 1em 0 !important;
}

.form ul.liste > li.file > span:first-child
{
	text-indent: -5em;
}

.form ul.liste > li.file > span:first-child *
{
	text-indent: 0;
}

.form ul:not(.orderlist) > li:not(.follow):not(.orderitem):not(:first-child)
{
	margin-top: .5em;
}

.form li.gap
{
	margin-top: 1.8em !important;
}

.form li.orderitem
{
	margin-top: .2em;
}

.form li:not(.orderitem) + li.orderitem
{
	margin-top: .6em;
}

.form li fieldset
{
	border-bottom: none;
	border-left: none;
	border-right: none;
	border-top: 1px solid #aaa;
	margin: .5em 0 0 0;
	padding: .5em 0 0 0;
}

.form li > label
{
	color: #666;
	display: inline-block;
}

.form li > label.required::after,
.form li > div > label.required::after,
.form li > span:only-child > input[type="checkbox"] + label.required::after
{
	color: black;
	content: "\00a0*";
}

.form li.orderitem > input[type="number"] + label,
.form li.orderitem > input[type="text"] + label
{
	margin-left: .8em;
	margin-right: 0;
	width: calc(90% - .8em);
}

.form li > div.licensebox
{
	background-color: white;
	border: 1px solid #ccc;
	font-size: .9em;
	height: 260px;
	line-height: 1.3;
	overflow-y: scroll;
	padding: .2em .5em;
	width: calc(100% - 1em - 2px);
}

.form li.vertical > label
{
	display: block;
}

.form li.vertical > label
{
	margin-bottom: .5em;
}

/* .form li.vertical > span:not(.tag) */
.form li.vertical > span[class=""],
.form li.vertical > span:not([class])
{
	display: flex !important;
}

/* .form li:not(.vertical) span:not(.tag):not(.thumbnail) */
.form li:not(.vertical) span[class=""],
.form li:not(.vertical) span:not([class])
{
	display: inline-flex;
}

/* .form li > span:not(.tag) */
.form li > span[class=""],
.form li > span:not([class])
{
	-webkit-align-items: flex-start;
	align-items: flex-start;
}

/* .form li:not(.vertical) span:not(.tag):not(.thumbnail):not(:only-of-type):not(:last-of-type) */
.form li:not(.vertical) span[class=""]:not(:only-of-type):not(:last-of-type),
.form li:not(.vertical) span:not([class]):not(:only-of-type):not(:last-of-type)
{
	margin-right: .5em;
}

/* .form li span:not(.tag) > input[type="checkbox"],
.form li span:not(.tag) > input[type="radio"] */
.form li span[class=""] > input[type="checkbox"],
.form li span:not([class]) > input[type="checkbox"],
.form li span[class=""] > input[type="radio"],
.form li span:not([class]) > input[type="radio"]
{
	flex: 0 0 auto;
}

.form textarea[disabled], 
.form select[disabled], 
.form input[type="date"][disabled], 
.form input[type="datetime"][disabled], 
.form input[type="datetime-local"][disabled], 
.form input[type="email"][disabled], 
.form input[type="month"][disabled], 
.form input[type="number"][disabled], 
.form input[type="password"][disabled], 
.form input[type="search"][disabled], 
.form input[type="tel"][disabled], 
.form input[type="text"][disabled], 
.form input[type="time"][disabled], 
.form input[type="url"][disabled], 
.form input[type="week"][disabled]
{
	color: rgba(0, 0, 0, .5);
}

.form li:not(.floatingcontent) input[type="date"], 
.form li:not(.floatingcontent) input[type="datetime"], 
.form li:not(.floatingcontent) input[type="datetime-local"], 
.form li:not(.floatingcontent) input[type="email"], 
.form li:not(.floatingcontent) input[type="month"], 
.form li:not(.floatingcontent) input[type="number"], 
.form li:not(.floatingcontent) input[type="password"], 
.form li:not(.floatingcontent) input[type="search"], 
.form li:not(.floatingcontent) input[type="tel"], 
.form li:not(.floatingcontent) input[type="text"], 
.form li:not(.floatingcontent) input[type="time"], 
.form li:not(.floatingcontent) input[type="url"], 
.form li:not(.floatingcontent) input[type="week"]
{
	box-sizing: border-box;
	width: 100%;
}

.form ul.orderlist li input[type="number"],
.form ul.orderlist li input[type="text"],
.form li.orderitem > input[type="number"],
.form li.orderitem > input[type="text"]
{
	margin-right: .6em;
	width: 10%;
}

.form:not(.grid) li.file input[type="checkbox"],
.form:not(.grid) li.file input[type="radio"]
{
	margin-right: 4.8em;
}

.form li.file input[type="checkbox"] + label > div.text,
.form li.file input[type="radio"] + label > div.text
{
	display: none;
}

.form li.file input[type="checkbox"]:checked + label > div.text,
.form li.file input[type="radio"]:checked + label > div.text
{
	display: block;
}

.form li:not(.floatingcontent) select,
.form li:not(.floatingcontent) textarea
{
	width: 100%;
}

.tinymcearea
{
	margin: 0 .5em;
	width: calc(100% - 1em);
}

.formfieldh 
{
	display: none !important;
}

/* Hervorhebungen */

.dropdown
{
	background-color: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(20px) saturate(120%);
	backdrop-filter: blur(20px) saturate(120%);
	border: 1px solid rgb(204, 204, 204);
	border-bottom-left-radius: .3rem;
	border-bottom-right-radius: .3rem;
	box-shadow: var(--boxshadow-medium);
	line-height: 1.2;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	z-index: 1000;
}

article.artikel.error .headarea,
article.artikel.error p,
div.error,
p.error,
.form li > label.error,
.errormsg 
{
	color: var(--error-color) !important;
}

div.error
{
	background-color: #fff1ed;
	border: .5px solid #b62704;
	border-radius: .5rem;
	margin-top: 1rem;
	padding: .4rem .5rem;
}

div.error > :first-child,
div.error > :first-child > :first-child
{
	margin-top: 0 !important;
}

div.error > .artikel:not(:first-child)
{
	border-top: .5px dotted #b62704;
	margin-top: .3rem;
	padding-top: .3rem;
}

.form li input.error,
.form li select.error,
.form li span.error,
.form li textarea.error
{
	outline: 1px solid #b62704;
	outline-offset: 1px;
}

/* Reiternavigation */

.tabnavi
{
	border-bottom: 1px solid #bbb;
	margin-bottom: 1em;
	margin-top: 2em;
	width: 100%;
}

.tabnavi ul
{
	display: flex;
	flex-flow: row wrap;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.tabnavi ul li
{
	border-bottom: 2px solid transparent;
	flex: 0 0 auto;
	padding-top: .5em !important;
	padding-bottom: .3em !important;
	display: block;
}

.form .tabnavi ul li
{
	margin-top: 0 !important;
	width: auto;
}

.tabnavi ul li:not(:last-child)
{
	margin-right: 2.2em;
}

.tabnavi ul li.active
{
	color: var(--navigation-active-color);
	border-color: var(--navigation-active-color);
}

.tabnavi ul li:hover:not(.active)
{
	border-color: var(--navigation-active-color);
}

.tabnavi ul li a
{
	color: inherit !important;
	text-decoration: none;
}

/* Bilder */

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

.bild .imagearea
{
	line-height: .8;
	max-width: 100%;
}

.artikel.imgaspr .bild .imagearea
{
	position: relative;
	overflow: hidden;
}

.artikel.imgaspr.aspr235-100 .bild .imagearea
{
	padding-top: 42.5%;
}

.artikel.imgaspr.aspr3-1 .bild .imagearea
{
	padding-top: 33%;
}

.artikel.imgaspr .bild .imagearea > img
{
	left: 0;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.artikel.imgaspr.imgasprupper .bild .imagearea > img
{
	-webkit-transform: translateY(-35%);
	transform: translateY(-35%);
}

.artikel.imgaspr.imgasprlower .bild .imagearea > img
{
	-webkit-transform: translateY(-65%);
	transform: translateY(-65%);
}

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

.produkt
{
	display: block;
}

.bild .imagelabel
{
	color: #666;
	font-size: .95em;
	margin-top: .5em;
}

.bild .imagelabel.redbox
{
	background-color: #dd232b;
	color: white;
	padding: .5em;
}

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

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

.bild .imagelabel.topright
{
	position: absolute;
	right: 0;
	top: 10%;
}

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

.bild .imagelabel.bottomright
{
	position: absolute;
	right: 0;
	bottom: 10%;
}

.reduceproductcoversize img.productcover
{
	max-width: 80%;
}

.imageshadow img,
.bild.shoplink img,
img.productcover,
.artikel.productcover img,
ul.liste > li.file .thumbnail img
{
	box-shadow: var(--boxshadow-medium);
}

.imagenoshadow .bild.shoplink img
{
	box-shadow: none !important;
}

.imagepolaroid img
{
	background-color: white;
	padding: .6em .6em 1.2em .6em;
	box-shadow: var(--boxshadow-small);
}

.floatleft
{
	float: left !important;
	margin: .1em 2.5em 1em 0 !important;
}

.floatright
{
	float: right !important;
	margin: .1em 0 1em 2.5em !important;
}

@media only screen and (min-width: 420px) 
{
	.floatleft.image,
	.floatright.image
	{
		max-width: 55% !important;
	}
}

/* Bild als Thumbnail */

.imgharmonizer,
.thumbnail
{
	position: relative;
}

.thumbnail
{
	margin: 0 auto 1em auto;
	max-width: 160px;
	width: 90%;
}

span.imgharmonizer,
span.thumbnail
{
	display: block;
}

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

.imgharmonizer::before
{
	padding-top: 100%;
}

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

.imgharmonizer > span,
.thumbnail > span
{
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

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

/* Bilder-Fächer */


div.imgrow
{
	position: relative;
}

div.imgrow > div.imgharmonizer
{
	max-height: 100%;
	top: 0;
	width: calc(100% / var(--last) * var(--sf));
}

div.imgrow:not(.rtl) > div.imgharmonizer
{
	z-index: var(--no);
}

div.imgrow.rtl > div.imgharmonizer
{
	z-index: calc(var(--last) - var(--no));
}

div.imgrow > .imgharmonizer:not(:first-of-type)
{
	position: absolute;
}

div.imgrow > .imgharmonizer:not(:first-of-type):not(:last-of-type)
{
	left: calc((100% - (100% / var(--last) * var(--sf))) / (var(--last) - 1) * var(--no) + (100% / var(--last) * var(--sf))/2);
	transform: translateX(-50%);
}

div.imgrow > .imgharmonizer:last-of-type
{
	right: 0;
}

div.imgrow .imgharmonizer img
{
	box-shadow: var(--boxshadow-medium);
}






.bilderfaecher,
.bilderfaecher > .contentarea
{
	max-height: 300px;
	max-width: 100%;
}

.bilderfaecher > .contentarea
{
	display: inline-block;
	position: relative;
}

.bilderfaecher .bild:not(:first-child)
{
	position: absolute;
	top: 0;
}

.bilderfaecher.floatleft,
.bilderfaecher.floatright
{
	max-width: 55%;
}

.bilderfaecher img
{
	width: 100% !important;
}

.bilderfaecher img.productcover
{
	max-width: 180px !important;
}

/* Switches */

.switch
{
	background-color: rgba(255, 255, 255, .9);
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 1.5em;
	display: inline-flex;
	overflow: hidden;
	padding: 0 !important;
}

.switch > a
{
	color: inherit !important;
	display: inline-block;
	min-height: .4rem;
	min-width: .4rem;
	padding: calc(.3em - 1px) .5em;
	text-decoration: none !important;
}

.switch > a:not(.active)
{
	color: rgba(255, 255, 255, .8);
}

.switch > a.active
{
	background-color: #9b9b9b;
	box-shadow: var(--boxshadow-small);
	color: white !important;
}

#globalheader .switch > a.active
{
	background-color: rgb(224, 0, 47);
}

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

body.dashboard #login > .dialogbox
{
	background-color: transparent;
	border: 1px solid #bbb;
	border-radius: .4rem;
	box-shadow: none;
	margin: 4rem auto !important;
}

/* Tags */

.taglabel
{
	border-top-left-radius: .2em;
	border-bottom-left-radius: .2em;
}

.tag
{
	border-radius: .2em;
}

.taglabel,
.tag
{
	border: 1px solid;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	font-weight: normal;
	letter-spacing: .05em;
	padding: 0 .2em;
	text-decoration: none;
	text-transform: uppercase;
}

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

.tag.invisible.frontend,
.taglabel
{
	background-color: transparent;
	border-color: #bbb;
	color: #bbb;
}

.tag.invisible:not(.frontend)
{
	display: none;
}

.tag:not(.frontend),
.tag.date
{
	border-color: #aaa;
}

.tag:not(.frontend):not(.date):not(.keyword)
{
	background-color: #aaa;
	color: white;
}

.tag.date
{
	background-color: transparent;
}

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

.tag:not(.frontend),
.tag.date,
.taglabel:not(.frontend)
{
	font-size: .75rem;
}

.tag.frontend
{
	background-color: #bbb;
	border-color: #bbb;
	color: white;
	font-size: .7rem;
}

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

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

.tag.clickable
{
	cursor: pointer;
}

.tag.clickable:hover
{
	background-color: #888;
}

.tag.clickable:active
{
	background-color: rgb(224, 0, 47);
	border-color: rgb(224, 0, 47);
}

/* Links */

.externallink::after, 
.internallink:not(.anchor):not(.topofpage)::after,
.internallink.anchor::before,
.internallink.topofpage::before
{
	font-family: var(--symbol-font);
	font-style: normal;
	font-weight: normal;
}

.externallink::after, 
.internallink:not(.anchor):not(.topofpage)::after
{
	content: "\A0\F0082";
	left: 0;
	position: relative;
	-webkit-transition: left .3s ease;
	transition: left .3s ease;
}

body:not(.touch) .externallink:not(.inactive):hover::after, 
body:not(.touch) .internallink:not(.inactive):not(.anchor):not(.topofpage):hover::after
{
	left: .2em;
}

.internallink.anchor::before
{
	color: #666;
	content: "\F00F2\A0";
}

.internallink.topofpage::before 
{
	color: #666;
	content: "\F00E2\A0";
}

/* Load Animation */

.loadanim 
{
	margin: 60px auto 30px auto;
	text-align: center;
	width: 90px;
}

.loadanim > div 
{
	-webkit-animation: loadanimdelay .6s infinite ease-in-out both;
	animation: loadanimdelay .6s infinite ease-in-out both;
	background-color: #ccc;
	border-radius: 100%;
	display: inline-block;
	height: 18px;
	width: 18px;
}

.loadanim .loaddot1 
{
	-webkit-animation-delay: -.36s;
	animation-delay: -.36s;
}

.loadanim .loaddot2 
{
	-webkit-animation-delay: -.24s;
	animation-delay: -.24s;
}

.loadanim .loaddot3 
{
	-webkit-animation-delay: -.12s;
	animation-delay: -.12s;
}

@-webkit-keyframes loadanimdelay 
{
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(.7) }
}

@keyframes loadanimdelay 
{
	0%, 80%, 100% { 
	-webkit-transform: scale(0);
	transform: scale(0);
	} 
	40% { 
	-webkit-transform: scale(.7);
	transform: scale(.7);
	}
}

/* weitere Textformatierung und -auszeichnungen */

span.title
{
	font-style: italic;
}

span.hero
{
	font-weight: bolder;
	font-style: inherit !important;
}

span.keyboardk
{
	border: 1px solid grey;
	border-radius: .3em;
	color: grey;
	display: inline-block;
	font-size: .75em;
	letter-spacing: .01em;
	line-height: 1.4em;
	margin: 0 .15em;
	padding: .1em .35em 0 .35em;
	position: relative;
	top: -.1em;
	white-space: nowrap;
}

.copyrightnote
{
	color: #9b9b9b;
	font-size: .7rem;
}

.bild .copyrightnote
{
	text-align: right;
}

.body.news:not(.liste) > .content > .artikel.large .imgarea .copyrightnote
{
	text-align: left;
}

.body[style*="background-image"] > div.copyrightnote
{
	bottom: .5rem;
	position: absolute;
	right: .5rem;
}

.clear
{
	clear: both;
}

.centered
{
	clear: both;
	display: block;
	margin: .8rem auto .6rem auto;
}

.leftblock
{
	margin-bottom: .6rem;
	margin-top: .8rem;
}

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

.displaynone
{
	display: none !important;
}

/* Sonderformate: Tabellen */

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

/* Clearfix */

.tabnavi > ul::after,
article.bottomline::after,
.body:not(.news):not(.liste) article.topteaser .contentarea::after, 
.clearatend::after,
.clearfix::after
{
	content: "";
	clear: both;
	display: table;
}

/* Responsive Design */

@media only screen and (min-width: 1440px) 
{
	body.dashboard #content > .body:first-of-type > .body:nth-child(odd)
	{
		border-right: 1px dotted #ccc;
		-webkit-flex: 1 0 calc(50% - 3rem - 1px);
		flex: 1 0 calc(50% - 3rem - 1px);
	}

	body.dashboard #content > .body:first-of-type > .body:nth-child(even)
	{
		-webkit-flex: 1 0 calc(50% - 3rem);
		flex: 1 0 calc(50% - 3rem);
	}
}

@media only screen and (min-width: 1024px) 
{
	.normalonly
	{
		display: none !important;
	}

	.widescreenonly
	{
		display: block !important;
	}

}

@media only screen and (max-width: 1023px) 
{
	.widescreenonly
	{
		display: none !important;
	}

	article img.image
	{
		height: auto !important;
		max-width: 100%;
	}

	article#mediaplayer
	{
		left: 10%;
		width: 80%;
	}
}

@media only screen and (min-width: 990px) 
{
	/* maximale Absatzbreiten reduzieren für sehr breite Seiten */

	.onecol:not(.fullwidth):not(.grid) > .content > h1,
	.onecol:not(.fullwidth):not(.grid) > .content > h2,
	.onecol:not(.fullwidth):not(.grid) > .content > h3,
	.onecol:not(.fullwidth):not(.grid) > .content > h4
	{
		padding-right: 10%;
	}

	.onecol:not(.fullwidth):not(.grid) > .content > .artikel:not(.jobentry):not(.listnavibox):not(.overlaycontent):not(.sticker):not(.tomargin):not(.floatleft1):not(.floatright1):not(.table) ol,
	.onecol:not(.fullwidth):not(.grid) > .content > .artikel:not(.jobentry):not(.listnavibox):not(.overlaycontent):not(.sticker):not(.tomargin):not(.floatleft1):not(.floatright1):not(.table) p,
	.onecol:not(.fullwidth):not(.grid) > .content > .artikel:not(.jobentry):not(.listnavibox):not(.overlaycontent):not(.sticker):not(.tomargin):not(.floatleft1):not(.floatright1):not(.table) ul:not(.liste),
	.introscreenmiddle2:not(.fullwidth):not(.grid) > .content > .artikel:not(.jobentry):not(.listnavibox):not(.overlaycontent):not(.sticker):not(.tomargin):not(.floatleft1):not(.floatright1):not(.table) ol,
	.introscreenmiddle2:not(.fullwidth):not(.grid) > .content > .artikel:not(.jobentry):not(.listnavibox):not(.overlaycontent):not(.sticker):not(.tomargin):not(.floatleft1):not(.floatright1):not(.table) p,
	.introscreenmiddle2:not(.fullwidth):not(.grid) > .content > .artikel:not(.jobentry):not(.listnavibox):not(.overlaycontent):not(.sticker):not(.tomargin):not(.floatleft1):not(.floatright1):not(.table) ul:not(.liste),
	.introscreenright2:not(.fullwidth):not(.grid) > .content > .artikel:not(.jobentry):not(.listnavibox):not(.overlaycontent):not(.sticker):not(.tomargin):not(.floatleft1):not(.floatright1):not(.table) ol,
	.introscreenright2:not(.fullwidth):not(.grid) > .content > .artikel:not(.jobentry):not(.listnavibox):not(.overlaycontent):not(.sticker):not(.tomargin):not(.floatleft1):not(.floatright1):not(.table) p,
	.introscreenright2:not(.fullwidth):not(.grid) > .content > .artikel:not(.jobentry):not(.listnavibox):not(.overlaycontent):not(.sticker):not(.tomargin):not(.floatleft1):not(.floatright1):not(.table) ul:not(.liste)
	{
		padding-right: 20%;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1023px) 
{
	.normalonly
	{
		display: block !important;
	}
}

@media only screen and (min-width: 768px)
{
	.singlecolumnmodeonly
	{
		display: none !important;
	}

	.mobileonly
	{
		display: none !important;
	}

	.weakmobileonly
	{
		display: none;
	}

	#globalheader + #searchboxcontainer:not(.fixed)
	{
		background: transparent;
		bottom: 0;
		position: absolute;
		right: 0;
		width: 280px;
	}

	#navi 
	{
		display: block !important;
	}

	#navi:not(.weakmobileonly) + #content
	{
		float: right;
		width: 73%;
	}

	body.emptynavicolumn #content
	{
		margin-left: 27%;
		width: 73%;
	}

	#servicenavi 
	{
		display: block !important;
	}

	#searchboxcontainer.fixed
	{
		background: transparent;
		max-width: 1024px !important;
		min-width: 320px;
		position: fixed;
		top: 8px;
		width: 96%;
		z-index: 90000;
	}

	#searchboxcontainer.fixed > form
	{
		-webkit-flex: 0 0 240px;
		flex: 0 0 240px;
		margin-left: auto;
		background-color: rgba(255, 255, 255, .9);
		border-radius: 1.2rem;
		box-shadow: 0 0 5px 2px rgba(255, 255, 255, .9);
	}

	#globalheader + #searchboxcontainer.fixed > form
	{
		-webkit-flex: 0 0 280px;
		flex: 0 0 280px;
	}

	.body.slider div.bx-controls
	{
		bottom: 1.5em;
		padding: .5em;
		position: absolute; 
		right: .5em; 
		z-index: 800;
	}

	.body.slider div.bx-controls div.bx-pager div.bx-pager-item a
	{
		box-shadow: /* 0 0 18px rgba(255, 255, 255, .75), 0 0 15px white,  */0 0 12px white , 0 0 6px white;
	}

	.form li:not(.top) > label:not(:only-child)
	{
		color: #666;
		display: inline-block;
		padding: .35em 0;
	}

	.form li.top > label:not(:only-child),
	.form li.vertical > label:not(:only-child)
	{
		padding: 0 0 .35em 0;
	}

	.form li:not(.orderitem):not(.top):not(.vertical) > label:not(:only-child)
	{
		margin-right: 4%;
		width: 20%;
	}

	.form li:not(.vertical):not(.top) > label + div,
	.form li:not(.top) > div.right,
	.form li:not(.top) > input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
	.form li:not(.top) > select,
	.form li:not(.top) > textarea
	{
		display: inline-block;
	}

	.form li:not(.vertical):not(.top) > label + div,
	.form li:not(.top) > div.right,
	.form li:not(.top) > label + input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
	.form li:not(.top) > label + select,
	.form li:not(.top) > label + textarea
	{
		width: 75%;
	}

	.form li > div.halfhalf,
	.form li > div.twothirdonethird
	{
		min-height: contain-floats;
	}

	.form li > div.halfhalf,
	.form li > div.twothirdonethird::after
	{
	  content: "";
	  clear: both;
	  display: table;
	}

	.form li > div.halfhalf > :first-child
	{
		float: left;
		width: 50%;
	}
	.form li > div.halfhalf > :last-child
	{
		float: right;
		width: 50%;
	}

	.form li > div.twothirdonethird > :first-child
	{
		float: left;
		width: 66%;
	}

	.form li > div.twothirdonethird > :last-child
	{
		float: right;
		width: 33%;
	}
}

@media only screen and (max-width: 767px) 
{
	.notinsinglecolumnmode
	{
		display: none !important;
	}

	.mobileonly
	{
		display: block !important;
	}

	.weakmobileonly
	{
		display: block;
	}

	.normalonly
	{
		display: none !important;
	}

	.notonmobile
	{
		display: none !important;
	}

	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
	select,
	textarea
	{
		font-size: 1.1em;
	}

	a.button,
	a.button:hover,
	button,
	button:hover,
	input[type="submit"],
	input[type="submit"]:hover
	{
		font-size: .8rem;
	}

	#contactformbt,
	#topofpagebt
	{
		right: 2vw;
	}

	#contactformbt
	{
		bottom: 6em;
	}

	#topofpagebt
	{
		bottom: 4em;
	}

	#pagecontent 
	{
		margin: 0;
		overflow-x: hidden;
		width: 100%;
	}

	#globalbody,
	#toplevelnavi,
	#content,
	#globalfooter
	{
		margin-left: 8px;
		margin-right: 8px;
	}

	#globalbody
	{
		flex: 0 0 calc(100% - 16px);
	}

	#content,
	#globalfooter
	{
		width: calc(100% - 16px);
	}

	#globalheader
	{
		background-color: var(--overlay-bg-color);
		-webkit-backdrop-filter: blur(25px) saturate(150%);
		backdrop-filter: blur(25px) saturate(150%);
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 150000;
	}

	#globalheader a#menubt:not(.nonavi)::before
	{
		content: "\F0001";
	}

	#globalheader img#menubt:not(.nonavi),
	#globalheader img#opensearchbt,
	#globalheader img#pageheaderdropdownbt
	{
		background-position: center;
		background-repeat: no-repeat;
		display: block;
		height: 30px;
		padding: 5px 8px;
		width: 30px
	}

	#globalheader img#menubt:not(.nonavi) 
	{
		background-image: url(/assets/images/menubt.svg);
		float: left;
		margin-right: -8px;
	}

	#globalheader img#hueberlogo
	{
		background-size: auto;
		height: 34px;
		margin-left: 8px;
		width: 120px;
	}

	#globalheader img#opensearchbt,
	#globalheader img#pageheaderdropdownbt
	{
		position: absolute;
		top: 0;
	}

	#globalheader a#menubt,
	#globalheader a#opensearchbt,
	#globalheader a#pageheaderdropdownbt 
	{
		-webkit-align-items: center;
		align-items: center;
		display: inline-flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		height: 30px;
		padding: 4px;
		width: 30px;
	}

	#globalheader a#opensearchbt,
	#globalheader a#pageheaderdropdownbt 
	{
		position: absolute;
		top: 0;
	}

	#globalheader a#opensearchbt
	{
		opacity: 1;
		right: 46px;
		-webkit-transition: opacity .4s ease;
		transition: opacity .4s ease;
	}

	#globalheader img#opensearchbt
	{
		background-image: url(/assets/images/searchbt.svg);
		opacity: 1;
		right: 46px;
		-webkit-transition: opacity .4s ease;
		transition: opacity .4s ease;
	}

	body.nosearch #globalheader img#opensearchbt,
	#globalheader a#opensearchbt.active,
	#globalheader img#opensearchbt.active
	{
		opacity: 0;
		pointer-events: none;
	}

	#globalheader img#pageheaderdropdownbt 
	{
		background-image: url(/assets/images/servicebt.svg);
		right: 0;
	}

	#globalheader img#pageheaderdropdownbt.active
	{
		background-color: rgba(240, 240, 240, .94);
	}

	#globalheader a#menubt.active:not(.nonavi)::before
	{
		content: "\F0012";
	}

	#globalheader img#pageheaderdropdownbt.active 
	{
		background-image: url(/assets/images/closeservicebt.svg);
	}

	#servicenavi,
	#navi 
	{
		background-color: var(--overlay-bg-color);
		-webkit-backdrop-filter: blur(20px) saturate(150%);
		backdrop-filter: blur(20px) saturate(150%);
		border-top: 1px solid #aaa;
		box-shadow: var(--boxshadow-medium);
	}

	#servicenavi 
	{
		display: none;
		margin-top: 0 !important;
		max-width: 414px;
		min-width: 15em;
		position: absolute;
		right: 0;
		top: 40px;
		width: 100%;
		z-index: 150500;
	}

	#servicenavi.active
	{
		display: block;
	}

	#servicenavi ul
	{
		color: #555;
		display: block;
		font-size: 1em;
		margin-bottom: 0;
		margin-top: 0;
	}

	#servicenavi li
	{
		border-bottom: 1px solid white;
		display: inherit;
		float: none !important;
		margin-bottom: 0;
		margin-left: 0;
		margin-top: 0;
		padding: 0;
	}

	#servicenavi li:last-child
	{
		border-bottom: none;
	}

	#servicenavi > ul > li ul
	{
		margin-left: 1em;
		margin-top: 1em !important;
	}

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

	#searchboxcontainer,
	#globalheader + #searchboxcontainer,
	#breadcrumb
	{
		margin-left: 8px;
		margin-right: 8px;
	}

	#breadcrumb
	{
		flex: 0 0 calc(100% - 16px);
		order: 4;
	}

	body:not(.search) #breadcrumb
	{
		background: transparent;
		min-height: inherit;
	}

	.breadcrumb.global
	{
		background-color: rgba(0, 0, 0, .05) !important;
		height: auto;
	}

	.breadcrumb:not(.global)
	{
		border: 0;
		height: auto;
	}

	.breadcrumb > ul:first-of-type
	{
		display: block;
		margin: 0.5em 0;
		padding: 0;
	}

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

	.breadcrumb.global > ul
	{
		font-size: .85em;
		margin: 0 !important;
		padding: .7rem .4rem .7rem .4rem;
	}

	#navi .breadcrumb.global > ul
	{
		border-bottom: 1px solid #bbb;
	}

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

	.breadcrumb ul > li
	{
		padding-left: 0;
		margin-right: 0;
	}

	.breadcrumb.global ul > li
	{
		display: inline-block;
		height: auto;
		padding-bottom: .3em;
		padding-top: .3em;
	}

	.breadcrumb > ul:first-of-type > li
	{
		display: inline-block;
		align-items: center;
		-webkit-flex: 0 2 auto;
		flex: 0 2 auto;
	}

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

	body:not(.search) .breadcrumb > ul li:not(:last-child)::after
	{
		content: "\a0›";
	}

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

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

	.breadcrumb a
	{
		color: inherit;
		text-decoration: none;
	}
	
	#searchboxcontainer,
	#globalheader + #searchboxcontainer
	{
		background-color: transparent;
		flex: 0 0 calc(100% - 16px);
		max-height: 0;
		order: 3;
		overflow: hidden;
		-webkit-transition: max-height .6s ease;
		transition: max-height .6s ease;
	}

	#searchboxcontainer.active,
	#globalheader + #searchboxcontainer.active
	{
		max-height: 60px;
		overflow: visible;
	}

	#searchboxcontainer > form
	{
		padding-bottom: .2em;
		padding-top: .2em;
	}

	#searchboxcontainer > form,
	#globalheader + #searchboxcontainer > form
	{
		width: 100%;
	}

	#searchboxcontainer > form input[type="search"]
	{
		-webkit-flex: 1 1 calc(100% - .4rem - 46px);
		flex: 1 1 calc(100% - .4rem - 46px);
		font-size: 1.1em;
	}

	#searchboxcontainer > form div.dropdown
	{
		max-width: 448px;
		width: 100%;
	}

	#searchboxcontainer > form button[name="submitbt"]
	{
		height: 46px;
		margin: 0;
		padding: 5px 8px;
		width: 46px;
	}

	#toplevelnavi
	{
		height: auto;
		margin-bottom: .5em;
		margin-top: .5em;
		padding-bottom: .5em;
		flex: 0 0 calc(100% - 16px);
	}

	body:not(.search) #toplevelnavi
	{
		min-height: auto;
	}

	#infoheader
	{
		background-position: left center !important;
		background-size: auto 100% !important;
		height: 70px !important;
		width: calc(100% - 16px);
	}

	#navibar
	{
		margin-top: .5em;
		position: static;
		right: auto;
		width: auto;
	}

	#navibar > ul
	{
		font-size: 1.4em;
	}

	#navi 
	{
		color: #555;
		display: none;
		left: 0;
		max-height: calc(100% - 40px);
		max-width: 414px;
		overflow-y: scroll;
		position: fixed;
		top: 40px;
		width: 100%;
		z-index: 150500;
	}

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

	#navi > ul,
	#navi > ul ul
	{
		font-size: 1em !important;
		margin-bottom: 0 !important;
		margin-top: 0 !important;
	}

	#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: '+';
		float: right;
		padding-right: .4rem;
	}

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

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

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

	#navi > ul li > *:not(ul):not(.switch):not(.cmsfrontend),
	#servicenavi 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),
	#servicenavi li > *:not(ul):not(.switch):not(.cmsfrontend):not(:first-child)
	{
		padding-top: 0;
	}

	#navi > ul li > .switch,
	#servicenavi 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
	{
		font-size: 1em;
	}

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

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

	.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 only screen and (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 only screen and (max-width: 567px) 
{
	body,
	#content 
	{
		font-size: 1rem;
	}

	#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:not(.grid):not(.news) img.productcover 
	{
		max-width: 210px;
	}

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

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

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

@media only screen and (min-width: 420px) 
{
	.mobileportraitonly
	{
		display: none !important;
	}
}

@media only screen and (max-width: 419px) 
{
	.notonmobileportrait
	{
		display: none !important;
	}

	#navibar ul
	{
		font-size: 1.0em;
	}

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

	.body.news:not(.liste) > .content > .artikel.large > .contentarea > .imgarea + .combinedarea
	{
		-webkit-flex: 0 1 100%;
		flex: 0 1 100%;
		margin-top: 1em;
	}

	.productpresentation img.productcover
	{
		max-width: 100%;
		width: auto;
	}

	.floatleft:not(.floatwidth),
	.floatright:not(.floatwidth)
	{
		display: block;
		float: none !important;
		margin: .6em auto !important;
	}

	.bild.floatleft:not(.floatwidth) img,
	.bild.floatright:not(.floatwidth) img
	{
		margin-left: auto;
		margin-right: auto;
	}

	.form li:not(.top) > select
	{
		width: 100%;
	}
}

@media only screen and (max-width: 374px) 
{
	#navibar ul li:not(.sixcmspage)
	{
		margin-right: 2em;
	}

	.productpresentation img.productcover
	{
		max-width: 50%;
		width: auto;
	}
}

/* Workarounds */

/* Bug: Safari 5.1 nutzt max-width nicht, wenn mit width und min-width kombiniert */

@media only screen and (min-width: 1500px) 
{
	body.wide #pagecontent,
	body.dashboard #pagecontent
	{
		width: 1440px;
	}
}

@media only screen and (min-width: 1064px) 
{
	body:not(.dashboard):not(.wide) #pagecontent
	{
		width: 1024px;
	}
}

/* Aktionen */

#kijupromo .contentarea
{
	background-color: var(--highlight-color);
	padding-top: 80px;
}

#kijupromo .contentarea .kategorie,
#kijupromo .contentarea h2,
#kijupromo .contentarea a
{
	color: white !important;
}

/* Legacy */

.widelwssplashscr {
	height: 550px; 
	position: relative; 
	width: 1024px;
}

.flexilwsheader,
.mobilelwsheader,
.widelwsheader,
.lwsheader
{
	background-color: white;
	position: relative;
	width: 100%,
}

.flexilwsheader,
.widelwsheader,
.lwsheader
{
	box-shadow: var(--boxshadow-medium);
}

.body.twocolsleft,
.body.twocolsright
{
	width: 43%;
}

.body.twocolsleft
{
	clear: both;
	float: left;
}

.body.twocolsright
{
	float: right;
}

.body.twocolsleft.uneven,
.body.uneven > .body.twocolsleft
{
	width: 63%;
}

.body.twocolsright.uneven,
.body.uneven > .body.twocolsright
{
	width: 30.1%;
}

body:not(.cols-lnl) #content > .body.introscreenleft
{
	width: 22%;
}

body:not(.cols-lnl) #content > .body.introscreenmiddle
{
	width:	46%;
}

.body.introscreenmiddle2,
.body.introscreenright2
{
	width:	73%;
}

body:not(.cols-lnl) #content > .body.introscreenright
{
	width: 22%;
}

body.nonavicolumn #content > .body.introscreenright2
{
	margin-left: 27%;
}

body:not(.nonavicolumn) #content > .body.introscreenleft,
body:not(.nonavicolumn) #content > .body.introscreenmiddle
{
	float: left;
}

body:not(.nonavicolumn) #content > .body.introscreenmiddle2,
body:not(.nonavicolumn) #content > .body.introscreenright2,
body:not(.nonavicolumn) #content > .body.introscreenright
{
	float: right;
}

table.layouttable 
{
	height: auto !important;
	border-collapse: collapse;
	line-height: 0;
	width: 100%;
}

table.layouttable tr th,
table.layouttable tr td
{
	height: auto !important;
	line-height: 0;
	padding: 0;
}

table.layouttable tr td img
{
	height: auto !important;
}

@media only screen and (max-width: 767px) 
{
	.flexilwsheader,
	.widelwsheader,
	.lwsheader
	{
		box-shadow: none;
	}

	.body,
	.body.twocolsleft,
	.body.twocolsleft.uneven,
	.body.uneven > .body.twocolsleft,
	.body.twocolsright,
	.body.twocolsright.uneven,
	.body.uneven > .body.twocolsright
	{
		width: 100%;
	}

	.body.introscreenleft,
	.body.introscreenmiddle,
	.body.introscreenmiddle2,
	.body.introscreenright2,
	.body.introscreenright
	{
		margin-left: auto !important;
		margin-right: auto !important;
		width: 100% !important;
	}

	.body.introscreenmiddle,
	.body.introscreenmiddle2
	{
		margin-top: 0 !important;
		order: 1;
	}

	.body.introscreenleft
	{
		margin-top: 2em !important;
		order: 2;
	}

	.body.introscreenright2,
	.body.introscreenright
	{
		order: 3;
	}

	.body.twocolsleft
	{
		margin-right: auto;
	}
}