/**
 * AE Schaufenster - cinematisches "Tueren -> Buehne"-Frontend.
 *
 * Liegt in der dunklen forest-deep-Sektion. Drei Ebenen: Foto-Tueren (2x2),
 * Buehne mit zentraler Featured-Swatch + Filmstrip, fullscreen Textur-Zoom.
 * Runde 5: ohne Musterkorb - kein Floating-Korb, kein Drawer, kein Formular.
 * Ein einziger warmer Akzent (timber). Bewegung nur ueber transform/opacity
 * (HW-beschleunigt). Tap-Targets >= 44px. prefers-reduced-motion respektiert.
 * Filtern/Verstecken ausschliesslich ueber .is-hidden (nie [hidden]).
 */
.ae-shf {
	--shf-accent: var( --wp--preset--color--timber, #B0824E );
	--shf-accent-soft: rgba( 176, 130, 78, 0.16 );
	--shf-green: var( --wp--preset--color--brand-green, #2E7D32 );
	--shf-ink: var( --wp--preset--color--nat-ink, #16201A );
	--shf-ink-soft: var( --wp--preset--color--nat-ink-soft, #4C574F );
	--shf-line: var( --wp--preset--color--sage-line, #CADBCD );
	--shf-panel: var( --wp--preset--color--mist-white, #FAFCFA );
	--shf-bone: var( --wp--preset--color--bone-green, #DDE8DE );
	/* Bedienelemente, die auf dem Dekorbild liegen: fester Kontrast statt
	   Transparenz, damit sie auf hellem wie dunklem Motiv lesbar bleiben. */
	--shf-offwhite: #F5F4EF;
	--shf-edge: #1E231C;
	--shf-radius: 18px;
	/* Andock-Hoehe der gedockten Ansicht. Das Theme ueberschreibt sie mit der
	   gemessenen Hoehe seiner mitlaufenden Kopfzeile. */
	--shf-dock-top: 5.5rem;
	position: relative;
	color: var( --shf-panel );
}

/* Universelle Sichtbarkeits-Klasse: NUR hierueber wird gefiltert/versteckt. */
.ae-shf .is-hidden { display: none !important; }

/*
 * V2b: eingeklappte Karten.
 *
 * Bewusst NICHT .is-hidden - diese Klasse traegt die Filterlogik, und
 * visibleItems() in view.js liest sie. Wuerde das Einklappen sie mitbenutzen,
 * waeren aus 202 Dekoren ploetzlich 18: der Zaehler wuerde luegen und die
 * Pfeiltasten kaemen nach der 18. Karte nicht weiter.
 *
 * .is-beyond sitzt nur auf dem <li> und ist reine Anzeige.
 */
.ae-shf__strip > li.is-beyond { display: none !important; }

/* Der Abschnitt nimmt nach "Zurueck nach oben" programmatisch den Fokus auf
   (tabindex -1). Das ist eine Ansage fuer Vorlese-Software, kein Bedienelement -
   deshalb ohne sichtbaren Rahmen. Getastete Elemente darin behalten ihren. */
.ae-shf:focus { outline: none; }

/* ---- Ebene 1: Tueren ------------------------------------------------- */
.ae-shf__doors {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: clamp( 0.7rem, 1.4vw, 1.15rem );
}
.ae-shf__doors > li { display: grid; margin: 0; min-width: 0; }
.ae-shf__door {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	min-height: 220px;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: var( --shf-radius );
	overflow: hidden;
	background: #0E1411;
	cursor: pointer;
	text-align: left;
	color: var( --shf-panel );
	box-shadow: 0 26px 60px -34px rgba( 0, 0, 0, 0.85 );
	transition: transform 0.4s cubic-bezier( 0.16,1,0.3,1 ), box-shadow 0.4s;
	will-change: transform;
}
.ae-shf__door-img {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	transform: scale( 1.04 );
	transition: transform 0.9s cubic-bezier( 0.16,1,0.3,1 ), filter 0.5s;
	filter: saturate( 0.95 ) brightness( 0.86 );
}
.ae-shf__door-veil {
	position: absolute; inset: 0;
	background: linear-gradient( to top, rgba( 8, 12, 9, 0.92 ) 0%, rgba( 8, 12, 9, 0.45 ) 42%, rgba( 8, 12, 9, 0.08 ) 100% );
}
.ae-shf__door-body {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: clamp( 1rem, 2vw, 1.5rem );
	display: flex; flex-direction: column; gap: 0.2rem;
}
.ae-shf__door-count {
	font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var( --shf-accent );
}
.ae-shf__door-name {
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: clamp( 1.5rem, 3.2vw, 2.2rem ); line-height: 1.02; letter-spacing: -0.02em;
	margin: 0.1rem 0 0;
}
.ae-shf__door-cue {
	margin-top: 0.5rem;
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-size: 0.9rem; font-weight: 600; color: var( --shf-bone );
	opacity: 0; transform: translateY( 6px );
	transition: opacity 0.4s, transform 0.4s;
}
.ae-shf__door-cue svg { transition: transform 0.4s; }
.ae-shf__door:hover { transform: translateY( -4px ); box-shadow: 0 36px 70px -30px rgba( 0, 0, 0, 0.9 ); }
.ae-shf__door:hover .ae-shf__door-img { transform: scale( 1.1 ); filter: saturate( 1.04 ) brightness( 0.96 ); }
.ae-shf__door:hover .ae-shf__door-cue,
.ae-shf__door:focus-visible .ae-shf__door-cue { opacity: 1; transform: translateY( 0 ); }
.ae-shf__door:hover .ae-shf__door-cue svg { transform: translateX( 4px ); }
.ae-shf__door:focus-visible { outline: 2px solid var( --shf-accent ); outline-offset: 3px; }
.ae-shf__door:active { transform: scale( 0.99 ); }

/* ---- "Alle Dekore"-Einstieg unter den Tueren ------------------------ */
.ae-shf__alldoor {
	display: flex; align-items: center; justify-content: center; gap: 0.6rem;
	width: 100%; min-height: 56px; margin-top: clamp( 0.7rem, 1.4vw, 1.15rem );
	padding: 0.9rem 1.4rem;
	border: 1px solid rgba( 255, 255, 255, 0.16 ); border-radius: 14px;
	background: rgba( 255, 255, 255, 0.04 );
	color: var( --shf-panel ); cursor: pointer;
	font: inherit; font-size: clamp( 1rem, 1.5vw, 1.12rem ); font-weight: 600; letter-spacing: 0.01em;
	transition: background-color 0.22s, border-color 0.22s, transform 0.12s;
}
.ae-shf__alldoor svg { transition: transform 0.3s; }
.ae-shf__alldoor:hover { border-color: var( --shf-accent ); background: var( --shf-accent-soft ); }
.ae-shf__alldoor:hover svg { transform: translateX( 4px ); }
.ae-shf__alldoor:active { transform: scale( 0.99 ); }
.ae-shf__alldoor:focus-visible { outline: 2px solid var( --shf-accent ); outline-offset: 3px; }

/* ---- Ebene 2: Buehne ------------------------------------------------- */
.ae-shf__stage { animation: ae-shf-fade 0.45s cubic-bezier( 0.16,1,0.3,1 ); }
@keyframes ae-shf-fade { from { opacity: 0; transform: translateY( 10px ); } to { opacity: 1; transform: none; } }

.ae-shf__stage-top {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem;
	margin-bottom: clamp( 1rem, 2.4vw, 1.8rem );
}
.ae-shf__back {
	display: inline-flex; align-items: center; gap: 0.45rem;
	min-height: 46px; padding: 0.5rem 1.15rem 0.5rem 0.85rem;
	border: 1.5px solid var( --shf-accent ); border-radius: 999px;
	background: var( --shf-accent-soft ); color: var( --shf-panel );
	font: inherit; font-size: 0.94rem; font-weight: 700; cursor: pointer;
	box-shadow: 0 10px 24px -16px rgba( 0, 0, 0, 0.7 );
	transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.12s;
}
.ae-shf__back svg { transition: transform 0.2s; }
.ae-shf__back:hover { background: var( --shf-accent ); color: #1B130B; }
.ae-shf__back:hover svg { transform: translateX( -3px ); }
.ae-shf__back:active { transform: scale( 0.97 ); }
.ae-shf__back:focus-visible { outline: 2px solid var( --shf-accent ); outline-offset: 3px; }

.ae-shf__stage-heading { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ae-shf__stage-eyebrow {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: var( --shf-accent );
}
.ae-shf__stage-sub { font-size: 0.88rem; color: var( --shf-bone ); opacity: 0.82; }
.ae-shf__stage-title {
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: clamp( 1.5rem, 3vw, 2.1rem ); line-height: 1.04; letter-spacing: -0.02em; margin: 0;
}
/* Kategorie-Umschalter auf der Buehne */
.ae-shf__cats {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
	margin-bottom: clamp( 1rem, 2.2vw, 1.6rem );
}
/* Kompakt genug, dass alle 7 Kategorien (seit Kork dazukam) in der gedockten
   Spalte EINE Zeile bleiben. Nur Polster und Schriftgrad sind kleiner -
   der Text selbst wird nicht gestaucht (kein letter-spacing, kein Umbruch
   im Chip), die Hoehe bleibt bei 42 px Tastflaeche. */
.ae-shf__cat {
	min-height: 42px; padding: 0.4rem 0.7rem;
	border: 1px solid rgba( 255, 255, 255, 0.18 ); border-radius: 999px;
	background: transparent; color: var( --shf-panel );
	font: inherit; font-size: 0.88rem; white-space: nowrap; cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.12s;
}
.ae-shf__cat:hover { border-color: var( --shf-accent ); }
.ae-shf__cat:active { transform: scale( 0.97 ); }
.ae-shf__cat.is-active {
	background: var( --shf-accent ); border-color: var( --shf-accent ); color: #1B130B; font-weight: 600;
}

/* Zwei Filterebenen untereinander: Ausfuehrung (Sortimentsgruppe) ueber
   Optik (Oberflaeche). Der Aussenrahmen traegt das Wegdruecken nach rechts,
   damit beide Leisten buendig stehen und nicht einzeln wandern. */
.ae-shf__filters {
	display: flex; flex-direction: column; align-items: flex-end;
	gap: 0.35rem; margin-left: auto;
}
.ae-shf__filters:empty { display: none; }
/* Ohne Deckkraft-Abschwaechung: Label und Zaehler lagen im hellen Theme bei
   4,1 bis 4,3:1 (Durchsicht 14.09.2026, B-2). Die Abstufung kommt allein
   ueber Schriftgroesse und Sperrung. */
.ae-shf__optik { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ae-shf__optik-label {
	font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
	color: var( --shf-bone ); margin-right: 0.1rem;
}
.ae-shf__optik-btn {
	/* 44 px ist die Mindestgroesse fuer Fingerbedienung, die dieses Plugin sich
	   im Kopf selbst gesetzt hat - die Filterknoepfe lagen als einzige darunter. */
	min-height: 44px; padding: 0.35rem 0.85rem;
	border: 1px solid rgba( 255, 255, 255, 0.18 ); border-radius: 999px;
	background: transparent; color: var( --shf-panel );
	font: inherit; font-size: 0.86rem; cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.12s;
}
.ae-shf__optik-btn:hover { border-color: var( --shf-accent ); }
.ae-shf__optik-btn:active { transform: scale( 0.96 ); }
.ae-shf__optik-btn.is-active {
	background: var( --shf-panel ); border-color: var( --shf-panel ); color: var( --shf-ink ); font-weight: 600;
}
/* Anzahl am Filterknopf: sagt vor dem Klick, wie viel dahintersteckt. */
.ae-shf__optik-n {
	margin-left: 0.4rem; font-size: 0.78em; font-variant-numeric: tabular-nums;
}

/* Interner Lueckenvermerk unter der Ausfuehrungs-Leiste. Bewusst als Fremdkoerper
   gestaltet - er soll auffallen und vor dem Livegang entfernt werden. */
.ae-shf__note--intern {
	margin: 0.15rem 0 0; max-width: 46ch;
	font-size: 0.78rem; line-height: 1.45; text-align: left;
	color: var( --shf-ink-soft );
	border: 1px dashed var( --shf-line ); border-radius: 4px;
	padding: 0.4rem 0.6rem;
	background: rgba( 255, 255, 255, 0.55 );
}
.ae-shf__note--intern[hidden] { display: none; }
.ae-shf__note-tag {
	display: inline-block; margin-right: 0.4rem;
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var( --shf-ink );
}

/*
 * "Zurueck nach oben" gibt es zweimal im Markup, aber immer nur einmal auf dem
 * Bildschirm:
 * - unter dem Schaufenster (.ae-shf__showcase-foot) - ab 1024 px, wo die linke
 *   Spalte mitlaeuft und der Knopf damit dauerhaft erreichbar bleibt,
 * - am Ende der Liste (.ae-shf__stage-foot) - darunter, wo es keine
 *   mitlaufende Spalte gibt.
 * Die Umschaltung steht im 1024-px-Block weiter unten.
 */
.ae-shf__showcase-foot { display: none; }

.ae-shf__stage-foot {
	display: flex; justify-content: center;
	margin-top: clamp( 1.5rem, 3vw, 2.5rem );
	padding-top: clamp( 1.25rem, 2.5vw, 2rem );
	border-top: 1px solid var( --shf-line );
}
.ae-shf__uplink {
	display: inline-flex; align-items: center; gap: 0.5rem;
	min-height: 44px; padding: 0.55rem 1.35rem 0.55rem 1.1rem;
	border: 1px solid var( --shf-edge ); border-radius: 999px;
	background: var( --shf-offwhite ); color: var( --shf-edge );
	font: inherit; font-size: 0.9rem; font-weight: 700; line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.16s;
}
.ae-shf__uplink:hover { border-width: 2px; box-shadow: 0 4px 14px -6px rgba( 0, 0, 0, 0.5 ); }
.ae-shf__uplink:active { transform: scale( 0.97 ); }
.ae-shf__uplink:focus-visible { outline: 2px solid var( --shf-edge ); outline-offset: 3px; }

/* V2b: Leiste unter dem Raster mit "Weitere ... Dekore ansehen" / "Wieder
   einklappen". Beide Knoepfe erben ihr Aussehen von .ae-shf__uplink, damit im
   Schaufenster nicht zwei Knopfsprachen nebeneinander stehen.
   Seit 4.1.0 stehen beide gleichzeitig da - sobald eine Stufe zugelegt wurde,
   ist der Rueckweg genauso wichtig wie der naechste Schritt. */
.ae-shf__mehr {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-top: clamp( 1rem, 2vw, 1.6rem );
}
.ae-shf__mehr-btn { padding-inline: 1.35rem; }

/*
 * Rueckweg von der Vorschau in die Liste - nur auf schmalen Bildschirmen.
 *
 * Ab 1024 px stehen Vorschau und Liste nebeneinander, dort gibt es nichts
 * zurueckzuspringen; der Knopf ist deshalb im 1024er-Block ausgeblendet.
 * Er sitzt bewusst UNTER der Beschriftung des Dekors: erst sieht man, was man
 * angetippt hat, dann den Weg zurueck.
 */
.ae-shf__tolist {
	display: inline-flex; align-items: center; gap: 0.5rem;
	align-self: center;
	min-height: 44px; margin: 0.9rem auto 0;
	padding: 0.5rem 1.2rem 0.5rem 1rem;
	border: 1px dashed var( --shf-edge ); border-radius: 999px;
	background: transparent; color: var( --shf-edge );
	font: inherit; font-size: 0.86rem; font-weight: 700; line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, transform 0.16s;
}
.ae-shf__tolist:hover { background: var( --shf-offwhite ); border-style: solid; }
.ae-shf__tolist:active { transform: scale( 0.97 ); }
.ae-shf__tolist:focus-visible { outline: 2px solid var( --shf-edge ); outline-offset: 3px; }

.ae-shf__featured-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp( 0.5rem, 1.5vw, 1.1rem );
}
/* Blaettern und Textur-Hinweis stehen auf dem Dekorbild, also auf einem Grund,
   der von hellem Ahorn bis zu schwarzem Schiefer reicht. Ein halbdurchsichtiges
   Dunkelgrau verschwand auf den dunklen Dekoren. Beide tragen deshalb seit
   Runde 9 (Kundenwunsch) denselben festen Kontrast: gebrochenes Weiss mit
   schmaler dunkler Kante - auf jedem Motiv sichtbar. */
.ae-shf__nav {
	flex: 0 0 auto;
	display: inline-grid; place-items: center;
	width: 56px; height: 56px;
	border: 1px solid var( --shf-edge ); border-radius: 50%;
	background: var( --shf-offwhite ); color: var( --shf-edge );
	box-shadow: 0 2px 10px -4px rgba( 0, 0, 0, 0.55 );
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.16s;
}
/*
 * Kein Farbwechsel beim Zeigen (Kundenwunsch Runde 9). Er war ohnehin nur zur
 * Haelfte wirksam: das Theme erzwingt in seinem Schaufenster-Block die
 * Textfarbe fuer jedes span und button (`.nat .ae-shf :is(p, span, li, button,
 * ...)`, hoehere Spezifitaet). Die Flaeche wurde dunkel, die Schrift blieb es -
 * der Knopf war fuer den Moment des Zeigens ein schwarzer Fleck. Jetzt bleibt
 * das Aussehen konstant, die Rueckmeldung kommt ueber Kante und Schatten.
 */
.ae-shf__nav:hover {
	border-width: 2px;
	box-shadow: 0 4px 14px -4px rgba( 0, 0, 0, 0.6 );
}
.ae-shf__nav:active { transform: scale( 0.92 ); }
.ae-shf__nav:focus-visible { outline: 2px solid var( --shf-edge ); outline-offset: 3px; }

.ae-shf__featured {
	position: relative; margin: 0;
	flex: 0 1 auto;
	height: min( 42vh, 430px ); /* gedeckelt, damit Meta + Buttons + Filmstrip sichtbar bleiben */
	aspect-ratio: 4 / 3;
	width: auto;
	max-width: calc( 100% - 140px );
	border-radius: var( --shf-radius );
	overflow: hidden;
	background: #0E1411;
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	box-shadow: 0 40px 80px -40px rgba( 0, 0, 0, 0.9 );
}
.ae-shf__featured-btn {
	position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; height: 100%;
}
.ae-shf__featured-layer {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
	opacity: 0;
	transition: opacity 0.5s cubic-bezier( 0.16,1,0.3,1 );
}
.ae-shf__featured-layer.is-current { opacity: 1; }
/* Steht dauerhaft, nicht erst beim Zeigen: dass sich das Dekor vergroessern
   laesst, muss man sehen koennen, ohne es vorher zu ahnen. Gleicher Kontrast
   wie die Blaetter-Knoepfe. */
.ae-shf__featured-zoomcue {
	position: absolute; right: 0.8rem; bottom: 0.8rem; z-index: 2;
	display: inline-flex; align-items: center; gap: 0.35rem;
	padding: 0.35rem 0.7rem; border-radius: 999px;
	background: var( --shf-offwhite ); border: 1px solid var( --shf-edge );
	color: var( --shf-edge ); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em;
	box-shadow: 0 2px 10px -4px rgba( 0, 0, 0, 0.55 );
	pointer-events: none;
}
/* Bleibt beim Zeigen unveraendert - gleiche Begruendung wie bei den
   Blaetter-Knoepfen oben. */

.ae-shf__featured-meta {
	margin: clamp( 1rem, 2.4vw, 1.6rem ) auto 0;
	max-width: 56ch; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
}
.ae-shf__featured-decor {
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: clamp( 1.3rem, 2.6vw, 1.8rem ); line-height: 1.1; letter-spacing: -0.01em; margin: 0;
}
.ae-shf__featured-coll { margin: 0; font-size: 0.95rem; font-weight: 600; color: var( --shf-accent ); }
.ae-shf__featured-spec { margin: 0.15rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var( --shf-bone ); opacity: 0.85; }
/* Kollektion und Artikelnummer stehen untereinander (4.4.1, Runde 15,
   Kunden-PDF S10): die Kollektion oben, darunter die Nummer als eigener
   Block. Kein Trennpunkt mehr dazwischen und kein Umbruch-Zufall, auf der
   Karte wie auf der Buehne. Das Theme erbt die Zeile und setzt nur noch
   Ziffernbreite und Farbe. */
.ae-shf__coll-name { display: block; }
.ae-shf__art { display: block; }
/* ---- Filmstrip ------------------------------------------------------- */
.ae-shf__strip-count {
	margin: clamp( 1.2rem, 2.6vw, 2rem ) 0 0; text-align: center;
	font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var( --shf-accent );
}
.ae-shf__strip {
	list-style: none; margin: 0.7rem 0 0; padding: 0.4rem 0.1rem 0.7rem;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
	scrollbar-width: thin; scrollbar-color: rgba( 255,255,255,0.25 ) transparent;
}
.ae-shf__strip::-webkit-scrollbar { height: 6px; }
.ae-shf__strip::-webkit-scrollbar-thumb { background: rgba( 255,255,255,0.2 ); border-radius: 999px; }
.ae-shf__thumb {
	flex: 0 0 auto; scroll-snap-align: center;
	width: 84px; height: 64px; padding: 0;
	border: 2px solid transparent; border-radius: 11px; overflow: hidden;
	background: #0E1411; cursor: pointer; position: relative;
	/* Keine Deckkraft 0,55 mehr: sie drueckte Dekorname, Kollektion, Nummer und
	   Masse der Karte auf 3,7:1 (Durchsicht 14.09.2026, B-2). Aktiv wird ueber
	   Rahmenfarbe und Anhebung markiert. */
	transition: border-color 0.25s, transform 0.16s;
}
.ae-shf__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Kategorie-Badge (4.4.2, Runde 15, Kunden-PDF S18): kleine Kapsel oben
   links ueber dem Bild, nur in der gemischten Ansicht "Alle" (view.js
   setzt sie). Sie liegt auf dem Bild, nicht im Textkoerper, damit die
   Kopfzeile Kollektion/Nummer und die Bildgroesse unangetastet bleiben.
   Die vierfach verschachtelte Regel ist Absicht: das Theme faerbt jeden
   span im Schaufenster mit .nat .ae-shf :is(p, span, ..., .ae-shf__stage-sub)
   ein; :is() nimmt die Spezifitaet seines staerksten Arguments (0,3,0),
   und das Theme laedt nach dem Plugin. Erst (0,4,0) haelt die helle
   Schrift auf der dunklen Kapsel. */
.ae-shf .ae-shf__strip .ae-shf__thumb .ae-shf__badge {
	position: absolute; top: 0.45rem; left: 0.45rem; z-index: 2;
	max-width: calc( 100% - 0.9rem ); overflow: hidden; text-overflow: ellipsis;
	padding: 0.18rem 0.5rem; border-radius: 999px;
	font-size: 0.62rem; font-weight: 700; line-height: 1.3;
	letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
	color: #FFFFFF; background: rgba( 27, 19, 11, 0.78 );
	pointer-events: none;
}
.ae-shf__thumb:hover { transform: translateY( -2px ); }
.ae-shf__thumb.is-active { border-color: var( --shf-accent ); }
.ae-shf__thumb:focus-visible { outline: 2px solid var( --shf-accent ); outline-offset: 2px; }

@media ( prefers-reduced-motion: reduce ) {
	.ae-shf__stage, .ae-shf__door-img, .ae-shf__featured-layer,
	.ae-shf__door { animation: none !important; transition: opacity 0.2s linear !important; }
}

/* ---- Gedockte Ansicht: Vorschau links, Sortiment rechts --------------
 *
 * Das Problem der bisherigen Fassung: Buehne oben, Raster darunter. Wer im
 * Raster nach unten scrollte, hatte die Vorschau nicht mehr im Bild - ein
 * Klick auf ein Dekor sah aus, als passiere nichts. Der naheliegende
 * Gegenzug (nach oben springen) kostet bei 196 Dekoren jedes Mal die
 * Position.
 *
 * Loesung ohne Sprung: zwei Spalten. Die Vorschau links dockt an der
 * Kopfzeile an und bleibt stehen (position: sticky), das Sortiment rechts
 * laeuft daran vorbei. Gescrollt wird ueberall die Seite - es gibt keinen
 * zweiten Scrollbereich, in dem das Rad haengenbleiben koennte. Am Ende des
 * Sortiments loest sich die Vorschau von selbst wieder.
 * -------------------------------------------------------------------- */
@media ( min-width: 1024px ) {
	/* Zwei gleich grosse Haelften: die Vorschau bekommt genauso viel Platz
	   wie das Sortiment. */
	.ae-shf__split {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		gap: clamp( 1.5rem, 2.6vw, 2.5rem );
		align-items: start;
	}

	/* EIN Block: Titel, Umschalter, Optik-Filter, Motiv und Beschriftung
	   docken gemeinsam an und wandern gemeinsam mit. */
	.ae-shf__showcase {
		position: sticky;
		top: var( --shf-dock-top );
		display: flex;
		flex-direction: column;
		gap: 0.9rem;
	}
	.ae-shf__showcase > * { margin: 0; }

	/* Kopf und Umschalter stapeln in der halben Breite - nebeneinander
	   waeren sie hier gequetscht. */
	.ae-shf__showcase .ae-shf__stage-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.55rem;
		margin-bottom: 0;
	}
	.ae-shf__showcase .ae-shf__filters { margin-left: 0; align-items: flex-start; }

	/* Hier laeuft die linke Spalte mit - der Knopf steht direkt unter dem
	   Schaufenster und bleibt beim Rollen erreichbar. Der Zwilling am Ende der
	   Liste wird dafuer still. */
	.ae-shf__showcase-foot {
		display: flex; justify-content: flex-start;
		margin-top: clamp( 1rem, 2vw, 1.5rem );
	}
	.ae-shf__stage-foot { display: none; }
	.ae-shf__showcase .ae-shf__cats { margin-bottom: 0; }

	/* Nebeneinander gibt es keinen Weg zurueck - man sieht beides gleichzeitig.
	   Der Knopf ist hier immer still, unabhaengig davon, was view.js gesetzt
	   hat. */
	.ae-shf__tolist { display: none !important; }

	/* Die Kategorie-Zeile bleibt EINZEILIG (Kundenwunsch Runde 10, seit Kork
	   7 Chips). In der gedockten Halbspalte reicht der Platz zwischen 1024 und
	   ~1340 px nicht fuer alle Chips - dort werden sie eine Stufe kompakter,
	   und statt umzubrechen rollt die Zeile seitlich (duenner Balken, gleiche
	   Mechanik wie der Dekor-Streifen auf dem Telefon). Der Text selbst wird
	   nicht gestaucht. */
	.ae-shf__showcase .ae-shf__cats {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 3px;
		scrollbar-width: thin;
	}
}
@media ( min-width: 1024px ) and ( max-width: 1339px ) {
	.ae-shf__showcase .ae-shf__cat { font-size: 0.84rem; padding: 0.36rem 0.6rem; }
}
@media ( min-width: 1024px ) {
	/* In der Spalte fuellt das Motiv die Breite. Die Pfeile wandern ins Bild -
	   daneben hatte jeder von ihnen 56 px Motivbreite gekostet. */
	.ae-shf__showcase .ae-shf__featured-row {
		position: relative;
		display: block;
		max-width: none;
	}
	.ae-shf__showcase .ae-shf__featured {
		width: 100%;
		max-width: none;
		height: auto;
		aspect-ratio: 4 / 3;
		/* An der Fensterhoehe gedeckelt: der ganze gedockte Block - Kopf,
		   Umschalter, Motiv, Beschriftung UND der Knopf "Zurueck nach oben" -
		   muss in den Bildschirm passen, sonst klebt er nicht, sondern rutscht
		   unten heraus. Der Vorbehalt ist seit Runde 9 um die Knopfzeile
		   groesser (27rem -> 32rem). */
		max-height: min( calc( 100vh - 32rem ), 520px );
		min-height: 200px;
	}
	.ae-shf__showcase .ae-shf__nav {
		position: absolute;
		top: 50%;
		z-index: 3;
		transform: translateY( -50% );
		/* Kein eigener Grund mehr: die gedockte Ansicht legt die Knoepfe
		   direkt aufs Motiv, dort gilt derselbe feste Kontrast wie oben. */
	}
	.ae-shf__showcase .ae-shf__nav--prev { left: 0.75rem; }
	.ae-shf__showcase .ae-shf__nav--next { right: 0.75rem; }
	.ae-shf__showcase .ae-shf__nav:active { transform: translateY( -50% ) scale( 0.94 ); }

	/* Beschriftung haengt an derselben linken Kante wie das Motiv darueber.
	   Die Mindesthoehe haelt die gedockte Saeule ruhig: ohne sie wuchs und
	   schrumpfte sie bei jedem Dekorwechsel um bis zu 50 px, je nachdem ob
	   die Technikzeile umbricht. */
	.ae-shf__showcase .ae-shf__featured-meta {
		margin-inline: 0;
		align-items: flex-start;
		text-align: left;
		min-height: 7rem;
	}
	.ae-shf__catalog .ae-shf__strip-count {
		margin-top: 0;
		text-align: left;
	}
}

/* ---- Ebene 3: Textur-Zoom ------------------------------------------- */
.ae-shf__zoom {
	position: fixed; inset: 0; z-index: 10000;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: clamp( 1rem, 4vw, 3rem );
	background: rgba( 6, 9, 7, 0.92 );
	-webkit-backdrop-filter: blur( 8px ); backdrop-filter: blur( 8px );
	opacity: 0; transition: opacity 0.32s ease;
}
.ae-shf__zoom.is-open { opacity: 1; }
.ae-shf__zoom-frame {
	position: relative; max-width: min( 1100px, 94vw ); max-height: 74vh;
	border-radius: var( --shf-radius ); overflow: hidden;
	box-shadow: 0 50px 120px -40px rgba( 0, 0, 0, 0.9 );
}
.ae-shf__zoom-img {
	display: block; width: auto; height: auto; max-width: 100%; max-height: 74vh; object-fit: contain;
	transform: scale( 1 );
}
.ae-shf__zoom.is-open .ae-shf__zoom-img { animation: ae-shf-kenburns 14s ease-in-out infinite alternate; }
@keyframes ae-shf-kenburns {
	from { transform: scale( 1.02 ) translate( 0, 0 ); }
	to   { transform: scale( 1.12 ) translate( -1.5%, 1.5% ); }
}
.ae-shf__zoom-close {
	position: absolute; top: clamp( 0.8rem, 3vw, 1.6rem ); right: clamp( 0.8rem, 3vw, 1.6rem );
	display: inline-grid; place-items: center; width: 48px; height: 48px;
	border: 1px solid rgba( 255,255,255,0.22 ); border-radius: 50%;
	background: rgba( 14, 20, 17, 0.7 ); color: var( --shf-panel ); cursor: pointer;
	transition: background-color 0.2s, transform 0.16s;
}
.ae-shf__zoom-close:hover { background: var( --shf-accent ); color: #1B130B; }
.ae-shf__zoom-close:active { transform: scale( 0.92 ); }
.ae-shf__zoom-bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.2rem;
	margin-top: 1.2rem; text-align: center;
}
.ae-shf__zoom-cap { margin: 0; color: var( --shf-panel ); font-size: 1rem; }
.ae-shf__zoom-cap strong { font-weight: 700; }
.ae-shf__zoom-cap span { color: var( --shf-bone ); opacity: 0.8; }

/* Technische Angaben (Runde 11.09.2026, Wortlaut seit Runde 15): jedes Teil
   ist eine Einheit und bricht nie in sich um ("1900 x 190 x 14 mm" bleibt
   zusammen); umgebrochen wird nur zwischen den Teilen. Der Trennpunkt haengt am Vorgaenger, damit er
   nie allein am Zeilenanfang steht. Gilt fuer Karte, Buehne und Zoom. */
.ae-shf__spec-part { white-space: nowrap; }
.ae-shf__spec-part:not( :last-child )::after { content: " ·"; }
/* "fehlt" steht rot, in allen drei Ansichten. */
.ae-shf__fehlt { color: #B3261E; font-weight: 700; }
.ae-shf__thumb-hint.is-klaerung,
.ae-shf__spec-part.is-klaerung { color: #B3261E; }
@media ( prefers-reduced-motion: reduce ) {
	.ae-shf__zoom.is-open .ae-shf__zoom-img { animation: none; }
}

/* Sperrt den Seiten-Scroll, solange der Textur-Zoom offen ist. */
.ae-shf-lock { overflow: hidden; }

/* Reine Datentraeger (nie sichtbar) */
.ae-shf__seeds { display: none; }
.ae-shf__empty { color: var( --shf-bone ); font-size: 1rem; padding: 1.4rem 0; }

/* ---- Mobile --------------------------------------------------------- */
@media ( max-width: 720px ) {
	.ae-shf__doors { grid-template-columns: 1fr; }
	.ae-shf__door { aspect-ratio: 16 / 10; min-height: 200px; }
	.ae-shf__stage-top { padding-right: 0; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
	.ae-shf__optik { margin-left: 0; width: 100%; }
	/* Mobile: Featured volle Breite, Pfeile als zentrierter Pager IM NORMALEN FLUSS
	   direkt unter dem Bild (kein Viewport-Rand, kein Overlap durch Sektions-CTA -> Tap geht nie ins Leere) */
	.ae-shf__featured-row { flex-wrap: wrap; row-gap: 0.7rem; }
	.ae-shf__featured { order: 0; flex: 1 0 100%; width: 100%; max-width: 100%; height: auto; }
	.ae-shf__nav { order: 1; width: 48px; height: 48px; }
	.ae-shf__nav--prev { margin-right: 0.6rem; }
	/* Mobile: Filmstrip als horizontale Scroll-Rail (statt viele Reihen) */
	.ae-shf__strip { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
}