/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   VORGANG — die Sperrfläche für Arbeit, die dauert: Import, Export,
   Löschen. Die Optik; Zustände und Verhalten stehen in vorgang.js, das die
   Fläche beim ersten Aufruf selbst baut — kein Markup nötig.
     ARBEITET  Spinner, wo der Server in einem Stück arbeitet — keine
               erfundenen Prozente. Balken nur, wo es echte Zahlen gibt.
     FERTIG    grüner Haken; schließt von selbst nach 2 s, mit zweitem Satz
               nach 3 s. Die dünne Linie unten zeigt, wann — und hält an,
               solange die Maus auf der Karte liegt.
     HINWEIS   gelb, FEHLER rot: bleiben stehen bis „Schließen".
     ZEICHEN   kantig — eckige Strichenden, spitze Knicke, der Punkt im
               Ausrufezeichen ein Quadrat. Der Kreis dahinter bleibt rund.

   Ebene 200: über Schublade (120) und Konto-Menü (150), unter dem
   Anmeldefenster (300). Läuft die Sitzung mitten im Vorgang ab, muss man
   sich anmelden können — sonst stünde man vor einer Sperre, die nie geht.
   Der Knopf ist der Kit-Knopf (.btn.btn-primaer, buttons.css); ein eigener
   nur für diese Karte wäre die zweite Fassung desselben Elements. */

.vorgang {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--abstand-24);
    background: var(--overlay);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    /* visibility statt pointer-events: Eine unsichtbare Karte darf auch
       keinen Fokus fangen. Beim Öffnen springt sie sofort um, beim
       Schließen erst, wenn die Blende ausgelaufen ist. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.vorgang.offen {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.18s ease;
}
/* Die Seite dahinter scrollt nicht mit — dieselbe Regel wie beim Dialog
   (modal.css), hier eigenständig, weil Bausteine einander nicht voraussetzen. */
body:has(.vorgang.offen) { overflow: hidden; }

.vorgang-karte {
    position: relative;
    width: min(360px, 100%);
    padding: 28px var(--abstand-24) var(--abstand-24);   /* 28 oben: Der Kreis braucht über sich etwas mehr Luft als der Knopf unter sich */
    text-align: center;
    overflow: hidden;   /* die Ablauf-Linie schneidet an der Rundung ab */
    background: var(--flaeche-gehoben);
    border-radius: var(--rundung-gross);
    box-shadow: var(--schatten-fenster);
    outline: none;
}

.vorgang-zeichen {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--abstand-16);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vorgang-titel {
    font-size: var(--schrift-grund);
    font-weight: var(--gewicht-halbfett);
    color: var(--text);
    overflow-wrap: anywhere;
}
.vorgang-satz {
    margin-top: var(--abstand-6);
    font-size: var(--schrift-sm);
    line-height: 1.45;
    min-height: 1.45em;   /* ohne zweiten Satz springt die Karte nicht */
    color: var(--text-gedaempft);
    overflow-wrap: anywhere;
}

/* ── Arbeitet: Spinner — ein Ring, ein Viertel in Akzent ─────────────────── */
.vorgang-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--linie);
    border-top-color: var(--akzent);
    animation: vorgang-dreh 0.8s linear infinite;
}
@keyframes vorgang-dreh { to { transform: rotate(360deg); } }

/* ── Arbeitet: Balken — tiefe Bahn, Akzent-Füllung, Zahl darunter ────────── */
.vorgang-balken { margin-top: 18px; }   /* 18 wie der Knopf — Balken und Knopf stehen nie zugleich da */
.vorgang-bahn {
    height: 6px;
    border-radius: 3px;
    background: var(--vertieft);
    overflow: hidden;
}
.vorgang-fuellung {
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--akzent);
    transition: width 0.15s linear;
}
.vorgang-zahl {
    margin-top: var(--abstand-8);
    min-height: 1.4em;
    font-family: var(--schriftart-mono);
    font-size: var(--schrift-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-leise);
}

/* ── Ergebnis: Kreis in der Zustandsfarbe, kantiges Zeichen darin ────────── */
.vorgang-ok      { --vorgang-farbe: var(--ok); }
.vorgang-hinweis { --vorgang-farbe: var(--warnung); }
.vorgang-fehler  { --vorgang-farbe: var(--fehler); }

.vorgang-kreis {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--vorgang-farbe) 16%, transparent);
    color: var(--vorgang-farbe);
    animation: vorgang-rein 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.vorgang-kreis svg { display: block; width: 28px; height: 28px; }
/* Der Strich zeichnet sich. Versatz 21 statt 20: Mit eckigen Enden stünde
   sonst am Anfang des Pfads schon ein winziges Quadrat, bevor die Linie
   losläuft (das Ende eines Strichs von der Länge null trägt seine Kappe). */
.vorgang-kreis path {
    stroke-dasharray: 20;
    stroke-dashoffset: 21;
    animation: vorgang-strich 0.35s 0.12s ease-out forwards;
}
@keyframes vorgang-rein   { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes vorgang-strich { to { stroke-dashoffset: 0; } }

.vorgang-knopf { margin-top: 18px; }   /* siehe .vorgang-balken */

/* ── Fertig: die Linie, die zeigt, wann die Karte von selbst geht ────────── */
.vorgang-ablauf {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--ok);
    opacity: 0.7;
    transform-origin: left;
}
.vorgang-ablauf.laeuft { animation: vorgang-ablauf var(--vorgang-dauer, 2s) linear forwards; }
.vorgang-ablauf.halt   { animation-play-state: paused; }
@keyframes vorgang-ablauf { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* [hidden] mit !important: Keine display-Regel eines Moduls darf ein
   verstecktes Teil wieder hervorholen. */
.vorgang-balken[hidden],
.vorgang-knopf[hidden],
.vorgang-ablauf[hidden] { display: none !important; }