/*
 * Hügi Sport — Mobil-Layer (nur Handy/Tablet).
 *
 * ⚠ GRUNDGESETZ DIESES BLATTS: jede Regel steht in einem
 *   `@media (max-width: …)`-Block. Damit kann dieser Layer den Desktop
 *   gar nicht erreichen — die grosse Ansicht bleibt nachweislich unberührt.
 *   Neue Mobil-Korrekturen kommen HIER rein, nicht in die Bereichs-
 *   Stylesheets (kat.css, dunkel.css, inhalt.css …), damit Handy und
 *   Desktop sauber getrennt bleiben und sich nie gegenseitig umwerfen.
 *
 * Geladen GLOBAL und spät (functions.php → hs_mobil_assets, Priorität 40,
 * nach den Bereichs-Stylesheets bei 30). Überschreibungen gewinnen
 * zusätzlich über die Spezifität `body.hs-…`, nicht über `!important`.
 *
 * Breakpoint 900 px = die Breite, ab der `.hs-k2-bank` ohnehin einspaltig
 * stapelt (siehe kat.css). Unterhalb davon ist „mobil".
 */

/* ==========================================================================
   SHOP / KATEGORIE — Produktraster: genau ZWEI gleich breite Kacheln,
   die die Screenbreite füllen (Kundenwunsch 2026-10-13: „je ~50 % breit").

   Vorher: zwischen 700 und 900 px griff noch die Desktop-Regel
   `repeat(auto-fill, minmax(220px, 1fr))` → ungleiche/schmale Kacheln mit
   leerem Rand rechts. Jetzt im ganzen Mobilbereich strikt zwei Spalten.
   ========================================================================== */
@media (max-width: 900px) {

	/* Schmaler Seitenrand, damit die zwei Kacheln je annähernd die halbe
	   Screenbreite einnehmen. Der Kopf `.hs-k2-tor` hat eigene Ränder und
	   bleibt unberührt. */
	body.hs-k2 .hs-k2-bank {
		padding-left: var(--hs-s2, 8px);
		padding-right: var(--hs-s2, 8px);
	}

	/* Exakt zwei Spalten — auch im Band 700–900 px. `minmax(0, 1fr)` hält
	   beide gleich breit, auch bei langen Artikelnamen ohne Trennstelle
	   (sonst drückt der Text die Spalte auseinander). Die 4-px-Fuge aus
	   kat.css bleibt die einzige Trennlinie und läuft nun bis an den Rand. */
	body.hs-k2 .hs-k2-feld .hs-k2-gitter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * ⚠ DIE KACHEL MUSS IHRE ZELLE FÜLLEN — sonst ist die Spalte 360 px breit,
	 *   die Karte darin aber nur ~163 px (Inhaltsbreite), mit grosser Lücke.
	 *
	 * Gemessen am 2026-10-13 auf 740 px: Grid-Track 360 px, Karte 163 px.
	 * Ursache: eine fremde Regel (effektiv `width: fit-content`) deckelt
	 * `.hs-k2-ware` auf die Inhaltsbreite; `justify-self: stretch` und ein
	 * einfaches `width: 100%` setzen sich dagegen NICHT durch. Unter 700 px
	 * fiel es nicht auf, weil die schmale Spalte ohnehin nah an der
	 * Inhaltsbreite liegt. `!important` + diese Spezifität sind hier das
	 * Mindestmass, das die Fremdregel schlägt — bewusst, nicht aus Bequemlichkeit.
	 * Danach füllt die Karte die Zelle (360/360), Bild und Knopf skalieren mit,
	 * kein horizontaler Überlauf.
	 */
	body.hs-k2 .hs-k2-feld .hs-k2-gitter li.product.hs-k2-ware {
		width: 100% !important;
	}
}

/* ==========================================================================
   SHOP / KATEGORIE — Bereiche als EIN Dropdown statt langer Liste.

   Die lange „BEREICHE"-Liste (bis zu 20 Einträge) ist auf dem Handy der
   erste, seitenfüllende Block vor der Ware. `mobil.js` baut daraus ein
   natives `<select>` (ein Fingertipp, OS-Picker). Hier nur Sichtbarkeit
   und CD-Gestalt — das Markup selbst rührt mobil.js an, nicht dieses Blatt.
   ========================================================================== */

/* Grundzustand (inkl. Desktop): das mobile Dropdown ist unsichtbar. */
.hs-mobil-bereiche { display: none; }

@media (max-width: 900px) {

	/* Liste + Überschrift weichen dem Dropdown — aber nur, wenn mobil.js die
	   Schiene wirklich ersetzt hat (`.hs-mobil-ersetzt`). Ohne JavaScript
	   bleibt die Liste als voll funktionierender Rückfall stehen. */
	.hs-k2-schiene.hs-mobil-ersetzt > div > .hs-k2-gruppenname,
	.hs-k2-schiene.hs-mobil-ersetzt .hs-k2-gruppenname,
	.hs-k2-schiene.hs-mobil-ersetzt .hs-k2-zweig {
		display: none;
	}

	.hs-k2-schiene.hs-mobil-ersetzt .hs-mobil-bereiche {
		display: block;
		width: 100%;
		box-sizing: border-box;
		min-height: var(--hs-touch-min, 48px);
		margin: 0 0 var(--hs-s2, 8px);
		padding: 0 2.75rem 0 var(--hs-s3, 12px);
		color: var(--hs-weiss, #fff);
		background-color: var(--hs-anthrazit, #1a1a1a);
		border: 1px solid rgba(255, 255, 255, .22);
		border-radius: 8px;
		font-family: inherit;
		font-size: var(--hs-text, 1rem);
		font-weight: 700;
		line-height: 1.2;
		/* Eigener Pfeil in Orange statt des grauen System-Pfeils. */
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right var(--hs-s3, 12px) center;
		background-size: 18px 18px;
		cursor: pointer;
	}

	.hs-k2-schiene.hs-mobil-ersetzt .hs-mobil-bereiche:focus-visible {
		outline: 3px solid var(--hs-orange, #ff6000);
		outline-offset: 2px;
	}

	/* Das Options-Menü selbst zeichnet das Betriebssystem (nicht stylebar);
	   wir sorgen nur dafür, dass der Platzhalter sichtbar grau ist. */
	.hs-k2-schiene.hs-mobil-ersetzt .hs-mobil-bereiche option[value=""] {
		color: var(--hs-grau-45, #9a9a9a);
	}
}

/* ==========================================================================
   STARTSEITE — «Erleben»-Lauf als Wisch-Karussell auf dem Handy

   Desktop (≥900 px) schiebt die vier Tafeln scrollgesteuert waagrecht
   (neu.js, Klasse `.ist-waagrecht`). Darunter stapelten sie senkrecht;
   Kundenwunsch 2026-10-13: auch auf dem Handy waagrecht — hier als
   natürliches Wisch-Karussell mit Einrasten (die Punkte-Navigation 1–4
   hängt mobil.js an). Jede Tafel behält ihr Innenleben (Bild über Text).

   ⚠ 899.98 px statt 900, damit es sich nicht mit der Desktop-Fassung
     (`min-width: 900px`) um einen Pixel überlappt.
   ========================================================================== */
@media (max-width: 899.98px) {

	/* Jede Karte füllt genau EINE Screenhöhe: Bild als Vollfläche, Text als
	   Overlay unten auf schwarzem Verlauf (Kundenwunsch 2026-10-13 — «Foto und
	   Text zu 100 % in die Screenhöhe eingepasst»). Die Bühne gibt die Höhe
	   vor, die Spur und die Karten erben sie. */
	.hs-n2-lauf__buehne {
		position: relative;
		height: 100svh;
		overflow: hidden;
	}

	.hs-n2-lauf__spur {
		display: flex;
		flex-wrap: nowrap;
		height: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;                 /* Firefox: Leiste weg */
	}
	.hs-n2-lauf__spur::-webkit-scrollbar { display: none; }   /* WebKit: Leiste weg */

	.hs-n2-lauf__spur > .hs-n2-tafel {
		flex: 0 0 100%;
		min-width: 0;
		scroll-snap-align: start;
		position: relative;
		display: block;                /* Grid aus: Bild füllt, Text überlagert */
		height: 100%;
		overflow: hidden;
	}

	/* Bild füllt die ganze Karte; oben verankert, damit oben nichts wegfällt. */
	.hs-n2-lauf__spur > .hs-n2-tafel > .hs-n2-tafel__bild {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;            /* etwaiges 4:5-Seitenverhältnis aufheben */
	}
	.hs-n2-lauf__spur > .hs-n2-tafel > .hs-n2-tafel__bild picture,
	.hs-n2-lauf__spur > .hs-n2-tafel > .hs-n2-tafel__bild img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 0%;
	}

	/* Text überlagert den unteren Bildrand auf einem schwarzen Verlauf. */
	.hs-n2-lauf__spur > .hs-n2-tafel > .hs-n2-tafel__text {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		padding: var(--hs-s16, 64px) var(--hs-s6, 24px) 3.25rem;
		background: linear-gradient(to top,
			rgba(0, 0, 0, .95) 0%,
			rgba(0, 0, 0, .88) 42%,
			rgba(0, 0, 0, 0) 100%);
	}
	.hs-n2-lauf__spur > .hs-n2-tafel .hs-n2-tafel__inhalt {
		max-width: none;
		margin-inline: 0;
	}

	/* Punkte-Navigation (1–4) schwebt über dem unteren Rand (nicht darunter),
	   damit die Karte die volle Screenhöhe behält. Zeigt Position und Zahl. */
	.hs-n2-lauf__punkte {
		position: absolute;
		left: 0;
		right: 0;
		bottom: var(--hs-s3, 12px);
		z-index: 2;
		display: flex;
		justify-content: center;
		align-items: center;          /* sonst streckt Flex die Punkte zu Ovalen */
		gap: var(--hs-s2, 8px);
		padding: 0;
		background: transparent;      /* liegt auf dem Verlauf, kein eigenes Band */
	}
	/* Sichtbarer 10-px-Punkt, aber ~22-px-Tippfläche (Padding) — und `min-height:0`,
	   weil sonst die Touch-Mindesthöhe (44 px) den Punkt zum Oval streckt.
	   `background-clip: content-box` hält die Farbe im 10-px-Kern. Spezifität
	   `.hs-n2-lauf__punkte .hs-n2-lauf__punkt`, damit es die Knopf-Grundregeln schlägt. */
	.hs-n2-lauf__punkte .hs-n2-lauf__punkt {
		flex: 0 0 auto;
		box-sizing: content-box;
		width: 10px;
		height: 10px;
		min-height: 0;
		padding: 6px;
		border: 0;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, .3);
		background-clip: content-box;
		cursor: pointer;
	}
	.hs-n2-lauf__punkte .hs-n2-lauf__punkt[aria-current="true"] {
		background-color: var(--hs-orange, #ff6000);
	}
	.hs-n2-lauf__punkte .hs-n2-lauf__punkt:focus-visible {
		outline: 3px solid var(--hs-orange, #ff6000);
		outline-offset: 2px;
	}
}

/* ==========================================================================
   SHOP / KATEGORIE — Filter + Sortierung hinter einem Toggle «Zusätzliche Filter»

   Kundenwunsch 2026-10-13: die sechs Filter-Dropdowns und die Sortierung nehmen
   auf dem Handy viel Höhe. mobil.js schiebt beide in ein ausklappbares Modul
   (standardmässig zu; bei aktiven Filtern offen) und hängt den Toggle davor.
   Die Trefferzahl bleibt sichtbar. Desktop (≥ 900 px +1 → das JS baut zurück)
   unberührt.
   ========================================================================== */
@media (max-width: 900px) {

	.hs-k2-feld .hs-k2-mfilter {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--hs-s2, 8px);
		width: 100%;
		min-height: var(--hs-touch-min, 48px);
		margin: 0 0 var(--hs-s2, 8px);
		padding: var(--hs-s2, 8px) var(--hs-s3, 12px);
		background-color: var(--hs-anthrazit, #1a1a1a);
		color: var(--hs-weiss, #fff);
		border: 1px solid rgba(255, 255, 255, .22);
		border-radius: 8px;
		font-family: inherit;
		font-size: var(--hs-text, 1rem);
		font-weight: 700;
		line-height: 1.2;
		cursor: pointer;
	}
	.hs-k2-feld .hs-k2-mfilter__wort {
		display: inline-flex;
		align-items: center;
		gap: var(--hs-s2, 8px);
	}
	.hs-k2-feld .hs-k2-mfilter__zahl {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.5em;
		height: 1.5em;
		padding: 0 .35em;
		border-radius: 999px;
		background: var(--hs-orange, #ff6000);
		color: #fff;
		font-size: var(--hs-klein, .8rem);
		font-weight: 700;
	}
	/* Chevron: zeigt nach unten, bei offen nach oben. Diskreter Zustand, keine
	   laufende Animation — darum ohne Übergang. */
	.hs-k2-feld .hs-k2-mfilter svg { flex: 0 0 auto; }
	.hs-k2-feld .hs-k2-mfilter[aria-expanded="true"] svg { transform: rotate(180deg); }
	.hs-k2-feld .hs-k2-mfilter:focus-visible {
		outline: 3px solid var(--hs-orange, #ff6000);
		outline-offset: 2px;
	}

	/* Eingeklappt, bis der Toggle offen ist (Box ist der nächste Nachbar). */
	.hs-k2-mfilter__inhalt { display: none; }
	.hs-k2-mfilter[aria-expanded="true"] + .hs-k2-mfilter__inhalt { display: block; }

	/* Die Sortierung steht im Modul unter den Filtern, volle Breite. */
	.hs-k2-mfilter__inhalt .woocommerce-ordering {
		margin: var(--hs-s3, 12px) 0 0;
	}
	.hs-k2-mfilter__inhalt .woocommerce-ordering select {
		width: 100%;
	}
}