/* =================================================================
   UXOVIA · ABLAUF-TOUR
   Schrittliste links, wechselndes Bild rechts. Vorbild scaletalk.ai,
   umgesetzt in den Uxovia-Farben.

   Die Bewegung hat hier eine Aufgabe: Sie zeigt, dass die fuenf Schritte
   NACHEINANDER passieren. Ein statisches Fuenferraster wuerde sie als
   gleichzeitige Optionen lesbar machen, was sachlich falsch waere.
   ================================================================= */

.tour {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}

/* ─────────────────── Schrittliste ─────────────────── */
.tour-steps { position: relative; display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; counter-reset: tour; }

/* ── Der Faden ──
   Eine durchgehende Linie hinter den Nummernscheiben, auf der ein farbiger
   Abschnitt bis zum laufenden Schritt reicht und beim Umschalten mitwandert.
   Vorher trug jeder Schritt sein eigenes Liniensegment: fuenf Striche, die
   nur zufaellig aneinanderstiessen, und der Fortschritt war daran nicht
   ablesbar. Wo der Faden endet, setzt ablauf-tour.js ueber `--tour-faden`. */
.tour-steps::before,
.tour-steps::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--s-4) + 1.125rem - 0.5px);
  inset-block-start: var(--tour-faden-start, 0px);
  width: 1px;
  border-radius: 1px;
  pointer-events: none;
}
/* Die ruhende Bahn ueber die ganze Liste. */
.tour-steps::before {
  height: var(--tour-faden-laenge, 0px);
  background: linear-gradient(180deg, var(--border-strong), var(--border-faint));
}
/* Der zurueckgelegte Teil. Er steht auf voller Laenge und wird gestaucht,
   statt seine Hoehe zu aendern: eine Hoehenaenderung laesst den Browser bei
   jedem Bild neu rechnen, scaleY laeuft auf der Grafikkarte. Der Schein am
   unteren Ende markiert den Kopf des Fadens; weil von oben gestaucht wird,
   bleibt das helle Ende des Verlaufs der Kopf. */
.tour-steps::after {
  height: var(--tour-faden-laenge, 0px);
  transform: scaleY(var(--tour-faden-anteil, 0));
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(0, 85, 254, 0.35), var(--brand-hover, var(--kobalt-klar)));
  box-shadow: 0 0 12px -1px rgba(61, 139, 255, 0.75);
  transition: transform var(--dur-slow, 0.45s) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .tour-steps::after { transition: none; }
}

.tour-step {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: start;
  font: inherit; color: inherit;
  transition:
    background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.tour-step:hover { background: rgba(255, 255, 255, 0.022); }

.tour-step[aria-current="true"] {
  background: linear-gradient(100deg, rgba(0, 85, 254, 0.10), transparent 78%);
  border-color: rgba(0, 85, 254, 0.26);
}

.tour-step { position: relative; }

/* Die Nummernscheibe. Nur der laufende Schritt leuchtet.

   Der Grund liegt in zwei Schichten: unten der deckende Seitenton, darueber
   dieselbe Oberflaeche wie zuvor. --surface-2 allein ist weisses Licht mit
   6 % Deckkraft — der Faden lief dahinter durch und sah aus, als waeren die
   erledigten Schritte durchgestrichen. Optisch bleibt die Scheibe gleich,
   sie ist nur nicht mehr durchsichtig. */
.tour-num {
  position: relative; z-index: 1;
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: linear-gradient(var(--surface-2), var(--surface-2)), var(--bg);
  font-family: var(--font-mono); font-size: var(--t-small);
  font-weight: var(--w-medium); color: var(--text-legible);
  transition:
    background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.tour-step[aria-current="true"] .tour-num {
  background: var(--gradient-brand);
  border-color: transparent;
  color: var(--text-on-brand);
  box-shadow: 0 0 0 4px rgba(0, 85, 254, 0.16), 0 6px 20px -6px rgba(0, 85, 254, 0.8);
}

.tour-title {
  margin: 0; font-size: var(--t-body-lg); font-weight: var(--w-medium);
  color: var(--text-2); letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease-out);
}
.tour-step[aria-current="true"] .tour-title { color: var(--text); }

/* Die Beschreibung gehoert nur zum laufenden Schritt: fuenf Beschreibungen
   gleichzeitig waeren eine Textwand, und der Blick wuesste nicht, wohin. */
.tour-desc {
  margin: 0;
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.tour-desc > span { overflow: hidden; font-size: var(--t-small); color: var(--text-legible); line-height: 1.55; }
.tour-step[aria-current="true"] .tour-desc { grid-template-rows: 1fr; opacity: 1; margin-top: var(--s-2); }

/* ─────────────────── Bildfenster ─────────────────── */
.tour-stage {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: rgba(9, 11, 16, 0.6);
  box-shadow: 0 40px 90px -50px rgba(0, 85, 254, 0.55);
  /* Feste Proportion: ohne sie springt die Hoehe bei jedem Bildwechsel. */
  aspect-ratio: 16 / 10;
}
.tour-shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-xslow) var(--ease-out);
}
.tour-shot[data-aktiv="true"] { opacity: 1; transform: scale(1); }

/* Marke oben rechts im Fenster, wie eine Bildunterschrift im Bild. */
.tour-badge {
  position: absolute; z-index: 2;
  inset-block-start: var(--s-4); inset-inline-end: var(--s-4);
  padding: 0.35rem 0.7rem; border-radius: var(--r-pill);
  background: rgba(9, 11, 16, 0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono); font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--text-2);
}

/* Fortschritt: laeuft ueber die Standzeit eines Schritts durch. */
.tour-progress {
  position: absolute; z-index: 2;
  inset-block-end: 0; inset-inline: 0; height: 3px;
  background: rgba(255, 255, 255, 0.08);
}
/* Wie beim Faden: volle Breite, gestaucht per scaleX statt einer wandernden
   Breite. Eine Breitenaenderung laeuft ueber das Layout, scaleX nicht. */
.tour-progress span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--gradient-brand);
  transition: transform 0.7s linear;
}

/* ── Pfeile und Miniaturen: nur auf schmalen Schirmen ──
   Auf dem Schreibtisch stehen alle fuenf Schritte nebeneinander im Blick,
   dort braucht niemand eine Blaetterfunktion. */
.tour-pfeil, .tour-minis { display: none; }

@media (max-width: 900px) {
  .tour { grid-template-columns: 1fr; gap: var(--s-5); }
  /* Auf dem Telefon steht das Bild oben: es traegt die Aussage,
     der Text darunter erklaert sie. Gewischt wird ueber dem Bild;
     pan-y laesst das Scrollen der Seite beim Browser und gibt uns
     nur die waagerechte Geste. */
  .tour-stage { order: -1; touch-action: pan-y; }

  /* Nur der laufende Schritt steht unter dem Bild. Die anderen vier waeren
     hier eine lange Liste, durch die man scrollt, statt zu blaettern. */
  .tour-steps { gap: 0; }
  .tour-steps::before, .tour-steps::after { display: none; }
  .tour-steps li:not(:has([aria-current="true"])) { display: none; }
  .tour-step { padding: 0; background: none; border-color: transparent; cursor: default; }
  .tour-step:hover { background: none; }
  .tour-step[aria-current="true"] { background: none; border-color: transparent; }

  .tour-pfeil {
    position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(9, 11, 16, 0.72);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-strong);
    color: var(--text); cursor: pointer;
    transition: opacity var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  }
  .tour-pfeil svg { width: 20px; height: 20px; }
  .tour-pfeil-zurueck { inset-inline-start: var(--s-3); }
  .tour-pfeil-vor { inset-inline-end: var(--s-3); }
  /* Anschlag: am ersten und am letzten Schritt gibt es keinen Weg weiter.
     Der Knopf bleibt stehen und sagt das durch Deckkraft, statt zu
     verschwinden und die Bildflaeche springen zu lassen. */
  .tour-pfeil[disabled] { opacity: .3; cursor: default; }

  .tour-minis {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: var(--s-2); margin: 0; padding: 0; list-style: none;
  }
  /* Gedaempft wird nur das Bild, nicht der Knopf. Laege die Deckkraft auf dem
     Knopf, verschwaende sie den Rahmen gleich mit, und die ruhenden
     Miniaturen saehen aus wie gar nichts. Der Rahmen zeigt, dass da noch
     vier weitere zum Antippen stehen. */
  .tour-minis button {
    display: block; width: 100%; padding: 0; cursor: pointer;
    border-radius: var(--r-sm); overflow: hidden;
    border: 1px solid var(--border-strong);
    background: none;
    transition: border-color var(--dur) var(--ease-out);
  }
  /* height: auto ist Pflicht, seit das <img> ein height-Attribut traegt:
     aspect-ratio wirkt nur, solange eine der beiden Seiten auto ist. Sonst
     gewinnt der Attributwert und die Miniatur wird 768 px hoch. */
  .tour-minis img {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
    opacity: .4; transition: opacity var(--dur) var(--ease-out);
  }
  /* Die fuenf Bilder sind alle dunkel und aehnlich. Auseinander haelt sie
     nicht das Motiv, sondern Deckkraft und Rahmen der laufenden Miniatur. */
  .tour-minis button[aria-current="true"] { border-color: var(--brand); }
  .tour-minis button[aria-current="true"] img { opacity: 1; }
}

/* Ohne Bewegung: kein Auto-Vorlauf (im Skript geregelt), keine Uebergaenge. */
@media (prefers-reduced-motion: reduce) {
  .tour-shot, .tour-desc, .tour-num, .tour-step { transition: none; }
  .tour-progress span { transition: none; }
  .tour-pfeil, .tour-minis button, .tour-minis img { transition: none; }
}