html, body {
color: #141414;
font-family: "Futura-PT", sans-serif; /* Schriftart Futura */
font-weight: 400; /* Normales Gewicht */
font-style: normal; /* Normaler Stil, kein Kursiv */
font-size: 16px;
letter-spacing: 0.03em; /* Leichter Buchstabenabstand */
line-height: 1.2; /* Zeilenhöhe für bessere Lesbarkeit */
margin: 0; /* Entfernt Standardabstände */
padding: 0; /* Entfernt Standardinnenabstände */
width: 100%; /* Volle Breite */
height: 100%; /* Volle Höhe */
overflow: hidden; /* Kein Scrollen */
}
p{
/*font-size: clamp(0.5rem, 2.5vw, 2rem); 2rem (ca. 32px).1rem (ca. 16px) */
font-family: "Futura-PT", sans-serif;
color: #141414;
font-weight: 400;
font-style: normal;
font-size: 16px;
font-size: clamp(6px,0.72vw, 17px);
/*font-size: clamp(0.5rem, 0.6vw, 3rem);*/
letter-spacing: 0.03em;
line-height: 1.2;
display: block;
text-decoration: none;
}
a:hover{
color:#000;
text-decoration: none;
}
a{
/*font-size: clamp(0.5rem, 2.5vw, 2rem); 2rem (ca. 32px).1rem (ca. 16px) */
color:#2ab9ce;
text-decoration: none;
font-family: "Futura-PT", sans-serif;
font-weight: 400;
font-style: normal;
font-size: clamp(8px,1vw, 17px);
letter-spacing: 0.03em;
line-height: 1.2;
display: block;
text-decoration: none;
}
ul {
list-style-type: disc; /* Standard-Aufzählungspunkte */
padding-left: 10px; /* Abstand für die Punkte */
}
li {
font-family: "Futura-PT", sans-serif;
font-weight: 400;
font-style: normal;
font-size: clamp(8px,0.72vw, 17px);
letter-spacing: 0.03em;
line-height: 1.2;
}
h1{
font-family: "futura-pt", sans-serif;
font-weight: 800;
font-style: italic;
font-size: clamp(1rem, 2.5vw, 6rem); /* min, preferred, max */
border: none; /* Kein Rahmen */
color:#294293;
/*border: 2px dashed red; Auffälliger Rahmen */
/* color: blue; Auffällige Textfarbe zum Testen */
}
.italo {
font-family: "futura-pt", sans-serif;
font-weight: 400;
font-style: italic;
border: none; /* Kein Rahmen */
letter-spacing: 0.03em;
}
h2{
font-weight: 400;
font-style: italic;
font-size: 23px;
font-size: clamp(12px, 1.5vw, 22px); /* min, preferred, max */
text-rendering: optimizeLegibility;
color:#454545;
}
.h1Bo{
font-weight: 900;
}
h3{
font-size:20px;
font-weight:900;
}
h4{
font-size:18px;
font-weight:bold;
}
:focus { outline: 0; }
strong{
color:#7b7b7b;
}
.deck{
position:absolute;
width:100%;
height:100%;
touch-action: auto;
z-index:10;
}
.maintext{
font-size: 16px;
font-weight:900;
}
.noSelect {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.noSelect:focus {
outline: none !important;
}
.transparent{
background-color:transparent;
}
.parallax-image {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Deckt die Breite des Containers */
height: auto; /* Beibehaltung des Seitenverhältnisses */
min-height: 100%; /* Deckt die gesamte Höhe des Containers */
transform: translateY(0); /* Startposition */
will-change: transform; /* Für optimierte Animationen */
touch-action: auto;
}
.popup {
width: 50%; /* Standardbreite für bessere Skalierung */
max-width: 500px; /* Begrenzung auf max. 500px für größere Bildschirme */
height: auto;
z-index: 999;
font-size: 18px;
background: rgba(255,255,255,0.9);
padding: 30px;
display: none;
/* Zentrierung */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 0px;
}
/* Spezielle Anpassung für kleinere Geräte */
@media (max-width: 600px) {
.popup {
width: 50%; /* Fast volle Bildschirmbreite */
font-size: 16px; /* Kleinere Schrift für bessere Lesbarkeit */
padding: 20px; /* Weniger Padding auf kleinen Bildschirmen */
}
}
.popup button {
width: 30px;
height: 30px;
position: absolute;
top: 0;
right: 0;
margin:20px 20px 20px 20px;
background-color: transparent;
background-image: url("../img/close_white_btn.png");
background-size: contain; /* Damit das Bild in den Button passt */
background-repeat: no-repeat;
background-position: center;
color: #393939;
border-radius: 0px;
border: 0px solid #000;
cursor: pointer;
font-size: 20px;
}
#popupCont{
backdrop-filter: blur(5px);
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
display:none;
z-index:999;
color:#fff;
}
#popupCont p{
color:#393939;
}
#ladebalke{
height:10px;
top:300px;
width: auto;
float:left;
background-color: #3f929f;
}
#usage_pc{
height:480px;
width: 640px;
margin: 0% auto;
background-image: url("../img/mouse_animation.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#usage_touch {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url(../img/touch_animation.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
max-width: 100vw;
max-height: 100vh;
}
#usageCont{
height: 80%;
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Exakte Zentrierung */
}
#usageAdv {
position: absolute;
bottom: 15%;
left: 50%;
transform: translate(-50%, -1%); /* Exakte Zentrierung */
width: 200px;
height: 80px;
background-color: #5B5F62; /* Standardfarbe */
color: white;
font-size: 18px;
font-weight: bold;
text-align: center;
line-height: 80px;
border-radius: 10px;
cursor: pointer;
user-select: none;
transition: background-color 0.3s, transform 0.1s; /* Weiche Übergänge */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index:999;
}
@media (max-width: 768px) {
#usageAdv {
top: 60%;
transform: translate(-50%, -50%);
}
}
/* Hover-Effekt */
#usageAdv:hover {
background-color: #2ab9ce; /* Dunklere Farbe beim Hover */
}
/* Klick-Effekt */
#usageAdv:active {
background-color: #003f7f; /* Noch dunkler beim Klick */
transform: translate(-50%, -50%) scale(0.95); /* Leichtes "Eindrücken" */
}
#renderCanvas {
position:absolute;
width : 100%;
height : 100%;
background-color:transparent;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#customLoadingScreenDiv{
background-color: #171f36;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
font-size:30px;
text-align:center;
}
#customLoadingScreenDiv h2{
font-size: clamp(20px, 5vw, 50px);
text-transform: uppercase;
color:#fff;
}
.iimWebgl{
position:absolute;
top:0px;
right:0px;
z-index:950;
}
/* bildcontainer */
#innertext{
height:50px;
width: 300px;
margin: 5% auto;
}
/* textcontainer */
#innertadv{
position:fixed;
bottom:250px;
width:100%;
height:auto;
border:0px solid#000;
text-align: center;
}
.center{
position:relative;
display:block;
width:500px;
margin:0px auto;
display:flex;
align-items:center;
flex-direction: column;
}
#Cookiebanner{
position:fixed;
top:0px;
width:100%;
height:100%;
z-index:999;
background: rgba(9,105,172,0.5);
}
#cookienotice{
padding:20px;
height:200px;
width:100%;
position:fixed;
margin:0px auto;
background-color:#fff;
}
#cookienotice p{
color:#000;
font-size:20px;
}
#cookienotice a{
font-weight: 900;
}
input[type="submit"] {
padding: 40px;
background-color: #056099;
color: #fff;
border-radius: 10px;
border: 5px;
border-color:#000;
cursor: pointer;
font-size:20px;
}
#devOrientation{
position:fixed;
top:150px;
width:100%;
height:100%;
overflow:hidden;
display:none;
background: rgba(45,45,45,0.1);
padding:50px;
backdrop-filter: blur(10px);
}
h1, p {
clear: Left;
}
#trans1{
z-index:10;
width:100%;
height:100%;
background-image: url("../img/screen2.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display:none;
}
.bez{
margin-left:-300px;
margin-top:0px;
}
#appLogoCont{
background-image: url("../img/logo_anwendung.png");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
width:165px;
height:85px;
float:left;
margin:15px;
margin-left:25px;
cursor: pointer;
}
/*----------------------------- FLEX HOME -------------------------------------------*/
#overview{
position:fixed;
top:200px;
min-width:650px;
max-width:1300px;
height:auto;
overflow:hidden;
display:none;
background: rgba(45,45,45,0.1);
margin:50px;
padding:50px;
backdrop-filter: blur(10px);
}
#overview H1{
padding:20px;
}
#closeOverview{
width:70px;
height:70px;
position:absolute;
right:0px;
top:0px;
transition: transform 250ms;
padding:20px;
cursor: pointer;
}
#closeOverview img{
width:100%;
}
#closeOverview:hover {
transform: scale(1.2);
}
.flex-container {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
align-content: stretch;
align-items: stretch;
}
.product-tile {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
margin: 0 12px 24px;
flex-flow: row wrap;
align-content: flex-start;
border: 0px;
}
.product-tile img {
width: 100%;
box-shadow: 0px 0px 15px 0px #4F4F4F;
transition: transform 250ms;
}
.product-tile img:hover {
transform: scale(1.05);
}
/*----------------------------- Navigation -------------------------------------------*/
#mainMenu{
position:fixed;
background-color:rgba(255,255,255,0.1);
width:100%;
z-index:999;
backdrop-filter: blur(10px);
display:none;
}
#menuwrap{
float:right;
width:100px;
margin-right: 6%;
height:100%;
margin-top:50px;
}
.menucenter{
position:relative;
margin:0px auto;
border:0px solid #000;
width:200px;
height:60px;
}
/* Style The Dropdown Button */
.dropbtn {
background-image: url("../img/menubtn.png");
width:50px;
height:50px;
border: none;
cursor: pointer;
}
.dropbtn:hover{
background-image: url("../img/menubtn_close.png");
color: #000;
}
.dropbtn:active{
background-image: url("../img/menubtn_close.png");
color: #000;
}
.dropbtn {
transition: transform 250ms;
}
/* The container - needed to position the dropdown content */
.dropdown {
padding-left:50px;
width:100px;
height:80px;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
right:100px;
margin-left:0px;
background-color: #f9f9f9;
width: 640px;/* pc */
height:180px;/* pc */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
overflow: hidden;
}
.dropdowncat{
float:left;
width:50%;
height:100%;
background-color: #F1f1f1;
display:flex;
align-items:center;
}
.dropdowncat p{
padding-left:15%;
}
.dropdownlist{
float:right;
width:50%;
height:100%;
}
.listItem{
float:left;
width:100%;
height:45px;/* pc */
display:flex;
align-items:center;
background-image: url("../img/klappbar_pfeil.png");
background-repeat: no-repeat;
background-position:-30px 50%;
transition: transform 250ms;
}
.listItem:hover {
transform: translateX(8px);
}
.dropdownblock{
position:relative;
width:100%;
height:90px;
border-bottom:1px solid;
border-color: #9e9e9e;
}
/* Links inside the dropdown */
.dropdown-content a {
padding-left: 10px;
text-decoration: none;
display: block;
color:#0084c9;
font-size:18px;
border-bottom: 0px solid#0084c9;
background-color:transparent;
}
.dropdown-content p {
text-decoration: none;
display: block;
font-size:18px;
color:#585858;
}
.dropdown_selected{
background-color: #dbd9d9;/* grau */
color:#0969ac;/* triflex blau */
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: transparent;/* grau */
color:#000;/* triflex blau */
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
transform: scale(1.2);
opacity: 0.5;
}
.dropdown:hover .dropdown-content {
animation: einblenden 0.5s;
-moz-animation: einblenden 0.5s; /* Für Firefox */
-webkit-animation: einblenden 0.5s; /* Für Safari und Chrome */
-o-animation: einblenden 0.5s; /* Für Opera */
}
@keyframes einblenden {
from { opacity:0; }
to { opacity:1; }
}
@-moz-keyframes einblenden { /* Für Firefox */
from { opacity:0; }
to { opacity:1; }
}
@-webkit-keyframes einblenden { /* Für Safari und Chrome */
from { opacity:0; }
to { opacity:1; }
}
@-o-keyframes einblenden { /* Für Opera */
from { opacity:0; }
to { opacity:1; }
}
/*
T ------------------------------------------------------------
*/
.contalux {
display: flex;
justify-content: flex-start; /* Elemente nach links schieben */
align-items: flex-start;
position: absolute;
top: 10%;
right: 40%;
z-index: 10;
gap: 15px;
flex-wrap: wrap;
}
#textos {
padding: 15px;
border-radius: 5px;
width: 35vw;
box-sizing: border-box;
}
/*#kaktus {
align-self: flex-start;
position: relative;
width: auto;
order: -1;
transform: translateX(-40px); /* Verschiebt den Button nach links */
/* } */
/* Button Styling */
/* #kaktus button {
padding: 10px 15px;
font-size: 16px;
background-color: #ff5757;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
}*/
/* Media Query für mobile Geräte */
@media (max-width: 768px) { /* Anpassung für mobile Geräte */
.contalux {
display: none; /* Versteckt das Element auf kleinen Bildschirmen */
}
}
/*
CSS INFOPOINTS MENU ------------------------------------------------------------
*/
/* layout long */
.scrollmenu{
display:none;
position:fixed;
bottom:140px;
height:140px;
width:100%;
}
/* layout hong */
.scrollSubmenu{
display:none;
position:fixed;
bottom:0px;
height:140px;
width:100%;
}
.container {
background-color: #ececec;
overflow: auto;
white-space: nowrap;
width:100%;
height:140px;
}
/* layout hong */
@media (hover: hover) and (pointer: fine) {
.scrollmenu{
bottom:90px;
height:90px;
}
.scrollSubmenu{
height:90px;
}
.container {
height:90px;
}
.container a {
padding: 20px;
font-size: 20px;
}
}
.scroll {
white-space: nowrap; /* [1] */
overflow-x: auto; /* [2] */
-webkit-overflow-scrolling: touch; /* [3] */
-ms-overflow-style: -ms-autohiding-scrollbar; /* [4] */
}
/* [5] */
.scroll::-webkit-scrollbar {
display: none;
}
/* touchscreens */
@media (hover: none) {
/* ... */
.dropdown-content {
width:850px;
height:300px;
}
.listItem{
height:75px;
}
.dropdown-content a {
font-size:25px;
}
.dropdown-content p {
font-size:25px;
}
.dropdownblock{
height:150px;
}
}
.lds-ellipsis {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ellipsis div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
.texto{
position:absolute;
}
.ignore{
pointer-events: none;
}
.pdf-icon:hover {
transform: scale(1.1); /* Vergrößerung beim Hover */
}
/* screenreader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
figure {
all: unset; /* Entfernt alle Standardstile des Browsers */
display: block; /* Stellt sicher, dass es ein Block-Element bleibt */
width: 100%; /* Nimmt 100 % der Breite des Elternelements */
height: 100%; /* Nimmt 100 % der Höhe des Elternelements */
margin: 0; /* Entfernt mögliche Abstände */
padding: 0; /* Entfernt mögliche Polsterung */
box-sizing: border-box; /* Box-Modell so einstellen, dass padding und border innerhalb der Größe zählen */
}
/* Styling für die Blöcke */
.block {
height: 100vh; /* Höhe des Bildschirms */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
border-bottom: 2px solid #ccc;
text-align: center;
}
.block:nth-child(odd) {
background-color: #d0d0d0; /* Abwechselnde Hintergrundfarbe für Blöcke */
}
/* Styling für den Weiter-Button */
.next-button {
position: absolute;
bottom: 20px;
padding: 10px 20px;
background-color: #007BFF;
color: white;
text-decoration: none;
border-radius: 5px;
}
.next-button:hover {
background-color: #0056b3;
}
@media (max-width: 767.98px) {
p{
font-size: 6px;
}
h2{
font-size: 12px;
}
#innertadv{
top:10%;
}
}
@keyframes colorChange {
0% { color: rgba(255, 255, 255, 0.27); } /* Start mit 27 % Weiß */
40% { color: rgba(255, 255, 255, 0.05); } /* Fast unsichtbar bei 5 % */
60% { color: rgba(255, 255, 255, 0.05); } /* Leicht unsichtbar gehalten */
100% { color: rgba(255, 255, 255, 0.27); } /* Zurück zu 27 % Weiß */
}
.animaWhite {
animation: colorChange 6s ease-in-out infinite; /* Sanfte Übergänge */
pointer-events: none;
}
@keyframes growShrink {
0% { transform: scale(1); color: rgba(255, 255, 255, 0.27); } /* Start mit 27 % Weiß */
40% { transform: scale(1.01); color: rgba(255, 255, 255, 0.05); } /* Fast unsichtbar bei 5 % */
60% { transform: scale(1.01); color: rgba(255, 255, 255, 0.05); } /* Leicht unsichtbar gehalten */
100% { transform: scale(1); color: rgba(255, 255, 255, 0.27); } /* Zurück zu 27 % Weiß */
}
.animaBlow {
pointer-events: none;
/*font-size: 2em;*/
animation: growShrink 6s ease-in-out infinite;
}