@import url('_layout.css');
@import url('calculator.css');

html, body	{	width: 100.0%; height: 100.0%; }
html		{	overflow-y: scroll; }

*	{	list-style: none; margin: 0; padding: 0; border: 0; border-style: solid; z-index: 2; border: 0; border-style: solid; }
img	{	display: block; }
*, *:before, *:after	{	transition: all 150ms ease-in-out 0ms; }

table	{	border-collapse: collapse; border-spacing: 0; }
hr		{	width: 100.0%; margin: 0.50em auto; border-top-width: 1px; }

.row 		{	position: relative; width: calc(100.0% + 4.00rem); margin: -2.00rem; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
.row + .row	{	margin-top: 4.00rem; padding-top: 2.00rem; }
.row > div 	{	position: relative; flex: 1 1 400px; margin: 2.00rem; order: 2; }

.faq .row > div:nth-child(2) 	{	flex: 0 0 320px; }	@media screen and (max-width : 800px)	{	.faq .row > div:nth-child(2) 	{ flex: 1 1 100.0%; }}

/* --- nested Lists ---*/

ul > ul  {	padding: 0.5rem 25px	}

/* --- Content (fuer Modul + No User) --- */

#content				{	position: relative; width: 100.0%; height: auto; padding-top: calc(5.00rem + 40px); background: white; }
.nouser #content > div	{	width: 100.0%; max-width: 1200px; margin: 0 auto; }

/* --- Referenz --- */

#reference 				{	position: relative; top: -40px; width: 100.0%; max-height: 0; margin: 0 auto -40px; overflow: hidden; }
#reference > div 		{	position: relative; width: calc(100.0% - 2px); min-height: 200px; max-width: calc(1200px - 2px); margin: 0 auto 3.00rem; padding: 0; border-width: 1px; background: #282B3A;}

#reference > div > .txt 					{	margin: 2.00rem 2.00rem 1.00rem 2.00rem; }
#reference > div > .txt > span				{	display: block; }
#reference > div > .txt > span:nth-child(2)	{	font-size: 1.50em; }
#reference > div > .txt > span + span		{	margin-top: 1.00rem; }

#reference > div > .run 			{	margin: 0 1.50rem 1.00rem; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; }
#reference > div > .run > * 		{	font-size: 0.80rem; flex: 1 1 150px; max-width: 270px; min-height: 2.00rem; margin: 0.50rem; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; }
#reference > div > .run > span 		{	padding: 0.50rem 0.50rem 0.50rem 3.00rem; background-repeat: no-repeat; background-position: left 0.50rem center; background-size: 2.00rem auto;}
#reference .run > span:nth-child(1) {	background-image: url('../img/nr-1.svg'); }
#reference .run > span:nth-child(2) {	background-image: url('../img/nr-2.svg'); }
#reference .run > span:nth-child(3) {	background-image: url('../img/nr-3.svg'); }

#reference > div > .run > a	{	padding: 0.50rem 2.00rem 0.50rem 1.00rem; background-image: url('../img/picts/arrow_forward_white.svg'); background-color: rgba(249,178,000,1.00); color: rgba(255,255,255,1.00); background-repeat: no-repeat; background-position: right 0.50rem center; background-size: 2.00rem auto;}

#reference a.close			{	opacity: 0.90; position: absolute; top: 1.00rem; right: 1.00rem; width: 1.25rem; height: 1.25rem; border-radius: 100.0%; z-index: 2; background: url('../img/picts/close_white.svg') no-repeat center; background-size: 1.00rem; }

.reference-on #reference	{	max-height: 1000px; }

/* --- Header + Footer --- */

header, footer	{	width: 100.0%; height: 5.00rem; }

header	{	position: fixed; z-index: 4; border-bottom-width: 1px; }
footer	{	position: relative; border-top-width: 1px; }

header > div, footer > div			{	position: relative; width: 90.00%; max-width: 1200px; height: 100.0%; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
header > div > *, footer > div > *	{	flex: 1 1 10.00%; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; }

header > div > *:nth-child(2), footer > div > *:nth-child(2)	{	justify-content: center;   }
header > div > *:nth-child(3), footer > div > *:nth-child(3)	{	justify-content: flex-end; }

header > div > span:nth-child(2) > span		{	display: block; margin-top: 0.25rem; }

header img			{	height: 4.00rem; width: auto; }
header a.hh			{	width: 2.25rem; height: 2.25rem; transform: rotate(180deg); background-image: url('../img/picts/menu.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; }

footer img 			{	height: 2.25rem; width: auto; }
footer a + a		{	margin-left: 1.00rem; }

footer > div > span:last-child	{	display: flex; flex-flow: row wrap; justify-content: flex-end; align-content: center; align-items: center; }

footer .partner			{	min-width: 240px; margin: 0.25rem 0; background-image: url('../img/picts/arrow_forward_white.svg'); background-repeat: no-repeat; background-position: center right 0.25rem; background-size: auto 1.50rem; }
footer .partner > span	{	padding: 0.50rem 2.25rem 0.50rem 0.50rem; display: block; }

@media screen and (max-width : 800px)	{	header img + img 					{ display: none; }}
@media screen and (max-width : 440px)	{	header div > a + span + span > img 	{ display: none; }}

/* --- Nav --- */

nav 		{	position: fixed; z-index: 5; top: 0; right: 0; width: 0; height: 100.0vh; transition: all 600ms ease-in-out 0ms; overflow: hidden; }
nav > a		{	position: absolute; top: 0; right: 0; width: 100.0%; height: 100.0%; }
nav > div 	{	position: absolute; z-index: 2; top: 0; right: 0; width: 320px; height: calc(100.0% - 3.50rem); padding: 1.75rem 0; overflow: hidden; }

nav > div > a				{	position: relative; display: block; width: calc(100.0% - 4.00rem); padding: 1.00rem 2.00rem; }
nav > div > a.icon			{	padding-left: 4.25rem; background-repeat: no-repeat; background-position: center left 2.00rem; background-size: 1.50rem auto; }
nav > div > a + a:before	{	position: absolute; top: 0; right: 0; width: 100.0%; height: 1px; background-color: white; opacity: 0.125; content: ''; }

nav > div > a.icon[href^="resources/pdf/"]			{	background-image: url('../img/picts/download_white.svg'); }
nav > div > a.icon[href^="FAQ.html"]				{	background-image: url('../img/picts/help_white.svg'); }
nav > div > a.icon[href^="#validation"]				{	background-image: url('../img/picts/euro_white.svg'); }
nav > div > a.icon[href^="FAQ.html#contactform"]	{	background-image: url('../img/picts/email_white.svg'); }

body, nav > div 	{	transition: all 600ms ease-in-out 0ms; }

body				{	position: relative; right: 0; }
body.nav-on a.hh 	{	background-image: url('../img/picts/menu_open.svg'); }
body.nav-on 		{	position: fixed; right: 320px; }
body.nav-on nav		{	width: 100.0%; }

/* --- Sticky --- */

.sticky header							{	height: 2.50rem; }
.sticky header img						{	height: 1.75rem; }
.sticky header a[href^="#top"] > img	{	height: 1.50rem; }

.sticky header > div > span:nth-child(2) > span 	{	display: none; }

/* --- Permanentlink--- */

.permanentlink			{	position: fixed; z-index: 4; top: 30.00rem; right: 2.00rem; padding: 1.00rem 1.50rem; }
.sticky .permanentlink	{	top: 3.00rem; }

@media screen and (max-width : 1023px)	{	.permanentlink					{	top: 42.00%; right: 0; transform: rotate(-90deg) scale(0.85); transform-origin: 100.0% 100.0%; }}
@media screen and (max-width : 900px)	{	footer > div > *:nth-child(1),
header > div > *:nth-child(2) 	{	display: none; }
	footer > div > *:nth-child(2),
	footer > div > *:nth-child(3)	{	flex: 1 1 50.00%; justify-content: flex-start; }}

/* --- Article --- */

article 				{	position: relative; width: 100.0%; padding: 5.00rem 0; overflow: hidden; }
article > div 			{	position: relative; width: 100.0%; }
article > div + div		{	margin-top: 5.00rem; }
article > div > div 	{	position: relative; width: 90.00%; max-width: 75.00rem; height: 100.0%; margin: 0 auto; }

header + article 	{	padding-top: 160px; }

article > div:nth-child(2n) > div > .row > *:nth-child(2) 	{	order: 1; }

@media screen and (max-width : 900px)	{	article > div:nth-child(2n) > div > .row > *:nth-child(2) 	{	order: 2; }}

/* --- Teaser --- */

.teaser .row				{	width: 100.0%; margin: 0; }
.teaser .row + .row			{	justify-content: center; align-content: center; align-items: center; }
.teaser .row > div 			{	flex: 1 1 10.00rem; margin-left: 0; margin-right: 0; }
.teaser .row > div span		{	position: relative; display: block; }

@media screen and (max-width : 1023px)	{	.teaser .row > div 	{	flex: 1 1 20.00rem; margin-left: 0; margin-right: 0; }}
@media screen and (max-width : 700px)	{	.teaser .row > div 	{	flex: 1 1 15.00rem; margin-left: 0; margin-right: 0; }}

.teaser .row > div > span:nth-child(1) 			{	width: 72.00%; max-width: 12.00rem; margin: 0 auto; border-radius: 100.0%; background-color: white; }
.teaser .row > div > span:nth-child(1) > img	{	width: 100.0%; height: auto; }

.teaser .row > div > span:nth-child(2) 			{	margin-top: 1.50em; }
.teaser .row > div > span:nth-child(2) > span 	{	margin-bottom: 0.50em; }

/* --- Hotline --- */

.hotline	 	{	margin-top: 1.50em; padding: 1.00em 1.50em 1.00rem 5.00rem; border-radius: 2.00rem; background-image: url('../img/picts/phone_white.svg'); background-repeat: no-repeat; background-position: top 0.125rem left 1.50rem; background-size: auto 3.00rem; }
.hotline span	{	margin: 0 0.25em; }

/* --- Vimeo --- */

#vimeo					{	overflow: hidden;  }
#vimeo:before			{	position: absolute; top: -6.00rem; left: calc(50.00% - 5.00rem); padding: 1.50rem; width: 7.00rem; height: 7.00rem; border-radius: 100.0%; content: 'Video'; box-shadow: 1.00rem 1.00rem 3.00rem rgb(000,000,000,0.25); transform: scale(1,0); display: flex; flex-flow: row wrap; justify-content: center; align-content: flex-end; align-items: flex-end; }
#vimeo:hover:before		{	transform: scale(1,1); }

#vimeo .row					{	margin-top: 0; }
#vimeo .vimeo  				{	background-image: url('../img/picts/smart_display_white.svg'); display: block; padding: 1.00rem 0 1.00rem 5.00rem; border-width: 2px 0; cursor: pointer; background-repeat: no-repeat; background-position: top 0.50rem left; background-size: 4.00rem auto; }
#vimeo .vimeo> span			{	display: block; margin-top: 0.50rem; }
#vimeo .vimeo> span > span	{	display: inline-block; margin-top: 0.25rem; float: right; }

.vimeo			{	border-color: rgba(255,255,255,0.125); }
.vimeo:hover	{	border-color: rgba(255,255,255,0.750); }

.toggle-vimeo-1-on + div,
.toggle-vimeo-2-on + div	{	height: auto; max-height: 0; overflow: hidden; }


.vimeo-1-on .toggle-vimeo-1-on + div,
.vimeo-2-on	.toggle-vimeo-2-on + div	{	max-height: 30.00rem; margin-top: -2px; }

/* --- Calculator --- */

#calc  			{ 	padding: 3.00rem 0; }
#calc:before	{ 	position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; content: ''; opacity: 0.50; }

#calc .row > div	{ 	display: flex; flex-flow: column wrap; justify-content: center; align-content: flex-start; align-items: flex-start; }

/* --- Slider --- */

.slider						{	position: relative; width: 100.0%; overflow: hidden; }
.slider > div				{	width: calc(100.0% * 6); height: 100.0%; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-start; align-items: flex-start; }
.slider > div > div			{	width: calc(100.0% / 6); height: 100.0%; }
.slider > div > div > a			{	width: 100.0%; }
.slider > div > div > a	> img	{	width: calc(100.0% - 2px); height: auto; border-width: 1px; }
.slider > div > div > a	+ span	{	display: block; width: 100.0%; margin-top: 1.00rem; }

.slider > span					{	display: block; margin-top: 2.00rem; width: 100.0%; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
.slider > span > label			{	position: relative; display: inline-block; width: 2.00rem; height: 2.00rem; margin: 0 0.25rem; border-radius: 100.0%; overflow: hidden; }
.slider > span > label:before,
.slider > span > label:after				{	position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
.slider > span > label:before				{	opacity: 0.50; content: ''; }
.slider > span > label:nth-child(1):after	{	content: '1'}
.slider > span > label:nth-child(2):after	{	content: '2'}
.slider > span > label:nth-child(3):after	{	content: '3'}
.slider > span > label:nth-child(4):after	{	content: '4'}
.slider > span > label:nth-child(5):after	{	content: '5'}
.slider > span > label:nth-child(6):after	{	content: '6'}

input#slide-01-01:checked ~ div	{	margin-left:   0.00%; }
input#slide-01-02:checked ~ div	{	margin-left: -100.0%; }
input#slide-01-03:checked ~ div	{	margin-left: -200.0%; }
input#slide-01-04:checked ~ div	{	margin-left: -300.0%; }
input#slide-01-05:checked ~ div	{	margin-left: -400.0%; }
input#slide-01-06:checked ~ div	{	margin-left: -500.0%; }

input#slide-01-01:checked ~ span > label:nth-child(1):before,
input#slide-01-02:checked ~ span > label:nth-child(2):before,
input#slide-01-03:checked ~ span > label:nth-child(3):before,
input#slide-01-04:checked ~ span > label:nth-child(4):before,
input#slide-01-05:checked ~ span > label:nth-child(5):before,
input#slide-01-06:checked ~ span > label:nth-child(6):before	{	opacity: 0.90; }

/* --- Include --- */

.include  				{	position: relative; display: inline-block; margin-top: 2.00rem; padding-top: 2.50rem; border-top-width: 2px; border-top-style: dotted; }
.include:before  		{	content: 'Enthalten in:'; position: absolute; top: 0.75rem; left: 0; }
.include.zzgl:before  	{	content: 'Enthalten in (zzgl. Hardware-Kosten):'; }
.include i		  		{	display: inline-block; margin-top: 0.50rem; }
.include > span			{	background-image: url('../img/picts/cancel_outline.svg'); display: inline-block; line-height: 1.20em; margin-right: 1.00rem; padding-left: 1.50rem; background-repeat: no-repeat; background-position: center left; background-size: contain; }
.include > span.ok		{	background-image: url('../img/picts/check_circle.svg'); }

.include > span:nth-child(1):before 	{	content:'Basis'; }
.include > span:nth-child(2):before 	{	content:'Standard'; }
.include > span:nth-child(3):before 	{	content:'Premium'; }
.include > span:nth-child(4):before 	{	content:'Erweiterungen'; }

/* --- Potential --- */

.potential  				{	position: absolute; z-index: 3; top: -2.00rem; right: 0; border-bottom-width: 2px; border-bottom-style: dotted; }
.potential > span   		{	display: inline-block; }
.potential > .value   		{	margin-left: 1.00rem; }

/* --- Dates --- */

.faqs					{	border-width: 1px; overflow: hidden; }
.faqs > label			{	position: relative; width: calc(100.0% - 5.00em); min-height: 2.00em; padding: 0.50em 1.00em 0.50em 4.00em; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; }
.faqs > label:before	{	position: absolute; top: 0; left: 0; width: 3.00em; height: 100.0%; content: ''; border-radius: 0; box-shadow: none; background-image: url('../img/picts/add_white.svg'); background-repeat: no-repeat; background-position: center; background-size: 1.25em;}

.faqs > label + div 		{	height: auto; max-height: 0; overflow: hidden; transition: max-height 1200ms ease-in-out 0ms; }
.faqs label + div > div 	{	padding: 1.00em; }

.faqs > input:checked + label:before	{	background-image: url('../img/picts/minimize.svg'); box-shadow: none; }
.faqs > input:checked + label + div		{	max-height: 100.0em; border-top-width: 2px; border-style: dotted; }

.faqs > label + * + * + label		{	border-top-width: 1px; }

.faqs table						{	width: auto; margin: 1.00rem 0; border-top-width: 1px; }
.faqs table	tr > *				{	padding: 0.25rem 2.00rem 0.25rem 0; border-bottom-width: 1px; }
.faqs table	tr > td:first-child	{	white-space: nowrap; vertical-align: top; }
.faqs table	tr > td:last-child	{	white-space: nowrap; vertical-align: bottom; padding-right: 0; }

div.pay					{	display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; }
div.pay img				{	height: 2.50rem; display: inline-block; margin-right: 1.00rem; }
div.pay img:first-child	{	height: 1.25rem; }

/* --- Kontaktformular --- */

#contactform				{	padding: 1.50rem 1.00rem 1.00rem; border-width: 1px; background: url('../img/picts/insert_comment_blue.svg') no-repeat top 1.00rem right 1.00rem; background-size: auto 3.50rem; }
#contactform form			{	position: relative; display: block; width: 100.0%; }
#contactform form > div		{	margin-top: 2.00rem; }

input[type=checkbox]#DSGVO-ok + label					{	position: relative; display: block; min-height: 2.00em; margin: 1.00em 0 2.00em; padding-left: 3.00em; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; }
input[type=checkbox]#DSGVO-ok + label:before			{	content:''; position: absolute; top: 0; left: 0; display: block; width: 2.00em; height: 2.00em; opacity: 0.75; background-color: white; }
input[type=checkbox]#DSGVO-ok:checked + label:before	{	background: url('../img/picts/check_blue.svg') no-repeat center white; background-size: 100.0%; opacity: 1.00; }

#conractform form button	{	width: 100.0%;  }

/* --- Webinar --- */

.webinar				{	margin-top: 2.00rem; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; border-width: 1px; }
.webinar > div			{	flex: 1 1 10.00%; padding: 1.25rem; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
.webinar > div img		{	width: 90.0%; height: auto; margin: 1.50em auto 0; }

#webinar > div							{	flex: 1 1 100.0%; }
#webinar > div img						{	margin: 0; }
#webinar > div:first-child 				{	align-content: flex-start; align-items: flex-start; }
#webinar > div:first-child > div		{	flex: 0 0 120px; margin-right: 1.00em; }
#webinar > div:first-child > div + div	{	flex: 1 1 10.00%; }

/* --- Quick --- */
#quick						{	position: fixed; z-index: 3; top: calc(50.00% - 120px); left: 0; width: 60px; height: 240px; }
#quick > a					{	position: relative; display: block; width: 60px; height: 60px; background-repeat: no-repeat; background-position: center; background-size: 62.00%; }
#quick > a > span			{	position: absolute; top: 0; left: 100.0%; width: 0; height: 60px; padding: 0; overflow: hidden; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; }
#quick > a:hover			{	background-color: white; }
#quick > a:hover > span		{	background-color: white; width: auto; padding: 0 20px; }

#quick > a:nth-child(1)		{	background-image: url('../img/picts/help_white.svg'); }		#quick > a:nth-child(1):hover		{	background-image: url('../img/picts/help_blue.svg'); }
#quick > a:nth-child(2)		{	background-image: url('../img/picts/euro_white.svg'); }		#quick > a:nth-child(2):hover		{	background-image: url('../img/picts/euro_blue.svg'); }
#quick > a:nth-child(3)		{	background-image: url('../img/picts/email_white.svg'); }	#quick > a:nth-child(3):hover		{	background-image: url('../img/picts/email_blue.svg'); }
#quick > a:nth-child(4)		{	background-image: url('../img/picts/phone_white.svg'); }	#quick > a:nth-child(4):hover		{	background-image: url('../img/picts/phone_blue.svg'); }

@media screen and (max-width : 1023px)  {   #quick              {   top: calc(100.0% - 42px); width: 100.0%; height: 42px; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
	#quick > a          {   display: inline-block; width: 42px; height: 42px; }
	#quick > a > span   {   display: none; }
	.toplink            {   bottom: 0.125rem !important; }}

/* --- Overlays --- */

.overlay			{	position: fixed; z-index: 9; top: 0; left: 0; width: 100.0%; height: 100.0%; transform: scale(0.00); display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
.overlay > a		{	position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; background-color: black; opacity: 0.50; }
.overlay > div		{	position: relative; width: calc(320px - 4.00rem); padding: 2.00rem; border-radius: 0.50rem; }

.overlay > div > .form-label-group					{	width: calc(100.0% - 2.50rem); }
.overlay > div .btn									{	margin: 2.00rem auto 0; }
.overlay > div > #dealerNumberValidationErrorMsg	{	color: red; }

.overlay:target		{	transform: scale(1.00); }

/* --- Thanks --- */

#thanks					{	position: relative; width: 100.0%; height: calc(100.0vh - 5.00em); display: flex; flex-flow: row wrap; justify-content: center; align-content: center; background: url('../img/banner-1.jpg') no-repeat center; background-size: cover; }

#thanks > div			{	position: relative; max-width: calc(94.00vw - 4.00em); padding: 2.00em; overflow: hidden; }
#thanks > div:before	{	position: absolute; top: 0; left: 0; height: 100.0%; width: 100.0%; content: ''; opacity: 0.90; }

#thanks > div * 		{	position: relative; z-index: 2; }
#thanks > div .btn 		{	margin-top: 1.50em; }

/* --- Elemente --- */

.toplink		{	position: fixed; z-index: 3; display: none; bottom: 1.00rem; right: 1.00rem; padding: 1.25rem; transform: rotate(180deg); opacity: 0.25; background-image: url('../img/picts/arrow_drop_down_circle.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; }
.toplink:hover	{	opacity: 0.60; }

li > a 		{	display: inline-block; margin-left: 0.25rem; padding-left: 1.50rem; background-image: url('../img/picts/arrow_forward.svg'); background-repeat: no-repeat; background-position: left center; background-size: 1.25rem auto; }

figure		{	width: 100.0%; }
figure img	{	width: 100.0%; height: auto; }

/* --- Fullscreen --- */

.fullscreen			{	transform: scale(0.00); position: fixed; z-index: 999; top: 0; left: 0; width: 100.0%; height: 100.0%; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
.fullscreen:target	{	transform: scale(1.00); }
.fullscreen:before	{	position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; background-color: black; opacity: 0.50; content: ''; }
.fullscreen > img	{	position: relative; width: 90.00%; max-width: 1400px; height: auto; }

.fullscreen > a.close		{	position: absolute; top: 0; right: 0; width: 3.00rem; height: 3.00rem; z-index: 2; background: url('../img/picts/close_white.svg'); background-repeat: no-repeat; background-position: center; background-size: 2.00rem; }
.fullscreen > .button		{	position: absolute; top: calc(50.00% - 1.50rem); width: 3.00rem; height: 3.00rem; border-radius: 100.0%; z-index: 2; background-color: white; background-repeat: no-repeat; background-position: center; background-size: 2.00rem auto; }
.fullscreen > .button.prev	{	left:  1.00rem; background-image: url('../img/picts/keyboard_arrow_left.svg'); }
.fullscreen > .button.next	{	right: 1.00rem; background-image: url('../img/picts/keyboard_arrow_right.svg'); }

.fullscreen, .fullscreen:target	{	transition-property: none; }


.btn				{	position: relative; display: inline-block; padding: 1.00em 2.00em; }
.btn.small			{	padding: 0.50em 1.00em; }
.btn span			{	color: white }
.btn:after			{	position: absolute; z-index: -1; top: 0; left: 0; width: 100.0%; height: 100.0%; background-color: black; opacity: 0.00; content: ''; }
.btn:hover:after	{	opacity: 0.25; }

.link 		{	display: inline-block; padding: 0.20em 0 0.10em 2.00em; background-repeat: no-repeat; background-position: center left; background-size: contain; }
.link.close	{	background-image: url('../img/picts/close.svg'); }
.link.ex 	{	background-image: url('../img/picts/launch.svg'); }
.link.print {	background-image: url('../img/picts/print.svg'); }

/* --- Legal --- */

.legal #imprint	{	padding-top: 10.00rem; }
.legal p > span	{	display: inline-block; width: 6.00em;  max-width: calc(100.0% - 1.00em); margin-right: 1.00em; }

/* --- Cookies--- */

#cookies 	{	position: fixed; top: 0; left: 0; z-index: 999; width: 100.0%; height: 100.0%; overflow: hidden; background: rgba(000,000,000,0.80);
	display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center;
	-webkit-backdrop-filter:	blur(8px);
	-moz-backdrop-filter:		blur(8px);
	-o-backdrop-filter:			blur(8px);
	-ms-backdrop-filter:		blur(8px);
	backdrop-filter:			blur(8px); }

#cookies:before		{	content: ''; position: absolute; top: 0; left: 0;  width: 100.0%; height: 100.0%; opacity: 0.42; }

#cookies > span 	{	position: relative; width: 80.00%; max-width: 280px; height: auto; padding: 1.80em; border-radius: 0.24em; background: white;
	display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }


#cookies .btn 	{	flex: 1 1 100.0%; margin-top: 1.50em;  }

#cookies 		{	animation-name: 			cookies-on;
	animation-duration: 		4s;
	animation-fill-mode: 		forwards;
	animation-timing-function: 	linear; }

@keyframes cookies-on {
	from 	{	opacity: 0.00; }
	66% 	{	opacity: 0.00; }
	to 		{	opacity: 1.00; } }

#cookies:target 		{	height:  0; transition: height  480ms ease-in-out 240ms; }
#cookies:target:before 	{	opacity: 0; transition: opacity 240ms ease-in-out 0ms; }

/*	=================================
		END
	================================= */

video {
	width: 100%;
}