/**
 * Der Fortschrittsbalken ueber dem Kopfbereich.
 *
 * ⚠ EIGENSTAENDIGES MODUL. Zwei Dateien, sonst nichts: dieses Stylesheet und
 * assets/js/scrollbalken.js. Kein Selektor auf den Kopfbereich, keine
 * Mobirise-Klasse, keine cid — der Balken laesst sich entfernen, indem man
 * die zwei Einbindungen streicht, und bei der Astro-Migration zieht er in
 * einem Stueck um.
 *
 * ⚠ DAS MARKUP ERZEUGT DAS SKRIPT. Ohne JavaScript existiert der Balken
 * nicht, und diese Datei greift ins Leere — das ist Absicht: Ein leerer
 * Streifen ohne Funktion waere schlechter als keiner.
 */

.flo-scrollbalken {
  /* Farbrollen aus docs/farbraum.md, hier einmal gebunden */
  --balken-rosa: #ff8a8f;      /* Praxis-Rosa, NUR als Flaeche */
  --balken-petrol: #537c83;    /* Stethoskop im Logo */
  --balken-spur: rgba(29, 29, 29, .07);

  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  /* ⚠ Ueber dem Kopfbereich, nicht darunter. Der Kopf liegt auf 1000 (kopfbereich.css:111; 1030 ist Bootstraps
     .fixed-top, nicht dieser Kopf)
     (kopfbereich.css); alles darunter verschwaende die drei Pixel. */
  z-index: 1040;
  background: var(--balken-spur);
  pointer-events: none;
}

.flo-scrollbalken[hidden] { display: none; }

.flo-scrollbalken__fuellung {
  display: block;
  height: 100%;
  /* ⚠ Verlauf ROSA → PETROL, das Grau traegt die Spur dahinter.
     Grau IN den Verlauf zu legen war der erste Versuch und sah schmutzig
     aus: Zwischen zwei gesaettigten Toenen wirkt ein neutrales Grau wie ein
     Fehler, nicht wie eine dritte Farbe. */
  background: linear-gradient(90deg, var(--balken-rosa), var(--balken-petrol));

  /* ⚠ transform statt width: Das Skript schreibt bei jedem Scroll-Bild.
     "width" loest Layout und Neuzeichnen der ganzen Seite aus, "transform"
     nur die Verbundschicht des Balkens. */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .12s linear;
  will-change: transform;
}

/* Bewegung ist eine Einstellung: Der Balken bleibt, nur der weiche Uebergang
   faellt weg. Er ist eine Ortsangabe, keine Zier — ihn ganz abzuschalten
   waere ein Funktionsverlust. */
@media (prefers-reduced-motion: reduce) {
  .flo-scrollbalken__fuellung { transition: none; }
}

/* Auf sehr schmalen Schirmen darf er nicht dicker wirken als noetig. */
@media (max-width: 480px) {
  .flo-scrollbalken { height: 2px; }
}