@scope (.contact-form) {
  :scope {
    background-color: var(--color-bg-blue);
  }

  .section-padding {
    padding-block: 7rem;
  }

  /* Direkt nach einer section-headline: die bringt bereits unten
     Abstand mit (Spacer), daher hier kein zusaetzliches Top-Padding. */
  .section-headline + :scope .section-padding {
    padding-top: 0;
  }

  .form-card {
    padding: 3rem;
    background-color: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    color: var(--color-grey);
  }

  /* Gravity Forms (Orbital-Theme) setzt seine Farb-/Radius-Tokens per Inline-
     \3c style data-form-index> direkt am Wrapper (hohe Spezifitaet) -- daher
     hier zur Sicherheit mit !important angleichen, falls die Formular-
     Einstellungen in GF sich mal aendern. */
  .form-card .gform-theme--foundation {
    --gf-radius: var(--radius) !important;
    --gf-color-primary: var(--color-orange) !important;
    --gf-color-primary-contrast: var(--color-grey) !important;
    --gf-color-secondary: var(--color-white) !important;
    --gf-color-secondary-contrast: var(--color-grey) !important;
    --gf-color-in-ctrl-primary: var(--color-blue) !important;
    --gf-color-in-ctrl-contrast: var(--color-grey) !important;
    --gf-font-size-secondary: 1rem !important;
    --gf-font-size-tertiary: 0.95rem !important;
  }

  .form-card .gform_wrapper * {
    font-family: var(--font-family-alt);
  }

  /* GF zeigt standardmaessig den Formularnamen als eigene Ueberschrift ueber
     dem Formular -- auf Unterseiten-Formularen (z.B. "Kontaktformular
     Abbrucharbeiten") doppelt sich das mit der eigenen section-headline
     davor. Titel/Beschreibung des Formulars selbst daher immer ausblenden. */
  .form-card .gform_heading {
    display: none;
  }

  /* Inter (--font-family-alt) liegt im Projekt nur als Regular-Schnitt vor --
     ohne SemiBold-Datei bleibt font-weight:600 optisch unsichtbar. Labels
     daher auf Saira (--font-family) umstellen, die einen echten SemiBold-
     Schnitt mitbringt. Der sichtbare Text steckt in einem inneren
     .gform-field-label__text-Span, der Font-Family separat setzt -- daher
     muss dieser explizit mitadressiert werden.
     Nur die Feld-/Gruppen-Ueberschriften sollen fett sein (z.B. "Bitte waehlen
     Sie aus folgenden Optionen:", "Vorname", "E-Mail", "Rueckrufnummer") --
     NICHT die einzelnen Options-/Checkbox-Texte (z.B. "Beratung", "Bitte um
     Rueckruf der Geschaeftsfuehrung..."). .gfield_label deckt die meisten
     Feld-Labels ab, Sub-Labels zusammengesetzter Felder (Vorname/Nachname
     bei "Name") tragen stattdessen .gform-field-label--type-sub, OHNE
     .gfield_label -- deshalb separat ergaenzt. Choice-Labels
     (.gform-field-label--type-inline, z.B. "Beratung") bleiben bewusst
     aussen vor. */
  .form-card .gfield_label,
  .form-card .gfield_label .gform-field-label__text,
  .form-card .gform-field-label--type-sub,
  .form-card .gform-field-label--type-sub .gform-field-label__text {
    color: var(--color-grey);
    font-family: var(--font-family) !important;
    font-weight: var(--font-weight-bold) !important;
  }

  .form-card .gform_footer {
    margin-top: 1rem;
  }

  /* Link auf die Datenschutzerklaerung im Einwilligungs-Checkbox-Text --
     Klasse wird in Gravity Forms direkt am <a> im "Checkbox-Beschriftung"-
     Feld vergeben (class="datenschutz-link"). */
  .form-card .datenschutz-link {
    color: var(--color-blue);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
  }

  .form-card .datenschutz-link:hover {
    text-decoration: underline;
  }

  /* Rueckruf-Checkbox und Rueckrufnummer nebeneinander statt in eigenen
     Vollbreite-Zeilen -- Klassen werden in Gravity Forms je Feld unter
     "Erweitert -> CSS-Klasse" vergeben (rueckruf-checkbox / rueckruf-nummer).
     align-self: start statt end, da das Checkbox-Feld insgesamt niedriger
     ist als das Text-Feld (kein Input-Rahmen) -- mit "end" würden Label und
     Checkbox nach unten wegrutschen statt mit "Rueckrufnummer" auf einer
     Hoehe zu stehen. */
  .form-card .rueckruf-checkbox,
  .form-card .rueckruf-nummer {
    grid-column: span 6 !important;
    align-self: start;
  }

  @media (width <= 767px) {
    .form-card .rueckruf-checkbox,
    .form-card .rueckruf-nummer {
      grid-column: span 12 !important;
    }
  }

  /* 1:1 wie .button aus styles/button.css -- GF setzt sonst eine eigene,
     deutlich kleinere Button-Groesse (14px/38px hoch, 1px Border) statt der
     Buttons im Rest der Seite (19.2px/55px hoch, 3.5px Border). Alle Werte
     hier bewusst dieselben wie in .button, damit beide identisch aussehen. */
  .form-card .gform_button {
    display: inline-block !important;
    border: 0.2em solid var(--color-orange) !important;
    border-radius: var(--radius) !important;
    background-color: var(--color-orange) !important;
    color: var(--color-text) !important;
    padding: 0.3em 1.3em !important;
    font-family: var(--font-family) !important;
    font-size: 1.2rem !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 1.9 !important;
    height: auto !important;
    transition:
      color 0.2s,
      background-color 0.2s;
  }

  .form-card .gform_button:hover,
  .form-card .gform_button:focus-visible {
    background-color: var(--color-white) !important;
    color: var(--color-orange) !important;
  }

  /* Gleiche 3-stufige Staffelung wie .button aus styles/button.css (Desktop
     1.2rem -> <=991px 1rem -> <=767px 0.875rem) -- sonst bleibt dieser
     Button per !important auf Desktop-Groesse haengen, waehrend alle
     anderen Buttons der Seite bei mittleren/kleinen Breiten schon
     schrumpfen. */
  @media (width <= 991px) {
    .form-card .gform_button {
      font-size: 1rem !important;
    }
  }

  @media (width <= 767px) {
    .form-card .gform_button {
      font-size: 0.875rem !important;
    }
  }

  @media (width <= 991px) {
    .section-padding {
      padding-block: 6rem;
    }
  }

  @media (width <= 767px) {
    .section-padding {
      padding-block: 4rem;
    }

    .form-card {
      padding: 2rem 1.5rem;
    }
  }
}