CSS

/* ==============================
CF7 PKW – FINAL COMPACT PREMIUM
============================== */

/* Wrapper */
.cf7-pkw{
padding: 12px 14px;
border-radius: 10px;
background: linear-gradient(145deg, rgba(0,0,0,0.14), rgba(0,0,0,0.30));
box-shadow: 0 18px 35px rgba(0,0,0,0.35);
}

/* Alles standardmäßig weiß (damit keine Stellen „durchrutschen“) */
.cf7-pkw,
.cf7-pkw *{
color:#fff;
box-sizing:border-box;
}

/* CF7 Default Absätze killen */
.cf7-pkw p{ margin:0 !important; padding:0 !important; }

/* Grid – kompakt */
.cf7-pkw .cf7-row{
display:grid;
grid-template-columns:1fr 1fr;
gap: 8px 14px;
margin: 0 0 8px 0;
}
.cf7-pkw .cf7-row–sizes{ grid-template-columns: 2fr 1fr; }
.cf7-pkw .cf7-row–single{ grid-template-columns: 1fr; }

/* Labels: sehr nah ans Feld */
.cf7-pkw label{
display:block;
font-weight:600;
font-size:14px;
margin: 0 0 2px 0; /* deutlich reduziert */
letter-spacing:.2px;
}

/* Inputs/Select: kompakter + 5px mehr Luft darunter */
.cf7-pkw input[type=“text“],
.cf7-pkw input[type=“email“],
.cf7-pkw input[type=“tel“],
.cf7-pkw input[type=“date“],
.cf7-pkw select,
.cf7-pkw textarea{
width:100%;
padding: 7px 10px;
border-radius: 6px;
border: 1px solid rgba(0,0,0,0.35);
background: rgba(255,255,255,0.96);
color:#000 !important;
font-size:14px;
line-height:1.2;
margin: 0 0 5px 0 !important; /* +5px unter jedem Feld */
transition: all .18s ease;
}

/* Select-Optionen sichtbar machen (wichtig!) */
.cf7-pkw select{ color:#000 !important; }
.cf7-pkw select option{
color:#000 !important;
background:#fff !important;
}

/* Placeholder */
.cf7-pkw ::placeholder{ color: rgba(0,0,0,0.45); }

/* Fokus */
.cf7-pkw input:focus,
.cf7-pkw select:focus,
.cf7-pkw textarea:focus{
border-color:#b31217;
box-shadow: 0 0 0 2px rgba(179,18,23,0.22);
outline:none;
}

/* Divider */
.cf7-pkw .cf7-divider{
height:1px;
background: rgba(255,255,255,0.18);
margin: 8px 0 10px 0;
}

/* Radio (CF7) */
.cf7-pkw .wpcf7-radio{
display:flex;
flex-wrap:wrap;
gap: 6px 14px;
margin: 2px 0 8px 0 !important; /* kompakt, aber lesbar */
padding: 0 !important;
}
.cf7-pkw .wpcf7-radio label{
display:inline-flex;
align-items:center;
gap:7px;
margin:0 !important;
font-weight:500;
color:#fff !important;
}
.cf7-pkw input[type=“radio“]{
accent-color:#b31217;
transform: scale(1.03);
}

/* Upload Box */
.cf7-pkw .cf7-upload{
display:grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 10px 14px;
align-items:start;
margin-top: 6px;
padding: 10px;
border-radius: 8px;
background: rgba(255,255,255,0.05);
border: 1px dashed rgba(255,255,255,0.22);
}
.cf7-pkw .cf7-upload__example{
display:block;
width:100%;
max-width:210px;
height:auto;
border-radius:8px;
margin: 6px 0 4px 0;
border:1px solid rgba(255,255,255,0.25);
box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.cf7-pkw small{
display:block;
font-size:12.5px;
opacity:.92;
margin-top:2px;
color:#fff !important;
}

/* File input Text */
.cf7-pkw input[type=“file“]{
width:100%;
color:#fff !important;
margin-bottom: 5px !important;
}

/* Button */
.cf7-pkw .wpcf7-submit,
.cf7-pkw .cf7-btn{
display:inline-block;
background: linear-gradient(180deg, #3a4348, #23282c);
color:#fff !important;
border:0;
padding: 10px 16px;
border-radius: 7px;
font-weight:700;
font-size:13.5px;
letter-spacing:.6px;
text-transform:uppercase;
cursor:pointer;
margin-top: 6px;
transition: transform .15s ease, background .15s ease;
}
.cf7-pkw .wpcf7-submit:hover,
.cf7-pkw .cf7-btn:hover{
background: linear-gradient(180deg, #4a545a, #2b3136);
transform: translateY(-1px);
}

/* Validierung */
.cf7-pkw .wpcf7-not-valid-tip{
color:#ffd0d0 !important;
font-size:12.5px;
margin-top:-2px;
margin-bottom:6px;
}

/* Response */
.cf7-pkw .wpcf7-response-output{
margin: 10px 0 0 0 !important;
padding: 10px 12px !important;
border-radius: 8px;
border:0 !important;
color:#fff !important;
background: rgba(0,0,0,0.25);
}

/* Mobile */
@media (max-width:768px){
.cf7-pkw .cf7-row,
.cf7-pkw .cf7-row–sizes,
.cf7-pkw .cf7-upload{
grid-template-columns:1fr;
}
}