.start
{
    margin-top: 4.5vh;

    scroll-margin-top: var(--scroll-margin-top);
    width: var(--breite-contentContainerElement);

    padding: 1rem;

    /* h1 Tag in Start um a Pixel erhöhen. H1 bleibt in allen anderen Sections unverändert.
     Begründung: Es handelt sich hier um die Erste Überschrift auf der Website, die zudem auch
     noch den Namen der Fahrschule zeigt. Diese Überschrift sollte deshalb etwas größer sein
     als andere Überschriften. */
    /*--h1-min: calc(var(--h1) + 6px);*/    /* Ja, fand ich dann doch doof. Muss er sagen */
}


.start .introContainer
{
    display: flex;
    align-items: flex-start;
    flex-direction: row;

    margin-top: 0.4rem;
}

/* Zentriert das Bild im IntroContainer automatisch mittig */
.start .introContainer .autoCenter
{
    width: 100%;    /* <- Alles an Platz nehmen, was noch übrigt ist */

    display: flex;
    flex-direction: row;
    justify-content: center;
}

.start .introContainer .textSpalte
{
    max-width: 80ch;
}

.start .introContainer .textSpalte p
{
    margin-top: 0;
}

.start .introContainer .imageOutline img
{
    /*width: 10vw;*/
    /*width: min(14.5vw, 218px);*/
    width: min(var(--start-fahrschule-draußen-width), var(--start-fahrschule-draußen-width-max));
    height: auto;
}

.start .introContainer .mobileImage
{
    display: none;
}


.start .theorieContainer .textSpalte p,
.start .erreichbarkeitsContainer .textspalte p
{
    margin-top: 0;

    /*font-size: min(var(--p-klein), var(--p-klein-max));*/
    font-size: clamp(var(--text-normal-min), var(--text-normal), var(--text-normal-max));
}

.start .erreichbarkeitsContainer
{
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    /* Abstand linkes Bild zu Text */
    gap: var(--text-zu-bild-abstand-klein);
}

.start .erreichbarkeitsContainer .textspalte
{
    max-width: 70ch;
}

.start .erreichbarkeitsContainer .tel
{
    width: 40%;

    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;

    margin-top: 1vh;
}

.start .erreichbarkeitsContainer .tel img
{
    /*width: 10.5vw;*/
    width: clamp(var(--start-tel-width-min), var(--start-tel-width), var(--start-tel-width-max));
    height: auto;
}

.start .erreichbarkeitsContainer .imageOutline img
{
    /*width: min(12vw, 165px);*/
    width: min(var(--start-büro-width), var(--start-büro-width-max));
    height: auto;
}

.start .erreichbarkeitsContainer .textspalte
{
    display: flex;
    flex-direction: column;

    /*width: 62ch;*/
}

.start .theorieContainer
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;    /* <- X-Achsen Position */
    align-items: stretch;    /* Y-Achsen Position */

    gap: var(--text-zu-bild-abstand-klein);

    margin-top: 1rem;
}

.start .theorieContainer .imageOutline img
{
    /*width: min(12vw, 165px);*/
    width: min(var(--start-unterrichtsraum-width), var(--start-unterrichtsraum-width-max));
    height: auto;
}

.start .theorieContainer .textSpalte
{
    max-width: 62ch;
}

.start .theorieContainer .textSpalte p:last-child
{
    margin-bottom: 0;
}
