/* ============================================================
   Kompetenzprofile — das Raster

   Masse aus Prototyp.dc.html Zeile 2384.

   `align-items: start` ist hier bedeutungstragend: Klappt eine Karte auf,
   soll nur sie waschsen. Ohne die Zeile zoege sie ihre Nachbarn in der
   Zeile auf dieselbe Hoehe und im Raster entstuenden leere Flaechen.
   ============================================================ */

.ps-profile {
  --ps-profile-gap: var(--space-5);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--ps-profile-min, 320px), 100%), 1fr));
  gap: var(--ps-profile-gap);
  align-items: start;
  margin-block: 0;
}

.ps-profile--abstand-eng  { --ps-profile-gap: var(--space-4); }
.ps-profile--abstand-weit { --ps-profile-gap: var(--space-6); }

/*
   Eine feste Spaltenzahl statt „so viele wie passen“. Unterhalb von 700
   Pixeln bleibt es beim Umbruch — dort steht jede Karte ohnehin allein,
   und eine Vorgabe von drei Spalten waere eine Zwangsjacke.

   minmax(0, 1fr) und nicht 1fr: Eine lange Rollenbezeichnung wuerde die
   Spalte sonst aufziehen, weil 1fr als Mindestbreite `auto` mitbringt.
*/
@media (min-width: 701px) {
  .ps-profile[data-profile-spalten] {
    grid-template-columns: repeat(var(--ps-profile-spalten, 3), minmax(0, 1fr));
  }
}