@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/archivo-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/archivo-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/archivo-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url('fonts/archivo-latin-900-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

  :root{
    --black:#0d0d0d;
    --white:#f5f2ec;
    --paper:#ffffff;
    --line: rgba(13,13,13,.14);
    --font-display:'Archivo', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
    --gap: clamp(1.25rem, 3vw, 2.5rem);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--white);
    color:var(--black);
    font-family:var(--font-display);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{max-width:100%;display:block;}
  a{color:inherit;}
  .wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(1.25rem,4vw,3rem);}

  .kicker{
    font-family:var(--font-mono);
    font-weight:500;
    font-size:.72rem;
    letter-spacing:.28em;
    text-transform:uppercase;
  }

  /* NAV */
  header.nav{
    position:sticky; top:0; z-index:20;
    background:var(--white);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding-block: .9rem;
  }
  .nav-mark{display:flex;align-items:center;gap:.55rem;}
  .nav-mark svg{width:26px;height:auto;color:var(--black);}
  .nav-mark span{font-family:var(--font-mono);font-weight:600;letter-spacing:.18em;font-size:.78rem;text-transform:uppercase;}
  nav.nav-links a{
    font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em;
    text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--black);
    padding-bottom:2px;
  }

  /* HERO */
  .hero{padding-block: clamp(2.5rem,7vw,5.5rem) clamp(2rem,6vw,4rem);}
  .hero .kicker{margin-bottom: clamp(1rem,3vw,2rem);}
  .hero .tag{
    width:100%;
    color:var(--black);
    margin-inline:-.4rem;
  }
  .hero-sub{
    margin-top:clamp(1.25rem,3vw,2rem);
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
    max-width:56rem;
  }
  .hero-sub p{
    font-size:clamp(1.15rem,2.6vw,1.65rem);
    font-weight:500;
    margin:0;
  }
  .hero-formula{
    font-family:var(--font-mono);
    font-size:.85rem;
    letter-spacing:.02em;
    color:rgba(13,13,13,.62);
    margin:0;
  }

  /* STORY (invers) */
  .story{
    background:var(--black);
    color:var(--white);
    padding-block:clamp(3rem,8vw,6rem);
  }
  .story .kicker{color:rgba(245,242,236,.55);}
  .story blockquote{
    margin: clamp(1.5rem,4vw,2.5rem) 0 0;
    font-size:clamp(1.4rem,3.4vw,2.35rem);
    font-weight:700;
    line-height:1.28;
    max-width:44rem;
  }
  .story .origin{
    margin-top:clamp(1.75rem,4vw,2.5rem);
    padding-top:clamp(1.25rem,3vw,1.75rem);
    border-top:1px solid rgba(245,242,236,.25);
    font-family:var(--font-mono);
    font-size:.85rem;
    color:rgba(245,242,236,.75);
    max-width:34rem;
  }

  /* MOCKUPS */
  .mockups{padding-block:clamp(3rem,8vw,6rem);}
  .section-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
    flex-wrap:wrap;
    margin-bottom:clamp(2rem,5vw,3rem);
  }
  .section-head h2{
    font-size:clamp(1.6rem,4vw,2.4rem);
    margin:0; font-weight:900; letter-spacing:-.01em;
  }
  .section-head p{
    font-family:var(--font-mono); font-size:.8rem; max-width:22rem; margin:0;
    color:rgba(13,13,13,.6);
  }
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:var(--gap);
  }
  .card{
    border:1px solid var(--line);
    display:flex; flex-direction:column;
  }
  .card-visual{
    aspect-ratio:4/5;
    display:flex; align-items:center; justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .card-visual.on-light{background:var(--paper);}
  .card-visual.on-dark{background:var(--black);}
  .status{
    position:absolute; top:.9rem; left:.9rem;
    font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
    padding:.3em .6em; border:1px solid currentColor;
  }
  .card-visual.on-light .status{color:var(--black);}
  .card-visual.on-dark .status{color:var(--white);}

  /* Shirt mock: weisses Shirt, auf dunkler Karte damit es abhebt */
  .shirt-visual{position:relative; width:54%;}
  .shirt-visual svg.shirt-outline{width:100%;}
  .shirt-outline path{fill:var(--paper); stroke:var(--black); stroke-width:3;}
  .shirt-lockup-wrap{
    position:absolute; left:50%; top:23%; transform:translate(-50%,0);
    width:52%; color:var(--black);
  }

  /* Bag mock: schwarzer Beutel, auf heller Karte damit er abhebt */
  .bag-visual{position:relative; width:46%; display:flex; flex-direction:column;}
  .bag-handle{
    width:56%; height:3rem; margin:0 auto;
    border:.5rem solid var(--black); border-bottom:none;
    border-radius:60px 60px 0 0;
    flex-shrink:0;
  }
  .bag-face{
    position:relative; background:var(--black); aspect-ratio:38/42;
  }
  .bag-lockup-wrap{
    position:absolute; left:50%; bottom:20%; transform:translate(-50%,0);
    width:68%; color:var(--white);
  }

  .card-info{padding:1.25rem 1.4rem 1.5rem;}
  .card-info h3{margin:0 0 .4rem; font-size:1.05rem; font-weight:700;}
  .card-info p{margin:0; font-size:.92rem; color:rgba(13,13,13,.72);}

  .mockups-note{
    margin-top:2rem; font-family:var(--font-mono); font-size:.78rem;
    color:rgba(13,13,13,.72); max-width:34rem;
  }

  /* CONTACT */
  .contact{
    background:var(--black); color:var(--white);
    padding-block:clamp(3rem,8vw,6rem);
  }
  .contact .kicker{color:rgba(245,242,236,.55);}
  .contact h2{
    font-size:clamp(1.8rem,5vw,3rem); font-weight:900; margin:.5rem 0 1rem; letter-spacing:-.01em;
  }
  .contact-lead{max-width:34rem; font-size:1.05rem; color:rgba(245,242,236,.85); margin-bottom:2.5rem;}
  form.contact-form{
    display:grid; gap:1.1rem; max-width:34rem;
  }
  .field{display:flex; flex-direction:column; gap:.4rem;}
  .field label{
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:rgba(245,242,236,.65);
  }
  .field input, .field textarea{
    background:transparent; border:none; border-bottom:1px solid rgba(245,242,236,.4);
    color:var(--white); font-family:var(--font-display); font-size:1rem; padding:.55rem 0;
    resize:vertical;
  }
  .field input:focus, .field textarea:focus{
    outline:none; border-bottom-color:var(--white); border-bottom-width:2px;
  }
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .submit{
    justify-self:start; margin-top:.5rem;
    background:var(--white); color:var(--black); border:none;
    font-family:var(--font-mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
    padding:.85em 1.8em; cursor:pointer;
  }
  .submit:hover{background:rgba(245,242,236,.85);}
  .form-hint{
    font-family:var(--font-mono); font-size:.7rem; line-height:1.6;
    color:rgba(245,242,236,.6); margin-top:.75rem; max-width:26rem;
  }
  .form-hint a{color:rgba(245,242,236,.85); text-decoration-color:rgba(245,242,236,.4);}

  /* FOOTER */
  footer{padding-block:2.25rem;}
  .footer-inner{
    display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  }
  .footer-mark{display:flex;align-items:center;gap:.5rem;}
  .footer-mark svg{width:20px;color:var(--black);}
  .footer-mark span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;}
  .footer-links{display:flex; gap:1.25rem; flex-wrap:wrap;}
  .footer-links a{
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-decoration:none;
    color:rgba(13,13,13,.65);
  }

/* Legal pages (Impressum / Datenschutz) */
.legal{padding-block:clamp(2.5rem,6vw,4rem) clamp(3rem,7vw,5rem);}
.legal h1.legal-title{
  font-size:clamp(1.8rem,4.5vw,2.6rem); font-weight:900; letter-spacing:-.01em;
  margin:0 0 2rem;
}
.legal-body{max-width:38rem;}
.legal-body h2{
  font-size:1.15rem; font-weight:700; margin:2.25rem 0 .75rem;
}
.legal-body h2:first-child{margin-top:0;}
.legal-body h3{font-size:1rem; font-weight:700; margin:1.5rem 0 .5rem;}
.legal-body p, .legal-body address{
  font-size:.95rem; line-height:1.65; color:rgba(13,13,13,.82); margin:0 0 1rem;
  font-style:normal;
}
.legal-body ul{margin:0 0 1rem; padding-left:1.2rem;}
.legal-body li{font-size:.95rem; line-height:1.65; color:rgba(13,13,13,.82); margin-bottom:.4rem;}
.legal-body a{text-decoration-color:rgba(13,13,13,.35);}
.legal-note{
  font-family:var(--font-mono); font-size:.72rem; color:rgba(13,13,13,.55);
  margin-bottom:2.5rem; max-width:38rem; padding:.9rem 1rem; border:1px solid var(--line);
}