/* ============ THE SIGNAL — Store Layer (erbt signal.css) ============ */
.shopnav{position:fixed;top:0;left:0;right:0;z-index:75;display:flex;align-items:center;
  justify-content:space-between;padding:14px 28px;background:#000;border-bottom:2px solid #fff;mix-blend-mode:normal}
/* Die Wortmarke ist schwarz. Die Haupt-Nav dreht sie ueber
   mix-blend-mode:difference um; diese Leiste hat einen eigenen
   Hintergrund und muss selbst invertieren. */
.shopnav img{height:20px;width:auto;filter:invert(1)}
.shopnav .r{display:flex;gap:22px;align-items:center}
.shopnav a,.shopnav button{font-family:var(--disp);font-weight:900;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:none;border:0;padding:0}
.shopnav a:hover,.shopnav button:hover{color:var(--blue)}
.cartcount{background:var(--blue);padding:2px 7px;margin-left:7px}

.shopwrap{max-width:1240px;margin:0 auto;padding:150px 28px 40px}
.crumbs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}

/* ---- Region-Router ---- */
.router{border:2px solid #fff;display:grid;grid-template-columns:1fr auto;gap:18px;
  align-items:center;padding:16px 18px;margin-bottom:44px}
.router .rt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.9;min-width:0;overflow-wrap:anywhere}
/* Auf schmalen Displays stapeln, sonst schiebt die zweite Taste
   ("US / CA / MX / JP / AU") die ganze Box aus dem Viewport. */
@media(max-width:760px){
  .router{grid-template-columns:1fr}
  .regsw{width:100%;flex-direction:column;flex-wrap:nowrap}
  .regsw button{text-align:center}
  .regsw button+button{border-top:2px solid #fff}
}
.router .rt b{color:var(--green);font-weight:400}
.regsw{display:inline-flex;border:2px solid #fff;width:max-content;max-width:100%;flex-wrap:wrap}
.regsw button{all:unset;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 16px;color:#fff;cursor:pointer}
body.fine .regsw button{cursor:none}
.regsw button.on{background:var(--blue)}

/* ---- Produkt ---- */
.prod{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start}
@media(max-width:960px){.prod{grid-template-columns:1fr;gap:36px}}
.gal{position:relative}
.galmain{border:2px solid #fff;background:#0a0a0a;aspect-ratio:4/5;overflow:hidden;position:relative}
.galmain img{width:100%;height:100%;object-fit:cover;display:block}
.galmain .tag{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;background:#000;border:2px solid #fff;padding:7px 11px}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.thumbs button{all:unset;border:2px solid #333;aspect-ratio:4/5;overflow:hidden;cursor:pointer;display:block}
body.fine .thumbs button{cursor:none}
.thumbs button.on{border-color:#fff}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}

.pinfo h1{font-size:clamp(38px,5.4vw,68px);letter-spacing:-.035em;line-height:.96}
.pinfo .sub{margin-top:16px;display:flex;gap:14px;flex-wrap:wrap}
.price2{margin-top:30px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.price2 .big{font-family:var(--disp);font-weight:900;font-size:clamp(40px,5vw,64px);letter-spacing:-.03em}
.price2 .note{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.55}

.optgrp{margin-top:34px}
.optgrp .lg{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:14px;flex-wrap:wrap}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{all:unset;display:flex;align-items:center;gap:10px;border:2px solid #333;
  padding:10px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;cursor:pointer}
body.fine .swatch{cursor:none}
.swatch:hover{border-color:#666}
.swatch.on{border-color:#fff;background:rgba(255,255,255,.06)}
.swatch i{width:16px;height:16px;border:1px solid #666;display:block}
.swatch.off{opacity:.32;pointer-events:none;text-decoration:line-through}
.sizes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media(max-width:420px){.sizes{grid-template-columns:repeat(3,1fr)}}
.sizes button{all:unset;text-align:center;border:2px solid #333;padding:13px 0;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#fff;cursor:pointer}
body.fine .sizes button{cursor:none}
.sizes button:hover{border-color:#666}
.sizes button.on{border-color:#fff;background:var(--blue)}
.sizelink{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:underline;opacity:.6;background:none;border:0;color:#fff;padding:0;cursor:pointer}
body.fine .sizelink{cursor:none}
.sizelink:hover{opacity:1;color:var(--blue)}

.addrow{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.addrow .btn{flex:1;min-width:220px;text-align:center;padding:17px 20px;font-size:12px}
.qty{display:inline-flex;border:2px solid #fff}
.qty button{all:unset;width:46px;text-align:center;font-family:var(--disp);font-weight:900;
  font-size:18px;color:#fff;cursor:pointer}
body.fine .qty button{cursor:none}
.qty span{width:46px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;border-left:2px solid #fff;border-right:2px solid #fff}

.facts{margin-top:34px;border-top:2px solid #fff}
.facts div{display:grid;grid-template-columns:132px 1fr;gap:16px;padding:13px 2px;
  border-bottom:1px solid #1a1a1a;font-family:var(--mono);font-size:12px;line-height:1.6}
.facts .k{opacity:.45;text-transform:uppercase;letter-spacing:.1em;font-size:10px;align-self:center}

/* ---- Größentabelle (Modal) ---- */
.modal{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.86);display:none;
  align-items:center;justify-content:center;padding:24px}
.modal.on{display:flex}
.modalbox{background:#000;border:2px solid #fff;max-width:720px;width:100%;max-height:86vh;overflow:auto}
.modalbox .mh{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 20px;border-bottom:2px solid #fff;position:sticky;top:0;background:#000}
.modalbox .mb{padding:20px}
.modalbox table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
.modalbox th,.modalbox td{border:1px solid #2a2a2a;padding:9px 10px;text-align:left}
.modalbox th{background:#0e0e0e;font-weight:400;text-transform:uppercase;font-size:10px;letter-spacing:.1em}
/* Gilt fuer Modal UND Drawer. Vorher war nur der Modal-Button gestylt,
   der im Warenkorb kam als weisser System-Button heraus. */
.modalbox .close,.drawer .close{all:unset;font-family:var(--disp);font-weight:900;
  font-size:13px;letter-spacing:.12em;cursor:pointer;color:#fff;white-space:nowrap}
.modalbox .close:hover,.drawer .close:hover{color:var(--blue)}
body.fine .modalbox .close,body.fine .drawer .close{cursor:none}
.fitnote{margin-top:16px;font-family:var(--mono);font-size:12px;line-height:1.8;opacity:.75}

/* ---- Warenkorb (Drawer) ---- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:#000;
  border-left:2px solid #fff;z-index:130;transform:translateX(101%);
  transition:transform .38s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer .dh{display:flex;justify-content:space-between;align-items:center;
  padding:18px 20px;border-bottom:2px solid #fff}
.drawer .di{flex:1;overflow-y:auto}
.citem{display:grid;grid-template-columns:66px 1fr auto;gap:14px;padding:16px 20px;
  border-bottom:1px solid #1a1a1a;align-items:center}
.citem img{width:66px;height:82px;object-fit:cover;border:1px solid #2a2a2a}
.citem .n{font-family:var(--disp);font-weight:900;font-size:15px;letter-spacing:-.01em}
.citem .m{font-family:var(--mono);font-size:11px;opacity:.55;margin-top:5px;line-height:1.6}
.citem .p{font-family:var(--mono);font-size:13px;text-align:right;white-space:nowrap}
.citem .rm{all:unset;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.45;cursor:pointer;margin-top:6px;display:block}
body.fine .citem .rm{cursor:none}
.citem .rm:hover{opacity:1;color:var(--blue)}
.drawer .df{border-top:2px solid #fff;padding:20px}
.sumline{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;
  padding:6px 0;letter-spacing:.04em}
.sumline.tot{font-family:var(--disp);font-weight:900;font-size:20px;letter-spacing:-.01em;
  padding-top:14px;margin-top:10px;border-top:1px solid #2a2a2a}
.drawer .btn{width:100%;text-align:center;margin-top:16px;padding:16px}
.optin-s{display:flex;gap:10px;align-items:flex-start;margin-top:14px;cursor:pointer}
body.fine .optin-s{cursor:none}
.optin-s input{margin-top:2px;accent-color:var(--blue);flex:0 0 auto}
.optin-s .lbl{opacity:.55;line-height:1.7;text-transform:none;letter-spacing:.03em}
.empty{padding:60px 20px;text-align:center;font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;opacity:.4;line-height:2}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:125;opacity:0;
  visibility:hidden;transition:.3s}
.scrim.on{opacity:1;visibility:visible}

/* ---- weitere Produkte ---- */
.more{margin-top:110px}
.moregrid{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px}
.mcard{border:2px solid #fff;background:#000;display:flex;flex-direction:column;min-height:250px}
.mcard .mt{padding:18px;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.mcard .mn{font-family:var(--disp);font-weight:900;font-size:26px;letter-spacing:-.02em;line-height:1.05}
.mcard .mp{font-family:var(--mono);font-size:12px;opacity:.6;margin-top:8px;line-height:1.7}
.mcard .ext{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:2px solid #fff;padding:9px 12px;width:max-content}
.mcard .ext:hover{background:#fff;color:#000}
.soon{opacity:.42}

/* ---- Legal ---- */
.legal{max-width:820px;margin:0 auto;padding:150px 28px 90px}
.legal h1{font-size:clamp(34px,5vw,60px);letter-spacing:-.035em;line-height:1}
.legal h2{font-size:clamp(19px,2.2vw,26px);letter-spacing:-.01em;margin:44px 0 14px}
.legal h3{font-size:16px;margin:26px 0 10px}
.legal p,.legal li{font-family:var(--mono);font-size:13px;line-height:1.95;opacity:.86}
.legal p{margin-bottom:14px}
.legal ul,.legal ol{margin:0 0 16px 20px}
.legal li{margin-bottom:7px}
/* #0000FF auf Schwarz ist im Fliesstext nicht lesbar (Kontrast ~2:1).
   Links bleiben weiss und unterstrichen, Blau nur als Hover-Akzent
   waere ebenso dunkel — daher Gruen aus derselben Palette. */
.legal a{text-decoration:underline;text-underline-offset:3px;color:#fff}
.legal a:hover{color:var(--green)}
.legal .meta{margin-top:18px;margin-bottom:40px;display:flex;gap:20px;flex-wrap:wrap}
.legal table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;margin:16px 0}
.legal th,.legal td{border:1px solid #2a2a2a;padding:9px 11px;text-align:left;vertical-align:top}
.legal th{background:#0e0e0e;font-weight:400;text-transform:uppercase;font-size:10px;letter-spacing:.1em}
.legal .box{border:2px solid #fff;padding:20px;margin:24px 0}
.legalnav{display:flex;gap:18px;flex-wrap:wrap;margin-top:56px;padding-top:26px;border-top:2px solid #222}
.legalnav a{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  opacity:.55;text-decoration:none}
.legalnav a:hover{opacity:1;color:var(--blue)}