/* =========================================================
   FC Langenthal – Vorstand und Funktionäre
   ========================================================= */

.vorstand-page{
  width:min(var(--fcl-container),calc(100% - 48px));
  margin-inline:auto;
  padding-block:42px clamp(60px,8vw,100px)
}
.com-content-article__body:has(.vorstand-page){max-width:none}

.vorstand-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:40px;
  overflow:hidden;
  margin-bottom:48px;
  padding:38px 42px;
  border-radius:18px;
  background:
    radial-gradient(circle at 88% 12%,rgba(255,213,27,.15) 0,rgba(255,213,27,.15) 62px,transparent 63px),
    linear-gradient(135deg,var(--fcl-navy),var(--fcl-blue));
  color:#fff;
  box-shadow:0 16px 42px rgba(4,35,57,.18)
}
.vorstand-hero-content{max-width:700px}
.vorstand-eyebrow{
  display:block;
  margin-bottom:8px;
  color:var(--fcl-yellow);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase
}
.vorstand-hero h1{
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(2rem,4vw,3.5rem);
  line-height:1.04;
  text-transform:none
}
.vorstand-hero p{max-width:660px;margin:0;color:#d8e5ed;font-size:1rem}
.vorstand-hero-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(120px,1fr));
  gap:12px
}
.vorstand-hero-stats>div{
  min-width:125px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  text-align:center
}
.vorstand-hero-stats strong{
  display:block;
  color:var(--fcl-yellow);
  font-size:1.55rem;
  line-height:1
}
.vorstand-hero-stats span{
  display:block;
  margin-top:7px;
  color:#fff;
  font-size:.68rem;
  font-weight:800;
  line-height:1.25;
  text-transform:uppercase
}

.vorstand-section{margin-top:48px}
.vorstand-section-heading-wrap{margin-bottom:24px}
.vorstand-section-heading{
  position:relative;
  margin:0 0 8px;
  padding-left:15px;
  color:var(--fcl-navy);
  font-size:clamp(1.65rem,3vw,2.25rem);
  line-height:1.15
}
.vorstand-section-heading::before{
  content:"";
  position:absolute;
  top:.13em;
  bottom:.13em;
  left:0;
  width:4px;
  border-radius:4px;
  background:var(--fcl-yellow)
}
.vorstand-section-heading-wrap>p{margin:0;color:var(--fcl-muted);font-size:.95rem}

.vorstand-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px
}
.vorstand-card{
  display:flex;
  min-width:0;
  overflow:hidden;
  flex-direction:column;
  border:1px solid var(--fcl-line);
  border-radius:15px;
  background:#fff;
  box-shadow:0 8px 26px rgba(4,35,57,.08);
  transition:transform .2s ease,box-shadow .2s ease
}
.vorstand-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(4,35,57,.14)}
.vorstand-photo{overflow:hidden;aspect-ratio:3/4;background:var(--fcl-mist)}
.vorstand-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.vorstand-card-content{
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  padding:18px 16px 17px;
  text-align:center
}
.vorstand-role{
  display:block;
  min-height:2.4em;
  margin-bottom:7px;
  color:var(--fcl-blue);
  font-size:.63rem;
  font-weight:900;
  line-height:1.25;
  letter-spacing:.055em;
  text-transform:uppercase
}
.vorstand-card h3{margin:0 0 15px;color:var(--fcl-ink);font-size:1rem;line-height:1.2}
.vorstand-email{
  display:inline-flex;
  min-height:34px;
  align-items:center;
  justify-content:center;
  margin-top:auto;
  padding:8px 13px;
  border-radius:6px;
  background:var(--fcl-blue);
  color:#fff;
  font-size:.69rem;
  font-weight:900;
  line-height:1;
  text-transform:uppercase
}
.vorstand-email:hover{background:var(--fcl-navy);color:#fff}
.vorstand-email--disabled,.vorstand-email--disabled:hover{background:#e7edf1;color:#718391}

.funktionaer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.funktionaer-card{
  display:flex;
  min-width:0;
  align-items:center;
  gap:18px;
  padding:17px 20px;
  border:1px solid var(--fcl-line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 20px rgba(4,35,57,.06)
}
.funktionaer-card--featured{
  grid-column:1/-1;
  align-items:stretch;
  padding:0;
  overflow:hidden
}
.funktionaer-photo{
  width:150px;
  min-height:170px;
  flex:0 0 150px;
  overflow:hidden;
  background:var(--fcl-mist)
}
.funktionaer-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.funktionaer-card--featured .funktionaer-content{align-self:center;padding:24px 24px 24px 4px}
.funktionaer-avatar{
  display:grid;
  width:50px;
  height:50px;
  flex:0 0 50px;
  place-items:center;
  border-radius:50%;
  background:var(--fcl-blue);
  color:#fff;
  font-size:.83rem;
  font-weight:900
}
.funktionaer-content{min-width:0}
.funktionaer-role{
  display:block;
  margin-bottom:4px;
  color:var(--fcl-blue);
  font-size:.62rem;
  font-weight:900;
  line-height:1.3;
  letter-spacing:.045em;
  text-transform:uppercase
}
.funktionaer-card h3{margin:0 0 4px;color:var(--fcl-ink);font-size:1rem;line-height:1.2}
.funktionaer-email{display:inline-block;overflow-wrap:anywhere;color:var(--fcl-blue);font-size:.82rem;font-weight:700}

.vorstand-contact-note{
  margin-top:44px;
  padding:24px 28px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--fcl-blue),#075f96);
  color:#fff;
  box-shadow:0 10px 28px rgba(8,119,185,.2)
}
.vorstand-contact-note h2{margin:0 0 5px;color:#fff;font-size:1.25rem}
.vorstand-contact-note p{margin:0;color:#e4f0f7;font-size:.9rem}

@media(max-width:1024px){
  .vorstand-hero{grid-template-columns:1fr}
  .vorstand-hero-stats{width:min(380px,100%)}
  .vorstand-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:780px){
  .vorstand-page{width:min(100% - 32px,680px);padding-top:28px}
  .vorstand-hero{padding:30px 26px}
  .vorstand-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .funktionaer-grid{grid-template-columns:1fr}
  .funktionaer-card--featured{grid-column:auto}
}
@media(max-width:520px){
  .vorstand-hero{gap:24px;padding:27px 20px;border-radius:14px}
  .vorstand-hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vorstand-hero-stats>div{min-width:0;padding:14px 10px}
  .vorstand-grid{grid-template-columns:1fr}
  .vorstand-card{display:grid;grid-template-columns:42% 58%}
  .vorstand-photo{height:100%;min-height:260px;aspect-ratio:auto}
  .vorstand-card-content{align-items:flex-start;justify-content:center;padding:20px 17px;text-align:left}
  .vorstand-role{min-height:0}
  .vorstand-email{margin-top:8px}
  .funktionaer-card{gap:13px;padding:15px}
  .funktionaer-card--featured{display:grid;grid-template-columns:110px minmax(0,1fr)}
  .funktionaer-photo{width:110px;min-height:165px;flex-basis:110px}
  .funktionaer-card--featured .funktionaer-content{padding:18px 14px}
  .vorstand-contact-note{padding:21px 20px}
}