/*

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

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: 100px;
		/* --pg-header-height: 120px; */
	}

	body.splash
	{
		--pg-header-height: 128px;
		/* --pg-header-height: 144px; */
	}
}

/* Seite */

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

body.splash #globalheader
{
	border-bottom: none;
}

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

@media (min-width: 768px)
{
	body.splash .grid .content
	{
		gap: var(--small-column-gap);
	}
}

/* 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.splash ul.liste
{
	margin-top: 0;
}

body.splash ul.liste li:first-of-type
{
	margin-top: var(--p-margin-top) !important;
	padding-top: 0;
}

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

body.splash ul.liste li:not(:first-of-type), 
body.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: #f1f3f8;
	/* --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: #f4f7f0;
	/* --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: #f1f5fa;
	/* --light-bg-color: #3096c115; */
}

/* 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: #f6f7e9;
	/* --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: #fbf5ed;
	/* --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: #f4edf3;
	/* --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.splash
	{
		background-position-y: -82px;
	}
}

/* Slider */

body.splash .body.slider .artikel
{
	margin-top: 0 !important;
}

body.splash .body.slider .artikel .contentarea
{
	position: relative;
}

body.splash .body.slider .artikel .headinvis
{
	text-indent: -99999px;
}

body.splash .body.slider .artikel .copyrightnote
{
	bottom: .5em;
	color: white;
	position: absolute;
	right: .5em;
	text-shadow: 0 0 12px black, 0 0 6px rgba(0, 0, 0, .5), 0 0 1px rgba(0, 0, 0, .25);
}

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

/* Slider Header */

/* body.splash .body.slider.cpnheadern header .headarea
{
	line-height: 1 !important;
} */

body.splash .body.slider.cpnheadern header .headarea span
{
	display: inline-block;
	line-height: 1.1 !important;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
	padding: .2rem .9rem .4rem .9rem !important;
}

body.splash .body.slider.cpnheadern header .headarea span + span
{
	margin-top: 0.1rem !important;
}

body.splash .body.slider.cpnheadern header:not(.headinvis) .headarea span
{
	-webkit-backdrop-filter: grayscale(5%) blur(2px);
	backdrop-filter: grayscale(5%) blur(2px);
	background-color: rgba(255, 255, 255, .05) !important;
	border-radius: var(--medium-border-radius);
}

@media (min-width: 568px) and (max-width: 767px)
{
	body.splash .body.slider.cpnheadern header .headarea span
	{
		padding: 0 .5rem .2rem .5rem !important;
	}

	body.splash .body.slider.cpnheadern header .headarea span + span
	{
		margin-top: .075rem !important;
	}
}

@media (max-width: 567px)
{
	body.splash .body.slider.cpnheadern header .headarea span
	{
		padding: 0 .3rem .1rem .3rem !important;
	}

	body.splash .body.slider.cpnheadern header .headarea span + span
	{
		margin-top: .05rem !important;
	}

}

/* Slider Bildplatzierung */

body.splash .body.slider .bx-slider > .artikel > a
{
	border-radius: var(--medium-border-radius);
	display: block;
	height: unset;
	padding-top: 32%;
	position: relative;
	overflow: hidden;
	width: unset;
}

@container (width < 768px) and (width > 567px)
{
	body.splash .body.slider .bx-slider > .artikel > a
	{
		padding-top: 45.1%;
	}
}

@container (width < 568px)
{
	body.splash .body.slider .bx-slider > .artikel > a
	{
		padding-top: 70%;
	}
}

body.splash .body.slider .bx-slider > .artikel .contentarea
{
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

/* 

.imgasprleft
.imgasprcenterleft
.imgasprcenter
.imgasprcenterright
.imgasprright

.imgasprupper
.imgasprlower

*/

body.splash .body.slider .bx-slider > .artikel.imgasprleft .contentarea
{
	background-position-x: 0;
}

body.splash .body.slider .bx-slider > .artikel.imgasprcenterleft .contentarea
{
	background-position-x: 25%;
}

body.splash .body.slider .bx-slider > .artikel.imgasprcenterright .contentarea
{
	background-position-x: 75%;
}

body.splash .body.slider .bx-slider > .artikel.imgasprright .contentarea
{
	background-position-x: 100%;
}

body.splash .body.slider .bx-slider > .artikel.imgasprupper .contentarea
{
	background-position-y: 0;
}

body.splash .body.slider .bx-slider > .artikel.imgasprlower .contentarea
{
	background-position-y: 100%;
}

body.splash .body.slider .artikel .image
{
	line-height: .1;
}

body.splash .body.slider .artikel.addimagenoindentation .addimage.image
{
	overflow: hidden;
}

body.splash .body.slider .artikel .image .imagearea img
{
	position: revert;
}

@media only screen and (max-width: 567px) 
{
	/*

	.mobilehideheader
	.mobilehideproductcov
	.mobilehideaddimg

	*/

	body.splash .body.slider .artikel.mobilehideheader header,
	body.splash .body.slider .artikel.mobilehideproductcov .image.productcover.overlayimage,
	body.splash .body.slider .artikel.mobilehideaddimg .image.addimage.overlayimage
	{
		display: none;
	}
}

/*

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

*/

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

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

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

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

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

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

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

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

	body.splash .body.slider .bx-slider .artikel:not(.overlaymobilecenter) .image.overlayimage
	{
		transform: translate(0,-75%);
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body.splash .body.slider .bx-slider .artikel .image > .imagearea > img
{
	max-height: 100%;
	top: auto;
	transform: none;
	width: auto;
}

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

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

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

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

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

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

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

	body.splash .body.slider .bx-slider .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%;
	}
}