* {
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

body {
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    min-height: 100vh; /* Vollständige Höhe des Viewports */
    margin: 0; /* Entfernt Standard-Margin */
    background-color: white; /* Hintergrundfarbe */
    overflow: auto; /* Ermöglicht Scrollen bei Bedarf */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Feste 3 Spalten */
    grid-template-rows: repeat(5, 130px); /* Feste Höhe für 5 Zeilen */
	/* grid-template-rows: 150px 120px 120px 120px 150px; /* Höhen für jede Zeile */
    gap: 0px; /* Abstand zwischen den Bildern */
    padding: 10px; /* Innenabstand */
    max-width: 600px; /* Maximale Breite des Containers */
    width: 100%; /* Vollständige Breite des Containers */
}

.grid-item {
    display: flex; /* Flexbox für zentrierte Bilder */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    overflow: hidden; /* Überlauf verstecken, falls notwendig */
    border: 0px solid #ccc; /* Rahmenlinie um jedes Grid-Element */
    border-radius: 0px; /* Abgerundete Ecken für die Bilder */
    background-color: white; /* Hintergrundfarbe für die Grid-Elemente */
}

.grid-item img {
    max-width: 100%; /* Maximale Breite auf 100% des Grid-Elements setzen */
    max-height: 100%; /* Maximale Höhe auf 100% des Grid-Elements setzen */
    object-fit: cover; /* Bildanpassung, um den Raum auszufüllen */
}

.footer {
    grid-column: 1 / -1; /* Footer über alle Spalten erstrecken */
    background-color: white; /* Hintergrundfarbe des Footers */
    text-align: center; /* Text-Ausrichtung */
    padding: 10px; /* Innenabstand */
	padding-right: 30px;
}

#flow-line {
    width: 100%; /* SVG passt sich der Breite des Grid-Elements an */
    height: 100%; /* SVG passt sich der Höhe des Grid-Elements an */
}

.wert {
    position: absolute; /* Absolute Positionierung für die Werte */
	padding: 2px;
    color: blue; /* Textfarbe anpassen */
	background-color: aliceblue;
    font-size: 22px; /* Schriftgröße anpassen */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Schatten für bessere Lesbarkeit */
    display: flex; /* Flexbox aktivieren */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
}

.wert-kl {
    position: absolute; /* Absolute Positionierung für die Werte */
	padding: 2px;
    color: hotpink; /* Textfarbe anpassen */
	background-color: aliceblue;
    font-size: 18px; /* Schriftgröße anpassen */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Schatten für bessere Lesbarkeit */
    display: flex; /* Flexbox aktivieren */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
}

.loading {
	fill: none;
	stroke: steelBlue;
	stroke-width: 3;
	stroke-dasharray: 15 5;
	animation: strokeAni .7s infinite linear;
	animation-direction: normal;	/* reverse */
}

@keyframes strokeAni {
	0% {
		stroke-dashoffset: 20;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

/* Für Bildschirme mit einer Breite von 480px oder weniger */
@media (max-width: 480px) {
    .grid-container {
        height: auto; /* Höhe automatisch anpassen */
        max-height: 100vh; /* Maximalhöhe auf 100% der verfügbaren Höhe setzen */
    }
}