/* Silvesternacht: Rauchblau als Grund, Effektfarben nur als Kategorie-Code, Gold für Preise */
:root{
  color-scheme:dark;
  --bg:#161A2B; --deep:#10131F; --surface:#1D2236; --surface2:#262C45; --line:#2C3350; --line2:#3D4568;
  --ink:#ECEEF6; --ink2:#BCC3D9; --muted:#8990AD;
  --gold:#F4C542; --gold-fill:#F4C542; --gold-ink:#1B1604; --good:#5FD08A; --warn:#FFB454;
  --sr:#FF5A5F; --vi:#B58CFF; --cu:#4FA3FF; --ca:#FF9F43; --mg:#C9D0E2; --ba:#3FC9C0;
  --hd-ink:#ECEEF6; --hd-muted:#9AA1BD;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#F2F3F7; --surface:#FFFFFF; --surface2:#E9EBF2; --line:#DCDFE8; --line2:#C3C8D8;
    --ink:#161A2B; --ink2:#3A405C; --muted:#636A86;
    --gold:#8F6200; --gold-fill:#F4C542; --good:#18793F; --warn:#9A5800;
    --sr:#D6353B; --vi:#7446D1; --cu:#1D68C9; --ca:#BF5C06; --mg:#646C88; --ba:#0E8A82;
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F2F3F7; --surface:#FFFFFF; --surface2:#E9EBF2; --line:#DCDFE8; --line2:#C3C8D8;
  --ink:#161A2B; --ink2:#3A405C; --muted:#636A86;
  --gold:#8F6200; --gold-fill:#F4C542; --good:#18793F; --warn:#9A5800;
  --sr:#D6353B; --vi:#7446D1; --cu:#1D68C9; --ca:#BF5C06; --mg:#646C88; --ba:#0E8A82;
}
.c-sr{--c:var(--sr)} .c-vi{--c:var(--vi)} .c-cu{--c:var(--cu)} .c-ca{--c:var(--ca)} .c-mg{--c:var(--mg)} .c-ba{--c:var(--ba)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.45;margin:0;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--gold)}
button,input,select{font:inherit;color:inherit}
input[type=checkbox],input[type=radio]{accent-color:var(--gold-fill)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.sm{font-size:13px}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
:focus-visible{outline:2px solid var(--gold-fill);outline-offset:2px;border-radius:3px}

h1,h2{font-family:"Bricolage Grotesque",Archivo,sans-serif;font-weight:700;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
h1{font-size:30px;margin:0 0 6px}
h2{font-size:20px;margin:0}
.sub{margin:4px 0 0;color:var(--muted);font-size:14px;max-width:68ch}
.sech{margin-bottom:12px}
.sec{margin-top:40px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.hint{font-size:13px;color:var(--muted);margin:0}

/* ---------- Kopf ---------- */
header.top{background:var(--deep);color:var(--hd-ink);position:sticky;top:env(safe-area-inset-top,0px);z-index:5;border-bottom:1px solid #232842}
header.top .wrap{display:flex;align-items:center;gap:20px;padding-block:12px}
.logo{display:flex;align-items:center;gap:9px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--hd-ink)!important;white-space:nowrap}
.logo svg{width:28px;height:28px;flex:none}
form.search{flex:1 1 360px;display:flex;min-width:0;max-width:620px}
form.search input{flex:1;min-width:0;border:1px solid #333A5A;border-right:0;border-radius:6px 0 0 6px;padding:10px 14px;background:#1D2236;color:#ECEEF6}
form.search input::placeholder{color:#8990AD}
form.search input:focus{outline:none;border-color:#F4C542}
form.search button{border:0;border-radius:0 6px 6px 0;padding:0 18px;background:#F4C542;color:#1B1604;font-weight:700;cursor:pointer}
form.search button:hover{background:#FFD45E}
.toplinks{margin-left:auto;display:flex;align-items:center;gap:18px}
.toplink{display:flex;align-items:center;gap:7px;color:var(--hd-ink)!important;font-weight:600;white-space:nowrap}
.toplink svg{width:20px;height:20px}
.toplink b{background:#F4C542;color:#1B1604;border-radius:999px;min-width:22px;padding:1px 7px;font-size:12px;text-align:center}

nav.cats{background:var(--deep);border-bottom:1px solid var(--line)}
nav.cats .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
nav.cats a{display:flex;align-items:center;gap:8px;padding:10px 12px 9px;color:var(--hd-muted);white-space:nowrap;font-weight:500;font-size:14px;border-bottom:2px solid transparent}
nav.cats a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--mg))}
nav.cats a:hover{color:var(--hd-ink)}
nav.cats a.on{color:var(--hd-ink);border-bottom-color:var(--c,var(--gold-fill))}
nav.cats a[href*="Batterien"]{--c:#FF5A5F} nav.cats a[href*="Verbund"]{--c:#B58CFF} nav.cats a[href*="Raketen"]{--c:#4FA3FF}
nav.cats a[href*="Font"]{--c:#FF9F43} nav.cats a[href*="Knaller"]{--c:#C9D0E2} nav.cats a[href*="Rauch"]{--c:#3FC9C0}
.testbar{background:color-mix(in srgb,var(--warn) 10%,var(--bg));color:var(--ink2);font-size:13px;border-bottom:1px solid var(--line)}
.testbar .wrap{padding-block:7px}

main{padding-block:24px 56px}

/* ---------- Bausteine ---------- */
.pic{display:block;aspect-ratio:1;width:100%;border-radius:6px;background:#fff;object-fit:contain}
.ph{display:grid;place-items:center;color:var(--c,var(--mg));
  background:radial-gradient(circle at 50% 58%,color-mix(in srgb,var(--c,var(--mg)) 24%,transparent),transparent 68%),var(--surface2)}
.ph svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.pic.xs{width:36px;border-radius:4px} .pic.s{width:52px} .pic.m{width:64px}
.pic.xl{border-radius:10px}
.pic.xl svg{width:40%;height:40%;stroke-width:1}

.cat{display:inline-flex;align-items:center;gap:6px}
.cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--mg));flex:none}
.meta{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:13px;color:var(--muted);margin-top:2px}
.top{color:var(--gold);font-weight:600}
.save{color:var(--good);font-weight:600;font-size:13px}
.warn-t{color:var(--warn);font-weight:600;font-size:13px}

.price{font-stretch:78%;font-weight:750;color:var(--gold);font-size:21px;letter-spacing:-.01em;white-space:nowrap;line-height:1.1}
.price small{font-stretch:100%;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0;margin-right:2px}
.ct{font-size:.64em;vertical-align:.5em;line-height:0;margin-right:.08em}
.tag{display:inline-block;align-self:flex-start;background:var(--gold-fill);color:var(--gold-ink);font-weight:700;font-size:12px;line-height:1.5;padding:2px 9px 2px 14px;white-space:nowrap;
  clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line2);background:transparent;color:var(--ink);border-radius:5px;padding:7px 12px;cursor:pointer;font-weight:600;font-size:13px;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--gold-fill);color:var(--ink)}
.btn.primary{background:var(--gold-fill);border-color:var(--gold-fill);color:var(--gold-ink)}
.btn.primary:hover{background:#FFD45E;border-color:#FFD45E;color:var(--gold-ink)}
.btn.ghost{border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--sr);border-color:transparent}
.btn.sm{padding:5px 10px}
.btn.lg{padding:11px 18px;font-size:15px}

.list{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}

/* Produktzeile */
.row{display:grid;grid-template-columns:52px minmax(0,1fr) 170px 150px;grid-template-areas:"th main spread price";gap:16px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.rthumb{grid-area:th} .rmain{grid-area:main;min-width:0} .rspread{grid-area:spread;display:flex;flex-direction:column;gap:5px}
.rprice{grid-area:price;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.row .t,.item .t{font-weight:600;line-height:1.3}
.rng{position:relative;display:block;height:12px;margin:0 5px}
.rng::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;border-radius:2px;background:var(--line2)}
.rng i{position:absolute;top:2px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--muted)}
.rng i.lo{background:var(--gold-fill);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-fill) 28%,transparent);z-index:1}
.rng-note{font-size:13px;color:var(--muted)}

/* Kompakte Artikel mit Bild */
.items{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.items.one{grid-template-columns:1fr}
.item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.iprice{display:flex;align-items:baseline;gap:10px;margin-top:4px;font-size:13px}
.add{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2);background:transparent;border-radius:5px;padding:6px 10px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink2)}
.add svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.add:hover{border-color:var(--gold-fill);color:var(--gold)}

/* ---------- Startseite ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:6px}
.tile .pic.wide{aspect-ratio:auto;width:100%;height:96px;border-radius:6px}
.tile .pic.wide svg{width:auto;height:58%}
.badges{display:flex;flex-wrap:wrap;gap:6px;min-height:20px}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:4px}
.badge.top{background:color-mix(in srgb,var(--gold-fill) 16%,transparent);color:var(--gold)}
.badge.good{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.tile .t{font-weight:600;line-height:1.25}
.tile .b{font-size:13px;color:var(--muted)}
.tile .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px}
.tile .price{font-size:20px}
.intro{margin-bottom:28px;max-width:760px}
.intro p{margin:0;color:var(--ink2);font-size:16px}
.homegrid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;align-items:start}
.catlist h2{margin-bottom:10px}
.catlist ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.catlist a{display:flex;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);font-weight:500}
.catlist a .cat::before{width:9px;height:9px;box-shadow:0 0 10px var(--c)}
.catlist .n{color:var(--muted);font-size:13px}
.catlist a:hover{color:var(--ink);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 12%,transparent),transparent)}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 14px;border-top:1px solid var(--line);vertical-align:middle}
th{font-size:13px;font-weight:500;color:var(--muted);border-top:0;background:var(--surface2)}
td.r,th.r{text-align:right}
.scroll{overflow-x:auto}

/* ---------- Such- und Kategorieseite ---------- */
.layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:start}
.side{display:flex;flex-direction:column;gap:20px;position:sticky;top:84px}
.side h3{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 6px}
.side label{display:flex;gap:9px;align-items:center;font-size:14px;padding:3px 0;cursor:pointer;color:var(--ink2)}
.side label:hover{color:var(--ink)}
.side label span.c{margin-left:auto;color:var(--muted);font-size:12px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-size:14px}
.toolbar label{display:flex;align-items:center;gap:8px;color:var(--muted)}
select{border:1px solid var(--line2);background:var(--surface2);border-radius:5px;padding:7px 10px;color:var(--ink)}

/* ---------- Produktseite ---------- */
.pd{display:grid;grid-template-columns:260px minmax(0,1fr) 330px;grid-template-areas:"gal info chart";gap:32px;align-items:start}
.pd-gal{grid-area:gal;display:flex;flex-direction:column;gap:6px;align-items:center}
.phnote{font-size:12px;color:var(--muted)}
.pd-info{grid-area:info;min-width:0}
.pd-info h1{font-size:32px}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:5px 18px;margin:14px 0 20px;font-size:14px}
.facts dt{color:var(--muted)} .facts dd{margin:0}
.facts dd .top{margin-left:10px}
.buy{display:flex;flex-direction:column;gap:6px;padding-top:18px;border-top:1px solid var(--line)}
.price.big{font-size:44px;margin-top:4px}
.buy-act{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.pd-chart{grid-area:chart;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.pd-chart h2{font-size:17px}
.dots{display:flex;flex-direction:column}
.dr{display:grid;grid-template-columns:minmax(0,108px) 1fr 70px;gap:12px;align-items:center;font-size:13px;padding:5px 0}
.dn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)}
.dt{position:relative;height:12px}
.dt::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:var(--line)}
.dt i{position:absolute;top:1px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--muted)}
.dp{text-align:right;color:var(--ink2)}
.dr.lo .dn{color:var(--ink);font-weight:600} .dr.lo .dp{color:var(--gold);font-weight:700}
.dr.lo .dt i{background:var(--gold-fill);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold-fill) 25%,transparent)}

.pd-lower{display:grid;grid-template-columns:270px minmax(0,1fr);grid-template-areas:"more offers";gap:28px;margin-top:40px;align-items:start}
.pd-lower.solo{grid-template-columns:1fr;grid-template-areas:"offers"}
.more{grid-area:more}
.more h2{font-size:17px;margin-bottom:6px}
.more .item{grid-template-columns:52px minmax(0,1fr)}
.more .item .pic.m{width:52px}
.more .add{grid-column:2;justify-self:start}
.offers{grid-area:offers;background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.offers-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 18px;background:var(--surface2)}
.offers-h .muted{font-size:13px}
.ohead,.orow{display:grid;grid-template-columns:minmax(0,1.2fr) 170px 110px minmax(0,1.4fr) 110px;gap:16px;align-items:center;padding:0 18px}
.ohead{font-size:13px;color:var(--muted);padding-block:9px;border-bottom:1px solid var(--line)}
.ohead span:nth-child(3){text-align:right}
.orow{padding-block:16px;border-top:1px solid var(--line)}
.ohead + .orow{border-top:0}
.orow.best{background:color-mix(in srgb,var(--gold-fill) 7%,transparent);box-shadow:inset 3px 0 0 var(--gold-fill)}
.oshop{display:flex;flex-direction:column;min-width:0}
.oshop b{font-size:15px}
.oshop .muted{font-size:13px;overflow:hidden;text-overflow:ellipsis}
.oprice{display:flex;flex-direction:column;gap:5px}
.oprice .price{font-size:24px}
.odiff{text-align:right;font-size:14px;color:var(--ink2)}
.oship{font-size:13px}
.ogo{text-align:right}
.ogo .btn{width:100%;padding-block:9px}
.pad{padding:12px 18px}

/* ---------- Merkzettel ---------- */
.lead{margin:0 0 18px}
.mz{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;align-items:start}
.mz-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.mzt td{padding-block:8px}
.mzt td.th-c{width:52px;padding-right:0}
.mzt .price{font-size:17px}
.qty{width:62px;border:1px solid var(--line2);border-radius:5px;padding:6px 8px;background:var(--surface2)}
.money{width:80px;border:1px solid var(--line2);border-radius:5px;padding:6px 8px;background:var(--surface2);text-align:right}
.box{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px}
.box h2{font-size:17px;margin-bottom:12px}

.result{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.res-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:16px 18px 0}
.res-n{font-size:14px;color:var(--good);font-weight:600}
.totals{display:flex;gap:10px 36px;flex-wrap:wrap;align-items:flex-end;padding:14px 18px 18px;border-bottom:1px solid var(--line)}
.totals div{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
.totals b{font-size:19px;color:var(--ink);font-weight:650}
.totals .grand{margin-left:auto;align-items:flex-end}
.totals .grand b.price{font-size:40px;color:var(--gold)}
.orders{display:flex;flex-direction:column}
.order{border-top:1px solid var(--line)}
.order:first-child{border-top:0}
.order .oh{display:flex;gap:6px 14px;align-items:baseline;flex-wrap:wrap;padding:12px 18px 4px}
.order .oh .muted{font-size:13px}
.osum{margin-left:auto;font-size:14px;color:var(--ink2)}
.order ul{list-style:none;margin:0;padding:0 18px 12px;font-size:14px;display:flex;flex-direction:column}
.order li{display:flex;justify-content:space-between;gap:12px;padding:3px 0 3px 14px;border-left:2px solid var(--line);color:var(--ink2)}
.trade{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:12px}
.trade div{background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:2px;font-size:13px}
.trade b{font-size:18px;font-weight:650}
.trade div.on{background:color-mix(in srgb,var(--good) 10%,var(--surface));box-shadow:inset 0 3px 0 var(--good)}
.trade div.on b{color:var(--good)}
.mz-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:84px}
.field{display:flex;flex-direction:column;gap:6px}
.shipt{font-size:13px;margin-top:8px}
.shipt td{padding:7px 0;border-top:1px solid var(--line)}
.shipt td.r{padding-left:8px}
.est{color:var(--warn);font-weight:600;font-size:12px;margin-left:4px}

.empty{border:1px dashed var(--line2);border-radius:8px;padding:36px 20px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;color:var(--ink2)}
.empty b{font-size:17px;color:var(--ink)}
.empty .muted{max-width:46ch}
.empty-ic{width:44px;height:44px;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

footer{border-top:1px solid var(--line);color:var(--muted);font-size:13px;background:var(--deep)}
footer .wrap{padding-block:22px;display:flex;flex-wrap:wrap;gap:4px 24px}
footer b{color:var(--hd-ink);font-family:"Bricolage Grotesque",sans-serif}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--gold-fill);color:var(--gold-ink);padding:10px 16px;border-radius:6px;font-weight:700;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:10}

/* ---------- Verfügbarkeit ---------- */
.soldout{color:var(--sr);font-weight:800;font-stretch:85%;text-transform:uppercase;letter-spacing:.05em;font-size:15px;white-space:nowrap;line-height:1.2}
.soldout.big{font-size:36px;letter-spacing:.03em;margin-top:4px}
.is-out .pic{filter:grayscale(1);opacity:.55}
.row.is-out .t,.item.is-out .t,tr.is-out b{color:var(--ink2)}
.av{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px}
.av::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.av.ok{color:var(--good)} .av.no{color:var(--sr)}
.oship{display:flex;flex-direction:column;gap:2px}
.orow.na .price{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.orow.na .oshop b{color:var(--ink2)}
.dr.na .dt i{background:var(--surface);border:2px solid var(--sr)}
.dr.na .dp{color:var(--muted);text-decoration:line-through}
.outnote{margin:-6px 0 0;font-size:14px;color:var(--ink2)}
.outnote .soldout{font-size:13px;margin-right:6px}
.brandlink{text-decoration:underline;text-decoration-color:var(--line2);text-decoration-thickness:1px;text-underline-offset:3px}
.brandlink:hover{text-decoration-color:var(--gold)}
.more-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.more-h h2{margin:0}

/* ---------- Preisfilter mit zwei Reglern ---------- */
.side{max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.prange{display:flex;flex-direction:column;gap:10px}
.side .pr-in{display:flex;gap:10px}
.side .pr-in label{display:flex;flex-direction:column;align-items:stretch;gap:3px;flex:1;margin:0;padding:0;font-size:12px;color:var(--muted);cursor:default}
.pr-in input{width:100%;text-align:left}
.dual{position:relative;height:22px;margin:0 9px}
.dual::before{content:"";position:absolute;left:0;right:0;top:10px;height:3px;border-radius:3px;background:var(--line2)}
.dual-fill{position:absolute;top:10px;height:3px;border-radius:3px;background:var(--gold-fill)}
.dual input[type=range]{position:absolute;top:0;left:-9px;width:calc(100% + 18px);height:22px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.dual input[type=range]::-webkit-slider-runnable-track{height:22px;background:none;border:0}
.dual input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--gold-fill);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--gold-fill);cursor:grab}
.dual input[type=range]::-moz-range-track{background:none;border:0}
.dual input[type=range]::-moz-range-thumb{pointer-events:auto;width:12px;height:12px;border-radius:50%;background:var(--gold-fill);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--gold-fill);cursor:grab}
.dual input[type=range]:focus-visible{outline:none}
.dual input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--gold-fill)}
.dual input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--gold-fill)}
.pr-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.freset{align-self:flex-start}

/* ---------- Umkreissuche ---------- */
.um-sub{margin-bottom:18px}
.um-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:8px}
.um-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.um-q{flex:1 1 240px}
.um-form input[type=text]{width:100%;border:1px solid var(--line2);background:var(--surface2);border-radius:5px;padding:10px 12px;color:var(--ink);font-size:15px}
.um-form input[type=text]:focus{outline:none;border-color:var(--gold-fill)}
.um-form select{padding:10px 10px}
.um-typ{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 20px;font-size:14px;color:var(--ink2)}
.um-typ label{display:flex;gap:8px;align-items:center;cursor:pointer}
.um-h{font-size:17px;margin:0 0 10px}
.um-leer{margin-bottom:12px}
.um-quelle{margin-top:16px}
.srow{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
.srow:first-child{border-top:0}
.sdist{font-weight:750;font-stretch:85%;font-size:17px;color:var(--ink);white-space:nowrap}
.stitle{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.stitle b{font-size:15px;margin-right:2px}
.sact{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.badge.abhol{background:color-mix(in srgb,var(--cu) 16%,transparent);color:var(--cu)}
.badge.laden{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
/* Gefahrgutklasse */
.gg{display:inline-block;font-weight:700;font-size:12px;line-height:1.5;padding:0 7px;border-radius:4px;background:var(--surface2);color:var(--ink2);border:1px solid var(--line2);white-space:nowrap}
.gg13{background:color-mix(in srgb,var(--sr) 14%,transparent);color:var(--sr);border-color:color-mix(in srgb,var(--sr) 45%,transparent)}
.gg-hint{display:block;margin-top:4px;font-size:13px;color:var(--muted);max-width:52ch}
.show-s{display:none}
/* Anbieter-Kürzel in der Umkreissuche */
.mono{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;font-size:12px;font-weight:800;letter-spacing:.02em;flex:none;color:#fff}
.mono.m0{background:#2F6FD1} .mono.m1{background:#8A55D8} .mono.m2{background:#C8620A} .mono.m3{background:#0E8A82} .mono.m4{background:#C23A40} .mono.m5{background:#4D5A7A}
.stitle b{font-size:16px}
.sname{display:flex;align-items:center;gap:9px;min-width:0}
.sort{margin-top:4px}
.sort-ort{color:var(--ink);font-weight:600}
.badge.silvester{background:color-mix(in srgb,var(--gold-fill) 16%,transparent);color:var(--gold)}
.um-teaser{display:flex;flex-direction:column;gap:2px;margin-top:16px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--cu);border-radius:6px;background:var(--surface)}
.um-teaser b{font-size:14px}
.um-teaser span{font-size:13px;color:var(--muted)}
.um-teaser:hover{border-color:var(--cu);color:var(--ink)}

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width:1060px){
  .pd{grid-template-columns:220px minmax(0,1fr);grid-template-areas:"gal info" "chart chart"}
  .ohead,.orow{grid-template-columns:minmax(0,1.2fr) 150px 90px minmax(0,1.2fr) 100px}
}
@media (max-width:860px){
  .homegrid,.layout,.mz,.pd-lower{grid-template-columns:1fr}
  .pd-lower{grid-template-areas:"offers" "more"}
  .side,.mz-side{position:static;max-height:none;overflow:visible}
  .catlist ul{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
  .items{grid-template-columns:1fr}
  .side{flex-direction:row;flex-wrap:wrap;gap:14px 28px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px}
  .side > div{flex:1 1 200px}
}
@media (max-width:760px){
  header.top .wrap{flex-wrap:wrap;gap:10px 16px;padding-block:10px}
  form.search{order:3;flex-basis:100%;max-width:none}
  h1,.pd-info h1{font-size:25px}
  .row{grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"th main price" "th spread spread";gap:6px 12px;padding:12px}
  .row .pic.s{width:48px}
  .rprice .btn{display:none}
  .rspread{flex-direction:row;align-items:center;gap:12px}
  .rspread .rng{flex:1;max-width:160px}
  .pd{grid-template-columns:1fr;grid-template-areas:"gal" "info" "chart";gap:20px}
  .pd-gal{flex-direction:row;align-items:flex-end;gap:12px}
  .pd-gal .pic.xl{width:140px}
  .price.big{font-size:38px}
  .buy-act .btn{flex:1}
  .ohead{display:none}
  .orow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"shop price" "ship ship" "diff go";gap:8px 12px;padding:14px 16px}
  .oshop{grid-area:shop} .oprice{grid-area:price;align-items:flex-end} .oship{grid-area:ship} .odiff{grid-area:diff;text-align:left} .ogo{grid-area:go}
  .odiff:empty,.odiff:has(.muted){visibility:hidden}
  .mzt .hide-s{display:none}
  .mzt .show-s{display:inline}
  .mzt td,.mzt th{padding-inline:6px}
  .mzt td.th-c{padding-left:10px}
  .mzt .qty{width:50px}
  .mzt [data-del]{font-size:0;padding:6px 8px}
  .mzt [data-del]::before{content:"✕";font-size:15px}
  .side{gap:12px}
  .side > div{flex-basis:100%}
  .side label{display:inline-flex;margin-right:16px;padding:4px 0}
  .side label span.c{margin-left:2px}
  .totals .grand{margin-left:0;align-items:flex-start;flex-basis:100%}
  .osum{margin-left:0;flex-basis:100%}
}
@media (max-width:420px){
  .tl-txt{display:none}
  .toplinks{gap:14px}
  .srow{grid-template-columns:62px minmax(0,1fr);gap:4px 12px;padding:12px}
  .sact{grid-column:2;justify-content:flex-start;margin-top:6px}
  .um-form .btn{flex:1 1 auto}
  .catlist ul{column-gap:14px}
  .catlist a{font-size:14px;padding-block:9px;align-items:center}
  .item{grid-template-columns:56px minmax(0,1fr)}
  .item .pic.m{width:56px}
  .item .add{grid-column:2;justify-self:start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}