/* Buchungsformular auf heller Lesefläche — die Plugin-Styles sind dafür
   gebaut, und Formulare lesen sich so ohnehin besser. */

.pe-content--light .em,
.pe-content--light .em.pixelbones { color: var(--color-ink-on-light); }

.pe-content--light .em.pixelbones h1,
.pe-content--light .em.pixelbones h2,
.pe-content--light .em.pixelbones h3,
.pe-content--light .em.pixelbones h4 { color: var(--color-ink-on-light); }

.pe-content--light .em a { color: var(--color-blue); }

.pe-content--light .em.pixelbones input[type='text'],
.pe-content--light .em.pixelbones input[type='email'],
.pe-content--light .em.pixelbones input[type='tel'],
.pe-content--light .em.pixelbones input[type='number'],
.pe-content--light .em.pixelbones select,
.pe-content--light .em.pixelbones textarea {
	border: 1px solid rgba(20, 36, 58, 0.2);
}

/* Zustimmung zu den AGB.
   Events Manager legt das Kästchen in das Label, damit ein Klick auf den Text
   mitgeht. Ohne flex sitzt der Haken auf der Grundlinie und rutscht bei einem
   Umbruch von seinem Text weg. */

.pe-content--light .em .input-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	font-weight: var(--weight-regular);
}

.pe-content--light .em .input-checkbox input[type='checkbox'] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	/* Auf die erste Textzeile ausgerichtet, nicht auf die Blockmitte. */
	margin-top: 2px;
	accent-color: var(--color-blue);
}

.pe-event__head { margin-bottom: var(--space-xl); }

.pe-event__body { margin-bottom: var(--space-xl); }

.pe-event__back {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-md);
	font-size: var(--text-small);
	color: var(--color-cream-dim);
}

.pe-event__back a { color: var(--color-primary); text-decoration: none; }

/* Kundenkonto: Anmelden und Registrieren.
   Die Felder liegen auf heller Fläche, deshalb erben sie die Formularregeln
   von oben — hier steht nur, was das Konto zusätzlich braucht. */

.pe-konto__hinweis {
	max-width: var(--container-text);
	margin: 0 auto var(--space-lg);
	padding: var(--space-md);
	border-left: 3px solid var(--color-primary);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: rgba(255, 204, 0, 0.10);
	color: var(--color-cream);
	font-size: var(--text-small);
}

.pe-konto__form p { margin: 0 0 var(--space-md); }

.pe-konto__form label,
.pe-content--light .login label {
	display: block;
	margin-bottom: var(--space-xs);
	font-weight: var(--weight-medium);
}

.pe-konto__form input[type='text'],
.pe-konto__form input[type='email'],
.pe-konto__form input[type='tel'],
.pe-konto__form input[type='password'],
.pe-content--light .login input[type='text'],
.pe-content--light .login input[type='password'] {
	width: 100%;
	/* 16px verhindert, dass Safari auf dem iPhone beim Tippen hineinzoomt. */
	font-size: 16px;
	min-height: 44px;
	padding: 0 var(--space-md);
	border: 1px solid rgba(20, 36, 58, 0.2);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-ink-on-light);
}

/* PLZ und Ort nebeneinander, auf dem Handy untereinander. */
.pe-konto__reihe {
	display: flex;
	gap: var(--space-md);
}

.pe-konto__reihe > span:first-child { flex: 0 0 30%; }
.pe-konto__reihe > span:last-child { flex: 1; }

@media (max-width: 480px) {
	.pe-konto__reihe { flex-direction: column; gap: 0; }
	.pe-konto__reihe > span:first-child { flex-basis: auto; }
}

.pe-konto__hilfe {
	display: block;
	margin-top: var(--space-xs);
	font-size: var(--text-small);
	color: var(--color-muted-on-light);
}

.pe-konto__wechsel { font-size: var(--text-small); }

.pe-content--light .login .login-remember label {
	display: inline;
	font-weight: var(--weight-regular);
}

.pe-content--light .login .login-submit input[type='submit'] {
	min-height: 44px;
	padding: 0 var(--space-xl);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	color: var(--color-ink);
	font-family: var(--font-headline);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}