/*

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

Hueber.de Antares Prototyp CSS 2015

Stylesheets für Hueber.de Antares Prototyp

Version:   0.1
Datum:     17.01.2019

Erfordert: -

Hinweise:  -

Historie:	

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

*/

sup
{
	line-height: 0;
}

[draggable] 
{
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	-khtml-user-drag: element;
	-webkit-user-drag: element;
}

#servicenavi .hedubutton,
#servicenavi .uibutton
{
	padding: .2em .5em;
	border-radius: .4em;
}

#servicenavi .uibutton a:hover
{
	color: inherit;
}

/* Startseite */

#titlebgarea
{
	background-position: center 0 !important;
	/* min-height: calc(100vh - var(--pg-header-height)) !important; */
	padding-top: 0 !important;
}

#titlebgarea > .content
{
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-flow: row wrap;
	height: 100%;
	justify-content: center;
	padding-bottom: 2rem;
	width: calc(100% - 2rem);
}

@media only screen and (max-width: 567px)
{
	#titlebgarea > .content
	{
		align-content: space-between;
	}
}

@media only screen and (min-width: 568px)
{
	#titlebgarea > .content
	{
		align-content: flex-start;
	}
}

.artikel.simplenavi
{
	text-align: right !important;
}

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

#titlebgarea .artikel.simplenavi
{
	flex: 0 0 100%;
	font-size: 1em !important;
	margin-bottom: 2rem !important;
}

.artikel.simplenavi > .contentarea
{
	align-items: end;
	display: flex;
	justify-content: end;
	padding-bottom: .5rem;
	padding-top: .5rem;
}

#titlebgarea .artikel.simplenavi > .contentarea
{
	border-bottom: var(--thinline);
}

#titlebgarea .artikel.simplenavi > .contentarea > .image
{
	display: none;
}

.artikel.simplenavi > .contentarea > .image
{
	max-width: 50%;
}

@media only screen and (max-width: 567px)
{
	.artikel.simplenavi > .contentarea > .image
	{
		flex: 0 0 70px;
	}
}

@media only screen and (min-width: 568px)
{
	.artikel.simplenavi > .contentarea > .image
	{
		flex: 0 0 100px;
	}
}

/* .artikel.simplenavi > .contentarea > .navicontainer
{
	flex: 1 2 auto;
} */

.artikel.simplenavi > .contentarea > .textarea
{
	flex: 2 1 auto;
}

.artikel.simplenavi ul
{
	align-items: end;
	display: flex;
	flex: 1 0 auto;
	flex-flow: row nowrap;
	justify-content: end;
	list-style: none;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
	padding: .2em !important;
}

.artikel.simplenavi ul li:not(:last-child)
{
	margin-right: 1.5em;
}

.artikel.simplenavi ul li a
{
	color: inherit;
}

#titlebgarea .artikel.simplenavi ul
{
	--a-link-color: white;
	text-shadow: 0 0 1px white, 0 0 3px black, 0 0 7px black, 0 0 14px rgb(11, 11, 11);
	/* text-shadow: 0 0 1px white, 0 0 3px white, 0 0 7px white, 0 0 14px rgb(244, 250, 253); */
}

#introarticle
{
	-webkit-backdrop-filter: blur(25px) saturate(150%);
	backdrop-filter: blur(25px) saturate(150%);
	background-color: rgba(255, 255, 255, .75);
	border-radius: .8rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	margin-top: 0;
}

@media only screen and (max-width: 567px)
{
	#introarticle
	{
		padding: 1.5rem 1rem 1.5rem 1rem;
	}	
}

@media only screen and (min-width: 568px)
{
	#introarticle
	{
		padding: 1.5rem 1.5rem 2rem 1.5rem;
	}

	body.pb #introarticle
	{
		max-width: 960px;
		padding: 2rem 2rem 2.4rem 2rem;
		width: 85vw;
	}

	body:not(.pb) #introarticle
	{
		margin-bottom: 3vw;
		margin-right: 50%;
		padding: 2rem 2rem 2.4rem 2rem;
	}
}

#introarticle .image
{
	margin: 0 auto !important;
}

#introarticle h1
{
	margin-top: .5rem;
}

#introarticle div.sixtemplate
{
	background-color: white;
	border: .5px solid grey;
	border-radius: .3em;
	display: inline-block;
}

#introarticle div.sixtemplate *
{
	box-sizing: border-box;
}

#introarticle div.sixtemplate > p.prefix
{
	margin-top: 0;
	padding: .7em .8em .6em .8em;
}

#introarticle div.sixtemplate > p.prefix + p
{
	margin-top: 0;
}

#introarticle div.sixtemplate .code.uibutton
{
	width: 100%;
}

#introarticle h1
{
	color: #333;
	font-weight: 300;
}

#catalogbt
{
	margin-bottom: 4rem;
	margin-top: 1rem;
}

@media only screen and (max-width: 567px)
{
	#introarticle .image
	{
		max-width: 80px;
	}
	#introarticle h1
	{
		font-size: 2.4rem;
		margin-bottom: .6rem !important;
	}
	
	#introarticle div.sixtemplate,
	#catalogbt
	{
		margin-top: 1rem;
	}
}

@media only screen and (min-width: 568px)
{
	#introarticle .image
	{
		max-width: 100px;
	}

	#introarticle h1
	{
		font-size: 2.4rem;
		margin-bottom: 1.4rem !important;
	}
	
	#introarticle div.sixtemplate,
	#catalogbt
	{
		margin-top: 2rem;
	}

	#catalogbt
	{
		align-content:center;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-evenly;
	}
}

@media only screen and (min-width: 768px)
{
	body.pb #introarticle div.sixtemplate > p:only-child
	{
		display: flex;
		justify-content: space-around;
	}
}

#titlearea h1
{
	color: #333;
	font-size: 2.4rem;
	font-weight: 300;
}

#stickybuttonarea
{
	/* position: sticky !important; */
	top: 10vh;
	z-index: 100;
}

.buttonarea
{
	background-color: rgba(255, 255, 255, .75);
	border-bottom: .5px solid rgba(0, 0, 0, .2);
	border-top: .5px solid rgba(0, 0, 0, .2);
	min-height: 15vh;
}

.buttonarea > .content
{
	align-items: center;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	height: 100%;
}

.buttonarea > .content > *
{
	margin-bottom: 1rem;
	margin-top: 1rem;
	text-align: center;
}

.buttonarea > .content a.uibutton.large
{
	box-shadow: 0 0 6px 3px rgba(255, 255, 255, .9), 0 0 12px rgba(255, 255, 255, .9);
}

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

	.buttonarea
	{
		margin-top: 0 !important;
	}

	.buttonarea > .content
	{
		grid-template-columns: 1fr;
	}	
}

@media only screen and (max-width: 567px)
{
	#introhiarea,
	#introivarea
	{
		padding: 0 .5rem;
	}
}

#introarea h2,
#introhiarea h2,
#introivarea h2
{
	font-size: 1.8rem;
	font-weight: 300;
	margin-bottom: 1rem !important;
}

#introhiarea h2, 
#introivarea h2
{
	margin-top: 2rem !important;
}

#introarea .productpresentation .bilderfaecher
{
	margin: 3rem auto;
	max-width: 800px;
	width: 100%;
}

@media only screen and (max-width: 896px)
{
	#introarea .productpresentation .bilderfaecher > .contentarea
	{
		width: calc(100% - 2rem) !important;
	}
}

#introhiarea,
#introivarea
{
	background-color: rgb(209, 218, 228);
	/* background-color: #afb8c2; */
}

#introhiarea
{
	border-top: 2px solid white;
	/* background-color: #afb8c2; */
}

#howtoarea
{
	padding-top: 3rem !important;
}

body.op .body.grid .artikel,
body.op .body.flexbox .artikel
{
	box-sizing: border-box;
	margin-bottom: .8rem !important;
	margin-top: .8rem !important;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
}

#introhiarea .artikel .headarea,
#introivarea .artikel .headarea
{
	/* color: #e5e8eb; */
	font-size: 2.8rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
}

#introhiarea .artikel .headarea > .head,
#introivarea .artikel .headarea > .head
{
	color: white;
}

#contactarea h2
{
	color: #7f8183;
	font-size: 2.8rem;
}

#footnotes
{
	color: #aaa;
	font-size: .75em;
	margin-top: 3rem !important;
}

a.fnref
{
	font-weight: bold;
}

@media only screen and (min-width: 768px) and (max-width: 895px)
{
	#titlebgarea 
	{
		background-position: 60% 0 !important;
	}
}

@media only screen and (max-width: 767px)
{
	#titlebgarea 
	{
		background-position: 65% 0 !important;
	}

	#titlebgarea h1
	{
		font-size: 1.8rem;
	}

	body.pb #introarticle div.sixtemplate > p:only-child > span
	{
		display: block;
	}

	body.pb #introarticle div.sixtemplate > p:only-child > span:nth-child(2)
	{
		display: block;
		margin-top: 1rem;
	}
}

@media only screen and (max-width: 567px)
{
	#titlebgarea 
	{
		background-position: 70% !important;
	}

	#scrollindicator
	{
		display: none;
	}

	body.op .body.grid .artikel,
	body.op .body.flexbox .artikel
	{
		padding-left: 0;
		padding-right: 0;
	}
}

/* Buttons */

@media only screen and (min-width: 768px)
{
	.hedubutton.login
	{
		background-color: rgb(29, 131, 12) !important;
		border-color: rgb(29, 131, 12)!important;
	}

	.hedubutton.login,
	.hedubutton.login:hover,
	#servicenavi .hedubutton.login:hover a
	{
		color: white !important;
	}
}

.uibutton.login,
.uibutton.register,
.uibutton.code
{
	color: white !important;
}

.uibutton.login,
.uibutton.login:hover
{
	background-color: rgb(29, 131, 12) !important;
	border-color: rgb(29, 131, 12)!important;
}

.uibutton.register,
.uibutton.register:hover
{
	background-color: #38618f !important;
	border-color: #38618f !important;
}

.uibutton.code,
.uibutton.code:hover
{
	background-color: rgb(94, 126, 161) !important;
	border: 1px solid rgb(94, 126, 161) !important;
}