/* Frontend Webapp */ 

/* Webfonts */ 
@font-face {
    font-family: 'Modelica-Bold';
    src: url('../fonts/BwModelica-Bold.woff2') format('woff2'),
        url('../fonts/BwModelica-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Modelica-Light';
    src: url('../fonts/BwModelica-Light.woff2') format('woff2'),
        url('../fonts/BwModelica-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Variable Definitions */ 
:root {
    --font-bold:'Modelica-Bold'; 
    --font-light:'Modelica-Light'; 

    /* margins, paddings */ 
    --padding-left:7%; 
    --padding-right:7%; 
    --padding-bottom:7%; 
    --padding-top:80px;

    --padding-input:10px; 

    --border-radius:5px; 

    /* colors */ 
    --white:white;
    --black:black;
    --green:#21b573; 
    --red:red; 


    --error:rgb(109, 29, 17);
    --success:rgb(29,109,17);

    /* buttons */ 
    --button-height:42px; 
}


* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    font-family:var(--font-light);
}

html, body {
	height: 100%;
	margin: 0;
	overflow: hidden; /* Verhindert das Scrollen des Body */
}


body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    width:100%;
    font-family:var(--font-light);
}

/* gradient bgs */ 
.gradient {
    background-repeat:repeat-y;
    background-size:100%;
}

.gradient-white 
{
    background-image:url('../images/gradient1.png'); 
}

.gradient-green 
{
    background-image:url('../images/gradient2.png'); 
}

/* Login */ 
.login-wrapper {
    height:100vh;
    position:relative;
}
video {
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
}
.logo-wrapper {
    position: absolute;
    width: 300px;
    left: 50%;
    z-index: 2;
    top: var(--padding-top);
    transform: translateX(-50%);
}
.logo-wrapper .logo-outlines 
{
    width:100%; 
}
.logo-wrapper .logo-number {
    width: 30%;
    position: absolute;
    left: 60%;
    transform: translateX(-60%);
    top: 20%;
    z-index: 3;
}
.rotateY {
    animation: rotationY 0.5s ease; /* Adjust the duration and timing function as needed */
}
.login-bottom {
    width: 100%;
    box-sizing: border-box;
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);
    position: absolute;
    bottom: var(--padding-bottom);
    z-index:3;
}
.login-bottom input, .sinput {
    width:100%; 
    font-size:18px; 
    box-sizing:border-box;
    padding:var(--padding-input); 
    border:none; 
    outline:none; 
    background-color:transparent;
}
input::placeholder,textarea::placeholder 
{
    color:var(--black); 
}
.border-radius 
{
    border-radius:var(--border-radius); 
}
.button 
{
    width:100%; 
    float:left; 
    padding:var(--padding-input); 
    box-sizing:border-box;
    text-align:center;
    color:var(--white); 
    font-family:var(--font-bold);
    font-size:18px; 
    height:var(--button-height); 
    opacity:0.8; 
    transition:all 0.25s ease; 
    cursor:pointer; 
}
.button-animate 
{
    opacity:1; 
}
.notice, a {
    color: var(--white);
    font-size:18px;
}
a, b
{
    text-decoration:none;
    font-family:var(--font-bold);
}
.checkbox-container {
    width:40px;
    height:40px;
    float:left;
    border-radius:var(--border-radius); 
    background-color:rgb(255,255,255,0.64); 
    position:relative;
    transition:all 0.3s ease;
}
.checkbox-container.checked 
{
    background-color:var(--green);
}
.checkbox-label {
    margin-left: 15px;
    float: left;
    width: calc(100% - 55px);
    line-height: 145%;
    font-size: 15px;
}
.checkbox-label a 
{
    font-size:14px; 
}
.checkbox-img 
{
    position:absolute;
    left:50%; 
    top:50%; 
    transform:translateX(-50%) translateY(-50%);
    z-index:1; 
    width:50%; 
    display:none;
}
.checked .checkbox-img 
{
    display:block; 
}

input.error,select.error,textarea.error
{
    border:2px solid var(--error)!important; 
} 

#message-wrapper {
    position: fixed;
    bottom:-100%;
    left:0px;
    width:100%;
    background-color:var(--error);
    z-index:4;
    box-sizing: border-box;
    padding:10px;
}

#message-wrapper h2 
{
    font-size:20px;
    font-family:'Modelica-Bold';
    width:100%; 
    float:left;
    margin-bottom:5px; 
}

#message-wrapper p 
{
   width:100%; 
   float:left;
   font-family:'Modelica-Light';
   margin-top:5px;
   font-size:14px;
}

#loader {
    background-color:var(--black);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100vh;
    z-index: 6;
    display:none; 
}

/* Define keyframes for continuous Y-axis rotation */
@keyframes rotation {
    from {
        transform:translateX(-50%) translateY(-50%) rotateY(0deg);
    }
    to {
        transform:translateX(-50%) translateY(-50%) rotateY(360deg);
    }
}


@keyframes rotationY {
    from {
        transform:translateX(-60%) rotateY(0deg);
    }
    to {
        transform:translateX(-60%) rotateY(360deg);
    }
}

/* Apply the animation to an element */
.loaderimg {
    width:100px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    animation: rotation 1s linear infinite; /* Adjust the duration and timing function as needed */
}


div#frontend-app {
    min-height:100vh;
    background-color:var(--black);
    padding:80px; 
    box-sizing:border-box;
    padding-left:0px;
    padding-right:0px;
}

#center-wrap 
{
    margin: 0 auto;
    width:85%;
    height: 80vh;
    overflow-y:scroll;
    padding-left: 20%;
    padding-right: 20%;
}



#logo 
{
    width:300px;
    height:auto;
    margin:0 auto; 
    display:table; 
}

h1{
    font-family:'Modelica-Bold';
    font-size:28px; 
    margin-bottom:10px; 
}

p 
{
    line-height:140%; 
}

p,a 
{
    font-family:'Modelica-Light';
    font-size:16px;
}

a:hover 
{
    font-family:'Modelica-Bold';
}

#center-wrap input, .sinput {
    width: 100%;
    font-size: 18px;
    box-sizing: border-box;
    padding: var(--padding-input);
    border: none;
    outline: none;
    background-color: rgba(255,255,255,0.8);
    margin-top:20px;
    margin-bottom:20px;
}



div#footer {
    border-top: 1px solid white;
    padding-top: 20px;
    max-width: 800px;
    min-width: 325px;
    width: 60%;
    height: auto;
    position: fixed;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
	background-color:black;
}



/* Text definitions for AGB, etc... */ 
.textcontainer h2 
{
    color:var(--white); 
    font-family:'Modelica-Bold';
    font-size:20px; 
    width:100%; 
    float:left; 
    margin-top:20px;
    margin-bottom:20px; 
}

.textcontainer h3 
{
    color:var(--white); 
    font-family:'Modelica-Bold';
    font-size:18px; 
    width:100%; 
    float:left; 
    margin-top:20px;
    margin-bottom:20px; 
}

.textcontainer p 
{
    color:var(--white); 
    font-family:'Modelica-Light';
    font-size:16px;
    width:100%; 
    float:left; 
    margin-bottom:10px; 
}


.textcontainer a 
{
    color:var(--green); 
    font-family:'Modelica-Light';
    font-size:16px;
    width:100%; 
    float:left; 
}


.textcontainer ul
{
    color:var(--white); 
    font-family:'Modelica-Light';
    font-size:16px;
    width:calc(100% - 20px); 
    float:left; 
    margin-bottom:10px; 
    list-style:disc;
    margin-left:20px; 
}

.textcontainer ul li 
{
    width:100%; 
    float:left; 
    margin-bottom:10px; 
    line-height:140%;
}

.outlinedbox {
    width: 100%;
    float: left;
    padding: 20px;
    box-sizing: border-box;
    border: 2px solid var(--white);
    margin-top: 20px;
    margin-bottom: 20px;
}

.mt50 
{
    margin-top:50px; 
}

.mb20 
{
    margin-bottom:20px;
}


.cookie-disclaimer {
    background-color: rgba(0,0,0,0.8);
    height: 80px;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 101;
    font-size: 0.8em;
    box-sizing: border-box;
    padding: 20px;
    display: none;
}

.cookie-disclaimer .button-white {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}

.button-white {
    font-family: 'Muli-Light';
    background-color: none;
    text-decoration: none;
    padding: 20px;
    color: white;
    font-size: 1.3em;
    margin: 0 auto;
    display: block;
    width: 170px;
    border: 3px solid white;
    text-align: center;
    text-transform: uppercase;
}




.cookie-disclaimer {
    background-color: black;
    height: 80px;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 9999999;
    font-size: 0.8em;
    box-sizing: border-box;
    padding: 20px;
    display: none;
}

.cookie-disclaimer .button-white {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}

.button-white {
    font-family:'Modelica-Light';
    background-color: none;
    text-decoration: none;
    padding: 20px;
    color: white;
    font-size: 1.3em;
    margin: 0 auto;
    display: block;
    width: 170px;
    border: 3px solid white;
    text-align: center;
    text-transform: uppercase;
}

.button-white:hover 
{
	cursor:pointer;
	background-color:white;
	color:black;
}


/* Iscroll */ 
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	-ms-touch-action: none;
}

body,ul,li {
	padding: 0;
	margin: 0;
	border: 0;
}

body {
	font-size: 12px;
	font-family: ubuntu, helvetica, arial;
	overflow: hidden; /* this is important to prevent the whole page to bounce */
}

#header {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 45px;
	line-height: 45px;
	background: #CD235C;
	padding: 0;
	color: #eee;
	font-size: 20px;
	text-align: center;
	font-weight: bold;
}

#wrapper {
	position: absolute;
	z-index: 1;
	top: 45px;
	bottom: 48px;
	left: 0;
	width: 100%;
	background: #ccc;
	overflow: hidden;
}

#scroller {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 100%;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}

#scroller ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	text-align: left;
}

#scroller li {
	padding: 0 10px;
	height:auto;
	background-color:transparent;
	border:none; 
	font-size: 14px;
}


#logo
{
	width:250px;
	cursor:pointer; 
	opacity:0.8;  
}

#logo:hover 
{
	opacity:1;
}



@media all and (max-width: 1280px)
{
    .image-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
        gap: 10px; /* Adjust the gap between images */
        padding: 10px; /* Optional: Add some padding around the container */
    }

}
	



@media all and (max-width: 1000px)
{
	
	
	.nav-text
	{
		display:none;
	}
	
	
	#navi
	{
		width:40px;
	}
	
	
	#content-backend
	{
   		 width: calc(100% - 100px);	
		margin-left: 40px;
	}
	
	
	
	.navi-item {
		width: calc(95% - 20px);
		position: relative;
		padding: 5%;
		padding-top: 15px;
		padding-bottom: 25px;
		padding-left: 20px;
		float: left;
		font-family: 'Open Sans';
		font-weight: 400;
		font-size: 1.1em;
		color: white;
	}
	
    #navi .icon
    {
        left:50%; 
        transform:translateX(-50%) translateY(-50%);
    }
	
}



@media all and (max-width: 830px)
{
	
	
	/* Change from 3 Columns to 1 Column */ 
	.w28
	{
		width:94%;
		margin-bottom:20px;
	}
	
	.w2
	{
		display: none;
	}
	
	.hidemobile
	{
		display:none;
	}


}
	
	




@media all and (max-width: 430px)
{
	.link-container 
    {
        width:100%; 
        display:block; 
    }

    .appstore-logo 
    {
        margin-right:0px;
        width:200px;
        margin:0 auto;
        display:table;
        float:unset;
    }

    .googlestore-logo
    {
        margin-right:0px;
        width:200px;
        margin:0 auto;
        display:table;
        float:unset;
        margin-top:20px; 
    }


    .logo-wrapper 
    {
        width:200px; 
    }

}



/* Cookie BS */ 


/* Mobile.css */ 

@media screen and (max-width:1700px)
{
	img.logo-large 
	{
		width:100%;
	}
}


@media screen and (max-width:1500px)
{
	img.logo-large 
	{
		width:125%;
	}
}






@media screen and (max-width:1025px)
{
	.ratingbox .w12
	{
		width:4%; 
	}
	
	.rating-item 
	{
		width:22%;
		min-height:230px;
	}
	
	.cookie-disclaimer 
	{
		height:100px;
	}

	#fullpage > div.section.fp-section.fp-table.active.fp-completely > div > div > div > div > div:nth-child(15) {
		display: none;
	}

	.grid-break
	{
		margin-left:2%;
	}

	#st-2
	{
		top:0px!important; 
		left:0px!important;
		font-family: "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif!important;
		-moz-transition: all 0.2s ease-in!important;
		-ms-transition: all 0.2s ease-in!important;
		-o-transition: all 0.2s ease-in!important;
		-webkit-transition: all 0.2s ease-in!important;
		transition: all 0.2s ease-in!important;
		backface-visibility: hidden!important;
		display: block!important;
		position: fixed!important;
		opacity: 1!important;
		text-align: left!important;
		z-index: 94034!important;
		width:40px!important;
		height:120px!important;  
	}


	#st-2 .st-btn {
		-moz-box-sizing: border-box!important; 
		-webkit-box-sizing: border-box!important; 
		box-sizing: border-box!important; 
		-moz-transition: all 0.2s ease-in!important; 
		-ms-transition: all 0.2s ease-in!important; 
		-o-transition: all 0.2s ease-in!important; 
		-webkit-transition: all 0.2s ease-in!important; 
		transition: all 0.2s ease-in!important; 
		border: none!important; 
		cursor: pointer!important; 
		display: inline-block!important; 
		font-size: 12px!important; 
		height: 40px!important; 
		line-height: 20px!important; 
		margin-bottom: 0px!important; 
		opacity: 1!important; 
		overflow: hidden!important; 
		padding: 10px!important; 
		position: relative!important; 
		text-align: left!important; 
		top: 0!important; 
		vertical-align: top!important; 
		white-space: nowrap!important; 
		width: 40px!important; 
	}


	#st-2 > div {
		clear: left!important;
		float: left!important;
	}


	#center-wrap
	{
		padding-left:10%; 
		padding-right:10%; 
	}


	div#footer {
		border-top: 1px solid white;
		padding-top: 20px;
		max-width:unset;
		min-width: 325px;
		width:80%;
		height: auto;
		position: fixed;
		left: 50%;
		bottom: 0px;
		transform: translateX(-50%);
	}

}



@media screen and (max-width:1000px)
{
	.service-item 
	{
		width:100%;
		margin-bottom:2%;
		min-height:0px!important;
		padding:20px;
	}
	
	.hideMid 
	{
		display:none;
	}
	
	.service-icon 
	{
		width:130px;
		float:left;
	}
	
	.service-item h2, .service-item h3, .service-item .h3
	{
		width:calc(100% - 160px);
		margin-left:10px;
		float:left;
		text-align:left;
		margin-top:15px;
	}
	
	.service-item h3, .service-item .h3
	{
		margin-top:0px;
	}
	
	.service-item p
	{
		text-align:left;
		margin-top:10px;
	}
	
	
	.w15 
	{
		width:32%; 
		margin-bottom:0px;
	}
	
	
	.form-box
	{
		width:100%;
		margin-left:0px;
	}
	
	 .wbox
	{
		width:96%;
		padding:2%;
		margin-left:0px;
	}
		
	.rating-item 
	{
		width:44%;
		margin-bottom:50px;
		min-height:200px;
	}
	
	.ratingbox
	{
		width:95%;
		margin-left:5%;
	}
	
	
	img.logo-large
	{
		width:150%;
		left:53%;
	}
	
	
	.w49 
	{
		width:100%;
	}


	.toggle-main
	{
		display:block; 
	}


	.fp-tableCell {
		width:100%;
		float:left;
		height:auto!important;
	}


	.fp-section:not(.section-start).fp-table, .fp-slide.fp-table {
		display:block;
		width:100%;
		float:left;
		height:auto!important;
		overflow:visible;
	}

	.padbox 
	{
		padding-top:0px; 
		padding-bottom:0px; 
	}

	h2 
	{
		margin-top: 100px;
		margin-bottom: 50px;
	}

	.service-item h2 
	{
		margin-top:20px;
		margin-bottom:0px;
	}

	.teaser h2
	{
		margin-top:0px;
		margin-bottom:0px; 
	}

	.mt2, .mt4
	{
		margin-top:0px!important; 
	}

	.w2 
	{
		height:1px; 
	}

	.w4 
	{
		width:2%; 
	}

	.w48 
	{
		width:49%; 
	}

	.mt10 
	{
		margin-top:0px; 
	}


	.reference 
	{
		margin-bottom:20px; 
	}


	.service-item:last-of-type
	{
		margin-bottom:100px; 
	}


	.wbox
	{
		margin-bottom:80px; 
	}


	.form-box
	{
		margin-top:0px; 
	}

	#send-button
	{
		margin-bottom:100px; 
	}

	.section-footer
	{
		padding-bottom:100px; 
	}

	.lastref 
	{
		margin-bottom:100px; 
	}

}


@media screen and (max-width:1000px)
{
	.cookie-disclaimer
	{
		height:120px;
	}
	
	
	.cookie-disclaimer p 
	{
		width:100%; 
		text-align:center;
	}
	
	.cookie-disclaimer .button-white 
	{
		left:50%; 
		transform:translateX(-50%) translateY(-50%);
		padding:10px;
		top:75%;
		margin-left:0px;
	}


	.w15 
	{
		width:100%; 
		margin-bottom:0px;
	}
	
	
}



@media screen and (max-width:620px)
{
	.cookie-disclaimer
	{
		height:140px;
	}

	.rating-item
	{
		width:100%; 
		min-height:unset; 
	}


	.ratingbox 
	{
		width:100%; 
		margin-left:0px; 
	}


	.ratingbox p {
		font-size: 1.5em;
	}

	.grid-break 
	{
		margin-left:0px; 
	}


	.stars 
	{
		margin:0 auto; 
		display:table;
		width:auto; 
		float:unset; 
	}


	.rating-item h4, .rating-item .h4, .rating-item h5, .rating-item p, .rating-item .h5
	{
		text-align:center;
	}
	.rating-item h5, .rating-item .h5
	{
		margin-bottom:10px; 
	}

	
}


@media all and (max-width:500px)
{
	
	.fp-tableCell
	{
		vertical-align:bottom;
	}

	.section-footer .fp-tableCell, .section-start .fp-tableCell
	{
		vertical-align:middle!important;
	}
	
	
	.subtext-container
	{
		width:80%;
		margin-left:10%;
	}
	
	.teaser
	{
	  left:0px;
	  bottom:14%;
	  width:100%; 
	}
	
	
	body 
	{
		font-size:9px;
	}
	
	.menu-item 
	{
		font-size:2em;
	}
	
	
	.teaser h1, .teaser h2
	{
		text-align:center;
	}
	
	h2
	{
		font-size:3.5em;
	}
	
	h3, .h3
	{
		font-size:2.8em;
	}
	
	.service-icon
	{
		width:100px;
		margin-bottom:0px;
	}
	
	.service-item p
	{
		margin-top:0px;
	}
	
	.service-item 
	{
		padding:2%;
	}
	

	
	.hideM
	{
		display:none;
	}
	
	

	
	#menu 
	{
		width:50%;
	}
	
	.toggle
	{
		width:40px;
	}
	
	.toggle-close
	{
		width:30px;
	}
	
	img.scroll-down
	{
		width:40px;
		bottom:5%; 
	}
	
	.wbox .mt30, .wbox .mt20
	{
		margin-top:10px;
	}
	
	.servicebox .mt50
	{
		margin-top:20px;
	}
	
	
	.service-icon
	{
		width:70px;
	}
	
	.service-item 
	{
		padding:20px;
	}
	
	.service-item h2, .service-item h3, .service-item .h3
	{
		text-align:left!important;
		width:calc(100% - 100px);
		margin-top:0px;
	}
	
	.service-item .tcenter
	{
		text-align:left;
	}
	
	.service-item h2  
	{
		margin-top:0px;
	}
	
	
	.section-footer h2 
	{
		margin-bottom:30px;
	}


	#center-wrap
	{
		padding-left:5%; 
		padding-right:5%; 
		overflow-x:hidden; 
	}


	div#footer
	{
		width:90%; 
	}
	

	
}