@charset "UTF-8";
/* CSS Document */

/* Grund-Einstellungen */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    line-height: 1,6 ;
	background-color: lightgray
}
/* Hauptinhalt */
.container {
    max-width: 100%;
    margin: 30px auto 0px;
	border-radius: 0px;
    padding: 0 20px;
	background: #f1ece6
}

.hero {
    text-align: center;
    padding: 30px 0;
	color: #0d484b
}
.nav-divider {
    max-width: 200px;    										/* Die Breite der feinen Linie */
    border: 0;           										/* Standard-Rahmen entfernen */
    border-top: 1px solid #ffcc00; 								/* Die "feine graue Linie" */
    margin: 20px auto;   										/* Zentriert die Linie mit Abstand nach oben/unten */
}	

/* Das 4-Spalten-Layout */
.row {
    display: flex;
    flex-wrap: wrap; 											/* Erlaubt das Umbrechen auf kleinen Bildschirmen */
    gap: 20px;
}

.column {
    flex: 1; 													/* Spalten teilen sich den Platz gleichmäßig */
    min-width: 200px; 											/* Verhindert, dass Spalten zu schmal werden */
    background: #;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
.column h3 {
    color: #0d484b;     										/* Deine Wunschfarbe (hier ein schönes Blau) */
    text-align: center; 										/* Zentriert die Überschrift innerhalb der Spalte */
    margin-bottom: 15px; 										/* Erzeugt einen sauberen Abstand zum Text darunter */
    font-size: 1.5rem;  										/* Optional: Regelt die Größe der Überschrift */
}
.column {
 																/* Deine bisherigen Styles (background, padding, etc.) */
    margin-top: 5px;      										/* Zieht die Spalte um 50px nach oben */
    position: relative;     									/* Wichtig, damit z-index funktioniert */
    z-index: 10;            									/* Stellt sicher, dass die Spalte ÜBER dem Hero-Bereich liegt */
    box-shadow: 0 -10px 20px rgba(0,0,0,0.1); 					/* Optional: Schatten nach oben für Tiefe */
}		
.color-spacer {
    max-width: 90%;      										/* Begrenzt die Breite auf 1200px */
    margin: 0 auto;      										/* Zentriert den Block und gibt Abstand nach oben/unten */
    height: 100px;       					   					/* Bestimmt, wie hoch der Bereich sein soll */
    background-color: #f1ece6; 									/* Hier deine Wunschfarbe (z.B. hellgrau) */
    display: flex;          									/* Erlaubt es, Text darin einfach zu zentrieren */
    justify-content: center;
    align-items: center;
}

.color-spacer p {
    color: #666;            									/* Textfarbe innerhalb des Spacers */
    font-style: italic;
}
.round-img {
    width: 150px;           									/* Feste Breite */
    height: 150px;          									/* Gleiche Höhe für ein Quadrat */
    object-fit: cover;      									/* Verhindert, dass das Bild verzerrt wird */
    border-radius: 50%;    	 									/* Macht das Bild kreisrund */
    display: block;         									/* Ermöglicht Zentrierung */
    margin: 0 auto 15px;    									/* Zentriert das Bild und gibt Abstand nach unten */
    border: 3px solid #0d484b; 									/* Optional: Ein farbiger Rahmen passend zum h3 */
}
.round-img:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Footer */
.footer-container {
	max-width: 100%;      										/* Begrenzt die Breite auf 1200px */
	margin: 0 auto;      										/* Zentriert den Block und gibt Abstand nach oben/unten */
    flex: 1;            										/* Spalten teilen sich den Platz gleichmäßig */
    min-width: 200px;    										/* Verhindert, dass Spalten zu schmal werden */
    background-color: #0b464c;  								/* Footer Hintergrundfarbe */
    padding: 20px;
    border-radius: 0px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
	display: flex;
  }
.footer-column {
  flex: 1 1 200px; 												/* Wachsen, Schrumpfen, Basis-Breite 200px */
  margin: 15px;
}
.footer-column h2 {
    color: #f0ebe6;     										/* Deine Wunschfarbe (hier ein schönes Blau) */
    text-align: center; 										/* Zentriert die Überschrift innerhalb der Spalte */
    margin-bottom: 15px; 										/* Erzeugt einen sauberen Abstand zum Text darunter */
    font-size: 1.5rem;  										/* Optional: Regelt die Größe der Überschrift */
}
.footer-column p {
  color: #f0ebe6; 												/* Deine Wunschfarbe */
  line-height: 1.6; 											/* Tipp: Erhöht die Lesbarkeit */
}
.footer-column a:link {color: #f0ebe6; line-height: 1.6;}		/* Deine Wunschfarbe */ /* Tipp: Erhöht die Lesbarkeit */
.footer-column a:link { color: lightgrey; } 		 			/* Unbesuchter Link */
.footer-column a:visited { color: lightgray; }					/* Besuchter Link */
.footer-column a:hover a:hover { color: lightcyan; } 			/* Link beim Überfahren mit der Maus (Hover) */
.footer-column a:active { color: #f0ebe6; } 					/* Aktiver Link (beim Klicken) */

a:link { color: #0d484b; } 										/* Unbesuchter Link */
a:visited { color: #0d4b2c; } 									/* Besuchter Link */
a:hover { color: #247b4f; } 									/* Link beim Überfahren mit der Maus (Hover) */
a:active { color: #3d4f50; } 									/* Aktiver Link (beim Klicken) */

/* Tablet & kleine Laptops (unter 1024px) */
@media (max-width: 1024px) {
    .row {
        gap: 15px;
    }
    .column {
        flex: 1 1 45%; /* Zeigt zwei Spalten nebeneinander an */
        margin-top: 0;  /* Überlappung auf kleineren Screens oft störend */
    }
    .container, .footer-container, .color-spacer {
        max-width: 95%; /* Nutze mehr Platz an den Seiten */
    }
}

/* Smartphone (unter 768px) */
@media (max-width: 768px) {
    .row {
        flex-direction: column; /* Spalten untereinander */
    }
    .column {
        width: 100%;
        margin-top: 10px;
    }
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    .hero h1 {
        font-size: 1.5rem; /* Schriftgröße für Handy anpassen */
    }
}