/* =========================================================
   ONEWAY REAL TRAILERS V5

   Wichtig:
   Die Anhängerbilder werden NICHT verändert.
   Nur Darstellung / Position / Größe per CSS.
   ========================================================= */


/* ---------------------------------------------------------
   HERO BREITER FÜR:
   TEXT | ANHÄNGER | BUCHUNG
   --------------------------------------------------------- */

.hero .container{
    max-width:1280px;
}


.hero .hero-grid{
    display:grid !important;

    grid-template-columns:
        minmax(300px,.82fr)
        minmax(330px,.92fr)
        minmax(430px,1.12fr) !important;

    gap:34px !important;

    align-items:center !important;
}


/* ---------------------------------------------------------
   ECHTER ANHÄNGER IM HERO
   --------------------------------------------------------- */

.hero-trailer-visual{
    position:relative;

    min-width:0;

    height:430px;

    display:flex;

    align-items:center;

    justify-content:center;

    isolation:isolate;
}


.hero-trailer-visual::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:60px;
    bottom:40px;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(229,241,252,.92) 0%,
            rgba(241,247,252,.66) 48%,
            rgba(255,255,255,0) 73%
        );

    z-index:-2;
}


.hero-trailer-photo{
    position:relative;

    z-index:2;

    width:100%;

    height:315px;

    display:flex;

    align-items:center;

    justify-content:center;
}


.hero-trailer-photo img{
    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    /*
     * KEIN Filter.
     * KEINE Farbänderung.
     * KEIN künstlicher Umbau.
     */

    filter:none !important;

    transform:none !important;
}


.hero-route-line{
    position:absolute;

    z-index:1;

    left:13%;
    right:13%;

    top:80px;

    height:80px;

    border-top:
        2px dashed
        rgba(14,113,207,.38);

    border-radius:50%;
}


.hero-route-point{
    position:absolute;

    z-index:5;

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 10px;

    border:1px solid #d8e5f0;

    border-radius:11px;

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

    box-shadow:
        0 8px 22px
        rgba(24,56,83,.10);
}


.hero-route-point b{
    display:flex;

    align-items:center;

    justify-content:center;

    width:25px;
    height:25px;

    flex:0 0 25px;

    border-radius:50%;

    background:#0875d7;

    color:#fff;

    font-size:10px;
}


.hero-route-point strong,
.hero-route-point small{
    display:block;
}


.hero-route-point strong{
    color:#163149;

    font-size:10px;
}


.hero-route-point small{
    margin-top:1px;

    color:#77899a;

    font-size:8px;
}


.hero-route-start{
    left:0;

    top:39px;
}


.hero-route-end{
    right:0;

    top:39px;
}


.hero-trailer-caption{
    position:absolute;

    z-index:5;

    right:10px;

    bottom:18px;

    transform:rotate(-4deg);

    color:#123f68;
}


.hero-trailer-caption strong,
.hero-trailer-caption span{
    display:block;
}


.hero-trailer-caption strong{
    font-size:17px;

    line-height:1.05;
}


.hero-trailer-caption span{
    margin-top:2px;

    color:#0873d0;

    font-size:11px;

    font-weight:800;
}


/* ---------------------------------------------------------
   BOOKING-KARTE
   --------------------------------------------------------- */

.hero .ow2-booking{
    min-width:0;

    align-self:center !important;
}


.hero .ow2-search-card{
    box-shadow:
        0 22px 58px
        rgba(16,45,70,.14) !important;
}


/* =========================================================
   ECHTE ANHÄNGERKARTEN
   ========================================================= */

.real-trailer-showcase{
    padding-top:76px !important;

    padding-bottom:80px !important;

    background:#f4f8fc;
}


.real-trailer-heading{
    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:28px;
}


.real-trailer-heading h2{
    margin:
        5px
        0
        9px;

    color:#132b42;

    font-size:36px;

    line-height:1.08;

    letter-spacing:-.035em;
}


.real-trailer-heading p{
    max-width:700px;

    margin:0;

    color:#667b8f;

    line-height:1.55;
}


.real-trailer-all{
    flex:none;

    margin-bottom:5px;

    color:#0871ce;

    text-decoration:none;

    font-size:12px;

    font-weight:850;
}


.real-trailer-grid{
    display:grid;

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

    gap:16px;
}


.real-trailer-card{
    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    min-width:0;

    border:
        1px solid
        #d7e2ec;

    border-radius:17px;

    background:#fff;

    box-shadow:
        0 12px 32px
        rgba(24,51,74,.07);

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


.real-trailer-card:hover{
    transform:
        translateY(-3px);

    border-color:
        #a9ceeF;

    box-shadow:
        0 18px 42px
        rgba(24,51,74,.12);
}


.real-trailer-card.featured{
    border-color:#4a9de7;

    box-shadow:
        0 16px 38px
        rgba(8,112,205,.10);
}


.real-trailer-card-head{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    padding:
        15px
        17px
        10px;
}


.real-trailer-card-head > strong{
    color:#10283f;

    font-size:19px;

    font-weight:950;
}


.real-trailer-tag{
    display:inline-flex;

    align-items:center;

    min-height:23px;

    padding:
        0
        9px;

    border-radius:999px;

    background:#ebf5ff;

    color:#0870c9;

    font-size:9px;

    font-weight:900;
}


.real-trailer-image{
    width:100%;

    height:235px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding:8px 12px 4px;

    background:
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #eef4f8 100%
        );
}


.real-trailer-image img{
    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    /*
     * ORIGINALBILDER:
     * kein Filter
     * keine Perspektivänderung
     * kein KI-Umbau
     */

    filter:none !important;

    transform:none !important;
}


.real-trailer-content{
    display:flex;

    flex:1;

    flex-direction:column;

    padding:
        17px
        18px
        18px;
}


.real-trailer-content h3{
    margin:
        0
        0
        6px;

    color:#132b42;

    font-size:16px;
}


.real-trailer-content p{
    min-height:43px;

    margin:
        0
        0
        14px;

    color:#64798c;

    font-size:11px;

    line-height:1.48;
}


.real-trailer-content ul{
    display:grid;

    gap:6px;

    margin:
        0
        0
        17px;

    padding:0;

    list-style:none;
}


.real-trailer-content li{
    position:relative;

    padding-left:18px;

    color:#556b7f;

    font-size:10px;
}


.real-trailer-content li::before{
    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:#258956;

    font-weight:950;
}


.real-trailer-content a{
    margin-top:auto;

    padding-top:13px;

    border-top:
        1px solid
        #e7edf2;

    color:#0871ce;

    text-decoration:none;

    font-size:10px;

    font-weight:900;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media(max-width:1120px){

    .hero .hero-grid{
        grid-template-columns:
            minmax(0,1fr)
            minmax(420px,1fr)
            !important;
    }


    .hero-copy{
        grid-column:1;
        grid-row:1;
    }


    .hero .ow2-booking{
        grid-column:2;
        grid-row:1;
    }


    .hero-trailer-visual{
        grid-column:1 / -1;
        grid-row:2;

        width:min(620px,100%);

        height:360px;

        margin:
            -15px
            auto
            0;
    }


    .hero-trailer-photo{
        height:285px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:800px){

    .hero .hero-grid{
        grid-template-columns:
            1fr
            !important;

        gap:22px !important;
    }


    .hero-copy,
    .hero-trailer-visual,
    .hero .ow2-booking{
        grid-column:1;
        grid-row:auto;
    }


    .hero-trailer-visual{
        height:315px;

        margin:0 auto;
    }


    .hero-trailer-photo{
        height:245px;
    }


    .hero-route-start{
        left:4px;
    }


    .hero-route-end{
        right:4px;
    }


    .real-trailer-heading{
        display:block;
    }


    .real-trailer-all{
        display:inline-block;

        margin-top:13px;
    }


    .real-trailer-grid{
        grid-template-columns:1fr;
    }


    .real-trailer-image{
        height:260px;
    }

}


/* =========================================================
   ENDE ONEWAY REAL TRAILERS V5
   ========================================================= */


/* =========================================================
   ONEWAY_TRAILER_VISUAL_POLISH_V6

   Keine Bildbearbeitung:
   Die vorhandenen Dateien werden unverändert dargestellt.
   ========================================================= */


/* ---------------------------------------------------------
   HERO:
   Anhänger zum visuellen Mittelpunkt machen
   --------------------------------------------------------- */

.hero .container{
    max-width:1360px !important;
}


.hero .hero-grid{
    grid-template-columns:
        minmax(290px,.78fr)
        minmax(390px,1.08fr)
        minmax(430px,1.10fr) !important;

    gap:30px !important;

    align-items:center !important;
}


.hero-trailer-visual{
    height:455px !important;

    margin-left:-10px;
    margin-right:-10px;
}


.hero-trailer-visual::before{
    left:-35px !important;
    right:-35px !important;
    top:48px !important;
    bottom:32px !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(218,235,250,.95) 0%,
            rgba(236,245,252,.78) 50%,
            rgba(255,255,255,0) 76%
        ) !important;
}


.hero-trailer-photo{
    width:115% !important;

    height:345px !important;

    margin-left:-7.5%;

    margin-top:28px;
}


.hero-trailer-photo img{
    width:100% !important;
    height:100% !important;

    object-fit:contain !important;

    object-position:center !important;

    filter:none !important;

    transform:none !important;
}


/* ---------------------------------------------------------
   KLEINES VERTRAUENS-BADGE AM ANHÄNGER
   --------------------------------------------------------- */

.hero-fleet-badge{
    position:absolute;

    z-index:7;

    left:50%;

    top:100px;

    transform:
        translateX(-50%);

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:
        8px
        12px;

    border:
        1px solid
        rgba(201,220,236,.95);

    border-radius:999px;

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

    box-shadow:
        0 9px 24px
        rgba(28,59,84,.10);

    color:#29465f;

    font-size:9px;

    font-weight:850;

    white-space:nowrap;
}


.hero-fleet-badge span{
    display:flex;

    align-items:center;

    justify-content:center;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#e5f6ec;

    color:#218551;

    font-size:10px;

    font-weight:950;
}


/* ---------------------------------------------------------
   ROUTENPUNKTE etwas klarer
   --------------------------------------------------------- */

.hero-route-line{
    top:69px !important;
}


.hero-route-start,
.hero-route-end{
    top:28px !important;
}


.hero-route-point{
    padding:
        9px
        11px !important;
}


/* ---------------------------------------------------------
   CAPTION
   --------------------------------------------------------- */

.hero-trailer-caption{
    right:18px !important;

    bottom:14px !important;
}


.hero-trailer-caption strong{
    font-size:19px !important;
}


.hero-trailer-caption span{
    font-size:11px !important;
}


/* =========================================================
   ANHÄNGER-FOTOKARTEN
   ========================================================= */

.real-trailer-image{
    height:255px !important;

    padding:
        10px
        12px
        5px !important;
}


.real-trailer-image img{
    max-width:100%;

    object-fit:contain !important;

    filter:none !important;

    transform:none !important;
}


.real-trailer-card-head{
    padding-top:16px !important;
}


.real-trailer-content h3{
    font-size:17px !important;
}


/* kleine Foto-Kennung */

.real-trailer-image::after{
    content:"Anhängerbild";

    position:absolute;

    right:13px;

    bottom:10px;

    padding:
        4px
        7px;

    border-radius:999px;

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

    color:#657c90;

    font-size:7px;

    font-weight:850;

    letter-spacing:.03em;
}


.real-trailer-image{
    position:relative;
}


/* =========================================================
   DUNKLER ONE-WAY-BEREICH:
   Anhänger auch hier sichtbar
   ========================================================= */

.section-dark{
    position:relative;

    overflow:hidden;
}


.section-dark > .container{
    position:relative;

    z-index:3;
}


.section-dark-trailer-v6{
    position:absolute;

    z-index:1;

    right:2.5%;

    bottom:-78px;

    width:360px;

    height:310px;

    opacity:.92;

    pointer-events:none;
}


.section-dark-trailer-v6::before{
    content:"";

    position:absolute;

    z-index:-1;

    inset:40px -30px 10px -30px;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(48,113,166,.36),
            rgba(8,36,57,0) 70%
        );
}


.section-dark-trailer-v6 img{
    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    filter:none !important;

    transform:none !important;
}


/*
 * Rechts Platz für den Anhänger lassen.
 */

.section-dark .section-dark-grid{
    padding-right:285px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1180px){

    .hero .hero-grid{
        grid-template-columns:
            minmax(280px,.85fr)
            minmax(340px,1fr)
            minmax(400px,1.05fr)
            !important;

        gap:22px !important;
    }


    .hero-trailer-visual{
        height:420px !important;
    }


    .hero-trailer-photo{
        height:320px !important;
    }

}


@media(max-width:1050px){

    .hero .hero-grid{
        grid-template-columns:
            minmax(0,1fr)
            minmax(420px,1fr)
            !important;
    }


    .hero-copy{
        grid-column:1;
        grid-row:1;
    }


    .hero .ow2-booking{
        grid-column:2;
        grid-row:1;
    }


    .hero-trailer-visual{
        grid-column:1 / -1;
        grid-row:2;

        width:min(720px,100%);

        height:390px !important;

        margin:
            -20px
            auto
            0;
    }


    .hero-trailer-photo{
        width:100% !important;

        height:315px !important;

        margin:
            15px
            0
            0;
    }


    .section-dark .section-dark-grid{
        padding-right:220px;
    }


    .section-dark-trailer-v6{
        right:-15px;

        width:300px;

        opacity:.78;
    }

}


@media(max-width:800px){

    .hero .hero-grid{
        grid-template-columns:
            1fr
            !important;
    }


    .hero-copy,
    .hero-trailer-visual,
    .hero .ow2-booking{
        grid-column:1;
        grid-row:auto;
    }


    .hero-trailer-visual{
        height:330px !important;

        margin:0 auto;
    }


    .hero-trailer-photo{
        height:250px !important;

        margin-top:25px;
    }


    .hero-fleet-badge{
        top:82px;
    }


    .hero-route-start,
    .hero-route-end{
        top:15px !important;
    }


    .section-dark .section-dark-grid{
        padding-right:0;
    }


    .section-dark-trailer-v6{
        display:none;
    }


    .real-trailer-image{
        height:280px !important;
    }

}


/* =========================================================
   ENDE ONEWAY_TRAILER_VISUAL_POLISH_V6
   ========================================================= */



/* =========================================================
   ONEWAY_HERO_REAL_TRAILER_V7

   Ziel:
   - links Text + echter Anhänger als EINE Hero-Fläche
   - rechts nur Buchungsmaske
   - Originalbilder bleiben unverändert
   ========================================================= */


/* ---------------------------------------------------------
   HERO: AUS 3 SPALTEN WERDEN 2
   --------------------------------------------------------- */

.hero{
    overflow:hidden;
}


.hero .container{
    max-width:1320px !important;
}


.hero .hero-grid{
    position:relative;

    display:grid !important;

    grid-template-columns:
        minmax(0,1.48fr)
        minmax(430px,.82fr)
        !important;

    column-gap:48px !important;

    align-items:center !important;
}


/* ---------------------------------------------------------
   LINKER TEXT
   --------------------------------------------------------- */

.hero-copy{
    position:relative;

    z-index:5;

    grid-column:1 !important;
    grid-row:1 !important;

    width:46%;

    min-width:330px;

    padding-top:18px !important;
    padding-bottom:22px !important;
}


.hero-copy h1{
    position:relative;

    z-index:5;

    max-width:420px !important;
}


.hero-copy .hero-lead{
    position:relative;

    z-index:5;

    max-width:390px !important;
}


.hero-benefits,
.hero-actions,
.hero-request-note{
    position:relative;
    z-index:5;
}


/* ---------------------------------------------------------
   ECHTER ANHÄNGER:
   SITZT RECHTS INNERHALB DER LINKEN HERO-HÄLFTE
   --------------------------------------------------------- */

.hero-trailer-visual{
    position:relative !important;

    z-index:2;

    grid-column:1 !important;
    grid-row:1 !important;

    justify-self:end;

    align-self:center;

    width:57% !important;

    height:auto !important;

    min-height:410px;

    margin:
        28px
        -12px
        0
        0 !important;
}


.hero-trailer-visual::before{
    content:"";

    position:absolute;

    z-index:-1;

    left:-35px !important;
    right:-35px !important;

    top:80px !important;
    bottom:28px !important;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(214,232,247,.78) 0%,
            rgba(232,242,250,.52) 54%,
            rgba(255,255,255,0) 76%
        ) !important;
}


/*
 * Das ORIGINALFOTO bekommt nur eine saubere
 * Präsentationsfläche.
 */

.hero-trailer-photo{
    position:absolute !important;

    z-index:2;

    left:0;
    right:0;

    top:105px;

    width:100% !important;

    height:auto !important;

    margin:0 !important;

    overflow:hidden;

    border:
        1px solid
        rgba(204,220,233,.88);

    border-radius:16px;

    background:#eef4f8;

    box-shadow:
        0 19px 48px
        rgba(24,50,72,.13);
}


.hero-trailer-photo img{
    display:block !important;

    width:100% !important;

    height:auto !important;

    max-height:none !important;

    object-fit:initial !important;

    object-position:initial !important;

    filter:none !important;

    transform:none !important;
}


/* ---------------------------------------------------------
   ROUTE ÜBER DEM ANHÄNGER
   --------------------------------------------------------- */

.hero-route-line{
    z-index:3 !important;

    left:16% !important;
    right:16% !important;

    top:67px !important;

    height:45px !important;
}


.hero-route-start,
.hero-route-end{
    z-index:6 !important;

    top:32px !important;
}


.hero-route-start{
    left:2px !important;
}


.hero-route-end{
    right:2px !important;
}


.hero-route-point{
    padding:
        8px
        10px !important;

    border-radius:10px !important;
}


.hero-fleet-badge{
    z-index:7 !important;

    top:91px !important;

    left:50% !important;
}


.hero-trailer-caption{
    z-index:7 !important;

    right:4px !important;

    bottom:5px !important;

    padding:
        7px
        9px;

    border-radius:9px;

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

    transform:none !important;
}


.hero-trailer-caption strong{
    font-size:12px !important;
}


.hero-trailer-caption span{
    font-size:8px !important;
}


/* ---------------------------------------------------------
   BUCHUNG:
   KLAR RECHTS, NICHT ZU KLEIN
   --------------------------------------------------------- */

.hero .ow2-booking{
    position:relative;

    z-index:10;

    grid-column:2 !important;
    grid-row:1 !important;

    width:100% !important;

    max-width:480px;

    justify-self:end;

    align-self:center !important;
}


.hero .ow2-search-card,
.hero .ow2-results,
.hero .ow2-contact,
.hero .ow2-done{
    box-shadow:
        0 22px 58px
        rgba(19,48,72,.15)
        !important;
}


/* ---------------------------------------------------------
   TRUST-LEISTE
   --------------------------------------------------------- */

.trust-strip{
    position:relative;

    z-index:20;
}


/* =========================================================
   DREI ANHÄNGERKARTEN:
   FOTO IST JETZT DAS HAUPTELEMENT
   ========================================================= */

.real-trailer-showcase{
    padding-top:72px !important;
    padding-bottom:78px !important;
}


.real-trailer-grid{
    gap:18px !important;
}


.real-trailer-card{
    border-radius:16px !important;
}


.real-trailer-image{
    position:relative;

    height:270px !important;

    padding:0 !important;

    overflow:hidden;

    border-top:
        1px solid
        #e3eaf0;

    border-bottom:
        1px solid
        #e3eaf0;

    background:#edf3f7 !important;
}


/*
 * Normale Web-Darstellung eines Originalfotos.
 * Keine Filter / keine KI-Veränderung.
 *
 * cover darf lediglich den Bildausschnitt an die
 * Kartenform anpassen.
 */

.real-trailer-image img{
    display:block;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    object-position:center center;

    filter:none !important;

    transform:none !important;
}


/*
 * Der gelb-blaue VT75 soll vollständig sichtbar bleiben,
 * weil dieses Foto bereits quer aufgenommen ist.
 */

.real-trailer-card:first-child
.real-trailer-image img{
    object-fit:cover !important;
    object-position:center 58%;
}


/*
 * Bei den beiden Hochformat-Fotos etwas mehr
 * unteren Fahrzeugbereich im Ausschnitt zeigen.
 */

.real-trailer-card:nth-child(2)
.real-trailer-image img,
.real-trailer-card:nth-child(3)
.real-trailer-image img{
    object-position:center 67%;
}


.real-trailer-image::after{
    display:none !important;
}


.real-trailer-card-head{
    padding:
        15px
        17px
        12px !important;
}


.real-trailer-content{
    padding:
        17px
        18px
        19px !important;
}


.real-trailer-content h3{
    font-size:17px !important;
}


/* =========================================================
   DUNKLER BALKEN:
   DAS KLEINE HOCHKANT-FOTO WAR OPTISCH FALSCH.
   ANHÄNGER SIND BEREITS HERO + KARTEN KLAR SICHTBAR.
   ========================================================= */

.section-dark-trailer-v6{
    display:none !important;
}


.section-dark .section-dark-grid{
    padding-right:0 !important;
}


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

@media(max-width:1100px){

    .hero .hero-grid{
        grid-template-columns:
            minmax(0,1fr)
            minmax(390px,.86fr)
            !important;

        gap:30px !important;
    }


    .hero-copy{
        width:48%;
        min-width:285px;
    }


    .hero-trailer-visual{
        width:54% !important;

        min-height:360px;

        margin-right:0 !important;
    }


    .hero-trailer-photo{
        top:100px;
    }

}


/* =========================================================
   MOBILE / KLEINES TABLET:
   DANN WIEDER SAUBER UNTEREINANDER
   ========================================================= */

@media(max-width:850px){

    .hero .hero-grid{
        grid-template-columns:
            1fr
            !important;

        row-gap:20px !important;
    }


    .hero-copy{
        grid-column:1 !important;
        grid-row:auto !important;

        width:100%;

        min-width:0;
    }


    .hero-trailer-visual{
        grid-column:1 !important;
        grid-row:auto !important;

        width:min(600px,100%) !important;

        min-height:380px;

        margin:
            0
            auto !important;
    }


    .hero .ow2-booking{
        grid-column:1 !important;
        grid-row:auto !important;

        width:100% !important;

        max-width:620px;

        justify-self:center;
    }


    .hero-trailer-photo{
        top:100px;
    }


    .real-trailer-grid{
        grid-template-columns:1fr !important;
    }


    .real-trailer-image{
        height:330px !important;
    }

}


@media(max-width:560px){

    .hero-trailer-visual{
        min-height:310px;
    }


    .hero-trailer-photo{
        top:88px;
    }


    .hero-route-start,
    .hero-route-end{
        top:19px !important;
    }


    .hero-fleet-badge{
        top:76px !important;
    }


    .hero-route-point small{
        display:none;
    }


    .real-trailer-image{
        height:260px !important;
    }

}


/* =========================================================
   ENDE ONEWAY_HERO_REAL_TRAILER_V7
   ========================================================= */



/* =========================================================
   ONEWAY_HERO_PROPORTIONS_V8

   Desktop:
   TEXT | ECHTER ANHÄNGER | BUCHUNG

   Die Originalbilder selbst werden NICHT bearbeitet.
   ========================================================= */


/* ---------------------------------------------------------
   HERO GROSSZÜGIGER
   --------------------------------------------------------- */

.hero{
    padding-top:54px !important;
    padding-bottom:44px !important;
}


.hero .container{
    max-width:1480px !important;
    padding-left:34px;
    padding-right:34px;
}


.hero .hero-grid{
    display:grid !important;

    grid-template-columns:
        minmax(325px,.75fr)
        minmax(470px,1.10fr)
        minmax(455px,.92fr)
        !important;

    gap:28px !important;

    align-items:center !important;
}


/* ---------------------------------------------------------
   1. TEXT LINKS
   --------------------------------------------------------- */

.hero-copy{
    grid-column:1 !important;
    grid-row:1 !important;

    width:100% !important;
    min-width:0 !important;

    padding:
        10px
        0
        18px
        !important;
}


.hero-copy .eyebrow{
    margin-bottom:15px !important;
}


.hero-copy h1{
    max-width:390px !important;

    margin-bottom:18px !important;

    font-size:
        clamp(
            48px,
            4.1vw,
            67px
        ) !important;

    line-height:.94 !important;

    letter-spacing:-.048em !important;
}


.hero-copy .hero-lead{
    max-width:390px !important;

    font-size:14px !important;

    line-height:1.58 !important;
}


.hero-benefits{
    margin-top:20px !important;
}


.hero-actions{
    margin-top:22px !important;
}


.hero-request-note{
    max-width:390px !important;
}


/* ---------------------------------------------------------
   2. ANHÄNGER MITTIG
   --------------------------------------------------------- */

.hero-trailer-visual{
    position:relative !important;

    grid-column:2 !important;
    grid-row:1 !important;

    width:100% !important;

    min-height:475px !important;

    margin:0 !important;

    justify-self:stretch !important;
    align-self:center !important;
}


.hero-trailer-visual::before{
    left:-55px !important;
    right:-55px !important;

    top:75px !important;
    bottom:20px !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(213,232,248,.90) 0%,
            rgba(234,244,252,.65) 53%,
            rgba(255,255,255,0) 77%
        )
        !important;
}


/*
 * Originalfoto groß zeigen.
 * Kein Filter, kein künstliches Verformen.
 */

.hero-trailer-photo{
    position:absolute !important;

    left:0 !important;
    right:0 !important;

    top:112px !important;

    width:100% !important;

    height:315px !important;

    margin:0 !important;

    overflow:hidden;

    border-radius:18px !important;

    border:
        1px solid
        #cfdeea !important;

    background:#edf3f7 !important;

    box-shadow:
        0 24px 58px
        rgba(20,48,72,.15)
        !important;
}


.hero-trailer-photo img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    object-position:center 58% !important;

    filter:none !important;

    transform:none !important;
}


/* ---------------------------------------------------------
   ROUTE ÜBER DEM ANHÄNGER
   --------------------------------------------------------- */

.hero-route-line{
    left:13% !important;
    right:13% !important;

    top:70px !important;
}


.hero-route-start,
.hero-route-end{
    top:31px !important;
}


.hero-route-start{
    left:0 !important;
}


.hero-route-end{
    right:0 !important;
}


.hero-route-point{
    box-shadow:
        0 9px 25px
        rgba(22,52,77,.13)
        !important;
}


/*
 * Das zusätzliche Badge war oben etwas zu voll.
 */

.hero-fleet-badge{
    top:99px !important;

    padding:
        7px
        11px
        !important;
}


.hero-trailer-caption{
    right:11px !important;
    bottom:5px !important;

    padding:
        8px
        10px
        !important;

    background:
        rgba(255,255,255,.94)
        !important;

    box-shadow:
        0 6px 16px
        rgba(25,50,72,.08);
}


/* ---------------------------------------------------------
   3. BUCHUNG RECHTS
   --------------------------------------------------------- */

.hero .ow2-booking{
    grid-column:3 !important;
    grid-row:1 !important;

    width:100% !important;
    max-width:500px !important;

    justify-self:end !important;

    align-self:center !important;
}


.hero .ow2-search-card,
.hero .ow2-results,
.hero .ow2-contact,
.hero .ow2-done{
    border-radius:18px !important;

    box-shadow:
        0 25px 60px
        rgba(18,47,71,.15)
        !important;
}


.hero .ow2-search-card{
    padding:
        28px
        28px
        25px
        !important;
}


/* ---------------------------------------------------------
   TRUST DIREKT DARUNTER
   --------------------------------------------------------- */

.trust-strip{
    margin-top:0 !important;
}


/* =========================================================
   ANHÄNGER-KARTEN:
   MEHR FAHRZEUG, WENIGER KLEINE KARTE
   ========================================================= */

.real-trailer-showcase .container{
    max-width:1240px;
}


.real-trailer-heading{
    margin-bottom:30px !important;
}


.real-trailer-heading h2{
    font-size:38px !important;
}


.real-trailer-grid{
    gap:20px !important;
}


.real-trailer-image{
    height:300px !important;
}


.real-trailer-content{
    padding:
        18px
        19px
        20px
        !important;
}


.real-trailer-content h3{
    font-size:18px !important;
}


.real-trailer-content p{
    font-size:11px !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media(max-width:1200px){

    .hero .container{
        max-width:1080px !important;
    }


    .hero .hero-grid{
        grid-template-columns:
            minmax(0,1fr)
            minmax(410px,.92fr)
            !important;

        gap:38px !important;
    }


    .hero-copy{
        grid-column:1 !important;
        grid-row:1 !important;

        width:100% !important;
    }


    .hero .ow2-booking{
        grid-column:2 !important;
        grid-row:1 !important;
    }


    .hero-trailer-visual{
        grid-column:1 / -1 !important;
        grid-row:2 !important;

        width:min(720px,100%) !important;

        min-height:420px !important;

        margin:
            -15px
            auto
            0
            !important;
    }


    .hero-trailer-photo{
        height:320px !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:820px){

    .hero .container{
        padding-left:18px;
        padding-right:18px;
    }


    .hero .hero-grid{
        grid-template-columns:
            1fr
            !important;

        gap:21px !important;
    }


    .hero-copy,
    .hero-trailer-visual,
    .hero .ow2-booking{
        grid-column:1 !important;
        grid-row:auto !important;
    }


    .hero-copy h1{
        max-width:520px !important;

        font-size:
            clamp(
                46px,
                12vw,
                64px
            ) !important;
    }


    .hero-trailer-visual{
        width:100% !important;

        min-height:355px !important;

        margin:0 !important;
    }


    .hero-trailer-photo{
        top:95px !important;

        height:265px !important;
    }


    .hero .ow2-booking{
        max-width:620px !important;

        justify-self:center !important;
    }


    .real-trailer-image{
        height:320px !important;
    }

}


@media(max-width:560px){

    .hero-trailer-visual{
        min-height:305px !important;
    }


    .hero-trailer-photo{
        top:82px !important;

        height:225px !important;
    }


    .hero-route-start,
    .hero-route-end{
        top:13px !important;
    }


    .hero-route-point{
        padding:
            7px
            8px
            !important;
    }


    .hero-route-point small{
        display:none;
    }


    .hero-fleet-badge{
        top:70px !important;
    }


    .real-trailer-image{
        height:270px !important;
    }

}


/* =========================================================
   ENDE ONEWAY_HERO_PROPORTIONS_V8
   ========================================================= */



/* =========================================================
   ONEWAY_HEADER_HERO_FINAL_V9
   ========================================================= */


/* =========================================================
   HEADER
   Auf Desktop normal im Seitenfluss.
   Dadurch ist er immer klar sichtbar und gehört optisch
   zum Hero.
   ========================================================= */

.topbar{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:relative !important;
    top:auto !important;

    width:100%;

    background:
        rgba(255,255,255,.98)
        !important;

    border-bottom:
        1px solid
        #e4ebf1
        !important;

    box-shadow:
        0 1px 0
        rgba(20,48,72,.025);

    backdrop-filter:none !important;
}


.topbar .container{
    width:min(
        1320px,
        calc(100% - 48px)
    ) !important;
}


.topbar-inner{
    display:flex !important;

    align-items:center !important;

    min-height:74px !important;

    gap:32px !important;
}


/* ---------------------------------------------------------
   Logo
   --------------------------------------------------------- */

.topbar .brand{
    flex:none;

    font-size:25px !important;

    line-height:1;

    letter-spacing:-.045em !important;
}


.topbar .brand-one{
    color:#102941 !important;
}


.topbar .brand-trailer{
    color:#0871d5 !important;
}


/* ---------------------------------------------------------
   Navigation
   --------------------------------------------------------- */

.topbar .desktop-nav{
    display:flex !important;

    align-items:center !important;

    justify-content:center;

    gap:30px !important;

    margin:
        0
        0
        0
        auto
        !important;
}


.topbar .desktop-nav a{
    position:relative;

    padding:
        27px
        0
        25px;

    color:#435a70 !important;

    font-size:13px !important;

    font-weight:800 !important;

    line-height:1;

    text-decoration:none;
}


.topbar .desktop-nav a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:17px;

    width:0;
    height:2px;

    border-radius:99px;

    background:#0873d5;

    transform:
        translateX(-50%);

    transition:
        width .16s ease;
}


.topbar .desktop-nav a:hover{
    color:#0873d5 !important;
}


.topbar .desktop-nav a:hover::after{
    width:100%;
}


/* ---------------------------------------------------------
   CTA rechts
   --------------------------------------------------------- */

.topbar .topbar-cta{
    flex:none;

    min-height:42px;

    padding:
        0
        17px
        !important;

    border-radius:9px !important;

    box-shadow:
        0 7px 18px
        rgba(8,112,206,.15);

    font-size:12px !important;

    font-weight:900;
}


/* =========================================================
   HERO DIREKT AN HEADER
   ========================================================= */

.hero{
    margin-top:0 !important;

    padding-top:46px !important;
    padding-bottom:43px !important;

    background:
        radial-gradient(
            circle at 54% 31%,
            rgba(218,235,250,.50),
            rgba(255,255,255,0) 31%
        ),
        linear-gradient(
            115deg,
            #f6faff 0%,
            #ffffff 57%,
            #f5f9fd 100%
        )
        !important;
}


.hero .container{
    max-width:1380px !important;

    padding-left:30px !important;
    padding-right:30px !important;
}


.hero .hero-grid{
    grid-template-columns:
        minmax(315px,.74fr)
        minmax(455px,1.08fr)
        minmax(430px,.91fr)
        !important;

    gap:26px !important;

    align-items:center !important;
}


/* ---------------------------------------------------------
   Text
   --------------------------------------------------------- */

.hero-copy{
    padding-top:0 !important;
    padding-bottom:0 !important;
}


.hero-copy h1{
    max-width:375px !important;

    font-size:
        clamp(
            51px,
            3.8vw,
            63px
        )
        !important;

    line-height:.94 !important;

    margin-bottom:17px !important;
}


.hero-copy .hero-lead{
    max-width:370px !important;

    font-size:13px !important;

    line-height:1.58 !important;
}


.hero-benefits{
    margin-top:18px !important;
    margin-bottom:18px !important;
}


.hero-actions{
    margin-top:18px !important;
}


.hero-request-note{
    margin-top:13px !important;
}


/* =========================================================
   MITTLERER ANHÄNGER
   ========================================================= */

.hero-trailer-visual{
    min-height:440px !important;
}


.hero-trailer-photo{
    top:105px !important;

    height:300px !important;

    border-radius:16px !important;

    box-shadow:
        0 22px 52px
        rgba(25,52,76,.14)
        !important;
}


/*
 * Originalbild bleibt unverändert.
 * CSS schneidet lediglich den sichtbaren Ausschnitt zu.
 */

.hero-trailer-photo img{
    object-fit:cover !important;

    object-position:center 58% !important;

    filter:none !important;

    transform:none !important;
}


.hero-route-start,
.hero-route-end{
    top:25px !important;
}


.hero-route-line{
    top:63px !important;
}


.hero-fleet-badge{
    top:91px !important;
}


/* Beschriftung dezenter */

.hero-trailer-caption{
    right:8px !important;
    bottom:2px !important;

    padding:
        6px
        9px
        !important;
}


.hero-trailer-caption strong{
    font-size:11px !important;
}


.hero-trailer-caption span{
    font-size:8px !important;
}


/* =========================================================
   BOOKING RECHTS
   ========================================================= */

.hero .ow2-booking{
    max-width:490px !important;
}


.hero .ow2-search-card{
    padding:
        25px
        26px
        23px
        !important;

    border-color:#cfdee9 !important;

    box-shadow:
        0 22px 56px
        rgba(22,49,72,.14)
        !important;
}


/* =========================================================
   TRUST-LEISTE
   ========================================================= */

.trust-strip{
    border-top:
        1px solid
        #e3ebf2;

    border-bottom:
        1px solid
        #e3ebf2;

    background:#f8fbfd !important;
}


.trust-grid{
    max-width:1180px;

    margin:auto;
}


/* =========================================================
   DESKTOP MIT ETWAS WENIGER PLATZ
   ========================================================= */

@media(max-width:1180px){

    .topbar .container{
        width:min(
            1080px,
            calc(100% - 36px)
        ) !important;
    }


    .hero .container{
        max-width:1080px !important;
    }


    .hero .hero-grid{
        grid-template-columns:
            minmax(0,1fr)
            minmax(410px,.93fr)
            !important;

        gap:35px !important;
    }


    .hero-copy{
        grid-column:1 !important;
        grid-row:1 !important;
    }


    .hero .ow2-booking{
        grid-column:2 !important;
        grid-row:1 !important;
    }


    .hero-trailer-visual{
        grid-column:1 / -1 !important;
        grid-row:2 !important;

        width:min(720px,100%) !important;

        min-height:405px !important;

        margin:
            -10px
            auto
            0
            !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:820px){

    .topbar{
        position:sticky !important;

        top:0 !important;

        z-index:1000 !important;
    }


    .topbar .container{
        width:min(
            100% - 24px,
            1180px
        ) !important;
    }


    .topbar-inner{
        min-height:66px !important;
    }


    .topbar .desktop-nav{
        display:none !important;
    }


    .topbar .brand{
        font-size:21px !important;
    }


    .hero{
        padding-top:31px !important;
        padding-bottom:31px !important;
    }


    .hero .container{
        padding-left:12px !important;
        padding-right:12px !important;
    }


    .hero .hero-grid{
        grid-template-columns:
            1fr
            !important;

        gap:22px !important;
    }


    .hero-copy,
    .hero-trailer-visual,
    .hero .ow2-booking{
        grid-column:1 !important;
        grid-row:auto !important;
    }


    .hero-copy h1{
        max-width:520px !important;
    }


    .hero-trailer-visual{
        width:100% !important;

        min-height:340px !important;
    }


    .hero-trailer-photo{
        top:90px !important;

        height:250px !important;
    }

}


/* =========================================================
   ENDE ONEWAY_HEADER_HERO_FINAL_V9
   ========================================================= */



/* =========================================================
   ONEWAY_LOWER_PAGE_V10

   NUR untere Homepage-Sektionen.
   Hero / Header / Booking bleiben unangetastet.
   ========================================================= */


/* =========================================================
   GEMEINSAME TYPOGRAFIE
   ========================================================= */

#vorteile,
#so-gehts,
#faq{
    scroll-margin-top:85px;
}


#vorteile > .container,
#so-gehts > .container,
#faq > .container{
    max-width:1200px;
}


#vorteile .section-head.centered,
#so-gehts .section-head.centered{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
}


#vorteile .section-head > span,
#so-gehts .section-head > span,
#faq .section-head > span{
    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#0872cf !important;

    font-size:10px !important;

    font-weight:950 !important;

    letter-spacing:.10em;

    text-transform:uppercase;
}


#vorteile .section-head > span::before,
#so-gehts .section-head > span::before,
#faq .section-head > span::before{
    content:"";

    display:block;

    width:20px;
    height:2px;

    border-radius:99px;

    background:#0872cf;
}


#vorteile .section-head h2,
#so-gehts .section-head h2,
#faq .section-head h2{
    color:#102941;

    letter-spacing:-.04em;
}


/* =========================================================
   WARUM ONEWAY?
   ========================================================= */

#vorteile{
    padding-top:88px !important;
    padding-bottom:92px !important;

    background:#fff;
}


#vorteile .section-head h2{
    max-width:650px;

    margin:
        10px
        auto
        13px;

    font-size:
        clamp(
            37px,
            3.3vw,
            48px
        ) !important;

    line-height:1.03 !important;
}


#vorteile .section-head p{
    max-width:700px;

    margin:
        0
        auto;

    color:#667b8e;

    font-size:14px;

    line-height:1.65;
}


#vorteile .feature-grid{
    display:grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        )
        !important;

    gap:18px !important;

    margin-top:38px !important;
}


#vorteile .feature-card{
    position:relative;

    overflow:hidden;

    min-height:245px !important;

    padding:
        29px
        28px
        27px
        !important;

    border:
        1px solid
        #d9e4ed
        !important;

    border-radius:16px !important;

    background:#fff;

    box-shadow:
        0 13px 34px
        rgba(24,51,74,.065);

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


#vorteile .feature-card::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            #0874d3,
            #5eb3ff
        );
}


#vorteile .feature-card:hover{
    transform:translateY(-4px);

    border-color:#a9cceb !important;

    box-shadow:
        0 19px 43px
        rgba(24,51,74,.105);
}


#vorteile .feature-number{
    display:flex;

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

    width:42px;
    height:42px;

    margin:
        0
        0
        28px
        !important;

    border-radius:12px;

    background:#eaf5ff;

    color:#0871cb;

    font-size:11px;

    font-weight:950;

    letter-spacing:.04em;
}


#vorteile .feature-card h3{
    margin:
        0
        0
        10px;

    color:#142d44;

    font-size:18px;

    line-height:1.25;
}


#vorteile .feature-card p{
    margin:0;

    color:#667b8e;

    font-size:12px;

    line-height:1.65;
}


/* =========================================================
   ANHÄNGER-SEKTION
   Nur Übergang verbessern – Fotos nicht anfassen.
   ========================================================= */

.real-trailer-showcase{
    border-top:
        1px solid
        #e5edf3;

    border-bottom:
        1px solid
        #e5edf3;
}


.real-trailer-heading p{
    font-size:13px !important;
    line-height:1.6 !important;
}


/* =========================================================
   SO GEHT'S
   ========================================================= */

#so-gehts{
    padding-top:92px !important;
    padding-bottom:92px !important;

    background:#fff;
}


#so-gehts .section-head h2{
    max-width:650px;

    margin:
        10px
        auto
        0;

    font-size:
        clamp(
            38px,
            3.3vw,
            48px
        ) !important;

    line-height:1.03 !important;
}


#so-gehts .steps-grid{
    position:relative;

    display:grid !important;

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

    gap:16px !important;

    margin-top:45px !important;
}


/*
 * Verbindungslinie zwischen Schritt 1–4.
 */

#so-gehts .steps-grid::before{
    content:"";

    position:absolute;

    z-index:0;

    left:8%;
    right:8%;

    top:30px;

    height:2px;

    background:
        linear-gradient(
            90deg,
            #bddcf5,
            #7bb9ed,
            #bddcf5
        );
}


#so-gehts .process-card{
    position:relative;

    z-index:1;

    min-height:205px;

    padding:
        24px
        22px
        22px
        !important;

    border:
        1px solid
        #dbe5ed
        !important;

    border-radius:15px !important;

    background:#fff !important;

    box-shadow:
        0 9px 26px
        rgba(24,51,74,.055);

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


#so-gehts .process-card:hover{
    transform:translateY(-3px);

    box-shadow:
        0 15px 35px
        rgba(24,51,74,.09);
}


#so-gehts .process-icon{
    display:flex;

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

    width:44px !important;
    height:44px !important;

    margin:
        -1px
        0
        26px
        !important;

    border:
        5px solid
        #fff;

    border-radius:50%;

    background:#092b47 !important;

    box-shadow:
        0 0 0 1px #d8e5ef;

    color:#fff !important;

    font-size:12px !important;

    font-weight:950;
}


#so-gehts .process-card h3{
    margin:
        0
        0
        8px;

    color:#142d44;

    font-size:15px;
}


#so-gehts .process-card p{
    margin:0;

    color:#6b7e90;

    font-size:11px;

    line-height:1.58;
}


#so-gehts .section-more-link{
    margin-top:25px !important;

    text-align:center;
}


#so-gehts .section-more-link a{
    color:#0872cf;

    font-size:11px;

    font-weight:900;

    text-decoration:none;
}


/* =========================================================
   DUNKELBLAUER ONE-WAY-BEREICH
   ========================================================= */

.section-dark{
    position:relative;

    overflow:hidden;

    padding:
        80px
        0
        !important;

    background:
        radial-gradient(
            circle at 93% 40%,
            rgba(31,104,158,.30) 0,
            rgba(31,104,158,.12) 18%,
            rgba(6,35,56,0) 36%
        ),
        linear-gradient(
            115deg,
            #061f33 0%,
            #08283f 100%
        )
        !important;
}


.section-dark::before{
    content:"";

    position:absolute;

    right:-90px;
    top:-135px;

    width:330px;
    height:330px;

    border:
        34px solid
        rgba(100,170,223,.055);

    border-radius:50%;
}


.section-dark > .container{
    max-width:1200px;
}


.section-dark .dark-grid{
    position:relative;

    z-index:2;

    display:grid !important;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(350px,.75fr)
        !important;

    align-items:center !important;

    gap:95px !important;
}


.section-dark .dark-kicker{
    display:block;

    margin-bottom:12px;

    color:#73bfff;

    font-size:9px;

    font-weight:950;

    letter-spacing:.10em;

    text-transform:uppercase;
}


.section-dark h2{
    max-width:500px;

    margin:0 !important;

    color:#fff !important;

    font-size:
        clamp(
            36px,
            3vw,
            46px
        )
        !important;

    line-height:1.02 !important;

    letter-spacing:-.04em;
}


.section-dark p{
    max-width:520px;

    margin:
        0
        0
        20px;

    color:#c3d3df !important;

    font-size:13px;

    line-height:1.68;
}


.section-dark .button-light{
    min-height:43px;

    padding:
        0
        17px;

    border-radius:9px;

    font-size:11px;

    font-weight:900;
}


/*
 * Alter V6-Bildcontainer bleibt aus.
 */

.section-dark-trailer-v6{
    display:none !important;
}


/* =========================================================
   FAQ
   ========================================================= */

#faq{
    padding-top:88px !important;
    padding-bottom:64px !important;

    background:#fff;
}


#faq .faq-layout{
    display:grid !important;

    grid-template-columns:
        minmax(260px,.62fr)
        minmax(0,1.38fr)
        !important;

    column-gap:70px !important;

    row-gap:22px;

    align-items:start;
}


#faq .section-head{
    position:sticky;

    top:25px;
}


#faq .section-head h2{
    margin:
        10px
        0
        10px;

    font-size:
        clamp(
            38px,
            3vw,
            46px
        )
        !important;

    line-height:1.04 !important;
}


#faq .section-head p{
    max-width:290px;

    margin:0;

    color:#718397;

    font-size:12px;

    line-height:1.6;
}


#faq .faq-list{
    display:grid;

    gap:9px;
}


#faq .faq-list details{
    overflow:hidden;

    margin:0 !important;

    border:
        1px solid
        #d9e4ed
        !important;

    border-radius:11px !important;

    background:#fff;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


#faq .faq-list details[open]{
    border-color:#a9cae7 !important;

    box-shadow:
        0 10px 26px
        rgba(23,50,74,.065);
}


#faq .faq-list summary{
    min-height:55px;

    padding:
        0
        18px
        !important;

    color:#19344c;

    cursor:pointer;

    font-size:12px;

    font-weight:850;
}


#faq .faq-list details p{
    margin:0;

    padding:
        0
        18px
        18px
        !important;

    color:#687d90;

    font-size:11px;

    line-height:1.65;
}


#faq .section-more-link{
    grid-column:2;

    margin-top:4px !important;
}


#faq .section-more-link a{
    color:#0872cf;

    font-size:10px;

    font-weight:900;

    text-decoration:none;
}


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

.final-cta{
    padding:
        30px
        0
        82px
        !important;

    background:#fff;
}


.final-cta > .container{
    max-width:1200px;
}


.final-cta-box{
    position:relative;

    overflow:hidden;

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    gap:45px;

    min-height:175px;

    padding:
        37px
        40px
        !important;

    border-radius:18px !important;

    background:
        linear-gradient(
            115deg,
            #0768d0 0%,
            #0876e6 67%,
            #0e68d0 100%
        )
        !important;

    box-shadow:
        0 20px 48px
        rgba(8,105,207,.20);
}


.final-cta-box::before{
    content:"";

    position:absolute;

    right:-35px;
    top:-83px;

    width:235px;
    height:235px;

    border:
        30px solid
        rgba(255,255,255,.055);

    border-radius:50%;
}


.final-cta-box > *{
    position:relative;
    z-index:2;
}


.final-cta-box > div{
    max-width:690px;
}


.final-cta-box span{
    display:block;

    margin-bottom:7px;

    color:#b9dcff;

    font-size:9px;

    font-weight:950;

    letter-spacing:.09em;

    text-transform:uppercase;
}


.final-cta-box h2{
    margin:
        0
        0
        7px;

    color:#fff;

    font-size:
        clamp(
            28px,
            2.8vw,
            38px
        )
        !important;

    line-height:1.05;
}


.final-cta-box p{
    max-width:650px;

    margin:0;

    color:#d7eaff;

    font-size:12px;

    line-height:1.55;
}


.final-cta-box .button{
    flex:none;

    min-height:47px;

    padding:
        0
        20px
        !important;

    border-radius:10px;

    font-size:11px;

    font-weight:900;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
    padding:
        52px
        0
        22px
        !important;

    border-top:
        1px solid
        #e0e9f0;

    background:#f7fafc !important;
}


footer .footer-grid-expanded{
    display:grid !important;

    grid-template-columns:
        minmax(250px,1.8fr)
        repeat(
            3,
            minmax(120px,.7fr)
        )
        !important;

    gap:48px !important;

    align-items:start;
}


footer .footer-brand{
    display:inline-flex;

    margin-bottom:13px;

    font-size:21px !important;
}


footer .footer-grid > div > strong{
    display:block;

    margin-bottom:12px;

    color:#1e374e;

    font-size:11px;

    font-weight:900;
}


footer .footer-grid p{
    max-width:300px !important;

    color:#728598 !important;

    font-size:10px;

    line-height:1.65 !important;
}


footer .footer-grid a,
footer .legal-pending{
    display:block;

    margin-bottom:7px;

    color:#667b8e;

    font-size:10px;

    line-height:1.4;

    text-decoration:none;
}


footer .footer-grid a:hover{
    color:#0872cf;
}


footer .legal-pending{
    opacity:.65;
}


footer .footer-bottom{
    margin-top:39px;

    padding-top:18px;

    border-top:
        1px solid
        #dde7ee;

    color:#8998a6;

    font-size:9px;
}


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

@media(max-width:900px){

    #vorteile .feature-grid{
        grid-template-columns:1fr !important;
    }


    #vorteile .feature-card{
        min-height:0 !important;
    }


    #so-gehts .steps-grid{
        grid-template-columns:
            1fr
            1fr
            !important;
    }


    #so-gehts .steps-grid::before{
        display:none;
    }


    .section-dark .dark-grid{
        grid-template-columns:1fr !important;

        gap:28px !important;
    }


    #faq .faq-layout{
        grid-template-columns:1fr !important;

        gap:28px !important;
    }


    #faq .section-head{
        position:static;
    }


    #faq .section-more-link{
        grid-column:1;
    }


    .final-cta-box{
        display:block !important;
    }


    .final-cta-box .button{
        margin-top:22px;
    }


    footer .footer-grid-expanded{
        grid-template-columns:
            1.5fr
            1fr
            1fr
            !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:620px){

    #vorteile,
    #so-gehts,
    #faq{
        padding-top:62px !important;
        padding-bottom:64px !important;
    }


    #vorteile .section-head h2,
    #so-gehts .section-head h2,
    #faq .section-head h2{
        font-size:34px !important;
    }


    #vorteile .feature-card{
        padding:
            23px
            21px
            !important;
    }


    #so-gehts .steps-grid{
        grid-template-columns:1fr !important;

        margin-top:30px !important;
    }


    #so-gehts .process-card{
        min-height:0;

        padding:
            21px
            19px
            !important;
    }


    .section-dark{
        padding:
            61px
            0
            !important;
    }


    .section-dark h2{
        font-size:35px !important;
    }


    #faq .faq-list summary{
        min-height:58px;

        padding:
            0
            14px
            !important;
    }


    #faq .faq-list details p{
        padding:
            0
            14px
            15px
            !important;
    }


    .final-cta{
        padding:
            15px
            0
            60px
            !important;
    }


    .final-cta-box{
        min-height:0;

        padding:
            28px
            23px
            !important;

        border-radius:15px !important;
    }


    footer{
        padding-top:42px !important;
    }


    footer .footer-grid-expanded{
        grid-template-columns:
            1fr
            1fr
            !important;

        gap:
            30px
            24px
            !important;
    }


    footer .footer-grid-expanded > div:first-child{
        grid-column:1 / -1;
    }

}


@media(max-width:420px){

    footer .footer-grid-expanded{
        grid-template-columns:1fr !important;
    }


    footer .footer-grid-expanded > div:first-child{
        grid-column:1;
    }

}


/* =========================================================
   ENDE ONEWAY_LOWER_PAGE_V10
   ========================================================= */