/* Team-Karten-Raster (Variante A) — geteilt: Kreisbrandinspektion + Jugendfeuerwehr */

.containerIns {
  display: grid;
  /* Feste 300px-Karten, so viele nebeneinander wie passen; der Restplatz wird
     gleichmäßig zwischen ihnen verteilt (space-between). gap = Mindestabstand. */
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0;
  clear: both;
}
.containerIns .row { display: contents; }           /* Reihen auflösen → ein Raster */

/* Mobile: sobald nur noch eine Karte nebeneinander passt, füllt die Karte die
   volle Breite statt bei 300px stehen zu bleiben.
   Zwei 300px-Karten + 1rem gap brauchen 616px Inhaltsbreite; Blocksy zieht davon
   noch seinen mobilen Seitenabstand ab → Umbruch real bei ~660px Viewport.
   >> Falls beim Live-Test eine einzelne Karte noch bei 300px "hängt" bzw. zu
      früh auf volle Breite springt, ist diese 660px-Grenze der einzige Stellwert. */
@media (max-width: 660px) {
  .containerIns {
    grid-template-columns: 1fr;
  }
}

.containerIns .box {
  display: flex;
  flex-direction: column;
  background: #F4F5F7;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  padding: 1rem;
}
.containerIns .box .profile-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  height: auto;
  border-radius: 8px;
  margin: 0 0 .75rem;
  display: block;
}
.containerIns .box .name { margin: 0 0 .4rem; font-size: 1.15rem; line-height: 1.2; }
.containerIns .box .position {
  align-self: flex-start;
  background: rgba(200, 16, 46, .10);
  color: #C8102E;
  font-weight: 600;
  font-size: .8rem;
  padding: .15rem .6rem;
  border-radius: 6px;
  margin: 0 0 .5rem;
}
.containerIns .box .code-name { font-size: .9rem; color: #555; margin: 0 0 .35rem; }
.containerIns .box .responsibilities { font-size: .8rem; color: #777; line-height: 1.45; margin: 0; }

/* Textstapel-Container — genutzt vom Block UND von migrierten Karten (nach 40_kbi_enhance). */
/* flex:1 → füllt die Resthöhe der (im Raster gestreckten) Karte, damit der Kontakt-Button
   per margin-top:auto unten bündig sitzt — unabhängig von der Textmenge. */
.containerIns .box .box-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Leitung hervorgehoben (volle Breite, horizontal) — Foto in Rastergröße, Text sauber gestapelt */
.containerIns .box.is-lead {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  border-color: rgba(200, 16, 46, .35);
}
/* Gleiche Fotogröße wie die Rasterkarten (statt der früheren 150px). */
.containerIns .box.is-lead .profile-image {
  width: 220px;
  flex: 0 0 220px;
  margin: 0;
}
.containerIns .box.is-lead .box-body { flex: 1; }
.containerIns .box.is-lead .name { font-size: 1.4rem; }

@media (max-width: 600px) {
  .containerIns .box.is-lead { flex-direction: column; align-items: flex-start; }
  .containerIns .box.is-lead .profile-image { width: 100%; flex-basis: auto; }
}

/* Kontakt-Button (kfv-kontakt-Plugin) innerhalb der Karte */
/* margin-top:auto schiebt den Button ans untere Ende der (gestreckten) box-body,
   sodass er in allen Raster-Karten auf gleicher Höhe steht — unabhängig von der
   Textmenge darüber. Überschreibt das margin-top:.6rem aus kontakt.css.
   align-self:center → horizontal zentriert in der Karte. */
.box .kfv-kontakt-btn{ align-self:center; margin-top:auto; }
/* Mindestabstand 10px zum darüberstehenden Text: da margin-top:auto bei voll
   gefüllter Karte gegen 0 geht, tragen wir den Abstand am Element direkt vor dem
   Button. So bleiben 10px garantiert, während auto weiter den Restraum aufnimmt. */
.containerIns .box .box-body > *:has(+ .kfv-kontakt-btn){ margin-bottom:10px; }
/* Leitungs-Karte ist horizontal/zentriert → kein Auto-Push, fester Abstand. */
.box.is-lead .kfv-kontakt-btn{ margin-top:.8rem; }