/* Global Styles */

        [data-theme="dark"] {
            --bg-color: #202020;
            --text-color: #e2dcca;
            --header-bg: #222222;
            --hero-bg: #282828;
            --card-bg: #282828;
            --footer-bg: #111;
            --footer-text: #ccc;
			--green-highlight: #46b724;
			--darkness-arose: #080808;
			--less-darkness-arose: #101010;
			--flash-of-light: #FFFFF;
        }
		input[type=number] {
			-moz-appearance:textfield;
		}

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            color: var(--text-color);
            background-color: var(--less-darkness-arose);
            line-height: 1.6;
            display: flex;
            flex-direction: column;
        }
		.bold{
			font-weight: bold;
		}
		.warning{
			color: #FF5555;
		}
		
        a {
            text-decoration: none;
            color: inherit;
        }

        /* Navigation */
        header {
            display: flex;
            margin: 0;
            background: #222222;
            justify-content: space-between;
            align-items: center;
            color: var(--text-color);
            box-shadow: 0 0 1em #150011; /* Subtle shadow */
            height: 3.5em;
            z-index: 125;
            position: sticky;
            top: 0;
			border-bottom: solid 2px #8822bb;
        }

        .logo {
            margin: 0.5rem 0 0.5rem 0;
			height: 3rem;
			aspect-ratio: 1 / 1;
            background-image: url(favicon.png);
            background-size: cover;
            margin-left: 0.5em;
            margin-right: 0.5em;
        }


        nav {
            font-weight:bold;
            margin: 0;
            background-color: #1f1e1e;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            gap: 1em;
            height: 100%;
            padding-left: 0.5em;
            padding-right: 0.5em;
        }
		#cart-icon{
			background-image: url(cart.webp);
            aspect-ratio: 1/1;
			width: 2em;
            height: 2em;
			background-size: cover;
		}

        nav a {
            /*font-size: clamp(.1em, .5em, 1vw);*/
            transition: box-shadow 0.2s;
            /*font-size: clamp(1em, 1em, 3em);*/
        }
        nav a:hover{
            text-shadow: 0px 5px 10px rgba(0, 0, 0, 255); /* Darker shadow */ 
        }

        #account{
             aspect-ratio: 1/1;
             height: 3rem;
             background-color: #0e0d0b;
             border-radius: 50%; 
             align-items: center;
             text-align: center;
             font-size: 2.1em; 
             background-image: url(pfp.webp);
             background-size: cover;
             border: 2px solid #4061ce;
        }

		.account-dropdown {
			position: absolute;
			top: 8.5vh;
			right: 0.5em;
			z-index: 3;
			background-color: #222222;
			color: #99c7ff;;
			padding: 1em;
			font-weight: normal;
			border-radius: 1em;
			border: 2px solid #4061ce;
			/* Hide using transform */
			transform: scaleY(0);
			transform-origin: top;
			transition: transform 0.3s ease-out;
		}
		.account-dropdown.active {
			transform: scaleY(1);
		}      

        .account-menu ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 1em;
        }
        .Abutton{
			background-color: #121212;
			padding: 0.4em;
			border-radius: 0.5em;
			border: 2px solid #4061ce;
       }

        #lang{
		   witdh: 100%;
					 display: flex;
		   flex-direction: row;
		   justify-content: space-between;
		   gap: 1em;
		   margin:0;
		   padding:0;
        }

		.small_icon{
		   aspect-ratio: 1/1;
		   witdh: 2em;
					 height: 2em;
		   background-size: cover;
					 border-radius: 50%; 
		   padding: 0;
					 box-shadow: 1px 3px 3px rgb(12, 11, 8);	
		}
		#en{
		   background-image:url("English.webp");
		}

		#de{
		   background-image:url("German.webp");
		}

        

        .dropdown {
            position: absolute;
            top: 8.5vh;
            right: 0.5em;
            background-color: #121212;
            color: var(--text-color);
            padding: 10px;
            text-align: center;
            font-weight: normal;
            height: fit-content;
            width: fit-content;
            border-radius: 1em;
            border: 2px solid var(--green-highlight);
			animation: pop-in 0.5s ease-out forwards;
        }
		
        .fade-out {
            animation: fade-out 1s ease-out forwards;
        }
		@keyframes fade-out {
		  to { opacity: 0; }
		}

		@keyframes pop-in {
		  0% {
			opacity: 0;
			transform: scale(0.5);
		  }
		  50% {
			opacity: 1;
			transform: scale(1.1);
		  }
		  100% {
			opacity: 1;
			transform: scale(1.0);
		  }
		}
		
		
/*<CART>------------------------------------------------------------------------------*/		
        #shopping-cart {
			position: fixed;
			top: 0;
			right: -500px;           /* hidden offscreen */
			width: 420px;
			height: 100vh;
			background: #121212;
			box-shadow: -4px 0 5px #DD00FFaa;
			padding: 0.5rem;
			display: flex;
			flex-direction: column;
			transition: right 0.3s ease;
			z-index: 150;
			gap:0.5rem;
        }
		
		#shopping-cart.open {
			right: 0;
		}
		/* Close button */
		#cart-close {
			background: none;
			border: none;
			font-size: 2rem;
			align-self: flex-end;
			cursor: pointer;
			color: var(--text-color);
			align-self: right;
		}

		/* Empty state */
		#shopping-cart .empty {
			color: #777;
			text-align: center;
			margin-top: 2rem;
		}
		
		#shopping-cart h2{
			margin: 0;
			color: var(--text-color);
		}
		#Cart-header{
			justify-content: space-between;
			display: flex;
			flex-direction: row;
		}
		@media (max-width: 500px) {
         #shopping-cart {
            width:90vw;
         }
        }
		#cart-items{
			background-color: none;
			flex-direction: column;
		}
			
		div.cart-item{
			padding: 0.5em;
			border-radius: 0.5rem;
			background-color: var(--card-bg);
			flex-direction: row;		
			display: flex;
			justify-content: space-between;
			margin: .5rem 0;
			align-items: center;
		}
		
		
		
		
		button.remove-item{
			background: none;
			border: none;
			font-size: 1rem;
			cursor: pointer;
			color: var(--text-color);
		}
		#checkout-button{
			font-size: 1.5rem;
			font-weight: bold;
			border-radius: 0.5rem;
			background: rgb(212, 197, 108);
			border: none;
			box-shadow: none;
			cursor: pointer;
			padding: 0.5rem;
			display: flex;
			justify-content: center;
			align-items: center;
			background: radial-gradient(#332215, #553312 );
			color: #FFecaa;
			border: solid 3px #FF7711;
			box-shadow: 0 0 10px #FF771199;
	    }

		
		#cart-total-value{
			font-weight: bold;
		}

        #empty-cart{
			display: flex;
			color: #666666;	
			align-self: center;
			margin: 3rem 0;
		}
		.quantity-input {
			width: 1.5rem;
			background: #121212;
			color: var(--text-color);
			border:none;
			box-shadow: none;
			border-radius: 0.2rem;
			align-self: left;
			height: fit-content;
		}
		
		.item-name {
			font-size: 1rem;
			margin-right: 1em;
		}
		.item-subtotal {
			margin-left: 0.5rem;
		}


		
		
		
		
/*<BODY>-------------------------------------------------------------------------------*/		

        /* Hero Section */
        .hero {
            scroll-margin-top: 8vh; /* Adjust this value to the height of your sticky header */
            text-align: center;
            padding: 2rem 0.5rem;
            background: var(--less-darkness-arose);
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-position: center;
            background-attachment: fixed;
            background-size:cover;
            background-repeat: no-repeat;
            color: var(--text-color);
            padding-top: 1em;
        }

        .hero h2 {
            margin-top: 3vw;
            font-size: 4em;
            margin-bottom: 0;
        }
        .hero h3{
            font-size: 3em;
            margin-top: 0;
            margin-bottom: 1em;

        }

        .hero p {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: var(--text-color);
            max-width: 600px;
        }
		
		#hero_mail{
			background: url("mail.webp") no-repeat right;
			background-size: contain;
			background-position: right 0.5rem center;
			padding: 0.5rem;
			padding-right:5rem;
			border-radius: 0.8rem;
			border: solid 3px #2255FF;
			box-shadow: 0 0 10px #2255FF99;
			background-color: var(--darkness-arose);
		}
		#hero_mail span{
			font-weight: bold;
			background: #E2DCCA;
			background: linear-gradient(to right, #E2DCCA 0%, #E2DCCA 92%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			white-space: nowrap;
			font-size: clamp(1.3rem, 1.5rem, 1rem);
		}


        .hero a {
            text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Subtle shadow */
        }
		.FancyA{
			color: #d17f40;
			text-shadow: 0px 0px 8px #d17f4055;
		}

        
		#imgWrapper{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 3rem;
			padding-bottom: 5rem;
		}
		@media (max-width: 1024px){
			#imgWrapper{
				flex-direction: column-reverse;
			}
		}
		
        #Preview{
         background-repeat: no-repeat;
         background-position: center;
         background-attachment: scroll;
         background-size: contain;
         transition: opacity 0.5s ease-in-out;
         z-index: 0;
         background: none;
         max-height: 40vh;
		 max-width: 90vw;
       }
/*		@media (min-width: 500px){
			#Preview{
				width: 50vw;
				height: 25vw;
			}
		}*/
		
		
	   #theSteps{
		   background-color: #12121200;
		   display: flex;
		   flex-direction: column;
		   gap: 1em;
		   padding: 0 1rem;
           justify-content: center;
	   }

	   
       .explain_card{
		   min-width: 40vw;
		   border: solid 3px white;
		   border-radius: 1em;
		   padding: 0 0.5em 0 0.5em;
		   font-size: 1.5rem;
		   background-color: var(--darkness-arose);
	   }
	   #explain_card3{
			border: solid 3px #d35dd3;
			box-shadow: 0 0 10px #d35dd399;
	   }
	   #explain_card2{
			border: solid 3px #d17f40;
			box-shadow: 0 0 10px #d17f4099;
	   }
	   #explain_card1{
			border: solid 3px #4061ce;
			box-shadow: 0 0 10px #4061ce99;
	   }	
		
		
        #services{
            scroll-margin-top: 8vh; /* Adjust this value to the height of your sticky header */
            display: flex;
			flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2em;
            padding: 5rem 1rem 3rem 1rem;
			border-top: solid 2px #282828;
			border-bottom: solid 2px #282828;
            color: var(--text-color);
			background: linear-gradient(to bottom, var(--less-darkness-arose), var(--darkness-arose));
        }
		@media (max-width: 800px){
			#services{
				flex-direction: column;
			}
		}

        .service-card {
			background: radial-gradient(var(--darkness-arose) 50%, #221912);
            border-radius: 1rem;
            padding: 20px;
            flex: 1;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
			border: solid 3px #FF7711;
			box-shadow: 0 0 10px #FF771199;
			transition: 0.2s;
        }
        
        /* Hover effect for cards */
        .service-card:hover {
            transform: translateY(-5px); /* Lift the card */
			border-radius: 1.5rem;
        }

		#services h2{
		    margin-bottom: 0;	
		}
		
        #services h3 {
            font-size: 2rem;
            margin: 0;
        }

        #services p {
            margin-top: 0;
            color: var(--text-color);
            color: #b8b39f;
            padding-right: 1em;
        }
		
		#WhyS1{
			width: 60vw;
		}
		@media(max-width: 1024px){
			#WhyS1{
				width: fit-content;
			}
		}		
		
        #Why {
			padding-right: 0.5rem;
            scroll-margin-top: 8vh; /* Adjust this value to the height of your sticky header */
            font-family: Arial, sans-serif;
            color: var(--text-color);
			background: var(--darkness-arose);
        }
		.no-margin{
			margin: 0;
		}
       #WhyTxt{
            padding-left: 1rem;
			margin-right: 0,5rem;
            padding-bottom: 2em;
            float: none;
            font-size: 1rem;			
        }

        
        #Why h2 {
            font-size: 2rem;
            margin-bottom: .5em;
            color: var(--text-color);
            margin-left: .5em;
        }
        
        
        #Why p {
            margin-bottom: 15px;
        }
        
        #Why ul {
            list-style:square;
            margin-left: 20px;
            margin-bottom: 20px;
        }
        
        #Why li {
            margin-bottom: 10px;
        }

        #IMG2{
			max-height: 70vh;
            background-image: url(pot-to-hall-effect.webp);
            background-repeat: no-repeat;
            background-position: center;
            background-size:contain;
            float: right;
            shape-outside:margin-box;
        }
		#how{
			scroll-margin-top: 10vh; /* Adjust this value to the height of your sticky header */
			background: radial-gradient( var(--darkness-arose) 50%, #1e101e);
			margin-bottom: 3rem;
			margin-top: 3rem;
			border: solid 3px #d35dd3;
			box-shadow: 0 0 10px #d35dd399;
			border-radius: 1em;
			margin-left: 0.5em;
			width: fit-content;
		}

		#ArrowParent {
			position: relative; /* Needed so the ::before stays inside */
			padding: 0.5rem;
			z-index: 1;
			font-size: 1.4rem;
			color: var(--text-color);
		}

		#ArrowParent::before {
			content: "";
			position: absolute; /* VERY important */
			top: 0;
			left: -4px;
			width: 100%; /* make it fill the parent */
			height: 100%;
			background: url("Arrow.webp") no-repeat left;
			background-size: contain;
			filter: opacity(1);
			z-index: -1; /* behind the real content */
			filter: grayscale(1);
			filter: brightness(1);
			pointer-events: none;
		}
		#ArrowParent li{
			background: #12121266;
			padding: 0.2rem;
			border-radius: 0.5rem;
		}
		



/*--Footer------------------------------------------------------ */
        footer {
            scroll-margin-top: 8vh; /* Adjust this value to the height of your sticky header */
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            text-align: center;
            align-items: center;
            justify-content: space-around;
            padding: .5em;
            color: #99c7ff;
            background: var(--less-darkness-arose);
			border-top: solid 3px #4061ce;
			box-shadow: 0 0 10px #4061ce99;
			background: radial-gradient( var(--darkness-arose) 50%, #10131e);
        }
        footer h2{
            margin: .4em;
        }

        footer nav {
            display: flex;
			flex-direction: column;
            justify-content: center;
            width: fit-content;
            height: fit-content;
            border-radius: .5em;
            padding:0.5em;
            padding-left: 0.5em;
            padding-right: 0.5em;
			margin-bottom: 1em;
			background: var(--darkness-arose);
        }

        footer nav a {
            font-size: 1.1em;
			font-weight: normal;
        }
        footer nav div{
            border: 2px solid #4061ce;
            font-weight: normal;
            text-align: left;
			background: var(--darkness-arose);
            padding: .5em;
            border-radius: .5em;
        }
        footer nav div a{ 
            color: rgb(181, 207, 151);
            background-color: none;
            padding: 0em;
            border-radius: .5em;
            box-shadow: none;
            text-shadow: 1px 3px 3px rgb(12, 11, 8);
            font-size: 1em;
        }







    
/*Purchase page********************************************************************************************/

.flex-nowrap{
	display: flex;
	flex-wrap: nowrap;
}

.grayed-out {
  opacity: 0.5;
  filter:saturate(0.5);
  pointer-events: none;
  cursor: not-allowed;
}

#PS5bdy{
    background-color: #121212;
    color: var(--text-color);
	display: flex;
	justify-content: space-between;
	min-height: 100vh;
}


#PS5main{
    display: flex;
    flex-direction: row;
    margin-top: 2em; 
    overflow-x: hidden;
    align-items: top;
    padding-left: 1em;
    padding-right: 1em;
    gap: 1em;
}
@media (max-width: 768px) {
    #PS5main{
        flex-direction: column;
        }
}

#PS5main h2{
   margin-top: 0;
   margin-bottom: 0.5rem;
   font-size: 2rem;
   border-bottom: solid 3px var(--card-bg);
}
.PurchaseHighlight{
	   color: #fcaa58;
	   font-weight: bold;
}

#PricePS{
   font-weight: bolder;
   margin: 0;
   font-size: 2rem;
   border-radius: .2em;
}


#ProductImage{
	width: 45vw;
	height: 45vw; 
    border-radius: 1rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}  
@media (max-width: 768px) {
    #ProductImage {
		aspect-ratio: 1/1;
        width: 90vw;
		height: 90vw;
    }
}

#Info{
	font-size: 1rem;
    width: 60vw;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    #Info {
        width: 100%;
    }
}

#purchase_input_container{
	gap:1rem;
}
#controller_select{
	color: #FFdcaa;
	background-color: #121212;
	border-radius: 0.8rem;
	border: solid 2px #AA5505;
}


.add-to-cart{
	font-weight: bold;
	padding: 0.5rem;
	font-size: 1.5rem;
	border-radius: 0.8rem;
	cursor: pointer;
	width: fit-content;
	background: #553312;
	color: #FFdcaa;
	border: solid 2px #FF7711;
	box-shadow: 0 0 10px #FF771199;
}


#purchase p{
   padding: 0 1em;
   width: fit-content;
}


#PS5bdy footer{
    margin-top: 10vh;
}




/* login --------------------------------------------------------------------------------*/

.LoginRegTheme{
	color: #99c7ff;
	background: #121233;
	border: solid 2.5px #2255BF;
	/*box-shadow: 0 0 10px #2255FF99;*/
}

#toggleButton{
	font-size: 1.1rem;
    width: 5.5em;
    border-radius: 0.5em;
}

#logInBody{
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   /*background-image: url(404.webp);*/
   background: #121212;
   color: var(--text-color);
}
#logInmain{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
}

#AccInfo{
    margin-top: 3em;
    margin-bottom: 2em;
    background-color: #1e231e;
	border: solid 3px #2255FF;
	box-shadow: 0 0 10px #2255FF99;
	color: #99c7ff;
	padding: 0.5rem;
	border-radius: 1rem;
}
/* Default styles for larger screens */

/* For screens with a maximum width of 768px (commonly phones) */
@media (max-width: 768px) {
	#AccInfo {
	  width: 85vw;
	}
}

form{
	background: #121512;
	padding: 1em;
	border-radius: 0.5em;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	font-weight: bold;
}

#AccInfo input{
	font-size: 1.3rem;
    width: 100%;
    border-radius: .4em;
    margin-bottom: 3rem;
}

#loginButton{
	margin-top: 1rem;
    border-radius: 0.5em;
    font-size: 1.5rem;
	font-weight: bold;
    width: 100%;
	padding: 0.2rem;
 }
#password{
	margin-bottom: 0.5rem !important;
}

.link{
	color: #0073d8;
}
.link:hover{
	text-decoration: underline;
}

#PWtb{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-bottom: 3rem;
}

/* REGISTER-specific-------------------------------------------*/
#AccInfoREG{
	margin: 3rem 0 3rem 0;
	padding: .5em;
	background-color: #1e231e;
	border-radius: 1rem;
	border: solid 3px #2255FF;
	box-shadow: 0 0 10px #2255FF99;
	color: #99c7ff;
}
#AccInfoREG input{
	font-size: 1.3rem;
	border-radius: 0.5em;
	margin-bottom: 3rem;
}

#AccInfoREG select{
	font-size: 1.2rem;
    border-radius: 0.5rem;
	margin-bottom: 3rem;
}

#titleREG{
    margin-left: .5em;
}

#formREG{
	display: flex;
    flex-direction: column;
}




/* PurchaseDetail----------------------------------------------------------------*/

.address{
    background-color: var(--header-bg);
    width: fit-content;
    padding: 1em;
    border-radius: 1em;
	border: solid 2px #aaaaaa;
}

.adress_container{
	background-color: #151515;
	padding: 1rem;
	width: fit-content;
	height: fit-content;
	border: solid 3px #555555;
	border-radius: 1rem;
	border: solid 3px #2255FF;
	box-shadow: 0 0 10px #2255FF99;
}

.Orderinfo{
    margin: 0em;
    margin-top: 3em;
    margin-bottom:3em;
    padding: 1em;
    border-radius: 1em;
    background-color: var(--footer-bg);
    width: 50%;
   border: solid 4px #cc22cc;
}
.Orderinfo h1{
    margin: 0em;
}

  /* For screens with a maximum width of 768px (commonly phones) */
  @media (max-width: 768px) {
    .Orderinfo {
      width: 85vw;
    }
  }


#PurchaseDetailBody{
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
#PurchaseDetailBody main{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
}








/* Impressum--------------------------------------------*/

#Impressum div{
 color: #4b4a42;
}
#Impressum{
	background: #121212;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}