/* ============================================
   LADEANZEIGE MIT FORTSCHRITT  (30.09.2026)
   ============================================
   Anlass (Marc): "teilweise haengt das auch mal fest und man weiss es nicht".
   Gemessen: ein einzelner KI-Aufruf braucht ~16,5 Sekunden — ein stehender Satz
   ("PDF wird verarbeitet...") sieht in dieser Zeit aus wie ein Absturz.

   Das Overlay hat deshalb ZWEI Zustaende. Ohne Klasse bleibt alles wie bisher
   (Kreisel, ein Satz) — das gilt fuer Anmelden, Speichern, Loeschen. Erst
   `.mit-fortschritt` schaltet auf Blatt-Animation, Balken und Prozent um; nur
   die Import-Wege setzen sie.
   ============================================ */

.ladebild,
.ladebalken,
.ladeprozent,
.ladehinweis {
    display: none;
}

#loading-overlay.mit-fortschritt .loader {
    display: none;
}

#loading-overlay.mit-fortschritt .ladebild,
#loading-overlay.mit-fortschritt .ladebalken,
#loading-overlay.mit-fortschritt .ladeprozent,
#loading-overlay.mit-fortschritt .ladehinweis {
    display: block;
}

/* --- Das Bild: Brief einwerfen, Roboter nimmt ihn an ------------------- 
   Marcs Vorgabe (30.09.2026): "ein Roboterkind am Briefschlitz, auf der anderen
   Seite schiebt eine Person den Brief rein (das Einscannen) und das Kind nimmt
   den Brief". Umgesetzt als SVG + CSS-Keyframes — eine Bibliothek waere fuer
   fuenf bewegte Teile nicht zu rechtfertigen, und SVG bleibt bei jeder Groesse
   scharf.

   Die Runde dauert 4,4 s und teilt sich so auf:
     0-26 %  Hand schiebt den Brief in den Schlitz
    26-34 %  Hand faehrt zurueck
    34-48 %  Brief kommt hinter dem Schlitz heraus, Arm hebt sich
    48-72 %  Roboter haelt und liest ihn (Scanlinie, Augen blinzeln)
    72-92 %  Brief sinkt in die Ablage
    92-100 % kurze Ruhe, dann von vorn
   ----------------------------------------------------------------------- */

.ladebild {
    width: 168px;
    height: 112px;
}

.rb {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.rb-wand     { fill: #2b2b35; }
.rb-schlitz  { fill: #0b0b10; }
.rb-aermel   { fill: #4b5563; }
.rb-haut     { fill: #e6b98f; }
.rb-papier   { fill: #fffdf7; }
.rb-text     { fill: rgba(110, 92, 64, 0.42); }
.rb-kopf,
.rb-koerper  { fill: #d8dce3; }
.rb-knopf    { fill: var(--accent-primary); }
.rb-arm      { fill: #b9bfc9; }
.rb-ablage   { fill: var(--accent-primary); }
.rb-antenne  { stroke: #b9bfc9; stroke-width: 2.5; stroke-linecap: round; }
.rb-lampe    { fill: var(--accent-primary); }
.rb-auge     { fill: #1f2937; }
.rb-scan     { fill: var(--accent-primary); opacity: 0; }

/* Alle beweglichen Teile drehen/schieben um ihre eigene Mitte, nicht um den
   Ursprung des SVG — ohne `fill-box` waeren die Wege voellig daneben. */
.rb-hand,
.rb-brief,
.rb-arm,
.rb-auge,
.rb-lampe,
.rb-scan {
    transform-box: fill-box;
    transform-origin: center;
}

.rb-hand        { animation: rb-hand 4.4s ease-in-out infinite; }
.rb-brief-links { animation: rb-brief-links 4.4s ease-in-out infinite; }
.rb-brief-rechts{ animation: rb-brief-rechts 4.4s ease-in-out infinite; }
.rb-arm         { transform-origin: right center; animation: rb-arm 4.4s ease-in-out infinite; }
.rb-auge        { animation: rb-blinzeln 4.4s ease-in-out infinite; }
.rb-lampe       { animation: rb-lampe 4.4s ease-in-out infinite; }
.rb-scan        { animation: rb-scan 4.4s ease-in-out infinite; }

/* Der linke Brief startet ausserhalb und faehrt bis an den Schlitz. */
.rb-brief-links  { transform: translate(44px, 46px); }
.rb-brief-rechts { transform: translate(100px, 46px); }

@keyframes rb-hand {
    0%       { transform: translateX(-26px); }
    26%      { transform: translateX(22px); }
    34%, 96% { transform: translateX(-26px); }
    100%     { transform: translateX(-26px); }
}

@keyframes rb-brief-links {
    /* Die Grundstellung steckt schon im `transform` der Regel oben; hier kommt
       nur die Bewegung dazu. Darum wird sie in jedem Schritt wiederholt. */
    0%        { transform: translate(18px, 46px); opacity: 1; }
    24%       { transform: translate(52px, 46px); opacity: 1; }
    28%       { transform: translate(60px, 46px); opacity: 0; }
    28.1%, 96%{ transform: translate(18px, 46px); opacity: 0; }
    100%      { transform: translate(18px, 46px); opacity: 1; }
}

/* Gehalten wird der Brief VOR dem Bauch, nicht vor dem Gesicht — sonst
   verdeckt er genau das, was die Szene sympathisch macht (gemessen an den
   Einzelbildern: Kopf reicht bis y=58, deshalb liegt die Oberkante bei 58). */
@keyframes rb-brief-rechts {
    0%, 30%   { transform: translate(92px, 54px); opacity: 0; }
    34%       { transform: translate(97px, 56px) rotate(-2deg); opacity: 1; }
    48%       { transform: translate(102px, 58px) rotate(-5deg); opacity: 1; }
    72%       { transform: translate(102px, 58px) rotate(-5deg); opacity: 1; }
    90%       { transform: translate(120px, 88px) scale(0.9) rotate(2deg); opacity: 1; }
    94%, 100% { transform: translate(120px, 92px) scale(0.85) rotate(2deg); opacity: 0; }
}

@keyframes rb-arm {
    0%, 32%   { transform: rotate(0deg); }
    46%, 70%  { transform: rotate(-38deg); }
    86%, 100% { transform: rotate(0deg); }
}

@keyframes rb-blinzeln {
    0%, 40%, 47%, 100% { transform: scaleY(1); }
    43%, 44%           { transform: scaleY(0.12); }
    62%, 63%           { transform: scaleY(0.12); }
}

@keyframes rb-lampe {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* Die Scanlinie wandert ueber den Brief, waehrend der Roboter ihn haelt. */
@keyframes rb-scan {
    0%, 48%   { transform: translateY(0); opacity: 0; }
    50%       { transform: translateY(0); opacity: 0.95; }
    68%       { transform: translateY(21px); opacity: 0.95; }
    72%, 100% { transform: translateY(21px); opacity: 0; }
}

/* --- Balken, Prozent, Hinweis ------------------------------------------- */

.ladebalken {
    width: min(260px, 72vw);
    height: 8px;
    border-radius: var(--radius-full, 999px);
    background: var(--border-subtle);
    overflow: hidden;
}

.ladebalken-fuellung {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-primary), #ffd68a);
    /* Der Stand springt nie, auch wenn ein Schritt auf einmal viel meldet. */
    transition: width 0.35s ease;
}

.ladeprozent {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent-primary);
}

/* Bleibt als Platz fuer einen Hinweis — seit dem Hintergrund-Import (30.09.)
   steht die lange Wartezeit in der Auftragsleiste, nicht mehr im Overlay. */
.ladehinweis {
    margin: 0;
    max-width: min(320px, 82vw);
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-muted, #9aa0a6);
}

/* Wer Bewegung abgeschaltet hat, bekommt Balken und Prozent — ohne Zappeln. */
@media (prefers-reduced-motion: reduce) {
    .rb-hand, .rb-brief, .rb-arm, .rb-auge, .rb-lampe, .rb-scan {
        animation: none;
    }
    /* Ohne Bewegung bleibt ein ruhiges Bild: der Brief liegt beim Roboter. */
    .rb-brief-links  { opacity: 0; }
    .rb-brief-rechts { transform: translate(102px, 58px); opacity: 1; }
}

/* --- „Ausblenden" (Marc, 01.10.2026) ------------------------------------
   Nur waehrend eines Imports (`.ausblendbar`, gesetzt von importStarten bzw.
   merkblatt.js): die grosse Ansicht wird klein, der Auftrag laeuft in der
   Leiste unten weiter. Anmelden/Speichern zeigen den Knopf nie. */
.lade-ausblenden {
    display: none;
    margin-top: var(--space-sm, 8px);
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, #c8c8d0);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.lade-ausblenden i { margin-right: 6px; }

.lade-ausblenden:hover,
.lade-ausblenden:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary, #fff);
}

#loading-overlay.ausblendbar .lade-ausblenden {
    display: inline-flex;
    align-items: center;
}