/* ══════════════════════════════════════════════════════════
   HERO — Full-viewport landing section with match widgets
   index.html specific
══════════════════════════════════════════════════════════ */

/* ── Full height (nav is fixed so no offset needed) ── */
.hero {
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  overflow:hidden;
  justify-content:flex-end;
}

/* Red CI vertical bar — signature left-edge element with heartbeat shimmer */
.hero-vbar {
  position:absolute; left:0; top:0; bottom:0; width:.375rem;
  background:var(--red); z-index:10;
  overflow:hidden;
}
/* Shimmer streak that climbs the bar — the visual "heartbeat" */
.hero-vbar::after {
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:40%;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(255,255,255,.38) 50%,
    transparent 100%
  );
  transform:translateY(250%);
  animation:vbar-shimmer 5.5s ease-in-out infinite 2s;
  will-change:transform;
}

@keyframes vbar-shimmer {
  0%    { transform:translateY(250%); opacity:0; }
  8%    { opacity:1; }
  88%   { transform:translateY(-100%); opacity:1; }
  100%  { transform:translateY(-100%); opacity:0; }
}

/* Photo background */
.hero-photo {
  position:absolute; inset:0;
  background-size: cover;
  background-position: 60% 25%;
  z-index:0;
}

/* Gradient darkening layers */
.hero-photo::after {
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(var(--rgb-black),.94) 0%, rgba(var(--rgb-black),.72) 42%, rgba(var(--rgb-black),.18) 100%),
    linear-gradient(to top,   rgba(var(--rgb-black),.97) 0%, rgba(var(--rgb-black),.4)  35%, transparent 65%),
    linear-gradient(to bottom,rgba(var(--rgb-black),.55) 0%, transparent 18%);
}

/* CI texture overlay (shield shapes from brand posts) */
.hero-texture {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image: var(--ci-texture);
  background-size: 18.75rem 18.75rem;
  opacity:.7;
  mix-blend-mode: overlay;
}

/* Decorative "08" number — desktop only */
.hero-deco {
  position:absolute; right:-1.25rem; top:50%; transform:translateY(-50%);
  font-family:'Teko',sans-serif;
  font-size: clamp(18rem, 26vw, 28rem);
  font-weight:900; color:transparent;
  -webkit-text-stroke: 1px rgba(var(--rgb-red),.14);
  line-height:1; letter-spacing:-.02em;
  pointer-events:none; user-select:none; z-index:2;
}

/* Hero content layout */
.hero-content {
  position:relative; z-index:6;
  flex:1; display:flex; align-items:flex-end;
  max-width:90rem; width:100%; margin:0 auto;
  padding:0 1.25rem 5rem 1.5rem;
  align-self:flex-end;
}
.hero-left { flex:1; min-width:0; width:100%; }
.hero-text { max-width:46rem; }

/* ── Sub-label above headline ── */
.hero-sub {
  font-size: 1.2rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(var(--rgb-red),.7);
  margin-bottom:.75rem;
  animation: fadeUp .5s ease both .1s; opacity:0;
}

/* ── Main headline ── */
.hero-headline {
  font-family:'Teko',sans-serif;
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight:900; text-transform:uppercase;
  letter-spacing:.02em; line-height:.95;
  color: var(--white) !important; margin-bottom:1.5rem;
  animation: fadeUp .7s ease both .2s; opacity:0;
  overflow-wrap: break-word; word-break: break-word;
  text-shadow: 0 4px 40px rgba(var(--rgb-pure-black), .55);
}
.hero-headline em { font-style:normal; color: var(--red) !important; }

/* ─────────────────────────────────────
   LAST RESULT CARD
───────────────────────────────────── */
.hero-result-pill { margin-top:1.25rem; animation: fadeUp .6s ease both .5s; opacity:0; display:inline-block; }

.hero-result-card {
  display:flex; flex-direction:column; gap:.625rem;
  padding:1rem 1.25rem;
  background:rgba(var(--rgb-pure-black),.55);
  border:1px solid var(--subtle);
  border-left:3px solid var(--red);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  min-width:22rem; max-width:43rem; width:clamp(22rem, 40vw, 40rem);
  position:relative;
}
.hero-result-header { display:flex; flex-direction:column; gap:.1.2rem; }
.hero-result-badge {
  font-family:'Teko',sans-serif;
  font-size: 1.2rem; font-weight:900; letter-spacing:.2em;
  text-transform:uppercase; color: var(--red);
}
.hero-result-comp { display:inline-flex; align-items:center; gap:.5rem; font-size: 1.2rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.hero-result-comp-logo { height:1.5rem; width:auto; object-fit:contain; flex-shrink:0; opacity:.85; }
.hero-result-score-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-family:'Teko',sans-serif; color: var(--white); }
.hero-result-club { display:flex; flex-direction:column; align-items:center; gap:.3rem; flex:1; min-width:0; }
.hero-result-logo { width:3.75rem; height:3.75rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero-result-logo img { width:3.75rem; height:3.75rem; object-fit:contain; }
.hero-result-logo-placeholder { font-size: 1.2rem; font-weight:900; color:var(--white); }
.hero-result-team { font-size: 1rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--white); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.hero-result-score-val { font-size:2.5rem; font-weight:800; color: var(--white); letter-spacing:.06em; flex-shrink:0; }
.hero-result-footer {
  display:flex; justify-content:flex-end;
  padding-top:.5rem;
}
/* hero-result-cta extends btn-tertiary-small — overrides font-size for this context */
.hero-result-cta { font-size: 1rem; letter-spacing:.14em; }
/* "Zum Spiel" — pinned top-right of hero result card */
.hero-result-card .hero-result-cta:not(.hero-result-cta--secondary) {
  position:absolute; top:.75rem; right:1.2rem;
  font-size: 1rem; opacity:.55;
}
.hero-result-cta:not(.hero-result-cta--secondary):hover { opacity:1; }
.hero-result-cta--secondary { opacity:.6; }
.hero-result-cta--secondary:hover { opacity:1; }

/* Legacy result pill (kept for compatibility) */
.hero-result-pill-inner {
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(var(--rgb-pure-black),.55);
  border:1px solid rgba(var(--rgb-white),.08);
  border-left:3px solid var(--red);

  padding:.875rem 1.25rem;
  gap:1.2rem; width:100%; box-sizing:border-box;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.hero-result-lbl {
  font-size: 1.2rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--white); flex-shrink:0;
  display:none;
}
@media (min-width:40rem) { .hero-result-lbl { display:block; } }
.hero-result-match {
  display:flex; align-items:center; gap:.75rem;
  font-family:'Teko',sans-serif;
  font-size:1.125rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--gray-100);
  flex:1;
}
.hero-result-winner { color:var(--white); font-weight:900; font-size:1.25rem; }
.hero-result-score {
  color:var(--red); font-weight:900;
  font-size:1.375rem; letter-spacing:.02em;
  padding:0 .25rem;
}
.hero-result-link {
  font-size: 1.2rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--red);
  transition:color .15s; flex-shrink:0;
  display:flex; align-items:center; gap:.375rem;
  white-space:nowrap;
}
.hero-result-link::after { content:'›'; font-size: 1.2rem; line-height:1; }
.hero-result-link:hover { color:var(--red); }

/* ─────────────────────────────────────
   HERO MATCH WIDGET
   Floats bottom-right on desktop,
   stacks below headline on mobile.
───────────────────────────────────── */
.hero-match-widget {
  position:absolute;
  right:2rem; bottom:4rem;
  z-index:7;
  animation: fadeUp .7s ease both .5s; opacity:0;
}
.hero-match-widget-inner {
  background:rgba(var(--rgb-black),.85);
  border:1px solid rgba(var(--rgb-red),.3);
  border-top:2px solid var(--red);

  padding:1.25rem 1.5rem;
  min-width:20rem; max-width:22rem;
  backdrop-filter:blur(20px);
  display:flex; flex-direction:column; gap:.875rem;
  box-shadow:0 8px 40px rgba(var(--rgb-pure-black),.5), 0 0 0 1px rgba(var(--rgb-red),.07);
}
.hmw-badge {
  display:flex; align-items:center; gap:.5rem;
  font-size: 1.2rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red);
}
.hmw-badge-dot {
  width:.4375rem; height:.4375rem;
  background:var(--red); flex-shrink:0;
  animation:pulse 1.6s ease-in-out infinite;
}
.hmw-teams {
  display:flex; align-items:center; gap:.625rem;
  font-family:'Teko',sans-serif;
  font-size:1.25rem; font-weight:900;
  text-transform:uppercase; letter-spacing:.04em;
}
.hmw-home { color:var(--red); }
.hmw-sep  { color:var(--faint); font-size: 1.2rem; font-weight:400; }
.hmw-meta { display:flex; flex-direction:column; gap:.3rem; }
.hmw-meta-item {
  display:flex; align-items:center; gap:.5rem;
  font-size: 1.2rem; color:var(--faint);
  line-height:1.2;
}
.hmw-meta-item svg {
  width:.875rem; height:.875rem; flex-shrink:0;
  stroke:var(--white); fill:none; stroke-width:1.75;
}
.hmw-ticket-btn {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--red); color:var(--white);
  font-family:'Teko',sans-serif;
  font-size: 1.2rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  padding:.75rem; margin-top:.125rem;
  transition:background .15s, transform .1s;
}
.hmw-ticket-btn:hover { background:var(--red-d); transform:translateY(-1px); }
.hmw-ticket-btn svg { width:.875rem; height:.875rem; stroke:var(--white); fill:none; stroke-width:2; stroke-linecap:round; }

/* ─────────────────────────────────────
   SCROLL HINT
───────────────────────────────────── */
.hero-scroll-hint {
  position:absolute; bottom:.75rem; left:50%; transform:translateX(-50%);
  z-index:8; background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  color:var(--white); transition:color .22s;
  animation:fadeIn 1s ease both .9s; opacity:0;
  min-height:44px; padding:.25rem .5rem;
}
.hero-scroll-hint:hover { color:var(--gray-100); }
.hero-scroll-hint-line {
  width:1px; height:2rem;
  background:linear-gradient(to bottom, currentColor, transparent);
  animation:breathe 2.2s ease-in-out infinite;
}
.hero-scroll-hint > svg { margin-top:-.25rem; }

/* ─────────────────────────────────────
   RESPONSIVE
───────────────────────────────────── */
@media (max-width:56rem) {
  .hero-match-widget { position:relative; bottom:auto; right:auto; animation:none; opacity:1; margin-top:1.75rem; max-width:100%; }
  .hero-match-widget-inner { min-width:unset; }
  .hero-content { flex:0 0 auto; flex-direction:column; align-items:flex-start; padding:1.25rem 1.25rem 5.5rem; width:100%; }
  .hero-deco { display:none; }
  .hero-scroll-hint { bottom:1.2rem; }
}

/* ── Empty state (no last match yet) ── */
.hero-result-empty {
  display: flex;
  align-items: center;
  gap: .625rem;
  color: var(--white);
  font-size: 1.2rem;
  padding: .5rem 0;
}
.hero-result-empty svg { stroke: var(--white); flex-shrink: 0; }