@charset "UTF-8";

/*
	Schwarz		#010102	rgba(1, 1, 2, 1.0)
	Dunkelgrau	#2C262D	rgba(44, 38, 45, 1.0)
	Grau		#49444E	rgba(73, 68, 78, 1.0)
	Hellgrau	#FAF8FB	rgba(250, 248, 251, 1.0)
	Weiß		#FCFCFC	rgba(252, 252, 252, 1.0)
	Rosa		#FCB2FF	rgba(252, 178, 255, 1.0)
	Blau		#9799FC	rgba(151, 153, 252, 1.0)
	Dunkelblau	#444067	rgba(68, 64, 103, 1.0)
	Lila		#684C72	rgba(104, 76, 114, 1.0)
	Rot			#DA4453	rgba(218, 68, 83, 1.0)
	Op. Blau	#9799FC1F	rgba(151, 153, 252, 1.0) (keine Transparenz)

	Gradient
	Background Blue		#444067	rgba(68, 64, 103, 1.0)
	Blau oben-rechts	#7e7fd3	rgba(126, 127, 211, 1.0)
	Rot unten-links		#b3344d	rgba(179, 52, 77, 1.0)
	Lila oben-links		#9c79b3	rgba(156, 121, 179, 1.0)
*/

/* =======================================
	Huon Popup
	------------ */

/* =======================================
	Verbessertes Huon Popup Design
	------------------------------------ */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
	background: radial-gradient(circle at top left, rgba(156, 121, 179, 0.8), transparent 80%),
				radial-gradient(circle at top right, rgba(126, 127, 211, 0.8), transparent 80%),
				radial-gradient(circle at bottom left, rgba(179, 52, 77, 0.8), transparent 80%),
				radial-gradient(circle at bottom right, rgba(68, 64, 103, 0.8), transparent 80%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(5px); /* Weicher Blur für den Hintergrund */
}

.popup-content {
	background: radial-gradient(circle at top left, rgba(156, 121, 179, 0.8), transparent 80%),
				radial-gradient(circle at top right, rgba(126, 127, 211, 0.8), transparent 80%),
				radial-gradient(circle at bottom left, rgba(179, 52, 77, 0.8), transparent 80%),
				radial-gradient(circle at bottom right, rgba(68, 64, 103, 0.8), transparent 80%);
    width: 90%;
    max-width: 800px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); /* Sanfterer Schatten */
    border-radius: calc(var(--border-radius) * 2); /* Leicht stärkere Abrundung */
    overflow-y: auto;
    max-height: 80%;
    scrollbar-width: thin; /* Dünner Scrollbalken (Firefox) */
    scrollbar-color: rgba(68, 64, 103, 0.8) rgba(156, 121, 179, 0.0); /* Scrollbalkenfarben */
}

@media (max-width: 768px) {
    .popup-content {
        width: 100%;
        max-height: 90%;
        border-radius: 0; /* Kein Rand für kleinere Bildschirme */
    }
}

/* Scrollbalken anpassen für Webkit-Browser (Chrome, Edge, Safari) */
.popup-content::-webkit-scrollbar {
    width: 10px; /* Breite des Scrollbalkens */
}

.popup-content::-webkit-scrollbar-track {
    background: rgba(250, 248, 251, 0.2); /* Hintergrund des Scrollbalkens */
    border-radius: var(--border-radius-md); /* Abrundung */
}

.popup-content::-webkit-scrollbar-thumb {
    background: #fff; /* Farbe des Scrollbalkens */
    border-radius: var(--border-radius-md); /* Abrundung */
}

.popup-content::-webkit-scrollbar-thumb:hover {
    background: #684C72; /* Hover-Farbe des Scrollbalkens */
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 50px;
    cursor: pointer;
    color: #fff;
    transition: color 0.3s;
}

.close-button:hover {
    color: #DA4453; /* Hover-Farbe für Schließen-Button */
}