/* ---------------- LOGIN POPUP ---------------- */
.b2b-login-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;

    background:rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);

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

    z-index:999999;
}

/* 🔒 verhindert Scroll + Hintergrundinteraktion */
body.b2b-app-locked{
    overflow:hidden;
    height:100vh;
}

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

.b2b-login-modal{
    background:#fff;
    padding:28px;
    border-radius:16px;
    width:320px;

    box-shadow:0 20px 60px rgba(0,0,0,0.25);

    animation:fadeIn .2s ease;
}

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

.b2b-login-modal input{
    width:100%;
    margin-bottom:12px;
    padding:10px 12px;

    border:1px solid #e5e7eb;
    border-radius:10px;

    font-size:14px;
    outline:none;
}

.b2b-login-modal input:focus{
    border-color:#0e71db;
    box-shadow:0 0 0 3px rgba(14,113,219,0.15);
}

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

.b2b-login-modal button{
    width:100%;
    background:#0e71db;
    color:#fff;

    border:none;
    padding:12px;
    border-radius:10px;

    font-weight:600;
    cursor:pointer;

    transition:0.2s ease;
}

.b2b-login-modal button:hover{
    opacity:0.9;
}

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

.b2b-login-sub{
    font-size:13px;
    margin-bottom:12px;
    color:#344054;
    line-height:1.4;
}

.b2b-register-link{
    color:#0e71db;
    font-weight:600;
    text-decoration:none;
}

.b2b-register-link:hover{
    text-decoration:underline;
}

/* =========================
   ANIMATION
   ========================= */

@keyframes fadeIn{
    from{
        transform:scale(0.96);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

.b2b-forgot-password{
    display:block;
    margin-top:10px;
    font-size:12px;
    color:#0e71db;
    text-decoration:none;
    text-align:center;
}

.b2b-forgot-password:hover{
    text-decoration:underline;
}


/* ---------------- FORM STYLING ---------------- */
.frm_form_field .schleifen-title{
    font-size:18px !important;
    font-weight:600 !important;
    color:#344054 !important;
    border-bottom:1px solid #eee;
    padding-bottom:6px;
    margin-bottom:12px;
}

.preis-anzeige{
    border: none;
    background: transparent;
    font-size:16px;
    font-weight:600;
    color:#344054;
}

.preis-haupt{
    font-size:16px;
    font-weight:600;
    color:#344054;
}

.preis-sub{
    font-size:12px;
    color:#344054;
    font-weight:400;
    margin-top:2px;
}

.preis-label{
    font-size:15px;
    color:#344054;
    font-weight:400;
}

.field-preis-hidden{
    display:none;
}


/* ---------------- GESAMTBOX ---------------- */
.gesamt-box{
    margin-top:15px;
    padding-top:10px;
    border-top:1px solid #ddd;
    max-width:320px;
}

.gesamt-title{
    font-size:18px;
    font-weight:600;
    margin-bottom:10px;
    margin-top:10px;
    color:#344054;
}

.gesamt-row0{
    margin-top:15px;
    font-weight:600;
    color:#344054;
    display:flex;
    justify-content:space-between;
    margin-bottom:4px;
}

.gesamt-row{
    display:flex;
    justify-content:space-between;
    margin-bottom:4px;
}

.zahlung-hinweis{
    padding-bottom:15px;
    font-weight:400;
    font-size:13px;
    color:#344054;
    margin-top:8px;
    border-bottom:1px solid #ddd;
}

@media (min-width: 768px){
    .zahlung-hinweis{
        font-size:15px;
    }
}

.gesamt-brutto{
    font-weight:700;
    border-top:1px solid #ddd;
    margin-top:8px;
    padding-top:8px;
    color:#344054;
    font-size:16px;
}


/* ---------------- VERSAND ---------------- */
.field-versand{
    margin-top:25px;
    padding-top:15px;
    border-top:1px solid #ddd;
    max-width:320px;
}

.field-versand .frm_primary_label{
    font-size:18px !important;
    font-weight:700 !important;
}


/* ---------------- FORM COLORS ---------------- */
.frm_forms input,
.frm_forms select,
.frm_forms textarea {
    color:#0e71db !important;
}

.frm_forms {
    position: relative;
    z-index: 1;
}

.frm_form_field {
    position: relative;
    z-index: 1;
}

.sku-hint {
     margin-top: 0px;
    margin-bottom: 0px;
    padding: 6px 10px;
    /*background: #fff3f3;
    border: 1px solid #ffb3b3;*/
    color: #a40000;
    font-size: 13px;
    border-radius: 4px;
}

.preis-info {
    font-size: 12px;
    margin-top: 3px;
    opacity: 0.85;
}

.preis-info--discount {
    color: #1b7f3a;
}

.preis-info--surcharge {
    color: #b35a00;
}

.preis-info--info {
    color: #555;
    font-style: italic;
}

.gesamt-brutto { margin-bottom: 16px;}

@media (max-width: 768px) {
    #field_liefertermin {
        width: 30%;
    }
}

#frm_desc_field_op2i8 {
    margin-bottom: 0px;
}

#frm_field_131_container {
    margin-bottom: 0px;
}

#frm_desc_field_27rzr {
    margin-bottom: 0px;
}

/*preview motiv*/


    .schleifentyp-row{
        display:flex !important;
        align-items:flex-start;
        gap:32px;
    }

    .schleifentyp-row .frm_field_139_container,
    .schleifentyp-row .motiv-preview-wrap{

        float:none !important;
        clear:none !important;
        width:auto !important;
        max-width:200px !important;
        margin-bottom:20px !important;
    }

    .schleifentyp-row .frm_field_139_container{
        flex:1;
    }

    .motiv-preview{
        line-height:1;
        margin-bottom:10px;
    }

    .motiv-preview-wrap{
        width:50px !important;
        flex-shrink:0;
    }

    .motiv-preview img{
        width:45%;
        display:block;
        border-radius:6px;
        box-shadow: 2px 4px 4px rgba(0,0,0,0.25)!important;
    }

    .motiv-hinweis {
    font-size: 11px;
    color: #666;
    max-width: 148px;
    line-height: 1.1;
    display: block;
    margin-top: 8px;
}


.b2b-app-home-btn{
    display:none;
}

@media (max-width:768px){

    .b2b-app-home-btn{
        display:flex;
        align-items:center;
        justify-content:center;

        width:44px;
        height:44px;

        border-radius:14px;
        background:#f5f7fa;

        text-decoration:none;
        font-size:20px;

        transform:translateY(15px);

        flex-shrink:0;
    }

}

.b2b-header-wrap{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    width:100%;

    margin:0;
    padding:0;

    text-align:left;
}

.b2b-header-text{
    width:100%;
    max-width:none;

    margin:0;
    padding:0;

    text-align:left;
}

.b2b-header-text h2{
    margin:0 0 8px 0;

    font-size:27px;
    color:#444;

    text-align:left;
}

.b2b-header-text span{
    font-size:15px;
    font-weight:600;
    color:#444;
    line-height:1.5;

    text-align:left;
}

.b2b-app-home-btn{
    display:none;
}

@media (max-width:768px){

    .b2b-app-home-btn{
        display:flex;
        align-items:center;
        justify-content:center;

        width:44px;
        height:44px;

        border-radius:14px;
        background:#f5f7fa;

        text-decoration:none;
        font-size:20px;

        flex-shrink:0;

        transform:translateY(-8px);
    }

}