/* =====================================================================
   flow-rail.css — Roter Faden / Leitlinie
   Farben aus den CI-Tokens (colors_and_type.css):
   Petrol = var(--brand-primary) #2D5F7C · Orange = var(--brand-accent) #FF6B35
   ===================================================================== */

.flow-rail {
  position: fixed;
  /* nah am linken Bildschirmrand: folgt dem Content-Gutter, aber max. 40px,
     damit die Linie auf breiten Monitoren nicht in die Mitte driftet */
  left: clamp(16px, calc((100vw - 1240px) / 2 - 24px), 40px);
  top: calc(var(--header-h) + 40px);
  bottom: 48px;
  width: 14px;
  z-index: 30;                /* unter Header (50) */
  pointer-events: none;       /* nur Knoten sind klickbar */
}
.flow-rail-hidden { display: none; }

.flow-rail-track {
  position: absolute; top: 0; bottom: 0; left: 6px;
  width: 2px; border-radius: 1px;
  background: color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

/* Füllung: Fortschritt von oben nach unten (scaleY via JS) */
.flow-rail-fill {
  position: absolute; inset: 0;
  transform-origin: top;
  transform: scaleY(0);
  border-radius: 1px;
  background: linear-gradient(
    to bottom,
    var(--brand-primary) 0%,
    var(--brand-primary) 82%,
    var(--brand-accent) 100%   /* Spitze läuft warm aus */
  );
}

/* Knotenpunkte pro Section */
.flow-rail-node {
  position: absolute; left: 7px;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;      /* auf der Linie zentrieren */
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--brand-primary);
  background: var(--bg);
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.flow-rail-node:hover { transform: scale(1.35); }

/* Aktiver Knoten: Orange mit dezentem Glow */
.flow-rail-node-active {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 28%, transparent),
              0 0 12px color-mix(in srgb, var(--brand-accent) 45%, transparent);
  transform: scale(1.25);
}

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

/* ---------- Mobiler Top-Progress-Balken (< 900px) ---------- */
.flow-topbar {
  position: fixed; top: var(--header-h); left: 0; right: 0;
  height: 3px; z-index: 30;         /* unter dem Header (50) */
  background: color-mix(in srgb, var(--brand-accent) 16%, transparent);
  pointer-events: none;
  display: none;                    /* Default aus; nur auf Mobile sichtbar */
}
.flow-topbar-fill {
  position: absolute; inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  /* oranger Leitfaden */
  background: linear-gradient(
    to right,
    var(--brand-accent-700) 0%,
    var(--brand-accent) 100%
  );
  box-shadow: 0 0 8px color-mix(in srgb, var(--brand-accent) 55%, transparent);
}
.flow-topbar-hidden { display: none !important; }

@media (max-width: 900px) { .flow-topbar { display: block; } }