/* 1. Reset und Grundstruktur für Vollbild */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        /* 2. Haupt-Container: Nutzt Flexbox für die Aufteilung in 2x2 */
        .grid-container {
            display: flex;
            flex-wrap: wrap; /* Erlaubt das Umbrechen auf 2 Reihen */
            width: 100vw;    /* 100% der Viewport-Breite */
            height: 100vh;   /* 100% der Viewport-Höhe */
        }

        /* 3. Styling für die einzelnen Rechtecke */
        .quadrant {
            /* 50% Breite und Höhe, um 2x2 auf dem Bildschirm zu bilden */
            width: 50vw;
            height: 50vh;
            
            /* Zentrierung des INHALTS (der Zahl) */
            display: flex;
						flex-direction: column;	 /* Items untereinander: Spaltenanordnung */
            justify-content: center; /* Horizontale Zentrierung */
            align-items: center;     /* Vertikale Zentrierung */
						padding: 8px;
            
            /* Optionale visuelle Trennung */
            border: 2px solid silver;
            box-sizing: border-box; /* Wichtig, damit der border die Größe nicht sprengt */
            font-size: min(6vh, 6vw); 
            font-family: sans-serif;
            font-weight: bold;
            color: white;
        }

				/* Formatierung für das Input-Feld und das Label */
				.quadrant label {
						/* Label erbt font-family, color, font-weight von .quadrant */
						margin-bottom: 0.5em; /* Abstand zum Input-Feld */
				}

    .quadrant input[type="text"] {
        /* 1. Schriftgröße anpassen: vw/vh oder relative Einheiten */
        font-size: min(6vh, 6vw); /* Kleiner als 6vh des Elternelements, um Textplatz zu haben */
        
        /* 2. Schriftart und Gewicht explizit setzen */
        font-family: sans-serif; 
        font-weight: bold;
        
        /* 3. Farbe explizit setzen, da Inputs oft eine Standardfarbe haben */
        color: black; 
        
        /* 4. Größe des Input-Feldes anpassen, um die Zentrierung zu respektieren */
        padding: 0.5em;
        width: min(30vh, 30vw); /* Beispielbreite, um zentriert zu bleiben */
        
        /* 5. Die standardmäßige Rahmenformatierung zurücksetzen */
        border: none;
        border-radius: 15px;
        box-sizing: border-box;
				
				/* 6. Inhalt horizontal zentrieren */
				text-align: center;
    }

		input[readonly] {
				/* Entfernt oft hinzugefügte graue Hintergründe bei Readonly-Feldern */
				background-color: white; 
				
				/* Stellt sicher, dass der Cursor nicht als "Eingabe möglich" erscheint */
				cursor: default; 
				
				/* Entfernt den Standard-Randfokus, wenn das Feld geklickt wird (optional) */
				outline: none; 
		}

		/* 4. Individuelle Farben für bessere Unterscheidung */
		.quadrant:nth-child(1) {
				background-color: #3498db;  /* vorher: #e74c3c; Rot */
		}
		.quadrant:nth-child(2) {
				background-color: #3498db; 	/* Blau */
		}
		.quadrant:nth-child(3) {
				background-color: #2ecc71; 	/* Grün */
		}
		.quadrant:nth-child(4) {
				background-color: #2ecc71;  /* vorher: #f1c40f;  Gelb */
		}

		/* ---------------------------------------------------- */
		/* 1. Unabhängiger Fullscreen-Container (mit position: fixed) */
		/* ---------------------------------------------------- */
		.fullscreen-overlay {
			/* Holt das Div aus dem normalen Fluss und bindet es an den Viewport */
			position: fixed; 
			
			/* Stellt sicher, dass es den gesamten Viewport abdeckt */
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			
			/* Optionale Transparenz, falls andere Elemente dahinter sichtbar sein sollen */
			/* background-color: rgba(0, 0, 0, 0.5); */ 
			
			/* **Wichtig:** Flexbox für die Zentrierung des Inhalts (des Bildes) */
			display: flex;
			justify-content: center; /* Horizontale Zentrierung */
			align-items: center;     /* Vertikale Zentrierung */
			
			/* Stellt sicher, dass das Overlay über allen anderen Elementen liegt */
			z-index: 0;
		}

		/* ---------------------------------------------------- */
		/* 2. Quadratischer Bild-Container (für die quadratische Form) */
		/* ---------------------------------------------------- */
		.bild-quadrat {
			/* Passt die Größe an die Viewport-Dimensionen an und erzwingt quadratische Form */
			width: min(20vw, 20vh);
			height: min(20vw, 20vh);
			
			/* Nur zur Veranschaulichung des quadratischen Bereichs */
			border: 4px solid silver;
			overflow: hidden;
			
			/* Rund: */
			border-radius: min(10vw, 10vh);
		}

		/* 3. Das Bild im Container */
		.bild-quadrat img {
			width: 100%;
			height: 100%;
			object-fit: cover; /* Stellt sicher, dass das Bild das Quadrat ohne Verzerrung füllt */
			display: block;
		}

		input[type="range"] {
				/* 1. Positionierung definieren (ist notwendig, damit z-index funktioniert) */
				position: relative; 
				
				/* 2. Hohen z-index zuweisen */
				z-index: 9; 
		}