/**************************************************/
/***											***/
/***	Created by:	Chyukasame					***/
/***											***/
/*** 	- Website:	www.chyukasame.de			***/
/*** 	- E-Mail:	info@chyukasame.de			***/
/*** 	- Skype:	chyukasame					***/
/*** 											***/
/**************************************************/  

body{
	background:#131416 url(../images/website/backgrounds/background.png) repeat;
	font:13px Helvetica67, "Trebuchet MS", sans-serif;
	color:#58564e;
	margin:0 auto;
}

.headline{
	background-color:#525252; /*Farbe war: 232323 */
	height:40px;
	/* position:relative;z-index:1; */
	width: 100%;
}

.website{
	/*background:url('../images/website/backgrounds/header.png') no-repeat center top;*/
	max-width:2000px;min-width:1080px;
	margin:0 auto;padding:0 auto;
}
	.website .head{
		max-width:1200px;min-width:1100px;
		margin:0 auto;margin-bottom:60px; /*war 150*/
		position:relative;
	}
/* ============================================
   NEW GLASS HEADER IMAGE (unter Slider)
============================================ */
.glass-header {
    width: 100%;
    max-width: 1250px;     /* minimal breiter als pageContainer */
    margin: 0 auto;
    margin-top: 10px;      /* exakt unter dem Slider Abstand – bleibt sauber */
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 8px 30px rgba(0,0,0,0.28);

    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
	z-index: 1;
}

.glass-header img {
    display: block;
    width: 100%;           /* minimal größer als Container */
    height: auto;
    object-fit: cover;
    opacity: 0.95;
    transition: opacity .35s ease, transform .35s ease;
}

/*.glass-header:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

.glass-header:hover img {
    opacity: 1;
    transform: scale(1.02);
}*/

		
/* ===================== NAVIGATION BAR ===================== */

.bar {
    position: fixed;
	height: 40px;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: space-between;   /* links & rechts sauber trennen */
    padding: 0px 0px;

    background: rgba(0, 0, 0, 0.75); /* FARBE DER OBEREN BAR */
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: background .4s, backdrop-filter .4s, border-color .4s,
                box-shadow .4s, opacity .4s;
}

/* Inhalt links gruppiert */
.left-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Scroll-Effekt */
.bar.scrolled {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(16px) saturate(200%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    opacity: 0.95;
}

/* ===================== MENU BUTTON ===================== */

.bar-menu-button {
    padding-top: 0;
	padding-left: 10px;
	width: 26px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bar-line {
    width: 100%;
    height: 3px;
    background: white;
    border-radius: 2px;
    transition: .35s ease;
}
.bar-menu-button.active .bar-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.bar-menu-button.active .bar-line:nth-child(2) {
    opacity: 0;
}
.bar-menu-button.active .bar-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ===================== DROPDOWN-MENÜ ===================== */
.glass-menu {
    position: absolute;
    top: 62px;
    left: 15px;
    width: 250px;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px) saturate(180%);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);

    opacity: 0;
    transform: translateY(-15px);
    padding: 15px;
    transition: opacity .35s ease, transform .35s ease;
	
	pointer-events: none; /*MUSS none, da sonst Links im eingeklappten Zustand wählbar*/
}

.glass-menu.open {
    opacity: 1;
    transform: translateY(0);
	pointer-events: auto;
}

/* ===================== MENU LINKS ===================== */
.glass-menu .navigation a {
    position: relative;
    display: block;
    padding: 10px 0;              /* vertikal padding, horizontal volle Breite */
    font-size: 19px;
    font-family: 'Oswald', sans-serif;
    color: white;
    text-decoration: none;
    /*overflow: hidden; -sorgte dafür, dass vorletzter Link in mobil verschwindet*/

    opacity: 0;
    transition: padding-left .15s ease, opacity .35s ease;
	transition-delay: 0.05s;
}

/* Gestaffeltes Einfliegen beim Öffnen */
.glass-menu.open .navigation a {
    opacity: 1;
    transform: translateY(0);
}
.glass-menu.open .navigation a:nth-child(1):not(:hover) {}
.glass-menu.open .navigation a:nth-child(2):not(:hover) { transition-delay: 0.10s; }
.glass-menu.open .navigation a:nth-child(3):not(:hover) { transition-delay: 0.15s; }
.glass-menu.open .navigation a:nth-child(4):not(:hover) { transition-delay: 0.20s; }
.glass-menu.open .navigation a:nth-child(5):not(:hover) { transition-delay: 0.25s; }
.glass-menu.open .navigation a:nth-child(6):not(:hover) { transition-delay: 0.30s; }
.glass-menu.open .navigation a:nth-child(7):not(:hover) { transition-delay: 0.35s; }
.glass-menu.open .navigation a:nth-child(8):not(:hover) { transition-delay: 0.40s; }
.glass-menu.open .navigation a:nth-child(9):not(:hover) { transition-delay: 0.45s; }
.glass-menu.open .navigation a:nth-child(10):not(:hover) { transition-delay: 0.50s; }
/* weitere Links ggf. anpassen */

/* ===================== HOVER-HINTERGRUND ===================== */
.glass-menu .navigation a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background: rgba(9, 12, 48, 0.55); /* goldener Hintergrund war 250, 212, 45, 0.25 */
    transition: width .35s ease;          /* sanftes Einwischen */
    z-index: -1;
}

.glass-menu .navigation a:hover::before {
    width: 100%;  /* komplette Breite */
}

/* ===================== HOVER-TEXT ===================== */
.glass-menu .navigation a:hover {
    color: #fad42d;
    padding-left: 15px;
    transition: color .25s ease, padding-left .25s ease-in-out; /* sofort, unabhängig vom Einflug */
}

/* ===================== ACCOUNT RECHTS ===================== */

.bar .account{
    display: flex;
	padding-right: 5px;
    align-items: center;
    font-size:12px;
}

.bar .account a{
    font-size:12px;
    color: white;
    padding: 2px 8px;  /* war 10px */
    line-height: 20px;  /* war 38px → viel zu hoch */
}

.bar .account a.inner{
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color .2s;
}
.bar .account a.inner:hover{
    background-color: #090c30;
}
.bar .account a.white{
    color: #FFF;
}
	
.website .head .logo-container {
    position: absolute;
    top: 10px;          /* Abstand vom oberen Rand der .head */
    left: 50%;       /* zentriert horizontal */
    transform: translateX(-50%); /* zentriert genau */
    z-index: 10;     /* sicherstellen, dass es über dem Slider liegt */
}

.website .head .logo-container img {
    height: 100px;    
    width: auto;
    border: none;
    display: block;
    transition: transform 0.3s ease; /* sanfte Animation bei Hover */
	transform-origin: center;
	cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
}

/* Mouseover: leicht vergrößern */
.website .head .logo-container img:hover {
    transform: translateX(0) scale(1.1); /* 10% größer */
}
	
		.website .head .image_slider{
			padding-top: 38px; /* BMD geändert: Höhe der .bar */
			width:538px;height:243px;
			position:relative; /*BMD geändert: relative;top:78px;left:525px*/
			margin: 0 auto;
			display: block;
			margin-top: -325px; /* überlappen */
			z-index: 5;
		}
			.website .head .image_slider img {
				pointer-events: auto; /*war none*/
				object-fit: cover;
				border: 1px solid #F4E4B0 !important;
				border-radius: 14px; /*war 4px*/
				/* Schatten für Tiefe */
				box-shadow:
				0 0 8px rgba(0, 0, 0, 0.45),   /* allgemeiner Schatten */
				0 0 10px rgba(244, 228, 176, 0.45); /* sanfter goldener Glow */
    
				/* optional: sanfte Animation beim Hover */
				transition: box-shadow 0.35s ease;
			}
			.website .head .image_slider:hover img {
				box-shadow:
				0 6px 20px rgba(0, 0, 0, 0.55),          /* stärkerer Schatten */
				0 0 16px rgba(244, 228, 176, 0.65),      /* intensiverer Glow */
				0 0 25px rgba(244, 228, 176, 0.35);      /* äußerer weicher Glow */
				transform: scale(1.02);					/* leichter Zoom des Sliders */
				transition: 0.3s ease;
			}
			
			.website .head .image_slider .slider-dots {
				position: absolute;
				bottom: 45px;                 /* Abstand über dem Bild */
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				gap: 8px;
				z-index: 10;
			}

			.slider-dots .dot {
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background: rgba(244, 228, 176, 0.4); /* gold-transparent */
				border: 1px solid #fad42d;
				cursor: pointer;
				transition: transform .25s ease, background .25s ease;
			}

			.slider-dots .dot.active {
				background: #fad42d;   /* aktiver Punkt gold voll */
				transform: scale(1.25);
				box-shadow: 0 0 10px rgba(244, 228, 176, 0.75);
			}
			.slider-dots .dot:hover {
				background: #fad42d;                /* heller Gold-Hover */
				transform: scale(1.3);              /* leicht größer */
				box-shadow: 0 0 8px rgba(244, 228, 176, 0.8);
			}


/*		.website .head .navigation{
			width:950px;
			margin:0 auto;padding:10px 0 3px 0;
			position:relative;top:114px;left:85px;
		}
			.website .navigation a{
				color:#fff;
				font-size:19px;font-family:'Oswald', sans-serif;
				padding:0 13px 0 13px;
			}
			.website .navigation a:hover{color:#fad42d;} */
			
	.website .container{
		/*background:url('../images/website/backgrounds/content_mid.png') repeat-y center top;*/
		max-width:2100px;min-width:1090px;
		margin:0 auto;padding:0 auto;
		padding-top: 25px;
	}
				
		.website .pageContainer{
			background:url('../images/website/backgrounds/content_mid.png') repeat-y center top;
			width:1080px;
			margin:0 auto;
			/* Glass Background */
			/*background: #c5cbdc;*/
			/*backdrop-filter: blur(16px) saturate(180%);*/

			border: 1px solid rgba(255, 255, 255, 0.25);

			border-radius: 20px;
			overflow: hidden; /* WICHTIG! Schneidet innere Rundungen ab */

			/* Schatten weich nach außen */
			box-shadow: 0 8px 40px rgba(0,0,0,0.25);

			padding-bottom: 20px;  /* damit nichts anstößt */
			transition: all .3s ease;
		}
			.website .boxes{
				width:325px;
				float:right;
				/*margin-top:5px;*/
				/*background: #bbc2d6;*/
				/*border-top-right-radius: 14px;
				border-right: 1px solid rgba(255,255,255,0.25);*/
			}	
					.website .boxes .box{
						margin-bottom:25px;
					}
					
					.website .boxes .box .box-head{
						width:290px;height:29px;
						font-size:16px;font-weight:bold;
						color:#fad42d;
						text-align:center;
						padding:10px 0 0 0;
						/*border-left:1px solid #F4E4B0;border-right:1px solid #F4E4B0; */
						/*background:#c5cbdc url('../images/website/content/headline.png') no-repeat; */
						background: rgba(121,138,186,0.85);
						backdrop-filter: blur(12px) saturate(180%);
						border: 1px solid rgba(255,255,255,0.55);
						border-top-left-radius: 10px;
						border-top-right-radius: 10px;
						box-shadow: 0 4px 10px rgba(0,0,0,0.18);
					}
					
					.website .boxes .box .box-inner{
						width:250px;
						padding:10px 20px 10px 20px;
						/*background-color:#c5cbdc;
						border:1px solid #F4E4B0;border-top:none;
						border-bottom-left-radius:4px;border-bottom-right-radius:4px;*/
						background: rgba(255,255,255,0.12);
						backdrop-filter: blur(12px) saturate(180%);
						border: 1px solid rgba(255,255,255,0.25);
						border-top: none;
						border-bottom-left-radius: 10px;
						border-bottom-right-radius: 10px;
						box-shadow: 0 4px 12px rgba(0,0,0,0.18);
						transition: all .25s ease;
					}
					/*.website .boxes .box:hover .box-inner {
						transform: translateY(-3px);
						box-shadow: 0 8px 20px rgba(0,0,0,0.25);
					}*/
					/*.website .boxes .box:hover .box-inner::after {
						content: "";
						position: absolute;
						inset: 0;
						border-top: none;
						pointer-events: none;
						border-bottom-left-radius: 10px;
						border-bottom-right-radius: 10px;						
						border: 1px solid rgba(250,212,45,0.35);
					}*/
/* ============================
   DOWNLOAD-BILD - GLASS LOOK mit Bildskalierung
============================ */

.download-glass-box {
    display: block;
    width: 290px !important;            /* Box bleibt fix */
	height: 116px !important;
    /*padding: 8px;            /* dein gewünschtes Polster bleibt erhalten */

    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px) saturate(180%);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.25);

    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    margin: center;
    transition: all .3s ease;
}

/* Bild skaliert auf 270px Breite */
.download-glass-box img {
    display: block;
    width: 270px;      /* <<< HIER SKALIEREN WIR ES! */
    height: auto;      /* proportional */
    margin: 8px auto 0 auto;
    border-radius: 6px;
	cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
}

/* Hover */
.download-glass-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

.download-glass-box:hover img {
    filter: drop-shadow(0 0 6px rgba(244,228,176,0.45));
}

						.website .boxes .box p.list{
							padding-right:17px;
							text-align:right;
						}
							.website .boxes .box p.list span.span{
								width:120px;
								padding-left:25px;

								color:hsl(0, 1%, 37%);
								text-align:left;
								float:left;
							}

			.website .content{
					width:715px;
					float:left;
					padding:5px 0 50px 20px;
					/*background: #c5cbdc;*/
				}
/* === FOOTER — GLASS LOOK === */
		.footer{
			/*background:url('../images/website/backgrounds/footer.png') no-repeat center;*/
			width: 100%;
			background: rgba(0, 0, 0, 0.65); /* leichte Transparenz */
			backdrop-filter: blur(10px) saturate(180%);
			border-top: 1px solid rgba(255, 255, 255, 0.55);

			/* Schatten nach oben (dezenter als beim Menü) */
			box-shadow: 0 -6px 20px rgba(0,0,0,0.22);

			margin-top: 40px; /* bleibt wie bisher */
		}
		.footer-inner{
			width:1058px;
			margin:0 auto;padding:25px 10px;
			color:#d6d6d6; /* war #bababa */
		}
		.footer-inner a:hover {
			color: #fad42d !important;
		}
		
		/* ICONS + TYPO */
.footer-inner b,
.footer-inner a,
.footer-inner i {
    font-size: 14px;
	color:#c2c2c2 !important;
}

/* Trenner – glassiger */
.footer-inner hr {
    height: 1px;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    margin: 12px 0;
}

/* Mobile separator leicht heller */
.mobile-separator {
    background: rgba(255,255,255,0.28);
}

/* Discord Icon Abstand */
.footer-inner img {
    margin-top: 15px;
    margin-right: 5px;
	height: 60px;
	width: auto;
	border: none;
	cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
}
/* Glow Effekt beim Hover */
/*.footer-inner img:hover {
    filter: drop-shadow(0 0 6px #fad42d) drop-shadow(0 0 12px #fad42d 0.85);
    transform: scale(1.03);
}*/
/* Hover aktiviert Animation */
.footer-inner img:hover {
    animation: neonPulse 1.4s ease-in-out infinite;
    transform: scale(1.03);
}

.footer-bottom {
    display: flex;
    align-items: center;
    margin-top: 10px;     /* Abstand zur Trennlinie */
    gap: 20px;            /* Abstand zwischen Logo und Text */
}

.footer-bottom-left img.footer-bottom-logo {
    height: 30px;         /* Logo-Größe anpassen, wenn du willst */
    display: block;
	margin-top: 1px;
}
.footer-bottom-logo img:hover {
    animation: neonPulse 1.4s ease-in-out infinite;
    transform: scale(0.03);
}	
.footer-bottom-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-bottom-right .footer-links {
    margin: 0;
    padding: 0;
}

.footer-bottom-right .footer-copy {
    margin-top: 5px;
    display: block;
}

/* Neon-Pulse Animation */
@keyframes neonPulse {
    0% {
        filter: drop-shadow(0 0 2px rgba(250, 212, 45, 0.45))
                drop-shadow(0 0 4px rgba(250, 212, 45, 0.45))
                drop-shadow(0 0 6px rgba(250, 212, 45, 0.45));
    }
    50% {
        filter: drop-shadow(0 0 4px rgba(250, 212, 45, 0.45))
                drop-shadow(0 0 10px rgba(250, 212, 45, 0.45))
                drop-shadow(0 0 20px rgba(250, 212, 45, 0.45));
    }
    100% {
        filter: drop-shadow(0 0 2px rgba(250, 212, 45, 0.45))
                drop-shadow(0 0 4px rgba(250, 212, 45, 0.45))
                drop-shadow(0 0 6px rgba(250, 212, 45, 0.45));
    }
}
/* Copyright */
.footer-copy {
    display: block;
    margin-top: 15px;
    opacity: 0.8;
}
		
		
		
		
		
/* Container für das Dropdown-Menü - siehe site_bar.php Sprachumschalter*/
.language-dropdown {
    position: relative; /* Relativ zum Button positionieren */
	cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
}

/* Dropdown-Inhalt */
.dropdown-content {
    display: none; /* Standardmäßig geschlossen */
    position: absolute;
    top: 110%; /* Dropdown Abstand unter dem Button */
    left: 4px; /* Dropdown links vom Button */
	cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
    /* Hintergrund transparent */
	background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px) saturate(180%);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);

    min-width: 16px; /* Verkleinere die Breite des Dropdowns */
    z-index: 1;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    padding: 0px 0; /* Verkleinere das Padding für ein kompakteres Dropdown */
    border-radius: 4px; /* Abgerundete Ecken */
    overflow: hidden; /* Verhindert, dass Inhalt außerhalb des abgerundeten Bereichs erscheint */
}

/* Wenn der Container die Klasse "open" hat, wird das Dropdown angezeigt */
.language-dropdown.open .dropdown-content {
    display: block;
}

/* Button-Styling */
.dropdown-btn {
    background-color: transparent; /* Keine Hintergrundfarbe */
    border: none;
    padding: 15px; /* Etwas Padding, um das Bild gut darzustellen */
    cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
	display: flex;
    align-items: center;
}

.dropdown-btn img {
    width: auto; /* Setze die Breite der Flaggenbilder */
    height: 12px; /* Setze die Höhe der Flaggenbilder */
	cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
}

/* Styling für die Dropdown-Links */
.dropdown-content a {
    color: black;
    padding: 6px 10px; /* Verkleinere das Padding der Links */
    text-decoration: none;
    display: block;
}

.dropdown-content a img {
    width: auto; /* Setze die Breite der Flaggenbilder */
    height: 12px; /* Setze die Höhe der Flaggenbilder */
	cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
}

.dropdown-content a:hover {
    background-color: #fad42d;
    border-radius: 4px; /* Abgerundete Ecken für die Hover-Effekte der Links */
}

/* DESKTOP: Original Slider Dot Position wiederherstellen */
@media (min-width: 992px) {
    .image_slider .slider-dots {
        position: absolute;
        bottom: 12px;   /* Original Desktop Position */
        left: 50%;
        transform: translateX(-50%);
        z-index: 50;
    }
}

/* ===================== ACCOUNT-DROPDOWN ===================== */

.account-dropdown {
    position: relative;
}

.account-btn {
    background: none;
    border: none;
    cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
    display: flex;
    align-items: center;
    gap: 6px;
    color: white;
    padding: 8px 10px;
    font-size: 14px;
}
.account-btn:hover span {
    color: #fad42d;
	cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
}
.account-btn:hover i {
    color: #fad42d;
}

.account-btn i.fa-caret-down {
    margin-left: 4px;
}

/* Dropdown-Stil angelehnt an glass-menu */
.account-dropdown-content {
    position: absolute;
    right: 0;
    top: 105%;
    min-width: 180px;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px) saturate(180%);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);

    padding: 8px 0;
    opacity: 0;
    pointer-events: none; /*war none*/

    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease;
    z-index: 99999;
}

.account-dropdown.open .account-dropdown-content {
    opacity: 1;
	top: 66px; /*menudropdown: 62px*/
    pointer-events: auto;
    transform: translateY(0);
}

.account-dropdown-content a {
    display: block;
    color: white;
    padding: 8px 15px;
    text-decoration: none;
    font-size: 14px;
    transition: background .25s ease, color .25s ease;
    position: relative;
}

/* Hover-Effekt wie im Menü */
.account-dropdown-content a:hover {
    background: rgba(9, 12, 48, 0.55);
    color: #fad42d;
}
.account-dropdown.open .account-dropdown-header img {
    transition: 0.3s ease;
	cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
}

.account-dropdown.open .account-dropdown-header:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 6px rgba(244, 228, 176, 0.6));
}


/* ===================== ACCOUNT DROPDOWN AVATAR ===================== */

.account-dropdown-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #F4E4B0;
    box-shadow: 0 0 10px rgba(244, 228, 176, 0.6);
    display: block;
    margin: 10px auto 5px auto;
}

.account-dropdown-header {
    text-align: center;
    color: white;
    padding: 5px 10px 10px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    margin-bottom: 10px;
}

.account-dropdown-header .welcome {
    font-size: 14px;
    font-weight: bold;
}

.account-dropdown-header .details {
    font-size: 12px;
    opacity: .8;
}

/* Dropdown allgemein */
.account-dropdown-content {
    position: absolute;
    right: 0;
    top: 105%;
    width: 220px;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px) saturate(180%);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);

    padding: 8px 0;
    opacity: 0;
    pointer-events: none; /*pointer-events: auto; oder none*/

    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease;
    z-index: 99999;
}

.account-dropdown.open .account-dropdown-content {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.account-dropdown-content a {
    display: block;
    color: white;
    padding: 8px 15px;
    text-decoration: none;
    font-size: 14px;
    transition: background .25s ease, color .25s ease;
}

.account-dropdown-content a:hover {
    background: rgba(9, 12, 48, 0.55);
    color: #fad42d;
}

/* Mobile Anpassung */
@media (max-width: 820px) {
    .account-dropdown-content {
        right: 5px;
        width: 200px;
    }

    .account-dropdown-avatar {
        width: 70px;
        height: 70px;
    }
}
/* ==== Korrektur: Mini-Avatar in der oberen Bar ==== */
.account-btn .account-avatar {
    width: 26px !important;
    height: 26px !important;
    border: 2px solid #F4E4B0;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 6px;
}
/*************************************************
 *   AVATAR SEITE – BOX IM NEWS-STIL
 *************************************************/

.avatar-newsbox {
    /* Glass Hintergrund */
    background: rgba(255, 255, 255, 0.12) url('../images/website/content/line.png') no-repeat bottom;
    backdrop-filter: blur(14px) saturate(180%);

    /* Form & Größe exakt wie vorher */
    padding: 18px 15px;
    border-radius: 10px;
    margin-bottom: 15px;

    /* dezenter Glass-Rahmen */
    border: 1px solid rgba(255, 255, 255, 0.25);

    /* Schatten ähnlich Menü, aber schwächer (Variante B) */
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);

    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Hover-Effekt wie deine News-Boxen */
.avatar-newsbox:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.18) url('../images/website/content/line.png') no-repeat bottom;
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
}

.avatar-newsbox:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(250, 212, 45, 0.35);
    border-radius: 6px;
    pointer-events: none; /*war none*/
    animation: glowNewsB 0.9s ease forwards;
}

@keyframes glowAvatarBox {
    from { opacity: 0; }
    to { opacity: 1; }
}

/*************************************************
 *   AVATAR-GALERIE INNEN
 *************************************************/

.avatar-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding: 10px 5px 20px 5px;
}

/*************************************************
 *   AVATAR-ELEMENTE (Bilder) – Verhalten bleibt
 *************************************************/

.avatar-item {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: 0.2s ease-out;
}

.avatar-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
}

.avatar-item:hover {
    transform: scale(1.10);
    border-color: #fadb54;
    box-shadow: 0 0 10px rgba(255,230,150,.6);
}

.avatar-item.active {
    border-color: #ffd54a !important;
    box-shadow: 0 0 14px rgba(255,221,120,0.95), 
                0 0 6px rgba(255,255,255,0.4) inset;
    transform: scale(1.15);
}

/*************************************************
 *   RESPONSIVE
 *************************************************/

@media (max-width: 600px) {
    .avatar-item {
        width: 75px;
        height: 75px;
    }

    .btnAvatarSave {
        width: 90%;
    }
}
/* --- Avatar speichern Button im 100% News-Button Stil --- */
.avatarSaveButton {
    display: inline-block;
    padding: 10px 26px;
    background: linear-gradient(to bottom, #f5d777 0%, #d8b34a 100%);
    border-radius: 6px;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 15px;
    border: 1px solid #caa945;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 4px rgba(0,0,0,0.3);
    text-transform: uppercase;
    cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
    transition: all 0.2s ease;
}

/* Hover wie News */
.avatarSaveButton:hover {
    background: linear-gradient(to bottom, #ffe28a 0%, #d5ae3d 100%);
    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.7),
        0 3px 6px rgba(0,0,0,0.35);
    transform: translateY(-2px);
    color: #ffffff !important;
}

/* Zentriert wie gewünscht */
.avatar-save-wrapper {
    text-align: center;
    margin-top: 20px;
}

/* ============================
   Rahmen-Galerie (gleich wie Avatar Galerie)
============================ */

.frame-gallery {
    display: grid;
    grid-template-columns: repeat(5, 120px);
    justify-content: center;
    gap: 22px 26px;
    margin-top: 20px;
}

/* Tablet */
@media (max-width: 1100px) {
    .frame-gallery {
        grid-template-columns: repeat(3, 120px);
    }
}

/* Mobile */
@media (max-width: 650px) {
    .frame-gallery {
        grid-template-columns: repeat(2, 120px);
    }
}

.frame-item {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid transparent;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.frame-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
}

.frame-item:hover {
    transform: scale(1.07);
    border-color: #ffe48d;
    box-shadow: 0 0 12px rgba(250, 212, 45, 0.65);
}

.frame-item.active {
    transform: scale(1.12);
    border-color: #ffe48d;
    box-shadow: 0 0 18px rgba(250, 212, 45, 0.85);
}
.badge-icon {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 36px;
    height: 36px;
}

.badge-icon img {
    width: 100%;
    height: 100%;
}
/* ============================
   LIVE PREVIEW – Avatar + Rahmen + Badge
============================ */

.avatar-preview-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    margin-top: 15px;
}

.avatar-preview {
    width: 180px;
    height: 180px;
    position: relative;
}

.avatar-preview img {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Rahmen über Avatar */
.preview-frame {
    pointer-events: auto; /*war none*/
}

/* Badge */
.preview-badge {
    position: absolute;
    width: 55px;
    height: 55px;
    bottom: -6px;
    right: -6px;
    object-fit: contain;
    pointer-events: auto; /*war none*/
}

/* ============================
   DESKTOP MENU TEXT (centered)
============================ */
.desktop-menu-text {
    display: none; /* mobile hidden */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    color: white;
    cursor: pointer;
    height: 38px;
    line-height: 38px;
    padding: 0 15px;
    transition: color .25s ease;
    z-index: 5;
}

.desktop-menu-text:hover {
    color: #fad42d; /* Hover-Farbe */
}

.desktop-menu-text.active {
    color: #fad42d; /* Menu geöffnet Farbe ff8000 */
}
/* ============================
   DESKTOP DROPDOWN (centered)
============================ */
.glass-menu-desktop {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%) translateY(-15px);
    width: 250px;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px) saturate(180%);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);

    opacity: 0;
    padding: 15px;
    pointer-events: none; /*war none*/
    transition: opacity .35s ease, transform .35s ease;
}

.glass-menu-desktop.open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
/* MOBILE: Burger sichtbar, Desktop-Menu-Text unsichtbar */
@media (max-width: 991px) {
    .desktop-menu-text {
        display: none;
    }
    #menuButton {
        display: flex;
    }
}

/* DESKTOP: Menu-Text sichtbar, Burger unsichtbar */
@media (min-width: 992px) {
    .desktop-menu-text {
        display: block;
    }
    #menuButton {
        display: none;
    }
}
/* ============================================
   FIX: Desktop-Dropdown Navigation korrekt stylen
============================================ */
.glass-menu-desktop .navigation {
    display: block !important;
    width: 100%;
    text-align: left;
    margin: 0;
    padding: 0;
}

.glass-menu-desktop .navigation a {
    display: block !important;
    padding: 10px 0;
    font-size: 19px;
    font-family: 'Oswald', sans-serif;
    color: white;
    text-decoration: none;
    opacity: 1; /* Desktop sofort sichtbar */
    transition: padding-left .15s ease, color .25s ease;
    position: relative;
}

/* Hover Hintergrund wie mobile */
.glass-menu-desktop .navigation a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background: rgba(9, 12, 48, 0.55);
    transition: width .35s ease;
    z-index: -1;
}

.glass-menu-desktop .navigation a:hover::before {
    width: 100%;
}

.glass-menu-desktop .navigation a:hover {
    color: #fad42d;
    padding-left: 15px;
}
/* ============================================
   Fix: Animationsverhalten Desktop = Mobile
============================================ */

/* Grundzustand: unsichtbar, leicht nach oben verschoben */
.glass-menu-desktop .navigation a {
    opacity: 0 !important;
    transform: translateY(-12px);
    transition:
        opacity .35s ease,
        transform .35s ease,
        padding-left .15s ease,
        color .25s ease;
}

/* Beim Öffnen sichtbar + positioniert */
.glass-menu-desktop.open .navigation a {
    opacity: 1 !important;
    transform: translateY(0);
}

/* Staffelung – identisch wie mobile */
.glass-menu-desktop.open .navigation a:nth-child(1):not(:hover) {}
.glass-menu-desktop.open .navigation a:nth-child(2):not(:hover) { transition-delay: 0.10s; }
.glass-menu-desktop.open .navigation a:nth-child(3):not(:hover) { transition-delay: 0.15s; }
.glass-menu-desktop.open .navigation a:nth-child(4):not(:hover) { transition-delay: 0.20s; }
.glass-menu-desktop.open .navigation a:nth-child(5):not(:hover) { transition-delay: 0.25s; }
.glass-menu-desktop.open .navigation a:nth-child(6):not(:hover) { transition-delay: 0.30s; }
.glass-menu-desktop.open .navigation a:nth-child(7):not(:hover) { transition-delay: 0.35s; }
.glass-menu-desktop.open .navigation a:nth-child(8):not(:hover) { transition-delay: 0.40s; }
.glass-menu-desktop.open .navigation a:nth-child(9):not(:hover) { transition-delay: 0.45s; }
.glass-menu-desktop.open .navigation a:nth-child(10):not(:hover) { transition-delay: 0.50s; }
/* Beim Schließen sofort ausblenden */
.glass-menu-desktop:not(.open) .navigation a {
    transition-delay: 0s !important;
}