.domcrm--account-form {
    display: flex;
    flex-direction: column;
    gap: 40px;

	.domcrm--account-form-box {

		input[type=date], 
		input[type=email], 
		input[type=number], 
		input[type=password], 
		input[type=search], 
		input[type=tel], 
		input[type=text], 
		input[type=url], 
		select, 
		textarea {
			margin-top: 5px;
		}

		label {
			font-size: 13px;
			margin-top: 20px;
		}

		span.required {
			display: contents;
		}

		.domcrm--account-block {
			display: flex;
			gap: 20px;
			margin-bottom: 40px;
		}

		.domcrm--address-left {
			display: flex;
			flex-direction: column;

			.domcrm--location {
				display: flex;
				gap: 20px;
			}
		}

		.domcrm--address-right {
			display: flex;
			flex-direction: column;
			gap: 20px;

				label.is-required {
					display: flex;
					flex-direction: column;
				}

				.iti.iti--allow-dropdown.iti--separate-dial-code {
					margin-top: 5px;
				}
			}
	}

	/* Buttons: 1px vom unteren ins obere Padding, damit Text ohne Unterlängen mittig wirkt */
	button.btn.domcrm-btn {
		font-size: 18px;
		padding: 11px 40px 9px 40px;
		display: inline-block;
		background: #D97F36;
		color: white;
		border: 1px solid #D97F36;
		border-radius: 50px;
		transition: all 0.25s ease-in-out;
	}

	.btn.btn-form-logout,
	.btn.booking-storno-link {
		border: solid 1px var(--e-global-color-secondary);
		border-radius: 50px;
		padding: 1px 32px 0;
		line-height: 20px;
		font-size: 14px;
		background: none;
    	color: var(--e-global-color-text);
	}

	.btn.booking-storno-link:hover {
		background: none !important;
    	color: var(--e-global-color-text) !important;
	}
	.btn-paynow {
		background: var(--e-global-color-a3dcd59);
		color: white !important;
		border-radius: 50px;
		padding: 3px 16px 1px;
		line-height: normal;
	}
	.btn.btn-details {
		padding: 3px 28px 1px;
		border-radius: 50px;
		background: var(--e-global-color-primary);
		border: 1px solid var(--e-global-color-primary);
		color: white;
		display: inline-block;
		margin-top: 16px;
		line-height: normal;
	}

	@media (min-width:768px) {
		.domcrm--account-form-header-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	

	button.btn.domcrm-btn.muted {
		background: #f6f6f3;
		color: #8297a4;
		border: 1px solid #8297a4;
	} 
/*	
	.domcrm--account-success {
		display: none;
	}
	.domcrm--account-error {
		display: none;
	}
*/	
}


.domcrm--bookings-block {
	display: flex;
	flex-direction: column;
	gap: 3rem;

	a.booking-storno-link.btn.domcrm-btn,
	button.booking-storno-button.btn.domcrm-btn {
		display: inline;
		font-size: 14px;
		padding: 3px 20px 1px;
        margin-right: 8px;
	}
	.booking-course > span,
	.booking-dates > span,
	.booking-storno-box > span,
	.booking-storno-box > a,
	.booking-status > span,
	.booking-course-status > span,
	.booking-payment-status > span {
		/*display: block;*/
	}
	.booking-course-title {
		color: var(--e-global-color-primary);
		font-size: 18px !important;
		font-weight: 600;
		display: block;
	}
	.booking-dates > span {
		white-space: nowrap;
	}
	.booking-course > span.course-title {
		font-weight: bold;
	}
	span.booking-payment-status-value {
		font-weight: bold;
	}
	span.booking-invoice-title {
		padding-top: 10px;
	}
	span.booking-invoice-link a {
		margin-left: -3px;
	}
	/* Nur unbezahlte Rechnungen rot; bezahlte und stornierte in Textfarbe mit grauem Symbol */
	span.booking-invoice-link.domcrm--invoice-unpaid > a:first-child {
		color: #f90000;
	}
	span.booking-invoice-link {
		display: flex;
    	gap: 16px;
		align-items: center;
	}
	.col-headline {
		color: #999;
        display: block;
        font-style: italic;
	}
}
span.booking-storno-price {
    font-weight: bold;
}
.booking-download-icon {
	width: 20px;
    height: 20px;
    vertical-align: -5px;
    margin-right: 0.3em;
    flex-shrink: 0;
}
.domcrm--modal-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #EDEDE9;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 20px #0002;
    display: none;
    z-index: 2001;
    width: 940px;
    max-width: 100%;

	.domcrm--modal-overlay-close {
	    position: absolute;
	    top: 10px;
	    right: 10px;
	    font-size: 30px;
	    cursor: pointer;
	    width: 30px;
		height: 30px;
		text-align: center;
		z-index: 2002;
	}
	.domcrm--modal-overlay-cancel-button {
		float: left;
		display: inline-block;
        color: #fff;
        background-color: #999;
        border-color: #999;
	}
	.domcrm--modal-overlay-submit-button {
		float: right;
		display: inline-block;
        color: #fff;
	}
	p.course-title {
		font-weight: bold;
	}

}	

/* Gemeinsame Box für Buchungen und „Mein Kundenkonto“ */
.domcrm--bookings-bookingrow,
.domcrm--account-profile-box {
    background: #FFF;
    border-radius: 10px;
	box-shadow: 0px 0px 20px -5px rgb(0 0 0 / 30%);
}
.domcrm--bookings-bookingrow {
    font-size: 14px;
}
/* Innenabstand wie der Textabstand in den Buchungsboxen (28px / 40px);
   Grau wie der Kursblock, die Eingabefelder heben sich weiß davon ab */
.domcrm--account-profile-box {
    padding: 28px 40px;
    background: #edede9;
}
.domcrm--account-profile-box input[type=date],
.domcrm--account-profile-box input[type=email],
.domcrm--account-profile-box input[type=number],
.domcrm--account-profile-box input[type=password],
.domcrm--account-profile-box input[type=search],
.domcrm--account-profile-box input[type=tel],
.domcrm--account-profile-box input[type=text],
.domcrm--account-profile-box input[type=url],
.domcrm--account-profile-box select,
.domcrm--account-profile-box textarea {
    background-color: #fff;
}
.domcrm--account-profile-box > form > h3:first-child {
    margin-top: 0;
}
.domcrm--account-profile-box > .domcrm--dataform-footer .domcrm-button {
    margin-bottom: 0;
}
@media (max-width: 767px) {
	.domcrm--account-profile-box {
		padding: 20px;
	}
}
.domcrm--bookings-contentrow {
    display: flex;
	padding: 8px 20px;
	flex-direction: column;
}
/*
.domcrm--bookings-contentrow:nth-child(odd) {
    background: #e8e8e3;
}
.domcrm--bookings-contentrow:nth-child(even) {
    background: #EDEDE9;
}
*/
.domcrm--bookings-contentrow:first-child {
	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #edede9;
	padding-top: 8px;
}
.domcrm--bookings-contentrow:nth-child(2) {
    background: #f6f6f6;
	
}
.domcrm--bookings-contentrow:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
	background: #edede9;
	padding-bottom: 8px;
}
.domcrm--bookings-title-col {
    width: 20%;
	padding: 20px;
    font-size: 14px;
    color: #666;
}
.domcrm--bookings-leftcol {
	width: 12%;
	line-height: 18px;
}
.domcrm--bookings-leftcol:has(.date-block) {
    padding: 20px;
}
.domcrm--bookings-title-col.course{
	line-height: normal;
}
.domcrm--bookings-title-col.number {
    padding: 20px 10px 20px 30px;
}
.domcrm--bookings-title-col.cancel {
    padding-bottom: 20px;
}
.domcrm--bookings-content-col {
    flex: 1;
    font-size: 14px;
	padding: 20px;
	font-weight: normal;
}
.domcrm--bookings-content-col.number {
    padding: 20px 5px;
}
.domcrm--bookings-content-col.cancel {
    padding-bottom: 20px;
}
span.booking-course-nr {
    font-weight: bold;
}
.booking-dates {
	font-weight: bold;
}
.domcrm--bookings-content-col.course {
    line-height: 22px;
    padding: 20px;
}
.domcrm--booking-course-description {
    margin-top: 12px;
}
ul.domcrm--booking-course-fees {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}
ul.domcrm--booking-course-fees li {
    margin: 0;
    padding: 0;
}

body.domcrm--overlay-modal-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 2000;
    display: block;
}
body.domcrm--overlay-modal-open {
    overflow: hidden;
}

@media (max-width: 960px) {

	.domcrm--bookings-block {

		.domcrm--bookings-row {
			flex-direction: column;

			.domcrm--bookings-col.booking-course,
			.domcrm--bookings-col.booking-dates,
			.domcrm--bookings-col.booking-course-status,
			.domcrm--bookings-col.booking-payment-status,
			.domcrm--bookings-col.booking-actions {
				width: 100%;
			}
		}
	}
}


.domcrm--account-form .domcrm--dataform-form .form-field-input input[readonly="readonly"] {
	opacity: 0.5;
}

@media (min-width:768px) {
	.domcrm--bookings-contentrow {
    flex-direction: row;
}
}

/* Zeile „Anmeldung“: Häkchen in Statusfarbe, Text in normaler Schriftfarbe.
   Häkchen und Text stehen bündig mit PDF-Symbol und Text der Rechnungen
   darunter: gleiche Breite (15px), gleicher Abstand (6px), gleicher Versatz (-3px). */
.domcrm--booking-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    margin-left: -3px;
}
.domcrm--booking-status-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    /* optisch auf die Buchstaben statt auf die Zeilenbox zentriert */
    position: relative;
    top: -1px;
}
.domcrm--booking-status-gruen .domcrm--booking-status-icon  { color: var(--e-global-color-a3dcd59); }
.domcrm--booking-status-orange .domcrm--booking-status-icon { color: var(--e-global-color-primary); }
.domcrm--booking-status-rot .domcrm--booking-status-icon    { color: #f90000; }
.domcrm--booking-status-grau .domcrm--booking-status-icon   { color: #8297a4; }

.booking-invoice-link .btn-paynow {
    white-space: nowrap;
    flex-shrink: 0;
}
p.domcrm--booking-invoice-hint {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #8297a4;
    max-width: 30em;
}

ul.domcrm--booking-documents {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.domcrm--booking-documents li {
    margin: 0 0 4px;
    padding: 0;
}
ul.domcrm--booking-documents a {
    color: inherit;
}

/* Rechnungssymbol (rotes PDF) in der Buchungsliste etwas größer als im übrigen Kundenbereich */
.domcrm--bookings-block .booking-invoice-icon {
    width: 15px;
    height: 19px;
    vertical-align: -4px;
    flex-shrink: 0;
}

/* Hinweis bei nicht stornierbaren Buchungen */
.booking-storno-addinfo {
    color: #8297a4;
}

/* Rufnummer: intl-tel-input setzt margin-top am Feld auf 0, der Abstand zum Label
   kommt deshalb an den Rahmen .iti – wie bei den übrigen Feldern 5px */
.domcrm--account-form-box .iti {
    margin-top: 5px;
}

/* Kopf der Buchung: Zeitraum und Nummern als eigene Blöcke; Desktop untereinander
   mit einer Leerzeile Abstand */
.domcrm--booking-head-numbers {
    margin-top: 1.2em;
}

/* Rechnungszeilen als Tabelle: Symbol | Text | „Jetzt bezahlen“.
   Jede Rechnung ist ein eigenes <span>; damit die Buttons aller Rechnungen
   untereinander stehen, teilen sie sich per subgrid die Spalten der umgebenden
   Spalte. Anmeldestatus und Überweisungshinweis laufen über die ganze Breite. */
.domcrm--bookings-content-col.invoices {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: 16px;
    row-gap: 2px;
}
.domcrm--bookings-content-col.invoices > * {
    grid-column: 1 / -1;
}
.domcrm--bookings-block .domcrm--bookings-content-col.invoices > span.booking-invoice-link {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
}
/* Symbol und Text im Link; umbrechender Text bleibt neben dem Symbol eingerückt */
.domcrm--bookings-block span.booking-invoice-link > a:first-child {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.domcrm--bookings-block span.booking-invoice-link .btn-paynow {
    justify-self: start;
}
/* Mobil einspaltig: der Button rutscht unter den Text, bündig mit ihm
   (Symbol 15px + Abstand 6px; die -3px des Links gleicht der Rand aus) */
@media (max-width: 767px) {
	.domcrm--bookings-content-col.invoices {
		grid-template-columns: minmax(0, 1fr);
	}
	/* sonst gilt im Subgrid das gap: 16px der allgemeinen Regel */
	.domcrm--bookings-block .domcrm--bookings-content-col.invoices > span.booking-invoice-link {
		row-gap: 2px;
	}
	.domcrm--bookings-block span.booking-invoice-link .btn-paynow {
		margin-left: 18px;
		margin-bottom: 6px;
	}
}
.domcrm--bookings-block span.booking-invoice-link > a:first-child .booking-invoice-icon {
    margin: 2px 0 0;
}

@media (max-width: 767px) {
	/* Kopf: Monatskachel, Zeitraum und Nummern nebeneinander, Kursinhalt darunter */
	.domcrm--bookings-contentrow:first-child {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
	}
	.domcrm--bookings-contentrow:first-child .domcrm--bookings-leftcol {
		width: auto;
	}
	.domcrm--bookings-contentrow:first-child .domcrm--bookings-title-col.course {
		width: auto;
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		gap: 8px 20px;
	}
	.domcrm--booking-head-dates,
	.domcrm--booking-head-numbers {
		white-space: nowrap;
	}
	.domcrm--booking-head-numbers {
		margin-top: 0;
	}
	.domcrm--bookings-contentrow:first-child .domcrm--bookings-content-col.course {
		flex-basis: 100%;
	}

	/* Beschriftung („Anmeldung“, „Dokumente“) näher an den Inhalt */
	.domcrm--bookings-title-col {
		width: auto;
		padding-bottom: 0;
	}
	.domcrm--bookings-title-col + .domcrm--bookings-content-col {
		padding-top: 8px;
	}
}