/*

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

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

@media (min-width: 768px)
{
	body.zg
	{
		--pg-header-height: 120px;
	}

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

/* Seite */

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

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

@media (min-width: 768px)
{
	body.zg.splash .grid .content
	{
		column-gap: var(--p-margin-top);
		row-gap: var(--p-margin-top);
	}
}

/* Kopfzeile */

@media (min-width: 768px)
{
	.zg:not(.splash) #globalheader
	{
		grid-template-columns: 170px auto;
	}

	.zg.splash #globalheader
	{
		grid-template-columns: 240px auto;
	}

	.zg #globalheader #homelink
	{
		grid-row: 1 / span 2;
	}

	.zg #globalheader img#hueberlogo
	{
		background-image: url(/assets/images/hueberdesplashsignettrans.svg);
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.zg:not(.splash) #globalheader img#hueberlogo
	{
		height: 78px;
		width: 169px;
	}

	.zg.splash #globalheader img#hueberlogo
	{
		height: 106px;
		width: 229px;
	}

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

	.zg #servicenavi
	{
		margin: 1rem 0;
	}
}

/* Headlines */

body.zg:not(.splash) #content .body header h1 .kategorie
{
	padding-bottom: .2em;
}

body.zg:not(.splash) #content .body header h1 .head 
{
	color: var(--main-headline-color);
	font-weight: bold;
}

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

body.zg.splash article.productpresentation > a + div.refarea
{
	margin-top: calc(var(--p-margin-top) / 2) !important;
}

body.zg.splash ul.liste li:not(:first-of-type), 
body.zg.splash article.productpresentation > a + div.refarea ul.liste li:first-of-type
{
	border-top: 1px solid white;
	margin-top: calc(var(--p-margin-top) / 2) !important;
	padding-top: calc(var(--p-margin-top) / 2) !important;
}

/* Standard-Farben */

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;
	--light-bg-color: #4e77af15;
}

/* 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;
	--light-bg-color: #81b45818;
}

/* Französisch */

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

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

/* Italienisch */

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

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

/* Spanisch */

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

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

/* Weitere Sprachen */

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

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

/* 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 (max-width: 767px) 
{
	body.zg.splash
	{
		background-position-y: -82px;
	}
}

/* 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 .contentarea
{
	position: relative;
}

.zg.splash .body.slider ul.bx-slider > li > .artikel .headinvis
{
	text-indent: -99999px;
}

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

/* Slider Bildplatzierung */

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

.zg.splash .body.slider ul.bx-slider > li > .artikel.addimagenoindentation .image
{
	overflow: hidden;
}

.zg.splash .body.slider ul.bx-slider > li > .artikel .image .imagearea img
{
	position: revert;
}

.zg.splash .body.slider ul.bx-slider > li > .artikel.imgaspr .image.sliderimage .imagearea img
{
	top: auto;
	-webkit-transform: none;
	transform: none;
}

@media only screen and (max-width: 567px) 
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel .image.sliderimage .imagearea img
	{
		max-width: 220%;
		position: relative;
		width: 220% !important;
	}

	/* 

	.imgaspr.imgasprleft
	.imgaspr.imgasprcenterleft
	.imgasprcenter
	.imgasprcenterright
	.imgasprright

	.imgaspr.imgasprupper (ungenutzt)
	.imgaspr.imgasprlower (ungenutzt)

	*/

	.zg.splash .body.slider ul.bx-slider > li > .artikel:not(.img) .image.sliderimage .imagearea img
	{
		left: -60%;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.imgaspr.imgasprcenterleft .image.sliderimage .imagearea img
	{
		left: -37.5%;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.imgaspr.imgasprleft .image.sliderimage .imagearea img
	{
		left: -5%;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.imgaspr.imgasprcenterright .image.sliderimage .imagearea img
	{
		left: -82.5%;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.imgaspr.imgasprright .image.sliderimage .imagearea img
	{
		left: -115%;
	}

	/*

	.mobilehideheader
	.mobilehideproductcov
	.mobilehideaddimg

	*/

	.zg.splash .body.slider ul.bx-slider > li > .artikel.mobilehideheader header,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.mobilehideproductcov .image.productcover.overlayimage,
	.zg.splash .body.slider ul.bx-slider > li > .artikel.mobilehideaddimg .image.addimage.overlayimage
	{
			display: none;
	}
}

@media only screen and (min-width: 568px) and (max-width: 768px)
{
	.zg.splash .body.slider ul.bx-slider > li > .artikel .image.sliderimage .imagearea img
	{
		max-width: 140%;
		position: relative;
		width: 140% !important;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel:not(.img) .image.sliderimage .imagearea img
	{
		left: -20%;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.imgaspr.imgasprcenterleft .image.sliderimage .imagearea img
	{
		left: -10%;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.imgaspr.imgasprleft .image.sliderimage .imagearea img
	{
		left: 0;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.imgaspr.imgasprcenterright .image.sliderimage .imagearea img
	{
		left: -30%;
	}

	.zg.splash .body.slider ul.bx-slider > li > .artikel.imgaspr.imgasprright .image.sliderimage .imagearea img
	{
		left: -40%;
	}
}

/*

.overlayimage 
.productimage
.addimage
.addimagenoindentation
.overlayleft
.overlaystosides
.productcoverleft
.overlaymobilecenter

*/

.zg.splash .body.slider ul.bx-slider li .image.overlayimage
{
	position: absolute;
	top: 50%;
	transform: translate(0,-50%);
}

.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.addimagenoindentation .image.addimage,
.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.addimagenoindentation .image.addimage > .imagearea
{
	height: 100%;
	text-align: left;
}

.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.addimagenoindentation .image.addimage
{
	width: 70%;
}

.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.addimagenoindentation .image.addimage > .imagearea
{
	width: 100%;
}

.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.addimagenoindentation:not(.productcoverleft) .image.addimage img
{
	left: 0;
}

.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.addimagenoindentation.productcoverleft .image.addimage img
{
	right: 0;
}

@media (max-width: 567px)
{
	.zg.splash .body.slider ul.bx-slider li .artikel.overlayleft .image.overlayimage
	{
		left: 10px;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.overlaymobilecenter .image.overlayimage
	{
		left: 50%;
		transform: translate(-50%,-50%);
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides:not(.productcoverleft) .image.addimage,
	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.productcoverleft .image.productcover
	{
		left: 10%;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.addimagenoindentation:not(.productcoverleft) .image.addimage
	{
		left: 0;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides:not(.productcoverleft) .image.productcover,
	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.productcoverleft .image.addimage
	{
		right: 10%;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.addimagenoindentation.productcoverleft .image.addimage
	{
		right: 0;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel:not(.overlayleft):not(.overlaymobilecenter):not(.overlaystosides) .image.overlayimage
	{
		right: 10px;
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	.zg.splash .body.slider ul.bx-slider li .artikel.overlayleft .image.overlayimage
	{
		left: 4%;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides:not(.productcoverleft) .image.addimage,
	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.productcoverleft .image.productcover
	{
		left: 4%;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.addimagenoindentation:not(.productcoverleft) .image.addimage
	{
		left: 0;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides:not(.productcoverleft) .image.productcover,
	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.productcoverleft .image.addimage
	{
		right: 4%;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.addimagenoindentation.productcoverleft .image.addimage
	{
		right: 0;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel:not(.overlayleft):not(.overlaystosides) .image.overlayimage
	{
		right: 4%;
	}
}

@media (min-width: 768px)
{
	.zg.splash .body.slider ul.bx-slider li .artikel.overlayleft .image.overlayimage
	{
		left: 3%;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides:not(.productcoverleft) .image.addimage,
	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.productcoverleft .image.productcover
	{
		left: 3%;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.addimagenoindentation:not(.productcoverleft) .image.addimage
	{
		left: 0;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides:not(.productcoverleft) .image.productcover,
	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.productcoverleft .image.addimage
	{
		right: 3%;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.overlaystosides.addimagenoindentation.productcoverleft .image.addimage
	{
		right: 0;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel:not(.overlayleft):not(.overlaystosides) .image.overlayimage
	{
		right: 3%;
	}
}

.zg.splash .body.slider ul.bx-slider li .artikel.overlayleft .image.productcover + .image.addimage
{
	transform: translate(50%,-50%);
}

.zg.splash .body.slider ul.bx-slider li .artikel:not(.overlayleft):not(.overlaystosides) .image.productcover + .image.addimage
{
	transform: translate(-50%,-50%);
}

.zg.splash .body.slider ul.bx-slider li .artikel .image.overlayimage > .imagearea
{
	overflow: inherit;
	text-align: center;
}

.zg.splash .body.slider ul.bx-slider li .artikel .image:not(.sliderimage) > .imagearea > img
{
	max-height: 100%;
	top: auto;
	transform: none;
	width: auto;
}

@media (max-width: 419px)
{
	.zg.splash .body.slider ul.bx-slider li .artikel .image.overlayimage > .imagearea
	{
		height: 150px;
		width: 150px;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.img3aspr4-3 .image.overlayimage > .imagearea
	{
		width: 225px;
	}
}

@media (min-width: 420px) and (max-width: 567px)
{
	.zg.splash .body.slider ul.bx-slider li .artikel .image.overlayimage > .imagearea
	{
		height: 180px;
		width: 180px;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.img3aspr4-3 .image.overlayimage > .imagearea
	{
		width: 270px;
	}
}

@media (min-width: 568px) and (max-width: 1023px)
{
	.zg.splash .body.slider ul.bx-slider li .artikel .image.overlayimage > .imagearea
	{
		height: 220px;
		width: 220px;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.img3aspr4-3 .image.overlayimage > .imagearea
	{
		width: 330px;
	}
}

@media (min-width: 1024px)
{
	.zg.splash .body.slider ul.bx-slider li .artikel .image.overlayimage > .imagearea
	{
		height: 260px;
		width: 260px;
	}

	.zg.splash .body.slider ul.bx-slider li .artikel.img3aspr4-3 .image.overlayimage > .imagearea
	{
		width: 390px;
	}
}

/* Spezielle Einstellungen für einzelne Slider */

/* Beste Freunde PLUS */

#bfrpslider .image.addimage
{
	left: 23%;
	top: 33%;
}

#bfrpslider .contentarea
{
	border: .8em solid #f07d00;
}

#bfrpslider .image.productcover .imagearea
{
	background-image: url(/shared/images/beste-freunde/bfrp_prodcover_3d.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

#bfrpslider .image.addimage .imagearea
{
	height: 180px;
	width: 180px;
}

@media (max-width: 567px)
{
	#bfrpslider .image.addimage
	{
		left: auto;
		right: 5%;
		top: 37%;
	}
}