/* ==========================================================================
   TSV 1919 – Verein
   Ausgelagert aus Page-Code-Injection (head) am 2026-08-15.
   Verbatim übernommen: bestehendes body.page-verein-Scoping unverändert,
   keine Deduplizierung, keine Designänderung, keine Selektoren umgeschrieben,
   keine Breakpoints verändert.
   ========================================================================== */


/* =========================================================
   /verein/ – KOMPLETTE CSS
   Layout + Abstände + Karten + Hierarchie
   ========================================================= */

body.page-verein{
  --verein-maxw: 1200px;
  --verein-gap: 18px;
  --verein-radius: 18px;

  --card-bg: rgba(18,18,20,.72);
  --card-border: rgba(255,255,255,.12);
  --card-shadow: 0 18px 45px rgba(0,0,0,.55);

  --primary-red-1: rgba(196,0,20,.95);
  --primary-red-2: rgba(110,0,15,.95);
}

/* ---------- Header / Titel ---------- */
body.page-verein .article-header{
  padding-top: 80px !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

body.page-verein .article-title{
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
}

/* ---------- Casper Canvas lösen ---------- */
body.page-verein #site-main,
body.page-verein .site-main,
body.page-verein .article,
body.page-verein .post,
body.page-verein .gh-content,
body.page-verein .gh-content.gh-canvas{
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Optional: alles außer unserem Block ausblenden */
body.page-verein .gh-content.gh-canvas > :not(.tsv-verein){
  display: none !important;
}

/* ---------- Full-Width Wrapper ---------- */
body.page-verein .tsv-verein{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: clamp(16px, 4vw, 48px) !important;
  color: rgba(255,255,255,.92);
}

/* ---------- Panel ---------- */
body.page-verein .tsv-verein-panel{
  max-width: var(--verein-maxw) !important;
  margin: 0 auto !important;
}

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

/* Responsive */
@media (max-width: 980px){
  body.page-verein .tsv-verein-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width: 640px){
  body.page-verein .tsv-verein-grid{
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Cards ---------- */
body.page-verein .tsv-verein-card{
  position: relative !important;
  display: block !important;
  padding: 18px !important;

  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--verein-radius) !important;

  box-shadow: var(--card-shadow) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;

  text-decoration: none !important;
  color: rgba(255,255,255,.94) !important;

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  overflow: hidden !important;
}

/* Glow unten */
body.page-verein .tsv-verein-card::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:-10px;
  height:18px;
  border-radius:999px;
  background: radial-gradient(60% 120% at 50% 40%, rgba(255,70,70,.55), rgba(196,0,20,.35), transparent 70%);
  filter: blur(4px);
  pointer-events:none;
}

body.page-verein .tsv-verein-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0,0,0,.65) !important;
  filter: brightness(1.04);
}

/* ---------- Icon ---------- */
body.page-verein .tsv-verein-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);

  margin-bottom: 12px;
  font-size: 18px;
}

/* ---------- Text ---------- */
body.page-verein .tsv-verein-title{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
}

body.page-verein .tsv-verein-sub{
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.70);
}

/* ---------- PRIMARY: Mitgliedschaft ---------- */
body.page-verein .tsv-verein-card--primary{
  background: linear-gradient(180deg, var(--primary-red-1), var(--primary-red-2)) !important;
  border-color: rgba(255,255,255,.24) !important;
}

body.page-verein .tsv-verein-card--primary .tsv-verein-title{
  font-size: 17px !important;
}

body.page-verein .tsv-verein-card--primary::after{
  background: radial-gradient(70% 120% at 50% 40%, rgba(255,80,80,.75), rgba(196,0,20,.45), transparent 72%) !important;
}

/* ---------- WhatsApp Card ---------- */
body.page-verein .tsv-verein-card--wa{
  border-color: rgba(37,211,102,.30) !important;
}

body.page-verein .tsv-verein-card--wa::after{
  background: radial-gradient(60% 120% at 50% 40%, rgba(37,211,102,.55), rgba(37,211,102,.25), transparent 70%) !important;
}

/* ---------- LIGHT MODE ---------- */
html:not(.dark-mode) body.page-verein{
  color: rgba(0,0,0,.88);
}

html:not(.dark-mode) body.page-verein .tsv-verein-card{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.18) !important;
}

html:not(.dark-mode) body.page-verein .tsv-verein-card *{
  color: rgba(0,0,0,.88) !important;
}
/* ===== Verein Finetuning ===== */
body.page-verein{
  --verein-maxw: 1180px;              /* etwas klarer */
}

body.page-verein .tsv-verein{
  padding-left: clamp(18px, 4vw, 56px) !important;
  padding-right: clamp(18px, 4vw, 56px) !important;
}

/* Panel wirklich zentriert + schöne Kantenluft */
body.page-verein .tsv-verein-panel{
  max-width: var(--verein-maxw) !important;
  margin: 0 auto !important;
}

/* Kartenhöhe etwas konsistenter */
body.page-verein .tsv-verein-card{
  min-height: 120px !important;
}

/* Subline: weniger “Textwüste”, sauber begrenzen */
body.page-verein .tsv-verein-sub{
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Fanshop-Subline optional: bisschen heller/knackiger */
body.page-verein .tsv-verein-card:nth-child(3) .tsv-verein-sub{
  opacity: .85 !important;
}

/* Icon-Kachel ein bisschen “premium” */
body.page-verein .tsv-verein-ico{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}