/*

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

Hueber.de CSS 2015

Zusätzliche Stylesheets für Hueber.de LWS Allerbeste Freunde

Version: 	1.0
Datum: 		27.11.2024

Erfordert: 	-

Hinweise: 	-

Historie: 	1.0 (27.11.2024)  - erstes Release

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

*/

:root
{
	--navigation-active-color: #037db1;

	/* --button-bg-color: #7aad22;
	--button-color: #8a4075; */

	--uibutton-bg-color: #037db1;
	--uibutton-border-color: #0f98d3;
	--uibutton-color: #ffff;

	--highlight-headline-color: #cd204c;
}

#abfhead
{
	background-image: url(/shared/images/allerbeste-freunde/infoheaderbg_abf.jpg);
}

#abfcover
{
	right: 1%;
	top: 50%;
	transform: translateY(-50%);
	max-height: 90%;
	max-width: revert;
}

#abfbutton
{
	bottom: 40%;
	right: 20%;
	width: 20%;
	transform: translate(50%, 50%);
}

#abfhead header 
{
	bottom: 45%;
	right: 30%;
	--headline-color: #cd204c;
}

#abfhead h1
{
	font-size: 2.9em;
}

#abfhead h1 .title
{
	font-weight: bold;	
	font-style: normal;
}

#abfhead h1 .plus
{
	font-variant: all-caps;	
}

#abfhead h2
{
	font-size: 2.0em;
}

#infoheader .copyrightnote,
#toplevelnavi .copyrightnote
{
	display: block;
	text-align: right;
}

@media (max-width: 767px)
{
	body.introscreen #toplevelnavi
	{
		margin-bottom: calc(3rem + 3.5em);
	}

	#abfhead
	{
		background-position: 100% 90%;
	}

	#abfhead header
	{
		bottom: calc(-2.5rem - 3.5em);
		left: -.8em;
		transform: none;
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	#abfhead
	{
		background-position: 100% 90%;
		background-size: 120%;
		border-width: .8em;
	}

	#abfbutton
	{
		width: 25%;
	}
}

@media (min-width: 376px) and (max-width: 767px)
{
	#abfhead h1
	{
		font-size: 1.6em;
	}
}

@media (max-width: 567px)
{
	#abfhead
	{
		background-position: 80% 100%;
		background-size: 170%;
		border-width: .6em;
	}

	#abfbutton
	{
		width: 35%;
	}
}

@media (max-width: 375px)
{

	#abfhead header 
	{
		bottom: 25%;
		right: 28%;
	}

	#abfhead h1
	{
		font-size: 1em;
	}

	#abfhead h2
	{
		font-size: .6em;
	}

	#abfcover
	{
		right: 0.5%;
		top: 50%;
		transform: translateY(-38%);
		max-height: 65%;
		max-width: revert;
	}
}

@media screen and (min-width: 568px)
{
	#conceptvideo video
	{
		float: right;
		margin-bottom: 1em;
		margin-left: 2em;
		max-width: 55%;
	}
}