/* CONTAO LAYOUT CSS 
   Optimiert für: Header, Left, Main, Right, Footer + 100px Sidebar 
*/

:root {
    --kwg-sb-w: 100px;
    --kwg-nav-w: 400px;
    --kwg-accent: #0044ff;
    --kwg-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. Basis-Verschiebung für das gesamte Contao-Grid */
body {
    margin: 0;
    padding: 0;
}

#wrapper {
    margin-left: var(--kwg-sb-w); /* Platz für die Sidebar */
    width: calc(100% - var(--kwg-sb-w));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    
}

/* 2. Header & Footer (Volle Breite des verbleibenden Platzes) */
#header, #footer {
    width: 100%;
    flex-shrink: 0;
   
}

/* 3. Der Container (Umschließt Left, Main, Right) */
#container {
    display: flex;
    flex: 1; /* Füllt den vertikalen Raum zwischen Header und Footer */
}

#main {
    flex: 1; /* Main nimmt den restlichen Platz ein */
    padding: 20px;
}

#left, #right {
    width: 200px; /* Deine gewünschte Breite für Seitenspalten */
    flex-shrink: 0;
}