/* ==========================================================================
   TSV 1919 – Turnen
   Ausgelagert aus Page-Code-Injection (head) am 2026-08-15.
   Verbatim-Uebernahme: keine inhaltlichen Aenderungen.
   Gilt nur fuer die Seite /turnen (Scope beibehalten).
   ========================================================================== */


/* =========================================================
   TSV – TURNEN: 3 Karten (Damen / Herren / Kinder)
   - 3 Spalten Desktop
   - 2 Tablet
   - 1 Mobile
   - Design konsistent zu Dart/Fußball
   ========================================================= */

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

/* Breakout aus gh-canvas */
body.page-turnen .tsv-turnen-cards{
  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(18px, 3vw, 34px) 0 clamp(34px, 4vw, 56px) !important;
}

/* Innenbereich */
body.page-turnen .tsv-turnen-inner{
  width: 100% !important;
  max-width: var(--turnen-maxw) !important;
  margin: 0 auto !important;
}

/* Grid */
body.page-turnen .tsv-turnen-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--turnen-gap) !important;
}

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

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

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

body.page-turnen .tsv-turnen-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-turnen .tsv-turnen-media{
  aspect-ratio: 16 / 9;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  position: relative;
}

body.page-turnen .tsv-turnen-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-turnen .tsv-turnen-body{
  padding: clamp(18px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

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

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

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

body.page-turnen .tsv-turnen-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-turnen .tsv-turnen-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(--turnen-glow), rgba(196,0,20,.25), transparent 70%);
  filter: blur(5px);
}

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