/* Bereich B Versand: Versandwahl beim Anlegen, Seite der Rücksendung mit Label und
   QR-Code, E-Mail „Rücksendelabel“, kostenpflichtiges Label, Zugangsdaten DHL und UPS,
   Reiter „Labels und Dokumente“ mit seinen Fenstern, Rule Builder. Klassen .nb-vs-…;
   gemeinsame Regeln der Nachbauten in assets/stil.css. Media Queries am Ende dieser Datei. */

/* --- Storefront: Seite der Rücksendung, Karten, Knöpfe, Meldungen --------- */

.nb-vs-seite { display: flex; flex-direction: column; gap: 14px; }
.nb-vs-schritte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nb-vs-schritte__breit { grid-column: 1 / -1; }
.nb-vs-intro { font-size: 12px; line-height: 1.55; }
.nb-vs-satz { font-size: 12.5px; line-height: 1.55; }
.nb-vs-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-vs-fakten { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0; font-size: 12px; }
.nb-vs-fakten dt { margin-top: 4px; font-weight: 600; }
.nb-vs-fakten dd { margin: 0; }
.nb-vs-sflink { color: var(--nb-sf); text-decoration: underline; text-underline-offset: 2px; }
.nb-vs-anschrift { font-style: normal; font-weight: 600; line-height: 1.55; }
.nb-vs-aus { border-color: #a9b8cf; background: #a9b8cf; color: var(--weiss); }

.nb-vs-alarm { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border: 1px solid; font-size: 12px; line-height: 1.5; }
.nb-vs-alarm > .nb-sy { margin-top: 1px; }
.nb-vs-alarm--erfolg { border-color: #8fd1b0; background: #e6f5ee; }
.nb-vs-alarm--erfolg > .nb-sy { color: var(--nb-sf-gruen); }
.nb-vs-alarm--fehler { border-color: #f0a9b3; background: #fcebee; }
.nb-vs-alarm--fehler > .nb-sy { color: var(--nb-sf-rot); }
.nb-vs-alarm--warnung { border-color: #efcf7f; background: #fff6df; }
.nb-vs-alarm--warnung > .nb-sy { color: #a36a00; }

/* --- Storefront: Versandwahl und Zusammenfassung beim Anlegen -------------- */

.nb-vs-wege { display: flex; flex-direction: column; margin: 2px -14px -12px; border-top: 1px solid #e2e6ea; }
.nb-vs-weg { display: grid; grid-template-columns: 15px 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid #e2e6ea; }
.nb-vs-weg:last-child { border-bottom: 0; }
.nb-vs-weg--an { background: #eef4fb; }
.nb-vs-weg--aus .nb-vs-weg__text b, .nb-vs-weg--aus .nb-vs-weg__preis { color: #8b95a1; }
.nb-vs-weg--aus .nb-vs-logo { background: #f3e7a6; color: #c97d83; }
.nb-vs-radio { width: 15px; height: 15px; border: 1.5px solid #8b97a8; border-radius: 50%; background: var(--weiss); }
.nb-vs-radio--an { border: 4.5px solid var(--nb-sf); }
.nb-vs-logo { display: flex; align-items: center; justify-content: center; width: 72px; height: 24px; border-radius: 3px; font: italic 800 13px/1 Arial, sans-serif; letter-spacing: 0.04em; }
.nb-vs-logo--dhl { background: #ffcc00; color: #d40511; }
.nb-vs-logo--ups { background: #351c15; color: #ffb500; font-style: normal; text-transform: lowercase; }
.nb-vs-logo--self { background: #f3f4f6; color: var(--nb-sf-text); }
.nb-vs-weg__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb-vs-weg__text b { font-size: 12.5px; }
.nb-vs-weg__text small { font-size: 11px; line-height: 1.4; color: #4b5563; }
.nb-vs-weg__preis { font-size: 12.5px; white-space: nowrap; }
.nb-vs-weg__min { align-self: flex-start; color: #6b7280; }

.nb-vs-summe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nb-vs-summe__z { display: flex; flex-direction: column; gap: 2px; }
.nb-vs-summe__z small { font-size: 11.5px; color: #4b5563; }
.nb-vs-summe__z b { font-size: 13px; }
.nb-vs-absenden { display: flex; justify-content: flex-end; }

/* --- Storefront: QR-Code, E-Mail, Label-Produkt, Warenkorb, Abschluss ------ */

.nb-vs-qrbox { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 0 2px; text-align: center; }
.nb-vs-qr { display: block; padding: 6px; background: var(--weiss); }
.nb-vs-qr__bild { display: block; width: 150px; height: 150px; color: #111; }
.nb-vs-qrbox__text { max-width: 260px; font-size: 12.5px; line-height: 1.5; }

.nb-vs-mailblock, .nb-vs-mailzeile { display: block; width: fit-content; }
.nb-vs-mlink { color: #2456c4; text-underline-offset: 2px; }
.nb-vs-anhaenge { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid #e6e9ee; }
.nb-vs-anhang { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid #d7dde5; border-radius: 6px; background: #f6f8fb; font-size: 11px; white-space: nowrap; }
.nb-vs-anhang .nb-sy { width: 11px; height: 11px; color: #5b6575; }

.nb-vs-korbgrund { justify-content: flex-end; align-items: stretch; min-height: 330px; padding: 0 0 0 120px; }
.nb-vs-korb { display: flex; flex: 1; flex-direction: column; gap: 14px; max-width: 360px; padding: 16px 18px; background: var(--weiss); }
.nb-vs-korb__kopf { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #e2e6ea; font-size: 14px; }
.nb-vs-korb__pos { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #e2e6ea; }
.nb-vs-korb__preis { font-size: 12.5px; white-space: nowrap; }
.nb-vs-korb__summe { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.nb-vs-korb__knoepfe { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }

.nb-vs-abschluss { display: flex; flex-direction: column; gap: 14px; }
.nb-vs-abschluss__titel { font-size: 17px; font-weight: 700; }

/* --- Administration: Liste, Zeilenmenü, Leerzustand, Reiter, Meldungen ---- */

.nb-vs-liste { display: flex; align-items: flex-start; gap: 14px; }
.nb-vs-liste__tab { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.nb-vs-leiste { display: flex; flex: 0 0 auto; justify-content: center; width: 30px; padding: 8px 0; border-left: 1px solid var(--nb-linie2); color: var(--nb-text2); }
.nb-vs-hell { color: #ccc; }
.nb-vs-kontext { position: relative; display: flex; flex-direction: column; align-self: flex-end; min-width: 190px; margin: -42px 26px 0 0; padding: 5px 0;
  border: 1px solid var(--nb-linie2); border-radius: 6px; background: var(--weiss); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.35); font-size: 12px; }
.nb-vs-kontext__e { padding: 6px 14px; white-space: nowrap; }
.nb-vs-kontext__e--rot { color: var(--nb-rot); }
.nb-vs-kontext__e--aus { color: var(--nb-text3); }
.nb-vs-leer { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 46px 24px; text-align: center; }
.nb-vs-leer > i { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--nb-grund2); color: var(--nb-text2); }
.nb-vs-leer > b { font-size: 14px; }
.nb-vs-leer > span { max-width: 420px; font-size: 12px; line-height: 1.5; color: var(--nb-text2); }
.nb-vs-lasche--aus { color: var(--nb-text3); }
.nb-vs-titel { display: flex; align-items: center; gap: 7px; }
.nb-vs-toast { display: flex; align-items: flex-start; gap: 10px; align-self: flex-end; width: 330px; padding: 11px 14px; border: 1px solid var(--nb-linie2);
  border-left: 3px solid var(--nb-gruen); border-radius: 6px; background: var(--weiss); box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.45); font-size: 12px; line-height: 1.45; }
.nb-vs-toast--fehler { border-left-color: var(--nb-rot); }
.nb-vs-toast__sy { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #e0f5e8; color: #157439; }
.nb-vs-toast--fehler .nb-vs-toast__sy { background: #fbe5ea; color: #c3253f; }
.nb-vs-toast__text b { display: block; }
.nb-vs-meldungen { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* --- Administration: Detailseite der Zugangsdaten, Probe im Reiter „Sandbox“ */

.nb-vs-probe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 20px; }
.nb-vs-paar { display: grid; gap: 12px; min-width: 0; }
.nb-vs-paar--11 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-vs-paar--21 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.nb-vs-paar--12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.nb-vs-gesperrt .nb-feld__ein { background: #f3f5f8; color: var(--nb-text3); }

/* --- Administration: Reiter „Labels und Dokumente“, Fenster, Rule Builder --- */

.nb-vs-sendung { display: inline-flex; align-items: center; gap: 4px; }
.nb-vs-sendung .nb-sy { width: 11px; height: 11px; color: var(--nb-blau); }
.nb-vs-fehler { display: inline-flex; align-items: center; gap: 7px; color: var(--nb-text2); }
.nb-vs-leersatz { width: fit-content; padding: 6px 0 2px; font-size: 12px; color: var(--nb-text2); }
.nb-vs-feldzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding-top: 4px; }
.nb-vs-feldknopf .nb-knopf { min-height: 32px; }
.nb-vs-feldknopf--aus .nb-knopf { border-color: #e2e6ea; background: #eef0f3; color: #a3adb8; }
.nb-vs-laden { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--nb-linie); border-radius: 6px; color: var(--nb-text); }
.nb-vs-notiz { width: fit-content; font-size: 11.5px; line-height: 1.5; color: var(--nb-text2); }
.nb-vs-haken { display: flex; flex-direction: column; gap: 5px; }
.nb-vs-regel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--nb-linie2); border-radius: 6px; background: var(--nb-grund); }