/* ==================================================
   FORM CONTROLS – Basis
================================================== */

@media (prefers-reduced-motion: reduce) {
    .form-control { 
      transition: none; 
  }
}

.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  background-color: #f4f4f3;
  background-clip: padding-box;
  border: 1px solid #f4f4f3;
  border-bottom-color: #e8e8e7;
  border-radius: 0;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  color: #000;
  background-color: #fff;
  border-color: var(--wf-color3);
  outline: 0;
}
.form-control::placeholder { color: #6c757d; opacity: 1; }

.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

textarea { resize: vertical; }
textarea.form-control { height: auto; }


/* ==================================================
   FORM SELECT – gleiche Optik wie .form-control
================================================== */

.form-select {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 2.25rem 0.375rem 0.75rem; /* rechts Platz für Pfeil */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  background-color: #f4f4f3;
  background-clip: padding-box;
  border: 1px solid #f4f4f3;
  border-bottom-color: #e8e8e7;
  border-radius: 0;
  color: #000;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23000' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 8px;

  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-select:focus {
  background-color: #fff;
  border-color: #c10d16;
  outline: 0;
}

/* Disabled / readonly */
.form-select:disabled {
  background-color: #e9ecef;
  opacity: 1;
  cursor: not-allowed;
}



/* ==================================================
   FORM WRAPPER – generalisiert (inkl. wertgutscheine)
   Greift für: .form-identifier-*
================================================== */

[class^="form-identifier-"],
[class*=" form-identifier-"] {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  max-width: 100% !important;
  padding: 2rem 1.75rem 0 1.75rem;
  margin-bottom: 3rem;
}

@media (min-width: 576px) {
  [class^="form-identifier-"],
  [class*=" form-identifier-"] { 
      width: 540px; 
      margin-bottom: 4rem;
  }
}

@media (min-width: 600px) {
  [class^="form-identifier-"],
  [class*=" form-identifier-"] {
    width: 95%;
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 768px) {
  [class^="form-identifier-"],
  [class*=" form-identifier-"] {
    width: 740px;
    padding-left:3rem;
    padding-right:3rem;
  }
}

@media (min-width: 992px) {
  [class^="form-identifier-"],
  [class*=" form-identifier-"] {
    width: 940px;
    padding-right: 3.75rem;
    padding-left: 3.75rem; 
  }
}

@media (min-width: 1200px) {
  [class^="form-identifier-"],
  [class*=" form-identifier-"] { 
      width: 1100px;
      padding-right: 1.75rem;
      padding-left: 1.75rem;
      margin-bottom: 6rem; 
  }
}


/* ==================================================
   FIELDSET & GRID
================================================== */

[class^="form-identifier-"] fieldset,
[class*=" form-identifier-"] fieldset {
  border: none;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row > [class*="col-"] {
  padding-left: 5px;
  padding-right: 5px;
}

/* ==================================================
   BUTTONS (nur innerhalb der Forms)
================================================== */

[class^="form-identifier-"] .form-navigation button,
[class*=" form-identifier-"] .form-navigation button {
  font-family: var(--wf-page-font-family);
  display: inline-block;
  margin: 0.35rem;
  font-size: 17px;
  font-weight: 400 !important;
  text-transform: uppercase;
  line-height: 1.2em;
  padding: 0.65rem 1.8rem 0.65rem 1.8rem;
  border: none !important;
  color: #fff !important;
  background-color: var(--wf-color4) !important;
  cursor: pointer;
  transition: all 0.5s;
}

[class^="form-identifier-"] .form-navigation button:hover,
[class*=" form-identifier-"] .form-navigation button:hover {
  background-color: var(--wf-color3) !important;
}

/* ==================================================
   FEEDBACK
================================================== */

[class^="form-identifier-"] .invalid-feedback,
[class*=" form-identifier-"] .invalid-feedback {
  padding-top: 0.25rem;
  color: #ce3f46 !important;
}

.valid-feedback {
  display: none;
  font-size: 80%;
  color: #28a745;
}

/* ==================================================
   ELEMENT SPACING – automatisch über ID-Prefix
   Greift für: inquiry-*, form-*, wertgutscheine-*
================================================== */

:is([id^="inquiry-"], [id^="form-"], [id^="wertgutscheine-"]) .form-element {
  font-size: 1em;
}

:is([id^="inquiry-"], [id^="form-"], [id^="wertgutscheine-"]) .form-element-radio {
  margin-left: -0.75rem !important;
}

:is([id^="inquiry-"], [id^="form-"], [id^="wertgutscheine-"]) .form-element-check {
  padding-left: 0rem !important;
}

@media (min-width: 1921px) {
  :is([id^="inquiry-"], [id^="form-"], [id^="wertgutscheine-"]) .form-element {
    font-size: 0.95em;
  }
}

#kontaktFormular-313 h2,
#wertgutscheine-338 h2 {
    display: none;
}

#wertgutscheine-338 .form-element-statictext h2 {
    display: block;
}

#wertgutscheine-338-fieldset-4,
#wertgutscheine-338-fieldset-6  {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.form-element-gridrow.row [class*="col-"] {
    padding: 0!important;
}

#kontaktFormular-313-fieldset-3  {
    padding-left: 0;
}