{# Die Bildschirmleiste aller vier Druckdokumente (docs/formblatt_druck_plan.md
   §2c, Scheibe 2). Sie ist NICHT Teil des Dokuments und wird nie gedruckt.

   Vorher gab es zwei Schulen: die helle `.leiste` des Formblatts und die
   dunkelblaue `.print-bar` der drei Fluss-Dokumente (aus `_PDF_SHARED_CSS`).
   Der Unterschied war nicht nur Farbe — die Leiste sagt, WELCHEN STAND man
   ansieht, die print-bar sagte es nicht. Vereinheitlicht ist deshalb die
   Formblatt-Leiste; der Stand-Slot traegt bei den Fluss-Dokumenten den
   Datenstand, den sie am Bildschirm bisher gar nicht hatten.

   Vereinheitlicht wird ausdruecklich nur die Huelle. Das Dokument selbst
   bleibt, wie es ist: A4 quer mit gemessenem Umbruch, A4 hoch im Fluss und
   A3 hoch sind drei verschiedene Sachen (§10.4). #}
  /* ── Bildschirmleiste ─────────────────────────────────────────────────── */
  /* Die Leiste laeuft in der Spalte des Dokuments, nicht ueber die ganze
     Fensterbreite: sonst klebt die Beschriftung in der linken und der Knopf in
     der rechten Fensterecke, waehrend das Blatt in der Mitte steht — dieselbe
     CSS-Datei sieht dann je Dokument verschieden gut aus. `--leiste-breite`
     ist die Breite des Blattes plus die 20px Innenabstand auf jeder Seite,
     damit die Beschriftung genau an der Blattkante beginnt. Ohne die Variable
     fuellt die Leiste ihren Elternteil (so beim Formblatt: dort ist das die
     .huelle). */
  /* Zwei Zeilen: oben Ueberschrift + Knoepfe, darunter linksbuendig der Stand
     und die Seitenzahl (§2c, Nachtrag). Der Stand ist bei manchen Dokumenten
     lang genug, um in einer gemeinsamen Zeile ueber die Knoepfe zu laufen. */
  .leiste {
    position: sticky; top: 0; z-index: 40; max-width: var(--leiste-breite, none);
    margin: 0 auto 22px; padding: 9px 20px 10px;
    background: rgba(238,241,245,.93); backdrop-filter: blur(6px);
    border-bottom: 1px solid #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  }
  .leiste .zeile { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .leiste .zeile-eins { min-height: 30px; }
  /* Zeile zwei bricht nicht um: der Stand nimmt den Platz, der bis zum
     Rueckweg da ist, und laeuft darunter aus (siehe .verlauf). */
  .leiste .zeile-zwei { margin-top: 2px; flex-wrap: nowrap; gap: 16px; }
  .leiste .stand-gruppe {
    flex: 1 1 auto; min-width: 0; overflow: hidden;
    display: flex; align-items: center; gap: 16px; white-space: nowrap;
  }
  .leiste .zeile-zwei .zurueck { flex: 0 0 auto; white-space: nowrap; }
  /* Der Verlauf ist ein `sticky` Kaestchen HINTER dem Text: passt alles in die
     Zeile, steht es hinter dem letzten Wort und verlaeuft dort von nichts nach
     nichts — man sieht es nicht. Ist der Text zu lang, klebt es am rechten Rand
     der Gruppe und blendet dessen Schwanz aus. Rein aus CSS: keine Messung im
     Skript, kein Nachziehen beim Groessenwechsel des Fensters. */
  .leiste .verlauf {
    position: sticky; right: 0; flex: 0 0 30px; align-self: stretch;
    margin-left: -16px; pointer-events: none;
    background: linear-gradient(to right, rgba(238,241,245,0), rgba(238,241,245,.97) 78%);
  }
  .leiste .etikett {
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #94a3b8;
  }
  .leiste .stand { font-size: 13px; color: #64748b; }
  .leiste .stand b { color: #1e293b; }
  .leiste .zurueck {
    font-size: 13px; color: #64748b; text-decoration: none;
    border-bottom: 1px solid #cbd5e1; padding-bottom: 1px;
  }
  .leiste .zurueck:hover { color: #1e293b; border-color: #94a3b8; }
  /* Der erste Knopf schiebt sich nach rechts; ein Zurueck-Link davor bleibt
     dadurch links am Text stehen, egal ob es ihn gibt. */
  .leiste .rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
  .drucken {
    border: 1px solid #e2e8f0; background: #fff; border-radius: 8px;
    font: inherit; font-weight: 600; font-size: 13px; padding: 6px 14px; cursor: pointer;
    box-shadow: 0 1px 3px rgba(15,23,42,.08);
  }
  .drucken:hover { background: #f8fafc; }
  .drucken:focus-visible { outline: 2px solid #1e3a5f; outline-offset: 2px; }

  @media print { .leiste { display: none !important; } }