/* ============================================================
   HERO (.web-hero) — used by Team page; Verein/News/Sponsoring
   use their own page-hero inline variants (siehe components/page-hero.css)
   ============================================================ */
.web-hero {
  position: relative; height: 820px;
  background: var(--ink); color: white; overflow: hidden;
}
.web-hero .photo-strip {
  position: absolute; right: 0; top: 0; bottom: 0; width: 60%;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
}
.web-hero .photo-strip .pose {
  background-size: cover; background-position: center 12%;
  background-color: var(--graphite);
  position: relative;
}
.web-hero .photo-strip .pose::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,14,18,0.05) 0%, rgba(14,14,18,0.65) 100%);
}
.web-hero .photo-strip .pose:nth-child(1)::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(14,14,18,0) 30%);
  z-index: 2;
}
.web-hero .photo-strip .pose:nth-child(2) { background-position: center 8%; }
.web-hero .photo-strip .pose:nth-child(3) { background-position: center 10%; }
.web-hero .halftone-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1.2px, transparent 1.6px);
  background-size: 20px 20px;
}
.web-hero .text {
  position: absolute; left: 56px; top: 84px; z-index: 4; max-width: 720px;
}
.web-hero .text .eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.web-hero .text h1 {
  font-family: var(--display); font-weight: 900; font-style: normal;
  text-transform: uppercase; font-size: 148px; line-height: 0.86; margin: 18px 0 0;
  letter-spacing: -0.005em;
}
.web-hero .text h1 .r { color: var(--red); }
.web-hero .text p {
  font-size: 17px; line-height: 1.55; max-width: 480px; margin: 26px 0 0;
  color: rgba(255,255,255,0.85);
}
.web-hero .stats {
  position: absolute; left: 56px; bottom: 56px; z-index: 4;
  display: flex; gap: 36px;
}
.web-hero .stats .stat {
  padding-right: 36px; border-right: 1px solid rgba(255,255,255,0.18);
}
.web-hero .stats .stat:last-child { border-right: none; padding-right: 0; }
.web-hero .stats .stat .v {
  font-family: var(--display); font-weight: 900; font-style: normal; font-size: 64px; line-height: 0.9;
  color: var(--red); letter-spacing: -0.01em;
}
.web-hero .stats .stat .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-top: 6px;
}

@media (max-width: 1024px) {
  .web h1 { font-size: clamp(34px, 8vw, 96px) !important; line-height: 0.95 !important; }
  .web .giant-number, .web .giant { font-size: clamp(140px, 34vw, 340px) !important; }

  .web-hero { height: auto; display: flex; flex-direction: column; }
  .web-hero .halftone-bg { display: none; }
  .web-hero .text {
    position: relative; left: auto; top: auto; max-width: none;
    padding: 44px 22px 4px; order: 1;
  }
  .web-hero .text h1 { font-size: 84px; }
  .web-hero .photo-strip {
    position: relative; width: 100%; height: 320px; order: 2;
  }
  .web-hero .stats {
    position: relative; left: auto; bottom: auto;
    padding: 26px 22px 40px; gap: 24px; flex-wrap: wrap; order: 3;
  }
}
@media (max-width: 640px) {
  .web-hero .text h1 { font-size: 56px; }
  .web-hero .text p { font-size: 15px; }
  .web-hero .photo-strip { height: 240px; }
  .web-hero .photo-strip { grid-template-columns: 1fr 1fr 1fr; }
  .web-hero .stats { gap: 18px; }
  .web-hero .stats .stat { padding-right: 18px; }
  .web-hero .stats .stat .v { font-size: 44px; }
}
@media (max-width: 400px) {
  .web-hero .text h1 { font-size: 46px; }
}