/* ══════════════════════════════════════════════════════════════════════════
   VISARO — Feuerwehr Shop: Markenschicht

   Erste von zwei Dateien. Diese trägt die **Marke**: Farben, Schrift, Kopf,
   Menü, Fuß und die cinematic Startseite. Die zweite — `fire-shop.css` —
   trägt den **Verkauf** und ist hell.

   ┌──────────────────────────────────────────────────────────────────┐
   │  MARKE      dunkel · cinematic · emotional                       │
   │             Startseite der Shopwelt, Story- und Abschlussflächen │
   ├──────────────────────────────────────────────────────────────────┤
   │  VERKAUF    hell · schnell · übersichtlich                       │
   │             Kategorie, Suche, Produktseite, Warenkorb, Kasse,    │
   │             Shopkonto                                            │
   └──────────────────────────────────────────────────────────────────┘

   Das ist die zentrale Regel dieser Shopwelt. Der Grund ist nüchtern:
   Atmosphäre verkauft den Shop, Übersicht verkauft das Produkt. Ein
   durchgehend dunkler Shop sieht gut aus und macht das Kaufen langsamer —
   dunkle Produktlisten, dunkle Formulare und dunkle Preiszeilen kosten bei
   jeder Handlung ein wenig Aufmerksamkeit. Deshalb ist die
   **Grundeinstellung hell**; dunkel wird nur, was ausdrücklich Markenfläche
   ist.

   Lädt ausschließlich in dieser Shopwelt. Alle Werte aus tokens.css (E20).
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1 — Rollenfarben ════════════════════════════════════════════════════

   Hell ist der Normalfall. Dadurch tragen alle Bausteine aus `shop.css` —
   Formulare, Meldungen, Mengenfeld, Kasse — ohne einzelne Überschreibung
   mit, und ein übersehener Baustein sieht nicht falsch aus, sondern
   unauffällig.                                                            */

.visaro-fire {
	--vis-bg:            #FFFFFF;
	--vis-bg-subtle:     var(--vis-fire-paper);
	--vis-bg-surface:    var(--vis-fire-paper-2);
	--vis-white:         #FFFFFF;
	--vis-off-white:     var(--vis-fire-paper);
	--vis-paper:         var(--vis-fire-paper);

	--vis-text:          var(--vis-fire-black);
	--vis-text-2:        #45474C;
	--vis-text-3:        #6B6E74;
	--vis-text-disabled: #A9ACB2;

	--vis-border:        #E3DED6;
	--vis-border-strong: #B7B1A6;
	--vis-border-subtle: #EFEBE4;

	--vis-accent:        var(--vis-fire-ember);
	--vis-accent-text:   var(--vis-fire-red-ink);
	--vis-world-accent:  var(--vis-fire-ember);
	--vis-world-signal:  var(--vis-fire-red-ink);
	--vis-error:         var(--vis-fire-red-ink);

	/* Die gemeinsamen Commerce-Bausteine — Galerie, Größen, Kaufleiste,
	   Rückmeldung, Warenkorb — arbeiten mit den Rollentokens. Diese vier
	   Zeilen geben ihnen die Geometrie dieser Shopwelt, ohne dass ein
	   einziger Baustein die Welt kennen muss. */
	--vis-radius-sm:       var(--vis-fire-radius);
	--vis-radius-md:       var(--vis-fire-radius);
	--vis-radius-lg:       var(--vis-fire-radius-lg);
	--vis-shophead-height: var(--vis-fire-head-small);

	background: var(--vis-bg);
	color: var(--vis-text);
	font-family: var(--vis-font-fire-body);
}

.visaro-fire .visaro-site { background: var(--vis-bg); }

/* Dunkle Markenflächen: die ganze Startseite — und einzelne Abschnitte
   anderer Seiten, die ausdrücklich dunkel sein sollen. */
.visaro-fire-landing,
.visaro-fire .fire-dark {
	--vis-bg:            var(--vis-fire-black);
	--vis-bg-subtle:     var(--vis-fire-900);
	--vis-bg-surface:    var(--vis-fire-800);
	--vis-white:         var(--vis-fire-black);
	--vis-off-white:     var(--vis-fire-900);
	--vis-paper:         var(--vis-fire-900);

	--vis-text:          var(--vis-fire-paper);
	--vis-text-2:        var(--vis-fire-smoke);
	--vis-text-3:        var(--vis-fire-ash);
	--vis-text-disabled: var(--vis-fire-600);

	--vis-border:        var(--vis-fire-line);
	--vis-border-strong: var(--vis-fire-600);
	--vis-border-subtle: var(--vis-fire-800);

	--vis-accent-text:   var(--vis-fire-ember);
	--vis-world-signal:  var(--vis-fire-red);

	--vis-ink-950: var(--vis-fire-black);
	--vis-ink-900: var(--vis-fire-900);
	--vis-ink-800: var(--vis-fire-800);
	--vis-ink-700: var(--vis-fire-700);
	--vis-ink-600: var(--vis-fire-600);
	--vis-ink-500: var(--vis-fire-ash);
	--vis-ink-400: var(--vis-fire-ash);
	--vis-ink-300: var(--vis-fire-smoke);
	--vis-ink-200: var(--vis-fire-700);
	--vis-ink-100: var(--vis-fire-800);

	background: var(--vis-bg);
	color: var(--vis-text);
}

.visaro-fire-landing .visaro-site { background: var(--vis-fire-black); }

/* Helle Insel in einer dunklen Seite. */
.visaro-fire .fire-light {
	--vis-bg:            var(--vis-fire-paper);
	--vis-bg-subtle:     var(--vis-fire-paper-2);
	--vis-bg-surface:    #FFFFFF;
	--vis-white:         #FFFFFF;

	--vis-text:          var(--vis-fire-black);
	--vis-text-2:        #45474C;
	--vis-text-3:        #6B6E74;

	--vis-border:        #D8D2C8;
	--vis-border-strong: #B7B1A6;
	--vis-accent-text:   var(--vis-fire-red-ink);
	--vis-world-signal:  var(--vis-fire-red-ink);

	background: var(--vis-bg);
	color: var(--vis-text);
}

/* Sehr feines Korn — im Hero, nicht über der ganzen Seite.

   Vorher lag es als `position: fixed` über dem gesamten Viewport. Eine
   feste Ebene über allem zwingt den Browser beim Scrollen dazu, sie
   fortlaufend mit dem darunterliegenden Inhalt neu zusammenzusetzen; auf
   dem Handy war das deutlich zu spüren.

   Jetzt sitzt es dort, wo es wirkt: im Hero, innerhalb dessen
   `overflow: hidden`. Eine Ebene von Bildschirmgröße, einmal gezeichnet.  */
.visaro-fire-landing .fire-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--vis-z-base);
	pointer-events: none;
	opacity: 0.03;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══ 2 — Typografie ══════════════════════════════════════════════════════

   Inter Tight für die großen Überschriften: eine moderne, leicht schmalere
   Grotesk mit ruhigen Versalien. Bewusst **keine** stark schmallaufende
   Display-Schrift — die liest sich nach Plakat, Event und Motorsport, nicht
   nach hochwertiger Bekleidung.

   Der Unterschied zwischen „Festivalplakat" und „Marke" steckt in zwei
   Zahlen: Die Laufweite bleibt fast neutral (−0,012 em statt −0,02) und der
   Zeilenabstand geht über eins statt darunter. Groß darf die Überschrift
   trotzdem sein.                                                          */

.fire-display {
	font-family: var(--vis-font-fire-display);
	font-weight: 700;
	letter-spacing: -0.012em;
	line-height: 1.02;
	text-wrap: balance;
}

.fire-display .fire-line { display: block; }

/* Versalien nur dort, wo eine kurze Aussage steht: Hero, Abschluss,
   Abschnittsköpfe. Ein ganzer Produktname in Großbuchstaben wäre eine
   Zumutung — deshalb steht `text-transform` nicht in `.fire-display`. */
.fire-hero__title,
.fire-cta__title,
.fire-sechead__title,
.fire-view__title,
.fire-story__title,
.fire-benefits__title {
	text-transform: uppercase;
	font-weight: 800;
}

/* Die zweite Zeile einer Doppelaussage steht gedämpft statt als Kontur.
   Eine Konturschrift ist ein Plakateffekt; ein zweiter Grauwert ist
   Typografie. */
.fire-hero__title .fire-line:nth-child(2),
.fire-cta__title .fire-line:nth-child(2) {
	color: var(--vis-fire-ash);
}

.fire-kicker {
	margin: 0;
	color: var(--vis-world-signal);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

/* ══ 3 — Knöpfe ══════════════════════════════════════════════════════════

   Der gefüllte trägt schwarze Schrift auf Glut (6,4 : 1). Weiß auf dem
   hellen Rot käme nur auf 4,2 : 1 und wäre für Fließtextgröße zu wenig.   */

.fire-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vis-space-2);

	min-block-size: var(--vis-control-height);
	padding-inline: var(--vis-space-6);
	border: var(--vis-border-width) solid transparent;
	border-radius: var(--vis-fire-pill);

	font-family: var(--vis-font-fire-body);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-bold);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;

	transition:
		background-color var(--vis-duration-ui) var(--vis-ease-out),
		border-color var(--vis-duration-ui) var(--vis-ease-out),
		color var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-btn--lg {
	min-block-size: var(--vis-control-height-lg);
	padding-inline: var(--vis-space-8);
	font-size: var(--vis-fs-body);
}

.fire-btn--block { inline-size: 100%; }

.fire-btn .vis-icon {
	inline-size: 1.1em;
	block-size: 1.1em;
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-btn:hover .vis-icon { transform: translateX(var(--vis-nudge)); }

.fire-btn:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-fire-ember);
	outline-offset: var(--vis-focus-offset);
}

.fire-btn--primary {
	background: var(--vis-fire-ember);
	color: var(--vis-fire-black);
}

.fire-btn--primary:hover { background: #FF7440; }

/* Auf hellem Grund ist Schwarz der stärkere Hauptknopf: Glut auf Weiß ist
   eine Farbfläche, Schwarz auf Weiß ist eine Handlung. */
.fire-btn--dark {
	background: var(--vis-fire-black);
	color: var(--vis-fire-paper);
}

.fire-btn--dark:hover { background: var(--vis-fire-700); }

.fire-btn--ghost {
	background: transparent;
	border-color: var(--vis-border-strong);
	color: var(--vis-text);
}

.fire-btn--ghost:hover {
	background: var(--vis-text);
	border-color: var(--vis-text);
	color: var(--vis-bg);
}

/* ══ 4 — Utility-Zeile ═══════════════════════════════════════════════════

   Bleibt auf jeder Seite dunkel, auch über den hellen Shopseiten: Sie ist
   der schmale Streifen Marke über dem Laden. Sie nennt Herkunft und
   Rückweg und **keine** Versandversprechen — Versand, Zahlung und Rückgabe
   stehen nicht fest (SH2, SH3).                                           */

.fire-utility {
	position: relative;
	z-index: calc(var(--vis-z-header) + 1);
	background: var(--vis-fire-black);
	color: var(--vis-fire-smoke);
}

.fire-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-4);

	max-width: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
	min-block-size: var(--vis-fire-utility);
}

.fire-utility__origin {
	margin: 0;
	color: var(--vis-fire-ash);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

.fire-utility__links {
	display: flex;
	align-items: center;
	gap: var(--vis-space-5);
}

.fire-utility__link {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);

	color: var(--vis-fire-smoke);
	font-size: var(--vis-fs-caption);
	text-decoration: none;

	transition: color var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-utility__link:hover { color: var(--vis-fire-paper); }

.fire-utility__link .vis-icon {
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-utility__link:hover .vis-icon { transform: translateX(var(--vis-nudge)); }

.fire-utility__link:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-fire-ember);
	outline-offset: var(--vis-focus-offset);
}

@media (max-width: 767.98px) {
	/* Mobil entfällt die Utility-Zeile **ganz**.

	   Die Links lagen dort schon nicht mehr (zwei Ziele in einer 34 px
	   hohen Zeile sind auf 375 px keine Ziele); übrig blieb die
	   Herkunftszeile „Ein Shop von VISARO" — 34 px Bildschirm für eine
	   Angabe, die niemand sucht, über einem Kopf, der mit Marke, Konto,
	   Warenkorb und Suchzeile ohnehin 125 px trägt.

	   Die Herkunft geht dadurch nicht verloren: „Zu VISARO" steht im Fuß
	   des Drawers, und das vollständige VISARO Logo steht im Shopfuß
	   (E60). Auf dem Desktop bleibt die Zeile unverändert. */
	.fire-utility { display: none; }
}

/* ══ 5 — Kopfbereich ═════════════════════════════════════════════════════

   Zwei Zustände. Auf der Startseite liegt der Kopf dunkel und
   durchscheinend über dem Hero. Auf allen Shopseiten ist er **hell** —
   dort soll die Seite wie ein Laden wirken und nicht wie eine Bühne.      */

.fire-head {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--vis-z-header);

	background: #FFFFFF;
	border-block-end: var(--vis-border-width) solid #E3DED6;
	color: var(--vis-fire-black);

	transition:
		background-color var(--vis-duration-content) var(--vis-ease-out),
		border-color var(--vis-duration-content) var(--vis-ease-out);
}

/* Über dem Hero: dunkel, durchscheinend, eine Haarlinie.

   **Kein `backdrop-filter`.** Er stand hier und war die teuerste Zeile der
   ganzen Datei: Ein klebender Kopf über die volle Breite zwingt den
   Browser, bei **jedem** Scrollframe den Bereich dahinter neu zu zeichnen
   und zu verwischen. Genau das war das Ruckeln beim Scrollen.

   Ersetzt durch einen Verlauf: oben dunkler, nach unten auslaufend. Über
   einem Foto liest sich das praktisch gleich und kostet nichts — der
   Verlauf wird einmal gezeichnet und danach nur noch verschoben.

   Erreicht wird die Überlagerung nicht über `position: fixed`, sondern
   indem der Hero unter den Kopf gezogen wird: Ein fest positionierter Kopf
   läge auch über der Utility-Zeile darüber. */
.fire-head--over {
	background: linear-gradient(180deg, rgba(8, 9, 10, 0.78) 0%, rgba(8, 9, 10, 0.42) 60%, rgba(8, 9, 10, 0.18) 100%);
	border-block-end-color: rgba(255, 255, 255, 0.08);
	color: var(--vis-fire-paper);
}

.visaro-fire-landing .fire-hero {
	margin-block-start: calc(var(--vis-fire-head) * -1);
	padding-block-start: calc(var(--vis-section-xl) + var(--vis-fire-head));
}

@media (max-width: 1023.98px) {
	.visaro-fire-landing .fire-hero {
		margin-block-start: calc(var(--vis-fire-head-small) * -1);
		padding-block-start: calc(var(--vis-section-l) + var(--vis-fire-head-small));
	}
}

.fire-head--over.is-stuck {
	background: var(--vis-fire-black);
	border-block-end-color: var(--vis-fire-line);
}

/* Der helle Kopf bekommt beim Scrollen einen Schatten statt einer zweiten
   Farbe: Er ist schon hell, mehr Kontrast wäre Unruhe. */
.fire-head:not(.fire-head--over).is-stuck {
	box-shadow: 0 1px 0 #E3DED6, 0 10px 30px rgba(8, 9, 10, 0.06);
}

.fire-head__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--vis-space-8);

	max-width: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
	min-block-size: var(--vis-fire-head);

	transition: min-block-size var(--vis-duration-content) var(--vis-ease-out);
}

.fire-head.is-stuck .fire-head__inner { min-block-size: var(--vis-fire-head-small); }

/* ── Marke ─────────────────────────────────────────────────────────────── */

.fire-brand {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.fire-brand:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-fire-ember);
	outline-offset: var(--vis-focus-offset);
}

.fire-brand__logo {
	block-size: var(--vis-space-8);
	inline-size: auto;
	display: block;
}

/* Platzhalter, kein Logo: zwei Zeilen, die zweite im Signalton. Reduziert
   genug, um nicht wie ein fertiges Zeichen zu wirken. */
.fire-brand__mark {
	display: grid;
	line-height: 0.92;
	font-family: var(--vis-font-fire-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.005em;
}

.fire-brand__line1 {
	color: currentColor;
	font-size: var(--vis-fs-body);
}

.fire-brand__line2 {
	color: var(--vis-fire-red-ink);
	font-size: var(--vis-fs-body);
	letter-spacing: 0.26em;
}

.fire-head--over .fire-brand__line2,
.fire-drawer .fire-brand__line2,
.fire-foot .fire-brand__line2 { color: var(--vis-fire-ember); }

.fire-brand__mark--row {
	grid-auto-flow: column;
	align-items: baseline;
	gap: var(--vis-space-2);
	line-height: 1;
}

.fire-brand__mark--row .fire-brand__line2 { letter-spacing: 0.16em; }

/* ── Navigation ────────────────────────────────────────────────────────── */

.fire-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vis-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fire-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;

	min-block-size: var(--vis-tap-target-min);
	padding-inline: var(--vis-space-3);

	color: #45474C;
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	text-decoration: none;
	white-space: nowrap;

	transition: color var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-head--over .fire-nav__link { color: var(--vis-fire-smoke); }

.fire-nav__link::after {
	content: "";
	position: absolute;
	inset-block-end: var(--vis-space-3);
	inset-inline: var(--vis-space-3);
	block-size: var(--vis-border-width-strong);
	background: var(--vis-fire-ember);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-nav__link:hover,
.fire-nav__link.is-current { color: var(--vis-fire-black); }

.fire-head--over .fire-nav__link:hover,
.fire-head--over .fire-nav__link.is-current { color: var(--vis-fire-paper); }

.fire-nav__link:hover::after,
.fire-nav__link.is-current::after { transform: scaleX(1); }

.fire-nav__link:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-fire-ember);
	outline-offset: calc(var(--vis-focus-offset) * -1);
}

/* ── Aktionen ──────────────────────────────────────────────────────────── */

.fire-head__actions {
	display: flex;
	align-items: center;
	gap: var(--vis-space-1);
}

.fire-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	inline-size: var(--vis-tap-target-min);
	block-size: var(--vis-tap-target-min);
	border: 0;
	border-radius: var(--vis-fire-pill);
	background: transparent;

	color: currentColor;
	cursor: pointer;

	transition: background-color var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-icon:hover { background: rgba(8, 9, 10, 0.06); }

.fire-head--over .fire-icon:hover,
.fire-drawer .fire-icon:hover { background: rgba(244, 241, 236, 0.08); }

.fire-icon:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-fire-ember);
	outline-offset: var(--vis-focus-offset);
}

.fire-count {
	position: absolute;
	inset-block-start: var(--vis-space-1);
	inset-inline-end: var(--vis-space-1);

	min-inline-size: var(--vis-space-5);
	block-size: var(--vis-space-5);
	padding-inline: var(--vis-space-1);
	border-radius: var(--vis-radius-full);

	display: inline-flex;
	align-items: center;
	justify-content: center;

	background: var(--vis-fire-ember);
	color: var(--vis-fire-black);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.fire-count[hidden] { display: none; }

/* ── Suche ─────────────────────────────────────────────────────────────── */

.fire-search { position: relative; }

.fire-search__box {
	position: absolute;
	inset-block-start: calc(100% + var(--vis-space-3));
	inset-inline-end: 0;
	z-index: var(--vis-z-raised);

	inline-size: min(400px, calc(100vw - var(--vis-space-8)));
	padding: var(--vis-space-4);

	background: #FFFFFF;
	border: var(--vis-border-width) solid #E3DED6;
	border-radius: var(--vis-fire-radius-lg);
	box-shadow: 0 24px 60px rgba(8, 9, 10, 0.18);
}

.fire-head--over .fire-search__box {
	background: var(--vis-fire-900);
	border-color: var(--vis-fire-line);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.js .fire-search:not(.is-open) .fire-search__box { display: none; }

.visaro-fire .vis-shopsearch__input {
	background: var(--vis-fire-paper);
	border-color: #E3DED6;
	border-radius: var(--vis-fire-pill);
	color: var(--vis-fire-black);
}

.visaro-fire .vis-shopsearch__input::placeholder { color: #6B6E74; }

.visaro-fire .fire-head--over .vis-shopsearch__input {
	background: var(--vis-fire-800);
	border-color: var(--vis-fire-700);
	color: var(--vis-fire-paper);
}

.visaro-fire .fire-head--over .vis-shopsearch__input::placeholder { color: var(--vis-fire-ash); }

.visaro-fire .vis-shopsearch__submit {
	background: var(--vis-fire-ember);
	color: var(--vis-fire-black);
	border-radius: var(--vis-fire-pill);
}

.visaro-fire .vis-shopsearch__submit:hover { background: #FF7440; }

/* ── Mobil ─────────────────────────────────────────────────────────────── */

.fire-head__mobile,
.fire-head__msearch { display: none; }

@media (max-width: 1023.98px) {
	/* Die Marke des Desktopkopfs gehört nicht in die mobile Zeile — dort
	   steht sie schon zwischen Burger und Warenkorb. */
	.fire-nav,
	.fire-head__actions,
	.fire-head__inner > .fire-brand { display: none; }

	.fire-head__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* Vier Plätze: Menü · Marke · Konto · Warenkorb. Die Suche steht als
	   eigene Zeile darunter — zusammen sind das die fünf Dinge, die ein
	   Shopkopf mobil tragen muss, und keines mehr. */
	.fire-head__mobile {
		display: grid;
		grid-template-columns: var(--vis-tap-target-min) minmax(0, 1fr) auto auto;
		align-items: center;
		gap: var(--vis-space-2);
		min-block-size: var(--vis-fire-head-small);
	}

	.fire-brand--mobile { justify-self: center; min-inline-size: 0; }
	.fire-head__mobile .fire-icon--cart { justify-self: end; }

	/* Die Suche als eigene Zeile, nicht als fünftes Symbol. Im Shop ist sie
	   die häufigste Handlung. */
	.fire-head__msearch {
		display: block;
		padding: 0 var(--vis-gutter) var(--vis-space-3);
	}

	.fire-head__msearch .vis-shopsearch__input { min-block-size: var(--vis-tap-target-min); }
	.fire-head.is-stuck .fire-head__msearch { display: none; }
}

/* ── Burger ────────────────────────────────────────────────────────────── */

.fire-burger__box {
	display: grid;
	gap: 5px;
	inline-size: 20px;
}

.fire-burger__box span {
	display: block;
	block-size: var(--vis-border-width-strong);
	background: currentColor;
}

.fire-burger__box span:last-child { inline-size: 13px; }

/* ══ 6 — Mobiles Menü ════════════════════════════════════════════════════

   Bleibt dunkel, auch über hellen Seiten: Das Menü ist Marke, kein
   Inhalt.                                                                 */

.fire-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--vis-z-drawer);
	color: var(--vis-fire-paper);
}

.fire-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(4, 4, 5, 0.72);
	opacity: 0;
	transition: opacity 180ms var(--vis-ease-out);
}

.fire-drawer.is-open .fire-drawer__scrim { opacity: 1; }

.fire-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;

	display: flex;
	flex-direction: column;
	inline-size: min(400px, 92vw);

	background: var(--vis-fire-900);
	border-inline-end: var(--vis-border-width) solid var(--vis-fire-line);

	transform: translateX(-100%);
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fire-drawer.is-open .fire-drawer__panel { transform: none; }

.fire-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-4);

	padding: var(--vis-space-4) var(--vis-space-5);
	border-block-end: var(--vis-border-width) solid var(--vis-fire-line);
}

.fire-drawer .fire-brand__line1 { color: var(--vis-fire-paper); }

.fire-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var(--vis-space-6) var(--vis-space-5);
}

.fire-drawer__label {
	margin: 0 0 var(--vis-space-2);
	color: var(--vis-fire-ash);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

.fire-drawer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fire-drawer__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-4);

	min-block-size: 56px;
	border-block-end: var(--vis-border-width) solid var(--vis-fire-line);

	color: var(--vis-fire-paper);
	font-family: var(--vis-font-fire-display);
	font-size: var(--vis-fs-h4);
	font-weight: 700;
	letter-spacing: -0.005em;
	text-decoration: none;

	transition: color var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-drawer__item:hover,
.fire-drawer__item.is-current { color: var(--vis-fire-ember); }

.fire-drawer__item .vis-icon {
	inline-size: var(--vis-space-5);
	block-size: var(--vis-space-5);
	color: var(--vis-fire-ash);
}

.fire-drawer__item:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-fire-ember);
	outline-offset: calc(var(--vis-focus-offset) * -1);
}

.fire-drawer__count {
	color: var(--vis-fire-ash);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-variant-numeric: tabular-nums;
}

.fire-drawer__foot {
	display: grid;
	gap: var(--vis-space-1);
	padding: var(--vis-space-4) var(--vis-space-5);
	border-block-start: var(--vis-border-width) solid var(--vis-fire-line);
	background: var(--vis-fire-black);
}

.fire-drawer__foot-link {
	display: flex;
	align-items: center;
	gap: var(--vis-space-3);
	min-block-size: var(--vis-tap-target-min);

	color: var(--vis-fire-smoke);
	font-size: var(--vis-fs-body-s);
	text-decoration: none;
}

.fire-drawer__foot-link:hover { color: var(--vis-fire-paper); }

.fire-drawer__foot-link .vis-icon {
	inline-size: var(--vis-space-5);
	block-size: var(--vis-space-5);
	color: var(--vis-fire-ash);
}

@media (min-width: 1024px) {
	.fire-drawer { display: none; }
}

/* ══ 7 — Hero ════════════════════════════════════════════════════════════ */

.fire-hero {
	position: relative;
	display: flex;
	align-items: flex-end;

	min-block-size: var(--vis-fire-hero);
	padding-block: var(--vis-section-xl) var(--vis-section-l);
	overflow: hidden;
	isolation: isolate;
}

@media (max-width: 767.98px) {
	.fire-hero {
		min-block-size: var(--vis-fire-hero-mobile);
		padding-block: var(--vis-section-l) var(--vis-section-m);
	}
}

.fire-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* Zwei Zuschnitte, nicht einer. Ein breites Motiv mobil zu beschneiden
   heißt, den Bildaufbau wegzuwerfen.

   Umgeschaltet wird im Markup über `<picture>` und nicht hier über
   `display`: Ein ausgeblendetes `<img>` lädt trotzdem, und dann holt das
   Telefon beide Dateien. */
.fire-hero__picture,
.fire-hero__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.fire-hero__img {
	object-fit: cover;
}

/* Das breite Motiv steht rechts, links liegt die Textspalte. Wird die Hülle
   schmaler als 21:9, soll zuerst die leere linke Fläche wegfallen — nicht
   das Motiv auf beiden Seiten. */
@media (min-width: 768px) {
	.fire-hero__img {
		object-position: 100% 50%;
	}
}

/* Hochkant ist die Hülle schmaler als 3:4 und schneidet seitlich. Oben
   bündig, damit das Motiv über dem Text bleibt. */
@media (max-width: 767.98px) {
	.fire-hero__img {
		object-position: 50% 0%;
	}
}

.fire-hero__placeholder {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--vis-space-2);

	inline-size: 100%;
	block-size: 100%;
	padding: var(--vis-space-8);

	background:
		radial-gradient(120% 90% at 72% 40%, rgba(255, 90, 31, 0.16) 0%, transparent 62%),
		var(--vis-fire-900);
}

.fire-hero__ph-id,
.fire-story__ph-id,
.fire-cta__ph-id {
	color: var(--vis-fire-ember);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
}

.fire-hero__ph-motif,
.fire-story__ph-motif,
.fire-cta__ph-motif {
	max-inline-size: 46ch;
	color: var(--vis-fire-ash);
	font-size: var(--vis-fs-caption);
	line-height: var(--vis-lh-snug);
}

.fire-hero__ph-ratio {
	color: var(--vis-fire-600);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
}

/* Die Lesbarkeit hängt nicht am Bild: Der Verlauf liegt immer darüber,
   auch wenn später ein helles Foto kommt. */
.fire-hero__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(8, 9, 10, 0.72) 0%, rgba(8, 9, 10, 0.28) 42%, rgba(8, 9, 10, 0.94) 100%),
		linear-gradient(90deg, rgba(8, 9, 10, 0.86) 0%, rgba(8, 9, 10, 0.10) 62%);
}

/* Breit trägt der waagrechte Verlauf die Lesbarkeit — die Textspalte liegt
   links über ruhigem Grund. Oben und unten genügt dann wenig: Das Motiv
   rechts (Wappen, Becher, Lanyards) soll nicht im Dunkel verschwinden. */
@media (min-width: 768px) {
	.fire-hero__veil {
		background:
			linear-gradient(180deg, rgba(8, 9, 10, 0.55) 0%, rgba(8, 9, 10, 0.08) 38%, rgba(8, 9, 10, 0.08) 72%, rgba(8, 9, 10, 0.6) 100%),
			linear-gradient(90deg, rgba(8, 9, 10, 0.86) 0%, rgba(8, 9, 10, 0.62) 38%, rgba(8, 9, 10, 0) 62%);
	}
}

/* Hochkant steht der Text in der unteren Hälfte über dem Bild: unten
   bleibt es dunkel, oben bekommt das Motiv Licht. */
@media (max-width: 767.98px) {
	.fire-hero__veil {
		background: linear-gradient(180deg, rgba(8, 9, 10, 0.3) 0%, rgba(8, 9, 10, 0.12) 28%, rgba(8, 9, 10, 0.82) 56%, rgba(8, 9, 10, 0.95) 100%);
	}
}

/* Die Glut folgt dem Zeiger, sehr träge und sehr leise — Licht, das auf
   Anwesenheit reagiert, kein Effekt, der auffallen will.

   **Ohne `filter: blur(30px)`.** Der Filter lag auf einer Fläche von
   520 × 520 px, die sich bewegt — und ein bewegter Weichzeichner wird in
   jedem Frame neu berechnet. Der Verlauf darunter ist ohnehin weich; die
   Stopps sind jetzt so gesetzt, dass er ohne Filter genauso ausläuft.
   Sichtbar ist der Unterschied nicht, messbar schon. */
.fire-hero__ember {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 60%;

	inline-size: var(--vis-fire-glow);
	block-size: var(--vis-fire-glow);
	margin: calc(var(--vis-fire-glow) / -2) 0 0 calc(var(--vis-fire-glow) / -2);

	background: radial-gradient(
		circle,
		rgba(255, 90, 31, 0.26) 0%,
		rgba(255, 90, 31, 0.16) 26%,
		rgba(230, 56, 46, 0.07) 52%,
		transparent 76%
	);
	pointer-events: none;

	transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fire-hero__body {
	position: relative;
	max-width: var(--vis-container-wide);
	inline-size: 100%;
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
}

/* Groß bleibt groß — nur nicht mehr ganz so groß, und ohne die
   Plakatlaufweite. */
.fire-hero__title {
	margin: var(--vis-space-4) 0 0;
	font-size: clamp(2.75rem, 7.6vw, 6.5rem);
	color: var(--vis-fire-paper);
}

.fire-hero__text {
	margin-block-start: var(--vis-space-5);
	max-inline-size: 44ch;
	color: var(--vis-fire-smoke);
	font-size: var(--vis-fs-body-l);
	line-height: var(--vis-lh-body);
}

.fire-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-3);
	margin-block-start: var(--vis-space-8);
}

/* Im Hero und im Abschluss steht der zweite Knopf auf dem Bild — dort ist
   die helle Umrandung richtig. */
.fire-hero .fire-btn--ghost,
.fire-cta .fire-btn--ghost {
	border-color: var(--vis-fire-600);
	color: var(--vis-fire-paper);
}

.fire-hero .fire-btn--ghost:hover,
.fire-cta .fire-btn--ghost:hover {
	background: var(--vis-fire-paper);
	border-color: var(--vis-fire-paper);
	color: var(--vis-fire-black);
}

.fire-hero__scroll {
	position: absolute;
	inset-block-end: var(--vis-space-8);
	inset-inline-start: 50%;

	inline-size: var(--vis-border-width);
	block-size: var(--vis-space-10);
	background: linear-gradient(180deg, transparent, var(--vis-fire-600));
}

@media (max-width: 767.98px) {
	.fire-hero__scroll { display: none; }
}

/* ══ 8 — Abschnittsköpfe ═════════════════════════════════════════════════ */

.fire-cats__inner,
.fire-picks__inner,
.fire-view__inner,
.fire-benefits__inner,
.fire-cta__inner {
	max-width: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
}

.fire-sechead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vis-space-4);
	margin-block-end: var(--vis-space-8);
}

.fire-sechead__title {
	margin: 0;
	font-size: clamp(1.6rem, 3.6vw, 2.75rem);
	color: var(--vis-text);
}

.fire-sechead__note {
	margin: 0;
	flex: 1 1 24ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
}

.fire-sechead__more {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);

	color: var(--vis-accent-text);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-bold);
	text-decoration: none;
	white-space: nowrap;
}

.fire-sechead__more .vis-icon {
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-sechead__more:hover .vis-icon { transform: translateX(var(--vis-nudge)); }

/* ══ 9 — Sortiment ═══════════════════════════════════════════════════════ */

.fire-cats { padding-block: var(--vis-section-l); }

/* Der Abschnitt ist dunkel, erbt aber die helle Akzentrolle der Shopwelt
   (#B4271E auf Schwarz: 2,8:1). Hier gilt der Ton für dunklen Grund. */
.fire-cats .fire-sechead__more { color: var(--vis-fire-ember); }

/* Ab 1024 ein umbrechendes Raster, darunter eine Wischstrecke.

   Vorher stand hier auf jeder Breite `grid-auto-flow: column` — eine
   einzige Reihe, die so breit wurde, wie es Kategorien gibt. Mit den vier
   Testkategorien passte das; mit den neun echten Kategorien des ersten
   Produktimports ragte die Reihe bei 1440 px um über tausend Pixel aus
   der Seite heraus.

   Eine Reihe, die mit der Zahl der Kategorien wächst, ist kein Layout,
   sondern eine Wette. */
.fire-cats__rail {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vis-space-4);

	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1280px) {
	.fire-cats__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1023.98px) {
	/* Waagrecht wischbar. Neun Kategorien untereinander sind auf dem Handy
	   neun Bildschirmhöhen — nebeneinander sind sie ein Blick. */
	.fire-cats__rail {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(70vw, 76vw);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;

		margin-inline: calc(var(--vis-gutter) * -1);
		padding-inline: var(--vis-gutter);
		padding-block-end: var(--vis-space-2);
	}

	.fire-cats__rail::-webkit-scrollbar { display: none; }
	.fire-cat { scroll-snap-align: start; }
}

.fire-cat__link {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--vis-fire-radius-lg);
	background: var(--vis-bg-subtle);
	text-decoration: none;
	isolation: isolate;
}

.fire-cat__link:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-fire-ember);
	outline-offset: var(--vis-focus-offset);
}

.fire-cat__media {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.fire-cat__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--vis-duration-cinematic) var(--vis-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.fire-cat__link:hover .fire-cat__img { transform: scale(1.05); }
}

.fire-cat__placeholder {
	display: flex;
	align-items: flex-end;
	inline-size: 100%;
	block-size: 100%;
	padding: var(--vis-space-5);
	background:
		radial-gradient(90% 70% at 50% 30%, rgba(230, 56, 46, 0.14) 0%, transparent 65%),
		var(--vis-fire-800);
}

.fire-cat__ph-id {
	color: var(--vis-fire-ember);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	word-break: break-all;
}

/* Der Verlauf über dem Bild trägt die Schrift — deshalb bleibt die
   Beschriftung der Kachel hell, auch auf einer hellen Seite. */
.fire-cat__body {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;

	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--vis-space-4);

	padding: var(--vis-space-5);
	background: linear-gradient(180deg, transparent, rgba(8, 9, 10, 0.88));
}

.fire-cat__name {
	font-family: var(--vis-font-fire-display);
	font-size: var(--vis-fs-h4);
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--vis-fire-paper);
}

.fire-cat__go {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);
	color: var(--vis-fire-ember);
	font-size: var(--vis-fs-caption);
	white-space: nowrap;
}

.fire-cat__go .vis-icon {
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-cat__link:hover .fire-cat__go .vis-icon { transform: translateX(var(--vis-nudge)); }

/* Die Akzentkante zeigt beim Überfahren, dass hier etwas passiert. */
.fire-cat__link::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: 3px;
	background: var(--vis-fire-ember);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-cat__link:hover::after,
.fire-cat__link:focus-visible::after { transform: scaleX(1); }

/* ══ 10 — Aus dem Shop ═══════════════════════════════════════════════════ */

.fire-picks { padding-block: var(--vis-section-l); }

/* ══ 11 — Drehansicht ════════════════════════════════════════════════════ */

.fire-view {
	padding-block: var(--vis-section-l);
	background:
		radial-gradient(70% 60% at 78% 45%, rgba(255, 90, 31, 0.12) 0%, transparent 68%),
		var(--vis-fire-black);
}

.fire-view__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vis-space-12);
	align-items: center;
}

@media (min-width: 1024px) {
	.fire-view__inner {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: var(--vis-space-16);
	}
}

.fire-view__title {
	margin: var(--vis-space-4) 0 0;
	font-size: clamp(2rem, 4.6vw, 3.5rem);
	color: var(--vis-fire-paper);
}

.fire-view__text {
	margin-block-start: var(--vis-space-5);
	max-inline-size: 46ch;
	color: var(--vis-fire-smoke);
	font-size: var(--vis-fs-body);
	line-height: var(--vis-lh-body);
}

.fire-spots {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fire-spot {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--vis-space-5);

	padding-block: var(--vis-space-4);
	border-block-start: var(--vis-border-width) solid var(--vis-fire-line);
}

.fire-spot:last-child { border-block-end: var(--vis-border-width) solid var(--vis-fire-line); }

.fire-spot__index {
	color: var(--vis-fire-red);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
}

.fire-spot__body { display: grid; gap: var(--vis-space-1); }

.fire-spot__title {
	color: var(--vis-fire-paper);
	font-size: var(--vis-fs-body);
	font-weight: var(--vis-fw-medium);
}

.fire-spot__text {
	color: var(--vis-fire-ash);
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-body);
}

/* ── Bühne ─────────────────────────────────────────────────────────────── */

.fire-stage { display: grid; gap: var(--vis-space-4); }

.fire-stage__frame {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--vis-fire-radius-lg);
	background: var(--vis-bg-subtle);
	cursor: grab;
	touch-action: pan-y;
	isolation: isolate;
}

.fire-stage__frame:active { cursor: grabbing; }

.fire-stage__frame:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-fire-ember);
	outline-offset: var(--vis-focus-offset);
}

.fire-stage__view {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	opacity: 0;
	pointer-events: none;
}

.fire-stage__view.is-active { opacity: 1; }

/* Ein Foto statt einer Drehung: füllt die Bühne, ohne Bedienelemente. */
.fire-stage--single { margin: 0; }
.fire-stage--single .fire-stage__view { object-fit: cover; }

/* Mehrere Fotos ohne Serie: eine Galerie. Kein Greifzeiger — hier wird
   nicht gezogen, sondern gewählt (E238). Das ganze Produkt bleibt
   sichtbar (E66). */
.fire-stage--gallery { margin: 0; }
.fire-stage--gallery .fire-stage__frame { cursor: default; touch-action: auto; }

.fire-stage__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-2);
}

.fire-stage__thumb {
	inline-size: var(--vis-space-16);
	block-size: var(--vis-space-16);
	padding: 0;
	overflow: hidden;
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-fire-radius);
	background: var(--vis-bg-subtle);
	cursor: pointer;
	transition: border-color var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-stage__thumb img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.fire-stage__thumb:hover { border-color: var(--vis-text-3); }
.fire-stage__thumb[aria-pressed="true"] { border-color: var(--vis-fire-ember); }

.fire-stage__thumb:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-fire-ember);
	outline-offset: var(--vis-focus-offset);
}

.fire-stage__view--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(60% 60% at 50% 55%, rgba(255, 90, 31, 0.14) 0%, transparent 70%),
		var(--vis-fire-800);
}

.fire-stage__id {
	color: var(--vis-fire-ember);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	text-align: center;
	padding-inline: var(--vis-space-4);
}

/* Glut hinter dem Produkt, nicht davor. Auch hier ohne Weichzeichner —
   ein Verlauf ist bereits weich. */
.fire-stage__glow {
	position: absolute;
	inset: 12% 12% 6%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 90, 31, 0.20) 0%, rgba(255, 90, 31, 0.09) 40%, transparent 72%);
}

.fire-stage__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vis-space-4);
}

.fire-stage__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	inline-size: var(--vis-tap-target-min);
	block-size: var(--vis-tap-target-min);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-fire-pill);
	background: transparent;

	color: var(--vis-text);
	cursor: pointer;

	transition: border-color var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-stage__step:hover { border-color: var(--vis-fire-ember); }

.fire-stage__step:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-fire-ember);
	outline-offset: var(--vis-focus-offset);
}

.fire-stage__hint {
	margin: 0;
	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

.fire-stage__hint--touch { display: none; }

@media (hover: none) and (pointer: coarse) {
	.fire-stage__hint--pointer { display: none; }
	.fire-stage__hint--touch { display: inline; }
}

/* ══ 12 — Detail ═════════════════════════════════════════════════════════ */

.fire-story {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-block-size: 78vh;
	padding-block: var(--vis-section-l);
	overflow: hidden;
	isolation: isolate;
}

@media (max-width: 767.98px) {
	.fire-story { min-block-size: 62svh; }
}

.fire-story__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.fire-story__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.fire-story__placeholder {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--vis-space-2);

	inline-size: 100%;
	block-size: 100%;
	padding: var(--vis-space-8);

	background:
		radial-gradient(80% 70% at 30% 50%, rgba(230, 56, 46, 0.16) 0%, transparent 68%),
		var(--vis-fire-900);
}

.fire-story__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 9, 10, 0.30) 0%, rgba(8, 9, 10, 0.92) 100%);
}

.fire-story__body {
	position: relative;
	max-width: var(--vis-container-wide);
	inline-size: 100%;
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
}

.fire-story__title {
	margin: 0;
	max-inline-size: 18ch;
	font-size: clamp(1.85rem, 5vw, 4rem);
	color: var(--vis-fire-paper);
}

.fire-story__text {
	margin-block-start: var(--vis-space-4);
	max-inline-size: 44ch;
	color: var(--vis-fire-smoke);
	font-size: var(--vis-fs-body);
}

/* ══ 13 — Personalisierung ═══════════════════════════════════════════════ */

.fire-benefits { padding-block: var(--vis-section-l); }

.fire-benefits__title {
	margin: 0;
	font-size: clamp(1.85rem, 4.6vw, 3.5rem);
	color: var(--vis-text);
}

.fire-benefits__lead {
	margin-block-start: var(--vis-space-4);
	max-inline-size: 52ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
}

.fire-benefits__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vis-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.fire-benefits__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vis-space-10); }
}

.fire-benefit {
	padding-block-start: var(--vis-space-5);
	border-block-start: var(--vis-border-width-strong) solid var(--vis-world-signal);
}

.fire-benefit__index {
	display: block;
	color: var(--vis-world-signal);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
}

.fire-benefit__title {
	margin: var(--vis-space-3) 0 var(--vis-space-2);
	font-family: var(--vis-font-fire-display);
	font-size: var(--vis-fs-h3);
	font-weight: 700;
	letter-spacing: -0.008em;
	color: var(--vis-text);
}

.fire-benefit__text {
	margin: 0;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-body);
}

/* ══ 14 — Abschluss ══════════════════════════════════════════════════════ */

.fire-cta {
	position: relative;
	padding-block: var(--vis-section-xl);
	overflow: hidden;
	isolation: isolate;
}

.fire-cta__media { position: absolute; inset: 0; z-index: -1; }

.fire-cta__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.fire-cta__placeholder {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--vis-space-2);

	inline-size: 100%;
	block-size: 100%;
	padding: var(--vis-space-8);

	background:
		radial-gradient(90% 80% at 70% 40%, rgba(255, 90, 31, 0.14) 0%, transparent 70%),
		var(--vis-fire-900);
}

.fire-cta__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 9, 10, 0.94) 0%, rgba(8, 9, 10, 0.55) 70%, rgba(8, 9, 10, 0.85) 100%);
}

.fire-cta__inner { position: relative; }

.fire-cta__title {
	margin: 0;
	font-size: clamp(2rem, 5.4vw, 4.5rem);
	color: var(--vis-fire-paper);
}

.fire-cta__text {
	margin-block-start: var(--vis-space-5);
	max-inline-size: 52ch;
	color: var(--vis-fire-smoke);
	font-size: var(--vis-fs-body-l);
	line-height: var(--vis-lh-body);
}

.fire-cta .fire-btn { margin-block-start: var(--vis-space-8); }

/* ══ 15 — Fußbereich ═════════════════════════════════════════════════════

   Bleibt dunkel, auch unter hellen Shopseiten. Er schließt die Seite ab
   und gehört zur Marke, nicht zum Sortiment.                              */

.fire-foot {
	padding-block: var(--vis-section-m) var(--vis-space-8);
	background: var(--vis-fire-900);
	border-block-start: var(--vis-border-width) solid var(--vis-fire-line);
	color: var(--vis-fire-smoke);
}

.fire-foot__inner {
	max-width: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
}

.fire-foot__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vis-space-10);
}

@media (min-width: 768px) {
	.fire-foot__cols { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--vis-space-8); }
}

.fire-foot .fire-brand__line1 { color: var(--vis-fire-paper); }

.fire-foot__origin {
	margin: var(--vis-space-4) 0 0;
	color: var(--vis-fire-ash);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

.fire-foot__back {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);
	margin-block-start: var(--vis-space-4);

	color: var(--vis-fire-ember);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-bold);
	text-decoration: none;
}

.fire-foot__back .vis-icon {
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-foot__back:hover .vis-icon { transform: translateX(var(--vis-nudge)); }

.fire-foot__label {
	margin: 0 0 var(--vis-space-4);
	color: var(--vis-fire-ash);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

.fire-foot__list {
	display: grid;
	gap: var(--vis-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fire-foot__list a {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);
	color: var(--vis-fire-smoke);
	font-size: var(--vis-fs-body-s);
	text-decoration: none;
}

.fire-foot__list a:hover { color: var(--vis-fire-paper); }

.fire-foot__list .vis-icon {
	inline-size: var(--vis-space-5);
	block-size: var(--vis-space-5);
	color: var(--vis-fire-600);
}

.fire-foot__note {
	margin: var(--vis-space-5) 0 0;
	max-inline-size: 34ch;
	color: var(--vis-fire-ash);
	font-size: var(--vis-fs-caption);
	line-height: var(--vis-lh-snug);
}

.fire-foot__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-4);

	margin-block-start: var(--vis-section-s);
	padding-block-start: var(--vis-space-6);
	border-block-start: var(--vis-border-width) solid var(--vis-fire-line);
}

.fire-foot__copy {
	margin: 0;
	color: var(--vis-ink-400); /* 1,6:1 vorher — Rechtstexte müssen lesbar sein */
	font-size: var(--vis-fs-caption);
}

.fire-foot__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fire-foot__legal-links a {
	color: var(--vis-ink-400); /* 1,6:1 vorher — Rechtstexte müssen lesbar sein */
	font-size: var(--vis-fs-caption);
	text-decoration: none;
}

.fire-foot__legal-links a:hover { color: var(--vis-fire-paper); }
.fire-foot__legal-links .is-featured a { color: var(--vis-fire-paper); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Mobil bleibt unter der Kaufleiste Platz. */
@media (max-width: 1023.98px) {
	.visaro-fire.single-product .fire-foot { padding-block-end: var(--vis-space-20); }
}

/* ══ 16 — Bewegung ═══════════════════════════════════════════════════════

   Stärker als im Corporate, aber kontrolliert: ein Reveal, ein Parallax,
   ein Lichtschein. Kein Scroll-Hijacking, keine Bounce-Kette.             */

.fire-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 620ms var(--vis-ease-out),
		transform 620ms var(--vis-ease-out);
}

.fire-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.fire-reveal,
	.fire-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.fire-hero__ember,
	.fire-cat__img,
	.fire-drawer__panel,
	.fire-drawer__scrim {
		transition: none;
	}

	.fire-cat__link:hover .fire-cat__img { transform: none; }
	.fire-btn:hover .vis-icon { transform: none; }
	.fire-hero__ember { transform: none !important; }
}

/* ══ 17 — Abstände an Listen ═════════════════════════════════════════════

   `base.css` setzt `ul[class], ol[class] { margin: 0 }` — mit einem
   Attributselektor und damit spezifischer als eine einzelne Klasse. Diese
   drei Listen brauchen Abstand und bekommen ihn hier, eine Stufe
   spezifischer.                                                           */

.visaro-fire .fire-benefits__list { margin-block-start: var(--vis-section-s); }
.visaro-fire .fire-spots { margin-block: var(--vis-space-8); }
.visaro-fire .fire-drawer__list { margin-block-end: var(--vis-space-8); }

/* ── Mega-Menü im Feuerwehrkopf ────────────────────────────────────────────

   Struktur und Verhalten stehen in `shop.css` und gelten für jede
   Shopwelt. Hier steht nur, was diese Welt anders macht: die Schriftfarbe
   im Kopf, der Ember-Strich unter dem aktiven Eintrag — und die Tafel als
   **helle Insel**.

   Letzteres ist die Anwendung von E52: Der Kopf über dem Hero ist Marke und
   dunkel, das Sortiment darunter ist Verkauf und hell. Ohne diese
   Ummappung erbte die Tafel auf der Startseite die dunklen Rollenfarben —
   ein schwarzes Feld voller Produktnamen, aus dem man nicht liest, sondern
   entziffert.                                                              */

.fire-head .vis-shopnav__link {
	position: relative;
	min-block-size: var(--vis-tap-target-min);
	color: #45474C;
	transition: color var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-head--over .vis-shopnav__link { color: var(--vis-fire-smoke); }

.fire-head .vis-shopnav__link::after {
	content: "";
	position: absolute;
	inset-block-end: var(--vis-space-3);
	inset-inline: var(--vis-space-3);
	block-size: var(--vis-border-width-strong);
	background: var(--vis-fire-ember);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.fire-head .vis-shopnav__link:hover,
.fire-head .vis-shopnav__link.is-current,
.fire-head .vis-shopnav__item:focus-within .vis-shopnav__link,
.fire-head .vis-shopnav__item.is-open .vis-shopnav__link { color: var(--vis-fire-black); }

.fire-head--over .vis-shopnav__link:hover,
.fire-head--over .vis-shopnav__link.is-current,
.fire-head--over .vis-shopnav__item:focus-within .vis-shopnav__link { color: var(--vis-fire-paper); }

.fire-head .vis-shopnav__link:hover::after,
.fire-head .vis-shopnav__link.is-current::after,
.fire-head .vis-shopnav__item:hover .vis-shopnav__link::after,
.fire-head .vis-shopnav__item:focus-within .vis-shopnav__link::after,
.fire-head .vis-shopnav__item.is-open .vis-shopnav__link::after { transform: scaleX(1); }

.fire-head .vis-shopnav__link:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-fire-ember);
	outline-offset: calc(var(--vis-focus-offset) * -1);
}

.visaro-fire .fire-head .vis-mega {
	--vis-bg:            #FFFFFF;
	--vis-bg-subtle:     var(--vis-fire-paper);
	--vis-bg-surface:    var(--vis-fire-paper-2);
	--vis-white:         #FFFFFF;

	--vis-text:          var(--vis-fire-black);
	--vis-text-2:        #45474C;
	--vis-text-3:        #6B6E74;

	--vis-border:        #D8D2C8;
	--vis-border-strong: #B7B1A6;
	--vis-accent:        var(--vis-fire-red-ink);

	border-block-start: 0;
	border-end-start-radius: var(--vis-fire-radius-lg);
	border-end-end-radius: var(--vis-fire-radius-lg);
}