/* STARTSEITE (start.js) wie vor dem Umbau (Felix, 29.10.2026: "die
   Startseite soll schon noch so aussehen wie bei der alten Seite"): Buehne,
   Laufband, Highlights und Sortiment stehen unveraendert in styles.css.
   Hier nur, was neu dazukam. Die Reiterleiste mit dem Marken-Schalter steht
   in sortiment.css (dieselbe auf den Sortimentsseiten). */

/* HIGHLIGHTS, dritter Anlauf (Felix, 29.10.2026). Erst "ohne den blauen
   Hintergrund" bei Boxen und Karten, dann "zu wenig blau", dann "ueberleg dir
   nochmal was anderes ... mehr Karten ... in 4er-Batches switchen wie oben
   die Boxen". Navy steckt in einer Tafel fuer Text, Preis, Knopf und
   Pfeile - nie hinter einem Produkt: die Box steht freigestellt daneben auf
   dem grauen Band.
   SAMMLERSTUECKE (Felix, 30.10.2026: "das highlights sammlerstücke segment
   ... baue das in das live ein"): die 12 Karten stehen nicht mehr in
   Viererseiten darunter, sondern im dunklen Abschnitt .sammler. Das graue
   Band geht weich in dessen Navy ueber ("dieses Segment musst du mehr
   verschmelzen") - erst unter der Box ("mach den weißen teil noch etwas
   größer"). Beide zusammen etwa so hoch wie vorher Highlights samt Karten
   ("so hoch wie auf der live seite"). Die Stufen gleichen den Verlauf an,
   sonst wirkt die Mitte grau-trueb. */
.highlights { background: #e6eaf1; padding-bottom: 0; }
.highlights .hl-band {
  /* Ohne Verlauf ins Navy (Felix, 30.10.2026: "mach noch weniger blau. mach
     den übergang zum weiß mal ganz weg") - das Band bleibt grau. */
  padding: 44px 0 44px;
  background: #e6eaf1;
}

/* Tafel: Text, Preis, "Jetzt entdecken", Blaettern. Ohne den hellblauen
   Lichtschein oben links (Felix, 30.10.2026: "immer noch zu viel blau ...
   mach weniger blaue akzente"). */
.highlights .hl-text {
  padding: 40px 44px 34px; border-radius: 18px; color: #fff;
  background: linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 100%);
  box-shadow: 0 26px 48px -30px rgba(11,27,58,.7);
}
.highlights .hl-eyebrow { color: var(--gold-hell); }
.highlights .hl-folie h3 { color: #fff; }
.highlights .hl-folie p { color: rgba(255,255,255,.78); }
.highlights .hl-folie .hl-folie-preis { color: var(--gold-hell); }
.highlights .hl-link {
  display: inline-flex; align-items: center; height: 46px; margin-top: 22px; padding: 0 22px; border-radius: 10px;
  color: var(--navy); background: var(--gold); text-decoration: none; transition: background-color .2s ease;
}
.highlights .hl-link:hover { color: var(--navy); background: var(--gold-hell); }
.highlights .hl-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.highlights .hl-text .hl-steuerung { margin-top: 30px; }
.highlights .hl-text .hl-segment::before { background: rgba(255,255,255,.25); }
.highlights .hl-text .hl-segment.an::before { background: var(--gold-hell); }
.highlights .hl-text .hl-weiter { color: #fff; }
.highlights .hl-text .hl-weiter:hover { background: rgba(255,255,255,.12); }
.highlights .hl-text .hl-weiter:focus-visible { outline-color: #fff; }

/* Box: freigestellt auf dem Band, Pfeile darauf Navy */
.highlights .hl-bilder { background: none; }
.highlights .hl-bild-folie img { filter: drop-shadow(0 18px 24px rgba(11,27,58,.22)); }
.hl-bild-nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%;
  cursor: pointer; color: #fff; background: var(--navy); box-shadow: 0 2px 10px rgba(11,27,58,.35);
  transition: opacity .2s ease, background-color .2s ease;
}
.hl-bild-nav.vor { left: 12px; }
.hl-bild-nav.nach { right: 12px; }
.hl-bild-nav:hover { background: var(--navy-2); }
.hl-bild-nav:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (hover: hover) {
  .hl-bild-nav { opacity: 0; }
  .hl-bilder:hover .hl-bild-nav, .hl-bild-nav:focus-visible { opacity: 1; }
}
.hl-weiter.hl-zurueck:hover svg { transform: translateX(-2px); }

/* SAMMLERSTUECKE: die 12 teuersten Karten als Reihe zum Blaettern, weisse
   Kaertchen auf dem grauen Band der Highlights - es laeuft einfach weiter.
   Erst dunkel, dann Navy als Band, dann (Felix, 30.10.2026: "noch weniger
   blau" ... "mach ganz weg") gar keine Navy-Flaeche mehr. Ueber der Reihe nur
   "Sammlerstuecke" und die Pfeile (Ueberschrift, Satz und Links: "das kann
   weg"). */
.sammler { position: relative; padding: 4px 0 56px; background: #e6eaf1; }
.sammler[hidden] { display: none; }
.sammler-inner { max-width: var(--page-width); margin: 0 auto; padding: 0 24px; }
.sammler-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sammler-titel {
  margin: 0; font-family: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.3; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-ink);
}
.sammler :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.reihe-pfeile { display: inline-flex; gap: 8px; }
.reihe-pfeil {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--navy); background: #fff; border: 1px solid var(--field-border);
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease, transform .15s ease;
}
.reihe-pfeil:hover:not(:disabled) { border-color: var(--gold); box-shadow: 0 6px 14px -8px rgba(11,27,58,.4); }
.reihe-pfeil:active:not(:disabled) { transform: scale(.94); }
.reihe-pfeil:disabled { opacity: .3; cursor: default; }

.sammler-reihe {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 20px) / 5); gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  /* Platz fuer Anheben und Schatten beim Zeigen - sonst schnitte die Reihe sie ab
     (auf dem hellen Grund unten saehe man die Kante). */
  margin: -16px 0 -48px; padding: 16px 0 48px;
}
.sammler-reihe::-webkit-scrollbar { display: none; }
.sammler-kachel {
  position: relative; display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start;
  border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(11,27,58,.08), 0 18px 36px -22px rgba(11,27,58,.55);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.sammler-bild {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer;
  border-radius: 16px 16px 0 0;
  background: radial-gradient(56% 52% at 50% 48%, rgba(226,196,95,.16), rgba(226,196,95,0) 74%);
}
.sammler-bild img {
  position: absolute; inset: 0; margin: auto; display: block; width: auto; height: auto;
  max-width: 72%; max-height: 82%; border-radius: 4.8% / 3.4%;
  box-shadow: 0 2px 6px rgba(11,27,58,.18), 0 18px 28px -14px rgba(11,27,58,.45);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.sammler-kachel.ist-slab .sammler-bild img { max-width: 62%; max-height: 86%; border-radius: 6% / 3.6%; }
.sammler-bild .slab-note { z-index: 2; top: 12px; left: 12px; color: var(--navy); background: var(--gold-hell); }
.sammler-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; padding: 12px 16px 16px; }
.sammler-set {
  margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sammler-name {
  margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--navy); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sammler-name:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.sammler-kauf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.sammler-preis { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.sammler .hl-korb { position: static; flex-shrink: 0; color: #fff; background: var(--navy); box-shadow: none; }
.sammler .hl-korb:hover { background: var(--navy-2); }
.sammler .hl-korb.drin { color: #fff; background: var(--ok); }
.sammler-kachel:hover {
  box-shadow: 0 0 0 2px var(--gold), 0 26px 44px -22px rgba(11,27,58,.6);
}
.sammler-kachel:hover .sammler-bild img { transform: scale(1.04); }

/* Kippen und Glanz (kippen.js): mit Maus neigt sich die Kachel zum Zeiger,
   ein Lichtfleck folgt ihm ueber das Bild. Ohne Maus oder bei "weniger
   Bewegung" nur das sanfte Anheben. */
.glanz {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--glanz-x, 50%) var(--glanz-y, 30%), rgba(255,255,255,.5), rgba(255,255,255,0) 46%);
  transition: opacity .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .sammler-kachel:hover .glanz { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sammler-kachel:hover { transform: perspective(1000px) translateY(-6px) rotateX(var(--kipp-x, 0deg)) rotateY(var(--kipp-y, 0deg)); }
  /* Solange der Zeiger darauf wandert, folgt die Neigung schneller. */
  .sammler-kachel.kippt { transition: transform .14s ease-out, box-shadow .35s ease; }
}

@media (max-width: 1279px) {
  .sammler-reihe { grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px; }
}
@media (max-width: 1023px) {
  .sammler-reihe { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; }
}
@media (max-width: 760px) {
  .highlights .hl-band { padding: 40px 0 36px; }
  .sammler { padding: 0 0 44px; }
  .sammler-reihe { grid-auto-columns: 46%; }
  .sammler-kopf .reihe-pfeile { display: none; }   /* am Handy wischt man */
}
@media (max-width: 640px) {
  .highlights .hl-text { padding: 28px 22px 24px; border-radius: 14px; }
  .sammler-inner { padding: 0 16px; }
  .sammler-reihe { grid-auto-columns: 64%; gap: 12px; margin: -16px -16px -48px; padding: 16px 16px 48px; scroll-padding: 0 16px; }
}

/* Freigestellte Herstellerfotos (Topps-Boxen) im Kartenfaecher: ganz zu
   sehen, ohne Kartenrahmen und Navy-Grund, mit eigenem Schatten. */
.gruppe-karte.freigestellt { overflow: visible; background: none; box-shadow: none; }
.gruppe-karte.freigestellt img { object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0,0,0,.5)); }

/* Markenwechsel ohne Farbuebergang (start.js setzt .sofort fuer einen
   Augenblick): sonst leuchtete die alte Markierung an der neuen Stelle nach. */
.kategorien.sofort .kat, .buehne-gruppen.sofort .gruppe-label { transition: none; }

@media (max-width: 640px) {
  /* Zustand und Sortierung teilen sich die Zeile zu gleichen Teilen. Vorher
     waren sie so breit wie ihr laengster Eintrag ("Light Played (1.234)") -
     bei 320 px liess sich die Seite dadurch 29 px waagerecht rollen (auch
     schon vor dem Umbau). */
  #startSortiment .auswahl { min-width: 0; }
  #startSortiment .auswahl select { flex: 1 1 0; min-width: 0; }
}