body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
-webkit-user-select: none; /* Safari */
-moz-user-select: none;    /* Firefox */
-ms-user-select: none;     /* IE/Edge */
user-select: none;         /* Standard */
}

/* Hauptbereich nimmt den Platz ein */
.main-content {
flex: 0 1 auto;
display: flex;
flex-direction: column;
}

/* Container für die 4 Boxen */
.grid-container {
display: grid;
gap: 2%;
padding: 0 2%;
margin-top: 20px; /* Abstand nach oben zum Header */
}

.pngbild {
width: 100%;
}

.box {
background-size: cover;
background-position: center;
background-image: url('placeholder.png');
aspect-ratio: 1 / 1;
cursor: pointer;
}

#container-amende {
visibility: hidden;
position: fixed;
top: 0;
left: 0;

/* Aktiviert Flexbox zur Zentrierung */
display: flex;
justify-content: center; /* Horizontal zentrieren */
align-items: center;     /* Vertikal zentrieren */

/* Container soll den gesamten Viewport einnehmen */
width: 100vw;
height: 100vh;
}

#amende {
visibility: hidden;
padding: 20px;
border: 2px solid black;
width: 60vw;
height: 55vh;
background-color: #AEE1FC; /*#3498db;  light-blue; */
border-radius: 20px;
padding: 30px; 
padding-top: 10vh;
text-align: center; 
color: black; 
font-family: 'ABeeZee', sans-serif;
font-size: clamp(1.5rem, 2vw + 1rem, 4rem);
}

.quadrat-hoch {
display: block;
/* Setzt Breite und Höhe auf 60% des Viewports */
width: 50vw;
height: 74vh;

/* Nur zur Visualisierung  #3498db*/
background-color: #AEE1FC; /*hellblau*/
border-radius: 20px;

padding: 10px; 
padding-top: 2vh;
text-align: center; 
color: #FFCBA4;  /* black */ 
font-family: 'ABeeZee', sans-serif;
font-size: clamp(1rem, 2vw, 1.5rem);
}		

.weltbild {
width: 80%;
height: auto;
border-radius: 20px;
}

#container-sprachwahl {
visibility: hidden;
position: fixed;
top: 0;
left: 0;

/* Aktiviert Flexbox zur Zentrierung */
display: flex;
justify-content: center; /* Horizontal zentrieren */
align-items: center;     /* Vertikal zentrieren */

/* Container soll den gesamten Viewport einnehmen */
width: 100vw;
height: 100vh;
}


#sprachwahl {
/* Grund-Styling */
position: fixed;
top: 50%;
left: 50%;

/* WICHTIG: Zentrum auf den Mittelpunkt des Divs setzen */
transform: translate(-50%, -50%) scale(0);

/* Animationseigenschaften */
visibility: hidden;
opacity: 0;
transition: transform 1s ease, opacity 1s ease;

/* Optional: Hintergrund, damit man es besser sieht */
background:  #AEE1FC; /*  light-blue; */;
padding: 20px;
border: 2px solid blue;
}

#sprachwahl.show {
visibility: visible;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}	


/* Die Aufgabentextzeile klebt nun direkt am Grid */
.text {
padding: 10px 2%;
text-align: center;
background: #ddd;
font-family: 'ABeeZee', sans-serif;
font-size: clamp(1.5rem, 2vw + 1rem, 4rem);
}

/* --- Landscape Modus --- */
@media (orientation: landscape) {
.grid-container {
		grid-template-columns: repeat(4, 1fr);
}
}

/* --- Portrait Modus --- */
@media (orientation: portrait) {
.grid-container {
		grid-template-columns: repeat(2, 1fr);
}
}

/* Farben */
.rot { background-color: red; }
.gelb { background-color: yellow; }
.gruen { background-color: green; }
.blau { background-color: blue; }

.header { 
display: flex;             /* Flexbox aktivieren */
align-items: center;       /* Vertikal zentrieren */
padding: 14px; 
background: #ddd; 
font-family: 'ABeeZee', sans-serif;
font-size: clamp(1.5rem, 2vw + 1rem, 4rem);
}

.zurueck-button {
visibility: hidden;					/* In der app nicht sichtbar! */
width: 70px;               	/* Feste Breite für die linke Spalte */
cursor: pointer;
}

/* Der Trick für perfekte Zentrierung: */
.spacer-left {
width: 12px;
}

.header-text {
flex: 1;                   /* Nimmt den gesamten verfügbaren Platz ein */
text-align: center;        /* Zentriert den Text innerhalb dieses Platzes */
}

/* Der Trick für perfekte Zentrierung: */
.spacer-right {
width: clamp(160px, 20% + 12px, 210px);
}

.box-rechts-oben {
position: fixed;   /* Fixiert das Element am Viewport */
top: 0;            /* Abstand von oben */
right: 0;          /* Abstand von rechts */
width: clamp(160px, 20% + 12px, 210px);      /* Beispielbreite */
background-color: transparent;
padding: 0px;
cursor: pointer;
}

/* Footer */
.footer { padding: 10px; text-align: center; background: transparent; color: black; }

/* L-Coins im footer */
.coin { width: 8vw; height: auto; }

/* Icons Ja und Nein */
.icon {
width: 16vw; 
height: auto;
cursor: pointer;
}

/* Icons für Länder und Sprachen*/
.land-icon {
padding: 0.5vw;
width: 10vw; 
height: auto;
cursor: pointer;
}

#nocheine {
line-height: 1;
margin: 0;
margin-top: -0.1em; 
margin-bottom: -0.1em;
}

.schatz-box {
position: absolute;
display: none;
flex-direction: row;
justify-content: center;

top: 5%;
left: 5%;

/* Größe: 90% von Breite und Höhe des Viewports */
width: 90vw;
height: 90vh;

/* Styling */
background-color: silver;
border-color: blue;
border-radius: 2vw;
border-style: solid;
border-width: 2px;

/* Sicherstellen, dass es über anderen Elementen liegt */
z-index: 9999;
}

.gbox {
flex: 1;
background-color: transparent;
width: 16%;
height: auto;
margin: 0.5%;
pointer-events: none;
}

.card-wrapper {
width: 100%;
background-color: transparent;
margin-top: 3%;
pointer-events: none;
}

.zz {
width: 100%;
height: auto;
}

.ausnahme {
position: absolute;
bottom: 0;
font-family: 'ABeeZee', sans-serif;
font-size: clamp(1rem, 1.5vw + 0.5rem, 3rem);
width: 80%;
background-color: white;
color: blue;
margin-bottom: 1vh;
border-color: blue;
border-radius: 2vh;
border-style: solid;
border-width: 2px;
text-align: center;
}

.vertical-line-left {
border-left: 2px solid blue;
height: 100%;
}

.vertical-line-right {
border-right: 2px solid blue;
height: 100%;
}


/* Der Hintergrund-Layer (abdunkelnd) */
.schatz-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5); /* Schwarz mit 50% Deckkraft */
z-index: 998; /* Muss niedriger sein als die Box */
}