html{
    width:100%;
    overflow-x: hidden;
}

.fullscreen{	
  background-size: 50% 25%;
}


/* parallax layer */

dialog[open] {
   background: #FFFF00;
   margin: 5em auto;
   position: fixed;
   animation: aufklappen 4s;
   height: auto;
   width:86%;
   z-index: 2;
   opacity:1;
   margin-top: -25px;
   padding-bottom: 40px;
   transition: all 0.5s;
}

dialog2[open] {
   background: #FFFFFF;
   margin: 0px;
   position: fixed;
   height: 100%;
   width: 100%;
   z-index: 1;
   opacity:0.90;
}

dialog:backdrop {
    background: hs1(201 50% 40% /.5);
    height: 100%;
    width: 100%;
}

dialog:not([open]) {
   display:none;
   
}

dialog2:not([open]){
   display:none;
}


h1{                                /* scrollen: https://www.w3schools.com/jsref/prop_element_scrolltop.asp */
  font-size: 2vw; /*3vw 48 px*/
  
  color: #00A1FF;
  animation: textwelle 2s;
  text-shadow: 1px 1px 2px #666;
}

.News_Bild{
    margin-right: 5px;
    margin-left: 5px;
    width: 8%; /*100%*/
    min-width: 25px;
    transition: all 0.5s;
    transform: scale(1);
}

.News_Bild:hover{
    transform: scale(1.1);
    box-shadow: 0em 0 1em black;
}

.bewegtes_Bild{
    width: 75%; /*100%*/
    transition: all 0.5s;
    transform: scale(1);
}

.bewegtes_Bild:hover{
    transform: scale(1.1); /* translateX(18px) translateY(-10px) */
    box-shadow: 0em 0 1em black;
}

.Logo_Bild{
    transition: all 0.5s;
    width: 50%; 
    opacity: 0.75; 
    margin: 0;
}

.Logo_Bild:hover{
    transform: scale(1.1); 
    box-shadow: 0em 0 1em black;
}


@keyframes Infobox_Text_erscheinen {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  70% {
    opacity: 0.999999;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blasser_Hintergrund_erscheinen{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  } 
    
}

@keyframes aufklappen {
  0% {
    height: 0px;
    opacity: 0;
  }
  10% {
    height: 0px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  75% {
    height: 360px;
  }
  100% {
    height: 360px;
  }
}


@keyframes textwelle { /* https://wiki.selfhtml.org/wiki/CSS/Tutorials/Animation/Animation  */
  0% {
    transform: scale(0.15);
    opacity: 0.15;
  }  
  100% {
    transform: scale(1.00);
    opacity: 1;
  }
}

@keyframes fortschritt { 
    /*from {width: 0% }*/
    /*to { width: 100% }*/
  0% {
    opacity: 1;
	width: 0%
  } 
  90% {
    opacity: 1;
	width: 100%;
  }   
  100% {
    opacity: 0;
	width: 100%;
  }	
}

@keyframes versetzt_erscheinen{
  0% {
    opacity: 0;
  } 
  50% {
    opacity: 0;
  }   
  100% {
    transform: scale(1.00);
    opacity: 1;
  }	
}



h2{
  font-size: 22px;
  font-size: 1.61vw;
  font-weight: normal;
  color: #000000;
  animation: textwelle 2s;
  text-shadow: 1px 1px 2px #666;
}

h3{
  font-size: 30px;
  font-size: 2.4vw; /*2.2*/
  font-weight: fat;
  color: #000000;
  text-shadow: 1px 1px 2px #666;
}

h4{
  font-size: 25px;
  font-size: 1.5vw; /*1.83vw*/
  font-weight: fat;
  color: #000000;
}

p{
  font-size: 20px;
  font-size: 1.45vw;
  line-height: 1.5;
}
P_style{
    font-size: 1.45rem; /*2.8vw*/
    line-height: 1.5;
}

.Popup_Text{
    font-size: 30px;
  font-size: 2.2vw;
}

font{
  color: #000000;
}	



.button2 {       /* https://www.14all.eu/programmierung/css-tutorial-hover-effekte-buttons/2/ */
			
	border-radius: 6px;
    background-color: #00A1FF;
	border: none;
	color: #000000;
	text-align: center;
	font-size: 30px;
	font-size: 2.2vw;
	padding: 5px;
	height: 50px; /*20%*/
	width: 100%;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
	margin-bottom: 30px;
	filter:brightness(1);
}

.button2:hover {
	/*filter:brightness(0.5);*/
}


.button2 span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
}

.button2 span:after {
	content: '\00bb' ;  /* '\00bb' */
	position: absolute;
	opacity: 0;
	top: 0;
	right: -70px;
	transition: 0.5s;
	
}

.button2:hover span {
	padding-right: 30px;
	filter:brightness(0.5);
	opacity: 0.6;
	/*border: 5px solid #FFD858*/
	
}

.button2:hover span:after {
	opacity: 0.8;
	right: 0;
}







.button3 {       /* https://www.14all.eu/programmierung/css-tutorial-hover-effekte-buttons/2/ */
			
	border-radius: 6px;
    background-color: #FF1100;
	border: none;
	color: #000000;
	text-align: center;
	font-size: 30px;
	font-size: 2.2vw;
	padding: 5px;
	height: 20%;
	width: 20%;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
	filter:brightness(1);
}

button3:hover {
	filter:brightness(0.5);
}


.button3 span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
}

.button3 span:after {
	content: '\00AB';  			/*Pfeilzeichen*/
	position: relative;
	opacity: 0;
	top: 0;
	right: +200px;     			/*Anfangsposition des Pfeiles*/
	transition: 0.5s;
	
}

.button3:hover span {
	padding-left: 30px;   		/*Bewegung der Schrift */
	filter:brightness(0.5);
	opacity: 0.6;
	/*border: 5px solid #FFD858*/
	
}

.button3:hover span:after {
	opacity: 0.8;     			/*Transparenz bei der Endposition*/
	right: 115px;     			/*Endposition des Pfeiles*/
}





.button4 {       /* https://www.14all.eu/programmierung/css-tutorial-hover-effekte-buttons/2/ */
	border-radius: 6px;
    background-color: #FF1111; /*#00FF0F*/
	border: none;
	color: #000000;
	text-align: center;
	font-size: 30px;
	font-size: 2.2vw;
	padding: 5px;
	height: 50px;
	
	display: flex;                  /* flex f���r Zentrierung */
    align-items: center;            /* vertikale Zentrierung */
    justify-content: center;        /* horizontale Zentrierung */
    width: 100%; /*  !important */
    box-sizing: border-box;         /* padding innerhalb der Breite */
  
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
	margin-bottom: 30px;
	
	filter: brightness(1);
}

.button4:hover {
	filter: brightness(1);
	font-size: 2vw;
}

.button4:active {
	filter: brightness(0.8);
	font-size: 2vw;
}

/*
.button4:hover:after {
	opacity: 0.0;
}
*/

/*
.button4 span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
	opacity: 1;
}

.button4 span:after {
	content: '';  			Pfeilzeichen
	position: absolute;
	opacity: 0.0;
	top: 0;
	right: 0px;     			Anfangsposition des Pfeiles
	transition: 0.5s;
	
}

.button4:hover span {
	padding-bottom: 0px;   		Bewegung der Schrift 
	font-size: 25px;
	opacity: 1;
	
	border: 5px solid #FFD858;
}


.button4:hover span:after {
	opacity: 1.0;     			Transparenz bei der Endposition
	right: 0px;     			Endposition des Pfeiles
}
*/




.button5 {       /* für den Video Button!!!                                 https://www.14all.eu/programmierung/css-tutorial-hover-effekte-buttons/2/ */
	
	border-radius: 6px;
    background-color: #FFAF00; /*#FFAF00*/
	border: none;
	color: #000000;
	text-align: center;
	font-size: 30px;
	font-size: 2.2vw;
	padding: 5px;
	/*height: 20%;*/
	height: 50px; /*NEU*/
	width: 100%;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
	margin-bottom: 30px;
	filter:brightness(1);
	font-weight: normal;
}

.button5:hover {
	filter:brightness(1);
	background-color: #22FF11; 
	transform: translateY(-10px);
	color: #111111;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); 
}

.button5:active {
    transform: translateY(0px);
    font-size: 1.5vw;
    box-shadow: none;
}





.leuchtender_Waldgeist{
    width: 45%;
}

.leuchtende_Totenkoepfe{
    width: 70%;
}

.Mistkuebel{
    width: 50%;
}

.mobile_Messstation{
    width: 50%;
}

.Lichtsteuerpult{
    width: 80%;
}



/* Ab hier neu seit Umgestaltung der Webseite 13.10.2025*/

.Tabelle_oberes_Heading{
    margin: 10px auto; /*Mittig ausrichten!*/
    margin-top: 0px;
    width: 90%;
    
    justify-content: center;
    /*
	border-color: green;
	border-width: 1px;
	border-style: solid;
	*/
		
}

.td_Tabelle_oberes_Heading{
    width: 20%; 
    padding-bottom: 0px; 
    animation: versetzt_erscheinen 2.5s; 
    text-align: center; 
    vertical-align: middle; 
    /*
    border-color: green;
	border-width: 1px;
	border-style: solid;
	*/
}



#heading {
    
	
		
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 98%;
  background-color: transparent;
  color: white;
  padding: 15px 20px;
  transition: top 0.5s, background 1s;
  z-index: 4;
  padding-bottom: 0px;
  margin-bottom: 0px;
  border-bottom: 4px solid #00A1FF;
}

#logo_gross{
  position: fixed;
  z-index: 5;
  left: 51.5%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 90%;
}

#Zahnrad_links{
  position: fixed;
  z-index: 5;
  left: calc(51.5% - 25.3vh); /*42%*/
  top: 52.805%;
  transform: translate(-50%, -50%);
  height: 29%;
  width: auto;
  animation: Zahnrad_rechts_rotieren_versetzt 10s infinite ease-in-out;
  /*transition: all 1s;*/
}

#Zahnrad_Mitte{
  position: fixed;
  z-index: 5;
  left: 51.5%;
  top: 42.4%;
  transform: translate(-50%, -50%);
  height: 29%;
  width: auto;
  animation: Zahnrad_links_rotieren 10s infinite ease-in-out;
  /*transition: all 1s;*/
}

#Zahnrad_rechts{
  position: fixed;
  z-index: 5;
  left: calc(51.5% + 25.4vh); /*42%*/
  top: 52.81%;
  transform: translate(-50%, -50%);
  height: 29%;
  width: auto;
  animation: Zahnrad_rechts_rotieren 10s infinite ease-in-out;
  /*transition: all 1s;*/
}

@keyframes Zahnrad_rechts_rotieren{
    0%{
        transform: translate(-50%, -50%) rotate(0deg); 
    }
    100%{
        transform: translate(-50%, -50%) rotate(360deg); 
    }
}

@keyframes Zahnrad_rechts_rotieren_versetzt{
    0%{
        transform: translate(-50%, -50%) rotate(-6deg); 
    }
    100%{
        transform: translate(-50%, -50%) rotate(354deg); 
    }
}

@keyframes Zahnrad_links_rotieren{
    0%{
        transform: translate(-50%, -50%) rotate(363deg); 
    }
    100%{
        transform: translate(-50%, -50%) rotate(3deg); 
    }
}

@keyframes Logo_vergroessern{
    0%{
        left: 90%;
        top: 12%;
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0.5;
    }
    100%{
        left: 51.5%;
        top: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes Logo_verkleinern{
    0%{
        left: 51.5%;
        top: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100%{
        left: 90%;
        top: 12%;
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0.5;
    }
}


#Overlay_Newsfeld{
    top: 0;
    left: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(100, 100, 100, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 998;
   
    overflow: hidden;
}

#neues_Newsfeld{
    z-index: 999;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 40px;
    width: 70%;
    max-height: 85%;
    min-width: 350px;
    text-align: center;

    /* Effekt schneidet container ab!*/
    clip-path: inset(0 0 100% 0); /* komplett verdeckt > TOP RIGHT BOTTOM LEFT*/
    transition: clip-path 0.5s ease;
    
    border: 4px solid #fa0;
    box-shadow: none;
     
    overflow-x: hidden;
}

@keyframes Verblassen{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

@keyframes Entblassen{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes Newsfeld_erscheinen{
    0%{
        clip-path: inset(0 0 100% 0); /* komplett verdeckt > TOP RIGHT BOTTOM LEFT*/
    }
    2%{
        clip-path: inset(0 0 100% 0); /* komplett verdeckt > TOP RIGHT BOTTOM LEFT*/
    }
    100%{
        clip-path: inset(0 0 0 0); /* komplett sichtbar > TOP RIGHT BOTTOM LEFT*/
    }
}

@keyframes alte_News_erscheinen_Feldplatzreservierung{
    0%{
        height: 0;
    }
    100%{
        
    }
}

@keyframes alte_News_verschwinden_Feldplatzreservierung{
    0%{
       
    }
    100%{
        height: 0px;
    }
}

@keyframes alle_Updates_verschwinden{
    0%{
        clip-path: inset(0 0 0 0); /* komplett verdeckt > TOP RIGHT BOTTOM LEFT*/
    }
    95%{
        clip-path: inset(0 0 100% 0); /* komplett verdeckt > TOP RIGHT BOTTOM LEFT*/
    }
    100%{
        clip-path: inset(0 0 100% 0); /* komplett verdeckt > TOP RIGHT BOTTOM LEFT*/
    }
}



@keyframes Newsfeld_verschwinden{
    0%{
        clip-path: inset(0 0 0 0); /* komplett verdeckt > TOP RIGHT BOTTOM LEFT*/
    }
    50%{
        opacity: 1;
    }
    100%{
        clip-path: inset(0 50% 0 50%); /* komplett sichtbar > TOP RIGHT BOTTOM LEFT*/
        opacity: 0;
    }
}

#button_alle_Infos{
    border-radius: 6px;
    background-color: #FFAF00;
	border: 2px solid black;
	color: #000000;
	text-align: center;
	font-size: 1.45vw;
	padding: 5px;
	transition: all 0.3s;
	font-weight: normal;
	filter: brightness(1);
	transform: scale(1);
}

#button_alle_Infos:hover{
    filter: brightness(0.8);
    transform: scale(1);
}

#button_alle_Infos:active{
    filter: brightness(0.8);
    transform: scale(0.9);
}

#button_Webseite_oeffnen{
    border-radius: 6px;
    background-color: #00AAFF;
	border: 2px solid black;
	color: #000000;
	text-align: center;
	font-size: 1.45vw;
	padding: 5px;
	transition: all 0.3s;
	font-weight: normal;
	filter: brightness(1);
	transform: scale(1);
}

#button_Webseite_oeffnen:hover{
    filter: brightness(0.8);
    transform: scale(1);
}

#button_Webseite_oeffnen:active{
    filter: brightness(0.8);
    transform: scale(0.9);
}

#messagesBox{
    /* Effekt schneidet container ab!*/
    clip-path: inset(0 0 100% 0); /* komplett verdeckt > TOP RIGHT BOTTOM LEFT*/
    transition: none;
}

#ganz_oben_link{
    text-decoration: none;
    color: #0000FF;
}

#ganz_oben_link:hover{
    text-decoration: underline;
}

.Cookies_Text{
    font-size: 1vw;
}

.linke_Spalte_Produktetabelle{
    padding-top: 30px; 
    padding-bottom: 30px; 
    width: 40%; 
    text-align: center;
}

.rechte_Spalte_Produktetabelle{
    padding-top: 10px; 
    padding-bottom: 30px;
    vertical-align: top;
    width: 60%;
}

.Trennlinie_blau{
    width:100%;
    height: 4px;
    background-color: #00A1FF;
}