/* ==========================================================================
   1. INDIEN-HINTERGRUND FÜR DIE WEBSEITE (FIREFOX- & CHROME-SAFE)
   ========================================================================== */
body, .site-interface, main, .body-innerwrapper, .grid-child.container-component {
    /* Safran auf #f3c677, Gruen auf #7fbe94 aufgehellt. Weiss gestreckt von 35% bis 65% */
    background-image: linear-gradient(to right, #f3c677 0%, #ffffff 35%, #ffffff 65%, #7fbe94 100%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: transparent !important; 
    color: #1a1a1a !important;
}

/* ==========================================================================
   2. HEADER-BEREICH (TITEL & UNTERÜBERSCHRIFT)
   ========================================================================== */
.header {
    background: transparent !important;
    background-color: transparent !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Erzwingt einfaches, sauberes Schwarz ohne Schatten für alle Texte im Header */
.header, .header *, .navbar-brand, .navbar-brand * {
    color: #000000 !important;
    text-shadow: none !important;
    text-decoration: none !important;
}

/* Schriftgröße für den Hauptbuchtitel */
.brand-title, .navbar-brand a {
    font-weight: 800 !important;
    font-size: 28px !important;
}

/* ==========================================================================
   3. SCROLLSEITE (DIE REISE-EPISODEN UNTER DEM PITCH)
   ========================================================================== */
.blog-items .blog-item {
    background: rgba(255, 255, 255, 0.4) !important; /* Leicht transparentes Weiß */
    padding: 25px !important;
    border-radius: 8px !important;
    margin-bottom: 35px !important;
    max-width: 800px !important;   /* Optimale Lesebreite für die Berichte */
    margin-left: auto !important;  /* Zentriert die Box im weißen Bereich */
    margin-right: auto !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}

/* Setzt die Standard-Ausrichtung auf links, lässt dem Editor aber freie Hand für Änderungen */
.blog-items .blog-item,
.blog-items .blog-item p,
.blog-items .blog-item h1,
.blog-items .blog-item h2,
.blog-items .blog-item h3 {
    text-align: left; /* KEIN !important mehr – der Editor bekommt seine Macht zurück! */
}

/* ==========================================================================
   5. KONTAKTFORMULAR-OPTIMIERUNG (TEXT AN DIE SPITZE ZWINGEN)
   ========================================================================== */
/* Verwandelt die gesamte Kontaktseite in eine vertikale Box */
.com-contact, 
div.com-contact {
    display: flex !important;
    flex-direction: column !important;
}

/* Schiebt Ihre Einladung (Zusatzinformationen) an Position 1 nach ganz oben */
.com-contact__miscinfo,
.contact-miscinfo {
    order: -1 !important; /* Katapultiert den Text an die absolute Spitze */
    margin-bottom: 25px !important; /* Schafft Platz zu den Formularfeldern */
}

/* Sorgt dafuer, dass das eigentliche Formular brav an Position 2 folgt */
.com-contact__form,
#contact-form {
    order: 2 !important;
}



/* ==========================================================================
   6. FOOTER-PROJEKTMODUL ("ÜBER DIESES PROJEKT")
   ========================================================================== */
/* Verwandelt das Projektmodul im Fußbereich in eine edle Milchglas-Box */
.footer #tab-over-dieses-projekt,
.footer .mod-custom,
footer .mod-custom {
    max-width: 800px !important;
    margin: 30px auto !important; /* Zentriert die Kiste und schafft Abstand */
    background: rgba(255, 255, 255, 0.4) !important; /* Identische 40% Transparenz wie die Episoden */
    padding: 25px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
    color: #1a1a1a !important;
    text-align: left !important; /* Text liest sich linksbündig im Footer am besten */
}

/* Zentriert ausschließlich die Überschrift des Projektmoduls im Footer */
.footer .mod-custom h3,
footer .mod-custom h3,
footer .mod-custom h4 {
    text-align: center !important;
    margin-bottom: 15px !important;
    font-weight: 700 !important;
}