/* ==========================================================================
   LESEBALKEN – lesebalken.css
   Template: fruesteg (Linden-Grundschule Velten)

   WAS MACHT DIESE DATEI?
   Gestaltet den Fortschrittsbalken, der beim Lesen/Scrollen mitläuft.
   Der Balken erscheint NUR auf Seiten, auf denen im Text ein Element mit
   der Klasse "lesebalken" steht (siehe lesebalken.js, dort steht auch,
   wie man ihn auf einer Seite einschaltet).

   WIE PASSE ICH ETWAS AN?
   Alles Wichtige steht im Block ":root" direkt darunter ("HIER ANPASSEN").
   Nur den Wert hinter dem Doppelpunkt ändern, speichern, hochladen.
   Danach im Browser einmal Strg+F5 drücken (Cache leeren).
   ========================================================================== */


/* ------------------------------------------------------------------
   HIER ANPASSEN – alle Einstellungen an einer Stelle
   ------------------------------------------------------------------ */
:root {

  /* FARBE des wachsenden Balkens.
     Standard: mittleres Schulgrün aus template.css (--gruen-mittel).
     Beispiele: #2d8a4e  |  #f5a623 (Gold)  |  var(--gruen-dunkel)
     Für einen Verlauf: linear-gradient(90deg, #2d8a4e, #f5a623)       */
  --lesebalken-farbe: #f5a623;

  /* FARBE der Schiene hinter dem Balken (der noch nicht gelesene Teil).
     "transparent" = keine Schiene. Standard: sehr helles Grün.        */
  --lesebalken-schiene: #e8f5ed;

  /* HÖHE des Balkens in Pixel. 4px = dezent, 6px = deutlich,
     8px = sehr auffällig.                                             */
  --lesebalken-hoehe: 5px;

  /* ABSTAND vom oberen Bildschirmrand in Pixel.
     0px = ganz oben, über der Navigationsleiste (Standard).
     Möchtest du den Balken UNTER der Navigation haben, dann
     --lesebalken-oben auf 80px setzen (entspricht --header-hoehe
     in template.css). Achtung: Die Navigation wird beim Scrollen
     kleiner (48px) und mobil 60px, dort würde dann eine Lücke
     entstehen. Deshalb ist 0px die empfohlene Einstellung.           */
  --lesebalken-oben: 0px;

  /* ABRUNDUNG der Balkenenden in Pixel. 0px = eckig, 99px = rund.     */
  --lesebalken-rundung: 0px;

  /* DECKKRAFT des Balkens: 1 = voll sichtbar, 0.6 = leicht durchsichtig */
  --lesebalken-deckkraft: 1;

  /* GESCHWINDIGKEIT der Mitlauf-Animation in Sekunden.
     0s = der Balken folgt sofort ohne Verzögerung.
     0.1s = sanftes Mitgleiten (Standard).                             */
  --lesebalken-animation: 0.1s;

  /* EBENE (z-index): Muss höher sein als die Navigationsleiste
     (#topmenubox hat 5000 in template.css), sonst verschwindet der
     Balken dahinter. Normalerweise nicht ändern.                      */
  --lesebalken-ebene: 6000;
}


/* ------------------------------------------------------------------
   AB HIER NORMALERWEISE NICHTS MEHR ÄNDERN
   ------------------------------------------------------------------ */

/* Schiene: feststehend am oberen Rand, über die volle Breite.
   Das Element wird von lesebalken.js erzeugt, aber nur, wenn die Seite
   ein Element mit class="lesebalken" enthält. */
#lesebalken-schiene {
  position: fixed;
  top: var(--lesebalken-oben);
  left: 0;
  width: 100%;
  height: var(--lesebalken-hoehe);
  background: var(--lesebalken-schiene);
  z-index: var(--lesebalken-ebene);
  pointer-events: none;          /* Klicks gehen durch den Balken hindurch */
  opacity: 0;                    /* wird per JS eingeblendet */
  transition: opacity 0.3s ease;
}

#lesebalken-schiene.sichtbar {
  opacity: var(--lesebalken-deckkraft);
}

/* Füllung: wird mit transform: scaleX() von 0 bis 1 gezogen
   (flüssiger als width, belastet den Browser weniger). */
#lesebalken-fuellung {
  width: 100%;
  height: 100%;
  background: var(--lesebalken-farbe);
  border-radius: 0 var(--lesebalken-rundung) var(--lesebalken-rundung) 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--lesebalken-animation) linear;
  will-change: transform;
}

/* Barrierefreiheit: Wer im Betriebssystem "Bewegung reduzieren"
   eingestellt hat, bekommt keine Animation. */
@media (prefers-reduced-motion: reduce) {
  #lesebalken-fuellung,
  #lesebalken-schiene {
    transition: none;
  }
}

/* Beim Drucken wird der Balken nicht ausgegeben. */
@media print {
  #lesebalken-schiene {
    display: none;
  }
}