/* ==========================================================================
   Das "Endgültige Aus" für jegliche Ränder
   ========================================================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden; /* Verhindert das horizontale Wackeln/Scrollen */
}

/* ==========================================
   1. GLOBALE BASIS-EINSTELLUNGEN (Body & Text)
   ========================================== */
body {
    background-color: #121212; /* Edles, weiches Dunkelgrau/Schwarz */
    color: #ffffff;            /* Macht alle Standardtexte weiß */
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;   /* <--- Hier kannst du z.B. 400 oder 700 eintragen */
    -webkit-font-smoothing: antialiased;
}

/* Sicherstellen, dass alle Überschriften standardmäßig weiß sind */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
    margin-top: 0;
}


/* ==========================================
   2. SITE HEADER (Der obere Rahmen)
   ========================================== */
.site-header {
    width: 100%;
    min-height: 120px; /* Mindesthöhe für deinen Header */
    
    /* Hier laden wir das SVG-Hintergrundbild aus dem images-Ordner */
    background-image: url('../images/bg-header.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    
    /* Innenabstand, damit der Inhalt nicht am Rand klebt */
    padding: 20px;
    box-sizing: border-box;
}

/* Der Container, der das Logo/Menü im Header schön zentriert */
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* ==========================================
   3. SEKTIONEN-LAYOUT & ZENTRALE TRENNLINIEN
   ========================================== */
/* Hauptinhaltsbereich zentrieren und flexibel einrücken */
#content {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 10px;
    box-sizing: border-box;
}

/* ZENTRALE STEUERUNG: Für alle zusätzlichen Inhaltsblöcke / Module */
.modular-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;        /* Gleichmäßiger Abstand oben und unten */
    box-sizing: border-box;
    border-bottom: 0px solid #333333; /* Jede Sektion trennt sich autom. nach unten ab */
}

/* ==========================================
   4. SITE FOOTER (Der untere Rahmen)
   ========================================== */
.site-footer {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    background-image: url('../images/bg-footer.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    
    padding: 10px 10px;
    box-sizing: border-box;
    
    border-top: 1px solid #333333;
    text-align: center;
}

.footer-overlay {
    background: rgba(18, 18, 18, 0.75);
    padding: 30px;
    border-radius: 12px;
    display: inline-block;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-content p {
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}


/* ==========================================================================
   5. MOBILE KORREKTUREN (DIREKT-INJEKTION)
   ========================================================================== */
@media screen and (max-width: 767px) {
    #content {
        margin: 10px auto !important;
        padding: 0 5px !important;
    }

    .header-container {
        gap: 15px !important;
        padding: 5px 5px !important;
    }
    
    .logo {
        height: 65px !important;
    }
    
    .hamburger {
        height: 50px !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .hamburger-icon {
        height: 50px !important;
        width: auto !important;
        max-height: 50px !important;
        display: block !important;
    }
}