/*
 * R3 Interaktionen (Rolle B): Ablauf, Bild- und Textgruppen, Zaehler, Stimmen.
 * Hooks laut R3/A/SCHNITTSTELLEN.md: Klassen yr3-steps, yr3-step--N, yr3-reveal
 * (gleichwertig zu data-yr3-steps, data-yr3-step, data-yr3-reveal).
 *
 * Laedt nach live-chrome.css (Enqueue durch S0, siehe INTEGRATION.md). Die
 * Navigationsregeln des Codex-Patches stehen eingeordnet in live-chrome.css.
 *
 * Grundsatz: Ohne Skript, ohne diese Datei, bei reduzierter Bewegung und bei der
 * Einstellung "Bewegte Inhalte: aus" ist jeder Inhalt sofort sichtbar und
 * vollstaendig. Wartezustaende setzt nur live.js, und nur ausserhalb des ersten
 * Bildschirms.
 *
 * Zeiten und Kurven (motion-design: eine Signaturkurve, drei Dauern):
 *   --yl-ease (0.23, 1, 0.32, 1) fuer Eintritte, --yr3-ease-weg (0.77, 0, 0.175, 1)
 *   fuer Bewegung auf der Flaeche; 240 ms Zustand, 700 ms Phase, 1000 ms Bild.
 */
:root {
  --yr3-interaktionen: 1;
  --yr3-ease-weg: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ------------------------------------------------------------ Ablauf: vorhandene Nummern */

/* Startseite (.yl-step::before mit Verbindungslinie) und Ablaufkarten
   (.yl-pcard::before, Symbol ::after) bringen ihre Nummer aus live.css mit. Mit
   Bewegung werden die Schritte einmal nacheinander aktiv: bis zur eigenen Phase ist
   die Plakette ein Umriss und etwas kleiner, dann fuellt sie sich (280 ms); die Linie
   zieht sich einmal (1100 ms), Kartensymbole setzen sich (420 ms). Der Endzustand ist
   die angelegte Gestaltung. */
body.yk .yr3-ablauf--wartet > .yl-step:not(.is-yr3-aktiv)::before {
  background: var(--yl-white);
  color: var(--yl-ink);
  box-shadow: inset 0 0 0 2px var(--yl-ink);
  transform: scale(0.88);
}

body.yk .yr3-ablauf--wartet > .yl-pcard:not(.is-yr3-aktiv)::before {
  background: var(--yl-white);
  color: var(--yl-brand);
  box-shadow: inset 0 0 0 2px var(--yl-brand);
  transform: scale(0.88);
}

body.yk .yr3-ablauf--wartet > .yl-zeit:not(.is-yr3-aktiv)::before {
  background: var(--yl-white);
  color: var(--yl-ink);
  box-shadow: inset 0 0 0 2px var(--yl-ink), 0 0 0 6px var(--yl-white);
  transform: scale(0.88);
}

body.yk .yr3-ablauf--wartet > .yl-pcard:not(.is-yr3-aktiv)::after {
  opacity: 0.2;
  transform: translate3d(0, 8px, 0);
}

body.yk .yr3-ablauf > .yl-step.is-yr3-aktiv::before,
body.yk .yr3-ablauf > .yl-pcard.is-yr3-aktiv::before,
body.yk .yr3-ablauf > .yl-zeit.is-yr3-aktiv::before {
  transition: background-color 280ms var(--yl-ease), color 280ms var(--yl-ease), box-shadow 280ms var(--yl-ease), transform 280ms var(--yl-ease);
}

body.yk .yr3-ablauf > .yl-pcard.is-yr3-aktiv::after {
  transition: opacity 420ms var(--yl-ease), transform 420ms var(--yl-ease);
}

/* Aktuelle Phase: A gestaltet .yl-zeit.is-aktiv (Bordeaux); fuer die Startseite
   liefert B dieselbe Hervorhebung. is-aktiv wandert einmal durch die Folge. */
body.yk .yr3-ablauf > .yl-step.is-aktiv::before {
  background: var(--yl-brand);
}

/* Nummer als Inhaltselement (data-yr3-nr, fuer neue Module von Rolle A). */
body.yk .yr3-ablauf--wartet .yr3-schritt:not(.is-yr3-aktiv) [data-yr3-nr] {
  opacity: 0.35;
  transform: scale(0.9);
}

body.yk .yr3-ablauf .yr3-schritt.is-yr3-aktiv [data-yr3-nr] {
  transition: opacity 280ms var(--yl-ease), transform 280ms var(--yl-ease);
}

/* Verbindungslinie der Startseite (ab 900 px, live.css) und senkrechte Fuge der
   Zeitleiste (live-seiten.css): ziehen sich einmal ueber die Dauer der Folge. */
@media (min-width: 900px) {
  body.yk .yr3-ablauf.yl-steps__row::before {
    transform-origin: left center;
  }

  body.yk .yr3-ablauf--wartet.yl-steps__row:not(.yr3-ablauf--laeuft)::before {
    transform: scaleX(0);
  }

  body.yk .yr3-ablauf--laeuft.yl-steps__row::before {
    transition: transform var(--yr3-linie-dauer, 1100ms) var(--yr3-ease-weg);
  }
}

body.yk .yr3-ablauf.yl-zeitleiste__liste::before {
  transform-origin: center top;
}

body.yk .yr3-ablauf--wartet.yl-zeitleiste__liste:not(.yr3-ablauf--laeuft)::before {
  transform: scaleY(0);
}

body.yk .yr3-ablauf--laeuft.yl-zeitleiste__liste::before {
  transition: transform var(--yr3-linie-dauer, 1500ms) var(--yr3-ease-weg);
}

/* ------------------------------------------------------------ Ablauf: Phasenmarken */

/* Nur fuer Schrittfolgen ganz ohne Nummer: live.js setzt je Schritt eine Marke vor
   den Titel (Nummer und Linie, aria-hidden). Endzustand: Nummer gefuellt, Linie
   voll; mit Bewegung fuellen sie sich einmal nacheinander. */
body.yk .yr3-schritt__marke {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 14px;
}

body.yk .yl-step .yr3-schritt__marke {
  margin-top: 22px;
}

body.yk .yr3-schritt__nr {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 44px;
  height: 28px;
  padding: 0 10px;
  border: 1.5px solid var(--yl-brand);
  border-radius: 999px;
  background: var(--yl-brand);
  color: var(--yl-white);
  font: 700 13px/1 var(--yl-font-title);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

body.yk .yr3-schritt__linie {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  overflow: hidden;
  background: var(--yl-line);
}

body.yk .yr3-schritt__marke--ohne-nr .yr3-schritt__linie {
  max-width: 120px;
}

body.yk .yr3-schritt__linie::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--yl-brand);
  transform-origin: left center;
}

/* Wartezustand bis zur eigenen Phase: Nummer als Umriss, Linie leer (ohne
   Uebergang, damit beim Setzen nichts sichtbar zurueckspringt). Ohne Bewegung
   setzt live.js alle Schritte sofort aktiv. */
body.yk .yr3-ablauf .yr3-schritt:not(.is-yr3-aktiv) .yr3-schritt__nr {
  background: transparent;
  color: var(--yl-brand);
  transform: scale(0.94);
}

body.yk .yr3-ablauf .yr3-schritt:not(.is-yr3-aktiv) .yr3-schritt__linie::after {
  transform: scaleX(0);
}

/* Aktivierung: Nummer fuellt sich (240 ms), Linie zieht sich (700 ms). */
body.yk .yr3-schritt.is-yr3-aktiv .yr3-schritt__nr {
  transition: background-color 240ms var(--yl-ease), color 240ms var(--yl-ease), transform 240ms var(--yl-ease);
}

body.yk .yr3-schritt.is-yr3-aktiv .yr3-schritt__linie::after {
  transform: none;
  transition: transform 700ms var(--yr3-ease-weg);
}

/* Schrittbilder der Startseite oeffnen sich in derselben Reihenfolge (wie die
   Bildenthuellung aus live.css: clip-path von unten, 1000 ms). */
body.yk .yr3-bild--wartet img {
  clip-path: inset(0 0 100% 0);
}

body.yk .yr3-bild--wartet.yr3-bild--da img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1000ms var(--yl-ease);
}

/* Dunkle Flaechen: Sand statt Bordeaux. */
body.yk .yl-sec--ink .yr3-schritt__nr,
body.yk .yl-sec--brand .yr3-schritt__nr {
  border-color: var(--yl-sand);
  background: var(--yl-sand);
  color: var(--yl-brand);
}

body.yk .yl-sec--ink .yr3-schritt__linie,
body.yk .yl-sec--brand .yr3-schritt__linie {
  background: rgba(255, 255, 255, 0.18);
}

body.yk .yl-sec--ink .yr3-schritt__linie::after,
body.yk .yl-sec--brand .yr3-schritt__linie::after {
  background: var(--yl-sand);
}

body.yk .yl-sec--ink .yr3-ablauf .yr3-schritt:not(.is-yr3-aktiv) .yr3-schritt__nr,
body.yk .yl-sec--brand .yr3-ablauf .yr3-schritt:not(.is-yr3-aktiv) .yr3-schritt__nr {
  background: transparent;
  color: var(--yl-sand);
}

/* ------------------------------------------------------------ Bild- und Textgruppen */

/* Nur Gruppen mit data-yr3-reveal (von Rolle A gesetzt), nur ausserhalb des ersten
   Bildschirms: Bilder oeffnen sich von unten, Texte heben sich 12 px, 60 ms Staffel. */
body.yk .yr3-gruppe--wartet .elementor-widget-image img,
body.yk .yr3-gruppe--wartet [data-yr3-reveal-teil] img {
  clip-path: inset(0 0 100% 0);
}

body.yk .yr3-gruppe--da .elementor-widget-image img,
body.yk .yr3-gruppe--da [data-yr3-reveal-teil] img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1000ms var(--yl-ease);
  transition-delay: calc(var(--yr3-i, 0) * 60ms);
}

body.yk .yr3-gruppe--wartet .elementor-widget-heading,
body.yk .yr3-gruppe--wartet .elementor-widget-text-editor,
body.yk .yr3-gruppe--wartet .elementor-widget-button {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

body.yk .yr3-gruppe--da .elementor-widget-heading,
body.yk .yr3-gruppe--da .elementor-widget-text-editor,
body.yk .yr3-gruppe--da .elementor-widget-button {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--yl-ease), transform 520ms var(--yl-ease);
  transition-delay: calc(var(--yr3-i, 0) * 60ms);
}

/* ------------------------------------------------------------ Zaehler */

body.yk .yr3-zahl {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Stimmen */

/* Die Leiste ist selbst fokussierbar (Pfeiltasten); Fokus als ruhiger Rahmen. */
body.yk .yl-voices__track:focus-visible {
  outline: 3px solid var(--yl-brand) !important;
  outline-offset: 4px;
}

/* Der ehrliche Verweis auf das Google-Unternehmensprofil steht bei Rolle A nativ im
   Inhalt (.yl-voices__quelle); B liefert dafuer keinen eigenen Baustein. */

/* ------------------------------------------------------------ Einstellung "aus" */

/* html.yr3-ruhig (live.js): das scrollgebundene Siegel steht ebenfalls still. */
html.yr3-ruhig body.yk .yl-seal.is-round .elementor-heading-title {
  animation: none;
}

/* ------------------------------------------------------------ Reduzierte Bewegung */

/* live.js setzt dann keine Wartezustaende; diese Regeln sichern den Endzustand
   auch bei einem Wechsel der Systemeinstellung waehrend des Besuchs. */
@media (prefers-reduced-motion: reduce) {
  body.yk .yr3-ablauf .yr3-schritt__nr,
  body.yk .yr3-ablauf .yr3-schritt:not(.is-yr3-aktiv) .yr3-schritt__nr {
    transform: none;
    transition: none;
  }

  body.yk .yr3-bild--wartet img,
  body.yk .yr3-gruppe--wartet .elementor-widget-image img,
  body.yk .yr3-gruppe--wartet [data-yr3-reveal-teil] img {
    clip-path: none;
  }

  body.yk .yr3-gruppe--wartet .elementor-widget-heading,
  body.yk .yr3-gruppe--wartet .elementor-widget-text-editor,
  body.yk .yr3-gruppe--wartet .elementor-widget-button {
    opacity: 1;
    transform: none;
  }
}

@media print {
  body.yk .yr3-bild--wartet img,
  body.yk .yr3-gruppe--wartet img {
    clip-path: none !important;
  }

  body.yk .yr3-gruppe--wartet .elementor-widget {
    opacity: 1 !important;
    transform: none !important;
  }
}