/* ================================================= */
/* 0. GLOBALE KORREKTUREN & BASIS                    */
/* ================================================= */
body {
    /* WICHTIG: Verhindert horizontale Scrollbalken/Verschiebung durch Layoutfehler */
    overflow-x: hidden; 
}

/* ================================================= */
/* 1. LAYOUT BASIS & HEADER                          */
/* ================================================= */

.header-300px {
    height: 300px !important; 
}

/* WEISSER RAHMEN/SCHATTEN FÜR VIDEO-HEADER */
.white-header-frame {
    background-color: white; 
    position: relative; 
    overflow: hidden; 
}

/* Der Container ist der Kern der Zentrierung (max. 1100px) */
.container-1100 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* 16px Rand für kleine Bildschirme */
    padding-right: 1rem; /* 16px Rand für kleine Bildschirme */
}

img {
   box-shadow: 3px 2px 7px #666060;
border-radius: 25px;
}

@media (min-width: 1140px) {
    .container-1100 {
        max-width: 1100px;
        /* Ränder entfernen, sobald max-width greift */
        padding-left: 0; 
        padding-right: 0;
    }
}

/* Textschatten für Video-Header */
.text-shadow-lg {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); 
}

/* ================================================= */
/* 2. NAVIGATION & STICKY FEATURES                   */
/* ================================================= */

/* BLAUER NAVI-STREIFEN (60px) */
/* Breite wird durch container-1100 im HTML gesteuert */
.blue-stripe-container {
    width: 100%; 
    height: 60px;
    background-color: #3b82f6; 
    z-index: 20;
}

/* TITELBAND-STREIFEN (Der schmale Streifen UNTER der Navi) */
.title-band-stripe {
    background-color: #3b82f6; 
    height: 35px; 
    color: white; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.75rem; 
    font-weight: 600; 
    z-index: 19;
    
    /* Positionierung relativ zum übergeordneten .container-1100/main */
    margin-left: 0; 
    margin-right: 0;
    
    border-top-left-radius: 0.75rem; 
    border-top-right-radius: 0.75rem; 
}
 
/* Sticky Wrapper für den Nav-Streifen */
.sticky-nav-wrapper {
    position: sticky;
    top: 0;
    z-index: 20; 
    margin-bottom: 5px; 
}

/* ================================================= */
/* 3. FOOTER (Helles Grau mit blauem Rand)           */
/* ================================================= */
.footer-stripe {
    background-color: #f3f4f6; /* Helles Grau */
    color: #374151; /* Dunkler Text */
    padding: 2rem 1rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 1rem;
    
    /* DIES IST DER DÜNNE BLAUE STREIFEN, DEN SIE EVTL. MEINEN */
    border-top: 5px solid #3b82f6; 
    
    border-bottom-left-radius: 0.75rem; 
    border-bottom-right-radius: 0.75rem;
}

/* Wenn Sie den 5px blauen Rand oben im Footer entfernen möchten: */
/* Entfernen Sie einfach die Zeile "border-top: 5px solid #3b82f6;" aus .footer-stripe */


.footer-stripe a {
    color: #3b82f6; 
    text-decoration: none;
    transition: color 0.2s;
}

/* ================================================= */
/* 4. TEXT-AUSRICHTUNGEN (FÜR BBCode-Ersatz in JS)   */
/* ================================================= */

.text-left-aligned {
    text-align: left !important;
}
.text-center-aligned {
    text-align: center !important;
}
.text-right-aligned {
    text-align: right !important;
}