/*
  ZeroDiff Auftragscockpit — High-End V2 / Modul 1
  Shared shell + design system only.

  IMPORTANT:
  - no business logic
  - no client-side permissions
  - no mock data
  - no workflow calculations
  - existing Django views, forms, URLs and POST actions remain authoritative
*/

:root {
  --zd-font: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;

  --zd-gold-1: #f3dfa8;
  --zd-gold-2: #d9b45b;
  --zd-gold-3: #a8813a;
  --zd-blue-1: #7fb4ff;
  --zd-blue-2: #3b82f6;
  --zd-blue-3: #1d4ed8;
  --zd-cyan: #4cc9f0;

  --zd-ok: #3ccb8c;
  --zd-warn: #f0a93b;
  --zd-bad: #f2637f;
  --zd-violet: #9c7bf5;

  --zd-bg: #050912;
  --zd-bg-deep: #03060d;
  --zd-surface: rgba(255, 255, 255, .035);
  --zd-surface-2: rgba(255, 255, 255, .055);
  --zd-surface-solid: #0b1425;
  --zd-panel-grad:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, .075),
      rgba(255, 255, 255, .018) 46%,
      rgba(255, 255, 255, .006)
    );

  --zd-line: rgba(255, 255, 255, .085);
  --zd-line-soft: rgba(255, 255, 255, .05);
  --zd-line-strong: rgba(255, 255, 255, .15);

  --zd-tx: #edf2fb;
  --zd-tx-2: #a9b8d0;
  --zd-tx-3: #6f82a0;

  --zd-shadow:
    0 30px 70px -30px rgba(0, 0, 0, .9),
    0 2px 0 rgba(255, 255, 255, .04) inset;
  --zd-shadow-sm: 0 12px 30px -18px rgba(0, 0, 0, .9);
  --zd-glow-blue:
    0 0 0 1px rgba(59, 130, 246, .25),
    0 18px 50px -22px rgba(59, 130, 246, .55);

  --zd-sidebar: 262px;
  --zd-maxw: 1680px;
  --zd-radius-xs: 8px;
  --zd-radius-sm: 12px;
  --zd-radius-md: 16px;
  --zd-radius-lg: 22px;
  --zd-radius-xl: 30px;
  --zd-ease: cubic-bezier(.22, .75, .28, 1);
  --zd-ease-out: cubic-bezier(.16, 1, .3, 1);

  --zd-hud: rgba(217, 180, 91, .75);
  --zd-bp: rgba(140, 180, 255, .055);

  /* Compatibility mapping for the frozen UI layers below this file. */
  --page-bg: var(--zd-bg);
  --navy: var(--zd-surface-solid);
  --navy-2: #070d18;
  --navy-3: rgba(255, 255, 255, .055);
  --anthra: #09111f;
  --line: var(--zd-line);
  --white: var(--zd-tx);
  --gray: var(--zd-tx-2);
  --gray-dim: var(--zd-tx-3);
  --gold: var(--zd-gold-2);
  --gold-dim: var(--zd-gold-2);
  --gold-soft: rgba(217, 180, 91, .13);
  --red: var(--zd-bad);
  --red-bg: rgba(242, 99, 127, .13);
  --orange: var(--zd-warn);
  --orange-bg: rgba(240, 169, 59, .13);
  --yellow: #e9c961;
  --yellow-bg: rgba(233, 201, 97, .13);
  --green: var(--zd-ok);
  --green-bg: rgba(60, 203, 140, .13);
  --blue: var(--zd-blue-2);
  --blue-dark: var(--zd-blue-3);
  --blue-bg: rgba(59, 130, 246, .14);
  --neutral-bg: rgba(255, 255, 255, .055);
  --sidebar-bg:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .05),
      rgba(255, 255, 255, .012)
    );
  --sidebar-line: var(--zd-line);
  --sidebar-text: var(--zd-tx-2);
  --sidebar-text-dim: var(--zd-tx-3);
  --sidebar-active-bg:
    linear-gradient(
      94deg,
      rgba(59, 130, 246, .20),
      rgba(59, 130, 246, .045) 62%,
      transparent
    );
  --sidebar-active-text: var(--zd-tx);
  --on-dark: #ffffff;
  --on-dark-dim: #b8c8e4;
  --on-dark-dim2: #7e93b8;
  --hero-grad:
    radial-gradient(120% 130% at 76% 12%, #081a3c 0%, #040a18 58%, #02050d 100%);
  --shadow-sm: var(--zd-shadow-sm);
  --shadow: var(--zd-shadow);
  --shadow-lg: 0 40px 90px -46px rgba(0, 0, 0, .95);
}

html[data-theme="dark"] {
  color-scheme: dark;
  background: var(--zd-bg);
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--zd-bg);
  color: var(--zd-tx);
  font-family: var(--zd-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      900px 520px at 78% -10%,
      rgba(59, 130, 246, .16),
      transparent 62%
    ),
    radial-gradient(
      700px 420px at 4% 104%,
      rgba(217, 180, 91, .10),
      transparent 60%
    );
}

::selection {
  background: rgba(217, 180, 91, .32);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 20px;
  background: var(--zd-line);
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--zd-line-strong);
  background-clip: content-box;
}

/* =========================================================
   APP SHELL
   ========================================================= */

.zd-v2-shell.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--zd-sidebar) minmax(0, 1fr);
  min-height: 100vh;
  background: transparent;
}

.zd-v2-shell .app-content {
  min-width: 0;
  min-height: 100vh;
  background: transparent;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.zd-v2-shell .sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  gap: 0;

  padding: 0;

  border-right: 1px solid var(--zd-line);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .05),
      rgba(255, 255, 255, .012)
    );
  backdrop-filter: blur(24px);
  color: var(--zd-tx-2);
}

.zd-v2-shell .sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(217, 180, 91, .45),
      rgba(59, 130, 246, .35),
      transparent
    );
}

.zd-v2-shell .brand {
  padding: 20px 18px 18px;
}

.zd-v2-shell .brand .logo {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--zd-tx);
}

.zd-v2-shell .brand .mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  background: linear-gradient(150deg, #12213c, #070e1d);
  color: var(--zd-gold-2);
  box-shadow:
    0 0 0 1px rgba(217, 180, 91, .35),
    0 12px 26px -14px rgba(217, 180, 91, .55);
  transform: none;
}

.zd-v2-shell .brand .mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, .22), transparent 46%);
  opacity: .6;
}

.zd-v2-shell .brand .mark svg {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
}

.zd-v2-shell .brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.zd-v2-shell .brand-copy strong {
  color: var(--zd-tx);
  font-size: 16.5px;
  font-weight: 680;
  letter-spacing: .02em;
}

.zd-v2-shell .brand-copy small {
  margin-top: 4px;
  color: var(--zd-gold-2);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.zd-v2-shell .brand-gold,
.zd-v2-shell .brand .sub {
  color: var(--zd-gold-2);
}

.zd-v2-shell nav.mainnav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 12px;
}

.zd-v2-shell .nav-label {
  padding: 16px 10px 7px;
  color: var(--zd-tx-3);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  opacity: .8;
}

.zd-v2-shell .nav-label-management {
  padding-top: 11px;
}

.zd-v2-shell .nav-divider {
  height: 1px;
  margin: 9px 10px 0;
  background: var(--zd-line-soft);
}

.zd-v2-shell .navitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;

  min-height: 40px;
  padding: 9.5px 12px;

  border: 1px solid transparent;
  border-radius: 11px;

  color: var(--zd-tx-2);
  background: transparent;

  font-size: 13.5px;
  font-weight: 520;
  text-decoration: none;

  transition:
    color .25s var(--zd-ease),
    background .25s var(--zd-ease),
    transform .25s var(--zd-ease),
    box-shadow .25s var(--zd-ease);
}

.zd-v2-shell .navitem:hover {
  color: var(--zd-tx);
  background: var(--zd-surface-2);
}

.zd-v2-shell .navitem:active {
  transform: scale(.985);
}

.zd-v2-shell .navitem.active {
  color: var(--zd-tx);
  border-color: rgba(127, 180, 255, .16);
  background:
    linear-gradient(
      94deg,
      rgba(59, 130, 246, .20),
      rgba(59, 130, 246, .045) 62%,
      transparent
    );
  box-shadow: inset 0 0 0 1px rgba(127, 180, 255, .04);
  font-weight: 600;
}

.zd-v2-shell .navitem.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 3px;
  height: 22px;
  border-radius: 0 4px 4px 0;
  transform: translateY(-50%);
  background: linear-gradient(180deg, var(--zd-gold-1), var(--zd-gold-3));
  box-shadow: 0 0 14px 1px rgba(217, 180, 91, .75);
}

.zd-v2-shell .navitem.active::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(
      115deg,
      var(--zd-gold-2) 0 1.4px,
      transparent 1.4px 4.4px
    );
  opacity: .55;
}

.zd-v2-shell .nav-ic {
  display: flex;
  flex: 0 0 auto;
  color: currentColor;
  opacity: .86;
}

.zd-v2-shell .navitem.active .nav-ic {
  color: var(--zd-blue-1);
  opacity: 1;
}

.zd-v2-shell .sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--zd-line-soft);
}

.zd-v2-shell .sidebar-foot::before {
  display: none;
}

.zd-v2-shell .zd-org-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--zd-line-soft);
  border-radius: 12px;
  background: var(--zd-surface);
}

.zd-v2-shell .zd-org-mark {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border-radius: 8px;
  color: #1a1206;
  background: linear-gradient(145deg, var(--zd-gold-2), var(--zd-gold-3));
  font-size: 11px;
  font-weight: 800;
}

.zd-v2-shell .zd-org-card strong,
.zd-v2-shell .zd-org-card small {
  display: block;
}

.zd-v2-shell .zd-org-card strong {
  color: var(--zd-tx);
  font-size: 12.5px;
  font-weight: 600;
}

.zd-v2-shell .zd-org-card small {
  color: var(--zd-tx-3);
  font-size: 10px;
}

.zd-v2-shell .sidebar-version {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 10px 0;
  color: var(--zd-tx-3);
  font-size: 10px;
  letter-spacing: .04em;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.zd-v2-shell .topbar {
  position: sticky;
  top: 0;
  z-index: 30;

  display: flex;
  align-items: center;
  gap: 14px;

  min-height: 62px;
  padding: 11px 22px;

  border-bottom: 1px solid var(--zd-line);
  background: rgba(7, 13, 24, .82);
  backdrop-filter: blur(26px);
  box-shadow: none;
}

.zd-v2-shell .topbar .topbar-search,
.zd-v2-shell .searchbox {
  display: flex;
  align-items: center;
  gap: 7px;

  width: min(760px, 100%);
  max-width: 760px;
  margin: 0;
  padding: 3px;

  border: 1px solid var(--zd-line-soft);
  border-radius: 11px;
  background: var(--zd-surface-2);
  color: var(--zd-tx-3);
  box-shadow: none;

  transition:
    border-color .28s var(--zd-ease),
    box-shadow .28s var(--zd-ease),
    background .28s var(--zd-ease);
}

.zd-v2-shell .topbar .topbar-search:hover {
  border-color: var(--zd-line-strong);
}

.zd-v2-shell .topbar .topbar-search:focus-within {
  border-color: rgba(127, 180, 255, .5);
  background: rgba(255, 255, 255, .07);
  box-shadow: var(--zd-glow-blue);
}

.zd-v2-shell .topbar-search-main {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  gap: 10px;
  min-width: 170px;
  padding: 0 9px;
  color: var(--zd-tx-3);
}

.zd-v2-shell .topbar-search-main input,
.zd-v2-shell .searchbox input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--zd-tx);
  font-size: 13px;
}

.zd-v2-shell .topbar-search-main input::placeholder,
.zd-v2-shell .searchbox input::placeholder {
  color: var(--zd-tx-3);
}

.zd-v2-shell .zd-search-hint {
  flex: 0 0 auto;
  padding: 2.5px 6px;
  border: 1px solid var(--zd-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  color: var(--zd-tx-3);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.zd-v2-shell .topbar-status {
  min-height: 31px;
  padding: 4px 27px 4px 10px;
  border: 0;
  border-left: 1px solid var(--zd-line);
  background-color: transparent;
  color: var(--zd-tx-2);
  font-size: 11.5px;
}

.zd-v2-shell .topbar-status option {
  color: var(--zd-tx);
  background: #0b1425;
}

.zd-v2-shell .topbar-overdue {
  min-height: 31px;
  padding: 0 8px;
  border-left: 1px solid var(--zd-line);
  color: var(--zd-tx-2);
  font-size: 11px;
  font-weight: 600;
}

.zd-v2-shell .topbar-overdue input {
  accent-color: var(--zd-gold-2);
}

.zd-v2-shell .topbar-filter-submit {
  min-height: 31px;
  padding: 4px 11px;
  border: 1px solid var(--zd-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .05);
  color: var(--zd-tx-2);
  font-size: 11px;
  font-weight: 650;
  transition: .24s var(--zd-ease);
}

.zd-v2-shell .topbar-filter-submit:hover {
  border-color: rgba(127, 180, 255, .35);
  background: rgba(59, 130, 246, .12);
  color: var(--zd-blue-1);
}

.zd-v2-shell .topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.zd-v2-shell .logout-form {
  display: flex;
  margin: 0;
}

/* =========================================================
   BUTTONS / USER PILL
   ========================================================= */

.zd-v2-shell .btn {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--zd-line);
  border-radius: 10px;
  background: var(--zd-surface-2);
  color: var(--zd-tx);
  font-size: 12.5px;
  font-weight: 600;
  transition:
    border-color .26s var(--zd-ease),
    transform .26s var(--zd-ease),
    box-shadow .26s var(--zd-ease),
    background .26s var(--zd-ease);
}

.zd-v2-shell .btn:hover {
  border-color: var(--zd-line-strong);
  background: rgba(255, 255, 255, .075);
  transform: translateY(-1px);
}

.zd-v2-shell .btn:active {
  transform: translateY(0) scale(.985);
}

.zd-v2-shell .btn-gold {
  border-color: transparent;
  color: #1a1206;
  background:
    linear-gradient(
      140deg,
      var(--zd-gold-1),
      var(--zd-gold-2) 52%,
      var(--zd-gold-3)
    );
  box-shadow: 0 14px 32px -16px rgba(217, 180, 91, .85);
}

.zd-v2-shell .btn-gold:hover {
  border-color: transparent;
  background:
    linear-gradient(
      140deg,
      #f8e8bb,
      var(--zd-gold-2) 52%,
      #96702f
    );
  box-shadow: 0 18px 40px -16px rgba(217, 180, 91, 1);
}

.zd-v2-shell .btn-blue {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(140deg, var(--zd-blue-2), var(--zd-blue-3));
}

.zd-v2-shell .btn-sm {
  min-height: 31px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 12px;
}

.zd-v2-shell .icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--zd-tx-2);
  transition: .24s var(--zd-ease);
}

.zd-v2-shell .icon-btn:hover {
  border-color: transparent;
  background: var(--zd-surface-2);
  color: var(--zd-tx);
}

.zd-v2-shell .account-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 9px 5px 5px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  transition: background .24s var(--zd-ease);
}

.zd-v2-shell .account-pill:hover {
  background: var(--zd-surface-2);
}

.zd-v2-shell .account-pill .avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #2d4a7c, #16233c);
  box-shadow: 0 0 0 1px var(--zd-line-strong);
  font-size: 12px;
  font-weight: 700;
}

.zd-v2-shell .account-pill.mgmt .avatar {
  color: #1b1305;
  background: linear-gradient(145deg, var(--zd-gold-2), var(--zd-gold-3));
}

.zd-v2-shell .account-pill .who {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.zd-v2-shell .account-pill .nm {
  color: var(--zd-tx);
  font-size: 12.5px;
  font-weight: 600;
}

.zd-v2-shell .account-pill .rl {
  margin-top: 2px;
  color: var(--zd-gold-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* =========================================================
   MAIN / SHARED SURFACES
   ========================================================= */

.zd-v2-shell .main-content {
  width: 100%;
  max-width: var(--zd-maxw);
  margin: 0 auto;
  padding: 22px 22px 60px;
  color: var(--zd-tx);
}

.zd-v2-shell h1.page-title,
.zd-v2-shell .customer-title,
.zd-v2-shell .order-detail-head h1 {
  color: var(--zd-tx);
  font-weight: 670;
  letter-spacing: -.026em;
}

.zd-v2-shell .page-sub,
.zd-v2-shell .customer-subtitle {
  color: var(--zd-tx-2);
}

.zd-v2-shell ./* alte spezielle Notizkarten-Höhenregel entfernt */

.zd-v2-shell .section-title::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 8px;
  margin-right: 9px;
  vertical-align: 1px;
  background:
    repeating-linear-gradient(
      115deg,
      var(--zd-gold-2) 0 1.6px,
      transparent 1.6px 5px
    );
  opacity: .85;
}

/* Shared high-end surface treatment. */
.zd-v2-shell .row-card,
.zd-v2-shell .customer-card,
.zd-v2-shell .customer-panel,
.zd-v2-shell .customer-form-card,
.zd-v2-shell .order-detail-card,
.zd-v2-shell .management-kpi,
.zd-v2-shell .management-secondary-kpi,
.zd-v2-shell .management-table-wrap,
.zd-v2-shell .management-row,
.zd-v2-shell .followup-stat,
.zd-v2-shell .dashboard-performance-card,
.zd-v2-shell .dashboard-ranking-card {
  border-color: var(--zd-line);
  background-image:
    linear-gradient(var(--zd-bp) 1px, transparent 1px),
    linear-gradient(90deg, var(--zd-bp) 1px, transparent 1px),
    var(--zd-panel-grad);
  background-size: 34px 34px, 34px 34px, auto;
  background-position: center, center, 0 0;
  color: var(--zd-tx);
  box-shadow: var(--zd-shadow-sm);
}

.zd-v2-shell .row-card,
.zd-v2-shell .customer-card,
.zd-v2-shell .order-detail-card,
.zd-v2-shell .management-kpi,
.zd-v2-shell .dashboard-performance-card,
.zd-v2-shell .dashboard-ranking-card {
  position: relative;
  overflow: hidden;
}

.zd-v2-shell .row-card::after,
.zd-v2-shell .customer-card::after,
.zd-v2-shell .order-detail-card::after,
.zd-v2-shell .management-kpi::after,
.zd-v2-shell .dashboard-performance-card::after,
.zd-v2-shell .dashboard-ranking-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(to left, var(--zd-hud) 0 18px, transparent 18px) top right / 100% 1px no-repeat,
    linear-gradient(to bottom, var(--zd-hud) 0 18px, transparent 18px) top right / 1px 100% no-repeat,
    linear-gradient(to right, var(--zd-hud) 0 18px, transparent 18px) bottom left / 100% 1px no-repeat,
    linear-gradient(to top, var(--zd-hud) 0 18px, transparent 18px) bottom left / 1px 100% no-repeat;
  opacity: .8;
}

.zd-v2-shell .row-card:hover,
.zd-v2-shell .customer-card:hover,
.zd-v2-shell .management-row:hover {
  border-color: var(--zd-line-strong);
  box-shadow:
    var(--zd-shadow),
    0 22px 46px -28px rgba(59, 130, 246, .5);
  transform: translateY(-2px);
}

.zd-v2-shell .avatar-circle {
  border: 1px solid var(--zd-line-strong);
  color: var(--zd-tx);
  background: linear-gradient(145deg, #2d4a7c, #16233c);
  box-shadow: none;
}

.zd-v2-shell .badge {
  border: 0;
  box-shadow: none;
}

.zd-v2-shell .badge-blue {
  color: var(--zd-blue-1);
  background: rgba(59, 130, 246, .14);
}

.zd-v2-shell .badge-green {
  color: var(--zd-ok);
  background: rgba(60, 203, 140, .14);
}

.zd-v2-shell .badge-red {
  color: var(--zd-bad);
  background: rgba(242, 99, 127, .14);
}

.zd-v2-shell .badge-orange,
.zd-v2-shell .badge-yellow {
  color: var(--zd-warn);
  background: rgba(240, 169, 59, .14);
}

.zd-v2-shell .badge-neutral {
  color: var(--zd-tx-2);
  background: rgba(255, 255, 255, .06);
}

.zd-v2-shell input,
.zd-v2-shell select,
.zd-v2-shell textarea,
.zd-v2-shell .textinput,
.zd-v2-shell .customer-input,
.zd-v2-shell .customer-select {
  color: var(--zd-tx);
  border-color: var(--zd-line);
  background: var(--zd-surface-2);
}

.zd-v2-shell input::placeholder,
.zd-v2-shell textarea::placeholder {
  color: var(--zd-tx-3);
}

.zd-v2-shell input:focus,
.zd-v2-shell select:focus,
.zd-v2-shell textarea:focus {
  border-color: rgba(127, 180, 255, .55);
  box-shadow: var(--zd-glow-blue);
}

.zd-v2-shell table,
.zd-v2-shell th,
.zd-v2-shell td {
  border-color: var(--zd-line-soft);
}

.zd-v2-shell th {
  color: var(--zd-tx-3);
}

.zd-v2-shell td {
  color: var(--zd-tx-2);
}

.zd-v2-shell td strong,
.zd-v2-shell td.strong,
.zd-v2-shell .strong {
  color: var(--zd-tx);
}

/* =========================================================
   SHARED MOTION / ACCESSIBILITY
   ========================================================= */

.zd-v2-shell .main-content > * {
  animation: zd-view-in .5s var(--zd-ease-out) both;
}

@keyframes zd-view-in {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.zd-v2-shell button:focus-visible,
.zd-v2-shell a:focus-visible,
.zd-v2-shell input:focus-visible,
.zd-v2-shell select:focus-visible,
.zd-v2-shell textarea:focus-visible {
  outline: none;
  box-shadow: var(--zd-glow-blue);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
  :root {
    --zd-sidebar: 76px;
  }

  .zd-v2-shell .brand {
    padding-inline: 18px;
  }

  .zd-v2-shell .brand-copy,
  .zd-v2-shell .navitem > span:not(.nav-ic),
  .zd-v2-shell .nav-label,
  .zd-v2-shell .zd-org-card > span:last-child,
  .zd-v2-shell .sidebar-version {
    display: none;
  }

  .zd-v2-shell .navitem {
    justify-content: center;
    padding-inline: 9px;
  }

  .zd-v2-shell .navitem.active::after {
    display: none;
  }

  .zd-v2-shell .zd-org-card {
    justify-content: center;
    padding: 8px;
  }
}

@media (max-width: 900px) {
  .zd-v2-shell .topbar {
    flex-wrap: wrap;
    padding: 9px 14px;
  }

  .zd-v2-shell .topbar .topbar-search {
    order: 2;
    width: 100%;
    max-width: none;
  }

  .zd-v2-shell .topbar-right {
    width: 100%;
    justify-content: flex-end;
  }

  .zd-v2-shell .main-content {
    padding: 18px 14px 42px;
  }
}

@media (max-width: 720px) {
  .zd-v2-shell.app-shell {
    display: block;
  }

  .zd-v2-shell .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--zd-line);
  }

  .zd-v2-shell .brand,
  .zd-v2-shell .sidebar-foot,
  .zd-v2-shell .nav-label,
  .zd-v2-shell .nav-divider {
    display: none;
  }

  .zd-v2-shell nav.mainnav {
    flex-direction: row;
    gap: 4px;
    padding: 8px;
    overflow-x: auto;
  }

  .zd-v2-shell .navitem {
    flex: 0 0 auto;
    justify-content: center;
  }

  .zd-v2-shell .navitem.active::before,
  .zd-v2-shell .navitem.active::after {
    display: none;
  }

  .zd-v2-shell .account-pill .who,
  .zd-v2-shell .zd-search-hint {
    display: none;
  }

  .zd-v2-shell .topbar-right .btn-gold {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   HIGH-END V2 / MODUL 2 — DASHBOARD
   Pure presentation layer. Existing Django context remains authoritative.
   ========================================================= */

.zd-dashboard-v2 {
  position: relative;
  width: 100%;
  max-width: var(--zd-maxw);
  margin: 0 auto;
  color: var(--zd-tx);
}

.zd-dashboard-v2 .zd-section {
  margin-top: 20px;
}

.zd-dashboard-v2 .zd-section-head {
  margin: 0 2px 12px;
}

.zd-dashboard-v2 .dashboard-section-kicker {
  color: var(--zd-tx-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.zd-dashboard-v2 .dashboard-section-head h2,
.zd-dashboard-v2 .dashboard-rail-heading h2 {
  margin: 2px 0 0;
  color: var(--zd-tx);
  font-size: 19px;
  font-weight: 640;
  letter-spacing: -.018em;
}

.zd-section-total,
.zd-scope-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid var(--zd-line-soft);
  border-radius: 8px;
  background: var(--zd-surface);
  color: var(--zd-tx-3);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .03em;
}

/* Hero */
.zd-dashboard-v2 .zd-hero-v2 {
  position: relative;
  display: block;
  min-height: 324px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--zd-radius-xl);
  background:
    radial-gradient(120% 130% at 76% 12%, #081a3c 0%, #040a18 58%, #02050d 100%);
  box-shadow:
    0 40px 90px -46px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(217, 180, 91, .10);
  isolation: isolate;
}

.zd-dashboard-v2 .zd-hero-v2::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 7;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  opacity: .65;
}

.zd-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(127, 180, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 180, 255, .06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
  opacity: .48;
  animation: zd-grid-drift 18s linear infinite;
}

.zd-hero-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(96deg, rgba(3, 7, 16, .98) 0%, rgba(3, 7, 16, .88) 31%, rgba(3, 7, 16, .18) 58%, transparent 78%),
    linear-gradient(180deg, transparent 62%, rgba(3, 7, 16, .62) 100%);
}

.zd-hero-z {
  position: absolute;
  right: 6.5%;
  top: -20%;
  z-index: 1;
  color: rgba(127, 180, 255, .035);
  font-size: 290px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.09em;
  user-select: none;
  transform: rotate(-7deg);
}

.zd-hero-chamfer {
  position: absolute;
  right: 18px;
  bottom: 71px;
  z-index: 8;
  width: 72px;
  height: 18px;
  border-right: 1px solid rgba(217, 180, 91, .55);
  border-bottom: 1px solid rgba(217, 180, 91, .55);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  opacity: .75;
}

.zd-hero-in {
  position: relative;
  z-index: 5;
  max-width: min(760px, 61%);
  padding: 33px 34px 102px;
}

.zd-eyebrow-gold {
  color: var(--zd-gold-2) !important;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.zd-dashboard-v2 .zd-hero-v2 h1 {
  margin: 12px 0 8px;
  color: #fff;
  font-size: clamp(30px, 3.1vw, 44px);
  font-weight: 680;
  letter-spacing: -.028em;
  line-height: 1.06;
}

.zd-dashboard-v2 .zd-hero-lead {
  max-width: 53ch;
  margin: 0;
  color: #b8c8e4;
  font-size: 14.5px;
  line-height: 1.55;
}

.zd-dashboard-v2 .zd-hero-lead strong {
  color: var(--zd-gold-1);
  font-weight: 650;
}

.zd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

.zd-dashboard-v2 .zd-btn-gold,
.zd-dashboard-v2 .zd-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform .26s var(--zd-ease),
    border-color .26s var(--zd-ease),
    box-shadow .26s var(--zd-ease),
    background .26s var(--zd-ease);
}

.zd-dashboard-v2 .zd-btn-gold {
  border: 1px solid transparent;
  background: linear-gradient(140deg, var(--zd-gold-1), var(--zd-gold-2) 52%, var(--zd-gold-3));
  color: #1a1206;
  box-shadow: 0 14px 32px -16px rgba(217, 180, 91, .85);
}

.zd-dashboard-v2 .zd-btn-ghost {
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #e6eefb;
}

.zd-dashboard-v2 .zd-btn-gold:hover,
.zd-dashboard-v2 .zd-btn-ghost:hover {
  transform: translateY(-1px);
}

.zd-dashboard-v2 .zd-btn-gold:hover {
  box-shadow: 0 18px 40px -16px rgba(217, 180, 91, 1);
}

.zd-hero-badges {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 360px;
}

.zd-hbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(14px);
  color: #d8e4f8;
  font-size: 11px;
  font-weight: 560;
  text-align: right;
}

.zd-hbadge-gold {
  color: var(--zd-gold-1);
}

.zd-hbadge-spark {
  animation: zd-spark-pulse 2.2s ease-in-out infinite;
}

.zd-pulse {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--zd-ok);
  box-shadow: 0 0 0 0 rgba(60, 203, 140, .6);
  animation: zd-pulse 2.4s infinite;
}

/* Orbit visual */
.zd-dashboard-v2 .zd-orbit-stage {
  position: absolute;
  top: 35px;
  right: 5.5%;
  z-index: 3;
  width: min(390px, 33vw);
  height: 200px;
  opacity: 1;
  pointer-events: none;
}

.zd-dashboard-v2 .zd-orbit-stage::before,
.zd-dashboard-v2 .zd-orbit-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.zd-dashboard-v2 .zd-orbit-stage::before {
  width: 188px;
  height: 188px;
  background: radial-gradient(circle, rgba(59, 130, 246, .14), rgba(59, 130, 246, .035) 48%, transparent 68%);
  filter: blur(1px);
}

.zd-dashboard-v2 .zd-orbit-stage::after {
  width: 268px;
  height: 268px;
  border: 1px dashed rgba(127, 180, 255, .16);
  animation: zd-orbit-spin-centered 18s linear infinite reverse;
}

.zd-dashboard-v2 .dashboard-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(127, 180, 255, .24);
  border-radius: 50%;
  transform-origin: center;
}

.zd-dashboard-v2 .orbit-one {
  width: 205px;
  height: 72px;
  margin: -36px 0 0 -102px;
  transform: rotate(-17deg);
  animation: zd-orbit-tilt-a 8s ease-in-out infinite alternate;
}

.zd-dashboard-v2 .orbit-two {
  width: 156px;
  height: 156px;
  margin: -78px 0 0 -78px;
  border-color: rgba(217, 180, 91, .23);
  animation: zd-orbit-spin-plain 12s linear infinite;
}

.zd-dashboard-v2 .orbit-three {
  width: 262px;
  height: 98px;
  margin: -49px 0 0 -131px;
  transform: rotate(27deg);
  border-color: rgba(76, 201, 240, .18);
  animation: zd-orbit-tilt-b 10s ease-in-out infinite alternate;
}

.zd-orbit-axis {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(127,180,255,.24), transparent);
}

.zd-orbit-axis-a {
  transform: translate(-50%, -50%) rotate(58deg);
}

.zd-orbit-axis-b {
  transform: translate(-50%, -50%) rotate(-41deg);
  background: linear-gradient(90deg, transparent, rgba(217,180,91,.22), transparent);
}

.zd-orbit-scan {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 75%, rgba(59,130,246,.18) 91%, rgba(127,180,255,.46) 100%);
  mask: radial-gradient(circle, transparent 0 47%, #000 48% 49%, transparent 50% 100%);
  animation: zd-orbit-spin-plain 5.5s linear infinite;
}

.zd-dashboard-v2 .zd-orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(217, 180, 91, .48);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(217, 180, 91, .20), rgba(59,130,246,.10));
  color: var(--zd-gold-1);
  box-shadow:
    0 0 0 6px rgba(217, 180, 91, .045),
    0 0 32px rgba(59, 130, 246, .34);
  transform: rotate(45deg);
  animation: zd-core-float 4s ease-in-out infinite;
}

.zd-dashboard-v2 .zd-orbit-core span {
  transform: rotate(-45deg);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.08em;
}

.zd-dashboard-v2 .spark,
.zd-dashboard-v2 .zd-spark {
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--zd-gold-1);
  box-shadow: 0 0 12px 3px rgba(217, 180, 91, .55);
  animation: zd-particle 3.6s ease-in-out infinite;
}

.zd-dashboard-v2 .spark-a { left: 19%; top: 28%; }
.zd-dashboard-v2 .spark-b { right: 17%; top: 23%; animation-delay: -.9s; }
.zd-dashboard-v2 .spark-c { left: 28%; bottom: 17%; animation-delay: -1.8s; }
.zd-dashboard-v2 .spark-d { right: 24%; bottom: 26%; animation-delay: -2.5s; }
.zd-spark-e { right: 9%; top: 49%; animation-delay: -1.2s; background: var(--zd-blue-1); }
.zd-spark-f { left: 9%; top: 56%; animation-delay: -2.1s; background: var(--zd-cyan); }

/* Hero KPI rail */
.zd-hero-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 70px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  background: rgba(4, 9, 20, .76);
  backdrop-filter: blur(16px);
}

.zd-hero-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 10px 16px;
  border-right: 1px solid rgba(255, 255, 255, .075);
}

.zd-hero-cell:last-child {
  border-right: 0;
}

.zd-hero-cell.accent::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--zd-gold-3), var(--zd-gold-1));
  box-shadow: 0 0 15px rgba(217, 180, 91, .5);
}

.zd-hero-cell > span {
  color: #7288a9;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.zd-hero-cell > strong {
  overflow: hidden;
  margin-top: 2px;
  color: #eef4ff;
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 660;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.zd-hero-cell > small {
  margin-top: 2px;
  color: #7185a4;
  font-size: 10px;
}

/* Priority tiles */
.zd-priority-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.zd-dashboard-v2 .zd-priority-tile {
  --tile-color: var(--zd-blue-2);
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: start;
  min-height: 112px;
  padding: 15px 15px 14px 16px;
  overflow: hidden;
  border: 1px solid var(--zd-line);
  border-radius: var(--zd-radius-md);
  background: var(--zd-panel-grad);
  box-shadow: var(--zd-shadow-sm);
  text-decoration: none;
  transition:
    transform .3s var(--zd-ease),
    border-color .3s var(--zd-ease),
    box-shadow .3s var(--zd-ease);
}

.zd-dashboard-v2 .zd-priority-tile:hover {
  transform: translateY(-2px);
  border-color: var(--zd-line-strong);
  box-shadow: var(--zd-shadow-sm), 0 20px 40px -28px color-mix(in srgb, var(--tile-color) 50%, transparent);
}

.zd-priority-bad { --tile-color: var(--zd-bad); }
.zd-priority-warn { --tile-color: var(--zd-warn); }
.zd-priority-gold { --tile-color: #e9c961; }
.zd-priority-blue { --tile-color: var(--zd-blue-2); }

.zd-priority-edge {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2.5px;
  background: var(--tile-color);
  opacity: .88;
}

.zd-dashboard-v2 .zd-priority-tile .dashboard-alert-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--tile-color) 30%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--tile-color) 15%, transparent);
  color: var(--tile-color);
  font-size: 15px;
  font-weight: 760;
}

.zd-priority-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.zd-priority-copy > strong {
  color: var(--zd-tx);
  font-size: 24px;
  font-weight: 670;
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.zd-priority-copy > span {
  margin-top: 2px;
  color: var(--zd-tx-2);
  font-size: 11.5px;
  font-weight: 580;
}

.zd-priority-copy > small {
  margin-top: 5px;
  color: var(--tile-color);
  font-size: 10.5px;
  font-weight: 610;
}

.zd-tile-arrow {
  color: var(--zd-tx-3);
  font-size: 14px;
  transition: transform .25s var(--zd-ease), color .25s var(--zd-ease);
}

.zd-priority-tile:hover .zd-tile-arrow {
  color: var(--tile-color);
  transform: translate(2px, -2px);
}

/* Dashboard split */
.zd-dashboard-split {
  display: grid;
  grid-template-columns: minmax(0, 1.66fr) minmax(300px, .72fr);
  gap: 16px;
  align-items: start;
  margin-top: 4px;
}

.zd-dashboard-maincol {
  min-width: 0;
}

/* Personal performance */
.zd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.zd-dashboard-v2 .zd-kpi-card {
  --kpi-color: var(--zd-blue-2);
  position: relative;
  min-height: 150px;
  padding: 16px 17px 14px;
  overflow: hidden;
  border: 1px solid var(--zd-line);
  border-radius: var(--zd-radius-lg);
  background: var(--zd-panel-grad);
  box-shadow: var(--zd-shadow-sm);
  transition:
    transform .3s var(--zd-ease),
    border-color .3s var(--zd-ease);
}

.zd-dashboard-v2 .zd-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--zd-line-strong);
}

.zd-kpi-blue { --kpi-color: var(--zd-blue-2); }
.zd-kpi-gold { --kpi-color: var(--zd-gold-2); }
.zd-kpi-cyan { --kpi-color: var(--zd-cyan); }
.zd-kpi-violet { --kpi-color: var(--zd-violet); }

.zd-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.zd-kpi-top span:first-child {
  color: var(--zd-tx-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.zd-kpi-top span:last-child {
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--kpi-color) 25%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--kpi-color) 10%, transparent);
  color: var(--kpi-color);
  font-size: 9.5px;
  font-weight: 650;
}

.zd-dashboard-v2 .zd-kpi-card .dashboard-performance-value {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--zd-tx);
  font-size: clamp(22px, 2vw, 31px);
  font-weight: 660;
  letter-spacing: -.032em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.zd-dashboard-v2 .zd-kpi-card .dashboard-performance-meta {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  color: var(--zd-tx-3);
  font-size: 10.5px;
}

.zd-kpi-spark {
  position: absolute;
  right: -12px;
  bottom: -15px;
  width: 68%;
  height: 70px;
  opacity: .45;
  transform: skewX(-15deg);
  background:
    linear-gradient(135deg, transparent 0 35%, color-mix(in srgb, var(--kpi-color) 18%, transparent) 36% 39%, transparent 40% 51%, color-mix(in srgb, var(--kpi-color) 25%, transparent) 52% 55%, transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--kpi-color) 9%, transparent), transparent);
  clip-path: polygon(0 78%, 15% 58%, 29% 68%, 42% 34%, 57% 52%, 72% 18%, 100% 2%, 100% 100%, 0 100%);
}

/* Workflow card */
.zd-dashboard-v2 .zd-workflow-card {
  overflow: hidden;
  border: 1px solid var(--zd-line);
  border-radius: var(--zd-radius-lg);
  background: var(--zd-panel-grad);
  box-shadow: var(--zd-shadow-sm);
}

.zd-dashboard-v2 .zd-workflow-card .dashboard-workflow-row {
  min-height: 63px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--zd-line-soft);
  background: transparent;
}

.zd-dashboard-v2 .zd-workflow-card .dashboard-workflow-row:last-child {
  border-bottom: 0;
}

.zd-dashboard-v2 .zd-workflow-card .dashboard-workflow-row:hover {
  background: var(--zd-surface-2);
}

/* Quicklinks */
.zd-quick-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.zd-dashboard-v2 .zd-quick-grid > a {
  position: relative;
  min-height: 82px;
  padding: 13px;
  border: 1px solid var(--zd-line);
  border-radius: var(--zd-radius-md);
  background: var(--zd-panel-grad);
  box-shadow: var(--zd-shadow-sm);
}

.zd-dashboard-v2 .zd-quick-grid > a:hover {
  transform: translateY(-2px);
  border-color: var(--zd-line-strong);
}

.zd-dashboard-v2 .zd-quick-grid .dashboard-quick-icon {
  border: 1px solid rgba(127, 180, 255, .18);
  background: rgba(59, 130, 246, .11);
  color: var(--zd-blue-1);
}

.zd-dashboard-v2 .zd-quick-grid .dashboard-quick-icon.gold {
  border-color: rgba(217, 180, 91, .24);
  background: rgba(217, 180, 91, .11);
  color: var(--zd-gold-2);
}

.zd-quick-arrow {
  margin-left: auto;
  align-self: flex-start;
  color: var(--zd-tx-3);
  font-size: 13px;
}

/* Ranking */
.zd-ranking-rail {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.zd-ranking-rail > .zd-section-head {
  margin-bottom: 0;
}

.zd-dashboard-v2 .zd-rank-card {
  overflow: hidden;
  border: 1px solid var(--zd-line);
  border-radius: var(--zd-radius-lg);
  background: var(--zd-panel-grad);
  box-shadow: var(--zd-shadow-sm);
}

.zd-dashboard-v2 .zd-rank-card .dashboard-ranking-head {
  padding: 13px 14px 10px;
  border-bottom: 1px solid var(--zd-line-soft);
}

.zd-dashboard-v2 .zd-rank-card .dashboard-ranking-head strong {
  color: var(--zd-tx);
  font-size: 12.5px;
  font-weight: 620;
}

.zd-dashboard-v2 .zd-rank-card .dashboard-ranking-head span {
  padding: 3px 7px;
  border: 1px solid var(--zd-line-soft);
  border-radius: 7px;
  background: var(--zd-surface);
  color: var(--zd-tx-3);
  font-size: 10px;
  font-weight: 650;
}

.zd-dashboard-v2 .zd-rank-card .dashboard-ranking-list {
  padding: 7px;
}

.zd-rank-row {
  display: grid !important;
  grid-template-columns: 25px 30px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  align-items: center;
  min-height: 51px;
  padding: 7px 8px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
}

.zd-rank-row:hover {
  background: var(--zd-surface-2) !important;
}

.zd-rank-row.me {
  background: linear-gradient(94deg, rgba(59,130,246,.16), rgba(59,130,246,.03)) !important;
  box-shadow: inset 0 0 0 1px rgba(127,180,255,.22);
}

.zd-rank-pos {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.055);
  color: var(--zd-tx-2);
  font-size: 11px;
  font-weight: 800;
}

.zd-rank-pos.pos-1 {
  background: linear-gradient(145deg, var(--zd-gold-1), var(--zd-gold-3));
  color: #1b1305;
  box-shadow: 0 6px 16px -8px rgba(217, 180, 91, .9);
}

.zd-rank-pos.pos-2 {
  background: linear-gradient(145deg, #dce4f0, #9ba9be);
  color: #1b2233;
}

.zd-rank-pos.pos-3 {
  background: linear-gradient(145deg, #e0b48a, #a9743f);
  color: #26160a;
}

.zd-rank-avatar {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--zd-line-strong);
  border-radius: 9px;
  background: linear-gradient(145deg, #2d4a7c, #16233c);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}

.zd-rank-avatar.me {
  border-color: rgba(217, 180, 91, .28);
  background: linear-gradient(145deg, var(--zd-gold-2), var(--zd-gold-3));
  color: #1b1305;
}

.zd-dashboard-v2 .zd-rank-row .dashboard-rank-name {
  min-width: 0;
  color: var(--zd-tx);
  font-size: 12px;
  font-weight: 580;
}

.zd-dashboard-v2 .zd-rank-row .dashboard-rank-name small {
  display: block;
  color: var(--zd-gold-2);
  font-size: 9.5px;
}

.zd-dashboard-v2 .zd-rank-row .dashboard-rank-value {
  color: var(--zd-tx);
  font-size: 12px;
  font-weight: 640;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.zd-dashboard-v2 .zd-rank-row .dashboard-rank-value small {
  display: block;
  color: var(--zd-tx-3);
  font-size: 9.5px;
  font-weight: 550;
}

.zd-signature-card {
  position: relative;
  min-height: 118px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--zd-line);
  border-radius: var(--zd-radius-lg);
  background:
    linear-gradient(145deg, rgba(217,180,91,.055), rgba(59,130,246,.035)),
    var(--zd-panel-grad);
  box-shadow: var(--zd-shadow-sm);
}

.zd-signature-card::after {
  content: "ZD / LIVE";
  position: absolute;
  right: 13px;
  bottom: 10px;
  color: rgba(127, 180, 255, .16);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
}

.zd-signature-card strong,
.zd-signature-card small {
  display: block;
}

.zd-signature-card strong {
  margin-top: 8px;
  color: var(--zd-tx);
  font-size: 13px;
}

.zd-signature-card small {
  max-width: 30ch;
  margin-top: 5px;
  color: var(--zd-tx-3);
  font-size: 10.5px;
}

.zd-signature-corner {
  position: absolute;
  width: 13px;
  height: 13px;
  border-color: var(--zd-hud);
  opacity: .6;
}

.zd-signature-corner.tl { left: 8px; top: 8px; border-left: 1px solid; border-top: 1px solid; }
.zd-signature-corner.tr { right: 8px; top: 8px; border-right: 1px solid; border-top: 1px solid; }
.zd-signature-corner.bl { left: 8px; bottom: 8px; border-left: 1px solid; border-bottom: 1px solid; }
.zd-signature-corner.br { right: 8px; bottom: 8px; border-right: 1px solid; border-bottom: 1px solid; }

/* Motion */
@keyframes zd-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 32px 32px, 32px 32px; }
}

@keyframes zd-pulse {
  0% { box-shadow: 0 0 0 0 rgba(60, 203, 140, .55); }
  70% { box-shadow: 0 0 0 9px rgba(60, 203, 140, 0); }
  100% { box-shadow: 0 0 0 0 rgba(60, 203, 140, 0); }
}

@keyframes zd-spark-pulse {
  0%, 100% { opacity: .55; transform: scale(.85) rotate(0); }
  50% { opacity: 1; transform: scale(1.18) rotate(28deg); }
}

@keyframes zd-orbit-spin-centered {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

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

@keyframes zd-orbit-tilt-a {
  from { transform: rotate(-20deg) scaleX(.96); }
  to { transform: rotate(-7deg) scaleX(1.04); }
}

@keyframes zd-orbit-tilt-b {
  from { transform: rotate(22deg) scaleX(.98); }
  to { transform: rotate(35deg) scaleX(1.03); }
}

@keyframes zd-core-float {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(-4px); }
}

@keyframes zd-particle {
  0%, 100% { opacity: .25; transform: scale(.7); }
  48% { opacity: 1; transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .zd-hero-grid,
  .zd-pulse,
  .zd-hbadge-spark,
  .zd-orbit-scan,
  .zd-dashboard-v2 .dashboard-orbit,
  .zd-dashboard-v2 .zd-orbit-stage::after,
  .zd-dashboard-v2 .zd-orbit-core,
  .zd-dashboard-v2 .spark,
  .zd-dashboard-v2 .zd-spark {
    animation: none !important;
  }
}

@media (max-width: 1280px) {
  .zd-dashboard-split {
    grid-template-columns: minmax(0, 1fr) 310px;
  }

  .zd-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zd-priority-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1040px) {
  .zd-dashboard-v2 .zd-hero-v2 {
    min-height: 380px;
  }

  .zd-hero-in {
    max-width: 70%;
  }

  .zd-dashboard-v2 .zd-orbit-stage {
    right: 1%;
    width: 300px;
  }

  .zd-hero-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zd-hero-cell:nth-child(4),
  .zd-hero-cell:nth-child(5) {
    display: none;
  }

  .zd-dashboard-split {
    grid-template-columns: 1fr;
  }

  .zd-ranking-rail {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zd-ranking-rail > .zd-section-head,
  .zd-ranking-rail > .zd-signature-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .zd-dashboard-v2 .zd-hero-v2 {
    min-height: 470px;
  }

  .zd-hero-in {
    max-width: none;
    padding: 28px 22px 172px;
  }

  .zd-hero-badges {
    top: auto;
    right: 16px;
    bottom: 89px;
    left: 16px;
    align-items: flex-start;
  }

  .zd-hbadge-gold {
    display: none;
  }

  .zd-dashboard-v2 .zd-orbit-stage {
    top: 174px;
    right: -44px;
    width: 260px;
    opacity: .72;
  }

  .zd-hero-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zd-hero-cell:nth-child(3) {
    display: none;
  }

  .zd-priority-grid,
  .zd-kpi-grid,
  .zd-quick-grid,
  .zd-ranking-rail {
    grid-template-columns: 1fr;
  }

  .zd-ranking-rail > .zd-section-head,
  .zd-ranking-rail > .zd-signature-card {
    grid-column: auto;
  }
}

/* =========================================================
   FINAL POLISH — global visual consistency only
   ========================================================= */

/* Final polish marker: no business state, routes or permissions live here. */
.zd-v2-shell {
  font-variant-numeric: tabular-nums;
}

.zd-v2-shell .main-content {
  container-type: inline-size;
}

.zd-v2-shell .main-content > * {
  animation: zd-page-enter .34s var(--zd-ease-out) both;
}

.zd-v2-shell :where(
  .zd-priority-card,
  .zd-kpi-card,
  .zd-signature-card,
  .zd-order-card,
  .zd-customer-table-card,
  .zd-followup-signature-card,
  .zd-management-kpi,
  .zd-management-panel
) {
  transition:
    transform .20s var(--zd-ease-out),
    border-color .20s var(--zd-ease-out),
    box-shadow .20s var(--zd-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .zd-v2-shell :where(
    .zd-priority-card,
    .zd-kpi-card,
    .zd-signature-card,
    .zd-order-card,
    .zd-customer-table-card,
    .zd-followup-signature-card,
    .zd-management-kpi,
    .zd-management-panel
  ):hover {
    border-color: rgba(127, 180, 255, .15);
    box-shadow:
      0 20px 46px -28px rgba(0, 0, 0, .92),
      0 1px 0 rgba(255, 255, 255, .04) inset;
  }

  .zd-v2-shell :where(
    .zd-priority-card,
    .zd-kpi-card,
    .zd-signature-card,
    .zd-order-card
  ):hover {
    transform: translateY(-2px);
  }
}

.zd-v2-shell :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid rgba(127, 180, 255, .78);
  outline-offset: 2px;
}

@keyframes zd-page-enter {
  from {
    opacity: .76;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .zd-v2-shell .main-content > * {
    animation-duration: .24s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zd-v2-shell .main-content > *,
  .zd-v2-shell :where(
    .zd-priority-card,
    .zd-kpi-card,
    .zd-signature-card,
    .zd-order-card,
    .zd-customer-table-card,
    .zd-followup-signature-card,
    .zd-management-kpi,
    .zd-management-panel
  ) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   ZeroDiff — existing hero / right visual image only
   IMPORTANT:
   - hero dimensions untouched
   - hero layout untouched
   - buttons/text/rail untouched
   ========================================================= */

.zd-dashboard-v2 .zd-orbit-stage {
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/*
 * Fill ONLY the already existing right-hand orbit stage.
 * The hero itself gets NO new height/width.
 *
 * object-fit: cover + object-position: right clips away
 * the embedded left greeting/buttons from the source image.
 */
.zd-dashboard-v2 .zd-orbit-stage .zd-hero-visual-image {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    display: block !important;

    object-fit: cover !important;
    object-position: right center !important;

    pointer-events: none !important;
    user-select: none !important;

    z-index: 1 !important;

    /* soft blend into the real hero */
    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.42) 12%,
            #000 28%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.42) 12%,
            #000 28%,
            #000 100%
        );
}

/* Remove only the OLD CSS orbit drawing.
   Elements stay in DOM, so structure is preserved. */
.zd-dashboard-v2 .zd-orbit-stage::before,
.zd-dashboard-v2 .zd-orbit-stage::after,
.zd-dashboard-v2 .zd-orbit-stage .zd-orbit-scan,
.zd-dashboard-v2 .zd-orbit-stage .dashboard-orbit,
.zd-dashboard-v2 .zd-orbit-stage .zd-orbit-axis,
.zd-dashboard-v2 .zd-orbit-stage .dashboard-core,
.zd-dashboard-v2 .zd-orbit-stage .spark,
.zd-dashboard-v2 .zd-orbit-stage .zd-spark {
    display: none !important;
}

/* Mobile: existing hero geometry still wins.
   Image becomes quieter instead of changing layout. */
@media (max-width: 760px) {
    .zd-dashboard-v2 .zd-orbit-stage .zd-hero-visual-image {
        object-position: 75% center !important;
        opacity: .38 !important;
    }
}

/* ============== END right visual image only ============== */

/* === ZD HERO IMAGE POSITION V2 START === */

/*
 * Nur der vorhandene rechte Visual-Bereich wird vergrößert.
 * Die Größe/Höhe von .zd-hero-v2 selbst bleibt UNVERÄNDERT.
 */
.zd-dashboard-v2 .zd-orbit-stage {
    width: 50% !important;
    right: 0 !important;
    left: auto !important;
    overflow: hidden !important;
}

/*
 * Das bestehende Bild innerhalb dieses Bereichs:
 * größer, weiter rechts und etwas tiefer.
 */
.zd-dashboard-v2 .zd-orbit-stage .zd-hero-visual-image {
    position: absolute !important;

    inset: auto !important;
    left: auto !important;
    right: -7% !important;
    top: 7% !important;
    bottom: auto !important;

    width: 114% !important;
    height: 114% !important;

    object-fit: cover !important;
    object-position: center center !important;

    pointer-events: none !important;
    user-select: none !important;
}

/* Mobil bleibt das Bild nur dezente Hintergrundatmosphäre. */
@media (max-width: 760px) {
    .zd-dashboard-v2 .zd-orbit-stage {
        width: 100% !important;
    }

    .zd-dashboard-v2 .zd-orbit-stage .zd-hero-visual-image {
        right: -24% !important;
        top: 6% !important;
        width: 118% !important;
        height: 118% !important;
        opacity: .26 !important;
    }
}

/* === ZD HERO IMAGE POSITION V2 END === */


/* =========================================================
   ZD browser fixes 2026-08-18
   Global shell only — Hero untouched.
   ========================================================= */

/* Normales, sauber proportioniertes Z im Hauptlogo */
.zd-v2-shell .brand .mark .zd-brand-z {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--zd-gold-2);
  font-size: 22px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Native Select-Popups ebenfalls im Dark Theme darstellen */
.zd-v2-shell select {
  color-scheme: dark;
}

.zd-v2-shell select option,
.zd-v2-shell select optgroup {
  color: #edf2fb;
  background-color: #0b1425;
}

.zd-v2-shell select option:checked {
  color: #ffffff;
  background-color: #17345e;
}

/* ================= END ZD browser fixes ================= */

/* =========================================================
   ZD FIX — Route overlays must NOT inherit page-enter transform
   The global .main-content > * animation would otherwise
   overwrite the modal's translate(-50%, -50%) centering.
   ========================================================= */

.zd-v2-shell .main-content > .zd-route-scrim {
  animation: none !important;
  animation-name: none !important;
  transform: none !important;
}

.zd-v2-shell .main-content > .zd-customer-modal-frame {
  position: fixed !important;

  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;

  margin: 0 !important;

  animation: none !important;
  animation-name: none !important;

  transform: translate(-50%, -50%) !important;
}

.zd-v2-shell .main-content > .zd-customer-drawer-frame {
  animation: none !important;
  animation-name: none !important;
}

/* ================= END route overlay fix ================= */


/* =========================================================
   ZD — Kundendetail als zentriertes Desktop-Fenster
   Mobile Drawer-Verhalten bleibt erhalten.
   ========================================================= */

@media (min-width: 901px) {

  .zd-v2-shell .main-content > .zd-customer-drawer-frame {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: min(760px, calc(100vw - 42px)) !important;
    height: min(860px, calc(100vh - 42px)) !important;
    max-height: calc(100vh - 42px) !important;

    margin: 0 !important;

    transform: translate(-50%, -50%) !important;

    border-width: 1px !important;
    border-radius: 22px !important;

    overflow: hidden !important;

    animation: none !important;
    animation-name: none !important;

    box-shadow:
      var(--zd-shadow),
      0 35px 90px -40px rgba(59,130,246,.35) !important;
  }

}

/* ================= END Kundendetail zentriert ================= */


/* =========================================================
   ZD ORDER FINAL UX V1
   ========================================================= */

/*
 * Dekoratives Wasserzeichen endgültig entfernen.
 * Die fachliche TAK-Anzeige oben bleibt bestehen.
 */
.zd-order-tak-card::before,
.zd-order-tak-card::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}


/*
 * Notizen bewusst kompakt halten.
 * high_end_v2.css wird nach order_ui_v2.css geladen,
 * deshalb liegt diese finale Regel hier.
 */
#notizen .zd-order-activity-list.zd-order-notes-scroll {
  display: block !important;

  max-height: 240px !important;
  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  margin-top: 12px !important;
  padding-right: 8px !important;

  overscroll-behavior: contain;
  scrollbar-width: thin;
}


/*
 * Einzelne Notizen kompakter.
 */
#notizen
.zd-order-notes-scroll
.zd-order-activity-item {
  min-height: 0 !important;

  margin: 0 !important;
  padding: 8px 2px !important;
}

#notizen
.zd-order-notes-scroll
.zd-order-activity-item + .zd-order-activity-item {
  border-top:
    1px solid rgba(110, 134, 169, .10);
}

#notizen
.zd-order-notes-scroll
.zd-order-activity-item p {
  margin-top: 3px !important;
  margin-bottom: 0 !important;

  line-height: 1.35 !important;
}


/*
 * Dezente Scrollbar.
 */
#notizen
.zd-order-notes-scroll::-webkit-scrollbar {
  width: 6px;
}

#notizen
.zd-order-notes-scroll::-webkit-scrollbar-track {
  background: rgba(7, 16, 29, .35);
  border-radius: 8px;
}

#notizen
.zd-order-notes-scroll::-webkit-scrollbar-thumb {
  background: rgba(112, 136, 172, .38);
  border-radius: 8px;
}

#notizen
.zd-order-notes-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(112, 136, 172, .60);
}



/* =========================================================
   ZD COMPACT NOTES FINAL
   ========================================================= */

/* Karten im unteren Grid nicht gegenseitig auf gleiche Höhe ziehen */
.zd-order-bottom-grid {
  align-items: start !important;
}

/* Notizkarte nur so hoch wie ihr eigener Inhalt */
#notizen {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Der eigentliche Verlauf bleibt kompakt und scrollt intern */
#notizen .zd-order-activity-list.zd-order-notes-scroll {
  display: block !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: 260px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding-right: 8px !important;
}

/* Einzelne Einträge enger */
#notizen .zd-order-activity-item {
  min-height: 0 !important;
  padding: 7px 2px !important;
  margin: 0 !important;
}

#notizen .zd-order-activity-item p {
  margin: 3px 0 0 0 !important;
  line-height: 1.35 !important;

  overflow-wrap: anywhere;
  word-break: break-word;
}



/* =========================================================
   ZD NOTES HARD COMPACT V1
   ========================================================= */

/*
 * Die Notizkarte darf NICHT mehr die Höhe
 * der danebenliegenden Historie übernehmen.
 */
section#notizen.zd-order-info-card {
  display: block !important;

  align-self: start !important;
  place-self: start stretch !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: 370px !important;

  overflow: hidden !important;
}


/*
 * Eingabebereich kompakt halten.
 */
#notizen .zd-order-note-form {
  margin-bottom: 10px !important;
}

#notizen .zd-order-note-form .notiz {
  min-height: 62px !important;
  max-height: 82px !important;
  resize: vertical;
}


/*
 * Nur die gespeicherten Notizen scrollen.
 */
#notizen .zd-order-activity-list.zd-order-notes-scroll {
  display: block !important;

  height: 155px !important;
  min-height: 155px !important;
  max-height: 155px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  margin-top: 10px !important;
  padding: 0 7px 0 0 !important;
}


/*
 * Einträge kompakter.
 */
#notizen
.zd-order-notes-scroll
.zd-order-activity-item {
  min-height: 0 !important;

  padding: 7px 2px !important;
  margin: 0 !important;
}

#notizen
.zd-order-notes-scroll
.zd-order-activity-item p {
  margin: 2px 0 0 0 !important;
  line-height: 1.3 !important;
}



/* =========================================================
   ZD HISTORY COMPACT V1
   ========================================================= */

#historie {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
}

#historie .zd-order-activity-list.zd-order-history-scroll {
  display: block !important;

  max-height: 330px !important;
  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  margin-top: 12px !important;
  padding-right: 8px !important;

  overscroll-behavior: contain;
  scrollbar-width: thin;
}

#historie
.zd-order-history-scroll
.zd-order-activity-item {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px 2px !important;
}

#historie
.zd-order-history-scroll
.zd-order-activity-item + .zd-order-activity-item {
  border-top:
    1px solid rgba(110, 134, 169, .10);
}

#historie
.zd-order-history-scroll
.zd-order-activity-item p {
  margin: 3px 0 0 0 !important;
  line-height: 1.35 !important;
}

#historie
.zd-order-history-scroll::-webkit-scrollbar {
  width: 6px;
}

#historie
.zd-order-history-scroll::-webkit-scrollbar-track {
  background: rgba(7, 16, 29, .35);
  border-radius: 8px;
}

#historie
.zd-order-history-scroll::-webkit-scrollbar-thumb {
  background: rgba(112, 136, 172, .38);
  border-radius: 8px;
}

#historie
.zd-order-history-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(112, 136, 172, .60);
}



/* =========================================================
   ZD NOTES + HISTORY EQUAL CARDS V1
   ========================================================= */

/*
 * Beide unteren Karten exakt gleich groß.
 */
#notizen,
#historie {
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;

  align-self: start !important;

  width: 100% !important;

  height: 390px !important;
  min-height: 390px !important;
  max-height: 390px !important;

  overflow: hidden !important;
}


/*
 * Überschriften identisch.
 */
#notizen .zd-order-section-head,
#historie .zd-order-section-head {
  flex: 0 0 auto !important;
}


/*
 * Notizformular bleibt kompakt oben.
 */
#notizen .zd-order-note-form {
  flex: 0 0 auto !important;
  margin-bottom: 10px !important;
}

#notizen .zd-order-note-form .notiz {
  min-height: 62px !important;
  max-height: 72px !important;
}


/*
 * Notizen nutzen den verbleibenden Platz.
 */
#notizen .zd-order-notes-scroll {
  flex: 1 1 auto !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  margin-top: 8px !important;
  padding-right: 7px !important;
}


/*
 * Historie nutzt ebenfalls den kompletten
 * verbleibenden Platz der gleich großen Card.
 */
#historie .zd-order-history-scroll {
  flex: 1 1 auto !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  margin-top: 8px !important;
  padding-right: 7px !important;
}


/*
 * Gleiche Eintragsoptik.
 */
#notizen .zd-order-activity-item,
#historie .zd-order-activity-item {
  min-height: 0 !important;

  margin: 0 !important;
  padding: 8px 2px !important;
}

#notizen .zd-order-activity-item p,
#historie .zd-order-activity-item p {
  margin: 3px 0 0 0 !important;
  line-height: 1.35 !important;
}


/*
 * Gleiche Scrollbars.
 */
#notizen .zd-order-notes-scroll,
#historie .zd-order-history-scroll {
  scrollbar-width: thin;
  scrollbar-color:
    rgba(112, 136, 172, .42)
    rgba(7, 16, 29, .35);
}

#notizen .zd-order-notes-scroll::-webkit-scrollbar,
#historie .zd-order-history-scroll::-webkit-scrollbar {
  width: 6px;
}

#notizen .zd-order-notes-scroll::-webkit-scrollbar-track,
#historie .zd-order-history-scroll::-webkit-scrollbar-track {
  background: rgba(7, 16, 29, .35);
  border-radius: 8px;
}

#notizen .zd-order-notes-scroll::-webkit-scrollbar-thumb,
#historie .zd-order-history-scroll::-webkit-scrollbar-thumb {
  background: rgba(112, 136, 172, .42);
  border-radius: 8px;
}



/* =========================================================
   ZD HISTORY EXACTLY LIKE NOTES V1
   ========================================================= */

/*
 * Beide Karten identische Außenmaße.
 */
.zd-order-bottom-grid > #notizen,
.zd-order-bottom-grid > #historie {
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;

  align-self: start !important;

  width: 100% !important;

  height: 390px !important;
  min-height: 390px !important;
  max-height: 390px !important;

  padding: 16px 17px !important;

  overflow: hidden !important;
}


/*
 * Beide Überschriften exakt gleich.
 */
#notizen .zd-order-section-head,
#historie .zd-order-section-head {
  flex: 0 0 auto !important;

  margin: 0 !important;
  padding: 0 !important;
}


/*
 * Historie beginnt normal direkt unter ihrer Überschrift.
 */
#historie .zd-order-history-scroll {
  flex: 1 1 auto !important;

  display: block !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin-top: 14px !important;
  padding: 0 7px 0 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
}


/*
 * Notizliste bleibt wie bisher im verbleibenden Bereich.
 */
#notizen .zd-order-notes-scroll {
  flex: 1 1 auto !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
}


/*
 * WICHTIG:
 * Historien- und Notizeinträge bekommen exakt dieselbe
 * kompakte Struktur.
 */
#notizen .zd-order-activity-item,
#historie .zd-order-activity-item {
  position: relative !important;

  display: grid !important;
  grid-template-columns: 12px minmax(0, 1fr) !important;
  gap: 9px !important;

  min-height: 0 !important;

  margin: 0 !important;
  padding: 8px 0 !important;
}


/*
 * Kein riesiger Abstand mehr innerhalb der Historie.
 */
#notizen .zd-order-activity-item > div,
#historie .zd-order-activity-item > div {
  min-width: 0 !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;
}


/*
 * Datum + Mitarbeiter gleich klein darstellen.
 */
#notizen .zd-order-activity-item small,
#historie .zd-order-activity-item small {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 1.25 !important;
}


/*
 * Notiz bzw. Historienereignis direkt darunter.
 */
#notizen .zd-order-activity-item p,
#historie .zd-order-activity-item p {
  display: block !important;

  margin: 4px 0 0 0 !important;
  padding: 0 !important;

  line-height: 1.35 !important;
}


/*
 * Vorherige starke Historien-Abstände neutralisieren.
 */
#historie .zd-order-activity-item strong {
  display: inline !important;

  margin: 0 !important;
  padding: 0 !important;

  font: inherit !important;
}


/*
 * Beide Timeline-Linien gleich.
 */
#notizen .zd-order-activity-item:not(:last-child)::before,
#historie .zd-order-activity-item:not(:last-child)::before {
  top: 18px !important;
  bottom: -8px !important;
}


/*
 * Identische Scrollbars.
 */
#notizen .zd-order-notes-scroll,
#historie .zd-order-history-scroll {
  scrollbar-width: thin !important;

  scrollbar-color:
    rgba(112, 136, 172, .42)
    rgba(7, 16, 29, .35) !important;
}

#notizen .zd-order-notes-scroll::-webkit-scrollbar,
#historie .zd-order-history-scroll::-webkit-scrollbar {
  width: 6px !important;
}

#notizen .zd-order-notes-scroll::-webkit-scrollbar-thumb,
#historie .zd-order-history-scroll::-webkit-scrollbar-thumb {
  background: rgba(112, 136, 172, .42) !important;
  border-radius: 8px !important;
}



/* =========================================================
   ZD EQUAL OUTER FRAMES FINAL
   ========================================================= */

/*
 * Ausschließlich die beiden Außenkarten.
 * Gleiche Spezifität, gleiche Maße, gleiche Umrahmung.
 */
.zd-order-bottom-grid > section#notizen.zd-order-info-card,
.zd-order-bottom-grid > section#historie.zd-order-info-card {
  box-sizing: border-box !important;

  width: 100% !important;

  height: 390px !important;
  min-height: 390px !important;
  max-height: 390px !important;

  align-self: start !important;

  border-radius: 16px !important;
  overflow: hidden !important;
}



/* ZD EQUAL OUTER FRAMES V2 */

/*
 * FINAL:
 * Notizen und Historie erhalten EXAKT dieselben Außenmaße.
 *
 * Dieser Selektor ist absichtlich spezifischer als alle
 * älteren #notizen-Sonderregeln.
 */
.zd-v2-shell
.zd-order-bottom-grid
> section#notizen.zd-order-info-card,

.zd-v2-shell
.zd-order-bottom-grid
> section#historie.zd-order-info-card {
  box-sizing: border-box !important;

  width: 100% !important;

  height: 390px !important;
  min-height: 390px !important;
  max-height: 390px !important;

  margin: 0 !important;

  align-self: start !important;
  justify-self: stretch !important;

  overflow: hidden !important;
}


/*
 * Beide Grid-Spalten exakt gleich breit.
 */
.zd-v2-shell .zd-order-bottom-grid {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  align-items: start !important;
}


/*
 * Gleiche Umrahmung.
 */
.zd-v2-shell
.zd-order-bottom-grid
> section#notizen.zd-order-info-card,

.zd-v2-shell
.zd-order-bottom-grid
> section#historie.zd-order-info-card {
  border-width: 1px !important;
  border-radius: 16px !important;
}



/* =========================================================
   ZD CUSTOMER CONTACT EDIT V1
   ========================================================= */

.zd-customer-contact-edit {
  margin-top: 12px;
  padding-top: 12px;

  border-top:
    1px solid rgba(127, 151, 186, .12);
}

.zd-customer-contact-edit > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;
  padding: 0 14px;

  border:
    1px solid rgba(128, 151, 184, .22);
  border-radius: 10px;

  background:
    rgba(255, 255, 255, .035);

  color: #d9e1ed;

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
  user-select: none;

  list-style: none;
}

.zd-customer-contact-edit > summary::-webkit-details-marker {
  display: none;
}

.zd-customer-contact-edit[open] > summary {
  border-color:
    rgba(59, 130, 246, .32);

  background:
    rgba(59, 130, 246, .08);
}

.zd-customer-contact-form {
  margin-top: 12px;
}

.zd-customer-contact-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 9px;
}

.zd-customer-contact-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;

  min-width: 0;
}

.zd-customer-contact-grid label > span {
  color: #7e90aa;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.zd-customer-contact-grid input,
.zd-customer-contact-grid textarea {
  box-sizing: border-box;

  width: 100%;

  border:
    1px solid rgba(128, 151, 184, .20);
  border-radius: 9px;
  outline: 0;

  background:
    rgba(2, 7, 16, .48);

  color: #edf3fb;

  font: inherit;
  font-size: 11px;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.zd-customer-contact-grid input {
  min-height: 36px;
  padding: 0 10px;
}

.zd-customer-contact-grid textarea {
  min-height: 60px;
  padding: 9px 10px;

  resize: vertical;
}

.zd-customer-contact-grid input:focus,
.zd-customer-contact-grid textarea:focus {
  border-color:
    rgba(59, 130, 246, .50);

  box-shadow:
    0 0 0 3px rgba(59, 130, 246, .08);
}

.zd-contact-address {
  grid-column: 1 / -1;
}

.zd-customer-contact-actions {
  display: flex;
  justify-content: flex-start;

  margin-top: 10px;
}

@media (max-width: 700px) {
  .zd-customer-contact-grid {
    grid-template-columns: 1fr;
  }

  .zd-contact-address {
    grid-column: auto;
  }
}



/* =========================================================
   ZD CUSTOMER EDIT POSITION V2
   ========================================================= */

#overview {
  position: relative;
}

/*
 * Geschlossen sitzt der Bearbeiten-Button rechts
 * auf Höhe der Kundenüberschrift.
 */
#overview > details.zd-customer-contact-edit {
  position: relative;
  z-index: 3;

  width: max-content;

  margin:
    -37px
    0
    14px
    auto !important;

  padding: 0 !important;

  border: 0 !important;
}


/*
 * Wenn geöffnet, nutzt das Formular sauber
 * die komplette verfügbare Breite darunter.
 */
#overview > details.zd-customer-contact-edit[open] {
  width: 100%;

  margin:
    -37px
    0
    14px
    0 !important;
}

#overview
> details.zd-customer-contact-edit
> summary {
  width: max-content;

  margin-left: auto;
}


/*
 * Formular nach dem Aufklappen als eigene
 * kompakte Bearbeitungsfläche.
 */
#overview
> details.zd-customer-contact-edit
.zd-customer-contact-form {
  margin-top: 14px;

  padding: 14px;

  border:
    1px solid rgba(128, 151, 184, .15);

  border-radius: 12px;

  background:
    rgba(6, 14, 26, .55);
}



/* =========================================================
   ZD CUSTOMER CONTACT EDIT V3 FINAL
   ========================================================= */

/*
 * Der komplette Details-Container liegt normal
 * im Dokumentfluss. Kein negativer Versatz mehr.
 */
#overview.zd-detail-section
> details.zd-customer-contact-edit {
  position: static !important;

  box-sizing: border-box !important;

  width: 100% !important;

  margin: 0 0 14px 0 !important;
  padding: 0 !important;

  border: 0 !important;

  overflow: visible !important;
}


/*
 * Im geschlossenen Zustand benötigt der Container
 * selbst praktisch keinen Platz.
 */
#overview.zd-detail-section
> details.zd-customer-contact-edit:not([open]) {
  height: 0 !important;
  min-height: 0 !important;

  margin-bottom: 14px !important;
}


/*
 * Der Button bleibt unabhängig vom offenen Zustand
 * oben rechts an der gewünschten Position.
 */
#overview.zd-detail-section
> details.zd-customer-contact-edit
> summary {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  left: auto !important;

  z-index: 10 !important;

  width: max-content !important;

  margin: 0 !important;
  padding: 0 14px !important;

  min-height: 36px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border:
    1px solid rgba(128,151,184,.24) !important;

  border-radius: 10px !important;

  background:
    rgba(255,255,255,.035) !important;

  color: #dbe4f1 !important;

  font-size: 11px !important;
  font-weight: 700 !important;

  cursor: pointer !important;

  list-style: none !important;
}

#overview.zd-detail-section
> details.zd-customer-contact-edit
> summary::-webkit-details-marker {
  display: none !important;
}


/*
 * Sobald geöffnet:
 * Das Formular beginnt normal unter der Überschrift.
 * Kein -37px mehr.
 */
#overview.zd-detail-section
> details.zd-customer-contact-edit[open] {
  height: auto !important;

  margin:
    14px
    0
    16px
    0 !important;

  padding-top: 10px !important;
}


/*
 * Formular wie eine saubere kompakte Cockpit-Card.
 */
#overview.zd-detail-section
> details.zd-customer-contact-edit
> .zd-customer-contact-form {
  box-sizing: border-box !important;

  width: 100% !important;

  margin: 12px 0 0 0 !important;

  padding: 15px !important;

  border:
    1px solid rgba(128,151,184,.15) !important;

  border-radius: 13px !important;

  background:
    rgba(6,14,26,.56) !important;
}


/*
 * Name + Telefon oben.
 * E-Mail bekommt ihre eigene volle Zeile.
 */
#overview
.zd-customer-contact-grid {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0,1fr)) !important;

  gap: 10px !important;
}

#overview
.zd-customer-contact-grid
> label:nth-child(3) {
  grid-column: 1 / -1 !important;
}


/*
 * Adresse exakt als:
 * Straße | PLZ | Ort
 */
#overview
.zd-contact-address-fields {
  grid-column: 1 / -1 !important;

  display: grid !important;

  grid-template-columns:
    minmax(0,1.65fr)
    minmax(90px,.45fr)
    minmax(0,1fr) !important;

  gap: 10px !important;

  margin-top: 2px !important;
  padding-top: 12px !important;

  border-top:
    1px solid rgba(128,151,184,.11) !important;
}


#overview
.zd-contact-address-fields label {
  display: flex !important;
  flex-direction: column !important;

  min-width: 0 !important;

  gap: 5px !important;
}


#overview
.zd-contact-address-fields label > span {
  color: #7e90aa !important;

  font-size: 9px !important;
  font-weight: 700 !important;

  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}


/*
 * Alle Inputs identisch.
 */
#overview
.zd-customer-contact-grid input,
#overview
.zd-contact-address-fields input {
  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;

  padding: 0 10px !important;

  border:
    1px solid rgba(128,151,184,.20) !important;

  border-radius: 9px !important;

  outline: 0 !important;

  background:
    rgba(2,7,16,.50) !important;

  color: #edf3fb !important;

  font: inherit !important;
  font-size: 11px !important;
}


#overview
.zd-customer-contact-grid input:focus,
#overview
.zd-contact-address-fields input:focus {
  border-color:
    rgba(59,130,246,.52) !important;

  box-shadow:
    0 0 0 3px rgba(59,130,246,.08) !important;
}


/*
 * Alter Textarea-Style ist für diesen Editor
 * jetzt ausdrücklich bedeutungslos.
 */
#overview
.zd-customer-contact-edit textarea[name="address"] {
  display: none !important;
}


/*
 * Mobile sauber untereinander.
 */
@media (max-width: 700px) {

  #overview.zd-detail-section
  > details.zd-customer-contact-edit
  > summary {
    position: static !important;

    margin:
      0
      0
      10px
      0 !important;
  }

  #overview.zd-detail-section
  > details.zd-customer-contact-edit:not([open]) {
    height: auto !important;
  }

  #overview.zd-detail-section
  > details.zd-customer-contact-edit[open] {
    padding-top: 0 !important;
  }

  #overview
  .zd-customer-contact-grid,
  #overview
  .zd-contact-address-fields {
    grid-template-columns: 1fr !important;
  }

  #overview
  .zd-customer-contact-grid
  > label:nth-child(3) {
    grid-column: auto !important;
  }

}



/* =========================================================
   ZD PROFILE LINK V1
   ========================================================= */

.zd-v2-shell a.zd-account-profile-link {
  color: inherit !important;
  text-decoration: none !important;

  cursor: pointer;

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.zd-v2-shell a.zd-account-profile-link:hover {
  border-color:
    rgba(59,130,246,.34);

  background:
    rgba(59,130,246,.08);

  box-shadow:
    0 0 0 3px rgba(59,130,246,.04);
}



/* =========================================================
   ZD OUTLOOK NATIVE SIGNATURE V1
   ========================================================= */

.zd-outlook-copy-source {
  display: none !important;
}


.zd-outlook-copy-hint {
  display: flex;
  align-items: center;

  gap: 6px;

  margin-top: 7px;

  color: #71839d;

  font-size: 9px;
  line-height: 1.35;
}


.zd-outlook-copy-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;

  border-radius: 50%;

  background:
    #71839d;
}


.zd-customer-mailto-action.is-zd-copy-success
.zd-outlook-copy-hint {
  color:
    #80d9b2;
}


.zd-customer-mailto-action.is-zd-copy-success
.zd-outlook-copy-dot {
  background:
    #48cf94;

  box-shadow:
    0 0 0 3px rgba(72,207,148,.08);
}


.zd-customer-mailto-action.is-zd-copy-fallback
.zd-outlook-copy-hint {
  color:
    #d8b663;
}


.zd-customer-mailto-action.is-zd-copy-fallback
.zd-outlook-copy-dot {
  background:
    #d8b663;
}



/* =========================================================
   ZD CUSTOMER UX POLISH V1
   ========================================================= */


/* ---------------------------------------------------------
   HEADER STATUS
   --------------------------------------------------------- */

.zd-customer-drawer-frame
.zd-drawer-head-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}


.zd-customer-status-switch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 5px !important;

  padding: 4px !important;

  border:
    1px solid rgba(112,136,172,.18) !important;

  border-radius: 11px !important;

  background:
    rgba(7,16,29,.58) !important;
}


.zd-customer-status-form {
  display: contents !important;
}


.zd-customer-status-option {
  box-sizing: border-box !important;

  min-height: 30px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 10px !important;

  border:
    1px solid transparent !important;

  border-radius: 8px !important;

  background:
    rgba(255,255,255,.025) !important;

  font: inherit !important;

  font-size: 9px !important;
  font-weight: 760 !important;
  line-height: 1 !important;

  text-decoration: none !important;

  cursor: pointer !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}


.zd-customer-status-option:hover:not(.is-disabled):not(.is-active) {
  transform: translateY(-1px);
}


.zd-customer-status-option.is-open {
  color: #e1bd62 !important;
}


.zd-customer-status-option.is-open:hover,
.zd-customer-status-option.is-open.is-active {
  border-color:
    rgba(225,189,98,.30) !important;

  background:
    rgba(225,189,98,.10) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 20px -13px rgba(225,189,98,.78) !important;
}


.zd-customer-status-option.is-sold {
  color: #68d9a5 !important;
}


.zd-customer-status-option.is-sold:hover,
.zd-customer-status-option.is-sold.is-active {
  border-color:
    rgba(104,217,165,.30) !important;

  background:
    rgba(104,217,165,.10) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 20px -13px rgba(104,217,165,.78) !important;
}


.zd-customer-status-option.is-rejected {
  color: #ff6c84 !important;
}


.zd-customer-status-option.is-rejected:hover,
.zd-customer-status-option.is-rejected.is-active {
  border-color:
    rgba(255,108,132,.30) !important;

  background:
    rgba(255,108,132,.10) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 20px -13px rgba(255,108,132,.70) !important;
}


.zd-customer-status-option.is-active {
  cursor: default !important;
}


.zd-customer-status-option.is-disabled {
  opacity: .30 !important;
  cursor: not-allowed !important;
}


/* ---------------------------------------------------------
   ÜBERSICHT OHNE STATUS-SEITENKARTE
   --------------------------------------------------------- */

.zd-customer-drawer-frame
.zd-overview-grid {
  grid-template-columns:
    minmax(0, 1fr) !important;
}


.zd-customer-drawer-frame
.zd-overview-grid
> .zd-detail-card {
  width: 100% !important;
  min-width: 0 !important;
}


/* Daten nutzen die frei gewordene Breite besser. */

.zd-customer-drawer-frame
.zd-overview-grid
.customer-info-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
}


/* ---------------------------------------------------------
   E-MAIL CTA
   --------------------------------------------------------- */

.zd-customer-drawer-frame
.zd-customer-mailto-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
}


.zd-customer-drawer-frame
.zd-mailto-primary {
  min-width: 205px !important;
  min-height: 40px !important;

  justify-content: center !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* ---------------------------------------------------------
   NOTIZEN / HISTORIE 50 / 50
   --------------------------------------------------------- */

.zd-customer-drawer-frame
.customer-activity-grid {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 12px !important;

  align-items: stretch !important;
}


.zd-customer-drawer-frame
.customer-activity-grid
> .customer-panel {
  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
}


/* ---------------------------------------------------------
   FOOTER / CREATE-AKTIONEN ZENTRIERT
   --------------------------------------------------------- */

.zd-customer-drawer-frame
.zd-drawer-footer {
  justify-content: center !important;
  gap: 10px !important;
}


.zd-customer-modal-frame
.customer-actions.zd-modal-footer {
  justify-content: center !important;
  gap: 10px !important;
}


/* ---------------------------------------------------------
   Verkaufsziel vom grünen Statusbutton
   --------------------------------------------------------- */

#zd-sale-completion {
  scroll-margin-top: 18px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 700px) {

  .zd-customer-drawer-frame
  .zd-drawer-head {
    gap: 10px !important;
  }


  .zd-customer-drawer-frame
  .zd-drawer-head-right {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }


  .zd-customer-status-option {
    min-height: 28px !important;
    padding: 0 7px !important;
  }


  .zd-customer-drawer-frame
  .zd-overview-grid
  .customer-info-grid,

  .zd-customer-drawer-frame
  .customer-activity-grid {
    grid-template-columns:
      1fr !important;
  }

}



/* =========================================================
   ZD CUSTOMER VISUAL POLISH V2
   Nur Darstellung — keine Fachlogik
   ========================================================= */


/* ---------------------------------------------------------
   1. KÜCHE BENÖTIGT
   Neue Standardfelder verhalten sich exakt wie
   die übrigen Felder im Kundenformular.
   --------------------------------------------------------- */

.zd-customer-modal-frame
.customer-field.zd-kitchen-needed-standard {
  min-width: 0 !important;
}


.zd-customer-modal-frame
.customer-field.zd-kitchen-needed-standard
input {
  box-sizing: border-box !important;

  width: 100% !important;
  min-height: 38px !important;

  padding: 7px 10px !important;

  border:
    1px solid
    var(
      --zd-line,
      rgba(255,255,255,.085)
    ) !important;

  border-radius: 10px !important;

  background:
    rgba(255,255,255,.045) !important;

  color:
    var(--zd-tx, #edf2fb) !important;

  font: inherit !important;

  outline: none !important;
}


/* ---------------------------------------------------------
   2. VERKAUF ABSCHLIESSEN
   Alle Eingabefelder optisch identisch zum
   normalen Kundenformular.
   --------------------------------------------------------- */

#zd-sale-completion
input,

#zd-sale-completion
select,

#zd-sale-completion
textarea {
  box-sizing: border-box !important;

  width: 100% !important;
  min-height: 38px !important;

  padding: 7px 10px !important;

  border:
    1px solid
    var(
      --zd-line,
      rgba(255,255,255,.085)
    ) !important;

  border-radius: 10px !important;

  outline: none !important;

  background:
    rgba(255,255,255,.045) !important;

  color:
    var(--zd-tx, #edf2fb) !important;

  font: inherit !important;

  box-shadow: none !important;
}


#zd-sale-completion
input:focus,

#zd-sale-completion
select:focus,

#zd-sale-completion
textarea:focus {
  border-color:
    rgba(127,180,255,.55) !important;

  box-shadow:
    var(--zd-glow-blue) !important;
}


/*
 * Labels ebenfalls identisch zum Create-Formular.
 */

#zd-sale-completion
.customer-info-label,

#zd-sale-completion
label {
  display: block !important;

  margin-bottom: 6px !important;

  color:
    var(--zd-tx-3, #6f82a0) !important;

  font-size: 10.5px !important;
  font-weight: 800 !important;

  line-height: 1.2 !important;

  letter-spacing: .13em !important;

  text-transform: uppercase !important;
}


/*
 * Normale Zweispalten-Anordnung für
 * Verkaufspreis / Datum / Auftragsdaten etc.
 */

#zd-sale-completion
.zd-sale-fields,

#zd-sale-completion
.zd-sale-completion-grid,

#zd-sale-completion
.zd-sale-customer-fields {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap:
    14px
    16px !important;

  align-items: start !important;
}


#zd-sale-completion
.zd-sale-fields
> *,

#zd-sale-completion
.zd-sale-completion-grid
> *,

#zd-sale-completion
.zd-sale-customer-fields
> * {
  box-sizing: border-box !important;

  min-width: 0 !important;
}


/*
 * Falls im Verkaufsabschluss ebenfalls noch der
 * bisherige kombinierte Küche-benötigt-Block
 * vorhanden ist:
 * keine Doppelrahmen / keine Sonderkarte mehr.
 */

#zd-sale-completion
.zd-kitchen-needed-inline {
  box-sizing: border-box !important;

  grid-column:
    1 / -1 !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


#zd-sale-completion
.zd-kitchen-needed-inline-title {
  margin:
    0
    0
    6px
    0 !important;

  color:
    var(--zd-tx-3, #6f82a0) !important;

  font-size:
    10.5px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .13em !important;

  text-transform:
    uppercase !important;
}


#zd-sale-completion
.zd-kitchen-needed-combo {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap:
    14px
    16px !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;
}


#zd-sale-completion
.zd-kitchen-needed-combo-part {
  box-sizing:
    border-box !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


/* ---------------------------------------------------------
   3. STATUS OBEN GRÖSSER
   --------------------------------------------------------- */

.zd-customer-drawer-frame
.zd-customer-status-switch {
  gap:
    6px !important;

  padding:
    5px !important;

  border-radius:
    12px !important;
}


.zd-customer-drawer-frame
.zd-customer-status-option {
  min-height:
    36px !important;

  padding:
    0
    13px !important;

  border-radius:
    9px !important;

  font-size:
    10.5px !important;

  font-weight:
    780 !important;

  letter-spacing:
    -.005em !important;
}


/* ---------------------------------------------------------
   4. KUNDENÜBERSICHT + KONTAKTDATEN BEARBEITEN
   exakt dieselbe vertikale Mitte.
   --------------------------------------------------------- */

#overview
> .zd-section-head {
  box-sizing:
    border-box !important;

  display:
    flex !important;

  align-items:
    center !important;

  min-height:
    36px !important;

  padding-right:
    190px !important;
}


/*
 * Durch die 36px hohe Überschriftszeile liegt
 * der 36px hohe Button jetzt exakt auf derselben
 * Mittelachse.
 */

#overview
> details.zd-customer-contact-edit {
  margin:
    -36px
    0
    14px
    auto !important;
}


#overview
> details.zd-customer-contact-edit[open] {
  margin:
    -36px
    0
    14px
    0 !important;
}


#overview
> details.zd-customer-contact-edit
> summary {
  box-sizing:
    border-box !important;

  min-height:
    36px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  margin-left:
    auto !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 700px) {

  #overview
  > .zd-section-head {
    min-height:
      0 !important;

    padding-right:
      0 !important;
  }


  #overview
  > details.zd-customer-contact-edit,

  #overview
  > details.zd-customer-contact-edit[open] {
    width:
      100% !important;

    margin:
      10px
      0
      14px
      0 !important;
  }


  #overview
  > details.zd-customer-contact-edit
  > summary {
    margin-left:
      0 !important;
  }


  #zd-sale-completion
  .zd-sale-fields,

  #zd-sale-completion
  .zd-sale-completion-grid,

  #zd-sale-completion
  .zd-sale-customer-fields,

  #zd-sale-completion
  .zd-kitchen-needed-combo {
    grid-template-columns:
      1fr !important;
  }


  .zd-customer-drawer-frame
  .zd-customer-status-option {
    min-height:
      32px !important;

    padding:
      0
      9px !important;

    font-size:
      9.5px !important;
  }

}



/* =========================================================
   ZD SMALL UI POLISH V1 — HIGH END
   ========================================================= */

/*
 * Dashboard:
 * rein dekorative ZeroDiff-Signaturkarte vollständig entfernen.
 */
.zd-signature-card {
  display: none !important;
}


/*
 * Kundenanfragen:
 * Außenrahmen technisch/eckig statt stark abgerundet.
 * Die bestehenden goldenen Details bleiben unangetastet.
 */
.zd-customer-table-card {
  border-radius: 4px !important;
}

.zd-customer-table-card::before,
.zd-customer-table-card::after {
  border-radius: 0 !important;
}

/* ZD VACATION BADGE V1 */
.zd-vacation-live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  padding: 0.8rem 1.08rem;
  margin-right: 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(229, 193, 99, 0.42);
  background:
    linear-gradient(
      180deg,
      rgba(55, 44, 18, 0.96) 0%,
      rgba(35, 28, 11, 0.93) 100%
    );
  color: #f1d27a;
  box-shadow:
    0 0 0 1px rgba(255, 221, 138, 0.07) inset,
    0 12px 28px rgba(0, 0, 0, 0.28),
    0 0 22px rgba(229, 193, 99, 0.14);
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.zd-vacation-live-icon {
  width: 1.7rem;
  height: 1.7rem;
  min-width: 1.7rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      circle at 35% 35%,
      #ffe8a2 0%,
      #e6bf63 58%,
      #9a7228 100%
    );
  color: #181203;
  font-size: 0.84rem;
  line-height: 1;
  box-shadow:
    0 0 0 1px rgba(255, 230, 156, 0.36) inset,
    0 0 16px rgba(229, 193, 99, 0.24);
}

.zd-vacation-live-text {
  color: #f1d27a;
}

@media (max-width: 1200px) {
  .zd-vacation-live-badge {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.75rem;
  }
}



/* =========================================================
   ZD TOPBAR VACATION BADGE V1
   ========================================================= */

.zd-topbar-vacation-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  min-height: 34px;
  padding: 0 11px;

  border: 1px solid rgba(225, 188, 88, .38);
  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      rgba(57, 45, 16, .72),
      rgba(34, 27, 11, .72)
    );

  color: #e7c568;
  text-decoration: none;

  box-shadow:
    0 0 0 1px rgba(255, 225, 140, .04) inset,
    0 0 18px rgba(225, 188, 88, .08);

  white-space: nowrap;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.zd-topbar-vacation-badge:hover {
  border-color: rgba(235, 203, 111, .68);

  background:
    linear-gradient(
      180deg,
      rgba(67, 53, 18, .84),
      rgba(40, 31, 11, .84)
    );

  box-shadow:
    0 0 22px rgba(225, 188, 88, .14);

  transform: translateY(-1px);
}

.zd-topbar-vacation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  color: #161005;

  background:
    radial-gradient(
      circle at 35% 35%,
      #ffe8a2,
      #ddb349 68%,
      #9b7222
    );

  font-size: 11px;

  box-shadow:
    0 0 12px rgba(226, 188, 80, .28);
}

.zd-topbar-vacation-copy {
  color: #e5c66e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.zd-topbar-vacation-badge.is-active {
  border-color: rgba(235, 201, 103, .72);

  background:
    linear-gradient(
      180deg,
      rgba(79, 60, 17, .90),
      rgba(47, 35, 10, .90)
    );

  box-shadow:
    0 0 0 1px rgba(255, 226, 136, .07) inset,
    0 0 25px rgba(226, 188, 80, .18);
}

.zd-topbar-vacation-badge.is-active
.zd-topbar-vacation-copy {
  color: #f1d47e;
}

@media (max-width: 1250px) {
  .zd-topbar-vacation-copy {
    display: none;
  }

  .zd-topbar-vacation-badge {
    width: 34px;
    padding: 0;
    justify-content: center;
  }
}

/* END ZD TOPBAR VACATION BADGE V1 */


/* =========================================================
   ZD TOPBAR VACATION BADGE V2
   ========================================================= */

.zd-topbar-vacation-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 36px;
  padding: 0 18px;
  margin-right: 10px;

  border-radius: 12px;
  border: 1px solid rgba(163, 176, 207, 0.18);

  background:
    linear-gradient(
      180deg,
      rgba(22, 31, 48, 0.92),
      rgba(15, 22, 35, 0.92)
    );

  color: #d9e4ff;
  text-decoration: none;
  white-space: nowrap;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 8px 24px rgba(0, 0, 0, 0.18);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.zd-topbar-vacation-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(190, 204, 235, 0.28);
  background:
    linear-gradient(
      180deg,
      rgba(27, 38, 58, 0.96),
      rgba(17, 25, 39, 0.96)
    );
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 10px 26px rgba(0, 0, 0, 0.22);
}

.zd-topbar-vacation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  border-radius: 999px;

  font-size: 10px;
  line-height: 1;

  color: #f5d36b;
  background: rgba(245, 211, 107, 0.10);
  box-shadow: 0 0 12px rgba(245, 211, 107, 0.10);
}

.zd-topbar-vacation-copy {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #e7edf9;
}

@media (max-width: 1380px) {
  .zd-topbar-vacation-copy {
    display: none;
  }

  .zd-topbar-vacation-badge {
    width: 36px;
    padding: 0;
    gap: 0;
  }
}

/* END ZD TOPBAR VACATION BADGE V2 */



/* ZD VACATION BADGE VISUAL V2 START */

.zd-topbar-vacation-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 188px !important;
  height: 36px !important;
  padding: 0 18px !important;
  margin-right: 12px !important;
  border-radius: 12px !important;
  text-decoration: none !important;

  color: #eef7ff !important;
  border: 1px solid rgba(103, 187, 255, 0.55) !important;
  background:
    linear-gradient(
      180deg,
      rgba(40, 105, 168, 0.34) 0%,
      rgba(22, 59, 102, 0.52) 100%
    ) !important;

  box-shadow:
    0 0 0 1px rgba(122, 198, 255, 0.12) inset,
    0 0 18px rgba(72, 160, 255, 0.18),
    0 10px 26px rgba(0, 0, 0, 0.24) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease !important;
}

.zd-topbar-vacation-badge:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(132, 210, 255, 0.75) !important;
  background:
    linear-gradient(
      180deg,
      rgba(52, 126, 196, 0.38) 0%,
      rgba(24, 71, 126, 0.58) 100%
    ) !important;
  box-shadow:
    0 0 0 1px rgba(140, 215, 255, 0.18) inset,
    0 0 22px rgba(82, 181, 255, 0.25),
    0 12px 28px rgba(0, 0, 0, 0.28) !important;
}

.zd-topbar-vacation-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;

  color: #dff3ff !important;
  background: rgba(128, 214, 255, 0.20) !important;
  box-shadow:
    0 0 10px rgba(128, 214, 255, 0.35),
    0 0 0 1px rgba(201, 238, 255, 0.18) inset !important;

  font-size: 10px !important;
  line-height: 1 !important;
}

.zd-topbar-vacation-copy {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  color: #eef7ff !important;
}

/* falls alter Text-Subline noch aus altem Markup vorhanden ist */
.zd-topbar-vacation-badge small,
.zd-topbar-vacation-badge .zd-topbar-vacation-subline,
.zd-topbar-vacation-badge .zd-vacation-date,
.zd-topbar-vacation-badge .zd-vacation-range {
  display: none !important;
}

@media (max-width: 1420px) {
  .zd-topbar-vacation-badge {
    min-width: auto !important;
    padding: 0 14px !important;
  }
}

@media (max-width: 1260px) {
  .zd-topbar-vacation-copy {
    display: none !important;
  }

  .zd-topbar-vacation-badge {
    min-width: 36px !important;
    width: 36px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
}

/* ZD VACATION BADGE VISUAL V2 END */


/* =========================================================
   ZD VACATION BADGE PREMIUM V3
   ========================================================= */

.zd-topbar-vacation-badge {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 9px !important;

  min-width: 180px !important;
  height: 36px !important;
  padding: 0 17px !important;

  margin-right: 10px !important;

  border-radius: 9px !important;

  border:
    1px solid rgba(103, 153, 205, 0.26) !important;

  background:
    linear-gradient(
      180deg,
      rgba(15, 28, 46, 0.96) 0%,
      rgba(9, 20, 35, 0.98) 100%
    ) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.035) inset,
    0 8px 22px rgba(0,0,0,0.22) !important;

  text-decoration: none !important;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease !important;
}

.zd-topbar-vacation-badge::before {
  content: "" !important;

  position: absolute !important;
  left: -1px !important;
  top: 8px !important;
  bottom: 8px !important;

  width: 2px !important;

  border-radius: 2px !important;

  background:
    linear-gradient(
      180deg,
      rgba(95, 195, 255, .35),
      rgba(93, 173, 238, .95),
      rgba(95, 195, 255, .35)
    ) !important;
}

.zd-topbar-vacation-badge:hover {
  border-color:
    rgba(111, 175, 230, 0.40) !important;

  background:
    linear-gradient(
      180deg,
      rgba(18, 34, 55, 0.98) 0%,
      rgba(10, 23, 39, 0.99) 100%
    ) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 8px 24px rgba(0,0,0,0.25),
    0 0 18px rgba(54, 143, 214, 0.07) !important;

  transform: none !important;
}


/* altes Stern-/Sonnenicon zu kleinem Statuspunkt machen */
.zd-topbar-vacation-icon {
  position: relative !important;

  width: 7px !important;
  min-width: 7px !important;
  height: 7px !important;

  padding: 0 !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: #65bff4 !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;

  box-shadow:
    0 0 0 3px rgba(101, 191, 244, 0.08),
    0 0 9px rgba(101, 191, 244, 0.30) !important;
}


/* ruhigere hochwertige Typografie */
.zd-topbar-vacation-copy {
  display: inline-flex !important;
  align-items: center !important;

  color: #dbe8f5 !important;

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size: 12px !important;
  font-weight: 650 !important;

  line-height: 1 !important;

  letter-spacing: 0.025em !important;

  text-shadow: none !important;
}


/* alte Glow-/Active-Regeln zuverlässig überschreiben */
.zd-topbar-vacation-badge.is-active,
.zd-topbar-vacation-badge.is-planned {
  border-color:
    rgba(103, 153, 205, 0.26) !important;

  background:
    linear-gradient(
      180deg,
      rgba(15, 28, 46, 0.96),
      rgba(9, 20, 35, 0.98)
    ) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.035) inset,
    0 8px 22px rgba(0,0,0,0.22) !important;
}


/* END ZD VACATION BADGE PREMIUM V3 */

/* =========================================================
   ZD VACATION BADGE PREMIUM AMBER V4
   ========================================================= */

.zd-topbar-vacation-badge,
.zd-topbar-vacation-badge.is-active,
.zd-topbar-vacation-badge.is-planned {
  border:
    1px solid rgba(237, 172, 70, 0.34) !important;

  background:
    linear-gradient(
      180deg,
      rgba(54, 38, 18, 0.88) 0%,
      rgba(31, 24, 15, 0.94) 100%
    ) !important;

  box-shadow:
    0 1px 0 rgba(255, 222, 157, 0.05) inset,
    0 8px 22px rgba(0, 0, 0, 0.22),
    0 0 14px rgba(222, 145, 42, 0.07) !important;
}


/* feiner warmer Akzent links */
.zd-topbar-vacation-badge::before {
  background:
    linear-gradient(
      180deg,
      rgba(244, 192, 104, 0.32),
      rgba(235, 157, 54, 0.95),
      rgba(244, 192, 104, 0.32)
    ) !important;
}


/* kleiner sonniger Statuspunkt */
.zd-topbar-vacation-icon {
  background: #efa94b !important;

  box-shadow:
    0 0 0 3px rgba(239, 169, 75, 0.09),
    0 0 9px rgba(239, 169, 75, 0.30) !important;
}


/* etwas wärmere Schrift */
.zd-topbar-vacation-copy {
  color: #f4d6a2 !important;
  font-weight: 650 !important;
}


/* Hover nur leicht heller */
.zd-topbar-vacation-badge:hover {
  border-color:
    rgba(242, 183, 83, 0.48) !important;

  background:
    linear-gradient(
      180deg,
      rgba(64, 44, 18, 0.94) 0%,
      rgba(37, 27, 14, 0.97) 100%
    ) !important;

  box-shadow:
    0 1px 0 rgba(255, 226, 167, 0.06) inset,
    0 8px 24px rgba(0, 0, 0, 0.24),
    0 0 17px rgba(229, 151, 46, 0.10) !important;
}

/* END ZD VACATION BADGE PREMIUM AMBER V4 */

/* =========================================================
   ZD WORKFLOW QUOTES PREMIUM V2 SAFE
   ========================================================= */

.zd-dashboard-workflow-rail .dashboard-workflows {
  display: flex !important;
  flex-direction: column !important;
}


/* Bereich im freien unteren Teil */
.zd-workflow-quotes {
  margin-top: auto !important;

  padding:
    18px
    16px
    16px !important;

  border-top:
    1px solid
    rgba(113, 137, 177, .14) !important;
}


/* Überschrift */
.zd-workflow-quotes-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 4px !important;

  margin-bottom: 14px !important;

  text-align: center !important;
}


.zd-workflow-quotes-head > span {
  color: #edf2fb !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  letter-spacing: -.01em !important;
  text-transform: none !important;
}


.zd-workflow-quotes-head > small {
  color: #7788a1 !important;

  font-size: 10px !important;
  font-weight: 500 !important;
}


/* Zwei Karten nebeneinander */
.zd-workflow-quotes-grid {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 12px !important;

  width: 100% !important;
}


/* Grundkarte */
.zd-workflow-quote-card {
  position: relative !important;

  min-width: 0 !important;
  min-height: 116px !important;

  padding:
    15px
    14px
    13px !important;

  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;

  border:
    1px solid
    rgba(115, 141, 184, .18) !important;

  border-radius: 14px !important;

  background:
    linear-gradient(
      180deg,
      rgba(17, 28, 46, .96) 0%,
      rgba(10, 18, 31, .98) 100%
    ) !important;

  box-shadow:
    0 1px 0
      rgba(255,255,255,.035)
      inset,
    0 10px 26px
      rgba(0,0,0,.20) !important;
}


/* feiner Lichtakzent oben */
.zd-workflow-quote-card::before {
  content: "" !important;

  position: absolute !important;

  top: 0 !important;
  left: 18px !important;
  right: 18px !important;

  height: 2px !important;

  border-radius: 0 0 999px 999px !important;
}


/* Kopfbereich */
.zd-workflow-quote-top {
  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  gap: 7px !important;
}


.zd-workflow-quote-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 7px !important;

  color: #9caac0 !important;

  font-size: 10px !important;
  font-weight: 700 !important;

  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}


.zd-workflow-quote-label i {
  width: 6px !important;
  height: 6px !important;

  flex: 0 0 6px !important;

  border-radius: 50% !important;
}


/* Prozentwert */
.zd-workflow-quote-top > strong {
  color: #f4f7fc !important;

  font-size: 29px !important;
  font-weight: 750 !important;

  line-height: 1 !important;

  letter-spacing: -.035em !important;
}


/* Fortschrittslinie */
.zd-workflow-quote-track {
  width: 78% !important;
  height: 3px !important;

  margin-top: 12px !important;

  overflow: hidden !important;

  border-radius: 999px !important;

  background:
    rgba(113, 133, 164, .12) !important;
}


.zd-workflow-quote-track > span {
  display: block !important;

  height: 100% !important;

  border-radius: inherit !important;
}


/* Anzahl */
.zd-workflow-quote-card > small {
  display: block !important;

  margin-top: 9px !important;

  color: #718199 !important;

  font-size: 10px !important;
  font-weight: 500 !important;
}


/* ABSCHLUSS */
.zd-workflow-quote-card.is-closing {
  border-color:
    rgba(70, 188, 145, .20) !important;
}


.zd-workflow-quote-card.is-closing::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(81, 202, 155, .86),
      transparent
    ) !important;
}


.zd-workflow-quote-card.is-closing
.zd-workflow-quote-label i {
  background: #58c99b !important;

  box-shadow:
    0 0 8px
    rgba(88, 201, 155, .22) !important;
}


.zd-workflow-quote-card.is-closing
.zd-workflow-quote-track > span {
  background:
    linear-gradient(
      90deg,
      #3a8f70,
      #63cfa1
    ) !important;
}


/* ABLEHNUNG */
.zd-workflow-quote-card.is-rejection {
  border-color:
    rgba(217, 115, 99, .20) !important;
}


.zd-workflow-quote-card.is-rejection::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(221, 126, 106, .82),
      transparent
    ) !important;
}


.zd-workflow-quote-card.is-rejection
.zd-workflow-quote-label i {
  background: #dc806b !important;

  box-shadow:
    0 0 8px
    rgba(220, 128, 107, .20) !important;
}


.zd-workflow-quote-card.is-rejection
.zd-workflow-quote-track > span {
  background:
    linear-gradient(
      90deg,
      #9d5549,
      #df846d
    ) !important;
}


@media (max-width: 1180px) {

  .zd-workflow-quotes-grid {
    grid-template-columns: 1fr !important;
  }

}


/* END ZD WORKFLOW QUOTES PREMIUM V2 SAFE */

/* =========================================================
   ZD DASHBOARD COLUMN HEIGHT ALIGN V2
   ========================================================= */

/* beide Hauptspalten bekommen identische Gesamthöhe */
.zd-dashboard-split.zd-dashboard-swap-v1 {
  align-items: stretch !important;
}


/* linke Seite: Performance + Rangliste */
.zd-dashboard-maincol.zd-dashboard-maincol-wide {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}


/* Ranglisten-Sektion füllt den verbleibenden Platz */
.zd-dashboard-maincol.zd-dashboard-maincol-wide
.zd-dashboard-ranking-section {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}


/* beide Ranglisten-Karten gemeinsam strecken */
.zd-dashboard-ranking-section
.zd-dashboard-ranking-grid {
  display: grid !important;
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  align-items: stretch !important;

  flex: 1 1 auto !important;
}


/* Karten selbst bis zur gleichen Unterkante */
.zd-dashboard-ranking-section
.dashboard-ranking-card {
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;
}


/* Ranglisteninhalt darf die zusätzliche Höhe aufnehmen */
.zd-dashboard-ranking-section
.dashboard-ranking-list {
  flex: 1 1 auto !important;
}


/* rechte Aufgaben-Spalte ebenfalls vollständig strecken */
.zd-dashboard-workflow-rail {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
}


.zd-dashboard-workflow-rail > .zd-section {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}


.zd-dashboard-workflow-rail
.dashboard-workflows {
  flex: 1 1 auto !important;
}


/* Mobile wieder normal */
@media (max-width: 1180px) {

  .zd-dashboard-maincol.zd-dashboard-maincol-wide,
  .zd-dashboard-workflow-rail,
  .zd-dashboard-workflow-rail > .zd-section,
  .zd-dashboard-ranking-section
  .dashboard-ranking-card {
    height: auto !important;
    min-height: 0 !important;
  }

}


/* END ZD DASHBOARD COLUMN HEIGHT ALIGN V2 */

/* =========================================================
   ZD CUSTOMER ACTION BUTTON CENTER V1
   ========================================================= */

/* Als kontaktiert markieren */
.zd-action-card
form[action*="/contacted/"] {
  text-align: center !important;
}

.zd-action-card
form[action*="/contacted/"] > button {
  display: inline-flex !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Wiedervorlage speichern */
.zd-action-card
form[action*="/follow-up/"]
.customer-note-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}


/* Als verkauft markieren */
.zd-action-card-sale
form[action*="/sell/"]
.customer-note-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}


/* END ZD CUSTOMER ACTION BUTTON CENTER V1 */

/* =========================================================
   ZD NOTE SAVE BUTTON CENTER V1
   ========================================================= */

form[action*="/notes/"]
.customer-note-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

form[action*="/notes/"]
.customer-note-actions > button {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Falls der Button ohne Actions-Wrapper eingebunden ist */
form[action*="/notes/"] {
  text-align: center !important;
}

form[action*="/notes/"] textarea {
  text-align: left !important;
}

/* END ZD NOTE SAVE BUTTON CENTER V1 */

/* ZD PAYMENT BADGE COMPACT V1 */

.zd-order-card-meta > span > strong.badge-green {
  display: inline-flex !important;
  align-items: center !important;

  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;

  padding-right: 5px !important;

  justify-self: start !important;
}

/* END ZD PAYMENT BADGE COMPACT V1 */

/* =========================================================
   ZD SALE FORM SIMPLIFY V1
   ========================================================= */

.zd-sale-kitchen-combo {
  grid-column: 1 / -1;
}

.zd-sale-kitchen-parts {
  display: grid;
  grid-template-columns:
    minmax(0, 150px)
    20px
    minmax(0, 220px);

  align-items: start;

  gap: 8px;

  max-width: 410px;
  margin-top: 6px;
}

.zd-sale-kitchen-part {
  display: grid;
  gap: 5px;
}

.zd-sale-kitchen-part > span {
  color: #7f91ad;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .10em;
  text-transform: uppercase;
}

.zd-sale-kitchen-part input {
  width: 100% !important;
  box-sizing: border-box !important;
}

.zd-sale-kitchen-divider {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 40px;

  padding-top: 17px;

  color: #64738b;

  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 700px) {

  .zd-sale-kitchen-parts {
    grid-template-columns:
      minmax(0, 1fr)
      14px
      minmax(0, 1fr);

    max-width: none;
  }

}

/* END ZD SALE FORM SIMPLIFY V1 */

/* =========================================================
   ZD SALE COMPACT FINAL V1
   ========================================================= */

.zd-sale-price-final {
  grid-column: 1 !important;
}

.zd-sale-kitchen-final {
  grid-column: 2 !important;
}

.zd-sale-price-final input,
.zd-sale-kitchen-final input {
  width: 100% !important;
  box-sizing: border-box !important;
}

.zd-sale-contract-final {
  grid-column: 1 / -1 !important;

  width: min(100%, 620px) !important;
  justify-self: center !important;

  margin-top: 10px !important;
}

.zd-sale-contract-final input {
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 850px) {

  .zd-sale-price-final,
  .zd-sale-kitchen-final,
  .zd-sale-contract-final {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

}

/* END ZD SALE COMPACT FINAL V1 */

/* =========================================================
   ZD KAUFVERTRAGSNUMMER ALIGN V2
   ========================================================= */

.zd-sale-contract-final {
  grid-column: 1 !important;

  width: 100% !important;
  max-width: none !important;

  justify-self: stretch !important;

  margin-top: 10px !important;
}

.zd-sale-contract-final input {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Mobile weiterhin volle Breite */
@media (max-width: 850px) {
  .zd-sale-contract-final {
    grid-column: 1 / -1 !important;
  }
}

/* END ZD KAUFVERTRAGSNUMMER ALIGN V2 */

/* =========================================================
   ZD ORDER MAIL GOLD COMPACT V1
   ========================================================= */

.zd-order-detail-v2 .zd-order-mail-gold {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 38px !important;
  padding: 0 15px !important;

  border: 1px solid transparent !important;
  border-radius: 11px !important;

  background:
    linear-gradient(
      140deg,
      var(--zd-gold-1, #f3dfa8),
      var(--zd-gold-2, #d9b45b) 52%,
      var(--zd-gold-3, #a8813a)
    ) !important;

  color: #1a1206 !important;

  box-shadow:
    0 14px 32px -16px
    rgba(217, 180, 91, .85) !important;

  font-size: 13px !important;
  font-weight: 600 !important;

  text-decoration: none !important;
  cursor: pointer !important;

  transition:
    transform .26s ease,
    box-shadow .26s ease !important;
}

.zd-order-detail-v2 .zd-order-mail-gold:hover {
  transform: translateY(-1px);

  box-shadow:
    0 18px 40px -16px
    rgba(217, 180, 91, 1) !important;
}

.zd-order-process-form .zd-order-mail-gold {
  align-self: end;
}

/* END ZD ORDER MAIL GOLD COMPACT V1 */

/* =========================================================
   ZD ORDER MAIL BUTTONS POLISH V2
   ========================================================= */

/* Zahlungszeile sauber in drei Spalten */
#anzahlung .zd-order-process-form {
  display: grid !important;
  grid-template-columns: 116px 120px 205px !important;
  gap: 10px !important;
  align-items: end !important;
}

/* Beide Mailvorlagen exakt identisch */
#anzahlung .zd-order-mail-gold {
  width: 205px !important;
  min-width: 205px !important;
  min-height: 38px !important;

  box-sizing: border-box !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 7px !important;

  white-space: nowrap !important;
}

/* Google-Vorlage exakt unter Anzahlungs-Vorlage */
#anzahlung .zd-order-google-mail-row {
  margin-top: 10px !important;
  margin-left: 256px !important;
  width: 205px !important;
}

/* kleines Mail-Symbol */
#anzahlung .zd-mail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  line-height: 1;
}

/* Erklärung direkt unter beiden Vorlagen */
#anzahlung .zd-order-mail-template-info {
  margin-top: 7px;
  margin-left: 256px;

  width: 245px;

  display: flex;
  align-items: flex-start;
  gap: 6px;

  color: #778aa7;

  font-size: 9px;
  line-height: 1.45;
}

/* Mobile */
@media (max-width: 760px) {

  #anzahlung .zd-order-process-form {
    grid-template-columns: 1fr !important;
  }

  #anzahlung .zd-order-mail-gold {
    width: 100% !important;
    min-width: 0 !important;
  }

  #anzahlung .zd-order-google-mail-row,
  #anzahlung .zd-order-mail-template-info {
    margin-left: 0 !important;
    width: 100% !important;
  }

}

/* END ZD ORDER MAIL BUTTONS POLISH V2 */

/* =========================================================
   ZD PAYMENT MAIL LAYOUT V4
   ========================================================= */

/* Zahlungsreihe in fester Gesamtbreite */
.zd-order-payment-row {
  display: grid !important;
  grid-template-columns: 126px 136px !important;
  gap: 10px !important;
  align-items: end !important;
  width: 272px !important;
  max-width: 100% !important;
}

.zd-order-payment-row label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.zd-order-payment-row .zd-order-btn-success {
  width: 100% !important;
  min-height: 38px !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Mailbereich direkt darunter */
.zd-order-mail-stack {
  width: 272px !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.zd-order-google-mail-row {
  margin-top: 0 !important;
  width: 100% !important;
}

/* Beide Mailbuttons identisch */
.zd-order-mail-stack .zd-mailto-primary,
.zd-order-google-mail-row .zd-mailto-primary {
  width: 100% !important;
  min-height: 38px !important;
  box-sizing: border-box !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  text-decoration: none !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* Mail-Icon */
.zd-order-mail-stack .zd-mail-icon,
.zd-order-google-mail-row .zd-mail-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

/* Info unter den Vorlagen */
.zd-order-mail-template-info {
  width: 272px !important;
  max-width: 100% !important;
  margin-top: 2px !important;

  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;

  color: #7d8fad !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}

/* Mobile */
@media (max-width: 760px) {

  .zd-order-payment-row {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .zd-order-mail-stack,
  .zd-order-mail-template-info {
    width: 100% !important;
  }

}

/* END ZD PAYMENT MAIL LAYOUT V4 */

/* =========================================================
   ZD PAYMENT STACK FINAL V5
   ========================================================= */

/*
   Gesamtbreite:
   Datum + Zahlung erhalten = exakt so breit
   wie jede einzelne E-Mailvorlage darunter.
*/
#anzahlung .zd-order-process-form,
#anzahlung .zd-order-payment-row {
  display: grid !important;
  grid-template-columns: 116px 146px !important;

  width: 272px !important;
  max-width: 100% !important;

  gap: 10px !important;
  align-items: end !important;
}


/* Datum */
#anzahlung .zd-order-process-form label {
  width: 116px !important;
  min-width: 0 !important;
}

#anzahlung .zd-order-process-form label input {
  width: 116px !important;
  box-sizing: border-box !important;
}


/* Zahlung erhalten */
#anzahlung .zd-order-btn-success {
  width: 146px !important;
  min-width: 146px !important;

  min-height: 38px !important;

  justify-content: center !important;
  text-align: center !important;
}


/* Mailbereich direkt unter dem Helper */
#anzahlung .zd-order-payment-mail-stack {
  width: 272px !important;
  max-width: 100% !important;

  margin-top: 10px !important;
}


/* Google exakt darunter */
#anzahlung .zd-order-google-mail-row {
  width: 272px !important;
  max-width: 100% !important;

  margin:
    10px 0 0 0 !important;
}


/* Beide Goldbuttons exakt identisch */
#anzahlung .zd-order-mail-gold {
  display: inline-flex !important;

  width: 272px !important;
  min-width: 272px !important;
  max-width: 100% !important;

  min-height: 38px !important;

  box-sizing: border-box !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;

  padding: 0 15px !important;

  white-space: nowrap !important;
  text-align: center !important;

  text-decoration: none !important;
}


/* Icon bei BEIDEN Vorlagen */
#anzahlung .zd-mail-icon {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  font-size: 14px !important;
  line-height: 1 !important;
}


/* Hinweis unter beiden Vorlagen */
#anzahlung .zd-order-mail-template-info {
  width: 272px !important;
  max-width: 100% !important;

  margin:
    7px 0 0 0 !important;

  display: flex !important;

  gap: 6px !important;

  color: #7d8faa !important;

  font-size: 9px !important;
  line-height: 1.45 !important;
}


/* Mobile */
@media (max-width: 600px) {

  #anzahlung .zd-order-process-form,
  #anzahlung .zd-order-payment-row {
    grid-template-columns: 1fr !important;

    width: 100% !important;
  }

  #anzahlung .zd-order-process-form label,
  #anzahlung .zd-order-process-form label input,
  #anzahlung .zd-order-btn-success,
  #anzahlung .zd-order-payment-mail-stack,
  #anzahlung .zd-order-google-mail-row,
  #anzahlung .zd-order-mail-gold,
  #anzahlung .zd-order-mail-template-info {
    width: 100% !important;
    min-width: 0 !important;
  }

}

/* END ZD PAYMENT STACK FINAL V5 */

/* =========================================================
   ZD PAYMENT BUTTON ROW FIX V6
   ========================================================= */

/* Datum + grüner Button */
#anzahlung .zd-order-process-form,
#anzahlung .zd-order-payment-row {
  display: grid !important;
  grid-template-columns: 116px 176px !important;
  gap: 10px !important;
  align-items: end !important;
  width: auto !important;
  max-width: 100% !important;
}

#anzahlung .zd-order-process-form label {
  width: 116px !important;
  min-width: 116px !important;
}

#anzahlung .zd-order-process-form label input {
  width: 116px !important;
  box-sizing: border-box !important;
}

#anzahlung .zd-order-btn-success {
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Mailbereich darunter: zwei Buttons nebeneinander */
#anzahlung .zd-order-payment-mail-stack,
#anzahlung .zd-order-google-mail-row {
  width: auto !important;
  max-width: 100% !important;
  margin-top: 10px !important;
}

#anzahlung .zd-order-payment-mail-stack {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

#anzahlung .zd-order-google-mail-row {
  display: contents !important;
}

/* beide goldenen Mailbuttons */
#anzahlung .zd-order-mail-gold,
#anzahlung .zd-order-payment-mail-stack .zd-mailto-primary,
#anzahlung .zd-order-google-mail-row .zd-mailto-primary {
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 15px !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Mail-Icon */
#anzahlung .zd-mail-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Hinweistext unter beiden Vorlagen */
#anzahlung .zd-order-mail-template-info {
  margin-top: 8px !important;
  width: 362px !important; /* 176 + 10 + 176 */
  max-width: 100% !important;
  color: #7d8faa !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
}

/* Mobile: sauber umbrechen */
@media (max-width: 640px) {
  #anzahlung .zd-order-process-form,
  #anzahlung .zd-order-payment-row {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  #anzahlung .zd-order-process-form label,
  #anzahlung .zd-order-process-form label input,
  #anzahlung .zd-order-btn-success {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #anzahlung .zd-order-payment-mail-stack {
    flex-direction: column !important;
    width: 100% !important;
  }

  #anzahlung .zd-order-mail-gold,
  #anzahlung .zd-order-payment-mail-stack .zd-mailto-primary,
  #anzahlung .zd-order-google-mail-row .zd-mailto-primary,
  #anzahlung .zd-order-mail-template-info {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* END ZD PAYMENT BUTTON ROW FIX V6 */

/* =========================================================
   ZD MAIL PAIR CENTER V7
   ========================================================= */

/* Gemeinsamer Bereich mittig */
#anzahlung .zd-order-mail-pair {
  display: grid !important;

  grid-template-columns:
    230px
    230px !important;

  column-gap: 12px !important;
  row-gap: 8px !important;

  width: max-content !important;
  max-width: 100% !important;

  margin:
    12px auto 0 !important;

  align-items: start !important;
}


/* Beide Wrapper identisch */
#anzahlung .zd-order-payment-mail-stack,
#anzahlung .zd-order-google-mail-row {
  display: block !important;

  width: 230px !important;
  min-width: 230px !important;
  max-width: 230px !important;

  margin: 0 !important;
}


/* Beide Goldbuttons exakt gleich */
#anzahlung .zd-order-mail-pair .zd-order-mail-gold,
#anzahlung .zd-order-mail-pair .zd-mailto-primary {
  display: inline-flex !important;

  width: 230px !important;
  min-width: 230px !important;
  max-width: 230px !important;

  min-height: 40px !important;

  box-sizing: border-box !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;

  padding:
    0 14px !important;

  margin: 0 !important;

  font-size: 13px !important;
  font-weight: 600 !important;

  white-space: nowrap !important;
  text-align: center !important;
}


/* Mail-Icons identisch */
#anzahlung .zd-order-mail-pair .zd-mail-icon {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 auto !important;

  font-size: 14px !important;
  line-height: 1 !important;
}


/* Info über komplette Breite darunter */
#anzahlung .zd-order-mail-pair
.zd-order-mail-template-info {
  grid-column: 1 / -1 !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  justify-content: center !important;

  text-align: center !important;

  color: #7d8faa !important;

  font-size: 9px !important;
  line-height: 1.45 !important;
}


/* Mobile */
@media (max-width: 560px) {

  #anzahlung .zd-order-mail-pair {
    grid-template-columns:
      1fr !important;

    width: 100% !important;
  }

  #anzahlung .zd-order-payment-mail-stack,
  #anzahlung .zd-order-google-mail-row,
  #anzahlung .zd-order-mail-pair .zd-order-mail-gold,
  #anzahlung .zd-order-mail-pair .zd-mailto-primary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #anzahlung .zd-order-mail-pair
  .zd-order-mail-template-info {
    grid-column: 1 !important;
  }

}

/* END ZD MAIL PAIR CENTER V7 */

/* =========================================================
   ZD PAYMENT CENTER ALIGN V8
   ========================================================= */

/*
  Datumsfeld verbreitern, damit "Zahlung erhalten"
  exakt über der Mitte zwischen den beiden Mailvorlagen sitzt.
*/
#anzahlung .zd-order-process-form,
#anzahlung .zd-order-payment-row {
  grid-template-columns:
    168px
    176px !important;
}

#anzahlung .zd-order-process-form label {
  width: 168px !important;
  min-width: 168px !important;
}

#anzahlung .zd-order-process-form label input {
  width: 168px !important;
  min-width: 168px !important;
  box-sizing: border-box !important;
}

/* Mobile unverändert flexibel */
@media (max-width: 600px) {

  #anzahlung .zd-order-process-form,
  #anzahlung .zd-order-payment-row {
    grid-template-columns: 1fr !important;
  }

  #anzahlung .zd-order-process-form label,
  #anzahlung .zd-order-process-form label input {
    width: 100% !important;
    min-width: 0 !important;
  }

}

/* END ZD PAYMENT CENTER ALIGN V8 */

/* =========================================================
   ZD ORDER HEADER SIMPLE FINAL
   ========================================================= */

.zd-order-detail-v2 .zd-order-number {
  display: inline-block !important;
  margin-top: 4px !important;

  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: .02em !important;

  color: var(--zd-gold-1, #f3dfa8) !important;
}


/* größere Preisbox */
.zd-order-detail-v2 .zd-order-detail-price {
  min-width: 255px !important;
  min-height: 124px !important;

  padding: 18px 24px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  text-align: center !important;
}


/* wirklich alles mittig */
.zd-order-detail-v2 .zd-order-detail-price > span,
.zd-order-detail-v2 .zd-order-detail-price > strong,
.zd-order-detail-v2 .zd-order-detail-price > small {
  width: 100% !important;
  text-align: center !important;
}

.zd-order-detail-v2 .zd-order-detail-price > strong {
  margin: 8px 0 6px !important;
  font-size: 28px !important;
  line-height: 1 !important;
}


/* nach Entfernen des rechten Final-Badges */
.zd-order-detail-v2
.zd-order-flow-panel
.zd-order-section-head {
  justify-content: flex-start !important;
}

/* END ZD ORDER HEADER SIMPLE FINAL */

/* =========================================================
   ZD AUFMASS BUTTON HEIGHT ALIGN V1
   ========================================================= */

#aufmass button[type="submit"] {
  min-height: 40px !important;
  height: 40px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
}

/* END ZD AUFMASS BUTTON HEIGHT ALIGN V1 */

/* =========================================================
   ZD MEASUREMENT SAVE BUTTON EXACT V2
   ========================================================= */

.zd-order-detail-v2 .zd-measurement-save-btn {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
}

/* END ZD MEASUREMENT SAVE BUTTON EXACT V2 */

/* =========================================================
   ZD BOTTOM CARD TITLES CENTER V1
   ========================================================= */

#notizen .zd-order-section-head,
#historie .zd-order-section-head {
  justify-content: center !important;
  text-align: center !important;
}

#notizen .zd-order-section-head > div,
#historie .zd-order-section-head > div {
  width: 100% !important;
  text-align: center !important;
}

#notizen .zd-order-eyebrow,
#historie .zd-order-eyebrow {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

/* END ZD BOTTOM CARD TITLES CENTER V1 */

/* =========================================================
   ZD NOTE SAVE BUTTON CENTER V1
   ========================================================= */

#notizen .zd-order-note-form .zd-order-btn-primary {
  display: flex !important;
  width: max-content !important;

  margin-left: auto !important;
  margin-right: auto !important;

  align-items: center !important;
  justify-content: center !important;
}

/* END ZD NOTE SAVE BUTTON CENTER V1 */

/* =========================================================
   ZD NOTE SAVE BUTTON TRUE CENTER V2
   ========================================================= */

/* Aktionszeile über die komplette Kartenbreite aufteilen */
#notizen .zd-order-note-form > div:last-child {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;

  width: 100% !important;

  align-items: center !important;
  column-gap: 12px !important;
}

/* Button exakt in die Kartenmitte */
#notizen .zd-order-note-form > div:last-child
.zd-order-btn-primary {
  grid-column: 2 !important;

  width: max-content !important;
  margin: 0 !important;

  justify-self: center !important;
}

/* Hinweis bleibt rechts */
#notizen .zd-order-note-form > div:last-child
.zd-order-helper {
  grid-column: 3 !important;

  justify-self: end !important;
  text-align: right !important;
}

/* END ZD NOTE SAVE BUTTON TRUE CENTER V2 */

/* =========================================================
   ZD NOTE ACTION CENTER FINAL V3
   ========================================================= */

#notizen .zd-order-note-form > div:last-child {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  grid-template-rows: auto auto !important;

  width: 100% !important;

  align-items: center !important;
  justify-items: center !important;

  column-gap: 12px !important;
  row-gap: 7px !important;
}

/* Button exakt mittig */
#notizen .zd-order-note-form > div:last-child
.zd-order-btn-primary {
  grid-column: 2 !important;
  grid-row: 1 !important;

  width: max-content !important;
  margin: 0 !important;

  justify-self: center !important;
}

/* Hinweis direkt darunter, mittig */
#notizen .zd-order-note-form > div:last-child
.zd-order-helper {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;

  width: 100% !important;

  justify-self: center !important;
  text-align: center !important;

  margin: 0 !important;
}

/* END ZD NOTE ACTION CENTER FINAL V3 */

/* =========================================================
   ZD ORDER TYPOGRAPHY READABILITY V1
   ========================================================= */

/* kleine goldene Bereichsüberschriften */
.zd-order-detail-v2 .zd-order-eyebrow {
  font-size: 11px !important;
}

/* Prozessnummern 01–06 deutlich besser lesbar */
.zd-order-detail-v2 .zd-order-step-index {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;

  font-size: 11px !important;
  font-weight: 800 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Prozessüberschriften */
.zd-order-detail-v2 .zd-order-process-title small {
  font-size: 10px !important;
}

.zd-order-detail-v2 .zd-order-process-title strong {
  font-size: 14px !important;
}

/* Stammdaten */
.zd-order-detail-v2 .zd-order-info-grid span {
  font-size: 10px !important;
}

.zd-order-detail-v2 .zd-order-info-grid strong {
  font-size: 12px !important;
}

/* Formulare */
.zd-order-detail-v2 label {
  font-size: 10px !important;
}

.zd-order-detail-v2 input,
.zd-order-detail-v2 select,
.zd-order-detail-v2 textarea {
  font-size: 12px !important;
}

/* Buttons */
.zd-order-detail-v2 .zd-order-btn {
  font-size: 12px !important;
}

/* Status-Badges */
.zd-order-detail-v2 .zd-order-pill {
  font-size: 10px !important;
}

/* Hilfstexte */
.zd-order-detail-v2 .zd-order-helper {
  font-size: 10px !important;
  line-height: 1.45 !important;
}

/* Flow-Rail */
.zd-order-detail-v2 .zd-flow-label {
  font-size: 10px !important;
}

/* Hero-Untertitel */
.zd-order-detail-v2 .zd-order-detail-copy p {
  font-size: 11px !important;
}

/* Preisbox */
.zd-order-detail-v2 .zd-order-detail-price > span {
  font-size: 10px !important;
}

.zd-order-detail-v2 .zd-order-detail-price > small {
  font-size: 10px !important;
}

/* Readonly-/Infoboxen */
.zd-order-detail-v2 .zd-order-readonly {
  font-size: 11px !important;
}

/* Notizen und Historie */
.zd-order-detail-v2 .zd-order-activity-item,
.zd-order-detail-v2 .zd-order-empty-inline {
  font-size: 10px !important;
}

/* Kaufvertragsnummer im Bearbeitungsbereich */
#auftragsnummer .zd-order-step-index {
  font-size: 10px !important;
}

/* END ZD ORDER TYPOGRAPHY READABILITY V1 */

/* =========================================================
   ZD ORDER HELPER TEXT READABILITY V2
   ========================================================= */

.zd-order-detail-v2 .zd-order-helper {
  font-size: 12px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

/* END ZD ORDER HELPER TEXT READABILITY V2 */

/* =========================================================
   ZD PAYMENT NOT REQUIRED UI V1
   ========================================================= */

/* Datum + Zahlung erhalten + Ohne Anzahlung */
#anzahlung .zd-order-process-form,
#anzahlung .zd-order-payment-row {
  grid-template-columns:
    168px
    176px
    156px !important;

  width: 520px !important;
  max-width: 100% !important;

  gap: 10px !important;
  align-items: end !important;
}

#anzahlung .zd-order-no-payment-btn {
  width: 156px !important;
  min-width: 156px !important;
  min-height: 38px !important;

  justify-content: center !important;
  text-align: center !important;
}

@media (max-width: 640px) {

  #anzahlung .zd-order-process-form,
  #anzahlung .zd-order-payment-row {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  #anzahlung .zd-order-no-payment-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* END ZD PAYMENT NOT REQUIRED UI V1 */

/* =========================================================
   ZD FOLLOWUP SECTION HEADINGS CLEAN V1
   ========================================================= */

.zd-followup-section .zd-followup-section-head {
  align-items: flex-start !important;
}

.zd-followup-section .zd-followup-section-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;

  min-width: 0 !important;
}

.zd-followup-section .zd-followup-section-copy h2 {
  margin: 0 !important;

  font-size: 19px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
}

.zd-followup-section .zd-followup-section-info {
  margin: 0 !important;

  max-width: 620px !important;

  font-size: 12px !important;
  line-height: 1.5 !important;

  color: #8798b3 !important;
}

.zd-followup-section .zd-followup-count {
  margin-top: 2px !important;
  flex: 0 0 auto !important;
}

/* END ZD FOLLOWUP SECTION HEADINGS CLEAN V1 */

/* =========================================================
   ZD ORDER CANCELLATION UI V1
   ========================================================= */

#auftragsnummer .zd-order-cancel-actions {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#auftragsnummer .zd-order-cancel-form {
  margin: 0 !important;
}

.zd-order-detail-v2 .zd-order-btn-danger {
  min-height: 38px !important;
  padding: 0 17px !important;

  border: 1px solid rgba(255, 82, 104, .52) !important;
  background: rgba(191, 34, 55, .88) !important;
  color: #fff !important;

  font-weight: 750 !important;
}

.zd-order-detail-v2 .zd-order-btn-danger:hover {
  background: rgba(220, 45, 68, .96) !important;
}

.zd-order-cancelled-badge {
  display: inline-flex !important;
  align-items: center !important;

  min-height: 34px !important;
  padding: 0 13px !important;

  border: 1px solid rgba(255, 82, 104, .42) !important;
  border-radius: 8px !important;

  background: rgba(140, 27, 45, .26) !important;
  color: #ff7c90 !important;

  font-size: 11px !important;
  font-weight: 800 !important;
}

.zd-order-card.is-cancelled {
  border-color: rgba(255, 82, 104, .34) !important;
}

.zd-order-card-status.is-cancelled {
  color: #ff7589 !important;
  font-weight: 750 !important;
}

.zd-order-card-status.is-cancelled i {
  background: #ff5c73 !important;
  box-shadow: 0 0 12px rgba(255, 92, 115, .45) !important;
}

/* END ZD ORDER CANCELLATION UI V1 */
/* ZD ORDER ADMIN FILTERS V1 */
.zd-order-toolbar.has-admin-filters{flex-wrap:wrap!important}
.zd-order-admin-filters{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;width:100%!important;margin-top:4px!important}
.zd-order-origin-tabs{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}
.zd-order-admin-filter-label{font-size:10px!important;font-weight:800!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#8293ae!important;margin-right:3px!important}
.zd-order-origin-tab{position:relative!important;cursor:pointer!important}
.zd-order-origin-tab input{position:absolute!important;opacity:0!important;pointer-events:none!important}
.zd-order-origin-tab span{display:inline-flex!important;align-items:center!important;min-height:32px!important;padding:0 11px!important;border:1px solid rgba(117,139,174,.18)!important;border-radius:8px!important;background:rgba(18,27,41,.72)!important;color:#aebbd0!important;font-size:10px!important;font-weight:700!important}
.zd-order-origin-tab input:checked+span{border-color:rgba(217,180,91,.55)!important;background:rgba(180,137,46,.16)!important;color:#e8c45f!important}
.zd-order-date-filter{display:flex!important;align-items:center!important;gap:6px!important;color:#8293ae!important;font-size:10px!important;font-weight:800!important;text-transform:uppercase!important}
.zd-order-date-filter input{height:32px!important;padding:0 8px!important;border:1px solid rgba(117,139,174,.18)!important;border-radius:8px!important;background:#111b2a!important;color:#dce5f3!important}
/* END ZD ORDER ADMIN FILTERS V1 */
/* ZD ORDER ORIGIN SELECT V3 */
.zd-order-origin-select{display:flex!important;align-items:center!important;gap:6px!important;color:#8293ae!important;font-size:10px!important;font-weight:800!important;text-transform:uppercase!important}
.zd-order-origin-select select{height:32px!important;min-width:145px!important;padding:0 30px 0 10px!important;border:1px solid rgba(117,139,174,.18)!important;border-radius:8px!important;background:#111b2a!important;color:#dce5f3!important;font-size:11px!important;font-weight:700!important;text-transform:none!important;cursor:pointer!important}
.zd-order-origin-select select:focus{outline:none!important;border-color:rgba(217,180,91,.55)!important}
/* END ZD ORDER ORIGIN SELECT V3 */
/* ZD ORDER ADMIN FILTER ALIGN V2 */
.zd-order-toolbar.has-admin-filters{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto auto!important;align-items:center!important;gap:10px!important}
.zd-order-toolbar.has-admin-filters>.zd-order-search{grid-column:1/-1!important;justify-self:end!important}
.zd-order-toolbar.has-admin-filters>.zd-order-admin-filters{grid-column:1!important;grid-row:2!important;width:auto!important;margin:0!important;align-items:center!important;justify-self:end!important}
.zd-order-toolbar.has-admin-filters>.zd-order-toggle{grid-row:2!important;margin:0!important;align-self:center!important}
.zd-order-toolbar.has-admin-filters>.zd-order-btn{grid-row:2!important;margin:0!important;align-self:center!important}
@media(max-width:1100px){.zd-order-toolbar.has-admin-filters{display:flex!important;flex-wrap:wrap!important}.zd-order-toolbar.has-admin-filters>.zd-order-admin-filters{width:100%!important;justify-self:auto!important}}
/* END ZD ORDER ADMIN FILTER ALIGN V2 */
/* ZD CANCELLATION REASON UI V1 */
#auftragsnummer .zd-order-cancel-form{display:flex!important;align-items:center!important;gap:8px!important}
#auftragsnummer .zd-order-cancel-reason-select{height:38px!important;min-width:190px!important;padding:0 30px 0 10px!important;border:1px solid rgba(255,82,104,.28)!important;border-radius:8px!important;background:#111b2a!important;color:#dce5f3!important;font-size:11px!important;font-weight:650!important}
#auftragsnummer .zd-order-cancelled-state{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
#auftragsnummer .zd-order-cancelled-reason{font-size:11px!important;color:#ff9aaa!important;font-weight:650!important}
#auftragsnummer .zd-order-btn-danger-outline{min-height:36px!important;padding:0 13px!important;border:1px solid rgba(255,82,104,.36)!important;background:transparent!important;color:#ff8295!important}
#auftragsnummer .zd-order-btn-danger-outline:hover{background:rgba(180,35,55,.14)!important}
/* END ZD CANCELLATION REASON UI V1 */


/* =========================================================
   ZD LIGHT THEME FOUNDATION V1
   ========================================================= */

html[data-theme="light"] {
  color-scheme: light;

  --zd-bg: #f2f5f9;
  --zd-bg-deep: #e8edf4;

  --zd-surface: rgba(255, 255, 255, .72);
  --zd-surface-2: rgba(255, 255, 255, .94);
  --zd-surface-solid: #ffffff;

  --zd-panel-grad:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, .98),
      rgba(247, 249, 252, .96) 48%,
      rgba(239, 244, 249, .92)
    );

  --zd-line: rgba(22, 43, 72, .12);
  --zd-line-soft: rgba(22, 43, 72, .07);
  --zd-line-strong: rgba(22, 43, 72, .19);

  --zd-tx: #162840;
  --zd-tx-2: #52657f;
  --zd-tx-3: #7a8ba2;

  --zd-shadow:
    0 24px 58px -34px rgba(30, 48, 72, .28),
    0 1px 0 rgba(255, 255, 255, .9) inset;

  --zd-shadow-sm:
    0 12px 30px -20px rgba(30, 48, 72, .22);

  --zd-glow-blue:
    0 0 0 1px rgba(59, 130, 246, .16),
    0 16px 38px -26px rgba(59, 130, 246, .32);

  --zd-bp: rgba(52, 82, 120, .035);

  --navy: #ffffff;
  --navy-2: #eef3f8;
  --navy-3: rgba(22, 43, 72, .055);
  --anthra: #f5f7fa;

  --neutral-bg: rgba(22, 43, 72, .055);

  --sidebar-bg:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .98),
      rgba(245, 248, 252, .98)
    );

  --sidebar-active-bg:
    linear-gradient(
      94deg,
      rgba(59, 130, 246, .12),
      rgba(59, 130, 246, .035) 65%,
      transparent
    );
}

html[data-theme="light"] body {
  background: var(--zd-bg);
  color: var(--zd-tx);
}

html[data-theme="light"] body::before {
  background:
    radial-gradient(
      900px 520px at 78% -10%,
      rgba(59, 130, 246, .08),
      transparent 62%
    ),
    radial-gradient(
      700px 420px at 4% 104%,
      rgba(217, 180, 91, .07),
      transparent 60%
    );
}

html[data-theme="light"] .zd-v2-shell .sidebar {
  background: var(--sidebar-bg);
}

html[data-theme="light"] .zd-v2-shell .topbar {
  background: rgba(248, 250, 253, .90);
}

/* Sidebar Theme Control */

.zd-theme-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-height: 58px;
  padding: 10px 12px;

  border: 1px solid var(--zd-line);
  border-radius: 12px;

  background: var(--zd-surface);
}

.zd-theme-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.zd-theme-copy small {
  color: var(--zd-tx-3);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.zd-theme-copy strong {
  margin-top: 2px;
  color: var(--zd-tx);
  font-size: 11.5px;
  font-weight: 680;
}

.zd-theme-switch {
  flex: none;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
}

.zd-theme-track {
  position: relative;
  display: block;

  width: 42px;
  height: 24px;

  border: 1px solid var(--zd-line-strong);
  border-radius: 999px;

  background: var(--zd-surface-2);
  transition: .22s var(--zd-ease);
}

.zd-theme-thumb {
  position: absolute;
  top: 3px;
  left: 3px;

  width: 16px;
  height: 16px;

  border-radius: 50%;
  background: var(--zd-gold-2);

  box-shadow:
    0 4px 12px -5px rgba(217, 180, 91, .9);

  transition: transform .22s var(--zd-ease);
}

html[data-theme="light"] .zd-theme-thumb {
  transform: translateX(18px);
}

.zd-theme-switch:hover .zd-theme-track,
.zd-theme-switch:focus-visible .zd-theme-track {
  border-color: rgba(217, 180, 91, .55);
}

.zd-theme-version {
  margin-top: 9px;
}

/* Kompakte Sidebar */
@media (max-width: 1180px) {
  .zd-theme-card {
    justify-content: center;
    padding: 8px 5px;
  }

  .zd-theme-copy {
    display: none;
  }

  .zd-theme-track {
    width: 38px;
  }

  html[data-theme="light"] .zd-theme-thumb {
    transform: translateX(14px);
  }
}

/* END ZD LIGHT THEME FOUNDATION V1 */

/* =========================================================
   ZD LIGHT DETAIL PAGES V1
   Kundendetail + Auftragsdetail
   ========================================================= */


/* ---------------------------------------------------------
   KUNDENDETAIL
   --------------------------------------------------------- */

html[data-theme="light"] .zd-route-scrim {
  background: rgba(25, 39, 58, .24) !important;
}

html[data-theme="light"] .zd-customer-drawer-frame {
  background: #f5f7fa !important;
  border-color: rgba(22, 43, 72, .14) !important;
  box-shadow:
    0 28px 80px -35px rgba(19, 35, 55, .34) !important;
}

html[data-theme="light"] .zd-customer-drawer-frame .zd-drawer-head {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f9fc 100%
    ) !important;
  border-color: rgba(22, 43, 72, .10) !important;
}

html[data-theme="light"] .zd-customer-drawer-frame .customer-title,
html[data-theme="light"] .zd-customer-drawer-frame .customer-subtitle {
  color: #162840 !important;
}

html[data-theme="light"] .zd-customer-drawer-frame .customer-subtitle {
  color: #60738e !important;
}

html[data-theme="light"] .zd-customer-drawer-frame .zd-drawer-tabs {
  background: #edf2f7 !important;
  border-color: rgba(22, 43, 72, .08) !important;
}

html[data-theme="light"] .zd-customer-drawer-frame .zd-drawer-tabs a {
  color: #687b94 !important;
}

html[data-theme="light"] .zd-customer-drawer-frame .zd-drawer-tabs a.on {
  background: #ffffff !important;
  color: #162840 !important;
  box-shadow:
    0 4px 14px -10px rgba(22, 43, 72, .35) !important;
}

html[data-theme="light"] .zd-customer-drawer-frame .zd-drawer-body {
  background: #f5f7fa !important;
}

html[data-theme="light"] .zd-customer-drawer-frame .zd-detail-section,
html[data-theme="light"] .zd-customer-drawer-frame .customer-panel,
html[data-theme="light"] .zd-customer-drawer-frame .customer-card,
html[data-theme="light"] .zd-customer-drawer-frame .zd-action-card,
html[data-theme="light"] .zd-customer-drawer-frame .customer-form-card {
  background: #ffffff !important;
  border-color: rgba(22, 43, 72, .10) !important;
  color: #162840 !important;
  box-shadow:
    0 14px 32px -25px rgba(24, 43, 66, .24) !important;
}

html[data-theme="light"] .zd-customer-drawer-frame :is(
  h2,
  h3,
  strong,
  .customer-title
) {
  color: #162840 !important;
}

html[data-theme="light"] .zd-customer-drawer-frame :is(
  p,
  small,
  label
) {
  color: #61738c !important;
}

html[data-theme="light"] .zd-customer-drawer-frame :is(
  input,
  select,
  textarea
) {
  background: #ffffff !important;
  color: #162840 !important;
  border-color: rgba(22, 43, 72, .16) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .zd-customer-drawer-frame .zd-customer-contact-edit {
  background: #ffffff !important;
  border-color: rgba(22, 43, 72, .10) !important;
}

html[data-theme="light"] .zd-customer-drawer-frame .zd-customer-contact-edit summary {
  color: #36506e !important;
}

html[data-theme="light"] .zd-customer-drawer-frame .zd-close-btn {
  background: #ffffff !important;
  color: #162840 !important;
  border-color: rgba(22, 43, 72, .14) !important;
}

html[data-theme="light"] .zd-customer-drawer-frame .zd-customer-status-switch {
  background: #edf2f7 !important;
  border-color: rgba(22, 43, 72, .10) !important;
}

html[data-theme="light"] .zd-customer-drawer-frame .zd-customer-status-option {
  background: transparent !important;
}

html[data-theme="light"] .zd-customer-drawer-frame
.zd-customer-status-option.is-open {
  color: #9b7b28 !important;
}

html[data-theme="light"] .zd-customer-drawer-frame
.zd-customer-status-option.is-sold {
  color: #168c63 !important;
}

html[data-theme="light"] .zd-customer-drawer-frame
.zd-customer-status-option.is-rejected {
  color: #c24b63 !important;
}

html[data-theme="light"] .zd-customer-drawer-frame
.zd-customer-status-option.is-active {
  background: #ffffff !important;
  box-shadow:
    0 3px 12px -8px rgba(22, 43, 72, .30) !important;
}

html[data-theme="light"] .zd-customer-drawer-frame
.zd-customer-status-option.is-sold.is-active {
  background: rgba(60, 203, 140, .10) !important;
  border-color: rgba(60, 203, 140, .28) !important;
}

html[data-theme="light"] .zd-customer-drawer-frame
.zd-customer-status-option.is-rejected.is-active {
  background: rgba(242, 99, 127, .09) !important;
  border-color: rgba(242, 99, 127, .24) !important;
}


/* ---------------------------------------------------------
   AUFTRAGSDETAIL
   Hero bleibt bewusst dunkel.
   --------------------------------------------------------- */

html[data-theme="light"] .zd-order-detail-v2 {
  color: #162840 !important;
}

html[data-theme="light"] .zd-order-detail-v2 .zd-order-detail-shell {
  background: #f3f6fa !important;
  border-color: rgba(22, 43, 72, .11) !important;
}

html[data-theme="light"] .zd-order-detail-v2 .zd-order-detail-hero {
  /* Markenanker bewusst dunkel lassen */
  background-color: #06101f !important;
}

html[data-theme="light"] .zd-order-detail-v2 .zd-order-flow-panel {
  background: #f7f9fc !important;
  border-color: rgba(22, 43, 72, .10) !important;
}

html[data-theme="light"] .zd-order-detail-v2 .zd-order-detail-body {
  background: #f3f6fa !important;
}

html[data-theme="light"] .zd-order-detail-v2 :is(
  .zd-order-info-card,
  .zd-order-process-card
) {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fafbfd 100%
    ) !important;

  border-color: rgba(22, 43, 72, .10) !important;

  box-shadow:
    0 14px 34px -27px rgba(23, 41, 64, .26) !important;
}

html[data-theme="light"] .zd-order-detail-v2
.zd-order-info-grid > div {
  background: #f5f7fa !important;
  border-color: rgba(22, 43, 72, .07) !important;
}

html[data-theme="light"] .zd-order-detail-v2
.zd-order-info-grid span {
  color: #788ba4 !important;
}

html[data-theme="light"] .zd-order-detail-v2
.zd-order-info-grid strong {
  color: #18304d !important;
}

html[data-theme="light"] .zd-order-detail-v2
.zd-order-section-head h2,
html[data-theme="light"] .zd-order-detail-v2
.zd-order-process-title strong {
  color: #18304d !important;
}

html[data-theme="light"] .zd-order-detail-v2
.zd-order-process-title small,
html[data-theme="light"] .zd-order-detail-v2
.zd-order-helper,
html[data-theme="light"] .zd-order-detail-v2 label {
  color: #72859e !important;
}

html[data-theme="light"] .zd-order-detail-v2 :is(
  input,
  select,
  textarea
) {
  background: #ffffff !important;
  color: #18304d !important;
  border-color: rgba(22, 43, 72, .15) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .zd-order-detail-v2 :is(
  input,
  select,
  textarea
):focus {
  border-color: rgba(59, 130, 246, .48) !important;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, .08) !important;
}

html[data-theme="light"] .zd-order-detail-v2
.zd-order-cancel-reason-select {
  background: #ffffff !important;
  color: #6f3040 !important;
  border-color: rgba(194, 75, 99, .24) !important;
}

html[data-theme="light"] .zd-order-detail-v2
.zd-order-readonly {
  background: #f5f8fb !important;
  color: #536983 !important;
  border-color: rgba(22, 43, 72, .09) !important;
}

html[data-theme="light"] .zd-order-detail-v2
.zd-order-readonly strong {
  color: #18304d !important;
}

html[data-theme="light"] .zd-order-detail-v2
.zd-order-readonly-ok {
  background: rgba(60, 203, 140, .075) !important;
  border-color: rgba(60, 203, 140, .24) !important;
}

html[data-theme="light"] .zd-order-detail-v2 :is(
  .zd-order-activity-item,
  .zd-order-empty-inline,
  .zd-order-empty
) {
  background: #f7f9fc !important;
  border-color: rgba(22, 43, 72, .08) !important;
  color: #52657f !important;
}

html[data-theme="light"] .zd-order-detail-v2
.zd-order-step-index {
  background: rgba(59, 130, 246, .07) !important;
  border-color: rgba(59, 130, 246, .22) !important;
  color: #3567a9 !important;
}

/* Flow im hellen Bereich kontrastreicher */

html[data-theme="light"] .zd-order-detail-v2
.zd-flow-track {
  background: rgba(22, 43, 72, .15) !important;
}

html[data-theme="light"] .zd-order-detail-v2
.zd-flow-label {
  color: #71859e !important;
}

html[data-theme="light"] .zd-order-detail-v2
.zd-flow-step.done .zd-flow-track {
  background: rgba(60, 203, 140, .70) !important;
}

html[data-theme="light"] .zd-order-detail-v2
.zd-flow-step.done .zd-flow-label {
  color: #36735f !important;
}


/* ---------------------------------------------------------
   allgemeine Lesbarkeit im Hellmodus
   --------------------------------------------------------- */

html[data-theme="light"] {
  --zd-tx-2: #52657f;
  --zd-tx-3: #71839a;
}


/* END ZD LIGHT DETAIL PAGES V1 */
/* ZD EXTERNAL TOOL LINKS V1 */
.zd-nav-beta-copy{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important}
.zd-nav-beta-text{white-space:normal!important;font-size:11px!important;line-height:1.15!important}
.zd-beta-badge{flex:none!important;padding:2px 5px!important;border:1px solid rgba(217,180,91,.35)!important;border-radius:5px!important;background:rgba(217,180,91,.10)!important;color:var(--zd-gold-2)!important;font-size:7px!important;font-weight:850!important;letter-spacing:.08em!important}
.zd-admin-login{display:flex!important;align-items:center!important;gap:6px!important;margin-top:7px!important;padding:3px 4px!important;color:var(--zd-tx-3)!important;font-size:9.5px!important;font-weight:650!important;text-decoration:none!important}
.zd-admin-login:hover{color:var(--zd-gold-2)!important}
@media(max-width:1180px){.zd-admin-login span:last-child,.zd-nav-beta-copy{display:none!important}.zd-admin-login{justify-content:center!important}}
/* END ZD EXTERNAL TOOL LINKS V1 */