:root{
  --bg:#0E060B;
  --surface:#1A1A1F;
  --surface2:#2A2D33;
  --line:#403E41;

  --text:#D2CFCE;
  --muted:#8D837D;

  --accent:#DB1021;
  --accentDeep:#461216;
  --accentSmoke:#2C181B;
  --accentHot:#F1080D;

  --shadow: 0 16px 46px rgba(0,0,0,.45);
  --radius: 18px;
  --max: 980px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(219,16,33,.10), transparent 60%),
    radial-gradient(900px 520px at 88% 10%, rgba(255,8,13,.06), transparent 62%),
    radial-gradient(1100px 700px at 50% 120%, rgba(42,45,51,.30), transparent 65%),
    var(--bg);
  color:var(--text);
  line-height:1.55;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}

:focus-visible{
  outline: 2px solid rgba(219,16,33,.75);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Base links */
a{color:inherit}

/* Fließtext-Links in main: sichtbar als Link */
main a:not(.btn):not(.brand):not(.menu a):not(.sigchip){
  color: rgba(219,16,33,.95);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
main a:not(.btn):not(.brand):not(.menu a):not(.sigchip):hover{
  color: rgba(255,8,13,.95);
}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(14,6,11,.78);
  border-bottom: 1px solid rgba(64,62,65,.45);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  min-width: 0;
}
.logo{
  width:34px; height:34px; border-radius:12px;
  background: linear-gradient(135deg, var(--accent), rgba(255,8,13,.55));
  box-shadow: 0 14px 34px rgba(219,16,33,.22);
}
.brand strong{letter-spacing:.3px}
.brand span{
  color:var(--muted);
  font-size:.92rem;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 52vw;
}

.menu{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.menu a{
  text-decoration:none;
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid transparent;
  color:var(--muted);
}
.menu a[aria-current="page"]{
  color:var(--text);
  background: rgba(42,45,51,.55);
  border-color: rgba(64,62,65,.55);
}
.menu a:hover{
  color:var(--text);
  background: rgba(42,45,51,.35);
  border-color: rgba(64,62,65,.40);
}

.navbtn{
  display:none;
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid rgba(64,62,65,.65);
  background: rgba(42,45,51,.22);
  color: var(--text);
  align-items:center; justify-content:center;
  cursor:pointer;
}
.navbtn:active{transform: translateY(1px)}
.navicon{width:18px; height:12px; position:relative; display:block}
.navicon::before,.navicon::after,.navicon span{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; border-radius:2px;
  background: rgba(210,207,206,.9);
}
.navicon::before{top:0}
.navicon span{top:5px}
.navicon::after{bottom:0}

main{padding:28px 0 60px}

.hero{
  border:1px solid rgba(64,62,65,.55);
  background: linear-gradient(180deg, rgba(26,26,31,.80), rgba(26,26,31,.62));
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.9;
  background:
    linear-gradient(135deg,
      transparent 0 58%,
      rgba(219,16,33,.10) 58% 59.2%,
      transparent 59.2% 100%),
    linear-gradient(155deg,
      transparent 0 70%,
      rgba(70,18,22,.10) 70% 71.1%,
      transparent 71.1% 100%),
    radial-gradient(closest-side at 78% 18%, rgba(219,16,33,.10), transparent 72%),
    radial-gradient(closest-side at 64% 42%, rgba(70,18,22,.08), transparent 74%);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    radial-gradient(circle at 72% 18%, rgba(219,16,33,.40) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 26%, rgba(219,16,33,.25) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 34%, rgba(70,18,22,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 69% 40%, rgba(219,16,33,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 52%, rgba(219,16,33,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 30%, rgba(255,8,13,.20) 0 1px, transparent 2px),
    linear-gradient(12deg, transparent 0 49.5%, rgba(210,207,206,.10) 49.5% 49.7%, transparent 49.7% 100%),
    linear-gradient(-8deg, transparent 0 63.2%, rgba(210,207,206,.08) 63.2% 63.35%, transparent 63.35% 100%),
    linear-gradient(18deg, transparent 0 78.6%, rgba(210,207,206,.07) 78.6% 78.75%, transparent 78.75% 100%);
}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.9rem;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(64,62,65,.70);
  background: rgba(42,45,51,.28);
  color: var(--muted);
}
.badge i{
  width:10px; height:10px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(219,16,33,.14);
}

h1{
  margin:14px 0 10px;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height:1.15
}
.lead{
  color:var(--muted);
  font-size: 1.05rem;
  max-width: 70ch
}

.cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius: 14px;
  border:1px solid rgba(64,62,65,.65);
  text-decoration:none;
  color:var(--text);
  background: rgba(42,45,51,.22);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn.primary{
  border-color: rgba(219,16,33,.62);
  background: linear-gradient(180deg, rgba(219,16,33,.20), rgba(70,18,22,.18));
  box-shadow: 0 12px 26px rgba(219,16,33,.12);
}
.btn:hover{transform: translateY(-1px); border-color: rgba(219,16,33,.55)}
.btn:active{transform: translateY(0px)}

/* Signature */
.signature{
  margin-top:14px;
  border:1px solid rgba(64,62,65,.55);
  border-radius: var(--radius);
  background: rgba(26,26,31,.52);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.sigline{
  height:10px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(219,16,33,.55) 18%,
      rgba(219,16,33,.12) 48%,
      rgba(255,8,13,.22) 62%,
      transparent 100%);
  opacity:.75;
}
.sigrow{display:flex; gap:10px; padding:12px; flex-wrap:wrap}
.sigchip{
  flex: 1 1 220px;
  border:1px solid rgba(64,62,65,.45);
  border-radius: 16px;
  background: rgba(42,45,51,.14);
  padding:10px 12px;
  position:relative;
  overflow:hidden;
}
.sigk{
  display:block;
  font-size:.72rem;
  letter-spacing:.18em;
  color: rgba(210,207,206,.75);
}
.sigv{
  display:block;
  margin-top:2px;
  color: var(--muted);
}
.sigchip.is-link{
  text-decoration:none;
  cursor:pointer;
  border-color: rgba(219,16,33,.35);
  background: rgba(42,45,51,.18);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.sigchip.is-link:hover{
  transform: translateY(-1px);
  border-color: rgba(219,16,33,.55);
  box-shadow: 0 14px 34px rgba(219,16,33,.10);
  background: rgba(42,45,51,.22);
}

/* Sections */
.section{margin-top:22px}
.section h2{font-size:1.25rem; margin:0 0 10px}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.muted{color:var(--muted)}
.hr{height:1px; background: rgba(64,62,65,.50); margin:22px 0}

.notice{
  border-left: 4px solid rgba(219,16,33,.70);
  background: rgba(70,18,22,.14);
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--muted);
  border:1px solid rgba(64,62,65,.45);
}

/* Grid cards */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:18px;
}
.card{
  grid-column: span 4;
  border-radius: var(--radius);
  border:1px solid rgba(64,62,65,.55);
  background: rgba(26,26,31,.72);
  box-shadow: var(--shadow);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  top:-120px; right:-160px;
  width:420px; height:320px;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(closest-side at 45% 55%, rgba(219,16,33,.07), transparent 74%),
    radial-gradient(closest-side at 62% 40%, rgba(70,18,22,.06), transparent 76%),
    linear-gradient(135deg, transparent 0 66%, rgba(219,16,33,.06) 66% 67%, transparent 67% 100%);
}
.card h3{margin:0 0 6px; font-size:1.05rem}
.card p{margin:0; color:var(--muted)}
@media (max-width: 860px){ .card{grid-column: span 6} }
@media (max-width: 560px){ .card{grid-column: span 12} }

/* Products */
.products{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}

.productcard{
  grid-column: span 4;
  border-radius: var(--radius);
  border:1px solid rgba(64,62,65,.55);
  background: rgba(26,26,31,.72);
  box-shadow: var(--shadow);
  padding:16px;
  position:relative;
  overflow:hidden;
}

.productcard:hover{
  border-color: rgba(219,16,33,.45);
  box-shadow: 0 18px 52px rgba(219,16,33,.07), var(--shadow);
}

.thumb{
  height:120px;
  border-radius: 16px;
  border:1px solid rgba(64,62,65,.55);
  background:
    radial-gradient(closest-side at 30% 30%, rgba(219,16,33,.10), transparent 70%),
    radial-gradient(closest-side at 70% 60%, rgba(70,18,22,.10), transparent 72%),
    linear-gradient(180deg, rgba(42,45,51,.35), rgba(26,26,31,.35));
  margin-bottom:12px;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 10px;
}

.thumblabel{
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(210,207,206,.72);
  background: rgba(14,6,11,.40);
  border: 1px solid rgba(64,62,65,.55);
  border-radius: 999px;
  padding: 6px 10px;
}

.productcard .meta{
  display:flex; gap:10px; flex-wrap:wrap;
  color:var(--muted); font-size:.95rem;
  margin-bottom:8px;
}
.price{color:var(--text); font-weight:700}
.kicker{color:var(--muted); margin:8px 0 0}

.bullets{
  margin:10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.bullets li{margin:6px 0}

.productcard .actions{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:12px
}
.productcard .actions .btn{flex: 1 1 auto; text-align:center}

@media (max-width: 860px){
  .productcard{grid-column: span 6}
}
@media (max-width: 560px){
  .productcard{grid-column: span 12}
}

/* Footer */
footer{
  border-top: 1px solid rgba(64,62,65,.55);
  padding: 18px 0 28px;
  color: var(--muted);
}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--text)}
.foot{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap}
.small{font-size:.92rem}

/* Mobile */
@media (max-width: 560px){
  .wrap{padding:0 14px}
  .nav{padding:10px 0}
  .brand span{max-width: 62vw}
  main{padding:18px 0 46px}
  .hero{padding:18px}
  .lead{font-size:1.0rem}
  .cta{flex-direction:column}
  .btn{width:100%}

  .navbtn{display:inline-flex}
  .menu{
    display:none;
    position:absolute;
    top:64px;
    left:14px;
    right:14px;
    padding:10px;
    border-radius: 18px;
    border:1px solid rgba(64,62,65,.70);
    background: rgba(26,26,31,.92);
    box-shadow: var(--shadow);
    flex-direction:column;
    gap:6px;
  }
  header .wrap.nav{position:relative}
  .menu a{
    padding:12px 12px;
    border-radius: 14px;
    border:1px solid rgba(64,62,65,.45);
    background: rgba(42,45,51,.18);
  }
  .menu[data-open="1"]{display:flex}

  .sigrow{padding:10px}
  .sigchip{flex-basis: 100%}
  .sigchip.is-link::before{
    content:"›";
    position:absolute;
    top:10px;
    right:12px;
    color: rgba(210,207,206,.75);
    font-size: 1.15rem;
  }
}
/* Werkstatt-Feed (Reel) */
.reelgrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

@media (max-width: 860px){
  .reelgrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

.reelitem{
  display:block;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}

.reelitem img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

@media (max-width: 520px){
  .reelitem img{ height:180px; }
}

/* Werkstatt-Feed (Slider / Reel) */
.reelslider{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  padding:14px;
  overflow:hidden;
}

.reeltrack{
  display:flex;
  gap:14px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  outline:none;
}
.reeltrack::-webkit-scrollbar{ display:none; }

.reelslide{
  scroll-snap-align:start;
  display:block;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
  flex:0 0 calc(33.333% - 10px);
}

.reelslide img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
  transform:scale(1.01);
  transition:transform .25s ease, filter .25s ease;
}
.reelslide:hover img{
  transform:scale(1.04);
  filter:contrast(1.05);
}

@media (max-width: 860px){
  .reelslide{ flex-basis:calc(50% - 7px); }
  .reelslide img{ height:220px; }
}
@media (max-width: 520px){
  .reelslide{ flex-basis:86%; }
  .reelslide img{ height:240px; }
}

.reelbtn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.45);
  color:rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:2;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.reelbtn:hover{ background:rgba(0,0,0,.60); }
.reelbtn.prev{ left:10px; }
.reelbtn.next{ right:10px; }

@media (max-width: 520px){
  .reelbtn{ display:none; } /* Mobile: wischen statt Buttons */
}