/* Öffentliche Lager-Seite von PokekaTCG.

   Blau ist der Grundton, Gelb die Signalfarbe für alles Gewählte. Hinter der
   Seite steht eine Pixel-Landschaft; Kopfbereich und Filterleiste liegen als
   leicht durchscheinende Flächen mit weichem Schatten darüber.
   Formen und Schrift sind die von PokeCourier und PokeStock (Systemschrift,
   Karten mit 16 px Radius, Werkzeuge mit 10 px).

   Es gibt nur dieses eine, dunkle Farbschema.
   Abstände folgen der Skala 4 · 8 · 12 · 16 · 24 · 32 · 48. */
:root{
  /* Tiefes Blau als Grund, die Schrift nicht ganz weiß. */
  --bg:#0c1230; --card:#172048; --fg:#e6eaf8; --muted:#9daad0; --soft:#22305f;
  --brand:#faf3e6; --line:#2c3a70; --field:#101838;
  --logo:url(../assets/logo-dunkel.png);
  --accent:#e8402a; --on-accent:#fff;
  /* Gelb für alles Gewählte und Hervorgehobene; trägt dunkle Schrift. */
  --pop:#ffcb05; --on-pop:#1c1a0f;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -12px rgba(0,0,0,.7);
  --hero:linear-gradient(135deg,rgba(28,52,128,.88),rgba(22,36,96,.82));
  --hero-fg:#fff; --hero-muted:rgba(255,255,255,.86); --hero-line:rgba(255,255,255,.22);
  --glass:rgba(18,26,62,.92); --float:0 28px 56px -26px rgba(0,0,0,.8);
  /* Deckkraft des Schleiers über dem Hintergrundbild: oben, Mitte, unten. */
  --veil-top:46%; --veil-mid:88%; --veil-end:97%;
  --shade:rgba(15,17,32,.76); --ph:#131b40; --gold:#c8a24a;
  --mt:#19a8ba; --nm:#2f9a4c; --ex:#7c9a2a; --gd:#c9990f; --lp:#d9702a; --pl:#cf4a76; --po:#c93232;
  --head:67px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scrollbar-gutter:stable;scroll-padding-top:calc(var(--head) + 16px)}
body{margin:0;font:16px/1.55 system-ui,"Segoe UI",sans-serif;background:var(--bg);color:var(--fg)}
/* Die Landschaft steht fest hinter der Seite. Ein Schleier in der Grundfarbe
   lässt oben den Himmel durch und deckt nach unten zu, damit die Karten auf
   ruhigem Grund liegen. Bild und Schleier liegen in einer einzigen Ebene, die
   der Browser beim Scrollen nur verschiebt statt neu zu zeichnen. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;transform:translateZ(0);
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) var(--veil-top),transparent) 0,
             color-mix(in srgb,var(--bg) var(--veil-mid),transparent) 46%,
             color-mix(in srgb,var(--bg) var(--veil-end),transparent) 100%),
             url(../assets/hintergrund.webp) center 62%/cover no-repeat}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px}

/* ------------------------------------------------------------ Kopfleiste */
/* Die Kopfleiste deckt ganz: beim Scrollen scheint nichts durch. */
.top{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{max-width:1680px;min-height:66px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
/* Hintergrund statt <img>: nur so wechselt das Logo mit dem Farbschema. */
.brand-mark{width:34px;height:34px;flex:0 0 auto;background:var(--logo) center/contain no-repeat}
.brand-name{font-size:22px;font-weight:800;letter-spacing:-.4px;line-height:1;color:var(--brand)}
/* Links neben dem Logo die Unterseiten, rechts die Wege nach außen und die Sprache. */
.top-tools{flex:1;display:flex;align-items:center;gap:20px;margin-left:16px}
/* Unterseiten: als Textverweise, auf dem Handy hinter dem Menüknopf. */
.top-pages{display:flex;gap:20px;font-size:14px;font-weight:600}
.top-pages a{color:var(--muted);text-decoration:none;white-space:nowrap}
.top-pages a:hover,.top-pages a[aria-current]{color:var(--fg)}
.menu{display:none;position:relative}
.menu summary{list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;top:calc(100% + 8px);right:0;z-index:5;display:grid;min-width:180px;padding:6px;
          background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.menu nav a{padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none}
.menu nav a:hover,.menu nav a[aria-current]{background:var(--soft)}
/* Die vier Wege zu PokekaTCG als Logos. */
.top-shops{display:flex;gap:8px;margin-left:auto}
.top-shops a{display:block;border-radius:9px;transition:transform .14s}
.top-shops a:hover{transform:translateY(-2px)}
.top-shops .link-logo{display:block;width:34px;height:34px;border-radius:9px}
.lang{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.lang button{border:0;background:none;padding:9px 10px;font-size:13px;font-weight:600;line-height:1;cursor:pointer;color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--pop);color:var(--on-pop)}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;
          background:var(--card);cursor:pointer;transition:border-color .14s}
.icon-btn:hover{border-color:var(--fg)}

/* ------------------------------------------------------------ Kopfbereich */
.hero{max-width:1680px;margin:0 auto;padding:24px 24px 0}
/* Schmal und mittig: der kurze Text füllt die Fläche, statt links in einem
   breiten Kasten zu stehen. */
.hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:820px;margin:0 auto;padding:28px 32px 20px;text-align:center;
         background:var(--hero);color:var(--hero-fg);border:1px solid var(--hero-line);border-radius:20px;
         box-shadow:var(--float)}
.hero h1{font-size:clamp(24px,2.8vw,38px);font-weight:800;letter-spacing:-.8px;line-height:1.08;text-wrap:balance}
.lead{max-width:62ch;margin:10px auto 0;color:var(--hero-muted);font-size:15px;text-wrap:balance}
/* Logos der Dienste. Die von Cardmarket und WhatsApp sind für hellen Grund
   gezeichnet und stehen deshalb auf einem weißen Feld. */
.link-logo{width:30px;height:30px;flex:0 0 auto;border-radius:8px;object-fit:contain}
.link-logo[src*="cardmarket"],.link-logo[src*="whatsapp"]{background:#fff;padding:4px}
.hero-meta{padding-top:14px;border-top:1px solid var(--hero-line);font-size:13px;color:var(--hero-muted)}
.hero-meta::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;background:var(--pop)}
/* Latias schwebt oben rechts in der Ecke, den Kopf nach unten geneigt, leicht auf und ab, mit einem Schatten
   wie von Licht von oben. Nur wo neben dem Kasten Platz ist; auf dem Handy
   entfällt die Figur. */
.hero-art{display:none}
@keyframes hover-art{from{translate:0 -7px}to{translate:0 7px}}
@media (min-width:1280px){
  .hero-art{display:block;position:absolute;top:calc(var(--head) + 22px);right:20px;z-index:1;pointer-events:none;
            width:min(200px,calc((100vw - 820px)/2 - 60px))}
  .hero-art img{display:block;width:100%;height:auto;rotate:-16deg;filter:drop-shadow(0 20px 16px rgba(0,0,0,.55));
                animation:hover-art 3.6s ease-in-out infinite alternate}
}
@media (prefers-reduced-motion:reduce){
  .hero-art img{animation:none}
}

/* ------------------------------------------------------------- Kategorien */
.kinds{max-width:1680px;margin:0 auto;padding:16px 24px 0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.kinds button,.f-chips button:not(.cond){border:1px solid var(--line);background:var(--card);border-radius:10px;
      padding:9px 12px;font-size:13px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;transition:border-color .14s}
.kinds button:hover,.f-chips button:not(.cond):hover{border-color:var(--fg)}
.kinds button small{margin-left:8px;color:var(--muted);font-weight:500}
.kinds button[aria-pressed="true"],.f-chips button:not(.cond)[aria-pressed="true"]{background:var(--pop);color:var(--on-pop);border-color:var(--pop)}
.kinds button[aria-pressed="true"] small{color:inherit;opacity:.7}

/* ----------------------------------------------------------------- Aufbau */
.layout{max-width:1680px;margin:0 auto;padding:16px 24px 48px;display:grid;grid-template-columns:304px minmax(0,1fr);gap:24px}
.filters{position:sticky;top:calc(var(--head) + 16px);align-self:start;max-height:calc(100dvh - var(--head) - 32px);
         display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--line);border-radius:16px;
         box-shadow:var(--float)}
.filters-head,.filters-foot{display:none}
/* Sind Filter gesetzt, steht „Filter löschen" am unteren Rand der Leiste. Ragt
   die Leiste oben auf der Seite noch unter den Bildschirmrand, schwebt der
   Knopf an dessen Unterkante mit. Die Fläche deckt und ist eckig; am Ende der
   Leiste schneidet deren Rundung sie zu. */
@media (min-width:901px){
  .filters{overflow:clip}
  .filters.active .filters-foot{display:block;position:sticky;bottom:0;flex:0 0 auto;padding:10px 16px;
        border-top:1px solid var(--line);background:#1b2a5e}
  .filters-foot .btn{width:100%;height:40px;font-size:13px}
  .filters-foot .btn:hover{border-color:var(--fg)}
  #filters-show{display:none}
}
/* Nur senkrecht scrollen: lange Namen brechen um, statt die Leiste zu verbreitern. */
.filters-body{overflow:hidden auto;padding:0 16px;scrollbar-width:thin}
.f-sec{border-bottom:1px solid var(--line)}
.f-sec:last-child{border-bottom:0}
.f-head{display:flex;align-items:center;gap:8px;width:100%;padding:14px 0;border:0;background:none;cursor:pointer;text-align:left;
        font-size:14px;font-weight:700}
.f-count{margin-left:auto;font-size:12px;font-weight:700;line-height:1}
.f-count:not(:empty){min-width:20px;padding:4px 6px;border-radius:999px;background:var(--pop);color:var(--on-pop);text-align:center}
.f-arrow{width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);rotate:45deg;translate:0 -2px;transition:rotate .15s}
.closed .f-arrow{rotate:-45deg;translate:0 0}
.closed .f-in{display:none}
.f-in{padding-bottom:14px}
.f-price{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--muted)}
.f-price input,.f-find{width:100%;min-width:0;height:36px;padding:0 10px;background:var(--field);border:1px solid var(--line);
        border-radius:10px;outline:0;font-size:14px}
.f-price input:focus,.f-find:focus{border-color:var(--fg)}
.f-find{margin-bottom:8px}
.f-chips{display:flex;flex-wrap:wrap;gap:6px}
.f-chips button:not(.cond){padding:7px 10px;font-size:12px;border-radius:8px}
.f-list{display:grid;gap:1px}
.f-list label{display:flex;align-items:flex-start;gap:8px;padding:5px 6px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1.3}
.f-list label:hover{background:var(--soft)}
.f-list label.off{opacity:.4}
.f-list label span{flex:1;min-width:0;overflow-wrap:anywhere}
.f-list label .flag{display:inline-block;vertical-align:-2px;margin-right:8px}
.f-list small{color:var(--muted);font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums}
.f-list em{font-style:normal;color:var(--muted);margin-left:6px}
.f-list em::before{content:"· "}
.f-list input{accent-color:var(--accent);margin:2px 0 0;width:15px;height:15px;flex:0 0 auto}
.f-more{border:0;background:none;padding:6px 0 0;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);
        text-decoration:underline;text-underline-offset:3px}
.f-more:hover{color:var(--fg)}
.f-steps{display:flex;justify-content:space-between;gap:12px}

.search{display:flex;align-items:center;gap:10px;height:46px;margin-bottom:12px;padding:0 14px;
        background:var(--field);border:1px solid var(--line);border-radius:12px;color:var(--muted)}
.search:focus-within{border-color:var(--pop);box-shadow:0 0 0 3px color-mix(in srgb,var(--pop) 30%,transparent)}
.search input{flex:1;min-width:0;border:0;background:none;outline:0;color:var(--fg);font-size:15px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}
.count{font-weight:700;font-variant-numeric:tabular-nums}
.bar-tools{display:flex;align-items:center;gap:12px}
.surprise{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:0;border-radius:10px;cursor:pointer;
          background:var(--pop);color:var(--on-pop);font-size:13px;font-weight:700;white-space:nowrap;transition:transform .14s}
.surprise:hover{transform:translateY(-1px) rotate(-1deg)}
.surprise:hover svg{rotate:90deg}
.surprise svg{transition:rotate .3s}
.sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.sort select{height:38px;padding:0 10px;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--fg);
             font-size:13px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 16px}
.chips:empty{margin:0 0 12px}
.chips button{display:inline-flex;align-items:center;gap:8px;padding:7px 8px 7px 12px;border:1px solid var(--line);border-radius:999px;
              background:var(--card);font-size:12px;font-weight:600;line-height:1;cursor:pointer}
.chips button span{font-size:15px;line-height:1;color:var(--muted)}
.chips button:hover{border-color:var(--fg)}
.chips .chip-reset{border-color:transparent;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.chips .chip-reset:hover{color:var(--fg);border-color:transparent}
.empty{padding:64px 16px;text-align:center;color:var(--muted)}
.more{height:1px}

/* ----------------------------------------------------------------- Raster */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:24px 16px}
/* Bewusst ohne content-visibility: das schneidet alles ab, was über die Kachel
   hinausragt, also die angehobene Karte und ihren Schatten. */
.tile{display:block;text-decoration:none}
.pic{position:relative;aspect-ratio:63/88;border-radius:4.6%/3.3%;overflow:hidden;background:var(--ph);
     box-shadow:0 10px 18px -12px rgba(0,0,0,.55);transition:transform .18s,box-shadow .18s}
.tile:hover .pic,.tile:focus-visible .pic{transform:translateY(-5px) rotate(-.6deg);
     box-shadow:0 22px 34px -14px rgba(0,0,0,.6)}
/* Lichtstreif wie auf einer Holo-Karte, die man im Licht kippt. */
.pic::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
            background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.34) 46%,rgba(255,236,170,.18) 52%,transparent 66%);
            background-size:260% 100%;background-position:120% 0}
.tile:hover .pic::after{opacity:1;background-position:-40% 0;transition:background-position .7s ease-out}
.pic img{display:block;width:100%;height:100%;object-fit:cover}
.pic img.whole,.d-pic img.whole,.r-pic img.whole{object-fit:contain;
     background:radial-gradient(110% 70% at 50% 8%,var(--soft),var(--ph))}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    padding:36px 12px 48px;text-align:center;color:var(--muted);background:radial-gradient(110% 70% at 50% 8%,var(--soft),var(--ph))}
.ph svg{width:34%;opacity:.5}
.ph b{color:var(--fg);font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ph span{font-size:11px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ph small{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;opacity:.75}

.cond{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;border-radius:6px;border:0;
      font-size:11px;font-weight:800;letter-spacing:.3px;line-height:1;color:#fff;background:var(--muted)}
.cond:empty{display:none}
.c-MT{background:var(--mt)} .c-NM{background:var(--nm)} .c-EX{background:var(--ex)} .c-GD{background:var(--gd)}
.c-LP{background:var(--lp)} .c-PL{background:var(--pl)} .c-PO{background:var(--po)}
.cond.kind{background:var(--shade)}
.pic .cond{position:absolute;top:8px;left:8px;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.marks{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.marks i,.o-main i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.3px;line-height:1;padding:4px 6px;border-radius:5px;
        background:var(--shade);color:#fff}
.m-grade{background:var(--gold)!important;color:#1b1500!important}
.flags{display:flex;gap:4px}
.flag{display:block;width:24px;height:16px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.35);flex:0 0 auto}
/* Rechts bleibt Platz für das Plus der Merkliste. */
.price{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:5px;padding:28px 44px 8px 10px;
       color:#fff;background:linear-gradient(180deg,transparent,rgba(12,13,19,.84) 64%)}
.price b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.price small{font-size:11px;opacity:.85}
.price em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;opacity:.9}
.wish{position:absolute;right:7px;bottom:6px;z-index:1;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;
      border-radius:50%;background:rgba(255,255,255,.94);color:#10152e;cursor:pointer;
      box-shadow:0 2px 6px rgba(0,0,0,.45);transition:transform .14s}
/* Plus und Haken sind gezeichnet statt gesetzt: ein Schriftzeichen säße je nach
   Schrift und beim Kippen der Kachel nicht genau in der Mitte. */
.wish::before{content:"";width:12px;height:12px;
      background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
                 linear-gradient(currentColor,currentColor) center/2px 100% no-repeat}
.wish:hover{transform:scale(1.14)}
.wish[aria-pressed="true"]{background:var(--pop);color:var(--on-pop)}
.wish[aria-pressed="true"]::before{width:12px;height:7px;background:none;border-left:2px solid;border-bottom:2px solid;
      rotate:-45deg;translate:0 -2px}
.cap{padding:9px 2px 0;display:grid;gap:1px}
.cap b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cap span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Zustands-Plaketten als Filter: alle gleich breit in einem Raster. Kürzel und
   Anzahl stehen auf einer Grundlinie; die Zeilenhöhe füllt die Plakette, damit
   beide trotzdem senkrecht mittig sitzen. */
.f-conds{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
.f-conds .cond{justify-content:center;align-items:baseline;gap:6px;height:28px;padding:0;line-height:28px;cursor:pointer;opacity:.5}
.f-conds .cond small{font-size:10px;font-weight:600;line-height:inherit;opacity:.9;font-variant-numeric:tabular-nums}
.f-conds .cond[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--fg)}
.f-conds .cond:hover:not(:disabled){opacity:1}
.f-conds .cond:disabled{opacity:.18;cursor:default}

/* ---------------------------------------------------------- Schaltflächen */
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 18px;border-radius:10px;
     border:1px solid var(--line);background:var(--card);font-weight:700;cursor:pointer;text-decoration:none}
.btn.solid{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.08)}
/* „Zurück" nach einem Sprung aus der Detailansicht: schwebt über dem Raster,
   damit der Knopf auch weit unten erreichbar bleibt. */
.back{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:35;display:inline-flex;align-items:center;gap:8px;
      height:46px;padding:0 22px 0 18px;border:0;border-radius:999px;background:var(--pop);color:var(--on-pop);
      font-weight:800;cursor:pointer;box-shadow:0 10px 24px -8px rgba(0,0,0,.6);transition:transform .14s}
.back:hover{transform:translateY(-2px)}

/* -------------------------------------------------------------- Merkliste */
/* Der Knopf schwebt unten rechts über dem Raster und zeigt die Zahl der Einträge. */
.wish-open{position:fixed;right:24px;bottom:24px;z-index:35;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;
           border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--fg);font-weight:800;cursor:pointer;
           box-shadow:0 10px 24px -8px rgba(0,0,0,.6);transition:transform .14s,border-color .14s}
.wish-open:hover{transform:translateY(-2px);border-color:var(--fg)}
.wish-open b{min-width:22px;padding:0 6px;border-radius:999px;background:var(--pop);color:var(--on-pop);font-size:12px;line-height:22px;
             text-align:center;font-variant-numeric:tabular-nums}
.wish-open b:empty{display:none}
.wishlist{width:min(780px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:16px;
          background:var(--card);color:var(--fg);box-shadow:var(--shadow);overflow:hidden}
.wishlist::backdrop{background:rgba(6,9,24,.82)}
.w-in{display:flex;flex-direction:column;max-height:calc(100dvh - 34px)}
.w-in header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px 8px}
.w-in h2{font-size:22px;font-weight:800;letter-spacing:-.4px}
.w-empty{padding:0 24px 32px;color:var(--muted);font-size:15px;line-height:1.45}
.w-list{overflow-y:auto;margin-top:4px;padding:0 24px;scrollbar-width:thin}
.w-list li{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto auto;align-items:center;gap:12px;padding:10px 0;
           border-top:1px solid var(--line)}
.w-pic{padding:0;border:0;background:none;cursor:pointer}
.w-text{display:grid;gap:2px;min-width:0;justify-items:start}
.w-text .d-link{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.w-text span{max-width:100%;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-price{font-variant-numeric:tabular-nums;white-space:nowrap}
.w-price small{font-size:11px;font-weight:500;color:var(--muted)}
.w-go{height:38px;padding:0 12px;font-size:13px;white-space:nowrap}
.w-go:hover{border-color:var(--fg)}
.w-in footer{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:14px 24px 20px;border-top:1px solid var(--line)}
.w-in footer b{margin-right:auto;font-variant-numeric:tabular-nums}
.w-in footer .btn{height:40px;padding:0 14px;font-size:13px}

/* ------------------------------------------------------------ Detailansicht */
.detail{width:min(1080px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);
        border-radius:16px;background:var(--card);color:var(--fg);overflow-y:auto;box-shadow:var(--shadow)}
.detail::backdrop{background:rgba(6,9,24,.82)}
.d-in{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px 40px;padding:32px}
.d-close{position:absolute;top:16px;right:16px;z-index:2}
.d-reroll{position:absolute;top:16px;right:64px;z-index:2;height:36px}
/* Als Hintergrund liegt das Kachelbild, bis das große geladen ist. */
.d-pic{position:relative;align-self:start;aspect-ratio:63/88;border-radius:4.6%/3.3%;overflow:hidden;
       background:var(--ph) center/cover no-repeat;box-shadow:0 24px 44px -20px rgba(0,0,0,.6)}
.d-pic img{display:block;width:100%;height:100%;object-fit:cover}
.d-body{min-width:0}
.d-kind{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.d-body h2{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.5px;line-height:1.15;margin-top:4px}
.d-body{padding-top:36px}
.d-ja{color:var(--muted);margin-top:4px;font-size:15px}
.d-body h3,.d-rel h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.d-body h3{margin:24px 0 8px}
.d-facts{display:grid;grid-template-columns:auto 1fr;gap:5px 20px;margin-top:16px;font-size:14px}
.d-facts dt{color:var(--muted)}
.d-facts [lang="ja"]{color:var(--muted);margin-left:8px;font-size:13px}
.d-link{padding:0;border:0;background:none;cursor:pointer;font-weight:600;text-align:left;
        text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:2px;text-underline-offset:4px}
.d-link:hover{text-decoration-color:var(--accent)}
.d-offers{width:100%;border-collapse:collapse;font-size:14px}
.d-offers td{padding:10px 0 4px;border-top:1px solid var(--line);vertical-align:middle}
.d-offers tr:first-child td{border-top:0}
.o-main{display:flex;align-items:center;gap:8px}
.o-n{min-width:2.6em;font-weight:700;font-variant-numeric:tabular-nums}
.o-main i{background:var(--soft);color:var(--fg)}
.d-offers .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;padding-left:12px}
.d-offers .num b{font-size:16px;font-weight:800}
.d-offers .o-note td{border-top:0;padding:0 0 10px;color:var(--muted);font-size:13px;line-height:1.4}
.d-buy{width:100%;margin-top:16px;height:50px}
.d-wish{width:100%;margin-top:8px}
.d-wish:hover{border-color:var(--fg)}
.d-wish[aria-pressed="true"]{border-color:var(--pop);color:var(--pop)}
.d-hint{font-size:12px;color:var(--muted);margin-top:10px}
/* Die Spalte darf schmaler sein als ihr Inhalt: sonst macht eine lange Reihe
   von Querverweisen die ganze Ansicht breiter als den Bildschirm. */
.d-more{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.d-rel,.d-rel h3{min-width:0}
.d-more:empty{display:none}
.d-rel header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:8px;margin-bottom:12px;
              border-bottom:1px solid var(--line)}
.d-all{padding:0;border:0;background:none;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;
       text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:2px;text-underline-offset:4px}
.d-all:hover{text-decoration-color:var(--accent)}
.d-related{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.r-card{display:grid;gap:6px;text-decoration:none}
.r-pic{position:relative;display:block;aspect-ratio:63/88;border-radius:4.6%/3.3%;overflow:hidden;background:var(--ph);
       transition:transform .16s}
.r-card:hover .r-pic{transform:translateY(-3px)}
.r-pic img{display:block;width:100%;height:100%;object-fit:cover}
.r-pic .ph{padding:6px;gap:2px}
.r-pic .ph svg,.r-pic .ph span,.r-pic .ph small{display:none}
.r-pic .ph b{font-size:10px;-webkit-line-clamp:4}
.r-price{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
.d-nav{position:fixed;top:50%;translate:0 -50%;width:44px;height:64px;border:1px solid var(--line);border-radius:10px;background:var(--card);
       color:var(--fg);font-size:28px;line-height:1;cursor:pointer}
.d-nav:hover{border-color:var(--fg)}
.d-nav.prev{left:max(8px,calc(50vw - 600px))}
.d-nav.next{right:max(8px,calc(50vw - 600px))}

.foot{max-width:1680px;margin:0 auto;padding:14px 24px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column-reverse;
      align-items:center;gap:6px;font-size:13px;color:var(--muted);text-align:center}
.foot nav{display:flex;justify-content:center;gap:28px;font-size:14px}
.foot a{font-weight:600;text-underline-offset:3px}
.foot a:hover{color:var(--fg)}
.foot-note{max-width:120ch;font-size:12px;line-height:1.45;text-wrap:balance}
/* Unterseiten (Über uns, Impressum, Datenschutz): schlichtes Dokument mit
   Pfad, großer Überschrift über einer Linie und Abschnitten, ohne Karte
   drumherum. Die Abstände sind knapp gehalten, damit Impressum und „Über uns"
   auf einen Bildschirm passen. */
.page{display:flex;flex-direction:column;min-height:100dvh}
.page .foot{width:100%}
.doc{flex:1;width:100%;max-width:860px;margin:0 auto;padding:20px 24px 28px}
.crumbs{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.crumbs a{display:inline-flex;color:var(--fg);font-weight:600;text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs b{font-weight:400}
.doc h1{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.6px;line-height:1.2;margin-top:10px;padding-bottom:8px;
        border-bottom:1px solid var(--line)}
.doc h2{font-size:clamp(18px,1.8vw,21px);font-weight:800;letter-spacing:-.3px;line-height:1.25;margin:22px 0 4px}
.doc p{margin-top:8px;max-width:110ch}
.doc h1 + p{margin-top:16px}
/* Kurze Abschnitte nebeneinander (Impressum). */
.doc-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.doc-cols .wide{grid-column:1/-1}
.doc p.doc-date{margin-top:20px;color:var(--muted);font-size:13px}
/* Zeilen des Muster-Widerrufsformulars. */
.doc-form{display:grid;gap:6px;margin-top:8px;padding-left:20px;list-style:"– "}
.doc p a,.doc-links a{font-weight:600;text-underline-offset:3px}
.doc-links{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;margin-top:12px}
.doc-links a{display:inline-flex;align-items:center;gap:10px}
.doc-links .link-logo{width:28px;height:28px;border-radius:7px}
.doc-links .link-logo[src*="cardmarket"],.doc-links .link-logo[src*="whatsapp"]{padding:4px}

@media (prefers-reduced-motion:reduce){
  .pic,.r-pic{transition:none}
  .tile:hover .pic{transform:none}
  .pic::after{display:none}
}

/* ------------------------------------------------------------------ Handy */
/* Unter 900 px Breite bedient sich die Seite wie eine App auf dem iPhone:
   eine Leiste mit fünf Zielen am unteren Rand, Filter und „Mehr" als Blätter,
   die von unten hereinfahren und sich wegziehen lassen, die Detailansicht als
   ganze Seite mit dem Kaufknopf am Daumen. Alle Regeln davor gelten weiter;
   hier steht nur, was sich ändert. Breitere Bildschirme sehen davon nichts. */
.tabs,.scrim,.extra{display:none}
@keyframes rise{from{translate:0 100%}}

@media (hover:none){
  /* Ohne Zeiger bliebe die angehobene Kachel nach dem Antippen hängen. */
  .tile:hover .pic{transform:none;box-shadow:0 10px 18px -12px rgba(0,0,0,.55)}
  .tile:hover .pic::after{opacity:0}
  .tile:active .pic{transform:scale(.97)}
  .r-card:hover .r-pic,.top-shops a:hover,.surprise:hover,.back:hover,.wish:hover,.wish-open:hover{transform:none}
}

@media (max-width:900px){
  /* Die Abstände zum Rand weichen Kamera-Aussparung und Home-Balken aus. */
  :root{--head:calc(59px + env(safe-area-inset-top));--tabs:calc(56px + env(safe-area-inset-bottom));
        --side-l:max(12px,env(safe-area-inset-left));--side-r:max(12px,env(safe-area-inset-right))}
  html{-webkit-text-size-adjust:100%}
  body{-webkit-tap-highlight-color:transparent}
  .app{padding-bottom:var(--tabs)}
  /* Unter 16 px zoomt iOS beim Antippen in jedes Feld hinein. */
  input,select{font-size:16px!important}

  .top-in{min-height:0;padding:calc(12px + env(safe-area-inset-top)) var(--side-r) 12px var(--side-l);gap:8px}
  .top-tools{gap:8px;margin-left:8px}
  .top-pages{display:none}
  .menu{display:block}
  /* Auf der Startseite stehen Unterseiten und Sprache im Blatt „Mehr". */
  .app .menu,.top .lang{display:none}
  .brand-name{font-size:19px}
  .top-shops{gap:6px}
  .top-shops .link-logo{width:32px;height:32px}

  .hero{padding:12px var(--side-r) 0 var(--side-l)}
  .hero-in{padding:16px;gap:12px;border-radius:18px}
  .hero h1{font-size:22px;letter-spacing:-.4px}
  .lead{margin-top:8px;font-size:14px;line-height:1.45}
  .hero-meta{padding-top:12px;font-size:12px;line-height:1.45}

  .kinds{padding:12px var(--side-r) 0 var(--side-l);scroll-snap-type:x proximity;scroll-padding:0 12px}
  .kinds button{padding:11px 14px;border-radius:999px;font-size:14px;scroll-snap-align:start}
  .layout{grid-template-columns:minmax(0,1fr);padding:12px var(--side-r) 24px var(--side-l)}
  .search{height:44px}
  /* „Überrasch mich" steht in der Leiste unten. */
  .bar{min-height:0;gap:8px}
  .bar .surprise,.sort span{display:none}
  .count{min-width:0;overflow:hidden;font-size:13px;white-space:nowrap;text-overflow:ellipsis}
  .sort select{height:38px;max-width:42vw}
  .chips button{padding:9px 10px 9px 14px;font-size:13px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px 10px}
  .foot{padding:16px 12px 24px}
  .doc{padding:16px var(--side-r) 32px var(--side-l)}
  .doc-cols,.doc-links{grid-template-columns:minmax(0,1fr)}

  /* Leiste am unteren Rand. */
  .tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset:auto 0 0 0;z-index:36;height:var(--tabs);
        padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        background:color-mix(in srgb,var(--bg) 84%,transparent);border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
        -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
  .tabs button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
        padding:0;border:0;background:none;color:var(--muted);font-size:10px;font-weight:600;line-height:1;cursor:pointer;
        transition:color .12s,transform .12s}
  .tabs button:active{transform:scale(.9)}
  .tabs button:first-child,.tabs button[aria-pressed="true"]{color:var(--pop)}
  .sheet-on .tabs button:first-child{color:var(--muted)}
  .tabs svg{width:24px;height:24px}
  .tab-badge{position:absolute;top:5px;left:calc(50% + 5px);min-width:17px;height:17px;padding:0 5px;border-radius:999px;
        background:var(--accent);color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center}
  .tab-badge:empty{display:none}
  .back{left:var(--side-l);bottom:calc(var(--tabs) + 12px);translate:none;height:42px;padding:0 16px 0 12px;font-size:14px}
  .wish-open{right:var(--side-r);bottom:calc(var(--tabs) + 12px);height:42px;padding:0 14px;font-size:14px}
  .wish{width:34px;height:34px}
  .wishlist{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .w-in{max-height:calc(100dvh - 18px)}
  .w-in header{padding:16px 16px 8px}
  .w-empty,.w-list{padding-left:16px;padding-right:16px}
  .w-list li{grid-template-columns:44px minmax(0,1fr) auto 36px;gap:8px 10px}
  .w-go{grid-row:2;grid-column:2/4;justify-self:start}
  .w-del{grid-row:1;grid-column:4}
  .w-in footer{padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
  .w-in footer b{flex:1 0 100%}
  .w-in footer .btn{flex:1}

  /* Blätter: Filter und „Mehr". */
  .scrim{display:block;position:fixed;inset:0;z-index:40;background:rgba(6,9,24,.6);opacity:0;pointer-events:none;transition:opacity .25s}
  .sheet-on{overflow:hidden}
  .sheet-on .scrim{opacity:1;pointer-events:auto}
  .filters,.extra{display:flex;flex-direction:column;position:fixed;inset:auto 0 0 0;top:auto;z-index:50;max-height:88dvh;
        background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;
        box-shadow:0 -20px 40px rgba(0,0,0,.45);translate:0 105%;transition:translate .34s cubic-bezier(.32,.72,0,1)}
  .filters-on .filters,.extra-on .extra{translate:0 0}
  .sheet-head{display:flex;align-items:center;justify-content:space-between;position:relative;padding:22px 16px 12px;
        border-bottom:1px solid var(--line);touch-action:none}
  /* Griff, an dem sich das Blatt nach unten wegziehen lässt. */
  .sheet-head::before{content:"";position:absolute;top:8px;left:50%;translate:-50% 0;width:36px;height:5px;border-radius:3px;
        background:var(--line)}
  .sheet-head h2{font-size:17px;font-weight:800}
  .sheet-head .icon-btn{width:32px;height:32px;border:0;border-radius:50%;background:var(--soft);font-size:13px}
  .filters-body,.extra-body{overscroll-behavior:contain}
  .filters-foot{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top:1px solid var(--line)}
  .filters-foot .btn{padding:0 14px;border-radius:14px;font-size:15px;white-space:nowrap}
  /* Größere Ziele für den Finger. */
  .f-head{padding:16px 0;font-size:16px}
  .f-list label{align-items:center;padding:10px 6px;font-size:16px}
  .f-list input{width:20px;height:20px;margin:0}
  .f-list small{font-size:13px}
  .f-price input,.f-find{height:44px}
  .f-chips button:not(.cond){padding:10px 12px;font-size:14px}
  .f-conds .cond{height:36px;line-height:36px;font-size:13px}
  .f-conds .cond small{font-size:11px}
  .f-more{padding:10px 0 2px;font-size:15px}
  .extra-body{display:grid;gap:10px;overflow-y:auto;padding:16px 16px calc(20px + env(safe-area-inset-bottom))}
  .extra h3{margin:6px 4px 0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
  .rows{overflow:hidden;border-radius:14px;background:var(--field)}
  .rows a{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 14px;border-top:1px solid var(--line);
        font-size:16px;font-weight:600;text-decoration:none}
  .rows a:first-child{border-top:0}
  .rows a:active{background:var(--soft)}
  .rows a::after{content:"";width:8px;height:8px;margin-left:auto;border-top:2px solid var(--muted);border-right:2px solid var(--muted);rotate:45deg}
  .extra .lang{display:grid;grid-template-columns:1fr 1fr;border-radius:14px}
  .extra .lang button{padding:15px;font-size:15px}

  /* Detailansicht: ganze Seite, die von unten hereinfährt. Schließen oben,
     Kaufen und Blättern unten bleiben beim Scrollen stehen. */
  .detail{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;overscroll-behavior:contain;
          overflow-x:hidden}
  .detail[open]{animation:rise .36s cubic-bezier(.32,.72,0,1)}
  .d-in{grid-template-columns:minmax(0,1fr);gap:20px;
        padding:calc(68px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .d-in::before,.d-in::after{content:"";position:fixed;left:0;right:0;z-index:3;background:color-mix(in srgb,var(--card) 86%,transparent);
        -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .d-in::before{top:0;height:calc(56px + env(safe-area-inset-top));border-bottom:1px solid var(--line)}
  .d-in::after{bottom:0;height:calc(72px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .d-close,.d-reroll{position:fixed;top:calc(10px + env(safe-area-inset-top));z-index:4}
  .d-close{right:var(--side-r);border:0;border-radius:50%;background:var(--soft)}
  .d-reroll{right:calc(var(--side-r) + 46px);border-radius:999px}
  .d-pic{width:100%;max-width:280px;margin:0 auto}
  .d-body{padding-top:0}
  .d-offers td{padding:12px 0 6px}
  .d-buy{position:fixed;left:calc(var(--side-l) + 56px);right:calc(var(--side-r) + 56px);bottom:calc(12px + env(safe-area-inset-bottom));
        z-index:4;width:auto;height:48px;margin:0;border-radius:14px}
  .d-hint{margin-top:16px}
  .d-nav{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));z-index:4;translate:none;width:48px;height:48px;border-radius:14px;font-size:24px}
  .d-nav.prev{left:var(--side-l)}
  .d-nav.next{right:var(--side-r)}
  /* Querverweise als Reihe zum seitlichen Durchwischen. */
  .d-related{display:flex;gap:10px;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scroll-snap-type:x proximity;
        scroll-padding:0 16px;scrollbar-width:none}
  .d-related::-webkit-scrollbar{display:none}
  .r-card{flex:0 0 27%;scroll-snap-align:start}
}
@media (max-width:359px){
  .brand-name{display:none}
}
@media (prefers-reduced-motion:reduce){
  .detail[open]{animation:none}
  .filters,.extra,.scrim{transition:none}
}