/* Aufbau eines Heros: Erste Ebene Position: relativ. Dann dort einen absolut platzierten
Container draufpacken. Dieser enthält dann alle Komponenten des Heros und verwendet selbst
dafür das Flex-Layout. */

.hero3
{
    position: relative;     /* Macht dieses Element zu einem Surface, auf dem frei
                            andere Elemente platziert werden können */
    width: 100%;
    /*height: min(45vh, 280px);*/
    height: 38vh;

    color: rgb(255, 255, 255);

    /*background-color: var(--blau);*/
    background: linear-gradient(135deg, var(--blau), var(--blau-gradient));

    margin-bottom: 6vh;
}

.hero3 .hero-inner
{
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 30%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;

    /*background-color: pink;*/
}

.hero3 .hero-inner .logo img
{
    /*width: min(var(--hero-logo-width), var(--hero-logo-width-max));*/
    width: clamp(var(--hero-logo-width-min), var(--hero-logo-width), var(--hero-logo-width-max));
    height: auto;
}

.hero3 .hero-inner .fahrzeugContainer
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero3 .hero-inner .fahrzeugContainer img
{
    width: 6.5vw;
    height: auto;
    object-fit: contain;

    margin-top: 1rem;
}

.hero3 .hero-inner .fahrzeugContainer .pkw
{
    margin-bottom: 4rem;
}


.hero3 .hero-inner .fahrzeugContainer .motorad
{
    margin-top: 8rem;
}


.hero3 .hero-inner .anhängerContainer
{
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.5rem;
}

.hero3 .hero-inner .anhängerContainer img
{
    width: 8.5vw;
    height: auto;
    object-fit: contain;
}

.hero3 .hero-inner .anhängerContainer .anhänger
{
    margin-bottom: 2.5rem;
}


.hero3 .hero-inner .inhaberText span
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    /*font-size: min(var(--hero-inhaber-info), var(--hero-inhaber-info-max));*/
    font-size: clamp(var(--hero-inhaber-info-min), var(--hero-inhaber-info), var(--hero-inhaber-info-max));

    height: 100%;
}

.hero3 .heroBanner
{
    /* Unbedingt notwendig, da padding sonst auf
    width von 100% addiert werden würde, was eine
    Breite von diesem Element > 100% bedeuten würde!*/
    box-sizing: border-box;

    /* <top, bottom> <left, right>*/
    padding: 0.2rem 1rem;

    /* Position des Banners im Hero */
    position: absolute;
    left: 0;
    right: 0;   /* macht width 100% obsolet */
    bottom: min(0.1vh, 1px);

    /* Verhalten der Objekte auf dem Banner */
    display: flex;
    flex-direction: row;
    align-items: center;    /* Bei row: Y-Achsen Ausrichtung */
    justify-content: center;    /* Bei row: X-Achsen Ausrichtung */

    color: var(--blau);
    background-color: var(--grau);

    /*background: linear-gradient(135deg, var(--grau), var(--grau-gradient2));*/


    /* <hoizontale schattenverschiebung> <vertikale schattenverschiebung>
     <unschärfe; größer => weicher> schattenfarbe*/
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hero3 .heroBanner span
{
    /* Minimale Fontsize: <param 0>, maximale Font Size: <param 2> */
    /*clamp(1rem, 0.5vw, 2.0rem);*/
    /*min(1rem, 1vw);*/
    /*font-size: 0.95vw;*/

    font-weight: 600;
    /*font-size: max(var(--hero-banner-span-fontsize-min), var(--hero-banner-span-fontsize));*/
    font-size: clamp(var(--hero-banner-min), var(--hero-banner), var(--hero-banner-max));

    /* max() funktioniert hier invers zu min(). Heißt:
    max(<minimale größe>, <normal größe>). Bei min war
    es ja: min(<normal größe>, <maximale größe>) */
}

.hero3 .heroBanner img
{
    padding-left: 0.2rem;

    /* Hier werde ich irgendwann noch clamp() hinzufügen müssen - gilt für alle Bilder */

    width: 7vw;
    height: auto;
}