/* ============================================================
   emons Tracking & Tracing – Prototyp Stylesheet
   CI-konform nach „Visual Identity Guidelines Emons 04/2025"
   ============================================================ */

:root {
  /* --- Brand-Farben (offizielle CI) --- */
  --c-pomegranate: #C00719;
  --c-cherry:      #720007;
  --c-raspberry:   #990009;
  --c-strawberry:  #DF3134;
  --c-peach:       #F83E42;
  --c-apricot:     #FFB79D;
  --c-butternut:   #FFDCBD;
  --c-vanilla:     #FFFBDF;

  /* --- Neutraltöne (CI) --- */
  --c-black:       #000000;
  --c-dark-grey:   #838181;
  --c-medium-grey: #CCCCCC;
  --c-light-grey:  #E3E3E3;
  --c-soft-grey:   #F3F3F3;
  --c-white:       #FFFFFF;

  /* --- Semantische Aliase fürs UI --- */
  --bg-primary:   var(--c-white);
  --bg-secondary: var(--c-soft-grey);
  --bg-brand:     var(--c-pomegranate);

  --text-primary:   var(--c-black);
  --text-secondary: var(--c-dark-grey);
  --text-on-brand:  var(--c-vanilla);

  --border:        var(--c-soft-grey);
  --border-strong: var(--c-light-grey);

  /* --- Status-Farben ---
     Reklamation = Pomegranate (CI-konform).
     Andere Status sind funktional, harmonieren aber mit der CI. */
  --status-planned:      var(--c-dark-grey);
  --status-planned-bg:   var(--c-soft-grey);
  --status-transit:      #1B4FA8;     /* ruhiges Blau, kein konkurrierender Akzent */
  --status-transit-bg:   #E4EDFA;
  --status-delivery:     #6B2D8C;     /* Lila – klar abgegrenzt zum Roten */
  --status-delivery-bg:  #F2E8F8;
  --status-delivered:    #1F7A4D;     /* gedecktes, professionelles Grün */
  --status-delivered-bg: #DFF1E7;
  --status-delayed:      #B86A00;     /* Butternut-naher Akzent statt Standard-Orange */
  --status-delayed-bg:   var(--c-butternut);
  --status-problem:      var(--c-pomegranate);
  --status-problem-bg:   #FBE0E2;     /* heller Tint des Pomegranate */

  /* --- Kompatibilitäts-Aliase (für Inline-Styles aus früheren Iterationen) --- */
  --gray-0:   var(--c-white);
  --gray-50:  var(--c-soft-grey);
  --gray-100: var(--c-soft-grey);
  --gray-200: var(--c-light-grey);
  --gray-300: var(--c-medium-grey);
  --gray-400: var(--c-dark-grey);
  --gray-500: var(--c-dark-grey);
  --gray-600: #4A4A4A;
  --gray-700: #2E2E2E;
  --gray-800: #1A1A1A;
  --gray-900: var(--c-black);

  /* --- Layout-Tokens --- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);

  /* --- Typografie ---
     Primärschrift: Clash Grotesk (Indian Type Foundry) via Fontshare.
     Brand-Schrift „Lemons" wird ausschließlich über das Logo-Bild abgebildet. */
  --font-sans: 'Clash Grotesk', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* ---------- Navbar (heller Hintergrund nach CI) ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  /* CI: Hintergrund „Alternativ Pomegranate", Kante Cherry (EIP-941) */
  background: var(--c-pomegranate);
  border-bottom: 1px solid var(--c-cherry);
}

.navbar-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  height: 64px;
  padding-right: 24px;
  border-right: 1px solid var(--c-raspberry);
  flex: 0 0 auto;   /* das Logo darf in schmalen Fenstern nicht zusammengedrueckt werden */
}
/* Primärlogo (Vanilla + Schlagschatten) direkt auf Rot; 32 px in 64 px
   Leiste = Schutzzone von einer halben Logohöhe oben und unten. */
.brand-logo-img {
  height: 32px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.nav-links a {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--c-butternut);
  font-weight: 500;
  font-size: 14px;
  transition: all .15s;
}
.nav-links a:hover { background: var(--c-raspberry); color: var(--c-vanilla); }
.nav-links a.active {
  background: var(--c-vanilla);
  color: var(--c-pomegranate);
  font-weight: 600;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--c-vanilla);
  position: relative;
}
.nav-icon-btn:hover { background: var(--c-raspberry); color: var(--c-vanilla); }
.nav-icon-btn .dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 8px; height: 8px;
  background: var(--c-butternut);
  border-radius: 50%;
  border: 2px solid var(--c-pomegranate);
}

/* Sprachschalter (Navbar + standalone) */
.lang-switcher { position: relative; }
.lang-btn { display: inline-flex; align-items: center; }
.lang-btn .flag { font-size: 14px; line-height: 1; }
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--c-white);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px;
  min-width: 180px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.lang-menu a:hover { background: var(--bg-secondary); }
.lang-menu a.active {
  background: var(--c-vanilla);
  color: var(--c-pomegranate);
  font-weight: 500;
}
.lang-menu .flag { font-size: 16px; line-height: 1; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
}
/* Die Cherry-Pille gehört nur zum angemeldeten Zustand (Avatar + Name).
   Ohne Sitzung steht im Chip allein der Anmelde-Knopf, und der stand sonst
   auf einer dunklen Fläche, als läge er über einem zweiten Knopf (EIP-941). */
.user-chip:has(.user-chip-btn) {
  padding: 4px 14px 4px 4px;
  background: var(--c-cherry);
}
.user-chip > button { color: var(--c-vanilla); }
.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-vanilla);
  color: var(--c-pomegranate);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 12px;
}
.user-chip .name { font-size: 13px; font-weight: 500; color: var(--c-vanilla); white-space: nowrap; }

/* Benutzer-Menü: Avatar/Name im Chip ist der Auslöser (Profil, Einstellungen,
   Über Live Tracking). Positionierung analog zum Sprachschalter. */
.user-chip { position: relative; }
.user-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: 999px;
}
.user-chip-btn:hover .name { color: var(--c-butternut); }

/* Schmale Fenster (Tablet): Name im Chip weg, Abstände enger — sonst bricht
   der Name dreizeilig um und schiebt die Leiste aus dem Fenster. */
@media (max-width: 1100px) {
  .navbar-inner { gap: 16px; padding: 0 16px; }
  .brand { padding-right: 16px; }
  .nav-links a { padding: 8px 10px; }
  .user-chip .name { display: none; }
  .user-chip:has(.user-chip-btn) { padding: 4px; }
}
.user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--c-white);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px;
  min-width: 220px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.user-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.user-menu button:hover { background: var(--bg-secondary); }
.user-menu button [data-lucide],
.user-menu button svg { width: 15px; height: 15px; color: var(--text-secondary); }

/* Leichtgewichtiger Dialog (Benutzer-Menü) — natives <dialog> */
.tt-dialog {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 0;
  min-width: 320px;
  max-width: min(520px, calc(100vw - 32px));
  background: var(--c-white);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}
.tt-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.tt-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.tt-dialog-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.tt-dialog-body { padding: 16px; font-size: 13px; }
.tt-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.tt-dl dt { color: var(--text-secondary); }
.tt-dl dd { margin: 0; word-break: break-word; }
.tt-field-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.tt-lang-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-hint { margin: 14px 0 0; font-size: 12px; color: var(--text-secondary); }

/* Build-Version des Servers (Navbar, EIP-777) — dezent, Details im Tooltip */
.app-version {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-butternut);
  background: var(--c-cherry);
  border-radius: 999px;
  padding: 3px 8px;
  cursor: default;
  white-space: nowrap;
}

/* ---------- Layout ---------- */
.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.5px;
}
.page-subtitle { color: var(--text-secondary); margin: 4px 0 0; font-size: 14px; }

/* ---------- Buttons (CI: Pastell-Kombinationen) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--c-white);
  color: var(--text-primary);
  font-family: inherit;
  font-weight: 500;
  font-size: 13px;
  transition: all .15s;
  white-space: nowrap;
}
.btn:hover {
  background: var(--bg-secondary);
  border-color: var(--c-medium-grey);
}

/* Primärer Aktions-Button: Peach + Butternut (CI Button-Variante 1) */
.btn-primary {
  background: var(--c-peach);
  border-color: var(--c-peach);
  color: var(--c-butternut);
}
.btn-primary:hover {
  background: var(--c-strawberry);
  border-color: var(--c-strawberry);
  color: var(--c-vanilla);
}

/* Sekundärer Button: Apricot + Raspberry (CI Button-Variante 2) */
.btn-secondary {
  background: var(--c-apricot);
  border-color: var(--c-apricot);
  color: var(--c-raspberry);
}
.btn-secondary:hover {
  background: #FFA487;
  border-color: #FFA487;
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
}
.btn-ghost:hover { background: var(--bg-secondary); }
.btn-sm { padding: 6px 10px; font-size: 12px; gap: 6px; }
.btn-icon { padding: 8px; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-padded { padding: 20px; }
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.card-body { padding: 20px; }

/* ---------- Smart Search Hero (Pomegranate-Rot, CI-Brand-Moment) ---------- */
.hero {
  background: var(--c-pomegranate);
  color: var(--c-vanilla);
  border-radius: var(--radius-xl);
  padding: 40px 40px 32px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
/* Großes "E" als angeschnittenes Brand-Element (CI-Grafik-Vorgabe S. 23) */
.hero::after {
  content: 'E';
  position: absolute;
  right: -60px;
  top: -40px;
  font-size: 480px;
  font-weight: 700;
  font-style: italic;
  color: var(--c-cherry);
  opacity: 0.55;
  line-height: 1;
  pointer-events: none;
  font-family: Georgia, 'Times New Roman', serif;
  transform: skewX(-8deg);
}
.hero > * { position: relative; z-index: 1; }

.hero h1 {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.5px;
  color: var(--c-vanilla);
}
.hero p {
  margin: 0 0 24px;
  color: var(--c-butternut);
  font-size: 15px;
  max-width: 540px;
}

.smart-search {
  display: flex;
  align-items: center;
  background: var(--c-white);
  border-radius: 12px;
  padding: 6px 6px 6px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  max-width: 760px;
}
.smart-search-icon { color: var(--text-secondary); margin-right: 12px; }
.smart-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  padding: 12px 0;
  color: var(--text-primary);
  background: transparent;
}
.smart-search input::placeholder { color: var(--text-secondary); opacity: 0.7; }
.smart-search .btn-primary {
  padding: 12px 22px;
  font-size: 14px;
}

.search-hints {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.search-hint {
  font-size: 12px;
  color: var(--c-butternut);
  background: rgba(255, 251, 223, 0.10);
  border: 1px solid rgba(255, 251, 223, 0.22);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.search-hint:hover { background: rgba(255, 251, 223, 0.18); color: var(--c-vanilla); }
.search-hint kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 6px;
  color: var(--c-vanilla);
}

/* ---------- KPI Cards ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.kpi {
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  position: relative;
  transition: all .15s;
  cursor: pointer;
}
.kpi:hover { box-shadow: var(--shadow); transform: translateY(-1px); border-color: var(--c-medium-grey); }
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-value {
  font-size: 30px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}
.kpi-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kpi-trend.up { color: var(--status-delivered); }
.kpi-trend.down { color: var(--c-pomegranate); }
.kpi-trend.neutral { color: var(--text-secondary); }

.kpi-icon {
  position: absolute;
  top: 18px; right: 18px;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.kpi-icon.blue  { background: var(--status-transit-bg);   color: var(--status-transit); }
.kpi-icon.green { background: var(--status-delivered-bg); color: var(--status-delivered); }
.kpi-icon.amber { background: var(--c-butternut);         color: var(--c-cherry); }
.kpi-icon.red   { background: var(--status-problem-bg);   color: var(--c-pomegranate); }

/* ---------- Status pill ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status.planned   { color: var(--status-planned);   background: var(--status-planned-bg); }
.status.transit   { color: var(--status-transit);   background: var(--status-transit-bg); }
.status.delivery  { color: var(--status-delivery);  background: var(--status-delivery-bg); }
.status.delivered { color: var(--status-delivered); background: var(--status-delivered-bg); }
.status.delayed   { color: var(--c-cherry);         background: var(--status-delayed-bg); }
.status.problem   { color: var(--status-problem);   background: var(--status-problem-bg); }

/* ---------- Filter chips ---------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 12px;
}
.section-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.section-head .more { font-size: 12px; color: var(--text-secondary); }
.section-head .more:hover { color: var(--c-pomegranate); }

.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.chip:hover { border-color: var(--c-medium-grey); background: var(--bg-secondary); }
.chip.active {
  background: var(--c-pomegranate);
  border-color: var(--c-pomegranate);
  color: var(--c-vanilla);
}
.chip .count {
  background: var(--bg-secondary);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.chip.active .count {
  background: var(--c-cherry);
  color: var(--c-vanilla);
}
.chip-add {
  background: transparent;
  border-style: dashed;
  color: var(--text-secondary);
}

/* ---------- Recent shipments / table ---------- */
.recent-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
@media (max-width: 980px) {
  .recent-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.shipment-list {
  display: flex;
  flex-direction: column;
}
.shipment-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.shipment-row:last-child { border-bottom: none; }
.shipment-row:hover { background: var(--bg-secondary); }
.shipment-id {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.shipment-route {
  font-size: 13px;
  color: var(--text-primary);
}
.shipment-route .arrow { color: var(--text-secondary); margin: 0 6px; }
.shipment-route .city { font-weight: 500; }
.shipment-meta { font-size: 12px; color: var(--text-secondary); }
.shipment-eta {
  text-align: right;
  font-size: 12px;
  color: var(--text-secondary);
}
.shipment-eta strong { display: block; color: var(--text-primary); font-size: 13px; font-weight: 600; }

/* ---------- Advanced search (collapsed) ---------- */
.adv-search {
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
  overflow: hidden;
}
.adv-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
}
.adv-search-head:hover { background: var(--bg-secondary); }
.adv-search-head .title {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--text-primary);
}
.adv-search-head .chev { transition: transform .2s; color: var(--text-secondary); }
.adv-search.open .chev { transform: rotate(180deg); }
.adv-search-body { display: none; padding: 0 20px 20px; border-top: 1px solid var(--border); }
.adv-search.open .adv-search-body { display: block; }

.tab-row {
  display: flex;
  gap: 4px;
  margin: 16px 0 20px;
  border-bottom: 1px solid var(--border-strong);
}
.tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--c-pomegranate); border-bottom-color: var(--c-pomegranate); }

.field-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px) { .field-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .field-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}
.field input, .field select {
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
  transition: all .15s;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--c-pomegranate);
  box-shadow: 0 0 0 3px var(--status-problem-bg);
}
.field-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---------- Results table (Übersicht) ---------- */
.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.results-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.results-count {
  font-size: 14px;
  color: var(--text-primary);
}
.results-count strong { color: var(--text-primary); font-weight: 700; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--bg-secondary);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-primary);
}
.filter-chip .x {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.filter-chip .x:hover { background: var(--c-medium-grey); }

.toolbar-actions { display: flex; gap: 8px; align-items: center; }

.table-wrap {
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
table.shipments {
  width: 100%;
  border-collapse: collapse;
}
table.shipments th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
  cursor: pointer;
}
table.shipments th:hover { color: var(--text-primary); }
table.shipments th.sorted::after {
  content: ' ↓';
  color: var(--c-pomegranate);
}
table.shipments td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-primary);
  vertical-align: middle;
}
table.shipments tr { cursor: pointer; transition: background .15s; }
table.shipments tbody tr:hover { background: var(--bg-secondary); }
/* Zuletzt geöffnete Sendung (EIP-998): Vanilla statt des Hover-Graus, links
   ein Strich in Pomegranate — wie in der Trefferliste des Portals (EIP-997). */
table.shipments tbody tr.aktiv, table.shipments tbody tr.aktiv:hover { background: var(--c-vanilla); }
table.shipments tbody tr.aktiv td:first-child { box-shadow: inset 3px 0 0 var(--c-pomegranate); }
table.shipments tbody tr:last-child td { border-bottom: none; }

.cell-id { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); }
.cell-party {
  display: flex; flex-direction: column;
  line-height: 1.3;
}
.cell-party .name { font-weight: 500; color: var(--text-primary); }
.cell-party .loc { font-size: 12px; color: var(--text-secondary); }
.cell-eta-late { color: var(--c-pomegranate); font-weight: 600; }
.cell-eta-ok   { color: var(--status-delivered); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--border-strong);
  background: var(--bg-secondary);
}
.pagination-info { font-size: 13px; color: var(--text-secondary); }
.pagination-controls { display: flex; gap: 4px; }
.page-btn {
  min-width: 30px;
  height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-primary);
  font-family: inherit;
  font-size: 12px;
  color: var(--text-secondary);
}
.page-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }
.page-btn.active {
  background: var(--c-pomegranate);
  color: var(--c-vanilla);
  border-color: var(--c-pomegranate);
}

/* ---------- Details page ---------- */
.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-strong);
}
.detail-title-block { flex: 1; }
.detail-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-secondary);
  margin-bottom: 10px;
}
.detail-breadcrumb a:hover { color: var(--c-pomegranate); }
.detail-id {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
.detail-route {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-primary);
}
.detail-route .arrow { color: var(--text-secondary); margin: 0 8px; }

.detail-actions { display: flex; gap: 8px; }

/* Popover „Empfänger-Link kopieren“ (EIP-984), im Stil des Sprachmenüs */
.link-popover-anker { position: relative; display: inline-flex; }
.link-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--c-white);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 240px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.link-popover-kopf { display: flex; align-items: flex-start; gap: 8px; }
.link-popover-symbol { flex: none; display: inline-flex; width: 18px; height: 18px; color: var(--status-delivered); }
.link-popover.fehler .link-popover-symbol { color: var(--status-problem); }
.link-popover-symbol svg { width: 18px; height: 18px; }
.link-popover-meldung { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-primary); line-height: 18px; }
.link-popover-schliessen {
  flex: none; border: 0; background: none; cursor: pointer; padding: 0 2px;
  font-size: 16px; line-height: 18px; color: var(--text-secondary);
}
.link-popover-schliessen:hover { color: var(--text-primary); }
.link-popover-oeffnen {
  display: inline-block; margin: 8px 0 0 26px;
  font-size: 13px; color: var(--c-pomegranate); text-decoration: underline;
}
.link-popover-oeffnen:hover { color: var(--c-raspberry); }

.detail-grid {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  gap: 24px;
}
@media (max-width: 1200px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* Map */
.map-wrap {
  position: relative;
  /* Eigener Stacking-Context: hält Leaflets interne z-index-Ebenen (Panes/
     Controls/Popups bis 1000) innerhalb der Karte, damit sie beim Scrollen
     nicht über die sticky Navbar (z-index 100) liegen. */
  z-index: 0;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 300px;
  margin-bottom: 20px;
  border: 1px solid var(--border-strong);
}
#map, #public-map, .map-wrap > .leaflet-container { width: 100%; height: 100%; }
/* Fallback-Hintergrund: falls die OSM-Kartenkacheln (einzige Netzabhängigkeit)
   nicht laden, bleibt eine ruhige „Schemakarte" mit Markern + Route sichtbar. */
.leaflet-container { background: #e6ebf0; }
.map-overlay {
  position: absolute;
  left: 16px; bottom: 16px;
  background: rgba(255,255,255,0.97);
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-size: 12px;
  z-index: 400;
}
.map-overlay strong { display: block; font-size: 13px; color: var(--text-primary); }

/* Timeline */
.timeline {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 9px; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--border-strong);
}
.timeline li {
  position: relative;
  padding: 0 0 22px 32px;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.timeline li.done .timeline-dot {
  background: var(--status-delivered);
  border-color: var(--status-delivered);
  color: var(--c-vanilla);
}
.timeline li.current .timeline-dot {
  background: var(--c-pomegranate);
  border-color: var(--c-pomegranate);
  color: var(--c-vanilla);
  box-shadow: 0 0 0 4px var(--status-problem-bg);
}
.timeline li.problem .timeline-dot {
  background: var(--c-pomegranate);
  border-color: var(--c-pomegranate);
  color: var(--c-vanilla);
}
.timeline-event {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}
.timeline-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 4px;
  font-size: 12px; color: var(--text-secondary);
}
.timeline-meta .when { color: var(--text-primary); font-weight: 500; }
.timeline-note {
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--border-strong);
  font-size: 12px;
  color: var(--text-primary);
  border-radius: 4px;
}
.timeline li.problem .timeline-note {
  background: var(--status-problem-bg);
  border-left-color: var(--c-pomegranate);
  color: var(--c-cherry);
}

/* Info list */
.info-list { display: flex; flex-direction: column; gap: 14px; }
.info-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px;
}
.info-row .k { color: var(--text-secondary); }
.info-row .v { color: var(--text-primary); font-weight: 500; word-break: break-word; }
.info-row .v.mono { font-family: var(--font-mono); }

/* Versender/Empfänger (linke Spalte der Detailseiten): die Beschriftungsspalte
   ist so breit wie ihr längster Eintrag und keinen Pixel breiter. Die 120px der
   allgemeinen Regel rissen dort eine Lücke zwischen Beschriftung und Wert, die
   das Lesen erschwert — je nach Sprache stehen dort nur „Ort" oder „Rue".

   Warum das Raster auf der LISTE sitzt und nicht auf der Zeile: .info-row ist
   sonst je ein eigenes Raster, und `max-content` fiele pro Zeile anders aus —
   die Werte stünden treppenförmig versetzt. Auf der Liste teilen sich alle
   Zeilen eine Spaltenbreite; `display: contents` hebt die Zwischenbox der Zeile
   auf, damit .k und .v direkt in dieses Raster fallen. Die font-size wandert
   deshalb mit auf die Liste: sie hing an .info-row, deren Box hier wegfällt.

   Bewusst NICHT global geändert: die Card „Sendungsdaten" nutzt dieselbe Klasse
   und hat mit „Vyzvednutí plán/skutečnost" (cz, 26 Zeichen) Beschriftungen, für
   die die feste Spalte richtig ist. Ebenso bleiben public.html (#r-info)
   und dispo.html (#d-info) unberührt. */
#detail-sender,
#detail-recipient {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 14px 10px;
  align-items: start;
  font-size: 13px;
}
#detail-sender .info-row,
#detail-recipient .info-row { display: contents; }

/* NVEs/SSCC in den Sendungsdetails: die 20-stellige Nummer gehört in EINE
   Zeile. Vorher lief sie über .info-row und damit in die 120px-Spalte des
   Grids, wo word-break sie mitten in der Nummer umgebrochen hat. Sollte die
   Karte je schmaler als die Nummer werden, scrollt die Liste waagerecht. */
.nve-list { display: flex; flex-direction: column; gap: 8px; overflow-x: auto; }
.nve-item {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Auftragspositionen: eine Position = eine Zeile. Vorher lief jede Position
   über .info-row, wo die 120px-Spalte sowohl den Positionskopf als auch die
   Beschreibung umgebrochen hat. Breite Angaben scrollen waagerecht. */
.pos-list { display: flex; flex-direction: column; gap: 10px; overflow-x: auto; }
.pos-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
  white-space: nowrap;
}
.pos-item .pos-kopf { color: var(--text-secondary); }
.pos-item .pos-detail { color: var(--text-primary); font-weight: 500; }

/* Doc list */
.doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all .15s;
}
.doc-item:hover { border-color: var(--c-medium-grey); background: var(--bg-secondary); }
.doc-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--c-butternut);
  color: var(--c-cherry);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.doc-item .doc-info { flex: 1; line-height: 1.3; }
.doc-item .doc-info .name { font-weight: 500; font-size: 13px; color: var(--text-primary); }
.doc-item .doc-info .meta { font-size: 11px; color: var(--text-secondary); }

/* ETA banner */
.eta-banner {
  background: var(--status-delivered);
  color: var(--c-vanilla);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.eta-banner.late {
  background: var(--c-butternut);
  color: var(--c-cherry);
}
.eta-banner.problem {
  background: var(--c-pomegranate);
  color: var(--c-vanilla);
}
.eta-banner-icon {
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.18);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.eta-banner.late .eta-banner-icon {
  background: rgba(114, 0, 7, 0.15);
}
.eta-banner-label {
  font-size: 11px;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}
.eta-banner-value {
  font-size: 18px;
  font-weight: 600;
}

/* ---------- Public tracking page ---------- */
.public-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}
/* Kopfleiste in voller Breite, gleiche Markenfläche wie die Navbar (EIP-941).
   Steht im Markup vor .public-wrap; der Abstand darunter ist dessen Polster. */
.public-header {
  background: var(--c-pomegranate);
  color: var(--c-vanilla);
  border-bottom: 1px solid var(--c-cherry);
  height: 64px;
}
.public-header-inner {
  max-width: 760px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.public-header .brand-logo-img { height: 32px; }
.public-title {
  padding-left: 20px;
  border-left: 1px solid var(--c-raspberry);
  line-height: 32px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--c-vanilla);
}
.public-header-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.public-header #lang-select {
  padding: 6px 10px;
  background: transparent;
  color: var(--c-vanilla);
  border: 1px solid var(--c-raspberry);
}
.public-header #lang-select:hover { background: var(--c-raspberry); }
.public-header #lang-select option { color: var(--c-black); background: var(--c-white); }
.public-hero {
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 28px;
  margin-bottom: 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.public-hero .label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}
.public-hero .id {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 6px 0 16px;
}
.public-hero .big-status {
  font-size: 22px;
  font-weight: 600;
  color: var(--c-pomegranate);
  margin: 8px 0 4px;
}
.public-hero .arrival {
  font-size: 14px;
  color: var(--text-primary);
}
.public-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 28px 0 4px;
}
.progress-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}
.progress-step .icon-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.progress-step.done .icon-circle {
  background: var(--status-delivered);
  color: var(--c-vanilla);
  border-color: var(--status-delivered);
}
.progress-step.current .icon-circle {
  background: var(--c-pomegranate);
  color: var(--c-vanilla);
  border-color: var(--c-pomegranate);
  box-shadow: 0 0 0 4px var(--status-problem-bg);
}
.progress-step .label {
  font-size: 11px;
  text-align: center;
  color: var(--text-secondary);
  font-weight: 500;
}
.progress-step.done .label, .progress-step.current .label { color: var(--text-primary); }

.progress-line {
  flex: 0 0 auto;
  height: 2px;
  background: var(--border-strong);
  margin: 0 -4px;
  margin-top: -22px;
  position: relative;
  min-width: 30px;
  flex: 1;
}
.progress-line.done { background: var(--status-delivered); }

.notify-cta {
  background: var(--c-butternut);
  border: 1px solid var(--c-apricot);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.notify-cta .icon-bg {
  width: 44px; height: 44px;
  background: var(--c-apricot);
  color: var(--c-raspberry);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.notify-cta .text { flex: 1; }
.notify-cta .text strong { display: block; color: var(--c-cherry); }
.notify-cta .text span { font-size: 12px; color: var(--c-raspberry); }

/* ---------- Mobile driver view ---------- */
.mobile-frame {
  max-width: 420px;
  margin: 40px auto;
  background: var(--bg-primary);
  border-radius: 32px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  overflow: hidden;
  border: 8px solid var(--c-black);
}
.mobile-status-bar {
  background: var(--c-black);
  color: var(--c-white);
  font-size: 11px;
  padding: 6px 20px;
  display: flex;
  justify-content: space-between;
}
.mobile-header {
  background: var(--c-pomegranate);
  color: var(--c-vanilla);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-header .title { font-weight: 600; font-size: 15px; color: var(--c-vanilla); }
.mobile-header .meta { font-size: 12px; color: var(--c-butternut); }
.mobile-tabs {
  display: flex;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-strong);
}
.mobile-tabs .mt {
  flex: 1; padding: 12px;
  text-align: center;
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
}
.mobile-tabs .mt.active {
  color: var(--c-pomegranate);
  border-bottom-color: var(--c-pomegranate);
}
.mobile-stop {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.mobile-stop .num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.mobile-stop.current .num { background: var(--c-pomegranate); color: var(--c-vanilla); }
.mobile-stop.done .num { background: var(--status-delivered); color: var(--c-vanilla); }
.mobile-stop .stop-info { flex: 1; }
.mobile-stop .stop-info .city { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.mobile-stop .stop-info .addr { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.mobile-stop .stop-info .meta { font-size: 12px; color: var(--text-primary); margin-top: 6px; }
.mobile-bottom {
  padding: 16px 20px;
  border-top: 1px solid var(--border-strong);
  background: var(--bg-secondary);
}
.mobile-bottom .btn { width: 100%; justify-content: center; padding: 14px; font-size: 15px; }

/* ---------- Prototype Index ---------- */
.proto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.proto-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all .2s;
  cursor: pointer;
}
.proto-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--c-pomegranate); }
.proto-card .preview {
  height: 160px;
  background: var(--bg-secondary);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.proto-card .meta { padding: 16px 18px; }
.proto-card .meta h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.proto-card .meta p { margin: 0; font-size: 13px; color: var(--text-secondary); }
.proto-card .meta .tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  background: var(--c-butternut);
  color: var(--c-cherry);
  border-radius: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* ---------- Utility ---------- */
.hidden { display: none !important; }
.mono { font-family: var(--font-mono); }
.text-sm { font-size: 12px; }
.text-muted { color: var(--text-secondary); }
.flex { display: flex; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.items-center { align-items: center; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 20px; }

/* Fußbereich mit Impressum/Datenschutz (EIP-1043) */
.seiten-fuss { text-align: center; margin-top: 32px; }
.seiten-fuss a { margin-left: 12px; }

/* ---------- Bereichsleiste der Administration (EIP-1082) ---------- */
.admin-bereiche {
  position: sticky;
  top: 64px;
  z-index: 90;
  background: #fff;
  border-bottom: 1px solid var(--border-strong, #e5e5e5);
}
.admin-bereiche-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.admin-bereiche-inner::-webkit-scrollbar { display: none; }
.admin-bereiche a {
  padding: 13px 14px 11px;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  flex: 0 0 auto;
}
.admin-bereiche a:hover { color: var(--text-primary, #111); }
.admin-bereiche a[aria-current="page"] {
  color: var(--c-pomegranate);
  border-bottom-color: var(--c-pomegranate);
}

/* ---------- Benutzerverwaltung im Admin-Bereich (EIP-1088) ---------- */
.bv-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.bv-liste-wrap { overflow-x: auto; }
.bv-tabelle tbody tr { cursor: pointer; }
.bv-tabelle tbody tr:hover { background: var(--bg-secondary, #F7F7F7); }
.bv-tabelle tbody tr.ausgewaehlt { background: #FDF2F2; box-shadow: inset 3px 0 0 var(--c-pomegranate); }
.bv-tabelle tbody tr.bv-konto-gesperrt { color: var(--text-secondary); opacity: .7; }
.bv-nr { display: inline-block; margin: 0 6px 2px 0; }
.bv-nr.gesperrt { text-decoration: line-through; color: var(--text-secondary); }
.bv-detail { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 16px; min-width: 0; }
.bv-detail .empty { color: var(--text-secondary); font-style: italic; }
.bv-d-kopf { margin: 0 0 12px; font-size: 16px; word-break: break-all; }
.bv-nummern { list-style: none; margin: 0; padding: 0; }
.bv-nummern li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-soft, #eee); }
.bv-nummern .bv-nr-name { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.bv-d-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.bv-dlg-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
#bv-dlg-anlegen .admin-form .field, #bv-dlg-sperre .admin-form .field { flex: 1 1 auto; }
@media (max-width: 900px) { .bv-layout { grid-template-columns: minmax(0, 1fr); } }