:root {
  /* Pakajo Brand */
  --primary: #0F4C81;
  --primary-dark: #0A3358;
  --primary-light: #E8EFF7;
  --accent: #EF7B1A; /*#F39C12;*/
  --accent-dark: #D97A06;
  --accent-light: #FFF3DC;

  --primary-table-header: #264E63;
  --navy: #0a2540;
  --orange: #EF7B1A;

  /* Status */
  --success: #10B981;
  --success-light: #D1FAE5;
  --warning: #F59E0B;
  --warning-light: #FEF3C7;
  --danger: #EF4444;
  --danger-light: #FEE2E2;
  --info: #3B82F6;
  --info-light: #DBEAFE;

  /* Neutral */
  --gray-900: #111827;
  --gray-800: #1F2937;
  --gray-700: #374151;
  --gray-600: #4B5563;
  --gray-500: #6B7280;
  --gray-400: #9CA3AF;
  --gray-300: #D1D5DB;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;
  --gray-50:  #F9FAFB;

  --bg: #F1F5F9;
  --card: #FFFFFF;
  --border: #E2E8F0;

  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --shadow:    0 1px 3px 0 rgb(15 23 42 / 0.1), 0 1px 2px -1px rgb(15 23 42 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.1), 0 2px 4px -2px rgb(15 23 42 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.1), 0 8px 10px -6px rgb(15 23 42 / 0.1);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-md: 12px;
  --radius-lg: 16px;

}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--gray-800);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 14px; }
code {
  background: transparent; border-radius: unset; color: initial; display: initial;  margin: unset; padding: unset; 
  position: unset; border: unset; font-family: monospace;
}

/* ============== APP LAYOUT ============== */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.app.hide-sidebar {
  grid-template-columns: 1fr;
}
.app #app-page.login-hide .page {
  padding: 0;
  max-width: stretch;
}
.app #app-page.login-hide {
  padding-top: 0px;
}
.sidebar {
  background-color: #0A2540;
  background-image:
    linear-gradient(to right, rgba(10,37,64,1) 0%, rgba(10,37,64,0) 100%),
    radial-gradient(circle, rgba(255,255,255,0.12) 1.2px, transparent 1.5px);
  background-size: auto, 14px 14px;
  background-position: 0 0, 0 0;
  color: #fff;
  padding: 24px 16px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; /* Inhalt der nicht passt scrollt INNERHALB der Nav, nicht außerhalb der Sidebar */
}
.brand {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px 8px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 16px;
  flex-shrink: 0; /* Brand-Header soll nie schrumpfen */
}
.brand-svg { width: 100%; max-width: 220px; height: auto; display: block; }
.brand-logo { width: 100%; max-width: 200px; height: auto; display: block; }
.brand-svg .pakajo-word { fill: #ffffff; }
.brand-svg .pakajo-ring { stroke: #EF7B1A; fill: none; stroke-linecap: round; }
.brand-svg .pakajo-ring-fill { fill: #EF7B1A; }
.brand-svg .pakajo-tagline { fill: #EF7B1A; }
.brand-svg.dark .pakajo-word { fill: #1F2937; }
.brand-svg.dark .pakajo-tagline, .brand-svg.dark .pakajo-ring { stroke: #EF7B1A; fill: #EF7B1A; }
.brand-svg.dark .pakajo-tagline { stroke: none; fill: #EF7B1A; }
.brand-mark {
  width: 38px; height: 38px;
  background: var(--accent);
  border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 18px; color: #fff;
}
.brand-text { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.brand-sub { font-size: 11px; opacity: 0.7; font-weight: 500; }

.nav {
  display: flex; flex-direction: column; gap: 2px; flex: 1;
  overflow-y: auto;     /* Nav scrollt innerhalb der Sidebar, wenn Items nicht alle passen */
  min-height: 0;         /* wichtig für flex-Children mit Overflow */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.20) transparent;
}
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
.nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.30); }
.nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; opacity: 0.5; padding: 16px 12px 8px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-item.active { background: rgba(243,156,18,0.18); color: #fff; font-weight: 600; }
.nav-item.active::after { content: ""; margin-left: auto; width: 4px; height: 16px; background: var(--accent); border-radius: 2px; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item .badge {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 700;
  margin-left: auto;
}

.sidebar-footer {
  padding: 16px 8px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 11px;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; /* Footer mit User-Avatar soll nie schrumpfen */
}
.sidebar-footer .sidebar-user {
  display: flex; align-items: center; gap: 10px;
}

/* Globaler Sprach-Switcher in der Topbar — auf jeder Seite sichtbar */
.topbar-lang {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 9px 8px 11px;
  background: var(--gray-100, #f3f4f6);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 20px;
  font-size: 13px; font-weight: 600;
  color: var(--gray-800);
  transition: all 0.15s;
}
.topbar-lang:hover {
  background: #fff;
  border-color: #0C97AF;
}
.topbar-lang-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.topbar-lang select {
  appearance: none;
  -webkit-appearance: none; -moz-appearance: none;
  background: transparent; border: 0;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: inherit; cursor: pointer;
  padding: 0; margin: 0;
  outline: none;
  height: unset;
}
.topbar-lang select:focus {
  -webkit-box-shadow: 0 0 5px #cacaca;
    box-shadow: unset;
}
.topbar-lang select option {
  background: #fff; color: var(--gray-900);
  font-weight: 500;
}
.topbar-lang-caret { opacity: 0.55; flex-shrink: 0; pointer-events: none; }
.topbar-lang:hover .topbar-lang-caret { color: #0C97AF; opacity: 1; }
@media (max-width: 767px) {
  .topbar-lang { padding: 5px 7px 5px 9px; max-height: 25px;}
  .topbar-lang select { font-size: 12px!important; min-width: 35px;}
  .topbar-lang-icon {display: none;}
}
/* Klickbare Sendungs-Nr. in der Massenversand-Tabelle */
.bulk-nr-link {
  color: var(--accent-dark, #0A7488);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
  transition: color 0.12s;
}
.bulk-nr-link:hover { color: var(--primary, #0F4C81); border-bottom-style: solid; }
.sidebar-footer .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  font-weight: 700; color: #fff;
  font-size: 12px;
}
.sidebar-footer .name { font-weight: 600; }
.sidebar-footer .email { opacity: 0.6; font-size: 10px; }

/* ============== MAIN CONTENT ============== */
.main { min-height: 100vh; }
.main.hide-sidebar {
  background-color: var(--pakajo_bg_color_white)!important;
}

.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 14px 32px;
  display: flex; align-items: center; gap: 24px;
  position: sticky; top: 0; z-index: 50;
}
.search {
  flex: 1; max-width: 480px;
  position: relative;
}
.search input {
  width: 100%;
  padding: 9px 14px 9px 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--gray-50);
  font-size: 13px;
  outline: none;
  transition: all 0.15s;
}
.search input:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.search svg { position: absolute; left: 12px; top: 35%; transform: translateY(-50%); color: var(--gray-400); width: 16px; height: 16px; }

.topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.country-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 8px;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-dark);
}
.country-pill .flag { font-size: 16px; }
.icon-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--gray-600);
  transition: all 0.15s;
  position: relative;
}
.icon-btn:hover { background: var(--gray-100); color: var(--primary); }
.icon-btn .dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid #fff;
}
.icon-btn svg { width: 18px; height: 18px; }

/* ============== PAGE LAYOUT ============== */
.page { padding: 24px 32px; max-width: 1600px; }
.page-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 24px; flex-wrap: wrap; gap: 16px;
}
.page-title h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  margin-bottom: 0px;
}
.page-title .breadcrumb {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.page-actions { display: flex; gap: 10px; }

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  transition: all 0.15s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-ghost { color: var(--gray-700); background: transparent; }
.btn-ghost:hover { background: var(--gray-100); }
.btn-outline { border-color: var(--border); color: var(--gray-700); background: #fff; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn-lg { padding: 12px 22px; font-size: 14px; }

.btn.disabled, .btn[disabled], .btn.disabled:hover, .btn[disabled]:hover, .btn.disabled:focus, .btn[disabled]:focus {
  opacity: .5;
  cursor: not-allowed;
}

/* ============== NEUER MANDANT INLINE (statt Popup) ============== */
/* Wenn der "+ Neuer Mandant"-Flow geöffnet wird, rendern wir das Modal
   inline rechts neben der Mandanten-Liste statt als Overlay-Popup. */
.modal-overlay.is-inline-mandant {
  position: static !important;
  inset: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  z-index: 1 !important;
  display: block !important;
  animation: none !important;
}
.modal-overlay.is-inline-mandant .modal {
  max-width: 100% !important;
  width: 100% !important;
  max-height: none !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border);
  animation: none !important;
}
.modal-overlay.is-inline-mandant .modal-close { display: none !important; }

/* ============== MANDANT-PENDING-STATUS ============== */
/* Visueller Style für Mandanten, die noch auf Pakajo-Freischaltung warten */
.tenant-list .ti.is-pending {
  background: linear-gradient(135deg, #FEF2F2, #fff);
  border-color: #FCA5A5 !important;
  position: relative;
}
.tenant-list .ti.is-pending::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: #EF4444; border-radius: 6px 0 0 6px;
}
.tenant-list .ti.is-pending .name { color: #991B1B; }
.tenant-list .ti.is-pending .id { color: #B91C1C; }
.tenant-list .ti.is-pending .badge { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.tenant-list .ti.is-pending .badge .dot { background: #EF4444; }
.tenant-list .ti.is-pending.selected { background: #FEE2E2; border-color: #EF4444 !important; }

/* Pending-Banner im Mandant-Detail-View */
.mandant-pending-banner {
  background: linear-gradient(135deg, #FEE2E2, #FEF2F2);
  border: 1.5px solid #EF4444;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex; gap: 14px; align-items: flex-start;
}
.mandant-pending-banner .icon { font-size: 28px; flex-shrink: 0; }
.mandant-pending-banner strong { color: #991B1B; display: block; margin-bottom: 4px; font-size: 14px; }
.mandant-pending-banner p { margin: 0; font-size: 12.5px; color: #7F1D1D; line-height: 1.5; }

/* ============== API-TESTER ============== */
.api-format-btn {
  padding: 6px 18px; border: none; background: transparent;
  font-size: 12.5px; font-weight: 700; color: var(--gray-600);
  border-radius: 6px; cursor: pointer; transition: all 0.15s;
  font-family: inherit;
}
.api-format-btn.is-active {
  background: #fff; color: var(--gray-900);
  box-shadow: var(--shadow-sm);
}
.api-format-btn:not(.is-active):hover { color: var(--gray-800); }

/* ============== AUFTRAG-ROW · Action-Buttons (kompaktes Grid) ============== */
.auftrag-actions {
  display: flex; flex-direction: column; gap: 6px;
}
.auftrag-actions .row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.auftrag-actions .btn-danger-ghost {
  color: var(--danger); border-color: rgba(239,68,68,0.35);
  background: #fff;
}
.auftrag-actions .btn-danger-ghost:hover {
  background: #FEF2F2; border-color: var(--danger);
}
.auftrag-actions .btn-danger-ghost.is-locked {
  color: var(--gray-500); border-color: var(--border);
  background: var(--gray-50); cursor: not-allowed;
  position: relative;
}
.auftrag-actions .btn-danger-ghost.is-locked:hover {
  background: var(--gray-50); border-color: var(--border);
}
.auftrag-actions .btn-danger-ghost.is-locked::after {
  content: "🔒"; font-size: 10px; margin-left: 4px;
}
/* Mandant gesperrt durch verknüpften Auftrag (Locked-Mode) */
#screen-versand-mandant-field.is-locked-by-auftrag select {
  background: linear-gradient(135deg, #FFF8F0, #FFEFE0);
  border-color: var(--accent) !important;
  color: #92400E;
  font-weight: 700;
  cursor: not-allowed;
}
#screen-versand-mandant-field.is-locked-by-auftrag select:focus {
  outline: none; box-shadow: 0 0 0 3px rgba(239,123,26,0.18);
}
#screen-versand-mandant-field.is-locked-by-auftrag label {
  color: #92400E;
}

/* Zuletzt-bearbeitet Hinweis */
.auftrag-last-edit {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 3px 8px;
  background: #FFF8F0; color: #92400E;
  border: 1px solid #FED7AA; border-radius: 10px;
  font-size: 11px; font-weight: 600;
}

/* ============== EXPORT-MODAL · Format-Cards ============== */
.export-format-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; border: 1.5px solid var(--border); border-radius: 10px;
  cursor: pointer; background: #fff; transition: all 0.15s;
}
.export-format-card:hover { border-color: var(--accent); background: #FFF8F0; }
.export-format-card.is-active {
  border-color: var(--accent); background: #FFF5E5;
  box-shadow: 0 0 0 3px rgba(239,123,26,0.10);
}
.export-format-card input[type="radio"] { margin-top: 2px; flex-shrink: 0; }
.export-format-card .fmt-icon {
  width: 30px; height: 30px; border-radius: 6px;
  display: grid; place-items: center; font-size: 15px; margin-bottom: 6px;
}
.export-format-card .fmt-label { font-size: 12.5px; font-weight: 700; color: var(--gray-900); }
.export-format-card .fmt-desc { font-size: 10.5px; color: var(--gray-600); margin-top: 2px; line-height: 1.3; }

/* ============== NEUER AUFTRAG · Versandart-Cards ============== */
.auftrag-versandart-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px; border: 1.5px solid var(--border); border-radius: 10px;
  cursor: pointer; background: #fff; transition: all 0.15s;
}
.auftrag-versandart-card:hover { border-color: var(--accent); background: #FFF8F0; }
.auftrag-versandart-card.is-active {
  border-color: var(--accent); background: #FFF5E5;
  box-shadow: 0 0 0 3px rgba(239,123,26,0.10);
}
.auftrag-versandart-card input[type="radio"] { margin-top: 4px; flex-shrink: 0; }
.auftrag-versandart-card .treat-content { display: flex; gap: 12px; align-items: flex-start; flex: 1; }
.auftrag-versandart-card .treat-icon {
  width: 38px; height: 38px; border-radius: 8px;
  display: grid; place-items: center; font-size: 18px; flex-shrink: 0;
}
.auftrag-versandart-card .treat-label { font-size: 13.5px; font-weight: 700; color: var(--gray-900); }
.auftrag-versandart-card .treat-desc { font-size: 11.5px; color: var(--gray-600); margin-top: 3px; line-height: 1.45; }

/* ============== RETOURENPORTAL ============== */
.ret-step-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 12px; border-radius: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  background: #F3F4F6; color: var(--gray-600);
  border: 1.5px solid var(--gray-200);
}
.ret-step-pill.is-active {
  background: #FFF5E5; color: #92400E; border-color: var(--accent);
}
.ret-step-pill.is-done {
  background: #D1FAE5; color: #065F46; border-color: #10B981;
}
.ret-method-tab {
  background: transparent !important; color: var(--gray-600) !important;
  font-weight: 600 !important;
}
.ret-method-tab.is-active {
  background: #fff !important; color: var(--gray-900) !important;
  font-weight: 700 !important; box-shadow: var(--shadow-sm) !important;
}
.ret-treat-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px; border: 1.5px solid var(--border); border-radius: 10px;
  cursor: pointer; background: #fff; transition: all 0.15s;
}
.ret-treat-card:hover { border-color: var(--accent); background: #FFF8F0; }
.ret-treat-card.is-active {
  border-color: #10B981; background: #ECFDF5; box-shadow: 0 0 0 3px rgba(16,185,129,0.08);
}
.ret-treat-card input[type="radio"] { margin-top: 4px; flex-shrink: 0; }
.ret-treat-card .treat-content { display: flex; gap: 12px; align-items: flex-start; flex: 1; }
.ret-treat-card .treat-icon {
  width: 38px; height: 38px; border-radius: 8px;
  display: grid; place-items: center; font-size: 18px;
  flex-shrink: 0;
}
.ret-treat-card .treat-label { font-size: 13.5px; font-weight: 700; color: var(--gray-900); }
.ret-treat-card .treat-desc { font-size: 11.5px; color: var(--gray-600); margin-top: 2px; line-height: 1.4; }
.ret-treat-card .treat-cost { font-size: 11.5px; font-weight: 700; margin-top: 4px; }
/* Status-Pills in Retouren-Tabelle */
.ret-status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ret-status-pill.pending { background: #FEF3C7; color: #92400E; }
.ret-status-pill.relabeled { background: #D1FAE5; color: #065F46; }
.ret-status-pill.destroyed { background: #FEE2E2; color: #991B1B; }
.ret-status-pill.stored { background: #E0F2F6; color: #0C4751; }
.ret-status-pill.returned { background: #FED7AA; color: #92400E; }
.ret-status-pill.locked { background: #E5E7EB; color: #374151; border: 1px solid #9CA3AF; }
.ret-auto-frist {
  font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.ret-auto-frist.danger { color: #991B1B; }
.ret-auto-frist.warning { color: #92400E; }
.ret-auto-frist.ok { color: var(--gray-500); }

/* ----- Retoure-Detail (Kundensicht) ----- */
.ret-new-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 9px; margin-left: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--accent); color: #fff; animation: retPulse 1.6s ease-in-out infinite;
}
@keyframes retPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,123,26,.45);} 50% { box-shadow: 0 0 0 5px rgba(239,123,26,0);} }
.retd-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
@media (max-width: 860px) { .retd-grid { grid-template-columns: 1fr; } }
.retd-card { border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
.retd-card > h4 {
  margin: 0; padding: 11px 16px; font-size: 12px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--gray-700); background: #F8FAFC; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.retd-card .retd-body { padding: 14px 16px; }
.retd-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.retd-row + .retd-row { border-top: 1px dashed var(--gray-200); }
.retd-row .k { color: var(--gray-500); flex-shrink: 0; }
.retd-row .v { font-weight: 600; color: var(--gray-900); text-align: right; }
.retd-action {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 11px;
  background: #fff; cursor: pointer; transition: all .15s; margin-bottom: 10px;
}
.retd-action:hover { border-color: var(--accent); background: #FFF8F0; }
.retd-action .ico { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; font-size: 19px; flex-shrink: 0; }
.retd-action .at { display: block; font-size: 13.5px; font-weight: 700; color: var(--gray-900); }
.retd-action .ad { display: block; font-size: 11.5px; color: var(--gray-600); margin-top: 3px; line-height: 1.4; }
.retd-action .chev { margin-left: auto; align-self: center; color: var(--gray-400); font-size: 18px; }
.retd-panel { border: 1px solid var(--border); border-radius: 11px; padding: 16px; background: #FAFBFC; margin-bottom: 10px; }
.retd-panel label.fl { display: block; font-size: 12px; font-weight: 700; color: var(--gray-700); margin: 0 0 5px; }
.retd-panel select, .retd-panel input, .retd-panel textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; background: #fff;
}
.retd-timeline { list-style: none; margin: 0; padding: 0; }
.retd-timeline li { position: relative; padding: 0 0 14px 22px; font-size: 12.5px; }
.retd-timeline li::before { content: ''; position: absolute; left: 4px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.retd-timeline li::after { content: ''; position: absolute; left: 8px; top: 12px; bottom: 0; width: 1.5px; background: var(--gray-200); }
.retd-timeline li:last-child { padding-bottom: 0; }
.retd-timeline li:last-child::after { display: none; }
.retd-timeline li .tt { font-weight: 700; color: var(--gray-900); }
.retd-timeline li .td { color: var(--gray-500); }
.retd-decide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) { .retd-decide-grid { grid-template-columns: 1fr; } }
.retd-decide {
  display: flex; gap: 9px; align-items: flex-start; padding: 11px;
  border: 1.5px solid var(--border); border-radius: 9px; background: #fff; cursor: pointer; transition: all .15s;
}
.retd-decide:hover { border-color: var(--accent); background: #FFF8F0; }

/* ============== ZUSATZVERSICHERUNG TIER-BOXEN ============== */
.ins-tier {
  background: #fff; border: 1.5px solid #FED7AA; border-radius: 8px;
  padding: 12px 8px; text-align: center;
  transition: all 0.15s;
  cursor: pointer;
  user-select: none;
}
.ins-tier:hover {
  border-color: #FB923C; background: #FFF8F0; transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(239,123,26,0.15);
}
.ins-tier.is-active {
  background: #D1FAE5; border-color: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.ins-tier.is-active:hover {
  background: #D1FAE5; border-color: #10B981;
}
.ins-tier .ins-tier-range {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: #92400E; font-weight: 700;
}
.ins-tier.is-active .ins-tier-range { color: #065F46; }
.ins-tier .ins-tier-price {
  font-size: 15px; font-weight: 800; color: var(--gray-900); margin-top: 3px;
}
.ins-tier.is-active .ins-tier-price { color: #065F46; }
/* Wenn Insurance-Checkbox deaktiviert: Detail-Bereich ausblenden + Pill verstecken */
#ship-insurance-card.is-disabled { background: #F9FAFB; border-color: var(--gray-300); }
#ship-insurance-card.is-disabled #ship-insurance-active-pill { display: none; }
#ship-insurance-card.is-disabled #ship-insurance-detail { display: none; }

/* Screen-Insurance-Card (Einzelversand-Screen) — gleiche Optik wie Modal */
#screen-insurance-card.is-disabled { background: #F9FAFB; border-color: var(--gray-300); }
#screen-insurance-card.is-disabled #screen-insurance-active-pill { display: none; }
#screen-insurance-card.is-disabled #screen-insurance-detail { display: none; }
#screen-insurance-card.is-disabled .form-section-title,
#screen-insurance-card.is-disabled label > div > div:first-child { color: var(--gray-500); }
#ship-insurance-card.is-disabled .form-section-title,
#ship-insurance-card.is-disabled label > div > div:first-child { color: var(--gray-500); }

/* ============== ABO-SCREEN-BADGE (Einzelversand + Massenversand) ============== */
.abo-screen-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 20px;
  font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
  border: 1.5px solid transparent;
  user-select: none; white-space: nowrap;
}
.abo-screen-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.abo-screen-badge .ico {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  background: rgba(255,255,255,0.7);
}
.abo-screen-badge .label-stack { display: flex; flex-direction: column; line-height: 1.15; }
.abo-screen-badge .pre {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  opacity: 0.7; font-weight: 700;
}
.abo-screen-badge .name { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; }
.abo-screen-badge .arrow { font-size: 14px; opacity: 0.55; margin-left: 2px; }
/* Plan-Farben */
.abo-screen-badge.abo-free   { background: #F3F4F6; color: #374151; border-color: #D1D5DB; }
.abo-screen-badge.abo-bronze { background: #FFEDD5; color: #92400E; border-color: #FED7AA; }
.abo-screen-badge.abo-silber { background: #F3F4F6; color: #374151; border-color: #9CA3AF; }
.abo-screen-badge.abo-gold   { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.abo-screen-badge.abo-platin { background: #EDE9FE; color: #5B21B6; border-color: #C7D2FE; }

/* ============== CARDS ============== */
.card {
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.card-header h3 { font-size: 14px; font-weight: 700; color: var(--gray-900); }
.card-header .meta { font-size: 12px; color: var(--gray-500); }
.card-body { padding: 20px; }
.card-footer { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--gray-50); }

/* ============== KPI CARDS ============== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.kpi {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  margin-bottom: 12px;
}
.kpi-icon svg { width: 20px; height: 20px; }
.kpi-icon.blue { background: var(--info-light); color: var(--info); }
.kpi-icon.orange { background: var(--accent-light); color: var(--accent-dark); }
.kpi-icon.green { background: var(--success-light); color: var(--success); }
.kpi-icon.purple { background: #EDE9FE; color: #7C3AED; }
.kpi-icon.red { background: var(--danger-light); color: var(--danger); }
.kpi-label { font-size: 12px; color: var(--gray-500); font-weight: 500; margin-bottom: 4px; }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--gray-900); letter-spacing: -0.02em; line-height: 1.1; }
.kpi-trend {
  font-size: 12px; font-weight: 600;
  margin-top: 8px;
  display: flex; align-items: center; gap: 4px;
}
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }

/* ============== BADGES & TAGS ============== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.badge-success { background: var(--success-light); color: var(--success); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-danger  { background: var(--danger-light); color: var(--danger); }
.badge-info    { background: var(--info-light); color: var(--info); }
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-accent  { background: var(--accent-light); color: var(--accent-dark); }
.badge-gray    { background: var(--gray-100); color: var(--gray-600); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============== SCREENS ============== */
.screen { 
  /*display: none; */
  display: block;
  animation: fadeIn 0.3s ease; }
.screen.active { display: block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============== HOME SCREEN ============== */
.welcome-banner {
  background-color: #0A2540;
  background-image:
    linear-gradient(to right, rgba(10,37,64,1) 0%, rgba(10,37,64,0) 100%),
    radial-gradient(circle, rgba(255,255,255,0.12) 1.2px, transparent 1.5px);
  background-size: auto, 14px 14px;
  background-position: 0 0, 0 0;
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 24px;
  display: flex; justify-content: space-between; align-items: center;
  position: relative; overflow: hidden;
}
.welcome-banner::before {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  border-radius: 50%;
}
.welcome-banner h2 { font-size: 22px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.02em; }
.welcome-banner p { font-size: 13px; opacity: 0.9; max-width: 540px; }
.welcome-banner .glocal-stat {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: right;
  backdrop-filter: blur(10px);
}
.welcome-banner .glocal-stat .num { font-size: 28px; font-weight: 800; line-height: 1; }
.welcome-banner .glocal-stat .lbl { font-size: 11px; opacity: 0.85; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }

.home-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
}
@media (max-width: 1280px) { .home-grid { grid-template-columns: 1fr; } }

/* AI Insight Card */
.ai-card {
  background: linear-gradient(135deg, #7C2D12 0%, #B45309 45%, #EA580C 100%);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 24px -8px rgba(180,83,9,0.4);
}
.ai-card::before {
  content: "✨"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font-size: 70px; opacity: 0.18;
}
.ai-card::after {
  content: ""; position: absolute; right: -60px; bottom: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,215,154,0.35) 0%, transparent 60%);
  border-radius: 50%;
}
.ai-card .ai-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  color: #FFF7ED;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 10px;
  position: relative; z-index: 1;
}
.ai-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; position: relative; z-index: 1; }
.ai-card p { font-size: 13px; opacity: 0.92; line-height: 1.5; max-width: 500px; position: relative; z-index: 1; }
.ai-card .savings { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 12px 0 4px; position: relative; z-index: 1; color: #FFFBEB; }
.ai-card .savings small { font-size: 13px; font-weight: 500; opacity: 0.85; }
.ai-card a { color: #FFFBEB; font-weight: 700; font-size: 12px; text-decoration: underline; position: relative; z-index: 1; }
.ai-card a:hover { color: #fff; }

/* Quick actions */
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.quick-action {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; transition: all 0.15s;
}
.quick-action:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.quick-action .ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--primary-light); color: var(--primary);
  display: grid; place-items: center; flex-shrink: 0;
}
.quick-action .ico svg { width: 20px; height: 20px; }
.quick-action .label { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.quick-action .sub { font-size: 11px; color: var(--gray-500); }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 12px 20px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px;}
.tbl th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); font-weight: 700; background: var(--gray-50); }
.tbl tr:hover { background: var(--gray-50); }
.tbl td .small { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
.tbl .row-action { color: var(--gray-400); cursor: pointer; }
.tbl .row-action:hover { color: var(--primary); }

/* News Panel */
.news-item {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.15s;
}
.news-item:last-child { border-bottom: none; }
.news-item:hover { background: var(--gray-50); }
.news-item .news-title { font-size: 13px; font-weight: 600; color: var(--gray-900); margin-bottom: 4px; }
.news-item .news-meta { font-size: 11px; color: var(--gray-500); display: flex; align-items: center; gap: 6px; }
.news-item.alert { border-left: 3px solid var(--danger); padding-left: 17px; }
.news-item.info { border-left: 3px solid var(--info); padding-left: 17px; }
.news-item.success { border-left: 3px solid var(--success); padding-left: 17px; }

/* ============== VERSANDPORTAL SCREEN ============== */
.glocal-selector {
  background: linear-gradient(135deg, #FFF8E7 0%, #FFEFD0 100%);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 20px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
}
.glocal-icon {
  width: 48px; height: 48px;
  background: var(--accent);
  border-radius: 12px;
  color: #fff;
  display: grid; place-items: center;
  font-size: 22px;
}
.glocal-info .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-dark); font-weight: 700;
}
.glocal-info .value { font-size: 18px; font-weight: 700; color: var(--gray-900); }
.glocal-info .desc { font-size: 12px; color: var(--gray-600); margin-top: 2px; }
.glocal-selector select {
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #fff;
  font-weight: 600;
  color: var(--gray-900);
  height: unset;
}

.shipping-form {
  display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 14px; margin-bottom: 24px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px;
}
.shipping-form .field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); font-weight: 600; display: block; margin-bottom: 6px; }
.shipping-form .field input, .shipping-form .field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

/* === Großzügiger Versand-Container mit zwei Reihen ============================
   Reihe 1: Mandant · Ziel-Land · (PLZ optional)
   Reihe 2: Länge · Breite · Höhe · Gewicht · Produkt · Berechnen-Button
   Oben rechts in der Header-Leiste: "Aus Box-Presets übernehmen"
   Unten links: Gurtmaß + Volumen Live-Anzeige
=============================================================================== */
.shipping-form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.shipping-form-card .form-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--gray-200, #e8e8e8);
}
.shipping-form-card .form-card-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: var(--gray-900);
}
.shipping-form-card .form-card-title .form-card-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, #EF7B1A 0%, #f49a4a 100%);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
}
.shipping-form-card .form-row {
  display: grid; gap: 16px; margin-bottom: 16px;
  align-items: end;
}
.shipping-form-card .form-row:last-of-type { margin-bottom: 14px; }
.shipping-form-card .form-row.row-1 {
  grid-template-columns: 1.6fr 1.4fr;
}
.shipping-form-card .form-row.row-1.has-plz {
  grid-template-columns: 1.6fr 1.4fr 0.8fr;
}
.shipping-form-card .form-row.row-2 {
  grid-template-columns: 0.8fr 0.8fr 0.8fr 0.9fr 1.4fr auto;
}
.shipping-form-card .field label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gray-500); font-weight: 600; display: block; margin-bottom: 6px;
}
.shipping-form-card .field input,
.shipping-form-card .field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
}
.shipping-form-card .form-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px;
  border-top: 1px dashed var(--gray-200, #e8e8e8);
  flex-wrap: wrap; gap: 10px;
}
.shipping-form-card .form-card-meta {
  font-size: 13px; color: var(--gray-600);
}
.shipping-form-card .form-card-meta strong { color: var(--gray-900); }
.shipping-form-card .form-card-calc {
  align-self: end;
}
.shipping-form-card .form-card-calc .btn { 
  white-space: nowrap; 
  padding: 7px 22px;
  width: stretch;
  margin-bottom: -10px;
}
@media (max-width: 1100px) {
  .shipping-form-card .form-row.row-2 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  .shipping-form-card .form-card-calc {
    grid-column: 1 / -1; justify-self: end;
  }
}

.tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
  background: var(--gray-100); padding: 4px;
  border-radius: 10px;
  width: fit-content;
}
.tab {
  padding: 10px 18px;
  border-radius: 7px;
  font-size: 13px; font-weight: 600;
  color: var(--gray-600); cursor: pointer;
  transition: all 0.15s;
}
.tab.active { background: #fff; color: var(--gray-900); box-shadow: var(--shadow-sm); }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* =========================================================
   ABO-FEATURE-GATING — Lock-Overlay für nicht-verfügbare Features
   ========================================================= */
.feature-locked {
  position: relative;
  opacity: 0.55;
  filter: grayscale(0.6);
  cursor: not-allowed !important;
}
.feature-locked::after {
  content: '🔒';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 13px;
  pointer-events: none;
  z-index: 2;
  filter: none;
}
.feature-locked > * { pointer-events: none !important; }
.feature-locked.nav-item::after { top: 50%; right: 14px; transform: translateY(-50%); font-size: 12px; }
.feature-locked.settings-tab::after { top: 50%; right: 8px; transform: translateY(-50%); font-size: 11px; }
.feature-lock-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #FFF1E0; color: #92400E;
  border: 1px solid #FFD4A3; border-radius: 10px;
  padding: 2px 7px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-left: 8px;
}

/* Settings-Sub-Tab: deutlicher Active-Hinweis (Pakajo-Akzent) */ 
.settings-tab > a {
  display: block;
  padding: 0px;
  font-size: 14px;
  line-height: 1;
  color: var(--pakajo_text_color);
  background: transparent;
  font-weight: 600;
}
.settings-tab > a:hover {
  color: var(--pakajo_text_color);
  background: transparent;
}
.settings-tab.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(239,123,26,0.25);
}
.settings-tab.is-active > a {
  color: #fff;
  background: transparent;
}
.settings-tab.is-active:hover { background: var(--accent-dark, #D86A0F); }
.settings-tab:hover { background: var(--gray-100); }
.settings-tab.is-active:hover { background: var(--accent-dark, #D86A0F); color: #fff; }

.carrier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
}
.carrier-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.carrier-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.carrier-card .carrier-info { flex: 1; }
.carrier-card .carrier-actions-row { margin-top: 10px; display: flex; gap: 8px; align-items: center; }

/* Express-Zustellung als per-Carrier-Option (statt globalem Checkbox) */
.carrier-extras {
  margin-top: 10px;
  padding: 8px 10px;
  background: #fff8f1;
  border: 1px solid #f4d8c5;
  border-radius: 8px;
  font-size: 12px;
}
.carrier-express-toggle {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; color: var(--gray-700);
  font-weight: 500;
}
.carrier-express-toggle input { margin: 0; cursor: pointer; accent-color: #EF7B1A; }
.carrier-express-toggle .express-surcharge {
  margin-left: auto; font-weight: 700; color: #c95224;
}
.carrier-card.is-express {
  border: 2px solid #EF7B1A;
  box-shadow: 0 0 0 4px rgba(239,123,26,0.10);
}
.carrier-card.is-express .carrier-extras {
  background: linear-gradient(135deg, #fff2e0 0%, #fff8f1 60%);
  border-color: #EF7B1A;
}
.carrier-card.is-express .carrier-extras::before {
  content: "⚡ Express aktiv — Preis enthält Zuschlag";
  display: block; font-size: 10.5px; font-weight: 700; color: #c95224;
  margin-bottom: 4px; letter-spacing: 0.02em;
}

/* Compare-Checkbox je Carrier-Karte (max 3 Auswahlen — JS controlled) — rechts unter MwSt */
.carrier-compare-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--gray-600);
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 3px 8px 3px 6px;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  margin-top: 6px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.15s;
}
.carrier-compare-toggle:hover { border-color: #0C97AF; color: #0C97AF; }
.carrier-compare-toggle input { margin: 0; cursor: pointer; accent-color: #0C97AF; }
.carrier-card.is-compare-selected {
  border: 2px solid #0C97AF !important;
  box-shadow: 0 0 0 3px rgba(12,151,175,0.10);
}
.carrier-card.is-compare-selected .carrier-compare-toggle {
  background: #0C97AF; color: #fff; border-color: #0C97AF;
  font-weight: 700;
}
.carrier-card.best {
  border: 2px solid var(--accent);
  background: linear-gradient(135deg, #FFF8E7 0%, #fff 60%);
}
.carrier-card.best::before {
  content: var(--pakajo-best-price-label, "✨ Pakajo Bester Preis");
  position: absolute; top: -10px; left: 16px;
  background: var(--accent);
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}
/* Carrier-Karte ist über Box-Preset vor-ausgewählt — visuell hervorheben */
.carrier-card.is-preselected {
  border: 2px solid var(--orange, #EF7B1A);
  box-shadow: 0 0 0 4px rgba(239,123,26,0.12), 0 8px 18px rgba(239,123,26,0.16);
  position: relative;
}
.carrier-card.is-preselected::after {
  content: "✓ vorausgewählt aus Box-Preset";
  position: absolute; top: -10px; right: 16px;
  background: #EF7B1A; color: #fff;
  padding: 3px 10px; border-radius: 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
}
.carrier-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.carrier-logo {
  height: 40px;
  background: var(--gray-100);
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex; align-items: center;
  font-weight: 700; font-size: 14px;
}
.carrier-price { font-size: 24px; font-weight: 800; color: var(--gray-900); letter-spacing: -0.02em; }
.carrier-price small { font-size: 11px; font-weight: 500; color: var(--gray-500); }
.carrier-info { font-size: 12px; color: var(--gray-600); line-height: 1.6; }
.carrier-info strong { color: var(--gray-800); }
.carrier-tags { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }

/* ============== PERFORMANCE SCREEN ============== */
.perf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.perf-charts { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 24px; }
@media (max-width: 1024px) { .perf-charts { grid-template-columns: 1fr; } }

.savings-list { padding: 0; }
.savings-list .item {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.savings-list .item:hover { background: var(--gray-50); }
.savings-list .item:last-child { border-bottom: none; }
.savings-list .rank {
  width: 28px; height: 28px;
  background: var(--accent-light);
  color: var(--accent-dark);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 13px;
}
.savings-list .text { font-size: 13px; line-height: 1.4; }
.savings-list .text strong { color: var(--gray-900); }
.savings-list .amount {
  text-align: right; font-weight: 700; color: var(--success);
  font-size: 14px;
}
.savings-list .amount small { font-size: 10px; font-weight: 500; color: var(--gray-500); display: block; }

/* ============== GLOCAL MAP SCREEN ============== */
.map-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.map-container {
  background: linear-gradient(180deg, #1A2332 0%, #0F4C81 100%);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative; overflow: hidden;
  height: 480px;
  display: grid; place-items: center;
  color: #fff;
}
.world-map { width: 100%; max-width: 940px; height: auto; }
.world-map path { fill: #33455f; stroke: #1A2332; stroke-width: 0.3; transition: fill 0.2s; }
.world-map path.glocal { fill: var(--success); cursor: pointer; }
.world-map path.partial { fill: var(--warning); cursor: pointer; }
.world-map path.coming { fill: rgba(245,158,11,0.45); stroke: var(--warning); stroke-dasharray: 1.5,1.5; cursor: pointer; }
.world-map path.glocal:hover, .world-map path.partial:hover, .world-map path.coming:hover { fill: var(--accent); }
.map-legend {
  position: absolute; bottom: 20px; left: 20px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 12px 16px;
  backdrop-filter: blur(10px);
  font-size: 12px;
  display: flex; gap: 18px;
}
.map-legend .leg-item { display: flex; align-items: center; gap: 8px; }
.map-legend .leg-dot { width: 12px; height: 12px; border-radius: 3px; }

.country-list { background: var(--card); border-radius: var(--radius-md); border: 1px solid var(--border); }
.country-list .ci {
  display: grid; grid-template-columns: 36px 1fr auto auto; gap: 14px; align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.country-list .ci:last-child { border-bottom: none; }
.country-list .ci .flag { font-size: 22px; }
.country-list .ci .name { font-weight: 600; font-size: 13px; }
.country-list .ci .meta { font-size: 11px; color: var(--gray-500); }
.country-list .ci .carriers { font-size: 12px; color: var(--gray-700); font-weight: 500; }

/* ============== TRACKING SCREEN ============== */
.tracking-banner {
  background: linear-gradient(135deg, var(--primary) 0%, #1E5BAC 100%);
  color: #fff;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.tracking-banner .num { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 24px; font-weight: 700; letter-spacing: 0.02em; }
.tracking-banner .sub { font-size: 13px; opacity: 0.85; margin-top: 4px; }
.tracking-banner .pill {
  background: var(--success);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
}
.timeline { padding: 0; }
.timeline .ev {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.timeline .ev::after {
  content: ""; position: absolute;
  left: 43px; top: 50px; bottom: -5px;
  width: 2px; background: var(--border);
}
.timeline .ev:last-child::after { display: none; }
.timeline .ev .icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  z-index: 1; position: relative;
  background: var(--gray-100); color: var(--gray-500);
}
.timeline .ev.pakajo .icon { background: var(--accent-light); color: var(--accent-dark); }
.timeline .ev.delivered .icon { background: var(--success-light); color: var(--success); }
.timeline .ev.transit .icon { background: var(--info-light); color: var(--info); }
.timeline .ev .icon svg { width: 16px; height: 16px; }
.timeline .ev .text { font-size: 13.5px; line-height: 1.5; }
.timeline .ev .text strong { color: var(--gray-900); font-weight: 600; }
.timeline .ev .text .src { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
.timeline .ev .when { font-size: 12px; color: var(--gray-500); white-space: nowrap; text-align: right; font-weight: 500; }
.timeline .ev .when strong { color: var(--gray-700); display: block; font-weight: 600; }

/* ============== BULK SCREEN ============== */
.stepper {
  display: flex; align-items: center;
  background: #fff; border-radius: var(--radius-md);
  padding: 18px 24px;
  border: 1px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
}
.step { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.step .num {
  width: 32px; height: 32px;
  background: var(--gray-200); color: var(--gray-500);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.step.active .num { background: var(--primary); color: #fff; }
.step.done .num { background: var(--success); color: #fff; }
.step .lbl { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.step.active .lbl { color: var(--gray-900); }
.step .arrow { color: var(--gray-300); font-size: 18px; padding: 0 8px; }

.bulk-progress { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; }
.progress-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-bottom: 16px; }
.progress-row .pct-label { font-weight: 700; color: var(--primary); font-size: 18px; }
.progress-track {
  height: 14px;
  background: var(--gray-100);
  border-radius: 7px;
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  border-radius: 7px;
  transition: width 0.5s;
  position: relative;
}
.progress-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.progress-controls { display: flex; gap: 8px; }
.progress-controls .btn { padding: 8px 14px; }
.progress-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 20px; }
.progress-stat {
  background: var(--gray-50);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.progress-stat .val { font-size: 22px; font-weight: 700; color: var(--gray-900); }
.progress-stat .lbl { font-size: 11px; color: var(--gray-500); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.progress-stat.error .val { color: var(--danger); }
.progress-stat.success .val { color: var(--success); }

/* ============== SETTINGS ============== */
.settings-grid { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }
.tenant-list { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); }
.tenant-list .ti {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  cursor: pointer; transition: all 0.15s;
}
.tenant-list .ti.selected { background: var(--primary-light); border-left: 3px solid var(--primary); padding-left: 13px; }
.tenant-list .ti:hover { background: var(--gray-50); }
.tenant-list .ti .name { font-size: 13px; font-weight: 600; color: var(--gray-900); }
.tenant-list .ti .id { font-size: 11px; color: var(--gray-500); }

/* ============== UTILITIES ============== */
.hstack { display: flex; align-items: center; gap: 12px; }
.vstack { display: flex; flex-direction: column; gap: 12px; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.text-sm { font-size: 12px; }
.text-muted { color: var(--gray-500); }
.text-bold { font-weight: 700; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

/* ============== SCROLLBAR ============== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ============== MODAL SYSTEM ============== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  animation: modalFadeIn 0.2s ease;
}
.modal-overlay.active { display: flex; }
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 720px; width: 100%;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: modalSlideUp 0.25s ease;
}
.modal.modal-md { max-width: 880px; }
.modal.modal-lg { max-width: 1080px; }
@keyframes modalSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.modal-header .head-title h2 { font-size: 18px; font-weight: 700; color: var(--gray-900); }
.modal-header .head-title .sub { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.modal-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--gray-500);
  transition: all 0.15s;
  border: 1px solid var(--border);
  background: #fff;
}
.modal-close:hover { background: var(--gray-100); color: var(--gray-900); }
.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--gray-50);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}

/* Preset cards */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.preset-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  position: relative;
}
.preset-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.preset-card.default::after {
  content: "⭐ Default"; position: absolute; top: 8px; right: 8px;
  background: var(--accent); color: #fff;
  font-size: 10px; padding: 2px 8px; border-radius: 8px; font-weight: 700;
}
.preset-card .preset-name { font-weight: 700; font-size: 14px; margin-bottom: 8px; color: var(--gray-900); }
.preset-card .preset-dims {
  font-size: 13px; color: var(--gray-700);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  background: var(--gray-50); padding: 4px 8px; border-radius: 4px; display: inline-block;
}
.preset-card .preset-weight { font-size: 11px; color: var(--gray-500); margin-top: 6px; }
.preset-card .preset-note { font-size: 11px; color: var(--accent-dark); margin-top: 4px; font-style: italic; }

/* Carrier info modal */
.carrier-info-section { margin-bottom: 18px; }
.carrier-info-section h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gray-500); font-weight: 700; margin-bottom: 8px;
}
.info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px;
}
.info-row {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed var(--border);
}
.info-row:last-child { border-bottom: none; }
.info-row .lbl { color: var(--gray-500); }
.info-row .val { font-weight: 600; color: var(--gray-800); }

/* Form section in modals */
.form-section {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
}
.form-section .form-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gray-700); font-weight: 700; margin-bottom: 10px;
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
.form-field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gray-500); font-weight: 600;
  margin-bottom: 4px;
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  font-family: inherit;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

.preset-shortcut {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px dashed var(--accent);
  border-radius: 7px;
  font-size: 12px; font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-light);
  cursor: pointer;
  transition: all 0.15s;
}
.preset-shortcut:hover { background: var(--accent); color: #fff; }
/* Mobile-Variante des Box-Preset-Buttons: nur in der Mobile-Ansicht sichtbar */
.preset-shortcut-mobile { display: none; }

/* Einstellungen: Mobile-Dropdown statt horizontalem Tab-Menü (Desktop: versteckt) */
.settings-tab-dropdown { display: none; }
/* Multi-Currency: Mobile-Dropdown statt Karten-Grid (Desktop: versteckt) */
.currency-picker-dropdown { display: none; }

/* Handelsrechnung-Generator: beim PDF-Export nur die Live-Vorschau drucken */
@media print {
  body.print-hr-preview > *:not(.app) { display: none !important; }
  body.print-hr-preview .app * { visibility: hidden; }
  body.print-hr-preview #hr-preview-doc,
  body.print-hr-preview #hr-preview-doc * { visibility: visible; }
  body.print-hr-preview #hr-preview-doc {
    position: fixed; left: 0; top: 0;
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    padding: 15mm 12mm !important;
  }
}

/* ============== MOCKUP NOTICE ============== */
.mockup-banner {
  position: fixed; bottom: 16px; right: 16px;
  background: var(--gray-900); color: #fff;
  padding: 10px 16px;
  border-radius: 24px;
  font-size: 12px; font-weight: 600;
  box-shadow: var(--shadow-xl);
  display: flex; align-items: center; gap: 8px;
  z-index: 999;
}
.mockup-banner .pulse {
  width: 8px; height: 8px; background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ============================================================================
   KI-Adressprüfung — Mini-Chatbot im Einzelversand-Form
   ============================================================================ */
.ai-check {
    margin-top: 10px;
    border: 1px solid #f4d8c5;
    background: linear-gradient(135deg, #fff8f1 0%, #fff 80%);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.ai-check:hover { border-color: #efbd8e; }

.ai-check-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    cursor: pointer;
    gap: 10px;
}
.ai-check-title {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
}
.ai-check-bot {
    font-size: 1.05rem;
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--accent), #c95224);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.ai-check-title strong { display: block; font-size: 0.82rem; color: var(--gray-900); line-height: 1.2; }
.ai-check-title small {
    color: var(--gray-600); font-size: 0.7rem; line-height: 1.25; display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.ai-check .btn-ai { padding: 5px 10px; font-size: 0.75rem; }
.ai-check .ai-key-pill { font-size: 0.7rem; padding: 2px 8px; }
.ai-check-body { padding: 0 12px 12px; }

.btn-ai {
    background: linear-gradient(135deg, var(--accent), #c95224);
    color: #fff;
    border: 0;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-ai:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239,123,26,0.35); }

.ai-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ai-key-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
    transition: all 0.12s ease;
    white-space: nowrap;
}
.ai-key-pill:hover { border-color: var(--accent); color: var(--accent-dark, #c95224); }
.ai-key-pill.is-live {
    background: rgba(12,151,175,0.12);
    border-color: rgba(12,151,175,0.4);
    color: var(--success, #0c97af);
}
.ai-reset-btn {
    background: #fff;
    border: 1px solid var(--gray-300, #d1d5db);
    color: var(--gray-700);
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
    line-height: 1;
}
.ai-reset-btn:hover {
    border-color: var(--accent);
    color: var(--accent-dark, #c95224);
    background: #fff8f1;
}

/* ============================================================================
   Scan-Overlay — Fortschritts-Anzeige während Vision-API läuft
   ============================================================================ */
.scan-overlay { display: none; margin: 0 0 18px; }
.scan-overlay.is-visible { display: block; animation: scanFadeIn 0.2s ease; }
@keyframes scanFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.scan-overlay-card {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #fff8f1 0%, #fff 80%);
    border: 1.5px solid #EF7B1A;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(239,123,26,0.18);
}
.scan-spinner {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(239,123,26,0.18);
    border-top-color: #EF7B1A;
    animation: scanSpin 0.9s linear infinite;
    flex-shrink: 0;
}
@keyframes scanSpin { to { transform: rotate(360deg); } }
.scan-overlay-text { flex: 1; min-width: 0; }
.scan-overlay-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--gray-900);
    margin-bottom: 2px;
}
.scan-overlay-status {
    font-size: 12px;
    color: #c95224;
    margin-bottom: 8px;
}
.scan-progress-bar {
    height: 4px;
    background: rgba(239,123,26,0.15);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.scan-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #EF7B1A, #d96a10);
    border-radius: 4px;
    transition: width 0.4s ease;
}
.scan-overlay-steps {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--gray-500);
    flex-wrap: wrap;
}
.scan-step { position: relative; padding-left: 14px; }
.scan-step::before {
    content: '\25CB'; /* ○ */
    position: absolute; left: 0; top: -1px;
}
.scan-step.is-done { color: var(--success, #0c97af); }
.scan-step.is-done::before { content: '\2713'; font-weight: 700; }
.scan-step.is-active { color: #c95224; font-weight: 700; }
.scan-step.is-active::before { content: '\25CF'; animation: scanPulse 1s infinite; }
@keyframes scanPulse { 50% { opacity: 0.4; } }

/* ============================================================================
   Live-Adressvalidierung — kleine Icons rechts in jedem Empfänger-Feld
   ============================================================================ */
.form-field { position: relative; }
.form-field .field-status {
    position: absolute;
    right: 10px;
    bottom: 11px;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 700;
    pointer-events: auto;
    cursor: help;
    transition: all 0.15s ease;
}
.form-field.has-status-ok    .field-status { display: flex; background: rgba(12,151,175,0.18); color: var(--success, #0c97af); }
.form-field.has-status-warn  .field-status { display: flex; background: rgba(239,123,26,0.18); color: var(--accent-dark, #c95224); }
.form-field.has-status-error .field-status { display: flex; background: rgba(113,18,10,0.14); color: var(--danger, #71120a); }
.form-field.has-status-ok    input { padding-right: 34px; border-color: rgba(12,151,175,0.3); }
.form-field.has-status-warn  input { padding-right: 34px; border-color: rgba(239,123,26,0.45); }
.form-field.has-status-error input { padding-right: 34px; border-color: rgba(113,18,10,0.4); }

/* Hint-Tooltip beim Hovern */
.form-field .field-status[data-hint]:hover::after {
    content: attr(data-hint);
    position: absolute;
    right: 0;
    top: -32px;
    background: var(--gray-900);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.74rem;
    white-space: nowrap;
    z-index: 100;
    font-weight: 500;
}
.form-field .field-status[data-hint]:hover::before {
    content: '';
    position: absolute;
    right: 6px;
    top: -8px;
    border: 4px solid transparent;
    border-top-color: var(--gray-900);
    z-index: 100;
}

/* ============================================================================
   Bot-Korrektur-Karte (vorgeschlagene Adresse + Übernehmen-Button)
   ============================================================================ */
.addr-correction {
    margin-top: 12px;
    background: #fff;
    border: 1px solid var(--accent);
    border-radius: 10px;
    overflow: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.addr-correction.is-dismissed { opacity: 0.4; }
.addr-correction.is-applied {
    border-color: var(--success, #0c97af);
    background: linear-gradient(180deg, rgba(12,151,175,0.06) 0%, #fff 100%);
}
.addr-correction-head {
    background: linear-gradient(135deg, var(--accent), #c95224);
    color: #fff;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 0.84rem;
}
.addr-correction.is-applied .addr-correction-head {
    background: var(--success, #0c97af);
}
.addr-diff-list {
    padding: 8px 14px;
}
.addr-diff-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    padding: 5px 0;
    font-size: 0.85rem;
    align-items: baseline;
}
.addr-diff-row + .addr-diff-row { border-top: 1px dashed var(--gray-100); }
.addr-key {
    font-weight: 600;
    color: var(--gray-600);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.addr-old {
    color: var(--gray-500);
    text-decoration: line-through;
    margin-right: 4px;
}
.addr-new { color: var(--accent-dark, #c95224); }
.addr-correction-actions {
    padding: 8px 14px 12px;
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--gray-100);
    background: #fafbfc;
}

/* Pulse beim automatischen Befüllen eines Form-Felds */
.form-field.addr-corrected {
    animation: addr-pulse 2.4s ease;
}
.form-field.addr-corrected input,
.form-field.addr-corrected select {
    animation: addr-pulse-input 2.4s ease;
}
@keyframes addr-pulse {
    0%, 30% { box-shadow: 0 0 0 0 rgba(239,123,26,0.6); border-radius: 6px; }
    100%    { box-shadow: 0 0 0 8px rgba(239,123,26,0); }
}
@keyframes addr-pulse-input {
    0%   { background: #fff; }
    30%  { background: #fff8f1; border-color: var(--accent); }
    100% { background: #fff; }
}

.ai-recommendation {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fff8f1;
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--gray-700);
}
.muted { color: var(--gray-500); }

/* Bulk-Finding: applied-State + Pulse */
.ai-finding.is-applied { background: rgba(12,151,175,0.06); border-left-color: var(--success, #0c97af); }
.ai-finding.addr-corrected { animation: addr-pulse 2.4s ease; }
.ai-finding-applied {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(12,151,175,0.14);
    color: var(--success, #0c97af);
}

/* Tarif-Vergleich (Low-Price-Finder im Modal) — reiche Carrier-Cards wie auf
   dem Einzelversand-Screen. Layout-Werte identisch zu .carrier-grid. */
.ship-rates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px;
}
/* Im Modal hat .carrier-card.best zusätzlich Padding-Top für den Banner */
#ship-rates .carrier-card { position: relative; }
#ship-rates .carrier-card.best { padding-top: 22px; }
.ship-rates-empty {
    grid-column: 1 / -1;
    padding: 20px;
    background: #fff8f1;
    border: 1px dashed #f4d8c5;
    border-radius: 8px;
    text-align: center;
    color: var(--gray-700);
    font-size: 0.86rem;
}
.ship-rate-card {
    background: #fff;
    border: 2px solid var(--gray-100);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.ship-rate-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.ship-rate-card.is-selected {
    border-color: var(--accent);
    background: linear-gradient(180deg, #fff8f1 0%, #fff 100%);
    box-shadow: 0 4px 12px rgba(239,123,26,0.18);
}
.ship-rate-card.is-best {
    border-color: var(--success, #0c97af);
    background: linear-gradient(180deg, rgba(12,151,175,0.06) 0%, #fff 100%);
}
.ship-rate-card.is-best.is-selected {
    border-color: var(--accent);
    background: linear-gradient(180deg, #fff8f1 0%, #fff 100%);
}
.ship-rate-name {
    font-weight: 700;
    font-size: 0.92rem;
    display: flex; align-items: center; gap: 6px;
}
.ship-rate-tag {
    font-size: 0.7rem;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-700);
    font-weight: 600;
}
.ship-rate-tag.glocal { background: rgba(12,151,175,0.14); color: var(--success, #0c97af); }
.ship-rate-tag.best   { background: rgba(239,123,26,0.16); color: var(--accent-dark, #c95224); }
.ship-rate-price {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1;
}
.ship-rate-meta { font-size: 0.74rem; color: var(--gray-500); display: flex; flex-wrap: wrap; gap: 8px; }
.ship-rate-check {
    position: absolute;
    top: 8px; right: 10px;
    color: var(--accent);
    font-size: 1.1rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.15s ease;
}
.ship-rate-card.is-selected .ship-rate-check { opacity: 1; transform: scale(1); }

/* Info-Button am unteren Rand jeder Rate-Card */
.ship-rate-actions {
    display: flex; justify-content: flex-end; align-items: center;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed var(--gray-200, #e8e8e8);
}
.ship-rate-info-btn {
    background: transparent;
    border: 1px solid var(--gray-300, #d1d5db);
    color: var(--gray-600);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}
.ship-rate-info-btn:hover {
    border-color: #0C97AF;
    color: #0C97AF;
    background: rgba(12,151,175,0.06);
}

/* CTA-Button im Footer disabled-State */
#ship-cta-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Streamlined-Mode: vereinfachter Sendungs-Flow aus dem Einzelversand-Screen */
.ship-streamlined-header { display: none; }
.modal-overlay.is-streamlined .ship-streamlined-header {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 18px;
}
.modal-overlay.is-streamlined #ship-paket-section,
.modal-overlay.is-streamlined #ship-carrier-section,
.modal-overlay.is-streamlined #ship-preset-shortcut { display: none !important; }
/* Versand-Optionen (inkl. Zusatzversicherung) bleibt im Streamlined-Modus SICHTBAR,
   damit der User die Versicherungs-Stufe ändern kann ohne den Carrier neu zu wählen. */
/* CN22-Zoll bleibt im streamlined Mode nur ausgeblendet, wenn der streamlined-Flow
   aus dem Einzelversand-Screen kommt (Carrier+Paket schon final) — im normalen
   "+ Neue Sendung"-Flow (Home Quick-Action) wird er für Non-EU eingeblendet. */
.modal-overlay.is-streamlined.from-einzelversand #ship-customs-section { display: none !important; }
/* Klick auf "🔄 Anderen Tarif wählen" macht die Carrier-Vergleichs-Sektion
   ad-hoc wieder sichtbar — overridet die streamlined-Hide-Regel. */
.modal-overlay.is-streamlined #ship-carrier-section.is-force-visible { display: block !important; }

/* Inline-Carrier-Picker im Modal: Adresse, KI-Check, CN22, Notiz, Output-Bar verbergen.
   Sichtbar bleiben nur Auftrag-Selector + Streamlined-Header + Carrier-Vergleichs-Liste. */
.modal-overlay.is-picking-carrier .form-section:not(#ship-carrier-section):not(.auftrag-selector),
.modal-overlay.is-picking-carrier #ship-customs-section,
.modal-overlay.is-picking-carrier #ship-output-options { display: none !important; }
.modal-overlay.is-picking-carrier #ship-carrier-section.is-force-visible {
    display: block !important;
    margin-top: 6px;
    border: 2px solid var(--orange, #EF7B1A);
    border-radius: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #fff8f1 0%, #fff 80%);
    box-shadow: 0 6px 20px rgba(239,123,26,0.10);
}
.modal-overlay.is-picking-carrier #ship-carrier-section.is-force-visible::before {
    content: "🔄 Wähle einen anderen Versanddienst — Klick auf eine Karte übernimmt sie";
    display: block;
    font-size: 12px; font-weight: 600; color: #EF7B1A;
    margin-bottom: 10px;
}

.modal-overlay.is-streamlined #ship-output-options { display: flex !important; }
.modal-overlay:not(.is-streamlined) #ship-output-options { display: none; }

/* ===========================================================================
 * Sprach-Switcher im Home-Dashboard
 * =========================================================================== */
.lang-bar {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 10px; margin-bottom: 12px;
}
.lang-bar-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--gray-500); font-weight: 700;
}
.lang-bar select {
    padding: 6px 10px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    background: #fff; font-size: 12.5px; font-weight: 600;
    color: var(--gray-800); cursor: pointer;
    min-width: 160px;
}
.lang-bar select:focus {
    outline: none; border-color: #0C97AF;
    box-shadow: 0 0 0 3px rgba(12,151,175,0.12);
}

/* ===========================================================================
 * AUFTRÄGE — Kompakte KPI-Header-Reihe (scoped auf Aufträge-Screen)
 * Horizontale Anordnung statt vertikal — deutlich flacher als Standard-KPI
 * =========================================================================== */
#screen-sendungen .kpi-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
#screen-sendungen .kpi {
    padding: 10px 14px;
    display: flex; align-items: center; gap: 12px;
    border-radius: 10px;
}
#screen-sendungen .kpi-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    margin-bottom: 0;
    flex-shrink: 0;
}
#screen-sendungen .kpi-icon svg { width: 16px; height: 16px; }
#screen-sendungen .kpi > div:not(.kpi-icon),
#screen-sendungen .kpi-label,
#screen-sendungen .kpi-value { display: block; }
#screen-sendungen .kpi-label {
    font-size: 10.5px; margin-bottom: 1px; line-height: 1.2;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
#screen-sendungen .kpi-value {
    font-size: 20px; line-height: 1.0;
}

/* ===========================================================================
 * AUFTRÄGE — Smart-Filter + Analytics-Dashboard
 * Eingesetzt im Versandaufträge-Screen (#screen-sendungen)
 * =========================================================================== */
.smart-filter {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}
.smart-filter-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; padding: 12px 18px;
    background: linear-gradient(135deg, #f8fafb 0%, #fff 60%);
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.smart-filter-head .sf-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 700; color: var(--gray-800);
}
.smart-filter-head .sf-title .sf-icon {
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(135deg, #0C97AF 0%, #3B6978 100%);
    color: #fff; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
}
.smart-filter-head .sf-actions {
    display: flex; align-items: center; gap: 10px;
}
.smart-filter-head .sf-toggle {
    background: transparent; border: 1px solid var(--gray-300);
    color: var(--gray-700); font-size: 12px; font-weight: 600;
    padding: 6px 12px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
}
.smart-filter-head .sf-toggle:hover { border-color: #0C97AF; color: #0C97AF; }
.smart-filter-head .sf-toggle::after {
    content: '▾'; font-size: 10px; transition: transform 0.15s;
}
.smart-filter.is-expanded .smart-filter-head .sf-toggle::after { transform: rotate(180deg); }

/* Aktive Filter-Pills — kollabiert komplett wenn keine Pills vorhanden,
   sodass kein Leerraum zwischen Header und Filter-Body entsteht */
.sf-active-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--gray-100);
    align-items: center;
}
.sf-active-pills:empty {
    display: none;
}
.sf-active-pills .pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 10px;
    background: #e0f2fe; color: #075985;
    border-radius: 14px; font-size: 11.5px; font-weight: 600;
    border: 1px solid #bae6fd;
}
.sf-active-pills .pill strong { font-weight: 700; }
.sf-active-pills .pill .pill-remove {
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(7,89,133,0.12); color: #075985;
    border: 0; cursor: pointer; font-size: 11px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.sf-active-pills .pill .pill-remove:hover { background: rgba(7,89,133,0.25); }
.sf-active-pills .pill.pill-process { background: #fff7e6; color: #92400e; border-color: #fde68a; }
.sf-active-pills .pill.pill-process .pill-remove { background: rgba(146,64,14,0.12); color: #92400e; }
.sf-active-pills .pill.pill-country { background: #fef3c7; color: #78350f; border-color: #fde68a; }
.sf-active-pills .pill.pill-country .pill-remove { background: rgba(120,53,15,0.12); color: #78350f; }
.sf-active-pills .pill.pill-search { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.sf-active-pills .pill.pill-search .pill-remove { background: rgba(4,120,87,0.12); color: #047857; }
.sf-clear-all {
    background: transparent; border: 0; color: var(--gray-500);
    font-size: 12px; font-weight: 600; cursor: pointer;
    padding: 6px 12px;
    text-decoration: underline; text-underline-offset: 2px;
    font-family: inherit;
}
.sf-clear-all:hover { color: #b91c1c; }
.sf-footer-right {
    display: flex; align-items: center; gap: 12px;
}

/* Filter-Body — Quick-Filter immer sichtbar, erweiterte nur on-expand */
.sf-body { padding: 14px 18px; }
.sf-row {
    display: grid; gap: 10px;
    grid-template-columns: repeat(6, 1fr);
    margin-bottom: 10px;
}
.sf-row.row-search {
    grid-template-columns: 2fr 2fr 2fr 1.4fr;
}
.sf-row .field { display: flex; flex-direction: column; gap: 4px; }
.sf-row .field label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
    font-weight: 700; color: var(--gray-500);
}
.sf-row .field input,
.sf-row .field select {
    width: 100%;
    font-size: 12.5px;
    font-family: inherit;
}
.sf-row .field input:focus,
.sf-row .field select:focus {
    outline: none; border-color: #0C97AF;
    box-shadow: 0 0 0 3px rgba(12,151,175,0.12);
}
.smart-filter .sf-expanded-row { display: none; }
.smart-filter.is-expanded .sf-expanded-row { display: grid; }

/* Prozessstatus-Checkboxen-Reihe */
.sf-process-row {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding-top: 6px;
}
.sf-process-row label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    background: #f9fafb; border: 1px solid var(--gray-200);
    border-radius: 16px; font-size: 11.5px; font-weight: 600;
    color: var(--gray-700); cursor: pointer;
    transition: all 0.12s;
}
.sf-process-row label:hover { border-color: #0C97AF; color: #0C97AF; }
.sf-process-row input { margin: 0; cursor: pointer; accent-color: #0C97AF; }
.sf-process-row label.is-active {
    background: #0C97AF; color: #fff; border-color: #0C97AF;
}
.sf-process-row label.is-active input { accent-color: #fff; }

/* Footer mit Apply-Button */
.sf-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 18px;
    background: #f9fafb;
    border-top: 1px solid var(--border);
    font-size: 12px; color: var(--gray-600);
}
.sf-footer .sf-result-count { font-weight: 600; color: var(--gray-800); }
.sf-footer .sf-result-count strong { color: #EF7B1A; }
.sf-footer .btn-apply {
    background: #0C97AF; color: #fff; border: 0;
    padding: 8px 18px; border-radius: 8px;
    font-weight: 700; font-size: 12.5px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.sf-footer .btn-apply:hover { filter: brightness(1.08); }

/* ===========================================================================
 * Analytics-Dashboard — kumulierte Werte, reagiert auf Filter
 * =========================================================================== */
.filter-analytics {
    display: grid; grid-template-columns: 1.4fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
    align-items: stretch;
}
.fa-status-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    align-self: start;
}
.fa-status-card {
    background: #fff; border: 1px solid var(--gray-200);
    border-radius: 8px; padding: 8px 10px 7px 12px;
    position: relative; overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label  icon"
      "value  icon"
      "bar    bar";
    column-gap: 8px;
    row-gap: 1px;
    align-items: center;
}
.fa-status-card::before {
    content: ''; position: absolute;
    top: 0; left: 0; bottom: 0; width: 3px;
    background: var(--fa-color, #94a3b8);
}
.fa-status-card.is-open    { --fa-color: #94a3b8; }
.fa-status-card.is-printed { --fa-color: #3B6978; }
.fa-status-card.is-transit { --fa-color: #EF7B1A; }
.fa-status-card.is-delivered { --fa-color: #047857; }
.fa-status-icon {
    grid-area: icon;
    width: 26px; height: 26px; border-radius: 6px;
    background: rgba(0,0,0,0.04);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    margin-bottom: 0;
    align-self: center;
}
.fa-status-label {
    grid-area: label;
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--gray-500); font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fa-status-value {
    grid-area: value;
    font-size: 18px; font-weight: 800; color: var(--gray-900);
    line-height: 1.0; letter-spacing: -0.01em;
}
.fa-status-percent {
    display: none; /* Prozent als Bar-Tooltip, spart Platz */
}
.fa-status-bar {
    grid-area: bar;
    height: 3px; background: var(--gray-100); border-radius: 2px;
    margin-top: 5px; overflow: hidden;
}
.fa-status-bar > div {
    height: 100%; background: var(--fa-color); border-radius: 2px;
    transition: width 0.5s ease;
}

/* Top-Länder + Versandkosten als rechte Spalte */
.fa-side {
    display: flex; flex-direction: column; gap: 10px;
}
.fa-card {
    background: #fff; border: 1px solid var(--gray-200);
    border-radius: 10px; padding: 12px 14px;
}
.fa-card-title {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--gray-500); font-weight: 700; margin-bottom: 8px;
    display: flex; justify-content: space-between; align-items: center;
}
.fa-card-title span.fa-count { color: var(--gray-700); font-weight: 600; font-size: 10.5px; }

/* Länder-Liste mit Mini-Bar */
.fa-country-list {
    display: flex; flex-direction: column; gap: 5px;
}
.fa-country-row {
    display: grid; grid-template-columns: 90px 1fr 50px;
    gap: 8px; align-items: center;
    font-size: 11.5px;
}
.fa-country-row .fa-flag { font-weight: 600; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-country-row .fa-bar {
    height: 7px; background: var(--gray-100); border-radius: 4px; overflow: hidden;
}
.fa-country-row .fa-bar > div {
    height: 100%;
    background: linear-gradient(90deg, #0C97AF 0%, #3B6978 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}
.fa-country-row .fa-count-num {
    text-align: right; font-weight: 700; color: var(--gray-900);
}

/* Linke Spalte (Status-Cards + Versandkosten gestapelt) — füllt Höhe der rechten Spalte */
.fa-left-col {
    display: flex; flex-direction: column; gap: 10px;
    height: 100%;
}

/* Versandkosten-Card — flex-grow füllt Resthöhe der linken Spalte
   damit der Container mit dem Bottom der Top-Länder-Card abschließt */
.fa-cost-card {
    background: linear-gradient(135deg, #fff8f1 0%, #fff 60%);
    border: 1px solid #f4d8c5;
    border-radius: 10px; padding: 14px 18px;
    flex: 1 1 auto;
    display: flex; align-items: center;
    min-height: 0;
}
.fa-cost-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; width: 100%;
}
.fa-cost-label {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: #c95224; font-weight: 700;
    margin-bottom: 4px;
}
.fa-cost-total {
    font-size: 32px; font-weight: 800; color: #c95224;
    line-height: 1.0; letter-spacing: -0.02em;
    white-space: nowrap;
}
.fa-cost-meta {
    font-size: 12px; color: var(--gray-600); line-height: 1.5;
}
.fa-cost-meta strong { color: var(--gray-800); }

@media (max-width: 1100px) {
    .filter-analytics { grid-template-columns: 1fr; }
    .fa-status-grid { grid-template-columns: repeat(2, 1fr); }
    .sf-row { grid-template-columns: repeat(3, 1fr); }
    .sf-row.row-search { grid-template-columns: repeat(2, 1fr); }
}

/* EU / Non-EU-Badge in der Versandnummer-Spalte der Sendungs-Ansicht */
.ship-eu-badge {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 10px;
    letter-spacing: 0.02em;
    line-height: 1.3;
}
.ship-eu-badge.is-eu { background: #e0f2fe; color: #075985; }
.ship-eu-badge.is-noneu { background: #fef3c7; color: #92400e; }

/* Single-Shipment-Mode im Auftrag-Detail: nur eine spezifische Sendung anzeigen */
.single-shipment-banner {
    background: linear-gradient(135deg, #0C97AF 0%, #3B6978 100%);
    color: #fff; padding: 12px 18px;
    border-radius: 10px; margin-bottom: 14px;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 10px; justify-content: space-between;
}
.single-shipment-banner strong { color: #FCD34D; }
.single-shipment-banner .banner-show-all {
    background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3);
    color: #fff; font-size: 12px; font-weight: 600;
    padding: 5px 12px; border-radius: 6px; cursor: pointer;
    font-family: inherit;
}
.single-shipment-banner .banner-show-all:hover { background: rgba(255,255,255,0.28); }
/* Im Single-Shipment-Mode: nur die erste Sendungs-Block-Zeile anzeigen,
   alle weiteren Sendungen aus dem Auftrag werden ausgeblendet.
   In Production würde das Backend pro Tracking-Nr eine spezifische Sendung liefern. */
#screen-auftrag-detail.is-single-shipment .shipment-block:not(:first-of-type) {
    display: none !important;
}

/* Versandt / Nicht versandt-Button — kompakter Status-Pill */
.ship-sent-btn {
    border: 0; padding: 3px 10px;
    border-radius: 12px;
    font-size: 10.5px; font-weight: 700;
    font-family: inherit; cursor: default;
    letter-spacing: 0.02em;
}
.ship-sent-btn.is-sent {
    background: #d1fae5; color: #065f46;
}
.ship-sent-btn.is-not-sent {
    background: #fee2e2; color: #991b1b;
}

/* Filter-Result-Banner: erscheint oberhalb der Auftrags-Liste sobald ein Filter aktiv ist */
.orders-result-banner {
    background: linear-gradient(135deg, #0C97AF 0%, #3B6978 100%);
    color: #fff; padding: 10px 16px;
    border-radius: 10px 10px 0 0;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
}
.orders-result-banner strong { font-weight: 800; color: #FCD34D; padding: 0 2px; }
.orders-result-banner .banner-icon { font-size: 16px; }
.orders-result-banner .banner-clear {
    margin-left: auto;
    background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3);
    color: #fff; font-size: 11.5px; font-weight: 600;
    padding: 4px 10px; border-radius: 6px; cursor: pointer;
}
.orders-result-banner .banner-clear:hover { background: rgba(255,255,255,0.28); }

/* Auftrag-Zeile mit Filter-Treffer hervorheben */
.auftrag-row.is-filter-match {
    background: linear-gradient(90deg, #fff8f1 0%, #fff 40%) !important;
    box-shadow: inset 3px 0 0 #EF7B1A;
}

/* Auftrag-Liste — 3-Spalten-Layout (Auftrag · Versandprodukte · Optionen-Buttons rechts)
   zuverlässig erzwingen, auch wenn andere Regeln Inline-Styles überschreiben würden. */
#screen-sendungen .auftrag-row {
    display: grid !important;
    grid-template-columns: 1.4fr 1.6fr 1.4fr !important;
    gap: 20px !important;
    align-items: start;
}
#screen-sendungen .auftrag-row > div:nth-child(3) {
    /* Optionen-Spalte: 6 Buttons in 3 Reihen × 2 Spalten, zuverlässig rechts */
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0; /* erlaubt Schrumpfen ohne Overflow */
}
#screen-sendungen .auftrag-row > div:nth-child(3) > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
}
@media (max-width: 900px) {
    /* Nur auf wirklich schmalen Viewports (Mobile/Tablet-Portrait) untereinander */
    #screen-sendungen .auftrag-row {
        grid-template-columns: 1fr !important;
    }
}

/* Match-Box mit getroffenen Sendungen — erscheint unter passender Auftrags-Zeile */
.match-box {
    background: #fff8f1;
    border-bottom: 1px solid #f4d8c5;
    border-left: 3px solid #EF7B1A;
    padding: 10px 20px 12px;
}
.match-box-head {
    font-size: 12px; color: #c95224; font-weight: 600;
    margin-bottom: 8px;
}
.match-box-head strong { font-weight: 800; }
.match-box-head em { font-style: italic; color: var(--gray-700); }
.match-box-list {
    display: flex; flex-direction: column; gap: 6px;
}
.match-row {
    display: grid;
    grid-template-columns: 1.2fr 2fr 1.6fr auto;
    gap: 12px; align-items: center;
    background: #fff; border: 1px solid #fde6cf;
    border-radius: 8px; padding: 8px 12px;
    font-size: 12.5px;
}
.match-row .match-name { font-weight: 700; color: var(--gray-900); }
.match-row .match-addr { color: var(--gray-700); }
.match-row .match-email { color: var(--gray-600); font-size: 11.5px; }
.match-row .match-open {
    background: #EF7B1A; color: #fff; border: 0;
    padding: 5px 11px; border-radius: 6px;
    font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.match-row .match-open:hover { filter: brightness(1.08); }
.match-hl {
    background: #FCD34D; color: var(--gray-900);
    padding: 1px 3px; border-radius: 3px; font-weight: 700;
}

/* Versandinfo-Karte — visuell als Pendant zur Carrier-Karte gestaltet:
   gleiche Größe, eigener farbiger Rand (Pakajo-Graublau statt Orange),
   schwebende Badge oben links analog "✨ Pakajo Bester Preis" */
.ship-info-card {
    background: linear-gradient(135deg, #f0f5f8 0%, #fff 60%);
    border: 2px solid #3B6978; /* Pakajo-Graublau */
    border-radius: var(--radius-md, 12px);
    padding: 18px;
    position: relative;
    margin-top: 14px;
}
.ship-info-card::before {
    content: "📦 Paket-Maße";
    position: absolute;
    top: -10px;
    left: 16px;
    background: #3B6978;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ship-info-title {
    display: none; /* ersetzt durch die schwebende Badge */
}
.ship-info-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px dashed var(--gray-100);
}
.ship-info-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ship-info-actions {
    display: flex; justify-content: flex-end; margin-top: 8px;
    padding-top: 8px; border-top: 1px dashed #c5d4d8;
}
.ship-info-change-link {
    font-size: 12px; color: #3B6978; text-decoration: none; font-weight: 600;
    transition: color 0.15s;
}
.ship-info-change-link:hover { color: #0C97AF; text-decoration: underline; }
/* Im Einzelversand-Flow ist das Format vom Screen vorgegeben → Link ausblenden */
.modal-overlay.is-streamlined.from-einzelversand .ship-info-actions { display: none; }
.ship-info-row span {
    color: var(--gray-600);
    display: inline-flex; align-items: center; gap: 6px;
}
.ship-info-row strong {
    color: var(--gray-900);
    font-size: 14px;
    letter-spacing: -0.01em;
}
.ship-info-row .info-icon {
    width: 18px; height: 18px;
    border-radius: 4px;
    background: rgba(59,105,120,0.1);
    color: #3B6978;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px;
}

/* Streamlined-Carrier-Karte: nutzt .carrier-card.best aus dem Low-Price-Finder,
   bringt nur Operator-Footer + Tarif-Ändern-Link ein */
.ship-carrier-selected { cursor: default; margin-top: 14px; }
.ship-carrier-selected:hover { transform: none; border-color: var(--accent); }
.ship-carrier-change-link {
    margin-left: auto;
    color: var(--accent-dark, #c95224);
    font-weight: 700;
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
}
.ship-carrier-change-link:hover { text-decoration: underline; }
.ship-carrier-actions {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px;
}
.ship-carrier-actions .btn { padding: 6px 14px; }

/* Label-Ausgabe — frei stehend unter der Notiz, KEIN dominanter Hintergrund-Container */
.ship-output-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 6px 0 0;
    color: inherit;
    box-shadow: none;
    margin-top: 8px;
    border-top: 1px dashed var(--gray-200, #e8e8e8);
}
.ship-output-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 2px;
    padding-top: 8px;
}
.ship-output-eyebrow {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 700; color: var(--gray-500, #6b7280);
}
.ship-output-title-h {
    color: var(--gray-900, #111827); font-size: 14px; margin: 1px 0 0; font-weight: 700;
    line-height: 1.2;
}
.ship-output-subtitle {
    font-size: 11px; color: var(--gray-600, #6b7280); margin-top: 1px;
    line-height: 1.3;
}
.ship-output-head-right { text-align: right; }
.ship-output-status-label {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--gray-500, #6b7280);
}
.ship-output-status-value {
    font-size: 20px; font-weight: 800; color: #EF7B1A; line-height: 1.0;
}
.ship-output-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.ship-output-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
    gap: 8px;
    position: relative;
    min-height: 38px;
    font-family: inherit;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.16);
}
.ship-output-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    filter: brightness(1.08);
}
.ship-output-btn:active { transform: translateY(0); filter: brightness(0.96); }
/* Farb-Varianten pro Button — ausschließlich Pakajo-CI-Farben aus dem Style Guide */
.ship-output-btn.out-btn-graphic {
    background: #3B6978; /* Pakajo Graublau */
    border: 1px solid #3B6978;
}
.ship-output-btn.out-btn-pdf {
    background: #EF7B1A; /* Pakajo Orange */
    border: 1px solid #EF7B1A;
}
.ship-output-btn.out-btn-number {
    background: #0C97AF; /* Pakajo Türkis */
    border: 1px solid #0C97AF;
}
.ship-output-btn.out-btn-print {
    background: #71120A; /* Pakajo Weinrot */
    border: 1px solid #71120A;
}
.ship-output-icon {
    font-size: 14px;
    line-height: 1;
    width: 26px; height: 26px;
    border-radius: 6px;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
    color: #fff; font-weight: 700;
}
.ship-output-text {
    display: flex; flex-direction: column; min-width: 0;
    line-height: 1.15;
}
.ship-output-title {
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.ship-output-desc {
    font-size: 9.5px;
    color: rgba(255,255,255,0.78);
    margin-top: 1px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dezenter Abbrechen-Button unter den Output-Buttons — auf dunklem Hintergrund */
.footer-cancel-row {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}
.btn-cancel-small {
    background: transparent;
    border: 0;
    color: var(--gray-500, #6b7280);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 14px;
    border-radius: 6px;
    transition: all 0.12s ease;
    font-family: inherit;
}
.btn-cancel-small:hover {
    color: var(--gray-800, #1f2937);
    background: var(--gray-100, #f3f4f6);
}

@media (max-width: 900px) {
    .ship-output-buttons { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .ship-output-desc { display: none; }
}

@media (max-width: 767px) {
    .modal-overlay.is-streamlined .ship-streamlined-header { grid-template-columns: 1fr; }
}

/* ============================================================================
   Sendungs-Modal: kompakte Form-Dichte
   Ziel: Empfänger-Adresse ohne Scrollen sichtbar — bleibt Platz für Zoll-Daten
   ============================================================================ */
#modal-new-shipment .form-section {
    margin-bottom: 12px;
    padding: 0;
}
#modal-new-shipment .form-section-title {
    font-size: 12px;
    margin-bottom: 6px;
    letter-spacing: 0.04em;
}
#modal-new-shipment .form-grid-2,
#modal-new-shipment .form-grid-3,
#modal-new-shipment .form-grid-4 {
    gap: 8px 10px;
}
#modal-new-shipment .form-grid-2.mb-4,
#modal-new-shipment .form-grid-3.mb-4,
#modal-new-shipment .form-grid-4.mb-4 {
    margin-bottom: 8px;
}
#modal-new-shipment .form-field label {
    font-size: 10.5px;
    margin-bottom: 3px;
    letter-spacing: 0.02em;
    color: var(--gray-600);
    text-transform: uppercase;
    font-weight: 700;
}
#modal-new-shipment .form-field input,
#modal-new-shipment .form-field select,
#modal-new-shipment .form-field textarea {
    padding: 7px 10px;
    font-size: 13px;
    min-height: 34px;
}
#modal-new-shipment .form-field.has-status-ok input,
#modal-new-shipment .form-field.has-status-warn input,
#modal-new-shipment .form-field.has-status-error input {
    padding-right: 30px;
}
#modal-new-shipment .form-field .field-status { bottom: 8px; }
#modal-new-shipment .auftrag-selector {
    padding: 8px 12px;
    margin-bottom: 12px;
}
#modal-new-shipment .auftrag-selector small { display: none; }
#modal-new-shipment .auftrag-selector .form-section-title { margin-bottom: 4px; }
#modal-new-shipment .hstack.mb-4 { margin-bottom: 8px; }

/* EORI-Zeile ist nur für Non-EU-Länder relevant — Default versteckt */
#modal-new-shipment .eori-row { display: none; }
#modal-new-shipment.show-eori .eori-row { display: grid; }

/* ===========================================================================
 * WIZARD-MODE: Step-by-Step-Workflow für "+ Neue Sendung" aus Einzelversand
 *
 * Sektionen sind anfangs versteckt und werden Schritt für Schritt eingeblendet.
 * Step 1: Auftrag-Selector
 * Step 2: + Paket-Daten (Versanddaten erfassen)
 * Step 3: + Versand-Optionen + Carrier-Vergleich
 * Step 4: + Empfänger-Adresse + KI-Adressprüfung + CN22 + Notiz + Output-Buttons
 * =========================================================================== */
.modal-overlay.is-wizard #ship-paket-section,
.modal-overlay.is-wizard #ship-carrier-section,
.modal-overlay.is-wizard #ship-empfaenger-section,
.modal-overlay.is-wizard #ship-customs-section,
.modal-overlay.is-wizard #ship-output-options,
.modal-overlay.is-wizard #ship-streamlined-header,
.modal-overlay.is-wizard #ship-modal-footer,
.modal-overlay.is-wizard #ship-notiz-section,
.modal-overlay.is-wizard #wstep-3-info-banner,
.modal-overlay.is-wizard .form-section:not(.auftrag-selector):not(#ship-empfaenger-section):not(#ship-paket-section):not(#ship-versand-options-section):not(#ship-carrier-section):not(#ship-customs-section):not(#ship-notiz-section):not(#wstep-3-info-banner) { display: none !important; }
.modal-overlay.is-wizard.wstep-4 #ship-notiz-section { display: block !important; }

/* Step 1: nur Mandant+Auftrag-Editor. In allen anderen Steps wird der Editor versteckt. */
.modal-overlay.is-wizard.wstep-2 .auftrag-selector,
.modal-overlay.is-wizard.wstep-3 .auftrag-selector,
.modal-overlay.is-wizard.wstep-4 .auftrag-selector { display: none !important; }

/* Step 2: Paket-Daten (Versanddaten erfassen) sichtbar — ohne Carrier-Liste */
.modal-overlay.is-wizard.wstep-2 #ship-paket-section { display: block !important; }

/* Step 3: Mandant+Auftrag Info-Banner + Carrier-Vergleich. Paket-Daten NICHT mehr,
   Mandant+Auftrag-Selector wird in Step 3 als reines Info-Banner dargestellt. */
.modal-overlay.is-wizard.wstep-3 #wstep-3-info-banner,
.modal-overlay.is-wizard.wstep-3 #ship-carrier-section { display: block !important; }

/* Step 4: Streamlined-Header oben (Versandinfo + gewählter Carrier) + Empfänger + Rest.
   Paket-/Versand-Option-/Carrier-Wahl-Sektionen werden hier ausgeblendet, weil die
   Auswahl finalisiert ist und stattdessen die Streamlined-Ansicht greift —
   identisch zur Einzelversand-Low-Price-Finder-Ansicht. */
.modal-overlay.is-wizard.wstep-4 #ship-streamlined-header {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
/* Step 4: Mandant + Auftrag als reine Inline-Info — kein Container, kein Border */
.modal-overlay.is-wizard.wstep-4 #wstep4-context-info { display: flex !important; }
.wstep-4-context-info {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 4px 2px 10px;
    font-size: 12px;
    color: var(--gray-600);
    border-bottom: 1px dashed var(--border);
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.wstep-4-ci-item { display: inline-flex; align-items: center; gap: 6px; }
.wstep-4-ci-label { color: var(--gray-500); }
.wstep-4-context-info strong { color: var(--gray-900); font-weight: 600; }
.wstep-4-ci-sep { color: var(--gray-400); }

/* Read-only Info-Look für Selects nach Carrier-Auswahl:
   - #ship-land  → in Empfänger-Adresse, nach Carrier-Wahl (alle Flows)
   - #ship-mandant → im Streamlined-Flow (Einzelversand), nach Carrier-Wahl
   Disabled-State soll nicht "kaputt" wirken, sondern wie eine Info-Anzeige. */
#modal-new-shipment #ship-land.is-readonly-info,
#modal-new-shipment #ship-mandant.is-readonly-info {
    background: #F0F7F9;
    border-color: #BFE0E8;
    color: var(--gray-700);
    cursor: not-allowed;
    opacity: 1;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230C97AF' stroke-width='2.5'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    padding-right: 36px;
}

/* Step 2 — Versanddaten erfassen: großzügigerer Abstand zwischen Label und Eingabefeld */
#modal-new-shipment #ship-paket-section .form-field { margin-bottom: 4px; }
#modal-new-shipment #ship-paket-section .form-field > label {
    display: block;
    margin-bottom: 8px !important;
    line-height: 1.25;
}
#modal-new-shipment #ship-paket-section .form-grid-4 { gap: 18px 16px !important; row-gap: 18px !important; }
#modal-new-shipment #ship-paket-section .form-grid-1,
#modal-new-shipment #ship-paket-section > .mb-3 { margin-bottom: 18px !important; }
.modal-overlay.is-wizard.wstep-4 #ship-empfaenger-section,
.modal-overlay.is-wizard.wstep-4 #ship-output-options,
.modal-overlay.is-wizard.wstep-4 .form-section:not(.auftrag-selector) { display: block !important; }
/* Mandant+Auftrag-Editor ist in Step 4 ausgeblendet — nur die Inline-Info
   (#wstep4-context-info) wird oben angezeigt. */
.modal-overlay.is-wizard.wstep-4 .auftrag-selector { display: none !important; }
/* Auf schmalen Modal-Layouts: untereinander */
@media (max-width: 720px) {
    .modal-overlay.is-wizard.wstep-4 #ship-streamlined-header { grid-template-columns: 1fr !important; }
}
.modal-overlay.is-wizard.wstep-4 #ship-paket-section,
.modal-overlay.is-wizard.wstep-4 #ship-versand-options-section,
.modal-overlay.is-wizard.wstep-4 #ship-carrier-section,
.modal-overlay.is-wizard.wstep-4 #ship-customs-section { display: none !important; }
.modal-overlay.is-wizard.wstep-4.show-customs #ship-customs-section { display: block !important; }

/* Step-Indicator (Progressbar oben im Modal-Body) */
.wizard-progress {
    display: none;
    align-items: center;
    gap: 0;
    padding: 12px 0 18px;
    margin: 0 0 6px;
}
.modal-overlay.is-wizard .wizard-progress { display: flex; }
.wizard-step {
    display: flex; align-items: center; gap: 8px;
    flex: 1; min-width: 0;
}
.wizard-step .step-num {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gray-200, #e5e7eb); color: var(--gray-500, #6b7280);
    font-weight: 700; font-size: 13px;
    flex-shrink: 0;
    transition: all 0.2s;
}
.wizard-step .step-label {
    font-size: 11.5px; font-weight: 600; color: var(--gray-500);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wizard-step.is-active .step-num {
    background: #EF7B1A; color: #fff;
    box-shadow: 0 0 0 4px rgba(239,123,26,0.18);
}
.wizard-step.is-active .step-label { color: var(--gray-900); }
.wizard-step.is-done .step-num { background: #047857; color: #fff; }
.wizard-step.is-done .step-num::before { content: '✓'; }
.wizard-step.is-done .step-num span { display: none; }
.wizard-step:not(:last-child)::after {
    content: ''; flex: 1; height: 2px;
    background: var(--gray-200, #e5e7eb);
    margin: 0 8px;
}
.wizard-step.is-done:not(:last-child)::after { background: #047857; }

/* Weiter-/Zurück-Buttons-Reihe am Ende des sichtbaren Step-Bereichs */
.wizard-nav {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 6px;
    margin-top: 10px;
    border-top: 1px dashed var(--gray-200, #e8e8e8);
    gap: 10px;
}
.modal-overlay.is-wizard .wizard-nav { display: flex; }
.modal-overlay.is-wizard.wstep-4 .wizard-nav-next { display: none; }
.wizard-nav .wizard-step-info {
    font-size: 12px; color: var(--gray-600); font-weight: 500;
}
.wizard-nav .wizard-step-info strong { color: var(--gray-900); }
.wizard-nav-back {
    background: transparent; border: 1px solid var(--gray-300);
    color: var(--gray-700);
    padding: 9px 16px; border-radius: 8px;
    font-weight: 600; font-size: 13px; cursor: pointer;
}
.wizard-nav-back:hover { background: var(--gray-100); }
.wizard-nav-back:disabled { opacity: 0.4; cursor: not-allowed; }
.wizard-nav-next {
    background: #EF7B1A; border: 0; color: #fff;
    padding: 9px 22px; border-radius: 8px;
    font-weight: 700; font-size: 13px; cursor: pointer;
    transition: all 0.15s;
}
.wizard-nav-next:hover { filter: brightness(1.08); transform: translateY(-1px); }
.wizard-nav-next:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* CN22-Zolldaten-Block — nur für Non-EU + nicht für Briefe/Drucksachen */
#modal-new-shipment .customs-section { display: none; padding: 0; overflow: hidden; }
#modal-new-shipment.show-customs .customs-section { display: block; }
#modal-new-shipment .customs-header {
    background: var(--turquoise, #0C97AF);
    color: #fff;
    padding: 10px 14px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
#modal-new-shipment .customs-header strong { font-size: 14px; font-weight: 700; }
#modal-new-shipment .customs-header .customs-sub { font-size: 12px; font-style: italic; opacity: 0.94; }
#modal-new-shipment .customs-content { padding: 12px 14px 14px; background: #fff; }
#modal-new-shipment .customs-category {
    display: flex; flex-wrap: wrap; gap: 22px; justify-content: center;
    padding: 4px 0 12px;
    font-size: 13px;
}
#modal-new-shipment .customs-category label { gap: 6px; cursor: pointer; align-items: center; }
#modal-new-shipment .customs-entry {
    background: #eaf3f6;
    border-radius: 6px;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
}
#modal-new-shipment .customs-row-top {
    display: grid;
    grid-template-columns: 2fr 1fr 0.8fr;
    gap: 10px;
}
#modal-new-shipment .customs-row-bottom {
    display: grid;
    grid-template-columns: 0.6fr 0.85fr 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}
#modal-new-shipment .customs-row-top .form-field label,
#modal-new-shipment .customs-row-bottom .form-field label {
    font-size: 11px; color: #4a5b62; margin-bottom: 3px;
}
#modal-new-shipment .customs-row-top input,
#modal-new-shipment .customs-row-top select,
#modal-new-shipment .customs-row-bottom input {
    padding: 6px 8px; font-size: 13px; height: 32px;
}
#modal-new-shipment .customs-row-bottom input[readonly] { background: #d8e3e6; color: #44595f; }
#modal-new-shipment .customs-input-with-icon { position: relative; }
#modal-new-shipment .customs-input-with-icon input { padding-right: 30px; }
#modal-new-shipment .customs-input-with-icon .customs-search-icon {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    cursor: pointer; opacity: 0.55; font-size: 13px;
}
#modal-new-shipment .customs-actions {
    display: flex; gap: 6px; align-items: center; padding-bottom: 0;
}
#modal-new-shipment .customs-btn-x,
#modal-new-shipment .customs-btn-add {
    width: 32px; height: 32px; border: 0; border-radius: 4px;
    color: #fff; font-weight: 700; cursor: pointer; font-size: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: filter 0.15s;
}
#modal-new-shipment .customs-btn-x { background: #EF7B1A; }
#modal-new-shipment .customs-btn-add { background: #0C97AF; }
#modal-new-shipment .customs-btn-x:hover,
#modal-new-shipment .customs-btn-add:hover { filter: brightness(1.08); }
#modal-new-shipment .customs-summary { margin-top: 14px; border-top: 1px dashed #b5cdd3; padding-top: 10px; }
#modal-new-shipment .customs-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 10px; }
#modal-new-shipment .customs-table th { font-weight: 600; color: #6b7d83; text-align: left; padding: 4px 6px; border-bottom: 1px dashed #c8d6da; font-size: 11px; }
#modal-new-shipment .customs-table td { padding: 5px 6px; color: #44595f; }
#modal-new-shipment .customs-table td.num,
#modal-new-shipment .customs-table th.num { text-align: right; }
#modal-new-shipment .customs-totals { display: flex; flex-direction: column; }
#modal-new-shipment .customs-tot-row {
    display: flex; justify-content: space-between;
    padding: 6px 10px; font-size: 12.5px;
}
#modal-new-shipment .customs-tot-row strong { font-weight: 700; }
#modal-new-shipment .customs-tot-row.customs-tot-emph { background: #d2dadc; font-weight: 700; }
#modal-new-shipment .customs-tot-row.customs-tot-grand { background: #8a989c; color: #fff; font-weight: 700; }

/* Auftrag-Selector im Sendungs-Modal — als Pflicht hervorgehoben */
.auftrag-selector {
    background: linear-gradient(135deg, #fff8f1 0%, #fff 60%);
    border: 1px solid #f4d8c5;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.auftrag-selector .form-section-title {
    color: var(--accent-dark, #c95224);
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}

/* Box-Preset-Karten (dynamisch) */
.preset-card-dynamic { position: relative; padding: 0; }
.preset-card-clickarea {
    width: 100%; padding: 16px 14px; background: transparent; border: 0; cursor: pointer;
    text-align: left; display: flex; flex-direction: column; gap: 4px;
    color: inherit; font-family: inherit;
}
.preset-card-dynamic:hover { border-color: var(--accent); }
.preset-carrier-line {
    margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
    font-size: 11px; color: var(--accent-dark, #c95224); font-weight: 600;
}
.preset-carrier-empty { color: var(--gray-500); font-weight: 400; font-style: italic; }
.preset-actions-dynamic {
    position: absolute; top: 8px; right: 8px; display: flex; gap: 4px;
    opacity: 0; transition: opacity 0.15s ease;
}
.preset-card-dynamic:hover .preset-actions-dynamic { opacity: 1; }
.preset-btn-icon {
    width: 24px; height: 24px; border: 1px solid var(--gray-300); border-radius: 50%;
    background: #fff; cursor: pointer; font-size: 12px; line-height: 1;
    display: flex; align-items: center; justify-content: center; color: var(--gray-700);
    padding: 0;
}
.preset-btn-icon:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.preset-btn-delete:hover { background: var(--danger, #71120A); border-color: var(--danger, #71120A); }

/* Adressbuch-Picker */
.adrbook-empty {
    padding: 32px 16px; text-align: center; color: var(--gray-500); font-size: 13px;
    background: var(--gray-50, #fafbfc); border: 1px dashed var(--gray-300); border-radius: 10px;
}
.adrbook-empty strong { color: var(--gray-700); }
.adrbook-item {
    position: relative; padding: 12px 44px 12px 14px;
    border: 1px solid var(--border); border-radius: 8px;
    margin-bottom: 8px; cursor: pointer; background: #fff;
    transition: all 0.12s ease;
}
.adrbook-item:hover { border-color: var(--accent); background: #fff8f1; transform: translateX(2px); }
.adrbook-item-name { font-weight: 700; font-size: 14px; color: var(--gray-900); }
.adrbook-firma { font-size: 12px; color: var(--gray-700); margin-top: 1px; }
.adrbook-item-addr { font-size: 12px; color: var(--gray-700); margin-top: 4px; }
.adrbook-item-meta { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
.adrbook-item { padding-right: 80px; }
.adrbook-item-edit, .adrbook-item-delete {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: transparent; border: 1px solid var(--gray-300); border-radius: 50%;
    width: 26px; height: 26px; cursor: pointer; color: var(--gray-500);
    font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
    padding: 0;
}
.adrbook-item-edit { right: 44px; }
.adrbook-item-delete { right: 10px; font-size: 16px; }
.adrbook-item-edit:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.adrbook-item-delete:hover { background: var(--danger, #71120A); color: #fff; border-color: var(--danger, #71120A); }

/* Toast für Carrier-Auswahl */
.pakajo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--gray-900);
    color: #fff;
    padding: 12px 22px;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    font-size: 0.88rem;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.pakajo-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.ai-check-body {
    padding: 0 18px 18px;
    border-top: 1px dashed #f4d8c5;
}

.ai-chat {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    margin-top: 14px;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--gray-100);
}
.ai-msg {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.ai-msg:last-child { margin-bottom: 0; }
.ai-msg-user { flex-direction: row-reverse; }
.ai-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #c95224);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.ai-msg-user .ai-avatar {
    background: var(--gray-200);
    color: var(--gray-700);
}
.ai-bubble {
    background: #fff8f1;
    border: 1px solid #f4d8c5;
    border-radius: 10px;
    padding: 10px 14px;
    max-width: 80%;
    font-size: 0.88rem;
    line-height: 1.5;
}
.ai-msg-user .ai-bubble {
    background: var(--gray-100);
    border-color: var(--gray-200);
}
.ai-bubble strong {
    display: block;
    font-size: 0.74rem;
    color: var(--accent-dark, #c95224);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ai-msg-user .ai-bubble strong { color: var(--gray-700); }
.ai-bubble p { margin: 0; }
.ai-bubble p + p { margin-top: 8px; }
.ai-bubble .ai-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    margin: 4px 4px 0 0;
}
.ai-bubble .ai-status.ok      { background: rgba(12,151,175,0.14); color: var(--success, #0c97af); }
.ai-bubble .ai-status.warn    { background: rgba(239,123,26,0.14); color: var(--accent); }
.ai-bubble .ai-status.error   { background: rgba(113,18,10,0.10); color: var(--danger, #71120a); }

.ai-typing { font-style: italic; color: var(--gray-500); font-size: 0.82rem; }
.ai-typing::after {
    content: '';
    display: inline-block;
    animation: ai-dots 1.4s infinite;
}
@keyframes ai-dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

.ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 10px;
}
.ai-chip {
    background: #fff;
    border: 1px solid #f4d8c5;
    color: var(--gray-700);
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.12s ease;
}
.ai-chip:hover {
    border-color: var(--accent);
    color: var(--accent-dark, #c95224);
    background: #fff8f1;
}

.ai-input-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.ai-input-row input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.88rem;
    outline: none;
}
.ai-input-row input:focus { border-color: var(--accent); }

.ai-disclaimer {
    margin-top: 10px;
    font-size: 0.74rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================================
   KI-Adressprüfung (Bulk-Variante im Massenversand)
   ============================================================================ */
.ai-bulk {
    border: 1px solid #f4d8c5;
    background: linear-gradient(135deg, #fff8f1 0%, #fff 60%);
    overflow: hidden;
}
.ai-bulk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    gap: 12px;
}
.ai-bulk-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.ai-bulk-title strong { font-size: 1rem; color: var(--gray-900); display: block; }
.ai-bulk-title small  { color: var(--gray-600); font-size: 0.82rem; line-height: 1.4; display: block; margin-top: 2px; }

.ai-bulk-body {
    padding: 0 20px 20px;
    border-top: 1px dashed #f4d8c5;
}

.ai-bulk-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 16px 0;
}
.ai-bulk-stat {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ai-bulk-stat .big { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.ai-bulk-stat .lbl { font-size: 0.78rem; color: var(--gray-600); }
.ai-bulk-stat.ok    .big { color: var(--success, #0c97af); }
.ai-bulk-stat.warn  .big { color: var(--accent); }
.ai-bulk-stat.error .big { color: var(--danger, #71120a); }
.ai-bulk-stat.info  .big { color: var(--gray-900); font-size: 1.35rem; }

.ai-bulk-list {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
    max-height: 480px;
    overflow-y: auto;
}
.ai-finding {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
    border-left: 3px solid transparent;
}
.ai-finding:last-child { border-bottom: 0; }
.ai-finding.warn  { border-left-color: var(--accent); background: #fff8f1; }
.ai-finding.error { border-left-color: var(--danger, #71120a); background: #fdf3f1; }
.ai-finding.ok    { border-left-color: var(--success, #0c97af); }
.ai-finding-info strong { display: block; font-size: 0.92rem; color: var(--gray-900); margin-bottom: 2px; }
.ai-finding-info small  { color: var(--gray-700); font-size: 0.82rem; line-height: 1.45; display: block; }
.ai-finding-info .ai-suggestion {
    display: block;
    margin-top: 6px;
    padding: 6px 10px;
    background: #fff;
    border: 1px dashed #f4d8c5;
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--accent-dark, #c95224);
}
.ai-finding-info .ai-suggestion strong { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-dark, #c95224); }
.ai-finding-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.ai-finding-actions .btn { font-size: 0.78rem; padding: 6px 10px; }

.ai-bulk-footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 6px;
}
.ai-bulk-footer .btn { white-space: nowrap; }

.ai-bulk-chat {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #f4d8c5;
}
.settings-tab-dropdown {
  display: none;
}
/* Einstellungen: Mobile (≤768px) → Dropdown statt horizontaler Menüleiste.
   Desktop (>768px) zeigt weiterhin die Menüleiste, das Dropdown bleibt versteckt. */
@media (max-width: 768px) {
    .tabs.settings-tabs-bar { display: none !important; }
    .settings-tab-dropdown {
      display: block;
    }
    .settings-tab-dropdown {
        display: block;
        margin-bottom: 0px!important;
        width: 100%;
        min-height: 46px;
        padding: 10px 12px;
        margin-bottom: 16px!important;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--gray-900);
    }

    /* ===== Einstellungen → Integrationen ===== */
    /* Mandanten-Chips: je 2 nebeneinander, gleiche Größe ("Alle" volle Breite) */
    #integrations-mandant-filter {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    #integrations-mandant-filter .int-mandant-chip {
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11.5px !important;
        padding: 6px 8px !important;
        white-space: normal;
        text-align: center;
        box-sizing: border-box;
    }
    #integrations-mandant-filter .int-mandant-chip[data-mid="all"] { grid-column: 1 / -1; }
    /* Filter-Suchfeld volle Breite */
    #integrations-search { width: 100% !important; min-height: 44px; box-sizing: border-box; }
    .settings-content[data-tab="integrations"] .hstack.gap-2 { width: 100%; }

    /* ===== Einstellungen → Adressbuch ===== */
    /* Suche, Mandanten- und Länder-Filter: gleiche Größe, untereinander */
    .settings-content[data-tab="addressbook"] .card-body > .hstack {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .settings-content[data-tab="addressbook"] .card-body > .hstack input,
    .settings-content[data-tab="addressbook"] .card-body > .hstack select {
        width: 100%;
        min-height: 44px;
        font-size: 13px;
        box-sizing: border-box;
    }
    .settings-content[data-tab="addressbook"] .card-header { flex-wrap: wrap; gap: 8px; }

    /* ===== Einstellungen → Branding ===== */
    /* Alle Buttons gleiche Größe, volle Container-Breite (Farb-Swatches ausgenommen) */
    .settings-content[data-tab="branding"] .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        white-space: normal;
        box-sizing: border-box;
    }
    .settings-content[data-tab="branding"] .hstack.gap-2 {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    /* Farb-Auswahl bleibt eine kompakte Reihe */
    .settings-content[data-tab="branding"] .hstack.gap-2:has(.branding-color-btn) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    /* Verfügbare Branding-Features: Pills gleich lang, volle Containerbreite */
    #branding-feature-status {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    #branding-feature-status > strong { display: block; }
    #branding-feature-status .feat-pill {
        width: 100%;
        justify-content: center;
        min-height: 40px;
        box-sizing: border-box;
    }
    .settings-content[data-tab="branding"] > div[style*="justify-content:space-between"] {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* ===== Einstellungen → Pricing-Tool ===== */
    /* Quick-Prompt-Buttons (Aktuelle Marge, Preise optimieren …): einheitliche Größe */
    #pricing-chat-quickprompts {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px 14px;
    }
    #pricing-chat-quickprompts .pricing-chat-quick {
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal;
        line-height: 1.3;
        padding: 8px 12px !important;
        box-sizing: border-box;
    }
    /* Chat-Eingabezeile: Senden-Button bleibt greifbar */
    #pricing-chat-input { min-height: 44px; }

    /* ===== Einstellungen → Multi-Currency ===== */
    /* Anzeige-Währung: Dropdown statt 10er-Karten-Grid */
    #currency-picker-grid { display: none !important; }
    .currency-picker-dropdown {
        display: block;
        width: 100%;
        min-height: 46px;
        padding: 10px 12px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--gray-900);
        box-sizing: border-box;
    }

    /* ===== Einstellungen → Rechnungen ===== */
    /* Zeitraum-Banner: "36 Perioden"-Pill unterhalb des Textes */
    #billing-period-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    #billing-period-banner-pill {
        align-self: stretch;
        text-align: center;
        padding: 8px 12px;
    }
    /* Mandanten-Chips: je 2 nebeneinander, gleiche Größe */
    #billing-mandant-filter {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    #billing-mandant-filter > span { grid-column: 1 / -1; }
    #billing-mandant-filter .billing-mandant-chip {
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11.5px !important;
        padding: 6px 8px !important;
        white-space: normal;
        text-align: center;
        box-sizing: border-box;
    }
    #billing-mandant-filter .billing-mandant-chip[data-mid="all"] { grid-column: 1 / -1; }
}

@media (max-width: 767px) {

    /* ===== Handelsrechnung-Generator: Felder + Bezeichnungen mobil ===== */
    /* Generator + Live-Vorschau untereinander statt 2 Spalten */
    #screen-verzollung div[style*="grid-template-columns:1fr 480px"] {
        grid-template-columns: 1fr !important;
    }
    /* Formular-Grids (Versender, Empfänger, Bedingungen, Vorschau): 1 Spalte */
    #screen-verzollung .card-body div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    /* Waren-Positionen-Eingabe: 2 Spalten, Suche + Hinzufügen volle Breite */
    #screen-verzollung div[style*="2fr 1fr 1fr 0.6fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    #screen-verzollung div[style*="2fr 1fr 1fr 0.6fr"] > .field:first-child { grid-column: 1 / -1; }
    #screen-verzollung div[style*="2fr 1fr 1fr 0.6fr"] > .btn {
        grid-column: 1 / -1;
        min-height: 44px;
    }
    /* Feld-Bezeichnungen: deutlich lesbar, eigene Zeile, kein Abschneiden */
    #screen-verzollung .field > label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: var(--gray-600);
        margin-bottom: 3px;
        white-space: normal;
        line-height: 1.3;
    }
    #screen-verzollung .field input,
    #screen-verzollung .field select,
    #screen-verzollung .field textarea { min-height: 42px; font-size: 13px; }
    /* Card-Header (Mandant-Select, Adressbuch-Buttons) dürfen umbrechen */
    #screen-verzollung .card-header { flex-wrap: wrap; gap: 8px; }
    #screen-verzollung .card-header select { max-width: 100%; }
    /* Vorschau nicht sticky auf Mobile */
    #screen-verzollung div[style*="position:sticky"] { position: static !important; }

    /* Massendruckversand-Bar: Buttons als sauberes 2er-Raster */
    .bulk-actions-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        padding: 12px 14px !important;
    }
    .bulk-actions-bar > strong { grid-column: 1 / -1; }
    .bulk-actions-bar > .btn {
        width: 100%;
        min-height: 44px;
        font-size: 12px;
        padding: 8px 6px;
        white-space: normal;
        box-sizing: border-box;
    }
    /* 5. Button (Labeldrucker) über volle Breite */
    .bulk-actions-bar > .btn:nth-of-type(5) { grid-column: 1 / -1; }
    /* Sortierung: volle Breite unter den Buttons */
    .bulk-actions-bar > span {
        grid-column: 1 / -1;
        margin-left: 0 !important;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .bulk-actions-bar > span select { flex: 1; min-height: 40px; }

    /* Sendungs-Optionen (Tracking & Co.): je 2 Buttons nebeneinander */
    .shipment-options {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px !important;
    }
    .shipment-options > .btn {
        width: 100%;
        min-height: 44px;
        font-size: 11.5px;
        padding: 6px 8px;
        white-space: normal;
        box-sizing: border-box;
    }
    /* Trennlinie ausblenden */
    .shipment-options > div[style*="height:1px"] { display: none; }
    /* PNG/PDF-Paar + "Sendung löschen" + Details-Button über volle Breite */
    .shipment-options > div[style*="grid-template-columns"] { grid-column: 1 / -1; }
    .shipment-options > .btn:nth-of-type(3),
    .shipment-options > .toggle-btn { grid-column: 1 / -1; }
    .shipment-options > div[style*="grid-template-columns"] .btn { min-height: 44px; }

    /* "Sendungs-Ansicht aktiv"-Banner: Text bricht sauber um, Button volle Breite darunter */
    .orders-result-banner {
        flex-wrap: wrap;
        font-size: 12px;
        line-height: 1.45;
        padding: 12px 14px;
    }
    .orders-result-banner .banner-clear {
        flex: 1 0 100%;
        margin-left: 0;
        margin-top: 8px;
        min-height: 44px;
        font-size: 12.5px;
        text-align: center;
    }

    /* Aktive Smart-Filter-Pills: je 2 nebeneinander */
    .sf-active-pills {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 10px 14px;
    }
    .sf-active-pills .pill {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        min-width: 0;
        padding: 6px 7px 6px 10px;
        font-size: 10.5px;
        line-height: 1.25;
        white-space: normal;
    }
    .sf-active-pills .pill .pill-remove { flex-shrink: 0; }

    /* Prozess-Status-Chips (Aufträge): 4 oben + 3 unten, beide Reihen bündig */
    .sf-process-row {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr);
        gap: 6px;
    }
    .sf-process-row label {
        justify-content: center;
        text-align: center;
        padding: 8px 4px;
        font-size: 10.5px;
        white-space: normal;
        line-height: 1.25;
        border-radius: 10px;
    }
    .sf-process-row label:nth-child(-n+4) { grid-column: span 3; }
    .sf-process-row label:nth-child(n+5)  { grid-column: span 4; }
    .sf-process-row input { display: none; }

    /* Kosten-Übersicht Massenversand: Carrier-Preise als kleine Pill-Buttons */
    .bulk-cost-legend {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px !important;
    }
    .bulk-cost-legend .cost-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 11px;
        background: #fff;
        border: 1px solid var(--gray-200, #e5e7eb);
        border-radius: 999px;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--gray-800);
        white-space: nowrap;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .ai-bulk-summary { grid-template-columns: 1fr 1fr; }
    .ai-bulk-head { flex-direction: column; align-items: stretch; position: relative; }
    .ai-bulk-title { padding-right: 76px; }
    /* Demo-Pill rechts oben in der Ecke */
    .ai-bulk .ai-key-pill { position: absolute; top: 14px; right: 14px; }
    /* Prüfen-Button volle Breite, passt in den Container */
    .ai-bulk .ai-controls { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
    .ai-bulk-head .btn-ai {
      width: 100%; max-width: 100%; justify-content: center;
      min-height: 44px; white-space: normal; box-sizing: border-box;
    }
    .ai-finding { grid-template-columns: 1fr; }
    .ai-finding-actions { flex-wrap: wrap; }
}

/* ============================================================================
   Responsive — Mobile-Drawer + Bottom-Nav + Tablet-Icon-Sidebar
   ============================================================================ */

/* Hamburger-Button (default versteckt) */
.hamburger {
    display: none;
    width: 40px; height: 40px;
    border: 0;
    background: transparent;
    color: var(--gray-700);
    cursor: pointer;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    flex-shrink: 0;
}
.hamburger:hover { background: var(--gray-100); }
.hamburger svg { width: 22px; height: 22px; }

/* Backdrop für offenen Mobile-Drawer */
.backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 49;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.backdrop.is-open { display: block; opacity: 1; }

/* Bottom-Tab-Nav (default versteckt) */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--border);
    z-index: 30;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 8px rgba(15, 30, 55, 0.06);
}
.bottom-nav a, .bottom-nav button {
    text-align: center;
    font-size: 10px;
    color: var(--gray-500);
    text-decoration: none;
    padding: 6px 4px 4px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.1;
    font-weight: 500;
}
.bottom-nav a.active, .bottom-nav button.active {
    color: var(--accent);
    font-weight: 700;
}
.bottom-nav .ic { font-size: 18px; line-height: 1; }
.bottom-nav svg { width: 18px; height: 18px; }

/* ----- Tablet (768 – 1099 px): Sidebar wird Icons-only ----- */
/* Tablet (768–1099px): Sidebar zeigt TEXT statt Icons */
@media (max-width: 1099px) and (min-width: 768px) {
    .layout { grid-template-columns: 190px 1fr; }
    .sidebar { padding: 14px 10px; }
    .brand-sub { display: none; }
    .brand-mark { width: 28px; height: 28px; }
    /* Icons ausblenden — nur Menü-Text anzeigen */
    .nav-item svg, .nav-item .ic { display: none; }
    .nav-item {
        padding: 9px 10px;
        font-size: 12.5px;
        justify-content: flex-start;
    }
    .nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .nav-item .badge { margin-left: auto; flex-shrink: 0; }
    .nav-section { font-size: 9.5px; }
    /* Footer kompakt: Name ja, E-Mail nein */
    .sidebar-footer .email { display: none; }
    .topbar { padding: 12px 16px; }
    .search { max-width: 280px; }
}

/* ----- Mobile (≤ 767 px): Drawer + Bottom-Nav ----- */
@media (max-width: 767px) {
    .layout { grid-template-columns: 1fr; }

    /* Sidebar wird Drawer */
    .sidebar {
        position: fixed !important;
        top: 0; left: 0;
        height: 100vh !important;
        width: 280px;
        max-width: 85vw;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 24px rgba(15, 30, 55, 0.18);
    }
    .sidebar.is-open { transform: translateX(0); }

    .hamburger { display: inline-flex; }
    .bottom-nav { display: grid; }

    .topbar {
        padding: 10px 14px;
        gap: 8px;
    }
    .search { max-width: none; }
    .search input { font-size: 13px; padding-left: 36px; }
    .country-pill { display: none; }
    .topbar-actions { gap: 4px; }

    /* Page-Content unten Padding für Bottom-Nav */
    .screen { padding-bottom: 80px; padding-top: 80px;}
    .page { padding: 14px 14px 80px; }

    /* KPI-Grids automatisch zu 2 Spalten */
    .kpi-grid, .kpi-row, [class*="grid"][style*="grid-template-columns: repeat(4"],
    [class*="grid"][style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    [class*="grid"][style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
    }

    /* Welcome-Banner kompakter */
    .welcome-banner { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; }
    .welcome-banner svg, .welcome-banner img { display: none; }

    /* Tabellen scrollen horizontal statt zerquetscht zu werden */
    .table-wrapper, .panel { overflow-x: auto; }
    table { min-width: 600px; font-size: 12px; }

    /* Charts skalieren */
    canvas { max-width: 100% !important; height: auto !important; }
}

@media (max-width: 360px) {
    .kpi-grid, .kpi-row,
    [class*="grid"][style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }
    .bottom-nav a, .bottom-nav button { font-size: 9px; }
}

/* ================================================================
   MOBILE-LAYER · Patch 2026-06-07
   Greift NUR bei Viewport ≤ 768px — Desktop bleibt 1:1 unverändert.
   Ziel: alle Container nutzen volle Bildschirmbreite, alle Touch-
   Targets ≥ 44px, Sidebar als Drawer, Modals als Vollbild.
   ================================================================ */
@media (max-width: 768px) {
  /* 0. KRITISCHER FIX: .app-Grid auflösen — sonst nimmt die Sidebar
        permanent 240px Spalte, auch wenn sie als Drawer ausgeklappt ist */
  .app {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* 1. Body + Layout — voller Viewport, kein horizontaler Scroll */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  body { font-size: 14px; }
  .layout, .main {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* 2. Sidebar als Drawer (links eingeklappt) */
  .sidebar {
    position: fixed !important;
    top: 0; left: -100%;
    width: 84%; max-width: 320px;
    height: 100vh; height: 100dvh;
    z-index: 200;
    transition: left 0.25s ease-out;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    overflow-y: auto;
  }
  body.is-mobile-drawer-open .sidebar { left: 0; }
  body.is-mobile-drawer-open::after {
    content: ''; position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 150;
    animation: pakajo-fade-in 0.2s ease-out;
  }
  @keyframes pakajo-fade-in { from { opacity: 0; } to { opacity: 1; } }

  /* 3. Hamburger sichtbar machen */
  .hamburger {
    display: inline-flex !important;
    width: 44px; height: 44px;
    background: transparent; border: none;
    align-items: center; justify-content: center;
    color: var(--gray-700);
    cursor: pointer;
    border-radius: 8px;
    margin-right: 4px;
  }
  .hamburger:hover { background: var(--gray-100); }
  .hamburger svg { width: 24px; height: 24px; }

  /* 4. Topbar kompakt */
  .topbar {
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: nowrap;
    position: fixed;
  }
  .search { display: none !important; }
  .topbar-actions { gap: 6px; margin-left: auto; }
  .topbar-lang { padding: 4px 6px 4px 8px; font-size: 11px; }
  .topbar-lang select { font-size: 11px; }
  .country-pill { display: none; }

  /* 5. Page-Padding reduziert, volle Breite */
  .page {
    padding: 12px 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px;
  }
  .page-actions {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .page-actions .btn { flex: 1; min-height: 44px; }

  /* 6. Cards + Container volle Breite */
  .card, .shipping-form-card, .glocal-selector, .welcome-banner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  .card-body, .card-header, .card-footer {
    padding: 14px 16px !important;
  }
  /* Glocal-Selector mobil: Text volle Breite, Länderauswahl darunter */
  .glocal-selector {
    grid-template-columns: auto 1fr !important;
    gap: 12px 14px !important;
    align-items: start !important;
    padding: 16px !important;
  }
  .glocal-icon { width: 40px; height: 40px; font-size: 18px; }
  .glocal-info .value { font-size: 16px; }
  .glocal-selector select {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }

  /* 7. Grids — auf 1 Spalte einklappen */
  .form-grid-2, .form-grid-3, .form-grid-4,
  .home-grid, .kpi-grid, .kpi-row,
  .perf-charts {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Versanddaten-Form Reihen */
  #screen-versand-form-card .form-row.row-1,
  #screen-versand-form-card .form-row.row-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Box-Preset-Button: aus dem Header raus, zwischen Reihe 1 (Mandant/Land) und Maßen */
  #screen-versand-form-card .form-card-header .preset-shortcut { display: none; }
  #screen-versand-form-card .preset-shortcut-mobile {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    min-height: 44px;
    margin: 12px 0 4px;
    box-sizing: border-box;
  }
  /* L/B/H/Gewicht: 2×2 statt 1×4 */
  #screen-versand-form-card .form-row.row-2 {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Produktauswahl: volle Breite über beide Spalten */
  #screen-versand-form-card .form-row.row-2 .field:has(#screen-versand-produkt) {
    grid-column: span 2;
  }
  #screen-versand-form-card .form-row.row-2 #screen-versand-produkt {
    width: 100%;
    min-height: 48px;
  }
  /* Berechnen-Button darunter: gleiche Breite + Höhe wie Produktauswahl */
  #screen-versand-form-card .form-row.row-2 .form-card-calc {
    grid-column: span 2;
    justify-self: stretch !important;
    width: 100%;
  }
  #screen-versand-form-card .form-row.row-2 .form-card-calc .btn {
    width: 100%; min-height: 48px;
  }

  /* 8. Aufträge-Liste — Cards statt 3-Spalten-Grid */
  .auftrag-row {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  .auftrag-actions .row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .auftrag-actions .btn {
    min-height: 44px;
    font-size: 12.5px !important;
    padding: 8px 10px;
  }

  /* 9. Sendungs-Detail-Block (Auftrag-Detail) — stack, kompakt */
  .shipment-block > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-bottom: none !important;
  }
  /* Jede Sendung als eigener Container — leichte Abgrenzung zur nächsten */
  .shipment-block {
    display: block;
    margin: 10px 10px 14px;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    overflow: hidden;
  }
  .shipment-block .shipment-details {
    border-bottom: none !important;
    border-top: 1px dashed var(--border);
    padding: 16px !important;
  }
  /* Sendungs-Detail-Panel: innere Spalten (Zolldaten | Dokumente bzw. Tracking | Quelle)
     auf Mobile stapeln, damit u.a. die Handelsrechnung-Karte konsistent volle Breite einnimmt */
  .shipment-block .shipment-details > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Dokumenten-Karten (Handelsrechnung, CN22) auf Mobile mit einheitlichem Abstand */
  .shipment-block .shipment-details .card.mb-4 { margin-bottom: 12px !important; }
  /* Kopfzeile als kompakte Reihe: EU-Badge links · ID direkt neben dem Status-Button rechts */
  .shipment-block > div:first-child > div[style*="text-align:center"] {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    text-align: left !important;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
  }
  .shipment-block > div:first-child > div[style*="text-align:center"] > div {
    margin: 0 !important;
    min-width: 0;
  }
  /* Reihenfolge: Badge (1) … ID (2) + grüner Status-Button (3) rechts zusammen */
  .shipment-block > div:first-child > div[style*="text-align:center"] > div:nth-child(1) {
    order: 2;
    margin-left: auto !important;
    flex-shrink: 0;
  }
  .shipment-block > div:first-child > div[style*="text-align:center"] > div:nth-child(2) {
    order: 1;
  }
  .shipment-block > div:first-child > div[style*="text-align:center"] > div:nth-child(3) {
    order: 3;
    flex-shrink: 0;
  }
  .shipment-block div[style*="font-size:18px"][style*="font-weight:700"] {
    font-size: 16px !important;
  }
  .shipment-block span[style*="width:48px"] {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
  }
  /* Detail- + Empfänger-Spalten: kleinere Schrift, engere Zeilen */
  .shipment-block > div:first-child > div[style*="line-height:1.7"] {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  /* Buttons kompakt + exakt in Containerbreite (je 2 nebeneinander) */
  .shipment-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px !important;
    width: 100%;
  }
  .shipment-options > * { min-width: 0; }
  .shipment-options > div[style*="height:1px"] { display: none; }
  .shipment-options > div[style*="grid-template-columns"] { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; }
  .shipment-options > .btn:nth-of-type(3),
  .shipment-options > .toggle-btn { grid-column: 1 / -1; }
  .shipment-options > .btn,
  .shipment-options > div[style*="grid-template-columns"] .btn {
    min-height: 40px !important;
    font-size: 11px !important;
    padding: 6px 6px !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }
  /* Header der Sendungs-Tabelle ausblenden auf Mobile */
  #screen-auftrag-detail .card > div[style*="background:#2C7873"] {
    display: none !important;
  }
  /* KPI-Header der Auftrag-Detail: 2×2 statt 5×1 */
  #screen-auftrag-detail .card > div[style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  /* 10. Modals — Vollbild */
  .modal-overlay { padding: 0 !important; align-items: stretch !important; }
  .modal, .modal.modal-lg {
    max-width: 100vw !important;
    width: 100vw !important;
    max-height: 100dvh !important;
    min-height: 100dvh;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex; flex-direction: column;
  }
  .modal-header {
    position: sticky; top: 0; z-index: 5;
    padding: 12px 16px !important;
  }
  .modal-header h2 { font-size: 16px !important; }
  .modal-body {
    padding: 14px 16px !important;
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .modal-footer {
    position: sticky; bottom: 0;
    background: #fff;
    padding: 12px 16px !important;
    border-top: 1px solid var(--border);
    flex-wrap: wrap; gap: 8px;
  }
  .modal-footer .btn { flex: 1; min-height: 46px; }
  .modal-close { width: 44px; height: 44px; font-size: 24px; }

  /* 11. Carrier-Karten — 1 Spalte, kompakte Kostenübersicht */
  .carrier-grid, .ship-rates-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .carrier-card { padding: 14px 14px 12px !important; }
  /* Kopf: Logo links, Preis rechts — bleibt eine Zeile, kein Umbruch-Chaos */
  .carrier-head {
    flex-wrap: nowrap !important;
    gap: 10px;
    margin-bottom: 8px !important;
  }
  .carrier-head > div:first-child { min-width: 0; }
  .carrier-logo { height: 32px; font-size: 13px; padding: 3px 9px; }
  .carrier-price { font-size: 20px; white-space: nowrap; }
  .carrier-price small { font-size: 10px; }
  .carrier-head .text-sm { font-size: 10.5px; }
  /* Badges kompakter, brechen unter dem Logo um */
  .carrier-tags { margin: 8px 0 0 !important; gap: 4px; }
  .carrier-tags .badge { font-size: 9.5px; padding: 2px 6px; white-space: nowrap; }
  /* Feature-Liste kompakter */
  .carrier-card .carrier-info { font-size: 11.5px; line-height: 1.55; }
  /* Vergleichen-Pill als Touch-Target */
  .carrier-compare-toggle { padding: 5px 10px 5px 8px; font-size: 11px; }
  /* Aktionen: Auswählen dominant, Info kompakt daneben */
  .carrier-card .carrier-actions-row { margin-top: 10px; gap: 8px; }
  .carrier-card .carrier-actions-row .btn { min-height: 44px; }
  .carrier-card .carrier-actions-row .btn-sm { flex: 0 0 auto; }
  /* "Bester Preis"-Badge nicht abgeschnitten */
  .carrier-card.best { margin-top: 12px; }

  /* 12. Insurance-Tiers — 3 Spalten bleiben, aber kompakter */
  #screen-insurance-card .ins-tier,
  #ship-insurance-card .ins-tier {
    padding: 10px 6px !important;
    min-height: 56px;
  }
  #screen-insurance-card .ins-tier-range,
  #ship-insurance-card .ins-tier-range { font-size: 9.5px; }
  #screen-insurance-card .ins-tier-price,
  #ship-insurance-card .ins-tier-price { font-size: 13px; }

  /* 13. Buttons — Touch-Target ≥ 44px */
  .btn, .btn-sm { min-height: 44px; }
  .btn-sm { padding: 8px 12px; font-size: 13px; }
  .tab { min-height: 44px; padding: 10px 14px; }
  input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], select, textarea {
    min-height: 44px; font-size: 16px !important; /* 16px verhindert iOS-Zoom beim Focus */
  }

  /* 14. Tables — horizontal scrollbar erlauben (Massenversand etc.) */
  .tbl, table {
    display: block; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  .tbl thead { white-space: nowrap; }

  /* 15. Sidebar gegen Drawer-Schließen tap-bar machen */
  .sidebar { transition: left 0.25s ease-out; }
  body.is-mobile-drawer-open .sidebar nav { padding-bottom: 80px; }

  /* 16. Welcome-Banner & Glocal-Stats kompakter */
  .welcome-banner { padding: 18px 16px !important; }
  .welcome-banner .glocal-stat .num { font-size: 22px !important; }

  /* 17. Login & Landing — bestehende Mobile-Regeln verstärken */
  .login-split { grid-template-columns: 1fr !important; }

  /* 18. Auftrag-Filter / Smart-Filter Pills horizontal scrollbar */
  [class*="filter-bar"], [class*="filter-pills"] {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 6px;
  }

  /* 19. Locked-Auftrag-Box auf Mobile umbrechen */
  #ship-auftrag-locked { flex-wrap: wrap; gap: 8px; }

  /* 20. Post-Save-Action-Modal Optionen full-width */
  .post-save-option { width: 100%; }
}

/* ================================================================
   MOBILE-LAYER · STRONG OVERRIDES für Inline-Styles (Patch 2)
   Notwendig, weil viele Container im Mockup `style="grid-template-
   columns: ..."` inline gesetzt haben — normale CSS-Klassen würden
   davon nicht greifen. Attribute-Selektor + !important macht's robust.
   ================================================================ */
@media (max-width: 768px) {
  /* 1. ALLE Inline-Grids → 1 Spalte als Default */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Ausnahmen: bestimmte 2-spaltige Layouts beibehalten (Insurance-Tiers, L/B/H 2x2) */
  #screen-insurance-card [style*="grid-template-columns"][style*="repeat(3"],
  #ship-insurance-card [style*="grid-template-columns"][style*="repeat(3"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  /* L/B/H/Gewicht Reihe: 2×2 */
  #screen-versand-form-card .form-row.row-2 [style*="grid-template-columns"],
  #screen-versand-form-card .form-row.row-2 {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 2. KPI-Header (Auftrag-Detail) — 2x2 statt 5x1 */
  #screen-auftrag-detail [style*="grid-template-columns: repeat(5"],
  #screen-auftrag-detail [style*="grid-template-columns:repeat(5"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* 3. Massenversand-Workflow-Steps: 1 Spalte, voll sichtbar */
  [class*="bulk"] [style*="grid-template-columns"],
  [id*="bulk"] [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* 4. Alle inline-flex mit gap > 12px reduzieren */
  [style*="display:flex"][style*="gap:20px"],
  [style*="display: flex"][style*="gap: 20px"] {
    flex-direction: column !important;
    gap: 12px !important;
  }
  /* Topbar bleibt flex-row trotzdem */
  .topbar { flex-direction: row !important; }

  /* 5. Min-widths auf inline-styled boxes wegnehmen */
  [style*="min-width: 800"], [style*="min-width:800"],
  [style*="min-width: 600"], [style*="min-width:600"],
  [style*="min-width: 480"], [style*="min-width:480"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* 6. Max-widths auf inline-styled containers anpassen */
  [style*="max-width: 1280"], [style*="max-width:1280"],
  [style*="max-width: 1600"], [style*="max-width:1600"] {
    max-width: 100% !important;
  }

  /* 7. KI-Adressprüfung & AI-Cards Buttons stack */
  .ai-check, [class*="ai-card"] {
    width: 100% !important;
  }
  .ai-check button, [class*="ai-card"] button {
    width: 100% !important;
    margin-top: 8px;
  }
  .ai-check .ai-controls,
  .ai-check [class*="controls"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  /* Kopf untereinander: erst Text, dann Button — Button liegt nicht mehr über der Schrift */
  .ai-check .ai-check-head {
    flex-direction: column !important;
    align-items: stretch !important;
    position: relative;
    gap: 6px;
  }
  .ai-check .ai-check-title { padding-right: 70px; }
  .ai-check .ai-check-title small { white-space: normal; }
  /* Demo-Pill rechts oben in der Ecke */
  .ai-check .ai-key-pill {
    position: absolute; top: 8px; right: 10px;
    width: auto !important;
  }
  .ai-check .ai-check-head .btn-ai {
    width: 100% !important;
    justify-content: center;
    min-height: 44px;
    margin-top: 0;
  }

  /* 8. Cards mit padding > 24 weniger Padding */
  [style*="padding: 32px"], [style*="padding:32px"],
  [style*="padding: 24px"], [style*="padding:24px"] {
    padding: 14px 16px !important;
  }

  /* 9. Erzwinge wirklich volle Breite auf Top-Level-Containern */
  .screen, .page, section[id^="screen-"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }

  /* 10. Cards mit display:grid + inline columns — Texte sollen umbrechen
        (nur overflow-wrap: beeinflusst die Mindestbreite NICHT —
        word-break:break-word ließ Flex-/Grid-Kinder auf 1 Zeichen schrumpfen) */
  [style*="grid-template-columns"] > div,
  [style*="grid-template-columns"] > section {
    min-width: 0 !important;
    overflow-wrap: break-word;
  }

  /* 11. Bottom-Nav darf letzten Container nicht überdecken */
  body { padding-bottom: 80px !important; }
  .bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 100;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
  }

  /* 12. Page-Header & Page-Title — auch volle Breite, gestapelt */
  .page-title h1 { font-size: 22px !important; line-height: 1.2; overflow-wrap: break-word; }
  .page-title .breadcrumb { font-size: 11px; }
  .page-title { width: 100%; }

  /* 13. Welcome-Banner Glocal-Stats: 1 Spalte */
  .welcome-banner [style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 14. Form-Section gleiche Behandlung */
  .form-section [style*="grid"] {
    grid-template-columns: 1fr !important;
  }

  /* 15. ALLES innerhalb von Screens — volle Breite, keine min-widths */
  .screen *, section[id^="screen-"] * {
    max-width: 100% !important;
  }
  .screen .card,
  section[id^="screen-"] .card,
  .news-card,
  [class*="news"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 16. Topbar SOLL Sidebar-Spalte ignorieren */
  .topbar, .page {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 17. Tabs / Filter Pills — falls horizontal überlaufen → scrollbar */
  .tabs, [class*="tabs"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  /* 18. Sendung-Modal: Mandant-Info-Header stack vertikal (Mandant / Country / Currency) */
  .auftrag-selector > div[style*="display:flex"][style*="align-items:baseline"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }
  /* Country-of-Origin Block — eigene Zeile, nicht rechts gepusht */
  #ship-mandant-origin {
    margin-left: 0 !important;
    margin-top: 6px !important;
    flex-wrap: wrap !important;
    font-size: 11.5px !important;
    width: 100% !important;
  }

  /* 19. Locked-Auftrag-Box (#ship-auftrag-locked) — stack + Counter-Badge nicht umbrechen */
  #ship-auftrag-locked {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  #ship-auftrag-locked > span:first-child {
    /* 📋-Icon */
    align-self: flex-start;
  }
  #ship-auftrag-locked > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: calc(100% - 50px) !important;
  }
  #ship-auftrag-locked > div > div {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* "Auftrag wechseln" Link auf eigene Zeile */
  #ship-auftrag-locked > a {
    flex: 0 0 100% !important;
    margin-top: 4px !important;
    padding: 6px 0;
    text-align: right;
    font-size: 12px !important;
  }
  /* Live-Counter-Badge (X Sendungen · Y kg) nicht umbrechen */
  #ship-auftrag-locked-label span,
  #ship-auftrag-locked-label > span[style*="background:var(--success)"],
  #ship-auftrag-locked-label > span[style*="background:#FEF3C7"] {
    white-space: nowrap !important;
    display: inline-block !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
    font-size: 10.5px !important;
  }
  #ship-auftrag-locked-label {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center;
    line-height: 1.4 !important;
    font-size: 12.5px !important;
  }

  /* 20. Locked-Auftrag-Box (Screen-Version) — auch wrapfähig */
  #screen-ship-auftrag-locked,
  [id$="-auftrag-locked"] {
    flex-wrap: wrap !important;
  }

  /* 21. KI-Adressprüfung: alt-Wert und neu-Wert untereinander, Strike-through klar lesbar */
  .addr-old {
    display: block !important;
    margin-right: 0 !important;
    margin-bottom: 2px !important;
    font-size: 12px;
    line-height: 1.3;
  }
  .addr-new {
    display: block !important;
    font-size: 13.5px;
    line-height: 1.3;
    font-weight: 700;
  }
  /* Falls Pfeil/Arrow zwischen alt und neu: eigene Zeile */
  .addr-correction-row, [class*="addr-correction"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  /* 22. KI-Adressprüfung Chat-Input + Senden-Button — Button auf eigener Zeile */
  .ai-input-row {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100%;
  }
  .ai-input-row input {
    width: 100% !important;
    min-height: 44px;
  }
  .ai-input-row .btn-ai,
  .ai-input-row .btn {
    width: 100% !important;
    min-height: 46px;
    flex: 0 0 auto !important;
  }

  /* 23. KI-Disclaimer: kein Flex-Row mit fest „align-items:center" — sonst stapelt der
        Bold-Span komisch. Stattdessen Inline-Block-Variante, normaler Textfluss. */
  .ai-disclaimer {
    display: block !important;
    align-items: initial !important;
    line-height: 1.5 !important;
    font-size: 11.5px !important;
    padding: 0 4px;
  }
  .ai-disclaimer > span:first-child {
    display: inline !important;
    margin-right: 4px;
  }
  .ai-disclaimer strong {
    display: inline !important;
    margin: 0 !important;
  }

  /* 24. AI-Suggestions Chips: voll breit, gestapelt für bessere Lesbarkeit */
  .ai-suggestions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .ai-suggestions .ai-chip {
    width: 100% !important;
    min-height: 44px;
    text-align: center;
  }

  /* 25. AI-Check Header (Bot + Titel) — vermeide Überlappung mit Live-Badge */
  .ai-check-head {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .ai-check-title {
    min-width: 0 !important;
    flex: 1 1 70% !important;
  }
  .ai-check-title small {
    font-size: 11.5px !important;
    line-height: 1.4;
  }
}

/* Extra-Kompakt für sehr kleine Geräte (≤ 380px iPhone SE etc.) */
@media (max-width: 380px) {
  .page { padding: 10px 12px !important; }
  .topbar { padding: 8px 10px; gap: 6px; }
  .card-body, .card-header { padding: 12px !important; }
  .modal-header h2 { font-size: 15px !important; }
  /* Auftrag-Buttons Texte kürzer (Icons reichen) */
  .auftrag-actions .btn { font-size: 11.5px !important; padding: 8px 6px; }
}

/* PWA Standalone-Mode: Status-Leisten-Padding für iOS */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(10px + env(safe-area-inset-top, 0)); }
  .sidebar { padding-top: env(safe-area-inset-top, 0); }
}

/* ================================================================
   MOBILE-LAYER · Patch 3 (2026-06-10)
   1) Tabellen → Karten-Layout (statt horizontalem Scrollen)
   2) Durchgängige Typografie-Skala für alle Container
   3) Screen-spezifische Container-Fixes (alle 19 Screens)
   Greift NUR ≤ 768px — Desktop bleibt unverändert.
   ================================================================ */
@media (max-width: 768px) {

  /* ---------- 1. TABELLEN ALS KARTEN ---------- */
  /* Ausnahme: .tbl-keep-scroll behält horizontales Scrollen
     (Dokument-Vorschauen, CSV-Mapping etc. sind nicht .tbl) */
  table.tbl:not(.tbl-keep-scroll) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    font-size: 13px !important;
  }
  table.tbl:not(.tbl-keep-scroll) thead { display: none !important; }
  table.tbl:not(.tbl-keep-scroll) tbody,
  table.tbl:not(.tbl-keep-scroll) tfoot { display: block !important; width: 100%; }
  table.tbl:not(.tbl-keep-scroll) tr {
    display: block !important;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 10px;
    box-shadow: 0 1px 2px rgba(15, 30, 55, 0.04);
  }
  table.tbl:not(.tbl-keep-scroll) tr:hover { background: #fff; }
  table.tbl:not(.tbl-keep-scroll) td {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 0 !important;
    border-bottom: 0 !important;
    text-align: right;
    overflow-wrap: break-word;
    min-height: 0;
  }
  /* Label links aus data-label (wird per JS aus thead abgeleitet) */
  table.tbl:not(.tbl-keep-scroll) td[data-label]::before {
    content: attr(data-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--gray-500);
    text-align: left;
    flex-shrink: 0;
    padding-top: 2px;
  }
  /* Erste Zelle = Kartentitel (volle Breite, links, abgesetzt) */
  table.tbl:not(.tbl-keep-scroll) td:first-child {
    display: block !important;
    text-align: left;
    padding-bottom: 8px !important;
    margin-bottom: 6px;
    border-bottom: 1px dashed var(--border) !important;
    font-size: 13.5px;
  }
  table.tbl:not(.tbl-keep-scroll) td:first-child::before { display: none; }
  /* Subtexte (.small) in Zellen: eigene Zeile, rechtsbündig, kein Wortbruch */
  table.tbl:not(.tbl-keep-scroll) td .small {
    flex-basis: 100%;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  table.tbl:not(.tbl-keep-scroll) td:first-child .small { text-align: left; white-space: normal; }
  table.tbl:not(.tbl-keep-scroll) td { flex-wrap: wrap; }
  /* Leere Zellen + reine Pfeil-/Aktionszellen ausblenden */
  table.tbl:not(.tbl-keep-scroll) td:empty,
  table.tbl:not(.tbl-keep-scroll) td.tbl-cell-chev { display: none !important; }
  /* Summenzeilen (tfoot) hervorheben */
  table.tbl:not(.tbl-keep-scroll) tfoot tr {
    background: var(--gray-50);
    font-weight: 700;
  }
  /* Checkboxen in Zeilen (Massenversand) nicht strecken */
  table.tbl:not(.tbl-keep-scroll) td input[type="checkbox"] {
    min-height: 0; width: 18px; height: 18px;
  }

  /* ---------- 2. TYPOGRAFIE-SKALA ---------- */
  body { font-size: 14px; }
  .page-title h1 { font-size: 20px !important; line-height: 1.25; }
  .page-title .breadcrumb { font-size: 11px; }
  h2 { font-size: 17px; }
  h3, .card-header h3 { font-size: 14.5px !important; }
  h4 { font-size: 13px; }
  .kpi-value { font-size: 22px !important; }
  .kpi-label { font-size: 11px !important; line-height: 1.35; }
  .badge { font-size: 10.5px !important; }
  .small, .tbl td .small { font-size: 11px !important; }
  .form-label, label { font-size: 12.5px; }
  /* Inline-Font-Sizes herunterskalieren (Hero-Zahlen, Stat-Werte) */
  [style*="font-size:36px"], [style*="font-size: 36px"],
  [style*="font-size:34px"], [style*="font-size: 34px"],
  [style*="font-size:32px"], [style*="font-size: 32px"] { font-size: 24px !important; }
  [style*="font-size:28px"], [style*="font-size: 28px"],
  [style*="font-size:26px"], [style*="font-size: 26px"] { font-size: 21px !important; }
  [style*="font-size:24px"], [style*="font-size: 24px"],
  [style*="font-size:22px"], [style*="font-size: 22px"] { font-size: 19px !important; }
  [style*="font-size:20px"], [style*="font-size: 20px"] { font-size: 17px !important; }
  [style*="font-size:18px"], [style*="font-size: 18px"] { font-size: 16px !important; }
  /* Lange Wörter, IDs, E-Mails, Tracking-Nummern umbrechen
     (KEIN word-break:break-word — das ließ Flex-Kinder wie die
     Settings-Tabs auf 1-Zeichen-Spalten zusammenschrumpfen) */
  .card, .page, .modal-body { overflow-wrap: break-word; }
  code, .mono, [style*="monospace"] { overflow-wrap: anywhere; }

  /* ---------- 3. SCREEN-FIXES ---------- */
  /* API-Screen: Code-Blöcke scrollen statt sprengen */
  pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 11px !important;
    white-space: pre-wrap !important;
    word-break: break-word;
  }
  /* Dokument-Vorschauen (Handelsrechnung, CN22, Label) seitlich pannen */
  .inv-page, [id*="label-preview"], [class*="doc-preview"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Tracking-Timeline: Inhalt darf nicht abgeschnitten werden */
  .timeline { padding-left: 0; }
  .timeline > div, .timeline li { min-width: 0; }
  /* Hilfe/FAQ + Abo-Karten: Innenabstand kompakter */
  #screen-hilfe .card-body, #screen-abo .card-body { padding: 14px !important; }
  /* Tab-Leisten (Settings, Abo, Verzollung …): horizontal scrollbare
     Chips in EINER Zeile — Labels dürfen nie vertikal umbrechen */
  .tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: 100% !important;
    scrollbar-width: thin;
    gap: 4px !important;
  }
  .tabs .tab, .tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    padding: 10px 14px;
  }
  /* Inline-Flex-Banner (Info-Boxen, Kopfzeilen mit 3 Elementen):
     dürfen umbrechen statt Inhalte zu zerquetschen */
  .settings-content [style*="display:flex"]:not([style*="flex-direction:column"]),
  .settings-content [style*="display: flex"]:not([style*="flex-direction:column"]),
  .card [style*="display:flex"][style*="align-items:center"][style*="gap"] {
    flex-wrap: wrap !important;
  }
  /* Vertikale Menülisten in Cards (z. B. Profil-Seitenleiste):
     volle Breite, Touch-Targets ≥44px */
  .settings-content .card { width: 100% !important; }
  /* Klassen-basierte Mehrspalten-Grids → 1 Spalte
     (Inline-Grids deckt Patch 2 ab, diese hier sind CSS-Klassen) */
  .settings-grid,
  .perf-grid,
  .map-stats,
  .progress-stats,
  .quick-actions,
  .info-grid,
  .filter-analytics {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Mandanten/Country-Listen: Touch-Targets */
  .tenant-list .ti, .country-list .ci { min-height: 48px; }
  /* Card-Header + hstack-Gruppen: umbrechen statt abschneiden
     (z. B. Mandant-Detailkopf mit Badges + Bearbeiten-Buttons) */
  .card-header { flex-wrap: wrap !important; gap: 8px !important; }
  .hstack { flex-wrap: wrap !important; }
  .card-header .hstack .btn { flex: 1 1 auto; }
  /* Glocal-Screen: Carrier-Statistiken einspaltig */
  #screen-glocal [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Glocal-Weltkarte: Legende mobil konsistent unter der Karte statt
     absolut positioniert (verhinderte abgeschnittene/umbrechende Texte) */
  .map-container {
    height: auto !important;
    padding: 16px !important;
    display: block !important;
  }
  .world-map { max-width: 100% !important; display: block; margin: 0 auto; }
  .map-legend {
    position: static !important;
    bottom: auto !important; left: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px !important;
    width: 100%;
    margin-top: 14px;
    box-sizing: border-box;
    font-size: 11px;
  }
  .map-legend .leg-item { align-items: flex-start; line-height: 1.3; }
  .map-legend .leg-dot { flex: 0 0 auto; margin-top: 2px; }
  /* Buttons: Text darf umbrechen statt abgeschnitten zu werden */
  .btn, .page-actions .btn { white-space: normal !important; text-align: center; line-height: 1.3; }
  /* Smart-Filter (Aufträge & Sendungen): 2 Spalten statt 6/3 */
  .sf-row { grid-template-columns: 1fr 1fr !important; }
  .sf-row.row-search { grid-template-columns: 1fr !important; }
  .sf-body { padding: 12px 14px !important; }
  .smart-filter-head { flex-wrap: wrap; gap: 8px; }
  /* Bottom-Nav: Safe-Area auch im PWA-Standalone-Mode */
  .bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}

/* Sehr kleine Geräte: Karten-Tabellen noch kompakter */
@media (max-width: 380px) {
  table.tbl:not(.tbl-keep-scroll) tr { padding: 8px 10px; }
  table.tbl:not(.tbl-keep-scroll) td { gap: 8px; }
  .kpi-value { font-size: 20px !important; }
}

/* =========================================================
   MANDANT-ARBEITSKONTEXT (Pickup & Retouren)
   Dropdown + Info-Container + Adress-Verwaltung pro Mandant
========================================================= */
.mandant-work-select {
  border: 1.5px solid var(--accent); border-radius: 8px;
  background-color: #FFF5E5; font-size: 13px; font-weight: 700; color: #92400E;
  cursor: pointer; max-width: 320px; min-height: 40px;
}
.mandant-work-select:focus {
  background-color: #FFF5E5;
}
.mandant-ctx-banner {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  background: linear-gradient(135deg, #FFF8F0 0%, #FFFDF8 100%);
  border: 1.5px solid #FED7AA; border-radius: 12px;
  margin-bottom: 18px; overflow: hidden;
}
.mandant-ctx-banner .ctx-block {
  flex: 1 1 220px; min-width: 200px; padding: 12px 16px;
  border-right: 1px solid #FED7AA; font-size: 12.5px; line-height: 1.55;
}
.mandant-ctx-banner .ctx-block:last-child { border-right: none; }
.mandant-ctx-banner .ctx-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: #B45309; margin-bottom: 3px;
  display: flex; align-items: center; gap: 5px;
}
.mandant-ctx-banner .ctx-value { color: var(--gray-800); font-weight: 600; }
.mandant-ctx-banner .ctx-value strong { color: var(--accent-dark, #92400E); }
.mandant-adr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.mandant-adr-box {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
  background: var(--gray-50, #FAFAFA);
}
.mandant-adr-box h4 {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gray-700); margin: 0 0 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.mandant-adr-box .adr-display { font-size: 13px; line-height: 1.7; color: var(--gray-800); }
.mandant-adr-box .adr-form { display: none; margin-top: 8px; }
.mandant-adr-box.is-editing .adr-form { display: block; }
.mandant-adr-box.is-editing .adr-display { display: none; }
.mandant-adr-box .adr-form .frm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mandant-adr-box .adr-form label { font-size: 11px; font-weight: 600; color: var(--gray-600); display: block; margin-top: 6px; }
.mandant-adr-box .adr-form input, .mandant-adr-box .adr-form select {
  /*width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 13px; margin-top: 3px; min-height: 38px;*/
}
.mandant-adr-box .adr-form .frm-actions { display: flex; gap: 8px; margin-top: 12px; }
@media (max-width: 767px) {
  .mandant-work-select { max-width: 100%; width: 100%; }
  .mandant-ctx-banner { flex-direction: column; }
  .mandant-ctx-banner .ctx-block { border-right: none; border-bottom: 1px solid #FED7AA; flex-basis: auto; min-width: 0; }
  .mandant-ctx-banner .ctx-block:last-child { border-bottom: none; }
  .mandant-adr-grid { grid-template-columns: 1fr; }
  .mandant-adr-box .adr-form .frm-grid { grid-template-columns: 1fr; }
  .mandant-adr-box .adr-form .frm-actions { flex-direction: column; }
  .mandant-adr-box .adr-form .frm-actions .btn { width: 100%; }
  #screen-pickup .page-actions, #screen-retouren .page-actions { width: 100%; }
}

/* Globaler Kontext in der Topbar: aktiver Mandant + aktuelles Abo (auf jeder Seite) */
.topbar-context { display: inline-flex; align-items: center; gap: 8px; }
.topbar-mandant {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 9px;
  background: var(--accent-light, #E6F4F7);
  border: 1px solid var(--accent, #0C97AF);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
  max-width: 240px;
}
.topbar-mandant:hover { background: #fff; box-shadow: 0 2px 8px rgba(12,151,175,0.18); }
.topbar-mandant .ico { font-size: 14px; line-height: 1; flex-shrink: 0; }
.topbar-mandant .label-stack { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.topbar-mandant .pre {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-dark, #0A7488); opacity: 0.85;
}
.topbar-mandant .name {
  font-size: 12.5px; font-weight: 800; color: var(--accent-dark, #0A7488);
  letter-spacing: -0.01em;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.topbar-abo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 20px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.15s;
}
.topbar-abo:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.topbar-abo .ico { font-size: 14px; line-height: 1; flex-shrink: 0; }
.topbar-abo .pre {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75;
}
.topbar-abo .name { font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em; }
.topbar-abo .label-stack { display: flex; flex-direction: column; line-height: 1.15; }
.topbar-abo.abo-free   { background: #F3F4F6; color: #374151; border-color: #D1D5DB; }
.topbar-abo.abo-bronze { background: #FFEDD5; color: #92400E; border-color: #FED7AA; }
.topbar-abo.abo-silber { background: #F3F4F6; color: #374151; border-color: #9CA3AF; }
.topbar-abo.abo-gold   { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.topbar-abo.abo-platin { background: #EDE9FE; color: #5B21B6; border-color: #C7D2FE; }
@media (max-width: 1100px) {
  .topbar-mandant .pre, .topbar-abo .pre { display: none; }
  .topbar-mandant .name { max-width: 120px; }
}
@media (max-width: 767px) {
  .topbar-context { gap: 6px; }
  .topbar-mandant { padding: 4px 8px; max-width: 150px; }
  .topbar-mandant .name { max-width: 96px; font-size: 11.5px; }
  .topbar-abo .name { font-size: 11.5px; }
  .topbar-abo { padding: 4px 8px; }
}