/* Versandportal – bewusst schlicht, ohne Fremdbibliotheken.
   Die Oberfläche wird an Arbeitsplätzen und auf Tablets im Lager benutzt,
   deshalb große Klickflächen und gut lesbare Schrift. */

:root {
    --grund: #f4f5f7;
    --flaeche: #ffffff;
    --rand: #d8dbe0;
    --text: #1c2024;
    --gedaempft: #5c636b;
    --akzent: #1f5fa8;
    --akzent-dunkel: #17477d;
    --erfolg-rand: #2e7d4f;
    --erfolg-grund: #e8f5ed;
    --fehler-rand: #b3261e;
    --fehler-grund: #fdeceb;
    --warn-rand: #a26a00;
    --warn-grund: #fdf4e3;
}

* { box-sizing: border-box; }

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

/* ── Testband ─────────────────────────────────────────────────────────── */
.testband {
    background: #7a3e00;
    color: #fff;
    text-align: center;
    padding: .5rem 1rem;
    font-size: .9rem;
}

/* ── Kopfzeile ────────────────────────────────────────────────────────── */
.kopf {
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
}
.kopf-inhalt {
    max-width: 76rem;
    margin: 0 auto;
    padding: .9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.marke { font-weight: 600; }
.kopf nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.kopf nav a { color: var(--akzent); text-decoration: none; }
.kopf nav a:hover { text-decoration: underline; }
.benutzer { color: var(--gedaempft); font-size: .9rem; }

/* ── Grundgerüst ──────────────────────────────────────────────────────── */
main {
    max-width: 76rem;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 3rem;
}
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }

footer {
    max-width: 76rem;
    margin: 0 auto;
    padding: 1rem 1.25rem 2rem;
    color: var(--gedaempft);
    font-size: .85rem;
}

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.karte.schmal { max-width: 26rem; margin: 3rem auto; }

.hilfe { color: var(--gedaempft); margin: 0 0 1.25rem; }
.leer { color: var(--gedaempft); margin: 0; }
.klein { color: var(--gedaempft); font-size: .85rem; }
.fussnote { color: var(--gedaempft); font-size: .85rem; margin: 1.5rem 0 0; }
.nr { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ── Meldungen ────────────────────────────────────────────────────────── */
.meldung {
    padding: .85rem 1.1rem;
    border-radius: 6px;
    border-left: 4px solid var(--gedaempft);
    background: var(--flaeche);
    margin: 0 0 1.5rem;
}
.meldung.erfolg  { border-color: var(--erfolg-rand); background: var(--erfolg-grund); }
.meldung.fehler  { border-color: var(--fehler-rand); background: var(--fehler-grund); }
.meldung.warnung { border-color: var(--warn-rand);   background: var(--warn-grund); }

.warnblock {
    border: 1px solid var(--warn-rand);
    background: var(--warn-grund);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.warnblock p { margin: .4rem 0; }
.warnblock ul { margin: .4rem 0 0; padding-left: 1.25rem; }

/* ── Formulare ────────────────────────────────────────────────────────── */
label {
    display: block;
    margin: 1rem 0 .35rem;
    font-weight: 500;
    font-size: .92rem;
}
input[type="text"], input[type="password"] {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid var(--rand);
    border-radius: 6px;
    font: inherit;
    background: #fff;
}
input:focus-visible, button:focus-visible {
    outline: 3px solid #a7c3e6;
    outline-offset: 1px;
}
input.gross {
    font-size: 1.6rem;
    letter-spacing: .18em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

button {
    font: inherit;
    padding: .6rem 1.1rem;
    border: 1px solid var(--akzent);
    background: var(--akzent);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}
button:hover { background: var(--akzent-dunkel); }
button.haupt { width: 100%; margin-top: 1.5rem; padding: .75rem; font-size: 1.02rem; }
button.verweis {
    background: none;
    border: none;
    color: var(--akzent);
    padding: 0;
    text-decoration: underline;
}
button.verweis:hover { background: none; color: var(--akzent-dunkel); }
form.inline { display: inline; }

/* ── Tabelle ──────────────────────────────────────────────────────────── */

/* Wird eine Tabelle durch ungewöhnlich lange Bezeichnungen zu breit, soll sie
   in sich scrollen. Ohne diesen Rahmen schiebt sie die gesamte Seite zur Seite –
   dann wandern Kopfzeile und Meldungen mit, und die Bedienung wird mühsam. */
.tabellen-rahmen { overflow-x: auto; }

.liste {
    width: 100%;
    border-collapse: collapse;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    overflow: hidden;
}
.liste th, .liste td {
    padding: .8rem .9rem;
    text-align: left;
    border-bottom: 1px solid var(--rand);
    vertical-align: top;
}
.liste th {
    background: #eef0f3;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--gedaempft);
}
.liste tr:last-child td { border-bottom: none; }

/* Nummern nie umbrechen – die Lieferscheinnummer ist das Zuordnungsmerkmal und
   muss am Stück ablesbar sein. Wird es dadurch zu breit, scrollt der Rahmen. */
.liste td.nr { white-space: nowrap; }

.eingabe { display: flex; gap: .5rem; align-items: flex-start; }

/* Die vollen 20 Ziffern müssen im Feld sichtbar bleiben. Rutscht der Anfang
   aus dem Bild, kann niemand die Eingabe mit dem Paketaufkleber vergleichen –
   und genau dieser Abgleich ist der Sinn der Erfassung. In dicktengleicher
   Schrift entspricht 1ch exakt einer Ziffer. */
.eingabe input {
    flex: 0 0 auto;
    width: 23ch;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
.eingabe-zelle { white-space: nowrap; }

/* Einzelnes Nummernfeld außerhalb der Tabelle – gleiche Lesbarkeit, aber es
   darf die Kartenbreite nutzen. */
.nummernfeld {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    font-size: 1.1rem;
    max-width: 26ch;
}

.bestaetigung { margin: 1.25rem 0 0; }
label.zeile {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
    margin: 0;
}
label.zeile input[type="checkbox"] { width: auto; margin: 0; }

.marke-klein {
    display: inline-block;
    font-size: .75rem;
    background: #eef0f3;
    color: var(--gedaempft);
    padding: .1rem .45rem;
    border-radius: 4px;
    margin-left: .35rem;
}

.werte { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.5rem; margin: 0; }
.werte dt { color: var(--gedaempft); }
.werte dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ── Schmale Bildschirme: Tabelle als Karten ──────────────────────────────
   Der Umbruch greift bewusst früh (64rem). Darunter passt die Zeile mit dem
   vollbreiten Nummernfeld nicht mehr neben Empfänger und Artikel – die Tabelle
   würde die Seite seitlich hinausdrücken, und man müsste zum Eintragen quer
   scrollen. Als Karten steht jeder Lieferung die volle Breite zur Verfügung. */
@media (max-width: 64rem) {
    .liste, .liste thead, .liste tbody, .liste tr, .liste th, .liste td { display: block; }
    .liste thead { display: none; }
    .liste tr {
        border-bottom: 1px solid var(--rand);
        padding: .5rem 0;
    }
    .liste td { border: none; padding: .3rem .9rem; }
    .liste td:first-child { font-weight: 600; padding-top: .7rem; }
    .eingabe { flex-direction: column; }
    .eingabe input { min-width: 0; width: 100%; }
    .eingabe button { width: 100%; }
    .eingabe-zelle { white-space: normal; }
}