/* ── Produktseite, Kaufbereich, Runde 6 (28.10.2026): Claus' Livegang-Liste, Punkte 6, 7 und 15 ──
   Nur diese drei Stellen; wird nach 09, 13, 19 und 26 geladen und überschreibt dort per Reihenfolge und Spezifität.
   Farben aus dem Theme: dunkelgrün #205b31, grün #2b723d, hellgrün #edf5e8. */

/* 06 Bonushinweis „Für dieses Produkt erhältst du N Bonuspunkte.“ (Markup und Satz: module/bonus-anzeige.php): direkt unter
   Menge und „In den Warenkorb“, linksbündig. Der Abstand unter dem Formular (WooCommerce/Kadence: form.cart hat unten Luft) entfällt,
   den kleinen Abstand zum Knopf (12 px) bestimmt der Satz selbst; zu den Zahlungslogos darunter bleiben es 26 px (26-bonus.css), damit der
   Satz nicht wie ein Teil der Logos wirkt. Solange er verborgen ist (variable Produkte vor der Auswahl), gilt der normale Abstand. */
body.single-product.woocommerce div.product .summary form.cart:has(+ p.temana-bonuspunkte-produkt:not([hidden])) {
	margin-bottom: 0 !important;
}
body.single-product.woocommerce div.product .summary p.temana-bonuspunkte-produkt {
	margin: 12px 0 0;
}

/* 07 Menge − / +: bei Mouseover hellgrüner Grund und dunkelgrünes Symbol (vorher blieb die Schrift des Themas weiß auf Hellgrün).
   Beide Knöpfe gleich. Hover nur, wo es ihn gibt – auf dem Handy bleibt nach dem Tippen nichts hängen (auch nicht der alte,
   unbedingte :hover-Grund aus 09-produktseite.css); dort zeigt :active kurz dasselbe. */
.woocommerce div.product form.cart .temana-menge .temana-menge__knopf {
	transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) {
	.woocommerce div.product form.cart .temana-menge .temana-menge__knopf:hover {
		background-color: #edf5e8 !important; color: #205b31 !important; -webkit-text-fill-color: #205b31 !important;
	}
}
.woocommerce div.product form.cart .temana-menge .temana-menge__knopf:active,
.woocommerce div.product form.cart .temana-menge .temana-menge__knopf:focus-visible {
	background-color: #edf5e8 !important; color: #205b31 !important; -webkit-text-fill-color: #205b31 !important;
}
/* Der Fokusring liegt innen: Die Mengenbox schneidet außen ab (overflow: hidden), ein Ring mit Abstand 2 px wäre halb weg. */
.woocommerce div.product form.cart .temana-menge .temana-menge__knopf:focus-visible {
	outline-offset: -2px !important;
}
@media (hover: none) {
	.woocommerce div.product form.cart .temana-menge .temana-menge__knopf:hover:not(:active):not(:focus-visible) {
		background-color: #fff;
	}
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce div.product form.cart .temana-menge .temana-menge__knopf { transition: none; }
}

/* 15 Packungsbuttons mit „Spare xx €“-Etikett auf der oberen Rahmenlinie (Claus' freigegebene Musterlösung „Spar-Etikett im Rahmen“,
   Livegang-Liste 28.10.). Der Button behält seine kompakte Höhe (min-height 52 px aus temana.css) und wächst nur bei langem Text;
   Packungsname bleibt 16 px Poppins. Das Etikett setzt assets/kauf.js (span.temana-variante__spare), den Betrag rechnet
   module/kauf-ersparnis.php. */
.temana-varianten button.temana-variante {
	position: relative;
	font-family: Poppins, Arial, sans-serif; font-size: 16px; line-height: 1.35;
}
.temana-varianten button.temana-variante .temana-variante__spare {
	position: absolute; right: 10px; top: 0; transform: translateY(-50%);
	border: 1px solid #b5d0aa; border-radius: 7px; background: #e4f0da;
	color: #205b31; -webkit-text-fill-color: #205b31;
	padding: 3px 9px; font-size: 12px; font-weight: 700; line-height: 1.35; white-space: nowrap; text-align: left;
	box-shadow: 0 0 0 2px #fff; pointer-events: none;
}
/* Mit Etikett in der Gruppe: oben Platz für die Lasche (auch über der ersten Zeile), zwischen den Zeilen genug Luft, damit das
   Etikett der unteren Reihe den Button darüber nicht berührt; im Button ein wenig mehr Luft oben, der Text bleibt unter dem Etikett. */
.temana-varianten.temana-varianten--spare {
	gap: 22px 12px; padding-top: 12px;
}
.temana-varianten.temana-varianten--spare button.temana-variante {
	padding-top: 15px; padding-bottom: 9px;
}

/* Mouseover: dunkelgrüner Button, weiße Schrift, Etikett hell auf dunklem Rand. Nur bei echtem Hover (nicht auf Touch). */
@media (hover: hover) {
	.temana-varianten button.temana-variante:hover:not(.is-aktiv):not([aria-pressed="true"]) {
		background-color: #205b31; border-color: #205b31; color: #fff; -webkit-text-fill-color: #fff;
	}
	.temana-varianten button.temana-variante:hover:not(.is-aktiv):not([aria-pressed="true"]) .temana-variante__spare {
		background: #edf8e8; box-shadow: 0 0 0 2px #205b31;
	}
}

/* Ausgewählt: hellgrüner Button, dunkelgrüne Schrift – in jedem Zustand (Teil 19 hält die Farben mit !important fest,
   dort war die Schrift fast schwarz; Claus: dunkelgrün). Das Etikett wird weiß mit hellgrünem Halo. */
.temana-varianten button.temana-variante.is-aktiv,
.temana-varianten button.temana-variante.is-aktiv:hover,
.temana-varianten button.temana-variante.is-aktiv:focus,
.temana-varianten button.temana-variante.is-aktiv:focus-visible,
.temana-varianten button.temana-variante.is-aktiv:active,
.temana-varianten button.temana-variante[aria-pressed="true"] {
	color: #205b31 !important; -webkit-text-fill-color: #205b31 !important;
	background-color: #edf5e8 !important; border-color: #2b723d !important;
}
.temana-varianten button.temana-variante.is-aktiv *,
.temana-varianten button.temana-variante[aria-pressed="true"] * {
	color: #205b31 !important; -webkit-text-fill-color: #205b31 !important;
}
.temana-varianten button.temana-variante.is-aktiv .temana-variante__spare,
.temana-varianten button.temana-variante[aria-pressed="true"] .temana-variante__spare {
	background: #fff; box-shadow: 0 0 0 2px #edf5e8;
}