/* =============================================================================
   UGG Vermieterdaten – MDU Tenant Mailing

   Die Adressfelder (PLZ-Eingabe, Ort/Straße/Hausnummer-Dropdowns) verwenden
   bewusst Markup und Klassen des Verfügbarkeitschecks und werden von
   verfuegbarkeitscheck.css gestylt — dieses Stylesheet hängt als Abhängigkeit
   daran. Hier stehen nur die formularspezifischen Teile unter .ugg-vd*.
   ============================================================================= */

.ugg-vermieterdaten-wrap {
  --vd-green:         #41B991;
  --vd-green-light:   #AAD9C2;
  --vd-green-xlight:  #E8F6F1;
  --vd-mustard:       #FFB11B;
  --vd-mustard-light: #FFF6E4;
  --vd-mustard-border: rgba(255, 177, 27, 0.45);
  --vd-red:           #C4432B;
  --vd-red-light:     #FBEDEA;
  --vd-black:         #1B1B1B;
  --vd-gray-700:      #707070;
  --vd-gray-600:      #8A8A8A;
  --vd-gray-300:      #DFECE1;
  --vd-gray-200:      #E9E9E9;
  --vd-gray-100:      #F7F7F7;
  --vd-white:         #FFFFFF;
  --vd-radius:        10px;
  --vd-radius-lg:     32px;
  --vd-radius-pill:   999px;
  --vd-border:        1.5px solid var(--vd-gray-200);
  --vd-border-active: 1.5px solid var(--vd-black);
  --vd-font:          'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vd-fw-regular:    400;
  --vd-fw-semi:       600;
  --vd-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --vd-dur:           180ms;

  font-family: var(--vd-font);
  color: var(--vd-black);
}

.ugg-vermieterdaten-wrap *,
.ugg-vermieterdaten-wrap *::before,
.ugg-vermieterdaten-wrap *::after { box-sizing: border-box; }

/* Eigene display-Regeln dürfen [hidden] nicht aushebeln — sonst erscheinen
   Fortschritt und Hinweise, bevor sie etwas zu sagen haben. */
.ugg-vermieterdaten-wrap [hidden] { display: none !important; }

/* Leerer Status-Container soll keine Flex-Lücke erzeugen. */
.ugg-vd__status:empty { display: none; }

.ugg-vd-backend-error {
  padding: 16px 20px;
  border-radius: var(--vd-radius);
  background: var(--vd-mustard-light);
  border: 1.5px solid var(--vd-mustard-border);
  font-size: 14px;
}

/* ── Container ───────────────────────────────────────────────────────────── */
/* Rahmenlos: das Formular übernimmt den Seitenhintergrund. */
.ugg-vd {
  background: transparent;
  border: 0;
  padding: 0;
}

.ugg-vd__form { display: flex; flex-direction: column; gap: 28px; }

/* Inhaltsspalte: die beiden Panes laufen darin durch. Mobil hängt JS die Panes
   in die Schritte um und setzt `--stacked` — dann ist dieser Container leer.
   Nicht `:empty` prüfen: zwischen den Panes stehen Whitespace-Textknoten aus
   dem PHP-Template, damit trifft `:empty` nie zu. */
.ugg-vd__panes { display: flex; flex-direction: column; gap: 28px; }
.ugg-vd__form--stacked .ugg-vd__panes { display: none; }
.ugg-vd__pane   { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

/* ── Fortschritt (Seitenleiste) ───────────────────────────────────────────────
   Maße und Farben sind aus dem bestehenden VGM-/Beratungs-Flow übernommen,
   damit die Seitenleiste über alle UGG-Formulare identisch aussieht:
   40er-Box, r=15, stroke-width 5, Track #ddd, Grün #41B991 (= --vd-green),
   Pille mit border-radius 40px und min-width 250px.

   Vier Zustände — der erledigte Schritt hat bewusst keine Fläche, nur der
   aktuelle ist eine Pille:

   | Zustand              | Fläche  | Ring                     |
   |----------------------|---------|--------------------------|
   | offen                | keine   | grauer Kreis             |
   | aktuell, in Arbeit   | schwarz | grauer Kreis + grüner Bogen |
   | aktuell, vollständig | schwarz | grüner Kreis + grüner Haken |
   | erledigt             | keine   | grüner Kreis + grüner Haken |

   Die Liste ist nicht anwählbar — Schritt 2 erscheint erst nach der
   Adressprüfung —, sie kündigt die zweite Adresseingabe nur an.

   Zwei Ebenen: die Pille sitzt auf `__step-head`, das `<li>` ist nur Hülle.
   Desktop hat die Hülle keine eigene Fläche; mobil wird sie zur Karte, in die
   JS den Inhalt des Schritts einhängt (siehe `_initStackedLayout`).
   -------------------------------------------------------------------------- */
.ugg-vd--stepped .ugg-vd__form {
  display: grid;
  /* gap: 0 — die Spalten trennt die Linie an der Inhaltsspalte. */
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.ugg-vd--stepped .ugg-vd__panes {
  border-left: 1px solid var(--vd-gray-200);
  padding-left: 32px;
}

.ugg-vd__steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  /* Abstand zur Trennlinie, damit die Pillen sie nicht berühren. */
  padding: 0 40px 0 0;
  list-style: none;
}

.ugg-vd__step { min-width: 0; }

/* Höhe entsteht wie im Bestand aus dem Ring: 10px Luft + 40px Box + 10px. */
.ugg-vd__step-head {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 250px;
  padding: 10px 24px 10px 10px;
  border-radius: 40px;
  font-size: 16px;
  font-weight: var(--vd-fw-regular);
  line-height: 1.35;
  color: var(--vd-black);
  background: transparent;
  transition: color var(--vd-dur) var(--vd-ease),
              background-color var(--vd-dur) var(--vd-ease);
}

/* Nur der aktuelle Schritt bekommt eine Fläche. */
.ugg-vd__step--current .ugg-vd__step-head {
  color: var(--vd-white);
  background: var(--vd-black);
}

.ugg-vd__step-label { min-width: 0; }

.ugg-vd__step-ring {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.ugg-vd__step-ring svg { display: block; width: 40px; height: 40px; }

.ugg-vd__step-track {
  fill: none;
  stroke: #ddd;
  stroke-width: 5;
}

/* Der grüne Anteil: --vd-step-p läuft von 0 bis 1, Umfang bei r=15 ist
   2π·15 = 94.25. Nur diese Zahl kommt aus JS. */
.ugg-vd__step-fill {
  fill: none;
  stroke: var(--vd-green);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 94.25;
  stroke-dashoffset: calc(94.25px * (1 - var(--vd-step-p, 0)));
  /* Startpunkt oben statt rechts. */
  transform: rotate(-90deg);
  transform-box: view-box;
  transform-origin: 20px 20px;
  transition: stroke-dashoffset 320ms var(--vd-ease);
}

/* Haken immer grün — auch auf der schwarzen Pille (Referenzdesign). */
.ugg-vd__step-check {
  fill: none;
  stroke: var(--vd-green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--vd-dur) var(--vd-ease);
}

.ugg-vd__step--done .ugg-vd__step-check { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ugg-vd__step-fill { transition: none; }
}

/* Unter der Umbruchbreite liegen Schritte und Inhalt in EINEM weißen
   Container: Kopf, Felder, Trennlinie, nächster Kopf, dessen Felder. Zwei
   Spalten ließen beide zu schmal werden, und der Inhalt unter einer
   Schrittliste ließe die Zuordnung offen.

   Genau eine Hülle — die Schritte selbst haben keine eigene Fläche und keinen
   eigenen Rahmen, sie trennt nur eine Linie. Deshalb sind es nur zwei Radien,
   konzentrisch gerechnet: die Pille ist ein Stadion (halbe Höhe = 28px), der
   Container addiert sein Padding — 28+7=35. Wer das Padding ändert, rechnet
   den Radius mit.

   Das Umhängen der Inhalte macht JS (`_initStackedLayout`) — mit CSS allein
   geht es nicht, weil die Köpfe auf dem Desktop kompakt in der linken Spalte
   stehen, während die Inhalte rechts durchlaufen. Die Grenze 860px steht in
   beiden Dateien und muss zusammen geändert werden. */
@media (max-width: 860px) {
  .ugg-vd--stepped .ugg-vd__form {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .ugg-vd--stepped .ugg-vd__panes { border-left: 0; padding-left: 0; }

  .ugg-vd__steps { gap: 0; padding: 0; }

  /* Die Pille: Stadion, knapp um Ring und Text — nicht die 250px-Mindestbreite
     der Seitenleiste, hier füllt sie ihre Hülle. */
  .ugg-vd__step-head {
    min-width: 0;
    gap: 14px;
    padding: 11px 22px 11px 9px;
    font-size: 15px;
    border-radius: var(--vd-radius-pill);
  }

  /* Erledigt: minzige Fläche am Kopf — dieselbe Farbfamilie wie Ring und Haken. */
  .ugg-vd__step--done .ugg-vd__step-head { background: var(--vd-green-xlight); }

  .ugg-vd__step-ring { flex-basis: 34px; width: 34px; height: 34px; }
  .ugg-vd__step-ring svg { width: 34px; height: 34px; }

  /* Alles Folgende hängt an `--stacked`: die Klasse setzt JS erst, wenn die
     Panes wirklich in den Schritten hängen. Bleibt das JS aus, stehen Pillen
     und Inhalt ohne Container untereinander — schlichter, aber nicht kaputt. */

  /* Die einzige Hülle. */
  .ugg-vd__form--stacked .ugg-vd__steps {
    padding: 7px 7px 14px;
    border: 1.5px solid var(--vd-gray-200);
    border-radius: 35px;
    background: var(--vd-white);
  }

  /* Der nächste Schritt hängt mit Trennlinie am vorigen. Die negativen Ränder
     ziehen die Linie bis an den Container, statt sie einzurücken. */
  .ugg-vd__form--stacked .ugg-vd__step + .ugg-vd__step {
    margin: 14px -7px 0;
    padding: 14px 7px 0;
    border-top: 1.5px solid var(--vd-gray-200);
  }

  .ugg-vd__step:not(.ugg-vd__step--open) > .ugg-vd__pane { display: none; }

  /* Inhalt unter dem Kopf — eingerückt, damit Felder und Pille nicht auf
     derselben Kante sitzen. */
  .ugg-vd__step > .ugg-vd__pane {
    padding: 22px 14px 0;
    gap: 24px;
  }
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.ugg-vd__section {
  display: flex;
  flex-direction: column;
  gap: 22px;
  border: 0;
  margin: 0;
  padding: 0;
}

.ugg-vd__section-title {
  margin: 0;
  font-size: 19px;
  font-weight: var(--vd-fw-semi);
  line-height: 1.3;
  color: var(--vd-black);
}

.ugg-vd__section-intro {
  margin: -8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--vd-gray-700);
}

/* ── Rows & Fields ───────────────────────────────────────────────────────── */
.ugg-vd__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Zeilenabstand größer als Spaltenabstand: trennt Feldgruppen deutlich. */
  gap: 22px 16px;
  align-items: start;
}

/* Mobil steht jedes Feld auf eigener Zeile — auch PLZ und Ort. Die PLZ neben
   dem Ort zu halten spart eine Zeile, macht aber zwei unterschiedlich breite
   Felder in einer sonst gleichmäßigen Spalte. */
@media (max-width: 640px) {
  .ugg-vd__row { grid-template-columns: 1fr; }
}

.ugg-vd__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

/* Label sitzt dicht am Feld, die Luft entsteht oberhalb der Gruppe —
   so ist die Zugehörigkeit auf einen Blick erkennbar. */
.ugg-vd__label {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: var(--vd-fw-semi);
  line-height: 1.35;
  color: var(--vd-black);
  user-select: none;
}

.ugg-vd__label-hint {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: var(--vd-fw-regular);
  color: var(--vd-gray-600);
}

.ugg-vd__req { color: var(--vd-black); }

.ugg-vd__field--disabled .ugg-vd__label { color: var(--vd-gray-700); }

/* ── Text inputs ─────────────────────────────────────────────────────────── */
/* Maße und Farben wie .ugg-autocomplete__input im Adressblock. */
.ugg-vd__input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  font-family: var(--ds-font, var(--vd-font));
  font-weight: var(--vd-fw-regular);
  font-size: 15px;
  color: var(--ds-black, var(--vd-black));
  background: var(--ds-white, var(--vd-white));
  border: var(--ds-border, var(--vd-border));
  border-radius: var(--ds-radius-pill, var(--vd-radius-pill));
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--vd-dur) var(--vd-ease),
              background-color var(--vd-dur) var(--vd-ease);
}

.ugg-vd__input::placeholder { color: var(--vd-gray-600); }
.ugg-vd__input:focus { border: var(--ds-border-active, var(--vd-border-active)); }

.ugg-vd__input:disabled {
  background: var(--ds-gray-100, var(--vd-gray-100));
  color: var(--vd-gray-600);
  cursor: not-allowed;
}

/* ── Adressfelder ────────────────────────────────────────────────────────────
   PLZ-Feld und Dropdowns kommen vollständig aus verfuegbarkeitscheck.css
   (Abhängigkeit des Stylesheets). Hier stehen nur die Anpassungen, die dieses
   Formular braucht — kein zweiter Skin.
   -------------------------------------------------------------------------- */

/* Ohne Pfeil-Hinweis entfällt dessen Grid-Zeile: die Felder darunter rücken je
   eine Zeile hoch, sonst klafft eine leere Zeile.

   Die Zeilen müssen pro Breakpoint gesetzt werden. Ein pauschales
   `grid-row: 2` hebelte die Umbrüche des Verfügbarkeitschecks aus: unter 420px
   räumt der alle Felder in eine Spalte mit `grid-row: auto` — Straße und
   Hausnummer landeten dann beide in Zeile 2, also übereinander in derselben
   Zelle, und Ort rutschte dahinter. */
@media (min-width: 681px) {
  .ugg-vermieterdaten-wrap .ugg-checker__field-group--strasse { grid-column: 1 / 3; grid-row: 2; }
  .ugg-vermieterdaten-wrap .ugg-checker__field-group--nr      { grid-column: 3;     grid-row: 2; }
}

/* Zwei Spalten: PLZ und Ort je über die volle Breite, darunter
   Straße | Hausnummer. */
@media (min-width: 421px) and (max-width: 680px) {
  .ugg-vermieterdaten-wrap .ugg-checker__plz-ort-row .ugg-checker__field-group--ort { grid-row: 2; }
  .ugg-vermieterdaten-wrap .ugg-checker__field-group--strasse { grid-column: 1; grid-row: 3; }
  .ugg-vermieterdaten-wrap .ugg-checker__field-group--nr      { grid-column: 2; grid-row: 3; }
}

/* Unter 421px bleibt es bei der einspaltigen Automatik des
   Verfügbarkeitschecks: PLZ, Ort, Straße, Hausnummer in DOM-Reihenfolge. */

/* Mehr Luft zwischen den Feldzeilen als zwischen Label und Feld. */
.ugg-vermieterdaten-wrap .ugg-checker__form { row-gap: 22px; }
.ugg-vermieterdaten-wrap .ugg-checker__field-group { gap: 5px; }

/* Unterhalb von 681px zieht der Verfügbarkeitscheck das PLZ-Feld auf die volle
   Zeilenbreite (dort steht daneben sein Pfeil-Hinweis, hier nichts). Fünf
   Ziffern in einer 358px breiten Pille sind fast nur Leerraum — deshalb hier
   auf die Breite des Inhalts gedeckelt, linksbündig wie alle anderen Felder. */
@media (max-width: 680px) {
  .ugg-vermieterdaten-wrap .ugg-checker__field-group--plz .ugg-otp {
    width: 100%;
    max-width: 250px;
  }
}

/* ── Marker → Spinner → Haken ────────────────────────────────────────────────
   Das geerbte Icon des Verfügbarkeitschecks ist ein Hintergrundbild auf ::before
   und kann nicht morphen. Es wird hier vollständig zurückgenommen — auch der
   geerbte Spinner, denn zwei Flex-Kinder (::before + eigenes SVG) haben ihn aus
   der Mitte geschoben. Jetzt ist das SVG das einzige Kind und sitzt zentriert.
   -------------------------------------------------------------------------- */
.ugg-vermieterdaten-wrap .ugg-otp__icon-wrap::before { display: none !important; }

.ugg-vd-morph {
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
}

/* Marker: unveränderte Assets, blendet beim Prüfen aus. */
.ugg-vd-morph__marker {
  fill: var(--vd-black);
  opacity: 1;
  transition: opacity 160ms var(--vd-ease);
}

/* Spinner/Haken: ein gestrichener Pfad, dessen Form interpoliert wird. */
.ugg-vd-morph__stroke {
  stroke: var(--vd-green);
  opacity: 0;
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: stroke 240ms var(--vd-ease), opacity 160ms var(--vd-ease);
}

/* Grünes Badge fährt hinter dem Haken auf — wie im Verfügbarkeitscheck. */
.ugg-vd-morph__badge {
  fill: var(--vd-green);
  opacity: 0;
  transform: scale(0.35);
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: opacity 240ms var(--vd-ease),
              transform 360ms cubic-bezier(0.34, 1.5, 0.64, 1);
}

/* Zustand „prüfen“: Marker weg, Bogen sichtbar (Drehung kommt aus JS). */
.ugg-vd-morph--spin .ugg-vd-morph__marker { opacity: 0; }
.ugg-vd-morph--spin .ugg-vd-morph__stroke { opacity: 1; }

/* Zustand „verfügbar“: Badge auf, Haken in Weiß. */
.ugg-vd-morph--check .ugg-vd-morph__marker { opacity: 0; }
.ugg-vd-morph--check .ugg-vd-morph__stroke { opacity: 1; stroke: var(--vd-white); }
.ugg-vd-morph--check .ugg-vd-morph__badge  { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .ugg-vd-morph__badge { transition: none; }
}

/* Labels dunkler und in derselben Größe wie im Vermieterblock. */
.ugg-vermieterdaten-wrap .ugg-checker__label {
  font-size: 13px;
  color: var(--vd-black);
}

.ugg-vermieterdaten-wrap .ugg-checker__field-group--disabled .ugg-checker__label {
  color: var(--vd-gray-700);
}

/* ── Progress ────────────────────────────────────────────────────────────── */
.ugg-vd__progress { display: flex; flex-direction: column; gap: 8px; }

.ugg-vd__progress-label {
  font-size: 13px;
  font-weight: var(--vd-fw-semi);
  color: var(--vd-gray-700);
}

.ugg-vd__progress-track {
  height: 6px;
  background: var(--vd-gray-200);
  border-radius: var(--vd-radius-pill);
  overflow: hidden;
}

.ugg-vd__progress-bar {
  width: 0;
  height: 100%;
  background: var(--vd-green);
  border-radius: inherit;
  transition: width 200ms var(--vd-ease);
}

/* ── Notices (Status & Hinweise) ─────────────────────────────────────────── */
.ugg-vd__notice {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--vd-radius);
  animation: ugg-vd-notice-in 240ms var(--vd-ease) both;
}

@keyframes ugg-vd-notice-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.ugg-vd__notice-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.ugg-vd__notice-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: var(--vd-fw-semi);
  line-height: 1.4;
}

.ugg-vd__notice-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--vd-gray-700);
}

.ugg-vd__notice-link { color: inherit; text-decoration: underline; font-weight: var(--vd-fw-semi); }

.ugg-vd__notice-icon {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
}

.ugg-vd__notice-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ugg-vd__notice--success {
  background: var(--vd-green-xlight);
  border: 1.5px solid var(--vd-green-light);
}

.ugg-vd__notice--success .ugg-vd__notice-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2341B991' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
}

.ugg-vd__notice--info,
.ugg-vd__notice--warn {
  background: var(--vd-mustard-light);
  border: 1.5px solid var(--vd-mustard-border);
}

.ugg-vd__notice--info .ugg-vd__notice-icon::before,
.ugg-vd__notice--warn .ugg-vd__notice-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C98A00' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E");
}

.ugg-vd__notice--error {
  background: var(--vd-red-light);
  border: 1.5px solid rgba(196, 67, 43, 0.35);
}

.ugg-vd__notice--error .ugg-vd__notice-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4432B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v6M12 16.5h.01'/%3E%3C/svg%3E");
}

/* ── Gate: gesperrt bis MDU bestätigt ────────────────────────────────────── */
/* Kein Ausfaden: Überschriften, Datenschutz- und Pflichtfeldhinweis bleiben
   voll lesbar. Der gesperrte Zustand zeigt sich an den Feldern selbst. */
.ugg-vd__gate {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Feldfehler ──────────────────────────────────────────────────────────── */
.ugg-vd__field-error {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: var(--vd-fw-semi);
  color: var(--vd-red);
}

.ugg-vd__form-error {
  margin: 0;
  padding: 14px 18px;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: var(--vd-fw-semi);
  color: var(--vd-red);
  background: var(--vd-red-light);
  border: 1.5px solid rgba(196, 67, 43, 0.35);
  border-radius: var(--vd-radius);
}

/* ── Datenschutz & Pflichtfeld-Hinweis ───────────────────────────────────── */
.ugg-vd__privacy { display: flex; flex-direction: column; gap: 6px; }

.ugg-vd__privacy-title { font-size: 13.5px; font-weight: var(--vd-fw-semi); }

.ugg-vd__privacy-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--vd-gray-700);
}

.ugg-vd__required-note {
  margin: 0;
  font-size: 12px;
  color: var(--vd-gray-600);
}

/* ── Adressübernahme ──────────────────────────────────────────────────────────
   Die Schaltfläche sitzt im Feld „Straße & Hausnummer“, weil sie genau dieses
   Feld füllt. Sie trägt kein sichtbares Label — die Bedeutung tragen das
   Symbol (Pfeil in ein Feld = „hier einsetzen“), das aria-label und das
   Popover.
   -------------------------------------------------------------------------- */
.ugg-vd__input-wrap { position: relative; display: block; }

/* Platz für die Schaltfläche, damit lange Straßennamen nicht darunter laufen. */
.ugg-vd__input--with-action { padding-right: 54px; }

.ugg-vd__copy {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--vd-gray-700);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--vd-dur) var(--vd-ease),
              background-color var(--vd-dur) var(--vd-ease);
}

.ugg-vd__copy:hover,
.ugg-vd__copy:focus-visible {
  color: var(--vd-black);
  background: var(--vd-gray-100);
}

/* Sichtbarer Fokus: die Schaltfläche liegt auf hellem Feldgrund. */
.ugg-vd__copy:focus-visible {
  outline: 2px solid var(--vd-black);
  outline-offset: 1px;
}

.ugg-vd__copy-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  background-color: currentColor;
  /* Pfeil in ein Eingabefeld. Der Rahmen ist bewusst breit und geschlossen —
     eine schmale, offene Schale liest sich als Download-Symbol. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4v7.4M8.7 7.5 12 10.8l3.3-3.3'/%3E%3Crect x='3.3' y='14.3' width='17.4' height='6.4' rx='3.2' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4v7.4M8.7 7.5 12 10.8l3.3-3.3'/%3E%3Crect x='3.3' y='14.3' width='17.4' height='6.4' rx='3.2' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Popover über dem Feld — nach oben, damit es die Folgefelder nicht verdeckt.
   Rein visuell (aria-hidden): Screenreader lesen denselben Text über
   aria-describedby, der dauerhaft im DOM steht. */
.ugg-vd__tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 5;
  display: block;
  width: max-content;
  max-width: min(290px, 100%);
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--vd-white);
  background: var(--vd-black);
  border-radius: var(--vd-radius);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--vd-dur) var(--vd-ease),
              transform var(--vd-dur) var(--vd-ease),
              visibility var(--vd-dur) var(--vd-ease);
  pointer-events: none;
}

/* Spitze unter dem Popover, mittig unter der Schaltfläche (7px + 38px/2). */
.ugg-vd__tip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 20px;
  width: 12px;
  height: 6px;
  background: var(--vd-black);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.ugg-vd__tip-title {
  display: block;
  font-weight: var(--vd-fw-semi);
}

.ugg-vd__tip--open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ugg-vd__tip { transition: none; transform: none; }
}

/* Nur für Screenreader — trägt die Beschreibung der Schaltfläche. */
.ugg-vd__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Submit ──────────────────────────────────────────────────────────────── */
.ugg-vd__actions { display: flex; justify-content: flex-end; }

/* inline-flex statt min-width: der Button umschließt Label und Icon genau,
   sonst entsteht rechts ungenutzter Platz. */
.ugg-vd__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 54px;
  padding: 0 28px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: var(--vd-fw-semi);
  line-height: 1;
  color: var(--vd-white);
  background: var(--vd-black);
  border: 0;
  border-radius: var(--vd-radius-pill);
  cursor: pointer;
  transition: background-color var(--vd-dur) var(--vd-ease),
              transform var(--vd-dur) var(--vd-ease),
              opacity var(--vd-dur) var(--vd-ease);
}

.ugg-vd__submit-label { display: block; }

/* Pfeil-Icon aus der Mediathek. Als Maske eingefärbt — die Quelldatei ist
   schwarz, currentColor macht sie weiß. */
.ugg-vd__submit-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-color: currentColor;
  -webkit-mask: var(--vd-submit-icon) no-repeat center / contain;
  mask: var(--vd-submit-icon) no-repeat center / contain;
  transition: transform var(--vd-dur) var(--vd-ease);
}

/* Nur im aktiven Zustand — deaktiviert bleibt der Button reines Label. */
.ugg-vd__submit:disabled .ugg-vd__submit-icon { display: none; }

.ugg-vd__submit:not(:disabled):hover { background: var(--vd-green); transform: translateY(-1px); }
.ugg-vd__submit:not(:disabled):hover .ugg-vd__submit-icon { transform: translateX(3px); }
.ugg-vd__submit:not(:disabled):active { transform: translateY(0); }

.ugg-vd__submit:disabled {
  background: var(--vd-gray-200);
  color: var(--vd-gray-600);
  cursor: not-allowed;
}

.ugg-vd__submit--loading { opacity: 0.8; cursor: progress; }

@media (max-width: 640px) {
  .ugg-vd__actions { justify-content: stretch; }
  .ugg-vd__submit { width: 100%; }
}

/* ── Bestätigung ─────────────────────────────────────────────────────────────
   Erscheint anstelle des Formulars, nicht als Modal: nicht wegklickbar und
   im Seitenfluss, mit Button für eine weitere Meldung.
   -------------------------------------------------------------------------- */
.ugg-vd__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 52px 40px 44px;
  text-align: center;
  background: var(--vd-green-xlight);
  border: 1.5px solid var(--vd-green-light);
  border-radius: 28px;
  animation: ugg-vd-success-in 320ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes ugg-vd-success-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.ugg-vd__success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  color: var(--vd-white);
  background: var(--vd-green);
  border-radius: 50%;
}

.ugg-vd__success-icon svg { width: 40px; height: 40px; }

.ugg-vd__success-title {
  margin: 0;
  font-size: 26px;
  font-weight: var(--vd-fw-semi);
  line-height: 1.25;
  color: var(--vd-black);
}

.ugg-vd__success-text {
  margin: 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vd-gray-700);
}

.ugg-vd__success-again {
  margin-top: 8px;
  height: 52px;
  padding: 0 30px;
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--vd-fw-semi);
  color: var(--vd-black);
  background: var(--vd-white);
  border: 1.5px solid var(--vd-black);
  border-radius: var(--vd-radius-pill);
  cursor: pointer;
  transition: color var(--vd-dur) var(--vd-ease),
              background-color var(--vd-dur) var(--vd-ease);
}

.ugg-vd__success-again:hover { color: var(--vd-white); background: var(--vd-black); }

@media (max-width: 640px) {
  .ugg-vd__success { padding: 38px 22px 32px; border-radius: 22px; }
  .ugg-vd__success-title { font-size: 22px; }
  .ugg-vd__success-icon { width: 64px; height: 64px; }
  .ugg-vd__success-icon svg { width: 34px; height: 34px; }
  .ugg-vd__success-again { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ugg-vermieterdaten-wrap * { animation: none !important; transition: none !important; }
}