/* ==========================================================
   Cete Bauservice - Doppelstabmattenzaun Anfrage
   Eigenständige Link-Seite in Popup-/Dialogoptik
   ========================================================== */

html,
body.fence-page{
    min-height:100%;
}

body.fence-page{
    margin:0;
    overflow-x:hidden;
    background:#1f2937;
    color:var(--text,#222);
}

.fence-backdrop{
    position:fixed;
    inset:0;
    z-index:0;
    background:
        radial-gradient(circle at 15% 15%, rgba(183,28,28,.28), transparent 34%),
        radial-gradient(circle at 85% 85%, rgba(255,255,255,.08), transparent 30%),
        linear-gradient(135deg,#1f2937,#111827);
}

.fence-backdrop::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:32px 32px;
}

.fence-shell{
    position:relative;
    z-index:1;
    display:flex;
    min-height:100vh;
    align-items:flex-start;
    justify-content:center;
    padding:32px;
}

.fence-modal{
    position:relative;
    width:min(1120px,100%);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    border-radius:26px;
    background:#fff;
    box-shadow:0 28px 90px rgba(0,0,0,.42);
}

.fence-close{
    position:absolute;
    top:18px;
    right:18px;
    z-index:20;
    display:flex;
    width:48px;
    height:48px;
    align-items:center;
    justify-content:center;
    border:2px solid rgba(255,255,255,.9);
    border-radius:50%;
    background:var(--primary,#b71c1c);
    color:#fff;
    font-size:1.3rem;
    box-shadow:0 8px 24px rgba(0,0,0,.28);
    transition:.2s ease;
}

.fence-close:hover{
    transform:translateY(-2px);
    background:var(--primary-hover,#8d1717);
}

.fence-header{
    display:grid;
    grid-template-columns:190px 1fr;
    gap:2rem;
    align-items:center;
    padding:2.2rem 5.5rem 2rem 2.4rem;
    background:linear-gradient(135deg,#20252b,#374151);
    color:#fff;
}

.fence-brand{
    display:flex;
    min-height:155px;
    align-items:center;
    justify-content:center;
    padding:.7rem;
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 32px rgba(0,0,0,.18);
}

.fence-brand img{
    width:auto;
    max-width:100%;
    max-height:150px;
}

.fence-kicker{
    display:inline-block;
    margin-bottom:.65rem;
    color:#d4af37;
    font-size:.83rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.fence-header h1{
    margin:0 0 .75rem;
    color:#fff;
    font-size:clamp(2rem,4vw,3.25rem);
    letter-spacing:-.035em;
}

.fence-header p{
    max-width:760px;
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:1.02rem;
}

.fence-benefits{
    display:flex;
    justify-content:center;
    gap:.8rem 2rem;
    flex-wrap:wrap;
    padding:1rem 2rem;
    border-bottom:1px solid var(--border,#e5e7eb);
    background:#f8fafc;
    color:var(--dark2,#374151);
    font-size:.9rem;
    font-weight:700;
}

.fence-benefits span{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
}

.fence-benefits i{
    color:var(--primary,#b71c1c);
}

.fence-progress{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    width:min(900px,calc(100% - 4rem));
    margin:2.5rem auto 2.8rem;
    padding:0;
    list-style:none;
}

.fence-progress li{
    position:relative;
    z-index:1;
    display:flex;
    min-width:0;
    flex-direction:column;
    align-items:center;
    gap:.5rem;
    color:#9ca3af;
    text-align:center;
}

.fence-progress li:not(:last-child)::after{
    content:"";
    position:absolute;
    top:20px;
    left:calc(50% + 28px);
    z-index:-1;
    width:calc(100% - 56px);
    height:3px;
    border-radius:10px;
    background:#e5e7eb;
}

.fence-progress li.is-complete:not(:last-child)::after{
    background:var(--primary,#b71c1c);
}

.fence-progress li > span{
    display:flex;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
    border:2px solid #d1d5db;
    border-radius:50%;
    background:#fff;
    color:#6b7280;
    font-weight:800;
    transition:.25s ease;
}

.fence-progress li strong{
    font-size:.82rem;
}

.fence-progress li.is-active,
.fence-progress li.is-complete{
    color:var(--dark,#1f2937);
}

.fence-progress li.is-active > span,
.fence-progress li.is-complete > span{
    border-color:var(--primary,#b71c1c);
    background:var(--primary,#b71c1c);
    color:#fff;
    box-shadow:0 7px 18px rgba(183,28,28,.22);
}

.fence-form{
    width:min(930px,calc(100% - 4rem));
    margin:0 auto;
    padding-bottom:2rem;
}

.fence-step{
    animation:fenceFade .26s ease;
}

.fence-step[hidden]{
    display:none !important;
}

@keyframes fenceFade{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:none}
}

.fence-step fieldset{
    min-width:0;
    margin:0;
    padding:0;
    border:0;
}

.fence-step legend{
    margin-bottom:.55rem;
    color:var(--dark,#1f2937);
    font-size:2rem;
    font-weight:800;
    line-height:1.2;
}

.fence-step-intro{
    margin:0 0 2rem;
    color:var(--muted,#6b7280);
}

.fence-question{
    margin:2rem 0;
}

.fence-question-title{
    display:block;
    margin-bottom:.8rem;
    color:var(--dark,#1f2937);
    font-size:.95rem;
    font-weight:800;
}

.fence-grid{
    display:grid;
    gap:1rem;
    margin-bottom:1rem;
}

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

.fence-grid-location{
    grid-template-columns:minmax(160px,.35fr) minmax(0,1fr);
}

.fence-field{
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:.45rem;
    margin-bottom:1rem;
}

.fence-field label,
.fence-label-row label{
    color:var(--dark,#1f2937);
    font-size:.92rem;
    font-weight:800;
}

.fence-field input,
.fence-field select,
.fence-field textarea{
    width:100%;
    min-height:50px;
    padding:.82rem .95rem;
    border:1px solid #cfd5dd;
    border-radius:11px;
    background:#fff;
    color:var(--text,#222);
    font:inherit;
    transition:.2s ease;
}

.fence-field textarea{
    min-height:140px;
    resize:vertical;
}

.fence-field input:focus,
.fence-field select:focus,
.fence-field textarea:focus{
    outline:none;
    border-color:var(--primary,#b71c1c);
    box-shadow:0 0 0 4px rgba(183,28,28,.10);
}

.fence-field [aria-invalid="true"],
.fence-choice input[aria-invalid="true"] + span{
    border-color:#b91c1c;
    box-shadow:0 0 0 3px rgba(185,28,28,.10);
}

.fence-input-unit{
    position:relative;
}

.fence-input-unit input{
    padding-right:4.2rem;
}

.fence-input-unit > span{
    position:absolute;
    top:50%;
    right:1rem;
    transform:translateY(-50%);
    color:#6b7280;
    font-weight:800;
}

.fence-choice-grid{
    display:grid;
    gap:.8rem;
}

.fence-choice-grid-height{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.fence-choice-grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.fence-choice-grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.fence-choice{
    position:relative;
    cursor:pointer;
}

.fence-choice input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.fence-choice > span{
    display:flex;
    min-height:84px;
    height:100%;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.18rem;
    padding:1rem;
    border:2px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
    color:var(--dark,#1f2937);
    text-align:center;
    box-shadow:0 5px 15px rgba(31,41,55,.04);
    transition:.22s ease;
}

.fence-choice:hover > span{
    transform:translateY(-2px);
    border-color:rgba(183,28,28,.35);
    box-shadow:0 10px 22px rgba(31,41,55,.08);
}

.fence-choice input:checked + span{
    border-color:var(--primary,#b71c1c);
    background:rgba(183,28,28,.045);
    box-shadow:0 0 0 3px rgba(183,28,28,.09);
}

.fence-choice input:focus-visible + span{
    outline:3px solid rgba(183,28,28,.22);
    outline-offset:2px;
}

.fence-choice small{
    color:#6b7280;
    font-size:.74rem;
}

.fence-color-choice > span{
    min-height:104px;
}

.fence-swatch{
    width:34px;
    height:34px;
    margin-bottom:.3rem;
    border:3px solid #fff;
    border-radius:50%;
    box-shadow:0 0 0 1px #d1d5db;
}

.fence-swatch-anthrazit{background:#383e42}
.fence-swatch-gruen{background:#0b6b3a}
.fence-swatch-verzinkt{background:linear-gradient(135deg,#d1d5db,#f8fafc,#9ca3af)}

.fence-choice-icon > span{
    min-height:135px;
}

.fence-choice-icon i{
    display:flex;
    width:46px;
    height:46px;
    align-items:center;
    justify-content:center;
    margin-bottom:.35rem;
    border-radius:50%;
    background:#f3f4f6;
    color:var(--primary,#b71c1c);
    font-size:1.15rem;
}

.fence-choice input:checked + span i{
    background:var(--primary,#b71c1c);
    color:#fff;
}

.fence-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

.fence-label-row span{
    color:#9ca3af;
    font-size:.78rem;
}

.fence-upload{
    position:relative;
    display:flex;
    min-height:170px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:.45rem;
    padding:1.5rem;
    border:2px dashed #cfd5dd;
    border-radius:16px;
    background:#f8fafc;
    color:var(--dark,#1f2937);
    text-align:center;
    cursor:pointer;
    transition:.2s ease;
}

.fence-upload:hover,
.fence-upload.is-dragover{
    border-color:var(--primary,#b71c1c);
    background:rgba(183,28,28,.035);
}

.fence-upload input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
}

.fence-upload-icon{
    display:flex;
    width:48px;
    height:48px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--primary,#b71c1c);
    color:#fff;
    font-size:1.15rem;
}

.fence-upload small{
    max-width:540px;
    color:#6b7280;
}

.fence-file-error{
    margin-top:.7rem;
    color:#b91c1c;
    font-size:.86rem;
    font-weight:700;
}

.fence-file-list{
    display:grid;
    gap:.55rem;
    margin:.8rem 0 0;
    padding:0;
    list-style:none;
}

.fence-file-list li{
    display:grid;
    grid-template-columns:38px 1fr 38px;
    gap:.7rem;
    align-items:center;
    padding:.7rem .8rem;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#fff;
}

.fence-file-type{
    display:flex;
    width:36px;
    height:36px;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#f3f4f6;
    color:var(--primary,#b71c1c);
}

.fence-file-data{
    display:flex;
    min-width:0;
    flex-direction:column;
}

.fence-file-data strong{
    overflow:hidden;
    color:var(--dark,#1f2937);
    font-size:.84rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.fence-file-data small{color:#6b7280}

.fence-file-remove{
    display:flex;
    width:36px;
    height:36px;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:#f3f4f6;
    color:#4b5563;
    cursor:pointer;
}

.fence-file-remove:hover{
    background:#fee2e2;
    color:#b91c1c;
}

.fence-review{
    margin:1.5rem 0;
    padding:1.3rem;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#f8fafc;
}

.fence-review-heading{
    display:flex;
    gap:.8rem;
    align-items:center;
    margin-bottom:1rem;
}

.fence-review-heading > div{
    display:flex;
    flex-direction:column;
}

.fence-review-heading small{color:#6b7280}

.fence-review-icon{
    display:flex;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--primary,#b71c1c);
    color:#fff;
}

.fence-review dl{
    margin:0;
}

.fence-review dl > div{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:1rem;
    padding:.65rem 0;
    border-top:1px solid #e5e7eb;
}

.fence-review dt{
    color:#6b7280;
    font-size:.86rem;
    font-weight:700;
}

.fence-review dd{
    margin:0;
    color:var(--dark,#1f2937);
    font-weight:700;
}

.fence-check{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:.8rem;
    align-items:start;
    margin:1.2rem 0;
}

.fence-check input{
    margin-top:.35rem;
    accent-color:var(--primary,#b71c1c);
}

.fence-check label{
    color:#6b7280;
    font-size:.9rem;
    line-height:1.55;
}

.fence-check a{
    color:var(--primary,#b71c1c);
    font-weight:800;
}

.fence-note{
    display:flex;
    gap:.8rem;
    align-items:flex-start;
    padding:1rem 1.1rem;
    border-left:4px solid var(--primary,#b71c1c);
    border-radius:0 12px 12px 0;
    background:#f7f8fa;
}

.fence-note i{
    margin-top:.25rem;
    color:var(--primary,#b71c1c);
}

.fence-note p{
    margin:0;
    color:#6b7280;
    font-size:.88rem;
}

.fence-actions{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    margin-top:2rem;
    padding-top:1.5rem;
    border-top:1px solid #e5e7eb;
}

.fence-actions-end{
    justify-content:flex-end;
}

.fence-button,
.fence-button-secondary{
    display:inline-flex;
    min-height:48px;
    align-items:center;
    justify-content:center;
    gap:.65rem;
    padding:.75rem 1.25rem;
    border-radius:10px;
    font:inherit;
    font-weight:800;
    cursor:pointer;
    transition:.22s ease;
}

.fence-button{
    border:1px solid var(--primary,#b71c1c);
    background:var(--primary,#b71c1c);
    color:#fff;
    box-shadow:0 7px 18px rgba(183,28,28,.18);
}

.fence-button:hover{
    transform:translateY(-2px);
    background:var(--primary-hover,#8d1717);
}

.fence-button:disabled{
    opacity:.65;
    cursor:wait;
    transform:none;
}

.fence-button-secondary{
    border:1px solid #d1d5db;
    background:#fff;
    color:var(--dark,#1f2937);
}

.fence-button-secondary:hover{
    border-color:#9ca3af;
    background:#f8fafc;
}

.fence-status{
    width:min(930px,calc(100% - 4rem));
    margin:1.7rem auto -1rem;
    padding:1rem 1.2rem;
    border-radius:12px;
    font-weight:700;
}

.fence-status.is-success{
    border:1px solid #86efac;
    background:#f0fdf4;
    color:#166534;
}

.fence-status.is-error{
    border:1px solid #fecaca;
    background:#fef2f2;
    color:#991b1b;
}

.fence-footer{
    display:flex;
    justify-content:center;
    gap:.8rem 2rem;
    flex-wrap:wrap;
    padding:1.3rem 2rem;
    border-top:1px solid #e5e7eb;
    background:#f8fafc;
    color:#4b5563;
    font-size:.86rem;
    font-weight:700;
}

.fence-footer div{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
}

.fence-footer i{color:var(--primary,#b71c1c)}

.fence-honeypot{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}

@media(max-width:800px){
    .fence-shell{padding:14px}
    .fence-modal{border-radius:20px}
    .fence-header{
        grid-template-columns:130px 1fr;
        gap:1.4rem;
        padding:2rem 4.8rem 2rem 1.6rem;
    }
    .fence-brand{min-height:120px}
    .fence-brand img{max-height:112px}
    .fence-choice-grid-height{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fence-choice-grid-3{grid-template-columns:1fr}
}

@media(max-width:600px){
    body.fence-page{background:#fff}
    .fence-shell{display:block;min-height:100dvh;padding:0}
    .fence-modal{min-height:100dvh;border:0;border-radius:0;box-shadow:none}
    .fence-close{
        position:fixed;
        top:12px;
        right:12px;
        width:44px;
        height:44px;
    }
    .fence-header{
        grid-template-columns:1fr;
        gap:1rem;
        padding:1.3rem 4.6rem 1.5rem 1rem;
    }
    .fence-brand{
        width:116px;
        min-height:96px;
        justify-self:start;
        padding:.35rem;
        border-radius:12px;
    }
    .fence-brand img{max-height:90px}
    .fence-header h1{font-size:1.8rem}
    .fence-header p{font-size:.94rem}
    .fence-benefits{
        align-items:flex-start;
        flex-direction:column;
        gap:.45rem;
        padding:.9rem 1rem;
    }
    .fence-progress{
        width:calc(100% - 1.4rem);
        margin:1.5rem auto 2rem;
    }
    .fence-progress li > span{width:36px;height:36px}
    .fence-progress li:not(:last-child)::after{
        top:17px;
        left:calc(50% + 23px);
        width:calc(100% - 46px);
    }
    .fence-progress li strong{font-size:.68rem}
    .fence-form{width:calc(100% - 2rem);padding-bottom:1.4rem}
    .fence-step legend{font-size:1.55rem}
    .fence-grid-2,
    .fence-grid-location,
    .fence-choice-grid-2,
    .fence-choice-grid-3{
        grid-template-columns:1fr;
    }
    .fence-choice-grid-height{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fence-choice > span{min-height:72px;padding:.8rem}
    .fence-choice-icon > span{min-height:112px}
    .fence-review dl > div{grid-template-columns:1fr;gap:.15rem}
    .fence-actions{flex-direction:column-reverse}
    .fence-actions-end{flex-direction:column}
    .fence-button,
    .fence-button-secondary{width:100%}
    .fence-status{width:calc(100% - 2rem);margin-top:1rem}
    .fence-footer{
        align-items:flex-start;
        flex-direction:column;
        gap:.55rem;
        padding:1.1rem 1rem;
    }
}

@media(prefers-reduced-motion:reduce){
    .fence-step,
    .fence-button,
    .fence-button-secondary,
    .fence-choice > span,
    .fence-close{animation:none;transition:none}
}