/* ==========================================================
   VfB Zandt – Abteilungs-Styles (scoped, clean, final)
   Ziel: konsolidiert, ohne Doppelungen – Layout stabil
   ========================================================== */

/* ---------- Basis & Variablen ---------- */
.vfb-dept{
  --rot:#d40000;        /* Vereinsrot */
  --txt:#111;
  --muted:#666;
  --line:#ececec;
  --chip:#f7f7f7;
  --card:#fff;

  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  color:var(--txt);
}
.vfb-dept *{ box-sizing:border-box }
.vfb-dept img{ max-width:100%; height:auto; display:block }
.vfb-dept a{ color:var(--rot); text-decoration:none }
.vfb-dept a:hover{ text-decoration:underline }
.vfb-dept .vfb-lead{ margin:.25rem 0 1rem 0; opacity:.95 }
.vfb-dept.vfb-no-lead .vfb-lead{ display:none } /* optional Lead ausblendbar */

/* ---------- Überschriften (vereinheitlicht) ---------- */
.vfb-dept h1, .vfb-dept h2, .vfb-dept h3, .vfb-dept h4{
  color:var(--rot);
  font-weight:800;
  letter-spacing:.01em;
  margin:.2rem 0 .6rem;
}
.vfb-dept h2{ font-size:clamp(1.25rem,1.2vw + .8rem,1.6rem) } /* ohne linken Vertikalstrich */

/* ---------- Karten & Layout ---------- */
.vfb-dept .vfb-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1rem;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.vfb-dept .vfb-card:hover{ box-shadow:0 6px 20px rgba(0,0,0,.06) }

/* Grid + 2-Spalten-Variante */
.vfb-dept .vfb-grid{ display:grid; gap:1rem }
.vfb-dept .vfb-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:700px){ .vfb-dept .vfb-grid-2{ grid-template-columns:1fr } }

/* ---------- Abteilungsleitung (Standard) ---------- */
.vfb-dept .vfb-leader{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:1.25rem;
  align-items:center;
}
.vfb-dept .vfb-leader-photo{
  width:180px; height:180px; object-fit:cover;
  border-radius:14px; border:1px solid var(--line); background:#fff;
}
.vfb-dept .vfb-contacts{
  list-style:none; margin:.4rem 0 0; padding:0;
  display:flex; gap:.45rem; flex-wrap:wrap;
}
@media (max-width:900px){
  .vfb-dept .vfb-leader{ grid-template-columns:150px 1fr }
  .vfb-dept .vfb-leader-photo{ width:150px; height:150px }
}
@media (max-width:520px){
  .vfb-dept .vfb-leader{ grid-template-columns:1fr; align-items:start }
  .vfb-dept .vfb-leader-photo{ width:136px; height:136px }
}

/* ---------- Chips, Buttons, Meta ---------- */
.vfb-dept .vfb-pill{
  display:inline-block; padding:.18rem .55rem; border-radius:999px;
  background:var(--chip); border:1px solid var(--line);
  font-weight:700; font-size:.92rem; line-height:1.25;
}
.vfb-dept .vfb-btn{
  display:inline-block; background:var(--rot); color:#fff; text-decoration:none;
  padding:.5rem .8rem; border-radius:9999px; font-weight:800;
}
.vfb-dept .vfb-btn:hover{ filter:brightness(.96) }
.vfb-dept .vfb-btn:focus-visible{ outline:3px solid rgba(0,0,0,.2); outline-offset:2px }
.vfb-dept .vfb-btn.ghost{ background:transparent; border:1px solid var(--rot); color:var(--rot) }

.vfb-dept .vfb-meta{
  margin-top:.6rem; color:var(--muted); font-size:.92rem;
  border-top:1px dashed var(--line); padding-top:.5rem;
}

/* ---------- Kurs-Infos: Label | Wert einzeilig ---------- */
.vfb-dept .vfb-card h3{ margin:0 0 .5rem; font-size:1.05rem }
.vfb-dept .vfb-info{
  display:grid; grid-template-columns:max-content 1fr;
  column-gap:.6rem; row-gap:.35rem; align-items:center;
}
.vfb-dept .vfb-info .vfb-label{ white-space:nowrap; display:inline-block }
.vfb-dept .vfb-info .vfb-value{ margin:0 }

/* ---------- Nützliche Helfer ---------- */
.vfb-dept .sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Leiter-Layout: „Quote“-Variante (falls genutzt) ---------- */
.vfb-dept .vfb-leader-quote{
  display:grid;
  grid-template-columns:minmax(260px,340px) 1fr; /* links Bild/Infos | rechts Zitat */
  gap:1.25rem;
  align-items:center;                            /* Zitat mittig relativ zur linken Spalte */
}
.vfb-dept .vfb-leader-quote.vfb-card{           /* falls noch vfb-card dran: Rahmen neutralisieren */
  border:0; box-shadow:none; background:transparent; padding:0;
}
@media (max-width:640px){ .vfb-dept .vfb-leader-quote{ grid-template-columns:1fr } }

.vfb-dept .vfb-leader-title{ margin:0 0 .6rem; font-weight:800; color:var(--rot); letter-spacing:.01em }
.vfb-dept .vfb-portrait{ margin:0 }
.vfb-dept .vfb-portrait figcaption{ margin-top:.6rem }
.vfb-dept .vfb-name{ display:block; font-weight:800 }
.vfb-dept .vfb-mail{ display:inline-block; margin-top:.3rem; font-weight:700; color:var(--rot) }
.vfb-dept .vfb-portrait-list{ display:grid; gap:.8rem }

/* Zitat-Karte (modern, in Vereinsfarben) */
.vfb-dept .vfb-quote{
  position:relative;
  padding:1.25rem 1.5rem;
  background:var(--card);
  border:1px solid var(--line);
  border-left:8px solid var(--rot);
  border-radius:14px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  color:var(--txt);
  align-self:center;
}
.vfb-dept .vfb-quote::before{
  content:"„";
  position:absolute; left:.5rem; top:.1rem;
  font-size:5rem; line-height:1;
  color:var(--rot); opacity:.12; pointer-events:none;
}
.vfb-dept .vfb-quote p{
  margin:0;
  font-size:clamp(1.25rem, 2.2vw + .5rem, 1.9rem);
  line-height:1.35; font-weight:800;
}

/* ------ Leiter-Layout: „Hero“-Variante (Bild links | Name+Mail+Zitat rechts) ------ */
.vfb-dept .vfb-leader-hero{
  display:grid;
  grid-template-columns:minmax(260px,340px) 1fr;
  gap:1.25rem;
  align-items:center; /* vertikal zentriert zur Bildhöhe */
}
@media (max-width:640px){
  .vfb-dept .vfb-leader-hero{ grid-template-columns:1fr; align-items:start }
}

/* rechter Textblock neben dem Bild */
.vfb-dept .vfb-leader-text{ display:grid; gap:.65rem }
.vfb-dept .vfb-leader-inline{
  display:flex; flex-wrap:wrap; gap:.4rem .75rem;
  align-items:baseline; margin:0;
}
.vfb-dept .vfb-leader-inline .vfb-name{ font-weight:800; color:var(--rot) }
.vfb-dept .vfb-leader-inline .vfb-mail{ font-weight:700; color:var(--rot); text-decoration:none }
.vfb-dept .vfb-leader-inline .vfb-mail:hover{ text-decoration:underline }

/* Zitat etwas kompakter in der Hero-Variante */
.vfb-dept .vfb-quote.vfb-quote--tight{ padding:1rem 1.25rem; border-left-width:8px }
.vfb-dept .vfb-quote.vfb-quote--tight p{
  font-size:clamp(1.15rem, 1.8vw + .5rem, 1.6rem);
}

/* ---------- Joomla-Title optional ausblenden (falls nötig) ---------- */
.item-page h1.page-title{ display:none }
/* Name der Abteilungsleitung: Zeilenumbruch + optische Hervorhebung */
.vfb-dept .vfb-leader-inline .vfb-name{
  display:block;                                 /* → Mail rutscht in die nächste Zeile */
  font-weight:900;
  font-size:clamp(1.1rem, 1vw + .6rem, 1.35rem); /* etwas größer, responsive */
  color:var(--rot);
  line-height:1.15;
}


/* kleiner Abstand zur Mailzeile */
.vfb-dept .vfb-leader-inline .vfb-mail{
  margin-top:.1rem;
}