/* ==========================================================================
   TSV 1919 - Sportarten-Uebersicht (/sportarten)
   Karten-Ueberblick der 5 Hauptabteilungen: Fussball, Turnen, Tischtennis,
   Dart, Fitness.
   Design konsistent zu den Abteilungsseiten (turnen.css, fussball.css ...).
   Scope: body.page-sportarten
   ========================================================================== */

body.page-sportarten{
  --sa-maxw: min(1100px, calc(100% - 48px));
  --sa-gap: clamp(16px, 2vw, 28px);
  --sa-radius: 18px;
  --sa-border: rgba(255,255,255,.14);
  --sa-bg: rgba(12,12,14,.58);
  --sa-shadow: 0 18px 45px rgba(0,0,0,.48);
  --sa-glow: rgba(196,0,20,.55);
}

/* Casper Page-Header aus (Titel wird selbst gerendert) */
body.page-sportarten .article-header,
body.page-sportarten .article-header *{
  display:none !important;
}

/* Full width raus aus Casper Container */
body.page-sportarten #site-main,
body.page-sportarten .site-main,
body.page-sportarten .article,
body.page-sportarten .post,
body.page-sportarten .gh-content,
body.page-sportarten .gh-content.gh-canvas{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

body.page-sportarten .gh-content.gh-canvas{
  display:block !important;
}

/* Nur Sportarten-Block anzeigen */
body.page-sportarten .gh-content.gh-canvas > :not(.tsv-sportarten){
  display:none !important;
}

/* Wrapper full-bleed */
body.page-sportarten .tsv-sportarten{
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: clamp(34px, 5vw, 64px) 0 clamp(44px, 6vw, 80px) !important;
  color: rgba(255,255,255,.92);
}

/* ================= KOPFBEREICH ================= */
body.page-sportarten .tsv-sportarten-head{
  width: 100% !important;
  max-width: var(--sa-maxw) !important;
  margin: 0 auto clamp(22px, 3vw, 34px) !important;
  text-align: center;
}

body.page-sportarten .tsv-sportarten-eyebrow{
  margin: 0 0 6px !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

body.page-sportarten .tsv-sportarten-head h1{
  margin: 0 !important;
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 950;
  letter-spacing: .2px;
}

body.page-sportarten .tsv-sportarten-sub{
  margin: 10px auto 0 !important;
  max-width: 52ch;
  font-size: clamp(14px, 1.3vw, 16px);
  color: rgba(255,255,255,.7);
}

/* ================= GRID ================= */
body.page-sportarten .tsv-sportarten-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--sa-gap) !important;
  width: 100% !important;
  max-width: var(--sa-maxw) !important;
  margin: 0 auto !important;
}

/* ================= CARD ================= */
body.page-sportarten .tsv-sportarten-card{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: clamp(320px, 30vw, 420px) !important;

  border-radius: var(--sa-radius) !important;
  overflow: hidden !important;
  background: var(--sa-bg) !important;
  border: 1px solid var(--sa-border) !important;
  box-shadow: var(--sa-shadow) !important;

  text-decoration: none !important;
  color: #fff !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.page-sportarten .tsv-sportarten-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 26px 65px rgba(0,0,0,.62);
}

/* Bild */
body.page-sportarten .tsv-sportarten-media{
  aspect-ratio: 16 / 9;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  position: relative;
}

body.page-sportarten .tsv-sportarten-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 120% at 30% 25%, rgba(0,0,0,.1), rgba(0,0,0,.7)),
    linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.75));
}

/* Content */
body.page-sportarten .tsv-sportarten-body{
  padding: clamp(18px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

body.page-sportarten .tsv-sportarten-title{
  margin: 0;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 850;
}

body.page-sportarten .tsv-sportarten-text{
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: clamp(13px, 1.1vw, 15px);
  max-width: 44ch;
}

/* Button */
body.page-sportarten .tsv-sportarten-cta{
  margin-top: auto;
  padding-top: 10px;
}

body.page-sportarten .tsv-sportarten-btn{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(260px, 100%);
  padding: 12px 14px;

  border-radius: 12px;
  background: linear-gradient(90deg, rgba(120,0,0,.95), rgba(196,0,20,.85));
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow:
    0 14px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* Glow */
body.page-sportarten .tsv-sportarten-card::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:-12px;
  height:18px;
  border-radius:999px;
  background: radial-gradient(60% 120% at 50% 40%, var(--sa-glow), rgba(196,0,20,.25), transparent 70%);
  filter: blur(5px);
}

/* ================= LIGHT MODE ================= */
html:not(.dark-mode) body.page-sportarten{
  color: rgba(0,0,0,.88);
}
html:not(.dark-mode) body.page-sportarten .tsv-sportarten-card{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.14);
}
html:not(.dark-mode) body.page-sportarten .tsv-sportarten-card *{
  color: rgba(0,0,0,.88);
}
html:not(.dark-mode) body.page-sportarten .tsv-sportarten-eyebrow{
  color: rgba(0,0,0,.5);
}
html:not(.dark-mode) body.page-sportarten .tsv-sportarten-text{
  color: rgba(0,0,0,.62);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  body.page-sportarten .tsv-sportarten-grid{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px){
  body.page-sportarten{
    --sa-maxw: calc(100% - 36px);
  }
  body.page-sportarten .tsv-sportarten-grid{
    grid-template-columns: 1fr !important;
  }
}