/* ==========================================================
   BeKa Autoaufbereitung V2
   Datei: contact.css
   Bereich: Kontaktformular
========================================================== */

.beka-contact{
    position:relative;
    padding:110px 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(200,16,46,.10), transparent 34%),
        linear-gradient(180deg,#111216 0%,#0c0d10 100%);
    overflow:hidden;
}

.beka-contact-wrapper{
    width:min(100%,980px);
    margin:52px auto 0;
}

.beka-contact-form{
    padding:42px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:26px;
    background:rgba(25,27,32,.94);
    box-shadow:0 30px 80px rgba(0,0,0,.28);
}

.beka-form-section{
    margin:0;
    padding:0 0 38px;
    border:0;
}

.beka-form-section + .beka-form-section{
    padding-top:38px;
    border-top:1px solid rgba(255,255,255,.08);
}

.beka-form-section-heading{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin:0 0 26px;
    padding:0;
    border:0;
    width:100%;
}

.beka-form-step{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:12px;
    background:rgba(200,16,46,.12);
    border:1px solid rgba(200,16,46,.30);
    color:#ff5b75;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.05em;
}

.beka-form-section-heading h3,
.beka-form-heading-text strong{
    display:block;
    margin:1px 0 5px;
    color:#fff;
    font-size:1.2rem;
    font-weight:800;
}

.beka-form-section-heading p,
.beka-form-heading-text small{
    display:block;
    margin:0;
    color:#aeb0b7;
    font-size:.95rem;
    line-height:1.6;
}

.beka-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}

.beka-form-group{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.beka-form-group-full{
    width:100%;
}

.beka-form-group label{
    color:#f4f4f5;
    font-size:.94rem;
    font-weight:700;
}

.beka-form-optional{
    margin-left:5px;
    color:#858892;
    font-size:.78rem;
    font-weight:500;
}

.beka-form-group input,
.beka-form-group textarea{
    width:100%;
    border:1px solid rgba(255,255,255,.11);
    border-radius:14px;
    outline:none;
    background:#15171c;
    color:#fff;
    font:inherit;
    transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}

.beka-form-group input{
    min-height:52px;
    padding:0 16px;
}

.beka-form-group textarea{
    min-height:170px;
    padding:15px 16px;
    resize:vertical;
    line-height:1.65;
}

.beka-form-group input::placeholder,
.beka-form-group textarea::placeholder{
    color:#70737c;
}

.beka-form-group input:focus,
.beka-form-group textarea:focus{
    border-color:rgba(200,16,46,.75);
    background:#181a20;
    box-shadow:0 0 0 4px rgba(200,16,46,.10);
}

/* Leistungen */

.beka-contact-services{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.beka-contact-service-option{
    position:relative;
    display:block;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.beka-contact-service-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.beka-contact-service-box{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:58px;
    padding:13px 16px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:#15171c;
    color:#e7e7e9;
    font-weight:650;
    transition:.25s ease;
}

.beka-contact-service-check{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:25px;
    height:25px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:7px;
    color:transparent;
    font-size:.82rem;
    transition:.25s ease;
}

.beka-contact-service-option:hover .beka-contact-service-box{
    border-color:rgba(200,16,46,.40);
    background:#181a20;
}

.beka-contact-service-option input:checked + .beka-contact-service-box{
    border-color:#c8102e;
    background:rgba(200,16,46,.09);
    box-shadow:0 0 0 3px rgba(200,16,46,.08);
}

.beka-contact-service-option input:checked + .beka-contact-service-box .beka-contact-service-check{
    border-color:#c8102e;
    background:#c8102e;
    color:#fff;
}

.beka-contact-service-option input:focus-visible + .beka-contact-service-box{
    outline:2px solid #ff5b75;
    outline-offset:3px;
}

/* Upload */

.beka-upload-area{
    position:relative;
}

.beka-upload-label{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:210px;
    padding:28px;
    border:1.5px dashed rgba(255,255,255,.18);
    border-radius:18px;
    background:#15171c;
    text-align:center;
    cursor:pointer;
    transition:.25s ease;
    -webkit-tap-highlight-color:transparent;
}

.beka-upload-label:hover{
    border-color:rgba(200,16,46,.65);
    background:rgba(200,16,46,.045);
}

.beka-upload-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:50px;
    margin-bottom:14px;
    border-radius:50%;
    background:rgba(200,16,46,.13);
    color:#ff5b75;
    font-size:1.8rem;
    line-height:1;
}

.beka-upload-label strong{
    margin-bottom:7px;
    color:#fff;
    font-size:1.05rem;
}

.beka-upload-label span:not(.beka-upload-icon){
    color:#b7b9c0;
    line-height:1.5;
}

.beka-upload-label small{
    margin-top:5px;
    color:#777a84;
}

#vehicle-images{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
}

.beka-upload-feedback{
    margin-top:12px;
    color:#b9bbc2;
    font-size:.9rem;
    line-height:1.5;
}

.beka-upload-feedback.is-error{
    color:#ff6b7f;
}

.beka-upload-feedback.is-success{
    color:#d9d9dc;
}

.beka-upload-preview{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}

.beka-upload-preview-item{
    position:relative;
    aspect-ratio:1 / 1;
    overflow:hidden;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.09);
    background:#101116;
}

.beka-upload-preview-item img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

/* Nachricht */

.beka-message-meta{
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-top:2px;
    color:#737680;
    font-size:.78rem;
}

/* Datenschutz */

.beka-form-privacy{
    padding:26px 0;
    border-top:1px solid rgba(255,255,255,.08);
}

.beka-privacy-checkbox{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:#b8bac1;
    font-size:.9rem;
    line-height:1.65;
    cursor:pointer;
}

.beka-privacy-checkbox input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.beka-privacy-check{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:24px;
    height:24px;
    margin-top:1px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:7px;
    color:transparent;
    transition:.25s ease;
}

.beka-privacy-checkbox input:checked + .beka-privacy-check{
    border-color:#c8102e;
    background:#c8102e;
    color:#fff;
}

.beka-privacy-checkbox input:focus-visible + .beka-privacy-check{
    outline:2px solid #ff5b75;
    outline-offset:3px;
}

.beka-privacy-checkbox a{
    color:#ff5b75;
    text-decoration:underline;
    text-underline-offset:3px;
}

.beka-privacy-checkbox strong{
    color:#ff5b75;
}

/* Absenden */

.beka-form-submit{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding-top:4px;
}

.beka-contact-submit{
    border:0;
    cursor:pointer;
    min-height:52px;
    padding:14px 28px;
    font:700 1rem "Manrope",sans-serif;
    gap:10px;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}

.beka-form-submit p{
    margin:0;
    color:#858892;
    font-size:.84rem;
    line-height:1.55;
}

/* Honeypot: nicht sichtbar, aber im Formular vorhanden */

.beka-honeypot{
    position:absolute !important;
    left:-10000px !important;
    top:auto !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}

/* ==========================================================
   Mobile
========================================================== */

@media(max-width:768px){

    .beka-contact{
        padding:82px 0;
    }

    .beka-contact-wrapper{
        margin-top:36px;
    }

    .beka-contact-form{
        padding:24px 18px;
        border-radius:20px;
    }

    .beka-form-section{
        padding-bottom:30px;
    }

    .beka-form-section + .beka-form-section{
        padding-top:30px;
    }

    .beka-form-grid,
    .beka-contact-services{
        grid-template-columns:1fr;
    }

    .beka-form-section-heading{
        gap:12px;
        margin-bottom:22px;
    }

    .beka-form-step{
        width:38px;
        height:38px;
        border-radius:10px;
    }

    .beka-upload-label{
        min-height:185px;
        padding:24px 16px;
    }

    .beka-upload-preview{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .beka-contact-submit{
        width:100%;
        justify-content:center;
        min-height:52px;
    }
}

@media(max-width:420px){

    .beka-upload-preview{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .beka-message-meta{
        flex-direction:column;
        gap:3px;
    }
}


/* ==========================================================
   BeKa Anfrage V3
   FINALER FIX:
   - kompakter Header
   - roter Hinweisbanner
   - Leistungsauswahl / Checkbox-Karten
========================================================== */

/* ---------- Kompakter Anfrage-Header ---------- */

.beka-request-header-inner{
    min-height:68px;
}

.beka-request-logo img{
    display:block;
    width:auto;
    height:128px;
    max-width:auto;
    object-fit:contain;
}

.beka-request{
    min-height:auto;
    padding-top:70px;
}


/* ---------- Roter Hinweisbanner ---------- */

.beka-request-banner{
    position:relative;
    padding:30px 0;
    background:
        radial-gradient(circle at 50% 50%,rgba(255,70,90,.16),transparent 48%),
        linear-gradient(110deg,#830016 0%,#c8102e 50%,#850016 100%);
    border-bottom:1px solid rgba(255,90,110,.28);
}

.beka-request-banner-inner{
    text-align:center;
}

.beka-request-banner strong{
    display:block;
    margin:0;
    color:#fff;
    font-size:clamp(1.35rem,2.4vw,1.95rem);
    line-height:1.2;
    font-weight:800;
    letter-spacing:.025em;
    text-transform:uppercase;
}

.beka-request-banner p{
    max-width:720px;
    margin:9px auto 0;
    color:rgba(255,255,255,.88);
    font-size:1rem;
    line-height:1.6;
}


/* ---------- Fieldset vollständig neutralisieren ---------- */

fieldset.beka-service-selection{
    min-width:0;
    margin:0;
    border:0 !important;
}

fieldset.beka-service-selection > legend{
    float:none;
    width:100%;
    max-width:100%;
    margin:0 0 26px;
    padding:0;
    border:0;
}


/* ---------- Leistungskarten ---------- */

.beka-contact-services{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    width:100%;
}

.beka-contact-service-option{
    position:relative;
    display:block;
    width:100%;
    margin:0;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

/* Native Checkbox sicher ausblenden */
.beka-contact-service-option > input[type="checkbox"]{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    margin:0 !important;
    padding:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
}

/* Gesamte anklickbare Karte */
.beka-contact-service-box{
    display:flex !important;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:60px;
    padding:14px 16px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.11);
    border-radius:14px;
    background:#15171c;
    color:#ececef;
    font-weight:650;
    line-height:1.35;
    transition:
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

/* Eigenes Checkbox-Feld */
.beka-contact-service-check{
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 25px;
    width:25px;
    height:25px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.22);
    border-radius:7px;
    background:rgba(255,255,255,.025);
    color:transparent !important;
    font-size:.82rem;
    font-weight:800;
    line-height:1;
    transition:.22s ease;
}

.beka-contact-service-option:hover .beka-contact-service-box{
    border-color:rgba(200,16,46,.48);
    background:#191b20;
}

/* Ausgewählt */
.beka-contact-service-option > input[type="checkbox"]:checked + .beka-contact-service-box{
    border-color:#c8102e !important;
    background:rgba(200,16,46,.10) !important;
    box-shadow:0 0 0 3px rgba(200,16,46,.08);
}

.beka-contact-service-option > input[type="checkbox"]:checked
+ .beka-contact-service-box
.beka-contact-service-check{
    border-color:#c8102e !important;
    background:#c8102e !important;
    color:#fff !important;
}

.beka-contact-service-option > input[type="checkbox"]:focus-visible
+ .beka-contact-service-box{
    outline:2px solid #ff5b75;
    outline-offset:3px;
}


/* ---------- Mobile ---------- */

@media(max-width:768px){

    .beka-request-header-inner{
        min-height:62px;
    }

    .beka-request-logo img{
        height:46px;
        max-width:175px;
    }

    .beka-request{
        padding-top:54px;
    }

    .beka-request-banner{
        padding:24px 0;
    }

    .beka-request-banner p{
        max-width:92%;
        font-size:.92rem;
    }

    .beka-contact-services{
        grid-template-columns:1fr !important;
    }

    fieldset.beka-service-selection > legend{
        margin-bottom:22px;
    }
}

@media(max-width:430px){

    .beka-request-logo img{
        height:42px;
        max-width:145px;
    }

    .beka-request-back{
        padding:8px 10px;
        font-size:.78rem;
    }

    .beka-contact-service-box{
        min-height:58px;
        padding:13px 14px;
    }
}


/* ==========================================================
   BeKa Anfrage V4
   NUR: Anfrage-senden-Button im roten BeKa-Stil
========================================================== */

.beka-contact-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:auto;
    min-height:52px;
    padding:14px 28px;
    background:#e30b2d;
    color:#ffffff;
    border:1px solid #e30b2d;
    border-radius:999px;
    font-weight:700;
    font-size:1rem;
    cursor:pointer;
    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.beka-contact-submit:hover{
    background:#c8102e;
    border-color:#c8102e;
    transform:translateY(-1px);
}

.beka-contact-submit:disabled{
    opacity:.75;
    cursor:not-allowed;
    transform:none;
}

@media(max-width:768px){
    .beka-contact-submit{
        width:100%;
    }
}


/* ==========================================================
   BeKa Anfrage V5
   NUR: Zurück-zur-Startseite-Button
========================================================== */

.beka-request-back{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    min-height:42px;
    padding:9px 16px;

    background:#17191e;
    color:#ffffff;

    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;

    font-size:.9rem;
    font-weight:700;
    line-height:1;
    text-decoration:none;

    box-shadow:0 6px 18px rgba(0,0,0,.16);

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}

.beka-request-back span{
    color:#e30b2d;
    font-size:1.08rem;
    font-weight:800;
    line-height:1;
}

.beka-request-back:hover{
    background:rgba(200,16,46,.09);
    border-color:rgba(227,11,45,.55);
    color:#ffffff;
    transform:translateY(-1px);
    box-shadow:0 8px 22px rgba(0,0,0,.22);
}

.beka-request-back:focus-visible{
    outline:2px solid #e30b2d;
    outline-offset:3px;
}

@media(max-width:768px){
    .beka-request-back{
        min-height:40px;
        padding:8px 13px;
        gap:7px;
        font-size:.82rem;
    }
}

@media(max-width:430px){
    .beka-request-back{
        padding:8px 11px;
        font-size:.78rem;
    }

    .beka-request-back span{
        font-size:1rem;
    }
}


/* ==========================================================
   BeKa Anfrage V6
   FIX: Header-Inhalte sauber nebeneinander ausrichten
   und Überlappung mit rotem Banner verhindern
========================================================== */

.beka-request-header{
    position:relative;
    z-index:20;
    background:#0a0b0e;
}


.beka-request-header-inner{
    position:relative;

    width:min(1200px, calc(100% - 48px));

    min-height:76px;
    height:76px;

    margin:0 auto;

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

    gap:24px;
}


.beka-request-logo{
    position:absolute;

    left:0;
    top:50%;

    transform:translateY(-50%);
}


.beka-request-logo img{
    display:block;

    height:120px;
    width:auto;

    max-width:none;

    object-fit:contain;
}


.beka-request-back{
    flex:0 0 auto;

    margin-left:auto;
}


.beka-request-banner{
    position:relative;
    z-index:1;
    clear:both;
}

/* Mobile / iPhone */
@media(max-width:768px){

    .beka-request-header-inner{
        min-height:70px;
        padding-top:7px;
        padding-bottom:7px;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:10px;
    }

    .beka-request-logo img{
        height:42px;
        max-width:145px;
    }

    .beka-request-back{
        margin:0;
        min-height:40px;
        white-space:nowrap;
    }
}

@media(max-width:430px){

    .beka-request-header-inner{
        min-height:66px;
    }

    .beka-request-logo img{
        height:38px;
        max-width:125px;
    }

    .beka-request-back{
        padding:8px 10px;
        font-size:.76rem;
    }
}

/* ==========================================================
   KONTAKT – SVG ICONS
========================================================== */

.beka-contact-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

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

    border: 1px solid rgba(215, 25, 63, 0.45);
    border-radius: 50%;

    background: rgba(215, 25, 63, 0.08);
}

.beka-contact-icon img {
    width: 24px !important;
    height: 24px !important;

    max-width: 24px !important;
    max-height: 24px !important;

    display: block;
    object-fit: contain;
}