/* Events-Manager-Buchungsformular auf hellem Panel.

   Das Plugin bringt sein eigenes CSS-Framework („pixelbones") mit, dessen
   Link- und Akzentfarben über Custom-Properties laufen. Wir setzen die
   Variablen statt gegen die !important-Regeln anzuschreiben. */

.tsch-content--light .em {
	--accent-hue: 0;
	--accent-s: 67%;
	--accent-l: 30%;
	--accent-color: var(--color-accent);
	--accent-color-hover: var(--color-accent-light);
	--text-color-normal: var(--color-wood);
	--text-color-richer: var(--color-ink);
	--text-color-softer: var(--color-wood-soft);
	--border-color: rgb(var(--color-wood-rgb) / 0.30);
	--border-color-softer: rgb(var(--color-wood-rgb) / 0.18);
	--background-color-softer: rgb(var(--color-wood-rgb) / 0.05);
	--button-primary-color: var(--color-cream);
	--font-family: var(--font-body);

	/* Gegenstücke zu den dunklen Werten aus em-base.css */
	--default-color: var(--color-wood-soft);
	--meta-color: var(--color-wood-soft);
	--main-bg: rgb(var(--color-wood-rgb) / 0.05);
	--main-h3-color: var(--color-accent);
	--main-border-color: rgb(var(--color-wood-rgb) / 0.25);
	--counter-color: var(--color-cream);
}

/* Buttons im hellen Panel: Bordeaux statt Gold. */
.tsch-content--light .em.pixelbones .button:not([data-nostyle]):not(.button-primary),
.tsch-content--light .em.pixelbones .input .button:not([data-nostyle]):not(.button-primary),
.tsch-content--light .em.pixelbones .input button:not([data-nostyle]):not(.button-primary) {
	color: var(--color-accent) !important;
	border-color: rgb(var(--color-accent-rgb) / 0.40) !important;
}
.tsch-content--light .em.pixelbones .button:not([data-nostyle]):not(.button-primary):hover,
.tsch-content--light .em.pixelbones .input .button:not([data-nostyle]):not(.button-primary):hover,
.tsch-content--light .em.pixelbones .input button:not([data-nostyle]):not(.button-primary):hover {
	color: var(--color-cream) !important;
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
}

.tsch-content--light .em .em-item-title,
.tsch-content--light .em .em-item-title a { color: var(--color-accent); }
.tsch-content--light .em .em-item-meta-line,
.tsch-content--light .em .em-item-desc { color: var(--color-wood-soft); }
.tsch-content--light .em h1,
.tsch-content--light .em h2,
.tsch-content--light .em h3,
.tsch-content--light .em h4 { color: var(--color-accent); }

.tsch-content--light .em input[type="text"],
.tsch-content--light .em input[type="email"],
.tsch-content--light .em input[type="tel"],
.tsch-content--light .em input[type="password"],
.tsch-content--light .em input[type="number"],
.tsch-content--light .em select,
.tsch-content--light .em textarea {
	padding: 10px var(--space-sm);
	background: var(--color-white);
	border: 1px solid rgb(var(--color-wood-rgb) / 0.30);
	border-radius: var(--radius-sm);
	color: var(--color-wood);
}

.tsch-content--light .em input:focus-visible,
.tsch-content--light .em select:focus-visible,
.tsch-content--light .em textarea:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
	border-color: var(--color-accent);
}

.tsch-content--light .em button,
.tsch-content--light .em input[type="submit"],
.tsch-content--light .em .button-primary {
	padding: 13px var(--space-lg);
	font-family: var(--font-headline);
	font-size: var(--text-small);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-cream);
	background: var(--color-accent);
	border: none;
	border-radius: var(--radius-sm);
	transition: background var(--transition-normal);
}
.tsch-content--light .em button:hover,
.tsch-content--light .em input[type="submit"]:hover,
.tsch-content--light .em .button-primary:hover {
	background: var(--color-accent-light);
}

/* Anmeldeblock im Buchungsformular abheben. */
.tsch-content--light .em .em-login {
	padding: var(--space-md);
	background: rgb(var(--color-wood-rgb) / 0.05);
	border: 1px solid rgb(var(--color-wood-rgb) / 0.18);
	border-radius: var(--radius-sm);
}
.tsch-content--light .em .em-login-trigger a {
	color: var(--color-accent);
	font-weight: var(--weight-semibold);
}

/* Datenschutzhinweis unter dem Buchungsformular. Ersetzt die Einwilligungs-
   Checkbox, die bei jeder Buchung neu angehakt werden musste. */
.tsch-event__privacy {
	margin-block-start: var(--space-lg);
	padding-block-start: var(--space-md);
	border-block-start: 1px solid rgb(var(--color-wood-rgb) / 0.15);
	font-size: var(--text-small);
	color: var(--color-wood-soft);
}