/* =============================================================================
   40-gravityforms.css — Formular-Layer
   =============================================================================

   Wird über functions.php nur geladen, wenn Gravity Forms aktiv ist.
   (Aktuell auf invoicepress.de installiert, aber noch deaktiviert —
   sobald aktiviert, greift diese Datei automatisch.)

   Aufbau in zwei Stufen:

     1. Theme-Framework-Variablen (Abschnitt 1)
        Bequem, aber versionsabhängig: Gravity Forms hat die Variablennamen
        zwischen 2.7, 2.8 und 3.x erweitert. Der Block ist bewusst klein
        gehalten und rein additiv — falls eine Variable in der installierten
        Version anders heißt, passiert nichts Schlimmes, dann greifen die
        Regeln aus Stufe 2.

     2. Direkte Selektoren (Abschnitt 2 ff.)
        Das ist der tragende Teil. Diese Klassen sind seit GF 2.5 stabil.

   Erst nach dem Aktivieren von Gravity Forms einmal ein Formular
   gegenprüfen — insbesondere Abschnitt 1.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Theme-Framework-Variablen (Komfort-Ebene, versionsabhängig)
   -------------------------------------------------------------------------- */

#top .gform_wrapper,
#top .gform-theme,
#top .gform-theme--framework,
#top .gform-theme--foundation {
	--gf-color-primary: var(--sp-accent);
	--gf-color-primary-contrast: #ffffff;
	--gf-color-primary-darker: var(--sp-ink);
	--gf-color-primary-lighter: var(--sp-accent-soft);

	--gf-color-secondary: var(--sp-panel);
	--gf-color-secondary-contrast: var(--sp-ink);

	--gf-color-in-ctrl: var(--sp-panel);
	--gf-color-in-ctrl-contrast: var(--sp-ink);

	--gf-radius: var(--sp-radius);
	--gf-ctrl-radius: var(--sp-radius);
	--gf-ctrl-border-color: var(--sp-rule-strong);
	--gf-ctrl-btn-radius: var(--sp-radius);

	--gf-local-radius: var(--sp-radius);
}


/* -----------------------------------------------------------------------------
   2. Rahmen des Formulars
   -------------------------------------------------------------------------- */

#top .gform_wrapper {
	font-family: var(--sp-font-body);
	color: var(--sp-ink);
}

#top .gform_wrapper .gform_heading {
	margin-bottom: var(--sp-space-5);
}

#top .gform_wrapper .gform_title {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-medium);
	font-size: var(--sp-fs-xl);
	letter-spacing: var(--sp-tracking-tight);
	color: var(--sp-ink);
	margin-bottom: var(--sp-space-2);
}

#top .gform_wrapper .gform_description {
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-base);
	color: var(--sp-ink-2);
	max-width: var(--sp-measure);
	display: block;
}

#top .gform_wrapper .gform_required_legend {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	color: var(--sp-ink-3);
}


/* -----------------------------------------------------------------------------
   3. Label, Beschreibung, Pflichtfeld
   -------------------------------------------------------------------------- */

#top .gform_wrapper .gfield_label,
#top .gform_wrapper legend.gfield_label {
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-sm);
	font-weight: var(--sp-fw-semibold);
	color: var(--sp-ink);
	margin-bottom: var(--sp-space-2);
	line-height: var(--sp-lh-snug);
}

#top .gform_wrapper .gfield_required,
#top .gform_wrapper .gfield_required .gfield_required_text {
	color: var(--sp-error);
	font-weight: var(--sp-fw-semibold);
	margin-left: 3px;
}

#top .gform_wrapper .gfield_description {
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-base);
	color: var(--sp-ink-3);
	padding-top: var(--sp-space-2);
}

/* Abschnitts-Trenner im Formular (z. B. "Rechnungsdaten"). */
#top .gform_wrapper .gsection {
	border-bottom: var(--sp-border);
	padding-bottom: var(--sp-space-2);
	margin-top: var(--sp-space-5);
}

#top .gform_wrapper .gsection .gsection_title {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	font-weight: var(--sp-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-eyebrow);
	color: var(--sp-brand);
}


/* -----------------------------------------------------------------------------
   4. Eingabefelder
   -------------------------------------------------------------------------- */

#top .gform_wrapper input[type="text"],
#top .gform_wrapper input[type="email"],
#top .gform_wrapper input[type="url"],
#top .gform_wrapper input[type="tel"],
#top .gform_wrapper input[type="number"],
#top .gform_wrapper input[type="password"],
#top .gform_wrapper input[type="date"],
#top .gform_wrapper select,
#top .gform_wrapper textarea {
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-snug);
	color: var(--sp-ink);
	background-color: var(--sp-panel);
	border: var(--sp-border-strong);
	border-radius: var(--sp-radius);
	padding: 11px 12px;
	box-shadow: none;
	transition: border-color var(--sp-transition);
	width: 100%;
}

#top .gform_wrapper input:focus,
#top .gform_wrapper select:focus,
#top .gform_wrapper textarea:focus {
	border-color: var(--sp-brand);
	outline: none;
	box-shadow: none;
}

#top .gform_wrapper input::placeholder,
#top .gform_wrapper textarea::placeholder {
	color: var(--sp-ink-3);
	opacity: 1;
}

#top .gform_wrapper input:disabled,
#top .gform_wrapper select:disabled,
#top .gform_wrapper textarea:disabled {
	background-color: var(--sp-panel-alt);
	color: var(--sp-ink-3);
}

/* Auswahlfelder */
#top .gform_wrapper .gfield_checkbox label,
#top .gform_wrapper .gfield_radio label {
	font-size: var(--sp-fs-sm);
	color: var(--sp-ink-2);
	font-weight: var(--sp-fw-normal);
}

#top .gform_wrapper input[type="checkbox"],
#top .gform_wrapper input[type="radio"] {
	accent-color: var(--sp-brand);
}

/* Einwilligungsfeld (DSGVO) hervorheben. */
#top .gform_wrapper .ginput_container_consent {
	background-color: var(--sp-panel-alt);
	border: var(--sp-border);
	border-left: 3px solid var(--sp-brand);
	padding: var(--sp-space-3) var(--sp-space-4);
	font-size: var(--sp-fs-sm);
}


/* -----------------------------------------------------------------------------
   5. Eigene Feldtypen (specialPress / (e)invoicePress)
   -----------------------------------------------------------------------------
   Strukturierte Kennungen gehören in Monospace — USt-IdNr., IBAN/BIC,
   Leitweg-ID, EN-16931-Kennungen. Zwei Wege:

     a) automatisch über den Feldtyp bzw. die Feld-ID (best effort, unten)
     b) verlässlich über "Erweitert → Benutzerdefinierte CSS-Klasse" im
        Feld-Editor: dort sp-mono-field eintragen

   Die Selektoren unter (a) bitte an die tatsächlichen Klassennamen der
   eigenen Feld-Plugins anpassen, sobald die Formulare stehen.
   -------------------------------------------------------------------------- */

#top .gform_wrapper .sp-mono-field input,
#top .gform_wrapper .sp-mono-field textarea,
#top .gform_wrapper [class*="gfield--type-en16931"] input,
#top .gform_wrapper [class*="gfield--type-vat"] input,
#top .gform_wrapper [class*="gfield--type-sepa"] input,
#top .gform_wrapper [class*="gfield--type-iban"] input,
#top .gform_wrapper input[id*="vat"],
#top .gform_wrapper input[id*="iban"],
#top .gform_wrapper input[id*="leitweg"] {
	font-family: var(--sp-font-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* EN-16931-Kennung als Badge neben dem Label — im Feld-Editor per
   Beschreibung oder Label-HTML einsetzbar: <span class="sp-bt">BT-48</span> */
#top .gform_wrapper .sp-bt {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	font-weight: var(--sp-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-wide);
	color: var(--sp-brand);
	background-color: var(--sp-brand-soft);
	border-radius: var(--sp-radius);
	padding: 2px 7px;
	margin-left: var(--sp-space-2);
	white-space: nowrap;
}


/* -----------------------------------------------------------------------------
   6. Datei-Upload — für XML-/Prüfbericht-Uploads
   -------------------------------------------------------------------------- */

#top .gform_wrapper .gform_fileupload_multifile .gform_drop_area,
#top .gform_wrapper .gform_drop_area {
	background-color: var(--sp-panel-alt);
	border: 1px dashed var(--sp-rule-strong);
	border-radius: var(--sp-radius);
	color: var(--sp-ink-2);
	font-size: var(--sp-fs-sm);
	padding: var(--sp-space-6);
	text-align: center;
	transition: border-color var(--sp-transition), background-color var(--sp-transition);
}

#top .gform_wrapper .gform_drop_area:hover {
	border-color: var(--sp-brand);
	background-color: var(--sp-brand-soft);
}

#top .gform_wrapper .gform_drop_instructions {
	color: var(--sp-ink-3);
	font-size: var(--sp-fs-sm);
	display: block;
	margin-bottom: var(--sp-space-3);
}

#top .gform_wrapper .ginput_preview,
#top .gform_wrapper .gform_delete_file {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
}


/* -----------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

#top .gform_wrapper .gform_button,
#top .gform_wrapper .gform_next_button,
#top .gform_wrapper .gform_previous_button,
#top .gform_wrapper input[type="submit"],
#top .gform_wrapper button.gform-button {
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-sm);
	font-weight: var(--sp-fw-semibold);
	line-height: 1.2;
	padding: 13px 24px;
	border-radius: var(--sp-radius);
	border: var(--sp-border-width) solid var(--sp-accent);
	background-color: var(--sp-accent);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--sp-transition), border-color var(--sp-transition);
	width: auto;
}

#top .gform_wrapper .gform_button:hover,
#top .gform_wrapper .gform_next_button:hover,
#top .gform_wrapper input[type="submit"]:hover {
	background-color: var(--sp-ink);
	border-color: var(--sp-ink);
	color: #fff;
}

/* "Zurück" zurückhaltender als "Weiter". */
#top .gform_wrapper .gform_previous_button {
	background-color: transparent;
	border-color: var(--sp-rule-strong);
	color: var(--sp-ink);
}

#top .gform_wrapper .gform_previous_button:hover {
	background-color: var(--sp-ink);
	border-color: var(--sp-ink);
	color: #fff;
}

#top .gform_wrapper .gform_footer,
#top .gform_wrapper .gform_page_footer {
	border-top: var(--sp-border);
	padding-top: var(--sp-space-5);
	margin-top: var(--sp-space-5);
	display: flex;
	gap: var(--sp-space-3);
	align-items: center;
	flex-wrap: wrap;
}


/* -----------------------------------------------------------------------------
   8. Validierung — gleiche Bildsprache wie der Validation Explainer
   -------------------------------------------------------------------------- */

#top .gform_wrapper .gform_validation_errors,
#top .gform_wrapper .gform_submission_error {
	background-color: var(--sp-error-bg);
	border: var(--sp-border);
	border-left: 3px solid var(--sp-error);
	border-radius: var(--sp-radius);
	box-shadow: none;
	padding: var(--sp-space-4) var(--sp-space-5);
	color: var(--sp-ink);
	font-size: var(--sp-fs-sm);
}

#top .gform_wrapper .gform_validation_errors > h2,
#top .gform_wrapper .gform_submission_error {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-semibold);
	font-size: var(--sp-fs-base);
	color: var(--sp-error);
}

#top .gform_wrapper .gfield_error .gfield_label,
#top .gform_wrapper .gfield.gfield_error .gfield_label {
	color: var(--sp-error);
}

#top .gform_wrapper .gfield_error input,
#top .gform_wrapper .gfield_error select,
#top .gform_wrapper .gfield_error textarea {
	border-color: var(--sp-error);
	background-color: var(--sp-panel);
}

#top .gform_wrapper .gfield_error,
#top .gform_wrapper .gfield.gfield_error {
	background-color: transparent;
	border: 0;
	padding: 0;
}

/* Fehlermeldung am Feld: eckiges Label in Rot, wie eine Fundstelle im Bericht. */
#top .gform_wrapper .validation_message,
#top .gform_wrapper .gfield_validation_message {
	background-color: transparent;
	border: 0;
	border-left: 2px solid var(--sp-error);
	border-radius: var(--sp-radius);
	color: var(--sp-error);
	font-size: var(--sp-fs-xs);
	font-weight: var(--sp-fw-medium);
	padding: var(--sp-space-1) 0 var(--sp-space-1) var(--sp-space-3);
	margin-top: var(--sp-space-2);
}

/* Bestätigung nach dem Absenden. */
#top .gform_confirmation_wrapper,
#top .gform_confirmation_message {
	background-color: var(--sp-ok-bg);
	border: var(--sp-border);
	border-left: 3px solid var(--sp-ok);
	border-radius: var(--sp-radius);
	padding: var(--sp-space-5);
	font-size: var(--sp-fs-sm);
	color: var(--sp-ink);
}


/* -----------------------------------------------------------------------------
   9. Mehrseitige Formulare
   -------------------------------------------------------------------------- */

#top .gform_wrapper .gf_progressbar_wrapper {
	margin-bottom: var(--sp-space-6);
}

#top .gform_wrapper .gf_progressbar_title {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	font-weight: var(--sp-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-wide);
	color: var(--sp-ink-3);
	margin-bottom: var(--sp-space-2);
}

#top .gform_wrapper .gf_progressbar {
	background-color: var(--sp-rule);
	border-radius: var(--sp-radius);
	box-shadow: none;
	height: 4px;
	padding: 0;
}

#top .gform_wrapper .gf_progressbar_percentage {
	background-color: var(--sp-accent);
	border-radius: var(--sp-radius);
	height: 4px;
	box-shadow: none;
}

#top .gform_wrapper .gf_progressbar_percentage span {
	display: none;
}


/* -----------------------------------------------------------------------------
   10. Abstände im Raster
   -------------------------------------------------------------------------- */

#top .gform_wrapper .gform_fields {
	row-gap: var(--sp-space-5);
	column-gap: var(--sp-space-4);
}

@media only screen and (max-width: 767px) {

	#top .gform_wrapper .gform_footer,
	#top .gform_wrapper .gform_page_footer {
		flex-direction: column;
		align-items: stretch;
	}

	#top .gform_wrapper .gform_button,
	#top .gform_wrapper .gform_next_button,
	#top .gform_wrapper .gform_previous_button {
		width: 100%;
	}
}