/* ==========================================================================
   vh-form-layout.css
   Einheitliches Layout + Optik fuer ALLE Dokument-Generator-Seiten.
   Gescoped auf body.vh-generate (per body_class-Filter in functions.php an
   Seiten mit Slug "generate*" gehaengt). Ohne diese Klasse voellig inert.

   Erkennung einer SICHTBAREN PDF-Vorschau:
   Gravity Forms rendert das Vorschau-Feld als .gfield--type-pdfpreview und
   markiert jedes Feld mit .gfield_visibility_visible ODER
   .gfield_visibility_hidden. Ein bloss vorhandenes .gpdf-previewer-wrapper
   reicht NICHT: Vertraege (z.B. Einzelvollmacht) haben das Feld auf
   "ausgeblendet" gesetzt -> es darf nicht als Vorschau zaehlen, sonst bleibt
   rechts eine leere Spalte. Massgeblich ist daher:
        .gfield--type-pdfpreview.gfield_visibility_visible

   Faelle:
   A) MIT sichtbarer Vorschau  -> Felder links, Vorschau rechts/sticky.
   B) OHNE Vorschau, OHNE JS    -> Felder mehrspaltig (Fallback, siehe 3B).
   C) OHNE Vorschau, MIT JS     -> Abschnitte werden per vh-form-layout.js in
      .vh-fieldset gruppiert; kurze Abschnitte stehen NEBENEINANDER, grosse
      ueberspannen die volle Breite. So wird der Platz genutzt und weniger
      gescrollt. Erkennbar an .gform_fields[data-vh-grouped].

   Markenfarbe: Violett #582488.
   ========================================================================== */

/* --- 1) Volle Breite fuer das Formular, unabhaengig vom Template ---------- */
body.vh-generate #primary.content-area,
body.vh-generate #primary {
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
}
body.vh-generate #secondary {
	display: none;
}
body.vh-generate .entry-content {
	max-width: min(1680px, 95vw);
	margin-left: auto;
	margin-right: auto;
}
body.vh-generate .container {
	max-width: min(1720px, 96vw);
	width: 100%;
}

/* Seitentitel enger an das Formular ruecken: das Theme setzt hier margin-top
   60px / margin-bottom 80px, was oben viel Leerraum erzeugt. Hohe Spezifitaet
   + !important, um die Theme-/Customizer-Regel sicher zu ueberschreiben. */
body.vh-generate .entry-title,
body.vh-generate h1.entry-title.h1-page {
	/* margin-top NICHT anfassen: das Theme haelt den Titel damit unter der
	   fixierten Navbar frei. Nur den grossen Abstand nach unten kappen. */
	margin-bottom: 1.25rem !important;
}

/* Ausgeblendete Gravity-Forms-Felder duerfen im Grid keine Luecken reissen.
   Betrifft auch das auf "ausgeblendet" gesetzte PDF-Vorschau-Feld der Vertraege. */
body.vh-generate .gform_fields > .gfield_visibility_hidden,
body.vh-generate .gform_fields > .gform_hidden,
body.vh-generate .vh-fieldset__body > .gfield_visibility_hidden,
body.vh-generate .vh-fieldset__body > .gform_hidden {
	display: none !important;
}

/* --- 2) Optischer Refresh (Marke #582488, ueberall gleich) ---------------- */
body.vh-generate .gform_wrapper .gsection {
	border-bottom: 2px solid #582488;
	margin: 1.75rem 0 1.1rem;
	padding-bottom: .45rem;
}
body.vh-generate .gform_wrapper .gsection_title,
body.vh-generate .gform_wrapper .gsection .gfield_label {
	color: #582488;
	font-weight: 700;
}
body.vh-generate .gform_wrapper .gfield_label {
	font-weight: 600;
}
body.vh-generate .gform_wrapper .gfield {
	margin-bottom: .35rem;
}
body.vh-generate .gform_wrapper input[type="text"],
body.vh-generate .gform_wrapper input[type="email"],
body.vh-generate .gform_wrapper input[type="tel"],
body.vh-generate .gform_wrapper input[type="number"],
body.vh-generate .gform_wrapper input[type="date"],
body.vh-generate .gform_wrapper input[type="password"],
body.vh-generate .gform_wrapper select,
body.vh-generate .gform_wrapper textarea {
	border: 1px solid #d8d2e2;
	border-radius: 8px;
	padding: .6rem .75rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.vh-generate .gform_wrapper input[type="text"]:focus,
body.vh-generate .gform_wrapper input[type="email"]:focus,
body.vh-generate .gform_wrapper input[type="tel"]:focus,
body.vh-generate .gform_wrapper input[type="number"]:focus,
body.vh-generate .gform_wrapper input[type="date"]:focus,
body.vh-generate .gform_wrapper input[type="password"]:focus,
body.vh-generate .gform_wrapper select:focus,
body.vh-generate .gform_wrapper textarea:focus {
	border-color: #582488;
	box-shadow: 0 0 0 3px rgba(88, 36, 132, .15);
	outline: none;
}

/* Submit-Button */
body.vh-generate .gform_footer input[type="submit"],
body.vh-generate .gform_footer button.gform_button {
	background: #582488;
	border: none;
	border-radius: 10px;
	padding: .85rem 2.1rem;
	font-weight: 600;
	color: #fff;
	transition: background .15s ease, transform .05s ease;
}
body.vh-generate .gform_footer input[type="submit"]:hover,
body.vh-generate .gform_footer button.gform_button:hover {
	background: #4a1e73;
}
body.vh-generate .gform_footer input[type="submit"]:active,
body.vh-generate .gform_footer button.gform_button:active {
	transform: translateY(1px);
}

/* PDF-Vorschau als Karte (nur sichtbare) */
body.vh-generate .gfield--type-pdfpreview.gfield_visibility_visible {
	background: #ffffff;
	border: 1px solid #e7e2ef;
	border-radius: 14px;
	padding: 18px 18px 20px;
	box-shadow: 0 10px 30px rgba(88, 36, 132, .08);
}
body.vh-generate .gpdf-previewer-wrapper iframe,
body.vh-generate .gpdf-previewer-wrapper canvas {
	width: 100% !important;
	border-radius: 8px;
}

/* --- 3A) MIT sichtbarer Vorschau: Felder links / Vorschau rechts ---------- */
@media (min-width: 992px) {
	body.vh-generate .gform_fields:has(.gfield--type-pdfpreview.gfield_visibility_visible) {
		display: grid !important;
		grid-template-columns: minmax(0, 640px) minmax(0, 1fr) !important;
		column-gap: 3rem !important;
		row-gap: 0 !important;
		align-items: start;
	}
	body.vh-generate .gform_fields:has(.gfield--type-pdfpreview.gfield_visibility_visible) > .gfield {
		grid-column: 1 !important;
		max-width: 100%;
		margin-bottom: 1.35rem !important;
	}
	body.vh-generate .gform_fields:has(.gfield--type-pdfpreview.gfield_visibility_visible) > .gfield--type-pdfpreview.gfield_visibility_visible {
		grid-column: 2 !important;
		grid-row: 1 / span 200 !important;
		position: sticky;
		top: 90px;
		align-self: start;
		margin-bottom: 0 !important;
	}
	body.vh-generate .gpdf-previewer-wrapper {
		max-height: calc(100vh - 140px);
		overflow: auto;
	}
}

/* --- 3B) OHNE Vorschau, OHNE JS (Fallback): Felder direkt mehrspaltig ------
   Greift nur solange die Liste noch NICHT per JS gruppiert wurde. */
@media (min-width: 768px) {
	body.vh-generate .gform_fields:not([data-vh-grouped]):not(:has(.gfield--type-pdfpreview.gfield_visibility_visible)) {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: 2.5rem !important;
		row-gap: 0 !important;
		align-items: start;
	}
	body.vh-generate .gform_fields:not([data-vh-grouped]):not(:has(.gfield--type-pdfpreview.gfield_visibility_visible)) > .gfield {
		grid-column: auto;
		margin-bottom: 1.1rem !important;
	}
	body.vh-generate .gform_fields:not([data-vh-grouped]):not(:has(.gfield--type-pdfpreview.gfield_visibility_visible)) > .gsection,
	body.vh-generate .gform_fields:not([data-vh-grouped]):not(:has(.gfield--type-pdfpreview.gfield_visibility_visible)) > .gfield:has(textarea),
	body.vh-generate .gform_fields:not([data-vh-grouped]):not(:has(.gfield--type-pdfpreview.gfield_visibility_visible)) > .gfield:has(.ginput_container_address),
	body.vh-generate .gform_fields:not([data-vh-grouped]):not(:has(.gfield--type-pdfpreview.gfield_visibility_visible)) > .gfield:has(.gfield_list),
	body.vh-generate .gform_fields:not([data-vh-grouped]):not(:has(.gfield--type-pdfpreview.gfield_visibility_visible)) > .gfield--width-full,
	body.vh-generate .gform_fields:not([data-vh-grouped]):not(:has(.gfield--type-pdfpreview.gfield_visibility_visible)) > .gfield.gf_full {
		grid-column: 1 / -1 !important;
	}
}

/* --- 3C) OHNE Vorschau, MIT JS: Abschnitte als Raster --------------------- */
/* Mobile-Basis: Sobald per JS gruppiert, enthaelt .gform_fields nur noch
   .vh-fieldset-Wrapper. Ohne diese Regel wuerde das Standard-Raster von
   Gravity Forms (12 Spalten) die Wrapper auf 1/12 Breite quetschen. Daher
   hier explizit gestapelt / volle Breite; ab 880px folgt das 2er-Raster. */
body.vh-generate .gform_fields[data-vh-grouped] {
	display: block;
}
body.vh-generate .gform_fields[data-vh-grouped] > .vh-fieldset {
	width: 100%;
	min-width: 0;
}
body.vh-generate .vh-fieldset {
	min-width: 0;
}
/* Abschnittstitel sitzt jetzt direkt im Container; Abstand nach oben nur,
   wenn ein Titel vorhanden ist. Erste Zeile nicht zu weit nach unten druecken. */
body.vh-generate .gform_fields[data-vh-grouped] > .vh-fieldset > .gsection {
	margin-top: 0;
}

@media (min-width: 880px) {
	/* Das Abschnitts-Raster: zwei gleich breite Spalten. */
	body.vh-generate .gform_fields[data-vh-grouped] {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 3rem;
		row-gap: 1.25rem;
		align-items: start;
	}
	/* Grosse Abschnitte ueber die volle Breite. */
	body.vh-generate .gform_fields[data-vh-grouped] > .vh-fieldset--wide {
		grid-column: 1 / -1;
	}
	/* Kurze Abschnitte: Felder untereinander (Container ist bereits halbbreit;
	   Namens-/Adress-Unterfelder behalten ihr eigenes zweispaltiges Raster). */
	body.vh-generate .gform_fields[data-vh-grouped] > .vh-fieldset:not(.vh-fieldset--wide) .vh-fieldset__body > .gfield {
		margin-bottom: 1.1rem;
	}
	/* Breite Abschnitte: kurze Felder zweispaltig, grosse ueber die ganze Zeile. */
	body.vh-generate .vh-fieldset--wide .vh-fieldset__body {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 3rem;
		row-gap: 0;
		align-items: start;
	}
	/* Basis: Gravity Forms setzt jedes .gfield auf grid-column:1/-1 (volle
	   Zeile). Fuer kurze Felder zuruecksetzen, damit sie zweispaltig fliessen. */
	body.vh-generate .vh-fieldset--wide .vh-fieldset__body > .gfield {
		grid-column: auto;
		margin-bottom: 1.1rem;
	}
	body.vh-generate .vh-fieldset--wide .vh-fieldset__body > .gsection,
	body.vh-generate .vh-fieldset--wide .vh-fieldset__body > .gfield:has(textarea),
	body.vh-generate .vh-fieldset--wide .vh-fieldset__body > .gfield:has(.ginput_container_address),
	body.vh-generate .vh-fieldset--wide .vh-fieldset__body > .gfield:has(.gfield_list),
	body.vh-generate .vh-fieldset--wide .vh-fieldset__body > .gfield--width-full,
	body.vh-generate .vh-fieldset--wide .vh-fieldset__body > .gfield.gf_full {
		grid-column: 1 / -1;
	}
}