:root {
    --hintergrund: #f4f5f7;
    --flaeche: #ffffff;
    --text: #1d2330;
    --leise: #667085;
    --rand: #d9dde4;
    --akzent: #1f5fbf;
    --akzent-text: #ffffff;
    --fehler: #b42318;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hintergrund: #14171c;
        --flaeche: #1e232b;
        --text: #e6e9ee;
        --leise: #98a2b3;
        --rand: #333a45;
        --akzent: #5b9bff;
        --akzent-text: #0b1220;
        --fehler: #f97066;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--hintergrund);
    color: var(--text);
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1 { font-size: 1.35rem; margin: 0 0 .75rem; }

.kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 1rem;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
}

.kopf form { display: flex; align-items: center; gap: .6rem; margin: 0; }
.marke { font-weight: 600; color: var(--text); text-decoration: none; }

.inhalt { max-width: 60rem; margin: 0 auto; padding: 1rem; }

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 1.25rem;
}

.schmal { max-width: 24rem; margin: 2rem auto; }

label { display: block; margin-bottom: .9rem; font-weight: 500; }
label.haken { display: flex; align-items: center; gap: .5rem; font-weight: 400; }

input:not([type=checkbox]) {
    display: block;
    width: 100%;
    margin-top: .25rem;
    padding: .6rem .7rem;
    font: inherit;
    color: var(--text);
    background: var(--hintergrund);
    border: 1px solid var(--rand);
    border-radius: 8px;
}

input[type=checkbox] { width: 1.2rem; height: 1.2rem; }

.knopf, .knopf-klein {
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    background: var(--akzent);
    color: var(--akzent-text);
}

.knopf { width: 100%; padding: .7rem 1rem; font-weight: 600; }
.knopf-klein { padding: .3rem .7rem; font-size: .9rem; }

.leise { color: var(--leise); }
.fehler { color: var(--fehler); margin: 0 0 .9rem; }

h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.klein { font-size: .85rem; }

/* Kopf mit Menü */
.menue { display: flex; gap: .25rem; }
.menue a {
    padding: .35rem .7rem;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
}
.menue a.aktiv { background: var(--hintergrund); color: var(--akzent); }
.knopf-leise { background: var(--hintergrund); color: var(--text); border: 1px solid var(--rand); }

.meldung, .hinweis {
    padding: .6rem .8rem;
    border-radius: 8px;
    background: var(--flaeche);
    border-left: 4px solid var(--akzent);
    margin: 0 0 1rem;
}
.hinweis { border-left-color: var(--fehler); }

/* Suchleiste: Feld nimmt die Breite, Knöpfe daneben */
.suchleiste { display: flex; gap: .5rem; align-items: stretch; margin-bottom: 1rem; }
.suchleiste input, .suchleiste select { margin-top: 0; flex: 1; min-width: 0; font-size: 1.05rem; }
select {
    padding: .6rem .7rem;
    font: inherit;
    color: var(--text);
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
}
.knopf-scan {
    font-size: 1.3rem;
    padding: 0 .8rem;
    border: 1px solid var(--rand);
    border-radius: 8px;
    background: var(--flaeche);
    cursor: pointer;
}

/* Trefferlisten */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 10px;
    margin-bottom: .5rem;
}
.zeile { display: block; padding: .7rem .9rem; color: var(--text); text-decoration: none; }
.haupt { display: block; overflow-wrap: anywhere; }
.neben { display: block; color: var(--leise); font-size: .92rem; margin-top: .2rem; }
.menge { font-weight: 600; color: var(--text); margin-right: .4rem; }
.standort { color: var(--text); font-weight: 500; }
.standort.fehlt { color: var(--leise); font-weight: 400; font-style: italic; }
.marke-klein {
    display: inline-block;
    font-size: .75rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--akzent);
    color: var(--akzent-text);
    vertical-align: middle;
}

/* Box-Seite */
.karte + .karte, .karte + .leise { margin-top: 1rem; }
.standort-form label { margin-bottom: .25rem; }
.reihe { display: flex; gap: .5rem; }
.reihe input { margin-top: 0; flex: 1; min-width: 0; }
.karton { scroll-margin-top: 1rem; }
.karton:target { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); }
.positionen > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .6rem .7rem;
    margin-bottom: .4rem;
    background: var(--hintergrund);
}
.positionen > li.markiert { outline: 2px solid var(--akzent); }
.positionen .haupt { flex: 1 1 14rem; }
.menge-form { display: flex; gap: .4rem; align-items: center; margin-left: auto; }
.menge-form input { width: 5.5rem; margin-top: 0; text-align: right; }

/* Kamera-Scan als Vollbild-Ebene */
.scanner {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.scanner[hidden] { display: none; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner-rahmen {
    position: absolute;
    width: min(80vw, 26rem);
    height: min(30vw, 10rem);
    border: 3px solid #fff;
    border-radius: 12px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
}
.scanner-text { position: absolute; top: 1.5rem; left: 1rem; right: 1rem; text-align: center; color: #fff; margin: 0; }
.scanner-zu { position: absolute; bottom: 1.5rem; left: 1rem; right: 1rem; width: auto; }

/* Umpacken je Karton – eingeklappt, damit die Box-Seite übersichtlich bleibt */
.umpacken { margin-top: .75rem; }
.umpacken summary { cursor: pointer; color: var(--akzent); font-weight: 500; }
.umpacken form { margin-top: .5rem; }
.umpacken input { margin-top: 0; flex: 1; min-width: 0; }

/* Menü mit vier Punkten: auf schmalen Handys umbrechen statt seitlich scrollen */
.kopf { flex-wrap: wrap; row-gap: .4rem; }
.menue { flex-wrap: wrap; }
.zaehler {
    display: inline-block;
    min-width: 1.3rem;
    padding: 0 .35rem;
    margin-left: .15rem;
    border-radius: 999px;
    background: var(--fehler);
    color: #fff;
    font-size: .75rem;
    text-align: center;
}

textarea {
    display: block;
    width: 100%;
    margin: .25rem 0 .9rem;
    padding: .6rem .7rem;
    font: inherit;
    color: var(--text);
    background: var(--hintergrund);
    border: 1px solid var(--rand);
    border-radius: 8px;
    resize: vertical;
}

/* Holaufträge / Bestellungen */
.kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.kopfzeile h1 { margin: 0; }
.auftrag { scroll-margin-top: 1rem; }
.auftrag:target { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); }
.bemerkung { background: var(--hintergrund); border-radius: 8px; padding: .5rem .7rem; white-space: pre-wrap; }
.holpositionen > li, .bestellung {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .6rem .7rem;
    margin-bottom: .4rem;
}
.holpositionen .haupt, .bestellung .haupt { flex: 1; min-width: 0; }
.holpositionen > li > form:last-child:not(.abhaken) { margin-left: auto; }
.holpositionen .neben a { color: var(--akzent); font-weight: 600; }
.neben.fehlt, .fehlt { font-style: italic; }
.geholt .haupt { text-decoration: line-through; color: var(--leise); }
.geholt .haupt .neben { text-decoration: none; }
.abhaken { margin: 0; }
.haken-knopf {
    width: 2.6rem;
    height: 2.6rem;
    border: 2px solid var(--akzent);
    border-radius: 8px;
    background: var(--flaeche);
    color: var(--akzent);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.geholt .haken-knopf { background: var(--akzent); color: var(--akzent-text); }
.freitext-inhalt { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.erledigt { margin-top: 1.5rem; }
.erledigt summary { cursor: pointer; color: var(--leise); margin-bottom: .5rem; }
.hinzufuegen .reihe { margin-bottom: .5rem; }
.menge-feld { width: 6rem !important; flex: 0 0 auto !important; }
.freitext { margin-top: .5rem; }
.freitext summary { cursor: pointer; color: var(--akzent); font-weight: 500; }
.freitext form { margin-top: .5rem; }
.absenden { margin-top: 1rem; }
.absenden + form { margin-top: .5rem; }

/* Packen */
.knopfreihe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; }
.knopfreihe form { margin: 0; }
.abstand { margin-top: 1rem; }
.knopf-link { color: var(--akzent); font-weight: 500; }
.knopf-gefahr { background: var(--fehler); color: #fff; }
.pack-knoepfe { display: flex; gap: .4rem; align-items: center; margin-left: auto; }
.pack-knoepfe form { margin: 0; }
.pack-knoepfe .knopf-klein { min-width: 2.4rem; }
.kopfzeile .knopf-klein { text-decoration: none; }
.karton .kopfzeile { margin-bottom: .5rem; }
.karton .kopfzeile h2 { margin: 0; }
.neuer-artikel label { margin-bottom: .6rem; }

/* Schmale Handys: Menü in eine Zeile, Name ausblenden (steht nach dem Anmelden ohnehin fest) */
@media (max-width: 480px) {
    .kopf { padding: .5rem .6rem; }
    .menue { gap: 0; }
    .menue a { padding: .3rem .32rem; font-size: .92rem; }
    .kopf form .leise { display: none; }
}
.bestellung > form:last-child { margin-left: auto; }