/* =============================================================================
   EmKater WWS — Fortschritt, Messbalken und Ladezustaende

   Vier Bausteine, streng getrennt nach dem, was sie aussagen:

     .balken            bekannter Anteil (Sicherung: 41 % gelesen)
     .balken.unbestimmt etwas laeuft, das Ende ist unbekannt
     .messbalken        ein Wert im Vergleich zu einem Bezug, in Tabellen
     .skelett           Platzhalter, solange Inhalt nachgeladen wird

   Grundsatz: der Balken ist nie die einzige Aussage. Neben jedem Balken
   steht die Zahl, denn ein Balken laesst sich nicht vorlesen und nicht
   ausdrucken. Fuer Hilfsmittel traegt jeder Balken role="progressbar" mit
   aria-valuenow; die Klassen hier sind reine Darstellung.

   Alle Farben stammen aus app.css - Hell- und Dunkelthema laufen mit.
   ============================================================================= */

/* --- Anteilsbalken --------------------------------------------------------- */

.balken {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--flaeche-alt);
  border: 1px solid var(--linie);
  overflow: hidden;
}
.balken > .balken-fuellung {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--gruen);
  transition: width .35s ease-out;
}
.balken.gross { height: 16px; }
.balken.schmal { height: 6px; }

.balken.warnung > .balken-fuellung { background: var(--gelb); }
.balken.fehler  > .balken-fuellung { background: var(--rot); }

/* Ende unbekannt: ein wanderndes Stueck statt einer Fuellung. */
.balken.unbestimmt > .balken-fuellung {
  width: 32%;
  animation: emk-wandern 1.2s ease-in-out infinite;
  transition: none;
}
@keyframes emk-wandern {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

/* Gestreifte Fuellung, solange gearbeitet wird - steht der Vorgang still,
   steht auch das Muster. */
.balken.laeuft > .balken-fuellung {
  background-image: linear-gradient(
    115deg,
    rgba(255, 255, 255, .28) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .28) 50%,
    rgba(255, 255, 255, .28) 75%, transparent 75%);
  background-size: 22px 22px;
  animation: emk-streifen 1s linear infinite;
}
@keyframes emk-streifen {
  to { background-position: 22px 0; }
}

/* --- Fortschrittskarte ----------------------------------------------------- */

.vorgang {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gruen);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.vorgang.fehler   { border-left-color: var(--rot); }
.vorgang.fertig   { border-left-color: var(--gruen-dunkel); }
.vorgang.abgebrochen { border-left-color: var(--gelb); }

.vorgang-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.vorgang-kopf h3 { margin: 0; font-size: 14px; }
.vorgang-kopf .vorgang-anteil {
  margin-left: auto;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vorgang-kopf .vorgang-schritt { color: var(--schrift-hell); font-size: 12px; }

.vorgang-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--schrift-hell);
}
.vorgang-zahlen b {
  color: var(--schrift);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Schrittliste eines mehrstufigen Vorgangs */
.schrittliste { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; }
.schrittliste li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  color: var(--schrift-hell);
}
.schrittliste li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--linie-stark);
  flex: none;
}
.schrittliste li.laeuft { color: var(--schrift); font-weight: 600; }
.schrittliste li.laeuft::before {
  border-color: var(--gruen-dunkel);
  background: var(--gruen);
  animation: emk-pochen 1.1s ease-in-out infinite;
}
.schrittliste li.fertig::before {
  border-color: var(--gruen-dunkel);
  background: var(--gruen-dunkel);
}
.schrittliste li.fehler::before { border-color: var(--rot); background: var(--rot); }
@keyframes emk-pochen {
  50% { box-shadow: 0 0 0 4px var(--erfolg-flaeche); }
}

/* --- Messbalken in Tabellen und Karten ------------------------------------ */

/* Zahl und Balken in einer Zelle: die Zahl fuehrt, der Balken ordnet ein. */
.messbalken {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 110px;
}
.messbalken .mb-wert {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.messbalken .mb-spur {
  flex: 1;
  min-width: 42px;
  height: 6px;
  border-radius: 999px;
  background: var(--flaeche-alt);
  border: 1px solid var(--linie);
  overflow: hidden;
}
.messbalken .mb-spur > span {
  display: block;
  height: 100%;
  background: var(--gruen);
}
.messbalken.knapp  .mb-spur > span { background: var(--gelb); }
.messbalken.kritisch .mb-spur > span { background: var(--rot); }

/* --- Befundliste (Ampelpunkte einer Selbstpruefung) ------------------------ */

.befundliste { list-style: none; margin: 8px 0 0; padding: 0; }
.befundliste li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 4px 0;
  border-top: 1px solid var(--linie-hell);
  font-size: 13px;
  line-height: 1.4;
}
.befundliste li:first-child { border-top: 0; }
.befundliste li::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-top: 4px;
  flex: none;
}
.befundliste li.bf-gut::before     { background: var(--gruen-dunkel); }
.befundliste li.bf-warnung::before { background: var(--gelb); }
.befundliste li.bf-fehler::before  { background: var(--rot); }
.befundliste li.bf-fehler { font-weight: 600; }

/* --- Kleinteile fuer Masken ------------------------------------------------ */

/* Ankreuzfeld mit Beschriftung in einer Zeile - in Filter- und Aktionsleisten,
   wo die zweizeilige .feld-Huelle zu viel Platz braeuchte. */
.ankreuz {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
  padding-bottom: 2px;
}
.ankreuz input { margin: 0; }

/* Zusatzangaben, die den Blick nicht binden sollen (Kommandozeilenaufrufe). */
details.beiwerk { margin-top: 12px; }
details.beiwerk > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--schrift-hell);
  padding: 3px 0;
}
details.beiwerk > summary:hover { color: var(--schrift); }

/* Ein Befehl zum Abtippen oder Kopieren. */
pre.befehl {
  margin: 6px 0;
  padding: 9px 11px;
  background: var(--flaeche-alt);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

/* Spalte mit mehreren kleinen Schaltflaechen nebeneinander. */
td.aktionsspalte {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

/* --- Fortschritt beim Hochladen -------------------------------------------- */

.hochladen-fortschritt { margin-top: 12px; }
.hochladen-fortschritt .balken { height: 12px; }
.hochladen-fortschritt p { margin: 5px 0 0; font-variant-numeric: tabular-nums; }

/* --- Mehrschrittiger Ablauf erklaeren -------------------------------------- */

/* Vier Kaesten nebeneinander, die sagen, was in welcher Reihenfolge passiert.
   Gebraucht dort, wo ein Vorgang unumkehrbar ist und der Ablauf deshalb vor
   dem ersten Klick verstanden werden muss (Archiv). */
.ablauf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.ablauf-schritt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--flaeche-alt);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 9px 11px;
}
.ablauf-schritt .as-nr {
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--gruen);
  color: var(--auf-gruen);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ablauf-schritt .as-titel { font-weight: 600; }
.ablauf-schritt .as-text { color: var(--schrift-hell); font-size: 12px; line-height: 1.35; }

/* --- Jahrgang im Archiv ---------------------------------------------------- */

.jahrgang > h2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.jahrgang.jg-ausgelagert { border-left: 3px solid var(--linie-stark); }
.jahrgang.jg-archiviert  { border-left: 3px solid var(--gruen); }
.jahrgang.jg-offen       { border-left: 3px solid var(--gelb); }

/* --- Ladezustaende --------------------------------------------------------- */

/* Platzhalterzeilen, solange eine Liste nachgeladen wird. */
.skelett {
  display: block;
  height: 1em;
  border-radius: var(--radius);
  background: linear-gradient(90deg,
    var(--flaeche-alt) 25%, var(--flaeche-hover) 37%, var(--flaeche-alt) 63%);
  background-size: 400% 100%;
  animation: emk-schimmer 1.3s ease-in-out infinite;
}
@keyframes emk-schimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Ein Bereich, der gerade ersetzt wird, bleibt lesbar, nimmt aber keine
   Klicks mehr an - sonst wird zweimal ausgeloest. */
[aria-busy="true"].wird-geladen {
  position: relative;
  opacity: .55;
  pointer-events: none;
}

/* --- Der obere Ladebalken -------------------------------------------------- */

/* Bestimmter Anteil im Seitenbalken: die Fuellung wandert nicht, sie waechst.
   Der unbestimmte Fall steht in formular.css. */
.fortschritt.bestimmt::before {
  animation: none;
  left: 0;
  width: var(--anteil, 0%);
  transition: width .3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .balken.unbestimmt > .balken-fuellung { animation: none; width: 100%; opacity: .55; }
  .balken.laeuft > .balken-fuellung { animation: none; }
  .schrittliste li.laeuft::before { animation: none; }
  .skelett { animation: none; }
  .balken > .balken-fuellung { transition: none; }
}

@media print {
  .vorgang, .skelett { display: none !important; }
  .messbalken .mb-spur { display: none; }
}