/* Interessenten-Anfrageformular (oeffentlich, per iFrame in ImmoXXL
   eingebettet - siehe interessenten-formular-einbettung.html) - baut auf
   style.css auf (.portal-wrapper/form/label/input/.error sind dort bereits
   fertig gestylt, gleiche Optik wie Eigentuemer-/Käuferlogin), hier nur die
   Ergaenzungen, die style.css noch nicht kennt.

   Optik bewusst an die bereits bestehenden Formulare auf
   deussen-immobilien.de angelehnt (Kontaktformular/"Gesuch aufgeben") statt
   an den Rest dieser App: kein Rahmen/keine Karte, Platzhaltertext statt
   sichtbarer Label ueber den Feldern (Label bleiben fuer Screenreader
   erhalten, siehe .if-sr-only), weisse statt hellgrau gefuellte Felder,
   Checkbox und Absenden-Button nebeneinander in einer Zeile mit
   umrandetem (nicht gefuelltem) Button - damit sich das eingebettete
   Formular nicht wie ein Fremdkoerper zwischen den echten Formularen der
   Seite anfuehlt. */

/* Bewusst OHNE .card (kein Logo/Ueberschrift/Rahmen/Schatten/weisser
   Hintergrund) - die Seite wird direkt in eine ImmoXXL-Seite eingebettet,
   die bereits ihre eigene Einleitung/Optik drumherum hat. Breiter als
   .card (440px) - Anrede/Vorname/Nachname stehen nebeneinander (s.u.),
   dafuer braucht es mehr Platz in der Breite, spart dafuer Hoehe/
   Leerraum unter dem Formular beim Einbetten. */
.if-eingebettet {
  width: 100%;
  max-width: 640px;
}

/* Nur fuer Screenreader sichtbar - die echten Formulare auf der Seite
   zeigen keine Label ueber den Feldern, nur Platzhaltertext (s.u.). Ein
   Platzhalter allein waere aber kein gueltiges zugaengliches Label (er
   verschwindet beim Tippen) - das Label bleibt deshalb technisch
   vorhanden, nur optisch ausgeblendet. */
.if-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Weiss statt des app-weiten hellgrauen Eingabefeld-Hintergrunds (nur auf
   dieser Seite - der Rest der App/das Makler-Backend behaelt die gefuellten
   Felder) - so wie die bestehenden Formulare auf der Webseite selbst. */
input,
select {
  background: var(--deussen-weiss);
}

/* Anrede/Vorname/Nachname nebeneinander statt untereinander - macht das
   Formular breiter und deutlich kuerzer (weniger Leerraum unterm Absenden-
   Button beim Einbetten). E-Mail bleibt eigenzeilig (braucht mehr Platz).
   Unter ~480px (schmale Handys) faellt die Zeile auf eine Spalte zurueck. */
.if-namen-zeile {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  gap: 0 10px;
  margin-bottom: 14px;
}
.if-feld {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (max-width: 480px) {
  .if-namen-zeile {
    grid-template-columns: 1fr;
    gap: 14px 0;
  }
}

.if-email-feld {
  margin-bottom: 18px;
}

/* style.css stylt bisher nur <input>, kein <select> (dieses Formular ist die
   erste Stelle mit einer Dropdown-Auswahl) - gleiche Optik wie dort.
   Trotz identischem Padding/Border/Font-Size faellt die native Browser-
   Hoehe eines <select> unterschiedlich aus (v.a. Safari rendert es hoeher
   als ein <input>) - deshalb bewusst NICHT auf die native Erscheinung
   verlassen: appearance:none entfernt sie komplett, der Pfeil wird als
   eigenes Hintergrundbild nachgebaut, damit die Feldhoehe browseruebergreifend
   exakt der von Vorname/Nachname entspricht. */
select {
  font-family: inherit;
  font-size: 15px;
  padding: 11px 34px 11px 12px;
  border: 1px solid var(--grau-rand);
  border-radius: 8px;
  color: inherit;
  outline: none;
  transition: border-color 0.15s ease;
  line-height: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  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' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23565656' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}
select:focus {
  border-color: var(--deussen-blau);
}

/* Checkbox-Zeile und Absenden-Button nebeneinander, Button rechtsbuendig -
   auf schmalen Breiten (Handy) untereinander. */
.if-unten-zeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.if-einwilligung-zeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-sekundaer);
  flex: 1 1 260px;
}
.if-einwilligung-zeile input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--deussen-blau);
}
.if-einwilligung-zeile a {
  color: var(--deussen-blau);
}

.if-pflicht-hinweis {
  font-size: 11.5px;
  color: var(--text-sekundaer);
  margin: 10px 0 0;
}

/* Umrandet statt gefuellt (anders als der Rest der App, siehe style.css:
   #if-submit-button wurde dort bewusst aus der gemeinsamen Regel
   entfernt) - passend zu den bestehenden Formular-Buttons auf der
   Webseite. Nicht gestreckt (kein width:100%) und rechtsbuendig in
   .if-unten-zeile, nicht mehr ganz unten im Formular fuer sich allein. */
#if-submit-button {
  margin-top: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--deussen-blau);
  background: var(--deussen-weiss);
  border: 1.5px solid var(--deussen-blau);
  border-radius: 8px;
  transition: background 0.15s ease;
}
#if-submit-button:hover {
  background: rgba(37, 64, 143, 0.06);
}
#if-submit-button:disabled {
  opacity: 0.6;
  cursor: default;
}
@media (max-width: 480px) {
  .if-unten-zeile {
    flex-direction: column;
    align-items: stretch;
  }
  /* flex-basis:260px aus .if-einwilligung-zeile bezieht sich in einer
     Spalte (flex-direction:column) auf die Hoehe statt die Breite - ohne
     dieses Zuruecksetzen entstuende hier eine ungewollt hohe Luecke vor
     dem Button. */
  .if-einwilligung-zeile {
    flex: initial;
  }
  #if-submit-button {
    justify-content: center;
  }
}