/*

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

Hueber.de CSS 2015

Zusätzliche Stylesheets für Hueber.de LWS

Version:   1.5
Datum:     31.08.2018

Erfordert: -

Hinweise:  -

Historie:	

1.5 (31.08.2018)  - Erweiterung der Flexbox-Anzeige auf Bodys mit Listeneinträgen
				    (Grid-Ansicht)

1.01 (23.09.2016) - Anpassung für Hueber Forward Sans

1.0 (10.11.2015)  - erster Release

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

*/


/* Grundeinstellungen */

body.zg.splash
{
	--slider-head-ts-color:  rgba(0, 0, 0, .7);
	--slider-head-ts-color2: rgba(0, 0, 0, .4);
	--slider-head-ts-color3: rgba(0, 0, 0, .2);
}

@media only screen and (min-width: 768px)
{
	body.zg
	{
		--pg-header-height: 96px;
	}

	body.zg.splash
	{
		--pg-header-height: 120px;
	}
}

/* Seite */

body.zg.splash
{
	background-repeat: no-repeat;
	min-height: 100%;
	height: 100%;
	overflow: auto;
	width: 100%;
}

/* Kopfzeile */

@media only screen and (min-width: 768px)
{
	.zg.splash #globalheader img#hueberlogo
	{
		background-image: url(/shared/images/relaunch2015/hueberdesplashsignet.svg);
		background-repeat: no-repeat;
		background-size: 100%;
		height: 106px;
		width: 229px;
	}

	.zg.splash #globalheader ~ #searchboxcontainer
	{
		bottom: 0;
		height: 3.4em;
		padding-bottom: .2rem;
		padding-top: .2rem;
	}
}

/* Slider */

.zg.splash #content > .body.slider:first-of-type
{
	margin-top: .5rem;
}

.zg.splash .body.slider ul.bx-slider > li > .artikel
{
	margin-top: 0 !important;
}

.zg.splash .body.slider ul.bx-slider > li > .artikel h1,
.zg.splash .body.slider ul.bx-slider > li > .artikel h2,
.zg.splash .body.slider ul.bx-slider > li > .artikel h3,
.zg.splash .body.slider ul.bx-slider > li > .artikel h4
{
	font-family: var(--headline-font);
}

.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea
{
	position: relative;
}

.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea header
{
	box-sizing: border-box;
	padding: .2em .6em;
}

.zg.splash .body.slider ul.bx-slider > li > .artikel:not(.headertransparent) .contentarea header
{
	background-color: rgba(0, 0, 0, .27);
}

@media only screen and (min-width: 569px) 
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel.headertransparent .contentarea header
	{
		background-color: transparent !important;
	}
	
		.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea header
	{
		padding: .5em 1.3em 1em 1.6em;
		position: absolute;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout1 .contentarea header,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout2 .contentarea header
	{
		left: 0;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout3 .contentarea header
	{
		right: 0;
	}
}

@media only screen and (min-width: 569px) and (max-width: 767px)
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea header
	{
		max-width: 46%;
		padding: .6em .8em;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout2 .contentarea header,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout3 .contentarea header
	{
		bottom: auto;
		top: 8%;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout4 .contentarea header
	{
		bottom: 6%;
		width: 100%;
	}
}

@media only screen and (min-width: 768px) 
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea header
	{
		max-width: 33%;
		padding: .7em 1.3em 1em 1.6em;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout1 .contentarea header
	{
		bottom: 11%;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout2 .contentarea header,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout3 .contentarea header
	{
		bottom: auto;
		top: 11%;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout4 .contentarea header
	{
		bottom: 10%;
		left: 50%;
		max-width: none;
		padding-bottom: .6em;
		transform: translateX(-50%);
	}
}

.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea header .headarea
{
	display: inline-block;
	line-height: 1.4;
	margin: 0 !important;
}

.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea header .headarea .kategorie,
.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea header .headarea .head
{
	color: white !important;
	display: block;
	padding-bottom: 0;
	text-shadow: 0 0 1px rgba(0, 0, 0, .75);
}

.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea header .headarea .kategorie
{
	font-weight: inherit;
	line-height: 1.2;
}

.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea header .headarea .head
{
	font-family: var(--mhv-body-font);
	font-weight: normal;
}

.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea header .headarea .subhead
{
	display: none;
}

@media only screen and (max-width: 568px) 
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea header .headarea .kategorie
	{
		font-size: 1.2rem;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea header .headarea .head
	{
		font-size: 1rem;
	}
}

@media only screen and (min-width: 569px) 
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea header .headarea .kategorie
	{
		font-size: 1.55rem;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel .contentarea header .headarea .head
	{
		font-size: .9rem;
		padding-top: .5em;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout4 .contentarea header .kategorie,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout4 .contentarea header .head
	{
		display: inline !important;
		white-space: nowrap;
	}
}

.zg.splash .body.slider ul.bx-slider > li > .artikel .image .imagearea img
{
	position: relative !important;
	top: auto !important;
	-webkit-transform: none !important;
	transform: none !important;
}

@media only screen and (max-width: 568px) 
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel .bild .imagearea img
	{
		left: -30%;
		max-width: 160%;
		position: relative;
		width: 160% !important;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel .bild .imagearea
	{
		line-height: .1
	}
}

@media only screen and (min-width: 569px) and (max-width: 768px)
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel .bild .imagearea img
	{
		left: -10%;
		max-width: 120%;
		position: relative;
		width: 120% !important;
	}
}

.zg.splash .body.slider ul.bx-slider > li > .artikel .copyrightnote
{
	text-align: right;
}

/* Listen */

body.zg.splash ul.liste
{
	margin-top: 0;
}

body.zg.splash ul.liste li:first-of-type
{
	margin-top: 1em !important;
	padding-top: 0;
}

/* Standard-Farbe */

body.zg
{
	--navigation-active-color: var(--highlight-color);
	/* --navigation-active-color: #d0232c; */
}

/* DaF */

body.zg.de #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_daf.svg);
}

body.zg.de
{
	--navigation-active-color: #4e77af;
}

/* DaZ Schule */

body.zg.sch #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_sch.svg);
	background-position: left center;
}

/* Englisch */

body.zg.en #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_eng.svg);
}

body.zg.en
{
	--navigation-active-color: #81b458;
}

/* Französisch */

body.zg.fr #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_fra.svg);
}

body.zg.fr
{
	--navigation-active-color: #3096c1;
}

/* Italienisch */

body.zg.it #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_ita.svg);
}

body.zg.it
{
	--navigation-active-color: #b2ca30;
}

/* Spanisch */

body.zg.es #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_spa.svg);
}

body.zg.es
{
	--navigation-active-color: #e39d23;
}

/* Weitere Sprachen */

body.zg.otherlng #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_otherlng.svg);
}

body.zg.otherlng
{
	--navigation-active-color: #833074;
}

/* Handel */

.zg.han #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_han.svg);
}

/* Presse */

.zg.pre #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_pre.svg);
}

/* International */

.zg.int #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_int.svg);
}

/* Unternehmen (Über uns) */

.zg.utn #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_utn.svg);
}

.zg.easteuropeifs #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_easteur.svg);
}

/* Audioservice */

.zg.audioservice #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_audioservice.png);
}

/* Hilfe-Center */

.zg.hlp #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_hlp.svg);
}

/* Hueber.com.br */

.zg.hueberbr #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_br.svg);
	background-size: 100%;
}

/* Hueber.cz */

.zg.huebercz #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_cz.svg);
	background-size: 100%;
}

/* Hueber.es */

.zg.hueberes #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_es.svg);
	background-size: 100%;
}

/* Hueber.hu */

.zg.hueberhu #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_hu.svg);
	background-size: 100%;
}

/* Hueber.it */

.zg.hueberit #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_it.svg);
	background-size: 100%;
}

/* Hueber.sk */

.zg.huebersk #toplevelnavi #infoheader
{
	background-image: url(/shared/images/header/infoheader_sk.svg);
	background-size: 100%;
}

/* Responsive Design */

@media only screen and (min-width: 768px)
{
	.zg.splash #breadcrumb
	{
		display: none;
	}
}

@media only screen and (max-width: 767px) 
{
	body.zg.splash
	{
		background-position-y: -82px;
	}

	.zg #globalheader,
	.zg.splash #globalheader
	{
		background-color: rgba(255, 255, 255, .75);
		-webkit-backdrop-filter: blur(25px) saturate(150%);
		backdrop-filter: blur(25px) saturate(150%);
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10000;
	}

	.zg #globalheader img#hueberlogo,
	.zg.splash #globalheader img#hueberlogo
	{
		background-size: auto;
		height: 34px;
		margin-left: 8px;
		width: 120px;
	}

	.zg #globalheader img#hueberlogo,
	.zg.splash #globalheader img#hueberlogo
	{
/*		background-image: url(/shared/images/relaunch2015/hueberdesignet.png); */
		background-image: url(/shared/images/relaunch2015/hueberdesignet.svg);
		background-repeat: no-repeat;
	}

	.zg.splash #globalheader #searchboxcontainer
	{
		display: none;
	}

	.zg.splash #breadcrumb #searchbox
	{
		align-items: center;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex: 1 0 auto;
		padding-left: .8em;
		padding-right: .8em;
	}

	.zg.splash #breadcrumb #searchbox input.searchtext
	{
		flex: 1 0 auto;
		background-color: #fefefe;
		border: none;
		color: #666;
		font-size: 1.3em;
		margin-right: .5em;
	}

	.zg.splash #breadcrumb #searchbox input.submitbt
	{
		flex: 0 0 auto;
		float: none;
		margin: 1px 4px 0 4px;
		padding: 0;
	}

}

/* Sonderformate */

/* Webinare */

@media only screen and (min-width: 569px)
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_webinare .contentarea header
	{
		left: 1%;
		bottom: 5%;
		max-width: 90%;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_webinare .contentarea header > .headarea
	{
		line-height: 1 !important;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_webinare .contentarea header > .headarea,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_webinare .contentarea header > .headarea > .kategorie,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_webinare .contentarea header > .headarea > .head
	{
		font-weight: bold !important;
		text-shadow: 0 0 2px #fecb2f, 0 0 8px #fecb2f;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_webinare .contentarea header > .headarea > .kategorie
	{
		color: rgb(225, 17, 56);
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_webinare .contentarea header > .headarea > .head
	{
		color: black;
		font-family: var(--mhv-headline-font) !important;
		padding-top: 0;
	}
}

@media only screen and (min-width: 569px) and (max-width: 767px)
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_webinare .contentarea header > .headarea > .kategorie
	{
		font-size: 1.8rem !important;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_webinare .contentarea header > .headarea,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_webinare .contentarea header > .headarea > .head
	{
		font-size: 1.3rem !important;
	}
}

@media only screen and (min-width: 768px)
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_webinare .contentarea header > .headarea > .kategorie
	{
		font-size: 2.9rem !important;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_webinare .contentarea header > .headarea,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_webinare .contentarea header > .headarea > .head
	{
		font-size: 2.2rem !important;
	}
}

/* Blended Learning Kampagne */

@media only screen and (max-width: 568px)
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header
	{
		background-color: rgb(253, 184, 43) !important;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .bild .imagearea img
	{
		left: 0;
	}
}

@media only screen and (min-width: 569px)
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header
	{
		right: 5%;
		top: 25%;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header > .headarea
	{
		line-height: 1 !important;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header > .headarea,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header > .headarea > .kategorie,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header > .headarea > .head
	{
		font-weight: bold !important;
		text-shadow: none;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header > .headarea > .head
	{
		color: rgb(253, 184, 43);
		font-family: var(--mhv-headline-font) !important;
		padding-top: 0;
	}
}

@media only screen and (min-width: 569px) and (max-width: 767px)
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header
	{
		max-width: 70%;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header > .headarea,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header > .headarea > .kategorie,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header > .headarea > .head
	{
		font-size: 1.8rem !important;
	}
}

@media only screen and (min-width: 768px)
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header
	{
		max-width: 75%;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header > .headarea,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header > .headarea > .kategorie,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.layout_aktionblended .contentarea header > .headarea > .head
	{
		font-size: 2.5rem !important;
	}
}