.perga-erechnung-form {
--perga-blue: #2563eb;
--perga-blue-dk: #1e3a8a;
--perga-line: #e0e4ea;
--perga-text: #1f2937;
--perga-muted: #6b7280;
max-width: 680px !important;
margin: 0 auto !important;
line-height: 1.4 !important;
white-space: normal !important;
} .perga-erechnung-form * {
margin: 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
box-sizing: border-box !important;
white-space: normal !important;
} .perga-erechnung-form .wpcf7-form {
background: #fff !important;
border: 1px solid var(--perga-line) !important;
border-radius: 12px !important;
padding: 32px !important;
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important;
}
.perga-erechnung-form .wpcf7-form > p { margin-bottom: 20px !important; }
.perga-erechnung-form .wpcf7-form > p:last-child { margin-bottom: 0 !important; }
.perga-erechnung-form label {
display: block !important;
font-weight: 600 !important;
color: var(--perga-text) !important;
margin-bottom: 6px !important;
font-size: 0.95rem !important;
} .perga-erechnung-form label + label { margin-top: 16px !important; }
.perga-erechnung-form input[type="text"],
.perga-erechnung-form input[type="email"],
.perga-erechnung-form textarea {
display: block !important;
width: 100% !important;
margin-top: 6px !important;
padding: 11px 14px !important;
border: 1px solid #cbd2dc !important;
border-radius: 8px !important;
font-size: 1rem !important;
font-family: inherit !important;
color: var(--perga-text) !important;
background: #fbfcfe !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.perga-erechnung-form input[type="text"]:focus,
.perga-erechnung-form input[type="email"]:focus,
.perga-erechnung-form textarea:focus {
outline: none !important;
border-color: var(--perga-blue) !important;
background: #fff !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}
.perga-erechnung-form textarea { resize: vertical !important; min-height: 90px !important; } .perga-erechnung-form .wpcf7-form-control.wpcf7-radio {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
margin-top: 6px !important;
}
.perga-erechnung-form .wpcf7-radio label {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-weight: 500 !important;
margin: 0 !important;
padding: 9px 16px !important;
border: 1px solid #cbd2dc !important;
border-radius: 999px !important;
background: #fbfcfe !important;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.perga-erechnung-form .wpcf7-radio label:has(input:checked) {
border-color: var(--perga-blue) !important;
background: #eef2ff !important;
color: var(--perga-blue-dk) !important;
}
.perga-erechnung-form input[type="radio"],
.perga-erechnung-form input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
accent-color: var(--perga-blue);
margin: 0 !important;
}
.perga-erechnung-form .wpcf7-acceptance label {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
font-weight: 400 !important;
margin: 0 !important;
}
.perga-erechnung-form .wpcf7-acceptance input[type="checkbox"] { margin-top: 3px !important; flex-shrink: 0; }
.perga-erechnung-form small {
display: block !important;
color: var(--perga-muted) !important;
margin-top: 6px !important;
font-size: 0.85rem !important;
} .perga-sek {
margin-bottom: 20px !important;
padding: 16px !important;
background: #f8fafc !important;
border: 1px solid var(--perga-line) !important;
border-radius: 8px !important;
}
.perga-sek > *:not(:first-child) { margin-top: 12px !important; }
.perga-erechnung-form details {
display: block !important;
margin-bottom: 20px !important;
padding: 14px 16px !important;
border: 1px solid var(--perga-line) !important;
border-radius: 8px !important;
background: #f8fafc !important;
}
.perga-erechnung-form summary {
display: block !important;
cursor: pointer;
font-weight: 600 !important;
color: var(--perga-blue-dk) !important;
}
.perga-erechnung-form details[open] summary { margin-bottom: 14px !important; }
.perga-erechnung-form details label { margin-top: 12px !important; margin-bottom: 6px !important; }
.perga-erechnung-form .wpcf7-submit {
display: inline-block !important;
background: var(--perga-blue) !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
padding: 13px 32px !important;
font-size: 1rem !important;
font-weight: 600 !important;
cursor: pointer;
transition: background 0.15s ease, transform 0.05s ease;
}
.perga-erechnung-form .wpcf7-submit:hover { background: var(--perga-blue-dk) !important; }
.perga-erechnung-form .wpcf7-submit:active { transform: translateY(1px); } .perga-modal-overlay {
position: fixed !important;
inset: 0 !important;
z-index: 9999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
background: rgba(15, 23, 42, 0.45) !important;
backdrop-filter: blur(2px);
}
.perga-modal-box {
position: relative !important;
max-width: 540px !important;
width: 100% !important;
background: #fff !important;
border-radius: 12px !important;
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25) !important;
padding: 28px 28px 24px !important;
border-left: 4px solid !important;
animation: perga-modal-in 0.15s ease-out;
}
@keyframes perga-modal-in {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
.perga-modal-box p {
margin: 0 !important;
padding-right: 20px !important;
font-weight: 500 !important;
font-size: 1rem !important;
} .perga-modal-list {
list-style: disc !important;
margin: 10px 0 0 20px !important;
padding: 0 !important;
}
.perga-modal-list li {
margin: 0 0 4px 0 !important;
font-weight: 500 !important;
font-size: 0.95rem !important;
} .perga-modal-actions {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-end !important;
gap: 8px !important;
margin-top: 16px !important;
}
.perga-modal-actions .wpcf7-submit {
flex: 0 0 auto !important;
width: auto !important;
padding: 7px 14px !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
white-space: nowrap !important;
border-radius: 6px !important;
}
.perga-modal-actions .perga-modal-secondary {
background: #fff !important;
color: var(--perga-blue) !important;
border: 1px solid var(--perga-blue) !important;
}
.perga-modal-actions .perga-modal-secondary:hover { background: #eff6ff !important; }
.perga-modal-close {
position: absolute !important;
top: 10px !important;
right: 14px !important;
background: none !important;
border: none !important;
font-size: 1.5rem !important;
line-height: 1 !important;
color: var(--perga-muted) !important;
cursor: pointer;
padding: 4px !important;
}
.perga-modal-close:hover { color: var(--perga-text) !important; }
.perga-ok    { background: #ecfdf3 !important; border-color: #22c55e !important; color: #15803d !important; }
.perga-error { background: #fef2f2 !important; border-color: #ef4444 !important; color: #b91c1c !important; }
.perga-info  { background: #eff6ff !important; border-color: var(--perga-blue) !important; color: var(--perga-blue-dk) !important; } .perga-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.perga-honeypot input { display: none !important; } @media (max-width: 640px) {
.perga-erechnung-form .wpcf7-form { padding: 20px !important; border-radius: 8px !important; }
.perga-erechnung-form .wpcf7-radio label { padding: 8px 14px !important; font-size: 0.9rem !important; }
}