/* ==========================================================
   Cete Bauservice - Zusatzdesign Kontakt
   Ablage: data/kontakt/kontakt.css
   ========================================================== */

.contact-hero{
position:relative;
overflow:hidden;
padding:5.5rem 3rem;
border-radius:24px;
text-align:center;
background:linear-gradient(135deg,var(--dark),var(--dark2));
color:#fff;
box-shadow:0 18px 45px rgba(31,41,55,.16);
}

.contact-hero::before{
content:"";
position:absolute;
top:-140px;
right:-100px;
width:340px;
height:340px;
border-radius:50%;
background:rgba(255,255,255,.04);
}

.contact-hero::after{
content:"";
position:absolute;
bottom:-170px;
left:-100px;
width:340px;
height:340px;
border-radius:50%;
background:rgba(183,28,28,.18);
}

.contact-hero > *{
position:relative;
z-index:1;
}

.contact-hero .section-label{
color:var(--accent);
}

.contact-hero h1{
max-width:900px;
margin:0 auto 1.2rem;
font-size:clamp(2.3rem,4.5vw,3.8rem);
}

.contact-hero p{
max-width:900px;
margin:0 auto;
color:rgba(255,255,255,.84);
font-size:1.08rem;
}

.contact-overview{
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:3rem;
align-items:start;
margin:5rem 0;
}

.contact-details,
.contact-form-wrap{
padding:3rem;
border:1px solid var(--border);
border-radius:24px;
background:#fff;
box-shadow:0 18px 45px rgba(31,41,55,.08);
}

.contact-details h2,
.contact-form-wrap h2{
font-size:2.1rem;
color:var(--dark);
}

.contact-intro,
.contact-form-wrap > p{
color:var(--muted);
}

.contact-cards{
display:grid;
grid-template-columns:1fr;
gap:1rem;
margin-top:2rem;
}

.contact-card{
display:flex;
gap:1.2rem;
align-items:center;
padding:1.25rem;
border:1px solid var(--border);
border-radius:16px;
background:#f8fafc;
transition:.3s ease;
}

a.contact-card:hover{
transform:translateY(-3px);
border-color:rgba(183,28,28,.28);
box-shadow:0 12px 24px rgba(31,41,55,.08);
}

.contact-card-icon{
flex:0 0 52px;
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:var(--primary);
color:#fff;
font-size:20px;
}

.contact-card div{
display:flex;
flex-direction:column;
min-width:0;
}

.contact-card strong{
color:var(--dark);
font-size:1rem;
}

.contact-card span:not(.contact-card-icon){
color:var(--text);
font-weight:600;
overflow-wrap:anywhere;
}

.contact-card small{
color:var(--muted);
}

.contact-note{
display:flex;
gap:1rem;
align-items:flex-start;
margin-top:1.5rem;
padding:1.2rem;
border-left:4px solid var(--primary);
border-radius:0 12px 12px 0;
background:#f7f8fa;
}

.contact-note i{
margin-top:.25rem;
color:var(--primary);
}

.contact-note p{
margin:0;
color:var(--muted);
font-size:.94rem;
}

.contact-form{
display:flex;
flex-direction:column;
gap:1.2rem;
margin-top:2rem;
}

.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:1.2rem;
}

.form-field{
display:flex;
flex-direction:column;
gap:.45rem;
}

.form-field label{
color:var(--dark);
font-weight:700;
font-size:.94rem;
}

.form-field input,
.form-field select,
.form-field textarea{
width:100%;
padding:.95rem 1rem;
border:1px solid #cfd5dd;
border-radius:10px;
background:#fff;
color:var(--text);
font:inherit;
transition:.25s ease;
}

.form-field textarea{
resize:vertical;
min-height:160px;
}

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

.form-field textarea::placeholder{
color:#9ca3af;
}

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

.form-check input{
margin-top:.35rem;
accent-color:var(--primary);
}

.form-check label{
color:var(--muted);
font-size:.9rem;
line-height:1.55;
}

.form-check a{
color:var(--primary);
font-weight:700;
}

.contact-submit{
display:inline-flex;
align-items:center;
justify-content:center;
align-self:flex-start;
gap:.7rem;
padding:13px 24px;
border:0;
border-radius:10px;
background:var(--primary);
color:#fff;
font:inherit;
font-weight:700;
cursor:pointer;
box-shadow:0 6px 18px rgba(0,0,0,.15);
transition:.3s ease;
}

.contact-submit:hover{
transform:translateY(-2px);
background:var(--primary-hover);
box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.form-hint{
margin:0;
color:var(--muted);
font-size:.85rem;
}

.contact-steps{
margin:5rem 0;
padding:5rem 3rem;
border-radius:24px;
box-shadow:0 18px 45px rgba(31,41,55,.07);
}

.section-heading{
max-width:850px;
margin:0 auto 3rem;
text-align:center;
}

.section-heading h2{
font-size:2.2rem;
color:var(--dark);
}

.section-heading p{
margin:0;
color:var(--muted);
}

.contact-steps-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.5rem;
}

.contact-steps-grid article{
padding:2rem 1.5rem;
border:1px solid var(--border);
border-radius:18px;
text-align:center;
background:#fff;
box-shadow:0 8px 24px rgba(31,41,55,.05);
}

.contact-steps-grid article > span{
width:54px;
height:54px;
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:1.2rem;
border-radius:50%;
background:var(--primary);
color:#fff;
font-weight:800;
}

.contact-steps-grid h3{
color:var(--dark);
}

.contact-steps-grid p{
margin:0;
color:var(--muted);
}

.service-area{
display:grid;
grid-template-columns:1fr 260px;
gap:3rem;
align-items:center;
margin:5rem 0;
padding:4rem;
border:1px solid var(--border);
border-radius:24px;
background:#fff;
box-shadow:0 18px 45px rgba(31,41,55,.08);
}

.service-area h2{
font-size:2.1rem;
color:var(--dark);
}

.service-area p{
color:var(--muted);
}

.service-area-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:.8rem 1.4rem;
margin-top:1.8rem;
}

.service-area-list span{
display:flex;
align-items:center;
gap:.6rem;
color:var(--dark2);
font-weight:600;
}

.service-area-list i{
color:var(--primary);
}

.service-area-visual{
width:210px;
height:210px;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
border-radius:50%;
background:linear-gradient(135deg,var(--primary),var(--primary-hover));
color:#fff;
font-size:76px;
box-shadow:0 18px 38px rgba(183,28,28,.2);
}

.contact-cta{
margin:5rem 0 0;
padding:5rem 3rem;
border-radius:24px;
text-align:center;
box-shadow:0 18px 45px rgba(31,41,55,.18);
}

.contact-cta .section-label{
color:var(--accent);
}

.contact-cta h2{
max-width:850px;
margin:0 auto 1.2rem;
font-size:2.35rem;
color:#fff;
}

.contact-cta p{
max-width:760px;
margin:0 auto 2rem;
color:rgba(255,255,255,.82);
}

.contact-cta-actions{
display:flex;
justify-content:center;
gap:1rem;
flex-wrap:wrap;
}

.contact-cta .button{
gap:.65rem;
}

.contact-secondary-button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 24px;
border:2px solid rgba(255,255,255,.7);
border-radius:10px;
color:#fff;
font-weight:700;
transition:.3s ease;
}

.contact-secondary-button:hover{
background:#fff;
color:var(--dark);
transform:translateY(-2px);
}

@media(max-width:992px){

.contact-hero{
padding:4rem 1.5rem;
border-radius:18px;
}

.contact-overview{
grid-template-columns:1fr;
gap:2rem;
margin:3rem 0;
}

.contact-details,
.contact-form-wrap{
padding:2.5rem 2rem;
border-radius:18px;
}

.contact-steps{
padding:3.5rem 1.5rem;
margin:3rem 0;
border-radius:18px;
}

.service-area{
grid-template-columns:1fr 180px;
padding:3rem 2rem;
border-radius:18px;
}

.service-area-visual{
width:150px;
height:150px;
font-size:54px;
}

.contact-cta{
padding:4rem 1.5rem;
border-radius:18px;
}

}

@media(max-width:640px){

.contact-hero{
padding:3.5rem 1.2rem;
}

.contact-hero h1{
font-size:2rem;
}

.contact-details,
.contact-form-wrap{
padding:2.2rem 1.3rem;
}

.contact-details h2,
.contact-form-wrap h2,
.section-heading h2,
.service-area h2,
.contact-cta h2{
font-size:1.7rem;
}

.form-row{
grid-template-columns:1fr;
}

.contact-submit{
width:100%;
}

.contact-steps{
padding:3rem 1.2rem;
}

.contact-steps-grid{
grid-template-columns:1fr;
}

.service-area{
grid-template-columns:1fr;
gap:2rem;
margin:3rem 0;
padding:2.2rem 1.3rem;
}

.service-area-visual{
width:120px;
height:120px;
font-size:42px;
}

.service-area-list{
grid-template-columns:1fr;
}

.contact-cta{
margin-top:3rem;
padding:3.5rem 1.2rem;
}

.contact-cta-actions{
flex-direction:column;
}

.contact-cta-actions a{
width:100%;
}

}

/* ==========================================================
   Kontaktformular - Statusmeldungen
   ========================================================== */

.contact-status{
    display:flex;
    align-items:flex-start;
    gap:.75rem;

    margin:1.25rem 0 1.5rem;
    padding:1rem 1.1rem;

    border:1px solid transparent;
    border-radius:12px;

    font-size:.95rem;
    font-weight:600;
    line-height:1.55;
}

.contact-status[hidden]{
    display:none;
}

.contact-status.is-success{
    background:#ecfdf5;
    border-color:#bbf7d0;
    color:#166534;
}

.contact-status.is-error{
    background:#fef2f2;
    border-color:#fecaca;
    color:#991b1b;
}

.contact-status::before{
    flex:0 0 auto;
    width:24px;
    height:24px;

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

    border-radius:50%;

    font-size:.78rem;
    font-weight:800;
    line-height:1;
}

.contact-status.is-success::before{
    content:"✓";
    background:#dcfce7;
    color:#15803d;
}

.contact-status.is-error::before{
    content:"!";
    background:#fee2e2;
    color:#b91c1c;
}


/* Unsichtbares Spam-Schutzfeld */
.contact-honeypot{
    position:absolute !important;
    left:-10000px !important;
    top:auto !important;

    width:1px !important;
    height:1px !important;

    overflow:hidden !important;
    opacity:0 !important;

    pointer-events:none !important;
}