/* ============================================
   BNDIT. — Reinraum × Straße
   Hochglanz Schwarz / Weiß + Magenta, Gold, Giftgrün
   ============================================ */

:root{
  --black: #0b0b0c;
  --black-2: #151517;
  --white: #ffffff;
  --lab: #f4f5f6;
  --lab-2: #e6e8ea;
  --grey: #7d7f85;
  --grey-light: #c4c6cb;

  --magenta: #cf2a9e;
  --gold: #d9a520;
  --green: #8ed93c;

  --drip: linear-gradient(100deg, var(--magenta) 0%, var(--gold) 50%, var(--green) 100%);
  --hazard: repeating-linear-gradient(-45deg, #0b0b0c 0 14px, #d9a520 14px 28px);

  --tape-h: 0px;
  --nav-h: 64px;

  --ff-display: "Archivo Black", "Arial Black", sans-serif;
  --ff-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background: var(--lab);
  color: var(--black);
  font-family: var(--ff-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family: var(--ff-mono); letter-spacing:.08em; text-transform:uppercase; }

/* ===== TAPE (oben) ===== */
.tape{
  position:fixed; top:0; left:0; right:0; z-index:700;
  height: var(--tape-h);
  background: var(--gold);
  color: var(--black);
  overflow:hidden;
  display:flex; align-items:center;
  border-bottom: 2px solid var(--black);
}
.tape-track{
  display:flex; width:max-content;
  font-family: var(--ff-mono); font-weight:700; font-size:11px; letter-spacing:.18em;
  white-space:nowrap;
  animation: tape 40s linear infinite;
}
.tape-track span{ padding-right: 1.2em; }
@keyframes tape{ to{ transform: translateX(-50%); } }

/* ===== NAV (Reinraum-Glas) ===== */
.nav{
  position:fixed; top: var(--tape-h); left:0; right:0; z-index:600;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.9);
}
.nav-inner{
  max-width:1360px; margin:0 auto; height: var(--nav-h);
  padding: 0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-logo{ display:flex; align-items:center; gap:10px; }
.nav-chevron{ height:20px; width:auto; filter: invert(1); }
.nav-word{ height:16px; width:auto; }
.nav-links{ display:flex; gap:34px; }
.nav-links a{
  font-family: var(--ff-mono); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color: #3a3b3f; position:relative; transition: color .2s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:3px;
  background: var(--drip); transition: width .25s;
}
.nav-links a:hover{ color: var(--black); }
.nav-links a:hover::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  position:relative; width:36px; height:36px; border:none; background:none; color: var(--black);
  display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer;
  transition: background .2s;
}
.icon-btn:hover{ background: rgba(0,0,0,.06); }
.icon-btn svg{ width:19px; height:19px; }
.cart-badge{
  position:absolute; top:1px; right:1px; width:15px; height:15px; border-radius:50%;
  background: var(--magenta); color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:none; border:none; cursor:pointer; }
.burger span{ height:2px; width:100%; background: var(--black); border-radius:2px; }

.mobile-menu{
  position:fixed; top:0; right:0; height:100vh; width:78vw; max-width:360px; z-index:800;
  background: var(--black); color:#fff;
  display:flex; flex-direction:column; gap:6px; padding: 120px 32px 32px;
  transform: translateX(100%); transition: transform .35s cubic-bezier(.65,0,.35,1);
}
.mobile-menu.open{ transform: translateX(0); }
.mobile-menu a{
  font-family: var(--ff-display); font-size:26px; text-transform:uppercase;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12);
}

/* ===== HERO: Reinraum, besprüht ===== */
.hero{
  position:relative; min-height:100svh;
  padding: calc(var(--tape-h) + var(--nav-h) + 26px) 24px 70px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, #ffffff 0%, rgba(255,255,255,0) 70%),
    radial-gradient(circle at 12% 88%, rgba(207,42,158,.10), transparent 40%),
    radial-gradient(circle at 92% 78%, rgba(142,217,60,.12), transparent 42%),
    linear-gradient(180deg, #f7f8f9 0%, #e9ebed 100%);
}
.hero::before{ /* Hochglanz-Lichtstreifen */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(112deg, transparent 28%, rgba(255,255,255,.75) 42%, rgba(255,255,255,0) 52%, transparent 70%);
}
.lab-grid{
  position:absolute; inset:0; z-index:-2;
  background-image:
    linear-gradient(rgba(0,0,0,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 85%);
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 85%);
}
.reg{ position:absolute; width:26px; height:26px; border:2px solid var(--black); opacity:.55; }
.reg-tl{ top: calc(var(--tape-h) + var(--nav-h) + 18px); left:22px; border-right:none; border-bottom:none; }
.reg-tr{ top: calc(var(--tape-h) + var(--nav-h) + 18px); right:22px; border-left:none; border-bottom:none; }
.reg-bl{ bottom:46px; left:22px; border-right:none; border-top:none; }
.reg-br{ bottom:46px; right:22px; border-left:none; border-top:none; }

.hero-meta{
  position:absolute; top:50%; transform: translateY(-50%);
  display:flex; flex-direction:column; gap:10px; font-size:11px; font-weight:600; color:#55565b;
}
.hero-meta-l{ left:34px; text-align:left; }
.hero-meta-r{ right:34px; text-align:right; }
.hero-meta .warn{ color: var(--magenta); }

.hero-stage{ position:relative; display:flex; justify-content:center; padding-bottom: 7vh; }
.tag{ height: min(50vh, 520px); width:auto; }
.tag-main{
  position:relative; z-index:2;
  -webkit-box-reflect: below 4px linear-gradient(to bottom, rgba(0,0,0,.22), transparent 26%);
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.18));
}
.tag-shadow{
  position:absolute; top:0; left:50%; z-index:1;
  transform: translate(calc(-50% + 16px), 12px) rotate(1.5deg);
  opacity:.9;
}
.sticker{ position:absolute; z-index:3; }
.sticker-badge{
  width: clamp(110px, 14vw, 190px);
  left: calc(50% - clamp(220px, 24vw, 340px)); bottom: 12vh;
  transform: rotate(-9deg);
  border:4px solid #fff; border-radius:6px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.15);
}
.sticker-round{
  right: calc(50% - clamp(230px, 25vw, 350px)); top: 2vh;
  width: 108px; height:108px; border-radius:50%;
  background: var(--gold); color: var(--black);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:10px; font-weight:700; line-height:1.35;
  transform: rotate(13deg);
  border:3px solid var(--black);
  box-shadow: 0 10px 22px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.5);
}

.hero-copy{ position:relative; z-index:3; }
.hero-tagline{
  font-family: var(--ff-display); text-transform:uppercase;
  font-size: clamp(20px, 2.8vw, 34px); line-height:1.15;
}
.hero-cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top: 26px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 15px 32px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  transition: transform .25s, box-shadow .25s, background .25s, color .25s;
}
.btn-black{
  background: linear-gradient(180deg, #2a2a2e 0%, #0b0b0c 55%, #000 100%);
  color:#fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-black:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-outline{ border:2px solid var(--black); color: var(--black); }
.btn-outline:hover{ background: var(--black); color:#fff; }
.btn .arrow{ transition: transform .25s; }
.btn-outline:hover .arrow{ transform: translateX(4px); }

.hazard-bar{
  position:absolute; left:0; right:0; bottom:0; height:22px;
  background: var(--hazard);
  border-top:2px solid var(--black);
}

/* ===== ZONEN ===== */
.zonen{ display:grid; grid-template-columns: repeat(3,1fr); min-height:76vh; }
.zone{
  position:relative; overflow:hidden;
  padding: 90px 46px 70px;
  display:flex; flex-direction:column; justify-content:center; gap:18px;
}
.zone-label{ font-size:11px; font-weight:700; opacity:.6; }
.zone h2{ font-family: var(--ff-display); text-transform:uppercase; font-size: clamp(28px, 3vw, 44px); line-height:1.06; }
.zone p{ font-size:15px; line-height:1.6; max-width:320px; opacity:.78; }
.zone-no{
  position:absolute; right:26px; bottom:22px; font-size:11px; font-weight:700;
  border:1.5px solid currentColor; padding:5px 10px; border-radius:4px; opacity:.55;
}

.zone-clean{
  background: radial-gradient(circle at 70% 18%, #ffffff, var(--lab) 70%);
  color: var(--black);
}
.zone-clean::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(118deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%);
}
.zone-street{
  background: radial-gradient(circle at 30% 20%, #26262a, var(--black) 72%);
  color:#fff;
}
.zone-tag{
  position:absolute; right:-40px; bottom:-60px; height: 82%; width:auto; opacity:.12;
  transform: rotate(8deg);
}
.zone-street::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(118deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%);
}
.zone-color{ background: var(--drip); color: var(--black); }
.zone-color p{ opacity:.85; }
.zone > *{ position:relative; z-index:2; }
.zone > .zone-tag{ position:absolute; z-index:1; }
.zone > .zone-no{ position:absolute; }

/* ===== STATEMENT ===== */
.statement{
  position:relative; background: var(--black); color:#fff; text-align:center;
  padding: 120px 24px 130px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:34px;
}
.chainlink{
  position:absolute; inset:0; opacity:.9; pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.055) 0 2px, transparent 2px 26px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
}
.statement > *{ position:relative; z-index:1; }
.statement-badge{ width:150px; filter: drop-shadow(0 18px 34px rgba(0,0,0,.7)); transform: rotate(-4deg); }

.outline-title{
  font-family: var(--ff-display); text-transform:uppercase;
  font-size: clamp(54px, 11vw, 150px); line-height:.95;
  display:flex; flex-wrap:wrap; gap:.18em; justify-content:center;
}
.outline-title span{
  -webkit-text-stroke: clamp(3px, .5vw, 7px) var(--magenta);
  paint-order: stroke fill;
  text-shadow: 6px 7px 0 rgba(0,0,0,.65);
}
.outline-title span:nth-child(1){ color: var(--green); transform: rotate(-3deg); }
.outline-title span:nth-child(2){ color: var(--gold); transform: rotate(2deg); }

.statement-text{ max-width:620px; font-size: clamp(16px, 1.7vw, 19px); line-height:1.65; color: var(--grey-light); }
.statement-text em{ font-style:normal; color:#fff; font-weight:700; background: linear-gradient(transparent 62%, rgba(207,42,158,.55) 62%); }

/* ===== SHOP: Specimen-Karten ===== */
.shop{
  position:relative; padding: 110px 24px 130px; background: var(--lab);
  background-image:
    linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px);
  background-size: 56px 56px;
}
.section-head{ text-align:center; margin-bottom:60px; }
.section-head .mono{ font-size:11px; font-weight:700; color: var(--grey); }
.section-head h2{ font-family: var(--ff-display); text-transform:uppercase; font-size: clamp(34px, 4.6vw, 58px); margin-top:8px; }
.section-head p{ color: var(--grey); margin-top:8px; font-size:15px; }

.product-grid{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.spec{
  position:relative; border-radius:16px; padding:16px;
  transition: transform .3s, box-shadow .3s;
}
.spec:hover{ transform: translateY(-6px); }
.spec-top{ display:flex; justify-content:space-between; align-items:center; font-size:10px; font-weight:700; margin-bottom:12px; opacity:.7; }
.barcode{
  width:62px; height:16px;
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 8px, currentColor 8px 11px, transparent 11px 13px);
}
.spec-media{
  position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.spec-media img{ height:72%; width:auto; position:relative; z-index:1; }
.spec h3{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.spec .price{ font-size:13px; opacity:.6; margin-top:6px; }

.spec-white{
  background: linear-gradient(165deg, #ffffff 0%, #eceef0 100%);
  color: var(--black);
  box-shadow: 0 16px 38px rgba(0,0,0,.14), inset 0 1px 0 #fff, 0 0 0 1px rgba(0,0,0,.07);
}
.spec-white .spec-media{ background: radial-gradient(circle at 35% 22%, #ffffff, #dfe2e5 80%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.spec-black{
  background: linear-gradient(165deg, #232326 0%, #0b0b0c 100%);
  color:#fff;
  box-shadow: 0 16px 38px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.spec-black .spec-media{ background: radial-gradient(circle at 35% 22%, #2d2d31, #0b0b0c 80%); }
.spec-hazard::before{
  content:""; position:absolute; left:0; right:0; top:0; height:10px; border-radius:16px 16px 0 0;
  background: var(--hazard);
}

.badge-soon{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:2;
  font-family: var(--ff-mono); font-size:9px; font-weight:700; letter-spacing:.16em; white-space:nowrap;
  padding:7px 12px; border-radius:999px; background: var(--gold); color: var(--black);
}

/* ===== LOOKBOOK TAPE ===== */
.lookbook{ background: var(--black); padding: 0; overflow:hidden; }
.hazard-marquee{
  background: var(--white); border-top:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1);
  padding: 18px 0; overflow:hidden;
}
.hazard-track{
  display:flex; align-items:center; gap:30px; width:max-content;
  font-family: var(--ff-display); font-size: clamp(22px, 3vw, 34px); text-transform:uppercase; color: var(--black);
  animation: tape 28s linear infinite; white-space:nowrap;
}
.hazard-track i{ font-style:normal; color: var(--magenta); }
.tape,.hazard-bar,.spec-hazard::before{ display:none; }

/* ===== FOOTER ===== */
.footer{ background: var(--black-2); color:#fff; padding: 90px 24px 32px; border-top: 1px solid rgba(255,255,255,.06); }
.footer-top{ text-align:center; margin-bottom:70px; }
.footer-word{ width:220px; margin:0 auto 18px; }
.footer-top p{ color: var(--grey); font-size:14px; }
.footer-grid{
  max-width:1100px; margin:0 auto; padding-bottom:60px;
  display:grid; grid-template-columns: repeat(4,1fr); gap:36px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-col h4{ font-family: var(--ff-mono); font-size:11px; text-transform:uppercase; letter-spacing:.16em; color: var(--gold); margin-bottom:18px; }
.footer-col a{ display:block; font-size:14px; color: var(--grey-light); margin-bottom:12px; transition: color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ max-width:1100px; margin:24px auto 0; display:flex; justify-content:space-between; font-size:11px; color: var(--grey); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px){
  .hero-meta{ display:none; }
}
@media (max-width: 980px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .zonen{ grid-template-columns:1fr; }
  .zone{ padding: 64px 28px 70px; min-height: 40vh; }
  .product-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  :root{ --nav-h: 58px; }
  .nav-inner{ padding: 0 16px; }
  .tag{ height: 40vh; }
  .tag-main{ -webkit-box-reflect: unset; }
  .sticker-badge{ left: 4vw; bottom: 9vh; width: 28vw; }
  .sticker-round{ right: 4vw; top: 0; width: 84px; height: 84px; font-size:8px; }
  .reg{ display:none; }
  .statement{ padding: 90px 20px 100px; }
  .product-grid{ gap:12px; }
  .spec{ padding:12px; }
  .footer-bottom{ flex-direction:column; gap:8px; text-align:center; }
}

/* ===== FARB-SCHALTER =====
   Standard: alles Schwarz/Weiß. Erst nach dem Switch (html.is-color) kommt Farbe. */
.tape, .nav, .hero, .zonen, .statement, .shop, .lookbook, .footer, .mobile-menu{
  filter: grayscale(1) contrast(1.04);
  transition: filter .7s ease;
}
html.is-color .tape, html.is-color .nav, html.is-color .hero, html.is-color .zonen,
html.is-color .statement, html.is-color .shop, html.is-color .lookbook,
html.is-color .footer, html.is-color .mobile-menu{
  filter: none;
}

.color-switch{
  position:fixed; right:20px; bottom:20px; z-index:900;
  display:flex; align-items:center; gap:12px;
  padding: 10px 14px 10px 16px; border-radius:999px; cursor:pointer;
  background: linear-gradient(180deg, #2b2b2f 0%, #0b0b0c 60%, #000 100%);
  color:#fff; border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3);
  font: inherit;
  transition: transform .25s, box-shadow .25s;
}
.color-switch:hover{ transform: translateY(-2px); }
.cs-label, .cs-hint{ font-size:10px; font-weight:700; letter-spacing:.16em; }
.cs-hint{ opacity:.55; }
.cs-track{
  position:relative; width:46px; height:26px; border-radius:999px;
  background: #3a3a3f; box-shadow: inset 0 2px 4px rgba(0,0,0,.6);
  transition: background .35s;
}
.cs-knob{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background: linear-gradient(180deg, #fff, #cfd1d4);
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 #fff;
  transition: transform .35s cubic-bezier(.65,0,.35,1);
}
.color-switch[aria-checked="true"] .cs-track{ background: var(--drip); }
.color-switch[aria-checked="true"] .cs-knob{ transform: translateX(20px); }
.color-switch[aria-checked="true"] .cs-hint{ opacity:1; background: var(--drip); -webkit-background-clip:text; background-clip:text; color:transparent; }

@media (max-width: 560px){
  .color-switch{ right:12px; bottom:12px; padding:8px 12px 8px 14px; gap:10px; }
}

/* Hero: nur die cleane Wordmark */
.hero-stage{ padding-bottom: 2vh; }
.hero-wordmark{
  width: min(82vw, 760px); height:auto; position:relative; z-index:2;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.16));
}
.hero-copy{ margin-top: 6vh; }
@media (max-width:560px){ .hero-wordmark{ -webkit-box-reflect: unset; } }

/* ===== Ein Branding: Wordmark + Chevron, clean ===== */
.spec-media img{ height:auto; width:68%; }
.zone-tag{ opacity:.08; height:auto; width:78%; right:-14%; bottom:-6%; transform:none; }
.chainlink{ display:none; }
.statement{ gap:28px; padding: 130px 24px 140px; }
.statement-chevron{ width:64px; opacity:.9; }
.clean-title{
  font-family: var(--ff-display); text-transform:uppercase; letter-spacing:-.02em;
  font-size: clamp(48px, 10vw, 132px); line-height:.95; color:#fff;
}
html.is-color .clean-title{ background: var(--drip); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hazard-track i{ color: var(--grey); }
html.is-color .hazard-track i{ color: var(--magenta); }

/* Slogan: Built not given. */
.hero-tagline{ font-size: clamp(30px, 4.6vw, 58px); letter-spacing:-.01em; line-height:1; }
.hero-sub{ margin-top:14px; font-size:11px; font-weight:600; color:#55565b; }
html.is-color .hero-tagline{ background: var(--drip); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer-slogan{ font-family: var(--ff-display); text-transform:uppercase; color:#fff !important; font-size:20px !important; margin-bottom:10px; }

/* Slogan als Handschrift-Asset (wie im Original-Branding) */
.hero-slogan{ margin:0; display:flex; justify-content:center; }
.hero-slogan img{ height: clamp(110px, 17vh, 170px); width:auto; transform: rotate(-4deg); transition: opacity .5s; }
.hero-slogan .slogan-col{ display:none; }
html.is-color .hero-slogan .slogan-bw{ display:none; }
html.is-color .hero-slogan .slogan-col{ display:block; }
.hero-sub{ margin-top:18px; }
.hero-copy{ margin-top: 3vh; }
.footer-slogan-img{ height:84px; width:auto; margin:0 auto 14px; transform: rotate(-3deg); }

/* ===== Streetwear: echte Teile, Größen, Limited ===== */
.spec-media-photo{ aspect-ratio: 4/5; padding:0; }
.spec-media-photo img{ width:100%; height:100%; object-fit:cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.spec:hover .spec-media-photo img{ transform: scale(1.06); }
.spec-white .spec-media-photo{ background:#e6e6e6; }
.spec-black .spec-media-photo{ background:#000; }
.spec-tag{
  font-size:9px; font-weight:700; letter-spacing:.14em; padding:4px 8px; border-radius:4px;
  background: currentColor; position:relative;
}
.spec-tag{ color: var(--black); background: var(--black); }
.spec-white .spec-tag{ background: var(--black); color:#fff; }
.spec-black .spec-tag{ background:#fff; color: var(--black); }
html.is-color .spec-tag{ background: var(--magenta); color:#fff; }
.spec h3{ font-size:15px; font-weight:800; letter-spacing:.01em; }
.spec-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.spec-row .price{ margin:0; font-size:14px; opacity:.85; font-weight:600; }
.sizes{ display:flex; gap:4px; }
.sizes span{
  font-size:9px; font-weight:700; letter-spacing:.04em; min-width:22px; height:22px; padding:0 4px;
  display:flex; align-items:center; justify-content:center; border:1px solid currentColor; border-radius:4px; opacity:.55;
  transition: opacity .2s, background .2s, color .2s;
}
.sizes span:hover{ opacity:1; background: currentColor; }
.spec-white .sizes span:hover{ color:#fff; background:#0b0b0c; border-color:#0b0b0c; }
.spec-black .sizes span:hover{ color:#0b0b0c; background:#fff; border-color:#fff; }

.fact-strip{
  max-width:1280px; margin: 38px auto 0; padding: 16px 0;
  display:flex; flex-wrap:wrap; justify-content:center; gap: 10px 34px;
  border-top:1px solid rgba(0,0,0,.14); border-bottom:1px solid rgba(0,0,0,.14);
  font-size:11px; font-weight:700; letter-spacing:.16em; color:#2a2b2e;
}
.fact-strip span::before{ content:"✕"; margin-right:12px; opacity:.4; }
.fact-strip span:first-child::before{ display:none; }

@media (max-width: 560px){
  .sizes span:nth-child(n+4){ display:none; }
  .spec h3{ font-size:12px; }
}

/* ===== Coming Soon: Shop noch nicht offen ===== */
.spec-media-photo .badge-soon{ top:12px; bottom:auto; left:12px; transform:none; z-index:3; }
.spec-media-photo img{ filter: saturate(.9); }
.spec-row .price{ font-size:11px; font-weight:700; letter-spacing:.16em; opacity:.6; }
.spec{ cursor:default; }

/* ===== Print-Partner ===== */
.partners{ background: var(--black); color:#fff; padding: 120px 24px 130px; }
.partners-head{ max-width:720px; margin:0 auto 60px; text-align:center; }
.partners-head .mono{ font-size:11px; font-weight:700; color: var(--grey-light); }
.partners-head h2{ font-family: var(--ff-display); text-transform:uppercase; font-size: clamp(38px, 6vw, 80px); line-height:1; margin:14px 0 18px; }
html.is-color .partners-head h2{ background: var(--drip); -webkit-background-clip:text; background-clip:text; color:transparent; }
.partners-head p{ color: var(--grey-light); font-size: clamp(15px,1.5vw,18px); line-height:1.65; }
.partner-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.partner-card{
  padding:28px 26px 30px; border-radius:16px;
  background: linear-gradient(165deg, #232326 0%, #0f0f10 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow: 0 16px 38px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .3s;
}
.partner-card:hover{ transform: translateY(-5px); }
.partner-tag{ font-size:10px; font-weight:700; letter-spacing:.16em; padding:5px 9px; border-radius:4px; background:#fff; color: var(--black); display:inline-block; }
html.is-color .partner-tag{ background: var(--gold); }
.partner-card h3{ font-family: var(--ff-display); text-transform:uppercase; font-size:30px; margin:20px 0 12px; }
.partner-card p{ color: var(--grey-light); font-size:15px; line-height:1.6; }
@media (max-width: 980px){ .partner-grid{ grid-template-columns:1fr; } }

/* ===== POD-Hinweis kompakt ===== */
.pod-strip{ background:#f4f5f6; color:#0b0b0c; text-align:center; padding:34px 20px; border-block:1px solid #d8dadc; }
.pod-strip .mono{ font-size:12px; letter-spacing:.2em; margin:0 0 8px; opacity:.6; }
.pod-line{ max-width:640px; margin:0 auto; font-size:16px; line-height:1.5; }
.pod-line span{ font-weight:700; }

/* ===== Lookbook-Galerie ===== */
.look-head{ padding:70px 24px 28px; max-width:1280px; margin:0 auto; color:#fff; }
.look-head .mono{ font-size:12px; letter-spacing:.2em; opacity:.6; }
.look-head h2{ font-family:'Archivo Black',Arial,sans-serif; font-size:clamp(40px,7vw,84px); margin:6px 0 0; text-transform:uppercase; }
.look-grid{ max-width:1280px; margin:0 auto; padding:0 24px 60px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.look{ margin:0; overflow:hidden; background:#000; aspect-ratio:2/3; }
.look img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.look:hover img{ transform:scale(1.03); }
.look-wide{ grid-column:span 2; aspect-ratio:auto; }
.look-wide img{ object-position:center 25%; }
@media (max-width:760px){ .look-grid{ grid-template-columns:repeat(2,1fr); padding:0 12px 40px; gap:6px; } .look-head{padding:50px 16px 20px;} }
.pod-strip{ filter:grayscale(1); } html.is-color .pod-strip{ filter:none; }
.look-wide{ grid-column:auto; aspect-ratio:2/3; }