/**
 * Gravity Forms: Radio-Auswahl als Icon-Cards
 *
 * Aktivierung: dem Feld in den GF-Einstellungen die CSS-Klasse
 * "gfield--icon-cards" geben. Icons werden über den value der Choice
 * zugeordnet (Präfix-Match) — funktioniert damit unabhängig von
 * Formular-/Feld-ID auf Dev (Form 12) und Produktion (Form 11).
 * Choices ohne Icon-Zuordnung rendern als Karte ohne Icon.
 */

.gform_wrapper.gravity-theme .gfield--icon-cards .gfield_radio {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}

.gform_wrapper.gravity-theme .gfield--icon-cards .gchoice {
	position: relative;
	display: flex;
}

/* Radio visuell verstecken, aber fokussierbar lassen (a11y) */
.gform_wrapper.gravity-theme .gfield--icon-cards .gfield-choice-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.gform_wrapper.gravity-theme .gfield--icon-cards .gchoice label.gform-field-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 20px 12px 16px;
	background: #fff;
	border: 1px solid #dee1e3;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 19, 47, 0.05);
	text-align: center;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: #374047;
	cursor: pointer;
	hyphens: auto;
	transition: border-color 0.15s ease, background-color 0.15s ease,
		box-shadow 0.15s ease, color 0.15s ease;
}

.gform_wrapper.gravity-theme .gfield--icon-cards .gchoice label.gform-field-label:hover {
	border-color: #275aa5;
	box-shadow: 0 2px 6px rgba(0, 19, 47, 0.1);
}

.gform_wrapper.gravity-theme .gfield--icon-cards .gfield-choice-input:checked + label.gform-field-label {
	background: #e1edff;
	border-color: #275aa5;
	box-shadow: inset 0 0 0 1px #275aa5;
	color: #003863;
}

.gform_wrapper.gravity-theme .gfield--icon-cards .gfield-choice-input:focus-visible + label.gform-field-label {
	outline: 2px solid #00afd9;
	outline-offset: 2px;
}

/*
 * Icon (Lucide, via mask → Farbe folgt dem Zustand).
 * Basisregel ohne `content` — das ::before entsteht nur dort, wo eine
 * value-Regel weiter unten `content` + Icon setzt.
 */
.gform_wrapper.gravity-theme .gfield--icon-cards .gfield-choice-input + label.gform-field-label::before {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	background-color: #275aa5;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	transition: background-color 0.15s ease;
}

.gform_wrapper.gravity-theme .gfield--icon-cards .gfield-choice-input:checked + label.gform-field-label::before {
	background-color: #003863;
}

/* Bau & Handwerk — Hammer */
.gform_wrapper.gravity-theme .gfield--icon-cards .gfield-choice-input[value^="Bau"] + label.gform-field-label::before {
	content: "";
	-webkit-mask-image: 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='m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9'/%3E%3Cpath d='m18 15 4-4'/%3E%3Cpath d='m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5'/%3E%3C/svg%3E");
	mask-image: 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='m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9'/%3E%3Cpath d='m18 15 4-4'/%3E%3Cpath d='m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5'/%3E%3C/svg%3E");
}

/* IT, Software & Kreativwirtschaft — Code */
.gform_wrapper.gravity-theme .gfield--icon-cards .gfield-choice-input[value^="IT"] + label.gform-field-label::before {
	content: "";
	-webkit-mask-image: 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%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
	mask-image: 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%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}

/* Handel & E-Commerce — Warenkorb */
.gform_wrapper.gravity-theme .gfield--icon-cards .gfield-choice-input[value^="Handel"] + label.gform-field-label::before {
	content: "";
	-webkit-mask-image: 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%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
	mask-image: 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%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
}

/* Industrie, Produktion & Gewerbe — Fabrik */
.gform_wrapper.gravity-theme .gfield--icon-cards .gfield-choice-input[value^="Industrie"] + label.gform-field-label::before {
	content: "";
	-webkit-mask-image: 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='M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M17 18h1'/%3E%3Cpath d='M12 18h1'/%3E%3Cpath d='M7 18h1'/%3E%3C/svg%3E");
	mask-image: 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='M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M17 18h1'/%3E%3Cpath d='M12 18h1'/%3E%3Cpath d='M7 18h1'/%3E%3C/svg%3E");
}

/* Dienstleistungen & Freie Berufe — Aktentasche */
.gform_wrapper.gravity-theme .gfield--icon-cards .gfield-choice-input[value^="Dienstleistungen"] + label.gform-field-label::before {
	content: "";
	-webkit-mask-image: 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='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E");
	mask-image: 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='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E");
}

/* Gastronomie & Hotellerie — Besteck */
.gform_wrapper.gravity-theme .gfield--icon-cards .gfield-choice-input[value^="Gastronomie"] + label.gform-field-label::before {
	content: "";
	-webkit-mask-image: 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='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'/%3E%3C/svg%3E");
	mask-image: 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='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'/%3E%3C/svg%3E");
}

/* Anderes Gewerbe / Sonstiges — Punkte */
.gform_wrapper.gravity-theme .gfield--icon-cards .gfield-choice-input[value^="Anderes"] + label.gform-field-label::before {
	content: "";
	-webkit-mask-image: 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%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
	mask-image: 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%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
}

@media (max-width: 480px) {
	.gform_wrapper.gravity-theme .gfield--icon-cards .gfield_radio {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.gform_wrapper.gravity-theme .gfield--icon-cards .gchoice label.gform-field-label {
		padding: 14px 8px 12px;
		font-size: 13px;
	}

	.gform_wrapper.gravity-theme .gfield--icon-cards .gfield-choice-input + label.gform-field-label::before {
		flex-basis: 28px;
		width: 28px;
		height: 28px;
	}
}