/* montserrat-300 - latin */
		@font-face {
  				font-family: 'Montserrat';
  				font-style: normal;
  				font-weight: 300;
				font-display: swap;
  				src: local(''),
       				url('resources/fonts/montserrat-v25-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       				url('resources/fonts/montserrat-v25-latin-300.woff') format('woff');
				}
		/* montserrat-600 - latin */
		@font-face {
  				font-family: 'Montserrat';
  				font-style: normal;
  				font-weight: 600;
				font-display: swap;
  				src: local(''),
       				url('resources/fonts/montserrat-v25-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       				url('resources/fonts/montserrat-v25-latin-600.woff') format('woff');
				}
		/* cinzel-decorative-regular - latin */
		@font-face {
  				font-family: 'Cinzel Decorative';
  				font-style: normal;
  				font-weight: 400;
				font-display: swap;
  				src: local(''),
       				url('resources/fonts/cinzel-decorative-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       				url('resources/fonts/cinzel-decorative-v14-latin-regular.woff') format('woff');
				}
		/* cinzel-decorative-regular - latin */
		@font-face {
  				font-family: 'Cinzel Decorative';
  				font-style: normal;
  				font-weight: 400;
				font-display: swap;
  				src: local(''),
       				url('resources/fonts/cinzel-decorative-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       				url('resources/fonts/cinzel-decorative-v14-latin-regular.woff') format('woff');
				}
		/* rajdhani-regular - latin */
		@font-face {
  				font-family: 'Rajdhani';
  				font-style: normal;
  				font-weight: 400;
				font-display: swap;
  				src: local(''),
       				url('resources/fonts/rajdhani-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       				url('resources/fonts/rajdhani-v15-latin-regular.woff') format('woff');
				}
		/*Einstellungen für das mobile Navigationsoverlay*/
		.overlay {	
  				height:	0%;
  				width: 100%;
  				position: fixed;
  				z-index: 1;
  				top: 0;
  				left: 0;
  				background-color: rgb(0,0,0);
  				background-color: rgba(0,0,0, 0.9);
  				overflow-y: hidden;
  				transition: 0.5s;
				}
		/*Inhalte für das mobile Navigationsoverlay*/
		.overlay-content {	
  				position: relative;
  				top: 25%;
  				width: 100%;
  				text-align: center;
  				margin-top: 30px;
				}
		/*Hyperlinks in der dem mobilen Navigationsoverlay*/
		.overlay a {	
  				padding: 8px;
  				text-decoration: none;
  				color: #818181;
  				display: block;
  				transition: 0.3s;
				}
		/*Farbe für das hovern über hyperlinks in dem mobilen Navigationsoverlay*/
		.overlay a:hover, .overlay a:focus {	
  				color: #f1f1f1;
				}
		/*Schließen Button für das mobile Navigationsoverlay*/
		.overlay .closebtn {	
  				position: absolute;
  				top: 20px;
  				right: 45px;
  				font-size: 60px;
				}
		/*styling für die kontakte*/
		.contactstyle {
				padding: 0 18px;
  				display: none;
  				overflow: hidden;
				background-color: #777;
				color: white;
				}
		/*----------------------------------------------------------------------------------------------------*/
		/*Darstellung des overlays bei kleinen Bildschirmen*/
		@media screen and (max-height: 450px) {		
  				.overlay {overflow-y: auto;}
  				.overlay a {font-size: 20px}
  				.overlay .closebtn {
  						font-size: 40px;
  						top: 15px;
  						right: 35px;
  									}
				}
		/*----------------------------------------------------------------------------------------------------*/
		/*'Über uns' Textbox*/
		.uberuns {			
				width: 60%;
   				background-color: white;
				padding-left: 40Px;
				padding-right: 40Px;
				padding-bottom: 40Px;
				box-shadow:0px 0px 50px 15px black;
				border-radius: 0px;
				transition: all 0.3s;
				}
		/*Hintergrund der 'Über uns' Textbox*/
		.abstractbackground {	
				background-image:
					radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
					radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
					radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
					radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
				background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
				background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
				background-attachment: fixed;
				padding-top: 0%;
				padding-bottom: 0%;
				}
		/*Hintergrund der 'Produkte' Textbox*/
		.circuitgraybackground {	
				background-image:
					radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
					radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
					radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
					radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
				background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
				background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
				background-attachment: fixed;
				padding-top: 0%;
				padding-bottom: 0%;
				}
		@keyframes gradient {
			0% {
				background-position: 0% 50%;
				}
			50% {
				background-position: 100% 50%;
				}
			100% {
				background-position: 0% 50%;
				}
			}
		/*Hintergrund der 'Projekte' Textbox*/
		.blackpausebackground {		
				background-image: url("resources/images/blackpause.jpg");
				background-attachment: scroll;
				padding-top: 0%;
				padding-bottom: 0%;
				}
		/*'Kontakt' Textbox*/
		.kontakt {					
				width: 60%;
				box-shadow:0px 0px 50px 15px black;
				transition: 0.3s;
				}
		/*Flex Container für die Kopfzeile, wird häufiger verwendet*/
		.flex-container {			
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				justify-content: space-around;
				align-content: center;
				flex-basis: auto;
				}
		/*Standardattribute für Schrift*/
    	body,td,th {			
				color: #000000;
				font-family: 'Montserrat', sans-serif;
				font-size: 100%;
				}
		/*Schriftgröße für h2 Überschrift*/
		h2 {font-size: 2em;} 	
		/*Standard Absatz Schriftgröße*/
		p {font-size: 1.3em;} 	
		/*Navigationsleiste*/
		header {				
 				top:0px;
 				position:fixed !important;
  				position:absolute;
  				height:110px;
  				width:100%;		
				z-index: 7;		/* setzt Header in den Vordergrund*/
				background-color: rgba(250,250,250,1);
				}
		/*navigationsleiste container positionierung*/
		.navigationsleiste {	
				position: relative;
				}
		/*Textfelder in der Navigationsleiste*/
		.navigationsleiste span {	
				position: absolute;
				bottom: 4px;
				left: 420Px;
				z-index: 5;
				}
		/*Bilder in der Navigationsleiste*/
		.navigationsleiste img {	
				display: block;
				}
		/*Adressinformationen rechts in der Navigationsleiste*/
		.kontaktleiste {	
				position: relative;
				transition: 0.3s;
				}
		/*Text der Adressinformationen*/
		.kontaktleiste span {	
				position: absolute;
				bottom: 3%;
				right: 1%;
				text-align: justify;
				}
		/*Navigationsleiste für mobile Ansicht*/
		.mobilenavigation {		
				position: relative;
				height: 65px;
				line-height: 65px;
				overflow: hidden;
				text-align: center;
				width: 100%;
				margin: 0 auto;
				}
		/*Bilder in der Navleiste für mobile Ansicht*/
		.mobilenavigation img {		
				height: 65px;    
    			margin: 0 -100%;
    			max-width: none;
    			width: auto;
				}
		/*positionierung der mobilen Navleiste*/
		.mobilenav {	
				position: relative;
				}
		/*Textfelder der mobilen Navleiste*/
		.mobilenav span {	
				position: absolute;
				bottom: 30px;
				}
		/*Hintergrund hinter der 'Kontakt' Textbox*/
		.kontakthintergrund {	
				background-image: url("resources/images/halle.jpg");
				background-position: center;
				background-repeat: no-repeat;
				height: 100%;
				background-size: cover;
				background-attachment: fixed;
				z-index: 9;
				padding-top: 0%;
				padding-bottom: 0%;
				}
		/*since 1999 schriftzug im header*/
		.since1999 {
				font-style: italic;
				font-size: 16px;
				color: white;
				position: fixed;
				top: 32px;
				left: 555px;
				}
		/*Trenner zwischen den einzelnen Textboxen*/
		.trennung {		
				/*   background-color: #282E34;   */
				/*   background-image: linear-gradient(to right, rgba(52,72,143,1.00), #282E34);   */
				background-image: linear-gradient(to right, rgba(81,85,132,1.00), rgba(196,198,213,1.00));
				width: 100%;
				text-align: center;
				}
		.bottomline {
				background-image: linear-gradient(to right, rgba(81,85,132,1.00), rgba(196,198,213,1.00));
				}
		/*Blaugraue Buttons*/
		.bluebtn {		
				border: 1px solid rgba(52,72,143,1.00);
				background-color: rgba(164,164,164,0.00);
				color: rgba(52,72,143,1.00);
				padding: 7px 14px;
				font-size: 16px;
				cursor: pointer;
				border-radius: 5px;
				transition: all 0.3s;
				
				}
		/*hover Effekt für blaugraue Buttons*/
		.bluebtn:hover {	
				background-color: rgba(52,72,143,1.00);
				color: rgba(164,164,164,1.00);
				transform-origin: bottom;
				box-shadow: 0px 5px 5px 0px gray;
				transform: translate(0px,-5px);
				-webkit-transform: translate(0px,-5px);
				-moz-transform: translate(0px,-5px);
				-ms-transform: translate(0px,-5px);
				-o-transform: translate(0px,-5px);
				}
		/*schwarzer Homebutton*/
		.homebtn {	
				border: 1px solid #282E34;
				background-color: rgba(250,250,250,1.00);
				color: #282E34;
				padding: 7px 14px;
				font-size: 16px;
				cursor: pointer;
				border-radius: 5px;
				}
		/*Standard Button*/
		.btn {	
  				border: 2px solid #282E34;
  				background-color: white;
  				color: #282E34;
  				padding: 14px 28px;
  				font-size: 16px;
  				cursor: pointer;
				border-radius: 5Px;
				}
		/*Zusatz für schwarze Buttons*/
		.probtn {	
  				border-color: #282E34;
  				color: #282E34;
				transition: all 0.3s;
				}
		/*Hoverzusatz für schwarze Buttons*/
		.probtn:hover { 
  				background-color: #282E34;
  				color: white;
				transform-origin: bottom;
				box-shadow: 0px 5px 5px 0px gray;
				transform: translate(0px,-5px);
				-webkit-transform: translate(0px,-5px);
				-moz-transform: translate(0px,-5px);
				-ms-transform: translate(0px,-5px);
				-o-transform: translate(0px,-5px);
				}
		/*CSS für Button 'unsere kunden'*/
		.kunbtn {	
				border: 0px solid white;
  				background-color: white;
  				color: #282E34;
  				padding: 14px 28px;
  				font-size: 16px;
  				cursor: pointer;
				border-radius: 0Px;
				transition: all 0.3s;
				}
		/*hover effekt für 'unsere kunden' btn*/
		.kunbtn:hover {  
				background-color: #282E34;
  				color: white;
				transform-origin: bottom;
				box-shadow:
    				inset 0 0 60px whitesmoke,
    				inset 20px 0 80px #f0f,
    				inset -20px 0 80px #0ff,
    				inset 20px 0 300px #f0f,
    				inset -20px 0 300px #0ff,
    				0 0 50px #fff,
    				-10px 0 80px #f0f,
    				10px 0 80px #0ff;
				transform: translate(0px,-5px);
				-webkit-transform: translate(0px,-5px);
				-moz-transform: translate(0px,-5px);
				-ms-transform: translate(0px,-5px);
				-o-transform: translate(0px,-5px);
				}
		/*Ausklappen für 'Unser Team' und 'Wegbeschreibung'*/
		.collapsible {	
  				/*   background-color: #777;   */
				background-image: linear-gradient(to right, rgba(81,85,132,1.00), rgba(196,198,213,1.00));
  				color: white;
  				cursor: pointer;
  				padding: 18px;
  				width: 100%;
  				border: none;
  				text-align: left;
  				outline: none;
  				font-size: 15px;
				transition: 0.3s;
				}
		/*Hover Effekt für Ausklappbuttons*/
		.active, .collapsible:hover {	
  				/*   background-color: #555;   */
				background-image: linear-gradient(to right, rgba(61,65,112,1.00), rgba(176,178,193,1.00));
				transition: 0.3s;
				}
		/*Container für Projektbilder*/
		.procontainer {		
  				position: fixed;
  				display: none;
  				width: 100%;
  				height: 100%;
  				top: 0;
  				left: 0;
  				right: 0;
  				bottom: 0;
  				background-color: rgba(0,0,0,0.79);
  				z-index: 8;
  				cursor: pointer;
				padding: 0%;
				}
		/*Projektbilder*/
		.proimg {	
				max-width: 80vw;
				max-height: 80vh;
				display: block;
				-webkit-animation-duration: 0.5s;
            	animation-duration: 0.5s;
            	-webkit-animation-fill-mode: both;
            	animation-fill-mode: both;
				}
		/*CSS Animation Fade*/
		@-webkit-keyframes fadeIn {		
            	0% {opacity: 0;}
            	100% {opacity: 1;}
    		     }
		/*CSS Animation Fade*/
        @keyframes fadeIn {			
            	0% {opacity: 0;}
            	100% {opacity: 1;}
         		}
		/*CSS Animation Fade*/
         .fadeIn {						
            	-webkit-animation-name: fadeIn;
            	animation-name: fadeIn;
				}
		/*mobile projektgalerie ohne interaktion*/
		.mobileprojectpic {
				border-radius: 5px;
				}
		/*Hovereffekt für Projektbilder - Wird auch für Links in den Kontakten verwendet*/
		.imghover {						
				cursor: pointer;
				border-radius: 5px;	
				transition: 0.3s;
				}
		/*zusätzlich für Hovereffekt der Projektbilder*/
		.imghover:hover {				
				opacity: 0.5;
				}
		/*Bildergalerie Projekte*/
		.desktoprow {							
  				display: flex;
  				flex-wrap: wrap;
  				padding: 0 4px;
				}
		/*Bildergalerie Projekte mobile Ansicht*/
		.mobilerow {
				display: flex;
				flex-wrap: wrap;
				padding: 0 4px;
				}
		/*Bildergalerie Projekte*/
		.column {						
  				flex: 25%;
  				max-width: 25%;
  				padding: 0 4px;
				}	
		/*Bildergalerie Projekte - nur bilder*/
		.column img {					
  				margin-top: 8px;
  				vertical-align: middle;
  				width: 100%;
				}
		/*Darstellung für inhalt von klappelement von unser team und wegbeschreibung*/
		.content {					
  				padding: 0 18px;
  				display: none;
  				overflow: hidden;
  				background-color: #f1f1f1;
				}
		/*container für 'Über uns' Text*/
		#moreuberuns {				
				display: none;
				}
		/*container für projektgalerie (die flexbox mit 4 columns à 6/7 rows)*/
		#moreprojekt {				
				display: none;
				}
		/*tag für link gruppen, sollte eigentlich im footer landen, da steht aber ne p*/
		nav {						
  				bottom:0px;
  				height:30%;
  				left:0px;
  				position:absolute;
  				width:100%;
				}
		/*CSS für die Fußzeile*/
		footer {					
  				bottom:0px;
  				position:fixed !important;
  				position:absolute;
  				height:3%;
  				width:100%;
				background-color: grey;
				}
		/*generelles CSS für hyperlinks*/
		.normallink {				
				transition: 0.3s;
				}
		/*CSS für ungeklickte hyperlinks*/
		.normallink a:link {		
				text-decoration: none;
				color: white;
				}
		/*CSS für geklickte hyperlinks*/
		.normallink a:visited {		
				color: white;
				}
		/*CSS für das hovern von hyperlinks*/
		.normallink a:hover {		
				color: black;
				}
		/*Bilder vom Team*/
		.contactimg {				
				width: 25%;
				}
		/*Container für 'unser Team'*/
		.contactbox {								
				justify-content: space-between;
				width: inherit;
				flex-grow: 1;
				}
		/*Gleichheit der Breite von Bildern und Textboxen in 'unser Team' Container*/
		.contactboth {								
				width: 25%;
				}
		/*ungeklickte hyperlinks in der Kontaktleiste*/
		.kontaktleiste a:link {						
				text-decoration: none;
				color: black;
				}
		/*geklickte hyperlinks in der kontaktleiste*/
		.kontaktleiste a:visited {					
				color: black;
				}
		/*hyperlink hover in der kontaktleiste*/
		.kontaktleiste a:hover {					
				color: cornflowerblue;
				}
		/*CSS für ungeklickte hyperlinks in der Kontaktbox*/
		.kontakt a:link {							
				text-decoration: none;
				color: black;
				}
		/*CSS für geklickte hyperlinks in der Kontaktbox*/
		.kontakt a:visited {						
				color: black;
				}
		/*CSS für hovern über hyperlinks in der Kontaktbox*/
		.kontakt a:hover {							
				color: cornflowerblue;
				}
		/*ist jetzt der tatsächliche homescreen, desktop version. Hier CSS und gitter layout*/
		.homescreen2 {								
				display: grid;
				grid-gap: 0px;
				width: 100%;
				height: 100vh;
				padding-top: 110px;
				background-color: rgba(250,250,250,1.00);
				background-image: url("resources/images/lowreshomebg.png");
				background-repeat: repeat;
				grid-template-columns: 	repeat(31, 1fr);
				grid-template-rows: repeat(17, 1fr);
				}
		/*CSS für normalzustand der 6 Bilder auf dem homescreen*/
		.hometransition {							
				transition: 0.5s;
				box-shadow: 0 0 20px 10px gray;
				background-clip: content-box;
				}
		/*generelle Einstellungen für homescreen bilder*/
		.homeimgbase {
				background-size: cover;
				background-position: center;
				background-color: rgba(222,222,222,1.00);
				border-radius: 5%;
				filter: grayscale(100%);
				}
		/*hovereffekt für die homescreen bilder*/
		.homeimgbase:hover {							
				transform: scale(1.1);
				box-shadow:
    				0 0 50px #fff,
    				-10px 0 80px #f0f,
    				10px 0 80px #0ff;
				filter: grayscale(0%);
				}
		/*erstes Bild - homescreen - positionierung, styling und Bild*/
		.homeimg01 {								
				grid-column-start: 10;
				grid-column-end: 15;
				grid-row-start: 3;
				grid-row-end: 7;
				background-image: url("resources/homescreen/homeimg01/lowreshomeimg01.webp");
				}
		/*positionierung des zugehörigen textes*/
		.hometext01 {								
				grid-column-start: 10;
				grid-column-end: 15;
				grid-row-start: 7;
				grid-row-end: 8;
				text-align: center;
				}
		/*zweites Bild - homescreen - positionierung, styling und Bild*/
		.homeimg02 {								
				grid-column-start: 21;
				grid-column-end: 26;
				grid-row-start: 4;
				grid-row-end: 8;
				background-image: url("resources/homescreen/homeimg02/lowreshomeimg02.webp");
				}
		/*positionierung des zugehörigen textes*/
		.hometext02 {								
				grid-column-start: 21;
				grid-column-end: 26;
				grid-row-start: 8;
				grid-row-end: 9;
				text-align: center;
				}
		/*drittes Bild - homescreen - positionierung, styling und Bild*/
		.homeimg03 {								
				grid-column-start: 2;
				grid-column-end: 7;
				grid-row-start: 6;
				grid-row-end: 10;
				background-image: url("resources/homescreen/homeimg03/lowreshomeimg03.webp");
				}
		/*positionierung des zugehörigen textes*/
		.hometext03 {								
				grid-column-start: 2;
				grid-column-end: 7;
				grid-row-start: 10;
				grid-row-end: 11;
				text-align: center;
				}
		/*viertes Bild - homescreen - positionierung, styling und Bild*/
		.homeimg04 {								
				grid-column-start: 26;
				grid-column-end: 31;
				grid-row-start: 9;
				grid-row-end: 13;
				background-image: url("resources/homescreen/homeimg04/lowreshomeimg04.webp");
				}
		/*positionierung des zugehörigen textes*/
		.hometext04 {								
				grid-column-start: 26;
				grid-column-end: 31;
				grid-row-start: 13;
				grid-row-end: 14;
				text-align: center;
				}
		/*fünftes Bild - homescreen - positionierung, styling und Bild*/
		.homeimg05 {								
				grid-column-start: 7;
				grid-column-end: 12;
				grid-row-start: 11;
				grid-row-end: 15;
				background-image: url("resources/homescreen/homeimg05/lowreshomeimg05.webp");
				}
		/*positionierung des zugehörigen textes*/
		.hometext05 {								
				grid-column-start: 7;
				grid-column-end: 12;
				grid-row-start: 15;
				grid-row-end: 16;
				text-align: center;
				}
		/*sechstes Bild - homescreen - positionierung, styling und Bild*/
		.homeimg06 {								
				grid-column-start: 18;
				grid-column-end: 23;
				grid-row-start: 12;
				grid-row-end: 16;
				background-image: url("resources/homescreen/homeimg06/lowreshomeimg06.webp");
				}
		/*positionierung des zugehörigen textes*/
		.hometext06 {								
				grid-column-start: 18;
				grid-column-end: 23;
				grid-row-start: 16;
				grid-row-end: 17;
				text-align: center;
				}
		/*positionierung für den Text in der Mitte des Homescreens, desktop variante*/
		.homeheadline {								
				grid-column-start: 13;
				grid-column-end: 20;
				grid-row-start: 8;
				grid-row-end: 10;
				text-align: center;
				}
		/*mobile Variante des Homescreens, ebenfalls gitter, aber nur 6*1*/
		.homescreen3 {								
				display: grid;
				grid-gap: 0px;
				width: 100%;
				height: 100vh;
				padding-top: 65px;
				background-color: rgba(250,250,250,1.00);
				grid-template-columns: 	repeat(1, 1fr);
				grid-template-rows: repeat(6, 1fr);
				}
		/*buttons auf dem mobilen homescreen*/
		.home3button {								
				padding-left: 15px;
				border: 4px solid gray;
				transition: 0.3s;
				justify-content: space-between;
				flex-wrap: nowrap;
				}
		/*generelle einstellungen für mobilen homescreen*/
		.h30common {
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
				height: 100%;
				width: 50%;
				border-bottom-left-radius: 50%;
				border-top-left-radius: 50%;
				}
		/*erstes Bild- CSS styling - hintergrundbild*/
		.h301b {									
				background-image: url("resources/homescreen/homeimg01/homeimg01.webp");
				}
		/*zweites Bild- CSS styling - hintergrundbild*/
		.h302b {									
				background-image: url("resources/homescreen/homeimg02/homeimg02.webp");
				}
		/*drittes Bild- CSS styling - hintergrundbild*/
		.h303b {									
				background-image: url("resources/homescreen/homeimg03/homeimg03.webp");
				}
		/*viertes Bild- CSS styling - hintergrundbild*/
		.h304b {									
				background-image: url("resources/homescreen/homeimg04/homeimg04.webp");
				}
		/*fünftes Bild- CSS styling - hintergrundbild*/
		.h305b {									
				background-image: url("resources/homescreen/homeimg05/homeimg05.webp");
				}
		/*sechstes Bild- CSS styling - hintergrundbild*/
		.h306b {									
				background-image: url("resources/homescreen/homeimg06/homeimg06.webp");
				}
		/*hiermit werden die Texte versteckt, die beim hovern auf den Bildern des Desktop homescreen erscheinen*/
		.hidden {									
				display: none;
				}
		/*hover über showtell class (die bilder auf dem desktop homescreen) bewirkt CSS styling bei hidden class, dadurch fadein*/
		.showtell:hover + .hidden {					
				display: block;
				color: white;
				-webkit-animation: fadeIn 1s;
    			animation: fadeIn 1s;
				}
		/*hovertext für das erste Bild auf dem desktop homescreen*/
		#absolutdescription01 {						
				position: absolute;
				width: 100%;
				text-align: center;
				height: 7%;
				background-color: rgba(255,255,255,0.7);
				z-index: 5;
				bottom: 0px;
				box-shadow: 0px -15px 10px 15px rgba(255,255,255,0.7);
				}
		/*hovertext für das zweite Bild auf dem desktop homescreen*/
		#absolutdescription02 {						
				position: absolute;
				width: 100%;
				text-align: center;
				height: 7%;
				background-color: rgba(255,255,255,0.7);
				z-index: 5;
				bottom: 0px;
				box-shadow: 0px -15px 10px 15px rgba(255,255,255,0.7);
				}
		/*hovertext für das dritte Bild auf dem desktop homescreen*/
		#absolutdescription03 {						
				position: absolute;
				width: 100%;
				text-align: center;
				height: 7%;
				background-color: rgba(255,255,255,0.7);
				z-index: 5;
				bottom: 0px;
				box-shadow: 0px -15px 10px 15px rgba(255,255,255,0.7);
				}
		/*hovertext für das vierte Bild auf dem desktop homescreen*/
		#absolutdescription04 {						
				position: absolute;
				width: 100%;
				text-align: center;
				height: 7%;
				background-color: rgba(255,255,255,0.7);
				z-index: 5;
				bottom: 0px;
				box-shadow: 0px -15px 10px 15px rgba(255,255,255,0.7);
				}
		/*hovertext für das fünfte Bild auf dem desktop homescreen*/
		#absolutdescription05 {						
				position: absolute;
				width: 100%;
				text-align: center;
				height: 7%;
				background-color: rgba(255,255,255,0.7);
				z-index: 5;
				bottom: 0px;
				box-shadow: 0px -15px 10px 15px rgba(255,255,255,0.7);
				}
		/*hovertext für das sechste Bild auf dem desktop homescreen*/
		#absolutdescription06 {						
				position: absolute;
				width: 100%;
				text-align: center;
				height: 7%;
				background-color: rgba(255,255,255,0.7);
				z-index: 5;
				bottom: 0px;
				box-shadow: 0px -15px 10px 15px rgba(255,255,255,0.7);
				}
		/*iframe für die hovertexte auf dem desktop homescreen*/
		.htiframebottom {							
				width: 100%;
				position: absolute;
				bottom: 0px;
				left: 0px;
				height: 100%;
				}
		/*position der pfeile in der projektbildanzeige*/
		.iconpos {									
				margin-top: 45vh;
				}
		/*animation für linken pfeil der projektbildanzeige*/
		.leftarrow {								
				animation-duration: 1s;
    			animation-iteration-count: infinite;
				}
		/*hovereffekt für linken pfeil*/
		.leftarrow:hover {							
				animation-name: wobble;
				}
		/*animation für rechten pfeil der projektbildanzeige*/
		.rightarrow {								
				animation-duration: 1s;
    			animation-iteration-count: infinite;
				}
		/*hovereffekt für rechten pfeil*/
		.rightarrow:hover {							
				animation-name: wobble;
				}
		/*animation für hovereffekt der pfeile*/
		@keyframes wobble {							
				0% {opacity: 1;}
				50% {opacity: 0.3;}
				100% {opacity: 1;}
				}
		/*knockout text styling für 'Kompetenz'*/
		.knockout {
				text-align: center;
				font-size: 40px;
  				color: white;
  				font-weight: bold;
  				margin: 0;
  				padding: 30px;
  				mix-blend-mode: multiply;
  				text-shadow: 5px 4px 11px rgb(0,0,0), 0 2px 5px rgb(0,0,0);
				transition: 0.3s;
				}
		
		.anja {
				filter: grayscale(100%);
				}
		/*footer wird aus der scrollhöhe der website entfernt?*/
		* html footer {											
  				top:expression(documentElement.clientHeight+documentElement.scrollTop-48+'px');
				}
		/*Keinen Dunst was das ist, any-operator? Vermutlich global setting*/
		* {
  				box-sizing: border-box;
				}
		.reiter {
			background-color: rgba(250,250,250,1);
			position: fixed;
			top: 110px;
			height: 64px;
			width: 100%;
			z-index: 8;
			padding-top: 2px;
				}
		.schrankimg {
			width: 30%;
			border-radius: 8px;
		}
		.schranktext {
			width: 50%;
		}
		.schrankframe {
			width: 100%;
			height: 90%;
		}
		.bandimgcontainer{
			width: 60%;
		}
		.bandimg {
			width: 100%;
		}
		.bandimg:hover {
			box-shadow: inset 0px 0px 3px 3px lightgreen, 0px 0px 3px 3px lightgreen !important;
		}
		.bandtext {
			width: 30%;
		}
		.switchbtn {
			border: 1px solid #282E34;
			background-color: rgba(250,250,250,1.00);
			color: #282E34;
			padding: 7px 14px;
			font-size: 16px;
			cursor: pointer;
			border-radius: 5px;
			border-color: #282E34;
			transition: all 0.3s;
			width: 12%;
			height: 60px;
		}
		.activebutton {
			border: 1px solid #282E34;
			background-color: rgba(100,100,200,0.50);
			color: #282E34;
			padding: 7px 14px;
			font-size: 16px;
			cursor: pointer;
			border-radius: 5px;
			border-color: #282E34;
			transition: all 0.3s;
			width: 12%;
			height: 60px;
		}
		.switchdot {
			border: 1px solid #282E34;
			background-color: red;
			color: #282E34;
			font-size: 16px;
			cursor: pointer;
			border-radius: 2px;
			border-color: #282E34;
			transition: all 0.3s;
			width: 12%;
			height: 100%;
		}
		.reiterdot {
			background-color: rgba(250,0,0,0.00);
			position: fixed;
			top: 174px;
			height: 4px;
			width: 100%;
			z-index: 8;
			padding-top: 2px;
		}
		.switchbtn:hover {
  			background-color: #282E34;
  			color: white;
			transform-origin: bottom;
			box-shadow: 0px 5px 5px 0px gray;
			transform: translate(0px,-5px);
			-webkit-transform: translate(0px,-5px);
			-moz-transform: translate(0px,-5px);
			-ms-transform: translate(0px,-5px);
			-o-transform: translate(0px,-5px);
		}
		.activebutton:hover {
  			background-color: #282E34;
  			color: white;
			transform-origin: bottom;
			box-shadow: 0px 5px 5px 0px gray;
			transform: translate(0px,-5px);
			-webkit-transform: translate(0px,-5px);
			-moz-transform: translate(0px,-5px);
			-ms-transform: translate(0px,-5px);
			-o-transform: translate(0px,-5px);
		}
		.dropswitch {
			width: 50%;
			height: 4vh;
			margin-left: 25%;
			position: fixed;
			top: 70px;
			z-index: 7;
			cursor: pointer;
			background-color: dimgray;
			color: white;
		}
		.rohrdiashow {
			height:300px;
			border-radius: 15px;
			Display:none;
		}
		.flexdevtool {
			border: 3px solid red;
		}
		.pictureflex {
			max-height: 300px;
			width:30%;
			border-radius: 15px;
			padding-bottom: 5px;
			padding-top: 5px;
		}
		.opt {
			background-color: black;
			text-align: center;
		}
		.getwide {
			
		}
		.carousel {
			position: relative;
			width: 900px;
			height: 650px;
		}
		.slide {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 280px;
			height: 375px;
			object-fit: cover;
			border-radius: 12px;
			box-shadow: 0 20px 40px rgba(0,0,0,0.4);
			
			transition: 
				transform 0.9s ease,
				opacity 0.9s ease;
			transform-style: preserve-3d;
		}
		.nvcenter {
			transform: 
				translate(-50%, -50%)
				translateX(0)
				scale(1.3)
				rotateY(0deg);
			z-index: 3;
			opacity: 1;
			filter: none;
			box-shadow: 0 35px 80px rgba(0,0,0,0.55);
		}
		.nvleft {
			transform: 
				translate(-50%, -50%)
				translateX(-280px)
				scale(0.8)
				rotateY(15deg);
			z-index: 2;
			opacity: 0.7;
			filter: brightness(0.85) blur(0.5px);
			box-shadow: 0 20px 40px rgba(0,0,0,0.4);
		}
		.nvright {
			transform: 
				translate(-50%, -50%)
				translateX(280px)
				scale(0.8)
				rotateY(-15deg);
			z-index: 2;
			opacity: 0.7;
			filter: brightness(0.85) blur(0.5px);
			box-shadow: 0 20px 40px rgba(0,0,0,0.4);
		}
		.nvfarleft {
    		transform:
        		translate(-50%, -50%)
        		translateX(-500px)
        		scale(0.6)
        		rotateY(65deg);

    		z-index: 1;
    		opacity: 0;
		}

		.nvfarright {
    		transform:
        		translate(-50%, -50%)
        		translateX(500px)
        		scale(0.6)
        		rotateY(-65deg);

    		z-index: 1;
    		opacity: 0;
		}