/*
 * Kundenkonto auf der Website. Nur Tokens var(--pe-…) aus dem Zusatz-CSS der Seite.
 * Statusfarben über --pe-status-*, mit Rückfall auf Grundfarben, falls das Zusatz-CSS sie noch nicht kennt.
 */
.pe-konto {
	max-width: var(--pe-narrow);
	color: var(--pe-text);
}
.pe-konto__titel {
	margin: 0 0 var(--pe-space-3);
	font-size: var(--pe-fs-h2);
	line-height: var(--pe-lh-snug);
	color: var(--pe-ueberschrift);
}
.pe-konto-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pe-space-2) var(--pe-space-4);
	margin-bottom: var(--pe-space-4);
}
.pe-konto-kopf form {
	margin: 0;
}
.pe-konto-abschnitt {
	margin: var(--pe-space-6) 0 var(--pe-space-3);
	font-size: var(--pe-fs-h3);
	color: var(--pe-ueberschrift);
}
.pe-konto-hinweis {
	margin: 0 0 var(--pe-space-4);
	padding: var(--pe-space-3) var(--pe-space-4);
	background: var(--pe-flaeche-2);
	border-left: var(--pe-space-1) solid var(--pe-akzent);
	border-radius: var(--pe-r-sm);
}
.pe-konto-anmelden {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--pe-gap);
}
.pe-konto-karte {
	margin: 0 0 var(--pe-space-4);
	padding: var(--pe-space-5);
	background: var(--pe-flaeche);
	border: var(--pe-border-w) solid var(--pe-rand);
	border-radius: var(--pe-r-md);
}
.pe-konto-karte h3,
.pe-konto-karte h5 {
	display: flex;
	align-items: center;
	gap: var(--pe-space-2);
	margin: 0 0 var(--pe-space-2);
	font-size: var(--pe-fs-h4);
	color: var(--pe-ueberschrift);
}
.pe-konto-karte h5 {
	margin-top: var(--pe-space-4);
	font-size: var(--pe-fs-text);
}
.pe-konto-schmal {
	max-width: 28rem;
}
.pe-konto .pe-icon {
	flex: 0 0 auto;
	width: var(--pe-space-5);
	height: var(--pe-space-5);
	vertical-align: middle;
}
.pe-konto input[type="email"],
.pe-konto input[type="text"],
.pe-konto input[type="password"] {
	width: 100%;
	min-height: var(--pe-tap);
	padding: var(--pe-space-3);
	font: inherit;
	color: var(--pe-text);
	background: var(--pe-flaeche);
	border: var(--pe-border-w) solid var(--pe-rand-stark);
	border-radius: var(--pe-r-sm);
	box-sizing: border-box;
}
.pe-konto [aria-invalid="true"] {
	border: var(--pe-border-w-strong) solid var(--pe-aktion);
}
.pe-konto .pe-konto-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pe-tap);
	padding: var(--pe-space-2) var(--pe-space-5);
	background: var(--pe-navy);
	color: var(--pe-weiss);
	border: 0;
	border-radius: var(--pe-r-sm);
	font-weight: var(--pe-fw-bold);
	text-decoration: none;
	cursor: pointer;
}
.pe-konto .pe-konto-knopf:hover,
.pe-konto .pe-konto-knopf:focus-visible {
	background: var(--pe-navy-2);
	color: var(--pe-weiss);
}
.pe-konto .pe-konto-knopf--zweit {
	background: var(--pe-flaeche);
	color: var(--pe-navy);
	border: var(--pe-border-w-strong) solid var(--pe-navy);
}
.pe-konto .pe-konto-knopf--zweit:hover,
.pe-konto .pe-konto-knopf--zweit:focus-visible {
	background: var(--pe-flaeche-2);
	color: var(--pe-navy);
}
.pe-konto-link {
	display: inline-flex;
	align-items: center;
	gap: var(--pe-space-1);
	min-height: var(--pe-tap);
	padding: 0;
	background: none;
	border: 0;
	color: var(--pe-link);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}
.pe-konto-leise {
	font-size: var(--pe-fs-sm);
	color: var(--pe-text-leise);
}
.pe-konto-buchung .pe-dachzeile {
	margin: 0;
}
.pe-konto-buchung__titel {
	margin: 0 0 var(--pe-space-2);
	font-size: var(--pe-fs-h3);
	color: var(--pe-ueberschrift);
}
.pe-konto-status {
	display: inline-block;
	padding: var(--pe-space-1) var(--pe-space-3);
	border-radius: var(--pe-r-sm);
	font-size: var(--pe-fs-sm);
	font-weight: var(--pe-fw-bold);
}
.pe-konto-status--bezahlt {
	background: var(--pe-status-ok-flaeche, var(--pe-flaeche-2));
	color: var(--pe-status-ok, var(--pe-ueberschrift));
}
.pe-konto-status--offen {
	background: var(--pe-status-warten-flaeche, var(--pe-flaeche-2));
	color: var(--pe-status-warten, var(--pe-ueberschrift));
}
.pe-konto-status--ueberfaellig,
.pe-konto-status--storniert {
	background: var(--pe-status-fehler-flaeche, var(--pe-flaeche-2));
	color: var(--pe-status-fehler, var(--pe-aktion));
}
.pe-konto-termine {
	margin: 0;
	padding: 0;
	list-style: none;
}
.pe-konto-termine li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pe-space-2);
	padding: var(--pe-space-2) 0;
	border-bottom: var(--pe-border-w) solid var(--pe-rand);
}
.pe-konto-bank {
	margin-top: var(--pe-space-4);
}
.pe-konto-bank h5 {
	margin-top: 0;
}
.pe-konto-rechnungen {
	margin: var(--pe-space-4) 0 0;
	padding: 0;
	list-style: none;
}
.pe-konto-rechnungen a {
	display: inline-flex;
	align-items: center;
	gap: var(--pe-space-2);
	min-height: var(--pe-tap);
	color: var(--pe-link);
	font-weight: var(--pe-fw-semibold);
}
.pe-konto-daten {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--pe-space-2) var(--pe-space-4);
	margin: 0 0 var(--pe-space-3);
}
.pe-konto-daten dt {
	color: var(--pe-text-leise);
}
.pe-konto-daten dd {
	margin: 0;
	word-break: break-word;
}
.pe-konto-passwort summary {
	display: inline-flex;
	align-items: center;
	gap: var(--pe-space-2);
	min-height: var(--pe-tap);
	color: var(--pe-link);
	font-weight: var(--pe-fw-semibold);
	cursor: pointer;
}
@media (max-width: 544px) {
	.pe-konto-daten {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.pe-konto-daten dd {
		margin-bottom: var(--pe-space-2);
	}
	.pe-konto .pe-konto-knopf {
		width: 100%;
	}
}

/* Vertrag widerrufen (Modul widerruf) */
.pe-widerruf-angaben {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--pe-space-1) var(--pe-space-4);
	margin: 0 0 var(--pe-space-4);
}
.pe-widerruf-angaben dt {
	font-weight: var(--pe-fw-semibold);
	color: var(--pe-ueberschrift);
}
.pe-widerruf-angaben dd {
	margin: 0;
}
.pe-widerruf-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pe-space-3);
}
.pe-widerruf .pe-b-fehler {
	color: var(--pe-status-fehler, var(--pe-text));
}