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

body{
    background-color: #131416;
    background-image: url(../images/website/backgrounds/background_BIG.webp);
    background-repeat: no-repeat;
    /*background-position: center top;*/
	background-position-x: 0%;
	background-position-y: 0%;
	background-size: cover;
    /*background-attachment: fixed;*/

    font:13px Helvetica67, "Trebuchet MS", sans-serif;
    color:#58564e;
    margin:0 auto;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center top,
        rgba(255,255,255,0.05),
        transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.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{
		top: 40px; /* Höhe der .bar */
		max-width:1250px;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 war 1250px */
    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 – INHALT ZENTRIEREN
============================ */

.bar {
    position: fixed;
	height: 40px;
    min-height: 40px;
    max-height: 40px;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    z-index: 9999;

    display: flex;
    justify-content: center; /* <<< WICHTIG */
	box-sizing: border-box;   /* <<< EXTREM WICHTIG */
}

/* Innerer Rahmen */
.bar-inner {
    width: 100%;
    max-width: 2000px;   /* exakt wie .website */
	height: 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.bar-inner * {
    white-space: nowrap;
}

.bar > * {
    max-width: 2000px;
    margin: 0 auto;
	line-height: 40px;
}

/* 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: 20px;          /* 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 .action-btn {
    position: absolute;
	font-size: 26px;
	font-family: 'Nunito', sans-serif;
	letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.25);
	color: red !important;
    top: 20px;          /* Abstand vom oberen Rand der .head */
    left: 95%;       /* zentriert horizontal */
    transform: translateX(-50%); /* zentriert genau */
    z-index: 10;     /* sicherstellen, dass es über dem Slider liegt */
}

.website .head .logo-container img {
    height: 80px;    
    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 .slider {
			position: relative;
			max-width: 900px;
			margin: auto;
			text-align: center;
			font-family: sans-serif;
			margin-top: -405px; /* überlappen */
		}
		.slides {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			height: 300px; /* Höhe des Sliders */
			perspective: 1200px;
		}

		.slide {
			position: absolute;
			width: 500px; /* Breite der Slider-Bilder */
			opacity: 0;
			transform: scale(0.8);
			transition: transform 0.6s ease, opacity 0.6s ease;
		}
			.slide img {
				width: 100%;
				height: auto;
				border-radius: 20px;
				box-shadow: 0 4px 12px rgba(0,0,0,0.18);
			}
			.slide.active {
				opacity: 1;
				transform: translateX(0) scale(1) rotateY(0deg);
				z-index: 3;
			}
			.slide.prev {
				opacity: 0.4;
				transform: translateX(-120px) scale(0.85) rotateY(50deg);
				z-index: 2;
			}
			.slide.next {
				opacity: 0.4;
				transform: translateX(120px) scale(0.85) rotateY(-50deg);
				z-index: 2;
			}
			.slide.prev { left: 10%; }
			.slide.next { right: 10%; }
			.arrow_btn_left,
			.arrow_btn_right {
				position: absolute;
				top: 110px;	/* Hälfte der Höhe des Sliders */
				z-index: 30;
				background: transparent;
				border: none;
				font-size: 24px;
				padding: 6px 14px;
				cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
				opacity: 0;
				transition: transform 0.2s ease, filter 0.2s ease;
			}
			.arrow_btn_left img,
			.arrow_btn_right img {
				width: 80px;
				height: auto;
				display: block;
				border: none;
				cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
			}	
			.arrow_btn_left { left: 100px; }
			.arrow_btn_right { right: 100px; }
			.arrow_btn_left:hover,
			.arrow_btn_right:hover {
				transform: scale(1.08);
				filter: drop-shadow(0 0 12px rgba(255, 200, 120, 0.9));
			}
			.slider:hover .arrow_btn_left,
			.slider:hover .arrow_btn_right {
				opacity: 1;
			}
			.dots {
				position: absolute;
				top: 240px;              /* Abstand vom oberen Bildrand */
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				gap: 8px;
				z-index: 20;
			}
			.dots span {
				width: 12px;
				height: 12px;
				background: rgba(244, 228, 176, 0.4);
				display: inline-block;
				border-radius: 50%;
				border: 1px solid #fad42d;
				cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
			}
			.dots span.active {
				background: #fad42d;
				transform: scale(1.25);
				box-shadow: 0 0 10px rgba(244, 228, 176, 0.75);
			}
			.dots span:hover {
				background: #fad42d;
				transform: scale(1.3);
				box-shadow: 0 0 8px rgba(244, 228, 176, 0.8);
			}
			.slide-content {
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: -32px;	/* Abstand zu Slider-Bildern*/
				opacity: 0;
				transform: translateY(10px);
				transition: opacity 0.6s ease, transform 0.6s ease;
			}
			.slide-content.active {
				opacity: 1;
				transform: translateY(0);
			}
			.slide-content h2 {
				margin: 8px 0;
				font-size: 14px !important;
				background: #798aba;
			}
			.slide-content p {
				color: #666;
				font-size: 12px !important;
			}
			.btn {
				display: inline-block;
				margin-top: 15px;
				padding: 10px 25px;
				/*background: #ff5a8a;*/
				background: rgba(0,0,0,0.4);
				color: #fff;
				text-decoration: none;
				font-size: 10px !important;
				border-radius: 25px;
				border: 1px solid rgba(255,255,255,0.75);
			}

@media (hover: none) and (pointer: coarse) {
  .arrow {
    display: none;
  }
}

/*		.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;*/
			/*background: rgba(255, 255, 255, 0.25);*/
			width:1080px;
			height: 1200px;
			margin:0 auto;
			/* Glass Background */
			/*background: #c5cbdc;*/
			backdrop-filter: blur(16px) /*saturate(180%)*/;
			opacity: 0.95;

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

			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;
		}
/* SCROLL-BAR FÜR PAGECONTAINER */
.website .pageContainer {
    max-height: calc(100vh - auto); 
    /* 520px = Header + Slider + Abstände */

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;                 /* Firefox */
    scrollbar-color: rgba(250,212,45,0.6) rgba(0,0,0,0.2);
}

/* Webkit Scrollbar (Chrome, Edge, Safari) */
.website .pageContainer::-webkit-scrollbar {
    width: 8px;
	direction: rtl; /* Scrollbar links: rtl oder rechts: ltr */
}

.website .pageContainer::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
}

.website .pageContainer::-webkit-scrollbar-thumb {
    background: rgba(250,212,45,0.6);
    border-radius: 10px;
}

.website .pageContainer::-webkit-scrollbar-thumb:hover {
    background: rgba(250,212,45,0.85);
}

/* SCROLL-BAR FÜR SCROLL-FORTSCHRITT  */
#scroll-progress-container {
    position: fixed;
    top: 40px;              /* exakt unter deiner Bar */
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 9998;          /* unter der Bar (9999) */
    pointer-events: none;
}

#scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #fad42d, #fad42d); /* #38bdf8 #22c55e */
    transition: width 0.1s linear;
}

/* ============================================
   VERTIKALE TRENNLINIE zwischen Content & Boxes
============================================ */
.pageContainer {
    position: relative; /* notwendig für das absolute Pseudo-Element */
}

.pageContainer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;

    /* Position exakt rechts vom Content */
    left: 754.5px; /* = 20px padding + 715px content-breite */

    width: 1.5px;
	/*background: #EAD69A;*/
    background: rgba(255,255,255,0.25);
	/*background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.15),
        rgba(255,255,255,0.35),
        rgba(255,255,255,0.15)
    );
    backdrop-filter: blur(2px);*/

    pointer-events: none; /* nichts anklickbares blockieren */
}

			.website .boxes{
				width:325px;
				float:right;
				margin-top:5px;
				margin-left: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;
							}

/* ============================
   DISCORD WIDGET – in Box
============================ */

.discord-widget {
    width: 100%;
    max-height: 300px;        /* gewünschte Höhe */
    overflow-y: auto;
    padding-right: 2px;       /* Platz für Scrollbar */
    box-sizing: border-box;
}

/* Sektionen (Channels / Mitglieder) */
.discord-section {
    margin-bottom: 10px;
}

.discord-section-title {
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    color: #fad42d;
}

/* Listen */
.discord-channel-list,
.discord-member-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Channels */
.discord-channel {
    font-size: 12px;
    padding: 2px 0;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Members */
.discord-member {
    font-size: 12px;
    padding: 2px 0 2px 14px;
    position: relative;
    color: #eaeaea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discord-member-dot {
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #43b581; /* online-grün */
}

/* Kleine Scrollbar (Webkit) */
.discord-widget::-webkit-scrollbar {
    width: 6px;
}
.discord-widget::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.25);
    border-radius: 3px;
}
.discord-widget::-webkit-scrollbar-thumb {
    background: rgba(250,212,45,0.65);
    border-radius: 3px;
}
/* ---------------------------------------
   DISCORD WIDGET – OPTISCH VERBESSERT
--------------------------------------- */

.discord-widget {
    padding: 10px 16px 15px 16px;
    color: #5f5d5d;
    font-family: "Open Sans", sans-serif;
	scrollbar-width: thin;
}

/* Titel */
.discord-title {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #f4d02b; /* Gold */
    margin: 5px 0 5px 0;
    letter-spacing: 1px;
}

/* Liste */
.discord-list {
    margin-bottom: 15px;
}

/* Jede Zeile */
.discord-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 5px;
    font-size: 14px;
    color: #5f5d5d;
}

/* Channel-Icon */
.discord-icon {
    width: 22px;
    text-align: center;
    opacity: 0.9;
}

/* Text */
.discord-text {
    flex: 1;
}

/* Hover-Effekte */
.channel-row:hover,
.member-row:hover {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    font-weight: bold;
    color: #000;
}

/* Status-Punkt */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Status-Farben */
.status-dot.online {
    background-color: #43b581;
}
.status-dot.idle {
    background-color: #faa61a;
}
.status-dot.dnd {
    background-color: #f04747;
}
.status-dot.offline {
    background-color: #747f8d;
}

/* Fehlermeldung */
.discord-widget-error {
    text-align: center;
    padding: 15px 0;
    font-size: 15px;
    color: #333;
}

			.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;
}
		
/* ============================
   BACK TO TOP BUTTON (Glass)
============================ */
#backToTop {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;

    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.35);

    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);

    color: white;
    font-size: 26px;
    font-weight: bold;
    line-height: 48px;

    cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
}

/* Sichtbar beim Scrollen */
#backToTop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover Effekt */
#backToTop:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 22px rgba(244,228,176,0.55);
    color: #fad42d;
}		
		
		
		
/* 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;
	margin-bottom: -20px; /* Abstand verringernt */
}

.account-dropdown-header .details {
    font-size: 12px;
    opacity: .8;
	margin-bottom: -10px; /* Abstand verringernt */
}

/* 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;
}

.badge-icon {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 36px;
    height: 36px;
}

.badge-icon img {
    width: 100%;
    height: 100%;
}

/* ============================
   DESKTOP HORIZONTAL MENU
============================ */
.desktop-navigation {
    position: absolute;
    left: 50%;
    top: 0;                       /* Bar-Oberkante */
    transform: translateX(-50%);  /* nur horizontal zentrieren */
    height: 40px;
    display: none;
    align-items: center;          /* echtes vertikales Centering */
    z-index: 5;
}

/* Navigation Links nebeneinander */
.desktop-navigation .navigation {
    display: flex;
    gap: 20px;
    align-items: center;
}

.desktop-navigation .navigation a {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    color: white;
    text-decoration: none;
    transition: color .25s ease;
	white-space: nowrap;			/* verhindert Zeilenumbruch */
}

.desktop-navigation .navigation a:hover {
    color: #fad42d;
}

/* Separator im Desktop ausblenden */
.desktop-navigation .nav-separator {
    display: none;
}

/* NUR DESKTOP SICHTBAR */
@media (min-width: 992px) {
    .desktop-navigation {
        display: flex;
    }
	    #menuButton {
        display: none;
    }
}

/* MOBILE BLEIBT UNVERÄNDERT */
@media (max-width: 991px) {
    .desktop-navigation {
        display: none;
    }
	    #menuButton {
        display: flex;
    }
}

/* ============================
   DESKTOP MENU – ACTIVE + HOVER
============================ */

/* Basis */
.desktop-navigation .navigation a {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;              /* zentriert garantiert */
    line-height: 40px;         /* saubere Schrift-Ausgabe */
    padding: 0;                /* kein padding-bottom mehr! */
    white-space: nowrap;
}

/* Underline (unsichtbar) */
.desktop-navigation .navigation a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;               /* Abstand zur Bar-Unterkante */
    width: 0%;
    height: 2px;
    background-color: #fad42d;
    transform: translateX(-50%);
    transition: width 0.25s ease;
}

/* Hover → Underline fährt aus */
.desktop-navigation .navigation a:hover::after {
    width: 100%;
}

/* Aktive Seite */
.desktop-navigation .navigation a.active {
    color: #fad42d !important;
    font-weight: 600;
}

/* Aktive Seite → Underline dauerhaft sichtbar */
.desktop-navigation .navigation a.active::after {
    width: 100%;
}

/* ============================================
   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;
}

/* ============================
   HEADER + SLIDER FADE SCROLL
============================ */

.website {
    padding-top: 520px; /* Höhe von Header + Slider */
}

.website .head {
    position: fixed;
    top: 40px !important;              /* wegen .headline + .bar */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1250px;

    z-index: 5;
    pointer-events: none;

    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Slider & Header weiterhin klickbar */
.website .head * {
    pointer-events: auto;
}

/* Zustand beim Scrollen */
.website .head.fade-out {
    opacity: 0;
    transform: translateY(-40px);
}

/* ============================
   CONTENT ÜBERLAPPT HEADER
============================ */

.website .container {
    position: relative;
    z-index: 20;
    margin-top: 0; /* <<< ÜBERLAPPUNG */
}

/* ============================
   HEADER SCROLL STATES
============================ */

.website .head {
    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
    will-change: opacity, transform;
}

.website .head.is-hidden {
    opacity: 0;
    transform: translate(-50%, -40px);
}

.website .head.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ===========================================
   GLASS IMAGE OVERLAY (BRAINFLY LIGHTBOX)
=========================================== */

.glass-overlay {
    display: none; /* unsichtbar bis aktiviert */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    background: rgba(0,0,0,0.55); /* dunkelt Hintergrund ab */
    justify-content: center;
    align-items: center;
    z-index: 999999; /* ganz oben */
}

.glass-overlay-content {
    position: relative;
    padding: 15px;
    border-radius: 20px;

    /* Glass Effekt */
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 8px 25px rgba(0,0,0,0.45);

    /* Größe individuell anpassbar: */
    width: 70%;
    max-width: 850px;
    max-height: 85vh;
    overflow: hidden;
}

.glass-overlay img {
    width: 100%;
    height: auto;
    /*border-radius: 12px;*/
	border: none;
    display: block;
    object-fit: contain;
    max-height: 80vh;
}

/* Close Button */
.glass-overlay-close {
    position: absolute;
    top: 6px;
    right: 14px;
    font-size: 34px;
    color: red;
    cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
    transition: 0.25s ease;
    font-weight: bold;
}

.glass-overlay-close:hover {
    color: #fad42d;
	cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
    transform: scale(1.1);
}

/* ============================
   SNOW OVERLAY (CANVAS)
============================ */
#snow-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;

    pointer-events: none; /* <<< extrem wichtig */
    z-index: 8;           /* über Header (5), unter Bar (9999) */

    display: block;
}