/* Dieser Container erzeugt ein 2 spaltiges Layout. In diesem ist links immer die
NavigationBox und rechts immer der Inhalt der Website zu sehen. Mit der NavigationBox
kann zu entsprechenden Inhalten gesprungen werden. Diese Datei fungiert damit als
Root Element. Aus diesem Grund sind grunsätze, die in allen Kindern von einer der
beiden oder in beiden spalten immer gleich sind hier ebenfalls implementiert. */

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

    width: 100vw;

    display: flex;
    align-items: flex-start;    /* Anordnung der Elemente im Container links beginnen */
    flex-direction: row;
}

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

    /* Dieser Container bewegt sich jetzt mit dem Scrollen der Website mit
    und bleibt dabei immer auf der gleichen stelle. Leider geht Position:
    relative für dieses und alle kind elemente jetzt leider aber nicht mehr. */
    position: sticky;
    top: 0;
}

.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
{
    /*width: calc(var(--breite-contentContainerElement) + 5%);*/
    width: var(--breite-contentContainer);

    border-top: 1px dotted 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 ---- */
.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: 1.20rem;
}

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

    margin-top: 3rem;
    /*margin-top: 2.75rem;*/
    margin-bottom: 1.3rem;
}

/* 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);

    font-weight: 350;

    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 ---- */