/* ============================================================
   Ein Projektbeispiel

   Masse aus Prototyp.dc.html Zeile 2227-2240.
   ============================================================ */

.ps-praxis-fall {
  grid-area: stapel;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--on-band-rand);
  border-radius: var(--radius-lg);
  background: var(--on-band-flaeche);
  margin-block: 0;
}

/*
   Verborgen, aber nicht weg.

   `visibility: hidden` statt `display: none`: Nur so behaelt die Tafel
   ihren Platz im Stapel und haelt dessen Hoehe. Waere sie ausgeblendet,
   schrumpfte der Stapel auf die gerade sichtbare Tafel — und die Seite
   ruckte bei jedem Wechsel.
*/
.ps-praxis-fall[data-verborgen] {
  visibility: hidden;
  pointer-events: none;
}

.ps-praxis-fall__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--on-band-rand);
}

.ps-praxis-fall .ps-praxis-fall__titel {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  font-weight: var(--weight-medium);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--on-band-strong);
  text-wrap: pretty;
}

/*
   Die Punkte nebeneinander, in gleich hohen Zeilen: `grid-auto-rows: 1fr`
   laesst Ausgangslage, Inhalt und Ergebnis auf einer Grundlinie beginnen,
   auch wenn einer davon doppelt so lang ist.
*/
.ps-praxis-fall__punkte {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  grid-auto-rows: 1fr;
  align-content: start;
  gap: var(--space-5) var(--space-8);
}

/* ---------- Unsere Rolle ----------

   Die Trennlinie laeuft nur ueber 60 Prozent und laeuft dann aus —
   dieselbe Fassung wie in der Karte. Eine durchgezogene Linie wuerde die
   Tafel optisch zerteilen.
*/

.ps-praxis-fall__rollen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--on-band-rand);
  border-image: linear-gradient(to right, var(--on-band-rand) 60%, transparent 60%) 1;
}

.ps-praxis-fall__rollen-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-band-label);
}

/* ---------- Erbracht von … ----------

   `margin-top: auto` schiebt den Satz an den unteren Rand der Tafel.
   Im Stapel sind alle Tafeln gleich hoch; ohne die Zeile stuende der Satz
   bei der kuerzesten Tafel in der Mitte und bei der laengsten unten.
*/

.ps-praxis-fall__erbracht {
  margin: auto 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--on-band-rand);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--on-band-label);
  text-wrap: pretty;
}

/* ---------- Schmale Breiten ---------- */

@media (max-width: 600px) {
  .ps-praxis-fall { padding: var(--space-5); }
  .ps-praxis-fall__punkte { grid-auto-rows: auto; }
}