/* 

* Theme Name: Theme Authentic Voice
* Description: Individuelles WP Template für Moira Pelacci
* Author: Liza Gerber, ideen-prisma.ch
* Version: 0.4

*/

/*schriftarten*/
/*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: #FDF0D5; /*Schrift*/
			--akzent: #C1121F; /*hellesrot*/
			--akzentdunkel: #780000;/*dunklesrot*/
			--dunkel: #003049;/*dunkles Blau*/
			--mittel: #669BBC; /*Hellblau*/
			--halbdunkel: rgba(17,21,28,1);/*blauschwarz*/
			
			
			/*Abstände, effekte*/
			--abrunden: 0.5rem;
			--aufblasen: scale(1.2);
		}
/*css reset*/
* {
		padding: 0;
		margin:0;
		box-sizing: border-box;
		scroll-behavior: smooth;
	}

h2, h3 {
	font-family: "poppins", sans-serif;
	font-weight: normal;
}
h1 {
		color: var(--hell);
		font-family:'poppins';
		font-weight: 300;
		font-size: 5rem;
	z-index: 400;
	
		}

    
	
	a{
		color:var(--dunkel);
		font-family: 'poppins';
		font-weight: normal;
		text-decoration: none;
	}
	
	a:link {
		color:var(--dunkel);
		font-weight: normal;
		text-decoration: none;
		transition: all 0.5s ease-in-out;
	}
	
	a:visited {
		color:var(--dunkel);
	}
	
	a:hover {
		color:var(--dunkel);
		font-weight: normal;
		text-decoration: none;
		transition: all 0.2s ease-in-out;
	}
	
	a:active {
		color:var(--dunkel);
		font-weight: normal;
		text-decoration: none;
	}
	
.schriftzug {
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%, -50%);
}
.schriftzug h1 {
	white-space: nowrap;
}
.menu-hauptmenu-container {

	z-index: 500;
}



.hauptmenu {
	display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
	padding-left: 0;
	
}

.hauptmenu ul {
	
	
}
.hauptmenu li {
	
	list-style-type: none;
	padding: 0.5rem;
	
	
}
.hauptmenu a {
	color:var(--hell);
		font-weight: normal;
		text-decoration: none;
}
.hauptmenu a:hover {
	
		text-decoration: underline;
}
#menu-toggle {
	display:none;
}

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

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


.spezialmenuextern {
	margin-left:1rem;
}
/* design struktur*/

	header {
    	
		color: var(--hell);
		width: auto;
		position:relative;
		top:0;
		left:0;
		overflow: hidden;
		height: 40vh;
		display: flex;
  		flex-direction: column;
  		align-items: center;
  		padding: 0;
		}

header img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	
}


	header a {	
		padding-left: 5vw;
	}


nav {
  display: flex;
  gap: 1.5rem;
}

header nav {
		font-size: 1.3rem;
		font-family: 'poppins';
		color:var(--hell);
		position: absolute;
  	bottom: 0rem;
  	left: 0rem;
		width:100%;
		justify-content: flex-start;
		z-index: 444;
	}	


main {
	padding: 4rem;
	
}

#container {
	
	max-width:1600px;
	margin:0 auto;
}
footer {
	padding: 1rem;
	color:var(--dunkel);
	font-size: 16px;
	background-color: var(--akzentdunkel);
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items: center;
	align-items: flex-end;
	
}

.wp-block-button {
	background: gold;
	width: 100%;
	
}
.wp-block-button a {
	background: none;
}
.wp-block-button:hover {
	background: limegreen;
	color: hotpink;
	transform:scale(2);
	transition: all ease-in-out 0.3s;
}

/*menu socialmedia*/
.menu-social-media-footer-container{
	background: rgba(355,355,355,0.8);
	z-index: 500;
}
.SMF{
	display: flex;
  	position: absolute;
  	top: 0;
  	right: 1rem;
 	justify-content: space-between;
  	
}

.SMF li {
	list-style: none;
	padding:0.5rem;
	color: white;
}
/*immer brav untersuchen*/
.SMF li a{
	color: var(--hell);
}
/*sponso loop*/
.sponsor_loop {
	border:1px dotted pink;
}

.sponsor_loop p {
	border: 3px solid black;
}


/*wünsch mir viel glück, hier css sachen von moira, oben gemisch von sachen aus unterricht und grundlagen von moiras website...*/

body{
		background-color: var(--hell);
		font-family: 'poppins';
		font-size: 15px;
	}
	
	
	p {
		color: var(--dunkel);
		font-family: 'poppins';
		font-weight: 200;
		font-size:clamp(1rem, 3vw, 1.2rem);
	}
    

	h2, h3 {
		color: var(--dunkel);
		font-family: 'poppins';	
		font-weight: 200;
		font-size: 3rem;
		}

	h4 	{
		color: var(--hell);
		font-family:'poppins';
		font-weight: 300;
		font-size: 2rem;
		text-align: center;
		}

	h5 {
		color: var(--dunkel);
		font-family: 'poppins';	
		font-weight: 200;
		font-size: 2rem;
		}
		
	


/*==========================Buttons==========================*/
	.cta_button{
		background-color: var(--hell);
		color:var(--dunkel)!important;
		font-size: 25px;
		padding:0.8rem 0.6rem;
		width:10rem;
		border-radius: 0.5rem;
		display:inline-block;
		text-align: center;
		margin-top:.5rem;
		transition:all ease-in-out 0.4s;
		}
		
	.cta_button:hover {
		background: var(--dunkel);
		color:var(--hell)!important;
		transform:var(--aufblasen);
		transition:all ease-in-out 0.6s;
		}

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


	/*================Vorstellungstext übers Moira=================*/
	
    




/*=========Section mit den Audiodateien=========*/
.songportfolio{
		background-color: var(--akzentdunkel);
		display: grid;
		/*grid-template-columns: repeat(auto-fit, minmax(min(50%, 500px), 1fr));*/
		gap: 30px;
		padding: 10px 0 10px 0;
		
}

.song figcaption{
	margin: 0 auto;
	text-align: center;
	color: var(--hell);
	font-family: 'poppins';	
	font-weight: 200;
	font-size: 2rem;
}
audio {
	
    display: block; /* Ermöglicht Margin/Padding */
    margin: 0 auto;
    border: 1px solid #E27273;
    border-radius: 50px;
	background-color: #FF4848;
    overflow: hidden;

}

	
			
	
/* 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(--hell);		
			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(--hell);
			color:var(--dunkel);
			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(--dunkel);
		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*/
			z-index: 100;
			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;
		
	}
	
	section.no-grid {
        display: flex !important;  /* NICHT block */
    }
	
	h1{
		
		font-size:clamp(1.5rem, 10vw, 10rem);
		flex-wrap: wrap;
		
	}
	.columns-3{
		margin-bottom:50px;
	}
	
	
	
	
	.titelposition{
		top: 5rem;
		position: absolute;
	flex-wrap:nowrap;
	}
	
	/*.SMF{
	justify-content: space-around;
	top: 20px;
	width:5rem;
  	left: 0rem; 	
}*/
/*================================textblöcke==================================*/	
/*================================textblöcke==================================*/	
/*================================textblöcke==================================*/	
	
	 /* Standard-Blöcke (Bild links im Editor): fliessen normal untereinander */
  .wp-block-media-text {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* SPEZIALFALL: Wenn das Bild im Editor RECHTS steht, 
     wird die Reihenfolge hier für das Handy umgedreht (Bild nach oben!) */
  .wp-block-media-text.has-media-on-the-right {
    flex-direction: column-reverse !important;
  }

  /* Bild-Container-Styling für Mobilgeräte */
  .wp-block-media-text .wp-block-media-text__media {
    width: 100% !important;
    margin-bottom: 25px !important; /* Abstand, wenn das Bild oben ist */
  }

  /* Wenn das Bild rechts war und nun oben steht, braucht es den Abstand unten */
  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    margin-bottom: 25px !important;
    margin-top: 0 !important;
  }

  /* Textbereich-Styling für Mobilgeräte */
  .wp-block-media-text .wp-block-media-text__content {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
	
/*========================Audiodateien=======================*/
	
	
	/* Hamburger-Menu nur auf kleinen Bildschirmen anzeigen */

  nav {
    display: none;
	flex-direction: column;      /* statt column */
    justify-content: flex-start; /* nach rechts ausrichten */
    align-items: center;
	background: #2D0525;
    position: absolute;
    top: 70px;
    right: auto;              /* rechts positionieren */
    left: 0rem; 
	width: 50%;/* wichtig */
    padding: 1rem;
  
   
  }
	
	
  .menu-icon {
    display: flex;
	margin-right: 20px;
	Margin-top: 10px;
  }


  #menu-toggle:checked + .menu-icon + nav {
    display: flex;
	 justify-content: flex-end; 
  }
	

    .hauptmenu {
        flex-direction: column;   /* oder row, je nachdem was du möchtest */
        justify-content: flex-start;
        align-items: flex-start;    /* rechts ausrichten */
    }
	
	.bildfeldrechts {
			width: 100%;	
	}

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


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


	#bildcontainer3 {
		max-width: 900px;
		
		}	
		
	.logotextfeld {
		flex-direction:column;
				
		}
	
	
	
	.textfeld3 h2{
		font-size: 1rem;
		
		}
	
	
	
	.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;
	}
	


}