@import url('print.css');
/*FONT*/
@font-face {
    font-family: 'robotoregular';
    src: url('font/Roboto-Regular.woff') format('woff');
}
@font-face {
    font-family: 'robotobold';
    src: url('font/Roboto-Bold.woff') format('woff');
}
/* DEFAULTS */
:root {
	--text-color:#EBF2FF;
	--table-h1-border:#fff;
	--table-hr:#667184;
	--background:#001232;
	--green:#32dc32;
	--red:#ff3232;
	--yellow:#ffcc00;
	--cyan:#00A3FF;
}
/*PAGE_STYLES*/
html {
	-webkit-text-size-adjust: 100%;
}
body {
	font-family: 'robotoregular', sans-serif;
	font-size:0.5rem;
	padding: 0;
	margin: 0;
	background-color:var(--background);
}
p,td,th{
	font-family: 'robotoregular', sans-serif;
	font-size:0.5rem;
	color:var(--text-color);
}
h1{
	font-family: 'robotobold', sans-serif;
	font-weight: normal;
	margin: 0 0 0.25rem 0;
}
h2{
	font-family: 'robotobold', sans-serif;
	font-weight: normal;
	color:var(--text-color);
	line-height: 1.2rem;
	font-size:1.5rem;
	width:100%;
}
h3{
	font-family: 'robotobold', sans-serif;
	font-weight: normal;
	margin:0;
	color:var(--text-color);
}
h4{
	font-family: 'robotoregular', sans-serif;
	font-weight: normal;
	font-size: 1rem;
	color:var(--text-color);
}
h6{
	font-family: 'robotobold', sans-serif;
	font-weight: normal;
	color:var(--text-color);
	line-height: 1.2rem;
	font-size:1rem;
	text-align: center;
	padding:0.5rem;
	width:100%;
}
.pmargin{
	margin: 1rem 0;
}
@keyframes shake {
	0% { transform: rotate(0deg); }
	8% { transform: rotate(-5deg); }
	16% { transform: rotate(5deg); }
	24% { transform: rotate(-5deg); }
	32% { transform: rotate(5deg); }
	40% { transform: rotate(-5deg); }
	48% { transform: rotate(5deg); }
	56% { transform: rotate(-4deg); }
	64% { transform: rotate(4deg); }
	72% { transform: rotate(-3deg); }
	80% { transform: rotate(3deg); }
	88% { transform: rotate(-2deg); }
	96% { transform: rotate(2deg); }
	100% { transform: rotate(0deg); }
}
.main-cta{
	box-sizing: border-box;
	display:inline-flex;
	padding: .85rem .75rem 1rem .75rem;
	background-color: var(--cyan);
	color:var(--background);
	text-decoration: none;
	margin: 1rem 0;
}
.main-cta:hover{
	animation: shake .35s ease-in-out 1;
	color:var(--background);
	background-color: white;
}
#factsheet{
	background-color:var(--cyan);
	font-size: 1rem;
	padding:0.8rem;
	color:var(--background);
	position:fixed;
	margin-top:25vh;
	right:-5.75rem;
	z-index:999;
	text-decoration: none;
	vertical-align: middle;
	display:flex;
	flex-direction:row;
	align-items: center;
	vertical-align:middle;
	gap:.6rem;
	transition: all 0.2s ;
}
#factsheet:hover{
	text-decoration: none;
	color:#001232;
	right:0rem;
	cursor: pointer;
}
.hinweis{
	font-family: 'robotobold', sans-serif;
}
.hinweis:before{
	padding-right:.2rem;
	content: url('img/light-bulb.svg');
	position:relative;
	top:0.1rem;
	height:1rem;
	width:1rem;
}
header{
	width:100%;
	background-color:var(--background);
	padding:2rem;
	display:flex;
	box-sizing: border-box;
	align-items: center;
}
.logo{
	flex:1 0 0;
}
.logo img{
	width:200px;
	height:auto;
}
.language{
	flex-shrink:0;
	display: flex;
	background-color:#667184;
	gap:.1rem;
	padding: .1rem;
}
.language a {
	padding:0.4rem 0.65rem 0.5rem 0.65rem;
	text-decoration: none;
}
.language a:hover{
	color:var(--background);
	background-color: #667184;
}
#active{
	background-color: white;
	color:var(--background);
}
.inactive{
	background-color:var(--background);
	color:var(--text-color);
}
a{
	color:var(--text-color);
	text-decoration: underline;
	text-underline-offset: 0.125rem;
}
a:hover{
	color:var(--cyan);
	text-decoration: none;
}
.wrapper {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	margin-top: 0;
	padding:0 2rem 2rem 2rem;
}
.introduction{
	max-width: 750px;
	color:var(--text-color);
	margin-bottom: 2rem;
}
.max-text-width{
	max-width:750px;
}
sup{
	margin:0 0.2rem;
}
@keyframes rotateBackAndForth {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
    100% { transform: rotate(0deg); }
}
.overlay-wrap{
	display:none;
}
/* TABLE */
table {
	box-sizing: border-box;
	border-spacing:0;
	vertical-align: top;
	text-align: left;
	table-layout: fixed;
}
hr{
	box-shadow: none;
	border: none;
	height:0.1rem;
	background-color:var(--table-hr);
	margin:0.5rem 0;
}
th {
	padding-right:2rem;
	vertical-align: top;
	color:var(--text-color);
	background-color: var(--background);
	box-sizing: border-box;
	word-wrap: break-word;
}
th span{
	font-family: 'robotoregular', sans-serif;
}
td{
	
	vertical-align: top;
	color:var(--text-color);
	background-color: var(--background);
	box-sizing: border-box;
	word-wrap: break-word;
}
.table-h1{
	font-size:1.5rem;
	padding-top: 3rem;
	padding-bottom:0.25rem;
	left:0;
	/* position: sticky; */
}
.table-h1-line{
	height:0.2rem;
	background-color: #fff;
}
.brands{
	position: sticky;
	z-index: 500;
}
.brands th{
	padding:.5rem .85rem;
	position: sticky;
	top:0;
	background-color: var(--background);
	left:-0.75rem;
}
.brands th img{
	float:left;
	left:-0.5rem;
}
th {
	font-family: 'robotobold',sans-serif;
	font-weight: normal;
	color: #FFF;
	min-height: 3rem;
	position: sticky;
}
th:first-child {
	left: 0;
	z-index: 2;
}
/*LIST*/
ul{
	/* display:inline-block; */
	vertical-align: top;
	margin:0;
	padding:0;
	/* text-indent: 0.125rem; */
}
li{
	margin:0 1rem;
	padding:0;
}
/* COLORS */
.green {
	padding:0 1.75rem 0 0.75rem;
	border-left:0.15rem solid var(--green);	
	position: relative;
	left:1.6rem;
}
.green:before{
	content:url('img/green.svg');
	position:absolute;
	left:-1.3rem;
}
.yellow {
	padding:0 1.75rem 0 0.75rem;
	border-left:0.15rem solid var(--yellow);	
	position: relative;
	left:1.6rem;
}
.yellow:before{
	content:url('img/yellow.svg');
	position:absolute;
	left:-1.3rem;
}
.red {
	padding:0 1.75rem 0 0.75rem;
	border-left:0.15rem solid var(--red);	
	position: relative;
	left:1.6rem;
}
.red:before{
	content:url('img/red.svg');
	position:absolute;
	left:-1.3rem;
}
.brightblue {
	padding:0 1.75rem 0 0.75rem;
	border-left:0.1rem solid var(--table-hr);	
	position:relative;
	left:1.6rem;
	box-sizing: border-box;
}
.about{
	margin-top: 3rem;
}
/*TESTIMONIALS*/
.testi-wrap{
     display: grid;
     grid-template-columns: auto;
     gap:4rem;
 }
 .testi-card{
     display: flex;
     flex-direction: column;
     gap:1rem;
 }
 .testi-logo{
     background: white;
     width: 10rem;
 }
 .testi-intro{
	margin: 6rem 0 4rem 0;
 }
 @media screen and (min-width:600px) and (max-width:1399px){
     .testi-wrap{
  grid-template-columns: auto auto;
  gap:4rem;
     }
 }
 @media screen and (min-width:1400px){
     .testi-wrap{
  grid-template-columns: auto auto auto;
  gap:4rem;
     }
     .testi-card{
  flex-direction: row;
     }
 }
/*FOOTER*/
footer{
	padding:7rem 0 2rem 0;
	width:100%;
	display: flex;
	flex-direction: column;
	color:var(--text-color);
	gap:3rem;
}
.footer-nav{
	padding-left:0;
	width:75%;
	padding-top:1.0rem;
	display: flex;
	flex-direction: column;
	gap:2rem;
}
.footer-nav .column{
	display: flex;
	flex-direction: column;
	gap:0.35rem;
}
.adress{
	min-width:170px;
}
.column-item{
	width:100%;
}
.footer-logo{
	min-width: 250px;
}
.footer-logo a{
	display:flex;
}
.footer-logo img{
	width:250px;
}
.footer-nav a {
	color:var(--text-color);
	text-decoration: none;
}
.footer-nav a:hover {
	color:var(--cyan);
	text-decoration: underline;
	text-underline-offset: 0.25rem;
}
/* MOBILE */
@media screen and (min-width:560px) and (max-width: 899px) {
	table {
		width:100%;
	}
	.brandname{
		padding-top: 0.25rem;
	}
	.footer-nav{
		flex-direction: row;
		gap:3rem;
	}
	body, p,td,th{
		font-size:0.75rem;
	}
	th{
		box-sizing: border-box;
	}
	th:first-child {
		width:20%;
		box-sizing: border-box;
	}
	td{
		box-sizing: border-box;
	}
	#factsheet{
		background-color:var(--cyan);
		font-size: 0.75rem;
		padding:0.5rem;
		margin-top:18vh;
		right:0;
		gap:.3rem;
	}
	.download-icon{
		height:1rem;
		width:1rem;
	}
}
@media screen and (min-width: 900px) {
	a{	
		text-underline-offset: 0.25rem;
	}
	table {
		width:100%;
	}
	footer{
		padding:7rem 0 2rem 0;
		flex-direction: row;
	}
	.footer-nav{
		flex-direction: row;
		gap:3rem;
		justify-content: flex-end;
	}
	body {
		font-size: 1rem;
	}
	p,td,th{
		font-size: 1rem;
	}
	th:first-child {
		max-width: 200px;
	}
}

@media screen and (orientation:portrait) and (max-width:559px) {
	.overlay-wrap{
		padding:3rem;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
  		justify-content: center;
		background-color: var(--background);
		position: fixed; 
  		width: 100%; 
  		height: 100%;
  		top: 0;
  		left: 0;
  		right: 0;
  		bottom: 0;
  		z-index: 2;
	}
	.wrapper{
		display:none;
	}
	#factsheet{
		display:none;
	}
	.device{
		animation: rotateBackAndForth 4s ease-in-out infinite;
		height:4rem;
		width:4rem;
		border-radius: 10rem;
	}
	.kc-logo{
		width:150px;
		height:auto;
	}
}