/* ==========================================================================
   KATEGORIESEITEN — «Verbund», freigegeben am 2026-08-19.

   Der Hero von «Tor», der Aufbau von «Werkstatt», ohne Wabensaum und ohne
   Unterkategorie-Kacheln am Fuss. Die vier Entwürfe standen unter
   `hs-vorschau-kategorie.php`; hier ist nur noch der gewählte übrig — die
   Entwurfsklassen (`.hs-k2--tor` usw.) sind aufgelöst, es gibt nur einen Stil.

   Gilt für Kategorien, Schlagwörter, die Shopseite und die Produktsuche —
   `HS_Kategorie::greift()` entscheidet.

   ⚠ VIELE REGELN SIND MIT `body.hs-k2` GESCHRIEBEN, OBWOHL DAS UNNÖTIG
   AUSSIEHT. Es ist nötig: WooCommerce und Divi bringen eigene Regeln für
   `ul.products`, `li.product`, `.price` und `.button` mit. `.hs-k2-gitter`
   allein ist 0-1-0 und läge mit `.products` gleichauf — wer dann gewinnt,
   hinge an der Ladereihenfolge. `body.hs-k2 .hs-k2-gitter` ist 0-2-1 und
   gewinnt immer, ohne `!important`, das die Kaskade für alles Spätere
   zumauern würde.

   Farben, Schriften und Masse ausschliesslich über var(--hs-…).
   Bewegung: eine Zahl aus dem Skript, die Geometrie steht hier in calc().
   ========================================================================== */

body.hs-k2 {
	--k2-rand: clamp(20px, 4vw, 64px);

	/*
	 * Die Höhe der festen Kopfleiste. `kat.js` misst sie und schreibt den
	 * echten Wert — der hier ist der Startwert, damit die Seite auch ohne
	 * Skript nicht unter der Leiste klebt. Er ist absichtlich knapp: zu viel
	 * Abstand sieht nach Fehler aus, zu wenig verdeckt drei Pixel Pfad.
	 */
	--k2-leiste: 64px;

	background: var(--hs-schwarz);
}

body.hs-k2 .hs-fuss { margin-top: 0; }

/*
 * ⚠ DER ABSTAND ZUR KOPFLEISTE STECKT IM HERO, NICHT IN EINEM RAND DAVOR.
 *
 * Naheliegend wäre `.hs-k2-seite { margin-top: var(--k2-leiste) }`. Das ist
 * falsch, und zwar auf eine Art, die man erst im Betrieb sieht: der Wert wird
 * gemessen (siehe `kat.js`), und jede Messung ist für einen Moment veraltet —
 * beim Schriftwechsel, beim Nachladen des Logos, beim Drehen des Geräts. Ist
 * der Wert zu gross, klafft zwischen der schwarzen Leiste und dem schwarzen
 * Hero ein WEISSER STREIFEN. Genau das war hier am 2026-08-20 zu messen:
 * Leiste 65 px, Variable 103 px, Lücke 38 px.
 *
 * Steckt der Abstand dagegen als Polsterung IM Hero, ist die Fläche unter der
 * Leiste in jedem Fall schwarz. Eine ungenaue Messung verschiebt dann nur den
 * Titel um ein paar Pixel — und das sieht niemand.
 */
.hs-k2-seite { margin-top: 0; }

/* ==========================================================================
   Der Pfad — die volle Kette, nicht nur eine Ebene wie in der alten Vorlage
   ========================================================================== */

.hs-k2-pfad ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--hs-s2);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--hs-label);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-weight: 700;
}

.hs-k2-pfad a { text-decoration: none; }
.hs-k2-pfad__teiler { opacity: .45; }

/* ==========================================================================
   Auge, Titel, Schnitt — dieselben drei Zeichen wie auf der Startseite
   ========================================================================== */

.hs-k2-auge {
	margin: 0;
	font-size: var(--hs-label);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-weight: 700;
}

/*
 * Seit dem Entscheid für Schwarz (2026-08-20) gibt es nur noch einen Grund, und
 * damit auch nur noch ein Orange: das leuchtende #FF6000, auf Schwarz 6.93 : 1.
 *
 * ⚠ `--hs-orange-tief` (#BF4800) KOMMT IN DIESER DATEI NIRGENDS MEHR VOR.
 * Es ist die Textfarbe für HELLE Gründe (5.07 : 1 auf Weiss); auf Schwarz
 * käme es auf 2.7 : 1 und fiele durch. Wer hier später Orange braucht, nimmt
 * das leuchtende — nicht aus Geschmack, sondern weil das andere unlesbar wäre.
 */
.hs-k2-auge { color: var(--hs-orange); }

body.hs-k2 .hs-k2-titel {
	margin: 0;
	font-family: var(--hs-font-titel);
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	line-height: 1.08;
	letter-spacing: .02em;
	font-weight: 700;
}

/* ==========================================================================
   Der Hero
   ========================================================================== */

/*
 * ⚠ DIE HÖHE HÄNGT AN DER POLSTERUNG, NICHT AN `min-height`.
 *
 * Kundenwunsch vom 2026-08-20: rund ein Drittel flacher. Nur `min-height` zu
 * senken hätte fast nichts bewirkt — gemessen war der Hero 463 px hoch, und
 * zwar aus 167 px Polsterung oben, 200 px Inhalt und 96 px unten. Die
 * Mindesthöhe (446 px) lag DARUNTER und bestimmte gar nichts.
 *
 * Neu: 89 + 200 + 32 = 321 px, also 31 % flacher. Oben bleibt die Leistenhöhe
 * plus 24 px Luft — weniger, und der Pfad klebte unter der Leiste.
 *
 * `min-height` bleibt als Boden für breite, flache Fenster stehen, liegt aber
 * bewusst unter der natürlichen Höhe: auf einem 1080er Schirm greift sie wieder
 * und lässt den Hero mitwachsen.
 */
.hs-k2-tor {
	position: relative;
	min-height: 40svh;
	display: flex;
	align-items: flex-end;
	padding: calc(var(--k2-leiste) + var(--hs-s6)) var(--k2-rand) var(--hs-s8);
	background: var(--hs-schwarz);
	color: var(--hs-weiss);
	overflow: hidden;
}

/*
 * ⚠ DAS BILD KOMMT MEIST IN EINEM `<picture>`.
 *
 * `hs_bild()` liefert WebP mit JPEG-Rückfall in drei Breiten. Ohne diese Regel
 * bliebe das `<picture>` ein normales Flex-Kind des Heros — ein Kasten ohne
 * Inhalt (das Bild ist ja absolut gesetzt), aber mit Zeilenhöhe, der die
 * Textspalte danebenschöbe. Also wird die Hülle selbst zur Ebene.
 */
.hs-k2-tor picture {
	position: absolute;
	inset: 0;
	display: block;
}

/*
 * ⚠ `body.hs-k2` IST HIER PFLICHT, NICHT KOSMETIK.
 *
 * `woocommerce-layout.css` setzt `.woocommerce-page img { height: auto }` —
 * 0-1-1 und damit spezifischer als ein blosses `.hs-k2-tor__bild` (0-1-0).
 * Gemessen am 2026-08-20: das Bild rendert dann in seinem Eigenverhältnis
 * 356 px hoch in einem 463 px hohen Hero, und die unteren 107 px bleiben
 * schwarz. `object-fit: cover` kann nichts füllen, was nicht aufgespannt ist.
 */
body.hs-k2 .hs-k2-tor__bild {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	max-width: none;
	/*
	 * Die Motive sind 3.56 : 1 und der Hero auf dem Handy fast quadratisch —
	 * `cover` schneidet dort kräftig. Die Mitte trägt bei dieser Serie das
	 * Motiv (Ware im Vordergrund, Laden unscharf dahinter), deshalb bleibt es
	 * bei der Voreinstellung und nicht bei einer geratenen Verschiebung.
	 */
	opacity: .55;
}

/*
 * ⚠ OHNE BILD KEIN PLATZHALTER, SONDERN EINE FLACHERE TAFEL.
 * Gemessen: von 66 Kategorien haben die wenigsten ein Beitragsbild. 62 svh
 * leere schwarze Fläche über dem Titel wären kein Hero, sondern ein Loch —
 * die Seite sähe kaputt aus, nicht ruhig.
 */
.hs-k2-tor--ohnebild { min-height: 26svh; }

.hs-k2-tor__schleier {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.15) 100%);
}

.hs-k2-tor__inhalt {
	position: relative;
	max-width: 46ch;
	display: grid;
	gap: var(--hs-s3);
}

body.hs-k2 .hs-k2-tor .hs-k2-titel {
	color: var(--hs-weiss);
	font-size: clamp(2.25rem, 4.2vw, 3.5rem);
}

.hs-k2-tor .hs-k2-pfad a { color: rgba(255,255,255,.78); }
.hs-k2-tor .hs-k2-pfad a:hover { color: var(--hs-orange); }
.hs-k2-tor__zahl { font-size: var(--hs-text); color: rgba(255,255,255,.8); }

/* Der Beschreibungstext der Kategorie. Er fehlt heute bei 65 von 66 — wenn
   er da ist, steht er hier und nicht irgendwo unter der Ware. */
.hs-k2-tor__text {
	margin: 0;
	font-size: var(--hs-text);
	line-height: 1.6;
	color: rgba(255,255,255,.88);
}

/*
 * ⚠ HIER STAND DER WABENSAUM. Er ist weg — Kundenentscheid vom 2026-08-19
 * («ohne diese Zickzacklinie»). Als Verlaufsmuster gezeichnet liest sich das
 * Sechseck nicht als Wabe, sondern als Zackenband. Der Wechsel von Schwarz
 * auf Weiss trägt die Kante allein.
 */

/* ==========================================================================
   Die Bank — Schiene links, Feld rechts
   ========================================================================== */

.hs-k2-bank {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: clamp(24px, 3vw, 48px);
	max-width: 1600px;
	margin-inline: auto;
	padding: var(--hs-s12) var(--k2-rand) var(--hs-s16);
	background: var(--hs-schwarz);
}

.hs-k2-schiene {
	position: sticky;
	top: calc(var(--k2-leiste) + 24px);
	align-self: start;
	display: grid;
	gap: var(--hs-s8);
	max-height: calc(100svh - var(--k2-leiste) - 48px);
	overflow-y: auto;
}

.hs-k2-hilfe {
	border-top: 1px solid rgba(255, 255, 255, .16);
	padding-top: var(--hs-s4);
	font-size: var(--hs-klein);
	color: var(--hs-grau-45);
	line-height: 1.6;
}

.hs-k2-hilfe strong { color: var(--hs-weiss); display: block; margin-bottom: var(--hs-s1); }
.hs-k2-hilfe a { color: var(--hs-orange); }
.hs-k2-hilfe__tel { white-space: nowrap; }

.hs-k2-feld { display: grid; gap: var(--hs-s4); align-content: start; }

/* ==========================================================================
   Der Zweig — Unterkategorien oder Geschwister. NIE leer.

   ⚠ DAS IST DIE ANTWORT AUF «SUB-SUB-SEITEN». Gemessen ist der Katalog zwei
   Ebenen tief: 14 Kategorien oben, 52 darunter, keine dritte. Was im Gespräch
   «Sub-Sub» hiess (`/produkt-kategorie/bogen/griffstuecke/`), ist eine
   Unterkategorie ohne eigene Kinder. Dort schaltet die Schiene auf die sieben
   Geschwister um — wer bei «Griffstücke» steht, will zu «Wurfarme», nicht
   eine Ebene hoch.
   ========================================================================== */

.hs-k2-zweig { list-style: none; margin: 0; padding: 0; }

.hs-k2-zweig a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hs-s3);
	min-height: var(--hs-touch-min);
	padding: var(--hs-s2) 0;
	border-bottom: 1px solid rgba(255, 255, 255, .16);
	text-decoration: none;
	color: var(--hs-weiss);
	font-size: var(--hs-klein);
	font-weight: 700;
}

.hs-k2-zweig a:hover { color: var(--hs-orange); }
.hs-k2-zweig a:focus-visible { outline: 3px solid var(--hs-orange); outline-offset: 2px; }
.hs-k2-zweig .zahl { color: var(--hs-grau-45); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Die aktuelle Seite steht in der Geschwisterliste NICHT mit — aber die
   Elternkategorie schon, als Weg zurück. */
.hs-k2-zweig--hoch a { color: var(--hs-grau-45); }

.hs-k2-gruppenname {
	font-size: var(--hs-label);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-weight: 700;
	color: var(--hs-grau-45);       /* 6.24 : 1 auf Schwarz */
	margin-bottom: var(--hs-s2);
}

/* ==========================================================================
   Die Filterleiste — über dem Raster, nicht in der Schiene.

   ⚠ SIE KOMMT OHNE JAVASCRIPT AUS, UND ZWAR VOLLSTÄNDIG.
   Jede Gruppe ist ein `<details>`; das Auf- und Zuklappen macht der Browser,
   samt Tastatur und Vorlesegerät. Jeder Wert ist ein Verweis, keine
   Ankreuzbox — WooCommerce verwirft Array-Felder stillschweigend (der Grund
   steht ausführlich in `inc/kategorie-filter.php`).

   Ein Vollbild-Overlay wäre die übliche Lösung und wäre hier falsch: es
   braucht Fokusfalle und Escape, beides in JavaScript. Ein Filterfeld, das
   den Fokus ohne Skript einsperrt, ist eine Sackgasse.
   ========================================================================== */

.hs-k2-filter {
	position: sticky;
	top: var(--k2-leiste);
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--hs-s2);
	padding: var(--hs-s3) 0;
	background: var(--hs-schwarz);
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.hs-k2-fach { position: relative; }

.hs-k2-fach > summary {
	display: flex;
	align-items: center;
	gap: var(--hs-s2);
	min-height: var(--hs-touch-min);
	padding: 0 var(--hs-s3);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--hs-radius);
	background: transparent;
	color: var(--hs-weiss);
	font-size: var(--hs-klein);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.hs-k2-fach > summary::-webkit-details-marker { display: none; }

/* Der Winkel als reine Form — kein Zeichen, keine Schrift, nichts zu laden. */
.hs-k2-fach > summary::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.hs-k2-fach[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.hs-k2-fach > summary:hover { border-color: var(--hs-weiss); }
.hs-k2-fach > summary:focus-visible { outline: 3px solid var(--hs-orange); outline-offset: 2px; }
.hs-k2-fach[open] > summary { border-color: var(--hs-weiss); }

/* Die Zahl der gewählten Werte. Orange als FLÄCHE mit schwarzer Schrift —
   6.93 : 1. Weiss auf Orange wären 3.03 : 1 und fiele durch. */
.hs-k2-fach__zahl {
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	padding: 0 5px;
	border-radius: var(--hs-radius-pill);
	background: var(--hs-orange);
	color: var(--hs-schwarz);
	font-size: var(--hs-label);
	text-align: center;
}

.hs-k2-fach__inhalt {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 30;
	display: grid;
	gap: 2px;
	min-width: 240px;
	max-height: 52svh;
	overflow-y: auto;
	padding: var(--hs-s2);
	border: 1px solid var(--hs-weiss);
	background: var(--hs-schwarz);
}

.hs-k2-wahl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hs-s3);
	min-height: 34px;
	padding: 0 var(--hs-s2);
	text-decoration: none;
	color: var(--hs-weiss);
	font-size: var(--hs-klein);
}

/* Zeigezustand: Orange als FLÄCHE mit schwarzer Schrift (6.93 : 1) — wie überall
   im CD, statt des früheren Anthrazit. Nur anwählbare Werte: der gewählte Wert
   (`ist-an`) bleibt weiss, ein toter Wert (`--tot`) bleibt stumpf. */
.hs-k2-wahl:not(.hs-k2-wahl--tot):not(.ist-an):hover {
	background: var(--hs-orange);
	color: var(--hs-schwarz);
}
.hs-k2-wahl:not(.hs-k2-wahl--tot):not(.ist-an):hover .zahl { color: var(--hs-schwarz); }
.hs-k2-wahl:focus-visible { outline: 3px solid var(--hs-orange); outline-offset: -3px; }
.hs-k2-wahl .zahl { color: var(--hs-grau-45); font-variant-numeric: tabular-nums; }

.hs-k2-wahl.ist-an {
	background: var(--hs-weiss);
	color: var(--hs-schwarz);
	font-weight: 700;
}

.hs-k2-wahl.ist-an .zahl { color: var(--hs-grau-70); }   /* 8.45 : 1 auf Weiss */

/* Ein Wert ohne Treffer bleibt stehen, damit die Liste beim Filtern nicht
   springt — aber er ist kein Verweis, und das sieht man ihm an. */
.hs-k2-wahl--tot { color: var(--hs-grau-45); cursor: default; }
.hs-k2-wahl--tot .zahl { color: var(--hs-grau-45); }

.hs-k2-preis { display: flex; flex-wrap: wrap; align-items: end; gap: var(--hs-s2); padding: var(--hs-s1); }
.hs-k2-preis label { display: grid; gap: 2px; font-size: var(--hs-label); color: var(--hs-grau-45); }

body.hs-k2 .hs-k2-preis input {
	width: 84px;
	min-height: var(--hs-touch-min);
	padding: 0 var(--hs-s2);
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: var(--hs-radius);
	background: transparent;
	font-family: var(--hs-font-text);
	/* 17 px und nicht kleiner — unter 16 px zoomt iOS beim Antippen ins Feld. */
	font-size: var(--hs-text);
	color: var(--hs-weiss);
}

body.hs-k2 .hs-k2-preis button {
	min-height: var(--hs-touch-min);
	padding: 0 var(--hs-s4);
	border: 0;
	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: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

body.hs-k2 .hs-k2-preis button:hover,
body.hs-k2 .hs-k2-preis button:focus-visible { background: var(--hs-orange); color: var(--hs-schwarz); }

.hs-k2-filter__weg {
	align-self: center;
	margin-left: auto;
	font-size: var(--hs-klein);
	font-weight: 700;
	color: var(--hs-orange);   /* 6.93 : 1 auf Schwarz */
}

/* ==========================================================================
   Die Zeile über dem Raster — Trefferzahl links, Sortierung rechts
   ========================================================================== */

.hs-k2-feld__leiste {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--hs-s3) var(--hs-s4);
	font-size: var(--hs-klein);
	color: var(--hs-grau-45);
	padding-bottom: var(--hs-s2);
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

body.hs-k2 .woocommerce-result-count { margin: 0; font-size: var(--hs-klein); color: var(--hs-grau-45); }
body.hs-k2 .woocommerce-ordering { margin: 0; }

body.hs-k2 .woocommerce-ordering select {
	min-height: var(--hs-touch-min);
	padding: 0 var(--hs-s3);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--hs-radius);
	background: var(--hs-schwarz);
	font-family: var(--hs-font-text);
	/* 17 px, sonst zoomt iOS beim Öffnen der Auswahl. */
	font-size: var(--hs-text);
	font-weight: 700;
}

/*
 * ⚠ DAS EINZIGE `!important` IN DIESER DATEI, UND ES IST UNVERMEIDLICH.
 *
 * Divi setzt in `et-divi-dynamic.css` selbst eines:
 *
 *     .orderby { color: #666 !important }
 *
 * Gegen ein `!important` hilft keine Spezifität, nur ein zweites. Die
 * bestehende Regel in `style.css` (`.woocommerce-ordering select`) verliert
 * aus demselben Grund — das Feld stand shopweit auf #666 statt auf unserem
 * Anthrazit. Kein neuer Schaden also, aber einer, der hier auffällt, weil die
 * Sortierung jetzt auf jeder Kategorieseite steht.
 *
 * #666 auf Weiss käme auf 5.74 : 1 und wäre nicht falsch — aber es ist nicht
 * unser Grau, und ein Bedienelement, das eine Spur anders aussieht als alles
 * daneben, liest sich als fremd.
 */
body.hs-k2 .woocommerce-ordering select.orderby { color: var(--hs-weiss) !important; }

body.hs-k2 .woocommerce-ordering select:focus-visible {
	outline: 3px solid var(--hs-orange);
	outline-offset: 2px;
}

/* ==========================================================================
   Das Produktraster und die Karte

   ⚠ `ul.products` TRÄGT HIER ZWEI KLASSEN. `hs-k2-gitter` kommt aus dem
   Filter auf `woocommerce_product_loop_start` dazu; `products` bleibt, weil
   das Nachladen in `hs.js` auf `[data-hs-liste] ul.products` zielt und ohne
   die Klasse still nichts mehr täte.
   ========================================================================== */

body.hs-k2 .hs-k2-gitter {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	/* Die Fuge IST die Linie. Gezeichnet wird nichts — dieselbe Idee wie im
	   Kachelgitter der Startseite, nur in Hell. */
	gap: 4px;
	background: transparent;
	border: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.hs-k2 .hs-k2-ware {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;        /* Woo setzt Prozentbreiten für sein eigenes Spaltenraster */
	margin: 0;
	padding: 0;
	float: none;
	background: var(--hs-anthrazit);
	transform: translate3d(0, calc((1 - var(--an, 1)) * 18px), 0);
	opacity: calc(.35 + var(--an, 1) * .65);
}

.hs-k2-ware__schnitt {
	height: 3px;
	background: var(--hs-orange);
	opacity: 0;
}

.hs-k2-ware:hover .hs-k2-ware__schnitt,
.hs-k2-ware:focus-within .hs-k2-ware__schnitt { opacity: 1; }

body.hs-k2 .hs-k2-ware__link {
	display: flex;
	flex-direction: column;
	gap: var(--hs-s2);
	padding: var(--hs-s4);
	text-decoration: none;
	color: inherit;
	flex: 1 1 auto;
}

.hs-k2-ware__link:focus-visible { outline: 3px solid var(--hs-orange); outline-offset: -3px; }

.hs-k2-ware__bild {
	position: relative;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}

body.hs-k2 .hs-k2-ware__bild img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	object-fit: contain;
	display: block;
	margin: 0;
}

.hs-k2-ware__marke {
	font-size: var(--hs-label);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-weight: 700;
	color: var(--hs-orange);   /* 5.8 : 1 auf der Karte (#1A1A1A) */
	min-height: 1em;
}

/*
 * ⚠ ZWEI FEHLER AUF EINMAL, BEIDE AM 2026-08-20 GEMESSEN.
 *
 * ERSTENS: der Titel war 17 px statt der gesetzten 14. `woocommerce.css` setzt
 * `.woocommerce ul.products li.product h3 { font-size: 1em }` — Spezifität
 * 0-3-3 gegen die frühere Regel `body.hs-k2 .hs-k2-ware__titel` mit 0-2-1.
 * `1em` heisst «so gross wie das Elternelement», also 17 px. Deshalb steht der
 * Selektor unten auf 0-4-2 und nicht kürzer.
 *
 * ZWEITENS: die Zeilenklammer hat NIE gegriffen. `display: -webkit-box`
 * berechnet der Browser hier zu `flow-root`, weil die Überschrift Flex-Kind
 * ist — `-webkit-line-clamp: 2` lief damit ins Leere. Gekürzt hat allein
 * `overflow: hidden`, und zwar mitten in der dritten Zeile, ohne
 * Auslassungspunkte. Genau der angeschnittene Buchstabenrest im Kundenbild.
 *
 * ⚠ ES WIRD NICHTS MEHR GEKÜRZT, UND DAS IST EINE ENTSCHEIDUNG.
 * Gezählt über 1157 Artikel: Median 32 Zeichen, 90 % unter 50, 5 % über 56,
 * der längste 92 («Axcel Sight AccuTouch Plus Picatinny …»). Bei zwei festen
 * Zeilen wären auf dem Handy rund 15 % der Namen beschnitten. Ein
 * abgeschnittener Artikelname ist im Fachhandel ein Fehler, keine Gestaltung —
 * wer «7"» oder «.019» sucht, findet den Artikel sonst nicht wieder.
 *
 * Die Karten bleiben trotzdem sauber: im Raster sind alle Karten einer Reihe
 * gleich hoch, und `margin-top: auto` am Preis hält die Preise bündig. Ein
 * dreizeiliger Titel schiebt also nichts durcheinander.
 */
body.hs-k2 .hs-k2-gitter .hs-k2-ware h3.hs-k2-ware__titel {
	margin: 0;
	padding: 0;
	font-family: var(--hs-font-text);
	font-size: var(--hs-klein);
	font-weight: 700;
	line-height: 1.35;
	color: var(--hs-weiss);
	/* Zwei Zeilen bleiben reserviert, damit kurze Namen die Karte nicht
	   stauchen — aber als Mindesthöhe, nicht als Deckel. */
	min-height: 2.7em;
	/* Ein Artikelname wie «AVALON TEC ONE Stabilisator-Verlängerung» hat keine
	   Trennstelle. Ohne das hier drückt er die Rasterspalte auseinander. */
	overflow-wrap: anywhere;
}

/*
 * ⚠ DIE PREISFARBE MUSS AUF DIE INNERE SPANNE ZIELEN.
 * `style.css` färbt `.woocommerce-Price-amount` direkt (#1A1A1A). Eine Regel
 * nur auf `.hs-k2-ware__preis` würde vererbt und von der Kindregel geschlagen
 * — der Preis bliebe fast unsichtbar. Derselbe Fehler kostete auf der
 * Produktseite eine Runde.
 */
body.hs-k2 .hs-k2-ware__preis {
	font-family: var(--hs-font-titel);
	font-weight: 700;
	font-size: var(--hs-h3);
	color: var(--hs-weiss);
	font-variant-numeric: tabular-nums;
	margin-top: auto;
}

body.hs-k2 .hs-k2-ware__preis .woocommerce-Price-amount { color: var(--hs-weiss); }
.hs-k2-ware__preis .woocommerce-Price-currencySymbol { font-size: .6em; margin-right: .15em; }
body.hs-k2 .hs-k2-ware__preis del,
body.hs-k2 .hs-k2-ware__preis del .woocommerce-Price-amount { color: var(--hs-grau-45); font-size: .7em; }
.hs-k2-ware__preis ins { text-decoration: none; background: none; }

.hs-k2-ware__status { font-size: var(--hs-label); color: var(--hs-grau-45); min-height: 1.2em; }
.hs-k2-ware__nr     { font-size: var(--hs-label); color: var(--hs-grau-45); font-variant-numeric: tabular-nums; }

body.hs-k2 .hs-k2-ware__tun {
	display: block;
	width: 100%;
	box-sizing: border-box;
	/*
	 * ⚠ SENKRECHT ZENTRIERT ÜBER DIE POLSTERUNG, NICHT ÜBER DIE ZEILENHÖHE.
	 *
	 * Naheliegend wären `height: 44px; line-height: 44px`. Das hat hier bis zum
	 * 2026-08-20 gestanden und nie gewirkt: Divi setzt in `et-divi-dynamic.css`
	 * `.woocommerce-page a.button { line-height: 1.7em !important }`. Gegen ein
	 * `!important` hilft keine Spezifität — gemessen kam 20.4 px statt 44 an, und
	 * die Schrift klebte mit 3 px Abstand oben und 27 px unten am Kopf des Knopfes.
	 *
	 * Ein zweites `!important` wäre der kurze Weg. Der hier ist besser: mit
	 * `height: auto` und GLEICHER Polsterung oben wie unten sitzt die Zeile
	 * mittig, egal wie hoch sie ist. Divis Wert bleibt unangetastet, und wenn er
	 * sich je ändert, wächst der Knopf mit statt die Schrift zu verlieren.
	 * `min-height` sichert das Tippziel unabhängig davon.
	 */
	height: auto;
	min-height: var(--hs-touch-min);

	/* Die seitliche Luft steht als eigener Wert, weil sie an zwei Stellen
	   gebraucht wird: hier und in der Zeigeregel, die Divis Sprung abfängt.
	   Auf schmalen Geräten wird nur dieser Wert kleiner. */
	--knopf-luft: var(--hs-s3);
	padding: var(--hs-s3) var(--knopf-luft);
	margin: 0;
	border: 0;
	border-radius: var(--hs-radius);
	/* Weiss mit schwarzer Schrift (21 : 1), beim Zeigen orange mit schwarzer
	   Schrift (6.93 : 1). Kundenentscheid vom 2026-08-20 — auf der schwarzen
	   Karte war das Orange als Ruhezustand zu laut. */
	background: var(--hs-weiss);
	color: var(--hs-schwarz);
	font-family: var(--hs-font-titel);
	font-size: var(--hs-label);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.hs-k2 .hs-k2-ware__tun:hover,
body.hs-k2 .hs-k2-ware__tun:focus-visible { background: var(--hs-orange); color: var(--hs-schwarz); }

/*
 * ⚠ EINE KLASSE MEHR — UND ZWAR GEMESSEN, NICHT VORSORGLICH.
 *
 * Der Knopf im Raster ist der von WooCommerce; er trägt neben unserer Klasse
 * auch `button`. Damit greift `style.css`:
 *
 *     .woocommerce a.button:not(.alt) { background: transparent; color: … }
 *
 * Das ist 0-3-1 — `:not(.alt)` zählt sein Argument mit. Die Regel oben ist
 * 0-2-1 und verliert: der Knopf stand am 2026-08-20 auf `rgba(0,0,0,0)` mit
 * anthrazitfarbener Schrift, also durchsichtig statt orange.
 *
 * `!important` wäre der kurze Weg und würde die Kaskade für alles Spätere
 * zumauern. Eine Klasse mehr genügt: 0-3-2 schlägt 0-3-1.
 *
 * Die Regel oben bleibt trotzdem — sie trägt den Zurücksetzen-Verweis im
 * Leerfall, der kein `button` ist und deshalb gar nicht erst überschrieben wird.
 */
body.hs-k2 .hs-k2-ware a.hs-k2-ware__tun {
	background: var(--hs-weiss);
	color: var(--hs-schwarz);
	border: 0;
}

/*
 * ⚠ DIVIS KNOPF-ANIMATION MUSS GANZ WEG, NICHT NUR IHR PFEIL.
 *
 * `et-divi-dynamic.css` baut auf jedem `a.button` zwei Dinge ein:
 *
 *   .woocommerce-page a.button::after  { content: "5"; font-family: ETmodules; opacity: 0 }
 *   .woocommerce-page a.button:hover   { padding: 0.3em 2em 0.3em 1em }
 *
 * Beim Zeigen wird der Pfeil sichtbar UND die Polsterung springt: seitlich von
 * 8/12 px auf 24/12 px, senkrecht von 12 px auf 3.6 px. Der Text passt dann
 * nicht mehr und bricht um, der Knopf wird flacher, die Schrift sitzt nicht
 * mehr mittig. Kundenbefund vom 2026-08-20 — und der Pfeil soll ohnehin weg,
 * die Farbe allein trägt den Zeigezustand.
 *
 * `content` und `padding` tragen bei Divi KEIN `!important`, deshalb genügt
 * Spezifität: 0-3-3 gegen 0-2-2. Die Polsterung kommt aus `--knopf-luft`,
 * damit sie hier nicht zum zweiten Mal beziffert wird.
 */
body.hs-k2 .hs-k2-ware a.hs-k2-ware__tun::before,
body.hs-k2 .hs-k2-ware a.hs-k2-ware__tun::after,
body.hs-k2 .hs-k2-ware a.hs-k2-ware__tun:hover::before,
body.hs-k2 .hs-k2-ware a.hs-k2-ware__tun:hover::after {
	content: none;
	display: none;
}

body.hs-k2 .hs-k2-ware a.hs-k2-ware__tun:hover,
body.hs-k2 .hs-k2-ware a.hs-k2-ware__tun:focus-visible {
	background: var(--hs-orange);
	color: var(--hs-schwarz);
	padding: var(--hs-s3) var(--knopf-luft);
}

/* WooCommerce hängt bei erfolgreichem Legen ein «Angesehen»-Verweis an. */
body.hs-k2 .hs-k2-ware .added_to_cart {
	display: block;
	padding: 0 var(--hs-s3) var(--hs-s2);
	font-size: var(--hs-label);
	font-weight: 700;
	color: var(--hs-orange);
	text-align: center;
}

.hs-k2-badge {
	position: absolute;
	top: 0;
	left: 0;
	padding: 2px var(--hs-s2);
	/* Die einzige Ausnahme von «Radius 0» im Haus: Kennzeichnungen sind Pillen. */
	border-radius: var(--hs-radius-pill);
	background: var(--hs-weiss);
	color: var(--hs-schwarz);
	font-size: var(--hs-label);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Aktion sticht heraus: Orange als FLÄCHE mit schwarzer Schrift (6.93 : 1).
   «Neu» bleibt schwarz — zwei gleich laute Zeichen wären keins. */
.hs-k2-badge--aktion { background: var(--hs-orange); color: var(--hs-schwarz); }

/* ==========================================================================
   Blättern und Nachladen

   ⚠ HIER STEHT ABSICHTLICH KEINE REGEL.

   `style.css` gestaltet `.woocommerce-pagination` und `.hs-nachladen` bereits
   vollständig und im selben Zeichensystem (Abschnitte «Nachladen» und
   «Blättern»). Die Vorlage benutzt deshalb genau dieses Markup weiter. Eine
   zweite Fassung hier sähe zunächst gleich aus und driftete beim ersten Fix
   auseinander.

   Die Blätternavigation bleibt im Markup — sie ist der Rückfall ohne
   JavaScript und der Weg, den Suchmaschinen gehen. `hs.js` blendet sie aus
   und lädt beim Scrollen nach.
   ========================================================================== */

/* ==========================================================================
   Leerfälle — sie sind der Normalfall, nicht die Ausnahme
   ========================================================================== */

.hs-k2-leer {
	padding: clamp(48px, 8vh, 96px) var(--k2-rand);
	text-align: center;
	background: var(--hs-anthrazit);
}

body.hs-k2 .hs-k2-leer h2 { margin: 0 0 var(--hs-s3); font-family: var(--hs-font-titel); font-size: var(--hs-h3); color: var(--hs-weiss); }
body.hs-k2 .hs-k2-leer p  { margin: 0 auto; max-width: 46ch; color: var(--hs-grau-45); font-size: var(--hs-text); }
.hs-k2-leer .hs-k2-ware__tun { display: inline-block; width: auto; margin-top: var(--hs-s4); }

/* WooCommerce-Meldungen (in den Warenkorb gelegt, Fehler) stehen über der
   Filterleiste — sonst wären sie unter dem klebenden Balken versteckt. */
body.hs-k2 .woocommerce-notices-wrapper:empty { display: none; }

/* ==========================================================================
   Handy
   ========================================================================== */

@media (max-width: 900px) {
	.hs-k2-bank { grid-template-columns: 1fr; }
	.hs-k2-schiene { position: static; max-height: none; }
	.hs-k2-tor { min-height: 30svh; }
}

@media (max-width: 700px) {
	/*
	 * ⚠ `minmax(0, 1fr)` UND NICHT `1fr`.
	 *
	 * `1fr` heisst ausgeschrieben `minmax(auto, 1fr)` — die Spalte darf also
	 * nicht kleiner werden als ihr breitester unteilbarer Inhalt. Ein langer
	 * Artikelname ohne Trennstelle sprengt sie damit. Gemessen am 2026-08-20
	 * auf 390 px: Spalten 179 und 192 px statt gleich breit, und die Seite
	 * liess sich 3 px seitwärts schieben. Mit `minmax(0, …)` darf die Spalte
	 * schrumpfen, und der Text bricht statt zu drücken.
	 */
	body.hs-k2 .hs-k2-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.hs-k2 .hs-k2-gitter .hs-k2-ware h3.hs-k2-ware__titel { font-size: var(--hs-label); }

	/* Auf dem Handy ist der Filterwert das Bedienelement, nicht ein Eintrag in
	   einer Liste — 34 px sind für den Daumen zu wenig. */
	.hs-k2-wahl { min-height: var(--hs-touch-min); }

	/*
	 * ⚠ SONST STEHT DA «AUSFÜHRUNG WÄHLE…».
	 *
	 * Gemessen am 2026-08-20 auf 390 px: 10 von 24 Knöpfen wurden abgeschnitten.
	 * «Ausführung wählen» braucht 155 px, der Knopf bot 150. Mit schmalerer
	 * Polsterung und etwas weniger Sperrung sind es 157 gegen 149 — und die
	 * Sperrung bleibt mit .03em immer noch als Sperrung erkennbar.
	 */
	body.hs-k2 .hs-k2-ware__tun {
		--knopf-luft: var(--hs-s2);
		letter-spacing: .03em;
	}

	.hs-k2-filter { gap: var(--hs-s2); }
	.hs-k2-fach { flex: 1 1 140px; }
	.hs-k2-fach > summary { justify-content: space-between; }

	/* Die Fächer klappen an Ort und Stelle auf statt zu schweben: ein
	   schwebendes Feld über 240 px passt auf 375 px nicht neben das nächste
	   — und ein Overlay bräuchte JavaScript. */
	.hs-k2-fach__inhalt {
		position: static;
		min-width: 0;
		max-height: 40svh;
		margin-top: var(--hs-s2);
	}

	/* Ein offenes Fach nimmt die volle Zeile — sonst quetschen sich zwei
	   offene Listen nebeneinander. */
	.hs-k2-fach[open] { flex: 1 1 100%; }
	.hs-k2-filter__weg { margin-left: 0; }
}

/* ==========================================================================
   Wer keine Bewegung will, bekommt die fertige Seite
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	body.hs-k2 .hs-k2-ware { transform: none; opacity: 1; }
}

/* ==========================================================================
   Blättern und Nachladen auf schwarzem Grund

   `style.css` gestaltet `.woocommerce-pagination` und `.hs-nachladen` für einen
   HELLEN Grund — dort gibt es keine dunkle Fassung. Deshalb stehen diese Regeln
   hier und nicht dort: sie gehören zur Kategorieseite, nicht zum Shop insgesamt.
   Sobald Warenkorb, Kasse und Kundenkonto denselben Grund bekommen, wandern sie
   nach `style.css` und diese Ausnahme verschwindet.
   ========================================================================== */

body.hs-k2 .woocommerce-pagination a,
body.hs-k2 .woocommerce-pagination span {
	background: transparent;
	border-color: rgba(255, 255, 255, .28);
	color: var(--hs-weiss);
}

body.hs-k2 .woocommerce-pagination a:hover { border-color: var(--hs-weiss); }

body.hs-k2 .woocommerce-pagination .current {
	background: var(--hs-orange);
	border-color: var(--hs-orange);
	color: var(--hs-schwarz);
}

body.hs-k2 .hs-nachladen__stand { color: var(--hs-grau-45); }

body.hs-k2 .hs-nachladen .hs-btn {
	background: transparent;
	border-color: rgba(255, 255, 255, .38);
	color: var(--hs-weiss);
}

body.hs-k2 .hs-nachladen .hs-btn:hover,
body.hs-k2 .hs-nachladen .hs-btn:focus-visible {
	background: var(--hs-weiss);
	border-color: var(--hs-weiss);
	color: var(--hs-schwarz);
}