/* ========================================================= */
/* --- VARIABLES & RESET --- */
/* ========================================================= */
:root {
    --col-primary: #104E8B; /* DodgerBlue4 */
    --col-link: #00688B;    /* DeepSkyBlue4 */
    --col-title: #8B0000;   /* Red4 */
    
    --col-bg-overall: #f0f2f5; 
    --col-bg-body: #f4f4f4; 
    --col-text: #333333;
    --col-white: #ffffff;
    
    --footer-height: 40px; 
    --max-content-width: 900px; 
    
    --font-main: 'RobotoFlex', sans-serif;
    
    --box-shadow-3d: 0 4px 15px rgba(0,0,0,0.12);
}

@font-face {
    font-family: 'RobotoFlex';
    src: url('fonts/RobotoFlex-VariableFont.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

* { box-sizing: border-box; }

.skip-link {
    position: absolute;
    top: -10000px;
    left: -10000px;
}

/* KORREKTUR: Der Body ist wieder völlig normal und stabil */
body {
    margin: 0; padding: 0;
    font-family: var(--font-main);
    background-color: var(--col-bg-overall); 
    color: var(--col-text);
    overflow-x: hidden;
}

/* ========================================================= */
/* --- CONTAINER (DIE HAUPT-3D-BOX) --- */
/* ========================================================= */
.container {
    width: 100%;
    max-width: var(--max-content-width); 
    background-color: var(--col-white);
    box-shadow: var(--box-shadow-3d); 
    
    /* KORREKTUR: Klassische, unkaputtbare Zentrierung inkl. Abstand oben/unten */
    margin: 20px auto; 
    
    /* Zwingt die Box, mindestens so hoch wie der Bildschirm zu sein */
    min-height: calc(100vh - 40px);
    
    display: flex;
    flex-direction: column; 
}

/* ========================================================= */
/* --- HEADER --- */
/* ========================================================= */
#site-header { 
    height: auto !important; 
    position: relative; 
    top: 0; left: 0; right: 0; margin: 0;
    width: 100%;
    max-width: none; 
    background-color: transparent; 
    border-bottom: 4px solid var(--col-primary); 
    z-index: 3000; 
    box-shadow: none !important; 
}

.header-mobile-wrapper {
    display: grid !important; 
    grid-template-columns: 1fr 40px !important;
    align-items: center !important; 
    padding: 10px 20px !important; 
    position: relative;
    width: 100%;
}

.header-title-row { padding: 0 !important; }

.site-title a { 
    font-family: var(--font-main); color: var(--col-title); 
    font-size: 1.4rem; font-weight: 600; text-transform: uppercase;
    text-decoration: none !important;
}

/* ========================================================= */
/* --- HAMBURGER TOGGLE (NAVIGATION) --- */
/* ========================================================= */
.mobile-toggle-checkbox { display: none; }
.mobile-toggle-label {
    display: flex !important; flex-direction: column; justify-content: space-between;
    width: 32px; height: 24px; cursor: pointer; z-index: 4000;
}
.hamburger-line { 
    display: block; height: 3px; width: 100%; 
    background-color: var(--col-primary); border-radius: 3px; 
    transition: all 0.3s ease; 
}

.mobile-toggle-checkbox:checked ~ .header-mobile-wrapper .mobile-toggle-label .hamburger-line:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.mobile-toggle-checkbox:checked ~ .header-mobile-wrapper .mobile-toggle-label .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-toggle-checkbox:checked ~ .header-mobile-wrapper .mobile-toggle-label .hamburger-line:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

.top-nav {
    display: none !important; 
    position: absolute; top: 100%; left: 0; 
    width: 100%; background: var(--col-primary); height: auto; 
    padding: 0; overflow-y: auto; max-height: 75vh; z-index: 3500;
}
.mobile-toggle-checkbox:checked ~ .top-nav,
.mobile-toggle-checkbox:checked ~ .header-mobile-wrapper .top-nav { display: block !important; }
.top-nav ul { display: block !important; width: 100%; margin: 0; padding: 0; list-style: none; }
.top-nav a { display: block !important; width: 100%; padding: 12px 20px !important; color: var(--col-white) !important; text-decoration: none !important; border-top: 1px solid rgba(255,255,255,0.1); font-size: 1rem; }

.top-nav li.menu-current > a { 
    font-weight: bold !important; 
    background-color: rgba(255,255,255,0.2) !important; 
}

/* ========================================================= */
/* --- INHALTSBEREICH & BROTKRÜMEL --- */
/* ========================================================= */
#sidebar-left, #main-content {
    max-width: none; 
    margin: 0;   
}

#sidebar-left { 
    position: static !important;
    top: 0 !important;
    width: 100%;
    height: auto !important;
    margin-top: 20px !important; 
    padding: 0 20px !important; 
}

.breadcrumb-label { font-weight: bold; display: block; color: var(--col-primary); margin-bottom: 5px; }
#sidebar-left ul { margin: 0; padding: 0; list-style: none; }
#sidebar-left a { text-decoration: none !important; color: var(--col-text); }
#sidebar-left .menu-current > a { color: var(--col-primary) !important; font-weight: bold !important; }

/* KORREKTUR: Der Goldstandard für das Sticky-Footer Problem */
#main-content { 
    padding: 20px !important; 
    margin-bottom: 0 !important; 
    padding-bottom: 30px !important; 
    
    /* Zwingt den Inhalt, den gesamten restlichen Platz einzunehmen 
       und den Footer so nach unten an den Rand zu drücken */
    flex: 1 0 auto; 
}

#main-content p, #main-content ul, #main-content ol, #main-content li, #main-content td { font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.25rem; }
#main-content h1, #main-content h2 { line-height: 1.2; color: var(--col-primary); margin-top: 0; margin-bottom: 1rem;}
#main-content h1 { font-size: 2.2rem; }
#main-content a { color: var(--col-link); text-decoration: underline; text-underline-offset: 3px; }

/* ========================================================= */
/* --- FOOTER --- */
/* ========================================================= */
#site-footer {
    position: static; 
    bottom: 0; left: 0; right: 0; margin: 0;
    width: 100%;
    max-width: none; 
    height: var(--footer-height);
    background: var(--col-primary); 
    display: flex; align-items: center; justify-content: center;
    z-index: 1500; 
    color: var(--col-white); 
    box-shadow: none !important; 
    font-size: 0.85rem; 
    
    /* Verhindert, dass der Browser den Footer auf manchen Geräten einquetscht */
    flex-shrink: 0; 
    margin-top: auto; 
}

#site-footer p { margin: 0; color: inherit; }