/**
 * GA Kontaktformular – Styling
 *
 * Aufbau nach den offiziellen Contact-Form-7-Richtlinien:
 * https://contactform7.com/styling-contact-form/
 *
 * Einbau: Block „GA Kontaktformular“ einfügen → in der linken Spalte liegt ein
 * Gutenberg-Shortcode-Block → dort den CF7-Shortcode eintragen, z. B.
 * `[contact-form-7 id="123" title="Kontakt"]`. Der Block selbst rendert kein
 * Formular mehr, er liefert nur Kopfbereich, Layout, Direktkontakt-Karte und
 * dieses Styling.
 *
 * CF7 selbst bringt keine Gestaltungsoptionen mit; gestylt wird ausschließlich
 * über die Klassen, die das Plugin ins Markup schreibt (`.wpcf7`,
 * `.wpcf7-form-control`, `.wpcf7-response-output`, `.wpcf7-not-valid-tip` …).
 * Alle Regeln sind über `.ga-kontaktformular` eingegrenzt, damit sie andere
 * CF7-Formulare der Seite nicht anfassen.
 *
 * Im GA-Kontaktformular-Block trägt die linke Spalte diese Klasse bereits
 * (siehe render.php) – jedes CF7-Formular, das per Shortcode-Block dort
 * eingesetzt wird, ist damit automatisch gestylt, ohne dass CF7-seitig etwas
 * konfiguriert werden muss. Außerhalb des Blocks setzt man die Klasse am
 * Formular-Wrapper:
 *
 *     [contact-form-7 id="123" html_class="ga-kontaktformular"]
 *
 * Wichtig: `html_class` hängt die Klasse an dasselbe `div`, das auch `.wpcf7`
 * trägt (`<div class="wpcf7 ga-kontaktformular no-js">`). Die Regeln unten
 * verlangen deshalb bewusst KEIN zusätzliches `.wpcf7` als Nachfahre – sonst
 * greifen sie in genau diesem Fall nicht. Gescopet wird nur über
 * `.ga-kontaktformular`; das deckt beide Platzierungen der Klasse ab.
 *
 * Erwartetes CF7-Formular-Template (Reiter „Formular“):
 *
 *     <div class="ga-kf-field">
 *       <label for="ga-kf-name">Name *</label>
 *       [text* ihr-name id:ga-kf-name autocomplete:name]
 *     </div>
 *     <div class="ga-kf-field">
 *       <label for="ga-kf-firma">Firma</label>
 *       [text ihre-firma id:ga-kf-firma autocomplete:organization]
 *     </div>
 *     <div class="ga-kf-field">
 *       <label for="ga-kf-email">E-Mail-Adresse *</label>
 *       [email* ihre-email id:ga-kf-email autocomplete:email]
 *     </div>
 *     <div class="ga-kf-field">
 *       <label for="ga-kf-thema">Thema (optional)</label>
 *       [select ihr-thema id:ga-kf-thema first_as_label
 *         "Gebäudeautomation" "Produkte" "Jobs" "Sonstiges"]
 *     </div>
 *     <div class="ga-kf-field ga-kf-field--message">
 *       <label for="ga-kf-nachricht">Nachricht *</label>
 *       [textarea* ihre-nachricht id:ga-kf-nachricht]
 *     </div>
 *     <p class="ga-kf-consent">Mit dem Absenden stimmen Sie unserer
 *       <a href="/datenschutz">Datenschutzerklärung</a> zu.</p>
 *     [submit class:ga-kf-submit "Anfrage absenden"]
 *
 * Hinweis: CF7 empfiehlt, eigenes CSS im (Child-)Theme bzw. unter
 * „Zusätzliches CSS“ zu pflegen, weil Plugin-Dateien bei Updates überschrieben
 * werden. Diese Datei gehört zum GA-Blocks-Plugin und wird über
 * `ga-blocks.php` eingebunden – sie ist Teil unseres eigenen Codes und damit
 * update-sicher, solange sie nicht ins CF7-Plugin selbst wandert.
 */

/* -------------------------------------------------------------------------
 * Design-Tokens
 * ---------------------------------------------------------------------- */

/* Beide Scopes tragen die Tokens:
   `.ga-kontaktformular-block` ist die Blockwurzel – nur darüber erreichen die
   Variablen auch die Direktkontakt-Karte in der rechten Spalte, die kein
   Nachfahre von `.ga-kontaktformular` ist.
   `.ga-kontaktformular` bleibt zusätzlich Token-Wurzel, damit ein per
   `html_class` markiertes CF7-Formular außerhalb des Blocks funktioniert. */
.ga-kontaktformular-block,
.ga-kontaktformular {
  --ga-kf-red: #e2001a;
  --ga-kf-red-soft: rgba(226, 0, 26, 0.76);

  --ga-kf-text: #111;
  --ga-kf-text-muted: #666;
  --ga-kf-text-subtle: #888;
  --ga-kf-text-faint: #999;
  --ga-kf-label: #333;
  --ga-kf-placeholder: #bbb;

  --ga-kf-field-bg: #f7f7f7;
  --ga-kf-field-border: #e0e0e0;
  --ga-kf-field-height: 52px;
  --ga-kf-radius: 8px;

  --ga-kf-card-border: #e6e6e6;
  --ga-kf-rule: #e8e8e8;
  --ga-kf-rule-light: #f0f0f0;

  --ga-kf-success-bg: #f0faf0;
  --ga-kf-success-border: #b3ddb3;
  --ga-kf-success-text: #2a6a2a;
  --ga-kf-error-bg: #fff0f0;
  --ga-kf-error-border: #f5c0c0;
  --ga-kf-error-text: #a00;
  --ga-kf-warning-border: #ffb900;
  --ga-kf-spam-border: #f56e28;
}

/* -------------------------------------------------------------------------
 * Layout des Blocks: Formular links, Direktkontakt-Karte rechts
 *
 * Mobile first; die Breakpoints entsprechen denen von Tailwind, damit der
 * Block im gleichen Raster umbricht wie die übrigen GA-Blöcke:
 * sm = 640px, md = 768px, lg = 1024px.
 * ---------------------------------------------------------------------- */

.ga-kontaktformular-block {
  width: 100%;
}

.ga-kontaktformular-block__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 640px) {
  .ga-kontaktformular-block__inner {
    gap: 40px;
  }
}

@media (min-width: 1024px) {
  .ga-kontaktformular-block__inner {
    flex-direction: row;
    align-items: flex-start;
  }

  /* Zielbreiten 680px/560px wie im Design. Bewusst schrumpffähig
     (`flex: 1 1 …` statt `0 0 …`): zwischen 1024px und ~1330px Contentbreite
     passen 680 + 40 + 560 sonst nicht nebeneinander und die Spalten würden aus
     dem Container laufen. Ab genügend Platz greifen die `max-width`-Werte, die
     Breiten sind dann exakt die des Designs. */
  .ga-kontaktformular-block__form {
    flex: 1 1 680px;
    min-width: 0;
    max-width: 680px;
  }

  .ga-kontaktformular-block__contact {
    flex: 1 1 560px;
    min-width: 0;
    max-width: 560px;
    align-self: flex-start;
    /* Optische Ausrichtung: Karte startet auf Höhe des ersten Formularfeldes. */
    margin-top: 107px;
  }
}

/* Kopfbereich (Eyebrow-Pille, Überschrift, Unterzeile) */

.ga-kf-header {
  margin-bottom: 32px;
}

@media (min-width: 640px) {
  .ga-kf-header {
    margin-bottom: 40px;
  }
}

.ga-kf-eyebrow {
  display: inline-block;
  background: var(--ga-kf-red-soft);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 20px;
  border-radius: 100px;
}

.ga-kf-heading {
  font-size: 28px;
  font-weight: 700;
  color: var(--ga-kf-text);
  line-height: 1.2;
  margin: 12px 0 0;
}

@media (min-width: 640px) {
  .ga-kf-heading {
    font-size: 32px;
  }
}

@media (min-width: 1024px) {
  .ga-kf-heading {
    font-size: 36px;
  }
}

.ga-kf-subtext {
  font-size: 15px;
  color: var(--ga-kf-text-muted);
  line-height: 1.6;
  margin: 12px 0 0;
}

@media (min-width: 640px) {
  .ga-kf-subtext {
    font-size: 16px;
  }
}

/* -------------------------------------------------------------------------
 * Gesamtes Formular
 * „Styling whole of contact form“ – das äußerste CF7-Element trägt `.wpcf7`.
 * ---------------------------------------------------------------------- */

.ga-kontaktformular {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

.ga-kontaktformular .wpcf7-form {
  font-family: inherit;
}

/* CF7 verpackt jedes Feld in `<p>`-Tags, sofern man im Formular-Editor nicht
   selbst Markup setzt. Beides soll gleich aussehen. */
.ga-kontaktformular .wpcf7-form > p,
.ga-kontaktformular .ga-kf-field {
  margin: 0 0 28px;
}

.ga-kontaktformular .ga-kf-field--message {
  margin-bottom: 16px;
}

/* -------------------------------------------------------------------------
 * Labels
 * ---------------------------------------------------------------------- */

.ga-kontaktformular .wpcf7-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ga-kf-label);
  margin-bottom: 8px;
  font-family: inherit;
}

/* CF7-Standard-Template umschließt das Feld mit dem Label; dann darf der
   Abstand nicht doppelt greifen. */
.ga-kontaktformular .wpcf7-form label .wpcf7-form-control-wrap {
  margin-top: 8px;
}

.ga-kontaktformular .wpcf7-form-control-wrap {
  display: block;
  position: relative;
}

/* -------------------------------------------------------------------------
 * Eingabefelder
 * „Styling contact form fields“ – Selektoren über die Feldtypen bzw. die von
 * CF7 vergebenen Klassen `wpcf7-text`, `wpcf7-email`, `wpcf7-textarea` …
 * ---------------------------------------------------------------------- */

.ga-kontaktformular input[type="text"],
.ga-kontaktformular input[type="email"],
.ga-kontaktformular input[type="tel"],
.ga-kontaktformular input[type="url"],
.ga-kontaktformular input[type="number"],
.ga-kontaktformular input[type="date"],
.ga-kontaktformular select,
.ga-kontaktformular textarea {
  display: block;
  width: 100%;
  height: var(--ga-kf-field-height);
  background: var(--ga-kf-field-bg);
  border: 1px solid var(--ga-kf-field-border);
  border-radius: var(--ga-kf-radius);
  padding: 0 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ga-kf-text);
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease;
}

.ga-kontaktformular input[type="text"]:focus,
.ga-kontaktformular input[type="email"]:focus,
.ga-kontaktformular input[type="tel"]:focus,
.ga-kontaktformular input[type="url"]:focus,
.ga-kontaktformular input[type="number"]:focus,
.ga-kontaktformular input[type="date"]:focus,
.ga-kontaktformular select:focus,
.ga-kontaktformular textarea:focus {
  border-color: var(--ga-kf-red);
}

.ga-kontaktformular ::placeholder {
  color: var(--ga-kf-placeholder);
  opacity: 1;
}

/* Mehrzeiliges Textfeld */

.ga-kontaktformular textarea,
.ga-kontaktformular .wpcf7-textarea {
  height: 160px;
  padding: 14px 16px;
  line-height: 1.6;
  resize: vertical;
}

@media (min-width: 640px) {
  .ga-kontaktformular textarea,
  .ga-kontaktformular .wpcf7-textarea {
    height: 180px;
  }
}

/* Auswahlfeld inkl. eigenem Pfeil (CF7 liefert kein Icon-Markup mit) */

.ga-kontaktformular select,
.ga-kontaktformular .wpcf7-select {
  padding-right: 44px;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}

/* `first_as_label` rendert die Platzhalter-Option mit leerem value – solange
   sie ausgewählt ist, soll das Feld wie ein Platzhalter wirken. */
.ga-kontaktformular select:has(option[value=""]:checked) {
  color: var(--ga-kf-placeholder);
}

.ga-kontaktformular select option {
  color: var(--ga-kf-text);
}

/* Checkbox- und Radio-Listen (`[checkbox]`, `[radio]`, `[acceptance]`) */

.ga-kontaktformular .wpcf7-list-item {
  display: block;
  margin: 0 0 10px;
}

.ga-kontaktformular .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ga-kf-text-muted);
  margin-bottom: 0;
  cursor: pointer;
}

.ga-kontaktformular .wpcf7-list-item input[type="checkbox"],
.ga-kontaktformular .wpcf7-list-item input[type="radio"] {
  accent-color: var(--ga-kf-red);
  margin-top: 2px;
  flex-shrink: 0;
}

/* Datenschutz-Hinweis unter dem Formular */

.ga-kontaktformular .ga-kf-consent {
  font-size: 12px;
  color: var(--ga-kf-text-faint);
  margin: 0 0 32px;
}

.ga-kontaktformular .ga-kf-consent a {
  color: var(--ga-kf-text-faint);
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Absende-Button und Spinner
 * ---------------------------------------------------------------------- */

.ga-kontaktformular .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  min-width: 203px;
  padding: 0 24px;
  background: var(--ga-kf-red);
  color: #fff;
  border: none;
  border-radius: var(--ga-kf-radius);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

@media (min-width: 1024px) {
  .ga-kontaktformular .wpcf7-submit {
    width: auto;
  }
}

.ga-kontaktformular .wpcf7-submit:hover {
  opacity: 0.9;
}

.ga-kontaktformular .wpcf7-submit:disabled,
.ga-kontaktformular form.submitting .wpcf7-submit {
  opacity: 0.6;
  cursor: default;
}

/* Der Spinner wird von CF7 immer ausgegeben und erst beim Absenden sichtbar. */
.ga-kontaktformular .wpcf7-spinner {
  margin: 0 0 0 12px;
  background-color: var(--ga-kf-red);
  vertical-align: middle;
}

/* -------------------------------------------------------------------------
 * Statusmeldungen
 * „Styling response messages“ – `.wpcf7-response-output` plus der
 * Status-Klasse am `form`-Element: init, sent, failed, aborted, spam,
 * invalid, unaccepted.
 * ---------------------------------------------------------------------- */

.ga-kontaktformular form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--ga-kf-radius);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
}

.ga-kontaktformular form.init .wpcf7-response-output,
.ga-kontaktformular form.resetting .wpcf7-response-output {
  display: none;
}

.ga-kontaktformular form.sent .wpcf7-response-output {
  background: var(--ga-kf-success-bg);
  border-color: var(--ga-kf-success-border);
  color: var(--ga-kf-success-text);
}

.ga-kontaktformular form.failed .wpcf7-response-output,
.ga-kontaktformular form.aborted .wpcf7-response-output {
  background: var(--ga-kf-error-bg);
  border-color: var(--ga-kf-error-border);
  color: var(--ga-kf-error-text);
}

.ga-kontaktformular form.spam .wpcf7-response-output {
  background: var(--ga-kf-error-bg);
  border-color: var(--ga-kf-spam-border);
  color: var(--ga-kf-error-text);
}

.ga-kontaktformular form.invalid .wpcf7-response-output,
.ga-kontaktformular form.unaccepted .wpcf7-response-output,
.ga-kontaktformular form.payment-required .wpcf7-response-output {
  background: var(--ga-kf-error-bg);
  border-color: var(--ga-kf-warning-border);
  color: var(--ga-kf-error-text);
}

/* -------------------------------------------------------------------------
 * Validierungshinweise
 * „Styling validation error messages“ – `.wpcf7-not-valid-tip` am Feld.
 * ---------------------------------------------------------------------- */

.ga-kontaktformular .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: var(--ga-kf-error-text);
  font-size: 13px;
  font-weight: 400;
}

.ga-kontaktformular .wpcf7-not-valid {
  border-color: var(--ga-kf-error-text);
}

/* Zusammenfassung für Screenreader – nicht sichtbar, aber vorhanden lassen. */
.ga-kontaktformular .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Direktkontakt-Karte (rechte Spalte, kein CF7-Bestandteil)
 * ---------------------------------------------------------------------- */

.ga-kf-card {
  background: #fff;
  border: 1px solid var(--ga-kf-card-border);
  border-radius: 16px;
  overflow: hidden;
  /* Auf schmalen Viewports deutlich weniger Innenabstand – 47px/39px lassen
     bei 320–375px kaum Platz für die Kontaktzeilen. */
  padding: 32px 24px 28px;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .ga-kf-card {
    padding: 40px 32px 32px;
  }
}

@media (min-width: 1024px) {
  .ga-kf-card {
    padding: 47px 39px 40px;
  }
}

.ga-kf-card .ga-kf-eyebrow {
  background: var(--ga-kf-red);
}

.ga-kf-card__heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--ga-kf-text);
  line-height: 1.3;
  margin: 16px 0 0;
}

@media (min-width: 640px) {
  .ga-kf-card__heading {
    font-size: 26px;
  }
}

.ga-kf-card__subtext {
  font-size: 15px;
  color: var(--ga-kf-text-muted);
  line-height: 1.6;
  margin: 12px 0 0;
}

.ga-kf-card__divider {
  height: 1px;
  background: var(--ga-kf-rule);
  margin: 24px 0;
  border: 0;
}

.ga-kf-card__divider--light {
  background: var(--ga-kf-rule-light);
  margin: 20px 0;
}

.ga-kf-contact {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ga-kf-contact__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ga-kf-rule-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ga-kf-contact__icon .material-symbols-outlined {
  font-size: 20px;
  color: var(--ga-kf-red);
}

/* Lange E-Mail-Adressen bzw. mehrere Standorte dürfen die Karte auf schmalen
   Viewports nicht sprengen. */
.ga-kf-contact__body {
  min-width: 0;
}

.ga-kf-contact__body .ga-kf-contact__value {
  display: block;
  overflow-wrap: anywhere;
}

.ga-kf-contact__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ga-kf-text-faint);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 4px;
}

.ga-kf-contact__value {
  font-size: 16px;
  font-weight: 600;
  color: var(--ga-kf-text);
  text-decoration: none;
  line-height: 1.4;
}

.ga-kf-card__footer {
  font-size: 13px;
  color: var(--ga-kf-text-subtle);
  line-height: 1.6;
  margin: 28px 0 0;
}

@media (min-width: 640px) {
  .ga-kf-card__footer {
    margin-top: 40px;
  }
}