body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
}

button {
    margin: 0.5em;
}

.small {
    font-size: 0.8em;
    opacity: 0.75;
}

#header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
    border: none;
}

#footer {
    /*display: flex;
    justify-content: flex;
    align-items: center;*/
    padding: 10px;
    background-color: #f0f0f0;
    border-bottom: 0px solid #ccc;
    border: none;
}

#header button {
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    background-color: SteelBlue;
    color: #fff;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

#header button:hover {
    background-color: #0056b3;
}

#content {
    display:            flex;
    flex:               1; /* Flex-Verhältnis, damit dieser Bereich den Rest des Bildschirms einnimmt */
    overflow:           hidden; /* Verhindert Scrollen des übergeordneten Containers */
}

textarea, #preview {
    width:              50%; /* Stellt sicher, dass beide Fenster gleich groß bleiben */
    height:             100%; /* Die Fenster nehmen die gesamte Höhe ein */
    padding:            10px;
    box-sizing:         border-box;
    overflow:           auto; /* Ermöglicht Scrollen innerhalb der Fenster */
    border:             none; /* Entfernt den sichtbaren Rahmen */
}

textarea {
    resize:             none; /* Deaktiviert die manuelle Größenänderung des Textarea */
    color:              #444444;
    font-size:          1.2em;
    padding:            2em;
    border:             none;
    background-color: #eaeaea;
}

#preview {
    background-color:   #f5f5f5; /* Optional: Heller Hintergrund für bessere Lesbarkeit */
    padding:            2em;
    color:              #444444;
    border:             none;
    font-size:          1.1em;
    font-family:        sans-serif;
    line-height:        1.3em;
}

pre {
    background-color: #eeeeee;
    padding:            1em;
    border-left:        5px solid ORANGE;
    margin-left:        0px;
    margin-right:       0px;
    border-radius:      4px;
    box-shadow:         0px 0px 15px rgba(0,0,0,0.1);
}

pre + p em {
    display:            block;
    font-size:          0.8em !important;
    color:              #e37932;
    margin-left:        10px;
    margin-top:         -15px;
}

blockquote {
    background-color: #eeeeee;
    padding-left:       1em !important;
    padding-right:      1em !important;
    padding-bottom:     0.6em !important;
    padding-top:        0.6em !important;
    border-left:        5px solid SteelBlue;
    margin-left:        0px;
    margin-right:       0px;
    border-radius:      4px;
    box-shadow:         0px 0px 15px rgba(0,0,0,0.1);
    font-weight:        lighter;
}

a {
    text-decoration: none !important;
}