body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    background-color: #360043;
	background-image: url(./main_bg.webp);
	background-repeat:no-repeat;
	background-position: center top;
    overflow-y: auto; /* Erlaubt Scrollen, wenn Inhalt den Viewport übersteigt */
}

h1, h2, h3, h4, h5, p {
	color: #fff;
	font-weight: 100;
    font-size: 18px;
}

#logo {
    max-width: 100%; /* Stellt sicher, dass das Logo auf kleinen Bildschirmen skaliert */
    height: auto;
}

@media screen and (min-width: 992px) {
	#logo {
		max-width: 100%; /* Stellt sicher, dass das Logo auf kleinen Bildschirmen skaliert */
		position:fixed;
		height: auto;
		bottom:0%;
		left:18%;
		z-index:1000;
	}
}


#hauptmenue, #schwierigkeitsauswahl {
    background-image: linear-gradient(0deg, #000000aa 0%, #00000000 100%);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 80px;
    text-align: center;
    /* width: 90%;  Breite anpassen */
    max-width: 900px; /* Maximale Breite festlegen */
    box-sizing: border-box; /* Padding in die Breite einbeziehen */
}

#spielbereich {
    background-image: linear-gradient(0deg, #000000aa 0%, #00000000 100%);
    padding: 20px 20px 20px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* width: 90%;  Breite anpassen */
    max-width: 900px; /* Maximale Breite für den Spielbereich */
    box-sizing: border-box;
}

#puzzle-container {
    display: grid;
    border: 1px solid #222;
    margin: 0px auto 20px;
    flex-shrink: 0; /* Verhindert, dass der Container schrumpft */
    justify-content: center;
    align-items: center;
    width: 100%; /* Wichtig für die responsive Anpassung */
    height: auto; /* Höhe basierend auf Breite anpassen */
    aspect-ratio: 1 / 1; /* Hält das Seitenverhältnis quadratisch */
	box-shadow: 0px 0px 64px #FF005B44;
}

.puzzle-teil {
    border: 1px solid #222;
    background-position: center;
    cursor: grab;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    /* Übergang für Animationen */
    /* transition: transform 0.1s ease-out, border-color 0.1s ease-in-out; - Animation für Rotation*/
}

.puzzle-teil.ghost-hidden {
    background-image: none !important;
    background-color: #333;
    border-color: #555;
}

.puzzle-teil.dragging {
    /* Diese Klasse wird nicht mehr für die visuelle Darstellung des gezogenen Teils verwendet,
       sondern nur zur Logik, um das Original-Teil als "gezogen" zu markieren und Pointer-Events zu deaktivieren.
       Die visuelle Darstellung übernimmt .puzzle-teil-clone. */
    cursor: grabbing;
    pointer-events: none; /* Wichtig, damit darunterliegende Elemente als Drop-Ziel erkannt werden */
}

/* Stil für den transparenten Klon beim Ziehen */
.puzzle-teil-clone {
    position: fixed; /* Fixed, um der Maus im Viewport zu folgen */
    border: 1px solid #222;
    background-position: center;
    cursor: grabbing;
    box-sizing: border-box;
    opacity: 0.7; /* Halbtransparent */
    pointer-events: none; /* Ermöglicht das Erkennen von Elementen darunter */
    z-index: 10000; /* Immer im Vordergrund */
    transition: none; /* Keine Übergänge für den Klon beim Ziehen */
}


#spiel-info {
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
}

#schwierigkeits-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
	margin-bottom: 25px;
	opacity: 1;
}



#schwierigkeits-buttons button,
#abbrechen-schwierigkeit,
#abbrechen-modus,
#highscore-ok,
#fullscreen-button,
#music-toggle-button-game,
#achievements-toggle-button,
#stats-toggle-button,
#sound-toggle-button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    font-size: 1em;
	opacity: 0.75;
    background-image: linear-gradient(180deg, #6b0060 0%, #360042 100%);
    box-shadow: 0px 0.2222em 0 #6b0060;
    min-width: 50px; /* Maximale Breite für Buttons */
    height: 50px;
    margin-top: 10px;
	margin-bottom:10px;
    box-sizing: border-box;
    --text-shadow-color: #6b0060;
    --text-shadow-size: 0.1em;
    --text-shadow-sizeneg: -0.1em;
    text-shadow: var(--text-shadow-size) var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-size) var(--text-shadow-sizeneg) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) var(--text-shadow-sizeneg) 0 var(--text-shadow-color), var(--text-shadow-size) 0px 0 var(--text-shadow-color), 0px var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) 0px 0 var(--text-shadow-color), 0px var(--text-shadow-sizeneg) 0 var(--text-shadow-color);
    -webkit-font-smoothing: antialiased;
}

/* Stile für den neuen Modus-Auswahl-Bildschirm */
#spielmodus-auswahl {
    background-image: linear-gradient(0deg, #000000aa 0%, #00000000 100%);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 80px;
    text-align: center;
    max-width: 900px;
    box-sizing: border-box;
}

#spielmodus-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 25px;
}

/* Stil für die neuen Modus-Buttons, lehnt sich an bestehende an */
.modus-button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    font-size: 1em;
    opacity: 0.75;
    background-image: linear-gradient(180deg, #6b0060 0%, #360042 100%);
    box-shadow: 0px 0.2222em 0 #6b0060;
    min-width: 140px;
    height: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    --text-shadow-color: #6b0060;
    --text-shadow-size: 0.1em;
    --text-shadow-sizeneg: -0.1em;
    text-shadow: var(--text-shadow-size) var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-size) var(--text-shadow-sizeneg) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) var(--text-shadow-sizeneg) 0 var(--text-shadow-color), var(--text-shadow-size) 0px 0 var(--text-shadow-color), 0px var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) 0px 0 var(--text-shadow-color), 0px var(--text-shadow-sizeneg) 0 var(--text-shadow-color);
    -webkit-font-smoothing: antialiased;
}

.modus-button:hover {
    opacity: 1;
}

#schwierigkeits-buttons button {
    width: 120px;
    height: 100px; /* Feste Höhe für Schwierigkeits-Buttons */
    max-width: none; /* Überschreibt max-width für diese Buttons */
	white-space: pre-line;
}


#schwierigkeits-buttons button:hover,
#abbrechen-schwierigkeit:hover,
#abbrechen-modus:hover,
#highscore-ok:hover,
#fullscreen-button:hover,
#achievements-toggle-button:hover,
#music-toggle-button-game:hover,
#stats-toggle-button:hover,
#sound-toggle-button:hover {
    background-color: #0056b3;
	opacity: 1;
    background-image: linear-gradient(180deg, #6b0060 0%, #360042 100%);
    box-shadow: 0px 0.2222em 0 #6b0060;
}


.optionbar{
  position: fixed;
  bottom: 0px;
  z-index:900;
  width:100%;
  background-color: #6b0060aa;
  text-align: center;
  border-top: 3px solid #360042aa;
  	background-image: url(./main_bg.webp);
	background-repeat:no-repeat;
	background-position: center top;
	box-shadow: 0px 0.2222em 50px #000000aa;
}

.optionbar h5 {
	font-size:12px;
	color:#ffffff44;
	Position:absolute;
	right:5%;
	bottom:5px;
}


#zurueck-zum-menue,
#restart-level-button,
#start-ghost-game-button,
#peek-button,
#edge-filter-button,
#hint-button{
	padding: 10px 15px;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 1em;
	opacity: 0.75;
    background-image: linear-gradient(180deg, #6b0060 0%, #360042 100%);
    box-shadow: 0px 0.2222em 0 #6b0060;
    max-width: 155px; /* Maximale Breite für Buttons */
	min-width:50px;
    height: 50px;
    box-sizing: border-box;
    --text-shadow-color: #6b0060;
    --text-shadow-size: 0.1em;
    --text-shadow-sizeneg: -0.1em;
    text-shadow: var(--text-shadow-size) var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-size) var(--text-shadow-sizeneg) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) var(--text-shadow-sizeneg) 0 var(--text-shadow-color), var(--text-shadow-size) 0px 0 var(--text-shadow-color), 0px var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) 0px 0 var(--text-shadow-color), 0px var(--text-shadow-sizeneg) 0 var(--text-shadow-color);
    -webkit-font-smoothing: antialiased;
}

#zurueck-zum-menue:hover,
#restart-level-button:hover,
#start-ghost-game-button:hover,
#peek-button:hover,
#edge-filter-button:hover,
#hint-button:hover{
	opacity: 1;
    background-image: linear-gradient(180deg, #6b0060 0%, #360042 100%);
    box-shadow: 0px 0.2222em 0 #6b0060;
}

#edge-filter-button.active {
    background-image: linear-gradient(180deg, #ffacac 0%, #e45a84 100%);
    box-shadow: 0px 0.2222em 0 #e45a84;
    opacity: 1;
}

/* Stil für Puzzleteile, die ausgeblendet werden sollen */
.puzzle-teil.filter-hidden {
    filter: grayscale(100%) brightness(0.4);
    transition: filter 0.3s ease-in-out;
}


#highscore-liste {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    max-height: 300px; /* Maximale Höhe, um Scrollen zu ermöglichen */
    overflow-y: auto; /* Scrollbar, wenn Inhalt über Max-Höhe hinausgeht */
}

#highscore-liste li {
    margin-bottom: 5px;
	color: #fff;
    font-size: 1em;
}


#motiv-auswahl {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
	margin-bottom: 35px;
}

/* Diese Regel ersetzt die alte .motiv-bild und wird nun von .motiv-item verwendet */

.motiv-item-random {
    width: 100px;
    height: 100px;
    border: 1px solid #ff3465aa;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
	opacity: 1;
    transition: transform 0.2s ease, opacity 0.2s ease;
	filter: blur(0px);
	background-color: #ffffffaa;
    background-blend-mode: luminosity;
    display: flex; /* Für die Zentrierung des Motivnamens */
    align-items: center; /* Vertikal zentrieren */
    justify-content: center; /* Horizontal zentrieren */
    text-align: center; /* Textausrichtung für den Namen */
    position: relative; /* Für die Positionierung des Namens-Spans */
}

.motiv-item-random:hover {
    opacity: 1;
	transform: scale(1.25);
	filter: blur(0px);
    background-blend-mode: unset;
	z-index:100;
}

.motiv-item {
    width: 100px;
    height: 100px;
    border: 1px solid #360042;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
	opacity: 0.75;
    transition: transform 0.2s ease, opacity 0.2s ease;
	filter: blur(0px);
	background-color: #ffffffaa;
    background-blend-mode: luminosity;
    display: flex; /* Für die Zentrierung des Motivnamens */
    align-items: center; /* Vertikal zentrieren */
    justify-content: center; /* Horizontal zentrieren */
    text-align: center; /* Textausrichtung für den Namen */
    position: relative; /* Für die Positionierung des Namens-Spans */
}

.motiv-item .motive-name {
    color: #fff; /* Farbe des Motivnamens */
    font-size: 0.8em; /* Kleinere Schriftgröße für den Namen */
    font-weight: bold; /* Fett für bessere Lesbarkeit */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); /* Schatten für bessere Lesbarkeit auf dem Bild */
    position: absolute; /* Positionieren über dem Bild */
    bottom: 5px; /* Etwas Abstand vom unteren Rand */
    left: 0;
    right: 0;
}


.motiv-item:hover {
    opacity: 1;
	transform: scale(1.25);
	filter: blur(0px);
    background-blend-mode: unset;
	z-index:100;
}


.puzzle-teil.eingrastet {
    cursor: default;
    border: 1px solid #ff3465aa !important;
    z-index: 1;
}

.puzzle-teil.dragging {
    touch-action: none;
}

#puzzle-container {
    touch-action: pan-y pinch-zoom;
}


.puzzle-geloest .puzzle-teil {
    border: none !important;
}

.puzzle-geloest #puzzle-container {
    border: none !important;
}


.spiel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
	margin-top: 20px;
    width: 100%; /* Nimmt die gesamte Breite ein */
    padding: 0 10px; /* Etwas Padding an den Seiten */
    box-sizing: border-box;
}

#highscore-anzeige {
	top: 50%; /* Startposition von oben, wird später mit JS angepasst */
    left: 50%;
    transform: translate(-50%, -50%); /* Zentriert das Element */
	text-align: center;
	padding: 50px;
	position: fixed;
	z-index: 9500;
	background-color: rgba(0,0,0, 0.7); /* Deckenderes Schwarz */
	overflow-x: hidden;
	transition: 0.5s;
	display: none;
	border-radius: 8px;
	background-image: url(https://www.puzzle-crush.com/wp-content/game/assets/sparkle.gif);
	background-size:cover;
	background-blend-mode: color-dodge;
    width: 90%; /* Breite anpassen */
    max-width: 600px; /* Maximale Breite */
    box-sizing: border-box;
}

#meldungContainer {
    margin-bottom: 20px;
}

.shadowtxt {
    --text-shadow-color: #60086A;
    --text-shadow-size: 0.1em;
    --text-shadow-sizeneg: -0.1em;
    text-shadow: var(--text-shadow-size) var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-size) var(--text-shadow-sizeneg) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) var(--text-shadow-sizeneg) 0 var(--text-shadow-color), var(--text-shadow-size) 0px 0 var(--text-shadow-color), 0px var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) 0px 0 var(--text-shadow-color), 0px var(--text-shadow-sizeneg) 0 var(--text-shadow-color);
    -webkit-font-smoothing: antialiased;
}


/* Eingabefeld für den Spielernamen */
#spielername-eingabe {
    width: calc(100% - 20px);
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
}
#spielername-eingabe::placeholder {
    color: #666;
}


/* Animationen */
@keyframes wobble {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(-3deg); }
    30% { transform: rotate(3deg); }
    45% { transform: rotate(-2deg); }
    60% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
    90% { transform: rotate(1deg); }
    100% { transform: rotate(0deg); }
}

@keyframes flash {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(0, 255, 0, 0.5); }
}

.puzzle-teil.correct-animation-wobble {
    animation: wobble 1.5s ease-in-out;
}

.puzzle-teil.correct-animation-flash {
    animation: flash 0.5s ease-in-out;
}





.hint-flash {
    /* Temporär die Position anpassen, um den Effekt zu zeigen */
    position: absolute !important; /* Wichtig, um über anderen Teilen zu sein */
    z-index: 1000; /* Sicherstellen, dass es über anderen Elementen liegt */
    animation: hintFlash 1.5s ease-out forwards; /* Animation anwenden */
    border: 2px solid yellow; /* Optional: Gelber Rahmen für bessere Sichtbarkeit */
    box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* Optional: Leuchten-Effekt */
}

@keyframes hintFlash {
    0% { opacity: 0; transform: scale(1); }
    10% { opacity: 1; transform: scale(1.05); } /* Kurz aufleuchten und vergrößern */
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1); } /* Wieder ausblenden und schrumpfen */
}

.hint-flash-clone {
    position: absolute; /* Wichtig für freie Bewegung außerhalb des Grids */
    opacity: 0; /* Startet unsichtbar */
    transform: scale(1); /* Startet in normaler Größe */
    /* Die Transition sorgt für die Animation, die Werte werden im JS gesetzt */
    transition: transform 1.5s ease-out, opacity 1.5s ease-out, border 0.1s linear, box-shadow 0.1s linear;
    pointer-events: none; /* Klick-Events auf dem Klon ignorieren */
    box-sizing: border-box; /* Wichtig, um Padding/Border korrekt zu handhaben */
}

.hint-glow-original {
	z-index: 1000;
	border: 2px solid yellow;
	opacity:0.5;
    box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* Leichtes Leuchten */
    transition: box-shadow 0.5s ease-out; /* Weicher Übergang für den Glüheffekt */
}



@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #3E1E68;
    overflow: hidden;
	z-index:-10;
	opacity:0.3;
}

.background span {
    width: 50vmin;
    height: 50vmin;
    border-radius: 50vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 10;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #583C87;
    top: 27%;
    left: 57%;
    animation-duration: 52s;
    animation-delay: -181s;
    transform-origin: -19vw 17vh;
    box-shadow: -100vmin 0 12.96934732141837vmin currentColor;
}
.background span:nth-child(1) {
    color: #583C87;
    top: 56%;
    left: 16%;
    animation-duration: 218s;
    animation-delay: -195s;
    transform-origin: 20vw 7vh;
    box-shadow: -100vmin 0 13.338105150309252vmin currentColor;
}
.background span:nth-child(2) {
    color: #583C87;
    top: 3%;
    left: 67%;
    animation-duration: 335s;
    animation-delay: -11s;
    transform-origin: 13vw 11vh;
    box-shadow: 100vmin 0 12.894485243217334vmin currentColor;
}
.background span:nth-child(3) {
    color: #E45A84;
    top: 71%;
    left: 81%;
    animation-duration: 276s;
    animation-delay: -24s;
    transform-origin: -4vw 9vh;
    box-shadow: -100vmin 0 13.46808125940256vmin currentColor;
}
.background span:nth-child(4) {
    color: #583C87;
    top: 34%;
    left: 14%;
    animation-duration: 362s;
    animation-delay: -313s;
    transform-origin: -9vw 22vh;
    box-shadow: -100vmin 0 13.167774682456871vmin currentColor;
}
.background span:nth-child(5) {
    color: #583C87;
    top: 4%;
    left: 22%;
    animation-duration: 369s;
    animation-delay: -146s;
    transform-origin: -4vw -20vh;
    box-shadow: 100vmin 0 13.221767994785148vmin currentColor;
}
.background span:nth-child(6) {
    color: #FFACAC;
    top: 31%;
    left: 50%;
    animation-duration: 19s;
    animation-delay: -280s;
    transform-origin: -10vw -13vh;
    box-shadow: 100vmin 0 12.81857110622646vmin currentColor;
}
.background span:nth-child(7) {
    color: #583C87;
    top: 2%;
    left: 22%;
    animation-duration: 81s;
    animation-delay: -4s;
    transform-origin: 4vw 10vh;
    box-shadow: -100vmin 0 12.931383530223002vmin currentColor;
}
.background span:nth-child(8) {
    color: #E45A84;
    top: 65%;
    left: 5%;
    animation-duration: 316s;
    animation-delay: -121s;
    transform-origin: 24vw 10vh;
    box-shadow: 100vmin 0 13.117620210604791vmin currentColor;
}
.background span:nth-child(9) {
    color: #E45A84;
    top: 22%;
    left: 48%;
    animation-duration: 187s;
    animation-delay: -98s;
    transform-origin: 2vw -2vh;
    box-shadow: -100vmin 0 12.871344286451928vmin currentColor;
}



/* Allgemeine Styles für die Lightbox (Overlay) */
.lightbox {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dunkler, halbtransparenter Hintergrund */
    z-index: 1000; /* Stellt sicher, dass es über allem anderen liegt */
    overflow-y: auto; /* Erlaubt Scrollen, wenn der Inhalt zu lang ist */
}

/* Verstecken der Lightbox, wenn die Klasse 'hidden' vorhanden ist */
.lightbox.hidden {
    display: none;
}

/* Stil für den Inhalt der Lightbox (das eigentliche Fenster) */
.lightbox-content {
    background-color: #360043; /* Hintergrundfarbe passend zum Spiel */
    background-image: url(./main_bg.webp); /* Passend zum Body-Hintergrund */
    background-size: cover; /* Stellt sicher, dass das Bild den Container bedeckt */
    background-position: center;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 1);
    max-width: 850px; /* Maximale Breite des Inhalts */
    max-height: 90%; /* Maximale Höhe des Inhalts */
    overflow-y: auto; /* Ermöglicht Scrollen innerhalb des Inhalts */
    position: relative;
    color: #fff; /* Textfarbe */
    text-align: center;
}

/* Stil für den Schließen-Button in der Lightbox */
.close-button {
    position: fixed;
    top: 15px;
    right: 25px;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
	z-index:1001;
}

.close-button:hover,
.close-button:focus {
    color: #f00; /* Rot beim Hover */
    text-decoration: none;
    cursor: pointer;
}

/* Styles für die Achievements-Liste */
#achievements-list {
    margin-top: 20px;
	margin-bottom:20px;
    display: flex; /* Für eine flexible Anordnung der Achievement-Items */
    flex-wrap: wrap; /* Erlaubt Umbruch in die nächste Zeile */
    justify-content: center; /* Zentriert die Items */
    gap: 20px; /* Abstand zwischen den Items */
}

.achievement-item {
    background-color: rgba(50, 0, 60, 0.7); /* Etwas dunklerer, transparenter Hintergrund */
    border: 2px solid #583C87; /* Randfarbe passend zum Schema */
    border-radius: 10px;
    padding: 15px;
    max-width: 150px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-align: left;
    transition: transform 0.2s ease-in-out;
}

.achievement-item:hover {
    transform: translateY(-10px); /* Kleiner Hover-Effekt */
}

/* Stil für abgeschlossene Achievements */
.achievement-item.unlocked {
    border-color: #FFD700; /* Goldener Rand für abgeschlossene Achievements */
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.6); /* Leuchtenderer Schatten */
}

.achievement-item h3 {
    color: #e45a84; /* Akzentfarbe für Titel */
    margin-top: 0;
    font-size: 1.2em;
	font-weight:400;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.achievement-item p {
    font-size: 0.9em;
    line-height: 1.4;
    color: #eee;
}

.achievement-item .achievement-description {
    font-style: italic;
    margin-bottom: 5px;
}

.achievement-item .achievement-progress {
    font-weight: bold;
    margin-top: 10px;
}

.achievement-item .achievement-status {
    font-size: 0.8em;
    color: #bbb;
    margin-top: 5px;
}

/* Media Queries für kleinere Bildschirme */
@media (max-width: 768px) {
    .lightbox-content {
        max-width: 95%;
		max-height: calc(100% - 40px);
        padding: 20px;
		border-radius: 0px;
    }

    .achievement-item {
        min-width: 250px; /* Eine Spalte auf kleineren Bildschirmen */
    }
	
	#schwierigkeits-buttons button,
	#abbrechen-schwierigkeit,
	#abbrechen-modus,
	#highscore-ok {
		padding: 10px 15px;
		border: none;
		border-radius: 4px;
		background-color: #007bff;
		color: white;
		cursor: pointer;
		font-size: 1em;
		opacity: 0.75;
		background-image: linear-gradient(180deg, #6b0060 0%, #360042 100%);
		box-shadow: 0px 0.2222em 0 #6b0060;
		min-width: 100%; /* Maximale Breite für Buttons */
		height: 50px;
		margin-top: 10px;
		margin-bottom:10px;
		box-sizing: border-box;
		--text-shadow-color: #6b0060;
		--text-shadow-size: 0.1em;
		--text-shadow-sizeneg: -0.1em;
		text-shadow: var(--text-shadow-size) var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-size) var(--text-shadow-sizeneg) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) var(--text-shadow-sizeneg) 0 var(--text-shadow-color), var(--text-shadow-size) 0px 0 var(--text-shadow-color), 0px var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) 0px 0 var(--text-shadow-color), 0px var(--text-shadow-sizeneg) 0 var(--text-shadow-color);
		-webkit-font-smoothing: antialiased;
	}
	.modus-button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    font-size: 1em;
    opacity: 0.75;
    background-image: linear-gradient(180deg, #6b0060 0%, #360042 100%);
    box-shadow: 0px 0.2222em 0 #6b0060;
    min-width: 100%;
    height: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    --text-shadow-color: #6b0060;
    --text-shadow-size: 0.1em;
    --text-shadow-sizeneg: -0.1em;
    text-shadow: var(--text-shadow-size) var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-size) var(--text-shadow-sizeneg) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) var(--text-shadow-sizeneg) 0 var(--text-shadow-color), var(--text-shadow-size) 0px 0 var(--text-shadow-color), 0px var(--text-shadow-size) 0 var(--text-shadow-color), var(--text-shadow-sizeneg) 0px 0 var(--text-shadow-color), 0px var(--text-shadow-sizeneg) 0 var(--text-shadow-color);
    -webkit-font-smoothing: antialiased;
}
}

.motiv-item.locked-motive {
    filter: grayscale(100%) brightness(50%) blur(2px); /* Motiv abdunkeln und entsättigen */
    cursor: not-allowed; /* Mauszeiger ändern */
    position: relative; /* Für absolute Positionierung des Icons */
	clip-path: inset(0);
}

.motiv-item.locked-motive .lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em; /* Größe des Schlosses */
    color: rgba(255, 255, 255, 0.7); /* Weiße Farbe mit Transparenz */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Schatten für bessere Sichtbarkeit */
    pointer-events: none; /* Stellt sicher, dass das Icon Klicks nicht blockiert */
}

/* ======================================================= */
/* Stile für die Statistik-Anzeige                         */
/* ======================================================= */

#stats-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
	margin:20px;
    text-align: left;
}

.stat-category {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid #583C87;
    border-radius: 8px;
    padding: 15px 20px;
    min-width: 250px;
    flex-grow: 1;
}

.stat-category h3 {
    margin-top: 0;
    color: #e45a84;
    border-bottom: 1px solid #583C87;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 1em;
}

.stat-item .label {
    color: #ddd;
}

.stat-item .value {
    color: #fff;
    font-weight: bold;
}