` — blendet ein, wartet 1200 ms, blendet aus
- [ ] **Step 1: `src/styles.css` schreiben**
```css
:root {
color-scheme: dark;
--bg: #14161a;
--fg: #f2f4f7;
--muted: #9aa3af;
--green: #1f8a4c;
--yellow: #b8860b;
--red: #a02c2c;
--line: #2a2e36;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: system-ui, -apple-system, sans-serif;
overscroll-behavior: none;
}
#app { display: flex; flex-direction: column; height: 100dvh; }
.camera { position: relative; flex: 1; overflow: hidden; background: #000; }
.camera video { width: 100%; height: 100%; object-fit: cover; }
.frame {
position: absolute;
inset: 20% 8%;
border: 3px solid rgba(255, 255, 255, 0.7);
border-radius: 8px;
pointer-events: none;
}
.stacks {
display: flex;
gap: 8px;
padding: 10px 12px;
overflow-x: auto;
border-top: 1px solid var(--line);
min-height: 56px;
align-items: center;
}
.stacks button {
flex: none;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: 8px;
background: #1c2027;
color: var(--fg);
font-size: 17px;
font-weight: 600;
}
.last {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-top: 1px solid var(--line);
min-height: 56px;
font-size: 15px;
color: var(--muted);
}
.last span { flex: 1; }
.action {
min-height: 56px;
border: none;
border-radius: 10px;
background: #2b6cb0;
color: #fff;
font-size: 18px;
font-weight: 600;
padding: 0 18px;
}
.action.secondary { background: #2a2e36; }
.capture { margin: 12px; }
.overlay {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 24px;
text-align: center;
z-index: 10;
}
.overlay.green { background: var(--green); }
.overlay.yellow { background: var(--yellow); }
.overlay.red { background: var(--red); }
.overlay .stack-id { font-size: 68px; font-weight: 800; letter-spacing: 2px; }
.overlay .detail { font-size: 20px; line-height: 1.5; }
.overlay .pn { font-size: 15px; opacity: 0.85; word-break: break-all; }
.choices { display: grid; gap: 12px; width: 100%; max-width: 420px; }
.choices button { min-height: 64px; font-size: 20px; }
.status { padding: 8px 12px; font-size: 14px; color: var(--muted); }
.status.warn { color: #f0b429; }
```
- [ ] **Step 2: `src/ui/scan-view.js` implementieren**
```js
/**
* Baut die Hauptansicht auf und liefert Aktualisierungsfunktionen zurueck.
* Kennt weder Kamera noch Erkennung - alles kommt ueber die Rueckrufe.
*/
export function renderScanView(root, { onCapture, onUndo, onOpenList, onPickFile }) {
root.innerHTML = `
Noch nichts erfasst
`;
const stacksEl = root.querySelector('#stacks');
const lastEl = root.querySelector('#last');
const statusEl = root.querySelector('#status');
const fileEl = root.querySelector('#file');
root.querySelector('#capture').addEventListener('click', onCapture);
root.querySelector('#undo').addEventListener('click', onUndo);
fileEl.addEventListener('change', () => {
if (fileEl.files[0]) onPickFile(fileEl.files[0]);
fileEl.value = '';
});
return {
video: root.querySelector('#preview'),
/** @param {{id: string, count: number}[]} stacks */
setStacks(stacks) {
stacksEl.innerHTML = '';
if (stacks.length === 0) {
stacksEl.textContent = 'Noch keine Stapel';
return;
}
for (const stack of stacks) {
const button = document.createElement('button');
button.textContent = `${stack.id}: ${stack.count}`;
button.addEventListener('click', onOpenList);
stacksEl.appendChild(button);
}
},
setLast(text) {
lastEl.textContent = text;
},
/** @param {string} text @param {boolean} warn */
setStatus(text, warn = false) {
statusEl.textContent = text;
statusEl.classList.toggle('warn', warn);
},
openFilePicker() {
fileEl.hidden = false;
fileEl.click();
},
};
}
```
- [ ] **Step 3: `src/ui/result-overlay.js` implementieren**
```js
function beschreibung(spec) {
const teile = [
spec.capacityGb ? `${spec.capacityGb}GB` : null,
spec.rank,
spec.speed,
spec.formFactor,
].filter(Boolean);
return teile.join(' ') || 'ohne Angaben';
}
/**
* Blendet die Treffer-Rueckmeldung ein und nach kurzer Zeit wieder aus.
* Gruen bei Barcode, gelb bei OCR. Keine Eingabe noetig.
*/
export function showResult(root, { stackId, spec, confidence }, dauerMs = 1200) {
const overlay = document.createElement('div');
overlay.className = `overlay ${confidence}`;
overlay.innerHTML = `
STAPEL ${stackId}
`;
overlay.querySelector('.detail').textContent = beschreibung(spec);
overlay.querySelector('.pn').textContent = spec.partNumber ?? '';
root.appendChild(overlay);
return new Promise((resolve) => {
setTimeout(() => {
overlay.remove();
resolve();
}, dauerMs);
});
}
```
- [ ] **Step 4: Im Browser prüfen**
`src/main.js` vorübergehend so ergänzen, dass nach dem Aufnehmen `showResult` mit erfundenen Werten aufgerufen wird:
```js
import { renderScanView } from './ui/scan-view.js';
import { showResult } from './ui/result-overlay.js';
import { startCamera } from './camera.js';
const app = document.querySelector('#app');
const view = renderScanView(app, {
onCapture: () =>
showResult(app, {
stackId: 'B',
spec: { capacityGb: 64, rank: '4DRx4', speed: 'PC4-2400', formFactor: 'LRDIMM', partNumber: 'M386A8K40BM1-CRC4Y' },
confidence: 'green',
}),
onUndo: () => view.setLast('zurueckgenommen'),
onOpenList: () => {},
onPickFile: () => {},
});
view.setStacks([{ id: 'A', count: 12 }, { id: 'B', count: 4 }]);
startCamera(view.video).catch(() => view.setStatus('Kamera nicht verfuegbar', true));
```
Run: `npm run dev`, Preview-URL auf dem Handy öffnen.
Expected: Kamerabild mit Zielrahmen, Stapel-Leiste zeigt `A: 12` und `B: 4`, Knopf blendet die grüne Rückmeldung ein, die nach gut einer Sekunde von selbst verschwindet. Alle Bedienflächen mit dem Daumen erreichbar.
- [ ] **Step 5: Committen**
```bash
git add src/styles.css src/ui/scan-view.js src/ui/result-overlay.js src/main.js
git commit -m "feat: Scan-Ansicht und Treffer-Rueckmeldung"
```
---
## Task 12: Rot-Dialog
**Files:**
- Create: `src/ui/ambiguous-dialog.js`
**Interfaces:**
- Consumes: nichts
- Produces: `askForStack(root, { spec, candidates }) -> Promise<{ action: 'stack', stackId: string } | { action: 'new' } | { action: 'retry' }>`
- [ ] **Step 1: `src/ui/ambiguous-dialog.js` implementieren**
```js
function gelesen(spec) {
const teile = [
spec.capacityGb ? `${spec.capacityGb}GB` : null,
spec.rank,
spec.speed,
spec.formFactor,
spec.partNumber,
].filter(Boolean);
return teile.length ? teile.join(' ') : 'nichts Verwertbares';
}
/**
* Haelt den Ablauf an und laesst den Nutzer entscheiden.
* Der einzige Punkt, an dem eine Eingabe verlangt wird.
* @returns {Promise<{action: 'stack', stackId: string}|{action: 'new'}|{action: 'retry'}>}
*/
export function askForStack(root, { spec, candidates }) {
const overlay = document.createElement('div');
overlay.className = 'overlay red';
overlay.innerHTML = `
Nicht eindeutig
Gelesen:
`;
overlay.querySelector('#read').textContent = gelesen(spec);
const choices = overlay.querySelector('#choices');
root.appendChild(overlay);
return new Promise((resolve) => {
const finish = (result) => {
overlay.remove();
resolve(result);
};
for (const stackId of candidates) {
const button = document.createElement('button');
button.className = 'action';
button.textContent = `Stapel ${stackId}`;
button.addEventListener('click', () => finish({ action: 'stack', stackId }));
choices.appendChild(button);
}
const neu = document.createElement('button');
neu.className = 'action secondary';
neu.textContent = 'neuer Stapel';
neu.addEventListener('click', () => finish({ action: 'new' }));
choices.appendChild(neu);
const nochmal = document.createElement('button');
nochmal.className = 'action secondary';
nochmal.textContent = 'nochmal scannen';
nochmal.addEventListener('click', () => finish({ action: 'retry' }));
choices.appendChild(nochmal);
});
}
```
- [ ] **Step 2: Im Browser prüfen**
In `src/main.js` den `onCapture`-Rückruf vorübergehend ersetzen:
```js
onCapture: async () => {
const antwort = await askForStack(app, {
spec: { capacityGb: 64, rank: null, speed: null, formFactor: null, partNumber: null },
candidates: ['A', 'B'],
});
view.setLast(`Antwort: ${JSON.stringify(antwort)}`);
},
```
Dazu oben `import { askForStack } from './ui/ambiguous-dialog.js';` ergänzen.
Run: `npm run dev`, Preview-URL öffnen, Knopf drücken.
Expected: Roter Dialog mit vier großen Flächen (`Stapel A`, `Stapel B`, `neuer Stapel`, `nochmal scannen`). Jeder Tipp schließt den Dialog und schreibt die Antwort in die Zuletzt-Zeile.
- [ ] **Step 3: Committen**
```bash
git add src/ui/ambiguous-dialog.js src/main.js
git commit -m "feat: Rot-Dialog fuer mehrdeutige Erkennung"
```
---
## Task 13: Sitzungsliste und Verdrahtung
Hier entsteht die vollständige App.
**Files:**
- Create: `src/ui/session-list.js`
- Modify: `src/main.js` (vollständig ersetzen)
**Interfaces:**
- Consumes: alle bisherigen Module
- Produces: `renderSessionList(root, session, { onMove, onRemove, onEndSession, onClose }) -> void`
- [ ] **Step 1: `src/ui/session-list.js` implementieren**
```js
function beschreibung(spec) {
const teile = [
spec.capacityGb ? `${spec.capacityGb}GB` : '?',
spec.rank ?? '?',
spec.speed ?? '?',
spec.formFactor ?? '?',
];
return teile.join(' ');
}
/** Vollbild-Liste aller Stapel der laufenden Sitzung. */
export function renderSessionList(root, session, { onMove, onRemove, onEndSession, onClose }) {
const overlay = document.createElement('div');
overlay.className = 'overlay';
overlay.style.background = 'var(--bg)';
overlay.style.justifyContent = 'flex-start';
overlay.style.overflowY = 'auto';
overlay.innerHTML = `
Sitzung
`;
const body = overlay.querySelector('#body');
for (const stack of session.stacks) {
const kopf = document.createElement('div');
kopf.className = 'detail';
kopf.style.textAlign = 'left';
kopf.style.marginTop = '12px';
kopf.textContent = `Stapel ${stack.id} — ${stack.count}x ${beschreibung(stack.spec)}`;
body.appendChild(kopf);
for (const entry of session.entries.filter((e) => e.stackId === stack.id)) {
const zeile = document.createElement('div');
zeile.style.display = 'flex';
zeile.style.gap = '8px';
zeile.style.alignItems = 'center';
const text = document.createElement('span');
text.style.flex = '1';
text.style.fontSize = '14px';
text.style.textAlign = 'left';
text.textContent = entry.spec.partNumber ?? beschreibung(entry.spec);
zeile.appendChild(text);
const wahl = document.createElement('select');
wahl.style.minHeight = '44px';
for (const ziel of session.stacks) {
const option = document.createElement('option');
option.value = ziel.id;
option.textContent = ziel.id;
option.selected = ziel.id === entry.stackId;
wahl.appendChild(option);
}
wahl.addEventListener('change', () => onMove(entry.entryId, wahl.value));
zeile.appendChild(wahl);
const weg = document.createElement('button');
weg.className = 'action secondary';
weg.style.minWidth = '56px';
weg.textContent = '✕';
weg.addEventListener('click', () => onRemove(entry.entryId));
zeile.appendChild(weg);
body.appendChild(zeile);
}
}
if (session.stacks.length === 0) {
body.textContent = 'Noch nichts erfasst.';
}
overlay.querySelector('#close').addEventListener('click', () => {
overlay.remove();
onClose();
});
overlay.querySelector('#end').addEventListener('click', () => {
overlay.remove();
onEndSession();
});
root.appendChild(overlay);
}
```
- [ ] **Step 2: `src/main.js` vollständig ersetzen**
```js
import { startCamera, grabFrame, imageDataFromFile } from './camera.js';
import { decodeBarcodes } from './barcode.js';
import { runOcr, isOcrAvailable } from './ocr.js';
import { recognize } from './pipeline.js';
import {
createSession, proposeAssignment, commitAssignment,
undoLast, moveEntry, removeEntry,
} from './session.js';
import { saveSession, loadSession, clearSession } from './storage.js';
import { renderScanView } from './ui/scan-view.js';
import { showResult } from './ui/result-overlay.js';
import { askForStack } from './ui/ambiguous-dialog.js';
import { renderSessionList } from './ui/session-list.js';
const app = document.querySelector('#app');
const store = window.localStorage;
let session = loadSession(store) ?? createSession();
let beschaeftigt = false;
const view = renderScanView(app, {
onCapture: () => verarbeite(() => grabFrame(view.video)),
onUndo: () => {
const entry = undoLast(session);
view.setLast(entry ? `zurueckgenommen: Stapel ${entry.stackId}` : 'nichts zurueckzunehmen');
aktualisiere();
},
onOpenList: oeffneListe,
onPickFile: (file) => verarbeite(() => imageDataFromFile(file)),
});
function aktualisiere() {
view.setStacks(session.stacks);
saveSession(session, store);
}
function beschreibe(spec, stackId) {
const teile = [
spec.capacityGb ? `${spec.capacityGb}GB` : '?',
spec.speed ?? '?',
spec.formFactor ?? '',
].filter(Boolean);
return `${teile.join(' ')} → Stapel ${stackId}`;
}
async function verarbeite(frameLiefern) {
if (beschaeftigt) return;
beschaeftigt = true;
view.setStatus('erkenne …');
try {
const frame = await frameLiefern();
const { spec, confidence } = await recognize(frame, {
decodeBarcodes,
runOcr,
});
const plan = proposeAssignment(session, spec);
let stackId = plan.stackId;
if (confidence === 'red' || plan.kind === 'ambiguous') {
const antwort = await askForStack(app, {
spec,
candidates: plan.kind === 'ambiguous' ? plan.candidates : session.stacks.map((s) => s.id),
});
if (antwort.action === 'retry') return;
stackId = antwort.action === 'stack' ? antwort.stackId : naechsterFreierStapel();
}
const entry = commitAssignment(session, spec, confidence, stackId);
view.setLast(beschreibe(spec, entry.stackId));
aktualisiere();
if (confidence !== 'red') {
await showResult(app, { stackId: entry.stackId, spec, confidence });
}
} catch (error) {
view.setStatus(`Fehler: ${error.message}`, true);
} finally {
beschaeftigt = false;
if (!isOcrAvailable()) {
view.setStatus('Texterkennung nicht verfuegbar — nur Barcodes werden gelesen', true);
} else {
view.setStatus('');
}
}
}
function naechsterFreierStapel() {
const used = new Set(session.stacks.map((stack) => stack.id));
for (const letter of 'ABCDEFGHIJKLMNOPQRSTUVWXYZ') {
if (!used.has(letter)) return letter;
}
return `A${session.stacks.length}`;
}
function oeffneListe() {
renderSessionList(app, session, {
onMove: (entryId, stackId) => {
moveEntry(session, entryId, stackId);
aktualisiere();
},
onRemove: (entryId) => {
removeEntry(session, entryId);
aktualisiere();
document.querySelectorAll('.overlay').forEach((el) => el.remove());
oeffneListe();
},
onEndSession: () => {
session = createSession();
clearSession(store);
view.setLast('Sitzung beendet');
aktualisiere();
},
onClose: () => {},
});
}
startCamera(view.video).catch((error) => {
view.setStatus(`Kamera nicht verfuegbar (${error.message}) — Bild auswaehlen`, true);
view.openFilePicker();
});
aktualisiere();
```
- [ ] **Step 3: Tests laufen lassen**
Run: `npm test`
Expected: PASS — alle bisherigen Tests weiterhin grün (die Verdrahtung berührt die reinen Module nicht).
- [ ] **Step 4: Vollständigen Durchlauf im Browser prüfen**
Run: `npm run dev`, Preview-URL auf dem Handy öffnen.
Prüfen mit dem Samsung-Referenzmodul:
1. Modul mit dem Samsung-Etikett scannen → grüne Rückmeldung, `STAPEL A`, `64GB 4DRx4 PC4-2400 LRDIMM`.
2. Dasselbe Modul erneut scannen → wieder `STAPEL A`, Zähler steht auf 2.
3. Ein anderes Modul scannen → `STAPEL B`.
4. Rückgängig drücken → Zähler von B fällt weg, Zuletzt-Zeile meldet die Rücknahme.
5. Etikett abdecken und scannen → roter Dialog erscheint.
6. Seite neu laden → die Stapel sind noch da.
7. Sitzungsliste öffnen, einen Eintrag umsortieren, `Sitzung beenden` → alles leer.
- [ ] **Step 5: Committen**
```bash
git add src/ui/session-list.js src/main.js
git commit -m "feat: Sitzungsliste und Verdrahtung zur vollstaendigen App"
```
---
## Task 14: Dokumentation, Tabellen-Validierung, Abnahme
**Files:**
- Create: `README.md`, `.vch-description` (letzteres überschreiben)
- Modify: `src/pn-tables.js` (nach Validierung)
**Interfaces:**
- Consumes: nichts
- Produces: nichts
- [ ] **Step 1: `.vch-description` überschreiben**
```
Sortierhilfe fuer gebrauchte Server-RAM-Module. Man haelt ein Modul vor die
Handykamera, und die App sagt sofort, auf welchen Stapel es gehoert - Module
mit identischen technischen Daten und identischer Hersteller-Teilenummer
landen zusammen, damit daraus verkaufsfertige Kits entstehen.
Gedacht fuer den Wareneingang im Gebrauchthandel mit Serverkomponenten, wo
gemischte Chargen ankommen und von Hand sortiert werden muessen. Die App
ersetzt das Abtippen von Etiketten und das Vergleichen im Kopf.
```
- [ ] **Step 2: `README.md` schreiben**
````markdown
# RAM-Sortierhilfe
Browser-App, die per Handykamera RAM-Module erkennt und beim physischen
Sortieren am Tisch anleitet: Modul vor die Kamera halten, die App nennt den
Stapel. Module mit identischer Spec **und** identischer Hersteller-Teilenummer
bilden einen Stapel.
Die Erkennung läuft vollständig lokal im Browser — kein Server, keine Cloud,
keine Daten verlassen das Gerät.
## Funktionsweise
1. **Barcode zuerst.** Code-128 und DataMatrix werden aus dem Kamerabild
dekodiert. Das ist exakt, im Gegensatz zu Texterkennung.
2. **Teilenummer-Decoder.** Aus einer Hersteller-PN wie `M386A8K40BM1-CRC4Y`
werden Kapazität, Bauform und Geschwindigkeit abgeleitet. Gelingt das,
entfällt OCR vollständig.
3. **OCR als Rückfallebene.** Nur bei überklebten oder beschädigten Etiketten.
Das Ergebnis wird gegen die bekannten Spec-Werte abgeglichen, was die
typischen Verwechslungen (0/O, 1/I, 8/B) auflöst.
4. **Stapel-Zuweisung.** Grün (Barcode) und Gelb (OCR) laufen ohne Eingabe
durch; nur bei Unsicherheit fragt die App nach.
## Installation
```bash
npm install
```
## Entwicklung
```bash
npm run dev
```
Der Server bindet an alle Interfaces; VCH stellt eine Preview-URL mit SSL
bereit. **HTTPS ist Pflicht** — ohne sichere Verbindung gibt der Browser die
Kamera nicht frei.
## Tests
```bash
npm test
```
Getestet werden die reinen Module: Teilenummer-Decoder, Spec-Normalisierung
und toleranter Vergleich, OCR-Feldextraktion, Stapel-Zuweisung, Pipeline und
Sitzungssicherung. Kamera und Oberfläche werden manuell geprüft.
## Produktion
```bash
npm run build
npm run preview
```
`preview` hört auf `PORT` aus der Umgebung.
## Technik
- Vanilla JavaScript (ES Modules), kein Framework
- [Vite](https://vite.dev/) als Entwicklungsserver und Bündler
- [`zxing-wasm`](https://github.com/Sec-ant/zxing-wasm) für Code-128 und DataMatrix
- [`tesseract.js`](https://tesseract.projectnaptha.com/) für Texterkennung
- `node:test` für Tests, ohne zusätzliche Test-Bibliothek
## Aufbau
| Datei | Verantwortung |
|---|---|
| `src/spec.js` | Spec-Objekt, bekannte Werte, Fingerabdruck, toleranter Vergleich |
| `src/pn-tables.js` | Herstellertabellen |
| `src/pn-decoder.js` | Teilenummer → Spec-Felder |
| `src/ocr-extract.js` | Rohtext → Spec-Felder |
| `src/session.js` | Stapel halten und zuweisen |
| `src/pipeline.js` | Barcode → PN → OCR → Ampelfarbe |
| `src/storage.js` | Absturzschutz der laufenden Sitzung |
| `src/camera.js`, `src/barcode.js`, `src/ocr.js` | Adapter an den Rändern |
| `src/ui/` | Ansichten |
`spec`, `pn-decoder`, `ocr-extract`, `session` und `pipeline` sind reine
Funktionen ohne Browser-Zugriff und deshalb vollständig testbar.
## Grenzen
- Keine Bestandsführung über Sitzungen hinweg, kein Export.
- Das Laden der Seite braucht eine Verbindung; das Sortieren selbst nicht.
- Der Teilenummer-Decoder kennt bisher nur das Samsung-DDR4-Schema. Unbekannte
Schemata sind kein Fehler — sie führen zum OCR-Weg. Erweiterung siehe unten.
## Herstellertabellen erweitern
`src/pn-tables.js` ist tabellengesteuert. Ein neuer Hersteller braucht einen
Eintrag mit `pattern`, `formFactor`, `density` und `speed` — keine
Codeänderung. Jeder neue Eintrag gehört mit einem realen Modul in
`test/pn-decoder.test.js` abgesichert.
````
- [ ] **Step 3: Herstellertabellen gegen reale Module validieren**
**Diese Aufgabe braucht Eingaben, die im Plan nicht vorliegen.** Vom Nutzer
werden Fotos oder abgetippte Angaben realer Module benötigt: jeweils
Hersteller-Teilenummer **und** die dazugehörige Klartextzeile mit Kapazität,
Rank und Geschwindigkeit.
Solange sie fehlen, gilt:
- Der Samsung-Eintrag `A8K40` und der Geschwindigkeitscode `CRC` sind belegt.
- Die übrigen Geschwindigkeitscodes (`CPB`, `CTD`, `CVF`, `CWE`) und die
Bauform-Codes stammen aus der veröffentlichten Systematik und sind **nicht**
gegen ein reales Modul geprüft.
- Hynix und Micron fehlen vollständig; deren Module laufen über den OCR-Weg.
Für jedes gelieferte Modul: einen Testfall in `test/pn-decoder.test.js`
ergänzen, dann den passenden Tabelleneintrag in `src/pn-tables.js` hinzufügen,
bis der Test grün ist.
- [ ] **Step 4: Gesamtabnahme**
Run: `npm test`
Expected: PASS — alle Tests grün.
Run: `npm run build`
Expected: `dist/` wird erzeugt, keine Fehler.
Run: `npm run preview`, Preview-URL auf dem Handy öffnen.
Expected: Der Durchlauf aus Task 13, Step 4 funktioniert auch im gebauten Stand.
- [ ] **Step 5: Committen**
```bash
git add README.md .vch-description src/pn-tables.js test/pn-decoder.test.js
git commit -m "docs: README und Projektbeschreibung"
```
---
## Offene Punkte
- **Herstellertabellen** (Task 14, Step 3) brauchen reale Module vom Nutzer.
Ohne sie funktioniert die App, nur läuft mehr Ware über den langsameren und
ungenaueren OCR-Weg.
- **Farb- und Schriftgestaltung** ist bewusst schlicht gehalten und kann nach
dem ersten Einsatz am Tisch nachgezogen werden.