/* ══════════════════════════════════════════════════════════
   SHARED — Design tokens, reset, global utilities, buttons
   Used by all pages of SV Lippstadt 08 website
══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   ACCESSIBILITY
═══════════════════════════════════════ */

/* Skip link — visually hidden until focused by keyboard */
.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 9999;
  padding: .625rem 1.25rem;
  background: var(--red);
  color: var(--white);
  font-family: 'Lippe Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--white);
  /* Hidden off-screen by default */
  transform: translateY(calc(-100% - 1.5rem));
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: none;
}

/* Focus-visible ring — all interactive elements */
:focus-visible {
  outline: 2px solid rgba(var(--rgb-red), .85) !important;
  outline-offset: 3px !important;
}

/* Suppress outline on mouse click (only keyboard users need it) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Remove the old hard outline:none on btn-secondary-square — handled above */
.btn-secondary-square {
  -webkit-appearance: none;
}

.btn-secondary-square:focus-visible {
  outline: 2px solid rgba(var(--rgb-red), .85) !important;
  outline-offset: 3px !important;
  box-shadow: none;
}

/* ── Broken images: transparent, no white box ── */
img {
  background: transparent;
  color: transparent;
}

img::before {
  display: none;
}

img:-moz-broken {
  opacity: 0;
}

img:not([src]),
img[src=""] {
  display: none;
}

/* ── Section background defaults ── */
body {
  background: var(--black);
  color: var(--text-body);
}

.nav {
  background: rgba(var(--rgb-black), .96);
}

.hero {
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100vh - 3.75rem);
  overflow: hidden;
  position: relative;
}

.support-strip {
  background: var(--surface);
}

.spotlight {
  background: var(--surface);
}

.league-section {
  background: var(--surface);
}

.news-section {
  background: var(--black);
}

.social-section {
  background: var(--black);
  padding: 2rem 1.25rem 3rem;
}

.partners-section {
  background: var(--off-black);
}

.footer {
  background: var(--off-black);
  color: var(--text-body);
}

.m-overlay {
  background: rgba(var(--rgb-pure-black), .7);
}

.m-panel {
  background: var(--off-black);
}

.m-bar {
  background: var(--off-black);
  border-bottom: 2px solid var(--red);
}

.m-top {
  color: var(--text-body);
}

.nmc {
  background: var(--off-black);
}

.news-card {
  background: var(--off-black);
}

.news-card-small {
  background: var(--off-black);
}

.partner-tier-main-card {
  background: var(--surface);
}

.partner-slot {
  background: var(--surface);
}

.partner-co-item {
  background: var(--surface);
}

/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  --red: #da002f;
  --red-d: #B80028;
  --red-black: #8A001E;
  --red-light: #FDE4EA;
  /* former: #9e0008 */
  --black: #000000;
  --off-black: #0f0f0f;
  --surface: #1A1A1A;
  --surface2: #222222;
  --border: #252525;
  --white: #ffffff;
  --muted: #DEDCD8;
  --faint: #ECECEA;
  --green: #1B6F2E;
  --amber: #e8a020;
  --danger: #d10a17;
  --nav-h: 4.5rem;

  /* Match status colors — text is bright, bg is a deep tint for contrast */
  --status-live-color: var(--white);
  --status-live-bg: rgba(var(--rgb-red), .55);
  --status-live-border: rgba(var(--rgb-red), .40);

  --status-halftime-color: #F6F4F1;
  --status-halftime-bg: rgba(var(--rgb-amber), .45);
  --status-halftime-border: rgba(var(--rgb-amber), .40);

  --status-finished-color: var(--muted);
  --status-finished-bg: rgba(var(--rgb-white), .08);
  --status-finished-border: rgba(var(--rgb-white), .14);

  --status-scheduled-color: #F6F4F1;
  --status-scheduled-bg: rgba(40, 90, 180, .40);
  --status-scheduled-border: rgba(122, 171, 255, .30);

  --status-cancelled-color: #F6F4F1;
  --status-cancelled-bg: rgba(var(--rgb-red), .30);
  --status-cancelled-border: rgba(var(--rgb-danger), .35);

  /* ── RGB channels — use as rgba(var(--rgb-X), opacity) ── */
  --rgb-red: 218, 0, 47;
  /* matches --red: #da002f */
  --rgb-white: 255, 255, 255;
  --rgb-black: 8, 8, 8;
  --rgb-pure-black: 0, 0, 0;
  --rgb-amber: 232, 160, 32;
  --rgb-green-dm: 76, 175, 122;
  --rgb-danger: 224, 85, 85;


  /* ── Dark surfaces ── */
  --surface-darker: #0a0a0a;
  --dark-red-bg: #1a0002;
  /* deep red for gradients */

  /* ── Text ── */
  --text-body: #F2F2F2;
  --text-muted-sm: #888;

  /* ── Grey scale — high-contrast solids for dark backgrounds ── */
  /* On #080808 (black): 100→10.5:1 / 200→6.8:1 / 300→4.7:1 / 400→2.4:1 */
  --gray-100: #F6F4F1;
  /* primary descriptions / icon colours */
  --gray-200: #ECECEA;
  /* secondary text, labels */
  --gray-300: #DEDCD8;
  /* tertiary labels, metadata (WCAG AA) */
  --gray-400: #6A6A68;
  /* faint / decorative elements */

  /* ── CI texture grid overlay ── */
  --ci-grid: rgba(255, 255, 255, .022);

  /* ── News / content chips ── */
  --chip-blue: rgba(99, 102, 241, 1);
  --chip-blue-dim: rgba(99, 102, 241, .75);
  --chip-orange: rgba(234, 88, 12, 1);
  --chip-teal: rgba(20, 184, 166, 1);
  --chip-green: rgba(34, 197, 94, .85);
  --chip-gray-bg: rgba(148, 163, 184, .8);
  --chip-gray-border: rgba(148, 163, 184, .4);
  --chip-gray-dim: rgba(148, 163, 184, .15);
  --chip-gray-text: rgba(255, 255, 255, .7);
  --chip-gray-border2: rgba(148, 163, 184, .3);
  --chip-purple: rgba(139, 92, 246, 1);
  --chip-youth-bg: rgba(180, 130, 0, .85);
  --chip-youth-border: rgba(251, 191, 36, .9);
  --chip-women-bg: rgba(13, 130, 116, .85);
  --chip-women-border: rgba(20, 184, 166, .9);
  --chip-club-bg: rgba(80, 100, 120, .85);
  --chip-club-border: rgba(148, 163, 184, .8);

  /* ── Instagram ── */
  --ig-gradient: linear-gradient(90deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --ig-icon-gradient: linear-gradient(135deg, #f09433 0%, #dc2743 50%, #bc1888 100%);

  /* ── Subtle divider / border ── */
  --subtle: #555555;

  /* ── Dark gradient helpers ── */
  --news-card-dark: #120000;
  /* dark reddish-black for news card gradient fallback */
  --rgb-dark-grain: 12, 4, 4;
  /* near-black with red tint for article lippe gradient */
  --rgb-surface: 20, 20, 20;
  /* RGB channels of --surface (#141414) for rgba() use */

  /* CI texture from brand posts: dark red grain + shield outlines */
  /* Note: colors inside SVG data URIs cannot use CSS variables — intentionally hardcoded */
  --ci-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cdefs%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='.06'/%3E%3Cpath fill='none' stroke='rgba(200%2C0%2C10%2C.09)' stroke-width='1.2' d='M150 18L276 82v136L150 282 24 218V82z'/%3E%3Cpath fill='none' stroke='rgba(200%2C0%2C10%2C.05)' stroke-width='1' d='M150 42L256 96v108L150 258 44 204V96z'/%3E%3C/svg%3E");
}

/* ── Global SVG icon sizing — prevent 300x150 Safari default ── */
svg {
  overflow: visible;
}

/* Nav arrows */
.nav-links>li>button>svg,
.nav-links>li>a>svg {
  width: .625rem;
  height: .625rem;
}

/* Nav utility */
.nav-util-btn svg {
  width: .8125rem;
  height: .8125rem;
  flex-shrink: 0;
}

/* Support */
.support-card-action svg {
  width: .6875rem;
  height: .6875rem;
  flex-shrink: 0;
}

.support-ticket-btn svg {
  width: .75rem;
  height: .75rem;
  flex-shrink: 0;
}

/* Hero match widget */
.hmw-meta-item svg {
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
}

.hmw-ticket-btn svg {
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
}

/* NMC logos */
.club-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* NMC detail */
.nmc-detail-item svg {
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
}

/* Social channel badge */
.social-channel-badge svg {
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
}

/* Social ig links */
.social-ig-link svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

/* Footer */
.footer-soc-btn svg {
  width: .9375rem;
  height: .9375rem;
  flex-shrink: 0;
}

/* Mobile nav */
.m-top>svg {
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
}

.m-close svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.btn-primary-small svg {
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
}

/* Hero scroll hint */
.hero-scroll-hint>svg {
  width: .875rem;
  height: .875rem;
}

/* Buttons */
.btn-primary svg,
.btn-primary-small svg,
.btn-primary-invert svg {
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
}

.btn-secondary svg,
.btn-secondary-small svg {
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
}

.btn-tertiary svg {
  width: .75rem;
  height: .75rem;
  flex-shrink: 0;
}

.btn-tertiary-small svg {
  width: .625rem;
  height: .625rem;
  flex-shrink: 0;
}

.btn-primary svg {
  margin-bottom: .2rem;
}

/* ═══════════════════════════════════════
   RESET
═══════════════════════════════════════ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--black);
  color: var(--text-body);
  color: var(--white);
  font-family: 'Lippe Condensed', sans-serif;
  font-size: 1.5rem;
  font-weight: 200;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--white);
  text-decoration: none;
  transition: color .15s;
}

a:hover {
  color: var(--red);
}

/* ── Background utility ── */
.bg-black {
  background: var(--black);
}

/* ════════════════════════════════════════════════════════
   CI BRAND TEXTURE — Page headers
   Deep red + fractal grain + hex-grid overlay
   Matches SV Lippstadt 08 Instagram visual identity
════════════════════════════════════════════════════════ */
/*
  CI texture — header_bg.jpg is a grayscale texture image.
  background-blend-mode: multiply tints it with the red color (fully supported incl. iOS Safari).
  The color layer sits behind the image; multiply darkens where the image is dark,
  preserving all grain/texture detail in the correct brand red.
*/
.tb-header,
.sp-header,
.kd-header,
.tm-header,
.nl-header,
.off-header,
.hcl-header,
.gs-header,
.sr-header,
.sm-header,
.vp-header,
.lf-header,
.la-header,
.chr-header,
.sp08-header,
.mw-header,
.md-header,
.fs-header,
.imp-header,
.pt-header,
.lp-header,
.sf-page-header {
  background-color: var(--red-d);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(0, 0, 0, 0.0) 0 6%, transparent 20%),
    radial-gradient(circle at 72% 35%, rgba(0, 0, 0, 0.0) 0 9%, transparent 24%),
    radial-gradient(circle at 30% 78%, rgba(0, 0, 0, 0.0) 0 10%, transparent 24%),
    radial-gradient(circle at 82% 76%, rgba(0, 0, 0, 0.0) 0 11%, transparent 25%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
  border-bottom: 1px solid rgba(var(--rgb-pure-black), .3);
  position: relative;
  overflow: hidden;
}

/* Global ::before watermark — shared style, content overridden per page */
.tb-header::before,
.sp-header::before,
.kd-header::before,
.tm-header::before,
.nl-header::before,
.off-header::before,
.hcl-header::before,
.gs-header::before,
.sr-header::before,
.sm-header::before,
.vp-header::before,
.lf-header::before,
.la-header::before,
.chr-header::before,
.sp08-header::before,
.mw-header::before,
.md-header::before,
.fs-header::before,
.imp-header::before,
.pt-header::before,
.lp-header::before,
.sf-page-header::before {
  position: absolute;
  right: 1.2rem;
  bottom: -1.5rem;
  font-family: 'Lippe Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(9rem, 22vw, 18rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(var(--rgb-pure-black), .18);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Global sub-header text inside red page headers */
.off-header-sub,
.gs-header-sub,
.lf-header-sub,
.la-header-sub,
.hcl-header-sub,
.sm-header-sub,
.md-header-sub,
.chr-header-sub,
.pt-header-sub,
.vp-header-sub,
.sr-header-sub,
.mw-header-sub,
.mf-header-sub,
.sp08-header-sub,
.sf-page-header-sub {
  font-family: 'Lippe Condensed', sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  color: rgba(var(--rgb-white), .8);
  font-weight: 400;
  max-width: 46rem;
  line-height: 1.6;
  margin: .5rem 0 0;
}

/* Eyebrow labels adapt to red background */
.tb-header .sec-eyebrow,
.sp-header .sec-eyebrow,
.kd-header .sec-eyebrow,
.tm-header .sec-eyebrow,
.nl-header .sec-eyebrow,
.off-header .sec-eyebrow,
.hcl-header .sec-eyebrow,
.gs-header .sec-eyebrow,
.sr-header .sec-eyebrow,
.sm-header .sec-eyebrow,
.vp-header .sec-eyebrow,
.lf-header .sec-eyebrow,
.la-header .sec-eyebrow,
.chr-header .sec-eyebrow,
.sp08-header .sec-eyebrow,
.md-header .sec-eyebrow,
.mw-header .sec-eyebrow,
.fs-header .sec-eyebrow,
.imp-header .sec-eyebrow,
.pt-header .sec-eyebrow,
.sf-page-header .sec-eyebrow,
.news-section .sec-hdr .sec-eyebrow,
.social-section .sec-hdr .sec-eyebrow {
  color: var(--white);
}

.tb-header .sec-eyebrow::before,
.sp-header .sec-eyebrow::before,
.kd-header .sec-eyebrow::before,
.tm-header .sec-eyebrow::before,
.nl-header .sec-eyebrow::before,
.off-header .sec-eyebrow::before,
.hcl-header .sec-eyebrow::before,
.gs-header .sec-eyebrow::before,
.sr-header .sec-eyebrow::before,
.sm-header .sec-eyebrow::before,
.vp-header .sec-eyebrow::before,
.lf-header .sec-eyebrow::before,
.la-header .sec-eyebrow::before,
.chr-header .sec-eyebrow::before,
.sp08-header .sec-eyebrow::before,
.md-header .sec-eyebrow::before,
.mw-header .sec-eyebrow::before,
.fs-header .sec-eyebrow::before,
.imp-header .sec-eyebrow::before,
.pt-header .sec-eyebrow::before,
.sf-page-header .sec-eyebrow::before,
.news-section .sec-hdr .sec-eyebrow::before,
.social-section .sec-hdr .sec-eyebrow::before {
  background: var(--gray-100);
}

/* ── News + Social section headers — full-bleed CI texture bar ── */
.news-section .sec-hdr,
.social-section .sec-hdr {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  overflow: hidden;
  padding: 1.75rem max(1.25rem, calc((100vw - 90rem) / 2 + 2rem)) 1.5rem;
  background-color: var(--red-d);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(0, 0, 0, 0.0) 0 6%, transparent 20%),
    radial-gradient(circle at 72% 35%, rgba(0, 0, 0, 0.0) 0 9%, transparent 24%),
    radial-gradient(circle at 30% 78%, rgba(0, 0, 0, 0.0) 0 10%, transparent 24%),
    radial-gradient(circle at 82% 76%, rgba(0, 0, 0, 0.0) 0 11%, transparent 25%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
  border-bottom: none;
  margin-bottom: 2rem;
}

/* ═══════════════════════════════════════
   SECTION HEADER
   Shared by news, league, social, partners
═══════════════════════════════════════ */
.sec-hdr {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--border);
  gap: .5rem;
}

.sec-eyebrow {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .375rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.sec-eyebrow::before {
  content: '';
  width: 1.25rem;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
}

.sec-eyebrow-league-logo {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  flex-shrink: 0;
  opacity: .85;
}

.sec-title {
  font-family: 'Lippe Condensed', sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.625rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1;
}

/* ═══════════════════════════════════════
   KEYFRAMES + REVEAL ANIMATION
═══════════════════════════════════════ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(1.25rem)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-1.25rem)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes breathe {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }

  50% {
    opacity: .3;
    transform: scale(.65)
  }
}

.reveal {
  opacity: 0;
  transform: translateY(1.125rem);
  transition: opacity .55s ease, transform .55s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: calc(.875rem + .1em) 1rem calc(.875rem - .1em);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
  line-height: 1;
  width: 100%;
}

.btn-primary {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.btn-primary:hover {
  background: var(--red-d) !important;
  border-color: var(--red-d) !important;
  color: #fff;
}

.btn-primary-invert {
  background: var(--white) !important;
  color: var(--surface-darker) !important;
  border: 2px solid var(--white) !important;
}

.btn-primary-invert:hover {
  background: var(--gray-100) !important;
  border-color: var(--gray-100) !important;
}

.btn-primary-small {
  background: var(--red) !important;
  color: var(--white) !important;
  font-size: 1rem;
  padding: calc(.4375rem + .1em) .875rem calc(.4375rem - .1em);
  min-height: 2.25rem;
  width: initial;
}

.btn-primary-small:hover {
  background: var(--red-d) !important;
  border-color: var(--red-d) !important;
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  padding: calc(.875rem + .1em) 2rem calc(.875rem - .1em);
  width: 100%;
}

.btn-secondary:hover {
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--white);
}

.btn-secondary-small {
  background: transparent;
  color: var(--white);
  font-size: 1rem;
  border: 2px solid var(--white);
  padding: calc(.4375rem + .1em) .875rem calc(.4375rem - .1em);
  min-height: 2.25rem;
  width: initial;
}

.btn-secondary-small:hover {
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--white);
}

/* ── Tertiary — text-only, no background or border ── */
.btn-tertiary,
.btn-tertiary-small {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-family: 'Lippe Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--white);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
}

.btn-tertiary {
  font-size: 1.2rem;
  padding-top: .1em;
  width: min-content;
}

.btn-tertiary-small {
  font-size: 1rem;
  padding-top: .1em;
  width: min-content;
}

.btn-tertiary:hover,
.btn-tertiary-small:hover {
  color: var(--red);
}

.btn-secondary-square {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--border);
  cursor: pointer;
  color: var(--muted);
  -webkit-appearance: none;
  outline: none;
  transition: color .15s, border-color .15s, background .15s;
  flex-shrink: 0;
}

.btn-secondary-square svg {
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  pointer-events: none;
}

.btn-secondary-square:hover {
  color: var(--white);
  border-color: var(--faint);
}

.btn-secondary-square:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--rgb-red), .4);
}

/* ── Ticket button (full-width red, used in NMC) ── */
.btn-tickets {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  background: var(--red);
  color: var(--white);
  font-family: 'Lippe Condensed', sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .875rem 1.2rem;

  min-height: 44px;
  position: relative;
  z-index: 1;
  transition: background .15s;
  text-decoration: none;
}

.btn-tickets:hover {
  background: var(--red-d);
}

/* ── Shared stat-pill (used by standings, kader, schedule) ── */
.tb-header-stat {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  padding: .875rem 1.25rem;
  flex-shrink: 0;
}
.tb-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.25rem;
}
.tb-stat-val {
  font-family: 'Lippe Condensed', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}
.tb-stat-lbl {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .2rem;
}
.tb-stat-divider {
  width: 1px;
  height: 2.5rem;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Tabelle wrap scrollbar ── */
.tabelle-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.tabelle-wrap::-webkit-scrollbar {
  height: 2px;
}

.tabelle-wrap::-webkit-scrollbar-thumb {
  background: var(--border);
}

/* ── Social links row ── */
.social-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem .875rem;
  margin-top: 1.25rem;
  align-items: center;
}

/* ═══════════════════════════════════════
   RESPONSIVE — supplemental cross-section
═══════════════════════════════════════ */
@media (max-width:56rem) {
  .hero-deco {
    display: none;
  }

  .hero-scroll-hint {
    bottom: 1.25rem;
  }

  .hero-match-widget {
    position: relative;
    bottom: auto;
    right: auto;
    animation: none;
    opacity: 1;
    width: 100%;
  }

  .hero-match-widget-inner {
    min-width: unset;
    max-width: 100%;
  }

  .support-strip {
    flex-direction: column;
  }

  .support-div {
    display: none;
  }

  .support-ctas {
    flex-direction: column;
  }

  .support-inner-div {
    width: 100%;
    height: 1px;
  }
}

@media (max-width:40rem) {
  .hero-headline {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .sec-title {
    font-size: 1.75rem;
  }

  .support-card-title {
    white-space: normal;
  }

  .partner-tier-main-card {
    padding: 1.75rem 1.2rem;
  }

  .partner-slot {
    padding: 1.5rem 1.2rem;
  }

  .hmw-ticket-btn,
  .support-card-action,
  .btn-primary-small,
  .btn-secondary-small,
  .btn-primary,
  .btn-ghost {
    min-height: 44px;
  }

  .m-sub a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .m-top {
    min-height: 52px;
  }
}

@media (max-width:26rem) {
  .hero-headline {
    font-size: clamp(2.25rem, 13vw, 3rem);
  }
}

@supports (padding:env(safe-area-inset-bottom)) {
  .nav-inner {
    font-family: 'Lippe Condensed';
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }

  .m-panel {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .footer-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════
   iOS Safari fix — background-blend-mode: overlay renders the noise SVG
   much darker on iOS, making red sections appear near-black/maroon.
   -webkit-touch-callout targets iOS Safari exclusively.
   Override: strip background-image to solid red-d, blend-mode to normal.
═══════════════════════════════════════ */
/* ═══════════════════════════════════════
   REDUCED MOTION — respect OS preference
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal elements: show immediately without the slide-up */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@supports (-webkit-touch-callout: none) {

  .tb-header,
  .sp-header,
  .kd-header,
  .tm-header,
  .nl-header,
  .off-header,
  .hcl-header,
  .gs-header,
  .sr-header,
  .sm-header,
  .vp-header,
  .lf-header,
  .la-header,
  .chr-header,
  .sp08-header,
  .mw-header,
  .md-header,
  .fs-header,
  .imp-header,
  .pt-header,
  .lp-header,
  .sf-page-header,
  .news-section .sec-hdr,
  .social-section .sec-hdr {
    background-image: none;
    background-blend-mode: normal;
  }
}