/* GLOBAL: Allgemeine Regeln für alle Elemente */
* {
    margin: 0; /* Entfernt die Standardabstände, die vom Browser vorgegeben sind */
    padding: 0; /* Entfernt die Standardinnenabstände der Elemente */
    box-sizing: border-box; /* Bezieht Rahmen und Innenabstand in die Breite und Höhe der Elemente mit ein */
}

/* Definiere zentrale Farbvariablen */
:root {
    --background-color: #f8e4e0; /* Sehr blasses, warmes Rosé-Beige */
    --text-color: #5f4b47; /* Dunkelbraun mit einem Hauch von Rot für den Text */
    
    --header-bg: linear-gradient(135deg, #9e2a2f, #d2857f); /* Blasses Dunkelrot mit einem Hauch von Sand */
    --header-text-color: white; /* Weiße Schriftfarbe im Header für guten Kontrast */
    
    --nav-bg: rgba(255, 255, 255, 0.85); /* Halbtransparenter Weißton für die Navigation */
    --nav-text-color: #9e2a2f; /* Blasses Dunkelrot für den Navigationstext */
    --nav-hover-color: #c48e7e; /* Sanftes, blasses Gold-Rot für Hover-Effekte */
    
    --section-heading-color: #9e2a2f; /* Blasses Dunkelrot für die Abschnittsüberschriften */
    
    --footer-bg: #d2857f; /* Warmer, blasser Dunkelrot-Sandton für den Footer */
    --footer-text-color: #5f4b47; /* Dunkelbraune Schriftfarbe für den Footer */
}


/* BODY: Definiert den allgemeinen Hintergrund und Textfarbe */
body {
    font-family: 'Century Gothic', sans-serif; /* Definiert die Schriftart für den gesamten Text */
    background: var(--background-color); /* Verwendet die definierte Hintergrundfarbe */
    color: var(--text-color); /* Verwendet die definierte Textfarbe */
    overflow-x: hidden; /* Verhindert horizontales Scrollen, auch wenn Inhalte über den Rand hinausragen */
}

/* HEADER: Begrüßung und Hintergrund */
header {
    display: flex; /* Verwendet Flexbox für ein flexibles Layout */
    flex-direction: column; /* Ordnet die Elemente im Header vertikal an */
    align-items: center; /* Zentriert die Elemente horizontal */
    justify-content: center; /* Zentriert die Elemente vertikal */
    min-height: 100vh; /* Setzt die minimale Höhe des Headers auf 100% der Fensterhöhe */
    background: var(--header-bg); /* Farbverlauf für den Header, festgelegt durch die Variable */
    color: var(--header-text-color); /* Weiße Textfarbe im Header */
    text-align: center; /* Zentriert den Text im Header */
    animation: fadeIn 1.5s ease-in-out; /* Fügt eine sanfte Einblend-Animation hinzu */
}

header h1 {
    font-size: 3rem; /* Große Schriftgröße für den Namen im Header */
    margin-bottom: 0.5rem; /* Abstand nach unten zwischen Überschrift und Text */
}

header p {
    font-size: 1.2rem; /* Etwas kleinere Schriftgröße für den erklärenden Text */
}

/* NAVIGATION: Menüleiste */
nav {
    position: fixed; /* Navigation bleibt immer sichtbar, auch wenn die Seite gescrollt wird */
    top: 0; /* Die Navigation bleibt oben im Fenster */
    width: 100%; /* Deckt die gesamte Breite des Fensters ab */
    background: var(--nav-bg); /* Halbtransparenter Hintergrund für die Navigation */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sanfter Schatteneffekt für die Navigation */
    z-index: 10; /* Stellt sicher, dass die Navigation über anderen Inhalten liegt */
}

nav ul {
    display: flex; /* Flexbox für die horizontale Anordnung der Menü-Links */
    justify-content: center; /* Zentriert die Menü-Links */
    padding: 1rem 0; /* Fügt oben und unten einen Abstand hinzu */
    list-style: none; /* Entfernt die standardmäßigen Aufzählungszeichen der Liste */
}

nav a {
    color: var(--nav-text-color); /* Dunkelbraune Textfarbe für die Links */
    text-decoration: none; /* Entfernt die Unterstreichung der Links */
    margin: 0 1rem; /* Fügt einen Abstand zwischen den Links hinzu */
    font-weight: bold; /* Macht die Links fett, um sie hervorzuheben */
    font-size: 1rem; /* Legt die Schriftgröße für die Links fest */
    transition: color 0.3s; /* Fügt eine sanfte Übergangsanimation bei Farbänderung hinzu */
}

nav a:hover {
    color: var(--nav-hover-color); /* Ändert die Farbe der Links bei Hover in einen Braunton */
}

/* MAIN: Hauptbereich */
main {
    max-width: 800px; /* Begrenzung der maximalen Breite des Inhalts */
    margin: 2rem auto; /* Zentriert den Inhalt und fügt Abstand oben und unten hinzu */
    padding: 1rem; /* Fügt einen Innenabstand (Padding) für den Inhalt hinzu */
}

section {
    margin-bottom: 3rem; /* Abstand zwischen den Sektionen */
    animation: slideIn 1s ease-out; /* Fügt eine sanfte Slide-In-Animation für die Sektionen hinzu */
}

section h2 {
    font-size: 2rem; /* Große Schriftgröße für die Abschnittsüberschriften */
    margin-bottom: 1rem; /* Abstand nach unten zwischen der Überschrift und dem Text */
    border-bottom: 2px solid var(--section-heading-color); /* Unterstreichung der Überschrift mit der definierten Farbe */
    display: inline-block; /* Unterstreichung wird nur unter der Überschrift angezeigt */
}

section p, section ul {
    font-size: 1rem; /* Standard-Schriftgröße für Absätze und Listen */
    line-height: 1.6; /* Zeilenhöhe für bessere Lesbarkeit */
}

/* FOOTER: Abschlussbereich */
footer {
    text-align: center; /* Zentriert den Text im Footer */
    padding: 1rem; /* Innenabstand oben und unten im Footer */
    background: var(--footer-bg); /* Dunkelbrauner Hintergrund für den Footer */
    color: var(--footer-text-color); /* Weiße Textfarbe im Footer */
    margin-top: 3rem; /* Abstand nach oben */
}

footer p {
    font-size: 0.9rem; /* Kleinere Schriftgröße für den Text im Footer */
}

/* ANIMATIONEN: Effekte für Header und Abschnitte */
@keyframes fadeIn {
    from {
        opacity: 0; /* Unsichtbar zu Beginn */
    }
    to {
        opacity: 1; /* Voll sichtbar am Ende */
    }
}

@keyframes slideIn {
    from {
        transform: translateY(20px); /* Startet 20px weiter unten */
        opacity: 0; /* Unsichtbar zu Beginn */
    }
    to {
        transform: translateY(0); /* Endet an der richtigen Position */
        opacity: 1; /* Voll sichtbar am Ende */
    }
}