/* ============================================================
   Fall einer Auswahl

   Masse aus Prototyp.dc.html Zeile 1907-1913.
   ============================================================ */

.ps-wahl-fall {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-block: 0;
}

.ps-wahl-fall[hidden] { display: none; }

/*
   Die Ueberschrift des Falls. Sie steht auch dann da, wenn die
   Reiterleiste laeuft — dort wiederholt sie die gewaehlte Schaltflaeche und
   beantwortet die Frage "worauf schaue ich hier gerade".
*/
.ps-wahl-fall__titel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ps-wahl-fall__titel::before {
  content: "";
  flex: none;
  width: 26px;
  height: 1px;
  background: var(--highlight);
}


.ps-wahl-fall__text {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.65;
  color: var(--text-strong);
  text-wrap: pretty;
}

/* ---------- Die Rollen ---------- */

.ps-wahl-fall__rollen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px var(--space-4);
}

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

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

@media (max-width: 600px) {
  .ps-wahl-fall__text { font-size: var(--text-lg); }
}

/* ---------- Die Huelle um Text und Rollen ----------

   Auf breiten Bildschirmen verschwindet sie aus dem Layout: `display:
   contents` macht ihre Kinder zu Flex-Elementen der Spalte darueber, die
   Abstaende bleiben also unveraendert. Erst im Ausklappmodus wird sie zum
   Kasten, den man auf- und zuklappen kann.
*/

.ps-wahl-fall__inhalt { display: contents; }

/* ============================================================
   Ausklappen statt Reiterleiste

   Auf schmalen Bildschirmen wandern die Schaltflaechen aus der Leiste an
   ihren Fall — die Antwort geht dann direkt unter dem gedrueckten
   Stichwort auf. Umgeschaltet wird das von app.js, nicht von einer Media
   Query: Die Reiterleiste braucht ohnehin JavaScript, und zwei Quellen
   fuer dieselbe Entscheidung liefen frueher oder spaeter auseinander.
   ============================================================ */

[data-wahl-modus="akkordeon"] .ps-wahl-fall {
  gap: 0;
}

/* Die Versalzeile im Fall wiederholt nur das Stichwort, das jetzt direkt
   darueber auf der Schaltflaeche steht. */
[data-wahl-modus="akkordeon"] .ps-wahl-fall__titel { display: none; }

/*
   Der aufgeklappte Teil als eigenes Blatt.

   Er sitzt eingerueckt unter seiner Schaltflaeche und traegt die
   gedaempfte Flaeche der Tafel — die der Tafel selbst im Ausklappmodus
   fehlt. So gehoert sichtbar zusammen, was zusammengehoert.
*/
[data-wahl-modus="akkordeon"] .ps-wahl-fall__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--section-panel);
}

[data-wahl-modus="akkordeon"] .ps-wahl-fall__inhalt[hidden] { display: none; }

[data-wahl-modus="akkordeon"] .ps-wahl-fall__text {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-body);
}

/*
   "Unsere Rolle" bekommt eine eigene Zeile.

   In einer Reihe mit den Plaketten bricht die Beschriftung auf schmalen
   Geraeten mitten hinein. Als volle Breite im Umbruch steht sie sauber
   darueber — ohne dass die Plaketten ihre Reihe verlieren.
*/
[data-wahl-modus="akkordeon"] .ps-wahl-fall__rollen {
  gap: var(--space-3) 10px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  border-image: linear-gradient(to right, var(--border-subtle) 60%, transparent 60%) 1;
}

[data-wahl-modus="akkordeon"] .ps-wahl-fall__rollen-label {
  flex: 0 0 100%;
}