/* Startseite (public/home.html) – K1 „Kawaii × Manga“ (freigegebener Entwurf k1-kawaii-manga, 02.10.2026):
   E5 „Seriös-Kawaii“ bleibt die Basis (Bühne mit Kartenfächer, Preisschilder, 買取-Sticker, Verkaufswege, Tauschen mit echtem
   Bestand, Spiele, Preis-Beleg, beliebte Karten mit Preis-Enthüllung 査定表, FAQ, „Wer kauft an“ 安心). Darüber eine Manga-Ebene:
   Kapitel-Etiketten 第…話, Geräusch-Wörter (ドン！ キラッ …), Rasterton in den E5-Pastelltönen, Konzentrationslinien, Koma-Panels
   mit Tusche-Rahmen und schräger Kante, Sprechblasen mit Schwanz. Regel für Formen: nur Manga-Panels sind spitzwinklig, alles
   andere bleibt E5-weich (Pillen, 18–36 px Radien). Logik: js/home.js. Grafiken: public/_home_art.html. System: app.css. */

/* Konzentrationslinien als Masken (generiert von k1gen.py, Scratchpad-Werkzeug des Entwurfs) */
:root{
  --k-focus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M812 512L1260 519L1259 539ZM842 522L1259 541L1258 555ZM839 530L1257 563L1257 571ZM803 540L1254 596L1253 605ZM861 564L1249 628L1247 638ZM843 573L1246 645L1241 670ZM821 585L1238 683L1231 708ZM854 603L1231 707L1228 719ZM794 595L1225 728L1221 741ZM792 616L1210 772L1203 789ZM799 638L1194 810L1186 827ZM773 635L1184 830L1179 841ZM791 664L1165 868L1158 880ZM784 680L1145 902L1138 913ZM788 709L1118 942L1111 952ZM766 715L1098 969L1083 988ZM738 718L1070 1003L1052 1022ZM740 732L1054 1020L1039 1036ZM737 743L1034 1041L1028 1047ZM737 772L1006 1067L992 1079ZM697 759L968 1099L952 1111ZM695 786L934 1124L921 1133ZM690 824L892 1151L878 1159ZM640 771L857 1171L839 1180ZM655 846L821 1189L800 1198ZM624 807L794 1201L775 1208ZM619 815L774 1209L764 1213ZM600 788L759 1214L739 1222ZM596 805L736 1222L722 1227ZM572 798L687 1237L672 1240ZM569 864L654 1244L631 1249ZM539 820L600 1253L585 1255ZM530 870L575 1256L549 1258ZM516 814L546 1259L534 1259ZM506 839L523 1260L505 1260ZM495 800L495 1260L480 1260ZM480 845L469 1259L444 1258ZM461 839L422 1256L403 1254ZM448 800L382 1251L358 1247ZM414 860L335 1242L313 1237ZM410 819L297 1233L288 1230ZM401 788L257 1220L249 1217ZM389 793L237 1213L224 1208ZM387 778L218 1206L208 1202ZM368 801L198 1197L191 1194ZM338 810L153 1176L144 1171ZM338 785L132 1165L119 1158ZM310 815L118 1157L96 1144ZM312 782L81 1134L74 1129ZM311 767L66 1124L56 1117ZM303 743L25 1093L19 1088ZM266 750L-15 1058L-23 1051ZM283 710L-40 1035L-52 1022ZM217 737L-76 995L-90 979ZM240 702L-97 971L-103 962ZM217 693L-121 938L-134 919ZM231 669L-138 914L-150 894ZM175 672L-166 866L-177 846ZM173 648L-190 818L-195 807ZM194 620L-206 782L-209 774ZM197 611L-211 768L-216 756ZM140 609L-225 728L-230 713ZM130 584L-238 681L-244 656ZM188 558L-246 644L-248 633ZM187 548L-250 624L-253 605ZM134 530L-257 571L-258 555ZM136 510L-260 525L-260 516ZM127 489L-260 489L-259 467ZM163 470L-257 438L-256 427ZM177 451L-253 396L-249 374ZM177 426L-243 338L-239 324ZM158 396L-229 284L-226 274ZM204 401L-224 270L-217 247ZM211 382L-208 224L-199 202ZM184 344L-184 169L-178 156ZM229 348L-165 132L-161 126ZM206 306L-140 89L-130 75ZM234 297L-111 48L-96 29ZM261 292L-77 5L-69 -4ZM267 281L-60 -13L-48 -27ZM265 263L-39 -36L-32 -43ZM285 252L-3 -70L9 -80ZM271 206L28 -95L40 -105ZM310 218L69 -126L84 -136ZM344 242L101 -147L114 -155ZM353 238L118 -157L138 -168ZM344 200L139 -169L158 -179ZM364 204L175 -187L191 -194ZM365 163L214 -204L223 -208ZM397 197L248 -217L260 -221ZM410 171L291 -231L308 -235ZM424 135L337 -242L352 -246ZM448 164L376 -250L393 -252ZM468 165L419 -256L437 -257ZM482 125L453 -259L474 -260ZM507 125L508 -260L521 -260ZM526 125L541 -259L565 -257ZM530 192L567 -257L582 -256ZM539 183L589 -255L598 -254ZM565 143L624 -250L648 -245ZM574 151L648 -245L668 -241ZM587 140L667 -241L692 -235ZM601 138L696 -234L711 -230ZM619 140L727 -225L749 -218ZM614 186L751 -217L767 -211ZM619 208L781 -206L793 -201ZM630 228L820 -189L836 -182ZM642 234L852 -173L864 -167ZM677 208L890 -152L898 -148ZM710 204L930 -127L951 -112ZM693 243L954 -110L960 -105ZM709 255L990 -81L997 -75ZM754 227L1010 -64L1027 -48ZM721 279L1029 -46L1046 -28ZM764 262L1061 -12L1067 -6ZM769 269L1072 -1L1082 11ZM791 263L1083 12L1095 27ZM749 322L1111 48L1125 68ZM805 293L1124 67L1133 80ZM792 318L1138 88L1152 109ZM769 345L1155 114L1163 129ZM773 355L1169 139L1174 149ZM783 359L1177 154L1183 166ZM829 351L1189 180L1195 192ZM792 384L1204 213L1209 226ZM800 388L1211 231L1214 239ZM829 400L1225 273L1228 283ZM863 407L1235 307L1238 317ZM829 438L1245 351L1248 368ZM829 460L1253 400L1255 417ZM878 476L1258 445L1259 459ZM857 501L1260 492L1260 511Z'/%3E%3C/svg%3E");
  --k-focus-wide:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M803 524L1258 550L1257 569ZM755 537L1254 595L1250 624ZM723 544L1247 640L1244 654ZM742 560L1239 676L1236 689ZM739 569L1232 703L1228 717ZM720 580L1215 757L1212 765ZM754 606L1205 785L1198 800ZM772 641L1179 841L1171 856ZM759 646L1168 863L1156 884ZM743 656L1143 905L1135 917ZM744 692L1105 960L1089 980ZM672 665L1055 1019L1041 1033ZM703 729L1009 1064L997 1075ZM680 721L984 1086L976 1092ZM620 674L939 1120L924 1130ZM615 692L899 1147L883 1156ZM616 726L859 1170L835 1182ZM618 794L790 1202L778 1207ZM588 740L767 1212L757 1215ZM565 733L709 1231L699 1234ZM557 752L678 1239L655 1244ZM539 743L631 1249L609 1252ZM530 733L607 1252L584 1255ZM509 722L537 1259L528 1259ZM493 789L486 1260L478 1260ZM480 742L441 1258L431 1257ZM469 742L413 1255L396 1253ZM454 781L389 1252L363 1248ZM448 712L328 1240L307 1235ZM434 701L270 1225L255 1219ZM376 799L221 1207L196 1196ZM374 751L172 1186L147 1173ZM368 737L134 1166L126 1161ZM339 739L80 1133L69 1126ZM338 719L57 1118L38 1103ZM344 694L31 1098L17 1086ZM290 737L5 1076L-13 1061ZM290 695L-50 1025L-65 1008ZM293 674L-77 995L-88 981ZM325 629L-105 960L-120 939ZM280 648L-122 936L-138 913ZM228 658L-154 888L-160 876ZM271 614L-176 846L-183 833ZM258 604L-193 813L-203 789ZM289 567L-221 741L-228 720ZM248 562L-237 685L-239 677ZM256 546L-246 648L-248 632ZM248 529L-254 593L-256 578ZM173 521L-258 556L-259 540ZM270 492L-260 484L-259 462ZM206 469L-257 430L-255 411ZM225 445L-246 355L-244 346ZM227 423L-233 299L-229 286ZM209 391L-214 240L-209 227ZM274 405L-204 215L-196 196ZM304 403L-185 171L-177 155ZM259 359L-160 123L-152 110ZM262 332L-125 67L-117 56ZM248 301L-100 34L-92 24ZM316 335L-73 0L-59 -15ZM346 336L-24 -50L-16 -58ZM352 331L-8 -65L6 -78ZM303 243L30 -97L44 -108ZM382 323L74 -129L84 -136ZM378 294L102 -147L123 -160ZM396 299L143 -171L160 -180ZM402 289L170 -185L189 -193ZM383 223L196 -197L212 -203ZM396 228L215 -205L241 -215ZM413 201L274 -226L301 -234ZM438 239L312 -236L335 -242ZM443 179L359 -247L375 -250ZM468 281L382 -251L399 -253ZM468 219L399 -253L428 -257ZM494 172L480 -260L493 -260ZM505 282L505 -260L533 -259ZM512 282L532 -259L554 -258ZM542 229L612 -252L621 -250ZM557 197L629 -249L651 -245ZM577 181L672 -240L686 -237ZM589 187L704 -232L713 -230ZM576 281L738 -222L759 -215ZM593 279L785 -205L804 -196ZM638 203L809 -194L831 -184ZM630 250L845 -177L857 -171ZM630 289L892 -151L903 -144ZM626 321L927 -129L950 -112ZM653 319L982 -87L998 -74ZM656 331L1008 -65L1020 -54ZM660 352L1048 -26L1067 -6ZM676 352L1076 4L1088 18ZM714 352L1120 60L1131 76ZM739 368L1162 127L1169 140ZM744 379L1176 153L1186 172ZM716 412L1202 208L1205 216ZM780 416L1225 271L1232 296ZM756 448L1244 344L1246 355ZM816 468L1256 419L1257 428ZM770 493L1260 476L1260 485ZM788 513L1260 525L1259 543Z'/%3E%3C/svg%3E");
}

/* ================= Manga-Bausteine */
/* Rasterton: Punktgröße wächst mit dem Verlauf, Farbe per SVG-Filter (_home_art.html) */
.tn{position:absolute;inset:0;pointer-events:none;--tp:9px;
  background:var(--ramp,linear-gradient(rgb(0 0 0/.6),rgb(255 255 255/.6))),
    radial-gradient(circle,#000,#fff calc(var(--tp) * .72)) 0 0/var(--tp) var(--tp),
    radial-gradient(circle,#000,#fff calc(var(--tp) * .72)) calc(var(--tp) / 2) calc(var(--tp) / 2)/var(--tp) var(--tp);
  background-blend-mode:normal,darken,normal}
/* Geräusch-Wörter: rund (M PLUS Rounded), Pastell mit Tusche- und Papierkontur – rein dekorativ (aria-hidden) */
.sfx{position:absolute;z-index:8;pointer-events:none;font:900 var(--s,60px)/1 var(--round);color:var(--c,var(--ichigo));white-space:nowrap;letter-spacing:-.05em;
  rotate:var(--r,-10deg);isolation:isolate;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 6px 8px rgba(30,27,57,.16))}
.sfx::before,.sfx::after{content:attr(data-t);position:absolute;left:0;top:0}
.sfx::before{z-index:-1;color:var(--ink);-webkit-text-stroke:calc(var(--s,60px) * .15) var(--ink)}
.sfx::after{z-index:-2;color:#fff;-webkit-text-stroke:calc(var(--s,60px) * .3) #fff}
/* Kapitel-Etikett 第…話 neben der Überschrift */
.chap{display:flex;align-items:flex-start;gap:18px}
.chap>div{flex:1;min-width:0}
.tate{flex:none;margin-top:6px;padding:12px 7px 10px;border-radius:10px;background:var(--ichigo);box-shadow:0 0 0 3px var(--tate-ring,var(--bg)),0 0 0 4.5px var(--ink);color:#fff;font:800 15px/1 var(--round);letter-spacing:.14em;writing-mode:vertical-rl;rotate:-4deg}
.trade .tate{--tate-ring:var(--lav)}
.ship .tate,.doc .tate{--tate-ring:#fff}
/* Sprechblase mit Schwanz (Form aus _home_art.html) */
.bsh{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible;fill:#fff;stroke:var(--ink);stroke-width:2px;stroke-linejoin:round}

/* ================= Hero */
.hero{position:relative;isolation:isolate;overflow:clip;padding:22px 0 34px}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(rgba(30,27,57,.1) 1.1px,transparent 1.5px) 0 0/24px 24px;-webkit-mask:radial-gradient(1000px 640px at 70% 42%,#000 10%,transparent 72%);mask:radial-gradient(1000px 640px at 70% 42%,#000 10%,transparent 72%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:24px;align-items:center;min-height:640px}
.copy{position:relative;z-index:3;min-width:0}
.hero h1{margin:0 0 18px;font-size:clamp(38px,3.6vw,52px);line-height:1.1;letter-spacing:-.025em}
.hero h1 .l1{display:block}
.hero h1 em{padding:0 .06em;background:linear-gradient(transparent 60%,var(--sakura-2) 60% 92%,transparent 92%);font-style:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lead{max-width:50ch;margin:0 0 24px;color:var(--ink-2);font-size:18px;line-height:1.55}
.hero .hero-search{max-width:590px}
.game-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 18px}
.game-chips .gc-lbl{flex-basis:100%;color:var(--ink-2);font-size:14px;font-weight:560}
.game-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px 0 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink);font-size:14.5px;font-weight:650;text-decoration:none;-webkit-user-select:none;user-select:none;transition:box-shadow .16s ease,transform .16s var(--ease-out)}
.game-chip:hover{color:var(--ink)}
.game-chip i{width:10px;height:10px;border-radius:50%;background:var(--c,var(--ink));box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--ink)) 22%,transparent)}
.game-chip:active{transform:scale(.96)}
.hero-proof{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:18px;color:var(--ink-2);font-size:14px;font-weight:580}
.hero-proof span{display:inline-flex;align-items:center;gap:8px}
.hero-proof svg{box-sizing:content-box;padding:3px;border-radius:50%;background:var(--mint);color:var(--mint-ink)}

/* „Lieber tauschen?“ als kleines Manga-Panel direkt unter der Suche: zwei Karten tauschen, kräftige Lav-Fläche, harter Schatten */
.trade-hint{position:relative;isolation:isolate;display:flex;align-items:center;gap:16px;width:100%;max-width:590px;min-height:96px;margin:16px 0 0;padding:12px 14px 12px 16px;border-radius:18px;background:var(--lav-ink);box-shadow:0 0 0 2.5px var(--ink),6px 6px 0 var(--ink);color:#fff;text-decoration:none;-webkit-user-select:none;user-select:none;transition:transform .2s var(--ease-out),box-shadow .2s ease}
.trade-hint::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(circle,rgba(255,255,255,.16) 1.2px,transparent 1.6px) 0 0/8px 8px;-webkit-mask:linear-gradient(110deg,transparent 35%,#000 85%);mask:linear-gradient(110deg,transparent 35%,#000 85%)}
.trade-hint:hover{color:#fff}
.trade-hint:active{transform:translate(2px,2px);box-shadow:0 0 0 2.5px var(--ink),3px 3px 0 var(--ink)}
.trade-hint:focus-visible{outline-offset:6px}
.trade-hint .ico{display:grid;flex:none;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--butter-2);box-shadow:0 0 0 2.5px var(--ink);color:var(--ink);rotate:-6deg}
.th-swap{position:relative;flex:none;width:104px;height:78px}
.th-swap img{position:absolute;top:0;width:54px;height:75px;border-radius:5px;object-fit:cover;box-shadow:0 0 0 2.5px #fff,0 10px 16px -8px rgba(0,0,0,.6)}
.th-swap .c1{left:0;transform:rotate(-9deg)}
.th-swap .c2{right:0;transform:rotate(8deg)}
.th-swap .sw{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--butter-2);box-shadow:0 0 0 2.5px var(--ink);color:var(--ink);translate:-50% -50%}
.trade-hint .tx{flex:1;min-width:0;color:rgba(255,255,255,.88);font-size:14.5px;line-height:1.38}
.trade-hint .tx b{display:block;margin-bottom:2px;color:#fff;font:800 19px/1.2 var(--round);letter-spacing:-.01em}
.th-jp{display:inline-block;margin-bottom:4px;padding:2px 7px;border-radius:6px;background:#fff;color:var(--lav-ink);font:800 12px/1.3 var(--round);letter-spacing:.08em;transform:rotate(-3deg)}
.trade-hint .go{display:flex;flex:none;align-items:center;gap:6px;height:44px;padding:0 18px;border-radius:999px;background:var(--butter-2);box-shadow:0 0 0 2px var(--ink);color:var(--ink);font-size:15px;font-weight:800}
.trade-hint .go svg{transition:transform .3s var(--ease-out)}
.th-sfx{position:absolute;right:-8px;top:-18px;color:var(--butter-2);font:900 22px/1 var(--round);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;transform:rotate(8deg);pointer-events:none}

/* Rechte Spalte: Kartenbühne, darunter Preisstand + Schalter Bar | Guthaben */
.scol{display:flex;flex-direction:column;align-items:center;min-width:0}
.scol .stage{width:100%}

/* ================= Bühne */
.stage{--px:0;--py:0;position:relative;height:620px;-webkit-user-select:none;user-select:none}
/* Konzentrationslinien (Sakura) hinter der Scheibe */
.stage .lines{position:absolute;left:52%;top:47%;width:900px;aspect-ratio:1;background:var(--sakura-2);pointer-events:none;translate:calc(-50% + var(--px) * -8px) calc(-50% + var(--py) * -6px);
  -webkit-mask:var(--k-focus) center/100% 100% no-repeat,radial-gradient(closest-side,#000 52%,transparent 96%);-webkit-mask-composite:source-in;
  mask:var(--k-focus) center/100% 100% no-repeat,radial-gradient(closest-side,#000 52%,transparent 96%);mask-composite:intersect}
.disc{position:absolute;left:52%;top:47%;width:520px;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,var(--sakura) 0 21px,#FFD9E2 21px 22.5px);box-shadow:inset 0 0 0 10px #fff,0 0 0 1.5px var(--sakura-2);translate:calc(-50% + var(--px) * -14px) calc(-50% + var(--py) * -10px)}
.disc::after{content:"";position:absolute;inset:-34px;border:1.5px dashed var(--line-2);border-radius:50%}
.fan{position:absolute;left:50%;top:46%;z-index:2;display:block;width:min(38%,214px);aspect-ratio:63/88;border-radius:4.8%/3.4%;translate:-50% -50%;transform:translate(var(--x),var(--y)) rotate(var(--rot));-webkit-touch-callout:none}
.fan.f1{--rot:-11deg;--x:-64%;--y:2%;z-index:1}
.fan.f2{--rot:2deg;--x:2%;--y:-6%;z-index:3;width:min(45%,252px)}
.fan.f3{--rot:12deg;--x:66%;--y:5%;z-index:2}
.fan:focus-visible{outline-offset:8px}
.fin{position:relative;display:block;width:100%;height:100%;border-radius:4.8%/3.4%;transition:transform .16s var(--ease-out);will-change:transform}
.fan:active .fin{transform:scale(.97)}
.fin img{width:100%;height:100%;border-radius:4.8%/3.4%;background:var(--bg-2);object-fit:cover;box-shadow:0 0 0 5px #fff,0 30px 50px -22px rgba(30,27,57,.55);pointer-events:none;-webkit-user-drag:none}
/* Folienglanz beim Kippen (nur Maus): Regenbogen-Rand hinter der Karte, Lichtfleck auf der Karte */
.fin::before,.hcard .tilt::before{content:"";position:absolute;inset:-8px;z-index:-1;border-radius:7%/5%;background:conic-gradient(from 200deg at var(--mx,50%) var(--my,50%),#FF8FB0,#FFD86B,#7FE0B8,#8FC2FF,#B7A2FF,#FF8FB0);opacity:0;transition:opacity .35s ease}
.holo{position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.7),transparent 42%),linear-gradient(115deg,#FFC8D5 0%,#FFF0B8 20%,#C4EFDC 40%,#CDE4FF 60%,#DCD2FF 80%,#FFC8D5 100%);background-position:center,var(--mx,50%) var(--my,50%);background-size:100% 100%,240% 240%;mix-blend-mode:color-dodge;opacity:0;pointer-events:none;transition:opacity .35s ease}
.is-tilting .holo{opacity:.28}
.is-tilting .fin::before,.is-tilting .tilt::before{opacity:1}

/* Preisschilder: eigene Ebene über den Karten (dekorativ – die Karten-Links tragen Name und Preise) */
.tags{position:absolute;inset:0;z-index:5;pointer-events:none}
.tags .ptag{position:absolute;padding:9px 14px 10px 26px;translate:calc(var(--px) * 10px) calc(var(--py) * 8px)}
.tags .ptag .k{font-size:12px}
.ptag.t1{left:0;top:31%;rotate:-7deg}
.ptag.t3{right:0;top:67%;rotate:7deg}
.ptag.t2{left:21%;top:52%;padding:12px 18px 0 30px;border-radius:20px;rotate:-3deg;box-shadow:0 26px 40px -18px rgba(30,27,57,.6),inset 0 0 0 1.5px var(--line)}
.ptag.t2::before{left:12px;top:26px;width:10px;height:10px}
.ptag.t2 b{font-size:34px;line-height:1.08}
.ptag.t2 small{margin-bottom:10px;font-size:12.5px}
.ptag .stub{display:flex;align-items:center;gap:7px;margin:0 -18px 0 -30px;padding:8px 14px 9px;border-top:1.5px dashed var(--lav-2);border-radius:0 0 20px 20px;background:var(--lav);color:var(--lav-ink);font-size:12.5px;font-weight:760;white-space:nowrap}
.ptag .stub svg{flex:none}
.hk-tag{position:absolute;right:-26px;top:-30px;display:grid;place-items:center;width:64px;height:64px;border:2.5px solid var(--ichigo);border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 14px -8px rgba(140,29,69,.45);color:var(--ichigo);font:900 13px/1.05 var(--round);letter-spacing:.02em;text-align:center;rotate:-16deg;pointer-events:none}
.hk-tag::before{content:"";position:absolute;inset:4px;border:1.2px solid rgba(207,46,102,.6);border-radius:50%}
.sfx.don{--s:54px;--r:-13deg;--c:var(--ichigo);left:-4%;top:43%;z-index:4}
.sfx.kira{--s:28px;--r:-12deg;--c:var(--butter-2);left:31%;top:12%;z-index:6}

/* 買取-Zacken-Sticker mit Impact-Burst dahinter: Bonus als Guthaben (Wert aus den Einstellungen) */
.hbadge{position:absolute;right:1%;top:1%;z-index:6;isolation:isolate;width:132px;height:132px;rotate:10deg;translate:calc(var(--px) * 20px) calc(var(--py) * 14px);filter:drop-shadow(0 14px 18px rgba(30,27,57,.22));pointer-events:none}
.hbadge svg{position:absolute;inset:0;width:100%;height:100%}
.hbadge svg.bburst{inset:-19%;z-index:-1;width:138%;height:138%;overflow:visible;fill:var(--ichigo);stroke:var(--ink);stroke-width:3px;stroke-linejoin:round;rotate:-8deg}
.hbadge .mid{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);line-height:1;text-align:center}
.hbadge .mid .jp{display:block;margin-bottom:6px;color:var(--ichigo);font-size:12px}
.hbadge .mid b{display:block;font:900 30px/1 var(--round);letter-spacing:-.02em;white-space:nowrap}
.hbadge .mid small{display:block;margin-top:5px;font-size:12px;font-weight:750}

/* Gans mit Manga-Sprechblase */
.mascot{position:absolute;right:9%;bottom:0;z-index:7;width:124px;transform-origin:50% 100%;pointer-events:none}
.mascot .goose{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 14px rgba(30,27,57,.18))}
.goose .eye{transform-box:fill-box;transform-origin:center}
.gbubble{position:absolute;right:90%;top:-8px;isolation:isolate;padding:11px 18px 25px 16px;color:var(--ink);font:800 13px/1 var(--round);letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums;filter:drop-shadow(0 8px 10px rgba(30,27,57,.14));transform-origin:90% 90%}
.gbubble em{color:var(--ichigo);font-style:normal}
.hspark{position:absolute;z-index:1;width:var(--s,22px);height:var(--s,22px);color:var(--c,var(--butter-2));pointer-events:none}
.hspark svg{display:block;width:100%;height:100%;overflow:visible}
.stage .hspark.s1{left:47%;top:9%;--s:26px}
.stage .hspark.s2{left:6%;bottom:14%;--s:22px;--c:var(--mint-2)}

/* Unter der Bühne: Preisstand + Bar | Guthaben (ein Schalter für alle Preise der Seite) */
.under{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;margin:-6px auto 0}
.ptoday{display:flex;align-items:center;gap:9px;margin:0;color:var(--ink-2);font-size:14px;font-weight:650;white-space:nowrap}
.ptoday i{width:9px;height:9px;border-radius:50%;background:#1FB36D;box-shadow:0 0 0 4px var(--mint)}
.ptoday b{color:var(--ink);font-weight:800}
.paymode{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.pseg{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.pseg button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 15px;border:0;border-radius:999px;background:none;color:var(--ink-2);font-size:14px;font-weight:720;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:color .2s ease,transform .16s var(--ease-out)}
.pseg button[aria-pressed="true"]{color:#fff}
.pseg button:active{transform:scale(.97)}
.pseg .thumb{position:absolute;left:4px;top:4px;bottom:4px;z-index:0;width:calc(50% - 4px);border-radius:999px;background:var(--ink);transition:transform .32s var(--ease-out),background-color .28s ease}
.eqn{display:flex;align-items:center;gap:7px;margin:0;color:var(--ink-2);font-size:14px;font-weight:600;white-space:nowrap}
.eqn b{color:var(--ink);font-weight:780}
.eqn b.m{color:var(--money)}
.eqn .is{color:var(--ink-3);font-weight:800}

/* Guthaben-Modus: Minze = Geld/Guthaben */
[data-pay="credit"] .pseg .thumb{transform:translateX(100%);background:var(--money)}
[data-pay="credit"] [data-price]{color:var(--money)}
[data-pay="credit"] .ptag::before{background:var(--mint);box-shadow:inset 0 0 0 2px var(--mint-2)}
[data-pay="credit"] .hcard .p::before,[data-pay="credit"] .hcard .p::after{background:var(--bg)}
[data-price]{transition:color .3s ease}

/* Walzen-Zähler: jede Ziffer rollt einzeln, Zahlen bleiben gleich breit */
.roll{display:inline-flex;font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:top}
.rw{display:inline-flex}
.rd{display:inline-block;height:1.15em;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
.rs{display:block;line-height:1.15em;text-align:center;white-space:pre;transition:transform .52s var(--ease-out)}
.rc{display:inline-block;line-height:1.15em;white-space:pre}

/* Flug-Chip, Kartenbild, Funken */
.fly{position:fixed;left:0;top:0;z-index:1200;display:flex;align-items:center;height:40px;margin:0;padding:0 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px var(--ichigo),0 16px 26px -12px rgba(30,27,57,.55);color:var(--ink);font:800 19px/1 var(--round);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;will-change:transform}
.fly.img{padding:0;border-radius:6px;background:none;box-shadow:none}
.fly.img img{width:100%;height:100%;border-radius:6px;object-fit:cover;box-shadow:0 0 0 3px #fff,0 20px 30px -14px rgba(30,27,57,.6)}
.fly.minus{height:28px;padding:0 10px;background:var(--bg-2);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink-2);font-size:15px}
[data-pay="credit"] .fly:not(.minus):not(.img){box-shadow:inset 0 0 0 2px var(--money),0 16px 26px -12px rgba(30,27,57,.55);color:var(--money)}
.burst{position:fixed;left:0;top:0;z-index:1201;pointer-events:none}
.burst svg{display:block;width:100%;height:100%;overflow:visible}

/* ================= Vertrauensleiste unter dem Hero */
.htrust{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:30px 0 0;padding:0;overflow:hidden;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);list-style:none}
.htrust li{display:flex;align-items:flex-start;gap:12px;padding:20px;border-left:1.5px dashed var(--line-2);color:var(--ink-2);font-size:14px;line-height:1.42}
.htrust li:first-child{border-left:0}
.htrust b{display:block;margin-bottom:2px;color:var(--ink);font-size:14.5px;font-weight:760}
.htrust .ic{--icon-bg:var(--sakura);display:grid;flex:none;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--sakura);color:var(--sakura-ink)}
.htrust li:nth-child(2) .ic{--icon-bg:var(--mint);background:var(--mint);color:var(--mint-ink)}
.htrust li:nth-child(3) .ic{--icon-bg:var(--butter);background:var(--butter);color:var(--butter-ink)}
.htrust li:nth-child(4) .ic{--icon-bg:var(--lav);background:var(--lav);color:var(--lav-ink)}
.htrust a{color:var(--ichigo);font-weight:700;text-underline-offset:2px}

/* ================= Preisleiste 速報: kein Laufband – man blättert selbst (Pfeile mit Maus, Wischen auf Touch) */
.ticker{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.ticker-in{position:relative;display:flex;align-items:center;height:64px;overflow:hidden;border-radius:999px;background:#fff;box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
.ticker-lbl{z-index:1;display:flex;flex:none;align-items:center;gap:10px;height:100%;padding:0 20px 0 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:720}
.ticker-lbl b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sakura);color:var(--sakura-ink);font:900 13px/1 var(--round)}
.tk-view{flex:1;min-width:0;height:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.tk-view::-webkit-scrollbar{display:none}
.tk-view.at-end{-webkit-mask:none;mask:none}
.track{display:flex;width:max-content}
.track a{display:flex;align-items:center;gap:11px;height:64px;padding:0 22px;color:var(--ink);font-size:15px;font-weight:640;white-space:nowrap;text-decoration:none;scroll-snap-align:start}
.track a:focus-visible{outline-offset:-4px}
.track a img{width:28px;height:39px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 2px #fff,0 4px 8px -3px rgba(30,27,57,.4)}
.track a b{font:800 18px/1 var(--round);font-variant-numeric:tabular-nums}
.track a::after{content:"";width:6px;height:6px;margin-left:18px;border-radius:50%;background:var(--sakura-2)}
.track a:last-child::after{display:none}
.tk-nav{display:flex;flex:none;gap:6px;margin:0 10px 0 6px}
.tk-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink);cursor:pointer;touch-action:manipulation;transition:background-color .16s ease,color .16s ease,opacity .2s ease,transform .16s var(--ease-out)}
.tk-btn:active{transform:scale(.92)}
.tk-btn:disabled{opacity:.35;cursor:default}
.tk-btn.prev svg{transform:scaleX(-1)}
@media (hover:none){.tk-nav{display:none}.tk-view{margin-right:4px}}

/* ================= Abschnitte */
.sec{position:relative;padding:104px 0 0}
.sec h2{margin:0 0 38px;font-size:clamp(32px,3.6vw,54px);line-height:1.08;letter-spacing:-.025em}
.sec h2 .hk{margin-left:.32em}
/* Unterzeile direkt unter der Überschrift (statt Augenbraue darüber) */
.sub{margin:-26px 0 34px;color:var(--ink-2);font-size:17px;font-weight:600}

/* Verkaufswege – Rasterton und Fokuslinien als Textur */
.bento{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:18px}
.bx{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:10px;min-height:250px;padding:32px;overflow:hidden;border-radius:var(--r-l);color:var(--ink);text-decoration:none;transition:transform .2s var(--ease-out),box-shadow .2s ease}
.bx:hover{color:var(--ink)}
.bx:active{transform:scale(.99)}
.bx h3{position:relative;max-width:14ch;margin:0;font-size:29px;line-height:1.1;letter-spacing:-.02em}
.bx p{position:relative;max-width:36ch;margin:0;color:var(--ink-2);font-size:15.5px}
.bx .go{position:relative;z-index:2;display:flex;align-self:flex-start;align-items:center;gap:8px;height:44px;margin-top:auto;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:14.5px;font-weight:720}
.bx .go svg{transition:transform .2s var(--ease-out)}
/* Wasserzeichen 単品 / まとめ / 一括: nur Kontur */
.bx .wm{position:absolute;right:24px;top:18px;color:transparent;-webkit-text-stroke:1.5px rgba(30,27,57,.16);font:800 64px/1 var(--round);white-space:nowrap;pointer-events:none}
.bx .tn{z-index:-1;--ramp:radial-gradient(75% 95% at 100% 100%,rgb(0 0 0/.6) 0,rgb(255 255 255/.6) 64%)}
.bx .tn-mint{filter:url(#k-t-mint)}
.bx .tn-butter{filter:url(#k-t-butter)}
.bx.big{grid-row:span 2;min-height:520px;background:var(--ichigo);color:#fff}
.bx.big::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(255,255,255,.16) 1.3px,transparent 1.7px) 0 0/16px 16px}
.bx.big h3,.bx.big:hover{color:#fff}
.bx.big p{color:#fff}
.bx.big .go{background:#fff;color:var(--ink)}
.bx.big .wm{font-size:100px;-webkit-text-stroke:2px rgba(255,255,255,.35)}
.bx.big .blines{position:absolute;left:80%;top:84%;z-index:-1;width:210%;aspect-ratio:1;background:#fff;opacity:0;scale:1.15;pointer-events:none;translate:-50% -50%;
  -webkit-mask:var(--k-focus-wide) center/100% 100% no-repeat;mask:var(--k-focus-wide) center/100% 100% no-repeat;transition:opacity .35s ease,scale .5s var(--ease-out)}
.bx.big .mini{position:absolute;right:-6px;bottom:-70px;width:56%;height:64%;pointer-events:none}
.bx.big .mini img{position:absolute;width:50%;height:auto;border-radius:10px;box-shadow:0 0 0 4px #fff,0 26px 40px -16px rgba(60,0,20,.5);transition:transform .28s var(--ease-out)}
.bx.big .mini img:nth-child(1){left:0;top:18%;transform:rotate(-14deg)}
.bx.big .mini img:nth-child(2){left:25%;top:2%;z-index:1;transform:rotate(-2deg)}
.bx.big .mini img:nth-child(3){left:50%;top:15%;transform:rotate(12deg)}
.bx .bx-spark{right:44%;top:40%;--s:30px}
.bx.mi{background:var(--mint)}
.bx.mi p{color:#1F4A3A}
.bx.bu{background:var(--butter)}
.bx.bu p{color:#4A3B05}
/* „Ganze Sammlung“: Gans mit Karton unten rechts (schaut aus der Kachel), links daneben die Einsteiger-Sprechblase
   zwischen Text und Knopf. Unter 360 px Inhaltsbreite (Text bricht dreizeilig) und am Handy nur die Gans. */
.bx.bu{container-type:inline-size}
.bx-goose{position:absolute;right:20px;bottom:-15px;z-index:1;pointer-events:none}
.bx-goose .goose{display:block;width:110px;height:auto;filter:drop-shadow(0 10px 12px rgba(30,27,57,.16))}
.bx-goose .gb-c{transition:transform .32s var(--ease-out)}
.bx-goose .gb-c2{transition-delay:.04s}
.bx-goose .gb-c3{transition-delay:.08s}
.bx-ball{position:absolute;right:134px;bottom:90px;z-index:2;padding:8px 14px 9px;border-radius:999px;background:#fff;box-shadow:0 0 0 2px #1E1B39,0 10px 16px -10px rgba(30,27,57,.45);
  color:#1E1B39;font:800 13px/1.2 var(--round);letter-spacing:.005em;white-space:nowrap;rotate:-3deg}
.bx-ball::after{content:"";position:absolute;right:-6px;bottom:7px;width:11px;height:11px;background:#fff;box-shadow:inset -2px 2px 0 #1E1B39;border-top-right-radius:2px;transform:skewY(-14deg) rotate(45deg)}
@container (max-width:359px){.bx-ball{display:none}.bx-goose{right:8px;bottom:-14px}.bx-goose .goose{width:72px}}
@media (max-width:760px){.bx-ball{display:none}.bx-goose{right:14px;bottom:-16px}.bx-goose .goose{width:86px}}

/* ================= Tauschen 交換: links drei Schritte + EIN Knopf zur Tausch-Seite, rechts ein Rechenbeispiel als
   Manga-Panel. Das Panel ist Illustration, keine Bedienung: nichts darin reagiert auf Maus oder Finger. */
.trade{position:relative;isolation:isolate;margin-top:104px;padding:96px 0 104px;overflow:clip;background:var(--lav)}
.trade::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(69,53,166,.13) 1.1px,transparent 1.5px) 0 0/22px 22px;-webkit-mask:linear-gradient(180deg,#000,transparent 60%);mask:linear-gradient(180deg,#000,transparent 60%);pointer-events:none}
.tr-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:"copy ex" "how ex";grid-template-rows:auto 1fr;gap:0 72px;align-items:start}
.tr-copy{position:relative;grid-area:copy}
.tr-how{grid-area:how}
.tr-wm{position:absolute;left:-34px;top:-64px;z-index:-1;color:transparent;-webkit-text-stroke:1.5px rgba(69,53,166,.13);font:800 clamp(170px,17vw,250px)/1 var(--round);letter-spacing:-.04em;white-space:nowrap;pointer-events:none}
.trade h2{margin:0 0 20px;font-size:clamp(32px,3.6vw,54px);line-height:1.08;letter-spacing:-.025em}
.trade h2 em{color:var(--lav-ink);font-style:normal}
.tr-lead{max-width:40ch;margin:0 0 38px;color:var(--ink-2);font-size:19px;line-height:1.5}
/* Drei große Schritte: Nummern-Stempel in Sakura/Butter/Minze, gestrichelte Linie dazwischen */
.tr-steps{position:relative;display:flex;flex-direction:column;gap:24px;max-width:600px;margin:0 0 30px;padding:0;list-style:none}
.tr-steps::before{content:"";position:absolute;left:27px;top:44px;bottom:44px;border-left:2px dashed var(--lav-2)}
.tr-steps li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;align-items:start}
.tr-steps .n{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--sakura);box-shadow:inset 0 0 0 5px #fff,0 0 0 2px var(--ink);color:var(--ink);font:900 24px/1 var(--round);rotate:-6deg}
.tr-steps li:nth-child(2) .n{background:var(--butter);rotate:5deg}
.tr-steps li:nth-child(3) .n{background:var(--mint);rotate:-3deg}
.tr-steps .tx{padding-top:5px;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.tr-steps strong{display:block;margin-bottom:3px;color:var(--ink);font:800 20px/1.25 var(--round);letter-spacing:-.01em;text-wrap:balance}
/* Das Wichtigste in einer Zeile */
.tr-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none}
.tr-facts li{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 14px 6px 11px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--lav-2);color:var(--ink);font-size:14px;font-weight:680;line-height:1.25}
.tr-facts svg{flex:none;color:var(--lav-ink)}
.tr-facts li:first-child svg{color:var(--money)}
/* EIN Knopf (+ leiser Textlink) */
.tr-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.tr-go{height:60px;padding:0 34px;font-size:18px}
.tr-more{display:inline-flex;align-items:center;min-height:44px;color:var(--lav-ink);font-size:15.5px;font-weight:720;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.tr-more:hover{color:var(--lav-ink)}

/* Rechenbeispiel: Koma mit Tusche-Rahmen und schräger Kante, Lav-Rasterton und Fokuslinien hinter dem Tausch-Pfeil */
.tex{--poly:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%);position:relative;isolation:isolate;grid-area:ex;margin:0;padding:44px 48px 30px 34px;-webkit-user-select:none;user-select:none}
.tex::before{content:"";position:absolute;inset:0;z-index:-3;background:var(--ink);clip-path:var(--poly);pointer-events:none}
.tex::after{content:"";position:absolute;inset:3px 4px 4.5px 3px;z-index:-2;background:#fff;clip-path:var(--poly);pointer-events:none}
.tex .kfx{inset:3px 4px 4.5px 3px}
.tex .tn{--tp:10px;--ramp:radial-gradient(75% 60% at 0 100%,rgb(0 0 0/.6) 0,rgb(255 255 255/.6) 62%);filter:url(#k-t-lav)}
.tex-lines{position:absolute;left:50%;top:42%;width:940px;aspect-ratio:1;background:var(--lav-2);opacity:.7;translate:-50% -50%;pointer-events:none;
  -webkit-mask:var(--k-focus) center/100% 100% no-repeat;mask:var(--k-focus) center/100% 100% no-repeat}
/* „Beispiel“-Sticker und Gans mit Sprechblase ragen über den Rahmen */
.tex-ex{position:absolute;left:24px;top:-17px;z-index:4;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 15px 0 12px;border-radius:999px;background:var(--butter-2);box-shadow:0 0 0 2px var(--ink),3px 3px 0 var(--ink);color:var(--ink);font:800 14px/1 var(--round);letter-spacing:.01em;white-space:nowrap;rotate:-4deg}
.tex-goose{position:absolute;right:40px;top:-66px;z-index:3;width:76px;pointer-events:none}
.tex-goose .goose{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 10px rgba(69,53,166,.2))}
.tex-ball{--ink:#1E1B39;position:absolute;right:112px;top:-62px;z-index:3;isolation:isolate;padding:9px 16px 23px 15px;color:#1E1B39;font:800 14px/1.2 var(--round);letter-spacing:.04em;white-space:nowrap;filter:drop-shadow(0 8px 10px rgba(69,53,166,.18));pointer-events:none}
/* Du gibst ⇄ Du bekommst */
.tex-row{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);gap:6px;align-items:start}
.tex-side{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.tex-h{display:inline-flex;align-items:center;height:30px;margin-bottom:18px;padding:0 13px;border-radius:999px;font:800 14px/1 var(--round);letter-spacing:.02em;white-space:nowrap}
.give .tex-h{background:var(--mint);box-shadow:inset 0 0 0 1.5px var(--mint-2);color:var(--mint-ink)}
.get .tex-h{background:var(--sakura);box-shadow:inset 0 0 0 1.5px var(--sakura-2);color:var(--sakura-ink)}
.tex-cards{position:relative;display:block;width:160px;aspect-ratio:63/88}
.tex-cards img,.tex-cards .ph{position:absolute;inset:0;width:100%;height:100%;border-radius:4.8%/3.4%;object-fit:cover;box-shadow:0 0 0 4px #fff,0 0 0 5.5px var(--ink),0 24px 30px -16px rgba(30,27,57,.55)}
.give .tex-cards img,.give .tex-cards .ph{rotate:-6deg}
.get .tex-cards img,.get .tex-cards .ph{rotate:5deg}
.two .give .tex-cards img:first-child{translate:-28px 6px;rotate:-12deg}
.two .give .tex-cards img:nth-child(2){translate:24px -4px;rotate:5deg}
.tex-tag{z-index:2;margin-top:-28px;padding:8px 14px 9px 26px;rotate:-3deg;text-align:left}
.get .tex-tag{rotate:3deg}
.tex-tag b{font-size:26px;font-variant-numeric:tabular-nums}
.give .tex-tag b{color:var(--money)}
.tex-tag small{color:var(--ink-2)}
.tex-nm{display:-webkit-box;max-width:100%;margin-top:12px;overflow:hidden;color:var(--ink-2);font-size:13.5px;font-weight:650;line-height:1.3;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tex-mid{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:114px}
.tex-swap{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--ichigo);box-shadow:0 0 0 2.5px var(--ink),4px 4px 0 var(--ink);color:#fff}
.tex-bonus{display:flex;flex-direction:column;align-items:center;max-width:100%;padding:6px 10px 7px;border-radius:14px;background:var(--mint);box-shadow:inset 0 0 0 1.5px var(--mint-2);color:var(--mint-ink);font-size:12px;font-weight:750;line-height:1.2;text-align:center;rotate:-3deg}
.tex-bonus b{color:var(--money);font:900 20px/1.1 var(--round);white-space:nowrap}
/* Ergebnis: Tusche-Ticket „= … Guthaben für dich“ */
.tex-res{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 12px;width:fit-content;max-width:100%;margin:30px auto 0;padding:14px 26px 15px;border-radius:20px;background:var(--ink);box-shadow:5px 5px 0 var(--lav-2);color:#fff;rotate:-1.5deg}
.tex-res .eq{color:#A9A5CC;font:800 26px/1 var(--round)}
.tex-res b{color:var(--mint-2);font:900 38px/1.05 var(--round);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tex-res .l{font:800 17px/1.2 var(--round)}
.tex-note{position:relative;z-index:2;margin:16px 0 0;color:var(--ink-2);font-size:13px;font-weight:600;line-height:1.5;text-align:center}
/* Funkeln an der Karte, die du bekommst, und am Ergebnis */
.tex .hspark.tex-sp{z-index:3;--s:24px;right:-16px;top:-14px}
.tex-res .hspark.tex-sp{right:auto;left:-12px;top:-14px;--s:22px;--c:var(--mint-2)}
/* Ohne passendes Beispiel: dieselbe Rechnung ohne Beträge */
.tex-cards .ph{display:grid;place-items:center;background:var(--mint);color:var(--mint-ink);font:900 26px/1 var(--round);letter-spacing:.04em}
.get .tex-cards .ph{background:var(--sakura);color:var(--sakura-ink)}
.is-plain .tex-tag b{font-size:19px}
.is-plain .tex-res .l{padding:4px 0}
.tr-legal{display:flex;align-items:center;gap:10px;margin:22px 0 0;color:#4A485F;font-size:13.5px;font-weight:560}
.tr-legal svg{flex:none;color:var(--lav-ink)}

/* ================= Spiele ゲーム */
.games{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.gcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1);color:var(--ink);text-decoration:none;transition:transform .2s var(--ease-out),box-shadow .2s ease}
.gcard:hover{color:var(--ink)}
.gcard:active{transform:scale(.98)}
/* Spielfarbe als Tönung über Weiß: 20 % Fläche, Punkte auf ~30 % */
.gcard .top{position:relative;isolation:isolate;height:176px;border-radius:var(--r-l) var(--r-l) 0 0;background:#fff}
.gcard .top::before,.gcard .top::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.gcard .top::before{background:var(--c);opacity:.2}
.gcard .top::after{background:radial-gradient(var(--c) 1.3px,transparent 1.7px) 0 0/14px 14px;opacity:.31}
.gcard .top img{position:absolute;left:50%;bottom:-24px;width:50%;height:auto;aspect-ratio:63/88;border-radius:8px;box-shadow:0 0 0 4px #fff,0 20px 28px -14px rgba(30,27,57,.5);object-fit:cover;transform:translateX(-50%) rotate(-6deg);transition:transform .28s var(--ease-out)}
/* Spiel ohne sauberes Kartenbild (z. B. One Piece: Quellbilder mit „SAMPLE“): Name als Lettering */
.gcard .sfx.gk{--s:30px;--r:-8deg;left:50%;bottom:30px;z-index:1;filter:none;translate:-50% 0}
.gcard .kana{position:absolute;left:14px;top:14px;padding:6px 9px;border-radius:999px;background:#fff;color:var(--ink);font:800 12px/1 var(--round);letter-spacing:.08em}
.gcard .body{display:flex;flex:1;align-items:flex-end;justify-content:space-between;gap:10px;padding:38px 20px 20px}
.gcard strong{display:flex;align-items:center;gap:8px;font:800 20px/1.15 var(--round);letter-spacing:-.01em}
.gcard strong i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c)}
.gcard .s{display:block;margin-top:3px;color:var(--ink-2);font-size:13.5px}
.gcard .arr{display:grid;flex:none;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--bg);transition:background-color .2s ease,color .2s ease}

/* ================= So verkaufst du an uns: 4-Koma bzw. Scroll-Geschichte
   Breit (ab 900 px) + Bewegung erlaubt + JS: klebendes Manga-Panel links, Szene wechselt je Schritt, rechts die Schritt-Texte
   mit Stempel und Leiste. Sonst: gestapelte 4-Koma, je Panel eine kleine Szene, einmal eingetuscht beim ersten Sichtkontakt. */
.story-l{display:none}
.koma-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.koma,.ship{--poly:polygon(var(--x1,0px) var(--y1,0px),calc(100% - var(--x2,0px)) var(--y2,0px),calc(100% - var(--x3,0px)) calc(100% - var(--y3,0px)),var(--x4,0px) calc(100% - var(--y4,0px)));position:relative;isolation:isolate}
.koma::before,.ship::before{content:"";position:absolute;inset:0;z-index:-3;background:var(--ink);clip-path:var(--poly);pointer-events:none}
/* Federdruck: oben/links dünner, rechts/unten kräftiger */
.koma::after,.ship::after,.kfx{position:absolute;inset:2.5px 3.5px 4px 2.5px;clip-path:var(--poly);pointer-events:none}
.koma::after,.ship::after{content:"";z-index:-2;background:#fff}
.kfx{z-index:-1;overflow:hidden}
.koma{display:flex;flex-direction:column;min-height:332px;padding:32px 40px 34px 30px}
.k1{--x3:22px}
.k2,.k3{--x1:22px;--x3:22px;padding-left:44px}
.k4{--x1:22px;padding-right:30px;padding-left:44px}
.koma .tn{--ramp:radial-gradient(64% 44% at 100% 0,rgb(0 0 0/.6) 0,rgb(255 255 255/.6) 64%)}
.k1 .tn{filter:url(#k-t-sakura)}.k2 .tn{filter:url(#k-t-butter)}.k3 .tn{filter:url(#k-t-lav)}.k4 .tn{filter:url(#k-t-mint)}
.stamp{--st:var(--sakura);--st2:var(--sakura-2);position:relative;display:grid;flex:none;place-items:center;width:74px;height:74px;border-radius:50%;background:var(--st);color:var(--ink);box-shadow:inset 0 0 0 6px #fff,0 0 0 1.5px var(--st2)}
.stamp i{position:absolute;right:-4px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px #fff;color:#fff;font:800 13px/28px var(--round);font-style:normal;text-align:center}
.koma .stamp{margin-bottom:22px}
.k2 .stamp{--st:var(--butter);--st2:var(--butter-2)}.k3 .stamp{--st:var(--lav);--st2:var(--lav-2)}.k4 .stamp{--st:var(--mint);--st2:var(--mint-2)}
.st-tx{margin-bottom:20px}
.koma h3{margin:0 0 8px;font:800 20px/1.2 var(--round);letter-spacing:-.01em}
.koma p{max-width:34ch;margin:0;color:var(--ink-2);font-size:15px}
.sfx.ks{--s:28px;--r:8deg;right:22px;top:22px;filter:none}
.k1 .ks{--c:var(--sakura-2)}.k2 .ks{--c:var(--butter-2)}.k3 .ks{--c:var(--lav-2)}.k4 .ks{--c:var(--mint-2);right:16px}
/* Mini-Szene unten im Panel */
.mv{position:relative;flex:none;height:96px;margin-top:auto;overflow:hidden;isolation:isolate;border-radius:16px;background:var(--mvb,var(--sakura));box-shadow:inset 0 0 0 1.5px var(--mvl,var(--sakura-2));container-type:inline-size}
.k2 .mv{--mvb:var(--butter);--mvl:var(--butter-2)}.k3 .mv{--mvb:var(--lav);--mvl:var(--lav-2)}.k4 .mv{--mvb:var(--mint);--mvl:var(--mint-2)}
/* 1 · Karte suchen, Preis steht da */
.mv-q{position:absolute;left:12px;right:84px;top:12px;display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;overflow:hidden;border-radius:999px;background:#fff;box-shadow:0 0 0 1.5px var(--ink);font:800 14px/1 var(--round);white-space:nowrap}
.mv-q svg{flex:none;color:var(--ink-2)}
.mv-q .t{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mv-q .caret{flex:none;width:2px;height:16px;margin-left:-4px;border-radius:2px;background:var(--ichigo)}
.mv-card{position:absolute;right:16px;top:10px;width:46px;height:auto;border-radius:4px;box-shadow:0 0 0 3px #fff,0 12px 18px -10px rgba(30,27,57,.6);rotate:6deg}
.mv-tag{position:absolute;right:52px;bottom:8px;z-index:2;padding:4px 12px 5px;border-radius:12px;background:#fff;box-shadow:0 12px 18px -12px rgba(30,27,57,.55),inset 0 0 0 1.5px var(--line);rotate:-4deg}
.mv-tag small{display:block;color:var(--ink-2);font-size:12px;font-weight:700;white-space:nowrap}
.mv-tag b{display:block;font:800 18px/1.1 var(--round);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 2 · Ankaufsliste absenden */
.mv-slip{position:absolute;inset:10px 12px;display:flex;flex-direction:column;justify-content:space-between;padding:8px 10px;border-radius:13px;background:#fff;box-shadow:0 12px 18px -14px rgba(30,27,57,.5)}
.mv-slip .row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:13px;font-weight:700}
.mv-slip .row img{width:20px;height:auto;border-radius:2px}
.mv-slip .row .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-slip .row b{font:800 14px/1 var(--round);font-variant-numeric:tabular-nums;white-space:nowrap}
.mv-slip .send{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;height:30px;overflow:hidden;border-radius:999px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:760}
.mv-slip .send .ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;background:var(--ichigo)}
/* 3 · Umschlag geht auf den Weg – Versand oder Laden */
.mv-route{position:absolute;left:44px;right:44px;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:linear-gradient(90deg,rgba(69,53,166,.55) 55%,transparent 0) 0 0/11px 3px;transform-origin:left}
.mv-i{position:absolute;top:50%;display:grid;place-items:center;width:36px;height:36px;margin-top:-18px;border-radius:50%}
.mv-i.a{--icon-bg:var(--lav-ink);left:10px;background:var(--lav-ink);color:#fff}
.mv-i.b{right:10px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--lav-2);color:var(--lav-ink)}
.mv-env{position:absolute;left:50%;top:30px;z-index:1;width:82px;height:56px;margin-left:-41px;border-radius:9px;background:var(--sakura-2)}
.mv-env img{position:absolute;left:50%;top:-18px;z-index:1;width:40px;height:auto;margin-left:-20px;border-radius:3px;box-shadow:0 0 0 2px #fff}
.mv-env .f{position:absolute;inset:14px 0 0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;padding:5px;border-radius:0 0 9px 9px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--sakura-2);clip-path:polygon(0 0,50% 42%,100% 0,100% 100%,0 100%)}
.mv-env .jp{padding:3px 4px;border-radius:5px;background:var(--ichigo);color:#fff;font:800 12px/1 var(--round)}
/* 4 · Geld – geprüft, gestempelt, als Guthaben hervorgehoben */
.mv-amt{position:absolute;left:16px;top:50%;translate:0 -50%}
.mv-amt small{display:block;color:var(--mint-ink);font-size:12px;font-weight:760}
.mv-amt b{display:block;color:var(--money);font:800 30px/1.1 var(--round);letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.mv-hk{position:absolute;right:74px;top:50%;display:grid;place-items:center;width:58px;height:58px;margin-top:-29px;border:2.5px solid var(--ichigo);border-radius:50%;background:rgba(255,255,255,.92);color:var(--ichigo);font:900 12.5px/1.05 var(--round);text-align:center;rotate:-14deg}
.mv-hk::before{content:"";position:absolute;inset:3px;border:1.2px solid rgba(207,46,102,.55);border-radius:50%}
.mv-goose{position:absolute;right:8px;bottom:-6px;width:56px}
.mv-goose .goose{display:block;width:100%;height:auto}
/* Schmale Panels (4 Spalten): Betrag, Stempel und Gans rücken zusammen */
@container (max-width:270px){
  .mv-amt{left:12px}
  .mv-amt b{font-size:23px}
  .mv-hk{right:52px;width:48px;height:48px;margin-top:-24px;font-size:12px}
  .mv-goose{right:6px;width:44px}
  .mv-q{right:72px}
  .mv-tag{right:40px}
}

/* Bühne der Geschichte: ein Manga-Panel mit Tusche-Rahmen und schräger Kante */
.scene{--poly:polygon(0 0,100% 0,calc(100% - 28px) 100%,0 100%);position:relative;isolation:isolate;height:min(540px,calc(100vh - var(--stick) - 72px));min-height:440px}
.scene::before{content:"";position:absolute;inset:0;z-index:-3;background:var(--ink);clip-path:var(--poly)}
.scene::after,.scene .kfx,.sc-in{position:absolute;inset:3px 4px 4.5px 3px;clip-path:var(--poly);pointer-events:none}
.scene::after{content:"";z-index:-2;background:#fff}
.scene .kfx{z-index:-1}
.scene .tn{--tp:10px;opacity:0;transition:opacity .5s ease}
.scene .tn.s1{filter:url(#k-t-sakura);--ramp:radial-gradient(80% 80% at 0 100%,rgb(0 0 0/.6) 0,rgb(255 255 255/.6) 62%)}
.scene .tn.s2{filter:url(#k-t-butter);--ramp:radial-gradient(80% 80% at 100% 0,rgb(0 0 0/.6) 0,rgb(255 255 255/.6) 62%)}
.scene .tn.s3{filter:url(#k-t-lav);--ramp:linear-gradient(0deg,rgb(0 0 0/.6) 0,rgb(255 255 255/.6) 56%)}
.scene .tn.s4{filter:url(#k-t-mint);--ramp:radial-gradient(80% 80% at 100% 100%,rgb(0 0 0/.6) 0,rgb(255 255 255/.6) 62%)}
.scene[data-s="1"] .tn.s1,.scene[data-s="2"] .tn.s2,.scene[data-s="3"] .tn.s3,.scene[data-s="4"] .tn.s4{opacity:1}
.sc-in{overflow:hidden}
.sc-cap{position:absolute;left:20px;top:20px;z-index:6;display:flex;align-items:center;gap:12px;height:38px;padding:0 14px 0 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1.5px var(--ink),0 8px 16px -12px rgba(30,27,57,.5)}
.sc-cap .jp{color:var(--ichigo);font-size:12px;letter-spacing:.04em}
.dots{display:flex;gap:5px}
.dots i{position:relative;width:22px;height:6px;overflow:hidden;border-radius:9px;background:var(--line-2)}
.dots i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ichigo);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.scene[data-s="1"] .dots i:nth-child(-n+1)::after,.scene[data-s="2"] .dots i:nth-child(-n+2)::after,.scene[data-s="3"] .dots i:nth-child(-n+3)::after,.scene[data-s="4"] .dots i::after{transform:none}
/* Geräusch-Wort je Schritt: schlägt beim Erreichen ein und ragt über den Rahmen */
.sc-sfx{--s:54px;--r:8deg;right:40px;top:-14px;opacity:0;scale:.55;transition:opacity .16s ease,scale .38s cubic-bezier(.2,1.5,.45,1)}
.sc-sfx.s1{--c:var(--sakura-2)}.sc-sfx.s2{--c:var(--butter-2)}.sc-sfx.s3{--c:var(--lav-2)}.sc-sfx.s4{--c:var(--mint-2);--s:46px;right:30px}
.scene[data-s="1"] .sc-sfx.s1,.scene[data-s="2"] .sc-sfx.s2,.scene[data-s="3"] .sc-sfx.s3,.scene[data-s="4"] .sc-sfx.s4{opacity:1;scale:1}
/* Leinwand 560×480, per --k auf die Panelgröße skaliert */
.cv{position:absolute;left:50%;top:55%;width:560px;height:480px;transform:translate(-50%,-50%) scale(var(--k,1))}
.sc-lines{position:absolute;left:410px;top:176px;width:860px;aspect-ratio:1;background:var(--mint-2);opacity:0;scale:1.3;translate:-50% -50%;
  -webkit-mask:var(--k-focus) center/100% 100% no-repeat;mask:var(--k-focus) center/100% 100% no-repeat;transition:opacity .25s ease,scale .7s var(--ease-out)}
.pc-grp{position:absolute;left:0;top:0;width:150px;height:260px;transform:translate(118px,122px) rotate(-6deg);transition:transform .8s var(--ease-io)}
.sc-card{position:absolute;left:0;top:0;z-index:2;width:150px;height:auto;border-radius:8px;box-shadow:0 0 0 4px #fff,0 26px 36px -20px rgba(30,27,57,.7);transition:transform .5s var(--ease-io)}
.env-b,.env-f{position:absolute;left:-22px;width:194px;border-radius:12px;opacity:0;transition:opacity .3s ease}
.env-b{top:112px;z-index:1;height:150px;background:var(--sakura-2)}
.env-f{top:136px;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;height:128px;padding:12px 14px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--sakura-2);color:var(--ink);font:800 13px/1 var(--round);clip-path:polygon(0 0,50% 40%,100% 0,100% 100%,0 100%)}
.env-f .jp{padding:4px 6px;border-radius:7px;background:var(--ichigo);color:#fff;font-size:12px}
.sc-hk{position:absolute;left:30px;top:118px;z-index:4;display:grid;place-items:center;width:112px;height:112px;border:3px solid var(--ichigo);border-radius:50%;background:rgba(255,255,255,.92);color:var(--ichigo);font:900 22px/1.05 var(--round);text-align:center;opacity:0;transform:scale(1.8) rotate(-40deg);transition:opacity .12s ease,transform .32s cubic-bezier(.2,1.6,.45,1)}
.sc-hk::before{content:"";position:absolute;inset:5px;border:1.5px solid rgba(207,46,102,.55);border-radius:50%}
.sc-search{position:absolute;left:80px;top:40px;display:flex;align-items:center;gap:12px;width:400px;height:58px;padding:0 7px 0 20px;border-radius:999px;background:#fff;box-shadow:0 0 0 1.5px var(--ink),0 0 0 6px rgba(255,255,255,.7),0 20px 30px -18px rgba(30,27,57,.6);font:800 20px/1 var(--round);transition:opacity .3s ease,transform .45s var(--ease-out)}
.sc-search>svg{flex:none;color:var(--ink-2)}
.sc-search .q{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-search .caret{flex:none;width:2px;height:24px;margin-left:-8px;border-radius:2px;background:var(--ichigo)}
.sc-search .go{display:grid;flex:none;place-items:center;width:44px;height:44px;margin-left:auto;border-radius:50%;background:var(--ichigo);color:#fff}
.cv .sc-tag{position:absolute;left:300px;top:250px;padding:10px 16px 11px 28px;rotate:4deg;transition:opacity .3s ease,transform .45s var(--ease-out)}
.cv .sc-tag b{font-size:30px}
.cv .sc-tag small{font-size:12.5px}
.slip{position:absolute;left:276px;top:70px;width:264px;padding:16px 16px 14px;border-radius:20px;background:#fff;box-shadow:0 26px 40px -24px rgba(30,27,57,.6),0 0 0 1.5px var(--line);opacity:0;transform:translateY(40px) rotate(3deg);transition:opacity .3s ease,transform .5s var(--ease-out)}
.slip::before{content:"";position:absolute;inset:6px;border:1.5px dashed var(--line-2);border-radius:15px;pointer-events:none}
.slip .h{display:flex;align-items:center;gap:8px;margin-bottom:12px;font:800 16px/1 var(--round)}
.slip .row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding-bottom:10px;border-bottom:1.5px dashed var(--line-2);font-size:14px;font-weight:680}
.slip .row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slip .row img{width:30px;height:auto;border-radius:3px}
.slip .row b,.slip .sum b{font:800 16px/1.15 var(--round);font-variant-numeric:tabular-nums}
.slip .sum{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-size:14px;font-weight:720}
.sl-m{display:grid;grid-template-columns:1fr 1.15fr;gap:2px;margin-bottom:10px;padding:3px;border-radius:999px;background:var(--bg);font-size:12px;font-weight:760;text-align:center;white-space:nowrap}
.sl-m span{padding:6px 4px;border-radius:999px;color:var(--ink-2);transition:background-color .3s ease,color .3s ease}
body:not([data-pay="credit"]) .sl-m span:first-child{background:var(--ink);color:#fff}
[data-pay="credit"] .sl-m span:last-child{background:var(--money);color:#fff}
.slip .send{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:42px;overflow:hidden;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:760}
.slip .send .ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ichigo);clip-path:inset(0 100% 0 0);transition:clip-path .45s var(--ease-out) .55s}
.route{position:absolute;left:70px;top:429px;width:420px;height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(69,53,166,.5) 55%,transparent 0) 0 0/12px 3px;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-io)}
.rt-i{position:absolute;top:404px;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--lav-ink);color:#fff;opacity:0;transform:scale(.8);transition:opacity .25s ease,transform .3s var(--ease-out)}
.rt-i.a{--icon-bg:var(--lav-ink);left:32px}
.rt-i.b{left:478px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--lav-2);color:var(--lav-ink)}
.money{position:absolute;left:286px;top:92px;width:252px}
.money .al{display:flex;align-items:center;gap:8px;color:var(--mint-ink);font-size:13px;font-weight:760;opacity:0;transition:opacity .3s ease}
.gh-pill{display:inline-grid;place-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--money);color:#fff;font-size:12px;font-weight:800}
.money .amt{display:block;color:var(--money);font:800 58px/1.15 var(--round);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .45s var(--ease-out)}
.money .gh-alt{margin-top:2px;color:var(--ink-2);font-size:13px;font-weight:650;opacity:0;transition:opacity .3s ease .45s}
.money ul{display:flex;flex-direction:column;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.money li{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px 0 7px;border-radius:999px;background:#fff;box-shadow:0 14px 22px -16px rgba(10,99,64,.6),inset 0 0 0 1.5px var(--mint-2);font-size:15px;font-weight:740;opacity:0;transform:translateY(-36px) rotate(-3deg);transition:opacity .25s ease,transform .5s var(--ease-out)}
.money li .ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--mint-ink)}
.money li.gh{background:var(--money);box-shadow:0 0 0 3px var(--mint),0 16px 26px -14px rgba(10,99,64,.75);color:#fff}
.money li.gh .ic{background:#fff;color:var(--money)}
.sc-goose{position:absolute;left:190px;top:338px;z-index:5;width:80px;opacity:0;transform:translateY(30px);transform-origin:50% 100%;transition:opacity .25s ease,transform .45s var(--spring)}
.sc-goose .goose{display:block;width:100%;height:auto}
/* Zustände je Schritt (Übergänge, also jederzeit umkehrbar beim Zurückscrollen) */
.scene:not([data-s="1"]) .sc-search{opacity:0;transform:translateY(-24px) scale(.94)}
.scene:not([data-s="1"]) .sc-tag{opacity:0;transform:translateY(-20px) scale(.9)}
.scene[data-s="2"] .pc-grp{transform:translate(52px,120px) rotate(-10deg) scale(.95)}
.scene[data-s="2"] .slip{opacity:1;transform:none}
.scene[data-s="2"] .slip .send .ok{clip-path:inset(0)}
.scene[data-s="3"] .pc-grp{transform:translate(205px,110px) rotate(0) scale(1.02);transition-delay:.4s;transition-duration:1.1s}
.scene[data-s="3"] .sc-card{transform:translateY(64px) scale(.9)}
.scene:is([data-s="3"],[data-s="4"]) :is(.env-b,.env-f){opacity:1}
.scene[data-s="3"] .route{transform:none}
.scene[data-s="3"] .rt-i{opacity:1;transform:none}
.scene[data-s="3"] .rt-i.b{transition-delay:.9s}
.scene[data-s="4"] .pc-grp{transform:translate(62px,104px) rotate(-4deg) scale(.96)}
.scene[data-s="4"] .sc-card{transform:translateY(-14px) rotate(-2deg)}
.scene[data-s="4"] .sc-hk{opacity:1;transform:rotate(-14deg);transition-delay:.45s}
.scene[data-s="4"] :is(.money .amt,.money .al){opacity:1;transform:none;transition-delay:.3s}
.scene[data-s="4"] .money .gh-alt{opacity:1}
.scene[data-s="4"] .money li{opacity:1;transform:none}
.scene[data-s="4"] .money li.gh{transform:scale(1.04)}
.scene[data-s="4"] .money li:nth-child(1){transition-delay:.55s}.scene[data-s="4"] .money li:nth-child(2){transition-delay:.62s}.scene[data-s="4"] .money li:nth-child(3){transition-delay:.69s}.scene[data-s="4"] .money li:nth-child(4){transition-delay:.76s}
.scene[data-s="4"] .sc-goose{opacity:1;transform:none;transition-delay:.7s}
.scene[data-s="4"] .sc-lines{opacity:.85;scale:1;transition-delay:.2s}

/* Breit + Bewegung: Bühne klebt, Schritte laufen rechts vorbei (Leiste von Stempel zu Stempel, gefüllt bis zum aktuellen Schritt) */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .js-seen .story:not(.no-scene){display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:64px;align-items:start}
  .js-seen .story:not(.no-scene) .story-l{position:sticky;top:calc(var(--stick) + 24px);display:block}
  .js-seen .story:not(.no-scene) .koma-row{display:block}
  .js-seen .story:not(.no-scene) .koma{display:grid;grid-template-columns:74px minmax(0,1fr);gap:24px;align-items:start;min-height:50vh;padding:0 0 40px}
  .js-seen .story:not(.no-scene) .koma:first-child{min-height:40vh}
  .js-seen .story:not(.no-scene) .koma:last-child{min-height:48vh}
  .js-seen .story:not(.no-scene) .koma :is(.kfx,.ks,.mv){display:none}
  .js-seen .story:not(.no-scene) .stamp{margin:0;transition:transform .35s var(--spring),box-shadow .3s ease}
  .js-seen .story:not(.no-scene) .koma.on .stamp{box-shadow:inset 0 0 0 6px #fff,0 0 0 2.5px var(--ink),0 14px 22px -14px rgba(30,27,57,.55);transform:rotate(-8deg) scale(1.06)}
  .js-seen .story:not(.no-scene) .st-tx{margin:6px 0 0}
  .js-seen .story:not(.no-scene) .koma h3{margin-bottom:8px;color:var(--ink-3);font:800 clamp(22px,2vw,28px)/1.15 var(--round);letter-spacing:-.015em;transition:color .3s ease}
  .js-seen .story:not(.no-scene) .koma.on h3{color:var(--ink)}
  .js-seen .story:not(.no-scene) .koma p{max-width:40ch;font-size:16px}
  .js-seen .story:not(.no-scene) .koma::before,.js-seen .story:not(.no-scene) .koma::after{display:block;inset:auto;left:36px;top:37px;bottom:-37px;z-index:-1;width:0;clip-path:none}
  .js-seen .story:not(.no-scene) .koma::before{background:none;border-left:2px dashed var(--line-2)}
  .js-seen .story:not(.no-scene) .koma::after{width:2px;border-radius:2px;background:var(--ichigo);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out)}
  .js-seen .story:not(.no-scene) .koma.past::after{transform:none}
  .js-seen .story:not(.no-scene) .koma:last-child::before,.js-seen .story:not(.no-scene) .koma:last-child::after{display:none}
}
/* 4-Koma mit Bewegung (schmal): jedes Panel tuscht sich einmal ein, die Mini-Szene spielt einmal */
@media (prefers-reduced-motion:no-preference) and (max-width:899px){
  .js-seen .koma:not(.seen){opacity:0;translate:0 18px}
  .koma{transition:opacity .5s ease,translate .7s var(--ease-out)}
  .js-seen .koma.seen .ks{animation:ksIn .4s cubic-bezier(.2,1.5,.45,1) .3s both}
  @keyframes ksIn{from{opacity:0;scale:.4;rotate:-14deg}}
  .js-seen .koma:not(.seen) .mv-q .t{clip-path:inset(0 100% 0 0)}
  .js-seen .koma:not(.seen) .mv-card{opacity:0;translate:0 14px;rotate:0deg}
  .js-seen .koma:not(.seen) .mv-tag{opacity:0;scale:.7}
  .js-seen .koma:not(.seen) .mv-slip{opacity:0;translate:0 14px}
  .js-seen .koma:not(.seen) .mv-slip .ok{clip-path:inset(0 100% 0 0)}
  .js-seen .koma:not(.seen) .mv-env{opacity:0;scale:.9}
  .js-seen .koma:not(.seen) .mv-env img{opacity:0;translate:0 -26px}
  .js-seen .koma:not(.seen) .mv-route{transform:scaleX(0)}
  .js-seen .koma:not(.seen) .mv-i.b{opacity:0;scale:.8}
  .js-seen .koma:not(.seen) .mv-amt{opacity:0;translate:0 calc(-50% + 10px)}
  .js-seen .koma:not(.seen) .mv-hk{opacity:0;scale:1.8;rotate:-40deg}
  .js-seen .koma:not(.seen) .mv-goose{opacity:0;translate:0 22px}
  .mv-q .t{transition:clip-path .5s steps(6,end) .35s}
  .mv-card{transition:opacity .25s ease .55s,translate .45s var(--ease-out) .55s,rotate .45s var(--ease-out) .55s}
  .mv-tag{transition:opacity .2s ease .8s,scale .4s var(--spring) .8s}
  .mv-slip{transition:opacity .3s ease .25s,translate .45s var(--ease-out) .25s}
  .mv-slip .ok{transition:clip-path .45s var(--ease-out) .75s}
  .mv-env{transition:opacity .25s ease .25s,scale .35s var(--ease-out) .25s}
  .mv-env img{transition:opacity .2s ease .45s,translate .45s var(--ease-io) .45s}
  .mv-route{transition:transform .8s var(--ease-io) .75s}
  .mv-i.b{transition:opacity .25s ease 1.45s,scale .3s var(--ease-out) 1.45s}
  .mv-amt{transition:opacity .3s ease .3s,translate .45s var(--ease-out) .3s}
  .mv-hk{transition:opacity .12s ease .7s,scale .32s cubic-bezier(.2,1.6,.45,1) .7s,rotate .32s cubic-bezier(.2,1.6,.45,1) .7s}
  .mv-goose{transition:opacity .25s ease .95s,translate .45s var(--spring) .95s}
}
@media (prefers-reduced-motion:no-preference) and (min-width:761px) and (max-width:899px){
  .koma:nth-child(even){transition-delay:.08s}
}

/* ================= Versand & Sicherheit: ein großes Panel mit schräg geschnittener Ecke */
.sec-tight{padding-top:56px}
.ship{--cut:64px;--poly:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);padding:54px 58px 40px}
.ship .tn{--tp:10px;--ramp:radial-gradient(42% 66% at 100% 0,rgb(0 0 0/.6) 0,rgb(255 255 255/.6) 62%);filter:url(#k-t-mint)}
.cut{position:absolute;right:4px;top:6px;z-index:2;display:grid;place-items:center;width:66px;height:66px;border:2.5px solid var(--ichigo);border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 14px -8px rgba(140,29,69,.45);color:var(--ichigo);font:900 15px/1 var(--round);letter-spacing:.04em;rotate:12deg}
.cut::before{content:"";position:absolute;inset:4px;border:1.2px solid rgba(207,46,102,.6);border-radius:50%}
.ship .chap h2{margin-bottom:38px}
.ruler{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));max-width:calc(var(--n,3) * 240px);margin:0 0 40px;padding:0;list-style:none}
.ruler::before{content:"";position:absolute;left:calc(50% / var(--n,3));right:calc(50% / var(--n,3));top:31px;border-top:2px dashed var(--line-2)}
.ruler li{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.ruler .rmk{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--st);box-shadow:inset 0 0 0 5px #fff,0 0 0 1.5px var(--st2)}
.ruler b{font:800 15px/1 var(--round);font-variant-numeric:tabular-nums;white-space:nowrap}
.ruler li:nth-child(1){--st:var(--sakura);--st2:var(--sakura-2)}
.ruler li:nth-child(2){--st:var(--butter);--st2:var(--butter-2)}
.ruler li:nth-child(3){--st:var(--mint);--st2:var(--mint-2)}
.ruler .rl{color:var(--ink-2);font-size:13.5px;font-weight:720}
.ship-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 40px;margin:0}
.ship-grid dt{display:flex;align-items:center;gap:12px;margin-bottom:9px;font:800 17px/1.25 var(--round);letter-spacing:-.005em}
.ship-grid dd{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55}
.ship-grid dd b{color:var(--ink);font-weight:760;white-space:nowrap}
.ship-grid dd b.wr{white-space:normal}
.ship-grid a,.ship-links a{color:var(--ichigo);font-weight:700;text-underline-offset:2px}
.ship-grid .ic{display:grid;flex:none;place-items:center;width:40px;height:40px;border-radius:13px}
.ship-grid .c1,.ship-grid .c5{--icon-bg:var(--sakura);background:var(--sakura);color:var(--sakura-ink)}
.ship-grid .c2,.ship-grid .c6{--icon-bg:var(--butter);background:var(--butter);color:var(--butter-ink)}
.ship-grid .c3{--icon-bg:var(--lav);background:var(--lav);color:var(--lav-ink)}
.ship-grid .c4{--icon-bg:var(--mint);background:var(--mint);color:var(--mint-ink)}
.ship-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;margin:32px 0 0;padding-top:16px;border-top:1.5px dashed var(--line-2);color:var(--ink-2);font-size:14px}
.ship-links>span{display:inline-flex;align-items:center;gap:8px}
.ship-links>span>svg{flex:none;color:var(--ink-2)}
.ship-links a{display:inline-flex;align-items:center;min-height:40px}
.ship-links .wd{flex-basis:100%;align-items:flex-start}
.ship-links .wd>svg{margin-top:12px}
.ship-links .wd>span{line-height:1.5}

/* ================= Preis-Beleg */
.doc{position:relative;isolation:isolate;padding:60px;border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-2)}
.doc::before{content:"";position:absolute;inset:12px;z-index:-1;border:1.5px dashed var(--line-2);border-radius:calc(var(--r-xl) - 8px);pointer-events:none}
.price{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.doc .chap h2{margin-bottom:38px}
.doc .sub{margin:-26px 0 30px}
.lead2{max-width:46ch;margin:0 0 28px;color:var(--ink-2);font-size:18px}
.doc .formula{margin-bottom:28px}
.formula .eq{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.fine{max-width:62ch;margin:0 0 26px;color:var(--ink-2);font-size:14.5px}
.panel{position:relative;padding:0 0 0 44px}
.panel::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1.5px dashed var(--line-2);pointer-events:none}
.panel h3{margin:0 0 16px;font-size:21px}
.cscale{display:flex;flex-direction:column;gap:9px}
.crow{display:grid;grid-template-columns:48px minmax(0,1fr) 64px;gap:12px;align-items:center}
.crow b{display:grid;place-items:center;height:32px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font:800 13px/1 var(--round)}
.crow:first-child b{background:var(--ink);box-shadow:none;color:#fff}
.crow .nm{font-size:14.5px;font-weight:580}
.crow .nm i{display:block;width:var(--w);height:7px;margin-top:5px;border-radius:7px;background:var(--sakura-2);transform-origin:left;transition:transform .6s var(--ease-out)}
.crow:first-child .nm i{background:var(--ichigo)}
.crow .pc{font:800 19px/1 var(--round);font-variant-numeric:tabular-nums;text-align:right}
.js-seen .panel:not(.seen) .crow .nm i{transform:scaleX(0)}
.panel.seen .crow:nth-child(2) .nm i{transition-delay:.04s}.panel.seen .crow:nth-child(3) .nm i{transition-delay:.08s}.panel.seen .crow:nth-child(4) .nm i{transition-delay:.12s}.panel.seen .crow:nth-child(5) .nm i{transition-delay:.16s}.panel.seen .crow:nth-child(6) .nm i{transition-delay:.2s}
.panel .note{margin:18px 0 26px;color:var(--ink-2);font-size:13.5px}
.panel .note a{font-weight:700}
.bx-ex{margin:-4px 0 14px;color:var(--ink-2);font-size:14px}
.bx-ex b{color:var(--ink)}
.payout{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.payout>button{position:relative;display:block;padding:16px 18px;border:0;border-radius:var(--r-m);text-align:left;cursor:pointer;touch-action:manipulation;transition:box-shadow .25s ease,transform .2s var(--spring)}
.payout>button:active{transform:scale(.98)}
.payout>button[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--ichigo)}
.payout .pk{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ichigo);color:#fff;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .25s var(--spring)}
.payout>button[aria-pressed="true"] .pk{opacity:1;transform:none}
.payout .p1{background:var(--ink);color:#fff}
.payout .p1 small{color:#CBC8E0}
.payout .p2{background:var(--mint);color:var(--ink)}
.payout .p2 small{color:#1F4A3A}
.payout .l{display:block;font-size:13px;font-weight:750}
.payout .v{display:block;font:800 44px/1.1 var(--round);letter-spacing:-.03em;white-space:nowrap}
.payout small{display:block;font-size:12.5px;line-height:1.35}
.doc-hanko{position:absolute;left:37%;bottom:46px;display:grid;place-items:center;width:96px;height:96px;border:3px solid rgba(207,46,102,.7);border-radius:50%;color:rgba(207,46,102,.85);font:800 20px/1.1 var(--round);text-align:center;rotate:-14deg;pointer-events:none}
.doc-hanko::before{content:"";position:absolute;inset:5px;border:1.5px solid rgba(207,46,102,.55);border-radius:50%}

/* ================= Beliebte Karten 人気: Karte kippt mit Folienglanz und dreht sich um – Beleg 査定表 */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:38px}
.hot-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
.pseg.pseg-sm button{min-height:34px;padding:0 12px;font-size:13px}
.head-row h2,.head-row .chap h2{margin:0}
.hcards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.hcard{position:relative;display:flex;flex-direction:column;padding:12px 12px 14px;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1);transition:box-shadow .2s ease,transform .2s var(--ease-out)}
.hcard .im{position:relative}
.flipbtn{position:relative;display:block;width:100%;aspect-ratio:63/88;padding:0;border:0;border-radius:4.8%/3.4%;background:none;cursor:pointer;perspective:1100px;touch-action:manipulation}
.flipbtn:focus-visible{outline-offset:4px}
.flip{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .52s var(--ease-io)}
.face{position:absolute;inset:0;display:block;border-radius:4.8%/3.4%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.hcard .tilt{position:relative;display:block;width:100%;height:100%;border-radius:inherit;will-change:transform}
.hcard .tilt img{width:100%;height:100%;border-radius:inherit;object-fit:cover;box-shadow:0 12px 20px -14px rgba(30,27,57,.6)}
.face.bk{display:flex;flex-direction:column;padding:12px 11px 10px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1.5px var(--sakura-2),0 12px 20px -14px rgba(30,27,57,.6);color:var(--ink);text-align:left;transform:rotateY(180deg)}
.face.bk::before{content:"";position:absolute;inset:5px;border:1.5px dashed var(--sakura-2);border-radius:9px;pointer-events:none}
.hcard.flipped .flip{transform:rotateY(180deg)}
.bk-h{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:2px 2px 8px;color:var(--ink-2);font-size:12px;font-weight:760}
.bk-h .jp{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--sakura);color:var(--sakura-ink);font-size:12px}
.bk-l{display:flex;flex:1;flex-direction:column;justify-content:center;gap:6px}
.bk-r{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 2px}
.bk-r b{display:grid;flex:none;place-items:center;min-width:34px;height:26px;border-radius:9px;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line);font:800 12px/1 var(--round)}
.bk-r:first-child b{background:var(--ink);box-shadow:none;color:#fff}
.bk-r [data-price]{font:800 17px/1.15 var(--round);letter-spacing:-.01em}
.bk-na{color:var(--ink-2);font-size:13px;font-weight:600}
.face.bk small{display:block;margin:8px 34px 0 2px;color:var(--ink-2);font-size:12px;font-weight:600;line-height:1.3}
.face.fr .v{position:absolute;left:8px;top:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;max-width:calc(100% - 16px);padding:3px 8px;overflow:hidden;border-radius:999px;background:var(--sakura);box-shadow:0 0 0 2px #fff;color:var(--sakura-ink);font-size:12px;font-weight:780;text-overflow:ellipsis;white-space:nowrap}
/* Auge: Details mit allen Zuständen und Sprachen (Karten-Dialog) */
.hcard .eye{position:absolute;right:7px;bottom:7px;z-index:3;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 0 2px var(--sakura-2),0 6px 12px -8px rgba(30,27,57,.6);color:var(--sakura-ink);cursor:pointer;touch-action:manipulation;transition:background-color .16s ease,transform .16s var(--ease-out)}
.hcard .eye::after{content:"";position:absolute;inset:-7px}
.hcard .eye:active{transform:scale(.92)}
/* Ausgewählt: kleiner 査定-Stempel auf der Kachel */
.hcard .sel{position:absolute;right:4px;top:4px;z-index:5;display:grid;place-items:center;width:44px;height:44px;border:2.5px solid var(--ichigo);border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 6px 12px -8px rgba(140,29,69,.5);color:var(--ichigo);font:800 12px/1 var(--round);letter-spacing:.02em;rotate:-14deg;opacity:0;scale:.8;pointer-events:none;transition:opacity .15s ease,scale .2s var(--ease-out)}
.hcard .sel::before{content:"";position:absolute;inset:3px;border:1.2px solid rgba(207,46,102,.55);border-radius:50%}
.hcard.picked .sel{opacity:1;scale:1}
.hcard.picked .face.fr .v{max-width:calc(100% - 56px)}
.hcard.picked.flipped .sel{opacity:0}
.hcard .meta{flex:1;padding:12px 4px 0}
.hcard .t{position:relative;font-size:15.5px;font-weight:760;line-height:1.2}
.hcard .t a{color:var(--ink);text-decoration:none;text-decoration-thickness:1.5px;text-underline-offset:3px}
.hcard .s{overflow:hidden;color:var(--ink-2);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.hcard .p{position:relative;margin:12px 0 0;padding:10px 4px 0;border-top:1.5px dashed var(--line-2)}
.hcard .p::before,.hcard .p::after{content:"";position:absolute;top:-8px;width:14px;height:14px;border-radius:50%;background:var(--bg)}
.hcard .p::before{left:-19px}.hcard .p::after{right:-19px}
.hcard .p small{display:flex;justify-content:space-between;gap:6px;color:var(--ink-2);font-size:12px;font-weight:700}
.hcard .p small .jp{color:var(--ichigo);font-size:12px}
.hcard .p b{display:block;font:800 25px/1.2 var(--round);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hcard .p .cr{color:var(--money);font-size:12px;font-weight:680}
[data-pay="credit"] .hcard .p .cr{color:var(--ink-2)}
.hcard .add{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;margin-top:12px;padding:0 10px;border:0;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink);font-size:14px;font-weight:720;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background-color .16s ease,color .16s ease,transform .2s var(--spring),box-shadow .16s ease}
.hcard .add:active{transform:scale(.95)}
.hcard .add svg{transition:transform .2s var(--ease-out)}
.hcard .add.on{background:var(--ink);box-shadow:none;color:#fff}
.hcard .add.on svg{transform:rotate(45deg)}
.hcard .add.armed{background:var(--butter);box-shadow:inset 0 0 0 1.5px var(--butter-ink);color:var(--butter-ink)}
.hcard .add.busy{opacity:.75}

/* FAQ */
.faqwrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.faqwrap .side{position:sticky;top:calc(var(--stick) + 22px)}

/* Wer kauft an 安心 */
.whobuys{display:grid;grid-template-columns:minmax(0,.9fr) repeat(4,minmax(0,1fr));overflow:hidden;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
.whobuys .th{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:22px 26px;background:var(--ink);color:#fff}
.whobuys .th .jp{color:var(--butter-2);font-size:12px}
.whobuys .th b{font:800 18px/1.2 var(--round)}
.whobuys .ti{display:flex;align-items:flex-start;gap:12px;padding:22px 20px;border-left:1.5px dashed var(--line-2);color:var(--ink-2);font-size:14px;line-height:1.4}
.whobuys .ti:nth-child(2){border-left:0}
.whobuys .ti b{display:block;margin-bottom:2px;color:var(--ink);font-size:14.5px;font-weight:760}
.whobuys .ti .ic{display:grid;flex:none;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--bg);color:var(--ink)}
.whobuys .ti a{font-weight:700}

/* ================= Bewegung (nur ohne „weniger Bewegung“) */
@media (prefers-reduced-motion:no-preference){
  /* Signatur-Moment, einmal, sobald die Bühne im Bild ist (.go): Linien schießen auf, Karten werden ausgeteilt, die Gans
     stempelt 査定済 – ドン！ –, キラッ blitzt am Holo, der Sticker schlägt mit Burst ein. Danach steht alles still.
     Ohne JS (kein .intro) stehen alle Teile sofort da. */
  .stage.intro:not(.go) :is(.lines,.fan,.ptag,.hbadge,.sfx,.mascot,.hspark){opacity:0}
  .stage.go .lines{animation:linesIn .8s var(--ease-out) .12s both}
  @keyframes linesIn{from{opacity:0;scale:1.28}}
  .stage.go .fan{animation:dealIn 1s var(--ease-out) both}
  .stage.go .fan.f1{animation-delay:.1s}.stage.go .fan.f3{animation-delay:.18s}.stage.go .fan.f2{animation-delay:.26s}
  @keyframes dealIn{from{opacity:0;transform:translate(0,26%) rotate(0deg) scale(.9)}}
  .stage.go .ptag{animation:tagIn .7s var(--spring) .8s both}
  .stage.go .ptag.t1{animation-delay:.72s}.stage.go .ptag.t3{animation-delay:.86s}
  .stage.go .ptag.t2{animation:tagIn .7s var(--spring) .8s both,thud .3s ease-out 1.5s}
  @keyframes tagIn{from{opacity:0;scale:.6}}
  @keyframes thud{40%{scale:.97}}
  .stage.go .mascot{animation:hop .62s var(--spring) 1.22s both}
  @keyframes hop{40%{transform:translate(-14px,-16px) rotate(-10deg)}}
  .stage.go .hk-tag{animation:hanko .5s cubic-bezier(.2,1.6,.45,1) 1.42s both}
  @keyframes hanko{from{opacity:0;scale:2.3;rotate:-40deg}60%{opacity:1}}
  .stage.go .hbadge{animation:stampIn .7s var(--spring) .95s both}
  @keyframes stampIn{from{opacity:0;scale:1.8}}
  .stage.go .hbadge .bburst{animation:burstIn .55s cubic-bezier(.2,1.5,.45,1) 1.02s both}
  @keyframes burstIn{from{opacity:0;scale:.5;rotate:-40deg}}
  .stage.go .sfx.kira{animation:kiraIn .5s var(--spring) 1.02s both}
  @keyframes kiraIn{from{opacity:0;scale:.3;rotate:-30deg}}
  .stage.go .sfx.don{animation:donIn .38s cubic-bezier(.2,1.5,.45,1) 1.46s both}
  @keyframes donIn{from{opacity:0;scale:2;filter:blur(3px)}}
  .stage.go .gbubble{animation:balIn .34s var(--spring) 1.8s both}
  @keyframes balIn{from{opacity:0;scale:.7;translate:8px 6px}}
  /* Funkeln und Blinzeln je einmal beim Auftritt – keine Endlosschleifen */
  .stage.go .hspark.s1{animation:twinkle 1.1s ease-in-out 1.7s 1 both}
  @keyframes twinkle{0%,100%{scale:.7;opacity:.8;rotate:0deg}50%{scale:1.15;opacity:1;rotate:20deg}}
  .stage.go .mascot .eye{animation:blink .2s ease-in-out 2.15s 2}
  @keyframes blink{50%{transform:scaleY(.12)}}
  /* Schalter auf Guthaben: Sticker hüpft einmal, Burst blitzt auf */
  .hbadge.pop,.stage.go .hbadge.pop{animation:bpop .5s var(--spring)}
  @keyframes bpop{40%{scale:1.13}}
  .hbadge.pop .bburst,.stage.go .hbadge.pop .bburst{animation:bflash .5s ease-out}
  @keyframes bflash{0%{scale:.86;rotate:-26deg}45%{scale:1.1}}
  /* Tausch-Beispiel: einmal beim ersten Sichtkontakt – Karten legen sich hin, der Tausch-Pfeil dreht und pulst einmal,
     das Ergebnis-Ticket stempelt auf, Funken blitzen, die Gans hüpft. Danach steht alles still. Ohne JS: alles sofort da. */
  .js-seen .tex:not(.seen) .tex-cards>*{opacity:0;transform:translateY(22px)}
  .js-seen .tex:not(.seen) .tex-res{opacity:0;transform:scale(1.3)}
  .js-seen .tex:not(.seen) .tex-sp{opacity:0}
  .tex-cards>*{transition:opacity .35s ease .1s,transform .6s var(--ease-out) .1s}
  .tex .give .tex-cards>:nth-child(2){transition-delay:.18s}
  .tex .get .tex-cards>*{transition-delay:.28s}
  .tex-res{transition:opacity .15s ease .95s,transform .45s cubic-bezier(.2,1.5,.45,1) .95s}
  .tex.seen .tex-swap{animation:texSwap .8s var(--spring) .5s 1 both}
  @keyframes texSwap{0%{transform:none}45%{transform:scale(1.22) rotate(120deg)}100%{transform:rotate(180deg)}}
  .tex.seen .tex-sp{animation:twinkle 1.1s ease-in-out 1.15s 1 both}
  .tex.seen .tex-goose{animation:hop .62s var(--spring) 1.35s 1 both}
  /* Versand-Panel: Stempel 発送 setzt beim ersten Sichtkontakt auf */
  .js-seen .ship:not(.seen) .cut{opacity:0;scale:.5;rotate:-20deg}
  .cut{transition:opacity .2s ease .25s,scale .45s cubic-bezier(.2,1.5,.45,1) .25s,rotate .45s var(--ease-out) .25s}
  /* Beliebte Karten: kurze Bestätigung beim Auswählen */
  .hcard.picked{animation:picked .42s var(--spring)}
  @keyframes picked{40%{scale:1.025}}
}

/* ================= Nur mit echter Maus */
@media (hover:hover) and (pointer:fine){
  .game-chip:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-2px)}
  .trade-hint:hover{box-shadow:0 0 0 2.5px var(--ink),8px 8px 0 var(--ink);transform:translate(-2px,-2px)}
  .trade-hint:hover .go svg,.bx:hover .go svg{transform:translateX(3px)}
  .th-swap img{transition:transform .35s var(--ease-out)}
  .trade-hint:hover .th-swap .c1{transform:rotate(-14deg) translateX(-4px)}
  .trade-hint:hover .th-swap .c2{transform:rotate(13deg) translateX(4px)}
  .pseg button[aria-pressed="false"]:hover{color:var(--ink)}
  .htrust a:hover,.ship-grid a:hover,.ship-links a:hover{color:var(--ichigo-hover)}
  .hcard .eye:hover{background:var(--sakura-2)}
  .bx:hover{box-shadow:var(--sh-2);transform:translateY(-5px)}
  .bx.bu:hover .gb-c1{transform:translate(-2px,-6px)}
  .bx.bu:hover .gb-c2{transform:translateY(-9px)}
  .bx.bu:hover .gb-c3{transform:translate(2px,-6px)}
  .bx.big:hover .blines{opacity:.2;scale:1}
  .bx.big:hover .mini img:nth-child(1){transform:rotate(-20deg) translate(-12px,-10px)}
  .bx.big:hover .mini img:nth-child(2){transform:rotate(-2deg) translateY(-24px)}
  .bx.big:hover .mini img:nth-child(3){transform:rotate(18deg) translate(12px,-8px)}
  .payout>button[aria-pressed="false"]:hover{box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--line-2);transform:translateY(-2px)}
  .tk-btn:not(:disabled):hover{background:var(--ink);color:#fff}
  .tr-go:hover svg{transform:translateX(3px)}
  .tr-more:hover{text-decoration-thickness:2.5px}
  .gcard:hover{box-shadow:var(--sh-2);transform:translateY(-6px)}
  .gcard:hover .top img{transform:translateX(-50%) rotate(3deg) translateY(-18px) scale(1.04)}
  .gcard:hover .arr{background:var(--ink);color:#fff}
  .hcard:hover{box-shadow:var(--sh-2)}
  .hcard .t a:hover{text-decoration:underline}
  .hcard .add:not(.on):not(.armed):hover{background:var(--ichigo);box-shadow:none;color:#fff}
}

/* ================= Responsiv */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:minmax(0,1fr);min-height:0}
  .stage{max-width:700px;height:560px;margin:0 auto}
  .stage .lines{width:900px}
  .htrust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .htrust li:nth-child(3){border-left:0}
  .htrust li:nth-child(n+3){border-top:1.5px dashed var(--line-2)}
  .koma-row{grid-template-columns:1fr 1fr}
  .k3{--x1:0px;padding-left:30px}
  .k2{--x3:0px}
  .ship-grid{grid-template-columns:1fr 1fr}
  .price,.faqwrap{grid-template-columns:minmax(0,1fr);gap:44px}
  .panel{padding:32px 0 0}
  .panel::before{right:0;bottom:auto;border-left:0;border-top:1.5px dashed var(--line-2)}
  .doc{padding:48px 36px}
  .doc-hanko{left:auto;right:30px;top:30px;bottom:auto}
  .faqwrap .side{position:static}
  .tr-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "ex" "how";grid-template-rows:auto;gap:0}
  .tr-lead{margin-bottom:64px}
  .tex{justify-self:start;width:100%;max-width:700px}
  .tr-how{margin-top:52px}
  .games{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .hcards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .whobuys{grid-template-columns:1fr 1fr}
  .whobuys .th{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:12px}
  .whobuys .ti:nth-child(2n){border-left:0}
  .whobuys .ti:nth-child(n+4){border-top:1.5px dashed var(--line-2)}
}
@media (max-width:760px){
  .hero{padding:24px 0 16px}
  .hero h1{margin-bottom:18px;font-size:clamp(29px,8.2vw,40px)}
  .lead{margin-bottom:26px;font-size:16.5px}
  .trade-hint{flex-wrap:wrap;gap:12px 14px;margin-top:14px;padding:14px}
  .th-swap{width:88px;height:66px}
  .th-swap img{width:46px;height:64px}
  .trade-hint .tx{flex:1 1 150px}
  .trade-hint .go{justify-content:center;width:100%}
  .th-sfx{right:4px}
  .game-chips{margin:22px 0 20px}
  .game-chip{height:44px}
  .scol{align-items:stretch}
  .scol .stage{width:auto;height:470px;margin:4px -16px 0}
  .stage .lines{top:45%;width:600px}
  .disc{top:45%;width:330px}
  .disc::after{inset:-22px}
  .fan{top:43%;width:37%}
  .fan.f2{width:43%}
  .fan.f1{--x:-60%}.fan.f3{--x:62%}
  .tags .ptag{padding:6px 10px 7px 21px;border-radius:12px}
  .tags .ptag::before{left:8px;top:17px;width:7px;height:7px}
  .tags .ptag b{font-size:18px}
  .ptag.t1{left:2%;top:25%}
  .ptag.t3{right:2%;top:59%}
  .ptag.t2{left:15%;top:56%;padding:9px 12px 0 23px;border-radius:16px}
  .ptag.t2::before{left:9px;top:21px;width:8px;height:8px}
  .tags .ptag.t2 b{font-size:26px}
  .ptag.t2 small{margin-bottom:8px;font-size:12px}
  .ptag .stub{margin:0 -12px 0 -23px;padding:7px 11px 8px;border-radius:0 0 16px 16px;font-size:12px}
  .hk-tag{right:-18px;top:-20px;width:46px;height:46px;border-width:2px;font-size:12px}
  .sfx.don{--s:38px;left:1%;top:37%}
  .sfx.kira{--s:22px;left:24%;top:9.5%}
  .hbadge{right:3%;top:1%;width:106px;height:106px}
  .hbadge .mid b{font-size:22px}
  .hbadge .mid small{margin-top:3px;font-size:12px;letter-spacing:-.02em}
  .hbadge .mid .jp{margin-bottom:3px;font-size:12px}
  .mascot{right:4%;width:82px}
  .gbubble{top:-10px;padding:8px 12px 19px 11px;font-size:12px}
  .stage .hspark.s1{left:60%;top:3%}
  .stage .hspark.s2{left:4%;bottom:10%}
  .under{justify-content:flex-start;gap:12px;width:100%;margin:4px 0 0}
  .paymode,.pseg{width:100%}
  .pseg button{min-height:44px;padding:0 10px}
  .htrust{grid-template-columns:minmax(0,1fr);margin-top:26px}
  .htrust li{padding:15px 16px;border-left:0}
  .htrust li:nth-child(n+2){border-top:1.5px dashed var(--line-2)}
  .ticker{padding:0 16px}
  .ticker-in{height:56px}
  .track a{height:56px;font-size:14px}
  .ticker-lbl{padding:0 12px 0 6px;font-size:13px}
  .ticker-lbl b{width:40px;height:40px}
  .ticker-lbl span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tk-nav{display:none}
  .tk-view{margin-right:4px}
  .sec{padding-top:80px}
  .sec h2,.trade h2{margin-bottom:28px}
  .sub,.doc .sub{margin:-18px 0 26px;font-size:16px}
  .chap{gap:12px}
  .tate{margin-top:3px;padding:10px 5px 8px;font-size:13px}
  .hk{padding:4px 7px 3px;font-size:12px}
  .bento{grid-template-columns:minmax(0,1fr)}
  .bx.big{grid-row:auto;min-height:440px}
  .bx{min-height:0;padding:26px}
  .bx h3{font-size:25px}
  .bx .bx-spark{right:8%;top:45%}
  .trade{margin-top:80px;padding:72px 0 76px}
  .tr-wm{left:-18px;top:-44px;font-size:150px}
  .tr-lead{margin-bottom:58px;font-size:16.5px}
  /* Beispiel-Panel kompakt: zwei Spalten mit kleinen Karten, Pfeil dazwischen, Ticket darunter */
  .tex{--poly:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);padding:34px 20px 22px 12px}
  .tex-lines{top:38%;width:620px}
  .tex-ex{left:12px;top:-15px;height:30px;padding:0 12px 0 10px;font-size:13px}
  .tex-goose{right:22px;top:-56px;width:60px}
  .tex-ball{right:84px;top:-52px;padding:7px 12px 19px 11px;font-size:12.5px}
  .tex-row{grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr);gap:2px}
  .tex-h{height:26px;margin-bottom:12px;padding:0 10px;font-size:12.5px}
  .tex-cards{width:96px}
  .tex-cards img,.tex-cards .ph{box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--ink),0 16px 22px -12px rgba(30,27,57,.55)}
  .two .give .tex-cards img:first-child{translate:-16px 4px}
  .two .give .tex-cards img:nth-child(2){translate:14px -3px}
  .tex-tag{margin-top:-20px;padding:6px 9px 7px 20px;border-radius:12px}
  .tex-tag::before{left:7px;top:15px;width:7px;height:7px}
  .tex-tag b{font-size:18px}
  .tex-nm{margin-top:9px;font-size:12.5px}
  .tex-mid{gap:8px;padding-top:79px}
  .tex-swap{width:48px;height:48px;box-shadow:0 0 0 2px var(--ink),3px 3px 0 var(--ink)}
  .tex-swap svg{width:24px;height:24px}
  .tex-bonus{padding:5px 4px 6px;border-radius:12px}
  .tex-bonus b{font-size:16px}
  .tex-res{gap:0 8px;margin-top:22px;padding:11px 16px 12px;border-radius:16px;box-shadow:4px 4px 0 var(--lav-2)}
  .tex-res .eq{font-size:20px}
  .tex-res b{font-size:28px}
  .tex-res .l{font-size:15px}
  .tex-note{margin-top:13px;font-size:12.5px}
  .tex .hspark.tex-sp{--s:18px;right:-12px;top:-11px}
  .tex-res .hspark.tex-sp{right:auto;left:-9px;top:-11px;--s:18px}
  .is-plain .tex-tag b{font-size:15px}
  .tr-how{margin-top:44px}
  .tr-steps{gap:20px}
  .tr-steps::before{left:23px;top:38px;bottom:38px}
  .tr-steps li{grid-template-columns:48px minmax(0,1fr);gap:14px}
  .tr-steps .n{width:48px;height:48px;font-size:21px}
  .tr-steps .tx{padding-top:2px;font-size:15px}
  .tr-steps strong{font-size:18px}
  .tr-facts{gap:7px}
  .tr-facts li{font-size:13.5px}
  .tr-cta{flex-direction:column;align-items:stretch;gap:6px}
  .tr-go{width:100%;font-size:17px}
  .tr-more{justify-content:center}
  .tr-legal{align-items:flex-start}
  .games{grid-template-columns:1fr 1fr;gap:26px 12px}
  .gcard .top{height:132px}
  .gcard .body{padding:32px 14px 14px}
  .gcard strong{font-size:17px}
  .gcard .arr{display:none}
  .gcard .sfx.gk{--s:22px;bottom:26px}
  .gcard:last-child:nth-child(odd){grid-column:1/-1}
  .gcard:last-child:nth-child(odd) .top img{width:28%}
  .koma-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .koma,.k2,.k3,.k4{--x1:0px;--x3:0px;min-height:0;padding:26px 24px 30px}
  .k1{--y3:16px}
  .k2,.k3{--y1:16px;--y3:16px;padding-top:36px}
  .k4{--y1:16px;padding-top:36px}
  .koma .tn{--ramp:radial-gradient(70% 34% at 100% 0,rgb(0 0 0/.6) 0,rgb(255 255 255/.6) 64%)}
  .koma .stamp{width:60px;height:60px;margin-bottom:16px}
  .koma .stamp i{width:24px;height:24px;font-size:12px;line-height:24px}
  .koma h3{font-size:18px}
  .sfx.ks{--s:24px;right:18px;top:24px}
  .k2 .ks,.k3 .ks,.k4 .ks{top:34px}
  .st-tx{margin-bottom:16px}
  .mv{height:88px}
  .mv-q{top:10px}
  .mv-tag{bottom:6px}
  .mv-slip{inset:8px 10px;padding:7px 9px}
  .mv-env{top:26px}
  .sec-tight{padding-top:44px}
  .ship{--cut:40px;padding:40px 20px 24px}
  .cut{right:-2px;top:-4px;width:52px;height:52px;font-size:12.5px}
  .ship .chap h2{margin-bottom:28px}
  .ruler{margin-bottom:30px}
  .ruler .rmk{width:54px;height:54px}
  .ruler::before{top:27px}
  .ruler b{font-size:13.5px}
  .ruler .rl{font-size:12.5px}
  .ship-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .ship-grid dt{font-size:16px}
  .doc{padding:44px 20px 28px;border-radius:26px}
  .doc::before{inset:8px;border-radius:20px}
  .doc-hanko{right:16px;top:-26px;width:68px;height:68px;background:#fff;box-shadow:0 0 0 4px var(--bg);font-size:14px}
  .doc .chap h2{margin-bottom:28px}
  .lead2{font-size:16.5px}
  .formula{flex-direction:column;align-items:flex-start;gap:6px}
  .formula .op{margin-left:22px}
  .payout .v{font-size:32px}
  .payout>button{padding:14px}
  .head-row{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:28px}
  .hot-tools{justify-content:flex-start}
  .hcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hcards .hcard:nth-child(n+7){display:none}
  .hcard{padding:8px 8px 10px;border-radius:20px}
  .hcard .p::before{left:-15px}.hcard .p::after{right:-15px}
  .hcard .p b{font-size:21px}
  .whobuys{grid-template-columns:minmax(0,1fr)}
  .whobuys .th{padding:18px 20px}
  .whobuys .ti{padding:16px 20px;border-left:0}
  .whobuys .ti:nth-child(n+3){border-top:1.5px dashed var(--line-2)}
}
@media (max-width:380px){
  .pseg button{font-size:13px}
  .eqn{font-size:13px}
}
/* Weniger Bewegung: Zustände wechseln ruhig per Überblendung, nichts fliegt oder dreht */
@media (prefers-reduced-motion:reduce){
  .scene .slip,.scene .money li,.scene .money .amt,.scene .sc-hk,.scene .sc-tag,.scene .sc-search,.scene .sc-goose{transform:none!important}
  .scene:not([data-s="4"]) .sc-hk{opacity:0}
  .money .gh-alt{transition:none}
  .th-swap img{transition:none}
  .flip{transform:none!important;transition:none}
  .face.bk{opacity:0;transform:none;transition:opacity .2s ease}
  .hcard.flipped .face.bk{opacity:1}
  .hcard .sel{scale:1}
}