/* Grundlayout */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#additional-info {
         background: #fffbf0;
         border: thin solid #e7c157;
         max-width: 30em;
         position: absolute;
         line-height: 100%;
         margin: 4rem auto;
         padding: 1rem;
}
/* Kopfbereich */
header {
    background: #0020FF;
    font-color: #FFFFFF;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-item1 {                    /*header*/
         background: #0000FF;
         width: 100%;
         margin: 1px;
         text-align: center;
         line-height: 20px;
         font-size: 18px;
}
table    {
    background: #0020FF;
    font-color: #FFFFFF;
    border: none;
    display: flex;
    justify-content: center;
    text-align-center;
}

/* Button */
.menu-btn {
    background: #3498db;
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
}

/* Container für Navigation + Inhalt */
.main-container {
    background: #0020FF;
    color: #FFFFFF;
    display: flex;
    flex: 1;
    position: relative;
}
li {
        background-color:#0020FF ;
        line-height: 1.5em;
        color: #FFFFFF;
}
/* Inhaltsverzeichnis (Sidebar) */
nav {
    background: #ecf0f1;
    color: #FFFFFF;
    padding: 1rem;
    position: absolute;
    top: 0;
    height: 100%;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

nav a {
    text-decoration: none;
    color: #2c3e50;
    font-weight: bold;
}

nav.active {
    left: 0;
    display: flex;
<!--    flex-direction: column;   -->
}

/* Inhaltsfenster */
main {
    display: flex;
    flex: 1;
    padding: 8rem;
    flex-direction: column;
}
/* aktueller theologischer Impuls */
section {
    background: #0020FF;
    color: #FFFFFF;
    padding: 1rem;
    display: flex;
    justify-content:
    space-between;
    align-items: center;
}
/* Inhaltsfenster */
article {
    flex: 1;
    background: #0020FF;   /*blau*/
    color:#FFFFFF;
    padding: 1rem;
    left:-240px;
    display: flex;
    flex-direction: column;
}
article a{
    text-decoration: none;
    color: #FFFFFF;
}
article acvive{
    text-decoration: none;
    color: #FFDF00;
}
/* Fußzeile */
footer {
    background: #0020FF;
    color: white;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: right;
}
/* Fußzeilen */
footer a {
    color: #3498db;
    text-decoration: none;
}
/* hüpfende Bälle */
:root {
        --color-1: #c32e04;
        --color-2: hsla(150, 50%, 38%, 1);
        --color-3: hsla(260, 50%, 38%, .8);
        --color-4: hsla(370, 50%, 38%, .6);
        --color-5: hsla(480, 50%, 38%, .4);
}
.ball {
        --delay: calc(var(--i, 0.7) * 300ms);
        --distance: calc(var(--d, 0.5) * (2.5 * var(--radius)));
        --radius: 15px;
        cx: var(--distance);
        cy: var(--radius);
        r: var(--radius);
        animation: moveCircle 1200ms var(--delay) ease-in-out infinite;
}

.ball:nth-child(1) {
        fill: var(--color-1);
        --d: 1;
        --i: 1;
}

.ball:nth-child(2) {
        fill: var(--color-2);
        --d: 2;
        --i: 2;
}

.ball:nth-child(3) {
        fill: var(--color-3);
        --d: 3;
        --i: 3;
}

.ball:nth-child(4) {
        fill: var(--color-4);
        --d: 4;
        --i: 4;
}

.ball:nth-child(5) {
        fill: var(--color-5);
        --d: 5;
        --i: 5;
}
@keyframes moveCircle {
        60% {
                cy: 150px;
                r: 12.5px;
        }
}
/* Größere Bildschirme */
@media (min-width: 768px) {

    nav {
        position: relative;
        left: 0;
        height: auto;
    }

    .main-container {
        flex-direction: row;
    }
}