/*
 * Produktstyles für TCG-Einzelkarten. Basecoat (lib/basecoat) liefert Komponenten und Tokens,
 * aber keine Tailwind-Utilities; Layout-Helfer stehen deshalb hier. Farben und eigene --shop-*-Tokens setzt
 * theme.css. Bibliotheksdateien bleiben unverändert.
 */

:root {
    --page-max: 76rem;
    --gap: 1rem;
}

/* Alpine: bis zur Initialisierung verborgen (z. B. Text für abgelaufene Fristen). */
[x-cloak] { display: none !important; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background);
    color: var(--foreground);
}

/* Knöpfe in Markengrün: Basecoat hellt beim Überfahren mit Transparenz auf (weiße Schrift nur noch 3,5:1), deshalb
   eine deckende, dunklere Fläche (6,5:1). Fokusring in voller Stärke statt Basecoats halbtransparentem Ring (2:1). */
:root:not(.dark) :is(.btn:not([data-variant]), .btn[data-variant="primary"]):hover { background-color: #356a10; }
.btn:focus-visible { --tw-ring-color: var(--ring); }

/* Fließtext-Links in Markenfarbe und unterstrichen; Elemente mit eigener Klasse (Knöpfe, Kacheln) färben sich selbst.
   :where hält die Spezifität niedrig, damit Bereichsregeln (z. B. Links in Überschriften) gewinnen. */
:where(.site-main) a:not([class]) {
    color: var(--shop-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
:where(.site-main) a:not([class]):hover { text-decoration-thickness: 2px; }

/* Sprunglink zum Inhalt, sichtbar erst mit Tastaturfokus. */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 60;
    padding: .5rem .875rem;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus { top: .75rem; }
.site-main:focus { outline: none; }

/* === Kopfzeile (Pages/Shared/_Layout.cshtml) === */
/* Obere Zeile: Marke, Schnellsuche, Warenkorb und Konto; darunter die Navigation mit den Spielen. */
.site-header {
    background: var(--shop-header-bg);
    border-bottom: 1px solid var(--border);
}

.site-header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: .875rem 1.25rem;
}

/* Marke: Name aus der Konfiguration, davor das Kartensymbol (favicon.svg) als Bildmarke. */
.site-header .brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -.01em;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}
.site-header .brand::before {
    content: "";
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    background: url("../favicon.svg") center / contain no-repeat;
}

/* Suche der Kopfzeile: Spielauswahl, Suchfeld mit Vorschlagsliste darunter (_Vorschlaege), Suchknopf – wie aus einem Stück. */
.site-search { flex: 1 1 16rem; display: flex; max-width: 40rem; margin: 0; }
/*
   Spielauswahl wie bei Amazon: Die Beschriftung ist so breit wie das gewählte Spiel und kleiner gesetzt; die Auswahl
   liegt unsichtbar darüber (16px, damit iOS beim Antippen nicht zoomt). Ohne JavaScript (keine Klasse js am
   html-Element) ist die Auswahl selbst sichtbar und die Beschriftung entfällt.
*/
.site-search-spiel {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    gap: .3rem;
    max-width: 11rem;
    height: 2.5rem;
    padding-inline: .625rem .5rem;
    border: 1px solid var(--input);
    border-inline-end-width: 0;
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
    background-color: var(--muted);
    font-size: .75rem;
    line-height: 1;
    transition: background-color .15s;
}
.site-search-spiel:hover { background-color: var(--accent); }
.site-search-spiel:has(select:focus-visible) {
    z-index: 1;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.site-search-spiel-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-search-spiel-pfeil { flex: none; opacity: .7; }
.site-search-spiel select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 1rem;
    cursor: pointer;
}
html:not(.js) .site-search-spiel { padding: 0; }
html:not(.js) .site-search-spiel-text, html:not(.js) .site-search-spiel-pfeil { display: none; }
html:not(.js) .site-search-spiel select {
    position: static;
    padding-inline: .5rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: .75rem;
    opacity: 1;
}
.site-search-feld { position: relative; flex: 1 1 auto; min-width: 0; }
.site-search .input { width: 100%; height: 2.5rem; border-radius: 0; }
.site-search .btn { flex: none; width: 2.75rem; height: 2.5rem; border-start-start-radius: 0; border-end-start-radius: 0; }

.site-search-vorschlaege {
    position: absolute;
    z-index: 50;
    inset-inline: 0;
    top: calc(100% + .25rem);
    max-height: min(32rem, 70vh);
    overflow-y: auto;
    padding: .25rem;
    border: 1px solid var(--border);
    border-radius: .5rem;
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: 0 10px 30px rgb(0 0 0 / .25);
}
.site-search-vorschlaege:empty { display: none; }
.site-search-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .375rem .5rem;
    border-radius: .375rem;
    color: inherit;
    text-decoration: none;
}
.site-search-option:hover, .site-search-option[aria-selected="true"] { background: var(--accent); color: var(--accent-foreground); }
.site-search-option .card-image { width: 2.5rem; }
.site-search-option-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.site-search-option-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-search-option-set { display: flex; align-items: center; gap: .3rem; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-search-option-preis { flex: none; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.site-search-option-preis .muted { font-weight: 400; }
.site-search-alle { justify-content: center; margin-top: .125rem; padding-block: .5rem; border-top: 1px solid var(--border); border-radius: 0 0 .375rem .375rem; font-size: .875rem; font-weight: 600; }
.site-search-leer { padding: .5rem; font-size: .875rem; }

.site-account {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
}

/* Anmelden/Registrieren dürfen schrumpfen (kein seitliches Scrollen). */
.site-account > a.btn:not(.site-cart) { flex-shrink: 1; min-width: 0; }
.site-cart { flex: none; }
.site-cart svg { flex: none; }
.site-cart[aria-current="page"] { background: var(--accent); color: var(--accent-foreground); }

/* Anzahl der Positionen im Warenkorb (Teilansicht _WarenkorbAnzahl), rund und auch schmal neben dem Symbol sichtbar. */
.site-cart-count {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .375rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Kontomenü: Symbol-Knopf, Menü rechtsbündig unter dem Knopf, nie breiter als der Bildschirm. */
.site-account-menu { flex: none; }
.site-account-menu > button[data-current="true"] { background: var(--accent); color: var(--accent-foreground); }
.site-account-menu > [data-popover] { min-width: 13rem; max-width: min(18rem, calc(100vw - 2rem)); }
.site-account-menu-kopf {
    flex-direction: column;
    padding: .375rem .5rem .5rem;
    font-size: .8rem;
    line-height: 1.3;
}
/* Langer Anzeigename (bis 60 Zeichen) wird mit … gekürzt statt das Menü zu verbreitern. */
.site-account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .875rem; }
.site-account-menu [role="menuitem"] { cursor: pointer; }
.site-account-menu [role="menuitem"][aria-current="page"] { font-weight: 600; }
.site-account-menu [role="separator"] { margin: .25rem -.25rem; border-top: 1px solid var(--border); }

.site-account form {
    margin: 0;
}

/* Navigation: alle Karten, Neuheiten, je Spiel ein Einstieg, dann Kontobereiche. Schmal seitlich scrollbar
   (nur die Leiste, nie die Seite). */
.site-nav {
    background: var(--shop-nav-bg);
    border-top: 1px solid var(--border);
}

.site-nav-inner {
    display: flex;
    align-items: stretch;
    gap: .25rem;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 .75rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.site-nav a {
    flex: none;
    padding: .7rem .65rem;
    border-bottom: 3px solid transparent;
    color: var(--foreground);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.site-nav a:hover { color: var(--primary); }

/* Fokus innen gezeichnet: die seitlich scrollbare Leiste würde einen äußeren Rahmen oben und unten abschneiden. */
.site-nav a:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

.site-nav a[aria-current="page"] {
    border-bottom-color: var(--shop-brand);
    color: var(--primary);
    font-weight: 600;
}

.site-nav-trenner { flex: 1 0 1rem; }

@media (max-width: 48rem) {
    .site-header-top { gap: .625rem .75rem; padding: .75rem 1rem; }
    .site-search { order: 3; flex-basis: 100%; max-width: none; }
    .site-search-spiel { max-width: 8rem; }
    /* Schmal: Die Vorschlagsliste reicht über die ganze Suchzeile statt nur unter das Suchfeld. */
    .site-search { position: relative; }
    .site-search-feld { position: static; }
    .site-search-option-preis { display: none; }
}

@media (max-width: 30rem) {
    .site-header .brand { gap: .45rem; font-size: 1.05rem; }
    .site-header .brand::before { width: 1.9rem; height: 1.9rem; }
    .site-account { gap: .25rem; }
    /* Nur Symbol und Anzahl, der Name bleibt für Screenreader. Registrieren bleibt über Anmelden und die Startseite erreichbar. */
    .site-cart-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .site-register { display: none; }
}

.site-main {
    flex: 1;
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 1.75rem 1.25rem 3.5rem;
}

/* === Fußzeile: dunkel, in Spalten (Marke, Spiele, Einkaufen, Konto), darunter die Shopzeile. === */
.site-footer {
    background: var(--shop-footer-bg);
    color: var(--shop-footer-fg);
    font-size: .9rem;
}

.site-footer-inner {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 2.75rem 1.25rem 2.25rem;
}

.site-footer h2 { margin-bottom: .875rem; color: var(--shop-footer-heading); font-size: .95rem; font-weight: 700; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--shop-footer-accent); text-decoration: underline; text-underline-offset: 3px; }
.site-footer :focus-visible { outline: 2px solid var(--shop-footer-accent); outline-offset: 2px; border-radius: 2px; }

.site-footer-name {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--shop-footer-heading) !important;
    font-size: 1.15rem;
    font-weight: 800;
}
.site-footer-name::before {
    content: "";
    width: 2rem;
    height: 2rem;
    background: url("../favicon.svg") center / contain no-repeat;
}
.site-footer-brand p { margin-top: .875rem; max-width: 24rem; color: var(--shop-footer-muted); line-height: 1.6; }

.site-footer-bottom {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgb(255 255 255 / .08);
    color: var(--shop-footer-muted);
    font-size: .825rem;
    text-align: center;
}

@media (max-width: 56rem) {
    .site-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 30rem) {
    .site-footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

.muted {
    color: var(--muted-foreground);
}

/*
 * Nur für Screenreader. Basecoat liefert keine Tailwind-Utilities (nur .field>.sr-only{width:auto} in
 * @layer components); diese Regel ist ungeschichtet und gewinnt deshalb auch innerhalb von .field.
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hinweis bei fehlgeschlagenen htmx-Anfragen (wwwroot/js/site.js): unten im Sichtbereich, auch weit gescrollt. */
.htmx-fehler { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50; max-width: 40rem; margin: 0 auto; }
.htmx-fehler .alert { box-shadow: 0 4px 16px rgb(0 0 0 / .15); }

.error-page { max-width: 40rem; }

/* Layout-Helfer */
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.grid-cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.page-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }

/* === Katalog === */
/* Kartenbild (Pages/Shared/_CardImage.cshtml): Bis das Bild geladen ist ([data-loading]), pulsiert die Fläche wie
   Basecoats .skeleton; das Bild liegt darüber. Ohne Bild zeigt es card-placeholder.svg (Alpine tauscht die Quelle). */
.card-image {
    position: relative;
    display: inline-block;
    flex: none;
    width: 8rem;
    aspect-ratio: 63 / 88;
    border-radius: .375rem;
    overflow: hidden;
    background: var(--muted) url("../img/card-placeholder.svg") center / cover no-repeat;
}
.card-image[data-size="sm"] { width: 3.5rem; }
.card-image[data-size="lg"] { width: 14rem; }
.card-image img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.card-image[data-loading] { background: none; }
.card-image[data-loading]::before { content: ""; position: absolute; inset: 0; background: var(--input); animation: var(--animate-pulse); }

/* Kartensuche (Pages/Katalog/Suche.cshtml) */
.katalog-suchfelder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.katalog-suchfelder .field { flex: 1 1 12rem; }
.katalog-suchfelder .katalog-suchfeld { flex: 3 1 16rem; }
.katalog-treffer { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap); }
.katalog-treffer-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.katalog-treffer-titel { flex: 1 1 12rem; min-width: 0; }
.katalog-treffer-titel h2 { font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }
.katalog-tabelle { overflow-x: auto; }
.katalog-tabelle td { vertical-align: middle; }
.katalog-weitere summary { cursor: pointer; padding: .5rem 0; color: var(--muted-foreground); }

/* === Gutscheine und Zahlung === */
.voucher-page .section-title { font-size: 1.125rem; font-weight: 600; }
.voucher-figures { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.voucher-figure { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.voucher-columns { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.voucher-legal { font-size: .875rem; }
.voucher-legal-list { list-style: disc; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.voucher-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .925rem; }
.voucher-check input { margin-top: .2rem; flex: none; }
.voucher-note { display: block; font-size: .8rem; }
.voucher-page .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-scroll { width: 100%; overflow-x: auto; }
.payment-result { max-width: 40rem; }
.test-payment-banner { border-style: dashed; border-width: 2px; }

/* === Konten === */
.auth-page { display: flex; justify-content: center; }
.auth-page > .card { width: 100%; max-width: 30rem; }
.auth-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .875rem; }
.auth-links a { color: var(--muted-foreground); }
.auth-links a:hover { color: var(--foreground); }
.auth-providers { display: flex; flex-direction: column; gap: .5rem; }
.auth-providers form, .auth-providers .btn { width: 100%; }
.auth-divider { display: flex; align-items: center; gap: .75rem; color: var(--muted-foreground); font-size: .875rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.field-hint { color: var(--muted-foreground); font-size: .875rem; }
.field-hint a { text-decoration: underline; text-underline-offset: 4px; }
.field-error { color: var(--destructive); font-size: .875rem; }
.konto-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.konto-vorgaben { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.konto-facts { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; margin: 0; }
.konto-facts dt { color: var(--muted-foreground); }
.konto-facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; overflow-wrap: anywhere; }
.konto-links { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.konto-link { text-decoration: none; color: inherit; transition: border-color .15s; }
.konto-link:hover, .konto-link:focus-visible { border-color: var(--foreground); }
.address-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.address-entry { display: flex; flex-direction: column; gap: 1rem; }
.address-entry address { font-style: normal; line-height: 1.5; }
.address-entry form { margin: 0; }
.address-row { display: grid; gap: var(--gap); grid-template-columns: minmax(6rem, 10rem) 1fr; }
@media (max-width: 30rem) {
    .konto-facts { grid-template-columns: 1fr; }
    .konto-facts dd { margin-bottom: .5rem; }
    .address-row { grid-template-columns: 1fr; }
}

/* === Admin === */
.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
}

.admin-nav a {
    padding: .25rem .5rem;
    border-radius: var(--radius-md, .375rem);
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: .9rem;
}

.admin-nav a:hover,
.admin-nav a[aria-current="page"] {
    color: var(--foreground);
    background: var(--muted);
}

.admin-section-title { font-size: 1.125rem; font-weight: 600; }
/* Zweiter Abschnitt in derselben Karte (Katalog-Sync: Spieldaten unter den Spielen). */
.admin-subsection { margin-top: 1.5rem; }
.admin-small { font-size: .8rem; }
.admin-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Basecoat setzt .table td auf nowrap; ohne Umbruch liefe der Fehlertext über die Nachbarspalten. */
.admin-error-text { font-size: .8rem; max-width: 24rem; white-space: normal; overflow-wrap: anywhere; }
/* Zellen mit mehrzeiligem Markup (Spielwerte): umbrechen wie Fließtext, ohne die Einrückung des Markups wie .admin-wrap. */
.admin-text { min-width: 12rem; white-space: normal; overflow-wrap: anywhere; }
.admin-count { font-size: .875rem; }
.admin-list { display: flex; flex-direction: column; gap: .25rem; padding-left: 1rem; list-style: disc; }

.admin-kpi-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.admin-kpi { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; text-decoration: none; color: inherit; }
a.admin-kpi:hover { border-color: var(--ring); }
.admin-kpi[data-attention="true"] { border-color: var(--destructive); }
.admin-kpi-label { font-size: .875rem; color: var(--muted-foreground); }
.admin-kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }

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

.admin-dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .375rem 1rem; }
.admin-dl dt { color: var(--muted-foreground); font-size: .875rem; }
.admin-dl dd { margin: 0; overflow-wrap: anywhere; }

.admin-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.admin-filter .field { width: auto; min-width: 12rem; flex: 0 1 16rem; }

.admin-form { max-width: 48rem; }
.admin-form-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.admin-checks { border: 0; padding: 0; margin: 0; }

.admin-inline-forms { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.admin-inline-forms form { margin: 0; }
.admin-inline-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.admin-inline-form .field { width: 10rem; }
.admin-sync-action { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0; }

.admin-field-error { color: var(--destructive); font-size: .8rem; margin-top: .25rem; }

.admin-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

.table td.admin-num,
.table th.admin-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Schmale Bildschirme: ausgewählte Tabellen als gestapelte Karten statt Querscrollen. */
@media (max-width: 40rem) {
    .admin-stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .admin-stack-table,
    .admin-stack-table tbody,
    .admin-stack-table tr,
    .admin-stack-table td { display: block; width: 100%; }
    .admin-stack-table tr { border-bottom: 1px solid var(--border); padding: .5rem 0; }
    .admin-stack-table td { border: 0; padding: .25rem 0; text-align: left; white-space: normal; }
    .admin-stack-table td.admin-num { text-align: left; }
    .admin-stack-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .75rem;
        color: var(--muted-foreground);
    }
    .admin-dl { grid-template-columns: 1fr; gap: .125rem; }
    .admin-dl dd { margin-bottom: .375rem; }
}

/* === Einkaufslisten und Stöbern === */
/* Stöbern (Pages/Stoebern), Produktseite (Pages/Einzelkarte), Listen (Pages/Listen), Startseite. */
.stoebern-suche { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.stoebern-suche .field { flex: 1 1 12rem; }
.stoebern-suche .stoebern-suchfeld { flex: 3 1 16rem; }
.stoebern-schnellfilter { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.stoebern-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .925rem; cursor: pointer; }
.stoebern-check input { flex: none; }
.stoebern-weitere summary { cursor: pointer; color: var(--muted-foreground); padding: .25rem 0; }
.stoebern-filterfelder { display: grid; gap: .75rem; margin-top: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
/* Auswahlfelder nehmen sonst die Breite der längsten Option an (Sets des ganzen Katalogs) und ragen aus ihrer Spalte. */
.stoebern-filterfelder .select { width: 100%; }
/* Listenende mit „Weitere Karten laden“ (lädt automatisch nach, sobald sichtbar). Der Link bleibt während der Anfrage
   sichtbar, damit ein Tastaturfokus darauf nicht verloren geht (site.js setzt ihn danach auf die erste neue Kachel). */
.stoebern-pager { justify-content: center; min-height: 2.5rem; }
/* Kopf mit Umschalter „Nur verfügbare“ / „Alle Karten“ neben der Überschrift; bei „Alle Karten“ fallen die Angebotsfilter
   aus dem Raster (display: contents hält sie sonst als Teil des Rasters). */
.stoebern-titel { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
/* Logo des gewählten Spiels rechts neben dem Umschalter (Pages/Stoebern/_TitelLogo.cshtml), mit etwas mehr Abstand
   und auf die Inhaltsbreite zugeschnitten (--logo-breite, siehe „Spiele: Logos“). */
.stoebern-titel-logo { margin-left: .75rem; }
/* Schmal steht das Logo in eigener Zeile, dann bündig links. */
@media (max-width: 36rem) { .stoebern-titel-logo { margin-left: 0; } }
.stoebern-titel-logo .spiel-logo img { height: 2.5rem; aspect-ratio: var(--logo-breite) / 120; object-fit: cover; }
.stoebern-angebotsfilter:not([hidden]) { display: contents; }
.stoebern-hinweis { font-size: .875rem; }

/* Magic-Filter (nur mit Spiel Magic): eigener Abschnitt unter den übrigen Filtern, Farbauswahl als Manasymbole. */
.stoebern-magic, .stoebern-pokemon, .stoebern-yugioh, .stoebern-onepiece, .stoebern-lorcana, .stoebern-riftbound { margin: 1rem 0 0; padding: .875rem 0 0; border: 0; border-top: 1px solid var(--border); min-width: 0; }
.stoebern-magic-titel, .stoebern-pokemon-titel, .stoebern-yugioh-titel, .stoebern-onepiece-titel, .stoebern-lorcana-titel,
.stoebern-riftbound-titel { padding: 0; font-weight: 600; }
.stoebern-magic .stoebern-filterfelder, .stoebern-pokemon .stoebern-filterfelder, .stoebern-yugioh .stoebern-filterfelder,
.stoebern-onepiece .stoebern-filterfelder, .stoebern-lorcana .stoebern-filterfelder, .stoebern-riftbound .stoebern-filterfelder { margin-top: .5rem; }
.stoebern-farbfilter { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: .75rem; }
.stoebern-magic .stoebern-hinweis, .stoebern-pokemon .stoebern-hinweis, .stoebern-yugioh .stoebern-hinweis, .stoebern-onepiece .stoebern-hinweis,
.stoebern-lorcana .stoebern-hinweis, .stoebern-riftbound .stoebern-hinweis { margin-top: .75rem; }
.stoebern-pokemon .field .stoebern-hinweis, .stoebern-yugioh .field .stoebern-hinweis, .stoebern-onepiece .field .stoebern-hinweis,
.stoebern-lorcana .field .stoebern-hinweis, .stoebern-riftbound .field .stoebern-hinweis { margin-top: .25rem; font-size: .8125rem; }
.stoebern-yugioh-mehr, .stoebern-riftbound-mehr { margin-top: .75rem; }
.stoebern-yugioh-mehr > summary, .stoebern-riftbound-mehr > summary { cursor: pointer; font-size: .875rem; font-weight: 500; }
.link-pfeile { margin: 0; padding: 0; border: 0; min-width: 0; }
.link-pfeile-raster { display: grid; grid-template-columns: repeat(3, 2rem); gap: .25rem; margin-top: .375rem; }
.link-pfeil { position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: var(--radius-md, .375rem); cursor: pointer; font-size: 1rem; line-height: 1; }
.link-pfeil input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.link-pfeil:has(input:checked) { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.link-pfeil:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.link-pfeile-mitte { width: 2rem; height: 2rem; }
/* Wertebereiche (One Piece, Lorcana, Riftbound): je Paar „ab/bis“ zwei Spalten, die Paare so breit wie zwei Spalten des Rasters darüber. */
.stoebern-onepiece .op-wertebereiche, .stoebern-lorcana .op-wertebereiche, .stoebern-riftbound .op-wertebereiche { margin-top: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24.75rem), 1fr)); }
.op-wertepaar { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
/* Farben (One Piece, Lorcana-Tinten, Riftbound-Domänen): Kontrollkästchen unsichtbar über einem Chip mit Farbpunkt; Zustand und Fokus zeigt der Chip. */
.op-farben { margin: .75rem 0 0; padding: 0; border: 0; min-width: 0; }
.op-farben-auswahl { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .375rem; }
.op-farbe { position: relative; display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: .875rem; }
.op-farbe input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.op-farbe-punkt { width: .75rem; height: .75rem; border-radius: 50%; border: 1px solid rgb(0 0 0 / .25); background: var(--op-farbe); }
.op-farbe:has(input:checked) { border-color: var(--foreground); background: var(--accent); font-weight: 600; }
.op-farbe:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.op-farbe[data-farbe="rot"] { --op-farbe: #c8102e; }
.op-farbe[data-farbe="gruen"] { --op-farbe: #00843d; }
.op-farbe[data-farbe="blau"] { --op-farbe: #0072ce; }
.op-farbe[data-farbe="lila"] { --op-farbe: #7d3c98; }
.op-farbe[data-farbe="schwarz"] { --op-farbe: #1a1a1a; }
.op-farbe[data-farbe="gelb"] { --op-farbe: #f2c500; }
.op-farbe[data-farbe="bernstein"] { --op-farbe: #f4a81d; }
.op-farbe[data-farbe="amethyst"] { --op-farbe: #7c4182; }
.op-farbe[data-farbe="smaragd"] { --op-farbe: #2a8934; }
.op-farbe[data-farbe="rubin"] { --op-farbe: #d1213c; }
.op-farbe[data-farbe="saphir"] { --op-farbe: #0089c3; }
.op-farbe[data-farbe="stahl"] { --op-farbe: #8a96a3; }
.op-farbe[data-farbe="fury"] { --op-farbe: #d33a2c; }
.op-farbe[data-farbe="calm"] { --op-farbe: #3a9a4c; }
.op-farbe[data-farbe="mind"] { --op-farbe: #2f78c4; }
.op-farbe[data-farbe="body"] { --op-farbe: #ea8a24; }
.op-farbe[data-farbe="chaos"] { --op-farbe: #8a4bb3; }
.op-farbe[data-farbe="order"] { --op-farbe: #e8c234; }
.op-farbe[data-farbe="farblos"] { --op-farbe: #c9ced4; }
/* Lorcana und Riftbound: Farb-Chips und Vergleich in einer Zeile. */
.op-farben-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; margin-top: .375rem; }
.op-farben-zeile .op-farben-auswahl { margin-top: 0; }
/* Im dunklen Schema hebt ein heller Rand den schwarzen Punkt vom Grund ab. */
:root.dark .op-farbe-punkt { border-color: rgb(255 255 255 / .5); }
.farbauswahl { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.farbauswahl-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.farbauswahl-symbole { display: flex; flex-wrap: wrap; gap: .375rem; }
.farbauswahl-vergleich { width: auto; }
/* Das Kästchen liegt unsichtbar über dem Symbol; Auswahl und Fokus zeigt das Symbol. */
.mana-wahl { position: relative; display: inline-flex; cursor: pointer; }
.mana-wahl input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mana-symbol {
    display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
    border: 2px solid transparent; border-radius: 999px; font-weight: 700; font-size: .95rem; color: #1a1a1a;
    background: var(--mana-farbe, #ccc2c0); opacity: .45; filter: saturate(.4); transition: opacity .15s, filter .15s, box-shadow .15s;
}
.mana-symbol[data-mana="W"] { --mana-farbe: #f8f3d0; }
.mana-symbol[data-mana="U"] { --mana-farbe: #aae0fa; }
.mana-symbol[data-mana="B"] { --mana-farbe: #cbc2bf; }
.mana-symbol[data-mana="R"] { --mana-farbe: #f9aa8f; }
.mana-symbol[data-mana="G"] { --mana-farbe: #9bd3ae; }
.mana-symbol[data-mana="C"] { --mana-farbe: #ddd8d6; }
.mana-wahl:hover .mana-symbol { opacity: .75; }
.mana-wahl:has(input:checked) .mana-symbol { opacity: 1; filter: none; border-color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
.mana-wahl:has(input:focus-visible) .mana-symbol { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Umschalter aus zwei Optionen: Radio-Gruppe als Segment (Fieldset .umschalter, je Option ein label mit input). */
.umschalter { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--muted); }
.umschalter label { position: relative; padding: .3rem .875rem; border-radius: 999px; font-size: .875rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; }
.umschalter input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.umschalter label:hover { color: var(--foreground); }
.umschalter label:has(input:checked) { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.umschalter label:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }

.offer-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); }
/* Kachel wie im Webshop: Kartenbild auf abgesetzter Fläche, darunter Name, Set, Merkmale und Preis unten bündig. */
.offer-tile { padding: 0; gap: 0; overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s; }
.offer-tile:hover, .offer-tile:focus-within { border-color: var(--shop-brand); box-shadow: var(--shop-shadow-hover); transform: translateY(-2px); }
.offer-tile-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.offer-tile-link:hover .offer-tile-name .card-name-primary, .offer-tile-link:focus-visible .offer-tile-name .card-name-primary { text-decoration: underline; text-underline-offset: 3px; }
.offer-tile-link:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: inherit; }
.offer-tile-bild { display: flex; justify-content: center; padding: 1rem 1rem .875rem; background: var(--shop-band); border-bottom: 1px solid var(--border); }
.offer-tile-bild .card-image { box-shadow: 0 3px 10px rgb(0 0 0 / .18); }
.offer-tile-bild .card-image[data-loading] { box-shadow: none; }
.offer-tile-body { display: flex; flex: 1; flex-direction: column; gap: .35rem; width: 100%; padding: .875rem 1rem 1rem; }
.offer-tile-name { font-weight: 600; overflow-wrap: anywhere; }
.offer-tile-set { font-size: .85rem; }
.offer-tile-variante { font-size: .85rem; font-weight: 600; color: var(--primary); overflow-wrap: anywhere; }
.offer-tile-kauf { display: flex; flex-direction: column; gap: .125rem; margin-top: auto; padding-top: .5rem; }
.offer-badges { display: flex; flex-wrap: wrap; gap: .25rem; }
/* Lange Badges (Unikat-Kommentar, Druck, Sprachliste) umbrechen statt abgeschnitten zu werden: Basecoats .badge hat
   feste Höhe, nowrap und overflow:hidden. Einzeilig gleich hoch und rund wie die übrigen Badges. */
.offer-comment, .badge-wrap {
    white-space: normal;
    height: auto;
    min-height: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * .25);
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: left;
    border-radius: calc(var(--spacing) * 2.5);
}
.offer-price { color: var(--shop-price); font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.offer-price-from { font-size: .825rem; font-weight: 400; color: var(--muted-foreground); }
.offer-meta { font-size: .825rem; }
.offer-tile-ohne-angebot { font-size: .925rem; font-weight: 600; color: var(--muted-foreground); }
/* Platzhalter-Kachel beim Nachladen (Vorlage in Pages/Stoebern/_Nachladen.cshtml, eingefügt von site.js): Flächen statt
   Text, die pulsieren (Basecoats .skeleton); das Bild ist ein ladendes Kartenbild, damit es nach dem Tausch bis zum
   Laden gleich aussieht. Ohne Zeiger, damit sie nicht wie eine Kachel auf Hover reagiert. */
.offer-tile-skelett { pointer-events: none; }
.offer-tile-skelett .skeleton { display: block; border-radius: .25rem; background: var(--input); }
.offer-tile-skelett [data-zeile] { height: .875rem; }
.offer-tile-skelett [data-zeile="name"] { width: 80%; height: 1.125rem; }
.offer-tile-skelett [data-zeile="set"] { width: 60%; }
.offer-tile-skelett [data-zeile="preis"] { width: 45%; height: 1.5rem; }
.offer-tile-skelett [data-zeile="meta"] { width: 70%; }

/* Produktseite eines Drucks (Pages/Einzelkarte): Kopf mit Bild und Kartendaten, Filter, Angebotstabelle. */
.einzelkarte-kopf { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 20rem); align-items: start; }
.einzelkarte-fakten { max-width: 36rem; }
.einzelkarte-ab { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.einzelkarte .section-title { font-size: 1.125rem; font-weight: 600; }
.einzelkarte-listenwahl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.einzelkarte-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.einzelkarte-filter .field { flex: 1 1 11rem; }
.einzelkarte-filter-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; }
.einzelkarte-liste { display: flex; flex-direction: column; gap: .5rem; max-width: 36rem; }
/* Querscrollen nur im Rahmen der Tabelle, nie auf der Seite. */
.einzelkarte-tabelle-rahmen { width: 100%; max-width: 100%; overflow-x: auto; }
.einzelkarte-tabelle td { vertical-align: middle; }
.einzelkarte-tabelle .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.einzelkarte-tabelle tbody tr:target { background: var(--muted); }
.einzelkarte-preis { font-weight: 700; }
/* Lange Kommentare (Unikate) umbrechen in der Zelle, statt die Tabelle zu verbreitern. */
.einzelkarte-kommentar .offer-comment { max-width: 16rem; }
.einzelkarte-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.einzelkarte-aktionen form { margin: 0; }
.einzelkarte-warenkorb { display: flex; flex-wrap: nowrap; align-items: center; gap: .375rem; }
.einzelkarte-menge { width: auto; min-width: 4rem; }
.einzelkarte-meldung td { white-space: normal; }
/* Kaufbox rechts im Kopf; unter 64rem in eigener Zeile unter Bild und Angaben. */
.einzelkarte-kaufbox { width: 100%; }
.einzelkarte-kaufbox-preis { font-size: 1.75rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.einzelkarte-kaufbox-merkmale { display: flex; flex-wrap: wrap; gap: .375rem; }
.einzelkarte-kaufbox-warenkorb { gap: .75rem; }
.einzelkarte-kaufbox-knopf { width: 100%; }
.einzelkarte-kaufbox-vorhanden ul { margin: .25rem 0 0; padding-left: 1.1rem; list-style: disc; }
@media (max-width: 64rem) {
    .einzelkarte-kopf { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
    .einzelkarte-kaufbox { grid-column: 1 / -1; }
}

.listen-kopf { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.listen-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.listen-grid h2 a { color: inherit; }
.listen-geschlossen summary { cursor: pointer; padding: 0 1.5rem; color: var(--muted-foreground); }
.listen-geschlossen ul { list-style: none; padding: 0; margin: 0; }
.listen-form { max-width: 48rem; }
.listen-fieldset { border: 0; padding: 0; margin: 0; }
.listen-felder { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.listen-versandart { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; }
.listen-versandart input { margin-top: .3rem; flex: none; }
.liste .section-title { font-size: 1.125rem; font-weight: 600; }
.liste-reservierungen td { vertical-align: middle; }
.liste-reservierungen .num, .liste .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.liste-reservierungen form { margin: 0; }
.liste-schliessen summary { cursor: pointer; padding: 0 1.5rem; }

.wunsch-liste, .treffer-liste, .abo-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap); }
.wunsch { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.wunsch form { margin: 0; }
.wunsch:target { border-color: var(--ring); }
.wunsch-kopf { display: flex; align-items: flex-start; gap: 1rem; }
.wunsch-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.wunsch-titel h2, .wunsch-titel h3 { font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }
.wunsch-historie summary { cursor: pointer; color: var(--muted-foreground); }
.wunsch-historie-inhalt { margin-top: .5rem; }
.wunsch-sprachen { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.treffer { padding: 1rem; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.treffer-karte { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; flex: 1 1 16rem; min-width: 0; }
.treffer-text { gap: .25rem; min-width: 0; }
.treffer-aktion { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.treffer-aktion form { margin: 0; }
.abo-liste li { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.abo-liste form { margin: 0; }


@media (max-width: 40rem) {
    .einzelkarte-kopf { grid-template-columns: 1fr; justify-items: center; }
    .einzelkarte-info { width: 100%; }
    .treffer-aktion { align-items: flex-start; }
    /* Angebotstabelle als gestapelte Zeilen: jede Zelle mit ihrer Spaltenüberschrift (data-label). */
    .einzelkarte-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .einzelkarte-tabelle, .einzelkarte-tabelle tbody, .einzelkarte-tabelle tr { display: block; width: 100%; }
    .einzelkarte-tabelle tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .75rem; border-bottom: 1px solid var(--border); padding: .75rem 0; }
    .einzelkarte-tabelle td { display: block; border: 0; padding: 0; text-align: left; white-space: normal; min-width: 0; }
    .einzelkarte-tabelle td.num { text-align: left; }
    .einzelkarte-kommentar .offer-comment { max-width: 100%; }
    .einzelkarte-tabelle td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--muted-foreground); }
    .einzelkarte-tabelle td.einzelkarte-aktionen-zelle { grid-column: 1 / -1; }
    .einzelkarte-aktionen { justify-content: flex-start; }
    .einzelkarte-tabelle tr.einzelkarte-meldung { display: block; }
}

/* === Bestellungen und Direktkauf === */
/* Bestellungen, Bezahlseite, Warenkorb, Kasse (Pages/Bestellungen, Pages/Warenkorb, Pages/Kasse). */
.orders-page .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orders-narrow { max-width: 40rem; }
.orders-small { font-size: .825rem; }
.orders-columns { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.orders-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.orders-line { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.orders-line:last-child { border-bottom: 0; }
.orders-line[data-availability="Unavailable"] .card-image,
.orders-line[data-availability="Unavailable"] .orders-line-text > .card-name { opacity: .55; }
.orders-line-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .125rem; overflow-wrap: anywhere; }
.orders-line-text .badge { align-self: flex-start; }
.orders-price { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orders-sums { display: grid; grid-template-columns: 1fr max-content; gap: .375rem 1rem; margin: 0 0 .75rem; }
.orders-sums dt { color: var(--muted-foreground); }
.orders-sums dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.orders-address { font-style: normal; line-height: 1.5; }
.orders-fieldset { margin: 0; min-width: 0; }
.orders-legend { font-weight: 600; font-size: 1rem; padding: 0 1.5rem; }
.orders-choice { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; }
.orders-choice input { margin-top: .2rem; flex: none; }
.cart-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin-top: .5rem; }
.cart-actions form { margin: 0; }
.cart-quantity { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cart-quantity .input { width: 5rem; }
.cart-hold-clock { font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) {
    .orders-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .orders-table, .orders-table tbody, .orders-table tr, .orders-table td { display: block; width: 100%; }
    .orders-table tr { border-bottom: 1px solid var(--border); padding: .5rem 0; }
    .orders-table td { border: 0; padding: .25rem 0; text-align: left; white-space: normal; }
    .orders-table td.num { text-align: left; }
    .orders-table td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--muted-foreground); }
    .orders-line .card-image[data-size="sm"] { width: 2.75rem; }
}

/* === Kartennamen === */
/* Zweizeilige Kartennamen wie bei Cardmarket (Pages/Shared/_CardName.cshtml): erste Zeile deutsch und fett, zweite
   Zeile englisch, kursiv, kleiner und gedämpft. Überschrift (data-variant="heading") mit Untertitel „Set - Name - Einzelkarte“. */
.card-name { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; overflow-wrap: anywhere; }
.card-name-primary { font-weight: 600; }
.card-name-secondary { font-size: .85em; font-style: italic; font-weight: 400; line-height: 1.3; color: var(--muted-foreground); }
.card-name[data-variant="heading"] { gap: .25rem; }
.card-name-subtitle { font-size: .925rem; }

/* === Spiele: Logos === */
/* Logo eines Spiels (Pages/Shared/_SpielLogo.cshtml): je Farbschema eine Variante, die andere ist ausgeblendet. */
.spiel-logo { display: inline-flex; align-items: center; justify-content: center; }
.spiel-logo img { display: block; width: auto; height: 2rem; max-width: 100%; object-fit: contain; }
:root.dark .nur-hell, :root:not(.dark) .nur-dunkel { display: none; }
/* Breite des sichtbaren Logos auf der 380 px breiten Leinwand (mittig, seitlich transparent; gemessen an der dunklen
   Variante mit hellem Rand). Damit schneidet das Logo im Stöbern-Kopf den leeren Rand ab. */
.spiel-logo { --logo-breite: 380; }
.spiel-logo[data-spiel="magic-the-gathering"] { --logo-breite: 288; }
.spiel-logo[data-spiel="yugioh"] { --logo-breite: 274; }
.spiel-logo[data-spiel="pokemon"] { --logo-breite: 194; }
.spiel-logo[data-spiel="lorcana"] { --logo-breite: 220; }
.spiel-logo[data-spiel="riftbound"] { --logo-breite: 252; }

/* === Startseite (Pages/Index.cshtml) === */
.start { display: flex; flex-direction: column; gap: 2.5rem; }
.start .section-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.start-mehr { color: var(--shop-link); font-weight: 600; text-decoration: none; }
.start-mehr:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Einstieg: Stimmungsbild mit dunklem Verlauf, Text immer hell (auch im hellen Farbschema). */
.start-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(20rem, 42vw, 27rem);
    overflow: hidden;
    border-radius: calc(var(--radius) + 6px);
    background: #141a14;
    color: #ffffff;
}
.start-hero-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.start-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(10 16 10 / .94) 0%, rgb(10 16 10 / .8) 42%, rgb(10 16 10 / .2) 100%);
}
.start-hero-inhalt { display: flex; flex-direction: column; gap: .875rem; max-width: 38rem; padding: 2.5rem; }
.start-hero-zeile { color: var(--shop-brand); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.start-hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.start-hero-text { color: rgb(255 255 255 / .88); font-size: 1.05rem; line-height: 1.55; }
.start-hero-aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.start-hero .btn:not([data-variant]) { background: var(--shop-brand); color: #10200a; }
.start-hero .btn:not([data-variant]):hover { background: #9fd356; }
.start-hero .start-hero-zweit { border-color: rgb(255 255 255 / .55); background: rgb(255 255 255 / .08); color: #ffffff; }
.start-hero .start-hero-zweit:hover { background: rgb(255 255 255 / .18); }
.start-hero :focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Vorteile: kurze Leiste unter dem Einstieg. */
.start-vorteile {
    list-style: none;
    margin: -1rem 0 0;
    padding: 1.125rem 1.25rem;
    display: grid;
    gap: 1rem 1.5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--shop-band);
}
@media (max-width: 64rem) { .start-vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .start-vorteile { grid-template-columns: 1fr; } }
.start-vorteile li { display: flex; align-items: flex-start; gap: .75rem; color: var(--muted-foreground); font-size: .875rem; line-height: 1.45; }
.start-vorteile svg { flex: none; color: var(--primary); }
.start-vorteile strong { display: block; color: var(--foreground); font-size: .925rem; }

/* Spiele-Kacheln: Bild mit Verlauf, unten das Logo für dunklen Grund. */
.spiel-kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
.spiel-kachel {
    position: relative;
    isolation: isolate;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #1f2b1a, #3f7d14);
    box-shadow: var(--shop-shadow);
    color: #ffffff;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.spiel-kachel:hover, .spiel-kachel:focus-visible { transform: translateY(-3px); box-shadow: var(--shop-shadow-hover); }
.spiel-kachel:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.spiel-kachel-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.spiel-kachel:hover .spiel-kachel-bild { transform: scale(1.05); }
.spiel-kachel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(8 12 8 / 0) 30%, rgb(8 12 8 / .88) 100%); }
.spiel-kachel-fuss { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: .875rem; }
.spiel-kachel-logo img { height: 3.4rem; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .55)); }
.spiel-kachel-logo.spiel-logo-text { font-size: 1.25rem; font-weight: 800; text-align: center; }
.spiel-kachel-mehr { color: var(--shop-brand); font-size: .8rem; font-weight: 700; }

/* Ablauf des Einkaufsassistenten: abgesetzte Fläche, nummerierte Schritte. */
.start-band { padding: 1.75rem; border-radius: calc(var(--radius) + 6px); background: var(--shop-band); }
.start-schritte { counter-reset: schritt; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 64rem) { .start-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .start-schritte { grid-template-columns: 1fr; } }
.start-schritte > li { counter-increment: schritt; }
.start-schritte h3 { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; font-weight: 700; }
.start-schritte h3::before {
    content: counter(schritt);
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: .875rem;
}

/* Bis mittlere Breite reicht der Text fast über das ganze Bild: dann senkrechter, durchgehend dunkler Verlauf. */
@media (max-width: 56rem) {
    .start-hero::before { background: linear-gradient(180deg, rgb(10 16 10 / .72) 0%, rgb(10 16 10 / .92) 100%); }
}

@media (max-width: 40rem) {
    .start { gap: 2rem; }
    .start-hero-inhalt { padding: 1.75rem 1.25rem; }
    .start-band { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .offer-tile, .spiel-kachel, .spiel-kachel-bild { transition: none; }
    .skeleton, .card-image[data-loading]::before { animation: none; }
    .offer-tile:hover, .offer-tile:focus-within, .spiel-kachel:hover, .spiel-kachel:focus-visible, .spiel-kachel:hover .spiel-kachel-bild { transform: none; }
}

/* === Editions- und Seltenheitssymbole === */
/* Pages/Shared/_EditionsSymbol.cshtml und _SeltenheitsSymbol.cshtml: klein vor Set bzw. Seltenheit, auf Texthöhe. */
.set-symbol { display: inline-flex; flex: none; align-items: center; justify-content: center; vertical-align: -.2em; margin-inline-end: .15em; }
.set-symbol[hidden] { display: none; }
.set-symbol img { display: block; width: 1.2em; height: 1.2em; object-fit: contain; }
.rarity-symbol { display: inline-block; width: 1.1em; height: 1.1em; margin-inline-end: .15em; vertical-align: -.18em; object-fit: contain; }
.einzelkarte-set { display: inline-flex; align-items: center; }

/* === Shop-Vorstellung und Rechtliches (Pages/Shared/_Vorschau.cshtml, Pages/Vorschau, Impressum, Datenschutz) === */
.site-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.5rem; }
.site-footer-recht { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; }

.shop-vorschau > div { max-width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.shop-vorschau > div > header { align-items: flex-start; padding-inline-end: 1.5rem; }
.shop-vorschau > div > header > h2 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.vorschau-hinweis { display: flex; flex-direction: column; gap: .75rem; line-height: 1.55; }
.vorschau-hinweis ul { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding-inline-start: 1.25rem; list-style: disc; }
.vorschau-eintragung { border-top: 1px solid var(--border); padding-top: 1rem; }
.vorschau-eintragung-titel { font-size: 1rem; font-weight: 600; }
.vorschau-seite { max-width: 40rem; }
.vorschau-seite .vorschau-eintragung { border-top: 0; padding-top: 0; }

.rechtstext { max-width: 48rem; line-height: 1.6; }
.rechtstext h2 { margin: 1.75rem 0 .5rem; font-size: 1.15rem; font-weight: 700; }
.rechtstext h3 { margin: 1.1rem 0 .35rem; font-size: 1rem; font-weight: 600; }
.rechtstext p, .rechtstext ul { margin-bottom: .75rem; }
.rechtstext ul { padding-inline-start: 1.25rem; list-style: disc; }
.rechtstext a { text-decoration: underline; text-underline-offset: 3px; }