/* ==========================================================================
   Nur fuer die Ausgabe „wege" (tutorial.trainexus.de), Web UND PDF.
   theme.css bleibt unangetastet: es ist die gemeinsame Quelle aller Ausgaben,
   und diese Seite ist die einzige mit Prozessleiste, Zielwahl und Bewegtbild.
   Farben/Maße kommen aus tokens.css (via theme.css), hier wird kein Wert
   neu erfunden. Keine Versalien (trainexus_ci/REGELN.md).
   ========================================================================== */

/* --- Bewegtbild: Video im Web, Standbild im Druck ------------------------- */
/* Eine Quelle, zwei Ausgaben (src/lib/remark-medien.mjs). Base.astro setzt
   `body.web` bzw. `body.print`; genau daran haengt die Umschaltung. */
body.web .tx-bewegtbild .nur-druck { display: none; }
body.print .tx-bewegtbild .nur-web { display: none; }

.tx-bewegtbild {
  margin: 1.5rem 0;
  padding: 0;
  break-inside: avoid;
}
.tx-bewegtbild video,
.tx-bewegtbild img {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  background: var(--flaeche);
}
.tx-bewegtbild figcaption {
  margin-top: .45rem;
  font-size: .85rem;
  color: var(--muted);
}
/* Im Druck sagt die Unterschrift, dass es dazu eine Bewegung im Web gibt —
   sonst wundert sich die lesende Person ueber ein Standbild ohne Grund. */
body.print .tx-bewegtbild figcaption::after {
  content: " (auf der Webseite als kurzes Video)";
}

/* --- Prozessleiste -------------------------------------------------------- */
/* Der seitliche Einzug ist derselbe wie bei `.prose` (theme.css: padding
   .6rem 2rem 2rem). Ohne ihn standen die Schritte zwei Zentimeter weiter links
   als der Fliesstext und der Kopf darueber — es sah aus, als gehoerten sie
   nicht zum Dokument (Pauls Befund 28.09.2026). */
.tx-prozess { margin: 1.75rem 0 2.25rem; padding: 0 2rem; break-inside: avoid; }
.tx-prozess ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  counter-reset: none;
}
.tx-prozess li { margin: 0; }
.tx-prozess a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .7rem .4rem .45rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
  color: var(--ink);
  text-decoration: none;
  font-size: .88rem;
  line-height: 1.2;
}
.tx-prozess a:hover { border-color: var(--doc-farbe); }
.tx-prozess-nr {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--doc-farbe);
  color: var(--tx-weiss, #fff);
  font-size: .78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Im PDF ist ein Sprunglink sinnlos; die Leiste bleibt als Inhaltsuebersicht
   stehen, aber ohne Knopf-Anmutung. */
body.print .tx-prozess a { border-color: var(--linie); background: transparent; }

/* --- Zielsatz im Kopf eines Weges ---------------------------------------- */
/* Der Kopf ist eine Vollton-Flaeche in der Gattungsfarbe (theme.css). Der Satz
   darf deshalb NICHT die Gattungsfarbe tragen, sonst steht Orange auf Orange
   und verschwindet. Er erbt die Schriftfarbe des Kopfes und hebt sich ueber
   Gewicht und Groesse ab. */
.doc-header .tx-ziel {
  margin: .4rem 0 .5rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: inherit;
}

/* --- Startseite: „Was moechten Sie tun?" --------------------------------- */
/* `min(100%, …)`, damit die Karten auf schmalen Geraeten nicht breiter werden
   als der Platz und die Seite waagerecht scrollt (Codex-Review 26.09.2026). */
.tx-zielwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; margin: 0 0 2.5rem; }
.tx-ziel-karte {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--doc-farbe);
  border-radius: var(--radius);
  background: var(--karte);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--schatten);
}
.tx-ziel-karte:hover { border-color: var(--doc-farbe); }
.tx-ziel-karte .rolle { font-size: .72rem; letter-spacing: .06em; color: var(--accent-dark); font-weight: 700; }
.tx-ziel-karte .ziel { font-size: 1.08rem; font-weight: 600; }
.tx-ziel-karte .was { font-size: .92rem; color: var(--muted); }

.tx-abschnitt { margin: 2.5rem 0 1rem; }
.tx-abschnitt h2 { margin: 0 0 .3rem; }
.tx-abschnitt p { margin: 0 0 1rem; color: var(--muted); }

.tx-themenliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .75rem; }
.tx-themenliste a {
  display: block;
  padding: .8rem 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  background: var(--karte);
  text-decoration: none;
  color: inherit;
}
.tx-themenliste a:hover { border-color: var(--doc-farbe); }
.tx-themenliste .t { font-weight: 600; display: block; }
.tx-themenliste .u { font-size: .88rem; color: var(--muted); }

/* --- Sprungziele der Prozessleiste --------------------------------------- */
/* Die Navigationsleiste steht fest am oberen Rand. Ohne diesen Abstand landet
   die angesprungene Ueberschrift darunter und ist nicht zu sehen. */
body.web .prose h2 { scroll-margin-top: 5rem; }

/* Noch nicht gedrehtes Bewegtbild: ein sichtbarer Platz statt eines toten
   Players. Der Bauprüfer zählt diese Stellen ohnehin mit auf. */
.tx-bewegtbild-platz {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  padding: 1.25rem;
  border: 2px dashed var(--tx-linie, #d7d2cb);
  border-radius: 10px;
  background: var(--tx-flaeche-leise, #faf8f5);
  color: var(--tx-text-leise, #6b6660);
  text-align: center;
}
.tx-bewegtbild-platz strong { font-size: .95rem; }
.tx-bewegtbild-platz span { font-size: .9rem; }
body.print .tx-bewegtbild-fehlt { display: none; }

/* Rückweg zur Startseite. Steht über dem Dokumentkopf, nicht in der Navbar:
   dort sucht ihn niemand, wenn man mitten im Lesen ist. */
.tx-zurueck {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.1rem;
  padding: .35rem .7rem .35rem .55rem;
  border: 1px solid var(--tx-linie, #d7d2cb);
  border-radius: 999px;
  background: var(--tx-flaeche-leise, #faf8f5);
  color: var(--tx-text-leise, #6b6660);
  font-size: .9rem;
  text-decoration: none;
}
.tx-zurueck:hover {
  border-color: var(--tx-akzent, #b05400);
  color: var(--tx-akzent, #b05400);
}