/*
 * CR-3D "Mein Konto"-Redesign. Die WooCommerce-Standardtemplates fuer die
 * Konto-Seiten (Dashboard, Bestellungen, Bestelldetails, Adressen,
 * Zahlungsarten, Kontodetails) waren bisher komplett unstyled (nackte
 * Bullet-Liste als Navigation, Standard-Tabellen, Text bricht teils aus dem
 * Container aus) - hier an die im Shop etablierte Teal-CI angepasst.
 */
:root {
	--cr3d-text: #1a1d20;
	--cr3d-text-dim: #6b7280;
	--cr3d-accent: #07737a;
	--cr3d-accent-hover: #055a5f;
	--cr3d-border: #e2e5e8;
	--cr3d-font-heading: 'Montserrat', sans-serif;
	--cr3d-font-body: 'Montserrat', sans-serif;
}

/* "Mein Konto"-Ueberschrift (KingComposer-Titel-Element auf dieser Seite)
   in Good Times, wie der Seitentitel "Warenkorb" auf der Cart-Seite
   (siehe #opal-breadscrumb .title-page in breadcrumb-redesign.css). */
.woocommerce-account .kc_title {
	font-family: 'Good Times', sans-serif;
	font-weight: 900;
	color: var(--cr3d-accent);
	/* Zentriert wie der Seitentitel auf der Warenkorb-Seite (siehe
	   body.woocommerce-cart #opal-breadscrumb .title-page in
	   breadcrumb-redesign.css) - selbe Groesse (44px), Kundenwunsch 2026-07-27. */
	text-align: center;
	font-size: 44px;
}
/* Bug-Report 2026-07-27: ab ~768px verschmilzt der "Dashboard"-Nav-Button
   optisch mit der Ueberschrift zu einem riesigen Button. Ursache: der von
   KingComposer generierte Wrapper um das Titel-Element (".kc-title-wrap",
   Klasse "kc-css-XXXXXX" ist pro Element eindeutig und daher hier nicht
   verwendet) ist bei dieser Breite "float:left" ueber fast die volle
   Spaltenbreite, wird aber nirgends geclearfixt. Der nachfolgende
   WooCommerce-Nav-Text ("Dashboard") laeuft dadurch in die Ueberschrift
   hinein und hat nur einen winzigen freien Rest-Streifen zum Umbrechen -
   daher der senkrechte Buchstabe-fuer-Buchstabe-Umbruch, der wie ein
   riesiger, mit der Ueberschrift verschmolzener Button aussieht. Ein
   volle-Breite-Titel braucht kein Float, daher hier einfach entfernen statt
   nur zu clearfixen - sauberer und trifft keine anderen KC-Floats. */
.woocommerce-account .kc-title-wrap {
	float: none !important;
}
/* Selbe Bug-Klasse, zweite Quelle: zwischen Titel-Reihe und der
   WooCommerce-Konto-Reihe fuegt KingComposer einen LEEREN Abstands-Div ein
   (z.B. `<div class="kc-elm kc-css-XXXXXX" style="height:50px;
   clear:both; width:100%;"></div>`) - auch dieser ist per KC-eigenem CSS
   "float:left" und ragt dadurch in die erste Nav-Zeile hinein (kleinerer
   Rest-Effekt als beim Titel-Wrapper oben, aber gleiche Ursache). Da diese
   Abstands-Divs immer leer sind (nur zur Vertikal-Luecke da), robust ueber
   ":empty" erfasst statt ueber die zufaellige "kc-css-XXXXXX"-Klasse, die
   sich bei jedem Speichern im KC-Builder aendern kann. */
.woocommerce-account .kc-elm:empty {
	float: none !important;
}
/* Dritte Auspraegung derselben Bug-Familie (Bug-Report 2026-07-27, Adress-
   Bearbeiten-Formulare): die KC-Zeile/-Spalte, die den WooCommerce-Konto-
   Inhalt umschliesst (".kc_row"/".kc_col-sm-12"), ist floated OHNE
   explizite Breite. Solange ein Nachfahre normalen Block-Inhalt hat, faellt
   das per Shrink-to-Fit nicht auf - sobald aber (wie hier fuer die
   Adressformulare) ein CSS-Grid-Kind mit "fr"-Einheiten drinsteckt, das fuer
   die Spaltenberechnung selbst eine definitive Breite vom Elternelement
   braucht, entsteht eine Zirkel-Abhaengigkeit, die der Browser mit Breite 0
   aufloest (kompletter Karten-/Formular-Kollaps). "kc_col-sm-12" bedeutet
   "12 von 12 Bootstrap-Spalten" (volle Breite, keine Geschwisterspalte) -
   Float wird hier fuer nichts gebraucht, daher gefahrlos global fuer
   Konto-Seiten deaktivierbar. */
.woocommerce-account .kc_row,
.woocommerce-account .kc_col-sm-12 {
	float: none !important;
	width: 100% !important;
}
/* Ohne Float haengt die Breite dieser Kette an ganz normaler Block-Vererbung
   ("width:auto" = Breite des Elternelements) - auf den Adress-Bearbeiten-
   Seiten bricht diese Kette aber trotzdem zusammen (alle Vorfahren bis hoch
   zu ".site-content" kollabieren auf 0 Breite), sobald irgendwo tief drin
   ein CSS-Grid mit "fr"-Einheiten steckt (siehe ".woocommerce-address-
   fields__field-wrapper" weiter unten) - eine zirkulaere Breitenberechnung
   ueber viele "width:auto"-Ebenen hinweg, die der Browser mit 0 aufloest.
   Explizite Breite an einer stabilen, hohen Stelle in der Kette durchbricht
   den Zirkel. */
.woocommerce-account .site-content,
.woocommerce-account .entry-content-page,
.woocommerce-account article {
	width: 100% !important;
}

/* Die Konto-Seite ist (anders als z.B. die Warenkorb-Seite) mit KingComposer
   als volle-Breite-Reihe gebaut, daher keine automatische Bootstrap-
   ".container"-Zentrierung wie sonst im Shop ueblich - Inhalt lief bisher bis
   an den Bildschirmrand. Hier eigene Zentrierung ergaenzen. */
.woocommerce-account .kc_title,
.woocommerce-account div.woocommerce:has(> .woocommerce-MyAccount-navigation) {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
/* Nav + Status-Text-Bereich: normales float:left/float:right aus
   woocommerce-layout.css, nur mit Clearfix ergaenzt (das fehlte im Original
   und liess hohen Inhalt aus der rechten Spalte fallen). Bewusst KEIN
   Flexbox/Grid-Umbau mehr - das ist mit der KingComposer-Seitenstruktur
   dieser Seite mehrfach kollidiert und hat das Layout komplett zerschossen.
   Die Bestelldetails-Tabelle landet durch einen KingComposer-Rendering-Bug
   strukturell AUSSERHALB von .woocommerce-MyAccount-content (bestaetigt per
   Live-Login) - das ist ein offener Punkt, an dem vorsichtiger weitergearbeitet
   werden muss, statt es mit einem riskanten CSS-Umbau in einem Schritt zu loesen. */
.woocommerce-account div.woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
	content: "";
	display: table;
	clear: both;
}
@media (max-width: 767.98px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: 100%;
	}
}
/* WICHTIG: NICHT display:block auf die <table> selbst setzen (frueherer
   Versuch) - das zerstoert die native Tabellen-Layout-Berechnung (thead/tbody
   werden dann teils gar nicht mehr angezeigt, siehe Bug-Report: leere Box
   anstelle der Bestellpositionen-Tabelle). Stattdessen die Tabelle normal
   lassen und nur den umgebenden Content-Bereich scrollbar machen, falls eine
   Tabelle wirklich breiter als die Spalte waere. */
.woocommerce-account .woocommerce-MyAccount-content {
	overflow-x: auto;
}
.woocommerce-account .woocommerce-MyAccount-content table {
	max-width: 100%;
}

/* "Zu meinen Bestellungen"-Zurueck-Link oben auf der Bestelldetails-Seite. */
.cr3d-back-to-orders {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
	font-family: var(--cr3d-font-heading);
	font-size: 13px;
	font-weight: 700;
	color: var(--cr3d-accent) !important;
}
.cr3d-back-to-orders:hover {
	color: var(--cr3d-accent-hover) !important;
	text-decoration: underline;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-family: var(--cr3d-font-heading);
	color: var(--cr3d-text);
	font-weight: 700;
}
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content td,
.woocommerce-account .woocommerce-MyAccount-content th,
.woocommerce-account .woocommerce-MyAccount-content li {
	font-family: var(--cr3d-font-body);
	color: var(--cr3d-text);
}

/* ==========================================================================
   Navigation (Dashboard / Bestellungen / Warenkorb / ... links als Karte
   statt nackter Bullet-Liste)
   ========================================================================== */
.woocommerce-MyAccount-navigation {
	background: #fff;
	border: 1px solid rgba(7, 115, 122, .12);
	border-radius: 10px;
	padding: 8px 0;
	margin-bottom: 30px;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid rgba(7, 115, 122, .07);
}
.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 20px;
	font-family: var(--cr3d-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--cr3d-text);
	transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.woocommerce-MyAccount-navigation li a:hover {
	background: rgba(7, 115, 122, .06);
	color: var(--cr3d-accent);
	padding-left: 25px;
}
.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--cr3d-accent);
	background: rgba(7, 115, 122, .08);
	border-left: 3px solid var(--cr3d-accent);
	padding-left: 17px;
}

/* Thematische Gruppen-Labels vor der Navigation, rein per CSS-generiertem
   Inhalt (kein Template-Override noetig) - analog zu den Gruppen im
   Header-Dropdown (siehe cr3d_account_menu_render() in functions.php). */
.woocommerce-MyAccount-navigation-link--orders::before,
.woocommerce-MyAccount-navigation-link--edit-address::before {
	display: block;
	padding: 12px 20px 4px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #9aa1a6;
}
.woocommerce-MyAccount-navigation-link--orders::before {
	content: "Bestellwesen";
}
.woocommerce-MyAccount-navigation-link--edit-address::before {
	content: "Kontoeinstellungen";
}
.woocommerce-MyAccount-navigation-link--orders {
	border-top: 1px solid rgba(7, 115, 122, .07);
}
.woocommerce-MyAccount-navigation-link--edit-address {
	border-top: 1px solid rgba(7, 115, 122, .07);
}
.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 6px;
	border-top: 1px solid rgba(7, 115, 122, .07);
}
.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #b3402f;
}
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: rgba(179, 64, 47, .08);
	color: #b3402f;
}

/* ==========================================================================
   Tabellen (Bestellungen, Downloads, Bestelldetails)
   ========================================================================== */
.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-orders-table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid rgba(7, 115, 122, .12);
	border-radius: 8px;
	overflow: hidden;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.woocommerce-orders-table th {
	background: rgba(7, 115, 122, .06);
	color: var(--cr3d-text);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 12px 16px;
	text-align: left;
	border-bottom: none;
}
.woocommerce-account table.shop_table td,
.woocommerce-account table.woocommerce-orders-table td {
	padding: 12px 16px;
	font-size: 14px;
	border-top: 1px solid rgba(7, 115, 122, .08);
}

/* ==========================================================================
   Bestelldetails-Tabelle (view-order, "order_details") schlanker, in der
   Warenkorb-CI (siehe cart-redesign.css: eckig statt abgerundet, keine
   schattierten Label-Zellen, dezente Trennlinien). Eigener Block statt der
   generischen ".shop_table"-Regel oben, weil deren Kopfzeilen-Schattierung
   (".shop_table th { background: ... }") in dieser Tabelle JEDE Fusszeile
   trifft ("Zwischensumme:", "Lieferung:", "Zahlungsart:", "Gesamt:" sind im
   WooCommerce-Core-Template alle <th>, nicht nur die echte Spaltenkopfzeile
   "Produkt"/"Gesamt") - dadurch wirkte bisher jede Zeile wie ein grauer
   Balken statt nur die eine echte Kopfzeile (Kundenwunsch 2026-07-27). */
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details {
	/* Explizite Breite, weil eine <table> ohne sie auf ihre Textbreite
	   schrumpft statt den Container zu fuellen - dadurch wirkte die Tabelle
	   schmaler als die Teal-Box der Bestell-Kopfzeile darueber, obwohl beide
	   im selben 1170px-Container stehen (Kundenwunsch 2026-08-10). */
	width: 100%;
	border: 1px solid var(--cr3d-border);
	border-radius: 0;
}
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details thead th {
	background: none;
	font-weight: 600;
	font-size: 12px;
	color: var(--cr3d-text-dim);
}
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details tfoot th,
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details tfoot td {
	background: none;
	font-weight: 400;
	font-size: 13px;
	text-transform: none;
	letter-spacing: normal;
}
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details tfoot th {
	color: var(--cr3d-text-dim);
}
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details tfoot td {
	text-align: right;
	color: var(--cr3d-text);
}
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details tbody td,
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details tfoot th,
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details tfoot td {
	border-top: 1px solid var(--cr3d-border);
}
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details tbody td.product-total {
	text-align: right;
	font-weight: 600;
}

/* Variantenangabe ("Gewicht: 1 kg", Label umbenannt in
   cr3d_order_item_meta_label_rename() in functions.php) exakt im selben
   dezenten Stil wie im Mini-Warenkorb (siehe
   ".cr3d-mini-cart-qty-table td.cr3d-mini-cart-qty-variation dt/dd" in
   mini-cart-redesign.css: 11px, gedimmt, Label+Wert inline mit kleinem
   Abstand) statt der bisherigen WooCommerce-Standarddarstellung
   (Kundenwunsch 2026-07-27). Der Wert steckt hier in einem <p> statt <dd>
   (WC-Core-Markup: "<ul class="wc-item-meta"><li><strong>...</strong>
   <p>...</p></li></ul>") - <p> ist block-level und wuerde sonst in eine
   eigene Zeile umbrechen, daher hier auf inline gezwungen. */
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details .wc-item-meta {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	font-size: 11px;
	color: var(--cr3d-text-dim);
}
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details .wc-item-meta li {
	margin: 0;
}
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details .wc-item-meta-label {
	font-weight: 400;
}
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details .wc-item-meta p {
	display: inline;
	margin: 0 0 0 4px;
	padding: 0;
}

/* ==========================================================================
   Rechnungs-/Lieferadresse (view-order) - Ueberschrift + Box in der
   Warenkorb-CI statt Standard-WordPress-H2 (bisher riesig/fett/schwarz) und
   statt WooCommerce-Cores abgerundeter Adressbox (border-radius:5px,
   asymmetrische 2px-Kanten unten/rechts). */
:is(.woocommerce-account, .woocommerce-order-received) .woocommerce-column__title {
	font-family: var(--cr3d-font-heading);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--cr3d-text);
	margin: 0 0 12px;
}
:is(.woocommerce-account, .woocommerce-order-received) .woocommerce-customer-details address {
	border: 1px solid var(--cr3d-border) !important;
	border-radius: 0 !important;
	padding: 16px !important;
	font-size: 14px;
	line-height: 1.6;
}

/* ==========================================================================
   Adressuebersicht (/my-account/edit-address/) als Karten im 2er-Grid statt
   WooCommerce-Standard-Spalten (Kundenwunsch 2026-07-27). Bearbeiten-Button
   (Text vereinfacht auf "Bearbeiten"/"Hinzufuegen" - siehe Theme-Override
   woocommerce/myaccount/my-address.php, da "Rechnungsadresse bearbeiten"
   neben der gleichnamigen Karten-Ueberschrift redundant war) steht direkt
   unter dem Titel, danach erst die Adresse.
   ========================================================================== */
.woocommerce-account .woocommerce-Addresses.col2-set {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	width: 100%;
}
/* Explizite Spalten-/Zeilenzuweisung statt Grid-Auto-Placement: die
   Auto-Platzierung hat hier aus unklarem Grund (mgl. Rendering-Eigenheit mit
   diesem konkreten Markup) beide Karten UNTEREINANDER statt nebeneinander
   platziert, obwohl 2 Spalten definiert sind - mit fest zugewiesener
   Spalte/Zeile (ueber WooCommerces eigene "u-column1"/"u-column2"-Klassen)
   funktioniert es zuverlaessig. */
.woocommerce-account .woocommerce-Addresses.col2-set .u-column1 {
	grid-column: 1;
	grid-row: 1;
}
.woocommerce-account .woocommerce-Addresses.col2-set .u-column2 {
	grid-column: 2;
	grid-row: 1;
}
.woocommerce-account .woocommerce-Address {
	width: 100% !important;
	float: none !important;
	background: #fff;
	border: 1px solid rgba(7, 115, 122, .12);
	border-radius: 10px;
	padding: 20px;
	box-sizing: border-box;
}
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 14px;
}
.woocommerce-account .woocommerce-Address-title h2 {
	font-family: var(--cr3d-font-heading);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--cr3d-text);
	margin: 0;
}
.woocommerce-account .woocommerce-Address-title a.edit {
	display: inline-block;
	background: var(--cr3d-accent) !important;
	color: #fff !important;
	border-radius: 6px;
	font-family: var(--cr3d-font-heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .02em;
	padding: 9px 16px;
	text-decoration: none;
	transition: background .15s ease;
}
.woocommerce-account .woocommerce-Address-title a.edit:hover {
	background: var(--cr3d-accent-hover) !important;
}
.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: var(--cr3d-text);
}
@media (max-width: 640px) {
	.woocommerce-account .woocommerce-Addresses.col2-set {
		grid-template-columns: 1fr;
	}
	.woocommerce-account .woocommerce-Addresses.col2-set .u-column1,
	.woocommerce-account .woocommerce-Addresses.col2-set .u-column2 {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Status-Zeile ("Bestellung #X ist aktuell Y.") auf der Bestelldetails-Seite
   als Chip wie in der Bestellungsuebersicht (Kundenwunsch 2026-07-27) - Farbe
   je Status ueber die Klasse "order-status--{slug}", die
   cr3d_order_details_status_class() in functions.php dem <mark> zusaetzlich
   mitgibt (WooCommerce Core liefert von sich aus keine Status-Klasse hier,
   nur auf der Bestellungsliste). Gleiche Farbpalette wie
   ".woocommerce-orders-table__cell-order-status" weiter oben. */
:is(.woocommerce-account, .woocommerce-order-received) mark.order-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid rgba(7, 115, 122, .22);
	color: var(--cr3d-accent);
	font-family: var(--cr3d-font-heading);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 6px 14px;
	border-radius: 999px;
	--status-dot: var(--cr3d-accent);
}
:is(.woocommerce-account, .woocommerce-order-received) mark.order-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--status-dot);
	flex: 0 0 auto;
}
:is(.woocommerce-account, .woocommerce-order-received) mark.order-status--completed {
	border-color: rgba(34, 153, 84, .3);
	color: #1f9d55;
	--status-dot: #1f9d55;
}
:is(.woocommerce-account, .woocommerce-order-received) mark.order-status--processing {
	border-color: rgba(7, 115, 122, .3);
	color: var(--cr3d-accent);
	--status-dot: var(--cr3d-accent);
}
:is(.woocommerce-account, .woocommerce-order-received) mark.order-status--on-hold,
:is(.woocommerce-account, .woocommerce-order-received) mark.order-status--pending,
:is(.woocommerce-account, .woocommerce-order-received) mark.order-status--pending-wdraw {
	border-color: rgba(217, 142, 15, .32);
	color: #b1740c;
	--status-dot: #d98e0f;
}
:is(.woocommerce-account, .woocommerce-order-received) mark.order-status--cancelled,
:is(.woocommerce-account, .woocommerce-order-received) mark.order-status--failed {
	border-color: rgba(179, 64, 47, .3);
	color: #b3402f;
	--status-dot: #b3402f;
}
:is(.woocommerce-account, .woocommerce-order-received) mark.order-status--refunded,
:is(.woocommerce-account, .woocommerce-order-received) mark.order-status--withdrawn {
	border-color: rgba(107, 114, 128, .3);
	color: #6b7280;
	--status-dot: #6b7280;
}

/* Widerruf-Badges an einzelnen Bestellpositionen (Plugin "EU Order
   Withdrawal Button", Standardstyling in orders.scss: rosa/rot bzw. beige
   Kaesten) im selben Chip-Stil wie der Status auf der Bestellungsuebersicht
   (Kundenwunsch 2026-07-27) - Farben aus derselben Palette:
   "withdrawal-requested" (Widerruf beantragt, noch offen) = amber wie
   "pending-wdraw" oben, reines ".withdrawal-quantity" (bereits widerrufen)
   = grau wie "withdrawn" oben. */
:is(.woocommerce-account, .woocommerce-order-received) .withdrawal-quantity {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--cr3d-font-heading);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 6px 14px;
	border-radius: 999px;
	background: transparent;
	border: 1px solid rgba(107, 114, 128, .3);
	color: #6b7280;
	--status-dot: #6b7280;
}
:is(.woocommerce-account, .woocommerce-order-received) .withdrawal-quantity::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--status-dot);
	flex: 0 0 auto;
}
:is(.woocommerce-account, .woocommerce-order-received) .withdrawal-quantity.withdrawal-requested {
	border-color: rgba(217, 142, 15, .32);
	color: #b1740c;
	--status-dot: #d98e0f;
}

/* Rechte ("Gesamt")-Spalte der Bestelldetails-Tabelle schmaler (Kundenwunsch
   2026-07-27) - die Kopfzeilen-Beschriftung "Gesamt (inkl. Steuern)" macht bei
   schmaler Spalte keinen Sinn mehr (der Betrag steht ohnehin in jeder Zeile
   direkt daneben/darunter) und wird daher versteckt statt nur verkleinert;
   "visibility:hidden" statt "display:none", damit die Spaltenbreiten-
   Berechnung der Tabelle nicht durcheinanderkommt. */
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details thead th:last-child {
	width: 160px;
	visibility: hidden;
}
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details tbody td:last-child,
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details tfoot td {
	width: 160px;
}

/* "Sendungsverfolgung"/"Widerrufen" nicht mehr als Tabellenzeile (brach in
   der schmalen "Gesamt"-Spalte optisch aus) - die Original-Aktionen-Zeile
   ausblenden, cr3d_order_details_actions_below_table() in functions.php gibt
   dieselben Buttons stattdessen als eigene, zentrierte Reihe unter der
   Tabelle aus (Kundenwunsch 2026-07-27). */
:is(.woocommerce-account, .woocommerce-order-received) table.shop_table.order_details tfoot tr:has(.order-actions-button) {
	display: none;
}
:is(.woocommerce-account, .woocommerce-order-received) .cr3d-order-details-actions {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	justify-content: center;
	gap: 12px;
	margin: 20px 0;
}
@media (max-width: 480px) {
	:is(.woocommerce-account, .woocommerce-order-received) .cr3d-order-details-actions {
		grid-auto-flow: row;
		justify-items: stretch;
	}
}

/* ==========================================================================
   Buttons (Details/Widerrufen/Bezahlen/Speichern etc.)
   ========================================================================== */
:is(.woocommerce-account, .woocommerce-order-received) .woocommerce-Button,
:is(.woocommerce-account, .woocommerce-order-received) .button {
	background: var(--cr3d-accent) !important;
	color: #fff !important;
	border-radius: 6px !important;
	font-family: var(--cr3d-font-heading);
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: .02em;
	padding: 10px 18px !important;
	border: none !important;
	transition: background .15s ease;
}
:is(.woocommerce-account, .woocommerce-order-received) .woocommerce-Button:hover,
:is(.woocommerce-account, .woocommerce-order-received) .button:hover {
	background: var(--cr3d-accent-hover) !important;
}
:is(.woocommerce-account, .woocommerce-order-received) .woocommerce-Button.cancel,
:is(.woocommerce-account, .woocommerce-order-received) a.button.cancel {
	background: transparent !important;
	color: var(--cr3d-text-dim) !important;
	border: 1px solid rgba(7, 115, 122, .25) !important;
}

/* ==========================================================================
   "Meine Bestellungen"-Liste als Karten statt starrer Tabelle (Kundenwunsch
   2026-07-27: Status als Tag unter der Bestellnummer, Preis/Stueckzahl
   optisch getrennt, Datenblaetter-Duplikat weg (siehe
   cr3d_remove_duplicate_attachment_column() in functions.php), alles ohne
   horizontales Scrollen).

   Sicherheitshinweis: hier bewusst NUR <tr>/<td>/<th> umgestellt (auf grid
   bzw. block), NICHT <table> oder <tbody> selbst - das ist exakt das Muster,
   das WooCommerce Core selbst fuer ".shop_table_responsive" verwendet (siehe
   woocommerce-smallscreen.scss), hier nur ohne 768px-Breakpoint und mit grid
   statt block fuer die zusaetzliche Spalten-Optik. Der fruehere Bug mit dem
   display:block auf der <table> selbst (siehe Kommentar zur
   Bestelldetails-Tabelle weiter oben) betrifft diese Regeln nicht. */
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders {
	border: none;
	border-radius: 0;
	overflow: visible;
}
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders thead {
	display: none;
}
/* 3-Spalten-Karte (Kundenwunsch 2026-07-27): links Bestellnummer+Status,
   Mitte Preis+Artikelanzahl, rechts Datum+Aktionen - jede Spalte je 2
   uebereinander gestapelte Felder. Der Zeilenabstand (row-gap) gilt fuer
   die Luecke zwischen diesen gestapelten Paaren (Nummer/Status,
   Datum/Aktionen) - bewusst NICHT fuer den Abstand Preis/"fuer X Artikel"
   innerhalb der Preis-Zelle, der bleibt ueber deren eigenes
   "margin-bottom" unveraendert eng (siehe weiter unten). */
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders tr {
	display: grid;
	grid-template-columns: minmax(160px, 1fr) minmax(110px, auto) auto;
	grid-template-areas:
		"num    total date"
		"status total actions";
	align-items: start;
	column-gap: 24px;
	row-gap: 12px;
	background: #fff;
	border: 1px solid rgba(7, 115, 122, .12);
	border-radius: 10px;
	padding: 18px 20px;
	margin-bottom: 14px;
	transition: box-shadow .15s ease;
}
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders tr:hover {
	box-shadow: 0 4px 14px rgba(7, 115, 122, .1);
}
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders td,
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders th {
	display: block;
	border: none !important;
	padding: 0 !important;
	/* Die allgemeine th-Regel weiter oben im Kopf-Zeilen-Stil
	   (".shop_table th, .woocommerce-orders-table th { background: rgba(7,
	   115, 122, .06); ... }") war urspruenglich fuer die Tabellenkopfzeile
	   gedacht - da <th> hier aber auch fuer die Bestellnummer-Zelle
	   (nicht der Kopf) verwendet wird, blieb dieser alte Hintergrund als
	   rechteckiger Rand hinter dem neuen, schmaleren Bestellnummer-Chip
	   sichtbar. Hier komplett zuruecksetzen. */
	background: transparent !important;
}

/* WooCommerce Core blendet ab 768px (site-weit geladenes
   woocommerce-smallscreen.css, ".shop_table_responsive td::before {
   content: attr(data-title) ': '; }") automatisch Feld-Labels vor jeder
   Zelle ein ("Datum:", "Status:", "Aktionen:", "Gesamt (inkl. Steuern):") -
   kollidierte mit unserem Karten-Design und liess z.B. "STATUS" im schmalen
   Chip senkrecht Buchstabe-fuer-Buchstabe umbrechen (Bug-Report
   2026-07-27). Fuer diese Tabelle komplett deaktivieren - unsere Chips/
   Layout sprechen bereits fuer sich, Labels sind ueberfluessig. Der
   Status-Dot bleibt ueber seinen eigenen, spezifischeren Selektor erhalten
   (siehe weiter unten), daher hier NICHT die Status-Zelle mit einschliessen. */
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders td.woocommerce-orders-table__cell-order-date::before,
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders td.woocommerce-orders-table__cell-order-total::before,
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders td.woocommerce-orders-table__cell-order-actions::before {
	content: none !important;
	display: none !important;
}
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders td {
	text-align: left !important;
	float: none !important;
}

.woocommerce-orders-table__cell-order-number { grid-area: num; }
.woocommerce-orders-table__cell-order-status { grid-area: status; }
.woocommerce-orders-table__cell-order-total { grid-area: total; align-self: center; }
.woocommerce-orders-table__cell-order-date {
	grid-area: date;
	font-size: 12.5px;
	color: var(--cr3d-text-dim) !important;
}
/* !important + voller Tabellen-Praefix noetig: die Reset-Regel oben
   (".woocommerce-account table....orders td { text-align:left !important }")
   hat sonst Vorrang vor dieser Ausrichtung (gleiche Lektion wie beim
   Status-Chip-Rahmen - bei zwei "!important"-Deklarationen entscheidet die
   Spezifitaet, nicht die Reihenfolge). */
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders td.woocommerce-orders-table__cell-order-date {
	text-align: right !important;
}
.woocommerce-orders-table__cell-order-actions { grid-area: actions; }

/* Bestellnummer als eigener Chip (Teal, Marken-Identitaetsfarbe) - bewusst im
   selben "Chip"-Stil wie der Status-Tag darunter, damit beide als
   zusammengehoerige Kennzeichnungs-Familie wirken statt Nummer=Fliesstext vs.
   Status=Pill (Kundenwunsch 2026-07-27: Hintergrund fuer die Bestellnummer). */
.woocommerce-orders-table__cell-order-number a {
	display: inline-block;
	font-family: var(--cr3d-font-heading);
	font-weight: 700 !important;
	font-size: 13px;
	letter-spacing: .01em;
	color: var(--cr3d-accent) !important;
	background: rgba(7, 115, 122, .08);
	border: 1px solid rgba(7, 115, 122, .2);
	border-radius: 7px;
	padding: 6px 14px;
	transition: background .15s ease, border-color .15s ease;
}
.woocommerce-orders-table__cell-order-number a:hover {
	background: rgba(7, 115, 122, .16);
	border-color: rgba(7, 115, 122, .4);
}
/* Status als runder Tag statt Fliesstext, Farbe je Bestellstatus (Klassen
   kommen automatisch von WooCommerce: woocommerce-orders-table__row--status-*,
   siehe wc_get_order_statuses() fuer alle moeglichen Slugs). */
/* Praefix mit gleicher Spezifitaet wie die Zell-Reset-Regel oben
   (".woocommerce-account table....MyAccount-orders td, th { border:none
   !important; ... }") - die Status-Chip-Regeln unten muessen densselben
   Praefix tragen (plus "td" + eigene Klasse), sonst verliert selbst ein
   "!important"-Rahmen gegen die Reset-Regel: bei gleichzeitig wichtigen
   Deklarationen entscheidet danach die Spezifitaet, nicht mehr nur
   "!important" vs. nicht-!important (harte Lektion aus einem ersten Versuch
   ohne diesen Praefix - da griff der Rahmen trotz !important nicht). */
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders td.woocommerce-orders-table__cell-order-status {
	/* "display:inline-block" allein reicht nicht: als direktes Grid-Kind von
	   <tr> (display:grid) wird der Wert von Chrome/Firefox fuer Layoutzwecke
	   auf den Block-Level-Fall blockifiziert (Spec-Verhalten, kein Bug) -
	   bei "inline-flex" bleibt der innere Anzeigetyp "flex" erhalten
	   (blockifiziert zu "flex", nicht zu "block"), "justify-self:start"
	   verhindert das Ausfuellen der ganzen Grid-Area-Breite. */
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	justify-self: start;
	font-family: var(--cr3d-font-heading);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	/* !important: die Zell-Reset-Regel oben setzt "padding:0 !important" -
	   bei gleicher/niedrigerer Spezifitaet gewinnt "!important" immer gegen
	   eine nicht-wichtige Deklaration, unabhaengig von der Spezifitaet. */
	padding: 6px 14px !important;
	border-radius: 999px;
	/* Transparent, nur der Rand ist farbig (Kundenwunsch 2026-07-27: KEIN
	   gefuellter Hintergrund) - die Zell-Reset-Regel oben setzt ohnehin
	   "background:transparent !important", hier nur zur Klarheit explizit
	   wiederholt statt einer Fuellfarbe. */
	background: transparent !important;
	border: 1px solid rgba(7, 115, 122, .22) !important;
	color: var(--cr3d-accent) !important;
	--status-dot: var(--cr3d-accent);
}
/* Kleiner Farbpunkt vor dem Status-Text - eigenes Element statt content:"",
   damit die Farbe sauber ueber die CSS-Variable je Status gesetzt werden
   kann. "content:'' !important" noetig: ab 768px setzt WooCommerce Core
   (site-weit geladenes woocommerce-smallscreen.css) hier sonst
   'content:attr(data-title)": "' (="Status: ") ein und ueberschreibt den
   Punkt mit Text - genau das liess "STATUS" im schmalen Chip Buchstabe fuer
   Buchstabe senkrecht umbrechen (Bug-Report 2026-07-27). */
.woocommerce-orders-table__cell-order-status::before {
	content: "" !important;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--status-dot);
	flex: 0 0 auto;
}
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders tr.woocommerce-orders-table__row--status-completed td.woocommerce-orders-table__cell-order-status {
	border-color: rgba(34, 153, 84, .3) !important;
	color: #1f9d55 !important;
	--status-dot: #1f9d55;
}
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders tr.woocommerce-orders-table__row--status-processing td.woocommerce-orders-table__cell-order-status {
	border-color: rgba(7, 115, 122, .3) !important;
	color: var(--cr3d-accent) !important;
	--status-dot: var(--cr3d-accent);
}
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders tr.woocommerce-orders-table__row--status-on-hold td.woocommerce-orders-table__cell-order-status,
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders tr.woocommerce-orders-table__row--status-pending td.woocommerce-orders-table__cell-order-status,
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders tr.woocommerce-orders-table__row--status-pending-wdraw td.woocommerce-orders-table__cell-order-status {
	border-color: rgba(217, 142, 15, .32) !important;
	color: #b1740c !important;
	--status-dot: #d98e0f;
}
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders tr.woocommerce-orders-table__row--status-cancelled td.woocommerce-orders-table__cell-order-status,
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders tr.woocommerce-orders-table__row--status-failed td.woocommerce-orders-table__cell-order-status {
	border-color: rgba(179, 64, 47, .3) !important;
	color: #b3402f !important;
	--status-dot: #b3402f;
}
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders tr.woocommerce-orders-table__row--status-refunded td.woocommerce-orders-table__cell-order-status,
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders tr.woocommerce-orders-table__row--status-withdrawn td.woocommerce-orders-table__cell-order-status {
	border-color: rgba(107, 114, 128, .3) !important;
	color: #6b7280 !important;
	--status-dot: #6b7280;
}

/* Preis gross+fett auf eigener Zeile, "fuer X Artikel" darunter klein/gedimmt
   - reiner CSS-Trick: der Preis-Span wird block-level, der danach folgende
   Klartext ("fuer X Artikel", kommt direkt aus WooCommerce ohne eigenes
   Element) rutscht dadurch automatisch in die naechste Zeile. */
.woocommerce-orders-table__cell-order-total {
	font-size: 12.5px;
	color: var(--cr3d-text-dim) !important;
}
/* Zentriert, da Preis jetzt die echte Mitte-Spalte ist (links Nummer/Status,
   rechts Datum/Aktionen) - beim Umbruch (max-width:869px, Regel weiter unten)
   auf "links buendig unter Status" umgestellt. !important + voller
   Tabellen-Praefix noetig, sonst gewinnt die Reset-Regel weiter oben
   (".woocommerce-account table....orders td { text-align:left !important }"). */
.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders td.woocommerce-orders-table__cell-order-total {
	text-align: center !important;
}
.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
	display: block;
	font-family: var(--cr3d-font-heading);
	font-weight: 800;
	font-size: 17px;
	color: var(--cr3d-text) !important;
	margin-bottom: 2px;
}

/* Aktionen kompakt untereinander statt nebeneinander (frueher Ursache fuer
   das horizontale Scrollen) - "Details & Downloads" (umbenannter
   "Anzeigen"-Button, siehe functions.php) faellt dadurch automatisch als
   erster/oberster Button ins Auge. */
.woocommerce-orders-table__cell-order-actions {
	display: flex !important;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.woocommerce-orders-table__cell-order-actions .button {
	padding: 7px 14px !important;
	font-size: 12px !important;
	white-space: nowrap;
}

/* Zwischenschritt 641-869px (Kundenwunsch 2026-07-27): die linke Spalte
   (Nummer/Status) UND die rechte Spalte (Datum/Aktionen) bleiben unangetastet
   in ihren beiden Spalten stehen - nur die mittlere Preis-Spalte wird zu eng
   und rutscht als eigene Zeile UNTER die linke Spalte, linksbuendig unter
   Status ("." markiert die dabei leere Zelle unter der rechten Spalte, siehe
   https://developer.mozilla.org/de/docs/Web/CSS/grid-template-areas fuer die
   Punkt-Syntax). Erst unter 640px (Regel darunter) wird komplett einspaltig
   gestapelt. Muss VOR der 640px-Regel stehen, damit bei <640px die dortigen
   spezifischeren Regeln (gleiche Selektoren) in der Kaskade gewinnen. */
@media (max-width: 869px) {
	.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders tr {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"num    date"
			"status actions"
			"total  .";
		row-gap: 12px;
	}
	.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders td.woocommerce-orders-table__cell-order-total {
		text-align: left !important;
	}
}

@media (max-width: 640px) {
	.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders tr {
		grid-template-columns: 1fr;
		grid-template-areas:
			"num"
			"status"
			"date"
			"total"
			"actions";
		row-gap: 14px;
	}
	.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders td.woocommerce-orders-table__cell-order-total {
		text-align: left !important;
	}
	.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
		display: inline;
		margin-bottom: 0;
	}
	.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders td.woocommerce-orders-table__cell-order-date {
		text-align: left !important;
	}
	.woocommerce-orders-table__cell-order-actions {
		align-items: flex-start;
	}
}

/* ==========================================================================
   Adress-Bearbeiten-Formulare (/my-account/edit-address/rechnung/ und
   /versand/) 1:1 im Kassen-Stil (Kundenwunsch 2026-07-27) - bewusst NICHT
   die sonstige (runde/teal) My-Account-Karten-CI, sondern exakt dieselben
   Werte/Selektoren-Logik wie in checkout-redesign.css (dort
   ".woocommerce-billing-fields__field-wrapper, .woocommerce-checkout
   .shipping_address"), hier re-scoped auf den Formular-Wrapper der
   WooCommerce-Konto-Seite (".woocommerce-address-fields__field-wrapper",
   siehe woocommerce/templates/myaccount/form-edit-address.php - andere
   Wrapper-Klasse als am Checkout). Feld-Reihenfolge/-Labels/-Klassen kommen
   bereits serverseitig identisch mit (siehe cr3d_account_billing_field_order()
   / cr3d_account_shipping_field_order() in functions.php, haengen an
   denselben WooCommerce-Feldern wie am Checkout). Die Packstation-Logik
   braucht am Checkout zusaetzlich ".shipping_address" als eigenen
   Toggle-Klassen-Traeger - hier uebernimmt ".woocommerce-address-fields__field-wrapper"
   selbst diese Rolle (siehe edit-address-redesign.js), da es hier nur ein
   einzelnes Adressformular pro Seite gibt statt zwei (Rechnung+Versand)
   nebeneinander wie am Checkout.
   ========================================================================== */
.woocommerce-account .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 20px;
	align-items: start;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row {
	width: auto !important;
	margin: 0 0 20px;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide {
	grid-column: 1 / -1;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-first {
	grid-column: 1 / 7;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-last {
	grid-column: 7 / -1;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .cr3d-field-postcode {
	grid-column: 1 / 4;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .cr3d-field-city {
	grid-column: 4 / -1;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .cr3d-field-salutation {
	grid-column: 1 / 4;
	max-width: 140px;
	justify-self: start;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .cr3d-field-salutation label {
	font-size: 11px;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .cr3d-field-salutation select {
	padding: 6px 8px;
	font-size: 13px;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .cr3d-field-salutation .select2-selection__clear {
	display: none;
}
@media (max-width: 480px) {
	.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row {
		grid-column: 1 / -1 !important;
	}
}

/* Eckige, dezente Eingabefelder wie am Checkout statt der abgerundeten
   My-Account-CI. */
.woocommerce-account .woocommerce-address-fields input[type="text"],
.woocommerce-account .woocommerce-address-fields input[type="email"],
.woocommerce-account .woocommerce-address-fields input[type="tel"],
.woocommerce-account .woocommerce-address-fields select,
.woocommerce-account .woocommerce-address-fields textarea {
	background: #f7f8f9;
	border: 1px solid #d7dbdf;
	color: var(--cr3d-text);
	border-radius: 0;
	padding: 11px 12px;
}
.woocommerce-account .woocommerce-address-fields input:focus,
.woocommerce-account .woocommerce-address-fields select:focus,
.woocommerce-account .woocommerce-address-fields textarea:focus {
	outline: none;
	border-color: var(--cr3d-accent);
}
.woocommerce-account .woocommerce-address-fields label {
	font-family: var(--cr3d-font-heading);
	color: var(--cr3d-text-dim);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper label {
	white-space: nowrap;
}
/* !important durchgehend: die generische Account-Button-Regel weiter oben
   (".woocommerce-account .button { border-radius:6px !important; padding:10px
   18px !important; ... }") ist sonst spezifischer/wichtiger und ueberschreibt
   den eckigen Checkout-Look (gleiche Lektion wie schon mehrfach zuvor in
   dieser Datei). */
.woocommerce-account .woocommerce-address-fields button[name="save_address"] {
	background: var(--cr3d-accent) !important;
	border: none !important;
	border-radius: 0 !important;
	color: #fff !important;
	font-family: var(--cr3d-font-heading);
	font-weight: 700 !important;
	font-size: 14px !important;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 13px 26px !important;
	cursor: pointer;
}
.woocommerce-account .woocommerce-address-fields button[name="save_address"]:hover {
	background: var(--cr3d-accent-hover) !important;
}

/* Adresstyp-Feld (Packstation-Umschalter) -- Select wird per JS zur
   Checkbox, das native <select> bleibt nur fuer den Formularwert erhalten
   und wird unsichtbar gemacht (identisch zum Checkout-Verhalten). */
.woocommerce-account #shipping_address_type_field {
	grid-column: 1 / -1;
	margin-bottom: 0;
}
.woocommerce-account #shipping_address_type_field select,
.woocommerce-account #shipping_address_type_field .select2,
.woocommerce-account #shipping_address_type_field .select2-container,
.woocommerce-account #shipping_address_type_field span.selectWoo,
.woocommerce-account #shipping_address_type_field .selectWoo {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
.woocommerce-account #shipping_address_type_field > label {
	display: none;
}
.woocommerce-account .cr3d-packstation-checkbox-row {
	grid-column: 1 / -1;
	margin: 0 0 16px;
}
.woocommerce-account .cr3d-packstation-checkbox-row label {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-family: var(--cr3d-font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--cr3d-text);
	line-height: 1;
}
.woocommerce-account .cr3d-packstation-checkbox-row label span {
	line-height: 1;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
}
.woocommerce-account .cr3d-packstation-checkbox-row input[type="checkbox"] {
	accent-color: var(--cr3d-accent);
	width: 16px;
	height: 16px;
	margin: 0;
}

/* Shiptastic wiederholt "Von Abholstation vorgegeben" pro Feld einzeln -
   stattdessen eine gemeinsame graue Box (siehe updatePickupLocationManagedBox()
   in edit-address-redesign.js), identisch zum Checkout. */
.woocommerce-account .wc-shiptastic-managed-by-pickup-location-notice {
	display: none !important;
}
.woocommerce-account .cr3d-pickup-location-managed-box {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 20px;
	align-items: start;
	background: #f3f4f6;
	border: 1px solid var(--cr3d-border);
	border-radius: 4px;
	padding: 16px;
	margin: 0 0 20px;
}
.woocommerce-account .cr3d-pickup-location-managed-box .form-row {
	margin-bottom: 12px;
}
.woocommerce-account .cr3d-pickup-location-managed-box label {
	color: #c1c5cb;
}
.woocommerce-account .cr3d-pickup-location-managed-box input,
.woocommerce-account .cr3d-pickup-location-managed-box select {
	background: #e8e9eb !important;
	color: #9aa0a8 !important;
	border-color: #d8dade !important;
}
.woocommerce-account .cr3d-pickup-location-managed-box .select2-selection {
	background: #e8e9eb !important;
	border-color: #d8dade !important;
}
.woocommerce-account .cr3d-pickup-location-managed-box .select2-selection__rendered {
	color: #9aa0a8 !important;
}
.woocommerce-account .cr3d-pickup-location-managed-notice {
	grid-column: 1 / -1;
	margin: 0 0 12px;
	font-family: var(--cr3d-font-heading);
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--cr3d-text);
}

/* Standardmodus: Packstation-Suche + DHL-Postnummer ausgeblendet. */
.woocommerce-account .woocommerce-address-fields__field-wrapper #shipping_pickup_location_notice,
.woocommerce-account .woocommerce-address-fields__field-wrapper #shipping_dhl_postnumber_field,
.woocommerce-account .woocommerce-address-fields__field-wrapper #pickup_location_customer_number_field {
	display: none !important;
}
/* Packstation-Modus: Strasse/Adresszusatz ausgeblendet, Packstation-Suche +
   Postnummer eingeblendet - "order" (nicht "grid-auto-flow:dense") schiebt
   diese Zeile hinter PLZ/Ort, exakt wie am Checkout begruendet. */
.woocommerce-account .woocommerce-address-fields__field-wrapper.cr3d-packstation-mode #shipping_address_1_field,
.woocommerce-account .woocommerce-address-fields__field-wrapper.cr3d-packstation-mode #shipping_address_2_field {
	display: none !important;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper.cr3d-packstation-mode #shipping_pickup_location_notice,
.woocommerce-account .woocommerce-address-fields__field-wrapper.cr3d-packstation-mode #shipping_dhl_postnumber_field {
	display: block !important;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper.cr3d-packstation-mode #shipping_country_field {
	order: 1;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper.cr3d-packstation-mode #shipping_pickup_location_notice,
.woocommerce-account .woocommerce-address-fields__field-wrapper.cr3d-packstation-mode #shipping_dhl_postnumber_field,
.woocommerce-account .woocommerce-address-fields__field-wrapper.cr3d-packstation-mode #pickup_location_customer_number_field {
	order: 2;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper.cr3d-packstation-mode #shipping_pickup_location_notice {
	margin-top: 20px;
}
.woocommerce-account .pickup-location-notice-title {
	display: none;
}
.woocommerce-account a.cr3d-pickup-location-button {
	display: inline-block;
	background: var(--cr3d-accent);
	color: #fff;
	font-family: var(--cr3d-font-heading);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	text-decoration: none;
	padding: 12px 20px;
	border: none;
	cursor: pointer;
}
.woocommerce-account a.cr3d-pickup-location-button:hover {
	opacity: .9;
}
.woocommerce-account #shipping_dhl_postnumber-description {
	padding: 0.3em;
	white-space: nowrap;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper #shipping_dhl_postnumber_field,
.woocommerce-account .woocommerce-address-fields__field-wrapper #pickup_location_customer_number_field {
	grid-column: 1 / -1;
}
.woocommerce-account #billing_pickup_location_notice {
	display: none !important;
}

/* ==========================================================================
   Bestell-Kopfzeile (Bestellnummer/Datum/E-Mail/Gesamt/Zahlungsart) als
   auffaellige Teal-Box statt schmucklosem Fliesstext, auf der Kasse-
   Danke-Seite direkt unter "Bestelldetails"-Ueberschrift (Kundenwunsch
   2026-08-10). Jedes Feld ein eigenes 2-Zeilen-Grid (Label oben, Wert
   darunter) statt Label+Wert nebeneinander - dafuer wurde das Label in
   checkout/thankyou.php (Theme-Override) in ein eigenes <span> gepackt,
   weil es im WooCommerce-Core-Template ein reiner Textknoten vor <strong>
   war und Textknoten sich nicht per CSS separat positionieren lassen.

   Breite bewusst NICHT volle Containerbreite (Kundenwunsch 2026-08-10, Runde
   3: Box soll kurz nach "Zahlungsart" + etwas Puffer enden statt die ganze
   Zeile zu fuellen) - "inline-flex" schrumpft den Flex-Container auf die
   Summe seiner Kinder statt wie "flex" die volle verfuegbare Breite
   einzunehmen.

   Zentrierung ueber der Tabellenbreite (Kundenwunsch 2026-08-10, Runde 5):
   "margin: 0 auto" zentriert die geschrumpfte Box in ihrem eigenen Eltern-
   Container (".kc-container"). Das reicht, obwohl die "Bestelldetails"-
   Tabelle darunter laut Live-DOM (Nutzer-bestaetigt) wegen eines
   KingComposer-Bugs strukturell AUSSERHALB dieses Containers liegt (direkt
   in ".entry-content-page", erbt dadurch die Breite des aeusseren Bootstrap-
   Seiten-Containers, 1200px statt 1170px) - beide Container sind trotz der
   15px-Breitendifferenz auf denselben Seiten-Mittelpunkt zentriert (beide
   "margin:auto"), eine unabhaengig zentrierte Box trifft die Tabellenmitte
   also trotzdem exakt, ganz ohne den fruegeren "margin-left:-15px"-Ausgleich.

   "display:flex" (statt "inline-flex") + "width:fit-content" statt nur
   "inline-flex" fuer den Shrink-to-fit-Effekt: "margin:auto" zentriert
   zuverlaessig nur echte Block-Boxen, nicht Inline-Level-Boxen wie
   "inline-flex" (die folgen dem normalen Inline-Textfluss statt auf
   auto-Margins zu reagieren). */
.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details {
	box-sizing: border-box;
	display: flex;
	width: fit-content;
	flex-wrap: wrap;
	row-gap: 20px;
	list-style: none;
	margin: 0 auto 32px;
	padding: 20px 30px;
	background: rgba(7, 115, 122, .06);
	border: 1px solid rgba(7, 115, 122, .18);
	border-left: 4px solid var(--cr3d-accent);
	border-radius: 8px;
}
.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details li {
	display: grid;
	grid-template-rows: auto auto;
	row-gap: 4px;
	justify-items: center;
	margin: 0;
	padding: 0 28px;
	border: none;
	border-right: 1px solid rgba(7, 115, 122, .18);
	text-align: center;
}
.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details li:first-child {
	padding-left: 0;
}
.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details li:last-child {
	/* Wie li:first-child das eigene Innen-Padding entfernen, damit rechts
	   nach "Zahlungsart" genau der Box-eigene Rand-Abstand (siehe
	   "padding: 20px 30px" oben) uebrig bleibt statt Box-Padding + Li-
	   Padding zusammengezaehlt - sonst war rechts spuerbar mehr Luft als
	   links vor "Bestellnummer" (Kundenwunsch 2026-08-10). */
	padding-right: 0;
	border-right: none;
}
.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details .woocommerce-order-overview__label {
	grid-row: 1;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cr3d-text-dim);
}
.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details li strong {
	grid-row: 2;
	font-family: var(--cr3d-font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--cr3d-accent);
}
/* Unter 1000px auf ein 2-Spalten-Grid um (Kundenwunsch 2026-08-10, Runde 4):
   Bestellnummer+Datum in einer Zeile, E-Mail allein in der naechsten Zeile
   (spannt beide Spalten - Adresse ist meist zu lang fuer eine halbe Spalte),
   Gesamt+Zahlungsart in der letzten Zeile. Ueber die WC-Core-eigenen
   Modifier-Klassen (".order"/".date"/".email"/".total"/".method" - siehe
   checkout/thankyou.php) statt nth-child platziert, damit die Zuordnung
   auch stimmt, wenn die optionale E-Mail-Zeile (nur eingeloggt + eigene
   Bestellung) mal fehlt. Vertikaler Trenner nur noch zwischen den beiden
   Spalten (nicht mehr zwischen jedem Feld wie in der Desktop-Reihe), alles
   linksbuendig statt zentriert. */
@media (max-width: 1000px) {
	.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details {
		display: grid;
		width: auto;
		grid-template-columns: 1fr 1fr;
		column-gap: 24px;
		row-gap: 16px;
		margin: 0 0 32px;
	}
	.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details li {
		justify-items: start;
		text-align: left;
		padding: 0 0 0 24px;
		margin: 0;
		border-right: none;
	}
	.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details li.order,
	.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details li.total {
		grid-column: 1;
		padding-left: 0;
		border-right: 1px solid rgba(7, 115, 122, .18);
	}
	.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details li.date,
	.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details li.method {
		grid-column: 2;
	}
	/* Horizontale Trenner vor UND nach der E-Mail-Zeile (Kundenwunsch
	   2026-08-10, Runde 5) - eigenes Padding statt der Zeilen-"row-gap"
	   verwendet, damit der Trennerabstand zum Trenner selbst symmetrisch
	   bleibt statt sich mit dem row-gap-Abstand zu ueberschneiden. */
	.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details li.email {
		grid-column: 1 / -1;
		padding-left: 0;
		padding-top: 16px;
		padding-bottom: 16px;
		border-top: 1px solid rgba(7, 115, 122, .18);
		border-bottom: 1px solid rgba(7, 115, 122, .18);
	}
	.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details .woocommerce-order-overview__label {
		text-align: left;
	}
}

/* ==========================================================================
   "Kein Kundenkonto? Kein Problem. Als Gast bestellen"-Hinweis auf der
   Login-Seite (Kundenwunsch 2026-08-10, jetzt Runde 2 - dezenter statt
   vollflaechig): WooCommerce Germanized leitet Gaeste mit gefuelltem
   Warenkorb von der Kasse auf "Mein Konto" um und zeigt dort diesen Hinweis
   als generische WC-Notice an (siehe wc_add_notice(...,'notice') in
   class-wc-gzd-customer-helper.php, Markup kommt 1:1 aus dem WooCommerce-
   Core-Template notices/notice.php - "<div class='woocommerce-info'>Text
   <a>Als Gast bestellen</a></div>", nicht separat anpassbar). Text selbst
   ("Weiter zur Kasse ohne Kundenkonto? Hier klicken" -> "Kein Kundenkonto?
   Kein Problem. Als Gast bestellen") kommt ueber einen "gettext_woocommerce-
   germanized"-Filter im Code-Snippets-Plugin ("CR3D: Gast-Checkout-Hinweis
   Text anpassen"), NICHT hier im CSS.

   War urspruenglich praktisch unsichtbar (kaputtes Icon, unsichtbarer Rahmen
   wegen fehlendem "border-style" in der site-weiten Customizer-CSS) - die
   erste Version hier war dann zu dominant (volle Breite, kraeftige Teal-
   Flaeche). Jetzt in derselben dezenten Teal-Box-Optik wie die Bestell-
   Kopfzeile auf der Danke-Seite (siehe ".woocommerce-order-overview" weiter
   oben: helles Teal, duenner Rahmen, linker Akzentstrich), zentriert statt
   volle Breite, mit eigenem SVG-Icon (kein Icon-Font, der hier ohnehin nicht
   laedt) und Outline- statt Solid-Button. "!important" bleibt noetig, weil
   die site-weite Customizer-CSS ("wp-custom-css", laedt spaeter im <head>
   als unsere Stylesheets) sonst weiterhin gewinnt. Nur auf der Konto-Seite
   scoped (".woocommerce-account"), nicht sitweit, um andere
   ".woocommerce-info"-Meldungen anderswo nicht anzutasten. */
.woocommerce-account .woocommerce-info {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	width: fit-content !important;
	max-width: 100%;
	margin: 0 auto 32px !important;
	padding: 18px 24px !important;
	background: rgba(7, 115, 122, .06) !important;
	border: 1px solid rgba(7, 115, 122, .18) !important;
	border-left: 4px solid var(--cr3d-accent) !important;
	border-radius: 8px !important;
	color: var(--cr3d-text) !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}
.woocommerce-account .woocommerce-info::before {
	content: none !important;
}
.woocommerce-account .woocommerce-info a {
	display: inline-block;
	padding: 8px 18px;
	/* Einfacher, gefuellter Standard-Button wie der allgemeine ".button"-Stil weiter oben -
	   der vorherige Outline-Versuch (transparenter Hintergrund) machte den Button praktisch
	   unsichtbar (Kundenmeldung 2026-08-11). Bei Hover/Klick dunkelgrau statt hellerem Teal,
	   Schrift bleibt immer weiss. */
	background: var(--cr3d-accent) !important;
	color: #fff !important;
	font-family: var(--cr3d-font-heading);
	font-weight: 700;
	border: none;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
}
.woocommerce-account .woocommerce-info a:hover,
.woocommerce-account .woocommerce-info a:active,
.woocommerce-account .woocommerce-info a:focus {
	background: #3a3a3a !important;
	color: #fff !important;
}
/* Registrierungs-Datenschutz-Checkbox (Germanized "wc-gzd-checkbox-placeholder"): Checkbox
   stand ohne "position:static" oft frei/ueberlappend ausserhalb des Textflusses statt
   sauber links neben dem Text auf gleicher Hoehe (Kundenmeldung 2026-08-11, /my-account/).
   Bewusst KEIN "display:flex" auf dem Label (anders als im Checkout-Pendant) - das wuerde
   jedes einzelne Kind (Text-Span, Pflichtfeld-Stern-Span, Screenreader-Span) zu einem
   eigenen, oben ausgerichteten Flex-Item machen und den Stern weit nach rechts reissen,
   sobald der Text auf zwei Zeilen umbricht (Kundenmeldung: Stern haengt weit rechts,
   getrennt vom Text). Normaler Inline-Textfluss laesst Text+Stern zusammenbleiben und
   gemeinsam umbrechen; nur die Checkbox wird per vertical-align sauber ausgerichtet. */
.woocommerce-account p.legal label {
	/* !important noetig: WooCommerce's eigene Klassenkette
	   ".woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox" hat mit 3
	   Klassen hoehere Spezifitaet als unser Selektor und ueberschrieb "display:block" sonst
	   (im Inspector als durchgestrichen sichtbar, Kundenbefund 2026-08-11) - ohne echtes
	   "display:block" wirkt der Hanging-Indent-Trick unten nicht zuverlaessig. */
	display: block !important;
	/* Hanging Indent: padding-left rueckt die GESAMTE Textbox (alle Zeilen gleichermassen)
	   nach rechts. Statt text-indent (das auch die Checkbox selbst mit verschieben wuerde,
	   siehe naechster Kommentar) wird die Checkbox per negativem margin-left auf der Checkbox
	   selbst zurueckgezogen - so bleibt der Text auf JEDER Zeile (auch der ersten) exakt am
	   selben, eingerueckten Platz, nur die Checkbox sitzt davor (Kundenwunsch 2026-08-11). */
	padding-left: 23px;
	/* Der Zeilenumbruch im HTML-Quellcode zwischen "<input>" und dem Text ("Ja, ich
	   möchte...") wird vom Browser als kollabiertes Leerzeichen mitgerendert und hat je
	   nach Schriftgroesse ein paar Pixel Eigenbreite - dadurch standen "J" und "D" trotz
	   des Hanging Indents ein paar Pixel versetzt (Kundenbefund 2026-08-11). font-size:0
	   auf dem Label nullt die Breite dieses Leerzeichens, font-size wird auf den echten
	   Inhalts-Kindern (Text-Span, Stern) wieder gesetzt. */
	font-size: 0;
}
.woocommerce-account p.legal input[type="checkbox"] {
	position: static !important;
	width: 15px;
	height: 15px;
	vertical-align: middle;
	margin: 0 8px -2px -23px;
	text-indent: 0;
}
.woocommerce-account p.legal .woocommerce-gzd-reg_data_privacy-checkbox-text,
.woocommerce-account p.legal .required {
	font-size: 16px;
	vertical-align: middle;
}