/* ============================================================================
   FANS (Design V2) — baut auf design-v2.css, club-100-v2.css (.c1-hero) und teams-v2.css
   (.tc-Diagonalschnitt-Mechanik, hier für .fs-card wiederverwendet) auf.
   Social-Media-Ziele (Instagram/Facebook/WhatsApp) sind projektweit noch ohne echte URL (siehe
   dashboard-einstellungen.html: "Platzhalter-Icons ohne Ziel") — dieselbe href="#"-Konvention wie
   die Footer-Icons auf jeder Seite, sobald echte Links vorliegen hier eintragen. Newsletter
   verlinkt auf das echte (Dummy-)Formular auf news-v2.html. Hallenheft "Hand am Harz" verlinkt
   echt auf yumpu.com/user/HandAmHarz.
   ============================================================================ */
.fans-hero{padding-bottom:60px;}

/* ---------- Kanal-Kacheln ---------- */
.fs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:900px){.fs-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.fs-grid{grid-template-columns:1fr;}}
.fs-card{
  --tc-c:20px;--tc-o:7px;--tshape:polygon(0 0,calc(100% - var(--tc-c)) 0,100% var(--tc-c),100% 100%,var(--tc-c) 100%,0 calc(100% - var(--tc-c)));
  position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:26px 22px 24px;color:var(--ink);transition:transform .16s ease;
}
.fs-card::after,.fs-card::before{content:"";position:absolute;inset:0;clip-path:var(--tshape);}
.fs-card::after{z-index:-2;background:var(--surface);transition:background .2s ease;}
.fs-card::before{z-index:-3;background:var(--btn-back);transform:translate(var(--tc-o),var(--tc-o));transition:transform .16s ease;}
.fs-card:hover{transform:translate(-2px,-2px);}
.fs-card:hover::before{transform:translate(calc(var(--tc-o) + 2px),calc(var(--tc-o) + 2px));}
.fs-ico{width:38px;height:38px;color:var(--brand-red);}
.fs-ico svg{width:100%;height:100%;}
.fs-name{font-family:var(--font-impact);font-weight:400;text-transform:uppercase;font-size:21px;margin-top:2px;}
.fs-desc{font-size:13.5px;color:var(--ink-soft);line-height:1.4;}
.fs-cta{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-red);}
.fs-cta svg{width:1.1em;height:1.1em;transition:transform .2s ease;}
.fs-card:hover .fs-cta svg{transform:translateX(4px);}

/* ---------- Hallenheft (eigene, prominentere Kachel mit echtem Link) ---------- */
.fs-heft{display:flex;align-items:center;gap:24px;padding:32px 34px;flex-wrap:wrap;color:var(--ink);}
.fs-heft-ico{flex:none;width:56px;height:56px;color:var(--brand-red);}
.fs-heft-ico svg{width:100%;height:100%;}
.fs-heft-body{flex:1 1 320px;min-width:0;}
.fs-heft-body b{display:block;font-family:var(--font-impact);font-weight:400;text-transform:uppercase;font-size:26px;}
.fs-heft-body span{display:block;margin-top:6px;font-size:14.5px;color:var(--ink-soft);line-height:1.5;max-width:60ch;}
.fs-heft-cta{flex:none;}