/* ============================================================
   Projektbeispiele

   Masse aus Prototyp.dc.html Zeile 2208-2240.

   Der Abschnitt steht auf dem dunklen Band. Die Farben kommen deshalb aus
   den --on-band-Token und nicht aus dem Farbschema — was auf Petrol liegt,
   bleibt auf Petrol, ob hell oder dunkel eingestellt ist.
   ============================================================ */

.ps-praxis {
  display: flex;
  flex-direction: column;
  margin-block: 0;
}

/* ---------- Die Reiterleiste ----------

   Ohne JavaScript bleibt sie weg: `hidden` steht im Markup, app.js nimmt
   es beim Verdrahten heraus. Eine Schaltflaeche, die nichts umschaltet,
   waere schlimmer als keine.
*/

.ps-praxis__leiste {
  display: grid;
  /* 9rem als Untergrenze, damit vier Beispiele auch auf dem Tablett in
     eine Reihe passen — bei 190px brach das vierte um und stand allein.
     Leere Spalten faltet auto-fit weg; die vorhandenen teilen sich also
     immer die volle Breite. */
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--space-4) var(--space-5);
  padding-bottom: var(--space-6);
}

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

.ps-praxis__reiter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-4) 0 0;
  border: 0;
  border-top: 2px solid var(--on-band-rand);
  background: transparent;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out);
}

.ps-praxis__reiter[aria-selected="true"] { border-top-color: var(--accent-base); }

.ps-praxis__nummer {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: #b3c8cd;
  transition: color var(--dur-base) var(--ease-out);
}

.ps-praxis__reiter[aria-selected="true"] .ps-praxis__nummer { color: var(--accent-base); }

.ps-praxis__reiter-text {
  font-size: var(--text-base);
  line-height: 1.45;
  color: #a9bfc4;
  text-wrap: pretty;
  transition: color var(--dur-base) var(--ease-out);
}

.ps-praxis__reiter:hover .ps-praxis__reiter-text,
.ps-praxis__reiter[aria-selected="true"] .ps-praxis__reiter-text { color: var(--on-band-strong); }

/* ---------- Der Stapel ----------

   Alle Tafeln liegen in derselben Rasterzelle. Der Stapel ist damit so
   hoch wie die hoechste Tafel — beim Wechsel springt nichts, und ein
   Wechsel weiter unten auf der Seite reisst den Text darunter nicht mit.
*/

.ps-praxis__stapel {
  display: grid;
  grid-template-areas: 'stapel';
  align-items: stretch;
}

/* ---------- Auf dem Telefon: wischen ----------

   Aus dem Stapel wird eine Spur. Vier Tafeln untereinander waeren ein
   halber Bildschirm Scrollweg, und die Reiterleiste oben verlaesse den
   Blick, bevor man unten ankommt.
*/

/* Die Leiste wird zum Seitenanzeiger: nur die Nummern, nebeneinander.
   Untereinander waeren vier Titel eine halbe Bildschirmhoehe Vorspann vor
   dem ersten Beispiel — und der Titel steht ohnehin auf der Tafel. */

[data-praxis-modus="wischen"] .ps-praxis__leiste {
  display: flex;
  gap: var(--space-2);
  padding-bottom: var(--space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

[data-praxis-modus="wischen"] .ps-praxis__leiste::-webkit-scrollbar { display: none; }

[data-praxis-modus="wischen"] .ps-praxis__reiter {
  position: relative;
  flex: 1 0 3.5rem;
  align-items: center;
  /* 44 Pixel hoch: so gross wie eine Fingerkuppe. */
  padding: var(--space-4) 0 var(--space-3);
}

[data-praxis-modus="wischen"] .ps-praxis__nummer { font-size: var(--text-sm); }

[data-praxis-modus="wischen"] .ps-praxis__reiter-text {
  /* Fuer Screenreader bleibt der Titel die Beschriftung des Reiters. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[data-praxis-modus="wischen"] .ps-praxis__stapel {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

[data-praxis-modus="wischen"] .ps-praxis__stapel::-webkit-scrollbar { display: none; }

[data-praxis-modus="wischen"] .ps-praxis-fall {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* ---------- Im Editor ----------

   Dort stehen alle Tafeln untereinander: Ein Stapel mit sichtbarer
   Oberster liesse die anderen unerreichbar, und eine Spur mit Ueberlauf
   waere eine Falle.
*/

.editor-styles-wrapper .ps-praxis__stapel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}