/* TCG Direkt – ein Designsystem für alle Seiten.
   Farben: Papier, Tinte, Ultra (Blau), Volt (Gelb); Typfarben je Produktart. */
:root{
  --paper:#ECEDF0; --card:#D3D5DA; --line:#C2C5CD; --ink:#0F1222; --ink-2:#3C4153; --ink-3:#5B6072;
  --ultra:#1B2BC9; --ultra-deep:#101C8F; --volt:#FFD21A; --volt-press:#F0C000; --white:#FFFFFF;
  --navy:#0B1230; --night:#04050F;
  --ok:#177A42; --warn:#B3331A; --rec:#D42A1C;
  --fire:#C8361F; --water:#1A6CC8; --grass:#177A42; --psy:#8A3BCF; --bolt:#F2B807; --fight:#B4572A;
  --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,monospace;
  --gutter:clamp(16px,4vw,48px); --max:1360px; --r:8px;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --head-h:60px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.5;overflow-x:hidden;overflow-x:clip;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1}
img,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,figure{margin:0}
:focus-visible{outline:3px solid var(--ultra);outline-offset:3px}   /* 1.5.83: kein border-radius mehr (machte Pillen beim Fokus eckig), outline folgt der Form */
.on-dark :focus-visible{outline-color:var(--volt)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r);transition:top .2s}
.skip:focus{top:8px}

/* ---------- Seitenübergänge (View Transitions, Mehrseiten) ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
::view-transition-old(root){animation:.18s ease-out both vt-out}
::view-transition-new(root){animation:.34s var(--ease) both vt-in}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:var(--ease)}
::view-transition-group(kopf){animation:none}
::view-transition-old(kopf),::view-transition-new(kopf){animation:none;mix-blend-mode:normal}
.head{view-transition-name:kopf}
.strip{view-transition-name:streifen}
::view-transition-group(streifen){animation:none}
::view-transition-old(streifen),::view-transition-new(streifen){animation:none;mix-blend-mode:normal}

/* ---------- Strip + Kopf ---------- */
.strip{background:#060A1E;color:#E6E8F2;font-size:12.5px;line-height:1.3}
.strip .wrap{padding-block:8px;text-align:center}
.strip-wn{display:inline-block;height:14px;width:auto;vertical-align:-2px;margin-left:2px}
@media (max-width:519px){.strip-x{display:none}}
/* Rico 19.10.: Navy-Kopf mit Kursiv-Wortmarke, Suche, Vorteilen, Navigation mit gelbem Unterstrich */
.head{position:sticky;top:0;z-index:40;background:var(--navy);color:#fff;box-shadow:0 1px 0 #ffffff14,0 10px 24px -18px #000c}
.head-row{display:flex;align-items:center;gap:4px;height:var(--head-h)}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto;min-height:44px;color:#fff}
.marke{display:inline-flex;align-items:center;gap:8px;font:italic 900 20px/1 var(--display);font-stretch:116%;letter-spacing:-.015em;white-space:nowrap;color:#fff}
.marke b{font-weight:900;color:var(--volt)}
.marke .ic{width:30px;height:30px;flex:none}
.hsuche,.hvort,.nav,.kl{display:none}
.iconbtn{position:relative;flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:999px;cursor:pointer;text-decoration:none}
.iconbtn:hover{background:#0f12221a}
.head .iconbtn:hover{background:#ffffff1a}
.count{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--volt);color:var(--ink);font:800 11px/20px var(--display);text-align:center;transition:transform .2s}
.count[data-n="0"]{background:#3A4266;color:#fff}
.count.bump{animation:bump .5s var(--ease)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.4)}100%{transform:scale(1)}}
@media (max-width:379px){.marke{font-size:17.5px}.marke .ic{width:26px;height:26px}}
@media (min-width:1000px){
  :root{--head-h:116px}
  .head-row{height:70px;gap:24px}
  .brand{margin-right:0}
  .marke{font-size:28px;gap:10px}.marke .ic{width:40px;height:40px}
  .sbtn,.menubtn{display:none}
  .hsuche{display:flex;position:relative;flex:1;max-width:560px;margin-inline:auto}
  .hsuche input{width:100%;height:44px;border-radius:999px;border:1.5px solid #ffffff33;background:#ffffff12;color:#fff;padding:0 52px 0 20px;font-size:15px}
  .hsuche input::placeholder{color:#B4BAD3;opacity:1}
  .hsuche input:focus{outline:3px solid var(--volt);outline-offset:2px;border-color:transparent}
  .hsuche button{position:absolute;right:2px;top:0;width:44px;height:44px;border:0;border-radius:999px;background:none;color:#fff;display:grid;place-items:center;cursor:pointer}
  .hsuche button:hover{color:var(--volt)}
  .kbtn{width:auto;height:56px;padding:4px 10px 0;border-radius:10px;align-content:center;gap:2px}
  .kbtn .count{right:2px}
  .kl{display:block;font-size:11.5px;font-weight:700;color:#DDE1F2}
  .nav{display:block;border-top:1px solid #ffffff12}
  .nav .wrap{display:flex;justify-content:center;align-items:stretch;gap:2px;height:46px}
  .nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:#DDE1F2;font-weight:700;font-size:14.5px;text-decoration:none;transition:color .2s}
  .nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--volt);transform:scaleX(0);transition:transform .35s var(--ease)}
  .nav a:hover{color:#fff}.nav a:hover::after{transform:scaleX(.45)}
  .nav a[aria-current]{color:var(--volt)}.nav a[aria-current]::after{transform:none}
}
@media (min-width:1280px){
  .hvort{display:flex;gap:22px;list-style:none;margin:0;padding:0}
  .hvort li{display:flex;gap:10px;align-items:center;font-size:12px;line-height:1.3;color:#B4BAD3;white-space:nowrap}
  .hvort b{display:block;color:#fff;font-size:12.5px;font-weight:700}
  .hvort .ico{width:28px;height:28px;stroke-width:1.6}
}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:2px solid transparent;font-weight:700;font-size:15.5px;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .2s var(--ease),border-color .2s}
.btn:active{transform:scale(.97)}
.btn .ico{width:20px;height:20px;transition:transform .3s var(--ease)}
.btn:hover .ico{transform:translateX(3px)}
.btn-volt{background:var(--volt);color:var(--ink)}
.btn-volt:hover{background:var(--volt-press)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#262B45}
.btn-ultra{background:var(--ultra);color:#fff}
.btn-ultra:hover{background:var(--ultra-deep)}
.btn-ghost{border-color:currentColor;background:none}
.btn-ghost:hover{background:#ffffff1f}
.on-light .btn-ghost:hover,.btn-ghost.on-light:hover{background:var(--card)}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;text-underline-offset:4px;text-decoration-thickness:2px}
.link-arrow .ico{width:18px;height:18px;transition:transform .3s var(--ease)}
.link-arrow:hover .ico{transform:translateX(4px)}

/* ---------- Typo / Abschnitte ---------- */
.eyebrow{font:600 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.h1{font-weight:800;font-size:clamp(34px,6vw,64px);line-height:1;letter-spacing:-.025em;text-wrap:balance}
.h2{font-weight:800;font-size:clamp(26px,4vw,42px);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.lead{font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--ink-2);max-width:56ch}
.sec{padding-block:clamp(44px,7vw,96px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px 32px;margin-bottom:clamp(20px,3vw,36px)}
.sec-head p{max-width:46ch;color:var(--ink-2)}
.page-head{padding-block:clamp(20px,4vw,48px) clamp(18px,3vw,32px)}
.page-head .h1{margin-top:6px}
.page-head .lead{margin-top:14px}
.crumbs{display:flex;flex-wrap:nowrap;min-width:0;align-items:center;gap:0 8px;font-size:13.5px;color:var(--ink-3);padding-top:6px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-underline-offset:3px}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.entwurf{display:inline-block;font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.03em;background:var(--volt);color:var(--ink);padding:6px 8px;border-radius:4px}
.hinweis{border:1.5px solid var(--ink);border-radius:var(--r);background:var(--white);padding:16px 18px;font-size:15px}
.hinweis b{display:block;font-size:17px;margin-bottom:2px}
.hinweis.gelb{background:#FFF3B8;border-color:#B88A00}

/* ---------- Plakatschrift: Archivo kursiv, breit, schwer (Rico 19.10.) ---------- */
.disp{font-family:var(--display);font-style:italic;font-weight:900;font-stretch:116%;text-transform:uppercase;letter-spacing:-.012em;line-height:.9;text-wrap:balance}
.disp em{font-style:italic;color:var(--volt)}
.tracked{font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.3em;text-transform:uppercase;text-wrap:balance}

/* ---------- Hero: Blau-Gelb-Blitz-Banner, Text links ---------- */
.hero{position:relative;display:grid;background:#011038;color:var(--white);overflow:hidden;isolation:isolate}
/* Bühne (1.5.39): Poster und Video füllen den Hero, Displays unten (Handy) bzw. rechts (Desktop), Text darüber auf Navy-Verlauf */
.hero-poster{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
.hero-poster img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.hero-vid{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%;opacity:0;transition:opacity .4s}
.hero-vid.an{opacity:1}   /* erst sichtbar, wenn es läuft: kein Aufblitzen, Poster liegt deckungsgleich darunter */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#011038 0%,#011038e0 40%,#01103899 calc(100% - 64vw),#01103800 calc(100% - 52vw)),linear-gradient(0deg,#011038 0%,#01103800 9%)}
.hero-in{grid-area:1/1;align-self:start;width:100%;padding-block:24px calc(28px + 59.6vw)}   /* Handy: Displays stehen ca. 28 px unter den Knöpfen */
.hero h1{font-size:clamp(29px,9.6vw,96px);text-shadow:0 3px 28px #00103c99}
@media (max-width:359px){.hero .cta{gap:8px}.hero .cta .btn{padding-inline:15px;font-size:14.5px;gap:8px}}
.hero .tracked{margin-top:12px;font-size:clamp(10.5px,2.8vw,15px);letter-spacing:.2em;color:#E3E8FF}
.hero-lead{margin-top:10px;font-size:clamp(15px,1.25vw,18px);line-height:1.45;color:#DCE2FF;max-width:42ch;text-shadow:0 1px 12px #00103c}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
@media (min-width:700px){
  .hero{min-height:0;height:clamp(560px,40vw,680px)}
  .hero-poster img{object-position:100% 50%}
  .hero-vid{object-position:100% 50%}
  .hero::after{background:linear-gradient(90deg,#011038 0%,#011038e6 30%,#01103880 44%,#01103800 56%),linear-gradient(0deg,#011038 0%,#01103800 12%)}
  .hero-in{align-self:center;padding-block:40px}
  .hero-in>*{max-width:min(48vw,700px)}
  .hero .hero-lead{max-width:min(36vw,440px)}
  .hero h1{font-size:clamp(36px,3.7vw,66px)}
  .hero .tracked{font-size:clamp(11px,1vw,14px);letter-spacing:.3em}
}

/* ---------- Vorteile-Leiste ---------- */
/* Laufband (1.5.54): eine Zeile, endlos, Ränder weich ausgeblendet; Pause bei Hover bzw. Finger (shop.js), bei reduzierter Bewegung wischbare Reihe */
.vort{position:relative;background:var(--navy);color:#B4BAD3;overflow:hidden;overflow-x:clip}
.vort::before,.vort::after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:clamp(32px,9vw,140px);pointer-events:none}
.vort::before{left:0;background:linear-gradient(90deg,var(--navy),#0b123000)}
.vort::after{right:0;background:linear-gradient(270deg,var(--navy),#0b123000)}
.vort-lauf{display:flex;width:max-content;animation:vortlauf 70s linear infinite}
.vort:hover .vort-lauf,.vort.halt .vort-lauf{animation-play-state:paused}
.vort ul{list-style:none;margin:0;padding:0;display:flex}
.vort li{flex:none;display:flex;gap:10px;align-items:center;padding:12px 26px;border-right:1px solid #ffffff1f;font-size:12.5px;line-height:1.3;white-space:nowrap}
.vort b{display:block;color:#fff;font-size:13.5px}
.vort .ico{flex:none;width:26px;height:26px;color:var(--volt);stroke-width:1.6}
@media (min-width:1200px){.vort li{padding:16px 34px;font-size:13px}.vort b{font-size:14px}.vort .ico{width:30px;height:30px}}
@keyframes vortlauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .vort{display:flex;overflow-x:auto;scrollbar-width:none}.vort::before{display:none}.vort::after{position:sticky;right:0;flex:none;margin-left:calc(-1 * clamp(32px,9vw,140px))}
  .vort::-webkit-scrollbar{display:none}
  .vort-lauf{animation:none}.vort ul[aria-hidden],.vort li[aria-hidden]{display:none}
}

/* ---------- Kategorie-Kacheln ---------- */
.kats{padding-top:clamp(14px,2vw,26px)}
.kat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:1000px){.kat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.kat{position:relative;display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;color:#fff;text-decoration:none;background:var(--navy);isolation:isolate;box-shadow:0 14px 30px -18px #0b123099}
@media (min-width:600px){.kat{aspect-ratio:4/3.4}}
.kat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--ease)}
.kat::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#060a24e6 0%,#060a2480 30%,#060a2400 56%,#060a2400 70%,#060a2499 100%)}
.kat-t{position:absolute;left:14px;top:14px;right:12px;display:grid;gap:6px}
.kat b{font-size:clamp(16px,4.3vw,34px);font-stretch:100%}
.kat small{font-size:13px;font-weight:600;line-height:1.3;color:#E9ECF8}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;color:var(--ink);font-weight:800;font-size:13px;line-height:1;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;box-shadow:0 6px 18px -8px #000a;transition:background .2s}
.pill .ico{width:18px;height:18px;transition:transform .3s var(--ease)}
.kat .pill{position:absolute;left:12px;bottom:12px}
.kat:hover .pill,.kat:focus-visible .pill{background:var(--volt)}
.kat:hover .pill .ico,.promo:hover .pill .ico{transform:translateX(3px)}
.kat:hover img{transform:scale(1.05)}
@media (min-width:1000px){.kat-t{left:20px;top:20px}.kat .pill{left:18px;bottom:18px}.kat b{font-stretch:112%;font-size:clamp(20px,1.8vw,30px)}}
@media (min-width:1000px) and (max-width:1199px){.kat b{font-stretch:100%;font-size:18px}} /* 1024 px: „Trainer-Boxen“ bleibt einzeilig */
@media (max-width:1199px){.m-weg{display:none}}
@media (max-width:599px){.kat .pill{padding:0 14px}}
@media (prefers-reduced-motion:reduce){.kat:hover img,.promo:hover img{transform:none}}

/* ---------- Was rippst du heute: Chips mit Farbkante ---------- */
.sec-tight{padding-block:clamp(28px,3.5vw,48px) 0}
.sec-tight .h2{font-size:clamp(24px,3vw,34px)} /* Startseite dichter wie Referenz 3/4: Ware vor Überschrift */
.sec-tight .sec-head{margin-bottom:clamp(14px,2vw,22px)}
.reg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:760px){.reg{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:759px){.reg a:last-child:nth-child(odd){grid-column:1/-1}}   /* ungerade Anzahl: kein einzelner Rest */
@media (min-width:1100px){.reg{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}}   /* alle Arten in einer Reihe */
.reg a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:84px;padding:12px 12px 16px 14px;background:var(--white);border-radius:10px;text-decoration:none;overflow:hidden;box-shadow:0 1px 2px #0f12220f,0 8px 18px -12px #0f122240;transition:transform .35s var(--ease),box-shadow .35s}
.reg a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c)}
.reg a:hover{transform:translateY(-3px);box-shadow:0 1px 2px #0f12220f,0 14px 24px -12px #0f122255}
.reg span{min-width:0}
.reg b{display:block;font-weight:800;font-size:15.5px;line-height:1.2;hyphens:auto}
.reg small{display:block;margin-top:3px;font-size:12.5px;line-height:1.3;color:var(--ink-3)}
.reg img{width:46px;height:58px;flex:none;object-fit:cover;border-radius:4px;transform:rotate(6deg);box-shadow:0 4px 10px -4px #0f122266}
@media (prefers-reduced-motion:reduce){.reg a:hover{transform:none}}

/* ---------- Werbebanner ---------- */
.promos{display:grid;gap:14px}
@media (min-width:900px){.promos{grid-template-columns:1fr 1fr;gap:18px}}
.promo{position:relative;display:block;aspect-ratio:16/8;border-radius:14px;overflow:hidden;text-decoration:none;isolation:isolate;color:var(--ink)}
@media (max-width:519px){.promo{aspect-ratio:4/3}}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:-2;transition:transform .9s var(--ease)}
.promo::before{content:"";position:absolute;inset:0;z-index:-1}
.promo-hell::before{background:linear-gradient(90deg,#ffffffd9 0%,#ffffff8c 40%,#fff0 68%)}
.promo-rot{color:#fff}
.promo-rot::before{background:linear-gradient(90deg,#0b1230d9 0%,#0b123066 48%,#0b123000 72%)}
.promo:hover img{transform:scale(1.04)}
.promo-t{position:absolute;left:clamp(18px,3vw,36px);top:50%;transform:translateY(-50%);display:grid;justify-items:start;gap:12px;max-width:70%}
.promo b{font-size:clamp(34px,4.4vw,64px)}
.promo-hell b em{color:var(--ultra)}
.promo .tracked{font-size:11px;letter-spacing:.24em}
.pill-volt{background:var(--volt)}
.promo:hover .pill-volt{background:#fff}
.promo-rot:hover .pill-volt{background:#fff}

/* ---------- Produktkarten ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
@media (min-width:760px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 20px}}
@media (min-width:1100px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.prod{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.prod-img{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:color-mix(in srgb,var(--c,#9aa) 20%,#F4F5F7);transform:translateZ(0)}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.prod:hover .prod-img img{transform:scale(1.05)}
.badges{position:absolute;left:8px;top:8px;display:flex;flex-wrap:wrap;gap:4px}
.badge{font:600 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.03em;background:var(--ink);color:#fff;padding:6px 7px;border-radius:4px}
.badge.b-pre{background:var(--volt);color:var(--ink)}
.badge.b-new{background:var(--ultra)}
.prod-meta{display:flex;justify-content:space-between;gap:8px;font:500 11px/1.3 var(--mono);color:var(--ink-3);margin-top:4px}
.prod-meta .lang{color:var(--ink);font-weight:600}
.prod h3{font-weight:800;font-size:16px;line-height:1.22;letter-spacing:-.01em;text-wrap:balance}
.prod h3 a{text-decoration:none}
.prod h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.prod .inhalt{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.stock{display:flex;align-items:flex-start;gap:7px;font-size:13px;line-height:1.35;color:var(--ink-2)}
.rar{width:14px;height:14px;flex:none;margin-top:2px}
.livehint{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;line-height:1.35;font-weight:600;color:#A5260F}
.livehint i{width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--rec);flex:none}
.buy{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;position:relative;z-index:2}
.price{font-weight:800;font-size:19px;letter-spacing:-.01em;line-height:1.1;font-variant-numeric:tabular-nums}
.price small{display:block;font-weight:500;font-size:11px;color:var(--ink-3);letter-spacing:0}
.tick{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;border-radius:999px;border:0;background:var(--ink);color:#fff;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s var(--ease)}
.tick:hover{background:#262B45}
.tick:active{transform:scale(.95)}
.tick .box{width:22px;height:22px;flex:none}
.tick .box .bag{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.tick .box .ok{fill:none;stroke:var(--volt);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .45s var(--ease)}
.tick.done .box .bag{fill:var(--volt);stroke:var(--volt)}
.tick.done .box .ok{stroke-dashoffset:0;stroke:var(--navy)}
.tick .t-long{display:none}
@media (min-width:1100px){.tick .t-long{display:inline}}
.tilt-wrap{perspective:700px}
.prod-img img{will-change:transform}
@media (prefers-reduced-motion:reduce){.prod:hover .prod-img img{transform:none}}

/* ---------- Scroll-Einblenden ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 55ms)}
  html.js [data-reveal].in{opacity:1;transform:none}
}

/* ---------- Live-Block (Whatnot, einmal je Ansicht) ---------- */
.live{position:relative;background:var(--night);color:var(--white);overflow:hidden;isolation:isolate}
.live-bg{position:relative;margin:0;aspect-ratio:2/1}
.live-bg picture,.phead-bg picture,.kat picture,.promo picture,.nl-fig picture{display:contents}
.live-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.live-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#04050f00 62%,var(--night))}
.live-in{position:relative;padding-block:0 clamp(40px,6vw,88px)}
.live :is(h1,h2){font-size:clamp(40px,11vw,104px);margin-top:-6px}
.live .tracked{margin-top:14px;color:#C9CDDC;font-size:clamp(10.5px,2.8vw,14px);letter-spacing:.2em}
.live .lead{color:#C9CDDC;margin-top:16px;max-width:52ch}
@media (min-width:900px){
  .live-bg{position:absolute;inset:0;aspect-ratio:auto;z-index:-1}
  .live-bg img{object-position:70% 50%}
  .live-bg::after{background:linear-gradient(90deg,#04050ff5 0%,#04050feb 38%,#04050fa6 58%,#04050f33 80%)}
  .live-in{padding-block:clamp(64px,7vw,112px)}
  .live-in>*{max-width:600px}
  .live :is(h1,h2){font-size:clamp(44px,6vw,104px);margin-top:0}
}
.ld{display:inline-block;width:9px;height:9px;flex:none;border-radius:50%;background:var(--volt)}
@media (prefers-reduced-motion:no-preference){.ld{animation:breathe 2.6s infinite}}
@keyframes breathe{50%{opacity:.3}}
.nextbox{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1.5px solid #ffffff40;border-radius:var(--r)}
.nextbox b{display:block;font-size:18px;color:#fff;line-height:1.2}
.nextbox span{font-size:13.5px;color:#C9CDDC}
.live .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.steps{list-style:none;padding:0;display:grid;gap:0;counter-reset:s;margin-top:8px}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid #ffffff26;font-size:15.5px;color:#DDE0F0}
.steps li::before{content:counter(s,decimal-leading-zero);font:600 13px/1.6 var(--mono);color:var(--volt)}
.steps b{color:#fff}
.on-light .steps li{border-color:var(--line);color:var(--ink-2)}
.on-light .steps li::before{color:var(--ultra)}
.on-light .steps b{color:var(--ink)}

/* ---------- Ratgeber-Karten ---------- */
.agrid{display:grid;gap:22px}
@media (min-width:760px){.agrid{grid-template-columns:repeat(2,1fr);gap:28px}}
@media (min-width:1100px){.agrid.drei{grid-template-columns:repeat(3,1fr)}}
.acard{position:relative;display:flex;flex-direction:column;background:var(--white);border-radius:var(--r);overflow:hidden;transition:transform .4s var(--ease)}
.acard:hover{transform:translateY(-4px)}
.acard figure{aspect-ratio:16/9;overflow:hidden;background:var(--card)}
.acard img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.acard:hover img{transform:scale(1.04)}
.acard .body{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;flex:1}
.acard h3{font-weight:800;font-size:20px;line-height:1.18;letter-spacing:-.015em;text-wrap:balance}
.acard h3 a{text-decoration:none}
.acard h3 a::after{content:"";position:absolute;inset:0}
.acard p{font-size:15px;color:var(--ink-2)}
.acard .meta{margin-top:auto;padding-top:6px;font:500 11.5px/1.4 var(--mono);color:var(--ink-3)}
.tag{align-self:flex-start;font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.03em;padding:6px 8px;border-radius:4px;background:var(--c,var(--ink));color:var(--tc,#fff)}
@media (prefers-reduced-motion:reduce){.acard:hover{transform:none}.acard:hover img{transform:none}}

/* ---------- Newsletter-Banner ---------- */
.nl{position:relative;overflow:hidden;isolation:isolate;background:var(--navy);color:#fff}
.nl-fig{position:absolute;inset:0;margin:0;z-index:-1}
.nl-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 75%}
.nl-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0B1230e6 0%,#0B1230b3 55%,#0B123033 100%)}
.nl-in>div p{color:#DCE2FF}
.nl input{border-color:#fff!important}
.nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nl .small,.nl .small a,.nl output{color:#fff}
.nl-in{position:relative;display:grid;gap:18px;padding-block:clamp(32px,5vw,56px) min(30vw,240px)}
@media (min-width:900px){.nl-in{grid-template-columns:minmax(0,560px);gap:22px;padding-block:clamp(64px,7vw,110px)}.nl-fig{left:auto;width:auto;aspect-ratio:16/9;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}.nl-fig::after{content:none}}
.nl h2{font-weight:800;font-size:clamp(26px,3.6vw,38px);line-height:1.05;letter-spacing:-.02em}
.nl p{margin-top:8px;font-size:16px}
.nl form{display:flex;flex-wrap:wrap;gap:10px}
.nl input{flex:1 1 220px;height:52px;border:2px solid var(--ink);background:var(--white);border-radius:999px;padding:0 20px;font-size:16px}
.nl input:focus{outline:3px solid var(--ultra);outline-offset:2px}
.nl .small{flex-basis:100%;font-size:12.5px;line-height:1.4;margin:0}
.nl .small a{font-weight:600}
.nl output{flex-basis:100%;font-weight:700;font-size:15px}
.nl .nl-gs{display:grid;gap:4px;margin-top:14px;padding-left:12px;border-left:3px solid var(--volt)}
.nl .nl-gs b{font-size:17px;color:#fff}
.nl .nl-gs small{font-size:12.5px;line-height:1.45;color:#DCE2FF}
.nl .nl-gs a{color:#fff;font-weight:600}

/* ---------- Fuß ---------- */
.foot{background:var(--navy);color:#C9CDDC;font-size:14.5px;margin-top:0}
.foot .marke{font-size:clamp(26px,3vw,34px)}.foot .marke .ic{width:44px;height:44px}
.foot .tracked{margin-top:12px;font-size:12px;letter-spacing:.18em;color:#B4BAD3}
.foot a{text-decoration:none}
.wl-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wr-s1,.wr-s2{display:grid;gap:16px}
.wr-s1 .btn,.wr-s2 .btn{justify-self:start}
.wr-s2 h2,.wr-s2 .facts-list{margin:0}
.wr-erkl{font-weight:700;margin:0!important}
.wr-s3 b{display:block;font-size:17px;margin-bottom:4px}
.kasse-fehler{color:#B42318;font-weight:600}
.foot a:hover{text-decoration:underline;text-underline-offset:3px;color:#fff}
.fcols{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px;padding-block:44px 28px}
.fcols h3{font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:#8C93AD;margin-bottom:10px}
.fcols ul{list-style:none;padding:0;display:grid}
.fcols li a{display:inline-flex;align-items:center;min-height:44px;padding-block:5px;line-height:1.3}
.fcols .fb{grid-column:1/-1;text-align:center}
.fcols .fb p{margin-top:10px;max-width:42ch}
@media (min-width:900px){.fcols{grid-template-columns:1.5fr repeat(4,1fr)}.fcols .fb{grid-column:auto;text-align:left}}
.fbot{border-top:1px solid #ffffff1f;padding-block:18px 28px;font-size:12.5px;line-height:1.5;color:#9AA0B8}
.fbot p+p{margin-top:4px}

/* ---------- Dialoge: Korb + Menü ---------- */
dialog{padding:0;border:0;color:var(--ink)}
dialog::backdrop{background:#0b0d2480;opacity:0;transition:opacity .35s,overlay .35s allow-discrete,display .35s allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]::backdrop{opacity:0}}
.korb{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;height:auto;max-height:90dvh;background:var(--paper);border-radius:18px 18px 0 0;transform:translateY(100%);transition:transform .45s var(--ease),overlay .45s allow-discrete,display .45s allow-discrete}
.korb[open]{transform:none;display:flex;flex-direction:column}
@starting-style{.korb[open]{transform:translateY(100%)}}
@media (min-width:640px){.korb{inset:0 0 0 auto;width:min(440px,100%);height:100dvh;max-height:none;border-radius:0;transform:translateX(100%)}@starting-style{.korb[open]{transform:translateX(100%)}}}
.korb-head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 20px;border-bottom:1px solid var(--line)}
.korb-head h2{font-weight:800;font-size:20px}
.korb-body{flex:1;overflow-y:auto;padding:4px 20px;overscroll-behavior:contain}
.korb-foot{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--white);display:grid;gap:12px}
.sumrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sumrow b{font-size:22px;font-variant-numeric:tabular-nums}
.shipbar{font-size:13.5px;color:var(--ink-2)}
.shipbar .bar{height:6px;border-radius:6px;background:var(--card);margin-top:8px;overflow:hidden}
.shipbar .bar i{display:block;height:100%;background:var(--ultra);transform-origin:left;transition:transform .6s var(--ease)}
.lines{list-style:none;padding:0;margin:0}
.line{display:grid;grid-template-columns:64px 1fr;gap:4px 14px;padding:16px 0;border-bottom:1px solid var(--line)}
.line .thumb{grid-row:span 2;width:64px;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--c,#9aa) 20%,#F4F5F7)}
.line .thumb img{width:100%;height:100%;object-fit:cover}
.line a.nm{font-weight:700;font-size:15px;line-height:1.25;text-decoration:none}
.line a.nm:hover{text-decoration:underline;text-underline-offset:3px}
.line .sub{font:500 11px/1.4 var(--mono);color:var(--ink-3)}
.line .ctl{display:flex;align-items:center;gap:6px}
.line .ctl .lp{margin-left:auto}
.line .lp{font-weight:800;font-variant-numeric:tabular-nums}
.line .rm{border:0;background:none;color:var(--ink-3);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px;padding:0 4px}
.line .rm:hover{color:var(--warn)}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--ink);border-radius:999px;background:var(--white)}
.stepper button{width:44px;height:44px;border:0;background:none;border-radius:999px;display:grid;place-items:center;cursor:pointer}
.stepper button:hover{background:var(--card)}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper output{min-width:28px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.leer{padding:36px 0;text-align:center;color:var(--ink-2)}
.leer b{display:block;font-size:19px;color:var(--ink);margin-bottom:6px}
.leer .btn{margin-top:16px}
.menu{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;background:var(--navy);color:#fff;flex-direction:column;transition:overlay .4s allow-discrete,display .4s allow-discrete}
.menu[open]{display:flex;transition:none}
.menu[open] .top{animation:leiste-auf .2s var(--ease) both}
@keyframes leiste-auf{from{transform:translateY(-100%);opacity:0}}
@keyframes leiste-zu{to{transform:translateY(-100%);opacity:0}}
.menu nav{perspective:900px}
.menu nav a{transform-origin:50% 50%;backface-visibility:hidden;animation:blatt-zu .13s ease-in both;animation-delay:calc((12 - var(--i,1)) * 16ms)}
.menu[open] nav a{animation:blatt-auf .3s linear both;animation-delay:calc(.1s + var(--i,1) * 62ms)}
@keyframes blatt-auf{0%{transform:rotateX(90deg);opacity:0;filter:brightness(.3)}1%{opacity:1}50%{transform:rotateX(-14deg);filter:brightness(1.2)}68%{transform:rotateX(7deg);filter:none}84%{transform:rotateX(-2deg)}100%{transform:none;opacity:1}}
@keyframes blatt-zu{0%{transform:none;opacity:1}100%{transform:rotateX(90deg);opacity:0;filter:brightness(.3)}}
@media (prefers-reduced-motion:reduce){.menu,.menu[open]{transition:none}.menu .top{animation:none}.menu nav a,.menu[open] nav a{animation:none;transform:none;opacity:1}}
.menu .top{flex:none;width:100%;animation:leiste-zu .14s ease-in both;animation-delay:.2s;display:flex;justify-content:space-between;align-items:center;height:var(--head-h);padding:0 8px 0 var(--gutter)}
.menu nav{padding:min(12px,1.4vh) var(--gutter);display:grid;align-content:start;overflow:hidden;flex:1;min-height:0}
.menu nav a{display:flex;align-items:center;gap:14px;font-weight:800;font-size:clamp(20px,min(7vw,4.3vh),34px);letter-spacing:-.02em;padding:min(10px,1.1vh) 0;min-height:min(56px,6.6vh);text-decoration:none;border-bottom:1px solid #ffffff1c}
.menu nav a i{width:12px;height:12px;border-radius:50%;flex:none;background:var(--c,var(--volt))}
.menu nav a.klein{font-size:clamp(14px,2.2vh,17px);font-weight:600;letter-spacing:0;border:0;min-height:min(44px,5vh);color:#C9CDDC}
@media (max-height:520px){.menu nav{overflow-y:auto}}
.menu nav a:hover{color:var(--volt)}
.toast{position:fixed;left:50%;bottom:20px;z-index:80;transform:translate(-50%,24px);max-width:min(92vw,460px);background:var(--ink);color:#fff;padding:13px 18px;border-radius:999px;font-size:14.5px;font-weight:600;box-shadow:0 14px 30px -12px #0f122299;opacity:0;visibility:hidden;transition:transform .4s var(--ease),opacity .3s,visibility .3s;text-align:center}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}
.toast a{color:var(--volt);margin-left:8px;white-space:nowrap}

/* ---------- Sortiment ---------- */
.tabs{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;background:var(--ink);border-radius:var(--r);margin-inline:calc(var(--gutter) * -1);border-radius:0;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
@media (min-width:900px){.tabs{margin-inline:0;border-radius:var(--r)}}
.tab{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:120px;min-height:64px;padding:14px 16px 12px;border:0;border-right:1px solid #ffffff1c;background:none;cursor:pointer;text-align:left;position:relative;color:#fff}
.tab::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--c,#fff);transform:scaleY(.6);transform-origin:top;transition:transform .25s var(--ease)}
.tab b{font-weight:800;font-size:15.5px;line-height:1.2}
.tab small{font:500 11px/1.4 var(--mono);color:#B4B9CC}
.tab:hover{background:#ffffff0d}
.tab[aria-pressed="true"]{background:var(--c,#fff);color:var(--tc,var(--ink))}
.tab[aria-pressed="true"] small{color:inherit;opacity:.85}
.tab[aria-pressed="true"]::before{transform:scaleY(1)}
@media (min-width:1000px){.tab{flex:1}}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding-block:18px}
.field{display:flex;flex-direction:column;gap:4px}
.field>span{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.sel,.inp{height:48px;border:1.5px solid var(--line);background:var(--white);border-radius:999px;padding:0 18px;font-size:15px}
.sel{appearance:none;padding-right:42px;background:var(--white) no-repeat right 16px center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230F1222' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.sel:focus,.inp:focus{outline:3px solid var(--ultra);outline-offset:2px;border-color:var(--ultra)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:480px){.chips{gap:6px}.chip{padding:0 12px;font-size:14px}}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--ink);background:none;font-weight:700;font-size:14.5px;cursor:pointer;transition:background .2s,color .2s}
.chip:hover{background:var(--card)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.tb-search{flex:1 1 240px}
.tb-search .inp{width:100%}
.result{font:500 12px/1 var(--mono);color:var(--ink-3);margin-left:auto}
.toolbar .field.fl{flex:1 1 150px}
.toolbar .sel{width:100%}
.empty{grid-column:1/-1;padding:40px 0;text-align:center;color:var(--ink-2)}
.empty b{display:block;font-size:20px;color:var(--ink);margin-bottom:6px}
.empty .btn{margin-top:16px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink-2);padding-bottom:20px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .rar{margin:0}

/* ---------- Produktseite ---------- */
.pd{display:grid;gap:28px;padding-bottom:48px}
@media (min-width:900px){.pd{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start}.pd-media{position:sticky;top:calc(var(--head-h) + 20px)}}
.pd-img{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:color-mix(in srgb,var(--c) 20%,#F4F5F7);position:relative}
.pd-img img{width:100%;height:100%;object-fit:cover}
.samm{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:12px;padding:12px 16px;border-radius:var(--r);background:var(--white);border:1.5px solid var(--ink);font:500 12px/1.3 var(--mono)}
.samm b{font-weight:600;font-size:13px}
.samm i{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--c) 0 var(--p,50%),var(--card) 0)}
.pd h1{font-weight:800;font-size:clamp(28px,4.4vw,44px);line-height:1.04;letter-spacing:-.025em;text-wrap:balance;margin-top:8px}
.pd .meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.pd .pdprice{font-weight:800;font-size:36px;letter-spacing:-.02em;margin-top:18px;line-height:1}
.pd .pdprice small{display:block;font:500 12px/1.4 var(--display);color:var(--ink-3);letter-spacing:0;margin-top:6px}
.pd .stock{margin-top:14px;font-size:15px}
.pd .livehint{margin-top:8px;font-size:14px}
.pd .text{margin-top:20px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.optrow{margin-top:22px;display:grid;gap:18px}
.opt>span{display:block;font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin-bottom:8px}
.chip.langchip{min-width:56px;justify-content:center}
.chip.langchip[aria-pressed="true"]{background:var(--ultra);border-color:var(--ultra)}
.addrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.addrow .btn{flex:1 1 200px}
.facts-list{margin-top:26px;border-top:1.5px solid var(--ink)}
.facts-list div{display:grid;grid-template-columns:minmax(110px,34%) 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts-list dt{color:var(--ink-3);font-weight:600;font-size:14px}
.facts-list dd{margin:0;font-weight:600}
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:12px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--white);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .4s var(--ease)}
.buybar.show{transform:none}
.buybar .price{flex:none}
.buybar .btn{flex:1;min-height:48px}
@media (min-width:900px){.buybar{display:none}}
.ship-mini{margin-top:16px;display:grid;gap:8px;font-size:14px;color:var(--ink-2)}
.ship-mini div{display:flex;gap:10px;align-items:flex-start}
.ship-mini .ico{width:20px;height:20px;margin-top:1px;color:var(--ultra)}

/* ---------- Warenkorb-Seite + Kasse ---------- */
.cartpage{display:grid;gap:28px;padding-bottom:64px}
@media (min-width:900px){.cartpage{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:48px;align-items:start}.cartpage .sumbox{position:sticky;top:calc(var(--head-h) + 20px)}}
.sumbox{background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r);padding:20px;display:grid;gap:14px}
.sumbox h2{font-weight:800;font-size:20px}
.sumbox .row{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-variant-numeric:tabular-nums}
.sumbox .row.total{font-weight:800;font-size:20px;border-top:1.5px solid var(--ink);padding-top:14px}
.sumbox .row.total small{font-weight:500;font-size:12px;color:var(--ink-3);display:block}
.form{display:grid;gap:16px}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:14px}
.form legend{font-weight:800;font-size:20px;margin-bottom:6px;padding:0}
.fr{display:grid;gap:14px}
@media (min-width:600px){.fr.zwei{grid-template-columns:1fr 1fr}.fr.plz{grid-template-columns:140px 1fr}}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-weight:600;font-size:14px}
.fld input,.fld select,.fld textarea{min-height:50px;border:1.5px solid var(--ink-3);background:var(--white);border-radius:var(--r);padding:12px 14px;font-size:16px}
.fld textarea{min-height:96px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid var(--ultra);outline-offset:1px;border-color:var(--ultra)}
.fld input:user-invalid{border-color:var(--warn)}
.fld .hint{font-size:13px;color:var(--ink-3)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.check input{width:24px;height:24px;margin:0;flex:none;accent-color:var(--ultra)}
.check span{padding-top:1px}
.danke{display:grid;gap:12px;padding:24px;border-radius:var(--r);background:var(--ink);color:#fff}
.danke h2{font-weight:800;font-size:26px}
.danke p{color:#DDE0F0}
.danke .btn{justify-self:start}
details.sumtoggle{border:1.5px solid var(--ink);border-radius:var(--r);background:var(--white)}
details.sumtoggle summary{display:flex;justify-content:space-between;gap:12px;min-height:52px;align-items:center;padding:0 16px;font-weight:700;cursor:pointer}
details.sumtoggle>div{padding:0 16px 16px}
@media (min-width:900px){details.sumtoggle{display:none}}
.sumdesk{display:none}
@media (min-width:900px){.sumdesk{display:grid}}

/* ---------- Text-Seiten & Ratgeber ---------- */
.prose{font-size:17px;line-height:1.65;color:var(--ink)}
.prose h2{margin:2.2em 0 .6em;font-weight:800;font-size:clamp(23px,3vw,30px);line-height:1.15;letter-spacing:-.02em;scroll-margin-top:calc(var(--head-h) + 12px);text-wrap:balance}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.6em 0 .4em;font-weight:800;font-size:19px;line-height:1.25}
.prose p{margin:0 0 1em;max-width:68ch}
.prose a{text-underline-offset:3px;text-decoration-thickness:1.5px;color:var(--ultra-deep);font-weight:600}
.prose a:hover{color:var(--ultra)}
.prose a.btn{color:inherit;text-decoration:none}
.prose a.btn-ink{color:#fff}
.prose ul.ul,.prose ol.ol{margin:0 0 1.2em;padding-left:22px;display:grid;gap:8px;max-width:68ch}
.prose address{font-style:normal;margin-bottom:1em}
.sum30{background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r);padding:18px 20px;margin:0 0 8px;max-width:68ch}
.sum30 h2{margin:0 0 8px!important;font-size:18px!important;letter-spacing:-.01em}
.sum30 ul{margin:0;padding-left:20px;display:grid;gap:6px}
.checks{list-style:none;margin:0 0 1.4em;padding:0;display:grid;max-width:68ch;border-top:1.5px solid var(--ink)}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.checks li::before{content:"";width:18px;height:18px;margin-top:3px;border:2px solid var(--ink);border-radius:4px;background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.7 2.7L10 3.2' fill='none' stroke='%231B2BC9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.rt{width:100%;border-collapse:collapse;margin:0 0 .6em;font-size:15px;line-height:1.4;font-variant-numeric:tabular-nums}
.rt th,.rt td{padding:11px 12px 11px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.rt thead th{border-bottom:2px solid var(--ink);font-size:13px;font-weight:700;color:var(--ink-2)}
.rt tbody th{font-weight:800}
.tnote{font-size:13.5px;color:var(--ink-3);margin-bottom:1.4em!important}
@media (max-width:640px){
  .rt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rt,.rt tbody,.rt tr,.rt th,.rt td{display:block}
  .rt tr{padding:12px 0;border-bottom:2px solid var(--ink)}
  .rt tr:first-child{border-top:2px solid var(--ink)}
  .rt th,.rt td{padding:5px 0;border:0}
  .rt tbody th{font-size:17px;padding-bottom:6px}
  .rt td{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:12px}
  .rt td::before{content:attr(data-l);font-size:12.5px;font-weight:600;color:var(--ink-3)}
}
.faq{margin:0 0 1.4em;border-top:1.5px solid var(--ink);max-width:68ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;padding:10px 0;font-weight:700;font-size:17px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 5l6 6 6-6' fill='none' stroke='%230F1222' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details p{padding:0 0 16px;margin:0}
.fazit{border-radius:var(--r);background:var(--white);border:1.5px solid var(--ink);padding:20px 22px;max-width:68ch}
.fazit p:last-of-type{margin-bottom:0}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pbox{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:6px 16px;align-items:center;margin:0 0 14px;padding:14px;border:1.5px solid var(--ink);border-radius:10px;background:var(--white);max-width:68ch;position:relative}
.pbox .pi{grid-row:span 2;display:block;width:80px;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--c) 20%,#F4F5F7)}
.pbox .pi img{width:100%;height:100%;object-fit:cover}
.pbox .pn{min-width:0}
.pbox .pn a{font-weight:800;font-size:16px;line-height:1.25;color:var(--ink);text-decoration:none}
.pbox .pn a::after{content:"";position:absolute;inset:0}
.pbox .pn a:hover{text-decoration:underline;text-underline-offset:3px}
.pbox .pn .sub{display:block;font:500 11px/1.4 var(--mono);color:var(--ink-3);margin-top:3px}
.pbox .stock{margin-top:6px;font-size:13px}
.pbox .pb{display:flex;align-items:center;justify-content:space-between;gap:12px;grid-column:2/-1;position:relative;z-index:2}
.pbox .price{font-size:19px}
@media (max-width:519px){.pbox{grid-template-columns:64px minmax(0,1fr)}.pbox .pi{width:64px}.pbox .pb{grid-column:1/-1;margin-top:6px}}
.art-hero{border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:var(--card);margin-bottom:28px}
.art-hero img{width:100%;height:100%;object-fit:cover}
.art-wrap{display:grid;gap:0}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font:500 12px/1.4 var(--mono);color:var(--ink-3);margin-top:14px}
.two{display:grid;gap:28px}
@media (min-width:900px){.two{grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}.two aside{position:sticky;top:calc(var(--head-h) + 20px)}}
.aside-box{background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r);padding:18px;display:grid;gap:10px;font-size:15px}
.aside-box h2{font-weight:800;font-size:18px}
.aside-box ul{list-style:none;padding:0;display:grid}
.aside-box li a{display:flex;align-items:center;min-height:44px;font-weight:600;text-underline-offset:3px}
.kontakt{display:grid;gap:14px}
@media (min-width:760px){.kontakt{grid-template-columns:repeat(3,1fr)}}
.kbox{background:var(--white);border-radius:var(--r);padding:20px;display:grid;gap:4px;align-content:start}
.kbox .eyebrow{margin-bottom:6px}
.kbox a{font-weight:800;font-size:20px;letter-spacing:-.01em;text-underline-offset:4px;overflow-wrap:anywhere}
.kbox p{color:var(--ink-2);font-size:15px}
.e404{padding-block:clamp(56px,10vw,140px);text-align:left}
.e404 .nr{font:600 clamp(80px,22vw,220px)/.9 var(--display);letter-spacing:-.05em;color:var(--ultra)}

/* Nachträge */
.prod-img.tilting img{transition:transform .12s linear}
.buy{flex-direction:column;align-items:stretch}
.buy .tick{justify-content:center}
@media (min-width:1100px){.buy{flex-direction:row;align-items:center}}

/* ---------- Runde 2: Brotkrumen einzeilig, Galerie, Reiter-Verlauf, Kaufleiste ---------- */
.crumbs>*{flex:none}
.crumbs>[aria-current]{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.th{position:relative;display:block;padding:0;border:2px solid transparent;border-radius:var(--r);background:color-mix(in srgb,var(--c) 20%,#F4F5F7);overflow:hidden;cursor:pointer;aspect-ratio:1;min-height:64px}
.th img{width:100%;height:100%;object-fit:cover}
.th span{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;font:600 10.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.03em;background:var(--ink);color:#fff;text-align:left}
.th[aria-pressed="true"]{border-color:var(--ink)}
.th:hover{border-color:var(--ink-3)}
.bildhinweis{margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.pd-img img{transition:opacity .2s}
.pd-img img.wechsel{opacity:0}
@media (max-width:899px){
  .tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
  .tabs.ende{-webkit-mask-image:none;mask-image:none}
  body:has(.buybar) .foot{padding-bottom:84px}   /* Platz für die feste Kaufleiste im Footer, nicht als graue Fläche über ihm */
}
@media (prefers-reduced-motion:reduce){.pd-img img{transition:none}}

/* Rico 17.10.: ausverkauft */
.tick:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
.prod:has(.tick:disabled) .prod-img img{filter:grayscale(.35)}
/* Rico 17.10.: Signatur-Ecke unten rechts am Produktbild */
.prod-img::after{content:"TCG DIREKT";position:absolute;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:6px;
 padding:7px 11px 7px 30px;border-top-left-radius:14px;background:var(--ultra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect x='5' y='6' width='11' height='16' rx='2' fill='%23FFD21A' transform='rotate(-12 10 14)'/%3E%3Crect x='12' y='6' width='11' height='16' rx='2' fill='none' stroke='%23fff' stroke-width='2' transform='rotate(10 18 14)'/%3E%3C/svg%3E") no-repeat 9px 50%/16px 16px;
 color:#fff;font:700 10px/1 var(--mono);letter-spacing:.12em;box-shadow:-2px -2px 0 0 var(--volt)}
.pd-img{position:relative}
/* Rico 26.10.: großes Produktbild ohne Signatur-Ecke, Logo steht schon auf der Seite */
/* Rico 17.10.: Ara-Leiste, wischbar, läuft von rechts nach links */
.reel-sec{padding-block:clamp(36px,5vw,64px);background:var(--ink);overflow:hidden}
.reel-sec .sec-head{margin-bottom:18px}.reel-sec .h2{color:#fff}.reel-sec p{color:#B4B9CC}
.reel{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;padding-inline:max(16px,calc((100vw - 1240px)/2));cursor:grab;touch-action:pan-x pan-y;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reel::-webkit-scrollbar{display:none}
.reel figure{flex:0 0 clamp(170px,22vw,250px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.35);transform:rotate(var(--r,0deg));transition:transform .4s var(--ease)}
.reel figure:nth-child(odd){--r:-1.2deg}.reel figure:nth-child(even){--r:1.2deg}
.reel figure:hover{transform:rotate(0) scale(1.03)}
.reel img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
/* Rico 17.10.: Glossar im 1x1-Ratgeber */
.glossar{display:grid;grid-template-columns:minmax(110px,max-content) 1fr;gap:0;margin:0 0 1.4em;max-width:68ch;border-top:1.5px solid var(--ink)}
.glossar dt,.glossar dd{margin:0;padding:11px 0;border-bottom:1px solid var(--line)}
.glossar dt{font-weight:800;padding-right:18px}
@media (max-width:519px){.glossar{grid-template-columns:1fr}.glossar dt{border-bottom:0;padding-bottom:0}.glossar dd{padding-top:2px}}
/* Rico 19.10.: Produktkarte als weiße Karte mit blauem Korb-Knopf, Neue Drops als Reihe (Handy: Wischleiste) */
.prod{background:var(--white);border-radius:12px;padding:10px 10px 12px;box-shadow:0 1px 2px #0f12220f,0 10px 22px -16px #0f122259}
.prod-img{border-radius:8px}
.tick{background:var(--ultra)}
.tick:hover{background:var(--ultra-deep)}
.reihe .inhalt,.reihe .prod-meta span:first-child{display:none}
.reihe .buy{flex-direction:column;align-items:stretch}
@media (min-width:1100px){.reihe{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}}
@media (max-width:759px){
  .reihe{display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 18px;scroll-padding-inline:var(--gutter)}
  .reihe::-webkit-scrollbar{display:none}
  .reihe .prod{flex:0 0 min(62vw,260px);scroll-snap-align:start}
}

/* Kopfbilder der Seiten (Banner v2): mobil 3:2 über dem Titel, ab 900 px Band hinter dem Titel */
.phead+*{margin-top:clamp(28px,4vw,56px)}
.phead{position:relative;background:#0B1230;color:#fff;isolation:isolate;overflow:hidden}
.phead-bg{position:relative;margin:0;aspect-ratio:5/3}
.phead-bg img{width:100%;height:100%;object-fit:cover}
.phead-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b123000 55%,#0b1230)}
.phead .page-head{position:relative;padding-block:0 clamp(24px,4vw,40px);margin-top:-36px}
.phead .h1{color:#fff}
.phead .lead{color:#DCE2FF}
@media (min-width:900px){
  .phead-bg{position:absolute;inset:0;aspect-ratio:auto;max-height:none;z-index:-1}
  .phead-bg img{object-position:75% 50%}
  .phead-bg::after{background:linear-gradient(90deg,#0b1230 0%,#0b1230e6 32%,#0b123000 66%)}
  .phead .page-head{margin-top:0;padding-block:clamp(44px,5vw,80px)}
  .phead .page-head>*{max-width:min(48vw,640px)}
}
/* Newsletter-Bild: mobil 3:1-Streifen über dem Text, ab 1200 px dritte Spalte */

/* ---------- Kasse mit Zahlung und Eigenprodukte (1.5.33/1.5.34): Tokens wie toploader-book, nur was eigen.css, karte.css und die Kasse brauchen ---------- */
:root{--ink-a06:#0f12220f; --ink-a10:#0f12221a; --ink-a25:#0f122240; --ink-a40:#0f122266; --black-a73:#000b; --black-a80:#000c; --ultra-a70:#1b2bc9b3; --volt-a08:#ffd21a14; --white-a08:#ffffff14; --white-a12:#ffffff1f; --white-a20:#ffffff33; --white-a35:#ffffff59; --white-a90:#ffffffe6; --kc-navy:#0C101B; --hinweis-bg:#FFF3B8; --hinweis-line:#B88A00; --tint:#F4F5F7; --dk-3:#DDE1F2; --dk-6:#C9CDDC; --dk-9:#9AA0B8; --fs-12-5:12.5px; --fs-13:13px; --fs-13-5:13.5px; --fs-14:14px; --fs-14-5:14.5px; --fs-15:15px; --fs-16:16px; --fs-17:17px; --fs-18:18px; --fs-20:20px; --fs-22:22px; --fs-28:28px; --r-xs:4px; --r-lg:10px; --r-xl:12px; --r-3xl:16px; --r-pill:999px;}
.abp>.ab-a,.abp>.ab-b{display:none}
.abp>.ab-0{font-size:var(--fs-15);font-weight:700;color:var(--ink-3)}
.merkhint{margin-top:10px;font-size:var(--fs-13-5);line-height:1.45;color:var(--ink-3);max-width:52ch}
.kasse-fehler{color:var(--warn);font-weight:700}
.kasse-fehler:focus{outline:none}
.bwider{margin-top:20px}
.reservhinweis{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-14);color:var(--ink-2);margin:0}
.reservhinweis .ico{width:20px;height:20px;flex:none;margin-top:1px}
.kasse-karte{margin:0;padding:14px 16px;border-left:4px solid var(--warn);background:var(--white);border-radius:var(--r);font-size:var(--fs-14);line-height:1.5;color:var(--ink-2)}
.kasse-karte b{display:block;color:var(--ink);margin-bottom:2px}
.konf{display:block;font-size:var(--fs-13);line-height:1.4;color:var(--ink-3);margin-top:2px;overflow-wrap:anywhere}
.line .sub.konf{margin-top:4px}
.prod.eigen .prod-img img{object-fit:contain;background:var(--white)}
.kc{display:flex;align-items:center;gap:clamp(14px,3vw,28px);padding:12px clamp(12px,2vw,18px) 12px 12px;border:1.5px solid var(--line);border-radius:var(--r-3xl);background:var(--white);color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.kc:hover{border-color:var(--ink);box-shadow:0 8px 24px -16px var(--ink-a40)}
.kc-marke{flex:none;display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:var(--r-xl);background:var(--kc-navy)}
.kc-marke img{display:block}
.kc-wort{width:120px;height:auto}
.kc-marke img:first-child{width:44px;height:44px}
.sec-partner{padding-block:clamp(28px,3.5vw,48px)}
.sec-partner .h2{font-size:clamp(24px,3vw,34px)}
.sec-partner .sec-head{margin-bottom:clamp(14px,2vw,22px)}
.kc-t{display:grid;gap:4px;min-width:0}
.kc-t b{font-weight:800;font-size:var(--fs-18);letter-spacing:-.01em}
.kc-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:var(--fs-15);color:var(--ultra)}
.kc-link .ico{width:18px;height:18px}
@media (max-width:519px){.kc{gap:12px}.kc-marke{flex-direction:column;gap:6px;padding:10px}.kc-marke img{width:44px;height:44px}.kc-marke .kc-wort{width:84px;height:auto}.kc-t b{font-size:var(--fs-16)}}
.line .sub.konf{font-family:var(--display);letter-spacing:0;text-transform:none}
/* ---------- Kasse 1.5.40: Toploader-Set je Buch, Einwilligungs-Banner (nur mit Pixel-ID), Fuß-Link ---------- */
.eg-set{display:flex;align-items:center;gap:8px;grid-column:1/-1;min-height:44px;font-size:var(--fs-14);cursor:pointer}
.eg-set input{width:20px;height:20px;accent-color:var(--ultra);flex:none}
.eg-set b{font-weight:700;white-space:nowrap}
/* Einwilligung: schlanke Leiste unten statt Fenster. Akzeptieren gefüllt (Ultramarin), Ablehnen gleich groß mit gut sichtbarem Rahmen, gleiche Schrift */
.einw{position:fixed;z-index:90;left:0;right:0;bottom:0;background:var(--white);color:var(--ink);border-top:1px solid var(--line);box-shadow:0 -10px 30px -14px rgba(15,18,34,.35);
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));font-size:var(--fs-14);line-height:1.45;animation:einw-rein .45s var(--ease) both}
.einw-in{max-width:1240px;margin-inline:auto;display:grid;gap:10px}
.einw-t{margin:0;color:var(--ink)}
.einw-x{display:block;margin-top:2px;color:var(--ink-2);font-size:13px}
.einw a{color:var(--ultra);font-weight:600;text-underline-offset:2px}
.einw-k{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.einw-b{min-height:46px;padding:0 18px;border-radius:999px;border:2px solid var(--ink);font-family:inherit;font-weight:700;font-size:15px;line-height:1;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.einw-nein{background:var(--white);color:var(--ink)}
.einw-nein:hover{background:var(--paper)}
.einw-ja{background:var(--ultra);border-color:var(--ultra);color:#fff}
.einw-ja:hover{background:var(--ultra-deep);border-color:var(--ultra-deep)}
@media (min-width:900px){.einw-in{grid-template-columns:1fr auto;align-items:center;gap:28px}.einw-k{grid-template-columns:repeat(2,168px)}}
@keyframes einw-rein{from{transform:translateY(100%)}}
@keyframes einw-hell{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.einw{animation:einw-hell .6s ease-out both}}
.fuss-link{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;min-height:24px}

/* ---------- Sortiment = Lager (Rico 27.10.): Benachrichtigen statt Kaufen, Preis folgt ---------- */
.pd-merk{display:grid;gap:10px;margin-top:6px}
.pd-merk-t{margin:0;font-weight:700;color:var(--ink)}
.pd-merk-z{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.pd-merk-z .inp{min-height:48px}
.pd-merk-o{font-weight:700;font-size:var(--fs-15);line-height:1.4}
@media (max-width:519px){.pd-merk-z{grid-template-columns:minmax(0,1fr)}}
a.tick{text-decoration:none}
.tick.merk .ico{width:18px;height:18px}
.pdprice.offen,.price.offen{color:var(--ink-3)}
.pd-merk-z .inp{font-size:16px;width:100%}
/* Kasse (Konversion): Zahlarten oben, Fehler am Feld, Vertrauen am Knopf */
.kasse-kopf{display:flex;flex-direction:column;gap:4px;margin-bottom:20px;font-size:15px;color:var(--ink-2)}
.kasse-kopf p{margin:0}
.zahlchips{display:flex;gap:8px;align-items:flex-start;font-weight:600;color:var(--ink)}
.zahlchips .ico,.vertrauen .ico{width:18px;height:18px;flex:none;margin-top:2px}
.fld-f{margin:0;color:#B42318;font-size:14px;font-weight:600}
.fld input[aria-invalid=true]{border-color:#B42318}
.fld-hint{margin:6px 0 0;font-size:13px;color:var(--ink-3)}
.vertrauen{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--ink-2)}
.vertrauen li{display:flex;gap:8px;align-items:flex-start}

/* ---------- Kasse im Checkout-Muster (1.5.57): weißes Formular links, graue Übersicht rechts, eine Schrift, 1-px-Rahmen, Akzent nur Knopf und Links ---------- */
:root{--co-line:#D9DCE2; --co-grau:#F5F6F8; --co-fehler:#C8231B; --co-r:8px}
.co-body{background:#fff}
.co-body .brand{color:var(--ink);margin:0}
.co-body .marke{color:var(--ink);font-size:21px}
.co-body .marke b{color:var(--ultra)}
.co-kopf{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--co-line);background:#fff}
.co-kopf-l{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0 20px;width:100%;max-width:600px;margin:0 auto}
.co-kopf-r{display:none}
.co-korb{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;color:var(--ultra);border-radius:6px}
.co-korb .ico{width:22px;height:22px}
.co-mobil{background:var(--co-grau);border-bottom:1px solid var(--co-line)}
.co-mobil summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:0 20px;max-width:600px;margin:0 auto;cursor:pointer;list-style:none}
.co-mobil summary::-webkit-details-marker{display:none}
.co-mobil-t{display:inline-flex;align-items:center;gap:6px;color:var(--ultra);font-size:14px}
.co-mobil-t .ico{width:16px;height:16px;transition:transform .2s var(--ease)}
.co-mobil .auf,.co-mobil[open] .zu{display:none}
.co-mobil[open] .auf{display:inline}
.co-mobil[open] .co-mobil-t .ico{transform:rotate(180deg)}
.co-mobil summary b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.co-mobil-in{max-width:600px;margin:0 auto;padding:4px 20px 24px}
.co-main-in{max-width:600px;margin:0 auto;padding:24px 20px 0}
.co-form{display:grid;gap:32px}
.co-form section{display:grid;gap:12px}
.co-form h2,.co-unten h2{font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.005em}
.co-unter{margin:-6px 0 2px;font-size:14px;color:var(--ink-3)}
.co-hint{margin:-4px 0 0;font-size:13px;color:var(--ink-3)}
.co-zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:599px){.co-adr{grid-template-columns:1fr}}   /* Adresse am Handy in einer Spalte */
.co-orte{display:grid;gap:8px;margin-top:-2px}
.co-as{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--co-line);border-radius:var(--co-r);box-shadow:0 10px 28px rgba(15,18,34,.14);overflow:hidden}
.co-as ul{margin:0;padding:4px 0;list-style:none;max-height:300px;overflow-y:auto}
.co-as li{display:grid;gap:1px;min-height:48px;align-content:center;padding:8px 12px;cursor:pointer}
.co-as li b{font-size:15px;font-weight:600;color:var(--ink)}
.co-as li span{font-size:13px;color:var(--ink-3)}
.co-as li:hover,.co-as li[aria-selected=true]{background:#F0F2FC}
.co-as p{margin:0;padding:6px 12px;border-top:1px solid var(--co-line);font-size:12px;color:var(--ink-3)}
.co-as p a{color:inherit}
.co-orte>span{font-size:13px;color:var(--ink-3)}
.co-orte div{display:flex;flex-wrap:wrap;gap:8px}
.co-orte button{min-height:44px;padding:0 14px;border:1px solid var(--co-line);border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.co-orte button:hover{border-color:var(--ink-3)}
.co-orte button[aria-pressed=true]{border-color:var(--ultra);box-shadow:0 0 0 1px var(--ultra);background:#F7F8FD}
.co-orte button:focus-visible{outline:2px solid var(--ultra);outline-offset:2px}
.co-form .fld{display:grid;gap:6px}
.ff{position:relative}
.ff input{display:block;width:100%;height:52px;border:1px solid var(--co-line);border-radius:6px;background:#fff;padding:20px 12px 4px;font-size:16px;line-height:1.3;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.ff label{font-weight:400;position:absolute;left:13px;top:50%;translate:0 -50%;font-size:15px;color:var(--ink-3);pointer-events:none;transition:top .15s var(--ease),font-size .15s var(--ease),translate .15s var(--ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 26px)}
.ff input:focus+label,.ff input:not(:placeholder-shown)+label,.ff input:-webkit-autofill+label{top:8px;translate:0 0;font-size:12px}
.ff input:focus{outline:none;border-color:var(--ultra);box-shadow:0 0 0 1px var(--ultra)}
.ff input[aria-invalid=true]{border-color:var(--co-fehler);box-shadow:0 0 0 1px var(--co-fehler)}
.ff.fest{display:flex;flex-direction:column;justify-content:center;height:52px;padding:0 12px;border:1px solid var(--co-line);border-radius:6px;background:var(--co-grau)}
.fest-l{font-size:12px;color:var(--ink-3);line-height:1.3}
.fest-w{font-size:16px;line-height:1.3}
.co-form .fld-f{display:flex;gap:6px;align-items:flex-start;margin:0;color:var(--co-fehler);font-size:13px;font-weight:500;line-height:1.4}
.co-form .fld-f::before{content:"";flex:none;width:16px;height:16px;margin-top:1px;background:var(--co-fehler);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm-.9 4h1.8v5H7.1Zm.9 8.2a1.1 1.1 0 1 1 0-2.2 1.1 1.1 0 0 1 0 2.2Z'/%3E%3C/svg%3E") center/contain no-repeat}
.co-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.co-check input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--ultra);cursor:pointer}
.co-check a,.co-fuss a,.co-zahl-info a{color:var(--ultra);text-underline-offset:2px}
.co-box{border:1px solid var(--co-line);border-radius:var(--co-r);overflow:hidden}
.co-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 16px;font-size:15px}
.co-zeile>span:first-child{display:grid;gap:1px}
.co-zeile b{font-weight:600}
.co-zeile small{font-size:13px;color:var(--ink-3)}
.co-zeile small:empty{display:none}
.co-icons{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.zi{width:32px;height:24px;flex:none;display:block}
/* Zahlart-Badges (Kaufbereich, Warenkorb, Fuß): Platz ist reserviert, damit nichts springt, wenn shop.js sie einsetzt */
.zahl-icons{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:24px}
.zahl-icons .zi{opacity:0;animation:zi-ein .35s var(--ease) forwards}
.zahl-icons .zi:nth-child(3){animation-delay:.04s}.zahl-icons .zi:nth-child(4){animation-delay:.08s}.zahl-icons .zi:nth-child(5){animation-delay:.12s}.zahl-icons .zi:nth-child(6){animation-delay:.16s}.zahl-icons .zi:nth-child(7){animation-delay:.2s}.zahl-icons .zi:nth-child(8){animation-delay:.24s}.zahl-icons .zi:nth-child(9){animation-delay:.28s}
@keyframes zi-ein{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.zahl-icons .zi{animation:none;opacity:1}}
.fzahl{margin-top:32px;padding-bottom:18px}
.wk-zahl{justify-content:flex-end}
@media (max-width:699px){.wk-zahl{justify-content:center}}
.co-zahl-info{display:grid;justify-items:center;gap:14px;padding:22px 24px 24px;background:var(--co-grau);border-top:1px solid var(--co-line);text-align:center;font-size:14px;line-height:1.5;color:var(--ink-2)}
.co-zahl-info p{max-width:42ch}
.co-fenster{width:56px;height:46px;fill:none;stroke:var(--ink-3);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.co-klein{margin:0;font-size:13px;line-height:1.5;color:var(--ink-3)}
.co-mitte{text-align:center;margin-top:-18px}
.co-form .kasse-karte{border:1px solid var(--co-line);border-left-width:1px;background:var(--co-grau)}
.co-form .kasse-fehler{margin:-12px 0 -16px;font-size:14px;font-weight:600;color:var(--co-fehler)}
.co-btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:0 20px;border:0;border-radius:var(--co-r);background:var(--ultra);color:#fff;font:700 17px/1.2 var(--display);text-decoration:none;cursor:pointer;transition:background-color .15s}
.co-btn:hover{background:var(--ultra-deep)}
.co-btn:focus-visible{outline:2px solid var(--ultra);outline-offset:3px}
.co-btn:disabled{cursor:progress;background:var(--ultra-deep)}
.co-btn:disabled span{opacity:0}
.co-btn:disabled::after{content:"";position:absolute;width:22px;height:22px;border:2.5px solid #ffffff59;border-top-color:#fff;border-radius:50%;animation:co-dreh .7s linear infinite}
@keyframes co-dreh{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.co-btn:disabled::after{animation-duration:2s}}
.co-fuss{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:40px;padding:16px 0 28px;border-top:1px solid var(--co-line);font-size:13px}
.co-fuss a{display:inline-flex;align-items:center;min-height:32px}
.co-seite{display:none}
/* Übersicht (data-ue): Bild 64 px in Rahmen, Mengen-Badge, Variante, Preis rechts */
.ue-pos{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ue-pos li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;font-size:14px}
.ue-bild{position:relative;width:64px;height:64px;border:1px solid var(--co-line);border-radius:var(--co-r);background:#fff}
.ue-bild img{width:100%;height:100%;object-fit:cover;border-radius:7px}
.ue-n{position:absolute;top:-9px;right:-9px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#5B6072;color:#fff;font-size:12px;font-weight:600;line-height:22px;text-align:center;font-variant-numeric:tabular-nums}
.ue-txt{display:grid;gap:2px;min-width:0}
.ue-txt b{font-weight:600;line-height:1.35}
.ue-txt small{font-size:13px;line-height:1.4;color:var(--ink-3)}
.ue-p{font-variant-numeric:tabular-nums;white-space:nowrap}
.ue-sum{display:grid;gap:8px;margin:24px 0 0;font-size:14px}
.ue-sum div{display:flex;justify-content:space-between;gap:12px}
.ue-sum dt{color:var(--ink-2)}
.ue-sum dd{margin:0;font-variant-numeric:tabular-nums}
.ue-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px;font-size:19px;font-weight:700}
.ue-total>span:last-child{display:inline-flex;align-items:baseline;gap:8px}
.ue-total small{font-size:12px;font-weight:500;color:var(--ink-3)}
.ue-total b{font-variant-numeric:tabular-nums}
.ue-mwst{margin:2px 0 0;font-size:13px;color:var(--ink-3)}
.co-unten{display:grid;gap:16px}
/* Rabattcode (Newsletter-Gutschein): einklappbar wie im Checkout-Muster, Abzug als eigene Zeile in der Übersicht */
.co-gs{border:1px solid var(--co-line);border-radius:var(--co-r)}
.co-gs summary{display:flex;align-items:center;min-height:52px;padding:0 16px;color:var(--ultra);font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.co-gs summary::-webkit-details-marker{display:none}
.co-gs summary::after{content:"";margin-left:auto;width:9px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;rotate:45deg;translate:0 -2px;transition:rotate .2s var(--ease)}
.co-gs[open] summary::after{rotate:-135deg;translate:0 2px}
.co-gs-in{display:grid;gap:8px;padding:0 16px 16px}
.co-gs-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.co-gs-zeile input{text-transform:uppercase;letter-spacing:.04em}
.co-gs-los{min-height:52px;padding:0 18px;border:1px solid var(--co-line);border-radius:6px;background:var(--co-grau);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.co-gs-los:hover{border-color:var(--ink-3)}
.co-gs-los:disabled{cursor:progress;opacity:.6}
.co-gs-ok{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:14px;color:#177A42}
.co-gs-ok button{min-height:32px;padding:0 4px;border:0;background:none;color:var(--ultra);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ue-sum .ue-gs dd{color:#177A42}
.ue-gs dt span{font-size:12.5px;letter-spacing:.04em;color:var(--ink-3)}
.co-gs-nl{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.co-gs summary::after{transition:none}}
@media (min-width:1000px){
  .co-kopf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .co-kopf-l{max-width:none;min-height:80px;padding:0 48px 0 max(48px,calc(50vw - 620px));justify-content:flex-start}
  .co-kopf-l .co-korb,.co-form .co-unten,.co-mobil{display:none}
  .co-kopf-r{display:grid;grid-template-columns:minmax(0,440px);align-items:center;padding:0 48px}
  .co-kopf-r .co-korb{justify-self:end}
  .co-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100dvh - 81px)}
  .co-main-in{max-width:none;margin:0;padding:36px 48px 0 max(48px,calc(50vw - 620px))}
  .co-seite{display:block;background:var(--co-grau);border-left:1px solid var(--co-line)}
  .co-seite-in{position:sticky;top:0;max-width:calc(440px + 96px);padding:36px 48px 40px}
  .co-seite[hidden]{display:none}
}
@media (max-width:379px){.co-zwei{grid-template-columns:1fr}}
/* Warenkorb im selben Muster */
.wk{padding-top:clamp(24px,4vw,48px);padding-bottom:clamp(48px,6vw,88px);max-width:1100px}
.wk-kopf h1{font-size:clamp(30px,4vw,40px)}
.wk-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.wk-weiter{color:var(--ultra);font-size:15px;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.wk-th,.wk-z{display:grid;grid-template-columns:minmax(0,1fr) 190px 120px;gap:16px;align-items:center}
.wk-th{padding-bottom:12px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.wk-th span:last-child,.wk-summe{text-align:right}
.wk-z{padding:24px 0;border-bottom:1px solid var(--line)}
.wk-prod{display:flex;gap:18px;align-items:center;min-width:0}
.wk-bild{flex:none;width:96px;height:96px;border:1px solid var(--line);border-radius:var(--co-r);background:#fff;overflow:hidden}
.wk-bild img{width:100%;height:100%;object-fit:cover}
.wk-prod>div{display:grid;gap:4px;min-width:0}
.wk-nm{font-weight:600;font-size:16px;line-height:1.3;text-decoration:none}
.wk-nm:hover{text-decoration:underline;text-underline-offset:3px}
.wk-prod small{font-size:13px;line-height:1.45;color:var(--ink-3)}
.wk-menge{display:flex;align-items:center;gap:6px}
.wk-step{display:inline-flex;align-items:center;height:46px;border:1px solid var(--ink-3);border-radius:6px;background:#fff}
.wk-step button{width:44px;height:44px;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.wk-step button .ico,.wk-del .ico{width:16px;height:16px}
.wk-step button:disabled{opacity:.3;cursor:not-allowed}
.wk-step output{min-width:24px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
.wk-fest{font-size:15px;min-width:70px}
.wk-del{width:44px;height:44px;border:0;background:none;display:grid;place-items:center;color:var(--ink-3);cursor:pointer;border-radius:6px}
.wk-del:hover{color:var(--ink)}
.wk-summe{font-size:16px;font-variant-numeric:tabular-nums;display:grid;justify-items:end}
.wk-summe s{font-size:13px;color:var(--ink-3)}
.wk-sum{display:grid;gap:10px;justify-items:end;margin:28px 0 0 auto;max-width:380px;text-align:right}
.wk-zs{display:flex;gap:24px;align-items:baseline;margin:0;font-size:17px}
.wk-zs b{font-size:19px;font-variant-numeric:tabular-nums}
.wk-note{margin:0;font-size:13px;line-height:1.5;color:var(--ink-3)}
.wk-sum .co-btn{margin:6px 0 4px}
@media (max-width:699px){
  .wk-th{grid-template-columns:minmax(0,1fr) auto}.wk-th span:nth-child(2){display:none}
  .wk-z{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"p s" "m s";gap:12px 12px;align-items:start}
  .wk-prod{grid-area:p;align-items:flex-start}.wk-summe{grid-area:s}.wk-menge{grid-area:m;padding-left:96px;margin-left:18px}
  .wk-bild{width:80px;height:80px}.wk-menge{padding-left:80px;margin-left:16px}.wk-prod{gap:16px}
  .wk-sum{max-width:none;justify-items:stretch;text-align:left}.wk-zs{justify-content:space-between}
}
/* Zahlarten als Radio-Liste (1.5.57): gewählte Zeile klappt den Hinweis auf */
.co-wahl{cursor:pointer;justify-content:flex-start}
.co-wahl input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--ultra);cursor:pointer}
.co-wahl b{flex:1;min-width:0}
.co-box[data-zahl-liste]>*+.co-wahl{border-top:1px solid var(--co-line)}
.co-wahl+.co-zahl-info{display:none}
.co-wahl:has(input:checked)+.co-zahl-info{display:grid}
.co-wahl:has(input:focus-visible){outline:2px solid var(--ultra);outline-offset:-2px}
/* Bestellseite im selben Muster */
.bs-kopf{display:flex;gap:14px;align-items:center;margin-bottom:24px}
.bs-haken{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1.5px solid var(--ultra);border-radius:50%;color:var(--ultra)}
.bs-haken .ico{width:22px;height:22px}
.bs-kopf p{margin:0;font-size:14px;color:var(--ink-3)}
.bs-kopf h1{font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.bs-box{display:grid;gap:8px;padding:20px}
.bs-box h2{font-size:17px;font-weight:700}
.bs-box p{margin:0;font-size:14px;color:var(--ink-2)}
.bs-box .co-btn{margin-top:10px}
.co-zweit{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:1px solid var(--co-line);border-radius:var(--co-r);background:#fff;color:var(--ink);font-weight:600;font-size:15px;text-decoration:none}
.co-zweit:hover{border-color:var(--ink-3)}
.bs-unten{margin-top:32px;padding-top:24px;border-top:1px solid var(--co-line)}
.bs-unten .co-seite-in{padding:0}
@media (min-width:1000px){.co-main .bs-unten{display:none}}
/* Kartenfelder als Mollie-iFrames (Mollie Components), im Stil der eigenen Felder */
.co-zahl-info.co-karte{justify-items:stretch;text-align:left;gap:12px;padding:16px}
.co-karte .co-zwei>div{display:grid;gap:6px;align-content:start}
.mc-feld{display:grid;gap:2px;height:52px;padding:7px 12px 0;border:1px solid var(--co-line);border-radius:6px;background:#fff;transition:border-color .15s,box-shadow .15s}
.mc-feld.fokus{border-color:var(--ultra);box-shadow:0 0 0 1px var(--ultra)}
.mc-feld.fehler{border-color:var(--co-fehler);box-shadow:0 0 0 1px var(--co-fehler)}
.mc-l{font-size:12px;line-height:1.2;color:var(--ink-3)}
.mc{height:24px}
.co-karte .fld-f{margin-top:-6px}
.co-karte .co-klein{margin-top:2px;max-width:none}
.im-spiel [data-cartbtn],.im-spiel [data-add],.im-spiel [data-pd-add],.im-spiel .korb,.im-spiel a[href="/warenkorb.html"],.im-spiel a[href="/kasse.html"]{display:none!important}
/* Kasse in Bewegung (Rico 27.10.: „Checkout braucht Animationen“). Dezent, nur CSS, reduzierte Bewegung schaltet alles ab. */
.ff input{transition:border-color .2s var(--ease),box-shadow .2s var(--ease),padding .2s var(--ease)}
.ff.ok input{padding-right:40px}
.ff.ok::after{content:"";position:absolute;right:12px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:#177A42 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;animation:ok-ein .32s cubic-bezier(.3,1.5,.6,1) both;pointer-events:none}
@keyframes ok-ein{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.co-form .fld-f:not([hidden]){animation:fehler-ein .22s var(--ease)}
@keyframes fehler-ein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.co-wahl{transition:background-color .2s var(--ease)}
.co-wahl:has(input:checked){background:#F7F8FD}
.co-wahl:has(input:checked)+.co-zahl-info{overflow:hidden;animation:co-auf .34s var(--ease)}
.co-mobil[open] .co-mobil-in{overflow:hidden;animation:co-auf .34s var(--ease)}
@keyframes co-auf{from{max-height:0;padding-top:0;padding-bottom:0;opacity:0}to{max-height:40rem;opacity:1}}
.co-btn{transition:background-color .15s,transform .12s var(--ease)}
.co-btn:active:not(:disabled){transform:scale(.985)}
.co-btn span{transition:opacity .15s}
.ue-n{animation:ok-ein .3s var(--ease) both}
.wk-z,.line{transition:height .26s var(--ease),opacity .2s,transform .26s var(--ease)}
.wk-z.geht,.line.geht{overflow:hidden;opacity:0;transform:translateX(12px);padding-block:0;border-bottom-color:transparent}
.bs-haken{border:0;width:52px;height:52px}
.bs-haken{position:relative}
.bs-haken svg{width:52px;height:52px;fill:none;stroke:var(--ultra);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.bs-haken circle{stroke-dasharray:151;stroke-dashoffset:151;animation:zeichnen .6s var(--ease) .1s forwards}
.bs-haken path{stroke-width:3.5;stroke-dasharray:36;stroke-dashoffset:36;animation:zeichnen .38s var(--ease) .6s forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.konfetti{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.konfetti i{position:absolute;width:7px;height:11px;margin:-5px 0 0 -3px;border-radius:2px;background:var(--c);opacity:0;animation:konfetti 1.15s cubic-bezier(.15,.7,.3,1) var(--d) forwards}
.konfetti i:nth-child(3n){width:8px;height:8px;border-radius:50%}
@keyframes konfetti{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.6)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 40px)) rotate(var(--r)) scale(1)}}
@media (prefers-reduced-motion:reduce){
  .ff.ok::after,.co-form .fld-f:not([hidden]),.co-wahl:has(input:checked)+.co-zahl-info,.co-mobil[open] .co-mobil-in,.ue-n{animation:none}
  .co-btn:active:not(:disabled){transform:none}
  .bs-haken circle,.bs-haken path{animation:none;stroke-dashoffset:0}
  .wk-z,.line{transition:none}
}

/* Sendung verfolgen: Sendcloud-Trackingportal (1.5.69) */
.tracking-frame{display:block;width:100%;height:450px;border:0;margin:0 0 20px}
@media (max-width:640px){.tracking-frame{height:600px}}

/* Leiste oben: REC-Punkt (1.5.76) */
.strip-rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:#FF3B30;margin-right:7px;vertical-align:1px;animation:rec 1.5s ease-in-out infinite}
/* 1.5.81: kein Dauer-Puls, solange eine 3D-Ansicht da ist (Karte bzw. 3D-Dialog), Flackern auf Android-Chrome */
html:has(.tk-dreh) .strip-rec,html:has(dialog[open]) .strip-rec{animation:none}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.strip-rec{animation:none}}

/* 1.5.83: kein Android-Tap-Rechteck; Fokusrahmen nur per Tastatur (focus-visible), folgt der Form (outline folgt border-radius) */
html{-webkit-tap-highlight-color:transparent}
:where(a,button,summary,label,[role=button],[role=tab],[tabindex]):focus:not(:focus-visible){outline:none}

/* ---------- Live-Sektion: Link „Streamer werden“ (1.6.0) ---------- */
.live-st{margin-top:14px;font-size:15px;color:#C9CDDC}
.live-st a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#fff;font-weight:700;text-underline-offset:4px}
.live-st .ico{width:16px;height:16px}

/* ---------- Streamer werden (1.6.0) ---------- */
.st-hero .disp{font-size:clamp(44px,11vw,104px)}
.st-hero .lead{margin-top:16px}
.st-hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.st-deal-in{display:grid;gap:clamp(28px,4vw,48px);align-items:start}
.st-geben .h2 em{font-style:normal;color:var(--ultra)}
.st-liste{list-style:none;padding:0;margin-top:22px;display:grid}
.st-liste li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.st-liste li:last-child{border-bottom:1px solid var(--line)}
.st-liste .ico{width:44px;height:44px;padding:10px;border-radius:12px;background:var(--white);color:var(--ultra)}
.st-liste b{display:block;font-size:17px;font-weight:800;line-height:1.3;color:var(--ink)}
.st-liste span{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.st-note{margin-top:16px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.st-nehmen{background:var(--navy);color:#fff;border-radius:16px;padding:clamp(22px,3vw,36px)}
.st-nehmen .h2{color:#fff}
.st-nehmen .st-liste li{border-color:#ffffff26}
.st-nehmen .st-liste .ico{background:#ffffff14;color:var(--volt)}
.st-nehmen .st-liste b{color:#fff}
.st-nehmen .st-liste span{color:#C9CDDC}
.st-ablauf{background:var(--ultra);color:#fff;padding-block:clamp(48px,7vw,96px);overflow:hidden}
.st-ablauf .disp{font-size:clamp(38px,7vw,80px)}
.st-schritte{list-style:none;padding:0;margin-top:clamp(24px,4vw,44px);display:grid;gap:0;counter-reset:s}
.st-schritte li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;column-gap:14px;padding:18px 0;border-top:1.5px solid #ffffff40}
.st-schritte li::before{content:counter(s);grid-row:span 2;font:italic 900 52px/.85 var(--display);font-stretch:116%;color:var(--volt)}
.st-schritte b{font-size:19px;font-weight:800;line-height:1.25}
.st-schritte span{font-size:15.5px;line-height:1.5;color:#DCE2FF}
.st-bew-in{display:grid;gap:clamp(36px,5vw,64px);align-items:start}
.st-bew-form{max-width:720px;min-width:0}
.st-unter{margin-top:10px;font-size:15px;color:var(--ink-2)}
.st-form{margin-top:28px;display:grid;gap:36px}
.st-gr{border:0;padding:0;margin:0;min-width:0;display:grid;gap:16px}
.st-gr>legend{width:100%;padding:0 0 10px;margin-bottom:16px;border-bottom:1.5px solid var(--ink);font-weight:800;font-size:19px}
.st-plattf,.st-seg{border:0;padding:0;margin:0;min-width:0;display:grid;gap:10px}
.st-plattf legend,.st-seg legend{padding:0;margin-bottom:10px;font-weight:600;font-size:14px}
.st-opt{font-weight:400;color:var(--ink-3)}
.st-chips{display:flex;flex-wrap:wrap;gap:8px}
.st-chip{position:relative;display:inline-flex}
.st-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.st-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--ink-3);border-radius:999px;background:var(--white);font-weight:600;font-size:15px;transition:background .15s,color .15s,border-color .15s}
.st-chip:hover span{border-color:var(--ink)}
.st-chip input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.st-chip input:focus-visible+span{outline:3px solid var(--ultra);outline-offset:2px}
.st-chip input[aria-invalid=true]+span{border-color:var(--co-fehler)}
.st-form .fld{min-width:0}
.st-form .fld input,.st-form .fld textarea{width:100%}
.st-form .fld :is(input,textarea)[aria-invalid=true]{border-color:var(--co-fehler);box-shadow:0 0 0 1px var(--co-fehler)}
.st-form .fld-f{margin:0;color:var(--co-fehler);font-size:13.5px;font-weight:600;line-height:1.4}
.st-haken{display:grid;gap:12px}
.st-haken .check a{color:var(--ultra);text-underline-offset:2px}
.st-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.st-senden{display:grid;gap:12px}
.st-senden .btn{width:100%}
.st-senden .btn[disabled]{opacity:.6;cursor:progress}
.st-status:empty{display:none}
.st-status{font-size:15px;font-weight:600;color:var(--ink-2)}
.st-status[data-art=fehler]{color:var(--co-fehler)}
.st-status a{color:inherit;text-underline-offset:2px}
.st-danke{margin-top:24px}
.st-danke h3{font-weight:800;font-size:24px}
.st-faq h2{font-weight:800;font-size:22px;margin-bottom:12px}
.st-faq .faq{max-width:none}
.st-faq .faq a,.st-faq>p a{color:var(--ultra)}
.st-faq>p{font-size:15px;color:var(--ink-2)}
@media (min-width:600px){.st-senden{justify-items:start}.st-senden .btn{width:auto}}
@media (min-width:900px){
  .st-deal-in{grid-template-columns:1.1fr 1fr}
  .st-schritte{grid-template-columns:repeat(4,1fr);column-gap:28px}
  .st-schritte li{grid-template-columns:1fr;row-gap:10px;padding-top:22px}
  .st-schritte li::before{grid-row:auto;font-size:72px}
  .st-bew-in{grid-template-columns:minmax(0,1fr) 360px}
  .st-faq{position:sticky;top:calc(var(--head-h) + 24px)}
}

/* ---------- Von TCG Direkt direkt unter dem Hero (1.6.0): ab 760 px zwei breite Karten, Bild links ---------- */
@media (min-width:760px){
  .grid.reihe.eigen-reihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .eigen-reihe .prod{display:grid;grid-template-columns:minmax(0,38%) 1fr;grid-template-rows:auto auto auto 1fr;column-gap:clamp(16px,2.4vw,32px);row-gap:6px;padding:14px;align-items:start}
  .eigen-reihe .prod-img{grid-row:1 / -1}
  .eigen-reihe .prod-meta{margin-top:6px}
  .eigen-reihe .prod h3{font-size:clamp(20px,2vw,26px)}
  .eigen-reihe .inhalt{display:block;font-size:15px}
  .eigen-reihe .buy{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;align-self:end;gap:12px}
  .eigen-reihe .buy .price{font-size:22px}
  .eigen-reihe .buy .tick{min-width:150px}
}

/* ---------- Shop-Bewertungen auf Produktseiten (1.6.0) ---------- */
.bwsec{padding-block:clamp(36px,5vw,64px)}
.bw-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.bw-schnitt{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2)}
.bw-schnitt b{font-weight:800;font-size:32px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.bw-sterne{position:relative;display:inline-block;flex:none;line-height:0;white-space:nowrap;color:#F5B301}
.bw-sterne svg{display:inline-block;vertical-align:top;width:16px;height:16px;margin-right:2px}
.bw-sterne.gross svg{width:22px;height:22px}
.bw-leer{color:#D3D5DA}
.bw-voll{position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap}
.bw-info{margin-top:12px;max-width:72ch;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.bw-liste{list-style:none;padding:0;margin-top:20px;display:grid;gap:12px}
.bw-liste li{background:var(--white);border-radius:12px;padding:16px 18px;box-shadow:0 1px 2px #0f12220f}
.bw-z{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13.5px;color:var(--ink-3)}
.bw-ok{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:#177A42}
.bw-ok .ico{width:16px;height:16px;stroke-width:2.6}
.bw-liste p{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--ink);max-width:72ch;overflow-wrap:anywhere}
.bw-mehr{margin-top:16px}
@media (min-width:900px){.bw-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
.co-hint a{color:var(--ultra);text-underline-offset:2px}
.co-marke{flex-basis:100%;margin-top:6px;font-size:12px;line-height:1.5;color:var(--ink-3)}   /* 1.5.90 Markenhinweis im Kassen-Fuß */

/* 1.5.95: Kaufleiste über dem Cookie-Banner. Banner am Handy schmaler, Ablehnen und Akzeptieren gleich gewichtet (TTDSG § 25, keine Lenkung) */
.buybar{bottom:var(--einw-h,0px)}
.einw-ja,.einw-ja:hover{background:var(--white);border-color:var(--ink);color:var(--ink)}
.einw-ja:hover{background:var(--paper)}
@media (max-width:899px){.einw{padding-block:10px calc(10px + env(safe-area-inset-bottom));font-size:var(--fs-13);line-height:1.4}
  .einw-in{gap:8px}.einw-x{display:inline;margin:0;font-size:12px}.einw-b{min-height:44px}}