/* =========================================================
   H2 CHAUFFEURSERVICE
   ÜBER UNS
========================================================= */


/* =========================================================
   HERO
========================================================= */

.about-hero {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-color: #080808;
}

.about-hero__background {
    position: absolute;
    inset: 0;

    background-image: url("../images/first-class.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transform: scale(1.04);
}

.about-hero__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.97) 0%,
            rgba(5,5,5,.86) 42%,
            rgba(5,5,5,.35) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.20) 0%,
            rgba(0,0,0,.72) 100%
        );
}

.about-hero__content{
    position:relative;
    z-index:2;

    max-width:780px;

    padding-top:150px;
    padding-bottom:120px;
}

.about-hero__content h1{
    max-width:760px;
}

.about-hero__text{

    max-width:650px;

    margin-top:30px;

    color:rgba(255,255,255,.72);

    font-size:1.05rem;
    line-height:1.9;
}

.about-hero__actions{

    display:flex;
    flex-wrap:wrap;
    gap:18px;

    margin-top:42px;
}


/* =========================================================
   EINLEITUNG
========================================================= */

.about-intro{

    background:#f6f3ed;
}

.about-intro__grid{

    display:grid;

    grid-template-columns:
        minmax(280px,.9fr)
        minmax(0,1.1fr);

    gap:90px;

    align-items:start;
}

.about-intro__heading h2{

    max-width:480px;
}

.about-intro__content p{

    color:#5f5f5f;

    line-height:1.95;

    margin-bottom:28px;
}

.about-intro__content p:last-child{

    margin-bottom:0;
}


/* =========================================================
   PHILOSOPHIE
========================================================= */

.about-philosophy{

    background:#0c0c0c;
    color:#fff;
}

.about-philosophy__grid{

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(340px,.95fr);

    gap:90px;

    align-items:center;
}

.about-philosophy__image{

    position:relative;
}

.about-philosophy__image img{

    width:100%;
    display:block;

    border:1px solid rgba(201,164,92,.18);
}

.about-philosophy__image-number{

    position:absolute;

    left:-35px;
    bottom:-35px;

    width:90px;
    height:90px;

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

    background:var(--gold);
    color:#111;

    font-family:var(--font-heading);

    font-size:2rem;
}

.about-philosophy__content h2{

    margin-bottom:28px;
}

.about-philosophy__content p{

    margin-bottom:24px;

    color:rgba(255,255,255,.72);

    line-height:1.9;
}

.about-philosophy__content p:last-of-type{

    margin-bottom:34px;
}

.text-link{

    display:inline-flex;
    align-items:center;

    color:var(--gold);

    text-decoration:none;

    font-weight:500;

    border-bottom:1px solid var(--gold);

    padding-bottom:5px;

    transition:.25s;
}

.text-link:hover{

    color:#fff;

    border-color:#fff;
}


/* =========================================================
   WERTE
========================================================= */

.about-values{

    background:#ffffff;
}

.about-values__grid{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:32px;

    margin-top:70px;
}

.about-value-card{

    position:relative;

    padding:44px;

    border:1px solid rgba(0,0,0,.08);

    background:#fff;

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;
}

.about-value-card:hover{

    transform:translateY(-8px);

    border-color:rgba(201,164,92,.45);

    box-shadow:0 18px 55px rgba(0,0,0,.08);
}

.about-value-card__number{

    display:block;

    margin-bottom:34px;

    color:var(--gold);

    font-family:var(--font-heading);

    font-size:2rem;
}

.about-value-card h3{

    margin-bottom:16px;
}

.about-value-card p{

    color:#666;

    line-height:1.85;
}


/* =========================================================
   SERVICEVERSPRECHEN
========================================================= */

.service-promise{

    background:#f6f3ed;
}

.service-promise__grid{

    display:grid;

    grid-template-columns:
        minmax(340px,.95fr)
        minmax(0,1.05fr);

    gap:90px;

    align-items:center;
}

.service-promise__content h2{

    margin-bottom:28px;
}

.service-promise__content>p{

    color:#666;

    line-height:1.9;

    margin-bottom:34px;
}

.service-promise__list{

    list-style:none;

    padding:0;
    margin:0;
}

.service-promise__list li{

    position:relative;

    padding-left:34px;

    margin-bottom:18px;

    color:#444;

    line-height:1.8;
}

.service-promise__list li::before{

    content:"";

    position:absolute;

    left:0;
    top:11px;

    width:12px;
    height:12px;

    border-radius:50%;

    background:var(--gold);
}

.service-promise__image{

    position:relative;
}

.service-promise__image img{

    width:100%;
    display:block;
}

.service-promise__badge{

    position:absolute;

    right:-25px;
    bottom:-25px;

    max-width:270px;

    padding:28px;

    background:#111;

    border:1px solid rgba(201,164,92,.35);

    color:#fff;
}

.service-promise__badge span{

    display:block;

    margin-bottom:10px;

    color:var(--gold);

    font-size:.75rem;

    letter-spacing:.15em;

    text-transform:uppercase;
}

.service-promise__badge strong{

    font-family:var(--font-heading);

    font-size:1.55rem;

    font-weight:500;

    line-height:1.3;
}
/* =========================================================
   ZAHLEN & QUALITÄT
========================================================= */

.about-facts{
    background:#0b0b0b;
    color:#fff;
}

.about-facts__grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:30px;
}

.about-fact{

    padding:40px 28px;

    text-align:center;

    border:1px solid rgba(201,164,92,.20);

    background:rgba(255,255,255,.02);

    transition:
        transform .3s ease,
        border-color .3s ease;
}

.about-fact:hover{

    transform:translateY(-6px);

    border-color:rgba(201,164,92,.45);
}

.about-fact strong{

    display:block;

    margin-bottom:16px;

    color:var(--gold);

    font-family:var(--font-heading);

    font-size:3rem;

    font-weight:600;
}

.about-fact span{

    color:rgba(255,255,255,.72);

    line-height:1.7;
}


/* =========================================================
   FAHRZEUGE
========================================================= */

.about-fleet{

    background:#ffffff;
}

.about-fleet__grid{

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(340px,.9fr);

    gap:90px;

    align-items:center;
}

.about-fleet__image img{

    width:100%;

    display:block;

    border:1px solid rgba(0,0,0,.08);
}

.about-fleet__content h2{

    margin-bottom:28px;
}

.about-fleet__content p{

    margin-bottom:34px;

    color:#666;

    line-height:1.9;
}


/* =========================================================
   CTA
========================================================= */

.about-cta{

    background:#f6f3ed;
}

.about-cta__inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;
}

.about-cta__inner>div{

    max-width:760px;
}

.about-cta__inner h2{

    margin-bottom:20px;
}

.about-cta__inner p:not(.eyebrow){

    color:#666;

    line-height:1.8;
}

.about-cta__inner .button{

    flex-shrink:0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px){

    .about-intro__grid,
    .about-philosophy__grid,
    .service-promise__grid,
    .about-fleet__grid{

        gap:60px;
    }

}


/* =========================================================
   KLEINE TABLETS
========================================================= */

@media (max-width:960px){

    .about-hero{

        min-height:700px;
    }

    .about-hero__content{

        padding-top:130px;
        padding-bottom:90px;
    }

    .about-intro__grid,
    .about-philosophy__grid,
    .service-promise__grid,
    .about-fleet__grid{

        grid-template-columns:1fr;

        gap:55px;
    }

    .about-values__grid{

        grid-template-columns:1fr;
    }

    .about-facts__grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .about-philosophy__image-number{

        left:25px;
        bottom:25px;
    }

    .service-promise__badge{

        right:25px;
        bottom:25px;
    }

    .about-cta__inner{

        flex-direction:column;

        align-items:flex-start;
    }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width:720px){

    .about-hero{

        min-height:680px;
    }

    .about-hero__content{

        padding-top:115px;
        padding-bottom:70px;
    }

    .about-hero__actions{

        flex-direction:column;

        align-items:stretch;

        max-width:340px;
    }

    .about-hero__actions .button{

        justify-content:center;
    }

    .about-value-card{

        padding:34px 28px;
    }

    .service-promise__badge{

        position:relative;

        right:auto;
        bottom:auto;

        margin-top:24px;

        max-width:100%;
    }

}


/* =========================================================
   KLEINE SMARTPHONES
========================================================= */

@media (max-width:560px){

    .about-facts__grid{

        grid-template-columns:1fr;
    }

    .about-fact{

        padding:34px 22px;
    }

    .about-value-card{

        padding:30px 24px;
    }

    .about-philosophy__image-number{

        width:72px;
        height:72px;

        font-size:1.5rem;
    }

}


/* =========================================================
   REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion:reduce){

    .about-value-card,
    .about-fact{

        transition:none;
    }

    .about-value-card:hover,
    .about-fact:hover{

        transform:none;
    }

}