/* Schriften liegen auf dem eigenen Server statt bei Google (SIL Open Font
   License, fonts/OFL-*.txt): der direkte Google-Fonts-Link schickt die IP
   jedes Besuchers an Google, dafuer gab es in Deutschland Abmahnungen (LG
   Muenchen I, 20.01.2022). Eine variable Datei je Zeichensatz deckt alle
   Staerken ab. Manrope ist die Grundschrift, Archivo (seit der zweiten
   Runde am 28.10.2026, vorher die Serife Fraunces) die Schrift fuer
   Ueberschriften: modern, kraftvoll, leicht sportlich - auch in der Breite
   variabel (font-stretch). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* PREMIUM-SAMMLERLADEN (Felix, 28.10.2026): "Vorbild ist das Gefuehl
     einer hochwertigen Auktionsplattform oder eines Luxus-Uhrenshops".
     Navy ist der Grundton (Buehne, Fusszeile, Schrift), Gold/Messing der
     sparsame Akzent (Auswahl, Zeigen, Preise, Plaketten - nie flaechig),
     Kauf-Aktionen in Gold (Warenkorb, In den Warenkorb) bzw. Navy (der
     kleine Korb-Knopf der Kachel); Blau nur noch im Warenkorb-Fenster. Die
     Seite ist gebrochenes Weiss, Kacheln und Felder weiss mit feiner Linie.
     Die Verwaltung behaelt ihre Creme-Gold-Farben (admin.css). */
  --navy: #0b1b3a;
  --navy-2: #13284f;        /* eine Stufe heller, fuer Verlaeufe */
  --gold: #c9a227;          /* Linien, Rahmen, Leuchten; als Schrift nur auf Navy (7 : 1) */
  --gold-hell: #e2c45f;     /* Gold-Schrift auf Navy */
  --gold-ink: #86660f;      /* Gold als Schrift auf Hell: 5,4 : 1 (AA verlangt 4,5) */
  --gold-soft: #f7f0dc;     /* zarte Goldflaeche unter Plaketten und Zeichen */
  --cta: #1f55ad;           /* Kauf-Aktionen; Weiss darauf 7,1 : 1 */
  --cta-hover: #17448c;
  --font-display: 'Archivo', 'Manrope', system-ui, sans-serif;
  --kopf-hoehe: 73px;       /* Kopfzeile samt Linie; app.js misst nach */
  --leiste-hoehe: 34px;     /* Versandzeile darueber, fest */
  /* Kopfzeile (Felix, 28.10.2026: "als CSS-Variablen, damit ich beides
     schnell nachjustieren kann"): Deckkraft des Navy ueber dem hellen
     Bereich (1 = deckend, "die Transparenz weg"), Staerke des
     Weichzeichners und wie weit er unter der Kopfzeile auslaeuft. */
  --kopf-deckkraft: 1;
  --kopf-blur: 18px;
  --kopf-verlauf: 28px;
  /* Filterleiste am Rechner: wie stark die Karten unten in ihr noch
     durchscheinen (0 = ganz, 1 = gar nicht) und wie weich sie dabei sind. */
  --leiste-unten: .55;
  --leiste-blur: 6px;

  /* Die bisherigen Namen bleiben - alte Regeln und admin.css nutzen sie. */
  --bg: #f2f4f7;            /* Seitenflaeche: hell, die weissen Kacheln heben sich ab */
  --bg-soft: #eceff4;       /* Schienen der Umschalter */
  --card: #ffffff;
  --card-hover: #ffffff;
  --text: #0f1a2e;
  --text-soft: #45506a;
  --muted: #5f687c;
  --accent: #0b1b3a;        /* Hauptknoepfe navy */
  --accent-soft: #1d3766;   /* ... beim Zeigen */
  --on-accent: #ffffff;
  --gold-text: #86660f;     /* Preise */
  --accent-2: #1d3766;      /* Links */
  --danger: #e23b57;
  --ok: #1f9d57;
  --border: #e4e7ee;        /* feine Linien, Kachelrahmen */
  --field-border: #d4d9e3;  /* Rahmen um Knoepfe und Felder */
  --rail: #eceff4;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(11,27,58,.06), 0 12px 32px rgba(11,27,58,.10);
  --inset: #f3f4f7;         /* Bildflaeche in der Kachel */
  --page-width: 1544px;     /* Seite samt Rand: fuenf Kacheln nebeneinander */
}

* { box-sizing: border-box; }
/* Die Knoepfe der Buehne gleiten zum Sortiment. */
/* overflow-x: clip schneidet waagerechten Ueberstand ab (der Streifen
   unter der Filterleiste reicht ueber die ganze Fensterbreite, 100vw samt
   Rollleiste), ohne - anders als hidden - das Kleben zu stoeren. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

a { color: var(--accent-2); }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; }

.container { max-width: var(--page-width); margin: 0 auto; padding: 0 24px; }

/* Versand-Hinweis ueber der Kopfzeile, schmal in dunklem Navy. Er bleibt
   beim Scrollen oben stehen, die Kopfzeile klebt direkt darunter (Felix,
   28.10.2026: "soll mitscrollen"). Feste Hoehe, damit die Kopfzeile weiss,
   wo sie anliegt. */
.shipbar {
  position: sticky; top: 0; z-index: 51;
  height: var(--leiste-hoehe); padding: 8px 16px; overflow: hidden; white-space: nowrap;
  text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; line-height: 17px;
  color: rgba(255,255,255,.82); background: #081530;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.shipbar ~ header.site { top: var(--leiste-hoehe); }

/* KOPFZEILE (dritte Runde, 28.10.2026): zwei klar getrennte Zustaende.
   Ueber der Buehne durchsichtig (.auf-buehne - app.js schaltet an der
   Unterkante der Buehne um). Liegt heller Inhalt dahinter, Navy mit hoher
   Deckkraft und kraeftigem Weichzeichner, feiner Goldlinie und dezentem
   Schatten. Logo und Links bleiben in beiden hell (.dunkel - alle
   Shop-Seiten; ohne Buehne beginnt die Kopfzeile gleich im zweiten Zustand).
   Die Hoehe bleibt gleich, es gleiten nur Farbe, Weichzeichner und Schatten.
   Die Verwaltung behaelt ihre helle Kopfzeile (admin.css).
   Der Weichzeichner sitzt in ::before und reicht --kopf-verlauf unter die
   Kopfzeile, wo er weich auslaeuft (Felix, 28.10.2026: "unscharfen
   Hintergrund mit leichtem Uebergang nach unten weg" - ueber der Buehne
   und danach). Er darf nicht an der Kopfzeile selbst haengen: ein
   Weichzeichner im Element nimmt seinen Kindern die Sicht nach hinten. */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid rgba(201,162,39,.5);
  box-shadow: 0 10px 30px -12px rgba(11,27,58,.18);
  transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease,
    -webkit-backdrop-filter .28s ease, backdrop-filter .28s ease;
}
header.site.dunkel {
  background: rgba(11,27,58,var(--kopf-deckkraft));
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: rgba(201,162,39,.42);
  box-shadow: 0 8px 24px -14px rgba(5,12,28,.6);
}
/* Deckend blau: der Weichzeichner beginnt erst an der Unterkante - sonst
   zoege er Farben von unten in die Kopfzeile. */
header.site.dunkel::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 100% 0 calc(-1 * var(--kopf-verlauf)) 0;
  -webkit-backdrop-filter: saturate(1.2) blur(var(--kopf-blur)); backdrop-filter: saturate(1.2) blur(var(--kopf-blur));
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
/* Ueber der Buehne: durchsichtig, der Weichzeichner liegt unter der ganzen
   Kopfzeile und laeuft darunter aus. */
header.site.dunkel.auf-buehne::before {
  inset: 0 0 calc(-1 * var(--kopf-verlauf)) 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--kopf-verlauf)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--kopf-verlauf)), transparent);
}
/* Ohne Weichzeichner im Browser: deckendes Navy statt durchscheinend. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.site.dunkel { background: var(--navy); }
}
header.site.auf-buehne {
  background: rgba(11,27,58,0); border-bottom-color: rgba(201,162,39,0); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.header-inner {
  display: flex; align-items: center; gap: 8px;
  max-width: var(--page-width); min-height: 72px; margin: 0 auto; padding: 0 24px;
}
/* Logo aus dem Branding-Paket (Felix, 28.10.2026): "Cardpoint." mit
   "TRADING CARDS" in Gold, die Fassung fuer dunklen Grund - die
   Kopfzeile der Shop-Seiten ist immer Navy. .logo-img traegt nur noch das
   alte Zeichen der Verwaltung. */
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--navy); transition: color .4s ease; }
.logo-img { width: 36px; height: 36px; border-radius: 8px; display: block; object-fit: contain; }
.logo-bild { display: block; width: auto; height: 48px; }
.spacer { flex: 1; }

/* Die Marken als schlanke Navigation neben dem Logo (28.10.2026). Die
   gewaehlte und die unter dem Zeiger tragen einen Gold-Unterstrich; am
   Handy werden sie zum Umschalter mit Gold-Pille (siehe unten). */
.hauptnav { display: flex; align-items: center; gap: 2px; margin-left: 28px; }
.hauptnav button {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 12px;
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-soft);
  transition: color .25s ease;
}
.hauptnav button::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 1px;
  background: var(--gold); transform: scaleX(0); transition: transform .3s ease;
}
.hauptnav button:hover, .hauptnav button.active { color: var(--navy); }
.hauptnav button:hover::after, .hauptnav button.active::after { transform: scaleX(1); }

/* Lupe, Anmelden und Warenkorb: eine Hoehe (40 px), eine Linie, gleiche
   Abstaende. Die Lupe gleitet hinab zum Suchfeld (app.js). */
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: none; border-radius: 8px; background: none; color: var(--navy); cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.icon-btn:hover { background: var(--bg-soft); }

/* Konto-Bereich im Header. "Anmelden" ist ein schlichter Textlink; das
   Zeichen daneben (.ico) erscheint erst am Handy, dort ohne Text. */
.account-area { display: flex; align-items: center; gap: 4px; }
.link-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 12px; border: none; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--navy);
  transition: color .2s ease, background-color .2s ease;
}
.link-btn:hover { color: var(--gold-ink); background: var(--bg-soft); }
.link-btn .ico { display: none; }
/* Angemeldet steht oben nur das Profilbild: bei Google-Login dessen Bild,
   sonst der Anfangsbuchstabe im Navy-Kreis. Die E-Mail steht nur noch im
   Tooltip (Felix, 28.10.2026). Trefferflaeche 44 px. */
.account-link {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  text-decoration: none;
}
.account-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--bg-soft); transition: box-shadow .2s ease; }
.account-avatar.initiale {
  display: grid; place-items: center; border: none;
  font-size: 15px; font-weight: 700; line-height: 1; color: var(--on-accent); background: var(--accent);
}
.account-link:hover .account-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gold); }
/* Nur für Admins sichtbar (siehe auth.js) */
.admin-link {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
  border: 1px solid var(--field-border); border-radius: 10px;
  color: var(--navy); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}
.admin-link:hover { color: var(--gold-ink); border-color: var(--gold); }
.admin-link .ico { width: 16px; height: 16px; }

/* Warenkorb (dritte Runde): Gold mit Navy-Schrift statt Signalblau, kompakt.
   Die Anzahl sitzt als kleiner Navy-Kreis am Zeichen und erscheint erst ab
   einem Artikel; kommt einer dazu, ploppt sie kurz auf (app.js, .pop). */
.cart-btn {
  display: inline-flex; align-items: center; gap: 16px;
  height: 40px; padding: 0 14px 0 12px; margin-left: 4px;
  border: none; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--navy); background: var(--gold);
  transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.cart-btn:hover { background: var(--gold-hell); box-shadow: 0 6px 18px -8px rgba(201,162,39,.7); }
.cart-btn:active { transform: scale(.97); }
.cart-ico-box { position: relative; display: inline-grid; place-items: center; }
.cart-ico { flex-shrink: 0; }
.cart-count {
  position: absolute; top: -9px; right: -11px;
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  font-size: 10.5px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  color: #fff; background: var(--navy); box-shadow: 0 0 0 2px var(--gold);
}
.cart-btn:hover .cart-count { box-shadow: 0 0 0 2px var(--gold-hell); }
.cart-count[hidden] { display: none; }
.cart-count.pop { animation: badge-pop .3s cubic-bezier(.3,.7,.4,1); }
@keyframes badge-pop { 40% { transform: scale(1.3); } }

/* Dunkle Kopfzeile: alles hell. */
header.site.dunkel .logo { color: #fff; }
header.site.dunkel .hauptnav button { color: rgba(255,255,255,.78); }
header.site.dunkel .hauptnav button:hover, header.site.dunkel .hauptnav button.active { color: #fff; }
header.site.dunkel .icon-btn, header.site.dunkel .link-btn { color: #fff; }
header.site.dunkel .icon-btn:hover, header.site.dunkel .link-btn:hover { color: #fff; background: rgba(255,255,255,.10); }
header.site.dunkel .admin-link { color: #fff; border-color: rgba(255,255,255,.28); }
header.site.dunkel .admin-link:hover { color: var(--gold-hell); border-color: var(--gold); }
header.site.dunkel .account-avatar { border-color: rgba(255,255,255,.25); }
header.site.dunkel .account-link:hover .account-avatar { box-shadow: 0 0 0 2px var(--navy), 0 0 0 3px var(--gold); }

/* Tastatur: ein deutlicher Navy-Rahmen, auf Navy-Flaechen in Gold. */
.hauptnav button:focus-visible, .kategorien .kat:focus-visible, .cart-btn:focus-visible,
.link-btn:focus-visible, .account-link:focus-visible, .admin-link:focus-visible, .icon-btn:focus-visible,
.add-btn:focus-visible, .img-nav:focus-visible, .card .img:focus-visible, .filter-chip:focus-visible, .filter-reset:focus-visible,
.detail-nav:focus-visible, .detail-thumbs button:focus-visible, .suche input:focus-visible,
.card h3.ttl:focus-visible, .load-more button:focus-visible, .auswahl select:focus-visible, .knopf:focus-visible,
.checkout-btn:focus-visible, .google-btn:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px;
}
.buehne :focus-visible, footer.site :focus-visible, header.site.dunkel :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Der goldene Warenkorb bekommt auf Navy einen weissen Rahmen. */
header.site.dunkel .cart-btn:focus-visible { outline-color: #fff; }

/* BUEHNE (28.10.2026): der Startbereich, gut zwei Drittel der
   Fensterhoehe. Sie reicht unter die durchsichtige Kopfzeile. Navy mit
   selbst gebautem Verlauf und weichem Goldleuchten hinter den Karten;
   davor ein eigenes, ruhiges Muster (index.html): angedeutete
   Kartenumrisse und Lichtringe als duenne Linien bei 3-6 % - ohne Motive,
   zum Text hin noch blasser. Links Ueberschrift, Vertrauens-Zeile und zwei
   Knoepfe, rechts je Art eine Kartengruppe (app.js). */
.buehne {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: calc(-1 * var(--kopf-hoehe));
  color: #fff;
  background:
    radial-gradient(38% 52% at 75% 56%, rgba(201,162,39,.17), transparent 70%),
    radial-gradient(55% 75% at 6% 0%, rgba(58,98,178,.24), transparent 65%),
    linear-gradient(165deg, #10244a 0%, var(--navy) 50%, #071330 100%);
}
.buehne-muster {
  position: absolute; left: -24px; top: -24px; z-index: -1; pointer-events: none;
  width: calc(100% + 48px); height: calc(100% + 48px);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 55%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 55%);
  animation: muster-atmen 40s ease-in-out infinite alternate;
}
/* Unten schliesst eine feine Goldlinie ab. */
.buehne::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.6), transparent);
}
/* 15 % niedriger als zuvor (Felix, 28.10.2026: "mach den hero allgemein um
   15% kleiner vertikal"): Mindesthoehe x 0,85, Abstaende entsprechend. */
.buehne-inner {
  max-width: var(--page-width); margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + 28px) 24px 44px;
  min-height: calc((clamp(520px, 66vh, 800px) + var(--kopf-hoehe)) * .85);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px;
}
.buehne-kicker {
  margin: 0 0 16px; font-size: 11.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
}
/* Die Hauptueberschrift ist das Logo "Cardpoint." / "TRADING CARDS" (ein
   Bild mit dem Text als alt). Die Schriftangaben gelten nur, falls das Bild
   einmal nicht laedt und der alt-Text erscheint. */
.buehne h1 {
  margin: 0;
  font-family: var(--font-display); font-weight: 800; font-stretch: 108%;
  font-size: clamp(44px, 5.2vw, 84px); line-height: .98; letter-spacing: -0.035em; color: #fff;
}
/* Wortmarke "Cardpoint." als Bild, "TRADING CARDS" darunter als Text in
   Gold, linksbuendig, in Groesse und Sperrung an die Wortmarke gebunden
   (--logo-breite). Die Datei hat links gut 3 % Luft vor dem "C" - um so
   viel nach links, damit alles buendig mit Zeile und Knoepfen steht. */
.buehne h1 { --logo-breite: clamp(300px, 38vw, 620px); }
.buehne-logo { display: block; width: var(--logo-breite); height: auto; translate: -3.4% 0; }
.buehne-tagline {
  display: block; margin-top: calc(var(--logo-breite) * .012);
  font-family: var(--font-display); font-weight: 700; font-stretch: 100%;
  font-size: calc(var(--logo-breite) * .04); line-height: 1; letter-spacing: .48em;
  text-transform: uppercase; color: var(--gold-hell);
}
.buehne-fakten {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.78);
}
.buehne-fakten li { display: inline-flex; align-items: center; gap: 9px; }
.buehne-fakten svg { flex-shrink: 0; color: var(--gold); }
.buehne-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.buehne-knoepfe [hidden] { display: none; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.knopf:hover { transform: scale(1.02); }
.knopf-hell { color: var(--navy); background: #fff; border: 1px solid #fff; }
.knopf-hell:hover { color: var(--navy); background: #eef1f6; border-color: #eef1f6; }
.knopf-gold { color: var(--gold-hell); background: transparent; border: 1px solid rgba(201,162,39,.75); }
.knopf-gold:hover { color: #fff; background: rgba(201,162,39,.14); border-color: var(--gold); }

/* KARTENGRUPPEN (zweite Runde, 28.10.2026): je Art drei Karten, die
   wertvollste vorn, darunter Name und Anzahl wie im Reiter. Sie schweben
   kaum merklich, jede in eigenem Takt; die mittlere steht etwas hoeher.
   Beim Zeigen faechern sie sich weiter auf, heben an und leuchten in Gold. */
/* Seitlich Luft: die aeusseren Karten faechern ueber ihre Gruppe hinaus. */
.buehne-gruppen { display: flex; justify-content: center; align-items: flex-end; gap: 62px; padding: 0 44px; }
.gruppe {
  position: relative; flex: 1 1 0; min-width: 0; max-width: 200px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 0; border: none; background: none; color: inherit; font: inherit; cursor: pointer;
}
.gruppe[hidden] { display: none; }
.gruppe:nth-child(2) { margin-bottom: 32px; }
.gruppe-faecher {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.2;
  animation: schweben 7s ease-in-out infinite;
}
.gruppe:nth-child(2) .gruppe-faecher { animation-duration: 8s; animation-delay: -2.5s; }
.gruppe:nth-child(3) .gruppe-faecher { animation-duration: 9s; animation-delay: -5s; }
.gruppe-karte {
  position: absolute; left: 21%; bottom: 0; width: 58%; aspect-ratio: 5 / 7;
  /* Die Ecken einer echten Karte: 3 mm Radius bei 63 x 88 mm - so ist die
     ganze Karte zu sehen, nicht ein abgerundeter Ausschnitt (Felix,
     28.10.2026). Kein heller Ring mehr um die Kante. */
  border-radius: 4.8% / 3.4%; overflow: hidden; background: var(--navy-2);
  transform-origin: 50% 120%;
  transform: translate(var(--weg, 0%), var(--hoch, 0px)) rotate(var(--dreh, 0deg));
  box-shadow: 0 20px 34px -12px rgba(0,0,0,.65);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.gruppe-karte img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gruppe-karte:nth-child(1) { z-index: 3; }
/* Felix, 28.10.2026: "ein winziges bisschen weiter auseinander", dann "noch
   ein bisschen weiter", dann "noch etwas weiter" (zuerst 16 % / 12 Grad,
   Gruppen 18 px). */
.gruppe-karte:nth-child(2) { z-index: 2; --dreh: -17deg; --weg: -30%; }
.gruppe-karte:nth-child(3) { z-index: 1; --dreh: 17deg; --weg: 30%; }
/* Slabs mit Huelle und Etikett: schlanker (3:5) und etwas hoeher als die
   Karten - so sind Etikett und Huelle auch klein gut zu erkennen; Ecken wie
   die Huelle. */
.gruppe[data-ziel="slabs"] .gruppe-karte { left: 23%; width: 54%; aspect-ratio: 3 / 5; border-radius: 6% / 3.6%; }
.gruppe:hover .gruppe-karte { box-shadow: 0 24px 40px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(201,162,39,.45), 0 0 26px rgba(201,162,39,.22); }
.gruppe:hover .gruppe-karte:nth-child(1) { --hoch: -10px; box-shadow: 0 26px 42px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(201,162,39,.8), 0 0 36px rgba(201,162,39,.35); }
.gruppe:hover .gruppe-karte:nth-child(2) { --dreh: -22deg; --weg: -38%; --hoch: -6px; }
.gruppe:hover .gruppe-karte:nth-child(3) { --dreh: 22deg; --weg: 38%; --hoch: -6px; }
.gruppe-label {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  transition: border-color .3s ease, background-color .3s ease;
}
.gruppe-zahl { color: var(--gold-hell); font-variant-numeric: tabular-nums; }
.gruppe-zahl:not(:empty)::before { content: "·"; margin: 0 7px; color: rgba(255,255,255,.45); }
.gruppe.active .gruppe-label { border-color: rgba(201,162,39,.5); }
.gruppe:hover .gruppe-label { border-color: rgba(201,162,39,.8); background: rgba(201,162,39,.12); }

/* VERTRAUENS-BAND unter der Buehne (28.10.2026): ein schlankes Laufband von
   rechts nach links - goldene Zeichen, Titel kraeftig, Unterzeile dezent in
   derselben Zeile, dazwischen eine kleine goldene Raute; an den Raendern
   blendet es weich aus, unter dem Zeiger haelt es an (app.js setzt
   .laeuft und wiederholt die Liste). Ohne Laufen (weniger Bewegung) stehen
   die vier Zusagen mittig nebeneinander. */
.vertrauen { position: relative; overflow: hidden; background: #fff; border-bottom: 1px solid var(--border); }
.vertrauen-spur { display: block; }
.vertrauen-inner {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
}
.vertrauen-inner li {
  display: flex; align-items: center; gap: 10px; padding: 17px 0; white-space: nowrap;
}
.vertrauen-inner li::after {
  content: ""; flex-shrink: 0; width: 6px; height: 6px; margin: 0 var(--band-abstand, 72px); transform: rotate(45deg);
  background: rgba(201,162,39,.8);
}
.vertrauen:not(.laeuft) .vertrauen-inner li:last-child::after { display: none; }
.vertrauen .zeichen { display: grid; place-items: center; flex-shrink: 0; color: var(--gold-ink); }
.vertrauen strong { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--navy); }
.vertrauen .text { margin-left: 4px; font-size: 13.5px; line-height: 1.3; color: var(--muted); }
.vertrauen .text::before { content: "·"; margin-right: 8px; color: var(--gold); }
.vertrauen.laeuft {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.vertrauen.laeuft .vertrauen-spur {
  display: flex; width: max-content;
  animation: band-laufen var(--band-dauer, 40s) linear infinite;
}
.vertrauen.laeuft .vertrauen-inner { flex-wrap: nowrap; flex-shrink: 0; }
.vertrauen.laeuft:hover .vertrauen-spur { animation-play-state: paused; }
@keyframes band-laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* SORTIMENT (dritte Runde, 28.10.2026): Kopf, Filterleiste, Raster. */

/* Kopf: "Sortiment" links, die Reiter rechts - beide auf EINER Grundlinie.
   Wird es zu eng, rutschen die Reiter darunter. Ziel der Buehnen-Knoepfe:
   der Abstand oben haelt die Ueberschrift unter Versandzeile und Kopfzeile
   frei. */
.hero { padding: 64px 0 0; scroll-margin-top: calc(var(--leiste-hoehe) + var(--kopf-hoehe) + 8px); }
.hero-inner {
  max-width: var(--page-width); margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px 32px;
}
.hero h2 {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 105%; font-size: 40px;
  line-height: 1.05; letter-spacing: -0.035em; color: var(--navy);
}

/* Reiter Einzelkarten / Slabs / Sealed: weisse Schiene mit feiner Linie,
   der gewaehlte Reiter Navy mit weisser Schrift. Die Anzahl als kleines
   Zaehl-Abzeichen. Kommt man ueber die Buehne hierher, leuchtet der Reiter
   kurz golden auf (.puls, app.js). */
.kategorie-leiste { display: flex; }
.kategorien {
  display: inline-flex; gap: 2px; padding: 4px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
}
/* display:inline-flex oben schlaegt sonst das hidden-Attribut. */
.kategorien[hidden], .kategorien .kat[hidden] { display: none; }
.kategorien .kat {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 14px; border: none; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-soft); background: transparent;
  white-space: nowrap; transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.kategorien .kat:hover { color: var(--navy); background: var(--bg-soft); }
.kategorien .kat.active { color: #fff; background: var(--navy); box-shadow: 0 1px 2px rgba(11,27,58,.2); }
.kategorien .kat.active.puls { animation: tab-puls .85s ease-out 2; }
.kategorien .kat-zahl {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px;
  font-size: 11.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--text-soft); background: var(--bg-soft);
}
.kategorien .kat-zahl:empty { display: none; }
.kategorien .kat.active .kat-zahl { color: var(--gold-hell); background: rgba(255,255,255,.14); }

/* Abschnitte blenden beim ersten Sichtbarwerden ein (app.js setzt die
   Klassen nur, wenn Bewegung erwuenscht ist). */
.einblenden { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.einblenden.sichtbar { opacity: 1; transform: none; }

/* Filterleiste als EINE Reihe gleicher Felder: Suchfeld (Lupe links) und
   die Listen gleich hoch, gleiche Linie, gleicher Radius. Am Rechner bleibt
   sie beim Scrollen durch das Raster unter der Kopfzeile stehen. */
.filters {
  display: flex; align-items: center; gap: 8px;
  margin: 28px 0 0; padding: 10px 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
/* Bei einer Marke ohne Ware (Topps vor der ersten Box) ausgeblendet. */
.filters[hidden] { display: none; }
.suche { position: relative; flex: 1 1 auto; min-width: 0; }
.suche .lupe {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.suche input, .auswahl select {
  height: 44px; border: 1px solid var(--field-border); border-radius: 8px; background-color: #fff;
  -webkit-appearance: none; appearance: none; font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.suche input { width: 100%; padding: 0 14px 0 42px; font-size: 14.5px; color: var(--text); }
.suche input::placeholder { color: var(--muted); }
.suche input:hover, .auswahl select:hover { border-color: #b9c0ce; }
.suche input:focus, .auswahl select:focus {
  outline: none; border-color: rgba(201,162,39,.85); box-shadow: 0 0 0 3px rgba(201,162,39,.15);
}
/* Die Listen schlanker: so breit wie ihr laengster Eintrag, gedeckelt -
   lange Editionsnamen stehen gekuerzt da. */
.auswahl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.auswahl select {
  max-width: 220px; padding: 0 34px 0 12px; cursor: pointer; text-overflow: ellipsis;
  font-size: 13.5px; font-weight: 600; color: var(--navy);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f687c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 15px;
}
.auswahl select[hidden] { display: none; }
/* Klebt die Leiste unter der Kopfzeile, liegt sie UEBER deren auslaufendem
   Weichzeichner (sonst verschwaemme das Suchfeld) und laesst ihn mit einem
   eigenen gleichen Verlauf unter sich weiterlaufen. Ihr Grund ist oben an
   der Kopfzeile dicht und wird nach unten durchsichtiger: die Karten
   scheinen unten in der Leiste noch leicht durch und verschwinden auf dem
   Weg nach oben ganz (Felix, 28.10.2026). */
@media (min-width: 1024px) {
  .filters {
    position: sticky; top: calc(var(--leiste-hoehe) + var(--kopf-hoehe)); z-index: 51;
    margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px;
  }
  /* Der Streifen geht ueber die ganze Fensterbreite, nicht nur ueber den
     Inhalt (Felix, 28.10.2026: "ueber die ganze seite"). */
  .filters::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: 0; bottom: calc(-1 * var(--kopf-verlauf)); left: calc(50% - 50vw); right: calc(50% - 50vw);
    background: linear-gradient(to bottom, rgb(242,244,247) 0%, rgba(242,244,247,.97) 22%,
      rgba(242,244,247,var(--leiste-unten)) calc(100% - var(--kopf-verlauf)), rgba(242,244,247,0));
    -webkit-backdrop-filter: blur(var(--leiste-blur)); backdrop-filter: blur(var(--leiste-blur));
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--kopf-verlauf)), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--kopf-verlauf)), transparent);
    opacity: 0; transition: opacity .2s ease;
  }
  /* Nur solange die Leiste klebt (app.js setzt .klebt). */
  .filters.klebt::before { opacity: 1; }
  /* Dann lassen auch die Felder die Karten leicht durchscheinen. */
  .filters.klebt .suche input, .filters.klebt .auswahl select { background-color: rgba(255,255,255,.8); }
  .filters.klebt .suche input:focus, .filters.klebt .auswahl select:focus { background-color: #fff; }
}

/* Unter der Leiste: wie viele Treffer, und die aktiven Filter als Chips mit
   x zum Entfernen, dazu "Alle zuruecksetzen" (app.js, ergebnisZeigen). */
.ergebnis-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  min-height: 30px; margin: 8px 0 22px;
}
.filters[hidden] + .ergebnis-zeile { display: none; }
.ergebnis { margin: 0 6px 0 0; font-size: 13.5px; color: var(--muted); }
.ergebnis strong { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.aktive-filter { display: contents; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 11px;
  border: 1px solid var(--field-border); border-radius: 14px; background: #fff; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--navy);
  transition: border-color .2s ease, background-color .2s ease;
}
.filter-chip svg { color: var(--muted); }
.filter-chip:hover { border-color: var(--gold); background: #fffdf6; }
.filter-chip:hover svg { color: var(--navy); }
.filter-reset {
  height: 28px; padding: 0 4px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--gold-ink);
  text-decoration: underline; text-decoration-color: rgba(201,162,39,.6); text-underline-offset: 4px;
}
.filter-reset:hover { color: var(--navy); text-decoration-color: var(--navy); }

/* RASTER: 5 / 4 / 3 / 2 Kacheln je Reihe. Schmalere Fugen, dafuer mehr
   Luft in den Kacheln. */
.grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px 16px; padding-bottom: 72px;
}
@media (max-width: 1279px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Seit nur noch die Sortierung neben dem Suchfeld steht (28.10.2026),
   bleiben beide bis zum Handy in einer Reihe. */
@media (max-width: 1023px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; }
}

/* HIGHLIGHTS (28.10.2026; Aufbau nach Felix' Vorbild "mach es mir mal in der
   optik"). Oben ein graues Band: links Woche, Name, Text, Preis, "Jetzt
   entdecken" und der Fortschrittsbalken, rechts die Box als grosses Bild auf
   Navy - zwei Folien, die wechseln. Darunter vier quadratische Kacheln mit
   den teuersten Karten, die halb ins Band ragen; Navy nur hinter den
   Artikeln ("nur bei einzelnen Artikeln"). */
.highlights { margin-top: 0; padding: 0 0 24px; --hl-ueber: 200px; }
.highlights[hidden] { display: none; }
.highlights-inner { max-width: var(--page-width); margin: 0 auto; padding: 0 24px; }
.hl-band { background: #e6eaf1; padding: 56px 0 calc(var(--hl-ueber) + 40px); }
.hl-buehne { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.hl-buehne.ohne-folien { display: block; }
.hl-buehne.ohne-folien .hl-bilder, .hl-buehne.ohne-folien .hl-texte { display: none; }
.hl-text { min-width: 0; }
.hl-eyebrow {
  margin: 0 0 18px; font-family: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums;
}
.hl-woche { margin-left: 8px; font-weight: 600; letter-spacing: .1em; color: #8a92a5; }
.hl-woche:empty { display: none; }
.hl-texte { display: grid; }
.hl-folie { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.hl-folie.an { opacity: 1; visibility: visible; transition-delay: 0s; }
.hl-folie h3 {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 104%; font-size: 46px;
  line-height: 1.02; letter-spacing: -0.035em; color: var(--navy);
}
.hl-folie p { margin: 16px 0 0; max-width: 44ch; font-size: 15px; line-height: 1.55; color: var(--text-soft); }
.hl-folie .hl-folie-preis {
  margin-top: 14px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums;
}
.hl-link {
  margin-top: 18px; padding: 6px 0; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--navy);
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.hl-link:hover { color: var(--gold-ink); }
.hl-steuerung { display: flex; align-items: center; gap: 14px; margin-top: 44px; }
.hl-steuerung[hidden] { display: none; }
.hl-balken { display: flex; gap: 6px; }
.hl-segment {
  width: 72px; height: 14px; padding: 0; border: none; background: none; cursor: pointer; position: relative;
}
.hl-segment::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 3px; border-radius: 2px;
  background: #c9cfdb; transition: background-color .3s ease;
}
.hl-segment.an::before { background: var(--navy); }
.hl-segment:hover::before { background: var(--gold-hell); }
.hl-weiter {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%;
  background: none; color: var(--navy); cursor: pointer; transition: background-color .2s ease;
}
.hl-weiter:hover { background: rgba(11,27,58,.08); }
.hl-segment:focus-visible, .hl-weiter:focus-visible, .hl-link:focus-visible, .hl-bild-folie:focus-visible,
.hl-bild:focus-visible, .hl-korb:focus-visible, .hl-name:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* Grosses Bild rechts: die Box auf Navy mit Goldleuchten. */
.hl-bilder {
  position: relative; aspect-ratio: 2 / 1; border-radius: 4px; overflow: hidden;
  background:
    radial-gradient(48% 70% at 50% 55%, rgba(226,196,95,.40), rgba(226,196,95,0) 72%),
    linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 100%);
}
.hl-bild-folie {
  position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s;
}
.hl-bild-folie.an { opacity: 1; visibility: visible; transition-delay: 0s; }
.hl-bild-folie img {
  position: absolute; inset: 0; margin: auto; display: block; max-width: 82%; max-height: 84%; width: auto; height: auto;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.55)); transition: transform .5s ease;
}
.hl-bild-folie:hover img { transform: scale(1.03); }

/* Kacheln: quadratisch, ragen ins Band; die Karte freigestellt auf Navy. */
.hl-kacheln {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  margin-top: calc(-1 * var(--hl-ueber));
}
.hl-kachel { min-width: 0; }
.hl-rahmen { position: relative; }
.hl-bild {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; cursor: pointer;
  background:
    radial-gradient(50% 55% at 50% 50%, rgba(226,196,95,.34), rgba(226,196,95,0) 72%),
    linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 100%);
  transition: box-shadow .3s ease, transform .3s ease;
}
.hl-bild img {
  position: absolute; inset: 0; margin: auto; display: block; width: auto; height: auto;
  max-width: 82%; max-height: 84%; border-radius: 4.8% / 3.4%;
  box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 18px 30px -10px rgba(0,0,0,.6);
  transition: transform .4s ease;
}
.hl-kachel:hover .hl-bild { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--gold), 0 0 30px rgba(201,162,39,.28), 0 22px 40px -18px rgba(11,27,58,.6); }
.hl-kachel:hover .hl-bild img { transform: scale(1.03); }
/* Korb oben links als runder Knopf (wie im Sortiment: gruen = im Warenkorb). */
.hl-korb {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  color: var(--navy); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.hl-korb svg { width: 18px; height: 18px; }
.hl-korb:hover { background: var(--gold-hell); }
.hl-korb:active { transform: scale(.94); }
.hl-korb.drin { color: #fff; background: var(--ok); }
.hl-korb.drin:hover { background: #17824a; }
.hl-label {
  margin: 12px 0 0; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hl-name {
  margin: 4px 0 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--navy); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hl-name:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.hl-preis { margin: 4px 0 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--navy); font-variant-numeric: tabular-nums; }

@media (max-width: 1023px) {
  .highlights { --hl-ueber: 150px; }
  .hl-buehne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .hl-folie h3 { font-size: 36px; }
  .hl-kacheln { gap: 14px; }
}
@media (max-width: 760px) {
  .highlights { --hl-ueber: 120px; }
  .hl-band { padding-top: 32px; }
  .hl-buehne { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hl-bilder { order: -1; aspect-ratio: 16 / 10; }
  .hl-folie h3 { font-size: 30px; }
  .hl-steuerung { margin-top: 24px; }
  .hl-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
}
@media (max-width: 640px) {
  .highlights-inner { padding: 0 16px; }
  .hl-korb { width: 44px; height: 44px; top: 8px; left: 8px; }
}

/* KACHEL: weiss, feine helle 1-px-Linie, kleiner Radius, im Ruhezustand
   ohne Schatten. Beim Zeigen hebt sie sich sanft, die Linie wird zart
   golden, der Schatten kommt dazu und das Kartenbild waechst ein wenig. */
.card {
  display: flex; flex-direction: column; min-width: 0;
  padding: 14px; background: var(--card); border: 1px solid #e2e5ec; border-radius: 10px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card:hover {
  transform: translateY(-4px); border-color: rgba(201,162,39,.55);
  box-shadow: 0 0 0 3px rgba(201,162,39,.08), 0 18px 34px -16px rgba(11,27,58,.24);
}
/* Bildflaeche: festes Verhaeltnis (alle Kacheln einer Reihe gleich hoch),
   statt grauer Box ein kaum sichtbarer kuehler Verlauf. Die Karte ist der
   Held: sie fuellt die Flaeche fast ganz (knapp 9/10 der Breite) und laesst
   unten nur Platz fuer die Bild-Punkte. Das Bild behaelt seine eigene
   Groesse und wird nur gedeckelt - nichts wird abgeschnitten. */
.card .img {
  position: relative; aspect-ratio: 13/18; border-radius: 6px; overflow: hidden;
  background: radial-gradient(130% 90% at 50% 15%, #ffffff 0%, #f4f6fa 58%, #e9edf4 100%);
  display: grid; place-items: center;
}
.card .img img {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto; max-width: 92%; max-height: 90%;
  border-radius: 5px; box-shadow: 0 1px 2px rgba(11,27,58,.10), 0 10px 20px -8px rgba(11,27,58,.28);
  transition: transform .4s ease;
}
.card:hover .img img { transform: scale(1.03); }
/* SEALED-KACHELN (Pokémon-Sealed und Topps-Boxen): quadratisches Bildfeld.
   Boxen liegen oft quer (4:3); im Quadrat nehmen beide Lagen gleich viel
   Platz ein. Steht vor den Ladeplatzhaltern, damit .img.sk seine Flaeche
   behaelt. */
.card.sealed .img { aspect-ratio: 1/1; }
.card.sealed .img img { max-width: 88%; max-height: 84%; box-shadow: none; }
/* Blaetter-Pfeile (nur bei mehreren Fotos): klein, halbtransparent, dicht
   am Rand - das Motiv bleibt frei. Darunter Punkte fuer die Fotos. */
.img-nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0; border: none; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--navy);
  opacity: 0; transition: opacity .2s ease;
}
.img-nav::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: rgba(255,255,255,.7); box-shadow: 0 1px 3px rgba(11,27,58,.18);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background-color .2s ease, transform .2s ease;
}
.img-nav svg { position: relative; width: 14px; height: 14px; }
.img-nav.prev { left: 0; }
.img-nav.next { right: 0; }
.card:hover .img-nav, .img-nav:focus-visible { opacity: 1; }
.img-nav:hover::before { background: #fff; transform: scale(1.08); }
/* Auf Touch-Geräten (kein Hover) dauerhaft sichtbar, aber zurueckhaltend. */
@media (hover: none) { .img-nav { opacity: .85; } }
.img-dots {
  position: absolute; left: 50%; bottom: 5px; z-index: 2; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; pointer-events: none;
}
.img-dots i { display: block; width: 5px; height: 5px; border-radius: 3px; background: rgba(11,27,58,.22); transition: width .2s ease, background-color .2s ease; }
.img-dots i.an { width: 12px; background: var(--navy); }
.card .img .placeholder { color: var(--muted); font-size: 13px; text-align: center; padding: 12px; }

/* Infoblock, eng gesetzt: Edition und Nummer als graue Zeile darueber,
   der Name gross und fett, darunter die Chips, unten die Preiszeile. */
.card .body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 12px 1px 0; }
.card .meta {
  min-height: 1.4em; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .07em;
  text-transform: uppercase; color: #6b7489;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card h3 { margin: 0; font-size: 16.5px; line-height: 1.3; }
/* Kartenname: kraeftig, hoechstens zwei Zeilen - der ganze Titel steht im
   Tooltip und in der Detailansicht. */
.card h3.ttl {
  font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; text-align: left; color: var(--navy);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* Zustand farbig nach Stufe (Mint bis Excellent gruen, Good neutral,
   Played gelb, Poor rot), die Sprache als schlichter Umriss. Klein und
   flach - in Kachel und Detailansicht gleich. */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px;
  font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .01em; white-space: nowrap;
  color: var(--text-soft); background: #eef0f4;
}
.chip.z-top { color: #17683f; background: #e2f3e9; }
.chip.z-gut { color: #45506a; background: #eef0f4; }
.chip.z-bespielt { color: #835b00; background: #fbf0d2; }
.chip.z-schwach { color: #a93a22; background: #fbe7e2; }
.chip.sprache { color: var(--text-soft); background: none; box-shadow: inset 0 0 0 1px var(--field-border); }

/* Preiszeile: unten in der Kachel (die Preise einer Reihe stehen auf einer
   Linie). Der Preis gross in Navy mit gleich breiten Ziffern, "Nur 1
   verfuegbar" als kleiner goldener Hinweis direkt daneben; rechts der
   kleine Korb-Knopf. */
.card .price-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 14px;
}
.card .price-box { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.card .price {
  font-size: 22px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--navy);
}
.card .stock { font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.card .stock.knapp { color: var(--gold-ink); }
.card .stock.aus { color: var(--muted); }
.badge {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-soft); background: #fff; border: 1px solid var(--border);
}
.badge.cond { color: var(--ok); }
/* Kaufknopf in Gold mit Navy-Schrift wie der Warenkorb oben - breit mit
   Zeichen und Text in der Detailansicht ... */
.add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 48px; padding: 0 20px; border: none; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--navy); background: var(--gold);
  transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.add-btn:hover:not(:disabled) { background: var(--gold-hell); box-shadow: 0 8px 20px -10px rgba(201,162,39,.8); }
.add-btn:active:not(:disabled) { transform: scale(.98); }
.add-btn:disabled { background: #e3e5ea; color: #8a90a0; cursor: not-allowed; box-shadow: none; }
/* ... in der Kachel ein kleiner Navy-Knopf mit Korb-Zeichen: weniger
   Gewicht als der Preis. Beim Zeigen ein goldener Rand. */
.add-btn.rund {
  flex: 0 0 38px; width: 38px; height: 38px; padding: 0; border-radius: 8px;
  display: grid; place-items: center; color: #fff; background: var(--navy);
}
.add-btn.rund:hover:not(:disabled) { background: var(--navy-2); box-shadow: inset 0 0 0 1px var(--gold), 0 6px 14px -8px rgba(11,27,58,.6); }

/* Liegt die Karte im Warenkorb: der Einkaufswagen gruen (app.js,
   korbKnoepfeZeigen); ein zweiter Klick nimmt sie wieder heraus. */
.add-btn.rund.drin { color: #fff; background: var(--ok); }
.add-btn.rund.drin:hover:not(:disabled) { background: #17824a; box-shadow: 0 6px 14px -8px rgba(23,130,74,.7); }

/* Hinweis nach "In den Warenkorb": unten, kurz, mit "Zum Warenkorb" - das
   Warenkorb-Fenster geht nicht mehr von selbst auf (app.js). */
.korb-hinweis {
  position: fixed; right: 24px; bottom: 24px; z-index: 220; max-width: min(440px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 18px;
  border-radius: 10px; background: var(--navy); color: #fff;
  box-shadow: 0 18px 40px -14px rgba(5,12,28,.6), 0 0 0 1px rgba(201,162,39,.35);
  font-size: 14px; line-height: 1.35;
  opacity: 0; translate: 0 12px; pointer-events: none; visibility: hidden;
  transition: opacity .25s ease, translate .25s ease, visibility 0s linear .25s;
}
.korb-hinweis.sichtbar { opacity: 1; translate: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.korb-hinweis-text { flex: 1; min-width: 0; }
.korb-hinweis-text::before { content: "✓"; margin-right: 8px; font-weight: 800; color: var(--gold-hell); }
.korb-hinweis-knopf {
  flex-shrink: 0; height: 36px; padding: 0 14px; border: none; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--navy); background: var(--gold);
}
.korb-hinweis-knopf:hover { background: var(--gold-hell); }
.korb-hinweis-knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
  .korb-hinweis { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .korb-hinweis-knopf { height: 40px; }
}

/* KLEINE ANIMATIONEN (28.10.2026, "halte es schlicht"). Das Abbild, das in
   den Warenkorb fliegt (app.js, flugInDenKorb); der Korb-Knopf ploppt auf
   bzw. gibt nach. */
.korb-flug {
  position: fixed; z-index: 230; pointer-events: none; object-fit: contain; border-radius: 6px;
  box-shadow: 0 10px 24px -8px rgba(11,27,58,.55);
}
@keyframes knopf-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes knopf-raus { 0% { transform: scale(1); } 40% { transform: scale(.86); } 100% { transform: scale(1); } }
.add-btn.rund.pop, .hl-korb.pop { animation: knopf-pop .35s cubic-bezier(.3,.7,.4,1); }
.add-btn.rund.pop-raus, .hl-korb.pop-raus { animation: knopf-raus .25s ease-out; }

/* Alle Knoepfe geben beim Druecken kurz nach; Pfeile ruecken beim Zeigen
   ein Stueck in ihre Richtung, das X zum Schliessen dreht sich leicht. */
.knopf:active, .load-more button:active, .filter-chip:active, .filter-reset:active, .kategorien .kat:active,
.hauptnav button:active, .icon-btn:active, .link-btn:active, .hl-weiter:active, .detail-close:active,
.korb-hinweis-knopf:active, .hl-link:active, .highlights-pfeil:active, .drawer .close:active { transform: scale(.96); }
.knopf svg, .load-more button svg, .hl-weiter svg, .filter-chip svg, .detail-close svg, .drawer .close svg {
  transition: transform .25s ease;
}
.knopf:hover svg, .load-more button:hover svg { transform: translateY(2px); }
.hl-weiter:hover svg { transform: translateX(2px); }
.filter-chip:hover svg, .detail-close:hover svg, .drawer .close:hover svg { transform: rotate(90deg); }
.hl-link { transition: color .2s ease, text-underline-offset .2s ease; }
.hl-link:hover { text-underline-offset: 3px; }

/* KEINE TREFFER: Zeichen, Meldung (app.js schreibt sie) und - wenn ein
   Filter greift - ein Hinweis mit "Alle Filter zuruecksetzen". */
#empty {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 56px 20px 10px; text-align: center;
  font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy);
}
#empty::before {
  content: ""; width: 60px; height: 60px; border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='11' height='15' rx='2'/%3E%3Cpath d='M9 21h8a2 2 0 0 0 2-2V8'/%3E%3C/svg%3E") no-repeat center / 28px;
}
#empty[hidden] { display: none; }
.leer-hinweis { display: none; padding: 0 20px 88px; text-align: center; }
.leer-hinweis p { margin: 0 0 10px; font-size: 14.5px; color: var(--muted); }
.gefiltert #empty:not([hidden]) + .leer-hinweis { display: block; }
#empty:not([hidden]) ~ .load-more { display: none; }
/* Fehlermeldung beim Laden steht im Raster - ueber die volle Breite. */
.grid > .empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 60px 20px; }

/* „Mehr anzeigen"-Knopf unter dem Kartenraster */
.load-more { text-align: center; margin: -24px 0 80px; }
.load-more button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 24px; border: 1px solid var(--field-border); border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 700; color: var(--navy); background: #fff;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.load-more button:hover { color: var(--gold-ink); border-color: var(--gold); transform: scale(1.02); }

/* Kacheln blenden beim Scrollen dezent und leicht gestaffelt ein - als
   scroll-gebundene Animation ganz ohne Skript. Was beim Zeichnen schon im
   Bild ist, steht sofort da (kein Flackern beim Tippen in der Suche).
   Browser ohne das Merkmal zeigen die Kacheln einfach. "translate" statt
   "transform": so bleibt das Anheben beim Zeigen unberuehrt. */
@keyframes karte-ein { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .grid > .card:not(.skeleton) { animation: karte-ein linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .grid > .card:nth-child(5n+2):not(.skeleton) { animation-range: entry 4% entry 44%; }
    .grid > .card:nth-child(5n+3):not(.skeleton) { animation-range: entry 8% entry 48%; }
    .grid > .card:nth-child(5n+4):not(.skeleton) { animation-range: entry 12% entry 52%; }
    .grid > .card:nth-child(5n):not(.skeleton) { animation-range: entry 16% entry 56%; }
  }
}

/* Drawer / Warenkorb */
.overlay { position: fixed; inset: 0; background: rgba(7,19,48,.45); opacity: 0; pointer-events: none; transition: .2s; z-index: 90; }
.overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  background: var(--card); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform .25s, box-shadow .25s; z-index: 100;
  display: flex; flex-direction: column;
}
/* Schatten erst offen - zu waere er am rechten Rand zu sehen. */
.drawer.open { transform: none; box-shadow: -24px 0 64px rgba(11,27,58,.18); }

/* Ladeplatzhalter, solange der Katalog laedt: dieselbe Kachel in Grau,
   ein heller Schimmer laeuft darueber. */
.card.skeleton { pointer-events: none; }
.card .img.sk, .card.skeleton .sk-line, .card.skeleton .sk-chip, .card.skeleton .sk-btn {
  background: linear-gradient(90deg, #eceff4 0%, #eceff4 38%, #f7f8fb 50%, #eceff4 62%, #eceff4 100%) 0 0 / 250% 100%;
  animation: sk-schimmer 1.6s ease-in-out infinite;
}
.card.skeleton .sk-line { height: 11px; border-radius: 5px; margin: 4px 0; }
.card.skeleton .sk-line.ttl { height: 16px; }
.card.skeleton .sk-line.price { height: 20px; margin: 0; }
.card.skeleton .sk-chips { display: flex; gap: 5px; margin-top: 4px; }
.card.skeleton .sk-chip { width: 58px; height: 20px; border-radius: 5px; }
.card.skeleton .sk-btn { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 8px; }
@keyframes sk-schimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* KARTEN-DETAILANSICHT (dritte Runde, 28.10.2026). Breit und etwas
   niedriger, links das Bild (55 %), rechts die Angaben von oben nach unten,
   unten abgesetzt der Kaufblock. Dahinter ein dunkler, weichgezeichneter
   Grund; beides blendet getrennt ein, das Fenster waechst dabei von 97 %. */
.card .img[data-detail], .card h3.ttl { cursor: pointer; }
.card h3.ttl:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.detail {
  position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center;
  padding: 24px; visibility: hidden; pointer-events: none;
  transition: visibility 0s linear .26s;
}
.detail::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(5,12,28,.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .26s ease;
}
.detail.open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.detail.open::before { opacity: 1; }
.detail-box {
  position: relative; width: min(1100px, 100%); height: min(84vh, 720px);
  display: grid; grid-template-columns: 55fr 45fr;
  background: var(--card); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 90px -20px rgba(5,12,28,.6);
  opacity: 0; transform: scale(.97); transition: opacity .26s ease, transform .26s cubic-bezier(.2,.7,.2,1);
}
.detail.open .detail-box { opacity: 1; transform: none; }
body.fenster-offen { overflow: hidden; padding-right: var(--rollbalken, 0px); }
/* Schliessen-Knoepfe: runde 44-px-Flaeche mit einem X. */
.detail-close, .drawer .close, .auth-modal .close {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: none; border-radius: 50%; background: none; color: var(--navy); cursor: pointer;
  transition: background-color .2s ease;
}
.detail-close:hover, .drawer .close:hover, .auth-modal .close:hover { background: var(--bg-soft); }
.detail-close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 46px; height: 46px; background: rgba(255,255,255,.85); }

/* Bild links: kuehler heller Grund, das Bild so gross wie die Flaeche
   erlaubt - ganz zu sehen, nie beschnitten (Felix, 04.09.2026). Beim
   Zeigen vergroessert es sich unter dem Zeiger wie unter einer Lupe
   (app.js setzt den Punkt). Pfeile und Vorschaubilder nur bei mehreren
   Fotos (.mehrere). */
.detail-gallery {
  display: flex; flex-direction: column; gap: 16px; min-height: 0; padding: 28px;
  background: radial-gradient(120% 90% at 50% 20%, #ffffff 0%, #f2f4f8 60%, #e8ecf3 100%);
}
.detail-main { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 10px; }
.detail-main img {
  position: absolute; inset: 0; margin: auto; display: block;
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  border-radius: 12px; box-shadow: 0 2px 6px rgba(11,27,58,.12), 0 24px 48px -18px rgba(11,27,58,.38);
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); transition: transform .3s ease;
}
@media (hover: hover) {
  .detail-main { cursor: zoom-in; }
  .detail-main:hover img { transform: scale(1.6); }
}
.detail-nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; border: none; background: none; cursor: pointer;
  display: none; place-items: center; color: var(--navy);
}
.detail-nav::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: rgba(255,255,255,.72); box-shadow: 0 1px 4px rgba(11,27,58,.2);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color .2s ease;
}
.detail-nav svg { position: relative; }
.detail-nav:hover::before { background: #fff; }
.detail-nav.prev { left: 4px; }
.detail-nav.next { right: 4px; }
.mehrere .detail-nav { display: grid; }
.detail-thumbs { display: none; justify-content: center; gap: 10px; }
.mehrere .detail-thumbs { display: flex; }
.detail-thumbs button {
  width: 58px; height: 78px; padding: 3px; border: 2px solid var(--border); border-radius: 8px;
  background: #fff; cursor: pointer; opacity: .6; transition: opacity .2s ease, border-color .2s ease;
}
.detail-thumbs button:hover { opacity: .9; }
.detail-thumbs button.active { border-color: var(--gold); opacity: 1; }
.detail-thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }

/* Angaben rechts, von oben nach unten: Edition (klein), Name (gross),
   Nummer/Merkmale/Sprache, Chips, Datenliste, Hinweise - unten der
   Kaufblock. Wird es zu lang, rollt nur diese Spalte. */
.detail-info { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.detail-kopf { padding: 40px 72px 0 32px; }
.detail-eyebrow {
  margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b7489;
}
.detail-info h3 {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 104%; font-size: 32px;
  line-height: 1.08; letter-spacing: -0.03em; color: var(--navy);
}
.detail-metazeile { margin: 10px 0 0; font-size: 14px; color: var(--text-soft); }
.detail-info .chips { margin-top: 14px; }
.detail-info .chip { height: 24px; padding: 0 9px; font-size: 12px; }
.detail-daten { margin: 26px 32px 0; padding: 0; display: grid; grid-template-columns: auto 1fr; }
.detail-daten dt, .detail-daten dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.detail-daten dt { padding-right: 24px; color: var(--muted); }
.detail-daten dd { font-weight: 600; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.detail-daten dt:last-of-type, .detail-daten dd:last-of-type { border-bottom: 1px solid var(--border); }
.detail-hinweise {
  list-style: none; margin: 22px 32px 0; padding: 14px 16px; display: grid; gap: 10px;
  border-radius: 10px; background: #f4f6f9;
}
.detail-hinweise li { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--text-soft); }
.detail-hinweise svg { flex-shrink: 0; margin-top: 1px; color: var(--gold-ink); }
.detail-hinweise strong { color: var(--navy); }
.detail-kauf {
  position: sticky; bottom: 0; margin-top: auto; padding: 20px 32px 26px;
  border-top: 1px solid var(--border); background: #fafbfc;
}
.detail-price {
  font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--navy);
}
.detail-zusatz { margin: 6px 0 16px; font-size: 12.5px; color: var(--muted); }
.detail-zusatz .knapp { font-weight: 700; color: var(--gold-ink); }
.detail-add { height: 52px; }
@media (max-width: 900px) {
  .detail-box { grid-template-columns: 1fr 1fr; }
  .detail-kopf { padding: 32px 64px 0 24px; }
  .detail-daten, .detail-hinweise { margin-left: 24px; margin-right: 24px; }
  .detail-kauf { padding: 18px 24px 22px; }
  .detail-info h3 { font-size: 27px; }
}
/* Handy: fast bildschirmfuellendes Blatt von unten - Bild oben, Angaben
   darunter, der Kaufblock klebt am unteren Rand. */
@media (max-width: 640px) {
  .detail { padding: 0; align-items: flex-end; }
  .detail-box {
    display: block; width: 100%; height: auto; max-height: 94dvh; overflow-y: auto;
    border-radius: 16px 16px 0 0; transform: translateY(24px);
  }
  .detail-close { top: 10px; right: 10px; }
  .detail-gallery { padding: 18px 16px 14px; }
  .detail-main { flex: none; height: 46vh; }
  .detail-main img { border-radius: 8px; }
  .detail-thumbs button { width: 46px; height: 62px; }
  .detail-info { overflow: visible; }
  .detail-kopf { padding: 18px 16px 0; }
  .detail-info h3 { font-size: 26px; }
  .detail-daten, .detail-hinweise { margin-left: 16px; margin-right: 16px; }
  .detail-kauf { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); margin-top: 22px; box-shadow: 0 -10px 24px -16px rgba(11,27,58,.35); }
  .detail-price { font-size: 28px; }
  .detail-zusatz { margin-bottom: 12px; }
}
.drawer header { display: flex; align-items: center; padding: 14px 14px 14px 24px; border-bottom: 1px solid var(--border); }
.drawer header h2 {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 105%; font-size: 21px;
  letter-spacing: -0.03em; color: var(--navy);
}
.drawer .close { margin-left: auto; }
.drawer .items { flex: 1; overflow-y: auto; padding: 8px 24px; }
.line { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.line .thumb { width: 80px; height: 112px; border-radius: 8px; background: var(--inset) center/contain no-repeat; flex-shrink: 0; }
.line .info { flex: 1; min-width: 0; font-size: 14px; }
.line .info .n { font-weight: 700; line-height: 1.35; color: var(--navy); }
.line .info .p { margin-top: 4px; font-weight: 800; color: var(--gold-text); }
.qty { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.qty button { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; }
.qty button:disabled { opacity: .4; cursor: not-allowed; }
/* Im Warenkorb: runde Mengenknoepfe (.qty allein nutzt auch die Verwaltung). */
.drawer .qty { gap: 10px; margin-top: 10px; }
.drawer .qty button {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border-color: var(--field-border); border-radius: 50%; font: inherit; font-size: 18px; line-height: 1;
  transition: border-color .2s ease, color .2s ease;
}
.drawer .qty button:hover:not(:disabled) { color: var(--gold-ink); border-color: var(--gold); }
.drawer .qty span { min-width: 16px; text-align: center; font-weight: 700; }
.line .rm {
  align-self: flex-start; padding: 4px 0; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.line .rm:hover { color: var(--danger); }
.drawer footer { padding: 20px 24px 24px; border-top: 1px solid var(--border); }
/* Rabattcode im Warenkorb */
.discount-row { display: flex; gap: 8px; margin-bottom: 8px; }
.discount-row input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px;
  border: 1px solid var(--field-border); border-radius: 10px;
  font: inherit; font-size: 15px; color: var(--text); background: #fff;
}
.discount-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,.16); }
.discount-row button {
  height: 46px; padding: 0 18px; border: 1px solid var(--field-border); border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--navy); background: #fff;
  transition: border-color .2s ease, color .2s ease;
}
.discount-row button:hover { color: var(--gold-ink); border-color: var(--gold); }
.discount-msg { font-size: 12px; min-height: 0; margin-bottom: 8px; }
.discount-msg.ok { color: var(--ok); }
.discount-msg.err { color: var(--danger); }
#discountRow { font-size: 14px; font-weight: 700; color: var(--ok); margin-bottom: 6px; }

.total-row { display: flex; justify-content: space-between; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); margin-bottom: 14px; }
/* Ohne eingeloesten Code ist die Rabattzeile ausgeblendet - display:flex
   schlug das hidden-Attribut, ein leeres gruenes "Rabatt" stand da. */
.total-row[hidden] { display: none; }
/* Versandzeile wie die Rabattzeile klein; darunter, solange der Warenwert
   unter 20 EUR liegt, was bis zum kostenlosen Versand fehlt. */
#versandRow { font-size: 14px; font-weight: 700; color: var(--text-soft); margin-bottom: 6px; }
.versand-hinweis { margin: -6px 0 14px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--navy); background: var(--gold-soft); }
.versand-hinweis[hidden] { display: none; }
/* Navy fuer Hauptknoepfe (Anmelden); im Warenkorb ist er eine
   Kauf-Aktion und damit blau (unten, .pay-buttons). */
.checkout-btn {
  width: 100%; height: 52px; padding: 0 16px; border: none; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--on-accent); background: var(--accent);
  transition: background-color .2s ease, transform .2s ease;
}
.checkout-btn:hover:not(:disabled) { background: var(--accent-soft); transform: scale(1.01); }
.checkout-btn:disabled { opacity: .45; cursor: not-allowed; }
.pay-buttons { display: flex; flex-direction: column; gap: 10px; }
.pay-buttons .checkout-btn { background: var(--cta); }
.pay-buttons .checkout-btn:hover:not(:disabled) { background: var(--cta-hover); }
/* PayPal behaelt seine Markenfarbe. */
.paypal-btn {
  width: 100%; height: 52px; border: none; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 800; font-style: italic; color: #003087; background: #ffc439;
  transition: filter .2s ease, transform .2s ease;
}
.paypal-btn:hover:not(:disabled) { filter: brightness(.97); transform: scale(1.01); }
.paypal-btn:disabled { opacity: .5; cursor: not-allowed; }
.drawer .note { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 12px; text-align: center; }
.drawer .note a { color: var(--accent-2); }

/* Fusszeile in Navy: links der Name mit dem Steuerhinweis, rechts die
   Rechtstexte. Oben eine feine Goldlinie. Auf kurzen Seiten (Konto, Danke)
   sitzt sie unten am Fensterrand statt mitten im Bild - nur wo es sie gibt,
   die Verwaltung bleibt so unberuehrt. */
body:has(> footer.site) { display: flex; flex-direction: column; }
/* Als Flex-Element wuerde main mit margin: auto nur so breit wie sein
   Inhalt (Raster und Filterkasten zu schmal, am Handy ueber den Rand). */
body:has(> footer.site) > main { width: 100%; }
footer.site {
  margin-top: auto;
  background: var(--navy); color: rgba(255,255,255,.64); font-size: 13px;
  border-top: 1px solid rgba(201,162,39,.45);
}
.footer-inner {
  max-width: var(--page-width); margin: 0 auto; padding: 52px 24px 60px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px 48px;
}
.footer-marke { flex: 1 1 320px; max-width: 560px; }
.footer-logo { display: block; width: auto; height: 54px; margin-bottom: 14px; }
.footer-marke p { margin: 0 0 4px; line-height: 1.65; }
footer.site .links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
footer.site .links a {
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.88); text-decoration: none;
  transition: color .2s ease;
}
footer.site .links a:hover { color: var(--gold-hell); text-decoration: underline; text-underline-offset: 5px; }

/* Login-Fenster (Modal) */
.auth-modal {
  position: fixed; z-index: 100; top: 50%; left: 50%;
  transform: translate(-50%, -46%) scale(.98);
  width: min(420px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 80px rgba(7,19,48,.28); padding: 56px 28px 28px;
  opacity: 0; pointer-events: none; transition: .18s;
}
.auth-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.auth-modal .close { position: absolute; top: 8px; right: 8px; }
.auth-tabs { display: flex; gap: 2px; margin-bottom: 22px; padding: 3px; background: var(--rail); border-radius: 10px; }
.auth-tabs button {
  flex: 1; height: 40px; border: none; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--muted);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.auth-tabs button.active { color: var(--navy); background: #fff; box-shadow: 0 1px 2px rgba(11,27,58,.10), inset 0 0 0 1px rgba(201,162,39,.65); }
.auth-modal .field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
/* display:flex oben schlaegt sonst das hidden-Attribut (E-Mail-Feld beim
   Passwort-Neusetzen, "Passwort vergessen?" beim Registrieren). */
.auth-modal .field[hidden], .auth-forgot[hidden] { display: none; }
.auth-modal label { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.auth-modal input {
  height: 46px; padding: 0 14px; border: 1px solid var(--field-border); border-radius: 10px;
  font: inherit; font-size: 15px; color: var(--text); background: #fff;
}
.auth-modal input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,.16); }
.auth-error { color: var(--danger); font-size: 13px; min-height: 0; margin: 4px 0; }
.auth-info { color: var(--ok); font-size: 13px; margin: 4px 0; }
.auth-modal .checkout-btn { margin-top: 8px; height: 48px; }
.auth-forgot {
  display: block; width: 100%; min-height: 44px; margin-top: 4px; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.auth-forgot:hover { color: var(--gold-ink); }
.auth-divider { text-align: center; color: var(--muted); font-size: 12px; margin: 12px 0 16px; position: relative; }
.auth-divider::before, .auth-divider::after { content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--border); }
.auth-divider::before { left: 0; } .auth-divider::after { right: 0; }
.google-btn {
  width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--field-border); border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--text); background: #fff;
  transition: border-color .2s ease, background-color .2s ease;
}
.google-btn:hover { border-color: var(--gold); background: #fbfaf5; }
.google-btn .g-logo { flex-shrink: 0; }

/* Konto-Seite: Bestellliste */
.orders { display: flex; flex-direction: column; gap: 14px; }
.order-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.order-card .head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.order-card .status { padding: 3px 10px; border-radius: 6px; font-weight: 700; font-size: 12px; }
.status-paid { background: rgba(31,157,87,.12); color: var(--ok); }
.status-pending { background: var(--rail); color: var(--text-soft); }
.status-cancelled, .status-failed { background: rgba(226,59,87,.12); color: var(--danger); }
.status-shipped { background: var(--gold-soft); color: var(--gold-ink); }
.status-lost { background: rgba(138,75,0,.12); color: #8a4b00; }
.order-card ul { margin: 0; padding-left: 18px; font-size: 14px; }
.order-card .tot { text-align: right; font-weight: 800; color: var(--navy); margin-top: 10px; }

/* Info-Seiten (Rechtstexte, Konto) */
.page { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; line-height: 1.7; }
.page h1 {
  margin: 0 0 24px; font-family: var(--font-display); font-weight: 800; font-stretch: 105%; font-size: 42px;
  line-height: 1.05; letter-spacing: -0.035em; color: var(--navy);
}
.page h2 {
  margin: 40px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 21px;
  line-height: 1.3; letter-spacing: -0.02em; color: var(--navy);
}
.notice { background: rgba(226,59,87,.08); border: 1px solid rgba(226,59,87,.35); padding: 14px 16px; border-radius: 10px; color: #9b1c33; margin: 20px 0; }
.result { text-align: center; padding: 88px 24px; }
.result h1 {
  margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-stretch: 105%; font-size: 36px;
  line-height: 1.1; letter-spacing: -0.035em; color: var(--navy);
}
.result p { color: var(--text-soft); }
/* Zeichen ueber der Meldung (Haken / Warenkorb) - ein Kreis statt Emoji. */
.result .big {
  display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 24px;
  border-radius: 50%; color: var(--gold-ink); background: var(--gold-soft);
}
/* Display, Rand oben und Unterstrich nutzt auch die Verwaltung (admin.css
   ueberschreibt nur Farben und Masse) - diese drei bleiben deshalb, wie sie sind. */
.btn { display: inline-block; background: var(--accent); color: var(--on-accent); padding: 14px 26px; border-radius: 10px; text-decoration: none; font-weight: 700; margin-top: 20px; }
.btn:hover { background: var(--accent-soft); }
.page .btn, .result .btn { font-family: inherit; font-size: 15px; }

/* BEWEGUNG (zweite Runde, 28.10.2026): zurueckhaltend, nichts federt. Die
   Buehne baut sich beim Laden gestaffelt von unten auf, die Kartengruppen
   schweben 4 px, das Muster atmet und wandert ueber 40 s um wenige Pixel. */
@keyframes auftauchen { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes muster-atmen { from { opacity: .7; transform: translate3d(0, 0, 0); } to { opacity: 1; transform: translate3d(-18px, -12px, 0); } }
@keyframes tab-puls {
  from { box-shadow: 0 1px 2px rgba(11,27,58,.2), 0 0 0 0 rgba(201,162,39,.7); }
  to { box-shadow: 0 1px 2px rgba(11,27,58,.2), 0 0 0 12px rgba(201,162,39,0); }
}
.buehne-kicker, .buehne h1, .buehne-fakten, .buehne-knoepfe, .buehne-gruppen {
  animation: auftauchen .6s cubic-bezier(.2,.7,.2,1) both;
}
.buehne h1 { animation-delay: .08s; }
.buehne-fakten { animation-delay: .16s; }
.buehne-knoepfe { animation-delay: .24s; }
.buehne-gruppen { animation-delay: .34s; }

/* Tablet: die Buehne stapelt sich, die Kartengruppen stehen unter dem
   Text. Das Vertrauens-Band bricht in zwei Spalten um. */
@media (max-width: 960px) {
  .buehne-inner { grid-template-columns: 1fr; min-height: 0; padding-bottom: 26px; gap: 20px; }
  .buehne-gruppen { justify-content: flex-start; }
  .gruppe { max-width: 170px; }
}

/* Zwischen Handy und Rechner (bis 760 px) passt "Warenkorb" nicht mehr neben
   Logo, Marken und Anmelden - dann zeigt er nur Zeichen und Zahl. */
@media (max-width: 760px) {
  .cart-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cart-btn { gap: 6px; padding: 0 6px 0 12px; }
}

/* Handy (bis 640 px) */
@media (max-width: 640px) {
  :root { --kopf-hoehe: 119px; }
  .container, .header-inner, .hero-inner, .footer-inner, .buehne-inner { padding-left: 16px; padding-right: 16px; }

  /* Kopfzeile kompakt: Logo links, rechts quadratische Knoepfe (Suche,
     Anmelden als Personen-Zeichen, Warenkorb mit Zaehler). Die Marken
     stehen als Umschalter ueber die volle Breite in einer eigenen Zeile. */
  .header-inner { flex-wrap: wrap; min-height: 0; padding-top: 8px; padding-bottom: 8px; gap: 6px; }
  .logo-bild { height: 38px; }
  .hauptnav {
    order: 3; width: 100%; margin: 2px 0 0; padding: 3px;
    border: 1px solid var(--border); border-radius: 999px; transition: border-color .4s ease;
  }
  .hauptnav button {
    flex: 1 1 0; justify-content: center; height: 44px; padding: 0 12px; border-radius: 999px;
    font-weight: 700; transition: background-color .25s ease, color .25s ease;
  }
  .hauptnav button::after { display: none; }
  .hauptnav button.active { color: var(--navy); background: var(--gold); }
  header.site.dunkel .hauptnav { border-color: rgba(255,255,255,.22); }
  header.site.dunkel .hauptnav button.active { color: var(--navy); }
  .icon-btn, .link-btn, .admin-link {
    width: 44px; height: 44px; padding: 0; justify-content: center;
    border: 1px solid var(--field-border); border-radius: 8px;
  }
  header.site.dunkel .icon-btn, header.site.dunkel .link-btn, header.site.dunkel .admin-link { border-color: rgba(255,255,255,.28); }
  .link-btn .ico { display: block; }
  .link-btn:hover { text-decoration: none; border-color: var(--gold); }
  /* Warenkorb nur als Zeichen mit Abzeichen. */
  .cart-btn { justify-content: center; width: 44px; height: 44px; padding: 0; margin-left: 0; }
  /* Beschriftungen nur noch fuer Screenreader. */
  .cart-label, .link-btn .lbl, .admin-link .lbl {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* Buehne: Text und Knoepfe untereinander, die Kartengruppen nur noch als
     Pillen mit Name und Anzahl. */
  .buehne-inner { padding-top: calc(var(--kopf-hoehe) + 30px); padding-bottom: 28px; gap: 24px; }
  .buehne-kicker { margin-bottom: 10px; font-size: 10.5px; letter-spacing: .24em; }
  .buehne h1 { font-size: 42px; }
  .buehne h1 { --logo-breite: min(340px, calc(100vw - 32px)); }
  .buehne-fakten { flex-direction: column; gap: 6px; margin-top: 16px; font-size: 15px; }
  .buehne-knoepfe { margin-top: 20px; gap: 10px; }
  /* die beiden Knoepfe nebeneinander - spart eine Zeile */
  .buehne-knoepfe { flex-wrap: nowrap; }
  .buehne-knoepfe .knopf { flex: 1 1 auto; height: 48px; padding: 0 14px; font-size: 14.5px; }
  .buehne-gruppen { flex-wrap: wrap; gap: 8px; padding: 0; }
  .gruppe, .gruppe:nth-child(2) { flex: 0 0 auto; max-width: none; margin-bottom: 0; }
  .gruppe-faecher { display: none; }
  .gruppe-label { height: 44px; padding: 0 16px; font-size: 13.5px; }

  /* Laufband am Handy etwas kleiner; Unterzeilen bleiben ("ab 20 EUR",
     "2-4 Tage" gehoeren zur Aussage). */
  .vertrauen-inner li { gap: 8px; padding: 13px 0; }
  .vertrauen-inner li::after { margin: 0 var(--band-abstand, 40px); }
  .vertrauen strong { font-size: 13px; }
  .vertrauen .text { font-size: 12px; }

  .hero { padding-top: 40px; }
  .hero h2 { font-size: 32px; }
  /* Drei gleich breite Reiter ueber die volle Breite. Die Anzahl steht unter
     dem Namen, sonst passt "Einzelkarten 4.878" nicht in ein Drittel. */
  .kategorie-leiste { width: 100%; }
  .kategorien { display: flex; width: 100%; }
  .kategorien .kat {
    flex: 1 1 0; min-width: 0; height: 50px; padding: 0 6px;
    flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.2;
  }
  .kategorien .kat-zahl { min-width: 0; height: 16px; padding: 0 6px; font-size: 10.5px; }

  /* Der Filterkasten stapelt sich: oben das Suchfeld ueber die volle
     Breite, darunter die Listen in einer Reihe, die sich seitlich schieben
     laesst. */
  .filters { margin-top: 20px; padding: 0; }
  .suche { flex-basis: 100%; }
  .filters { flex-wrap: wrap; }
  .auswahl { flex: 0 0 100%; }
  .auswahl select { flex: 1 1 auto; max-width: none; }
  .ergebnis-zeile { margin: 10px 0 16px; }

  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
  .card { padding: 9px; border-radius: 9px; }
  .card .img { border-radius: 5px; }
  .card .body { gap: 3px; padding: 9px 1px 0; }
  .card .meta { font-size: 10px; letter-spacing: .05em; }
  .card h3.ttl { font-size: 14.5px; }
  .chip { height: 19px; padding: 0 6px; font-size: 10.5px; }
  .card .price-row { gap: 6px; padding-top: 10px; }
  .card .price { font-size: 18px; }
  .card .stock { font-size: 10px; }
  .add-btn.rund { flex-basis: 44px; width: 44px; height: 44px; }
  .card.skeleton .sk-btn { flex-basis: 44px; width: 44px; height: 44px; }
  .load-more { margin-top: -12px; }

  .drawer .items { padding: 8px 16px; }
  .drawer footer { padding: 16px; }
  .drawer .qty button { width: 44px; height: 44px; }
  .line .rm { min-height: 44px; }
  .auth-modal { padding: 56px 20px 20px; }

  .footer-inner { padding-top: 36px; padding-bottom: 44px; }
  footer.site .links a { display: inline-flex; align-items: center; min-height: 44px; }

  .page { padding: 36px 16px 56px; }
  .page h1 { font-size: 32px; }
  .result { padding: 56px 16px; }
}
/* Auf den schmalsten Handys passt die Versandzeile so noch in eine Zeile. */
@media (max-width: 380px) {
  .shipbar { font-size: 12px; padding-left: 10px; padding-right: 10px; }
}

/* Wer "weniger Bewegung" eingestellt hat, bekommt keine einzige Animation:
   nichts blendet ein, schwebt, pulsiert oder gleitet. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .einblenden { opacity: 1; transform: none; }
}