/* ==========================================================
   KFZ LEXIKON 2.0
   fahranfaengerdeal.de
========================================================== */

.fo-kfz-lexikon-page{
    background:#fff;
}

.fo-kfz-lexikon-page .entry-header,
.fo-kfz-lexikon-page .page-header,
.fo-kfz-lexikon-page .entry-title{
    display:none !important;
}


/* ==========================================================
   ROOT
========================================================== */

.fokl-section{

    --green:#337e53;
    --dark:#153d2a;
    --text:#607469;
    --muted:#84938a;
    --line:#dce8e1;
    --soft:#f6f9f7;

    --orange:#f59b18;
    --orange-dark:#865000;
    --orange-soft:#fff3e2;

    --e-global-color-primary:#337e53 !important;
    --e-global-color-accent:#337e53 !important;

    position:relative;

    left:50%;
    width:100vw;
    margin-left:-50vw;

    background:#fff;

    font-family:"Inter",Arial,sans-serif;
}


.fokl-section *,
.fokl-section *::before,
.fokl-section *::after{
    box-sizing:border-box;
}


/* ==========================================================
   RESET
========================================================== */

.fokl-section button,
.fokl-section input{

    appearance:none !important;
    -webkit-appearance:none !important;

    outline:none !important;

    font-family:"Inter",Arial,sans-serif !important;
}


.fokl-section button:focus,
.fokl-section input:focus{
    outline:none !important;
}


.fokl-section button:focus-visible,
.fokl-section input:focus-visible{

    outline:
        3px solid
        rgba(51,126,83,.13) !important;

    outline-offset:2px !important;
}


/* ==========================================================
   INNER
========================================================== */

.fokl-inner{

    width:100%;
    max-width:1320px;

    margin:0 auto;

    padding:
        80px
        30px
        105px;
}


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

.fokl-head{

    max-width:970px;

    margin:
        0
        0
        48px;

    text-align:left;
}


.fokl-eyebrow{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:21px;

    color:var(--green);

    font-size:11px;

    font-weight:700;

    letter-spacing:1.05px;
}


.fokl-eyebrow span{

    width:9px;
    height:9px;

    flex:0 0 9px;

    border-radius:50%;

    background:var(--orange);

    box-shadow:
        0 0 0 5px
        rgba(245,155,24,.11);
}


/* ==========================================================
   H1
========================================================== */

.fokl-title{

    margin:
        0
        0
        23px !important;

    padding:0 !important;

    color:var(--dark) !important;

    font-family:"Inter Tight",sans-serif;

    font-size:
        clamp(
            51px,
            5vw,
            72px
        );

    line-height:1;

    font-weight:600;

    letter-spacing:-3px;
}


.fokl-title span{

    position:relative;
    z-index:1;

    display:inline-block;

    margin:
        9px
        0
        0
        9px;

    padding:
        3px
        14px
        7px;

    color:#fff !important;

    font-family:"Atma",cursive;

    font-size:.88em;

    font-weight:600;

    line-height:1;

    letter-spacing:-.4px;

    transform:rotate(-1deg);
}


.fokl-title span::before{

    content:"";

    position:absolute;
    z-index:-1;

    inset:
        1px
        -9px;

    background:var(--orange);

    clip-path:polygon(
        0 7%,
        31% 2%,
        68% 5%,
        100% 1%,
        99% 90%,
        66% 95%,
        31% 91%,
        0 98%
    );
}


.fokl-intro{

    max-width:810px;

    margin:0;

    color:var(--text);

    font-size:18px;

    line-height:1.75;
}


.fokl-intro strong{

    color:var(--dark);

    font-weight:650;
}


/* ==========================================================
   SEARCH
========================================================== */

.fokl-search-shell{

    width:100%;

    margin:
        0
        0
        29px;
}


.fokl-search{

    position:relative;

    width:100%;
}


.fokl-search-label{

    position:absolute;

    z-index:3;

    left:22px;
    top:50%;

    transform:
        translateY(-50%);

    color:var(--green);

    font-size:10px;

    font-weight:700;

    letter-spacing:.75px;

    pointer-events:none;
}


.fokl-search input{

    display:block;

    width:100% !important;

    height:74px !important;

    margin:0 !important;

    padding:
        0
        63px
        0
        90px !important;

    border:
        1px solid
        #cbdcd1 !important;

    border-radius:0 !important;

    background:#fff !important;

    color:var(--dark) !important;

    font-size:17px !important;

    font-weight:400 !important;

    line-height:74px !important;

    box-shadow:none !important;

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


.fokl-search input::placeholder{

    color:#89978f !important;

    opacity:1;
}


.fokl-search input:focus{

    border-color:
        var(--green) !important;

    box-shadow:
        inset 5px 0 0
        var(--green) !important;
}


.fokl-search-clear{

    position:absolute;

    z-index:5;

    right:15px;
    top:50%;

    width:42px !important;
    height:42px !important;

    display:flex !important;

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

    margin:0 !important;
    padding:0 !important;

    transform:
        translateY(-50%);

    border:0 !important;

    border-radius:50% !important;

    background:
        var(--soft) !important;

    color:#72837a !important;

    font-size:20px !important;

    font-weight:300 !important;

    cursor:pointer;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .2s ease,
        background .2s ease,
        color .2s ease;
}


.fokl-search.has-value
.fokl-search-clear{

    opacity:1;

    pointer-events:auto;
}


.fokl-search-clear:hover{

    background:
        var(--orange-soft) !important;

    color:
        var(--orange) !important;
}


/* ==========================================================
   CATEGORY NAV
========================================================== */

.fokl-categories{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:
        8px
        25px;

    margin-bottom:18px;

    padding-bottom:17px;

    border-bottom:
        1px solid
        var(--line);
}


.fokl-filter{

    min-height:38px;

    display:inline-flex !important;

    align-items:center !important;

    margin:0 !important;

    padding:
        7px
        0 !important;

    border:
        0 !important;

    border-bottom:
        2px solid
        transparent !important;

    border-radius:0 !important;

    background:
        transparent !important;

    color:#697b71 !important;

    font-size:13px !important;

    font-weight:550 !important;

    cursor:pointer;
}


.fokl-filter:hover{

    color:
        var(--green) !important;
}


.fokl-filter.is-active{

    border-bottom-color:
        var(--green) !important;

    color:
        var(--green) !important;

    font-weight:700 !important;
}


/* ==========================================================
   A-Z NAV
========================================================== */

.fokl-letter-nav{

    position:sticky;

    z-index:30;

    top:112px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:
        3px
        7px;

    margin:
        0
        0
        46px;

    padding:
        12px
        15px;

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

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

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.fokl-letter-nav-title{

    margin-right:12px;

    color:#7f8f86;

    font-family:"Atma",cursive;

    font-size:18px;

    font-weight:700;
}


.fokl-letter-jump{

    position:relative;

    width:34px !important;
    height:34px !important;

    display:inline-flex !important;

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

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    border-radius:0 !important;

    background:
        transparent !important;

    color:var(--green) !important;

    font-family:"Atma",cursive !important;

    font-size:17px !important;

    font-weight:700 !important;

    cursor:pointer;
}


.fokl-letter-jump::after{

    content:"";

    position:absolute;

    left:8px;
    right:8px;
    bottom:2px;

    height:2px;

    background:var(--orange);

    transform:scaleX(0);

    transition:
        transform .2s ease;
}


.fokl-letter-jump:hover,
.fokl-letter-jump.is-current{

    color:
        var(--orange-dark) !important;
}


.fokl-letter-jump:hover::after,
.fokl-letter-jump.is-current::after{

    transform:
        scaleX(1);
}


/* ==========================================================
   LETTER SECTION
========================================================== */

.fokl-letter-section{

    display:grid;

    grid-template-columns:
        105px
        minmax(0,1fr);

    gap:31px;

    padding:
        40px
        0
        52px;

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

    scroll-margin-top:
        180px;
}


.fokl-letter-section:first-child{

    padding-top:0;

    border-top:0;
}


.fokl-letter-head{
    min-width:0;
}


.fokl-letter-big{

    position:sticky;

    top:180px;

    display:block;

    color:var(--orange);

    font-family:"Atma",cursive;

    font-size:72px;

    font-weight:700;

    line-height:.9;
}


/* ==========================================================
   TERM GRID
========================================================== */

.fokl-letter-terms{

    width:100%;
    min-width:0;

    display:grid;

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

    border-top:
        1px solid
        var(--line);
}


/* ==========================================================
   TERM
========================================================== */

.fokl-card{

    position:relative;

    width:100%;
    min-width:0;

    overflow:hidden;

    border:0;

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

    background:#fff;
}


.fokl-card:nth-child(odd){

    border-right:
        1px solid
        var(--line);
}


.fokl-card-head{

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

    min-height:157px;

    display:grid !important;

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

    align-items:center;

    gap:25px;

    margin:0 !important;

    padding:
        27px
        25px !important;

    border:0 !important;

    border-radius:0 !important;

    background:
        transparent !important;

    color:
        var(--dark) !important;

    text-align:left !important;

    cursor:pointer;

    transition:
        background .2s ease;
}


.fokl-card-head:hover{

    background:
        #f7faf8 !important;
}


.fokl-card-main{

    width:100%;
    min-width:0;

    overflow:hidden;
}


.fokl-card-title{

    display:block;

    width:100%;

    margin-bottom:9px;

    color:var(--dark) !important;

    font-family:
        "Inter Tight",
        sans-serif !important;

    font-size:24px !important;

    line-height:1.18 !important;

    font-weight:600 !important;

    letter-spacing:-.45px;

    white-space:normal !important;

    overflow-wrap:anywhere !important;
}


.fokl-card-short{

    display:block;

    width:100%;

    color:#687c71 !important;

    font-size:15px !important;

    line-height:1.6 !important;

    font-weight:400 !important;

    white-space:normal !important;

    overflow-wrap:anywhere !important;
}


/* MORE */

.fokl-card-open{

    position:relative;

    flex:0 0 auto;

    color:var(--green);

    font-size:11px;

    font-weight:700;

    white-space:nowrap;

    transition:
        color .2s ease;
}


.fokl-card-open::after{

    content:" →";

    color:var(--orange);

    font-size:14px;
}


.fokl-card-head:hover
.fokl-card-open{

    color:
        var(--orange-dark);
}


/* ==========================================================
   SOURCE DATA
========================================================== */

.fokl-card-data{

    display:none !important;
}


/* ==========================================================
   EMPTY
========================================================== */

.fokl-empty{

    padding:
        75px
        20px;

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

    text-align:center;
}


.fokl-empty strong{

    display:block;

    margin-bottom:8px;

    color:var(--dark);

    font-family:"Inter Tight",sans-serif;

    font-size:26px;

    font-weight:600;
}


.fokl-empty p{

    margin:
        0
        0
        20px;

    color:var(--muted);

    font-size:14px;
}


.fokl-empty button{

    min-height:48px;

    padding:
        0
        18px !important;

    border:0 !important;

    border-radius:0 !important;

    background:
        var(--green) !important;

    color:#fff !important;

    font-size:12px !important;

    font-weight:700 !important;

    cursor:pointer;
}


/* ==========================================================
   BOTTOM
========================================================== */

.fokl-bottom{

    display:grid;

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

    align-items:center;

    gap:30px;

    margin-top:47px;

    padding:
        30px
        0;

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

    border-bottom:
        1px solid
        var(--line);
}


.fokl-bottom-copy > span{

    display:block;

    margin-bottom:5px;

    color:var(--orange-dark);

    font-size:9px;

    font-weight:700;

    letter-spacing:.75px;
}


.fokl-bottom-copy strong{

    display:block;

    margin-bottom:6px;

    color:var(--dark);

    font-family:"Inter Tight",sans-serif;

    font-size:20px;

    font-weight:600;
}


.fokl-bottom-copy p{

    max-width:770px;

    margin:0;

    color:#6f8278;

    font-size:14px;

    line-height:1.6;
}


.fokl-bottom-btn{

    min-height:56px;

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:
        7px
        7px
        7px
        20px;

    background:
        var(--green);

    color:#fff !important;

    text-decoration:none !important;

    font-size:13px;

    font-weight:700;
}


.fokl-bottom-btn span{

    width:41px;
    height:41px;

    display:flex;

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

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

    color:#fff;
}


/* ==========================================================
   DISCLAIMER
========================================================== */

.fokl-disclaimer{

    margin-top:19px;

    color:#829188;

    font-size:11px;

    line-height:1.5;

    text-align:center;
}


/* ==========================================================
   MODAL
========================================================== */

.fokl-modal{

    position:fixed;

    z-index:9999999;

    inset:0;

    display:flex;

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

    padding:30px;

    background:
        rgba(15,34,23,.58);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .24s ease,
        visibility .24s ease;
}


.fokl-modal.is-open{

    opacity:1;

    visibility:visible;

    pointer-events:auto;
}


.fokl-modal-panel{

    position:relative;

    width:
        min(
            840px,
            100%
        );

    max-height:
        calc(100vh - 60px);

    overflow-x:hidden;
    overflow-y:auto;

    border-top:
        6px solid
        var(--orange);

    background:#fff;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.20);

    opacity:0;

    transform:
        translateY(20px)
        scale(.985);

    transition:
        opacity .27s ease,
        transform .27s
        cubic-bezier(.2,.75,.2,1);
}


.fokl-modal.is-open
.fokl-modal-panel{

    opacity:1;

    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================
   MODAL HEAD
========================================================== */

.fokl-modal-head{

    position:relative;

    padding:
        42px
        50px
        28px;

    background:#fff !important;
}


.fokl-modal-kicker{

    margin-bottom:13px;

    color:var(--orange-dark) !important;

    font-size:10px;

    font-weight:700;

    letter-spacing:.85px;
}


.fokl-modal-title{

    max-width:690px;

    margin:0 !important;

    padding:
        0
        58px
        0
        0 !important;

    color:
        var(--dark) !important;

    font-family:
        "Inter Tight",
        sans-serif !important;

    font-size:
        clamp(
            38px,
            4vw,
            51px
        ) !important;

    line-height:1.05 !important;

    font-weight:600 !important;

    letter-spacing:-1.7px;

    overflow-wrap:anywhere;
}


/* CLOSE */

.fokl-modal-close{

    position:absolute;

    right:20px;
    top:20px;

    width:46px !important;
    height:46px !important;

    display:flex !important;

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

    margin:0 !important;
    padding:0 !important;

    border:
        1px solid
        #d6e3da !important;

    border-radius:50% !important;

    background:#fff !important;

    color:var(--dark) !important;

    font-size:22px !important;

    font-weight:300 !important;

    cursor:pointer;
}


.fokl-modal-close:hover{

    border-color:
        var(--orange) !important;

    background:
        var(--orange) !important;

    color:#fff !important;
}


/* ==========================================================
   BODY
========================================================== */

.fokl-modal-body{

    padding:
        5px
        50px
        46px;

    background:#fff;

    color:var(--dark);
}


.fokl-modal-category{

    display:inline-block;

    margin-bottom:22px;

    padding:
        7px
        10px;

    background:var(--soft);

    color:var(--green);

    font-size:11px;

    font-weight:700;
}


/* QUESTION */

.fokl-modal-question{

    margin:
        0
        0
        14px;

    color:var(--dark) !important;

    font-family:"Inter Tight",sans-serif;

    font-size:23px;

    line-height:1.3;

    font-weight:600;
}


/* SHORT ANSWER */

.fokl-modal-answer{

    margin:
        0
        0
        27px;

    padding:
        18px
        20px;

    border-left:
        4px solid
        var(--green);

    background:#f4f8f5;

    color:#385745;

    font-size:17px;

    line-height:1.7;

    font-weight:550;
}


/* DETAIL */

.fokl-modal-section-label{

    display:block;

    margin-bottom:9px;

    color:var(--orange-dark);

    font-size:9px;

    font-weight:700;

    letter-spacing:.8px;
}


.fokl-modal-detail{

    margin:0;

    color:#526b5d !important;

    font-size:18px;

    line-height:1.83;

    font-weight:400;
}


/* HINT */

.fokl-modal-hint{

    margin-top:27px;

    padding:
        19px
        20px;

    border-left:
        4px solid
        var(--orange);

    background:#fff8ed;

    color:#675f56 !important;

    font-size:15px;

    line-height:1.65;
}


/* SYNONYMS */

.fokl-modal-synonyms{

    display:none;

    margin-top:23px;

    color:#788980;

    font-size:12px;

    line-height:1.55;
}


.fokl-modal-synonyms.is-visible{

    display:block;
}


.fokl-modal-synonyms strong{

    color:var(--dark);
}


/* ==========================================================
   RELATED
========================================================== */

.fokl-modal-related{

    display:none;

    margin-top:29px;

    padding-top:24px;

    border-top:
        1px solid
        var(--line);
}


.fokl-modal-related.is-visible{

    display:block;
}


.fokl-modal-related-title{

    display:block;

    margin-bottom:12px;

    color:var(--dark);

    font-size:13px;

    font-weight:700;
}


.fokl-modal-related-list{

    display:flex;

    flex-wrap:wrap;

    gap:8px;
}


.fokl-modal-related-button{

    min-height:39px;

    display:inline-flex;

    align-items:center;

    padding:
        7px
        12px !important;

    border:
        1px solid
        #d7e4db !important;

    border-radius:
        0 !important;

    background:#fff !important;

    color:var(--green) !important;

    font-size:11px !important;

    font-weight:650 !important;

    cursor:pointer;
}


.fokl-modal-related-button:hover{

    border-color:
        var(--orange) !important;

    color:
        var(--orange-dark) !important;
}


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

.fokl-modal-footer{

    display:flex;

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

    gap:25px;

    margin-top:32px;

    padding-top:26px;

    border-top:
        1px solid
        var(--line);
}


.fokl-modal-footer-copy{

    color:#74867c;

    font-size:13px;

    line-height:1.55;
}


.fokl-modal-footer-copy strong{

    display:block;

    margin-bottom:4px;

    color:var(--dark);

    font-size:15px;
}


.fokl-modal-cta{

    flex:0 0 auto;

    min-width:180px;
    min-height:55px;

    display:inline-flex;

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

    gap:11px;

    padding:
        0
        19px;

    background:
        var(--green) !important;

    border:
        1px solid
        var(--green) !important;

    color:#fff !important;

    text-decoration:none !important;

    font-size:13px;

    font-weight:700;
}


.fokl-modal-cta,
.fokl-modal-cta:visited,
.fokl-modal-cta:hover,
.fokl-modal-cta *{

    color:#fff !important;
}


.fokl-modal-cta:hover{

    background:
        #286d46 !important;

    border-color:
        #286d46 !important;
}


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

@media(max-width:950px){

    .fokl-inner{

        padding:
            60px
            23px
            85px;
    }


    .fokl-letter-nav{
        top:96px;
    }


    .fokl-letter-section{

        grid-template-columns:
            78px
            minmax(0,1fr);

        gap:20px;

        scroll-margin-top:
            155px;
    }


    .fokl-letter-big{

        top:160px;

        font-size:60px;
    }


    .fokl-letter-terms{

        grid-template-columns:1fr;
    }


    .fokl-card:nth-child(odd){
        border-right:0;
    }

}


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

@media(max-width:650px){

    .fokl-inner{

        padding:
            42px
            16px
            70px;
    }


    .fokl-head{
        margin-bottom:36px;
    }


    .fokl-title{

        font-size:41px;

        letter-spacing:-1.8px;
    }


    .fokl-title span{

        display:inline-block;

        margin:
            9px
            0
            0;

        font-size:.84em;
    }


    .fokl-intro{
        font-size:15px;
    }


    /* SEARCH */

    .fokl-search input{

        height:64px !important;

        line-height:64px !important;

        padding:
            0
            54px
            0
            72px !important;

        font-size:14px !important;
    }


    .fokl-search-label{
        left:15px;
    }


    /* CATEGORIES */

    .fokl-categories{

        flex-wrap:nowrap;

        overflow-x:auto;

        padding-bottom:10px;

        scrollbar-width:none;
    }


    .fokl-categories::-webkit-scrollbar{
        display:none;
    }


    .fokl-filter{
        flex:0 0 auto;
    }


    /* A-Z */

    .fokl-letter-nav{

        position:relative;

        top:auto;

        flex-wrap:nowrap;

        overflow-x:auto;

        margin-bottom:30px;

        padding:
            10px
            7px;

        scrollbar-width:none;
    }


    .fokl-letter-nav::-webkit-scrollbar{
        display:none;
    }


    .fokl-letter-nav-title{

        flex:0 0 auto;

        margin:
            0
            7px;
    }


    .fokl-letter-jump{
        flex:0 0 34px;
    }


    /* GROUP */

    .fokl-letter-section{

        display:block;

        padding:
            31px
            0
            38px;

        scroll-margin-top:
            105px;
    }


    .fokl-letter-head{
        margin-bottom:11px;
    }


    .fokl-letter-big{

        position:relative;

        top:auto;

        font-size:50px;
    }


    /* TERMS */

    .fokl-card-head{

        min-height:140px;

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

        gap:15px;

        padding:
            23px
            5px !important;
    }


    .fokl-card-title{
        font-size:21px !important;
    }


    .fokl-card-short{
        font-size:14px !important;
    }


    .fokl-card-open{

        font-size:0;
    }


    .fokl-card-open::after{

        content:"→";

        font-size:18px;
    }


    /* BOTTOM */

    .fokl-bottom{

        grid-template-columns:1fr;

        gap:20px;
    }


    .fokl-bottom-btn{

        width:100%;

        justify-content:space-between;
    }


    /* MODAL */

    .fokl-modal{

        align-items:flex-end;

        padding:
            12px
            12px
            0;
    }


    .fokl-modal-panel{

        width:100%;

        max-height:89vh;

        border-radius:
            18px
            18px
            0
            0;
    }


    .fokl-modal-head{

        padding:
            33px
            22px
            22px;
    }


    .fokl-modal-title{

        padding-right:
            42px !important;

        font-size:
            34px !important;
    }


    .fokl-modal-close{

        width:40px !important;
        height:40px !important;

        right:12px;
        top:12px;
    }


    .fokl-modal-body{

        padding:
            5px
            22px
            32px;
    }


    .fokl-modal-question{
        font-size:20px;
    }


    .fokl-modal-answer{
        font-size:15px;
    }


    .fokl-modal-detail{

        font-size:16px;

        line-height:1.75;
    }


    .fokl-modal-footer{

        flex-direction:column;

        align-items:stretch;
    }


    .fokl-modal-cta{

        width:100%;

        min-width:0;
    }

}