/* Shared form styles (Support, später Kontakt / Konfigurator) */

.contact-form,
.contact-form label,
.contact-form .form-control,
.contact-form textarea,
.contact-form select,
.contact-form button,
.support-accordion .faq-question {
  font-family: inherit;
  font-size: 17px;
}

.contact-form .form-group { margin-bottom: 18px; }
.contact-form label {
  display: block;
  font-weight: 400;
  margin-bottom: 5px;
  color: #555;
}
.contact-form .form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #cdd5de;
  border-radius: 5px;
  background: #fff;
  color: #333;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}
.contact-form .form-control:focus {
  outline: none;
  border-color: #f7b500;
  box-shadow: 0 0 0 3px rgba(247,181,0,0.15);
}
.contact-form .form-control.error  { border-color: #dc3545; background: #fff6f6; }
.contact-form .form-control.success { border-color: #28a745; background: #f6fff8; }
.contact-form textarea.form-control { resize: vertical; min-height: 130px; }
.contact-form .form-control::placeholder { color: #c0c8d4; }

.error-message { display: none; color: #dc3545; margin-top: 4px; }

.checkbox-wrapper { display: flex; align-items: flex-start; gap: 10px; }
.checkbox-wrapper input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; }
.checkbox-wrapper label { font-weight: 400; color: #555; cursor: pointer; margin-bottom: 0; }

.color-red { color: #dc3545; }

.form-row-2 { display: flex; gap: 16px; }
.form-row-2 .form-group { flex: 1 1 0; min-width: 0; }
.form-row-plz-ort .form-group-plz { flex: 1 1 0; }
.form-row-plz-ort .form-group-ort { flex: 2 1 0; }
.form-row-3 { display: flex; gap: 12px; }
.form-row-3 .form-group { flex: 1 1 0; min-width: 0; }

.section-divider {
  margin: 36px 0 14px;
  padding-left: 12px;
  border-left: 4px solid #f7b500;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #555;
}

.modell-sonstiges-wrap { margin-top: 10px; display: none; }
.modell-sonstiges-wrap.visible { display: block; }

.btn-submit {
  background: #f7b500;
  color: #fff;
  border: none;
  padding: 11px 32px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.btn-submit:hover { background: #e0a200; }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.frc-captcha { margin-bottom: 4px; }
.pflichtfeld-hint { color: #888; margin-top: 22px; }

.kontakt-form,
.konfigurator-form { max-width: 640px; }
.contact-form .form-help {
  color: #555;
  margin: 0 0 8px;
  font-weight: 400;
  line-height: 1.6;
}
.kontakt-model-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.kontakt-model-btns a { display: inline-block; }

.support-section { padding: 40px 0 60px; }
.support-section h1 { margin-bottom: 6px; }
.support-intro { color: #555; margin-bottom: 30px; }
.support-cols { display: flex; gap: 48px; align-items: flex-start; flex-wrap: wrap; }
.support-form-col { flex: 1 1 480px; min-width: 0; }
.support-intro-layout { display: flex; gap: 40px; align-items: flex-start; }
.support-intro-fields { flex: 1 1 0; min-width: 0; }
.support-intro-img { flex: 0 0 440px; }
.support-intro-img img { width: 100%; border-radius: 6px; object-fit: cover; display: block; }

.geraet-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.geraet-row:last-child { margin-bottom: 0; }
.geraet-row .checkbox-wrapper { flex: 0 0 160px; }
.geraet-type-input { flex: 1; min-width: 120px; max-width: 240px; }

.support-accordion { border: 1px solid #dde3ea; border-radius: 6px; margin-bottom: 10px; overflow: hidden; transition: box-shadow 0.2s ease; }
.support-accordion.open { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.support-accordion .faq-question { width: 100%; background: #fff; border: none; text-align: left; padding: 16px 52px 16px 18px; font-weight: 400; color: #555; cursor: pointer; position: relative; transition: background 0.2s ease, color 0.2s ease; line-height: 1.6; }
.support-accordion .faq-question:hover,
.support-accordion.open .faq-question { background: #f4f7fa; color: #f7b500; }
.support-accordion .faq-question::after { content: ''; position: absolute; right: 18px; top: 50%; transform: translateY(-50%) rotate(0deg); width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7b500' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; transition: transform 0.3s ease; }
.support-accordion.open .faq-question::after { transform: translateY(-50%) rotate(180deg); }
.support-accordion .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; background: #fff; padding: 0 18px; }
.support-accordion.open .faq-answer { padding: 0 18px; }
.support-accordion .faq-answer-inner { padding: 14px 0 18px; border-top: 1px solid #eef0f3; }
.support-accordion .table td { vertical-align: middle; }
.support-accordion .table td:not(:first-child) { text-align: center; width: 52px; }
.support-accordion .table input[type="radio"] { cursor: pointer; width: 16px; height: 16px; }

@media (max-width: 900px) {
  .support-intro-layout { flex-direction: column; }
  .support-intro-img { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 767px) {
  .form-row-2, .form-row-3 { flex-direction: column; gap: 0; }
  .form-row-plz-ort .form-group-plz,
  .form-row-plz-ort .form-group-ort { flex: 1 1 auto; }
  .geraet-row .checkbox-wrapper { flex: 0 0 auto; }
  .geraet-type-input { max-width: 100%; }
}