/**
 * Compendion Retro-Katalog - Evercade-Cartridge-Uebersicht.
 *
 * Typ-Farben folgen dem Blaze/Evercade-Cartridge-Schema (Console rot, Arcade
 * lila, Computer blau, Super Pocket grün) ueber Palette-Tokens (vivid-*) - das
 * bringt Wiedererkennung UND Farbe gegen das DML-Magenta. Karten sind dunkle
 * Panels (surface-panel) mit Blaze-Akzent links; sie heben sich klar vom
 * Magenta-Hintergrund ab. Karten sind native <details> (eingeklappt =
 * Mosaik-Uebersicht). Pill 999px, Karte 1rem, Cover 0.375rem.
 *
 * @package Compendion_WP_Theme
 */

/* ============================================================
 * EVERCADE-KONFIGURATION — Typ-Farben + Typ-Selektoren
 * Für anderen Use Case: diesen Block ersetzen.
 *
 * Alles Evercade-Typ-Spezifische ist hier gebündelt: die fünf Typ-Farb-Tokens
 * (--crk-type-*) plus die data-type-/data-crk-value-/data-crk-typegroup-
 * Selektoren, die daraus die Akzent-, Pill-Punkt- und Scrubber-Farbe ableiten.
 * Die Tokens stehen in einem eigenen .crk-Block (zweite Deklaration neben dem
 * Layout-.crk weiter unten — Custom-Property-Auflösung ist reihenfolge-
 * unabhängig). Jeder data-type/-value/-typegroup matcht genau eine Regel pro
 * Element, daher ist die Bündelung kaskadenneutral.
 * ============================================================ */

/* Blaze-Cartridge-Farben aus der externen-Marken-Registry (Kontrastsystem §4.4,
 * Quelle 2): fester Markenwert (`--c-brand-external-*`) PLUS garantiert lesbarer
 * Text darauf (`--c-on-brand-external-*`) als untrennbares Carrier-Paar. Die
 * Fallback-Kette Registry → vivid-Preset → Hardcode haelt Sites ohne aktive
 * Palette lesbar (die Registry-Tokens werden nur bei aktiver Palette emittiert).
 * Werte sind identisch zum bisherigen vivid-Preset/Hardcode — kein visueller
 * Bruch, aber zentral gepflegt und vom Audit-Gate getragen. */
.crk {
	--crk-type-console:      var(--c-brand-external-console,      var(--wp--preset--color--vivid-red, #cf2e2e));
	--crk-type-arcade:       var(--c-brand-external-arcade,       var(--wp--preset--color--vivid-purple, #9b51e0));
	--crk-type-computer:     var(--c-brand-external-computer,     var(--wp--preset--color--vivid-cyan-blue, #0693e3));
	--crk-type-super-pocket: var(--c-brand-external-super-pocket, var(--wp--preset--color--vivid-green-cyan, #00d084));
	--crk-type-exp-builtin:  var(--c-brand-external-exp-builtin,  var(--wp--preset--color--glow, #7c3aed));
	/* Lesbarer Text auf der jeweiligen Markenfarbe (Carrier-Paar). Fallback nach
	 * Helligkeit der Marke: Super-Pocket-Gruen traegt dunklen Text, der Rest hellen. */
	--crk-on-type-console:      var(--c-on-brand-external-console, #fff);
	--crk-on-type-arcade:       var(--c-on-brand-external-arcade, #fff);
	--crk-on-type-computer:     var(--c-on-brand-external-computer, #fff);
	--crk-on-type-super-pocket: var(--c-on-brand-external-super-pocket, #111);
	--crk-on-type-exp-builtin:  var(--c-on-brand-external-exp-builtin, #fff);
}

/* data-type → Akzentfarbe + lesbarer on-Akzent (Carrier-Paar) der Karte /
 * Listenzeile / Cover-Drawer. `--crk-on-accent` greift ueberall, wo die Blaze-
 * Farbe als Flaeche dient und Text traegt (z. B. Episoden-Pille im Hover). */
.crk-cart[data-type="console"]      { --crk-accent: var(--crk-type-console);      --crk-on-accent: var(--crk-on-type-console); }
.crk-cart[data-type="arcade"]       { --crk-accent: var(--crk-type-arcade);       --crk-on-accent: var(--crk-on-type-arcade); }
.crk-cart[data-type="computer"]     { --crk-accent: var(--crk-type-computer);     --crk-on-accent: var(--crk-on-type-computer); }
.crk-cart[data-type="super-pocket"] { --crk-accent: var(--crk-type-super-pocket); --crk-on-accent: var(--crk-on-type-super-pocket); }
.crk-cart[data-type="exp-builtin"]  { --crk-accent: var(--crk-type-exp-builtin);  --crk-on-accent: var(--crk-on-type-exp-builtin); }
.crk-row[data-type="console"]       { --crk-accent: var(--crk-type-console);      --crk-on-accent: var(--crk-on-type-console); }
.crk-row[data-type="arcade"]        { --crk-accent: var(--crk-type-arcade);       --crk-on-accent: var(--crk-on-type-arcade); }
.crk-row[data-type="computer"]      { --crk-accent: var(--crk-type-computer);     --crk-on-accent: var(--crk-on-type-computer); }
.crk-row[data-type="super-pocket"]  { --crk-accent: var(--crk-type-super-pocket); --crk-on-accent: var(--crk-on-type-super-pocket); }
.crk-row[data-type="exp-builtin"]   { --crk-accent: var(--crk-type-exp-builtin);  --crk-on-accent: var(--crk-on-type-exp-builtin); }
.crk-cover__drawer[data-type="console"]      { --crk-accent: var(--crk-type-console);      --crk-on-accent: var(--crk-on-type-console); }
.crk-cover__drawer[data-type="arcade"]       { --crk-accent: var(--crk-type-arcade);       --crk-on-accent: var(--crk-on-type-arcade); }
.crk-cover__drawer[data-type="computer"]     { --crk-accent: var(--crk-type-computer);     --crk-on-accent: var(--crk-on-type-computer); }
.crk-cover__drawer[data-type="super-pocket"] { --crk-accent: var(--crk-type-super-pocket); --crk-on-accent: var(--crk-on-type-super-pocket); }
.crk-cover__drawer[data-type="exp-builtin"]  { --crk-accent: var(--crk-type-exp-builtin);  --crk-on-accent: var(--crk-on-type-exp-builtin); }

/* Filter-Pill-Farbpunkt je Hardware-Typ ("Konsolen" = Super Pocket + Evercade
 * EXP zusammengefasst, Punkt = SP-Grün). Die ::before-Punkt-Optik selbst sitzt
 * bei den Pill-Stilen weiter unten. */
.crk-pill[data-crk-value="console"]      { --crk-pill-dot: var(--crk-type-console); }
.crk-pill[data-crk-value="arcade"]       { --crk-pill-dot: var(--crk-type-arcade); }
.crk-pill[data-crk-value="computer"]     { --crk-pill-dot: var(--crk-type-computer); }
.crk-pill[data-crk-value="super-pocket"] { --crk-pill-dot: var(--crk-type-super-pocket); }
.crk-pill[data-crk-value="exp-builtin"]  { --crk-pill-dot: var(--crk-type-exp-builtin); }
.crk-pill[data-crk-value="super-pocket exp-builtin"] { --crk-pill-dot: var(--crk-type-super-pocket); }

/* Nummer-Scrubber: Typ-Gruppen-Farbe der Kürzel (HW = Super-Pocket-Grün). */
.crk-scrub__type[data-crk-typegroup="console"]  { --crk-scrub-typecolor: var(--crk-type-console); }
.crk-scrub__type[data-crk-typegroup="arcade"]   { --crk-scrub-typecolor: var(--crk-type-arcade); }
.crk-scrub__type[data-crk-typegroup="computer"] { --crk-scrub-typecolor: var(--crk-type-computer); }
.crk-scrub__type[data-crk-typegroup="hardware"] { --crk-scrub-typecolor: var(--crk-type-super-pocket); }

/* ===================== Ende EVERCADE-KONFIGURATION ===================== */

.crk {
	/* Bezugsrahmen fuer den absolut positionierten Scrubber (nicht-fixierter
	 * Zustand sitzt per `top` relativ zum .crk-Oberrand). */
	position: relative;
	margin-block: 1.5rem;
	/* Typ-Farb-Tokens (--crk-type-*) stehen im EVERCADE-KONFIGURATION-Block am
	 * Dateianfang. */
	/* Karten-Flaeche + Text: dunkles Panel statt pink-getoentem Surface. */
	--crk-card-bg:   var(--compendion-color-surface-panel, #22151e);
	--crk-card-ink:  var(--compendion-color-on-surface-panel, #ffffff);
	/* Max-Breite der zentrierten Kopf-/Steuer-Spalte (Statistik, Als-naechstes,
	 * Filter-Panel). Das Cover-/Listen-Grid bricht bewusst auf volle Breite aus,
	 * darum keine Klemmung auf `.crk` selbst, sondern pro Element. */
	--crk-max: 850px;
	/* Hover-Tint fuer klickbare Flaechen: dezenter Panel-Ink-Schleier,
	 * palettenunabhaengig. Einmal hier, genutzt von .crk-cart:hover
	 * (Inset-Overlay, laesst den Akzent-Border-left intakt) UND .crk-row:hover
	 * (Hintergrund) - eine Quelle fuer beide. */
	--crk-hover-tint: color-mix( in srgb, var(--crk-card-ink, #fff) 6%, transparent );

	/* Abweichung von der Katalog-Basis (compendion-catalog.css): die Trennlinie der
	 * Steuer-Zeile folgt dem Panel-Ink (`crk-card-ink`), nicht dem Seiten-`contrast`
	 * — die Zeile sitzt im dunklen Panel. */
	--cmp-cat-controls-rule: color-mix( in srgb, var(--crk-card-ink, #fff) 13%, transparent );
}

/* Typ→Akzent-Zuordnung (Karte + Listenzeile): siehe EVERCADE-KONFIGURATION am
 * Dateianfang. */

/* Client-Filter togglet `hidden` an Spielen, Zeilen, Karten, Jahr-Koepfen und
 * Panels. Autor-`display`-Regeln (flex/grid) schlagen sonst das UA-hidden. */
.crk [hidden] {
	display: none !important;
}

/* Intro (Seitentitel + Lead) --------------------------------------------- */

.crk__intro {
	margin: 0 0 1.6rem;
}

.crk__intro-title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.5rem;
	font-size: clamp( 1.8rem, 1.3rem + 2vw, 2.6rem );
	line-height: 1.1;
}

/* Retro-Icon (geteiltes Nav-SVG) auf Titelgroesse, in der Primaerfarbe als
 * Akzent gegen den Fliesstext. */
.crk__intro-title .compendion-nav-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--wp--preset--color--primary, currentColor);
}

.crk__intro-title .compendion-nav-icon svg {
	width: 1.15em;
	height: 1.15em;
}

.crk__intro-text {
	margin: 0;
	max-width: 60ch;
	font-size: 1.05rem;
	line-height: 1.55;
	opacity: 0.88;
}

/* Kopf ------------------------------------------------------------------- */

.crk__stats {
	font-size: 0.95rem;
	opacity: 0.8;
	margin: 0 0 0.9rem;
}

.crk__upcoming {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0.7rem 1rem;
	border-radius: 1rem;
	background: color-mix( in srgb, var(--wp--preset--color--contrast, #000) 8%, transparent );
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--contrast, #000) 22%, transparent );
}

.crk__upcoming-label {
	display: inline-flex;
	padding: 0.15rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.crk__upcoming-cart,
.crk__upcoming-src {
	font-size: 0.9rem;
	opacity: 0.85;
}

/* Toolbar + Filter --------------------------------------------------------- */

/* Steuer-Panel: Suche + Filter-Pills + Ansicht/Sortierung sitzen in EINER
 * Karte auf dem Surface-Panel-Token (= dieselbe Flaeche wie die Cover-Karten),
 * statt transparent auf dem Seiten-`base`. Auf DML ist `base` der Magenta-
 * Primary; das dunkle Panel bricht die Dominanz, auf ruhigen Paletten ist
 * `surface-panel` nur ein dezenter Tint nahe `base`. Rahmen + Text leiten sich
 * vom Panel-Ink ab -> palettenunabhaengig kontrastsicher. Card-Radius 1rem. */
.crk__toolbar {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-bottom: 1.25rem;
	/* border-box, damit das Panel mit Padding exakt die .crk-/Grid-Breite fuellt
	 * und rechts buendig mit den Karten abschliesst (ohne max-width-Klemmung). */
	box-sizing: border-box;
	width: 100%;
	padding: 1rem 1.1rem;
	border: 1px solid color-mix( in srgb, var(--crk-card-ink, #fff) 14%, transparent );
	border-radius: 1rem;
	background: var(--crk-card-bg);
	color: var(--crk-card-ink);
}

/* Zentrierte Kopf-/Steuer-Spalte (Stats, Als-Naechstes, Filter-Panel): klemmt auf
 * `--crk-max` und zentriert, SOBALD der Viewport diese Breite erreicht. Der
 * Breakpoint IST `--crk-max` (850px - Media Queries koennen kein var() lesen, darum
 * als Literal gespiegelt; immer zusammen mit `--crk-max` aendern). So waechst die
 * Spalte bis 850px mit und klemmt dann NAHTLOS, statt erst auf einem sehr breiten
 * Screen sichtbar von voller Breite auf 850px zu springen. Das vollbreit
 * ausbrechende Cover-/Listen-Grid bleibt davon unberuehrt. */
@media (min-width: 850px) {
	.crk__intro,
	.crk__stats,
	.crk__upcoming,
	.crk__toolbar {
		max-width: var(--crk-max);
		margin-inline: auto;
	}
}

/* Toolbar-Container (`crk__bar`/`crk__filters`/`crk__controls`), lose Pille
 * (`crk-pill`, inkl. Ansicht/Sortierung mit Sortier-Pfeil), Suchfeld und Reset-×
 * liegen jetzt in compendion-catalog.css (`cmp-*`); die Defaults dort SIND die
 * Retro-Werte. Hier bleiben nur Retro-Spezifika (Typ-Dots, Scrubber, Mosaik,
 * `crk__search`-Flex, mobiles Umbrechen). Refaktor 2026-06-16. */

.crk__search {
	flex: 1 1 16rem;
	display: flex;
	justify-content: stretch;
}

/* `crk__search-field` (Positions-Container) + `crk__search-input` liegen in
 * compendion-catalog.css (`cmp-search`/`cmp-search__input`). Das Clear-× behält
 * seine Retro-Box hier (Basis-Skelett kommt aus `cmp-search__clear`). */
.crk__search-clear {
	position: absolute;
	right: 0.4rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.5rem;
	height: 1.5rem;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 1.1rem;
	line-height: 1;
	opacity: 0.7;
	cursor: pointer;
}

.crk__search-clear:hover {
	opacity: 1;
}

/* Pill-Gruppe (`crk-pills`), lose Pille (`crk-pill`, inkl. Ansicht/Sortierung),
 * Sortier-Pfeil (`cmp-cat__sort-arrow`) und Reset-× liegen in
 * compendion-catalog.css (`cmp-*`, Defaults = Retro). Hier nur Retro-Spezifika: */

/* Label braucht eine Mindestbreite, damit die Pills sauber dahinter fluchten. */
.crk-pills__label {
	min-width: 4.5rem;
}

/* Blaze-Farbpunkt vor den Hardware-Typ-Pills (Legende + Wiedererkennung).
 * Kontrast-Ring, damit der Punkt auch direkt auf dem Primary-Pink klar
 * abgegrenzt ist (nie ohne Abgrenzung auf Pink). */
.crk-pills[data-crk-filter="hardware"] .crk-pill[data-crk-value]:not([data-crk-value=""])::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 999px;
	background: var(--crk-pill-dot, currentColor);
	box-shadow: 0 0 0 1.5px color-mix( in srgb, var(--wp--preset--color--contrast, #000) 38%, transparent );
	flex: 0 0 auto;
}

/* Typ→Pill-Punkt-Farbe (--crk-pill-dot): siehe EVERCADE-KONFIGURATION am
 * Dateianfang. */

/* Steuerleiste (`crk__controls`) liegt in compendion-catalog.css
 * (`cmp-cat__controls`); Trennlinien-Farbe via `--cmp-cat-controls-rule` oben. */

.crk__sortgroup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
}

/* Aufklapp-Buttons (Kompakt-Ansicht): zwei getrennte Buttons "Alle aufklappen"
 * / "Alle einklappen", je nach Zustand einzeln disabled. Eigene volle Zeile
 * (flex-basis: 100%), damit sie beim Cover/Kompakt-Wechsel nicht hässlich
 * neben der Sortierung umbrechen. */
.crk__expand-buttons {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.crk__expand-all {
	align-self: center;
	padding: 0.35rem 0.85rem;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--contrast, #000) 25%, transparent );
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s;
}

.crk__expand-all:hover:not( :disabled ),
.crk__expand-all:focus-visible:not( :disabled ) {
	border-color: color-mix( in srgb, var(--wp--preset--color--contrast, #000) 55%, transparent );
}

.crk__expand-all:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}


/* Gruppen-Trennkopf (volle Zeile im Grid, JS-injiziert) - Jahr ODER Typ
 * (Console/Arcade/Computer/Hardware bei Sortierung nach Nummer). */
.crk-group__head {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0.75rem 0 0.1rem;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding-bottom: 0.3rem;
	border-bottom: 2px solid color-mix( in srgb, var(--wp--preset--color--glow, #7c3aed) 70%, transparent );
}

.crk-group__head:first-child {
	margin-top: 0;
}

/* Sprung aus dem Alphabet-Scrubber landet den Kopf knapp unter dem oberen
 * Viewport-Rand (Platz fuer einen evtl. fixierten Site-Header). */
.crk-group__head {
	scroll-margin-top: 5rem;
}

.crk-group__count {
	font-size: 0.8rem;
	font-weight: 600;
	opacity: 0.6;
}

/* Cartridge-Karten ---------------------------------------------------------- */

.crk__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
	gap: 1rem;
	align-items: start;
}

/* Cover-Ansicht: dichtes Mosaik. Eingeklappte Kachel zeigt Cover +
 * Typ-Farbe (Akzentrahmen) + Nummer inline vor dem Titel - KEIN Typ-Label.
 * Klick oeffnet einen Detail-Drawer als eigene volle Grid-Zeile UNTER der Reihe
 * der Kachel (JS); die Kachel bleibt an ihrem Platz.
 *
 * Die Kachel-Innenregeln sind bewusst unter `.crk-cart` gescoped: die in den
 * Drawer geklonten Elemente tragen dieselben `crk-cart__*`-Klassen, sind aber
 * NICHT in einer `.crk-cart` -> sie behalten die normale (groessere) Detail-
 * Optik statt der Mosaik-Verdichtung. */
.crk__grid[data-crk-view="cover"] {
	grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
	gap: 0.7rem;
	/* Gleiche Kachelhoehe je Reihe (Titel 1- vs 2-zeilig) - das Cover-Bild bleibt
	 * unbeschnitten oben, die dunkle Karte fuellt nach unten auf. */
	align-items: stretch;
}

.crk__grid[data-crk-view="cover"] .crk-cart {
	padding: 0.55rem;
}

.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__head {
	flex-direction: column;
	align-items: stretch;
	gap: 0.45rem;
}

/* Einheitlicher Cover-Container im Evercade-Cartridge-Format (3:4 - die
 * IGDB-Cover sind exakt 3:4). Fremde Formate (quadratisch/16:9) werden per
 * object-fit: contain eingepasst und in der Blaze-Typ-Farbe geletterboxt (kein
 * Crop). Runde Ecken + Typ-Farbe am AEUSSEREN Container, nicht am Bild. */
.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__cover-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	padding: 0;
	border-radius: 0.5rem;
	background: var(--crk-accent, color-mix( in srgb, currentColor 12%, transparent ));
	overflow: hidden;
}

.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__cover {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__cover--empty {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	background: none;
}

/* Auf der Kachel: kein Typ-Label, kein Fortschritt/Chevron. */
.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__type-label,
.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__progress,
.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__sub,
.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__toggle {
	display: none;
}

/* Meta = zwei Spalten (nowrap): links die Nummer (eigenes Element, bleibt oben,
 * bricht NIE um), rechts der Titel (bricht bei Bedarf auf 2 Zeilen um) -
 * konsistent egal ob kurzer oder langer Titel. */
.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__meta {
	flex-flow: row nowrap;
	align-items: flex-start;
	column-gap: 0.4rem;
}

.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__type {
	flex: 0 0 auto;
}

/* Nummer: schlichter Akzent-Text (kein Chip/Badge), aber als eigene linke
 * Spalte klar vom Titel getrennt. */
.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__num {
	padding: 0;
	background: none;
	color: var(--crk-accent);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.82rem;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Kachel mit offenem Drawer markieren: kraeftiger Akzentrahmen + farbiger Schatten
 * (zusammen mit dem Drawer-Caret die optische Bruecke Kachel -> Drawer). z-index,
 * damit der Schatten ueber den Nachbarkacheln liegt. */
.crk__grid[data-crk-view="cover"] .crk-cart.is-drawer-open {
	/* Outline in `contrast` (immer hoch gegen die pro-Site-variable base) statt im
	 * Typ-Akzent - die vier Akzente fallen auf manchen Paletten unter 3:1 gegen
	 * base. Der Akzent bleibt als innerer Ring fuer die Typ-Identitaet (sitzt gegen
	 * die Kachel, nicht gegen base). */
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
	box-shadow:
		0 0 0 2px var(--crk-accent, var(--wp--preset--color--primary)),
		0 8px 22px -6px color-mix( in srgb, var(--crk-accent, var(--wp--preset--color--primary)) 60%, transparent );
	position: relative;
	z-index: 1;
}

.crk__grid[data-crk-view="cover"] .crk-cart.is-drawer-open .crk-cart__head {
	/* Pointer auch auf der offenen Kachel: ein erneuter Klick auf den Kopf
	 * schliesst den Drawer (handleTileClick), die Kachel bleibt also klickbar. */
	cursor: pointer;
}

/* In der Cover-Ansicht wird die Spielliste der Kachel NIE inline gezeigt - das
 * Aufklappen laeuft ausschliesslich ueber den Grid-Row-Drawer. Greift auch wenn
 * das native <details> doch aufgeht (Filter/Edge-Case). Nur mit aktivem JS
 * (`.crk-js`), damit No-JS weiter inline aufklappen kann. Direktes Kind, damit
 * die in den Drawer geklonte `.crk-cart__games` (nicht Kind einer `.crk-cart`)
 * sichtbar bleibt. */
.crk-js .crk__grid[data-crk-view="cover"] .crk-cart > .crk-cart__games {
	display: none;
}

/* --- Fortschritt + Status auf der Cover-Kachel ----------------------------
 * Overlay nur in der Cover-Ansicht: duenner Balken am unteren Cover-Rand +
 * N/M-Zaehler (Scrim als neutrales rgba ueber beliebigen Cover-Bildern, der
 * Fuellbalken in Akzentfarbe). */
.crk-cart__cover-meta {
	display: none;
}

.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__cover-wrap {
	position: relative;
}

.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__cover-meta {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.45rem 0.35rem 0.25rem;
	border-radius: 0 0 0.375rem 0.375rem;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.78 ), rgba( 0, 0, 0, 0 ) );
	line-height: 1;
}

.crk-cart__cover-count {
	flex: 0 0 auto;
	font-size: 0.62rem;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.85 );
}

.crk-cart__cover-bar {
	flex: 1 1 auto;
	height: 0.28rem;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.3 );
	overflow: hidden;
}

.crk-cart__cover-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--crk-accent, #fff);
}

/* Zustands-Eck-Badge oben rechts auf dem Cover (getrieben durch data-cart-state;
 * die drei Zustaende schliessen sich aus -> EIN ::after-Slot). ✓ = komplett
 * gespielt, „!" = erschienen aber kein Spiel gespielt: beide als kontrast-fester
 * Kreis (dunkler Grund + weisses Zeichen + Akzent-Ring = Typ-Identitaet, lesbar auf
 * jedem Cover/Akzent). „Bald" = noch nicht erschienen: als Text-Pille (auto-Breite,
 * Akzent-Text). Edition-Badge sitzt links (::before) -> keine Kollision. */
.crk__grid[data-crk-view="cover"] .crk-cart[data-cart-state="complete"] .crk-cart__cover-wrap::after,
.crk__grid[data-crk-view="cover"] .crk-cart[data-cart-state="unplayed"] .crk-cart__cover-wrap::after {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	width: 1.2rem;
	height: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.72 );
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	box-shadow: 0 0 0 2px var(--crk-accent, var(--wp--preset--color--primary)), 0 1px 3px rgba( 0, 0, 0, 0.5 );
}

.crk__grid[data-crk-view="cover"] .crk-cart[data-cart-state="complete"] .crk-cart__cover-wrap::after {
	content: "✓";
}

.crk__grid[data-crk-view="cover"] .crk-cart[data-cart-state="unplayed"] .crk-cart__cover-wrap::after {
	content: "!";
}

.crk__grid[data-crk-view="cover"] .crk-cart[data-cart-state="soon"] .crk-cart__cover-wrap::after {
	content: "Bald";
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	padding: 0.12rem 0.5rem;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.72 );
	color: var(--crk-accent, var(--wp--preset--color--primary));
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1.3;
	box-shadow:
		0 0 0 1px var(--crk-accent, var(--wp--preset--color--primary)),
		0 1px 3px rgba( 0, 0, 0, 0.5 );
}

/* Super-Pocket-Editions-Badge: der Hersteller-Teil des Cartridge-Titels
 * (data-edition, „Atari"/„Capcom"/„Neo Geo" …) als kleine Pille oben LINKS auf dem
 * Cover. Nur Super-Pocket-Karten tragen data-edition (PHP), nur Cover-Mosaik +
 * Drawer rendern es (Kompakt-Cover zu klein, Titel daneben traegt die Info). ::before,
 * damit es nicht mit dem ✓-Badge (::after, oben rechts) kollidiert. Kontrast-fest wie
 * das ✓-Badge: dunkler Scrim + Text/Ring in der Super-Pocket-Akzentfarbe (gruen). */
.crk-cover__drawer .crk-cart__cover-wrap[data-edition] {
	position: relative;
}

.crk__grid[data-crk-view="cover"] .crk-cart .crk-cart__cover-wrap[data-edition]::before,
.crk-cover__drawer .crk-cart__cover-wrap[data-edition]::before {
	content: attr(data-edition);
	position: absolute;
	top: 0.35rem;
	left: 0.35rem;
	max-width: calc( 100% - 0.7rem );
	padding: 0.12rem 0.42rem;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.72 );
	color: var(--crk-accent, var(--wp--preset--color--primary));
	font-size: 0.6rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow:
		0 0 0 1px var(--crk-accent, var(--wp--preset--color--primary)),
		0 1px 3px rgba( 0, 0, 0, 0.5 );
	pointer-events: none;
}

/* Status-Filter dimmt NICHT mehr (kein Transparency-Ansatz) - er blendet im JS
 * passende Cartridges aus; sichtbare Karten erscheinen voll. Unterscheidung
 * komplett/unvollstaendig allein ueber das ✓-Badge + den Fortschrittsbalken. */

/* Detail-Drawer: eigene volle Grid-Zeile (1/-1) unter der Kachel-Reihe. Inhalt
 * = geklontes Cover + Meta + Spielliste, in normaler Detail-Optik (Cover groesser,
 * Typ-Label + Fortschritt sichtbar). Hoehe wird per JS animiert. */
.crk-cover__drawer {
	grid-column: 1 / -1;
	position: relative;
}

/* Zeiger-Caret am oberen Rand des Drawers: nach oben gerichtetes Dreieck in der
 * Typ-Akzentfarbe. Das JS setzt `--crk-drawer-caret-left` auf die horizontale
 * Mitte der aktiven Kachel (relativ zur Drawer-Linkskante) -> der Drawer zeigt
 * sichtbar auf die zugehoerige Kachel. Sitzt im oberen Drawer-Rand (vor der
 * inner-margin) und zeigt in die Grid-Luecke zur Kachelreihe darueber. */
.crk-cover__drawer::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--crk-drawer-caret-left, 50%);
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 0.7rem solid transparent;
	border-right: 0.7rem solid transparent;
	border-bottom: 0.85rem solid var(--crk-accent, var(--wp--preset--color--primary));
	/* Kontrast-Halo um die DREIECKS-Alpha: `drop-shadow` folgt der Dreiecksform,
	 * `box-shadow` nur der rechteckigen Border-Box. Der Caret sitzt im transparenten
	 * Spalt UEBER dem Panel, also gegen die pro-Site-variable `base` - die vier
	 * Typ-Akzente koennen dort unter 3:1 fallen (DML: Magenta-base). Ring darum in
	 * `contrast` (immer hoch gegen base; gleiches Muster wie Filter-Dots + ✓-Badge),
	 * zweifach gestapelt fuer einen soliden ~2px-Saum. */
	filter:
		drop-shadow(0 0 1px var(--wp--preset--color--contrast))
		drop-shadow(0 0 1px var(--wp--preset--color--contrast));
	pointer-events: none;
	z-index: 2;
}

/* Drawer-Typ→Akzent (data-type wird per JS gesetzt): siehe
 * EVERCADE-KONFIGURATION am Dateianfang. */

/* Die Detail-Box nimmt die VOLLE Breite der Drawer-Zeile (= volle Listenbreite)
 * ein. Der GESAMTE Inhalt (Kopf = Cover+Meta UND Spielliste) fliesst per
 * CSS-Columns als Newspaper-Flow: Spalten <= 300px, 1.5rem Spaltenabstand,
 * `column-fill: balance` (Default) gleicht die Spaltenhoehen an. Auf schmalen
 * Viewports = eine Spalte. Keine JS-margin-left-Ausrichtung mehr noetig. */
.crk-cover__inner {
	box-sizing: border-box;
	margin-top: 0.7rem;
	padding: 1rem;
	border-radius: 1rem;
	background: var(--crk-card-bg);
	color: var(--crk-card-ink);
	border: 1px solid color-mix( in srgb, currentColor 14%, transparent );
	border-left: 4px solid var(--crk-accent, var(--wp--preset--color--primary));
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	column-width: 300px;
	column-gap: 1.5rem;
}

/* Kopf-Block (Cover + Meta) als Ganzes in einer Spalte halten - nie zwischen
 * zwei Spalten zerreissen. */
.crk-cover__drawer-head {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: 0.7rem;
	break-inside: avoid;
}

/* Groesseres Cover im Drawer: der 3:4-Container (cover-wrap) wird breiter, das
 * Bild fuellt ihn per object-fit: contain (Base-Regel). */
.crk-cover__drawer .crk-cart__cover-wrap {
	width: 6rem;
}

/* Spielliste im Drawer: KEINE eigene Columns-Box mehr - sie fliesst als normaler
 * Block im Columns-Flow von `.crk-cover__inner` mit (siehe oben). Nur Reset der
 * Liste-Margins. */
.crk-cover__drawer .crk-cart__games {
	margin: 0;
}

/* Einzelnes Spiel nie zwischen Spalten zerreissen (kann per flex-wrap 2-zeilig
 * werden). */
.crk-cover__drawer .crk-game {
	break-inside: avoid;
}

.crk-cart {
	border-radius: 1rem;
	background: var(--crk-card-bg);
	color: var(--crk-card-ink);
	border: 1px solid color-mix( in srgb, currentColor 14%, transparent );
	border-left: 4px solid var(--crk-accent, var(--wp--preset--color--primary));
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
	padding: 0.9rem 1rem;
	transition: box-shadow 0.15s, border-color 0.15s;
	/* Ganze Karte ist Klickziel (Drawer in Cover, natives/JS-Aufklappen in
	 * Kompakt/Ausgeklappt) - Cursor auf der vollen Flaeche, nicht nur am
	 * <summary>; das JS toggelt Klicks auf die Polsterung mit. */
	cursor: pointer;
}

.crk-cart[open] {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Subtiler Hover auf der ganzen Karte (alle Cartridge-Ansichten): derselbe
 * Tint wie die Listenzeilen, als Inset-Overlay ueber dem Karten-Grund (laesst
 * den Akzent-Border-left unberuehrt), plus leicht angehobener Schatten
 * (= [open]-Niveau). Spezifischere Cover-Regeln (.is-drawer-open) schlagen
 * das hier, der offene Drawer-Ring bleibt also erhalten. */
.crk-cart:hover {
	box-shadow:
		inset 0 0 0 999px var(--crk-hover-tint),
		0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Karte = <details>; Kopfzeile = <summary>, ohne nativen Marker. */
.crk-cart__head {
	display: flex;
	gap: 0.85rem;
	align-items: center;
	margin-bottom: 0;
	cursor: pointer;
	list-style: none;
}

.crk-cart__head::-webkit-details-marker {
	display: none;
}

.crk-cart__head:focus-visible {
	outline: 2px solid var(--crk-accent, var(--wp--preset--color--contrast));
	outline-offset: 2px;
	border-radius: 0.5rem;
}

.crk-cart[open] .crk-cart__head {
	margin-bottom: 0.7rem;
}

/* Cover-Container: einheitliches Evercade-Cartridge-Format 3:4 in ALLEN
 * Ansichten (Kompakt, Drawer, Cover). Das Bild wird per object-fit: contain
 * eingepasst (kein Crop), fremde Formate (quadratisch/16:9) in der Blaze-
 * Typ-Farbe geletterboxt. Radius + Typ-Farbe am Container, nicht am Bild.
 * Breite je Kontext (Kompakt 3.6rem default, Drawer 6rem, Cover 100%). */
.crk-cart__cover-wrap {
	flex: 0 0 auto;
	display: block;
	width: 3.6rem;
	aspect-ratio: 3 / 4;
	border-radius: 0.375rem;
	background: var(--crk-accent, color-mix( in srgb, currentColor 12%, transparent ));
	overflow: hidden;
	line-height: 0;
}

.crk-cart__cover {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.crk-cart__cover--empty {
	width: 100%;
	height: 100%;
}

.crk-cart__meta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.crk-cart__type {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.crk-cart__type-label {
	color: var(--crk-accent);
}

.crk-cart__num {
	display: inline-block;
	padding: 0 0.4rem;
	border-radius: 0.5rem;
	background: color-mix( in srgb, currentColor 14%, transparent );
	color: inherit;
	font-variant-numeric: tabular-nums;
}

.crk-cart__title {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.25;
}

.crk-cart__sub {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.crk-cart__legacy {
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	border: 1px dashed color-mix( in srgb, currentColor 40%, transparent );
	opacity: 0.75;
}

/* Zustands-Chip im Meta (Kompakt-Ansicht; in Cover ist `crk-cart__sub` ausgeblendet
 * -> dort greift das Cover-Eck-Badge). soon/„!"/✓ als kleine Akzent-Pille neben
 * „Legacy"; `partial` bekommt keinen Chip. Akzent = Typ-Farbe -> palettenfest. */
.crk-cart__state {
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.3;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	color: var(--crk-accent, var(--wp--preset--color--primary));
	background: color-mix( in srgb, var(--crk-accent, var(--wp--preset--color--primary)) 16%, transparent );
	box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--crk-accent, var(--wp--preset--color--primary)) 45%, transparent );
}

.crk-cart__progress {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.1rem;
}

.crk-cart__progress-bar {
	flex: 1 1 4rem;
	max-width: 9rem;
	height: 0.4rem;
	border-radius: 999px;
	background: color-mix( in srgb, currentColor 14%, transparent );
	overflow: hidden;
}

.crk-cart__progress-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--crk-accent, color-mix( in srgb, currentColor 55%, transparent ));
}

.crk-cart__progress-text {
	font-size: 0.78rem;
	opacity: 0.75;
	white-space: nowrap;
}

/* Aufklapp-Chevron rechts; dreht beim Oeffnen. */
.crk-cart__toggle {
	flex: 0 0 auto;
	align-self: center;
	width: 0.7rem;
	height: 0.7rem;
	opacity: 0.5;
	transition: opacity 0.15s;
}

.crk-cart__head:hover .crk-cart__toggle {
	opacity: 0.9;
}

.crk-cart__toggle::before {
	content: "";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	margin: 0 auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.1rem) rotate(45deg);
	transition: transform 0.15s ease;
}

.crk-cart[open] .crk-cart__toggle::before {
	transform: translateY(0.1rem) rotate(-135deg);
}

/* Spiel-Zeilen in der Karte ------------------------------------------------- */

.crk-cart__games {
	list-style: none;
	margin: 0;
	padding: 0.6rem 0 0;
	border-top: 1px solid color-mix( in srgb, currentColor 14%, transparent );
	font-size: 0.9rem;
}

.crk-game {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem;
	padding: 0.28rem 0.2rem;
	border-radius: 0.5rem;
}

.crk-game__mark {
	flex: 0 0 1rem;
	color: var(--crk-accent, currentColor);
	font-weight: 700;
}

/* Gespielt vs. ungespielt: Kontrast traegt der Haken (✓ vs. nichts) plus das
 * Schriftgewicht - KEINE Opacity-Abdunklung. */
.crk-game.is-played .crk-game__title {
	font-weight: 600;
}

.crk-game:not(.is-played) .crk-game__title {
	font-weight: 400;
}

.crk-game__platform {
	font-size: 0.75rem;
	opacity: 0.6;
}

.crk-game__year {
	font-size: 0.75rem;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

.crk-game__ep {
	margin-left: auto;
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	padding: 0.05rem 0.55rem;
	border-radius: 999px;
	color: inherit;
	background: color-mix( in srgb, currentColor 12%, transparent );
}

.crk-game__ep:hover,
.crk-game__ep:focus-visible {
	background: var(--crk-accent, var(--wp--preset--color--primary));
	/* Garantiert lesbarer Text auf der Blaze-Fuellung: `--crk-on-accent` ist je
	 * Typ gegen genau diese Markenfarbe berechnet (AA 4,5, Carrier-Paar §4.4).
	 * Fallback `contrast`, falls die Registry-Tokens fehlen (keine aktive Palette). */
	color: var(--crk-on-accent, var(--wp--preset--color--contrast));
}

/* DML: Episode-Tags in der Alle-Spiele-Liste (`.crk__list`, NICHT die Cartridge-
 * Karten im Grid) explizit in `contrast` (auf DML Weiss) statt des geerbten
 * Panel-Inks - `base` (Magenta) hatte zu wenig Kontrast auf dem dunklen Panel.
 * Der Hover faellt durch auf die ungescopte `.crk-game__ep:hover`-Regel
 * (Akzent-Fill + contrast-Text); diese (0,2,0)-Regel bleibt im Hover ebenfalls
 * contrast, kein Override noetig. */
.crk__list .crk-game__ep {
	color: var(--wp--preset--color--contrast);
}

.crk-game__upcoming {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* „Bald"-Tag pro Spielzeile (Alle-Spiele-Liste), wenn die Cartridge noch nicht
 * erschienen ist. Akzent-Pille (Typ-Farbe), dezenter als das gefuellte
 * „Als Naechstes"-Badge. */
.crk-game__soon {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	color: var(--crk-accent, var(--wp--preset--color--primary));
	background: color-mix( in srgb, var(--crk-accent, var(--wp--preset--color--primary)) 16%, transparent );
}

/* Alle-Spiele-Liste ---------------------------------------------------------- */

.crk__list {
	list-style: none;
	margin: 0;
	/* Die Liste sitzt als eigenes dunkles Panel (wie die Cover-/Kompakt-Karten
	 * und die Filterleiste) auf dem Magenta-`base` - so heben sich die vier Typ-
	 * Akzente (Streifen + Haken) kraeftig ab, ohne die alten Einzel-Hacks
	 * (contrast-Haarlinie am Streifen, Glow am Haken). `card-ink` als Textfarbe
	 * → Zeilen, Gruppenkoepfe und Hairlines leiten sich palettenunabhaengig vom
	 * Panel-Ink ab, nicht mehr vom durchscheinenden `base`/`contrast`. */
	background: var(--crk-card-bg);
	color: var(--crk-card-ink);
	border: 1px solid color-mix( in srgb, var(--crk-card-ink, #fff) 14%, transparent );
	border-radius: 1rem;
	padding: 0.5rem 0.75rem;
	/* Spiele-Zeilen je Kategorie in Spalten fliessen lassen (Ziel-Spaltenbreite
	 * 500px, wie der Cover-Drawer mit 300px). Die JS-injizierten Gruppenkoepfe
	 * spannen via column-span: all (s. u.) ueber alle Spalten und teilen den
	 * Spaltenfluss so in einen eigenen Block je Kategorie (Amiga / 1983 / B …).
	 * Ohne JS (keine Koepfe) fliessen alle Zeilen in einem Spaltenblock - ok. */
	column-width: 500px;
	column-gap: 1.5rem;
}

/* Gruppenkopf trennt die Spalten: er spannt ueber die volle Breite, beendet den
 * Spaltenblock der vorigen Kategorie und startet darunter einen neuen. Nur in
 * der Liste - im Grid (gleiche Klasse) ist column-span ohnehin wirkungslos. */
.crk__list > .crk-group__head {
	column-span: all;
}

.crk-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	/* Zeile nie zwischen zwei Spalten zerreissen (kann per flex-wrap 2-zeilig
	 * werden) - gleiches Schutzmuster wie .crk-cover__drawer .crk-game. */
	break-inside: avoid;
	padding: 0.45rem 0.6rem;
	/* Akzent-Streifen + Hairline auf dem dunklen Panel: die vier Typ-Akzente
	 * (rot/lila/blau/gruen) haben gegen `card-bg` genug Kontrast - kein inset-
	 * Hack mehr noetig. Zeilentrenner aus dem Panel-Ink (palettenunabhaengig). */
	border-left: 3px solid var(--crk-accent, var(--wp--preset--color--primary));
	border-bottom: 1px solid color-mix( in srgb, var(--crk-card-ink, #fff) 8%, transparent );
	font-size: 0.92rem;
}

.crk-row:hover {
	background: var(--crk-hover-tint);
}

.crk-row .crk-game__mark {
	/* Akzent-Haken - auf dem dunklen Panel ohne Glow-Halo lesbar. */
	color: var(--crk-accent, currentColor);
}

.crk-row__title {
	font-weight: 500;
}

.crk-row.is-played .crk-row__title {
	font-weight: 700;
}

.crk-row__cart {
	font-size: 0.78rem;
	opacity: 0.7;
}

/* Sonstiges ------------------------------------------------------------------ */

.crk__noresults {
	margin: 2rem 0;
	opacity: 0.7;
}

.crk__unmatched {
	margin-top: 2rem;
	font-size: 0.9rem;
	opacity: 0.85;
}

.crk__unmatched summary {
	cursor: pointer;
	font-weight: 600;
}

.crk__unmatched ul {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

@media (max-width: 600px) {
	/* Schmaleres Panel-Padding auf dem Handy, damit die Pills mehr Breite haben. */
	.crk__toolbar {
		padding: 0.8rem 0.85rem;
		gap: 0.7rem;
	}

	.crk__bar {
		flex-direction: column;
		align-items: stretch;
	}

	.crk__search {
		flex: 0 0 auto;
		justify-content: stretch;
	}

	.crk__search-field {
		max-width: none;
	}

	.crk-pills__label {
		min-width: 100%;
		margin-bottom: 0.1rem;
	}

	/* Cover-Mosaik auf dem Handy dreispaltig (iPhone 16 ~390px). */
	.crk__grid[data-crk-view="cover"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.55rem;
	}
}

/* Alphabet-/Jahr-/Nummer-Scrubber -------------------------------------------
 * Die Leiste ist NUR im fixed-Zustand sichtbar (JS setzt `hidden`, sobald man den
 * Grid-Top nach oben gescrollt hat) - dann `position: fixed` vertikal MITTIG im
 * Viewport (`top: 50vh` + translateY(-50%)), horizontal per `--crk-scrub-right`
 * an der .crk-/Grid-Kante (nicht in der Wide-Marge). Am Listen-Top ist sie
 * verborgen, daher braucht der Absolut-Zustand keine Top-Positionierung. Farben
 * aus den Palette-Tokens. */
.crk-scrub {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 50;
}

.crk-scrub--fixed {
	position: fixed;
	top: 50vh;
	right: var( --crk-scrub-right, 0 );
	transform: translateY( -50% );
}

/* Unsichtbarer Mess-Punkt am Listen-Oberrand (vom IntersectionObserver
 * beobachtet); nimmt keinen Platz und faengt keine Klicks. */
.crk-scrub-sentinel {
	display: block;
	height: 0;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.crk-scrub__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.07rem;
	padding: 0.5rem 0.2rem;
	border-radius: 999px;
	/* Dezenter Panel-Grund, damit die Buchstaben ueber beliebigem Zeilentext
	 * lesbar bleiben. */
	background: color-mix( in srgb, var(--crk-card-bg, #22151e) 72%, transparent );
	pointer-events: auto;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.crk-scrub__letter {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.15rem;
	margin: 0;
	padding: 0 0.25rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--crk-card-ink, var(--wp--preset--color--contrast, #fff));
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
	cursor: pointer;
	transition: opacity 0.12s, background 0.12s, color 0.12s;
}

.crk-scrub__letter:hover:not( .is-empty ) {
	opacity: 1;
}

/* Buchstabe ohne Gruppe: ausgegraut, nicht klickbar. */
.crk-scrub__letter.is-empty {
	opacity: 0.25;
	cursor: default;
}

/* Aktiver Buchstabe (oberster sichtbarer Kopf): gefuelltes Glow-Pill mit
 * weisser Schrift - dieselbe Akzentfarbe wie die Gruppenkopf-Unterstreichung. */
.crk-scrub__letter.is-active {
	opacity: 1;
	color: #fff;
	background: var(--wp--preset--color--glow, #7c3aed);
}

/* Jahr-Scrubber: Jahrzehnt-Labels ("80s") brauchen etwas mehr Hoehe als die
 * Einzelbuchstaben (es sind ohnehin nur wenige). */
.crk-scrub--decades .crk-scrub__letter {
	height: 1.4rem;
	font-size: 0.8rem;
	/* "80"/"21" - Jahr-/Jahrzehnt-Notation ohne Uppercase-Effekt. */
	text-transform: none;
}

/* Einzeljahr-Punkte zwischen den Jahrzehnt-Labels: kleiner + dezenter; Sprung
 * zu genau diesem Jahreskopf (Jahr als title-Tooltip). */
.crk-scrub--decades .crk-scrub__dot {
	min-width: 0;
	height: 0.82rem;
	font-size: 0.66rem;
	opacity: 0.5;
}

.crk-scrub--decades .crk-scrub__dot.is-active {
	opacity: 1;
	color: var(--wp--preset--color--glow, #7c3aed);
	background: transparent;
	transform: scale( 1.35 );
}

/* Nummer-Modus (Cartridge-Grid): Typ-Gruppen als reine, in der Typ-Farbe
 * EINGEFAERBTE 2-Zeichen-Kuerzel (HC/AC/PC/HW) - kein Dot. Farben aus den
 * --crk-type-*-Variablen (= dieselben wie die Filter-Pill-Dots; HW = Super-
 * Pocket-Gruen). Aktiv (is-active) ueberschreibt mit Glow-Pill + weisser Schrift. */
.crk-scrub__type {
	text-transform: none;
	color: var( --crk-scrub-typecolor, inherit );
	opacity: 1;
}

/* Typ-Gruppen→Scrubber-Kürzel-Farbe (--crk-scrub-typecolor): siehe
 * EVERCADE-KONFIGURATION am Dateianfang. */

/* Scrubber schmaler auf dem Handy. Diese Media-Overrides stehen im Quelltext
 * NACH den Basis-Scrubber-Regeln, damit sie bei gleicher Spezifitaet greifen. */
@media (max-width: 600px) {
	.crk-scrub__letter {
		min-width: 1.35rem;
		height: 0.95rem;
		font-size: 0.72rem;
	}
}

/* Sehr schmale Screens: Buchstaben auf kompakte Punkte reduzieren (statt die
 * Schnellnavigation ganz zu opfern - die Liste profitiert am meisten davon). */
@media (max-width: 400px) {
	.crk-scrub__letter {
		height: 0.85rem;
		font-size: 0.65rem;
	}
}

/* Fokus-Ringe -------------------------------------------------------------
 * Pointer (Tap/Klick): keinen Fokus-Ring zeigen - der Browser-Default (v. a.
 * auf iOS am <summary>) ist haesslich. Echte Tastatur-Navigation
 * (`:focus-visible`) bekommt einen sauberen Palette-Outline. Gilt fuer alle
 * interaktiven Elemente im Retro-Katalog (summary/Kacheln, Buttons, Pills).
 * Der Segmented-Control behaelt seinen eigenen, spezifischeren Inset-Outline. */
.crk :focus:not( :focus-visible ) {
	outline: none;
}

.crk :focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}