/*
Theme Name:   Hügi Sport — Divi Child
Theme URI:    https://huegisport.ch
Description:  Child-Theme für huegisport.ch V2. Setzt das Corporate Design Manual
              Ausgabe 1.0 (Juli 2026) um. Die Design-Tokens kommen aus dem
              MU-Plugin hs-fonts.php und werden hier nur verwendet, nie neu definiert.
Author:       KOMMTASTE GmbH
Author URI:   https://kommtaste.ch
Template:     Divi
Version:      0.1.0
Text Domain:  huegisport
License:      GPL-2.0-or-later
*/

/* ==========================================================================
   GRUNDLAGE

   Farben, Schriftgrössen und Abstände stehen als CSS-Variablen im MU-Plugin
   `hs-fonts.php`. Sie werden hier ausschliesslich über var(--hs-…) verwendet.
   Grund: Shop, Kasse, Belege und Newsletter brauchen dieselben Werte — eine
   Quelle, vier Verbraucher. Wer hier einen Farbwert hart schreibt, bricht das.

   CD-Manual, Seite 29: „Sie gehören an eine einzige Stelle im Projekt —
   Farben, Grössen und Abstände werden nirgends sonst hart geschrieben."
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 — Basis
   -------------------------------------------------------------------------- */

/* Divi speist seine Grundschriftgrösse aus dieser Variablen. Sie hier zu setzen
   wirkt überall, auch in Modulen, die wir gar nicht kennen. */
:root {
	--et_global_body_font_size: var(--hs-text);

	/*
	 * Die Trennlinie als fertige Randangabe.
	 *
	 * Sie wurde an drei Stellen benutzt — `.hs-linie`, `.hs-karte` und `td` —
	 * und war **nirgends definiert**. Eine undefinierte Variable macht die ganze
	 * Deklaration ungültig; `border: var(--hs-linie)` fiel damit auf den
	 * Anfangswert zurück, und die drei hatten schlicht keinen Rand. Aufgefallen
	 * am 2026-08-06 bei der Abnahme der dunklen Fassung, bestanden hat der
	 * Fehler seit dem ersten Tag.
	 *
	 * Hier steht bewusst KEIN Farbwert, sondern der Verweis auf das Token —
	 * damit bleibt die Regel aus dem Dateikopf gewahrt («Farben werden nirgends
	 * hart geschrieben»), und die dunkle Fassung erbt die Umdeutung von
	 * `--hs-grau-20` automatisch mit.
	 */
	--hs-linie: 1px solid var(--hs-grau-20);
}

/* `html body` statt `body`: Divis Customizer-CSS lädt NACH dem Child-Theme und
   setzt `body { font-size: 14px }`. Bei gleicher Spezifität gewinnt das später
   geladene Stylesheet — deshalb hier eine Stufe höher. Nachgemessen am
   Livesystem: ohne diesen Zusatz kommt der Fliesstext mit 14 px an, das CD
   verlangt 17 px und ausdrücklich «wird nie kleiner» (S. 19). */
html body,
html body.et-db #et-boc .et-l {
	font-family: var(--hs-font-text);
	font-size: var(--hs-text);          /* 17 px, fix — wird nie kleiner */
	line-height: 1.65;
	color: var(--hs-anthrazit);         /* nicht reines Schwarz, CD S. 14 */
	background: var(--hs-weiss);
}

/* Divi setzt für Absätze in seinen Modulen eine eigene Grösse. */
html body p,
html body .et_pb_text_inner p {
	font-size: inherit;
	line-height: inherit;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4 {
	font-family: var(--hs-font-titel);
	color: var(--hs-anthrazit);
	text-wrap: balance;
}

/* Typometrie Digital — CD S. 19. Titel skalieren fliessend. */
h1 { font-size: var(--hs-h1); font-weight: 700; line-height: 1.04; letter-spacing: -.022em; }
h2 { font-size: var(--hs-h2); font-weight: 700; line-height: 1.10; letter-spacing: -.016em; }
h3 { font-size: var(--hs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.008em; }
h4 {
	font-size: var(--hs-h4); font-weight: 600; line-height: 1.30;
	letter-spacing: .110em;
	text-transform: uppercase;          /* H4 ist die einzige Versalien-Stufe */
}

.hs-lead, .et_pb_text_inner > p.hs-lead {
	font-size: var(--hs-lead);
	font-weight: 300;
	line-height: 1.55;
	letter-spacing: -.004em;
}

small, .hs-klein { font-size: var(--hs-klein); line-height: 1.55; }

.hs-label {
	font-size: var(--hs-label);
	font-weight: 500;
	letter-spacing: .020em;
	line-height: 1.40;
	text-transform: uppercase;
	color: var(--hs-grau-70);
}

/* Abstand über einem Titel ≥ eigene Schriftgrösse, darunter ≤ die Hälfte.
   So bleibt sichtbar, welcher Text zu welchem Titel gehört. CD S. 17. */
h1 { margin: var(--hs-s16) 0 var(--hs-s6); }
h2 { margin: var(--hs-s12) 0 var(--hs-s4); }
h3 { margin: var(--hs-s8)  0 var(--hs-s3); }
h4 { margin: var(--hs-s6)  0 var(--hs-s2); }

p { margin: 0 0 var(--hs-s4); max-width: 68ch; }   /* Satzbreite 60–75 Zeichen */

/* Hervorhebung ausschliesslich über SemiBold — nicht Farbe, nicht Kursiv. */
strong, b { font-weight: 600; }
em, i { font-style: italic; }        /* bleibt Werktiteln und Zitaten vorbehalten */

/* --------------------------------------------------------------------------
   2 — Links und Fokus
   -------------------------------------------------------------------------- */

a {
	color: var(--hs-orange-tief);       /* NIE --hs-orange auf hellem Grund */
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}
a:hover { color: var(--hs-schwarz); }

/* Unterstreichung ist Links vorbehalten — CD S. 17 */
:where(h1, h2, h3, h4) a { text-decoration: none; }

:focus-visible {
	outline: 2px solid var(--hs-orange);
	outline-offset: 2px;
	border-radius: 0;
}
:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   3 — Schaltflächen (CD S. 22)

   Merksatz: Auf Orange steht SCHWARZ, nie Weiss. Weiss auf Orange ist nur
   fürs Logo und sehr grosse Titel zulässig.
   -------------------------------------------------------------------------- */

.hs-btn,
.et_pb_button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hs-s2);
	min-height: var(--hs-touch-min);    /* 44 px, Barrierefreiheit */
	padding: var(--hs-s3) var(--hs-s6);
	font-family: var(--hs-font-titel);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 1.2;
	border: 2px solid transparent;
	border-radius: var(--hs-radius);    /* 0 — Buttons sind eckig */
	cursor: pointer;
	transition: background-color .12s linear, color .12s linear, border-color .12s linear;
}

/* Primär — nur EIN primärer Button pro Bildschirmbereich */
.hs-btn--primaer,
.et_pb_button.hs-btn--primaer,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce .single_add_to_cart_button {
	background: var(--hs-orange);
	color: var(--hs-schwarz);
	border-color: var(--hs-orange);
}
.hs-btn--primaer:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
	background: var(--hs-orange-tief);
	color: var(--hs-weiss);
	border-color: var(--hs-orange-tief);
}

/* Sekundär */
.hs-btn--sekundaer,
.woocommerce a.button:not(.alt), .woocommerce button.button:not(.alt) {
	background: transparent;
	color: var(--hs-anthrazit);
	border-color: var(--hs-anthrazit);
}
.hs-btn--sekundaer:hover,
.woocommerce a.button:not(.alt):hover, .woocommerce button.button:not(.alt):hover {
	background: var(--hs-anthrazit);
	color: var(--hs-weiss);
}

/* Tertiär — reiner Textlink in Buttonform */
.hs-btn--tertiaer {
	background: transparent;
	color: var(--hs-orange-tief);
	border-color: transparent;
	padding-left: 0; padding-right: 0;
}

/* Inaktiv */
.hs-btn[disabled], .hs-btn--inaktiv,
.woocommerce button.button:disabled, .woocommerce button.button.disabled {
	background: var(--hs-grau-20);
	color: var(--hs-grau-45);
	border-color: var(--hs-grau-20);
	cursor: default;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   4 — Lieferstatus und Kennzeichnungen (CD S. 14 und 22, Entscheid F-LAG1)

   Zwei sichtbare Zustände. Farbe steht NIE allein — jeder Zustand trägt
   zusätzlich Punkt und Wort, sonst geht die Information für farbfehlsichtige
   Nutzerinnen und Nutzer verloren.
   -------------------------------------------------------------------------- */

.hs-status {
	display: inline-flex;
	align-items: center;
	gap: var(--hs-s2);
	font-size: var(--hs-klein);
	font-weight: 500;
	line-height: 1.4;
}
.hs-status::before {
	content: "";
	width: .625rem; height: .625rem;
	border-radius: var(--hs-radius-pill);
	flex: 0 0 auto;
	background: currentColor;
}

.hs-status--lager      { color: var(--hs-erfolg); }       /* an Lager, 2–4 Tage  */
.hs-status--bestellung { color: var(--hs-orange-tief); }  /* wird bestellt, 10–12 Tage
                                                             Orange Tief, weil Text —
                                                             #FF6000 reicht auf Weiss nicht */
.hs-status--fehler     { color: var(--hs-fehler); }

/* Kennzeichnungen: vollrund, das einzige runde Element im Auftritt.
   Höchstens EINE pro Produkt. */
.hs-badge {
	display: inline-block;
	padding: .25rem var(--hs-s3);
	border-radius: var(--hs-radius-pill);
	font-family: var(--hs-font-titel);
	font-size: var(--hs-label);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.4;
}
.hs-badge--neu     { background: var(--hs-anthrazit); color: var(--hs-weiss); }
.hs-badge--aktion  { background: var(--hs-orange);    color: var(--hs-schwarz); }
.hs-badge--lager   { background: var(--hs-erfolg);    color: var(--hs-weiss); }
.hs-badge--bestellung { background: var(--hs-orange); color: var(--hs-schwarz); }

/* --------------------------------------------------------------------------
   5 — Zahlen: Preise, Mengen, Fachwerte (CD S. 19)

   Tabellenziffern sind Pflicht, damit Preise, Spinewerte und Zuggewichte
   exakt untereinander stehen und die Null vom O unterscheidbar ist.
   -------------------------------------------------------------------------- */

.hs-preis,
.woocommerce .price,
.woocommerce-Price-amount,
.hs-menge,
table td, table th {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "zero" 1;
}

.hs-preis, .woocommerce-Price-amount {
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--hs-anthrazit);
}

/* Streichpreis nur bei echter Reduktion — keine Fantasie-Streichpreise. */
.woocommerce del .woocommerce-Price-amount {
	font-size: 1rem;
	font-weight: 400;
	color: var(--hs-grau-45);
	text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
   6 — Raster, Weissraum, Linien (CD S. 21 und 22)
   -------------------------------------------------------------------------- */

.hs-inhalt,
.et_pb_row {
	max-width: var(--hs-inhalt-max);    /* 1280 px */
	margin-inline: auto;
}

@media (max-width: 640px) {
	.hs-inhalt { padding-inline: 20px; }
}

/* Drei Linienstärken, drei Aufgaben. Keine gestrichelten Varianten. */
.hs-linie          { border: 0; border-top: var(--hs-linie); margin: var(--hs-s8) 0; }
.hs-linie--eroeffnung { border: 0; border-top: 4px solid var(--hs-orange); width: 64px; margin: 0 0 var(--hs-s4); }
.hs-linie--abschluss  { border: 0; border-top: 2px solid var(--hs-schwarz); margin: var(--hs-s4) 0 0; }

/* Flächen, Karten, Bilder: 0 px Ecken. Dazwischen gibt es nichts. */
.hs-karte,
.woocommerce ul.products li.product,
.et_pb_image img, .woocommerce img {
	border-radius: var(--hs-radius);
}

.hs-karte {
	background: var(--hs-papier);
	padding: var(--hs-s6);
	border: var(--hs-linie);
}

/* Keine Schlagschatten — einzige Ausnahme sind aufliegende Ebenen. */
.hs-overlay, .hs-modal {
	box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
}

/* --------------------------------------------------------------------------
   7 — Tabellen
   -------------------------------------------------------------------------- */

table { border-collapse: collapse; width: 100%; }
th {
	font-family: var(--hs-font-titel);
	font-weight: 600;
	font-size: var(--hs-klein);
	text-align: left;
	color: var(--hs-grau-70);
	border-bottom: 2px solid var(--hs-grau-20);
	padding: var(--hs-s3) var(--hs-s4) var(--hs-s2) 0;
}
td {
	border-bottom: var(--hs-linie);
	padding: var(--hs-s3) var(--hs-s4) var(--hs-s3) 0;
	vertical-align: top;
}

/* --------------------------------------------------------------------------
   8 — Produktraster (CD S. 27: 4 Spalten Desktop, 2 Tablet, 1 Mobile)
   -------------------------------------------------------------------------- */

/* Sortimentsseiten dürfen breiter als die 1280 px des Fliesstextes sein.
   Bewusste Abweichung vom CD (S. 27) auf Kundenwunsch: bei vier Spalten
   gewinnt jede Produktkachel spürbar Fläche. Lesetexte bleiben bei 1280. */
.hs-inhalt--breit { max-width: 1600px; }

/* Bewusst OHNE den Vorfahren `.woocommerce`: den setzt WooCommerce nur auf
   seinen eigenen Seiten. Auf der Startseite fehlt er, und das Raster griff
   dort nicht — die Kacheln stapelten sich in voller Breite und wurden
   1475 px hoch. Am Livesystem nachgemessen. */
ul.products,
.woocommerce ul.products {
	display: grid;
	gap: var(--hs-s6) var(--hs-s6);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* `1fr` statt `auto`: damit sind ALLE Reihen gleich hoch, nicht nur die
	   Kacheln innerhalb einer Reihe. Sonst rutschen Preis und Knopf von Reihe
	   zu Reihe, weil eine Reihe mit Lieferstatus höher ist als eine ohne.
	   Am Livesystem gemessen: vier verschiedene Reihenhöhen, 481 bis 519 px. */
	grid-auto-rows: 1fr;
	align-items: stretch;
	margin: 0; padding: 0; list-style: none;
}
@media (max-width: 1100px) { ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { ul.products { grid-template-columns: 1fr; } }

/* WooCommerce hängt an `ul.products` zwei Aufräum-Pseudoelemente:

       .woocommerce ul.products::before,
       .woocommerce ul.products::after { content: " "; display: table }

   Sie stammen aus der Zeit, als Produktlisten mit `float` gebaut wurden, und
   räumen dort hinter den umflossenen Kacheln auf. In einem **Raster** werden
   Pseudoelemente jedoch zu vollwertigen Rasterfeldern. Das `::before` besetzt
   damit Feld 1, schiebt jedes Produkt um eine Spalte weiter, und das vierte
   fällt in die nächste Reihe:

       Reihe 1   [::before]   [Produkt 1]  [Produkt 2]  [Produkt 3]
       Reihe 2   [Produkt 4]  [::after]

   Am Livesystem gesehen bei den ähnlichen Produkten: drei Kacheln oben, die
   vierte allein darunter — mit einer Lücke links, wo nichts steht. Es sieht
   nach zu breiten Kacheln aus, ist aber ein Feld zu viel.

   `content: none` statt `display: none`: damit entsteht die Box gar nicht erst
   und kann auch nicht als Rasterfeld gezählt werden.

   Betrifft jede WooCommerce-Seite mit Produktraster — Shop, Kategorie,
   ähnliche Produkte, Zusatzverkäufe. **Nicht** die Startseite: dort fehlt der
   Vorfahre `.woocommerce`, weshalb die Regel dort nie gegriffen hat (siehe
   Kommentar über dem Raster). */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none; }

ul.products li.product { margin: 0 !important; width: auto !important; float: none !important; }

/* Produktbilder sind quadratisch und freigestellt auf Weiss (CD S. 24). */
ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--hs-weiss);
	width: 100%;
}

/* --------------------------------------------------------------------------
   8b — Produktkachel

   Die Kachel ist das meistgesehene Element im Shop. Bewusst ruhig gehalten:
   Bild, Marke, Titel, Preis, Lieferstatus — mehr nicht.
   -------------------------------------------------------------------------- */

/* Damit die Titel im Raster auf EINER Höhe stehen, muss jede Karte gleich
   aufgebaut sein: Bild quadratisch, Markenzeile immer vorhanden (auch leer),
   Titel auf zwei Zeilen festgelegt. Preis und Lieferstatus werden danach mit
   `margin-top: auto` nach unten geschoben — dann fluchten auch sie.
   Vorher gemessen: Kachelhöhen 562 bis 613 px, Preise auf drei verschiedenen
   Höhen. */
.hs-produkt {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: var(--hs-s3);
	/* Innenabstand rundum. Ohne ihn kleben Bild, Text und Knopf am Rand der
	   weissen Fläche — auf Papierweiss fällt das sofort auf. */
	padding: var(--hs-s4);
	background: var(--hs-weiss);
}

.hs-produkt__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--hs-s3);
	color: inherit;
	text-decoration: none;
}

.hs-produkt__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.hs-produkt__bild {
	position: relative;
	background: var(--hs-weiss);
	border: 1px solid var(--hs-grau-20);
}
.hs-produkt__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 8%;                      /* CD S. 24: 8 % Luft rundum */
}

/* Kennzeichnung sitzt oben links, überlagert das Bild nicht mittig. */
.hs-produkt__bild .hs-badge {
	position: absolute;
	top: var(--hs-s3);
	left: var(--hs-s3);
}

/* Immer eine Zeile hoch, auch ohne Marke — sonst rutscht der Titel hoch. */
.hs-produkt__marke {
	display: block;
	min-height: 1.4em;
	margin-bottom: var(--hs-s1);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hs-produkt__titel {
	font-size: 1.0625rem;             /* bewusst nicht H3-gross — im Raster stört das */
	font-weight: 600;
	/* 1.45 statt 1.35: bei 1.35 ist der Zeilenkasten schmaler als die Schrift
	   hoch ist, und die Unterlängen ragen unten heraus. Zusammen mit dem festen
	   `height` weiter unten — das exakt zwei Zeilenkästen misst — lief genau
	   diese herausragende Spitze ins `overflow: hidden`: bei «Aurel Intruder
	   Breakoff Spitze für Oryx und Mako 70-90 gr.» war das «y» in «Oryx» und
	   das «g» in «gr.» in der zweiten Zeile unten gekappt.
	   Sichtbar wurde es erst, als vier Kacheln pro Reihe passten und dadurch
	   deutlich mehr zweizeilige Titel nebeneinander standen. */
	line-height: 1.45;
	margin: 0;
	letter-spacing: 0;
	text-transform: none;
	/* Genau zwei Zeilen. Längere Titel werden abgeschnitten statt die Karte
	   auseinanderzuziehen — der ganze Name steht auf der Produktseite. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;

	/* FESTE Höhe, nicht bloss eine Mindesthöhe.
	   `-webkit-line-clamp` setzt die Auslassungspunkte ans Ende der zweiten
	   Zeile, entfernt die dritte aber nicht — die steht weiter im Kasten und
	   wird nur durch `overflow: hidden` verdeckt. Wächst der Kasten, weil ihn
	   der Flex-Fluss der Karte streckt, schaut die dritte Zeile darunter
	   hervor: bei «TRU-FIRE INDEX FINGER RELEASES SMOKE 2.0 MAX BUCKLE
	   FOLDBACK BLACK» stand «BLACK» halb angeschnitten unter dem Titel.
	   2 × 1.45 = 2.9em ist genau die Höhe zweier Zeilen — der Wert MUSS dem
	   doppelten `line-height` entsprechen. Grösser, und die dritte Zeile schaut
	   oben hervor; kleiner, und die zweite wird gekappt. Wer oben die
	   Zeilenhöhe ändert, muss diesen Wert mitziehen. */
	height: 2.9em;
	flex: 0 0 auto;
}

.hs-produkt__link:hover .hs-produkt__titel { color: var(--hs-orange-tief); }

/* Preis und Lieferstatus rutschen an den Fuss des Textblocks. Dadurch stehen
   sie in jeder Karte auf derselben Höhe, unabhängig von der Titellänge. */
.hs-produkt__preis { margin-top: auto; padding-top: var(--hs-s3); }

/* Im RASTER ist der Preis eine Angabe, keine Ansage.
   Das Manual führt 20 px für den Preis (S. 19) — das gilt auf der
   Produktseite, wo er die Entscheidung trägt. In der Kachel steht er neben
   einem 17-px-Titel und wirkt dort plakativ; er nimmt dem Artikelnamen die
   Aufmerksamkeit, obwohl der Kunde zuerst den Namen sucht. Deshalb hier eine
   Stufe kleiner, gleiche Schrift, gleiches Gewicht.
   Bewusste Abweichung vom Manual, auf Kundenwunsch vom 2026-08-03. */
.hs-produkt__preis.hs-preis,
.hs-produkt__preis .hs-preis,
.hs-produkt__preis .woocommerce-Price-amount {
	font-size: 1.0625rem;
}

/* Immer eine Zeile hoch — auch bei variablen Produkten, die keinen einzelnen
   Lieferstatus haben. Sonst rutscht der Preis darüber nach unten und die
   Preise im Raster fluchten nicht mehr. */
.hs-produkt__status {
	min-height: 26px;
	margin-top: var(--hs-s2);
}
.hs-produkt__auswahl {
	color: var(--hs-grau-45);
	font-size: var(--hs-klein);
}

/* Der Warenkorb-Button steht am Fuss der Kachel, immer auf gleicher Höhe. */
.hs-produkt__aktion { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------------------
   9 — Bedienflächen
   -------------------------------------------------------------------------- */

a, button, input[type="submit"], .hs-touch {
	min-height: auto;
}
button, input[type="submit"], select, .woocommerce .quantity input {
	min-height: var(--hs-touch-min);
}

/* --------------------------------------------------------------------------
   10 — Logo im Header (CD S. 11: Shop-Header 220–260 px)
   -------------------------------------------------------------------------- */

.et_pb_menu__logo img,
#logo {
	width: auto;
	max-width: 260px;
	min-width: 150px;                   /* Minimum digital */
}

/* --------------------------------------------------------------------------
   11 — Kasse: gleiche Tokens, Schrift eine Stufe grösser (CD S. 27)
   -------------------------------------------------------------------------- */

.hs-pos {
	font-size: 1.1875rem;               /* 19 px statt 17 px */
	line-height: 1.55;
}
.hs-pos .hs-btn { min-height: 52px; font-size: 1.0625rem; }
.hs-pos .hs-preis { font-size: 1.5rem; }

/* ==========================================================================
   TEIL B — Kopfbereich, Fussbereich, Startseite            (ab Version 0.3.0)

   Alle Abstände sind Vielfache von 4, alle Farben kommen aus den Tokens,
   Ecken bleiben bei 0 ausser bei Pillen. Orange tritt nur als Akzent auf:
   Fokusring, Warenkorbzahl, aktive Navigation, ein primärer Knopf je Bereich.
   ========================================================================== */

/* --------------------------------------------------------------------------
   B1 — Hilfsklassen
   -------------------------------------------------------------------------- */

.hs-nur-vorlesen {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hs-skiplink {
	position: absolute;
	left: var(--hs-s4);
	top: -100px;
	z-index: 200;
	padding: var(--hs-s3) var(--hs-s6);
	background: var(--hs-orange);
	color: var(--hs-schwarz);
	font-family: var(--hs-font-titel);
	font-weight: 600;
	text-decoration: none;
}
.hs-skiplink:focus { top: var(--hs-s4); }

.hs-icon { flex: 0 0 auto; vertical-align: middle; }

/* --------------------------------------------------------------------------
   B2 — Servicezeile

   Papierweiss, klein, sachlich. Trägt Ort, Zeiten und Nummer — die drei
   Angaben, wegen derer Leute sonst anrufen.
   -------------------------------------------------------------------------- */

.hs-servicezeile {
	background: var(--hs-papier);
	border-bottom: 1px solid var(--hs-grau-20);
	font-size: var(--hs-klein);
	color: var(--hs-grau-70);
}
.hs-servicezeile__inhalt {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hs-s2) var(--hs-s8);
	align-items: center;
	min-height: 40px;
	padding-block: var(--hs-s2);
}
.hs-servicezeile__eintrag {
	display: inline-flex;
	align-items: center;
	gap: var(--hs-s2);
	color: inherit;
	text-decoration: none;
}
a.hs-servicezeile__eintrag:hover { color: var(--hs-orange-tief); }
.hs-servicezeile__eintrag .hs-icon { color: var(--hs-grau-45); }

@media (max-width: 900px) {
	.hs-servicezeile__eintrag--zeiten { display: none; }
}

/* --------------------------------------------------------------------------
   B3 — Kopfbereich
   -------------------------------------------------------------------------- */

/* Divi reserviert oben Platz für seinen eigenen fixierten Kopf:
   `.et_fixed_nav.et_show_nav #page-container { padding-top: 80px }` aus
   `et-divi-dynamic.css`. Diesen Kopf gibt es hier nicht — unserer ist `sticky`
   und steht im Fluss. Ohne Gegenmassnahme bleibt oben ein leerer weisser
   Streifen von exakt 80 px.

   Behoben wird das in der functions.php, indem die beiden Body-Klassen
   entfernt werden — dann trifft Divis Regel gar nicht mehr zu. Diese Zeile ist
   nur das Sicherheitsnetz, falls die Klassen doch einmal wieder auftauchen.
   Zwei Klassen plus Body, damit die Spezifität reicht. */
body.et_fixed_nav.et_show_nav #page-container,
html body #page-container { padding-top: 0 !important; }

.hs-kopf {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--hs-weiss);
	border-bottom: 1px solid var(--hs-grau-20);
}

/* Mit eingeblendeter Admin-Leiste darf der klebende Kopf nicht darunter
   verschwinden. WordPress setzt dort 32 px, auf schmalen Geräten 46 px. */
body.admin-bar .hs-kopf { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .hs-kopf { top: 46px; }
}

/* Logo links, Bedienknöpfe rechts. Das Suchfeld sass früher dazwischen und
   nahm dauerhaft Platz für etwas, das selten gebraucht wird — es klappt jetzt
   auf Knopfdruck unter der Leiste auf. */
.hs-kopf__leiste {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hs-s6);
	padding-block: var(--hs-s3);
}

.hs-kopf__logo { display: block; line-height: 0; }
.hs-kopf__logo img {
	display: block;
	/* ⚠ BEWUSSTE ABWEICHUNG VOM CD, Kundenentscheid 2026-08-02.
	   CD S. 11 verlangt im Shop-Header 220–260 px Breite. 150 px ist das
	   absolute Digital-Minimum derselben Seite — darunter darf das Logo
	   nirgends fallen. Bei 2,44 : 1 ergibt das 62 px Höhe.
	   Wer das zurückdreht: 220px ist der CD-konforme Wert. */
	width: 150px;
	height: auto;
}

/* Kein Kompaktieren beim Scrollen mehr — siehe Begründung in assets/hs.js.
   Kurz: Servicezeile und Logo standen im normalen Fluss, ihr Ein- und
   Ausblenden verschob das Layout, und die Richtungserkennung ohne Hysterese
   liess den Kopf sichtbar zittern. Die Servicezeile scrollt von selbst weg,
   weil sie über dem klebenden Kopf steht. */

/* --------------------------------------------------------------------------
   B4 — Suche
   -------------------------------------------------------------------------- */

/* Der Suchbereich klappt unter der Kopfleiste auf. Die Höhe steuert das
   Skript über die Bildwiederholung — kein CSS-Übergang, weil die in diesem
   Projekt schon sichtbares Ruckeln erzeugt haben. */
.hs-suchbereich {
	overflow: hidden;
	border-top: 1px solid var(--hs-grau-20);
	background: var(--hs-papier);
}
.hs-suchbereich[hidden] { display: none; }
.hs-suchbereich .hs-inhalt { padding-block: var(--hs-s4); }

.hs-suche {
	display: flex;
	gap: var(--hs-s2);
	align-items: stretch;
	max-width: 720px;
	margin-inline: auto;
	background: var(--hs-weiss);
	border: 1px solid var(--hs-grau-45);
}

.hs-suche__zu {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--hs-touch-min);
	min-height: var(--hs-touch-min);
	border: 0;
	background: none;
	color: var(--hs-grau-70);
	cursor: pointer;
}
.hs-suche__zu:hover { color: var(--hs-anthrazit); }
.hs-suche:focus-within { outline: 2px solid var(--hs-orange); outline-offset: 2px; }

.hs-suche__feld {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--hs-touch-min);
	padding: 0 var(--hs-s4);
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--hs-text);
	color: var(--hs-anthrazit);
}
.hs-suche__feld:focus { outline: none; }         /* Ring liegt am Elternteil */
.hs-suche__feld::placeholder { color: var(--hs-grau-45); }

.hs-suche__knopf {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--hs-touch-min);
	min-height: var(--hs-touch-min);
	border: 0;
	background: var(--hs-anthrazit);
	color: var(--hs-weiss);
	cursor: pointer;
}
.hs-suche__knopf:hover { background: var(--hs-orange); color: var(--hs-schwarz); }

/* --------------------------------------------------------------------------
   B5 — Konto, Warenkorb, Menüknopf
   -------------------------------------------------------------------------- */

.hs-kopf__aktionen { display: flex; align-items: center; gap: var(--hs-s2); }

.hs-kopfknopf {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: var(--hs-touch-min);
	min-height: var(--hs-touch-min);
	padding: var(--hs-s1) var(--hs-s2);
	border: 0;
	background: none;
	color: var(--hs-anthrazit);
	font-family: var(--hs-font-text);
	font-size: var(--hs-label);
	text-decoration: none;
	cursor: pointer;
}
.hs-kopfknopf:hover { color: var(--hs-orange-tief); }
.hs-kopfknopf__wort { letter-spacing: .02em; }

.hs-warenkorb__zahl {
	position: absolute;
	top: 0; right: 2px;
	min-width: 20px;
	padding: 0 5px;
	border-radius: var(--hs-radius-pill);   /* Pillen sind die Ausnahme */
	background: var(--hs-orange);
	color: var(--hs-schwarz);               /* auf Orange steht Schwarz */
	font-size: var(--hs-label);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 20px;
	text-align: center;
}
.hs-warenkorb__zahl--leer { display: none; }

.hs-burger { display: none; }

/* --------------------------------------------------------------------------
   B6 — Sortimentsnavigation
   -------------------------------------------------------------------------- */

.hs-hauptnav { border-top: 1px solid var(--hs-grau-20); }

/* Elf Punkte auf einer Zeile. Schrift und Abstände schrumpfen mit der Breite
   mit, damit nichts umbricht — unterhalb von 1024 px übernimmt das Schiebemenü.
   Am Livesystem gemessen: bei 1265 px brachen die Punkte sonst auf zwei Zeilen. */
.hs-hauptnav__liste {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 0 clamp(8px, 1.1vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.hs-hauptnav__liste > li { position: relative; }
.hs-hauptnav__liste a {
	display: flex;
	align-items: center;
	min-height: var(--hs-touch-min);
	padding: var(--hs-s2) 0;
	border-bottom: 3px solid transparent;
	color: var(--hs-anthrazit);
	font-family: var(--hs-font-titel);
	font-size: clamp(0.8125rem, 0.42vw + 0.63rem, 0.9375rem);
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
}
.hs-hauptnav__liste a:hover { border-bottom-color: var(--hs-grau-45); }
.hs-hauptnav__liste .current-menu-item > a,
.hs-hauptnav__liste .current-menu-parent > a {
	border-bottom-color: var(--hs-orange);
}

/* Zweite Ebene als aufklappende Liste */
.hs-hauptnav__liste .sub-menu {
	position: absolute;
	top: 100%; left: 0;
	z-index: 20;
	min-width: 240px;
	margin: 0;
	padding: var(--hs-s2) 0;
	background: var(--hs-weiss);
	border: 1px solid var(--hs-grau-20);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
	list-style: none;
	visibility: hidden;
	opacity: 0;
}
.hs-hauptnav__liste > li:hover > .sub-menu,
.hs-hauptnav__liste > li:focus-within > .sub-menu { visibility: visible; opacity: 1; }
.hs-hauptnav__liste .sub-menu a {
	min-height: 40px;
	padding: var(--hs-s2) var(--hs-s4);
	border-bottom: 0;
	font-family: var(--hs-font-text);
	font-weight: 400;
}
.hs-hauptnav__liste .sub-menu a:hover { background: var(--hs-papier); }

/* --------------------------------------------------------------------------
   B7 — Menü auf schmalen Geräten
   -------------------------------------------------------------------------- */

.hs-mobilmenue {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	z-index: 150;
	width: min(360px, 88vw);
	overflow-y: auto;
	background: var(--hs-weiss);
	border-left: 1px solid var(--hs-grau-20);
	transform: translateX(100%);        /* Startlage, danach führt das Skript */
}
.hs-mobilmenue[hidden] { display: none; }

.hs-mobilmenue__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--hs-s4);
	border-bottom: 1px solid var(--hs-grau-20);
}
.hs-mobilmenue__titel {
	font-family: var(--hs-font-titel);
	font-size: var(--hs-h3);
	font-weight: 600;
}
.hs-mobilmenue__liste { margin: 0; padding: 0; list-style: none; }
.hs-mobilmenue__liste a {
	display: flex;
	align-items: center;
	min-height: var(--hs-touch-min);
	padding: var(--hs-s3) var(--hs-s4);
	border-bottom: 1px solid var(--hs-grau-20);
	color: var(--hs-anthrazit);
	font-family: var(--hs-font-titel);
	font-weight: 600;
	text-decoration: none;
}
.hs-mobilmenue__liste .sub-menu { margin: 0; padding: 0; list-style: none; }
.hs-mobilmenue__liste .sub-menu a {
	padding-left: var(--hs-s8);
	font-family: var(--hs-font-text);
	font-weight: 400;
	color: var(--hs-grau-70);
}
/* Dritte Ebene noch eine Stufe eingerückt und leiser. */
.hs-mobilmenue__liste .sub-menu .sub-menu a {
	padding-left: var(--hs-s12);
	font-size: var(--hs-klein);
	color: var(--hs-grau-45);
}
.hs-mobilmenue__fuss { padding: var(--hs-s6) var(--hs-s4); }
.hs-mobilmenue__fuss a {
	display: inline-flex;
	align-items: center;
	gap: var(--hs-s2);
	color: var(--hs-orange-tief);
	font-weight: 600;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Schiebemenü als Drill-down (das Skript baut es, siehe hs.js).

   Vorbild bogensportdiscount.ch: statt alle Ebenen offen zu zeigen — auf dem
   Handy eine endlose Liste — blättert man eine Ebene nach der anderen auf.
   Tippen auf eine Kategorie mit Kindern schiebt zur Unterebene (Chevron ›),
   «Zurück» führt hoch, «Alle … anzeigen» öffnet die Kategorie selbst. Immer
   nur EINE Ebene sichtbar.

   Die verschachtelte WP-Liste (`.hs-mobilmenue__liste`) bleibt als No-JS-
   Rückfall im Markup und wird nur verborgen, wenn das Skript die Panels gebaut
   hat (`.hs-mm-aktiv`). Alles hier ist aufs Schiebemenü begrenzt — die
   Desktop-Hovernav bleibt unberührt. Geschoben wird per rAF aus hs.js
   (Kundenvorgabe JS statt CSS-Übergang); hier steht nur die Ruhelage.
   -------------------------------------------------------------------------- */
.hs-mobilmenue.hs-mm-aktiv:not([hidden]) {
	display: flex;
	flex-direction: column;
	overflow: hidden;            /* das Fenster scrollt, nicht die ganze Lade */
}
.hs-mobilmenue.hs-mm-aktiv .hs-mobilmenue__liste { display: none; }   /* Rückfall aus */

.hs-mm-fenster {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;            /* Panels liegen übereinander und schieben */
}
.hs-mm-panel {
	position: absolute;
	inset: 0;
	display: none;               /* Ruhelage: aus dem Fokus und aus der Tab-Folge */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(100%);
}
.hs-mm-panel.hs-mm-panel--aktiv {
	display: block;
	transform: translateX(0);
}
.hs-mm-liste { margin: 0; padding: 0; list-style: none; }

/* Eine Zeile — gleiche Optik wie die Rückfall-Liste. */
.hs-mm-knopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hs-s2);
	width: 100%;
	min-height: var(--hs-touch-min);
	padding: var(--hs-s3) var(--hs-s4);
	border: 0;
	border-bottom: 1px solid var(--hs-grau-20);
	background: transparent;
	color: var(--hs-anthrazit);
	font-family: var(--hs-font-titel);
	font-size: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.hs-mm-knopf > span { flex: 1 1 auto; }
.hs-mm-knopf svg { flex: 0 0 auto; }
.hs-mm-knopf:hover,
.hs-mm-knopf:focus-visible { color: var(--hs-orange); }
.hs-mm-knopf:focus-visible { outline: 3px solid var(--hs-orange); outline-offset: -3px; }

/* «Zurück» — leiser, Pfeil links. */
.hs-mm-pos--zurueck .hs-mm-knopf {
	justify-content: flex-start;
	color: var(--hs-grau-70);
}
/* «Alle … anzeigen» — der Weg in die Kategorie selbst, als Akzent. */
.hs-mm-pos--alle .hs-mm-knopf { color: var(--hs-orange-tief); }

.hs-schleier {
	position: fixed;
	inset: 0;
	z-index: 140;
	background: var(--hs-schwarz);
	opacity: 0;
}
.hs-schleier[hidden] { display: none; }
.hs-menue-offen { overflow: hidden; }

/* Ab hier reicht die Breite für elf Punkte nicht mehr — Schiebemenü. */
@media (max-width: 1024px) {
	.hs-hauptnav { display: none; }
	.hs-burger { display: inline-flex; }
}

@media (max-width: 900px) {
	.hs-kopf__leiste { gap: var(--hs-s4); }
}

@media (max-width: 640px) {
	/* 150 px ist bereits das Minimum — auf dem Handy bleibt es dabei. */

	/* Das Wort wird WEGGEKLIPPT, nicht auf `display: none` gesetzt. Bis zum
	   2026-08-18 stand hier `display: none`, und das nahm den Text auch der
	   Sprachausgabe weg: Der Knopf «Suche» hatte auf dem Handy überhaupt
	   keinen Namen mehr — ein Screenreader las «Schaltfläche». Geklippt bleibt
	   er lesbar und ist trotzdem unsichtbar. */
	.hs-kopfknopf__wort {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   B8 — Knöpfe: eine Ergänzung für dunklen Grund
   -------------------------------------------------------------------------- */

.hs-btn--dunkel {
	border: 1px solid var(--hs-weiss);
	background: transparent;
	color: var(--hs-weiss);
}
.hs-btn--dunkel:hover { background: var(--hs-weiss); color: var(--hs-anthrazit); }

/* --------------------------------------------------------------------------
   B9 — Startseite: Hero

   Bild als Hintergrund, Text darüber. Der Schwarzverlauf von links sichert den
   Kontrast unabhängig davon, welches Motiv später eingesetzt wird.
   -------------------------------------------------------------------------- */

.hs-hero { position: relative; background: var(--hs-schwarz); overflow: hidden; }

.hs-hero__bild { position: absolute; inset: 0; }
.hs-hero__bild picture,
.hs-hero__bild img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
}
.hs-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(0, 0, 0, .88) 0%,
		rgba(0, 0, 0, .72) 38%,
		rgba(0, 0, 0, .28) 72%,
		rgba(0, 0, 0, .10) 100%
	);
}

.hs-hero__inhalt {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(420px, 56vh, 620px);
	padding-block: var(--hs-s16);
	max-width: min(var(--hs-inhalt-max), 100%);
}
.hs-hero__titel {
	max-width: 16ch;
	margin: 0 0 var(--hs-s6);
	color: var(--hs-weiss);
	font-family: var(--hs-font-titel);
	font-size: var(--hs-h1);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.022em;
}
.hs-hero__lead {
	max-width: 46ch;
	margin: 0 0 var(--hs-s8);
	color: rgba(255, 255, 255, .88);
	font-size: var(--hs-lead);
	font-weight: 300;
	line-height: 1.55;
}
.hs-hero__knoepfe { display: flex; flex-wrap: wrap; gap: var(--hs-s3); }

/* --------------------------------------------------------------------------
   B10 — Versprechen: die vier Punkte unter dem Hero
   -------------------------------------------------------------------------- */

.hs-versprechen {
	padding-block: var(--hs-s12);
	border-bottom: 1px solid var(--hs-grau-20);
}
/* Vier Versprechen in zwei Spalten — linksbündig statt zentriert: zentrierter
   Fliesstext ist über mehrere Zeilen schwerer zu lesen, weil der Zeilenanfang
   wandert.

   Zwei Spalten und nicht drei, seit es vier Kacheln sind: bei drei Spalten
   stünde die vierte allein in einer zweiten Reihe, und die Lücke daneben liest
   sich wie ein Fehler. Vier nebeneinander wären ebenfalls möglich, aber die
   Texte sind jetzt vier bis fünf Zeilen lang statt zwei — in einer 300-px-Spalte
   werden daraus acht. */
/* `--hs-s10` gibt es nicht, und das war hier bis zum 2026-08-17 abends ein
   stiller Totalausfall: Bei `gap: var(--hs-s12) var(--hs-s10)` macht die eine
   unbekannte Variable die GANZE Angabe ungültig — auch der Zeilenabstand fiel
   weg. Gemessen stand `gap: normal`, die vier Kacheln stiessen aneinander.
   Beim Prüfen war es unsichtbar, weil Spaltenbreiten und Umbrüche gemessen
   wurden, aber nie der Abstand selbst. Die Abstandsskala kennt 4, 8, 12, 16,
   24, 32, 48, 64, 96 — 40 kommt darin nicht vor. */
.hs-versprechen__liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hs-s12);
	margin: 0; padding: 0;
	list-style: none;
}
/* 58ch statt der früheren 40: Die Leseregel begrenzt auf 45–75 Zeichen, und
   40 war für die kurzen Sätze von vorher gedacht. In einer halb so breiten
   Spalte wie jetzt bliebe der Absatz sonst schmal in einer breiten Spalte
   stehen, während die Überschrift darüber die volle Breite nimmt. */
.hs-versprechen__punkt p {
	margin: var(--hs-s3) 0 0;
	max-width: 58ch;
	color: var(--hs-grau-70);
	font-size: var(--hs-klein);
	line-height: 1.6;
}
/* `center` bleibt. Ein Versuch mit `flex-start` sollte den Umbruch der neuen,
   längeren Überschriften abfangen — nur brechen die in zwei Spalten gar nicht
   um (die längste misst 343 px in einer 633er Spalte). Gemessen stand das
   Symbol danach 6.3 px unter der Schriftmitte, sichtbar schief. Statt die
   Ausrichtung an einen Umbruch anzupassen, der nicht stattfindet, weicht
   weiter unten die Spaltenzahl früher — dann bricht auch auf dem Tablet
   nichts um. */
.hs-versprechen__titel {
	display: flex;
	align-items: center;
	gap: var(--hs-s3);
	margin: 0;
	font-family: var(--hs-font-titel);
	font-size: var(--hs-h4);
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	line-height: 1.3;
}
.hs-versprechen__titel .hs-icon { color: var(--hs-orange-tief); flex: 0 0 auto; }

/* Eine Spalte schon ab 820 px statt erst ab 560: Bei zwei Spalten misst eine
   Spalte dort noch 330 px, die längste Überschrift 343 — sie bräche um, und
   der 58ch-Absatz stünde ohnehin schon in Handybreite. Eine breite Spalte
   liest sich hier besser als zwei schmale. */
@media (max-width: 820px) {
	.hs-versprechen__liste { grid-template-columns: 1fr; gap: var(--hs-s8); }
}
@media (max-width: 560px) {
	.hs-versprechen__liste { gap: var(--hs-s6); }
}

/* --------------------------------------------------------------------------
   B13 — Fotobänder zwischen den Abschnitten

   Kundenwunsch vom 2026-08-17 im Wortlaut: «du siehst dort jeweils gaps mit
   Hintergrundbildern». Gemeint ist der Rhythmus der alten Seite — Inhalt,
   schmaler Bildstreifen, Inhalt.

   WARUM DAS GERÜST HIER STEHT UND NICHT IN dunkel.css.
   `template-parts/startseite.php` ist die gemeinsame Quelle BEIDER Fassungen
   (siehe ihren Dateikopf), und `front-page.php` sagt zu: an der hellen
   Fassung ändert die dunkle nichts. Der Notausgang `hs_startseite_dunkel =
   nein` schaltet nur `dunkel.css` ab — das Markup bleibt. Stünde die Höhe,
   der Zuschnitt und der Überlauf dort, stünden nach dem Umlegen des Schalters
   drei 1920 px breite Bilder in voller Grösse in der hellen Startseite; ein
   globales `img { max-width: 100% }` gibt es in dieser Datei nicht.

   WARUM `img` MIT `object-fit` UND KEIN CSS-HINTERGRUND.
   Nur so bleiben `srcset`, WebP und `loading="lazy"` erhalten — `hs_bild()`
   liefert das fertig. Ein `background-image` lädt immer dieselbe Datei.

   WARUM RECHTS VERANKERT.
   Am 2026-08-17 über acht Spalten Standardabweichung gemessen: in allen fünf
   Motiven liegt links das Wabenmuster (Streuung 5–8 von 255) und rechts ab
   x≈960 das Motiv (Streuung 28–67). Solange das Fenster breiter ist als
   Bandhöhe × 6, schneidet `cover` nur oben und unten und diese Angabe tut
   nichts. Darunter, also auf dem Handy, schneidet sie waagrecht: rechts
   verankert bleibt das Foto stehen, mittig bliebe das blosse Muster.

   WAS DEN ÜBERGANG TRÄGT, IST NICHT DIE DÄMPFUNG, SONDERN DIE KANTE.
   Ein flächiger Schleier macht das Band nur dunkler. Fremd wirkt es wegen der
   zwei harten Querkanten. Deshalb läuft es oben und unten über 22 % seiner
   Höhe in die Farbe des jeweiligen Nachbarn aus und ist am äussersten Rand
   exakt dessen Farbe — dort gibt es dann gar keine Kante mehr. Steht in
   `--hs-band-oben`/`--hs-band-unten` die falsche Farbe, ist die Naht zurück,
   nur unschärfer und damit schwerer zu finden.

   152 UND NICHT 153 PX. Die alte Seite misst 153. Das CD verlangt Abstände
   als Vielfaches von 4; ein Pixel ist unsichtbar, die Regel bleibt heil. Nach
   unten 112 px, damit der Streifen auf dem Handy nicht ein Viertel der
   Bildschirmhöhe einnimmt.
   -------------------------------------------------------------------------- */

.hs-band {
	position: relative;
	overflow: hidden;
	height: clamp(112px, 10vw, 152px);

	/* Die beiden Nachbarflächen. Vorgabe ist die helle Fassung; dunkel.css
	   stellt sie um, die Modifikatoren unten schalten auf Papier. */
	--hs-band-oben:  var(--hs-weiss);
	--hs-band-unten: var(--hs-weiss);

	/* Anteil Schwarz über dem Motiv. 0 ist der Regelfall — die Serie ist
	   bereits dunkel abgestimmt. */
	--hs-band-daempfung: 0;

	/* Die halbe Wanderstrecke der Parallaxe. Sie steht NUR hier: `top` und
	   `height` der Bildhülle hängen beide daran. Stünde die Zahl im
	   JavaScript ein zweites Mal, liefen beide beim ersten Ändern auseinander
	   und man sähe die Kante des Rahmens durchblitzen. */
	--hs-band-hub: clamp(12px, 1.3vw, 24px);
}

.hs-band--oben-papier  { --hs-band-oben:  var(--hs-papier); }
.hs-band--unten-papier { --hs-band-unten: var(--hs-papier); }

/* Für Nachbarn, die keine einheitliche Fläche sind (der Zweispalt-Block ist
   links Foto und rechts Fläche). Eine durchgehende Farbe wäre dort zur Hälfte
   falsch — dann lieber gar keine. */
.hs-band--unten-offen { --hs-band-unten: transparent; }

/* Nur für Motive über 2.0 : 1 gegen ihre Nachbarfläche. Gemessen, nicht
   geschätzt: band-06 steht ungedämpft bei 2.47 : 1 gegen Ebene 1, bei 14 %
   Schwarz auf 2.00 und bei 20 % auf 1.82. 18 % liegen bei rund 1.88 — unter
   der Grenze, mit Spielraum, ohne dem Motiv die Zeichnung zu nehmen. */
.hs-band--hell { --hs-band-daempfung: .18; }

/* Der hohe Streifen — ein Bild zwischen zwei Abschnitten, nicht nur eine Naht.
   Kundenvorgabe vom 2026-09-14: «ganzformatig in maximal 250-300px Höhe ein
   Bild […] über die volle Breite». 288 px ab 1920 px Fensterbreite, darunter
   15 vw, nie unter 160 px. Die Bildhülle rechnet in Prozent des Rahmens und
   wächst von selbst mit. Gesetzt über `hs_band( …, array( 'hoch' => true ) )`. */
.hs-band--hoch { height: clamp(160px, 15vw, 288px); }

/* Die Bildhülle ragt oben und unten je um den Hub über den Rahmen hinaus.
   Das ist der Spielraum, in dem die Parallaxe verschieben darf, ohne dass
   eine Kante frei wird. Ohne JavaScript steht das Bild still und zeigt seinen
   mittleren Ausschnitt — ein vollständiger Zustand, kein Notbetrieb. */
.hs-band__bild {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--hs-band-hub));
	height: calc(100% + 2 * var(--hs-band-hub));
	will-change: transform;
}
.hs-band__bild picture,
.hs-band__bild img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: right center;
}

/* Eine einzige Schicht für drei Aufgaben. Die Liste ist von oben nach unten
   zu lesen: die beiden Kantenverläufe liegen ÜBER der Dämpfung. Läge die
   Dämpfung darüber, bliebe am äussersten Rand ein Grauschleier statt der
   reinen Nachbarfarbe — und die Naht wäre zurück. */
.hs-band::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom, var(--hs-band-oben)  0%, transparent 22%),
		linear-gradient(to top,    var(--hs-band-unten) 0%, transparent 22%),
		linear-gradient(rgba(0, 0, 0, var(--hs-band-daempfung)),
		                rgba(0, 0, 0, var(--hs-band-daempfung)));
}

/* Sicherheitsnetz für den Fall, dass beim Umschalten während des Besuchs ein
   Wert stehengeblieben ist. */
@media (prefers-reduced-motion: reduce) {
	.hs-band__bild { transform: none; }
}

/* Das Band ist Schmuck und kostet Toner. */
@media print {
	.hs-band { display: none; }
}

/* --- Neu eingetroffen ----------------------------------------------------- */

/* Der Knopf steht mittig unter dem Raster.

   Drei Anläufe, und die ersten beiden behandelten das Symptom:

   1. `text-align: center` genügte nicht — WooCommerce baut `ul.products` mit
      gefloateten Kacheln, und ein Block nach einem nicht aufgehobenen Float
      bekommt eine VERKÜRZTE Zeilenbox. Zentriert wurde innerhalb des Restes.
   2. `clear` plus `flex` behob den Float, aber der Knopf hing weiter links.

   Die eigentliche Ursache ist `max-width: 68ch` auf `p` (Abschnitt B3, die
   Leseregel für Fliesstext). Bei 17 px sind das 747 px — der Absatz endete bei
   747 von 1265 verfügbaren Pixeln, und `justify-content: center` zentrierte
   sauber, nur eben in dieser zu schmalen Box. Am 2026-08-07 am gerenderten
   Element nachgemessen, nicht geraten.

   Deshalb `max-width: none`: Dieser Absatz trägt keinen Fliesstext, sondern
   einen Knopf. Eine Zeilenlängenregel hat dort nichts zu suchen. Die Regel
   selbst bleibt für alles andere unverändert — sie ist richtig, nur nicht hier.

   `inline-flex` am Knopf bleibt, damit die Mindesthöhe von 44 px greift. */
.hs-neu__mehr {
	clear: both;
	display: flex;
	justify-content: center;
	max-width: none;
	margin: var(--hs-s12) 0 0;
}
.hs-neu__mehr .hs-btn { display: inline-flex; align-items: center; justify-content: center; }

/* --------------------------------------------------------------------------
   B11 — Abschnitte
   -------------------------------------------------------------------------- */

.hs-abschnitt { padding-block: var(--hs-s16); }
.hs-abschnitt--papier { background: var(--hs-papier); }

.hs-abschnitt__kopf { margin-bottom: var(--hs-s8); max-width: 60ch; }
.hs-abschnitt__kopf h2 {
	margin: 0 0 var(--hs-s3);
	font-family: var(--hs-font-titel);
	font-size: var(--hs-h2);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.016em;
}
.hs-abschnitt__lead {
	margin: 0;
	color: var(--hs-grau-70);
	font-size: var(--hs-lead);
	font-weight: 300;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   B12 — Sortimentskacheln
   -------------------------------------------------------------------------- */

.hs-kacheln {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--hs-s4);
	margin: 0; padding: 0;
	list-style: none;
}

.hs-kachel { background: var(--hs-anthrazit); }

/* --- Abgerundete Ecken an den Sortimentskacheln ---------------------------

   ACHTUNG, BEWUSSTE ABWEICHUNG VOM CD (protokolliert als F-CD4). Das Manual
   sagt: «Flächen, Bilder, Karten und Buttons haben 0 px Ecken. Badges und
   Status-Pillen sind vollrund. Dazwischen gibt es nichts»
   (80_CD-UMSETZUNG.md:176-177), und `--hs-radius: 0` setzt das um.

   Der Kunde hat am 2026-08-17 beim Vergleich mit www.huegisport.ch
   ausdrücklich die abgerundeten Kanten der alten Kategoriekacheln verlangt.
   Nachgemessen an der alten Seite: 65 px an oben-links und unten-rechts,
   25 px an oben-rechts und unten-links. Die Asymmetrie ist der ganze Punkt —
   vier gleiche Radien sähen aus wie eine Standardkachel, die diagonale
   Verteilung gibt der Fläche eine Richtung.

   WARUM EIN EIGENER WERT UND NICHT `--hs-radius`.
   `--hs-radius` steht an sechs Stellen in dieser Datei (Knöpfe, Bilder,
   Auswahlfeld, Formularfelder). Würde es geändert, liefe die Abweichung durch
   den halben Shop, und niemand könnte später noch sagen, welche Rundung
   Kundenwunsch war und welche Kollateralschaden. So ist sie auf genau ein
   Bauteil begrenzt und in einer Zeile zurücknehmbar.

   WARUM DIE RADIEN MITSKALIEREN.
   Die Kachel misst auf dem Schreibtisch rund 302 px und im Einspaltenraster
   des Handys nur rund 170 px. 65 px fest wären dort mehr als ein Drittel der
   Breite — aus der Ecke würde ein Kreisbogen. Die Klammer hält das Verhältnis
   65 : 25 = 2.6 : 1 über die ganze Spanne (5vw / 1.9vw = 2.63) und deckelt
   bei den Werten der alten Seite.

   Die Rundung steht an `.hs-kachel` UND an `.hs-kachel__flaeche`: die Fläche
   hat `overflow: hidden` und beschneidet damit Bild und Verlauf, aber die
   Kachel darunter trägt eine eigene Hintergrundfarbe und stünde sonst mit
   eckigen Ecken hinter der runden Fläche hervor. Der Fokusrahmen folgt der
   Rundung von selbst — das ist der Grund, warum hier `border-radius` steht
   und nicht `clip-path`.

   NICHT übernommen aus dem Entwurf: eine zweite Regel
   `.hs-kachel:not(:has(.hs-kachel__bild)) .hs-kachel__flaeche { border-radius:
   inherit }` für den bildlosen Platzhalter. Sie hätte den Wert gesetzt, den
   die Regel unten ohnehin schon setzt — dafür aber eine `:has()`-Abhängigkeit
   eingezogen. Eine Regel, die nichts ändert, ist keine Absicherung. */
.hs-kachel,
.hs-kachel__flaeche {
	border-radius:
		clamp(24px, 5vw, 65px)
		clamp(9px, 1.9vw, 25px);
}

.hs-kachel__flaeche {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	color: var(--hs-weiss);
	text-decoration: none;
}

.hs-kachel__bild { position: absolute; inset: 0; }
.hs-kachel__bild picture,
.hs-kachel__bild img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
}

/* Verlauf von oben: die Beschriftung steht im Bild und braucht Grund unter den
   Füssen. Ohne ihn hängt der Kontrast am Zufall des jeweiligen Motivs. */
.hs-kachel__flaeche::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, .74) 0%,
		rgba(0, 0, 0, .46) 34%,
		rgba(0, 0, 0, .18) 62%,
		rgba(0, 0, 0, .34) 100%
	);
}

.hs-kachel__text {
	position: absolute;
	inset: 0 auto auto 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--hs-s1);
	padding: var(--hs-s4);
}
.hs-kachel__name {
	font-family: var(--hs-font-titel);
	font-size: var(--hs-h4);
	font-weight: 600;
	letter-spacing: .11em;
	line-height: 1.3;
	text-transform: uppercase;
	text-wrap: balance;
}
/* Beim Überfahren wird der Kategoriename orange.

   Ohne diese Regel erbt er `a:hover { color: var(--hs-schwarz) }` aus B2 —
   also SCHWARZ, und zwar auf einem abgedunkelten Foto. Am 2026-08-07 mit der
   Maus nachgemessen: `#000000` auf dem Kachelbild, praktisch unlesbar. Das war
   kein dunkelspezifisches Problem; es galt in beiden Fassungen, ist auf hellem
   Grund nur nie aufgefallen, weil die Kachel selbst immer dunkel ist.

   Orange auf dem Verlauf (oben `rgba(0,0,0,.62)` über dem Foto) liegt bei rund
   6,9 : 1 gegen Schwarz — die Beschriftung sitzt genau in diesem obersten,
   dunkelsten Streifen. */
a.hs-kachel__flaeche:hover .hs-kachel__name,
a.hs-kachel__flaeche:focus-visible .hs-kachel__name {
	color: var(--hs-orange);
}

/* Beim Überfahren wird der Verlauf heller — das Bild tritt hervor. Bewusst
   ohne Skalierung: ohne Übergang wäre es ein Sprung, und CSS-Übergänge haben
   in diesem Projekt schon sichtbares Ruckeln erzeugt. Ein Zustandswechsel
   braucht keine Bewegung. */
a.hs-kachel__flaeche:hover::after,
a.hs-kachel__flaeche:focus-visible::after {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, .62) 0%,
		rgba(0, 0, 0, .32) 34%,
		rgba(0, 0, 0, .10) 62%,
		rgba(0, 0, 0, .26) 100%
	);
}
a.hs-kachel__flaeche:focus-visible {
	outline: 2px solid var(--hs-orange);
	outline-offset: 2px;
}

/* Ohne Bild — bis der Katalog importiert ist, oder falls ein Motiv fehlt.
   Grau 70 statt Grau 45: Grau 45 auf Weiss ergibt 3,36 : 1 und verfehlt die
   Grenze von 4,5. Nachgerechnet am Livesystem nach WCAG 2.1. */
.hs-kachel:not(:has(.hs-kachel__bild)) { background: var(--hs-weiss); }
.hs-kachel:not(:has(.hs-kachel__bild)) .hs-kachel__flaeche {
	aspect-ratio: auto;
	min-height: 88px;
	border: 1px dashed var(--hs-grau-20);
	color: var(--hs-grau-70);
}
.hs-kachel:not(:has(.hs-kachel__bild)) .hs-kachel__flaeche::after { display: none; }
.hs-kachel:not(:has(.hs-kachel__bild)) .hs-kachel__text { position: static; }

@media (max-width: 900px) { .hs-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 640px) {
	.hs-kacheln { gap: var(--hs-s2); }
	.hs-kachel__text { padding: var(--hs-s3); }
	.hs-kachel__name { letter-spacing: .06em; }
}

/* Auf dem Handy eine Spalte. Am Livesystem gegengemessen: zwei Spalten ergeben
   bei 375 px Kacheln von 164 × 123 px — dort bricht «Koffer, Taschen, Hüllen»
   dreizeilig um und die Beschriftung erdrückt das Bild, das der eigentliche
   Inhalt der Kachel ist. Eine Spalte liefert 335 × 252 px. Der längere
   Scrollweg (8'445 statt 6'027 px) ist der Preis dafür und vertretbar. */
@media (max-width: 480px) {
	.hs-kacheln { grid-template-columns: 1fr; gap: var(--hs-s4); }
	.hs-kachel__text { padding: var(--hs-s4); }
	.hs-kachel__name { letter-spacing: .11em; }
}

/* --------------------------------------------------------------------------
   B13 — Zweispaltiger Block mit Bild
   -------------------------------------------------------------------------- */

.hs-zweispalt { display: grid; grid-template-columns: 1fr 1fr; }
.hs-zweispalt__bild picture,
.hs-zweispalt__bild img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
	min-height: 320px;
}
.hs-zweispalt__text {
	display: flex;
	align-items: center;
	background: var(--hs-anthrazit);
	color: var(--hs-weiss);
}
.hs-zweispalt__inhalt {
	max-width: 52ch;
	padding: var(--hs-s16) var(--hs-s12);
}
.hs-zweispalt__inhalt h2 {
	margin: 0 0 var(--hs-s4);
	font-family: var(--hs-font-titel);
	font-size: var(--hs-h2);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.016em;
}
.hs-zweispalt__inhalt p {
	margin: 0 0 var(--hs-s4);
	color: rgba(255, 255, 255, .82);
	line-height: 1.65;
}
.hs-zweispalt__inhalt .hs-btn--sekundaer {
	margin-top: var(--hs-s2);
	border-color: var(--hs-weiss);
	color: var(--hs-weiss);
}
.hs-zweispalt__inhalt .hs-btn--sekundaer:hover {
	background: var(--hs-weiss);
	color: var(--hs-anthrazit);
}

@media (max-width: 900px) {
	.hs-zweispalt { grid-template-columns: 1fr; }
	.hs-zweispalt__inhalt { padding: var(--hs-s12) var(--hs-s6); }
}

/* --------------------------------------------------------------------------
   B14 — Teaser und Kennzahlen
   -------------------------------------------------------------------------- */

.hs-teaser {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hs-s8);
	margin: 0; padding: 0;
	list-style: none;
}
.hs-teaser__punkt { background: var(--hs-weiss); border: 1px solid var(--hs-grau-20); padding: var(--hs-s6); }
.hs-teaser__punkt h3 {
	display: flex;
	align-items: center;
	gap: var(--hs-s2);
	margin: 0 0 var(--hs-s3);
	font-family: var(--hs-font-titel);
	font-size: var(--hs-h3);
	font-weight: 600;
	letter-spacing: -.008em;
}
.hs-teaser__punkt h3 .hs-icon { color: var(--hs-orange-tief); }
.hs-teaser__punkt p { margin: 0 0 var(--hs-s4); color: var(--hs-grau-70); line-height: 1.6; }

.hs-laden { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--hs-s16); align-items: center; }
.hs-laden__text h2 {
	margin: 0 0 var(--hs-s4);
	font-family: var(--hs-font-titel);
	font-size: var(--hs-h2);
	font-weight: 700;
	letter-spacing: -.016em;
}
.hs-laden__text p { margin: 0 0 var(--hs-s6); color: var(--hs-grau-70); line-height: 1.65; }

.hs-laden__zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hs-s6); margin: 0; }
.hs-laden__zahlen dt {
	color: var(--hs-grau-45);
	font-size: var(--hs-label);
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.hs-laden__zahlen dd {
	margin: var(--hs-s1) 0 0;
	font-family: var(--hs-font-titel);
	font-size: var(--hs-h2);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

@media (max-width: 900px) {
	.hs-teaser { grid-template-columns: 1fr; }
	.hs-laden { grid-template-columns: 1fr; gap: var(--hs-s8); }
}

/* --------------------------------------------------------------------------
   B14b — Kategorieseiten

   Ein Aufbau für alle Ebenen: Hero mit dem Kategoriebild, darunter die
   Unterkategorien als Zeile, dann das Produktraster. Der Hero nutzt die
   Kopfbild-Serie der Altseite (2560 × 720) — bewusst ein schmales Band, damit
   die Ware nicht unter die Falz rutscht.
   -------------------------------------------------------------------------- */

.hs-kathero {
	position: relative;
	background: var(--hs-schwarz);
	overflow: hidden;
}
.hs-kathero__bild { position: absolute; inset: 0; }
.hs-kathero__bild picture,
.hs-kathero__bild img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
}
.hs-kathero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(0, 0, 0, .84) 0%,
		rgba(0, 0, 0, .62) 42%,
		rgba(0, 0, 0, .22) 78%,
		rgba(0, 0, 0, .08) 100%
	);
}
.hs-kathero__inhalt {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(200px, 24vw, 320px);
	padding-block: var(--hs-s12);
}
.hs-kathero__weg { margin-bottom: var(--hs-s2); }
.hs-kathero__weg a {
	color: rgba(255, 255, 255, .78);
	font-size: var(--hs-klein);
	text-decoration: none;
}
.hs-kathero__weg a::before { content: "\2190\00a0"; }
.hs-kathero__weg a:hover { color: var(--hs-orange); }

.hs-kathero__titel {
	max-width: 20ch;
	margin: 0;
	color: var(--hs-weiss);
	font-family: var(--hs-font-titel);
	font-size: var(--hs-h2);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.016em;
}
.hs-kathero__lead {
	max-width: 52ch;
	margin: var(--hs-s3) 0 0;
	color: rgba(255, 255, 255, .86);
	font-size: var(--hs-lead);
	font-weight: 300;
	line-height: 1.55;
}
.hs-kathero__zahl {
	margin: var(--hs-s3) 0 0;
	color: rgba(255, 255, 255, .72);
	font-size: var(--hs-klein);
	font-variant-numeric: tabular-nums;
}

/* --- Filterzeile: Unterkategorien und Sortierung in EINER Leiste ---------- */

.hs-abschnitt--liste { padding-block: var(--hs-s8) var(--hs-s16); }

.hs-filterleiste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hs-s4);
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: var(--hs-s4);
	margin-bottom: var(--hs-s4);
	border-bottom: 1px solid var(--hs-grau-20);
}
.hs-filterleiste__gruppe { flex: 1 1 auto; min-width: 0; }
.hs-filterleiste__sortierung { flex: 0 0 auto; }

.hs-unterkat {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hs-s2);
	margin: 0; padding: 0;
	list-style: none;
}
.hs-unterkat a {
	display: inline-flex;
	align-items: baseline;
	gap: var(--hs-s2);
	padding: 7px var(--hs-s3);
	border: 1px solid var(--hs-grau-20);
	background: var(--hs-weiss);
	color: var(--hs-anthrazit);
	font-family: var(--hs-font-text);
	font-size: var(--hs-klein);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}
.hs-unterkat a:hover {
	border-color: var(--hs-anthrazit);
	background: var(--hs-anthrazit);
	color: var(--hs-weiss);
}
.hs-unterkat a:hover .hs-unterkat__zahl { color: rgba(255, 255, 255, .7); }
.hs-unterkat__zahl {
	color: var(--hs-grau-45);
	font-size: 0.75rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* Sortierung: WooCommerce liefert ein Formular mit Auswahlfeld. */
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select {
	min-height: 38px;
	padding: 0 var(--hs-s6) 0 var(--hs-s3);
	border: 1px solid var(--hs-grau-45);
	border-radius: var(--hs-radius);
	background: var(--hs-weiss);
	font: inherit;
	font-size: var(--hs-klein);
	color: var(--hs-anthrazit);
	max-width: 100%;
}

.hs-listenkopf { margin-bottom: var(--hs-s6); }
.hs-listenkopf .woocommerce-result-count {
	margin: 0;
	color: var(--hs-grau-45);
	font-size: var(--hs-klein);
	font-variant-numeric: tabular-nums;
}

.hs-leer {
	padding: var(--hs-s12) 0;
	color: var(--hs-grau-70);
	font-size: var(--hs-lead);
	font-weight: 300;
}

/* --- Nachladen ------------------------------------------------------------ */

.hs-nachladen {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hs-s3);
	margin-top: var(--hs-s12);
}
.hs-nachladen__stand {
	margin: 0;
	color: var(--hs-grau-45);
	font-size: var(--hs-klein);
	font-variant-numeric: tabular-nums;
}
.hs-nachladen--laeuft .hs-btn { opacity: .6; cursor: progress; }
.hs-nachladen--fertig .hs-nachladen__stand::after {
	content: " \00b7 alle geladen";
}
.hs-nachladen--fehler::before {
	content: "Beim Nachladen ist etwas schiefgegangen. Nutze die Seitenzahlen unten.";
	color: var(--hs-fehler);
	font-size: var(--hs-klein);
}

/* --- Blättern ------------------------------------------------------------- */

.woocommerce-pagination { margin-top: var(--hs-s12); }
.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hs-s2);
	margin: 0; padding: 0;
	list-style: none;
	border: 0;
}
.woocommerce-pagination li { border: 0; }
.woocommerce-pagination a,
.woocommerce-pagination span {
	display: grid;
	place-items: center;
	min-width: var(--hs-touch-min);
	min-height: var(--hs-touch-min);
	padding: 0 var(--hs-s3);
	border: 1px solid var(--hs-grau-20);
	background: var(--hs-weiss);
	color: var(--hs-anthrazit);
	font-family: var(--hs-font-titel);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}
.woocommerce-pagination a:hover { border-color: var(--hs-anthrazit); }
.woocommerce-pagination .current {
	background: var(--hs-orange);
	border-color: var(--hs-orange);
	color: var(--hs-schwarz);          /* auf Orange steht Schwarz */
}

@media (max-width: 640px) {
	.hs-kathero__titel { font-size: var(--hs-h3); }
	.hs-listenkopf { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   B14c — Produktseite, drei Varianten

   Gemeinsame Bausteine zuerst, danach je Variante nur das Abweichende.
   -------------------------------------------------------------------------- */

.hs-produktseite { padding-block: var(--hs-s8) var(--hs-s16); }

/* Leiste zum Vergleichen der Varianten. Erscheint nur mit ?layout= in der
   Adresse — im Normalbetrieb ist sie nicht da. */
.hs-variantenwahl {
	margin-bottom: var(--hs-s8);
	padding-block: var(--hs-s3);
	background: var(--hs-anthrazit);
	color: rgba(255, 255, 255, .7);
	font-size: var(--hs-klein);
}
.hs-variantenwahl .hs-inhalt {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hs-s2) var(--hs-s4);
	align-items: center;
}
.hs-variantenwahl a {
	padding: 6px var(--hs-s3);
	border: 1px solid rgba(255, 255, 255, .28);
	color: var(--hs-weiss);
	text-decoration: none;
}
.hs-variantenwahl a:hover { border-color: var(--hs-weiss); }
.hs-variantenwahl a.ist-aktiv {
	background: var(--hs-orange);
	border-color: var(--hs-orange);
	color: var(--hs-schwarz);          /* auf Orange steht Schwarz */
}

.hs-pweg { margin-bottom: var(--hs-s6); }
.hs-pweg a {
	color: var(--hs-grau-70);
	font-size: var(--hs-klein);
	text-decoration: none;
}
.hs-pweg a::before { content: "\2190\00a0"; }
.hs-pweg a:hover { color: var(--hs-orange-tief); }

/* --- Kopfangaben ---------------------------------------------------------- */

.hs-pmarke { margin: 0 0 var(--hs-s2); color: var(--hs-grau-70); }
.hs-ptitel {
	margin: 0 0 var(--hs-s3);
	font-family: var(--hs-font-titel);
	font-size: var(--hs-h2);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.016em;
	text-wrap: balance;
}
.hs-psku {
	margin: 0 0 var(--hs-s6);
	color: var(--hs-grau-45);
	font-size: var(--hs-klein);
}

/* --- Galerie -------------------------------------------------------------- */

/* Produktbilder liegen mit 650 px vor. Ohne Deckel zieht das Raster sie auf
   767 px hoch — das ist sichtbar unscharf. 520 px bleibt darunter. */
.hs-pgalerie {
	max-width: 520px;
	border: 1px solid var(--hs-grau-20);
	background: var(--hs-weiss);
}
.hs-pgalerie img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 6%;                       /* CD S. 24: Luft rundum */
}

/* WooCommerce blendet über der Galerie einen Zoom-Auslöser ein — als Emoji.
   Das CD verbietet Emojis (S. 23), und die Lupe erklärt sich ohnehin nicht.
   Das Bild lässt sich weiterhin durch Anklicken vergrössern. */
.woocommerce-product-gallery__trigger { display: none !important; }
.hs-pgalerie .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--hs-s2);
	margin: var(--hs-s2) 0 0;
	padding: 0 var(--hs-s2) var(--hs-s2);
	list-style: none;
}
.hs-pgalerie .flex-control-thumbs img { padding: 4%; border: 1px solid var(--hs-grau-20); }

/* --- Kaufbereich ---------------------------------------------------------- */

.hs-pkaufen { border-top: 1px solid var(--hs-grau-20); padding-top: var(--hs-s6); }
.hs-ppreis {
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: var(--hs-s3);
}
.hs-ppreis del { color: var(--hs-grau-45); font-weight: 400; margin-right: var(--hs-s2); }
.hs-ppreis ins { text-decoration: none; color: var(--hs-orange-tief); }

.hs-pformular { margin-top: var(--hs-s6); }
.hs-pformular .quantity input {
	min-height: var(--hs-touch-min);
	width: 84px;
	padding: 0 var(--hs-s2);
	border: 1px solid var(--hs-grau-45);
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-align: center;
}
.hs-pformular table.variations { width: 100%; border: 0; margin-bottom: var(--hs-s4); }
.hs-pformular table.variations th,
.hs-pformular table.variations td { border: 0; padding: 0 0 var(--hs-s3); text-align: left; }
.hs-pformular table.variations th {
	padding-right: var(--hs-s4);
	font-family: var(--hs-font-text);
	font-size: var(--hs-klein);
	font-weight: 500;
	color: var(--hs-grau-70);
	white-space: nowrap;
	vertical-align: middle;
}
.hs-pformular select {
	width: 100%;
	min-height: var(--hs-touch-min);
	padding: 0 var(--hs-s6) 0 var(--hs-s3);
	border: 1px solid var(--hs-grau-45);
	border-radius: var(--hs-radius);
	background: var(--hs-weiss);
	font: inherit;
	font-size: var(--hs-text);
}
.hs-pformular .button,
.hs-pformular button[type="submit"] {
	min-height: 52px;
	padding: 0 var(--hs-s8);
	border: 1px solid var(--hs-orange);
	border-radius: var(--hs-radius);
	background: var(--hs-orange);
	color: var(--hs-schwarz);          /* auf Orange steht Schwarz */
	font-family: var(--hs-font-titel);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .03em;
	cursor: pointer;
}
.hs-pformular .button:hover { background: var(--hs-orange-tief); color: var(--hs-weiss); }

/* Mengenfeld und Knopf nebeneinander.
   Bei EINFACHEN Produkten liegen beide direkt im Formular `.cart`.
   Bei VARIABLEN Produkten ist `.cart` das äussere Formular, und die beiden
   sitzen eine Ebene tiefer in `.woocommerce-variation-add-to-cart` — einem
   `display: block`-Element. Ohne diese zweite Regel rutscht der Knopf dort
   unter das Mengenfeld. Am Livesystem nachgemessen. */
.hs-pformular .cart,
.hs-pformular .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hs-s3);
	align-items: center;
}

/* Solange keine Ausführung gewählt ist, ist der Knopf nicht benutzbar — dann
   soll er auch so aussehen. CD S. 22: Fläche Grau 20, Text Grau 45,
   kein Zeiger. */
.hs-pformular button.single_add_to_cart_button.disabled,
.hs-pformular button.single_add_to_cart_button[disabled],
.hs-pformular button.wc-variation-selection-needed,
.hs-pformular .button.disabled,
.hs-pformular .button[disabled] {
	/* `!important` nur hier: die Hintergrundfarbe wird sonst von einer
	   fremden Regel überstimmt — der Zeiger aus derselben Regel kommt an,
	   die Farbe nicht. Nachgemessen am Livesystem. */
	background-color: var(--hs-grau-20) !important;
	border-color: var(--hs-grau-20) !important;
	color: var(--hs-grau-45) !important;
	cursor: not-allowed;
}
.hs-pformular button.single_add_to_cart_button.disabled:hover,
.hs-pformular button.wc-variation-selection-needed:hover,
.hs-pformular .button.disabled:hover {
	background-color: var(--hs-grau-20);
	color: var(--hs-grau-45);
}

.hs-pformular .reset_variations { color: var(--hs-grau-70); font-size: var(--hs-klein); }
.hs-pformular .woocommerce-variation-price { flex-basis: 100%; }
.hs-pformular .woocommerce-variation-availability { flex-basis: 100%; }

.hs-pversprechen {
	margin: var(--hs-s8) 0 0;
	padding: var(--hs-s4) 0 0;
	border-top: 1px solid var(--hs-grau-20);
	list-style: none;
}
.hs-pversprechen li {
	display: flex;
	align-items: center;
	gap: var(--hs-s2);
	margin-bottom: var(--hs-s2);
	color: var(--hs-grau-70);
	font-size: var(--hs-klein);
}
.hs-pversprechen .hs-icon { color: var(--hs-grau-45); flex: 0 0 auto; }

/* --- Textblöcke ----------------------------------------------------------- */

.hs-pblock { margin-top: var(--hs-s12); }
.hs-pblock h2 {
	margin: 0 0 var(--hs-s4);
	font-family: var(--hs-font-titel);
	font-size: var(--hs-h3);
	font-weight: 600;
}
.hs-ptext p { margin: 0 0 var(--hs-s4); line-height: 1.65; }
.hs-ptext ul { margin: 0 0 var(--hs-s4) var(--hs-s6); }
.hs-ptext li { margin-bottom: var(--hs-s2); line-height: 1.6; }

.woocommerce-product-attributes { width: 100%; border-collapse: collapse; }
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	padding: var(--hs-s3) 0;
	border-bottom: 1px solid var(--hs-grau-20);
	text-align: left;
	vertical-align: top;
}
.woocommerce-product-attributes th {
	width: 40%;
	padding-right: var(--hs-s4);
	color: var(--hs-grau-70);
	font-weight: 500;
}
.woocommerce-product-attributes td { font-variant-numeric: tabular-nums; }

/* --- Variante 1 · Klassisch ----------------------------------------------- */

.hs-praster--klassisch {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: var(--hs-s16);
	align-items: start;
}
.hs-pzweispalt {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: var(--hs-s16);
	align-items: start;
}

/* --- Variante 2 · Bühne --------------------------------------------------- */

.hs-pbuehne {
	padding: var(--hs-s12) var(--hs-s12) var(--hs-s8);
	background: var(--hs-anthrazit);
	color: var(--hs-weiss);
}
.hs-pbuehne .hs-ptitel { color: var(--hs-weiss); font-size: var(--hs-h1); max-width: 22ch; }
.hs-pbuehne .hs-pmarke { color: var(--hs-orange); }
.hs-pbuehne .hs-psku { color: rgba(255, 255, 255, .6); margin-bottom: 0; }
.hs-pbuehne__bild { background: var(--hs-papier); padding: var(--hs-s8); }
.hs-pbuehne__bild .hs-pgalerie { max-width: 780px; margin-inline: auto; }
.hs-praster--buehne {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--hs-s16);
	align-items: start;
	margin-top: var(--hs-s12);
}
.hs-praster--buehne .hs-pblock:first-child { margin-top: 0; }

/* --- Variante 3 · Werkstatt ----------------------------------------------- */

.hs-praster--werkstatt {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: var(--hs-s16);
	align-items: start;
}
/* Fliesstext bleibt bei angenehmer Zeilenlänge, auch wenn die Spalte breiter
   ist. Über etwa 75 Zeichen wird Lesen anstrengend.

   Achtung bei `ch`: die Einheit misst die Breite der Ziffer NULL, nicht die
   eines durchschnittlichen Buchstabens. Bei Inter sind das rund 11 px, ein
   Mittelwert über den Satz liegt eher bei 8,5 px. 70ch ergaben deshalb
   769 px und damit gut 90 Zeichen — zu viel. 56ch treffen die gewünschten
   rund 72 Zeichen. Am Livesystem nachgemessen. */
.hs-praster--werkstatt .hs-ptext { max-width: 56ch; }
.hs-pseite--klebt {
	position: sticky;
	top: 140px;                        /* unter dem klebenden Kopfbereich */
	padding: var(--hs-s8);
	border: 1px solid var(--hs-grau-20);
	background: var(--hs-papier);
}
.hs-pseite--klebt .hs-pkaufen { border-top-color: var(--hs-grau-45); }

@media (max-width: 900px) {
	.hs-praster--klassisch,
	.hs-praster--buehne,
	.hs-praster--werkstatt,
	.hs-pzweispalt { grid-template-columns: 1fr; gap: var(--hs-s8); }
	.hs-pseite--klebt { position: static; }
	.hs-pbuehne { padding: var(--hs-s8) var(--hs-s6); }
	.hs-pbuehne .hs-ptitel { font-size: var(--hs-h2); }
	.hs-pbuehne__bild { padding: var(--hs-s4); }
}

/* --------------------------------------------------------------------------
   B15 — Fussbereich «Kontor»

   Freigegeben am 2026-08-23 aus zwei Vorschlägen. Vier Spalten: Marke mit
   Anschrift · Öffnungszeiten mit Stand · Service · Rechtliches.

   ⚠ SCHWARZ, NICHT MEHR ANTHRAZIT. Hier stand `--hs-anthrazit`, mit der
   Begründung, das CD verlange 30 Prozent dunkle Fläche. Das stimmt weiterhin —
   nur ist seit dem 2026-08-20 der ganze Shop schwarz, und dann ist ein
   anthrazitfarbener Fuss keine dunkle Fläche mehr, sondern eine Fuge. Die
   Trennung übernimmt jetzt eine 2-px-Kante in Orange.

   ⚠ ORANGE NUR ALS #FF6000. Auf Schwarz kommt es auf 6.93 : 1; das tiefe
   #BF4800 fiele mit 2.7 : 1 durch und kommt in diesem Abschnitt nirgends vor.
   -------------------------------------------------------------------------- */

.hs-fuss {
	--fuss-rand: clamp(20px, 4vw, 64px);
	margin-top: var(--hs-s16);
	background: var(--hs-schwarz);
	color: rgba(255, 255, 255, .78);
	border-top: 2px solid var(--hs-orange);
	font-size: var(--hs-klein);
}

.hs-fuss a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.hs-fuss a:hover { color: var(--hs-orange); }
.hs-fuss a:focus-visible { outline: 3px solid var(--hs-orange); outline-offset: 3px; }

.hs-fuss__band {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: clamp(24px, 4vw, 64px);
	padding: clamp(40px, 6vw, 72px) var(--fuss-rand);
	max-width: 1600px;
	margin-inline: auto;
}

.hs-fuss__logo { display: block; width: clamp(160px, 15vw, 210px); height: auto; }

.hs-fuss__satz {
	margin: var(--hs-s4) 0 0;
	color: var(--hs-grau-45);
	max-width: 34ch;
}

.hs-fuss__adresse { font-style: normal; line-height: 1.9; margin: var(--hs-s6) 0 0; }

/* Die Nummer soll nicht mitten im Vorwahlblock umbrechen. Hier und nicht
   als geschuetztes Leerzeichen im PHP: es ist eine Frage des Satzes, nicht
   des Inhalts. */
.hs-fuss__adresse a[href^="tel"] { white-space: nowrap; }

/* Die Vorzeile der Spalten — dieselbe wie im ganzen Haus. */
.hs-fuss__titel {
	margin: 0 0 var(--hs-s4);
	font-family: var(--hs-font-text);
	font-size: var(--hs-label);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-weight: 700;
	color: var(--hs-grau-45);
}

.hs-fuss__liste { list-style: none; margin: 0; padding: 0; }
.hs-fuss__liste li { margin: 0; }

/* 40 px und nicht 44: eine Fusszeile ist eine Liste, keine Bedienfläche, und
   44 px über sechs Zeilen ergäben einen Turm. Auf dem Handy wird erhöht —
   dort IST es eine Bedienfläche. */
.hs-fuss__liste a { display: flex; align-items: center; min-height: 40px; }

/* --- Der Öffnungsstand ---------------------------------------------------- */

.hs-fuss__stand {
	display: inline-flex;
	align-items: center;
	gap: var(--hs-s2);
	margin: 0;
	font-weight: 700;
	color: var(--hs-weiss);
}

/*
 * ⚠ ORANGE ALS PUNKT, NICHT GRÜN.
 *
 * Naheliegend wäre ein grüner Punkt für «offen». `neu.css` hält fest, dass die
 * Lieferstatus-Farben auf Schwarz mit 4.22 und 4.14 durchfallen — dieselbe
 * Falle. Orange trägt mit 6.93 : 1, und die Aussage steht ohnehin im Wort
 * daneben: die Farbe ist Beiwerk, nicht Träger. Wer sie nicht sieht, liest
 * «Jetzt offen bis 18.00 Uhr» und weiss genauso viel.
 */
.hs-fuss__punkt {
	width: 9px;
	height: 9px;
	border-radius: var(--hs-radius-pill);
	background: var(--hs-grau-45);
	flex: 0 0 auto;
}

.hs-fuss__stand.ist-offen .hs-fuss__punkt { background: var(--hs-orange); }

.hs-fuss__zeiten {
	margin: var(--hs-s4) 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px var(--hs-s4);
}

/* `display: contents` hält Tag und Zeit als Paar zusammen, ohne dem Raster
   eine Zwischenebene unterzuschieben — sonst stünden beide in derselben
   Spalte. */
.hs-fuss__zeiten > div { display: contents; }

.hs-fuss__zeiten dt { color: rgba(255, 255, 255, .78); }
.hs-fuss__zeiten dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.hs-fuss__zeiten .ist-heute dt,
.hs-fuss__zeiten .ist-heute dd { color: var(--hs-weiss); font-weight: 700; }
.hs-fuss__zeiten .ist-zu dd { color: var(--hs-grau-45); }

/* --- Die drei Zusagen ----------------------------------------------------- */

.hs-fuss__zusagen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hs-s3) var(--hs-s8);
	list-style: none;
	margin: 0;
	padding: var(--hs-s6) var(--fuss-rand);
	max-width: 1600px;
	margin-inline: auto;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.hs-fuss__zusagen li { display: inline-flex; align-items: center; gap: var(--hs-s2); }
.hs-fuss__zusagen svg { color: var(--hs-orange); flex: 0 0 auto; }

/* --- Der Abschluss -------------------------------------------------------- */

.hs-fuss__schluss {
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding: var(--hs-s6) var(--fuss-rand);
	max-width: 1600px;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--hs-s3) var(--hs-s8);
	align-items: center;
	justify-content: space-between;
	color: var(--hs-grau-45);
	font-size: var(--hs-label);
}

.hs-fuss__schluss p { margin: 0; }

/* --- Schmalere Fenster ---------------------------------------------------- */

@media (max-width: 1000px) {
	.hs-fuss__band { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
	.hs-fuss__band { grid-template-columns: 1fr; gap: var(--hs-s8); }
	.hs-fuss__liste a { min-height: var(--hs-touch-min); }
	.hs-fuss__schluss { justify-content: flex-start; }

	/*
	 * ⚠ TELEFON UND E-MAIL SIND AUF DEM HANDY DIE WICHTIGSTEN TIPPZIELE —
	 * und waren die kleinsten.
	 *
	 * Gemessen am 2026-08-23 auf 390 px: beide 17 px hoch, weil sie als
	 * gewöhnliche Verweise in der Anschrift stehen. Wer anrufen will, trifft
	 * das mit dem Daumen nicht. Alle Listenverweise waren längst auf 44 px —
	 * ausgerechnet diese zwei nicht.
	 */
	.hs-fuss__adresse a {
		display: inline-flex;
		align-items: center;
		min-height: var(--hs-touch-min);
	}
}

/* --------------------------------------------------------------------------
   12 — Redaktionshinweise im Aufbau

   Markiert Stellen, an denen Inhalt fehlt. Bewusst auffällig, damit nichts
   davon versehentlich live geht. Verschwindet im Druck und ist für
   Vorlesesoftware als Hinweis ausgezeichnet.
   -------------------------------------------------------------------------- */

.hs-offen {
	border-left: 4px solid var(--hs-orange);
	background: var(--hs-papier);
	padding: 0.75rem 1rem;
	margin: 1.5rem 0;
	font-size: 0.9375rem;
	color: var(--hs-grau-70);
}
.hs-offen strong { color: var(--hs-orange-tief); }

/* --------------------------------------------------------------------------
   13 — Druck: Belege und Etiketten laufen über eigene Templates,
        hier nur die Grundhygiene.
   -------------------------------------------------------------------------- */

@media print {
	nav, .et_pb_menu, .hs-nodruck, footer, .hs-offen { display: none !important; }
	body { font-size: 10pt; color: #000; background: #fff; }
	a[href]::after { content: ""; }     /* keine URL-Anhänge im Ausdruck */
}

/* --------------------------------------------------------------------------
   14 — Die Bildlaufleiste

   Kundenvorgabe vom 2026-08-19: «Kannst du mir den Scrollbalken auf der Mobile
   Ansicht noch schwarz machen mit einem Orangen Slider?»

   ⚠ WARUM HIER KEIN `@media` STEHT, OBWOHL «MOBILE» VERLANGT WAR.

   Zuerst stand das in `@media (max-width: 900px)`. Der Kunde sah es in Chrome
   nicht — und das war richtig so, denn ein Fenster am Rechner ist breiter als
   900 px, und dort griff die Regel nicht. Gemessen:

       Chrome 860 px, ohne Touch  → Leiste 15 px breit, gefärbt, sichtbar
       Chrome 420 px, Gerätemodus → Leiste  0 px breit (Überlagerung)
       Chrome ab 901 px           → Regel griff gar nicht

   Damit war die Vorgabe auf keinem Weg zu sehen: am Rechner wegen des
   Haltepunkts, im Gerätemodus, weil Chrome dort Überlagerungs-Balken zeichnet,
   die keine Breite haben und deshalb auch keine Farbe annehmen. Die Regel gilt
   jetzt überall. Wer sie wieder auf schmale Fenster begrenzen will, legt eine
   `@media`-Klammer darum — eine Zeile.

   ⚠ WO ES TROTZDEM NICHT WIRKT.

   Auf einem echten iPhone nicht: iOS Safari zeichnet die Leiste als
   Überlagerung des Betriebssystems, und die lässt sich von der Seite aus nicht
   anfassen. Ebenso wenig im Gerätemodus von Chrome, aus demselben Grund. Eine
   Leiste, die keine Breite hat, hat auch keine Fläche. Das ist eine Grenze der
   Plattform, keine Lücke in diesen Regeln.

   ⚠ ZWEI SCHREIBWEISEN, WEIL KEINE ALLEIN REICHT.

   `scrollbar-color` ist die genormte Eigenschaft (Firefox, Chrome ab 121).
   `::-webkit-scrollbar` ist die ältere aus WebKit und deckt ab, was die Norm
   noch nicht erreicht — vor allem Safari. Sie heben einander nicht auf: kennt
   ein Browser `scrollbar-color`, gewinnt sie, und die Pseudoelemente greifen
   nicht mehr. Genau das ist gewollt, denn dann bestimmt das Betriebssystem die
   Breite und wir nur die Farbe.

   ⚠ VERERBUNG IST HIER ABSICHT. `scrollbar-color` auf `html` gilt für JEDE
   Bildlaufleiste im Dokument, nicht nur für die der Seite. Ein orangefarbener
   Schieber am Rand und ein grauer im Kartenstreifen wären zwei Handschriften.
   Wer eine Leiste GAR NICHT will, sagt das weiterhin mit
   `scrollbar-width: none` — diese Regeln machen nichts sichtbar, was
   ausgeblendet ist (siehe `.hs-n2-neu__spur` in `assets/neu.css`).

   Gerechnet: #FF6000 auf #000000 misst 6.93 : 1. Verlangt sind für ein
   Bedienelement 3 : 1, der Schieber trägt also mit mehr als dem Doppelten.
   Kein Hover-Zustand: ein Wechsel auf `--hs-orange-tief` senkte den Kontrast
   auf 4.14 : 1 — er machte den Schieber schlechter erkennbar, nicht besser.

   Eckig wie alles andere: `--hs-radius` ist 0, und ein runder Schieber wäre
   die einzige Rundung der ganzen Seite ausser den Abzeichen.
   -------------------------------------------------------------------------- */

html {
	scrollbar-color: var(--hs-orange) var(--hs-schwarz);
}

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: var(--hs-schwarz);
}

::-webkit-scrollbar-thumb {
	background: var(--hs-orange);
	border-radius: var(--hs-radius);
}

/* Die Ecke, wo ein waagrechter und ein senkrechter Balken zusammentreffen.
   Ohne diese Zeile bleibt dort ein weisses Quadrat stehen. */
::-webkit-scrollbar-corner {
	background: var(--hs-schwarz);
}