/* Style.css - Stile für die Webseite */
body /* Grundlegende Stile für die gesamte Webseite */
{
    background: rgba(19, 19, 19); /* Dunkler Hintergrund für die gesamte Seite */
    color: #f0f0f0; /* Helle Textfarbe für gute Lesbarkeit auf dunklem Hintergrund */
    font-family: 'Segoe UI', Arial, sans-serif; /* Moderne, gut lesbare Schriftart */
    margin: 0; /* Entfernt den Standardaußenabstand des Browsers */
    padding: 0; /* Entfernt den Standardinnenabstand des Browsers */
	min-height: 100vh; /* Stellt sicher, dass die Seite mindestens die volle Höhe des Viewports einnimmt */
}

/* Vier Quadrate nebeneinander */
.quadrat-container /* Container für die Quadrate, um sie nebeneinander anzuordnen */
{
	display: flex; /* Flexbox-Layout, um die Quadrate nebeneinander anzuordnen */
	gap: 16px; /* Abstand zwischen den Quadraten */
	margin: 40px; /* Außenabstand um die Container herum, damit sie nicht direkt am Rand der Seite kleben */
}
/* Einzelne Quadrate mit verschiedenen Farben */
.quadrat /* Einzelnes Quadrat */
{
	width: 100px; /* Breite der Quadrate */
	height: 100px; /* Höhe der Quadrate */
	border-radius: 8px; /* Abgerundete Ecken */
	box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Schatteneffekt */
}
/* Farben für die Quadrate */
.farbe1 { background: rgba(42, 50, 73); } /* Akzentfarbe */
.farbe2 { background: #ffffff; } /* Hintergrundfarbe */
.farbe3 { background: #000000; } /* Textfarbe */
.farbe4 { background: rgba(26, 27, 29); } /* Rahmenfarbe */
.farbe5 { background: rgba(185, 101, 63); } /* Sonstige Farbe (z.B. Hover-Effekt) */
.farbe6 { background: rgba(42, 50, 73, 0.421); } /* Akzentfarbe Hover */
.farbe7 { background: #ffffff; } /* Hintergrundfarbe 2 */
.farbe8 { background: #00000061; } /* Textfarbe 2 */
.farbe9 { background: rgba(66, 69, 76); } /* Rahmenfarbe 2 */
.farbe10 { background: #94949483; } /* Sonstige Farbe 2 */