/* 1. Generelle Einstellungen für den gesamten Bildschirm */
html, body {
	    height: 100%;
	        margin: 0;
		    padding: 0;
		        overflow: hidden; 
			    display: flex; 
			        justify-content: center; 
				    align-items: center; 
			    }

			    /* 2. Container (figure) Einstellungen */
			    .image-container {
				        width: 100%; 
					    height: 100%; 
					        display: flex;
						    flex-direction: column; /* Stapelt Bild und Unterschrift */
						        justify-content: center; /* Vertikale Zentrierung der Gruppe */
							    align-items: center; /* Horizontale Zentrierung der Gruppe */
							        margin: 0;
							}

							/* 3. Bildeinstellungen für Zentrierung und Skalierung (NEU: contain) */
							.image-container img {
								    /* Nimmt fast die gesamte Höhe ein, um Platz für die Unterschrift zu lassen */
								    width: 100%;
								        /* Die Höhe muss flexibel sein, damit das Bild richtig skaliert wird und Platz für die Beschriftung bleibt */
								        max-height: calc(100vh - 50px); 
									    
									    /* *************************************** */
									    /* DER SCHLÜSSEL FÜR DIE NICHT-ABGESCHNITTENE DARSTELLUNG */
									    object-fit: contain;
									        /* *************************************** */
									        
									        /* Stellt sicher, dass das Bild horizontal zentriert bleibt */
									        align-self: center; 
										    
										    font-family: 'object-fit: contain;'; 
									    }

									    /* 4. Stil der Bildunterschrift */
									    .caption {
										        margin-top: 15px; 
											    font-family: cursive; 
											        text-align: center;
												    height: 35px; /* Definiert die Höhe, die vom Bild abgezogen wird */
												        font-size: 1.5em; 
													    color: #333;
													        /* Stellt sicher, dass die Unterschrift nicht breiter als das Bild ist, falls es schmal ist */
													        max-width: 90%; 
													}