/* ============================================================================
   BECRO Trading — becro-pages.css
   Die Scroll-Choreografie der beiden Inhalts-Unterseiten: mentoring.html und
   psychologie-prinzipien.html. Eingebunden NACH becro-dark.css und
   becro-micro.css, damit sie bei gleicher Spezifitaet per Quellreihenfolge
   gewinnt. index.html bindet die Datei NICHT ein — dort macht becro-motion.js
   dieselbe Arbeit mit GSAP.

   Warum hier kein GSAP
   --------------------
   Die beiden Seiten laden es nicht, und sie brauchen es nicht. Was hier
   passiert, sind Uebergaenge auf `translate`, `scale` und `opacity`, die an
   einer einzigen Klasse haengen: `.in`, gesetzt vom IntersectionObserver in
   becro-dark.js. Das Skript daneben (becro-pages.js) macht genau zwei Dinge,
   die CSS nicht kann — es zaehlt die Prinzipien-Nummer mit und nummeriert
   die Haekchenliste durch.

   Drei Regeln, die hier ueberall gelten
   -------------------------------------
   1. Bewegt werden `translate`, `scale` und `opacity` — nie `transform`.
      Das ist kein Geschmack: `transform` gehoert dem Anheben beim Hover
      (becro-dark.css, Abschnitt 21). Weil `translate` und `scale` eigene
      Eigenschaften sind, koennen Auftritt und Hover gleichzeitig laufen,
      ohne sich zu ueberschreiben. Eine Ausnahme steht unten an ihrer Stelle
      und ist dort begruendet.
   2. Die Werte kommen aus becro-dark.css: `--reveal-y` (56px), `--reveal-t`
      (720ms), `--reveal-ease` (power3.out) und `--reveal-back` (mit
      Ueberschwung). Hier wird nur die RICHTUNG gesetzt, nicht das Tempo.
   3. Auf dem Handy dieselbe Choreografie auf kuerzeren Wegen — aus
      demselben Grund wie auf der Startseite: 56px sind auf 1440px ein Achtel
      einer Spalte und auf 390px ein Siebtel des ganzen Bildes.

   Ganz unten schaltet `prefers-reduced-motion: reduce` alles ab.

   Der ?v=N-Parameter muss bei jeder Aenderung hochgezaehlt werden.
   ========================================================================== */


/* ══ 1 · Die Regler ═══════════════════════════════════════════════════════ */
:root {
  --pg-x:      56px;    /* waagerechter Weg eines Einflugs */
  --pg-pop:    0.9;     /* Startgroesse fuer alles, was ploppt */
  --pg-casc:   60ms;    /* Versatz in der Haekchen-Kaskade */
  --pg-dim:    0.5;     /* Deckkraft der gerade nicht aktiven Prinzipien */
}

@media (max-width: 767px) {
  :root { --pg-x: 34px; }
}


/* ══ 2 · Psychologie: die zehn Prinzipien als Buehne ══════════════════════
   Links eine Spalte, die mitzaehlt, rechts die Karten. Die linke Spalte
   klebt (`position: sticky`) — kein Pinning, kein Skript, das etwas aus dem
   Fluss nimmt und danach wieder hineinstellt. Damit gibt es auch nichts, was
   beim Ein- und Ausklinken springen koennte: der Kasten steht die ganze Zeit
   im Fluss und wird nur an seiner Position festgehalten, solange die Buehne
   im Bild ist.

   `align-items: start` ist die Bedingung dafuer, dass es ueberhaupt klebt.
   Im Raster ist ein Element sonst so hoch wie seine Zeile — und ein Kasten,
   der bereits die volle Hoehe hat, kann nirgendwohin kleben. Genau daran
   scheitern die meisten Sticky-Spalten.

   `top` ist derselbe Wert wie beim FAQ-Verzeichnis und beim
   Rechtstext-Verzeichnis (104px) plus etwas Luft fuer die grosse Ziffer. */
.pr-stage {
  display: grid;
  grid-template-columns: minmax(200px, .38fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: start;
}

/* Die Karten stehen jetzt untereinander, nicht mehr zu zweit nebeneinander:
   die Buehne braucht EINE Spur, an der die Nummer entlangzaehlen kann. */
.pr-stage .principles { grid-template-columns: minmax(0, 1fr); }

.pr-marker {
  position: sticky;
  top: 116px;
  align-self: start;
  /* Der Kasten ist reine Anzeige. Jede Nummer und jeder englische
     Untertitel stehen daneben in ihrer Karte — vorgelesen wuerde hier alles
     ein zweites Mal, und zwar in einer Reihenfolge, die sich beim Scrollen
     aendert. */
  pointer-events: none;
}

.pr-marker-num {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.4rem, 7vw, 6rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--text);
  text-shadow: 0 0 34px rgba(var(--glow-rgb), .34);
}
.pr-marker-en {
  display: block;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--text-2);
  /* Die Untertitel sind unterschiedlich lang. Ohne Mindesthoehe wandert die
     Trennlinie darueber bei jedem Wechsel — der Kasten zappelte dann, statt
     nur die Zahl zu wechseln. Drei Zeilen decken den laengsten ab
     („Adaptability Is the Key to Market Mastery"). */
  min-height: 3.8em;
}

/* Der Wechsel: die neue Zahl klappt von unten herein. Bewusst nur ein
   Auftritt und kein Abgang — die alte Zahl ist im ersten Bild der Animation
   schon auf `opacity: 0`, und ein Wechsel, der erst etwas hinausfahren
   muesste, waere genau das Gegenteil von snappy. Ein Abgang haette
   ausserdem einen Zeitgeber gebraucht, der den Text auf halber Strecke
   tauscht; so ist der Tausch und der Start der Animation dasselbe Bild. */
.pr-marker-num.is-swap { animation: becro-pr-flip 380ms var(--reveal-back) 1; }
.pr-marker-en.is-swap  { animation: becro-pr-fade 380ms var(--reveal-ease) 1 60ms both; }

@keyframes becro-pr-flip {
  0%   { opacity: 0; transform: perspective(600px) rotateX(-52deg) translateY(28%); }
  100% { opacity: 1; transform: perspective(600px) rotateX(0)      translateY(0); }
}
@keyframes becro-pr-fade {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- Die Karten ---------------------------------------------------------
   Sie fliegen von RECHTS ein, aus der Richtung, in der sie stehen. Den
   Versatz von Karte zu Karte setzt becro-dark.js ueber `--reveal-delay`
   (`.principles` steht dort in STAGGER_GROUPS).

   Nur dort, wo es die Buehne gibt. Unter 900px stehen die Karten wieder
   untereinander und laufen ueber das gewoehnliche Reveal von unten herein —
   ohne Spalte daneben hat „von rechts" keinen Bezugspunkt mehr, und auf
   390px waere der Weg breiter als der Seitenrand: die Karte stuende
   waehrend des Flugs neben dem Bild. */
@media (min-width: 901px) {
  .principles .principle.reveal { translate: var(--pg-x) 0; }
  .principles .principle.reveal.in { translate: 0 0; }

  /* Der englische Untertitel steht auf dieser Breite gross in der Spalte
     links — in der Karte daneben stuende er ein zweites Mal, in derselben
     Zeile, in derselben Farbe. Er wird deshalb ausgeblendet.

     Aber NICHT mit `display: none`: das naehme ihn auch aus dem
     Vorlesebaum, und der Kasten links ist `aria-hidden` — der Untertitel
     waere damit fuer Screenreader ganz weg. Diese sechs Zeilen nehmen ihm
     nur die Flaeche; gelesen wird er weiterhin. */
  .pr-stage .principle .en {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* `.principle` ist sonst nicht positioniert — ohne das haenge der
     ausgeblendete Text am naechsten positionierten Vorfahren. */
  .pr-stage .principle { position: relative; }
}

/* Die aktive Karte traegt vollen Kontrast, die uebrigen sind gedaempft.

   Gedaempft wird ueber `opacity` — dieselbe Eigenschaft, die auch das
   Reveal benutzt. Damit sich beide nicht widersprechen, greift die
   Daempfung ausdruecklich erst, wenn die Karte drin ist (`.in`), und die
   Buehne muss dafuer `is-live` tragen. Die Klasse setzt becro-pages.js nur
   dort, wo es die Spalte auch wirklich gibt: ohne Skript und auf dem Handy
   stehen alle zehn Karten gleich hell da. */
.principles.is-live .principle.in {
  transition:
    opacity 320ms var(--reveal-ease),
    transform 240ms var(--ease),
    box-shadow 240ms var(--ease),
    border-color 240ms var(--ease);
  opacity: var(--pg-dim);
}
.principles.is-live .principle.in.is-active {
  opacity: 1;
  border-color: var(--accent-line);
  box-shadow: var(--shadow-card-lift), var(--glow-2);
}

@media (max-width: 900px) {
  /* Kein Sticky, keine Daempfung: die Karten stehen untereinander und
     laufen ueber das normale Reveal herein. Die Buehne faellt zurueck auf
     einen ganz gewoehnlichen Block — das Raster darin regelt becro-dark.css
     wie bisher. */
  .pr-stage  { display: block; }
  .pr-marker { display: none; }
  .principles.is-live .principle.in { opacity: 1; }
}


/* ══ 3 · Mentoring: die vier Kennzahlen ploppen ═══════════════════════════
   Kacheln werden hingestellt, nicht hereingeschoben. Also kein Weg, sondern
   eine Groesse mit Ueberschwung. Den Versatz setzt becro-dark.js
   (`.stats` steht in STAGGER_GROUPS, 80ms je Kachel).

   `translate: none` nimmt den senkrechten Weg aus `.reveal` weg — sonst
   liefen Fahrt und Groesse gleichzeitig, und aus dem Ploppen wuerde ein
   Schweben. */
.stats .stat.reveal {
  translate: none;
  scale: var(--pg-pop);
  transition:
    opacity var(--reveal-t, 720ms) var(--reveal-ease) var(--reveal-delay, 0ms),
    scale 560ms var(--reveal-back) var(--reveal-delay, 0ms),
    transform 240ms var(--ease),
    box-shadow 240ms var(--ease),
    border-color 240ms var(--ease);
}
.stats .stat.reveal.in { scale: 1; }


/* ══ 4 · Mentoring: die Haekchen-Kaskade ══════════════════════════════════
   Sechzehn Zeilen, 60ms auseinander: das Haekchen zeichnet sich, die Zeile
   schiebt von links nach. Ausgeloest wird das vom Panel, in dem die Liste
   steht — es traegt `.reveal`, und wenn es `in` ist, laeuft die Kaskade.
   Kein eigener Beobachter fuer sechzehn Zeilen.

   `--casc-i` (die laufende Nummer je Zeile) setzt becro-pages.js. Das ist
   die einzige Zahl, die CSS hier nicht selbst kennt.

   AUSNAHME von der Regel oben: das Haekchen zeichnet sich ueber
   `stroke-dashoffset`, und das ist weder `transform` noch `opacity`. Es
   gibt keinen anderen Weg, eine Linie entstehen zu lassen — ein
   ueberschobenes Rechteck waere eine Maske ueber einem 16px-Icon und
   teurer als der Strich selbst. Die Flaeche ist winzig und es laeuft
   einmal. */
.check-grid li {
  translate: calc(var(--pg-x) * -1) 0;
  opacity: 0;
  transition:
    translate 620ms var(--reveal-ease) calc(var(--casc-i, 0) * var(--pg-casc)),
    opacity 620ms var(--reveal-ease) calc(var(--casc-i, 0) * var(--pg-casc));
}
.check-grid svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 420ms var(--reveal-ease)
              calc(var(--casc-i, 0) * var(--pg-casc) + 120ms);
}
.reveal.in .check-grid li { translate: 0 0; opacity: 1; }
.reveal.in .check-grid svg path { stroke-dashoffset: 0; }

/* Ohne Skript gibt es kein `--casc-i` — dann laufen alle Zeilen gleichzeitig
   statt nacheinander, und das ist der richtige Rueckfall. Ohne `.in` am
   Panel (kein IntersectionObserver) bliebe die Liste allerdings unsichtbar.
   Deshalb dieses Netz: es zieht die Startwerte zurueck, sobald das Skript
   sich nicht gemeldet hat. */
html:not(.pages) .check-grid li { translate: none; opacity: 1; }
html:not(.pages) .check-grid svg path { stroke-dashoffset: 0; }


/* ══ 5 · Mentoring: die vier Merkmale wechselseitig ═══════════════════════
   `.trait-grid` ist zweispaltig: die Karten der linken Spalte kommen von
   links, die der rechten von rechts. Beim Zusammenklappen auf eine Spalte
   (unter 900px) bleibt der Wechsel bestehen und liest sich dort als
   Zickzack — beides ist richtig, weil sich die Richtung in beiden Faellen
   aus der Position ergibt. */
/* Der Weg fuehrt aus der Spalte heraus: eine Karte steht waehrend des Flugs
   bis zu 56px neben ihrem Platz, auf einem schmalen Schirm also neben dem
   Bild. `overflow-x: clip` faengt das ab — nicht `hidden`, das machte aus
   dem Abschnitt einen Scroll-Container und finge Ankersprünge ab. Dieselbe
   Loesung wie bei `#ansatz` und `#ueber` auf der Startseite.

   Ohne diese Zeile misst der Browser 15px waagerechten Ueberlauf am
   Dokument, solange die Karten noch nicht gelandet sind. `body` hat zwar
   `overflow-x: hidden` und es entsteht keine Bildlaufleiste — die Seite
   bleibt aber waagerecht scrollbar, und auf iOS sieht man das. */
#fuer-wen, #prinzipien { overflow-x: clip; }

.trait-grid .trait.reveal:nth-child(odd)  { translate: calc(var(--pg-x) * -1) 0; }
.trait-grid .trait.reveal:nth-child(even) { translate: var(--pg-x) 0; }
.trait-grid .trait.reveal.in { translate: 0 0; }


/* ══ 6 · Mentoring: die vier Schritte auf einer Linie ═════════════════════
   Die Schritte ploppen nacheinander, und ueber ihnen zeichnet sich eine
   Linie von links nach rechts — dieselbe Idee wie die Handelstag-Timeline
   auf der Startseite, nur liegend.

   Die Linie ist ein `::before` auf `.steps-rail`, das per `scaleX` von 0
   auf 1 waechst. `transform-origin: left` macht daraus ein Zeichnen und
   kein Aufziehen aus der Mitte. Die vier Punkte sitzen in einem Raster mit
   EXAKT denselben Spalten wie die Karten darunter — nicht auf 12.5%, 37.5%,
   ... gerechnet: mit dem Zwischenraum von 1rem liegen die Kartenmitten ein
   paar Pixel daneben, und ein Punkt, der um 6px neben seiner Karte steht,
   sieht nach Fehler aus.

   Die Leiste gibt es nur, solange die vier Karten wirklich in EINER Reihe
   stehen. Darunter (ab 1080px zweispaltig, ab 640px einspaltig) verbindet
   eine waagerechte Linie nichts mehr — sie faellt weg, das Ploppen bleibt. */
.steps-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.steps-rail::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(var(--glow-rgb), .05),
      rgba(var(--glow-rgb), .55) 12%,
      rgba(var(--glow-rgb), .55) 88%,
      rgba(var(--glow-rgb), .05));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--reveal-ease);
}
.steps-rail.in::before { transform: scaleX(1); }

.steps-dot {
  position: relative;
  justify-self: center;
  width: 11px; height: 11px;
  border-radius: 50%;
  background-color: var(--surface-raised);
  border: 1px solid var(--line-2);
  scale: .5;
  opacity: 0;
  transition:
    scale 420ms var(--reveal-back) var(--dot-d, 0ms),
    opacity 300ms var(--reveal-ease) var(--dot-d, 0ms),
    background-color 300ms var(--reveal-ease) var(--dot-d, 0ms),
    box-shadow 300ms var(--reveal-ease) var(--dot-d, 0ms);
}
.steps-rail.in .steps-dot {
  scale: 1;
  opacity: 1;
  background-color: var(--accent);
  border-color: transparent;
  box-shadow: var(--glow-dot);
}
/* Die Punkte leuchten auf, waehrend die Linie an ihnen vorbeilaeuft: die
   Linie braucht 900ms fuer die ganze Strecke, der zweite Punkt sitzt bei
   knapp einem Drittel, der dritte bei zwei Dritteln. */
.steps-dot:nth-child(1) { --dot-d:  60ms; }
.steps-dot:nth-child(2) { --dot-d: 300ms; }
.steps-dot:nth-child(3) { --dot-d: 560ms; }
.steps-dot:nth-child(4) { --dot-d: 820ms; }

/* Die Karten selbst: ploppen statt einfliegen, im Takt der Punkte. Der
   Versatz kommt wieder von becro-dark.js (`.steps` steht in
   STAGGER_GROUPS) — 80ms je Karte. */
.steps .pstep.reveal {
  translate: none;
  scale: var(--pg-pop);
  transition:
    opacity var(--reveal-t, 720ms) var(--reveal-ease) var(--reveal-delay, 0ms),
    scale 560ms var(--reveal-back) var(--reveal-delay, 0ms),
    transform 240ms var(--ease),
    box-shadow 240ms var(--ease),
    border-color 240ms var(--ease);
}
.steps .pstep.reveal.in { scale: 1; }

@media (max-width: 1080px) {
  .steps-rail { display: none; }
}


/* ══ 7 · Ruhe ═════════════════════════════════════════════════════════════
   becro-pages.js steigt bei reduzierter Bewegung ganz oben aus: es setzt
   dann weder `is-live` noch `--casc-i`, und die Nummer links zaehlt nicht
   mit. Hier steht der Stilanteil dazu — alles auf seinem Endwert, nichts
   bewegt sich, nichts ist gedaempft. */
@media (prefers-reduced-motion: reduce) {
  .principles .principle.reveal,
  .trait-grid .trait.reveal,
  .stats .stat.reveal,
  .steps .pstep.reveal { translate: none; scale: none; transition: none; }

  .principles.is-live .principle.in { opacity: 1; }

  .check-grid li { translate: none; opacity: 1; transition: none; }
  .check-grid svg path { stroke-dashoffset: 0; transition: none; }

  .steps-rail::before { transform: scaleX(1); transition: none; }
  .steps-dot {
    scale: 1; opacity: 1; transition: none;
    background-color: var(--accent); border-color: transparent;
  }

  .pr-marker-num.is-swap,
  .pr-marker-en.is-swap { animation: none; }
}