/* Globale Einstellungen und Body-Styling */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Zentriert den Container horizontal */
    align-items: center; /* Zentriert den Container vertikal */
    min-height: 100vh; /* Mindesthöhe des Bodys auf 100% des Viewports */
    background-color: #ffe8d6; /* Peach Cream als Fallback für Body-Hintergrund */
    color: #6b705c; /* Olive Green für allgemeinen Text, wird aber überschrieben */
    line-height: 1.6;
    overflow-y: auto; /* Erlaubt Scrollen, wenn der Inhalt länger ist als der Viewport */
    padding: 20px 0; /* Etwas Padding oben und unten für kleine Bildschirme */
    box-sizing: border-box; /* Stellt sicher, dass Padding zur Gesamtgröße gehört */
    position: relative; /* Wichtig, damit das Pseudo-Element relativ zum Body positioniert wird */
}

/* Pseudo-Element für den überlagerten Hintergrund mit Blur-Effekt */
body::before {
    content: "";
    position: fixed; /* Fixiert das Element im Viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/background.png'); /* Dein Hintergrundbild aus dem images-Ordner */
    background-size: cover;
    background-position: center;
    filter: blur(8px); /* Verschwommener Effekt */
    z-index: -1; /* Sorgt dafür, dass das Pseudo-Element hinter dem Inhalt liegt */
    opacity: 0.5; /* Stärkere Transparenz, damit Peach Cream durchscheint und Bild dunkler wirkt */
}

/* Hauptcontainer für den Inhalt (die Box) */
.container {
    background-color: rgba(200, 170, 145, 0.95); /* Dunkleres Dusty Rose für die Box */
    border-radius: 15px; /* Abgerundete Ecken */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); /* Leichter Schatten */
    padding: 40px;
    margin: 20px; /* Außenabstand für kleinere Bildschirme */
    max-width: 700px; /* Maximale Breite der Box */
    width: 100%; /* Die Box nimmt die volle Breite bis max-width ein */
    text-align: center; /* Text in der Box zentrieren */
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Elemente untereinander anordnen */
    gap: 30px; /* Abstand zwischen den Hauptsektionen */
    position: relative; /* Wichtig, damit es über dem blurred background liegt */
    z-index: 1; /* Stellt sicher, dass der Container über dem Hintergrund liegt */
}

/* Überschriften und Text */
h1 {
    color: #6b705c; /* Olive Green für "Rehleiin" */
    margin-top: 0;
    font-weight: 700;
}

h2 {
    color: #6b705c; /* Olive Green für andere Überschriften */
    margin-top: 0;
    font-weight: 700;
}

p {
    color: #F8F4E3; /* Warmes Off-White/Creme für den Haupttext (alle p-Tags) */
    font-weight: 400;
}

a {
    color: #cb997e; /* Terracotta für Links (außerhalb spezifischer Bereiche) */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #6b705c; /* Olive Green beim Hover über Links */
    text-decoration: none;
}

/* Profilbereich */
.profile-section .profile-picture {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #F8F4E3; /* Helleres Creme für den Kreis um das Profilbild (wie Haupttextfarbe) */
    margin-bottom: 20px;
}

.profile-section h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.profile-section .bio-text {
    font-size: 1.1em;
    max-width: 500px;
    margin: 0 auto;
    color: #F8F4E3; /* Warmes Off-White/Creme für den Bio-Text (konsistent mit p-Tags) */
}

/* Trennlinien - "gezeichneter" Stil */
.divider {
    border: none;
    height: 2px;
    background-color: #6b705c; /* Olive Green für die Trennstriche (wie "Rehleiin"-Überschrift) */
    opacity: 0.7;
    margin: 30px auto;
    width: 80%;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Social Media Links */
.social-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 20px;
}

/* Neuer Container für Icon und Follower-Zahl */
.social-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.social-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #cb997e; /* Terracotta als Icon-Hintergrund */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-bottom: 10px; /* Abstand zum Follower-Text */
}

.social-icon:hover {
    background-color: #a5a58d; /* Sage Fern beim Hover ändern */
    transform: translateY(-5px);
}

.social-icon img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    /* Da die Logos jetzt manuell umgefärbt wurden, ist hier KEIN Filter mehr nötig */
}


/* Follower-Zahlen */
.follower-count {
    font-size: 0.85em;
    color: #6b705c; /* Olive Green für Follower-Text */
    font-weight: 700; /* Followerzahlen fett */
}


/* Buttons (Discord, Tellonym) */
.button {
    display: inline-flex;
    align-items: center;
    background-color: #a5a58d; /* Sage Fern für Buttons */
    color: #F8F4E3; /* Textfarbe (Creme) für Buttons */
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease, color 0.3s ease;
    margin-top: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.button:hover {
    background-color: #6b705c; /* Olive Green beim Hover */
    color: #F8F4E3; /* Bleibt Creme beim Hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.button-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    object-fit: contain;
    /* Da die Logos jetzt manuell umgefärbt wurden, ist hier KEIN Filter mehr nötig */
}

/* Impressum */
.impressum-section {
    text-align: center;
    font-size: 0.9em;
    color: #F8F4E3; /* Impressumstext in Haupttextfarbe (Creme) */
}

.impressum-section h2 {
    text-align: center;
    margin-bottom: 20px;
}

.impressum-section a {
    color: #6b705c; /* Olive Green für Impressum-Links (Farbe der Rehleiin-Überschrift) */
    font-weight: 600; /* Etwas dicker für bessere Sichtbarkeit */
}

.impressum-section a:hover {
    color: #cb997e; /* Terracotta beim Hover */
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .container {
        padding: 30px 20px;
        margin: 10px;
    }

    h1 {
        font-size: 2em;
    }

    .social-icon {
        width: 60px;
        height: 60px;
    }
    .social-icon img {
        width: 60%;
        height: 60%;
    }
    .follower-count {
        font-size: 0.8em;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.8em;
    }

    .profile-section .profile-picture {
        width: 120px;
        height: 120px;
    }

    .social-links {
        gap: 15px;
    }

    .social-icon {
        width: 55px;
        height: 55px;
    }

    .button {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    .button-icon {
        width: 20px;
        height: 20px;
    }
}