/* Contact form (block interzoo-fresh-ideas/kontaktformular), loaded only where the block stands.
   Grid, sizes, type and colours of the former JetFormBuilder form: Elementor custom CSS „contact-grid" of widget
   29d84143 plus its widget settings (labels Sora 16/400 #222, fields Sora 20/500 #005D3E with 1 px border and
   8/24 px padding, button Sora 18 magenta), measured on the Elementor reference at 1440, 768 and 390 px.
   Without the hCaptcha row; all corners square. */
.izfi-formular {
	--izfi-gruen: #005D3E;
	--izfi-marke: #0B6B57;
	--izfi-magenta: #BD1B8D;
	--izfi-magenta-tief: #9B1573;
	--izfi-tinte: #222222;
	--izfi-fehler: #C00000;
	--izfi-zeichen-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5'/%3E%3C/svg%3E");
	--izfi-zeichen-titel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2.2'/%3E%3Cpath d='M5.8 16.5c.6-1.7 1.8-2.6 3.2-2.6s2.6.9 3.2 2.6M15 10h3M15 13.5h3'/%3E%3C/svg%3E");
	--izfi-zeichen-firma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16M15 9h4a1 1 0 0 1 1 1v11M3 21h18M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E");
	--izfi-zeichen-umschlag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E");
	--izfi-zeichen-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
	--izfi-zeichen-teilnahme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E");
	--izfi-zeichen-stift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 28px;
	row-gap: 20px;
	grid-template-areas:
		"titel   titel   titel   titel   titel   titel   sponsor   sponsor   sponsor   sponsor   sponsor   sponsor"
		"vorname vorname vorname nachname nachname nachname speaker speaker speaker speaker speaker speaker"
		"unternehmen unternehmen unternehmen unternehmen unternehmen unternehmen nachricht nachricht nachricht nachricht nachricht nachricht"
		"email   email   email   email   email   email   nachricht nachricht nachricht nachricht nachricht nachricht"
		"telefon telefon telefon telefon telefon telefon nachricht nachricht nachricht nachricht nachricht nachricht"
		"datenschutz datenschutz datenschutz datenschutz datenschutz datenschutz datenschutz datenschutz datenschutz datenschutz datenschutz datenschutz"
		"senden  senden  senden  senden  senden  senden  senden    senden    senden    senden    senden    senden"
		"meldung meldung meldung meldung meldung meldung meldung   meldung   meldung   meldung   meldung   meldung";
	width: 100%;
	margin: 0;
	font-family: Sora, sans-serif;
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--izfi-tinte);
}
.izfi-formular * {
	box-sizing: border-box;
}
.izfi-feld {
	min-width: 0;
	margin: 0;
	padding: 5px 0;
}
.izfi-feld--titel { grid-area: titel; }
.izfi-feld--vorname { grid-area: vorname; }
.izfi-feld--nachname { grid-area: nachname; }
.izfi-feld--sponsor { grid-area: sponsor; }
.izfi-feld--speaker { grid-area: speaker; }
.izfi-feld--unternehmen { grid-area: unternehmen; }
.izfi-feld--email { grid-area: email; }
.izfi-feld--telefon { grid-area: telefon; }
.izfi-feld--nachricht { grid-area: nachricht; }
.izfi-feld--datenschutz { grid-area: datenschutz; }
.izfi-feld--senden { grid-area: senden; }
.izfi-formular__meldung { grid-area: meldung; }

.izfi-formular .izfi-feld__label {
	display: block;
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: var(--izfi-tinte);
	white-space: normal;
}
.izfi-formular .izfi-feld__label a {
	color: inherit;
	font-weight: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.izfi-formular .izfi-feld__label a:hover,
.izfi-formular .izfi-feld__label a:focus-visible {
	color: var(--izfi-gruen);
}
.izfi-feld__pflicht {
	color: var(--izfi-magenta);
}

.izfi-formular input:not([type="checkbox"]),
.izfi-formular select,
.izfi-formular textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 48px;
	margin: 0;
	padding: 8px 24px;
	font-family: inherit;
	font-size: 20px;
	line-height: 28px;
	font-weight: 500;
	color: var(--izfi-gruen);
	background-color: #FFFFFF;
	border: 1px solid var(--izfi-gruen);
	border-radius: 0;
	box-shadow: none;
	transition: border-color .3s, box-shadow .3s;
}
/* Icon in each field, as on interzoo-pavilion.com. It sits as ::before on the field wrapper (Chrome hides background
   images of autofilled fields) and takes its colour through a mask, so it follows the error state. */
.izfi-feld__eingabe {
	position: relative;
}
.izfi-zeichen::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 16px;
	top: 14px;
	width: 20px;
	height: 20px;
	background-color: var(--izfi-gruen);
	-webkit-mask: var(--izfi-zeichen) center / 20px 20px no-repeat;
	mask: var(--izfi-zeichen) center / 20px 20px no-repeat;
	pointer-events: none;
}
.izfi-zeichen--person { --izfi-zeichen: var(--izfi-zeichen-person); }
.izfi-zeichen--titel { --izfi-zeichen: var(--izfi-zeichen-titel); }
.izfi-zeichen--firma { --izfi-zeichen: var(--izfi-zeichen-firma); }
.izfi-zeichen--umschlag { --izfi-zeichen: var(--izfi-zeichen-umschlag); }
.izfi-zeichen--telefon { --izfi-zeichen: var(--izfi-zeichen-telefon); }
.izfi-zeichen--teilnahme { --izfi-zeichen: var(--izfi-zeichen-teilnahme); }
.izfi-zeichen--stift { --izfi-zeichen: var(--izfi-zeichen-stift); }
.izfi-formular .izfi-zeichen :is(input, select, textarea) {
	padding-left: 52px;
}
.izfi-feld.ist-fehler .izfi-zeichen::before {
	background-color: var(--izfi-fehler);
}
/* Inline-block like before: the line below the field keeps the row of the message 314 px high at 1440 px. */
.izfi-formular textarea {
	display: inline-block;
	height: 270px;
	min-height: 270px;
	resize: vertical;
}
.izfi-formular select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 42px;
	background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%230B6B57' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 20px 20px;
	cursor: pointer;
}
.izfi-formular :is(input, select, textarea):focus {
	outline: none;
}
.izfi-formular :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--izfi-magenta);
	outline-offset: 0;
}

/* Data protection: square box of 22 px (1.2 em of the text, as before) in front of the text, 8 px apart. */
.izfi-haken {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 27px;
	margin: 0;
	font-size: 18px;
	line-height: 18px;
	font-weight: 400;
	color: var(--izfi-tinte);
	cursor: pointer;
}
.izfi-formular .izfi-haken input {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	background: #FFFFFF no-repeat center / 14px 14px;
	border: 1px solid var(--izfi-gruen);
	border-radius: 0;
	cursor: pointer;
}
.izfi-formular .izfi-haken input:checked {
	background-color: var(--izfi-gruen);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}
.izfi-formular .izfi-haken input:focus-visible {
	outline: 2px solid var(--izfi-magenta);
	outline-offset: 2px;
}

.izfi-formular .izfi-feld__fehler {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--izfi-fehler);
}
.izfi-feld.ist-fehler :is(input:not([type="checkbox"]), select, textarea) {
	border-color: var(--izfi-fehler);
	box-shadow: inset 0 0 0 1px var(--izfi-fehler);
}
.izfi-feld.ist-fehler .izfi-haken input {
	border-color: var(--izfi-fehler);
}

.izfi-formular .izfi-formular__knopf {
	display: inline-block;
	margin: 0;
	padding: 8px 32px;
	font-family: inherit;
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: #FFFFFF;
	background-color: var(--izfi-magenta);
	border: 1px solid var(--izfi-magenta);
	border-radius: 0;
	box-shadow: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .3s, border-color .3s;
}
.izfi-formular .izfi-formular__knopf:hover,
.izfi-formular .izfi-formular__knopf:focus-visible {
	color: #FFFFFF;
	background-color: var(--izfi-magenta-tief);
	border-color: var(--izfi-magenta-tief);
}
.izfi-formular .izfi-formular__knopf:focus-visible {
	outline: 2px solid var(--izfi-magenta);
	outline-offset: 2px;
}
.izfi-formular .izfi-formular__knopf[aria-disabled="true"] {
	opacity: .6;
	cursor: progress;
}

/* Message bar below the button, as before; it may wrap (the own messages are longer than one line). */
.izfi-formular__meldung {
	margin: 8px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--izfi-marke);
	background: color-mix(in srgb, var(--izfi-marke) 8%, #FFFFFF);
	color: var(--izfi-marke);
	text-align: center;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 600;
}
.izfi-formular__meldung.ist-fehler {
	border-color: #D60000;
	background: color-mix(in srgb, #D60000 8%, #FFFFFF);
	color: var(--izfi-fehler);
}
.izfi-formular__meldung[hidden],
.izfi-feld__fehler[hidden] {
	display: none;
}
.izfi-formular__meldung:focus {
	outline: none;
}
.izfi-formular__meldung:focus-visible {
	outline: 2px solid var(--izfi-magenta);
	outline-offset: 2px;
}
.izfi-formular__falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* One column below 981 px: breakpoint of the former form, order as there. */
@media (max-width: 980px) {
	.izfi-formular {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"titel"
			"vorname"
			"nachname"
			"sponsor"
			"speaker"
			"unternehmen"
			"email"
			"telefon"
			"nachricht"
			"datenschutz"
			"senden"
			"meldung";
	}
}