/* Gutschein-Shop: bisher Snippet 24, nun versioniert im Gutscheine-Plugin. */
body.page-id-9391 ul.products li.product h2.woocommerce-loop-product__title {
	font-size: 20px !important;
	line-height: 1.3 !important;
	margin-top: 14px !important;
}

body.page-id-9391 ul.products li.product img {
	border-radius: 12px !important;
}

@media (max-width: 767px) {
	body.page-id-9391 ul.products li.product h2.woocommerce-loop-product__title {
		font-size: 18px !important;
	}
}

/* ------------------------------------------------------------------
 * Zeichenzähler unter der Widmung in der Kasse.
 *
 * Der Zähler steht auch ohne JavaScript da und nennt dann die Grenze.
 *
 * ⚠️ DIE KASSE IST DUNKEL. Gemessen: rgb(15,15,15) hinter dem Zähler.
 * Der erste Anlauf hatte gedeckte Töne für weissen Grund (#55504b,
 * #8a4b00, #9a1f11) — auf diesem Hintergrund sind das 2,4 bis 2,8 zu 1
 * und damit weit unter AA. Sichtbar wäre der Hinweis genau dann nicht
 * gewesen, wenn er gebraucht wird.
 *
 * Der Grundton erbt deshalb die Textfarbe des Formulars und nimmt sich
 * nur über die Deckkraft zurück: das hält, ob hell oder dunkel. Die
 * beiden Warntöne sind fest und auf rgb(15,15,15) nachgemessen —
 * 11,2:1 und 9,5:1. Wird die Kasse je hell, gehören sie neu bestimmt.
 *
 * Bewusst nicht das Marken-Orange: bei zehn Zeichen Rest soll die Zeile
 * auffallen und nicht wie Gestaltung aussehen.
 * ------------------------------------------------------------------ */
.bfsz-gs-fields .bfsz-gs-zaehler {
	margin: -12px 0 16px;
	font-size: 0.85em;
	line-height: 1.4;
	color: inherit;
	opacity: 0.72;
}

.bfsz-gs-fields .bfsz-gs-zaehler--knapp {
	color: #ffb84d;          /* 11,2:1 auf rgb(15,15,15) */
	opacity: 1;
	font-weight: 600;
}

.bfsz-gs-fields .bfsz-gs-zaehler--voll {
	color: #ff9d8a;          /* 9,5:1 auf rgb(15,15,15) */
	opacity: 1;
	font-weight: 600;
}

.bfsz-gs-fields textarea[data-bfsz-widmung] {
	min-height: 68px;
	resize: vertical;
}