/* Basis-Styles von lastsold.de — extrahiert aus base.html (Befund C4: 108 KB Inline-CSS auf JEDER Seite, unkachebar). Versioniert via ?v=. */ :root{ /* Warmes Dunkel statt Blaugrau (vorher #07070a/#0d0d12/#15151b — alle mit mehr Blau als Rot → wirkten „standard-blau"). Kanten leicht GOLD statt Weiß. */ --bg:#080706; --elev:#12100d; --card:#1a1713; --ink:#f4f1e8; --ink2:#8a8578; --ink3:rgba(255,255,255,.35); --gold:#d4af6a; --gold2:#f0cc7f; --silver:#c4c8cf; --success:#d4af6a; --warn:#ff5fb3; --stroke:1px solid rgba(226,188,116,.075); --stroke2:1px solid rgba(226,188,116,.13); --r:18px; --rp:999px; /* ── DIALKIT-REGLER: live tunebar per ?dial=1 (siehe /static/dialkit.js) ── Alles, woran wir sonst blind rumschrauben, hängt an diesen Vars. */ --gold-lite:226,188,116; /* helles Gold (RGB-Tripel, wie im Search-Beam) */ --gc-glass:.26; /* Glas-Deckkraft der Kästen */ --gc-blur:15px; /* Glas-Blur */ --gc-rim:.08; /* goldene Kante */ --gc-hi:.265; /* helle Glaskante oben (von dir getunt) */ --gc-inner:.82; /* Gold-Schein innen (von dir getunt) */ --gc-glow:.22; /* goldener Schatten aussen */ --gc-depth:.8; /* Tiefe (dunkler Schatten) */ --gc-radius:18px; /* Ecken-Radius */ --beam-strength:1; /* Beam-Intensität (liest beam.css) */ --ns-fill:1; /* Suchleisten-Füllung: Helligkeit */ --ns-glow:.20; /* Suchleisten-Fokus-Glow */ --ns-rim:.20; /* Suchleisten-Kante: Gold-Anteil (statt dickem Grau) */ --ns-ph:.26; /* Platzhalter im Ruhezustand: zurückgenommen, damit der Text in der Leiste sitzt statt darauf zu liegen */ --tb-drop:4px; /* Kachel-Beam: Schein nach unten auf die Kante schieben */ /* Ecken-Radius eines KARTENBILDS — proportional, nicht px! Eine echte Pokémon-Karte misst 63×88mm bei ~3mm Eckenradius → 4.8% der Breite / 3.4% der Höhe. So sieht die Ecke bei JEDER Größe richtig aus (Laufband-Thumb bis Kartenseite). Feste px waren der Fehler: was auf 300px passt, ist auf 40px eine Kugel. */ --card-r:4.8% / 3.4%; /* echter Pokémon-Karten-Radius (grosse Ansichten) */ --card-r-sm:3% / 2.1%; /* kleine Karten: weniger rund, sonst wirken sie unecht */ --serif:ui-rounded,"SF Pro Rounded","SF Pro Text",-apple-system,system-ui,sans-serif; --sans:-apple-system,"SF Pro Text",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; } *{box-sizing:border-box} /* Full-Bleed-Elemente (100vw) dürfen bei klassischer Scrollbar minimal überstehen → clip fängt das ab OHNE einen Scroll-Container zu erzeugen (sticky-Header bleibt heil). */ /* overflow-x auch auf body: der Such-Goo-Effekt ragt 68px (unsichtbar) über die Leiste hinaus und machte die Seite auf schmalen Handys 54px breiter als der Bildschirm — man konnte den ganzen Content seitlich verschieben. */ /* text-size-adjust:100%: iOS-Safari bläst sonst Text in scrollbaren Blöcken (z.B. eBay-Titel der Verkaufszeilen) heuristisch auf — manche Zeilen 10px, manche ~14px (VH: „unterschiedliche fontsizes, bitte die kleinere"). */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} html,body{overflow-x:clip} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans); font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;margin:0} .mono{font-family:var(--mono)} .label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em; text-transform:uppercase;color:var(--ink2)} .label-s{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:var(--ink2)} /* Section-Header (Opal-inspiriert): Glow-Icon-Chip + sentence-case-Titel statt Mono-CAPS+Emoji. Farbe je Sektion über --ac (eigener „Glow"). */ .sec{display:flex;align-items:center;gap:12px;margin:34px 0 16px} .sec-ic{flex:0 0 auto;width:33px;height:33px;border-radius:11px;display:grid;place-items:center;color:var(--ac,#d4af6a); background:color-mix(in srgb,var(--ac,#d4af6a) 15%,transparent); box-shadow:0 0 24px -7px var(--ac,#d4af6a),inset 0 0 0 1px color-mix(in srgb,var(--ac,#d4af6a) 34%,transparent)} .sec-ic svg{width:16px;height:16px;display:block} .sec-h{font-family:var(--sans);font-size:17.5px;font-weight:600;color:var(--ink);letter-spacing:-.012em;line-height:1.1} .sec-sub{font-family:var(--mono);font-size:10px;color:var(--ink3);letter-spacing:.1em;text-transform:uppercase;margin-top:4px} .sec-sub b{color:var(--ac,#d4af6a);font-weight:600} .sec-x{margin-left:auto;font-size:12px;color:var(--gold);text-decoration:none;white-space:nowrap} .sec--center{justify-content:center} .sec--live{--ac:#d4af6a}.sec--gold{--ac:#d4af6a}.sec--amber{--ac:#e8944a}.sec--blue{--ac:#6ea8fe}.sec--teal{--ac:#3fb6a8}.sec--violet{--ac:#a98bff} .gold{color:var(--gold)} .hero-num{font-family:var(--serif);font-style:italic;font-size:44px;font-weight:400; color:var(--gold);line-height:1;font-variant-numeric:tabular-nums} header{position:sticky;top:0;z-index:10;background:rgba(14,12,10,.85); backdrop-filter:blur(20px);border-bottom:var(--stroke); display:flex;align-items:center;flex-wrap:wrap;gap:24px;padding:14px 28px; transition:transform .28s ease;will-change:transform} @media (max-width:560px){ header{gap:12px;padding:12px 14px} header nav{gap:14px} header .brand{font-size:18px} header .brand-logo{height:27px} header .langs{gap:6px} main{padding:16px 14px} /* Genau 2 Spalten auf dem Handy — wie CardLab */ .setgrid{grid-template-columns:1fr 1fr;gap:10px} /* Karten-Grid: 2 Spalten Standard, per Spalten-Schalter (ls_mcols) 1–3 wählbar */ .card-grid{grid-template-columns:repeat(var(--mcols,2),minmax(0,1fr));gap:12px} .disc-title{font-size:27px} .disc-sub{font-size:13px} .disc-pill input{font-size:16px} /* ≥16px → iOS zoomt beim Fokus nicht rein */ /* Filter/Sort fingerfreundlicher + nicht überlaufen */ .ls-sel{min-width:0;width:100%;flex:1 1 100%;padding:11px 34px 11px 14px;font-size:12px} .ls-lang{flex:0 0 auto} /* Sprache kompakt neben RAW/graded (eine Zeile) */ .ls-langbtn{padding:9px 11px;font-size:12px;min-width:0} /* kompakt: nur Flagge + Pfeil, kein 210px-Minimum */ .ls-langbtn .lc-name{display:none} /* nur Flagge + Pfeil, kein Sprachname */ .ls-chip{padding:9px 12px;font-size:11px} .ls-chip.ls-rar{padding:8px 11px 8px 9px} .ls-chip.ls-rar .rar-lbl{font-size:11px} .ls-chip.ls-rar .rar-svg{height:12px} .browse-bar{gap:6px} .setcard .logo{height:96px} .setcard .snm{font-size:14px} } header .brand{font-family:var(--serif);font-size:22px;font-weight:600;white-space:nowrap;flex:0 0 auto; display:inline-flex;align-items:center;gap:9px;text-decoration:none} /* Das Bild ist doppelt so gross ausgeliefert (86x64) wie dargestellt — sonst wirkt ein 3D-Render auf scharfen Bildschirmen matschig. */ header .brand-logo{height:32px;width:auto;display:block;flex:0 0 auto} header nav{display:flex;gap:20px} header nav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink2)} header nav a:hover{color:var(--ink)} header .sp{margin-left:auto} header .langs{display:flex;gap:8px} header .langs a{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px; text-transform:uppercase;color:var(--ink3);padding:3px 7px;border-radius:var(--rp)} header .langs a .flag-ic{opacity:.5;transition:opacity .15s} header .langs a:hover .flag-ic,header .langs a.on .flag-ic{opacity:1} header .langs a.on{color:var(--gold);border:var(--stroke2)} /* eBay-artiger Header: Sets-Durchstöbern + Suchleiste (Kamera + Finden) */ .nav-sets{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13px;color:var(--ink); border:var(--stroke2);border-radius:var(--rp);padding:6px 15px 6px 11px;text-decoration:none;flex:0 0 auto;white-space:nowrap; transition:border-color .2s,box-shadow .2s,transform .2s} .nav-sets:hover{border-color:rgba(212,175,106,.55);box-shadow:0 4px 16px rgba(212,175,106,.14);transform:translateY(-1px)} .nav-sets .nschev{color:var(--ink3);flex:0 0 auto} /* Booster-Pack-Stapel als Icon: 2 dunkle Holo-Packs hinten gefächert + 1 Gold-Pack vorne. Beim Hover fächern sie auf und heben leicht ab — „zum Anklicken". */ .nspacks{display:inline-flex;flex:0 0 auto;line-height:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))} .nspacks .pk{transform-box:fill-box;transform-origin:50% 92%;transition:transform .32s cubic-bezier(.34,1.5,.5,1)} .nspacks .pk1{transform:rotate(-14deg)} .nspacks .pk2{transform:rotate(14deg)} .nav-sets:hover .pk1{transform:rotate(-24deg) translateY(-.5px)} .nav-sets:hover .pk2{transform:rotate(24deg) translateY(-.5px)} .nav-sets:hover .pk3{transform:translateY(-2.5px)} @media(prefers-reduced-motion:reduce){.nspacks .pk{transition:none}} .hdr-left{flex:1;display:flex;align-items:center;gap:16px;min-width:0} .hdr-right{flex:1;display:flex;align-items:center;justify-content:flex-end} .navbar-search{position:relative;flex:0 1 560px;height:54px;display:flex;align-items:center;background:transparent; border-radius:var(--rp);overflow:visible;transition:box-shadow .4s} .navbar-search:focus-within{box-shadow:0 0 24px rgba(var(--gold-lite),var(--ns-glow))} /* Border-Beam „line"-Variante (1:1 aus Jakub Antaliks border-beam, generateBeamCSS) liegt in /static/beam.css und wirkt auf .navbar-search[data-active] + [data-beam-bloom]. */ /* GOOEY-SEARCH — Kamera LINKS, Lupe RECHTS. Im Ruhezustand ist Lupe+Rand dezent GRAU; beim Fokus werden sie GOLD, während die Lupen-Blase nach RECHTS rausknospt. Zwei goo-Layer: Rand-Schicht (voll) + Dunkel-Schicht (2px eingerückt) → fließender Rand. Gold = animierbare background-color (Verlauf-Overlay bleibt für Sheen); Glow nur bei Fokus. */ .mb-goo{position:absolute;top:0;bottom:0;left:0;right:-68px;pointer-events:none} .mb-rim{z-index:0;filter:url(#nsx-goo) drop-shadow(0 0 0 rgba(212,175,106,0)) drop-shadow(0 0 0 rgba(212,175,106,0));transition:filter .4s} .navbar-search:focus-within .mb-rim{filter:url(#nsx-goo) drop-shadow(0 1px 5px rgba(212,175,106,.5)) drop-shadow(0 0 15px rgba(212,175,106,.32))} .mb-fill{z-index:1;filter:url(#nsx-goo) brightness(var(--ns-fill))} .mb-goo .bar{position:absolute;border-radius:var(--rp)} .mb-goo .bub{position:absolute;top:50%;border-radius:50%;transition:right .82s cubic-bezier(.32,1.5,.52,1)} /* Kante: KEIN dickes Grau mehr (#413a2e). Stattdessen eine gold-getönte dunkle Kante im Kästen-Look. Die Goo-Schichten müssen OPAK bleiben (der Metaball-Filter schwellt Alpha hart ab) → color-mix statt rgba: opake Farbe, aber per --ns-rim dosierbar. Weißer Sheen deutlich zurückgenommen. */ .mb-rim .bar,.mb-rim .bub{ background-color:color-mix(in srgb, rgb(var(--gold-lite)) calc(var(--ns-rim) * 100%), #100d09); background-image:linear-gradient(157deg,rgba(255,255,255,.08),rgba(255,255,255,0) 50%,rgba(0,0,0,.14)); transition:background-color .45s} .navbar-search:focus-within .mb-rim .bar,.navbar-search:focus-within .mb-rim .bub{background-color:#d3ab63} .mb-rim .bar{left:0;right:68px;top:0;bottom:0} .mb-rim .bub{right:72px;width:50px;height:50px;margin-top:-25px} /* Füllung 1px statt 2px eingerückt → die Kante wird halb so dick. Oben ein Gold-Schimmer (wie --gc-hi/--gc-inner bei den Kästen): translucenter Radial ÜBER dem opaken Verlauf → Schicht bleibt opak, Goo bleibt heil. */ .mb-fill .bar{left:1px;right:69px;top:1px;bottom:1px; background:radial-gradient(150% 190% at 50% -14%, rgba(var(--gold-lite),calc(var(--gc-inner) * .11)), transparent 62%), linear-gradient(180deg,#282218 0%,#17140f 42%,#0e0c0a 100%); transition:background .45s ease} .mb-fill .bub{right:73px;width:48px;height:48px;margin-top:-24px; background:radial-gradient(150% 190% at 50% -14%, rgba(var(--gold-lite),calc(var(--gc-inner) * .11)), transparent 62%), linear-gradient(180deg,#282218 0%,#17140f 42%,#0e0c0a 100%); transition:background .45s ease} /* Fokus: Füllung etwas dunkler (passend dazu, dass der Rand golden wird) */ .navbar-search:focus-within .mb-fill .bar, .navbar-search:focus-within .mb-fill .bub{background:linear-gradient(180deg,#18140f 0%,#0d0b09 42%,#080706 100%)} .navbar-search:focus-within .mb-rim .bub{right:2px} .navbar-search:focus-within .mb-fill .bub{right:4px} /* Kamera ist raus (die Foto-Suche war ohnehin nur ein „kommt bald"-Platzhalter). Die Lupe ist jetzt das Ruhe-Icon: dezent gold in der Bar; beim Fokus knospt sie in der goldenen Blase nach RECHTS AUS der Bar heraus — der Blob-Effekt (.82s). */ .mb-mag{position:absolute;right:9px;top:50%;transform:translateY(-50%);opacity:1;pointer-events:auto;z-index:3; width:34px;height:34px;display:flex;align-items:center;justify-content:center; color:rgba(var(--gold-lite),.55); background:none;border:none;padding:0;cursor:pointer; transition:right .82s cubic-bezier(.32,1.5,.52,1),opacity .35s ease,color .4s} .mb-mag:hover{color:rgb(var(--gold-lite))} .navbar-search:focus-within .mb-mag{right:-51px;color:#1a1408} /* in der Blase: dunkel auf Gold */ /* Ruhezustand: kleiner und zurückgenommen, damit der Text IN der Leiste sitzt statt darauf zu liegen. Beim Fokus wächst er auf die volle Größe — dieselbe Feder wie beim Ausknospen der Lupe, damit beides eine Bewegung ist. */ .ns-input{flex:1;min-width:0;height:100%;background:none;border:none;outline:none;color:var(--ink);position:relative;z-index:2; font-family:var(--sans);font-size:13.5px;letter-spacing:.1px;padding:0 54px 0 22px; transition:padding .82s cubic-bezier(.32,1.5,.52,1),font-size .34s cubic-bezier(.32,1.5,.52,1)} .navbar-search:focus-within .ns-input{font-size:15px} /* Platzhalter transparenter — er sitzt exakt mittig (gemessen: 0px Versatz), war nur zu satt und wirkte dadurch schwer/verrutscht. */ .ns-input::placeholder{color:rgba(244,241,232,var(--ns-ph));transition:color .34s ease} /* Beim Tippen darf der Platzhalter ruhig etwas präsenter sein — im Ruhezustand soll er hinter den Effekten zurücktreten, nicht auf ihnen liegen. */ .navbar-search:focus-within .ns-input::placeholder{color:rgba(244,241,232,.46)} .ns-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .navbar-search:focus-within .ns-input{padding-right:20px} /* Schmale Viewports: Blase nicht so weit rausknospen (Kollision mit Nachbar-Elementen). */ @media(max-width:940px){ .navbar-search:focus-within .mb-rim .bub{right:66px} .navbar-search:focus-within .mb-fill .bub{right:68px} .navbar-search:focus-within .mb-mag{right:16px} } @media(prefers-reduced-motion:reduce){.mb-rim,.mb-fill{filter:none}.mb-goo .bub,.mb-mag,.ns-input{transition:none}} /* Instant-Suche: Ergebnisse blubbern gooey aus der Bar (Codrops-Blob). Bis zu 5: 1 Set + 1 Pokémon + 3 beste Karten. ZWEI Layer: dunkle Blobs im #nsx-goo hinten (verschmelzen gooey), Inhalt scharf drüber. Beide knospen gestaffelt im Feder-Bounce rein — identische Höhe/Gap/Timing → sie bewegen sich deckungsgleich. */ .ns-sugg{position:absolute;top:calc(100% + 3px);left:0;right:0;z-index:40;pointer-events:none} .ns-sugg-goo{position:absolute;inset:0;z-index:0;filter:url(#nsx-goo-sugg);display:flex;flex-direction:column;gap:6px} .ns-sugg-blob{height:50px;flex:0 0 auto;border-radius:16px;background:#1b1710;transform-origin:top center; opacity:0;transform:translateY(-18px) scale(.5); transition:transform .52s cubic-bezier(.34,1.56,.5,1),opacity .34s ease;transition-delay:calc(var(--i,0) * .055s)} .ns-sugg-blob.in{opacity:1;transform:none} .ns-sugg-list{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;pointer-events:auto} .ns-sugg-item{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);height:50px;box-sizing:border-box; border-radius:16px;padding:0 14px;transform-origin:top center; opacity:0;transform:translateY(-18px) scale(.5); transition:transform .52s cubic-bezier(.34,1.56,.5,1),opacity .34s ease,background .15s; transition-delay:calc(var(--i,0) * .055s)} .ns-sugg-item.in{opacity:1;transform:none} .ns-sugg-item:hover{background:rgba(212,175,106,.09)} .ns-sugg-thumb{width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center; border-radius:9px;overflow:hidden;background:rgba(var(--gold-lite),.07);color:var(--gold)} .ns-sugg-thumb img{width:100%;height:100%;object-fit:contain} .ns-sugg-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .ns-sugg-nm{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.1px} .ns-sugg-sub{font:600 10.5px/1.2 var(--mono);color:var(--ink3);letter-spacing:.05em;text-transform:uppercase; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px} .ns-sugg-sub>span{overflow:hidden;text-overflow:ellipsis} /* Set-SYMBOL (das kleine Zeichen von der Karte) als Erkennungsmarke — wie im Kartenkopf. */ .ns-sugg-ssym{height:13px;max-width:20px;object-fit:contain;object-position:left;flex:0 0 auto;opacity:.85} .ns-sugg-price{font-size:14px;font-weight:700;color:var(--gold);flex:0 0 auto;white-space:nowrap} .ns-sugg-kind{font:700 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2); border:1px solid rgba(212,175,106,.4);border-radius:6px;padding:4px 6px;flex:0 0 auto} @media(prefers-reduced-motion:reduce){.ns-sugg-item,.ns-sugg-blob{transition:opacity .2s}} .lang-dd{position:relative;flex:0 0 auto} .lang-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:var(--stroke2);border-radius:var(--rp);padding:7px 11px;color:var(--ink2);font-family:var(--mono);font-size:11px;text-transform:uppercase;cursor:pointer} .lang-btn:hover{border-color:rgba(212,175,106,.5);color:var(--ink)} .lang-btn .flag-ic{opacity:.85}.lang-btn .chev{color:var(--ink3);transition:transform .15s} .lang-dd.open .lang-btn{border-color:rgba(212,175,106,.55);color:var(--ink)}.lang-dd.open .lang-btn .chev{transform:rotate(180deg)} .lang-menu{position:absolute;left:0;right:0;top:calc(100% + 7px);background:var(--card);border:var(--stroke2);border-radius:14px;padding:5px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s;z-index:30;box-shadow:0 12px 34px rgba(0,0,0,.45)} .lang-dd.open .lang-menu{opacity:1;visibility:visible;transform:none} .lang-menu a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;color:var(--ink2);text-decoration:none;font-family:var(--mono);font-size:11px;text-transform:uppercase} .lang-menu a:hover{background:rgba(255,255,255,.05);color:var(--ink)}.lang-menu a.on{color:var(--gold)} .lang-menu a .flag-ic{opacity:.7}.lang-menu a.on .flag-ic{opacity:1} .ls-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--card);border:1px solid var(--gold); color:var(--ink);border-radius:var(--rp);padding:11px 18px;font-family:var(--sans);font-size:13px;z-index:200; box-shadow:0 10px 40px rgba(0,0,0,.5);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none} .ls-toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)} @media(max-width:720px){ header{gap:10px;padding:9px 13px;flex-wrap:nowrap} /* alles in EINER Zeile: Bildmarke · Suche · Sprache */ .nav-sets{display:none} /* Kategorie-/Sets-Browse mobil raus (Schritt 2) */ .hdr-left{flex:0 0 auto;gap:0} /* nur die Bildmarke — nicht wachsen, sonst drückt es die Suche weg */ /* Schmal: nur die Bildmarke, der Schriftzug entfaellt. */ header .brand-wort{display:none} header .brand-logo{height:30px} .navbar-search{flex:1 1 auto;min-width:0} /* Suche füllt die Mitte */ /* 16px ist Pflicht: darunter zoomt iOS Safari beim Antippen automatisch in die Suche rein. Genau 16 verhindert das, ohne maximum-scale (das killt Pinch-Zoom). */ .ns-input{height:36px;font-size:16px} header.nav-up{transform:translateY(-100%)} /* runter scrollen → Nav slidet hoch raus */ .hdr-right{flex:0 0 auto} .lang-btn{padding:7px 9px} /* Sprache: Flagge + Kürzel (DE) SICHTBAR + kompakt */ .lang-btn span{display:inline} } /* ── EINE NAV — ÜBERALL DIE GLEICHE ───────────────────────────────────────── Die Nav besteht NUR aus der Suchleiste (kein Logo, kein Sets-Link, kein Sprachumschalter — die leben jetzt im Footer). Zwei Zustände: • nicht gedockt (nur Startseite ganz oben): transparent, große Suche unter dem Titel — Laufband/Index/Titel stehen als Inhalt darüber (above_nav). • gedockt (überall sonst sofort, auf der Home beim Hochscrollen): schlanke Bar oben, Suche schrumpft rein, danach Auto-Hide beim Runterscrollen. Es animiert bewusst NUR die Suche. */ body.home{padding-top:16px} /* Luft über dem Laufband (nur Home, scrollt weg) */ /* Im Kopf steht NUR die Suche — keine Marke, keine Wege, keine rechte Seite. */ .hdr-right,.hdr-left{display:none} /* Startseiten-Kopf (VH): Logo + Sets/Pokémon/Artists — nur Desktop, nur ganz oben. Absolut links im sticky Header, damit die Suche zentriert bleibt; beim ersten Scrollen (body.hgescrollt) sofort weg — die Suche bleibt. */ .hh-nav{display:none} @media (min-width:900px){ body.home .hh-nav{display:flex;align-items:center;gap:8px;position:absolute;left:28px;top:50%; transform:translateY(-50%);z-index:5;transition:opacity .15s ease} body.home.hgescrollt .hh-nav{opacity:0;pointer-events:none} } .hh-logo{display:flex;align-items:center;margin-right:4px} .hh-logo img{height:28px;width:auto;display:block} /* Kartenseite: der Kopf liegt UEBER dem Inhalt statt im Fluss, dadurch ruecken Karte und Blaettern-Leiste nach oben. Er startet ausgefahren und kommt beim Hochscrollen herein — das uebernimmt die bestehende nav-up-Steuerung. */ body.kopf-frei header{position:fixed;left:0;right:0;top:0} body.kopf-frei header.nav-up{transform:translateY(-100%)} /* GANZ OBEN gilt die alte Anordnung: Suche sichtbar UEBER der Blaettern-Leiste. Der Kopf bleibt zwar fixiert, aber der Inhalt macht ihm per padding Platz — ohne das schob sich die Suche beim Hochscrollen mitten AUF die Leiste. Beim Runterscrollen faellt das Polster weg und der Inhalt rueckt wieder nach oben. */ /* Ohne Suche darueber klebte die Blaettern-Leiste an der Oberkante — etwas Luft (VH). */ body.kopf-frei main{transition:padding-top .28s ease;padding-top:44px} body.kopf-frei.ganz-oben main{padding-top:100px} @media (max-width:560px){ body.kopf-frei main{padding-top:30px} body.kopf-frei.ganz-oben main{padding-top:86px} } /* Der Blur gehoert dem SCHLEIER, nicht der Suche (VH): er liegt immer oben, sobald gescrollt ist — die Suche faehrt darueber ein und aus, ohne ihn mitzunehmen. Vorher trug der Kopf den Blur selbst; fuhr er raus, war der Blur weg, fuhr er rein, stand ein harter dunkler Balken ueber dem Inhalt. */ /* Der Schleier ist ein REINER Farbverlauf — oben satt, nach unten transparent, nichts dahinter verschwommen (VH: "kein Blur, nur der alte Verlauf"). */ body.kopf-frei::before{content:"";position:fixed;top:0;left:0;right:0;height:78px; z-index:9;pointer-events:none; background:linear-gradient(to bottom,rgba(14,12,10,.92),rgba(14,12,10,0)); opacity:0;transition:opacity .3s ease} @media (max-width:560px){body.kopf-frei::before{height:70px}} body.kopf-frei.geblurt::before{opacity:1} /* Die Suche selbst malt auf der Kartenseite KEINEN Hintergrund mehr — genau diese Doppelung (eigener Verlauf + eigene Maske UEBER dem Schleier) war der hässliche Balken. */ body.docked.kopf-frei header{background:none;border-bottom:0; -webkit-backdrop-filter:none;backdrop-filter:none; -webkit-mask-image:none;mask-image:none} /* SCHWEBENDE NAVIGATION (VH): ersetzt das frühere Dock. Im Kopf steht nur die Suche; die Wege schweben unten ueber dem Inhalt und tauchen erst auf, wenn der Kopfbereich durchgescrollt ist — ueber der Schlagzeile soll nichts liegen. */ /* max() statt Addition (VH): 20px Rand PLUS die volle Safe-Area stapelten sich auf dem iPhone zu ~54px — die Leiste hing sichtbar in der Luft, mit Karten darunter. max() nimmt nur den groesseren der beiden Werte: am iPhone genau die Hoehe der Home-Zone (buendig ueber Safaris Pille), ueberall sonst die normalen 20px. */ .ls-dock{position:fixed;left:50%;bottom:max(20px, env(safe-area-inset-bottom, 0px));transform:translateX(-50%) translateY(10px);z-index:60; display:flex;align-items:center;gap:6px;padding:7px;border-radius:22px;max-width:calc(100vw - 20px); background:rgba(12,12,16,.8);border:1px solid rgba(255,255,255,.10); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); /* KEIN Aussenschatten mehr (VH): der dunkle Schein hinter der Leiste wirkte wie ein Schleier — nur die feine Innenkante bleibt. */ box-shadow:inset 0 1px 0 rgba(255,255,255,.06); opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease} .ls-dock.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)} /* Auch .hn-p/.hn-cta einzeln: die Pillen stehen inzwischen auch im Footer, wo Mono/Uppercase/kein Flex vererbt wird — ohne diese Regel hingen sie dort als zerrissene Kästen mit Text am oberen Rand. */ .ls-dock a,.hn-p,.hn-cta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none; white-space:nowrap;transition:background .15s,border-color .15s,color .15s; text-transform:none;font-family:var(--sans);letter-spacing:.01em} /* Wie im Vorbild: die beiden AUSSEREN Elemente fuellen die Leiste fast ganz aus, die Woerter dazwischen sitzen etwas eingerueckt. Jeder Radius ist rund 13 % der eigenen Hoehe, dadurch wirken die Rundungen ineinander gestaffelt statt gleich. */ .hn-mark{width:52px;height:44px;border-radius:15px;background:rgba(0,0,0,.45);flex:0 0 auto; margin-right:3px} .hn-mark img{height:27px;width:auto;display:block} .hn-mark:hover{background:rgba(0,0,0,.65)} .hn-p{height:38px;padding:0 18px;border-radius:12px;border:1px solid rgba(255,255,255,.11); color:var(--ink2);font:500 13.5px/1 var(--sans)} .hn-p:hover{color:var(--ink);border-color:rgba(226,188,116,.5);background:rgba(212,175,106,.09)} .hn-cta{height:44px;padding:0 20px;border-radius:15px;background:var(--ink);color:#14110b; font:650 13.5px/1 var(--sans);margin-left:3px} .hn-cta:hover{background:rgb(var(--gold-lite))} @media (max-width:820px){ .ls-dock{gap:5px;padding:6px;border-radius:19px;bottom:max(12px, env(safe-area-inset-bottom, 0px))} .hn-mark{width:44px;height:38px;border-radius:13px;margin-right:2px} .hn-mark img{height:23px} .hn-p{height:33px;padding:0 13px;font-size:12.5px;border-radius:11px} .hn-cta{height:38px;padding:0 15px;font-size:12.5px;border-radius:13px;margin-left:2px} } /* Der CTA weicht nur in der ENGEN Dock-Leiste — im Footer ist Platz. */ @media (max-width:620px){.hn-p{padding:0 11px;font-size:12px}.ls-dock .hn-cta{display:none}} /* Nicht gedockt: transparenter Verlauf (blendet beim Andocken sauber über, statt hart aufzupoppen). Keine untere Kante. */ header{background:linear-gradient(to bottom,rgba(14,12,10,0),rgba(14,12,10,0)); border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:8px 28px 16px; transition:transform .28s ease,background .4s ease,padding .4s ease} /* Suche = fixe Breite (flex:0 0 auto → Größe rein aus width), mittig via auto-Margin. Nur width/height animieren → beide Richtungen gleich weich, kein Flex-Sprung. */ .navbar-search{flex:0 0 auto;width:680px;max-width:100%;height:60px;margin:0 auto; transition:width .34s cubic-bezier(.4,0,.2,1),height .34s cubic-bezier(.4,0,.2,1)} /* Angedockt: Suche schrumpft flüssig rein, Verlauf oben→unten transparent, keine Kante. */ /* NUR der Farbverlauf — oben satt, nach unten transparent. KEIN Weichzeichner: der liess Kartenraender unter dem Kopf verschwimmen und wirkte schmutzig (VH). */ body.docked header{background:linear-gradient(to bottom,rgba(14,12,10,.92),rgba(14,12,10,0)); border-bottom:0;padding:12px 28px; -webkit-backdrop-filter:none;backdrop-filter:none; -webkit-mask-image:none;mask-image:none; transition:transform .28s ease,background .7s ease,padding .7s cubic-bezier(.22,1,.36,1)} body.docked .navbar-search{width:560px;height:54px; transition:width .7s cubic-bezier(.22,1,.36,1),height .7s cubic-bezier(.22,1,.36,1)} body.docked header.nav-up{transform:translateY(-100%)} /* Auto-Hide nur wenn gedockt */ @media (max-width:560px){ header{padding:6px 14px 12px} .navbar-search{height:52px} body.docked header{padding:9px 13px} } /* Karten-Bild: kein iOS/Android Long-Press "Bild teilen/speichern"-Popup */ .holo-card img,#ls-card-img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none} main{max-width:1280px;margin:0 auto;padding:28px} .card-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px} @media (max-width:1200px){.card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:860px){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .tile{position:relative;background:var(--elev);border:var(--stroke);border-radius:var(--r); overflow:visible;transition:border-color .12s} .tile:hover{border-color:rgba(226,188,116,.30);z-index:5} /* Kacheln SIND klickbar → Hover bleibt */ .tile img{width:100%;height:auto;display:block;background:var(--card)} .tile .meta{padding:10px 12px} .tile .nm{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.15} /* Gold-Star im Kartennamen — Platzhalter-Glyph in Gold, bis das echte Symbol als Bild vorliegt. */ .ls-gstar{color:#e6c07a;font-style:normal;font-weight:400} /* Untere Meta-Zeile: Wert + Rarität links, Mini-Verlauf rechtsbündig als Gegenpol über BEIDE Zeilen. */ .tile .meta-btm{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px} /* flex:1 → nimmt den freien Platz der Zeile. Ohne das blieb die Spalte auf der Breite des PREISES stehen (62px), und die Meta-Zeile darunter wurde abgeschnitten ("#46 · …"), obwohl daneben 100px frei waren. */ .tile .meta-txt{min-width:0;flex:1 1 auto} .tile .pr{font-family:var(--mono);font-size:13px;color:var(--gold)} /* ── Set-Kachel (.tile--set): dieselbe Basis wie die Karten-Kachel — gleicher Rahmen, gleicher Hover, gleicher Beam, gleicher „Boden" (.meta). Statt des Karten-Scans steht oben das Set-Logo, und das kippt NICHT (kein .tile-card, also greift die Tilt-Delegation gar nicht erst). Ersetzt die früheren vier Eigenbauten .setcard / .setcard-cl / .set-flat / .relset. */ .tile--set{overflow:hidden} /* Das Logo sitzt in einem EIGENEN Feld — genau wie der Karten-Scan in .tile-card: eigene Fläche, eigener Innenrand, klare Kante zur Meta-Zeile darunter. */ /* Proportional statt fester Höhe: das Logo-Feld soll die Kachel dominieren — wie der Karten-Scan bei den Karten-Kacheln — und mit der Spaltenbreite mitwachsen. */ .tile--set .tile-logo{position:relative;aspect-ratio:1.32;min-height:96px;display:flex;align-items:center; justify-content:center;padding:16px;background:var(--card); /* Oben die Kachel-Rundung (--r), NICHT den Karten-Radius: --card-r ist eine elliptische Prozentangabe für Karten-Scans und ergibt hier 0. */ border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;border-bottom:var(--stroke); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.10)} /* Deckel auf 52 % der Logo-Flaeche (VH): quadratische Logos wie McDonald's oder die Promo-Reihe fuellten die Kachel bis an den Rand aus, waehrend breite wie „Black Bolt" von selbst flach bleiben — nebeneinander wirkte das unruhig. Breite Logos beschneidet der Deckel nicht, sie sind ohnehin niedriger. */ .tile--set .tile-logo img{width:auto;max-width:100%;max-height:52%;object-fit:contain; background:transparent;filter:drop-shadow(0 3px 9px rgba(0,0,0,.55))} .tile--set .tile-logo-ph{width:34px;height:34px;fill:none;stroke:var(--ink3);stroke-width:1.5;opacity:.45} .tile--set .nm{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tile--set .set-ed{font-style:normal;font-size:12px;color:var(--gold)} /* Kartenzahl links, Datum rechts daneben — statt untereinander. */ .tile--set .meta-txt{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .tile--set .pr{font-size:11px;letter-spacing:.02em} .tile--set .st{flex:0 0 auto} @media (max-width:560px){.tile--set .tile-logo{min-height:74px;padding:13px 11px} .tile--set .nm{font-size:15px}.tile--set .pr{font-size:10px} /* Am Handy ein strengerer Deckel (VH): 52 % ergaben bei quadratischen Logos (Promo, 151, McDonald's) 40 % Kachelhoehe, bei breiten nur 12 % — auf der kleinen Kachel wirkt dieser Unterschied viel staerker als am Desktop. */ .tile--set .tile-logo img{max-height:32%}} /* Stapel-Kachel: existiert eine Reverse-Holo-Variante, lugt hinter dem Scan eine schimmernde Kopie hervor (Material = Information, keine zweite Kachel). Der zweite Preis darunter gehört zur Variante; die Folien-Marke ersetzt Text. */ .tile-stack{position:absolute;top:0;left:0;right:0;aspect-ratio:.716;z-index:0;pointer-events:none; transform:rotate(3deg) translate(7px,-4px);transform-origin:bottom left; border-radius:var(--card-r);overflow:hidden;filter:saturate(.85) brightness(.85); transition:transform .38s cubic-bezier(.22,.9,.3,1.15),filter .38s} /* Hover: der Stapel fächert auf — die Reverse-Kopie gleitet hinter der Karte hervor, die Basis kippt leicht dagegen (zwei Karten in der Hand). Der :has-Zweig hängt die Fächer-Drehung an den bestehenden 3D-Tilt an, statt ihn zu ersetzen. */ .tile:hover .tile-stack{transform:rotate(10deg) translate(46%,-2px);filter:saturate(1) brightness(.98)} @supports selector(:has(*)){ .tile:has(.tile-stack):hover .tile-card{transform:perspective(640px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1)) rotate(-3.5deg) translateX(-6%)} } .tile-stack img{width:100%;height:100%;object-fit:cover;display:block} .ts-foil{position:absolute;inset:0;mix-blend-mode:screen;background: linear-gradient(115deg,rgba(255,110,220,.30),rgba(96,200,255,.32) 35%,rgba(140,255,175,.26) 65%,rgba(255,215,120,.30)), linear-gradient(180deg,rgba(255,255,255,.10),transparent 55%)} .tile .tile-card{z-index:1} .pr-rev{display:inline-flex;align-items:center;gap:4px;margin-left:9px;color:var(--ink2);cursor:pointer;font-weight:600} .pr-rev:hover{color:var(--ink)} .pr-foil{width:9px;height:9px;border-radius:2.5px;flex:none; background:linear-gradient(135deg,#f79ad9,#79c9f2 40%,#98e7ab 70%,#f2d089); box-shadow:inset 0 0 1px rgba(0,0,0,.45)} /* „Wertvollste Karten"-Grid: goldene Premium-Kacheln (die teuersten PSA-10-Karten). */ /* Die Karte sitzt EINGELASSEN in einem gebürsteten Antik-Gold-Rahmen (gerahmtes Sammlerstück, kein knallgelber Kasten): schmaler Goldrand rundum + Versenk-Schatten, weiße Schrift, beim Hover ein Schimmer-Wisch. Warmes, mattes Gold statt Neon. */ .card-grid--gold .tile{position:relative;overflow:hidden;border:1px solid rgba(92,68,28,.75); background:linear-gradient(155deg,#cda45a 0%,#a67e3a 48%,#7c5c2b 100%); box-shadow:0 16px 40px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,244,208,.4),inset 0 -1px 0 rgba(0,0,0,.32)} .card-grid--gold .tile .tile-card{margin:9px 9px 0;border-radius:9px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 2px 9px rgba(0,0,0,.45),0 0 0 3px rgba(0,0,0,.16)} .card-grid--gold .tile .meta{padding:9px 13px 11px} .card-grid--gold .tile .nm{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.42)} .card-grid--gold .tile .pr{font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)} .card-grid--gold .tile .st{color:rgba(255,255,255,.75)} /* Das Raster-Set-Zeichen (weißes Glyph auf dunklem Quadrat) hat einen schwarzen Kasten, der sich auf Gold nicht sauber freistellen lässt (screen → heller Kasten, Münze → gecropptes Foto). Auf den Premium-Kacheln daher weglassen; die Zeile bleibt sauber „#Nr · HR" in Weiß. */ .card-grid--gold .tile .st-sym{display:none} /* Schimmer: liegt bereit (unsichtbar), wischt beim Hover einmal diagonal über das Gold. WICHTIG: Es wandert nur das LICHT (background-position auf einer 280 % breiten Fläche), NICHT die Ebene selbst. Vorher wurde das Pseudo-Element per translateX verschoben — bei 115°-Diagonale schnitt dessen eigene senkrechte Kante den Glanz sichtbar ab (VH 24.07.). Das Element deckt jetzt immer exakt die Kachel. */ .card-grid--gold .tile::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none; background:linear-gradient(115deg,transparent 38%,rgba(255,248,222,.42) 50%,transparent 62%); background-size:280% 100%;background-repeat:no-repeat;background-position:100% 0;opacity:0} .card-grid--gold .tile:hover::before{opacity:1;animation:lsgoldsheen 1.05s ease-out} @keyframes lsgoldsheen{from{background-position:100% 0}to{background-position:0% 0}} /* ── EINE Hover-Geste fuer ALLE Kaesten (VH zeigte auf die Karten-Kachel) ── Es ist DERSELBE pulsierende Gold-Beam wie an .tile — kein Hochschieben. Das Element braucht die Klasse .ls-glow UND ein
als Kind (genau wie eine Kachel); aktiviert wird per data-active beim Hover (JS unten, per Delegation — greift auch fuer nachgeladene Elemente wie die Angebote). Ab jetzt der Standard, nicht mehr pro Komponente handgemacht. */ .ls-glow{position:relative} .ls-glow .nsx-beamclip{inset:0;--beam-r:14px;z-index:6} .ks-tile.ls-glow .nsx-beamclip{--beam-r:18px} .ls-glow:hover{border-color:rgba(226,188,116,.45)} .card-grid--gold .tile:hover{border-color:rgba(140,104,44,.9); background:linear-gradient(155deg,#dcb267 0%,#b28843 48%,#87642f 100%); box-shadow:0 24px 52px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,248,220,.5),inset 0 -1px 0 rgba(0,0,0,.35)} /* Mini-Verlauf: geprägter Graph, Gold hoch / Silber runter, keine Zahlen */ .tile .spark{flex:0 0 auto;display:block;height:34px;width:auto; filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 0 2px rgba(0,0,0,.25))} .tile .spark.spk-up{filter:drop-shadow(0 1px 0 rgba(0,0,0,.5)) drop-shadow(0 0 3px rgba(212,175,106,.4))} .tile .st{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--ink3); text-transform:uppercase;margin-top:2px; /* Einzeilig: seit das Set-Zeichen davorsteht, ist die Zeile enger und die Seltenheit rutschte in eine zweite Zeile ("#46 ·" / "C"). */ white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Karten-Halter im Grid mit echtem 3D-Tilt (wie Einzelseite, Maus-getrieben pro Karte — kein Gyro, der würde alle Kacheln gleichzeitig kippen). Glanz + Folie folgen dem Cursor; Holo schimmert Regenbogen (Material = Info: Holo erkennt man am Schimmer, nicht am Text-Label), Non-Holo nur weißer Specular. */ /* Radius = echte Kartenecke (~5% der Breite, gemessen am Scan) auf allen 4 Ecken, skaliert mit der Kachel — so enden Holo/Glanz exakt an der Kartenkante. */ .tile-card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--card-r); transform:perspective(640px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1)); transition:transform .4s cubic-bezier(.23,1,.32,1),box-shadow .3s;will-change:transform; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.4)} .tile-card.is-active{transition:transform .08s ease-out; box-shadow:inset 0 0 0 1px rgba(212,175,106,.35),inset 0 1px 0 rgba(255,255,255,.14),0 16px 34px rgba(0,0,0,.55)} .tile-card img{display:block;border-radius:inherit} /* Platzhalter für Karten, deren Bild noch keine Quelle veröffentlicht hat */ .tile-card.tile-noimg{display:flex;align-items:center;justify-content:center;aspect-ratio:.716;transform:none; background:radial-gradient(120% 90% at 50% 32%,rgba(255,255,255,.05),rgba(0,0,0,.28)),var(--card)} .tile-noimg .noimg-mark{width:42%;max-width:92px;height:auto;color:var(--ink3);opacity:.45} /* Edition-1-Stempel (nur Set-Kacheln — auf Karten-Scans ist er im Bild gedruckt) */ .ed1-stamp{position:absolute;z-index:3;pointer-events:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))} .setcard .logo{position:relative} .ed1-stamp-set{right:9px;bottom:9px;width:40px} .ed1-stamp-setcard{right:12px;top:10px;width:40px} /* „Nur auf Englisch": Corner-Ribbon (3D-Band um die obere linke Ecke) auf Set-Kacheln + ausgeschriebene Pille auf Karten-/Set-Kopf. */ /* „English only"-Eckband. Enden werden vom overflow:hidden des Logo-Containers geclippt = sie verschwinden hinter der Karte (kein sichtbares „hinteres Eck"). Keine Fold-Dreiecke mehr — die standen vor statt hinter der Kante. */ .en-ribbon{position:absolute;top:0;left:0;width:112px;height:112px;overflow:hidden;z-index:4;pointer-events:none} .en-ribbon b{position:absolute;top:26px;left:-40px;width:168px;transform:rotate(-45deg);text-align:center; font:800 8px/1.05 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:#2c1f08;padding:5px 0; background:linear-gradient(180deg,#fbe6a3 0%,#e7c477 48%,#c69c52 100%); box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 3px rgba(120,80,20,.4); text-shadow:0 1px 0 rgba(255,255,255,.4)} .en-only-lg{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--sans); padding:5px 11px;border-radius:999px;color:var(--ink);background:rgba(212,175,106,.12); border:1px solid rgba(212,175,106,.35)} .tile-card .tc-foil,.tile-card .tc-gloss{position:absolute;inset:0;pointer-events:none;border-radius:inherit} /* Regenbogen-Folie — nur Holo, und NUR beim Kippen/Hover (Ruhezustand = echte Kartenfarben, sonst wäscht die Folie Full-Art-Rainbows aus). Position folgt Cursor. */ .tile-card .tc-foil{opacity:0;background:linear-gradient(115deg, rgba(255,0,140,.55) 8%,rgba(255,180,0,.5) 24%,rgba(50,255,180,.5) 42%, rgba(60,140,255,.5) 60%,rgba(200,60,255,.5) 78%,rgba(255,0,140,.55) 92%); background-size:230% 230%;background-position:var(--mx,50%) var(--my,50%); mix-blend-mode:color-dodge;filter:saturate(1.4) contrast(1.08);transition:opacity .3s} .tile-card.is-holo.is-active .tc-foil{opacity:.45} /* Wandernder Specular-Glanz — alle Karten, folgt dem Cursor beim Kippen (dezent) */ .tile-card .tc-gloss{background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.32),rgba(255,255,255,.07) 22%,transparent 52%); opacity:calc(var(--o,0)*.5);mix-blend-mode:screen;transition:opacity .3s} @media (prefers-reduced-motion:reduce){ .tile-card{transform:none!important} .tile-card .tc-foil,.tile-card .tc-gloss{display:none}} .section-card{background:var(--elev);border:var(--stroke);border-radius:var(--r);padding:20px} input.search{background:rgba(255,255,255,.04);border:var(--stroke2);border-radius:var(--rp); padding:12px 18px;color:var(--ink);font-family:var(--mono);font-size:13px;width:100%; letter-spacing:.04em} /* ── Abschnittskopf „Eyebrow + kursive Überschrift" (Chase Cards, Ähnliche Sets). Lag früher in set.html hinter {% if chase_cards %} — Sets ohne Chase-Karten zeigten den „Ähnliche Sets"-Kopf dadurch unstyled. */ .chase-h{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:52px 0 14px} .chase-k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)} .chase-h h2{font:italic 700 clamp(19px,3.6vw,25px)/1.2 var(--serif);margin:6px 0 0} .chase-h .sub{font-family:var(--mono);font-size:11px;color:var(--ink3);padding-bottom:3px} footer{max-width:1280px;margin:48px auto 0;padding:24px 28px calc(24px + env(safe-area-inset-bottom, 0px));border-top:var(--stroke); color:var(--ink3);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase} /* ── interaktive Karten-Detailansicht (card.js) ── */ /* Zwei Anker-Preise ganz oben (unter Name/Nummer): RAW + PSA 10 — die zwei Zahlen, die fast jeder als Erstes sucht. Reine ANZEIGE, kein Schalter (umgeschaltet wird über den RAW/GRADED-Switch unten). */ /* position:relative + Kopffreiheit: das Sicherheits-Siegel hängt über der oberen rechten Ecke (siehe .ls-trust) und braucht dort Platz, sonst ragt es in die Zeile mit Set-Name und Nummer. */ /* 16px oben wie urspruenglich — die 42px stammten aus der Marktwert-Kasten-Aera und rissen ein Loch zwischen Illustrations-Zeile und Preis-Ankern (VH). */ .ls-anchors{position:relative;display:flex;gap:10px;margin:16px 0} .ls-anchor{position:relative;overflow:hidden;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px; padding:13px 16px;text-align:left;background:var(--elev);border:var(--stroke2);border-radius:var(--r)} .ls-anchor--empty{opacity:.55} .ls-anchor-l,.ls-anchor-v,.ls-anchor-fac{position:relative;z-index:1} /* „× RAW": Verhältnis der beiden Anker, früher im Marktwert-Kasten. */ .ls-anchor-fac{font-size:10px;font-weight:600;letter-spacing:.04em;margin-top:2px;color:rgba(255,255,255,.86)} .ls-anchor-l{font:600 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)} .ls-anchor-v{font:600 21px/1.05 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums} /* PSA 10 = die Krone: satter Gold-Verlauf + weiße Schrift + wandernder Schimmer, damit die Gem-Mint-Decke „edel" statt bloß informativ wirkt. */ .ls-anchor--psa{background:linear-gradient(135deg,#e4c37f 0%,#caa054 50%,#d7ae61 100%); border-color:rgba(180,140,70,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)} .ls-anchor--psa .ls-anchor-l{color:rgba(255,255,255,.92)} .ls-anchor--psa .ls-anchor-v{color:#fff;text-shadow:0 1px 2px rgba(95,65,15,.4)} .ls-anchor--psa::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:46%;z-index:0;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-16deg);animation:lsShimmer 5s ease-in-out infinite} @keyframes lsShimmer{0%,8%{left:-70%}55%,100%{left:150%}} @media(prefers-reduced-motion:reduce){.ls-anchor--psa::after{animation:none;display:none}} .ls-fhead{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .ls-fhead-bare{margin-bottom:16px} .ls-sel{background:rgba(var(--gold-lite),.035);color:var(--ink);border:var(--stroke2);border-radius:var(--rp); padding:10px 36px 10px 18px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;cursor:pointer;min-width:200px;appearance:none;-webkit-appearance:none; background-image:url('data:image/svg+xml;utf8,'); background-repeat:no-repeat;background-position:right 13px center;background-size:15px} /* Browse-Filter-Gruppen: Sortieren/Preis/Sprache (bb-controls) + Holo/Seltenheiten (bb-chips). Desktop: beide inline in der Leiste. Mobil: Controls nebeneinander (Drittel), Chips als Slider. */ .bb-controls{display:flex;align-items:center;gap:8px;flex-wrap:nowrap} /* Sortieren/Preis mit Icon: Desktop Icon links IM Feld + Text; Mobil (unten im 640er-Block) nur die Icon-Box, das native Select liegt unsichtbar darüber. */ .ls-selwrap{position:relative;display:inline-flex;align-items:center} .ls-selwrap>svg{position:absolute;left:13px;width:15px;height:15px;color:var(--ink3);pointer-events:none} .ls-selwrap .ls-sel{padding-left:36px} /* Sprach-Linse: oben nur die Flagge (Namen stehen im ausgeklappten Menü) */ [data-browse-vlang] .lc-name{display:none} [data-browse-vlang] .ls-langbtn{min-width:0} /* Seltenheiten: Full-Bleed-Slider — läuft über die Bildschirmränder hinaus (rechts raus, beim Scrollen links raus). Nur die Chips scrollen (nie die Seite), KEINE Scrollbar. Negative Margin bricht aus dem zentrierten main aus; padding = Rand-Gutter, damit die erste/letzte Chip bündig zum Content sitzt und nicht abgeschnitten wird. */ .bb-chips{display:flex;align-items:center;gap:7px;overflow-x:auto;overflow-y:hidden;margin-top:12px; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:2px calc(50vw - 50%) 9px; scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .bb-chips::-webkit-scrollbar{display:none} .bb-chips>*,.bb-chips .browse-rarities,.browse-rarities>*{flex:0 0 auto} @media (max-width:720px){ .bb-controls{flex:1 1 100%;gap:6px} .bb-controls .ls-selwrap{flex:1 1 0;min-width:0} .bb-controls .ls-selwrap .ls-sel{width:100%;padding-left:32px} .bb-controls .ls-selwrap>svg{left:10px} .bb-controls .ls-sel{flex:1 1 0;width:auto;min-width:0;padding:11px 24px 11px 11px;background-position:right 7px center;letter-spacing:.04em} .bb-controls .ls-lang{flex:0 0 auto} .bb-controls .ls-langbtn{min-width:0;padding:10px 11px} .bb-controls .ls-langbtn .lc-name{display:none} /* im schmalen Drittel nur die Flagge */ } /* Eigenes Sprach-Dropdown (ersetzt natives