* { /*Gesamtes Doc auswählen */
    font-family: "Roboto", "Calibri", sans-serif;
    line-height: 1.5; /* Abstand zwischen den Zeilen festlegen */
}

h1 {
    margin-top: 0;
}

ul {
    margin-bottom: 0;
}

h1, h2 {
    color:  #2744e9;
    text-align: center; /* Textausrichtung bestimmen */
    padding: 1%;
    text-shadow: 1px 1px 1px #807f7f; /* Schatten zu Text hinzufügen */
    margin-bottom: 35px;
}

.padding-lr20 { 
    padding-left: 20px;
    padding-right: 20px;
}

img {
    margin: auto;
    display: block; /* Bild zum Blocklevelelement machen, damit Zentrierung funktioniert*/
}

section {
    margin-bottom: 50px;
}

table, th, td {
    border: 2px solid #285ef1; /* Grenzlinien um Objekt hinzufügen */
    border-collapse: collapse;  /* Grenzlinien zusammenfügen */
}

table {
    width: 95%; /* Das ist nur eine Mindestangabe! Tabelle kann also auch größer sein!!*/
    text-align: center; /* Unterelemente übernehmen diese Formattierung automatisch */
    background: linear-gradient(#2878f1, #609ef0); /* linear-gradient erzeugt einen Farbverlauf*/
    box-shadow: 2px 2px 5px #666;
    margin: 5% auto;
}



ul {
    list-style-type: none; /* Aufzählungszeichen festlegen */
}

@media (min-width: 576px) /* media - Bedingungen festlegen unter denen Code gültig ist - min- width 576 = breiter als 576 Pixel -> Tablet und größer*/ {
    .tabelle {
        display: flex; /* Nebeneinanderanordnung der Tabellen */
        justify-content: space-around; /* Bestimmt wie Inhalt relativ zueinander angeordnet wird */
    }
    table {
        width: 45%; /* Das ist nur eine Mindestangabe! Tabelle kann also auch größer sein!!*/
        margin: 0;
    }
    img {
        float: right; /* Ausrichtung nach rechts zu anderen Objekten */
        padding: 1%;
    }
    .img-unten {
        float: none;
        padding: 1%;
    }
}

@media (min-width: 1200px) /* 1200 = Desktop*/ {
    .haupt {
        display: flex;
    }

    .main {
        background:white;
        width: 95%; /* Breite des Objektes bestimmen */
        margin: 0 0 20%; /* Auto = automatische - ausgeglichene Platzierung */
        padding: 1.5% 1%; /*Abstand von Außengrenzen des Obektes nach innen */
    }
    
    .nebennavigation {
        width: 20%;
        margin: 0 0;
        background-color: rgb(55, 143, 243);
        justify-content: center;
        align-items: center;

}

    .navigationsbereich2 {
        display: flex;
        flex-direction: column;
}

    body {
        background: white fixed; /* fixed hält das Hintergrundbild fest */
        margin: 0; /* Abstand von Außengrenzen des Obektes nach außen */
    }
}