/* Tauschen (public/trade.html) – E5 „Kawaii Cash“: Katalog | Tauschschein | Katalog (Entwurf t-e5x-kawaii 1:1).
   Minze = was du gibst (Guthabenwert), Sakura = was du bekommst (unsere Endpreise), Tinte = Verrechnung, Ichigo = Aktion.
   Der Schein klebt zwischen beiden Katalogen (Desktop); am Handy: Umschalter mit Summen oben + Leiste mit Differenz unten. */

.tf{padding:0 0 80px}
/* ------------------------------------------------ Kopf: 交換 als Umriss hinter „Tauschen“, Ton-Schalter, Fakten */
.tf-top{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:10px 44px;padding:12px 0 10px}
.tf-top::before{content:"";position:absolute;inset:-10px -24px -30px;z-index:-1;pointer-events:none;background:radial-gradient(rgba(30,27,57,.10) 1.1px,transparent 1.5px) 0 0/24px 24px;-webkit-mask:radial-gradient(640px 180px at 18% 50%,#000 10%,transparent 72%);mask:radial-gradient(640px 180px at 18% 50%,#000 10%,transparent 72%)}
/* Platz für das Umriss-Kanji über „Tauschen“: die Zeile reserviert seine Höhe, damit es nie unter Kopf/Spielleiste rutscht.
   Greift nur, wenn die Zeile höher wird als der Text daneben (sonst bleibt alles, wie es ist). */
.tf-h1row{--jp-pad:calc(clamp(100px,8.4vw,128px) * .47);position:relative;display:flex;align-items:flex-end;gap:14px;padding-top:var(--jp-pad)}
.tf-top h1{position:relative;margin:0;font-family:var(--round);font-weight:800;font-size:clamp(44px,3.9vw,56px);line-height:.98;letter-spacing:-.035em}
.tf-top h1 span{padding:0 .05em;background:linear-gradient(transparent 62%,var(--sakura-2) 62% 90%,transparent 90%)}
.tf-h1jp{position:absolute;left:-.1em;top:calc(var(--jp-pad) - .5em);z-index:-1;font:900 clamp(100px,8.4vw,128px)/1 var(--round);color:transparent;-webkit-text-stroke:1.5px rgba(69,53,166,.14);white-space:nowrap;letter-spacing:-.02em;pointer-events:none}
.tf-lead{max-width:78ch;margin:0 0 8px;color:var(--ink-2);font-size:16px;line-height:1.5;text-wrap:pretty}
.tf-lead b{color:var(--ink);font-weight:760}
.tf-lead b em{font-style:normal;color:var(--money)}
.tf-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tf-facts li{display:flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 4px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font-size:13.5px;font-weight:650;white-space:nowrap}
.tf-facts li span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--mint);color:var(--mint-ink)}
.tf-facts li:nth-child(2) span{background:var(--sakura);color:var(--sakura-ink)}
.tf-facts li:nth-child(3) span{background:var(--butter);color:var(--butter-ink)}

/* ------------------------------------------------ Spielbrett */
.tf-board{--tk:264px;--bw:min(1408px,calc(100vw - 32px));display:grid;grid-template-columns:minmax(0,1fr) var(--tk) minmax(0,1fr);gap:0 12px;align-items:start;width:var(--bw);margin:0 auto}
.tf-panel{--hb:var(--mint);--hi:var(--mint-ink);--hs:#1F4A3A;grid-row:1;grid-column:1;align-self:stretch;position:relative;isolation:isolate;min-width:0;padding:16px 12px 20px;border-radius:28px;background:var(--hb)}
.tf-panel.get{--hb:var(--sakura);--hi:var(--sakura-ink);--hs:#5E2138;grid-column:3}
.tf-panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(color-mix(in srgb,var(--hi) 16%,transparent) 1.1px,transparent 1.5px) 0 0/20px 20px;-webkit-mask:linear-gradient(180deg,#000,transparent 260px);mask:linear-gradient(180deg,#000,transparent 260px);pointer-events:none}
.tf-panel-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:44px;margin:0 4px 12px}
.tf-hjp{display:grid;place-items:center;height:26px;padding:0 10px;border-radius:999px;background:#fff;color:var(--hi);font-size:12px;transform:rotate(-4deg)}
.tf-panel-head h2{margin:0;font-family:var(--round);font-weight:800;font-size:clamp(22px,1.9vw,28px);line-height:1.1;letter-spacing:-.025em}
.tf-count{color:var(--hs);font-size:13.5px;font-weight:700}
.tf-sort,.tf-filter select,.tf-cat{min-width:0;height:44px;padding:0 36px 0 16px;border:0;border-radius:999px;background:#fff var(--chev) no-repeat right 14px center;-webkit-appearance:none;appearance:none;color:var(--ink);font:640 14px var(--sans);cursor:pointer;transition:box-shadow .16s ease}
.tf-sort{margin-left:auto;max-width:100%}
.tf-kinds{display:flex;gap:4px;margin:0 0 10px;padding:4px;border-radius:20px;background:#fff}
.tf-kinds button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:48px;padding:5px 10px;border:0;border-radius:16px;background:transparent;color:var(--ink-2);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease,color .2s ease}
.tf-kinds .k{color:var(--sakura-ink);font-size:12px}
.tf-kinds .t{font:740 13.5px/1.2 var(--sans);text-align:center}
.tf-kinds button.on{background:var(--ink);color:#fff}
.tf-kinds button.on .k{color:var(--sakura-2)}
.tf-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.tf-chips button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;border:0;border-radius:999px;background:#fff;color:var(--ink);font:680 13.5px/1 var(--sans);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .25s var(--spring)}
.tf-chips button i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--ink-3));box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--ink-3)) 22%,transparent)}
.tf-chips button small{padding:4px 7px;border-radius:999px;background:var(--bg);color:var(--ink-2);font:800 12px/1 var(--round);font-variant-numeric:tabular-nums}
.tf-chips button.on{background:var(--ink);color:#fff}
.tf-chips button.on small{background:rgba(255,255,255,.16);color:#fff}
.tf-chips button:active{transform:scale(.96)}
/* Shop-Kategorien: ein Auswahlfeld statt einer zweiten Chip-Wand */
.tf-chips.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));overflow:visible;-webkit-mask:none;mask:none}
.tf-chips.cats.hidden{display:none}
.tf-cat{width:100%}
.tf-cat:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
/* Suche + Sprache + Zustand in einer Reihe (wie im Entwurf); schmaler: Suche oben, Auswahl darunter */
.tf-filter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,150px) minmax(0,150px);gap:6px;margin:0 0 8px}
.tf-filter:not(:has(select:not(.hidden))) .tf-q{grid-column:1/-1}
.tf-q{display:flex;align-items:center;gap:9px;min-width:0;height:44px;padding:0 14px;border-radius:999px;background:#fff;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .16s ease;cursor:text}
.tf-q:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}
.tf-q input{flex:1;min-width:0;align-self:stretch;border:0;outline:0;background:transparent;color:var(--ink);font:450 14.5px var(--sans);text-overflow:ellipsis}
.tf-q input::placeholder{color:#6F6D84;opacity:1}
.tf-filter select{width:100%}
.tf-filter select:focus-visible,.tf-sort:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
@media (min-width:1200px) and (max-width:1439px){.tf-filter{grid-template-columns:minmax(0,1fr) minmax(0,128px) minmax(0,128px)}.tf-filter select{padding:0 28px 0 12px;background-position:right 11px center;font-size:13px}.tf-q{gap:7px;padding:0 12px}}
.tf-hint{margin:0 4px 12px;color:var(--hs);font-size:12.5px;font-weight:560;line-height:1.45;text-wrap:balance}
.tf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tf-more{display:flex;align-items:center;min-height:48px;margin:16px auto 0;padding:0 22px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);font:700 15px var(--sans);cursor:pointer;transition:background-color .16s ease,color .16s ease,transform .2s var(--spring)}
.tf-more:active{transform:scale(.97)}
.tf-empty-state{display:flex;flex-direction:column;align-items:center;gap:6px;grid-column:1/-1;padding:36px 18px;border:2px dashed color-mix(in srgb,var(--hi,var(--ink)) 30%,transparent);border-radius:22px;background:rgba(255,255,255,.6);color:var(--ink-2);font-size:14px;text-align:center;text-wrap:pretty}
.tf-empty-state b{color:var(--ink);font:800 17px/1.2 var(--round)}

/* Kurzer Bestand: 入荷-Hinweis + echte Shop-Artikel statt leerer Fläche */
.tf-fill{margin-top:14px}
.tf-fill-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 10px;padding:14px 16px;border:2px dashed color-mix(in srgb,var(--hi) 28%,transparent);border-radius:20px;background:rgba(255,255,255,.62)}
.tf-fill-head .jp{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#fff;color:var(--hi);font-size:13px;transform:rotate(-6deg)}
.tf-fill-head p{flex:1 1 180px;margin:0;color:var(--ink);font:800 15px/1.35 var(--round);text-wrap:pretty}
.tf-fill-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);font:700 14px/1.2 var(--sans);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .16s ease,color .16s ease,transform .2s var(--spring)}
.tf-fill-go:active{transform:scale(.97)}
.tf-fill-go svg{transition:transform .3s var(--ease-out)}

/* ------------------------------------------------ Kacheln: kompakt, der Preis bleibt der Held */
.tf-tile{position:relative;display:flex;flex-direction:column;min-width:0;padding:6px 6px 7px;border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(30,27,57,.05),0 8px 16px -12px rgba(30,27,57,.4);color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;container-type:inline-size;transition:box-shadow .2s ease,transform .22s var(--ease-out)}
.tf-tile>*{max-width:100%}
.tf-tile.on{box-shadow:0 0 0 2.5px var(--ichigo),0 10px 18px -12px rgba(30,27,57,.45)}
.tf-tile.off{opacity:.62}
.tf-img{position:relative;display:block;aspect-ratio:63/88;overflow:hidden;border-radius:9px;background:var(--bg);cursor:pointer}
.tf-tile.off .tf-img{cursor:default}
.tf-tile.give.off .tf-img{cursor:pointer}
.tf-img img{width:100%;height:100%;object-fit:cover;transition:transform .25s var(--ease-out)}
.tf-tile.is-shop .tf-img{aspect-ratio:1;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
.tf-tile.is-shop .tf-img img{object-fit:contain;padding:8px}
.tf-vl{position:absolute;left:5px;top:5px;max-width:calc(100% - 10px);overflow:hidden;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink);font-size:12px;font-weight:780;line-height:1.2;white-space:nowrap;text-overflow:ellipsis}
/* Symbolbild: Katalogbilder mit „SAMPLE“-Aufdruck (One Piece) – ruhiger Tinten-Hinweis unten, klickt durch aufs Bild */
.tf-img .img-hint{bottom:6px;padding:3px 8px;line-height:1.2}
.tf-ck{position:absolute;right:5px;top:5px;z-index:2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ichigo);color:#fff;box-shadow:0 0 0 2.5px #fff;opacity:0;transform:scale(.6);transition:transform .2s var(--ease-out),opacity .15s ease}
.tf-ck b{font:800 12px/1 var(--round)}
.tf-tile.on .tf-ck{opacity:1;transform:none}
.tf-meta{display:block;min-width:0;padding:7px 3px 0}
.tf-name{display:block;overflow:hidden;font-size:13px;font-weight:760;line-height:1.25;white-space:nowrap;text-overflow:ellipsis}
.tf-tile.is-shop .tf-name{display:-webkit-box;min-height:2.5em;white-space:normal;overflow-wrap:break-word;hyphens:auto;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tf-sub{display:block;overflow:hidden;color:var(--ink-2);font-size:12px;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}
.tf-sub.split{display:flex;min-width:0}
.tf-sub .sset{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tf-sub .snum{flex:none;color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums;white-space:pre}
/* Preisschein: gestrichelte Abrisskante mit zwei Kerben */
.tf-pt{position:relative;display:block;flex:1;margin:7px 0 0;padding:6px 3px 0;border-top:1.5px dashed var(--line-2)}
.tf-pt::before,.tf-pt::after{content:"";position:absolute;top:-7px;width:12px;height:12px;border-radius:50%;background:var(--hb,var(--bg))}
.tf-pt::before{left:-12px}.tf-pt::after{right:-12px}
.tf-k{display:flex;justify-content:space-between;gap:4px;color:var(--ink-2);font-size:12px;font-weight:700;line-height:1.3}
.tf-k .jp{color:var(--ichigo);font-size:12px}
/* Label leicht schmaler geschnitten (Mona-Breitenachse), damit „Guthabenwert“ + 査定 bei 4 Kacheln je Reihe in eine Zeile passen */
.tf-k>span:first-child{min-width:0;font-stretch:92%}
.tf-price{display:flex;color:var(--ink);font:800 17px/1.2 var(--round);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tf-tile.give .tf-price{color:var(--money)}
.tf-price.skel{width:60px;height:17px;margin-top:4px;border-radius:6px;background:var(--bg)}
.tf-tile.is-skel{min-height:260px}
.tf-na{display:block;color:var(--ink-2);font-size:12px;font-weight:650;line-height:1.4}
.tf-prow{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:3px;color:var(--ink-2);font-size:12px;font-weight:680;line-height:1.3}
.tf-chip{padding:1px 6px;border-radius:999px;background:var(--bg);color:var(--ink);font-weight:720;white-space:nowrap}
.tf-stock.low{color:var(--sakura-ink)}
.tf-addb{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:40px;margin-top:8px;padding:0 4px;border:0;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink);font:720 13px/1 var(--sans);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:background-color .16s ease,color .16s ease,transform .25s var(--spring),box-shadow .16s ease}
.tf-addb:active{transform:scale(.95)}
.tf-addb.on{background:var(--ink);box-shadow:none;color:#fff}
.tf-step{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;height:40px;margin-top:8px;border-radius:999px;background:var(--ink);color:#fff}
.tf-step button{display:grid;place-items:center;height:40px;padding:0;border:0;border-radius:999px;background:transparent;color:#fff;cursor:pointer;touch-action:manipulation}
.tf-step button:disabled{opacity:.35;cursor:not-allowed}
.tf-step button:focus-visible{outline:3px solid var(--ichigo);outline-offset:-3px}
.tf-step b{overflow:hidden;font:800 13.5px/1 var(--round);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.tf-step .imt{display:none}
.tf-gone{display:grid;place-items:center;min-height:40px;margin-top:8px;border-radius:999px;background:var(--bg);color:var(--ink-2);font-size:12px;font-weight:700;text-align:center}
@container (min-width:200px){.tf-step .imt{display:inline}}
/* Schmale Kacheln: Name zweizeilig, getrennt nur an Wortgrenzen/Bindestrichen (nicht mitten im Wort) */
@container (max-width:118px){.tf-tile:not(.is-shop) .tf-name{display:-webkit-box;min-height:2.5em;white-space:normal;overflow-wrap:break-word;hyphens:auto;text-wrap:balance;-webkit-line-clamp:2;-webkit-box-orient:vertical}.tf-step{grid-template-columns:34px minmax(0,1fr) 34px}}
/* „Guthabenwert“ in 12 px braucht fast die ganze Zeile – das Deko-Zeichen 査定 weicht vorher (販売 neben „Endpreis“ passt länger) */
@container (max-width:115px){.tf-tile.give .tf-k .jp{display:none}}
@container (max-width:104px){.tf-name{font-size:12.5px}.tf-price{font-size:16px}.tf-tile.get .tf-price{font-size:16.5px}.tf-addb{font-size:12.5px}}
@container (max-width:90px){.tf-addb span,.tf-k .jp{display:none}}

/* ------------------------------------------------ Unser Angebot als Schaufenster: leise, aber begehrenswert
   Kachel liegt etwas höher (weicher Tintenschatten), Bild steckt wie in einer Hülle (helle Innenkante + Glanzecke);
   eine Glanzlinie zieht einmal übers Bild, wenn die Kachel ins Bild kommt (trade-fx.js setzt .shine) und beim Hover;
   Holo/Reverse/Alt-Art/Parallel schimmern unter der Maus (--mx/--my aus trade-fx.js). Links („Deine Karten“) bleibt ruhig. */
.tf-tile.get{box-shadow:0 0 0 1px rgba(30,27,57,.035),0 1px 0 rgba(30,27,57,.05),0 14px 24px -14px rgba(30,27,57,.38)}
.tf-tile.get.on{box-shadow:0 0 0 2.5px var(--ichigo),0 14px 24px -14px rgba(30,27,57,.42)}
.tf-tile.get.off{box-shadow:0 1px 0 rgba(30,27,57,.05),0 8px 16px -12px rgba(30,27,57,.3)}
.tf-tile.get:not(.is-shop) .tf-img{box-shadow:0 0 0 1px rgba(30,27,57,.1),0 6px 12px -8px rgba(30,27,57,.45)}
.tf-tile.get .tf-img::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 0 0 2.5px rgba(30,27,57,.06);background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 28%)}
.tf-tile.get.is-shop .tf-img::after{background:none;box-shadow:none}
.tf-tile.get .tf-img>span:not(.tf-sheen):not(.tf-holo){z-index:2}
.tf-sheen,.tf-holo{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:inherit;pointer-events:none}
.tf-sheen::before{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:42%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5) 50%,rgba(255,255,255,0));opacity:0;transform:translateX(-130%) skewX(-16deg)}
.tf-holo{opacity:0;background-image:radial-gradient(circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.55),transparent 46%),linear-gradient(115deg,#FFC8D5 0%,#FFF0B8 22%,#C4EFDC 44%,#CDE4FF 66%,#DCD2FF 88%,#FFC8D5 100%);background-size:100% 100%,240% 240%;background-position:center,var(--mx,50%) var(--my,50%);mix-blend-mode:soft-light;transition:opacity .3s ease}
/* „Neu“ (echtes Eingangsdatum ≤ 7 Tage): kleiner Sticker auf der Kachel-Ecke, ragt über den Rand und lässt Bild und
   Versions-Pille frei; liegt die Karte im Tausch, gehört die Ecke dem Häkchen (JS lässt ihn dann weg) */
.tf-new{position:absolute;right:-5px;top:-9px;z-index:3;padding:2px 7px;border-radius:999px;background:var(--ink);color:#fff;font:800 12px/1.2 var(--round);letter-spacing:.02em;box-shadow:0 0 0 2px #fff,0 4px 8px -4px rgba(30,27,57,.5);rotate:6deg;pointer-events:none}
/* „letztes Stück“: kleine Butter-Pille unten links statt Banderole quer über das Motiv (nur echter Bestand = 1) */
.tf-last{position:absolute;left:5px;bottom:5px;max-width:calc(100% - 10px);overflow:hidden;padding:2px 7px;border-radius:999px;background:var(--butter);color:var(--butter-ink);box-shadow:0 0 0 1px var(--butter-2);font:800 12px/1.2 var(--round);white-space:nowrap;text-overflow:ellipsis}
.tf-img:has(.tf-wm) .tf-last{bottom:30px}
/* Symbolbild (SAMPLE-Aufdruck): Bild leicht gedämpft, Hinweis als helle, leise Pille links unten */
.tf-tile.is-wm .tf-img img{filter:saturate(.82) contrast(.9) brightness(.97)}
.tf-img .tf-wm{left:5px;bottom:5px;padding:2px 7px;translate:none;background:rgba(255,255,255,.9);color:var(--ink-2);box-shadow:0 0 0 1px rgba(30,27,57,.1);font-weight:650;line-height:1.2}
/* Echtes Foto (Scan der Karte, die man bekommt) statt Katalogbild: Tinten-Pille unten rechts; Rückseite per Tippen auf
   die Pille, mit Maus beim Darüberfahren (blendet weich über, Vorderseite bleibt sonst stehen) */
.tf-img .tf-back{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .2s var(--ease-out)}
.tf-tile.show-back .tf-img .tf-back{opacity:1}
.tf-real{position:absolute;right:5px;bottom:5px;z-index:3;display:inline-flex;align-items:center;gap:4px;max-width:calc(100% - 10px);height:26px;padding:0 8px;border:0;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(30,27,57,.12);color:var(--ink);font:700 12px/1 var(--sans);white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:background-color .16s ease,color .16s ease,transform .16s var(--ease-out)}
.tf-real span{overflow:hidden;text-overflow:ellipsis}
.tf-real:disabled{cursor:default}
.tf-real:not(:disabled):active{transform:scale(.94)}
.tf-real:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.tf-tile.show-back .tf-real{background:var(--ink);box-shadow:none;color:#fff}
.tf-img:has(.tf-real) .tf-last,.tf-img:has(.tf-real) .tf-wm{bottom:36px}
@container (max-width:132px){.tf-real svg{display:none}.tf-real{padding:0 7px}}
@container (max-width:96px){.tf-real span{display:none}.tf-real svg{display:block}}
@media (hover:hover) and (pointer:fine){.tf-tile.has-back .tf-img:has(.tf-real:hover) .tf-back{opacity:1}}
@media (prefers-reduced-motion:reduce){.tf-img .tf-back,.tf-real{transition:none}}
/* Preis: Label leiser, Betrag etwas kräftiger */
.tf-tile.get .tf-k{color:var(--ink-3);font-weight:620}
.tf-tile.get .tf-k .jp{color:var(--sakura-ink)}
.tf-tile.get .tf-price{margin-top:1px;font-size:18px;letter-spacing:-.025em}
/* Druck + Fokus: ganze Kachel */
.tf-tile.get:not(.off):active{transform:scale(.98);transition-duration:.16s}
.tf-tile.get:not(.on):has(:focus-visible){box-shadow:0 0 0 2.5px var(--ink),0 14px 24px -14px rgba(30,27,57,.38)}

/* ------------------------------------------------ Tauschschein: klebt zwischen beiden Katalogen */
/* Nie höher als das Fenster: der Hebel bleibt immer sichtbar; wird es eng, rollt nur der obere Teil des Scheins */
.tf-rail{--rt:34px;grid-row:1;grid-column:2;position:sticky;top:calc(var(--stick) + var(--rt));z-index:6;display:flex;flex-direction:column;max-height:calc(100vh - var(--stick) - var(--rt) - 14px);max-height:calc(100dvh - var(--stick) - var(--rt) - 14px);margin-top:24px}
.tf-ticket{position:relative;z-index:1;display:flex;flex-direction:column;min-height:0;filter:drop-shadow(0 20px 22px rgba(30,27,57,.16)) drop-shadow(0 2px 2px rgba(30,27,57,.07))}
.tk-body{position:relative;flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;padding:12px 12px 14px;border-radius:26px 26px 0 0;background:#fff;-webkit-mask:radial-gradient(circle at 0 100%,transparent 13px,#000 13.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent 13px,#000 13.5px) right/51% 100% no-repeat;mask:radial-gradient(circle at 0 100%,transparent 13px,#000 13.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent 13px,#000 13.5px) right/51% 100% no-repeat}
.tk-head{display:flex;align-items:center;gap:8px;min-height:30px;padding:0 60px 0 2px}
.tk-no{flex:none;display:grid;place-items:center;height:24px;padding:0 8px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink);font-size:12px;letter-spacing:.08em}
.tk-title{font:800 15.5px/1.2 var(--round);letter-spacing:-.01em;white-space:nowrap}
.tk-tip{margin:4px 2px 0;color:var(--ink-3);font-size:12px;font-weight:600;line-height:1.35}
.tf-rail:not(.idle) .tk-tip{display:none}
.tf-side{position:relative;display:flex;flex-direction:column;min-width:0;margin-top:10px;padding:10px 12px 11px;border-radius:18px;background:var(--mint);color:var(--mint-ink)}
.tf-side.get{margin-top:8px;background:var(--sakura);color:var(--sakura-ink)}
.tf-side-head{display:flex;align-items:center;gap:7px;min-height:24px;color:var(--ink);font-size:13.5px;font-weight:760}
.tf-tag{display:grid;place-items:center;height:22px;padding:0 8px;border-radius:999px;background:#fff;color:var(--mint-ink);font-size:12px}
.tf-side.get .tf-tag{color:var(--sakura-ink)}
.tf-side-head>span{white-space:nowrap}
.tf-edit{position:relative;flex:none;display:grid;place-items:center;width:28px;height:28px;margin:-2px -4px -2px auto;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;transition:background-color .16s ease,color .16s ease,transform .16s var(--ease-out)}
.tf-edit.hidden{display:none}
.tf-edit:active{transform:scale(.92)}
.tf-edit::after{content:"";position:absolute;inset:-8px}
.tf-amt{display:flex;margin:4px 0 1px;font:800 30px/1.08 var(--round);letter-spacing:-.03em;white-space:nowrap}
.tf-subl{font-size:12px;font-weight:620;line-height:1.35}
.tf-side.give .tf-subl{color:#1F4A3A}.tf-side.get .tf-subl{color:#5E2138}
.tf-thumbs{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:6px;min-height:56px;padding-top:9px}
.tf-thumb{position:relative;flex:none;width:34px;height:47px;padding:0;border:0;border-radius:5px;background:#fff;box-shadow:0 0 0 2px #fff,0 6px 10px -6px rgba(30,27,57,.6);cursor:pointer;transition:transform .22s var(--ease-out),opacity .12s ease}
.tf-thumb img{width:100%;height:100%;border-radius:5px;object-fit:cover}
.tf-thumb.is-shop img{object-fit:contain;padding:2px}
.tf-thumb .bulk-ico{width:100%;height:100%;border-radius:5px;font-size:12px}
.tf-thumb b{position:absolute;left:-6px;bottom:-6px;min-width:20px;height:18px;padding:0 4px;border-radius:999px;background:var(--ink);color:#fff;font:800 12px/18px var(--round);text-align:center}
.tf-thumb.bad{box-shadow:0 0 0 2px var(--red)}
.tf-thumb.wait{opacity:0}
.tf-more-th{flex:none;align-self:center;height:28px;padding:0 9px;border:0;border-radius:999px;background:#fff;color:inherit;font:800 12px/28px var(--round);cursor:pointer}
.tf-empty{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:47px;padding:4px 8px;border:2px dashed;border-radius:12px;background:rgba(255,255,255,.5);font-size:12px;font-weight:720;line-height:1.25;text-align:center}
.tf-side.give .tf-empty{border-color:rgba(10,99,64,.3)}.tf-side.get .tf-empty{border-color:rgba(140,29,69,.28)}
.tf-empty i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff}
.tk-mid{position:relative;z-index:2;height:0}
.tf-swap{position:absolute;right:14px;top:-15px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 0 0 4px #fff;rotate:var(--flip,0deg);transition:rotate .45s var(--ease-out)}
/* Waage 渡す ◀▶ もらう: nur transform; --m = Anteil deiner Seite (JS) */
.tf-meter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;margin:12px 2px 2px;font:800 12px/1 var(--round);letter-spacing:.06em}
.tf-meter .ml{color:var(--mint-ink)}.tf-meter .mr{color:var(--sakura-ink)}
.tf-scale{position:relative;height:10px;border-radius:999px;background:var(--sakura-2);box-shadow:inset 0 0 0 1.5px rgba(140,29,69,.14);container-type:inline-size}
.tf-scale i{position:absolute;inset:0;border-radius:999px;background:var(--mint-2);box-shadow:inset 0 0 0 1.5px rgba(10,99,64,.18);transform-origin:left center;transform:scaleX(var(--m,.5));transition:transform .45s var(--ease-out)}
.tf-scale b{position:absolute;left:-10px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--butter-2);box-shadow:0 0 0 3px #fff,0 4px 8px -3px rgba(30,27,57,.4);transform:translateX(calc(var(--m,.5) * 100cqw));transition:transform .45s var(--ease-out),background-color .2s ease}
.tf-rail.idle .tf-scale{background:var(--line);box-shadow:none}
.tf-rail.idle .tf-scale i{background:var(--line-2);box-shadow:none}
.tf-rail.idle .tf-scale b{background:var(--line-2)}
.tk-body::-webkit-scrollbar{display:none}
.tk-stubwrap{position:relative;flex:none}
.tk-stub{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 16px 18px;border-radius:0 0 26px 26px;background:var(--ink);color:#fff;-webkit-mask:radial-gradient(circle at 0 0,transparent 13px,#000 13.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent 13px,#000 13.5px) right/51% 100% no-repeat;mask:radial-gradient(circle at 0 0,transparent 13px,#000 13.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent 13px,#000 13.5px) right/51% 100% no-repeat}
.tk-stub::before{content:"";position:absolute;left:22px;right:22px;top:0;border-top:2px dashed rgba(255,255,255,.22)}
.stub-h{display:flex;align-items:center;gap:9px;min-height:22px;padding-right:56px;color:#C9C6E0;font-size:12.5px;font-weight:700}
.stub-h .jp{flex:none;display:grid;place-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--butter-2);color:var(--ink);font-size:12px;white-space:nowrap}
.tf-result{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:100px}
.tf-result .r-hint{margin:0;color:#fff;font:800 16px/1.38 var(--round);letter-spacing:-.005em;text-wrap:balance}
.tf-result .r-hint a{color:var(--butter-2);text-underline-offset:3px}
.tf-result .r-a,.tf-result .r-b{display:block;color:#DCDAEA;font-size:14px;font-weight:720}
.tf-result .r-v{display:flex;margin:1px 0;font:900 36px/1.08 var(--round);letter-spacing:-.035em;white-space:nowrap;transform-origin:left center}
.tf-result[data-k=pos] .r-v{color:var(--mint-2)}
.tf-result[data-k=neg] .r-v{color:var(--butter-2)}
.tf-result .r-w{display:block;color:#DCDAEA;font-size:12px;font-weight:620}
.tf-result .r-w:empty{display:none}
.tf-result .r-foot{display:block;margin-top:6px;color:#C9C6E0;font-size:12px;font-weight:560;line-height:1.45}
.tf-result .r-foot:empty{display:none}
.tf-result[data-k=hint] :is(.r-a,.r-v,.r-b,.r-w){display:none}
.tf-result:not([data-k=hint]) .r-hint{display:none}
.tk-stub :focus-visible,.tf-dock :focus-visible{outline-color:#fff}
/* Ton-Schalter (aus ab Werk) – oben neben „Tauschen“ */
.tf-snd{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;height:40px;margin-bottom:4px;padding:0 13px 0 11px;border:0;border-radius:999px;background:#fff;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line-2);font:720 13px/1 var(--sans);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s var(--ease-out)}
.tf-snd:active{transform:scale(.95)}
.tf-snd .on-i{display:none}
.tf-snd[aria-pressed=true]{background:var(--butter-2);color:var(--ink);box-shadow:none}
.tf-snd[aria-pressed=true] .on-i{display:block}
.tf-snd[aria-pressed=true] .off-i{display:none}
/* Hebel-Knopf: fester Druckpunkt wie ein Automatenknopf */
.tf-lever{--b-bg:var(--ichigo);--b-sh:inset 0 1px 0 rgba(255,255,255,.3),0 5px 0 var(--ichigo-deep),0 16px 22px -12px rgba(0,0,0,.55);justify-content:space-between;width:100%;height:56px;padding:0 8px 0 22px;font-size:16px;transition:transform .12s var(--ease-out),box-shadow .12s var(--ease-out),background-color .16s ease}
.tf-lever .knob{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--butter-2);color:var(--ink);box-shadow:inset 0 -3px 0 rgba(94,74,0,.22),0 0 0 2px rgba(255,255,255,.4);transition:transform .22s var(--spring),background-color .2s ease,color .2s ease}
.tf-lever:not(.is-disabled):active{transform:translateY(4px);--b-sh:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 var(--ichigo-deep),0 6px 10px -8px rgba(0,0,0,.5)}
.tf-lever:not(.is-disabled):active .knob{transform:translateY(2px) rotate(22deg)}
/* Gesperrt: bleibt anklickbar, damit ein Hinweis sagen kann, was fehlt (JS verhindert den Sprung zur Kasse) */
.tf-lever.is-disabled{--b-bg:#45425F;--b-fg:#D4D1E6;--b-sh:inset 0 1px 0 rgba(255,255,255,.08),0 5px 0 #2A2742,0 16px 22px -14px rgba(0,0,0,.5);pointer-events:auto}
.tf-lever.is-disabled .knob{background:rgba(255,255,255,.12);color:#C9C6E0;box-shadow:none}
.tf-lever.is-disabled:active{transform:none}
/* Hanko: stempelt rechts auf die Perforation, sobald der Tausch steht */
.tf-hanko{position:absolute;right:12px;top:-13px;z-index:4;display:grid;place-items:center;width:62px;height:62px;border:2.5px solid var(--ichigo);border-radius:50%;background:rgba(255,255,255,.96);color:var(--ichigo);font:900 12.5px/1.05 var(--round);letter-spacing:.02em;text-align:center;rotate:-14deg;pointer-events:none;box-shadow:0 6px 14px -8px rgba(140,29,69,.55);opacity:0;scale:.6;transition:opacity .2s ease,scale .3s var(--spring)}
.tf-hanko::before{content:"";position:absolute;inset:4px;border:1.5px solid rgba(207,46,102,.6);border-radius:50%}
.tf-hanko small{display:block;margin-top:2px;font:800 7.5px/1 var(--sans);letter-spacing:.1em}
.tf-rail.ok .tf-hanko{opacity:1;scale:1}
/* Gans auf dem Schein mit Sprechblase */
.tf-perch{position:absolute;right:8px;top:-34px;z-index:7;width:58px;pointer-events:none}
.tf-perch .goose{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 10px rgba(30,27,57,.16))}
.tf-bubble{position:absolute;right:100%;top:6px;margin-right:4px;padding:7px 10px;border-radius:14px;background:#fff;box-shadow:var(--sh-1),inset 0 0 0 1.5px var(--ink);font:800 12px/1 var(--round);letter-spacing:.02em;white-space:nowrap;opacity:0;transform:translateX(6px) scale(.94);transform-origin:right center;transition:opacity .18s ease,transform .22s var(--ease-out)}
.tf-bubble.on{opacity:1;transform:none}
.tf-bubble::after{content:"";position:absolute;right:-6px;top:50%;width:10px;height:10px;margin-top:-5px;background:#fff;border-top:1.5px solid var(--ink);border-right:1.5px solid var(--ink);transform:rotate(45deg)}
.tf-bubble em{font-style:normal;color:var(--ichigo)}
/* Lauflichter: leuchten ruhig, sobald der Tausch steht; laufen nur kurz (4 Runden) beim Bereit- und Jackpot-Moment */
.tf-lights{position:absolute;left:-11px;top:-11px;z-index:0;overflow:visible;pointer-events:none;opacity:0;transition:opacity .25s ease}
.tf-rail.ok .tf-lights{opacity:1}
.tf-lights rect{fill:none;stroke-linecap:round}
.tf-lights .lo{stroke:#E6DCCB;stroke-width:6}
.tf-lights .lp .a{stroke:#E0B63A;stroke-width:8.5}
.tf-lights .lp .b{stroke:var(--butter-2);stroke-width:6}
.tf-lights .lp{opacity:0}
.tf-rail.ok .tf-lights .lp{opacity:1}
/* Walzen-Zähler (JS baut die Ziffern; das Ziffernband ist Pseudo-Inhalt, gelesen wird nur der .sr-only-Text) */
.roll{font-variant-numeric:tabular-nums}
.rw{display:inline-flex;-webkit-user-select:none;user-select:none}
.rd{display:inline-block;width:1ch;height:1.08em;overflow:hidden;text-align:center;-webkit-mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
.rs{display:block;line-height:1.08em;white-space:pre}
.rs::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"}
.rc{display:inline-block;height:1.08em;line-height:1.08em;white-space:pre}
/* Flug- und Funken-Ebenen */
.tf-fly{position:fixed;left:0;top:0;z-index:90;border-radius:8px;background:#fff center/cover no-repeat;box-shadow:0 0 0 3px #fff,0 20px 30px -12px rgba(30,27,57,.6);pointer-events:none}
.tf-fly.is-shop{background-size:contain}
.tf-fx{position:fixed;left:0;top:0;z-index:92;width:0;height:0;pointer-events:none}
.tf-spark{position:absolute;left:-11px;top:-11px;width:var(--s,22px);height:var(--s,22px)}
.tf-spark svg{width:100%;height:100%;overflow:visible}

/* ------------------------------------------------ So läuft der Tausch + Recht */
.tf-how-wrap{margin-top:96px}
.tf-how-wrap h2{margin:0 0 34px;font-family:var(--round);font-weight:800;font-size:clamp(30px,3.2vw,46px);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.tf-how-wrap h2 .hk{display:inline-grid;place-items:center;margin-left:.32em;padding:5px 8px 4px;border:2px solid currentColor;border-radius:8px;color:var(--sakura-ink);font:800 13px/1 var(--round);letter-spacing:.06em;vertical-align:.42em;rotate:-6deg;white-space:nowrap}
.tf-how{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.tf-how::before{content:"";position:absolute;left:8%;right:8%;top:37px;border-top:2px dashed var(--line-2)}
.tf-how li{position:relative;padding:0 8px}
.tf-how b{--st:var(--mint);--st2:var(--mint-2);position:relative;display:grid;place-items:center;width:74px;height:74px;margin-bottom:22px;border-radius:50%;background:var(--st);box-shadow:inset 0 0 0 6px #fff,0 0 0 1.5px var(--st2);color:var(--ink)}
.tf-how b i{position:absolute;right:-4px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 0 0 3px #fff;font:800 13px/28px var(--round);font-style:normal;text-align:center}
.tf-how li:nth-child(2) b{--st:var(--butter);--st2:var(--butter-2)}.tf-how li:nth-child(3) b{--st:var(--lav);--st2:var(--lav-2)}.tf-how li:nth-child(4) b{--st:var(--sakura);--st2:var(--sakura-2)}
.tf-how p{max-width:34ch;margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.tf-how strong{color:var(--ink);font:800 19px/1.25 var(--round);letter-spacing:-.01em}
.tf-note{display:flex;align-items:flex-start;gap:12px;margin:28px 0 0;padding:18px 22px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-2);font-size:14px;font-weight:540;line-height:1.55}
.tf-note svg{flex:none;margin-top:2px;color:var(--lav-ink)}
.tf-note a{font-weight:700}

/* Hinweise links unten, damit sie den Schein samt Knopf nie verdecken */
@media (min-width:901px){.tf-page .toasts{left:24px;align-items:flex-start;max-width:min(480px,calc(100vw - 48px));transform:none}}

/* Umschalter + Leiste nur am Handy */
.tf-tabs,.tf-dock{display:none}

@media (hover:hover) and (pointer:fine){
  .tf-tile:not(.off):hover{transform:translateY(-3px)}
  .tf-tile:not(.off):hover .tf-img img{transform:scale(1.04) rotate(-1deg)}
  .tf-addb:not(.on):hover{background:var(--ichigo);box-shadow:none;color:#fff}
  .tf-chips button:not(.on):hover,.tf-sort:hover,.tf-filter select:hover,.tf-cat:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
  .tf-kinds button:not(.on):hover{background:var(--bg)}
  .tf-thumb:hover{transform:translateY(-4px) rotate(-3deg)}
  .tf-edit:hover,.tf-more-th:hover{background:var(--ink);color:#fff}
  .tf-more:hover,.tf-fill-go:hover{background:var(--ink);color:#fff}
  .tf-fill-go:hover svg{transform:translateX(3px)}
  .tf-step button:not(:disabled):hover{background:rgba(255,255,255,.14)}
  .tf-snd:hover{background:var(--bg-2);color:var(--ink)}
  .tf-snd[aria-pressed=true]:hover{background:#FFE9A1;color:var(--ink)}
  .tf-lever:not(.is-disabled):hover{--b-bg:var(--ichigo-hover)}
  .tf-lever:not(.is-disabled):hover .knob{transform:rotate(-12deg)}
  .tf-lever:not(.is-disabled):active .knob{transform:translateY(2px) rotate(22deg)}
  .tf-result .r-hint a:hover{color:#fff}
  /* Unser Angebot: anheben mit weicherem, längerem Schatten; Bild-Zoom ruhig (1,03, ohne Drehung) */
  .tf-tile.get:not(.off):hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(30,27,57,.04),0 1px 0 rgba(30,27,57,.04),0 24px 34px -18px rgba(30,27,57,.46)}
  .tf-tile.get.on:not(.off):hover{box-shadow:0 0 0 2.5px var(--ichigo),0 24px 34px -18px rgba(30,27,57,.46)}
  .tf-tile.get:not(.on):not(.off):hover:has(:focus-visible){box-shadow:0 0 0 2.5px var(--ink),0 24px 34px -18px rgba(30,27,57,.46)}
  .tf-tile.get:not(.off):hover .tf-img img{transform:scale(1.03)}
  .tf-tile.get:not(.off):hover:active{transform:translateY(-1px) scale(.98)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .tf-tile.get:not(.off):hover .tf-sheen::before{animation:tf-sheen-h .6s cubic-bezier(.4,0,.2,1)}
  .tf-tile.fx-holo.holo-on .tf-holo{opacity:.32}
}
@media (prefers-reduced-motion:no-preference){
  @keyframes tf-chase{0%{opacity:1}33.33%{opacity:0}100%{opacity:0}}
  .tf-rail.ok.chase .tf-lights .lp{animation:tf-chase .6s steps(1,end) 4}
  .tf-rail.ok.chase .tf-lights .p1{animation-delay:-.2s}.tf-rail.ok.chase .tf-lights .p2{animation-delay:-.4s}
  .tf-rail.stamping .tf-hanko{animation:tf-hanko .46s cubic-bezier(.2,1.4,.45,1) both}
  @keyframes tf-hanko{from{opacity:0;scale:1.8;rotate:-36deg}60%{opacity:1}}
  .tf-rail.ready .tf-ticket{animation:tf-bump .42s var(--ease-out)}
  @keyframes tf-bump{35%{transform:scale(1.018)}}
  .tf-rail.win .tf-perch{animation:tf-hop .62s var(--spring)}
  @keyframes tf-hop{40%{transform:translate(-6px,-16px) rotate(-8deg)}}
  .tf-rail.win .tf-result .r-v,.tf-dock.win .r-v{animation:tf-win .5s var(--ease-out)}
  @keyframes tf-win{30%{scale:1.12}}
  .tf-thumb.land,.tf-more-th.land{animation:tf-land .3s var(--spring)}
  @keyframes tf-land{from{scale:1.22}}
  .tf-tabs button.land{animation:tf-seg .3s var(--ease-out)}
  @keyframes tf-seg{40%{transform:scale(1.04)}}
  /* Lidschlag: zwei kurze Blinzler, wenn die Gans spricht (Laden, jede Änderung am Tausch; trade-fx.js setzt .blink neu) –
     keine Endlos-Animation im Leerlauf (eigener Name – app.css' "blink" ist der 0,45-s-Hover-Blinzler) */
  .tf-perch.blink .goose .eye{animation:tf-eye-blink 3s 2}
  @keyframes tf-eye-blink{0%,44%,52%,100%{transform:scaleY(1)}48%{transform:scaleY(.12)}}
  /* Schritte stempeln sich nacheinander ein (trade-fx.js setzt arm → play, sobald sie ins Bild kommen) */
  .tf-how.arm li{opacity:0}
  .tf-how.play li{animation:tf-stepin .5s var(--ease-out) both;animation-delay:calc(var(--i) * 110ms)}
  .tf-how.play b{animation:tf-stampin .5s cubic-bezier(.2,1.5,.45,1) both;animation-delay:calc(var(--i) * 110ms + 60ms)}
  @keyframes tf-stepin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes tf-stampin{from{scale:1.5;rotate:-18deg;opacity:0}}
  /* Glanzlinie: einmal beim ersten Erscheinen (gestaffelt über --sd), Hover-Fassung mit eigenem Namen (startet neu) */
  .tf-tile.get.shine .tf-sheen::before{animation:tf-sheen .6s cubic-bezier(.4,0,.2,1) var(--sd,0ms) both}
  @keyframes tf-sheen{0%{opacity:1;transform:translateX(-130%) skewX(-16deg)}80%{opacity:1}100%{opacity:0;transform:translateX(300%) skewX(-16deg)}}
  @keyframes tf-sheen-h{0%{opacity:1;transform:translateX(-130%) skewX(-16deg)}80%{opacity:1}100%{opacity:0;transform:translateX(300%) skewX(-16deg)}}
}

/* ------------------------------------------------ Responsiv */
@media (max-width:1359px){.tf-board{--tk:244px}}
@media (max-width:1199px){
  .tf-board{--tk:228px}
  .tf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tf-filter{grid-template-columns:1fr 1fr}
  .tf-filter .tf-q{grid-column:1/-1}
  .tf-amt{font-size:26px}
  .tf-result .r-v{font-size:31px}
  .tf-lever{padding-left:16px;font-size:15px;gap:6px}
  .tf-lever .knob{width:36px;height:36px}
  .stub-h{gap:7px;padding-right:50px}
  /* schmaler Schein (228 px): nichts liegt übereinander */
  .tf-side-head{gap:6px}
  .tf-edit{width:26px;height:26px}
  .tf-hanko{right:10px;width:54px;height:54px;font-size:12px}
  .tf-how{grid-template-columns:1fr 1fr;row-gap:30px}
  .tf-how::before{display:none}
  .tf-chips{flex-wrap:nowrap;margin:0 -12px 10px;padding:2px 12px 4px;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 20px),transparent);mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 20px),transparent)}
  .tf-chips::-webkit-scrollbar{display:none}
}
/* 901–1199 px (z. B. 1024 × 768): drei schmale Spalten – Kataloge etwas enger gerahmt, damit die Kacheln Luft bekommen;
   im 228-px-Schein weicht das Plus-Symbol, damit „Wähl unsere Karten aus“ auf eine Zeile passt */
@media (min-width:901px) and (max-width:1199px){
  .tf-board{gap:0 10px}
  .tf-panel{padding-left:8px;padding-right:8px}
  .tf-panel-head{margin-left:2px;margin-right:2px}
  .tf-chips{margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px}
  .tf-grid{gap:7px}
  .tf-empty{padding:4px 6px}
  .tf-empty i{display:none}
}
/* Niedrige Fenster: der Schein wird kompakter, damit er samt Knopf ganz sichtbar bleibt */
@media (min-width:901px) and (max-height:960px){
  .tf-rail{--rt:30px}
  .tk-tip,.tf-subl{display:none}
  .tf-thumbs{min-height:52px;padding-top:6px}
  .tf-side{padding:9px 11px 10px}
  .tf-amt{font-size:28px}
  .tf-result{min-height:84px}
  .tf-result .r-foot{margin-top:4px}
  .tk-body{padding:10px 12px 12px}
  .tf-meter{margin-top:6px}
  .tk-stub{gap:6px;padding:12px 16px 14px}
  .tf-lever{height:52px}
}
@media (min-width:901px) and (max-height:800px){
  .tf-top{padding:10px 0 8px}
  .tf-rail{--rt:26px;margin-top:18px}
  .tf-meter{display:none}
  .tk-body{padding:8px 10px 10px}
  .tk-head{min-height:26px}
  .tf-side{margin-top:6px;padding:8px 10px 9px}
  .tf-thumbs{min-height:48px}
  .tf-thumb{width:32px;height:44px}
  .tf-empty{min-height:44px}
  .tf-amt{font-size:24px}
  .tf-result{min-height:66px}
  .tf-result .r-v{font-size:28px}
  .tf-result .r-hint{font-size:15px}
  .tk-stub{gap:6px;padding:12px 14px 14px}
  .tf-lever{height:50px}
  .tf-lever .knob{width:36px;height:36px}
  .tf-perch{top:-26px;width:50px}
}
/* Sehr niedrige Fenster (1366 × 650, 1280 × 600): Kopfzeile und Gans ruhen, Ablagen kleiner – Summen, Differenz und Hebel bleiben ganz */
@media (min-width:901px) and (max-height:720px){
  .tf-rail{--rt:18px}
  .tk-head,.tf-perch{display:none}
  .tf-side{margin-top:0}
  .tf-side.get{margin-top:6px}
  .tf-side-head{min-height:22px}
  .tf-thumbs{min-height:40px;padding-top:5px;gap:6px}
  .tf-thumb{width:27px;height:37px}
  .tf-empty{min-height:36px;padding:2px 6px;font-size:12px}
  .tf-empty i{width:20px;height:20px}
  .tf-amt{font-size:22px}
  .tk-stub{gap:6px;padding:10px 14px 14px}
  .tf-result{min-height:56px}
  .tf-result .r-v{font-size:25px}
  .tf-result .r-a,.tf-result .r-b{font-size:13px}
  .tf-lever{height:46px}
}
@media (min-width:901px) and (max-height:450px){.tf-rail{top:12px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}}

@media (max-width:900px){
  .tf{padding-bottom:40px}
  .tf-top{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 0 12px}
  .tf-top::before{inset:-10px -16px -30px}
  .tf-h1row{justify-content:space-between}
  .tf-board{--bw:calc(100% - 32px);display:block}
  .tf-rail{display:none}
  /* Umschalter mit Summen, klebt unter dem Kopf */
  .tf-tabs{position:sticky;top:var(--stick);z-index:30;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px;margin:0 -4px 10px;padding:4px;border-radius:22px;background:#fff;box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
  .tf-tabs button{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-width:0;min-height:52px;padding:5px 12px;border:0;border-radius:18px;background:transparent;color:var(--ink-2);text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:background-color .2s ease,color .2s ease}
  .tf-tabs button:nth-child(2){padding-left:20px}
  .tf-tabs .sl{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:720;line-height:1.2;white-space:nowrap}
  .tf-tabs .n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bg);color:var(--ink);font:800 12px/20px var(--round);text-align:center}
  .tf-tabs .n:empty{display:none}
  .tf-tabs .st{display:flex;font:800 18px/1.08 var(--round);letter-spacing:-.02em;white-space:nowrap}
  .tf-tabs [data-tf-tab=give] .st{color:var(--mint-ink)}
  .tf-tabs [data-tf-tab=get] .st{color:var(--sakura-ink)}
  .tf-tabs button[data-tf-tab=give].on{background:var(--mint);color:var(--mint-ink)}
  .tf-tabs button[data-tf-tab=get].on{background:var(--sakura);color:var(--sakura-ink)}
  .tf-tabs button.on .n{background:#fff}
  .tf-tabs-swap{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 0 0 3px #fff;pointer-events:none}
  .tf-panel{display:none;padding:14px 10px 18px;border-radius:24px}
  .tf-panel.active{display:block}
  .tf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tf-chips{margin:0 -10px 10px;padding:2px 10px 4px}
  .tf-how-wrap{margin-top:72px}
  /* Leiste unten: Differenz + Hebel; Tipp auf die Differenz öffnet die ganze Tausch-Liste */
  .tf-dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:block}
  .dk{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px 10px calc(14px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;background:var(--ink);color:#fff;box-shadow:0 -14px 30px -14px rgba(30,27,57,.5)}
  .dk::before,.dk::after{content:"";position:absolute;left:20px;right:20px;top:-2px;height:8px;background:radial-gradient(circle,var(--butter-2) 2.6px,transparent 3.2px) 0 50%/14px 8px repeat-x;opacity:0;pointer-events:none;transition:opacity .25s ease}
  .dk::after{background-position:7px 50%}
  .tf-dock.ok .dk::before{opacity:1}
  .tf-dres{display:flex;align-items:center;gap:6px;min-width:0;min-height:48px;padding:0 4px 0 2px;border:0;border-radius:16px;background:transparent;color:#DCDAEA;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
  .tf-dres:active{background:rgba(255,255,255,.08)}
  .tf-dres .dst{position:relative;flex:none;display:grid;place-items:center;width:34px;height:40px;border-radius:9px;background:rgba(255,255,255,.12)}
  .tf-dres .dst b{position:absolute;right:-6px;top:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--ichigo);color:#fff;font:800 12px/20px var(--round);text-align:center}
  .tf-dres .dst b:empty{display:none}
  /* Satz senkrecht wie im Schein: „Du bekommst / 12,34 € / Guthaben“ – passt auch bei 360 px */
  .tf-dres .dt{flex:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0;overflow:hidden;container-type:inline-size}
  .tf-dres .r-hint{display:-webkit-box;margin:0;overflow:hidden;color:#DCDAEA;font:620 12px/1.24 var(--sans);-webkit-line-clamp:3;-webkit-box-orient:vertical}
  .tf-dres .r-a,.tf-dres .r-b{max-width:100%;overflow:hidden;color:#B9B6D3;font-size:12px;font-weight:650;line-height:1.15;white-space:nowrap;text-overflow:ellipsis}
  .tf-dres .r-v{display:flex;font:900 clamp(14px,14.5cqi,20px)/1.08 var(--round);letter-spacing:-.02em;white-space:nowrap;transform-origin:left center}
  .tf-dres .r-w{display:none}
  .tf-dres .dt[data-k=pos] .r-v{color:var(--mint-2)}
  .tf-dres .dt[data-k=neg] .r-v{color:var(--butter-2)}
  .tf-dres .dt[data-k=hint] :is(.r-a,.r-v,.r-b){display:none}
  .tf-dres .dt:not([data-k=hint]) .r-hint{display:none}
  .dk .tf-lever{width:auto;height:50px;padding:0 6px 0 14px;gap:7px;font-size:14.5px}
  .dk .tf-lever .knob{width:36px;height:36px}
  .tf-page .toasts{bottom:96px}
  .tf-page .site-footer{padding-bottom:90px}
  @media (prefers-reduced-motion:no-preference){
    .tf-dock.ok.chase .dk::before{animation:tf-blink .7s steps(1,end) 4}
    .tf-dock.ok.chase .dk::after{animation:tf-blink .7s steps(1,end) 4;animation-delay:-.35s}
    @keyframes tf-blink{0%{opacity:1}50%{opacity:0}}
  }
}
@media (max-width:760px){
  .tf-top h1{font-size:clamp(36px,10vw,46px)}
  .tf-h1jp{font-size:84px}
  /* Handy: Spielleiste liegt direkt darüber – kleiner Vorhalt, Kanji sitzt tiefer hinter „Tauschen“ */
  .tf-h1row{--jp-pad:24px}
  .tf-h1jp{top:calc(var(--jp-pad) - .42em)}
  .tf-lead{font-size:14.5px;line-height:1.48;margin-bottom:10px}
  .tf-facts{flex-wrap:nowrap;margin:0 -16px;padding:0 16px 2px;overflow-x:auto;scrollbar-width:none}
  .tf-facts::-webkit-scrollbar{display:none}
  .tf-panel-head{gap:6px 10px;min-height:0;margin-bottom:10px}
  .tf-hjp{display:none}
  .tf-panel-head h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tf-panel.give .tf-panel-head{display:none}
  .tf-hint{font-size:12px;margin-bottom:10px}
  .tf-kinds button{padding:5px 8px}
  .tf-kinds .t{font-size:13px}
  .tf-how-wrap h2{margin-bottom:24px}
  .tf-how-wrap h2 .hk{padding:4px 7px 3px;font-size:12px}
  .tf-how{grid-template-columns:1fr;gap:26px}
  .tf-how::before{display:block;left:30px;right:auto;top:30px;bottom:30px;border-top:0;border-left:2px dashed var(--line-2)}
  .tf-how li{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:start;gap:4px 16px;padding:0}
  .tf-how b{width:60px;height:60px;margin:0}
  .tf-how b i{width:24px;height:24px;font-size:12px;line-height:24px}
  .tf-how p{margin-top:4px}
  .tf-how strong{font-size:17.5px}
  .tf-note{padding:16px}
}
@media (max-width:600px){
  .tf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tf-tile{padding:6px 6px 8px;border-radius:18px}
  .tf-name{font-size:13.5px}
  .tf-sub{font-size:12px}
  .tf-price{font-size:19px}
  .tf-tile.get .tf-price{font-size:20px}
  .tf-addb{font-size:13.5px}
}
@media (max-width:380px){
  .dk .tf-lever{padding-left:12px;font-size:14px}
  /* 360 px: Platzhalter „… z. B. Glurak 199“ passt ganz, „NM – Wie neu“ nicht unter dem Pfeil */
  .tf-panel{padding-left:8px;padding-right:8px}
  .tf-chips{margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px}
  .tf-q{gap:6px;padding:0 12px}
  .tf-q>svg{width:15px;height:15px}
  .tf-filter select{padding:0 26px 0 12px;background-position:right 10px center;font-stretch:92%}
}
@media (pointer:coarse){.tf-q input,.tf-filter select,.tf-sort{font-size:16px}}
@media (prefers-reduced-motion:reduce){.tf-scale i,.tf-scale b,.tf-hanko,.tf-lights,.tf-swap,.tf-bubble{transition:none}}