/*
Theme Name: Verkehr Live
Theme URI: https://verkehr.netx4u.de
Author: Andre Gajus / Gajus Web & IT Solutions
Description: Theme für das Verkehr-Live-Portal mit ÖPNV, Bahn, Flug und Schifffahrt.
Version: 1.0.0
Text Domain: verkehr-live
*/


:root {

    --vl-bg:
        #f3f5f7;

    --vl-panel:
        #ffffff;

    --vl-text:
        #171a1f;

    --vl-muted:
        #66707a;

    --vl-border:
        #dde2e7;

    --vl-red:
        #d71920;

    --vl-red-dark:
        #ad1016;

    --vl-green:
        #188651;

    --vl-blue:
        #1877b7;

    --vl-purple:
        #7445b8;

    --vl-ocean:
        #087f9c;

    --vl-shadow:
        0 8px 30px rgba(0,0,0,.09);

    --vl-radius:
        18px;
}


* {

    box-sizing:
        border-box;
}


html {

    scroll-behavior:
        smooth;
}


body {

    margin:
        0;

    background:
        var(--vl-bg);

    color:
        var(--vl-text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


a {

    color:
        inherit;

    text-decoration:
        none;
}


img {

    max-width:
        100%;

    height:
        auto;
}


/* ==================================================
   HEADER
   ================================================== */

.vl-header {

    position:
        sticky;

    top:
        0;

    z-index:
        5000;

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

    backdrop-filter:
        blur(12px);

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

    box-shadow:
        0 2px 15px rgba(0,0,0,.055);
}


.admin-bar .vl-header {

    top:
        32px;
}


.vl-header-inner {

    max-width:
        1500px;

    margin:
        0 auto;

    min-height:
        72px;

    padding:
        10px 22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}


.vl-brand {

    display:
        flex;

    align-items:
        center;

    min-width:
        240px;
}


.vl-brand-logo {

    width:
        62px;

    height:
        48px;

    margin-right:
        12px;

    overflow:
        hidden;

    flex:
        0 0 auto;

    border-radius:
        13px;

    background:
        linear-gradient(
            145deg,
            #f1282f,
            #af0b12
        );

    box-shadow:
        0 5px 15px rgba(183,13,20,.28);
}


.vl-brand-logo svg {

    width:
        100%;

    height:
        100%;

    display:
        block;
}


.vl-logo-body {

    fill:
        #fff;
}


.vl-logo-window {

    fill:
        #b70d14;
}


.vl-logo-wheel {

    fill:
        #20252a;

    stroke:
        #fff;

    stroke-width:
        1;
}


.vl-logo-road {

    fill:
        none;

    stroke:
        rgba(255,255,255,.28);

    stroke-width:
        1.5;

    stroke-linecap:
        round;
}


.vl-brand-name {

    margin:
        0;

    font-size:
        22px;

    font-weight:
        850;

    letter-spacing:
        -.4px;

    line-height:
        1.05;
}


.vl-brand-tagline {

    margin-top:
        4px;

    color:
        var(--vl-muted);

    font-size:
        11px;
}


.vl-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        6px;

    flex-wrap:
        wrap;
}


.vl-nav a {

    min-height:
        38px;

    padding:
        9px 13px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    color:
        #38404a;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        background .14s ease,
        color .14s ease,
        transform .14s ease;
}


.vl-nav a:hover {

    background:
        #edf0f3;

    color:
        #11151a;

    transform:
        translateY(-1px);
}


.vl-nav a.vl-current {

    color:
        #fff;

    background:
        #252c34;
}


/* ==================================================
   ALLGEMEINES LAYOUT
   ================================================== */

.vl-main {

    min-height:
        calc(100vh - 230px);
}


.vl-container {

    max-width:
        1500px;

    margin:
        0 auto;

    padding:
        28px 22px 46px;
}


/* ==================================================
   STARTSEITE
   ================================================== */

.vl-hero {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        310px;

    padding:
        48px;

    display:
        flex;

    align-items:
        center;

    border-radius:
        24px;

    color:
        #fff;

    background:
        linear-gradient(
            130deg,
            #171d24 0%,
            #222b35 56%,
            #3b1518 100%
        );

    box-shadow:
        var(--vl-shadow);
}


.vl-hero::after {

    content:
        "";

    position:
        absolute;

    width:
        480px;

    height:
        480px;

    right:
        -180px;

    top:
        -230px;

    border:
        70px solid rgba(255,255,255,.035);

    border-radius:
        50%;
}


.vl-hero-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        820px;
}


.vl-eyebrow {

    margin-bottom:
        13px;

    color:
        #ffb8bb;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}


.vl-hero h1 {

    margin:
        0;

    max-width:
        800px;

    font-size:
        clamp(38px,5vw,68px);

    line-height:
        .98;

    letter-spacing:
        -2px;
}


.vl-hero p {

    max-width:
        720px;

    margin:
        20px 0 0;

    color:
        #d7dde3;

    font-size:
        17px;

    line-height:
        1.6;
}


.vl-section-title {

    margin:
        38px 0 16px;

    font-size:
        24px;

    letter-spacing:
        -.5px;
}


.vl-grid {

    display:
        grid;

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

    gap:
        16px;
}


.vl-card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        245px;

    padding:
        24px;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid var(--vl-border);

    border-radius:
        var(--vl-radius);

    background:
        var(--vl-panel);

    box-shadow:
        0 4px 18px rgba(0,0,0,.055);

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


.vl-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        var(--vl-shadow);
}


.vl-card-icon {

    width:
        52px;

    height:
        52px;

    margin-bottom:
        18px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    color:
        #fff;

    font-size:
        27px;

    font-weight:
        800;
}


.vl-card-oepnv .vl-card-icon {

    background:
        var(--vl-red);
}


.vl-card-bahn .vl-card-icon {

    background:
        var(--vl-green);
}


.vl-card-flug .vl-card-icon {

    background:
        var(--vl-blue);
}


.vl-card-schiff .vl-card-icon {

    background:
        var(--vl-ocean);
}


.vl-card h2 {

    margin:
        0 0 8px;

    font-size:
        21px;

    letter-spacing:
        -.35px;
}


.vl-card p {

    margin:
        0;

    color:
        var(--vl-muted);

    font-size:
        13px;

    line-height:
        1.55;
}


.vl-card-spacer {

    flex:
        1;
}


.vl-card-footer {

    margin-top:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


.vl-badge {

    padding:
        5px 8px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;

    background:
        #edf0f3;

    color:
        #5d6670;
}


.vl-badge-live {

    background:
        #e8f7ef;

    color:
        #147344;
}


.vl-card-arrow {

    font-size:
        19px;

    color:
        #68717a;
}


/* ==================================================
   BEREICHSSEITEN
   ================================================== */

.vl-page-head {

    margin-bottom:
        22px;

    padding:
        28px 30px;

    border:
        1px solid var(--vl-border);

    border-radius:
        var(--vl-radius);

    background:
        #fff;
}


.vl-page-head h1 {

    margin:
        0;

    font-size:
        34px;

    letter-spacing:
        -.7px;
}


.vl-page-head p {

    margin:
        8px 0 0;

    color:
        var(--vl-muted);

    line-height:
        1.55;
}


.vl-placeholder {

    padding:
        34px;

    border:
        1px solid var(--vl-border);

    border-radius:
        var(--vl-radius);

    background:
        #fff;

    box-shadow:
        0 4px 18px rgba(0,0,0,.05);
}


.vl-placeholder h2 {

    margin-top:
        0;
}


.vl-placeholder p {

    color:
        var(--vl-muted);

    line-height:
        1.65;
}


.vl-tags {

    margin-top:
        18px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.vl-tag {

    padding:
        7px 10px;

    border-radius:
        999px;

    background:
        #edf0f3;

    color:
        #48515b;

    font-size:
        11px;

    font-weight:
        700;
}


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

.vl-footer {

    border-top:
        1px solid var(--vl-border);

    background:
        #171c22;

    color:
        #cbd1d7;
}


.vl-footer-inner {

    max-width:
        1500px;

    margin:
        0 auto;

    padding:
        26px 22px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

    flex-wrap:
        wrap;
}


.vl-footer strong {

    color:
        #fff;
}


.vl-footer-copy {

    font-size:
        12px;

    line-height:
        1.6;
}


.vl-footer-note {

    max-width:
        680px;

    color:
        #9099a2;

    font-size:
        10px;

    line-height:
        1.5;
}


/* ==================================================
   MOBIL
   ================================================== */

@media (max-width:1050px) {

    .vl-grid {

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

}


@media (max-width:760px) {

    .admin-bar .vl-header {

        top:
            46px;
    }


    .vl-header-inner {

        min-height:
            0;

        padding:
            9px 11px;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            8px;
    }


    .vl-brand {

        min-width:
            0;
    }


    .vl-brand-logo {

        width:
            53px;

        height:
            41px;
    }


    .vl-brand-name {

        font-size:
            19px;
    }


    .vl-brand-tagline {

        display:
            none;
    }


    .vl-nav {

        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;
    }


    .vl-nav a {

        min-height:
            33px;

        padding:
            7px 10px;

        flex:
            0 0 auto;

        font-size:
            11px;
    }


    .vl-container {

        padding:
            14px 10px 30px;
    }


    .vl-hero {

        min-height:
            265px;

        padding:
            29px 23px;

        border-radius:
            17px;
    }


    .vl-hero h1 {

        font-size:
            40px;

        letter-spacing:
            -1.3px;
    }


    .vl-hero p {

        font-size:
            14px;
    }


    .vl-grid {

        grid-template-columns:
            1fr;
    }


    .vl-card {

        min-height:
            205px;
    }


    .vl-footer-inner {

        padding:
            22px 14px;
    }

}

/* VERKEHR LIVE - OEPNV PAGE HEAD COMPACT START */

/*
   Nur der Kopfbereich der ÖPNV-Seite.
   Der eigentliche LiveRadar wird nicht verändert.
*/

body.page-template-page-oepnv-live .vl-page-head {

    margin-bottom: 10px;

    padding:
        14px
        22px;

    border-radius: 14px;
}


body.page-template-page-oepnv-live .vl-page-head h1 {

    margin:
        0
        0
        5px;

    font-size: 27px;
    line-height: 1.05;
}


body.page-template-page-oepnv-live .vl-page-head p {

    margin: 0;

    font-size: 14px;
    line-height: 1.35;
}


/*
   Auf kleineren Bildschirmen weiterhin angenehm lesbar.
*/

@media (max-width: 700px) {

    body.page-template-page-oepnv-live .vl-page-head {

        padding:
            12px
            16px;

        margin-bottom: 8px;
    }


    body.page-template-page-oepnv-live .vl-page-head h1 {

        font-size: 24px;
    }


    body.page-template-page-oepnv-live .vl-page-head p {

        font-size: 13px;
    }
}

/* VERKEHR LIVE - OEPNV PAGE HEAD COMPACT END */