/*
 * GF V1 funnel -- Frontend V1 approved design applied to the real Gravity
 * Forms rendering (Frontend V1 visual integration).
 *
 * Strategy: Gravity Forms' Orbital theme already exposes its entire
 * color/type/radius system as CSS custom properties (--gf-color-*,
 * --gf-ctrl-*, --gf-field-pg-*, ...), most of which cascade from a small
 * set of base tokens (e.g. --gf-ctrl-btn-bg-color-primary: var(--gf-color-primary)
 * out of the box). So this file does NOT restyle GF's markup
 * component-by-component or replace it with the design prototype's own
 * HTML/CSS -- it overrides GF's own tokens with the values from
 * docs/design/FRONTEND_V1_DESIGN_SYSTEM.md, scoped to this one form, and
 * lets GF's already-built components (inputs, buttons, checkboxes, the
 * page-steps indicator) pick the new values up through the cascade GF
 * itself already wired. This is "use Gravity Forms semantics... rather
 * than reproducing prototype hacks", not a redesign of GF's rendering.
 *
 * `!important` on every custom property below is NOT decorative -- it is
 * required. Gravity Forms writes each form's own admin-configured theme
 * colors into a dynamically generated, per-form <style> tag targeting
 * `#gform_wrapper_1[data-form-index="0"].gform-theme` (found by directly
 * inspecting the rendered page during this integration, not assumed).
 * That selector is MORE specific than a plain `#gform_wrapper_1` (it adds
 * an attribute selector and a class on top of the same ID), so a plain
 * override here would silently lose regardless of stylesheet load order --
 * exactly the label-color bug this change actually hit and fixed (labels
 * were rendering in GF's own near-black default, invisible against this
 * design's dark-mode card background, because the override wasn't
 * winning). `!important` on a custom property is valid CSS and resolves
 * through every var() consumer normally; it is the robust fix here since
 * GF's exact selector could change between plugin versions.
 *
 * Scoped to #gform_wrapper_1 (Config::CANCELLATION_FORM_ID) only -- this
 * stylesheet is enqueued exclusively for that form
 * (GravityFormsBridge::enqueue_review_assets()), but every rule is scoped
 * anyway so it can never leak into wp-admin or any other form on the site.
 *
 * Values match design/prototypes/frontend-v1/styles.css :root exactly
 * (light) and its `@media (prefers-color-scheme: dark)` block (dark) --
 * copied as literal values here, not shared custom properties, since GF's
 * own token names are the ones actually consumed by its component CSS.
 */

#gform_wrapper_1 {
	--gf-color-primary: #1e73be !important;
	--gf-color-primary-darker: #14538a !important;
	--gf-color-primary-lighter: #e8f1fa !important;
	--gf-color-danger: #c4462b !important;
	--gf-color-success: #1f8a5d !important;

	--gf-radius: 9px !important;
	--gf-ctrl-btn-radius: 10px !important;

	--gf-font-family-base: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
	--gf-font-family-primary: var(--gf-font-family-base) !important;
	--gf-font-family-secondary: var(--gf-font-family-base) !important;
	--gf-font-family-tertiary: var(--gf-font-family-base) !important;
	--gf-ctrl-font-family: var(--gf-font-family-base) !important;
	--gf-ctrl-btn-font-family: var(--gf-font-family-base) !important;
	--gf-ctrl-placeholder-font-family: var(--gf-font-family-base) !important;
	--gf-ctrl-desc-font-family: var(--gf-font-family-base) !important;
	--gf-form-validation-font-family: var(--gf-font-family-base) !important;

	--gf-ctrl-bg-color: #ffffff !important;
	--gf-ctrl-color: #1c2024 !important;
	--gf-ctrl-border-color: #e2e5e9 !important;
	--gf-ctrl-border-color-hover: #1e73be !important;
	--gf-ctrl-border-color-focus: #1e73be !important;
	--gf-ctrl-border-color-error: #c4462b !important;
	--gf-ctrl-bg-color-error: #ffffff !important;
	--gf-ctrl-color-error: #1c2024 !important;
	/* Visible keyboard focus (accessibility baseline, not decorative) --
	 * verified directly: leaving this at GF's own value produced only an
	 * 8%-opacity box-shadow with no outline, an insufficient focus
	 * indicator. GF already reads --gf-ctrl-outline-width-focus (3px) /
	 * -style (solid) as defaults; only the color needed setting. */
	--gf-ctrl-outline-color-focus: #1e73be !important;
	/* Typography contrast pass (task brief §9): darkened from the
	 * original #667085 for better headroom above WCAG AA's 4.5:1 minimum
	 * for normal-size text -- #667085 on white measured ~4.97:1 (a pass,
	 * but with little margin); #4f5b68 measures noticeably higher while
	 * staying the same neutral gray-blue hue, not a harsh black/white
	 * swap. Applied consistently everywhere this token/value is used
	 * (labels, descriptions, review dt/service/trust text below). */
	--gf-ctrl-placeholder-color: #4f5b68 !important;

	--gf-ctrl-label-color-primary: #4f5b68 !important;
	--gf-ctrl-label-font-weight-primary: 600 !important;
	--gf-ctrl-label-color-req: #c4462b !important;
	/* Checkbox/radio CHOICE labels (e.g. the legal declaration text next to
	 * each checkbox) render via a separate "secondary/tertiary/quaternary"
	 * label token set, not -primary -- found by inspecting the rendered
	 * legal-consent page directly: without these, choice text rendered in
	 * GF's own near-black default, unreadable against this design's dark
	 * card background. */
	--gf-ctrl-label-color-secondary: #1c2024 !important;
	--gf-ctrl-label-color-tertiary: #1c2024 !important;
	--gf-ctrl-label-color-quaternary: #1c2024 !important;

	--gf-ctrl-desc-color: #4f5b68 !important;
	--gf-ctrl-desc-color-error: #c4462b !important;

	--gf-ctrl-choice-check-color: #1e73be !important;

	--gf-form-validation-color: #c4462b !important;
	--gf-form-validation-border-color: #c4462b !important;
	--gf-form-validation-bg-color: #fdf2ef !important;
	--gf-form-validation-heading-color: #c4462b !important;

	--gf-field-pg-steps-number-bg-color-active: #1e73be !important;
	--gf-field-pg-steps-number-border-color-active: #1e73be !important;
	--gf-field-pg-steps-number-color-active: #ffffff !important;
	--gf-field-pg-steps-number-bg-color-complete: #1e73be !important;
	--gf-field-pg-steps-number-border-color-complete: #1e73be !important;
	--gf-field-pg-steps-number-color-complete: #ffffff !important;
	--gf-field-pg-prog-color: #667085 !important;

	/* Card treatment (docs/design/FRONTEND_V1_DESIGN_SYSTEM.md "Layout") --
	 * the funnel's own dedicated container, not a site-wide reset.
	 * Padding reduced ~20% (compact density pass, task brief §8). */
	max-width: 760px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin-inline: auto !important;
	background: #ffffff !important;
	border: 1px solid #e2e5e9 !important;
	border-radius: 16px !important;
	box-shadow: 0 24px 48px -24px rgba(20, 30, 40, 0.22), 0 2px 6px rgba(20, 30, 40, 0.06) !important;
	padding: 16px 20px 20px !important;
}

@media (max-width: 767px) {
	#gform_wrapper_1 {
		max-width: 100% !important;
		padding-inline: 16px !important;
	}
}

@media (prefers-color-scheme: dark) {
	#gform_wrapper_1:not([data-theme="light"]) {
		--gf-color-primary: #5aa3e0 !important;
		--gf-color-primary-darker: #7fb8e8 !important;
		--gf-color-primary-lighter: #1e2c39 !important;
		--gf-color-danger: #c4462b !important;
		--gf-color-success: #4fbe8b !important;

		--gf-ctrl-bg-color: #1b2126 !important;
		--gf-ctrl-color: #edeff1 !important;
		--gf-ctrl-border-color: #2a3138 !important;
		--gf-ctrl-border-color-hover: #5aa3e0 !important;
		--gf-ctrl-border-color-focus: #5aa3e0 !important;
		--gf-ctrl-outline-color-focus: #5aa3e0 !important;
		--gf-ctrl-bg-color-error: #1b2126 !important;
		--gf-ctrl-color-error: #edeff1 !important;
		--gf-ctrl-placeholder-color: #9aa4ae !important;

		--gf-ctrl-label-color-primary: #9aa4ae !important;
		--gf-ctrl-label-color-secondary: #edeff1 !important;
		--gf-ctrl-label-color-tertiary: #edeff1 !important;
		--gf-ctrl-label-color-quaternary: #edeff1 !important;
		--gf-ctrl-desc-color: #9aa4ae !important;
		--gf-ctrl-choice-check-color: #5aa3e0 !important;

		--gf-form-validation-bg-color: #2a1c18 !important;
		--gf-field-pg-steps-number-bg-color-active: #5aa3e0 !important;
		--gf-field-pg-steps-number-border-color-active: #5aa3e0 !important;
		--gf-field-pg-steps-number-bg-color-complete: #5aa3e0 !important;
		--gf-field-pg-steps-number-border-color-complete: #5aa3e0 !important;
		--gf-field-pg-prog-color: #9aa4ae !important;

		background: #1b2126 !important;
		border-color: #2a3138 !important;
		box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
	}
}

/* AboStopp Prototype Go Live: one explicit light form surface inside the
 * pine product stage. This selector follows the server-rendered theme lock
 * and intentionally wins over the historical OS-dark-mode branch above. */
#gform_wrapper_1[data-theme="light"] {
	--gf-color-primary: #B7F36B !important;
	--gf-color-primary-darker: #9CE04A !important;
	--gf-color-primary-lighter: #E4F3EA !important;
	--gf-color-danger: #AF4034 !important;
	--gf-color-success: #0E7A4B !important;
	--gf-ctrl-bg-color: #F5F8F6 !important;
	--gf-ctrl-color: #0C1A14 !important;
	--gf-ctrl-border-color: #DCE6E0 !important;
	--gf-ctrl-border-color-hover: #0E7A4B !important;
	--gf-ctrl-border-color-focus: #0E7A4B !important;
	--gf-ctrl-outline-color-focus: #0E7A4B !important;
	--gf-ctrl-placeholder-color: #6E827A !important;
	--gf-ctrl-label-color-primary: #6E827A !important;
	--gf-ctrl-label-color-secondary: #0C1A14 !important;
	--gf-ctrl-label-color-tertiary: #0C1A14 !important;
	--gf-ctrl-label-color-quaternary: #0C1A14 !important;
	--gf-ctrl-desc-color: #6E827A !important;
	--gf-ctrl-choice-check-color: #0E7A4B !important;
	--gf-ctrl-btn-bg-color-primary: #B7F36B !important;
	--gf-ctrl-btn-bg-color-hover-primary: #9CE04A !important;
	--gf-ctrl-btn-color-primary: #173318 !important;
	--gf-ctrl-btn-color-hover-primary: #173318 !important;
	background: #FFFFFF !important;
	border-color: #DCE6E0 !important;
	box-shadow: 0 20px 60px -30px rgba(11,59,42,.30) !important;
}

/* --- Review page: price/legal-declaration treatment not covered by GF's
 * own field-level tokens above (these are AboStopp-authored markup inside
 * the review `html` field's content, see
 * GravityFormsBridge::apply_review_summary_content()). --- */

#gform_wrapper_1 .abostopp-review__heading {
	color: #1c2024;
}

#gform_wrapper_1 .abostopp-review__list dt {
	/* Typography contrast pass (task brief §9) -- see the token comment
	 * above; same darkened value used consistently for muted/secondary
	 * text throughout the funnel. */
	color: #4f5b68;
}

#gform_wrapper_1 .abostopp-review__list dd {
	color: #1c2024;
}

#gform_wrapper_1 .abostopp-review__service,
#gform_wrapper_1 .abostopp-review__trust {
	font-size: 13.5px;
	line-height: 1.55;
	color: #4f5b68;
}

#gform_wrapper_1 .abostopp-review__service {
	background: #f7f8f9;
	border: 1px solid #e2e5e9;
	border-radius: 12px;
	/* Compact density pass (task brief §8) -- ~20% less padding/margin. */
	padding: 11px 13px;
	margin: 4px 0 16px;
}

#gform_wrapper_1 .abostopp-review__trust {
	font-size: 11.5px;
	margin: 6px 0 4px;
}

@media (prefers-color-scheme: dark) {
	#gform_wrapper_1:not([data-theme="light"]) .abostopp-review__heading {
		color: #edeff1;
	}
	#gform_wrapper_1:not([data-theme="light"]) .abostopp-review__list dt {
		color: #9aa4ae;
	}
	#gform_wrapper_1:not([data-theme="light"]) .abostopp-review__list dd {
		color: #edeff1;
	}
	#gform_wrapper_1:not([data-theme="light"]) .abostopp-review__service {
		background: #20272d;
		border-color: #2a3138;
	}
	#gform_wrapper_1:not([data-theme="light"]) .abostopp-review__service,
	#gform_wrapper_1:not([data-theme="light"]) .abostopp-review__trust {
		color: #9aa4ae;
	}
}

/*
 * Seite 1 als Dokument (Ownerentscheidung 2026-09-04).
 *
 * Der Kunde traegt seine Daten sichtbar in das Schreiben ein: Absenderblock,
 * Betreffzeile, Vertragsangaben. Seite 2 bleibt Pruefen und Zahlen.
 *
 * Die Reihenfolge steht NICHT hier. Sie wird serverseitig im DOM gesetzt
 * (GravityFormsBridge::flatten_checkout_form()), weil `order` nur die Optik
 * verschiebt: Tab-Reihenfolge und Screenreader folgen weiter dem DOM, und
 * diese Divergenz verstoesst gegen WCAG 1.3.2 und 2.4.3. Dieses Stylesheet
 * macht deshalb nur Breiten, Flaeche und Typografie -- faellt es aus, bleibt
 * ein normales Formular in bereits richtiger Reihenfolge stehen.
 *
 * Die Struktur stammt aus dem gerenderten Markup der Produktionsseite.
 */
#gform_wrapper_1 #gform_page_1_1 .gform_page_fields {
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 60px);
	border: 1px solid #cfc9c1;
	border-radius: 6px;
	background: #FFFFFF;
	box-shadow: 0 24px 60px -32px rgba(24, 20, 16, .45);
	color: #1d1a16;
	/* Native Bedienelemente sollen zur hellen Flaeche passen, auch wenn das
	   System dunkel steht -- sonst rendert der Browser dunkle Datepicker und
	   Radios auf weissem Papier. */
	color-scheme: light;
}

#gform_wrapper_1 #gform_fields_1 {
	grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
	row-gap: 18px !important;
}

/* Der Briefkopf sind drei Zeilen, so wie sie im Brief stehen: Vor- und
   Nachname bilden den Namen, die Strasse steht allein, Postleitzahl und Ort
   bilden die Ortszeile. Nur diese beiden Paare teilen sich eine Zeile. */
#gform_wrapper_1 #field_1_2 { grid-column: span 6 !important; }
#gform_wrapper_1 #field_1_3 { grid-column: span 6 !important; }
#gform_wrapper_1 #field_1_4 { grid-column: span 12 !important; }
/* PLZ hatte drei von zwoelf Spalten -- fuenf Ziffern passten hinein, das
   Feld sah daneben aber wie ein Rest aus. Vier zu acht liest sich als Paar. */
#gform_wrapper_1 #field_1_5 { grid-column: span 4 !important; }
#gform_wrapper_1 #field_1_6 { grid-column: span 8 !important; }

/* Alles ab dem Empfaenger steht in einer Spalte. Einzelne Paare mittendrin
   liessen die Seite versetzt wirken, ohne dass die Paarung etwas bedeutet
   haette -- Geburtsdatum und Mobilnummer gehoeren im Brief nicht zusammen. */
#gform_wrapper_1 #field_1_30 { grid-column: 1 / -1 !important; }
#gform_wrapper_1 #field_1_7  { grid-column: 1 / -1 !important; }
#gform_wrapper_1 #field_1_11 { grid-column: 1 / -1 !important; }
#gform_wrapper_1 #field_1_16 { grid-column: 1 / -1 !important; }
#gform_wrapper_1 #field_1_8  { grid-column: 1 / -1 !important; }
#gform_wrapper_1 #field_1_17 { grid-column: span 12 !important; }
#gform_wrapper_1 #field_1_18 { grid-column: span 12 !important; }
#gform_wrapper_1 #field_1_21 { grid-column: span 12 !important; }
#gform_wrapper_1 #field_1_12 { grid-column: span 12 !important; }
#gform_wrapper_1 #field_1_20 { grid-column: span 12 !important; }

/* Die Spannen oben sind per ID gesetzt und wuerden sonst auch GFs eigene
   Vollbreiten-Regeln fuer schmale Viewports schlagen. Deshalb hier explizit
   zurueck auf eine Spalte, statt Vorname und Nachname auf 320px nebeneinander
   zu quetschen. */
@media (max-width: 640px) {
	#gform_wrapper_1 #gform_page_1_1 #gform_fields_1 > .gfield {
		grid-column: 1 / -1 !important;
	}
}

/* Abschnittsmarken wie "Absender" oder "Vertragsangaben" standen hier
   zunaechst als generierter Inhalt. Sie sind wieder entfernt: fuer Sehende
   waren sie Gruppenbeschriftungen, fuer alles andere nicht vorhanden, und
   ein Kommentar, der sie zu Dekoration erklaert, aendert daran nichts. Der
   Brief liest sich auch ohne sie -- Absenderblock oben, Betreff, dann die
   Vertragsangaben mit ihren eigenen Labels. Sollen die Marken zurueck,
   gehoeren sie als echte Ueberschriften oder Legenden ins Markup. */
/* Der Empfaenger steht im Brief abgesetzt unter dem Absender. */
#gform_wrapper_1 #field_1_30 {
	margin-top: 14px;
	padding-top: 18px;
	border-top: 1px solid rgba(29, 26, 22, .18);
}

#gform_wrapper_1 #gform_page_1_1 .gfield_label {
	color: #423c34 !important;
	font-size: .82rem !important;
	font-weight: 600 !important;
}

#gform_wrapper_1 #gform_page_1_1 .gfield_description {
	color: #423c34 !important;
}

#gform_wrapper_1 #gform_page_1_1 .gform_page_fields input[type="text"],
#gform_wrapper_1 #gform_page_1_1 .gform_page_fields input[type="email"],
#gform_wrapper_1 #gform_page_1_1 .gform_page_fields input[type="tel"] {
	border: none !important;
	border-bottom: 2px solid rgba(29, 26, 22, .55) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #1d1a16 !important;
	font-size: 1.02rem !important;
}

#gform_wrapper_1 #gform_page_1_1 .gform_page_fields input[type="text"]:focus,
#gform_wrapper_1 #gform_page_1_1 .gform_page_fields input[type="email"]:focus,
#gform_wrapper_1 #gform_page_1_1 .gform_page_fields input[type="tel"]:focus {
	border-bottom-color: #1d1a16 !important;
	outline: 2px solid #1d1a16;
	outline-offset: 4px;
}

@media (forced-colors: active) {
	#gform_wrapper_1 #gform_page_1_1 .gform_page_fields input[type="text"],
	#gform_wrapper_1 #gform_page_1_1 .gform_page_fields input[type="email"],
	#gform_wrapper_1 #gform_page_1_1 .gform_page_fields input[type="tel"] {
		border-bottom-color: CanvasText !important;
	}

	#gform_wrapper_1 #gform_page_1_1 .gform_page_fields input:focus {
		outline-color: Highlight;
	}
}