/* Basis-Styles */
* {
    box-sizing: border-box;
    
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Ausrichtung der Inhalte links */
}

.container {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100%; /* Ganze Breite nutzen */
}

.sidebar {
    flex: 0 0 200px; /* Breite der Sidebar */
    background-color: #857f7f;
    color: white;
    padding: 15px;
    overflow-y: auto; /* Ermöglicht das Scrollen innerhalb der Sidebar */
    flex-grow: 0; /* Lässt die Sidebar die verfügbare Höhe ausfüllen */
    
}

/*.special {
    color: #ff0000; /* Rot für den speziellen Paragraphen 
    text-align: center;  Rechtsbündige Ausrichtung 
    margin: 10px auto;  Eigenes Margin-Setting 
    /*font-weight: bold; /* Fettschrift 
    padding-left: 0;
}*/

.centered-block {
    width: 60%; /* Setzt eine spezifische Breite für den Block */
    margin: 20px auto; /* Zentriert den Block horizontal und fügt vertikal Abstand hinzu */
    text-align: left; /* Behält die linkbündige Ausrichtung des Textes bei */
    padding: 10px; /* Fügt innen einen Abstand hinzu */
    /*border: 1px solid #ccc; /* Optional, fügt eine sichtbare Grenze hinzu */
    /*background-color: #f9f9f9; /* Optional, setzt eine Hintergrundfarbe */
}



.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar a {
    color: white;
    text-decoration: none;
}

.content {
    flex-grow: 1; /* Lässt den Inhalt den verfügbaren Platz einnehmen */
    justify-content: center;
    padding: 20px;
    overflow-y: auto; /* Ermöglicht das Scrollen innerhalb des Hauptinhalts */
    
}

h1, h2, a {
    color: #0056b3;
    text-align: center;
    padding-left: 0;
}

main p {
    color: #0056b3;
    width: 60%;          /* Bestimmt die Breite der Paragraphen-Blöcke */
    margin: 25px auto;   /* Zentriert die Paragraphen horizontal und fügt oben und unten Abstand hinzu */
    text-align: left;    /* Textausrichtung links innerhalb des Blocks */
}


.vertical-list {
    color: #0056b3;
    list-style-type: none;  /* Entfernt die Standard-Bullets */
    width: 600px;       /* Setzt eine maximale Breite für die Liste */
    margin: 0 auto;         /* Zentriert die Liste horizontal */
    padding: 0;
}

.vertical-list li {
    padding: 8px;           /* Fügt jedem Listenelement etwas Polster hinzu */
    border-bottom: 1px solid #ccc;  /* Fügt eine Trennlinie zwischen den Listenelementen hinzu */
}

.image-with-text {
    display: flex;
    align-items: center; /* Zentriert den Text vertikal neben dem Bild */
    justify-content: center; /* Zentriert den Inhalt horizontal im Container */
    gap: 10px; /* Fügt einen kleinen Abstand zwischen Bild und Text ein */
    width: 100%; /* Stellt sicher, dass der Container die volle Breite einnimmt */
}

.image-with-text img {
    width: 100px;
    height: 100px;
}

.image-with-text p {
    margin: 0; /* Entfernt den Standard-Außenabstand */
    flex: 1 0 60%; /* Bestimmt die Flexbasis und verhindert Wachstum darüber hinaus */
    width: 60%; /* Begrenzt die Breite des Paragraphen */
    text-align: left; /* Stellt die Textausrichtung auf links ein */
}



/* Media Queries */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        height: auto;
        flex: none; /* Entfernt die Flex-Breitenangabe */
    }
    main p {
        width: 95%;        /* Erhöht die Breite auf kleinen Bildschirmen */
        margin: 10px auto; /* Reduziert den vertikalen Abstand auf kleinen Bildschirmen */
    }
}

@media (min-width: 1024px) {
    #main-content {
        flex-direction: row;
    }
}