/* LAYOUT */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    font-family: 'Lucida Sans', Arial, sans-serif;
    font-weight: 200;
    line-height: 1.3;
    font-size: 100%;
    --main-color: #1f5eb6;
    --second-color: #ffffff;
}


h1, h2 {
    color: var(--main-color);
    text-align: center;
}

h3 {
    color: var(--main-color);
}

p {
    max-width: 60ch;
}

thead {
    color: var(--main-color);
}

footer {
    background: #ffff;
    margin: 1%;
    padding: 2%;
    border: 1px solid var(--main-color);
}

nav ul, article ul {
    list-style: none;
    padding: 0;
}

[href] {
    color: var(--main-color);
}



#logo {
    text-align: center;
    border: 1px solid var(--main-color);
    margin: 1%;
    padding: 2%;
}


#sidebar {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    right: 0;
    top: 0;
    margin: 1%;
    padding: 1rem;
    background: var(--second-color);
    width: 24%;
    font-size: 1em;
}

#layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 1rem;
    position: relative;
    margin: 1%;
    padding: 1%;
    border: 1px solid var(--main-color);
    align-items: start;
}


#content {
    background-color: var(--second-color); 
    padding: 1rem; /* Innenabstand */
}



/* Footer container */
#foot {
    background-color: #ffffff; 
    padding: 20px 0; 
    text-align: center; 
}

/* Liste der Footer-Links */
#foot ul {
    display: flex; 
    justify-content: space-evenly; 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
}

/* Links im Footer */
#foot ul li {
    margin: 0; /* Entfernt den Abstand um die Listenelemente */
}

/* Link-Styles */
#foot ul a {
    text-decoration: none; /* Entfernt die Unterstreichung */
    color: #1f5eb6; /* Schriftfarbe */
    padding: 0 19px; /* Etwas horizontaler Abstand zwischen den Links */
    font-size: 19px; /* Schriftgröße anpassen */
}
/* Artikel: Flexbox für Bild und Text */
article {
    margin-bottom: 20px; /* Abstand zwischen den Artikeln */
}

article h3 {
    margin-bottom: 1rem; /* Abstand zwischen der Überschrift und dem Text */
    text-align: left; /* Überschrift zentrieren */
}

/* Container für Text und Bild */
.article-content {
    display: flex;
    align-items: flex-start; /* Bild und Text oben ausrichten */
    justify-content: flex-start; /* Positioniert die Elemente am Anfang (links) */
}

article img {
    margin-left: 20px; /* Abstand zwischen Text und Bild */
    width: 150px; /* Bildgröße */
    height: auto; /* Seitenverhältnis bleibt erhalten */
}

/* Hover-Effekt */
#main-navigation li a:hover {
    background-color: #ddd; /* Hintergrundfarbe beim Hover */
    color: #000; /* Textfarbe beim Hover */
}

nav#main-navigation ul {
    display: flex;
    justify-content: center;
}
/* Navigation */
nav#main-navigation {
    background-color: var(--second-color); /* Hintergrund der Navigation */
    padding: 10px 0; /* Abstand oben und unten */
    border: 1px solid var(--main-color); /* Optional, um die Navigation zu betonen */
}

nav#main-navigation ul {
    display: flex; /* Aktiviert Flexbox */
    justify-content: space-around; /* Gleichmäßiger Abstand zwischen den Links */
    list-style: none; /* Entfernt Bulletpoints */
    margin: 0; /* Entfernt Außenabstand */
    padding: 0; /* Entfernt Innenabstand */
}

nav#main-navigation li {
    margin: 0 10px; /* Abstand zwischen den Listenelementen */
}

nav#main-navigation a {
    text-decoration: none; /* Entfernt Unterstreichung */
    color: var(--main-color); /* Textfarbe */
    font-size: 1.2rem;
    padding: 5px 10px; /* Innenabstand für mehr Klickfläche */
}

nav#main-navigation a:hover {
    background-color: #ddd; /* Hintergrundfarbe beim Hover */
    color: #000; /* Textfarbe beim Hover */
}
nav#main-navigation{
background: #ffff;
    margin: 1%;
    padding: 2%;
    border: 1px solid var(--main-color);}


/* Responsive Tabellen mit Media Queries */
@media (max-width: 38em) {
    #table_me {
        display: block;
        overflow-x: auto; 
    }

@media print {
    :root {
        font-size: 11px;
    }

    form, nav {
        display: none;
    }

    main {
        display: block;
        background: #ffffff;
        page-break-inside: avoid;
    }

    table, thead, tr, td {
        color: var(--main-color);
        background-color: #ffffff;
    }

    table {
        border: 1px solid var(--main-color);
    }

    footer {
        background: #ffffff;
    }

    a {
        text-decoration: none;
        color: var(--main-color);
    }

    a[href]::after {
        display: block;
        content: attr(href);
    }

    #logo {
        background: #ffffff;
    }
}


@media (min-width: 62em) {
    main {
        grid-template-columns: 1fr 2fr 1fr; 
        column-gap: 40px; 
    }
}
@media (max-width: 600px) {
    #sidebar {
        position: relative;
        width: 100%;
        font-size: 0.9em; 
    }

    #layout {
        grid-template-columns: 1fr; /* Einspaltiges Layout */
    }

    #logo {
        width: 100%; /* Logo an Bildschirmgröße anpassen */
        margin: 0;
        padding: 10px;
    }

    nav#main-navigation ul {
        flex-direction: column; /* Navigation als vertikale Liste */
    }
	/* Mobile-spezifische Anpassungen */
@media (max-width: 600px) {
    /* a) Sidebar ausblenden */
    #sidebar {
        display: none;
    }
 /* c) Bild unter dem Artikeltext anzeigen */
    .article-content {
        display: block; /* Standard-Block-Layout für Text und Bild */
    }

    article img {
        margin: 10px 0; /* Abstand oben und unten */
        width: 100%; /* Bild nimmt die volle Breite ein */
        height: auto; /* Verhältnis bleibt gleich */
    }
	#logo {
        border: none; /* Entfernt den Rahmen */
    }

}