/* ─────────────────────────────────────────────────────────────────────────
   Messetool 2.0 – Basis-Stile. Palette und Kopfleiste nach Design-Standard
   (Hintergrund #F6F4EF, Text #1C2B33, Akzent #1B8A94) und abgenommenem
   Mockup mockup-v2-login-kopfleiste.html. Messefarbe kommt als CSS-
   Variable --messe-hg / --messe-text aus layout.php.
   ───────────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #F6F4EF; color: #1C2B33; }
a { color: #1B8A94; }
[hidden] { display: none !important; }

.inhalt { max-width: 480px; margin: 0 auto; padding: 0 16px 60px; }
@media (min-width: 681px) { .inhalt { max-width: 960px; padding: 0 32px 60px; } }

.seitentitel { font-size: 19px; margin: 6px 0 2px; }
.seiteninfo { font-size: 12.5px; color: #8B9AA0; margin: 0 0 14px; }
.karte { background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; padding: 14px; margin-bottom: 10px; font-size: 13.5px; line-height: 1.5; }
.badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 10px; background: #E4F2F3; color: #14666E; vertical-align: middle; }
.abstand-oben { margin-top: 14px; }

.meldung { border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
.meldung.ok { background: #E4F2F3; color: #14666E; }
.meldung.fehler { background: #FBE7E4; color: #B23A2E; }

.btn-primaer { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 48px; border: none; border-radius: 10px; background: #1B8A94; color: #fff; font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; }
.btn-primaer.schmal { width: auto; padding: 0 24px; }
.btn-sekundaer { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 1px solid #1B8A94; border-radius: 8px; background: #fff; color: #1B8A94; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; }
.btn-klein { height: 32px; padding: 0 12px; border: 1px solid #CBD3D6; border-radius: 8px; background: #fff; color: #B23A2E; font-size: 12.5px; font-family: inherit; cursor: pointer; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login { max-width: 380px; margin: 0 auto; padding: 48px 8px; }
.login-marke { font-size: 11px; letter-spacing: 1.6px; font-weight: 700; color: #12283B; }
.login-titel { font-size: 22px; font-weight: 700; margin: 6px 0 2px; }
.beta { display: inline-block; font-size: 10.5px; font-weight: 700; color: #7A5200; background: #FFE9B8; padding: 2px 8px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
.login-unter { font-size: 13px; color: #8B9AA0; margin-bottom: 24px; }
.feld { margin-bottom: 14px; }
.feld label { display: block; font-size: 12px; font-weight: 600; color: #5B6B73; margin-bottom: 5px; }
.feld input { width: 100%; height: 46px; border: 1px solid #CBD3D6; border-radius: 8px; padding: 0 12px; font-size: 16px; font-family: inherit; background: #fff; }
.bleiben { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid #E4E1D8; border-radius: 8px; padding: 10px 12px; margin: 4px 0 18px; font-size: 13px; cursor: pointer; }
.bleiben input { width: 20px; height: 20px; accent-color: #1B8A94; margin: 1px 0 0; flex-shrink: 0; }
.bleiben small { display: block; color: #8B9AA0; font-size: 11.5px; margin-top: 2px; }
.login-link { display: block; text-align: center; margin-top: 14px; font-size: 13px; }

.vollbild-hinweis { max-width: 380px; margin: 0 auto; padding: 70px 10px; text-align: center; }
.vollbild-hinweis h1 { font-size: 19px; margin: 0 0 8px; }
.vollbild-hinweis p { font-size: 13.5px; color: #5B6B73; line-height: 1.5; margin: 0 0 20px; }
.hinweis-symbol { width: 64px; height: 64px; border-radius: 50%; background: #E4F2F3; font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.hinweis-symbol.rot { background: #FBE7E4; }
.hinweis-karte { text-align: center; padding: 24px 18px; }
.hinweis-karte .hinweis-symbol { width: 52px; height: 52px; font-size: 24px; margin-bottom: 10px; }
.hinweis-karte h2 { font-size: 15px; margin: 0 0 6px; }
.hinweis-karte p { font-size: 12.5px; color: #5B6B73; margin: 0 0 14px; }

/* ── Kopfleiste ────────────────────────────────────────────────────────── */
.kopf { display: flex; align-items: center; gap: 4px; height: 50px; border-radius: 14px; background: var(--messe-hg); color: var(--messe-text); margin: 12px 16px 14px; padding: 0 6px; position: relative; z-index: 12; }
.kopf button { border: none; background: none; color: inherit; font-family: inherit; cursor: pointer; display: flex; align-items: center; }
.kopf-menue { width: 40px; height: 40px; justify-content: center; font-size: 19px; flex-shrink: 0; }
.kopf-auswahl { flex: 1; height: 40px; gap: 8px; padding: 0 6px 0 2px; }
.kopf-auswahl:disabled { cursor: default; opacity: .85; }
.kopf-kal { font-size: 14px; flex-shrink: 0; }
.kopf-messe { flex: 1; text-align: left; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-stand { flex-shrink: 0; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.45); padding: 3px 9px; border-radius: 11px; white-space: nowrap; }
.kopf-stand.fehlt { background: #FFE9B8; color: #7A5200; border-color: #FFE9B8; }
.kopf-chev { font-size: 11px; flex-shrink: 0; }
@media (min-width: 681px) {
  .kopf { margin: 0 0 18px; border-radius: 0; height: 60px; padding: 0 26px; }
}

/* ── Abdunkeln / Auswahl-Sheet ─────────────────────────────────────────── */
.abdunkeln { position: fixed; inset: 0; background: rgba(20,20,20,.4); z-index: 20; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; background: #fff; border-radius: 18px 18px 0 0; z-index: 21; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(0,0,0,.15); }
@media (min-width: 681px) { .sheet { left: 50%; right: auto; width: 440px; transform: translateX(-50%); } }
.sheet-griff { width: 40px; height: 4px; border-radius: 2px; background: #CBD3D6; margin: 0 auto 12px; }
.sheet h3 { font-size: 15px; margin: 0 0 4px; }
.sheet-sub { font-size: 12px; color: #8B9AA0; margin: 0 0 6px; }
.sheet-label { font-size: 11px; font-weight: 700; color: #8B9AA0; text-transform: uppercase; letter-spacing: .4px; margin: 14px 0 8px; }
.sheet-pflicht { background: #FFF7E6; color: #7A5200; border-radius: 8px; padding: 9px 11px; font-size: 13px; margin-bottom: 12px; }
.sheet-leer { font-size: 13px; color: #8B9AA0; }
.sheet-hinweis { margin: 14px 0 0; font-size: 11.5px; color: #8B9AA0; }
.sheet form { margin: 0; }
.messe-zeile { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 1px solid #E4E1D8; border-radius: 10px; margin-bottom: 6px; font-size: 14px; background: #fff; color: #1C2B33; font-family: inherit; cursor: pointer; text-align: left; }
.messe-zeile.aktiv { border-color: #1B8A94; background: #E4F2F3; font-weight: 600; }
.messe-punkt { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.messe-zeile-name { flex: 1; }
.messe-zeile-status { font-size: 11.5px; color: #8B9AA0; font-weight: 500; }
.messe-zeile-status.laeuft { color: #1B8A94; font-weight: 600; }
.stand-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stand-kacheln form.breit { grid-column: 1 / -1; }
.stand-kachel { width: 100%; height: 56px; border: 1px solid #CBD3D6; border-radius: 10px; background: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; color: #1C2B33; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.stand-kachel small { font-size: 10.5px; font-weight: 500; color: #8B9AA0; }
.stand-kachel.aktiv { border: 2px solid #1B8A94; background: #E4F2F3; color: #14666E; }

/* ── Menü ──────────────────────────────────────────────────────────────── */
.menue { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; max-width: 86vw; background: #fff; z-index: 21; box-shadow: 4px 0 20px rgba(0,0,0,.18); padding: 18px 0 calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; display: flex; flex-direction: column; }
.menue-kopf { padding: 0 18px 12px; border-bottom: 1px solid #E4E1D8; }
.menue-kopf strong { font-size: 11px; letter-spacing: 1.5px; color: #12283B; }
.menue-name { font-size: 14.5px; font-weight: 600; margin-top: 6px; }
.menue-rollen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.rolle { font-size: 10.5px; font-weight: 700; color: #fff; background: #12283B; padding: 3px 8px; border-radius: 10px; }
.rolle.leer { background: #F0EEE7; color: #8B9AA0; }
.menue-geraet { margin: 10px 18px 4px; background: #F6F4EF; border-radius: 8px; padding: 9px 11px; font-size: 11.5px; color: #5B6B73; line-height: 1.45; }
.menue-geraet b { color: #1C2B33; }
.menue-gruppe { font-size: 10.5px; font-weight: 700; color: #8B9AA0; text-transform: uppercase; letter-spacing: .4px; padding: 12px 18px 4px; }
.menue a, .menue-folgt { display: flex; align-items: center; gap: 11px; padding: 8px 18px; font-size: 13.5px; color: #1C2B33; text-decoration: none; border-left: 3px solid transparent; }
.menue a.aktiv { border-left-color: #1B8A94; background: #F0F8F8; font-weight: 600; }
.menue-folgt { color: #A6B1B6; }
.menue-folgt em { margin-left: auto; font-size: 10.5px; font-style: normal; background: #F0EEE7; color: #8B9AA0; padding: 1px 7px; border-radius: 9px; }
.menue .ic { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.menue-fuss { margin-top: auto; padding: 12px 18px 0; border-top: 1px solid #E4E1D8; display: flex; flex-direction: column; gap: 4px; }
.menue-fuss a { padding: 6px 0; border: none; font-size: 13px; }
.menue-fuss a.neutral { color: #1B8A94; }
.menue-fuss a.klein { font-size: 12px; color: #8B9AA0; }
.menue-fuss form { margin: 0; }
.abmelden { border: none; background: none; padding: 6px 0; font-size: 13px; color: #B23A2E; font-family: inherit; cursor: pointer; }

/* ── Startseite ────────────────────────────────────────────────────────── */
.kachel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.kachel { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; padding: 14px; text-decoration: none; color: #1C2B33; }
.kachel strong { font-size: 15px; }
.kachel span { font-size: 12.5px; color: #5B6B73; }
.kachel em { font-size: 11px; font-style: normal; color: #1B8A94; margin-top: 4px; }
.kachel.folgt { opacity: .6; }
.kachel.folgt em { color: #8B9AA0; }

.geraet-karte { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.geraet-karte small { color: #8B9AA0; font-size: 11.5px; }

/* ── Formulare allgemein ───────────────────────────────────────────────── */
fieldset { border: 1px solid #E4E1D8; border-radius: 8px; padding: 10px 12px 12px; margin: 0; min-width: 0; }
legend { font-size: 12px; font-weight: 700; color: #5B6B73; padding: 0 4px; }
.feld select { width: 100%; height: 46px; border: 1px solid #CBD3D6; border-radius: 8px; padding: 0 10px; font-size: 16px; font-family: inherit; background: #fff; }
.feld input[type=color] { padding: 4px; cursor: pointer; }
.zwei { display: flex; gap: 8px; }
.zwei > * { flex: 1; }
.hilfe { font-size: 11.5px; color: #8B9AA0; margin: 4px 0 0; line-height: 1.4; }
.check { display: flex; gap: 8px; align-items: center; font-size: 13.5px; margin-top: 10px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: #1B8A94; flex-shrink: 0; }
.btn-primaer.klein { height: 40px; font-size: 14px; margin-top: 10px; }
.btn-sekundaer.klein { margin-top: 8px; }
.btn-sekundaer.voll, .btn-warnung.voll { width: 100%; }
.btn-warnung { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 1px solid #E4C5C0; border-radius: 8px; background: #fff; color: #B23A2E; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; }
.zaehler { display: flex; align-items: center; gap: 8px; }
.zaehler button { width: 44px; height: 44px; border-radius: 8px; border: 1px solid #CBD3D6; background: #fff; font-size: 20px; cursor: pointer; flex-shrink: 0; }
.zaehler input { width: 70px; text-align: center; }

/* ── Messenverwaltung: Karten ──────────────────────────────────────────── */
details.mk { background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.mk-kopf { list-style: none; cursor: pointer; padding: 13px 14px; display: flex; gap: 10px; align-items: flex-start; }
.mk-kopf::-webkit-details-marker { display: none; }
.mk-swatch { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; margin-top: 1px; border: 1px solid rgba(0,0,0,.1); }
.mk-text { display: flex; flex-direction: column; flex: 1; }
.mk-name { font-size: 15.5px; font-weight: 700; overflow-wrap: anywhere; }
.mk-datum { font-size: 12px; color: #5B6B73; margin-top: 2px; }
.mk-chev { color: #8B9AA0; font-size: 11px; transition: transform .15s; }
details.mk[open] .mk-chev { transform: rotate(180deg); }
.pillen { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pille { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
.p-laeuft, .p-verkauf { background: #E3F2E8; color: #2F7D4F; }
.p-zukunft { background: #E7EEF3; color: #1B5A78; }
.p-beendet { background: #F0EEE7; color: #8B9AA0; }
.p-gesperrt { background: #FBEAE8; color: #B23A2E; }
.p-info { background: #F6F4EF; color: #5B6B73; }
.mk-inhalt { border-top: 1px solid #F0EEE7; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.mk-inhalt form { margin: 0; }

details.ort { border-bottom: 1px solid #F0EEE7; }
details.ort summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 0; font-size: 13.5px; }
details.ort summary::-webkit-details-marker { display: none; }
details.ort small { color: #8B9AA0; }
details.ort.inaktiv .ort-name { color: #A6B1B6; text-decoration: line-through; }
.ort-typ { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px; background: #DCFCE7; color: #166534; }
.ort-typ.lager { background: #EDE9FE; color: #5B21B6; }
.ort-aendern { margin-left: auto; font-size: 12px; color: #1B8A94; }
.ort-form { padding: 0 0 12px; }
details.ort + .zwei, fieldset > .zwei:last-of-type { margin-top: 10px; }

.fab { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 448px; margin: 0 auto; height: 50px; border: none; border-radius: 10px; background: #1B8A94; color: #fff; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.15); z-index: 10; }
body:has(.fab) .inhalt { padding-bottom: 90px; }
.sheet-zu { position: absolute; top: 10px; right: 14px; border: none; background: none; font-size: 22px; color: #8B9AA0; cursor: pointer; }

/* ── Startseite: Fertigstellungs-Hinweis ───────────────────────────────── */
.hinweis-fertig { border-left: 4px solid #D97706; }
.hinweis-fertig strong { display: block; font-size: 14px; }
.hinweis-fertig .hf-datum { font-size: 21px; font-weight: 800; color: #B45309; margin: 4px 0; }
.hinweis-fertig span { font-size: 12.5px; color: #5B6B73; }
.hinweis-fertig.ueberfaellig { border-left-color: #B23A2E; }
.hinweis-fertig.ueberfaellig .hf-datum { color: #B23A2E; }

/* ── Benutzerverwaltung (M1b) ──────────────────────────────────────────── */
details.mk.aus { opacity: .6; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #E7EEF3; color: #1B5A78; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mk-name small.selbst { font-size: 12px; font-weight: 500; color: #8B9AA0; }
.p-sv { background: #12283B; color: #fff; }
.p-anfrage { background: #FFF1D6; color: #9A5B00; }
.abschnitt { font-size: 11px; font-weight: 700; color: #8B9AA0; text-transform: uppercase; letter-spacing: .4px; margin: 14px 0 6px; }
.anfrage { background: #fff; border: 1px solid #F3D9A4; border-left: 4px solid #D97706; border-radius: 10px; padding: 11px 12px; margin-bottom: 8px; font-size: 13px; }
.anfrage b { display: block; font-size: 14px; }
.anfrage small { color: #5B6B73; }
.anfrage .zwei { margin-top: 8px; }
.anfrage form { margin: 0; }
.anfrage .btn-primaer.klein { margin-top: 0; }
.raster2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.check small { color: #8B9AA0; font-size: 11px; margin-left: 2px; }
.zeile { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #F0EEE7; font-size: 13px; }
.zeile:last-of-type { border-bottom: none; }
.zeile small { color: #8B9AA0; display: block; font-size: 11px; }
.zeile .re { margin-left: auto; white-space: nowrap; }
.zeile .re.grau { font-size: 11.5px; color: #9A5B00; }
.link-warn { border: none; background: none; color: #B23A2E; font-size: 12.5px; font-family: inherit; cursor: pointer; padding: 4px 0; }
.btn-sekundaer.voll.klein { margin-top: 10px; }
.sheet .btn-sekundaer.voll { width: 100%; }
.karte > strong { display: block; font-size: 14px; margin-bottom: 4px; }
.pw-zeile { display: flex; gap: 8px; }
.pw-zeile input { flex: 1; }
.pw-zeile .btn-sekundaer { height: 46px; flex-shrink: 0; }

/* ── E-Mail (M1d) ──────────────────────────────────────────────────────── */
.stapel { display: flex; flex-direction: column; gap: 12px; }
.karte-fs { background: #fff; }
.feld textarea { width: 100%; border: 1px solid #CBD3D6; border-radius: 8px; padding: 10px 12px; font-size: 15px; font-family: inherit; background: #fff; resize: vertical; }
.check input[type=radio] { width: 18px; height: 18px; accent-color: #1B8A94; flex-shrink: 0; }

/* ── Artikel-Sync (M1e) ────────────────────────────────────────────────── */
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.zahlen div { display: flex; flex-direction: column; }
.zahlen strong { font-size: 18px; }
.zahlen span { font-size: 11px; color: #8B9AA0; }
.lauf { padding: 10px 14px; }
.lauf-kopf { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lauf-kopf small { margin-left: auto; color: #8B9AA0; }
.url-code { display: block; background: #F6F4EF; border-radius: 6px; padding: 8px 10px; font-size: 12px; overflow-wrap: anywhere; }
.btn-primaer:disabled { opacity: .5; cursor: default; }

/* ── Vorbereitung (M1f) ────────────────────────────────────────────────── */
.vb-suche { position: relative; }
.vb-suche input { width: 100%; height: 46px; border: 1px solid #CBD3D6; border-radius: 10px; padding: 0 38px 0 38px; font-size: 16px; font-family: inherit; background: #fff; -webkit-appearance: none; appearance: none; }
.vb-suche input::-webkit-search-cancel-button { display: none; }
.vb-lupe { position: absolute; left: 13px; top: 12px; color: #8B9AA0; font-size: 16px; pointer-events: none; }
.vb-suche .vb-x { position: absolute; right: 8px; top: 9px; width: 28px; height: 28px; border: none; padding: 0; background: none; color: #8B9AA0; font-size: 22px; line-height: 1; border-radius: 50%; cursor: pointer; }
.vb-suche .vb-x:hover { background: #F0EEE7; color: #1B8A94; }
.vb-chips { display: flex; gap: 6px; margin: 8px 0 4px; overflow-x: auto; }
.vb-chip { flex-shrink: 0; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid #CBD3D6; background: #fff; font-size: 12.5px; color: #5B6B73; font-family: inherit; cursor: pointer; }
.vb-chip.an { background: #E4F2F3; border-color: #1B8A94; color: #14666E; font-weight: 600; }
.vb-hinweis, .vb-treffer { font-size: 12px; color: #8B9AA0; margin: 8px 0; }
#vb-liste.laedt { opacity: .55; transition: opacity .15s; }
.vb-summe { background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; padding: 10px 12px; margin: 8px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 11px; color: #8B9AA0; }
.vb-summe b { display: block; font-size: 18px; color: #1C2B33; }

.ak { background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; margin-bottom: 8px; padding: 10px 11px; }
.ak.geplant { border-left: 4px solid #1B8A94; }
.ak.geaendert { border-left: 4px solid #D97706; background: #FFFCF5; }
.ak-kopf { display: flex; gap: 10px; }
.ak-bild { width: 52px; height: 52px; border-radius: 6px; object-fit: contain; background: #fff; flex-shrink: 0; border: 1px solid #F0EEE7; }
.ak-bild.leer { background: #EEF2F3; }
.ak-text { flex: 1; }
.ak-name { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ak-meta { font-size: 11.5px; color: #8B9AA0; margin-top: 2px; overflow-wrap: anywhere; }
.kopieren { border: none; background: none; color: #1B8A94; font-size: 12px; padding: 0 3px; cursor: pointer; }
.ak-preis { font-size: 12px; color: #5B6B73; margin-top: 2px; }
.ak-preis .rest { color: #B45309; font-weight: 600; }
.ak-bestand { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 8px; }
.ak-bestand div { background: #F6F4EF; border-radius: 6px; text-align: center; font-size: 10px; color: #8B9AA0; padding: 3px 0; }
.ak-bestand div b { display: block; font-size: 14px; color: #A6B1B6; }
.ak-bestand div.hat { background: #E3F2E8; color: #2F7D4F; } .ak-bestand div.hat b { color: #1C2B33; }
.ak-bestand div.neg { background: #FBEAE8; color: #B23A2E; } .ak-bestand div.neg b { color: #B23A2E; }
.ak-fuss { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ak-fuss .lbl { font-size: 12.5px; color: #5B6B73; font-weight: 600; }
.ak-summe { margin-left: auto; font-size: 17px; }
.vb-warn { font-size: 10.5px; color: #B45309; }
.vb-geaendert { font-size: 10.5px; color: #B45309; font-weight: 600; }
.ak .stepper, .vb-zeile .stepper { margin-left: auto; display: flex; align-items: center; flex-shrink: 0; }
.stepper button { width: 40px; height: 40px; border: 1px solid #CBD3D6; background: #fff; font-size: 19px; color: #1B8A94; cursor: pointer; font-family: inherit; }
.stepper button:first-child { border-radius: 8px 0 0 8px; } .stepper button:last-child { border-radius: 0 8px 8px 0; }
.stepper input { width: 50px; height: 40px; border: 1px solid #CBD3D6; border-left: none; border-right: none; border-radius: 0; text-align: center; font-size: 16px; font-weight: 700; font-family: inherit; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper.klein button { width: 34px; height: 34px; font-size: 17px; }
.stepper.klein input { width: 42px; height: 34px; font-size: 15px; }
details.ak-var { margin-top: 8px; }
details.ak-var summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: #F6F4EF; border-radius: 7px; font-size: 12.5px; color: #1B8A94; font-weight: 600; }
details.ak-var summary::-webkit-details-marker { display: none; }
details.ak-var summary small { color: #8B9AA0; font-weight: 500; }
details.ak-var[open] summary small::after { content: ''; }
.ak-groesse { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid #F0EEE7; }
.ak-groesse .gr { font-size: 13px; font-weight: 700; min-width: 44px; max-width: 40%; overflow-wrap: anywhere; }
.ak-groesse .vb { font-size: 11px; color: #8B9AA0; flex: 1; line-height: 1.35; }
.ak-groesse .vb b { color: #2F7D4F; font-weight: 600; }
.ak-groesse .vb .vb-warn { display: block; }
.ak-groesse.geaendert, .ak-fuss.geaendert { background: #FFF6E6; border-radius: 6px; }
.vb-zeile { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E4E1D8; border-radius: 9px; padding: 8px 10px; margin-bottom: 6px; font-size: 13px; }
.vb-zeile.geaendert { border-left: 4px solid #D97706; background: #FFFCF5; }
.vb-zeile .n { flex: 1; line-height: 1.3; overflow-wrap: anywhere; }
.vb-zeile .n small { display: block; color: #8B9AA0; font-size: 11px; }
.vb-zeile .n small.vb-warn { color: #B45309; }
.vb-blaettern { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0; font-size: 12.5px; color: #8B9AA0; }
.vb-lager { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.vb-lager button { height: 38px; border: 1px solid #CBD3D6; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 700; color: #5B6B73; font-family: inherit; cursor: pointer; }
.vb-lager button.an { background: #E4F2F3; border-color: #1B8A94; color: #14666E; }

.vb-leiste { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 456px; margin: 0 auto; background: #12283B; color: #fff; border-radius: 12px; padding: 9px 10px 9px 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 15; }
.vb-leiste[hidden] { display: none; }
.vb-leiste .t { font-size: 13px; flex: 1; line-height: 1.3; }
.vb-leiste .t small { display: block; color: #A9BAC4; font-size: 11px; }
.vb-leiste .verw { background: none; border: none; color: #A9BAC4; font-size: 12.5px; font-family: inherit; cursor: pointer; }
.vb-leiste .spei { height: 40px; padding: 0 16px; border: none; border-radius: 8px; background: #1B8A94; color: #fff; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; }
.vb-leiste .spei:disabled { opacity: .6; }
body.vb-offen .inhalt { padding-bottom: 100px; }
.vb-meldung { position: fixed; left: 12px; right: 12px; top: 12px; max-width: 456px; margin: 0 auto; z-index: 30; border-radius: 10px; padding: 10px 12px; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.vb-meldung.ok { background: #E3F2E8; color: #2F7D4F; }
.vb-meldung.fehler { background: #FBEAE8; color: #B23A2E; }
.vb-meldung[hidden] { display: none; }
.vb-dialog { position: fixed; left: 20px; right: 20px; top: 30%; max-width: 380px; margin: 0 auto; background: #fff; border-radius: 14px; z-index: 25; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.vb-dialog[hidden] { display: none; }
.vb-dialog h3 { margin: 0 0 6px; font-size: 15px; }
.vb-dialog p { font-size: 13px; color: #5B6B73; margin: 0 0 12px; }
.vb-dialog .zwei { align-items: stretch; }
.vb-dialog .zwei .btn-primaer.klein { margin-top: 0; height: 40px; }
.vb-dialog-ab { display: block; margin: 10px auto 0; border: none; background: none; color: #8B9AA0; font-size: 12.5px; font-family: inherit; cursor: pointer; }

/* ── Merkliste (M2a) ─────────────────────────────────────────────────── */
a.vb-chip { display: inline-flex; align-items: center; text-decoration: none; }
.ml-lager { margin: 4px 0 10px; font-size: 12px; color: #5B6B73; }
.ml-lager summary { cursor: pointer; padding: 4px 0; }
.ml-lager .vb-lager a { height: 34px; border: 1px solid #CBD3D6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #5B6B73; text-decoration: none; background: #fff; }
.ml-lager .vb-lager a.an { background: #E4F2F3; border-color: #1B8A94; color: #14666E; }
.ml-hg { background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; margin-bottom: 8px; overflow: hidden; scroll-margin-top: 80px; }
.ml-hg > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; cursor: pointer; list-style: none; }
.ml-hg > summary::-webkit-details-marker { display: none; }
.ml-hg > summary::after { content: '›'; color: #8B9AA0; font-size: 16px; transition: transform .15s; }
.ml-hg[open] > summary::after { transform: rotate(90deg); }
.ml-hg .n { flex: 1; font-weight: 700; font-size: 14px; line-height: 1.3; color: inherit; text-decoration: none; }
.ml-hg .n small { display: block; font-weight: 500; font-size: 11px; color: #8B9AA0; margin-top: 2px; }
.ml-hg .n small.vb-warn { color: #B45309; }
.ml-hg summary .z { text-align: right; font-size: 10.5px; color: #8B9AA0; }
.ml-hg summary .z b { display: block; font-size: 17px; color: #1C2B33; }
.ml-balken { height: 5px; background: #F0EEE7; border-radius: 3px; margin: 0 12px 10px; overflow: hidden; }
.ml-balken i { display: block; height: 100%; background: #1B8A94; }
.ml-ug { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #F0EEE7; font-size: 13px; }
.ml-ug .n { font-weight: 500; font-size: 13px; }
.ml-ug .z { font-weight: 800; font-size: 15px; min-width: 34px; text-align: right; }
.ml-ug .z small { display: block; font-weight: 500; font-size: 10px; color: #8B9AA0; }
.ml-ug .punkt { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: #1B8A94; }
.ml-ug.offen { background: #FFFAF0; } .ml-ug.offen .n { color: #7A5200; } .ml-ug.offen .punkt { background: #F0B429; }
.ml-ug.leer .n { color: #8B9AA0; } .ml-ug.leer .punkt { background: #D5DADC; }
.ml-ug.aus { opacity: .7; }
.ml-ug .los { font-size: 12px; color: #1B8A94; font-weight: 700; white-space: nowrap; text-decoration: none; }
.ml-aus { margin: 0; flex-shrink: 0; }
.ml-aus label { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: #8B9AA0; cursor: pointer; }
.ml-aus input { width: 16px; height: 16px; accent-color: #1B8A94; }
.ml-hg-aus { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid #F0EEE7; background: #FAF9F6; font-size: 11.5px; color: #5B6B73; }
.ml-zurueck { display: inline-block; font-size: 13px; color: #1B8A94; font-weight: 600; margin: 4px 0 10px; text-decoration: none; }
.ml-ukopf .grau { font-size: 12px; color: #8B9AA0; margin-top: 2px; }
.ml-bearb { display: inline-block; margin-top: 8px; font-size: 13px; color: #1B8A94; font-weight: 700; text-decoration: none; }
.ml-modell { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #E4E1D8; border-left: 4px solid #1B8A94; border-radius: 9px; padding: 8px 10px; margin-bottom: 4px; }
.ml-modell .n { flex: 1; font-size: 13px; font-weight: 700; line-height: 1.3; }
.ml-modell .n small { display: block; font-weight: 500; font-size: 11px; color: #8B9AA0; margin-top: 1px; }
.ml-modell b { font-size: 17px; }
.ak-bild.klein { width: 40px; height: 40px; }
.ml-groessen { margin: 0 0 10px 14px; line-height: 1.8; }
.ml-groessen span { display: inline-block; background: #fff; border: 1px solid #EEEBE3; border-radius: 6px; padding: 0 7px; margin: 0 4px 4px 0; font-size: 11.5px; color: #5B6B73; }
.ml-groessen span b { color: #1C2B33; }

/* ── Kommissionierung (M3) ───────────────────────────────────────────── */
.km-banner { display: flex; align-items: center; gap: 8px; background: #12283B; color: #fff; border-radius: 10px; padding: 10px 12px; margin: 4px 0 12px; text-decoration: none; }
.km-banner b { font-size: 14px; } .km-banner small { display: block; color: #A9BAC4; font-size: 11px; }
.km-banner em { margin-left: auto; font-style: normal; font-weight: 700; color: #7FD3DA; white-space: nowrap; }
.km-orte { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 8px; }
.km-ort { background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; padding: 10px 11px; font-size: 12px; color: #5B6B73; text-decoration: none; }
.km-ort b { display: block; font-size: 14px; color: #1C2B33; }
.km-ort small { display: block; margin-top: 4px; font-size: 11px; color: #1B8A94; }
.km-ort.aktiv { border: 2px solid #1B8A94; }
.km-lk { display: flex; align-items: center; gap: 10px; } .km-lk > div { flex: 1; }
.km-lk small { display: block; color: #8B9AA0; font-size: 11.5px; margin-top: 2px; }
.km-lk.alt { border-left: 4px solid #D97706; }
.km-freigeben { margin: 0; }
.km-ak { padding-bottom: 4px; }
.km-pz { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #F0EEE7; }
.km-pz .gr { font-size: 13px; font-weight: 700; min-width: 44px; max-width: 34%; overflow-wrap: anywhere; }
.km-pz .info { flex: 1; font-size: 11px; color: #8B9AA0; line-height: 1.45; }
.km-pz .info b { color: #1C2B33; } .km-pz .info small { display: block; font-size: 10.5px; }
.km-pz .info .gut { color: #2F7D4F; font-weight: 600; } .km-pz .info .res { color: #B45309; }
.km-pz.gesperrt { opacity: .55; } .km-pz.drin { background: #F4FAFA; }
.km-add { height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid #1B8A94; background: #fff; color: #1B8A94; font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap; }
.km-gesperrt { font-size: 11px; color: #8B9AA0; }
.km-fort { height: 6px; background: #F0EEE7; border-radius: 3px; overflow: hidden; margin: 4px 0 10px; } .km-fort i { display: block; height: 100%; background: #2F7D4F; transition: width .2s; }
.km-pl { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; padding: 9px 10px; margin-bottom: 6px; }
.km-pl.fertig { background: #F3FAF5; border-color: #B7DEC4; } .km-pl.teil { background: #FFFAF0; border-color: #F3D9A6; } .km-pl.fehler { border-color: #C0392B; }
.km-ck { width: 28px; height: 28px; border-radius: 7px; border: 2px solid #CBD3D6; background: #fff; flex-shrink: 0; font-weight: 800; color: #fff; font-size: 15px; cursor: pointer; padding: 0; }
.km-pl.fertig .km-ck { background: #2F7D4F; border-color: #2F7D4F; } .km-pl.teil .km-ck { background: #D97706; border-color: #D97706; }
.km-pl .n { flex: 1; font-size: 13px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.km-pl .n small { display: block; font-weight: 500; font-size: 11px; color: #8B9AA0; } .km-pl .n small a { color: #1B8A94; }
.km-pl .n .km-hinweis { color: #B45309; }
.km-soll { font-size: 10.5px; color: #8B9AA0; white-space: nowrap; }
.km-bz { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E4E1D8; border-radius: 9px; padding: 8px 10px; margin-bottom: 5px; font-size: 13px; color: inherit; text-decoration: none; }
.km-bz .n { flex: 1; line-height: 1.3; overflow-wrap: anywhere; } .km-bz .n small { display: block; color: #8B9AA0; font-size: 11px; }
.km-bx { font-size: 11px; font-weight: 700; color: #14666E; background: #E4F2F3; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.km-select { width: 100%; height: 42px; border: 1px solid #CBD3D6; border-radius: 8px; padding: 0 8px; font-size: 15px; font-family: inherit; background: #fff; }
.km-select.klein { width: auto; max-width: 45%; height: 34px; font-size: 13px; }
.km-korr { display: flex; gap: 6px; align-items: center; margin: 0; }
.km-korr input { width: 64px; height: 34px; border: 1px solid #CBD3D6; border-radius: 8px; text-align: center; font-size: 15px; font-family: inherit; }
.km-boxkopf strong { font-size: 18px; } .km-boxkopf .grau { font-size: 12.5px; color: #8B9AA0; margin-top: 2px; }
.km-verlauf { margin-top: 12px; font-size: 12px; color: #5B6B73; } .km-verlauf summary { cursor: pointer; padding: 4px 0; }
.km-verlauf div { padding: 4px 0; border-bottom: 1px solid #F0EEE7; } .km-verlauf small { color: #8B9AA0; }
.hinweisbox { background: #FFF7E6; border: 1px solid #F3D9A6; color: #7A5200; border-radius: 9px; padding: 9px 11px; font-size: 12px; line-height: 1.45; margin: 8px 0; }
.btn-link { background: none; border: none; padding: 6px 0; font-family: inherit; font-size: 13px; color: #1B8A94; cursor: pointer; }
.btn-link.gefahr { color: #B42318; }

/* ── Messepreise (M2b) ───────────────────────────────────────────────── */
.vb-chip.mp-rot { border-color: #E3B5AF; color: #B23A2E; }
.vb-chip.mp-rot.an { background: #FBEDEB; border-color: #B23A2E; color: #B23A2E; }
.mp-summe { background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; padding: 10px 12px; margin: 8px 0 4px; }
.mp-summe .zahlen { margin-bottom: 0; }
.mp-summe .zahlen div { font-size: 11px; color: #8B9AA0; }
.mp-summe .zahlen b { display: block; font-size: 18px; color: #1C2B33; }
.mp-summe .zahlen b.orange { color: #A66A00; } .mp-summe .zahlen b.rot { color: #B23A2E; }
.mp-balken { height: 6px; border-radius: 3px; background: #F0EEE7; margin-top: 8px; overflow: hidden; }
.mp-balken i { display: block; height: 100%; width: 0; background: #2F7D4F; transition: width .2s; }
.ak.mp-k.voll { border-left: 4px solid #2F7D4F; }
.ak.mp-k.teil { border-left: 4px solid #A66A00; }
.ak.mp-k.leer { border-left: 4px solid #B23A2E; }
.ak.mp-k.geaendert { border-left: 4px solid #D97706; background: #FFFCF5; }
.ak.mp-k[hidden] { display: none; }
.mp-status { font-size: 12px; font-weight: 600; margin-top: 3px; }
.mp-status.gruen, .mp-gr .ic.gruen { color: #2F7D4F; }
.mp-status.orange, .mp-gr .ic.orange { color: #A66A00; }
.mp-status.rot, .mp-gr .ic.rot { color: #B23A2E; }
.mp-regel { font-size: 11.5px; color: #B23A2E; background: #FBEDEB; border-radius: 6px; padding: 4px 8px; margin-top: 6px; line-height: 1.35; }
.mp-gr + .mp-hinweise .mp-regel { margin: 0 0 6px; }
.mp-kachel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.mp-kachel div { background: #F6F4EF; border-radius: 6px; text-align: center; font-size: 10px; color: #8B9AA0; padding: 4px 2px; }
.mp-kachel div b { display: block; font-size: 13.5px; color: #1C2B33; overflow-wrap: anywhere; }
.mp-kachel div.intern { background: #EEF0F7; } .mp-kachel div.intern b { color: #3B4A8C; }
.mp-preise { display: flex; gap: 8px; margin-top: 8px; }
.mp-preise .pf { flex: 1; }
.mp-preise label { display: block; font-size: 11px; color: #5B6B73; font-weight: 600; margin-bottom: 3px; }
.mp-preise .wrap { position: relative; }
.mp-preise .eur { position: absolute; right: 10px; top: 12px; color: #8B9AA0; font-size: 13px; pointer-events: none; }
.mp-preise input { width: 100%; height: 42px; border: 1px solid #CBD3D6; border-radius: 8px; padding: 0 26px 0 10px; font-size: 16px; font-weight: 700; font-family: inherit; background: #fff; }
.mp-preise input::placeholder, .mp-gr input::placeholder { color: #A6B1B6; font-weight: 500; font-size: 13px; }
.mp-in.geaendert { border-color: #D97706; background: #FFF7E6; }
.mp-alle { background: #F6F4EF; border-radius: 8px; padding: 9px 10px; margin-top: 8px; }
.mp-alle .t { font-size: 12px; font-weight: 700; }
.mp-alle .mp-preise { margin-top: 5px; }
.mp-alle .mp-preise input { height: 38px; font-size: 15px; }
.mp-alle .check { font-size: 12px; margin-top: 7px; }
.mp-alle .check input { width: 16px; height: 16px; }
.mp-alle .btn-primaer.klein { margin-top: 7px; height: 38px; font-size: 13px; }
.mp-gr { display: flex; align-items: center; gap: 6px; padding: 6px 2px; border-bottom: 1px solid #F0EEE7; }
.mp-gr.geaendert { background: #FFF6E6; border-radius: 6px; }
.mp-gr .ic { width: 14px; font-size: 12px; text-align: center; flex-shrink: 0; }
.mp-gr .gr { font-size: 13px; font-weight: 700; min-width: 34px; max-width: 34%; overflow-wrap: anywhere; }
.mp-gr .vb { font-size: 10.5px; color: #8B9AA0; flex: 1; line-height: 1.3; }
.mp-gr .mp-abw { display: block; color: #B45309; font-size: 10px; }
.mp-gr .mp-abw[hidden] { display: none; }
.mp-gr input { width: 64px; height: 34px; border: 1px solid #CBD3D6; border-radius: 7px; text-align: right; padding: 0 7px; font-size: 15px; font-weight: 700; font-family: inherit; background: #fff; flex-shrink: 0; }
.mp-gr input::placeholder { font-size: 11.5px; }
.mp-gr-kopf { font-size: 10px; color: #8B9AA0; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; border-bottom: none; padding-bottom: 0; margin-top: 6px; }
.mp-gr-kopf .sp { width: 64px; text-align: right; flex-shrink: 0; }
details.mp-mehr { margin-top: 8px; border-top: 1px solid #F0EEE7; }
details.mp-mehr > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; padding: 8px 0 2px; font-size: 12px; color: #1B8A94; font-weight: 600; }
details.mp-mehr > summary::-webkit-details-marker { display: none; }
details.mp-mehr[open] > summary span { transform: rotate(180deg); }
.mp-kalk .h { font-size: 11px; color: #8B9AA0; margin: 6px 0 4px; }
.mp-kalk-ek { font-size: 11px; font-weight: 600; color: #5B6B73; margin: 6px 0 3px; }
.mp-kalk .reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 4px; }
.mp-kalk .reihe div { background: #F6F4EF; border-radius: 6px; text-align: center; padding: 4px 0; font-size: 10px; color: #8B9AA0; }
.mp-kalk .reihe div b { display: block; font-size: 13.5px; color: #1C2B33; }
.mp-kalk .reihe div.mm { background: #E4F2F3; color: #14666E; } .mp-kalk .reihe div.mm b { color: #14666E; }
.mp-rival { margin-top: 8px; background: #F6F4EF; border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.mp-rival.leer { color: #8B9AA0; }
.mp-rival .z { display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; }
.mp-rival small { color: #8B9AA0; display: block; margin-top: 1px; }
.mp-rival .d { font-weight: 600; margin-top: 3px; color: #2F7D4F; }
.mp-rival .d.teurer { color: #B23A2E; }
.mp-rival a { font-size: 12px; color: #1B8A94; }
.mp-label { margin: 10px 0 4px; }
.mp-verlauf { margin-top: 4px; }
.mp-verlauf .zeile { font-size: 12px; }
.mp-regeln { background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.mp-regeln[hidden] { display: none; }
.mp-regeln-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.mp-regeln-kopf small { color: #8B9AA0; font-size: 11px; }
.mp-rchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mp-rchip { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 4px 0 10px; border-radius: 15px; background: #FBEDEB; color: #B23A2E; font-size: 12px; font-weight: 600; }
.mp-rchip button { border: none; background: none; color: #B23A2E; font-size: 17px; line-height: 1; padding: 2px 6px; cursor: pointer; }
.mp-vorlagen { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mp-vorlagen button { height: 34px; border: 1px dashed #1B8A94; border-radius: 8px; background: #fff; color: #14666E; font-size: 12.5px; font-weight: 600; font-family: inherit; text-align: left; padding: 0 10px; cursor: pointer; }
.mp-vorlagen button:disabled { border-color: #CBD3D6; color: #A6B1B6; cursor: default; }
details.mp-bauk { margin-top: 10px; }
details.mp-bauk > summary { cursor: pointer; font-size: 12.5px; color: #1B8A94; font-weight: 600; padding: 4px 0; }
.mp-bauk-titel { font-size: 11px; font-weight: 700; color: #5B6B73; margin: 10px 0 5px; }
.mp-zeile3 { display: grid; grid-template-columns: 1fr 58px 1fr; gap: 6px; align-items: center; }
.mp-zeile3 select { height: 38px; border: 1px solid #CBD3D6; border-radius: 7px; background: #fff; font-size: 14px; font-family: inherit; padding: 0 6px; min-width: 0; }
.mp-netto { font-size: 11px; color: #5B6B73; margin-top: 4px; }
.mp-netto label { display: flex; align-items: center; gap: 4px; }
.mp-prozent { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #5B6B73; }
.mp-prozent input { width: 100%; height: 38px; border: 1px solid #CBD3D6; border-radius: 7px; padding: 0 8px; font-size: 15px; font-family: inherit; }
.mp-konflikt { top: 18%; max-height: 70vh; overflow-y: auto; }
.mp-konf { background: #FFF7E6; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 8px; line-height: 1.45; }
.mp-konf b { display: block; }
.mp-konf .zwei { margin-top: 6px; }
.mp-konf .btn-sekundaer, .mp-konf .btn-primaer.klein { height: 36px; margin-top: 0; font-size: 12.5px; padding: 0 8px; }

/* ── Scanner (M5a) ───────────────────────────────────────────────────── */
.vb-suche .scan-knopf { position: absolute; right: 4px; top: 4px; width: 38px; height: 38px; border: none; border-radius: 8px; background: #1B8A94; color: #fff; font-size: 19px; padding: 0; cursor: pointer; }
.vb-suche:has(.scan-knopf) input { padding-right: 82px; }
.vb-suche:has(.scan-knopf) .vb-x { right: 46px; }
.scanner { position: fixed; inset: 0; z-index: 40; background: #0E1A24; color: #fff; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.scanner[hidden] { display: none; }
.scanner-bild { position: relative; flex: 1; overflow: hidden; background: #000; }
.scanner-bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scanner-fenster { position: absolute; left: 50%; top: 45%; width: min(70vw, 300px); height: min(70vw, 300px); transform: translate(-50%, -50%); border: 3px solid #4ADE80; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none; }
.scanner-status { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: center; font-size: 14px; background: rgba(0,0,0,.55); border-radius: 10px; padding: 8px 10px; line-height: 1.4; }
.scanner-treffer { background: #E3F2E8; color: #1F5E38; font-weight: 700; font-size: 15px; padding: 10px 14px; text-align: center; }
.scanner-treffer[hidden] { display: none; }
.scanner-knoepfe { display: flex; gap: 8px; padding: 10px 12px; }
.scanner-knoepfe > * { flex: 1; height: 46px; border: none; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; font-size: 15px; font-family: inherit; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.scanner-knoepfe [hidden] { display: none; }
.scanner-knoepfe button.an { background: #FDE68A; color: #1C2B33; }
.scanner-foto input { display: none; }
.scanner-hilfe { margin: 0 14px 12px; font-size: 13px; color: #CFE3E6; line-height: 1.45; }
.scanner-hilfe[hidden] { display: none; }
body.scanner-offen { overflow: hidden; }

/* ── Etiketten (M5a) ─────────────────────────────────────────────────── */
.et-suche { margin: 8px 0 6px; }
.et-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 6px; }
.et-kopf .check { margin-top: 0; font-size: 13px; }
.et-zeile { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #E4E1D8; border-radius: 9px; padding: 8px 10px; margin-bottom: 6px; font-size: 13.5px; cursor: pointer; }
.et-zeile[hidden] { display: none; }
.et-zeile.gewaehlt { border-color: #1B8A94; background: #F2FAFA; }
.et-zeile .et-wahl { width: 20px; height: 20px; accent-color: #1B8A94; flex-shrink: 0; }
.et-zeile .n { flex: 1; line-height: 1.3; overflow-wrap: anywhere; }
.et-zeile .n small { display: block; color: #8B9AA0; font-size: 11.5px; margin-top: 1px; }
.et-anz { width: 58px; height: 38px; border: 1px solid #CBD3D6; border-radius: 8px; text-align: center; font-size: 16px; font-weight: 700; font-family: inherit; flex-shrink: 0; }
.et-leiste .t small select { margin-top: 3px; background: #1F3A50; color: #fff; border: 1px solid #3B5A73; border-radius: 6px; font-size: 12px; padding: 2px 4px; font-family: inherit; }

/* ── Kasse (M5b-1) ───────────────────────────────────────────────────── */
.vk-reiter { display: flex; background: #EEF2F3; border-radius: 10px; padding: 3px; margin-bottom: 10px; }
.vk-reiter button { flex: 1; height: 38px; border: none; border-radius: 8px; background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: #5B6B73; cursor: pointer; }
.vk-reiter button.an { background: #fff; color: #1C2B33; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.vk-reiter b { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; border-radius: 10px; background: #1B8A94; color: #fff; font-size: 11.5px; margin-left: 4px; padding: 0 5px; }
.vk-reiter b[hidden] { display: none; }
#vk-preis[hidden], #vk-liste[hidden] { display: none; }
.vk-k .vk-preise div.vk-mp { background: #E4F2F3; } .vk-k .vk-preise div.vk-mp b { color: #14666E; font-size: 15px; }
.ak.vk-rot, .vk-pos.vk-rot, .vk-pos.vk-unter { border: 2px solid #E39A90; }
.vk-badge-rest { background: #FBEAE8; color: #B23A2E; }
.vk-ref { font-size: 12px; color: #5B6B73; margin-top: 6px; }
.vk-ref b { letter-spacing: .5px; }
.vk-warn { border-radius: 8px; padding: 8px 10px; font-size: 12.5px; line-height: 1.4; margin-top: 8px; font-weight: 600; }
.vk-warn.rot { background: #FBE7E4; color: #B23A2E; }
.vk-warn.orange { background: #FFF4E0; color: #9A5B00; }
.vk-warn[hidden] { display: none; }
.vk-pos { background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; padding: 10px 11px; margin-bottom: 8px; }
.vk-pos-kopf { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.3; }
.vk-pos-kopf span { flex: 1; overflow-wrap: anywhere; }
.vk-weg { border: none; background: none; font-size: 17px; padding: 0 2px; cursor: pointer; line-height: 1; }
.vk-pos-meta { font-size: 11.5px; color: #8B9AA0; margin-top: 2px; overflow-wrap: anywhere; }
.vk-pos-zeile { display: flex; gap: 8px; margin-top: 8px; align-items: flex-end; }
.vk-f label { display: block; font-size: 11px; color: #5B6B73; font-weight: 600; margin-bottom: 3px; }
.vk-f input { width: 100%; height: 40px; border: 1px solid #CBD3D6; border-radius: 8px; padding: 0 8px; font-size: 16px; font-weight: 700; font-family: inherit; text-align: right; }
.vk-f input.rot { border-color: #B23A2E; color: #B23A2E; background: #FFF7F6; }
.vk-f-menge { width: 58px; flex-shrink: 0; } .vk-f-menge input { text-align: center; }
.vk-f-preis { width: 92px; flex-shrink: 0; }
.vk-f:last-child { flex: 1; }
.vk-seg { display: flex; border: 1px solid #CBD3D6; border-radius: 8px; overflow: hidden; height: 40px; }
.vk-seg button { flex: 1; border: none; background: #fff; font-family: inherit; font-size: 12.5px; color: #5B6B73; cursor: pointer; padding: 0 4px; }
.vk-seg button + button { border-left: 1px solid #CBD3D6; }
.vk-seg button.an { background: #1B8A94; color: #fff; font-weight: 700; }
.vk-hinweis { width: 100%; height: 34px; margin-top: 6px; border: 1px dashed #CBD3D6; border-radius: 8px; padding: 0 9px; font-size: 13px; font-family: inherit; background: #FCFBF8; }
.vk-anp { background: #F7F5EF; }
.vk-anp-text { flex: 1; font-size: 12px; color: #8B9AA0; padding-bottom: 11px; }
.vk-anp-form { background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; padding: 10px 11px 2px; margin-top: 8px; }
.vk-anp-form[hidden] { display: none; }
.vk-anp-form .btn-primaer.klein { margin: 0 0 10px; }
.vk-summe { display: flex; justify-content: space-between; align-items: baseline; background: #12283B; color: #fff; border-radius: 10px; padding: 12px 14px; margin: 10px 0; font-size: 13px; }
.vk-summe b { font-size: 20px; }
.vk-weitere { display: flex; justify-content: space-between; margin-top: 4px; }
.vk-rot-link { color: #B23A2E; }
.vk-andere { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; padding: 9px 11px; margin-bottom: 6px; }
.vk-andere .t { flex: 1; font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.vk-andere small { display: block; font-size: 11.5px; color: #8B9AA0; margin-top: 2px; }
.vk-toast { position: fixed; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); max-width: 448px; margin: 0 auto; background: #1F5E38; color: #fff; border-radius: 10px; padding: 11px 14px; font-size: 13.5px; font-weight: 600; z-index: 30; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.vk-toast.fehler { background: #B23A2E; }
.vk-toast[hidden] { display: none; }
.scanner-treffer.warn { background: #FFF4E0; color: #9A5B00; }
.scanner-treffer.fehler { background: #FBE7E4; color: #B23A2E; }
.vk-ab[hidden], #vk-ab-form[hidden], #vk-ab-fertig[hidden], .abdunkeln[hidden] { display: none; }
.vk-ab { max-height: 92vh; }
.vk-ab .feld { margin-bottom: 10px; }
.vk-ab .zwei .feld { min-width: 0; }
.vk-liefer { margin: 0 0 10px; }
.vk-liefer summary { font-size: 13px; color: #1B8A94; font-weight: 600; cursor: pointer; padding: 4px 0 8px; }
.vk-zahlung { display: flex; flex-wrap: wrap; gap: 6px; }
.vk-zahlung button { height: 38px; padding: 0 14px; border: 1px solid #CBD3D6; border-radius: 19px; background: #fff; font-family: inherit; font-size: 13.5px; color: #1C2B33; cursor: pointer; }
.vk-zahlung button.an { background: #1B8A94; border-color: #1B8A94; color: #fff; font-weight: 700; }
.vk-fotos { display: flex; flex-wrap: wrap; gap: 8px; }
.vk-foto, .vk-foto-plus { width: 72px; height: 72px; border-radius: 9px; position: relative; }
.vk-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; border: 1px solid #E4E1D8; }
.vk-foto button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 12px; border: none; background: #1C2B33; color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.vk-foto-plus { border: 2px dashed #CBD3D6; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #1B8A94; cursor: pointer; }
.vk-foto-plus[hidden] { display: none; }
.vk-foto-plus input { display: none; }
#vk-ab-los { margin-top: 14px; }
.vk-fertig { text-align: center; padding: 18px 0 20px; }
.vk-fertig .h { font-size: 18px; font-weight: 800; color: #1F5E38; }
.vk-fertig .nr { font-size: 26px; font-weight: 800; letter-spacing: .5px; margin-top: 10px; }
.vk-fertig .s { font-size: 14px; color: #5B6B73; margin-top: 4px; }
.vk-mind .mp-kachel b.rot { color: #B23A2E; }
.vk-mind .mp-kachel small { display: block; font-size: 9.5px; color: #9A5B00; }
.vk-mind-summe b { color: #B23A2E; }

/* ── Verkäufe, Fertig-Ansicht der Kasse (M5b-2) ──────────────────────── */
.vk-schritte { background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; padding: 2px 12px; margin: 0 0 12px; }
.vk-schritt { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid #F0EEE7; font-size: 13.5px; line-height: 1.35; }
.vk-schritt:last-child { border-bottom: none; }
.vk-schritt i { font-style: normal; width: 20px; text-align: center; flex-shrink: 0; }
.vk-schritt small { display: block; color: #8B9AA0; font-size: 12px; margin-top: 1px; overflow-wrap: anywhere; }
.vk-schritt.warn > span { color: #7A5200; font-weight: 600; }
.vk-schritt.fehler > span { color: #B23A2E; font-weight: 600; }
.vk-schritt a { color: #1B8A94; font-weight: 600; }
.vk-nachtragen { margin: 0 0 12px; }
.vk-nachtragen[hidden], #vk-fertig-beleg[hidden] { display: none; }
#vk-fertig-beleg { margin-top: 8px; }
.vkv-stat { font-size: 12.5px; color: #5B6B73; margin: 6px 0 10px; line-height: 1.5; }
.vkv-stat b { color: #1C2B33; }
.vkv { background: #fff; border: 1px solid #E4E1D8; border-radius: 10px; margin-bottom: 8px; }
.vkv[hidden] { display: none; }
.vkv > summary { list-style: none; cursor: pointer; padding: 10px 12px; }
.vkv > summary::-webkit-details-marker { display: none; }
.vkv[open] > summary { border-bottom: 1px solid #F0EEE7; }
.vkv.storno { background: #F6F4EF; }
.vkv.storno .vkv-nr, .vkv.storno .vkv-sum { text-decoration: line-through; color: #8B9AA0; }
.vkv-z1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vkv-nr { font-weight: 800; font-size: 14.5px; letter-spacing: .2px; }
.vkv-sum { font-weight: 800; font-size: 15px; white-space: nowrap; }
.vkv-z2 { font-size: 12px; color: #8B9AA0; margin-top: 2px; overflow-wrap: anywhere; }
.vkv-pl { margin-top: 3px; }
.pl { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 7px; margin: 3px 4px 0 0; }
.pl.grau { background: #EEF2F3; color: #5B6B73; } .pl.rot { background: #FBEDEB; color: #B23A2E; } .pl.orange { background: #FFF3E0; color: #8A5300; } .pl.blau { background: #EEF0F7; color: #3B4A8C; }
.vkv-inhalt { padding: 0 12px 12px; }
.vkv-text { font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.vkv-text a, .vkv-inhalt a:not(.btn-sekundaer) { color: #1B8A94; font-weight: 600; }
.vkv-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.vkv-tab td { padding: 6px 0; border-bottom: 1px solid #F0EEE7; vertical-align: top; overflow-wrap: anywhere; }
.vkv-tab td.r { text-align: right; white-space: nowrap; padding-left: 8px; font-weight: 600; }
.vkv-tab .hilfe { margin-top: 1px; }
.vkv .rot, h3.rot { color: #B23A2E; }
.vkv-fotos { display: flex; flex-wrap: wrap; gap: 6px; }
.vkv-fotos img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #E4E1D8; display: block; }
.vkv-fotos.klein img { width: 42px; height: 42px; }
.vkv-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.vkv-aktionen > * { width: 100%; height: 40px; font-size: 13px; padding: 0 8px; }
select.vb-chip { -webkit-appearance: none; appearance: none; padding-right: 12px; }
a.vb-chip { display: inline-flex; align-items: center; text-decoration: none; }
.vkv-rot { background: #B23A2E; }
#vkv-sheet form[hidden], #vkv-sheet[hidden] { display: none; }
#vkv-sheet .vk-zahlung button:disabled { opacity: .35; cursor: default; }
#vkv-sheet .vk-warn { margin: 10px 0; }
#vkv-sheet .check { margin: 10px 0 4px; }

/* ── M7: Kundenabfrage aus dem Datenhub (Kasse) ─────────────────────────── */
.kh-such { position: relative; margin-bottom: 8px; }
.kh-such[hidden] { display: none; }
.kh-such input { width: 100%; height: 46px; border: 2px solid #1B8A94; border-radius: 10px; padding: 0 38px 0 34px; font-size: 16px; font-family: inherit; background: #fff; -webkit-appearance: none; appearance: none; }
.kh-lupe { position: absolute; left: 12px; top: 12px; color: #1B8A94; pointer-events: none; }
.kh-x { position: absolute; right: 6px; top: 7px; width: 32px; height: 32px; border: none; background: none; font-size: 20px; color: #8B9AA0; cursor: pointer; }
.kh-x[hidden] { display: none; }
.kh-status { margin: -2px 0 10px; }
.kh-status[hidden] { display: none; }
.kh-treffer { border: 1px solid #E4E1D8; border-radius: 10px; overflow: hidden; margin-bottom: 6px; }
.kh-treffer[hidden] { display: none; }
.kh-karte { padding: 9px 11px; border-bottom: 1px solid #EEECE6; font-size: 12.5px; line-height: 1.4; cursor: pointer; background: #fff; }
.kh-karte:last-child { border-bottom: none; }
.kh-karte:active, .kh-karte:focus-visible { background: #E4F2F3; outline: none; }
.kh-karte.nurgast { background: #FAFAF8; }
.kh-karte.nurgast b { color: #5B6B73; }
.kh-z1 { display: flex; gap: 6px; align-items: center; }
.kh-z1 b { font-size: 14px; }
.kh-z2 { color: #5B6B73; word-break: break-word; }
.kh-z3 { color: #8B9AA0; font-size: 11.5px; }
.kh-sys { margin-left: auto; font-size: 10.5px; font-weight: 700; border-radius: 4px; padding: 1px 6px; color: #fff; background: #12283B; flex-shrink: 0; }
.kh-sys-tshos { background: #7A4B9A; } .kh-sys-copos { background: #2F7D4F; } .kh-sys-steos { background: #8B6A1F; }
.kh-gast { display: inline-block; font-size: 10px; font-weight: 700; background: #EEECE6; color: #8B9AA0; border-radius: 4px; padding: 0 5px; }
.kh-weitere { display: block; border: none; background: none; padding: 5px 0 0; font-size: 11.5px; font-weight: 600; color: #1B8A94; font-family: inherit; cursor: pointer; text-align: left; }
.kh-unter { margin: 4px 0 0 3px; border-left: 2px solid #E4E1D8; padding-left: 8px; }
.kh-unter[hidden] { display: none; }
.kh-uk { font-size: 11.5px; color: #5B6B73; padding: 2px 0; }
.kh-uk.gast { color: #A0A8AC; }
.kh-chip { display: flex; align-items: center; gap: 8px; background: #E4F2F3; border: 1px solid #9CCFCB; border-radius: 10px; padding: 8px 10px; font-size: 13px; margin-bottom: 10px; }
.kh-chip[hidden] { display: none; }
.kh-chip b { color: #14666E; }
.kh-chip small { display: block; font-size: 11px; color: #9A5B00; }
.kh-chip small[hidden] { display: none; }
.kh-loesen { margin-left: auto; border: none; background: none; color: #1B8A94; font-weight: 600; font-size: 13px; font-family: inherit; cursor: pointer; padding: 6px; }
.feld input.kh-voll { background: #F2FAF9; border-color: #9CCFCB; }
.kh-dublette { background: #FFF4E0; border: 1px solid #F0D49B; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: #9A5B00; margin: -6px 0 12px; line-height: 1.4; }
.kh-dublette[hidden] { display: none; }
.kh-dubl-knopf { border: none; background: none; padding: 0; color: #1B8A94; font-weight: 700; font-size: 12.5px; font-family: inherit; cursor: pointer; text-decoration: underline; }

/* ── M7: Artikel-Sync – Stand je Standort ───────────────────────────────── */
.sync-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.sync-standort { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #EEECE6; font-size: 13px; }
.sync-standort:last-child { border-bottom: none; }
.sync-standort > span:last-child { text-align: right; }
.sync-ok { color: #2F7D4F; font-weight: 600; }
.sync-fehler { color: #B23A2E; font-weight: 600; }
.sync-fehler small { color: #8B9AA0; font-weight: 400; }