/* ==========================================================================
   Warenkorb-Hinweis — die Überlagerung nach «In den Warenkorb»

   Farben, Schriften und Masse ausschliesslich über var(--hs-…).

   Das Skript schreibt zwei Zahlen: `--an` (0 → 1 beim Einblenden) und
   `--rest` (1 → 0, die verbleibende Zeit). Die Geometrie steht hier.
   Beide Werte haben ihren Rückfall im Stilblatt — ohne Skript oder ohne
   Bildtakt steht der Hinweis fertig da.

   ⚠ JEDE REGEL BEGINNT MIT `.hs-wk`. Der Hinweis hängt am Ende von `<body>`
   und steht damit unter JEDEM Seiten-Stilblatt. `kb.css` färbt auf Warenkorb
   und Kasse jeden Verweis orange (`body.hs-kb a`, 0-1-2) — ohne den Vorsatz
   stünde der Knopf dort in oranger Schrift auf weissem Grund. Mit ihm ist
   jede Regel hier mindestens 0-2-0.

   Kontraste (auf #000000): Weiss 21 : 1 · Orange #FF6000 6.93 : 1 ·
   Schrift im Knopf Schwarz auf Weiss 21 : 1, beim Zeigen auf Orange 6.93 : 1.
   ========================================================================== */

.hs-wk {
	position: fixed;
	inset: 0;

	/* Über der Kopfleiste (120), dem Schleier des Schiebemenüs (140) und dem
	   Schiebemenü selbst (150). */
	z-index: 300;

	display: grid;
	place-items: center;
	padding: var(--hs-s4);

	/* Klicks gehen nur an Schleier und Karte, nie an die leere Hülle. */
	pointer-events: none;
}

.hs-wk[hidden] { display: none; }

/*
 * Der Schleier dunkelt ab, sperrt aber nichts dauerhaft: ein Klick darauf
 * schliesst den Hinweis. 55 % und nicht mehr — die Seite soll dahinter
 * erkennbar bleiben, damit niemand glaubt, er sei woanders gelandet.
 */
.hs-wk .hs-wk__schleier {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	opacity: var(--an, 1);
	pointer-events: auto;
	cursor: pointer;
}

.hs-wk .hs-wk__karte {
	position: relative;
	width: min(440px, 100%);
	padding: var(--hs-s6);
	background: var(--hs-schwarz);
	color: var(--hs-weiss);

	/* Dieselbe Geste wie im Fuss und unter jedem Seitentitel: die orange
	   Kante oben. Seiten und Boden als Haarlinie, sonst verschwände die
	   schwarze Karte auf den schwarzen Seiten im Schleier. */
	border: 1px solid rgba(255, 255, 255, .16);
	border-top: 2px solid var(--hs-orange);
	border-radius: var(--hs-radius);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .5);

	pointer-events: auto;
	opacity: var(--an, 1);
	transform: translate3d(0, calc((1 - var(--an, 1)) * 14px), 0);
}

.hs-wk .hs-wk__zu {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--hs-touch-min);
	height: var(--hs-touch-min);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--hs-radius);
	background: transparent;
	color: rgba(255, 255, 255, .72);
	font-family: var(--hs-font-text);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.hs-wk .hs-wk__zu:hover { color: var(--hs-orange); }
.hs-wk .hs-wk__zu:focus-visible { outline: 3px solid var(--hs-orange); outline-offset: -3px; }

.hs-wk .hs-wk__zeile {
	display: flex;
	align-items: center;
	gap: var(--hs-s4);

	/* Platz für das Schliessen-Kreuz oben rechts. */
	padding-right: var(--hs-s8);
}

/*
 * Das Bild steht auf Weiss, nicht auf Schwarz — derselbe gemessene Grund wie
 * bei der Bildbühne der Produktseite: 63 % der Beitragsbilder haben einen
 * weissen Grund und stünden auf Schwarz als helles Rechteck da.
 */
.hs-wk .hs-wk__bild {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	padding: 4px;
	display: grid;
	place-items: center;
	background: var(--hs-weiss);
}

.hs-wk .hs-wk__bild[hidden] { display: none; }

.hs-wk .hs-wk__bild img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.hs-wk .hs-wk__text { min-width: 0; }

.hs-wk .hs-wk__auge {
	display: flex;
	align-items: center;
	gap: var(--hs-s2);
	margin: 0 0 var(--hs-s1);
	max-width: none;
	font-family: var(--hs-font-titel);
	font-size: var(--hs-label);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hs-orange);
}

.hs-wk .hs-wk__name {
	margin: 0;
	max-width: none;
	font-family: var(--hs-font-titel);
	font-size: var(--hs-text);
	font-weight: 700;
	line-height: 1.3;
	color: var(--hs-weiss);

	/* Artikelnamen aus dem Import haben lange Wörter ohne Trennstelle
	   («Stabilisationsverlängerung»). Umbrechen statt überlaufen. */
	overflow-wrap: anywhere;
}

.hs-wk .hs-wk__knopf {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--hs-touch-min);
	margin-top: var(--hs-s4);
	padding: 0 var(--hs-s4);
	border-radius: var(--hs-radius);
	background: var(--hs-weiss);
	color: var(--hs-schwarz);
	font-family: var(--hs-font-titel);
	font-size: var(--hs-label);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

.hs-wk .hs-wk__knopf:hover,
.hs-wk .hs-wk__knopf:focus-visible {
	background: var(--hs-orange);
	color: var(--hs-schwarz);
}

.hs-wk .hs-wk__knopf:focus-visible { outline: 3px solid var(--hs-weiss); outline-offset: 3px; }

/*
 * Die verbleibende Zeit als Linie am Boden. Sie sagt, dass der Hinweis von
 * selbst geht — und sie steht still, solange die Maus auf der Karte ist.
 */
.hs-wk .hs-wk__zeit {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: rgba(255, 255, 255, .12);
}

.hs-wk .hs-wk__zeit > span {
	display: block;
	height: 100%;
	background: var(--hs-orange);
	transform-origin: left center;
	transform: scaleX(var(--rest, 1));
}

/* Die Ansage für Vorlesegeräte — unsichtbar, aber im Dokument. */
.hs-wk-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.hs-wk .hs-wk__karte { transform: none; }
}