.topLevelContainer
{
    /*background-color: var(--matt-weiß);*/
    background-color: var(--weiß);

    width: 100vw;

    display: flex;
    align-items: center;
    flex-direction: column;
}

.topLevelContainer .navigationBoxContainer
{
    display: none;
}

.topLevelContainer .contentContainer
{
    /* Content Container Element eine feste Breite geben. Das ist
    bei diesem Flex-Layout System zwingend erforderlich */
    width: var(--breite-contentContainer);

    display: flex;
    flex-direction: column;
    justify-content: center;    /* Y-Achse, da column layout */
    align-items: center;    /* X-Achse, da column Layout */

    /* Abstand zwischen den Content Container Elementen. Also Abstand
    zwischen Element RaumTrenner Element */
    gap: var(--abstand-contentContainerElement);

    /* Schriftfarbe setzen */
    color: var(--blau);
}

.contentContainer .raumtrenner
{
    /*display: none;*/

    width: var(--breite-contentContainer);

    border-top: 2px solid var(--schwarz);
}

/* Achtung: Ab jetzt die Pfade möglichst allgemein angeben. Nur dann ist das Überschreiben
der gesetzten Regeln in Dateien aus dem Standart CSS Bereich nämlich noch möglich
(Der spezifischere Pfad gewinnt) */

/* ---- Beginn Content Container Prebuild Elemente ----  <--- Bitte später über Tailwind lösen */
.contentContainer h1
{
    /*font-size: min(var(--h1), var(--h1-max));*/
    font-size: clamp(var(--h1-min), var(--h1), var(--h1-max));

    margin-top: 0;
    /*margin-bottom: 0;*/
    margin-bottom: 1.10rem;

    margin-left: 8px;
}

.contentContainer h2
{
    /*font-size: min(var(--h2), var(--h2-max));*/
    font-size: clamp(var(--h2-min), var(--h2), var(--h2-max));

    margin-top: 2.5rem;
    /*margin-top: 2.75rem;*/
    margin-bottom: 1.15rem;

    margin-left: 8px;
}

/* Trifft alle p Tags im Content Container */
.contentContainer p
{
    /* Der Abstand zwischen den einzelnen Zeilen */
    line-height: var(--line-height-p);       /* a * schriftgröße - deshalb keien Einheit */

    /*font-size: min(var(--p), var(--p-max));*/
    font-size: clamp(var(--text-normal-min), var(--text-normal), var(--text-normal-max));

    color: var(--schwarz);

    margin-top: 0.5em;      /* em, statt rem nutzen, da dann die Schriftröße des P Tags für den Abstand berücksichtig */
    margin-bottom: 0.5em;   /* wird -> responsive Design */
}

/* Trifft alle p Tags im Content Container, die auf ein p Tag folgen  */
.contentContainer p + p
{
    margin-top: 0;
}

/* Trifft alle a Tags in .contentContainer */
.contentContainer a
{
    color: var(--blau);

    font-size: clamp(var(--text-normal-min), var(--text-normal), var(--text-normal-max));
}

.contentContainer a:hover
{
    color: var(--dunkel-grau);
    text-decoration: none;
}

/* Setzt ein Bild Element in einen eckigen Ramen mit a Pixel
Abstand zu diesem Rahmen. #Zugehörige Elemente: 1 */
.contentContainer .imageOutline
{
    border: 1px solid black;

    width: fit-content;
    height: fit-content;
}

.contentContainer .imageOutline img
{
    border: 1px solid #e0e0e0;
    box-shadow: 0 0 8px rgba(0,0,0,0.15);

    /* Abstand unterm Bild entfernen. Der Abstand existiert, da jeder Text nach
    unten immer etwas Abstand hat. Mit display: Block ist das Element aber kein
    Text mehr und hat deshalb nach unten auch keinen Abstand */
    display: block;

    margin: 2px 2px 2px 2px;
}

/* ---- Ende Content Container Prebuild Elemente ---- */