/* =====================================================================
 * shop.css — WARENKORB, KASSE UND PRODUKTSEITE IM DESIGN-RAHMEN
 *
 * ANLASS (User, 2026-08-11): „UI des Warenkorbes an unser CI anpassen,
 * Produktdetailseite ebenso (das ist aber schon jetzt sehr gut)" — dazu der
 * Befund zum Korb: „wirklich schoen ist er nicht". Genau so ist die Datei
 * gewichtet: der WARENKORB wird durchgestaltet, die PRODUKTSEITE bekommt
 * Feinschliff an den Stellen, die aus dem Rahmen fallen. Nichts wird dort
 * umgebaut.
 *
 * WAS AM KORB KONKRET FALSCH WAR — es ist keine Geschmacksfrage, sondern eine
 * Rahmenverletzung an vier Stellen:
 *   1. GRAU. WooCommerce liefert die Tabellenkoepfe auf `#f8f8f8`, die Linien
 *      als `rgba(0,0,0,.1)` und die Summen-Beschriftungen auf grauem Grund.
 *      DESIGN-RAHMEN Regel 1 sagt: „Tabu: Beige/Braun/Creme, GRAU-FLAECHEN."
 *      Der Korb war damit die letzte Seite der Website mit Grauflaechen — die
 *      Paginierung wurde aus genau diesem Grund schon im August nachgezogen.
 *   2. KEINE VERSAL-LABELS. Rahmen 11 regelt Datenzeilen und TABELLEN: die
 *      Beschriftungsspalte ist ein Versal-Label (0,72rem / 700 /
 *      letter-spacing .13em / uppercase in #557000). Der Korb hatte
 *      gewoehnliche fette Zellen.
 *   3. FREMDE RADIEN. WooCommerce rundet mit 5px; die Skala des Rahmens kennt
 *      6px (Bedienelemente) und 11px (Karten/Boxen) — „ueberall dieselben zwei
 *      Werte" (Rahmen 5).
 *   4. HALBE SEITE LEER. `.cart_totals` ist bei WooCommerce `float:right;
 *      width:48%` — links davon stand auf Desktop eine leere Flaeche in
 *      Tabellenbreite. Die Summe ist jetzt eine KARTE, die nur so breit ist,
 *      wie sie sein muss.
 *
 * KEIN TEMPLATE WIRD UEBERSCHRIEBEN. Alles hier ist CSS gegen das Markup, das
 * das Plugin ohnehin ausliefert — dieselbe Linie wie bei der Paginierung
 * (Rahmen 6: „Fremdes Markup wird NICHT angefasst"). Damit uebersteht die
 * Fassung jedes WooCommerce-Update; kaputtgehen kann hoechstens die Optik,
 * nie die Funktion.
 *
 * `!important` steht an genau ZWEI Stellen, beide als Konter gegen ein
 * fremdes `!important` — jede ist an ihrer Stelle begruendet.
 *
 * SEITENBEDINGT GELADEN (inc/enqueue.php, tpw_shop_styles): nur auf Shop-,
 * Produkt-, Korb-, Kassen- und Kontoseiten. Auf den ueber 90 Prozent der
 * Seiten ohne Shop steht die Datei nicht im Weg.
 *
 * INHALT
 *   1. Gemeinsame Tabellen-Grundform (Korb + Kasse + Konto)
 *   2. Warenkorb: Produktzeile, Menge, Entfernen, Aktionszeile
 *   3. Warenkorb: Summen-Karte + „Weiter zur Kasse"
 *   4. Warenkorb mobil (WooCommerce-Kleinbild-Fassung)
 *   5. Meldungen (Erfolg / Hinweis) im Shop
 *   6. Produktseite — FEINSCHLIFF (Preis, Verfuegbarkeit, Menge, Meta, Reiter)
 * ===================================================================== */


/* =====================================================================
 * 1. TABELLEN-GRUNDFORM (Rahmen 1, 5, 11)
 *
 * Gilt fuer JEDE `table.shop_table` — Korb, Bestellueberblick der Kasse,
 * Bestellungen im Konto. Es gibt damit EINE Shop-Tabelle, nicht drei.
 *
 * `border-collapse: separate` behaelt WooCommerce bei, und das ist hier
 * praktisch: nur mit getrennten Raendern greift der Radius am Tabellenrahmen
 * ueberhaupt. Der Preis dafuer ist, dass die inneren Linien an den ZELLEN
 * haengen muessen (border-top), nicht an der Tabelle.
 * ===================================================================== */
.woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 2em;
	border: 1px solid var(--tpw-linie-mittel);
	border-radius: var(--r-card);
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	font-size: 1rem;
}

/* KOPFZEILE = VERSAL-LABEL, KEINE FLAECHE (Rahmen 11 + Rahmen 1).
   Die Trennung zum Inhalt traegt allein die Haarlinie unten — eine getoente
   Kopfflaeche waere die fuenfte Sorte Band auf dieser Seite. */
.woocommerce table.shop_table thead th {
	padding: 15px 14px;
	border: 0;
	border-bottom: 1px solid var(--tpw-linie-mittel);
	background: transparent;
	color: var(--tpw-gruen-dunkel);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
}

/* Zellen: Wert-Typografie aus Rahmen 11 (0,98rem in --ink), Trennung
   ausschliesslich per gruener Haarlinie. KEINE senkrechten Linien und keine
   Zebra-Streifen — beides ist in Rahmen 11 ausdruecklich tabu. */
.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th {
	padding: 16px 14px;
	border: 0;
	border-top: 1px solid var(--tpw-linie);
	background: transparent;
	color: var(--tpw-ink);
	font-size: 0.98rem;
	line-height: 1.5;
	vertical-align: middle;
}

/* Die erste Inhaltszeile stoesst direkt an die Kopf-Haarlinie — eine zweite
   Linie unmittelbar darunter waere eine Doppelung. */
.woocommerce table.shop_table thead + tbody > tr:first-child > td,
.woocommerce table.shop_table thead + tbody > tr:first-child > th,
.woocommerce table.shop_table > tbody > tr:first-child > td,
.woocommerce table.shop_table > tbody > tr:first-child > th {
	border-top: 0;
}
.woocommerce table.shop_table thead + tbody > tr:first-child > td,
.woocommerce table.shop_table thead + tbody > tr:first-child > th {
	border-top: 0;
}

/* Preise: gleiche Ziffernbreite, damit die Spalte eine Kante hat. */
.woocommerce table.shop_table .woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Betragsspalten rechts — Zahlen liest man an der Einerstelle, nicht am
   Waehrungszeichen. Die zugehoerigen Kopfzellen wandern mit. */
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table th.product-price,
.woocommerce table.shop_table th.product-subtotal {
	text-align: right;
}


/* =====================================================================
 * 2. WARENKORB: PRODUKTZEILE, MENGE, ENTFERNEN, AKTIONSZEILE
 * ===================================================================== */

/* Vorschaubild: Radius der Karten-Stufe (Rahmen 5), gerade gesetzt und in
   fester Groesse — WooCommerce liefert 300px-Dateien und laesst sie ueber
   `width:32px` schrumpfen, was auf feinen Motiven flimmert. */
.woocommerce table.shop_table td.product-thumbnail {
	width: 84px;
	padding-right: 0;
}

.woocommerce table.shop_table td.product-thumbnail img {
	display: block;
	width: 68px;
	height: 68px;
	border-radius: var(--r-card);
	object-fit: cover;
}

/* Produktname: der Anker ist die Hauptsache der Zeile, darum 600 und in
   --ink statt im Linkgruen. Gruen wird er erst im Hover — dieselbe Logik wie
   bei den Karten-Titeln der Terminliste. */
.woocommerce table.shop_table td.product-name {
	font-weight: 600;
	line-height: 1.35;
}

.woocommerce table.shop_table td.product-name > a {
	color: var(--tpw-ink);
	text-decoration: none;
}

.woocommerce table.shop_table td.product-name > a:hover,
.woocommerce table.shop_table td.product-name > a:focus {
	color: var(--tpw-gruen-dunkel);
	text-decoration: underline;
}

/* MENGENFELD: die Formular-Grundform aus Rahmen 12, nur schmaler. Der Wert
   steht mittig, weil ein bis zwei Ziffern in einem linksbuendigen Feld
   verloren aussehen. Das Feld ist ueber die Grundform in style.css 14.3
   schon gerahmt und gerundet; hier nur Breite, Hoehe und Ausrichtung. */
.woocommerce table.shop_table td.product-quantity .quantity {
	display: inline-flex;
}

.woocommerce table.shop_table td.product-quantity input.qty,
.woocommerce div.product form.cart .quantity input.qty {
	width: 4.5em;
	min-height: 46px;
	padding: 10px 8px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ENTFERNEN: WooCommerce zeichnet das „x" als roten Kreis mit
   `border-radius:100%` und fuellt ihn im Hover vollrot (`#a00` / `#fff`).
   Beides ist hier falsch: Kreise bleiben nach Rahmen 6 den Tierportraits, und
   `#a00` ist kein Wert dieser Website (das funktionale Rot ist `#b3312a`).
   Neue Fassung: ruhiges quadratisches Feld mit 6px-Ecken, im Ruhezustand
   neutral (--ink-soft), erst bei Beruehrung das funktionale Rot. Loeschen darf
   sich ankuendigen, muss aber nicht dauernd warnen.

   `!important` (1 von 2): WooCommerce erklaert
   `.woocommerce a.remove { color: #a00 !important }`. Ohne Konter bliebe das
   fremde Rot in beiden Zustaenden stehen. */
.woocommerce table.shop_table td.product-remove {
	width: 46px;
	padding-right: 0;
}

.woocommerce a.remove {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: var(--r-btn);
	background: transparent;
	color: var(--tpw-ink-soft) !important;
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: color .2s ease, background-color .2s ease;
}

.woocommerce a.remove:hover,
.woocommerce a.remove:focus {
	background: var(--tpw-surface);
	color: var(--tpw-fehler) !important;
	text-decoration: none;
}

.woocommerce a.remove:focus-visible {
	outline: 2px solid var(--tpw-gruen);
	outline-offset: 2px;
	box-shadow: var(--tpw-fokus-halo);
}

/* AKTIONSZEILE („Warenkorb aktualisieren", ggf. Gutschein-Feld).
   Rechtsbuendig, weil der Knopf zu der Spalte gehoert, die er veraendert. */
.woocommerce table.shop_table td.actions {
	padding: 16px 14px;
	border-top: 1px solid var(--tpw-linie-mittel);
	text-align: right;
}

/* „Warenkorb aktualisieren" ist der ZWEITRANGIGE Weg der Seite — der erste
   ist „Weiter zur Kasse". Zwei gefuellte Knoepfe untereinander waeren zwei
   gleich laute Angebote; darum hier die Outline-Fassung aus Rahmen 7
   (Rahmen #719130, Text #557000, Hover-Flaeche #eff7e8). Der Disabled-Zustand
   kommt unveraendert aus style.css 14.2 und bleibt damit die einzige
   Definition. */
.woocommerce table.shop_table td.actions button[name="update_cart"],
.woocommerce table.shop_table td.actions input[name="update_cart"] {
	background-color: transparent;
	background-image: none;
	border: 1.5px solid var(--tpw-gruen);
	color: var(--tpw-gruen-dunkel);
}

.woocommerce table.shop_table td.actions button[name="update_cart"]:hover:not(:disabled),
.woocommerce table.shop_table td.actions button[name="update_cart"]:focus:not(:disabled),
.woocommerce table.shop_table td.actions input[name="update_cart"]:hover:not(:disabled),
.woocommerce table.shop_table td.actions input[name="update_cart"]:focus:not(:disabled) {
	background-color: var(--tpw-surface);
	border-color: var(--tpw-gruen-dunkel);
	color: var(--tpw-gruen-dunkel);
}

/* Gutschein-Feld — heute nicht im Einsatz (keine Rabatte aktiv), aber sobald
   der Verein eines aktiviert, soll es nicht als Fremdkoerper aufschlagen.
   Zeile links, Feld und Knopf in einer Hoehe. */
.woocommerce table.shop_table td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	float: none;
	margin-bottom: 14px;
	text-align: left;
}

.woocommerce table.shop_table td.actions .coupon label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--tpw-gruen-dunkel);
}

.woocommerce table.shop_table td.actions .coupon .input-text {
	width: auto;
	min-width: 12em;
	min-height: 46px;
}


/* =====================================================================
 * 3. SUMMEN-KARTE + „WEITER ZUR KASSE"
 *
 * WooCommerce stellt die Summe als `float:right; width:48%` neben eine leere
 * linke Haelfte. Hier wird `.cart-collaterals` ein Flex-Behaelter, der seinen
 * Inhalt nach rechts legt, und die Summe eine KARTE mit gedeckelter Breite:
 * eine Zahlenaufstellung braucht keine 600px, und der leere Streifen daneben
 * war das, was den Korb „nicht schoen" gemacht hat.
 * ===================================================================== */
.woocommerce .cart-collaterals {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.woocommerce .cart-collaterals::before,
.woocommerce .cart-collaterals::after {
	content: none;
	display: none;
}

.woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: min(100%, 430px);
	padding: 22px 24px 24px;
	border: 1px solid var(--tpw-linie-mittel);
	border-radius: var(--r-card);
	background: var(--tpw-surface-2);
	text-align: left;
}

/* Ueberschrift der Karte: Versal-Label statt H2-Groesse. Die Headline-
   Signatur aus Rahmen 4 (gruener Strich + Eyebrow) gehoert der SEITE — die
   Seite hat sie schon in „Warenkorb". Eine zweite Signatur zwanzig
   Zentimeter darunter waere die zweite Headline-Auszeichnung auf einer Seite,
   und Rahmen 4 verlangt „ueberall identisch, GENAU EINE". Ein Versal-Label
   ist die richtige Stufe fuer eine Boxen-Ueberschrift (Rahmen 11). */
.woocommerce .cart_totals > h2 {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	color: var(--tpw-gruen-dunkel);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Die Tabelle IN der Karte ist keine Karte: kein zweiter Rahmen, kein
   zweiter Radius, keine Flaeche. Nur Zeilen mit Haarlinien — das ist genau
   die Datenzeilen-Form aus Rahmen 11. */
.woocommerce .cart_totals table.shop_table {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	padding: 11px 0;
	border: 0;
	border-top: 1px solid var(--tpw-linie-stark);
	background: transparent;
	vertical-align: baseline;
}

.woocommerce .cart_totals table.shop_table tr:first-child th,
.woocommerce .cart_totals table.shop_table tr:first-child td {
	border-top: 0;
}

.woocommerce .cart_totals table.shop_table th {
	width: 50%;
	color: var(--tpw-gruen-dunkel);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.4;
	text-transform: uppercase;
	text-align: left;
}

.woocommerce .cart_totals table.shop_table td {
	color: var(--tpw-ink);
	font-size: 0.98rem;
	text-align: right;
}

/* Die Gesamtsumme ist die Zahl, auf die alles zulaeuft — sie darf einen
   Groessensprung haben (Rahmen 3: „Charakter ueber Groessensprünge"), aber
   keine Flaeche und keinen Rahmen. */
.woocommerce .cart_totals table.shop_table tr.order-total th {
	color: var(--tpw-ink);
	font-size: 0.78rem;
}

.woocommerce .cart_totals table.shop_table tr.order-total td,
.woocommerce .cart_totals table.shop_table tr.order-total td strong {
	color: var(--tpw-ink);
	font-size: 1.28rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

/* Der Weg zur Kasse ist der Hauptweg der Seite: gefuellter Knopf (Rahmen 7,
   Werte aus style.css 14.2) ueber die volle Kartenbreite. Volle Breite, weil
   in einer Karte mit rechtsbuendigen Zahlen ein halbbreiter Knopf keine
   Kante findet. */
.woocommerce .wc-proceed-to-checkout {
	margin: 18px 0 0;
	padding: 0;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 14px 20px;
	font-size: 1rem;
	text-align: center;
}

/* WooCommerce haengt an `.wc-forward` ein Glyphen-Pfeilchen („→" als
   ::after-Zeichen der eigenen Icon-Schrift). Rahmen 10 kennt genau EINE
   Icon-Familie, und Glyphen-Pfeile sind daraus verbannt (der Pfeil der
   Familie heisst `pfeil`). Weg damit — die Beschriftung sagt die Richtung. */
.woocommerce a.button.wc-forward::after,
.woocommerce .wc-proceed-to-checkout a.checkout-button::after {
	content: none;
	display: none;
}


/* =====================================================================
 * 4. WARENKORB MOBIL
 *
 * Unter 768px baut WooCommerce die Tabelle selbst um (woocommerce-
 * smallscreen.css): der Kopf verschwindet, jede Zeile wird ein Block, und
 * jede Zelle bekommt ihre Beschriftung aus `data-title` als `::before`
 * eingeblendet. DAS IST GUT und wird nicht ersetzt — es wird nur eingekleidet:
 * die eingeblendete Beschriftung ist das Versal-Label aus Rahmen 11, die
 * Zeile wird eine Karte mit Haarlinien.
 *
 * Der Umschaltpunkt ist ABSICHTLICH der von WooCommerce (768px) und nicht der
 * 960px des Rahmens: was hier gestylt wird, existiert erst, wenn das Plugin
 * umgebaut hat. Zwei verschiedene Schwellen ergaeben ein Fenster, in dem eine
 * Fassung auf ein Markup zielt, das es dort nicht gibt.
 * ===================================================================== */
@media screen and (max-width: 768px) {

	.woocommerce table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive tr {
		display: block;
		padding: 4px 0;
		border-top: 1px solid var(--tpw-linie-mittel);
	}

	.woocommerce table.shop_table_responsive tr:first-child,
	.woocommerce-page table.shop_table_responsive tr:first-child {
		border-top: 0;
	}

	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 7px 14px;
		border: 0;
		text-align: right;
	}

	/* Die eingeblendete Beschriftung = Versal-Label (Rahmen 11).
	   `!important` (2 von 2): woocommerce-smallscreen.css erklaert
	   `td::before { content: attr(data-title) !important }` und setzt daneben
	   `float:left; font-weight:700`. Das `content` bleibt unangetastet; der
	   Konter gilt nur dem `float`, denn ein gefloatetes Label kann in einer
	   Flex-Zeile nicht ausgerichtet werden und riss Label und Wert
	   auseinander. */
	.woocommerce table.shop_table_responsive tr td::before,
	.woocommerce-page table.shop_table_responsive tr td::before {
		float: none !important;
		flex: 0 0 auto;
		color: var(--tpw-gruen-dunkel);
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.13em;
		text-transform: uppercase;
	}

	/* Bild und Entfernen-Knopf tragen keine Beschriftung — sie erklaeren sich
	   selbst, und ein Label „Vorschaubild" waere Vorlesetext im Bild. */
	.woocommerce table.shop_table_responsive tr td.product-thumbnail,
	.woocommerce table.shop_table_responsive tr td.product-remove {
		width: auto;
		justify-content: flex-start;
		padding-right: 14px;
	}

	.woocommerce table.shop_table_responsive tr td.product-remove {
		justify-content: flex-end;
	}

	.woocommerce table.shop_table_responsive tr td.product-name {
		justify-content: flex-start;
		text-align: left;
	}

	/* Die Aktionszeile bleibt eine Zeile, aber ihr Knopf darf ueber die
	   ganze Breite — auf dem Telefon ist Breite die Beruehrflaeche. */
	.woocommerce table.shop_table_responsive tr td.actions {
		display: block;
		padding: 14px;
	}

	.woocommerce table.shop_table_responsive tr td.actions button[name="update_cart"] {
		width: 100%;
	}

	/* Die Summen-Karte nimmt mobil die volle Breite. */
	.woocommerce .cart-collaterals .cart_totals {
		width: 100%;
		padding: 18px 18px 20px;
	}

	/* Die Summen-Tabelle ist ebenfalls `shop_table_responsive`; sie soll aber
	   ZWEISPALTIG bleiben (Beschriftung links, Betrag rechts) — das ist schon
	   die Datenzeilen-Form und braucht keinen Umbau. Darum die Zeilen hier
	   wieder als Flex-Zeile statt als Block, und die th-Zelle zurueckholen. */
	.woocommerce .cart_totals table.shop_table_responsive tr {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		padding: 0;
		border-top: 1px solid var(--tpw-linie-stark);
	}

	.woocommerce .cart_totals table.shop_table_responsive tr:first-child {
		border-top: 0;
	}

	.woocommerce .cart_totals table.shop_table_responsive th {
		display: block;
		width: auto;
		padding: 11px 0;
	}

	.woocommerce .cart_totals table.shop_table_responsive td {
		padding: 11px 0;
	}

	/* Die Betragszelle traegt in der Summen-Tabelle KEIN eingeblendetes
	   Label — die th-Zelle daneben sagt es bereits, zweimal „Zwischensumme"
	   in einer Zeile ist einmal zu viel. */
	.woocommerce .cart_totals table.shop_table_responsive td::before {
		content: none;
		display: none;
	}
}


/* =====================================================================
 * 4b. KASSE — DIE ZWEI GRAUFLAECHEN, DIE DER KORB HINTERLASSEN HAETTE
 *
 * WARUM DIE KASSE HIER MITKOMMT, obwohl der Auftrag „Warenkorb und
 * Produktseite" lautete: die Bestellueberischt der Kasse ist eine
 * `table.shop_table` und hat die Grundform aus Abschnitt 1 damit schon
 * uebernommen. Ohne die folgenden Regeln waere die Kasse die EINZIGE Seite,
 * auf der noch WooCommerce-Grau steht — und zwar direkt hinter der frisch
 * bereinigten Korbseite, also an der Stelle, an der der Bruch am meisten
 * auffaellt. Zwei Flaechen sind es:
 *   · die Summenzeilen der Bestellueberischt (`tfoot th`) auf `#ebe9eb`
 *   · der Zahlungsblock `#payment` samt Erklaerkasten, ebenfalls grau-lila
 * Rahmen 1 verbietet Grauflaechen ohne Ausnahme. Mehr passiert hier nicht:
 * keine Umsortierung, keine Formularaenderung, kein Eingriff in die
 * Zahlungsarten.
 * ===================================================================== */
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
	padding: 13px 14px;
	border: 0;
	border-top: 1px solid var(--tpw-linie-stark);
	background: transparent;
	vertical-align: baseline;
}

.woocommerce table.shop_table tfoot th {
	color: var(--tpw-gruen-dunkel);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.4;
	text-transform: uppercase;
	text-align: left;
}

.woocommerce table.shop_table tfoot td {
	color: var(--tpw-ink);
	font-size: 0.98rem;
	text-align: right;
}

/* Die Gesamtsumme auch hier als Zahl mit Groessensprung — dieselbe Stufe wie
   in der Summen-Karte des Korbes, damit die beiden Seiten dieselbe Sprache
   sprechen. */
.woocommerce table.shop_table tfoot tr.order-total td,
.woocommerce table.shop_table tfoot tr.order-total td strong {
	color: var(--tpw-ink);
	font-size: 1.18rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Der Zahlungsblock: weisse Karte mit Haarlinie statt grauer Flaeche. */
.woocommerce-checkout #payment {
	border: 1px solid var(--tpw-linie-mittel);
	border-radius: var(--r-card);
	background: #fff;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 18px 20px;
	border-bottom: 1px solid var(--tpw-linie-mittel);
}

.woocommerce-checkout #payment ul.payment_methods li {
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods label {
	font-weight: 600;
	color: var(--tpw-ink);
}

/* Der Erklaerkasten einer Zahlungsart ist ein HINWEIS, keine zweite Karte:
   zarteste Gruenstufe, 6px, kein Rahmen. WooCommerce setzt ihm zusaetzlich ein
   nach oben zeigendes Dreieck aus zwei Rand-Tricks (`::before` mit
   border-color) — das ist eine Sprechblase und in diesem Rahmen nirgends
   sonst vorhanden. Weg damit; die Einrueckung sagt die Zugehoerigkeit. */
.woocommerce-checkout #payment div.payment_box {
	margin: 12px 0 6px;
	padding: 14px 16px;
	border-radius: var(--r-btn);
	background: var(--tpw-surface-2);
	color: var(--tpw-ink);
	font-size: 0.92rem;
	line-height: 1.6;
}

.woocommerce-checkout #payment div.payment_box::before {
	content: none;
	display: none;
	border: 0;
}

.woocommerce-checkout #payment div.form-row.place-order {
	padding: 18px 20px;
}


/* =====================================================================
 * 5. MELDUNGEN IM SHOP
 *
 * Die Grundform (weisse Flaeche, gruener Kopfstrich, 11px) steht schon in
 * style.css 14.3. Hier nur, was am Korb dazukommt: WooCommerce setzt in die
 * Erfolgsmeldung einen „Einkauf fortsetzen"-Knopf und ein Glyphen-Haekchen
 * aus seiner eigenen Icon-Schrift. Das Haekchen wird durch das Motiv der
 * Familie ersetzt (Rahmen 10) — als Maske, damit es die Textfarbe uebernimmt.
 * ===================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	border-top: 3px solid var(--tpw-gruen);
	list-style: none;
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--tpw-ink);
}

.woocommerce-error {
	border-top-color: var(--tpw-fehler);
}

/* Glyphen-Zeichen der Plugin-Schrift aus, Motiv der Familie rein. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: '';
	position: static;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	background-color: var(--tpw-gruen-dunkel);
	-webkit-mask: var(--tpw-ic-haken) center / contain no-repeat;
	        mask: var(--tpw-ic-haken) center / contain no-repeat;
	font-size: 0;
	color: transparent;
}

.woocommerce-error::before {
	background-color: var(--tpw-fehler);
	-webkit-mask: var(--tpw-ic-warn) center / contain no-repeat;
	        mask: var(--tpw-ic-warn) center / contain no-repeat;
}

/* „Einkauf fortsetzen" ist der Rueckweg, nicht das Ziel — Outline statt
   gefuellt, damit er nicht mit „Weiter zur Kasse" konkurriert. Und nach
   rechts, weil links der Meldungstext steht. */
.woocommerce-message a.button,
.woocommerce-info a.button {
	margin-left: auto;
	background-color: transparent;
	background-image: none;
	border: 1.5px solid var(--tpw-gruen);
	color: var(--tpw-gruen-dunkel);
}

.woocommerce-message a.button:hover,
.woocommerce-message a.button:focus,
.woocommerce-info a.button:hover,
.woocommerce-info a.button:focus {
	background-color: var(--tpw-surface);
	border-color: var(--tpw-gruen-dunkel);
	color: var(--tpw-gruen-dunkel);
}


/* =====================================================================
 * 6. PRODUKTSEITE — FEINSCHLIFF
 *
 * Der User: „das ist aber schon jetzt sehr gut". Angefasst wird darum NUR,
 * was messbar aus dem Rahmen faellt. Kein Umbau, keine neue Anordnung.
 *
 *   a) DER PREIS stand im WooCommerce-Gruen `#77a464` — auf Weiss nachgemessen
 *      2,89 : 1 und damit unter der AA-Schwelle fuer Text (4,5 : 1). Er geht
 *      auf `--ink` (13,44 : 1), und seine Auszeichnung traegt die GROESSE,
 *      nicht die Fette (Begruendung und die geprüfte Gruen-Alternative stehen
 *      unten bei der Regel). Das ist der einzige echte MANGEL, der hier
 *      behoben wird.
 *   b) VERFUEGBARKEIT stand in WooCommerce-Rot `#a00`. Kein Wert dieser
 *      Website; das funktionale Rot ist `#b3312a` (Rahmen 12).
 *   c) DIE REITER („Beschreibung") kamen in WooCommerce-Grau `#ebe9eb` mit
 *      `#d3ced2`-Raendern — Grauflaechen sind nach Rahmen 1 tabu.
 *   d) MENGE UND KNOPF standen auf verschiedenen Hoehen. Gleiche Hoehe,
 *      gleiche Grundlinie.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * a) DER PREIS (Detailseite UND Kachel-Uebersicht)
 *
 * ZWEI DINGE WAREN ZU KLAEREN, und sie haengen nicht zusammen:
 *
 * ERSTENS DIE FARBE — ein Mangel, keine Geschmacksfrage. WooCommerce faerbt
 * JEDEN Preis mit seinem eigenen Gruen `#77a464`: auf Weiss nachgemessen
 * 2,89 : 1 und damit deutlich unter der AA-Schwelle fuer Text (4,5 : 1). Der
 * Preis ist die zweitwichtigste Angabe der Seite; er muss lesbar sein.
 *
 * ZWEITENS DAS GEWICHT — und da lag der erste Entwurf daneben. Er setzte den
 * Preis auf 1,45rem / 800, also fett und schwarz. Rueckmeldung User: „ist es
 * wirklich passend, das einfach fett, schwarz zu machen? Passt das zum Rest?"
 * Berechtigt: 800 ist auf dieser Website das Gewicht der GROSSEN HEADLINES
 * (Rahmen 3 arbeitet mit Gewichts-Kontrasten), und ein Preis, der so schwer
 * daherkommt wie eine Ueberschrift, ist generisches Shop-Design.
 *
 * GEWAEHLT IST DARUM „PRAESENZ UEBER GROESSE STATT UEBER FETTE":
 *   · 1,7rem statt 1,45rem — der Preis wird GROESSER, nicht dicker
 *   · Gewicht 500 (Detail) bzw. 600 (Kachel; kleinerer Grad braucht etwas
 *     mehr Strich, sonst wirkt die Zahl neben dem 600er Titel zu leise)
 *   · leicht negative Laufweite: grosse Ziffern in Raleway laufen sonst
 *     auseinander
 *   · das EURO-ZEICHEN eine Stufe kleiner (.62em) und leichter (400) in
 *     --ink-soft — die Waehrung ist die Nebensache, die Zahl die Hauptsache
 *
 * DIE FARBE BLEIBT --ink (#2b3120, nachgemessen 13,44 : 1). Der Preis ist ein
 * WERT, und Rahmen 11 teilt das ausdruecklich so ein: Label = `#557000`,
 * „Wert 0.98rem in --ink". Die geprüfte Alternative — Preis in dunklem
 * CI-Gruen `#557000` (5,67 : 1, AA in jeder Groesse) — sieht gut aus und ist
 * kontrasttechnisch einwandfrei, hat aber zwei Nachteile: sie gibt einem Wert
 * die Farbe der Labels, und in der Kachel stuende die gruene Zahl unmittelbar
 * ueber dem gruenen Knopf „In den Warenkorb" und neben gruenen Textlinks —
 * eine gruene Zahl liest sich dort wie ein Link oder ein Aktionspreis. Beide
 * Fassungen liegen als Bild nebeneinander in
 * local-restore/shop-ux-vorschau/11-preis-varianten.png; die Umstellung auf
 * Gruen waere `color` in den zwei Regeln unten.
 * --------------------------------------------------------------------- */
.woocommerce ul.products li.product .price {
	color: var(--tpw-ink);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -.005em;
	font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol {
	margin-right: 1px;
	color: var(--tpw-ink-soft);
	font-size: .8em;
	font-weight: 400;
}

.woocommerce ul.products li.product .price del {
	color: var(--tpw-ink-soft);
	font-weight: 400;
	opacity: 1;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 600;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0 0 1.1em;
	color: var(--tpw-ink);
	font-size: 1.7rem;
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.woocommerce div.product p.price .woocommerce-Price-currencySymbol,
.woocommerce div.product span.price .woocommerce-Price-currencySymbol {
	margin-right: 2px;
	color: var(--tpw-ink-soft);
	font-size: .62em;
	font-weight: 400;
}

/* Streichpreis bei Aktionen: der ALTE Preis tritt zurueck (--ink-soft,
   normal, durchgestrichen), der neue behaelt die Auszeichnung oben. */
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color: var(--tpw-ink-soft);
	font-size: 0.9em;
	font-weight: 400;
	opacity: 1;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	text-decoration: none;
	font-weight: 800;
}

/* b) Verfuegbarkeit. „Nicht verfuegbar" ist ein Zustand, keine Fehlermeldung —
   darum das funktionale Rot als SCHRIFTFARBE, ohne Flaeche und ohne Icon.
   Der Text selbst kommt differenziert aus inc/woocommerce.php. */
.woocommerce div.product p.stock {
	margin: -0.4em 0 1.1em;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.woocommerce div.product p.stock.out-of-stock {
	color: var(--tpw-fehler);
}

.woocommerce div.product p.stock.in-stock,
.woocommerce div.product p.stock.available-on-backorder {
	color: var(--tpw-gruen-dunkel);
}

/* d) Menge und Knopf auf einer Hoehe und einer Grundlinie. */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 1.6em;
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	content: none;
	display: none;
}

.woocommerce div.product form.cart div.quantity {
	float: none;
	margin: 0;
}

.woocommerce div.product form.cart button.single_add_to_cart_button {
	float: none;
	min-height: 46px;
}

/* Meta-Zeile (Artikelnummer, Kategorien): Versal-Label fuer die
   Beschriftungen waere hier zu laut, weil WooCommerce Label und Wert in
   EINER Zeile ausgibt. Also nur die Stufe zuruecknehmen: Meta-Groesse und
   Meta-Farbe (Rahmen 11: „Sekundaertext, Meta" = --ink-soft), die verlinkten
   Kategorien bleiben gruen. */
.woocommerce div.product .product_meta {
	margin-top: 1.2em;
	padding-top: 1.1em;
	border-top: 1px solid var(--tpw-linie);
	font-size: 0.88rem;
	line-height: 1.7;
	color: var(--tpw-ink-soft);
}

.woocommerce div.product .product_meta > span {
	display: block;
}

/* c) Reiter: keine Grauflaechen, keine Sprechblasen-Ecken. Die aktive Lasche
   ist eine weisse Flaeche auf der Haarlinie, die inaktiven sind reine
   Beschriftungen. WooCommerce baut die Ecken mit ::before/::after-Bogen —
   die entfallen. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	margin: 0 0 1.6em;
	padding: 0;
	border-bottom: 1px solid var(--tpw-linie-mittel);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 4px -1px 0;
	padding: 0;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: var(--r-btn) var(--r-btn) 0 0;
	background: transparent;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	display: none;
	border: 0;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 11px 16px;
	color: var(--tpw-ink-soft);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--tpw-gruen-dunkel);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-color: var(--tpw-linie-mittel);
	background: #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--tpw-gruen-dunkel);
}

/* Bei nur EINEM Reiter ist die Lasche eine Behauptung von Auswahl, wo es
   keine gibt — dann traegt die Ueberschrift im Panel die Auskunft allein.
   `:has()` erlaubt die Frage „hat diese Liste genau ein Kind?" rein in CSS;
   faellt die Unterstuetzung aus, bleibt die Lasche stehen und sieht lediglich
   wie oben aus. Kein Funktionsverlust. */
.woocommerce div.product .woocommerce-tabs ul.tabs:has(li:only-child) {
	display: none;
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
}

/* Bildergalerie: Radius der Karten-Stufe an Haupt- und Vorschaubildern
   (Rahmen 5/6 — gerade gesetzt, kein Rahmen, keine Rotation). */
.woocommerce div.product div.images img {
	border-radius: var(--r-card);
}