body {
    margin: 0;
    margin-top: 0px;
    color: #333;
    padding-top: 0px; /* Anfangs genügend Platz für den Header */
    min-height: 100vh;
    font-family: 'Merriweather', serif;
    line-height: 1.6;
    background-color: #e0d8c0; /* Fallback-Farbe, falls das Bild nicht lädt */
    background-image: url(img/paper_texture.png); /* Passe den Pfad an! */
    background-repeat: repeat; /* Wichtig, damit sich die Textur wiederholt */
    background-attachment: fixed; /* Optional: Textur bleibt fest, während gescrollt wird */
    background-size: auto; /* oder 'cover' wenn du sie skalieren möchtest */
}

.hero-header {
    display: flex; /* Beibehalten */
    align-items: center; /* Beibehalten */
    padding: 5px 10px; /* Angepasst für mehr horizontalen Platz */
    margin-top: 10px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    z-index: 100;
    background-image: url(img/paper_texture.png);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: padding 0.3s ease-in-out, font-size 0.5s ease-in-out, max-height 0.3s ease-in-out;
    justify-content: space-between; /* Sorgt dafür, dass .header-left und .header-right an den Enden sind */
    border-bottom: 2px double #c0b080;
    font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background-size: cover;
}

.header-left {
    display: flex;
    align-items: center;
    max-width: 70%; /* Beispiel: Nimmt maximal 70% der Header-Breite ein */
    margin-left: 50px; /* Angepasster linker Rand */
    margin-right: auto; /* Schiebt den linken Bereich nach links */
    margin-top: 0;
    margin-bottom: 5px;
    position: relative; /* Wichtig für die absolute Positionierung des Schattens */
}

.logo-container {
    margin-right: 10px; /* Abstand zwischen dem ursprünglichen Logo und dem Text */
    margin-top: 0;
    margin-bottom: 0;
}

.logo-container img {
    max-height: 120px; /* Angepasste Größe des ursprünglichen Logos */
    width: auto;
    display: block;
    margin-bottom: 0px;
    transition: max-height 0.6s ease-in-out;
}

.text-container {
    margin-top: 0;
    margin-bottom: 0;
    white-space: nowrap; /* Verhindert den Zeilenumbruch */
}

.text-container h1 {
    margin-top: 0px;
    margin-bottom: 2px;
    font-size: 1.8em; /* Etwas kleinere Schriftgröße, um Platz zu sparen */
}

.text-container h2 {
    margin-top: 0;
    width: 100%;
    font-weight: normal;
    margin-bottom: 0px;
    font-size: 1.2em; /* Etwas kleinere Schriftgröße, um Platz zu sparen */
    white-space: wrap;
}

/* Styles für den Schatten-Text */
.shadow-text {
    position: absolute; /* Ermöglicht das Versetzen und Überlappen */
    top: 35px; /* Leicht nach unten versetzt */
    left: 140px; /* Leicht nach rechts versetzt */
    color: rgba(0, 0, 0, 0.2); /* Dezente Schattenfarbe */
    width: 100%;
    z-index: -1; /* Hinter den originalen Text legen */
}

.shadow-text h1 {
    font-size: 1.8em; /* Behält die Schriftgröße des Originals bei */
    margin-top: 0px;
    margin-bottom: 2px;
    color: rgba(0, 0, 0, 0.1); /* Dezente Schattenfarbe für h1 */
}

.shadow-text h2 {
    font-size: 1.2em; /* Behält die Schriftgröße des Originals bei */
    margin-top: 0;
    width: 100%;
    font-weight: normal;
    margin-bottom: 0px;
    color: rgba(0, 0, 0, 0.1); /* Dezente Schattenfarbe für h2 */
}

/* Styles für den rechten Header-Bereich */
.header-right {
    display: flex;
    align-items: center;
    z-index: 101;
    margin-right: 100px; /* Rechter Rand für den gesamten rechten Bereich */
}

/* Styles für den FPF-Logo-Container */
.fpf-logo-container {
    display: flex;
    flex-direction: column; /* Diese Zeile war entscheidend */
    align-items: center; /* Zentriert den Text horizontal */
    margin-left: 20px; /* Behält den Abstand zum linken Bereich */
    text-align: center; /* Zentriert den Text innerhalb des Containers */
}

/* Styles für den FPF-Logo-Button */
.fpf-logo-button {
    display: block; /* Macht den gesamten Bildbereich anklickbar */
    margin-left: 10px; /* Abstand zwischen dem linken Bereich und dem FPF-Logo */
}

.fpf-logo-button img {
    height: 80px; /* Beispielgröße für das FPF-Logo */
    width: auto;
    display: block;
    transition: height 0.3s ease-in-out; /* Übergang für das Scrollen */
}

/* Zustand des Headers, wenn er "scrolled" ist */

.hero-header.scrolled {
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.1);
    background-image: none;
    backdrop-filter: blur(6px);
}

.hero-header.scrolled .logo-container img {
    max-height: 80px;
}

.hero-header.scrolled .text-container h1 {
    font-size: 1.6em;
    margin-bottom: 1px;
}

.hero-header.scrolled .text-container h2 {
    font-size: 1.0em;
    white-space: wrap;
}


.hero-header.scrolled .logo-text {
    text-shadow: 1px 1px #b0aeae
}

.hero-header.scrolled .fpf-logo-button img {
    height: 50px; /* Kleinere Größe im gescrollten Zustand */
}

.hero-header.scrolled .shadow-text {
    top: 30px; /* Beispiel: -5px vom ursprünglichen top-Wert, um eine Bewegung des Originals auszugleichen */
    left: 120px; /* Beibehaltung des ursprünglichen left-Werts, falls sich der Text horizontal nicht bewegt */
    overflow: visible;
}

/* Media Query für kleinere Bildschirme (z.B. Tablets bis 768px Breite) */
@media (max-width: 768px) {
    .hero-header {
        height: 100px; /* ANPASSUNG: Header-Höhe für Tablets (unscrolled) */
        padding: 5px 10px; /* Unscrolled Padding beibehalten */
    }

    .header-left {
        margin-left: 10px; /* ANPASSUNG: Links etwas mehr eingerückt */
        max-width: 70%;
    }

    .logo-container img {
        max-height: 90px; /* ANPASSUNG: Kleineres Logo unscrolled */
    }

    .text-container h1 {
        font-size: 1.4em; /* ANPASSUNG: Kleinere Überschrift unscrolled */
        margin-bottom: 1px;
    }

    .text-container h2 {
        font-size: 0.8em; /* ANPASSUNG: Kleinere Unterüberschrift unscrolled */
    }

    .header-right {
        margin-right: 50px; /* ANPASSUNG: Rechts etwas mehr eingerückt */
    }

    .fpf-logo-button img {
        height: 40px; /* ANPASSUNG: FPF Logo unscrolled */
    }

    /* GESCROLLTER ZUSTAND FÜR TABLETS */
    .hero-header.scrolled {
        height: 80px; /* ANPASSUNG: Höhe des gescrollten Headers auf Tablets */
        padding: 5px 5px; /* ANPASSUNG: Gescrolltes Padding reduziert */
    }

    .hero-header.scrolled .header-left {
        margin-left: 5px; /* ANPASSUNG: Links noch weiter eingerückt beim Scrollen */
    }

    .hero-header.scrolled .logo-container img {
        max-height: 70px; /* ANPASSUNG: Logo noch kleiner gescrollt */
    }

    .hero-header.scrolled .text-container h1 {
        font-size: 1.2em; /* ANPASSUNG: h1 noch kleiner gescrollt */
    }

    .hero-header.scrolled .text-container h2 {
        font-size: 0.7em; /* ANPASSUNG: h2 noch kleiner gescrollt */
    }

    .hero-header.scrolled .fpf-logo-button img {
        height: 40px; /* ANPASSUNG: FPF Logo noch kleiner gescrollt */
    }

    /* Schatten-Text auf Tablets ausblenden */
    .shadow-text {
        display: none;
    }
}

/* Media Query für noch kleinere Bildschirme (z.B. Smartphones bis 480px Breite) */
@media (max-width: 480px) {
    .hero-header {
        height: 90px; /* ANPASSUNG: Header-Höhe für Smartphones (unscrolled) */
        padding: 5px; /* ANPASSUNG: Padding für Smartphones reduziert */
    }

    .header-left {
        margin-left: 5px; /* ANPASSUNG: Links noch weiter eingerückt */
    }

    .logo-container img {
        max-height: 60px; /* ANPASSUNG: Logo auf Smartphones unscrolled */
    }

    .text-container h1 {
        font-size: 1em; /* ANPASSUNG: h1 auf Smartphones unscrolled */
        margin-bottom: 1px;
        white-space: normal; /* Erlaubt Zeilenumbruch, um Platz zu sparen */
    }

    .text-container h2 {
        font-size: 0.6em; /* ANPASSUNG: h2 auf Smartphones unscrolled */
    }

    .header-right {
        margin-right: 10px; /* ANPASSUNG: Rechts noch weiter eingerückt */
    }

    .fpf-logo-button img {
        height: 40px; /* ANPASSUNG: FPF Logo auf Smartphones unscrolled */
    }

    /* GESCROLLTER ZUSTAND FÜR SMARTPHONES */
    .hero-header.scrolled {
        height: 90px; /* ANPASSUNG: Höhe des gescrollten Headers auf Smartphones */
        padding: 5px; /* ANPASSUNG: Gescrolltes Padding stark reduziert */
    }

    .hero-header.scrolled .header-left {
        margin-left: 2px; /* ANPASSUNG: Links minimaler Rand beim Scrollen */
    }

    .hero-header.scrolled .logo-container img {
        max-height: 50px; /* ANPASSUNG: Logo noch kleiner gescrollt */
    }

    .hero-header.scrolled .text-container h1 {
        font-size: 0.9em; /* ANPASSUNG: h1 noch kleiner gescrollt */
    }

    .hero-header.scrolled .text-container h2 {
        font-size: 0.5em; /* ANPASSUNG: h2 noch kleiner gescrollt */
    }

    .hero-header.scrolled .fpf-logo-button img {
        height: 30px; /* ANPASSUNG: FPF Logo noch kleiner gescrollt */
    }

    /* Schatten-Text auf Smartphones ausblenden */
    .shadow-text {
        display: none;
    }
}

/* --- CSS für die frei schwebenden Social Buttons --- */
.floating-social-bar {
    position: fixed;
    top: 250px;
    right: -170px;
    width: 200px;
    background: #fff;
    border-left: 5px solid #000;
    box-shadow: -4px 4px 10px rgba(0,0,0,0.1);
    font-family: 'Merriweather', serif;
    z-index: 999; /* Darunter */
    transition: right 0.3s ease-in-out;
    padding: 16px 12px;
}

/* Etikett liegt über der Social-Bar */
.floating-social-bar::before {
    content: "SOCIALS";
    position: absolute;
    top: 50%;
    left: -26px;
    transform: translateY(-50%) rotate(180deg);
    background: #000;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    line-height: 1.1;
    padding: 4px 2px;
    width: 20px;
    border-radius: 4px 0 0 4px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    writing-mode: vertical-rl;
    letter-spacing: 1px;
    z-index: 1001; /* Höher als die Box */
}



/* Mouseover klappt die ganze Box aus */
.floating-social-bar:hover {
    right: 0;
}

/* Inhalte */
.floating-social-bar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.floating-social-bar li {
    margin-bottom: 12px;
}

.floating-social-bar a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.floating-social-bar i {
    font-size: 20px;
    color: #666;
}

.floating-social-bar a:hover i,
.floating-social-bar a:hover {
    color: #101ad3;
    background-color: antiquewhite;
}