html, body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Ubuntu', sans-serif;
}

header, main, footer {
    display: flex;
    justify-content: center; /* Zentriert die 1240px-Divs horizontal */
}

#header, #bar, #main, #footer {
    width: 100%;
    max-width: 1240px;
}

header {
    height: 300px;
}

main {
    flex: 1;
    display: flex;           /* Aktiviert das Flex-Layout */
    background-color: #ccc;
    justify-content: center; /* Hält alles in der Mitte (deine 1240px) */
}

footer {
    height: 250px;
    background-color: #2D2D2D;
}

#main {
    display: flex;          /* Erlaubt Sidebar und Content nebeneinander */
    gap: 25px;              /* Einfacher Abstand zwischen Sidebar und Content */
    padding-bottom: 25px;
}

#bar {
    width: 100%;
}

.main_bar {
    background-color: #2D2D2D;
    margin: 24px 0px 24px 0px;
}

.main_content {
    flex: 1;                /* Nimmt den restlichen Platz ein */
    background-color: #EFEFEF;
}

.main_sidebar {
    width: 340px;
    background-color: #2D2D2D;
}