/* CSS Document */

* {
	font-family: Montserrat, sans-serif;
	box-sizing: border-box;
}

/*Container für Einstellungsfenster und Preview-Fenster*/
.app {
	width: 100%;
	max-width: 1300px;
	margin: 40px auto;
	display: grid;
	grid-template-columns: 320px 520px;
	justify-content: space-between;
	align-items: start;
	padding: 0 40px;
}

/*Einstellungs-Fenster*/
.controls {
	width: 520px;
	min-height: 520px;
	background: rgba(255,255,255, 0.4);
	border-radius: 20px;
	padding: 30px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	margin-left: -120px;
}

.control-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}

.controls label {
	font-weight: 400;
	font-size: 16px;
}

select,
input[type="color"]{
	width: 100%;
	padding: 12px;
	border-radius: 12px;
	border: none;
	font-size: 16px;
}

input[type="color"] {
	height: 48px;
	padding: 4px;
	cursor: pointer;
}

select, input[type="color"], input[type="range"] {
	width: 100%;
	padding: 12px;
	border-radius: 12px;
	border: none;
	font-size: 16px;
}

/*Preview-Fenster*/
.preview-area {
	width: 520px;
	min-height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url("bilder/konfigurator/vorschau_raum.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 24px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	margin-left: 120px;
}

.lamp-glow {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	mix-blend-mode: lighten;
	opacity: 0.85;
	z-index: 1;
	filter: none;
	inset: 0;
}

.light-layer {
	position: absolute;
	inset: 0;
	filter: blur(15px);
	opacity: 0.6;
	mix-blend-mode: lighten;
	z-index: 1;
	transform-origin: center;
	top: -20%;
	left: -20%;
	width: 150%;
	height: 150%;
} 


/*Schaltflächen für eigenen Verlauf*/
.custom-gradient {
	display: none;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.custom-gradient.active {
	display: grid;
}

/*Schaltflächen für Motiv-Einstelliungen*/
.custom-motif {
	display: none;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.custom-motif.active {
	display: grid;
}
/*Aussehen der Motive in der Preview*/
.motif {
	z-index: 2;
	filter: none;
	position: absolute;
	font-size: var(--motif-size, 30px);
	color: #facc15;
	line-height: 1;
	opacity: 0.65;
	mix-blend-mode: screen;
	transform: translate(-50%, -50%);
	text-shadow:
    0 0 6px currentColor,
    0 0 14px currentColor,
    0 0 24px currentColor;
}

.motif:nth-of-type(odd){
	opacity: 0.8;
}

/*Position der Motive in der Preview*/
.motif:nth-of-type(1) {top: 50%; left: 50%;}
.motif:nth-of-type(2) {top: 34%; left: 40%;}
.motif:nth-of-type(3) {top: 38%; left: 62%;}
.motif:nth-of-type(4) {top: 62%; left: 38%;}
.motif:nth-of-type(5) {top: 62%; left: 60%;}
.motif:nth-of-type(6) {top: 20%; left: 25%;}
.motif:nth-of-type(7) {top: 18%; left: 55%;}
.motif:nth-of-type(8) {top: 22%; left: 78%;}
.motif:nth-of-type(9) {top: 40%; left: 20%;}
.motif:nth-of-type(10){top: 45%; left: 75%;}
.motif:nth-of-type(11){top: 55%; left: 22%;}
.motif:nth-of-type(12){top: 58%; left: 78%;}
.motif:nth-of-type(13){top: 75%; left: 25%;}
.motif:nth-of-type(14){top: 78%; left: 50%;}
.motif:nth-of-type(15){top: 72%; left: 75%;}
.motif:nth-of-type(16){top: 10%; left: 40%;}
.motif:nth-of-type(17){top: 12%; left: 70%;}
.motif:nth-of-type(18){top: 28%; left: 10%;}
.motif:nth-of-type(19){top: 30%; left: 90%;}
.motif:nth-of-type(20){top: 50%; left: 5%;}
.motif:nth-of-type(21){top: 50%; left: 90%;}
.motif:nth-of-type(22){top: 70%; left: 12%;}
.motif:nth-of-type(23){top: 68%; left: 88%;}
.motif:nth-of-type(24){top: 85%; left: 35%;}
.motif:nth-of-type(25){top: 88%; left: 65%;}
.motif:nth-of-type(26){top: 6%;  left: 12%;}
.motif:nth-of-type(27){top: 8%; left: 28%;}
.motif:nth-of-type(28){top: 6%; left: 55%;}
.motif:nth-of-type(29){top: 10%; left: 78%;}
.motif:nth-of-type(30){top: 4%;  left: 90%;}
.motif:nth-of-type(31){top: 92%; left: 10%;}
.motif:nth-of-type(32){top: 94%; left: 30%;}
.motif:nth-of-type(33){top: 90%; left: 55%;}
.motif:nth-of-type(34){top: 95%; left: 75%;}
.motif:nth-of-type(35){top: 99%; left: 88%;}


/*Bewegungen der Farben und Motive*/
@keyframes rotate{
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes rotatemotif{
	0% { transform: translate(-50%, -50%) translate(0px, 0px); }
	10% { transform: translate(-50%, -50%) translate(10px, 5px); }
	20% { transform: translate(-50%, -50%) translate(15px, 10px); }
	30% { transform: translate(-50%, -50%) translate(15px, 20px); }
	40% { transform: translate(-50%, -50%) translate(10px, 25px); }
	50% { transform: translate(-50%, -50%) translate(0px, 30px); }
	60% { transform: translate(-50%, -50%) translate(-10px, 25px); }
	70% { transform: translate(-50%, -50%) translate(-15px, 20px); }
	80% { transform: translate(-50%, -50%) translate(-15px, 10px); }
	90% { transform: translate(-50%, -50%) translate(-10px, 5px); }
	100% { transform: translate(-50%, -50%) translate(0px, 0px); }
}

@keyframes pulse {
	0%,100% { opacity: 0.6; }
	50% { opacity: 1; }
}

@keyframes pulsemotif{
	0%,100% { opacity: 0.65; scale:1;}
	50% { opacity: 1; scale:1.1; }
}
		
@keyframes morph {
	0% { transform: scale(1) translate(0px ,0px); }
	50% { transform: scale(1.2) translate(20px, -20px); }
	100% { transform: scale(1) translate(0px,0px); }
		}

@keyframes morphmotif {
	0% {transform: translate(-50%, -50%) scale(1) translate(0px, 0px);}
	25% { transform: translate(-50%, -50%) scale(1.2) translate(10px, -10px); }
	75% { transform: translate(-50%, -50%) scale(1) translate(-10px, -10px); }
	100% { transform: translate(-50%, -50%) scale(1) translate(0px,0px); }
		}

@keyframes highlow {
	0% { transform: translateY(0px); }
	20% { transform: translateY(20px); }
	35% { transform: translateY(-50px); }
	50% { transform: translateY(100px); }
	65% { transform: translateY(-50px); }
	80% { transform: translateY(20px); }
	100% { transform: translateY(0px); }
		}

@keyframes highlowmotif {
	0% { transform: translate(-50%, -50%) scale(1) translateY(0px); }
	20% { transform: translate(-50%, -50%) scale(1.2) translateY(10px); }
	35% { transform: translate(-50%, -50%) scale(1) translateY(0px); }
	50% { transform: translate(-50%, -50%) scale(1) translateY(20px); }
	65% { transform: translate(-50%, -50%) scale(1.2) translateY(0px); }
	80% { transform: translate(-50%, -50%) scale(1) translateY(10px); }
	100% { transform: translate(-50%, -50%) scale(1) translateY(0px); }
		}

@keyframes crazy {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.2;
    filter: blur(2px) brightness(1);
  }

  10% {
    transform: translate(-20px, 15px) scale(1.3) rotate(5deg);
    opacity: 0.6;
    filter: blur(6px) brightness(1);
  }

  20% {
    transform: translate(30px, -10px) scale(0.9) rotate(-10deg);
    opacity: 0.4;
    filter: blur(3px) brightness(1.2);
  }

  30% {
    transform: translate(-40px, -30px) scale(1.5) rotate(20deg);
    opacity: 0.2;
    filter: blur(8px) brightness(1);
  }

  40% {
    transform: translate(20px, 40px) scale(0.9) rotate(10deg);
    opacity: 0.3;
    filter: blur(2px) brightness(1);
  }

  50% {
    transform: translate(-10px, 10px) scale(1.5) rotate(80deg);
    opacity: 0.8;
    filter: blur(10px) brightness(1);
  }

  60% {
    transform: translate(50px, -20px) scale(0.9) rotate(-30deg);
    opacity: 0.2;
    filter: blur(4px) brightness(1.3);
  }

  70% {
    transform: translate(-60px, 30px) scale(1.4) rotate(40deg);
    opacity: 0.8;
    filter: blur(8px) brightness(1);
  }

  80% {
    transform: translate(10px, -50px) scale(0.9) rotate(70deg);
    opacity: 0.2;
    filter: blur(3px) brightness(0.8);
  }

  90% {
    transform: translate(30px, 20px) scale(1.2) rotate(50deg);
    opacity: 0.3;
    filter: blur(6px) brightness(1);
  }

  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.2;
    filter: blur(2px) brightness(1);
  }
}

@keyframes crazymotif {
	0% {transform: translate(0, 0) scale(1) rotate(0deg);}
	10% {transform: translate(-20px, 15px) scale(1.3) rotate(5deg);}
	20% {transform: translate(5px, -10px) scale(0.5) rotate(-10deg);}
	30% {transform: translate(-10px, -10px) scale(1.5) rotate(20deg);}
	40% {transform: translate(7px, 12px) scale(0.9) rotate(10deg);}
	50% {transform: translate(-10px, 10px) scale(1.5) rotate(80deg);}
	60% {transform: translate(10px, -20px) scale(0.5) rotate(-30deg);}
	70% {transform: translate(-5px, 10px) scale(1.4) rotate(40deg);}
	80% {transform: translate(1px, -10px) scale(0.8) rotate(180deg);}
	90% {transform: translate(10px, 10px) scale(1.3) rotate(50deg);}
	100% {transform: translate(0, 0) scale(1) rotate(0deg);}
}

/*Button*/
button {
	display: inline-block;
	margin: 10px 0 0 0;
	padding: 14px 32px;
	background: #463979;
	border: none;
	color: white;
	border-radius: 40px;
	font-size: 14px;
	transition: 0.3s;
	cursor: pointer;
}

button a {
	text-decoration: none;
}

button:hover {
	background: #aaaae0;
	color: #463979;
}

/*Pop-up Fenster Warenkorb*/
.popup-overlay {
	display: none;
	position: fixed;
	z-index: 3;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
}

.popup-content {
	background-color: #fff;
	padding: 20px;
	border-radius: 20px;
	width: 300px;
	text-align: center;
	position: relative;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/*Pop-up Fenster schließen*/
.close-btn {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
}