/* Seitenspezifischer Stil fuer grounding-exercise.
   Ausgelagert aus der Seite, weil ihn jetzt fuenf Sprachfassungen
   brauchen und er sonst fuenfmal gepflegt werden muesste. */

/* Nur diese Seite. Wie bei der Karte bewusst inline, damit nicht fuer eine
   einzelne Seite die Cache-Version aller 30 Dateien hochgezaehlt wird. */

.ex-intro { padding: clamp(90px, 11vw, 140px) 28px 0; }
.ex-inner { max-width: 720px; margin: 0 auto; }
.ex-intro p { color: var(--ink-soft); max-width: 33rem; }

.ex-stage-wrap { padding: 34px 28px clamp(40px, 5vw, 60px); }

.ex-stage {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: clamp(30px, 5vw, 54px);
  text-align: center;
}

/* Fortschritt der Gesamtminute. Bewusst ein Balken und kein Kreis: ein
   pulsierender Kreis sieht nach Atemuebung aus, und darum geht es hier
   nur im letzten Viertel. */
.ex-track {
  height: 3px;
  background: var(--hairline);
  margin: 0 0 30px;
  overflow: hidden;
}
.ex-bar {
  height: 100%;
  width: 0%;
  background: var(--gold);
  transform-origin: left center;
}

/* Alle wechselnden Textfelder reservieren ihren Platz im Voraus, sonst
   springt bei jedem Schrittwechsel die halbe Seite.
   WICHTIG: min-height muss gegen die ZEILENHOEHE gerechnet werden, nicht
   gegen die Schriftgroesse. "min-height: 1.2em" bei Zeilenhoehe 1.65
   reserviert weniger, als eine einzige Zeile hoch ist. Deshalb hier
   ueberall line-height explizit gesetzt und min-height als Vielfaches
   davon. */
.ex-step-no {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-text);
  margin: 0 0 12px;
  line-height: 1.4;
  min-height: 1.4em;
}
.ex-cue {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4.2vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin: 0 0 14px;
  min-height: 2.4em;          /* zwei Zeilen, damit lange Hinweise passen */
}
.ex-detail {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 30rem;
  margin: 0 auto;
  min-height: 6.4em;          /* vier Zeilen */
}
.ex-controls { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ex-next {
  margin-top: 18px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
  min-height: 1.5em;
}

@media (max-width: 560px) {
  /* schmaler bricht laenger um, also mehr reservieren */
  .ex-cue { min-height: 2.4em; }
  .ex-detail { min-height: 9.6em; }
}

/* Schrittliste unter der Buehne, auch ohne Start lesbar und damit auch
   fuer Suchmaschinen und Vorleseprogramme vorhanden. */
.ex-list { list-style: none; margin: 30px 0 0; padding: 0; text-align: left; }
.ex-list li {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  gap: 0 18px;
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
  font-size: 0.92rem;
}
.ex-list li:first-child { border-top: 0; }
.ex-list .t {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-text);
  padding-top: 2px;
}
.ex-list li.on { color: var(--ink-strong); font-weight: 600; }

.ex-notes { padding: 0 28px clamp(84px, 10vw, 128px); }
.ex-notes h2 {
  font-size: clamp(1.18rem, 2.4vw, 1.42rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 2.4em 0 0.4em;
  padding-top: 0.8em;
  border-top: 1px solid var(--hairline);
  max-width: 33rem;
}
.ex-notes h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.ex-notes p { margin: 0 0 1.05em; max-width: 33rem; color: var(--ink-soft); }
.ex-notes p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .ex-list li { grid-template-columns: 1fr; gap: 2px; }
}

/* Wer Bewegung reduziert hat, bekommt keinen laufenden Balken, sondern
   nur die Schrittwechsel. Ein gleitender Fortschritt ist genau das, was
   bei Bewegungsempfindlichkeit stoert. */
@media (prefers-reduced-motion: reduce) {
  .ex-bar { transition: none !important; }
}