@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src:url(/static/fonts/inter-cyrillic-ext-wght.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src:url(/static/fonts/inter-cyrillic-wght.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src:url(/static/fonts/inter-latin-ext-wght.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src:url(/static/fonts/inter-latin-wght.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-display: swap; font-weight: 100 900; src:url(/static/fonts/inter-tight-cyrillic-ext-wght.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-display: swap; font-weight: 100 900; src:url(/static/fonts/inter-tight-cyrillic-wght.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-display: swap; font-weight: 100 900; src:url(/static/fonts/inter-tight-latin-ext-wght.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-display: swap; font-weight: 100 900; src:url(/static/fonts/inter-tight-latin-wght.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Eurobrend v8 — ruhig wie ein Laden: Weiss, Studio-Grau, schwarze Schrift, eine Schriftfamilie.
   Vorbilder: On, Arket, COS (Kacheln Kante an Kante, kleine Schrift, viel Luft, Pillen-Knoepfe). */
:root{
  --ink:#000; --text:#1f1f1d; --mute:#6b6b66; --line:#e3e3df; --tile:#efefed; --soft:#f6f6f4; --white:#fff;
  --ok:#2c6a4a; --warn:#a33a1a;
  --pad:clamp(16px,3.2vw,40px); --max:1600px;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 0}
img{display:block;max-width:100%;height:auto} a{color:inherit} p{margin:0} button{font:inherit;color:inherit}
a,button,label{-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-weight:500;letter-spacing:-.02em;line-height:1.1;margin:0;color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px} .skip:focus{left:16px;top:8px;z-index:99;background:#fff;padding:8px 12px}
.small{font-size:13px;color:var(--mute)}
.lead{font-size:18px}

/* Hinweisleiste */
.ann{background:var(--soft);border-bottom:1px solid var(--line);display:flex;justify-content:center;gap:48px;padding:9px var(--pad);font-size:13px;color:var(--text)}

/* Kopf */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:60px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.logo{text-decoration:none;font-weight:600;font-size:19px;letter-spacing:-.035em;color:var(--ink)}
.nav{display:flex;gap:28px}
.nav a{text-decoration:none;font-size:14px;font-weight:500;padding:20px 0;border-bottom:1.5px solid transparent;color:var(--ink)}
.nav a:hover,.nav a[aria-current]{border-color:var(--ink)}
.top-r{display:flex;gap:22px;align-items:center;justify-content:flex-end;font-size:14px;font-weight:500}
.lang{text-decoration:none;color:var(--mute);padding:12px 4px} .lang:hover{color:var(--ink)}
.cart-link{text-decoration:none;padding:12px 0;display:flex;align-items:center;gap:6px;color:var(--ink)}
.cart-count{background:var(--ink);color:#fff;border-radius:10px;font-size:11px;min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px;font-weight:600}

/* Knoepfe: Pille, schwarz / weiss / Linie */
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;height:46px;padding:0 24px;border-radius:999px;background:var(--ink);color:#fff;border:1px solid var(--ink);font-weight:500;font-size:14px;text-decoration:none;cursor:pointer;touch-action:manipulation;}
.btn:hover{background:#2a2a2a}
.btn.light,.btn.ghost{background:#fff;color:var(--ink);border-color:#fff} .btn.light:hover,.btn.ghost:hover{background:var(--soft)}
.btn.outline{background:transparent;color:var(--ink);border-color:var(--ink)} .btn.outline:hover{background:var(--ink);color:#fff}
.btn.wide{width:100%;height:52px;font-size:15px}
.btn:disabled{background:var(--tile);border-color:var(--tile);color:var(--mute);cursor:not-allowed}
.link{background:none;border:0;padding:0;color:var(--mute);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:13px}

/* Verfuegbarkeit: kleine Zeile */
.when{font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px;letter-spacing:.005em}
.when.today{color:var(--ok)} .when.today::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.when.order{color:var(--mute)} .when.order::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid var(--mute)}
.tag{font-size:12.5px;font-weight:500;display:inline-flex;gap:6px;align-items:center;margin-top:4px}
.tag.stock{color:var(--ok)} .tag.stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.tag.order{color:var(--mute)} .tag.order::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid var(--mute)}

/* Startbild */
.hero{position:relative;background:var(--tile)}
.hero-img{width:100%;height:clamp(460px,calc(100vh - 140px),820px);object-fit:cover;object-position:100% 60%}
.hero-txt{position:absolute;left:0;right:0;bottom:0;max-width:var(--max);margin:0 auto;padding:0 var(--pad) clamp(28px,4vw,56px)}
.hero h1{font-size:clamp(34px,4.4vw,64px);letter-spacing:-.035em;line-height:1.02;max-width:14ch}
.hero-txt>p:not(.hero-cta){margin-top:14px;font-size:16px;max-width:46ch;color:var(--text)}
.hero-cta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.hero .btn.light{border-color:var(--ink)}

/* Abschnitte */
.block{padding:clamp(48px,6vw,96px) 0 0}
.block-h{max-width:var(--max);margin:0 auto 20px;padding:0 var(--pad);display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:8px 24px}
.block-h h2{font-size:clamp(22px,2vw,28px)}
.block-d{color:var(--mute);font-size:14px}
.block-h a{padding:10px 0;font-size:14px;font-weight:500;color:var(--ink);text-underline-offset:4px}
.empty{color:var(--mute);max-width:var(--max);margin:0 auto;padding:24px var(--pad);border-top:1px solid var(--line)}

/* Produktkacheln: Kante an Kante */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;row-gap:28px}
.card{text-decoration:none;display:block;color:var(--text)}
.card-img{aspect-ratio:4/5;background:var(--tile);overflow:hidden;display:grid;place-items:center}
.card-img img{width:100%;height:100%;object-fit:contain;padding:8% 6%;mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-img img{transform:scale(1.035)}
.card-b{padding:12px 14px 0;display:grid;gap:1px}
.card-w{margin-bottom:5px}
.card-n{font-weight:500;font-size:14.5px;color:var(--ink)}
.card-c{color:var(--mute);font-size:13.5px}
.more{display:grid;place-items:center;align-content:center;gap:6px;aspect-ratio:4/5;background:var(--soft);text-decoration:none;color:var(--ink);font-weight:500;font-size:15px}
.more small{color:var(--mute);font-weight:400;font-size:13.5px}
.card-p{margin-top:5px;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)}

/* Kategorien */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:clamp(48px,6vw,96px)}
.duo-a{position:relative;display:block;overflow:hidden;background:var(--tile);text-decoration:none}
.duo-a img{width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.duo-a:hover img{transform:scale(1.025)}
.duo-a{background:none}
.duo-a img{background:var(--tile)}
.duo-t{position:static;padding:14px clamp(14px,1.4vw,20px) 0;font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.02em;color:var(--ink);display:grid;gap:6px}
.duo-t small{font-size:14px;letter-spacing:0;text-decoration:underline;text-underline-offset:4px}

/* Leistungen */
.svc{max-width:var(--max);margin:clamp(48px,6vw,96px) auto 0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.svc div{border-top:1px solid var(--ink);padding-top:16px}
.svc h3{font-size:15px;letter-spacing:-.01em;margin-bottom:6px}
.svc p{color:var(--mute);font-size:14px;max-width:32ch}

/* Laden */
.visit{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);margin-top:clamp(48px,6vw,96px);background:var(--soft)}
.visit img{width:100%;height:100%;object-fit:cover;min-height:340px}
.visit-txt{padding:clamp(28px,4vw,64px) var(--pad);display:grid;gap:14px;align-content:center}
.visit-k{font-size:13px;color:var(--mute)}
.visit h1,.visit h2{font-size:clamp(24px,2.4vw,34px)}
.visit-txt p{max-width:40ch}
.visit-txt a{color:var(--ink)} .visit-txt p a[href^=tel]{display:inline-block;padding:8px 0}
.visit-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.visit-links .btn{color:#fff} .visit-links .btn.outline{color:var(--ink)} .visit-links .btn.outline:hover{color:#fff}
.visit.solo{margin-top:0}
.visit:not(:has(img)):not(:has(video)){grid-template-columns:1fr}

/* Katalog */
.cat{padding:clamp(24px,3vw,44px) 0 0}
.cat-h{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:flex;align-items:baseline;gap:14px}
.cat-h h1{font-size:clamp(28px,3vw,40px)}
.cat-h p{color:var(--mute);font-size:14px}
.seg{max-width:var(--max);margin:18px auto 0;padding:0 var(--pad);display:flex;gap:8px;flex-wrap:wrap}
.seg a{text-decoration:none;font-size:14px;font-weight:500;height:38px;padding:0 16px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.seg a:hover{border-color:var(--ink)}
.seg a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.cat-body{display:grid;grid-template-columns:240px 1fr;gap:0;margin-top:28px;align-items:start;border-top:1px solid var(--line)}
.fwrap>summary{display:none}
.filters{position:sticky;top:61px;display:grid;gap:26px;padding:24px var(--pad);max-height:calc(100vh - 61px);overflow:auto}
.f-l{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:8px}
.f ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.f ul a{text-decoration:none;color:var(--mute);font-size:14px;display:block;padding:4px 0} .f ul a:hover{color:var(--ink)}
.f ul a[aria-current]{color:var(--ink);font-weight:500}
.f-sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.f-sizes a{text-decoration:none;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:4px;font-size:13.5px}
.f-sizes a:hover{border-color:var(--ink)} .f-sizes a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}
.cat .grid{grid-template-columns:repeat(3,1fr);padding-top:2px}
.cat-body>div{border-left:1px solid var(--line);min-height:50vh}
.cat .empty{border:0;margin:0}

/* Produktseite */
.pdp{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start}
.pdp-img{background:var(--tile);aspect-ratio:1;position:sticky;top:61px;overflow:hidden}
.pdp-img img{width:100%;height:100%;object-fit:contain;padding:7%;mix-blend-mode:multiply}
.pdp-info{padding:clamp(24px,3.5vw,56px) clamp(20px,3.5vw,64px) 40px;max-width:600px}
.crumbs{font-size:13px;color:var(--mute)} .crumbs a{text-decoration:none} .crumbs a:hover{text-decoration:underline}
.pdp h1{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.025em;line-height:1.12;margin:12px 0 4px}
.pdp-color{color:var(--mute);font-size:15px}
.pdp-price{font-size:19px;font-weight:500;margin:16px 0 30px;color:var(--ink);font-variant-numeric:tabular-nums} .pdp-price span{font-size:14px;color:var(--mute);font-weight:400}
.size-h{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:12px}
.sz-g{margin-bottom:16px}
.sz-h{font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px;margin-bottom:8px}
.sz-g.in .sz-h{color:var(--ok)} .sz-g.in .sz-h::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.sz-g.pre .sz-h{color:var(--mute)} .sz-g.pre .sz-h::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid var(--mute)}
.sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px}
.size{height:48px;border:1px solid var(--line);background:var(--white);border-radius:4px;cursor:pointer;font-size:14.5px;color:var(--ink);touch-action:manipulation}
.size.pre{background:var(--soft);color:var(--text)}
.size:hover{border-color:var(--ink)}
.size.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.avail{margin:6px 0 18px} .avail [data-avail-t]{display:none} .avail [data-avail-d]{font-size:13.5px;color:var(--mute)}
.perks{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;font-size:13.5px;color:var(--text)}
.perks li{display:flex;gap:10px;align-items:baseline}
.perks li::before{content:"";flex:0 0 5px;height:5px;border-radius:50%;background:var(--ink);transform:translateY(-2px)}
.ask{font-size:13.5px;color:var(--mute);margin-top:18px} .ask a{color:var(--ink)}
.acc{margin-top:28px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;padding:17px 0;font-weight:500;font-size:14.5px;color:var(--ink);display:flex;justify-content:space-between}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-weight:400;font-size:18px;line-height:1}
.acc details[open] summary::after{content:"−"}
.acc details p{padding-bottom:14px;font-size:14px}
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:14px}
.sticky-buy div p:first-child{font-weight:500;font-size:14px;color:var(--ink)} .sticky-buy div p:last-child{font-size:13px;color:var(--mute)}
.sticky-buy .btn{height:44px;padding:0 20px}

/* Warenkorb, Bestellung */
.page{max-width:var(--max);margin:0 auto;padding:clamp(28px,4vw,56px) var(--pad) 0}
.page.narrow{max-width:760px}
.page h1{font-size:clamp(28px,3vw,40px);margin-bottom:26px}
.page p+p{margin-top:12px}
.line{display:grid;grid-template-columns:104px 1fr auto;gap:18px;padding:18px 0;border-top:1px solid var(--line)}
.line:last-child{border-bottom:1px solid var(--line)}
.line>a{display:block;background:var(--tile);align-self:start}
.line img{width:104px;height:130px;object-fit:contain;mix-blend-mode:multiply;padding:6px}
.line-n{font-weight:500;text-decoration:none;color:var(--ink)} .line-m{color:var(--mute);font-size:13.5px}
.line-a{display:flex;gap:18px;align-items:center;margin-top:12px;font-size:13.5px}
.line-a select{margin-left:6px;border:1px solid var(--line);border-radius:4px;background:#fff;padding:6px 8px;font-size:16px}
.line-p{white-space:nowrap;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.cart-foot{margin-top:26px;display:grid;gap:16px}
.cart-total{display:flex;justify-content:space-between;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.co-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.co-side{background:var(--soft);padding:22px 24px;position:sticky;top:80px}
.co-side h2{font-size:16px;margin-bottom:6px;letter-spacing:0}
.co-l{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;font-variant-numeric:tabular-nums}
.co-t{border:0;font-weight:600;font-size:17px;color:var(--ink)}
.co{display:grid;gap:18px}
.co label{display:grid;gap:6px;font-weight:500;font-size:13.5px;color:var(--ink)}
.co input,.co select,.co textarea{font:inherit;font-weight:400;font-size:16px;padding:13px 14px;border:1px solid #cfcfca;border-radius:6px;background:#fff;color:var(--ink);-webkit-appearance:none;appearance:none}
.co select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.co input:focus,.co select:focus,.co textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.co fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
.co legend{font-weight:500;font-size:13.5px;margin-bottom:8px;color:var(--ink)}
.opt{grid-template-columns:auto 1fr!important;align-items:start;gap:12px!important;border:1px solid #d9d9d4;border-radius:8px;padding:14px 16px;cursor:pointer;font-weight:400!important;touch-action:manipulation}
.opt input{margin-top:3px;accent-color:var(--ink);width:18px;height:18px;-webkit-appearance:auto;appearance:auto;padding:0}
.opt span{display:grid;gap:2px} .opt b{font-weight:500} .opt small{color:var(--mute);font-size:13.5px}
.opt:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.err{color:var(--warn);font-weight:500}

/* Fuss */
.foot{margin-top:clamp(64px,8vw,120px);border-top:1px solid var(--line);background:var(--white)}
main:has(> .visit:last-child) + .foot{margin-top:0}
.foot-in{max-width:var(--max);margin:0 auto;padding:44px var(--pad) 28px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;font-size:14px}
.foot-t{font-weight:500;margin-bottom:10px;color:var(--ink)}
.foot p{color:var(--mute)} .foot a{text-decoration:none;color:var(--text)} .foot a:hover{text-decoration:underline}
.foot p a{display:inline-block;padding:9px 0}
.foot-legal{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 32px;color:var(--mute);font-size:12.5px}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px 12px 20px;border-radius:999px;font-size:14px;z-index:60;display:flex;gap:16px;align-items:center;white-space:nowrap;margin-bottom:env(safe-area-inset-bottom)}
.toast a{color:#fff;font-weight:600;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:1200px){
  .grid{grid-template-columns:repeat(3,1fr)} .cat .grid{grid-template-columns:repeat(2,1fr)}
  .svc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .ann{justify-content:flex-start;gap:0} .ann span+span{display:none}
  .top{position:sticky}
  .top-in{grid-template-columns:1fr auto;height:auto;padding-top:12px;gap:0 16px}
  .nav{grid-column:1/-1;grid-row:2;overflow-x:auto;gap:22px;scrollbar-width:none;white-space:nowrap;margin:0 calc(var(--pad)*-1);padding:0 var(--pad)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:12px 0 11px;font-size:14px}
  .top-r{grid-column:2;grid-row:1}
  .hero-img{height:auto;aspect-ratio:12/13}
  .hero-txt{position:static;padding:22px var(--pad) 8px;background:var(--white)}
  .hero .btn.light{border-color:var(--ink)}
  .block-h{grid-template-columns:1fr auto} .block-d{grid-column:1/-1;grid-row:2}
  .grid,.cat .grid{grid-template-columns:repeat(2,1fr)}
  .cat-body{grid-template-columns:1fr;border-top:0;margin-top:16px}
  .cat-body>div{border-left:0}
  .fwrap{margin:0 var(--pad) 16px;border:1px solid var(--line);border-radius:10px}
  .fwrap>summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;padding:12px 16px;font-weight:500;font-size:14px}
  .fwrap>summary::-webkit-details-marker{display:none}
  .fwrap>summary::after{content:"+";font-weight:400;font-size:18px;line-height:1}
  .fwrap[open]>summary::after{content:"−"}
  .filters{position:static;max-height:none;padding:4px 16px 18px;grid-template-columns:1fr 1fr}
  .filters .f:last-child{grid-column:1/-1}
  .f-sizes{grid-template-columns:repeat(6,1fr)}
  .visit{grid-template-columns:1fr} .visit img{min-height:0;aspect-ratio:16/10}
  .pdp{grid-template-columns:1fr} .pdp-img{position:static;aspect-ratio:5/4} .pdp-img img{padding:5% 9%}
  .pdp-info{padding:18px var(--pad) 8px;max-width:none}
  .pdp h1{margin-top:6px} .pdp-price{margin:10px 0 22px}
  .co-grid{grid-template-columns:1fr} .co-side{position:static;order:-1;padding:16px 18px}
  .foot-in{grid-template-columns:1fr 1fr} .foot-store{grid-column:1/-1}
}
@media (max-width:560px){
  body{font-size:15px}
  .grid{row-gap:24px}
  .rail{grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding:0 var(--pad);padding:0 var(--pad);gap:2px}
  .rail::-webkit-scrollbar{display:none}
  .rail .card{scroll-snap-align:start}
  .card-b{padding:10px 4px 0}
  .rail .card-b{padding:10px 2px 0}
  .card-n{font-size:14px} .card-c{font-size:13px}
  .duo-a{background:none} .duo-a img{aspect-ratio:4/5}
  .duo-t{position:static;padding:10px 4px 0;font-size:16px;gap:2px} .duo-t small{font-size:13px}
  .svc{grid-template-columns:1fr 1fr;gap:22px 16px}
  .svc p{font-size:13px}
  .line{grid-template-columns:84px 1fr} .line img{width:84px;height:105px} .line-p{grid-column:2}
  .foot-in{grid-template-columns:1fr}
  .toast{left:12px;right:12px;transform:none;justify-content:space-between;bottom:76px}
}

/* Platz fuer die Kaufleiste am Handy */
@media (max-width:860px){ body:has(.sticky-buy:not([hidden])) main{padding-bottom:84px} }
.page .btn.outline{margin-top:8px}

/* Produktbilder: Desktop Raster wie On (erstes gross, Rest zweispaltig), Handy wischen */
.card-img{position:relative}
.card-img .alt{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
@media (hover:hover){ .card:hover .card-img .alt{opacity:1} .card:hover .card-img img:not(.alt){opacity:0} }
.card-img img:not(.alt){transition:opacity .35s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.pdp-gal{position:relative}
.pdp-track{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pdp-gal .pdp-img{position:static;top:auto;margin:0;aspect-ratio:1}
.pdp-gal .pdp-img.first{grid-column:1/-1}
.pdp-count{display:none}
@media (max-width:860px){
  .pdp-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;scrollbar-width:none}
  .pdp-track::-webkit-scrollbar{display:none}
  .pdp-gal .pdp-img{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:5/4}
  .pdp-count{display:block;position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.9);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
}
@media (min-width:861px){ .pdp-info{position:sticky;top:61px;align-self:start} }

/* Rabatt: neuer Preis schwarz, alter Preis durchgestrichen, kleines Minus-Prozent */
.is-sale s{color:var(--mute);font-weight:400;margin-left:2px}
.is-sale .off{display:inline-block;margin-left:6px;font-size:12px;font-weight:600;color:#9b2c1a;letter-spacing:.01em}
.pdp-price.is-sale .off{font-size:13px}
.card-p.is-sale{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.card-p.is-sale s{font-size:12.5px;margin:0} .card-p.is-sale .off{margin:0}
.pdp-price.is-sale .now{font-size:inherit;color:var(--ink);font-weight:500}
.pdp-price.is-sale s{font-size:15px;color:var(--mute);font-weight:400;margin-left:6px}
.pdp-price.is-sale .off{color:#9b2c1a;font-size:13px;font-weight:600}

/* v9 — Schwarz mit Tuerkis (Variante C + Tuerkis-Knoepfe).
   Seite schwarz, Produktkacheln bleiben hell, Knoepfe tuerkis mit weisser Schrift. */
:root{
  color-scheme:dark;
  --ink:#fff; --text:#e6e6e2; --mute:#a3a39e; --line:#2a2a2a; --soft:#121212; --white:#000;
  --ok:#6fbf8e; --warn:#ff7a5c;
  --accent:#12808a; --accent-h:#0e6a72;
}
.skip:focus{color:#000}
.ann{background:#0d0d0d;border-color:#1e1e1e;color:#d6d6d2}
.top{background:rgba(0,0,0,.92);border-color:#1e1e1e}
.cart-count{background:var(--accent)}
.btn{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:hover{background:var(--accent-h);border-color:var(--accent-h)}
.btn.light,.btn.ghost,.btn.outline{background:transparent;color:#fff;border-color:#fff}
.btn.light:hover,.btn.ghost:hover,.btn.outline:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:disabled{background:#222;border-color:#222;color:var(--mute)}
.visit-links .btn.outline{color:#fff}
.seg a[aria-current],.f-sizes a[aria-current]{background:#fff;border-color:#fff;color:#000}
.pdp-count{color:#000}
.co input,.co select,.co textarea,.line-a select{background-color:#111;border-color:#3a3a3a;color:#fff}
.opt{border-color:#333}
.opt input{accent-color:var(--accent)}
.toast{background:var(--accent)}
.sticky-buy{background:rgba(0,0,0,.95)}
.is-sale .off,.pdp-price.is-sale .off{color:#ff7a5c}
/* Startbild: dunkle Studio-Aufnahme, Text weiss */
.hero{background:#000}
.hero .btn.light{border-color:#fff}
.duo-a img{background:#111}

/* v10 — schneller kaufen: Sofort-Bestellung, Telegram, kuerzere Kasse */
.buy-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.buy-2 .btn{height:46px;padding:0 12px}
.btn.tg{gap:8px} .tg-i{flex:0 0 auto}
.btn.outline:disabled{background:transparent;border-color:#333;color:var(--mute)}
.ph{display:flex;align-items:stretch;border:1px solid #3a3a3a;border-radius:6px;background:#111;overflow:hidden}
.ph:focus-within{border-color:#fff;box-shadow:0 0 0 1px #fff}
.ph-cc{display:flex;align-items:center;padding:0 4px 0 14px;font-weight:400;font-size:16px;color:var(--mute)}
.co .ph input{border:0;box-shadow:none!important;flex:1;min-width:0;padding-left:6px}
.co input.bad,.co select.bad,.ph:has(input.bad){border-color:var(--warn);box-shadow:0 0 0 1px var(--warn)}
.co-note summary{cursor:pointer;list-style:none;font-size:14px;color:var(--mute);text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.co-note summary::-webkit-details-marker{display:none}
.co-note[open] summary{display:none}
.co-pay{font-size:14px;color:var(--text);padding:12px 14px;border:1px solid #333;border-radius:8px}
.co-tg{margin-top:6px;padding:18px;border:1px solid #2a2a2a;border-radius:10px;display:grid;gap:12px;font-size:14px;color:var(--mute)}
.co-tg b{color:#fff;font-weight:500;font-size:15px}
.cart-foot .btn.tg{margin-top:-6px}
.tg-float{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 14px;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;font-weight:500;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.tg-float:hover{background:var(--accent-h)}
.tg-float .tg-i{width:20px;height:20px}
body:has([data-product]) .tg-float,body:has([data-checkout]) .tg-float,body:has([data-cart]) .tg-float{display:none}
@media (max-width:560px){ .tg-float span{display:none} .tg-float{width:52px;height:52px;padding:0;justify-content:center} .tg-float .tg-i{width:24px;height:24px} }
.co-tg-top{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute);margin:-6px 0 4px}
.co-tg-top a{color:#fff;text-underline-offset:3px}
.co-tg-top .tg-i{color:#3fb6c1}
.sticky-buy>div{min-width:0} .sticky-buy div p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-buy .btn{flex:0 0 auto}
.legal h2{font-size:18px;margin:28px 0 8px} .legal p,.legal li{max-width:68ch;color:var(--text)} .legal ul,.legal ol{padding-left:20px;display:grid;gap:6px}
.foot-legal a{color:var(--mute);text-underline-offset:3px;display:inline-block;padding:6px 0}

/* v11 — Farben je Modell als kleine Bilder unter der Karte */
.card-a{display:block;text-decoration:none;color:inherit}
.card:hover .card-img img{transform:scale(1.035)}
.sw{display:flex;gap:4px;padding:8px 14px 0;flex-wrap:wrap}
.sw a{width:40px;height:40px;border-radius:6px;background:var(--tile);border:1px solid transparent;display:grid;place-items:center;overflow:hidden}
.sw a[aria-current]{border-color:#fff}
.sw a:hover{border-color:#777}
.sw img{width:100%;height:100%;object-fit:contain;padding:3px;mix-blend-mode:multiply}
.sw-more{background:transparent!important;border:1px solid #333!important;color:var(--mute);font-size:12px;font-weight:500;text-decoration:none}
@media (max-width:560px){ .sw{padding:8px 4px 0} .sw a{width:34px;height:34px} }
.logo{display:inline-flex;align-items:baseline;gap:2px;font-size:21px;letter-spacing:-.04em}
.logo-dot{width:7px;height:7px;border-radius:50%;background:#2bb3be;display:inline-block}
.sz-ts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin:12px 0}
.sz-t{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.sz-t caption{text-align:left;font-weight:500;color:#fff;padding-bottom:6px}
.sz-t th,.sz-t td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.sz-t th{color:var(--mute);font-weight:500;font-size:12.5px}
.acc details .small{padding-bottom:6px}
/* Telegram-Knopf beim Runterscrollen kurz weg, damit er nichts verdeckt */
.tg-float{transition:transform .25s ease,opacity .25s ease}
.tg-float.away{transform:translateY(90px);opacity:0;pointer-events:none}

/* v12 — Hinweisleiste tuerkis mit Symbolen, am Handy wechselnd */
.ann{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500;font-size:13.5px;padding:10px var(--pad)}
.ann span{display:inline-flex;align-items:center;gap:8px}
.ann svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
@media (max-width:860px){
  .ann{justify-content:center;position:relative;min-height:40px}
  .ann span+span{display:inline-flex}
  .ann span{position:absolute;left:0;right:0;justify-content:center;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
  .ann span.on{opacity:1;transform:none;pointer-events:auto}
}
/* Laden-Video */
.visit-media{position:relative;min-height:340px;background:#111;overflow:hidden}
.visit-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){ .visit-media{min-height:0;aspect-ratio:4/5} }
/* Wenig Bestand: ehrlicher Hinweis aus der Kasse */
.left{display:inline-block;margin-left:8px;font-size:12px;font-weight:600;color:#ffb27a}
.co-trust{font-size:13.5px;color:var(--ok);text-align:center;margin-top:-6px}
.ann{background:#0e6a72;border-color:#0e6a72}
/* v21 Marken: Leiste im Katalog, Markenname auf Karte und Produktseite, Markenreihe auf der Startseite */
.seg.brands{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.seg.brands::-webkit-scrollbar{display:none}
.seg.brands a{flex:none;font-weight:600}
.seg.brands a[aria-current]{background:var(--accent);border-color:var(--accent);color:#fff}
.card-br{color:var(--mute);font-weight:600;font-size:12.5px;letter-spacing:.01em}
.pdp-br{display:block;font-size:15px;font-weight:600;color:var(--mute);margin-bottom:4px}
.brands-s{max-width:var(--max);margin:clamp(36px,4vw,64px) auto 0;padding:0 var(--pad)}
.brands-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;margin-bottom:16px}
.brands-h h2{font-size:clamp(22px,2vw,28px)}
.brands-h p{color:var(--mute);font-size:14px}
.brands-l{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.brands-l a{background:var(--soft);display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:112px;padding:18px;text-decoration:none;color:var(--ink);transition:background .15s}
.brands-l a:hover,.brands-l a:focus-visible{background:var(--accent)}
.b-n{font-size:clamp(19px,1.7vw,24px);font-weight:700;letter-spacing:-.01em;line-height:1.1}
.brands-l small{font-size:13px;color:var(--mute)}
.brands-l a:hover small,.brands-l a:focus-visible small{color:#fff}
@media (max-width:860px){ .brands-l{grid-template-columns:repeat(3,minmax(0,1fr))} .brands-l a{min-height:92px;padding:14px} }
@media (max-width:420px){ .brands-l{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* v22 Promo-Kod (Influencer) in der Kasse */
.co-promo{margin-top:4px}
.co-promo label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.pr-row{display:flex;gap:8px}
.pr-row input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.04em}
.pr-row .btn{flex:none;min-height:48px;padding:0 18px}
.pr-msg{font-size:13.5px;margin-top:6px}
.pr-msg.ok{color:var(--ok)}
.pr-msg.bad{color:#ff8a80}
.co-d span:last-child{color:var(--ok);font-weight:600}
.linkish{background:none;border:0;padding:0;color:inherit;text-decoration:underline;font:inherit;cursor:pointer}
/* v23 Ersparnis als Betrag in einer kleinen Pille statt Prozent */
.is-sale .off,.card-p.is-sale .off{background:rgba(255,122,92,.14);border-radius:999px;padding:2px 8px;white-space:nowrap}
/* v24 Instagram neben Telegram */
.buy-cart{margin-top:8px;height:46px}
.ig-hint{font-size:12.5px;color:var(--mute);margin-top:6px}
.cart-chat{margin-top:0}
.co-tg .buy-2{margin-top:0}
/* v25 Waehrung $ / so'm */
.cur-sw{display:inline-flex;border:1px solid var(--line,#ddd);border-radius:999px;overflow:hidden;margin-right:6px;font-size:13px;line-height:1}
.cur-sw a{padding:7px 10px;text-decoration:none;color:var(--mute);min-width:32px;text-align:center}
.cur-sw a[aria-current]{background:var(--ink);color:var(--white);font-weight:600}
.cur-sw a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
@media (max-width:520px){.cur-sw{margin-right:2px}.cur-sw a{padding:7px 8px}}

/* ---------- Typografie (19.10.2026): neutrale Grotesk wie bei On, Nike, New Balance, SSENSE ----------
   Inter fuer Text und Bedienung, Inter Tight (enger geschnitten) fuer Ueberschriften, Logo und Preise.
   Nur drei Gewichte: 400 Text, 500 Bedienung/Namen, 600 Ueberschriften. Zahlen gleich breit (tabular). */
body{font-family:var(--sans);letter-spacing:-.006em;font-feature-settings:"cv05","cv08";text-rendering:optimizeLegibility}
h1,h2,h3,.hero h1,.pdp h1,.cat-h h1,.duo-t,.b-n,.brands-h h2,.svc h3,.co-side h2,.legal h2{font-family:var(--display);font-weight:600}
h1,h2,h3{letter-spacing:-.018em}
.hero h1{font-weight:600;letter-spacing:-.024em;line-height:1.02}
.pdp h1{letter-spacing:-.02em;line-height:1.08}
.logo{font-family:var(--display);font-weight:700;letter-spacing:-.028em}
.b-n{font-weight:600;letter-spacing:-.018em}
.nav a,.top-r,.btn,.seg a{font-weight:500;letter-spacing:-.003em}
.btn{font-weight:600}
.card-n{font-weight:500;letter-spacing:-.01em}
.card-br,.pdp-br,.seg.brands a{font-weight:600;letter-spacing:0}
.card-p,.pdp-price,.cart-total,.co-l,.co-t,.sticky-buy div p:last-child{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pdp-price,.pdp-price.is-sale .now{font-family:var(--display);font-weight:600;font-size:22px}
.co-t{font-weight:600}
.ann{font-weight:500;letter-spacing:0}
.small,.card-c,.crumbs,.block-d,.foot-legal{letter-spacing:0}

/* ---------- Handy (20.10.2026): ruhiger, kompakter Katalog ----------
   Filter in einer wischbaren Reihe, keine Farb-Miniaturen unter den Karten (Anzahl Farben steht als Text da),
   Lager-Hinweis in einer Zeile, Abstaende enger. */
@media (max-width:560px){
  .cat-h{gap:10px}
  .cat-h h1{font-size:26px}
  .cat-h p{font-size:13px}
  .seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:6px;margin-top:12px;padding-bottom:2px}
  .seg::-webkit-scrollbar{display:none}
  .seg a{flex:none;height:34px;padding:0 14px;font-size:13.5px}
  .card .sw{display:none}
  .card-b{padding:10px 8px 14px;gap:2px}
  .card-w{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-bottom:4px;font-size:12px;line-height:1.3}
  .card-w .when,.card-w .tag{font-size:12px;margin:0}
  .card-w .left{margin:0;font-size:11.5px}
  .card-n{font-size:14px;line-height:1.3}
  .card-c{font-size:12.5px}
  .card-p{font-size:14px;margin-top:4px}
  .block-h h2{font-size:21px}
  .block-d{font-size:13px}
}
/* Startseite am Handy: Laden-Video (Regale mit Kartons, unscharf) ausblenden; auf der Laden-Seite /dokon bleibt es */
@media (max-width:560px){ .visit:not(.solo){display:block} .visit:not(.solo) .visit-media{display:none} }
/* v29: Sprache UZ|RU als Umschalter, Warenkorb als Symbol mit Zahl */
.lang-sw a{min-width:36px;font-weight:600}
.cart-link{position:relative;padding:8px;margin:-8px -8px -8px 0}
.cart-link svg{display:block;width:24px;height:24px}
.cart-link .cart-count{position:absolute;top:1px;right:-1px;min-width:18px;height:18px;padding:0 4px;font-size:10.5px;line-height:1;border:2px solid #000;border-radius:9px}
@media (max-width:520px){.top-r{gap:12px}.lang-sw a{min-width:30px}}
/* v30 Paket 1 (Handy): Groessenhinweis, Telegram-Knopf, Hinweisleiste fest, Menue-Verlauf, Tipp-Flaechen >=44px, Karten, Produktbild */
.size-h{scroll-margin-top:120px}
.sz-g.need .sizes{animation:eb-need .3s 2}
@keyframes eb-need{50%{transform:translateX(5px)}}
.sz-g.need .sz-h{color:#ffb27a}
@media (prefers-reduced-motion:reduce){.sz-g.need .sizes{animation:none;outline:2px solid var(--accent);outline-offset:4px}}
body:has(.fwrap[open]) .tg-float{display:none}
.nav a{white-space:nowrap}
@media (min-width:861px) and (max-width:1180px){.nav{gap:16px}.nav a{font-size:13.5px}.top-in{gap:16px}.top-r{gap:12px}}
@media (max-width:860px){
  .ann span{position:static;opacity:1;transform:none;pointer-events:auto} .ann span+span{display:none}
  .nav{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
  .nav.at-end{-webkit-mask-image:none;mask-image:none}
  .nav a{padding:13px 0 12px}
}
@media (max-width:560px){
  .seg a{min-height:44px;height:auto}
  .cur-sw{overflow:visible}
  .cur-sw a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:32px}
  .cur-sw a:first-child{border-radius:999px 0 0 999px} .cur-sw a:last-child{border-radius:0 999px 999px 0}
  .cur-sw a::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
  .cart-link{padding:10px;margin:-10px -10px -10px 0}
  .f-sizes a{height:44px}
  .filters ul a{display:block;padding:10px 0}
  .card-n{font-size:15px;line-height:1.3}
  .card-c{font-size:13px}
  .card-p{font-size:16px;font-weight:600}
  .card-w .when,.card-w .tag{font-size:13px}
  .card-w .left{font-size:12.5px}
  .tg-float{width:48px;height:48px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
  .tg-float .tg-i{width:22px;height:22px}
  .pdp-img{aspect-ratio:1/1} .pdp-img img{padding:3% 4%}
}

/* Paket 2: Startseite kompakter + Vertrauenszeile */
.trust{max-width:var(--max);margin:0 auto;padding:20px var(--pad) 0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 20px}
.trust li,.trust a{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none}
.trust a{text-underline-offset:4px} .trust a:hover span{text-decoration:underline}
.trust svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trust + .block{padding-top:clamp(28px,4vw,56px)}
@media (max-width:760px){
  .hero-img{aspect-ratio:16/10;object-position:50% 58%}
  .hero-txt{padding:16px var(--pad) 2px}
  .hero h1{font-size:30px}
  .hero-txt>p:not(.hero-cta){margin-top:8px;font-size:15px}
  .hero-cta{margin-top:14px}
  .trust{grid-template-columns:1fr 1fr;gap:2px 12px;padding-top:12px}
  .trust li,.trust a{font-size:13px;gap:8px}
  .trust svg{width:20px;height:20px}
  .trust + .block{padding-top:24px}
}
@media (max-width:560px){
  .hero-img{aspect-ratio:2/1;object-position:50% 42%}
  .hero h1{font-size:28px;max-width:none}
  /* Lieferung/Anprobe steht direkt darunter in der Vertrauenszeile -> Untertitel auf dem Handy weglassen */
  .hero-txt>p:not(.hero-cta){display:none}
  .hero-cta .btn{min-height:44px;padding-top:10px;padding-bottom:10px}
}

/* Telegram = Hauptkanal (Sherdor, 23.10.): Telegram volle Breite mit Akzentrahmen, Instagram als schlichte Zeile darunter */
.buy-2{grid-template-columns:1fr;gap:2px}
.buy-2 .btn.tg[data-tg],.buy-2 .btn.tg[data-tg-cart]{border-color:var(--accent);border-width:1.5px}
.buy-2 .btn.tg[data-tg] .tg-i,.buy-2 .btn.tg[data-tg-cart] .tg-i{color:#2aabee}
.buy-2 .btn.tg[data-ig],.buy-2 .btn.tg[data-ig-cart]{height:44px;border-color:transparent;background:none;color:var(--mute);font-size:14px;font-weight:500}
.buy-2 .btn.tg[data-ig]:hover,.buy-2 .btn.tg[data-ig-cart]:hover{color:var(--ink)}
.ig-hint{margin-top:0;text-align:center}

/* Startseite Handy: Abschnitts-Erklaertexte weglassen (Lieferung/Laden steht schon in der Vertrauenszeile), Ueberschriften kompakter */
@media (max-width:560px){
  .block-d{display:none}
  .block-h{margin-bottom:12px}
  .block-h h2{font-size:20px}
  .trust + .block{padding-top:20px}
  .hero-img{object-position:50% 50%}
}

/* Handy/Tablet: Menue hinter ☰ statt Wischzeile (Test 23.10.) */
.menu-btn{display:none}
@media (max-width:860px){
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:-8px;padding:0;background:none;border:0;color:var(--ink);cursor:pointer}
  .menu-btn svg{width:24px;height:24px}
  .top-in{padding-bottom:12px}
  .nav{display:none;-webkit-mask-image:none;mask-image:none}
  .top.open .nav{display:flex;flex-direction:column;gap:0;overflow:visible;white-space:normal;margin:10px calc(var(--pad)*-1) -12px;padding:0 var(--pad) 8px;border-top:1px solid #1e1e1e}
  .top.open .nav a{padding:15px 0;font-size:17px;border-bottom:1px solid #1e1e1e}
  .top.open .nav a:last-child{border-bottom:0}
  .top.open .nav a[aria-current]{color:#2bb3be;border-bottom-color:#1e1e1e}
}
@media (max-width:560px){
  .top-in{gap:0 8px}
  .top-r{gap:6px}
  .cart-link{padding:8px 6px}
  .menu-btn{width:38px;margin-right:-6px}
}
@media (max-width:400px){.logo{font-size:19px}.menu-btn{margin-right:-9px}.cur-sw a{padding-left:9px;padding-right:9px}}

/* Startbild = echtes Foto der Ladenfront (23.10.) */
.hero-img{object-position:50% 22%}
@media (min-width:761px){
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.35) 55%,transparent);pointer-events:none}
  .hero-txt{z-index:1}
}
@media (max-width:760px){
  .hero-img{aspect-ratio:4/3;object-position:50% 50%}
}
@media (max-width:760px){.hero h1{max-width:none}}

/* Variante A: Start ohne Bild */
.hero2{max-width:var(--max);margin:0 auto;padding:clamp(28px,6vw,72px) var(--pad) 8px}
.hero2-k{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#2bb3be;margin-bottom:14px;font-weight:600}
.hero2 h1{font-size:clamp(34px,6vw,76px);line-height:1.02;letter-spacing:-.03em;max-width:16ch}
.hero2-b{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px}
.hero2-b a{color:var(--mute);text-decoration:none;font-size:15px;font-weight:600;padding:6px 0}
.hero2-b a:hover{color:var(--ink)}
.hero2 .hero-cta{margin-top:22px}
/* Variante B: ein Produkt gross */
.hero3{max-width:var(--max);margin:0 auto;padding:22px var(--pad) 0}
.hero3 h1{font-size:clamp(28px,4.4vw,56px);line-height:1.04;letter-spacing:-.03em;margin-bottom:16px}
.hero3-card{display:grid;text-decoration:none;color:var(--ink);position:relative}
.hero3-img{display:block;background:#efeeec;border-radius:16px;overflow:hidden;aspect-ratio:4/3}
.hero3-img img{width:100%;height:100%;object-fit:contain;padding:4% 8%;mix-blend-mode:multiply}
.hero3-tag{position:absolute;top:12px;left:12px;background:#000;color:#fff;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:999px}
.hero3-n{margin-top:12px;font-size:17px;font-weight:600} .hero3-n small{color:var(--mute);font-size:14px;font-weight:600}
.hero3-p{font-size:17px;font-weight:600;margin-top:2px}
.hero3 .hero-cta{margin-top:16px}
@media (min-width:861px){.hero3{display:grid;grid-template-columns:1fr 1.1fr;gap:12px 48px;align-items:center}.hero3 h1{grid-column:1;grid-row:1;align-self:end}.hero3 .hero-cta{grid-column:1;grid-row:2;align-self:start}.hero3-card{grid-column:2;grid-row:1/3}}
/* Ladenfoto auch am Handy auf der Startseite, Format 16:10 */
@media (max-width:860px){.visit-media:has(img){aspect-ratio:16/10}.visit-media img{position:absolute;inset:0;min-height:0}}
@media (max-width:560px){.visit:not(.solo) .visit-media:has(img){display:block}}

/* Variante B: Marken-Reihe (wischbar, naechste Karte schaut heraus) */
.hero3-rail{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--pad)*-1);padding:0 var(--pad);scroll-padding:0 var(--pad)}
.hero3-rail::-webkit-scrollbar{display:none}
.hero3-rail .hero3-card{scroll-snap-align:start}
.hero3-tag.order{background:#fff;color:#000}
@media (min-width:861px){.hero3-rail{grid-auto-columns:calc(50% - 5px);margin:0;padding:0}}
@media (min-width:861px){.hero3-rail{grid-column:2;grid-row:1/3;min-width:0}.hero3-rail .hero3-card{grid-column:auto;grid-row:auto}}

/* Paket 3 (23.10.) */
/* 1) Kopfzeile: Waehrung/Sprache als ruhige Textumschalter statt weisser Pillen */
@media (max-width:860px){
  .cur-sw{border:0;background:none;margin-right:0;border-radius:0}
  .cur-sw a{padding:6px 6px;min-width:0;background:none;color:#7d7d78;font-size:13.5px;font-weight:600;border-radius:0}
  .cur-sw a[aria-current]{background:none;color:#fff}
  .cur-sw a+a{border-left:1px solid #3a3a3a}
  .cur-sw a:first-child,.cur-sw a:last-child{border-radius:0}
  .lang-sw{margin-left:2px}
}
/* 3) Vertrauenszeile: gleich grosse Kaestchen */
@media (max-width:760px){
  .trust{grid-auto-rows:1fr;gap:8px;padding-top:16px}
  .trust li{background:#101010;border:1px solid #1f1f1f;border-radius:12px;padding:10px 12px;min-height:58px;line-height:1.25}
  .trust li a{min-height:0;width:100%}
}
/* 4) Punkte unter der Marken-Reihe */
.hero3-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.hero3-dots span{width:7px;height:7px;border-radius:50%;background:#3a3a3a;transition:background .2s,width .2s}
.hero3-dots span.on{background:#fff;width:18px;border-radius:4px}
@media (min-width:861px){.hero3-dots{grid-column:2;justify-content:flex-start}}
/* 5) Telegram-Knopf erst nach dem Scrollen */
.tg-wait .tg-float{opacity:0;transform:translateY(90px);pointer-events:none}
/* 6) Einheitliche Produktkacheln: runde Ecken und Abstand wie bei der Marken-Reihe */
.card-img{border-radius:12px}
.grid{column-gap:12px}
@media (max-width:860px){.cat .grid{column-gap:10px;padding:0 var(--pad)}.rail{gap:10px}}
