/* =========================================================================
   HT TCM Core – Modul wc-mein-konto
   Ablage: ht-tcm-core/assets/css/mein-konto.css

   Alle Überschreibungen sind auf .ht-tcm-konto gescoped. Diese Klasse
   wird per body_class nur auf der Kontoseite gesetzt und liegt damit in
   der Spezifität über Avada und den Plugin-Stylesheets. !important wird
   ausschliesslich dort verwendet, wo Plugins inline schreiben.
   ========================================================================= */

:root {
	--ht-tcm-sand: #D9C8A9;
	--ht-tcm-sand-bg: #F7F2E8;
	--ht-tcm-sand-dark: #C4AF8A;
	--ht-tcm-sand-text: #4A3520;
	--ht-tcm-sand-muted: #7A6A4C;
	--ht-tcm-line: rgba(0, 0, 0, .09);
	--ht-tcm-line-strong: rgba(0, 0, 0, .16);
	--ht-tcm-text: #2F2F2D;
	--ht-tcm-danger: #A32D2D;
	/*
	 * Eckenradien nach Verschachtelungstiefe. Die Regel dahinter:
	 * der innere Radius bleibt kleiner als der äussere abzüglich des
	 * Innenabstands. Nur dann liest sich die Schachtelung sauber.
	 *
	 *   Panel 16 (Innenabstand 24) → Karte 12 → Element 8 → Bedienelement 6
	 */
	--ht-tcm-radius-control: 6px;
	--ht-tcm-radius: 8px;
	--ht-tcm-radius-lg: 12px;
	--ht-tcm-radius-xl: 16px;
	--ht-tcm-radius-pill: 999px;

	/*
	 * Zeilenhöhen in drei Stufen.
	 *
	 * Die zweistufige Einteilung der freien Themes reicht hier nicht: Neben
	 * Überschriften und Fliesstext gibt es eine dritte Gattung, die einzeilige
	 * Bedienelemente. Mit 1.6 würden Navigation, Schaltflächen und Eingabe-
	 * felder unnötig hoch, mit 1.2 zu gedrängt.
	 */
	--ht-tcm-lh-tight: 1.2;
	--ht-tcm-lh-ui: 1.4;
	--ht-tcm-lh-text: 1.6;

	/*
	 * Abstandsstufen. Grundwert 16px, Fortschreitung etwa im Verhältnis 1,5.
	 * Vorher lagen vierzehn frei gewählte Werte zwischen 4 und 40 Pixeln im
	 * Stylesheet verteilt, ohne Bezug zueinander. Genau daraus entsteht der
	 * Eindruck, dass überall etwas nicht ganz stimmt.
	 */
	--ht-tcm-space-1: 4px;
	--ht-tcm-space-2: 8px;
	--ht-tcm-space-3: 12px;
	--ht-tcm-space-4: 16px;
	--ht-tcm-space-5: 24px;
	--ht-tcm-space-6: 32px;
	--ht-tcm-space-7: 48px;

	/*
	 * Schriftgrössen im Verhältnis 1,2 ausgehend von 15px Fliesstext –
	 * dieselbe kleine Terz, die auch die freien WooCommerce-Themes verwenden.
	 * Grundwert bewusst 15px statt 18px: die Kontoseite ist eine
	 * Verwaltungsoberfläche mit dichter Information, keine Verkaufsseite.
	 */
	--ht-tcm-text-xs: 12.5px;
	--ht-tcm-text-sm: 15px;
	--ht-tcm-text-md: 18px;
	--ht-tcm-text-lg: 21.5px;
	--ht-tcm-text-xl: 26px;

	/*
	 * Flächenlogik seit der getönten Panelfläche:
	 *   --ht-tcm-panel     Rahmenfläche des gesamten Kontobereichs
	 *   #fff               Elemente, die darauf stehen (Tabellen, Karten,
	 *                      Formularfelder, Kacheln)
	 *   --ht-tcm-sand-bg   Akzente (aktiver Menüpunkt, Tabellenkopf,
	 *                      Statusleiste, Hinweise)
	 *
	 * Akzente, die direkt auf der Panelfläche liegen, erhalten zusätzlich
	 * eine Haarlinie: Sandton auf getöntem Grund allein trägt zu wenig
	 * Kontrast.
	 */
	--ht-tcm-panel: #FDFBF7;
}

/* =========================================================================
   1. Avada Account-Kopfzeile ausblenden

   Bestätigt am echten DOM: .avada-myaccount-user ist direktes Kind von
   .woocommerce und enthält Begrüssung, Demo-Telefonnummer, Demo-E-Mail
   und den Warenkorb-Link. Die Demo-Texte lassen sich zusätzlich in
   Avada → Options → WooCommerce leeren; die Leiste ist hier aber
   vollständig redundant, weil das Dashboard eine eigene Begrüssung hat.
   ========================================================================= */

.ht-tcm-konto .avada-myaccount-user {
	display: none !important;
}

/* =========================================================================
   1b. Avada-Überschrift und Reihenfolge im Inhaltsbereich

   Avada hängt <h2.avada-woocommerce-myaccount-heading> ans Ende des
   Inhaltsbereichs und sortiert per Flexbox nach oben. Die mitgelieferte
   Regel erfasst nur p, div und span – ein <table> als direktes Kind
   (Bestellungen, Abonnements) behält order 0 und rutscht dadurch über
   die Überschrift. Deshalb wird die Reihenfolge hier explizit gesetzt.
   ========================================================================= */

.ht-tcm-konto .woocommerce-MyAccount-content > * {
	order: 2;
}

/*
 * Avada berechnet Schriftgrössen per JavaScript und schreibt das Ergebnis
 * als Inline-Variable --fontSize an das Element. Deshalb wird hier beides
 * gesetzt: die Variable für Avadas eigene Berechnung und font-size für den
 * Fall, dass die Berechnung nicht läuft.
 *
 * Kein Kindselektor: auf der Seite "Kontodetails" steht die Überschrift
 * innerhalb des Formulars, nicht direkt im Inhaltsbereich.
 */

.ht-tcm-konto .woocommerce-MyAccount-content .avada-woocommerce-myaccount-heading {
	order: 0;
	margin: 0 0 var(--ht-tcm-space-4);
	--fontSize: 21.5;
	font-size: var(--ht-tcm-text-lg);
	line-height: var(--ht-tcm-lh-tight);
	font-weight: 600;
	color: var(--ht-tcm-text);
}

.ht-tcm-konto .woocommerce-MyAccount-content > .woocommerce-notices-wrapper {
	order: 1;
}

/* Auf der Übersicht liefert dashboard.php eine eigene Begrüssung,
   die Avada-Überschrift wäre doppelt. */
.ht-tcm-konto.woocommerce-dashboard .avada-woocommerce-myaccount-heading {
	display: none;
}

/* Standardtext von WooCommerce auf der Übersicht ausblenden – der Inhalt
   kommt aus dashboard.php. Greift nur, falls das Template einmal nicht
   geladen wird. */
.ht-tcm-konto.woocommerce-dashboard .woocommerce-MyAccount-content > p {
	display: none;
}

/* =========================================================================
   2. Grundlayout
   ========================================================================= */

/*
 * Zwei Spalten über Flexbox statt über Float.
 *
 * Mit Float landete der Inhaltsbereich unterhalb der Navigation: Avada
 * bringt für .woocommerce-MyAccount-content eigene Breiten- und
 * Clear-Regeln mit, gegen die sich ein zuverlässiges Float-Layout nicht
 * aufbauen lässt. Flexbox ignoriert float und clear vollständig und ist
 * damit unabhängig davon, was das Theme an dieser Stelle vorgibt.
 *
 * .avada-myaccount-user ist ausgeblendet und wird deshalb kein Flex-Element.
 */

/*
 * Der gesamte Kontobereich wird als abgesetzte Fläche gerahmt.
 *
 * Der Kurzcode gibt .woocommerce als äusseren Container aus. Dieser wird
 * hier selbst zur Karte – es ist kein zusätzliches Markup nötig. Ohne
 * Rahmen schwimmen Navigation und Inhalt frei auf der Seite und wirken
 * nicht als zusammengehörender Bereich.
 */

.ht-tcm-konto .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	box-sizing: border-box;
	margin: 0 0 var(--ht-tcm-space-6);
	padding: var(--ht-tcm-space-5) var(--ht-tcm-space-6);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-xl);
	background: var(--ht-tcm-panel);
}

.ht-tcm-konto .woocommerce-MyAccount-navigation {
	flex: 0 0 25%;
	box-sizing: border-box;
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0 var(--ht-tcm-space-5) 0 0;
	border-right: 1px solid var(--ht-tcm-line);
}

.ht-tcm-konto .woocommerce-MyAccount-content {
	flex: 1 1 0%;
	box-sizing: border-box;
	min-width: 0;
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0 0 0 var(--ht-tcm-space-6);
	border: 0;
	color: var(--ht-tcm-text);
}

/* =========================================================================
   3. Navigation
   ========================================================================= */

.ht-tcm-konto .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.ht-tcm-konto .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.ht-tcm-konto .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--ht-tcm-space-3) var(--ht-tcm-space-4);
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-ui);
	color: var(--ht-tcm-text);
	text-decoration: none;
	border-left: 3px solid transparent;
	border-bottom: 1px solid var(--ht-tcm-line);
	transition: background .18s ease, border-color .18s ease;
}

.ht-tcm-konto .woocommerce-MyAccount-navigation li a::after,
.ht-tcm-konto .woocommerce-MyAccount-navigation li a::before {
	content: none;
}

.ht-tcm-konto .woocommerce-MyAccount-navigation li a:hover {
	background: var(--ht-tcm-sand-bg);
	color: var(--ht-tcm-sand-text);
}

.ht-tcm-konto .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--ht-tcm-sand-bg);
	border-left-color: var(--ht-tcm-sand);
	color: var(--ht-tcm-sand-text);
	font-weight: 600;
}

.ht-tcm-konto .woocommerce-MyAccount-navigation-link--customer-logout a {
	margin-top: var(--ht-tcm-space-2);
	border-top: 1px solid var(--ht-tcm-line);
	border-bottom: 0;
	opacity: .7;
}

.ht-tcm-konto .woocommerce-MyAccount-navigation li:last-child a {
	border-bottom: 0;
}

/* =========================================================================
   4. Buttons – vereinheitlicht ueber alle Plugins hinweg
   ========================================================================= */

.ht-tcm-konto .woocommerce-MyAccount-content .button,
.ht-tcm-konto .woocommerce-MyAccount-content button.button,
.ht-tcm-konto .woocommerce-MyAccount-content input.button,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-Button,
.ht-tcm-konto .woocommerce-MyAccount-content a.button,
.ht-tcm-konto .ht-tcm-btn {
	display: inline-block;
	padding: var(--ht-tcm-space-2) var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-sand);
	border-radius: var(--ht-tcm-radius-control);
	background: var(--ht-tcm-sand);
	color: var(--ht-tcm-sand-text);
	font-size: var(--ht-tcm-text-sm);
	font-weight: 600;
	line-height: var(--ht-tcm-lh-ui);
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	transition: background .18s ease, border-color .18s ease;
}

.ht-tcm-konto .woocommerce-MyAccount-content .button:hover,
.ht-tcm-konto .woocommerce-MyAccount-content button.button:hover,
.ht-tcm-konto .woocommerce-MyAccount-content input.button:hover,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-Button:hover,
.ht-tcm-konto .ht-tcm-btn:hover {
	background: var(--ht-tcm-sand-dark);
	border-color: var(--ht-tcm-sand-dark);
	color: var(--ht-tcm-sand-text);
}

/* Sekundaer: Ansehen, Bearbeiten, Herunterladen */
.ht-tcm-konto .woocommerce-MyAccount-content .button.view,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-button.view,
.ht-tcm-konto .woocommerce-MyAccount-content .button.edit,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-MyAccount-downloads-file,
.ht-tcm-konto .ht-tcm-btn--ghost {
	background: transparent;
	border-color: var(--ht-tcm-sand);
	color: var(--ht-tcm-sand-text);
	font-weight: 500;
}

.ht-tcm-konto .woocommerce-MyAccount-content .button.view:hover,
.ht-tcm-konto .woocommerce-MyAccount-content .button.edit:hover,
.ht-tcm-konto .ht-tcm-btn--ghost:hover {
	background: var(--ht-tcm-sand-bg);
	border-color: var(--ht-tcm-sand-dark);
}

/* Destruktiv: Kuendigen, Loeschen */
.ht-tcm-konto .woocommerce-MyAccount-content .button.cancel,
.ht-tcm-konto .woocommerce-MyAccount-content .button.delete,
.ht-tcm-konto .woocommerce-MyAccount-content .subscription_details .cancel {
	background: transparent;
	border-color: var(--ht-tcm-line-strong);
	color: var(--ht-tcm-danger);
	font-weight: 500;
}

.ht-tcm-konto .woocommerce-MyAccount-content .button.cancel:hover,
.ht-tcm-konto .woocommerce-MyAccount-content .button.delete:hover {
	background: #FCEBEB;
	border-color: var(--ht-tcm-danger);
	color: var(--ht-tcm-danger);
}

/* =========================================================================
   5. Tabellen – Bestellungen, Abonnements, Mitgliedschaft, Downloads,
      Zahlungsarten
   ========================================================================= */

.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table,
.ht-tcm-konto .woocommerce-MyAccount-content table.woocommerce-orders-table,
.ht-tcm-konto .woocommerce-MyAccount-content table.my_account_orders,
.ht-tcm-konto .woocommerce-MyAccount-content table.my_account_subscriptions,
.ht-tcm-konto .woocommerce-MyAccount-content table.my_account_memberships,
.ht-tcm-konto .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods,
.ht-tcm-konto .woocommerce-MyAccount-content table.woocommerce-table--order-downloads {
	width: 100%;
	margin: 0 0 var(--ht-tcm-space-5);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	font-size: var(--ht-tcm-text-sm);
}

.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table thead th,
.ht-tcm-konto .woocommerce-MyAccount-content table.woocommerce-orders-table thead th,
.ht-tcm-konto .woocommerce-MyAccount-content table.my_account_memberships thead th,
.ht-tcm-konto .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods thead th {
	background: var(--ht-tcm-sand-bg);
	color: var(--ht-tcm-sand-muted);
	font-size: var(--ht-tcm-text-xs);
	font-weight: 600;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	padding: var(--ht-tcm-space-3) var(--ht-tcm-space-4);
	border: 0;
	border-bottom: 1px solid var(--ht-tcm-line);
}

.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table tbody td,
.ht-tcm-konto .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td,
.ht-tcm-konto .woocommerce-MyAccount-content table.my_account_memberships tbody td,
.ht-tcm-konto .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods tbody td {
	padding: var(--ht-tcm-space-3) var(--ht-tcm-space-4);
	border: 0;
	border-bottom: 1px solid var(--ht-tcm-line);
	vertical-align: middle;
	background: transparent;
}

.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table tbody tr:hover td {
	background: rgba(217, 200, 169, .10);
}

.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table tfoot th,
.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table tfoot td {
	padding: var(--ht-tcm-space-3) var(--ht-tcm-space-4);
	border: 0;
	border-top: 1px solid var(--ht-tcm-line);
	background: var(--ht-tcm-sand-bg);
	font-size: var(--ht-tcm-text-sm);
}

/* Aktionsspalte */
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions,
.ht-tcm-konto .woocommerce-MyAccount-content td.order-actions,
.ht-tcm-konto .woocommerce-MyAccount-content td.subscription-actions {
	text-align: right;
	white-space: nowrap;
}

.ht-tcm-konto .woocommerce-MyAccount-content td.order-actions .button + .button,
.ht-tcm-konto .woocommerce-MyAccount-content td.subscription-actions .button + .button {
	margin-left: var(--ht-tcm-space-2);
}

/* Status als Pille */
.ht-tcm-konto .ht-tcm-pill {
	display: inline-block;
	padding: var(--ht-tcm-space-1) var(--ht-tcm-space-3);
	border-radius: var(--ht-tcm-radius-pill);
	font-size: var(--ht-tcm-text-xs);
	font-weight: 500;
	background: var(--ht-tcm-sand-bg);
	color: var(--ht-tcm-sand-text);
}

.ht-tcm-konto .ht-tcm-pill--active {
	background: #EAF3DE;
	color: #3B6D11;
}

.ht-tcm-konto .ht-tcm-pill--warn {
	background: #FAEEDA;
	color: #854F0B;
}

.ht-tcm-konto .ht-tcm-pill--danger {
	background: #FCEBEB;
	color: var(--ht-tcm-danger);
}

/* =========================================================================
   6. Hinweise und Meldungen
   ========================================================================= */

.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-info,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-message,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-error,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-Message {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ht-tcm-space-4);
	flex-wrap: wrap;
	margin: 0 0 var(--ht-tcm-space-5);
	padding: var(--ht-tcm-space-4) var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-left: 3px solid var(--ht-tcm-sand);
	border-radius: 0 var(--ht-tcm-radius) var(--ht-tcm-radius) 0;
	background: var(--ht-tcm-sand-bg);
	color: var(--ht-tcm-sand-text);
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
	list-style: none;
}

.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-info::before,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-message::before,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-error::before {
	content: none;
}

.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-error {
	border-left-color: var(--ht-tcm-danger);
	background: #FCEBEB;
	color: var(--ht-tcm-danger);
}

.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-message .button,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-info .button {
	margin-left: auto;
	flex: 0 0 auto;
}

/* =========================================================================
   7. Adressen
   ========================================================================= */

.ht-tcm-konto .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--ht-tcm-space-4);
	margin: 0 0 var(--ht-tcm-space-5);
}

.ht-tcm-konto .woocommerce-Address {
	width: auto;
	min-width: 0;
	float: none;
	margin: 0;
	padding: var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-lg);
	background: #fff;
	overflow-wrap: break-word;
}

.ht-tcm-konto .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ht-tcm-space-3);
	margin: 0 0 var(--ht-tcm-space-3);
	padding: 0;
	border: 0;
	background: none;
}

/*
 * WooCommerce gibt hier ein <h2> aus, nicht wie oft angenommen ein <h3>.
 * Ohne Treffer greift Avadas Standardgrösse von 46 Pixeln, wodurch die
 * Überschrift aus der Karte läuft und die Spalten überlappen.
 */
.ht-tcm-konto .woocommerce-Address-title h2,
.ht-tcm-konto .woocommerce-Address-title h3 {
	margin: 0;
	--fontSize: 18;
	font-size: var(--ht-tcm-text-md);
	line-height: var(--ht-tcm-lh-ui);
	font-weight: 600;
}

.ht-tcm-konto .woocommerce-Address-title .edit {
	font-size: var(--ht-tcm-text-sm);
	color: var(--ht-tcm-sand-muted);
	text-decoration: underline;
}

.ht-tcm-konto .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
	color: var(--ht-tcm-text);
}

/* =========================================================================
   8. Formulare – Kontodetails, Adresse bearbeiten, Login
   ========================================================================= */

.ht-tcm-konto .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.ht-tcm-konto .woocommerce-MyAccount-content form.edit-account,
.ht-tcm-konto .woocommerce-MyAccount-content form.woocommerce-address-fields {
	max-width: 560px;
}

.ht-tcm-konto .woocommerce-MyAccount-content .form-row,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-form-row {
	display: block;
	margin: 0 0 var(--ht-tcm-space-4);
	padding: 0;
}

.ht-tcm-konto .woocommerce-MyAccount-content .form-row label,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-form-row label {
	display: block;
	margin: 0 0 var(--ht-tcm-space-2);
	font-size: var(--ht-tcm-text-sm);
	font-weight: 500;
	color: var(--ht-tcm-sand-muted);
}

.ht-tcm-konto .woocommerce-MyAccount-content .input-text,
.ht-tcm-konto .woocommerce-MyAccount-content input[type="text"],
.ht-tcm-konto .woocommerce-MyAccount-content input[type="email"],
.ht-tcm-konto .woocommerce-MyAccount-content input[type="tel"],
.ht-tcm-konto .woocommerce-MyAccount-content input[type="password"],
.ht-tcm-konto .woocommerce-MyAccount-content select,
.ht-tcm-konto .woocommerce-MyAccount-content textarea {
	width: 100%;
	padding: var(--ht-tcm-space-3) var(--ht-tcm-space-3);
	border: 1px solid var(--ht-tcm-line-strong);
	border-radius: var(--ht-tcm-radius-control);
	background: #fff;
	color: var(--ht-tcm-text);
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-ui);
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.ht-tcm-konto .woocommerce-MyAccount-content .input-text:focus,
.ht-tcm-konto .woocommerce-MyAccount-content select:focus,
.ht-tcm-konto .woocommerce-MyAccount-content textarea:focus {
	outline: none;
	border-color: var(--ht-tcm-sand-dark);
	box-shadow: 0 0 0 3px rgba(217, 200, 169, .35);
}

.ht-tcm-konto .woocommerce-MyAccount-content fieldset {
	margin: var(--ht-tcm-space-5) 0 0;
	padding: var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-lg);
	background: #fff;
}

.ht-tcm-konto .woocommerce-MyAccount-content fieldset legend {
	padding: 0 var(--ht-tcm-space-2);
	font-size: var(--ht-tcm-text-sm);
	font-weight: 600;
	color: var(--ht-tcm-sand-text);
}

.ht-tcm-konto .woocommerce-MyAccount-content span.description,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-form-row em {
	display: block;
	margin-top: var(--ht-tcm-space-2);
	font-size: var(--ht-tcm-text-xs);
	font-style: normal;
	color: var(--ht-tcm-sand-muted);
}

.ht-tcm-konto .woocommerce-MyAccount-content .required {
	color: var(--ht-tcm-danger);
	text-decoration: none;
}

/* =========================================================================
   9. Plugin-spezifisch – alle Selektoren am echten DOM überprüft
   ========================================================================= */

/* WooCommerce Memberships ---------------------------------------------- */

/* Body-Klasse ist woocommerce-members_area (mit Unterstrich). */

.ht-tcm-konto .my-membership-section,
.ht-tcm-konto #wc-memberships-members-area-section {
	margin: 0 0 var(--ht-tcm-space-5);
}

.ht-tcm-konto table.my_membership_content th.membership-content-excerpt,
.ht-tcm-konto table.my_membership_content td.membership-content-excerpt {
	color: var(--ht-tcm-sand-muted);
	font-size: var(--ht-tcm-text-sm);
}

.ht-tcm-konto table.my_membership_content td.membership-content-type,
.ht-tcm-konto table.my_membership_content td.membership-content-accessible {
	color: var(--ht-tcm-sand-muted);
	font-size: var(--ht-tcm-text-sm);
}

.ht-tcm-konto table.my_membership_content td.membership-content-title a {
	font-weight: 500;
}

.ht-tcm-konto table.my_membership_content td.membership-content-actions {
	text-align: right;
	white-space: nowrap;
}

/* Sortierpfeile in den Spaltenköpfen dezenter */
.ht-tcm-konto table.my_membership_content thead th a {
	color: var(--ht-tcm-sand-muted);
	text-decoration: none;
	opacity: .6;
}

.ht-tcm-konto table.my_membership_content thead th a:hover {
	opacity: 1;
}

/* Members-Area-Navigation erscheint erst, wenn im Mitgliedschaftsplan
   mehr als ein Bereich aktiviert ist. */
.ht-tcm-konto .wc-memberships-members-area-navigation {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ht-tcm-space-2);
	margin: 0 0 var(--ht-tcm-space-4);
	padding: 0;
	list-style: none;
	border: 0;
}

.ht-tcm-konto .wc-memberships-members-area-navigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ht-tcm-konto .wc-memberships-members-area-navigation li a {
	display: block;
	padding: var(--ht-tcm-space-2) var(--ht-tcm-space-3);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-pill);
	font-size: var(--ht-tcm-text-sm);
	color: var(--ht-tcm-text);
	text-decoration: none;
}

.ht-tcm-konto .wc-memberships-members-area-navigation li.active a,
.ht-tcm-konto .wc-memberships-members-area-navigation li a:hover {
	background: var(--ht-tcm-sand-bg);
	border-color: var(--ht-tcm-sand);
	color: var(--ht-tcm-sand-text);
}

/* WooCommerce Subscriptions -------------------------------------------- */

.ht-tcm-konto .woocommerce_account_subscriptions {
	margin: 0;
}

.ht-tcm-konto .woocommerce_account_subscriptions p.no_subscriptions {
	margin: 0 0 var(--ht-tcm-space-5);
}

.ht-tcm-konto .woocommerce-MyAccount-content table.subscription_details {
	width: 100%;
	margin: 0 0 var(--ht-tcm-space-5);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
}

.ht-tcm-konto .woocommerce-MyAccount-content table.subscription_details th {
	width: 40%;
	padding: var(--ht-tcm-space-3) var(--ht-tcm-space-4);
	border: 0;
	border-bottom: 1px solid var(--ht-tcm-line);
	background: var(--ht-tcm-sand-bg);
	color: var(--ht-tcm-sand-muted);
	font-size: var(--ht-tcm-text-sm);
	font-weight: 500;
	text-align: left;
}

.ht-tcm-konto .woocommerce-MyAccount-content table.subscription_details td {
	padding: var(--ht-tcm-space-3) var(--ht-tcm-space-4);
	border: 0;
	border-bottom: 1px solid var(--ht-tcm-line);
	font-size: var(--ht-tcm-text-sm);
}

.ht-tcm-konto .woocommerce-MyAccount-content table.subscription_details tr:last-child th,
.ht-tcm-konto .woocommerce-MyAccount-content table.subscription_details tr:last-child td {
	border-bottom: 0;
}

/* Kündigen ist die in den Teilnahmebedingungen zugesagte Funktion und
   wird deshalb sichtbar platziert, nicht als kleiner Link versteckt. */
.ht-tcm-konto .ht-tcm-cancel-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ht-tcm-space-4);
	flex-wrap: wrap;
	margin: 0 0 var(--ht-tcm-space-5);
	padding: var(--ht-tcm-space-4) var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-lg);
}

.ht-tcm-konto .ht-tcm-cancel-row__text {
	flex: 1 1 260px;
	margin: 0;
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
	color: var(--ht-tcm-sand-muted);
}

/* WPGens Refer a Friend ------------------------------------------------
   Template "modern". Der Endpoint heisst myreferrals und erhält von
   WooCommerce keine eigene Body-Klasse, deshalb ht-tcm-endpoint-myreferrals
   aus class-wc-mein-konto.php.
   --------------------------------------------------------------------- */

.ht-tcm-konto .gens-refer-a-friend {
	margin: 0;
	font-size: var(--ht-tcm-text-sm);
}

.ht-tcm-konto .gens-raf-my-account {
	padding: var(--ht-tcm-space-5);
	border: 1px solid var(--ht-tcm-sand);
	border-radius: var(--ht-tcm-radius-lg);
	background: var(--ht-tcm-sand-bg);
}

.ht-tcm-konto .gens-raf-text h2 {
	margin: 0 0 var(--ht-tcm-space-2);
	--fontSize: 21.5;
	font-size: var(--ht-tcm-text-lg);
	font-weight: 600;
	color: var(--ht-tcm-sand-text);
}

.ht-tcm-konto .gens-raf-text p {
	margin: 0 0 var(--ht-tcm-space-4);
	max-width: 52ch;
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
	color: var(--ht-tcm-sand-text);
}

/*
 * WPGens bringt für diese Kacheln eigene Hintergründe mit, unter anderem
 * einen dunklen für die erste Kachel der Statistik. Auf hellem Grund mit
 * dunkler Schrift ist sie unlesbar. Hintergrund und Schriftfarbe werden
 * deshalb ausdrücklich gesetzt und nicht nur ergänzt.
 */

.ht-tcm-konto .gens-raf-reward {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--ht-tcm-space-3);
	margin: 0 0 var(--ht-tcm-space-5);
	padding: 0;
	background: transparent;
	border: 0;
}

.ht-tcm-konto .gens-raf-reward > div {
	flex: 1 1 140px;
	padding: var(--ht-tcm-space-3) var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius);
	background: #fff;
	font-size: var(--ht-tcm-text-sm);
	color: var(--ht-tcm-sand-muted);
	text-align: center;
}

.ht-tcm-konto .gens-raf-reward > div span {
	display: block;
	margin-top: var(--ht-tcm-space-1);
	font-size: var(--ht-tcm-text-lg);
	font-weight: 600;
	color: var(--ht-tcm-sand-text);
}

/* Trenner zwischen den beiden Kacheln, den WPGens einstreut. */
.ht-tcm-konto .gens-raf-reward > span {
	flex: 0 0 auto;
}

.ht-tcm-konto .gens-raf-field {
	margin: 0 0 var(--ht-tcm-space-4);
}

.ht-tcm-konto .gens-raf-field > label {
	display: block;
	margin: 0 0 var(--ht-tcm-space-2);
	font-size: var(--ht-tcm-text-sm);
	font-weight: 500;
	color: var(--ht-tcm-sand-muted);
}

.ht-tcm-konto .gens-copy {
	display: flex;
	align-items: center;
	gap: var(--ht-tcm-space-2);
	padding: var(--ht-tcm-space-1) var(--ht-tcm-space-1) var(--ht-tcm-space-1) 0;
	border-radius: var(--ht-tcm-radius);
	background: #fff;
	border: 1px solid var(--ht-tcm-line-strong);
}

.ht-tcm-konto .gens-copy input.gens-raf-field--link {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: var(--ht-tcm-text-sm);
}

.ht-tcm-konto .gens-copy input.gens-raf-field--link:focus {
	box-shadow: none;
	border: 0;
}

.ht-tcm-konto .gens-ctc-modern {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 36px;
	border-radius: var(--ht-tcm-radius-control);
	background: var(--ht-tcm-sand);
	color: var(--ht-tcm-sand-text);
	cursor: pointer;
}

.ht-tcm-konto .gens-ctc-modern svg {
	width: 18px;
	height: 18px;
}

.ht-tcm-konto .gens-referral_share {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ht-tcm-space-2);
}

.ht-tcm-konto .gens-referral_share a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--ht-tcm-line-strong);
	border-radius: 50%;
	background: #fff;
	color: var(--ht-tcm-sand-text);
	transition: border-color .18s ease, background .18s ease;
}

.ht-tcm-konto .gens-referral_share a:hover {
	background: var(--ht-tcm-sand);
	border-color: var(--ht-tcm-sand);
}

.ht-tcm-konto .gens-referral_share a svg {
	width: 18px;
	height: 18px;
}

.ht-tcm-konto .gens-referral_stats__title {
	margin: var(--ht-tcm-space-5) 0 var(--ht-tcm-space-3);
	font-size: var(--ht-tcm-text-md);
	font-weight: 600;
}

.ht-tcm-konto .gens-referral_stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--ht-tcm-space-3);
}

.ht-tcm-konto .gens-referral_stats > div {
	padding: var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius);
	background: #fff;
	font-size: var(--ht-tcm-text-sm);
	color: var(--ht-tcm-sand-muted);
}

.ht-tcm-konto .gens-referral_stats > div span {
	display: block;
	margin-top: var(--ht-tcm-space-1);
	font-size: var(--ht-tcm-text-xl);
	font-weight: 600;
	color: var(--ht-tcm-sand-text);
}

/* Die Überschrift der Statistik erhält von Avada eine eigene Zeilenhöhe. */
.ht-tcm-konto .gens-referral_stats__title {
	--fontSize: 18;
	font-size: var(--ht-tcm-text-md);
	line-height: var(--ht-tcm-lh-ui);
}

/* =========================================================================
   10. Dashboard (Uebersicht)
   ========================================================================= */

.ht-tcm-dash__greeting {
	font-size: var(--ht-tcm-text-lg);
	font-weight: 600;
	margin: 0 0 var(--ht-tcm-space-1);
}

.ht-tcm-dash__intro {
	margin: 0 0 var(--ht-tcm-space-5);
	opacity: .8;
}

.ht-tcm-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ht-tcm-space-4);
	margin-bottom: var(--ht-tcm-space-4);
	padding: var(--ht-tcm-space-4) var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-sand);
	border-radius: var(--ht-tcm-radius-lg);
	background: var(--ht-tcm-sand-bg);
}

.ht-tcm-status--invite,
.ht-tcm-status--willkommen {
	align-items: flex-start;
}

.ht-tcm-status__right {
	text-align: right;
}

.ht-tcm-status__label {
	display: block;
	margin-bottom: var(--ht-tcm-space-1);
	font-size: var(--ht-tcm-text-xs);
	color: var(--ht-tcm-sand-muted);
}

.ht-tcm-status__value {
	display: block;
	font-size: var(--ht-tcm-text-md);
	font-weight: 600;
	color: var(--ht-tcm-sand-text);
}

.ht-tcm-status__text {
	margin: var(--ht-tcm-space-2) 0 0;
	max-width: 44ch;
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
	color: var(--ht-tcm-sand-text);
}

.ht-tcm-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--ht-tcm-space-3);
	margin-bottom: var(--ht-tcm-space-5);
}

.ht-tcm-stat {
	padding: var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius);
	background: #fff;
}

.ht-tcm-stat__label {
	display: block;
	margin-bottom: var(--ht-tcm-space-2);
	font-size: var(--ht-tcm-text-xs);
	opacity: .7;
}

.ht-tcm-stat__value {
	display: block;
	font-size: var(--ht-tcm-text-xl);
	font-weight: 600;
	line-height: var(--ht-tcm-lh-tight);
}

.ht-tcm-stat__hint {
	display: block;
	margin-top: var(--ht-tcm-space-1);
	font-size: var(--ht-tcm-text-xs);
	opacity: .65;
}

.ht-tcm-card {
	margin-bottom: var(--ht-tcm-space-5);
	padding: var(--ht-tcm-space-4) var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-lg);
	background: #fff;
}

.ht-tcm-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--ht-tcm-space-3);
}

.ht-tcm-card__title {
	font-size: var(--ht-tcm-text-md);
	font-weight: 600;
}

.ht-tcm-card__head a {
	font-size: var(--ht-tcm-text-sm);
}

.ht-tcm-event {
	display: flex;
	align-items: center;
	gap: var(--ht-tcm-space-4);
}

.ht-tcm-event__date {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: var(--ht-tcm-radius);
	background: var(--ht-tcm-sand);
	color: var(--ht-tcm-sand-text);
	line-height: var(--ht-tcm-lh-tight);
}

.ht-tcm-event__day {
	font-size: var(--ht-tcm-text-md);
	font-weight: 700;
}

.ht-tcm-event__month {
	font-size: var(--ht-tcm-text-xs);
	text-transform: uppercase;
}

.ht-tcm-event__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ht-tcm-event__title {
	display: block;
	margin-bottom: var(--ht-tcm-space-1);
	font-size: var(--ht-tcm-text-sm);
	font-weight: 600;
}

.ht-tcm-event__meta,
.ht-tcm-event__storno {
	display: block;
	font-size: var(--ht-tcm-text-xs);
	opacity: .75;
}

.ht-tcm-event__storno--closed {
	color: var(--ht-tcm-danger);
	opacity: 1;
}

/* =========================================================================
   11. Responsive
   ========================================================================= */

@media (max-width: 800px) {

	.ht-tcm-konto .woocommerce {
		padding: var(--ht-tcm-space-4);
		border-radius: var(--ht-tcm-radius-lg);
	}

	.ht-tcm-konto .woocommerce-MyAccount-navigation {
		flex: 1 1 100%;
		width: 100%;
		padding: 0 0 var(--ht-tcm-space-4);
		border-right: 0;
		border-bottom: 1px solid var(--ht-tcm-line);
	}

	.ht-tcm-konto .woocommerce-MyAccount-content {
		flex: 1 1 100%;
		width: 100%;
		padding: 0;
		margin-top: var(--ht-tcm-space-5);
	}

	.ht-tcm-status,
	.ht-tcm-event {
		flex-direction: column;
		align-items: flex-start;
	}

	.ht-tcm-status__right {
		text-align: left;
	}

	.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table_responsive thead {
		display: none;
	}

	.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table_responsive tbody tr {
		display: block;
		margin: 0 0 var(--ht-tcm-space-3);
		border: 1px solid var(--ht-tcm-line);
		border-radius: var(--ht-tcm-radius-lg);
		overflow: hidden;
	}

	.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table_responsive tbody td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--ht-tcm-space-4);
		padding: var(--ht-tcm-space-3) var(--ht-tcm-space-4);
		text-align: right;
	}

	.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table_responsive tbody td::before {
		content: attr(data-title);
		flex: 0 0 auto;
		font-size: var(--ht-tcm-text-xs);
		font-weight: 500;
		color: var(--ht-tcm-sand-muted);
		text-align: left;
	}

	.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table_responsive tbody td.order-actions,
	.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table_responsive tbody td.subscription-actions {
		justify-content: flex-end;
		white-space: normal;
	}
}

/* =========================================================================
   14. Nachträge – Kontoseite 1.22.0
   ========================================================================= */

/*
 * Hinweistexte ohne WooCommerce-Klasse.
 *
 * Der Einleitungssatz auf der Adressseite und die Texte im Reiter
 * "Mitgliedergutscheine" sind schlichte <p> ohne .woocommerce-info. Ohne
 * eigene Regel greift dort Avadas Fliesstext – deshalb sahen sie anders aus
 * als die Meldung auf der Abonnementseite, die als Vorbild dient.
 */
.ht-tcm-konto.ht-tcm-endpoint-edit-address .woocommerce-MyAccount-content > p,
.ht-tcm-konto .ht-tcm-gutscheine-summe,
.ht-tcm-konto .ht-tcm-gutscheine-hinweis {
	margin: 0 0 var(--ht-tcm-space-5);
	padding: var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-left: 3px solid var(--ht-tcm-sand);
	border-radius: 0 var(--ht-tcm-radius) var(--ht-tcm-radius) 0;
	background: var(--ht-tcm-sand-bg);
	color: var(--ht-tcm-sand-text);
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
}

/* Der Schlusshinweis steht unter der Tabelle und braucht deshalb Abstand
   nach oben statt nach unten. */
.ht-tcm-konto .ht-tcm-gutscheine-hinweis {
	margin: var(--ht-tcm-space-5) 0 0;
}

/* =========================================================================
   Reiter „Mitgliedergutscheine"
   ========================================================================= */

.ht-tcm-konto .ht-tcm-gutscheine-tabelle {
	width: 100%;
	margin: 0;
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
}

.ht-tcm-konto .ht-tcm-gutscheine-tabelle th {
	padding: var(--ht-tcm-space-3) var(--ht-tcm-space-4);
	border: 0;
	border-bottom: 1px solid var(--ht-tcm-line);
	background: var(--ht-tcm-sand-bg);
	color: var(--ht-tcm-sand-muted);
	font-size: var(--ht-tcm-text-sm);
	font-weight: 500;
	text-align: left;
}

.ht-tcm-konto .ht-tcm-gutscheine-tabelle td {
	padding: var(--ht-tcm-space-3) var(--ht-tcm-space-4);
	border: 0;
	border-bottom: 1px solid var(--ht-tcm-line);
	font-size: var(--ht-tcm-text-sm);
	vertical-align: middle;
}

.ht-tcm-konto .ht-tcm-gutscheine-tabelle tr:last-child td {
	border-bottom: 0;
}

.ht-tcm-konto .ht-tcm-gutscheine-tabelle code {
	padding: 2px 6px;
	border-radius: var(--ht-tcm-radius);
	background: var(--ht-tcm-sand-bg);
	font-size: var(--ht-tcm-text-sm);
}

/* Verbrauchte und abgelaufene Gutscheine bleiben lesbar, treten aber
   zurück – sie sind Beleg, nicht Angebot. */
.ht-tcm-konto .ht-tcm-gutschein-eingeloest td,
.ht-tcm-konto .ht-tcm-gutschein-abgelaufen td {
	color: var(--ht-tcm-sand-muted);
}

/* =========================================================================
   Adressen – Spaltenbreite
   ========================================================================= */

/*
 * Zuvor stand hier repeat(auto-fit, minmax(260px, 1fr)). Im rund 810 Pixel
 * breiten Inhaltsbereich ergab das DREI Spalten für zwei Adressen; jede Karte
 * war damit nur 260 Pixel breit. Überschrift und der Link "Rechnungsadresse
 * bearbeiten" passten nebeneinander nicht hinein und liefen über den Rand der
 * Karte hinaus.
 *
 * Zwei feste Spalten sind hier richtig: Es gibt genau zwei Adressen.
 */
/*
 * Eine Spalte statt zwei.
 *
 * Zwei Karten nebeneinander ergaben im rund 810 Pixel breiten Inhaltsbereich
 * je 400 Pixel. Das reicht für "Rechnungsadresse" plus "Rechnungsadresse
 * bearbeiten" in einer Zeile immer noch nicht zuverlässig, und die Karten
 * wirkten gedrängt – bei zwei Einträgen mit je drei Zeilen Inhalt gibt es
 * keinen Grund, den Platz zu halbieren.
 *
 * Untereinander steht jeder Adresse die volle Breite zur Verfügung:
 * Überschrift links, Bearbeiten-Link rechts, Adresse darunter.
 */
.ht-tcm-konto .woocommerce-Addresses {
	grid-template-columns: 1fr;
	gap: var(--ht-tcm-space-3);
}

/* Zweite Sicherung: Passt beides doch einmal nicht nebeneinander, rutscht der
   Link in die nächste Zeile, statt aus der Karte zu laufen. */
.ht-tcm-konto .woocommerce-Address-title {
	flex-wrap: wrap;
}

.ht-tcm-konto .woocommerce-Address-title h2,
.ht-tcm-konto .woocommerce-Address-title h3 {
	min-width: 0;
	overflow-wrap: break-word;
}

/* =========================================================================
   Blockmeldungen von WooCommerce
   ========================================================================= */

/*
 * WARUM DIESE REGELN NÖTIG SIND
 * Neuere WooCommerce-Fassungen geben Leermeldungen nicht mehr als
 * .woocommerce-info aus, sondern als Block:
 *
 *   <div class="wc-block-components-notice-banner is-info">
 *     <svg>…</svg>
 *     <div class="wc-block-components-notice-banner__content">…</div>
 *   </div>
 *
 * Die Regeln aus Fassung 1.22.0 zielten auf die alten Klassen und liefen
 * deshalb auf der Bestellseite vollständig ins Leere. WooCommerce
 * Subscriptions bringt ein eigenes Template mit und gibt weiterhin
 * .woocommerce-info aus – daher sah die Abonnementseite richtig aus und die
 * Bestellseite nicht.
 */
.ht-tcm-konto .woocommerce-MyAccount-content .wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	gap: var(--ht-tcm-space-3);
	margin: 0 0 var(--ht-tcm-space-5);
	padding: var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-left: 3px solid var(--ht-tcm-sand);
	border-radius: 0 var(--ht-tcm-radius) var(--ht-tcm-radius) 0;
	background: var(--ht-tcm-sand-bg);
	color: var(--ht-tcm-sand-text);
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
}

/* Das Symbol trägt nichts bei – der Text sagt bereits, worum es geht. */
.ht-tcm-konto .woocommerce-MyAccount-content .wc-block-components-notice-banner > svg {
	display: none;
}

.ht-tcm-konto .woocommerce-MyAccount-content .wc-block-components-notice-banner__content {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

/* Bestellungen: einzeilig, ohne Schaltfläche.
   Die Schaltfläche führte über woocommerce_return_to_shop_redirect zur
   Mitgliedschaftsseite – dorthin gehört von der Bestellübersicht kein Weg. */
.ht-tcm-konto.ht-tcm-endpoint-orders .wc-block-components-notice-banner .button,
.ht-tcm-konto.ht-tcm-endpoint-orders .wc-block-components-notice-banner .woocommerce-Button {
	display: none;
}

.ht-tcm-konto.ht-tcm-endpoint-orders .wc-block-components-notice-banner {
	font-size: var(--ht-tcm-text-xs);
}

.ht-tcm-konto.ht-tcm-endpoint-orders .wc-block-components-notice-banner__content {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* =========================================================================
   Kontodetails – Abstand vor „Änderungen speichern"
   ========================================================================= */

/*
 * WooCommerce schliesst das Passwortfeld mit </fieldset><div class="clear">
 * ab und setzt die Schaltfläche in ein eigenes <p> ohne Klasse. Ohne Regel
 * steht sie unmittelbar unter dem weissen Kasten.
 */
.ht-tcm-konto .woocommerce-EditAccountForm fieldset {
	margin-bottom: 0;
}

.ht-tcm-konto .woocommerce-EditAccountForm fieldset + .clear + p,
.ht-tcm-konto .woocommerce-EditAccountForm > p:last-child {
	margin-top: var(--ht-tcm-space-5);
}

/* =========================================================================
   15. Nachträge – Kontoseite 1.23.0
   ========================================================================= */

/*
 * Einleitungssatz auf der Übersicht.
 *
 * Er stand bisher als schlichter Fliesstext da, während dieselbe Art von
 * Hinweis auf den übrigen Reitern als Kasten erscheint. Jetzt einheitlich.
 */
.ht-tcm-konto .ht-tcm-dash__intro {
	margin: 0 0 var(--ht-tcm-space-5);
	padding: var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-left: 3px solid var(--ht-tcm-sand);
	border-radius: 0 var(--ht-tcm-radius) var(--ht-tcm-radius) 0;
	background: var(--ht-tcm-sand-bg);
	color: var(--ht-tcm-sand-text);
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
}

/* =========================================================================
   Überschrift je Reiter
   ========================================================================= */

/*
 * Avada setzt eine Überschrift nur auf einigen Endpoints – auf Bestellungen
 * ja, auf Adressen nicht. HT_TCM_WC_Mein_Konto::titel_ergaenzen() ergänzt sie
 * dort, wo sie fehlt, und verwendet dieselbe Klasse.
 *
 * Die Grössenangabe ist nötig, weil Avada seine eigene Überschrift per
 * Inline-Style bemisst; die ergänzte hat keinen und bekäme sonst Avadas
 * Standardgrösse für h2.
 */
.ht-tcm-konto .woocommerce-MyAccount-content > .avada-woocommerce-myaccount-heading {
	margin: 0 0 var(--ht-tcm-space-4);
	font-size: var(--ht-tcm-text-lg);
	line-height: var(--ht-tcm-lh-tight);
	font-weight: 600;
}

/*
 * Avada ordnet den Inhalt auf manchen Endpoints per Flexbox und weist der
 * Überschrift order:0 zu, allem übrigen order:1. Die ergänzte Überschrift
 * bekommt denselben Wert, damit sie auch dort oben steht.
 */
.ht-tcm-konto .woocommerce-MyAccount-content > .ht-tcm-heading {
	-webkit-order: 0;
	order: 0;
}

/* =========================================================================
   Adressen – Bearbeitungsseite
   ========================================================================= */

/*
 * Auf /mein-konto/adresse/rechnung/ gibt WooCommerce die Überschrift als <h3>
 * im Formular aus. Ohne Treffer greift Avadas Standardgrösse, und der Titel
 * steht deutlich zu gross über dem Formular.
 *
 * Bewusst nicht über .woocommerce-Address-title: Diese Klasse gibt es nur auf
 * der Übersicht der Adressen, nicht im Bearbeitungsformular.
 */
.ht-tcm-konto.ht-tcm-endpoint-edit-address .woocommerce-MyAccount-content form h2,
.ht-tcm-konto.ht-tcm-endpoint-edit-address .woocommerce-MyAccount-content form h3 {
	margin: 0 0 var(--ht-tcm-space-4);
	--fontSize: 21.5;
	font-size: var(--ht-tcm-text-lg);
	line-height: var(--ht-tcm-lh-tight);
	font-weight: 600;
}

/* =========================================================================
   16. Eigene Hinweise und Adressliste – 1.24.0
   ========================================================================= */

/*
 * WARUM ES DIESE KLASSEN GIBT
 * Avada bringt für die Blockmeldungen von WooCommerce und für das
 * Spaltenraster der Adressen eigene Regeln mit, lädt sein Stylesheet NACH
 * diesem Plugin und arbeitet dabei mit !important. Von aussen dagegen
 * anzuschreiben hiesse, bei jeder Eigenschaft die Spezifität zu überbieten.
 *
 * Deshalb werden beide Stellen serverseitig durch eigenes Markup ersetzt –
 * die Blockmeldungen im Ausgabepuffer, die Adressen über ein eigenes
 * Template. Ohne Avadas Klassen greifen Avadas Regeln nicht.
 */

.ht-tcm-konto .woocommerce-MyAccount-content .ht-tcm-hinweis {
	display: block;
	margin: 0 0 var(--ht-tcm-space-5);
	padding: var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-left: 3px solid var(--ht-tcm-sand);
	border-radius: 0 var(--ht-tcm-radius) var(--ht-tcm-radius) 0;
	background: var(--ht-tcm-sand-bg);
	color: var(--ht-tcm-sand-text);
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
}

/* Bleibt eine Schaltfläche im Hinweis – etwa „Zahlungsart hinzufügen" –,
   erscheint sie als Verweis in derselben Zeile statt als Kasten im Kasten. */
.ht-tcm-konto .woocommerce-MyAccount-content .ht-tcm-hinweis a {
	color: var(--ht-tcm-sand-text);
	font-weight: 600;
	text-decoration: underline;
}

/* -------- Adressen -------- */

.ht-tcm-konto .ht-tcm-adressen {
	display: flex;
	flex-direction: column;
	gap: var(--ht-tcm-space-3);
	margin: 0 0 var(--ht-tcm-space-5);
}

.ht-tcm-konto .ht-tcm-adresse {
	padding: var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-lg);
	background: #fff;
}

.ht-tcm-konto .ht-tcm-adresse__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ht-tcm-space-3);
	margin: 0 0 var(--ht-tcm-space-2);
	padding: 0 0 var(--ht-tcm-space-2);
	border-bottom: 1px solid var(--ht-tcm-line);
}

.ht-tcm-konto .ht-tcm-adresse__titel {
	font-size: var(--ht-tcm-text-md);
	line-height: var(--ht-tcm-lh-ui);
	font-weight: 600;
}

/* Kurz und gleich lang – „Bearbeiten" statt „Rechnungsadresse bearbeiten".
   Der Titel steht daneben, die Wiederholung trug nichts bei und war der
   Grund, warum die Zeile in der alten Spaltenfassung überlief. */
.ht-tcm-konto .ht-tcm-adresse__link {
	flex: 0 0 auto;
	font-size: var(--ht-tcm-text-sm);
	color: var(--ht-tcm-sand-muted);
	text-decoration: underline;
}

.ht-tcm-konto .ht-tcm-adresse__link:hover {
	color: var(--ht-tcm-sand-text);
}

.ht-tcm-konto .ht-tcm-adresse__text {
	margin: 0;
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
	font-style: normal;
}

.ht-tcm-konto .ht-tcm-adresse--leer .ht-tcm-adresse__text {
	color: var(--ht-tcm-sand-muted);
}

/* =========================================================================
   17. Überschrift der Navigation – 1.25.0
   ========================================================================= */

/*
 * Steht innerhalb des <nav>, nicht davor: Die Kontoseite ist eine Flexbox mit
 * genau zwei Kindern; ein drittes würde die Aufteilung sprengen. Siehe
 * templates/myaccount/navigation.php.
 *
 * WARUM EIN DURCHSICHTIGER RAHMEN LINKS
 * Die Menüpunkte haben border-left: 3px – durchsichtig, beim aktiven Punkt
 * eingefärbt. Ihr Text beginnt damit 3 Pixel weiter rechts als das Polster
 * allein vorgibt. Die Überschrift bekommt denselben Rahmen, damit beide
 * bündig stehen. Ihn nachzurechnen und als grösseres Polster einzutragen
 * würde stillschweigend brechen, sobald sich die Rahmenbreite ändert.
 */
.ht-tcm-konto .woocommerce-MyAccount-navigation .ht-tcm-konto-titel {
	margin: 0 0 var(--ht-tcm-space-2);
	padding: 0 var(--ht-tcm-space-4) var(--ht-tcm-space-3);
	border-left: 3px solid transparent;
	border-bottom: 1px solid var(--ht-tcm-line);
	color: var(--ht-tcm-text);
	font-size: var(--ht-tcm-text-md);
	line-height: var(--ht-tcm-lh-ui);
	font-weight: 600;
}

/* =========================================================================
   18. Auswahllisten (Select2) – 1.25.2
   ========================================================================= */

/*
 * WARUM DIESE REGEL NÖTIG IST
 * Avada setzt
 *
 *   .select2-dropdown { background-color: var(--form_bg_color) }
 *
 * und die Themeoption steht auf rgba(255,255,255,0) – durchsichtiges Weiss.
 * Am ausgelieferten Stylesheet überprüft.
 *
 * Bei Eingabefeldern fällt das nicht auf: Sie sitzen auf weissem Grund. Die
 * aufgeklappte Liste schwebt dagegen über dem Seiteninhalt, und der scheint
 * dann durch die Einträge hindurch. Betroffen ist unter anderem
 * „Bundesland / Landkreis" auf den Adressformularen.
 *
 * Die Themeoption selbst zu ändern wäre der falsche Hebel: Sie gilt für jedes
 * Formular der Installation, auch dort, wo die Durchsichtigkeit gewollt ist.
 *
 * Select2 hängt die Liste an <body>. Da .ht-tcm-konto eine Body-Klasse ist,
 * greift die Regel trotzdem nur auf der Kontoseite.
 */
.ht-tcm-konto .select2-dropdown {
	background-color: #fff;
	border: 1px solid var(--ht-tcm-line);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.ht-tcm-konto .select2-container--default .select2-results__option {
	padding: var(--ht-tcm-space-2) var(--ht-tcm-space-4);
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-ui);
}

/* Der Eintrag unter dem Zeiger. Ohne eigene Angabe bliebe es beim Blau von
   Select2, das neben dem Sandton der Kontoseite fremd wirkt. */
.ht-tcm-konto .select2-container--default .select2-results__option--highlighted[aria-selected],
.ht-tcm-konto .select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--ht-tcm-sand-bg);
	color: var(--ht-tcm-sand-text);
}

.ht-tcm-konto .select2-container--default .select2-results__option[aria-selected="true"],
.ht-tcm-konto .select2-container--default .select2-results__option[data-selected="true"] {
	background-color: var(--ht-tcm-sand-bg);
	color: var(--ht-tcm-sand-text);
	font-weight: 600;
}

/* Das Suchfeld im aufgeklappten Zustand erbt denselben durchsichtigen
   Hintergrund und wäre sonst ebenfalls nicht lesbar. */
.ht-tcm-konto .select2-container--default .select2-search--dropdown .select2-search__field {
	background-color: #fff;
	border: 1px solid var(--ht-tcm-line);
}

/* =========================================================================
   19. Reiter „Kunden werben Kunden" – 1.26.0
   ========================================================================= */

.ht-tcm-konto .ht-tcm-kwk-link {
	display: flex;
	flex-direction: column;
	gap: var(--ht-tcm-space-2);
	margin: 0 0 var(--ht-tcm-space-5);
	padding: var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-lg);
	background: #fff;
}

.ht-tcm-konto .ht-tcm-kwk-link__label {
	color: var(--ht-tcm-sand-muted);
	font-size: var(--ht-tcm-text-sm);
	font-weight: 500;
}

/*
 * Schreibgeschütztes Feld statt Fliesstext: Der Link ist lang und soll in
 * einem Zug markiert werden können. onfocus="this.select()" erledigt das
 * ohne zusätzliches Skript – eine Schaltfläche zum Kopieren bräuchte
 * JavaScript, das dieses Modul sonst nirgends lädt.
 */
.ht-tcm-konto .ht-tcm-kwk-link__feld {
	width: 100%;
	padding: var(--ht-tcm-space-3) var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius);
	background: var(--ht-tcm-sand-bg);
	color: var(--ht-tcm-text);
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-ui);
}

.ht-tcm-konto .ht-tcm-kwk-zahlen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ht-tcm-space-3);
	margin: 0 0 var(--ht-tcm-space-5);
}

@media (max-width: 640px) {
	.ht-tcm-konto .ht-tcm-kwk-zahlen {
		grid-template-columns: 1fr;
	}
}

.ht-tcm-konto .ht-tcm-kwk-zahl {
	display: flex;
	flex-direction: column;
	gap: var(--ht-tcm-space-1);
	padding: var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-lg);
	background: #fff;
}

.ht-tcm-konto .ht-tcm-kwk-zahl__wert {
	font-size: var(--ht-tcm-text-xl);
	line-height: var(--ht-tcm-lh-tight);
	font-weight: 600;
}

.ht-tcm-konto .ht-tcm-kwk-zahl__label {
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-ui);
}

.ht-tcm-konto .ht-tcm-kwk-zahl__hinweis {
	color: var(--ht-tcm-sand-muted);
	font-size: var(--ht-tcm-text-xs);
	line-height: var(--ht-tcm-lh-ui);
}

/* Ablauf der Empfehlung ------------------------------------------------- */

.ht-tcm-konto .ht-tcm-kwk-schritte {
	margin: 0 0 var(--ht-tcm-space-5);
	padding: var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-lg);
	background: #fff;
}

.ht-tcm-konto .ht-tcm-kwk-schritte__titel {
	margin: 0 0 var(--ht-tcm-space-3);
	font-size: var(--ht-tcm-text-md);
	line-height: var(--ht-tcm-lh-ui);
	font-weight: 600;
}

.ht-tcm-konto .ht-tcm-kwk-schritte ol {
	margin: 0;
	padding: 0 0 0 var(--ht-tcm-space-5);
	list-style: decimal;
}

.ht-tcm-konto .ht-tcm-kwk-schritte li {
	margin: 0 0 var(--ht-tcm-space-2);
	padding: 0;
	background: none;
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
}

.ht-tcm-konto .ht-tcm-kwk-schritte li:last-child {
	margin-bottom: 0;
}

/* =========================================================================
   20. Bestellungen – Liste und Detailseite – 1.29.0
   ========================================================================= */

/*
 * DIE ERSTE ZELLE IST EIN <th>, KEIN <td>
 *
 * WooCommerce gibt die Bestellnummer in der Liste als
 * <th class="woocommerce-orders-table__cell ..." scope="row"> aus. Die Regeln
 * in Abschnitt 5 sprechen nur tbody td an – die Nummer bekam deshalb kein
 * Polster und stand um mehrere Pixel versetzt zur Spaltenüberschrift.
 */
.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table tbody th,
.ht-tcm-konto .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th {
	padding: var(--ht-tcm-space-3) var(--ht-tcm-space-4);
	border: 0;
	border-bottom: 1px solid var(--ht-tcm-line);
	vertical-align: middle;
	background: transparent;
	font-weight: 600;
	text-align: left;
}

.ht-tcm-konto .woocommerce-MyAccount-content table.shop_table tbody tr:last-child th {
	border-bottom: 0;
}

/*
 * Abstand zwischen den Schaltflächen der Aktionsspalte.
 *
 * Die vorhandene Regel in Abschnitt 5 sprach td.order-actions an. Die Zelle
 * heisst in der Bestellliste aber woocommerce-orders-table__cell-order-actions
 * – am ausgelieferten Markup überprüft. Die Regel griff deshalb nie, und
 * „Anzeigen" und „Stornieren" klebten aneinander.
 *
 * BEWUSST KEIN display: flex AUF DER ZELLE
 * Das nähme die Zelle aus dem Tabellenlayout: Sie wäre kein table-cell mehr
 * und richtete sich nicht mehr an ihrer Spalte aus – also genau der Fehler,
 * der hier behoben werden soll. Der Abstand kommt daher über einen Rand am
 * zweiten Verweis.
 */
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
	text-align: left;
	white-space: nowrap;
}

/*
 * Avadas Pfeil an den Aktionsverweisen entfernen.
 *
 *   .my_account_orders .woocommerce-orders-table__cell-order-actions a:after {
 *     position: absolute; font-family: awb-icons; content: "\f105"; margin-left: 10px;
 *   }
 *
 * Am ausgelieferten Stylesheet überprüft. Das position:absolute ist dabei der
 * eigentliche Schaden: Der Pfeil steht ausserhalb des Textflusses, sodass die
 * Schaltflächen trotz Rand aneinanderstiessen.
 */
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a::after,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a::before,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-MyAccount-downloads .download-actions a::after {
	content: none;
	display: none;
}

.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions > a + a,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions > .button + .button {
	margin-left: var(--ht-tcm-space-2);
}

/* =========================================================================
   Detailseite einer Bestellung
   ========================================================================= */

/*
 * Avada legt die Bereiche in .woocommerce-content-box und bringt dafür eigene
 * Rahmen, Polster und Überschriftgrössen mit. Statt sie zu überbieten,
 * bekommen alle Bereiche hier dieselbe Karte wie die übrigen Reiter.
 */
.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details,
.ht-tcm-konto .woocommerce-MyAccount-content .avada-customer-details,
.ht-tcm-konto .woocommerce-MyAccount-content .ht-storno-box,
.ht-tcm-konto .woocommerce-MyAccount-content .ht-belege-box,
.ht-tcm-konto .woocommerce-MyAccount-content .tec-tickets__attendees-list-wrapper {
	margin: 0 0 var(--ht-tcm-space-5);
	padding: var(--ht-tcm-space-5);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-lg);
	background: #fff;
	box-shadow: none;
}

/*
 * Überschriften der Bereiche.
 *
 * Avada bemisst sie über .fusion-responsive-typography-calculated mit einem
 * Inline-Wert von 46 Pixeln. Der Inline-Style setzt nur die Variable
 * --fontSize; die Grösse selbst kommt aus einer Klassenregel und lässt sich
 * daher mit ausreichender Spezifität überschreiben.
 */
.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details > h2,
.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details .woocommerce-order-details__title,
.ht-tcm-konto .woocommerce-MyAccount-content .avada-customer-details header h2,
.ht-tcm-konto .woocommerce-MyAccount-content .ht-storno-box .ht-storno-box__titel,
.ht-tcm-konto .woocommerce-MyAccount-content .ht-belege-box .ht-belege-box__titel,
.ht-tcm-konto .woocommerce-MyAccount-content .tec-tickets__attendees-list-wrapper > h4 {
	margin: 0 0 var(--ht-tcm-space-4);
	padding: 0;
	font-size: var(--ht-tcm-text-lg);
	line-height: var(--ht-tcm-lh-tight);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* Adressüberschriften eine Stufe kleiner als die Bereichsüberschrift. */
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-columns--addresses h3,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-column header h3 {
	margin: 0 0 var(--ht-tcm-space-2);
	font-size: var(--ht-tcm-text-md);
	line-height: var(--ht-tcm-lh-ui);
	font-weight: 600;
}

/* Die Tabelle sitzt bereits in einer Karte – ein zweiter Rahmen darum wirkt
   wie ein Kasten im Kasten. */
.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details table.order_details {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/*
 * WICHTIG: auf .avada-order-details eingegrenzt.
 *
 * table.order_details kommt an zwei Stellen vor. Auf der Bestelldetailseite
 * sitzt sie INNERHALB der Karte, dort ist seitliches Polster doppelt. Auf der
 * Abonnementseite IST dieselbe Tabelle die Karte – ohne Eingrenzung stiess der
 * Inhalt dort direkt an den Rahmen.
 */
.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details table.order_details thead th {
	padding-left: 0;
	padding-right: 0;
	background: transparent;
	border-bottom: 1px solid var(--ht-tcm-line);
}

.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details table.order_details tbody td,
.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details table.order_details tbody th {
	padding-left: 0;
	padding-right: 0;
	vertical-align: top;
}

/*
 * Summenblock.
 *
 * WooCommerce gibt Zwischensumme, Versand und Gesamtsumme als tfoot aus. Ohne
 * eigene Angabe erbt er den Sandton der Tabellenfüsse aus Abschnitt 5 und
 * setzte sich als farbiger Block vom Rest der Karte ab.
 */
.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details table.order_details tfoot th,
.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details table.order_details tfoot td {
	padding: var(--ht-tcm-space-2) 0;
	border: 0;
	background: transparent;
	font-size: var(--ht-tcm-text-sm);
}

.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details table.order_details tfoot tr:first-child th,
.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details table.order_details tfoot tr:first-child td {
	padding-top: var(--ht-tcm-space-3);
	border-top: 1px solid var(--ht-tcm-line);
}

.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details table.order_details tfoot th {
	text-align: left;
	font-weight: 500;
	color: var(--ht-tcm-sand-muted);
}

.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details table.order_details tfoot td {
	text-align: right;
}

/* Die letzte Zeile ist die Gesamtsumme und darf das auch aussehen. */
.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details table.order_details tfoot tr:last-child th,
.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details table.order_details tfoot tr:last-child td {
	padding-top: var(--ht-tcm-space-3);
	border-top: 1px solid var(--ht-tcm-line);
	color: var(--ht-tcm-text);
	font-size: var(--ht-tcm-text-md);
	font-weight: 600;
}

/* Veranstaltungsangaben, die The Events Calendar in die Produktzelle legt. */
.ht-tcm-konto .woocommerce-MyAccount-content .tribe-event-details,
.ht-tcm-konto .woocommerce-MyAccount-content .tribe-attendee-meta {
	margin: var(--ht-tcm-space-2) 0 0;
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
}

.ht-tcm-konto .woocommerce-MyAccount-content .tribe-attendee-meta-heading {
	margin: var(--ht-tcm-space-2) 0 var(--ht-tcm-space-1);
	color: var(--ht-tcm-sand-muted);
	font-size: var(--ht-tcm-text-xs);
	font-weight: 600;
}

/* -------- Stornierung -------- */

.ht-tcm-konto .woocommerce-MyAccount-content .ht-storno-text {
	margin: 0 0 var(--ht-tcm-space-3);
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
}

.ht-tcm-konto .woocommerce-MyAccount-content .ht-storno-hinweis {
	margin: 0 0 var(--ht-tcm-space-4);
	color: var(--ht-tcm-sand-muted);
	font-size: var(--ht-tcm-text-xs);
	line-height: var(--ht-tcm-lh-text);
}

/* Die Schaltfläche lief über die volle Breite der Karte. Ein Vorgang, der
   nicht rückgängig zu machen ist, soll wie eine Wahl aussehen, nicht wie der
   einzige Weg vorwärts. */
.ht-tcm-konto .woocommerce-MyAccount-content .ht-storno-box form {
	margin: 0;
}

.ht-tcm-konto .woocommerce-MyAccount-content .ht-storno-button {
	display: inline-block;
	width: auto;
}

/* -------- Rechnungsunterlagen -------- */

/*
 * Ein Beleg je Zeile: links Bezeichnung und Nummer, rechts die Schaltfläche.
 *
 * Flexbox und nicht float: Avada bricht Float-Spalten im Kundenkonto um, sobald
 * die Karte schmaler wird, und der Umbruch liesse die Schaltfläche unter der
 * Bezeichnung linksbündig stehen statt rechts.
 */
.ht-tcm-konto .woocommerce-MyAccount-content .ht-belege-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ht-tcm-konto .woocommerce-MyAccount-content .ht-belege-liste__eintrag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ht-tcm-space-3);
	margin: 0;
	padding: var(--ht-tcm-space-3) 0;
	list-style: none;
}

.ht-tcm-konto .woocommerce-MyAccount-content .ht-belege-liste__eintrag + .ht-belege-liste__eintrag {
	border-top: 1px solid var(--ht-tcm-line);
}

.ht-tcm-konto .woocommerce-MyAccount-content .ht-belege-liste__bezeichnung {
	min-width: 0;
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
	font-weight: 600;
	overflow-wrap: break-word;
}

/* Die Nummer ist eine Zusatzangabe und soll die Bezeichnung nicht überlagern. */
.ht-tcm-konto .woocommerce-MyAccount-content .ht-belege-liste__nummer {
	color: var(--ht-tcm-sand-muted);
	font-size: var(--ht-tcm-text-xs);
	font-weight: 400;
}

/*
 * Gleiche Behandlung wie beim Storno-Knopf: Avada gibt Schaltflächen im
 * Kundenkonto eine feste Mindestbreite und hängt über ::after einen Pfeil an,
 * der über die eigene Breite hinausragt.
 */
.ht-tcm-konto .woocommerce-MyAccount-content .ht-belege-button {
	display: inline-block;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	min-width: 0;
	white-space: nowrap;
}

.ht-tcm-konto .woocommerce-MyAccount-content .ht-belege-button::after,
.ht-tcm-konto .woocommerce-MyAccount-content .ht-belege-button::before {
	content: none;
	display: none;
}

/*
 * Erst wenn die Zeile zu eng wird, untereinander.
 *
 * Die Regel MUSS in einer Media Query stehen. Ohne sie überschreibt sie die
 * Zeilendarstellung oben bei jeder Breite, und die Schaltfläche rutscht
 * dauerhaft unter die Bezeichnung.
 */
@media (max-width: 640px) {
	.ht-tcm-konto .woocommerce-MyAccount-content .ht-belege-liste__eintrag {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ht-tcm-space-2);
	}
}

/* -------- Tickets -------- */

.ht-tcm-konto .woocommerce-MyAccount-content .tec-tickets__attendees-list-item {
	padding: var(--ht-tcm-space-4);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius);
	background: var(--ht-tcm-sand-bg);
}

.ht-tcm-konto .woocommerce-MyAccount-content .tec-tickets__attendees-list-item + .tec-tickets__attendees-list-item {
	margin-top: var(--ht-tcm-space-3);
}

.ht-tcm-konto .woocommerce-MyAccount-content .tec-tickets__attendees-list-item-attendee-details-name {
	font-size: var(--ht-tcm-text-md);
	line-height: var(--ht-tcm-lh-ui);
	font-weight: 600;
}

.ht-tcm-konto .woocommerce-MyAccount-content .tec-tickets__attendees-list-item-attendee-details-ticket {
	color: var(--ht-tcm-sand-muted);
	font-size: var(--ht-tcm-text-sm);
}

.ht-tcm-konto .woocommerce-MyAccount-content .tec-tickets__wallet-plus-passes-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ht-tcm-space-2);
	margin-top: var(--ht-tcm-space-3);
}

/* -------- Kundendaten -------- */

.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ht-tcm-space-4);
	margin: 0;
}

@media (max-width: 640px) {
	.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-columns--addresses {
		grid-template-columns: 1fr;
	}
}

.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-columns--addresses .woocommerce-column {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}

.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-columns--addresses address {
	margin: 0;
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-text);
	font-style: normal;
}

/* =========================================================================
   21. Nachträge Bestelldetails – 1.29.1
   ========================================================================= */

/*
 * Der Storno-Knopf lief aus der Karte heraus.
 *
 * Avada gibt Schaltflächen im Kundenkonto eine feste Mindestbreite und ein
 * Polster, das zusammen mit dem Innenabstand der Karte breiter wurde als der
 * verfügbare Platz. Zusätzlich sorgt Avadas Pfeil mit position:absolute für
 * Inhalt jenseits der eigenen Breite.
 */
.ht-tcm-konto .woocommerce-MyAccount-content .ht-storno-box,
.ht-tcm-konto .woocommerce-MyAccount-content .ht-belege-box {
	overflow: hidden;
}

.ht-tcm-konto .woocommerce-MyAccount-content .ht-storno-button {
	display: inline-block;
	width: auto;
	max-width: 100%;
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
}

.ht-tcm-konto .woocommerce-MyAccount-content .ht-storno-button::after,
.ht-tcm-konto .woocommerce-MyAccount-content .ht-storno-button::before {
	content: none;
	display: none;
}

/*
 * Überschrift des Ticketbereichs.
 *
 * Sie kommt von Event Tickets als <h4 class="tribe-common-h4"> und hatte
 * dadurch weder die Grösse noch die Trennlinie der übrigen Bereiche. Die
 * Grössenregel steht bereits in Abschnitt 20; hier kommt die Linie dazu, und
 * zwar für alle Bereichsüberschriften gemeinsam, damit sie nicht auseinander
 * laufen.
 */
.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details > h2,
.ht-tcm-konto .woocommerce-MyAccount-content .avada-order-details .woocommerce-order-details__title,
.ht-tcm-konto .woocommerce-MyAccount-content .avada-customer-details header h2,
.ht-tcm-konto .woocommerce-MyAccount-content .ht-storno-box .ht-storno-box__titel,
.ht-tcm-konto .woocommerce-MyAccount-content .ht-belege-box .ht-belege-box__titel,
.ht-tcm-konto .woocommerce-MyAccount-content .tec-tickets__attendees-list-wrapper > h4 {
	padding-bottom: var(--ht-tcm-space-3);
	border-bottom: 1px solid var(--ht-tcm-line);
}

/* Event Tickets bringt für seine Überschrift eigene Schrifteinstellungen mit. */
.ht-tcm-konto .woocommerce-MyAccount-content .tec-tickets__attendees-list-wrapper > h4 {
	font-family: inherit;
	letter-spacing: 0;
	text-transform: none;
}

/* =========================================================================
   22. Teilnehmerangaben – Spaltenabstand – 1.30.9
   ========================================================================= */

/*
 * Die Tabelle der Teilnehmerangaben hat zwei Spalten: Bezeichnung und Wert.
 * Event Tickets Plus gibt sie ohne Polster aus, sodass beide aneinanderstossen.
 *
 * width: 1% zusammen mit white-space: nowrap lässt die erste Spalte genau so
 * breit werden, wie ihr längster Eintrag es verlangt – der Rest bleibt dem
 * Wert. Eine feste Breite in Prozent würde bei kurzen Bezeichnungen Platz
 * verschenken und bei langen umbrechen.
 */
.ht-tcm-konto .woocommerce-MyAccount-content table.tribe-attendee-meta {
	width: 100%;
	border-collapse: collapse;
}

.ht-tcm-konto .woocommerce-MyAccount-content table.tribe-attendee-meta td {
	padding: 3px 0;
	border: 0;
	vertical-align: top;
	background: transparent;
}

.ht-tcm-konto .woocommerce-MyAccount-content table.tribe-attendee-meta td:first-child {
	width: 1%;
	padding-right: var(--ht-tcm-space-5);
	white-space: nowrap;
	color: var(--ht-tcm-sand-muted);
}

/*
 * Event Tickets Plus setzt die Bezeichnungen von Name und E-Mail als <p>, die
 * übrigen als reinen Text. Ohne diese Regel stehen die beiden Zeilen wegen der
 * Standardabstände eines Absatzes höher als die anderen.
 */
.ht-tcm-konto .woocommerce-MyAccount-content table.tribe-attendee-meta p {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

/* =========================================================================
   23. Überschriften im Kontobereich – 1.31.2
   ========================================================================= */

/*
 * WooCommerce und seine Erweiterungen setzen im Kundenkonto Überschriften ohne
 * eigene Klasse: „Abonnement-Summen", „Zugehörige Bestellungen",
 * „Zugehörige Abonnements", „Rechnungsadresse". Avada bemisst sie dann mit
 * seiner Standardgrösse von 46 Pixeln – am ausgelieferten Markup überprüft.
 *
 * WARUM EINE ALLGEMEINE REGEL UND NICHT VIER EINZELNE
 * Diese Überschriften haben keine gemeinsame Klasse; einzeln zu treffen hiesse,
 * sie über ihre Position im Markup anzusprechen. Käme eine fünfte hinzu – etwa
 * aus einer weiteren Erweiterung –, stünde sie wieder mit 46 Pixeln da.
 *
 * Die Regel greift nur innerhalb von .woocommerce-MyAccount-content. Speziellere
 * Regeln weiter oben – Bereichsüberschriften der Bestelldetails, Adresskarten,
 * Stornobereich – haben höhere Spezifität und bleiben unberührt.
 */
.ht-tcm-konto .woocommerce-MyAccount-content h2 {
	margin: 0 0 var(--ht-tcm-space-4);
	font-size: var(--ht-tcm-text-lg);
	line-height: var(--ht-tcm-lh-tight);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.ht-tcm-konto .woocommerce-MyAccount-content h3 {
	margin: 0 0 var(--ht-tcm-space-3);
	font-size: var(--ht-tcm-text-md);
	line-height: var(--ht-tcm-lh-ui);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* Steht eine Überschrift über einer Tabelle, braucht sie Abstand nach oben –
   sonst klebt sie an der Karte darüber. */
.ht-tcm-konto .woocommerce-MyAccount-content table + h2,
.ht-tcm-konto .woocommerce-MyAccount-content table + header > h2,
.ht-tcm-konto .woocommerce-MyAccount-content table + section > h2 {
	margin-top: var(--ht-tcm-space-6);
}

.ht-tcm-konto .woocommerce-MyAccount-content header {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/*
 * Ausnahmen von der allgemeinen Überschriftregel.
 *
 * Beide Regeln setzen dieselbe Schriftgrösse, unterscheiden sich aber im
 * Aussenabstand – und sie haben dieselbe Spezifität wie die allgemeine Regel,
 * stünden also nur wegen ihrer Position in der Datei zurück. Das hier stellt
 * den Abstand ausdrücklich wieder her, statt sich auf die Reihenfolge zu
 * verlassen.
 *
 * .woocommerce-Address-title greift nur, wenn das eigene Adress-Template nicht
 * verwendet wird; .gens-raf-text nur beim direkten Aufruf des ausgeblendeten
 * WPGens-Endpoints. Beides sind Rückfallebenen, die trotzdem stimmen sollen.
 */
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.ht-tcm-konto .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	margin: 0;
}

.ht-tcm-konto .woocommerce-MyAccount-content .gens-raf-text h2 {
	margin: 0 0 var(--ht-tcm-space-2);
}

/* =========================================================================
   Reiter „Meine Veranstaltungen & Teilnehmerliste" – Modul wc-teilnehmerliste
   ========================================================================= */

/*
 * BUTTON-BREITE UND -HÖHE
 *
 * Avada erzwingt bei aktivierter Option „Button Span" über rund vierzig
 * Selektoren width:100%. Für diese Seite greift
 *
 *   .fusion-button_span-yes .woocommerce-MyAccount-content form
 *   .button:not(.fusion-button-span-no)
 *
 * mit der Spezifität (0,4,1). Ein Gegenselektor müsste darüber liegen – ein
 * Wettlauf, den die nächste Avada-Fassung wieder gewinnt. Jeder dieser
 * Selektoren endet aber auf :not(.fusion-button-span-no). Diese Klasse steht
 * deshalb am Knopf selbst; sie ist Avadas eigener Ausstieg.
 *
 * Zusätzlich überschreibt Avada über
 *
 *   .woocommerce-MyAccount-content form .button { padding-*: var(--awb-*) }
 *
 * die Innenabstände. Das ist (0,3,0) und damit gleichauf mit einer Regel aus
 * drei Klassen – bei Gleichstand entscheidet die Ladereihenfolge, und die
 * ist nicht verlässlich. Die Regel unten nimmt deshalb den Inhaltsbereich
 * mit auf und liegt bei (0,4,0).
 *
 * Und drittens – das war die Ursache dafür, dass der Knopf auch nach dem
 * Beheben der Breite noch unten aus der Karte hing:
 *
 *   .woocommerce-MyAccount-content form .woocommerce-Button,
 *   .woocommerce-MyAccount-content form button { float: right }
 *
 * Ein gefloateter Knopf trägt nichts zur Höhe seines Absatzes bei. Der Absatz
 * blieb damit leer, die Karte wuchs nicht mit, und der Knopf stand unten
 * rechts halb im Freien. Deshalb steht unten float: none.
 */
.ht-tcm-konto .woocommerce-MyAccount-content .ht-tcm-teilnehmende .ht-tcm-btn {
	box-sizing: border-box;
	display: inline-block;
	float: none;
	width: auto;
	max-width: 100%;
	min-width: 0;
	padding: var(--ht-tcm-space-2) var(--ht-tcm-space-4);
	line-height: var(--ht-tcm-lh-ui);
}

/* =========================================================================
   Erste Ebene – Liste der eigenen Veranstaltungen
   ========================================================================= */

/*
 * EINE ZEILE JE VERANSTALTUNG
 *
 * table-layout: fixed statt automatischer Spaltenbreiten. Bei automatischer
 * Berechnung bestimmt der Inhalt die Breite; ein langer Veranstaltungstitel
 * drückt dann alle übrigen Spalten zusammen, bis sie umbrechen. Mit festen
 * Anteilen steht die Aufteilung vorher fest, und zu langer Text wird
 * abgeschnitten statt umgebrochen.
 *
 * Der volle Text bleibt über das title-Attribut erreichbar; dort steht
 * zusätzlich der Veranstaltungsort.
 */
.ht-tcm-konto .ht-tcm-events-tabelle {
	table-layout: fixed;
}

.ht-tcm-konto .ht-tcm-events-tabelle th,
.ht-tcm-konto .ht-tcm-events-tabelle td {
	padding: var(--ht-tcm-space-3) var(--ht-tcm-space-4);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

/*
 * Kopfzeilen in der regulären Grösse der übrigen Kontotabellen. Die
 * Verkleinerung auf 11 px war nötig, solange die Tabelle sechs Spalten hatte;
 * seit der Ort im Titel steckt, ist der Platz wieder da.
 */
/*
 * vertical-align: top, nicht bottom.
 *
 * Zwei der vier Kopfzeilen tragen einen Zusatz in kleiner Schrift. Bei
 * Ausrichtung an der Unterkante stünden „Termin" und „Veranstaltung" auf
 * Höhe dieser Zusätze, die Hauptwörter der Zahlenspalten dagegen eine Zeile
 * höher – die Kopfzeile liefe auf zwei Höhen auseinander. Oben ausgerichtet
 * beginnen alle vier Hauptwörter auf derselben Linie, die Zusätze hängen
 * darunter.
 */
.ht-tcm-konto .ht-tcm-events-tabelle th {
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-tight);
	vertical-align: top;
}

.ht-tcm-konto .ht-tcm-events-tabelle td {
	font-size: var(--ht-tcm-text-sm);
}

/* Der Zusatz unter „Angemeldet" erklärt, warum die Zahl grösser ist als die
   Liste lang. Er darf die Spalte nicht breiter machen als nötig. */
.ht-tcm-konto .ht-tcm-events-tabelle .ht-tcm-sp-zusatz {
	display: block;
	margin-top: 2px;
	font-size: var(--ht-tcm-text-xs);
	font-weight: 400;
	line-height: var(--ht-tcm-lh-tight);
	white-space: normal;
	opacity: .75;
}

.ht-tcm-konto .ht-tcm-events-tabelle .ht-tcm-sp-termin {
	width: 22%;
}

.ht-tcm-konto .ht-tcm-events-tabelle .ht-tcm-sp-titel {
	width: 28%;
}

.ht-tcm-konto .ht-tcm-events-tabelle .ht-tcm-sp-angemeldet {
	width: 15%;
}

.ht-tcm-konto .ht-tcm-events-tabelle .ht-tcm-sp-sichtbar {
	width: 15%;
}

.ht-tcm-konto .ht-tcm-events-tabelle .ht-tcm-sp-aktion {
	width: 20%;
	text-align: right;
}

.ht-tcm-konto .ht-tcm-events-tabelle .ht-tcm-sp-titel span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ht-tcm-konto .ht-tcm-events-tabelle .ht-tcm-zahl {
	text-align: right;
}



.ht-tcm-konto .ht-tcm-zurueck {
	margin: 0 0 var(--ht-tcm-space-4);
	font-size: var(--ht-tcm-text-sm);
}

/* =========================================================================
   Zweite Ebene – Teilnehmerliste einer Veranstaltung
   ========================================================================= */

.ht-tcm-konto .ht-tcm-teilnehmende-titel {
	margin: 0 0 var(--ht-tcm-space-1);
	font-size: var(--ht-tcm-text-lg);
	line-height: var(--ht-tcm-lh-tight);
}

.ht-tcm-konto .ht-tcm-teilnehmende-termin {
	margin: 0 0 var(--ht-tcm-space-4);
	color: var(--ht-tcm-sand-muted);
	font-size: var(--ht-tcm-text-sm);
}

.ht-tcm-konto .ht-tcm-teilnehmende-tabelle th {
	font-size: var(--ht-tcm-text-xs);
}

.ht-tcm-konto .ht-tcm-teilnehmende-tabelle th,
.ht-tcm-konto .ht-tcm-teilnehmende-tabelle td {
	padding: var(--ht-tcm-space-2) var(--ht-tcm-space-3);
}

.ht-tcm-konto .ht-tcm-teilnehmende-tabelle td a {
	word-break: break-word;
}

/* =========================================================================
   Schalter für die Sichtbarkeit
   ========================================================================= */

.ht-tcm-konto .ht-tcm-teilnehmende-widerspruch {
	margin-top: var(--ht-tcm-space-6);
	padding: var(--ht-tcm-space-5);
	border: 1px solid var(--ht-tcm-line);
	border-radius: var(--ht-tcm-radius-xl);
	background: var(--ht-tcm-sand-bg);
}

.ht-tcm-konto .ht-tcm-teilnehmende-widerspruch h3 {
	margin: 0 0 var(--ht-tcm-space-4);
	font-size: var(--ht-tcm-text-lg);
	line-height: var(--ht-tcm-lh-tight);
}

/* Letztes Element im Kasten: kein Aussenabstand nach unten, sonst addiert er
   sich auf den Innenabstand der Karte. */
.ht-tcm-konto .ht-tcm-teilnehmende-widerspruch form {
	margin: 0;
}

.ht-tcm-konto .ht-tcm-teilnehmende-widerspruch > *:last-child,
.ht-tcm-konto .ht-tcm-teilnehmende-widerspruch form > *:last-child {
	margin-bottom: 0;
}

/*
 * SCHALTER STATT KONTROLLKÄSTCHEN
 * Das Kontrollkästchen bleibt im Markup und trägt weiterhin den Zustand – es
 * wird lediglich unsichtbar gemacht und durch die Spur davor dargestellt.
 * Damit funktionieren Tastaturbedienung, Screenreader und das Absenden ohne
 * JavaScript unverändert.
 */
.ht-tcm-konto .ht-tcm-schalter {
	display: flex;
	gap: var(--ht-tcm-space-3);
	align-items: flex-start;
	margin: 0 0 var(--ht-tcm-space-3);
	cursor: pointer;
	line-height: var(--ht-tcm-lh-text);
}

.ht-tcm-konto .ht-tcm-schalter input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.ht-tcm-konto .ht-tcm-schalter-spur {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 26px;
	margin-top: 2px;
	border: 1px solid var(--ht-tcm-line-strong);
	border-radius: var(--ht-tcm-radius-pill);
	background: #fff;
	transition: background .18s ease, border-color .18s ease;
}

.ht-tcm-konto .ht-tcm-schalter-spur::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ht-tcm-sand-muted);
	transition: transform .18s ease, background .18s ease;
}

.ht-tcm-konto .ht-tcm-schalter input:checked + .ht-tcm-schalter-spur {
	border-color: var(--ht-tcm-sand-dark);
	background: var(--ht-tcm-sand);
}

.ht-tcm-konto .ht-tcm-schalter input:checked + .ht-tcm-schalter-spur::after {
	transform: translateX(18px);
	background: var(--ht-tcm-sand-text);
}

/* Der Fokusring gehört an die Spur – das Kästchen selbst ist ausgeblendet. */
.ht-tcm-konto .ht-tcm-schalter input:focus-visible + .ht-tcm-schalter-spur {
	outline: 2px solid var(--ht-tcm-sand-dark);
	outline-offset: 2px;
}

.ht-tcm-konto .ht-tcm-schalter-text {
	flex: 1 1 auto;
}

.ht-tcm-konto .ht-tcm-schalter-aktion {
	margin: var(--ht-tcm-space-4) 0 0;
}

/* Während des Absendens: der Schalter ist bereits umgelegt, die Seite lädt
   noch. Ohne diesen Zustand wirkt die Verzögerung wie ein Aussetzer. */
.ht-tcm-konto .ht-tcm-schalter--sendet {
	opacity: .6;
	pointer-events: none;
}

/* =========================================================================
   Mittlere Fenster
   ========================================================================= */

/*
 * Zwischen 700 und 1000 Pixeln reicht der Platz für die volle Schriftgrösse
 * nicht mehr: Termin und Schaltfläche würden abgeschnitten. Statt sie zu
 * kürzen, rückt die Tabelle hier eine Stufe kleiner. Unterhalb von 700 px
 * greift ohnehin die Kartendarstellung.
 */
@media (min-width: 701px) and (max-width: 1000px) {

	.ht-tcm-konto .ht-tcm-events-tabelle th,
	.ht-tcm-konto .ht-tcm-events-tabelle td {
		padding: var(--ht-tcm-space-2) var(--ht-tcm-space-3);
		font-size: var(--ht-tcm-text-xs);
	}

	.ht-tcm-konto .woocommerce-MyAccount-content .ht-tcm-events-tabelle .ht-tcm-sp-aktion .ht-tcm-btn {
		padding: 6px var(--ht-tcm-space-3);
		font-size: var(--ht-tcm-text-xs);
	}
}

/* =========================================================================
   Schmale Geräte
   ========================================================================= */

/*
 * Unterhalb von 700 Pixeln werden beide Tabellen zu Karten. Seitliches
 * Scrollen wäre bei fünf Spalten unbrauchbar; die Spaltentitel stehen über
 * data-label an jeder Zelle bereit.
 */
@media (max-width: 700px) {

	.ht-tcm-konto .ht-tcm-events-tabelle,
	.ht-tcm-konto .ht-tcm-teilnehmende-tabelle {
		display: block;
		table-layout: auto;
		border: 0;
		background: none;
	}

	.ht-tcm-konto .ht-tcm-events-tabelle thead,
	.ht-tcm-konto .ht-tcm-teilnehmende-tabelle thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
	}

	.ht-tcm-konto .ht-tcm-events-tabelle tbody,
	.ht-tcm-konto .ht-tcm-teilnehmende-tabelle tbody {
		display: block;
	}

	.ht-tcm-konto .ht-tcm-events-tabelle tr,
	.ht-tcm-konto .ht-tcm-teilnehmende-tabelle tr {
		display: block;
		margin-bottom: var(--ht-tcm-space-3);
		border: 1px solid var(--ht-tcm-line);
		border-radius: var(--ht-tcm-radius-lg);
		background: #fff;
		overflow: hidden;
	}

	/* Auf der Karte ist Platz – hier darf der Titel wieder umbrechen. */
	.ht-tcm-konto .ht-tcm-events-tabelle td,
	.ht-tcm-konto .ht-tcm-teilnehmende-tabelle td {
		display: flex;
		gap: var(--ht-tcm-space-4);
		justify-content: space-between;
		width: auto !important;
		white-space: normal;
		overflow: visible;
		text-align: right;
	}

	.ht-tcm-konto .ht-tcm-events-tabelle td::before,
	.ht-tcm-konto .ht-tcm-teilnehmende-tabelle td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: var(--ht-tcm-sand-muted);
		font-weight: 500;
		text-align: left;
	}

	.ht-tcm-konto .ht-tcm-events-tabelle .ht-tcm-sp-aktion {
		display: block;
		text-align: center;
	}

	.ht-tcm-konto .ht-tcm-events-tabelle .ht-tcm-sp-aktion .ht-tcm-btn {
		width: 100%;
	}
}

/* =========================================================================
   Sortierbare Tabellen – 1.43.0
   ========================================================================= */

/*
 * WARUM DIE MARKIERUNG ABSOLUT POSITIONIERT IST
 *
 * Die Veranstaltungstabelle arbeitet mit table-layout: fixed und schneidet zu
 * langen Text mit text-overflow: ellipsis ab. Ein im Textfluss stehendes
 * Zeichen zählte zur Breite und würde bei schmalen Spalten – "Angemeldet" auf
 * 15 % – selbst abgeschnitten. Absolut positioniert liegt es ausserhalb des
 * Flusses; der zusätzliche rechte Innenabstand hält den Text davon frei.
 *
 * Verankert wird oben statt mittig: Zwei Kopfzeilen jener Tabelle tragen einen
 * Zusatz in kleiner Schrift und sind dadurch zweizeilig. Mittig ausgerichtet
 * stünde die Markierung dort zwischen den Zeilen, in allen übrigen Tabellen
 * aber auf der Zeile – die Kopfzeile liefe auf zwei Höhen auseinander.
 */
.ht-tcm-konto .woocommerce-MyAccount-content th.ht-tcm-sortierbar {
	position: relative;
	padding-right: 22px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.ht-tcm-konto .woocommerce-MyAccount-content th.ht-tcm-sortierbar:focus-visible {
	outline: 2px solid var(--ht-tcm-sand-muted);
	outline-offset: -2px;
}

.ht-tcm-konto .woocommerce-MyAccount-content th.ht-tcm-sortierbar::after {
	content: "\2195";
	position: absolute;
	top: calc(var(--ht-tcm-space-3) + 1px);
	right: 6px;
	font-size: 10px;
	line-height: inherit;
	opacity: 0;
	transition: opacity .15s ease;
}

/*
 * Die neutrale Markierung erscheint erst bei Annäherung. Dauerhaft sichtbar
 * stünde in jeder Kopfzeile ein Doppelpfeil, der über den Zustand der Tabelle
 * nichts aussagt und die Beschriftung nur schwerer lesbar macht.
 */
.ht-tcm-konto .woocommerce-MyAccount-content th.ht-tcm-sortierbar:hover::after,
.ht-tcm-konto .woocommerce-MyAccount-content th.ht-tcm-sortierbar:focus::after {
	opacity: .45;
}

.ht-tcm-konto .woocommerce-MyAccount-content th.ht-tcm-sortierbar[aria-sort="ascending"]::after {
	content: "\25B2";
	font-size: 8px;
	opacity: 1;
}

.ht-tcm-konto .woocommerce-MyAccount-content th.ht-tcm-sortierbar[aria-sort="descending"]::after {
	content: "\25BC";
	font-size: 8px;
	opacity: 1;
}

/*
 * Unterhalb von 800 px wird aus den Tabellen von WooCommerce eine Kartenliste,
 * unterhalb von 700 px aus den eigenen. Die Kopfzeile ist dort ausgeblendet;
 * der Zeiger würde auf nichts zeigen.
 */
@media (max-width: 800px) {

	.ht-tcm-konto .woocommerce-MyAccount-content th.ht-tcm-sortierbar {
		padding-right: var(--ht-tcm-space-4);
		cursor: default;
	}

	.ht-tcm-konto .woocommerce-MyAccount-content th.ht-tcm-sortierbar::after {
		content: none;
	}
}

/* =========================================================================
   Warteliste im Reiter „Meine Veranstaltungen" – 1.45.0
   ========================================================================= */

/*
 * Die Tabelle übernimmt bewusst die Klassen der Veranstaltungsliste darüber
 * (.ht-tcm-events-tabelle) und ergänzt nur, was sich unterscheidet: eine
 * Spalte weniger und andere Anteile. Ein eigener Satz Regeln sähe heute
 * gleich aus und liefe beim nächsten Eingriff auseinander.
 */

.ht-tcm-konto .ht-tcm-warteliste {
	margin-top: var(--ht-tcm-space-6);
	padding-top: var(--ht-tcm-space-5);
	border-top: 1px solid var(--ht-tcm-line);
}

.ht-tcm-konto .ht-tcm-warteliste-titel {
	margin: 0 0 var(--ht-tcm-space-2);
	font-size: var(--ht-tcm-text-lg);
	line-height: var(--ht-tcm-lh-tight);
}

/* Vier Spalten statt fünf: Die Anteile müssen neu aufgeteilt werden, sonst
   greift table-layout: fixed mit den Werten der Veranstaltungsliste. */
.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-termin {
	width: 26%;
}

.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-titel {
	width: 38%;
}

.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-eingetragen {
	width: 18%;
}

.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-aktion {
	width: 18%;
	text-align: right;
}

.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-titel a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	color: inherit;
	text-decoration: none;
}

.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-titel a:hover {
	text-decoration: underline;
}

/*
 * Das Formular sitzt in einer Tabellenzelle. Ohne diese Regel setzt Avada
 * seinen Standardabstand darunter und die Zeile wird höher als die der
 * Veranstaltungsliste – beide Tabellen stehen aber untereinander.
 */
.ht-tcm-konto .ht-tcm-warteliste-austragen {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.ht-tcm-konto .woocommerce-MyAccount-content .ht-tcm-warteliste .ht-tcm-btn {
	white-space: nowrap;
}

@media (max-width: 700px) {

	.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-aktion {
		display: block;
		text-align: center;
	}

	.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-aktion .ht-tcm-btn {
		width: 100%;
	}

	.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-titel a {
		display: inline;
	}
}

/* -------------------------------------------------------------------------
   Leerzeile in den Tabellen des Reiters „Meine Veranstaltungen"
   ------------------------------------------------------------------------- */

/*
 * Die Zellen der Veranstaltungstabelle tragen white-space: nowrap samt
 * overflow: hidden und text-overflow: ellipsis – nötig, damit ein langer
 * Veranstaltungstitel die Spaltenanteile nicht sprengt. Ein ganzer Satz
 * bräche darin nach dem ersten Wort ab. Die Leerzeile hebt das auf.
 */
.ht-tcm-konto .ht-tcm-events-tabelle td.ht-tcm-leer,
.ht-tcm-konto .ht-tcm-warteliste-tabelle td.ht-tcm-leer {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	width: auto;
	padding: var(--ht-tcm-space-5) var(--ht-tcm-space-4);
	color: var(--ht-tcm-sand-muted);
	font-size: var(--ht-tcm-text-sm);
	line-height: var(--ht-tcm-lh-base);
	text-align: left;
}

.ht-tcm-konto .ht-tcm-events-tabelle tr.ht-tcm-leer-zeile:hover td,
.ht-tcm-konto .ht-tcm-warteliste-tabelle tr.ht-tcm-leer-zeile:hover td {
	background: transparent;
}

@media (max-width: 700px) {

	/*
	 * Unterhalb von 700 px werden beide Tabellen zu Karten: tbody-Zeilen
	 * werden zu Blöcken, Zellen zu Flex-Zeilen mit der Spaltenbeschriftung
	 * aus data-label. Die Leerzeile hat keine Beschriftung und soll auch
	 * keine Karte sein – sie ist ein Satz, kein Datensatz.
	 */
	.ht-tcm-konto .ht-tcm-events-tabelle tr.ht-tcm-leer-zeile,
	.ht-tcm-konto .ht-tcm-warteliste-tabelle tr.ht-tcm-leer-zeile {
		display: block;
		border: 0;
	}

	.ht-tcm-konto .ht-tcm-events-tabelle td.ht-tcm-leer,
	.ht-tcm-konto .ht-tcm-warteliste-tabelle td.ht-tcm-leer {
		display: block;
		width: auto !important;
		padding: var(--ht-tcm-space-4) 0 0;
		text-align: left;
	}

	.ht-tcm-konto .ht-tcm-events-tabelle td.ht-tcm-leer::before,
	.ht-tcm-konto .ht-tcm-warteliste-tabelle td.ht-tcm-leer::before {
		content: none;
	}
}

/* Fünfte Spalte der Wartelistentabelle – 1.48.0 */

.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-termin {
	width: 22%;
}

.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-titel {
	width: 30%;
}

.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-eingetragen {
	width: 16%;
}

.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-wl-status {
	width: 14%;
}

.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-aktion {
	width: 18%;
}

.ht-tcm-konto .ht-tcm-wl-status {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--ht-tcm-sand);
	border-radius: 999px;
	background: var(--ht-tcm-sand-bg);
	color: var(--ht-tcm-sand-text);
	font-size: var(--ht-tcm-text-xs);
	line-height: 1.6;
	white-space: nowrap;
}

/*
 * „Benachrichtigt" ist ein abgeschlossener Zustand, kein laufender. Gedämpft
 * dargestellt, damit „Wartet" die Zeile führt, auf die es ankommt.
 */
.ht-tcm-konto .ht-tcm-wl-status--fertig {
	border-color: var(--ht-tcm-line);
	background: transparent;
	color: var(--ht-tcm-sand-muted);
}

@media (max-width: 700px) {

	.ht-tcm-konto .ht-tcm-warteliste-tabelle .ht-tcm-sp-wl-status {
		display: flex;
	}
}