/* Seitenübergänge – CSS
   =====================

   Die Bewegung macht GSAP; hier stehen der Ladebalken und die Zustände, die CSS
   besser kann. */

/* ---------- Ladebalken ----------

   Ein 3px hoher Streifen am oberen Rand, der beim Seitenwechsel von links nach
   rechts wächst. Ersetzt den vorigen Vollbild-Vorhang: der nahm die Seite
   komplett weg und wirkte dadurch hart — jeder Klick fühlte sich wie ein Bruch
   an. Der Balken sagt „lädt“, ohne etwas zu verdecken; den eigentlichen
   Übergang trägt das sanfte Überblenden des Inhalts.

   `transform: scaleX(0)` plus `transform-origin: left` ist der ganze Trick: die
   Breite wird über `scaleX` animiert, nicht über `width`. Nur so läuft es im
   Compositor ohne Layout-Neuberechnung pro Frame.

   `opacity: 0` als Startzustand ist hier — anders als beim Vorhang — gefahrlos:
   ein 3px-Streifen, der im Fehlerfall sichtbar bliebe, verdeckt nichts. Beim
   deckenden Vorhang war genau das der Grund für `translateY(100%)`. */
.page-progress {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    /* über dem Header (100) und dem Skip-Link (200), aber UNTER dem
       Consent-Banner (1000): der ist rechtlich verpflichtend und darf von
       keinem Effekt überdeckt werden. */
    z-index: 500;
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
    box-shadow: 0 0 10px rgb(227 0 27 / 0.5);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Bewegungsreduktion: kein Balken. transition.js blendet dann nur kurz über. */
@media (prefers-reduced-motion: reduce) {
    .page-progress {
        display: none;
    }
}

/* ---------- Klickschutz während des Wechsels ----------

   Ohne das kann ein ungeduldiger Doppelklick zwei Übergänge überlagern; Barba
   bricht den ersten dann mitten in der Animation ab und der Container bleibt
   halb transparent stehen.

   Kein `cursor: wait` mehr: das war beim Vorhang sinnvoll, weil er die Seite
   ohnehin verdeckte. Bei einem 3px-Balken bleibt die Seite sichtbar, und ein
   Wartecursor über lesbarem Inhalt wirkt wie ein Fehler. Der Balken ist die
   Rückmeldung. */
html.is-transitioning [data-barba="container"] {
    pointer-events: none;
}

/* Der Consent-Banner steht ausserhalb des Containers und muss auch während
   eines Wechsels bedienbar bleiben — er ist rechtlich verpflichtend, ein
   laufender Seitenübergang darf ihn nicht sperren. */
html.is-transitioning .consent {
    pointer-events: auto;
}

/* Kein `will-change: opacity` auf dem Container: es reserviert eine
   GPU-Schicht für den gesamten Seiteninhalt und kostet bei langen Kapitellisten
   deutlich Speicher. GSAP setzt es selbst für die Dauer des Tweens.
   Beim Balken ist es vertretbar — ein einzelnes, kleines Element. */