.kontakt
{
    scroll-margin-top: var(--scroll-margin-top);
    width: var(--breite-contentContainerElement);

    padding: var(--padding-content-container);
}

.kontakt .cardLayout
{
    display: flex;

    /* Da ja wegen scroll-snap-type die Kindelemente dieses Elements absichtlich auf der X-Achse über den
    Bildschirmrand hinaus wachen - also zu einem Overflow führen -, ist anzugeben, wie der Browser damit
    umgehen soll. Es gibt hierfür verschiedenste Optionen (visible, hidden, clip, scroll, auto). Am passensten
    ist hier allerdings auto, da der Browser den Overflow durch eine scrollleiste navigierbar macht */
    overflow-x: auto;

    scroll-snap-type: x mandatory;  /* Setzt dieses Element (card layout) als seitlich scrollbar. mandatory führt ein
                                    einrastendes Verhaltender jeweiligen card im card layout herbei */

    /*margin-top: 1.2rem;*/

    gap: 1rem;
}

.kontakt .cardLayout .card
{
    /* flex: a b c
    Wende das Flex Layout System auf dieses Element an. Üblich ist normalerweise die
    Anwendung auf Kind Elemente.

    a: flex-grow: Elementverhalten der Größe. 0 -> Keine Größenveränderung erlaubt
    b: flex-shrink: Elementverhalten der Größe. 0 -> Keine Größenveränderung erlaubt
    c: flex-basis: Elementbreite. 100% -> 100% der Viewport Width. Ein einfaches
    width: 100% würde wegen flex: a b c ignoriert werden */
    flex: 0 0 100%;

    /* Da dieses Element in Kind von einem Element mit scroll-snap-type ist, kann angegeben
    werden, welches dieser Kindelement zuerst sichtbar sein soll. Center weißt hier das
    mittlere Kind als zuerst sichtbar aus */
    scroll-snap-align: center;

    scroll-padding-left: 50%;
    scroll-padding-right: 50%;

    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    padding: 4px 8px;
}

.kontakt .cardLayout .card h2
{
    margin-top: 0.25rem;
}

.kontakt .cardLayout .card .cardContent
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 3.5rem;

    min-height: 26vh;
}

.kontakt .cardLayout .card .cardContent span
{
    /* 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-bottom: 1rem;

    padding: 4px 8px;

    min-height: 3.5rem;
}

.kontakt .cardLayout .card .cardContent .mobileButton
{
    color: var(--weiß);
}

.kontakt .cardIndicators
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;

    margin-top: 1rem;
}

.kontakt .cardIndicators .indicator
{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc; /* inaktiv */
    transition: background 0.3s;

    font-size: 0.8rem;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0.2rem;

    color: var(--blau);
}

/* Über JS setze ich die active Klasse geziehlt auf das
derzeit aktive Element */
.kontakt .cardIndicators .indicator.active   /* .indicator.activ Suche element mit Klasse indicator und betrachte es nur, wenn es auch die activ klasse enthält */
{
    background: var(--dunkel-grau);
    color: var(--weiß);
}