/* Warteanzeige beim Erzeugen von Angebot/Auftrag (js/warteanzeige.js).
   Eigene Datei, weil sie im Kalkulator (kalkulator.css) UND im
   Schnell-Kalkulator (nur main.css) gebraucht wird. Farben mit Rueckfall. */
.lt-warten {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--lt-wait-line, rgba(246, 231, 96, .35));
    background: var(--lt-wait-bg, rgba(246, 231, 96, .08));
    border-radius: 10px;
    color: var(--lt-wait-text, inherit);
    font-size: 13px;
    text-align: left;
}
.lt-warten__balken {
    position: relative;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(127, 127, 127, .25);
}
.lt-warten__balken > span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 35%;
    border-radius: inherit;
    background: var(--lt-wait, #F6E760);
    animation: lt-warten-lauf 1.4s ease-in-out infinite;
}
.lt-warten__kopf {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
}
.lt-warten__zeit {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: .8;
    font-weight: 400;
}
.lt-warten__hinweis { margin: 0; opacity: .85; }

@keyframes lt-warten-lauf {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(290%); }
}
@media (prefers-reduced-motion: reduce) {
    /* Kein Laufen, dafuer ein ruhig pulsierender voller Balken. */
    .lt-warten__balken > span { width: 100%; animation: lt-warten-puls 2s ease-in-out infinite; }
}
@keyframes lt-warten-puls { 50% { opacity: .45; } }