/* UGG Antragsformulare (GEE/VGM) – gemeinsame Styles. Gescoped auf form.uggf und .uggf-sidebar. */
form.uggf, .uggf-sidebar {
	--uggf-t: #1b1b1b; --uggf-muted: #5f6361; --uggf-line: #dfe0e1; --uggf-soft: #f4f6f5;
	--uggf-green: #41b991; --uggf-primary: #e55c3d; --uggf-primary-h: #c9472b; --uggf-error: #b3261e;
	--uggf-focus: 0 0 0 3px rgba(66, 166, 253, .35); --uggf-ease: cubic-bezier(.22, 1, .36, 1);
}
.uggf-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Schritte: Design wie bisher (globale Styles für .collapsible-sections-*, .collapsible-next-trigger) – hier nur Technik */
form.uggf .collapsible-sections-field, form.uggf .collapsible-sections-collapsible-body { position: relative; }
form.uggf .collapsible-sections-field[aria-disabled="true"] { cursor: default; }
form.uggf .collapsible-sections-field:focus-visible { outline: none; box-shadow: var(--uggf-focus); }
form.uggf .gsection_title { outline: none; scroll-margin-top: 140px; }
form.uggf .collapsible-sections-field { scroll-margin-top: 140px; }
/* „Weiter“ ist jetzt ein echter Button (vorher div) – Browser-Standards neutralisieren, Optik kommt aus den globalen Styles */
form.uggf button.collapsible-next-trigger { font: inherit; font-size: 16px; line-height: 1.4; appearance: none; -webkit-appearance: none; }
form.uggf button.collapsible-next-trigger:focus-visible { outline: none; box-shadow: var(--uggf-focus); }
form.uggf .uggf-errors { grid-column: 1 / -1; }

/* Formular in voller Breite wie bisher (früheres Bricks-Seiten-CSS: .gform-body{padding:0}) */
form.uggf .gform-body, form.uggf .gform_body { padding: 0 !important; }
/* Titel einzeilig – lange Titel/Adressen brachen die mobilen Kopfzeilen auf zwei Zeilen um */
form.uggf .gsection_title, form.uggf .repeater-field-header-title { min-width: 0; }
form.uggf .repeater-field-header > .repeater-field-header { display: flex; align-items: center; gap: 10px; }
form.uggf .repeater-field-header-title { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; }
form.uggf .repeater-field-header-title::before { display: inline-block !important; vertical-align: -5px; }
form.uggf .repeater-field-header-acctions { flex: none; width: auto !important; } /* Plugin-CSS: feste 150 px → Titel wurde zu früh gekürzt */
@media (max-width: 767px) {
	form.uggf .collapsible-sections-field .gsection_title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	/* Aktive Karte: Pille so breit wie die Karte, Karte beginnt exakt an der Pillen-Oberkante → die runden Kartenecken
	   liegen hinter der Pille, links/rechts keine Randbögen mehr. IDs nötig: globale Regel #gform_fields_5/7 … {margin-top:-82px!important} */
	#gform_fields_5 .collapsible-sections-field.collapsible-sections-open, #gform_fields_7 .collapsible-sections-field.collapsible-sections-open { margin-left: 0 !important; margin-right: 0 !important; }
	/* erledigte Karten zeichnen ihren Rahmen global per outline (liegt 1 px außerhalb) – nach innen ziehen, damit die Linie bündig mit der offenen Karte (border) läuft */
	#gform_fields_5 .collapsible-sections-field, #gform_fields_7 .collapsible-sections-field { outline-offset: -1px; }
	/* Karte direkt darüber endet genau in der Pillenmitte (breiteste Stelle) und ohne Unterkante → ihre Seitenlinie läuft durch die Pille in die offene Karte weiter */
	#gform_fields_5 .collapsible-sections-field:has(+ .collapsible-sections-collapsible-body + .collapsible-sections-field.collapsible-sections-open),
	#gform_fields_7 .collapsible-sections-field:has(+ .collapsible-sections-collapsible-body + .collapsible-sections-field.collapsible-sections-open) { border-bottom-color: transparent !important; padding-bottom: 33px !important; margin-bottom: -46px !important; } /* +8 px nach unten, Pille bleibt stehen */
	#gform_fields_5 .collapsible-sections-field.collapsible-sections-open + .collapsible-sections-collapsible-body, #gform_fields_7 .collapsible-sections-field.collapsible-sections-open + .collapsible-sections-collapsible-body { margin-top: var(--uggf-open-offset, -76px) !important; border-top-left-radius: 30px; border-top-right-radius: 30px; }
}
/* mobil: unterste gestapelte Karte unten abrunden; GEE so breit wie VGM (globale Regel gab #gform_5 ungleichen Innenabstand 0 10px 0 20px) */
@media (max-width: 767px) {
	.gform_wrapper form.uggf--gee { padding-left: 0 !important; padding-right: 0 !important; }
	.gform_wrapper.gravity-theme form.uggf .gsection.disabled.uggf-last-step { border-radius: 0 0 31px 31px !important; padding-bottom: 6px !important; }
}

/* Seitenleiste (Desktop) – aus dem bisherigen Bricks-Seiten-CSS übernommen */
.uggf-sidebar .step-sidebar-item { display: flex; flex-direction: row-reverse; justify-content: left; align-items: center; width: 100%; min-width: 250px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.uggf-sidebar .step-sidebar-item:disabled { cursor: default; }
.uggf-sidebar .step-sidebar-item.active { background: #1B1B1B; color: white; border-radius: 40px; }
.uggf-sidebar .step-sidebar-item:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(66, 166, 253, .35); border-radius: 40px; }
.uggf-sidebar .progress-circle-wrapper, form.uggf .progress-circle-wrapper { display: flex; padding: 10px; margin-right: 10px; vertical-align: middle; }
.uggf-sidebar .progress-circle, form.uggf .progress-circle { position: relative; width: 40px; height: 40px; }
.uggf-sidebar .progress-circle circle, form.uggf .progress-circle circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.uggf-sidebar .circle-bg, form.uggf .circle-bg { stroke: #ddd; }
.uggf-sidebar .circle-fg, form.uggf .circle-fg { transition: stroke-dashoffset .3s ease; }

/* Fehlerliste je Schritt (neu: Hinweis, was fehlt) */
form.uggf .uggf-errors { padding: 14px 18px; border-radius: 16px; background: #fdecea; color: var(--uggf-error); font-size: 15px; line-height: 1.45; animation: uggf-rise .3s var(--uggf-ease) both; }
form.uggf .uggf-errors[hidden] { display: none; }
form.uggf .uggf-errors p { margin: 0 0 6px; font-weight: 600; }
form.uggf .uggf-errors ul { margin: 0; padding-left: 18px; }
form.uggf .uggf-errors button { margin: 0; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
form.uggf .uggf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 18px; border: 0; border-radius: 30px; background: var(--uggf-primary); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
form.uggf .uggf-btn:focus-visible { outline: none; box-shadow: var(--uggf-focus); }

/* ---------- PLZ: Optik wie bisher (Pille mit Pin-Icon und Trennstrichen), technisch ein Eingabefeld */
form.uggf .uggf-code { position: relative; display: flex; align-items: center; width: 100%; max-width: 300px; height: 58px; padding: 6px 15px; border: 1px solid #1b1b1b; border-radius: 40px; background: #fff; box-sizing: border-box; transition: border-color .3s, box-shadow .2s; }
form.uggf .uggf-code.is-complete { border-width: 2px; padding: 5px 14px; }
form.uggf .uggf-code__icon { flex: none; width: 30px; height: 30px; margin-right: 10px; background: url("/wp-content/uploads/2024/10/ICON_Marker_24px.svg") center / contain no-repeat; transition: opacity .2s; }
form.uggf .uggf-code.is-ok .uggf-code__icon { background-image: url("/wp-content/uploads/2024/11/ICON_Confirmed_24px.svg"); }
form.uggf .uggf-code.is-no .uggf-code__icon { background-image: url("/wp-content/uploads/2024/12/ICON_Not-Found_24px.svg"); }
form.uggf .uggf-code.is-busy .uggf-code__icon { background: none; border: 2.5px solid rgba(27, 27, 27, .12); border-top-color: var(--uggf-green); border-radius: 50%; width: 22px; height: 22px; margin: 0 14px 0 4px; animation: uggf-spin .7s linear infinite; }
form.uggf .uggf-code__cells { display: flex; flex: 1; padding-right: 10px; }
form.uggf .uggf-code__cell { position: relative; display: grid; place-items: center; flex: 1; height: 30px; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--uggf-t); }
form.uggf .uggf-code__cell + .uggf-code__cell { border-left: 1px solid #1b1b1b; }
form.uggf .uggf-code.is-readonly { pointer-events: none; background: #fff; }
form.uggf .uggf-code.is-readonly input.uggf-code__input { display: none; }
form.uggf .uggf-code__cell.is-caret { box-shadow: inset 0 0 0 2px #1b1b1b; border-radius: 8px; border-left-color: transparent; }
form.uggf .uggf-code__cell.is-caret + .uggf-code__cell { border-left-color: transparent; }
form.uggf .uggf-code__cell.is-caret::after { content: ''; width: 2px; height: 20px; background: var(--uggf-t); animation: uggf-blink 1s steps(1) infinite; }
form.uggf .gfield_error .uggf-code { border-color: var(--uggf-error); }
form.uggf input.uggf-code__input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 40px !important; background: transparent !important; box-shadow: none !important; opacity: 0; font-size: 16px !important; color: transparent !important; caret-color: transparent; cursor: text; transition: none !important; }

/* ---------- Hinweise / Ergebnis */
form.uggf .uggf-checking { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--uggf-soft); animation: uggf-rise .3s var(--uggf-ease) both; }
form.uggf .uggf-checking strong { display: block; }
form.uggf .uggf-checking p { margin: 2px 0 0; color: var(--uggf-muted); font-size: 15px; }
form.uggf .uggf-result { animation: uggf-rise .35s var(--uggf-ease) both; }
form.uggf .uggf-card-link { display: block; color: inherit; text-decoration: none; transition: transform .2s var(--uggf-ease), box-shadow .2s; }
form.uggf .uggf-card-link:hover { transform: translateY(-2px); }
form.uggf .uggf-card-link:focus-visible { outline: none; box-shadow: var(--uggf-focus); }
form.uggf .uggf-card-link .h5 { font-weight: 600; font-size: 18px; }
form.uggf .uggf-error-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: #fdf1ee; color: #7a2e1d; font-size: 15px; line-height: 1.45; animation: uggf-rise .3s var(--uggf-ease) both; }
form.uggf .uggf-error-box p { flex: 1 1 220px; margin: 0; }
form.uggf .uggf-inline-notice:empty { display: none; }
form.uggf .uggf-spin { flex: none; width: 22px; height: 22px; border: 2.5px solid rgba(27, 27, 27, .12); border-top-color: var(--uggf-green); border-radius: 50%; animation: uggf-spin .7s linear infinite; }

/* Laden / gesperrt bei Auswahllisten */
form.uggf .gfield.uggf-loading .ts-control, form.uggf .gfield.uggf-loading select { background-image: none !important; }
form.uggf .ugg-loading .ts-wrapper::after { animation: uggf-spin 1s linear infinite !important; } /* bisheriger Spinner (globale Styles), Animation abgesichert */
form.uggf .gfield.uggf-disabled .ts-control { opacity: .7; }
form.uggf input[readonly] { background: var(--uggf-soft) !important; color: var(--uggf-muted); }

/* ---------- Wohneinheiten: Optik aus den globalen Styles (.number-input-wrapper) – hier nur Button-Technik */
form.uggf .number-input-wrapper .number-minus, form.uggf .number-input-wrapper .number-plus { margin: 0; border: 0; font-family: inherit; line-height: 1; }
form.uggf .number-input-wrapper button:disabled { opacity: .35; cursor: default; }
form.uggf .number-input-wrapper button:focus-visible { outline: none; box-shadow: var(--uggf-focus); border-radius: 50%; }
form.uggf .number-input-wrapper input::-webkit-outer-spin-button, form.uggf .number-input-wrapper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
form.uggf .number-input-wrapper input { -moz-appearance: textfield; }

/* ---------- Radios und Schalter: per Tastatur erreichbar (globale Styles blenden sie mit display:none aus) */
form.uggf .gfield_radio input[type="radio"], form.uggf .toggle-switch-gravity-light input[type="checkbox"] { display: block !important; position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none; }
form.uggf .gfield_radio .gchoice, form.uggf .toggle-switch-gravity-light .gchoice { position: relative; }
form.uggf .gfield_radio input[type="radio"]:focus-visible + label::before, form.uggf .toggle-switch-gravity-light input[type="checkbox"]:focus-visible + label::before { box-shadow: var(--uggf-focus); }
form.uggf .ugg-pills-radio input[type="radio"]:focus-visible + label { box-shadow: var(--uggf-focus); }

/* Unbekannt ausgeblendete Elemente bleiben aus */
form.uggf .gform_required_legend { display: none; }

@keyframes uggf-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes uggf-spin { to { transform: rotate(360deg); } }
@keyframes uggf-blink { 50% { opacity: 0; } }
@keyframes uggf-wave { from { background-color: #fff; } to { background-color: #eef0ef; } }
@media (prefers-reduced-motion: reduce) {
	form.uggf *, .uggf-sidebar * { animation: none !important; transition: none !important; }
	form.uggf .uggf-spin, form.uggf .gfield.uggf-loading .ginput_container::after { animation: uggf-spin 2s linear infinite !important; }
}

/* Icon-Buttons in den Repeater-Kopfzeilen: Optik kommt weiter von den <i>-Icons (globale Styles) */
form.uggf .uggf-icon-btn { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: 1; cursor: pointer; }
form.uggf .uggf-icon-btn[aria-disabled="true"] { cursor: default; opacity: .4; } /* letzte Zeile lässt sich nicht löschen */
form.uggf .uggf-icon-btn:focus-visible { outline: none; box-shadow: var(--uggf-focus); border-radius: 50%; }