/* ============================================================
   TELEFON.anlagen — Shop-Redesign (Struktur B)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root{
  --bg:#f6f7f8; --surface:#ffffff; --surface-2:#eef1f3; --surface-3:#e3e7e9;
  --ink:#161b20; --ink-2:#4c565e; --ink-3:#828d94;
  --line:#e1e5e8; --line-2:#cdd3d7;
  --dark:#242b33; --dark-2:#181d23; --dark-ink:#eef1f3;
  --cyan:#149ec4; --cyan-2:#0f80a0; --cyan-ink:#ffffff; --cyan-soft:#e2f4f9;
  --gold:#c98a1e; --gold-soft:#faf1de;
  --good:#188354; --good-soft:#e3f6ec;
  --warn:#a3630f; --warn-soft:#faf0dd;
  --bad:#b0392c; --bad-soft:#fbe6e3;
  --r-sm:4px; --r-md:8px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(18,23,27,.06);
  --sh-2:0 6px 20px -8px rgba(18,23,27,.16), 0 2px 6px -2px rgba(18,23,27,.08);
  --sh-3:0 24px 56px -24px rgba(18,23,27,.32), 0 8px 20px -8px rgba(18,23,27,.14);
  --maxw:1220px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1114; --surface:#171b1f; --surface-2:#1e2328; --surface-3:#262c32;
    --ink:#eceff1; --ink-2:#a6b0b6; --ink-3:#707a80;
    --line:#282e34; --line-2:#383f46;
    --dark:#0c0f12; --dark-2:#08090b; --dark-ink:#eef1f3;
    --cyan:#38c1e8; --cyan-2:#26a6cb; --cyan-ink:#06171b; --cyan-soft:#112830;
    --gold:#e2ac53; --gold-soft:#2b230f;
    --good:#3cbb85; --good-soft:#0f2a1e;
    --warn:#dc9e4c; --warn-soft:#2b2112;
    --bad:#df6a5c; --bad-soft:#2c1a17;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 6px 22px -8px rgba(0,0,0,.55);
    --sh-3:0 28px 64px -26px rgba(0,0,0,.75), 0 10px 24px -10px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1114; --surface:#171b1f; --surface-2:#1e2328; --surface-3:#262c32;
  --ink:#eceff1; --ink-2:#a6b0b6; --ink-3:#707a80;
  --line:#282e34; --line-2:#383f46;
  --dark:#0c0f12; --dark-2:#08090b; --dark-ink:#eef1f3;
  --cyan:#38c1e8; --cyan-2:#26a6cb; --cyan-ink:#06171b; --cyan-soft:#112830;
  --gold:#e2ac53; --gold-soft:#2b230f;
  --good:#3cbb85; --good-soft:#0f2a1e;
  --warn:#dc9e4c; --warn-soft:#2b2112;
  --bad:#df6a5c; --bad-soft:#2c1a17;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 6px 22px -8px rgba(0,0,0,.55);
  --sh-3:0 28px 64px -26px rgba(0,0,0,.75), 0 10px 24px -10px rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,sans-serif; line-height:1.6; font-size:15.5px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem;}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
.tnum{font-variant-numeric:tabular-nums;}
h1,h2,h3{margin:0;text-wrap:balance;font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-.02em;}
p{margin:0;}
a{color:inherit;}
button{font-family:inherit;}
[hidden]{display:none!important;}
img{max-width:100%;display:block;}
::selection{background:var(--cyan-soft);color:var(--ink);}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

/* ============ topline + header ============ */
.topline{background:var(--dark);color:#c9d0d4;font-size:.78rem;}
.topline .wrap{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1.5rem;flex-wrap:wrap;gap:.5rem;}
.topline a{text-decoration:none;}
.topline .right{display:flex;gap:1.2rem;align-items:center;}
.topline .hot{color:var(--cyan);font-weight:700;}

.sitehead{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.sitehead .wrap{display:flex;align-items:center;gap:1.6rem;padding:1.05rem 1.5rem;flex-wrap:wrap;}
.brand{display:flex;align-items:baseline;gap:.45rem;text-decoration:none;color:inherit;cursor:pointer;border:none;background:none;padding:0;}
.brand .b1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink);}
.brand .b2{font-family:'Sora',sans-serif;font-weight:600;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink-3);}
.brand .pill{background:var(--cyan);color:var(--cyan-ink);font-weight:800;font-size:.72rem;letter-spacing:.03em;
  padding:.3rem .55rem;border-radius:4px;margin-left:.15rem;}

.gsearch{flex:1;min-width:220px;position:relative;}
.gsearch input{width:100%;border:1.5px solid var(--line-2);border-radius:24px;padding:.68rem 1.1rem .68rem 2.6rem;
  font-size:.88rem;font-family:'Manrope',sans-serif;background:var(--surface-2);color:var(--ink);}
.gsearch input::placeholder{color:var(--ink-3);}
.gsearch input:focus{outline:none;border-color:var(--cyan);background:var(--surface);box-shadow:0 0 0 3px var(--cyan-soft);}
.gsearch .ic{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:.95rem;}

.headicons{display:flex;align-items:center;gap:1.4rem;}
.hicon{display:flex;flex-direction:column;align-items:center;gap:.18rem;color:var(--ink-2);font-size:.68rem;
  font-weight:600;cursor:pointer;position:relative;background:none;border:none;padding:0;}
.hicon .g{font-size:1.2rem;}
.hicon .badge{position:absolute;top:-4px;right:-9px;background:var(--cyan);color:var(--cyan-ink);
  font-size:.6rem;font-weight:800;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

.mainnav{background:var(--dark);}
.mainnav .navrow{max-width:var(--maxw);margin:0 auto;display:flex;padding:0 1.5rem;overflow-x:auto;position:relative;}
.navlink{padding:.85rem 1.1rem;font-size:.84rem;font-weight:700;color:#c9d0d4;cursor:pointer;white-space:nowrap;
  border:none;background:none;border-bottom:2.5px solid transparent;font-family:'Manrope',sans-serif;
  display:flex;align-items:center;gap:.35rem;}
.navlink:hover, .navlink[aria-expanded="true"]{color:#fff;}
.navlink[aria-expanded="true"]{border-bottom-color:var(--cyan);background:rgba(255,255,255,.05);}
.navlink .car{font-size:.6rem;opacity:.7;transition:transform .15s;}
.navlink[aria-expanded="true"] .car{transform:rotate(180deg);}
.navlink.gold{color:var(--gold);}

.mega{position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);
  box-shadow:var(--sh-2);padding:1.6rem 0;z-index:60;animation:megaIn .14s ease;}
@keyframes megaIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.mega .megrid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2.2rem;padding:0 1.5rem;}
.mega h4{margin:0 0 .7rem;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cyan-2);}
.mega ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.mega li button{background:none;border:none;padding:0;color:var(--ink-2);text-decoration:none;font-size:.87rem;
  display:flex;justify-content:space-between;gap:.6rem;width:100%;text-align:left;cursor:pointer;font-family:'Manrope',sans-serif;}
.mega li button:hover{color:var(--cyan-2);}
.mega li .n{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--ink-3);}
.mega .promo{background:var(--dark);border-radius:var(--r-md);padding:1.2rem;color:#fff;display:flex;flex-direction:column;gap:.55rem;}
.mega .promo .pt{font-family:'Sora',sans-serif;font-weight:700;font-size:.98rem;}
.mega .promo .pd{font-size:.79rem;color:#b7bfc4;line-height:1.55;}
.mega .promo button{align-self:flex-start;background:var(--cyan);color:var(--cyan-ink);font-weight:700;font-size:.78rem;
  padding:.45rem .85rem;border-radius:5px;border:none;cursor:pointer;font-family:'Manrope',sans-serif;}

/* ============ hero ============ */
.hero{background:linear-gradient(160deg,var(--dark) 0%, var(--dark-2) 100%);color:#fff;position:relative;overflow:hidden;}
.hero .glow1{position:absolute;top:-160px;right:-120px;width:460px;height:460px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 30%, rgba(20,158,196,.38), transparent 68%);}
.hero .glow2{position:absolute;bottom:-200px;left:8%;width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 60% 40%, rgba(20,158,196,.16), transparent 70%);}
.hero .wrap{position:relative;padding:4rem 1.5rem 3.4rem;display:grid;grid-template-columns:1.1fr .9fr;gap:2.4rem;align-items:center;}
.hero-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cyan);display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;}
.hero-eyebrow::before{content:"";width:7px;height:7px;background:var(--cyan);border-radius:50%;}
.hero h1{font-size:clamp(1.9rem,4vw,2.75rem);line-height:1.08;letter-spacing:-.02em;margin-bottom:.95rem;}
.hero h1 em{font-style:normal;color:var(--cyan);}
.hero p{color:#c3cbd0;font-size:1.03rem;max-width:46ch;margin-bottom:1.5rem;line-height:1.65;font-family:'Manrope',sans-serif;font-weight:400;}
.hero-search{display:flex;max-width:480px;background:#fff;border-radius:11px;overflow:hidden;box-shadow:var(--sh-2);}
.hero-search input{flex:1;border:none;padding:.95rem 1.2rem;font-size:.9rem;font-family:'Manrope',sans-serif;color:#161b20;}
.hero-search input:focus{outline:none;}
.hero-search button{border:none;background:var(--cyan);color:var(--cyan-ink);font-weight:700;font-size:.86rem;
  padding:0 1.5rem;cursor:pointer;}
.hero-search button:hover{background:var(--cyan-2);}
.hero-tags{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1rem;}
.htag{font-size:.78rem;color:#aab3b8;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  padding:.35rem .75rem;border-radius:20px;cursor:pointer;font-family:'Manrope',sans-serif;}
.htag:hover{border-color:var(--cyan);color:#fff;}

.hero-visual{display:flex;flex-direction:column;gap:.75rem;}
.hv-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);
  padding:.9rem 1.05rem;display:flex;align-items:center;gap:.85rem;}
.hv-ic{width:40px;height:40px;border-radius:9px;background:var(--cyan-soft);color:var(--cyan-2);display:flex;
  align-items:center;justify-content:center;font-size:1.15rem;flex:none;}
.hv-t{font-weight:700;font-size:.87rem;color:#fff;}
.hv-s{font-size:.76rem;color:#a9b2b7;}

/* ============ USP strip ============ */
.usp{background:var(--surface-2);border-bottom:1px solid var(--line);}
.usp .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:1.15rem 1.5rem;}
.usp-item{display:flex;align-items:center;gap:.65rem;padding:0 1rem;border-right:1px solid var(--line);}
.usp-item:last-child{border-right:none;}
.usp-ic{font-size:1.25rem;color:var(--cyan-2);}
.usp-t{font-weight:700;font-size:.83rem;line-height:1.25;}
.usp-s{font-size:.73rem;color:var(--ink-3);}

/* ============ sections ============ */
.sect{padding:3rem 1.5rem;}
.sect-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.sect-h h2{font-size:1.5rem;letter-spacing:-.015em;}
.sect-h .lnk{font-size:.83rem;font-weight:700;color:var(--cyan-2);cursor:pointer;white-space:nowrap;background:none;border:none;font-family:'Manrope',sans-serif;}
.sect-h .lnk:hover{text-decoration:underline;}

.catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;}
.cattile{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:1.25rem 1.1rem;
  display:flex;flex-direction:column;gap:.55rem;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s;
  text-align:left;font-family:'Manrope',sans-serif;}
.cattile:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--cyan);}
.cattile .ic{width:44px;height:44px;border-radius:10px;background:var(--cyan-soft);color:var(--cyan-2);
  display:flex;align-items:center;justify-content:center;font-size:1.35rem;}
.cattile .t{font-weight:700;font-size:.94rem;color:var(--ink);}
.cattile .n{font-family:'JetBrains Mono',monospace;font-size:.73rem;color:var(--ink-3);}

/* ============ product grid & card ============ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1.15rem;}
.pcard{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;
  text-align:left;font-family:'Manrope',sans-serif;padding:0;color:inherit;}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2);}
.pcard-img{background:var(--surface-2);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);font-size:2rem;position:relative;overflow:hidden;}
.pcard-img img{width:100%;height:100%;object-fit:contain;padding:.9rem;transition:transform .3s ease;}
.pcard:hover .pcard-img img{transform:scale(1.05);}
.pcard-ph{display:flex;flex-direction:column;align-items:center;gap:.35rem;color:var(--ink-3);}
.pcard-ph .g{font-size:1.7rem;opacity:.45;}
.pcard-ph .t{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.04em;}
.pcard-badges{position:absolute;top:.6rem;left:.6rem;display:flex;flex-direction:column;gap:.32rem;}
.bdg{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;padding:.18rem .48rem;border-radius:3px;letter-spacing:.02em;}
.bdg.new{background:var(--gold);color:#3a2a08;}
.bdg.sale{background:var(--bad);color:#fff;}
.bdg.stock{background:var(--good);color:#fff;}
.bdg.premium{background:var(--dark);color:#fff;}
.pcard-fav{position:absolute;top:.55rem;right:.55rem;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--ink-3);border:none;cursor:pointer;}
.pcard-b{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;gap:.32rem;flex:1;}
.pcard-brand{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
.pcard-t{font-weight:700;font-size:.9rem;line-height:1.32;color:var(--ink);}
.pcard-v{font-size:.74rem;color:var(--ink-3);}
.pcard-bottom{margin-top:auto;padding-top:.6rem;display:flex;align-items:baseline;justify-content:space-between;gap:.4rem;}
.pcard-p{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:1.05rem;color:var(--ink);}
.pcard-p small{font-weight:500;font-size:.66rem;color:var(--ink-3);display:block;font-family:'Manrope',sans-serif;}
.pcard-add{width:32px;height:32px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);
  color:var(--ink-2);font-size:.95rem;display:flex;align-items:center;justify-content:center;flex:none;transition:all .15s;}
.pcard:hover .pcard-add{background:var(--cyan);color:var(--cyan-ink);border-color:var(--cyan);}

/* ============ brand strip / footer ============ */
.brandstrip{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.brandstrip .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;padding:1.4rem 1.5rem;flex-wrap:wrap;}
.bslabel{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.bslogos{display:flex;gap:2rem;flex-wrap:wrap;}
.bslogo{font-family:'Sora',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink-3);letter-spacing:-.01em;}

footer.sitefoot{background:var(--dark);color:#aab3b8;margin-top:auto;}
.sitefoot .wrap{padding:2.8rem 1.5rem 1.8rem;display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:2.2rem;}
.sitefoot h5{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:#7d868c;margin:0 0 .9rem;}
.sitefoot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;font-size:.84rem;}
.sitefoot .fbrand{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.8rem;}
.sitefoot .fbrand .b1{font-family:'Sora',sans-serif;font-weight:800;color:#fff;font-size:1.15rem;}
.sitefoot .fbrand .b2{font-family:'Sora',sans-serif;font-weight:600;color:#8f979c;font-size:1.15rem;}
.sitefoot p.fd{font-size:.83rem;line-height:1.65;max-width:32ch;color:#8f979c;}
.footbottom{border-top:1px solid rgba(255,255,255,.08);padding:1.1rem 1.5rem;font-size:.75rem;color:#7d868c;
  max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;}

/* ============ breadcrumb ============ */
.crumb{padding:1rem 1.5rem 0;font-size:.79rem;color:var(--ink-3);max-width:var(--maxw);margin:0 auto;}
.crumb button{background:none;border:none;padding:0;color:var(--ink-3);cursor:pointer;font-family:'Manrope',sans-serif;font-size:inherit;}
.crumb button:hover{color:var(--cyan-2);}
.crumb .cur{color:var(--ink-2);}

/* ============ Kategorieseite ============ */
.catbanner{margin:1.1rem 1.5rem 0;max-width:calc(var(--maxw) - 3rem);margin-left:auto;margin-right:auto;
  background:linear-gradient(120deg,var(--dark),var(--dark-2));border-radius:var(--r-lg);
  color:#fff;padding:1.9rem 2.1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  position:relative;overflow:hidden;}
.catbanner::after{content:"";position:absolute;top:-70px;right:-70px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,158,196,.32),transparent 70%);pointer-events:none;}
.catbanner h2{font-size:1.7rem;position:relative;}
.catbanner p{color:#b9c1c6;font-size:.87rem;margin-top:.35rem;max-width:46ch;position:relative;font-family:'Manrope',sans-serif;font-weight:400;}
.catbanner .cnt{position:relative;font-family:'JetBrains Mono',monospace;background:rgba(255,255,255,.1);
  padding:.55rem 1.05rem;border-radius:8px;font-size:.82rem;font-weight:600;white-space:nowrap;}

.catlayout{max-width:var(--maxw);margin:0 auto;padding:1.6rem 1.5rem 3rem;display:grid;grid-template-columns:230px minmax(0,1fr);gap:1.8rem;}
.filtpanel{display:flex;flex-direction:column;gap:1.4rem;align-self:start;position:sticky;top:5.5rem;}
.fgroup h4{margin:0 0 .6rem;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);}
.fchoice{display:flex;flex-direction:column;gap:.15rem;}
.fbtn{display:flex;justify-content:space-between;align-items:center;text-align:left;font-family:'Manrope',sans-serif;
  font-size:.84rem;padding:.45rem .6rem;border:none;border-radius:6px;background:none;color:var(--ink-2);cursor:pointer;
  font-weight:500;}
.fbtn:hover{background:var(--surface-2);}
.fbtn[aria-pressed="true"]{background:var(--cyan-soft);color:var(--cyan-2);font-weight:700;}
.fbtn .n{font-family:'JetBrains Mono',monospace;font-size:.71rem;color:var(--ink-3);}
.fbtn[aria-pressed="true"] .n{color:var(--cyan-2);}

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem;flex-wrap:wrap;gap:.7rem;}
.tb-count{font-size:.87rem;color:var(--ink-2);}
.tb-count b{color:var(--ink);}
.tb-sort{font-family:'Manrope',sans-serif;font-size:.81rem;border:1px solid var(--line-2);border-radius:6px;
  padding:.45rem .75rem;background:var(--surface);color:var(--ink);}
.empty-state{padding:3rem 1rem;text-align:center;color:var(--ink-3);font-size:.9rem;}

/* ============ Produktseite ============ */
.pdpwrap{max-width:var(--maxw);margin:0 auto;padding:1.7rem 1.5rem 3rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;}
.pdp-gallery{display:flex;flex-direction:column;gap:.8rem;position:sticky;top:5.5rem;align-self:start;}
.pdp-main-img{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;color:var(--ink-3);position:relative;overflow:hidden;}
.pdp-main-img img{width:100%;height:100%;object-fit:contain;padding:2.2rem;}
.pdp-main-img .g{font-size:3.4rem;opacity:.4;}
.pdp-main-img .t{font-family:'JetBrains Mono',monospace;font-size:.76rem;text-align:center;line-height:1.55;padding:0 1rem;}
.pdp-thumbs{display:flex;gap:.6rem;}
.pdp-thumb{width:60px;height:60px;border-radius:9px;background:var(--surface-2);border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink-3);cursor:pointer;overflow:hidden;padding:0;}
.pdp-thumb img{width:100%;height:100%;object-fit:contain;padding:.4rem;}
.pdp-thumb.active{border-color:var(--cyan);}

.pdp-info{display:flex;flex-direction:column;gap:1.2rem;}
.pdp-brandrow{display:flex;justify-content:space-between;align-items:center;}
.pdp-brand{font-family:'JetBrains Mono',monospace;font-size:.73rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-2);font-weight:700;}
.pdp-sku{font-family:'JetBrains Mono',monospace;font-size:.73rem;color:var(--ink-3);}
.pdp-title{font-size:1.75rem;letter-spacing:-.02em;line-height:1.15;}
.pdp-desc{font-size:.92rem;color:var(--ink-2);line-height:1.65;font-family:'Manrope',sans-serif;}
.pdp-alt{font-size:.87rem;color:var(--ink-2);background:var(--surface-2);border-radius:7px;padding:.55rem .8rem;
  display:flex;align-items:center;gap:.5rem;font-family:'Manrope',sans-serif;}
.pdp-alt b{color:var(--ink);}
.pdp-rating{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink-2);}
.stars{color:var(--gold);letter-spacing:1px;}

.selectblock{display:flex;flex-direction:column;gap:.45rem;}
.sel-label{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  display:flex;justify-content:space-between;}
.sel-label .cur{color:var(--ink);font-weight:700;text-transform:none;letter-spacing:0;font-family:'Manrope',sans-serif;font-size:.81rem;}
.selopts{display:flex;gap:.55rem;flex-wrap:wrap;}
.selopt{font-family:'Manrope',sans-serif;font-weight:700;font-size:.86rem;padding:.55rem 1rem;border:1.5px solid var(--line-2);
  border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;transition:all .12s;}
.selopt[aria-pressed="true"]{border-color:var(--cyan);background:var(--cyan-soft);color:var(--cyan-2);}
.selopt:hover:not([aria-pressed="true"]){border-color:var(--ink-3);}

.pricebox{background:var(--surface-2);border-radius:var(--r-md);padding:1.2rem 1.4rem;display:flex;
  flex-direction:column;gap:.55rem;}
.pricerow{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;}
.p-gross{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:2.1rem;letter-spacing:-.01em;}
.p-uvp{font-family:'JetBrains Mono',monospace;font-size:.87rem;color:var(--ink-3);text-decoration:line-through;}
.p-save{background:var(--bad);color:#fff;font-family:'JetBrains Mono',monospace;font-size:.71rem;font-weight:700;
  padding:.16rem .52rem;border-radius:4px;}
.p-net{font-family:'JetBrains Mono',monospace;font-size:.79rem;color:var(--ink-3);}

.availrow{display:flex;align-items:center;gap:.5rem;font-size:.87rem;font-weight:700;color:var(--good);}
.availrow .d{width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 6px var(--good);}
.availrow.no{color:var(--warn);} .availrow.no .d{background:var(--warn);box-shadow:0 0 6px var(--warn);}

.compatbox{border:1.5px solid var(--good);background:var(--good-soft);border-radius:var(--r-md);padding:.95rem 1.1rem;
  display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;line-height:1.6;font-family:'Manrope',sans-serif;}
.compatbox .ic{color:var(--good);font-size:1.15rem;flex:none;}
.compatbox b{color:var(--good);}
.compatbox.warn{border-color:var(--warn);background:var(--warn-soft);}
.compatbox.warn .ic{color:var(--warn);}
.compatbox.warn b{color:var(--warn);}

.buyrow{display:flex;gap:.75rem;align-items:stretch;}
.qtybox{display:flex;align-items:center;border:1.5px solid var(--line-2);border-radius:9px;overflow:hidden;}
.qtybox button{border:none;background:var(--surface-2);width:36px;font-size:1.05rem;color:var(--ink);cursor:pointer;}
.qtybox button:hover{background:var(--surface-3);}
.qtybox span{width:36px;text-align:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.92rem;}
.buybtn{flex:1;background:var(--cyan);color:var(--cyan-ink);border:none;border-radius:9px;font-weight:800;
  font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.55rem;transition:background .15s;}
.buybtn:hover{background:var(--cyan-2);}
.buybtn.alt{background:transparent;color:var(--ink);border:1.5px solid var(--line-2);flex:none;}
.buybtn.alt:hover{border-color:var(--ink-3);}

.toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%) translateY(120%);background:var(--dark);color:#fff;
  padding:.85rem 1.4rem;border-radius:10px;font-size:.85rem;font-weight:600;box-shadow:var(--sh-3);z-index:200;
  display:flex;align-items:center;gap:.6rem;transition:transform .25s cubic-bezier(.2,.9,.3,1.2);font-family:'Manrope',sans-serif;}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast .ck{color:var(--cyan);font-weight:800;}

.accordion{border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-h{width:100%;text-align:left;background:none;border:none;padding:1rem 0;display:flex;justify-content:space-between;
  align-items:center;font-weight:700;font-size:.89rem;color:var(--ink);cursor:pointer;font-family:'Manrope',sans-serif;}
.acc-h .car{transition:transform .15s;color:var(--ink-3);}
.acc-h[aria-expanded="true"] .car{transform:rotate(180deg);}
.acc-b{padding:0 0 1.1rem;font-size:.86rem;color:var(--ink-2);line-height:1.75;font-family:'Manrope',sans-serif;}
.acc-b ul{margin:0;padding-left:1.15rem;}
.acc-b li{margin-bottom:.25rem;}

.crosssell{padding:2.6rem 1.5rem 0;}

.notfound{max-width:var(--maxw);margin:0 auto;padding:5rem 1.5rem;text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center;}
.notfound .big{font-family:'Sora',sans-serif;font-weight:800;font-size:3.5rem;color:var(--line-2);}

.app-fade{animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero-visual{display:none;}
  .usp .wrap{grid-template-columns:repeat(2,1fr);}
  .usp-item{border-right:none;border-bottom:1px solid var(--line);padding:.7rem 0;}
  .mega .megrid{grid-template-columns:repeat(2,1fr);}
  .catlayout{grid-template-columns:1fr;}
  .filtpanel{position:static;flex-direction:row;flex-wrap:wrap;}
  .fgroup{min-width:150px;}
  .pdpwrap{grid-template-columns:1fr;}
  .pdp-gallery{position:static;}
  .sitefoot .wrap{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}