Handfach Umlagern

---

1. Prozessablauf

Das Modul dient der schnellen Umbuchung von Beständen zwischen zwei Lagerplätzen. Der Prozess ist in zwei Schritte unterteilt:

Schritt 1 (Quelle): Scannen des Artikels (EAN/ID) oder des Quell-Lagerplatzes.
Schritt 2 (Ziel): Scannen des Ziel-Lagerplatzes. Dabei wird eine Umlagerung auf denselben Lagerort verhindert - bei erfolgreichem Verbuchen erscheint die entsprechende visuelle und akustische Benachrichtigung.

---

2. Besonderheiten

Reservierungen

Falls ein Artikel auf dem Quellplatz für offene Aufträge reserviert ist, erscheint ein orangefarbener Warnhinweis. In diesem Fall wird nur die verfügbare Menge (Gesamtmenge minus Reservierung) umgebucht. Die reservierten Stücke müssen am alten Platz verbleiben. Dies soll deutlich sichtbar angezeigt werden - bei keiner Reservierung soll es keine dementsprechende Meldung geben.

Multi-Lagerplätze

Wird ein Lagerplatz gescannt, auf dem sich mehrere Artikel befinden (z.B. 061302B100), öffnet sich eine Card-Liste. Der Mitarbeiter wählt hier den umzulagernden Artikel per Touch aus.

---

3. CSS Blueprint für Entwickler

	/* GLOBAL */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #e0e0e0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

/* APP CONTAINER */
.app-container {
    width: 450px;
    background-color: #f4f4f4;
    height: 850px;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

/* HEADER */
.header {
    background-color: #1a5b8e;
    color: white;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 18px;
}

/* SCAN INPUT */
.search-container {
    padding: 8px 10px;
    background: white;
    border-bottom: 1px solid #ddd;
}

.search-container input {
    width: 100%;
    padding: 10px 15px;
    font-size: 16px;
    border: 1px solid #999;
    border-radius: 4px;
    box-sizing: border-box;
}

/* CONTENT AREA */
.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15px;
    background: #fff;
    overflow: hidden;
}

.dynamic-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
}

/* LISTEN (Multi-Platz Auswahl) */
.list-item {
    padding: 15px 12px;
    background: #fff;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.list-item:active {
    background: #e0e0e0;
    transform: scale(0.98);
}

.list-item-header {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 16px;
    color: #1a5b8e;
    margin-bottom: 4px;
}

.list-item-sub {
    font-size: 14px;
    color: #333;
    line-height: 1.3;
}

/* QUELLE / STANDORT */
.standort-box {
    background-color: #0b1d2e;
    color: white;
    text-align: center;
    padding: 15px;
    font-size: 24px;
    font-weight: 700;
    border-radius: 8px;
    margin: 15px 0;
}

.standort-box-label {
    font-size: 11px;
    font-weight: 700;
    color: #ccc;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* MENGE BADGE */
.menge-container {
    text-align: center;
    margin: 20px 0;
}

.badge-green {
    background-color: #43a047;
    color: white;
    border-radius: 24px;
    padding: 6px 18px;
    font-size: 28px;
}

/* RESERVIERUNG WARNUNG */
.reserve-warning {
    background-color: #ff9800;
    color: #000;
    padding: 10px;
    border-radius: 6px;
    font-weight: 700;
    text-align: center;
    margin-top: 10px;
    border: 2px solid #e65100;
}

/* ZIEL INPUT */
.target-input {
    width: 100%;
    padding: 15px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    border: 2px solid #1a5b8e;
    border-radius: 6px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* TYPOGRAFIE */
.text-bold { font-weight: 700; }
.text-xl { font-size: 32px; margin-bottom: 2px; }
.text-lg { font-size: 20px; margin-bottom: 10px; }
.text-md { font-size: 16px; }

hr {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 15px 0;
}

/* GRID INFOBLOCK */
.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    font-size: 14px;
    gap: 5px;
}

/* FOOTER BUTTONS */
.footer-actions {
    margin-top: 10px;
}

.btn-yellow {
    background-color: #ffca28;
    color: #000;
    font-weight: 700;
    font-size: 18px;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.btn-red {
    background-color: #c62828;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

/* FEEDBACK */
.flash-error {
    background-color: #ffcdd2 !important;
    transition: background 0.1s;
}