/* CSS Document - von Liza */

/* ================= SCHRIFTARTEN HOLEN =============== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&family=Lovers+Quarrel&display=swap');


/* ================= VARIABLEN =============== */
/* Farben */
:root {
	--background_01: rgba(1,74,62,1.00); /* allgemeiner hintergrund */
	--background_02: rgba(69,74,69,1.00); /* titel dunkelgrau */
	--background_03: rgba(43,54,78,1.00); /* akzentfarbe hintergrund */
	--background_04: rgba(24,24,24,0.80); /* akzentfarbe dunkel */

	--color_01: rgba(255,255,255,1); /* Schrift */
	--color_02: var(--background_03); /* Links */
	--color_03: rgba(255,255,255,0.8); /* Weiss */

	--border-radius:0.3rem; /* abrunden */
}


/* ================= STANDARD DEFINITIONEN =============== */
/* CSS reset */
* {
	padding:0px;
	margin:0px;
	box-sizing:border-box;	
}

html,body {
    height:100%;
    min-height:100%;
	padding:0.5rem 1rem;
    scroll-behavior: smooth;
}
/*  hier die hintergrundfarbe */
body {
    background-image: url("../lightstars_heller_himmel.jpg");
	 background-repeat: no-repeat;
	background-attachment: fixed;
  	background-position: center;
	background-size: cover;
    font-family: "Cormorant Infant", serif;
    font-size:1rem;
    color:var(--color_01);
	
}



h1, h2, h3, h4{
    
    
  	font-style: normal;
    padding:0.5rem;
    margin:0rem 0rem 0.1rem 0rem;
    border-radius:var(--border-radius);
}

h1{
    font-size:6rem;
	font-family: "Lovers Quarrel", cursive;
	font-weight: 400;
	max-width: 1200px;
	margin-right: 1 rem;
	
}
h2{
	font-family: "Lovers Quarrel", cursive;
	font-weight: 400;
    font-size:4rem;
    margin-top:1rem;
}
h3{
    background:var(--background_03);
    font-size:2rem;
	font-weight: 200;
    margin-bottom:0.2rem;
}
h4{
    font-size:2rem;
	font-weight: 200;
	padding: 0.2rem;
}

h5{
	 font-size:1.5rem;
	font-weight: 200;
}
p {
    padding:1rem 0rem;
	font-size: 18px;
}


a {
	color:var(--color_01);
    font-weight:bold;
	transition:all ease-in-out 0.5s;
	text-decoration: none;
}
a:hover {
	color:pink;
    font-weight:bold;
	transition:all ease-in-out 0.3s;
}
nav a {
	color:var(--color_03);
    font-weight:bold;
	transition:all ease-in-out 0.3s;
}

img {
	max-width:100%;
	width:100%;
}
hr {
	border-top:none;
	border-bottom:1px dotted var(--color_02);
	margin:1rem 0rem;
}

input, textarea, select {
	background:rgba(253,254,255,0.5);
	border: 0.5px solid #EBD0DD;
    border-radius:var(--border-radius);
	padding:0.5rem;
	font-family:"Cormorant Infant", serif;
	font-size:1.2rem;
	color:black;
	width:80%;

}


.filterbutton {
	background:rgba(253,254,255,0.5);
	border: 0.5px solid #EBD0DD;
    border-radius:var(--border-radius);
	padding:0.5rem;
	width: 80%;
}

.filterbutton a {
	
	font-family:"Cormorant Infant", serif;
	font-weight:normal;
	font-size:1rem;
	color:black;
	
}

.nebeneinander {
	display:inline-flex;
	flex-wrap:nowrap;
	justify-content: space-between;
	width: 80%;
}

/* Listen stylen */

ul {
    padding-left:1.5rem;
}
ul li{
   	color:var(--color_01);
	list-style: none;
}
ul li:before{ /* For a round bullet */
  	content: '\2022';
   	color:var(--color_01);
    padding-right:.5rem;
}

/* ================= ELEMENTE STRUKTUR =============== */
/* ================= ELEMENTE STRUKTUR =============== */
header, nav, main, footer {
	box-sizing:border-box;
	margin-left:1rem;	
	max-width:1400px;
	padding:1rem;	
}

header  {
    font-size:1.4rem;
	font-weight:400;
	
}
header,footer  {
	color:var(--color_01);
	
}

footer a {
	color:var(--color_01);
	transition:all ease-in-out 0.5s;
}
footer a:hover {
	color:pink;
	transition:all ease-in-out 0.3s;
}
header, nav, main, footer {
    box-sizing: border-box;
    margin-left: 1rem;	
    max-width: 1200px;
	width: 75%;
    padding: 1rem;	
}

nav {
    
	background-color: rgba(43,54,78,1);
	border-radius: 48%;
    text-transform: uppercase;
}

nav a {
    color: var(--color_03);
    font-weight: bold;
    transition: all ease-in-out 0.3s;
    text-decoration: none;
    display: block; /* wichtig für Kreis */
    padding: 0.5rem;
}

nav a:hover {
    color: lightpink;
}






/* Kreis-Modus - überschreibt Header-Styles */
nav.kreis {
    position: absolute;
    top: 15%;
    right: 15%;
	height: 70%;
    width: 70%;
    
    padding: 0;
    margin: 0;
    border-radius: 50%;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    z-index: 1000;
    
}


nav.kreis a {
    font-size: 0.85rem;
    text-align: center;
    padding: 0.3rem 0.5rem !important;
    /*writing-mode: vertical-rl; /* vertikale Links für Kreis 
    transform: rotate(180deg);*/
}
/*ende kreis modus nav*/

/* Header-Modus - überschreibt Header-Styles */

nav.header {
	display: flex;
	flex: nowrap;
	justify-content: space-between;
	align-items: center;
}

main {
	min-height:70vh;
	
}
main p{
        padding:0.5rem;
}



/* ================= Logo Ideenprisma =============== */
/* ================= Logo Ideenprisma =============== */

.logocontainer {
 
  width: 5rem;
  height: 5rem;
  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%); 
	
}





/* ================= EIGENE KLASSENDEFINITIONEN =============== */
/* ================= EIGENE KLASSENDEFINITIONEN =============== */


.comment {
	color:darkslategray;
	font-style: italic;
}

.fa, .fas {
	color:var(--color_03);
}

.flex {
    display:flex;
    justify-content: space-between;
}

.klein {
    font-size:0.6rem;
}
/* Fehlermeldung ausgeben */
.fehlermeldung {
	display:block;
	background:red;
	color:yellow;
	margin:1rem 0rem;
	padding:0.5rem;
}

.abstand{
	margin-bottom: 10rem;
}

/* ================= BILDERGALERIE =============== */
/* ================= BILDERGALERIE =============== */
.bildergalerie {
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
    border:1px solid var(--background_02);
    border-radius:var(--border-radius);
}

.bildergalerie a {
	width:33%;
	aspect-ratio:3/2;
}
.bildergalerie img {
	
    object-fit: cover;
	width:100%;
	height:100%;
    opacity: 1;
    transition:all ease-in-out 0.5s;
    border-radius:var(--border-radius);
}
.bildergalerie img:hover {
    opacity: 0.8;
    transition:all ease-in-out 0.3s;
}

/*=============================================================*/
/*===================Index Grunddesign=========================*/
/*=============================================================*/

.fullvw {
	width: 100%;
}






/*=============================================================*/
/*===================Anzeige Übersicht=========================*/
/*=============================================================*/


.parfums_anzeige_container {
	column-gap: 2rem;
	row-gap: 6rem;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	border:3px solid none;
	
	
}

.spraykopf{
	position: absolute;
	top: -1.8rem;
	left: 50%;
	right: 50%;
	width: 2rem;
	height: 2rem;
	color:#787878;
	background: linear-gradient(90deg, #787878 0%, #b5b5b5 25%, #e3e3e3 50%, #b5b5b5 75%, #787878 100%);
	border-top: 1px solid white;
	border-right: 1px solid white;
	border-left: 1px solid white;
	border-bottom: 1px solid none;
	border-radius: 0.2rem 0.2rem 0 0; 
	overflow:hidden;
	margin-left: -1rem; 
	text-align: center;
}
.spraykopfwoche{
	position: absolute;
	top: -1.8rem;
	left: 50%;
	right: 50%;
	width: 2rem;
	height: 2rem;
	color:#787878;
	background: linear-gradient(90deg, #787878 0%, #b5b5b5 25%, #e3e3e3 50%, #b5b5b5 75%, #787878 100%);
	border-top: 1px solid white;
	border-right: 1px solid white;
	border-left: 1px solid white;
	border-bottom: 1px solid none;
	border-radius: 0.2rem 0.2rem 0 0; 
	overflow:hidden;
	margin-left: -1rem; 
	text-align: center;
}

.parfums_anzeige_container article{
	position:relative;
	width:25%;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	border:1px solid white;
	border-radius: 10rem 10rem 3rem 3rem;
	/*overflow: hidden;*/
	backdrop-filter: blur(3px);
	transition: ease-in-out 0.5s all;
}


.parfums_anzeige_container article:hover{
	
	
	
	border-radius: 10rem 10rem 3rem 3rem;
	
	backdrop-filter: blur(8px);
	transform: scale(1.05);
	transition: ease-in-out 0.3s all;
	
}

.parfums_anzeige_container> div{
	height: 66%;
	overflow: hidden;
	
}

.bildvorschau {
	
	overflow: hidden;
	border-radius: 10rem 10rem 0 0;
}

.vorschauname{
	text-align: center;
}
.vorschautext{
	/*border:3px solid hotpink;*/
	width: 100%;
	text-align: center;
	font-weight: 250;
	padding-bottom: 0.6rem;
	
	
}
.vorschautext_titel{
	font-size: 1.2rem;
	font-weight: 300;
	text-align: center;
	padding-bottom: 0.6rem;
}

/*=============================================================*/
/*======================Detailinfos============================*/
/*=============================================================*/




#detailinfos {
	display: none;
	position:fixed;
	top:1rem;
	left:1rem;
	right:1rem;
	/*border:3px solid limegreen;*/
	border-radius:var(--border-radius);
	width:90vw;
	height:90vh;
	background-image: url("../darkstars_farbig_abgewedelt.jpg");
	
	z-index:500;
	overflow:hidden;
}



#schliessen_button{
	position:absolute;
	top:2rem;
	right:2rem;
	width: 2rem;
	aspect-ratio:1/1;
	display:flex;
    justify-content: center;
	align-items: center;
	font-size: 3rem;
}

#detailinfos_inhalt {
	padding:3rem;
	/*border:3px solid hotpink;*/
	height: 100%;
	width: 100%;
	overflow:hidden;
	overflow-y: visible;
}
.flexi {
	display:inline-flex;
	flex-wrap:nowrap;
	justify-content: space-between;
	max-width: 60%;
	font-size: 1.5rem;
}


.detail_2_spalten {
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
}
.detail_2_spalten div {
	width:48%;
}

#detailinfos_name {
	font-family: "Lovers Quarrel", cursive;
	font-size:6rem;
}


#detailinfos_pdf_link {
	padding:1rem;
}

#detailinfos_kombinationen {
	display:flex;
	flex: wrap;
	justify-content: center;
	
	
}
#detailinfos_kombinationen h3{
		width:100% !important;
		background-color: red !important;
	}



.kombinationen_produkt {
	
	width:15%;
	
}
.kombinationen_produkt h4 {
	font-size: 1rem;
}
.kombinationen_produkt img {
	display:block;
	border-radius: var(--border-radius);
}


/*=============================================================*/
/*=====================Filterfenster===========================*/
/*=============================================================*/

#filterfenster{
	padding:4rem;
	position:fixed;
	top:-10vh;
	left: 75%;
	width:25%;
	bottom: -10vh;
	display: flex;
	background:rgba(239,173,187,0.80);
	flex-flow: column;
	justify-content: center;
	border-radius: 50% 0 0 50%;

}






/*=============================================================*/
/*=========================Wochenduft===========================*/
/*=============================================================*/
.centeredtext {
	display: flex;
	justify-content: center;
}
.wochen_duft_container{
	display: flex;
	justify-content: center;
}

.wochen_duft_container article{
    margin-top: 3rem;
	position:relative;
	width:40%;
	
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	border:1px solid white;
	border-radius: 30rem 30rem 10rem 10rem;
	/*overflow: hidden;*/
	backdrop-filter: blur(3px);
	transition: ease-in-out 0.5s all;
}



.wochen_duft img {
	
    overflow: hidden;
	border-radius: 30rem 30rem 0 0;
}




.vorschautext_titel_wochenduft
{
	margin: 0 auto;
	font-size: 1.2rem;
	font-weight: 300;
	text-align: center;
	border-radius: 10rem 10rem 3rem 3rem;
	
}



.wochen_duft_container hover{
	
	
	
	border-radius: 10rem 10rem 3rem 3rem;
	
	backdrop-filter: blur(8px);
	transform: scale(1.05);
	transition: ease-in-out 0.3s all;
	
}

.wochen_duft_container> div{
	height: 66%;
	overflow: hidden;
	
}


/*=============================================================*/
/*=====================Menuflakon===========================*/
/*=============================================================*/




.intro_2_spalten {
   display: flex;
    justify-content: space-between;
    align-items: center;      /* vertikal mittig */
              /* Umbrechen bei kleinen Screens */
    gap: 2rem;
}


.text-inhalt {
    flex: 1 1 300px;          /* wächst, schrumpft, min 300px */
    max-width: 600px;         /* verhindert zu breite Texte auf großen Screens */
}






/* kreisflakon designen */

.menu_anzeige_container {
	flex: 1 1 300px;          /* wächst, schrumpft, min 300px */
    max-width: 700px;         /* verhindert zu großen Kreis auf großen Screens */
    aspect-ratio: 1 / 1;      /* Kreis bleibt rund */
	
	
	
}

.menu_anzeige_container article{
	position: relative;
    width: 100%;
    height: 100%;
	
	
}

.menuspray{
	position: absolute;
    top: -30%; 
    left: 38%;
    transform: translateX(8%); /* optisch korrigiert */
    width: 50%;
	
}

.menuspray img {
	 width: 100%;
    height: auto;
}


.flakonfenster{
  width: 100%;
    height: 100%;
    background: rgba(239,173,187,1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    
}

.sockel{
	position: absolute;
    bottom: -1%;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 30px;
    background: rgba(239,173,187,1);
    
	
	
}

/*====================================================================================*/
/*====================================================================================*/
/*====================================================================================*/
/*====================================================================================*/
/*====================================================================================*/
/*================================ANFANG RESPONSIVE===================================*/
/*====================================================================================*/
/*====================================================================================*/
/*====================================================================================*/
/*====================================================================================*/
/*====================================================================================*/



/* ================= TABLET ================= */

@media (max-width: 1024px) {
	
	
	
	
	h4 {
		font-size: 1.4rem;
	}
	header {
		padding: 0.1rem;
	}
	.logocontainer {
  		
  		right: 1rem;	
  		width: 3rem;
  		height: 3rem;
  
  
  
  
}
	
	.fullvw {
		width:90%;
	}
    .text-inhalt, .menu_anzeige_container {
        flex: 1 1 45%;   /* beide passen nebeneinander */
    }
	.menuspray {
        transform: translateX(calc(-50% + 115px)); /* kleiner Verschiebung */
    }
	
	
	.parfums_anzeige_container {
		width: 60%;
	}
	
	.parfums_anzeige_container article{
	
	width:33%;
	
	}
	
	.logocontainer{
		width: 4rem;
	}
	#filterfenster {
		position: fixed;
		left: 75%;
    	width: 30%;
	}
	
}

/* Tablet / Mobile */
@media (max-width: 1000px) {
	body{
		padding: 0;
	}
	main{
		margin-left: 0;
	}
	
	h3 {
		font-size: 1.5rem;
	}
	
	
	.intro_2_spalten {
      margin-top: 10rem;
		flex-direction:column-reverse;
        align-items: center;
        text-align: center;
		
    }
	
	

    .text-inhalt, .menu_anzeige_container  {
         width: 100%;
		font-size: 1.5px;
    }
	nav {
		width: 30%;
		
		
	}
	nav.header {
		flex-direction:column;
		background:none;
		text-align: center;
}
	
	
	nav.kreis a {
		
		font-size: 0.8rem;
		gap: 0;
	}
	

    .menuspray {
        top: -30%;
        width: 60%;
        transform: translatex(5%)/*optische Korrektur kleiner */
    }

    .sockel {
        width: 40%;
    }
	
	
	/*parfumübersicht dufthimmel filter und flakons nebenrann*/
	
	
	#filterfenster {
		position: fixed;
		left: 52%;
    	width: 100%;
	  	
	}
	input, .filterbutton {
		width: auto;
	}
	input[type=text]{
		
		width:50%;
	}
	select {
	  padding: .5rem;
	  font-size: 1.2rem;
		width: 50%;
		
	}
	
	#filterfenster h5{
		font-size: 1.5rem;
		
		
	}
	.filterfenster_inhalt{
		
		width:70%;
	}
	
	.parfums_anzeige_container article{
	
	width:100%;
	
	}
	
	
	/*detailinfos dufthimmel (das mit dem schliessen button*/
	
	
	#schliessen_button{
	
	font-size: 2rem;
}





.detail_2_spalten div{
	
	flex-direction: column;
	justify-content: space-between;
	font-size:1.2rem;
	width:100%;
}
	

	.flexi {
		flex-direction: column;
		font-size: 1.2rem;
		width: 100%;
		
	}
	




	#detailinfos_kombinationen {
	flex-direction: column;
	
	
}
	
	.kombinationen_produkt {
	
	width:40%;
	
}
	
	
	/*Wochenduft container*/
	.spraykopfwoche{
	top: -4.8rem;
	width: 5rem;
	height: 5rem;
	transform: translateX(-20%);
		text-align: center;
	align-items: center;
	
}
	
	.wochen_duft_container {
		margin-top: 10rem;
	}
	.wochen_duft_container article{
    
	width:80%;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	border:1px solid white;
	
	/*overflow: hidden;*/
	backdrop-filter: blur(3px);
	transition: ease-in-out 0.5s all;
		
}


.vorschautext_titel_wochenduft
{
	margin: 0 auto;
	font-size: 2.5rem;
	font-weight: 300;
	text-align: center;
	border-radius: 10rem 10rem 3rem 3rem;
	
}
	
	

}