/* CSS Document */


	
	/*schrift importieren*/
	@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
	
/* css variablen */
		:root {
			--hell: aliceblue; /*Schrift*/
			--akzent: rgba(214,104,83,1); /*hellesorange*/
			--akzentdunkel: rgba(125,78,87,1);/*staubiger rotton*/
			--mittel: rgba(54,65,86,1); /*Nachtblau*/
			--halbdunkel: rgba(17,21,28,1);/*blauschwarz*/
			--dunkel: rgba(0,0,0,1);/*schwarz*/
			
			/*Abstände, effekte*/
			--abrunden: 0.5rem;
			--aufblasen: scale(1.2);
		}

/*grundlagen reset*/
	* {
		padding: 0;
		margin:0;
		box-sizing: border-box;
		scroll-behavior: smooth;
	}
	
	
	/*hier beginnt das design*/

    
	
	a{
		color:var(--hell);
		font-family: 'poppins';
		font-weight: normal;
		text-decoration: none;
	}
	
	a:link {
		color:var(--hell);
		font-weight: normal;
		text-decoration: none;
		transition: all 0.5s ease-in-out;
	}
	
	a:visited {
		color:var(--hell);
	}
	
	a:hover {
		color:var(--akzentdunkel);
		font-weight: normal;
		text-decoration: none;
		transition: all 0.2s ease-in-out;
	}
	
	a:active {
		color:var(--akzentdunkel);
		font-weight: normal;
		text-decoration: none;
	}
	
	
	/**/
	header {
    	background-image: url("bilder/jpeg/prismafoto1.jpg");
		background-size: cover;
		background-position: right center;
		color: var(--hell);
		width: auto;
		position:relative;
		height: 100vh;
		display:flex;
		flex-wrap:wrap;		
}
.headerportfolio {
	background-image: url("bilder/jpeg/p7.jpg");
	background-size: cover;
		background-position: top center;
		color: var(--hell);
		width: auto;
		position:relative;
		height: 100vh;
		display:flex;
		flex-wrap:wrap;	
}

.headerangebot {
	background-image: url("bilder/jpeg/p3.jpg");
	background-size: cover;
		background-position: bottom center;
		color: var(--hell);
		width: auto;
		position:relative;
		height: 100vh;
		display:flex;
		flex-wrap:wrap;	
}
.headerkontakt{
	background-image: url("bilder/jpeg/p4.jpg");
	background-size: cover;
		background-position: right center;
		color: var(--hell);
		width: auto;
		position:relative;
		height: 100vh;
		display:flex;
		flex-wrap:wrap;	
}

.headerprisma{
	background-image: url("bilder/jpeg/p5.jpg");
	background-size: cover;
		background-position: right center;
		color: var(--hell);
		width: auto;
		position:relative;
		height: 100vh;
		display:flex;
		flex-wrap:wrap;	
}


	.logocontainer {
 
  width: 10rem;
  height: 10rem;
  position: absolute;
  top: 0;
  right: 1rem;
  overflow: visible; /* Wichtig für Überlappungen */
}

.dreiecksvg {
  display:block;
}

.dreiecksvg svg {
  position:absolute;
  width: 60%; /* Größere Breite für stärkere Überlappung */
  height: auto;
  transition: all 0.3s;
  
  
}

/* Individuelle Anpassungen pro Ebene */
#ebene_1 {
  z-index: 3;
  transform: translateX(25%) translateY(30%);
}
 
#ebene_2 {
  z-index: 2;
  transform: translateX(41%) translateY(19%); 
  
}

#ebene_3 {
  z-index: 1;
  transform: translateX(55%) translateY(10%); 
	
}

/*.dreiecksvg svg:hover {
  transform: 
    translateX(-15%) 
    translateY(20%) 
    scale(1.1) 
    rotate(15deg);
  filter: drop-shadow(0 0 12px #f0f8ff);
}*/

	/*header h1 {
		width: 100%;
		font-family: 'poppins';
		font-size: clamp(8rem, 12vw, 35rem);
		position: absolute;
		left: 5vw;
		bottom: 16vw;
	}*/
	header a {	
		padding-left: 5vw;
	}
/*==================================================*/
/*=============Animation h1=========================*/
/*==================================================*/

.animate{
	
	position: absolute;
	top: 10vh;
	font-size: clamp(8rem, 5vw, 20rem);
	padding-left: 5.5vw;
	color:var(--hell);
	width: 100%;
	font-family: 'poppins';
	
}

.animate span {
	display: inline-block;
}

.animate span:nth-of-type(2) {
	animation-delay: .05s;
}
.animate span:nth-of-type(3) {
	animation-delay: .1s;
}
.animate span:nth-of-type(4) {
	animation-delay: .15s;
}
.animate span:nth-of-type(5) {
	animation-delay: .2s;
}
.animate span:nth-of-type(6) {
	animation-delay: .25s;
}
.animate span:nth-of-type(7) {
	animation-delay: .3s;
}
.animate span:nth-of-type(8) {
	animation-delay: .35s;
}
.animate span:nth-of-type(9) {
	animation-delay: .4s;
}
.animate span:nth-of-type(10) {
	animation-delay: .45s;
}
.animate span:nth-of-type(11) {
	animation-delay: .5s;
}
.animate span:nth-of-type(12) {
	animation-delay: .55s;
}

	.three span {
		
	opacity: 0;
	transform: translate(-300px, 0) scale(0);
	animation: sideSlide .5s forwards;
}

@keyframes sideSlide {
	60% {
		transform: translate(20px, 0) scale(1);
		
	}

	80% {
		transform: translate(20px, 0) scale(1);
		
	}

	99% {
		transform: translate(0) scale(1.2);
		
	}

	100% {
		transform: translate(0) scale(1);
		opacity: 1;
		
	}
}

/*ende animation h1*/
header {
  position: relative;
}

nav {
  display: flex;
  gap: 1.5rem;
}
#menu-toggle {
	display:none;
}

.menu-icon {
  display: none;
  flex-direction: column;
  width: 32px;
  cursor: pointer;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

.menu-icon span {
  width:35px;
  height: 4px;
  background: var(--hell); 
  margin: 5px 0;
  border-radius: 2px;
  transition: 0.3s;
}



	header nav {
		font-size: 1.3rem;
		font-family: 'poppins';
		color:var(--hell);
		padding-top:1rem;
		width:100%;
		justify-content: flex-start;
		z-index: 444;
	}	

	.aktives_menu {
		color: var(--akzentdunkel)!important;
	}
	

		

	body{
		background-color: var(--dunkel);
		font-family: 'poppins';
		font-size: 15px;
	}
	
	footer{
		padding: 3rem 5rem;
		color:var(--hell);
		font-size: 16px;
	}
	
	p {
		color: var(--hell);
		font-family: 'poppins';
		font-weight: 200;
		font-size:clamp(1rem, 3vw, 1.2rem);
	}
	
	h2, h3 {
		color: var(--hell);
		font-family: 'poppins';	
		font-weight: 200;
		font-size: 3rem;
		}
		
	h5 {
		color: var(--hell);
		font-family: 'poppins';	
		font-weight: 200;
		font-size: 2rem;
		}
		
	section {
		padding: 10rem 5vw;
		display: grid;
		place-items: center;
		gap: 60px;
		background-color: var(--dunkel);
		}
	section > * {
		max-width: 1400px;
		width: 100%;
		gap: 60px;
		}
	.bg-darkGray {
			background-color: var(--halbdunkel);
		}


/*==========================Buttons==========================*/
	.cta_button{
		background-color: var(--akzent);
		padding:0.3rem 0.6rem;
		border-radius: 0.5rem;
		display:inline-block;
		margin-top:.5rem;
		transition:all ease-in-out 0.4s;
		}
		
	.cta_button:hover {
		background: var(--akzentdunkel);
		color:var(--hell);
		transform:var(--aufblasen);
		transition:all ease-in-out 0.6s;
		}

		
	.cta_button2{
		background: var(--akzent);
		color:var(--hell);
		padding:0.8rem 1.5rem;
		border-radius: 0.5rem;
		display:inline-block;
		transition:all ease-in-out 0.4s;
		}
	.cta_button2:hover {
		background: var(--akzentdunkel);
		color:var(--hell);
		transform:var(--aufblasen);
		transition:all ease-in-out 0.6s;
		}

/*Panel Buttons*/

#paket1, #paket2, #paket3 {
			
			position:fixed;
			left:1rem;
			right:1rem;
			top:1rem;
			width:80%;
			height:80vh;
			margin:0 auto; /*zum zentrieren*/
			background:rgba(1,1,1,0.8);
			padding:2rem;
			
			
			display:none;
		}
	
   /*totop button*/
	#totop {
		width: 5rem;
		padding:1rem;
		position:fixed;
		right:0;
		bottom:0;
		margin:1rem;
		border-radius: 1rem;
		z-index:555;
		opacity: 0; 
		}
   .anim_schweben {
			animation:hupfen 1s ease-in-out infinite;
		}
		@keyframes hupfen {
			0% {
				transform:translateY(-0) scaleY(0.8);
			}
			10% {
			transform:translateY(-1rem) scaleY(0.9);	
			}
			20% {
			transform:translateY(-1rem) scaleY(1);	
			}
			
			40%{
				transform:translateY(0 scaleY(0.8));
			}
				
			100% {
				transform:translateY(0) scaleY(0.8);	
			
			}
		}
	.anim_schweben:hover {
			animation:none;
			transition: ease-in-out 0.5s;
		}
		
       

	/*================Vorstellungstext übers prisma=================*/
	

	
	.textbildfeld {
			display:flex;
			flex-wrap:wrap;
			justify-content: space-between;
			
	}
	
	.textfeld {
			/*margin-left: 10vh;
			padding: 1rem 1rem 1rem 1rem;
			width: 50%;*/
			text-align:left;
		
	}
	.textfeld p {
			max-width: 50ch;
			
	}

	
	.bildfeldrechts {
			width: 50%;
			justify-content: center;
			align-items: center;
		
	}
	
	.bildfeldrechts figure img {
			
			width:100%;
			height:100%;
			object-fit:cover;
	}
	
	
	.flex_reverse {
		
			flex-direction: row-reverse;
	}
/*==========panels Angebot==========*/

	.columns-3 {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
		gap: 30px;
		margin-top: 50px;
	}

	.columns-3 article figure img {
		width: 100%;
		aspect-ratio: 1 / 1;
		overflow: hidden;
	}
	.columns-3 article {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.columns-3 article .cta_button {
		width: fit-content;
	}




/*=========Section mit Hintergrundbild formen=========*/
		
	#stoerer {
		background-image:url("bilder/hintergrund3.jpg"); 
		box-shadow: 10px 10px 30px black inset;
		object-fit: cover;
		align-items: center;
		height: 40vh;
		margin-top: 30vh;
	}
		
	.zitat p {
		text-align:center;
		text-align-last: center;
		justify-content:center;
		align-items:center;
		font-size: clamp(0.8rem, 3vw, 2.5rem);
		font-weight: 400;
		font-style: italic;
		padding:0 3rem;
	}
			
	.zentriert{
		display:flex;
		justify-content: center;
		align-items: center;	
	}	
			 
	.zentrierteselement{
		width:100%;
	}	
		
		
		
		
			
	
/* fancybox css anpassen (überschreiben)*/

	
	.fancybox__caption {
		color:var(--hell);
		font-size:1.5rem;
		font-family: 'poppins', sans-serif;
		font-weight: 100;
	}

	.fancybox__caption:after {
		content: "| alle Fotos ©Liza Gerber"
	}		
	#bildcontainer2 {
		display: flex;
		height: auto;
		justify-content:center;
		flex-wrap:wrap;
			
	}
	#bildcontainer2 img {
		width:100%;
		margin-right: 0.3rem;
		margin-bottom: 0.3rem;
		object-fit: cover;
	}
	
		
	
		
		
	/*=====================Carousel=================================*/
		
	#myCarousel {
  	--f-carousel-slide-height: 100%;
  	--f-carousel-spacing: 10px;
	max-width: 1200px;
	margin:0 auto;
  	height: 600px;
	color: var(--hell);
	text-align: center;
	}
		
	#myCarousel img	{
		height: 100%;
		align-content: center;
		margin:0 auto;
		
		}
		
	.f-carousel__slide {
		
		margin:0 auto;
		justify-content: center;
			
		}	
		
		
		
		
/*================Logoauflistung================*/		
 
	#bildcontainer3 {
		max-width: 600px;
		margin: 0 auto;
		}	
		
	.logotextfeld {
		
		display:flex;
		flex:wrap;
				
		}
	.textfeld3{
		padding: 6vh;
		margin: 0 auto;
		text-align: center;
		}
	.bildfeldrechts3 {
			
		width: 50%;
		justify-content: center;
		align-items: center;
		
	}
		
	.bildfeldrechts3 figure img {
			
		object-fit: cover;
		width:100%;
		}




/*================Portfolio================*/

		.filterportfolio{
			display:flex;
			flex-wrap:wrap;
			margin-top:1rem;
			justify-content: center;
		}
		.filterportfolio button{
			font-size: 20px;
			margin-right:1rem;
			cursor:pointer;
			background:var(--akzent);
			
			border-radius:0.5rem;
			width: auto;
			padding: 0rem 0.5rem;
			transition:all ease-in-out 0.4s;
		}
.filterportfolio button:hover{
			background:var(--akzentdunkel);		
			transform:var(--aufblasen);
			transition:all ease-in-out 0.6s;
			
		}
		.bilderportfolio{
			display:flex;
			flex-wrap:wrap;
			gap:0.5rem;
			justify-content:center;
			margin-top:1rem;
		}
		.bilderportfolio figure{
			width:18%;
			aspect-ratio:1/1;
			overflow: hidden;
			border-radius:0.3rem;
		}
		.bilderportfolio figure:hover img{
			transform:var(--aufblasen);
			transition:all ease-in-out 0.6s;
			opacity:0.4;
		}
		.bilderportfolio img {
			object-fit: cover;
			object-position: center ;
			width:100%;
			height:100%;	
			transition:all ease-in-out 0.4s;	
		}
		.visible {
			display:block;
		}
		
		.aktiver_filter {
			background:aliceblue!important;
			color:indianred!important;
			}




/*================Formular================*/		
		.formularfeld{
			background-color: transparent;
			border: none;
			border-bottom: 1px solid aliceblue;
			color: var(--hell);
			font-size: 1.5rem;
			font-family: 'poppins';
			font-weight:300;
			outline: 0 transparent;
			}

		.formularfeld_text{
	     	background-color: transparent;
			border: 1px solid aliceblue;
			color: white;
			font-size: 1.5rem;
			font-family: 'poppins';
			font-weight:300;
			margin: 2rem 0 1rem 0;
			padding-left: 0.5rem;
			outline: 0 transparent;
			width: 800px;
			}


 /*Hier neue Variante selektor zu stylen*/

.custom-select {
  position: relative;
  width: 440px;
  margin-top: 50px;
  
}

.selected-option {
  background-color: var(--dunkel);
  padding: 10px;
  border-top: 1px solid var(--hell);
  cursor: pointer;
}

.options {
  display: none; /* Standardmäßig versteckt */
  position: absolute;
  background-color: var(--dunkel);
	color: var(--hell);
  width: 440px;
  border: 1px solid var(--hell);
	padding: 10px;
	font-family: 'poppins';
	font-size: 1rem;
	font-weight: 300;
 
 
}

.options li {
  padding: 10px;
  list-style-type: none;
	
}

.options li:hover {
  background-color: var(--mittel);
	color: var(--hell);
  
}

	.linkbutton_formular{
			background: var(--akzent);
			color:var(--hell);
			font-family: 'poppins';
			font-size: 18px;
			font-weight:300;
			padding:5px;
			border-radius: 0.5rem;
			transition: all ease-in-out 0.4s;
			
			}
	.linkbutton_formular:hover{
		background:var(--akzentdunkel);
		color:var(--hell);
		padding:10px;
		transform:var(--aufblasen);
		transition:all ease-in-out 0.6s;;
		}
	.nebeneinander{
		display:flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap:50px;
		padding-top: 50px;
		}
		
/*================Impressum und datenschutz================*/
		#impressum, #datenschutz {
			
			position:fixed;
			left:1rem;
			right:1rem;
			top:1rem;
			width:80%;
			height:80vh;
			margin:0 auto; /*zum zentrieren*/
			background:rgba(1,1,1,0.8);
			padding:2rem;
			overflow-x:hidden; /*Wenn mit x ist das ein scrollbalken vertikal*/
			
			display:none;
		}
		
		/*diese klasse zeigt dann ein element an*/
		.showelement {
			display:block !important;
		}
		
		button {
		background-color: var(--dunkel);
		color:var(--hell);
		border: none;
		font-family: 'poppins';
		font-weight: normal;
		font-size: 16px;
		}

		.toggle_button {
			cursor:pointer;
			
		}
		
		.schliessen_button {
			position:absolute;
			top:1rem;
			right:1rem;
			color: var(--hell);
			width: 3rem;
			aspect-ratio:1/1;
			display:flex;
			justify-content: center;
			align-items: center;
			font-size: 3rem;
		}
		
			
		.schliessen_button .fa {
			pointer-events: none;	
		}
/*================================================================================*/
/*================================================================================*/
/*================================================================================*/
/*================================================================================*/
/*================================================================================*/
/*================================================================================*/
/*================================================================================*/




/*ein breakpoint fuer responsive design fürs erste auf Handy 
320 Pixel: Smartphones im Hochformat
480 Pixel: Ein kleines Display, ebenfalls Smartphones Querformat
600 Pixel: kleinere Tablets
768 Pixel: Tablet, z.B. iPad, im Hochformat
1024 Pixel: iPad im Querformat und einige Laptops*/

/*IPads quer und kleine Laptops*/
@media screen and (max-width:1024px){
	
	section {
		display:block;
		padding: 6rem 5vw;
		
	}
	.columns-3{
		margin-bottom:50px;
	}
	#stoerer {
		
		margin: 10vh 0;
	}
	
	.logocontainer {
  
  width: clamp(8rem, 10vw, 35rem);
  height: 20rem;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible; /* Wichtig für Überlappungen */
}
	
	.animate{
		top: 10rem;
		font-size:clamp(2rem, 10vw, 15rem);
	flex-wrap:nowrap;
	}
	
	

	
	/* Hamburger-Menu nur auf kleinen Bildschirmen anzeigen */

  nav {
    display: none;
    flex-direction: column;
    background: #222;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    padding: 1rem;
    z-index: 1;
  }
  .menu-icon {
    display: flex;
	margin-right: 20px;
	Margin-top: 10px;
  }


  #menu-toggle:checked + .menu-icon + nav {
    display: flex;
	  
  }
	
	.bildfeldrechts {
			width: 100%;	
	}

	
	h2, h3 {
		color: var(--hell);
		font-family: 'poppins';	
		font-weight: 200;
		font-size: 3rem;
		margin:1rem 0;
		}
		
	h5 {
		color: var(--hell);
		font-family: 'poppins';	
		font-weight: 200;
		font-size: 2rem;
		}
	
	p {
		margin: 1rem 0;
	}

.filterportfolio{
			flex-direction: column;
		}
	
	#myCarousel {
	width: 800px;
	height: 300px;
	
	}


	#bildcontainer3 {
		max-width: 900px;
		
		}	
		
	.logotextfeld {
		flex-direction:column;
				
		}
	
	.textfeld3 {
		flex-direction:column;
			
	}
	
	.textfeld3 h2{
		font-size: 1rem;
		
		}
	
	.zentrierteselement{
		width:60%;
	}
	
	.zitat {
		width: 100%;
	}
	
	form {
		margin-top:1rem;
	}
	
.custom-select {
  position: relative;
  width: 440px;
  margin-top: 50px;
  
}

.selected-option {
  display:none;
  background-color: var(--dunkel);
  padding: 10px;
  border-top: 1px solid var(--hell);
  cursor: pointer;
}

.options {
  display: block; /* Standardmäßig versteckt */
  position: absolute;
  
	 padding: 10px;
	
	font-size: 1rem;
	font-weight: 300;
 
  
  width: 80%;
  border: 1px solid var(--hell);
}
	
	.formularfeld_anwaehlen  {
		margin-bottom: 10rem;
	}
	
	.formularfeld_text{
			width: 80%;
			}
	.formularfeld {
		width: 80% !important;
	}
	
	footer{
		padding: 1rem 2rem;
		
	}

}


/*grösseres Tablet}*/
@media screen and (max-width:800px){
	
	section {
		display:block;
		padding: 4rem 5vw;
		
	}
	
	header{
		background-position: center;
	}

	
 h2, h3 {
		
		font-size: 2rem;
		
		}
	
	p{
		font-size: 0.9rem;
	}
	
.bilderportfolio figure{
			width:30%;
		}
	
#myCarousel {
	width: 90%;
  	height: 400px;
	transform: scale(0.9);
	}		
	
}		






/*Handy hoch*/
@media screen and (max-width:420px){
	header {
		height: 40vh;		
}
	section {
		display:block;
		
		
	}
	h2 {
		font-size: 1.5rem;
	}
	.animate {
		top: 13rem;
	}
	#stoerer {
		
		margin-top: 0;
	}
	.zitat p {
		font-size: 1rem;
	}
	.bilderportfolio figure{
			width:100%;
		}
	.logocontainer {  
  
		top: 0;
  right: 0;
	
}
	
	.dreiecksvg svg {
		width: 40%;
	}

	
	#stoerer {
		box-shadow: 0 0 0 black inset;
	}
	

	
	
	header nav {
		flex-direction: column;	
	}
	.textbildfeld {
			flex-direction: column
	}
	.flex_reverse {
		
			flex-direction: column;
	}
	
	.bildfeldrechts {
			width: 100%;
			
		
	}
	
	#bildcontainer3 {
		max-width: 400px;
		
		}	
		
	.logotextfeld {
		flex-direction:column;
				
		}
	.textfeld3 {
		felx-direction:column;
	}
	.textfeld3 h2{
		font-size: 1rem;
		}
	.bildfeldrechts3 {	
		width: 100%;	
		flex-direction: column;
	}
	
	
	
	.nebeneinander {
		
		gap:20px;
		padding-top: 30px;
		padding-bottom: 30px;
	}
	
	
	.formularfeld{
			width:80%;
			}
	
	
	
	#myCarousel {
	
  	height: 200px;
	
	}
	
	.zentrierteselement{
		width:50%;
	}
	.zitat {
		width: 100%;
	}
	#totop {
		right:5vw;
		}
	
	
}