/* Marketplace page layer · Nocturne. Classes extracted from the design
   handoff prototype. Server-rendered (Laravel): tree/filter/sort are URL
   state; cart/wishlist/animations are the only client JS. */

body{margin:0;background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;}
.mp a{color:var(--color-accent-300);text-decoration:none;}
.mp a:hover{color:var(--color-accent-200);}
.mp-wrap{min-height:100vh;background:var(--color-bg);}

/* motion */
@keyframes noc-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes noc-ring{from{transform:scale(.75);opacity:.5}to{transform:scale(2.1);opacity:0}}
@keyframes noc-bump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes noc-pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.mp *{animation:none !important;transition:none !important}}

/* nav */
.mp-header{position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--color-bg) 86%, transparent);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  background-image:linear-gradient(to right,transparent,var(--color-divider) 48px,var(--color-divider) calc(100% - 48px),transparent);
  background-repeat:no-repeat;background-position:bottom;background-size:100% 1px;}
.mp-nav{display:flex;align-items:center;gap:var(--space-6);max-width:1280px;margin:0 auto;padding:var(--space-4) var(--space-8);}
.mp-brand{display:inline-flex;align-items:center;gap:10px;color:var(--color-text);margin-right:auto;font-family:var(--font-heading);}
/* Das Wortzeichen ist ein Logo, keine Ueberschrift · Nocturnes 500er-Regel
   gilt fuer Ueberschriften und liess die Marke hier duenner wirken als auf
   den hellen Seiten. */
.mp-brand span.name{font-size:17px;font-weight:700;letter-spacing:-0.3px;}
.mp-navlink{color:inherit;font-size:14px;}
.mp-navlink:hover{color:var(--color-accent);}
.mp-search{position:relative;display:flex;align-items:center;}
.mp-search svg{position:absolute;left:9px;opacity:.5;pointer-events:none;}
.mp-search .input{width:238px;padding-left:30px;}
.mp-cartbtn{position:relative;gap:8px;
  /* auf ein Mass mit der Geldboerse daneben (gleiches Polster, gleicher Radius) */
  height:34px;min-width:104px;padding:6px 12px;justify-content:center;
  border-radius:calc(var(--radius-md) * 0.75);}
/* Die Zahl haengt am Symbol, damit der Knopf beim Fuellen nicht breiter wird. */
.mp-cartbtn .mp-badge{position:absolute;top:-6px;right:-6px;}
.mp-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--color-accent);color:var(--color-neutral-900);font-size:11.5px;font-family:var(--font-heading);}
.mp-badge.bump{animation:noc-bump .38s cubic-bezier(.2,.8,.25,1);}

/* hero */
/* Dasselbe Polster wie die Kopfzeile · sonst ragt der Inhalt auf jeder
   Seite 32px darueber hinaus, und genau das sieht man sofort. */
.mp-main{max-width:1280px;margin:0 auto;padding:0 32px;}
.mp-hero{padding:var(--space-8) var(--space-8) 0;}
.mp-eyebrow{font-size:10px;letter-spacing:0.11em;text-transform:uppercase;color:var(--color-accent);}
.mp-hero h1{margin:var(--space-3) 0 0;font-size:clamp(32px,4.4vw,46px);max-width:15ch;}
.mp-hero p{margin:var(--space-4) 0 0;max-width:52ch;font-size:16px;}
.mp-stats{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-8);}
.mp-stat .n{font-size:25px;font-family:var(--font-heading);}
.mp-stat .n.free{color:var(--color-accent-300);}
.mp-stat .l{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 55%,transparent);}

/* just landed */
.mp-landed{margin-top:var(--space-8);padding:var(--space-8) 0;background:var(--color-section);
  background-image:radial-gradient(120% 140% at 12% 0%, var(--color-section-glow) 0%, transparent 60%);}
.mp-landed-inner{max-width:1280px;margin:0 auto;padding:0 32px;}
.mp-landed-head{display:flex;align-items:baseline;gap:var(--space-4);}
.mp-landed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-4);margin-top:var(--space-6);}
.mp-landed-card{display:flex;gap:var(--space-4);align-items:center;text-align:left;padding:var(--space-3);
  border-radius:var(--radius-md);border:1px solid color-mix(in srgb,var(--color-neutral-100) 14%,transparent);
  background:color-mix(in srgb,var(--color-bg) 42%,transparent);color:var(--color-text);cursor:pointer;
  transition:border-color .2s ease,background .2s ease,transform .2s cubic-bezier(.2,.8,.25,1);}
.mp-landed-card:hover{border-color:var(--color-accent-400);background:color-mix(in srgb,var(--color-bg) 62%,transparent);transform:translateY(-2px);}
.mp-landed-thumb{flex:none;width:52px;height:52px;border-radius:var(--radius-sm);overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(150deg,color-mix(in srgb,var(--color-accent) 22%,transparent),color-mix(in srgb,var(--color-bg) 80%,transparent));
  border:1px solid color-mix(in srgb,var(--color-neutral-100) 12%,transparent);color:color-mix(in srgb,var(--color-accent-200) 70%,transparent);}
.mp-landed-card .t{display:block;font-size:14px;font-family:var(--font-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mp-landed-card .p{display:block;font-size:11.5px;margin-top:2px;color:color-mix(in srgb,var(--color-text) 60%,transparent);}

/* shell: rail + content */
.mp-body{padding:var(--space-8) var(--space-8) 89.6px;}
.mp-shell{display:grid;grid-template-columns:236px minmax(0,1fr);gap:var(--space-8);align-items:start;}
.mp-rail{position:sticky;top:96px;}
.mp-rail-head{font-size:11px;letter-spacing:0.09em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 55%,transparent);padding:0 9px;}
.mp-tree{display:flex;flex-direction:column;gap:1px;margin-top:var(--space-4);}
.mp-tree-row{display:flex;align-items:center;gap:7px;width:100%;border:0;border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:13px;cursor:pointer;text-decoration:none;
  background:transparent;color:color-mix(in srgb,var(--color-text) 78%,transparent);
  transition:background .16s ease,color .16s ease;padding:6px 9px;}
.mp-tree-row:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent);}
.mp-tree-row.active{background:color-mix(in srgb,var(--color-accent) 16%,transparent);color:var(--color-accent-200);}
.mp-tree-row.onpath{color:var(--color-accent-300);}
.mp-tree-row .lbl{flex:1;text-align:left;}
.mp-tree-row .car{flex:none;opacity:.55;transition:transform .18s ease;}
.mp-tree-row.open .car{transform:rotate(90deg);}
.mp-tree-row .sp{width:11px;flex:none;}
.mp-tree-count{font-size:10.5px;padding:1px 5px;border-radius:4px;
  background:color-mix(in srgb,var(--color-text) 9%,transparent);color:color-mix(in srgb,var(--color-text) 60%,transparent);}
.mp-tree-row.active .mp-tree-count{background:color-mix(in srgb,var(--color-accent) 26%,transparent);color:var(--color-accent-100);}
.mp-catnote{margin:var(--space-6) 9px 0;font-size:11.5px;line-height:1.5;color:color-mix(in srgb,var(--color-text) 55%,transparent);}

/* content: crumbs + toolbar */
.mp-crumbs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;min-height:22px;}
.mp-crumb{padding:2px 0;border:0;background:none;cursor:pointer;font-family:var(--font-body);font-size:13px;text-decoration:none;color:color-mix(in srgb,var(--color-text) 58%,transparent);}
.mp-crumb.cur{color:var(--color-text);}
.mp-crumb-sep{opacity:.3;}
.mp-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);}
.mp-result{font-size:13px;color:color-mix(in srgb,var(--color-text) 62%,transparent);}
.mp-tools{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;}
.mp-freebtn{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:calc(var(--radius-md) * 0.75);
  font-size:12.5px;font-family:var(--font-heading);cursor:pointer;text-decoration:none;
  border:1px solid color-mix(in srgb,var(--color-neutral-100) 14%,transparent);background:transparent;color:color-mix(in srgb,var(--color-text) 78%,transparent);
  transition:border-color .18s ease,color .18s ease,background .18s ease;}
.mp-freebtn.on{border:1px solid var(--color-accent);background:color-mix(in srgb,var(--color-accent) 14%,transparent);color:var(--color-accent-200);}
.mp-seg{display:inline-flex;overflow:hidden;border:1px solid var(--color-divider);border-radius:var(--radius-md);}
.mp-seg a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:13px;color:var(--color-text);text-decoration:none;}
.mp-seg a + a{border-left:1px solid var(--color-divider);}
.mp-seg a.on{color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent);}
.mp-seg a:not(.on):hover{background:color-mix(in srgb,var(--color-text) 7%,transparent);}

/* product grid */
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:var(--space-6);margin-top:var(--space-8);align-items:start;}
.mp-card{display:flex;flex-direction:column;position:relative;border-radius:var(--radius-md);background:var(--color-surface);
  overflow:hidden;height:100%;box-shadow:var(--shadow-sm);
  transition:transform .22s cubic-bezier(.2,.8,.25,1),box-shadow .22s ease;
  /* DIE LUECKE IN DER LISTE (Skimi, 03.09.) · hier stand `both`.
     `both` haelt den Anfangszustand der Animation, und der ist `opacity:0`.
     Eine Karte war damit von sich aus UNSICHTBAR und wurde erst durch die
     fertig gelaufene Animation sichtbar. Lief sie nicht durch, belegte die
     Karte ihre Rasterzelle und war trotzdem nicht da · genau das Loch, das
     Skimi auf Notebook UND Desktop gesehen hat. "Manchmal laedt sie noch
     nach" ist woertlich die verspaetete Animation.

     `backwards` haelt den Anfangszustand nur waehrend der Verzoegerung.
     Danach · und wenn die Animation gar nicht erst laeuft · gilt der
     natuerliche Zustand, und der ist sichtbar.

     MERKSATZ: Inhalt darf nie davon abhaengen, dass eine Animation
     durchlaeuft. Eine Verzierung, die scheitert, soll haesslich sein und
     nicht unsichtbar. */
  animation:noc-rise .5s cubic-bezier(.2,.8,.25,1) backwards;}

/* Der Versatz kommt aus dem CSS, nicht aus dem Skript · siehe market.js.
   Zwoelf Stufen, dann bleibt es stehen: laenger wartet niemand gern, und
   eine Verzoegerung, die mit der Listenlaenge waechst, ist ein Loch, das mit
   der Liste waechst. */
.mp-grid .mp-card:nth-child(2){animation-delay:.035s}
.mp-grid .mp-card:nth-child(3){animation-delay:.070s}
.mp-grid .mp-card:nth-child(4){animation-delay:.105s}
.mp-grid .mp-card:nth-child(5){animation-delay:.140s}
.mp-grid .mp-card:nth-child(6){animation-delay:.175s}
.mp-grid .mp-card:nth-child(7){animation-delay:.210s}
.mp-grid .mp-card:nth-child(8){animation-delay:.245s}
.mp-grid .mp-card:nth-child(9){animation-delay:.280s}
.mp-grid .mp-card:nth-child(10){animation-delay:.315s}
.mp-grid .mp-card:nth-child(11){animation-delay:.350s}
.mp-grid .mp-card:nth-child(n+12){animation-delay:.385s}
.mp-card:hover{transform:translateY(-4px);
  box-shadow:0 0 0 1px var(--color-accent-500),0 14px 34px rgba(0,0,0,.6),0 0 26px color-mix(in srgb,var(--color-accent) 16%,transparent);}
.mp-card-img{display:block;position:relative;width:100%;aspect-ratio:4/3;border:0;padding:0;overflow:hidden;
  background:color-mix(in srgb,var(--color-bg) 60%,transparent);cursor:pointer;}
.mp-card-img .ph{position:absolute;inset:0;display:grid;place-items:center;transition:transform .55s cubic-bezier(.2,.8,.25,1);
  color:rgba(233,233,237,0.42);}
.mp-card:hover .mp-card-img .ph{transform:scale(1.055);}
.mp-card-tags{position:absolute;left:var(--space-3);top:var(--space-3);display:flex;gap:5px;z-index:2;}
.mp-tag-new{background:var(--color-accent-800);color:var(--color-accent-100);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;padding:3px 10px;border-radius:calc(var(--radius-md)*.75);}
.mp-tag-free{border:1px solid var(--color-accent);color:var(--color-accent);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;padding:3px 10px;border-radius:calc(var(--radius-md)*.75);background:color-mix(in srgb,var(--color-bg) 70%,transparent);}
/* (E) wie im Inventar · gruen wie die Rechte-Pillen ueberall, damit es als
   ZUSAGE gelesen wird und nicht als Warnung. Schmaler als die anderen Marken:
   es sind drei Zeichen, keine Ansage. */
.mp-tag-export{border:1px solid rgba(95,201,164,.5);color:#5fc9a4;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:10px;font-weight:600;letter-spacing:0.04em;padding:3px 7px;border-radius:calc(var(--radius-md)*.75);background:color-mix(in srgb,var(--color-bg) 70%,transparent);}
.mp-card-body{position:relative;padding:var(--space-4);display:flex;flex-direction:column;gap:5px;flex:1;}
.mp-wish{position:absolute;right:var(--space-3);top:calc(-1 * var(--space-6));width:32px;height:32px;display:grid;place-items:center;
  border-radius:50%;border:1px solid color-mix(in srgb,var(--color-neutral-100) 16%,transparent);
  background:color-mix(in srgb,var(--color-bg) 78%,transparent);cursor:pointer;z-index:3;
  color:color-mix(in srgb,var(--color-text) 55%,transparent);transition:border-color .18s ease,transform .18s cubic-bezier(.2,.8,.25,1);}
.mp-wish:hover{border-color:var(--color-accent-400);transform:scale(1.08);}
.mp-wish.on{color:var(--color-accent);}
.mp-kicker{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-accent);}
.mp-var{color:color-mix(in srgb,var(--color-text) 45%,transparent);}
.mp-var::before{content:'\00b7';margin:0 5px;color:color-mix(in srgb,var(--color-text) 30%,transparent);}
.mp-title{text-align:left;padding:0;border:0;background:none;color:var(--color-text);cursor:pointer;
  font-family:var(--font-heading);font-size:15.5px;line-height:1.2;text-decoration:none;transition:color .16s ease;}
.mp-title:hover{color:var(--color-accent-300);}
.mp-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:color-mix(in srgb,var(--color-text) 50%,transparent);margin-top:1px;}
.mp-perms{display:flex;gap:4px;margin-top:var(--space-2);}
.mp-perm{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-sm);
  font-size:10px;letter-spacing:0.06em;font-family:var(--font-heading);}
.mp-dl{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--radius-sm);
  font-size:10px;letter-spacing:0.06em;font-family:var(--font-heading);text-transform:uppercase;
  /* DERSELBE TON WIE EINE AKTIVE RECHTE-MARKE (.mp-perm.on).
     Grau war falsch, und zwar nicht nur blass: auf DERSELBEN Karte ist
     Grau die Farbe fuer "aus" (.mp-perm.off). Ein graues DOWNLOAD liest
     sich damit als "kein Download". Es ist aber eine Zusage, keine
     Absage · also Akzent, wie alles Zutreffende hier. */
  /* --color-accent-300 war zu blass · gemessen (210,206,253) gegen die
     (145,132,217) von Kicker und Add-Knopf. Bei zehn Pixel Schrifthoehe
     liest sich das als Grau, und Grau heisst auf dieser Karte "aus".
     Also derselbe satte Ton wie die anderen tragenden Stellen. */
  border:1px solid color-mix(in srgb,var(--color-accent) 60%,transparent);
  color:var(--color-accent);}
.mp-perm.on{border:1px solid color-mix(in srgb,var(--color-accent) 55%,transparent);color:var(--color-accent-300);}
.mp-perm.off{border:1px solid color-mix(in srgb,var(--color-neutral-100) 12%,transparent);color:color-mix(in srgb,var(--color-text) 32%,transparent);}
.mp-priceline{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-4);}
.mp-price{font-family:var(--font-heading);font-size:15px;}
.mp-price.free{color:var(--color-accent-300);}
.mp-add{position:relative;display:inline-flex;align-items:center;gap:6px;padding:var(--space-2) calc(var(--space-3)*1.2);
  border-radius:var(--radius-md);font-family:var(--font-heading);font-size:13px;cursor:pointer;background:transparent;overflow:visible;
  border:1px solid var(--color-accent);color:var(--color-accent);transition:background .18s ease,border-color .18s ease,color .18s ease;}
.mp-add.incart{border:1px solid color-mix(in srgb,var(--color-accent) 40%,transparent);color:var(--color-accent-300);background:color-mix(in srgb,var(--color-accent) 12%,transparent);}
.mp-add .lab, .btn .lab{display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1;}
.mp-add .ring{position:absolute;inset:-2px;border-radius:var(--radius-md);border:1.5px solid var(--color-accent);animation:noc-ring .6s ease-out forwards;pointer-events:none;}

/* box-unreachable: temporarily unavailable */
.mp-card.unavail .mp-card-img .ph,.mp-card.unavail .mp-kicker,.mp-card.unavail .mp-title,.mp-card.unavail .mp-meta,.mp-card.unavail .mp-perms{opacity:.5;}
.mp-tag-unavail{background:var(--color-neutral-800);color:var(--color-neutral-200);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;padding:3px 10px;border-radius:calc(var(--radius-md)*.75);}
.mp-add.disabled{border-color:color-mix(in srgb,var(--color-neutral-100) 16%,transparent);color:color-mix(in srgb,var(--color-text) 34%,transparent);cursor:not-allowed;}
.mp-unavail-note{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--color-neutral-300);
  background:color-mix(in srgb,var(--color-neutral-800) 55%,transparent);border:1px solid var(--color-divider);
  border-radius:var(--radius-md);padding:8px 12px;}

/* detail */
.mp-back{gap:7px;margin-left:calc(-1 * var(--space-1));}
.mp-detail{padding:var(--space-6) var(--space-8) 89.6px;}
.mp-detail-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:var(--space-8);margin-top:var(--space-6);align-items:start;}
.mp-hero-frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:color-mix(in srgb,var(--color-bg) 58%,transparent);}
.mp-hero-frame .slot{aspect-ratio:4/3;display:grid;place-items:center;color:rgba(233,233,237,0.5);}
.mp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-top:var(--space-3);}
.mp-thumb{padding:0;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;display:grid;place-items:center;
  background:color-mix(in srgb,var(--color-bg) 60%,transparent);color:rgba(233,233,237,0.4);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--color-neutral-100) 14%,transparent);border:0;transition:box-shadow .18s ease;}
.mp-thumb.on{box-shadow:0 0 0 1.5px var(--color-accent);}
.mp-buybox{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--space-4);}
.mp-permwide{display:inline-flex;align-items:center;padding:3px 9px;border-radius:calc(var(--radius-md)*.75);font-size:11px;letter-spacing:0.02em;}
.mp-permwide.on{background:var(--color-accent-800);color:var(--color-accent-100);}
.mp-permwide.off{border:1px solid color-mix(in srgb,var(--color-neutral-100) 12%,transparent);color:color-mix(in srgb,var(--color-text) 34%,transparent);text-decoration:line-through;}
.mp-initial{width:30px;height:30px;flex:none;border-radius:var(--radius-sm);background:linear-gradient(140deg,var(--color-accent-700),var(--color-accent-900));display:grid;place-items:center;font-size:12px;font-family:var(--font-heading);color:var(--color-accent-100);}
.mp-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);margin-top:var(--space-6);}


@media (max-width:760px){.mp-shell{grid-template-columns:1fr;}.mp-rail{position:static;}.mp-detail-grid{grid-template-columns:1fr;}.mp-buybox{position:static;}}

/* --- Rueckmeldung beim Ablegen -------------------------------------------
   Der Kauf ist der Moment, auf den alles zulaeuft · er darf sich anfuehlen.
   Drei kleine Dinge, keine Show: der Knopf gibt unter dem Finger nach, ein
   Punkt fliegt in den Korb, und der Korb nickt. */
.mp-add.mp-press, .btn.mp-press{transform:scale(.96);transition:transform .12s ease;}


.mp-cartbtn-got{animation:mp-got .46s cubic-bezier(.2,.8,.25,1);}
@keyframes mp-got{
  0%{transform:translateY(0)}
  30%{transform:translateY(-3px)}
  55%{transform:translateY(1px)}
  100%{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .mp-cartbtn-got,.mp-add.mp-press,.btn.mp-press{animation:none;transform:none}}

/* Die Geldboerse in der Kopfzeile ist seit dem SK$-Kontoauszug ein Link · sie
   muss also auf den Zeiger reagieren, sonst wirkt sie tot. Der Pfeil daneben
   kuendigt an, dass es in den hellen Konto-Bereich geht. */
.mp-wallet{transition:border-color .18s var(--ease,ease),background .18s var(--ease,ease);}
.mp-wallet:hover{
  border-color:color-mix(in srgb,var(--color-accent) 55%,transparent) !important;
  background:color-mix(in srgb,var(--color-accent) 16%,transparent) !important;
}
@media (prefers-reduced-motion:reduce){ .mp-wallet{transition:none;} }