/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

/* =========================================================
   LOM – ACF-Frontendformular
   Voraussetzung: Formular besitzt die Klasse lom-event-form
   ========================================================= */

.lom-event-form {
	--lom-green: #b4cbc3;
	--lom-green-dark: #8faea4;
	--lom-text: #333333;
	--lom-text-light: #666666;
	--lom-border: #d9dfdc;
	--lom-background: #f5f7f6;
	--lom-error: #d92f48;
	--lom-blue: #164b9b;

	box-sizing: border-box;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 42px 48px 48px;
	background: var(--lom-background);
	border-top: 7px solid var(--lom-green);
	color: var(--lom-text-light);
	font-family: "Public Sans", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
}

.lom-event-form *,
.lom-event-form *::before,
.lom-event-form *::after {
	box-sizing: border-box;
}


/* ---------------------------------------------------------
   Feldaufteilung
   --------------------------------------------------------- */

.lom-event-form > .acf-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 28px;
	row-gap: 26px;
}

/* Standardmäßig nehmen alle Felder die volle Breite ein */
.lom-event-form > .acf-fields > .acf-field {
	grid-column: 1 / -1;
	width: 100% !important;
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * Felder mit der ACF-Wrapper-Klasse "lom-half"
 * werden zweispaltig dargestellt.
 */
.lom-event-form > .acf-fields > .acf-field.lom-half {
	grid-column: span 1;
}


/* ---------------------------------------------------------
   Beschriftungen und Hinweise
   --------------------------------------------------------- */

.lom-event-form .acf-label {
	margin: 0 0 8px;
}

.lom-event-form .acf-label label {
	display: block;
	margin: 0;
	color: var(--lom-text);
	font-family: "Public Sans", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.015em;
}

.lom-event-form .acf-required {
	color: var(--lom-error);
}

.lom-event-form .acf-field .description,
.lom-event-form .acf-field .acf-instructions {
	margin: 7px 0 0;
	color: var(--lom-text-light);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
}


/* ---------------------------------------------------------
   Textfelder, Datumsfelder und Textbereiche
   --------------------------------------------------------- */

.lom-event-form input[type="text"],
.lom-event-form input[type="email"],
.lom-event-form input[type="tel"],
.lom-event-form input[type="url"],
.lom-event-form input[type="number"],
.lom-event-form input[type="date"],
.lom-event-form input[type="password"],
.lom-event-form select,
.lom-event-form textarea {
	display: block;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 13px 15px;
	background: #ffffff;
	border: 1px solid var(--lom-border);
	border-radius: 0;
	box-shadow: none;
	color: var(--lom-text);
	font-family: "Public Sans", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	transition:
		border-color 180ms ease,
		box-shadow 180ms ease,
		background-color 180ms ease;
}

.lom-event-form textarea {
	min-height: 150px;
	resize: vertical;
}

.lom-event-form input::placeholder,
.lom-event-form textarea::placeholder {
	color: #9a9f9d;
	opacity: 1;
}

.lom-event-form input:hover,
.lom-event-form select:hover,
.lom-event-form textarea:hover {
	border-color: var(--lom-green-dark);
}

.lom-event-form input:focus,
.lom-event-form select:focus,
.lom-event-form textarea:focus {
	outline: none;
	background: #ffffff;
	border-color: var(--lom-green-dark);
	box-shadow: 0 0 0 3px rgba(180, 203, 195, 0.35);
}


/* ---------------------------------------------------------
   Länder-Auswahl / ACF Select2
   --------------------------------------------------------- */

.lom-event-form .select2-container {
	display: block;
	width: 100% !important;
	font-family: "Public Sans", Helvetica, Arial, sans-serif;
}

.lom-event-form .select2-container .select2-selection--single {
	height: 54px;
	background: #ffffff;
	border: 1px solid var(--lom-border);
	border-radius: 0;
	transition:
		border-color 180ms ease,
		box-shadow 180ms ease;
}

.lom-event-form
	.select2-container
	.select2-selection--single
	.select2-selection__rendered {
	height: 52px;
	padding: 0 44px 0 15px;
	color: var(--lom-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 52px;
}

.lom-event-form
	.select2-container
	.select2-selection--single
	.select2-selection__arrow {
	top: 0;
	right: 10px;
	width: 30px;
	height: 52px;
}

.lom-event-form
	.select2-container--focus
	.select2-selection--single,
.lom-event-form
	.select2-container--open
	.select2-selection--single {
	border-color: var(--lom-green-dark);
	box-shadow: 0 0 0 3px rgba(180, 203, 195, 0.35);
}


/* ---------------------------------------------------------
   WYSIWYG-Editor
   --------------------------------------------------------- */

.lom-event-form .acf-editor-wrap {
	background: #ffffff;
	border: 1px solid var(--lom-border);
}

.lom-event-form .acf-editor-wrap iframe {
	min-height: 230px;
}

.lom-event-form .wp-editor-tools,
.lom-event-form .mce-toolbar-grp,
.lom-event-form .quicktags-toolbar {
	background: #edf1ef;
}

.lom-event-form .wp-editor-container {
	border: 0;
}


/* ---------------------------------------------------------
   Checkboxen und Optionsfelder
   --------------------------------------------------------- */

.lom-event-form .acf-checkbox-list,
.lom-event-form .acf-radio-list {
	margin: 0;
	padding: 0;
}

.lom-event-form .acf-checkbox-list li,
.lom-event-form .acf-radio-list li {
	margin: 0 0 8px;
}

.lom-event-form input[type="checkbox"],
.lom-event-form input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	accent-color: var(--lom-green-dark);
	vertical-align: -3px;
}


/* ---------------------------------------------------------
   Validierungsfehler
   --------------------------------------------------------- */

.lom-event-form .acf-field.-error input,
.lom-event-form .acf-field.-error select,
.lom-event-form .acf-field.-error textarea,
.lom-event-form .acf-field.-error .select2-selection {
	border-color: var(--lom-error);
}

.lom-event-form .acf-error-message {
	margin: 0 0 12px;
	padding: 10px 14px;
	background: var(--lom-error);
	border: 0;
	border-radius: 0;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.lom-event-form .acf-error-message p {
	margin: 0;
	color: inherit;
}


/* ---------------------------------------------------------
   Absenden-Bereich und Schaltfläche
   --------------------------------------------------------- */

.lom-event-form .acf-form-submit {
	margin-top: 38px;
	padding-top: 28px;
	border-top: 1px solid var(--lom-border);
}

.lom-event-form .acf-button,
.lom-event-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	margin: 0;
	padding: 14px 28px;
	appearance: none;
	background: var(--lom-green);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #ffffff;
	cursor: pointer;
	font-family: "Public Sans", Helvetica, Arial, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.025em;
	text-align: center;
	text-transform: uppercase;
	transition:
		background-color 180ms ease,
		transform 180ms ease;
}

.lom-event-form .acf-button:hover,
.lom-event-form input[type="submit"]:hover {
	background: var(--lom-green-dark);
	color: #ffffff;
	transform: translateY(-1px);
}

.lom-event-form .acf-button:focus-visible,
.lom-event-form input[type="submit"]:focus-visible {
	outline: 3px solid var(--lom-blue);
	outline-offset: 3px;
}


/* ---------------------------------------------------------
   Erfolgsmeldung aus dem PHP-Code
   --------------------------------------------------------- */

.lom-form-success {
	max-width: 1000px;
	margin: 0 auto 28px;
	padding: 24px 28px;
	background: var(--lom-green, #b4cbc3);
	border-left: 7px solid var(--lom-green-dark, #8faea4);
	color: #ffffff;
	font-family: "Public Sans", Helvetica, Arial, sans-serif;
}

.lom-form-success h3 {
	margin: 0 0 6px;
	padding: 0;
	color: #ffffff;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.3;
}

.lom-form-success p {
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-size: 16px;
	line-height: 1.65;
}


/* ---------------------------------------------------------
   Tablet und Smartphone
   --------------------------------------------------------- */

@media (max-width: 767px) {
	.lom-event-form {
		padding: 30px 22px 34px;
		border-top-width: 5px;
	}

	.lom-event-form > .acf-fields {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 22px;
	}

	.lom-event-form > .acf-fields > .acf-field,
	.lom-event-form > .acf-fields > .acf-field.lom-half {
		grid-column: 1;
	}

	.lom-event-form .acf-button,
	.lom-event-form input[type="submit"] {
		width: 100%;
		padding-right: 18px;
		padding-left: 18px;
	}

	.lom-form-success {
		padding: 21px 22px;
	}
}