/*
* Theme Name: chez Sumie Theme, Miingo Desgn
* Description: chez Sumie Template
* Author: Michaela Clausen
* Version: 0.1





*/


/*--------------------------------------------------------------------------------
Schriften
----------------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Rochester&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Rochester&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Darumadrop+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');



/*--------------------------------------------------------------------------------
globale Variabeln 
----------------------------------------------------------------------------------*/

:root {
			
			--hauptfarbe:#ECF1DC;
			--zweitfarbe:#767C78; 
			--zweitfarbe_opacity:rgba(118,124,120,0.8);
			--hauptfarbe_opacity:#ecf1dccc;
	
	
				
		}
 {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.rochester-regular {
  font-family: "Rochester", serif;
  font-weight: 400;
  font-style: normal;
}

.manrope-regular {
  font-family: "Manrope", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.darumadrop-one-regular {
  font-family: "Darumadrop One", serif;
  font-weight: 400;
  font-style: normal;
}

/*--------------------------------------------------------------------------------
Links
----------------------------------------------------------------------------------*/



a:link {
	color:var(--hauptfarbe);
	text-decoration:none;
	
}


a:visited {
	color:var(--hauptfarbe);
	text-decoration:none;
	
}
a:hover {
	color:var(--hauptfarbe_opacity);
	text-decoration: underline;
}
a:active {
	color:black;
	text-decoration: underline;
	
	
}


.link_angebote {
	font-size: 4rem;
	
}


.link_angebote a:link {
	
	color: var(--zweitfarbe);
	text-decoration:none;
}

.link_angebote a:hover {
	
	color: var(--zweitfarbe_opacity)!important;
	text-decoration:none;
}

.link_angebote a:visited {
	color:var(--zweitfarbe);
	text-decoration:none;
	
}




@media screen and (max-width: 1650px){
	
	.link_angebote {
	font-size: 3rem;
	
	}
	
}

@media screen and (max-width: 1000px){
	
	.link_angebote {
	font-size: 2.3rem;
	
	
	}
	




}


@media screen and (max-width: 670px){
	
	.link_angebote {
	font-size: 2rem;
	
	
	}
	
	
}

@media screen and (max-width: 400px){
	
	.link_angebote {
	font-size: 1.8rem;
	
	
	}

		#start {
	
	background-position: -60rem center!important;

}
	
	
}
/*--------------------------------------------------------------------------------
Nav
----------------------------------------------------------------------------------*/

.menu ul {
	font-size: 1.5rem;
	justify-content: space-between;
    list-style-type: none;
    margin: auto;
	top:-10px;
    padding: 1.5rem 3rem;
		background-color:var(--zweitfarbe);
	color: var(--hauptfarbe);
	font-family: 'manrope';

	
}

.menu {
   
	
   list-style-type: none;
   
	
	
}

.menu li {
	
	
	text-align: center;
	
	
}


.menu2 li {
	
	
	text-align: center;
	
}

.menu2 a {
		font-family: 'Darumadrop One';
}

.menu2 ul{
	
	justify-content: space-between;
    list-style-type: none;
    margin: auto;
    padding: 1.5rem 3rem;
	font-size: 1.5rem;
	background: linear-gradient(to right, orange, hotpink, blue);
	color: linear-gradient(to right, orange, hotpink, blue);
}




#menu-fussmenu {
	background: none;
	
}

#menu-fussmenu a{
	color:var(--zweitfarbe);
	font-size:0.9rem;
}
#menu-fussmenu a:hover{
	color:var(--zweitfarbe_opacity);
	text-decoration: underline;
}

/* Menü für mobile Geräte verstecken */
/* Standard-Stil der Navigation */


/* Menü verstecken */
.nav-menu-items {
    display: flex;
    gap: 10px; /* Abstand zwischen den Menüeinträgen */
	background-color: var(--zweitfarbe);
	
}




.dashicons-no-alt{
	color: var(--hauptfarbe)!important;
}



.hamburger-menu2 .dashicons-menu-alt {
    
    color: var(--hauptfarbe)!important;
	
}



/* Hamburger-Menü */
.hamburger-menu{
    display: none; /* Auf größeren Bildschirmen nicht sichtbar */
}

.hamburger-menu2 {
    display: none; /* Auf größeren Bildschirmen nicht sichtbar */
}

/* Hamburger-Symbol */
.hamburger-icon {
    
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--zweitfarbe);
	position: absolute;
	top:20px;
	right:20px;
}



/* Close-X-Symbol */

  .close-icon {
    
    cursor: pointer;
    background: transparent;
    border: none;
    color: white!important;
    display: none; /* Standardmäßig unsichtbar */
	z-index:900;
	position: absolute;
	
	  
}


/* Auf mobilen Geräten das Hamburger-Menü sichtbar machen */
@media screen and (max-width: 550px) {
    .hamburger-menu {
        display: block; 
		height:100%;
	 
    }
 .hamburger-menu2 {
        display: block; 
	 height:100%;
	 
    }

    nav.open .nav-menu-items {
        display: grid; /* Zeigt das Menü, wenn die Klasse 'open' hinzugefügt wird */
       	gap: 0rem;
     	height:80%;
		left: 0px;
		width: 100%!important;
		z-index: 800;
		justify-content: center;
		align-items: center;
		position: fixed;
    }

    .nav-menu-items {
        
        text-align: center;
    }

   
    /* Wenn das Menü geöffnet ist, das Hamburger-Symbol ausblenden und das X-Symbol anzeigen */
    nav.open .hamburger-icon {
        display: none;
		
    }

	 nav.open a{
        font-size: 1.5rem;
		
    }

    nav.open .close-icon {
		font-size: 40px;
        display: block; /* X-Symbol sichtbar machen */
		right:20px!important;
		top:20px!important;
		
    }
	
		
	
	
	
	.menu2 ul {
		
		display:none;
		
	}
	
	.menu ul {
		
		display:none;
		
	}
	
	
}



@media screen and (max-width: 970px){
	.menu ul{
		
  	width:800px;
    font-size: 1.2rem;
	}

	.menu2 ul{

	width:800px;
	font-size: 1.2rem;

	}

	
}


@media screen and (max-width: 790px){
	.menu ul{
		
  	width:600px;
    font-size: 1.2rem;
	}

	.menu2 ul{
	width:600px;
    font-size: 1.2rem;

	}

	
}


@media screen and (max-width: 612px){
	.menu ul{
		
  	width:500px;
    font-size: 1rem;
	}

	.menu2 ul{

	width:500px;
    font-size: 1rem;

	}

	
}



@media screen and (max-width: 400px){
	.menu ul{
		
  	width:400px;
    font-size: 1rem;
	}

	.menu2 ul{

	width:400px;
    font-size: 1rem;

	}
	
}

/*--------------------------------------------------------------------------------
allgemein
----------------------------------------------------------------------------------*/


html,body {
	scroll-behavior:smooth;
}

body {
    background-color: var(--hauptfarbe);
    font-family:'Manrope';
    /*max-width: 1000px;*/
    margin: 0 auto;
}

h1 {
	font-family: 'Rochester';
	font-size: 5rem;
	color: var(--zweitfarbe);
	text-align: center;
	margin: 5rem;
	padding: 1rem;
}

h2 {
	
	font-family: 'Rochester';
	font-size: 3rem;
	color:  var(--zweitfarbe);
	text-align: center;
	
	
}


h3 {
	font-family: 'Rochester';
	font-size: 3rem;
	margin:0rem;
	padding-bottom:0.5rem;
	color: var(--zweitfarbe);
}

h4 {
	font-family: 'manrope';
	font-size: 1.2rem;
	color: var(--zweitfarbe);
	padding:0.3rem;
	margin:0rem;
	text-align: center;
	
}

h5 {
	font-family: 'manrope';
	font-size: 1rem;
	color: var(--zweitfarbe);
	padding:0.3rem;
	margin:0rem;
	text-align: left;
}



hr {
	
	color: var(--zweitfarbe);
	border: 1px solid var(--zweitfarbe); 
}

img {
    /*border: 5px solid var(--zweitfarbe);*/
   
   
}
p{
	font-family: 'manrope';
	font-size: 1rem;
	color: var(--zweitfarbe);
	width: 85%;
	max-width: 1800px;
	margin: 2rem auto;
}

.body_block {
	padding: 6rem;
	max-width:1000px;
	margin: auto;
}


@media screen and (max-width: 970px){
			
	body {
			
			/*max-width: 800px;*/
		
			}
}






@media screen and (max-width: 922px){
			
	body {
			
			/*max-width: 800px;*/
		
			}

	h1 {

		font-size: 4rem;
		margin: 3rem;
	}

	h2 {

		font-size: 3rem;

	}


	h3 {
		font-size: 2rem;

	}

	h4 {
		font-size: 1rem;
		color: var(--zweitfarbe);
		padding:0.3rem;

	}

	h5 {

		font-size: 1rem;

	}

		}

@media screen and (max-width: 790px){
		
	
	p{
	font-family: 'manrope';
	font-size: 0.8rem;
	color: var(--zweitfarbe);
	width: 100%;
	max-width: 1800px;
	margin: 1.5rem auto;
}
	}

		@media screen and (max-width: 670px){
			
		
	h1 {

		font-size: 3rem;
		margin: 3rem;
	}

	h2 {

		font-size: 2rem;

	}


	h3 {
		font-size: 2rem;

	}

	h4 {
		font-size: 1rem;
		color: var(--zweitfarbe);
		padding:0.3rem;

	}

	h5 {

		font-size: 1rem;

	}

		}


@media screen and (max-width: 612px){
			
		
	
	p{
	font-family: 'manrope';
	font-size: 0.5rem;
	color: var(--zweitfarbe);


}
	}	
		
		@media screen and (max-width: 400px){
		body {
			
			/*width: 350px;*/
		
			}
			
			
	h1 {

		font-size: 2rem;
		margin: 3rem;
	}

	h2 {

		font-size: 2rem;
	
	}


	h3 {
		font-size: 2rem;

	}

	h4 {
		font-size: 1rem;
		color: var(--zweitfarbe);
		padding:0.3rem;

	}

	h5 {

		font-size: 1rem;

	}

		}
		






/*--------------------------------------------------------------------------------
Startseite
----------------------------------------------------------------------------------*/

#start {
	background: url("https://chezsumie.miingo.ch/wp-content/uploads/2025/02/9.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center;
	background-attachment: fixed;
	height:80vh;
	display:flex;

	
}



.versteckt {
  opacity: 0;
  transition: opacity 1s ease;

}
.sichtbar {
  opacity: 1;
}

#bereich1 {
	
	margin:auto;
	position: sticky;
    bottom: 5rem;      
     z-index: 1000; 
	width: 65%;
	height: 65%;
}


.pfeil_unten {
	position:absolute;
	background-color:transparent;
	bottom:1rem;
	left:1rem;
	right:1rem;
	text-align:center;
	animation:scroll_jump 1s ease-in-out;
	animation-iteration-count: 3;
	animation-delay: 1.5s;
}

@keyframes scroll_jump {
	0% {bottom:1rem;}
	50% {bottom:4rem}
	100% {bottom:1rem;}

}





/*--------------------------------------------------------------------------------
Kosmetik
----------------------------------------------------------------------------------*/

#kosmetik {
	background: url("https://chezsumie.miingo.ch/wp-content/uploads/2025/09/beauty-woman-portrait-professional-makeup-brunette-with-green-eyes-red-lipstick-smoky-eyes-beautiful-fashion-model-girl-perfect-skin-make-up-isolated-white-background-part-face-scaled.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:bottom;
	background-attachment: fixed;
	height:80vh;
	display:flex;

	
}





#pmu {
	background: url("https://chezsumie.miingo.ch/wp-content/uploads/2025/09/high-angle-professional-using-little-tool-scaled.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:bottom;
	background-attachment: fixed;
	height:80vh;
	display:flex;

	
}


#mb {
	background: url("https://chezsumie.miingo.ch/wp-content/uploads/2025/02/beautician-doing-eyebrow-treatment-her-female-client-1-scaled.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:bottom;
	background-attachment: fixed;
	height:80vh;
	display:flex;

	
}


/*--------------------------------------------------------------------------------
Termin vereinbaren
----------------------------------------------------------------------------------*/




.colum_3 {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, auto));
	justify-content: start;
  max-width: 1200px;
  
}

.colum_3 > * {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

.colum_3 > label {
	background: white;
	padding: 1rem;
	
}

.colum_3 .dashicons-yes {
	border: 1px solid black;
	width: 25px;
	height: 25px;
	display: grid;
	place-items: center;
}
.colum_3 .dashicons-yes::before,
.colum_3 > label input {
	display: none;
	
}
.colum_3 > label:has(input:checked) .dashicons-yes::before {
	display: block;
	font-size: 20px;
	color:white;
	
}

.colum_3 > label:has(input:checked) .dashicons-yes {
background-color: var(--zweitfarbe_opacity);



}

.kleininfos .colum_3 label p{
	
	font-size: 0.8rem;
	
} 

.kleininfos .colum_3 label{
	display:flex;
	gap: 5px;
}




.kleininfos .colum_3 label div:first-of-type{
	
	flex: 1;
}


.bestellformular {
	
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
	padding: 3rem 2rem;
	
	
}



@media screen and (max-width: 450px){
	
	
.bestellformular {
	
	display: grid;
	gap: 1rem;
	padding: 2rem 1rem;
	
}
	
	
	}


.alert {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	background-color: pink;
	padding: 60px;
}

.form-group {
	margin-bottom: 20px;
	object-fit:cover;
	transition:all ease-in-out 0.3s;
	text-align:center;
	font-weight: bold;
	padding:0.2rem;
	
}


select,  textarea {
	border-radius: 1.8rem;
	padding: 0.5rem;
	border:none;
	color: var(--zweitfarbe);
	font-family: 'manrope';

}

datum {
	color: var(--zweitfarbe);
}

select:hover, textarea:hover, input:not([type="submit"]):hover {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	opacity: 0.8;
	
}




.date {
	
	border-radius: 3rem;
	margin:0.5rem;
	color:var(--zweitfarbe);
}



input {
	
	border-radius: 3rem;
	padding: 0.5rem;
	margin:0.3rem;
	border: none;
	background-color: white;
	
}


.absenden {
	border-radius:3rem;
	padding: 0rem 0.5rem;
	background-color: white;
	border:none!important;
	color:var(--zweitfarbe);
	cursor: pointer;
	
}


.anfragen {
	border:none;
	color:var(--zweitfarbe);
	cursor: pointer;
}


.absenden:hover{
	
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	opacity: 0.8;
	
}


label {
	margin: 1rem 0 0 0;
	
}

::placeholder {
	font-family: 'manrope';
	color: var(--zweitfarbe);
}


summary {
  list-style: none;
	-webkit-appearance: none; /* Verhindert die Anzeige des Pfeils in Safari */
  appearance: none; /* Für andere Browser */
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
	color: var(--zweitfarbe);
	padding:10px;
	margin-top: 50px;
}
details::-webkit-details-marker {
  display: none; /* Entfernt das native Pfeilsymbol in Safari */
}

summary::before {
  content: "\f344"; /* Unicode für einen nach unten zeigenden Pfeil */
  font-family: 'Dashicons';
  font-size: 20px;
  position: absolute;
  left: -25px; /* Position des Pfeils anpassen */
  transition: transform 0.3s ease;
}

details[open] > summary::before {
  content: "\f344"; /* Unicode für einen nach oben zeigenden Pfeil */
  transform: rotate(90deg); /* Dreht den Pfeil */
  left: -25px; /* Position anpassen */
	display: block;
}



article {
    max-width: 80%;
    margin: 0 auto;
}


.dashicons {
   color: var(--zweitfarbe);
   font-size: 2rem;
    
}




/*--------------------------------------------------------------------------------
Bewertung
----------------------------------------------------------------------------------*/

.bewertung_anzeige {
	display: grid;
 	gap: 2rem; /* Abstand zwischen den Listenelementen */
 	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Spalten automatisch anpassen */
 	list-style-type: none; /* Entfernt die Standard-Aufzählungspunkte */
 	padding: 1rem;
	color: var(--zweitfarbe);
	width: 85%;
	max-width: 1800px;
	margin: 0 auto;
	
}


.bewertung_liste {

	word-wrap: break-word; /* Zeilenumbruch bei langen Wörtern */
  	word-break: break-word; /* Verhindert, dass der Text über das äußere Div hinausgeht */
  	white-space: normal; /* Setzt den Textumbruch auf den Standard */
 	hyphens: auto; /* Ermöglicht die Trennung von Wörtern am Zeilenumbruch */
  	padding: 1rem; /* Abstand im Inneren des Items */
  	box-sizing: border-box;
	background:white;
	text-align: center;
	align-content: center;
}



.dashicons-star-empty {
	font-size: 1.5rem;
	color: orange;
}

.dashicons-star-filled {
	font-size:1.5rem;
	color: orange;
	padding-right: 0.3rem;
	margin-bottom: 0.5rem;
}


/*--------------------------------------------------------------------------------
angebot
----------------------------------------------------------------------------------*/

/*.auswahl_angebot{
	padding: 2rem 0rem;
	
} 
*/




.wp-block-media-text__media {
	justify-content: center;
	margin: auto;
	
}



.angebot_image {
	padding: 3rem;
	padding-left: 10rem;
	background-color: var(--hauptfarbe_opacity);
	max-width:1500px;
	margin: auto;
	backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); /* Für Safari */

}




@media screen and (max-width: 1350px){
	
	.angebot_image {
	padding-left: 5rem;
	
	
	}
	
}





.angebot_image img{
	object-fit: cover;
	overflow: hidden;
	/*border-radius: 2rem;*/
	filter: blur(0);
  	transition: filter 1s ease-in-out;
	height: 90%;
	width: 90%;
	

}


.angebot_image img:hover{
	filter: blur(1px);
	cursor: pointer;
	scale: 1.05;
	transition: scale 0.3s ease-in-out;
}



.zertifikat {
	
	display: flex;
	justify-content: center;
	height: 20vh;
	width:20vw;
}






/*--------------------------------------------------------------------------------
ueber mich
----------------------------------------------------------------------------------*/


.portrait{
	
	/*border-radius:2rem;*/
}

.portrait:hover{
	scale:1.02;
	transition: scale 0.3s ease-in-out;
}





/*--------------------------------------------------------------------------------
Massage
----------------------------------------------------------------------------------*/



.zitat_massage {
	background-color:rgba(255,255,255,0.61);
 font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 18px;
  font-style: italic;
  margin: 20px;
  padding: 20px;
  position: relative;
  color: var(--zweitfarbe);
	text-align: center;
	align-content: center;
	justify-content: center;

	
}

.wp-block-quote {
    overflow-wrap: normal;
	display:grid;
	justify-content: center;
	align-content: center;
	align-items: center;
}

@media screen and (max-width: 400px){
	
	.zitat_massage{
		
		margin: 0px!important;
		padding: 20px;
	
	}
	
	
	
	}

.zitat_massage::before,
.zitat_massage::after {
 
  font-size: 4rem;
  position: absolute;
  opacity: 0.2;
 
}

.zitat_massage::before {
	content: "\f122";
	font-family: 'dashicons';
	rotate:180deg;
  top: -20px;
  left: -20px;
	 animation: pulse 2s infinite;

}

.zitat_massage::after {
	content: "\f122";
	font-family: 'dashicons';
  bottom: -30px;
  right: 0px;
	 animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0.2;
  }
}

.autor {
	margin-top: 30px;
	font-size: 0.8rem;
	color: var(--zweitfarbe);
	font-weight: 500;
	font-style: italic;
	text-align: center;
	padding:0rem;
	margin:0rem auto;
	
        }


.button_massage {
	background-color: transparent;
	border: 4px solid transparent;
	font-size: 2rem;
    color:var(--hauptfarbe)!important;
	position: relative;
	cursor: pointer;
	outline: none;
	overflow: hidden;
    font-family: 'Rochester';
    display:flex;
    border-radius: 0px!important;
	margin-bottom:3rem!important; 
}


        .button_massage::before {
            content: '';
            position: absolute!important;
			
            top: 0;
            left: 0;
			justify-content: center;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: linear-gradient(45deg, #ECF1DC, #767C78);
            background-size: 400% 400%;
            padding: 4px; /* Verhindert, dass der Farbverlauf in den Inhalt des Buttons geht */
            box-sizing: border-box; /* Bezieht sich auf die Padding-Maße */
            animation: gradientBorder 5s linear infinite;
        }

        .button_massage:hover {
            color: var(--hauptfarbe_opacity)!important;
			scale: 1.02;
			transition: scale 0.3s ease-in-out;
        }

        @keyframes gradientBorder {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }




/*--------------------------------------------------------------------------------
Referenzen
----------------------------------------------------------------------------------*/

.referenzen {
	
 max-width: 100%;

  white-space: normal;
}

.referenzen_container {
	display: grid;
  gap: 5rem;
  grid-template-columns: repeat(auto-fit, minmax(100px, auto));
	justify-content: center;
	align-items: center;
  max-width: 1200px;
  margin: 0 auto;
	padding: 3rem;
	
}


/*--------------------------------------------------------------------------------
Kinderschminken
----------------------------------------------------------------------------------*/






.kinderschminken_back{
	
	background: url("https://chezsumie.miingo.ch/wp-content/uploads/2025/02/7629404-scaled.jpg");
	display:fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position:top;
	background-attachment: fixed;
	height:100vh;
	
}


@media screen and (max-width: 550px){
	
	.kinderschminken_back{
	
	background: url("https://chezsumie.miingo.ch/wp-content/uploads/2025/02/7629404-scaled.jpg");
	display:fixed;
	background-size: cover;
	background-position:bottom right;
	background-attachment:fixed;
	
	
}
}





.kinderschminken_titel1 {
	font-family: 'Darumadrop One';
	background: linear-gradient(to right, yellow, hotpink, blue); /* Farbverlauf von Rot nach Blau */
  -webkit-background-clip: text; /* Hintergrund wird auf den Text angewendet */
  color: transparent; /* Textfarbe transparent machen */
	animation: gradient-animation 5s ease infinite;
	 background-size: 200% 200%;
}


@media screen and (max-width: 550px){
	
	.kinderschminken_titel1 {
		
	padding: 1.5rem;
		margin: 0 auto;
	
	}
	
	.kinderschminken_p {
	
  		color:blue!important;
		font-size: 1rem!important;
		width:100%!important;
}

	
	
	}




@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.kinderschminken_p {
	font-family: 'Manrope';
	font-size: 1.2rem;
	font-weight: bold;
	background-image: radial-gradient(circle, hotpink, blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
 	
}


.kinderschminken_back h1{
	display:none;
	
}

.kinderschminken_titel1 {
	display:block!important;
	
}

.ks_galerie {
	max-width:90%;
	margin: 0 auto !important;
	justify-content: center!important;
	align-items: center!important;
}


/*
.wp-element-button {
	justify-content: center;
	font-family: 'Darumadrop One';
	font-size: 2rem;
	padding:1rem;
	background: linear-gradient(to right, yellow, hotpink, blue)!important; /* Farbverlauf von Rot nach Blau */
 /* -webkit-background-clip: text!important; 
 	color: transparent!important; 
	animation: rotate 5s ease infinite;
	 background-size: 200% 200%;
	border:2px solid blue;
	
	
}
*/
.wp-element-button {
	background:none;
	color:var(--hauptfarbe)!important;
}



           .button_kinder {
            font-size: 2rem;
            color:var(--hauptfarbe)!important;
            position: relative;
            cursor: pointer;
            outline: none;
            overflow: hidden;
		    font-family: 'Darumadrop One';
		    display:flex;
		    border-radius: 0px!important;
			margin-bottom:3rem!important; 
			
        }

@media screen and (max-width: 520px){
			
		
           .button_kinder {
            font-size: 1.5rem;
            
			
        }

	}	

        .button_kinder::before {
            content: '';
            position: absolute!important;
            top: 0;
            left: 0;
			justify-content: center;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: linear-gradient(45deg, orange, hotpink, blue, green);
            background-size: 300% 300%;
            padding: 4px; /* Verhindert, dass der Farbverlauf in den Inhalt des Buttons geht */
            box-sizing: border-box; /* Bezieht sich auf die Padding-Maße */
            animation: gradientBorder 5s linear infinite;
			
        }

        .button_kinder:hover {
            color: var(--hauptfarbe_opacity)!important;
			scale: 1.02;
			transition: scale 0.3s ease-in-out;
			
        }

        @keyframes gradientBorder {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }




/*--------------------------------------------------------------------------------
Bildwechsel Kinderschminken
----------------------------------------------------------------------------------*/




.home_hintergrund {
  background-size: cover;   /* Passt das Bild an die Größe des Containers an */
  background-position: center; /* Zentriert das Bild */
  height: 80vh!important;
	background-repeat: no-repeat;

	background-attachment: fixed;
	display:flex;
  /*transition: background-image 1s ease-in-out;*/
}

.home_hintergrund.fade {
	opacity: 0; /* Beim Wechsel das Element unsichtbar machen */
  	transition: opacity 1s ease-in-out; /* Fade-Out und Fade-In Übergang */
}






/*--------------------------------------------------------------------------------
Logo Startseite
----------------------------------------------------------------------------------*/


#logo_container {
	height:30vh;
	width:30vw;
	dsplay:flex;
	z-index:333;
	
}



#logo_titel {
	transform:rotateZ(25deg);
	height:250px;
	position:absolute;
	left:10%;
	top:3%;
}


#logo_titel2 {
	transform: rotateZ(-25deg) scaleX(-1);
	height:250px;
	position:absolute;
	right:10%;
	top:3%;
}


@media screen and (max-width: 1333px){
			
		#logo_titel {
	
	height:200px;
	position:absolute;
	left:7%;
	top:5%;
	}

        #logo_titel2 {
	
	height:200px;
	position:absolute;
	right:7%;
	top:5%;
}    
	.abstand_home {
		height: 10px!important;
	}
			
 }








@media screen and (max-width: 1180px){
			
		#logo_titel {
	
	height:150px;
	position:absolute;
	left:5%;
	top:8%;
	}

        #logo_titel2 {
	
	height:150px;
	position:absolute;
	right:5%;
	top:8%;
}    
	.abstand_home {
		height: 8px!important;
	}
			
 }





@media screen and (max-width: 800px){
			
		#logo_titel {
	
	height:120px;
	position:absolute;
	left:5%;
	top:15%;
	}

        #logo_titel2 {
	
	height:120px;
	position:absolute;
	right:5%;
	top:15%;
}    
	.abstand_home {
		height: 5px!important;
	}
			
 }




@media screen and (max-width: 400px){
			
		#logo_titel {
	
	height:100px;
	position:absolute;
	left:10%;
	top:13%;
	}

        #logo_titel2 {
	
	height:100px;
	position:absolute;
	right:10%;
	top:13%;
}    
	.abstand_home {
		height: 2px!important;
	}
	
				.home_hintergrund{
	background-size: contain!important;
	background-position: center top;
					height: 20vh!important;
	
	}
	
			
 }






.line {
	
	stroke-width:12px;
	stroke: var(--zweitfarbe);
	stroke-dasharray:50000;
	animation:logostrich 10s ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes logostrich {
	0% {stroke-dashoffset:50000; fill:none}
	50% {fill:var(--zweitfarbe)}
	100% {stroke-dashoffset:0; fill:var(--zweitfarbe)}
}





/*--------------------------------------------------------------------------------
Logo Footer
----------------------------------------------------------------------------------*/



    footer .footer-content {
		
        display: grid;
        grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
        background-color: rgba(255,255,255,0.77);
		
    }

    footer a {
        text-decoration: none;
        color: var(--zweitfarbe);
        font-size: 1rem!important;
		
		
    }

    footer span:hover {
        color: #e4405f; /* Instagram-Rot */
		text-decoration:none;
    }



.footer_column {
	
	align-content: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	
}

@media screen and (max-width: 520px){
			
		footer a {
	
	font-size: 0.7rem!important;
	
}
	
	footer p{
		font-size: 0.7rem!important;
		padding: 5px;
		
	}
	}	


.footer-logo {
  position: fixed;     
  bottom: -10%;           
  right: -10%;           
  z-index: -10;       
  padding: 10px;  
	transition: transform 0.1s ease-out;
}

.footer-logo img {
  	max-width: 60vw;    
  	height: auto;
	border:none;
	opacity:0.5;
	transform: rotateZ(50deg); 
}