/* ============================================================
   FRIZZLI HQ — DESKTOP LAYER v5 — Modern Circular Design
   Urbanist Light für Body, Extra-Bold für Headings
   Lädt NACH app.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600;700;800;900&display=swap');

/* ==== GLOBALE TYPO ==== */
html, body {
  font-family: 'Urbanist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;               /* Body = Light */
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

/* Normale Text-Elemente = Light */
body, p, span, div, label, li, input, textarea, select, td, small, .tile-label,
.ord-card-meta, .ord-submeta, .bo-preview-sub, .gl-row-sub, .gl-kpi-sub {
  font-weight: 400;
}

/* Überschriften = Extra Bold */
h1, h2, h3, h4, h5,
.topbar-title, .gl-hero-title, .bo-hero-title,
.gl-kpi-value, .bo-stat-num,
.gl-panel-title, .bo-section-title,
.gl-row-title, .bo-preview-title,
.ord-topbar-heading, .ord-stat-num,
.greeting-name, .form-section-title {
  font-family: 'Urbanist', sans-serif;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

/* Sehr grosse Zahlen/Headlines = noch fetter */
.gl-hero-title, .bo-hero-title, .greeting-name, .ord-topbar-heading {
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}

/* Buttons & Tabs behalten 600-700 für Klickbarkeit */
button, .btn, .btn-primary, .btn-secondary, .tab-item, .ds-item,
.setting-row, .ord-chip, .ord-stat-lbl {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
}

/* KPI-Labels / Sub-Labels = Caps + mittel fett */
.gl-kpi-label, .bo-section-title, .bo-stat-lbl, .form-section-title,
.ds-group-label, .gl-hero-greet {
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  font-size: 10.5px !important;
}

/* ==== FARBEN: Pastell-Palette aus Urbanist-Moodboard ==== */
:root {
  --lime: #EFF0A3;            /* Vanila-Yellow */
  --lime-dark: #7D802C;
  --lime-soft: #F6F7D4;
  --vanila: #EFF0A3;
  --vanila-ink: #5C5E0C;
  --honeydew: #CFDECA;        /* Mint-Green */
  --honeydew-ink: #2F4A25;
  --alice: #D8DEF5;           /* Soft Blue */
  --alice-ink: #2E3B70;
  --ghost: #F6F5FA;           /* Ghost White */
  --peach: #FED7AA;           /* Warm Peach */
  --peach-ink: #7C2D12;
  --lilac: #E9D5FF;           /* Soft Lilac */
  --lilac-ink: #4C1D95;
  --rose: #FBCFE8;
  --rose-ink: #831843;
  --radius-lg: 20px;
  --radius-xl: 24px;
}

/* ==== GROSSZÜGIGERE RADIEN ==== */
.card, .section-card, .tile, .bo-preview, .bo-hero,
.gl-panel, .gl-kpi, .bo-stat, .ord-card, .invite-card,
.news-card, .modal, .modal-sheet {
  border-radius: var(--radius-lg);
}
.gl-hero, .bo-hero { border-radius: var(--radius-xl); }
.gl-row-thumb, .bo-preview-thumb { border-radius: 12px; }

/* ==== KPI-KACHELN: modernes Card-Design ==== */
.gl-kpi {
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--divider);
  padding: 24px 22px;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.22s, border-color 0.22s;
  position: relative;
  overflow: hidden;
}
.gl-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.18);
  border-color: var(--text);
}
.gl-kpi-label {
  color: var(--text-2);
  margin-bottom: 12px;
}
.gl-kpi-value {
  font-size: 34px !important;
  line-height: 1 !important;
  margin-bottom: 8px;
  color: var(--text);
}
.gl-kpi-sub {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.4;
  font-weight: 400;
}
/* Pastell-Farbvarianten für KPI-Kacheln */
.gl-kpi.color-vanila   { background: var(--vanila);   border-color: transparent; }
.gl-kpi.color-vanila .gl-kpi-value, .gl-kpi.color-vanila .gl-kpi-label { color: var(--vanila-ink); }
.gl-kpi.color-vanila .gl-kpi-sub { color: var(--vanila-ink); opacity: 0.75; }

.gl-kpi.color-honeydew { background: var(--honeydew); border-color: transparent; }
.gl-kpi.color-honeydew .gl-kpi-value, .gl-kpi.color-honeydew .gl-kpi-label { color: var(--honeydew-ink); }
.gl-kpi.color-honeydew .gl-kpi-sub { color: var(--honeydew-ink); opacity: 0.75; }

.gl-kpi.color-alice    { background: var(--alice);    border-color: transparent; }
.gl-kpi.color-alice .gl-kpi-value, .gl-kpi.color-alice .gl-kpi-label { color: var(--alice-ink); }
.gl-kpi.color-alice .gl-kpi-sub { color: var(--alice-ink); opacity: 0.75; }

.gl-kpi.color-peach    { background: var(--peach);    border-color: transparent; }
.gl-kpi.color-peach .gl-kpi-value, .gl-kpi.color-peach .gl-kpi-label { color: var(--peach-ink); }
.gl-kpi.color-peach .gl-kpi-sub { color: var(--peach-ink); opacity: 0.75; }

.gl-kpi.color-lilac    { background: var(--lilac);    border-color: transparent; }
.gl-kpi.color-lilac .gl-kpi-value, .gl-kpi.color-lilac .gl-kpi-label { color: var(--lilac-ink); }
.gl-kpi.color-lilac .gl-kpi-sub { color: var(--lilac-ink); opacity: 0.75; }

.gl-kpi.color-ghost    { background: var(--ghost);    border-color: var(--divider); }

.gl-kpi.color-dark     { background: #141414; color: #fff; border-color: transparent; }
.gl-kpi.color-dark .gl-kpi-value { color: var(--lime); }
.gl-kpi.color-dark .gl-kpi-label { color: rgba(255,255,255,0.6); }
.gl-kpi.color-dark .gl-kpi-sub   { color: rgba(255,255,255,0.55); }

/* Hover-Effekt überschreibt Hintergrund NICHT bei farbigen Kacheln */
.gl-kpi[class*="color-"]:hover {
  filter: brightness(0.96);
  background: inherit;
}

/* Sparkline in KPI-Kacheln */
.gl-kpi-spark {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 80px;
  height: 32px;
  opacity: 0.6;
  pointer-events: none;
}
.gl-kpi-spark path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gl-kpi-spark .spark-fill { opacity: 0.25; }

/* Grosses Sparkline (Umsatz-Card) */
.gl-kpi.sparkline-lg {
  min-height: 180px;
  display: flex;
  flex-direction: column;
}
.gl-kpi.sparkline-lg .gl-kpi-spark {
  position: relative;
  width: 100%;
  height: 60px;
  margin-top: auto;
  right: auto;
  bottom: auto;
  opacity: 0.85;
}

/* Avatar-Cluster (überlappende Avatars) */
.avatar-cluster {
  display: inline-flex;
  align-items: center;
}
.avatar-cluster .avatar-sm {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  margin-left: -8px;
}
.avatar-cluster .avatar-sm:first-child { margin-left: 0; }
.avatar-cluster .avatar-more {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
  border: 2px solid var(--card);
}

/* Farbigere Status-Pills */
.pill-hot    { background: #FEE2E2 !important; color: #991B1B !important; }
.pill-warm   { background: #FED7AA !important; color: #7C2D12 !important; }
.pill-cold   { background: var(--alice) !important; color: var(--alice-ink) !important; }
.pill-new    { background: var(--vanila) !important; color: var(--vanila-ink) !important; }
.pill-done   { background: var(--honeydew) !important; color: var(--honeydew-ink) !important; }
.pill-info   { background: var(--lilac) !important; color: var(--lilac-ink) !important; }

/* ==== HERO-CARDS: modern dunkel mit Akzent-Glow ==== */
.gl-hero, .bo-hero {
  background: linear-gradient(135deg, #141414 0%, #1f1f1f 100%);
  color: #fff;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.45);
  position: relative;
  overflow: hidden;
  padding: 36px 40px;
}
.gl-hero::before, .bo-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 50%;
  height: 160%;
  background: radial-gradient(circle, var(--lime) 0%, transparent 55%);
  opacity: 0.18;
  pointer-events: none;
}
.gl-hero-title, .bo-hero-title {
  color: #fff;
  font-size: 38px;
}
.gl-hero-sub, .bo-hero-sub {
  color: rgba(255,255,255,0.65);
  font-weight: 400;
}
.gl-hero-greet, .bo-hero-badge {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(239, 240, 163, 0.15);
  color: var(--lime);
  border-radius: 999px;
  margin-bottom: 14px;
  letter-spacing: 0.1em !important;
}

/* Plan-Bar im Hero */
.gl-hero-plan {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}
.gl-hero-plan-bar-fill {
  background: linear-gradient(90deg, var(--lime) 0%, var(--accent) 100%);
}
.gl-hero-plan-pct { color: var(--lime) !important; }

/* ==== PANELS ==== */
.gl-panel {
  background: var(--card);
  border: 1px solid var(--divider);
  box-shadow: 0 4px 16px -8px rgba(0,0,0,0.04);
}
.gl-panel-head {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--divider);
}
.gl-panel-title {
  font-size: 15px !important;
}
.gl-panel-link {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ==== ROWS mit rundem Avatar-Stil ==== */
.gl-row, .bo-preview-row {
  padding: 16px 24px;
  transition: background 0.15s;
  gap: 14px;
}
.gl-row-thumb, .bo-preview-thumb {
  width: 44px;
  height: 44px;
  font-size: 20px;
  background: var(--bg-2);
  border-radius: 14px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gl-row-title, .bo-preview-title {
  font-size: 14.5px;
  letter-spacing: -0.015em;
}
.gl-row:hover, .bo-preview-row:hover {
  background: var(--bg-2);
}

/* ==== TAGS mit Pill-Design ==== */
.bo-preview-tag, .gl-row-tag {
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-2);
  color: var(--text-2);
}
.bo-preview-tag.ok {
  background: var(--lime-soft);
  color: #4a5001;
}
.bo-preview-tag.warn {
  background: #FEF3C7;
  color: #92400E;
}
.bo-preview-tag.danger {
  background: #FEE2E2;
  color: #991B1B;
}

/* ==== BO-STATS Schnellaktionen ==== */
.bo-stat {
  background: var(--card);
  border: 1px solid var(--divider);
  padding: 22px 20px;
  transition: transform 0.2s, border-color 0.2s;
}
.bo-stat:hover {
  transform: translateY(-2px);
  border-color: var(--text);
}
.bo-stat-num {
  font-size: 36px !important;
  line-height: 1 !important;
}
.bo-stat-lbl {
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  font-size: 12px !important;
  text-transform: uppercase;
}
.bo-stat.accent .bo-stat-num { color: var(--accent); }
.bo-stat.success {
  background: var(--lime-soft);
  border-color: var(--lime);
}
.bo-stat.success .bo-stat-num { color: #4a5001; }
.bo-stat.warn {
  background: #FEF3C7;
  border-color: #FCD34D;
}

/* ==== BUTTONS ==== */
button, .btn, .btn-primary {
  transition: transform 0.12s, filter 0.15s, box-shadow 0.15s;
}
button:hover:not(:disabled):not(.ds-item):not(.tab-item) {
  filter: brightness(1.05);
}
button:active:not(:disabled) { transform: translateY(1px); }

/* ==== SECTION DIVIDERS ==== */
.bo-section-title, .form-section-title {
  color: var(--text-2);
  margin-bottom: 14px;
  padding-left: 4px;
}

/* ==== TOPBAR ==== */
.topbar-title {
  font-size: 30px !important;
}

/* ==== Desktop-only Fine-Tuning ==== */
@media (min-width: 1024px) {
  .gl-hero, .bo-hero { padding: 40px 44px; }
  .gl-kpi-value { font-size: 38px !important; }
  .bo-stat-num { font-size: 40px !important; }
}

/* ==== Desktop-Sidebar Active-State: weisse Pill ==== */
.ds-item.active {
  background: #fff !important;
  color: #141414 !important;
  font-weight: 700 !important;
}
.ds-item.active .ds-item-icon { color: var(--accent); }

/* Lime-Yellow Hover-Akzent für Sidebar */
.ds-item:hover:not(.active) {
  background: rgba(239, 240, 163, 0.08) !important;
}

/* ============================================================
   HAUPT-SEITEN: Zurück-Pfeil ausblenden
   Detail-Seiten (data-nav="/warehouse", /orders, /contacts etc.)
   zeigen den Pfeil weiterhin an.
   ============================================================ */
.topbar-btn[data-nav="/more"],
.topbar-btn[data-nav="/home"] {
  display: none !important;
}

/* ============================================================
   TOAST NOTIFICATIONS — Feedback bei Speichern-Aktionen
   ============================================================ */
#toast-root {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: #141414;
  color: #fff;
  padding: 14px 20px;
  border-radius: 14px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  box-shadow: 0 20px 48px -16px rgba(0,0,0,0.45),
              0 4px 12px -4px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 380px;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: toast-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(20px, -6px); }
  to   { opacity: 1; transform: translate(0, 0); }
}
.toast::before {
  content: '✓';
  font-size: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lime);
  color: #141414;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-weight: 900;
}
.toast.success {
  background: linear-gradient(135deg, #141414 0%, #1e2a1a 100%);
}
.toast.success::before {
  background: var(--lime);
  color: #141414;
}
.toast.warn {
  background: linear-gradient(135deg, #78350F 0%, #92400E 100%);
}
.toast.warn::before {
  content: '⚠';
  background: var(--peach);
  color: #78350F;
}
.toast.danger {
  background: linear-gradient(135deg, #7F1D1D 0%, #991B1B 100%);
}
.toast.danger::before {
  content: '✕';
  background: #FCA5A5;
  color: #7F1D1D;
}

/* Mobile: Toast unten statt oben-rechts */
@media (max-width: 1023px) {
  #toast-root {
    top: auto;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    left: 16px;
    align-items: stretch;
  }
  .toast {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   GLOBAL POLISH — wirkt auf ALLE Seiten
   ============================================================ */

/* ==== ORDER-CARDS (Bestellungen, To-Dos) ==== */
.ord-card {
  border-radius: 18px !important;
  border: 1px solid var(--divider) !important;
  padding: 18px 20px !important;
  background: var(--card) !important;
  box-shadow: 0 2px 8px -4px rgba(0,0,0,0.04);
  transition: transform 0.18s, box-shadow 0.2s, border-color 0.18s;
}
.ord-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,0.12);
  border-color: var(--text);
}
.ord-card-title {
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: -0.02em !important;
}

/* Bestellungs-Topbar — nur Desktop, sonst greift Mobile-CSS aus app.css */
@media (min-width: 1024px) {
  .ord-topbar {
    padding: 8px 0 20px !important;
    margin-bottom: 24px;
  }
  .ord-topbar-heading {
    font-family: 'Urbanist', sans-serif !important;
    font-weight: 900 !important;
    font-size: 32px !important;
    letter-spacing: -0.035em !important;
  }
  .ord-topbar-sub {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--text-2) !important;
  }
  /* KPI-Stats Gap nur Desktop */
  .ord-stats {
    gap: 14px !important;
  }
}

/* KPI-Stats oben (Lieferungen/Stück/Umsatz) — Desktop-only Polish */
@media (min-width: 1024px) {
.ord-stat {
  border-radius: 18px !important;
  border: 1px solid var(--divider) !important;
  background: var(--card) !important;
  padding: 22px 20px !important;
  transition: transform 0.18s, border-color 0.18s;
}
.ord-stat:hover {
  transform: translateY(-2px);
  border-color: var(--text);
}
.ord-stat-num {
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 900 !important;
  font-size: 32px !important;
  letter-spacing: -0.035em !important;
  color: var(--text) !important;
}
.ord-stat-lbl {
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 10.5px !important;
  color: var(--text-2) !important;
}

/* Filter-Chips ("Meine / Pool / Team / Fertig") */
.ord-stats .ord-stat[data-filter],
.ord-filter, .ord-filter-chip {
  cursor: pointer;
}
.ord-stat.active, .ord-filter.active {
  background: var(--text) !important;
  border-color: var(--text) !important;
}
.ord-stat.active .ord-stat-num,
.ord-stat.active .ord-stat-lbl { color: var(--bg) !important; }

/* Fertig-Pill (grüner Tag) */
.ord-stat.done {
  background: var(--lime) !important;
  border-color: var(--lime) !important;
}
.ord-stat.done .ord-stat-num,
.ord-stat.done .ord-stat-lbl { color: var(--vanila-ink) !important; }
} /* /@media min-width: 1024px (ord-stats Desktop-Polish) */

/* ==== HOME TILES (.tile) — Pastell-Farben ==== */
.tile-row {
  background: transparent !important;
  border: none !important;
  gap: 14px !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
}
.tile {
  border-radius: 18px !important;
  padding: 22px 20px !important;
  border: 1px solid var(--divider);
  background: var(--card) !important;
  transition: transform 0.18s, border-color 0.18s;
  cursor: pointer;
}
.tile:hover {
  transform: translateY(-2px);
  border-color: var(--text);
}
.tile-value {
  font-family: 'Urbanist', sans-serif !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}
.tile-kicker {
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

/* Pastell-Varianten für Tiles */
.tile.sand   { background: var(--honeydew) !important; border-color: transparent !important; }
.tile.cream  { background: var(--ghost)    !important; border-color: var(--divider) !important; }
.tile.sage   { background: var(--honeydew) !important; border-color: transparent !important; }
.tile.lilac  { background: var(--lilac)    !important; border-color: transparent !important; }
.tile.rose   { background: var(--peach)    !important; border-color: transparent !important; }
.tile.big    { background: var(--vanila)   !important; border-color: transparent !important; }
.tile.sand  .tile-value, .tile.sand  .tile-kicker, .tile.sand  .tile-label,
.tile.sage  .tile-value, .tile.sage  .tile-kicker, .tile.sage  .tile-label
{ color: var(--honeydew-ink) !important; }
.tile.lilac .tile-value, .tile.lilac .tile-kicker, .tile.lilac .tile-label
{ color: var(--lilac-ink) !important; }
.tile.rose  .tile-value, .tile.rose  .tile-kicker, .tile.rose  .tile-label
{ color: var(--peach-ink) !important; }
.tile.big   .tile-value, .tile.big   .tile-kicker, .tile.big   .tile-label
{ color: var(--vanila-ink) !important; }
@media (min-width: 1024px) {
  .tile-row { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ==== EVENT-HERO (Termin-Detail) ==== */
.ev-hero {
  border-radius: var(--radius-xl) !important;
  padding: 28px 32px !important;
  border-left-width: 4px !important;
  background: var(--card) !important;
  box-shadow: 0 4px 20px -10px rgba(0,0,0,0.08) !important;
}
.ev-hero-title {
  font-family: 'Urbanist', sans-serif !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}
.ev-hero-kicker {
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
}

/* ==== NEWS-CARDS im Home ==== */
.news-card {
  border-radius: 18px !important;
  border: 1px solid var(--divider) !important;
  padding: 16px 18px !important;
  background: var(--card) !important;
  transition: transform 0.18s, border-color 0.18s;
}
.news-card:hover {
  transform: translateY(-2px);
  border-color: var(--text);
}

/* ==== INVITE-CARDS ==== */
.invite-card {
  border-radius: 18px !important;
  border: 1px solid var(--divider) !important;
  background: var(--vanila) !important;
  border-color: transparent !important;
}

/* ==== SETTINGS ==== */
.settings-card {
  border-radius: 18px !important;
  border: 1px solid var(--divider) !important;
  margin: 12px 0 !important;
  background: var(--card) !important;
}
.setting-row {
  padding: 16px 20px !important;
  font-weight: 500 !important;
  transition: background 0.12s;
}
.setting-row:hover { background: var(--bg-2) !important; }
.setting-val {
  font-weight: 700 !important;
  color: var(--text-2) !important;
}

/* ==== INPUTS / SELECTS / TEXTAREAS ==== */
input, select, textarea {
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 500;
}
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"],
input[type="search"], select, textarea {
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--text) !important;
  box-shadow: 0 0 0 3px rgba(232,70,30,0.08);
}

/* ==== BTN-PRIMARY ==== */
.btn-primary {
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  border-radius: 999px !important;
  padding: 14px 22px !important;
}

/* ==== CHIPS (Participants, Filters) ==== */
.chip {
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}

/* ==== SECTION-HEADLINES ==== */
.section h3 {
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  letter-spacing: -0.03em !important;
}

/* ==== MODALS ==== */
.modal-title {
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  letter-spacing: -0.03em !important;
}

/* ==== EMPTY STATES ==== */
.empty-state, .ord-empty {
  border-radius: 20px !important;
  background: var(--card) !important;
  border: 1px dashed var(--divider) !important;
}
.empty-state-title, .ord-empty-msg {
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 800 !important;
}

/* ==== KALENDER — Weekly View ==== */
.wk-head {
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
}
.wk-head.today .wk-head-num {
  background: var(--text) !important;
}

/* ==== GOAL-DETAIL TABELLE ==== */
.gd-hero-num {
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}

/* ==== PIPELINE-Cards ==== */
.pipe-card, .pipe-stage-card {
  border-radius: 18px !important;
  border: 1px solid var(--divider) !important;
}

/* ==== CONTACT-ROW ==== */
.contact-row, .contact-card {
  border-radius: 18px !important;
  padding: 14px 18px !important;
  transition: background 0.12s, transform 0.15s;
}
.contact-row:hover, .contact-card:hover {
  background: var(--bg-2);
  transform: translateY(-1px);
}

/* ==== TO-DO ITEMS ==== */
.todo-list .todo-item, .todo-row {
  border-radius: 14px !important;
  padding: 14px 18px !important;
  background: var(--card) !important;
  border: 1px solid var(--divider);
  margin-bottom: 6px;
  transition: background 0.12s;
}
.todo-list .todo-item:hover, .todo-row:hover {
  background: var(--bg-2);
}

/* Desktop-Sidebar standardmäßig versteckt */
.desktop-sidebar { display: none; }

/* ============================================================
   ≥1024px — Desktop Layout
   ============================================================ */
@media (min-width: 1024px) {

  :root {
    --sidebar-w: 256px;
    --desktop-maxw: 1520px;
    --desktop-pad: 40px;
  }

  body {
    background: var(--bg-2);
    padding: 0;
  }
  #app {
    max-width: none;            /* volle Monitorbreite nutzen */
    margin: 0;
    padding: 32px var(--desktop-pad) 64px calc(var(--sidebar-w) + var(--desktop-pad));
    min-height: 100vh;
    background: var(--bg);
    box-shadow: 0 0 0 1px var(--divider);
    position: relative;
  }

  /* Mobile Tab-Bar + FAB komplett verstecken auf Desktop */
  .tab-bar, .fab-new { display: none !important; }

  /* ---- DESKTOP SIDEBAR ---- */
  .desktop-sidebar {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0;
    left: 0;                    /* Sidebar am linken Monitorrand */
    width: var(--sidebar-w);
    height: 100vh;
    background: #141414;
    color: #fff;
    padding: 20px 14px 16px;
    overflow-y: auto;
    z-index: 50;
    border-right: 1px solid #000;
  }
  @media (prefers-color-scheme: dark) {
    .desktop-sidebar { background: #f5f4f0; color: #141414; border-right-color: #ddd; }
  }

  /* Scrollbar dezent */
  .desktop-sidebar::-webkit-scrollbar { width: 4px; }
  .desktop-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

  /* Brand-Block */
  .ds-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 12px;
  }
  @media (prefers-color-scheme: dark) {
    .ds-brand { border-bottom-color: rgba(0,0,0,0.08); }
  }
  .ds-brand img { height: 44px; width: auto; }
  .ds-brand-text {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.5);
  }
  @media (prefers-color-scheme: dark) { .ds-brand-text { color: rgba(20,20,20,0.5); } }

  /* Neu-anlegen-Button */
  .ds-fab {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 11px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: filter 0.15s;
    box-shadow: 0 4px 14px rgba(232,70,30,0.28);
  }
  .ds-fab:hover { filter: brightness(1.1); }
  .ds-fab svg { flex: 0 0 auto; }

  /* Navigation */
  .ds-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
  }
  .ds-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ds-group-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    padding: 8px 12px 4px;
  }
  @media (prefers-color-scheme: dark) { .ds-group-label { color: rgba(20,20,20,0.45); } }

  .ds-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.12s;
  }
  @media (prefers-color-scheme: dark) { .ds-item { color: rgba(20,20,20,0.7); } }
  .ds-item-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .ds-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
  @media (prefers-color-scheme: dark) {
    .ds-item:hover { background: rgba(20,20,20,0.06); color: #141414; }
  }
  .ds-item.active {
    background: #fff;
    color: #141414;
  }
  @media (prefers-color-scheme: dark) {
    .ds-item.active { background: #141414; color: #f5f4f0; }
  }
  .ds-item.active .ds-item-icon { color: var(--accent); }

  /* User-Block unten */
  .ds-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 16px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.12s;
  }
  @media (prefers-color-scheme: dark) {
    .ds-user { border-top-color: rgba(0,0,0,0.08); }
  }
  .ds-user:hover { background: rgba(255,255,255,0.06); }
  @media (prefers-color-scheme: dark) { .ds-user:hover { background: rgba(20,20,20,0.05); } }
  .ds-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    flex: 0 0 auto;
  }
  .ds-user-body { min-width: 0; flex: 1; }
  .ds-user-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (prefers-color-scheme: dark) { .ds-user-name { color: #141414; } }
  .ds-user-role {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (prefers-color-scheme: dark) { .ds-user-role { color: rgba(20,20,20,0.55); } }

  /* ---- Screen-Padding anpassen ---- */
  .screen {
    padding-top: 0;
    padding-bottom: 48px;
    min-height: auto;
  }
  .hero { padding: 0 0 8px 0; }

  /* Topbar: links-ausgerichtet, dezenter */
  .topbar {
    position: sticky;
    top: 0;
    padding: 8px 0 16px;
    margin: 0 0 24px 0;
    background: linear-gradient(to bottom, var(--bg) 85%, transparent);
    border-bottom: 1px solid var(--divider);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .topbar-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    flex: 1;
  }
  .topbar-btn[data-nav="/home"],
  .topbar-btn[data-nav="/more"] { opacity: 0.35; }

  /* Cards */
  .card, .section-card, .tile {
    border-radius: 14px;
    padding: 20px 24px;
  }

  /* Bottom-Sheets auf Desktop → zentrierte Modale */
  .modal-sheet, .sheet, .drawer, .bs-sheet {
    max-width: 640px !important;
    margin: 5vh auto !important;
    border-radius: 16px !important;
    max-height: 90vh !important;
    top: 5vh !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    position: fixed !important;
  }

  button, .btn {
    transition: background 0.12s ease, transform 0.05s ease, filter 0.12s ease;
  }
  button:hover:not(.ds-item):not(.ds-fab) { filter: brightness(0.97); }

  .ord-stat:hover, .contact-row:hover, .order-row:hover,
  .todo-item:hover, .bo-preview-row:hover, .gl-row:hover {
    background: var(--bg-2);
    cursor: pointer;
  }
}

/* XL-Screens */
@media (min-width: 1440px) {
  :root { --sidebar-w: 280px; --desktop-pad: 56px; }
}

/* ==========================================================
   GL DASHBOARD (Home für GL-User)
   Auf Mobile kompakt, Desktop breit
   ========================================================== */
.gl-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 24px 20px;
  background: linear-gradient(135deg, #141414 0%, #2a2a2a 100%);
  color: #fff;
  border-radius: 18px;
  margin: 0 16px 20px;
}
.gl-hero-greet {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
.gl-hero-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.gl-hero-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
}
.gl-hero-plan {
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 16px 18px;
}
.gl-hero-plan-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
}
.gl-hero-plan-bar {
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.gl-hero-plan-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #e8461e, #e8a847);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gl-hero-plan-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.gl-hero-plan-stats strong { font-size: 15px; font-weight: 800; color: #fff; }
.gl-hero-plan-pct {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #e8a847 !important;
}

.gl-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 16px;
  margin-bottom: 20px;
}
.gl-kpi {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 16px 14px;
}
.gl-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.gl-kpi-value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 6px;
}
.gl-kpi-sub {
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.4;
}
.gl-kpi.success { border-left: 3px solid var(--success); }
.gl-kpi.warn    { border-left: 3px solid var(--warn); }
.gl-kpi.danger  { border-left: 3px solid var(--danger); }

.gl-grid-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 0 16px 32px;
}
.gl-panel {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 14px;
  overflow: hidden;
}
.gl-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--divider);
}
.gl-panel-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.gl-panel-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
}
.gl-panel-body {
  display: flex;
  flex-direction: column;
}
.gl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--divider);
  cursor: pointer;
  transition: background 0.12s;
}
.gl-row:first-child { border-top: none; }
.gl-row-thumb {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex: 0 0 auto;
}
.gl-row-body { flex: 1; min-width: 0; }
.gl-row-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl-row-sub {
  font-size: 11.5px;
  color: var(--text-2);
  margin-top: 2px;
}
.gl-row-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.gl-empty {
  padding: 24px 18px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

/* Segment-Bars im Plan-Panel */
.gl-seg-row {
  display: grid;
  grid-template-columns: 72px 1fr 80px;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--divider);
}
.gl-seg-row:first-child { border-top: none; }
.gl-seg-label { font-size: 13px; font-weight: 700; color: var(--text); }
.gl-seg-bar {
  height: 8px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
}
.gl-seg-fill {
  height: 100%;
  border-radius: 999px;
}
.gl-seg-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Desktop Dashboard Adjustments */
@media (min-width: 768px) {
  .gl-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .gl-hero {
    grid-template-columns: 2fr 1fr;
    padding: 36px 40px;
    border-radius: 20px;
    margin: 0 0 28px;
    align-items: center;
  }
  .gl-hero-title { font-size: 36px; }
  .gl-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 0;
    margin-bottom: 24px;
  }
  .gl-kpi { padding: 22px 20px; }
  .gl-kpi-value { font-size: 30px; }
  .gl-grid-2col {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0;
  }
}
@media (min-width: 1440px) {
  .gl-kpi-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ==========================================================
   BACKOFFICE PREVIEW STYLES
   Styling für die aufgewerteten Stub-Seiten
   ========================================================== */
.bo-hero {
  background: linear-gradient(135deg, #141414 0%, #2a2a2a 100%);
  color: #fff;
  padding: 28px 24px;
  border-radius: 18px;
  margin: 0 16px 20px;
  position: relative;
  overflow: hidden;
}
.bo-hero-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(232,70,30,0.2);
  color: #ffb8a1;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.bo-hero-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: #fff;
}
.bo-hero-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  max-width: 560px;
}
.bo-section { margin: 24px 16px; }
.bo-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-2);
  margin-bottom: 12px;
  padding-left: 4px;
}
.bo-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.bo-stat {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 18px 16px;
}
.bo-stat-num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
}
.bo-stat-lbl {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
}
.bo-stat-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}
.bo-stat.accent .bo-stat-num { color: var(--accent); }
.bo-stat.warn { background: var(--warn-soft); border-color: transparent; }
.bo-stat.warn .bo-stat-num { color: var(--warn); }
.bo-stat.success { background: var(--success-soft); border-color: transparent; }
.bo-stat.success .bo-stat-num { color: var(--success); }

.bo-preview {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 14px;
  overflow: hidden;
}
.bo-preview-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--divider);
}
.bo-preview-row:first-child { border-top: none; }
.bo-preview-thumb {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  flex: 0 0 auto;
  font-size: 18px;
}
.bo-preview-body { flex: 1; min-width: 0; }
.bo-preview-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bo-preview-sub {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bo-preview-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text-2);
  flex: 0 0 auto;
  white-space: nowrap;
}
.bo-preview-tag.ok { background: var(--success-soft); color: var(--success); }
.bo-preview-tag.warn { background: var(--warn-soft); color: var(--warn); }
.bo-preview-tag.danger { background: var(--danger-soft); color: var(--danger); }

.bo-cta {
  background: var(--card);
  border: 1px dashed var(--text-3);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  margin: 24px 16px 32px;
}
.bo-cta-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.bo-cta-sub {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 16px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}
.bo-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--text);
  color: var(--bg);
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  border: none;
  cursor: pointer;
}
.bo-cta-btn:hover { filter: brightness(1.15); }

.bo-demo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  background: rgba(255,184,161,0.2);
  color: #ffb8a1;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .bo-hero { margin: 0 0 28px 0; padding: 36px 40px; border-radius: 20px; }
  .bo-hero-title { font-size: 36px; }
  .bo-section { margin: 32px 0; }
  .bo-stat-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .bo-stat { padding: 22px 20px; }
  .bo-stat-num { font-size: 34px; }
  .bo-cta { margin: 32px 0 0; padding: 32px; }
}

/* ==========================================================
   GLASSMORPHISM LAYER v1 — Apple-style depth & frosted glass
   Wirkt nach allen anderen Definitionen, überschreibt selektiv.
   ========================================================== */

/* Apple-Blau Redesign: ruhiger Off-White Background, keine Pastell-Blobs mehr */
body {
  background: #f5f5f7;
  min-height: 100vh;
}

/* Universelle Card: weiss, dünne Border, kein Glass-Effekt */
.gl-kpi, .gl-panel, .bo-section .settings-card,
.bo-section .bo-preview, .bo-stat,
.ord-card, .pip-card, .ord-stat {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: none;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 180ms ease;
}

.gl-kpi:hover, .gl-panel:hover, .ord-card:hover, .pip-card:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 0, 0, 0.12);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Pastell-Akzent-Karten: KPI-Karten alle einheitlich weiss.
   Die Farbe wandert in einen kleinen 4px-Akzent-Strich oben oder einen
   kleinen Pill, NICHT mehr in die ganze Karte. */
.gl-kpi.color-vanila,
.gl-kpi.color-alice,
.gl-kpi.color-honeydew,
.gl-kpi.color-peach,
.gl-kpi.color-lilac,
.gl-kpi.color-ghost {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
}
/* Subtile linke Akzentlinie statt Vollfärbung */
.gl-kpi.color-vanila    { box-shadow: inset 3px 0 0 0 rgba(207, 167, 30, 0.7); }
.gl-kpi.color-alice     { box-shadow: inset 3px 0 0 0 rgba(74, 124, 209, 0.7); }
.gl-kpi.color-honeydew  { box-shadow: inset 3px 0 0 0 rgba(34, 135, 74, 0.7); }
.gl-kpi.color-peach     { box-shadow: inset 3px 0 0 0 rgba(220, 90, 60, 0.7); }
.gl-kpi.color-lilac     { box-shadow: inset 3px 0 0 0 rgba(140, 100, 200, 0.7); }
.gl-kpi.color-ghost     { box-shadow: inset 3px 0 0 0 rgba(120, 120, 120, 0.4); }
.gl-kpi:hover           { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
.gl-kpi.color-vanila:hover    { box-shadow: inset 3px 0 0 0 rgba(207, 167, 30, 0.7), 0 1px 3px rgba(0,0,0,0.04); }
.gl-kpi.color-alice:hover     { box-shadow: inset 3px 0 0 0 rgba(74, 124, 209, 0.7), 0 1px 3px rgba(0,0,0,0.04); }
.gl-kpi.color-honeydew:hover  { box-shadow: inset 3px 0 0 0 rgba(34, 135, 74, 0.7), 0 1px 3px rgba(0,0,0,0.04); }
.gl-kpi.color-peach:hover     { box-shadow: inset 3px 0 0 0 rgba(220, 90, 60, 0.7), 0 1px 3px rgba(0,0,0,0.04); }
.gl-kpi.color-lilac:hover     { box-shadow: inset 3px 0 0 0 rgba(140, 100, 200, 0.7), 0 1px 3px rgba(0,0,0,0.04); }
.gl-kpi.color-ghost:hover     { box-shadow: inset 3px 0 0 0 rgba(120, 120, 120, 0.4), 0 1px 3px rgba(0,0,0,0.04); }
/* KPI Texte: konsistent, kein Pastell-Tint mehr */
.gl-kpi .gl-kpi-value,
.gl-kpi.color-vanila .gl-kpi-value,
.gl-kpi.color-alice .gl-kpi-value,
.gl-kpi.color-honeydew .gl-kpi-value,
.gl-kpi.color-peach .gl-kpi-value,
.gl-kpi.color-lilac .gl-kpi-value,
.gl-kpi.color-ghost .gl-kpi-value {
  color: #1d1d1f !important;
}
.gl-kpi .gl-kpi-label,
.gl-kpi.color-vanila .gl-kpi-label,
.gl-kpi.color-alice .gl-kpi-label,
.gl-kpi.color-honeydew .gl-kpi-label,
.gl-kpi.color-peach .gl-kpi-label,
.gl-kpi.color-lilac .gl-kpi-label,
.gl-kpi.color-ghost .gl-kpi-label,
.gl-kpi .gl-kpi-sub,
.gl-kpi.color-vanila .gl-kpi-sub,
.gl-kpi.color-alice .gl-kpi-sub,
.gl-kpi.color-honeydew .gl-kpi-sub,
.gl-kpi.color-peach .gl-kpi-sub,
.gl-kpi.color-lilac .gl-kpi-sub,
.gl-kpi.color-ghost .gl-kpi-sub {
  color: #6e6e73 !important;
  opacity: 1 !important;
}

/* Dark Mode: dunkle Karten mit hellem Text */
@media (prefers-color-scheme: dark) {
  body { background: #000000; }
  .gl-kpi, .gl-panel, .bo-section .settings-card,
  .bo-section .bo-preview, .bo-stat,
  .ord-card, .pip-card, .ord-stat,
  .gl-kpi.color-vanila, .gl-kpi.color-alice,
  .gl-kpi.color-honeydew, .gl-kpi.color-peach,
  .gl-kpi.color-lilac, .gl-kpi.color-ghost {
    background: #1c1c1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
  .gl-kpi .gl-kpi-value,
  .gl-kpi.color-vanila .gl-kpi-value,
  .gl-kpi.color-alice .gl-kpi-value,
  .gl-kpi.color-honeydew .gl-kpi-value,
  .gl-kpi.color-peach .gl-kpi-value,
  .gl-kpi.color-lilac .gl-kpi-value,
  .gl-kpi.color-ghost .gl-kpi-value {
    color: #ffffff !important;
  }
  .gl-kpi .gl-kpi-label,
  .gl-kpi.color-vanila .gl-kpi-label,
  .gl-kpi.color-alice .gl-kpi-label,
  .gl-kpi.color-honeydew .gl-kpi-label,
  .gl-kpi.color-peach .gl-kpi-label,
  .gl-kpi.color-lilac .gl-kpi-label,
  .gl-kpi.color-ghost .gl-kpi-label,
  .gl-kpi .gl-kpi-sub,
  .gl-kpi.color-vanila .gl-kpi-sub,
  .gl-kpi.color-alice .gl-kpi-sub,
  .gl-kpi.color-honeydew .gl-kpi-sub,
  .gl-kpi.color-peach .gl-kpi-sub,
  .gl-kpi.color-lilac .gl-kpi-sub,
  .gl-kpi.color-ghost .gl-kpi-sub {
    color: #98989D !important;
  }
}

/* GL-Hero (Home / Dashboard) bleibt dunkel */
.gl-hero {
  background: #1d1d1f !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

/* BO-Hero (Listen-Seiten) — KOMPLETT NEU im Bestellungen-Pattern: hell, kompakt, klare Hierarchie */
.bo-hero {
  background: transparent !important;
  color: var(--text);
  padding: 8px 28px 18px !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
  overflow: visible;
  display: block;
}
.bo-hero-badge {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--text-2) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 0 0 4px 0 !important;
  border: none !important;
}
.bo-hero-title {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 6px 0 !important;
  color: var(--text) !important;
  line-height: 1.05;
}
.bo-hero-sub {
  font-size: 13px !important;
  color: var(--text-2) !important;
  line-height: 1.45;
  max-width: 720px;
  margin: 0 !important;
}
/* Plus-Button rechts oben — Bestellungen-Style runder Kreis */
.bo-hero-cta {
  position: absolute;
  top: 8px;
  right: 28px;
  width: 44px;
  height: 44px;
  background: var(--accent, var(--accent));
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 69, 25, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: none;
  transition: background 160ms ease, transform 160ms ease;
  /* Beschriftung "Neuer Kontakt" verstecken — nur das + bleibt */
  font-size: 0 !important;
}
.bo-hero-cta::before {
  content: "+";
  font-size: 22px;
  font-weight: 500;
}
.bo-hero-cta:hover {
  background: var(--accent-hover, var(--accent-hover));
  transform: none;
}
.bo-hero-cta:active { transform: scale(0.95); }

@media (prefers-color-scheme: dark) {
  .bo-hero-title { color: #fff !important; }
  .bo-hero-badge, .bo-hero-sub { color: #98989D !important; }
}
/* Plan-Bar im Hero: dezent, klickbar */
.gl-hero-plan {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}
.gl-hero-plan:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.15);
  transform: none;
}
/* Plan-Fortschritts-Balken in Apple-Blau */
.gl-hero-plan-bar-fill {
  background: var(--accent) !important;
}
.gl-hero-plan:active { transform: translateY(0); }
.gl-hero-plan-arrow {
  display: inline-block;
  margin-left: 6px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
  font-weight: 700;
}
.gl-hero-plan:hover .gl-hero-plan-arrow {
  opacity: 0.85;
  transform: translateX(0);
}

/* Sidebar: ruhig dunkel, ohne Glas */
.ds-sidebar {
  background: #1d1d1f;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* Topbar: solide weiss mit dünner Border */
.topbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Modale Dialoge: solide weiss */
.modal {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.18),
    0 6px 16px rgba(0, 0, 0, 0.08);
}
.modal-overlay, .modal-bg {
  background: rgba(0, 0, 0, 0.40) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Neu-Anlegen-Button: Apple-Blau, klar und ruhig */
.ds-cta {
  background: var(--accent);
  box-shadow: none;
  transition: background 160ms ease;
}
.ds-cta:hover {
  background: var(--accent-hover);
  transform: none;
  box-shadow: none;
}

/* Pills: solide Hintergründe, dezente Borders */
.pill, .bo-preview-tag, .ord-stage-pill {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: none;
}

/* Toast: solides Anthrazit */
.toast {
  background: #1d1d1f !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

/* KPI-Wert: optionaler Stk-Suffix kleiner & dezent */
.gl-kpi-unit {
  font-size: 0.45em;
  font-weight: 500;
  opacity: 0.55;
  letter-spacing: 0.04em;
  margin-left: 4px;
  vertical-align: 0.25em;
  text-transform: lowercase;
}

/* Sanftere Übergänge global */
.gl-row, .ord-card, .bo-preview-row, .pip-card, .setting-row {
  transition: background 180ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gl-row:hover, .bo-preview-row:hover, .setting-row:hover {
  background: rgba(255, 255, 255, 0.45);
  transform: translateX(2px);
}

/* Inputs: solide weiss, klare Border, blauer Focus */
input[type="text"], input[type="number"], input[type="email"],
input[type="search"], input[type="month"], input[type="date"], input[type="time"],
select, textarea {
  background: #ffffff;
  backdrop-filter: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
input:focus, select:focus, textarea:focus {
  background: #ffffff;
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 69, 25, 0.18);
}

/* Reduced motion: keine Drift-Animation */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .gl-kpi, .gl-panel, .ord-card, .pip-card,
  .gl-row, .bo-preview-row, .setting-row {
    transition: none;
  }
}

/* Mobile: weniger Blur-Layer (Performance), aber gleicher Look */
@media (max-width: 768px) {
  .gl-kpi, .gl-panel, .modal {
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }
  body { background-attachment: scroll; }
}

/* ==========================================================
   GOAL-DETAIL CROSSTABLE — Kunde × Produkt im Glassmorphism-Look
   ========================================================== */
.gd-hero {
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
    linear-gradient(160deg, #1a1a1c 0%, #232325 100%);
  color: #fff;
  border-radius: 20px;
  padding: 32px 36px;
  margin: 0 0 24px 0;
  box-shadow: 0 20px 60px rgba(15, 15, 15, 0.18), 0 4px 10px rgba(15, 15, 15, 0.08);
}
.gd-hero-num {
  font-size: 48px; font-weight: 800; letter-spacing: -0.02em;
}
.gd-hero-of { opacity: 0.45; font-weight: 500; }
.gd-hero-lbl { opacity: 0.7; margin-top: 4px; font-size: 13px; }
.gd-hero-bar {
  position: relative; height: 8px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.08); margin-top: 18px; overflow: hidden;
}
.gd-hero-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--accent);
  border-radius: 99px; transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gd-hero-bar-pending {
  position: absolute; inset: 0 auto 0 0;
  background: rgba(255, 255, 255, 0.18); border-radius: 99px;
}

.gd-table-wrap {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  overflow: auto;
  margin: 0 0 24px 0;
  box-shadow: 0 8px 28px rgba(20, 20, 20, 0.06);
}
.gd-table {
  width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums;
}
.gd-table th, .gd-table td {
  padding: 12px 16px; text-align: right; font-size: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.gd-table thead th {
  font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-2, #555); background: rgba(255, 255, 255, 0.45);
  position: sticky; top: 0; backdrop-filter: blur(20px);
}
.gd-th-prod, .gd-prod { text-align: left !important; }
.gd-prod {
  font-weight: 600; max-width: 240px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.gd-cell { font-weight: 500; }
.gd-zero { color: var(--text-3, #aaa); font-weight: 300; }
.gd-num { font-weight: 600; }
.gd-total { background: rgba(0, 0, 0, 0.025); }
.gd-grand {
  background: rgba(0, 69, 25, 0.08);
  color: var(--accent);
  font-weight: 800;
}
.gd-foot td {
  border-top: 2px solid rgba(0, 0, 0, 0.08);
  font-weight: 700; background: rgba(255, 255, 255, 0.4);
}
.gd-table tbody tr {
  transition: background 150ms ease;
}
.gd-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Topbar-Action wird auf Desktop ausgeblendet (bo-hero-cta übernimmt) */
.topbar-action {
  display: none;
}
@media (max-width: 899px) {
  /* Mobile: Topbar-Action sichtbar als runder Plus-Button */
  .topbar-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--accent, var(--accent));
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 0;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 69, 25, 0.22);
    transition: background 160ms ease, transform 160ms ease;
  }
  .topbar-action::before {
    content: "+";
    font-size: 22px;
    font-weight: 500;
  }
  .topbar-action:hover { background: var(--accent-hover, var(--accent-hover)); }
  .topbar-action:active { transform: scale(0.95); }
}

/* (alter glasiger CTA gelöscht — neuer runder blauer Plus oben in dieser Datei) */
.bo-hero { position: relative; }

/* Auf Desktop: Topbar mit Title oberhalb der bo-hero ist redundant — verstecken */
@media (min-width: 900px) {
  .topbar:has(+ .bo-hero) {
    display: none;
  }
  /* Falls bo-hero direkt nach topbar kommt, etwas mehr Padding oben */
  .bo-hero {
    padding-top: 28px !important;
  }
}

/* ==========================================================
   DESKTOP-FORM-LAYOUT v2 — sauber, kompakt, klar lesbar.
   Modal mittig, weisse Inputs mit klarem Border, einheitliches
   Padding, sticky Save-Button am unteren Rand.
   ========================================================== */
@media (min-width: 900px) {
  /* Backdrop: mittig statt slide-up vom unteren Rand */
  .modal-backdrop {
    align-items: center !important;
    padding: 32px;
  }
  .modal-backdrop > .modal {
    max-width: 640px;
    width: 100%;
    max-height: 86vh;
    min-height: 0;
    border-radius: 20px;
    margin: 0 auto;
    animation: modalPop 0.24s cubic-bezier(0.2, 0.9, 0.4, 1);
    background: #fff;
    box-shadow:
      0 32px 80px rgba(15, 15, 15, 0.22),
      0 8px 24px rgba(15, 15, 15, 0.10);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  @keyframes modalPop {
    from { opacity: 0; transform: scale(0.97) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }

  /* Drag-Handle ausblenden auf Desktop */
  .modal .modal-handle { display: none; }

  /* Header: klar getrennt mit dünner Border */
  .modal .modal-header {
    padding: 20px 28px;
    border-bottom: 1px solid #ececec;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    flex-shrink: 0;
  }
  .modal .modal-title {
    font-size: 19px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
  }
  .modal .modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #f4f4f4;
    color: #666;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 160ms ease;
  }
  .modal .modal-close:hover {
    background: #e8e8e8;
    color: #1a1a1a;
  }

  /* Body: scrollbar zwischen Header und Footer */
  .modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 !important;
  }
  .modal .modal-body > div[style*="padding"] {
    padding: 0 !important;
  }

  /* Form-Section: Grid 2-spaltig, einheitlich gepolstert */
  .modal .form-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    padding: 20px 28px;
    border-bottom: 1px solid #f0f0f0;
  }
  .modal .form-section:last-of-type { border-bottom: 0; }

  /* Section-Title: über volle Breite, kompakt darüber */
  .modal .form-section-title {
    padding: 22px 28px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #888;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    margin: 0;
  }
  .modal .form-section-title:first-child { border-top: 0; }

  /* form-row: Grid-Cell, ohne Bottom-Margin */
  .modal .form-row {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .modal .form-row label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
  }

  /* Inputs: SOLIDE weiss, kein Glas-Effekt im Modal */
  .modal .form-row input,
  .modal .form-row select,
  .modal .form-row textarea,
  .modal input[type="text"],
  .modal input[type="email"],
  .modal input[type="tel"],
  .modal input[type="number"],
  .modal input[type="date"],
  .modal input[type="time"],
  .modal input[type="month"],
  .modal input[type="search"],
  .modal select,
  .modal textarea {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: inherit;
    color: #1a1a1a;
    box-shadow: none !important;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }
  .modal .form-row input:focus,
  .modal .form-row select:focus,
  .modal .form-row textarea:focus,
  .modal input:focus, .modal textarea:focus, .modal select:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(0, 69, 25, 0.18) !important;
    background: #fff !important;
  }
  .modal textarea { min-height: 100px; resize: vertical; }

  /* Bestell-Modal: Produkte untereinander statt 2-spaltig — übersichtlicher
     bei vielen Produkten (Drinks + Merch) */
  .modal .form-section#or-products {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .modal .form-section#or-products .form-row[data-prod] {
    grid-column: 1 / -1;
  }

  /* Lange Felder bekommen volle Breite (Notizen etc.) — das Kontakt-Formular
     steuert volle Breite über die .full-Klasse (.ct-fields), nicht hier. */
  .modal .form-row.full-width,
  .modal .form-section .form-row:has(textarea) {
    grid-column: 1 / -1;
  }

  /* Chip-Row: über volle Breite, eigenes Padding */
  .modal .chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 28px 22px;
    margin: 0;
  }
  .modal .chip-row .chip {
    padding: 9px 16px !important;
    border-radius: 999px !important;
    border: 1px solid #d8d8d8 !important;
    background: #fff !important;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 160ms ease;
  }
  .modal .chip-row .chip:hover { border-color: #b0b0b0; }
  .modal .chip-row .chip.green-sel,
  .modal .chip-row .chip.selected {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
  }

  /* Ansprechpersonen-Sektion: bleibt stacked (komplexe Sub-Forms) */
  .modal .form-section#ct-persons {
    display: block;
    padding: 20px 28px;
  }
  .modal .form-section#ct-persons + button.btn-secondary {
    margin: 0 28px 20px;
    width: calc(100% - 56px);
    border: 1px dashed #d0d0d0;
    background: transparent;
    color: #555;
    border-radius: 10px;
    padding: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 160ms ease;
  }
  .modal .form-section#ct-persons + button.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0, 69, 25, 0.04);
  }

  /* Save-Button: sticky am Unterrand, Apple-Blau */
  .modal .btn-primary,
  .modal .btn-primary.green {
    margin: 0 !important;
    padding: 14px 24px !important;
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer;
    width: 100%;
    border-top: 1px solid #ececec !important;
    transition: background 160ms ease;
    flex-shrink: 0;
  }
  .modal .btn-primary:hover,
  .modal .btn-primary.green:hover {
    background: var(--accent-hover) !important;
  }

  /* Inline-Links („+ aus Kontakten", „+ Neuer Kontakt") in Apple-Blau */
  .modal label a,
  .modal label button {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--accent) !important;
    text-decoration: none !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    cursor: pointer;
    transition: all 160ms ease;
  }
  .modal label a:hover,
  .modal label button:hover {
    background: rgba(0, 69, 25, 0.08) !important;
  }
  /* Strichelter Persons-Add-Button auch in Blau */
  .modal .form-section#ct-persons + button.btn-secondary:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: rgba(0, 69, 25, 0.04) !important;
  }

  /* Number-Spinner überall im Modal komplett entfernen */
  .modal input[type="number"]::-webkit-inner-spin-button,
  .modal input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    display: none !important;
  }
  .modal input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  /* Qty-Stepper: Inputs sollen nahtlos im Container sitzen, kein Border, kein eigener Background */
  .modal .qty-stepper {
    grid-column: 1 / -1;
    background: #f4f4f4 !important;
    border-radius: 10px !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center;
    gap: 4px;
  }
  .modal .qty-stepper input,
  .modal .qty-stepper input.or-kart,
  .modal .qty-stepper input.or-fl {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
    flex: 1;
    min-width: 0;
  }
  .modal .qty-stepper input:focus,
  .modal .qty-stepper input.or-kart:focus,
  .modal .qty-stepper input.or-fl:focus {
    background: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(0, 69, 25, 0.18) !important;
    border-radius: 6px !important;
  }
  .modal .qty-btn {
    width: 32px !important;
    height: 32px !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    cursor: pointer;
    box-shadow: none !important;
    line-height: 1;
    transition: background 120ms ease, border-color 120ms ease;
  }
  .modal .qty-btn:hover {
    background: #f6f6f6 !important;
    border-color: #c8c8c8 !important;
  }
  .modal .qty-btn:active { transform: scale(0.95); }
  .modal .qty-stepper-row {
    grid-column: 1 / -1;
    display: flex !important;
    gap: 12px;
  }
  .modal .qty-label {
    font-size: 10px !important;
    color: var(--text-2) !important;
    margin: 0 6px 0 2px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Mobile-only Drag-Handle ausblenden auf Desktop */
  .modal::before { display: none !important; }
}

/* ==========================================================
   FRIZZLI LOGO — in Sidebar und auf Home-Seite
   ========================================================== */

/* Sidebar-Brand: Logo statt Text — füllt fast die ganze Sidebarbreite */
.ds-brand {
  padding: 28px 20px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-brand-logo {
  width: 100%;
  max-width: 200px;
  height: auto;
  filter: invert(1) brightness(2);
}
.ds-brand-text { display: none; }

/* Home: Logo-Strip ÜBER dem April-Plan-Hero — prominent */
.home-logo-strip {
  display: flex;
  justify-content: center;
  padding: 24px 0 28px;
  margin: 0;
}
.home-logo {
  height: 64px;
  width: auto;
}
@media (prefers-color-scheme: dark) {
  .home-logo {
    filter: invert(1) brightness(2);
  }
}
@media (max-width: 768px) {
  .home-logo-strip { padding: 24px 0 18px; }
  .home-logo { height: 56px; }
}

/* =====================================================================
   MOBILE-SAFETY OVERRIDES — höchste Priorität
   Manche Desktop-Regeln haben in der Vergangenheit ohne Media-Query
   die Mobile-Optik kaputt gemacht (Topbar-Titel am Bildschirmrand).
   Diese Regeln am Ende der Datei greifen IMMER auf Mobile <1024px,
   egal was vorher kommt.
   ===================================================================== */
@media (max-width: 1023px) {
  .ord-topbar {
    padding: 20px 20px 14px !important;
    margin-bottom: 0 !important;
  }
  .ord-stats {
    padding: 0 20px 16px !important;
    gap: 10px !important;
  }
  .bo-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .topbar {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ============================================================
   REDESIGN — Grüne Marken-Sidebar (Desktop, hell + dunkel)
   Überschreibt die alte dunkle/umschaltende Sidebar.
   ============================================================ */
@media (min-width: 1024px) {
  .desktop-sidebar {
    background: #004519 !important;
    color: #fff !important;
    border-right: 1px solid #003514 !important;
  }
  .ds-brand { border-bottom-color: rgba(255,255,255,0.12) !important; }
  .ds-brand-text { color: rgba(255,255,255,0.55) !important; }
  .ds-group-label { color: rgba(255,255,255,0.45) !important; }

  .ds-item { color: rgba(255,255,255,0.74) !important; }
  .ds-item:hover { background: rgba(255,255,255,0.10) !important; color: #fff !important; }
  .ds-item.active { background: #fff !important; color: #004519 !important; }
  .ds-item.active .ds-item-icon { color: #004519 !important; }

  /* „Neu anlegen": auf grünem Grund weiß statt grün, sonst unsichtbar */
  .ds-fab {
    background: #fff !important;
    color: #004519 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
  }
  .ds-fab:hover { filter: none !important; background: #f0efe9 !important; }

  .ds-user { border-top-color: rgba(255,255,255,0.12) !important; }
  .ds-user:hover { background: rgba(255,255,255,0.08) !important; }
  .ds-user-name { color: #fff !important; }
  .ds-user-role { color: rgba(255,255,255,0.6) !important; }
}

/* ============================================================
   MOCKUP-ANGLEICHUNG — Dashboard (heller Hero statt dunklem Block)
   ============================================================ */
@media (min-width: 1024px) {
  /* Doppeltes Zentral-Logo entfällt — Logo steht bereits in der Sidebar */
  .home-logo-strip { display: none !important; }

  /* Heller, markiger Hero im Mockup-Stil */
  .gl-hero, .bo-hero {
    background: linear-gradient(135deg, var(--card) 0%, var(--accent-soft) 160%) !important;
    color: var(--text) !important;
    border: 1px solid var(--divider) !important;
    box-shadow: var(--shadow-lg) !important;
  }
  .gl-hero::before, .bo-hero::before {
    background: radial-gradient(circle, var(--accent) 0%, transparent 60%) !important;
    opacity: 0.05 !important;
  }
  .gl-hero-title, .bo-hero-title { color: var(--text) !important; }
  .gl-hero-sub, .bo-hero-sub { color: var(--text-2) !important; }
  .gl-hero-greet, .bo-hero-badge {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
  }
  .gl-hero-plan {
    background: var(--bg-2) !important;
    border: 1px solid var(--divider) !important;
    backdrop-filter: none !important;
  }
  .gl-hero-plan-label, .gl-hero-plan-stats strong { color: var(--text) !important; }
  .gl-hero-plan-sub, .gl-hero-plan-stats { color: var(--text-2) !important; }
  .gl-hero-plan-bar { background: var(--card) !important; }
  .gl-hero-plan-bar-fill { background: var(--accent) !important; }
  .gl-hero-plan-pct { color: var(--accent) !important; }
}

/* ============================================================
   MOCKUP-ANGLEICHUNG — Bestellungen/Pipeline (Karten-Look)
   Funktionen bleiben; nur die Karten bekommen den Mockup-Stil.
   ============================================================ */
.ord-card, .pip-card {
  background: var(--card) !important;
  border: 1px solid var(--divider) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
}
.ord-card:hover, .pip-card:hover {
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--line-2, var(--divider)) !important;
}
.ord-stat { border-radius: 16px !important; }
/* Status-Badges in Marken-Tönen */
.ord-badge.badge-orange { background: var(--peach-soft, #fbeadd) !important; color: #b85f23 !important; }
.ord-badge.badge-success { background: var(--success-soft) !important; color: var(--success) !important; }
.ord-badge.badge-sand { background: var(--warn-soft) !important; color: var(--warn) !important; }

/* ============================================================
   ALLE SEITEN: Hero-Banner -> ruhiger heller Titel (wie Buchhaltung)
   ============================================================ */
.bo-hero {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 2px 2px 12px !important;
  overflow: visible !important;
  position: relative;
}
.bo-hero::before { display: none !important; }
.bo-hero-badge {
  display: inline-block !important;
  background: transparent !important;
  color: var(--text-3) !important;
  padding: 0 !important;
  margin-bottom: 4px !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
}
.bo-hero-title { color: var(--text) !important; font-size: 25px !important; letter-spacing: -0.03em !important; line-height: 1.1 !important; }
.bo-hero-sub { color: var(--text-3) !important; font-size: 13px !important; margin-top: 5px !important; font-weight: 400 !important; }
.bo-hero-cta {
  position: absolute !important; top: 0 !important; right: 0 !important;
  height: 36px !important; width: auto !important; padding: 0 15px !important;
  border-radius: 9px !important;
  background: var(--accent) !important; color: #fff !important;
  font-size: 13px !important; font-weight: 600 !important;
  box-shadow: none !important;
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
}

/* ====================================================================
   AUFKLAPPBARE SIDEBAR-GRUPPEN — nur Übertitel sichtbar, Klick öffnet
   ==================================================================== */
@media (min-width: 1024px) {
  .ds-nav { gap: 7px; }

  /* Übertitel = klickbarer Button mit Chevron */
  .ds-group-label {
    display: flex !important; align-items: center; gap: 7px;
    width: 100%; background: transparent; border: none;
    cursor: pointer; user-select: none;
    border-radius: 8px; margin: 0;
    padding: 8px 10px 8px 8px !important;
    transition: color .12s, background .12s;
  }
  .ds-group-label:hover { color: rgba(255,255,255,0.78) !important; background: rgba(255,255,255,0.06); }

  .ds-group-chev {
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px; flex: 0 0 auto;
    opacity: 0.65; transition: transform .18s ease;
  }
  .ds-group.open > .ds-group-label .ds-group-chev { transform: rotate(90deg); }

  /* Items ein-/ausklappen */
  .ds-group-items {
    display: flex; flex-direction: column; gap: 2px;
    overflow: hidden; max-height: 600px; opacity: 1; margin-top: 2px;
    transition: max-height .24s ease, opacity .16s ease, margin-top .16s ease;
  }
  /* Eingeklappt = komplett ausgeblendet (nur der Flyout zeigt die Items). Kein Inline-Aufklappen. */
  .ds-group.collapsed > .ds-group-items:not(.flyout-open) {
    display: none !important;
  }

  /* Ungruppierte Einträge (Home, Einstellungen) bleiben kompakt */
  .ds-group--plain { gap: 2px; }

  /* Buchhaltungs-Sektionen sind auf dem Desktop links im Menü — horizontale
     Buchhaltung/Cash haben ihre Tab-Leiste jetzt wieder sichtbar (eine Finanz-Gruppe links). */
}

/* ====================================================================
   SIDEBAR: Favoriten-Stern + Hover-Flyout für eingeklappte Gruppen
   ==================================================================== */
@media (min-width: 1024px) {
  /* Item-Zeile (Nav-Button + Stern) */
  .ds-itemrow { display: flex; align-items: center; gap: 2px; }
  .ds-itemrow > .ds-item { flex: 1; min-width: 0; }
  .ds-fav {
    flex: 0 0 auto; width: 26px; height: 26px; border: none; background: transparent;
    color: rgba(255,255,255,0.28); cursor: pointer; font-size: 13px; line-height: 1;
    border-radius: 7px; opacity: 0; transition: opacity .12s, color .12s, background .12s;
  }
  .ds-itemrow:hover .ds-fav { opacity: 1; }
  .ds-fav.on { opacity: 1; color: #f4c430; }
  .ds-fav:hover { background: rgba(255,255,255,0.12); color: #f4c430; }

  /* Favoriten-Gruppe: Label statisch, Items immer sichtbar */
  .ds-group-label--static { cursor: default; }
  .ds-group--fav .ds-group-chev { color: #f4c430 !important; transform: none !important; opacity: 1 !important; }

  /* Hover-Flyout: eingeklappte Gruppe öffnet ihre Items rechts daneben.
     Position wird per JS (fixed) gesetzt, damit der Flyout aus dem
     scrollenden Sidebar ausbrechen kann (overflow-y:auto würde ihn kappen). */
  .ds-group.collapsed:hover > .ds-group-label .ds-group-chev { transform: rotate(90deg); }
  /* Flyout = nahtlose Verlängerung des Sidebars: gleiche Farbe, keine Linie/kein Rand links */
  .ds-group-items.flyout-open {
    position: fixed; z-index: 200;
    max-height: 80vh !important; overflow-y: auto; opacity: 1 !important; pointer-events: auto !important;
    min-width: 232px; padding: 8px; margin: 0;
    background: #004519; border: none;
    border-radius: 0 14px 14px 0;
    box-shadow: 12px 16px 44px rgba(0,0,0,0.40);
    display: flex; flex-direction: column; gap: 2px;
  }
  .ds-group-items.flyout-open .ds-fav { opacity: 1; }

  /* User-Zeile mit Logout-Button unten */
  .ds-userrow { display: flex; align-items: center; gap: 6px; }
  .ds-userrow > .ds-user { flex: 1; min-width: 0; }
  .ds-logout {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
    border: none; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7);
    display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s;
  }
  .ds-logout:hover { background: rgba(255,255,255,0.16); color: #fff; }
}