/* Bereich C Bearbeitung: Hauptmenü, Hilfe-Fenster, Dashboard, Liste mit Filtern und
   Export, Detailseite mit Status, Fenstern, Nachrichten und Verlauf, Freigabe, Anlegen
   im Admin, Reiter an Bestellung, Produkt und Kunde. Klassen .nb-be-…; gemeinsame
   Regeln der Nachbauten in assets/stil.css. Media Queries am Ende dieser Datei. */

.nb-be-flaeche { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 22px; background: var(--weiss); }
.nb-be-dashboard { display: flex; flex-direction: column; gap: 14px; }
.nb-be-grau { color: var(--nb-text2); }
.nb-be-frage { display: inline-block; margin-left: 6px; vertical-align: -2px; }
.nb-be-zielrahmen { display: inline-block; padding: 0 2px; }
.nb-be-zelle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nb-be-knoepfe { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.nb-be-leersatz { width: fit-content; font-size: 12px; color: var(--nb-text2); }
.nb-be-mehr { align-self: flex-start; font-size: 12px; }
.nb-be-gelb { padding: 1px 6px; border-radius: 4px; background: #fdf0d3; font-size: 10.5px; font-weight: 600; color: #8a6116; white-space: nowrap; }
.nb-be-hervor { color: #9a6700; }
.nb-be-eng .nb-tab__zeile > span { padding-left: 8px; padding-right: 8px; }
.nb-knopf.nb-be-klein { padding: 4px 10px; font-size: 11.5px; }
.nb-knopf.nb-be-gesperrt { background: #a7cbff; color: var(--weiss); }
.nb-knopf.nb-be-rotrand { border-color: #f4a7b5; color: #c3253f; }

/* Anteile als Breite (Balken, Fortschritt) und Höhen der Säulen in Stufen von 4px */
.nb-be-w-24 { width: 24%; }
.nb-be-w-33 { width: 33%; }
.nb-be-w-40 { width: 40%; }
.nb-be-w-43 { width: 43%; }
.nb-be-w-50 { width: 50%; }
.nb-be-w-67 { width: 67%; }
.nb-be-w-78 { width: 78%; }
.nb-be-w-100 { width: 100%; }
.nb-be-h-4 { height: 4px; } .nb-be-h-8 { height: 8px; } .nb-be-h-12 { height: 12px; } .nb-be-h-16 { height: 16px; }
.nb-be-h-20 { height: 20px; } .nb-be-h-24 { height: 24px; } .nb-be-h-28 { height: 28px; } .nb-be-h-32 { height: 32px; }
.nb-be-h-36 { height: 36px; } .nb-be-h-40 { height: 40px; } .nb-be-h-44 { height: 44px; } .nb-be-h-48 { height: 48px; }
.nb-be-h-52 { height: 52px; } .nb-be-h-56 { height: 56px; } .nb-be-h-60 { height: 60px; } .nb-be-h-64 { height: 64px; }
.nb-be-h-68 { height: 68px; } .nb-be-h-72 { height: 72px; } .nb-be-h-76 { height: 76px; } .nb-be-h-80 { height: 80px; }
.nb-be-h-84 { height: 84px; } .nb-be-h-88 { height: 88px; } .nb-be-h-92 { height: 92px; } .nb-be-h-96 { height: 96px; }
.nb-be-h-100 { height: 100px; } .nb-be-h-104 { height: 104px; }

/* --- Hauptmenü von Shopware, aufgeklappt -------------------------------- */

.nb-be-hmseite { display: grid; grid-template-columns: 172px minmax(0, 1fr); min-height: 320px; }
.nb-be-hm { display: flex; flex-direction: column; gap: 2px; padding: 12px 9px; border-right: 1px solid var(--nb-linie2); background: #fafbfe; }
.nb-be-hm__logo { display: block; padding: 0 6px 10px; }
.nb-be-hm__logo .nb-schiene__logo { display: block; }
.nb-be-hm__e { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; color: #3d4c5c; white-space: nowrap; }
.nb-be-hm__e .nb-sy { width: 15px; height: 15px; }
.nb-be-hm__e--an { font-weight: 600; color: var(--nb-blau); }
.nb-be-hm__u { padding: 5px 8px 5px 33px; border-radius: 6px; font-size: 12px; color: var(--nb-text2); white-space: nowrap; }
.nb-be-hm__u--an { background: var(--nb-blau-hell); font-weight: 600; color: var(--nb-blau-text); }

/* --- Hilfe-Fenster ------------------------------------------------------ */

.nb-be-hilfe { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 18px; }
.nb-be-hilfe__reiter { display: flex; flex-direction: column; gap: 2px; align-self: start; padding-right: 10px; border-right: 1px solid var(--nb-linie2); }
.nb-be-hilfe__r { padding: 6px 10px; border-left: 2px solid transparent; font-size: 12px; color: var(--nb-text2); }
.nb-be-hilfe__r--an { border-left-color: var(--nb-blau-text); font-weight: 600; color: var(--nb-blau-text); }
.nb-be-hilfe__inhalt { display: flex; flex-direction: column; gap: 9px; min-width: 0; font-size: 11.5px; line-height: 1.55; }
.nb-be-hilfe__h { margin-top: 4px; font-size: 12.5px; }
.nb-be-hilfe__dl { display: grid; grid-template-columns: minmax(104px, max-content) minmax(0, 1fr); gap: 7px 14px; }
.nb-be-hilfe__dl > span { color: var(--nb-text2); }
.nb-be-hilfe__link { display: inline-flex; align-items: center; gap: 5px; }

/* --- Dashboard: Zeitraum, Kennzahlen, Satz ------------------------------ */

.nb-be-zeitraum { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.nb-be-flaeche > .nb-be-zeitraum, .nb-be-dashboard > .nb-be-zeitraum { align-self: flex-end; }
.nb-be-zeitraum > small { font-size: 12px; color: var(--nb-text2); }
.nb-be-zeitraum__knoepfe { display: inline-flex; border: 1px solid var(--nb-linie); border-radius: 6px; background: var(--weiss); }
.nb-be-zeitraum__k { padding: 5px 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nb-be-zeitraum__k + .nb-be-zeitraum__k { border-left: 1px solid var(--nb-linie); }
.nb-be-zeitraum__k--an { border-radius: 5px; background: var(--nb-blau); color: var(--weiss); }

.nb-be-kpi { position: relative; border: 1px solid var(--nb-linie2); border-radius: 8px; background: var(--weiss); }
.nb-be-kpi__gross { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nb-be-kpi__k { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; }
.nb-be-kpi__k + .nb-be-kpi__k { border-left: 1px solid var(--nb-linie2); }
.nb-be-kpi__kopf { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.nb-be-kpi__sy { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; }
.nb-be-kpi__sy .nb-sy { width: 13px; height: 13px; }
.nb-be-kpi__wert { font-size: 22px; font-weight: 600; line-height: 1.15; white-space: nowrap; }
.nb-be-kpi__vgl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font-size: 10.5px; color: var(--nb-text2); }
.nb-be-ton--blau { color: #1f8fd4; }
.nb-be-ton--orange { color: #b8780a; }
.nb-be-ton--violett { color: #563590; }
.nb-be-ton--gruen { color: #156c3f; }
.nb-be-kpi__sy.nb-be-ton--blau { background: #e8f1fc; }
.nb-be-kpi__sy.nb-be-ton--orange { background: #fbf0e2; }
.nb-be-kpi__sy.nb-be-ton--violett { background: #efebf7; color: #7b4fd1; }
.nb-be-kpi__sy.nb-be-ton--gruen { background: #f1f9f5; color: #1f936a; }
.nb-be-marke { padding: 1px 5px; border-radius: 4px; font-style: normal; font-weight: 600; white-space: nowrap; }
.nb-be-marke--rot { background: #fbe9e9; color: #c0392b; }
.nb-be-marke--gruen { background: #f1f9f5; color: #156c3f; }
.nb-be-marke--grau { background: var(--nb-grund2); color: var(--nb-text2); }
.nb-be-kpi__streifen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--nb-linie2); border-radius: 0 0 8px 8px; background: var(--nb-grund); }
.nb-be-kpi__s { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 9px 16px; }
.nb-be-kpi__s + .nb-be-kpi__s { border-left: 1px solid var(--nb-linie2); }
.nb-be-kpi__s small { font-size: 11px; color: var(--nb-text2); }
.nb-be-kpi__s b { font-size: 13.5px; white-space: nowrap; }
.nb-be-kpi__s em { font-size: 10.5px; font-style: normal; color: var(--nb-text2); }
.nb-be-kpi--geist .nb-be-kpi__kopf, .nb-be-kpi--geist .nb-be-kpi__vgl, .nb-be-kpi--geist .nb-be-kpi__s small, .nb-be-kpi--geist .nb-be-kpi__s em { color: #a9b5c2; }
.nb-be-kpi--geist .nb-be-kpi__wert, .nb-be-kpi--geist .nb-be-kpi__s b { color: #c3ccd6; }
.nb-be-kpi--geist .nb-be-kpi__sy { background: var(--nb-grund2); color: #b3bec9; }
.nb-be-kreisel { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 3px solid #cfe3fb; border-top-color: var(--nb-blau); border-radius: 50%; }
.nb-be-kpi--klein .nb-be-kpi__gross { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-be-kpi--klein .nb-be-kpi__k { padding: 11px 13px; }
.nb-be-kpi--klein .nb-be-kpi__k:nth-child(3) { border-left: 0; }
.nb-be-kpi--klein .nb-be-kpi__k:nth-child(n + 3) { border-top: 1px solid var(--nb-linie2); }
.nb-be-kpi--klein .nb-be-kpi__wert { font-size: 18px; }
.nb-be-satz { font-size: 11.5px; line-height: 1.5; color: var(--nb-text2); }

/* --- Dashboard: Aktuell, Aufgaben, Offen nach Status --------------------- */

.nb-be-aktuell__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 11px; color: var(--nb-text2); }
.nb-be-aktuell__kopf b { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-text); }
.nb-be-aktuell { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.nb-be-aufgaben { display: flex; flex-direction: column; }
.nb-be-aufgabe { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; }
.nb-be-aufgabe + .nb-be-aufgabe { border-top: 1px solid var(--nb-linie2); }
.nb-be-aufgabe__sy { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: #fbf0e2; color: #b8780a; }
.nb-be-aufgabe__sy .nb-sy { width: 13px; height: 13px; }
.nb-be-aufgabe__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nb-be-aufgabe__text b { font-size: 12px; }
.nb-be-aufgabe__text small { font-size: 10.5px; color: var(--nb-text2); }
.nb-be-aufgabe__link { font-size: 11.5px; white-space: nowrap; }
.nb-be-aufgabe--erledigt .nb-be-aufgabe__sy { background: #f1f9f5; color: #1f936a; }
.nb-be-aufgabe--erledigt .nb-be-aufgabe__text b { font-weight: 500; color: var(--nb-text3); }
.nb-be-offen { display: flex; flex-direction: column; gap: 8px; }
.nb-be-offen__zahl { display: flex; flex-direction: column; }
.nb-be-offen__zahl b { font-size: 24px; line-height: 1.2; }
.nb-be-offen__zahl small { font-size: 11px; color: var(--nb-text2); }
.nb-be-offen__balken { display: flex; gap: 2px; margin-bottom: 2px; }
.nb-be-offen__teil { height: 8px; border-radius: 4px; }
.nb-be-offen__teil--grau { background: #5e6a78; }
.nb-be-offen__teil--blau { background: #2456c4; }
.nb-be-offen__teil--violett { background: #6b3fc0; }
.nb-be-offen__z { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--nb-linie2); font-size: 12px; }
.nb-be-offen__z small { margin-right: 6px; font-size: 10.5px; color: var(--nb-text3); }
.nb-be-offen__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 4px; font-size: 11px; color: var(--nb-text2); }

/* --- Dashboard: Säulen, Ranglisten, neueste Rücksendungen ----------------- */

.nb-be-kopfzahl { font-size: 11.5px; color: var(--nb-text2); white-space: nowrap; }
.nb-be-chart { display: flex; flex-direction: column; gap: 6px; }
.nb-be-chart__flaeche { display: flex; align-items: flex-end; gap: 3px; height: 112px; padding: 0 2px; border-bottom: 1px solid var(--nb-linie);
  background: repeating-linear-gradient(to top, transparent 0, transparent 27px, #eef2f6 27px, #eef2f6 28px); }
.nb-be-chart__s { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; min-width: 0; }
.nb-be-chart__t { display: block; width: 100%; }
.nb-be-chart__s .nb-be-chart__t:first-child { border-radius: 2px 2px 0 0; }
.nb-be-chart__t--dhl { background: #1f8fd4; }
.nb-be-chart__t--ups { background: #7b4fd1; }
.nb-be-chart__t--self { background: #d9930a; }
.nb-be-chart--monat .nb-be-chart__flaeche { gap: 10px; padding: 0 8px; }
.nb-be-chart__achse { display: flex; gap: 3px; padding: 0 2px; font-size: 9.5px; color: var(--nb-text3); }
.nb-be-chart__achse span { flex: 1; min-width: 0; white-space: nowrap; }
.nb-be-chart--monat .nb-be-chart__achse { gap: 10px; padding: 0 8px; }
.nb-be-chart__legende { display: flex; align-self: flex-start; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--nb-text3); }
.nb-be-chart__legende span { display: inline-flex; align-items: center; gap: 5px; }
.nb-be-chart__legende i { width: 8px; height: 8px; border-radius: 50%; }
.nb-be-tipp { position: absolute; right: calc(100% + 6px); bottom: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 128px; padding: 7px 10px; border: 1px solid var(--nb-linie);
  border-radius: 6px; background: var(--weiss); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.35); font-size: 11px; white-space: nowrap; }
.nb-fenster .nb-be-tipp.nb-fokus, .nb-fenster .nb-be-kontext.nb-fokus { position: absolute; }
.nb-be-tipp span { display: flex; align-items: center; gap: 6px; }
.nb-be-tipp i { width: 7px; height: 7px; border-radius: 50%; }
.nb-be-mittip { position: relative; display: inline-block; }
.nb-be-tipp.nb-be-tipp--unten { top: calc(100% + 7px); right: auto; bottom: auto; left: -6px; display: block; min-width: 0; width: 236px; border: 0; background: #2b3640; color: var(--weiss);
  line-height: 1.45; white-space: normal; transform: none; }

.nb-be-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.nb-be-balken { display: flex; flex-direction: column; gap: 4px; }
.nb-be-balken__kopf { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.nb-be-balken__kopf > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-be-balken__kopf > span:last-child { flex: 0 0 auto; }
.nb-be-balken__kopf small { font-size: 11px; color: var(--nb-text2); }
.nb-be-balken__spur { display: block; height: 6px; border-radius: 3px; background: var(--nb-grund2); }
.nb-be-balken__fuell { display: block; height: 6px; border-radius: 3px; }
.nb-be-balken__fuell.nb-be-platz--0 { background: #1f8fd4; }
.nb-be-balken__fuell.nb-be-platz--1 { background: #7b4fd1; }
.nb-be-balken__fuell.nb-be-platz--2 { background: #d9930a; }
.nb-be-balken__fuell.nb-be-platz--3 { background: #1f936a; }
.nb-be-balken__fuell.nb-be-platz--4 { background: #c0392b; }
.nb-be-rang { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 5px 0; }
.nb-be-rang + .nb-be-rang { border-top: 1px solid var(--nb-linie2); }
.nb-be-rang__platz { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-size: 11px; font-style: normal; font-weight: 700; }
.nb-be-rang__platz.nb-be-platz--0 { background: #e8f1fc; color: #1f8fd4; }
.nb-be-rang__platz.nb-be-platz--1 { background: #efebf7; color: #7b4fd1; }
.nb-be-rang__platz.nb-be-platz--2 { background: #fbf0e2; color: #d9930a; }
.nb-be-rang__platz.nb-be-platz--3 { background: #f1f9f5; color: #1f936a; }
.nb-be-rang__platz.nb-be-platz--4 { background: #fbe9e9; color: #c0392b; }
.nb-be-rang__text { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.nb-be-rang__text small { font-size: 10.5px; color: var(--nb-text2); white-space: nowrap; }
.nb-be-rang__seite { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.nb-be-rang__seite small { font-size: 10.5px; color: var(--nb-text2); white-space: nowrap; }
.nb-be-quote { padding: 1px 6px; border-radius: 4px; font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap; }
.nb-be-quote--rot { background: #fbe9e9; color: #c0392b; }
.nb-be-quote--orange { background: #fbf0e2; color: #b8780a; }
.nb-be-quote--grau { background: var(--nb-grund2); color: var(--nb-text2); }

.nb-be-leer { display: flex; flex-direction: column; align-items: center; gap: 7px; max-width: 440px; margin: 0 auto; padding: 26px 16px 22px; text-align: center; }
.nb-be-leer__sy { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: var(--nb-grund2); color: var(--nb-text2); }
.nb-be-leer__sy .nb-sy { width: 20px; height: 20px; }
.nb-be-leer > b { font-size: 14px; }
.nb-be-leer > span:not(.nb-knopf) { max-width: 380px; font-size: 12px; color: var(--nb-text2); }
.nb-be-leer > .nb-knopf { margin-top: 4px; }
.nb-be-leer--klein { padding: 12px 10px; }

/* --- Liste: Suchleiste, Rumpf, Seitenleiste, Blättern, Zeilenmenü ---------- */

.nb-be-suchleiste { display: flex; padding: 9px 18px; border-bottom: 1px solid var(--nb-linie2); }
.nb-be-suche { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 440px; min-height: 32px; padding: 4px 10px; border: 1px solid var(--nb-linie); border-radius: 6px;
  background: var(--weiss); font-size: 12px; }
.nb-be-suche .nb-sy { width: 13px; height: 13px; color: var(--nb-text2); }
.nb-be-suche__typ { padding: 2px 8px; border-radius: 4px; background: var(--nb-grund2); font-size: 11px; font-style: normal; font-weight: 600; color: var(--nb-text2); white-space: nowrap; }
.nb-be-listenrumpf { display: grid; flex: 1; grid-template-columns: 168px minmax(0, 1fr) 44px; min-width: 0; }
.nb-be-listenrumpf--filter { grid-template-columns: 168px minmax(0, 1fr) 286px 44px; }
.nb-be-listenflaeche { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px 18px; }
.nb-be-listenflaeche .nb-tab__zeile > span { padding-left: 9px; padding-right: 9px; }
.nb-be-listenkopf { display: flex; justify-content: flex-end; }
.nb-be-listenkopf__symbol { display: flex; align-items: center; justify-content: center; width: 26px; height: 22px; border: 1px solid var(--nb-linie); border-radius: 5px; color: var(--nb-text2); }
.nb-be-listenkopf__symbol .nb-sy { width: 13px; height: 13px; }
.nb-be-leiste { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0; border-left: 1px solid var(--nb-linie2); color: var(--nb-text2); }
.nb-be-leiste__sy { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; }
.nb-be-leiste__sy .nb-sy { width: 16px; height: 16px; }
.nb-be-leiste__sy--an { background: var(--nb-blau-hell); color: var(--nb-blau); }
.nb-be-leiste__zahl { position: absolute; top: -4px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--nb-blau);
  font: 700 9px/15px sans-serif; font-style: normal; color: var(--weiss); text-align: center; }
.nb-be-blaettern { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; font-size: 11.5px; color: var(--nb-text2); }
.nb-be-blaettern__seiten { display: flex; align-items: center; gap: 4px; }
.nb-be-blaettern__seiten > * { display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 4px; font-style: normal; }
.nb-be-blaettern__seiten > b { background: var(--nb-blau); color: var(--weiss); }
.nb-be-blaettern > span:last-child { display: flex; align-items: center; gap: 8px; }
.nb-be-blaettern__wahl { min-height: 26px; padding: 3px 8px; }
.nb-be-kontext { position: absolute; display: flex; flex-direction: column; min-width: 160px; padding: 5px 0; border: 1px solid var(--nb-linie); border-radius: 6px; background: var(--weiss);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.4); }
.nb-be-kontext--liste { top: 112px; right: 20px; }
.nb-be-kontext--bestellung { top: 70px; right: 6px; }
.nb-be-kontext__e { padding: 6px 14px; font-size: 12px; white-space: nowrap; }
.nb-be-kontext__e--rot { color: var(--nb-rot); }
.nb-be-mitkontext { position: relative; }

/* --- Liste: Filter in der Seitenleiste ------------------------------------ */

.nb-be-panel { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--nb-linie2); background: var(--weiss); }
.nb-be-panel__kopf { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--nb-linie2); font-size: 13px; }
.nb-be-panel__kopf .nb-sy { margin-left: auto; color: var(--nb-text2); }
.nb-be-panel__inhalt { display: flex; flex-direction: column; gap: 16px; padding: 14px 16px 18px; }
.nb-be-panel__gruppe { display: flex; flex-direction: column; gap: 16px; }
.nb-be-filter { display: flex; flex-direction: column; gap: 7px; }
.nb-be-filter__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.nb-be-filter__reset { font-size: 11px; color: var(--nb-blau); }
.nb-be-filter__schalter { display: flex; flex-direction: column; gap: 6px; }
.nb-be-filter__tage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nb-be-schalter { font-size: 11.5px; }

/* --- Fenster: Sätze, Häkchen, Export ------------------------------------- */

.nb-be-modalsatz { font-size: 12.5px; line-height: 1.5; }
.nb-be-modalsatz--grau { font-size: 12px; color: var(--nb-text2); }
.nb-be-haken { display: inline-flex; align-items: center; font-size: 12.5px; }
.nb-be-haken-liste { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.nb-be-flow { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; line-height: 1.45; color: #8a6116; }
.nb-be-flow .nb-sy { margin-top: 1px; color: #b7791f; }
.nb-be-flow u { color: var(--nb-blau); }
.nb-be-wechsel { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.nb-be-wechsel .nb-sy { width: 12px; height: 12px; color: var(--nb-text2); }
.nb-be-wechsel + .nb-be-grau { margin-left: 8px; }
.nb-be-box { padding: 8px 12px; border-left: 3px solid var(--nb-blau-text); border-radius: 0 6px 6px 0; background: var(--nb-blau-hell); font-size: 11.5px; line-height: 1.5; }
.nb-be-lauf { display: flex; flex-direction: column; gap: 6px; }
.nb-be-lauf__kopf { font-size: 12px; font-weight: 600; }
.nb-be-lauf__spur { display: block; height: 8px; border-radius: 4px; background: var(--nb-grund2); }
.nb-be-lauf__fuell { display: block; height: 8px; border-radius: 4px; background: var(--nb-blau); }
.nb-be-lauf__fuss { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--nb-text2); }
.nb-be-datei { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--nb-linie2); border-radius: 8px; }
.nb-be-datei > i { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #e0f5e8; color: #157439; }
.nb-be-datei > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; }
.nb-be-datei small { font-size: 11px; color: var(--nb-text2); }

/* --- Detailseite: Status, Produkte, Labels, Verlauf, Freigabe ------------- */

.nb-be-ende { font-size: 12px; font-weight: 600; color: var(--nb-text2); white-space: nowrap; }
.nb-be-ausserhalb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.nb-be-fortschritt { display: flex; align-items: center; gap: 8px; }
.nb-be-fortschritt small { font-size: 11.5px; color: var(--nb-text2); white-space: nowrap; }
.nb-be-fortschritt__spur { display: block; width: 90px; height: 6px; border-radius: 3px; background: var(--nb-grund2); }
.nb-be-gruppe { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nb-text2); }
.nb-be-gruppe em { padding: 0 6px; border-radius: 999px; background: var(--nb-grund2); font-style: normal; }
.nb-be-produkt { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--nb-linie2); border-radius: 8px; }
.nb-be-produkt__bild { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--nb-linie2); border-radius: 6px; color: var(--nb-text2); }
.nb-be-produkt__bild .nb-zeichnung { width: 30px; height: 30px; }
.nb-be-produkt__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.nb-be-produkt__text u { color: var(--nb-blau); text-underline-offset: 2px; }
.nb-be-produkt__text small { font-size: 11px; color: var(--nb-text2); }
.nb-be-produkt__sagt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 11.5px; }
.nb-be-produkt__sagt small { font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nb-text2); }
.nb-be-kartenfuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nb-be-kartenfuss small { font-size: 11.5px; color: var(--nb-text2); }
.nb-be-feldzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.nb-be-feldzeile > .nb-knopf { min-height: 32px; }
.nb-be-laden { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; margin-left: 12px; border: 1px solid var(--nb-linie); border-radius: 5px; vertical-align: middle; }
.nb-be-laden .nb-sy { width: 12px; height: 12px; }
.nb-be-tafel-rand { padding: 0 8px 6px; }
.nb-be-bedingungen { display: table; margin-top: 3px; font-weight: 400; }

/* --- Nachrichten --------------------------------------------------------- */

.nb-be-chat { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--nb-linie2); }
.nb-be-blase { display: flex; flex-direction: column; gap: 5px; max-width: 80%; padding: 9px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5; }
.nb-be-blase--customer { align-self: flex-start; border: 1px solid var(--nb-linie); background: var(--weiss); }
.nb-be-blase--shop { align-self: flex-end; background: #eef5fd; }
.nb-be-blase--internal { align-self: flex-end; background: #fdf3e3; }
.nb-be-blase__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11.5px; }
.nb-be-blase__kopf > span { color: var(--nb-text2); }
.nb-be-blase__datei { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--nb-blau); }
.nb-be-blase__datei .nb-sy { width: 12px; height: 12px; }
.nb-be-neu { display: flex; flex-direction: column; gap: 10px; }
.nb-be-neu__feld { display: flex; flex-direction: column; gap: 4px; }
.nb-be-neu__zaehler { align-self: flex-end; font-size: 10.5px; color: var(--nb-text2); }
.nb-be-dateien { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.nb-be-dateien > small { font-size: 11px; color: var(--nb-text2); }
.nb-be-dateien__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-be-dateien__chips > span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--nb-linie); border-radius: 999px; font-size: 11px; }
.nb-be-dateien__chips .nb-sy { width: 11px; height: 11px; }
.nb-be-neu__fuss { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }

/* --- Anlegen im Admin ---------------------------------------------------- */

.nb-be-suchfeld { max-width: 440px; }
.nb-be-meta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 26px; }
.nb-be-meta > span { display: flex; flex-direction: column; gap: 2px; }
.nb-be-meta small { font-size: 11px; color: var(--nb-text2); }
.nb-be-meta b { font-size: 12.5px; }
.nb-be-meta > .nb-be-meta__andere { margin-left: auto; font-size: 12px; }
.nb-be-meta--eng { width: fit-content; }
.nb-be-positionen { display: flex; flex-direction: column; border: 1px solid var(--nb-linie2); border-radius: 8px; }
.nb-be-pos { display: grid; grid-template-columns: 20px minmax(0, 1.6fr) 92px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 12px; }
.nb-be-pos + .nb-be-pos { border-top: 1px solid var(--nb-linie2); }
.nb-be-pos--kopf { font-size: 11.5px; font-weight: 600; }
.nb-be-pos--grau { color: var(--nb-text3); }
.nb-be-pos__produkt { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; }
.nb-be-pos__produkt b { font-weight: 500; }
.nb-be-pos__produkt small { font-size: 10.5px; color: var(--nb-text2); }
.nb-be-pos--grau .nb-be-pos__produkt small { color: var(--nb-text3); }
.nb-be-pos__menge { min-height: 30px; padding: 4px 8px; }
.nb-be-labelzeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.nb-be-gruende { display: block; margin: 3px 0; font-weight: 600; }

/* --- Reiter an Bestellung, Produkt und Kunde ------------------------------ */

.nb-be-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.nb-be-zahlen__z { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb-be-zahlen__z small { font-size: 11.5px; color: var(--nb-text2); }
.nb-be-zahlen__z b { font-size: 15px; white-space: nowrap; }
.nb-be-zahlen__z em { font-size: 10.5px; font-style: normal; color: var(--nb-text2); }
.nb-be-zeitraum--karte .nb-be-zeitraum__k { padding: 4px 9px; font-size: 11.5px; }
.nb-be-vorschlag { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-left: 3px solid var(--nb-blau-text); border-radius: 0 6px 6px 0;
  background: var(--nb-blau-hell); font-size: 11.5px; }
.nb-be-vorschlag .nb-be-knoepfe { flex: 0 0 auto; flex-wrap: nowrap; }

/* ===========================================================================
   Schmale Container: keine Abfragen nötig, die Nachbauten haben feste Breiten
   (760, 1040 px) und werden in Einstieg und Ausschnitt nur verkleinert.
   =========================================================================== */

/* Tabellen in Karten: die letzte Spalte (Details) bricht um, wenn die Zeile breiter als die Karte wäre. */
.nb-be-tafel-rand > .nb-tab .nb-tab__zeile > span:last-child { white-space: normal; }