/* HERO */
.hero{
  position:relative;
  background:
    linear-gradient(180deg, rgba(25,25,27,0.55) 0%, rgba(25,25,27,0.78) 55%, var(--graphite) 100%),
    url('https://www.linsen-liste.de/images/LL-Banner.jpg') center / cover no-repeat;
  color:var(--paper);
  padding:88px 0 96px;
  border-bottom:1px solid var(--graphite-line);
}
.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--brass);
  display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--brass);}
.hero h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(44px, 7vw, 84px);
  line-height:0.96; letter-spacing:-0.01em;
  text-transform:uppercase;
  max-width:820px;
}
.hero h1 span{color:var(--red);}
.hero p{
  font-size:17px; line-height:1.6; color:#c9c8c3;
  max-width:520px; margin-top:26px;
}

/* SECTION LABEL */
.section-label{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:40px;
}
.section-label h2{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(28px, 3.6vw, 38px); letter-spacing:-0.01em;
}
.section-label .count{font-family:var(--mono); font-size:13px; color:var(--steel);}
.section-label.on-dark .count{color:var(--steel);}
.section-label.on-light .count{color:var(--steel-light);}

/* SCHNAPPER OF THE DAY */
.deal-strip{background:var(--graphite); padding:20px 0 28px;}
.deal-card{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  background:linear-gradient(135deg, #2a2115 0%, #1f1a12 100%);
  border:1px solid var(--brass); padding:22px 28px; position:relative; overflow:hidden;
}
.deal-ribbon{
  position:absolute; top:0; left:0;
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--brass); color:var(--graphite); padding:5px 14px 5px 12px;
  clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
}
.deal-thumb{
  width:84px; height:84px; flex-shrink:0; background:#fff; border:1px solid var(--graphite-line);
  display:flex; align-items:center; justify-content:center; margin-top:14px;
}
.deal-thumb img{max-width:80%; max-height:80%; object-fit:contain;}
.deal-info{flex:1 1 260px; min-width:220px; margin-top:14px;}
.deal-info .cat{font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--brass); margin-bottom:5px;}
.deal-info h3{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:20px; color:var(--paper); line-height:1.15; margin-bottom:6px;}
.deal-info p{font-size:13.5px; color:#c9c4b6; line-height:1.5; max-width:440px;}
.deal-price{display:flex; flex-direction:column; align-items:flex-end; margin-top:14px; flex-shrink:0;}
.deal-price .old{font-family:var(--mono); font-size:13px; color:#8a8578; text-decoration:line-through;}
.deal-price .new{font-family:var(--display); font-weight:700; font-size:28px; color:var(--brass); line-height:1;}
.deal-price .save{font-family:var(--mono); font-size:11px; color:#8fae7c; margin-top:2px;}
.deal-card .cta-btn{margin-top:14px; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; background:var(--brass); color:var(--graphite); font-weight:600; padding:10px 18px; white-space:nowrap; transition:background .15s ease;}
.deal-card .cta-btn:hover{background:#c3a06e;}

/* LISTS SECTION */
.lists{background:var(--graphite); color:var(--paper); padding:48px 0 96px;}
.list-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.list-card{
  position:relative;
  background:var(--graphite-2);
  border:1px solid var(--graphite-line);
  padding:40px 36px 36px;
  overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.list-card:hover{border-color:var(--card-accent, var(--red)); transform:translateY(-3px);}
.list-card.lmount{--card-accent:var(--red);}
.list-card.mft{--card-accent:var(--brass);}
.iris{
  position:absolute; top:-40px; right:-40px; width:170px; height:170px;
  opacity:0.5; transition:transform .6s ease;
}
.list-card:hover .iris{transform:rotate(24deg);}
.card-mount-tag{
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em;
  color:var(--card-accent); text-transform:uppercase; margin-bottom:18px;
  display:block;
}
.list-card h3{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:40px; line-height:0.98; margin-bottom:16px;
}
.list-card .desc{font-size:14.5px; color:#b9b8b3; line-height:1.6; max-width:340px; margin-bottom:26px;}
.compat{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px;}
.compat span{
  font-family:var(--mono); font-size:11.5px; color:var(--paper);
  border:1px solid var(--graphite-line); padding:5px 10px;
}
.card-cta{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--paper); border-bottom:1px solid var(--card-accent); padding-bottom:4px;
}
.card-cta .arrow{color:var(--card-accent); transition:transform .2s ease;}
.list-card:hover .card-cta .arrow{transform:translateX(5px);}
.badge-soon{
  position:absolute; top:32px; right:32px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--brass); color:var(--graphite); padding:4px 9px;
}

/* DIVIDER */
.divider{background:var(--paper); display:flex; align-items:center; justify-content:center; padding:34px 0;}
.divider svg{width:30px; height:30px; opacity:0.35;}

/* ARTICLES SECTION */
.articles{background:var(--paper); padding:16px 0 100px;}
.article-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
.article-card{
  background:var(--paper-2);
  border:1px solid #e2ded2;
  display:flex; flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.article-card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(25,25,27,0.08);}
.article-thumb{aspect-ratio:4/3; overflow:hidden; background:#e6e2d5;}
.article-thumb img{width:100%; height:100%; object-fit:cover;}
.article-body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.article-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--red);
}
.article-card h4{
  font-family:var(--display); font-weight:600; font-size:19px; line-height:1.15;
  text-transform:uppercase;
}
.article-card p{font-size:13.5px; line-height:1.55; color:var(--steel-light); flex:1;}
.article-link{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--ink); border-top:1px solid #e2ded2; padding-top:12px; margin-top:6px;
  display:flex; align-items:center; justify-content:space-between;
}
.article-card:hover .article-link .arrow{transform:translateX(4px);}
.article-link .arrow{color:var(--red); transition:transform .2s ease;}

@media (max-width:860px){
  .list-grid{grid-template-columns:1fr;}
  .article-grid{grid-template-columns:1fr 1fr;}
  .hero{padding:64px 0 72px;}
  .deal-card{padding-top:34px;}
  .deal-price{align-items:flex-start; flex-direction:row; gap:10px; align-items:baseline;}
}
@media (max-width:560px){
  .article-grid{grid-template-columns:1fr;}
  .list-card h3{font-size:32px;}
}