/* ==========================================================
   FO KFZ ANFRAGE – FRONTEND
========================================================== */
.fokfz-section{
    --green:#337e53;
    --dark:#153d2a;
    --text:#687a70;
    --muted:#89978f;
    --line:#dce8e1;
    --soft:#f3f8f5;
    --head:#f9fcfa;
    --e-global-color-primary:#337e53 !important;
    --e-global-color-accent:#337e53 !important;
    position:relative;
    left:50%;
    width:100vw;
    margin-left:-50vw;
    overflow:hidden;
    background:
        radial-gradient(circle at 5% 8%,rgba(51,126,83,.07),transparent 27%),
        radial-gradient(circle at 96% 92%,rgba(51,126,83,.045),transparent 28%),
        #fff;
    font-family:"Inter",Arial,sans-serif;
}
.fokfz-section *,
.fokfz-section *::before,
.fokfz-section *::after{box-sizing:border-box;}
.fokfz-section button,
.fokfz-section input,
.fokfz-section textarea,
.fokfz-section select{font-family:"Inter",Arial,sans-serif;}
.fokfz-section button{appearance:none;-webkit-appearance:none;outline:none;}
.fokfz-inner{position:relative;z-index:2;width:100%;max-width:1350px;margin:0 auto;padding:100px 30px 110px;}

/* intro */
.fokfz-intro{max-width:820px;margin:0 auto 44px;text-align:center;}
.fokfz-eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;color:var(--green);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.fokfz-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(51,126,83,.09);}
.fokfz-title{margin:0 0 16px !important;padding:0 !important;color:var(--dark);font-family:"Inter Tight",sans-serif;font-size:clamp(38px,3.5vw,50px);line-height:1.03;font-weight:600;letter-spacing:-2.3px;}
.fokfz-marker{position:relative;z-index:1;isolation:isolate;display:inline-block;margin:9px 0 0 6px;padding:2px 12px 6px;color:#fff;font-family:"Atma",cursive;font-size:.93em;font-weight:600;line-height:1;transform:rotate(-1deg);}
.fokfz-marker::before{content:"";position:absolute;z-index:-1;inset:1px -8px;background:var(--green);clip-path:polygon(0 7%,31% 2%,68% 5%,100% 1%,99% 90%,66% 95%,31% 91%,0 98%);transform:scaleX(0);transform-origin:left center;}
.fokfz-section.is-visible .fokfz-marker::before{animation:fokfz-marker .85s cubic-bezier(.2,.8,.2,1) .35s forwards;}
@keyframes fokfz-marker{to{transform:scaleX(1);}}
.fokfz-intro-copy{max-width:650px;margin:0 auto;color:var(--text);font-size:15px;line-height:1.7;}

/* app */
.fokfz-app{overflow:hidden;border:1px solid rgba(51,126,83,.14);border-radius:27px;background:#fff;box-shadow:0 28px 72px rgba(31,69,46,.08);}
.fokfz-app-head{padding:20px 31px 22px;border-bottom:1px solid var(--line);background:var(--head);}
.fokfz-head-row{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:29px;}
.fokfz-brand{display:flex;align-items:center;gap:13px;}
.fokfz-brand-icon{width:48px;height:48px;flex:0 0 48px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--green);color:#fff;font-size:16px;box-shadow:0 9px 20px rgba(51,126,83,.14);}
.fokfz-brand-small{display:block;margin-bottom:2px;color:var(--green);font-size:9px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;}
.fokfz-brand-title{display:block;color:var(--dark);font-family:"Inter Tight",sans-serif;font-size:20px;font-weight:600;letter-spacing:-.5px;}
.fokfz-count{color:var(--green);font-family:"Inter Tight",sans-serif;font-size:24px;font-weight:600;}
.fokfz-count small{color:#98a49d;font-family:"Inter",sans-serif;font-size:10px;}

/* progress */
.fokfz-progress{position:relative;padding:0 15px 5px;overflow:hidden;}
.fokfz-progress-line{position:absolute;z-index:0;left:8%;right:8%;top:24px;height:3px;border-radius:999px;background:#e1eae4;}
.fokfz-progress-fill{width:0;height:100%;border-radius:inherit;background:var(--green);transition:width .5s cubic-bezier(.2,.75,.2,1);}
.fokfz-steps{--step-count:5;position:relative;z-index:2;display:grid;grid-template-columns:repeat(var(--step-count),minmax(0,1fr));}
.fokfz-step{display:flex;flex-direction:column;align-items:center;gap:9px;color:#9aa69f;text-align:center;}
.fokfz-step-circle{position:relative;z-index:2;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #d9e5de;border-radius:50%;background:#fff;color:#9aa69f;font-size:15px;box-shadow:0 0 0 8px var(--head);transition:.3s ease;}
.fokfz-step.is-done .fokfz-step-circle,.fokfz-step.is-active .fokfz-step-circle{border-color:var(--green);background:var(--green);color:#fff;}
.fokfz-step.is-active .fokfz-step-circle{transform:scale(1.08);box-shadow:0 0 0 8px var(--head),0 8px 18px rgba(51,126,83,.16);}
.fokfz-step-label{color:inherit;font-size:10px;font-weight:600;white-space:nowrap;}
.fokfz-step.is-done .fokfz-step-label{color:#567365;}
.fokfz-step.is-active .fokfz-step-label{color:var(--green);}

/* body/pages */
.fokfz-body{min-height:620px;padding:43px 46px 34px;background:#fff;}
.fokfz-page{display:none;max-width:960px;margin:0 auto;}
.fokfz-page.is-active{display:block;animation:fokfz-page-in .38s cubic-bezier(.2,.75,.2,1) both;}
@keyframes fokfz-page-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.fokfz-page-head{max-width:790px;margin:0 auto 32px;text-align:center;}
.fokfz-page-kicker{display:inline-flex;align-items:center;gap:7px;margin-bottom:13px;padding:7px 10px;border-radius:999px;background:rgba(51,126,83,.075);color:var(--green);font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;}
.fokfz-page-title{margin:0 0 10px !important;padding:0 !important;color:var(--dark);font-family:"Atma",cursive;font-size:clamp(26px,2.7vw,34px);line-height:1.08;font-weight:700;}
.fokfz-page-copy{margin:0;color:var(--text);font-size:14px;line-height:1.65;}

/* large choices */
.fokfz-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;max-width:790px;margin:0 auto;}
.fokfz-choice{position:relative;min-height:175px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:22px;border:1px solid #dce7e0 !important;border-radius:18px;background:#fafcfb !important;color:var(--dark) !important;text-align:left;cursor:pointer;box-shadow:none !important;transition:.22s ease;}
.fokfz-choice::after{content:"\f00c";position:absolute;right:16px;top:16px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--green);color:#fff;font-family:"Font Awesome 6 Free";font-size:9px;font-weight:900;opacity:0;transform:scale(.6);transition:.2s ease;}
@media (hover:hover) and (pointer:fine){.fokfz-choice:hover{transform:translateY(-4px);border-color:rgba(51,126,83,.30) !important;background:#fff !important;box-shadow:0 14px 30px rgba(31,68,45,.06) !important;}}
.fokfz-choice.is-selected{border-color:var(--green) !important;background:rgba(51,126,83,.055) !important;box-shadow:0 0 0 1px rgba(51,126,83,.025) !important;}
.fokfz-choice.is-selected::after{opacity:1;transform:scale(1);}
.fokfz-choice-icon{width:59px;height:59px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:rgba(51,126,83,.09);color:var(--green);font-size:21px;transition:.22s ease;}
.fokfz-choice.is-selected .fokfz-choice-icon{background:var(--green);color:#fff;transform:rotate(-3deg) scale(1.04);}
.fokfz-choice-title{display:block;margin-bottom:5px;color:var(--dark);font-family:"Inter Tight",sans-serif;font-size:18px;font-weight:600;line-height:1.25;}
.fokfz-choice-text{display:block;color:#7b8d83;font-size:12px;line-height:1.5;}
/* robust wrapping against Elementor/global button styles */
.fokfz-choice{white-space:normal !important;overflow:hidden;}
.fokfz-choice > span:last-child{display:block;min-width:0;width:100%;max-width:100%;padding-right:30px;}
.fokfz-choice-title,.fokfz-choice-text{width:100%;max-width:100%;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;word-break:normal !important;overflow-wrap:anywhere;}
.fokfz-sub-option,.fokfz-list-choice{white-space:normal !important;}
.fokfz-sub-option > span,.fokfz-list-choice > span{min-width:0;white-space:normal !important;overflow-wrap:anywhere;}


/* sub choice */
.fokfz-subchoice{max-width:790px;margin:20px auto 0;padding:20px;border:1px solid rgba(51,126,83,.13);border-radius:16px;background:rgba(51,126,83,.035);display:none;}
.fokfz-subchoice.is-visible{display:block;animation:fokfz-sub-in .35s ease both;}
@keyframes fokfz-sub-in{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:translateY(0);}}
.fokfz-subchoice-title{display:block;margin-bottom:14px;color:var(--dark);font-family:"Inter Tight",sans-serif;font-size:17px;font-weight:600;}
.fokfz-subchoice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.fokfz-sub-option{min-height:61px;display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid #dce7e0 !important;border-radius:11px;background:#fff !important;color:var(--dark) !important;text-align:left;cursor:pointer;transition:.2s ease;}
.fokfz-sub-option i{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(51,126,83,.08);color:var(--green);}
.fokfz-sub-option.is-selected{border-color:var(--green) !important;background:var(--green) !important;color:#fff !important;}
.fokfz-sub-option.is-selected i{background:rgba(255,255,255,.16);color:#fff;}

/* planned timing choices */
.fokfz-list-choices{display:flex;flex-direction:column;gap:10px;max-width:700px;margin:0 auto;}
.fokfz-list-choice{min-height:65px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 17px;border:1px solid #dce7e0 !important;border-radius:12px;background:#fafcfb !important;color:var(--dark) !important;font-size:13px;font-weight:600;text-align:left;cursor:pointer;transition:.22s ease;}
.fokfz-list-choice i{width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(51,126,83,.08);color:var(--green);font-size:9px;}
.fokfz-list-choice:hover{border-color:rgba(51,126,83,.35) !important;background:#fff !important;transform:translateX(3px);}
.fokfz-list-choice.is-selected{border-color:var(--green) !important;background:rgba(51,126,83,.06) !important;box-shadow:0 0 0 1px rgba(51,126,83,.03) !important;}
.fokfz-list-choice.is-selected i{background:var(--green);color:#fff;}
.fokfz-tip{max-width:700px;margin:22px auto 0;padding:14px 16px;display:flex;align-items:flex-start;gap:9px;border-radius:11px;background:rgba(51,126,83,.055);color:#63796d;font-size:11px;line-height:1.55;}
.fokfz-tip i{margin-top:3px;color:var(--green);}

/* owned vehicle */
.fokfz-owned-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);gap:22px;align-items:start;}
.fokfz-registration-image{overflow:hidden;border:1px solid #dce7e0;border-radius:16px;background:#fafcfb;box-shadow:0 13px 30px rgba(31,68,45,.045);}
.fokfz-registration-image img{display:block;width:100%;height:auto;max-width:none;}
.fokfz-image-caption{display:flex;align-items:center;gap:8px;padding:11px 13px;border-top:1px solid #e1eae4;color:#71847a;font-size:10px;line-height:1.45;}
.fokfz-image-caption i{color:var(--green);}

/* fields */
.fokfz-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 15px;max-width:820px;margin:0 auto;}
.fokfz-fields--vehicle{grid-template-columns:repeat(2,minmax(0,1fr));}
.fokfz-field{min-width:0;}
.fokfz-field--full{grid-column:1/-1;}
.fokfz-label{display:block;margin-bottom:8px;color:var(--dark);font-size:12px;font-weight:600;}
.fokfz-optional{font-weight:400;color:#8b9991;}
.fokfz-help{display:block;margin-top:7px;color:#8e9b94;font-size:10px;line-height:1.45;}
.fokfz-help i{color:var(--green);margin-right:4px;}
.fokfz-input-wrap{position:relative;}
.fokfz-input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--green);font-size:13px;pointer-events:none;}
.fokfz-input,.fokfz-select,.fokfz-textarea{width:100% !important;border:1px solid #d9e4dd !important;border-radius:11px !important;background:#fff !important;color:var(--dark) !important;outline:none !important;box-shadow:none !important;transition:border-color .2s ease,box-shadow .2s ease;}
.fokfz-input,.fokfz-select{min-height:56px;padding:0 15px !important;font-size:13px !important;}
.fokfz-input.has-icon{padding-left:43px !important;}
.fokfz-textarea{min-height:110px;resize:vertical;padding:14px 15px !important;font-size:13px !important;line-height:1.5;}
.fokfz-input:focus,.fokfz-select:focus,.fokfz-textarea:focus{border-color:var(--green) !important;box-shadow:0 0 0 3px rgba(51,126,83,.07) !important;}
.fokfz-input::placeholder,.fokfz-textarea::placeholder{color:#b3beb8;}

/* upload */
.fokfz-upload{position:relative;min-height:130px;display:flex;align-items:center;justify-content:center;padding:20px;border:1px dashed #cbdad1;border-radius:13px;background:#fbfcfb;text-align:center;cursor:pointer;transition:.2s ease;}
.fokfz-upload:hover,.fokfz-upload.is-dragging{border-color:var(--green);background:rgba(51,126,83,.035);}
.fokfz-upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.fokfz-upload-icon{width:42px;height:42px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(51,126,83,.08);color:var(--green);font-size:14px;}
.fokfz-upload strong{display:block;margin-bottom:4px;color:var(--dark);font-size:12px;}
.fokfz-upload small{color:#9aa69f;font-size:9px;}
.fokfz-upload-name{display:block;margin-top:7px;color:var(--green);font-size:10px;font-weight:600;}

/* age */
.fokfz-age{display:grid;grid-template-columns:46px 1fr 46px;gap:7px;padding:6px;border:1px solid #d9e4dd;border-radius:11px;background:#fff;}
.fokfz-age-btn{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:0 !important;border-radius:9px;background:var(--soft) !important;color:var(--dark) !important;cursor:pointer;font-size:16px;transition:.2s ease;}
.fokfz-age-btn:hover{background:rgba(51,126,83,.12) !important;color:var(--green) !important;}
.fokfz-age-value{display:flex;align-items:center;justify-content:center;color:var(--dark);font-family:"Inter Tight",sans-serif;font-size:18px;font-weight:600;}

/* dates/checks */
.fokfz-date-grid{display:grid;grid-template-columns:.65fr 1.3fr .85fr;gap:9px;}
.fokfz-checks{display:flex;flex-direction:column;gap:10px;}
.fokfz-check{display:flex;align-items:flex-start;gap:10px;color:#566d60;font-size:12px;line-height:1.5;}
.fokfz-check input{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:var(--green);}
.fokfz-check a{color:var(--dark);text-decoration:underline;}

/* contact note */
.fokfz-contact-note{display:grid;grid-template-columns:44px 1fr;gap:12px;margin-bottom:4px;padding:16px;border:1px solid rgba(51,126,83,.12);border-radius:13px;background:rgba(51,126,83,.045);}
.fokfz-contact-note-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#fff;color:var(--green);font-size:14px;}
.fokfz-contact-note strong{display:block;margin-bottom:5px;color:var(--dark);font-size:12px;}
.fokfz-contact-note ol{margin:0 0 0 18px;padding:0;color:#708278;font-size:10px;line-height:1.7;}

/* error */
.fokfz-error{display:none;max-width:820px;margin:15px auto 0;padding:11px 13px;border-radius:9px;background:#fff4f2;color:#a23d33;font-size:10px;}
.fokfz-error.is-visible{display:flex;align-items:center;gap:8px;}

/* nav/trust */
.fokfz-nav{max-width:960px;margin:33px auto 0;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);}
.fokfz-back{min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border:1px solid #dce6df !important;border-radius:10px;background:#fff !important;color:var(--dark) !important;font-size:11px;font-weight:600;cursor:pointer;}
.fokfz-next{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:6px 7px 6px 19px;border:1px solid var(--green) !important;border-radius:11px;background:var(--green) !important;color:#fff !important;font-size:11px;font-weight:600;cursor:pointer;transition:.22s ease;margin-left:auto;}
.fokfz-next:disabled{opacity:.30;cursor:not-allowed;}
.fokfz-next:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(51,126,83,.16);}
.fokfz-next-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,.14);font-size:9px;}
.fokfz-trust{max-width:960px;margin:17px auto 0;display:flex;align-items:center;justify-content:center;gap:19px;flex-wrap:wrap;color:#7d8e84;font-size:9px;}
.fokfz-trust span{display:inline-flex;align-items:center;gap:6px;}
.fokfz-trust i{color:var(--green);}

/* success */
.fokfz-success{display:none;max-width:720px;margin:25px auto;text-align:center;padding:44px 30px;border:1px solid rgba(51,126,83,.14);border-radius:19px;background:var(--soft);}
.fokfz-success.is-visible{display:block;animation:fokfz-page-in .4s ease both;}
.fokfz-success-icon{width:67px;height:67px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border-radius:20px;background:var(--green);color:#fff;font-size:22px;box-shadow:0 13px 28px rgba(51,126,83,.16);}
.fokfz-success-kicker{display:block;margin-bottom:7px;color:var(--green);font-size:9px;font-weight:700;letter-spacing:.8px;}
.fokfz-success h3{margin:0 0 8px !important;color:var(--dark);font-family:"Atma",cursive;font-size:29px;font-weight:700;}
.fokfz-success p{max-width:520px;margin:0 auto;color:var(--text);font-size:12px;line-height:1.6;}

/* entrance */
.fokfz-intro,.fokfz-app{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.75,.2,1);}
.fokfz-section.is-visible .fokfz-intro,.fokfz-section.is-visible .fokfz-app{opacity:1;transform:translateY(0);}
.fokfz-section.is-visible .fokfz-app{transition-delay:.12s;}

@media(max-width:980px){
    .fokfz-owned-grid{grid-template-columns:1fr;}
    .fokfz-registration-image{max-width:700px;margin:0 auto;}
    .fokfz-fields--vehicle{max-width:700px;width:100%;}
}

@media(max-width:850px){
    .fokfz-body{padding:35px 25px 28px;}
    .fokfz-fields{grid-template-columns:1fr;}
    .fokfz-field--full{grid-column:auto;}
}

@media(max-width:600px){
    .fokfz-inner{padding:68px 18px 72px;}
    .fokfz-intro{margin-bottom:34px;text-align:left;}
    .fokfz-title{font-size:34px;letter-spacing:-1.3px;}
    .fokfz-marker{display:inline-block;margin:9px 0 0;font-size:.85em;}
    .fokfz-intro-copy{margin:0;font-size:14px;}
    .fokfz-app{border-radius:19px;}
    .fokfz-app-head{padding:16px 16px 18px;}
    .fokfz-brand-icon{width:42px;height:42px;flex-basis:42px;}
    .fokfz-brand-title{font-size:16px;}
    .fokfz-count{font-size:19px;}
    .fokfz-progress{overflow-x:auto;padding-bottom:7px;scrollbar-width:none;}
    .fokfz-progress::-webkit-scrollbar{display:none;}
    .fokfz-steps{min-width:560px;}
    .fokfz-progress-line{left:54px;right:54px;}
    .fokfz-body{min-height:0;padding:28px 16px 23px;}
    .fokfz-page-head{margin-bottom:24px;text-align:left;}
    .fokfz-page-title{font-size:27px;}
    .fokfz-choice-grid,.fokfz-subchoice-grid{grid-template-columns:1fr;}
    .fokfz-choice{min-height:135px;}
    .fokfz-date-grid{grid-template-columns:.7fr 1.1fr .9fr;}
    .fokfz-nav{margin-top:25px;}
    .fokfz-trust{justify-content:flex-start;}
    .fokfz-registration-image{border-radius:12px;}
}

@media(prefers-reduced-motion:reduce){
    .fokfz-intro,.fokfz-app{opacity:1 !important;transform:none !important;transition:none !important;}
    .fokfz-marker::before{transform:scaleX(1) !important;animation:none !important;}
}


/* ==========================================================
   FO KFZ GREEN ORANGE START
   CI 2026
   Grün   = Hauptaktion / abgeschlossen
   Orange = aktive Auswahl / aktueller Schritt
========================================================== */


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

.fokfz-section{

    --green:#337e53;
    --dark:#153d2a;
    --text:#687a70;
    --muted:#89978f;
    --line:#dce8e1;

    --soft:#f3f8f5;
    --head:#f9fcfa;

    --orange:#f59b18;
    --orange-dark:#845000;
    --orange-soft:#fff2df;

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

    background:#ffffff !important;
}


/* ==========================================================
   EYEBROW / MARKER
========================================================== */

.fokfz-eyebrow::before{

    background:#337e53 !important;

    box-shadow:
        0 0 0 5px
        rgba(51,126,83,.09) !important;
}


/*
   Marker bewusst Orange.
*/
.fokfz-marker::before{

    background:#f59b18 !important;
}


/* ==========================================================
   APP
========================================================== */

.fokfz-app{

    border-color:
        rgba(51,126,83,.15) !important;

    background:#ffffff !important;

    box-shadow:
        0 28px 72px
        rgba(31,69,46,.075) !important;
}


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

.fokfz-app-head{

    background:#f9fcfa !important;

    border-bottom-color:#dce8e1 !important;
}


.fokfz-brand-icon{

    background:#337e53 !important;

    color:#ffffff !important;
}


/* ==========================================================
   PROGRESS LINE
========================================================== */

.fokfz-progress-line{

    background:#e1eae4 !important;
}


.fokfz-progress-fill{

    background:#337e53 !important;
}


/* ==========================================================
   STEPS
========================================================== */

/*
   Noch nicht erreicht
*/
.fokfz-step-circle{

    border-color:#d9e5de !important;

    background:#ffffff !important;

    color:#99a69f !important;
}


/*
   Bereits abgeschlossen = Grün
*/
.fokfz-step.is-done
.fokfz-step-circle{

    border-color:#337e53 !important;

    background:#337e53 !important;

    color:#ffffff !important;

    box-shadow:
        0 0 0 8px
        #f9fcfa !important;
}


.fokfz-step.is-done
.fokfz-step-label{

    color:#567365 !important;
}


/*
   AKTUELLER Schritt = Orange
*/
.fokfz-step.is-active
.fokfz-step-circle{

    border-color:#f59b18 !important;

    background:#f59b18 !important;

    color:#ffffff !important;

    transform:
        scale(1.10) !important;

    box-shadow:
        0 0 0 8px
        #f9fcfa,
        0 9px 20px
        rgba(245,155,24,.20) !important;
}


.fokfz-step.is-active
.fokfz-step-label{

    color:#845000 !important;

    font-weight:700 !important;
}


/* ==========================================================
   PAGE KICKER
========================================================== */

.fokfz-page-kicker{

    border:
        1px solid
        rgba(245,155,24,.18) !important;

    background:#fff2df !important;

    color:#845000 !important;
}


.fokfz-page-kicker i{

    color:#f59b18 !important;
}


/* ==========================================================
   LARGE CHOICE CARDS
========================================================== */

.fokfz-choice{

    border-color:#dce7e0 !important;

    background:#ffffff !important;

    color:#153d2a !important;
}


@media (hover:hover) and (pointer:fine){

    .fokfz-choice:hover{

        border-color:
            rgba(245,155,24,.40) !important;

        background:#fffdf9 !important;

        box-shadow:
            0 14px 30px
            rgba(31,68,45,.055) !important;
    }

}


/* Default icon = Grün */

.fokfz-choice-icon{

    background:#edf5f0 !important;

    color:#337e53 !important;
}


/* Check oben rechts = Orange */

.fokfz-choice::after{

    background:#f59b18 !important;

    color:#ffffff !important;
}


/* Ausgewählt = Orange */

.fokfz-choice.is-selected{

    border-color:#f59b18 !important;

    background:#fffaf3 !important;

    box-shadow:
        0 0 0 1px
        rgba(245,155,24,.08),
        0 12px 28px
        rgba(31,68,45,.04) !important;
}


.fokfz-choice.is-selected
.fokfz-choice-icon{

    background:#f59b18 !important;

    color:#ffffff !important;

    transform:
        rotate(-3deg)
        scale(1.04) !important;
}


/* ==========================================================
   SUBCHOICE BOX
========================================================== */

.fokfz-subchoice{

    border-color:
        rgba(245,155,24,.24) !important;

    background:#fffaf3 !important;
}


.fokfz-sub-option{

    border-color:#dce7e0 !important;

    background:#ffffff !important;

    color:#153d2a !important;
}


.fokfz-sub-option i{

    background:#edf5f0 !important;

    color:#337e53 !important;
}


.fokfz-sub-option:hover{

    border-color:
        rgba(245,155,24,.40) !important;
}


/*
   Unterauswahl aktiv = Orange
*/

.fokfz-sub-option.is-selected{

    border-color:#f59b18 !important;

    background:#f59b18 !important;

    color:#4b3000 !important;
}


.fokfz-sub-option.is-selected i{

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

    color:#4b3000 !important;
}


/* ==========================================================
   PLANNED TIMING LIST
========================================================== */

.fokfz-list-choice{

    border-color:#dce7e0 !important;

    background:#ffffff !important;

    color:#153d2a !important;
}


.fokfz-list-choice i{

    background:#edf5f0 !important;

    color:#337e53 !important;
}


.fokfz-list-choice:hover{

    border-color:
        rgba(245,155,24,.40) !important;

    background:#fffaf3 !important;
}


.fokfz-list-choice.is-selected{

    border-color:#f59b18 !important;

    background:#fff2df !important;

    color:#5b3900 !important;

    box-shadow:
        0 0 0 1px
        rgba(245,155,24,.05) !important;
}


.fokfz-list-choice.is-selected i{

    background:#f59b18 !important;

    color:#ffffff !important;
}


/* ==========================================================
   TIPS
========================================================== */

.fokfz-tip{

    border:
        1px solid
        rgba(245,155,24,.20) !important;

    background:#fffaf3 !important;

    color:#746b5f !important;
}


.fokfz-tip i{

    color:#f59b18 !important;
}


/* ==========================================================
   FAHRZEUGSCHEIN
========================================================== */

.fokfz-registration-image{

    border-color:
        rgba(51,126,83,.17) !important;

    background:#ffffff !important;
}


.fokfz-image-caption{

    background:#f7faf8 !important;

    border-top-color:#dce8e1 !important;
}


.fokfz-image-caption i{

    color:#337e53 !important;
}


/* ==========================================================
   INPUTS
========================================================== */

.fokfz-input,
.fokfz-select,
.fokfz-textarea{

    border-color:#d9e4dd !important;

    background:#ffffff !important;

    color:#153d2a !important;
}


/*
   Focus bleibt Grün.
   Dadurch bleibt Formulareingabe ruhig.
*/

.fokfz-input:focus,
.fokfz-select:focus,
.fokfz-textarea:focus{

    border-color:#337e53 !important;

    box-shadow:
        0 0 0 3px
        rgba(51,126,83,.07) !important;
}


/* ==========================================================
   UPLOAD
========================================================== */

.fokfz-upload{

    border-color:#cbdad1 !important;

    background:#fbfcfb !important;
}


.fokfz-upload:hover,
.fokfz-upload.is-dragging{

    border-color:#f59b18 !important;

    background:#fffaf3 !important;
}


.fokfz-upload-icon{

    background:#fff2df !important;

    color:#f59b18 !important;
}


/* ==========================================================
   ALTER
========================================================== */

.fokfz-age{

    border-color:#d9e4dd !important;

    background:#ffffff !important;
}


.fokfz-age-btn{

    background:#f3f8f5 !important;

    color:#153d2a !important;
}


.fokfz-age-btn:hover{

    background:#fff2df !important;

    color:#f59b18 !important;
}


/* ==========================================================
   CHECKBOX
========================================================== */

.fokfz-check input{

    accent-color:#337e53 !important;
}


/* ==========================================================
   KONTAKT INFO
========================================================== */

.fokfz-contact-note{

    border-color:
        rgba(245,155,24,.22) !important;

    background:#fffaf3 !important;
}


.fokfz-contact-note-icon{

    background:#fff2df !important;

    color:#f59b18 !important;
}


/* ==========================================================
   BACK BUTTON
========================================================== */

.fokfz-back{

    border-color:#dce6df !important;

    background:#ffffff !important;

    color:#153d2a !important;
}


.fokfz-back:hover{

    border-color:#337e53 !important;

    color:#337e53 !important;
}


/* ==========================================================
   NEXT / SUBMIT
   IMMER GRÜN
========================================================== */

.fokfz-next{

    border-color:#337e53 !important;

    background:#337e53 !important;

    color:#ffffff !important;

    box-shadow:
        0 9px 22px
        rgba(51,126,83,.13) !important;
}


.fokfz-next:not(:disabled):hover{

    background:#337e53 !important;

    color:#ffffff !important;

    transform:
        translateY(-2px) !important;

    box-shadow:
        0 12px 27px
        rgba(51,126,83,.20) !important;
}


.fokfz-next-icon{

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

    color:#ffffff !important;
}


/* ==========================================================
   TRUST LINE
========================================================== */

.fokfz-trust i{

    color:#337e53 !important;
}


/* ==========================================================
   SUCCESS
========================================================== */

.fokfz-success{

    border-color:
        rgba(51,126,83,.17) !important;

    background:#f3f8f5 !important;
}


.fokfz-success-icon{

    background:#337e53 !important;

    color:#ffffff !important;

    box-shadow:
        0 13px 28px
        rgba(51,126,83,.16) !important;
}


/* ==========================================================
   LINKS
========================================================== */

.fokfz-section a:not(.fokfz-next):not(.fokfz-back){

    text-decoration-color:
        rgba(51,126,83,.45);
}


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

@media(max-width:600px){

    .fokfz-step.is-active
    .fokfz-step-circle{

        box-shadow:
            0 0 0 6px
            #f9fcfa,
            0 7px 16px
            rgba(245,155,24,.18) !important;
    }

}


/* FO KFZ GREEN ORANGE END */


/* ==========================================================
   FO KFZ – PROGRESS ICON CLIPPING FIX
========================================================== */

.fokfz-progress{
    padding:
        11px
        15px
        8px !important;

    overflow:visible !important;
}


/*
   Durch das zusätzliche Padding muss die Linie
   ebenfalls etwas weiter nach unten.
*/
.fokfz-progress-line{
    top:35px !important;
}


/*
   Aktives Icon bekommt genug Platz für
   Vergrößerung + Außenring.
*/
.fokfz-step.is-active
.fokfz-step-circle{
    position:relative !important;

    z-index:5 !important;

    transform:
        scale(1.10) !important;
}


/*
   Fertige Schritte ebenfalls sauber über der Linie.
*/
.fokfz-step.is-done
.fokfz-step-circle{
    position:relative !important;

    z-index:4 !important;
}


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

@media(max-width:600px){

    .fokfz-progress{
        padding:
            11px
            0
            8px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;
    }

    .fokfz-progress-line{
        top:35px !important;
    }

}


/* FO KFZ PROGRESS ICON CLIPPING FIX END */